HTML TUTORIAL


** WORK IN PROGRESS **

this is by no means a complete reference - HTML is constantly evolving - but i try to cover the basic things. whenever i think of something that may be useful to the novice html author, i add it here.

these are very basic HTML tags. for more detailed and up-to-date HTML discussion, i suggest W3 schools. the lessons there also provide an excellent "try it yourself" online HTML editor - the best way to learn HTML is to just jump right in and try it.

let's get started...

TOPICS:
html page basic text formatting images
links | anchors spaces/line breaks lists
tables centering comments

cascading style sheets


parts of an html document:
<html>

<head>
<title>page title goes here.</title>
(other optional tags will also go here.)
</head>

<body>
PAGE CONTENT GOES HERE.
(this is what gets displayed on your html page.)
</body>

</html>

make sure you give your page a title (located in the code between <title> and </title>). this is what is displayed in the browser tab or the title bar of the browser window, as well as the name that gets assigned to a bookmark/favorite when one is created.

everything that you want to show up on the html page will go between the <body> and </body> tags.


bold text:
<strong>this text should be bolded.</strong>
will show up as:
this text should be bolded.


italicized text:
<em>this text should be italicized.</em>
will show up as:
this text should be italicized.


underlined text:
<u>this text should be underlined.</u>
will show up as:
this text should be underlined.


of course, <b>, <i>, and/or <u> can be combined...
<!-- for example... here we have bold, underlined text. -->
<strong><u>this text should be bold and underlined.</u></strong>
will show up as:
this text should be bold and underlined.

the order in which you use them doesn't matter. for this example, using either <strong><u> or <u><strong> will result in bold, underlined text... HOWEVER, the tag that is opened first should be closed last... and the tag that is opened last should be closed first.
<strong><u>this text should be bold and underlined.</u></strong>

<!-- but... -->

<u><strong>this text should be bold and underlined.</strong></u>


adding an image:
<img src="ucla.gif" />
will show up as:

it is worth mentioning that sometimes, all the images for a web site might be located in their own, separate image directory. in this case, you will need to include the name of the directory (or directories if the image is located in a subdirectory) when referring to the image.
<img src="img/ucla.gif" />


linking to a url:
<a href="http://my.ucla.edu">MyUCLA</a>
will show up as:
MyUCLA
when you link to a URL, make sure to include http://.

to open a link in a new window:
<a href="http://my.ucla.edu" target="_blank">MyUCLA</a>


anchor link:
an anchor link is a type of link that points to somewhere else on the same page. this is useful, for example, when you have a long page of text and want the user to have the ability to jump down to a specific section. to link to an anchor, you need to
  1. create the anchor itself. the anchor is placed at the location you want to jump down to.
  2. create a link to that anchor.
1. the anchor
imagine you have a page of text, with contact information at the very bottom. you want the user to be able to jump down to this contact information by clicking on a link.
<a name="contact"></a><b>Contact Us></b><br />
<br />
308 Westwood Plaza<br />
Los Angeles, CA 90095<br />
(310) 825-4321
(note that the anchor tag has a corresponding closing tag, even though there is nothing in between them.)

2. link to the anchor
the link down to the anchor looks much like a normal link. you will notice, however, that rather than a URL, the link is actually "#" followed by the name of the anchor we defined above.
&raquo; <a href="#contact">Contact Us</a>

together, they will show up as:
» Contact Us






[other page content...]






Contact Us

308 Westwood Plaza
Los Angeles, CA 90095
(310) 825-4321
(try clicking on the anchor link in the box above - it will bring the contact information to the top of this browser window.)

you may, of course, have multiple anchor links on a page.


email link:
<a href="mailto:me@domain.com">email me!</a>
will show up as:
email me!

image as a link:
<a href="http://my.ucla.edu" border="0"><img src="myucla.gif" /></a>
will show up as:
border="0" prevents a colored border from appearing around your image.


spaces and line breaks:
browsers do not interpret multiple spaces and line breaks. suppose you have a piece of html code that looks like this:
<b>grocery list:</b>
  eggs
  milk
  bread
  carrots

don't forget coupons!
you will find that it shows up in the browser as:
grocery list: eggs milk bread carrots don't forget coupons!

to get your text to appear formatted the way you want, you will have to put your own spaces and line breaks.
&nbsp;
<!-- this gets interpreted as a single space. if you want indented text, you can string many of these together. -->

<br />
<!-- this gets interpreted as a single line break. note that one of these will simply move subsequent text to the next line. if you want to have a blank line separating two lines of text, you will need to use two. -->

our revised grocery list, with &nbsp; and <br /> added in:
<b>grocery list:</b><br />
&nbsp;&nbsp;eggs<br />
&nbsp;&nbsp;milk<br />
&nbsp;&nbsp;bread<br />
&nbsp;&nbsp;carrots<br />
<br />
don't forget coupons!
will now show up in the browser as:
grocery list:
  eggs
  milk
  bread
  carrots

