Web Designing Tutorials

HTML Code
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.
 
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.
MODULE 2: HTML BASICS
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.
• At this time, students need to understand that colors
can be identified
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=http://www.microsoft.com 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
font-family: times new roman; Times New Roman, which is blue on a
color: blue;
red background.
background-color: #FF0000

Web Designing Tutorials

Uploaded by

Document Information

Original Description:

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Web Designing Tutorials

Uploaded by

Copyright:

Available Formats

HTML Code

Copy the following code into a text document:

<title>Tags and Attributes</title>

 <strong>Does this look any different?</strong> strong or bolded text

 <i>How would this text be displayed?</i> 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

 <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>

MODULE 2: HTML BASICS

Review ideas covered in this lesson with students.

In this example, the image is located on the computer at C:\Documents and

Topic: Introduction of CSS

Review concepts covered during this lesson.

You might also like