Module 2 Core Competencies

SENIOR HIGH SCHOOL
SENIOR HIGH SCHOOL
.NET TECHNOLOGY
MODULE 2: CORE COMPETENCIES
HTML
This competency is divided into seven 5
lessons, as follows:
Lesson 1: Creating an HTML document
Lesson 2: Working with Paragraphs
Lesson 3: Background, Text, Video and Audio
Lesson 4: Working with Images
Lesson 5: Working with Tables
Lesson 6: Working with Hyperlinks
Lesson 7: Working with Forms
At the end of this module, you are expected to achieve the following objectives for this
session:
 Create an HTHL document;
 Build paragraphs
 Add background and text color of a page
 Add video and audio
 Insert graphics into a web page
 Creating tables
 Insert hyperlinks
 Work with forms
This module has the following parts and corresponding icons:
Department of Education  Republic of the Philippines
1
Creating an HTML Document
WHAT I NEED TO KNOW
At the end of this lesson, you will be able to:

 Build, view, and save HTML file;
 Apply header, footer, navigation, article, section and
 Understand generic container
WHAT I KNOW
Directions: Arrange the steps in opening, saving and viewing HTML web page using
Notepad++ in Android phone. Write numbers 1-5.
____ Write your codes and content on the text area.
____Open Notepad++
____ Write the filename.
____ Click this button to view web page.
____ Click the save button.
WHAT IS IT
Creating an HTML document

You can start creating an HTML document with the use of the text editor.
For Windows 10 Home.
1. Click the start button.
2. Click Windows Accessories.
3. On the Notepad window, type in the sample below
Start
butto
n
2
For Windows 8
1. Click the Start button and click All Programs.
2. Click Accessories and click Notepad.
Start
button
3
Saving an HTML Document
After creating your codes, you can save your HTML document so that you can view or work on it
later.
1. On the Menu Bar, click File and click Save or Save As.
2. On the Save As dialog box, type your file name in the File name box.
3. When saving always change the file type to All Files and use .html or .htm file extension.
4. Click Save.
File
name
Save as type: All
Files
Viewing an HTML Page

You can now view your HTML document on your Web Browser. Click Save
1. Locate your HTML file
2. Open with any web browser or Double click.
Example:
Sample Run: HTML Code:
4
Using Header
The header element can contain a group of introductory or navigational content of your
document. The header can include a logo, main navigation, links or search box. Use the tags
<header></header>.
Header
Main Content Related

Information
Footer
Example:
<!DOCTYPE html>
<html>
<head>
<title>ONHS</title>
</head>
<header>
<table cellpadding='20' width='1000' border=0>
<tr><td bgcolor='lightblue'><center><font face='elephant' size='5' color ='white'>OSLOB
NHS</center></td>
<td colspan='3' bgcolor='lightblue'><center><font face='tahoma' size='4'
color='white'>Oslob National High School is located at Lagundi, Oslob, Cebu</font>
</center></td></tr>
</header>
</body>
</html>
Sample run:
Header
5
Using Navigation
Navigation allows you to link important groups. Links in a <nav> element may point to contents
within the page, to other pages or both.
Example:
<!DOCTYPE html>
<html>
<head>
<title>Computer Books</title>
</head>
<body>
<header>
<nav>
<ul>Books
<li><a href="VG_Cover_Animation.jpg">Animation and Multimedia</a></li>
<li><a href="VG_Spreadsheet_2009.jpg">Visual Basic 2010 and Access</a></li>
<li><a href="VG_InDesign">InDesign CS6</a></li>
</ul>
</nav>
<header>
</body>
</html>
Sample Run:
As you noticed, the link is underlined. Once you click the link it will go to a link where the
link file was saved. If we click Animation and Multimedia it will link to an image file used in our
code above.
The tag used for hyperlink is the tag <a> </a>.
6
Anchor tag or <a> element
• Defines a hyperlink which is used to link from one page to another
• Uses <a> </a>
Attribute - href – indicates the link’s destination
- specifies the URL of the page in link
Ex. <a href=“VG_Cover_Animation.jpg”>
Creating an Article <article>

An article element represents a self-contained composition in a document and is
independently distributable and reusable. An article can be a newspaper or magazine article,
forum post, blog entry, book review, product description and more.
Creating a Section
The section element represents a generic section of a document, usually with a heading.
The <section> tag may be used to have a more meaningful markup. Each sectioning element has
its own h1 to h6 hierarchy.
Using Footer
The footer element may represent a footer for the body, article, section or aside. A footer
can be a copyright, appendix, index or license agreement, depending on its content.
Using a Generic Container

You can use the <div> element to wrap a container around a segment of content in order
for you to apply styling with CSS or effect with JavaScript, not on the entire page, but on a particular
portion or division only.
You can name div element with id or class. The unique id attribute that you created will be
used to identify the segment for styling and formatting.
Example
<!DOCTYPE html>
<html>
<head>
<title>Jemma Inc</title>
</head>
<div id=”creative”>
<body>
<header>
<table cellpadding='20' width='1000' border=0>
<tr><td bgcolor='lightblue'><center><font face='elephant' size='5' color ='white'>Jemma
inc</center></td>
<td colspan='3' bgcolor='lightblue'><center><font face='tahoma' size='4'
color='white'>About Us – Books – Software – Hardware - Training</font>
</center></td></tr>
</table>
7
<nav>
<ul>Books
<li><a href="VG_Cover_Animation.jpg">Animation and Multimedia</a></li>
<li><a href="VG_Spreadsheet_2009.jpg">Visual Basic 2010 and Access</a></li>
<li><a href="VG_InDesign">Career Development</a></li>
</ul>
</nav>
</header>
<article>
<h1>Career Development</h1>
<p>The book aims to prepare the students to the different tasks related to or can be used in
business and in management using the various MS Office and designing</p>
<section>
<h2>Training</h2>
<p><img src="VG_Cover_Entrep.jpg" width="203" height="255" align="left hspace="5"
vspace="18">Training will be about.....</p>
</section>
</article>
<footer>
<p><small>© Copyright 2013</small></p>
</footer>
</div>
</body>
</html>
Sample run:
navigation header
heading
section article
footer
8
WHAT I HAVE LEARNED
A. Directions: Write True is the statement is correct otherwise write False.

