IT8078 - WEB DESIGN AND MANAGEMENT

UNIT - I
Working of Web - HTML Markup for Structure - Creating simple page - Marking up text -
Adding Links - Adding Images - Table Markup - Forms - HTML5

1. 1 WORKING OF WEB
 The moment you enter this address in your browser and you hit ENTER, a lot of
different things happen:
 The URL gets resolved
 A Request is sent to the server of the website
 The response of the server is parsed
 The page is rendered and displayed

 Actually, every single step could be split up in multiple other steps, but for a good
overview of how it all works, that's something we can ignore here. Let's have a look at
all four steps.
Step 1 - URL Gets Resolved
 The website code is obviously not stored on your machine and hence needs to be
fetched from another computer where it is stored. This "other computer" is called a
"server". Because it serves some purpose, in our case, it serves the website.
 You enter "academind.com" (that is called "a domain") but actually, the server which
hosts the source code of a website, is identified via IP (= Internet Protocol) addresses.
The browser sends a "request" (see step 2) to the server with the IP address you
entered (indirectly - you of course entered "academind.com").

Department of Information Technology, Panimalar Engineering College, Chennai.

1
 IT8078 - WEB DESIGN AND MANAGEMENT

 In reality, you also often enter "academind.com/learn" or anything like

that. "academind.com" is the domain, "/learn" is the so-called path. Together, they
make up the "URL" ("Uniform Resource Locator").
 In addition, you can visit most websites via "www.academind.com" or
