Markup Languages INE2720 Web Application Software Development Essential Materials.

Markup LanguagesMarkup Languages

INE2720INE2720

Web Application Software Web Application Software DevelopmentDevelopment

Essential MaterialsEssential Materials

INE2720 – Web Application Software INE2720 – Web Application Software DevelopmentDevelopment

All copyrights reserved by C.C. Cheung All copyrights reserved by C.C. Cheung 2003.2003.

22

OutlineOutline

Definitions – WWW, HTTP, HTMLDefinitions – WWW, HTTP, HTML The concept of Markup LanguageThe concept of Markup Language What is SGML?What is SGML? Introduction to HTMLIntroduction to HTML

– Creating and publishing a Web pageCreating and publishing a Web page– Validating a documentValidating a document– Main HTML elementsMain HTML elements– Block-level, Text-level HTML elementsBlock-level, Text-level HTML elements– Creating hypertext links, adding images to Creating hypertext links, adding images to

documentsdocuments– Building tables, Using Frames and FormsBuilding tables, Using Frames and Forms

Introduction to XMLIntroduction to XML– DTD, MathML, XHTMLDTD, MathML, XHTML



33

The World Wide WebThe World Wide Web

DefinitionsDefinitions– The World Wide Web (WWW)The World Wide Web (WWW)

The set of computers on the Internet that support The set of computers on the Internet that support HTTPHTTP

Not a separate networkNot a separate network

– HTTPHTTP The HyperText Transfer Protocol The HyperText Transfer Protocol The language used by a WWW client (e.g. Netscape, The language used by a WWW client (e.g. Netscape,

IE) to request documents from a WWW server (i.e. IE) to request documents from a WWW server (i.e. the program running at Web sites like amazon.com or the program running at Web sites like amazon.com or yahoo.com)yahoo.com)

– HTMLHTML The HyperText Markup LanguageThe HyperText Markup Language The language used to design web pagesThe language used to design web pages



44

HTTPHTTP

HTTP (HTTP (HHyperyperttext ext TTransfer ransfer PProtocol)rotocol)– protocol used to access data on the protocol used to access data on the

WWW.WWW.– uses one TCP connection on well-uses one TCP connection on well-

known port 80.known port 80.– two types of http messages: two types of http messages: RequestRequest, ,

ResponseResponse– transfer data in the form of plain text, transfer data in the form of plain text,

hypertext, audio, video, and so on.hypertext, audio, video, and so on.



55

HTTPHTTP

DEMO!



66

The Concept of Markup LangThe Concept of Markup Languageuage Markup languageMarkup language

– originates from the book publishing originates from the book publishing industry.industry.

– allows us to embed formatting allows us to embed formatting instructions in the document. instructions in the document.

Two types of markup:Two types of markup:– Procedural markupProcedural markup– Descriptive markup Descriptive markup oror Generic markup Generic markup



77

Procedural MarkupProcedural Markup

formatting codes are mixed formatting codes are mixed in with the text of the in with the text of the document.document.

typically unique to a typically unique to a specific software package specific software package such as Microsoft Word such as Microsoft Word

Disadvantages:Disadvantages:– a a single waysingle way of presenting the of presenting the

information, such as a printed information, such as a printed pagepage

– provide no capability to define provide no capability to define appearance for other media, appearance for other media, such as CD-ROM and Internet.such as CD-ROM and Internet.



88

Descriptive MarkupDescriptive Markup

Basic concept: Basic concept: content of a content of a document should remain document should remain separate from its style.separate from its style.

describes the purpose of the describes the purpose of the text in a document, rather than text in a document, rather than its physical appearance on the its physical appearance on the page. page.

based on the structure of a based on the structure of a document and identifies document and identifies elements within that structure -- elements within that structure -- such as a chapter, a section, or such as a chapter, a section, or a table of contents -- using a table of contents -- using notations that describe what the notations that describe what the element is, element is, not how it appearsnot how it appears. .

allows multiple presentations allows multiple presentations of the same information. of the same information. – e.g. publications on paper, on e.g. publications on paper, on

CD-ROM and on the Web can CD-ROM and on the Web can come from one set of source come from one set of source

files.files.



99

SGMLSGML

SGML: SGML: Standard Generalized Markup LanguageStandard Generalized Markup Language– an international standard (ISO 8879) an international standard (ISO 8879)

published in 1986. published in 1986. – prescribes a prescribes a standard formatstandard format for embedding for embedding

descriptive markupdescriptive markup within a document. within a document. – specifies a standard method for describing specifies a standard method for describing

the structure of a document.the structure of a document. allows you to set up hierarchical models for each allows you to set up hierarchical models for each

type of document you produce. type of document you produce. supports different document structures for different supports different document structures for different

information types, e.g. technical manuals, parts information types, e.g. technical manuals, parts catalogs, design specifications, reports and memos.catalogs, design specifications, reports and memos.



1010

SGMLSGML

SGML documents areSGML documents are– ASCII format: human and machine-ASCII format: human and machine-

readablereadable– independent of any specific hardware or independent of any specific hardware or

softwaresoftware– portableportable

Can be broken into three components: Can be broken into three components: – structurestructure– contentcontent– stylestyle



1111

SGMLSGML

StructureStructure: : – defined in a file called the defined in a file called the Document Type Document Type

Definition (DTD)Definition (DTD)– describes the structure of a document, much like describes the structure of a document, much like

a database schema describes the types of a database schema describes the types of information it handles and the relationships information it handles and the relationships between fieldsbetween fields

e.g. the address information should contain street, city, e.g. the address information should contain street, city, country fieldscountry fields

– specifies rules for the relationships between specifies rules for the relationships between elementselements

e.g. the street field must go first before the city field. e.g. the street field must go first before the city field. e.g. the country field is compulsory and can not be e.g. the country field is compulsory and can not be

blanks.blanks.



1212

SGMLSGML

ContentContent: : – content is the information itselfcontent is the information itself– identify the content's position within the identify the content's position within the

DTD structure by using "tagging.”DTD structure by using "tagging.” These tags mark the beginning and end of each These tags mark the beginning and end of each

part of the structure. part of the structure. e.g. e.g. <street><street> 276 Castle Peak Road 276 Castle Peak Road </street></street> "<street>" indicates the start of a street name, "<street>" indicates the start of a street name,

and "</street>" indicates the endand "</street>" indicates the end

– Nesting of tags reveal the structure of a Nesting of tags reveal the structure of a document. document.

<address><street> street name

</street><city> city name </city>

</address>



1313

SGMLSGML

StyleStyle: : – Define how different fields should be Define how different fields should be

displayed.displayed. e.g. The style defines that “city field in the e.g. The style defines that “city field in the

address should be all in upper case and in address should be all in upper case and in red colored font”. red colored font”.

Content: Content: <city><city> hong kong hong kong </city></city> Display: Display: HONG KONGHONG KONG

– SGML itself has nothing to do with SGML itself has nothing to do with setting standards for style, so most setting standards for style, so most systems still rely on proprietary systems still rely on proprietary methods. methods.



1414

SGMLSGML

Benefits of SGMLBenefits of SGML::– Increased productivityIncreased productivity– ReusabilityReusability– Information longevityInformation longevity– Improved data integrity Improved data integrity – Better data controlBetter data control– ShareabilityShareability– Portability of informationPortability of information– Flexibility beyond traditional Flexibility beyond traditional

publishingpublishing



1515

SGMLSGML

Two implementations of SGML Two implementations of SGML standard: standard: – HTML: HTML: HHyperyperttext ext MMarkup arkup LLanguageanguage– XML: EXML: Exxtensible tensible MMarkup arkup LLanguageanguage

HTML

SGML

XML

HTML XML

Structure Not defined Defined in DTD fi les

Content Limited number of tags Tags are defined in HTML

specifications Tags are not case sensitive

Unlimited number of tags Tags are defined in DTD Tags are case sensitive

Style Not defined Defined in XSL (style) fi les



1616

SGMLSGML

HTML tags are limited, so we need to HTML tags are limited, so we need to write content using available HTML tagswrite content using available HTML tags

e.g. writing address ase.g. writing address as<P><P> 276 Castle Peak Road 276 Castle Peak Road </P></P>

<P><P> Hong Kong Hong Kong </P></P> With XML, we can define new tags for With XML, we can define new tags for

writing address fields. writing address fields. e.g. it will be more descriptive to writee.g. it will be more descriptive to write

<street><street> 276 Castle Peak Road 276 Castle Peak Road </street></street>

<city><city> Hong Kong Hong Kong </city></city>



1717

HTML History & its HTML History & its FutureFuture HTML 2.0HTML 2.0 HTML 3.2HTML 3.2 HTML 4.0HTML 4.0

– All formatting is separated into a style sheet.All formatting is separated into a style sheet. HTML 4.01HTML 4.01

– Makes the future upgrade from HTML to XHTML in Makes the future upgrade from HTML to XHTML in a simple process.a simple process.

XHTML – sometimes referred to as HTML 5XHTML – sometimes referred to as HTML 5– The future of HTML standardThe future of HTML standard– Almost identical to HTML 4.01Almost identical to HTML 4.01– 1.0, 1.1 and 2.01.0, 1.1 and 2.0



1818

XHTML 2.0XHTML 2.0



1919

Markup LanguagesMarkup Languages

LanguageLanguage Year Year IntroduceIntroducedd

DescriptionDescription

SGMLSGML 19861986 International standard for specifying a document markup International standard for specifying a document markup languagelanguage

HTMLHTML 19921992 An early recommendationAn early recommendation

HTML+HTML+ 19931993 A superset of HTMLA superset of HTML

HTML 2.0HTML 2.0 19951995 An HTML version created by IETFAn HTML version created by IETF

HTML 3.2HTML 3.2 19961996 W3C formal recommendation for HTMLW3C formal recommendation for HTML

XMLXML 19981998 Universal format for structured documents and data on the Universal format for structured documents and data on the WebWeb

XHTMLXHTML 20002000 Document markup language for the WebDocument markup language for the WebSGML

HTMLXML

SGML

XML

XHTML

2020