1. The header element may represent a footer, article, section or aside.
2. When you place a header element, there should always be a footer element.
3. Navigation element allows you to link important groups.
4. An article element represents a self-contained composition in a document and is
independently distributable or reusable.
5. The section element represents a generic section of a document, usually with a heading.
6. An attribute should have a value.
7. An empty tag should have an opening and closing tags.
8. Each tag has different tasks.
9. You can view your HTML document in a web browser.
10. You can use the <div> element to wrap a container around a segment of content in order
for you to apply styling with CSS or effect with JavaScript.
B. Directions: Write the functions of the following elements in HTML5.

Element Function
1. Header
2. Footer
3. Article
4. Nav
5. Section
WHAT I CAN DO
HANDS-ON
Create an HTML document with header, footer, article, navigation, and section.
Make your own design. Use appropriate tags.
9
Working with Paragraphs
WHAT I NEED TO KNOW

 Build and align paragraphs;
 Understand ordered and unordered lists;
 Apply line and multiple line breaks and horizontal rule;
 Use definition list, pre-formatting text, invisible comments and quote passages
 Explore nesting tags and lists
WHAT I KNOW
Directions: Identify the following as element, attribute or value. Write element,
attribute or value on your answer sheets.
1. 12px 6. red
2. color 7. ol
3. left 8. square
4. font 9. time
5. width 10. hr
WHAT IS IT
Creating a New Paragraph

Now that you can write you own Web page, give it a title and put heading on it. It’s about
time to start writing paragraphs to put in some content on it. In HTML, there are tags for writing
paragraphs. Yes, it’s a container tag and it is the <p> </p>.
Example:
<!DOCTYPE html>
<html>
<head> Sample run:
<title>Latest IT Books</title>
</head>
<body>
<font size="14" face="Arial">
<p>This is the first paragraph.</p>
<p>This is the second paragraph.</p>
<p>This is the third paragraph.</p>
</font>
</body>
</html>
10
Aligning a Paragraph
You can align a paragraph by using the paragraph tag pair <p align=”left”>, <p align=”right”>
or <p align=”center”>.
Example:
<!DOCTYPE html>
<html>
<head>
<title>Aligning Paragraph</title>
</head>
<body>
<p align="left>This paragraph is aligned to the left.</p>
<p align="center">This paragraph is aligned to the center.</p>
<p align="right">This paragraph is aligned to the right.</p>
</body>
</html>
Sample run:
Attributes for <p></p>

Attribute Definition Values
align Indicates the horizontal alignment of the paragraph left, right,
Ex. <p align=“right”>This paragraph should stick to the center, justify
right side of the screen.</p>
class, id, style Used in Cascading Style Sheets or CSS (to be discusses in
later topics)
Quoting Passages
You can place quotes in indented form and shrink them to be set apart from the main
paragraph by using the tag pair <blockquote></blockquote>.
11
Example:
<!DOCTYPE html>
<html>
<head>
<title>Quoting Passages</title>
</head>
<body>
<p>This is an excerpt from the poem Tree.</p>
<blockquote><font face="Arial" size="3">”I think that I shall never see a poem as lovely as a
tree”</font></blockquote>
</body>
</html>
Sample run:
Adding Line Breaks

Have you noticed how your Web browser treats the white spaces on your HTML file? Your
Web browser ignore white spaces and pressing the Enter or the Return Key does not actually
create a new line on the chunk of text on you Web page as seen on the code. It will create a new
line for the text that you want to appear on the next line.
The <br> tag creates a line break or a new line.
Example:
<!DOCTYPE html>
<html>
<head>
<title>Line Breaks</title>
</head>
<body>
<font face="arial" size="6">Text will continue to flow in one line until the text reaches the edge
of the browser window even if you press the Enter key. If you want to break a line and go to the
next line you have to add the line break tag. <br> With the line break tag <br> you can go to the
next line <br> anytime you want.</font>
</body>
</html>
12
Sample run:
Adding Horizontal Rule

The Horizontal Rule allows you to underline headlines or add a borderline. You can add a
line by using the Horizontal Rule tag <hr>. The horizontal rule tag places a horizontal rule or line
that extends up to the Web browser’s width.
Attributes Definition Values
Align Indicates the horizontal alignment of the horizontal rule left, right, center
Ex. <hr align=“center”>
size Indicates the size of the horizontal rule in pixels Number of pixels
Ex. <hr size=“12”>
width Indicates the width of the horizontal rule in pixels or Number of pixels or
percent of the width displayed by the Web browser number expressed
Ex. <hr width=“300”> as percent
noshade Indicates if the default shading in the horizontal rule is to None
be removed
color Indicates the color of the horizontal rule assigned name pf
Ex. <hr color=“green”> color or hexadecimal
value
class, id, Used in Cascading Style Sheets or CSS (to be discusses in
style later topics)
Modifying a Horizontal Rule

You can also align or adjust the width, length and shading of the rule or line. You can also
create your own graphic horizontal rule by using GIF images.
13
Example:
<!DOCTYPE html>
<html>
<head>
<title>Horizontal Rule</title>
</head>
<body>
<hr>
<hr color="red" width="300" align="left">
<hr color="blue" width="400" align="left">
<hr color="green" width="500" align="left">
<hr noshade size="12">
<hr color="green" width="500" align="right">
<hr color="blue" width="400" align="right">
<hr color="red" width="300" align="right">
</body>
</html>
Sample run:
Different
horizontal
rule sizes
and
alignments
Ordered List
You can present data in enumerated format or list. The first type of list is the ordered list or
more commonly known as the numbered list. This is the type of list where each item is numbered
usually starting at 1 (but can be changed using the start attribute). The ordered list uses the
container tag <ol></ol>. Each item in this list is specified by the tag <li></li>.
Example:
<!DOCTYPE html>
<html>
<head>
<title>Ordered Lists</title>
</head>
<body>
<h3>Types of Colors</h3>
<ol>
<li>Primary</li>
<li>Secondary</li>
<li>Tertiary</li>
</ol>
<h3>Classroom Officers part 1</h3>
<ol type='A'>
<li>President</li>
<li>Vice President</li>
14
<li>Treasurer</li>
</ol>
<h3>Classroom Officer part 2</h3>
<ol type='i' start='4'>
<li>Secretary</li>
<li>Auditor</li>
<li>PRO</li>
</ol>
</body>
</html>
Sample run:
Notice that the value for the start attribute in the last list is 4 and since that list is to
enumerate the items using lowercase Roman Numerals, it started its count on iv.
The ordered list has different types of numbering and can be specified by keying the
specified value for the type attribute:
 1 – for regular numbering (1, 2, 3, 4, etc.)
 a - for lowercase alphabet (a, b, c, d, etc.)
 A – for uppercase alphabet (A, B, C, D, etc.)
 i - for lowercase Roman numerals (i, ii, iii, iv, etc.)
 I - for uppercase Roman numerals (I, II, III, IV, etc.)
