Directions: For this activity, you will need a copy of a plain text editor program such as Notepad. It is not advisable to use a word processor such as Microsoft Word. Copy the following code into a text document:
<html> <head> <title>Tags and Attributes</title> </head> <body>

All HTML pages starts with the tag <html> and ended with tag </html>. The HEAD element (delineated by the head and /head tags) comes next and serves as a box or container that can hold a variety of other elements, including the TITLE element. The TITLE element contains the words that appear on the title bar or page tab in the browser window. In this example, “Tags and Attributes” is the title.
</body> </html>

Practice Activity: Create the following changes in your “Tags and Attributes” Web page:  Add the text “Tags and Attributes” at the beginning of the body.       Format the “Tags and Attributes” as h1. Format the “Tags and Attributes” as bolded text also. Format the “Tags and Attributes” as underlined also. Format the rest of the document display as h4. Italicize all the words that are all caps. (Hint: There are five words in all caps.) Add a comment for your name and the date.

tags tell the browser how to display text

Answers or way:  <b>How would  

this text look different?</b> bolded text (deprecated)

<strong>Does this look any different?</strong> strong or bolded text <i>How would this text be displayed?</i> italicized text (deprecated)

  

<em>Same as italicized?</em> italicized text <u>This tag might be useful for titles.</u> underlined text <body text=red>How would this tag change things?</body> text color would be red

Discuss that text can also be altered in its size. The use of a height tag will alter the size of the text. Show students the following examples:  <h1>This tag creates large text</h1>     
<h2>Creates a slightly smaller text</h2> <h3>Is smaller yet, but still larger</h3> <h4>Starts getting smaller</h4> <h5>Now the text is getting small</h5> <h6>And finally, this is the smallest</h6>

Discuss that a browser ignores the use of the “enter” key. The extra space in our example did not show in the Web browser. Explain that the use of a break tag <br> will place text on the next line. Explain that no ending tag is needed.

Discuss the difference between a “break” tag and a “paragraph” tag. A break tag places the following text on the next line. A paragraph tag places the text in a block, thus creating a paragraph. Ask students to remove the break tag they just created and place a beginning paragraph tag <p> right after the body tag <body> and place a closing paragraph tag </p> after the phrase “easy to learn and use.” Have students refresh their Web page to see the result. Discuss the process of creating a comment. Ask students why someone creating a Web page would want to use a comment. Explain that comments are created using the following coding and are not displayed when viewing a Web page.  <!--This is an example of a comment.-->

Essential Vocabulary Attributes – Additional information about an HTML tag. For example: In the body tag, the bgcolor is an attribute: <body bgcolor=#ff0000>. (To) code – To create an HTML file or other computer program by entering specific syntax into a file.

Element – One component of an HTML document (such as paragraph, image, or link), including one or two tags, as well as attributes and content, if any. Format – The design and layout of a page. HTML – Hypertext Markup Language. It is one of the publishing languages of the World Wide Web. Render – The process of a browser reading tags and attributes from an HTML file, interpreting them, and displaying the resulting Web page. Source code – The HTML code that produces the Web page. Tags – Codes in HTML provide details to the browser on how to display a Web page, such as begin the body, start a paragraph, or modify the appearance of text and other elements. W3C – World Wide Web Consortium, the organization responsible for Web standards, including HTML and accessibility. Web page – A file written in HTML, or other Web publishing language, that can be rendered by a browser and posted on the Internet. Web site – A collection of Web pages linked together on a server that creates a unified presence.



Learning Objectives Students will:  Manipulate HTML code using a text editor application such as Notepad.  View Web pages created using HTML code using a browser.  Change text within a Web page using HTML coding.  Align text within an HTML document.  Set the background color of a Web page.  Set the text color within a Web page.

Teaching Strategies • Discuss the idea of attributes. Attributes are information that alters the look of the page and, when they are included within the opening body tag, affect the entire document. • Students have already been given an example of this through the code "<body text=red>How would this attribute change things? </body>".

• Students should realize that this attribute sets the text to the color red. Using the word “red” is one way of defining color. Students should realize that two other ways exist, one being a hexadecimal code and the other being an RGB code. Explain that these methods will be discussed later in Module 3. • can be identified At this time, students need to understand that colors

