Scribd
Upload
286 views

An HTML Element Is An Individual Component of An HTML Document

HTML is the markup language used to structure and present content on the web. It uses tags enclosed in angle brackets to define elements like headings, paragraphs, lists, and more. HTML documents are composed of a tree of HTML elements that can have attributes, content including other elements and text nodes. Common elements include <html>, <head>, <title>, <body>, <p>, <h1>-<h6>, <ul>, <ol>, <img>, and <a> which are used to define overall page structure and semantic content.

Uploaded by

darepajni
Copyright
© Attribution Non-Commercial (BY-NC)
Available Formats
Download as DOC, PDF, TXT or read online on Scribd
286 views

An HTML Element Is An Individual Component of An HTML Document

HTML is the markup language used to structure and present content on the web. It uses tags enclosed in angle brackets to define elements like headings, paragraphs, lists, and more. HTML documents are composed of a tree of HTML elements that can have attributes, content including other elements and text nodes. Common elements include <html>, <head>, <title>, <body>, <p>, <h1>-<h6>, <ul>, <ol>, <img>, and <a> which are used to define overall page structure and semantic content.

Uploaded by

darepajni
Copyright
© Attribution Non-Commercial (BY-NC)
Available Formats
Download as DOC, PDF, TXT or read online on Scribd
You are on page 1/ 17

INTRODUCTION

HTML, which stands for Hyper Text Markup Language, is the predominant
markup language for web pages. HTML is the basic building-blocks of
webpages. A markup language is a set of markup tags, and HTML uses markup
tags to describe web pages.

HTML is written in the form of HTML elements consisting of tags, enclosed in


angle brackets (like <html>), within the web page content. HTML tags normally
come in pairs like <h1> and </h1>. The first tag in a pair is the start tag, the
second tag is the end tag (they are also called opening tags and closing tags).

HTML elements form the building blocks of all websites. HTML allows images
and objects to be embedded and can be used to create interactive forms. It
provides a means to create structured documents by denoting structural
semantics for text such as headings, paragraphs, lists, links, quotes and other
items. It can embed scripts in languages such as JavaScript which affect the
behavior of HTML webpages.

HTML documents are composed entirely of HTML elements that, in their most
general form have three components: a pair of element tags, a "start tag" and
"end tag"; some element attributes within the start tag; and finally, any textual
and graphical content between the start and end tags. The HTML element is
everything between and including the tags. Each tag is enclosed in angle
brackets.
HTML ELEMENTS
An HTML element is an individual component of an HTML document. HTML
documents are composed of a tree of HTML elements and other nodes, such as
text nodes. Each element can have attributes specified. Elements can also have
content, including other elements and text. HTML elements represent
semantics, or meaning. For example, the title element represents the title of the
document.

In the HTML syntax, most elements are written with a start tag and an end tag,
with the content in between. Tags are composed of the name of the element,
surrounded by angle brackets. An end tag also has a slash after the opening
angle bracket, to distinguish it from the start tag Attributes are specified on the
start tag.

Element types

1. <html>...</html>
This tag identifies the document as an HTML document. This tag is
optional and even if it not written , most web browsers assumes its
existence. But it is good to include it in document. All other tags are
included within <HTML> and </HTML> tags. The Root element of an
HTML document; all other elements are contained in this.
The HTML element delimits the beginning and the end of an HTML
document.

2. <head>...</head>
This tag contains information about the document, including its title,
scripts used, style definitions and document descriptions. The portion
enclosed between <HEAD> and </HEAD> tags is called header. The
header of the document is where global setting are defined. Container for
processing information and metadata for an HTML document. Usually
the title should be included in the head, for example:
<head>
<title>The title</title>
</head>
Head elements
<base>

It Specifies a base URL for all relative href and other links in the
document. Must appear before any element that refers to an external
resource. HTML permits only one base element for each document.

<isindex>

isindex could either appear in the document head or in the body, but only
once in a document. Requires a server-side search engine.

<link>

It Specifies links to other documents, such as previous and next links, or


alternate versions. A document’s head element may contain any number
of link elements. The link element has attributes, but no contents.

<meta>

It Can be used to specify additional metadata about a document, such as


its author, publication date, expiration date, page description, keywords,
or other information not provided through the other header elements and
attributes. Because of their generic nature, meta elements specify
associative key-value pairs.

<object>…</object>

It is Used for including generic objects within the document header.


Though rarely used within a head element, it could potentially be used to
extract foreign data and associate it with the current document.

