TLE ICT 10 Handouts For STE

Region VI – Western Visayas
Schools Division of Iloilo

PAVIA NATIONAL HIGH SCHOOL
Pavia, Iloilo
Lesson 1: THE INTERNET AND THE WORLD WIDE WEB

BRIEF HISTORY OF INTERNET
1960s-ARPANet
 Adv anced Research Projects Agency Network
 An experimental netw ork of computers designed to w ithstand partial outages such as a
bomb attack
 J.C.R. Licklider headed the agency in 1962
1972 E-mail w as introduced by Ray Tomlinson

1980s Desktop computer w orkstations became increasingly popular, organizations w anted to
connect their local area netw orks (LANs) to ARPANet
January 1, 1983
 The official BI RTH DATE of the internet
 TCP/I P (Transmission Control Protocol/Internet Protocol) w as introduced
1986 NSFNet established fiv e supercomputing centers; it created the NSFNet backbone.
1989 World Wide Web w as started by English Physicist Sir Tim Berners-Lee
1991 This w as a big year for the I nternet: The National Research and Education Netw ork
(NREN) w as founded and the World Wide Web was released
1993 MOSAI C Web Browser was released
1994 Netscape Web Browser was released
BRIEF HISTORY OF WORLD WIDE WEB (WWW)

1980 Tim Berners-Lee, at CERN (European Organization for Nuclear Research) in
Sw itzerland, w rote a notebook program called ENQUIRE which linked computer
information points
1983 The Domain Name System (DNS) w as inv ented.
Generic top-level domain categories are .gov, .edu, .com, .mil,
1989 Tim Berners-Lee invented the World Wide Web, HTML, and a text brow ser
August 1991 The first w eb page w as info.cern.ch/hypertext/WWW/TheProject.html
1993 CERN donated the WWW technology to the w orld
March 29, 1994 I nternet first made its connection to the Philippines
March 22, 2002 Friendster w as introduced. This w as relaunched in July 2011
February 4, 2004 Facebook w as introduced
February 14, 2005 Birthdate of Youtube
March 21, 2006 Tw itter w as introduced
October 6, 2010 I nstagram w as introduced
THE INTERNET AND THE WORLD WIDE WEB

Internet WWW
Page 1
PREPARED BY: MR. CHENO S. POLLAN
Lesson 2: HTML (HYPERTEXT MARKUP LANGUAGE)
WHAT IS HTML?
 HyperText Markup Language
 A markup language used for creating Web pages
THE NOTEPAD WNDOW
WHAT IS A TAG?
Tags are the basic units or building blocks of an HTML file.
Web pages are designed and HTML codes are made up of
these tags – they control how the HTML does its structuring,
laying out and formatting. Tags are enclosed in angle
brackets. Example < html >.
STRUCTURE OF A TAG
Start Tag
Attribute
Content
End Tag
Name Description
Start Tag Usually tags are in pairs. Indicated in the start tag is the type of tag used.
Attributes They are used to provide additional information about the tag and go in name-value
pairs separated by an equal sign (=).
Content Everything between the start and end tag is the content. The content is the one
being formatted by the tags to appear on the web browser.
End Tag It is used to signify the end of the tag and ultimately, the range of the content of the
tag. End tags have a forward slash (/).
TYPES OF TAGS
CONTAINER TAGS EMPTY TAGS SPECIAL CHARACTERS
<h1> </h1> <br> - non-breaking space
<p> </p> <hr> © - for copyright symbol or ©
<font > </font > <li> ® - for registered symbol or ®
Page 2
Lesson 3: BODY TAGS with PARAGRAPHS and FONTS
Attributes for <body> </body>

Name Description
background Indicates the background image of the Web page.
Ex: <body background=“redFlower.jpg.” >
bgcolor Indicates the background color of the Web page.
Ex: <body bgcolor=“red”>
text Indicates the color of the text in the Web page.
Ex: <body text=“black”>
Attributes for <p> </p>

Name Description Value
align Indicates the horizontal alignment of the left, right, center, justify
paragraph
Ex: <p align=“right”>
Attributes for <font> </font>

