Teaching with Technology
 
  

Home
Course Materials
Teacher Resources
Technology Training
Research & Assessment
Digital Storytelling

  

HTML - Hyper Text Markup Language

We may begin to see reality differently simply because the computer ... provides a different angle on reality.
Heinz Pagels, Scientist (1939-1988)

   

 
FrontPage
HTML
PowerPoint
Search Engines
Digital Cameras
 

Learning Outcomes

  • Students will be able to create simple web pages using basic HTML tags.
  • Students will be able to recognize basic HTML tags in web pages that they browse on the Internet.
  • Students will be able to analyze the HTML tags in their FrontPage web pages and troubleshoot problems if necessary.

Definitions

  • HTML - The language that web pages are written in

  • HTML Document - text that is read by a browser

  • HTML Tags - basic English words or abbreviations that are sandwiched between greater than and less than signs. Think of HTML tags as you do the reveal codes in WordPerfect. Those codes work behind the scenes to manipulate your text in a word processing document.

  • Browser - translates the HTML into a web page

  • Text Editor - Notepad on a PC or SimpleText on a Mac

    • Allows you to develop the behind the scenes programming

  • ISP - Internet Service Provider

    • Provides access to Internet and space for your web page

  • WYSIWYG Program - What you see is what you get (Frontpage, Dreamweaver, Netscape Composer, Pagemill)

HTML Tags

When writing an HTML document, we put the text between opening and closing tags in order to make the text do something like change color or get underlined. Our Internet browser will read the tags and change the text to appear as programmed.

  • Opening Tags - have greater than and less than brackets
  • Closing Tags - have a forward slash after the greater than bracket

     

     

    Opening Tag

    Closing Tag

    Definition
      <HTML> </HTML> Indicates an html document
      <U> </U> Underline
      <I> </I> Italicize
      <BODY> </BODY> Indicates the body of an html document
      <CENTER> </CENTER> Center

Browsers read HTML tags left to right and top to bottom to create HTML pages that can be viewed by a browser.

To create an html document that looks like this:

Italicize this.

Here is the html programming:

<HTML>

<I>
Italicize this.
</I>

</HTML>

Basic HTML Document

You can think of drafting an html document like you might draft a letter. You set it up with a header and a body. A basic html document will have the following format.

<HTML>

<HEAD>

Text in your header.

</HEAD>

<BODY>

Body of HTML document

</BODY>

</HTML>

HTML is not case sensitive, but it is considered appropriate HTML writing style to use either all upper case or all lower case tags. Use of upper case tags and indenting make the HTML document easier to read and trouble shoot. Each opening tag is lined up with the appropriate closing tag. This allows for a programmer to ensure that each opening tag has a corresponding closing tag.

HTML Page Title

To give your web page a title that appears in the title bar at the top of a user's screen and is used by search engines to locate your page:

<HTML>

<HEAD>

<TITLE>
The header is where you put the descriptive title of your web page.
Ms. Austin's Third Grade Home Page
</TITLE>

</HEAD>


<BODY>

Body of HTML document

</BODY>


</HTML>

Saving and Opening HTML Documents in Notepad

You must draft your HTML documents in a text editor.

Open Notepad

Start
Programs
Accessories
Notepad

Save HTML Documents in Notepad

File
Save
Create New Folder for HTML documents
File Name: pig.html (Save document with an html extension)
Save As Type: All Files

Open HTML Documents in Internet Explorer

Open Internet Explorer
File
Open
Browse to your html
Open pig.html

You always need to save your edits before you send them to the browser. You always need to refresh your page in the browser to view your changes.

Practice 1

Create an html document with the title Three Little Pigs. The body of the document should look like this:

Once upon a time there were three little pigs.

Check your HTML Code for Practice 1

Open your document in Internet Explorer. Remember to check the page title in addition to the page text.

Using Multiple Tags

If you use multiple tags to alter text, make a point of putting them in the correct order.

<B><I>Bold and Italic</I></B> gives you Bold and Italic

Always set the beginning and end tags at the same time, placing them on the farthest end of the item being affected.

<B><I><U>Text</U></I></B>

Notice the Bold tags are on the far ends. Next in line are the Italics and finally the Underline tags are closest to the affected text. Just keep setting commands at the farthest ends each time you add them and you'll stay in good form.

Line Break and Paragraph Tags

<BR> - Line Break Tag - like hitting a return on the computer
<P> - Paragraph Tag - like hitting return twice to include a space between your lines of text

<P><BR> - To create a blank line

You don't need a closing tag for either the Line Break or Paragraph tag.

Change Size and Color of Text

Heading Tags

  • Headings 1 - 6, with 1 being the largest and 6 being the smallest. Use this for important headings on your page.
  • <H1> is the largest header </H1>
  • <H6> is the smallest header </H6>

Font Size Tags

  • Font sizes range from 1 to 7, with 7 being the largest.
  • Font size 3 is the default size. This is used for text on the page other than headers.
    • <FONT SIZE = 3> the default font size </FONT>

Font Color Tags

  • Change the color of the text. You can change the font colors using one of the 8 primary colors (red, orange, yellow, blue, green, white, black, or purple) or a hexadecimal number or code.
  • Primary Colors
    • <FONT COLOR = red> This text is red. </FONT>
  • Hexadecimal Numbers are 6 digits including numbers up to 9 and letters up to f.
    • <FONT COLOR = #00FF00>is the green used in the headings on this page</FONT>

Background Color of Page

