INTRODUCTION TO HTML
What is HTML?
HTML or Hyper Text Markup Language is the standard which is
used by world wide web documents. We use a program called
browser to view documents. It is not a programming language even
though it is termed as language. The basic element of an HTML
page and therefore any document on the web is ASII text. HTML
uses what is called a tag and it is represented by the angle
brackets “<“ and “>”. Any text which is contained by the angle
brackets is considered as an HTML tag by browser and interpreted
accordingly. Since HTML uses ASCII text, the web documents are
delivered over the network such that they are not platform
dependent. Hence only web browser is required which can
interpret HTML files irrespective of whether it is running on a
machine using windows or Unix or Macintosh or any other
operating system or Hardware platform.
Author: Shailendra Kumar 1
HTML Basics
Tools required for Web Publishing
A web page can be very easily created using any simple text editor. In
Windows 95, one can use Notepad or WordPad. All HTML files are plain
ASCII text files with .htm or .html extension. Any program, which has the
capability to save files in ASCII format, can be used to create HTML files.
You also require a Web browser to view your files. Internet Explorer or
Netscape Navigator/Communicator can be used for this.
In Internet Explorer, the File| Open command should be used to open a file
on the local host or on the Internet as shown below.
Author: Shailendra Kumar 2
Terms to Know
There are a few common terms which I will use again and again. I
will just quickly define them here.
Content The actual part of a document-all the words, images, and
links which a user can read and interact with. I use this term a log
to mean “whatever you put in the document”.
Hyperlink A link from one document to another, or to any resource,
or within a document. For example, just above where it says
“Beginner’s Web Glossary” and that text is highlighter in some
fashion. The default is usually blue, underlined text, but your
display may vary.
In-line Almost always used in the context “in-line image”, this refers
to a resource of some type which is placed directly into a
document. As I say, this is nearly always an image, but the future
could see things like in-line animations.
URL The Uniform Resource Locator is a “standard” way of easily
expressing the location and data type of a resource. URLs in
general take the form “protocol”//address” where protocol is
something like gopher, FTP, telnet, and the address is merely the
server and pathname (if any) of a given resource of page. 3
Author: Shailendra Kumar
WWW World Wide Web is a vast collection of documents that re linked
together. A set of protocols define how the system works and
transfers data while a set of conventions and a body of software
makes it work smoothly. It uses hyper text and multimedia
techniques and supports many kinds of documents such as text,
formatted text, pictures, audio and video.
Web Page A Web page is a document on the Web. It can contain text,
pictures, audio video and small interactive programs (aplets).
Web Site A Web Site is a collection of Web pages maintained by a
company, university, government or an individual.
Web Server Since the Web is a client/server system, a computer
known as the Web server, hosts and contents, which can be viewed
by special graphical software available on the client system.
Author: Shailendra Kumar 4
Document Tags
The first HTML tags you are going to look at are the document tags.
These are the tags that are required for every HTML page you
create. They define the different parts of the document. An HTML
document has two distinct parts – a head and a body. You enter the
title of the page, and other commands in the head of the HTML
document.
To create the head portion of you HTML document and to give the
document a tile, enter the following text in your text editor:
<HEAD>
<TITLE>A Web Page</TITLE>
</HEAD>
Author: Shailendra Kumar 5
This tells a Web browser what information should be included in the
head portion of the document and what name should it call the
document in the title bar of the browser window.
The body is where you will do most of your work, you will enter text,
headlines, graphics etc. To add the body section, start after the
</HEAD> tag, and enter the following:
<BODY>
</BODY>
Container and Empty Tags:
The first thing you should notice about these HTML tags is that all tags
are enclosed in angle brackets ‘<‘ and ‘>’. This is how HTML
recognizes tags. If you do not use the brackets, then a Web browser
will assume your commands to be a text that you want displayed,
even if that text is the same as an HTML command.
Author: Shailendra Kumar 6
While a Web browser would consider the following to be a tag –
<HTML>
That same Web browser would interpret the following as text to be
displayed on-screen:
HTML
Tags are not case-sensitive and hence they need not be uppercase.
However, if you type them as uppercase it makes them stand out
from the rest of the text. Since tags are not considered text by the
browsers, they do not show up in the Web Page.
Author: Shailendra Kumar 7
Container Tags
Those tags which have the form <TAG> and </TAG> are called
container tags. They hold or contain, the text and other HTML
elements between the two tags. The <TITILE>, <HTML>, <HEAD>,
and <BODY> tags are all container tags.
The syntax for container tags is
<TAG>Text or other HTML elements go here</TAG>
Empty Tags
Some tags that do not require ‘</>’ tags are called empty tags. An
example of this is the <HR> or horizontal rule tag, <Area>,
<Frame>, <Img>. This tag draws a line across the width of your
document. Consider the following listing
Author: Shailendra Kumar 8
Example:
<HTML>
<HEAD>
<TITLE>Horizontal Line</TITLE>
</HEAD>
<BODY>
The following is a horizontal line:
<HR>
The rest of this is just more text
</BODY>
</HTML>
DOCUMENT STRUCTURE ELEMENT/TAG
There are 3 HTML elements that forms the basic document structure of a Web page:
1) HTML element
2) HEAD element
3) BODY element
Author: Shailendra Kumar 9
HTML element : the first document structure element in every HTML
doc. , is HTML tag . This tag indicates that the content of the file is
in html , this tag is mandatory and html is container element , hence
it has opening and closing tag.
Syntax:<HTML> and </HTML>
Example: <HTML>
<HEAD>……………
<TITLE>……………</TITLE></HEAD>
<BODY>
-------------------------
</BODY>
</HTML>
HEAD element : The HEAD tag is container tag hence it has opening
& closing tag.
Author: Shailendra Kumar 10
Entering Paragraph in Text on your Webpage:
All the text that you enter on a page should come between the <BODY>
and </BODY> tags. The body tags are container tags that tell a web
browser what parts of the HTML document should be displayed in
the browser window . The <p> tag is used to inform a web browser
what text in your document constitutes a paragraph
The paragraph tag uses the following format:
Example: <P>Here is the text for my paragraph . </P>
<P> Here’s the next paragraph</P>
HTML Tag vs. Element:
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.
Author: Shailendra Kumar 11
The <BR> Tag:
Line breaks are different than most of the tags we have seen so far. A line
break ends the line you are currently on and resumes on the next line.
Placing <BR /> within the code is the same as pressing the return key in a
word processor. Use the <BR/> tag within the <p> (paragraph) tag.
Example:<P>
DLF City<BR >
Box 61<BR>
GGN<BR> </P>
The Comment Tag: This is fairly unique, in that it is actually used to make the web browser
ignore any thing that the tag contains. That could be text , hypertext links, even small scripts
and programs.
For now, you will use comment tag to hide text . The point in hiding the text is that if allows you to
create a private message that is intended to remind you something or help those who view the
raw HTML document to understand what you are doing . That is why it is called the comment
tag. For instance:
SYNTAX:<!-- Opening Comment Tag
-- > Closing Comment Tag
Author: Shailendra Kumar 12
<!--- This is the comment that won’t display in a browser-->
The comment tag is not the most elegant one in HTML , but it works. Anything
you type between <! ---and --->should be ignored by the browser . Even
multiple lines are ignored . As with most tag comment tag ignores returns.
Note: Generally, you will used the comment tag for your own benefit, perhaps
to mark a point in a particular HTML document where you need to
remember that you are supposed to update some text , are perhaps, to
explain particularly confusing part of your page.
Working with HTML text: One of the ways in which you can differentiate
of text from rest of it is by using header tags <H1>-- </H1 >
…. <H6>---</H6> and rage from level 1-6. They allow you to create different
levels of emphasized headlines to help you organize your documents.
Example: <HTML><HEAD><TITLE>Heading Levels </TITLE></HEAD>
<BODY><H1>THIS IS LEVEL 1 HEADING </H1>
--------
----------
<H6>THIS IS LEVEL 6 HEADING </H6> </BODY></HTML>
Author: Shailendra Kumar 13
Emphasizing Text Implicitly and Explicitly: Explicit
tags (also often called physical tags) specifically tell the Web browser how
the designer wants Text to appear physically.
The most common ones are containers that mark text as bold, or underline.
Tags Meanings
<B>, </B> Bold text
<I>,</I> Italic text
<U>, </U> Underlined text
Example: <HTML>
<HEAD> <TITLE> More than one tag applied</TITLE> </HEAD>
<BODY BGCOLOR=“pink”>
<H1>
<B><I> Welcome to Internet </I></B>
</H1>
The above text is bold and italic.
</BODY>
Author: Shailendra Kumar </HTML> 14
Two physical tags can be applied together on the same portion of Text. Some
other physical tags are listed in the table below:
Tags Effect
<TT>, <TT> Display the Contents with mono-spaced typewriter font.
<STRIKE>,</STRIKE> Draws a horizontal line through the middle of the text.
<BIG>,</BIG> Uses a larger font size to display the text.
<SMALL>,</SMALL> Display the text in smaller font size
<SUB>,</SUB> Subscript text
<SUP>,</SUP> Superscript
Implicit tags allow the browser some freedom in displaying text. These are called logical
styles since the are relative to one another ,depending upon the browser.
Some basic Logical HTML Tags:
Tags Meaning Generally provide as
<EM>, </EM> Emphasis Italic text
<STRONG>,<STRONG> Strong emphasis Bold text
<TT>, </TT> Teletype Mono-spaced text
Author: Shailendra Kumar 15
Logical HTML tags are different from physical tags in mainly
two ways:
1.Any web browser that view them will always provide these logical tags Even
text based browsers, which are unable to show italic text , will display the
<EM> or <STRONG> tags by underlining, or highlighting the text.
2.Secaondly , these tags are generally not effective when used together.
Example: <HTML> <HEAD> <TITLE>
Working With Tags with Text styles </TITLE></HEAD>
<BODY BGCOLOR= “YELLOW”>
<P>This Text use a <B>Bold</B> word.<BR>
Here we are giving a <STRONG> strong emphasis </STRONG> on a few words. </P>
<p>This is how <B><I> bold and italics work together </I></B>Let us see what
happens with both <STRONG> <EM> Strong and emphasis </EM></STRONG>
</P>
<P> We can also provide <U>underlined text </U> in HTML.
This is <TT>Teletype text </TT> used generally to show the code of programs and
scripts on web documents. </P>
</BODY>
</HTML> Author: Shailendra Kumar 16
The <BLOCKQUOTE> Element:
Description:
The HTML <BLOCKQUOTE> tag is used for indicating long quotations (i.e.
quotations that span multiple lines). It should contain only block-level
elements within it, and not just plain text.
Example:
<html> <head> <title>HTML blockquote example Tag </title> </head>
<body> <blockquote> HTML “<b> Hyper Text Markup Language </b>”
</blockquote> <cite> Let us Know </cite> </body> </html>
“ When you want to quote along piece of work from another source in your document .
To indicate that this quotation is different from the rest of your tex,HTML provides
the <BLOCKQUOTE> element”.
<CITE>Tag:
The <cite> tag defines the title of a work (e.g. a book, a song, a movie, a TV show, a
painting, a sculpture, etc.).
Note: A person's name is not the title of a work.
Eg. <p><cite>The Scream</cite> by Edward Munch. Painted in 1893.</p>
17
Author: Shailendra Kumar
Pre-formatting Text:
<PRE> Tag: The <PRE> tag is the most common and useful pre-formatting tag .
Text in a<PRE> container tag is basically free from , with line feeds causing the line
to break at the beginning of the next line. Any of the physical or logical text
formatting tags can be used inside the <PRE>tag . A common use of the <PRE>
container is to display large blocks of computer code, which if reformatted by the
browser would be difficult to read.
However, text within the <PRE> container is displayed in a mono-spaced font in the
readers viewer. This tends to make preformatted text look out of place.
Example: <pre>
Text in a pre element
is displayed in a fixed-width
font, and it preserves
both spaces and
line breaks </pre>
“Text in a <pre> element is displayed in a fixed-width font (usually
Courier), and it preserves both spaces and line breaks.”
Author: Shailendra Kumar 18
The <DIV> Tag: If u want to define the alignment for an entire block of
page elements, the <DIV> ,</DIV> container (DIV stands for division) can
be used to enclose it. The align attribute is supported by <DIV> and so you
could use it to again a block of text and graphics to center , as in this
example :
<DIV ALIGN=CENTER >
<H1>This header is centered.</H1>
<IMG SRC= “abc.gif”> <BR>
So are the images above and this line of text.<BR>
<P ALIGN=RIGHT> But this Text is write aligned. </P>
</DIV>
The <FONT> Tag: The <FONT> tag is used for providing control over the
appearance of text . The font element is a container that is open with the
<FONT > start tag and closed with the </FONT> end tag, using the FACE,
SIZE and color attributes in the <FONT> element , you can modify the
appearance of text in your documents.
Author: Shailendra Kumar 19
Example:<HTML>
<HEAD> <TITLE>EXAMPLE OF FONT TAG </TITLE><HEAD>
<BODY>
<FONT FACE=“TIMES NEW ROMAN”>
THIS IS AN EXAMPLE OF FONT SELECTION. </FONT>
</BODY> </HTML>
Example of font face selection can use a list of acceptable choice.
in example Verdana is listed as the frist choice, and Arial and Helvetica as
alternatives.
<HTML>
<HEAD> <TITLE>FONT SELECTION EXAMPLE </TITLE><HEAD>
<BODY>
<FONT FACE=“VERDANA”, “ARIAL” “HELVETICA”>
THIS IS AN EXAMPLE OF FONT ALTERNATIVES.
</FONT> </BODY> </HTML>
Author: Shailendra Kumar 20
What is Multimedia?
Multimedia comes in many different formats. It can be almost
anything you can hear or see.
Examples: Images, music, sound, videos, records, films,
animations, and more.
Web pages often contain multimedia elements of different types
and formats.
In this chapter you will learn about the different multimedia
formats.
Multimedia Formats:
Multimedia elements (like audio or video) are stored in media files.
The most common way to discover the type of a file, is to look at
the file extension.
Multimedia files have formats and different extensions like: .swf,
.wav, .mp3, .mp4, .mpg, .wmv, and .avi.
New Format:
Author: Shailendra Kumar 21
Format File Description
MPEG
.mpg .mpeg
MPEG. Developed by the Moving Pictures Expert
Group. The first popular video format on the web.
Used to be supported by all browsers, but it is not
supported in HTML5 (See MP4).
AVI .avi
AVI (Audio Video Interleave). Developed by
Microsoft. Commonly used in video cameras and TV
hardware. Plays well on Windows computers, but not
in web browsers.
Author: Shailendra Kumar 22
WMV .wmv
WMV (Windows Media Video). Developed by
Microsoft. Commonly used in video cameras and TV
hardware. Plays well on Windows computers, but not
in web browsers.
QuickTime
.mov
QuickTime. Developed by Apple. Commonly used in
video cameras and TV hardware. Plays well on Apple
computers, but not in web browsers. (See MP4)
Author: Shailendra Kumar 23
RealVideo
.rm
.ram
RealVideo. Developed by Real Media to allow
video streaming with low bandwidths. It is still
used for online video and Internet TV, but does not
play in web browsers.
Flash
.swf
.flv
Flash. Developed by Macromedia. Often requires
an extra component (plug-in) to play in web
browsers.
Author: Shailendra Kumar 24
Ogg.ogg
Theora Ogg. Developed by the Xiph.Org Foundation.
Supported by HTML5.
WebM .webm
WebM. Developed by the web giants, Mozilla, Opera,
Adobe, and Google. Supported by HTML5.
MPEG-4 or MP4 .mp4
MP4. Developed by the Moving Pictures Expert Group.
Based on QuickTime. Commonly used in newer video
cameras and TV hardware. Supported by all HTML5
browsers. Recommended by YouTube also.
Notes: Only MP4, WebM, and Ogg video are supported
by the HTML5 standard.
Author: Shailendra Kumar 25
Audio format:
MP3 is the newest format for compressed recorded music.
The term MP3 has become synonymous with digital
music.
If your website is about recorded music, MP3 is the
choice.
Format File Description
MIDI.mid
.midiMIDI (Musical Instrument Digital Interface). Main
format for all electronic music devices like synthesizers
and PC sound cards. MIDI files do not contain sound, but
digital notes that can be played by electronics. Plays well
on all computers and music hardware, but not in web
browsers.
Author: Shailendra Kumar 26
RealAudio.rm
.ramRealAudio. Developed by Real Media to allow
streaming of audio with low bandwidths. Does not play
in web browsers.
WMA.wmaWMA (Windows Media Audio). Developed by
Microsoft. Commonly used in music players. Plays well
on Windows computers, but not in web browsers.
AAC.aacAAC (Advanced Audio Coding). Developed by
Apple as the default format for iTunes. Plays well on
Apple computers, but not in web browsers.
WAV.wavWAV. Developed by IBM and Microsoft. Plays
well on Windows, Macintosh, and Linux operating
systems. Supported by
Author: Shailendra Kumar 27
Ogg.ogg Ogg. Developed by the Xiph.Org Foundation.
SupportedHTML5.
MP3.mp3MP3 files are actually the sound part of MPEG
files. MP3 is the most popular format for music players.
Combines good compression (small files) with high
quality. Supported by all browsers .
MP4.mp4MP4 is a video format, but can also be used for
audio. MP4 video is the upcoming video format on the
internet. This leads to automatic support for MP4 audio
by all browsers.
Note:Only MP3, WAV, and Ogg audio are supported by
the HTML5 standard.
Author: Shailendra Kumar 28
The HTML <video> Element
To show a video in HTML, use the <video> element:
Example:
<video width="320" height="240" controls>
<source src=“file.mp4" type="video/mp4">
<source src=“file.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
How it Works
The controls attribute adds video controls, like play, pause, and volume.
It is a good idea to always include width and height attributes. If height and width are
not set, the page might flicker while the video loads.
The <source> element allows you to specify alternative video files which the browser
may choose from. The browser will use the first recognized format.
The text between the <video> and </video> tags will only be displayed in browsers
that do not support the <video> element.
Author: Shailendra Kumar 29
HTML <video> Autoplay
To start a video automatically use the autoplay attribute:
Example:
<video width="320" height="240" autoplay>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
Lists
Unordered list: an unordered list start with tag <UL> & ends with </UL>
each list item starts with tag <LI> & is to be closed </LI>
Type= fill round
It will give a solid round black bullet.
Type= square
It will give a solid square black bullet.
Example:
<UL type= fillround> <LI> mouse </LI> <LI> floppies </LI> </UL>
Author: Shailendra Kumar 30
Ordered list: an ordered list starts with tag <OL> & ends with
</OL>, each list item starts with tag <LI> & is to be closed
</LI>.
Type = 1
It will give counting numbers. Type = A
It will give uppercase letters. Type = a
It will give lowercase letters. Type = I
It will give uppercase roman number. Type = i
It will give lowercase roman number.
Start: alters the numbering sequence , it can be any numeric
value.
Value: changes the numeric sequence in the middle of an OL.
It is to be specified with <LI> tag.
Author: Shailendra Kumar 31
Example: <OL type= “I” start= III>
<LI> floppies </LI> </OL>
Definition lists: starts with <DL> tag & ends with </DL>, it
consists of two parts. Def. term and def. description.
Example: <DL> <DT> keyboard </DT>
<DD> input device </DD> </DL>
Nested ordered list: we can also combine or nested lists one
inside the others.
Directory list: the directory lists are depreciated. It was
designed to be used for creating multicolumn directory list. It
has the same structure as unordered lists. A directory list
begins with <DIR> element immediately followed by the <LI>
element & list item to be displayed.
<DIR> <LI>--------</LI> </DIR>
Author: Shailendra Kumar 32