a) by their word name, b) hexadecimal code, c) or their RGB code. Show students some of the Web sites that display colors with their color name, hexadecimal code, and RGB code. Links to these Web sites can be found in the PowerPoint for this lesson and in the “Resources and Web Links” section of this document. Color may also be used in the background of a Web page. The attribute to define the background color is placed in the opening body tag. An example of this code defining this attribute is <body bgcolor="33ff33">. Ask students to identify the color 33ff33 before displaying the page. Can they use one of the color charts to identify the hexadecimal color code? Ask the students to attempt to write the code and attributes for the following:  Black background and  White text Have the students check their answers with the following: <body bgcolor=#000000 text=#FFFFFF>. • Discuss that text can also be altered by alignment. Alignment is how the text is oriented on the page. Text can be aligned in three ways on a Web page: left, right, and centered. Text is automatically set to left alignment unless the designer changes this alignment. • Discuss that sometimes there is a need to visually separate text from other parts of the Web page. This can be done by using a horizontal rule (a horizontal line). o To create a horizontal rule, the tag <hr> is used. To this tag, the attributes of width (how far the line extends across the page represented by a percent), size (thickness of the line represented by an integer), and color can be added. A horizontal rule tag could look something like this: <hr width=90% size=10 bcolor=#0000FF>. This tag creates a blue line that extends across 90 percent of the Web page and is 10 pixels thick. Review ideas covered in this lesson with students. Explain how to write the code and attributes for each of the following situations:  Text color

 Background color  Alignment  Horizontal rule Assign the following as practice: Make the following changes to your “Tags and Attributes” Web page:  Center the title “Tags and Attributes,”  Make the background of the Web page green. (Hint: The hexadecimal code for green is 008000.)  Make the text color red. (Hint: The hexadecimal code for red is FF0000.)  Place a horizontal rule below the title “Tags and Attributes” which extends 75 percent of the Web page, is 5 pixels thick, and is green in color.

Learning Objectives Students will:  Manipulate HTML code using Notepad.     View Web pages created using HTML code using a browser. Insert images using HTML code into a Web page. Creating hyperlinks using HTML code. Add sound to their Web page.

Discuss images. One way to add some interest to your Web page is to add an image. An image is some visual representation such as a picture, photograph, graph, or drawing. If students already have some images saved on their computer, use them to add interest to their Web page. If they don’t have any images saved to the computer, locate some on the Internet and save in a convenient location. If students have access to digital photographs of themselves or can take photographs of each other in the classroom, the project will be more interesting to them. Discuss the IMAGE element. Images can be inserted into a Web page using HTML code. The <img> tag includes the letters “src” (source) indicating the name and possibly the location of the image file. Here is an example of an image tag:
<img src="picture.jpg">

This tag tells the Web page to add the image named picture. Discuss how to find an image path. Finding the path to an image on the computer can be difficult. Discuss this trick with students to finding the correct path to enter within the quotation marks. Open the folder containing the image that the student wants to use on his Web page. Right-click on the image and choose “Properties” from the menu. In the “Properties” dialog box, students will find a section called “Location.” Students can copy and paste this inside the quotation marks and then add a backward slash (\) and the file name. An example of an img element might look like this:

<img src="C:\Documents and Settings\Owner.FAMILYROOM\My Documents\My Pictures\picture.jpg" height=100 width=100 alt="My Image">

In this example, the image is located on the computer at C:\Documents and Settings\Owner.FAMILYROOM\My Documents\My Pictures\picture.jpg. You will notice that a few attributes have been added to the element. Using attributes, you can set the size of the image (height and width) and give the image an alt attribute. If an image does not load properly or the user has disabled images in the browser, the words in the alt attribute appear where the image would normally have been displayed. The words in the alt attribute are “spoken” by “read aloud” browsers commonly used by visually impaired viewers. Discuss hyperlinks. Hyperlinks are connections to other pages of the Web site or to other Web sites on the Internet. Hyperlinks can also be very useful for making connections to other areas of the same page. Hyperlinks are created with an anchor tag. An example of an anchor tag is: <a href= target="blank">Microsoft</a>. In this example, the word Microsoft will be displayed on the Web page and hyperlinked to the Microsoft Web site. An attribute has been added called “target.” This particular “blank” attribute tells the browser to open the Microsoft Web page in a new window. Visual clues can help a viewer keep track of which hyperlinks have already been visited. These visual clues are easily defined in the body element of a Web page. Here are three examples: <body link=#0000FF> sets the color of unvisited links to blue <body vlink=#00FF00> sets the color of visited links to green <body alink=#FF0000> sets the color of active links to red Discuss adding a sound file to a Web page. Adding a sound file to a Web page can add valuable content or extra interest. Adding a sound is very similar to adding an image file. Be aware, though, that the file may not play in all browsers. Overusing sounds can also be annoying. Be sure that the sound is appropriate for the Web site and that the viewer is able to turn the sound off if she chooses. To add a sound file to a Web page, an embed tag is used. Here is an example:
<embed name="Heirloom" src="C:\Documents and Settings\Owner.FAMILYROOM\My Documents\My Music\Heirloom.mp3" width=300 height=30 loop="false" autostart="false"></embed>

This tag plays the file called “Heirloom,” which is found on the computer in the location C:\Documents and Settings\Owner.FAMILYROOM\My Documents\My Music\Heirloom.mp3. The viewer will see an audio player 300 px. wide and 30 px. high. The file will play once when the attribute “loop” is set to “false.” If the “autostart” attribute is set to “false,” the viewer must start the player to hear the file. Review ideas covered in this lesson with students. Explain how to write the HTML code for each of the following situations:  Adding an image to a Web page   Inserting a hyperlink to a Web page Adding a sound to a Web page

