V. Understanding The Structure and Logic of HTML

V.
Understanding the Structure

and Logic of HTML
1. General Introduction
2. Basic Structure of HTML
3. HTML Document Font Attributes
and Tags
Introduction
• What is HTML
– HyperText Markup Language
– It is the coding system used to make web pages or
sometimes called “language of web pages”.
– HTML is not a programming language, it is a
markup language
– A markup language is a set of markup tags
HTML uses markup tags to describe web
pages
• HTML tag tells the browser where and how to
present the text, graphic images, links and
other web pages components.
• The way the pages are encoded is with a
Markup called HTML.
• Web Pages are used to convey data or
information. The data is your message that is
considered the body of HTML document. The
text and content are the most important parts
in a web page.
• Web page is simply a text file ending with
suffix .html or .htm in its raw form. It is a
simple text that contains HTML tags, with no
background, no pictures, or animations that
has no color, life and vitality.
• The browser is a program on your computer

that take these text files, reads them in row,
and displays them on your computer in such a
way the file HTML suggests.
• The Tags are commands or the source code for
any web page that interspersed all through
the document. The tags tell the browser how
to display the text, layout and images of the
document. It is easy to recognized the tags
because of its greater than or less than signs
or the angle brackets.
Features of HTML
• Create a personal home page and leave your
mark on the World Wide Web
• Create a page for a company to advertise and
promote products and services.
• Build a catalog on the WWW complete with
product description and pictures and fill in
order forms so that customer can order from
their line.
• Create searchable phone directory for a
company or organization.
• Give information on how to advertise and how
to access internet.
• Create a newsletter on the web, with pictures
and sounds.
• Web Browser
• World Wide Web
• Web Site
• URL
• 3 Kinds of Home Page
• Web page
• Text Based
• Home page
Pages
• Personal Home
Pages
• Commercial
Home Pages
• The WWW would not exist without HTML for
it allows the individual elements on the web
to be brought together and presented as
collection.
• The text , images, multimedia, and other files
can be link all together using HTML.
HTML markup tags are usually called HTML tags
* HTML tags are keywords surrounded by angle

brackets like <html>
* HTML tags normally come in pairs like <b> and
</b>
* The first tag in a pair is the start tag, the second
tag is the end tag
* Start and end tags are also called opening tags
and closing tags.
How to Write a Simple HTML document?
• <html></html>
• <head></head>
• <title></title>
• <body></body>
How to start typing the HTML doc.?
• Click Programs
• Click Accessories
• Click Notepad
• Type the HTML program
How to save?
• Click File from menu or simply click the
save button
• Type the filename and use the
extension .html or .htm
The Basic Structure of an HTML document
<html>
<head>
<title> MY FIRST WEB PAGE </title>
</head>
<body>
Very little is needed to make a happy life. It is
all within your self, in your way of thinking.
</body>
</html>
Heading
• To insert a heading to your document type it in
the body section
– <h1></h1>
– <h2></h2>
– <h3></h3>
– <h4></h4>
– <h5></h5>
– <h6> </h6>
Paragraph, Text Break, and Formatting Text
• Paragraph tags:( it creates a space between

paragraphs)
• <p> </p>
• <dd>
• <blockquote> </blockquote>
<p>
<dd> All we are is the result of what we have thought. The
mind is everything. What we think we become.
</p>
• Text Break tag: (indicates the end of a line of text)
– <br>
<p>
Alleluia <br>
Blessed is the who fears the Lord<br>
Who greatly delights in His commands<br>
His children will be powerful on earth<br>
The upright’s offspring will be pleased.</p>
• Formatting Text: to apply a font, font color,
and font size
• <font> </font>
• <font color=red size=5 face=“arial”> words,
sentence, or paragraph </font>
Font style and effects
• <b> words, sentence, paragraph </b> bold
• <u> words, sentence, paragraph </u> underline
• <i> words, sentence, paragraph </i> italic
• <s> words, sentence, paragraph </s> strike
through
• <sub> </sub> subscript
• <sup></sup> superscript
• <e> </e> emphasis
Alignment, Horizontal ruled line, Background
color
• Paragraph Alignment – paragraph can be positioned
on the left, right, or center of a browsers display window.
• <p align=left> </p>

• <p align=right> </p>
• <p align= center> </p>
• <p align=justified> </p>
• To center a title or text you can use:

– <center> </center>
• Background color – it is applied to the body of
a web page
– <body bgcolor = yellow>

• Horizontal Ruled Line – draws a horizontal line across a
web page
• <hr width=500 height=100 color=blue

noshade>
Background Picture
• Refers to the use of a picture as the
background of a web page.
• The image appears tiled on the web page
< Body Background=“d:\plaza\pic.jpg”>

Marquee
• Use to add an animation effect to text/displays a scrolling
effect
• Marquee attributes:
– behavior (scroll, slide)
– width indicates up to what part of the screen the text will

move in a left to right direction
– height indicates up to what part of the screen the text will
move in a up-down direction
– bgcolor specifies the background color of the text
– Direction specifies the path or route of a text movement
(up,down, right, left)
– Loop indicates the number of times u want the text to
animate.
• <marquee behavior=scroll width=100% height=100%
bgcolor=blue loop=infinite direction=up> text here </marquee>
• Marquee that blinks
– <marquee scrollamount=400 scroll delay=500> </marquee>
• Marquee that comes from the middle

