Prepared by: Mr. Devendra Sharma, Lecturer, CSE, GP Gaya.

URL
A URL or Uniform Resource Locator is a Unique identifier that is contained by
all the resources available on the internet. It can help to locate a particular
resource due to its uniqueness. It is also known as the web address. A URL
consists of different parts like protocol, domain name, etc. The users can access
the URLs by simply typing them inside the address bar or by clicking any button
or link web page.
Example URL:
[Link]

[Link]
articlecards#what-is-array
Types of URL
There are two main types of URLs: absolute and relative.
Absolute URL
This type of URL contains both the domain name and directory/page
path. An absolute URL gives complete location information. It begins
with a protocol like “[Link] and continues, including every detail. An
absolute URL typically comes with the following syntax.
Links to an external image that is hosted on another website.
Example:
src="[Link]
Relative URL
This type of URL contains the path excluding the domain name.
Relative means “in relation to”, and a relative URL tells a URL location
on terms of the current location. Relative path is used for reference to
a given link of a file that exist within the same domain.
src="/images/img_girl.jpg".

Relative URLs generally offer advantages in terms of code simplicity

and faster loading times when linking within a website, while absolute
URLs provide better consistency for external links but may be slightly
slower to load; essentially, use relative URLs for internal links and
absolute URLs for external links on your site.
Pros of Relative URLs:
• Faster loading times:
Since the browser doesn't need to look up the full domain information,
relative URLs can load slightly faster.
• Simplified coding:
Easier to write and manage, especially when restructuring a website as
the links remain relative to the current page.
• Better for internal linking:
When linking between pages within the same domain, relative URLs
are more efficient and flexible.
• Easy to maintain:
If you move a group of pages within a site, relative links will still work
without needing to update every URL.
Cons of Relative URLs:
• Potential confusion for external users:
If someone copies and pastes a relative URL, it might not work
correctly outside the website.
• May not be ideal for SEO:
In some cases, using only relative URLs could lead to duplicate content
issues in search engine eyes.
Pros of Absolute URLs:
• Consistency and clarity:
Always points to the exact location of a resource, regardless of where
it's accessed from.
• Improved SEO:
Helps search engines understand which pages are the same even if
accessed through different paths.
• Suitable for external links:
When linking to content on other websites, using absolute URLs is
necessary.
Cons of Absolute URLs:
• More complex to manage:
Requires the full domain name and path, which can be cumbersome
when updating multiple links.
• May be slightly slower to load:
Compared to relative URLs, the browser needs to look up the full
domain information.
Anchor Tag
An anchor is a piece of text which marks the beginning and/or the end
of a hypertext link. The text between the opening tag and the closing
tag is either the start or destination (or both) of a link.
HTML <a> Tag
The <a> tag defines a hyperlink, which is used to link from one page
to another. The most important attribute of the <a> element is the href
attribute, which indicates the link’s destination.
Syntax:
<a href = "link"> Link Name </a>
By default, links will appear as follows in all browsers:
• An unvisited link is underlined and blue
• A visited link is underlined and purple
• An active link is underlined and red
HTML Links - The target Attribute
By default, the linked page will be displayed in the current browser
window. To change this, you must specify another target for the link.
The target attribute specifies where to open the linked document.
The target attribute can have one of the following values:
• _self - Default. Opens the document in the same window/tab as it
was clicked
• _blank - Opens the document in a new window or tab
• _parent - Opens the document in the parent frame
• _top - Opens the document in the full body of the window
Opening Links in New Tab:
To open a link in a new browser Tab, add the target=”_blank” attribute:

Output

Linking to Email Addresses

Output

Creating Internal Page Anchors

To link to another section on the same page:

Output
 Images, Colors and Backgrounds:

Images can improve the design and the appearance of a web page.
HTML Images Syntax
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 creates a holding space for the referenced
image.
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

The required src attribute specifies the path (URL) to the image.
Note: When a web page loads, it is the browser, at that moment, that
gets the image from a web server and inserts it into the page. Therefore,
make sure that the image actually stays in the same spot in relation to
the web page, otherwise your visitors will get a broken link icon. The
broken link icon and the alt text are shown if the browser cannot find
the image.
The alt Attribute
The required alt attribute provides an alternate text for an image, if the
user for some reason cannot view it (because of slow connection, an
error in the src attribute, or if the user uses a screen reader). The value
of the alt attribute should describe the image:
<img src="img_chania.jpg" alt="Flowers in Chania">
If a browser cannot find an image, it will display the value of
the alt attribute:
Image Size - Width and Height
Use the style attribute to specify the width and height of an image.

Alternatively

The width and height attributes always define the width and height of
the image in pixels. The width, height, and style attributes are all valid
in HTML.
Images in Another Folder
If images in a sub-folder, must include the folder name in
the src attribute:

Images on Another Server/Website

