First HTML Lesson

On your zip disk create a folder called "mit220" [you will have to double-click on the zip disk icon, and then go to "file" and "create new folder"

Note, to do this in Mac, hold down the spacebar and click, or you can also click and hold. A pop-up menu will appear. Save the image as "mitlogo.gif" under the mit220 folder.

1) Open up the program "SimpleText" and type the following:

<body>
<h1> Mark's page </h1>
<p> Welcome to my hompage for mit 220. Feel Free to have a look around!
<p><img src="mit220.gif"></p>

</body>
</html>

2) Save as "index.htm" under the mit220 folder

3) Open your browser and look at it. The page will be under your zip disk, in the folder "mit220", and it should be called "index.htm"

Now, what exactly, have you just done?

<html> tells your browser that it is an HTML document

<head> includes supplemental info, including the title.
This is the part of the document where you will eventually include such things as keywords, metatags, etc.
</head> closes the head tag.

<body> contains what the page will show

<h1> heading. Bigger and bolder than regular text. Inserts a line break too.

<p> Paragraph. Also inserts a line break at the end.

<img src = "mitlogo.gif"> You guessed it! This is a tag and an attribute combination. -img tells browser it's an image -src tells browser where to find the image

</body> Closes the first body tag, and ends what will be shown on the browser.

</html> Closes the html tag.

Make it your own

Now that you've got some basic code, I'd like you to personalize it a little bit. Add your own name, and some information about yourself. (But remember that these will eventually be public, so don't include stuff such as your last name or personal details that you don't want everyone to know.)

After that I'd like you to:

1) add three of your favourite websites
2) link them in the html document

To add a link to another HTML document you will have to add the following code before and after the text. So this code, will add a link to the mit220 homepage:

<a href="http://instruct.uwo.ca/mit/220">
mit220</a>

This will create a link. Now, link the three faves that you have chosen.

3) Load up your browser and check it again. Revel in your own brilliance.

Go on to learn about linking and colors...>