IT8078- WEB DESIGN AND MANAGEMENT-UNIT-1-IV YEAR IT-PIT

UNIT-I- WEB DESIGN - HTML MARKUP FOR STRUCTURE

Working of Web - HTML Markup for Structure - Creating simple page -
Marking up text - Adding Links - Adding Images - Table Markup - Forms -
HTML5
1. WORKING OF WEB:
Basic terminology :
*The Internet Versus the Web :
• Internet is a network of connected computers.
• Web (originally called the World Wide Web, thus the “www” in site addresses) is just
one of the ways information can be shared over the Internet.
*Hypertext- It is unique in that it allows documents to be linked to one another .
* The Web uses a protocol called HTTP (HyperText Transfer Protocol)
• Servers – It is a software for “serve up” documents upon request, these computers.
• Two most popular are
• Apache (open source software) and
• Microsoft Internet Information Services (IIS).
• IP address - Every computer and device (modem, router, smartphone, cars, etc.)
connected to the Internet is assigned a unique numeric IP Address.
• Domain Name System (DNS) was developed to allow us to refer to that server by its
domain name
• The numeric IP address is useful for computer software, while the domain name is
more accessible to humans.
• DNS server - Matching the text domain names to their respective numeric IP
addresses.
• Browsers - The software that does the requesting is called the client.
• User agent - The server returns the documents for the browser (also referred to as the
user agent in technical circles) to display.
• Intranets and Extranets :
 Intranets - Special web-based networks , They are created and function like
ordinary websites, but they use special security devices (called firewalls) that prevent
the outside world from seeing them.
 Extranet - An extranet is like an intranet, only it allows access to select users
outside of the company.

1
IT8078- WEB DESIGN AND MANAGEMENT-UNIT-1-IV YEAR IT-PIT

• Web Page Addresses (URLs) :

• Every page and resource on the Web has its own special address called a
URL(Uniform Resource Locator )
• The parts of a URL :

• Default files :
• When a server receives a request for a directory name rather than a specific file, it
looks in that directory for a default document, typically named index.html.

❖ 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

2
IT8078- WEB DESIGN AND MANAGEMENT-UNIT-1-IV YEAR IT-PIT

❖ 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").
❖ 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.

3
 IT8078- WEB DESIGN AND MANAGEMENT-UNIT-1-IV YEAR IT-PIT

❖ 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:

4
IT8078- WEB DESIGN AND MANAGEMENT-UNIT-1-IV YEAR IT-PIT

• 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

5
 IT8078- WEB DESIGN AND MANAGEMENT-UNIT-1-IV YEAR IT-PIT

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

2. HTML Markup for Structure

2.1. Creating a Simple Page :
Step by Step for create Web Page:

Step 1: Start with content - 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 - describe the content using the appropriate text elements.

Step 4: Add an image

Step 5: Change the page appearance with a style sheet. formatting content with
Cascading Style Sheets

❖ HTML:
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.

6
 IT8078- WEB DESIGN AND MANAGEMENT-UNIT-1-IV YEAR IT-PIT

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.
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.
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
7
 IT8078- WEB DESIGN AND MANAGEMENT-UNIT-1-IV YEAR IT-PIT

2.2. Marking up text:

Headings : h1 and Friends
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>
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.

For example ,
<pre> Pre formatted Text
Roses are Red,
Violets are blue,
</pre>
Tag Description

<b> Defines bold text

<big> Defines big text

<em> Defines emphasized text

8
 IT8078- WEB DESIGN AND MANAGEMENT-UNIT-1-IV YEAR IT-PIT

<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)

The table shows HTML Formatting Text Elements :
<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>
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)

9
 IT8078- WEB DESIGN AND MANAGEMENT-UNIT-1-IV YEAR IT-PIT

• NOSHADE (solid line)

• SIZE=Pixels (line height)
• WIDTH=Length (line width)
For example ,
<hr size = 5 width=20% align="left" color="red">

Images : The img element

