9/11/2007

Outline

„ History „ Syntax and Structure Lecture 1: XHTML „ Text Presentation, Images, and Links (eXtensible Hypertext Markup „ Lists and Tables Language) „ Forms Wendy Liu „ Frames „ XHTML Document Validation CSC309F – Fall 2007

2

XHTML Standards

„ XHTML 1.0 „ Redefinition of HTML 4.01 using XML rather than SGML „ Strict „ No deprecated elements „ www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd „ Transitional „ Supports deprecated elements and attributes History „ www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd „ Frameset „ Transitional + support for frames „ www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd „ XHTML 1.1 „ Modularization of XHTML 1.0 Strict „ XHTML 2 „ Working draft „ More structuring tags, navigation lists „ For this course: v1.1 + frames

4

Basic Syntax

„ Tags are the fundamental syntactic units of HTML „ A pair of tags defines a container „ Content is what’s between the tags „ Container and its content defines an element „ All elements must have closing tags Syntax and Structure

This is the content of the element.

(Empty content tag) „ Tags are case sensitive (lower case) Illegal Correct „ Elements must be properly nested Illegal Correct „ Attribute values must always be quoted

6

1 9/11/2007

Document Structure „ Must contain a „ Better: „ Optional elements Content of the document … „ „

7 8

„ Provide additional information of a document „ Relationship information „ E.g. Descriptions, keywords for search engines, „ Some uses refresh rates „ Rendered by user agents (browsers) „ E.g. a tool-bar with a drop-down menu 23 Oct 2007 14:25:27 GMT"> „ Efforts underway to standardize document meta-data

9 10

Inline versus Block Elements

„ Displayable content „ Block-level elements „ Text, images, graphics, etc. „ Those appear in „ Style attributes have been deprecated in „ Begin on new line favour of style sheets „ Contains other block-level or inline „ Contains two types of elements „ E.g. heading, paragraph „ Inline „ Inline elements „ Block-level „ The others, a.k.a. text-level elements „ Do not start a new line „ Contain other inline elements „ E.g. „ Block elements cannot be nested in inline elements 11 12

2 9/11/2007

Paragraphs, Lines, and Phrase „

organizes text into a paragraph „
forces a line break „

---

draws a line below Text Presentation, Images, and „ Phrase elements add structural information to text Links fragments (or inline text) „ emphasis „ more emphasis, usually bold „ fragment of computer code „ defining instance „ citation to another source „ sample output from programs „ text entered by the user „ instance of a variable from a program „ abbreviated form, such as WWW „ indicates an acronym, such as laser

14

Fancy Format Headings

„ Subscripts and superscripts „ Six levels in decreasing order of importance „ E = mc² „

to

„ H₂O „ Visual browsers usually render more important „ Inserts and deletions headings in larger fonts „ „ Headings do not surround their section, only „ the titles „ Use

for the section body „ Pre-formatted text „

 „ Keeps spaces and line breaks as is
15 16
 and  
 and  Example „ Offer a generic mechanism for adding 
 
Forest elephants
 structure to documents 
In this section, we discuss the lesser „ Used for style purposes known forest elephants. „ Attributes ...this section continues... „ class 
 
Habitat
 „ id 
Forest elephants do not live in „ 
 trees...this subsection continues... 
 „ Define a generic block element 
 „  „ Define a generic inline element
17 18
3 9/11/2007
Images  Hypertext Links  „ Attributes „ Anchor element  „ src – insert images „ Pointer to other resource „ alt – insert alternative text (required by XHTML) „ UofT „ Non-graphical browsers „ Anchor within a document „ Browsers with images turned off „   alt = "Picture of comets" /> go to chapter 1
19 20
Lists
„ Lists may be nested „ Unordered lists 
 
 
 Cessna Skyhawk 
 Lists and Tables 
 Beechcraft Bonanza 
 
 Piper Cherokee 
 
„ Ordered lists 
22
Tables „ Display tables of data or control the layout 
 Forms  Means to collect information from  Web client  … 
 
 Fruit Juice Drinks 
 
 
 
 
 Apple 
 
 Orange 
 Screwdriver 
 
 
 
 Breakfast 
 
 0 
 1 
 
 0 
 „ Attributes for  and  „ colspan and rowspan 23
4 9/11/2007
Forms Example of a Form „ Gather user input „ Communicate information from a browser to server „ Control or widget objects „ Single-line or multi-line text collections „ Checkboxes „ Radio buttons „ Menus „ Submit, Reset, and plain buttons „ Each control has a value „ Form data refers to the values of all controls in a form „ On submit „ Encode form data and send to the Web server
25 26
 
