HTML Double-X tutorial

2/20/2003 Double-X
Make your own Webpage

Presented by Tara Matthews and Morgan Ames
Double-X at Oakland Technical High School
Participants' webpages

Topics:

Starting out

Titles and Headers

Fonts: bold, italic, underline; font face; font size; headings

Color

Images

Linking to other files

Lists and Tables

Webpage resources: writing a webpage; hosting a webpage; learning more HTML

What sorts of things do you want on a homepage?
What sorts of things DON'T you want on a homepage?

Starting out - .html, tags, <br>

Most files on webpages end with ".html" Open notepad and save a file to the "desktop" called [your name].html. Find that, and double-click it – it opens with a web browser!

Write this in your file and save it again: <html> <body> Hello world! </body> </html> Double-click that file on your desktop again. Hey, there's your text!

HTML is short for "hypertext markup language", which basically means it’s a language that tells web browsers how to display text. HTML is all about tags - the stuff in these angle-brackets like this: <>.
The first tag up there, <html>, just reassures your browser that it should be interpreting HTML, and not another language. The second one, <body>, tells the browser that this is the beginning of the "body" of the document – what’s displayed in the window what you open it.
Most tags have to have an "ending" tag too – to tell the browser to stop reading HTML, or to tell the browser where the body ends. Ending tags usually look a lot like beginning tags, except they have a "slash" in them. We’ll learn a bunch of other nifty tags.