type Indicates the type of numbering to be 1, a, A, i, I

used in the list
Ex. <ol type=‘A’></ol>
start Indicates the value or number of the first Any number
item in the list
Ex. <ol type=‘1’ start=‘3’></ol>
The values for these attributes are enclosed in single quotes (‘).
15
Unordered List
If there’s and ordered or numbered type of list, there is also an unordered type of list. This
type of list that enumerates each item is not numbered but rather bulleted. The type attribute of
<ul> is deprecated in HTML 4.01. Instead, use the CSS syntax <ul style=”list-style-type: …”> </ul>.
Example:
<!DOCTYPE html>
<html>
<head>
<title>Unordered Lists</title>
</head>
<body>
<h3>Types of Colors</h3>
<ul style="list-style-type: square">
<li>Primary</li>
<li>Secondary</li>
<li>Tertiary</li>
</ul>
<h3>Classroom Officers part 1</h3>
<ul style="list-style-type:circle">
<li>President</li>
<li>Vice President</li>
<li>Treasurer</li>
</ul>
<h3>Classroom Officer part 2</h3>
<ul style="list-style-type:disc">
<li>Secretary</li>
<li>Auditor</li>
<li>PRO</li>
</ul>
</body>
</html>
Sample run:
16
The unordered list has different types of bullet to be used and can be specified by keying the
specified value for the type attribute:
type Indicates the type of bullet to be used in the disc, circle, square
list
Ex. <ul style=“list-style-type: square”>
Definition List
Another type of list is the glossary list or definition list. It is an effective tool for making your
own “definition of terms” list or glossary. The type of list uses the container tag <dl></dl>. Unlike
the previous lists, the definition list uses the empty tags <dt> for the item and <dd> for the definition
of the item.
Example:
<!DOCTYPE html>
<html>
<head>
<title>Definition List</title>
</head>
<body>
<h3>Books</h3>
<dl>
<dt>Office Productivity
<dd>Contains MS Word, MS Excel, MS Publishing, MS Outlook
<dt>Creative Design
<dd>Contains Adobe Photoshop, Adobe Illustrator, Adobe InDesign and Adobe Acrobat
<dt>Web Design
<dd>Contains HTML, XHTML, CSS, JavaScript and Dreamweaver
</dl>
</body>
</html>
Sample run:
Nesting Lists
Do you ever think of what could possibly happen if you put and ordered list within and
unordered list? Lists can actually be nested, meaning a list can be put inside another list. For
example, you can put an ordered list within an unordered list in order to create a multiple-level list.
17
Example:
<!DOCTYPE html>
<html>
<head>
<title>Nested Lists</title>
</head>
<body>
<h3>Colors</h3>
<ol>
<li>Primary</li>
<ul>
<li>Red</li>
<li>Yelloe</li>
<li>Blue</li>
</ul>
<li>Secondary</li>
<ul>
<li>Orange</li>
<li>Violet</li>
<li>Green</li>
</ul>
<li>Tertiary</li>
<ul>
<li>Red Orange</li>
<li>Red Violet</li>
<li>Blue green</li>
<li>Blue violet</li>
<li>Yellow orange</li>
<li>Yellow green</li>
</ul>
</ol>
</body>
</html>
Sample run:
18
Nesting Tags
You can also put a tag within a tag like this: <b><i>sample text</i></b>. This will display a
text in boldface and in italics. Just remember that when you nest tags, close them in the reverse
order that you opened them.
Example:
<!DOCTYPE html>
<html>
<head>
<title>Nesting Tags</title>
</head>
<body>
This text is in <b><i>boldface and italics</i></b>.
<br><br>
This text is <em><b>emphasized and boldface</b></em>.
<br><br>
This text is <b><i><u>boldface, italics and underlined</u></i></b>.
</body>
</html>
Sample run:
Adding Invisible Comments

Aside from white spaces, there are other things your Web browser ignores, these are
comments. Since comments are not displayed by a browser, you can use them to put statements or
remarks. The comment tag is a container tag that use <!- - as a starting tag and - -> as an end tag.
Example:
<!DOCTYPE html>
<html>
<head>
<title>INVISIBLE COMMENTS</title>
19
</head>
<body bgcolor="#000000" text="#ffffff">

This is the page with black background and text changed to white.
</body>
</html>
Sample run:
WHAT I HAVE LEARNED

Directions: Write the codes for the following output. Use appropriate tags for ordered lists.
Create an HTML document using Notepad. Submit your files to your teacher.
1.
2.
WHAT I CAN DO
HANDS-ON. Create a simple web page which makes us of aligning texts, placing page
breaks and horizontal rule. Use invisible comments also in your codes.
20
3 Background, Text, Video and Audio
WHAT I NEED TO KNOW

 Apply background and highlight
 Understand how to embed or link video and audio
 Use styles
 Learn special character entities
WHAT I KNOW
Directions: Match Column A with formatting tags in Column B. Write the letter of the
correct answer on your answer sheets.
A B
1. Adobe Photoshop A. Adobe <i>Photoshop</i>
2. Adobe Photoshop B. Adobe<sup>Photoshop</sup>
3. Adobe Photoshop C. Adobe <u>Photoshop</u>
4. AdobePhotoshop D. Adobe <b>Photoshop</b>
Photoshop
5. Adobe E. Adobe<sub>Photoshop</sub>
F. Adobe <t>Photoshop</t>
WHAT IS IT
Changing the Background Color of a Page

