Scribd
Upload
12 views35 pages

CSE 205 Lesson 2

HTML, or HyperText Markup Language, is the foundational language for creating web pages, utilizing tags to structure content. Developed by Sir Tim Berners-Lee in 1989, HTML has evolved through various versions, with HTML5 being the latest, offering enhanced features for web development. Key elements include tags for headings, paragraphs, links, and images, as well as attributes that provide additional information about these elements.

Uploaded by

sofiaonlysofia7
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
12 views35 pages

CSE 205 Lesson 2

HTML, or HyperText Markup Language, is the foundational language for creating web pages, utilizing tags to structure content. Developed by Sir Tim Berners-Lee in 1989, HTML has evolved through various versions, with HTML5 being the latest, offering enhanced features for web development. Key elements include tags for headings, paragraphs, links, and images, as well as attributes that provide additional information about these elements.

Uploaded by

sofiaonlysofia7
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
You are on page 1/ 35

HTML

What is HTML?
HTML is the language in which most websites are written. HTML is used to create
pages and make them functional.
HTML full form is HyperText Markup Language.
• Hypertext: Hypertext means that the document contains links that allow the
reader to jump to other places in the document or to another document
altogether. Apart from text, hypertext may contain HTML tables, HTML
lists, HTML forms, HTML images, etc.
• Markup language: Markup language uses tags to define elements within a
document. It contains familiar words that are human-readable
like forms, tables, links, titles, etc. Every tag in a markup language has a special
meaning of its own and performs a particular operation.
The History of HTML
• Sir Tim Berners-Lee developed HTML in late 1989, and he is considered as the
Father of HTML.
• In 1996, the World Wide Web Consortium (W3C) became the authority to
maintain the HTML specifications.
• HTML became an international standard (ISO) in 2000.

Features of HTML
There are various features of HTML, but in this HTML tutorial, we will discuss the most
important ones.
• HTML describes the structure of a webpage.
• Human-readable HTML tags represent elements in a webpage. Hence, they are
easy to remember.
• HTML is universally supported by all browsers. It is a standard markup language
for website development.
• HTML 5 can give support in enhancing the experience in gaming arena.
• It is easy to learn and implement. You can quickly learn HTML programming in a
few days and create your first web page.
• It is platform independent, i.e., it works on all the operating systems.

Advantages of Learning HTML


Originally, HTML was developed to define the structure of webpages. It had some basic
tags just for structural changes like HTML heading tag, HTML paragraph tag, HTML
list tag. However, continuous research and advancement in technology helped HTML
progress over the years. Let us see some Advantages of HTML :
• It has tags that optimize the website for search engine and boost performance.
These tags are <meta> tags, <heading> tags, <title> tag, etc.
• It is the base of designing and developing web pages. Once you understand
HTML's basics, other related technologies like Javascript, CSS, etc. become
easier to understand.

HTML Versions Timeline


HTML has evolved continuously with time. Each new version of HTML was better than the
previous one with enhanced features. The current HTML version is HTML5, equipped with
various advanced tags. Have a look at the timeline of HTML Version's evolution:

HTML Versions Year

HTML 1991

HTML 2.0 1995

HTML 3.2 1997

HTML 4.01 1999

XHTML 2000

HTML 5 2014

What are Tags and Attributes?


Tags and attributes are the basis of HTML. They work together but perform
different functions.
HTML Tags
Tags are used to mark up the start of an HTML element and they are usually
enclosed in angle brackets. An example of a tag is: <h1>.
Most tags must be opened <h1> and closed </h1> in order to function.
HTML Attributes
Attributes contain additional pieces of information. Attributes take the form of
an opening tag and additional info is placed inside.
An example of an attribute is:
<img src="mydog.jpg" alt="A photo of my dog.">
In this instance, the image source (src) and the alt text (alt) are attributes of
the <img> tag.

Basic Construction of an HTML Page


These tags should be placed underneath each other at the top of every HTML
page that you create.
<!DOCTYPE html> This tag specifies the language you will write on the page. In this
case, the language is HTML 5.
<html> This tag signals that from here on we are going to write in HTML code.
<head> This is where all the metadata for the page goes — stuff mostly meant for
search engines and other computer programs.
<body> This is where the content of the page goes.
<title> This is where we insert the page name as it will appear at the top of the browser
window or tab.
<meta> This is where information about the document is stored: character encoding,
name (page context), description.
<h1> Heading tag is used to define headings. <h1> is the largest heading, followed
by <h2>, <h3>, to <h6>.

