Every web browser has a title at the top of the page and is specified in HTML. By default, the the title tag is located in the header of the HTML. Despite the default in HTML, it is possible to change the default title name with javascript. Below is a the basic snippet of javascript code that changes the current Web Browser title to “The Web Page title has been changed“.
document.title = "The Web Page title has been changed"
In the live demo below, the above snippet is inserted into the onclick event of an html input button. Before clicking the button below, note the current browser window title.
After clicking the button above, you will notice that the web browser title has been changed to The Web Page title has now been changed. Below is the actual code on how the button was created.
<input type="button" onclick="document.title='The Web Page title has been changed'" />
This is a quick tutorial on creating a dropdown in HTML. The example below has a name of myName and an id of myId. The main difference between the id and name is that the id is the identifier as used by javascript. On the other hand, name is the value recognized by form postbacks.
An HTML website contains mainly text, images, and link controls. A common way of organizing all the controls is by placing the elements into a <div> control. With a <div> control, you can manipulate everything from the font to placement in an HTML page using CSS (cascading style sheets). Note that although the CSS code for manipulation is beyond the scope of this tutorial, we will be using CSS to state whether or not to display a div box.
We begin with an example of a <div> control. At this point, the code does nothing special.
<body>
<div id="myDivBox">
<h2>My Title</h2>
<p>This is some sample text</p>
</div>
</body>
Next, we add CSS that controls whether or not to display the content of the <div> control. The CSS attribute is the keyword ‘display’. The ‘display’ keyword accepts the values ‘block‘, ‘none‘, ‘list-item‘, and ‘inline‘. Our example will utilize ‘none’ that hides the <div> control and ‘block‘ that will display it (as a block as opposed to inline). Our <div> control will intially begin hidden, so let’s add a style attribute to the <div> control as shown below.
<body>
<div id="myDivBox" style="display:none;">
<h2>My Title</h2>
<p>This is some sample text</p>
</div>
</body>
Next, we will add javascript method to control the CSS attributes of our <div> control. As with all javascript, the script belongs in the head. The method is called toggleDiv and accepts no inputs. What the script is doing is checking if the <div> control is in a ‘block‘ or ‘none‘ state. Whichever state is found, we set the opposite.
Finally, we will add an input button that will toggle whether or not to display the <div> control. The input button will call the javascript method via an onClick action.
<body>
<input type="button" value="Toggle" onclick="toggleDiv()">
<div id="myDivBox" style="display:none;">
<h2>My Title</h2>
<p>This is some sample text</p>
</div>
</body>
Here is a working example:
My Title
This is some sample text
A complete HTML example is listed below. To run this, simply copy the code into a file with an html extension.
RSS Feed
Posted in 
Tags: 