You can change the background color of the page by using the bgcolor attribute <body
bgcolor=”value”> </body>. You can assigned name of color or its hexadecimal value.
Example:
<!DOCTYPE html>
<html>
<head>
<title>Background Color</title>
</head>
<body bgcolor="#ff0000">
The bgcolor attribute will change the background color of the web page.
</body>
</html>
21
Sample run:
Color with its Hexadecimal value
Highlighting Text
You can highlight words, or important information that needs attention by using the
<mark></mark> tags.
Example:
<!DOCTYPE hmtl>
<html>
<head>
<title>Highlighting Text</title>
</head>
<body bgcolor="#ff0000">
The mark tag will highlight <mark>important information</mark>.
</body>
</html>
Sample run:
22
Adding Video
In order to embed a video or movie on a web page, you can use the <video> element. You
have to specify the width and height attributes so that the space required for the video is reserved
when the page is loaded.
Example:
<!DOCTYPE html>
<html>
<head>
<title>RESPONSE FOR PANDEMIC</title>
</head>
<body>
<video width="500" height="300" controls="controls" src="C:\Users\LENOVO\Pictures\TATAK
Video ONHS SANITATION & HANDWASHING FACILITY.mp4">Response</video>
</body>
</html>
Note: You have to insert text content between the <video></video> tags for browser that do not
support the video element.
Sample run:
Added video
HTML5 Video Tags

Tag Description
<video> Defines a video or movie
<source> Defines multiple media resources for media elements such as video and
audio
<track> Defines text tracks in media players
Embedding a Video File

You embed a Youtube video file by using the <embed> tag to your HTML document. An
embedded video will play directly on your page. You can control the width and the height of the
window in which the video file appears.
1. Go to Youtube and open the video you would like to add to your page.
2. At the bottom of the video, click the Share button and click the Embed link.
3. The HTML code used to embed the video will be displayed below.
4. Copy the code and paste it to your HTML document.
23
Example:
<!DOCTYPE html>
<html>
<head>
<title>VIRTUAL RECOGNITION RITES</title>
</head>
<body>
<h1>Oslob NHS Recognition Rites</h1>
<iframe width="560" height="315" src="https://www.youtube.com/embed/wvJBnHqLFLE"
Embed
video frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope;
code
picture-in-picture" allowfullscreen></iframe>
</body>
</html>
Sample run:
Embed video
24
Adding Audio
In order to embed an audio file on a web page, you can use the <audio> element. You should also
insert text content between the <audio></audio> tags for browsers that do not support the video element.
Example:
<!DOCTYPE html>
<html>
<head>
<title>ADDING AUDIO</title>
</head>
<body>
<p>Audio sample</p>
<audio controls="controls">
Audio <source src="C:\Users\LENOVO\Downloads\Royalty Free Happy Background Music for Vlogs No
code Copyright.mp3" type="audio/mpeg">
</audio>
</body>
</html>
Sample run:
Added
audio
HTML5 Audio Tags

Tag Description
<audio> Defines sound content
<source> Defines multiple media resources for media elements such as audio
Linking to Audio or Video Files

You can link Youtube video files to your web page so that when a visitor clicks a button, the
video will play.
Example:
<!DOCTYPE html>
<html>
<head>
<title>LINKING VIDEO OR AUDIO</title>
</head>
<body>
<h1>PFA Modules Ditribution</h1>
25
<br>
<a href="https://youtu.be/IlGbXu7ryfw">Modules</a> Video link
</body>
</html>
Sample run:
Link to Youtube
Font
The <font> tag was used to specify the font face, size and color in HTML4.
Attributes Example Function
Size <font size=“4”> </font> Defines the font size
Face <font face=“Times New Roman”> </font> Defines the font name
color <font color=“color”> </font> Defines the font color
Specifying Font Style

To specify the style of your font, you can add attributes such as follows: <b></b>, <i></i>,
<u></u>, <sup></sup>, <sub></sub>, <small></small>, <strong></strong>, <em></em>.
Example:
<!DOCTYPE html>
<html>
<head>
<title>FONT STYLE</title>
</head>
<body>
<font size="5" type="Corsiva">This is a sample of a <b>bold format</b></font>
<br>
<font size="5" type="Corsiva">This is a sample of a <i>italic format</i></font>
<br>
<font size="5" type="Corsiva">This is a sample of a <u>underlined format</u></font>
<br>
<font size="5" type="Corsiva">This is a sample of a <em>emphasized format</em></font>
<br>
<font size="5" type="Corsiva">This is a sample of a <sub>subscript format</sub></font>
<br>
<font size="5" type="Corsiva">This is a sample of a <small>superscript format</small></font>
<br>
<font size="5" type="Corsiva">This is a sample of a <big>big format</big></font>
<br>
<font size="5" type="Corsiva">This is a sample of a <small>small format</small></font>
<br>
26
<font size="5" type="Corsiva">This is a sample of a <strong>strong format</strong></font>
<br>
<font size="5" type="Corsiva">This is a sample of a <ins>insert format</ins></font>
<br>
<font size="5" type="Corsiva">This is a sample of a <del>delete format</del></font>
<br>
</body>
</html>
Sample run:
Tag Description Tag Description

<b> </b> Defines bold text in boldface <sub> </sub> Defines subscripted text
<big> </big> Defines big text <sup> </sup> Defines superscripted text
<em> </em> Defines emphasized text <ins> </ins> Defines inserted text
<i> </i> Defines italic text <del> </del> Defines deleted text
<small> <small> Defines small text <u> </u> Defines underline text
<strong> </strong> Defines strong text
Special Character Entities

We know that tags are composed of angle brackets. How do you then display angle brackets
without having the web browser interpreting them as part of a tag? In HTML, special character
entities provide a method of displaying special characters.
Special characters entities are written with an ampersand (&) followed by the entity name
and closed by a semi-colon (;). For example, which is used to add a non-breaking space. It
is a special character entry that displays a horizontal space (you could say, the counterpart of <br>).
Example:
<!DOCTYPE html>
<html>
<head>
<title>SPECIAL CHARACTER ENTITIES</title>
</head>
<body>
<h2>How to display special character entities</h2>
27
<b><p></p></b> is used for writing paragraphs
<br>
<b><br></b> is used for placing line breaks
<br>
<b><hr></b> is used for writing horizontal rules
<br>
<b><img></b> is used for placing images
<br>
<b>©</b> is used for copyright symbol
<br>
<b>®</b> is used for registered symbol
</body>
</html>
Sample run:
WHAT I HAVE LEARNED

