Act.6 Orderlist Unorder List

METRO BUSINESS COLLEGE
200 Dolores St. Arnaiz Ave. Pasay City
-
HTML & XHTML
HyperText Markup Language – is a popular computer language that is

used to create web pages. HTML consists of a markup that conveys
information about the structure and presentation of a document.
HTML markup is composed of several components such as elements,
character-based data types, character references, document type
declaration and entity references.
Extendible HyperText Markup Language (XHTML) is a markup language

that is a successor and reformation HTML using extensible Markup
Language (XML). XML is a powerful language that provides web authors
to create customized tags.
HTML & XHTML has its own rules for web authors or web developers to
follow and is referred to web standards.
URL
Uniform Resources Locator (URL) is a unique address for a file that
resides on the Internet. URL is commonly known when a user enters
the URL of a home page in the web browsers address line. A URL can
be any file, such as an image file, a program, a javascript document or
style sheet document.
URL is composed of two forms absolute URL and relative URL. The
absolute URL is one that contains the name of the protocol and the
hostname. It is the one that points to a resource outside of your own
sites domain. The relative URL is one that contains only the name of
the path of a file. It is the one that points to a resources within the
same site.
Here’s an example of an absolute URL:
http://www.mypage.com/index.html
here’s an example of a relative URL:
index.html
../global.css
Components of an HTML ELEMENT
HTML elements are the structure of an HTML document. HTML

element are constructed with an opening the beginning of an element,
one or more attributes paired their values, the content and a closing
tag. If an HTML element is an empty element, it doesn’t requires to
have a closing tag.
OPENING TAG
ATTIBUTE
CLOSING TAG
NAME VALUE CONTENTS
<p class = ”text”> Great! </p>
HTML elements are composed of block level elements and inline

elements. A block level element is one that is displayed as independent
blocks, such as headings, paragraph, lists and tables. An inline element
is one that contains only text or other inline elements, such as

quotations, hyperlinks and citations.
What is a Tag?
Tags are the basic units or building blocks of an HTML file (or code as
you may call it now since writing it may be referred to as coding, too).
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.
There are so many tags and each has its own use. Some are used to
make your text appear in boldface, Italicized, underlined. Some are
used to make your text bigger, and some are on the contrary, to make
your text smaller. Some can put your text on the center or even on the
far right of the screen. Some can put images and videos to even spice
up your Web page. There are yet so many tags to be discussed so as for
now. let us start discussing on how tags are used.
Structure of a Tag
Tags are enclosed in angle brackets ( ‘<’ & ‘>’) and an example of
its is <!DOCTYPE html>.
Example of how a tag is used and its parts:
Start tag <html>

<head>
Attributes <title> Jemma Inc</title>
</head>
Content <body bgcolor=”#0000FF” text=”#FFFFFF”>
Welcome to Jemma Inc.
</body>
</html>
Container and Empty Tags

There are two types of tags namely container and empty.
Container tags have the start and end tags together with the content
empty tags stand alone and do not require end tags.
Example of container tags:
 <p>This is a paragraph.</p>
 <i>This is used to display italics</i>
 <u>This is used to display underlined text</u>
 <font> face=”Times New Roman” color=”red”>Red-colored
text written in Times New Roman.</font>
Example of empty tags:
 <br>
 <hr>
 <img src=”samplePic.gif”>
now that you know what tags are, you should know that the whole
HTML file is enclosed in <html></html>.
Here is an example of an HTML file, notice how the start and end of the
file has the appropriate HTML start and end tags.
<html>
<head>
<title>Jemma Inc</title>
<head>
<body>
This text is in <b>boldface</b>.
<br><br>
This text is <i>italicized</i>.
<br><br>
This text is <u>undelined</u>
</body>
</html>
Note: It is recommended that when coding your HTML file, you

organize tags with the use of indention. Use tabs (or r spaces) when
indenting the tags that have lower hierarchies.
HTML COMMENTS
Comments are statements that provides explanation or instruction.

Comments can only be seen on your document and won’t be displayed
in a web authors will understand the way you structured a document.
Comments is an HTML/XHTML document is use just like this:
<!—HTML Comments -->
The document TYPE

The <!DOCTYPE> element specifies the type of document. <!

DOCTYPE> indicates the type and version of HTML & EHTML that is
coded on your document and Document Type Definition validates the
document. Importantly, all HTML & XHTML document should be
validated. This ensures that the code written on your document have
no coding errors.
<!DOCTYPE> tag must always be placed at the beginning of an HTML

document. But when an XML declaration, such as <?xml
version=”1.0”>, is present, <!DOCTYPE> tag must be placed after the
XML declaration.
The document ROOT
The <html> element is the root element in an HTML OR XHTML

