WEB TECHNOLOGY
Presented By:
Dr. Santosh Kumar Sharma
Assistant Professor
Dept. of CSE, CGU, Odisha
Lecture 5
8/13/2025 2
Topics to be covered
<p> and <pre>
<img>
Anchor tag
Font
Marquee
Table
Rowspan
Colspan
List
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.
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.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> HTML Heading Tag </title>
</head>
<body>
<p> This is First Paragraph </p><p> This is Second Paragraph </p> <p> This is Third Paragraph </p>
<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>
<pre>This is a Paragraph Tag. This is a Paragraph Tag. This is a Paragraph Tag. This is a Paragraph
Tag. </pre>
</body>
</html>
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".
<img src="HTML-Image.png" width="400px"
height="200px">
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.
<a target=“my college" href=“www.cgu.com"> This is a link </a>
<a href=“www.cgu.com"> This is a link </a>
HTML Target Attribute
HTML target attribute is used to specify the place in the browser where
the linked document should be opened.
For example, whether the user wants to open the link in a new tab, new
window, or in the same tag.
The target attribute has different values for all these different locations.
The target attribute can have one of the following values:
_blank Opens the linked document in a new window or tab.
_self Opens the linked document in the same window/tab. This is the
default value.
_parent Opens the linked document in the parent frame.
_top Opens the linked document in the full body of the window.
<body>
<p><a href="https://cgu-odisha.ac.in/" target="_blank">Welcome to Cgu</a></p>
<p><a href="https://cgu-odisha.ac.in/" target="_top">Welcome to Cgu</a></p>
<p><a href="https://cgu-odisha.ac.in/" target="_parent">Welcome to Cgu</a></p>
<p><a href="https://cgu-odisha.ac.in/" target="_top">Welcome to Cgu</a></p>
</body>
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.
<img src="HTML-Image.png" alt="HTML5 Image"
style="width:400px;height:250px;">
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.
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.
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.
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.
<body><font face="Times New Roman" size="5“>Welcome to CGU</font></body>
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.
<font color="green“>Welcome to CGU</font>
HTML Title Tag
The <title> tag is required in all HTML documents and it defines the title of the
document and display on the top of Web Page.
HTML Title Attribute
The title attribute is used to give tooltip in an element. The information gives some
details about the element and will be shown as a tooltip, when the cursor moves
over the element.
<p><abbr title="World Health Organization">WHO</abbr> was founded in 1948.</p>
HTML Marquee Tag
HTML <marquee> tag is used to automatically scroll an image or text horizontally
or vertically on a webpage. In simple words, it scrolls the image or text up, down,
left or right automatically.
By default, without any specific attribute, content within the <marquee> tag will
scroll from right to left.
Marquee Scroll Property
Marquee Scroll is a default property. During scroll, the text floats from right to left
and restarts from the right side of the marquee when it reaches to the end on the left
side of the screen.
It is used as a value of behavior attribute, like, behavior="scroll". You can also
change the direction of the Scroll by using direction attribute.
<marquee width="100%" behavior="scroll" direction="up">
Marquee Slide Property
Marquee Slide property scrolls the text from right to left and at the end of the
screen, it stops movement. You can specify the direction attribute to change the
direction of the marquee like, direction=up/down/left/right.
<marquee width="100%" behavior="slide">
Marquee Alternate Property
Marquee Alternate Property scrolls the text from right to left and then goes back
from left to right. You can only set direction as left or right on this property.
<marquee width="100%" behavior="alternate">
Marquee 'Direction' Attribute
The 'Direction' Attribute is used to change the direction of scrolling text inside the
marquee tag. The direction of text or image data inside marquee tag can be left,
right, up and down.
<marquee width="100%" behavior="scroll" direction="up">
HTML Break Tag <br>
The HTML <br> tag creates a line break within a paragraph. This tag is used very
commonly during writing content for the website. The break tags are very helpful to
write any content with line breaks.
The hr Tag
The HTML <hr> tag is used to specify horizontal line break in HTML document. It
draws a horizontal line between different content .
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.
Example:
<html> <head> <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>
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
centred aligned by the browser. Because of its properties this tag is used only for
writing Heading of the table.
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. 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.
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.
<table border="1" width="100%">
Bgcolor 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.
<table border="1" bgcolor="green">
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.
<table background="/images/html.gif" width="100%" height="100">
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 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.
<table border="1" cellpadding="5" cellspacing="5" style="width:100%">
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.
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.
<table border="1" 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>
The 'Colspan'
The colspan attribute is used to merge two or more columns into a single column. single
column occupies space of the number of merged columns.
<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>
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.
<td width="200" height="100"></td>
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.
<caption>Data of a person</caption>
Data of a person