First Program:
<!DOCTYPE html>
<html lang="en">
<HTML>
<head>
<title> Page Title </title>
</head>
<body>
<h1> This is a Heading </h1>
<p> This is a Paragraph </p>
</body>
</html>
Output

This is a Heading
This is a Paragraph
What is HTML Tag?
HTML Tags are pre-defined elements in HTML, enclosed within these < > signs. For
example: <html>, <table>, etc. All HTML tags have a particular work associated with them.
Each one has a special function and a combination of various tags forms a website. For
example, a <p> tag defines a paragraph in the website and a <table> tag displays a table.

<p> Content </p>

All HTML Tags are predefined, i.e., you cannot make HTML tags by yourself. Look at the
example below, this is an example of a paired tag. Observe that there are two tags of same
name, but the latter one has a slash / before it, it is a closing tag. Now, what is a closing
tag? Let's start with different types of tags!

Types of HTML Tags


There are two types of HTML Tags which are used by the Website Developers:

1. Paired Tags (Open and Close Tags)


2. Unpaired Tags (Singular Tag)

Paired Tags
Paired tags are a set of two tags with the same name. In each Paired tag set, one is an
opening tag, and the other one is the closing tag. The closing tag has a / slash, it means
that the tag is closed now.

It is necessary to close a paired tag; otherwise, it can result in the malfunctioning of the
website. When the content is written within paired tags, then it ensures that the effect of
those tags would be limited to only the content between them.

Look at the list of some paired tags in HTML below. Notice that each tag has a closing tag
with a slash(/) before the name of the tag.

Syntax: <tag> Content </tag>


List of some paired tags in HTML:

Open Tag Close Tag

<html> </html>

<table> </table>
Open Tag Close Tag

<form> </form>

<span> </span>

<ul> </ul>

<p> </p>

<head> </head>

<div> </div>

Unpaired Tags (Singular Tags)


Unpaired tags are single tags with no closing tag. These tags are also called Singular
Tags. These are also called non-container tags because they do not contain any content.

It is recommended to close the unpaired/singular tags also. But unfortunately, we do not


have the closing tag for those. So, an unpaired tag is closed after adding a slash(/) just
before the greater than > sign. For example: <br />.

Look below the list of some Unpaired Tags in HTML. Notice the use of slash(/) in the tags,
to close them.

Some Unpaired Tags are:

Open Tag

<br>

<hr>
Open Tag

<meta>

<input>

HTML Heading Tag


Heading tag is used to give headings of different sizes in a document. There are six different
HTML heading tags, which gives different heading sizes and are defined by <h1> to <h6>
tags. <h1> gives the largest heading and <h6> gives the smallest one. So <h1> can be used
for most important headings and <h6> can be used for a least important one.

Creating HTML Webpage


First off, you need to open your HTML editor, where you will find a clean white
page on which to write your code.
From there you need to layout your page with the following tags.
<head>
<title>My First Webpage</title>
<meta charset="UTF-8">
<meta name="description" content="This field contains information about your page. It is usually
around two sentences long.">.
<meta name="author" content="Conor Sheils">
</header>

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> HTML Heading Tag </title>
</head>
<body>
<h1> This is Heading 1 </h1>
<h2> This is Heading 2 </h2>
<h3> This is Heading 3 </h3>
<h4> This is Heading 4 </h4>
<h5> This is Heading 5 </h5>
<h6> This is Heading 6 </h6>
</body>
</html>
Output

This is Heading 1
This is Heading 2
This is Heading 3
This is Heading 4
This is Heading 5
This is Heading 6

HTML Paragraph Tag


The <p> tag is used to define a paragraph in a document. HTML paragraph or HTML <p> tag
gives the text inside it, a paragraph like finishing. It is a notable point that a browser itself
add an empty line before and after a paragraph.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> HTML Paragraph Tag </title>
</head>
<body>
<p> This is First Paragraph </p>
<p> This is Second Paragraph </p>
<p> This is Third Paragraph </p>
</body>
</html>

Output

