Sample: Assignment 6 Edit An HTML Document

Learn More about TechnoHTML5
Assignment 6 Edit an HTML Document

You are going to learn how to make changes to source code that has
already been written. You will begin to discover the basics of creating your
Each TechnoKids project is divided
own web page each time you make small adjustments to the HTML code
and notice the results on the web page in a web browser.
into separate assignments. An
assignment is an activity that takes
View a Web Page and Its Source Code
about 20 minutes to going

You are complete.
to open the index file in the web browser.
This will let you see what the web page looks like.
E
 Open the HTML5 folder.
 Open the Sample File folder.
 Right click the index file. From the menu, click Open with. Choose a browser.
PLKeep the web browser open.

M
You are now going to open the index file in Notepad or another
Students begin to create their own
HTML Text Editor. This program will let you edit the code.
SA
web page by editing a sample HTML

 Click the Sample File folder in the taskbar to view it again.
 Right click the index file. From the menu, click Open with. Choose Notepad or another
HTML Text Editor. document provided in the TechnoHTML
Resource folder. TIP: If Notepad is not in the
list, select Choose Another
App. Select More Apps,
and then choose
Notepad. Click OK.
 Use the taskbar to toggle back and forth between the browser and HTML Text Editor.
browser HTML Text Editor
Copyright © TechnoKids Inc. 21 TechnoHTML5

Look at the Code in the HTML Document
The first line <!DOCTYPE HTML> tells the web

browser the file is an HTML document.
The second line is <html> and the bottom line is
</html>. All code must go between these tags.
 Look at the HTML document:

<!DOCTYPE HTML>
<html>
<head> The head has information
<title>About HTML</title>
</head> about the web page.
E
<body>
<h1>Learning How to Build a Web Page</h1>
<img src="htmlfaces.gif" alt="html brackets">
<p>You are going to learn how to build a web page.</p>
<p>When you are learning how to build a web page it takes time. It is often difficult to have patience, as you
want to get started typing right away. It is a good idea to first learn about HTML tags. This will make it easier for you
when you make your own web page.</p>
<hr>
The body has <h2>Parts of an HTML Document</h2>
<p>An HTML document is divided into parts. The head has information about the web page. The body has the
the text, pictures, words, pictures, and links.</p>
Step by step instructions with illustrations

and links.
page.</p>
PL
<h2>Getting Started</h2>
<p>In this assignment, you are going to learn how to add text including headings and paragraphs. You will also
edit code to insert pictures and hyperlinks. When you are finished you should have a better understanding of HTML
code.</p>
<p>There are many free sites that can help you build your website.</p>
help beginners learn HTML code.

<p>For example, you can use a <a href="http://textanim.com">free text animator</a> to make a title for your web
<img src="learnhtml.gif" alt="learn html animation">

<p>There are also websites where you can download <a href="http://gifgifs.com">animated gifs</a>, which are
pictures that move.</p>
<a href="http://gifgifs.com"><img src="htmlcode.gif" alt="animated html code"></a>
<p>Does this web page seem a bit plain? In the next assignment, you will learn how to add CSS, which is
Cascading Style Sheets to make the background, text, and images look great!</p>
</body>
</html>
M
Edit the Title in the Head
A web page is divided into parts. The <head> </head> tells the web
browser information about the web page. Edit the title in the head.
SA
 Look at the source code that has the title:
<head>
<title>About HTML</title>
</head>
 Now look at the taskbar. Notice the browser button reads About HTML which is the page
title. Click About HTML.
 Now look in the web browser window. Notice that the page tab reads About HTML.

 Toggle back to the index.html document.
 Change the title from About HTML to: <title> Editing a Web Page </title>
 Select Save from the File menu.
 Toggle back to the browser.
 Click Refresh or press F5 on the keyboard to reload the web page with the changes.
E
PL
 Look at the taskbar button. It has also changed. Toggle back to the index.html
document. You should be looking at the source code.
Edit the Heading and Insert a Subheading in the Body