face Changes the font Assigned name of a font face
Ex: <font face=“Century Gothic” >
color Changes the text color Assigned name of a color or
Ex: <font color=“red”> hexadecimal value of the color
size Changes the text size Assigned any number
Ex: <font face=“Century Gothic” color=“red”
size=“7” >
Lesson 4: LINE BREAKS and HORIZONTAL RULE

The <br> tag creates a line break or a new line. This means that the w eb browser treats the
w hite spaces on your HTML file. I t w ill also create a new line for the text that you w ant to appear
on the next line. While, horizontal rule allows you to create visible line. You can add a line by
using horizontal rule tag <hr>. The horizontal rule tag places a horizontal rule or line that extends
up to the w eb browser’s width.
Attributes for <hr>

align Indicates the horizontal alignment. left, right, center,
<hr align=“center”>
size Indicate the size of the <hr> by pixels. Number of pixels
<hr size=“20”>
width Indicates the width of the <hr> by pixels or percent Number of pixels or number
of the width of the browser. expressed as percent
<hr width=“500”>
color Indicates the color of the <hr> Assigned name of a color or
<hr color=“green”> hexadecimal value of the color
Lesson 5: IMAGES
HTML supports v arious image formats or file types, namely:
 Joint Photographic Experts Group or JPEG (or JPG) – has a file name extension of either
jpeg or jpg. This file format is the most commonly used.
 Compuserv e Graphic I nterchange Format or GIF – has a file name extension of gif. This
file format is commonly used and can be animated.
 Portable Netw ork Graphics or PNG – has a file name extension of png.
 Bitmap or BMP – has a filename extension of bmp. This type of image is not compressed
that’s w hy it prov ides the best quality for image.
ATTRIBUTES for <img>

Attribute Name Definition/Function
src Indicates the image to be inserted. This attribute must be present at all times.
Ex. <img src=“pavia ssc.jpg”>
alt Indicates the alternate text for an image or the text that appears when the mouse
hovers over the image or when the image cannot be displayed.
Page 3
Ex. <img src=“pavia ssc.jpg” alt=“pavia ssc”>
height Indicates the height of the image in pixels. If the actual height is not specified, the
image will be scaled to fit.
Ex. <img src=“pavia ssc.jpg” height=“300”>
weight Indicates the weight of the image in pixels. If the actual height is not specified, the
image will be scaled to fit.
Ex. <img src=“pavia ssc.jpg” weight=“300”>
Lesson 6: ORDERED LIST and UNORDERED LIST

You can present data in enumerated format or list. The first type of list is the ordered list or more
know n as the number list. This is the type of list w here each item is numbered usually starting at
1. The ordered list uses the container tag <ol></ol>. Each item in this list is specified by the empty
tag <li>.
Attributes for <ol> </ol>

type Indicates the type of numbering to be used in the 1, a, A, i, I
list
<ol type =“A”> </ol>
start Indicates the value or number of the first item in Any number
the list
<ol type =“1” start=”3”> </ol>
I f there’s an 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 and uses the container tag
<ul> </ul>. Like the ordered list, each item in this list is specified by the empty tag <li>.
Attributes for <ul> </ul>

type Indicates the type of bullet to be used in the list disc, circle, square
<ul type =“square”> </ul>
Lesson 7: HIGHLIGHTING TEXT

You can highlight w ords, or important information that needs attention by using <mark>
</mark> tags
Example:
Lesson 8: ADDING VIDEO and AUDIO

I n order to embed a v ideo or mov ie on a w eb page, you can use the <v ideo> element. You
hav e to specify the w idth and height attributes so that the space required for the v ideo is
reserved w hen the page is loaded.
Page 4
I n order to embed an audio file on a w eb page, you can use the <audio> element.
Lesson 9: TABLES
A table is made up of row s and columns. When these row s and columns intersect each other it
w ill form cells. You can place different elements in each cell like text or image. Table is made
v ia the container tags <table> </table>. Header cell in a table defines the container tag <th>
</th>. Each row w ithin the table is defined by a container tags <tr> </tr>. Moreover, each cell or
data w ithin a row is defined by the container tags <td> </td>.
Remember: The cells <td> </td> or <th> </th> are placed inside row s <tr> </tr> and row s are
placed inside the table <table> </table>.
ATTRIBUTES for <table> </table>