This is First Paragraph

This is Second Paragraph

This is Third Paragraph


HTML Anchor Tag
HTML Hyperlink is defined with the <a> tag (Anchor tag). It is used to give a link to any file,
webpage, image etc.

This tag is called anchor tag and anything between the opening <a> tag and the
closing </a> tag becomes part of the link, and a user can click that part to reach to the linked
document.

<!DOCTYPE html>
<HTML lang="en">
<head>
<meta charset="UTF-8">
<title> HTML Anchor Tag </title>
</head>
<body>
<a target="_blank" href="https://www.google.com"> This is a link </a>
</body>
</html>
Output
This is a link

Note: Use 'target = _blank' as an attribute in <a> tag to open the link in a new tab.

HTML Image Tag


The Image Tag is used to add Images in HTML documents. The HTML <img> tag is used to
add image in a document. The 'src' attribute is used to give source(address) of the image.
The height and width of the image can be controlled by the attributes -
height="px" and width="px".

The 'alt' attribute is used as an alternative in a case if the image is not shown. Anything
written as a value of this attribute will be displayed. It will give information about the image.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> HTML Image Tag </title>
</head>
<body>
<img src="HTML-Image.png" width="400px" height="200px">
</body>
</html>
Output

HTML Attributes
HTML attribute defines the characterstics of any HTML element. These attributes provide
additional information to the browser about the element like, its size, color, behaviour, etc.

Some important points regarding HTML


Attributes:
• Attributes provide additional information about an element.
• Attributes are always specified in the start tag.
• Attributes usually come in name/value pairs like: name="value".
• Eg.- 'src' in <img> tag OR 'href' in <a> tag,etc. are the attributes.

HTML Src Attribute


The src or (source) attribute is used with <img> tag. This attribute allows us to provide the
path for the image to be included on the webpage. it is also used
with <audio> tag, <video> tag, <embed> tag, etc. to add the source path of the file to be
included.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> HTML Image Alt Attribute </title>
<body>
<img src="HTML-Image.png" alt="HTML5 Image" style="width:400px; height:250px;">
</body>
</html>

HTML alt Attribute


The alt attribute specifies an alternative text for an image. If somehow the browser is not
able to display an image, then the alternate text will be displayed, which will give the
information about the image. Also, value of alt attribute can be read by screen readers,
which helps visually impaired person to "hear" information about the image.

If a browser cannot find an image, it will display the value of the alt attribute :

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> HTML Image Alt Attribute </title>
<body>
<img src="HTML-Image.png" alt="HTML5 Image" style="width:400px; height:250px;">
</body>
</html>

HTML style Attribute


The style attribute is used to specify the inline style of an element, i.e., it defines the CSS
styling of element like color, font, size, shadow etc.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> Inline Styles </title>
</head>
<body>
<h4 style="color:green"> This is Green Color </h4>
<h4 style="color:blue"> This is Blue Color </h4>
</body>
</html>
Output

This is Green Color


This is Blue Color

HTML Formatting Tags


HTML Formatting Tags are used to change appearance of text for better look and feel than
the default text. The formatting tags can make text bold, italic, underlined, etc.

All the formatting tags are paired tags. Anything written between any formatting tag will be
displayed according to the tag in the browser. For example, anything written
between <i> and </i> will display as italic text in the browser.

There are different tags for various formatting tags. Each Tag has its own type of formatting
associated with it.

Some HTML Formatting tags are:

o Bold Tag <b>


o Italic Tag <i>
o Underline Tag <u>
o Strong Tag <strong>
o Small Tag <small>
o Big Tag <big>
o Mark Tag <mark>
o Emphasized Tag <em>
o Deleted Tag <del>
o Inserted Tag <ins>
o Subscripted Tag <sub>
o Superscripted Tag <sup>

HTML Bold Tag


The HTML <b> Tag defines bold text. Bold text is wider and darker text than the default text,
without any extra importance to the browser.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> Bold Text </title>
</head>
<body>
<p> This is Normal text. </p>
<b> This is Bold Text. </b>
</body>
</html>
Output
This is normal text.

This is Bold Text.

HTML Strong Text


