HTML Module

8/3/2019 HTML Module

1/20

Name:

Section:

Prepared by: JCB

BusinessName

Module in Hypertext MarkupLanguage

HTML


2/20

HTML

Page 1

Module in Hypertext Mark up Language is a compilation

of all the lessons in basic HTML and exercises intended to helpstudents understand HTML and develop a good and informative

webpage.

Hope this module will help students discover HTML/

webpage designing easy and interesting.

The Author

PREFACE


3/20

HTML

Page 37

http://www.w3schools.com

HTML FOR THE WORLD WIDE WEB by ElizabethCastro

Web Application Programming Language By Mar-

melo V. Abante

References

HTML

Page 2

Basic HTML

Writing HTML

You can create an HTML document with any word pro-cessor or text editor, including the very basic TeachText or simple

Text on the Mac and Notepad or Wordpad for Windows, both of

which come free with the corresponding system softwarene.

HTML Tags

HTML tags are commands written between less than () signs, also known as angle brackets, that in-

dicate how the browser should display the text.

cherry tomato

Saving HTML Document

1. Open a word processor (notepad or wordpad)

2. Type your HTML Tags.

3. ASave As dialogue box will appear, In the file name field,

type the desired filename and add a suffix .html or .htm; and

Example : Index.html

4. In the Save as Type field, select All Files; then

5. ClickSave As button.

Opening HTML Document

1. Open a browser (ex. Internet Explorer)

2. ClickFile > Open File

3. Browse an html file, then

4. ClickOpen Button.


4/20

HTML

Page 3

HTML Basic Structure

HTML the first and last tags in a document should always

be the html tags. These are the tags that tell a web browserwhere the html in your document begins and ends. The abso-

lute most basic of all possible web documents is: . .

. .

HEAD the head tags contain all of the documents headerinformation. . . . .

TITLE this container is placed within the head structure,between the title tags you should have the title of your docu-

ment. This will appear at the top of the browsers title bar, and

also appears in the history list. . . . .

BODY the body comes after the head structure, between the body tags, you find all of the stuff that gets displayed in the

browser window. Al of the text, the graphics, and links, and so

on these thongs occur between the body tags. . . . .

Putting together:

Document Title

HTML

Page 36

HTML Frames

Try it Yourself!

Try it Yourself!


5/20

HTML

Page 35

HTML Frames

Your browser does not handle frames!

Try it Yourself!

Try it Yourself!

HTML

Page 4

Headings

Headings are defined with the to tags. defines the largest heading; defines the smallest heading.

HTML automatically adds an extra blank line before andafter heading.

Paragraphs

Paragraphs are defined with the

tag.

HTML automatically adds an extra blank line before andafter paragraph.

Line Breaks

The
tag is used when you want to end line, bt dontwant to start a new paragraph. The
tag forces a line breakwherever you place it.

It is an empty tag. It has no closing tag.

Comment Tags

If you want to leave yourself notes in an HTML document,but dont want those notes to show up in the browser window, youneed to use the comment tag.

Basic Tags


6/20

HTML

Page 5

Sample Code:

Sample Webpage

This is heading 1

This is heading 1

This is heading 1

This is heading 1

This is heading 1

This is heading 1

This is a paragraph

This
is a para
graph w/ line breaks

Try it Yourself!

HTML

Page 34

Note: The frameset column size can also be set in pixels(cols="200,500"), and one of the columns can be set to use theremaining space, with an asterisk (cols="25%,*").

Basic Notes - Useful Tips

Tip: If a frame has visible borders, the user canresize it by dragging the border. To prevent auser from doing this, you can addnoresize="noresize" to the tag.

Note: Add the tag for browsers thatdo not support frames.

Important: You cannot use the tags together with the tags! However, if you add a tagcontaining some text for browsers that do notsupport frames, you will have to enclose the textin tags!

HTML Frame Tags

HTML Frames

Tag Description

Defines a set of frames

Defines a sub window (a frame)

Defines a noframe section for browsers
http://w3schools.com/tags/tag_frameset.asphttp://w3schools.com/tags/tag_frame.asphttp://w3schools.com/tags/tag_noframes.asphttp://w3schools.com/tags/tag_noframes.asphttp://w3schools.com/tags/tag_frame.asphttp://w3schools.com/tags/tag_frameset.asp


7/20

HTML

Page 33

HTML Frames

With frames, you can display more than one HTML docu-ment in the same browser window. Each HTML document is

called a frame, and each frame is independent of the others.

The disadvantages of using frames are:

The web developer must keep track of more HTML

documents

It is difficult to print the entire page

The HTML frameset Element

The frameset element holds one or more frame elements.