document. It directly contains all the other elements, such as <head>
tag and <body> tag (or<frameset>tag).
The document HEADER
The <head> element describes the content of the document.

Significantly, some information contained inside the <head> element
are used by search engines to index web pages. This information is
referred to as metadata. There are numerous elements that you can
include within the <head> element. The most common elements used
are <meta>, <title>, <link>, <script> and <styles> and their usage will
also be discussed later on.
(<head>)
<body>
<h1>
Document Header Example

</h1>
</body>
</html>
The document TITLE

The <title> element provides a title of a document in which
appears at the top of the web browser. The <title> element is an
important element within the document header in which it should
always be present. This is also a place for each user to check and know
what document they’re viewing.
<head>
<body>
<h1>
Document Title Example
</head>
</body>
</html>
The document BODY

The <body> element contains all the content to your document.

The <body> element comes after the document header and must be
closed before closing the document root, </html>.
The Headings Elements

The <h1>, <h2>, <h3>, <h4>, <h5> and <h6> elements introduce
new section of content as a title or a header. Each heading element are
relative to the importance of a heading. From the most important, the
<h1> elements, down to the least important, the <h6> element.
More about Body Tags and Headings
Body Tags
Can you recall that attributes are? Where are they placed?
Attributes provide additional information about the tag and is placed
on the start tag. Since container tags have start tags and the
<body></body> tag is a container tag, it contains attributes. These are
its attributes.
 Example Explained
o The <!DOCTYPE html> declaration defines this document to

be HTML5
o The <html> element is the root element of an HTML page
o The <head> element contains meta information about the
document
o The <title> element specifies a title for the document
o The <body> element contains the visible page content
o The <h1> element defines a large heading
o The <p> element defines a paragraph
Attributes Table for <body></body>
Attribute
Name definition Values
background Indicates the background image filename (could

of the Web page. be included) of
Ex. <body> image file
Background=”redFlower.jpg”>
bgcolor Indicates the background color assigned name

of the Web page. or hexadecimal
Ex. <body bgcolor=”red”> value of the
color
text Indicates the color of the text assigned of
in the Web page. hexadecimal
ex. <body text=”black”> value of the

color
link Indicates the color of hyperlinks assigned of

in the Web page. hexadecimal
ex. <body link=”blue”> value of the
color
vlink Indicates the color of the visited

hyperlinks in the Web page.
ex. <body vlink=”#FF0000”>
alink Indicates the color of the visited

hyperlinks (when clicked) in the
Web page.
Ex. <body alink=”#000000”>
PARAGRAPHS
Creating a New Paragraph

Now that you can write your own Web page, give it a little and put
headings on it, it’s 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>.
 The HTML <p> element defines a paragraph:
Aligning a Paragraph
You can align a paragraph by using the Paragraph Tag Pair <p
align=left>, <p align=right>, <p align=center>.
<html>
<head>
<title>Latest IT Books</title>
<html>
<head>
<title> Latest IT Books</title>
</head>
<body>
<font size="5" face="arial">
<p align=left>
This paragraph contains a lot of lines in the source
code, but the browser ignores it.
</p>
<p align=center>
This paragraph contains a lot of space in the source
code but the browser ignores it.
</p>
<p align=right>
This paragraph contains a lot of spaces in the browser
ignores it.
</p>
</font>
<body>
</html>
Line Breaks and Horizontal Rules
Line Breaks
Have you noticed how your Web browser treats the white spaces
on you HTML file? Your Web browser ignores white spaces and pressing
Enter or the Return key does not actually create a new line on the
chunk of text on your 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 new file.
<html>
<head>
</head>
<body>
<font size=”6” face=”arial”>
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 beak 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>
Quoting Passages
You can place quotes in indented form and shrink it to be set
apart from the main paragraph by using the tag pair <blockquote>
</blockquote>.
<html>
<head>
<title>Poem</title>
</head>
<body>
<font size=”5”>
<p>This is an except 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
</blockquote>
</font>
</body>
</html>
The CENTER Element

The <center> elements sets its content centered horizontally
inside the web browser. It can be may content, including text, images,
tables and so on.
<!DOCTYPE html>
<head>
<title> the CENTER element</title>
</head>
<body>
<h1>
The CENTER element
</h1>
<center>
<p> Standards-Based Approach for Offering a Managed
Security Services in a Multivendor Network Environment.
<br />
By Kunjal Trivedi, Cisco System and Damien Holloway.
Juniper Networks
</p>
<p>
A standard-based approach helps service providers take
best advantage of the managed security service opportunity because it
increases the potential breadth and depth of the service offering.
Multivendor solutions are becoming the norm when deploying services
on an integrated backbone. Therefore, standards simplify deployment
and management, helping control operational costs and accelerating
time to market.
</p>
</center>
</body>
</html>
The ADDRESS element