HTML ExampleHTML Example<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><HTML><HTML><HEAD><HEAD> <Title>Home Page for Lawrence M. Brown</Title><Title>Home Page for Lawrence M. Brown</Title></HEAD></HEAD><BODY BGCOLOR="WHITE"><BODY BGCOLOR="WHITE"><H1 ALIGN="CENTER">Home Page for Lawrence M. Brown</H1><H1 ALIGN="CENTER">Home Page for Lawrence M. Brown</H1><HR><HR><IMG SRC="images/nswc.gif" WIDTH=300 HEIGHT=117 <IMG SRC="images/nswc.gif" WIDTH=300 HEIGHT=117 HSPACE=10 VSPACE=5 ALIGN="LEFT" ALT="NSWC Logo">HSPACE=10 VSPACE=5 ALIGN="LEFT" ALT="NSWC Logo">Senior Network Engineer<BR>Senior Network Engineer<BR><A HREF="http://www.dt.navy.mil/"><A HREF="http://www.dt.navy.mil/">Naval Surface Warfare Center</A><BR>Naval Surface Warfare Center</A><BR>9500 MacArthur Boulevard<BR>9500 MacArthur Boulevard<BR>West Bethesda, Maryland, MD 20817-5700<BR>West Bethesda, Maryland, MD 20817-5700<BR><I>email:</I> <A HREF="mailto:[email protected]"><I>email:</I> <A HREF="mailto:[email protected]">[email protected]</A><BR>[email protected]</A><BR><I>Phone:</I> (301) 277-4648<BR CLEAR="ALL"><I>Phone:</I> (301) 277-4648<BR CLEAR="ALL"><P><P>This is my personal home page. For more specificThis is my personal home page. For more specificprogramming-related resources pages, please see:programming-related resources pages, please see:</BODY></BODY></HTML></HTML>



2121

Creating and Creating and Publishing Publishing a Web Pagea Web Page1.1. CreateCreate an HTML document an HTML document 2.2. PlacePlace the document in a world-accessible the document in a world-accessible

directory (often directory (often public_htmlpublic_html or or wwwwww) on a ) on a system running an HTTP serversystem running an HTTP server

Unix> cdUnix> cdUnix> chmod a+x . (Note the Unix> chmod a+x . (Note the ""..""))Unix> mkdir public_htmlUnix> mkdir public_htmlUnix> chmod a+x public_htmlUnix> chmod a+x public_html

3.3. AccessAccess the web page through the web page through http://hostname/~username/filenamehttp://hostname/~username/filename

E.g. E.g. http://www.apl.jhu.edu/~lmb/test.htmlhttp://www.apl.jhu.edu/~lmb/test.html– If the filename is omitted, a system default filename is If the filename is omitted, a system default filename is

assumed (often assumed (often index.htmlindex.html)) E.g. E.g. http://www.apl.jhu.edu/~hall/http://www.apl.jhu.edu/~hall/ refers to the file refers to the file

index.htmlindex.html in hall’s in hall’s public_htmlpublic_html directory directory



2222

Creating and Creating and Publishing Publishing a Web Page, cont.a Web Page, cont.4.4. ValidateValidate the Document the Document

– Check the syntax using a formal HTML validator Check the syntax using a formal HTML validator http://validator.w3.org/http://validator.w3.org/ http://www.htmlhelp.com/tools/validator/http://www.htmlhelp.com/tools/validator/

– The version of HTML against which the document is The version of HTML against which the document is validated is based on the DOCTYPEvalidated is based on the DOCTYPE

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

– The WWW Consortium recently added advice that The WWW Consortium recently added advice that Web pages include information on the character Web pages include information on the character set, even though ASCII or Latin-1 is the default. The set, even though ASCII or Latin-1 is the default. The validator at http://validator.w3.org/ gives warnings validator at http://validator.w3.org/ gives warnings if you omit this. You can ignore such warnings if if you omit this. You can ignore such warnings if you wish.you wish.



2323

W3C XHTML Validation W3C XHTML Validation ServiceService

Fig. 4.2 Validating an XHTML document. (Courtesy of World Wide Web Consortium (W3C).)

Validator.w3.org



2424

W3C XHTML Validation W3C XHTML Validation ServiceService

XHTML validation results. (Courtesy of World Wide Web Consortium (W3C).)



2525

.htm or .html.htm or .html

We can save an HTML file to either thWe can save an HTML file to either the .htm or .html file extension.e .htm or .html file extension.

It might be a problem inherited from It might be a problem inherited from the past.the past.– Some commonly used software can onlSome commonly used software can onl

y allow three character extensions.y allow three character extensions.– .txt , .doc , ….txt , .doc , …



2626

HTML Document HTML Document TemplateTemplate



2727

HTML <META> TagHTML <META> Tag

Can record document informationCan record document information Forward and refresh pagesForward and refresh pages

<HEAD> <TITLE>Why You Should Buy Windows 2000</TITLE> <BASE HREF="http://www.microsoft.com/windows2000/"> <META NAME="author" CONTENT="Bill Gates"> <META NAME="keywords" CONTENT="Windows,Advocacy,OS,Operating Systems"> <META NAME="description" CONTENT="A summary of the advantages of Windows 2000."></HEAD>

<HEAD> <TITLE>Why You Should Buy Windows 2000</TITLE> <META HTTP-EQUIV="Refresh" CONTENT="1800"> </HEAD>



2828

HTML Element / TagHTML Element / Tag

<<pp alignalign==“right”“right”> </p>> </p>

Element Attribute Name Attribute Value

You have to understand the You have to understand the important terms related to HTML.important terms related to HTML.

Not case-sensitive.Not case-sensitive.



2929

Main HTML ElementsMain HTML Elements

1.1. DOCTYPEDOCTYPE2.2. HTMLHTML3.3. HEADHEAD

– TITLE element required TITLE element required – Optional elements: Optional elements:

BASE BASE META META BGSOUNDBGSOUND SCRIPT, NOSCRIPTSCRIPT, NOSCRIPT STYLE STYLE LINK LINK



3030

Main HTML Elements Main HTML Elements (Continued)(Continued)4.4. BODY ElementBODY Element

– <BODY BGCOLOR="YELLOW"><BODY BGCOLOR="YELLOW">– HTML Attributes and Attribute ValuesHTML Attributes and Attribute Values

BACKGROUNDBACKGROUND BGCOLORBGCOLOR TEXTTEXT LINK, VLINK, ALINKLINK, VLINK, ALINK OnLoad, OnUnload, OnFocus, OnBlurOnLoad, OnUnload, OnFocus, OnBlur

5.5. Elements inside BODY elementElements inside BODY element– <BODY><BODY>

Remaining HTML elementsRemaining HTML elements</BODY></BODY>



3131

META ElementMETA Element

Records document information, Records document information, forwards and refreshes pagesforwards and refreshes pages– NAME="author"NAME="author"– NAME="keywords"NAME="keywords"– NAME="description"NAME="description"– HTTP-EQUIV="refresh"HTTP-EQUIV="refresh"



3232

META Element, META Element, ExampleExample<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><HTML><HTML><HEAD><HEAD> <TITLE>News Headlines</TITLE><TITLE>News Headlines</TITLE> <META HTTP-EQUIV="REFRESH" CONTENT="3600"><META HTTP-EQUIV="REFRESH" CONTENT="3600"></HEAD></HEAD>

<BODY><BODY><H1 ALIGN="CENTER">News Headlines</H1><H1 ALIGN="CENTER">News Headlines</H1>

<H2>National News</H2><H2>National News</H2>Blah, blah, blah.Blah, blah, blah.<H2>International News</H2><H2>International News</H2>Yadda, yadda, yadda.Yadda, yadda, yadda.

</BODY></BODY></HTML></HTML>



3333

Block-Level ElementsBlock-Level Elements

HeadingsHeadings– H1 ... H6H1 ... H6– ALIGNALIGN

Basic Text Basic Text SectionsSections– PP– ALIGNALIGN– PREPRE– WIDTHWIDTH– ADDRESSADDRESS– BLOCKQUOTEBLOCKQUOTE

ListsLists– OLOL– LILI– ULUL– LILI– DLDL– DTDT– DDDD

Frames and FormsFrames and Forms Misc.Misc.

– HRHR– DIVDIV– CENTERCENTER– MULTICOL (Netscape MULTICOL (Netscape

only)only)



3434

HeadingsHeadings

Heading TypesHeading Types– <H1 ...> ... </H1><H1 ...> ... </H1>– <H2 ...> ... </H2><H2 ...> ... </H2>– <H3 ...> ... </H3><H3 ...> ... </H3>– <H4 ...> ... </H4><H4 ...> ... </H4>– <H5 ...> ... </H5><H5 ...> ... </H5>– <H6 ...> ... </H6><H6 ...> ... </H6>

Attributes: ALIGNAttributes: ALIGN– Values: LEFT (default), RIGHT, CENTERValues: LEFT (default), RIGHT, CENTER

Nesting tagsNesting tags– Headings and other block-level elements can Headings and other block-level elements can

contain contain text-level elements, but text-level elements, but notnot vice versa vice versa



3535

Headings, ExampleHeadings, Example

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><HTML><HTML><HEAD><HEAD> <TITLE>Document Headings</TITLE><TITLE>Document Headings</TITLE></HEAD></HEAD><BODY><BODY>Samples of the six heading types:Samples of the six heading types:<H1><H1>Level-1 (H1)Level-1 (H1)</H1></H1><H2 ALIGN="CENTER"><H2 ALIGN="CENTER">Level-2 (H2Level-2 (H2)</H2>)</H2><H3><H3><U>Level-3 (H3)</U<U>Level-3 (H3)</U></H3>></H3><H4 ALIGN="RIGHT"><H4 ALIGN="RIGHT">Level-4 (H4)Level-4 (H4)</H4></H4><H5><H5>Level-5 (H5)Level-5 (H5)</H5></H5><H6><H6>Level-6 (H6)Level-6 (H6)</H6></H6></BODY></BODY></HTML></HTML>



3636

Headings, ResultHeadings, Result



3737

P – The Basic P – The Basic ParagraphParagraph Attributes: ALIGNAttributes: ALIGN

– LEFT (default), RIGHT, CENTER. Same as headings.LEFT (default), RIGHT, CENTER. Same as headings.– Whitespace ignored (use <BR> for line break)Whitespace ignored (use <BR> for line break)

Consecutive <P>’s do not yield multiple blank linesConsecutive <P>’s do not yield multiple blank lines

– End Tag is Optional:End Tag is Optional:

<BODY> <P> Paragraph 1 </P> <P> Paragraph 2 </P> <P> Paragraph 3 </P> </BODY>Fully-Specified

<BODY> Paragraph 1 <P> Paragraph 2 <P> Paragraph 3 </BODY>Equivalent with Implied Tags



3838

Preformatted Preformatted ParagraphsParagraphs The PRE ElementThe PRE Element

– <PRE> ... </PRE><PRE> ... </PRE> Attributes: WIDTHAttributes: WIDTH

– Expected width in characters. Not widely Expected width in characters. Not widely supported.supported.

Problem: Special CharactersProblem: Special Characters<PRE><PRE>if (a<b) {if (a<b) { doThis();doThis();} else {} else { doThat();doThat();}}</PRE></PRE>