– <marquee direction=left width=50%> </marquee>
• For faster animation

– <marquee scrollamount=20> </marquee>
• Text that moves upward/downward like in acknowledgements:

– <marquee width=100% height= 80% behavior=scroll direction=up>
</marquee>
Image
• The <img> tag embeds an image in an HTML page.
Attribute Value Description

alt text Specifies an alternate text for an image
src URL Specifies the URL of an image
height pixels Specifies the height of an image

%
width pixels Specifies the width of an image
%
border pixels Specifies the width of the border

around an image
Attribute Value Description
align top Specifies the alignment of an image
bottom according to surrounding elements
middle
left
right
<img src = marine.jpg height =50% width =50%>

Tables
• Tables are defined with the <table> tag.
Table is divided into rows (with the <tr>
tag), and each row is divided into data cells
(with the <td> tag).
• The letters td stands for "table data," which

is the content of a data cell.
Example:
<table border="1">
<tr>
<td>row 1, cell 1</td>
</tr>
<tr>
</tr>
</table>
Table tags
Caption Gives the title or caption of the table
TH Table header, gives the heading for a

row or column
TD Table data, gives the data contents
TR Table row, defines the table row

Table attributes
Align Specifies the alignment of a table
according to surrounding text
Bgcolor Specifies the background color for a table
Border Specifies the width of the borders around a
table
Cellpadding Specifies the space between the cell wall
and the cell content
Cellspacing Specifies the space between cells
Width Specifies the width of a table
Background Specifies a background image for a table
Bordercolor Specifies the color of the border for a table
Headings in a Table
<table border="1">
<tr>
<th>Heading</th>
<th>Another Heading</th>
</tr>
<tr>
</tr>
<tr>
</tr>
</table>
Empty Cells
<html>
<body>
<table border="1">
<tr>
<td>Some text</td>
<td>Some text</td>
</tr>
<tr>
<td></td>
<td>Some text</td>
</tr>
</table>
The no-breaking space entity starts with an ampersand ("&"),
then the letters "nbsp", and ends with a semicolon (";")
<h4>A background color:</h4>
<table border="1“ bgcolor="red">
<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>
<h4>A background image:</h4>
<table border="1“
background="bgdesert.jpg">
<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>
<h4>With cellpadding: </h4>
<table border="1“ cellpadding="10">
<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>
<h4>With cellspacing:</h4>
<table border="1“
cellspacing="10">
<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>
Links
• Hyperlinks can point to any resource on the
web: an HTML page, an image etc.
• An anchor is a term used to define a
hyperlink destination inside a document.
• The HTML anchor element <a>, is used to
define both hyperlinks and anchors.
<a href="url">Link text</a>

The <a> tag defines an anchor. An anchor
can be used in two ways:
• To create a link to another document, by

using the href attribute
• To create a bookmark inside a document,
by using the name attribute
By default, links will appear as follows in all
browsers:
• An unvisited link is underlined and blue

• A visited link is underlined and purple
href attribute
• The href attribute defines the link

"address".
<a href="http://www.w3schools.com/">Visit
W3Schools!
</a>
An image as a link
<html>
<body>
<p>
You can also use an image as a link:
<a href="lastpage.htm">
<img border="0" src="buttonnext.gif" width="65"
height="38">
</a>
</p>
</body>
</html>
An image as a link
<html>
<body>
<p>Create a link of an image:

<a href="default.htm">
<img src="smiley.gif" alt="HTML tutorial"
width="32" height="32" />
</a></p>
<p>No border around the image, but still a

link:
<a href="default.htm">
<img border="0" src="smiley.gif" alt="HTML
tutorial" width="32" height="32" />
</a></p>
</body>
</html>

V. Understanding The Structure and Logic of HTML

Uploaded by

Copyright:

Available Formats

V. Understanding The Structure and Logic of HTML

Uploaded by

Document Information

Original Description:

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

V. Understanding The Structure and Logic of HTML

Uploaded by

Copyright:

Available Formats

V.

Understanding the Structure

• The browser is a program on your computer

* HTML tags are keywords surrounded by angle

• Paragraph tags:( it creates a space between

• <p align=left> </p>

• To center a title or text you can use:

– <body bgcolor = yellow>

• <hr width=500 height=100 color=blue

< Body Background=“d:\plaza\pic.jpg”>

– width indicates up to what part of the screen the text will

• Marquee that comes from the middle

• For faster animation

• Text that moves upward/downward like in acknowledgements:

Attribute Value Description

height pixels Specifies the height of an image

border pixels Specifies the width of the border

<img src = marine.jpg height =50% width =50%>

• The letters td stands for "table data," which

Caption Gives the title or caption of the table

TH Table header, gives the heading for a

TD Table data, gives the data contents

TR Table row, defines the table row

<a href="url">Link text</a>

• To create a link to another document, by

• An unvisited link is underlined and blue

• The href attribute defines the link

<p>Create a link of an image:

<p>No border around the image, but still a

You might also like