CSE352Unit1 1

UNIT 1
➢ HTML basic tags,

➢ various links implementation,
➢ image map,
➢ table formatting,
➢ form design.
CSE 352, Faculty-Ms. Preeti Kaushik

Web Page
• Web page is a document available on world wide web. Web Pages are stored on
web server and can be viewed using a web browser.
• A web page can contain huge information including text, graphics, audio, video and
hyper links. These hyper links are the link to other web pages.
• Collection of linked web pages on a web server is known as website. There is

unique Uniform Resource Locator (URL) is associated with each web page.
• Webpage are of 2 types:

a) Static webpage
b) Dynamic webpage

a) Static Web page
• Static web pages are also known as flat or stationary web page. They
are loaded on the client’s browser as exactly they are stored on the
web server. Such web pages contain only static information. User can
only read the information but can’t do any modification or interact
with the information.
• Static web pages are created using only HTML. Static web pages are
only used when the information is no more required to be modified.

Dynamic Web page
• Dynamic web page shows different information at different point of time. It is
possible to change a portion of a web page without loading the entire web
page. It has been made possible using Ajax technology.
• Server-side dynamic web page: It is created by using server-side scripting.

There are server-side scripting parameters that determine how to assemble a
new web page which also include setting up of more client-side processing.
• Client-side dynamic web page: It is processed using client side scripting such as
JavaScript. And then passed in to Document Object Model (DOM).

Client-side Scripting
• Client-side scripting refers to the programs that are executed on
client-side. Client-side scripts contains the instruction for the browser
to be executed in response to certain user’s action.
• Client-side scripting programs can be embedded into HTML files or
also can be kept as separate files.

Server-side Scripting
• Sever-side scripting acts as an interface for the client and also limit
the user access the resources on web server. It can also collects the
user’s characteristics in order to customize response.

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.

HTML
HTML stands for Hypertext Markup Language, and it is the most widely
used language to write Web Pages.
• Hypertext refers to the way in which Web pages (HTML documents)
are linked together. Thus the link available on a webpage are called
Hypertext.
• As its name suggests, HTML is a Markup Language which means you
use HTML to simply "mark up" a text document with tags that tell a
Web browser how to structure it to display.

Example
<!DOCTYPE html>
<html>
<head> <title>This is document title</title> </head>
<body> <h1>This is a heading</h1>
<p>Document content goes here.....</p>
</body>
</html>

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

Example
<!DOCTYPE html>
<html><head>
<title>Heading Example</title></head><body>
<h1>This is heading 1</h1>
</body>
</html>
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.
<!DOCTYPE html>
<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

Example
<!DOCTYPE html>
<html>
<head>
<title>Line Break Example</title>
</head>
<body><p>Hello<br />
You delivered your assignment ontime.<br />
Thanks<br />
Mahnaz</p>
</body>
</html>

Output
Hello
You delivered your assignment ontime.
Thanks
Mahnaz

Centering Content
You can use <center> tag to put any content in the center
of the page or any table cell.

Output
This text is not in the center.
This text is in the center.

Horizontal Lines
Horizontal lines are used to visually break up sections of a document.
The <hr> tag creates a line from the current position in the document
to the right margin and breaks the line accordingly.

Example
<!DOCTYPE html>
<html>
<head>
<title>Horizontal Line Example</title>
</head>
<body><p>This is paragraph one and should be on top</p>
<hr />
<p>This is paragraph two and should be at bottom</p>
</body>
</html>

Output

Preserve Formatting
Sometimes you want your text to follow the exact format of how it
is written in the HTML document. In those cases, you can use the
preformatted tag <pre>.
Any text between the opening <pre> tag and the closing </pre> tag
will preserve the formatting of the source document.

Output

Nonbreaking Spaces
• Suppose you want to use the phrase "12 Angry Men." Here you would
not want a browser to split the "12, Angry" and "Men" across two
lines:
• An example of this technique appears in the movie "12 Angry Men."
In cases where you do not want the client browser to break text, you
should use a nonbreaking space entity instead of a normal
space.

Example
<!DOCTYPE html>
<html>
<head>
<title>Nonbreaking Spaces Example</title>
</head>
<body>
<p>An example of this technique appears in the movie
"12 Angry Men."</p>
</body>
</html>
Output
An example of this technique appears in the movie "12 Angry Men."