Desired Character HTML Required < < > > & & " " Non-breaking space



3939

HTML Character HTML Character EntitiesEntities The The “<““<“ character has special mea character has special mea

ning in HTML documentsning in HTML documents– We cannot use it directly in the text.We cannot use it directly in the text.– We have to use a character entity.We have to use a character entity.– We must use We must use “<”“<” or or “<”“<”– Note, they are case sensitive.Note, they are case sensitive.– The most common one is the non-breakThe most common one is the non-break

ing space – ing space – “ ”“ ”



4040

The most common The most common entitiesentities

DisplayDisplay DescriptionDescription NameName

Non-breaking Non-breaking spacespace

<< Less thanLess than <<>> Greater thanGreater than >>&& AmpersandAmpersand &&

““ Quotation markQuotation mark ""‘‘ ApostropheApostrophe ''



4141

HTML ListsHTML Lists

Unordred ListsUnordred Lists Ordered ListsOrdered Lists Definition ListsDefinition Lists



4242

OL: Ordered OL: Ordered (Numbered) Lists(Numbered) Lists

OL ElementOL Element– <OL><OL>

<LI>… <LI>… <LI>… <LI>… ... ...</OL></OL>

– Attributes: TYPE, START, COMPACTAttributes: TYPE, START, COMPACT List entries: LI List entries: LI

– <LI ...> ... </LI> (End Tag Optional)<LI ...> ... </LI> (End Tag Optional)– Attributes: (When inside OL) VALUE, TYPEAttributes: (When inside OL) VALUE, TYPE

A sample list:<OL> <LI>List Item One <LI>List Item Two <LI>List Item Three</OL>



4343

Nested Nested Ordered Ordered ListsLists

<OL TYPE="I"><OL TYPE="I">

<LI>Headings<LI>Headings

<LI>Basic Text Sections<LI>Basic Text Sections

<LI>Lists<LI>Lists

<OL TYPE="A"><OL TYPE="A">

<LI>Ordered<LI>Ordered

<OL TYPE="1"><OL TYPE="1">

<LI>The OL tag<LI>The OL tag

<OL TYPE="a"><OL TYPE="a">

<LI>TYPE<LI>TYPE

<LI>START<LI>START

<LI>COMPACT<LI>COMPACT

</OL></OL>

<LI>The LI tag<LI>The LI tag

</OL></OL>

<LI>Unordered<LI>Unordered


<LI>The UL tag<LI>The UL tag

<LI>The LI tag<LI>The LI tag

</OL></OL>

<LI>Definition<LI>Definition


<LI>The DL tag<LI>The DL tag

<LI>The DT tag<LI>The DT tag

<LI>The DD tag<LI>The DD tag

</OL></OL>

</OL></OL>

<LI>Miscellaneous<LI>Miscellaneous

</OL></OL>



4444

UL: Unordered (Bulleted) UL: Unordered (Bulleted) ListsLists

UL ElementUL Element– <UL><UL>

<LI>… <LI>… <LI>… <LI>… ... ...</UL></UL>

Attributes: TYPE, COMPACTAttributes: TYPE, COMPACT– TYPE is DISC, CIRCLE, or SQUARETYPE is DISC, CIRCLE, or SQUARE

List entries: LI (TYPE)List entries: LI (TYPE)– TYPE is DISC, CIRCLE, or SQUARETYPE is DISC, CIRCLE, or SQUARE

A sample list:<UL> <LI>List Item One <LI>List Item Two <LI>List Item Three</UL>



4545

UL: UL: Custom Custom BulletsBullets

<UL TYPE="DISC"><UL TYPE="DISC"> <LI>The UL tag<LI>The UL tag <UL TYPE="CIRCLE"><UL TYPE="CIRCLE"> <LI>TYPE<LI>TYPE <UL TYPE="SQUARE"><UL TYPE="SQUARE"> <LI>DISC<LI>DISC <LI>CIRCLE<LI>CIRCLE <LI>SQUARE<LI>SQUARE </UL></UL> <LI>COMPACT<LI>COMPACT </UL></UL> <LI>The LI tag<LI>The LI tag <UL TYPE="CIRCLE"><UL TYPE="CIRCLE"> <LI>TYPE<LI>TYPE <UL TYPE="SQUARE"><UL TYPE="SQUARE"> <LI>DISC<LI>DISC <LI>CIRCLE<LI>CIRCLE <LI>SQUARE<LI>SQUARE </UL></UL> <LI>VALUE<LI>VALUE </UL></UL></UL></UL>



4646

Text-Level ElementsText-Level Elements

Physical Character StylesPhysical Character Styles– B, I, TT, U, SUB, SUP, SMALL, BIG, STRIKE, S, BLINKB, I, TT, U, SUB, SUP, SMALL, BIG, STRIKE, S, BLINK– FONTFONT

SIZESIZE COLORCOLOR FACEFACE

– BASEFONTBASEFONT– SIZESIZE

Logical Character StylesLogical Character Styles– EM, STRONG, CODE, SAMP, KBD, DFN, VAR, CITEEM, STRONG, CODE, SAMP, KBD, DFN, VAR, CITE



4747

Text-Level Elements Text-Level Elements (Continued)(Continued) Hypertext LinksHypertext Links

– AA HREF, NAME, TARGET, ...HREF, NAME, TARGET, ...

ImagesImages– IMGIMG

SRC (required), ALT, ALIGN, WIDTH, HEIGHT, SRC (required), ALT, ALIGN, WIDTH, HEIGHT, HSPACE, VSPACE, BORDER, USEMAP, ISMAPHSPACE, VSPACE, BORDER, USEMAP, ISMAP

Misc. Text-Level ElementsMisc. Text-Level Elements– BR (Explicit line break)BR (Explicit line break)– AREA (Client-side image maps)AREA (Client-side image maps)– APPLET (Java) APPLET (Java) – ......



4848

Physical Character Physical Character Styles, ExampleStyles, Example......<H1>Physical Character Styles</H1><H1>Physical Character Styles</H1><B><B>BoldBold</B></B><BR><BR><I>Italic</I><BR><I>Italic</I><BR><TT>Teletype (Monospaced)</TT><BR><TT>Teletype (Monospaced)</TT><BR><U>Underlined</U><BR><U>Underlined</U><BR>Subscripts: f<SUB>0</SUB> + f<SUB>1</SUB><BR>Subscripts: f<SUB>0</SUB> + f<SUB>1</SUB><BR>Superscripts: x<SUP>2</SUP> + y<SUP>2</SUP><BR>Superscripts: x<SUP>2</SUP> + y<SUP>2</SUP><BR><SMALL>Smaller</SMALL><BR><SMALL>Smaller</SMALL><BR><BIG>Bigger</BIG><BR><BIG>Bigger</BIG><BR><STRIKE>Strike Through</STRIKE><BR><STRIKE>Strike Through</STRIKE><BR><B><I>Bold Italic</I></B><BR><B><I>Bold Italic</I></B><BR><BIG><TT>Big Monospaced</TT></BIG><BR><BIG><TT>Big Monospaced</TT></BIG><BR><SMALL><I>Small Italic</I></SMALL><BR><SMALL><I>Small Italic</I></SMALL><BR><FONT COLOR="GRAY">Gray</FONT><BR><FONT COLOR="GRAY">Gray</FONT><BR><DEL>Delete</DEL><BR><DEL>Delete</DEL><BR><INS>Insert</INS><BR><INS>Insert</INS><BR>......



4949

Text FormattingText Formatting

<b><b> Bold textBold text

<big><big> Big textBig text

<em><em> Emphasized textEmphasized text

<i><i> Italic textItalic text

<small><small> Small textSmall text

<strong><strong> Strong textStrong text

<sub><sub> Subscripted textSubscripted text

<sup><sup> Superscripted textSuperscripted text



5050

Physical Character Physical Character Styles, ResultStyles, Result



5151

Logical Character Logical Character Styles, ExampleStyles, Example......<H1><H1>Logical Character StylesLogical Character Styles</H1></H1><EM>Emphasized</EM><BR><EM>Emphasized</EM><BR><STRONG>Strongly Emphasized</STRONG><BR><STRONG>Strongly Emphasized</STRONG><BR><CODE>Code</CODE><BR><CODE>Code</CODE><BR><SAMP>Sample Output</SAMP><BR><SAMP>Sample Output</SAMP><BR><KBD>Keyboard Text</KBD><BR><KBD>Keyboard Text</KBD><BR><DFN>Definition</DFN><BR><DFN>Definition</DFN><BR><VAR>Variable</VAR><BR><VAR>Variable</VAR><BR><CITE>Citation</CITE><BR><CITE>Citation</CITE><BR><EM><CODE>Emphasized Code</CODE></EM><BR><EM><CODE>Emphasized Code</CODE></EM><BR><FONT COLOR="GRAY"><CITE>Gray Citation</CITE></FONT><BR><FONT COLOR="GRAY"><CITE>Gray Citation</CITE></FONT><BR><ACRONYM TITLE="Java Development Kit">JDK <ACRONYM TITLE="Java Development Kit">JDK

Acronym</ACRONYM>Acronym</ACRONYM>......



5252

Logical Character Styles, Logical Character Styles, ResultResult



5353

HTML LinksHTML Links

<a><a> to create a link to another docum to create a link to another document.ent.

The target attributeThe target attribute– <a<a hrefhref=“…”, =“…”, targettarget=“_blank”=“_blank”>>xxxxxx</</

a>a>– Open the document in a new browser wiOpen the document in a new browser wi

ndow.ndow. The name attributeThe name attribute

– <a<a namename=“abc”=“abc”>>– <a<a hrefhref=“#abc”=“#abc”>>Useful textUseful text</a></a>



5454

Hypertext LinksHypertext Links

Links can contain images and other text-level Links can contain images and other text-level elements (i.e., <A HREF…> elements (i.e., <A HREF…> ...... </A>) </A>)

Link to Link to Absolute URLAbsolute URL– Use a complete URL beginning with http://Use a complete URL beginning with http://

Java is discussed inJava is discussed in<A HREF="<A HREF="http://host/path/chapter2.htmlhttp://host/path/chapter2.html">">Chapter 2</A>.Chapter 2</A>.

Link to Link to Relative URLRelative URL– Use a filename or relative path to filenameUse a filename or relative path to filename

Interpreted wrt location of current fileInterpreted wrt location of current fileJava is discussed inJava is discussed in<A HREF="<A HREF="chapter2.htmlchapter2.html">Chapter 2</A>.">Chapter 2</A>.



5555