Directions: Write the formatting tags for the following outputs. Write the opening
and closing tags.
1. Adobe Photoshop
2. InDesign
3. Illustrator
4. flash Drive
5. DreamweaverAdobe
WHAT I CAN DO
HANDS-ON
I. Create an HTML document, make your own contents by making a write up about
the place that you want to go to. Add a background. Insert videos using
appropriate tags.
II. Select a poem. Create an HTML document about the poem selected. Enhance by
applying font styles. You can also use special character entities.
28
4 Working with Images
WHAT I NEED TO KNOW

 Understand how to place images on your web page
 Identify the different attributes for images
 Apply a background image on a page
 Apply graphics as hyperlink
 Learn to create and place animated GIF files
WHAT I KNOW
Directions: Read each item carefully and choose the letter of the correct answer.
1. The JPEG file format stands for
A. Joint Photo Exempted Grade
B. Joint Photographic Experts Group
C. Junior Photographic Export Group
2. A picture element - a square representation of on screen computer data
A. Pixel B. Bit C. Byte
3. The amount of detail present in a bitmap image, as determined by the number of pixels
used. It is determined by multiplying the dots per inch by the overall dimensions, yielding a
width and height pixel value.
A. Resolution B. Color space C. Pixilation
4. GIF stands for
A. Graphics Interchange Format
B. Graphic Independent Files
C. Graphics Individual Format
5. A file format that is a commonly used standard method of lossy compression for
photographic images.
A. JPEG B. PNG C. PSD
6. This is equal to 1,048,576 bytes.
A. Megabyte B. Kilobyte C. Gigabyte
7. A bitmap image file format for pictures and animations that use 256 (or fewer) distinct
colors.
A. JPEG B. GIF C. BMP
8. A binary digit. The smallest amount of information that a computer can hold.
A. pixel B. bit C. byte
9. Which of the following is an image file format?
A. .ppt B. .mvi C. .gif
10. It indicates the image to be inserted.
A. <image> B. <img> C. <iframe>
29
WHAT IS IT
Preparing the Image or Graphics

You can add images to your Web page with the use of <img> tag. The <img> tag supports
several attributes, but the src = attribute is the one that specifies the name and location of the
image.
You can create an image from Adobe Photoshop, MS Paint or other image editing programs.
You should save you image in a JPEG and PNG format and compress the image so that loading time
will be fast. You can reduce image size by saving your file for the web. You can also use GIF for logos,
animated images and other images that include texts and graphics.
HTML supports various image formats or file types, namely:

1. Joint Photographic Experts Group or JPEG (or JPG) – Supports a million of colors and has a
file name extension of either jpeg or jpg. This file format is the most commonly used.
2. Graphics Interchange Format or GIF – Supports up to 256 colors and has the file name
extension of gif. This file format is commonly used and can be animated.
3. Portable Network Graphics or PNG – Supports a million of colors and has the file name
extension of png.
4. Bitmap or BMP – Supports a million of colors and has the file name extension of bmp. This
type of image is not compressed that’s why it provides the best quality for image at the cost
of file size.
Inserting Graphics into a Web Page

Another way of making your web page attractive is thru the use of images or pictures. You
can insert a picture in your Web page through the empty tag <img>. To display the image on the
page, you have to use the src and alt attributes.
Example: Insert image from MS paint
30
<!DOCTYPE html>
<html>
<head>
<title>Creative Design Book</title>
</head>
<body>
Insert <img src="TVL-ICT.png" alt="TVL-ICT" width="500" height="250">
image <br>
Senior High School
</body>
</html>
Sample run:
Image
inserted
The <vpace>, <hspace>, <border>, <align> tags are not supported in HTML5. You can use
CSS to set the vertical space, horizontal space, add image border and set the alignment of an image
which will be taken up in the CSS lessons.
Attributes for <img>
Attributes Description
src Indicates the image to be inserted. Present at all times

Ex. <img src=“rose.jpg”>
alt Indicates the alternate text for the image or the text that appears when
the mouse hovers over the image and/or when the image cannot be
displayed.
Ex. <img src=“rose.jpg” alt=“Cannot display Rose image”>
height Ex. <img src=“rose.jpg” height=“300”>
width Ex. <img src=“rose.jpg” width=“300”>
Specifying the Background Image of a Page

You can specify the background image of the page by using the background attribute inside
the body tag <body background=”value”>…</body>. The background image should not
31
overpower the web page; otherwise, your web page contents will be difficult to read. You can also
add background color that matches the color of the image.
A background image appears behind the text on a page. By default, the image is tiled to fill
the page and scrolls with the page. You should chose an image that will blend smoothly into the
next image. When the image’s edges blend well, it will look like a single, large image.
Example:
<!DOCTYPE html>
<html>
<head>
<title>BACKGROUND IMAGE OF A PAGE</title>
</head>
<body background='OnlineInstruction.gif'>
<p><font size="5" color="yellow">Online instruction is one mode of learning in the new normal
education.</font></p>
</body>
</html>
Sample run:
Using Graphics as a Hyperlink

Before you can use graphic as hyperlink, you have to create the image first in Photoshop,
MS Paint or other programs.
Graphics hyperlink is commonly used as follows:

1. Link to the website’s home page.
2. Link to the next page, previous page or top of the current page.
3. Link to large full-sized graphics.
4. Link to all pages in a website.
32
Example:
<!DOCTYPE html>
<html>
<head>
<title>GRAPHICS AS HYPERLINK</title>
</head>
<body>
<img src="Oslob NHS Signage.jpg">
<br>
<a href="Profile"><img src="SCHOOL PROFILE.png"></a>
<a href="Contact"><img src="CONTACT INFO.png"></a>
<a href="Inquirie"><img src="INQUIRY.png"></a>
</body>
</html>
Sample run:
Upon viewing your web page, if you hover your mouse to the link it will show a image.
33
WHAT I HAVE LEARNED
Directions: Answer the crossword puzzle.
WHAT I CAN DO
HANDS-ON
1. Create 4 image files in MS Paint and save.

2. Design a web page and create an HTML document for your design.
3. Use created image as a background image, and the rest as your hyperlinks.
34
Working with Tables
5
WHAT I NEED TO KNOW

• Understand what a table is and how to create and modify it
• Identify the different attributes of tables, rows and data
• Learn to merge cells and nest tables
• Know how to add images to a table
• Build a table with invisible border
WHAT I KNOW
Directions: Find the following words in the word search puzzle below. Cross each
word. Use the attached puzzle and paste on your answer sheet.
1. ALIGN 9. VLIGN 17. ROWSPAN