„ All controls appear in its content „ Used for text, passwords, checkboxes, radio „ Attributes buttons, reset and submit buttons „ action „ Attributes „ Required „ type „ URL of the application on the server to be called on submit „ Required „ method „ Choose from „ get (default) or post „ text, password, checkbox, radio, reset, submit „ name  „ value „ Required for checkboxes and radio buttons „ Use  to encapsulate the control and its label
27 28
Action Buttons 
„ Reset „ Specifies a menu „ „ Clear all controls to initial states Attributes „ name „ Submit „ size „ Code all control values into a string and send to „ For display purpose server „ 1 – drop down box (default) „ > 1 – scrolled list „ Request server to execute application specified in „ multiple the action attribute „ Allows multiple selection „ Plain „ 
 „ Value of an element of the list „ Used to choose an action „ No tags may be embedded
29 30
5 9/11/2007
</p><p>„ Multi-line text area „ Attributes „ rows Frames „ cols „ name „ Has implicit scrolling Multi-view presentation of documents „ Can add default text</p><p>31</p><p>Frames Example Frames</p><p>„ Allow authors to display multiple documents independently „ In particular, an index page can be kept in parallel to a main content page „ A frameset element takes the place of the body element in a document „ Cannot have both frameset and body element</p><p>33 34</p><p><frameset> Frameset Example Code</p><p><!DOCTYPE html PUBLIC "-//w3c//DTD XHTML 1.0 Frameset//EN“ <?xml version= "1.0" encoding= "UTF-8" ?> "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd"> <!DOCTYPE html PUBLIC "-//w3c//DTD XHTML 1.0 Frameset//EN" "www.w3.org/TR/xhtml1/DTD/xhtml1- frameset.dtd"> „ Attributes <html xmlns = "http://www.w3.org/1999/xhtml"> <head> „ rows: defines number of rows and their <title>frames example</title> dimension </head> <frameset cols=“50%, 50%"> „pixel, percentage, or asterisk <frameset rows=“50%, *"> <frame src=“A.html"> „ cols: similarly <frame src=“B.html"> </frameset> „ Must include either or both of the attributes <frame src=“C.html"> A.html </frameset> C.html „ </html> Can be nested B.html „ Content specified by <frame></p><p>35 36</p><p>6 9/11/2007</p><p>Frameset Questions Answers „ What do they look like? „ <frameset rows="50%, 50%"> „ Divides the vertical space in half „ <frameset rows="50%, 50%"> „ <frameset rows="30%,70%" cols="33%,34%,33%"> „ Creates a 2 by 3 grid „ <frameset rows="30%,70%” „ <frameset cols="1*,250,3*"> cols="33%,34%,33%"> „ Divides the horizontal space to 3 parts „ <frameset cols="1*,250,3*"> „ Middle frame has a width of 250px „ Left one gets 25% of the remainder, and right one gets 75% „ <frameset rows="30%,400,*,2*"> „ <frameset rows="30%,400,*,2*"> „ First one takes 30% „ Second one takes 400px „ Third one takes 1/3 of the remainder „ Last one takes 2/3 of the remainder</p><p>37 38</p><p><frame> Linking Controls „ The order matters „ Frames have names „ Attributes „ <frame name=“foo-frame“ /> „ <frame name=“foo-frame" src=“original.html"/> „ name „ Links can have a "target" „String, to set target for links „ <a href=“new.html" target=“foo-frame"> „ src „ Pre-defined and reserved targets „URL, source of the frame content „ _blank (new window) „ frameborder „ _self (same frame, default) „1 (default) or 0 „ _parent (the parent frameset) „ scrolling „ _top (the full body of the browser window) „yes, no, or auto (default) 39 40</p><p>XHTML Validation Service</p><p>„ http://validator.w3.org/file-upload.html</p><p>XHTML Document Validation</p><p>42</p><p>7 9/11/2007</p><p>Differences between XHTML and HTML</p><p>Review on your own</p><p>8</p>                                                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js" integrity="sha512-aVKKRRi/Q/YV+4mjoKBsE4x3H+BkegoM/em46NNlCqNTmUYADjBbeNefNxYV7giUp0VxICtqdrbqU7iVaeZNXA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <script src="/js/details118.16.js"></script>
    <script>
        var sc_project = 11552861;
        var sc_invisible = 1;
        var sc_security = "b956b151";
    </script>
    <script src="https://www.statcounter.com/counter/counter.js" async></script>
    <noscript><div class="statcounter"><a title="Web Analytics" href="http://statcounter.com/" target="_blank"><img class="statcounter" src="//c.statcounter.com/11552861/0/b956b151/1/" alt="Web Analytics"></a></div></noscript>
</body>
</html>