Intro to HTML
0. Basic Set-up
To start a page you need a to set up a folder and get a little content.
- Create a folder on the desktop (use your name if you like).
- Write down 2 or 3 urls to some web pages you want to link to.
- Download the new Mason logo to your folder.
- put cursor over image
- right click on mouse
- select save as
- select your folder on the desktop
- click save
1. Start a web page.
Follow the directions in a linear fashion and type in (or copy/paste) the codes as you read through. Follow
the directions at the end for saving and viewing the page. Note that the actual
html tags are in <arrow> brackets and the explanations of the tags are in [square] brackets. Only copy tags, not explanations.
- Open a word document to begin creating an <html> web page file.
- The logic of html documents is open/close. When you open a code <b> you generally have to
close it </b> (though there are of course certain exceptions) by adding a forward slash before the code you want to close.
- Every page must start with opening <html> and the <head> and <body> tags follow. Type in the tags below at the top of your
opened word file.
<html>
[The html code opens the html document.]
<head><title> insert project name: your name, and/or the specific page name </title></head>
[The title code puts the title across the top of the browser, not your page.]
<body bgcolor="#ffffff" text="#000000" link="#3333ff" vlink="#ff3333">
[The body code opens the body of your document and allows you to designate background, text, and link colors.
Nothing shows up on the page unless you open the body. Color codes must have six digits, be preceded by #, and
be in quotes. See Colors by Hue for a basic list of color codes. Basic color names like
white, black, blue, red, etc. can also be used instead of the number codes, but the choices are limited. (The above
number codes are for white, black, blue, and red.) The link code designates the initial color of a link on your page to distinguish
it from the color of your text. The vlink code designates the color of a link already visited to distinguish it from
pages you've already seen.]
2. Create a table.
Next you want to create tables to establish a structure for your page layout. The code below creates
a table with a cell across the top for a header, one down the left for links, and a main table in the middle/right
for your primary content.
- Copy this table code below and paste it into your word file under the body tag.
<table width="600" cellpadding="5">
<tr>
<td bgcolor="green" colspan="2" width="600">
Top table cell: insert title of your web site here
</td>
</tr>
<tr>
<td bgcolor="gold" width="200">
Left table cell: insert links to other pages in bullets
</td>
<td width="400">
Main table cell: insert text to be seen on the main page here
</td>
</tr>
</table>
- <table> designates the entire table
- <tr> designates a table row
- <td> designates a table cell for inlcuding data
- note that each has to be opened and closed appropriately
3. Insert content into top table.
4. Insert content into main table.
5. Insert links into left table.
- Put your cursor into the space in your word file that says "Left table cell: insert links to other pages in bullets."
- Delete the "Left table . . ." and type in the bulleted list and link tags in this order:
<p>Weekly Responses
<ul>
<li> <a href="filename.html">Week 2</a>
<li> <a href="filename.html">Week 3</a>
<li> <a href="filename.html">Week 4</a>
</ul>
[The ul code creates an unnumbered list. The li command designites a line and puts a bullet in front of the
following text.]
[When creating a link internal to your site (in the same folder as the page you are working on), it is easiest to just
use the filename instead of the full URL. This allows the links to work on the harddrive, while you are working
on your site, as well as online after you upload it. In this case, you'd probably want to create new files with the same html
template/code and name them week2.html and put your response to the readings in the main table.]
<p>Links
<ul>
<li> <a href="http://www.gmu.edu">GMU Home Page</a>
<li> add link here
<li> add link here
</ul>
[The a href code creates a web link. When making a link to a web page that is not internal to your site,
be sure to use the full URL (or http address). The text in between the > and the </a> is what shows up
on the web page as the link. Always make sure the text that shows up as the link clearly indicates where the link will take the user.]
<p> <a href="mailto:user@gmu.edu">contact site manager</a>
[The mailto tag allows you to create an email link. Clicking on it will allow an email window to pop open with
the address in place. If the users have their email programs set up in conjunction with the browser they use, they can send that email directly out.]
- Add in a couople of the external links you wrote down earlier below the GMU link in your bulleted list.
- Add in your email address and your name (instead of site manager) into the mail link.
6. Make sure you close out the code.
- Add in the close body and close html tags *after* the </td>, </tr>, and
</table> tags.
</body>
[After you've coded the initial text you have to close the body or the text won't show up.]
</html>
[Though some browsers will read the page with just the body closed, it is still important to close html as well.
Without closing html some browsers won't recognize the page or won't recognize some of the other codes.]
7. Save file to your folder on the desktop.
Once you have done the initial coding, save your new file.
- Every page name must end with .html so the browser (Netscape/Explorer) can view it.
- Be sure to save it as Plain Text (or text only) w/ line breaks--go down to file type when you save it and select Plain Text and make sure .html is at
the end of your filename.
[With Windows XP you save as Plain Text then select line breaks from a dialog box. Earlier Windows version should give you an option to save
TEXT ONLY w/ line breaks.]
- Save the document to your folder on the desktop.
- Once you've saved it, you can click on its icon in your folder and it will open in a browser.
Once placed in your web page, the table should look like the example below, except yours will have more
filled in content.
|
insert title of your web site here
|
|
insert links to other pages in the bullets
include a mailto link here
|
insert text to be seen on the main page here
|
|