Scribd
Upload
23 views15 pages

E - Commerce Unit - 4

The document provides an overview of HTML, its structure, and essential components for website design, including tags, hyperlinks, and formatting elements. It explains the basics of HTML, types of tags, advantages and disadvantages, and how to create a simple HTML document. Additionally, it covers the use of anchor tags for hyperlinks, document body structure, and the significance of comments in HTML code.

Uploaded by

zeguslive
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
23 views15 pages

E - Commerce Unit - 4

The document provides an overview of HTML, its structure, and essential components for website design, including tags, hyperlinks, and formatting elements. It explains the basics of HTML, types of tags, advantages and disadvantages, and how to create a simple HTML document. Additionally, it covers the use of anchor tags for hyperlinks, document body structure, and the significance of comments in HTML code.

Uploaded by

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

I BCOM- 2ND SEM NAGARJUNA DEGREE COLLEGE FOR WOMEN,

E -COMMERCE & WEB DESIGNING KADAPA


Unit-IV - Website designing

Designing a home page, HTML document, Anchor tag Hyperlinks, Head and body section, Header Section, Title,
Prologue, Links, Colorful Pages, Comment, Body Section, Heading Horizontal Ruler, Paragraph, Tabs, Images And
Pictures, Lists and Their Types, Nested Lists, Table Handling.

BASICS OF HTML
 Html stands for hyper text markup language, basically it is used to develop the web pages.
 Here the word markup refers to the highlighted instance of the given aspects. i.e. an author can highlight a
particular word of his written document to grab the attention of the readers.
 In the similar way the hypertext markup language highlights the different views of a given web page in terms
of headers, titles, plain text, images, sounds, videos and etc.
 In Html, all these can be performed with the help of tags, where a tag is nothing but a special keyword
supported by Html which indicates in between < , > symbols.

Creating an Html
1. Html code should be taken in any text editor, like notepad, etc.
2. Every html code should begins with <html> and must be ends with </html>
3. The text will be placed using the structure of html code.
4. After completion of the code, save the file using the extension “ .htm” or “.html”ex:
filename.html
5. The output of the file can be viewed using the “filename.html” on any available web browsers in our
computer, like Internet explorer, firefox, etc.
6. If the browser is not displaying your expected output it means that the html code is carries some errors.
Then we should be sufficiently debugged the program with our required output appears.
7. It has to be notice that the html is not a case sensitive, i.e. we can write the code in upper case letters or
in lower case letters.

 HyperText
Hypertext means that some text in the HTML document carries a link to a different location. Such links
can be present either on the same page or some other page located on another computer page. On clicking this
'hot spot', the viewer is transferred to that location.

 Markup:
Markup means that specific portions of a document are marked up to indicate how they should be
displayed in the browser.
HTML carries information about the web page though, the display of the document is solely dependent on
the browser. For this reason, you should test your HTML code in the two most used browsers, Internet Explorer
from Microsoft and Netscape Communicator from Netscape. With HTML you can embed various objects such as
images, video, sound in your pages.

 Tags:
In HTML, the commands or instructions are given in the form of tags. That is HTML formattingis specified by
using tags.A tag is a format name surrounded by angle brackets. HTML markup tags are usually called HTML
tags
 HTML tags are keywords surrounded by angle brackets like <html>
Prepared by
Patan Arifoon.,MCA(M.Tech)
UGC- NET & APSET QUALIFIED
I BCOM- 2ND SEM NAGARJUNA DEGREE COLLEGE FOR WOMEN,
E -COMMERCE & WEB DESIGNING KADAPA
 HTML tags normally come in pairs like <b> and </b>
 The first tag in a pair is the start tag, the second tag is the end tag
 Start and end tags are also called opening tags and closing tags.
 They are not case sensitive: <HEAD>, <head>, and <hEaD> are equivalents;

 White space, tabs, and new lines are ignored by the browser, they can be used to makethe HTML
source more readable without affecting the way that the page is displayed
 Actually they’re not ignored, but multiple white spaces are replaced by a single spacewhile new lines and tabs
are treated as spaces.
 If a browser doesn’t understand a tag it will usually ignore it.
 Tags instruct the browser how to display HTML document code.
 It consists of a keyword enclosed within angular brackets ( < > ).

