HTML


Lesson Objective

In this lesson you will learn the basics of HTML and use it to create a basic web page.



      Assets:



       HTML Information:

HTML (Hyper Text Markup Language) is a code (set of tags and rules) that is used to create documents to be viewed on the web. The code tells the web browser (Internet Explorer, Firefox, etc.) how to display the web page's words and elements to the user.


       Viewing Web Page Code:

Web pages are made up of an underlying code.  To view the code for any given web page go to View>Page Source (Firefox) or View>Source (Internet Explorer).  View the source code for this page.  Here is a more simple example of the code for a web page.  View the source code. 

Viewing the source code is a very useful tool because it can allow you to see how specific elements on a page were created and can help you troubleshoot problems you are having when designing your own.


       HTML Skeleton:

Each HTML page is made up of a basic skeleton.  This skeleton contains and holds all of the other tags that define the web page.

Below is the basic Skeleton of a HTML page.  Anytime you create an HTML page include these basic elements.  For the definition of each element see the "HTML Tags" section below.


<!DOCTYPE html>
<html>

    <head>

        <title>HTML Skeleton Page</title>
    </head>

    <body>
    Area for the content of the web page
    </body>

</html>


       HTML Tags:

The source code for each web page is made up of tags.  HTML tags surround content and give meaning to it.  Each tag is enclosed by angle brackets - < >.  Most tags have an opening tag and also a closing tag - <html> & </html>.  A closing tag is identical to the opening tag except that the tag begins with a backslash - /.

HTML Skeleton Tags

Opening Tag
Closing Tag
 Definition
<html> </html> Encloses the document's contents and tells the browser that everything between the tags is an HTML document.
<head> </head> Encloses the head of the document.  This tag includes information about the page.
<title> </title> Title that appears in the menu bar and tab of the browser.  The title always appears in the head of the document.
<body> </body> Main content of the document.  All of the content within these tags is what appears in the window of your browser.

Background page color and default text color can be set.

For example:
<body bgcolor="ffffcc"; text="blue">

Within the opening body tag the background color for the page can be set as seen in green and the text color as seen in blue.  The background color is set as a hexadecimal (hex) value and the text color is set as a name value.  For a list of the 216 web safe colors you can reference the following color chart.


Formatting & Style Tags

Opening Tag
Closing Tag
 Definition
<p> </p> Paragraph.  Puts text on a new line.
<br />
Line break.  There is no content associated with this tag, so is closes itself (has only 1 tag).
<hr />
  Horizontal Rule.  Places a horizontal line on the page.
<em> </em> Emphasize.  The italicize tag gets similar results - <i> </i>
<strong> </strong> Strong.  The bold tag gets similar results - <b> </b>
<center>
</center>
Center align
  <h1>  </h1> Main heading (biggest text size that is meant to be used only once).
 <h2>  </h2> (h2 - h6) - Heading sizes, h2 being the largest and h6 the smallest.


List Tags

Opening Tag
Closing Tag
 Definition
<ul> </ul> Unordered list (bulleted)
<ol> </ol> Ordered list (numbered)
<li> </li> List item.  These go between the <ul> or <ol> list tags and hold the content for each bullet or number.


Table Tags

Opening Tag
Closing Tag
 Definition
<table> </table> Table
<tr> </tr> Table row.  These go between the <table> tags and designate rows.
<td> </td> Table data.  These go between the <tr> tags and contain the content for each cell in the row.


Link, Mail, & Image Tags

Opening Tag
Closing Tag
 Definition
<a> </a> Link.  This tag links to other sites and pages. 

For example:
<a href="http://www.davis.k12.ut.us">Davis District<a/>

This would links to the Davis District home page as can be seen in green, and the link would display the text "Davis District" as seen in blue.


A link can be added that will send an email to a specific address.

For example:
<a href="mailto:johnsmith@randomemail.com">Send email</a>

This would send an email to the address in green and the link would display the text in blue.
<img>
Image.  This tag displays images on the page.

For example:
<img src="http://images.classmates.com/pho221/r/1/2/u/141157802_display.jpg"   width="150" height="150" alt="LHS Logo" />

This would display the image located at the web address shown in green.  The size the image will display on the page can be modified as shown in purple.  An 'alternate description' of the can be displayed for those who cannot or choose not to see the image as show in blue. 

If the image to be displayed is a file located within your site and it is named 'lhslogo.jpg' and saved in a folder called 'images', the code to display it would include a path to the image location rather than a web address and would look as follows: 

<img src="images/lhslogo.jpg" width="150" height="150" alt="LHS Logo" />


       Set Up:

In order to create a simple web page using HTML code you will use Notepad. 
  • To open Notepad go to the Start Menu>All Programs>Accessories>Notepad.

  • Once opened save the document as an HTML file with your name (don't use spaces).
  • For example:  JohnSmith.html

  • Find the saved file and open it in a web browser.  Each time you "save" the notepad .html file, you can refresh your web browser to see the changes you have made.


           Assignment:

    CREATE A BASIC HTML WEB PAGE.

    Scenario:
      You have been contacted by a high school teacher who wants to hire you to create a very simple web page with information about the course they teach.  You are told to be creative and stylize the site however you think will look the best. 
    Below are the elements they want included in the site.

    Required Elements:
    1. Site name that shows in the menu bar and tab of the browser (see the <title> HTML Tag section).
    2. Page color other than white (see the <body> HTML Tag section).
    3. Course name entered at top of page (h1 heading).
    4. Teachers name below the course name on the left of the page (use your name).
    5. Horizontal line to break up elements on the page (horizontal rule).
    6. Teachers email (active link) below the teachers name (use your school email address).
    7. Course description.
    8. Grading scale with percentages (in a table).
    9. Link (link to the Davis School District site).
    10. Logo image (find one on the internet) with alt tag description.
    11. List of assignments (numbered list).
    12. List of field trips (unordered list).
    Assignment Submission:  When the HTML page is complete, name the file with your last and first name (SmithJohn.html) and turn it in.

    *When finished go back to the home page and begin the Dreamweaver section.
      Comments