M
The code to display text, pictures, and links goes in the body of
the html document between the <body> </body> tags.
Heading tags are used to create headings and subheadings.

The main heading should use a <h1> tag. A subheading should
use a <h2> tag. A sub-subheading should use a <h3> tag.
SA
There are six heading tags: <h1> <h2> <h3> <h4> <h5> <h6>.
Each has a different font size, with h1 being the largest and h6
being the smallest.
 Edit a heading and add a subheading:
o Add text to the main heading: <h1>Learning How to Build a Web Page is Fun</h1>
o Add a new subheading:
▪ Look half way down the document.
▪ Position the cursor before the paragraph
<p>There are many free sites that can help you build your website.</p>
Press ENTER.
▪ In the blank space, type <h2>Helpful Websites</h2>
 Select Save from the File menu.

 Toggle to the browser.
Students edit the code in Notepad,
Click Refresh or press F5 on the keyboard to reload the changes.
then view the changes in a browser

to get instant feedback.
Add a New Paragraph to the Body
E
The tags <p> and </p> are used to create paragraphs. Most tags are
written in pairs with opening and closing tags (with a few exceptions).
Add your own paragraph using HTML.
o
Press ENTER. PL
 Add your name to the HTML document:
Near the top of the page, position the cursor at the end of the </h1> tag.
In the blank space, type <p> Edited by Student Name </p>.
 Save the changes and then view them in the browser.

M
Add a Line Break to Force Text to a New Line
SA
To have text move to a new line in a word processing document you

would press the ENTER key. To do the same thing in an HTML
document, you need to add a break or <br>. This tag is not written in
pairs; no end tag is needed.
 Add a line break:
o Position the cursor at the end of the sentence When you are learning how to
build a web page it takes time. Press ENTER.
o Type <br>

Create a Horizontal Rule to Divide the Content
You can add a line or horizontal rule <hr> to the web page.
This is used to divide the content into themes or topics. Similar
to the line break <br> it does not have a closing tag.
 Add a horizontal rule:
o Look near the bottom of the document.

o Position the cursor before the paragraph <p> Does this web page seem a bit plain?
E
Press ENTER.
o In the blank space, type <hr>.
 Save the changes. View them in the browser.
Replace a Picture
PL
You can add images to a web page. You must know the picture
name and picture type to write the code. As well, the picture
should be placed in the same location as the index.html file.
<img src="picturename.gif" alt="description">

M
 Examine the image tag:
<img src="htmlfaces.gif" alt="html brackets">
IMG SRC stands for image htmlfaces.gif is the filename ALT stands for alternate. The
source. An image is any of the picture. Notice the code places alternate text
picture on the web page. name of the picture is one onto the web page while
SA
word and has no capitals. the picture is loading. This

text should describe the
Also, notice that the file image.
type is a gif. When you add
a picture to a web page Why use alternate text?
you must include the file Screen readers read the alt
type with the name. text for people with visual
impairments.
There are several pictures in the Sample File folder where the
index.html file is located. Replace htmlfaces with htmlcomputer.
 Edit the tag: <img src="htmlfaces.gif" alt="html brackets"> with
<img src="htmlcomputer.gif" alt="animated computer">
 Save the changes and view them in the browser.

Edit Text in a Hyperlink
Hyperlinks are used to connect web pages together. A hyperlink

can be text or a picture. Edit the text used for the hyperlink.
<a href="http://www.domain.com">Text that is a hyperlink.</a>
 Look at the hyperlink below the Helpful Websites heading.

Change the words free text animator.
 Edit the tag: <a href="http://textanim.com">website that creates animated text</a>
E
 Save the changes and view them in the browser.
Edit HTML Code PL

Use what you have learned to
continue to edit the web page.
M
HTML Code Challenge:
 Add a new subheading using <h2> </h2>.

 Add a new paragraph using <p> </p>.
 Move text to a new line using <br>.
 Insert a horizontal rule to separate paragraphs using <hr>.