Types of tags
In general there are two types of tags.
1. Empty tags / single tags
2. Container tags

1. Empty tags : Empty tag represents the formatting options of text such as the line breaks, horizontal ruler,
paragraph and etc..
These tags has only single tag, mentioned as the start tag.Ex: <br>, <hr>
2. Container tags : Container tag has a section of text, which specifies the formatting construction for all
of the selected text. Container tag has two tags representing the starttag and close tag. At the end tag it
representing the addition of forward slash before the tag element.
Ex : <html> …. </html>
<body> …. </body>
<b> …. </b>

Advantages of HTML:

1. First advantage it is widely used.


2. Every browser supports HTML language.
3. Easy to learn and use.
4. It is by default in every window so you don't need to purchase extra software.

Disadvantages of HTML:

1. It can create only static and plain pages so if we need dynamic pages then HTML is not useful.
2. Need to write lot of code for making simple webpage.
3. Security features are not good in HTML.
4. If we need to write long code for making a webpage then it produces some complexity

Prepared by
Patan Arifoon.,MCA(M.Tech)
UGC- NET & APSET QUALIFIED
I BCOM- 2ND SEM NAGARJUNA DEGREE COLLEGE FOR WOMEN,
E -COMMERCE & WEB DESIGNING KADAPA
Q) Structure of HTML Program

All HTML documents follow the same basic structure. They have the root tag as <html>, which contains
<head> tag and <body> tag. The head tag is used for control information by the browser and the body tag contains
the actual user information that is to be displayed on the screen. The basic document is shownbelow.

<html> tag:
The <html> tag encloses all other HTML tags and associated text within your document. It is an optional tag.
You can create an HTML document with this tag and your web browser can still read it and display it.But it is
always a good form to include the start and end tags.
<head> tag:
This tag comes after the HTML start tag. It contains <title> tag to give the document title that displays onthe
browsers title bar at the top.
Example: <title>tutorialtpoint.net</title>
The <head> also consists of <meta> tag.

 The <meta> tag provides metadata about the HTML document. Metadata will not be displayed onthe
page, but will be machine parsable.
 Meta elements are typically used to specify page description, keywords, author of the document,last
modified and other metadata.
 The metadata can be used by browsers (how to display content or reload page), search engines
(keywords), or other web services.

Example:
<head>
<meta charset="UTF-8">
<meta name="description" content="Free Web tutorials">
<meta name="keywords" content="HTML, CSS, XML, JavaScript">
<meta name="author" content="John Doe">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
Prepared by
Patan Arifoon.,MCA(M.Tech)
UGC- NET & APSET QUALIFIED
I BCOM- 2ND SEM NAGARJUNA DEGREE COLLEGE FOR WOMEN,
E -COMMERCE & WEB DESIGNING KADAPA
<body> tag:

This tag contains all the text and graphics of the document at which all the HTML tags that are used forcontrol
and formatting of the tag. The actual content of the webpage are placed in the body section. The tag consists of
various attributes. They are bgcolor, link, alink, vlink, text.

Example: <body bgcolor=”read” alink=”blue” vlink=”yellow”>


Program: Write a HTML program to display simple welcome message.
<html>
<head>
<title> Basic HTML document </title>
</head>
<body>
<h1> Welcome to the world of Web Technologies</h1>
<p> A sample HTML program </p>
</body>
</html>

Q) Anchor tag & Hyperlinks


The <a> tag (anchor tag) in HTML is used to create a hyperlink on the webpage. This hyperlink is used to
link the webpage to other web pages or some section of the same web page. It’s either used to provide an
absolute reference or a relative reference as its “href” value.
Syntax:
<a href=”URL address” target=”frame address” name=”section name” shape=”circle | rectangle”> … </a>
In the above statement
href – name of the source file
target --- name of the frame where we divide the webpage into frames
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
name --- provides the section for the webpage
Shape --- provides the shape of the area in the image.
HTML Link Colors
By default, a link will appear like this (in all browsers):

 An unvisited link is underlined and blue

 A visited link is underlined and purple


 An active link is underlined and red
