<< .. Go to : : Home : : Exercise 1 : : Demo 1A : : Demo 1B : : Demo 1C : : Demo 1D : : Demo 1E : : TAGS : : All Class Demos .. >>

Exercise 1 Demo: Part A : The Basic Framework

Since this is our first lesson - it will be very basic. We will build our knowledge of web coding from the ground up.

Open up your word processing program - use "Notepad" for PC or "Text Edit" for Mac and create a new document.

I put the HTML code in red on the demo pages so you can see it easily.

This is the HTML code you will need for Part A of Exercise 1. Type it into your text document.

This HTML code is the framework that you will build your web pages on.

HTML tag

<!DOCTYPE html>

<html>
<head>
<title>
My First Web Page </title>
</head>

<body>


This is where you put the content in for your web page.

</body>
</html>

Add in a couple of sentences between the opening and closing body elements.
Put some spaces in between the lines with your enter or return key and see what happens. Make paragraphs as if you were typing in any word processing program, but without the HTML tags the words all go in one line.

HTML tags give specific instructions that tell the browser what to do. Without tags, the browser does not know what to do, so it does nothing at all except display your text.

Now is a good time to take a look at what you have done so far. Create a folder titled "Ex1". Save your document as "index.html"

Open your browser (FireFox would be my browser of choice) and go to File .. File open .. and open your saved document. What do you see? Where did the title go? Look at the top of your browser window. Do you see the text you typed in? It should just run across the page. Stretch your browser window out or make it smaller. Look at the text. I think it is funny to watch it change.

The page you have made is the template/framework that your future pages can be built from.

NOTE: Never put anything, code or text, between the closing head tag and the opening body tag.


Give the browser some more instructions. Go to Part B of Demo 1.

Go to the Exercise 1 page.

© Claudia Faulk. Created in 2008. Updated 6.16