COP 3813COP 3813Intro to Internet Intro to Internet

ComputingComputing

Prof. Roy LevowProf. Roy Levow

Lecture 2Lecture 2

XHTMLXHTML

Extensible HyperText Markup Extensible HyperText Markup LanguageLanguage– Used to code Web pagesUsed to code Web pages– SpecifiesSpecifies

ContentContentStructureStructure

– Does not specifyDoes not specifyFormatFormat

VairantsVairants

Three versionsThree versions– Strict: complete compliance with newest Strict: complete compliance with newest

requirementsrequirements– Transitional: allows some old features Transitional: allows some old features

but not framesbut not frames– Frameset: transitional plus framesFrameset: transitional plus frames

Strict XHTMLStrict XHTML

Major differences with HTMLMajor differences with HTML– XHTML elements must be XHTML elements must be properly properly

nestednested – XHTML documents must be XHTML documents must be well-well-

formedformed – Tag names must be in Tag names must be in lowercaselowercase – All XHTML elements must be All XHTML elements must be closedclosed

XHTML StandardXHTML Standard

Standard (recommendation) Standard (recommendation) developed by developed by – World Wide Web ConsortiumWorld Wide Web Consortium– http://www.w3c.orghttp://www.w3c.org– Currently version 1.1Currently version 1.1– Version 2 under reviewVersion 2 under review– Vendors sometimes vary from standardVendors sometimes vary from standard

XHTML FormatXHTML Format

XHTMLXHTML– Plain textPlain text– Free formFree form– ContentContent

TextTextLinksLinks

– TagsTagsSpecify structureSpecify structureBounded by <…>Bounded by <…>

Simple ExampleSimple Example

Simple web pageSimple web page Control information, lines 1-3Control information, lines 1-3 Comments, lines 5-6Comments, lines 5-6

– Start with <!—Start with <!—– End End

Structure tagsStructure tags One line of textOne line of text

– examples\ch04\main.htmlexamples\ch04\main.html

XHTML TagsXHTML Tags

Specify content characteristicsSpecify content characteristics Generally pairedGenerally paired

– Bound a regionBound a region– Start with <xx>Start with <xx>– End with </xx>End with </xx>– If tag is self-contained, use <xx />If tag is self-contained, use <xx />

W3C Validation ServiceW3C Validation Service

Validate structure of a documentValidate structure of a document– http://validator.w3.orghttp://validator.w3.org– Can specify a Can specify a

url to validateurl to validateUpload a file to validateUpload a file to validate

Basic ComponentsBasic Components

HeadersHeaders LinksLinks ImagesImages Special characters and line breaksSpecial characters and line breaks Unordered lists (bullets)Unordered lists (bullets) Ordered listsOrdered lists Nested listsNested lists

Headers and LinksHeaders and Links

Six levels of headers, h1 – h 6Six levels of headers, h1 – h 6– examples\ch04\header.htmlexamples\ch04\header.html

Links cause browser to load another Links cause browser to load another url, a page or the likeurl, a page or the like– examples\ch04\links.htmlexamples\ch04\links.html– examples/ch04/contact.htmlexamples/ch04/contact.html

ImagesImages

Load an image fileLoad an image file– Can also resize the imageCan also resize the image– May specify text to display if image is May specify text to display if image is

not displayednot displayedexamples\ch04\picture.htmlexamples\ch04\picture.html

– May be combined with links so clicking May be combined with links so clicking image activates linkimage activates linkexamples\ch04\nav.htmlexamples\ch04\nav.html

Special ChareactersSpecial ChareactersLine BreaksLine Breaks

Special characters Special characters – Often used when character has special Often used when character has special

xhtml meaning or is not on keyboardxhtml meaning or is not on keyboard– Coded &xx;Coded &xx;

Examples: &lt; &gt; &nbsp; &amp;Examples: &lt; &gt; &nbsp; &amp;

– Line break forced by Line break forced by End of headerEnd of headerParagraph <p>Paragraph <p>Line break tag <br> Line break tag <br>

Font ControlFont Control

Additional tags control font and Additional tags control font and appearance to textappearance to text– Bold <strong>Bold <strong>– Strikethrough <del>Strikethrough <del>

– examples\ch04\contact2.htmlexamples\ch04\contact2.html

Unordered ListsUnordered Lists

Start list with <ul>Start list with <ul> End with </ul>End with </ul> Each list item bounded byEach list item bounded by

– <li><li>– </li></li>

examples\ch04\links2.htmlexamples\ch04\links2.html

Ordered ListsOrdered Lists

““Numbered” itemsNumbered” items– <ol><ol>– Can specify type of numberingCan specify type of numbering

A more advanced featureA more advanced feature

– examples\ch04\list.htmlexamples\ch04\list.html

Intermediate FeaturesIntermediate Features

TablesTables FormsForms

– Fill in and submitFill in and submit Internal linkingInternal linking Image mapsImage maps Meta elementsMeta elements FramesetsFramesets

TablesTables

Contain rows and columns of cellsContain rows and columns of cells– Cells for columns are nested in rowCells for columns are nested in row– Table can also contain header and Table can also contain header and

footer rowsfooter rows– examples\ch05\table1.htmlexamples\ch05\table1.html

Rectangular group of cells can be Rectangular group of cells can be treated as a single celltreated as a single cell– examples\ch05\table2.htmlexamples\ch05\table2.html

FormsForms

Fill in and submitFill in and submit– Submitted form processed by serverSubmitted form processed by server– Requires “server-side” application Requires “server-side” application

program (later in course)program (later in course)– Specify display items and fields by nameSpecify display items and fields by name– Specify server application to process Specify server application to process

datadata– examples\ch05\form.htmlexamples\ch05\form.html

More Form FeaturesMore Form Features

Forms can containForms can contain– Text areaText area– CheckboxCheckbox– Reset buttonReset button– Hidden fieldsHidden fields– examples\ch05\form2.htmlexamples\ch05\form2.html

More Form Features 2More Form Features 2

More componentsMore components– Radio buttonsRadio buttons– MenusMenus– examples\ch05\form3.htmlexamples\ch05\form3.html

Internal Links and MapsInternal Links and Maps

Internal links take you to a specific Internal links take you to a specific part of the pagepart of the page– examples\ch05\links.htmlexamples\ch05\links.html

Maps allow you to link to different Maps allow you to link to different locations by clicking parts of an locations by clicking parts of an imageimage– examples\ch05\picture.htmlexamples\ch05\picture.html

meta Elementsmeta Elements

examples\ch05\main.htmlexamples\ch05\main.html

Frame SetsFrame Sets

examples\ch05\index.htmlexamples\ch05\index.html

examples\ch05\index2.htmlexamples\ch05\index2.html