Types of hyperlinks:
There are two different types of hyperlinks. They are
Prepared by
Patan Arifoon.,MCA(M.Tech)
UGC- NET & APSET QUALIFIED
I BCOM- 2ND SEM NAGARJUNA DEGREE COLLEGE FOR WOMEN,
E -COMMERCE & WEB DESIGNING KADAPA
 Absolute hyperlink(External hyperlink)
 Relative hyperlink(Internal hyperlink)
Absolute hyperlink:
An absolute hyperlink uses a complete URL to connect browsers to a webpage or online
resource. Links that uses a complete URL to point to a resources are called absolute because they provide a
complete, stand- alone path to another web resource. The following address is an example of a full address in
an absolute hyperlink:
<a href=”http://www.microsoft.com/”>Microsoft</a>

Relative hyperlink :
A link to a webpage within the same website is referred to as relative hyperlink.
Use the following rules with relative links in the HTML pages.
 Create relative links between the resources in the same domain.
 Because both resources are in the same domain you may skip domain information from the URL

E.g. <a href=”index.html”>Home page</a>


In the above example when a browser sees a link without a domain name, the browser
assumes that the link is relative and uses the domain and path from the linking page to find the
linked page.
<!home.html>
<html>
<head>
<title>Relative hyperlink</title>
</head>
<body>
<h1>The following text is a relative hyperlink to a page on the same website</h1>
<a href=”index.html”>Home page</a>
</body>
</html>
The above example works only if home.html and about.html are in the same directory.
Link to specific locations within the same webpage :
In HTML, hyperlinks or simply links can help users navigate a single webpage from one section to
another section. This type of link is called intradocument hyperlink or named document link.
An intradocument hyperlink uses a URL like this :
<a href=”#top”>Back to top</a>
Q) Document Body

The document / webpage consist of plenty of tags which are used to describe the content of the page. In HTML,
document is structured as blocks of text, each of which can be formatted independently. A block has no meaning
outside of a particular document.

Prepared by
Patan Arifoon.,MCA(M.Tech)
UGC- NET & APSET QUALIFIED
I BCOM- 2ND SEM NAGARJUNA DEGREE COLLEGE FOR WOMEN,
E -COMMERCE & WEB DESIGNING KADAPA

The two major blocks of text in HTML document are the paragraph and heading. All most all text and images
in your document will be part of either a heading or a paragraph.

The HTML paragraph tag (<p>):

Paragraph tag: <p>


1. HTML paragraph tags are used to define the HTML paragraph element.
2. The paragraph element begins with the HTML <p> tag and ends with the HTML </p> tag.
3. The HTML paragraph element should not contain tables and other block elements.
4. <p> tag having one optional attribute that is align.
5. The align attribute specifies the alignment of the text within a paragraph.
Syntax: <p [align=”left” | “center” | “right”]> </p>
or
Syntax: <p align="value">0

Attribute Values
Value Description
left Left-align text
right Right-align text
center Center-align text
Stretches the lines so that each line has equal width (like in newspapers and
justify
magazines)

Q) HTML Heading tags


The <h1> to <h6> tags are used to define HTML headings. <h1> defines the largest heading and <h6> defines the
smallest heading.
The align attribute specifies the horizontal alignment of a heading. <h1> … </h1> is displayed biggest
heading and <h6> … </h6> is displayed small headings.

Syntax:
<h1 [align=”left” | “center” | “right”]> ............. </h1>
<h2 [align=”left” | “center” | “right”]>…………….</h2>
<h3 [align=”left” | “center” | “right”]> ............. </h3>
<h4 [align=”left” | “center” | “right”]>……………</h4>
<h5 [align=”left” | “center” | “right”]> ............. </h5>
<h6 [align=”left” | “center” | “right”]>……………</h6>

Q) Horizontal ruler tag - <hr>


The <hr> tag creates a horizontal line in an HTML page. The hr element can be used to separate content in an
HTML page.
HTML Horizonal Rule tag displays a horizontal line on the HTML web page when it load in a web browser.
You can customize the appearance of horizontal line using its attributes. You can set the height, width, color and
alignment of the HTML hr tag.

Prepared by
Patan Arifoon.,MCA(M.Tech)
UGC- NET & APSET QUALIFIED
I BCOM- 2ND SEM NAGARJUNA DEGREE COLLEGE FOR WOMEN,
E -COMMERCE & WEB DESIGNING KADAPA