Attribute Name Definition/Function 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 (image file)
Ex. <table background=“pavia ssc.jpg”> </table>
bgcolor Indicates the background color of the table. assigned name or
Ex. <table bgcolor=“orange”> </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
the color
cellpadding Indicates the distance (in pixels) between the contents number of pixels
of the cells and the border around it.
Ex. <table cellpadding=“2”> </table>
Page 5
cellspacing Indicates the distance (in pixels) between the cells. 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

ATTRIBUTES for <tr> </tr>
align Indicates the horizontal alignment of the contents of left, right, center
the row .
Ex. <tr align=“center”> </tr>
valign Indicates the vertical alignment of the contents of the Top, middle, bottom
row.
Ex. <tr valign=“bottom”> </tr>
bgcolor Indicates the background color of the row. assigned name or
Ex. <tr bgcolor=“orange”> </tr> hexadecimal value of
the color
height Indicates the height of the row in pixels. number of pixels
Ex. <tr height=“200”> </tr>
MODIFYING TABLE DATA

ATTRIBUTES for <td> </td>
align Indicates the horizontal alignment of the contents of left, right, center
the cell.
Ex. <td align=“center”> </td>
valign Indicates the vertical alignment of the contents of the Top, middle, bottom
cell.
Ex. <td valign=“bottom”> </td>
background Indicates the image of the cell. filename (image file)
Ex. <td background=“pavia ssc.jpg”> </td>
bgcolor Indicates the background color of the cell. assigned name or
Ex. <td bgcolor=“orange”> </td> hexadecimal value of
the color
height Indicates the height of the cell in pixels. number of pixels
Ex. <td height=“200”> </td>
width Indicates the width of the cell in pixels or percent of the number of pixels or
width of the cell. number expressed in
Ex. <td width=“300”> </td> percent
colspan Merges multiple cells horizontally. number of cells
Ex. <td colspan =“3”> </td>
rowspan Merges multiple cells vertically. number of cells
Ex. <td rowspan =“3”> </td>
Lesson 10: HYPERLINKS

A Website is usually made up of sev eral web pages and to connect w eb pages from others, w e
use hyperlink. Hyperlink is a reference link that allow s you to nav igate to another page of the
same document or to another document. Hyperlink or link may be represented by a colored
text w ith an underline or w ith an image.
Three Types of Hyperlinks

Absolute URL - Links to a page on a different w eb server
Relativ e URL - Links to a page on the same w eb server
Named anchor - Links to a different location on the same w eb page
To link w eb page to another, w e use anchors which can be made thru the container tag
<a> </a>.
ATTRIBUTES for <a> </a>

Attribute Name Definition/Function
href Indicates the target of the anchor.
Ex.
To create e-mail link
Ex. <a href=“mailto:khinocute21@gmail.com ”>Email me now</a>
Page 6
To link a page on a different website
Ex. <a href=“http://www.cengage.com”>Cengage Learning</a>
To use graphics as links
Ex. <a href=“koala.jpg”><img src=”koala.jpg”> Koala </a>
Lesson 11: FORMS

Form allow s you to gather feedback from your readers or v isitors and w ork on the data to
prov ide better service. Forms present a v ariety of means for users to key in information such as
w ith the use of textboxes, passw ord boxes, radio buttons, checkboxes, dropdow n menus, text
area, submit buttons and reset or clear buttons.
Generally, a form defines as w ith a container tag <form> </form> w ith two attributes: action
and method.
ATTRIBUTES for <form> </form>

action Indicates where the information will be submitted. Filename (path could be
Ex. <form action=“process.html”> </form> included) URL
method - Indicates the method of submitting the post, get

information
Ex. <form action=“process.html” method=“post”>
</form>
Textbox
Radio
Button
Check
Boxes
Drop-
down Lists
Text area
Submit &
Clear
Buttons
The input element of form defined by the empty tag <input> is used for making textboxes,
passw ord boxes, check boxes, radio buttons, submit buttons and reset buttons depending on
the v alue of the type attribute w hich can be text, password, checkbox, radio, submit and reset
respectively.
ATTRIBUTES for <input>

name Assigns a name to the input field. The name can be Any text (without spaces)
used for various purposes and is required in most
circumstances.
Page 7
Ex. <input name=“textArea1”>
type Indicates the type of input field. Text, password,