Hypertext LinksHypertext Links(Continued)(Continued) Link to SectionLink to Section

– Use a section name (see below) preceded by #Use a section name (see below) preceded by #Images are discussed inImages are discussed in

<A<A HREF=" HREF="#Section2#Section2"">>Section 2Section 2</A></A>..

Link to Section in URLLink to Section in URL– Use absolute or relative URL, then #, then section Use absolute or relative URL, then #, then section

namenameImages are discussed inImages are discussed in<A<A HREF=" HREF="chapter1.html#Section2chapter1.html#Section2"">>Sec. 2 of Chap. 1Sec. 2 of Chap. 1</A></A>..

Naming a SectionNaming a Section– Use Use <A<A NAME="..." NAME="...">> and do not include the pound sign and do not include the pound sign

<H2><H2><A<A NAME="Section2"NAME="Section2">>ImagesImages</A></A></H2></H2>

1 1 <?xml version = <?xml version = "1.0""1.0"?>?>

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

3 3 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">>

4 4

5 5 

6 6 

7 7

8 8 <html xmlns = <html xmlns = "http://www.w3.org/1999/xhtml""http://www.w3.org/1999/xhtml">>

9 9 <head> <head>

10 10 <title><title>Internet and WWW How to Program - LinksInternet and WWW How to Program - Links</title></title>

11 11 </head> </head>

12 12

13 13 <body> <body>

14 14

15 15 <h1><h1>Here are my favorite sitesHere are my favorite sites</h1></h1>

16 16

17 17 <p><strong><p><strong>Click on a name to go to that page.Click on a name to go to that page.</strong></p></strong></p>

18 18

19 19 <p><a href = <p><a href = "http://www.deitel.com""http://www.deitel.com">>DeitelDeitel</a></p></a></p>

20 20

21 21 <p><a href = <p><a href = "http://www.prenhall.com""http://www.prenhall.com">>Prentice HallPrentice Hall</a></p></a></p>

22 22

23 23 <p><a href = <p><a href = "http://www.yahoo.com""http://www.yahoo.com">>Yahoo!Yahoo!</a></p></a></p>

24 24

25 25 <p><a href = <p><a href = "http://www.usatoday.com""http://www.usatoday.com">>USA TodayUSA Today</a></p></a></p>

26 26

27 27 </body> </body>

28 28 </html></html>

Text between strong tags will appear bold.

Elements placed between paragraph tags will be set apart from other elements on the page with a vertical line before and after it.

Linking is accomplished in XHTML with the anchor (a) element.

The anchor links to the page that’s value is given by the href attribute.

The text between the a tags is the anchor for the link.

Hypertext LinksHypertext Links

Clicking on the “Deitel” link will open up the Deitel homepage in a new browser window.

1 1 <?xml version = <?xml version = "1.0""1.0"?>?>

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

3 3 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">>

4 4

5 5 

6 6 

7 7

8 8 <html xmlns = <html xmlns = "http://www.w3.org/1999/xhtml""http://www.w3.org/1999/xhtml">>

9 9 <head> <head>

10 10 <title><title>Internet and WWW How to Program - Contact PageInternet and WWW How to Program - Contact Page

11 11 </title> </title>

12 12 </head> </head>

13 13

14 14 <body> <body>

15 15

16 16 <p><p>My email address is My email address is

17 17 <a href = <a href = "mailto:[email protected]""mailto:[email protected]"> > [email protected] [email protected]

18 18 </a></a>. Click the address and your browser will open an. Click the address and your browser will open an

19 19 email message and address it to me. email message and address it to me.</p></p>

20 20

21 21 </body> </body>

22 22 </html></html>

To create an email link include “mailto:” before the email address in the href

attribute.

When a user clicks on an email link, an email message addressed to the

value of the link will open up.



5959

IMG: Embedding IMG: Embedding ImagesImages ExampleExample

<IMG<IMG SRCSRC="SomeFile.gif" ="SomeFile.gif" ALTALT="My Dog"="My Dog" WIDTHWIDTH=400 =400 HEIGHTHEIGHT=300=300>>

Attributes: Attributes: – SRC (required)SRC (required)– ALT (technically required)ALT (technically required)– ALIGN (see <BR CLEAR="ALL">)ALIGN (see <BR CLEAR="ALL">)– WIDTH, HEIGHTWIDTH, HEIGHT– HSPACE, VSPACEHSPACE, VSPACE– BORDERBORDER– USEMAP, ISMAPUSEMAP, ISMAP



6060

Image Alignment, Image Alignment, ExampleExample<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><HTML><HTML><HEAD><TITLE>Image Alignment</TITLE></HEAD><HEAD><TITLE>Image Alignment</TITLE></HEAD><BODY><BODY><H1 ALIGN="CENTER">Image Alignment</H1><H1 ALIGN="CENTER">Image Alignment</H1><TABLE BORDER=1><TABLE BORDER=1> <TR><TH>Alignment<TR><TH>Alignment <TH>Result<TH>Result <TR><TH><CODE>LEFT</CODE><TR><TH><CODE>LEFT</CODE> <TD><TD><IMG<IMG SRC="rude-pc.gif" SRC="rude-pc.gif" ALIGN="LEFT"ALIGN="LEFT" ALT="Rude PC"ALT="Rude PC" WIDTH=54WIDTH=54 HEIGHT=77HEIGHT=77>> This positions the image at the left side,This positions the image at the left side, with text flowing around it on the right.with text flowing around it on the right. <TR><TH><CODE>RIGHT</CODE><TR><TH><CODE>RIGHT</CODE> <TD><TD><IMG<IMG SRC="rude-pc.gif" SRC="rude-pc.gif" ALIGN="RIGHT"ALIGN="RIGHT" ALT="Rude PC"ALT="Rude PC" WIDTH=54WIDTH=54 HEIGHT=77HEIGHT=77>> This positions the image at the right side,This positions the image at the right side, with text flowing around it on the left.with text flowing around it on the left. ......</TABLE></TABLE></BODY></BODY></HTML></HTML>



6161

Image Alignment, Image Alignment, ResultResult



6262

Break Time – 15 Break Time – 15 minutesminutes



6363

TablesTables

TemplateTemplate<TABLE BORDER=1><TABLE BORDER=1>

<CAPTION>Table Caption</CAPTION><CAPTION>Table Caption</CAPTION>

<TR><TR><TH>Heading1</TH> <TH>Heading2</TH><TH>Heading1</TH> <TH>Heading2</TH></TR></TR>

<TR><TR><TD><TD>Row1 Col1 DataRow1 Col1 Data</TD><TD></TD><TD>Row1 Col2 DataRow1 Col2 Data</TD></TD></TR></TR>



</TABLE></TABLE>



6464

TABLE Element TABLE Element AttributesAttributes ALIGNALIGN

– The ALIGN attribute gives the horizontal alignment of the The ALIGN attribute gives the horizontal alignment of the table as a wholetable as a whole

– Legal values are LEFT, RIGHT, and CENTER, with LEFT being Legal values are LEFT, RIGHT, and CENTER, with LEFT being the default the default

BORDERBORDER– This specifies the width in pixels of the border around the This specifies the width in pixels of the border around the

tabletable– This is in addition to the border around each cell (the This is in addition to the border around each cell (the

CELLSPACING). CELLSPACING). – The default is zero, which also results in the visible 3D The default is zero, which also results in the visible 3D

divider between cells being turned off divider between cells being turned off CELLSPACINGCELLSPACING

– This gives the space in pixels between adjacent cells. Drawn This gives the space in pixels between adjacent cells. Drawn as a 3D line if BORDER is nonzero, otherwise empty space in as a 3D line if BORDER is nonzero, otherwise empty space in the background color is used the background color is used

– The default is usually about 3The default is usually about 3



6565

TABLE Element TABLE Element AttributesAttributes(Continued)(Continued) CELLPADDINGCELLPADDING

– CELLPADDING determines the empty space, in pixels, CELLPADDING determines the empty space, in pixels, between the cell’s border and the table element between the cell’s border and the table element

– The default is usually about 1The default is usually about 1 WIDTHWIDTH

– This specifies the width of the table, either in pixels This specifies the width of the table, either in pixels (<TABLE WIDTH=250>) or as a percentage of the (<TABLE WIDTH=250>) or as a percentage of the current browser window width (<TABLE WIDTH="75%">) current browser window width (<TABLE WIDTH="75%">)

BGCOLORBGCOLOR– Specify the background color of the table TABLE (also Specify the background color of the table TABLE (also

legal for TR, TD, and TH)legal for TR, TD, and TH) BORDERCOLOR, BORDERCOLORDARK, BORDERCOLOR, BORDERCOLORDARK,

BORDERCOLORLIGHTBORDERCOLORLIGHT– Non standard attributes supported by IE to specify the Non standard attributes supported by IE to specify the

colors to user for the borderscolors to user for the borders



6666

TABLE Element TABLE Element Attributes (Continued)Attributes (Continued) BACKGROUNDBACKGROUND

– This nonstandard attribute supported by IE gives an image This nonstandard attribute supported by IE gives an image file that will be tiled as the background of the tablefile that will be tiled as the background of the table

– You might want to use style sheets instead.You might want to use style sheets instead. RULESRULES

– HTML 4.0 attribute that specifies which inner dividing lines HTML 4.0 attribute that specifies which inner dividing lines are drawnare drawn

– All are drawn if this attribute is omittedAll are drawn if this attribute is omitted– Legal values are NONE, ROWS, COLS, and ALLLegal values are NONE, ROWS, COLS, and ALL

FRAMEFRAME– Specifies which outer borders are drawn Specifies which outer borders are drawn – All four are drawn if this attribute is omittedAll four are drawn if this attribute is omitted– Legal values are BORDER or BOX (all), VOID (none), ABOVE Legal values are BORDER or BOX (all), VOID (none), ABOVE

(top), BELOW (bottom), HSIDES (top and bottom, despite the (top), BELOW (bottom), HSIDES (top and bottom, despite the somewhat confusing name), VSIDES (left and right), LHS somewhat confusing name), VSIDES (left and right), LHS (left), and RHS (right) (left), and RHS (right)



6767

Table CAPTIONTable CAPTION

AttributeAttribute– ALIGN (Values: TOP, BOTTOM)ALIGN (Values: TOP, BOTTOM)

UsageUsage– An enclosing borderless table may give more An enclosing borderless table may give more

flexibility than the built-in CAPTION.flexibility than the built-in CAPTION.



6868

TR: Table RowTR: Table Row

TR is used to define each row in the tableTR is used to define each row in the table Each row will then contain TH and/or TD entriesEach row will then contain TH and/or TD entries ALIGNALIGN

