Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
Scribd
Upload
10 views

HTML final unit 1

HTML (Hypertext Markup Language) is the standard markup language for creating web pages, consisting of elements that define the structure and content of the page. Key components include the <html>, <head>, and <body> tags, which organize the document into a head section for metadata and a body section for actual content. HTML also supports various formatting elements, such as headings, paragraphs, lists, and comments, to enhance the presentation of web content.

Uploaded by

13it11
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
10 views

HTML final unit 1

HTML (Hypertext Markup Language) is the standard markup language for creating web pages, consisting of elements that define the structure and content of the page. Key components include the <html>, <head>, and <body> tags, which organize the document into a head section for metadata and a body section for actual content. HTML also supports various formatting elements, such as headings, paragraphs, lists, and comments, to enhance the presentation of web content.

Uploaded by

13it11
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 21

Hypertext Markup Language (HTML) is a programming tool that

uses hypertext to establish dynamic links to other documents.


It is known as the Web's programming language and provides a
general structure for creating web pages. All web pages are
actually HTML files. HTML documents are simply text
documents that uses simple ASCII text files to create HTML
documents with HTML file extensions or suffix as .html
or .htm.
HTML stands for hyper text markup language. is the standard markup language for certain web pages.
HTML describes the structure of a web pae. HTML consists of series of elements. HTML elements tell t he
browser ow to display the content.

Tag BASICS
HTML defines three tags that are used to define the page’s overall structure and provide some
simple header information. These three tags—<html>, <head>, and <body>—make up the basic
skeleton of every web page. They also provide simple information about the page (such as its title or
its author) before loading the entire thing.

The <html> Tag


The first page structure tag in every HTML page is the <html> tag. It indicates that the content of this file is in
the HTML language. The <html> tag should immediately follow the DOCTYPE identifier (as mentioned in the
previous note), as shown in the following example.
All the text and HTML elements in your web page should be placed within the beginning and ending HTML
tags, like this:
<!DOCTYPE html>
<html> ...your page...
</html>
The <html> tag serves as a container for all of the tags that make up the page

The <head> Tag


The <head> tag is a container for the tags that contain information about the page, rather than
information that will be displayed on the page. Generally, only a few tags are used in the <head>
portion of the page (most notably, the page title, described later). You should never put any of the text
of your page into the header (between <head> tags).
<title> later.)
<!DOCTYPE html>
<html>
<head>
<title>This is the Title. It will be explained later on</title>
</head> ...your page...
</html>

The <body> Tag


The content of your HTML page (represented in the following example as ...your page...) resides
within the <body> tag. This includes all the text and other content (links, pictures, and so on). In
combination with the <html> and <head> tags, your page will look something like this:
<!DOCTYPE html><html>
<head>
<title>This is the Title. It will be explained later on</title>
</head>
<body> ...your page...
</body>
</html>

The Title
Each HTML page needs a title to indicate what the page describes. It appears in the title bar of the browser
when people view the web page. The title is stored in your browser’s bookmarks and in search engines when
they index your pages. Use the <title> tag to give a page a title.
<title> tags are placed within the <head> tag and are normally used to describe the contents of the page, as
follows:
<!DOCTYPE html><html>
<head>
<title>The Lion, The Witch, and the Wardrobe</title>
</head>
<body> ...your page...
</body>
</html>

Each page can have only one title, and that title can contain only plain text; that is, no other tags should appear
inside the title.
Figure 4.1 shows how the follow ing title looks in a browser:
<title>The Lion, the Witch, and the Wardrobe</title>

FIGURE 4.1
The title appears in the tab bar, not on the page.

HTML DOCUMENT STRUCTURE


A HTML document contains the information in the form of text data (content of the page). The
HTML document is divided into two major parts as HEAD and BODY. The head part of the
document contains the information about the page, e.g. the title and the body part contains the
actual content of the page.

The basic document starts with <HTML> and ends with </HTML>

The HEAD part of the document contains information about the document namely,

• Title of the page which appears at the top of the browser window).

• Meta tags which is used to describe the information about the content that is in the
document (used by Search engines).

• The script code written in JavaScript and Style sheets generally appears in the document
Head.
The BODY part of the document contains the actual content of the document. This is the part
that will be displayed in the browser window.

A sample HTML document looks like this,

<HTML>

<HEAD>

<TITLE> My web page </TITLE>