<hr [align=”left” | “center” | “right”] [size=”n”] [noshade] [width=”nn %”]>


Hr Tag Attributes:
1. color - Specifies the color of the Horizontal line in the html document.
2. align - Specifies the alignment of a hr element
3. width - Specifies the width of a hr element
4. size - Specifies the height of a hr element, it is given in pixels.
5. noshade - Specifies that a hr element should render in one solid color (noshaded), insteadof a shaded
color

Q) COMMENTING YOUR PAGES


The comment tag is used to insert a comment in the source code. Comments within your source code can be used
to explain your code which may help you with editing at a later date. The comment code will be ignored by the
browser. When you put comments in your HTML code, begin the comment with <!-- end it with -->.
Comments can be placed in either the head or body of your documents. Good practicein programming is
to use comments to describe what the code does rather than how it works. Aprogrammer might modify the way that
the code performs at a later date but they will still want the same outcome from it.

Ex:
<html>
<head>
<title> NAGARJUNA DEGREE COLLEGE
</title>
</head>
<body>
<!-- this will be displayed in the body of the document -->
Nagarjuna degree college for women, kadapa
</body>
</html>

Q) COLOFUL PAGES DESIGNING

 BASEFONT TAG <basefont> (Not Supported in HTML5)


HTML <basefont> tag was used to specify the default value of font-size, color, and font-family for all
content written within an HTML document. In HTML the closing tag </basefont> is not required, but in
XHTML the end tag is required.
Note: The <basefont> was deprecated in HTML 4 and completely removed from HTML5 sodo not use this tag,
instead of it you can use CSS to style the document.

Syntax: <basefont color="blue" size="15" face="arial">

Example Program
<!DOCTYPE html>
<html>

Prepared by
Patan Arifoon.,MCA(M.Tech)
UGC- NET & APSET QUALIFIED
I BCOM- 2ND SEM NAGARJUNA DEGREE COLLEGE FOR WOMEN,
E -COMMERCE & WEB DESIGNING KADAPA
<head>
<title>Basefont tag</title>
<basefont color="red" size="15" face="arial"> Hi
</head>
<body>
<h2>Example of Basefont tag</h2>
<p>The basefornt tag is not supported in HTML5 use CSS to style the document</p>
</body>
</html>

TEXT: <font>
The text on an HTML page can be used and altered in a number of ways:
The actual text used can be changed to attempt to force the browser or changed to the user wish. Here the text
should be used with <font>.

Text formatting tags :


To specify the overall font for your page add the <font> tag at the beginning of the <body> section. The <font>
tag is used to specify the text font size, and optionally the color and font name. The <font> applies to the text that
follows it. This tag is not supported by some browsers.

Syntax: <FONT COLOR= "red" FACE="Arial" SIZE="3">


Lets you specify a minimum font size for basic text for basic text but not for headings.
The size argument takes an integer from 1 to 7.

<font size = ”n” color = ”#rrggbb”>


Sets the font size relative to either the default value or to any size set by <font>. Absolute font sizes can be
forced by using an integer from 1 to n; relative font sizes are set by using 1 to n.
The color of the text is set with the color argument. This takes a hex value which represents the amounts of
red, green, and blue in the chosen color.

Q) FORMATTING TECHNIQUES USED IN HTML DOCUMENTS

The text formatting techniques are used to maintain an effective appearance of our web document. He we represent
the formatting techniques to our text using the formatting tags. In html there are number of formatting tags are
available, but they will appear in its compatible web browsers. All these tags are not an empty(single) tags, these
are container tags. So we must close with its close tags.
They are mainly

a) <b>..</b>
This tag is used to display the text in Bold letters.
b) <i> .. </i>

This tag is used to display the text in Italic letters.

Prepared by
Patan Arifoon.,MCA(M.Tech)
UGC- NET & APSET QUALIFIED
I BCOM- 2ND SEM NAGARJUNA DEGREE COLLEGE FOR WOMEN,
E -COMMERCE & WEB DESIGNING KADAPA

c) <u> .. </u>

This tag is used to display the text with giving underline.


d) <p> .. </p>

This tag is used to display the text in new paragraph.

e) <big> .. </big>
This tag is used to display the text in BIG letters.

f) <small> .. </small>
This tag is used to display the text in small letters.