– ALIGN (legal values LEFT, RIGHT, or CENTER) is used to set ALIGN (legal values LEFT, RIGHT, or CENTER) is used to set the default horizontal alignment for table cellsthe default horizontal alignment for table cells

VALIGNVALIGN– VALIGN (legal values TOP, MIDDLE, or BOTTOM) is used to VALIGN (legal values TOP, MIDDLE, or BOTTOM) is used to

set the default vertical alignment for table cellsset the default vertical alignment for table cells BGCOLORBGCOLOR

– Sets the color for the table row, overriding any values set Sets the color for the table row, overriding any values set for the table as a whole via the BGCOLOR attribute of for the table as a whole via the BGCOLOR attribute of TABLE TABLE

BORDERCOLOR, BORDERCOLORDARK, BORDERCOLOR, BORDERCOLORDARK, BORDERCOLORLIGHTBORDERCOLORLIGHT

– Supported only by Internet Explorer, these specify the Supported only by Internet Explorer, these specify the colors to use for the row borderscolors to use for the row borders



6969

Table Cells: TH and TDTable Cells: TH and TD

COLSPAN COLSPAN – COLSPAN defines a heading or cell data entry that COLSPAN defines a heading or cell data entry that

spans multiple columnsspans multiple columns <TABLE BORDER=1><TABLE BORDER=1>

<TR><TH <TR><TH COLSPAN=2COLSPAN=2>Col 1&2 Heading>Col 1&2 Heading

<TH>Col3 Heading<TH>Col3 Heading

<TR><TD>Col1 Data<TR><TD>Col1 Data

<TD>Col2 Data<TD>Col2 Data

<TD>Col3 Data<TD>Col3 Data

</TABLE></TABLE>



7070

Table Cells: TH and TD Table Cells: TH and TD (Continued)(Continued) ROWSPANROWSPAN

– ROWSPAN defines a heading or cell data entry that spans ROWSPAN defines a heading or cell data entry that spans multiple rows; similar to COLSPANmultiple rows; similar to COLSPAN

ALIGNALIGN– LEFT, RIGHT, CENTER, JUSTIFY and CHAR. LEFT, RIGHT, CENTER, JUSTIFY and CHAR. – E.g., the following aligns entries on a decimal pointE.g., the following aligns entries on a decimal point

<TD ALIGN=<TD ALIGN=""CHARCHAR"" CHAR= CHAR="".."">> VALIGNVALIGN

– TOP, BOTTOM, MIDDLETOP, BOTTOM, MIDDLE WIDTH, HEIGHTWIDTH, HEIGHT

– Values in pixels only (no percentages officially allowed)Values in pixels only (no percentages officially allowed) NOWRAPNOWRAP

– Use with cautionUse with caution BGCOLOR, BACKGROUNDBGCOLOR, BACKGROUND

– Same as for TABLE and TRSame as for TABLE and TR



7171

HTML Hex-ColorsHTML Hex-Colors

WhiteWhite #FFFFFF#FFFFFF

RedRed #FF0000#FF0000

GreenGreen #00FF00#00FF00

BlueBlue #0000FF#0000FF

CyanCyan #00FFFF#00FFFF

YellowYellow #FFFF00#FFFF00

BlackBlack #000000#000000

Dim GrevDim Grev #545454#545454

Forest GreenForest Green #238E23#238E23

GreyGrey #C0C0C0#C0C0C0

Midnight BlueMidnight Blue #2F2F4F#2F2F4F

OrangeOrange #FF7F00#FF7F00

Spring GreenSpring Green #00FF7F#00FF7F

TurquoiseTurquoise #ADEAEA#ADEAEA



7272

Basic HTML - SummaryBasic HTML - Summary

A DOCTYPE is required to validate the documentA DOCTYPE is required to validate the document HTML document should have an enclosing HTML HTML document should have an enclosing HTML

element, a HEAD (TITLE is required) and a BODYelement, a HEAD (TITLE is required) and a BODY Hypertext links, <A HREF=Hypertext links, <A HREF="…">"…">

– can be absolute or relativecan be absolute or relative– A link to a named section is denoted by #A link to a named section is denoted by #sectionsection

Tables are composed of main table element, Tables are composed of main table element, <TABLE><TABLE>; rows, ; rows, <TR><TR>; table headers, ; table headers, <TH><TH>; ; and table data, and table data, <TD><TD>– Use BGCOLOR to give background colors to tables, Use BGCOLOR to give background colors to tables,

rows, or cellsrows, or cells– Use ROWSPAN or COLSPAN to join cellsUse ROWSPAN or COLSPAN to join cells



7373

HTML Frames - OutlineHTML Frames - Outline

Advantages and disadvantages of Advantages and disadvantages of framesframes

FRAME templateFRAME template Defining rows and cols in a FRAMESETDefining rows and cols in a FRAMESET Common FRAME and FRAMESET Common FRAME and FRAMESET

attributesattributes Nested framesNested frames Targeting a document to a named Targeting a document to a named

FRAME cellFRAME cell



7474

HTML FramesHTML Frames

Vertical framesetVertical frameset Horizontal framesetHorizontal frameset You can display more than one HTML You can display more than one HTML

document in the same browser.document in the same browser. Webmaster should keep track of morWebmaster should keep track of mor

e HTML documents.e HTML documents. Difficult to print the entire pageDifficult to print the entire page

– Print friendly page.Print friendly page.



7575

Frame AdvantagesFrame Advantages

Certain parts of the interface (e.g., a Certain parts of the interface (e.g., a TOC) are always on the screenTOC) are always on the screen

Can avoid retyping common sections Can avoid retyping common sections of multiple Web pages of multiple Web pages

Consistent use across a large site Consistent use across a large site sometimes simplifies user navigationsometimes simplifies user navigation

A convenient way to mix text-oriented A convenient way to mix text-oriented HTML with Java appletsHTML with Java applets

Image maps are more convenient if Image maps are more convenient if the map image remains on screen and the map image remains on screen and only the results section changesonly the results section changes



7676

Frame DisadvantagesFrame Disadvantages

The meaning of the “Back” and “Forward” The meaning of the “Back” and “Forward” buttons can be confusingbuttons can be confusing

Poorly designed frames can get the user lostPoorly designed frames can get the user lost Hard to find real URL of a page you wantHard to find real URL of a page you want

– Printing problems!Printing problems! Hard to bookmark "configuration"Hard to bookmark "configuration" Some very old browsers do not support framesSome very old browsers do not support frames SecuritySecurity

– Hackers can insert frame cells into your pages in Hackers can insert frame cells into your pages in some circumstances, perhaps stealing information some circumstances, perhaps stealing information intended for your siteintended for your site

7777

Frame TemplateFrame Template

<!DOCTYPE HTML PUBLIC "-//W3C//DTD <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 FramesetHTML 4.0 Frameset//EN">//EN">

<HTML><HTML>

<HEAD><TITLE>Document Title</TITLE></HEAD><HEAD><TITLE>Document Title</TITLE></HEAD>

<FRAMESET ...><FRAMESET ...>



<NOFRAMES><NOFRAMES>

<BODY><BODY>



</BODY></BODY>

</NOFRAMES></NOFRAMES>

</FRAMESET></FRAMESET>

</HTML></HTML>



7878

FRAMESET AttributesFRAMESET Attributes

COLS, ROWSCOLS, ROWS– A comma-separated list of pixel values, A comma-separated list of pixel values,

percentages, and weighted remainderspercentages, and weighted remainders– FRAMESET entries should FRAMESET entries should alwaysalways specify at least specify at least

two rows or columns. Netscape problems if not!two rows or columns. Netscape problems if not!– ExamplesExamples

<FRAMESET ROWS="50,10%,*,2*"> ...</FRAMESET>

<FRAMESET COLS="25%,*,*"> ...</FRAMESET>



7979

FRAMESET ROWS, FRAMESET ROWS, ExampleExample

<FRAMESET ROWS="50,10%,*,2*"> ...</FRAMESET> 50 pixels, 10%, 1/3, 2/3



8080

FRAMESET Attributes FRAMESET Attributes (Continued)(Continued) FRAMEBORDERFRAMEBORDER

– Indicates whether borders will be drawn Indicates whether borders will be drawn betweenbetween frame cellsframe cells

– YES or 1 specifies borders; NO or 0 specifies no borderYES or 1 specifies borders; NO or 0 specifies no border– Can be overridden by FRAMEBORDER settings in Can be overridden by FRAMEBORDER settings in

individual FRAME entriesindividual FRAME entries– Often used in conjunction with BORDER=0 and Often used in conjunction with BORDER=0 and

FRAMESPACING=0FRAMESPACING=0 BORDER (Netscape), FRAMESPACING (IE)BORDER (Netscape), FRAMESPACING (IE)

– Specify the thickness of the border between cellsSpecify the thickness of the border between cells– Apply to outermost FRAMESET onlyApply to outermost FRAMESET only

BORDERCOLORBORDERCOLOR– Sets the color of the border between cell, using either Sets the color of the border between cell, using either

a hex RGB value or color namea hex RGB value or color name



8181

Frame Border, Frame Border, ExamplesExamples

Frame Border



8282

FRAME: Specifying FRAME: Specifying Content of Frame CellsContent of Frame Cells SRCSRC

– URL of the document to place in the frame cell URL of the document to place in the frame cell NAMENAME

– Supplies destination for TARGET attribute of hypertext Supplies destination for TARGET attribute of hypertext linkslinks

FRAMEBORDER, BORDERCOLORFRAMEBORDER, BORDERCOLOR MARGINWIDTH, MARGINHEIGHTMARGINWIDTH, MARGINHEIGHT

– Specifies the left/right and top/bottom cell margins, Specifies the left/right and top/bottom cell margins, respectivelyrespectively

SCROLLINGSCROLLING– Indicates whether cells should have scrollbarsIndicates whether cells should have scrollbars

NORESIZENORESIZE– Disables the ability to resize the frame cellsDisables the ability to resize the frame cells



8383

Frame Example 1Frame Example 1<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Frameset4.0 Frameset//EN">//EN">

<HTML><HTML>

<HEAD><TITLE>Frame Example 1</TITLE></HEAD><HEAD><TITLE>Frame Example 1</TITLE></HEAD>

<FRAMESET ROWS="55%,45%"><FRAMESET ROWS="55%,45%">

<FRAMESET COLS="*,*,*"><FRAMESET COLS="*,*,*">

<FRAME SRC="Frame-Cell.html"><FRAME SRC="Frame-Cell.html">




<FRAMESET COLS="*,*"><FRAMESET COLS="*,*">





<BODY><BODY>

