Seminar On HTML

HYPERTEXT MARKUP
LANGUAGE (HTML)
By:
Vikram Yadav
Divanshu
Ashima Nag
Ankit Kumar
ext Authoring Tools
Any text editor can be used to

create HTML documents.
The most commonly used text
editors are:
Notepad (Windows)
WordPad (Windows)
Simpletext (Macintosh)
WYSIWYG Authoring Tools
What You See is What You Get

(WYSIWYG) authoring tools provide
graphical user interfaces to simplify the
creation of HTML documents.
Examples of WYSIWYG authoring tools
are:
FrontPage by Microsoft
Dreamweaver by Macromedia
PageMill by Adobe
Netscape Composer
Structure of an HTML
Document
An HTML document is divided into

two main sections:
Heading - The HEADing contains
information describing the
document, such as its title. The
heading section is indicated by the
<HEAD> and </HEAD> tags.
Body - The BODY section is where the
Web document text, graphics, and
other elements are placed. The body
section is indicated by the <BODY>
and </BODY> tags.
The <head> Section

Contains information that doesnt
show directly on the viewable page
Starts after the <!doctype>
declaration
Begins with <head> and ends with
</head>
Contains mandatory single <title>
tag
Can contain some other tags, e.g.
<meta>
<script>
<head> Section:
<title> tag
Title should be placed between

<head> and </head> tags
<title>Telerik Academy Winter Season
2009/2010 </title>
Used to specify a title in the window

titlebar
Search engines and people rely on
titles
c Files
HTML supports two main graphic file formats:

GIF - Graphics Interchange Format
GIF files provide a maximum of 8-bit (256 colors), use
indexed color, can be interlaced (image displayed in four
passes), and support transparency and animation. GIF
files should be used for images such as logos, cartoons,
and icons.
JPG Joint Photographic Expert Group

JPG files provide a maximum of 24 bit color (true color),
can handle grayscale images, allow you to control