Ex. <input name=“textArea1” type=“text”> checkbox, radio, submit,
reset
Continuation…..ATTRIBUTES for <input>

size Indicates the size of the input field. Any number
Ex. <input name=“textArea1” type=“text” size=“30”>
value Indicates the initial value of the input field. It also Any text
indicates the label for the submit and reset buttons.
Ex. <input name=“textArea1” type=“text” value=“Input
your text here">
ATTRIBUTES for <textarea> </textarea>

name Assigns a name to the input field. The name can be Any text (without spaces)
used for various purposes and is required in most
circumstances.
Ex. <textarea name=“textArea1”> This is the text area
</textarea>
rows Indicates the number of rows or the height of the text Any number
area..
Ex. <textarea name=“textArea1” rows=”10”> This is the
text area </textarea>
cols Indicates the number of columns or the width of the Any number
text area.
Ex. <textarea name=“textArea1” cols=”10”> This is the
wrap Indicates the type of word wrapping in the text area. Soft, hard, off
Ex. <textarea name=“textArea1” wrap=”off”> This is the
Drop-dow n menus are made v ia the container tag <select></select>.

ATTRIBUTES for <select> </select>
name Assigns a name to the dropdown menu. The name can Any text (without spaces)
be used for various purposes and is required in most
circumstances.
Ex. <select name=“dropdown1”> </select>
size Indicates the number of visible items (lines) Any number

Ex. <select name=“dropdown1” size=”4” </select>
Moreover, individual items in dropdow n menus are defined by the container tag <option>
<option>. The content of the tag w ill be the item in the menu.
ATTRIBUTES for <option> </option>
value Assigns a name to the dropdown menu. The name can Any text (without spaces)
be used for various purposes and is required in most
circumstances.
Ex. <option value=“qc”> Quezon City </select>
selected Indicates, if by default, the item is selected. None

Ex. <option value=“qc” selected> Quezon City
</select>
Creating an Email Feedback Form
Page 8
Elements of a Feedback Form
action=“mailto:emailaddress” Sends the form results to your email address
method=“get” Sends them as one requests to the mail
program
enctype=“text/plain” makes the results readable in your email box
References:
Brief History of Internet by Claudio Caldarescu

www.diffen.com
www.google.com
HTML & Web Design JEMMA Inc.
Page 9

TLE ICT 10 Handouts For STE

Uploaded by

Copyright:

Available Formats

You might also like

TLE ICT 10 Handouts For STE

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

TLE ICT 10 Handouts For STE

Uploaded by

Copyright:

Available Formats

Region VI – Western Visayas

Schools Division of Iloilo

Lesson 1: THE INTERNET AND THE WORLD WIDE WEB

1972 E-mail w as introduced by Ray Tomlinson

BRIEF HISTORY OF WORLD WIDE WEB (WWW)

THE INTERNET AND THE WORLD WIDE WEB

THE NOTEPAD WNDOW

Attributes for <body> </body>

Attributes for <p> </p>

Attributes for <font> </font>

Lesson 4: LINE BREAKS and HORIZONTAL RULE

Attributes for <hr>

ATTRIBUTES for <img>

Lesson 6: ORDERED LIST and UNORDERED LIST

Attributes for <ol> </ol>

Attributes for <ul> </ul>

Lesson 7: HIGHLIGHTING TEXT

Lesson 8: ADDING VIDEO and AUDIO

ATTRIBUTES for <table> </table>

MODIFYING TABLE ROWS

MODIFYING TABLE DATA

Lesson 10: HYPERLINKS

Three Types of Hyperlinks

ATTRIBUTES for <a> </a>

Lesson 11: FORMS

ATTRIBUTES for <form> </form>

method - Indicates the method of submitting the post, get

ATTRIBUTES for <input>

type Indicates the type of input field. Text, password,

Continuation…..ATTRIBUTES for <input>

ATTRIBUTES for <textarea> </textarea>

Drop-dow n menus are made v ia the container tag <select></select>.

size Indicates the number of visible items (lines) Any number

selected Indicates, if by default, the item is selected. None

Creating an Email Feedback Form

Brief History of Internet by Claudio Caldarescu

You might also like