The <address> element is used to supply contact information
about a person, company or organization responsible of creating the
document the user is viewing. By default, the text is displayed in
italicized font style. The address element can only contain text or inline
elements
<!DOCTYPE html>
<head>
<title>the ADDRESS element</title>
</head>
<body>
<h1>
the ADDRESS element
</h1>
<address>
Gino Franco Velasco<br />
Web Developer<br />
Philippines
</address>
</body>
</html>
The DIVISION element

The <div> element is used to organize the content in your

document. It gives a logical division or sections that group and separate
related content.
<!DOCTYPE html>
<head>
<title> the DIVISION element</title>
</head>
<body>
<h1> the DIVISION element
</h1>
<div align=”left”>
<p>
The content using the LEFT ALIGNMENT attribute of the
division element.
</p>
</div>
<div align=”center”>
<p>
The content using the CENTER ALIGNMENT attribute of the
division element.
</p>
</div>
<div align=”right”>
<p>
The content using the RIGHT ALIGNMENT attribute of the
division element.
</p>
</div>
</body>
</html>
The PREFORFMATTED element

The <pre> elements defines a block of preformatted text.
Multiple spaces, carriage returns and tabs are all preserved exactly as
they appear in your document.
<!DOCTYPE html>
<head>
<title> the PREFORMATTED element</title>
</head>
<body>
<h1>
The PREFORMATTED element
</h1>
<pre>
GOD’S BOUQUET
by Jerry Johnson
With love and grace. God filled a vase

With flowers of every hue.
Around it. He set
Some baby’s breath.
Cut from. His garden too.
Once content, to earth. He sent

His bouquet for all to view.
So that we might recall.
The beauty of it all.
He named it after you
</pre>
</body>
</html>
The CITATION element

The <cite> element is used to provide a bibliographic citation or
reference, such as a person, the title of a book, poem, song or movie. It
may also be the name of a magazine, newspaper or website.
<html>
<head>
<title> the CITATION element<title>
</head>
<body>
<h1>
The CITATION element
</h1>
An article from the Wall Street says:
<p>
The Gates Foundation said it still believes microbicides will
prove valuable in fighting the spread of AIDS. “ <p>It’s a
disappointment.” <cite>Nick Hellman. The Gates Foundation’s interim
director of HIV/AIDS and Tuberculosis</cite>. said in an interview. He
noted that developing drugs is a “long, tortuous road.” but said “we
have to proceed, stay the course and learn more lessons about what is
required for the optimum microbicide product.”
</p>
<body>
<html>
The SUPERSCRIPT element

