qual
HTML
Introduction to HTML
Why HTML ? Its advantages and disadvantages.
Study of Tags -
E>,
, ,
, <BODY>, <P>, <HR>, <UL>, <LI>, <PR
<MARQUEE>
Font styles -
<B>, <I>, <U>, <BIG>, <SMALL>, <SUB>, <SUP>, <FONT>
+ Images -
HREF, HR, IMG, SRC, ALT, HEIGHT, WIDTH, ALIGN.
+ Tables -
<TABLE>, <CAPTION>, <TR>, <TH>, <TD>
Use of scripting as a language support.
(Note - Only VB seri
pt using for .NEXT, IF. THEN .. ELSE, Msg b.
Inbox, DIM, SET. 8B Dox, ao
anguage- 7
axt Markup eee d up with extra featy,,, A
a . perte Wat has bee? other documents. ,
ordinary text IN" aks to
Hypertext is or nd Hi
adding extra sym),
Conuaneanaeon ae one oe Bach of the symbois 6,
Markup isthe proces re ye OF Pmsprowser how to display fq," ‘i
editor's proof reading Sy 1 nat tells the mputer programming ja,"
markup in HTML isa command that 9 sd tales for come
eee Se ITM has its own Se anguages. They are cong
like BASIC, C and Pasea ae ep compute!
ae Ce,
ves are special type of to their functions. They indica,
Markup languages a 3 to ich is author name ang”
ents ing, whi
ith only parts of documents according 1
part of document is ftle, which is sub age, but it is a markup language,
HIME isnot relly programming languaB®,
ML is not really «
ters that exchange informs,
with each other. The world wide web (ww ists of several web pages. HT\;
information, art and commerce a lee Ron it can be published on inte
. Once
Bblaneae ee web page to a server so that people all over the y
will be able to read it. There is a huge variety of web pages, for example, we h
Personal home pages, business home pages, directories (list of web Pages), se
engines and artistic projects. Once the web Page is published, it can be acces
internet tools called web browsers. Intern
are web browsers. HTML can be used to buil
language for classifying the functions of di
different parts of your page. You can indicat
SEC
et Explorer (IE) or Netscape Navig
Id any type of web pages. It isa univ.
fferent sections of a document. It dei
fe which part is title, which part is add
ich part should inclu
so that a browse,
Played on many diffe
on different ha:
Work not only
de an image an
T can display it corr
Tent kinds of platfo
tdware having ditt
on simple PCs but als
That is, the document i
CPerating systems. HTML is desi
‘signed to
Braphical work stations, dumb i
and much mor: “erminals,
* . Network computers, hand - held de’
ITML document cal
fax machine, TY set, ame oy Be put on comput fi
Even on phone ou 82 consoles digital w, sn acteen but also on E
You can hear a web pa atches and text to speech mac
Advantages of HTML ee _
The:
Te are several advant,
For creating HTM docu ME
lo
software is requirag ~ Ment, wi.
1 a7
Computer Science-XI
TML document can be created on any hardware platform using any text editor
fou can work on your website even when you are away from your usual
‘computer
fou will have a much better concept of the structure of your page and
inderstanding of why it works,
something is not working, then finding error is easy in HTML
'TML will not cost you anything for its use. There are no expensive licenses to
uy OF No Upgrades to purchase
fou can work independently and you need nol rely on vendor or program. You
eed not worry about your editing programs,
earning HTML is simpler than learning any Programming Language.
dvantages of HTML
t from several advantages, HTML has certain limitations.
TML is not a programming language in the true sense.
ny simple calculation cannot be done in HTML.
{t cannot be used to display even date.
he interactive web pages cannot be built by HTML.
he web pages developed in HTML cannot behave like an application.
he web pages developed in HTML do not have their own interface.
hyper link is provided in HTML. But for that we need a trip to server at each step.
Study of tags
A tag is a unit of markup. It is a set of symbols defined in HTML to have special
‘ing. Tags start with a less-than sign (<) followed by a keyword, and conclude
greater - than sign (>).
hese symbols are known as angle brackets,
For example, _the tags are :
<HTML>
<TITLE>
</B>
Every tag in HTML has a meaning and it is usually straightforward. For example,
is a tag that means to switch on bold.
There are two types of tags:
i) Start tags.
ii) End tags.
Start tags are used to begin an effect, and end tags are used to end that effect.
tags always repeat the keyword with a forward slash in front.
For example, text to be displayed in bold is enclosed between <B> start tag and
</B> end tag.
<B> Hello </B>
Here Hello word will be displayed in bold, ience ee ae
bebileesIN ecccc is oe
.
ak
for,
ceXM her, 90 if <B> is for bold and
Ta8S can be nested within each other, $0 if <B> i
‘hen you can combine thane
<B> <I> Hello </I> </B> ic. Observe that it
The word Hello will appear in both bold nae :
“nd tags are contained completely within the
Tag attributes :
: 's behaviour,
Many start tags can take attributes that pant te An att,
isa keyword seperated by a space within angle shaded horizon
For example, <HR NO SHADE> This means for an a equ al rug
Some attributes require a value, preceded ed aan “en, 5,
“HR WIDTH = 200">, This means a horizontal rule tha d ide,
In browser, the tags themselves are not nares but their effect is displ,
‘Any tags and attributes that are unknown are ignored.
lic ste,
The essentials of a web page
Every web page consists of a few tags that define the page as a Whole,
example, a simple web page can be shown as :
<HTML>
<HEAD>
TITLE > A Hello World Example < /TITLE >
< /HEAD >
<BODY>
Hello, world)
< /BODY >
< /RTML >
The above HTML code can be typed in by using text editor. The browser (ntem
Explorer or Netscape Navigator)
will display Hello, world ! on screen, The dhe
srample consists of eight basic structure fags : <HTML>, <HEAD>, <TITLB,<
RITLE>, < HEAD >, <BODY>, < /BODy
>, and < /HTML >. Basic structure tags are
building blocks, Now we will understand them in detail,
<HTML> tag
can be viewed in a web browser. The closing tag <
document is started with <HTML> tag.
<HEAD> tag
<HEAD> tag define,
Page itself in the brows
</HEAD > ends the he:
<TITLE > tag
s the header ar
er. In the <HEA|
ad section
a Of page, which
is not displayed within
D> section
We have <TITLE> tag, The end #
The text between this {28 and end tag < 7 ; |
" + 6 T is ie
is displayed in the title bar of browser The tite open deca « |
at
as pre Computer Sctence-Xa! [705
frequently used by web indexing and searching, programs to name your web page.
There should not be extra spaces between title tag and text of title.
<BODY > tag
The actual contents of the web page that will be displayed on browser will
in body section of docu:
ment. Th tion starts with <BODY> tag and
with < /BODY >, ent. The body sectior
There are several optional attributes for this tag. For example, we can set back
ground images, change the font of text by using attributes.
Figure (4.1) shows basic structure of an HTML document.
ape
<HTML>
<HEAD>
<TITLE>
Title of your document
Actual document
Fig. 4.1 : Basic structure of an HTML document.
Adding structure to page
In HTML, there are block — level tags available which can be used for assigning
structure to a web page. Block level tags are used to define groups of text for a specific
role, such as heading, an author's address, paragraph, or a table. We will discuss
some of them in detail.
Paragraph :
tag,
‘A paragraph can be created by enclosing text within paragraph codes
and
. Remember that browser will ignore any “paragraphs” you created by pressing
Enter while working on HTML code in a text editor. You must specifically define a
paragraph in the code by using a paragraph tag.
For example,
This is first paragraph; its code
continues over several lines, but will be
displayed as a single paragraph in a
browser.
And this is second paragraph
that will also be displayed as such in
a browser. < /P > eee =H
a is Sa. pe eae aT your browser Noe
in BN Of each tine Is determined hy width of the browser's window, The bro hi
Will insert some &xtta space between paragraphs. In some instances we dg 7
UXT spaces, then © can use ine ~ break tag,
. It tells the browser ty y)" "ay,
text th,
F
At Follows onte y extra space between Ph
@ new line without inserting a re
Prakash Khanale Basmath Road
Parbhani 431401
“ample, name and address are broken into several lines ang mah,
displayed as :
OF example,
In above
Will be
Prakash Khanale
Bank colony
Basmath Road
Parbhani 431401
A line break is like {ypewriter’s carriage return ~ it takes you back to the le
margin.
The tag has one optional attribute called align. It allows you to SPECIfY Whey
the text appears on screen.
Left alignment like normal text. ;
Text is aligned to right margin, but no justified to left
Text is centered.
Dividing sections :
tag
‘A web page can be divided into separate sections by using horizontal tule, tag takes several optional attributes, For example, you can specify
line's thickness and how much of the browser's window it should span (as 2
percentage), such as :
...,
adings. They are ,
@ maximum of six levels of he:
i er, bolder font than
rhe first level heading is displayed in larg
alow level heading. A sample of six headings is shown below.
Heading 1 Heading 2
Heading 3 Heading 4
Heading 5 Heading 6
HTML headings can be used in any order. Normally the first level heading is
used at highest level and sixth level at the lowest level.
When you are structuring a page with headings, the first heading you use should
generally by the highest level that will occur on page. It must not be , but
instead you may start with because you want heading that appears in smaller
font. In this case will be the primary level.
Forexample, _ This is two line
first level heading < /H1 >
and are used for fine print text and legal notices. The heading start
tags can use one of the following attributes :
ALIGN= “LEFT” = ALIGN= “RIGHT” ALIGN = “CENTER”
ALIGN = “JUSTIFY”
These attributes control the horizontal alignment of the heading.
For example, My Heading < /H1 > would create
centered, first-level heading with the words “My Heading”.
Justify alignment makes text appear with smooth margins on both left and
right sides.
Formatting Text
Addition of bold face, italics and underlining to the text gives additional emphasis
to words and phrases in the text. It is important in passing message to the audience.
HTML consists of different tags for formatting text, , , , ,
ete.
tag
is bold tag. It boldfaces text appearing between and < /B >.
For example, This is bold text < /B >
tag
is italic tag. It italicizes the text appearing between and
For example, This is Italic < /1 >
tag
is underline tag, It underlines text appearing between and cience-XM ity
For exam i
ample, underline |
You should gene slining text because thal 18 ROW bro,
a generally avoid unde
Indicate hypertext links in web pages.
PRES tag,
dis; is preformat the text. The text ape
displayed in monospace form. Using this tag We ©"
used for columnar lists
For example, Name Marks Percentage
Sey,
aring between and < ppp
position the characters
splayed as: Name
Dogs Ran away
Display is: Dogs Ran away
tag :
This tag displays web page's information such as page URL (uniform resou,,
locator), author name, date of last revision, and s0 on, In italics in your browser.
text in address tag is recognised by search engines as Your address information,
URL is address for a web page. It is unique for each page-
For example, _http : // www. dnyanopasak. com/
Here http (hyper text transfer protocol) is web protocol, www. dnyanopass,
com is domain name. Domain name is internet name of computer that is serving thy
information. This is URL of Dnyanopasak college, when we type this URL in ws
server, we can see the home page of Dnyanopasak college.
The address tag can be used as shown below.
For example, P B Khanale email : prakash-khanale@hotmail cn
tag
is emphasis tag. The text appearing between and < /EM > will
displayed in italics. This tag is used to emphasize the text. Emphasis has meaning
compared to italic tag , which is meaningless. Text to speech browsers give spokes
emphasis to text within an emphasis element.
For example, you must handover the money to him
tag
This is strong tag. The text appearing between and < /STRONG”
will be displayed in bold. This tag is used to create a strong emphasis. Text to spe"
reader gives strident pronunciation to strong text. .
For example, _ I swear, if they don’t give me that raise , I quit, < /P >.
tag
is lists tag. There are three main types of lists : unordered lists, ore"
lists and definition lists. Ordered lists are numbered in some fashion, while unorde™
lists are bulleted. Definition lists consist ofa term followed by its ‘definition
ee s—COS — ot
ience-XII
.s the use of
Me ________
poth ordered and unordered
pei clement © indicate where cack en a ee tag
| COL > (©) or a square (q). The tags for unordered lists are
For example,
a closed
Shopping Li
List <
SBopy. Ping List < TITLE >
<UL>
<LI> Eggs
<L> Milk
<LI> Apples
</UL>
| The list will be displayed as :
+ Eggs.
* Milk
+ Apples
Observe that the list-item element uses <LI> tag and actual content of list.
Both <UL> and <LI> have same set of attributes :
| TYPE = “CIRCLE”
TYPE = “DISC”
TYPE = “SQUARE”
‘The CIRCLE attribute values is used for a hollow bullets (0), the DISC type
creates a solid bullet (@) and SQUARE value renders a solid block (™). The default
- appearance for a list is with disc.
The < /UL > tag is always required at the end of unordered lists. You can also
~ use </LI> at end of each list item.
For example, <UL TYPE = “SQUARE”>
<LI> Hammer
<LI> Screwdriver
<LI TYPE = “CIRCLE”> Screws
</UL>
It will be displayed as :
=) Hammer
= Screwdriver
© Screws
One important aspect of lists is that you can nest one list inside another to
create a sublist, The default operating of sub-list will vary from main list.
For example, <UL>
<LP> Body
<UL>
<LI> Head <L> Hand
<UL>
<LP> Finger
<LI> Thumb
</UL>
</UL>
The display will be
@ Body
© Head
© Hand
@ Finger
@ Thumb
Creating Ordered Lists
Ondevea lists can be preceded by Arabic numerals, i edatauiens oe a
Roman numerals, or uppercase or lowercase alphanumeric ¢ TONERS fo,
an ordered lists are <OL> and < /OL >.
For example,
<OL>
<LP Milk
<LI> Bread
<LD Cheese
</OL>
The list will appear as :
1. Milk
2. Bread
3. Cheese.
Here are the attributes that you can use with ordered lists :
TYPE = “I” (Arabic numbers) |
TYPE = “a” (lowercase alphanumeric) |
TYPE = “A” (uppercase alphanumeric) |
TYPE = "(lower case Roman numbers)
TYPE = “I” (upper case Roman numbers)
START = "x"
The START attribute allows you to establish the beginning of lists number seque™™
For example, <OL START = “5”
> would start your ordered list’s number
with the number five. When we are using ordered lists, the <LI> tag can use :
VALUE attribute to make a particular list item have a certain number.
For example, <LI VALUE = “10” 5 chocolate
It will be displayed as: 10. chocolate
You can make list of paragraphs, list of links and
of images also ad
HTML - Computer Science-xit [135]
Definition lists
‘The definition list element uses <DL> start tag. and < /DL > end tag to create a
This list is rendered without bullets. <DT> tag is used for definition
or litle of the item you are defining. The <DD> tag, is used for the
definition Ii
terms ic. name
definition itself.
For example, <DL>
<DT> TermA
<DD> Definition of term A
<DT> Term B
<DD> Definition of Term B
</DL>
This will be displayed as :
Term A
Definition of term A
Term B
Definition of term B
<A> tag
<A> is another tag. It is used to create links (or hyperlinks). Links points to
different files on the web. The text or image enclosed within <A> and </A > tag is a
link, This link is clickable in a graphical browser. With most browsers, text within
the anchor tags is displayed in a different colour, and underlined.
For example, <A HREf = “http : // www. dnyanopasak. com/">
HOME page of dnyanopasak < /A >
<SUB> tag
<SUB> is subscript tag. The text enclosed in <SUB> and < /SUB > is displayed
in subscript form. It is bit lower than text. This is useful for mathematical formulae.
For example, H <SUB> 2 </ SUB > O.
The display will be: H
<SUP> tag
<SUP> is superscript tag. The text enclosed in <SUP> and < /SUP > is displayed
in superscript form. This element is also useful for mathematical formulae. :
For example, E = MC <SUP>2 < /SUP >
Which is displayed as: E = MC?.
It can be used for trademark symbol.
Use HCL <SUP> TM < /SUP > computers.
It will be displayed as : Use HCL™ computers.
<FONT> tag
: This is font tag. It is used to format the size, typeface, and colour of the enclosed
text.
Ee The <FONT> tag can be used with three different attributes : SIZE, FACE, and
LOR. and \
oS 0" Se
‘
156] Computer Science-\11 ae 1 Xt
er > or relative values rangi,
The SIZE attribute can be specified in absolute or rel TANBing ¢ \
~
1 £0 7. Using a relative font size ie. by putting 4 Pius of BENS Sen before |
number will change the font size relative to the default font siz ,
For example, <FONT SIZE =" +4" >
makes the font size four steps bigger than the default
font sizes are shown compared to default font size
size. The seven diffe,
i
This is Size text (Compared to Normal Text)
Size 2 text (Compared to Normal Text) ay
is Size 3 text (Compared to Normal Tex
This is Size 4 text (Compared to Normal Text)
This is Size 5 text (Compared to Normal Text)
This is Size 6 text (Compared to Normal Text)
This is Size 7 text (compared to Normal Text)
Ln
‘The COLOR attribute is specified with an RGB value, or you can also speci,
colour name.
The FACE attribute specifies a typeface that you would like to use for the tey
enclosed by the font element. You can use single typeface, such as Arial or courier
a list of typefaces separated by commas. The available type face will be used
display text.
For example, <FONT FACE = “arial, helvetica” > This text will appear as ail
or helvetica, depending upon which font is available < /FONT)
If font face is not available, the default face will appear.
<BIG> tag
<BIG> is big tag. The text enclosed in <BIG> and < /BIG > is displayed in large
font. <BIG> tag has the same effect as <FONT SIZE = "+ 1” >
For example, <BIG> The Big company < /BIG >
If already size is largest, tag is ignored.
<SMALL> tag
This is small tag, The text enclosed in <SMALL> AND < /SMALL >is dis
in smaller font. If size is smallest then tag is ignore
<SMALL> tag has same effect as <FONT SIZE
For example, <SMALL> The
<STRIKE> tag
This is strike tag, The text enclosed in <STRIKE> }
would have a line drawn through the middle of text STKE (or <S> and
For example, <STRIKE> This is hopeless sit,
The display will be : Nation </STRIKE >
Now with the knowledg
eof these tags, let's write some simple code in HT™!
‘-1">
small company < /SMALL > HTML
{MARQUEF> tag
This is a marquee tag. The text enclosed in <MARQUEE> and </MARQUEE>
would be rolled over horizontal line on the web page. This is used to roll the current
news oF position of different companies in stock market
For example, <MARQUEE> STOCK MARKET COLLAPSES «MARQUEE
The display will be continuous rolling, of words STOCK MARKET COLLAPSES:
problem 4.1
Create a web page to display your personal information, such as Name,
phone number and date of birth,
HTML code
<HTML>
<HEAD>
<TITLE> Problem 4.1
PERSONAL INFORMATICN
My Name is, PRAKASH KHANALE
My Address is ,
Bank colony
Basmath Road
Parbhani
pin : 421401
Telephone : 24240
Date of Birth : 08 - 08 - 64
SEE you again
visit to dnyanopasak