Each frame element can hold a separate document.

The frameset element states HOW MANY columns or rows

there will be in the frameset, and HOW MUCH percentage/pixels

of space will occupy each of them.

The HTML frame Element

The tag defines one particular window (frame)

within a frameset.

In the example below we have a frameset with two col-

umns.

The first column is set to 25% of the width of the browser

window. The second column is set to 75% of the width of the

browser window. The document "frame_a.htm" is put into the first

column, and the document "frame_b.htm" is put into the second

column:

HTML Frames

HTML

Page 6

Text Formatting Tags

Tag Description

Denes bold text

Denes big text

Denes emphasized text

Denes italic text

Denes small text

Denes strong text

Denes subscripted text

Denes superscripted text

Striking out text

Denes underlined text

Denes computer code text (Monospaced

font)

Denes keyboard input text (Monospaced

font)

Denes typewriter text (Monospaced font)

Denes sample text (Monospaced font)

Use to set o a secon of your text like

a quotaon by a famous author from the

surrounding text.

Making text blink

To use preformaed text


8/20

HTML

Page 7

Sample Code:

True or False

1.) HTML stands for Hypertext mark up

language .

2.) 5 2 is equals to 25 .

3.) FTP stands for File Transmit

Protocol .

Good Luck!

Try it Yourself!

HTML

Page 32

Create an HTML Code displaying the following:

1.

2.

3.

HTML Table Exercises

Apples 44%

Bananas 23%

Oranges 13%

Other 10%

Fresh FruitsIt has long been known that a diet

that includes at least a few serv-

ings of fresh fruit every day will

help keep you healthy, t and trim.

My tech stock picksNAME SYMBOL CUR-

RENT 52WK HI 52WK LO P/E RA-TIOMicroso MSFT 86-3/8

119-

15/1675-1/2 56.09

Cisco Sys-

temsCSCO 72-1/8 82 24-13/16 400.69

America

OnlineAOL 63 95-13/16 38-15/32 350.00

Qwest

Communi-

caons

Q 44-7/16 66 25-3/4 74.06


9/20

HTML

Page 31

Cell Padding and Spacing

With the cellpadding and cellspacing attributes you will beable to adjust the white space on your tables. Spacing defines the

width of the border, while padding represents the distance be-

tween cell borders and the content within. Color has been added to

the table to emphasize these attributes.

Sample Code:

HTML Tables

Column 1

Column 2

Row 1 Cell 1 Row 1 Cell 2

Row 2 Cell 1 Row 2 Cell 2

Try it Yourself!

HTML

Page 8

Print paragraph that is a description of a book, include the

title of the book as well as its author. Names and titles shouldbe underlined, adjectives should be italicized and bolded.

Print your name to the screen with every letter being adifferent heading size.

Print the squares of the numbers 120. Each number shouldbe on a separate line, next to it the number 2 superscripted, anequal sign and the result. (Example: 102 = 100)

Prints 10 names with a line break between each name, The list

should be alphabetized, and to do this place a subscriptednumber next to each name based on where it will go in the

alphabetized list. (Example: Alan1). Print first, theunalphabetized list with a subscript number next to eachname, then the alphabetized list. Both lists should have an level heading.

Print a long quote. Cite the author of each quote.

Print some code in java. (hint: use the tag)

NOTE: Include comments in every HTML basics exercise

Text Formatting Exercises


10/20

HTML

Page 9

Some characters like the < character, have a special mean-

ing in HTML, and therefore cannot be used in the text. To display