Assign the following as practice: Make the following changes to your “Tags and Attributes” Web page:  Add an image of your choice.  Create a hyperlink to your school Web site.

Add a sound file to the Web page.

Topic: Introduction of CSS

Guiding Questions Discuss the students’ answers to these questions.  Look at your current “Attributes and Tags” Web page. Distinguish between the “content” and the “style” of this Web page.  How did you make changes to the style of your “Attributes and Tags” Web page in previous lessons?

Learning Objectives Students will:  Understand the value of using Cascading Style Sheets (CSS).   Modify the style of a Web page with the use of CSS. Apply CSS hierarchy.

Teaching Strategies Introduce CSS. Cascading style sheets (CSS) are used to create a consistent look within a Web site. Remind students that a Web site is a collection of Web pages. By using CSS, a Web designer can create a consistent look between the pages of the site and easily change the look with a few simple changes of code. Discuss the need for CSS. The original intent of HTML was to define the content of a Web page. As browsers grew and as the popularity of the Internet also grew, the separation between content and style became difficult. Style tags became intertwined with the content and made the development and modification of a Web page extremely time consuming. The World Wide Consortium (W3C) developed styles that became a part of HTML 4.0. Styles allowed designers to separate the content from the style by defining styles in a separate CSS file. This file contains most of the information needed to define the style of the Web page. The Web page file references the CSS file for the style specifications of the Web page. Discuss the advantages of using a CSS file. The CSS file defines the style elements and allows for the consistency between pages of a Web site. For example, on the first page of a Web site, the designer creates the code for the heading of the page to be bold, 32 pt. font, Arial, and green in color. Without CSS, the code to create this look is included with the content of the page. The designer completes the first page, then begins work on the second page. This time the

designer creates a similar heading but makes an error and enters the code to display the text at 26 pt. font. The site now lacks consistency. Using CSS techniques, a designer might define h1 as bold, 32 pt. font, Arial style font, and green text. A link to the CSS file is placed at the beginning of the Web page code and now the use of an h1 element will create text that is bolded, 32 pt. font, Arial, and green in color. The same reference to the CSS file on the second page will result in the same look for the heading on page two. The use of CSS improves the load time for Web pages. When a Web page is loaded by a browser, the browser looks at the code and follows the directions of the code to create the page that we see. Once the browser has downloaded the first page, the information is stored in memory, or cached. The subsequent pages that use the same information will now load faster because the style created in the CSS file has now been cached. Style sheets can define style elements in three different ways. • They can be defined within the HTML elements, • • within the HEAD <head> element, or through one or more external CSS files.

These three methods can be used within the same Web page or site. Combining the use of all three methods at one time can be confusing, but understanding how CSS works will help students understand the concepts involved. CSS creates a hierarchy of styles known as “cascading.” The following list shows the ranking order of how browsers determine which style to follow. The fourth rule is given greatest priority and, if it exists, is the style that will be displayed.

Browser default External style sheet Internal style sheet (inside the <head> tag) Inline style (inside an HTML element)
Cascading allows the designer to define the basic style in an external style sheet and then to manipulate it as needed with any style of higher priority. This allows for a paragraph style to be created for most of the text but words that need to be emphasized could be uniquely styled with an inline style description. CSS has three parts to its syntax: a selector, a property, and a value. When creating CSS code, the three parts are put together with this

syntax: selector {property: value}.
The “selector” is the HTML element for which a style is to be defined. Examples selectors include p, body, and h1. Each time these HTML elements are used within the Web page, the CSS file is accessed to define the style for the selector. The “property” is the attribute of that element that is to be styled. For example, if you want to define the “selector” element h1 as having a font size of 12 pt., the “property” is font-size. Now each time the HTML element of h1 is used within the Web page, the CSS file is accessed; the h1 element is defined as 12 pt. font. Examples of properties: font-size, text-align, color, font-family, and text-indent. The “value” is the specific quality of that element. This tells the Web page how to display the defined property. In the preceding example, 12 pt. is the “value” of the

“property” font-size. Examples of properties and their values are: font-size: 12 pt, text-align: center, color: #00FF00, font-family: Arial, and text-indent: 5em. A single selector can have multiple styles defined for it. This can be accomplished by including the styles with the same braces and separating the styles by semicolons. The BODY element could be defined as:
body { text-align: right; color: #FFFFFF; background-color: #000000; font-style: underline }

Likewise, the same style can be defined for multiple elements by grouping selectors. The HEADER elements here have been defined in a single style definition:
h1,h2,h3,h4,h5,h6 { Text-align: center; Color: red; Font-family: arial }

Review concepts covered during this lesson. What is the result of the following code? p {text-color: green} Each time the <p>…</p> tags are used, the text will be green. h1 {font-family: arial} Each time the <h1>…</h1> tags are used, the text will be in the Arial style. body { The body of the page will have font in Times New Roman, which is blue on a font-family: times new roman; red background. color: blue;
background-color: #FF0000 }

Sign up to vote on this title
UsefulNot useful