</HEAD>

<BODY>

Content of the document

</BODY>

</HTML>

Comments
You can put comments into HTML pages to describe the page itself or to provide some kind of
indication of the status of the page. Some source code control programs store the page status in
comments, for example. Text in comments is ignored when the HTML file is parsed; comments never
show up onscreen—that’s why they’re comments. Comments look like the following:
<!-- This is a comment -->
Here are some examples:
<!-- Rewrite this section with less humor -->
<!-- Neil helped with this section -->
<!-- Go Tigers! -->

As you can see from Figure 4.4, users can view your comments using the View Source functionality in their
browsers, so don’t put anything in comments that you don’t want them to see.

FIGURE 4.4
HTML
comments
displayed within
the source for a
page.

Paragraphs
A paragraph in HTML is simply a block of text enclosed within the <p>
tag. The <p> tag helps divide content into manageable, readable
sections. It’s the go-to element for wrapping text in a web page that is
meant to be displayed as a distinct paragraph.
Syntax:
<p> Content</p>

<p>Slowly and deliberately, Enigern approached the mighty dragon. A rustle in the trees of the
nearby forest distracted his attention for a brief moment, a near fatal mistake for the brave
knight.</p>

Input ▼

<p>The dragon fell to the ground, releasing an anguished cry and seething in
pain. The thrust of Enigern's sword proved fatal as the dragon breathed its
last breath. Now Enigern was free to release Lady Aelfleada from her
imprisonment in the dragon's lair. </p>

Output ▼

FIGURE 4.3
An HTML para-
graph.

The closing </p> tag, while not required, is important for defining the exact contents of a paragraph for CSS.
Most web designers use it automatically, but if you don’t need it, you can leave it out of your HTML.

Properties of the paragraph Tag:


 The browser reduces multiple spaces added by users to a single
space.
 If a user adds various lines, the browser compresses them into one
line.
 By default, the display of the paragraph element is set to “block,”
meaning each new paragraph is placed on a new line. This behavior
can be modified using CSS.

Line break <BR>

 This tag breaks the line and starts text at a new line. It will not add an empty line like the
paragraph tag. Multiple <br> tags will display multiple line breaks in the text. Spaces
and line breaks are supported without additional elements or special characters.
Emphasized text
The <em> tag in HTML is a phrase tag and is used to emphasize the text
content. It is similar to <italic> tag. The main difference between these two
tags is the <em> tag semantically emphasizes the important word or
section of words while the <i> tag is just offset text conventionally styled in
italics to show an alternative mood or voice.
Syntax:
<em> Contents... </em>
Example 1: This example uses <em> tag to create emphasized text.
HTML
<!DOCTYPE html>
<html>

<head>
<title>
How to render as emphasized
text using HTML?
</title>
</head>

<body style="text-align: center;">


<h3>
How to render as emphasized
text using HTML?
</h3>

<em>Emphasized text content</em>


</body>

</html>

Output:

Output

Headings
Headings are used to add titles to sections of a page. HTML defines six levels of headings. Heading tags look
like the following:
<h1>Installing Your Safetee Lock</h1>

The numbers indicate heading levels (h1 through h6). The headings, when they’re displayed, aren’t numbered.
They’re displayed in larger and bolder text so that they stand out from regular text.
Think of the headings as items in an outline. If the text you’re writing is structured, use the headings to express
that structure, as shown in the following code:
Input ▼

<h1>Mythology Through the Ages</h1> 4


<h2>Common Mythological Themes</h2>
<h2>Earliest Known Myths</h2>
<h2>Origins of Mythology</h2>
<h3>Mesopotamian Mythology</h3>
<h3>Egyptian Mythology</h3>
<h4>The Story of Isis and Osiris</h4>
<h4>Horus and Set: The Battle of Good vs. Evil</h4>
<h4>The Twelve Hours of the Underworld</h4>
<h4>The River Styx</h4>
<h2>History in Myth</h2>

Output ▼

FIGURE 4.2
HTML heading ele-
ments.

Unlike titles, headings can be any length, spanning many lines of text. Because headings are emphasized,
however, having many lines of emphasized text might be tiring to read.
A common practice is to use a first-level heading at the top of your page to either duplicate the title or to provide
a shorter or less context-specific form of the title.

Horizontal Rule <HR>


<HR> tag creates a Horizontal Rule. We can use attributes with <hr> such as