SA
 There is a picture named devices in the Sample File folder.

Optional activities challenge students.
Change the picture htmlcode.gif to devices.gif.
 Add the word free to the hyperlinked text website that creates animated text.
 Save the changes. View them in the browser.
Close Open Programs

Assignment 7 Edit the Style of an HTML Document
Cascading Style Sheets, or CSS for short, is source code used to create a
Next,consistent
students designlearn about
by setting the styleCSS, ortags in a document. It
of HTML
determines the appearance of text, images, and other page elements. For
Cascading Style Sheets, to produce a
example, you can use CSS to format the font, color, and size of ALL
headings with the tag <h1>.
professional, consistent
There are several design
ways to set the style of afor
web page using CSS:
• External File: You can create an external file and link to it. This method is ideal if you have
their web pages.
more than one web page in your website, as all web pages can reference the same
style sheet.
• Head: You can put the style information in the head of the html file. This method is best if
you have only one web page or you have unique styles for a web page in your site.
E
When you are learning it can be easier if all source code is in one place. For this reason,
you will use this method to make your web page.
• Body: You can put the style information in the body. This method should only be used
when you want to change the appearance of a single item on the web page. You will
explore how to use this method in this activity.
PL
To build a web page you need to understand how to set the design of HTML tags. To prepare for
this task, you are going to edit CSS in a web page. Instructions explain how to adjust the style of
the body, headings, paragraph, horizontal rule, and images.
View a Web Page and its Source Code
 Open the HTML5 folder. Open the CSS Sample folder.

M
 Right click the index file. From the menu, click Open with. Choose a browser.
Keep the web browser open.
The pictures are The page title is

SA
placed using the made using the

image tag <img> heading tag <h1>
The text is written
using the paragraph The section titles
tag <p> are made using the
heading tag <h2>
You are now going to open the index file in Notepad or another
HTML Text Editor. This program will let you edit the code.
 Click the CSS Sample folder in the taskbar to view it again.
 Right click the index file. From the menu, click Open with. Choose Notepad or another
HTML Text Editor.

View the CSS
Look at the head. The appearance of each element is listed

between <style type="text/css" media="screen"> and </style>.
 Look at the CSS in the head:

<style type="text/css" media="screen">
body { background-color: white;
width: 800px;
margin: auto;
}
h1 { font-family: verdana;
font-size: 100%;
color: red; h1 { font-family: verdana;
text-align: center;
padding: 5px; font-size: 100%;
h2 {
}
font-family: georgia;
color: red;
font-size: 100%; text-align: center;
E
color: blue;
text-align: left; padding: 5px;
} }
p { font-family: arial;
font-size: 100%;
color: black;
text-align: left;
line-height: 100%;
The h1 style tells the web browser how to
hr {
}
width: 400px;
show the heading 1 <h1> tag. In this
color: green;
example, all h1 headings will be written using
img {
table {
td {
}
}
</style>
PL
background-color: green;
height: 5px;
}
padding: 5px;
}
float: left;
font-family: arial;
font-size: 100%;
color: black;
text-align: left;
padding: 5px;
 View the web page. Read the first four paragraphs about CSS.
a Verdana font, have a normal font size of
100%, and will appear red, centered, with
5 pixels of space around the letters.
M
Set the Color of an Element using Words
body { background-color: white;
width: 800px;
margin: auto;
You can set the color of the background or text. You }
SA
can use a color name such as red, blue, white, or green.

Try it! font-size: 100%;
color: red;
text-align: center;
padding: 5px;
}
 Look at the web page. The web page background is white.