<script>…</script>

It Can act as a container for script instructions or link to an external script


with the optional src attribute.[9] Also usable in the document body to
dynamically generate either both block or inline content.

<style>…</style>

It Specifies a style for the document, usually in the form:


<style type="text/css"> … </style>
Can either act as a container for style instructions or link to external style
sheets.
3. <title>…</title>
This tad gives an HTML document a title by which it is known to the
browsers. The title is not appear within the browser window, since it is
visible in the browser’s title bar.Define a document title. It is Required in
every HTML and XHTML document. The title element must not contain
other elements, only text. Only one title element is permitted in a
document

4. <body>...</body>
This tag encloses all tags, attributes and information that one wants the
browser to display. To use the tag , enter it below the closing </HEAD>
tag and above the closing </HTML> tag. It is the Container for the
displayable content of an HTML document.

Body elements

1) <p>…</p>

This tag is used to Create a paragraph, perhaps the most common block
level element.

2) <h1>…</h1> <h2>…</h2> <h3>…</h3> <h4>…</h4> <h5>…</h5>


<h6>…</h6>

These are the Section headings at different levels. <h1> delimits the
highest-level heading, <h2> the next level down (sub-section), <h3> for a
level below that, and so on to <h6>.

3) <br>

'br' breaks a line without altering the semantic structure of the page, 'br' is an
empty element in that, while it may have attributes, it can take no content or end
tag.

4) <center>…</center>
It Creates a block-level center-aligned division.

5) <b>…</b>
It Sets font to boldface where possible.

6) <i>…</i>

It Sets font to italic where possible.

7) <big>…</big>

It Increases font size (bigger text).

8) <small>…</small>

Decreases font size (smaller text).

9) <strike>…</strike> and <s>…</s>


Strike-through text (Strikethrough),

10) <u>…</u>
Underlines text.

11) <font>…</font>
It Can specify the font color with the color attribute, typeface with the
face attribute, and absolute or relative size with the size attribute.
Examples:

1. <font color="green">text</font> creates green text.


2. <font color="#114499">text</font> creates text with
hexadecimal color #114499.
3. <font size="4">text</font> creates text with size 4. Sizes are
from 1 to 7. The standard size is 3, unless otherwise specified in
the <body> or other tags.
4. <font size="+1">text</font> creates text with size 1 bigger
than the standard. <font size="-1">text</font> is opposite.
5. <font face="Courier">text</font> makes text with Courier
font.
LIST
The HTML list tag is used for specifying a list item in ordered, unordered,
directory, and menu lists. To create a list item, nest this element within a ul tag
(for an unordered list), ol tag (for an ordered list), menu tag (for a menu list), or
dir tag (for a directory list).

List attributes
A. <ol>…</ol>

An ordered (enumerated) list. The type attribute can be used to specify


the kind of ordering, but stylesheets give more control: {list-style-type:
foo}. The default is Arabic numbering.

B. <ul>…</ul>

An unordered (bulleted) list. Stylesheets can be used to specify the list


marker: {list-style-type: foo}. The default marker is a disc.

C. <dir>…</dir>

A directory listing. The original purpose of this element was never widely
supported; deprecated in favor of <ul>.

D. <menu>…</menu>

A menu listing. Should be more compact than an <ul> list, but badly
supported. Deprecated in favor of <ul>.

Example <ul>
<li>ol - ordered list</li>
<li>ul - unordered list</li>
<li>dir - directory list (deprecated)</li>
<li>menu - menu list (deprecated)</li>
</ul>

List programming

I. DIRECTORY LIST
coding results
List Name
<DIR> List Name
<LI>List item 1  List item 1
<LI>List item 2  List item 2
</DIR>

II. MENU LIST


coding results
List Name
<MENU> List Name
List item 1<BR> List item 1
List item 2 List item 2
</MENU>

III. ORDERED LIST

coding results
Preceeding Text Preceeding Text
<OL> List Header
<:LH>List Header</LH>
<LI>List item 1 1. List item 1
<LI>List item 2
</OL> 2. List item 2

IV. UNORDERED LIST

coding results
Preceeding Text Preceeding Text
<UL> List Header
<LH>List Header</LH>
<LI>List item 1 • List item 1
<LI>List item 2
</UL> • List item 2

