ADVANCED COMPUTER

HYPER TEXT MARKUP LANGUAGE

LESSON 1:

OBJECTIVE: To prepare the environment for the HTML development.

PROCEDURE: Discuss the Network , Accessing shared Folders, Mapping a drive to the share, and creating the individual student folders to store their work.

Identify the simple text editor that you will use to create the Web Pages.

Define the following TAGS.

This is the beginning and ending marker for the page: <html> </html>

This is the heading section of the page <head> </head>

The title section goes within the <head> <title> </title>

The title displays in the blue bar at top of window

The body section (text, images, links) <body> </body>

Have the students create the beginning page , using the above tags. Tell them to experiment by using a variety of text etc…

Make sure that the file is saved as a *.html extention in their folders. Then use the browser to view your work.

<html>

<head>

<title>My First Web Page</title>

</head>

<body>This is where the body

goes

</body>

</html>

ADVANCED COMPUTER

HYPER TEXT MARKUP LANGUAGE

LESSON 2:

OBJECTIVE: CREATING THE STYLE SHEET. Linking to the Web Page Sheet.

PROCEDURE: Discuss the Page you have created. How can we change colors, text fonts…? Style Sheets are a neat way to control the format of you pages.

Using the Text Editor, create another file. Call it “stylesheet1.css” The css extension is most important. Save the file in your web folder.

Now re-open the web page from lesson 1. Add in the line to link the stylesheet. It will go after the </title> or anywhere in the <head> section.

href=”stylesheet1.css” />

Save the web page.

Now open the style sheet. Add a line for background color