The HTML <strong> Tag displays same formatting like a <b> tag. But the Strong text has
some importance to the browser and search engines. It is always recommended to write
keywords within <strong> Tag to give them extra importance.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> Strong Text </title>
</head>
<body>
<p> This is Normal text </p>
<strong> This Text is Strong </strong>
</body>
</html>
Output
This is Normal text

This Text is Strong

HTML Italic Text


The HTML <i> Tag defines italic text. This type of formatting displays cursive font based text
that slant slightly to the right.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> Italic Text </title>
</head>
<body>
<p> This is normal text </p>
<i> This is italic Text </i>
</body>
</html>
Output
This is normal text

This is italic Text

HTML Underlined Text


The HTML <u> Tag defines Underlined text. All the text within the <u> and </u> tags will have
an underline throughout.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> Underlined Text </title>
</head>
<body>
<p> This is Normal text </p>
<u> This is Underlined Text </u>
</body>
</html>
Output
This is Normal text

This is Underlined Text

HTML Small Text


The HTML <small> Tag defines small text. This text is used for some side commenting or to
write some copyright information.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> Small Text </title>
</head>
<body>
This text is <small> small </small>.
</body>
</html>
Output
This text is small .

HTML Big Text


The HTML <big> element defines BIG text.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> HTML Big Tag </title>
</head>
<body>
This text is <big> BIG </big>
</body>
</html>
Output
This text is BIG

HTML Marked Text


The HTML <mark> Tag defines Highlighted text. The text will have a background color and
represent relevancy in an HTML document.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> Mark Tag </title>
</head>
<body>
This text is <mark> Marked. </mark>
</body>
</html>
Output
This text is Marked.
HTML Emphasized Text
The HTML <em> element defines Emphasized text. It will give the text the same Italic
formatting. This tag is important for screen readers. The screen readers give extra
emphasize on this type of text and read it with verbal stress.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> Emphasize Text </title>
</head>
<body>
This text is Normal.
This text is <em> Emphasized. </em>
</body>
</html>
Output
This text is Normal.
This text is Emphasized.

HTML Deleted Text


The HTML <del> element defines text. This displays Text with a line strike.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> Delete Text </title>
</head>
<body>
<p> This text is Normal. </p>
This text is <del> Deleted. </del>
</body>
</html>
Output
This text is Normal.

This text is

HTML Subscripted Text


The HTML <sub> element defines subscripted text. This type of text is small in size and is placed
slightly below the normal line of text.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> Subscript Text </title>
</head>
<body>
This text is <b> bold. </b>
This text is <i> italic. </i>
This text is <sup> Subscripted. </sup>
</body>
</html>
Output
This text is bold.
This text is italic.
This text is Subscripted.

HTML Superscripted Text


The HTML <sup> element defines superscripted text. It also dispalys very small text like subscript,
but here, the text is placed slightly above the normal line of text.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> Superscript Tag </title>
</head>
<body>
This text is <b> bold. </b>
This text is <i> italic. </i>
This text is <sup> Superscripted.
</body>
</html>

Output

This text is bold.


This text is italic.
This text is Superscripted.

HTML Paragraph (<P>) Tag


HTML paragraph HTML <p> tag is used to define a paragraph in a webpage. It is a Paired
Tag, i.e. it comes with an opening <p> and a closing </p> tag.

A <p> tag is very important tag, as all the content written on a website needs to get
formatted in the form of paragraphs. Browsers automatically add blank lines above and
below a paragraph to seaprate it from other content or othe paragraphs on the page.

HTML Paragraphs are block level elements, i.e., a new paragraph will always start from a
new line. Also, Paragraph tags gets automatically closed if another block-element gets
parsed before the </p> tag.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> HTML Paragraph Tag </title>
</head>
<body>
<p> This is First Paragraph </p>
<p> This is Second Paragraph </p>
<p> This is Third Paragraph </p>
</body>
</html>
Output

This is First Paragraph

This is Second Paragraph

This is Third Paragraph

HTML <pre> Element


<pre> element defines preformatted text. The text inside a <pre> tag is displayed in a fixed-
width font, and it preserves both spaces and line breaks.

The <pre> tag is also a paired tag. It can be used when you want to display a certain amount
of text with preformatted spaces and line breaks. For example, to display a block of code of
a programming language or to display a poem with proper line breaks.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> HTML Pre Tag </title>
</head>
<p>The pre tag preserves both spaces and line breaks:</p>
<pre>
This is a Paragraph Tag.
This is a Paragraph Tag.
This is a Paragraph Tag.
This is a Paragraph Tag.
</pre>
</body>
</html>