just "academind.com". Technically, "www" is a subdomain but most websites simply
redirect traffic to "www" to the main page.
 An IP address typically looks like this: 172.56.180.5 (though there also is a more
"modern" form called IPv6 - but let's ignore that for now). You can learn more about
IP addresses on Wikipedia.
 How is the domain "academind.com" translated to its IP address?
 There's a special type of server out there in the internet - not just one but many servers
of that type. A so called "name server" or "DNS server" (where DNS = "Domain
Name System").
 The job of these DNS servers is to translate domains to IP addresses. You can imagine
those servers as huge dictionaries that store translation tables: Domain => IP
address.
 When you enter "academind.com", the browser therefore first fetches the IP address
from such a DNS server.
 In case you're wondering: The browser knows the addresses of these domain servers
by heart, they're programmed into the browser so to say.
 Once the IP address is known, we advanced to step 2.
Step 2 - Request Is Sent
 With the IP address resolved, the browser goes ahead and makes a request to the server
with that IP address.
 Clients and servers - Computers connected to the web are called clients and servers. A
simplified diagram of how they interact might look like this:

Department of Information Technology, Panimalar Engineering College, Chennai.

2
 IT8078 - WEB DESIGN AND MANAGEMENT

 Clients are the typical web user's internet-connected devices (for example, your
computer connected to your Wi-Fi, or your phone connected to your mobile network)
and web-accessing software available on those devices (usually a web browser like
Firefox or Chrome).
 Servers are computers that store webpages, sites, or apps. When a client device wants
to access a webpage, a copy of the webpage is downloaded from the server onto the
client machine to be displayed in the user's web browser.
In addition to the client and the server, we also need :

 Your internet connection: Allows you to send and receive data on the web. It's
basically like the street between your house and the shop.
 TCP/IP: Transmission Control Protocol and Internet Protocol are communication
protocols that define how data should travel across the internet. This is like the
transport mechanisms that let you place an order, go to the shop, and buy your goods.
In our example, this is like a car or a bike (or however else you might get around).
 DNS: Domain Name Servers are like an address book for websites. When you type a
web address in your browser, the browser looks at the DNS to find the website's real
address before it can retrieve the website. The browser needs to find out which server
the website lives on, so it can send HTTP messages to the right place (see below).
This is like looking up the address of the shop so you can access it.
 HTTP: Hypertext Transfer Protocol is an application protocol that defines a language
for clients and servers to speak to each other. This is like the language you use to
order your goods.
 Component files: A website is made up of many different files, which are like the
different parts of the goods you buy from the shop. These files come in two main
types:
o Code files: Websites are built primarily from HTML, CSS, and JavaScript,
though you'll meet other technologies a bit later.
o Assets: This is a collective name for all the other stuff that makes up a
website, such as images, music, video, Word documents, and PDFs.

Step 3 - Response Is Parsed

 The browser receives the response sent by the server. This alone, doesn't display
anything on the screen though.
 Instead, the next step is that the browser parses the response. Just as the server did it
with the request. Again, the standardization enforced by HTTP helps of course.
 The browser checks the data and metadata that's enclosed in the response. And based
on that, it decides what to do.
 You might've had cases where a PDF opened in your browser. That happened because
the response informed the browser that the data is not a website but a PDF document

Department of Information Technology, Panimalar Engineering College, Chennai.

3
 IT8078 - WEB DESIGN AND MANAGEMENT

instead. And the browser tries to pick the best handling mechanism for any data type
it detects.
Step 4 - Page Is Displayed
 As mentioned, the browser goes through the HTML data returned by the server and
builds a website based on that.
 Though it is important to know, that HTML does not include any instructions
regarding what the site should look like (i.e. how it should be styled). It really only
defines the structure and tells the browser which content is a heading, which content
is an image, which content is a paragraph etc. This is especially important for
accessibility - screen readers get all the useful information out of the HTML structure

1.2 HTML MARKUP FOR STRUCTURE

HTML stands for the HyperText Markup Language. HTML code is the major language
of the Internet's World Wide Web. Web sites and web pages are written in HTML code.
HTML is a language for designing and describing static web pages. HTML is not a
programming language, it is a markup language. A markup language is a set of markup tags.
HTML uses markup tags to describe web pages . A tag is a method of formatting HTML
documents.
It provides a means to describe the structure of text-based information in a document
— by denoting certain text as headings, paragraphs, lists, and so on — and to supplement that
text with interactive forms, embedded images, and other objects.

CREATING A SIMPLE PAGE:

Five steps that cover the basics of page production:
Step 1: Start with content: As a starting point, we’ll write up raw text content and see what
browsers do with it
Step 2: Give the document structure: HTML element syntax and the elements that give a
document its structure.
Step 3: Identify text elements: You’ll describe the content using the appropriate text elements
and learn about the proper way to use HTML
Step 4: Add an image: By adding an image to the page, you’ll learn about attributes and empty
elements.

Department of Information Technology, Panimalar Engineering College, Chennai.

4
 IT8078 - WEB DESIGN AND MANAGEMENT

Step 5: Change the page appearance with a style sheet: This exercise gives you a taste of
formatting content with Cascading Style Sheets.

Web Pages :
Web pages have many uses. Here are some important facts about why web pages are so useful.
 A cheap and easy way to spread information to a large audience.
 Another medium to market your business.
 Let the world know about you with a personal website!
 Hypertext is ordinary text that has been dressed up with extra features, such as
formatting, images, multimedia, and links to other resources.
 Markup is the process of taking ordinary text and adding extra symbols. Each of the
symbols used for markup in HTML is a command that tells a browser how to display
the text.
Words to Know :
 Tag - Used to specify ("mark-up") regions of HTML documents for the web browser
to interpret. Tags look like this: <tag>
 Element - A complete tag, having an opening <tag> and a closing </tag>.
 Attribute - Used to modify the value of the HTML element. Elements will often have
multiple attributes.

Department of Information Technology, Panimalar Engineering College, Chennai.

5
 IT8078 - WEB DESIGN AND MANAGEMENT

Example of basic HTML document Structure...

<html>
<head><title>Title goes here</title></head>
<body>Body goes here</body>
</html>
Where The text between <html> and </html> describes the web page , The text between
<body> and </body> is the visible page content.
HTML Element Syntax :
 An HTML element starts with a start tag / opening tag
 An HTML element ends with an end tag / closing tag
 The element content is everything between the start and the end tag
 Some HTML elements have empty content
 Empty elements are closed in the start tag
 Most HTML elements can have attributes

1.3 MARKING UP TEXT

Paragraphs:
Paragraphs are the most rudimentary elements of a text document. You indicate a paragraph
with the p element by inserting an opening <p> tag at the beginning of the paragraph and a
closing </p> tag after it.
Headings : h1 … h6
It is used to produce section headings for an HTML document. The content of each
heading element is shown on a separate line.
Headings are defined with the <h1> to <h6> tags. <h1> defines the largest heading.
<h6> defines the smallest heading.
<h1>Some common HTML Elements </h1>
<h2> Some Common Formatting elements </h2>
<h3>This is a heading</h3>
Where , Should use h1 for highest level, h2 for next highest, and so on.
<h2 align="left">Left aligned heading</h2>
<h2 align="center">Centered Heading</h2>
<h2 align="right">Right aligned heading</h2>

Department of Information Technology, Panimalar Engineering College, Chennai.

6
 IT8078 - WEB DESIGN AND MANAGEMENT

Spacing Element : pre and br

Pre element is used to override browser’s normal white space processing.
Use the <pre> tag for any special circumstances where you wish to have the text appear
exactly as it is typed. Spaces, tabs, and line breaks that exist in your actual code will be
preserved with the pre tag.

The table shows HTML Formatting Text Elements:

Tag Description

<b> Defines bold text

<big> Defines big text

<em> Defines emphasized text

<i> Defines italic text

<small> Defines small text

<strong> Defines strong text

<sub> Defines subscripted text

<sup> Defines superscripted text

<tt> Teletype ( Fixed width font)

<br> Element : (line break )

The line break element indicates that a new line is to start at the given point.
 br is example of an empty element, i.e., element that is not allowed to have content
 XML allows two syntactic representations of empty elements
o Empty tag syntax <br /> is recommended for browser compatibility
o XML parsers also recognize syntax <br></br> (start tag followed immediately
by end tag), but many browsers do not understand this for empty elements
For example ,
I think my brain hurts.<BR>

Department of Information Technology, Panimalar Engineering College, Chennai.

7
 IT8078 - WEB DESIGN AND MANAGEMENT

I'm ready to Operate!<BR>

 Text can be formatted in various ways:
Apply style sheet technology (next chapter) to a span element (a styleless wrapper):
< span style=”font-style:italic”>Separating Line </span>
An another element <em> marks its content as something that should be given
“emphasis” , that is content is displayed in italic in most browser. For example the string
<EM> this is example text </EM>
The Horizontal Rule : hr
The hr elements add a horizontal line to the documents. The hr element can be used to
separate content in an HTML page.
 Horizontal rule is produced using hr
 Also an empty element
 Style can be modified using style sheet technology
Syntax : <HR>
Attribute Specifications  ALIGN=[ left | center | right ] (horizontal alignment)
 NOSHADE (solid line)
 SIZE=Pixels (line height)
 WIDTH=Length (line width)
For example ,
<hr size = 5 width=20% align="left" color="red">
Lists
Humans are natural list makers, and HTML provides elements for marking up three types of
lists:
• Unordered lists. Collections of items that appear in no particular order.
• Ordered lists. Lists in which the sequence of the items is important.
• Description lists. Lists that consist of name and value pairs, including but not limited to
terms and definitions.
All list elements—the lists themselves and the items that go in them—are displayed as block
elements by default, which means that they start on a new line and have some space above
and below, but that may be altered with CSS.
<h5> Unordered List</h5>
<ul>
<li><a href="">Serif</a></li>

Department of Information Technology, Panimalar Engineering College, Chennai.

8
 IT8078 - WEB DESIGN AND MANAGEMENT

<li><a href="">Sans-serif</a></li>
<li><a href="">Script</a></li>
<li><a href="">Display</a></li>
<li><a href="">Dingbats</a></li>
</ul>
<h5> Ordered List</h5>
<ol>
<li>Gutenburg develops moveable type (1450s)</li>
<li>Linotype is introduced (1890s)</li>
<li>Photocomposition catches on (1950s)</li>
<li>Type goes digital (1980s)</li>
</ol>
<h5> Description List</h5>
<dl>
<dt>Linotype</dt>
<dd>Line-casting allowed type to be selected, used, then recirculated into
the machine automatically. This advance increased the speed of typesetting and printing
dramatically.</dd>
<dt>Photocomposition</dt>
<dd>Typefaces are stored on film then projected onto photo-sensitive
paper. Lenses adjust the size of the type.</dd>
</dl>

HTML Comments :
A comments begin with string of characters <!-- , which must contain no white space.
A comment ends with the string --> , again with no spaces.
For example ,
<!--Here is the comment text-->
Nesting Elements :
If one element is nested within another element, then the content of the inner element
is also content of the outer element is called nesting elements.
< tt> <strong> Horizontal rule </strong> </tt>
Most HTML elements are either block or inline
 Block: browser automatically generates line breaks before and after the
element content
 Ex: p,div
 Inline: element content is added to the “flow”
 Ex: span, tt, strong, a

Department of Information Technology, Panimalar Engineering College, Chennai.

9
 IT8078 - WEB DESIGN AND MANAGEMENT

Organizing Page Content:

Sections and articles
Long documents are easier to use when they are divided into smaller parts. For example,
books are divided into chapters, and newspapers have sections for local news, sports, comics,
and so on. To divide long web documents into thematic sections, use the aptly named section
element. Sections typically have a heading (inside the section element) and any other content
that has a meaningful reason to be grouped together.
The section element has a broad range of uses, from dividing a whole page into major sections
or identifying thematic sections within a single article.
<article>
<h1>Get to Know Helvetica</h1>
<section>
<h2>History of Helvetica</h2>
<p>…</p>
</section>
<section>
<h2>Helvetica Today</h2>
<p>…</p>
</section>
</article>

Headers and footers

The header element is used for introductory material that typically appears at the
beginning of a web page or at the top of a section or article. There is no specified list of what
a header must or should contain; anything that makes sense as the introduction to a page or
section is acceptable.
The footer element is used to indicate the type of information that typically comes at
the end of a page or an article, such as its author, copyright information, related documents, or
navigation. The footer element may apply to the entire document, or it could be associated with
a particular section or article.
<article>
<header>
<h1>More about WOFF</h1>
<p>by Jennifer Robbins, <time datetime="11-11-2011"
pubdate>November 11, 2011</time></p>
</header>
<p>...article content starts here…</p>
<footer>
<p><small>Copyright &copy;2012 Jennifer Robbins.</small></p>

Department of Information Technology, Panimalar Engineering College, Chennai.

10
 IT8078 - WEB DESIGN AND MANAGEMENT

<nav>
<ul>
<li><a href="">Previous</a></li>
<li><a href="">Next</a></li>
</ul>
</nav>
</footer>
</article>

Addresses
Last, and well, least, is the address element that is used to create an area for contact
information for the author or maintainer of the document. It is generally placed at the end of
the document or in a section or article within a document. An address would be right at home
in a footer element.
<address>
Contributed by <a href="../authors/robbins/">Jennifer Robbins</a>,
<a href="http://www.oreilly.com/">O'Reilly Media</a>
</address>

Generic Elements (div and span)

Divide it up with a div:
The div element is used to create a logical grouping of content or elements on the page. It
indicates that they belong together in some sort of conceptual unit or should be treated as a unit
by CSS or JavaScript. By marking related content as a div and giving it a unique id identifier
or indicating that it is part of a class, you give context to the elements in the grouping. Let’s
look at a few examples of div elements.
<div class="listing">
<img src="felici-cover.gif" alt="">
<p><cite>The Complete Manual of Typography</cite>, James Felici</p>
<p>A combination of type history and examples of good and bad type
design.</p>
</div>

Get inline with span:

A span offers the same benefits as the div element, except it is used for phrase elements and
does not introduce line breaks. Because spans are inline elements, they can only contain text
and other inline elements (in other words, you cannot put headings, lists, content-grouping
elements, and so on, in a span). Let’s get right to some examples.
<ul>

Department of Information Technology, Panimalar Engineering College, Chennai.

11
 IT8078 - WEB DESIGN AND MANAGEMENT

<li>John: <span class="tel">999.8282</span></li>

<li>Paul: <span class="tel">888.4889</span></li>
<li>George: <span class="tel">888.1628</span></li>
<li>Ringo: <span class="tel">999.3220</span></li>
</ul>

SPECIAL CHARACTERS
There are two ways of referring to a specific character: by an assigned numeric value (numeric
entity) or using a predefined abbreviated name for the character (called a named entity). All
character references begin with an “&” and end with a “;”.

Department of Information Technology, Panimalar Engineering College, Chennai.

12
 IT8078 - WEB DESIGN AND MANAGEMENT

1.4 ADDING LINKS

A link or hyperlink is a connection from one web resource to another. Links allow users to move
seamlessly from one page to another, on any server anywhere in the world.

A link has two ends, called anchors. The link starts at the source anchor and points to the
destination anchor, which may be any web resource, for example, an image, an audio or
video clip, a PDF file, an HTML document or an element within the document itself, and so
on.

By default, links will appear as follow in most of the browsers:

 An unvisited link is underlined and blue.

 A visited link is underlined and purple.
 An active link is underlined and red.

HTML Link Syntax

Links are specified in HTML using the <a> tag.

A link or hyperlink could be a word, group of words, or image.

<a href="url">Link text</a>

Anything between the opening <a> tag and the closing </a> tag becomes the part of the link
that the user sees and clicks in a browser. Here are some examples of the links:
Example:
<a href="https://www.google.com/">Google Search</a>
<a href="https://www.tutorialrepublic.com/">Tutorial Republic</a>
<a href="images/kites.jpg">
<img src="kites-thumb.jpg" alt="kites">
</a>
The href attribute specifies the target of the link. Its value can be an absolute or relative URL.
An absolute URL is the URL that includes every part of the URL format, such as protocol, host
name, and path of the document,
e.g., https://www.google.com/, https://www.example.com/form.php, etc. While, relative
URLs are page-relative paths, e.g., contact.html, images/smiley.png, and so on. A relative URL
never includes the http:// or https:// prefix.
Example:
<!DOCTYPE html>

Department of Information Technology, Panimalar Engineering College, Chennai.

13
 IT8078 - WEB DESIGN AND MANAGEMENT

<html>
<head>
<title>links</title>
</head>
<body>
<a href="https://www.w3schools.com/">Visit W3Schools.com!</a><br><hr>
<a href="https://www.w3schools.com/" target="_blank">Visit W3Schools!</a><br><hr>
<h2>Absolute URLs</h2>
<p><a href="https://www.w3.org/">W3C</a></p>
<p><a href="https://www.google.com/">Google</a></p><br>
<h2>Relative URLs</h2>
<p><a href="html_images.asp">HTML Images</a></p>
<p><a href="/css/default.asp">CSS Tutorial</a></p><br>
<a href="mailto:[email protected]">Send email</a><br><hr>
<a href="https://www.w3schools.com/html/" title="Go to W3Schools HTML section">Visit
our HTML Tutorial</a>
</body>
</html>
OUTPUT:
Visit W3Schools.com!

Visit W3Schools!

Absolute URLs
W3C
Google
Relative URLs
HTML Images
CSS Tutorial
Send email

Visit our HTML Tutorial

Department of Information Technology, Panimalar Engineering College, Chennai.

14
 IT8078 - WEB DESIGN AND MANAGEMENT

Setting the Targets for Links

The target attribute tells the browser where to open the linked document. There are four defined
targets, and each target name starts with an underscore(_) character:
_blank — Opens the linked document in a new window or tab.
_parent — Opens the linked document in the parent window.
_self — Opens the linked document in the same window or tab as the source document. This
is the default, hence it is not necessary to explicitly specify this value.
_top — Opens the linked document in the full browser window.
Example:
<a href="/about-us.php" target="_top">About Us</a>
<a href="https://www.google.com/" target="_blank">Google</a>
<a href="images/sky.jpg" target="_parent">
<img src="sky-thumb.jpg" alt="Cloudy Sky">
</a>
Creating Bookmark Anchors
You can also create bookmark anchors to allow users to jump to a specific section of a web
page. Bookmarks are especially helpful if you have a very long web page.
Creating bookmarks is a two-step process: first add the id attribute on the element where you
want to jump, then use that id attribute value preceded by the hash sign (#) as the value of
the href attribute of the <a> tag, as shown in the following example:
Example
<a href="#sectionA">Jump to Section A</a>
<h2 id="sectionA">Section A</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit...</p>
Creating Download Links
You can also create the file download link in exactly the same fashion as placing text links.
Just point the destination URL to the file you want to be available for download.
In the following example we've created the download links for ZIP, PDF and JPG files.
Example
<a href="downloads/test.zip">Download Zip file</a>
<a href="downloads/masters.pdf">Download PDF file</a>
<a href="downloads/sample.jpg">Download Image file</a>

Department of Information Technology, Panimalar Engineering College, Chennai.

15
 IT8078 - WEB DESIGN AND MANAGEMENT

There are two ways to specify the URL:

• Absolute URLs provide the full URL for the document, including the protocol (http://), the
domain name, and the pathname as necessary. You need to use an absolute URL when pointing
to a document out on the Web (i.e., not on your own server).
Example: href="http://www.oreilly.com/"
• Relative URLs describe the pathname to a file relative to the current document. Relative
URLs can be used when you are linking to another document on your own site (i.e., on the
same server). It doesn’t require the protocol or domain name—just the pathname.
Example: href="recipes/index.html"

1.5 ADDING IMAGES

Images can improve the design and the appearance of a web page. 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.
Adding an image in any part within an HTML is as simple as wrapping text in <p>
and </p> tags. The label used to insert images in the HTML documents: <img> tag. It’s an
empty tag and contains attributes only, that tag consists of a single instruction, and so </img>
does not exist, and their use is prohibited. We can insert an image within <body>…</body>
tag as if it were a word of it and displayed by the browser after the text. The src attribute used
to add the image source, i.e., URL of this image. The alt attribute is for adding alternative text,
width for adding width, and height for adding this image’s height.
It can seem that we have inserted an arrow in mid-sentence, and after the image, we continued
to write. Although we can create this effect with images of all sizes, it is not recommended to
have a height much greater than the text.
To insert an image in HTML, we need to have it in a separate file. There are many
formats to store an image in a file: BMP, GIF, JPEG, XPM, XBM, PNG, TIFF, etc. each of
which have characteristics. The selected format on the World Wide Web is the GIF format that
distinguishes your files because they have the “. gif”. We could say that all browsers are capable
of showing the images in this format. Text-based browsers often provide methods to view
pictures using any external viewer program.
A second format that has been introduced in the WWW and supported by most browsers
(including the Explorer and Navigator) is JPEG. This format is especially useful for pictures

Department of Information Technology, Panimalar Engineering College, Chennai.

16
 IT8078 - WEB DESIGN AND MANAGEMENT

and can compress this type of image, so they take up to 4 times less than the GIF format images.
The files that contain photos JPEG format have the extension “. jpg”.
To add an image to an HTML document, you need to include the <img> tag concerning the
desired image. The <img> tag is an empty element i.e., it does not require a closing tag, and
you can use it to include small icons to large Images. The syntax of the <img> tag can be given
below:
Syntax: <img src=“dog.jpg” alt=“alternative text”>

Every image needs to carry at least two attributes: the src attribute and an alt attribute.

Src: The letters “src” stand for “source”. It defines the URL of the image. It identifies the
specific image to use with its type, i.e., it not only specifies what image; it also specifies the
URL of the image file. The commonly used image file types are GIF (Graphics Interchange
Format), JPEG (Joint Photographic Experts Group).
Alt: The “alt” attribute stands for “alternative”. Whereas, the alt attribute gives a text
description of the image inserted. This attribute is useful in text-only browsers, where images
turned off to load files faster. With this attribute, visitors will get the image’s text description
if it cannot be displayed for some reason.
For graphical browsers (Internet Explorer, Netscape Navigator, etc.), the alternative text
appears as the pop-up text i.e., whenever the visitor hovers the mouse over the image, the
alternative text appears within a rectangular box. The following lines of code describe how to
include an image with alternative text on a web page.
Various Attributes Used With <img> Tag

Setting the Width and Height of an Image

Height and Width: These attributes are used to set the dimensions of an image. The values
of these attributes are interpreted in pixels by default. The value from 1 to 100 percent. You
are specifying dimensions of an image decrease the loading time and improve the overall

Department of Information Technology, Panimalar Engineering College, Chennai.

17
 IT8078 - WEB DESIGN AND MANAGEMENT

appearance of the page. You first decide the image size, which will be most appropriate for
your web page, and then include that image.
In most of the browsers, these attributes get precedence over the actual image size. When a
browser starts loading a page, it first notes these attributes and leaves that much space for the
image before it displays the remaining text. Ultimately it goes back and fills in the image.
In the absence of these attributes, the browser first loads enough of the image to know how
much space that image requires, and tell then the rest of the page might not be displayed. To
specify the dimensions to make your page load faster because it becomes easier for the
browser.
Syntax: <img src="/images/dogs.jpg" height="pixels" width="pixels">
Another use of “height” and “width” attributes would be to size images. It is rarely a good
idea, as the image may end up distorted. One way to avoid distortion is to shrink images
proportionally. Shrinking the image with these attributes does not affect the file size while
resizing the image beforehand will shrink the file and reduce the download time. However,
these are two drawbacks to specifying the “height” and “width”.
• These are presentational attributes. So they ideally belong in a style sheet instead of in your
<img> tag.
• If you have a small image and specify its height and width, the Navigator
and Internet Explorer, won’t fit the alternate text inside the small image box for those users
not displaying images.
The speed advantage of setting the “width” & “height” attributes may out weight the two
drawbacks, especially if you are not using small images with a lot of alternate text.
You might also use the style attribute to define width and height for those images. It prevents
style sheets from altering the image size unintentionally since the inline style has the
maximum priority.
Align: HTML provides another appearance attribute called the “align” attribute using which
you can position your image on the web page. This attribute offers both horizontal and vertical
alignment options. It can take any of the five values left, right, top, middle, and bottom.
Syntax: <img src=“url” align=“left | right | top | middle | bottom”>
Horizontal Alignment: Horizontally image can align to the left or right of the window.
Left: Images by default align to the left, with any text following the image appearing on the
same line. However, if the text is long, then it wraps to the bottom of the image. Specifying
align = “left” forces the image to the current left margin and any accompanying text appears
on the same line around the image’s right margin. Its interpretations also depend on whether
any images or other material with left alignment appear earlier or not. In that case, former
material will get preference, and later image will appear on the former one’s right. Any text
preceding the image forces it to appear on the next line.
Right: It is similar to left except that image is forced to the right margin, and any
accompanying text appears on the same line around the image’s left margin. In the following
example, you will see how the “to align” attribute works. Here the same image is included
thrice to show you all the possible horizontal alignments.

Department of Information Technology, Panimalar Engineering College, Chennai.

18
 IT8078 - WEB DESIGN AND MANAGEMENT

As you can see in the output, the first image has default alignment, which forces the long
surrounding text to appear at the bottom of the image, whereas specifying the alignment lets
the surrounding text appear beside the image.
Vertical Alignment: Vertically image can align to the top, middle, and bottom of the window.
Top: Aligns the top of the image with the top of the current text, and the remainder of the
image hangs below the text line.
Middle: Aligns the vertical mid-line of the image to the current baseline of the surrounding
text.
Bottom: This is the default vertical alignment that aligns the bottom of the image with the
accompanying text’s baseline. The remainder of the image remains higher than the
surrounding text setting.
Border: By default, no border appears around an image unless that image is a link. However,
you can specify a border for an image using the “border attribute in <img> tag.
Syntax: <img src=“url” border=“pixels”>
The width of the border is specified in pixels. If you use the border = “1” attribute in <img>
tag, then a thin border will appear around the image. Also, you can increase the border width
by increasing the value in the border attribute.You can hide the border by specifying border
=” 0″ to the <img> tag.
To add a border to the image, simply add this attribute in <img> tag.
Syntax: <img src=“d:\dog.jpg” alt=“A dog sitting on the grass” border=“10”>

An image’s border width does not count towards determining. an image’s height or width. So
if you specify an image to be 100pixels wide (width = “100”) and have a border width of 10
(Border=” 10″) then the image will take 120 pixels of horizontal space (because the border
appears on both the left and right sides of the image).

Department of Information Technology, Panimalar Engineering College, Chennai.

19
 IT8078 - WEB DESIGN AND MANAGEMENT

The image will also take a few pixels more than 120 because browsers will put a small amount
of space between an image and text. The amount of space allocated is determined by the
HSpace and VSpace attributes.
4. VSpace and HSpace: Internet Explorer and Navigator do not place images right next to
the text. Instead, they put a small margin of a few pixels in between text and an image. You
can control the amount of horizontal space with the HSPACE attribute and the vertical space
with the VSpace attribute.
These spaces also referred to as white space. White space doesn’t need to be white; it just
means space has color, which depends on the background. Including white space around
images makes the page’s overall appearance better.
Syntax: <img src=“drl” hspace=“pixels”vspace=“pixels”>
The “HSpace” attribute used to insert a buffer of horizontal space on the left and right
of an image while the “VSpace” attribute is used to insert a buffer of vertical space between
the top and bottom of the image and other objects.
The value of both attributes should be a positive number of pixels. Simultaneously,
under some browsers, it may be possible to set the attribute values to percentage values. It is
inadvisable because very high values may produce strange results. By default, these attribute
values are small, non-zero numbers, which provide just enough space to keep the surrounding
text away from the image.
As you can see, there is a text written before the <img> tag, and it forces the image to
appear in a new line. Specifying white space keeps the surrounding text away from the image.

1.6 TABLE MARKUP

HTML tables were created for instances when you need to add tabular material (data arranged
into rows and columns) to a web page. Tables may be used to organize calendars, schedules,
statistics, or other types of information. A table cell may contain any sort of information,
including numbers, text elements, and even images and multimedia objects.

Department of Information Technology, Panimalar Engineering College, Chennai.

20
 IT8078 - WEB DESIGN AND MANAGEMENT

Figure 8-3 shows the elements that identify the table (table), rows (tr, for “table row”), and
cells (th, for “table headers,” and td, for “table data”). Cells are the heart of the table, because
that’s where the actual content goes. The other elements just hold things together.
Spanning Cells
One fundamental feature of table structure is cell spanning, which is the stretching of a
cell to cover several rows or columns. Spanning cells allows you to create complex table
structures, but it has the side effect of making the markup a little more difficult to keep track
of. You make a header or data cell span by adding the colspan or rowspan attributes.
Column spans:
Column spans, created with the colspan attribute in the td or th element, stretch a cell
to the right to span over the subsequent columns (Figure). Here a column span is used to make
a header apply to two columns. (added a border around cells to reveal the table structure in the
screenshot.)
<table>
<tr>
<th colspan="2">Fat</th>
</tr>
<tr>
<td>Saturated Fat (g)</td>
<td>Unsaturated Fat (g)</td>
</tr>
</table>

Row spans:
Row spans, created with the rowspan attribute, work just like column spans,
but they cause the cell to span downward over several rows. In this example,
the first cell in the table spans down three rows (Figure 8-8).
<table>
<tr>
<th rowspan="3">Serving Size</th>

Department of Information Technology, Panimalar Engineering College, Chennai.

21
 IT8078 - WEB DESIGN AND MANAGEMENT

<td>Small (8oz.)</td>
</tr>
<tr>
<td>Medium (16oz.)</td>
</tr>
<tr>
<td>Large (24oz.)</td>
</tr>
</table>

All the attributes for <TABLE ...> are :

BORDER: size of border around the table
CELLPADDING: space between the edge of a cell and the contents
CELLSPACING: space between cells
WIDTH: width of the table as a whole
BGCOLOR: color of the background
BACKGROUND: picture to use as background
ALIGN: alignment of table to surrounding text
HSPACE: horizontal space between table and surrounding text
VSPACE: vertical space between table and surrounding text
HEIGHT: height of the table as a whole
FRAME: parts of outside border that are visible
RULES: if there should be internal borders
BORDERCOLOR: color of border around the table
BORDERCOLORLIGHT: color of "light" part of border around the table
BORDERCOLORDARK: color of "dark" part of border around the table
SUMMARY: Summary of the purpose of the table
For Eg. :
<table border="1" cellpadding="10" bgcolor="rgb(0,255,0)" cellspacing=10
width=100% height=300 background="deepsea.gif" align = LEFT | RIGHT

Department of Information Technology, Panimalar Engineering College, Chennai.

22
 IT8078 - WEB DESIGN AND MANAGEMENT

summary="Employees of the Design Department">

<tr>
<th> column1</th>
<th> column1</th>
</tr>
<tr>
<td> ….</td>
<td>….</td>
</tr>
</table>

1.7 FORMS
HTML forms are used to allow a user input data on a webpage and pass data to a server.
A form can contain input elements like text fields, checkboxes, and radio-buttons, submit
buttons and more. A form can also contain select lists, text area, field set, legend, and label
elements.
Forms are a vital tool for the webmaster to receive information from the web surfer,
such as: their name, email address, credit card, etc. A form will take input from the viewer and
depending on your needs, you may store that data into a file, place an order, gather user
statistics, register the person to your web forum, or maybe subscribe them to your weekly
newsletter.
Input fields are going to be the meat of your form's sandwich. The <input> has a few attributes
that you should be aware of.
 type - Determines what kind of input field it will be. Possible choices are text, submit,
and password.
 name - Assigns a name to the given field so that you may reference it later.
 size - Sets the horizontal width of the field. The unit of measurement is in blank spaces.
 maxlength - Dictates the maximum number of characters that can be entered.
HTML - Password Fields:
Password fields are a special type of <input /> tag. All that we need to do is change the
type attribute from text to password.
HTML – Checkbox Forms:

Department of Information Technology, Panimalar Engineering College, Chennai.

23
 IT8078 - WEB DESIGN AND MANAGEMENT

Checkboxes are another type of <input /> form. We set the type attribute to check and
we also must set a name and value attribute for them to be at all helpful.
HTML - Radio Forms :
Radios are types of input forms that allow a user to pick an either/or type of selection.
In order to achieve this, we must properly name each radio button selection accordingly. These
types of forms must be named.
HTML – Textareas :
Textareas retrieve "blog" type information from the user. Paragraphs, essays, or memos
can by cut and pasted into textareas and submitted. Textareas have an opening and a closing
tag, any words placed between them will appear inside your text area.
HTML - Upload Forms :
Use an upload form to allow users to upload pictures, movies, or even their own
webpages. An upload form is another type of input form, simply set the type attribute to file.
HTML - Selection Forms and Drop Down Lists :
Drop down lists are the basic selection forms. You have probably seen them already on
the internet, maybe filling out a personal profile and selecting the state in which you live. Drop
down lists have several options a user can select.
HTML - Selecting Multiples
We can further add to our selection forms by adding the multiple attribute. This allows
the user to select more than one entry from your selection forms. Obviously this attribute does
not work with the single drop down lists.
HTML - Submit Buttons :
Submission buttons are a type of <input /> tag. Set the type attribute to submit. This
creates a special type of button in your forms that will perform the form's set action.
HTML Reset Buttons:
Reset buttons exist to reset the fields of your form. These are handy for very large forms
and the user is having difficulty or simply needs to start filling in the form from scratch.
HTML - Hidden Field :
Hidden fields are not displayed by the browser, there are a number of uses for them.
When dealing with forms you will usually find yourself using some sort of database
mechanism: MySQL, SQL Server, or maybe just a plain text file. In any case use hidden forms
to pass along information to your database that may have already been received from the user.
In this rare case, a hidden form field may come in handy.

Department of Information Technology, Panimalar Engineering College, Chennai.

24
 IT8078 - WEB DESIGN AND MANAGEMENT

For Eg. :
1. STUDENTS REGISTRATION FORM
<!DOCTYPE html>
<html>
<head>
<title>HTML FORMS</title>
</head>
<body>
<h2>STUDENTS REGISTRATION FORM</h2>
<hr width="400" align="left">

Department of Information Technology, Panimalar Engineering College, Chennai.

25
 IT8078 - WEB DESIGN AND MANAGEMENT

<table width="400">
<tr>
<td height="30">Name of student</td>
<td><input type="text"></td>
</tr>
<tr>
<td height="30">Name of father</td>
<td><input type="text"></td>
</tr>
<tr>
<td height="30">Age</td>
<td><input type="number" min="1" max="65"></td>
</tr>
<tr>
<td height="30">Date ofb birth</td>
<td><input type="date"></td>
</tr>
<tr>
<td>gender</td>
<td>
<input type="radio" name="gender" value="male">
<label>male</label>
<input type="radio" name="gender" value="female">
<label>female</label>
</td>
</tr>
<tr>
<td>city</td>
<td>
<select>
<option selected>chennai</option>
<option>canada</option>
<option>mumbai</option>
</select>
</td>
</tr>
<tr>
<td>languages known</td>
<td>
<input type="checkbox" name="l1">
<label>English</label>
<input type="checkbox" name="l2">
<label>hindi</label>
<input type="checkbox" name="l3">
<label>tamil</label>
</td>
</tr>
<tr>
<td height="50" align="center">

Department of Information Technology, Panimalar Engineering College, Chennai.

26
 IT8078 - WEB DESIGN AND MANAGEMENT

<input type="button" value="submit">

</td>
</tr>
<table>
<hr width="400" align="left">
</body>
</html>

OUTPUT:

EXAMPLE 2:
<form method="post" action=mailto:[email protected]>
Name: <input type="text" size="10" maxlength="40" name="name"><br>
Password: <input type="password" size="10" maxlength="10" name="password
Soccer: <input type="checkbox" name="sports" value="soccer" checked="yes” />
Italian<input type="radio" name="food" checked="yes" />
<textarea cols="20" rows="5" wrap="hard/soft/off"> hello welcome</textarea>
<input type=”hidden” name=”MAX_FILE_SIZE” value=”500”>
<input type=”file”> // for upload a file
<select size=3>

Department of Information Technology, Panimalar Engineering College, Chennai.

27
 IT8078 - WEB DESIGN AND MANAGEMENT

<option selected=”yes”>Colorred -- CO</option>

<option>Colorblue -- CO</option>
<option>Colorgreen -- CO</option>
</select>
<select multiple=”yes” size=3>
<option> California</option>
<option> America</option>
<option> Canada</option>
</select>
<input type="submit" value="Submit" />
<input type="reset" value="Clear" />
<input type="hidden" id="age" name="age" value="23" />

1.8 HTML 5
HTML5 is the fifth version of HTML. This version was released in 2014. HTML5
comes with new and advanced features. It allows developers to build animations and simple to
complex applications that run on the browser.
HTML5 can help developers build web apps, which are developed for Entertainment,
Online streaming, Video players, Audio players, etc.
In the previous versions, for video playback and drag-and-drop features, users had to
depend on third-party browser plug-ins, like Adobe Flash. However, HTML5 offers all these
features to the users along with many other new features and HTML attributes for building
attractive websites. Almost all web browsers, including Google Chrome, Safari, Mozilla
Firefox Microsoft Edge, and mobile browsers, such as Android and iOS support most of
the HTML5 features.
Key Features of HTML5
 Cleaner code structure
 Plain and simple Doctype declaration: <!DOCTYPE html>
 Audio and video tags
 Cross-browser compatibility
 Canvas for animation and game development
 Offline browsing
 Geolocation support
 Improved semantics

Department of Information Technology, Panimalar Engineering College, Chennai.

28
 IT8078 - WEB DESIGN AND MANAGEMENT

 Improved storage
 Provides search engine optimization benefits

Structure of an HTML5 Document

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Document title goes here</title>
</head>
<body>
<h1>Main heading goes here</h1>
<p>Paragraph content goes here</p>
</body>
</html>
The basis of
HTML5 HTML4
comparison

It is an extension of html4. It is
Version It is the 4th version of HTML.
the 5th version of HTML.

It is older version of html5 , so having

Html5 is very simple compared less features compared to html5
Simplicity to Html4 .example – <!DOCTYPE HTML PUBLIC “-
<!DOCTYPE html> //W3C//DTD HTML4.01 //EN”
“http://www.w3.org/TR/html4/strict.dtd”>

Html provides consistency in

Malformed It does not provide better error handling
malformed documents.it has
Documents like html5.
better error handling.

It has many new tags which were

New Tags not present in html4 like canvas, These tags not provided by html4 version
video, audio

Multimedia Multimedia support provided by In html4 these supported provided by the

Elements html5. third party like Silverlight and flash

New form input types:

color, date, datetime, datetime-local, email, month, number, range, search, tel, time,
url, and week.
New global attributes
Global attributes are attributes that can be applied to any element. The number of global
attributes was expanded in HTML5, and many of them are brand new (as noted in Table).

Department of Information Technology, Panimalar Engineering College, Chennai.

29
 IT8078 - WEB DESIGN AND MANAGEMENT

Department of Information Technology, Panimalar Engineering College, Chennai.

30
 IT8078 - WEB DESIGN AND MANAGEMENT

Obsolete HTML 4.01 Markup

HTML5 also declared a number of elements in HTML 4.01 to be “obsolete” because they are
presentational, antiquated, or poorly supported (Table 10-3). If you use them, browsers will
support them, but I strongly recommend leaving them in the dust.

Adding a video to a page

<video src="highlight_reel.mp4" width="640" height="480"
poster="highlight_still.jpg" controls autoplay>
</video>

Adding audio to a page

<audio id="soundtrack" controls preload="auto">
<source src="soundtrack.mp3" type="audio/mp3">
<source src="soundtrack.ogg" type="audio/ogg">
<source src="soundtrack.webm" type="audio/webm">
</audio>
<p>Download the Soundtrack song:</p>
<ul>
<li><a href="soundtrack.mp3">MP3</a></li>
<li><a href="soundtrack.ogg">Ogg Vorbis</a></li>
</ul>

Canvas API
In Html5 <canvas> tag introduced, canvas is a rectangular area in HTML page. The <canvas>
tag is used to draw graphics using JavaScript. It is a container for graphics. Inside this container,

Department of Information Technology, Panimalar Engineering College, Chennai.

31
 IT8078 - WEB DESIGN AND MANAGEMENT

graphics are drawn using JavaScript. Canvas has different methods for boxes, paths, circles,
characters and adding images. By default, it has no border and no content.
Example:-
<canvas id="canvas1" width =”600” height= “500”> hello update the your

browser</canvas>
The id attribute is used to refer the canvas in the javascript and width and height are used to
define the size of the canvas.

<!DOCTYPE html>
<html>
<header>
</header>
<body>
<h3>hello demo</h3>
<canvas id="canid" width="600" height="400">Update your browser chrome</canvas>
<script>
var tempcan=document.getElementById(“canid”);
var tempcan2=tempcan.getContext("2d");
tempcan2.fillStyle='#0000ff';
tempcan2.fillRect(25,25,180,100);
</script>
</body>
</html>

OUTPUT:

Drawing with JavaScript

The Canvas API includes functions for creating basic shapes (such as strokeRect() for drawing
a rectangular outline and beginPath() for starting a line drawing) and moving things around

Department of Information Technology, Panimalar Engineering College, Chennai.

32
 IT8078 - WEB DESIGN AND MANAGEMENT

(such as rotate() and scale()), plus attributes for applying styles (for example, lineWidth,
strokeStyle, fillStyle, and font).
Figure shows the simple smiley face we’ll be creating with the Canvas API.

<!DOCTYPE html>
<html>
<header>
</header>
<body>
<h3>hello demo</h3>
<canvas width="600" height="400" id="my_first_canvas">
Your browser does not support HTML5 canvas. Try using Chrome,
Firefox, Safari or Internet Explorer 9.
</canvas>
<script type="text/javascript">
window.addEventListener('load', eventWindowLoaded, false);
function eventWindowLoaded() {
canvasApp();
}
function canvasApp(){
var theCanvas = document.getElementById('my_first_canvas');
var my_canvas = theCanvas.getContext('2d');
my_canvas.strokeRect(0,0,200,225)
// to start, draw a border around the canvas
//draw face
my_canvas.beginPath();
my_canvas.arc(100, 100, 75, (Math.PI/180)*0, (Math.PI/180)*360, false);
// circle dimensions
my_canvas.strokeStyle = "black"; // circle outline is black
my_canvas.lineWidth = 3; // outline is three pixels wide
my_canvas.fillStyle = "yellow"; // fill circle with yellow
my_canvas.stroke(); // draw circle
my_canvas.fill(); // fill in circle
my_canvas.closePath();
// now, draw left eye
my_canvas.fillStyle = "black"; // switch to black for the fill
my_canvas.beginPath();
my_canvas.arc(65, 70, 10, (Math.PI/180)*0, (Math.PI/180)*360, false);

Department of Information Technology, Panimalar Engineering College, Chennai.

33
 IT8078 - WEB DESIGN AND MANAGEMENT

// circle dimensions
my_canvas.stroke(); // draw circle
my_canvas.fill(); // fill in circle
my_canvas.closePath();
// now, draw right eye
my_canvas.beginPath();
my_canvas.arc(135, 70, 10, (Math.PI/180)*0, (Math.PI/180)*360, false);
// circle dimensions
my_canvas.stroke(); // draw circle
my_canvas.fill(); // fill in circle
my_canvas.closePath();
// draw smile
my_canvas.lineWidth = 6; // switch to six pixels wide for outline
my_canvas.beginPath();
my_canvas.arc(99, 120, 35, (Math.PI/180)*0, (Math.PI/180)*-180, false);
// semicircle dimensions
my_canvas.stroke();
my_canvas.closePath();
// Smiley Speaks!
my_canvas.fillStyle = "black"; // switch to black for text fill
my_canvas.font = '20px _sans'; // use 20 pixel sans serif font
my_canvas.fillText ("Hello Canvas!", 45, 200); // write text
}
</script>
</body>
</html>

----------------------------------------------------------------------------------------------------------------

Department of Information Technology, Panimalar Engineering College, Chennai.

34