compression, and are progressive (a designer can specify
the number of passes to use when displaying the image
(like GIF interfacing). JPG files should be used for
photographs and paintings.
c Files
A newer format was introduced in 1995-PNG Portable Network Format.

PNG is an open standard.
Use has been restricted because of limited browser
support. It is generally supported by version 4.0
browsers and above.
Provides 48 bit color, a compression system,
interlacing (7 passes), and support for 8-bit
transparency
ultimedia File Formats
Multimedia files are used to provide audio and

video.
Audio and video may be supplied in two ways:
Streaming
Non-Streaming
Non-streaming files must be downloaded in

their entirety to the hard disk drive of the
users machine before playing can begin.
Streaming technology was developed to
overcome the issue of download time.
HTML Basics
irst HTML Page

test.html
<!DOCTYPE HTML>
<html>
<head>
<title>My First HTML Page</title>
</head>
<body>
<p>This is some text...</p>
</body>
</html>
First HTML Page: Tags

<!DOCTYPE HTML>
Opening
<html>
tag
<head>
</head>
<body>
Closing
<p>This is some text...</p> tag
</body>
</html>
An HTML element consists of an opening

tag, a closing tag and the content inside.
12
First HTML Page:

Header
HTML
<!DOCTYPE HTML>
header
<html>
<head>
</head>
<body>
</body>
</html>
First HTML Page: Body

<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
</body>
</html>
HTML
body
Some Simple Tags
Hyperlink Tags
<a href="http://www.telerik.com/"
title="Telerik">Link to Telerik Web
Image
site</a>Tags
<img src="logo.gif" alt="logo" />
Text
formatting tags
This text is <em>emphasized.</em>

<br />new line<br />
This one is <strong>more
emphasized.</strong>
Some Simple Tags

Example
some-tags.html
<!DOCTYPE HTML>
<html>
<head>
<title>Simple Tags Demo</title>
</head>
<body>
<a href="http://www.telerik.com/" title=
"Telerik site">This is a link.</a>
<br />
<img src="logo.gif" alt="logo" />
<br />
<strong>Bold</strong> and <em>italic</em>
text.
</body>
</html>
Headings and
Paragraphs
Heading Tags (h1 h6)

<h1>Heading 1</h1>
<h2>Sub heading 2</h2>
Paragraph Tags
<p>This is my first paragraph</p>
<p>This is my second paragraph</p>
Sections: div and span
<div style="background: skyblue;">

This is a div</div>
Headings and Paragraphs

Example headings.html
<!DOCTYPE HTML>
<html>
<head><title>Headings and
paragraphs</title></head>
<body>
<h1>Heading 1</h1>
<p>This is my first paragraph</p>
<p>This is my second paragraph</p>
<div style="background:skyblue">
This is a div</div>
</body>
</html>
Plug-Ins and Multimedia

Extensions
Browsers can be extended using

additional software known as plug-ins.
Plug-ins work as part of the browser.
Plug-ins are available for audio and for

displaying special effect images.
Examples include:
Shockwave
Flash
RealPlayer
QTVR (Quick Time)
Plug-Ins and Multimedia

Extensions
RealPlayer by RealNetworks
Provides live and on-demand streamed audio and
video content on the web. It is widely used and is
optimized for slow connections. RealPlayer can
provide various audio qualities up to CD quality
using ISDN and faster connections. Minimum
support for reasonable quality is 28.8 Kbps.
QuickTime Viewer from Apple

Supports the viewing of graphics, audio, and video.
NetScape Navigator 3+ and Internet Explorer 3+ are
shipped with Quick viewer as part of the
application. Quick time movies are popular because
of their small file size.
Extensible Markup Language

(XML)
XML is the universal language for data

formatting on the Web. The limited
capabilities of HTML mean that many
data types cannot be presented in a
consistent and sophisticated manner,
while XML can be customized by
developers for any particular task such
as:
Financial data
Scientific data
Legal information
Virtual Reality Modeling

Language (VRML)
VRML is used to create three

dimensional objects with different colors
and textures which can be placed in a
virtual reality space through which the
user can move.
Like HTML, the VRML language is
interpreted by the browser. VRML
supports Java and JavaScript as well as
sound and animation.
The <!DOCTYPE>
Declaration
HTML documents must start with a

document type definition (DTD)
It tells web browsers what type is the
served code
Possible versions: HTML 4.01, XHTML
1.0 (Transitional or Strict), XHTML 1.1,
HTML 5
Example:
<!DOCTYPE html PUBLIC
"-//W3C//DTD XHTML 1.0
Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1transitional.dtd">
TML vs. XHTML
XHTML is more strict than HTML

Tags and attribute names must be
in lowercase
All tags must be closed (<br/>,
<img/>) while HTML allows <br> and
<img> and implies missing closing
tags (<p>par1 <p>par2)
XHTML allows only one root <html>
element (HTML allows more than
one)
XHTML vs. HTML

Many element attributes are
deprecated in XHTML, most are
moved to CSS
Attribute minimization is
forbidden,
e.g.
<input type="checkbox"
checked>
<input type="checkbox"
checked="checked" />
Note: Web browsers load XHTML

faster than HTML and valid code
faster than invalid!
Using Scripts
Live Demo
<head> Section:
<style>
The <style> element embeds

formatting information (CSS styles)
into
an HTML page
<html>
style-example.html
<head>
<style type="text/css">
p { font-size: 12pt; line-height: 12pt; }
p:first-letter { font-size: 200%; }
span { text-transform: uppercase; }
</style>
</head>
<body>
<p>Styles demo.<br />
<span>Test uppercase</span>.
</p>
</body>
</html>
Comments:  Tag

Comments can exist anywhere
between the <html></html> tags
Comments start with 
<!- Facebook Logo (a JPG file) -->

<img src="logo.jpg" alt=Facebook Logo">
<!- Hyperlink to the web site -->
<a
href="http://facebook.com/">Facebook</a>
<!- Show the news table -->
<table class="newstable">
...
Text Formatting
Text formatting tags modify the

text between the opening tag and
the closing tag
<b></b>
Ex. <b>Hello</b> makes
Hello bold
bold
<i></i>
italicized
<u></u>
underlined
<sup></sup>
Samplesuperscript
<sub></sub>
Samplesubscript
<strong></strong>
strong
<em></em>
emphasized
Preformatted text
<pre></pre>
<blockquote></blockquote Quoted text block

>
<del></del>
Deleted text strike through
Text Formatting
Example
text-
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0

formatting.html
Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1transitional.dtd">
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>Notice</h1>
<p>This is a <em>sample</em> Web page.</p>
<p><pre>Next paragraph:
preformatted.</pre></p>
<h2>More Info</h2>
<p>Specifically, were using XHMTL 1.0 transitional.<br
/>
Next line.</p>
</body>
Text
Formatting
Live Demo
Hyperlinks: <a> Tag
Link to a document called

form.html on the same server in
the
same directory: Our Form</a>
<a href="form.html">Fill

parent.html
on
the
same
server
in
<a href="../parent.html">Parent</a>
the parent directory:
Link to a document called cat.html

<a href="stuff/cat.html">Catalog</a>
on the same server in the
Hyperlinks: <a> Tag
Link to an external Web site:

<a href="http://www.devbg.org"
target="_blank">BASD</a>
Always use a full URL,
including
"http://", not just

"www.somesite.com"
Using the target="_blank" attribute
opens the link in a new window
Link to an e-mail address:

<a href="mailto:bugs@example.com?
subject=Bug+Report">
Please report bugs here (by e-mail only)</a>
Hyperlinks: <a> Tag
Link to a document called applynow.html

On the same server, in same directory
Using an image as a link button:
<a href="apply-now.html"><img
src="apply-now-button.jpg" /></a>

index.html
On the same server, in the
<a
href="../english/index.html">Switch
to
subdirectory
english of the parent
English version</a>
directory:
erlinks
hyperlinks.html
<a href="form.html">Fill Our Form</a> <br />
<a href="../parent.html">Parent</a> <br />
<a href="stuff/cat.html">Catalog</a> <br />
target="_blank">BASD</a> <br />
<a href="mailto:bugs@example.com?subject=Bug
Report">Please report bugs here (by e-mail
only)</a>
<br />
<a href="apply-now.html"><img src="apply-nowbutton.jpg /></a> <br />
<a href="../english/index.html">Switch to English
version</a> <br />
Hyperlinks Example
hyperlinks.html
<a href="form.html">Fill Our Form</a> <br />
<a href="../parent.html">Parent</a> <br />
<a href="stuff/cat.html">Catalog</a> <br />
target="_blank">BASD</a> <br />
<a href="mailto:bugs@example.com?subject=Bug
Report">Please report bugs here (by e-mail
only)</a>
<br />
<a href="apply-now.html"><img src="apply-nowbutton.jpg /></a> <br />
<a href="../english/index.html">Switch to English
version</a> <br />
Hyperlinks
Live Demo
Links to the Same

