SGML

The Standard Generalized Markup Language (SGML) is an ISO standard technology for defining generalized markup languages for documents SGML is an International Standards Organization (ISO) standard developed in !"# SGML descended from I$M%s Generalized Markup Language (GML) &hich &as developed in the !#'s SGML &as e(tended in !!" to support )ML and *** re+uirements

The HTML
,yperte(t Markup Language (,TML) is the main markup language for creating &e- pages and other information that can -e displayed in a &e- -ro&ser The ,TML Tags &as first pu-lished -y physicist Tim $erners.Lee in !! ,TML /0' &as pu-lished in 1ovem-er !!2 follo&ed -y ,TML 30/ in 4an !!5 and 30' did not came out due to lack of -ro&ser support In 6ecem-er !!5 the ,TML 70' came out as a *38 recommendation ,TML 20' is out in /''"

The Web Browsers

The first &e- -ro&ser &as invented in !!' -y Sir Tim $erners.Lee called *orld*ide*e- and &as later renamed 1e(us In !!3 the -ro&ser soft&are &as further developed -y Marc 9ndreessen &ith the release of Mosaic later named as 1etscape that sparked the internet -oom of the !!'s Mosaic developed in !!3 is the first graphical &e- -ro&sers and &as renamed 1etscape 1avigator in !!7 Microsoft responded &ith its Internet :(plorer in !!2 -undled &ith *indo&s OS initiating the industry%s first -ro&ser &ar

The Web Browsers

The competition -et&een 1etscape and Microsoft led to incompati-le versions of ,TML The different versions and releases made it a serious challenge to *e- 8ontent providers to design ,TML documents that can -e vie&ed -y different -ro&sers In !!7 $erners.Lee started the *orld *ide *e- 8onsortium (*38) at MIT The purpose of *38 is to develop and distri-ute standards for *eTechnologies

HTML Introduction
In ,TML te(t is marked up &ith elements sketched -y tags

Tags are key&ords contained in pairs of angle -rackets 9 ,TML document -egins &ith a start tag of ;,TML< and terminates &ith an end tag of ;=,TML< ,TML tags are not case sensitive ,TML files should have a 0html file name e(tension

A Simple HTML Page

;,TML< ;> . . This is a simple ,TML page . . < ;,:96< ;TITL:< The 8omputer Science and :ngineering 6epartment;=TITL:< ;=,:96< ;$O6?< ;@< *elcome to the ,ome @age of the 8omputer Science and :ngineering 6epartment;=@< ;=$O6?< ;=,TML<

XHTML
),TML is :(tensi-le ,yperte(t Markup Language

),TMLis an e(tension of ,TML that incorporates the synta( of )ML ),TML documents are &ell.formed so that they can -e parsed using standard )ML parsers ),TML 0' -ecame a *orld *ide *e- 8onsortium (*38) recommendation on 4anuary /#A /''' ),TML 0 -ecame a *38 Becommendation on May 3 A /'' ),TML2 is undergoing development

HTML versus XHTML

HTML Is much easier to write Has "ew S#ntactic rules High degree o" "reedom Poorl# Structured &ocuments s#ntactic correctness is not chec'ed Is about displa#ing in"ormation Was design to displa# data and "ocus how datas loo' li'e (lements ma# not be properl# nested XHTML e!uires a level o" discipline Has strict S#ntactic rules $ualit# and %onsistenc# is high %onsistent and good structure &ocuments s#ntactic correctness can be chec'ed using parser Is about describing the in"ormation Was design to describe data and to "ocus what data is (lements must be properl# nested

Basic S#nta) o" XHTML

The fundamental syntactic unit of ),TML is called tag

The synta( of tag is the tagCs name surrounded -y angle -rackets (;<)

Tag names must -e &ritten in all lo&ercase letters Tags mostly appear in pairsA an opening tag and a closing tag The name of the closing tag is the name of its corresponding opening

tag &ith a slash attached to the -eginning eg0 ;p< ;=p< The data that appears -et&een the opening tag and closing tag is the

Basic S#nta) o" XHTML

eg0 ;p< This is a simple paragraph;=p<

The paragraph tag ;p< marks the -eginning of the content and the ;=p< tag marks the end of the content of the paragraph element 9ttri-utes &hich are used to specify the properties of a tag can appear -et&een an opening tagCs name and its right pointed -racket The attri-utes name appear after the tag name &hich is follo&ed -y an

e+uals sign follo&ed -y attri-utes value

%omments
8omments increase the reada-ility of programs

;>.. This is a comment ..< $ro&sers ignore ),TML comments 8omments can -e spread over as many lines as re+uired 8omments are used to make the source code easier to understand ;>.. This is a comment &hich spreads on multiple lines ..<