g) <strong> .. </strong>
This tag is used to display the text in STRONG letters.

h) <strike> .. </strike>
This tag is used to display the text with strikethrough.

i) <centre> .. </centre>
This tag is used to display the text in centre alignment.

j) <pre> .. </pre>
This tag is used to display the text in pre formatted text.
k) <em>.. </em>
This tag is used to display the text in emphasis.

k) <cite>.. </cite>
This tag is used to display the text in citation.

l) <sup>.. </sup>
This tag is used to display the text in super script letters.

m) <sub>.. </sub>
This tag is used to display the text in sub script letters.

n) <address> .. </address>
This tag is used to display the text as address by line by line.

o) <blink> .. </blink>
This tag is used to display the text in blinking letters.

p) <marquee> .. </marquee>
This tag is used to display the text as scrolling letters.

Prepared by
Patan Arifoon.,MCA(M.Tech)
UGC- NET & APSET QUALIFIED
I BCOM- 2ND SEM NAGARJUNA DEGREE COLLEGE FOR WOMEN,
E -COMMERCE & WEB DESIGNING KADAPA

Q) Explain about LISTS in HTML.

The list refers to arrange the elements in a group, or to record of short pieces of information arranged in a
specific format. For example, we have a shopping list, list of names of employees, list of names of places,etc.. The
html supports FOUR types of lists.
They are
1. unorder lists
2. order lists
3. miscellaneous lists or Nested lists
4. definition lists
The most common HTML lists are ordered and unordered lists

 Unordered Lists
If we intend to display certain text on the webpage with each independent sentence being initiated with out any
sequence, then we represent them using unordered list.
An unordered list starts with the <ul> tag. Each list item starts with the <li> tag, and ends with </li>. The
unordered list ends with </ul> . The list items are marked with bullets (typically small black circles).
Syntax : <ul type=”disc” | “square” | ”circle” >……..</ul>

Example program.
<html>
<head>
<title>unordered list</title>
</head>
<body>
<h1> science courses</h1>
<ul>
<li> B.Sc CPM </li>
<li> B.Sc MEC </li>
<li> B.Sc MPC</li>
<li> B.Sc CBZ</li>
</ul>
</body>
</html>

 Ordered Lists
If we intend to display certain text on the webpage with each independent sentence being initiated with in an
order or sequence, then we represent them using ordered list.
An ordered list starts with the <ol> tag. Each list item starts with the <li> tag, and ends with
</li>. The unordered list ends with </ol> .The list items
are marked with numbers.
Syntax : <ol type=”1” | ”a” | “I” start=”n”>
…..
</ol>
Prepared by
Patan Arifoon.,MCA(M.Tech)
UGC- NET & APSET QUALIFIED
I BCOM- 2ND SEM NAGARJUNA DEGREE COLLEGE FOR WOMEN,
E -COMMERCE & WEB DESIGNING KADAPA

(Or)
<ol>
<li> item1 </li>
<li> item2 </li>
<li> item3 </li>
</ol>

Example program :
<html>
<head>
<h1><u> ORDERED LIST</u></h1>
</head>
<body>
<h1> science courses</h1>
<ol>
<li> B.Sc CPM </li>
<li> B.Sc MEC </li>
<li> B.Sc MPC</li>
<li> B.Sc CBZ</li>
</ol>
</body>
</html>

Here in the above example program, we include the attributes to change the list of formats in <ol>.

1. suppose, in the above program the ordered list tag give its attribute like
<ol type = “A” >
Then it gives the list of contents using with a sequence from A to Z.
2. suppose, we give the attribute like
<ol type= “ I” >
Then it gives the list of contents using with roman letter from I to end of list.

 Miscellaneous Lists / Nested Lists


If we intend to display certain text on the webpage with each independent sentence being initiated with order or
sequence, and also contains the unordered, then we represent them using Nested list.
One list type is included in another list type is usually referred as Nested or miscellaneous list. Here, in
these lists we can merge the ordered and unordered contents ina single list.
<ol>
<li>Coffee</li>
<ul>
<li> coffee powder </li>
<li> milk </li>
<li> sugar </li>
</ul>
<li>Tea </li>
<ul>
<li> tea powder </li>
Prepared by
Patan Arifoon.,MCA(M.Tech)
UGC- NET & APSET QUALIFIED
I BCOM- 2ND SEM NAGARJUNA DEGREE COLLEGE FOR WOMEN,
E -COMMERCE & WEB DESIGNING KADAPA
<li> milk </li>
<li> sugar </li>
</ul>
</ol>

 Definition List (DL):