IMAGE
The HTML img tag is used for embedding images into an HTML document. To
use this tag, the image you specify in the src attribute needs to be available on a
web server. To link an image to another web page (or a larger version of the
image), you simply nest the <img> tag inside an <a> tag. Here's an example of
linking an image. You can also link your image to an image map.

Syntax

<img>

This tag is Used by visual user agents to insert an image in the document.
The src attribute specifies the image URL. The required alt attribute
provides alternative text in case the image cannot be displayed.

Example <img src="/pix/milford_sound/milford_sound_t.jpg" width="225"


height="151" alt="Milford Sound in New Zealand">
Attributes: Attributes specific to this tag:
Attribute Description
name Assigns a name to an image. This is used when
referencing the image with stylesheets or scripts.
However, you should use the id attribute instead.
src Location of the image.
dir Specifies the direction of the text
align For alignment (left, center, right, justify).
width Specifies the width of the image.
height Specifies the height of the image.
border Size of the image border. For no border use 0 (zero).
Image Tag programming

a. BORDERS

• Border="1":

<IMG BORDER="1" SRC="redball.gif" ALT="*">

• Changing color of border

<FONT COLOR="green"><IMG BORDER="5" SRC="redball.gif"


ALT="TOC"></FONT>

b. HEIGHT & WIDTH


• HEIGHT="16" WIDTH="28":

<IMG SRC="redball.gif" HEIGHT="16" WIDTH="28" ALT="*"> 00

c. LINKED
• Linked In-line image with border="5"

<A HREF="#TOC"><IMG BORDER="5" SRC="redball.gif"


ALT="TOC"></A>

• Changing color of border


Note: you may have to hit reload, as the below coding affects link
color but not visited link color.

<A HREF="#TOC"><FONT COLOR="green"><IMG BORDER="5"


SRC="redball.gif" ALT="TOC"></FONT></A>
FORMS
The <form> tag is used in conjunction with form-associated elements. To create
a form, you can nest form-associated elements inside the opening/closing
<form> tags.

Form-Associated Elements

Here are the elements that you can use with your forms.

• <input>
• <textarea>
• <button>
• <select>
• <option>
• <fieldset>
• <label>

These elements allow the user to provide information to the website -


information which can be submitted to the server for processing.

Example <form action="/html/tags/html_form_tag_action.cfm"


method="get">
First name:
<input type="text" name="first_name" value=""
maxlength="100" />
<br />
Last name:
<input type="text" name="last_name" value="" maxlength="100" />
<input type="submit" value="Submit" />
</form>

The above code produces the following form:

First name:
Submit
Last name:
Attributes: Attributes specific to this tag:
Attribute Description
action Specifies a URI/URL of the page that will process the
form.
method Specifies the HTTP method to use when the form is
submitted.
enctype Specifies the content type used to encode the form data
set when it's submitted to the server.
accept Specifies a comma-separated list of content types that
the server accepts.
name Assigns a name to the form. This is used when
referencing the form with stylesheets or scripts. If there
are multiple forms, the name of each form must be
unique.
dir Specifies the direction of the text
target Specifies the target frame to load the destination page
as indicated with the action attribute.
TABLES
The HTML <table> tag is used for defining a table. The table tag contains other
tags that define the structure of the table. Tables consist of the <table> element
as well as other table-related elements. These other elements are nested inside
the <table> tags to determine how the table is constructed.

Table attributes

<tr>…</tr>
It Contains a row of cells in a table.
<th>…</th>

A table header cell; contents are conventionally displayed bold and


centered. An aural user agent may use a louder voice for these items.

<td>…</td>
A table data cell.

<colgroup>…</colgroup>
Specifies a column group in a table.

<col> or <col/>
Specifies a column in a table.

<caption>…</caption>
Specifies a caption for a table.

<tbody>…</tbody>
Specifies a body of data for the table.

Example <table border = "1">


<tr>
<td>Cell 1</td>
<td>Cell 2</td>
</tr>
</table>
Attributes: Attributes specific to this tag:
summary Provides a summary of the table's structure and purpose
for non-visual user agents.
align Visual alignment of the table (i.e. left, center, right).
This attribute is deprecated, use CSS instead.
width Width of the table.
dir Specifies the direction of the text
class Document wide identifier.
id Document wide identifier
lang Language code
title Used in conjunction with the border attribute, specifies
which side of the frame that makes up the border
surrounding the table is displayed.

Table programming
i. CELL WIDTH

• TWO COLUMNS: FIRST CELL WIDTH="50%"