Use the Background Color Tag

<BODY BGCOLOR=yellow>

Don't need a closing background color tag because the whole page will be the same color.

Color Chart Web Sites

Colorama

Complete HTML True Color Chart

Gotomy.com Color Chart

Lynda.com

Super Color Chart

Webmonkey Color Codes

Practice 2

Create a web page with the following parameters:

  • Title - Color Practice
  • Background Color - yellow
  • Heading Size - 1
  • Font Color - red
  • Heading Text - Color Practice
  • Font Size - 4
  • Font Color - green
  • Text - This is my color practice page.

Check your HTML Code for Practice 2

Links

Anchor

  • An anchor is a link within your page
  • <A HREF> - where we are linking from - hyperlink reference
  • <A NAME> - where we are linking to
  • </A> - closing anchor tag at the end of the linked text
  • A indicates an anchor tag
  • # indicates the link is on the same page
  • The variable is in quotes

    Common anchor - Back to top

    • a link at the bottom of the page that takes you back to the top.
    • <A HREF = "#top">Back to top</A>
      • This is located at the bottom of the HTML document.
    • <A NAME = "top">
      • This tag states a location in the document (found at the top of the page) so you don't need a closing tag or text following the tag.


    Anchors used as menu at top of page

    • <A HREF= "#definitions"> Click here to go to Definitions</A>
      <P><BR>
      <P><BR>
      <P><BR>
      <P><BR>
      <A NAME = "definitions">Defintions

Practice 3

Create a web page with the following parameters:

  • Title - Anchor Practice
  • Heading Size - 3
  • Font Color - blue
  • Heading Text - Anchor Practice
  • Two Blank Lines
  • Font Size - 2
  • Font Color - purple
  • Text - I hope my anchor works.
  • Four Blank Lines
  • Font Size - 1
  • Font Color - red
  • Text - Back to Top

Check your HTML Code for Practice 3

Link to External Page

    <A HREF = "http://www.du.edu">University of Denver</A>

Create Email Link

    • Mail to tag
      <A HREF = "mailto:daustin@law.du.edu">E-mail Debra Austin</A>

Practice 4

Create a web page with the following parameters:

  • Title - Link Practice
  • Link to the DU Home Page
  • Four Blank Lines
  • Link to your email

Check your HTML Code for Practice 4

Adding Graphics

Image Source Tag

  • <IMG SRC = "images/radio.gif">
  • You don't need a closing tag because the graphic appears directly where you place it.
  • Organize your graphics in the same folder - images.
  • Graphic files for the web must be either .gif or .jpeg and the difference has to do with file compression. Clip Art and Graphics are available in computer stores and for free on the web. You can also used scanned images or digital photographs.

Background Images

  • <BODY BACKGROUND = "images/eiffel.gif">

  • You don't need a closing tag. Your background image will be tiled (multiplied) until it reaches the bottom of the page. If you want just one image, you need to make it as big as your page, so it only uses one tile.

    Link Images

    • Replace the text (that would be linked) with the image source tag.
    • <A HREF = "http://www.tour-eiffel.fr/indexuk.html"><IMG SRC = "images/eiffel.jpg"></A>

Practice 5

Create a web page with the following parameters:

  • Title - Image Practice
  • Image from your Images folder

Check your HTML Code for Practice 5

Tables

  • Tables hold information in an easy to read and well organized manner.
  • Table Tag has 3 parts
    <TABLE> Table Tag
    <TR> Table Row - to add a new row to the table
    <TD> Table Data - to input cell data to each row

To Create a 2 X 2 Table Without a Border

  Home Visitors  
  12 7  

<TABLE>


<TR>


<TD>
Home
</TD>

<TD>
Visitors
</TD>

</TR>

<TR>


<TD>
12
</TD>

<TD>
7
</TD>

</TR>

</TABLE>

Table With a Border

You can increase the width of the border by making the number in the Table Tag larger than 1.

<TABLE BORDER = 1>


<TR>


<TD>
Home
</TD>

<TD>
Visitors
</TD>

</TR>

<TR>


<TD>
12
</TD>

<TD>
7
</TD>

</TR>

</TABLE>

You can include in your tables: letters, images, links, and other tables. To do so, you put the Image Source or H REF tags in between the Table Data tags. For example, to link to the DU page:

<TD>
<A REF = "http://www.du.edu">University of Denver</A>
</TD>

Practice 6

Create a web page with the following parameters:

  • Title - Table Practice
  • 3x3 Table without a border
  • Top Row, Center Cell - Title of Image
  • Second Row, Center Cell - Image
  • Third Row, First Cell - link to your email
  • Third Row, Third Cell - link to a web page

Check your HTML Code for Practice 6

Upload Web Page

  • This allows your web page to be stored on a web server so that users can get to your page on the Internet by typing in your url. You use File Transfer Protocol (FTP ) to move your files onto a web server. Your web address will depend on your ISP.

    It is a good idea to name your home page index.html. It is used as a default name for many home pages.

To Learn More

I consider excellent teaching to be both an art and a science. The science part is easier to learn (organization, objectives, activities, assessment, etc.)...but it is in the art form, when something within makes a connection happen between learner and material, tools and queries, the objective and the subjective, where the magic happens. It is that connectivity of all factors, where technology usually enables us to do something we couldn't otherwise do or expedites the response to the question posed by the learner.
- Steve Holmlund -
School-Based Technology Resource Specialist
Rachel Carson Middle School, Herndon, VA