Body {background: #EDF2FF}

Save and open the Web Page. You should see a blueish background color.

Do a web search on HTML Color codes. Try some other colors as a background.

ADVANCED COMPUTER

HYPER TEXT MARKUP LANGUAGE

LESSON 3:

OBJECTIVE: ADDING SECTION HEADERS AND FONTS

PROCEDURE: Discuss the web page and the style sheet. You will now begin to build some text / fonts styles

Open the web page. In the <body> section, add a section header . There are 6 section header tags <h1> to <h6>

<body>

<h1> My Sports Card Collection </h1>

Save and View the page now.

Open the style sheet. Add the font information to change the <h1> text.

body {background: #EDF2FF;

font-family: “Trebuchet MS” , Arial ,

Helvetica, sans-serif }

You list the fonts by first choice, second choice.

If the visitor doesn’t have the font, the next in the sequence is chosen.

Sans-serif is a catch all basic font.

If a font is two words, quotes must be used to enclose the font name, ie “Trebuchet MS”

Add Color to the text by adding

Body {background: #EDF2FF;

Font-family: “Trebuchet MS”, Arial,

Helvetica, sans-serif;

Color: #4D65A0}

ADVANCED COMPUTER

HYPER TEXT MARKUP LANGUAGE

LESSON4:

OBJECTIVE: WRITING THE PARAGRAPH INFORMATION.

PROCEDURE: Open the web page. By using the <p> tag , you can add paragraphs of text to your page.

<h1>Sports Card Collection </h1>

<p> This sports card collection includes some stellar and yet bizarre offerings. Perhaps most impressive is the rare card of the early San Padre Lions’ Centerfielder, Munzio Cabeza, the three armed player. </p>

Save and View. Notice that the text “inherits” the color text of your Body heading.

Now to adjust the spacing of the page, Open the style page again.

body ….

h1 {margin:0}

p {margin-top:0; margin-bottom:12px}

This controls how much space is between the elements.

12px – stands for 12 pixels. This will give a bit of space between paragraphs.

ADVANCED COMPUTER

HYPER TEXT MARKUP LANGUAGE

LESSON 5:

OBJECTIVE: ADDING IMAGES TO THE PAGE.

PROCEDURE: Discuss the importance of small size image files. The best being a “*.jpg”

Use the paint program to draw an appropriate image for your page. Or take some digital camera shots. Or search for some pictures on the web. Gather a small handful of images that will be useful to include in your page.

Save these images as different extensions and compare the size of each. Save as smallest possible format.

Add this line to your web page. Use the <img> tag …. Play with the width height pixel dimensions.

<p>

… </p>

<img src=”xxxxxxx.jpg” alt=”Description if picture fails to load”

width=”160” height=”210” />

Now label the image by adding :

<img src=”xxxxxxx.jpg” alt=”Description if picture fails to load”

width=”160” height=”210” title=”This is my photo blah blah blah” />

<h2> The Photo of a Lifetime </h2>

ADVANCED COMPUTER

HYPER TEXT MARKUP LANGUAGE

LESSON 6:

OBJECTIVE: ADDITIONAL FORMATTING TECHNIQUES.

PROCEDURE: Finalizing the “INNER PAGE”.

To add “ “ to text. <h2>“text title info”</h2>

To add more paragraph info <p>texttext text text </p>

Adjust the paragraph font size on style sheet:

…

h1 {margin: 0}

p {margin-top:0; margin-bottom:12px;

font-size:12px; line-height:1.2}

Float images to one side .. style sheet. This way the text will float around the picture. Fix the spacing between picture and text with the “padding

img {float: left; padding-right:10px}

To adjust margins on additional heading sections:

h1, h2, h3 {margin: 0}

Draw a Border 3 parts width , style , and color

h2 {border-top: 1px solid #4D65A0}

Get special formatting on selected paragraphs. You classify paragraphs.

In the web doc:

<p class=”spec_info”>Item Number: 7845-C</p>

In the style doc:

p.spec_info {font-style: italic}

The period means the font only applies to this class paragraph.

Other font-styles are italic, oblique, normal

To get lines to break where you want them to break <br /> <brSPACE/>

<p class=”spec_info”>Item Number: 7845-C</p>

<br />10 notecards for $12.99

<br />10 postcards for $8.99

</p>

To add italics or bold within paragraph text: <i> </i> or <b> </b>

<p> The notecards <i>Bingo Bongo</i> blah blah blah.</p>

To Create structure. Divide the page up into sections for formatting.

On web page:

<div class=”intro”><h1>title

</h1>

<p>thtjthdhhdhdhthhththt

ththth.</p>

</div>

On style sheet:

Body…..

div.postcard {padding:15px}

To get a shadow on your images.

img.odd {float: left; padding-right:10px}

img.even {float:right; padding-left:10px; background: #EDF2FF}

Now add another picture and text and the style sheet will take care of all the formatting.

ADVANCED COMPUTER

HYPER TEXT MARKUP LANGUAGE

LESSON 7:

OBJECTIVE: CREATING THE HOME PAGE.

PROCEDURE: Create a new html doc. Call it index.html

Create a new style sheet. Call it home.css

Open the index.html Create a basic structure and link it to the two style sheets. The later style sheet takes precedence over the earlier.

<html>

<head>

<title> The Homepage </title>

href=”stylesheet1.css”/>

href=”home.css”/>

</head>

<body>

</div>

</div>

</body>

</html>

Create a background with a paint or image application. Save it as a *.jpg

First line in the new style sheet “home.css”

Body {background: url(xxxx.jpg)}

ADVANCED COMPUTER

HYPER TEXT MARKUP LANGUAGE

LESSON 8:

OBJECTIVE: CREATING LINKS FROM THE HOME PAGE.

PROCEDURE: To create links (pg. 71 ) use the <a> anchor element tag.

Link Text in a paragraph.

<p>xssjflkjskfskfjdj <a href=”webpage.html”>textkey</a>aaksdjfajsdfasd.</p>

Now to highlight text in the style sheet.

a:link, a:visited {color:#4D65A0}

a:focus, a:hover, a:active {color: #7A4DA0;

text-decoration:none; font-weight:bold}

*links selected by tab key (focus) , links selected by pointing(hover), links that are clicked (active)

Link by Image:

<p>ssadfkjasdkjasdkj<a href=”file.html”><img src=”filename.jpg” width=”100” height=”133” alt=”picturetext” /></a>asdfs</p>

ADVANCED COMPUTER

HYPER TEXT MARKUP LANGUAGE

LESSON 9:

OBJECTIVE: CREATING THE NAVIGATION BAR.

PROCEDURE: To create a navigation bar with image above it.

First create the image that will appear above the text options.

Then create the navigation options:

Now set up the styles page. Home.css

…

div.nav_bar {position: absolute; Position stays absolute, not floating

left: 10px;

top: 10px;

textl-align: right} Align the options to the right

div.nav_bar a {font-size: 11px} Reducing the font for only <a> refs

div.main {margin-left:90px} This will give room for nav bar image.

div.main p {font-style:italic} This italicizes the main paragraph stuff, nothing to do with nav bar stuff.