RECIPE #22 – Beginning HTML   Print This Page

by Glenn Doney

 

For this activity, use NOTEPAD.EXE (found in Start Menu/Programs/Accessories) to create web pages with HTML.  Save this file as “htmlactivity.htm” with the extension of “.htm” in a special folder called “HTML Activity”.  View your files in Internet Explorer or whatever web browser you have (Netscape, Mozilla, etc.).

 

HTML is the “language of the internet”.  It was created so that ANY kind of computer in any part of the world could view the same information.  It stands for HYPERTEXT MARKUP LANGUAGE. Web pages are TEXT files that hold instructions for Web Browsers about how to DISPLAY text, links, photos, backgrounds,video, and more. Web pages do not hold pictures or text in the same way as a Word Processor.  Web pages just tell the Web Browser where the pictures are located and how to display them.  Open Internet Explorer, go to any web page and choose VIEW and then SOURCE. Most all of that gobbledy-gook is HTML.  Don’t panic! We’re just going to learn the basics of HTML.

 

After a web page is created, it is first uploaded to it’s permanent home on a web server, where visitors receive copies that they can view on their computers.

 

DO THE ACTIVITIES IN EACH BOX THAT FOLLOWS:

 

Every web page has this basic structure:   HTML at the beginning and end, HEAD and BODY sections inside the HTML tags.

<html>

<head>
<title>Title goes here</title>
</head>

<body>
Body goes here
</body>

</html>

TAGS

 

So what are all these "<" and ">" things doing here? When you place a certain thing within these, you are making something known as a TAG. For example the <b> tag is saying to start bold text, and the </b> tag is saying to stop bold text. The tag with the slash (/) is known as the closing tag. Many opening tags require a following closing tag, but not all do. Tags make up the entire structure of an HTML document.

Type the following into Notepad, Save & view in Internet Explorer:        You can have <b>bold</b> and <i>italicized</i>, <font size=+2>Larger</font> and <font size=-2>Smaller</font>, or it could look <tt>type-written</tt>.

You’ll then see this:                      You can have bold and italicized, Larger and Smaller, or it could look type-written.

Some Basic Tags:

Type this:                  <h1>Bob fell over the chicken. [H1]</h1>

To see this:         Bob fell over the chicken.

 

More Basic Tags:

<h1 align=center>Center Align</h1>        Center Align

 

<br>      :is the LINE BREAK tag and starts a new line.

 

<hr width=50>  or just <hr>        

 

LINKS:

Without Links, the Web wouldn’t be the WEB! To add a link... you will use the <a href="location"> opening tag and the </a> closing tag. Whatever appears between these two tags will become underlined and colored, and if you click on the underlined text it will send the viewer to the location within the quotes.

Example of a link...                      Visit Champion Christian School!

Type this HTML:                       Visit <a href=http://championchristianschool.org/index2.htm>Champion Christian School</a>!

 

Example of a basic in-line image...  (The ALT tag causes the browser to display a label which describes the image.)
<img src="http://championchristianschool.org/images/ccslogoleftsm.gif" WIDTH=93 HEIGHT=180 ALT="Champion Christian School">

 

Making your Image Clickable –

 

Many times you may want to have an image that is linked, so that if someone clicks the image, the person will be taken to another page. You just need to place the IMG tag within the A HREF tags. THIS IS AN EXAMPLE, DON’T TYPE IT: (<a href=location_of_link><img src="location_of_image"></a>) You may also use the ALIGN tags with images.

 

TYPE THIS:  <a href=http://championchristianschool.org/>

<img src="http://championchristianschool.org/images/ccslogoleftsm.gif” align=center></a>

 

Text Color and Fonts

 

You can change the Font by using this tag:       face=”__________”

For example:

Helvetica
<font size=+2 face="Impact">Impact</font>
Impact
<font size=+2 face="Comic Sans MS">Comic Sans MS</font>
Comic Sans MS

------------------------------------------------

You can change the color of the text by setting the COLOR="font_color" attribute in the <FONT> tag. The Color is usually set by using the hexadecimal system (#000000 black to #FFFFFF white) but can also be set in newer browsers by using the simple word of the color. (Red for Red, Blue for Blue, etc.)

Example of Text Color...

<font color="Blue">Hey I'm Blue!</font>
Hey I'm blue!
<font size=+2 face="Impact" color="Green">Hey I'm green and in Impact Font!</font>
Hey I'm green and in Impact Font!
<font color="Red">Hey I'm red!</font>
Hey I'm red!

Change the Page Background Color

 

1.  Open MS Frontpage, right-click in the new blank white page and choose Page Properties/Background/Color and select a color and click OK.

  1. Click on the HTML Tab next to the NORMAL Tab at the bottom of the page and look for the TAG that changed the Background Color.  Copy and paste this same TAG into your Notepad file, htmlactivity.htm.

 

NOW… aren’t you glad that you have a tool like FrontPage that writes the HTML for you?

 

 

 

 

 

 

 

 

 

 

NAME ________________________________

DATE ________________________________

PERIOD ______________________________

 

Recipe #22 - HTML Quiz

 

1.  What does HTML stand for?  _________________________________________________________________

 

2.  What is a TAG?  What does it do?  _____________________________________________________________

 

3.  What tags do ALL web pages begin and end with?  _______________________________________________

 

4.  What 3 pairs of tags are included in ALL web pages? __________________________________________________

 

5.  What are the opening and closing tags for BOLD? ___________________________

 

6.  What are the opening and closing tags for ITALICIZED? ____________________________

 

7.  What are the opening and closing tags for UNDERLINE?­­­­­­­­­­­­­­­­­­­­­­  ­­­­­­­­­­­­­­______________________________

 

8.  What are the opening and closing tags for the biggest HEADING?  ___________________________

 

9.  What is the tag for the HORIZONTAL RULE? ___________________________

 

10.  What is the tag for LINE BREAK? ______________________________