The opening tag: <tag>
The closing tag: </tag>
Type the text that is effected by the tags between them. For example, if you want bolded text, type:
<strong>HTML Tags:</strong>
It will look like this: HTML Tags
Forgetting to type in an end tag is a very common mistake. Some people like to type both tags in at once, then move back to work between them. Web pages can look very funny if a tag is forgotten. One forgotten tag, even a very unimportant one, can cause an entire document to load as a blank screen.
<html></html>: These tags tell the browser what kind of document its reading. <html> is the first tag of every document. </html> goes at the very end. Some people like to write both of these tags first, then work between them.
<head></head>: Head tags go at the top of a document. Usually information about the document that the user doesn't see is between these tags, like metadata, style sheets, some java commands, and the page's title.
<title></title>: The title of your page is very important. It's what appears at the top of the browser window, what appears in bookmarks, and what search engines show to searchers. Short and precise titles are good.
<body></body>: Body tags tell the browser where your header information stops and where the contents of the body of your page begin. The information you want people to see should be between the body tags. Usually one tag is at the top immediately beneath the end head tag [</head><body>] and its pair is at the bottom of the page just above the end html tag [</body></html>].
"The Browser Safe Color Palette" by Lynda Weinman, where she has conveniently displayed the colors and their hexadecimal codes: http://www.lynda.com/hexh.html.
The following commands assign color to parts of a Web page:
| BGColor: background color | Link: link color |
| Text: text color | Vlink: visited link (after the user has clicked through that link) |
| Alink: active link (as the user clicks) |
All of these tags are combined in the body tag like this:
<body bgcolor="#ffffff" text="#000000" link="#0000CD" vlink="#CD853F" alink="#00ffff">
Note that each color assignment begins with an equals sign, is surrounded by quotes, and the hexadecimal code starts after a number sign.
You can also change the color of text in a section of the page by using <font color="hexadecimalcode">Different colored text here</font>.
There are two kinds of line breaks:
<br>: indicates a line break, like a hard return in a word processing program. It usually comes at the end of a line or as a line in itself. There is a <br> after "breaks:" above.
<p>: indicates a line break and a blank line. It usually comes at the beginning of a line or as a line in itself. This entry is separated with a <p> from the entry "<br>."
<hr>: stands for horizontal rule, which is a horizontal line across a Web page. It looks like:
You can control the width across the page [width="50%"], thickness [height="5"], and alignment (tags discussed later). The code for the above line looks like this: <hr width="50%" height="5" align="center">. Note that the additional elements go inside the same carrots as the <hr>.
The 6 sizes of heading tags look like this, with larger numbers appearing smaller:
H1 |
H2 |
H3 |
H4 |
H5 |
H6 |
<h3>This is Heading 3.</h3>
Font size runs in the opposite direction: the larger the number, the larger the font. It is written like this:
<font size="6">This is font size 6. See how it is larger than H6?</font>
<font size="1">This is font size 1. See how it is smaller than H1 and does not have the boldness or space?</font>
Alignment can be written several ways:
<P ALIGN="left"></p>,
<div align="right"></div>,
<center></center> (for center alignment only),
or as part of the initial tag of a special object, like a horizontal rule (see above), a table, or an image.
<b></b> or <strong></strong>: <b>bolds</b> text. <strong></strong> is browser friendly.
<i></i> or <em></em>: makes text <em>italicized</em>. <em></em> is broswer friendly.
<u></u>: <u>underlines</u> text.
<!-- -->: comment tag lets you "hide" comments from users. They look like this: <!-- Hey! This is a comment! You can make this quite long and use punctuation inside of them. They're great for making notes about your Web page, like graphics' permissions, updating information, or even notes to yourself about why you used certain material. Comments will appear in the source code when a user looks at your page. -->
You can link to all sorts of things:
- files within your site: for links within a site, you may not have to type the entire link: just the file name and perhaps the directory. / goes down a directory. ../ goes up a directory. Sometimes complete URLs are the best, even within the same site.
- external sites: use the complete URL when possible.
- sections of your page: these are called anchors.
- First, you have to set up an anchor where you want the link to go. If you want to make a jump to the top of the page, for example, go to the top of the page (just beneath the <body> tag is good) and type <a name="top"></a>. You can use any name you want between the quotes. Something that makes sense to you is a good idea.
- Where you want the link on your page, type <a href="#top">text for the link, like Return to the top</a>. (Try it! It works!) Note the number sign in the link tag: it distinguishes a link to an anchor from a link to another file or e-mail.
- an e-mail address: to make an e-mail link, type <a href="mailto:email@address.com">e-mail link text here</a>. An example is at the top of this page.
- other files: besides HTML files, you can also link to telnet, gopher, and ftp sites and files, graphics files, .pdf files, like Adobe Acrobat, and many, many more!
Helpful hints for creating links:
- Use the URL or text that makes sense to the user for links. Links that say "Go here" aren't particularly useful.
- Use the complete URL as the linking text especially if your Web page could be used as a printed document.
- When making an e-mail link, type the e-mail address as the link so that users who don't have a browser with an e-mail function can at least see the e-mail address and copy it.
- Use the complete URL as the linking text especially if your Web page could be used as a printed document.
<ol></ol>: indicates an "ordered" or numbered list. Each list item is indicated by an <li>. A closing </li> is optional. This page is a long ordered list.
<ul></ul>: indicates an "unordered" or bulleted list. Each list item is indicated by an <li>. A closing </li> is optional. The links section above is an unordered list.
<dl></dl>: indicates a definition list. Each list item is indicated by a <dd>. A closing </dd> is optional. The helpful hints section of the links section is a definition list. This list does not use bullets or numbers to highlight list items.
| The code for this image looks like: <img src="../images/snwmnmelt.gif" alt="melted snowman by Jessica Baumgart" align="right"> |  |
A page with images you can use to practice is available at: http://pws.prserv.net/usinet.jkbaumg/presentations/images.html.
| Table Code | Interpretation |
|---|---|
| <table> <tr><td></td><td></td></tr> <tr><td></td><td></td></tr> </table> |
<td></td> indicates a data cell <tr></tr> indicates a row of the table |
| Table headings can be created by using <th></th>. These tags tell the browser which rows contain heading information for your table. Some browsers make this information bold. The headers above use the <th></th>tags. | |
There are additional codes for manipulating data in tables, too.
- You can make cells span multiple rows [<tr rowspan="number">] or columns [<td colspan="number">] (see above);
- change the color of a cell or text [<td bgcolor="#hexadecimal"><font color="#hexadecimalcode"></font>];
- control the height or width of a table [<table height="pixelsorpercentage" width="pixelsorpercentage">]. Some browsers don't support this feature. Tables default to the width of the information in it.
- make space between the cells with cellpadding [<table cellpadding="5">]; alter the border of the table [<table border="5">];
- change the alignment of the table [<table align="center"> or by using the same commands as for text] or contents [<td align="center">]. This table is centered. The bottom cell has centered text. Note that some browsers do not interpret these features.
- Note where these tags go because some of them are combined in <table>, <tr>, and <td>. Most won't work correctly in a different tag.
| This table shows some of these features. | Notice the changes? |
| There are other tables on this page. Can you spot them? | |
The format for metadata varies based on the type. Dublin Core looks like
this:
<meta name="DC.Creator.PersonalName" content="Baumgart,
Jessica">
For more examples, look at the top of this page's code.
If this text looks different to you, that's because your browser is reading the commands that trigger the formatting specified in the Style Sheet. (If it doesn't look any different, try adjusting your preferences to enable or read style sheets.) Style Sheets are used to control the way content looks across different browsers. You can control many things using them, like background color or image, link and text colors, font style and size, and spacing. Style sheets can either be embedded (placed in the document between the <head></head> tags) or linked. Older browsers do not interpret style sheets. Users can turn them off in new browsers, so it is likely that a surfer will not read your style sheet at all. You should be aware of the way your page looks with and without style sheets so you can make any adjustments in the code to cover times when the style sheet won't be read.
A style sheet looks like this:
<style>
/* basic defaults */
a:link { color: #990033;
text-decoration: underline }
a:visited { color: #1c711a;
text-decoration: underline }
a:active { color: #000000;
text-decoration: underline }
BODY {background-image: url(http://www.sit.wisc.edu/images/bg2.gif)}
table { margin-left: 0em }
/* left-column formatting */
.lcol { font-family: palatino, serif;
font-size: small;
text-align: center;
margin-right: .5em }
p.lcolhead { text-align: center;
font-family: palatino, serif;
font-size: small }
/* main body formatting */
div.sub1 { margin-left: +2em }
div.termsub1 { margin-left: +1em }
div.sub2 { margin-left: +2em }
/* nested subdivisions */
div.termsub2 { margin-left: +1em }
/* terminal pages use smaller margins */
div.sub3 { margin-left: +2em }
div.termsub3 { margin-left: +1em }
.menu { font-family: helvetica, sans-serif }
/* used mainly for headings */
.option { font-family: helvetica, sans-serif }
/* used mainly for text */
p.txt { font-family: palatino, serif;
text-indent: 1.75em }
/* miscellaneous formatting */
kbd { font-family: monaco, courier, monospace }
p.intro { font-family: palatino, serif }
.dbnote { font-style: italic; font-size: smaller }
.dbname { text-transform: uppercase }
</style>
The style sheet for this page looks a bit different and is shorter.
To "turn on" any of these styles, you must use normal HTML tags combined with a "class" designation with the codes, like this: <p class="txt">
Dublin Core Metadata Initiative: http://purl.org/dc/
HTML: Resources on the Web: http://www.library.wisc.edu/libraries/Memorial/htmlhelp.htm
Library Instruction: Web Page Development Resources: http://www.library.wisc.edu/libraries/Instruction/webdev.htm
216 web safe colors via "The Browser Safe Color Palette" by Lynda Weinman. Hexadecimal codes and colors: http://www.lynda.com/hexh.html
World Wide Web Consotium's HyperText Markup Language Home Page: http://www.w3.org/MarkUp/
World Wide Web Consortium's Cascading Style Sheets: http://www.w3.org/Style/CSS/