2. BACKGROUND 10. DATA 18. NOWRAP
3. BGCOLOR 11. TABLE 19. COLUMNS
4. BORDER 12. ROW 20. LOGO
5. BORDERCOLOR 13. MERGE
6. CELLPADDING 14. CELL
7. CELLSPACING 15. HEIGHT
8. WIDTH 16. COLSPAN
35
WHAT IS IT
What is a table?
A table is made up of rows and columns. You can place different elements in each cell like
text and image.
Tables allow you to organize and arrange data into columns and rows. Tables also allow you
to divide your page into section where you can place headers, footers and navigation links. Almost
all Web sites are laid out using tables.
Before starting to create any kind of table, whether to control the page layout or
presentation of data in tabular format, you should make a plan to help you build your table faster
and more accurately.
COLUMNS
ROWS
A table by default has no borders so notice that the example on the next page has a value
of 1 for the border attribute which gave the table a border.
Creating a Table
Tables arrange and organize content into columns and rows. Basically, they can be made via
the container tags <table></table>. Each row within the table is defined by the container tags
<tr></tr>. Moreover, each cell or data within a row is define by the container tags <td></td>.
Remember that the cells <td></td> are placed inside rows <tr></tr> and rows are place
inside the table <table></table>.
Example:
<html>
<head>
<title>Computer Books, SOftware, Hardware</title>
</head>
<body>
36
<h1 align="center"><marquee direction="right" bgcolor="yellow">IT Learning</marquee></h1>
<table align="center" border="3" bordercolor="#ff0000" cellspacing="10" cellpadding="5">
<tr>
<th align="center" width="200px">BOOKS</th>
<th align="center" width="200px">SOFTWARE</th>
<th align="center" width="200px">HARDWARE</th>
</tr>
<tr>
<td align="center">Creative Design</td>
<td align="center">Adobe</td>
<td align="center">Asus Notebook</td>
</tr>
<tr>
<td align="center">Office Productivity</td>
<td align="center">Microsoft</td>
<td align="center">InFocus Projector</td>
</tr>
</table>
</body>
</html>
Sample run:
For this example, there are 3 rows and 3 columns. Each row has 3 data. The
<marquee></marquee> element is a scrolling piece of text displayed either horizontally across or
vertically down your webpage depending on the settings
Modifying a Table
There are several ways to change the appearance of your table. You can change the thickness
and color of the border, set a certain distance between the content of the cells and the border
around it, set its background color or image, etc. These can all be done through the table’s
attributes.
Example:
<!DOCTYPE html>
<html>
<head>
<title>MODIFYING TABLE</title>
37
</head>
<body>
Caption <table align="center" border="3" bordercolor="blue" cellspacing="10" cellpadding="5"
Alignment
Border size width="600" >
Border color
Cell spacing <caption><h3>Directory</h3></caption>
Cell padding
<tr>
<td><b>Name</b></tb>
<td><b>Mobile Number</b></td>
<td><b>Landline</b></td>
</tr>
<tr>
<td>Michael Vincent</td>
<td>0917-1234-567</td>
<td>241-22-31</td>
</tr>
<tr>
<td>Matthew Francis</td>
<td>0918-890-1234</td>
<td>241-11-12</td>
</tr>
<tr>
<td>Agnes Marie</td>
<td>091-566-8901</td>
<td>211-12-18</td>
</tr>
</table>
</body>
</html>
Sample run:
Caption
aligned and
border
colored
38
Attributes Definition Values
align Indicates the horizontal alignment of the table left, right, center
Ex. <table align=“center”> </table>
background Indicates the background image of the table. Filename of the
Ex. <table background=“redflower.jpg”></table> image file
bgcolor Indicates the background color of the table Assigned name or
Ex. <table bgcolor=“red”></table> hexadecimal value of
the color
border Indicates the thickness of the border in pixels Number of pixels
Ex. <table border=“2”></table>
bordercolor Indicates the color of the border. Assigned name or
Ex. <table bordercolor=“red”></table> hexadecimal value of
a color
cellpadding Indicates the distance between the contents of the Number of pixels
cells and the border around it.
Ex. <table cellpadding=“2”> </table>
cellspacing Indicates the distance between the cells in pixels. Number of pixels
Ex. <table cellspacing=“2”> </table>
width Indicates the width of the table in pixels or percent of Number of pixels or
the width displayed by the Web browser number expressed in
Ex. <table width=“800”> </table> percent
Modifying Table Rows

Specifically, rows <tr></tr> appearance can be changed as well and can be done through
their attributes. By default, the contents of table rows are aligned vertically.
align Indicates the horizontal alignment of the contents left, right, center
of the row
Ex. <tr align=“center”></tr>
valign Indicates the vertical alignment of the contest of top, middle, bottom
the row
Ex. <tr valign=”bottom”></tri>
bgcolor Indicates the background color of the row Assigned name or
Ex. <tr bgcolor=“red”></tr> hexadecimal value of
color
height Indicates the height of the row in pixels Number of pixels
Ex. <tr height=“20”></tr>
39
Example:
<!DOCTYPE html>
<html>
<head>
<title>MODIFYING TABLE</title>
</head>
<body>
<table align="center" border="3" bordercolor="blue" cellspacing="10" cellpadding="5"
width="600" >
<caption><h3>Directory</h3></caption>
Modified row <tr height="35" bgcolor="yellow" align="center">
</tr>
<tr>
<td>Michael Vincent</td>
<td>0917-1234-567</td>
<td>241-22-31</td>
</tr>
<tr>
<td>Matthew Francis</td>
<td>0918-890-1234</td>
<td>241-11-12</td>
</tr>
<tr>
<td>Agnes Marie</td>
<td>091-566-8901</td>
<td>211-12-18</td>
</tr>
</table>
</body>
</html>
Sample run:
40
Modifying Table Data
The appearance of <td></td> data on each cell can changed through their attributes. The
nowrap attribute needs no value. It just needs to be present in the tag in order for it to provide its
effect. Bear in mind that the alignment set on a cell overrides the alignment set on the row.
Example:
<!DOCTYPE html>
<html>
<head>
<title>MODIFYING TABLE DATA</title>
</head>
<body>
<table align="center" border="3" bordercolor="blue" cellspacing="10" cellpadding="5"
width="600" >
<caption><h3>Directory</h3></caption>
<tr bgcolor="yellow">
</tr>
<tr>
<td align="center" bgcolor="pink">Michael Vincent</td>
<td>0917-1234-567</td>
<td>241-22-31</td>
</tr>
<tr>
<td align="center" bgcolor="pink">Matthew Francis</td>
<td>0918-890-1234</td>
<td>241-11-12</td>
</tr>
<tr>
<td align="center" bgcolor="pink">Agnes Marie</td>
<td>091-566-8901</td>
<td>211-12-18</td>
</tr>
</table>
</body>
</html>
Sample run:
41
Attribute Definition
align Indicates the horizontal alignment of the contents of the cell
Ex. <td align=“center”></td>
valign Indicates the vertical alignment of the contents of the cell.
Ex. <td valign=“bottom”></td>
background Indicates the background image of the cell
Ex. <td background=“redFlower.jpg”></td>
bgcolor Indicates the background color of the row
Ex. <td bgcolor=“red”></td>
height Indicates the height of cell of the table
Ex. <td height=”200”></td>
width Indicates the width of the table in pixels or percent of the width of the table.
Ex. <td width=“300”></td>
nowrap Inhibit word wrapping in the cell
Ex. <td nowrap></td>
colspan Merges multiple cells
Ex. <td colspan=“2”></td>
rowspan Merges multiple rows
Ex. <td rowspan=“2”></td>
Merging Cells Horizontally