HTML element
• An HTML element is an individual component of an HTML
document.
• HTML Elements represent semantics, or meaning. For example,
The title element represents the title of the document.
• Most HTML elements are written with a start tag (or opening
tag) and an end tag (or closing tag), with the content in between.
• Elements can also contain attributes that define additional
properties of an element. For example, a paragraph, which is
represented by the p element, would be written as:

• There are some HTML elements which don't need to be closed, such
as <img.../>, <hr /> and <br /> elements. These are known as void
elements or empty elements or self closing elements.
HTML Elements Types

• Elements can be placed in two distinct groups: block level and inline
level elements.

HTML Tag vs. Element
• An HTML element is defined by a starting tag. If the element contains
other content, it ends with a closing tag.
• For example <p> is starting tag of a paragraph and </p> is closing tag
of the same paragraph but <p>This is paragraph</p> is a paragraph
element.

Nested HTML Elements
• Most HTML elements can contain any number of further elements, which are,
in turn, made up of tags, attributes, and content or other elements.

HTML Attributes
• All HTML elements can have attributes
• An attribute defines the characteristics of an HTML element
• Attributes are always specified in the start tag
• Attributes usually come in name/value pairs like: name="value"
• The name is the property you want to set. For example, the paragraph <p>
element in the example carries an attribute whose name is align, which you can
use to indicate the alignment of paragraph on the page.
• The value is what you want the value of the property to be set and always put
within quotations. The below example shows three possible values of align
attribute: left, center and right.

Attribute example

Question?
• <img src="img_girl.jpg" width="500" height="600">
Identify tag : empty or paired?

Attributes?
Attribute property name?
Property value?

HTML Images
• Insert Image: <img src="Image URL" ... attributes-list/>
• Set Image Location
• Set Image Width/Height: width= “150”, height =“150”
• Set Image Border: border =“3”
• Set Image Alignment: align=“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" width="150" height="100" align="right"/>
</body>
</html>
Output

HTML Text 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.
• Links allow users to click their way from page to page.
• Hyperlinks allow visitors to navigate between Web sites by clicking on
words, phrases, and images.
• You can create hyperlinks using text or images available on a webpage.
• HTML Link Colors By default, a link will appear like this (in all browsers):
a) An unvisited link is underlined and blue
b) A visited link is underlined and purple
c) An active link is underlined and red

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>

The target Attribute
We have used target attribute in our previous example. This
attribute is used to specify where to open the linked
document. Following are possible options for the target
attributes:
Option Description
_blank Opens the linked document in a new window or tab.
Opens the linked document in the same window/tab as it was
_self
clicked( that is default)
_parent Opens the linked document in the parent frame.
_top Opens the linked document in the full body of the window.
targetframe Opens the linked document in a named targetframe.

Example
<!DOCTYPE html>
<html>
<head>
<title>Hyperlink Example</title>
<base href="https://www.tutorialspoint.com/">
</head>
<body>
<p>Click any of the following links</p>
<a href="/html/index.htm" target="_blank">Opens in New</a> |
<a href="/html/index.htm" target="_self">Opens in Self</a> |
<a href="/html/index.htm" target="_parent">Opens in Parent</a> |
<a href="/html/index.htm" target="_top">Opens in Body</a>
</body>
</html>

Output
Click any of the following links
Opens in New | Opens in Self | Opens in Parent | Opens in Body

question
• How to add bookmark to your webpage

Use of Base Path
When you link HTML documents related to the same website, it is not
required to give a complete URL for every link. You can get rid of it if
you use <base> tag in your HTML document header. This tag is used
to give a base path for all the links. So your browser will concatenate
given relative path to this base path and will make a complete URL.

Example
<!DOCTYPE html>
<html>
<head>
<base href="https://www.tutorialspoint.com/">
</head>
<body>
<p>Click following link</p>
<a href="/html/index.htm" target="_blank">HTML Tutorial</a>
</body>
</html>
Now given URL <a href="/html/index.htm" is being considered as <a

href="https://www.tutorialspoint.com/html/index.htm".

Setting Link Colors
You can set colors of your links, active links and visited links using link, alink and vlink
attributes of <body> tag.
<!DOCTYPE html>
<html>
<head>
<base href="https://www.tutorialspoint.com/"></head>
<body alink="#54A250" link="#040404" vlink="#F40633"><p>Click following link</p>
<a href="/html/index.htm" target="_blank" >HTML Tutorial</a>
</body>
</html>