The <sup> element is used to set the text as superscript in which
the text is raised slightly. The <sup> element is useful if the content
you’re writing is all about mathematics or Equation
<html>
<head>
<title> the SUPERSCRIPT element</title>
</head>
<body>
<h1> the SUPERSCRIPT element </h1>
<p>
` MATH EQUATIONS
<br /><br />
(5x<sup>2</sup>y<sup>5</sup>)
(-4x<sup>4</sup>y<sup>3</sup>)
<br />
25r<sup>2</sup> - 60rs + 36s<sup>2</sup>
</p>
</body>
</html>
The SUBSCRIPT element

The <sub> element is used to set the text as subscript in which the
text is raised slightly lower. The <sub> element is useful if the content
you’re writing is all about mathematics or chemistry.
<html>
<head>
<title> the SUBSCRIPT element</title>
</html>
<p>
CHEMICAL BONDING
<br /><br />
Water: H<sub>2</sub>0
<br />
Baking soda: NaHCO<sub>3
<br />
Calcium hydroxide: Ca(OH)<sub>2
</p>
</body>
</body>
Using Lists
List are often easier to read than paragraphs. They are also a
great way to provide information in a structured, easy-to read format.
Furthermore, they help our visitor to easily spot information, and they
draw attention to important information. Lists come in two varieties:
numbered (ordered) and bulleted(unordered).
List Tag & Its Effects
<UL> Specifies that the information appear as an unordered(bulleted)

list.
<OL> Specifies that the information appear as an ordered (numbered)
list.
<LI> Specifies line item in either ordered or unordered lists.
The UNORDERED LIST element

The <ul> element is used to create all a list of items wherein the
order of the item is not important. The <ul> element is useful in a
shopping list, of features of a product or list of ingredients. Each item is
displayed with a bullet.
<html>
<head>
<title> the UNORDERED LIST element</title>
</head>
<body>
Top new features of Adobe Dreamweaver CS3
<br />
<ul>
<li>Spry framework for Ajax
<li>Spry widgets
<li>Spry effects
<li>Advanced Photoshop CS3 integration
<li>Browser Compatibility Check</li>
</ul>
</body>
</html>
The ORDERED LIST element

The <ol> element is used to create a list of items in an orderly
manner in which items are read and followed in a specific sequence. A
list of instructions or procedures and table of contents are some good
examples that the <ol> element makes it easy for you to handle. Each
item is displayed with a number.
<html>
<head>
<title> the ORDERED LIST element</title>
</head>
<body>
<h1>
The ORDERED LIST element
</h1>
<li> In a large bowl, with a mixer on medium speed,

beat 1 ½ cups butter, sugar, orange peel and vanilla until smooth. Beat
in egg until well blended.
<li> In a medium bowl,, mix flour, baking powder and

salt. Add to butter mixture, stir to mix, then beat on low speed until
dough comes together, <br />about 5 minutes (see note preceding).
Mix in cranberries and coconut</li>
<li>Shape dough into 1-inch balls and place about 2
inches apart on buttered 12 by 15-inch baking sheets
<li>Bake in 350 regular or convection oven until cookie
edges just begin to brown, 11 to 15 minutes</li>
</body>
</html>
INVISIBLE COMMENTS AND BACKGROUND
Invisible Comments
Aside from white spaces, there are other things your Web browser
ignores, these are comments. Since they will not be displayed by the
browser, comments can be used to put significant statements and/or
remarks that you do not want to be displayed. The comment tag is a
container tag that uses<!—as a starting tag and – - as and end tag.
<html>
<head>
<title>Latest IT Books</title>
</head>
<body bgcolor=”#000000” text=”#ffffff”>
<!- -
This is my comment which will not be displayed on the page
-->
This is a page with black background and test changed to
white.
</body>
<html>
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>
<html>
<head>
</head>
<body bgcolor=”#ff0000”>
This is the first line of the text. Even if you press the
Enter key now no new line will be created.
</body>
<html>

Act.6 Orderlist Unorder List

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

Act.6 Orderlist Unorder List

Uploaded by

Copyright:

Available Formats

METRO BUSINESS COLLEGE

200 Dolores St. Arnaiz Ave. Pasay City

HyperText Markup Language – is a popular computer language that is

Extendible HyperText Markup Language (XHTML) is a markup language

Here’s an example of an absolute URL:

here’s an example of a relative URL:

Components of an HTML ELEMENT

HTML elements are the structure of an HTML document. HTML

NAME VALUE CONTENTS

<p class = ”text”> Great! </p>

HTML elements are composed of block level elements and inline

is one that contains only text or other inline elements, such as

Example of how a tag is used and its parts:

Start tag <html>

Container and Empty Tags

Example of container tags:

Example of empty tags:

Note: It is recommended that when coding your HTML file, you

Comments are statements that provides explanation or instruction.

<!—HTML Comments -->

The document TYPE

The <!DOCTYPE> element specifies the type of document. <!

<!DOCTYPE> tag must always be placed at the beginning of an HTML

The document ROOT

The <html> element is the root element in an HTML OR XHTML

The document HEADER

The <head> element describes the content of the document.

Document Header Example

The document TITLE

Document Title Example

The document BODY

The <body> element contains all the content to your document.

The Headings Elements

More about Body Tags and Headings

o The <!DOCTYPE html> declaration defines this document to

Attributes Table for <body></body>

background Indicates the background image filename (could

bgcolor Indicates the background color assigned name

ex. <body text=”black”> value of the

link Indicates the color of hyperlinks assigned of

vlink Indicates the color of the visited

alink Indicates the color of the visited

Creating a New Paragraph

Line Breaks and Horizontal Rules

The <br> tag creates a line break or new file.

Text will continue to flow in one line until the text

The CENTER Element

The ADDRESS element

The DIVISION element

The <div> element is used to organize the content in your

The PREFORFMATTED element

With love and grace. God filled a vase

Once content, to earth. He sent

The CITATION element

The SUPERSCRIPT element

The SUBSCRIPT element

List Tag & Its Effects

<UL> Specifies that the information appear as an unordered(bulleted)

The UNORDERED LIST element

The ORDERED LIST element

<li> In a large bowl, with a mixer on medium speed,

<li> In a medium bowl,, mix flour, baking powder and

INVISIBLE COMMENTS AND BACKGROUND

CHANGING THE BACKGROUND COLOR OF A PAGE