Scribd
Upload
10 views

WT-III-HTML & HTML - Img-list-Table-03

HTML & XHTML provides essential elements for creating webpages including images, hypertext links, lists, tables, and forms. Key elements include <img> for inserting images, <a> for creating hyperlinks, <ul> and <ol> for unordered and ordered lists, <table> for inserting tables with rows and cells, and form elements like <input> for collecting user input. These elements allow users to design and structure informative and interactive webpages.

Uploaded by

GANAPATHI RAM
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
10 views

WT-III-HTML & HTML - Img-list-Table-03

HTML & XHTML provides essential elements for creating webpages including images, hypertext links, lists, tables, and forms. Key elements include <img> for inserting images, <a> for creating hyperlinks, <ul> and <ol> for unordered and ordered lists, <table> for inserting tables with rows and cells, and form elements like <input> for collecting user input. These elements allow users to design and structure informative and interactive webpages.

Uploaded by

GANAPATHI RAM
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 27

HTML & XHTML

 Images

 Hypertext Links

 Lists

 Tables

 Frames and Forms.


Images

Images
HTML Image format
HTML Image format
HTML Image

• HTML <img> tag is used to display image on the web page.

• HTML <img> tag is an empty tag that contains attributes only, closing tags are not

used in HTML image element.


Attributes of HTML img tag
• The src and alt are important attributes of HTML img tag.

• All attributes of HTML image tag are given below. src , alt , width, height
Try it Yourself

 Use the <img> tag to create webpage with your team logo.

 To use the online image to place on webpage


Lists
Lists
Unordered list is represented using <ul> tag which is block tag.

• Each item in a list is specified with the content of the <li> tag.

• It can include nested lists.

• When displayed each item is implicitly preceded with a bullet.


Try it Yourself

 To create an ordered and unordered list based on your

team member name list.


Table
Tables
• A table is a matrix of cells, each possibly having content.

• The cells can include almost any element.

• Some cells have row or column labels and some have data.

• The cells in the top row often contain columns labels, those in the left most column often
contains row labels and most of the rest of the cells contain the data of the table.

• The content of a cell can be text, a heading, a horizontal rule, an image or a nested table.

• A table is specified as the content of a <table> tag.


Tables
• A border attribute in HTML 4.01 and XHTML 1.0 in the <table> tag specifies a border
between the cells.

• This attribute is not present in HTML 5.

• The styles of the border and rules in a table are specified in HTML 5 with stylesheets.

Tables are given titles with the <caption> tag, which can immediately follow <table> tag

• Each row of a table is specified as the content of a <tr> tag

• The row labels(headings) are specified as the content of a <th> tag

• The contents of a data cell is specified as the content of a <td> tag


Tables
rowspan and colspan attribute
• A table can have two levels of column labels

• If so, the colspan attribute must be set in the <th> tag to specify that the label

must span some number of columns

• If the rows have labels and there is a spanning column label, the upper left corner

must be made larger, using rowspan


Try it Yourself

 To create basic information table for your class students

 To apply colspan and rowspan to merge the rows and

coloums.
Hypertext Links
HTML Hypertext Links

• Link is the convenient way for the browser user to get from one document to any

logically related document.

• A hypertext link acts as a pointer to some resource.

• The resource can be an HTML document anywhere on the web, or it may be another

place in the same document or be a specific place (rather than the top) in some other

document.
HTML Hypertext Links
<a href="https://www.google.co.in/">
• A link is specified with the href (hypertext
Visit Google! </a>
reference) attribute of <a> (the anchor tag).

• <a> tag is inline tag.

• <a href="url">link text</a>

• The content of <a> is the visual link in the


document (clickable link).

• Links are implicitly rendered in a different


color than the surrounding text. Sometimes
they underlined .
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
HTML Hypertext Links
HTML Links - Use an Image as a Link

 To use an image as a link, just put the <img> tag inside the <a> tag:
Link to an Email Address

 Use mailto: inside the href attribute to create a link that opens the user's email
program (to let them send a new email):
Button as a Link

 To use an HTML button as a link, you have to add some JavaScript code.
 JavaScript allows you to specify what happens at certain events, such as a click of a
button:
Try it Yourself

 To create two basic webpage.

 Use the <a> tag to link both webpages


Do it Yourself

 To Create Time-Table schedule using HTML.

 To create a table with fixed header and scrollable body.

 To create table with 100% width, with vertical scroll inside table

body in HTML.

 To set the width and height of an image using HTML.

You might also like