Basic steps: using tags
HTML uses tags to communicate to the client (browser) how to display text and
images. Tags are contained in < > symbols. In most cases you
start with the beginning tag, put in the word or words that will be affected by
this tag, and at the end of the string of word(s), you place a closing
tag.
For example, to create a title for a document you would do the following:
<title>My First HTML Document</title>The closing tag normally contains a "/" before the directive to indicate the termination of the action.
HTML tags are not case-sensitive, although URLs generally are. In most cases (with the exception of preformatted text) HTML collapses many spaces to one space and does not read blank lines. However, when you write your text you should leave several blank lines between paragraphs to make editing your HTML source document easier.
The <html> tag is usually placed on the first line of your document. At the end of your document you should close with the </html> tag.
For the purposes of this class, only the title tag, below, should be included in the document head. A typical head section might look like
<html> <head> <title>My First HTML Document</title> </head>
<title>My First HTML Document</title>Remember, the title usually doesn't appear in the document itself, but in a title box or bar at the top of the window.
The body should start after the head. A typical page might begin like
<html> <head> <title>My First HTML Document</title> </head> <body>
<h1>This is a header 1 tag</h1>Headers, as you notice, not only vary in size, they are also bold and have a blank line inserted before and after them. It's important to use headers only for headings, not just to make text bold (we cover the bold tag later).This is a header 1 tag
<h2>This is a header 2 tag</h2>This is a header 2 tag
<h3>This is a header 3 tag</h3>This is a header 3 tag
<h4>This is a header 4 tag</h4>This is a header 4 tag
<h5>This is a header 5 tag</h5>This is a header 5 tag
<h6>This is a header 6 tag</h6>This is a header 6 tag
<pre>this is
an example
of a preformatted
text tag</pre>
And this is how it displays:
this is
an example
of a preformatted
text tag
There is an underline tag as well, but most people don't use it since text that is linked is often underlined. The potential for confusion and the archaic nature of underlining in general make it a poor marker for emphasis.
When using these tags, you usually cannot (and probably should not) have text that is both boldface and italics; the last tag encountered is usually the tag that is displayed. For example, if you had a boldface tag followed immediately by an italic tag, the tagged word would appear in italics.
When using lists, you have no control over the amount of space between the bullet or list number, HTML automatically does this for you. Neither (as yet) do you have control over what type of bullet will be used as each browser is different.
Unnumbered lists
Unnumbered lists are started with the <ul> tag, followed by the actual list items, which are marked with the <li> tag. The list is ended with the ending tag </ul>.Numbered listsFor example, here is an unnumbered list with three items:
<ul> <li> list item 1 <li> list item 2 <li> list item 3 </ul>Here is how that list would display:
- list item 1
- list item 2
- list item 3
Here is the same list using a numbered list format:Definition lists
<ol> <li> list item 1 <li> list item 2 <li> list item 3 </ol>Here is how that list would display:
- list item 1
- list item 2
- list item 3
Definition lists allow you to indent without necessarily having to use bullets.Nested lists
<dl> <dt> This is a term <dd> This is a definition <dd> And yet another definition <dt> Another term <dd> Another definition </dl>And here is how this would be displayed
- This is a term
- This is a definition.
- And yet another definition.
- Another term
- Another definition
Finally, here is a nested list within an unnumbered list (we could just have easily had a nested list within a numbered list).
<ul> <li> list item 1 <ul> <li> nested item 1 <li> nested item 2 </ul> <li> list item 2 <ul> <li> nested item 1 <li> nested item 2 </ul> <li> list item 3 <ul> <li> nested item 1 <li> nested item 2 </ul> </ul>Here is how that list would display:
- list item 1
- nested item 1
- nested item 2
- list item 2
- nested item 1
- nested item 2
- list item 3
- nested item 1
- nested item 2
<blockquote>...</blockquote>and displays like this:
Blockquoted text is often used for indenting big blocks of text such as quotations. The text will be indented until the ending tag is encountered. Again, note that the text here is indented on both the left and the right margins.
<center>This is a centered sentence</center>
The center tag automatically inserts a line break after the closing center tag.
Here is an example of how an address might appear:
<address> Introduction to HTML / Pat Androget / Pat_Androget@ncsu.edu </address>And it would appear as:
Introduction to HTML / Pat Androget / Pat_Androget@ncsu.edu
Comments take the form:
<!-----This comment will not appear in the browser----->The comment can even break lines
<!----This comment won't be seen by anyone either even though it's broken between lines--->
<strike>This is struck through text</strike>displays as
This is struck through text
á .... á â .... â æ .... æ à .... à & .... & å .... å ã .... ã ä .... ä ç .... ç é .... é ê .... ê è .... è ð .... ð ë .... ë > .... > í .... í î .... î ì .... ì ï .... ï < .... < ñ .... ñ ó .... ó ô .... ô ò .... ò ø .... ø õ .... õ ö .... ö " .... " ß .... ß þ .... þ ú .... ú û .... û ù .... ù ü .... ü ý .... ý ÿ .... ÿ