Now try this (from now on I'll make the new stuff in the file bold and red): <html> <body> Hello world! </body> </html> Save it and take a look at it. Why didn’t it put in all those "enters"? Because of the way HTML is, you have to add those yourself – as more tags. The tag in HTML that means "enter" is <br> for break. So now try this: <html> <body> Hello world! This is [put your name in here]’s webpage. </body> </html> That's better. the <br> tag is one of the very few HTML tags that doesn't have a closing tag.

Titles and Heads

So, what else is there in a document besides a "body"? What about an essay in English? Maybe we want a title. Let's start with adding a title to that top bar of the window - where this window says "HTML Double-X Tutorial." Try adding this to your file: <html> <body> Hello world! <br> <br> <br> <br> <br> This is [put your name in here]’s webpage. </body> </html> Okay, from now on we're just going to talk about the "body" part of the webpage - we'll just assume the rest of that stuff is there already.

Font fun

One nice thing that you can do is change how text looks - make it bigger or smaller or bold or italic or underlined or other colors or another font.

Let's start by writing a list of your favorite bands or musicians. Remember to put a <br> tag after every line, so the names don't all run together.

Bold, Italic, Underline

Bold, italic, and underline are pretty easy. Each one has a starting tag and ending tag of their first letters, and affects anything you type between the starting and ending tags. Using the table below, make the name of your favorite band(s) bold, your next favorite band(s) underlined, and everyone else italicised.

What you type	What it will produce
	this is bold
	this is italicised
	this is underlined

To change the color, size, or font (which is called "face") of the text, you need to use the <font> and </font> tags. Anything between the <font> and </font> tags is formatted the way you specify.

Font face

Let's talk first about font face. The default face that you see right now is Times New Roman. Below are a few other faces that are often used on the web. This isn't all the faces out there, but these are the ones that are installed on most computers (according to http://www.angelfire.com/fl5/html-tutorial/text.htm). You can use a fancier one, but then people who look at your website from computers who don't have that font installed will see your text in Times New Roman (or whatever the default font is) instead.

Pick one of the faces below, and at the beginning of your list of favorite bands, type in:

What you type	What it will produce
	arial
	arial black
	comic sans ms
	courier
	georgia
	helvetica
	impact
	times new roman
	trebuchet ms
	verdana

It's useful to add titles to various sections on your webpage, in text that is bigger than the rest of the text. You can do this with the <font size="+2"> tag. There are 7 font sizes, plus a few ways to change the size relative to the default size. (It's best to use the relative measures, in case the person looking at your website has trouble reading small fonts.) There are also a few shortcuts for changing font size, which are also listed below.

Add a title to your music section, like this:

What you type	What it will produce
	font size 7 (also font size="+4")
	font size 6 (also font size="+3")
	font size 5 (also font size="+2")
	font size 4 (also font size="+1")
	font size 3 (default on most machines)
	font size 2 (also font size="-1")
	font size 1 (also font size="-2")
	big is the same as font size="+1"
	two bigs is the same as font size="+2"
	small is the same as font size="-1"
	two smalls is the same as font size="-2"

Headings

And now we tell you - there's actually a short cut for making titles or "headings" in html. It combines font size, bold, and a few breaks all in one - so when you use a heading, it's always put on its own line. Add a title to your webpage with one of the heading tags:

What you type	What it will produce
	Heading 1
	Heading 2
	Heading 3
	Heading 4
	Heading 5
	Heading 6

Color

You can also change the color of a font, though we'll skip it for now and do some other stuff with color. The way you change a font color is: For now we'll change the background color, which is done in the <body> tag. Go to the top of your file, and change your <body> tag to look something like this: There are tons of named colors, and they're all listed at http://www.angelfire.com/fl5/html-tutorial/namedcolors.htm. There are sixteen main colors which are aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, and yellow.

If you pick a dark color as your background color, you won't be able to read the text - instead, pick a light color like silver, aqua, lightgrey, lavender, or lightyellow for your background.

Images

So far, all we've had on our websites is text, which can get boring. Let's put some images into the file. First of all, we need to find and download some images. Then we need to link to them from our file.

My favorite place to find images is at Google Images (http://images.google.com). Go there and do a search for your favorite band or musician. When you find a picture you like, click on it, and click on it again. Now save this image in the same directory as your .html file. It's important that you put it in the same directory, because when we put your webpages on the internet (if you want them up), we'll put the images in the same directory as the .html files. Name the picture whatever you want but keep the file type (for example, .jpg or .gif).

Now we have to tell our file to display the image. There's yet another tag that does this: <img>. Add this below your favorite band or musician to add their picture: Refresh your file - does your image appear?

You can also set the background to be an image, though this is often a bad idea unless the image is really low-key, because it can make the text hard to read. Also, the image will be repeated or "tiled" over and over, covering the whole page. You can find decent backgrounds on the web at:

To add a background image rather than a background color, add this to the <body> tag: For examples of BAD backgrounds, visit one of these sites:

Linking to other files

The reason HTML is called "hypertext" is because you can link to other pages. The tag that lets you do this is <a href="[site]">, and the closing tag is <a>. Link from your page to Google by typing this: Now make another html file titled "[your name]-classes.html", again in the same directory as your original .html file and image. Add this to your file: (We haven't put anything in this file yet, so if you click on this link, you'll just get a blank page.)
We don't need to put the full path in this case because the file that we've linked to is in the same directory as our original .html file. If it was in one directory above the current directory, we would link to "../[your name]-classes.html", and if it was in a directory within the current one - say, a directory called "images", then we would link to "images/[your name]-classes.html". You can do this same thing with images - link to an image on a different site by putting in the full URL, or link to one in a different directory by giving the path to that directory.

Lists and Tables

There are "list" tags in HTML that put little bullets in front of list items and indent lists. You can make a list by just adding <li> tags to the beginning of each item - this adds a bullet, but doesn't indent the list. <li> is one of the other fewtags in HTML that don't have a closing tag. If you add <ul> and </ul> tags (this stands for "unordered list") at the beginning and end of the whole list in addition to <li> tags, it will indent the list; if you add <ol> and </ol> tags (this stands for "ordered list"), you get numbers rather than bullets. You can also have lists within lists!

Let's modify your list of favorite bands/musicians to be a "real" list. Add this around your list:

What you type	What it will produce
	mersedotes doseydotes divey: liddlelamsey kiddley too wouldn't you? mersedotes doseydotes ...

Tables are another really useful thing to know about - many sites are formatted entirely with tables (though some try to use more complicated formatting schemes). We have some examples of webpages laid out with tables - can you draw in the rows and columns?

You've seen the tables I've used on this site, but I've also used a table to enclose all of the text - because I wanted it to be a fixed width to aid printing. (The text won't expand past 550 pixels. With 72 pixels to the inch, that's about 7.6 inches, which fits on an 8x11 sheet of paper.)

Tables can be tricky to format. It's not enough to surround some text with <table> and </table> tags - you have to specify where the rows and columns go, and make sure you have a consistent number of columns in every row (or merge columns in a particular row with "colspan").

Let's put a table in that new file you created - "[your name]-classes.html". Open it up, and add the <html> and <body> tags. Add a title if you want - maybe something like this: We're eventually going to add a table here, but first let's learn a bit about them. The whole table is surrounded by <table> and </table> tags. The <table> tag can have various attributes, which we'll talk about below. Inside the <table> and </table> tags, there is one set of <tr> and </tr> tags for each row of the table ("tr" is for "table row"). Within each row, you can have a number of colums, which are surrounded by <td> and </td> tags. Text can only go between these <td> and </td> tags! Text put elsewhere in the table - for example, between the <tr> and <td> tags - won't be put in the table and may cause an error, since it's incorrect HTML.

Common formatting options for the <table> tag include "cellspacing" (the space between cells), "cellpadding" (the space between the cells and the text), "border" (default is no border!), and "width" (default is to fit to the text; you can put in pixel values or percentages). In addition, there are some important <tr> and <td> options, such as "valign" (vertical alignment: top, middle [default], or bottom) and "bgcolor" (background color - just like before!). Below are some examples (grouping into a table!) of some different table formatting options.

What you type

What it will produce

<table width="200" border=1> <tr> <td width="40%"> first cell, width 80 </td> <td>second cell, width 120 </td> </tr> <tr> <td>third cell, width 80 </td> <td>fourth cell, width 120 </td> </tr> </table>

first cell, width 80	second cell, width 120
third cell, width 80	fourth cell, width 120

<table cellspacing="0" border=1> <tr> <td>first cell, width 30% </td> <td width="70%">second cell </td> </tr> <tr> <td colspan=2> third and fourth cells merged with colspan=2 </td> </tr> </table>

first cell, width 30%	second cell
third and fourth cells merged with colspan=2

<table cellspacing=10 cellpadding=5> <tr> <td bgcolor="aqua" valign="bottom"> first cell, bottom </td> <td bgcolor="grey"> second cell<br><br><br><br> </td> <td> third cell, no color :~( </td> </tr> <tr> <td bgcolor="yellow"> fourth cell with lots of text, so the table will be forced to resize itself to fit it all </td> <td bgcolor="pink" valign="middle"> fifth cell, middle </td> <td bgcolor="orange"> sixth cell </td> </tr> </table>

first cell, bottom	second cell	third cell, no color :~(
fourth cell with lots of text, so the table will be forced to resize itself to fit it all	fifth cell, middle	sixth cell

So now we want to add a table to your site. We're going to add a table of your classes, class periods, and friends in each class. (If you have a better idea, go ahead and do it. This is just a silly thing to do for an example.) Add a table something like this to your site:

Class	Period	Friends
Calculus	1	Euler MacLauren
Biology	2	Mendel Darwin
English	3	Austen Plath

Webpage resources

Learning more HTML

After learning the basics (like today), the way I learned HTML is by looking at the "source" of pages I liked and copying their HTML code! There's an option in the "view" tab of Mozilla or Explorer to see the source of the page. Try that on this page.

Sometimes the page source is a mess, especially if it was automatically-generated by an HTML program (we talk about these below). I try to wade through and not attempt to understand everything, or if I'm interested in a particular part of the webpage, I'll look for some text in that part and search the source code for that text (use the "find" option in the "edit" tab) to skip right to it.

There are tons of other good tutorials out there - you can google for "HTML tutorial" to find a bunch. Some are written better than others, so if one isn't making sense, find another! A few I've used are:
http://www.cwru.edu/help/introHTML/toc.html
http://www.angelfire.com/fl5/html-tutorial/

One thing we didn't have time to explain today are "hex colors." Rather than using names, many people use six-character codes for colors, ranging from "#000000" for black to "#ffffff" for white. You can look up hex color codes online here, among other places:
http://html-color-codes.com/

Writing your webpage

Although I always go through and laboriously write my HTML by hand like we've done today, there are some programs that will generate it for you. The one that I've used before is Microsoft Frontpage. I didn't like it when I used it, but we've heard it's improved. There's also Dreamweaver, 1stPage, and Homesite, which we haven't used, and probably some other ones. Do a Google search for "HTML generator" or "HTML writer" or something close, and you can probably even find one that's open-source, freeware, or shareware (Frontpage and Dreamweaver are expensive, and Homesite has a free trial but then costs $99).

Hosting your webpage

You can get a small amount of web space at various places on the Internet. Unfortunately, most of these require advertisements to be run on your page, or they require you to pay something. Below are a few of the free web hosting services out there:

Geocities is decent: http://geocities.yahoo.com/ps/learn2/WhatYouGet4_Free.html

If you get internet at home, your Internet Service Provider (ISP) may give you free webspace - e-mail them or go to their website (Google!) to find out for sure.

2/20/2003 Double-X Make your own Webpage

Topics:

Starting out - .html, tags, <br>

Titles and Heads

Font fun

Bold, Italic, Underline

Font face

Font size

Headings

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

Color

Images

Linking to other files

Lists and Tables

Webpage resources

Learning more HTML

Writing your webpage

Hosting your webpage

2/20/2003 Double-X
Make your own Webpage