table of contents

Lesson 1 Introduction to HTML

1 What is HTML?

HTML (Hyper Text Markup Language) is the language used to write Web pages which consists of codes (tags) embedded in the text of a document.

What are Tags?

Tags are codes in an HTML document which the browser reads and then interprets for subsequent display to a reader. Tags are not visible when an HTML document is viewed in a browser, but their effects are. Tags begin with the opening symbol "<" and end with the closing symbol ">"; and usually come in pairs, one that begins an action and one that ends it.
Below is an example of an HTML tag and its respective browser display:

HTML Code		Browser Display
I want to <B> emphasize </B> this!		I want to emphasize this!

1.1Try it out 1

Open up notepad and paste / type the following line of html, save as .html and then open file in chrome or firefox browser

<HTML>

<BODY BGCOLOR="#800080" TEXT="#FFFFFF">

Learning HTML is so much fun!


And it is really easy once you get the hang of it.

<HR SIZE=3>
</BODY>

</HTML>

1.2 Explanation of Document Structure Tags

<HTML>...</HTML>		Encloses the entire HTML document.These tags let the browser know to start reading and displaying the information presented within.
<HEAD>...</HEAD>		The <HEAD> element contains all information about the document in general. It contains HTML elements that describe the document's usage and relationship with other documents.
<TITLE>...</TITLE>		The <TITLE> is contained in the <HEAD> of the document. It is displayed at the top of the browser window and on the bookmark list, so it is important to choose something descriptive, unique, and relatively short.
<BODY>...</BODY>		The <BODY> element contains all the information which is part of the document. There are a number of different attributes for the <BODY> tag (attributes are the elements included within brackets that change the behavior or appearance of a tag). They are: "BACKGROUND=" Specifies the image tile that is to appear in the document's background. EXAMPLE: <BODY BACKGROUND= "picturename.gif"> </BODY> "BGCOLOR=" Sets the background color of the page. In order to do this a six digit hexadecimal number denoting a red-green-blue color value is included. Thus "000000" is black and "FFFFFF" is white and every other colour in between is described using these 6 characters in different combination. In addition to the hexadecimal system, there are sixteen color names that (other than black) that can be included in the tags. They are: Aqua, Red, Green, Blue, Violet, Fuchsia, Gray, Lime, Maroon, Navy, Olive, Purple, Silver, Teal, White, and Yellow. EXAMPLE: <BODY BGCOLOR="#FFFFFF"> This page has a white background. </BODY>

1.3 Add Background Image

Copy .jpg or .png into your html work folder ( change beach.jpg to name of your image )

<HTML>

	<HEAD>
	<TITLE>HTML</TITLE>
	</HEAD>

	<BODY BGCOLOR="#800080" TEXT="#FFFFFF">
	<BODY BACKGROUND= "beach.jpg"> </BODY>
	Learning HTML is <B>so</B> much fun!

	<P ALIGN=center>
	And it is really <I>easy</I> once you get the hang of it.
	</P>
	<HR SIZE=3>
	</BODY>

	</HTML>

1.4 Character Formatting

The Bold element specifies that the enclosed text should be displayed in boldface.
The Underlined element specifies that the enclosed text should be displayed underlined.
The Italic element specifies that the enclosed text should be italicized.
Below are these HTML tags beside samples of their respective browser displays:

HTML Code Browser Display
This text is bold! This text is bold!
This text is italicized. This text is italicized.
This text is underlined. This text is underlined.

1.5 Paragraphs

In HTML you indicate paragraphs with the and elements. Without these elements the document becomes one long paragraph. Likewise, browsers ignore any indentations or blank lines in the HTML code.
Thus the examples below, although coded differently, are all displayed the same way:
HTML Code

Browser Display
 This is a very short paragraph to illustrate my point. And this is the second paragraph. 

This is a very short paragraph to illustrate my point.
And this is the second paragraph.

 Although this
is written differently
with lots of carriage returns
it still only displays
the paragraphs when
you put in the Paragraph
Tag. Like so.

Although this is written differently with lots of carriage returns it still only displays the paragraphs when you put in the Paragraph Tag.
Like so.

NOTE: The closing tag may be omitted. This is because browsers understand that when they encounter a tag, it means that the previous paragraph has ended.
To preserve readability when composing HTML files, separate paragraphs with blank lines. As mentioned above, browsers will ignore blank spaces inserted into source code.

1.6 Paragraph Alignment

Paragraph alignment can be manipulated by including either the RIGHT, LEFT, or CENTER (note the Americanized spelling) attributes within the tag as shown below:

HTML Code		Browser Display
<P ALIGN=left> This paragraph is left aligned. </P>		This paragraph is left aligned.
<P ALIGN=CENTER> This is a centered paragraph. </P>		This is a centered paragraph.
<P ALIGN=RIGHT> This paragraph is right aligned. </P>		This paragraph is right aligned.

1.7 Forced Line Breaks

The line break tag can be used to control how browsers render text. When an HTML document is viewed the text normally does a word-wrap at the end of a line. If a text break is desired before the end of a line, use the tag to force a line break without any extra space between lines. This element has no closing tag.
HTML Code Browser Display
CN Tower 
301 Front Street West 
Penthouse 
Toronto, Ontario M5V 2T6 
Canada CN Tower
301 Front Street West
Penthouse
Toronto, Ontario M5V 2T6
Canada
Using the tag instead of the tag for short lines of text, such as the above example, would have resulted in unwanted additional white space.

The horizontal rule <HR> tag produces a horizontal line the width of the browser window. Horizontal rules are useful for separating major sections of a document. The length of a rule can be varied by using the "WIDTH=" and "SIZE=" attributes.

HTML Code		Browser Display
Horizontal Rules rule!<HR SIZE=3 WIDTH=80%>		Horizontal Rules rule!

1.9 Try it out!

Open up notepad and paste the following line of html, save as .html and then open file in chrome or firefox browser

<HTML>

<BODY BGCOLOR="#800080" TEXT="#FFFFFF">

Learning HTML is so much fun!


And it is really easy once you get the hang of it.

<HR SIZE=3>
</BODY>

</HTML>

Lesson 1 Continued :

Learning Objectives

Lesson 1

All students can create a HTML page that opens in your browser

All students are able to use HTML tags for headings and Title

All students can create lists in HTML ( order and un-ordered )

On completion Upload Screen shot of your web page and then work on your Scratch Quiz

HTML (Hypertext Markup Language)
HTML is the language for describing web pages.

CSS (Cascading Style Sheets)

A style sheet is a file that describes how a HTML file should look.

Use Notepad or Notepad ++ to create HTML pages

Class Learning Activity

Lesson 2

Introduction to CSS Cascading Style Sheets Click here

Take Challenge 1 Click Here

ID's watch video Click here and Then Take Challenge 1 Seasonal ID's Click Here

Selecting by Class watch video Click here and Then Take Challenge 2 Apples and Bananas Click Here

Start of Project Click Here