Images can be embedded in HTML document using <img> element. The IMG
element allows an image file to be inserted within an HTML document.
Attributes:
◼ src: URL of image file (required). Browser generates a GET request to this
URL.
◼ alt: text description of image (required)
◼ height / width: dimensions of area that image will occupy (recommended)
For example ,
<img src="angry.gif" alt="Angry face" /> or

If height and width not specified for image, then browser may need to rearrange the
client area after downloading the image. Default units for height and width are “picture
elements” (pixels).
Links : The <a> or anchor element
Hyperlinks are produced by the anchor element <a>. The <a> tag defines an anchor. An
anchor can be used in two ways:
1. To create a link to another document, by using the href attribute
2. To create a bookmark inside a document, by using the name attribute
The a element is usually referred to as a link or a hyperlink.
For example,

 Anchors can be used as source (previous example) or destination

10
 IT8078- WEB DESIGN AND MANAGEMENT-UNIT-1-IV YEAR IT-PIT

<a id =”section1” name=”section1” ></a>

 The fragment portion of a URL is used to reference a destination anchor

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

Relative URL :
URLs that are not complete but inherit pieces(protocol,hostname,path of the parent
document) from their parent are called Relative URL. For Example,
<a href=”javafaq.html”>
If the relative link begins with a / , then it is relative to the document root instead of relative to
the current file.
Advantages :
1. Save a little typing.
2. It allow single document tree to served by multiple protocol. (eg. Both FTP and
HTTP)
3. It allow entire trees of HTML document to be moved or copied from one site to
another without breaking all the internal links.

11
 IT8078- WEB DESIGN AND MANAGEMENT-UNIT-1-IV YEAR IT-PIT

2.2. Adding Links :

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.

12
 IT8078- WEB DESIGN AND MANAGEMENT-UNIT-1-IV YEAR IT-PIT

Example:
<!DOCTYPE html>
<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

13
 IT8078- WEB DESIGN AND MANAGEMENT-UNIT-1-IV YEAR IT-PIT

Visit our HTML Tutorial

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>

14
 IT8078- WEB DESIGN AND MANAGEMENT-UNIT-1-IV YEAR IT-PIT

<a href="downloads/masters.pdf">Download PDF file</a>

<a href="downloads/sample.jpg">Download Image file</a>

2.3. Adding Images :

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
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:

15
 IT8078- WEB DESIGN AND MANAGEMENT-UNIT-1-IV YEAR IT-PIT

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
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">

16
 IT8078- WEB DESIGN AND MANAGEMENT-UNIT-1-IV YEAR IT-PIT

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.
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.

17
 IT8078- WEB DESIGN AND MANAGEMENT-UNIT-1-IV YEAR IT-PIT

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).
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

18
 IT8078- WEB DESIGN AND MANAGEMENT-UNIT-1-IV YEAR IT-PIT

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.
Using the HTML5 Picture Element
Scaling an image up or down to match various devices (or display sizes) does not function as
expected. Additionally, reducing the image dimension using the width and height attribute or
property does not lower the initial file size. To tackle these issues, HTML5 has introduced the
<picture> tag, which lets you specify several images to target unique devices.
The <picture> element includes zero or more <source> elements, each referring to different
image source, and one <img> element at the end. Additionally, each <source> element has
the media attribute, which defines a media requirement (similar to the media query) that can
be utilized by the browser to determine when a specific source should use. Let us try an
illustration:

1 <picture>
2 <source media="(min-width: 1040px)" src set="smalllogo.png">
3 <source media="(max-width: 800px)" src set="mainlogo.png">
4 <img src="logo.png" alt="website logo">
5 </picture>

Working with Image Maps

An image map permits you to specify hotspots within an image that behaves exactly like a
hyperlink.
The simple idea behind making image map is to present a simple means of linking a variety
of sections of an image without breaking it into different image files. For example, a map of
the planet could have every country hyperlinked to additional information relating to this
country.
Let’s try out a simple example to understand how it actually works:

<img src="objects.png" usemap="#objects" alt="Objects">

<map name="objects">
<area shape="circle" coords="100,291,71" href="india.html" alt="India">
<area shape="poly" coords="312,136,233,302,412,380" href="russia.html"
alt="Russia">
<area shape="rect" coords="510,170,681,322" href="canada.html" alt="Canada">
</map>

19
 IT8078- WEB DESIGN AND MANAGEMENT-UNIT-1-IV YEAR IT-PIT

The title attribute of this <map> tag is used to mention the map in the <img> tag with its use
map attribute. The <area>tag is used within the <map> element to specify the clickable areas
within an image. You may specify some of clickable areas in an image.
2.4. HTML 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:
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.

20
 IT8078- WEB DESIGN AND MANAGEMENT-UNIT-1-IV YEAR IT-PIT

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.
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">
<table width="400">
21
 IT8078- WEB DESIGN AND MANAGEMENT-UNIT-1-IV YEAR IT-PIT

<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>
22
 IT8078- WEB DESIGN AND MANAGEMENT-UNIT-1-IV YEAR IT-PIT

</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">
<input type="button" value="submit">
</td>
</tr>
<table>
<hr width="400" align="left">
</body>
</html>

OUTPUT:

23
 IT8078- WEB DESIGN AND MANAGEMENT-UNIT-1-IV YEAR IT-PIT

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>
<option selected=”yes”>Colorred -- CO</option>
<option>Colorblue -- CO</option>
<option>Colorgreen -- CO</option>
</select>

24
 IT8078- WEB DESIGN AND MANAGEMENT-UNIT-1-IV YEAR IT-PIT

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>
<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" />

2.5. TABLES
HTML Tables :
The <table> tag is used to begin a table. Within a table element are the <tr> (table rows)
and <td> (table columns) tags. Tables are a handy way to create a site's layout, but it does take
some getting used to. Here's how to make a table.
This table uses the basic three tags all tables must have:
<TABLE ...>
<TABLE ...> creates the table. Most of the overall properties of the table are defined
here, such as if it has borders and what is the table's background color.
<TR ...>

25
 IT8078- WEB DESIGN AND MANAGEMENT-UNIT-1-IV YEAR IT-PIT

<TR ...> (Table Row) defines each row of the table.

<TD ...>
<TD ...> (Table Data) defines each cell of the 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
summary="Employees of the Design Department">
<tr>
<th> column1</th>
<th> column1</th>
</tr>
</table>
Eg. :2
<TABLE BORDER=2>
<TR> <TH>Name</TH> <TH>Extension</TH> </TR>
<TR> <TD>Raha Mutisya</TD> <TD>1493</TD> </TR>
<TR> <TD>Shalom Buraka</TD> <TD>3829</TD> </TR>
26
 IT8078- WEB DESIGN AND MANAGEMENT-UNIT-1-IV YEAR IT-PIT

<TR> <TD>Hallie Curry</TD> <TD>8372</TD> </TR>

<TR> <TD>Shari Silberglitt</TD> <TD>4827</TD> </TR>
</TABLE>
Ex.: 3
<html>
<body>
<table border="1">
<caption>Monthly savings</caption>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$50</td>
</tr>
</table>
</body>
</html>
Output :
Monthly savings

Month Savings

January $100

February $50

Example 4.: ( Using Cellspan and rowspan , cellpadding and cellspacing)

<html>
<body>
<h4>Cell that spans two columns:</h4>

27
 IT8078- WEB DESIGN AND MANAGEMENT-UNIT-1-IV YEAR IT-PIT

<table border="1" cellpadding="10" cellspacing="10">

<tr>
<th>Name</th>
<th colspan="2">Telephone</th>
</tr>
<tr>
<td>Bill Gates</td>
<td>555 77 854</td>
<td>555 77 855</td>
</tr>
</table>
<h4>Cell that spans two rows:</h4>
<table border="1">
<tr>
<th>First Name:</th>
<td>Bill Gates</td>
</tr>
<tr>
<th rowspan="2">Telephone:</th>
<td>555 77 854</td>
</tr>
<tr>
<td>555 77 855</td>
</tr>
</table>
</body>
</html>
Output :
Cell that spans two columns:

Name Telephone

28
 IT8078- WEB DESIGN AND MANAGEMENT-UNIT-1-IV YEAR IT-PIT

Bill Gates 555 77 854 555 77 855

Cell that spans two rows:

First Name: Bill Gates

555 77 854
Telephone:
555 77 855

Example 5:
<!DOCTYPE html>
<html>
<head>
<title>hello</title>
</head>
<body>

<h2>HTML Table</h2>

<table border="3">
<tr>
<th>Company</th>
<th>Contact</th>
<th>Country</th>
</tr>
<tr>
<td>Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td>Germany</td>
</tr>
<tr>
<td>Centro comercial Moctezuma</td>
<td>Francisco Chang</td>
<td>Mexico</td>

29
 IT8078- WEB DESIGN AND MANAGEMENT-UNIT-1-IV YEAR IT-PIT

</tr>
<tr>
<td>Ernst Handel</td>
<td>Roland Mendel</td>
<td>Austria</td>
</tr>
<tr>
<td>Island Trading</td>
<td>Helen Bennett</td>
<td>UK</td>
</tr>
<tr>
<td>Laughing Bacchus Winecellars</td>
<td>Yoshi Tannamuri</td>
<td>Canada</td>
</tr>
<tr>
<td>Magazzini Alimentari Riuniti</td>
<td>Giovanni Rovelli</td>
<td>Italy</td>
</tr>
</table>

</body>
</html>

3. HTML5 Introduction
New HTML5 Elements
The new HTML5 elements are:
New semantic elements like <header>, <footer>, <article>, and <section>.
New attributes of form elements like number, date, time, calendar, and range.
New graphic elements: <svg> and <canvas>.
New multimedia elements: <audio> and <video>.
New HTML5 API's (Application Programming Interfaces)

30
 IT8078- WEB DESIGN AND MANAGEMENT-UNIT-1-IV YEAR IT-PIT

The new API's in HTML5 are:

• HTML Geolocation
• HTML Drag and Drop
• HTML Local Storage
• HTML Application Cache
• HTML Web Workers
• HTML SSE
New Semantic/Structural Elements
New Semantic Elements in HTML5
Many web sites contain HTML code like: <div id="nav"> <div
class="header"> <div id="footer">
to indicate navigation, header, and footer.
HTML5 offers new semantic elements to define different parts of a web
page:
• <article>
• <aside>
• <details>
• <figcaption>
• <figure>
• <footer>
• <header>
• <main>
• <mark>
• <nav>
• <section>
• <summary>
• <time>

31
 IT8078- WEB DESIGN AND MANAGEMENT-UNIT-1-IV YEAR IT-PIT

Video and Audio:

• Adding a video to a page

• Adding audio to a page

• Canvas

Adding a video to a page:

<!DOCTYPE html>

<html>

<head><title>senthamil</title>

</head>

<body>

<video controls="controls" poster="book.jpg">

<source src="Flicking_Through_Book_001_Videvo_preview.mp4" video="web/mp4">

</video>

</body>

</html>

32
 IT8078- WEB DESIGN AND MANAGEMENT-UNIT-1-IV YEAR IT-PIT

Output:

Adding audio to a page:

<!DOCTYPE html>

<html>

<head><title>senthamil</title>

</head>

<body>

<audio controls="controls" >

<source src="Flicking_Through_Book_001_Videvo_preview.mp3" type="audio/MPEG"></source>

<source src="Flicking_Through_Book_001_Videvo_preview.wav" type="audio/WAV"></source>

<source src="Flicking_Through_Book_001_Videvo_preview.ogg" type="audio/OGG"></source>

BROWSER IS NOT SUPPORTED

</audio>

</body>

</html>

Output:

33