Tiverton High School - Department of Technology Education


NOTES  READ!
The following lesson is to be typed in Note Pad

Only Add the RED/BOLD text to each step of the activity

Key to properly Saving and Checking Your Work  
YOU MUST Save as with the file extension  .htm for documents to open in the browser!
 

In your HTML Folder, Create a sub-folder called "Lesson2"
SAVE everything from this lesson to this folder

Go To start>Programs Accessories>Note Pad
 

 

Saving correctly:

          Go to Save As
 

In the Save As dialogue box, save the file to Lesson 2 (which you just created)
 

Name the file:  Lesson2HomePage.htm
 

 

Checking in Browser

          To do this, open My Documents

          File should appear with a browser icon.

          If it appears as a text file, it was not saved with .htm

          Click on  your file to open, file should open as a WEB PAGE.

 

 

 


 

Lesson 1    Basic Heading

This will give your web page its title.

 

Type the following:

 

<HTML>

<HEAD><TITLE>TIVERTON WEB DESIGN CLASS</TITLE></HEAD>

 

 

 

2. Basic Heading Including META Tag

The META KEYWORDS are what tell a search engine what words to look for to find your page.

The META DESCRIPTION is what described what your page is about

 

Add the following typed in bold:

 

<HTML>

<HEAD><TITLE>TIVERTON WEB DESIGN CLASS</TITLE>

<META="KEYWORDS"CONTENT= "TIVERTON WEB CLASS">

<META="DESCRIPTION"CONTENT="A listing of what is done in the Web Design Class">

</HEAD>

.

 

3. Adding a BODY to the Web Page

The body is what one will see when they view your web page.

 

Add the following typed in bold:

 

<HTML>

<HEAD><TITLE>TIVERTON WEB DESIGN CLASS</TITLE>

<META="KEYWORDS"CONTENT= "TIVERTON WEB CLASS">

<META="DESCRIPTION"CONTENT="A listing of what is done in the Web Design Class">

</HEAD>

<BODY>

Tiverton Web Site Design Class

</BODY>

 

 

 

 Checking Your Work

 

Check on browser.

To do this, open My Documents, >?HTML>Lesson2 and Open the folder

The Lesson2Homepage File should appear with a browser icon.

If it appears as a text file, it was not saved with .htm

 

 

4. Adding a Heading (In order to cut down on confusion, the head has been omitted from the example...just work from the tag <BODY> downword

Heading sizes are identified on a cycle of H1 through H6.  H1 is the smallest and H6 is the largest. 

The ALIGN=CENTER code will make the heading CENTERED on that page.

 

Add the BOLD print to the code.

 

<BODY>

<H6>Tiverton High School</H6>

<H1 ALIGN=CENTER>Department of Technology Education</H1>

Tiverton Web Design Class.

</BODY>

 

 

 

5. Adding a Background Color

Adding a color is done with a six digit BG code

 

 

<BODY BGCOLOR="#3399CC">

<H6>Tiverton High School</H6>

<H1 ALIGN=CENTER>Department of Technology Education</H1>

Tiverton Web Design Class

</BODY>

 

 

 

 

 6. Working with paragraphs

          Text Manipulation – Bold, Italic, Underline

          All of those tags give the BODY character.

<B>…</B> Creates BOLD FONT.

<I>…</I> Creates ITALICIZED FONT. 

<U>…</U> Creates UNDERLINED FONT

 

 

 

<BODY BGCOLOR=#3399CC>

<H6>Tiverton High School<H6>

<H1 ALIGN=CENTER>Department of Technology Education</H1>

Tiverton Web Design Class.  In this <B> GREAT </B> class we learn about all kinds of things in <I> Web Design </I>!

All this and <U> MORE </U> in the <B>TIVERTON WEB DESIGN CLASS!</B>

</BODY>

 

 

 

 

7. Adding, formatting, lists and paragraph breaks

<Li> Creates a LIST.

<P> Creates Paragraphs

 

 

<BODY BGCOLOR=#3399CC>

<H6>Tiverton High School</H6>

<H1 ALIGN=CENTER>Department of Technology Education</H1>

Tiverton Web Design Class.  In this <B> GREAT </b> class we learn about all kinds of things in <I> Web Design </I>!

<p>

We will…

<Li> Learn the HTML language.

<Li> Plan out a Web Page

<Li> Type it out

<Li> And Publish it!

All this and <u> MORE </u> in the <b>TIVERTON WEB DESIGN

CLASS!</b>

</BODY>

 

To View all the additions you have just made, Save the file again and open it the same way that you did before.

 

 

 

8. Adding a Hyperlink

 

Add the BOLD print to the code.

 

<BODY BGCOLOR=#3399CC>

<H6>Tiverton High School</H6>

<H1 ALIGN=CENTER>Department of Technology Education</H1>

Tiverton Web Design Class.  In this <B> GREAT </b> class we learn about all kinds of things in <I> Web Design </I>!

<p>

We will…

<Li> Learn the HTML language.

<Li> Plan out a Web Page

<Li> Type it out

<Li> And Publish it!

All this and <u> MORE </u> in the <b>TIVERTON WEB DESIGN CLASS!</b>

For pics go to <A HREF="pics.htm">HERE</A>

</BODY>

To View all the additions you have just made, Save the file again and open it the same way that you did before.

 

 

 

 

Develop pics.htm page to connect to

 

Create a new file in Note Pad

Save as pics.htm, Save to the Lesson2 Folder

 

<HTML>

<HEAD>

<TITLE>PICS</HEAD></TITLE>

<BODY>

 

NO PICS AVAILABLE AT THIS TIME!

<A HREF="Lesson2HomePage.htm"> return to home!</A>

<A HREF="http://www.tivertonschools.org">For more information Click Here</A>

 

</BODY>

 

Click Save .......If you did not initially save the file REMEMBER..........Save to file as pics.htm

 

To View all the additions you have just made, Save the file again and open it the same way that you did before.  Test hyperlinks!!!