<hr width=“70%”>

Comments <!-- -->

Lists
Lists are used to organize items in the browser window. There are two ways to create a list
namely, Unordered list which is a Bulleted list and it is most popular. Here, list items have no
particular order. The other list is an Ordered list or Numbered list.

• Ordered Lists (OL): e.g. 1,2,3


• UnOrdered Lists (UL): e.g. bullets.

Basic Syntax:

Unordered Lists
Fruit

<UL>

<LI>Banana

<LI>Grape

</UL>

Exploring Different Attributes

We have the choice of setting the TYPE Attribute to one of five numbering styles.

<OL

type=I or i (for large or small roman numerals) type=A or a (for capital or small letters) type=1
(for numbers, which is the default)>

<UL

type=disc (the default for first level lists) type=round (the default for second level lists)
type=square (the default for third level lists) >

Numbered list/ Ordered List:

Fruit

<OL>
<LI> Banana

<LI>Grape

</OL>

We can also specify a starting number for an ordered list.

<OL TYPE=“i” START=“3”>

<LI> List item …</LI>

</OL>

<OL TYPE =“i”>

<LI> List item …</LI>

<LI> List item …</LI>

</OL>

<P> text ….</P>

<OL TYPE=“i” START=“3”>

<LI> List item …</LI>

</OL>

List Elements
DL: Definition List.

This kind of list is different from the others. Each item in a DL consists of one or more Definition
Terms (DT elements), followed by one or more Definition Description (DD elements).

<DL>

<DT> HTML </DT>

<DD> Hyper Text Markup Language </DD>


<DT> DOG </DT>

<DD> A human’s best friend!</DD>

</DL>

The above HTML code appears as below in the browser.

HTML

Hyper Text Markup Language

DOG

A human’s best friend!

FONT SIZE

The HTML <font> size attribute adjusts text size within `<font>` elements,
simplifying font size modification directly.

<FONT SIZE=“+2”> Two sizes bigger</FONT>

The size attribute can be set within the <FONT> tag as an absolute value from 1 to 7 or as a
relative value using the “+” or “-” sign. Normal text size is 3 (from -2 to +4).

Syntax:
<font size="number">

Attribute Values:

It contains a single value number that specifies the size of the text. The
font size lies between 1 to 7. The default value of font size is 3.
<!DOCTYPE html>
<html>

<head>
<title>HTML font size Attribute </title>
</head>

<body>
<font size="1">GeeksforGeeks! </font><br />
<font size="2">GeeksforGeeks! </font><br />
<font size="3">GeeksforGeeks! </font><br />
<font size="4">GeeksforGeeks! </font><br />
<font size="5">GeeksforGeeks! </font><br />
<font size="6">GeeksforGeeks! </font><br />
<font size="7">GeeksforGeeks! </font>
</body>

</html>

Output:

HTML font color Attribute


The HTML font color attribute is used to specify the text color within the
<font> tag.
Syntax
<font color="color_name|hex_number|rgb_number">

Attribute Values:
Example
Type How It Works Usage

Color Pick from common color names to set the text "red"
Name color.

Hex
Use a 6-digit hex code to define specific colors. "#0000ff"
Code

RGB Define colors using the RGB model with three "rgb(0, 153,
Code values for red, green, and blue. 0)"
<!DOCTYPE html>

<html>

<head>

<title>

HTML | <font> color Attribute

</title>

</head>

<body>

<font size="6" face="verdana" color="green">

GeeksforGeeks!

</font>

<br>

<font size="6" face="arial" color="#008000">

GeeksforGeeks!

</font>

<br>

<font size="6" color="rgb(128, 128, 0)">

GeeksforGeeks!

</font>

</body>

HTML <font> face Attribute


The HTML <font> face Attribute is used to specify the font


family of the text inside <font> element. Using the <font> tag for
styling is outdated. Modern web design recommends using CSS
instead of<font> tag.

Syntax:
<font face="font_family">
Attribute Values:
It contains a single value font_family which is used to specify the font
family. Several font family can be used by separating comma.
Example: The implementation of the font face attribute

<!DOCTYPE html>

<html>

<head>

<title>

HTML font face Attribute

</title>

</head>

<body>

<font size="6" face="verdana">

GeeksforGeeks!

</font>

<br>

<font size="6" face="arial">

GeeksforGeeks!

</font>

