Scribd
Upload
47 views151 pages

Understanding HTML Basics and Structure

The document provides an overview of HTML, its structure, and basic terminology related to web development. It covers HTML tags, types of lists, and character formatting, along with examples and syntax for creating web pages. Additionally, it discusses the history of HTML and the evolution of its versions.

Uploaded by

dhruvupadhyay1208
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
47 views151 pages

Understanding HTML Basics and Structure

The document provides an overview of HTML, its structure, and basic terminology related to web development. It covers HTML tags, types of lists, and character formatting, along with examples and syntax for creating web pages. Additionally, it discusses the history of HTML and the evolution of its versions.

Uploaded by

dhruvupadhyay1208
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd

HTML

Chapter Number 4
• Hypertext Markup Language is the standard markup
language for creating web pages and web applications.
• It is a versatile markup language that is used to publish
information as a Web page.
• This markup tells a web browser how to display the text,
images and other forms of multimedia on a webpage.
• It Provides tags that help in creating Web pages.
• HTML elements are represented by tags.
• HTML is not case sensitive language.
• Allows the creation of hyperlinks to connect the Web
pages.
A markup language:
Enables you to create attractive and interactive
websites.
Provides a way to describe the structure of a Web
page.
Specifies the code in the form of tags for defining,
processing, and presenting the
text on Web pages.
Hypertext is text which is not constrained to be
linear
Hypertext is text which contains links to other
texts.
Basic Terminology

The Internet:
Makes the Web pages and websites accessible to the users.
Enables the organizations to share and access information.
Is an interconnected network of computers across the globe.
The World Wide Web (WWW):
Is a collection of resources on varied topics that can be accessed
through the Internet.
Is a collection of Web pages that are scattered but interlinked.
 URL – Uniform Resource Locator.
 Browser – A software program which is used to show web
[Link] Google chrome,internet explorer mozilla
firefox etc.
……..
• A website (also written as web site) is a collection of web
pages.
• A web page: A document which can be displayed to a user
in a web browser . It is a specific collection of information
provided by a website .
• Static web page:
 Prebuilt content is same every time the page is loaded.
 It uses the HTML code for developing a website.
• Dynamic web page:
 Content is generated quickly and changes regularly .
 It uses the server side languages such as PHP,SERVLET,
JSP, and [Link] etc. for developing a website.
History of HTML
• Developed by Tim Berners-Lee
Version Year
HTML 1991
HTML+ 1993
HTML 2.0 1995
HTML 3.2 1997
HTML 4.01 1999
XHTML 2000
HTML5 2012
HTML 5.1 2016
HTML 5.2 2017
HTML 5.3(DRAFT VERSION)
• The HTML Tag
• The HEAD Tag
• The TITLE Tag
• The BODY Tag

• BUT What is TAG?


Basic Terminology
• Tag
Tags are enclosed within angular< >brackets.
<Head>, <HTML>, <Body> etc. are tags.

• Element

3. Content between the tags


What are HTML tags?

• HTML tags are used to mark-up HTML elements


• HTML tags are surrounded by the two characters
< and >
• The surrounding characters are called angle
brackets
• HTML tags normally come in pairs like and
• The first tag in a pair is the start tag, the second
tag is the end tag
• The text between the start and end tags is the
element content
• Attributes:

<font color=“green”>
HTML Page Structure
Below is a visualization of an HTML
page structure:
HTML Doc Structure
<HTML

<HEAD>

<TITLE>
</TITLE>

</HEAD>

<BODY>

</BODY>

</HTML>
Creating an HTML Document

HTML is used to create Web pages using


software applications known as editors.
HTML editors are broadly classified into the
following categories:
Text editor
Graphic editor
• Open Notepad
• Type the required codes
• Save the file with .html or .htm extension
Viewing HTML Document Browser
• Open the browser window
• Go to File
• Click Open
• Select the location where the file is placed
• Select the file
• Click Open
The HTML page will open up
*There is no need to be connected to the internet*
First Html Program

