Scribd
Upload
35 views

HTML Lesson 1

The document provides information on HTML, XHTML, URLs, HTML elements, tags, and the structure of an HTML document. It explains key components such as the <DOCTYPE>, <html>, <head>, <title>, <body> tags and use of headings, comments, and attributes. The document is a guide for web authors and developers to properly structure HTML and XHTML documents.

Uploaded by

Barcelona, Tricia Mae F.
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
35 views

HTML Lesson 1

The document provides information on HTML, XHTML, URLs, HTML elements, tags, and the structure of an HTML document. It explains key components such as the <DOCTYPE>, <html>, <head>, <title>, <body> tags and use of headings, comments, and attributes. The document is a guide for web authors and developers to properly structure HTML and XHTML documents.

Uploaded by

Barcelona, Tricia Mae F.
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 24

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.
METRO BUSINESS COLLEGE
200 Dolores St. Arnaiz Ave. Pasay City

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
METRO BUSINESS COLLEGE
200 Dolores St. Arnaiz Ave. Pasay City

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.

Tags are enclosed in angle brackets (‘<’ and ‘>’) and an example of it is
<html>

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>. is a declaration that defines that this doc. Is an
HTML

Example of how a tag is used and its parts:

Start tag <html>


METRO BUSINESS COLLEGE
200 Dolores St. Arnaiz Ave. Pasay City

<head> - Head tag element contains meta information


about the html page.
Attributes <title> Jemma Inc</title> - tag element specifies a title
for the html page
<html>
<head>
<title>JEMMA INC.</title>
</head>
Content <body bgcolor=”#0000FF” text=”#FFFFFF”>
Welcome to Jemma Inc.
<p>

This text is in <b>boldface</b>


<br><br>
This text is in <i>italized</i>
<br><br>
This text is in <u>underline<u>
</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
METRO BUSINESS COLLEGE
200 Dolores St. Arnaiz Ave. Pasay City

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>
METRO BUSINESS COLLEGE
200 Dolores St. Arnaiz Ave. Pasay City

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


METRO BUSINESS COLLEGE
200 Dolores St. Arnaiz Ave. Pasay City

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.
METRO BUSINESS COLLEGE
200 Dolores St. Arnaiz Ave. Pasay City

<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.
METRO BUSINESS COLLEGE
200 Dolores St. Arnaiz Ave. Pasay City

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
METRO BUSINESS COLLEGE
200 Dolores St. Arnaiz Ave. Pasay City

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


METRO BUSINESS COLLEGE
200 Dolores St. Arnaiz Ave. Pasay City

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>
METRO BUSINESS COLLEGE
200 Dolores St. Arnaiz Ave. Pasay City

<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.
METRO BUSINESS COLLEGE
200 Dolores St. Arnaiz Ave. Pasay City

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

<html>
<head>
<title> Latest IT Books</title>
</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”>
METRO BUSINESS COLLEGE
200 Dolores St. Arnaiz Ave. Pasay City

<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>
METRO BUSINESS COLLEGE
200 Dolores St. Arnaiz Ave. Pasay City

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
METRO BUSINESS COLLEGE
200 Dolores St. Arnaiz Ave. Pasay City

</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>
METRO BUSINESS COLLEGE
200 Dolores St. Arnaiz Ave. Pasay City

<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.
METRO BUSINESS COLLEGE
200 Dolores St. Arnaiz Ave. Pasay City

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
METRO BUSINESS COLLEGE
200 Dolores St. Arnaiz Ave. Pasay City

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>
METRO BUSINESS COLLEGE
200 Dolores St. Arnaiz Ave. Pasay City

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</sub>
<br />
Calcium hydroxide: Ca(OH)<sub>2</sub>
</p>
</body>
</body>
METRO BUSINESS COLLEGE
200 Dolores St. Arnaiz Ave. Pasay City

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.
METRO BUSINESS COLLEGE
200 Dolores St. Arnaiz Ave. Pasay City

<html>
<head>
<title> the UNORDERED LIST element</title>
</head>

<body>
<h1>
Top new features of Adobe Dreamweaver CS3
<br />
<ul>
<li>Spry framework for Ajax</li>
<li>Spry widgets</li>
<li>Spry effects</li>
<li>Advanced Photoshop CS3 integration</li>
<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>
METRO BUSINESS COLLEGE
200 Dolores St. Arnaiz Ave. Pasay City

<body>
<h1>
The ORDERED LIST element
</h1>
<ol>
<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>
<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>
<li>Bake in 350<sup>o</sup> regular or convection
oven until cookie edges just begin to brown, 11 to 15 minutes</li>
</ol>
</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>
METRO BUSINESS COLLEGE
200 Dolores St. Arnaiz Ave. Pasay City

<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>
<title> Latest IT Books</title>
</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>

You might also like