Hyper Text Markup Language (HTML)
Markup Languages
A person is is supposed to edit some text for publication will often take that text and "mark it up" with instructions on how the text should be displayed:
The above markup is requesting that the text should be formatted to look like this:
The Hyper Text Markup Language (HTML) allows a user to markup plain text with tags. The marked up text will then be interpreted by a web browser for presentation to a user. A tag is a formatting instruction contained between angle braces: <>. For example, here is the same markup as shown in the example above, but expressed in HTML:
The example above uses these tags:
- h1 to a level one heading
- p to indicate a paragraph
- em to indicate that the text should be emphasized (italics in this case)
- strong to make the text stand out (bold in this case)
Usually there is both a start tag and an end tag. The end tag has a leading "/". The general format is:
<tag> the tag's effect is here </tag>
In the example above, <h1> started a level-one heading and </h1> ended that formatting. Similarly, <em> started the italics and </em> ended the italic formatting.
There are some singleton tags, where just one tag does the job (i.e., there is no ending tag). A trailing "/" indicates a such a singleton tag. A couple examples of this are:
- <br /> to break to a new line at this spot
- <hr /> to insert a line across the page here (a "horizontal rule")
A web page designer creates a web page using HTML, then the HTML is given to and interpreted by a web browser such as Internet Explorer or Firefox. How do we know that h1 indicates a level-one heading? Over the past several years, people have been agreeing on all sorts of tags. Collectively, these tags are known as HTML (hyper text markup language). The full list of official HTML tags can be found at http://www.w3c.org.
Another Example
Here is a slightly longer example that uses most of the tags described above. This HTML:
<h1>Rabbit Learns A Lesson</h1>
<h2>A Short Story</h2>
<p>The path to the river was narrow and steep, and <strong>full of rocks</strong>. Rabbit was thinking that he probably should have planned to take a <em>better route</em> down the hill.</p>
<p>On the other side of the river was a wonderful meadow, and rabbit was in a hurry to get there.</p>
<hr />
will yield following when interpreted by Internet Explorer:
Larger Structure
There is a bit more structure to a web page than is described above. There is an optional document type, which we'll skip over for the moment. Then there are two main sections -- the head and body sections. The head can hold many useful items, which could be loosely described as "overhead". The only head tag that we'll cover now is the title. The body holds the content that makes up the main body of the page. Both the head and the body are contained within the html tag:
<html>
<head>
<title> The Title Goes Here </title>
</head><body>
The visible content of the page goes here.
</body>
</html>
Notice that the html tags encompass both the head and the body:
Even though there are quite a few HTML tags, quite a bit can be done with just the following tags:
- <strong> for bold (this replaces the deprecated <b> tag)
- <em> for italics (this replaces the deprecated <i> tag)
- <h1> for large "header" text, such as at the start of a document
- <h2> for slightly smaller header text (there also the tags h3 through h6)
- <center> to center an item on the page
- <p> to indicate the start and end of a paragraph
- <br /> to for a newline (an ending </br> is not required for this tag)
- <hr /> to display a "horizontal rule", which is simply a line drawn across the page
- <p style="color: red">text here is now red</font>
- <img src="smiley.gif" alt="Smiley Face" /> to display the indicated GIF picture at this point in the document
- <a href="http://www.disney.com">Click here for fun!</a> -- this tag will cause a web browser to indicate that the words "Click here for fun!" should be made to look clickable, and if the user does click somewhere in that phrase, the Disney web pages should be brought up on the browser.
The last two tags utilize attributes, which are discussed below.
Let's take a last look a the Short Story web page. An almost complete example of its HTML looks like this:
<html>
<head>
<title>A Short Story</title>
</head><body>
<h1>A Short Story</h1>
<p>The path to the river was <em>narrow</em> and steep, and <strong>full of rocks</strong>.</p>
</body>
</html>
The html tag encompasses the entire structure of the page. Notice the head and title tags -- the effect of the title tag is shown in this image, and the scope of the body tag is also indicated:
Attributes
A tag's behavior can be modified via attributes. For example, look at the effect of the align attribute the following example. Here is the HTML for three short paragraphs:
<strong> <p>One.</p> <p>Beautiful.</p> <p>Day.</p> </strong>
Which is interpreted by the browser as follows:
One.
Beautiful.
Day.
Here I'll add the align attribute to the middle paragraph:
<strong> <p>One.</p> <p style="text-align: center">Beautiful.</p> <p>Day.</p> </strong>
Which is presented as:
One.
Beautiful.
Day.
If you are viewing these notes in a browser, resize the width the of browser -- notice that the word Beautiful stays centered in the browswer as the browser's size changes.
Most HTML tags have a long list of possible attributes. As another example, let's modify the hr tag with these two attributes: <hr style="width: 50%" />. When displayed, this tag yields:
To change the width, height, and color of the horizontal rule use: <hr style="width: 50%; height: 5px; background-color: yellow" />
A width of fifty percent indicates that the width of the line should be fifty percent of the current width of the browser window.
Two tags listed above were the img (image) tag and the a (anchor) tag. The image tag places an image on the web page. For example, the tag <img src="smiley.gif" /> would place a smiley face picture on the page:
Usually the img tag also includes the alt attribute to generate hover text: <img src="smiley.gif" alt="Smiley Face" />.
The alt text can be very useful to sight-impaired viewers a web page. If you are viewing these notes with a web browser, move the mouse over this second smiley face image to see the alt text.
Another useful attribute is found in the a tag (anchor tag). The tag anchors the end point of a hyperlink. The anchor tag identifies what part of the page can be clicked to move to a new page, and the href attribute (hypertext reference) identifies the destination of that click. For example, this anchor tag:
<a href="http://ford.com">Buy a car!</a>
indicates that the text "Buy a car!" should be a hyperlink, and that if that phrase is clicked then the browser should follow the link to Ford's web page:
A Few More Tags
A couple of other useful tags are for ordered and unordered lists. An ordered list is created with the ol tag, which containsli ("list item") tags. The following HTML
<ol>
<li>Red</li>
<li>Green</li>
<li>Blue</li>
</ol>
creates the following:
- Red
- Green
- Blue
Change the ordered list tag, ol, to an unordered list, ul tag:
<ul>
<li>Red</li>
<li>Green</li>
<li>Blue</li>
</ul>
and you get:
- Red
- Green
- Blue
Much, Much More
This has just been a rough introduction to HTML. There are several good books on HTML, plus some good on-line resources, such as at http://www.w3schools.com/HTML/. Also, you can see the official HTML specifications at the World Wide Web Consortium (http://www.w3.org/).
Creating and Editing a Web Page
Any simple text editor can be used to write your HTML. Make sure that the filename has the .htm or .html extension when you want to view it via a browser. There are also many programs, such as Microsoft Word, that can translate their content to HTML. The best way to create web pages is to use a program that specializes in web authoring, such as Macromedia Dreamweaver. Programs like Dreamweaver give you a WYSIWYG interface that generates HTML, and also allow you to edit the HTML directly.
To use use Microsoft Notepad to create a web page:
- Right-click the desktop, select New, select Text Document. Name the newly created file Demo.txt.
- Double click Demo.txt to open it.
- Type in your HTML, then exit Notepad.
- Rename the file Demo.html (if you cannot see filename extensions, go to Windows Explorer and click Tools, click Folder Options, click the View tab, and remove the check mark from "Hide extensions for known files types", click OK).
- Double click Demo.html to open it in a web browser.
- To make further changes, rename the file to Demo.txt to edit with Notepad, save your changes, then rename the file to Demo.html to view with a web browser.