Transcript ppt - FAU College of Engineering

COP 3813
Intro to Internet
Computing
Prof. Roy Levow
Lecture 2
XHTML
 Extensible
Language
HyperText Markup
– Used to code Web pages
– Specifies
 Content
 Structure
– Does not specify
 Format
Vairants
 Three
versions
– Strict: complete compliance with newest
requirements
– Transitional: allows some old features
but not frames
– Frameset: transitional plus frames
Strict XHTML
 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
 Standard
(recommendation)
developed by
– World Wide Web Consortium
– http://www.w3c.org
– Currently version 1.1
– Version 2 under review
– Vendors sometimes vary from standard
XHTML Format
 XHTML
– Plain text
– Free form
– Content
 Text
 Links
– Tags
 Specify
structure
 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
XHTML Tags
 Specify
content characteristics
 Generally paired
– Bound a region
– Start with <xx>
– End with </xx>
– If tag is self-contained, use <xx />
W3C Validation Service
 Validate
structure of a document
– http://validator.w3.org
– 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
 Links
cause browser to load another
url, a page or the like
– examples\ch04\links.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
– May be combined with links so clicking
image activates link
 examples\ch04\nav.html
Special Chareacters
Line Breaks
 Special
characters (Entities)
– Often used when character has special
xhtml meaning or is not on keyboard
– Coded &xx;
 Examples:
&lt; &gt; &nbsp; &amp;
– Line break forced by
 End
of header
 Paragraph <p>
 Line break tag <br>
Font Control
 Additional
tags control font and
appearance to text
– Bold <strong>
 preferred
to old <b>
– Strikethrough <del>
– examples\ch04\contact2.html
Unordered Lists
 Start
list with <ul>
 End with </ul>
 Each list item bounded by
– <li>
– </li>
 examples\ch04\links2.html
Ordered Lists
 “Numbered”
items
– <ol>
– Can specify type of numbering
A
more advanced feature
– 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
 Rectangular
group of cells can be
treated as a single cell
– 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
More Form Features
 Forms
can contain
– Text area
– Checkbox
– Reset button
– Hidden fields
– examples\ch05\form2.html
More Form Features 2
 More
components
– Radio buttons
– Menus
– examples\ch05\form3.html
Internal Links and Maps
 Internal
links take you to a specific
part of the page
– examples\ch05\links.html
 Maps
allow you to link to different
locations by clicking parts of an
image
– examples\ch05\picture.html
meta Elements
 Provide
information about web page
or direction to browser
 Some designed for use by search
engines, but this is often abused
 Format
<meta name=“id” attrib=“…”>
 examples\ch05\main.html
Frame Sets
 Allow
content to be loaded from
different files into different portions
of a web page
 CSS provides more powerful
alternative
 examples\ch05\index.html
 examples\ch05\index2.html