WEB TECHNOLOGY
UNIT-1
HTTP
HTTP stands for Hypertext Transfer Protocol.
Hypertext Transfer Protocol is a set of rules which is used for transferring the files
like, audio, video, graphic image, text and other multimedia files on the WWW
(World Wide Web).
HTTP is an application-level protocol. The communication usually takes place
through TCP/IP sockets, but any reliable transport can also be used.
Three important things about HTTP
Connectionless: HTTP is connectionless. When the HTTP client opens the browser, the
browser initiates an HTTP request. After making the request, the client disconnects
from the server and waits for the response. When the response is ready, the server re-
establish the connection again and delivers the response to the client, after which the
client disconnects the connection. So both client and server know about each other
during the current request and response only.
Media Independent: HTTP is media independent. HTTP can deliver any sort of data, as
long as the two computers can read it.
Stateless: The HTTP is stateless. The client and server just know about each other just
during the current request. If the connection is closed, and two computers want to
connect again, they need to provide information to each other anew, and the
connection is handled as the very first one.
HTML
HTML stands for Hyper Text Markup Language, which is the most widely used language
on Web to develop web pages.
HTML was created by Berners-Lee in late 1991 but
"HTML 2.0" was the first standard HTML specification which was published in 1995.
HTML 4.01 was a major version of HTML and it was published in late 1999.
Though HTML 4.01 version is widely used but currently we are having HTML-5 version
which is an extension to HTML 4.01, and this version was published in 2012.
The major points of HTML are given below:
o HTML stands for HyperText Markup Language.
o HTML is used to create web pages and web applications.
o HTML is widely used language on the web.
o We can create a static website by HTML only.
o Technically, HTML is a Markup language rather than a programming language.
HTML Tags
HTML tags are like keywords which defines that how web browser will format and
display the content. With the help of tags, a web browser can distinguish between an
HTML content and a simple content. HTML tags contain three main parts: opening tag,
content and closing tag. But some HTML tags are unclosed tags.
When a web browser reads an HTML document, browser reads it from top to bottom
and left to right. HTML tags are used to create HTML documents and render their
properties. Each HTML tags have different properties.
An HTML file must have some essential tags so that web browser can differentiate
between a simple text and HTML text.
All HTML tags must enclosed within < > these brackets.
o Every tag in HTML perform different tasks.
o If you have used an open tag <tag>, then you must use a close tag </tag> (except some
tags)
Syntax
<tag> content </tag>
Note: HTML tags are always written in lowercase letters.
Heading Tags
Any document starts with a heading. You can use different sizes for your headings.
HTML also has six levels of headings, which use the elements <h1>, <h2>, <h3>,
<h4>, <h5>, and <h6>. While displaying any heading, browser adds one line before
and one line after that heading.
<html>
<head>
<title>Heading Example</title>
</head>
<body>
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
<h4>This is heading 4</h4>
<h5>This is heading 5</h5>
<h6>This is heading 6</h6>
</body>
</html>
This will produce the following result –
This is heading 1
This is heading 2
This is heading 3
This is heading 4
This is heading 5
This is heading 6
Paragraph Tag
The <p> tag offers a way to structure your text into different paragraphs. Each
paragraph of text should go in between an opening <p> and a closing </p> tag as
shown below in the example –
<html>
<head>
<title>Paragraph Example</title>
</head>
<body>
<p>Here is a first paragraph of text.</p>
<p>Here is a second paragraph of text.</p>
<p>Here is a third paragraph of text.</p>
</body>
</html>
OUTPUT:
Here is a first paragraph of text.
Here is a second paragraph of text.
Here is a third paragraph of text.
Line Break Tag
Whenever you use the <br /> element, anything following it starts from the next line.
This tag is an example of an empty element, where you do not need opening and
closing tags, as there is nothing to go in between them.
The <br /> tag has a space between the characters br and the forward slash. If you
omit this space, older browsers will have trouble rendering the line break, while if you
miss the forward slash character and just use <br> it is not valid in XHTML.
<html>
<head>
<title>Line Break Example</title>
</head>
<body>
<p>Hello<br />
You delivered your assignment ontime.<br />
Thanks<br />
Mahnaz</p>
</body>
</html>
Hello
You delivered your assignment on time.
Thanks
Mahnaz
Lists
HTML Lists are used to specify lists of information. All lists may contain one or more list
elements. There are three different types of HTML lists:
1. Ordered List or Numbered List (ol)
2. Unordered List or Bulleted List (ul)
3. Description List or Definition List (dl)
4. Nested List
1. HTML Ordered List or Numbered List
In the ordered HTML lists, all the list items are marked with numbers by default. It is
known as numbered list also. The ordered list starts with <ol> tag and the list items start
with <li> tag.
<ol>
<li>Aries</li>
<li>Bingo</li>
<li>Leo</li>
<li>Oracle</li>
</ol>
Output:
1. Aries
2. Bingo
3. Leo
4. Oracle
2. HTML Unordered List or Bulleted List
In HTML Unordered list, all the list items are marked with bullets. It is also known as
bulleted list also. The Unordered list starts with <ul> tag and list items start with the <li>
tag.
<ul>
<li>Aries</li>
<li>Bingo</li>
<li>Leo</li>
<li>Oracle</li>
</ul>
Output:
o Aries
o Bingo
o Leo
o Oracle
3. HTML Description List or Definition List
HTML Description list is also a list style which is supported by HTML and XHTML. It is
also known as definition list where entries are listed like a dictionary or encyclopedia.
The definition list is very appropriate when you want to present glossary, list of terms
or other name-value list.
The HTML definition list contains following three tags:
1. <dl> tag defines the start of the list.
2. <dt> tag defines a term.
3. <dd> tag defines the term definition (description).
<dl>
<dt>Aries</dt>
<dd>-One of the 12 horoscope sign.</dd>
<dt>Bingo</dt>
<dd>-One of my evening snacks</dd>
<dt>Leo</dt>
<dd>-It is also an one of the 12 horoscope sign.</dd>
<dt>Oracle</dt>
<dd>-It is a multinational technology corporation.</dd>
</dl>
Output:
Aries
-One of the 12 horoscope sign.
Bingo
-One of my evening snacks
Leo
-It is also an one of the 12 horoscope sign.
Oracle
-It is a multinational technology corporation.
4. HTML Nested List
A list within another list is termed as nested list. If you want a bullet list inside a
numbered list then such type of list will called as nested list.
Code:
<!DOCTYPE html>
<html>
<head>
<title>Nested list</title>
</head>
<body>
<p>List of Indian States with thier capital</p>
<ol>
<li>Delhi
<ul>
<li>NewDelhi</li>
</ul>
</li>
<li>Haryana
<ul>
<li>Chandigarh</li>
</ul>
</li>
<li>Gujarat
<ul>
<li>Gandhinagar</li>
</ul>
</li>
<li>Rajasthan
<ul>
<li>Jaipur</li>
</ul>
</li>
<li>Maharashtra
<ul>
<li>Mumbai</li>
</ul>
</li>
<li>Uttarpradesh
<ul>
<li>Lucknow</li></ul>
</li>
</ol>
</body>
</html>
Links
A webpage can contain various links that take you directly to other pages and even
specific parts of a given page. These links are known as hyperlinks.
Hyperlinks allow visitors to navigate between Web sites by clicking on words,
phrases, and images. Thus you can create hyperlinks using text or images available
on a webpage.
● Linking Documents
A link is specified using HTML tag <a>. This tag is called anchor tag and anything
between the opening <a> tag and the closing </a> tag becomes part of the link and a
user can click that part to reach to the linked document. Following is the simple
syntax to use <a> tag.
<a href = "Document URL" ... attributes-list>Link Text</a>
<!DOCTYPE html>
<html>
<head>
<title>Hyperlink Example</title>
</head>
<body>
<p>Click following link</p>
<a href = "https://www.tutorialspoint.com" target = "_self">Tutorials
Point</a>
</body>
</html>
Output:
Click following link
Tutorials Point
● Email Links
It is not difficult to put an HTML email link on your webpage but it can cause
unnecessary spamming problem for your email account. There are people, who can
run programs to harvest these types of emails and later use them for spamming in
various ways.
You can have another option to facilitate people to send you emails. One option
could be to use HTML forms to collect user data and then use PHP or CGI script to
send an email.
A simple example, check our Contact Us Form. We take user feedback using this
form and then we are using one CGI program which is collecting this information and
sending us email to the one given email ID.
● Email Tag
HTML <a> tag provides you option to specify an email address to send an email.
While using <a> tag as an email tag, you will use mailto: email address along
with href attribute. Following is the syntax of using mailto instead of using http.
<a href = "mailto: abc@example.com">Send Email</a>
This code will generate the following link which you can use to send email.
Send Email
Images
Images are very important to beautify as well as to depict many complex concepts in
simple way on your web page. This tutorial will take you through simple steps to use
images in your web pages.
Insert Image
You can insert any image in your web page by using <img> tag. Following is the
simple syntax to use this tag.
<img src = "Image URL" ... attributes-list/>
The <img> tag is an empty tag, which means that, it can contain only list of attributes
and it has no closing tag.
Example
<!DOCTYPE html>
<html>
<head>
<title>Using Image in Webpage</title>
</head>
<body>
<p>Simple Image Insert</p>
<img src = "/html/images/test.png" alt = "Test Image" />
</body>
</html>
You can use PNG, JPEG or GIF image file based on your comfort but make sure you
specify correct image file name in src attribute. Image name is always case
sensitive.
The alt attribute is a mandatory attribute which specifies an alternate text for an
image, if the image cannot be displayed.
Set Image Location
Usually we keep all the images in a separate directory. So let's keep HTML file
test.htm in our home directory and create a subdirectory images inside the home
directory where we will keep our image test.png.
Example
<!DOCTYPE html>
<html>
<head>
<title>Using Image in Webpage</title>
</head>
<body>
<p>Simple Image Insert</p>
<img src = "/html/images/test.png" alt = "Test Image" />
</body>
</html>
Set Image Width/Height
You can set image width and height based on your requirement
using width and height attributes. You can specify width and height of the image in
terms of either pixels or percentage of its actual size.
Example
<!DOCTYPE html>
<html>
<head>
<title>Set Image Width and Height</title>
</head>
<body>
<p>Setting image width and height</p>
<img src = "/html/images/test.png" alt = "Test Image" width = "150"
height = "100"/>
</body>
</html>
Set Image Border
By default, image will have a border around it, you can specify border thickness in
terms of pixels using border attribute. A thickness of 0 means, no border around the
picture.
Example
<!DOCTYPE html>
<html>
<head>
<title>Set Image Border</title>
</head>
<body>
<p>Setting image Border</p>
<img src = "/html/images/test.png" alt = "Test Image" border = "3"/>
</body>
</html>
Set Image Alignment
By default, image will align at the left side of the page, but you can
use align attribute to set it in the center or right.
Example
!DOCTYPE html>
<html>
<head>
<title>Set Image Alignment</title>
</head>
<body>
<p>Setting image Alignment</p>
<img src = "/html/images/test.png" alt = "Test Image" border = "3" align
= "right"/>
</body>
</html>
Tables
he HTML tables allow web authors to arrange data like text, images, links, other
tables, etc. into rows and columns of cells.
The HTML tables are created using the <table> tag in which the <tr> tag is used to
create table rows and <td> tag is used to create data cells. The elements under <td>
are regular and left aligned by default
Example
<!DOCTYPE html>
<html>
<head>
<title>HTML Tables</title>
</head>
<body>
<table border = "1">
<tr>
<td>Row 1, Column 1</td>
<td>Row 1, Column 2</td>
</tr>
<tr>
<td>Row 2, Column 1</td>
<td>Row 2, Column 2</td>
</tr>
</table>
</body>
</html>
Table Heading
Table heading can be defined using <th> tag. This tag will be put to replace <td>
tag, which is used to represent actual data cell. Normally you will put your top row as
table heading as shown below, otherwise you can use <th> element in any row.
Headings, which are defined in <th> tag are centered and bold by default.
Example
<!DOCTYPE html>
<html>
<head>
<title>HTML Table Header</title>
</head>
<body>
<table border = "1">
<tr>
<th>Name</th>
<th>Salary</th>
</tr>
<tr>
<td>Ramesh Raman</td>
<td>5000</td>
</tr>
<tr>
<td>Shabbir Hussein</td>
<td>7000</td>
</tr>
</table>
</body>
</html>
Cellpadding and Cellspacing Attributes
There are two attributes called cellpadding and cellspacing which you will use to
adjust the white space in your table cells. The cellspacing attribute defines space
between table cells, while cellpadding represents the distance between cell borders
and the content within a cell.
Example
<!DOCTYPE html>
<html>
<head>
<title>HTML Table Cellpadding</title>
</head>
<body>
<table border = "1" cellpadding = "5" cellspacing = "5">
<tr>
<th>Name</th>
<th>Salary</th>
</tr>
<tr>
<td>Ramesh Raman</td>
<td>5000</td>
</tr>
<tr>
<td>Shabbir Hussein</td>
<td>7000</td>
</tr>
</table>
</body>
</html>
Colspan and Rowspan Attributes
You will use colspan attribute if you want to merge two or more columns into a
single column. Similar way you will use rowspan if you want to merge two or more
rows.
Example
<!DOCTYPE html>
<html>
<head>
<title>HTML Table Colspan/Rowspan</title>
</head>
<body>
<table border = "1">
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
</tr>
<tr>
<td rowspan = "2">Row 1 Cell 1</td>
<td>Row 1 Cell 2</td>
<td>Row 1 Cell 3</td>
</tr>
<tr>
<td>Row 2 Cell 2</td>
<td>Row 2 Cell 3</td>
</tr>
<tr>
<td colspan = "3">Row 3 Cell 1</td>
</tr>
</table>
</body>
</html>
Frames
HTML frames are used to divide your browser window into multiple sections where
each section can load a separate HTML document. A collection of frames in the
browser window is known as a frameset. The window is divided into frames in a
similar way the tables are organized: into rows and columns.
Disadvantages of Frames
There are few drawbacks with using frames, so it's never recommended to use frames in your webpages
● Some smaller devices cannot cope with frames often because their screen is
not big enough to be divided up.
● Sometimes your page will be displayed differently on different computers due
to different screen resolution.
● The browser's back button might not work as the user hopes.
● There are still few browsers that do not support frame technology.
Creating Frames
To use frames on a page we use <frameset> tag instead of <body> tag. The
<frameset> tag defines, how to divide the window into frames. The rows attribute of
<frameset> tag defines horizontal frames and cols attribute defines vertical frames.
Each frame is indicated by <frame> tag and it defines which HTML document shall
open into the frame.
Example
Following is the example to create three horizontal frames
<!DOCTYPE html>
<html>
<head>
<title>HTML Frames</title>
</head>
<frameset rows = "10%,80%,10%">
<frame name = "top" src = "/html/top_frame.htm" />
<frame name = "main" src = "/html/main_frame.htm" />
<frame name = "bottom" src = "/html/bottom_frame.htm" />
</frameset>
</html>