Your browser does not support frames. Please seeYour browser does not support frames. Please see

<A HREF="Frame-Cell.html">non-frames version</A>.<A HREF="Frame-Cell.html">non-frames version</A>.

</BODY></BODY>



</HTML></HTML>



8484

Frame Example 1, Frame Example 1, ResultResult



8585

Frame Example 2Frame Example 2<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Frameset4.0 Frameset//EN">//EN"><HTML><HTML><HEAD><TITLE>Frame Example 2</TITLE></HEAD><HEAD><TITLE>Frame Example 2</TITLE></HEAD><FRAMESET COLS="55%,45%"><FRAMESET COLS="55%,45%"> <FRAMESET <FRAMESET ROWSROWS="*,*,*">="*,*,*"> <FRAME SRC="Frame-Cell.html"><FRAME SRC="Frame-Cell.html"> <FRAME SRC="Frame-Cell.html"><FRAME SRC="Frame-Cell.html"> <FRAME SRC="Frame-Cell.html"><FRAME SRC="Frame-Cell.html"> </FRAMESET></FRAMESET> <FRAMESET <FRAMESET ROWSROWS="*,*">="*,*"> <FRAME SRC="Frame-Cell.html"><FRAME SRC="Frame-Cell.html"> <FRAME SRC="Frame-Cell.html"><FRAME SRC="Frame-Cell.html"> </FRAMESET></FRAMESET> <NOFRAMES><NOFRAMES> <BODY><BODY> Your browser does not support frames. Please seeYour browser does not support frames. Please see <A HREF="Frame-Cell.html">nonframes version</A>.<A HREF="Frame-Cell.html">nonframes version</A>. </BODY></BODY> </NOFRAMES></NOFRAMES></FRAMESET></FRAMESET></HTML></HTML>



8686

Frame Example 2, Frame Example 2, ResultResult



8787

Targeting Frame CellsTargeting Frame Cells

Specify the cell in which to place a Specify the cell in which to place a page referenced by a hyperlinkpage referenced by a hyperlink

The NAME Attribute of FRAMEThe NAME Attribute of FRAME <FRAME SRC=<FRAME SRC=""......"" NAME=NAME=""cellNamecellName"">>

The TARGET Attribute of A HREFThe TARGET Attribute of A HREF <A HREF=<A HREF="..." "..." TARGET="TARGET="cellNamecellName"">>



8888

Targeting ExampleTargeting Example



8989

Cold-Fusion.htmlCold-Fusion.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Frameset//EN"><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Frameset//EN">

<HTML><HTML>

<HEAD><HEAD>

<TITLE>Investing in Cold Fusion</TITLE><TITLE>Investing in Cold Fusion</TITLE>

</HEAD></HEAD>

<FRAMESET ROWS="75,*"><FRAMESET ROWS="75,*">

<FRAME SRC="TOC.html" NAME="TOC"><FRAME SRC="TOC.html" NAME="TOC">

<FRAME SRC="Introduction.html" <FRAME SRC="Introduction.html" NAME="Main"NAME="Main">>


<BODY><BODY>

This page requires Frames. For a non-Frames version,This page requires Frames. For a non-Frames version,

<A HREF="Introduction.html">the introduction</A>.<A HREF="Introduction.html">the introduction</A>.

</BODY></BODY>



</HTML></HTML>



9090

TOC.htmlTOC.html<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<HTML><HTML><HEAD><HEAD> <TITLE>Table of Contents</TITLE><TITLE>Table of Contents</TITLE></HEAD></HEAD><BODY><BODY><TABLE WIDTH="100%"><TABLE WIDTH="100%"> <TR><TH><A HREF="Introduction.html" <TR><TH><A HREF="Introduction.html" TARGET="Main"TARGET="Main">> Introduction</A></TH>Introduction</A></TH> <TH><A HREF="Potential.html" <TH><A HREF="Potential.html" TARGET="Main"TARGET="Main">> Potential</A></TH>Potential</A></TH> <TH><A HREF="Investing.html" <TH><A HREF="Investing.html" TARGET="Main"TARGET="Main">> Investing</A></TH>Investing</A></TH> <TH><A HREF="References.html" <TH><A HREF="References.html" TARGET="Main"TARGET="Main">> References</A></TH></TR>References</A></TH></TR></TABLE></TABLE></BODY></BODY></HTML></HTML>



9191

Targeting Example, Targeting Example, ResultsResults



9292

Predefined Frame Predefined Frame NamesNames _blank_blank

– Load document into a Load document into a new browsernew browser window window _top_top

– Causes the linked document to take up the whole Causes the linked document to take up the whole browser windowbrowser window

– Document will not be contained in a frame cellDocument will not be contained in a frame cell _parent_parent

– Places document in the Places document in the immediateimmediate FRAMESET FRAMESET parentparent

– Same as _top if no nested framesSame as _top if no nested frames _self_self

– Place document in current cellPlace document in current cell– Only necessary to override a BASE entryOnly necessary to override a BASE entry



9393

Update Multiple FramesUpdate Multiple Frames(Revisit during the JS (Revisit during the JS lecture)lecture)



9494

HTML Frames - HTML Frames - SummarySummary Frames require a Frameset DOCTYPE for Frames require a Frameset DOCTYPE for

validationvalidation A FRAMESET can be divided either into A FRAMESET can be divided either into

columns or rowscolumns or rows– To create both rows To create both rows andand columns use nested columns use nested

FRAMESETsFRAMESETs By giving a FRAME a name, documents can By giving a FRAME a name, documents can

be targeted to the named frame cellbe targeted to the named frame cell– <FRAME … <FRAME … NAME="…"NAME="…">>– <A HREF="…" <A HREF="…" TARGET="…"TARGET="…">>

There are four predefined frame namesThere are four predefined frame names– _blank, _top, _parent, and _self_blank, _top, _parent, and _self



9595

Outline – HTML FormsOutline – HTML Forms

Sending data from formsSending data from forms The FORM elementThe FORM element Text controlsText controls Push buttonsPush buttons Check boxes and radio buttonsCheck boxes and radio buttons Combo boxes and list boxesCombo boxes and list boxes File upload controlsFile upload controls Server-side image mapsServer-side image maps Hidden fieldsHidden fields Grouping controlsGrouping controls Tab orderingTab ordering



9696

Sending Data with GETSending Data with GET

……

<BODY BGCOLOR="#FDF5E6"><BODY BGCOLOR="#FDF5E6">

<H2 ALIGN="CENTER">A Sample Form Using GET</H2><H2 ALIGN="CENTER">A Sample Form Using GET</H2>

<FORM ACTION="http://localhost:8088/SomeProgram"><FORM ACTION="http://localhost:8088/SomeProgram">

<CENTER><CENTER>

First name:First name:

<INPUT TYPE="TEXT" <INPUT TYPE="TEXT" NAME="firstName"NAME="firstName" VALUE="Joe"><BR> VALUE="Joe"><BR>

Last name:Last name:

<INPUT TYPE="TEXT" <INPUT TYPE="TEXT" NAME="lastName"NAME="lastName" VALUE="Hacker"><P> VALUE="Hacker"><P>

<INPUT TYPE="SUBMIT"><INPUT TYPE="SUBMIT">

</CENTER></CENTER>

</FORM></FORM>

</BODY></HTML></BODY></HTML>



9797

Initial ResultInitial Result



9898

Submission ResultSubmission Result



9999

Sending Data with Sending Data with POSTPOST……<BODY BGCOLOR="#FDF5E6"><BODY BGCOLOR="#FDF5E6"><H2 ALIGN="CENTER">A Sample Form Using POST</H2><H2 ALIGN="CENTER">A Sample Form Using POST</H2>

<FORM ACTION="http://localhost:8088/SomeProgram"<FORM ACTION="http://localhost:8088/SomeProgram" METHOD="POST">METHOD="POST"> <CENTER><CENTER> First name:First name: <INPUT TYPE="TEXT" NAME="firstName" <INPUT TYPE="TEXT" NAME="firstName"

VALUE="Joe"><BR>VALUE="Joe"><BR> Last name:Last name: <INPUT TYPE="TEXT" NAME="lastName" <INPUT TYPE="TEXT" NAME="lastName"

VALUE="Hacker"><P>VALUE="Hacker"><P> <INPUT TYPE="SUBMIT"><INPUT TYPE="SUBMIT"> </CENTER></CENTER></FORM></FORM>

</BODY></HTML></BODY></HTML>



100100

Initial ResultInitial Result



101101

Submission ResultSubmission Result



102102

URL Encoding: Original URL Encoding: Original FormForm



103103

URL Encoding: ResultURL Encoding: Result



104104

Text ControlsText Controls

TextfieldsTextfields– <INPUT TYPE="TEXT" NAME="…" …><INPUT TYPE="TEXT" NAME="…" …>

VALUEVALUE can give original value can give original value

Password FieldsPassword Fields– <INPUT TYPE="PASSWORD" NAME="…" …><INPUT TYPE="PASSWORD" NAME="…" …>

AlwaysAlways use use POSTPOST

Text AreasText Areas– <TEXTAREA NAME="…" <TEXTAREA NAME="…"

ROWS="…" COLS="…"> ROWS="…" COLS="…">……</TEXTAREA></TEXTAREA>

Interpretation of regular HTML tags turned off between Interpretation of regular HTML tags turned off between <TEXTAREA…><TEXTAREA…> and and </TEXTAREA></TEXTAREA>



105105

Push ButtonsPush Buttons

Submit ButtonsSubmit Buttons– <INPUT TYPE="SUBMIT" …><INPUT TYPE="SUBMIT" …>

Use Use NAMENAME if you have multiple buttons if you have multiple buttons Use Use VALUEVALUE to change button's label to change button's label

Reset ButtonsReset Buttons– <INPUT TYPE="RESET" …><INPUT TYPE="RESET" …>

Use Use VALUEVALUE to change button's label to change button's label JavaScript ButtonsJavaScript Buttons

– <INPUT TYPE="BUTTON" <INPUT TYPE="BUTTON" onClick="someJavaScriptFunction()" …> onClick="someJavaScriptFunction()" …>

Fancy ButtonsFancy Buttons– <BUTTON TYPE="SUBMIT" …><BUTTON TYPE="SUBMIT" …>HTMLHTML</BUTTON></BUTTON>

Internet Explorer and Netscape 6 onlyInternet Explorer and Netscape 6 only



106106

Using Multiple Submit Using Multiple Submit ButtonsButtons<CENTER><CENTER>

Item:Item:

<INPUT TYPE="TEXT" NAME="Item" VALUE="256MB <INPUT TYPE="TEXT" NAME="Item" VALUE="256MB SIMM"><BR>SIMM"><BR>