[Link]
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>My First Heading</h1>
<p>My First Paragraph.</p>
</body>
</html>
Output of program
HTML Color Coding Methods

• There are following three different methods to


set colors in your web page −
• Color names − You can specify color names
directly like green, blue or red.
• Hex codes − A six-digit code representing the
amount of red, green, and blue that makes up
the color.
• Color decimal or percentage values − This
value is specified using the rgb( ) property
Color names
Hex Color code(00-255)
RGB color number
RGB color format & calculation
The <BODY> tag:
• The <body> tag defines the document's body.
• The <body> tag in HTML is used to define the
main content present inside an HTML page
• The <body> element contains all the contents
of an HTML document, such as headings,
paragraphs, images, hyperlinks, tables, lists,
etc.
• The <body> tag is the last child of <html> tag.
Syntax:
<body> Body Contents... </body>
<Body >tag attributes:

• Attributes: There are many attributes in <body> tag


which are depreciated from HTML are listed below:
• background: It contains the URL of background image.
It is used to set the background image.
• bgcolor: It is used to specify the background color of an
image.
• text: It specify the color of text in a document.
• alink: It is used to specify the color of active link.
• link: It is used to specify the color of visited links.
• vlink: It specify the color of visited links.
Attributes of body tags:

background bgcolor text

alink Vlink

link
HTML tags are of two types:

• Container Tag: (or Pair Tag) The first tag in a


pair is the start tag, the second tag is the end
tag. The end tag is written like the start tag,
with a forward slash before the tag name.
Start and end tags are also called opening tags
and closing tags like <b> and </b>.
• Empty Tag: Only opening tag is used. For
example, <br> or <hr>.
Empty Elements
• Empty elements are also called as void
elements.
• Ways of writing empty elements:
– Just specify the start tag
• <BR>
– No content inside start and end tag
• <BR> </BR>
– A self-closing tag
• <BR/>
• They have starting as well as • They have only starting tag
closing tags
• <BR>
• <HTML>……….</HTML> • <HR>
• <TITLE>……….</TITLE> • <IMG>
• <B>……….</B>
List in HTML

What is a list?
A list is a record of short pieces of information,
such as people’s names, usually written or
printed with a single thing on each line and
ordered in a way that makes a particular thing
easy to find.
Types of List in HTML
There are four list types in HTML
• Ordered List
• Unordered list
• Definition List
• Nested List
Ordered List

• The ordered list is a sequence of items that have a


specific order.
OR
• An ordered list is a list of item in which each item is
marked with a number or letter.
• An ordered list is also known as a “numbered list”
• <ol> tag is used to create or start an ordered list. It
stands for an ordered list.
• <li> tag used with each item in the list. It stands for the
list item.
• </ol> tag is used to close an ordered list.
Attributes of ordered list:

• Type:
 It specifies the numbering scheme for the list.
 The default number scheme is numbers 1,2,3…..
 Other possible schemes are:
1 (numbers)for 1,2,3……..
A (uppercase letters)for A,B,C…….
a (lowercase letters)for a,b,c……..
l (uppercase Roman numerals)for l,ll,lll………
i (lowercase Roman numerals)for i,ii,iii……..
• Start:
It specifies the starting number of the list.
Examples
Type attributes:
start attribute:
• The start attribute is used with <ol> tag to specify
from where to start the list items.
• <ol type=”1″ start=”5″> : It will show numeric values
starting with “5”.
• <ol type=”A” start=”5″> : It will show capital
alphabets starting with “E”.
• <ol type=”a” start=”5″> : It will show lower case
alphabets starting with “e”.
• <ol type=”I” start=”5″> : It will show Roman upper
case value starting with “V”.
• <ol type=”i” start=”5″> : It will show Roman lower
case value starting with “v”.
Example with start atrribute:
• <ol type=“i” start=“5”>
• <li>HTML</li>
• <li>Java</li>
• <li>JavaScript</li>
• <li>SQL</li>
• </ol>
• Output:
[Link]
[Link]
[Link]
[Link]
Unordered List in HTML
• An unordered list is a list of items in which
each item is marked with a symbol.
• An unordered list is also known as an
“unnumbered list”.
• <ul> tag is used to create an unordered list. It
stands for an unordered list.
• <li> tag is used with each item in the list.
• </ul> tag is used to close an unordered list.
type Attributes of <ul> tag