The page heading or h1 tag is red. All the subheadings or h2 { font-family: georgia;
h2 tags are blue and the text in the paragraphs or p tags are font-size: 100%;
color: blue;
black. The horizontal rule or line is green. Plus, there is one text-align: left;
word in the About Colors paragraph that is a different color. }
p{ font-family: arial; font-

 View the source code. size: 100%;
color: black;
text-align: left;
line-height: 100%;
}
Included in this project are hrresources
{ width: 400px;
listing
 Can you see the color words, white, red, blue, black, and color: green;
green in the style sheet? HTML and CSS tags for easy reference. background-color: green;
height: 5px;
}

 In the head, edit the color of each element using words: body { background-color: beige;
width: 800px;
margin: auto;
o body background from white to beige }
o heading 1 from red to olive
o heading 2 from blue to orange Keep the semi font-size: 100%;
color: olive;
colon ; after the
o paragraph from black to brown text-align: center; padding:
color word. 5px;
o horizontal rule from green to coral color: olive; }
h2 { font-family: georgia;
font-size: 100%;
 Save the changes. color: orange;
text-align: left;
}
 Toggle to the browser and refresh the page to view
p{ font-family: arial; font-size:
100%;
Heading 1 or h1 is olive.
E
color: brown;
text-align: left;
All horizontal rules or line-height: 100%;
}
hr are coral.
hr { width: 400px;
All Heading 2 or h2 color: coral;
background-color: coral;
are orange.
The body background is

beige.
PL
 Toggle to the HTML source code.
 Experiment with changing the elements using color words.

are brown.
height: 5px;
}
All paragraphs or p
To view more color names,

click HTML Color Names.
M
darkviolet lime magenta orangered gold
lavender pink palegreen peachpuff cornsilk body { background-color: #ECFD95;
width: 800px;
margin: auto;
}
Set the Color of an Element using Hex Codes font-size: 100%;
SA
color: #03406A;
text-align: center; padding:
If you want to use specific shades of color, you will 5px;
need to type in a hex code. It looks like this #8BB381. }
Every color has a hex code. h2 { font-family: georgia;

font-size: 100%;
color: #0A64A4;
 In the head, edit the color using hex codes: text-align: left;
}
o background - #ECFD95
p{ font-family: arial; font-size:
o heading 1 - #03406A To view more hex codes 100%;
color: black;
o heading 2 - #0A64A4 click Color Scheme text-align: left;
Designer. line-height: 100%;
o paragraph - black }
o horizontal rule - #A101A6 hr { width: 400px;

Following pages have been
Save the document and view the changes in the browser.
color: #A101A6;
background-color: #A101A6;
height: 5px;
removed from this excerpt. }

Padding creates
space around an
element.
 Use your skills to set the padding.
Checklists guide student exploration
E
Edit CSS
and provide extra challenges.
Use what you have learned to continue to

edit the style of the web page.
Explore CSS:
 PL
Delete the body style margin: auto;
What happens to the web page when this code is removed?
The web page is no longer centered on the screen and is aligned to the left.
Re-add the body style margin: auto;
M
CSS Challenge:
 Set the body background color to lightblue

 Set the width of the body to 600px
 Set the font family of the h1 tag to tahoma
SA
 Set the font size of the h2 tag to 140%

 Set the color of the h2 tag to #290671
 Set the text alignment of the h2 tag to center
 Set the line height of the paragraph to 130%
 Set the padding for the image to 15px
DIFFICULT CSS Challenge:
 Change the font family of ONE word in the body to impact.

 Change the line height of ONE paragraph in the body to 200%.
Close Open Programs

Assignment 8 Plan a Web Page
You are now going to make your own web page. To make this web
page you need to:
 Pick a topic. Choose something you know a lot about.

 Record three interesting facts about the topic.
 Find three websites about the topic.
 Find three pictures about the topic and save them in an
HTML folder.
If you need inspiration there are three sample web pages in the Web Pages folder. They were
created using the assignments and extension activities in this project.
E
Web Page Planner
Use this Web Page Planner to keep track of the resources you have collected about your topic.
Topic:
Information:
•
•
•
PL
Write down three interesting facts about your topic.
Before beginning to create their own

web pages, students complete a planner.
M
Pictures:
Save three pictures about your topic. When you save them make sure the filename is one word,
with no capitals or spaces. Write down the name of the picture in the space below. Include the
file type such as jpg or gif (For example: computer.jpg).
SA
•
•
•
Websites:
Find three excellent websites about your topic. Write down the URL in the space below.
• http://
• http://
• http://