Standard XHTML &ocument Structure

;F(ml version D E 0'E encoding D Eutf."EF< ;>6O8T?@: html @G$LI8 E.==*38==6T6 ),TML 0 ==:1E HhttpI==&&&0&30org=TB=(html =6T6=(html 0dtdJ<

;html (mlnsDHhttpI==&&&0&30org= !!!=(htmlJ< ;head< ;title<Title of document;=title< ;=head< ;-ody< 000000 ;=-ody< ;=html<

Standard XHTML &ocument Structure

The ),TML document -egin &ith a (ml declaration &hich states that

the document is -ased on (ml version It also specifies that the encoding in the document is done using utf." utf." is the maKor character encoding for the *orld *ide *e The ;>6O8T?@:< declaration is not an ),TML tag -ut it is an instruction to the &e- -ro&ser a-out &hat version of ),TML the page is &ritten in In ),TML the ;>6O8T?@:< declaration refers to a 6T6 -ecause ),TML is -ased on SGML

Standard XHTML &ocument Structure

The 6T6 specifies the rules for the markup language so that the -ro&sers render the content correctly The ;>6O8T?@:< declaration should -e present in a ),TML documents so that the -ro&ser kno&s &hat type of data to e(pect The ;>6O8T?@:< tag does not have an end tag The GBL of the 6T6 is http==&&&0&30org=tr=(html =dtd=(html 0dtd

Standard XHTML &ocument Structure

The html element includes an attri-ute (mlns that specifies the

),TML namespace )ML namespaces are a &ay to avoid conflicts -et&een element names &hen t&o or more different specifications are in use 9 namespace uni+uely identifies a set of names so that there is no am-iguity &hen o-Kects having different origins -ut the same names are mi(ed together The namespace ;html (mlnsDhttpI==&&&0&30org= !!!=(html<

Standard XHTML &ocument Structure

The ;html< tag identifies the root element of the document

The ;head< tag provides information a-out the document The ;title< tag specifies the contents in the title -ar of the -ro&ser The ;-ody< tag provides the content of the document The opening tags ;html<A ;head<A ;title< and ;-ody< have the corresponding closing tags ;=html<A ;=head<A ;=title< and ;=-ody< respectivley

Basic Te)t Mar'up * Paragraphs

Te(t is normally organized into paragraphs in the -ody of a document

;p< is the paragraph tag used to represent paragraphs The starting tag ;p< &ill -e present at the starting of a paragraph and the ending tag ;=p< &ill -e present at the ending of a paragraph T&o paragraphs can -e separated using a pair of ;p< and ;=p< tags The ;-r=< tag can -e used to -reak a line The -reak tag has no content and therefore has no closing tag The slash indicates that the tag is -oth an opening and closing tag

Preserving Whitespace
In certain cases it is re+uired to preserve the &hitespaces in te(t

To prevent the -ro&ser from eliminating multiple spaces the ;pre< tag can -e used The ;pre< tag ignores the em-edded line -reaks The ;pre< tag defines preformatted te(t The preformatted tag helps to get the te(t to -e displayed as the user likes it to -e The information -et&een the ;pre< and ;=pre< &ill -e preserved as

Headings
In ),TML there are si( levels of headings specified -y the tags ;h <A

;h/<A ;h3<A ;h7<A ;h2< and ;h#< ;h < specifies the highest level heading ,eadings are displayed in -oldface font depending on the num-er in the heading tag In -ro&sers ;h <A;h/< and ;h3< use font sizes that are larger than the default size of te(t and ;h7< uses the default size ;h2< and ;h#< uses small font size ,eading tag -reaks the current line so content appears on a ne& line

Bloc' $uotations
$lock Lutations are used &hen a -lock of te(t to -e set off from the

normal flo& of te(t in a document The ;-lock+uote< tag &ill indent the right and left margins -oth &hen displayed in a -ro&ser The content of the ;-lock+uote< is made to look different from the surrounding te(t

+ont St#les and %haracter (ntities

The emphasis tag ;em< gives emphasis to the element and displays

the content in italics The strong tag ;strong< displays the content in -old letters Su-script characters can -e specified -y the ;su-< tag Superscript characters can -e specified -y the ;sup< tag ),TML has certain special characters that cannot -e typed as such eg ;A <A M and characters that do not appear on key-oard like degrees These special characters are called entities The follo&ing ta-le sho&s the commonly used entities

%ommonl# used entities

%haracter , . / 1 2 (ntit# ,amp,lt,gt,!uot,aposMeaning Ampersand Less than 0reater than &ouble !uote Single !uote 3apostrophe 4 8ne !uarter 8ne hal" Three !uarters

567 569 :67

,"rac57,"rac59,"rac:7-

Hori;ontal

ules and meta (lement

To dra& a horizontal line in the screen the horizontal rules tag is used

The horizontal rules tag ;hr=< has no content so no closing tag The meta element helps the *e- search engines to categorize *edocuments in their indices If the author of a document seeks &idespread e(posure for his document then one or more meta elements are included to ensure that it &ill -e found -y at least some *e- searches The meta element has t&o attri-utesA the name attri-ute and the content attri-ute

The meta (lement

The name attri-ute specifies the name and the content attri-ute

specifies the information The commonly used name attri-ute is key&ords The value of the content attri-ute gives the key&ords associated &ith the characteristics of the given document eg 0 ;meta name D Hkey&ordsJ content D H-inary treesA linked listsA stacksJ=< eg /0 ;meta nameDEkey&ordsE contentDH(htmlA cssA (mlA phpA perlH=<

Images
To display an image the image tag ;img=< is used in ),TML

The image tag includes t&o attri-utes src and alt The src specifies the file containing the image The alt specifies the te(t that should -e displayed &hen it is not possi-le to display the image eg0 Internet connection is slo& T&o optional attri-utes of imgA &idth and height can -e included to specify the size of the image eg0 ;img srcDEimages=ritchie0KpgE &idthDE ''E heightDE 2'E altDE@hoto of 6ennis M BitchieE =<

H#perte)t Lin's
The ,yperte(t link acts as a pointer to some resource

Links are used to connect -et&een logically related documents The Link specifies the address of the other document Links are specified in an attri-ute of an anchor tag (;a<) The anchor tag that specifies a link is called the source of the link The document &hose address is specified in a link is called the target of the link The anchor tag has an attri-ute called hyperte(t reference (href) &hich specifies the target of the link

H#perte)t Lin's
If the target document is in the same directory the target is Kust the

documents filename If the target document is in some other directory the pathname also should -e supplied Links are rendered in a different color than the surrounding te(t and also underlined eg0 ;a hrefDESample '0(htmlE<To see the image of Nukoi click here;=a< Image itself can -e used as a link so that &hen the image is clicked it &ill connect the e(ecution to a ne& document

H#perte)t Lin's
The follo&ing e(ample sho&s &here a image itself is used as a link to another image ;a hrefDEantonov0KpgE< ;img src D Esmall.antonov0KpgE alt D EThe image of the largest aeroplaneE =< ;=a< The links helps to create a ta-le of contents that provide users to get

to the various parts of a document simply and +uickly

Targets within &ocuments

The target of a link can -e some element &ithin a documentA at the

starting or middle part or at the end of a document The target element can include an id attri-ute &hich can then -e used to identify it in a href attri-ute ;h/ id DEavionicsE<9vionics;=h/< If the target is &ith in the same document as the link then the target is specified in the href attri-ute value -y preceeding the id value &ith a pound sign(O) as sho&n in the follo&ing e(ample ;a href D EOavionicsE<*hat a-out avionicsF;=a<

Targets within &ocuments

If the target is a part of another document then the name of the part is specified at the end of the GBL seperated -y a pound sign (O) as sho&n in the follo&ing e(ample ;a href D HSample/0(htmlOavionicsH<9vionics;=a<

Lists
)TML has simple and effective &ays to represent lists in documents Lists can of three types unordered listsA ordered list and definition lists The unordered list ;ul< tag is a -lock tag that creates an unordered list 9ll entries in an unordered list must -e enclosed &ithin ;ul< P;=ul< :ach item in a list is specified &ith a list item ;li< tag In the display each list item is implicitly preceded &ith a -ullet

8rdered List
9n ordered list element can -e defined &ith the tags ;ol<P;=ol< :very item in an ordered list -egins &ith a se+uence num-er Ordered list -y default uses decimal se+uence num-ers To change the se+uence type use attri-ute type in the ;ol< opening tag The attri-ute type can have different values like A IA iA 9A a etc0 is used for decimal num-ers I for uppercase roman num-er se+uence i for lo&ercase roman num-er se+uence 9 for uppercase alpha-etic se+uence a for lo&ercase alpha-etic se+uence

&e"inition Lists
The definition lists are used to specify lists of terms and their definitions 9 definition list is given as the content of a ;dl< tag &hich is a -lock tag :ach term to -e defined in the definition list is given as the content of a ;dt< tag The definition themselves are specified as the content of ;dd< tags The defined terms of a definition list are displayed on the left margin and definitions are sho&n on the ne(t line &hich are indented

Tables
9 ta-le is a matri( of ro&s and columns in &hich each intersection of

a ro& and a column is called a cell 9 ta-le is specified -y the -lock tag ;ta-le< There is a -order attri-ute for the ta-le tag &hich specifies the &idth of the -order and can have values from ' on&ards 9 -order value of ' specifies no -order and a -order value greater than 3 gives a three.dimensional appearance for the ta-le The ta-le is normally preceded -y a title that is given as a content of the ;caption< tag

Tables
The ;caption< tag immediately follo& the opening ;ta-le< tag The cells of a ta-le are specified one ro& at a time &ith a ro& tag ;tr< The ro& heading or also called la-els is specified &ith the ;th< tag :ach data cell of a ro& is specified &ith the ta-le data tag ;td< Multiple cells in a ta-le can -e Koined ro& &ise and column &ise using the ro&span and colspan attri-ute of The align attri-ute is used for the horizontal placement of the content &ithin a cell The align attri-ute can have values leftA right and center

Tables
The valign attri-ute is used for the vertical placement of the content &ithin a cell The valign attri-ute can have values top -ottom and center The cellpadding attri-ute is used to specify the spacing -et&een the content of a cell and the inner &alls of the cell The cellspacing attri-ute is used to specify the distance -et&een the cells in a ta-le

+orms
Qorms are used to collect information from the user and communicate

to the server Qorms are filled out -y the user ),TML provides tags to generate the commonly used o-Kects on a form The o-Kects of a form are called controls or &idgets The commonly used controls are te(t -o(A check -o(A radio -uttonA drop do&n menu etc0

+orms
:very form re+uires a Su-mit -utton and &hen the user clicks the su-mit -utton the form data is encoded and sent to the *e- server for processing 9ll the components of a form appear in the content of a ;form< -lock tag The ;form< has a method attri-ute that has t&o values get or post The most commonly used tag in a form is the ;input< tag that is used for te(tA pass&ordsA check-o(es and radio controls The type attri-ute for the ;input< tag varies according to the control

+orms
If the type attri-ute is te(t a horizontal -o( is created into &hich the user can type a line of te(t If the type attri-ute is pass&ord the contents of te(t -o( &ill not -e displayed only -ullets or asterisks are displayed instead of characters If the type attri-ute is check-o( then a list of items can -e checked The check-o( -utton has a name attri-ute and a value attri-ute In the check-o( list every one in the list must have the same name In check-o( more than one value can -e selected at a time

+orms
If the type attri-ute is radio then only one radio -utton can -e on or pressed at any time 9ll radio -uttons in a group must have the name attri-ute same If the num-er of possi-le choices is large a ;select< tag can -e used The ;select< tag produces a drop do&n menu for selection and each item in the menu is specified &ith an ;option< tag In certain cases multiple lines of te(t should -e accepted -y the form and for this a ;te(tarea< tag can -e used Bo&s and columns attri-ute can -e used to fi( the size of ;te(tarea<

+orms
The Beset -utton clears all of the controls in the form to their initial states The su-mit -utton encodes the data in the form and sent to the server :very form re+uires a Su-mit -utton The Su-mit and Beset -uttons are created &ith the ;input< tag

+rames
Qrames are used to display more than one document in a -ro&ser at a

time The -ro&ser &indo& can -e divided into rectangle areas called frames that can display its o&n document The frame is created in a -ro&ser using ;frameset< tag The frameset element takes the place of the -ody element in a document 9 document can have either a -ody or a frameset -ut not -oth

+rames
The ro&s attri-ute specifies the num-er of ro&s of frames that occupy the &indo& There are three kinds of values for ro&s ie num-ersA percentages and asterisks If the num-er is used it specifies the height of one ro& in pi(els 9 percentage value specifies the percentage of the total -ro&ser &indo& height that a ro& should occupy If an asterisk is used as the value of ro&s it means the remainder of

+rames
The follo&ing frameset specifies that the ro& height is divided into 3 sections the first one occupies /'RA the second occupies 3'R and

the rest ie 2'R for the third frame eg ;frameset ro&s D H/'RA 3'RA SJ< The follo&ing e(ample divides the column area into / frames one /2R

and the rest 52R eg ;frameset cols D H/2RA SJ<

+rames
The ),TML 0 do not support frames -ut ),TML 0' supports frames The 6O8T?@: of frames in the 6T6 are different from the normal 6O8T?@: as sho&n here ;>6O8T?@: html @G$LI8 E.==*38==6T6 ),TML 0' Qrameset==:1E EhttpI==&&&0&30org=TB=(html =6T6=(html .frameset0dtdE<

Qramesets can -e nestedA the outer frameset specifies the column sudivision and the inner frameset specifies the ro& su- division