3 Html, list, Table, Images

Web Technology
Lecture- 4
HTML: List, Table, Images

By
Mr. Madhukar
Assistant Professor
Department of CSIT
KIET, Ghaziabad
HTML
• HTML refers to Hyper Text Markup Language.
• HTML is the standard markup language for creating Web pages.
• HTML was created by Berners-Lee in late 1991 but "HTML 2.0" was the first
standard HTML specification which was published in 1995.
• It describes the structure of a Web page.
• HTML consists of a series of elements.
• HTML elements tell the browser how to display the content.
• HTML contains predefined tags(elements) which help to create web content.
• Hypertext refers to the way in which Web pages (HTML documents) are linked
together. Thus, the link available on a webpage is called Hypertext.
• As its name suggests, HTML is a Markup Language which means you use HTML to
simply "mark-up" a text document with tags that tell a Web browser how to
structure it to display.
HTML contd.
• HTML tags:
• HTML is a markup language and makes use of various tags to format the
content. These tags are enclosed within angle braces <Tag Name>.
• Some basic tags are:
i. <!DOCTYPE...>This tag defines the document type and HTML version.
ii. <html>This tag encloses the complete HTML document and mainly
comprises of document header which is represented by <head>...</head>
and document body which is represented by <body>...</body> tags.
iii. <head>This tag represents the document's header which can keep other
HTML tags like <title>, <link> etc.
iv. <title>The <title> tag is used inside the <head> tag to mention the
document title.
HTML contd.
iv. <body>This tag represents the document's body which keeps other HTML tags like <h1>, <div>,
<p> etc.
v. <p>This tag represents a paragraph.
• HTML elements: An HTML element is defined by a start tag, some content, and an end tag.
<tagname>Content goes here...</tagname>.
Example:
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
HTML contd.
1. Container tags: Container tags are generally divided into three parts, i.e., opening
tag, content(which will display on the browser), and closing tag.
tags are:
2. Empty Tags: The tags that do not contain any closing tags are known as empty tags.
Example:
<p>This is a <br> paragraph.</p>
<hr>
<h2>This is heading 2</h2>
<pre>
My Bonnie lies over the ocean.
Oh, bring back my Bonnie to me.

</pre>
HTML list
• HTML lists allow web developers to group a set of related items in lists.
It has three types:
1. Ordered lists.
2. Unordered lists.
3. Description lists.
• Ordered Html Lists: An ordered list starts with the <ol> tag. Each list item starts
with the <li> tag.
• The list items will be marked with numbers by default:
• Example: <ol>
<li>CSE</li>
<li>IT</li>
<li>ECE</li>
</ol>
HTML list contd.
• Unordered HTML lists: An unordered list starts with the <ul> . Each list item starts with
the <li> tag. The list items will be marked with bullets (small black circles) by default.
• Example: <ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
• HTML description lists: A description list is a list of terms, with a description of each
term. The <dl> tag defines the description list. <td> tag defines the term (name), and
the <dd> tag describes each term.
• Example: <dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>
HTML Table
• HTML tables allow web developers to arrange data into rows and columns.
• A table in HTML consists of table cells inside rows and columns.
• Each table start with <Table> </table?tag.
Table rows:
• <tr> </tr>tag defines table row.
Table data:
• <td> </td>tag stands for table data.
Table Headers:
<th> </th> tag creates cells to be headers.
HTML Table contd.
Table Borders: To add a border, use the CSS border property on table,
th, td elements. Example:
table, th, td {
border: 1px solid black;
}
• Table sizes: Use the style attribute with the width or height
properties to specify the size of a table, row or column.
Example: <table style="width:100%">
<tr style="height:200px">
<td>50</td>
</tr>
HTML Table contd.
• HTML tables can adjust the padding inside the cells, and also the space between the
cells.
• Cell Padding: Cell padding is the space
between the cell edges and the cell content.
To add padding on table cells, use the CSS
Padding property. By default the padding is set to 0.
Example: th, td {
padding: 15px;
}
• Cell Spacing: To change the space between table cells use the CSS border-spacing
property on the table element. Example.
table {
border-spacing: 30px;
}
HTML Table contd.
• HTML colspan and rowspan: HTML tables can have cells that spans over
multiple rows and/or columns.
• To make a cell span over multiple columns, use the colspan attribute.
Example: <table>
<tr>
<th colspan="2">heading</th>
• To make a cell span over multiple rows, use the rowspan attribute.
• Example
<tr>
<th rowspan="2">number</th>
<td>555-1234</td>
HTML image contd.
• Images can improve the design and the appearance of a web page.
• 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> 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:
1. src - Specifies the path to the image.
2. alt - Specifies an alternate text for the image.
Syntax: <img src="url" alt="alternatetext">
HTML image contd.
• HTML Image Maps
The HTML <map> tag defines an image map. An image map is an image with
clickable areas. The areas are defined with one or more <area> tags.
The idea behind an image map is that you should be able to perform different
actions depending on where in the image you click.
To create an image map you need an image, and some HTML code that
describes the clickable areas.
The image is inserted using the <img> tag.
The only difference from other images is that you must add a
usemap attribute:The usemap value starts with a hash tag # followed by the
name of the image map, and is used to create a relationship between the
image and the image map.
HTML image contd.
• Image Map:
The <map> element is used to create an image map, and is linked to the
image by using the required name attribute
<img src=“KIET.jpg" alt=“KIET" usemap="#COLLEGE">
<map name=" COLLEGE ">
CLICKABLE AREAS
A clickable area is defined using an <area> element.
Shape: RECT, POLY, CIRCLE, DEFAULT
COORDS
<area shape="rect" coords=“24, 64, 170, 250" href=“CAMPUS.htm">.
Thank You

3 Html, list, Table, Images

Uploaded by

Copyright:

Available Formats

3 Html, list, Table, Images

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

3 Html, list, Table, Images

Uploaded by

Copyright:

Available Formats

Web Technology

HTML: List, Table, Images

Oh, bring back my Bonnie to me.

You might also like