<dl>….. </dl>
This tag is used for the third category i.e., definition list, where numbers or bullet isnot used in front of thelist
item, instead it uses definition for the items.
<dt>…..</dt>
This is a sub tag of the <dl> tag called as definition term, which is used for markingthe items
whosedefinition is provided in the next data definition.
<dd> …. </dd>
This is a sub tag of the <dd> tag, definition of the terms are enclosed within these tags. The definition mayinclude
any text or block.

Q) COLORS
A web page can be made up colourful by using some colour attributes in the body tag. Here we used to change the
background design of the page, background colours of the page and changing the colours of the text and so on…
Here we can use mainly
 Back ground design
 Back ground colour
 Text colour

1. Back ground design:


The back ground design of the page can be designed with any available picture, with itsformats like bmp,
gif, jpg, jpeg, etc. It can be represented in body tag.
Syntax : <body src= “ path of the picture location ”>
Or
<body src= “ pic name.format”>
For example, our image is “111.bmp” , then we can specify a body of the page using thebody tag can be
represented as
<body src=”111.bmp”>

2. Background colour :
In general, any colour is the combination of three basic colours. They are rgb (red, green, blue). In html each of
the above colour has a degree from 00 to FF in hexadecimal form that are permits 256 colours can be
maintainable.
We can assume a six digit format, using with #, like #rgb
#000000 to #FFFFFF

If we assign the #00FF00, i.e. red=00, green=FF, blue=00 then it will display green.In this, the base
colors red, green, blue have 256 colours each.
So, we can create 256x256x256 = 1,67,77,216 colors to use.
Prepared by
Patan Arifoon.,MCA(M.Tech)
UGC- NET & APSET QUALIFIED
I BCOM- 2ND SEM NAGARJUNA DEGREE COLLEGE FOR WOMEN,
E -COMMERCE & WEB DESIGNING KADAPA

The background colour of the web page can be selected by assigning the attribute bgcolor inthe <body>.
The general form is <body bgcolor = “colour name”>
Ex: <body bgcolor = “red”>
<body bgcolor = “#FF0000”>
3. Text colour :
The colour of the text in the web page can be selected by assigning a color string to thetext/font attribute.
We can assign the text/font attribute in the <body>.
The general form is <body text/font = “colour name”>
Ex: <body text/font = “red”>
<body text/font = “#FF0000”>

COLORS REPRESENTATION
 HTML colors are defined using a hexadecimal notation (HEX) for the combination ofRed,
Green, and Blue color values (RGB).
 The lowest value that can be given to one of the light sources is 0 (in HEX: 00). Thehighest
value is 255 (in HEX: FF).
 HEX values are specified as 3 pairs of two-digit numbers, starting with a # sign.

Attribute Values
Value Description
color_name Specifies the text color with a color name (like "red")
hex_number Specifies the text color with a hex code (like "#ff0000")
rgb_number Specifies the text color with an rgb code (like "rgb(255,0,0)")

Q) IMAGES
 Images are used to increase the visibility and shows the effectiveness of our webpage.
 Adding images to the HTML document will arose a sense of interest to the end user.
 Including the graphics in a page will make the web more attractive.
 Html provides a unique way to include any type of graphic file into the document, but many browsers support
only gif(graphic interchange format), jpg ( joint photographic group) and jpeg (joint photographic expert group)
formats.
 The <img> used to embeds an image in an HTML page, here notice that images are not technically inserted
into an HTML page, images are linked to HTML pages.
 The <img> tag creates a holding space for the referenced image.

Syntax :

<img src=”URL”|”name”
height=”n” height=”n” [alt=”string”][align=”top”|”center”|”bottom”] [usemap=”URL]>
….
</img>

The <img> tag has mainly two required attributes: src and alt.