HTML Image Links
<!DOCTYPE html>
<html>
<head>
<title>Image Hyperlink Example</title> </head>
<body>
<p>Click following link</p>
<a href="https://www.tutorialspoint.com" target="_self">
<img src="/images/logo.png" alt="Tutorials Point" border="0"/> </a>
</body>’</html>
HTML Tables
The HTML tables are created using the Example
<table> tag in which the <tr> tag is used to <!DOCTYPE html>

create table rows and <td> tag is used to <html>
create data cells. <head> <title>HTML Tables</title></head>
<body>
<table border="1">
<tr>
<td>Row 1, Column 1</td>
</tr>
<tr>
</tr>
</table>
</body>
</html>
Output
Row 1, Column 1 Row 1, Column 2

Row 2, Column 1 Row 2, Column 2

Table Heading
<!DOCTYPE html> </tr>
<html> <tr>
<head> <td>Shabbir Hussein</td>
<title>HTML Table Header</title> <td>7000</td>
</head> </tr>
<body><table border="1"> </table>
<tr> </body>
<th>Name</th> </html>
<th>Salary</th>
</tr>
<tr>
<td>Ramesh Raman</td>
<td>5000</td>
Output
Name Salary
Ramesh Raman 5000
Shabbir Hussein 7000

Other useful commands for Tables

question
Read colspan and rowspan property usage

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.

<no frame> tag
• The <noframes> tag is not supported in HTML5.
• The <noframes> tag is a fallback tag for browsers that do not support
frames. It can contain all the HTML elements that you can find inside
the <body> element of a normal HTML page.
• The <noframes> element can be used to link to a non-frameset
version of the web site or to display a message to users that frames
are required.
• The <noframes> element goes inside the <frameset> element.

Example
<!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" />
<noframes>
<body> Your browser does not support frames. </body>
</noframes>
</frameset>
</html>
Output

<!DOCTYPE html>
<html>
<head>
<title>HTML Frames</title>
</head>
<frameset cols="25%,50%,25%">
<frame name="left" src="C:\Users\admin\Desktop\sharda\17-18\17-18\Web Design\HTML

pages\top.jpg" />
<frame name="center" src="C:\Users\admin\Desktop\sharda\17-18\17-18\Web Design\HTML

pages\main.png" />
<frame name="right" src="C:\Users\admin\Desktop\sharda\17-18\17-18\Web Design\HTML

pages\bottom.jpg" />
<noframes>
</noframes>
</frameset>
</html> CSE 352, Faculty-Ms. Preeti Kaushik OUTPUT

Output

Frame's name and target attributes
<!DOCTYPE html>
<html>
<head>
<title>HTML Target Frames</title>
</head>
<frameset cols="20, *">

<frame src="C:\Users\admin\Desktop\sharda\17-18\17-18\Web Design\HTML pages\top.jpg" name="menu_page" />
<frame src="C:\Users\admin\Desktop\sharda\17-18\17-18\Web Design\HTML pages\top.jpg" name="main_page" />
<noframes>
</noframes>
</frameset>
</html>

HTML div Tag
The HTML <div> tag is used for defining a section of your document.
With the div tag, you can group large sections of HTML elements
together and format them with CSS.

Example
<!DOCTYPE html>
<html>
<head>
<title>HTML div Tag</title>
<link rel="stylesheet" href="style2.css">
</head>
<body>
<div id="contentinfo">
<p>Welcome to our website. We provide tutorials on various subjects.</p>
</div>
</body>
</html>

style2.css
#contentinfo p {
line-height: 20px;
margin: 30px;
padding-bottom: 20px;
text-align: justify;
width: 140px;
color: red;
}
Output

HTML <span> Tag
• The span tag is like the div tag. It has no meaning at all and is mostly
used for styling by using an id or class.
• The HTML <span> tag is used for grouping and applying styles to
inline elements.
• There is a difference between the span tag and the div tag. The span
tag is used with inline elements whilst the div tag is used with block-
level content.

Example
<!DOCTYPE html>
<html>
<head>
<title>HTML span Tag</title>
</head>
<body>
<p>This is a paragraph <span style="color:#FF0000;"> This is a
paragraph</span> This is a paragraph</p>
<p><span style="color:#8866ff;"> This is another paragraph</span></p>
</body>
</html>
OUTPUT
iframe
• The <iframe> tag specifies an inline frame.
• An iframe is used to display a web page within a web page.
• An inline frame is used to embed another document within the
current HTML document.