a less than sign (


11/20

HTML

Page 29

Headings In a Table

Headings in a table are defined with the tag.

Empty Cells in a Table

Table cells with no content are not displayed very well in

most browsers.

HTML Tables

Header 1

Header 2

row 1, cell 1

row 1, cell 2

row 2, cell 1

row 2, cell 2

Here it looks in a browser:

Header 1 Header 2

row 1, cell 1 row 1, cell 2


row 1, cell 1

row 1, cell 2

row 2, cell 1

How it looks in a browser:


row 2, cell 1

HTML

Page 10

Some Other Commonly Used Character Entities

HTML Character Entities

Result Descrip-

tion

Entity

Name

Entity

Number

Cent

Pound

Yen Section

Copyright

Registered

trademark

x Multiplication

Division


12/20

HTML

Page 11

Sample Text

Font Attributes

The HTML Tag

Attribute Example Purpose

Size=number Size=2 Defines the font

size.

Size=+number Size=+1 Increases the font

size.

size=-number size=-1 Decreases the fontsize.

face=face-name Face=Times Defines the font

name.

color=color-

value

color=#eeff00 Defines the font

color.

color=color-

name

color=red Defines the font

color.

HTML

Page 28

Tables

Tables are defined with the tag. A table isdivided into rows (with the tag), and each row is divided intodata cells (with the tag). The letters td stands for table data,

which is the content of a data cell. A data cell an contain text,images, lists, paragraphs, forms, horizontal rules, tables, etc.

Tables and the Border Attribute

If you do not specify a border attribute the table willbe displayed without any borders.

HTML Tables

row 1, cell 1

row 1, cell 2

row 2, cell 1

row 2, cell 2

How it looks in a browser:



row 1, cell 1

row 1, cell 2


13/20

HTML

Page 27

1. Print two lists with any information you want. One list should

be an ordered list, the other list should be an unordered list.

2. Print a definition list with 5 items .

3. Print ten acronyms and abbreviations of your choosing, each

separated by two lines. Specify the data that the abbreviations

and acronyms represent.

HTML Lists Exercises

HTML

Page 12

1. Print your name in green.

2. Print the numbers 1 - 10, each number being a different color.

3. Prints your name in a Tahoma font.

4. Print a paragraph with 4 - 5 sentences. Each sentence shouldbe a different font.

5. Print two paragraphs that are both indented using the command.

HTML Text Exercises


14/20

HTML

Page 13

Image Formats

The Web is accessed every day by millions of Macs, Win-dows-based PCs, Unix machines and other kinds of computers.

The graphics you use in your Web page must be in a format that

each of these operating systems can recognize. Presently, the two

most widely used formats on the Web are GIF and JPEG.

GIF Formats

GIF, or Graphics Interchange Format., was devel-

oped by CompuServe for platform independent images on

its online service.

JPEG/JFIF Format

The JPEG (Joint Photographic Experts Group)

compression scheme (Saved in JFIF format files) is ideal

for photographs and other natural color images. JPEG

compressed images may have millions of colors, and their

file size is determined primarily by their image size, not

their number of colors.

PNG Format

In late 1996, the World Wide Web Consortium

endorsed the PNG (Portable Network Graphics) format,

which it hopes will allow for faster-loading graphics of var-

ying quality across platforms.

Using Images

HTML

Page 26

List tags

Abbreviation and Acronym in HTML

Ex.

IP

Lists in HTML

Coffee Black hot drink

Milk

White cold drink

Here is how it looks in abrowser:

Coffee

Black hot drink

Milk

White cold drink

Tag Description

Defines an ordered list.

Defines an unordered list.

Defines a list item.

Defines a definition list.

Defines a definition term.

Defines a definition description.


15/20

HTML

Page 25

Afor capital letters.

afor small letters.

Ifor capital roman numerals.

ifor small roman numerals.

1 for numbers.

Inside a list item you can put paragraphs, line breaks, im-

ages, links and other lists, etc.

Definition Lists

A definition list is not a list of items. This is a list of terms

and explanation of the terms. A definition list starts with the

tag. Each definition-list term starts with the tag. Each defini-

tion-list definition starts with the tag.

Lists in HTML

Attribute Example Description

Type=symbol or

You may choose

any symbol for

your ordered list.

HTML

Page 14

The Image Tag and the Src Attribute

In HTML, images are defined with the tag.

The tag is empty., which means that it contains

attributes only and it has no closing tag.

To display an image on a page, you need to use the srcattributes. Src stands for source. The value of thesrc attribute is the URL of the image you want todisplay on your page.

The Alt Attribute

The alt attribute is used to define an alternate text

for an image.

The alt attribute tells the reader what he or she is

missing on a page if the browser cant load images.

Tip

You may use some programs like Adobe Photoshop orPhotoScape to improve your images (size, resolution, etc.)

Using Images


16/20

HTML

Page 15

Other Image Attributes

Line Break Attributes

Using Images


Width=number Width=300 Specifying the

width of an image.

Height=number Height=250 Specifying the

height of an image.

Align=direction Align=left/right Wrapping text

around images.

Hspace=number Hspace=15 Adding space

around an image

horizontally.

Vspace=number Vspace=10 Adding space

around an image

vertically.


Stopping text wrap.

HTML

Page 24

Unordered Lists

An unordered list is a list of items. The list items aremarked with bullets (typically small black circles). An unorderedlist starts the tag. Each list item starts with the tag.

Ordered Lists

An ordered list is also a list of items. The list itemsare marked with numbers. An ordered list starts with the tag.Each item starts with the tag.

Lists in HTML

Coffee

Milk


Coffee

Milk


Type=bullet type or

You may choose

any bullet type you

want

Coffee

Milk


1. Coffee

2. Milk


17/20

HTML

Page 23

1. Display five different images. Skip two lines between each im-

age. Each image should have a title.

2. Display an image that has a width of 200 and a height of 200.

3. Display an image that when clicked will link to a search engine

of your choice (should be opened in a new window)

4. Display an image that when clicked will link to itself and will

display the image in the browser by itself.

5. Create some links to various search engines (google, yahoo )

6. Create links to five different pages on five different websites

that should all open in a new window.

7. Create a page with a link at the top of it that when clicked will

jump all the way to the bottom of the page.

8. Create a page with a link at the bottom of it that when clicked

will jump all the way to the top of the page.

9. Create a page with a link at the top of it that when clicked will

jump all the way to the bottom of the page. At the bottom of

the page there should be a link to jump back to the top of the

page

NOTE: Include the alt attribute in every tag in the HTML

image exercises.

HTML Image and Links Exercises

HTML

Page 16

Horizontal Rule Attributes

Adding Horizontal Rules


Size=number Size=10 Specifying the

rules height in pix-

el

Width=number Width=80% Specifying the

width of the rule in

pixels, or as per-

centage of the doc-

uments width

Align=direction Align=left/right /

center

It refers to the way

a rule should be

aligned on the

page.

Noshade Used to create a

solid bar, with no

Color=color Color =blue Used to change the

color of the hori-


18/20

HTML

Page 17

The tag has two attributes where you can specifybackgrounds. The background can be a color or an image.

Bgcolor

The bgcolor attribute specifies a background-color for anHTML page. The value of this attribute can be a hexadecimal num-

ber, an RGB value, or a color name.

BackgroundThe background attribute specifies a background-image

for an HTML page. The value of this attribute is the URL of theimage you want to use.

If you want to use a background image, youshould keep in mind the ff:

Will the background image increasethe loading time too much?

Will the background image lookgood with other images on the page?

Will the background image look goodwith the text colors on page?

Will the background image look goodwhen it is repeated on page?

Will the background image takeaway the focus from the text?

Backgrounds

HTML

Page 22

Sample Code:

Links and Anchors

Table of Contents

Parts of the body:

legs

shoulder

feet

legs

Leg a human limb; commonly used to refer to a limbbut technically only the part of the limb between the knee and

ankle.

shoulder

Shoulder-the part of the body between the neck and the

upper arm.

feet

Foot the part of the leg of a human being below the

ankle joint.

Try it Yourself!


19/20

HTML

Page 21

The name attribute is used to create a named anchor.The name of the anchor can be any text you care to

use. The line below defines a named anchor:

< a name=tips> Useful Tips Section

Linking to a specific anchor

Once you have created an anchor you candefine a link so that a users click will bring herdirectly to the section of the document that con-tains the anchor, not just top of that document.

< a href=#tips> Useful Tips

Links and Anchors

HTML

Page 18

Specifying Margins

Note: Internet Explorer Only

Creating Indents

Note: Netscape Only

Specifying the space between paragraphs

Note: Netscape Only

Creating blocks of space

Note: Netscape Only

Page Layout


Leftmargin=number Leftmargin=2 Speify the width in

pixels of the space

between the left

border of the win-

dow and the con-

tents of the page.

Topmargin=number Topmargin=3 Specify the height in

pixels of the space

between the top

border of the win-

dow and the content


20/20

HTML

Page 19

Creating Columns

. . . .

Note: Netscape only

Centering elements on a page

. . . . .

Controlling Line Breaks

You may have certain phrases in your document that youdont want separated.

. . . . .

Page Layout


Cols=number Cols=3 It is the number of

columns desired.

Gutter=number Gutter=24 It is the width of

the space between

the columns, inpixels or as a per-

centage.

Width=number Width=75% It is the width of

the entire column

set, including the

gutter, in pixels or

as percentage of

window size.

HTML

Page 20

The Anchor Tag and the Href Attribute

HTML uses the (anchor) tag to create a link toanother document. An anchor can point to anyresource on the Web: an HTML page, an image, asound file, a movie, etc.

The tag is used to create an anchor to link from,the href attribute is used to address the document tolink to, and the words between the open and close ofthe anchor tag will be displayed as a hyperlink.

Text to be displayed

The Target Attribute

With the target attribute, you can definewhere where the linked document will beopened.

The line below will open the document in anew browser window.

< a href=http://www.w3schools.com/target=_blank> Visit W3Schools!

The Anchor Tag and The Name Attribute

The name attribute is used to create a namedanchor. When using named anchors we cancreate links that can jump directly into aspecific section on a page, instead of lettingthe user scroll around to find what he/she islooking for.

< a name=label> text to be displayed

Links and Anchors

HTML Module

Documents

Transcript of HTML Module