COP 3813 Intro to Internet Computing Prof Roy

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

XHTML u Extensible Language Hyper. Text Markup – Used to code Web pages – Specifies u Content u Structure – Does not specify u Format

Vairants u Three versions – Strict: complete compliance with newest requirements – Transitional: allows some old features but not frames – Frameset: transitional plus frames

Strict XHTML u Major differences with HTML – XHTML elements must be properly nested – XHTML documents must be wellformed – Tag names must be in lowercase – All XHTML elements must be closed

XHTML Standard u Standard (recommendation) developed by – World Wide Web Consortium – http: //www. w 3 c. org – Currently version 1. 1 – Version 2 under review – Vendors sometimes vary from standard

XHTML Format u XHTML – Plain text – Free form – Content u Text u Links – Tags u Specify structure u Bounded by <…>

Simple Example u Simple web page u Control information, lines 1 -3 u Comments, lines 5 -6 – Start with <!— – End u Structure tags u One line of text – examplesch 04main. html

XHTML Tags u Specify content characteristics u Generally paired – Bound a region – Start with <xx> – End with </xx> – If tag is self-contained, use <xx />

W 3 C Validation Service u Validate structure of a document – http: //validator. w 3. org – Can specify a u url to validate u Upload a file to validate

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

Headers and Links u Six levels of headers, h 1 – h 6 – examplesch 04header. html u Links cause browser to load another url, a page or the like – examplesch 04links. html – examples/ch 04/contact. html

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

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

Font Control u Additional tags control font and appearance to text – Bold <strong> u preferred to old <b> – Strikethrough <del> – examplesch 04contact 2. html

Unordered Lists u Start list with <ul> u End with </ul> u Each list item bounded by – <li> – </li> u examplesch 04links 2. html

Ordered Lists u “Numbered” items – <ol> – Can specify type of numbering u. A more advanced feature – examplesch 04list. html

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

Tables u Contain rows and columns of cells – Cells for columns are nested in row – Table can also contain header and footer rows – examplesch 05table 1. html u Rectangular group of cells can be treated as a single cell – examplesch 05table 2. html

Forms u 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 – examplesch 05form. html

More Form Features u Forms can contain – Text area – Checkbox – Reset button – Hidden fields – examplesch 05form 2. html

More Form Features 2 u More components – Radio buttons – Menus – examplesch 05form 3. html

Internal Links and Maps u Internal links take you to a specific part of the page – examplesch 05links. html u Maps allow you to link to different locations by clicking parts of an image – examplesch 05picture. html

meta Elements u Provide information about web page or direction to browser u Some designed for use by search engines, but this is often abused u Format <meta name=“id” attrib=“…”> u examplesch 05main. html

Frame Sets u Allow content to be loaded from different files into different portions of a web page u CSS provides more powerful alternative u examplesch 05index. html u examplesch 05index 2. html