<INPUT TYPE="SUBMIT" <INPUT TYPE="SUBMIT" NAME="Add"NAME="Add"

VALUE="Add Item to Cart">VALUE="Add Item to Cart">

<INPUT TYPE="SUBMIT" <INPUT TYPE="SUBMIT" NAME="Delete"NAME="Delete"

VALUE="Delete Item from Cart">VALUE="Delete Item from Cart">

</CENTER></CENTER>



107107

Check BoxesCheck Boxes

FormatFormat– <INPUT TYPE="CHECKBOX" NAME="…" …><INPUT TYPE="CHECKBOX" NAME="…" …>

The The CHECKEDCHECKED attribute makes it initially checked attribute makes it initially checked Name/value pair sent only if checkbox is checked Name/value pair sent only if checkbox is checked

when form is submittedwhen form is submitted

Example codeExample code<P><P>

<INPUT TYPE="CHECKBOX" NAME="noEmail" CHECKED><INPUT TYPE="CHECKBOX" NAME="noEmail" CHECKED>

Check here if you do <I>not</I> want to Check here if you do <I>not</I> want to

get our email newsletterget our email newsletter

Example resultExample result



108108

Radio ButtonsRadio Buttons

FormatFormat– <INPUT TYPE ="RADIO" <INPUT TYPE ="RADIO"

NAME="…" VALUE="…"…> NAME="…" VALUE="…"…> All radio buttons in a group should have same All radio buttons in a group should have same NAMENAME Only one button in a group can be pressed; pressing Only one button in a group can be pressed; pressing

a different one causes previous one to pop outa different one causes previous one to pop out ExampleExample<DL><DL> <DT>Credit Card:<DT>Credit Card: <DD><INPUT TYPE="RADIO" NAME="creditCard" <DD><INPUT TYPE="RADIO" NAME="creditCard" VALUE="visa">VALUE="visa"> VisaVisa <DD><INPUT TYPE="RADIO" NAME="creditCard" <DD><INPUT TYPE="RADIO" NAME="creditCard" VALUE="mastercard">VALUE="mastercard"> Master CardMaster Card ......</DL></DL>



109109

Combo BoxesCombo Boxes

FormatFormat– SELECTSELECT gives gives NAMENAME– OPTIONOPTION gives gives VALUEVALUE

ExampleExampleFavorite language: Favorite language:

<SELECT <SELECT NAMENAME="language">="language">

<OPTION <OPTION VALUEVALUE="c">C="c">C

<OPTION <OPTION VALUEVALUE="c++">C++="c++">C++

<OPTION <OPTION VALUEVALUE="java" SELECTED>Java="java" SELECTED>Java

<OPTION <OPTION VALUEVALUE="lisp">Lisp="lisp">Lisp

<OPTION <OPTION VALUEVALUE="perl">Perl="perl">Perl

<OPTION <OPTION VALUEVALUE="smalltalk">Smalltalk="smalltalk">Smalltalk

</SELECT></SELECT>



110110

List BoxesList Boxes

FormatFormat– Identical to combo boxes, but specify Identical to combo boxes, but specify MULTIPLEMULTIPLE

ExampleExampleLanguages you know:<BR>Languages you know:<BR>

<SELECT NAME="language" MULTIPLE><SELECT NAME="language" MULTIPLE>

<OPTION VALUE="c">C<OPTION VALUE="c">C

<OPTION VALUE="c++">C++<OPTION VALUE="c++">C++

<OPTION VALUE="java" SELECTED>Java<OPTION VALUE="java" SELECTED>Java

<OPTION VALUE="lisp">Lisp<OPTION VALUE="lisp">Lisp

<OPTION VALUE="perl" SELECTED>Perl<OPTION VALUE="perl" SELECTED>Perl

<OPTION VALUE="smalltalk">Smalltalk<OPTION VALUE="smalltalk">Smalltalk

</SELECT></SELECT>



111111

Other Controls and Other Controls and OptionsOptions File upload controlsFile upload controls

– Lets user select a file and send it to the serverLets user select a file and send it to the server Server-side image mapsServer-side image maps

– User clicks on an image and form gets submitted.User clicks on an image and form gets submitted.– Form data gets sent as Form data gets sent as namename.x=.x=x-posx-pos&&namename.y=.y=y-y-

pospos Hidden fieldsHidden fields

– Preset Preset NAMENAME and and VALUEVALUE sent with form submission.. sent with form submission.. Grouping ControlsGrouping Controls

– FIELDSETFIELDSET lets you visually group forms. lets you visually group forms. – Internet Explorer and Netscape 6 only.Internet Explorer and Netscape 6 only.

Tab order controlTab order control– TABINDEXTABINDEX (Internet Explorer and Netscape 6 only) (Internet Explorer and Netscape 6 only)



112112

HTML Form - ExampleHTML Form - Example



113113

HTML Forms - HTML Forms - SummarySummary General processGeneral process

– FORMFORM uses uses ACTIONACTION to specify base URL to specify base URL– Input elements each have a Input elements each have a NAMENAME– User enters valuesUser enters values– When form submitted, URL isWhen form submitted, URL is

baseURL?name1=value1&name2=value2&…baseURL?name1=value1&name2=value2&…– For For POSTPOST requests, name/value pairs sent on requests, name/value pairs sent on

separate line (not part of URL)separate line (not part of URL) TextfieldsTextfields

– <INPUT TYPE="TEXT" …><INPUT TYPE="TEXT" …> Submit ButtonsSubmit Buttons

– <INPUT TYPE="SUBMIT" …><INPUT TYPE="SUBMIT" …>



114114

Break Time – 15 Break Time – 15 minutesminutes



115115

XMLXML

XML: Extensible Markup LanguageXML: Extensible Markup Language– was developed in 1996 by the World Wide Web was developed in 1996 by the World Wide Web

Consortium (W3C) XML working groupConsortium (W3C) XML working group– Designed to carry dataDesigned to carry data– Has all 3 components of SGML:Has all 3 components of SGML:

structure (DTD)structure (DTD) content (XML)content (XML) style (XSL)style (XSL)

XMLDocument

DTD(Optional)

XMLParser Application+

XSL(Optional)



116116

XMLXML

XML documents contain only dataXML documents contain only data– Applications decide how to display the dataApplications decide how to display the data– Files end in the Files end in the .xml.xml extension extension– Highly portableHighly portable– Language for creating markup languagesLanguage for creating markup languages

Can create new tagsCan create new tags Document Type Definition (DTD) filesDocument Type Definition (DTD) files

– Defines grammatical rules for the documentDefines grammatical rules for the document– Used to check the XML document structure againstUsed to check the XML document structure against

Extensible Style Language (XSL) filesExtensible Style Language (XSL) files– Defines additional information for rendering the Defines additional information for rendering the

documentdocument– Possible to search, sort, manipulate and render XML Possible to search, sort, manipulate and render XML

using Extensible Style Language (XSL)using Extensible Style Language (XSL)



117117

XMLXML

XML parserXML parser– Checks an XML document’s syntaxChecks an XML document’s syntax

validating against DTDvalidating against DTD non-validating against DTDnon-validating against DTD

– Support either theSupport either the Document Object Model (DOM) Document Object Model (DOM)

– Build a tree structure containing the XML Build a tree structure containing the XML document’s datadocument’s data

Simple API for XML (SAX)Simple API for XML (SAX)– Process the document and generate eventsProcess the document and generate events

– More info on XML parsers:More info on XML parsers: www.xml.com/xml/pub/Guide/www.xml.com/xml/pub/Guide/

XML_ParsersXML_Parsers



118118

Document Type Document Type DefinitionsDefinitions DTD: DTD: Document Type DefinitionsDocument Type Definitions

– Specify list of element types, attributes and their Specify list of element types, attributes and their relationships to each otherrelationships to each other

– Optional, but recommended for program conformityOptional, but recommended for program conformity– !Element!Element

Element type declaration Element type declaration – d– defines the rules for an efines the rules for an elementelement

#PCDATA: #PCDATA: The element can store parsed character dataThe element can store parsed character data– !ATTLIST!ATTLIST

Defines attributes for an elementDefines attributes for an element #IMPLIED: #IMPLIED: Can assign its own type attribute or ignoreCan assign its own type attribute or ignore #REQUIRED: #REQUIRED: The specified attribute must be declared The specified attribute must be declared

in the documentin the document #FIXED: #FIXED: The Specified attribute must be declared with The Specified attribute must be declared with

given valuegiven value

Document Type Document Type DefinitionsDefinitions

Business letter DTDBusiness letter DTD Declare elements Declare elements

and elements’ and elements’ attributesattributes

#IMPLIED indicates #IMPLIED indicates attribute is attribute is unspecified—unspecified—system gives it a system gives it a valuevalue

CDATA states that CDATA states that attribute contains a attribute contains a stringstring

#PCDATA specifies #PCDATA specifies parsed character parsed character datadata

EMPTY specifies EMPTY specifies element does not element does not contain content contain content (commonly used (commonly used for attributes)for attributes)

1234<!ELEMENT letter (contact+, salutation, paragraph+, 5 closing, signature )>67<!ELEMENT contact (name, address1, address2, city, state,8 zip, phone, flag)>9<!ATTLIST contact type CDATA #IMPLIED>1011<!ELEMENT name (#PCDATA)>12<!ELEMENT address1 (#PCDATA)>13<!ELEMENT address2 (#PCDATA)>14<!ELEMENT city (#PCDATA)>15<!ELEMENT state (#PCDATA)>16<!ELEMENT zip (#PCDATA)>17<!ELEMENT phone (#PCDATA)>18<!ELEMENT flag EMPTY>19<!ATTLIST flag gender (M | F) "M">2021<!ELEMENT salutation (#PCDATA)>22<!ELEMENT closing (#PCDATA)>23<!ELEMENT paragraph (#PCDATA)>24<!ELEMENT signature (#PCDATA)>



120120

Basic XML DocumentsBasic XML Documents

XML elementsXML elements– RootRoot element element

Must be exactly one per XML documentMust be exactly one per XML document Contains all other elements in documentContains all other elements in document Lines preceding the root element are called the Lines preceding the root element are called the

prologprolog

– Container Container elementelement Contains sub-elements (children)Contains sub-elements (children)

