HTML
SE SSION-3
[Link]
Links
HTML links, or hyperlinks, connect web pages. They’re created using the <a> tag with the href
attribute, which specifies the destination URL. Users can click on links to navigate between different
pages or resources.
Note: A hyperlink can be represented by an image or any other HTML element, not just text
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
<a>...........</a>: anchor tag is used to enable links.
◦ Attributes(name,id,href,target)
◦ href :hypertext reference
Syntax:
<a href="url" target="_blank">link text</a>
[Link]
Target attributes
Attribute Description
_blank Opens the linked document in a new window or tab.
Opens the linked document in the same frame or window as the
_self
link. (Default behavior)
_parent Opens the linked document in the parent frame.
_top Opens the linked document in the full body of the window.
Opens the linked document in a specified frame. The frame’s
framename
name is specified in the attribute.
[Link]
Type of links
◦ Inter Document Linking:
◦ referred to current page
◦ Intra Document Linking:
◦ click on text ,referred to next page or location or url.
◦ Object Linking:
◦ click on object ,referred to next page or next location or url.
[Link]
Inter document
<a name="up" href="#down" id="up">Bottom</a>
<img src="images\[Link]" border="1" ></img>
<p>HTML links, or hyperlinks, connect web pages. They’re created using the <a> tag with the href attribute, which
specifies the destination URL. Users can click on links to navigate between different pages or resources.</p>
<p>Note: A hyperlink can be represented by an image or any other HTML element, not just text
By default, links will appear as follows in all browsers:<br>
An unvisited link is underlined and blue<br>
A visited link is underlined and purple<br>
An active link is underlined and red
</p>
<a name="down" href="#up" id="down">Top</a>
[Link]
Intra Document
<a name="intra1" id="intra1" href="[Link]" target="_top">Next Page</a>
<a name="intra2" id="intra2" href="images/[Link]" target="_parent">Image</a>
<a name="intra3" id="intra3" href="[Link] target="_blank">Google</a>
[Link]
Object Linking
<a name="obj" href="[Link]" target="_top"><img src="images\[Link]"></img></a>
[Link]
Favicon
HTML Favicon is a small icon representing a website, appearing in the browser’s tab or
bookmark bar. Defined using the <link> tag with `rel=”icon”`, it is also known as the Favorite
icon. Additional keywords include HTML icon, browser icon, and bookmark icon.
Steps to create Favicons
Create a small square image (e.g., 16×16 pixels or 32×32 pixels) to serve as your favicon. Save it
in a suitable format like PNG, GIF, or ICO.
Save the image with a suitable filename, such as “[Link]” or “[Link]”.
Upload the favicon image to your website’s server or hosting directory.
In the <head> section of your HTML document, add the following code
<link rel="icon" type="image/png" href="path-to-favicon">
[Link]
Tables
HTML tables offer a powerful tool for presenting data on your [Link] Table is an
arrangement of data in rows and columns in tabular format. Tables are useful for various tasks,
such as presenting text information and numerical data. A table is a useful tool for quickly and
easily finding connections between different types of data. Tables are also used to create
databases.
<table>…..
</table>
◦ attributes(border,bgcolor,border-color,cellpadding,cellspacing,width,height)
[Link]
Tags used in table
<table> Defines the structure for organizing data in rows and columns within a web page.
<tr> Represents a row within an HTML table, containing individual cells.
<th> Shows a table header cell that typically holds titles or headings.
<td> Represents a standard data cell, holding content or data.
<caption> Provides a title or description for the entire table.
<thead> Defines the header section of a table, often containing column labels.
<tbody> Represents the main content area of a table, separating it from the header or footer.
<tfoot> Specifies the footer section of a table, typically holding summaries or totals.
<col> Defines attributes for table columns that can be applied to multiple columns at once.
<colgroup> Groups together a set of columns in a table to which you can apply formatting or properties collectively.
[Link]
Table Rows
The rows can be formed with the help of combination of Table Cells. It is denoted by <tr> and </tr>
tag as a start & end tags
◦ attributes(bgcolor,align)
Table Headers
The Headers are generally use to provide the Heading. The Table Headers can also be used to add the
heading to the Table. This contains the <th> & </th> tags.
◦ attributes(bgcolor,align)
Table Cells
Table Cell are the building blocks for defining the Table. It is denoted with <td> as a start tag & </td>
as a end tag.
◦ attributes(bgcolor,align,rowspan,colspan)
[Link]
<table border="1" width="800" align="center" cellspacing="5" cellpadding="5" bgcolor="#f56f74" bordercolor="yellow">
<caption><h1>MarkList</h1></caption>
<tr bgcolor="#567889"> <th>No</th> <th>Name</th> <th>Course</th> <th>Mark</th> </tr>
<tr>
<td>1</td>
<td width="250">A</td>
<td>HTML</td>
<td>100</td>
</tr>
<tr align="center">
<td>2</td>
<td>B</td>
<td>HTML</td>
<td>120</td>
</tr>
</table>
[Link]
Rows and columns Merging
<table border="2" width="500" bordercolor="#456678" bgcolor="00ffff" cellspacing="0">
<tr> <td> </td><td> </td><td
rowspan="2"> </td><td> </td><td> </td><td> </td> </tr>
<tr> <td> </td><td> </td><td> </td><td> </td><td>
</td> </tr>
<tr> <td> </td><td> </td><td> </td><td> </td><td>
</td><td> </td> </tr>
<tr> <td> </td><td> </td><td> </td><td> </td><td>
</td><td> </td> </tr>
<tr> <td> </td><td
colspan="3"> </td> <td> </td><td> </td> </tr>
<tr> <td> </td><td> </td><td> </td><td> </td><td>
</td><td> </td>
</tr>
</table>
[Link]
END
[Link]
Merging rows
[Link]
Merging columns
[Link]