To point to an image on another server, must specify an absolute (full)
URL in the src attribute:
HTML allows animated GIFs
Image as a Link
To use an image as a link, put the <img> tag inside the <a> tag:

After clicking on emoji will go another page

Image Floating
Use the CSS float property to let the image float to the right or to the
left of a text:

Output
Image as a Link
To use an image as a link, put the <img> tag inside the <a> tag:
<html>
<body>
<h2>Image as a Link</h2>
<p>The image is a link. You can click on it.</p>
<a href="[Link]">
<img src="[Link]" alt="HTML tutorial" style="width:42px;height:42px;">
</a>
</body>
</html>
Border and using other attributes with IMG tag.
The <img> border attribute is used to specify the border width around the
image. The default value of <img> border attribute is 0.
It is not supported by HTML 5. Use CSS instead of this attribute.
Syntax:
<img border="pixels">
Attribute Values: It contains single value pixels which specify the width of the
border.
Creating solid color page background
Setting the background color of a web page or an element on the web page, enable
us to create unique layouts for the web page. To set the background color in
HTML, use the style attribute, with the CSS property background-color inside
the body tag of the HTML document.
HTML5 do not support the <body> tag bgcolor attribute, so the CSS style is
used to add background color. The bgcolor attribute deprecated in HTML5.
We can change the background color by overriding the property with the other
property.
Syntax
<body style="background-color:aquamarine;">

We can specify the background color with RGB value. RGB value indicates its
red, green, and blue color intensity. Each intensity value is on a scale of 0 to 255,
or in hexadecimal from 00 to FF.
 HTML Tables

HTML Tables allow to arrange data into rows and columns on a web page,
making it easy to display information like schedules, statistics, or other structured
data in a clear format.
(OR)
A table is a structured set of data made up of rows and columns (tabular data).
A table allows you to quickly and easily look up values that indicate some kind
of connection between different types of data, for example a person and their age,
or a day of the week, or the timetable for a local swimming pool.
An HTML table is created using the <table> tag. An HTML table consists of
one <table> element and one or more <tr>, <th>, and <td> elements. A table in
HTML consists of table cells inside rows and columns. The <tr> element defines
a table row, the <th> element defines a table header, and the <td> element defines
a table cell.
Table Rows
Each table row starts with a <tr> and ends with a </tr> tag. tr stands for table
row.
Table Headers
Sometimes we want cells to be table header cells. In these cases use the <th> tag
instead of the <td> tag. th stands for table header. By default, the text
in <th> elements are bold and centered, but we can change that with CSS.
Table Cells
Each table cell is defined by a <td> and a </td> tag. td stands for table data.
Everything between <td> and </td> is the content of a table cell. A table cell can
contain all sorts of HTML elements: text, images, lists, links, other tables, etc.
In this Example:
• <table>: This tag starts the table. Everything between the opening <table>
and closing </table> tags makes up the table.
• <tr>: Stands for “table row”. Each <tr> tag defines a row in the table.
• <th>: Stands for “table header”. It’s used for the headers of the columns.
In this case, “Firstname“, “Lastname“, and “Age” are headers. Text in <th>
tags is usually bold and centered by default.
• <td>: Stands for “table data”. This tag is used for actual data cells under
each column. For instance, “Priya” is the data under the “Firstname”
header, “Sharma” under the “Lastname“, and “24” under the “Age“.
• The first <tr> has three <th> elements, setting up the column titles.
• The subsequent <tr> tags each contain three <td> elements, representing
the data for each person listed in the table.
Styling HTML Tables
Styling an HTML table can significantly improve its appearance and readability.
We can use CSS (Cascading Style Sheets) to add styles such as borders,
background colors, text alignments, and much more.
1. Adding a Border to an HTML Table
A border is set using the CSS border property. If we do not specify a border for
the table, it will be displayed without borders.

Syntax

Output
2. Adding Collapsed Borders in an HTML Table
For borders to collapse into one border, add the CSS border-collapse property.
The border-collapse property sets whether table borders should collapse into a
single border or be separated as in standard HTML. Boder-collapse have two
values separate (by default) and collapse.

Syntax
3. Padding in an HTML Table
Cell padding specifies the space between the cell content and its borders. If we
do not specify a padding, the table cells will be displayed without padding.
To add padding only above the content, use the padding-top property.
Add padding to the other sides with the padding-bottom, padding-left,
and padding-right properties.
4. Adding Alignment in HTML Table
The HTML <table> align Attribute is used to specify the alignment of the
table and its content.

To align the contents of table by the help of CSS property. By default, the table
headings are bold and centered. To align the table contents, we must use the CSS
text-align property.
text-align value can be left or right or center.
5. Adding Border Spacing in an HTML Table
Border spacing specifies the space between the cells. To set the border-spacing
for a table, we must use the CSS border-spacing property. Cell spacing is the
space between each cell. By default the space is set to 2 pixels. To change the
space between table cells, use the CSS border-spacing property on the table

