The language used to create every Web page in the world is HyperText Markup Language (HTML). Although you can create Web pages with specialized Web page editing programs, such as Adobe Dreamweaver or Microsoft FrontPage, it's still nice to know how HTML works so you can modify Web pages manually or create unique effects that may be difficult or impossible to accomplish with a Web page editing program.
Much like a traditional programming language relies on keywords, HTML also relies on keywords, or tags, that follow a rigidly defined syntax. Instead of creating a working program like a traditional programming language, HTML creates Web pages that browsers can view.
In a traditional programming language, an error or bug can keep the entire program from running or make it calculate incorrectly. In HTML, an error can keep a Web page from appearing or just make the Web page display incorrectly. If you're interested in understanding the heart of Web page designing, you need to understand the basics of using HTML.
The basic HTML tab defines the entire HTML document like this:
<html>
</html>
Anything between the <html> and </html> tags will appear on the Web page.
Warning
The last tag uses a slash (/) to identify the end of the tag.
Generally, HTML tags work in pairs — the first tag defines something, and the second tag (the one beginning with a slash) marks the end of that definition. If you omit one of the <html> or </html> tags, your HTML Web page won't appear.
Warning
HTML tags are not case sensitive, so you could've defined the tags as <HTML> and </HTML>.
Most Web pages include a title, which appears in the title bar of a window. To display text in a window's title bar, type text in between the <title> and </title> tags inside the <head> and </head> tags like this:
<html>
<head>
<title>This text appears in the title bar.</title>
</head>
</html>The bulk of a Web page falls within the <body> and </body> tags. To display text, you need to use the paragraph tags <p> and </p> like this:
<html>
<head>
<title>This text appears in the title bar.</title>
</head>
<body>
<p>This text appears on the web page.</p>
</body>
</html>If you want to make sure a line of text breaks at a certain point, you can use the <br> tag, such as
<html>
<head>
<title>This text appears in the title bar.</title>
</head>
<body>
<p>This text appears on the web page.<br>This appears
on a separate line.</p>
</body>
</html>The preceding HTML code displays two lines of text like this:
This text appears on the web page. This appears on a separate line.
With lots of text appearing on a Web page, you may want to separate text with headings. HTML offers six types of headings that use tags, such as <h1> and </h1>. The following code produces the results shown in Figure 1-1:
<html>
<head>
<title>This text appears in the title bar.</title>
</head>
<body>
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
<p>This text appears on the web page.</p>
</body>
</html>
Text normally appears left-aligned, but you can also right-align or center-align text as well. To align text, you need to insert the following inside the first part of the paragraph or heading tag. The following code produces the results shown in Figure 1-2:
<html>
<head>
<title>This text appears in the title bar.</title>
</head>
<body>
<h1 align = "center">Heading 1</h1>
<p align = "right">This text appears on the web page.</p>
</body>
</html>
To make text stand out, you can emphasize it as bold, italics, or underline by using the following tags:
<b>and</b>to display text in bold<i>and</i>to display text in italic<u>and</u>to display text as underline
Just place these tags around the text you want to emphasize, such as
<html>
<head>
<title>This text appears in the title bar.</title>
</head>
<body>
<p>This text appears <b>bold</b>.</p>
<p>This text appears <i>italicized</i>.</p>
<p>This text appears <u>underlined</u>.</p>
</body>
</html>Color can further emphasize the appearance of text. To color text, surround it with the <font color = #xxyyzz> and </font> tags where #xxyyzz represents a color code, as shown in Table 1-1.
Note
Colors are defined in shades of red, blue, and green, represented as hexadecimal values. The xx portion defines the amount of red, the yy defines the amount of blue, and the zz defines the amount of green. The absence of a color is 00 whereas the maximum amount of a color is FF. By varying the shades of red, blue, and green as hexadecimal values, you can define your own colors.
Table V.1-1. HTML Color Codes
Color | Color Code |
|---|---|
Red | #FF00000 |
Turquoise | #00FFFF |
Light blue | #0000FF |
Dark blue | #0000A0 |
Light purple | #FF0080 |
Dark purple | #800080 |
Yellow | #FFFF00 |
Pastel green | #00FF00 |
Pink | #FF00FF |
White | #FFFFFF |
Light grey | #FFFFCC |
Black | #000000 |
Orange | #FF8040 |
Brown | #804000 |
Burgundy | #800000 |
Forest green | #808000 |
Grass green | #408080 |
The following HTML code displays text in red (#FF0000):
<html>
<head>
<title>This text appears in the title bar.</title>
</head>
<body>
<p>This text appears in <font color =
#FF0000>red</font> on the web page.</p>
</body>
</html>You can also make text appear larger or smaller by defining a size from 1 (smallest) to 7 (largest). The following HTML code makes the text appear large:
<html>
<head>
<title>This text appears in the title bar.</title>
</head>
<body>
<p>This text appears <font size = 7>large</font> on the
web page.</p>
</body>
</html>Because pages filled with HTML code can often be confusing to understand, you can sprinkle comments anywhere on your Web page. Comments always begin with <! and end with >, so anything you place within those two comment tags are ignored by the computer, such as
<html>
<head>
<title>This text appears in the title bar.</title>
</head>
<! This is a comment in a web page. >
<body>
<p>This text appears <font size = 7>large</font> on the
web page.</p>
</body>
</html>The three types of graphic files you can add on a Web page are JPEG (Joint Photographic Experts Group), GIF (Graphics Interchange Format), and PNG (Portable Network Graphics) files.
To add graphics on a Web page, you need to specify the graphic filename that you want to appear. So if you had a graphic image named duck.jpg, you could add it to a Web page like this:
<html>
<head>
<title>This text appears in the title bar.</title>
</head>
<body>
<img src = "duck.jpg">
</body>
</html>By default, Web pages can look pretty boring with a plain white background. To spice up the appearance of a Web page, you can modify the background to display a color or a graphic image. To define a background color, you have to define the RGB hexadecimal values like this:
<body bgcolor = #xxyyzz>
To define a background graphic, you need to specify the graphic filename like this:
<body background = "filename.ext">
You can define both a background color and a background image by combining both HTML commands on a single line like this:
<body bgcolor = #xxyyzz background = "filename.ext">
Web pages typically contain text and graphics, but the heart of Web pages are hyperlinks that connect a Web page to another Web page or a different part of the currently displayed Web page. The HTML code to create a hyper-link looks like this:
<a href = "address">hyperlink text</a>
The "address" can be a Web site URL (Uniform Resource Locator), such as www.whitehouse.gov or www.dummies.com, or a Web page filename, such as index.html. The hyperlink text is the word or phrase that appears as a link. So if you wanted to turn the phrase White House into a link, you could use the following HTML code:
<a href = "www.whitehouse.gov">White House</a>
When you click a link to a Web page, the link takes you to the top of that Web page. If you want a link to jump to a specific part of a Web page, such as a paragraph in the middle of the Web page, you have to go through two steps:
Define an anchor that represents the specific part of the Web page that you want people to see when they click a link.
Define a link to take users to that specific part of the Web page.
When you define an anchor point, you need to create a name for your anchor point and then define the actual text that will act as the anchor point, such as
<a name = "#anchorname">Anchor text here</a>
The anchor point is defined by the # symbol and can be any descriptive name. The anchor text is the text that you want users to see after they click a link.
After you've created an anchor point, you can create a hyperlink that points to that anchor point. If the hyperlink appears on the same Web page as the anchor point, you can just specify the anchor point name, such as
<a href = "#anchor point">Jump to anchor point</a>
If the anchor point appears on another Web page, you must specify the Web page filename followed by the anchor point name, such as
<a href = "webpage.html#anchor point">Jump to anchor point</a>
Tables help align text and graphics in rows and columns. For greater flexibility, you can choose to make the table borders appear visible or invisible. When table borders appear invisible, any items stored in the table appear aligned but without the distraction of borders.
When creating a table, you need to define the table appearance, the table headings, and the actual data that appears inside the table.
When you create a table, you have the option to define one or more of the following:
Alignment: Defines how data appears within a table
Border: Defines the thickness of the lines that define the table
Cell padding: Defines the spacing between data and the cell borders
Cell spacing: Defines the spacing between adjacent cells
Width: Defines the size of the table as a percentage of the window
To define the alignment of data in a table, you can choose between center, left, or right, such as
<table align = "center"> </table>
To define the border of a table, specify a border value like this:
<table border = "2"> </table>
To define the cell padding and cell spacing, specify a value like this:
<table cellpadding = "2" cellspacing = "3"> </table>
To define the width of the table, define a percentage like this:
<table width = "75"> </table>
If you want to define multiple options, it's probably easier to store them on separate lines like this:
<table> <align = "center"> <border = "2"> <cellpadding = "2"> <cellspacing = "3"> <width = "75"> </table>
You may want to define headings for a table with the <th> and </th> tags. The following code produces the results shown in Figure 1-3:
<html>
<head>
<title>This text appears in the title bar.</title>
</head>
<table border = "1">
<th>Column 1</th>
<th>Column 2</th>
</table>
</html>Each time you use the <th> and </th> tags, you create another column in your table.
To fill a table with data, you need to use the <tr> and </tr> tags to define a row and then fill in that row with the <td> and </td> tags, which define the data. The following code produces the results shown in Figure 1-4:
<html>
<head>
<title>This text appears in the title bar.</title>
</head>
<table border = "1">
<th>Column 1</th>
<th>Column 2</th>
<tr>
<td>Stuff here</td>
<td>Useful data</td>
</tr>
<tr>
<td>Second row</td>
<td>More data</td>
</tr>
</table>
</html>
If you want to create a caption to appear above your table, you can use the <caption> and </caption> tags. Captions can be useful to name or describe the data stored inside the table.
Tables can also store a header and footer. The header typically appears as the first row of the table whereas the footer typically appears as the last row of the table. To define a table header and footer, you need to use the <thead> and <tfoot> tags, respectively. The following code produces the results shown in Figure 1-5:
<html>
<head>
<title>This text appears in the title bar.</title>
</head>
<table border = "1">
<caption>This is a table caption.</caption>
<thead>
<tr>
<td>This is a table header</td></tr>
</thead>
<th>Column 1</th>
<th>Column 2</th>
<tr>
<td>Stuff here</td>
<td>Useful data</td>
</tr>
<tr>
<td>Second row</td>
<td>More data</td>
</tr>
<tfoot>
<tr>
<td>This is a table footer</td>
</tr>
</tfoot>
</table>
</html>