Output

This is a Paragraph Tag.

This is a Paragraph Tag.

This is a Paragraph Tag.

This is a Paragraph Tag.

HTML Link Color


You can set colors of your links, active links and visited links using link, alink and vlink
attributes of <body> tag

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> HTML Change Link Color </title>
</head>
<body alink="green" vlink="red">
<p> Click following link </p>
<a href="https://google.co.in/"> Welcome to Google </a>
</body>
</html>
Welcome to Google

HTML Image Attributes


<img> tag is used to display image on the web page. It is an empty tag that contains
attributes only, closing tags are not used in HTML image element.
Syntax

<img src="url" alt="some_text" height="px" width="px">

<img src="url" alt="some_text" height="px" width="px">

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> HTML Image Tag </title>
</head>
<body>
<img src="HTML-Image.png" width="400px" height="200px">
</body>
</html>

Output

HTML Table
We all are familiar with the concept of table, we are not talking about the numeric tables
here, the HTML table we are going to learn is the one with rows and column. It’s similar
like the structure of a matrix with proper rows and columns. This type of structure with
rows and columns is very helpful in representing data in an easy and simple manner.
The tabular form of data creates a good expression wherever it is used due to its
representation of necessary data in a simple and accurate manner.

Use of HTML Table ?


An HTML table is defined with the <table> tag. A table is used to display data in tabular
form (rows * column). It is a paired tag. Just use these tags with their attributes to create
tables. You can also use CSS stylesheet to beautify these structures. A table structure
is represented in ‘rows*columns’ form, i.e. a ‘4*5’ table represents a table with 4 rows and
5 columns.

Tables are also used in websites to present any data to the user. It looks really neat and
also everyone prefers tabular form of data nowadays. The HTML tables allows to
arrange data like text, images, etc. into rows and columns.

Example :
HTML Table
We all are familiar with the concept of table, we are not talking about the numeric tables
here, the HTML table we are going to learn is the one with rows and column. It’s similar
like the structure of a matrix with proper rows and columns. This type of structure with
rows and columns is very helpful in representing data in an easy and simple manner.
The tabular form of data creates a good expression wherever it is used due to its
representation of necessary data in a simple and accurate manner.

Use of HTML Table ?


An HTML table is defined with the <table> tag. A table is used to display data in tabular
form (rows * column). It is a paired tag. Just use these tags with their attributes to create
tables. You can also use CSS stylesheet to beautify these structures. A table structure
is represented in ‘rows*columns’ form, i.e. a ‘4*5’ table represents a table with 4 rows and
5 columns.

Tables are also used in websites to present any data to the user. It looks really neat and
also everyone prefers tabular form of data nowadays. The HTML tables allows to
arrange data like text, images, etc. into rows and columns.

Example :
<!DOCTYPE html>
<html lang="en">
<HTML>
<head>
<meta charset="UTF-8">
<title> HTML Table </title>
</head>
<body>
<table>
<tr>
<th> Name </th>
<th> Salary </th>
<th> Age </th>
</tr>
<tr>
<td> Anshuman </td>
<td> Rs. 2,00,000 </td>
<td> 25 </td>
</tr>
<tr> <td> Kuldeep </td>
<td> Rs. 5,00,000 </td>
<td> 22 </td>
</tr>
</table> </body>
</html>

Output:

Table 1

Name Salary Age


Anshuman Rs. 2,00,000 25
Kuldeep Rs. 5,00,000 22

Table Row
A table row can be defined with the <tr> tag It is also a paired tag with </tr> as a closing
tag. Whatever written between these tags will be displayed in a single row of the table.
To create a new row another <tr> tag is written after closing the previous one.