element:
[Link] in HTML table
HTML tables can have cells that span over multiple rows and/or columns. Span
is a powerful mechanism for cells to cover multiple rows and columns, offering
flexibility in structuring complex tables.
Table with Colspan
colspan allow to merge or combine adjacent table cells horizontally, creating a
single, wider cell that spans across multiple columns. (OR) To make a cell span
more than one column, we must use the colspan attribute. The value of
the colspan attribute represents the number of columns to span.
Table with rowspan
To make a cell span more than one row, we must use the rowspan attribute. To
make a cell span over multiple rows, use the rowspan attribute. The value of
the rowspan attribute represents the number of rows to span.
Table with Rowspan and Colspan Togther
[Link]
8. Caption in an HTML Table
The <caption> tag defines a table caption. Provide a name to table is caption.
9. Adding a Background Colour to the Table
A color can be added as a background in an HTML table using the “background-
color” option. The <caption> tag must be inserted immediately after
the <table> tag. By default, a table caption will be center-aligned above a table.
However, the CSS properties text-align and caption-side can be used to align and
place the caption.
10. Creating Nested Tables
Nesting tables simply means making a Table inside another Table. Nesting tables
can lead to complex tables layouts, which are visually interesting and have the
potential of introducing errors.
HTML bgcolor Attribute
HTML bgcolor attribute is used to set the background color of an HTML
element. Bgcolor is one of those attributes that has become deprecated with the
implementation of Cascading Style Sheets (see CSS Backgrounds). It accepts
color names, hexadecimal color codes, or RGB values to customize the
background appearance of the specified element. In modern web development,
styling, including background color is typically handled using CSS properties
rather than HTML attributes.
Note: The bgcolor attribute is not supported in HTML5.
 Frame
The <frame> tag was used in HTML 4 to define one particular window (frame)
within a <frameset>.
HTML frames are used to divide your browser window into multiple sections
where each section can load a separate HTML document independently. This is
achieved using a collection of frames within a frameset tag. A collection of frames
in the browser window is known as a frameset. The window is divided into frames
in a similar way the tables are organized: into rows and columns.
The <frame> tag is no longer recommended as it is not supported by
HTML5. Instead of using this tag, we can use
the <iframe> or <div> with CSS to achieve the similar effects.

The above example basically used to create three horizontal frames i.e. top,
middle and bottom using row attribute of frameset tag and the noframe tag is used
for those browser who doesn’t support no frame.
HTML frame Tag Attributes
HTML <frame> name Attribute
This attribute is used to give names to the frame. It differentiate one frame from
another. It is also used to indicate which frame a document should loaded into.
Example
<frame name = "top" src = "C:/Users/dharam/Desktop/[Link]" />
<frame name = "main" src = "C:/Users/dharam/Desktop/[Link]" />
<frame name = "bottom" src = "C:/Users/dharam/Desktop/col_last.png" />
HTML <frame> src Attribute
This attribute in frame tag is basically used to define the source file that should
be loaded into the [Link] value of src can be any url.
Example <frame name = "left" src = "/html/[Link]" />
In the above example name of frame is left and source file will be loaded from
“/html/[Link]” in frame.
HTML <frame> marginwidth Attribute
This attribute in frame tag is used to specify width of the spaces in pixels between
the border and contents of left and right frame.
Example
<frame marginwidth="20">

HTML <frame> marginheight Attribute

This attribute in frame tag is used to specify height of the spaces in pixels between
the border and contents of top and bottom frame.
Example
<frame marginheight="20">
HTML <frame> scrollbar Attribute
To control the appearance of scroll bar in frame use scrollbar attribute in frame
tag. This is basically used to control the appearance of scrollbar. The value of this
attribute can be yes, no, auto. Where the value no denotes there will be no
appearance of scroll bar.
scrollbars values: “yes”, “no”, “auto”
Example
<frame scrollbar="no">
Creating Frames in HTML
To make frames on a page we use <frameset> tag instead of <body>
tag. The <frameset> tag defines how to divide the window into frames.
The rows attribute of <frameset> tag defines horizontal frames
and cols attribute defines vertical frames. Each frame is indicated
by <frame> tag and it defines which HTML document shall open into the frame.
Following is the example to create three horizontal frames. If your browser does
not support frames, then body element is displayed.
Creating vertical Frames
Here we replaced rows attribute by cols and changed their width. This will create
all the three frames vertically.
Assignment 2
Q1. Explain Frames with their attributes.
Q2. Create a frame using the html code includes rows and cols
attributes.
Term Work Questions
Q1. Create a table which include all these terms table, tr,
th, td tags, Border, cell spacing, cell padding, width,
align, bgcolor attributes.
Q2. Write HTML code for given figure.

Reference :
1. [Link]
2. [Link]
3. [Link]