Cells in the same row can be merged using the colspan attribute of <td></td> and
<th></th>.
Example:
<!DOCTYPE html>
<html>
<head>
<title>MERGING CELLS HORIZONTALLY</title>
</head>
<body>
<table align="center" border="3" bordercolor="yellow" width="200" >
<tr>
<td>Row 1 Cell 1</td>
<td colspan="2">Row 1 Cell 2</td> Merge cells
</tr>
<tr>
42
</tr>
</table>
</body>
</html>
Sample run:
Merged cells
Noticed how the second cell merged with the third cell on the first row.
Merging Cells Vertically

Cells in the adjacent row can also be merged using the rowspan attribute of <td></td>
and <th></th>.
Example:
<!DOCTYPE html>
<html>
<head>
<title>MERGING CELLS VERTICALLY</title>
</head>
<body>
<table align="center" border="3" bordercolor="yellow" width="700" >
<tr>
<td rowspan="2">Row 1 Cell 1</td>
<td colspan="2">Row 1 Cell 1</td>
</tr>
<tr>
</tr>
</table>
</body>
</html>
Sample run:
Merged cells
43
Adding an Image to a Table
You can add image to a cell by using the tag pair <td><img src=”….”>.
Example:
<!DOCTYPE html>
<html>
<head>
<title>ADDING AN IMAGE TO TABLE</title>
</head>
<body>
<caption>IT LEARNING</caption>
<table border="1" bordercolor="#ff0000" bgcolor="#ff0000">
<tr bgcolor="#ff0000">
<th></th>
</tr>
<tr>
<td align="center" width="200px">BOOKS</td>
<td align="center" width="200px">SOFTWARE</td>
<td align="center" width="200px">HARDWARE</td>
</tr>
<tr>
<td align="center">Creative Design</td>
<td align="center">Adobe</td>
<td align="center">Asus Notebook</td>
</tr>
<tr>
<td><img src="VG_InDesign.jpg" width="200" height="250"></td>
<td align="center">Microsoft</td>
<td align="center">InFocus Projector</td>
</tr>
</table>
</body>
</html>
Sample run:
44
WHAT I HAVE LEARNED
Directions: Write the function of the following tags and attributes.
1. <td></td> 6. Cellspacing
2. <table></table> 7. rowspan
3. <tr></tr> 8. colspan
4. alt 9. valign
5. cellpadding 10. nowrap
WHAT I CAN DO
HANDS-ON
Directions: Write an HTML document of the output below. Save and submit your
file. You can choose colors to enhanced your table.
45
6 Working with Hyperlinks
WHAT I NEED TO KNOW

 Understand what a hyperlink is and its types
 Build a link from one page to another and link to a page on a different web site
 Identify the attributes for anchor and target attributes
 Build an email link
 Use graphics as link
WHAT I KNOW
Directions: Name the parts of the web page. Use the words below to label each part.
1.
2.
3.
4.
5.
address bar header navigation bar scroll bar title bar
46
WHAT IS IT
What is a Hyperlink?
A Web site is usually made up of several web pages. Now, what we will do is create Web pages that
are connected to one another and effectively, create a Web site.
Hyperlink is a reference link that allows you to navigate to another page of the same document or
to another document. Hyperlink or link may be represented by a colored text with an underline or with an
image.
Types Uses
Absolute URL Links to a page on a different Web server
Relative URL Links to a page on the same Web server
Named Anchor Links to a different location on the same Web page
Header with
navigation links
links
Creating a Link from One Page to Another

In this part, your will learn how to create anchors (term used to define a hyperlink) that allow
viewers to go to another Web page or file. Anchors can also be made to make email hyperlinks.
Hyperlinks are clicked in order for the viewers to jump to a page specified in it. Anchors can be made
thru the container tag <a></a> and setting the value of the attribute href as the target destination
page.
Example:
<a href=”www.yahoo.com”>Yahoo!</a>
47
Attribute Definition
href Indicates the target of the anchor
Ex. <a href=“sample.html”> Click this to learn about paragraphs</a>
target Indicates the behavior the Web browser will carry out.
Ex. <a href=“sample.html” target=“blank”>Click this to learn about
paragraphs again!</a>
name Assigns a name to the anchor defining an internal bookmark of the page.
Ex. <a href=“sample.html” name=“paragraph”>Click this to learn about
paragraph again!</a>
Target Attribute
As seen on the table of attributes for <a></a>, there exists a target attribute. It indicates
what the Web browser will do when the hyperlink is clicked. The following describes what each
value does:
blank – the value of the href attribute or target URL will be opened in a new window
_self – the value of the href attribute or target URL will be opened within the same frame. Frames
will be discussed in the later chapters.
_parent - the value of the href attribute or target URL will be opened in the parent frameset.
_top - the value of the href attribute or target URL will be opened in the full body of the window.
Example: Sample run:
<!DOCTYPE html>
<html>
<head>
<title>Computer Books, Software, Hardware</title>
</head>
<body>
<h1><font color="red">IT Learning</font></h1>
<hr align="left" size="10" width="600">
<font size="6">
<p>The featured products for this month are:</p>
<ul>Books
<li><a href="creative_s.jpg">Creative Design</a></li>
<li><a href="VG_Cover_Animation.jpg">Animation</a></li>
<li><a href="VG_Spreadsheet_2009.jpg">Spreadsheet</a></li>
</ul>
</font>
</body>
</html>
Upon clicking the buttons, it will direct you to another web page as shown.
48
Creating an Email Link
Email links allow users to send email and communicate with you easily. An email hyperlink opens the
Create New Email Message of the MS Outlook Express and sets the message to be sent to the specified email
address. You can make your own email hyperlink by setting the value of the attribute href as mailto: followed
by the email address.
Example:
<!DOCTYPE html>
<html>
<head>
<title>IT Books</title>
</head>
<body>
<a href="www.google.com">Go to Google</a>
<br><br>
<a href="mailto: judilla_ebb@yahoo.com”>Email us now</a>
</body>
</html>
49
Sample run:
Once you click the link Email us now, this will appear in your screen.
Google link
Email link
Linking a Page on a Different Web Site