Table heading
A table header in HTML tables is a special case of a table row. It starts with <th> tag and
ends with </th> tag. There only difference between a row and a heading is that text
written inside <th> tags is displayed in bold fonts and is by default centered aligned by
the browser. Because of its properties this tag is used only for writing Heading of the
table. You can also make a <tr> tags content bold and centered by using CSS It will
work exactly like <th> tag.
Table Cells
A table cell in an HTML table is defined by <td> tag. It is also a paired tag with </td> as a
closing tag. Each pair of these tags represents a cell in a row. It is used
inside &glt;tr> tags only. Without <tr> tags it is of no value. After declaring the rows
the <td> tags are used to enter data in the table. Whatever is written inside
the <td> and </td> tags will be displayed by the browser in the tables as it is.

Table Attributes
The <table> Tag in HTML table has many attributes which can be used to further define
the structure of the table than just a standard one. These attributes can make a table
look a bit more attractive. Let’s see one by one the different attributes of the table tag
and then we will use them in an example and will see the changes in the table.

The 'border' Attribute


A border attribute is used to specify visible borders in a table. It means that by default
the borders in the table are hidden and if you don’t specify borders then your table will
only display data but there would be no border between them. The border attribute has
two values 0 and 1. 0 means no border and 1 means visible borders. You can also
increase the values to 2, 3, 4, etc. it will increase the width of the border.

There are two ways to specify border for HTML tables.

• By border attribute of table in HTML.


• By border property in CSS.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> HTML Table Border Attribute </title>
</head>
<body>
<table border="1" width="100%">
<tr>
<th> Name </th>
<th> Salary </th>
<th> Age </th>
</tr>
<tr>
<td> Anshuman </td>
<td> Rs. 2,00,000 </td>
<td> 25 </td>
</tr>
<tr>
<td> Kuldeep </td>
<td> Rs. 5,00,000 </td>
<td> 22 </td>
</tr>
</table>
</body>
</html>

Output:

Table 2

Name Salary Age


Anshuman Rs. 2,00,000 25
Kuldeep Rs. 5,00,000 22

The width attribute is used to sizing the table.

Table CSS Border


You can use CSS Style to make table more interactive.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> HTML Table Border Style </title>
<style>
table, th, td {
border: 1px solid black;
text-align: center;
}
</style>
</head>
<body>
<table width="100%">
<tr>
<th> Name </th>
<th> Salary </th>
<th> Age </th>
</tr>
<tr>
<td> Anshuman </td>
<td> Rs. 2,00,000 </td>
<td> 25 </td>
</tr>
<tr>
<td> Kuldeep </td>
<td> Rs. 5,00,000 </td>
<td> 22 </td>
</tr>
</table>
</body>
</html>

Output

Table 3

Name Salary Age


Anshuman Rs. 2,00,000 25
Kuldeep Rs. 5,00,000 22

The 'Cellpadding' and 'Cellspacing' Attribute


These "cellpadding" and "Cellspacing" attributes are used to adjust the white spaces in your
table cells.

Cellpadding attribute
The Cellpadding attribute is used to specify the space between the content of the cell
and its borders. It provides padding to the content of the cell. As its value increases the
space between the cell’s content and its border is also increases. The value of this
attribute is taken in pixels by the browser. The cellpadding is applied to all the four sides
of the content. The value can also be defined in percentages.

Cellspacing attribute
The Cellspacing attribute is used to specify the space between the cells of the table. Its
value can be in pixels or in percentages. It works similar to the Cellpadding attribute but
only between cells. It is applied to all the sides of the cells.

Note: These two attributes defined above are no longer a part of HTML 5. So it is better
to use CSS to color the tables.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> HTML Table Cellpadding Attribute </title>
</head>
<body>
<table border="1" cellpadding="5" cellspacing="5" style="width:100%">
<tr>
<th>Name</th>
<th>Salary</th>
</tr>
<tr>
<td>Peter</td>
<td>5000</td>
</tr>
<tr>
<td>John</td>
<td>7000</td>
</tr>
</table>
</body>
</html>

Output

Table 4

Name Salary
Peter 5000
John 7000

The 'Colspan' and 'Rowspan' Attribute


These two attributes are used with the <td> tag. As the name suggests ‘colspan’ is
related to columns and ‘rowspan’ is related to rows. These two attributes are used to
merge two or more columns and rows. The colspan attribute’s value suggest the
amount of column space it will occupy. For example ‘<td colspan= 2>’ will create a cell
taking space of two cells horizontally i.e. it will occupy the space of a cell of the next
column. Similarly, the ‘rowspan’ will create a cell which will occupy the space of two or
more (as specified) cells vertically, i.e. cells of the next rows. Look at the example below
to understand the concept clearly.