don't forget coupons!


unordered (bulleted) lists:
suppose we want to display our grocery list as a bulleted list.
<b>grocery list</b>
<ul>
<li>eggs</li>
<li>milk</li>
<li>bread</li>
<li>carrots</li>
</ul>
don't forget coupons!
will show up as:
grocery list don't forget coupons!


ordered (numbered) lists:
suppose now that we want to display our grocery list as a numbered list.
<b>grocery list</b>
<ol>
<li>eggs</li>
<li>milk</li>
<li>bread</li>
<li>carrots</li>
</ol>
don't forget coupons!
will show up as:
grocery list
  1. eggs
  2. milk
  3. bread
  4. carrots
don't forget coupons!

note that the only difference between the bulleted list and the numbered list is that the bulleted list starts and ends with <ul> and </ul> and that the numbered list starts and ends with <ol> and </ol>. in both types of lists, each item must start with <li> and end with </li>.


tables:
sometimes you may want to present data in an organized table. let's go back to our grocery list...
<table>
  <tr>
    <th>grocery item</th>
    <th>notes</th>
  </tr>
  <tr>
    <td>eggs</td>
    <td>one dozen, large</td>
  </tr>
  <tr>
    <td>milk</td>
    <td>one gallon, low-fat</td>
  </tr>
  <tr>
    <td>bread</td>
    <td>one loaf, wheat</td>
  </tr>
  <tr>
    <td>carrots</td>
    <td>one lb.</td>
  </tr>
</table>
will show up as:
grocery item notes
eggs one dozen, large
milk one gallon, low-fat
bread one loaf, wheat
carrots one lb.

well, this all looks confusing. what does it all mean??
the entire table is defined by <table> and </table>
each row of the table is defined by <tr> and </tr> (tr = table row)
each cell in the rows of the table is defined by <td> and </td> (td = table data)

and what about <th>??
this is a special kind of cell. you'll notice that "grocery item" and "notes" are bold and centered, yet we hadn't apply either of these styles to them. as you might have guessed, th = table header

look back up at our table code and compare with its output below it and you'll see that cells (<td>...</td>) make up a table row, and that table rows (<tr>...</tr>) make up the table. the number of columns a table has is determined by the number of (<td>...</td>) that are within a <tr>...</tr>. suppose we want our grocery list to have three columns. the table header and an example row would look like this:
<table>
  <tr>
    <th>grocery item</th>
    <th>notes</th>
    <th>price</th>
  </tr>
  <tr>
    <td>eggs</td>
    <td>one dozen, large</td>
    <td>$1.99<td>
  </tr>
</table>
which will show up as:
grocery item notes price
eggs one dozen, large $1.99

the second and third column look a little run-together, but a quick remedy for this is to add a few non-breaking spaces (&nbsp;) to the end of the data in the cell of the former column.
<table>
  <tr>
    <th>grocery item</th>
    <th>notes</th>
    <th>price</th>
  </tr>
  <tr>
    <td>eggs</td>
    <td>one dozen, large&nbsp;&nbsp;&nbsp;&nbsp;</td>
    <td>$1.99<td>
  </tr>
<table>
which will show up as:
grocery item notes price
eggs one dozen, large     $1.99
(the spaces should be added to the end of what is visually the longest item. (in our example of the full grocery list, this would be "one gallon, low-fat".) because this widens the column for the entire table, it is not necessary to add the extra spaces to every row.


centered elements:
<center>this text should be centered.</center>
will show up as:
this text should be centered.

images are centered the same way:
<center><img src="ucla.gif" /></center>
will show up as:


comments:
<!-- this text won't show up on your html page! -->
the comments will not be displayed on the html page, but will be in your html source code. this method can be used to make notes to yourself.

it is also useful for "turning off" the visiblity of existing text you no longer want to show up, but may need again in the future. rather than completely deleting the text, you can simply "hide" it by wrapping the comment tags around it. when you want to display it again, just remove the comment tags.
Our French bread is $3.99 per loaf.<br />
<br />
FRESH LOAVES AVAILABLE RIGHT NOW!
will show up as:
Our French bread is $3.99 per loaf.

FRESH LOAVES AVAILABLE RIGHT NOW!

well, we are unfortunately sold out of fresh loaves at the moment, and we'll have more later, but we don't want people rushing in right now expecting to find fresh bread.
Our French bread is $3.99 per loaf.<br />
<br />
<!-- FRESH LOAVES AVAILABLE RIGHT NOW! -->
will now show up as:
Our French bread is $3.99 per loaf.



→ next: about style sheets

→ resources