– Empty Empty elementelement No matching end tagNo matching end tag In HTML, In HTML, IMGIMG Terminate with forward slash (Terminate with forward slash (//))

121121


XML declaration tells XML declaration tells parser which version parser which version of XMLof XML

Specify DTD file’s Specify DTD file’s name and locationname and location

Attribute's value in Attribute's value in quotesquotes

Empty element uses Empty element uses //

Tags contain data Tags contain data appropriate for tag appropriate for tag namesnames<letter><letter> - - rootroot

<contact type><contact type>

- - containercontainer

<name><name>, , <city>,<city>,

<address1>,<zip><address1>,<zip>

- - sub-elementssub-elements

1<?xml version = "1.0"?>23456<!DOCTYPE letter SYSTEM "letter.dtd">78<letter>910 <contact type = ”to">11 <name>John Doe</name>12 <address1>123 Main St.</address1>13 <address2></address2>14 <city>Anytown</city>15 <state>Anystate</state>16 <zip>12345</zip>17 <phone>555-1234</phone>18 <flag gender = "M"/>19 </contact>2021 <salutation>Dear Sir:</salutation>...31</letter>



122122


Parse by msxml Parse by msxml into tree into tree structurestructure

- or + to - or + to expand/ expand/ collapse childcollapse child

1 1 <?xml version=<?xml version="1.0""1.0"?>?>

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

3 3 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">>

4 4

5 5 

6 6 

7 7

8 8 <html xmlns=<html xmlns="http://www.w3.org/1999/xhtml""http://www.w3.org/1999/xhtml">>

9 9

10 10 <head><title> <head><title>Simple MathML ExampleSimple MathML Example</title></head></title></head>

11 11

1212 <body> <body>

13 13

14 14 <math xmlns = <math xmlns = "http://www.w3.org/1998/Math/MathML""http://www.w3.org/1998/Math/MathML">>

15 15

16 16 <mrow> <mrow>

1717 <mn> <mn>22</mn></mn>

1818 <mo> <mo>++</mo></mo>

1919 <mn> <mn>33</mn></mn>

2020 <mo> <mo>==</mo></mo>

2121 <mn> <mn>55</mn></mn>

2222 </mrow> </mrow>

2323

2424 </math> </math>

2525

2626 </body> </body>

2727 </html></html>

Element mrow behaves like parentheses, which allows the document author to group related elements properly.

MathMMathMLL

1 1 <?xml version=<?xml version="1.0""1.0"?>?>

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

3 3 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">>

4 4 

5 5 

6 6

7 7 <html xmlns=<html xmlns="http://www.w3.org/1999/xhtml""http://www.w3.org/1999/xhtml">>

8 8

9 9 <head><title> <head><title>Algebraic MathML ExampleAlgebraic MathML Example</title></head></title></head>

10 10

11 11 <body> <body>

12 12

13 13 <math xmlns = <math xmlns = "http://www.w3.org/1998/Math/MathML""http://www.w3.org/1998/Math/MathML">>

14 14 <mrow> <mrow>

15 15

16 16 <mrow> <mrow>

17 17 <mn> <mn>33</mn></mn>

18 18 <mo><mo>⁢⁢</mo></mo>

19 19

20 20 <msup> <msup>

21 21 <mi> <mi>xx</mi></mi>

22 22 <mn> <mn>22</mn></mn>

23 23 </msup> </msup>

24 24

25 25 </mrow> </mrow>

26 26

27 27 <mo><mo>++</mo></mo>

28 28 <mi> <mi>xx</mi></mi>

29 29 <mo><mo>--</mo></mo>

30 30

31 31 <mfrac><mfrac>

32 32 <mn><mn>22</mn></mn>

33 33 <mi><mi>xx</mi></mi>

34 34 </mfrac></mfrac>

35 35

3636 <mo>=</mo> <mo>=</mo>

3737 <mn>0</mn> <mn>0</mn>

3838

3939 </mrow> </mrow>

4040 </math> </math>

4141

4242 </body> </body>

4343 </html> </html>

entity reference ⁢ to indicate a multiplication operation without a symbolic representation.

The msup element represents a superscript.

Element mfrac display a fraction.



125125

XHTMLXHTML

XHTML: Extensible Hypertext Markup LanguageXHTML: Extensible Hypertext Markup Language – properly structured XML that corresponds with properly structured XML that corresponds with

traditional HTML, i.e. HTML’s proposed successortraditional HTML, i.e. HTML’s proposed successor– includes HTML4 for backward compatibilityincludes HTML4 for backward compatibility– allows complex documents to be created by allows complex documents to be created by

combining HTML elements with XML’s extensibilitycombining HTML elements with XML’s extensibility Ability to create new elementsAbility to create new elements Example: XHTML document might combine HTML Example: XHTML document might combine HTML

elements with MathML and CML elementselements with MathML and CML elements– allows well formed documentsallows well formed documents

Each XHTML document validated using DTD’sEach XHTML document validated using DTD’s– its features provide structure HTML lacksits features provide structure HTML lacks– uses XML syntaxuses XML syntax

All tags All tags lowercaselowercase and closed and closed



126126

HTML – OK, XHTML - !HTML – OK, XHTML - !OKOK<HTML><HTML><HEAD><HEAD><TITLE>My Title</TITLE><TITLE>My Title</TITLE><body><body></HEAD></HEAD><td><td>It is an acceptable HTML, but It is an acceptable HTML, but an unacceptable XHTMLan unacceptable XHTML

</BODY></BODY>……<table WIDTH=80%> <table WIDTH=80%> Incorrect Incorrect<table width=“80%”> <table width=“80%”> Correct Correct

Test



127127

XHTMLXHTML

Elements must be Properly NestedElements must be Properly Nested Tag names must be in lowercaseTag names must be in lowercase XHTML elements must be closedXHTML elements must be closed Empty elements must be closedEmpty elements must be closed

– Tags without end tag e.g. <br>Tags without end tag e.g. <br> Attribute name must be in Attribute name must be in

lowercaselowercase Attribute value must be quotedAttribute value must be quoted



128128

Properly NestedProperly Nested<b><b><i><i>This text is bold and italicThis text is bold and italic</b></b></i></i>

<b><b><i><i>This text is bold and italicThis text is bold and italic</i></i></b></b>

<ul><ul>

<li>John</li><li>John</li>

<li>Mary<li>Mary

<ul><ul>

<li>Green</li><li>Green</li>

<li>Purple</li><li>Purple</li>

</ul></ul>

<li>Milk</li><li>Milk</li>

</ul> </ul>

Any Error???

</li>



129129

Correct XHTMLCorrect XHTML

<p>This is a paragraph<p>This is a paragraph

<p>This is another paragraph</p><p>This is another paragraph</p>

This is a break<br>This is a break<br>

Here comes a horizontal rule:<hr />Here comes a horizontal rule:<hr />

Here's an image <img src="happy.gif" Here's an image <img src="happy.gif" alt="Happy face" alt="Happy face" //> >



130130

Minimum XHTML Minimum XHTML documentdocument

<!DOCTYPE Doctype goes here><!DOCTYPE Doctype goes here>

<html><html>

<head><head>

<title><title>Title goes hereTitle goes here</title></title> </head></head>

<body><body> Body text goes here Body text goes here </body></body>

</html></html>

1<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" 2 "http://www.w3.org/TR/xhtml1/DTD/frameset.dtd"> 3<html>4567<head>89<meta name = "keywords" content = "Webpage, design, HTML, 10 tutorial, personal, help, index, form, contact, feedback,11 list, links, frame, deitel"/>1213<meta name = "description" content = "This Web site will help 14 you learn the basics of HTML and Webpage design through the 15 use of interactive examples and instruction."/>1617</head>1819<frameset cols = "110,*">20 <frame name = "nav" scrolling = "no" src = "nav.html"/>2122 23 24 <frameset rows = "175,*">25 <frame name = "picture" src = "picture.html" 26 noresize = "noresize"/>27 <frame name = "main" src = "main.html"/>28 </frameset>29

Example of XHTML document which has been Example of XHTML document which has been validated by W3C’s validated by W3C’s HTML validation serviceHTML validation service at at validator.w3.orgvalidator.w3.org

1.1 1.1 <simple><simple> xhtml tag xhtml tag

34 <a href = "http://www.microsoft.com/">Microsoft

35 Web-Site</a></p>

36 </noframes>

37</frameset>

38

39 <simple xmlns:ct = "http://www.deitel.com">

40 <ct:contact>

41 <ct:LastName>Black</ct:LastName>

42 <ct:FirstName>John</ct:FirstName>

43 </ct:contact>

44

45 <ct:contact>

46 <ct:LastName>Green</ct:LastName>

47 <ct:FirstName>Sue</ct:FirstName>

48 </ct:contact>

49 </simple>

50

51</html>

30 <noframes>31 <p>This page uses frames, but your browser does not 32 support them.</p>33 <p>Get Internet Explorer 5 at the



133133

3 Document Type 3 Document Type DefinitionsDefinitions XHTML 1.0 StrictXHTML 1.0 Strict

– <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

– Clean markup, use with CSSClean markup, use with CSS XHTML 1.0 TransitionalXHTML 1.0 Transitional

– <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">transitional.dtd">

– More loose markup (allow old tag), commonly useMore loose markup (allow old tag), commonly use XHTML 1.0 FramesetXHTML 1.0 Frameset

– <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">frameset.dtd">

– Partition your browser into several framesPartition your browser into several frames



134134

XHTML 1.0XHTML 1.0 Reference: W3.org



135135

Converting your web Converting your web sites to XHTMLsites to XHTML CreateCreate a prolog for every applicable a prolog for every applicable

documentdocument– DOCTYPE declarationDOCTYPE declaration

ChangeChange tag and attribute names to lowercase tag and attribute names to lowercase– XHTML is case sensitiveXHTML is case sensitive

InsertInsert quotation marks to all attribute values quotation marks to all attribute values– Very time-consuming jobVery time-consuming job

RepairRepair empty element tags empty element tags– <br / ><br / >

ValidateValidate the web site documents the web site documents– http://validate.w3.orghttp://validate.w3.org



136136

HTML TidyHTML TidyFixed mistakes automatically!Let’s see the demo now.



137137

ReferencesReferences

Deitel: Chapter 4, 5, 20Deitel: Chapter 4, 5, 20 CWP: Chapter 1, 2, 3, 4, 18CWP: Chapter 1, 2, 3, 4, 18 HTML TutorialHTML Tutorial W3 SchoolsW3 Schools ButtonsButtons

http://www.rewnet.com/bbb/http://www.graphics-4free.com/http://coolgraphics.com/gallery/

http://http://www.wilrose.com/downloads/HTML_Tutorial.pdfwww.wilrose.com/downloads/HTML_Tutorial.pdf

Thank you for patience!Thank you for patience!

Markup Languages INE2720 Web Application Software Development Essential Materials.

Documents

Transcript of Markup Languages INE2720 Web Application Software Development Essential Materials.