The 'Rowspan'
The rowspan attribute is used to merge two or more rows together to form a single row. A
single row occupies space of the number of merged rows.
<!DOCTYPE html>
<html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
th, td {
padding: 5px;
text-align: left;
}
</style>
</head>
<body>
<h2>Cell that spans two rows:</h2>
<table style="width:100%">
<tr>
<th>Name:</th>
<td>Bill Gates</td>
</tr>
<tr>
<th rowspan="2">Telephone:</th>
<td>9998887776</td>
</tr>
<tr>
<td>9998887776</td>
</tr>
</table>
</body>
</html>

OUTPUT

Table 5

Person_Name Mobile
Bill Gates 9998887776 9998887775

HTML Caption
To add a caption to a table, use the <caption> tag.
• A caption can be aligned around the table by using align attribute with values -
left/right/top/bottom.
• The default alignment is top.

<!DOCTYPE html>
<html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> HTML Table Colspan Attribute </title>
</head>
<body>
<table border="1" width="80%">
<tr>
<th> Person_Name </th>
<th colspan="2"> Mobile </th>
</tr>
<tr>
<td> Bill Gates </td>
<td> 9998887776 </td>
<td> 9998887775 </td>
</tr>
</table>
</body>
</html>

Table 6

Monthly savings
Month Savings
January $100
February $50

Height and Width attributes


The Height and Width attributes of an HTML table are used to specify the height and
width of the table. Their value can be specified in terms of pixels or percentages.

bgcolor attribute attribute


This attribute in HTML table is used to provide a background color to the table. You can
easily write any color name directly or you can also set a color by providing HEX code.
This attribute can also be used with <td> tag to define the color of that particular cell in
the table.
background attribute
This attribute in HTML table is used to add a background image in the table. The image
in the table will work as a background behind the data in the table. It is also can be used
with <td> tag.

HTML Font Tag


HTML Font Tag plays a significant role in developing more user-friendly websites and
increasing content readability. Font face and color depend entirely on the computer and
the browser used to view the page, but we can use the HTML <font> tag to add style,
size, and color to the text on your website. Let's start with html tags and different
attributes like html font size, color.

HTML Font Tag Attributes


HTML Font Tag has three attributes called size, color, and face to customize the Font. To
change any of the font attributes at any time within your webpage, use the <font> tag.
The text that follows will remain switched until you close with the </font> tag.

How to change the html font size?


• We can set html font size using size attribute.
• The range of accepted values is from 1 to 7.
• The default font size of a font is 3.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> HTML Font Size </title>
</head>
<body>
<font size="1">Hello HTML 5!</font>
<font size="2">Hello HTML 5!</font>
<font size="3">Hello HTML 5!</font>
<font size="4">Hello HTML 5!</font>
<font size="5">Hello HTML 5!</font>
<font size="6">Hello HTML 5!</font>
<font size="7">Hello HTML 5!</font>
</body>
</html>

Output:
Hello HTML 5!
Hello HTML 5!
Hello HTML 5!
Hello HTML 5!
Hello HTML 5!
Hello HTML 5!
Hello HTML 5!
The Font Face
You can set font face using 'face' attribute but be aware that if the user viewing the page
doesn't have the Font installed, they will not see it. Instead, the user will see the default
font style.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML Font Face Attribute </title>
</head>
<body>
<font face="Times New Roman" size="5">Times New Roman</font>
<font face="Verdana" size="5">Verdana</font>
<font face="Comic sans MS" size="5">Comic Sans MS</font>
<font face="WildWest" size="5">WildWest</font>
<font face="Bedrock" size="5">Bedrock</font>
</body>
</html>

Output:

Times New Roman


Verdana
Comic Sans MS
WildWest
Bedrock

Alternative Font Face


It is possible to specify two or more font face alternatives by listing the font face names,
separated by a comma. If the user doesn't have one Font installed in his system, the
other can display the content.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> HTML Font Face Alternative Attribute </title>
</head>
<body>
<font face="Times New Roman,Verdana,Comic sans MS,WildWest" size="5">Times New
Roman</font><br />
<font face="Lucida Calligraphy,Comic Sans MS,Lucida Console" size="5">Bedrock</font>
</body>
</html>