• Iframe Syntax
<iframe src="URL"></iframe>
The src attribute specifies the URL (web address) of the inline frame
page.
• Iframe - Set Height and Width

<iframe src="demo_iframe.htm" height="200" width="300"></iframe>

Example
<!DOCTYPE html>
<html>
<head>
<title>HTML Iframes</title>
</head>
<body>
<p>Document content goes here...</p>
<iframe src="/html/menu.htm" width="555" height="200"> Sorry
your browser does not support inline frames.</iframe>
<p>Document content also go here...</p>
</body>
</html>
Output

CSE352Unit1 1

Uploaded by

Copyright:

Available Formats

CSE352Unit1 1

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

CSE352Unit1 1

Uploaded by

Copyright:

Available Formats

UNIT 1

➢ HTML basic tags,

CSE 352, Faculty-Ms. Preeti Kaushik

• Collection of linked web pages on a web server is known as website. There is

• Webpage are of 2 types:

CSE 352, Faculty-Ms. Preeti Kaushik

CSE 352, Faculty-Ms. Preeti Kaushik

• Server-side dynamic web page: It is created by using server-side scripting.

CSE 352, Faculty-Ms. Preeti Kaushik

CSE 352, Faculty-Ms. Preeti Kaushik

CSE 352, Faculty-Ms. Preeti Kaushik

CSE 352, Faculty-Ms. Preeti Kaushik

CSE 352, Faculty-Ms. Preeti Kaushik

CSE 352, Faculty-Ms. Preeti Kaushik

CSE 352, Faculty-Ms. Preeti Kaushik

CSE 352, Faculty-Ms. Preeti Kaushik

CSE 352, Faculty-Ms. Preeti Kaushik

CSE 352, Faculty-Ms. Preeti Kaushik

CSE 352, Faculty-Ms. Preeti Kaushik

CSE 352, Faculty-Ms. Preeti Kaushik

CSE 352, Faculty-Ms. Preeti Kaushik

CSE 352, Faculty-Ms. Preeti Kaushik

CSE 352, Faculty-Ms. Preeti Kaushik

CSE 352, Faculty-Ms. Preeti Kaushik

CSE 352, Faculty-Ms. Preeti Kaushik

CSE 352, Faculty-Ms. Preeti Kaushik

CSE 352, Faculty-Ms. Preeti Kaushik

CSE 352, Faculty-Ms. Preeti Kaushik

CSE 352, Faculty-Ms. Preeti Kaushik

HTML Elements Types

CSE 352, Faculty-Ms. Preeti Kaushik

CSE 352, Faculty-Ms. Preeti Kaushik

CSE 352, Faculty-Ms. Preeti Kaushik

CSE 352, Faculty-Ms. Preeti Kaushik

CSE 352, Faculty-Ms. Preeti Kaushik

Identify tag : empty or paired?

CSE 352, Faculty-Ms. Preeti Kaushik

CSE 352, Faculty-Ms. Preeti Kaushik

CSE 352, Faculty-Ms. Preeti Kaushik

CSE 352, Faculty-Ms. Preeti Kaushik

Following is the simple syntax to use <a> tag.

CSE 352, Faculty-Ms. Preeti Kaushik

CSE 352, Faculty-Ms. Preeti Kaushik

CSE 352, Faculty-Ms. Preeti Kaushik

CSE 352, Faculty-Ms. Preeti Kaushik

CSE 352, Faculty-Ms. Preeti Kaushik

CSE 352, Faculty-Ms. Preeti Kaushik

Now given URL <a href="/html/index.htm" is being considered as <a

CSE 352, Faculty-Ms. Preeti Kaushik

CSE 352, Faculty-Ms. Preeti Kaushik

<table> tag in which the <tr> tag is used to <!DOCTYPE html>

Row 1, Column 1 Row 1, Column 2

CSE 352, Faculty-Ms. Preeti Kaushik

CSE 352, Faculty-Ms. Preeti Kaushik

CSE 352, Faculty-Ms. Preeti Kaushik

CSE 352, Faculty-Ms. Preeti Kaushik

CSE 352, Faculty-Ms. Preeti Kaushik

CSE 352, Faculty-Ms. Preeti Kaushik

CSE 352, Faculty-Ms. Preeti Kaushik