• type ="disc“:
This is the default style. In this style, the list
items are marked with bullets.
• type= "circle“:
In this style, the list items are marked with circles.
• type ="square“:
In this style, the list items are marked with squares.
• type ="none“:
In this style, the list items are not marked .
Example of default<ul> or type=“disc”:
Type=“circle” example:
Type=“square” example:
Home work
Revision:
Definition List in HTML

• definition list is not a list of items.


• A definition list is essentially a list of definitions.
• a definition list's items come in two parts:
the definition term and the definition description.
• <dl> tag is used to create a definition list. It stands for
the definition list.
• <dt> tag is used with each term in the definition list. It
stands for definition term.
• <dd> tag is used with each description of the term. It
stands for definition description.
Example 1 of<DL>
Example2
Home work
Revision
Exercise 1

Excercise 2
Home Work
Nested List (Lists within lists)

• A list within a list is known as nested lists.


• A list is display in a list is called the nested list.
• A nested list is a combination of different
types of lists.
• For example, an ordered list can be nested
within an unordered list.
• If we create a list into a list than we called this
is a nested list.
Nested list example:
Example2
Home work
Home work 2
Home work 3
Revision
Exercise 1 Exercise 2
H.W.
Exercise3 Exercise 4
HTML Comments
• Comments are some text or code written in
your code to give an explanation about the
code.
• Comments of any code make code easy to
understand and increase readability of code.
• Comments are also part of the code, which
gives an explanation of the code.
• HTML comments are not displayed in the
browser, but they can help document your
HTML source code.
• Syntax :
<!– This is Comment -->
Example of Comments
• <!-- This is a comment -->
<p>This is a paragraph.</p>
<!-- Remember to add more information here
-->
• Note:There are no sapce in the start-of
comments string
• Example: < !-- This is a not valid comment -->

sapce
Character formatting

Character formatting

Physical style Logical style


Character Formatting
•Character formatting do with applying formatting properties to
enhance the appearance of individual text characters.
•Character formats can be applied to a single character, word, sentence
or a line of text, without such formatting affecting the entire current
paragraph.
• Physical style • Logical style
• Bold
• Italic • Emphasis
• Underline • Code
• Subscript • Strong
• superscript • Variable
Bold tag<B>
• Bold tag is represented by <b> tag.
• This tag is used to display the written text in
bold format.
• Syntax:
<b>...........</b>
• Example:
<b>Don’t </b> touch Electric pole
• Output:
Don't touch Electric pole
Italic tag<I>
• Italic tag is represented by <I> tag.
• This tag is used to display the written text in
Italic format.
• Syntax:
<I>...........</I>
• Example:
<I>Don’t </I> touch Electric pole
• Output:
Don't touch The electric pole
Underline tag<u>:
• Underline tag is represented by <u> tag.
• This tag is used to Underline the written text.
• Syntax:
<u>...........</u>
• Example:

<u>Don’t </u> touch Electric pole


• Output:
Don't touch The electric pole
Subscript tag<sub>:
• Subscript tag is represented by <sub> tag.
• This tag is used to display the written text in
subscript form.
• This tag is useful in representaion of
mathematical or chemical equations
• Syntax:
<sub>...........</sub>
• Example:
H<sub>2 </sub>SO<sub>4</sub>
• Output:
H2SO4
Superscript tag<sup>:
• Superscript tag is represented by <sup> tag.
• This tag is used to display the written text in
superscript form.
• This tag is useful in representaion of
mathematical or chemical equations
• Syntax:
<sup>...........</sup>
• Example:
E=mc<sup>2</sup>
• Output:
E=mc2
 Small tag<small>:
• Small tag is represented by <small> tag.
• This tag is used to display the written text in one
smaller than the normal text size.
• HTML uses this tag to decrease the size of the
text.
• This tag has same effect as <font size=“-1”>
• Syntax:

<small>.........</small>
<html> This is Plain Text.
<head> This is small plain text
<title>small</title>
</head>
<body>
This is Plain Text.<br>
<small>This is small plain
text</small>
</body>
</html>
Big tag<big>:
• big tag is represented by <big> tag.
• This tag is used to display the written text in one
larger than the normal text size.
• HTML uses this tag to increase the size of the
text.
• This tag has same effect as <font size=“+1”>

• Syntax:
<big>.........</big>
<html> This is Plain Text.
<head> This is big plain text
<title>big</title>
</head>
<body>
This is Plain Text.<br>
<big> This is big plain text</big>
</body>
</html>
Strike tag<strike> or <s>:
• Strike tag is represented by <strike> tag.
• This tag is used to display the written text with line
drawn through middle of the text.
• Syntax:
<strike>.........</strike>
Example:

<p><strike>This is not a valid paragraph</strike></p>


<p>This is a valid paragraph</p>

• Output:
This is not a valid paragraph
This is a valid paragraph
 marquee tag<big>:
• marquee tag is represented by <marquee> tag.
• This tag is used to scroll a image or text horizontally or
vertically..
• In simple words, we can say that it scrolls the image or text
up, down, left or right automatically.
• This is used to scroll the current news or position of different
companies in stock market.
• By default it scroll from right to left.

• Syntax:
<marquee>………</marquee>
Attributes Marquee tag.
1. Direction:
defines direction for scrolling content. It may be left,
right, up and down.
2. Behavior:
it facilitates user to set the behavior of the marquee
to one of the three different types: scroll, slide and
alternate.
3. Height:
defines height of marquee in pixels or %.
4. width:
defines width of marquee in pixels or %.
<html>
<head>
<title>big</title>
</head>
<body>
<marquee>
This sentence scroll from right to
left.
</marquee>
<marquee direction="down">
This sentence scroll from top to bottom.
</marquee>
</body>
</html>
Example 2

<html>
<head>
<title>big</title>
</head>
<body bgcolor="magenta">
<marquee direction="right">
<img src="[Link]" alt="Home">
</marquee>
</body>
</html>
output
Hr tag<hr>
• The <hr> tag in HTML stands for horizontal
rule .
• <hr> tag is used for creating a horizontal line
• The <hr> tag is an empty tag and it does not
require an end tag.
• A web page can be divided into seperate
sections by using <hr>
• This tag is mostly used for decorative
purposes.
• Syntax: <hr> or <hr/>
<html>
<head>
<title>big</title>
This is First Line
</head>
<body>
This is Second Line
This is Third Line
This is First Line <hr>
This is Second Line
<hr size=“10” width=“100%” color=“red”>
This is Third Line.

</body>
</html>
br tag<br>
• The <br> tag in HTML stands for line break or
break.
• The <br> tag in HTML is used to give the single
line break .
• It is use to break the continue line.
• The <br> tag is an empty tag and it does not
require an end tag.
• If you place the <br> tag in the HTML code, then
it works the same as pressing the enter key in a
word processor.

• Syntax:
<br> or <br/>
Example
Output:
<html>
<head>
Jai
<title>big</title>
Shree
</head>
Ram
<body>
Jai<br>Shree<br>Ram
</body>
</html>
 Paragraph tag<p>
• paragraph tag is represented by <p> tag.
• <P> tag is used to define a paragraph in a webpage.
• a browser itself add an extra blank line before and after
a paragraph.
• paragraph always starts on a new line.
• </p> is optional
• Atrributes : align
• Value:
• left,right,center
• Syntax:
<p align=“value”>………</p>
Example: Output:

<html>
Here is a first paragraph of text.
<head>
<title>Paragraph Example Here is a second paragraph of text.
</title>
</head> Here is a third paragraph of text.
<body>
<p>Here is a first paragraph of text.</p>
<p>Here is a second paragraph of text.</p>
<p>Here is a third paragraph of text.</p>
</body>
</html>
Heading tag <Hn>:
• heading tag can be used to defined as a title or a
subtitle which you want to display on the webpage.
• There are six levels of headings,from <h1> to <h6>.
• <h1> defines largest heading and
<h6> defines smallest heading.
• The <h1> heading is the first heading in the
document.
• The <h1> heading is usually a large bolded font.
• Syntax: <h1>...</h1>
to
<h6>...</h6>
atrributes
Align(default is left)
• Values:
• Left,right,center, justify
Syntax:
<h1 align = left|center|right|justify>Heading</h1>
“Html automatically adds extra blank line before and after a
heading”
Example: Output:

<html>
<head> Heading level 1
<title>Paragraph Example Heading level 2
</title> Heading level 3
</head> Heading level 4
<body> Heading level 5
<h1>Heading level 1</h1> Heading level 6

<h2>Heading level 2</h2>


<h3>Heading level 3</h3>
<h4>Heading level 4</h4>
<h5>Heading level 5</h5>
<h6>Heading level 6</h6>
</body>
</html>
Preformatted tag<pre>
• The <pre> tag defines preformatted text
• Text in a <pre> element is displayed in a fixed-
width font, and the text preserves both spaces
and line breaks.
• The text will be displayed exactly as written in
the HTML source code.
• The <pre> tag requires a starting and end tag.
• Example:
<pre> ……….. <pre/>
Example:(without pre tag) Output:

<html> #include #include void main() { clrscr(); cout<<"Hello world"; getch(); }


<head>
<title>Paragraph Example
</title>
</head>
<body>
#include<iostream.h>
#include<conio.h>
void main()
{
clrscr();
cout<<“Hello world”<<endl;
getch();
}
</body>
</html>
Example:(with pre tag) Output:

<html>
<head> #include "iostream.h"
<title>Paragraph Example #include "conio.h"
</title> void main()
</head> {
<body> clrscr();
<pre> cout<<"Hello world";
#include ”iostream.h” getch();
#include ” conio.h” }
void main()
{
clrscr();
cout<<“Hello world”<<endl;
getch();
}
</pre>
</body>
</html>
address tag <address>
• The <address> tag defines the contact
information for the author/owner of a
document or an article,signature etc.
• Browsers traditionally render the text found
within the <address> tag as italicized text.
• The <address> element often appears at the
beginning(top) or end(bottom) of a document.
• It cannot contain p,blockquote,form etc.
• Example:
<address> …. </address>
Example: Output:

<html> You can contact us at:


<head> [Link]
123 Sawarkar Nagr St. GVM High School
<title>Paragraph Example City:Thane, State:Maharashtra
</title> Pin code:400606.

</head>
<body>
<address> You can contact us at:<br>
[Link]<br> 123 Sawarkar Nagr
St. GVM High School<br>
City:Thane, State:Maharashtra
<br>Pin code:400606.
</address>
</body>
</html>
 font tag <font>
• <font> tag is used to define the font style for the text
contained within it.
• It defines the font size, color, and face or the text in an HTML
document.
• This tag has been deprecated in HTML 4.01. It has been
removed in HTML5 and shouldn't be used anymore
• Atrributes of <font> tag:
• Color
• Face
• size
Syntax: <font size="number" color="color"
face="font-family, ..."> ... </font>
Example: Output:

<html> Your formatted text goes here


<head>
<title>Paragraph Example
</title>
</head>
<body>
<p>
<font color="red" face=“Times New Roman" size=“20">
Your formatted text goes here
</font>
</p>
</body>
</html>
What to Use Instead?

• <p style="color:red">This is a paragraph.</p>

• <p style="font-family:verdana">This is a paragraph.</p>

• <p style="font-size:30px">This is a paragraph.</p>


The Logical style tags
• In HTML, the logical style tags specify that the
enclosed text has a specific meaning, context,
or usage.
• The browser change the appearance of the
text depending upon the meaning of the tags.
• Logical style tags are preferred because they
let the browser handle the look and feel of the
logical tag.
• It is also called “idiomatic style tag”.
Logical style tag
• Following are the Logical style tag:
• <EM>
• <STRONG>
• <VAR>
• <CODE>
<EM> tag EMPHASIZE TEXT Output:

<html> Your formatted text goes here


<head>
<title>Paragraph Example
</title>
</head>
<body>
<p>
<font color="red" face=“Times New Roman" size=“20">
Your formatted text goes here
</font>
</p>
</body>
</html>
emphasis tag<em>:
• The <em> tag is used to emphasize the text content.
• It is a logical tag and so describes the meaning of the text to be
displayed rather than how the text is to be displayed .
• it is typically displayed in [Link] comapring with italic is
meaningless.
• Text to speech browsers gives spoken emphasis to text within an
emphasis element

• Syntax:
<em>…………….…</em>
• Example:
<p> This is an <em> important point </em> to consider.</p>
<p>you <em> must <em> handover the money to them.
• output:
This is an important point to consider.
you must handover the money to them
Strong tag<strong>:
• <STRONG> is also a logical tag
• It is used to strongly emphasize text.
• <STRONG> is distinct from <EM>.
• In most browsers, STRONG is identical to boldface.
• Syntax:
<strong>…………….…</strong>
• Example:
• Do <strong> NOT</strong>, be late again!
• output:
• Do NOT, be late again!
Difference between strong and bold
tag
• Strong element is used to provide emphasis
aurally for visually impaired or illitrate people
who surf the web page using screen
[Link] bold element is used to provide
emphasis visually.
 variable tag<var>:
• The <var> tag is used to defines a variable in
programming or in a mathematical expression
• The content inside is typically displayed in italic.
• Syntax:

Example: <var>………</var>
<p> Einstein's equation: <var> E </var> = <var> m </var>
<var> c </var> <sup> 2 </sup> </p>
Output:
• Einstein's equation:
E=mc2
 code tag<code>:
• The <code> tag is used to define a piece of computer code.
• The CODE tag displays text in the browser's default fixed-
width font(monospace).
Syntax:
<code>………</code>
Example:
<p>
To declare an integer in C++:<br>
<code> int x = 10; </code>
</p>
Output:
To declare an integer in C++:
int x=10;
Image formats:
• JPEG
• GIF
• PNG
• BMP
• JPEG (.jpg, .jpeg)
Joint Photographic Experts Group is a loss-prone (lossy) format in which data is lost to reduce size
of image. Due to compression, some data is lost but that loss is very less. It is a very common
format and are good for digital cameras, nonprofessional prints, E-Mail, Powerpoint etc., making it
ideal for web use.
• GIF (.gif)
GIF or Graphics Interchange Format files are used for web [Link] can be animated and are
limited to only 256 colors, can allow for transparency. GIF files are typically small is size and are
portable.
• PNG (.png)
PNG or Portable Network Graphics files are a lossless image format. It was designed to replace gif
format as gif supported 256 colors unlike PNG which support 16 million colors.
• Bitmap (.bmp)
Bit Map Image file is developed by Microsoft for windows. It is same as TIFF due lossless, no
compression property. Due to BMP being a proprietary format, it is generally recommended to use
TIFF files.
 image tag<image>:

• image tag is represented by <image> tag.


• The HTML <img> tag is used to embed an image in a web page
• Images are not technically inserted into a web page; images are linked to
web pages
• The <img> tag is empty, it contains attributes only, and does not have a
closing tag.
• The <img> tag has two required attributes:
• src - Specifies the path to the image
• alt - Specifies an alternate text for the image

• Syntax:
<img src="url" alt="alternatetext">
Other attributes
• border: Specifies the width of the border around
the image.
• height: Specifies the height of the image
• width: Specifies the width of the image
• align: Specifies the alignment of an
image(left,right,top,middle,bottom)
• hspace: Specifies the amount of whitespace on
left and right side of an image.
• vspace: Specifies the amount of whitespace on
top and bottom side of the image.

• The value of the alt attribute should describe
the image:
• If a browser cannot find an image, it will
display the value of the alt attribute
example
Example2
Different Image path:
• <img src="[Link]">:
The "[Link]" file is located in the same folder
as the current page
• <img src=“D:/CS1/HTML/[Link]">:
The "[Link]" file is located in the diferent
folder.
• <img src=“[Link] [Link] ">:
The "[Link]" file is located in internet
location.
Hyperlink (link)in Html
• Hyperlink:It is pointer to another documents
• When we click on a link it jump to another
document.
• When we move the mouse over a link, the
mouse arrow will turn into a little hand.
Anchor tag<a>

• <a> tag defines a hyperlink, which is used to


link from one page to another.
• The main attribute of the <a> element is the
href attribute, which specify the link's
destination

• Note: A link does not have to be text. A link


can be an image or any other HTML element!
Link……..
• the links will appear by default in all browsers:
• An unvisited link is underlined and blue.
• A visited link is underlined and purple.
• An active link is underlined and red.
• Syntax :
• <a> tag defines a hyperlink. It has the following syntax:
<a href="url ">link text</a>
• The link text is the part that will be visible to the
reader.
• Clicking on the link text, will send the reader to the
specified URL address
URL can be(absolute or realtive path)
• absolute URL (a full web address) in
the href attribute.
• A local link (a link to a page within the same
website) is specified with a relative
URL (without the "[Link] part):
• Example:
• <h2>Absolute URLs</h2>
<p><a href="[Link]
<p><a href="[Link]
Types of Hyperlink
1. Link to page on the World Wide web
2. Link to an image by image as a link
3. Link to documents located in different
directory
4. Link to mail(mailto)
Link to page on the World Wide web
examples
 Link to mail(mailto)
<p>
<a href="[Link] email</a>
</p>

 Link to documents located in different directory


<p>
<a href=“D:/HTML/[Link]">Send email</a>
</p>

 Link to an image by image as a link


<p>
<a href=“[Link]">
<img src=“[Link]” alt=“no image”>
</a>
</p>
Table in HTML
• Tables
• Tables are very important to show data in the form of rows
and columns.
• Tables make data more readable and easy to understand.
• A table consists of rows, columns and cells.
• The following basic tags to create a table in an HTML web
page:
• <TABLE> tag
• <TR> tag
• <TD> tag
• <TH> tag
Table in HTML
• The TABLE element defines a table, and
the TR and TD elements are used to define
rows and cells.
• The TABLE tag <table> …..</table> Defines a
table.
• The TR tag <tr> …………</tr> Defines a
row in a table.
• The TD tag <td> ……..</td> Defines a
cell in a table.
Structure of table
<TR> Tag

• <TR> Tag
• TR stands for TABLE ROW. As the name shows, <TR> tag is used to create a
row in a table.
• A row is started by <TR> tag and is closed by </TR> tag.
• There are one or more <TD> or <TH> tags between <TR> and </TR> tags to
create cells.
Attributes.
• align(Left,center and right)
Example 1:
• <TR>
<TD>1</TD>
<TD>Ahmad</TD>
</TR>
Example 1
Caption tag<caption>
• The CAPTION element is placed immediately
after the TABLE start tag.
• The CAPTION element defines a caption for a
table.i.e. The tag is used to give heading to the
whole table.
• This tag defines caption for title of table.
• The caption text is displayed at the top of the
table.
• <caption>table
Syntax: caption</caption>
Example
<table border=“1”>
<caption>Dogs age</caption>
<tr>
<th>Dog</th>
<th>Age</th>
</tr>
<table>.
• The align attribute of the CAPTION
element specifies the alignment of the table
caption.
• <caption align="left">table caption</caption>
Caption attribute values
Program1
Program2
<TD> Tag
• <TD> Tag:
• <TD> tag is used to create a cell.
• TD stands for TABLE DATA. The number of cells in a row will specify number of columns in a table.
• The data to be shown in a cell is placed between <TD> and </TD> tags.
• A row is started by <TR> tag and is closed by </TR> tag.
• There are one or more <TD> or <TH> tags between <TR> and </TR> tags to create cells.
• By default data the text in cell is aligned left.

• Attribute name
• Rowspan
• Colspan
• Background
• Bgcolor
• align
Example :
• <TR>
<TD> 1 </TD>
<TD> Ahmad </TD>
</TR>
<TH> Tag

 <TH> Tag:
• <TH> tag is used to create a header row in a table.
• TH stands for TABLE [Link] <TH> tag makes one header cell.
• The data to be shown in header cell is placed between <TH> and </TH>
tags.
• By default text in the cell is bold and centered.
• Attributes:
• rowspan
• colspan
Example :
• <TR>
<TH> Roll Number </TH>
<TH> Name </TH>
<Th >Marks </TH>
</TR>
rowspan attribute
• Rowspan attribute can merge two more
rows(vertically) in a table.
• If you want to merge 2 or more rows into a single
row, use rowspan.

• Default value of rowspan is 1, and minimum


assigned value of rowspan is 2.
• This attribute is used with TH or TD tag
• Syntax:
• <td rowspan=“value”> table data</td>
• The value is numeric(2,3,4……)
Colspan attribute
• Colspan attribute is used to merge two or more
columns(horizontally). in one. Thus we can have rows
with different columns.
• If you want to merge 2 or more columns into a single
column, use colspan attribute.
• Minimum value for colspan is 2 and default value is 1.
• This attribute is used with TH or TD tag
• Syntax:
• <td colspan=“value”> table data</td>
• The value is numeric(2,3,4……)
example
Table Attributes

• Align
• Bgcolor
• Border
• Cellpadding
• Cellspacing
• Height
• Width
ALIGN Attribute

• This attributes specifies the horizontal


placement of the table.
• By default table is align is LEFT
• Values(LEFT,RIGHT,CENTER)
• Syntax:
• <table align=“center”>………..</table>
Example
Bgcolor attributes

• This attributes is used to set the background


of the table.
• This color can be overridden by a bgcolor tag
of TH,TR,TD.
• syntax
• <table bgcolor=“colorname”>…..</table>
• Example:
• <table bgcolor=“colorname”>…..</table>
Border atributes:

• This attribute indicates thickness of the


border around the table.
• Bydefault table has no border.
• Syntax
• <table border=“value”>…..</table>
• The value is an integer(0,1,2,3….)
example
Background attributes
• The background attribute of the TABLE, TR,
and TD (TH) elements specifies the
background image of the table.
• <table background="[Link]"> : Applied to an
entire table.
• <tr background="[Link]"> : Applied to all
cells in a row.
• <td background="[Link]"> : Applied to one
cell.
example
cellpadding
• This attribute is used to specify the distance
between border and content of the every cell.
• Or this attribute is used to create more space
between cell border and cell data .
• Defines the space between the cell wall and
the cell content.
• By default vlaue is 1
• Syntax
• <table cellpadding=“value”>…..</table>
Example
Cellspacing

• This attribute is used to specify the space


between individuals cells in a table.
• By default value is 2.
• Syntax:
• <table cellspacing=“value”>…..</table>
• Note : we can put both cellspacing and
cellpadding atrributes together.
• <table cellspacing=“value” cellpadding=“value”>…..</table>
The cellspacing is 0

example
Height attributes
• This attributes specifies the height of the table.
• The default is the optiml height determined by
content s of each cell.
• Width attributes:
• This attributes specifies the width of the table.
• Defines the space between the cell wall and the
cell content.
• Syntax:
• <table height=“value” width=“value”>…</table>
Example width
example
Note:

By default TABLE has no Borders


By Default TABLE is flush with left margin
By default Cellspacing is 2
By default cellpadding is 1.
The default position of title is top.
By default text is th tag is bold and centered.

You might also like