<br>

<font size="6">

GeeksforGeeks!

</font>

</body>

</html>

Output:
HTML align Attribute in HTML is used to specify the alignment of the text
content of The Element. This attribute is used in all elements. The Align
attribute can also be set using the CSS property “text-align: ” or
in <img> “vertical-align: “. For horizontal alignment, use align with values
like “left,” “center,” or “right” within appropriate tags.
Syntax:
<element_name align="left | right | center | justify">

Attribute Values:
Attribute Values Description

left It sets the text left-align.

right It sets the text right-align.

center It sets the text center-align.

It stretches the text of a paragraph to


justify set the width of all lines equal.

<!DOCTYPE html>
<html>

<head>
<title>
HTML p align Attribute
</title>
</head>

<body>
<h1>GeeksforGeeks</h1>

<h2>HTML p align Attribute</h2>

<p align="left">
Left align content
</p>

<p align="center">
center align content
</p>

<p align="right">
Right align content
</p>

</body>

</html>
Output:

Hyperlink

HTML provides a feature called Links that allows users to navigate from page to page by clicking
on words, phrases and images. These HTML links are called hyperlinks. A hyperlink is a text or an
image and when we click on, we jump to another document. A webpage can contain various
links that takes us directly to other pages and even specific parts of a given page. Thus we can
create hyperlinks using text or images available on a webpage.
Hyperlinks allow visitors to navigate between Web sites.

Hyperlinks are used for linking:

• within the same page. These are called as Named tags.


• To another page in a web site called Relative Link or local link.
• To another page outside a web site and these links are called Absolute link or remote
link. – Email Link

Hyper Links are normally displayed as highlighted and underlined text. When you click on it, it
takes you to another page on the web. The <a> tag is used for creating hyperlinks. The syntax is
given as following,

<a command=“target”>highlighted text</a>


Hyperlinks are created with an "href" tag (hyperlink reference). In its simplest form the tag looks
like this. there are two distinct types of hyperlink called "absolute" and "relative".

• Absolute Link: These are links to another page outside of our web site. These links specify
the entire URL of the page:
<a HREF=http://www.annauniv.edu/>AU Web Site</a>

The output of the above code is,

AU Web Site
• Relative Link: These are links to another page in our site so we do not have to specify the
entire URL.
<a HREF=“index.html”>Go back to main page</a>

The output of the above code is,

Go back to main page


• Targeted Links : A tag includes a target attribute. If we specify target=“_blank”, a new
browser window will be opened.
<a HREF=http://www.annauniv.edu target="_blank”> AU</a>

• Email Link: We can mail to someone at:


<a href=“mailto:ex@au.edu”>Send email to e.x.</a>

HTML TABLES
HTML tables allow web developers to arrange data like text, images, links, other tables, etc. into
rows and columns of cells. Tables can also be used for organizing the layout of the web page
itself. These HTML tables can be created using the <table> tag in which the <tr> tag is used to
create table rows and <td> tag is used to create data cells. In simple, we can understand that the
HTML Table Element <table> represents data in two dimensions or more.

The <TABLE></TABLE> element has four sub-elements:

1. Table Row<TR></TR>.

2. Table Header <THEAD></THEAD> and Table Footer <TFOOT></TFOOT>.

3. Table Data <TD></TD>.

4. Caption <CAPTION></CAPTION>.
The Table rows can be grouped into a head, foot, and body sections using the THEAD, TFOOT
and TBODY elements, respectively. Head section also called the header cell is defined with a
<thead> element that contains the header information such as column names.

The <thead> tag must be used as a child of a <table> element, after any <caption>, and
<colgroup> elements, and before any <tbody>, <tfoot>, and <tr> elements.

The Foot section is defined with a <tfoot> element are the footer rows that appears at the
bottom of the table. The purpose of this <thead> and <tfoot> elements are that when long tables
are printed, the head and foot information may be repeated on each page that contains table
data.

The Table body is defined with a <tbody> element. Otherwise they are called as data cells defined
with <td> element.

We can use at most one <thead> or <tfoot> but we can use multiple <tbody> elements in a table.

The caption tag is the descriptive title and used to provide a short description about the table's
purpose or it can be used to name the table.

Tables are divided into table rows with the <tr> tag. Table rows are divided into table data with
the <td> tag. A table row can also be divided into table headings with the <th> tag. By default, all
major browsers display table headings as bold and cantered:

TABLES ATTRIBUTES
• BGColor: Some browsers support background colors in a table.
• Width: We can specify the table width as an absolute number of pixels or a percentage of
the document width. We can set the width for the table cells as well.
• Border: We can choose a numerical value for the border width, which specifies the
border in pixels.
• CellSpacing: Cell Spacing represents the space between cells and is specified in pixels.
• CellPadding: Cell Padding is the space between the cell border and the cell contents and
is specified in pixels.
• Align: Tables can have left, right, or center alignment.
• Background: Background Image, will be titled in IE3.0 and above. BorderColor,
BorderColorDark.

Example1: HTML Table: table1.html

<table border = "1" width = "40%" summary = "This table provides information about the price
of fruit">
<caption><strong>Price of Fruit</strong></caption>

<thead>

<tr>

<th>Fruit</th>

<th>Price</th>

</tr>

</thead>

<tfoot>

<tr>

<th>Total</th>
<th>$3.75</th>

</tr>

</tfoot>

<tbody>

<tr>

<td>Apple</td>
<td>$0.25</td>

</tr>

<tr>

<td>Orange</td>
<td>$0.50</td>

</tr>

<tr>

<td>Banana</td>
<td>$1.00</td>

</tr>
<tr>

<td>Pineapple</td>
<td>$2.00</td>

</tr>
</tbody>

</table>

Table cell spacing represents the space between cells. cellpadding is the space between the cell
border and the cell contents.

Cells can span multiple columns and multiple rows with the colspan and rowspan attributes. In
order to make a cell span more than one column we can use the colspan attribute and to make a
cell span more than one row we can use the rowspan attribute.

Examples

<th colspan="2">Name</th>

<table cellspacing="0" cellpadding="10">

<td rowspan="2">Fishing</td>

FRAMES AND FRAMESETS


HTML frames are useful when we need to divide the browser window into multiple sections and
to load a separate HTML document in each section. These collections of HTML frames in the
browser window are called as a frameset. The browser window is divided into frames as rows
and columns in the same way as the tables are organized as rows and columns.
HTML frames are used to display documents in multiple views, which may be in independent
windows or in sub windows. Multiple views on a HTML frame offer web designers a way to keep
certain information visible, while other views are scrolled or replaced. Frameset provides us a
promising solution when the data in some parts of a page needs to be changing while the other
remains static.

• A frameset partitions a web browser window so that multiple web documents can be
displayed simultaneously.

• We divide a document into frames using the <frameset> element


• Only the <frame> element and other <frameset> elements are the items that can be
placed inside a <frameset> element

• The <frameset> element replaces the <body> element that is used in non-frame
documents.

• Frames are created in horizontal rows and vertical columns.


frame set tag
The <frameset> tag is the container tag that requires a closing </frameset> tag. This tag
divides the browser window into rectangular subspaces called frames. The <frameset>
element contains one or more <frameset> or frame elements, along with an optional
<noframes> element to provide alternate content for browsers that do not support
frames or have frames disabled. This tag also determines the frame types as Column
frames and Row frames. Based on the sizes specified for the rows and cols attributes the
sub frames are defined with the respective dimensions in the frame set. The rows and
cols attribute takes the dimension as comma-separated list of length that is specified in
pixels, or as a percentage, or as a relative length. The row dimension splits the frames
from top to bottom in height and the cols attribute gives the width of each column from
left to right.
This frameset was created by the following code:

Columns Example
The Figure 6.3 shows how the frames are divided into columns by specifying the cols attribute.

<frameset cols="35%,65%"> </frameset>


Rows Example
The Figure 6.4 shows how the frames are divided into rows by specifying the rows attribute.
This frameset was created by the following code:

<frameset rows="180,*"> </frameset>

FRAME ATTRIBUTES
Let us now consider the following example to explain about the frame attributes.
<frameset cols="140,*">
<frame name="navF" src="navigation.html">
<frame name="mainF" src="intro.html">
</frameset>
The name attribute uniquely identifies the frame. It is used as the target in an anchor (<a>)
element. The src attribute specifies the web page to be placed in the frame initially and it may
subsequently be overwritten also.
The scrolling attribute ("auto", "yes", "no") specifies whether the frame is to have scroll bars.
The frameborder attribute ("0", "1") specifies whether the frame is to have a border.

You might also like