Document
links-to-samedocument.html
<h1>Table
of Contents</h1>
<p><a href="#section1">Introduction</a><br />
<a href="#section2">Some background</A><br />
<a href="#section2.1">Project History</a><br />
...the rest of the table of contents...

<h2
...
<h2
...
<h3
...
id="section1">Introduction</h2>
Section 1 follows here ...
id="section2">Some background</h2>
id="section2.1">Project History</h3>
Section 2.1 follows here ...
Links to the Same

Document
links-to-samedocument.html
<h1>Table
of Contents</h1>
<p><a href="#section1">Introduction</a><br />
<a href="#section2">Some background</A><br />
<a href="#section2.1">Project History</a><br />
...the rest of the table of contents...

<h2
...
<h2
...
<h3
...
id="section1">Introduction</h2>
id="section2">Some background</h2>
id="section2.1">Project History</h3>
Section 2.1 follows here ...
Miscellaneous Tags
<hr />: Draws a horizontal rule
(line):
<hr
size="5" width="70%" />
<center></center>: Deprecated!
<center>Hello World!</center>
<font></font>: Deprecated!
<font size="3" color="blue">Font3</font>
<font size="+4" color="blue">Font+4</font>
Ordered Lists: <ol> Tag
Create an Ordered List using

<ol></ol>:
<ol type="1">
<li>Apple</li>
<li>Orange</li>
<li>Grapefruit</li>
</ol>
Attribute values for type are 1, A, a, I,

i
1.or
Apple
i. Apple
2. Orange
3. Grapefruit
a.
b.
A. Apple
B. Orange c.
C. Grapefruit
ii. Orange
iii. Grapefruit
Apple
Orange I. Apple
GrapefruitII. Orange
III. Grapefruit
Unordered Lists: <ul>

Tag
Create an Unordered List using

<ul type="disk">
<ul></ul>:
<li>Apple</li>
<li>Orange</li>
<li>Grapefruit</li>
</ul>
Attribute values for type are:

disc, circle or square
Apple
Orange
Pear
o Apple
Apple
Orange
Orange
Pear
Pear
Definition lists: <dl>

ag
Create definition lists using <dl>

Pairs of text and associated
definition; text is in <dt> tag,
definition in <dd> tag
<dl>
<dt>HTML</dt>
<dd>A markup language </dd>
<dt>CSS</dt>
<dd>Language used to </dd>
</dl>
Renders without bullets

Definition is indented
s Example
<ol type="1">
<li>Apple</li>
<li>Orange</li>
<li>Grapefruit</li>
</ol>
<ul type="disc">
<li>Apple</li>
<li>Orange</li>
<li>Grapefruit</li>
</ul>
<dl>
<dt>HTML</dt>
<dd>A markup lang</dd>
</dl>
lists.html
HTML Special
Characters
Live Demo
HTML Special
Characters
Symbol Name
HTML
Entity
Copyright Sign
Registered Trademark
Sign
Trademark Sign
©
™
Less Than
<
Greater Than
>
Ampersand
&
Non-breaking Space

Em Dash
—
Quotation Mark
"
Euro
€
British Pound
£
Japanese Yen
¥
®
Symbol
<
>
&
"
Special Characters
Example
<p>[>> Welcome
<<]</p>
special<p>►I have following cards:
chars.html
A♣, K♦ and 9♥.</p>
<p>►I prefer hard rock ♫
music ♫</p>
<p>© 2006 by Svetlin Nakov & his
team</p>
<p>Telerik Academy</p>
Block and Inline

Elements
Block elements add a line break

before and after them, and expand
to 100% width
<div>, <p>, <h1>, <ul> are block
elements
Inline elements dont break the

text before and after them
<span>, <a>, <em> are inline
elements
Using <DIV> and

<SPAN>
<div> Tag
<div> creates logical divisions
within a page
Block style element
Used with CSS
Example:
div-and<div
style="font-size:24px; color:red">DIV
span.html
example</div>
<p>This one is <span style="color:red; fontweight:bold">only a test</span>.</p>
<span> Tag
Inline style element
Useful for modifying a specific
portion of text
Don't create a separate area

(paragraph) in the document
Makes sense only with some CSS
span.html
<p>This one is <span style="color:red; fontweight:bold">only a test</span>.</p>
<p>This one is another <span style="fontsize:32px; font-weight:bold">TEST</span>.</p>
Questions ?
Thank
You

Seminar On HTML

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

Seminar On HTML

Uploaded by

Copyright:

Available Formats

HYPERTEXT MARKUP

ext Authoring Tools

Any text editor can be used to

WYSIWYG Authoring Tools

What You See is What You Get

An HTML document is divided into

The <head> Section

Title should be placed between

Used to specify a title in the window

HTML supports two main graphic file formats:

JPG Joint Photographic Expert Group

can handle grayscale images, allow you to control

A newer format was introduced in 1995-PNG Portable Network Format.

ultimedia File Formats

Multimedia files are used to provide audio and

Non-streaming files must be downloaded in

irst HTML Page

First HTML Page: Tags

An HTML element consists of an opening

First HTML Page:

First HTML Page: Body

Some Simple Tags

This text is <em>emphasized.</em>

Some Simple Tags

Heading Tags (h1 h6)

Sections: div and span

<div style="background: skyblue;">

Headings and Paragraphs

Plug-Ins and Multimedia

Browsers can be extended using

Plug-ins are available for audio and for

Plug-Ins and Multimedia

QuickTime Viewer from Apple

Extensible Markup Language

XML is the universal language for data

Virtual Reality Modeling

VRML is used to create three

HTML documents must start with a

"-//W3C//DTD XHTML 1.0

TML vs. XHTML

XHTML is more strict than HTML

XHTML vs. HTML

Note: Web browsers load XHTML

The <style> element embeds

Comments:  Tag

<!- Facebook Logo (a JPG file) -->

Text formatting tags modify the

<blockquote></blockquote Quoted text block

Deleted text strike through

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0

Hyperlinks: <a> Tag

Link to a document called

Link to a document called

Link to a document called cat.html

Hyperlinks: <a> Tag

Link to an external Web site:

"http://", not just

Link to an e-mail address:

Hyperlinks: <a> Tag

Link to a document called applynow.html

Link to a document called

Links to the Same

Links to the Same