Output:

Times New Roman


Bedrock

HTML Font Color Tag


HTML html font color tag can be set using the color attribute. You can specify the color
you want by either the color name or by hexadecimal code for that color. The text color
makes the website a more attractive look.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML Font Color</title>
</head>
<body>
<font color="#69C">This text is in Blue</font><br />
<font color="green">This text is Green</font>
</body>
</html>

This text is in Blue


This text is Green

Ordered List in HTML


This list is created by using <ol> tag. Any series can be used to order the elements, like
series of digits, alphabets, roman numerals, etc. All these series gets increased by one
with every new element entered in the list.

Ex.-For a numbered order list, the numbering starts at one and is incremented by one
for each successive ordered list element tagged with <li>.

Have a look at the example below to understand the concept properly.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> HTML Ordered List </title>
</head>
<body>
<h2>HTML Ordered list</h2>
<ol>
<li>Audi</li>
<li>Mercedes</li>
<li>Lamborghini</li>
</ol>
</body>
</html:>

Output

1. Audi
2. Mercedes
3. Lamborghini

Ordered list Type Attribute


The type attribute is used to change the series type.

Value Description

type="1" The list items will be numbered with numbers (default).

type="A" The list items will be numbered with uppercase letters.


Value Description

type="a" The list items will be numbered with lowercase letters.

type="I" The list items will be numbered with uppercase roman numbers.

type="i" The list items will be numbered with lowercase roman numbers.

List of Numbers
Numbers as type - <ol type="1">. Here the numbers will be used to order the elements.
Each new element will get incremented value from the previous one in the list.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> HTML Ordered List </title>
</head>
<body>
<h2>HTML Ordered list</h2>
<ol>
<li>Audi</li>
<li>Mercedes</li>
<li>Lamborghini</li>
</ol>
</body>
</html>

OUTPUT:

1. Audi
2. Mercedes
3. Lamborghini

Uppercase
Uppercase alphabets as type - <ol type="A">. Here, Uppercase alphabets will be used to
order the elements.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> HTML Ordered List Uppercase </title>
</head>
<body>
<ol type="A">
<li>Audi</li>
<li>Mercedes</li>
<li>Lamborghini</li>
</ol>

<ol type="a">
<li>Audi</li>
<li>Mercedes</li>
<li>Lamborghini</li>
</ol>

<ol type="I">
<li>Audi</li>
<li>Mercedes</li>
<li>Lamborghini</li>
</ol>

<ol type="i" start="50">


<li>Audi</li>
<li>Mercedes</li>
<li>Lamborghini</li>
</body>
</html>

Output:

A. Audi
B. Mercedes
C. Lamborghini

a. Audi
b. Mercedes
c. Lamborghini

I. Audi
II. Mercedes
III. Lamborghini
li. Audi
lvi. Mercedes
lvii. Lamborghini

HTML Unordered List


HTML unordered list is a collection of related items that are listed with no special order
or sequence. This list is created by using HTML <ul> tag. Each item in the list is marked
with a bullet. Each item starts with <li> tag.

Look at the example below to understand how to use HTML Unordered List:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> Unordered List </title>
</head>
<body>
<h2> Unordered List </h2>
<ul>
<li>Audi</li>
<li>Mercedes</li>
<li>Lamborghini</li>
</ul>
</body>
</html>

Output

• Audi
• Mercedes
• Lamborghini

Unorder List Type Attribute


The type attribute is used to change the series type.

Value Description

type="disc" Sets the list item marker to a bullet (default).


Value Description

type="circle" Sets the list item marker to a circle.

type="square" Sets the list item marker to a square.

type="none" The list items will not be marked

The Disc Attribute


The 'Disc' as type - <ul type="disc">. These list items will be marked with small black
circles like bullets. This is the default type in unorder lists.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> Unordered List Disc Attribute </title>
</head>
<body>
<h2> Unordered List </h2>
<ul type="disc">
<li> BMW </li>
</ul>
<ul type="circle">
<li> BMW </li>
<ul type="square">
<li> BMW </li>
<ul type="none">
<li> BMW </li>
</body>
</html>
OUTPUT

• BMW

o BMW

▪ BMW

BMW

You might also like