This cell
<TABLE BORDER="7"> will The first
<TR> expand to cell will
<TH WIDTH="50%">This cell will expand to 50% 50% if expand to
if the contents of the other cell will allow.</TH> the 50% if
<TH>The first cell will expand to 50% contents the
if the contents of this cell will allow.</TH> of the contents
</TR> other cell of this cell
</TABLE> will will allow.
allow.
ii. CELLPADDING

• CELLPADDING="10"

<TABLE BORDER="7" CELLPADDING="10">


<TR>
<TD>This is a TD cell</TD>
<TD><PRE> </PRE></TD>
<TH>This is a TH cell</TH>
</TR>
<TR>
<TH VALIGN="TOP">Text aligned top</TH>
<TH>Image in TH cell with default alignments ---></TH>
<TH><IMG SRC="blylplne.gif" ALT="airplane"></TH>
</TR>
<TR>
<TH VALIGN="BOTTOM">Text aligned bottom</TH>
<TD><Image in TD cell with default alignments ---></TD>
<TD><IMG SRC="blylplne.gif" ALT="airplane"></TD>
</TR>
</TABLE>

CELLSPACING

• CELLSPACING="10"

<TABLE BORDER="7" CELLSPACING="10">


<TR>
<TD>This is a TD cell</TD>
<TD><PRE> </PRE></TD>
<TH>This is a TH cell</TH>
</TR>
<TR>
<TH VALIGN="TOP">Text aligned top</TH>
<TH>Image in TH cell with default alignments ---></TH>
<TH><IMG SRC="blylplne.gif" ALT="airplane"></TH>
</TR><TR>
<TH VALIGN="BOTTOM">Text aligned bottom</TH>
<TD><Image in TD cell with default alignments ---></TD>
<TD><IMG SRC="blylplne.gif" ALT="airplane"></TD>
</TR>
</TABLE>
FRAMES
The HTML frame tag is used to specify each frame within a frameset. For
example, you can have a left frame for navigation and a right frame for the main
content. For each frame, you specify the frame with the frame tag. Frames allow
a visual HTML Browser window to be split into segments, each of which can
show a different document. This allows for lower bandwidth use, as repeating
parts of a layout can be used in one frame, while variable content is displayed in
another.

Elements
<frameset>…</frameset>
It Contains the frameset. The frames layout is given by comma separated
lists in the rows and cols attributes.

<frame> or <frame/>
It Delimits a single frame, or region, within the frameset. A separate
document linked with the src attribute appears inside.

<noframes>…</noframes>
It Contains normal HTML content for user agents that don't support
frames.

<iframe>…</iframe>
An inline frame places another HTML document in a frame. Unlike an
object element, an inline frame can be the "target" frame for links defined
by other elements and it can be selected by the user agent as the focus for
printing, viewing its source, etc.
Example <html>
<head>
<title>Frameset page<title> </head>
<frameset cols = "25%, *">
<noframes>
<body>Your browser doesn't support frames.
Therefore, this is the noframe version of the site.</body>
</noframes>
<frame src ="/html/tags/frame_example_left.html" />
<frame src ="/html/tags/frame_example_right.html" />
</frameset> </html>
Attributes: Attributes specific to this tag:
Attribute Description
name Assigns a name to a frame. This is useful for loading
contents into one frame from another.
src Location of the frame contents (for example, the
HTML page to be loaded into the frame).
noresize Specifies whether the frame is resizable or not (i.e.
whether the user can resize the frame or not).

frameborder Whether the frame should have a border or not.


marginwidth Specifies the margin, in pixels, between the frame's
contents and it's left and right margins.
marginheight Specifies the margin, in pixels, between the frame's
contents and it's top and bottom margins.

Frame programming
1. SINGLE FRAMESET

Example code:

<FRAMESET COLS="100%,*" BORDER="0" FRAMEBORDER="no">


<FRAME MARGINHEIGHT="50" MARGINWIDTH="50"
SRC="border1.htm" NAME="main">
</FRAMESET>

2. DOUBLE FRAMESET

Example code:

<FRAMESET ROWS="100%" COLS="10%,*">


<FRAME NAME="Frame 1" SRC="sidemenu.htm" SCROLLING="AUTO"
MARGINHEIGHT=1 MARGINWIDTH=1>
<FRAME NAME="Frame 2" SRC="2ndframe.htm" SCROLLING="AUTO"
MARGINHEIGHT=1 MARGINWIDTH=1>
</FRAMESET>

You might also like