COP 3813 Intro to Internet Computing Prof. Roy Levow Lecture 2

XHTML  Extensible HyperText Markup Language –Used to code Web pages –Specifies  Content  Structure –Does not specify  Format

XHTML Standard  Standard (recommendation) developed by –World Wide Web Consortium – –Currently version 1.1 –Version 2 under review –Vendors sometimes vary from standard

XHTML Format  XHTML –Plain text –Free form –Content  Text  Links –Tags  Specif structure  Bounded by  Bounded by

Simple Example  Simple web page  Control information, lines 1-3  Comments, lines 5-6 –Start with <!— –End   Structure tags  One line of text –examples\ch04\main.html examples\ch04\main.html

XHTML Tags  Specify content characteristics  Generally paired –Bound a region –Start with –Start with –End with –End with –Sometimes end marker is omitted

W3C Validation Service  Validate structure of a document – –Can specify a  url to validate  Upload a file to validate

Basic Components  Headers  Links  Images  Special characters and line breaks  Unordered lists (bullets)  Ordered lists  Nested lists

Headers and Links  Six levels of headers, h1 – h 6 –examples\ch04\header.html examples\ch04\header.html  Links cause browser to load another url, a page or the like –examples\ch04\links.html examples\ch04\links.html –examples/ch04/contact.html examples/ch04/contact.html

Images  Load an image file –Can also resize the image –May specify text to display if image is not displayed  examples\ch04\picture.html examples\ch04\picture.html –May be combined with links so clicking image activates link  examples\ch04\nav.html examples\ch04\nav.html

Special Chareacters Line Breaks  Special characters –Often used when character has special xhtml meaning or is not on keyboard –Coded &xx;  Examples: < > & –Line break forced by  End of header  Paragraph  Paragraph  Line break tag  Line break tag

Font Control  Additional tags control font and appearance to text –Bold –Bold –Strikethrough –Strikethrough –examples\ch04\contact2.html examples\ch04\contact2.html

Unordered Lists  Start list with  Start list with  End with  End with  Each list item bounded by – –  examples\ch04\links2.html examples\ch04\links2.html

Ordered Lists  “Numbered” items – – –Can specify type of numbering  A more advanced feature –examples\ch04\list.html examples\ch04\list.html

Intermediate Features  Tables  Forms –Fill in and submit  Internal linking  Image maps  Meta elements  Framesets

Tables  Contain rows and columns of cells –Cells for columns are nested in row –Table can also contain header and footer rows –examples\ch05\table1.html examples\ch05\table1.html  Rectangular group of cells can be treated as a single cell –examples\ch05\table2.html examples\ch05\table2.html

Forms  Fill in and submit –Submitted form processed by server –Requires “server-side” application program (later in course) –Specify display items and fields by name –Specify server application to process data –examples\ch05\form.html examples\ch05\form.html

More Form Features  Forms can contain –Text area –Checkbox –Reset button –Hidden fields –examples\ch05\form2.html examples\ch05\form2.html

More Form Features 2  More components –Radio buttons –Menus –examples\ch05\form3.html examples\ch05\form3.html

Internal Links and Maps  Internal links take you to a specific part of the page –examples\ch05\links.html examples\ch05\links.html  Maps allow you to link to different locations by clicking parts of an image –examples\ch05\picture.html examples\ch05\picture.html

meta Elements  examples\ch05\main.html examples\ch05\main.html

Frame Sets  examples\ch05\index.html examples\ch05\index.html  examples\ch05\index2.html examples\ch05\index2.html