To link a page on a different web site, you have to find first the destination file path first and
then copy it to your code to create the link.
Example:
<!DOCTYPE html>
<html>
<head>
<title>Computer Books, Software, Hardware</title>
</head>
<body>
<h1><font color="red">IT Learning</font></h1>
<hr align="left" size="10" width="600">
<font size="6">
<p>The featured products for this month are:</p>
<ul>Books
<li><a href="creative_s.jpg">Creative Design</a></li>
<li><a href="VG_Cover_Animation.jpg">Animation</a></li>
<li><a href="VG_Spreadsheet_2009.jpg">Spreadsheet</a></li>
</ul>
</font>
<p>Other books from
<a href="http://www.cengage.com">Cengage Learning</a>
</body>
</html>
Sample run:
50
Linking to Another Part on the Same Page
You can link to another page of the document on the same page.
Example:
<!DOCTYPE html>
<html>
<body>
<p>
<a href="#CD">See also Creative Design</a>
</p>
<h2>Office Productivity</h2>
<p>This book contains..... </p>
<h2>Visual Basic and Access</h2>
<p>This book contains.... </p>
<h2>Creative Design</h2>
<p>THis book contains ....</p>
<h2><a id="CD">Creative Design</a></h2>
<p>This book contains ....</p>
<h2>Animation and Multimedia</h2>
<p>This book contains.....</p>
</body>
</html>
Sample run:
51
Using Graphics as Links
You can use graphics or images to take you to another page in your web site or to another
web site.
Example of codes that you can use to add graphics link:
<a href=http://address_of_page.com>
<img src=http://address_of_graphic.gif align=”left” border=”0”></a>
Example:
<!DOCTYPE html>
<html>
<head>
<title>USING GRAPHICS AS LINKS</title>
</hea>
<body>
<h1>IT Books</h1>
<p>Latest Titles</p>
<u>
<li><a href="creative_s.jpg" ><img src="creative_s.jpg" width="100"></a></li>
<li><a href="webdesign.png"><img src="webdesign.png" width="100"></a></li>
</ul>
</body>
</html>
Sample run:
When you click the link this will show.
52
WHAT I HAVE LEARNED
Directions: Answer the following questions.
1. It is the connection between your web page and the other resources in the
internet.
2. What is the tag to create a hyperlink?
3. This is the value of href attribute or target URL that will be opened in a new
window.
4. What will you add to href attribute if you want to add text link?
5. What will you add to href attribute if you want to link to another web site?
6. What will you add to href attribute if you want to add a graphic link?
7. What will you add to href attribute if you want to link to Youtube?
8. What will you add to href attribute if you want to link to an email?
9. What is the tag used to specify the color of the link?
10. What is the tag used to specify the color of the visited link?
WHAT I CAN DO
HANDS-ON: Design a web page showing your all hands-on activities. Use hyperlinks
to connect to other document or web pages. You can also use your
image files in MSPaint as image links. Prepare your codes for hands-on.
References:
Visual Guide HTML5 and CSS3, Jemma Development Group, pp. 32-101
53

Module 2 Core Competencies

Uploaded by

Document Information

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

Module 2 Core Competencies

Uploaded by

Copyright:

Available Formats

SENIOR HIGH SCHOOL

SENIOR HIGH SCHOOL

Department of Education  Republic of the Philippines

WHAT I NEED TO KNOW

At the end of this lesson, you will be able to:

Creating an HTML document

Viewing an HTML Page

Sample Run: HTML Code:

Main Content Related

Creating an Article <article>

Using a Generic Container

A. Directions: Write True is the statement is correct otherwise write False.

B. Directions: Write the functions of the following elements in HTML5.

WHAT I NEED TO KNOW

At the end of this lesson, you will be able to:

Creating a New Paragraph

Attributes for <p></p>

Adding Line Breaks

Adding Horizontal Rule

Attributes Definition Values

Modifying a Horizontal Rule

type Indicates the type of numbering to be 1, a, A, i, I

Adding Invisible Comments

WHAT I HAVE LEARNED

WHAT I NEED TO KNOW

At the end of this lesson, you will be able to:

Changing the Background Color of a Page

Color with its Hexadecimal value

HTML5 Video Tags

Embedding a Video File

HTML5 Audio Tags

Linking to Audio or Video Files

Specifying Font Style

Tag Description Tag Description

Special Character Entities

WHAT I HAVE LEARNED

WHAT I NEED TO KNOW

At the end of this lesson, you will be able to:

Preparing the Image or Graphics

HTML supports various image formats or file types, namely:

Inserting Graphics into a Web Page

Example: Insert image from MS paint

src Indicates the image to be inserted. Present at all times

width Ex. <img src=“rose.jpg” width=“300”>

Specifying the Background Image of a Page

Using Graphics as a Hyperlink

Graphics hyperlink is commonly used as follows:

1. Create 4 image files in MS Paint and save.

At the end of this lesson, you will be able to:

1. ALIGN 9. VLIGN 17. ROWSPAN

Modifying Table Rows

Merging Cells Horizontally

Merging Cells Vertically

WHAT I NEED TO KNOW

At the end of this lesson, you will be able to:

address bar header navigation bar scroll bar title bar

Absolute URL Links to a page on a different Web server

Relative URL Links to a page on the same Web server

Named Anchor Links to a different location on the same Web page

Creating a Link from One Page to Another

Example: Sample run:

Linking a Page on a Different Web Site

When you click the link this will show.

You might also like