Prepared by
Patan Arifoon.,MCA(M.Tech)
UGC- NET & APSET QUALIFIED
I BCOM- 2ND SEM NAGARJUNA DEGREE COLLEGE FOR WOMEN,
E -COMMERCE & WEB DESIGNING KADAPA
src: src stands for source. It refers to the filename of an image. It specifies the URL(uniform resource
locator), where the image is actually stored in the web server or in the computer system.
For example : <img src=”c:\windows\forest.bmp”>
alt : alt stands for alternate. Some browsers can not display images or sometimes it takes long time to
display the image. In such cases, the ALT attribute is used to display an alternate message.

Optional Attributes
1. align : It is used to align or arrange the image on the web page. These values can be
left/right/centre/top/bottom.
2. border : It is used to set the border to an image. The default value is zero.
3. height / width : height and width of the image can be specified using this attribute.These values
can be used in pixels %.
4. hspace / vspace : using this attribute, the white spaces or gaps existing between thetext and the
image can be managed.
5. name : usually, this attribute used to specify the name of the image.

Ex : <img src="angry.gif" alt="Angry face" align= centre width="32" height="32" border=5>

Q) Explain about table handling in HTML.


In HTML, Tables are defined with the <table> tag. Table is divided into rows; each row divided
into data cells. The data cells contains text, images, lists, paragraphs, forms, horizontal rules, tables etc.
The most important layout aspects that can be done with tables are:
 Divide the page into different sections.
 Creating menus.
 Adding interactive form fields.
 Easy alignment of image that have been cut into smaller pieces.
 A simple way to allow text to be written in two or more columns next to each other.
Syntax:
<table [align=”Left” | “Center” | “Right” | “Justify”] [bgcolor=”color”] [border=”n”]
[Cellpadding=”n”] [cellspacing=”n”] [width=”n%”] [height=”n%”] >

Attribute Value Description


Border Pixels Specifies the border width. A value of “0” means no border
Bordercolor Color name Specifies the color of the table’s border.
Align Right/left/center Specifies the alignment of a table
Bgcolor Color name Specifies the background color of the table.
Background URL Specifies the background image for the table.
Height Pixels or % Specifies the height of the table
Width Pixels or % Specifies the width of the table
Cellspacing Pixels or % Specifies the space between cells.
Cellpadding Pixels or % Specifies the space between the cell borders and their contents

Prepared by
Patan Arifoon.,MCA(M.Tech)
UGC- NET & APSET QUALIFIED
I BCOM- 2ND SEM NAGARJUNA DEGREE COLLEGE FOR WOMEN,
E -COMMERCE & WEB DESIGNING KADAPA

Table Row <tr>: Each row of the table is created using. It has the following form
Syntax : <tr align=”center”|”left”|”right”][valign=”top”|”center”|””bottom]> …. </tr>

Table Data <td>: used to represent table cell and it data.


Syntax :

<td align=”center”|”left”|”right”][valign=”top”|”center”|””bottom][nowrap][colspan=”n”][rowspan=”n”]>
….
</td>

Table Heading <th>: Used to create headings for columns in a table.

Syntax :
<th align=”center”|”left”|”right”][valign=”top”|”center”|””bottom][nowrap][colspan=”n”][rowspan=”n”]>
…. </th>

The attributes of <tr>, <td>, <th> are describe below

Attribute Description
Align Used to align the contents horizontally
Valign Used to align the content vertically
Nowrap If Nowrap is set the content will not be automatically wrapped as the table is formatted for the screen
Colspan This controls how many columns a text in the table should span
Rowspan This defines the number of rows the text in the table should span

Advanced Tables tags

<caption> …… </caption> : This optional element is used to provide a string which describes thecontent
of the table. If used it must immediately follow the table element.

Example: <caption>Student Records</caption>

<tbody>............... </tbody>: It is used to group the body content in a table.

<thead> .............. </thead>: It is used to group the header content in a table.

<tfooter> ...............</footer>: It is used to group the footer content in a table.

<colgroup [span=”n”][width=”n”]> ................ </colgroup>: It specifies a group of one or more columns in a


table for formatting. Each group of columns can be assigned a default width which will apply to all
columns. The “span” indicates the number of columns in the group.

<col [span=”n”][width=”n”]>................ </col>: It is used with <colgroup> element to specify column


properties for each column.

Prepared by
Patan Arifoon.,MCA(M.Tech)
UGC- NET & APSET QUALIFIED

You might also like