How to Save Pictures to the HTML Folder
You will need three pictures for your web page. Below are
instructions on how to save pictures from the Internet. You will
place all your pictures into an HTML folder. Be sure to save the
pictures as one word, with no capitals or spaces.
Copyright and Images

You need to save images for use in your web page. However, it is important to know that you
cannot just take any image you want. Some pictures need to be purchased to use them. Those
will often have a watermark or a company name printed on them covering part of the picture.
Other pictures may have a note describing how they can be used while others are free with no
E
limitations on use. These are often called royalty-free.
Copyrighted pictures posted online may have a copyright © symbol on the image with the date
or name of the owner. This is a way of identifying who took the picture. If you want to use a
copyrighted picture to complete your school work, in most cases you can. However, when you
insert the picture into your work you should not remove the copyright symbol.
PL
Most search engine can filter images to quickly find those that you can use by license or usage
rights. Before saving a picture check to make sure you can use it in your school work.
Make an HTML folder for Pictures
 Go to the place where you save your work. Right click

the mouse.
 From the menu, point to New. Now select Folder from

the submenu.
M
 To name the folder, type HTML and press ENTER. If you
make a mistake, right click on the folder and select Rename.
 Close the window by clicking the Close (X) button.

Students search the Internet for
SA
Save Pictures to the HTML folder

information, pictures, and websites
 Open a web browser.
to be included in their web pages.
 Use the Internet to find a picture that you are able to use on your web page.
 Right click on the image and choose Save picture as or

Save image as from the list.
 Select the HTML folder.
 Type in a filename that is one word, with

no spaces or capitals.
 Click Save.
 RECORD THE FILENAME AND FILE TYPE (jpg or gif)

ON YOUR PLANNING SHEET.
 Repeat the above steps to save two more pictures.

Unit 3 Skill Review Start an Avalanche Web Page
Start a web page with information about avalanches.
1. Open Notepad or another HTML Text Editor.

2. Create the structure of the HTML document.
<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
Skill Reviews are activities for

</body>
E
</html>
students to practice their coding skills.
3. Add the title Avalanches to the head using <title> </title>
4.
5. PL
Add the heading Natural Disasters and Avalanches to the body using <h1> </h1>
Add the following paragraph to the body using <p> </p>

This web page provides information about the causes of avalanches, their threat to
humans, and what can be done to minimize this hazard. Read to find out what clues
nature provides to indicate that an avalanche is about to happen!
M
6. Save the file to your student folder: DO NOT SAVE OVER TOP OF YOUR WEB PAGE!
You do not want to save over top of your web page. For this reason, you are going to save
your work into a new folder called avalanches AND to be EXTRA SAFE you are going to call
the file index2.html (instead of index.html).
a. IMPORTANT! Create a subfolder called avalanches.
b. Inside the avalanches folder save the file as index2.html.
SA
7. View the web page in a web browser:

a. KEEP YOUR SOURCE CODE OPEN.
b. Go to the avalanches folder you just created.
c. Right click the index2 file. From the menu, click Open with. Choose a browser.
For the paperless classroom, each assignment. review,

skill review, and extension activity in the TechnoKids
Student Workbook is also included as a digital file.

8. Add style to the head.
<style type="text/css" media="screen">
</style>
9. Format the style of the body.

body { background-color: #A6E4EA;
width: 600px;
margin: auto;
}
10. Format the style of heading 1.

h1 { font-family: impact;
E
font-size: 220%;
color: #055C64;
}
11. Use your skills to format the style of the paragraph. Set at least two attributes.
12.
13.
 font-family
 color
PL
 font-size
 line-height
Save the changes to your work.
View the web page in a web browser.

Color Options:
 dark blue #001448
 dark brown #542800
 midnightblue
 your choice
M
SA

Extension Activity 2: Format Lists
Want to list items?
You can! Follow the instructions to create lists using these tags.
<ul> </ul> creates an unordered list or bulleted list
<ol> </ol> creates an ordered list or numbered list
<li> </li> identifies an item in a list Extension Activities at the end of
1. Open the HTML5 folder. sessions provide optional enrichment

2. Open the Baseball folder. challenges.
E
3. Right click the index.html file. Select Open with – choose a browser.
4. Right click the index.html file. Select Open with – Notepad or another HTML Text Editor.
Create an unordered list using the tag <ul>:
5. 

PL
Type the open tag <ul> before the list of player names.
In front of each player name type <li>
At the end of each player name type </li>
Type the close tag </ul> after the list of player names.
<ul>
<li>Mickey Mantle</li>
<li>Babe Ruth</li>
M
<li>Willie Mays</li>
<li>Yogi Berra</li>
<li>Jim Thorpe</li>
<li>Lou Gehrig</li>
<li>Sammy Sosa</li>
<li>Derek Jeter</li>
SA
</ul>
Save the changes and view them in the browser.

6.
Notice how the font is default and the bullets are discs.

Sample: Assignment 6 Edit An HTML Document

Uploaded by

Copyright:

Available Formats

Sample: Assignment 6 Edit An HTML Document

Uploaded by

Document Information

Original Title

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

Sample: Assignment 6 Edit An HTML Document

Uploaded by

Copyright:

Available Formats

Learn More about TechnoHTML5

Assignment 6 Edit an HTML Document

about 20 minutes to going

 Open the Sample File folder.

PLKeep the web browser open.

web page by editing a sample HTML

browser HTML Text Editor

Copyright © TechnoKids Inc. 21 TechnoHTML5

The first line <!DOCTYPE HTML> tells the web

 Look at the HTML document:

Step by step instructions with illustrations

help beginners learn HTML code.

<img src="learnhtml.gif" alt="learn html animation">

 Look at the source code that has the title:

Copyright © TechnoKids Inc. 22 TechnoHTML5

 Select Save from the File menu.

 Toggle back to the browser.

Edit the Heading and Insert a Subheading in the Body

Heading tags are used to create headings and subheadings.

 Edit a heading and add a subheading:

 Select Save from the File menu.

Copyright © TechnoKids Inc. 23 TechnoHTML5

then view the changes in a browser

Add a New Paragraph to the Body

 Toggle back to the index.html document.

In the blank space, type <p> Edited by Student Name </p>.

 Save the changes and then view them in the browser.

To have text move to a new line in a word processing document you

 Toggle back to the index.html document.

 Add a line break:

 Save the changes and then view them in the browser.

Copyright © TechnoKids Inc. 24 TechnoHTML5

 Toggle back to the index.html document.

 Add a horizontal rule:

o Look near the bottom of the document.

 Save the changes. View them in the browser.

<img src="picturename.gif" alt="description">

<img src="htmlfaces.gif" alt="html brackets">

word and has no capitals. the picture is loading. This

 Toggle back to the index.html document.

 Edit the tag: <img src="htmlfaces.gif" alt="html brackets"> with

<img src="htmlcomputer.gif" alt="animated computer">

 Save the changes and view them in the browser.

Copyright © TechnoKids Inc. 25 TechnoHTML5

Hyperlinks are used to connect web pages together. A hyperlink

<a href="http://www.domain.com">Text that is a hyperlink.</a>

 Look at the hyperlink below the Helpful Websites heading.

 Toggle back to the index.html document.

 Edit the tag: <a href="http://textanim.com">website that creates animated text</a>

Edit HTML Code PL

 Add a new subheading using <h2> </h2>.

 There is a picture named devices in the Sample File folder.

 Save the changes. View them in the browser.

Close Open Programs

Copyright © TechnoKids Inc. 26 TechnoHTML5

View a Web Page and its Source Code

 Open the HTML5 folder. Open the CSS Sample folder.

Keep the web browser open.

The pictures are The page title is