CSI 3140 WWW Structures, Techniques and Standards. Markup Languages: XHTML 1.0

Similar documents
CHAPTER 2 MARKUP LANGUAGES: XHTML 1.0

HTML TAG SUMMARY HTML REFERENCE 18 TAG/ATTRIBUTE DESCRIPTION PAGE REFERENCES TAG/ATTRIBUTE DESCRIPTION PAGE REFERENCES MOST TAGS

CSI 3140 WWW Structures, Techniques and Standards. Representing Web Data: XML

Index. CSS directive, # (octothorpe), intrapage links, 26

1.264 Lecture 12. HTML Introduction to FrontPage

Announcements. Paper due this Wednesday

HTML Summary. All of the following are containers. Structure. Italics Bold. Line Break. Horizontal Rule. Non-break (hard) space.

Certified HTML5 Developer VS-1029

COPYRIGHTED MATERIAL. Contents. Chapter 1: Creating Structured Documents 1

Certified HTML Designer VS-1027

introduction to XHTML

Internet publishing HTML (XHTML) language. Petr Zámostný room: A-72a phone.:

(1) I (2) S (3) P allow subscribers to connect to the (4) often provide basic services such as (5) (6)

Advanced HTML Scripting WebGUI Users Conference

Tutorial 1 Getting Started with HTML5. HTML, CSS, and Dynamic HTML 5 TH EDITION

Chapter 2:- Introduction to XHTML. Compiled By:- Sanjay Patel Assistant Professor, SVBIT.

HTML. HTML Evolution

Deccansoft Software Services

Advanced Web Programming C2. Basic Web Technologies

Chapter 1 Self Test. LATIHAN BAB 1. tjetjeprb{at}gmail{dot}com. webdesign/favorites.html :// / / / that houses that information. structure?

XHTML & CSS CASCADING STYLE SHEETS

HTML Overview. With an emphasis on XHTML

Chapter 4. Introduction to XHTML: Part 1

Motivation (WWW) Markup Languages (defined). 7/15/2012. CISC1600-SummerII2012-Raphael-lec2 1. Agenda

HTML and CSS COURSE SYLLABUS

As we design and build out our HTML pages, there are some basics that we may follow for each page, site, and application.

CMPT 165 Unit 2 Markup Part 2

5/19/2015. Objectives. JavaScript, Sixth Edition. Introduction to the World Wide Web (cont d.) Introduction to the World Wide Web

CS144 Notes: Web Standards

HTML. Hypertext Markup Language. Code used to create web pages

HTML HTML/XHTML HTML / XHTML HTML HTML: XHTML: (extensible HTML) Loose syntax Few syntactic rules: not enforced by HTML processors.

HTML & XHTML Tag Quick Reference

1. Please, please, please look at the style sheets job aid that I sent to you some time ago in conjunction with this document.

2.1 Origins and Evolution of HTML

Html basics Course Outline

HTTP and HTML. We will use HTML as a frontend to our webapplications, therefore a basic knowledge of HTML is required, especially in forms.

COPYRIGHTED MATERIAL. Contents. Introduction. Chapter 1: Structuring Documents for the Web 1

HTML Overview formerly a Quick Review

Website Development with HTML5, CSS and Bootstrap

Part 1: HTML Language HyperText Make-up Language

Introduction to Web Technologies

Chapter 10: Understanding the Standards

(from Chapter 5 & 25.6 of the text)

History of the Internet. The Internet - A Huge Virtual Network. Global Information Infrastructure. Client Server Network Connectivity

HTML HTML. Chris Seddon CRS Enterprises Ltd 1

HTML BEGINNING TAGS. HTML Structure <html> <head> <title> </title> </head> <body> Web page content </body> </html>

Programmazione Web a.a. 2017/2018 HTML5

Chapter 3 Style Sheets: CSS

Chapter 5. Introduction to XHTML: Part 2

Name Related Elements Type Default Depr. DTD Comment

The [HTML] Element p. 61 The [HEAD] Element p. 62 The [TITLE] Element p. 63 The [BODY] Element p. 66 HTML Elements p. 66 Core Attributes p.

Copyright 2008 Pearson Education, Inc. Publishing as Pearson Addison-Wesley. Chapter 2 Introduction to XHTML

Web Design and Development ACS Chapter 3. Document Setup

2.1 Origins and Evolution of HTML. 2.3 HTML Document Structure

HTML. Mohammed Alhessi M.Sc. Geomatics Engineering. Internet GIS Technologies كلية اآلداب - قسم الجغرافيا نظم المعلومات الجغرافية

Oliver Pott HTML XML. new reference. Markt+Technik Verlag

Document Object Model. Overview

Markup Language. Made up of elements Elements create a document tree

Developing a Basic Web Page

Chapter 1 Getting Started with HTML 5 1. Chapter 2 Introduction to New Elements in HTML 5 21

XML: Introduction. !important Declaration... 9:11 #FIXED... 7:5 #IMPLIED... 7:5 #REQUIRED... Directive... 9:11

Structured documents

Accessibility of EPiServer s Sample Templates

Bridges To Computing

Review of HTML. Chapter Pearson. Fundamentals of Web Development. Randy Connolly and Ricardo Hoar

Intro to html. --- define every element, attribute, and entity along with the rules for their use

A Brief Introduction to HTML

Table Basics. The structure of an table

recall: a Web page is a text document that contains additional formatting information in the HyperText Markup Language (HTML)

Module 2 (III): XHTML

GRAPHIC WEB DESIGNER PROGRAM


Text and Layout. Digital Multimedia, 2nd edition Nigel Chapman & Jenny Chapman Chapter 11. This presentation 2004, MacAvon Media Productions

Table-Based Web Pages

1/6/ :28 AM Approved New Course (First Version) CS 50A Course Outline as of Fall 2014

A HTML document has two sections 1) HEAD section and 2) BODY section A HTML file is saved with.html or.htm extension

HTML: The Basics & Block Elements

Objectives. Introduction to HTML. Objectives. Objectives

Summary 4/5. (contains info about the html)

CSC 121 Computers and Scientific Thinking

Web Development IB PRECISION EXAMS

Duke Library Website Preliminary Accessibility Assessment

INFS 2150 / 7150 Intro to Web Development / HTML Programming

CS 350 COMPUTER/HUMAN INTERACTION. Lecture 6

Fundamentals: Client/Server

HTML CS 4640 Programming Languages for Web Applications

Announcements. 1. Class webpage: Have you been reading the announcements? Lecture slides and coding examples will be posted

Islamic University of Gaza Faculty of Engineering Department of Computer Engineering ECOM Advanced Internet Technology Lab.

IMY 110 Theme 11 HTML Frames

IT350 Web and Internet Programming. XHTML Tables and Forms (from Chapter 4 of the text 4 th edition Chapter 2 of the text 5 th edition)

Management Information Systems

Web Publishing Basics I

HTML & CSS. SWE 432, Fall 2017 Design and Implementation of Software for the Web

LESSON LEARNING TARGETS

COPYRIGHTED MATERIAL. The Basics of HTML. What Is the World Wide Web?

Aleph - Web Opac Accessibility. Accessibility in Aleph500 Web OPAC

CIS 228 (Fall 2011) Exam 1, 9/27/11

Brief Intro to HTML. CITS3403 Agile Web Development. 2018, Semester 1

A Balanced Introduction to Computer Science, 3/E

Announcements. 1. Class webpage: Have you been reading the announcements? Lecture slides and coding examples will be posted

Transcription:

CSI 3140 WWW Structures, Techniques and Standards Markup Languages: XHTML 1.0

HTML Hello World! Document Type Declaration Document Instance Guy-Vincent Jourdan :: CSI 3140 :: based on Jeffrey C. Jackson s slides 2

HTML Hello World Guy-Vincent Jourdan :: CSI 3140 :: based on Jeffrey C. Jackson s slides 3

HTML Tags and Elements Any string of the form < > is a tag All tags in document instance of Hello World are either end tags (begin with </) or start tags (all others) Tags are an example of markup, that is, text treated specially by the browser Non-markup text is called character data and is normally displayed by the browser String at beginning of start/end tag is an element name Everything from start tag to matching end tag, including tags, is an element Content of element excludes its start and end tags Guy-Vincent Jourdan :: CSI 3140 :: based on Jeffrey C. Jackson s slides 4

HTML Element Tree Root Element Guy-Vincent Jourdan :: CSI 3140 :: based on Jeffrey C. Jackson s slides 5

HTML Root Element Document type declaration specifies name of root element: <!DOCTYPE html Root of HTML document must be html XHTML 1.0 (standard we will follow) requires that this element contain the xml namespace xmlns attribute specification (name/value pair) Guy-Vincent Jourdan :: CSI 3140 :: based on Jeffrey C. Jackson s slides 6

HTML head and body Elements The body element contains information displayed in the browser client area The head element contains information used for other purposes by the browser: title (shown in title bar of browser window) scripts (client-side programs) style (display) information etc. Guy-Vincent Jourdan :: CSI 3140 :: based on Jeffrey C. Jackson s slides 7

HTML History 1990: HTML invented by Tim Berners-Lee 1993: Mosaic browser adds support for images, sound, video to HTML 1994-~1997: Browser wars between Netscape and Microsoft, HTML defined operationally by browser support ~1997-present: Increasingly, World-Wide Web Consortium (W3C) recommendations define HTML Guy-Vincent Jourdan :: CSI 3140 :: based on Jeffrey C. Jackson s slides 8

HTML Versions HTML 4.01 (Dec 1999) syntax defined using Standard Generalized Markup Language (SGML) XHTML 1.0 (Jan 2000) syntax defined using Extensible Markup Language (XML) Primary differences: HTML allows some tag omissions (e.g., end tags) XHTML element and attribute names are lower case (HTML names are case-insensitive) XHTML requires that attribute values be quoted Guy-Vincent Jourdan :: CSI 3140 :: based on Jeffrey C. Jackson s slides 9

SGML and XML Guy-Vincent Jourdan :: CSI 3140 :: based on Jeffrey C. Jackson s slides 10

HTML Flavors For HTML 4.01 and XHTML 1.0, the document type declaration can be used to select one of three flavors : Strict: W3C ideal Transitional: Includes deprecated elements and attributes (W3C recommends use of style sheets instead) Frameset: Supports frames (subwindows within the client area) Guy-Vincent Jourdan :: CSI 3140 :: based on Jeffrey C. Jackson s slides 11

HTML Frameset Guy-Vincent Jourdan :: CSI 3140 :: based on Jeffrey C. Jackson s slides 12

HTML Document Type Declarations XHTML 1.0 Strict: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-strict.dtd"> XHTML 1.0 Frameset: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN "http://www.w3.org/tr/xhtml1/dtd/xhtml1-frameset.dtd"> HTML 4.01 Transitional: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN "http://www.w3.org/tr/html4/loose.dtd"> Guy-Vincent Jourdan :: CSI 3140 :: based on Jeffrey C. Jackson s slides 13

XHTML White Space Four white space characters: carriage return, line feed, space, horizontal tab Normally, character data is normalized: All white space is converted to space characters Leading and trailing spaces are trimmed Multiple consecutive space characters are replaced by a single space character Guy-Vincent Jourdan :: CSI 3140 :: based on Jeffrey C. Jackson s slides 14

XHTML White Space Guy-Vincent Jourdan :: CSI 3140 :: based on Jeffrey C. Jackson s slides 15

XHTML White Space Guy-Vincent Jourdan :: CSI 3140 :: based on Jeffrey C. Jackson s slides 16

Unrecognized HTML Elements Misspelled element name Guy-Vincent Jourdan :: CSI 3140 :: based on Jeffrey C. Jackson s slides 17

Unrecognized HTML Elements Belongs here title character data Guy-Vincent Jourdan :: CSI 3140 :: based on Jeffrey C. Jackson s slides 18

Unrecognized HTML Elements title character data Displayed here Guy-Vincent Jourdan :: CSI 3140 :: based on Jeffrey C. Jackson s slides 19

Unrecognized HTML Elements Browsers ignore tags with unrecognized element names, attribute specifications with unrecognized attribute names Allows evolution of HTML while older browsers are still in use Implication: an HTML document may have errors even if it displays properly Should use an HTML validator to check syntax Guy-Vincent Jourdan :: CSI 3140 :: based on Jeffrey C. Jackson s slides 20

Unrecognized HTML Elements Example for non-frame browsers (old) <HTML> <HEAD> <TITLE>A simple frameset document</title> </HEAD> <FRAMESET cols="20%, 80%"> <FRAME src="contents_of_frame1.html /> <FRAME src="contents_of_frame2.html /> <NOFRAMES> <P>This doc contains frames</p> </NOFRAMES> </FRAMESET> </HTML> Guy-Vincent Jourdan :: CSI 3140 :: based on Jeffrey C. Jackson s slides 21

HTML References Since < marks the beginning of a tag, how do you include a < in an HTML document? Use markup known as a reference Two types: Character reference specifies a character by its Unicode code point For <, use < or < or < Entity reference specifies a character by an HTMLdefined name For <, use < Guy-Vincent Jourdan :: CSI 3140 :: based on Jeffrey C. Jackson s slides 22

HTML References Guy-Vincent Jourdan :: CSI 3140 :: based on Jeffrey C. Jackson s slides 23

HTML References Since < and & begin markup, within character data or attribute values these characters must always be represented by references (normally < and &) Good idea to represent > using reference (normally >) Provides consistency with treatment of < Avoids accidental use of the reserved string ]]> Guy-Vincent Jourdan :: CSI 3140 :: based on Jeffrey C. Jackson s slides 24

HTML References Non-breaking space ( ) produces space but counts as part of a word Ex: keep together keep together Guy-Vincent Jourdan :: CSI 3140 :: based on Jeffrey C. Jackson s slides 25

HTML References Non-breaking space often used to create multiple spaces (not removed by normalization) + space displays as two spaces Guy-Vincent Jourdan :: CSI 3140 :: based on Jeffrey C. Jackson s slides 26

XHTML Attribute Specifications Example: Syntax: Valid attribute names specified by HTML recommendation (or XML, as in xml:lang) Attribute values must be quoted (matching single or double quotes) Multiple attribute specifications are spaceseparated, order-independent Guy-Vincent Jourdan :: CSI 3140 :: based on Jeffrey C. Jackson s slides 27

XHTML Attribute Values Can contain embedded quotes or references to quotes May be normalized by browser Best to normalize attribute values yourself for optimal browser compatibility Guy-Vincent Jourdan :: CSI 3140 :: based on Jeffrey C. Jackson s slides 28

Common HTML Elements Guy-Vincent Jourdan :: CSI 3140 :: based on Jeffrey C. Jackson s slides 29

Common HTML Elements Headings are produced using h1, h2,, h6 elements: Should use h1 for highest level, h2 for next highest, etc. Change style (next chapter) if you don t like the look of a heading Guy-Vincent Jourdan :: CSI 3140 :: based on Jeffrey C. Jackson s slides 30

Common HTML Elements Guy-Vincent Jourdan :: CSI 3140 :: based on Jeffrey C. Jackson s slides 31

Common HTML Elements Use pre to retain format of text and display using monospace font: Note that any embedded markup (such as <br /> ) is still treated as markup! Guy-Vincent Jourdan :: CSI 3140 :: based on Jeffrey C. Jackson s slides 32

Common HTML Elements br element represents line break br is example of an empty element, i.e., element that is not allowed to have content XML allows two syntactic representations of empty elements Empty tag syntax <br /> is recommended for browser compatibility XML parsers also recognize syntax <br></br> (start tag followed immediately by end tag), but many browsers do not understand this for empty elements Guy-Vincent Jourdan :: CSI 3140 :: based on Jeffrey C. Jackson s slides 33

Common HTML Elements Guy-Vincent Jourdan :: CSI 3140 :: based on Jeffrey C. Jackson s slides 34

Common HTML Elements Text can be formatted in various ways: Apply style sheet technology (next chapter) to a span element (a styleless wrapper): Use a phrase element that specifies semantics of text (not style directly): Use a font style element Not recommended, but frequently used Guy-Vincent Jourdan :: CSI 3140 :: based on Jeffrey C. Jackson s slides 35

Common HTML Elements Guy-Vincent Jourdan :: CSI 3140 :: based on Jeffrey C. Jackson s slides 36

Common HTML Elements Guy-Vincent Jourdan :: CSI 3140 :: based on Jeffrey C. Jackson s slides 37

Common HTML Elements Horizontal rule is produced using hr Also an empty element Style can be modified using style sheet technology Guy-Vincent Jourdan :: CSI 3140 :: based on Jeffrey C. Jackson s slides 38

Common HTML Elements Guy-Vincent Jourdan :: CSI 3140 :: based on Jeffrey C. Jackson s slides 39

Common HTML Elements Images can be embedded using img element Attributes: src: URL of image file (required). Browser generates a GET request to this URL. alt: text description of image (required) height / width: dimensions of area that image will occupy (recommended) Guy-Vincent Jourdan :: CSI 3140 :: based on Jeffrey C. Jackson s slides 40

Common HTML Elements If height and width not specified for image, then browser may need to rearrange the client area after downloading the image (poor user interface for Web page) If height and width specified are not the same as the original dimensions of image, browser will resize the image Default units for height and width are picture elements (pixels) Can specify percentage of client area using string such as 50% Guy-Vincent Jourdan :: CSI 3140 :: based on Jeffrey C. Jackson s slides 41

Common HTML Elements Monitor resolution determines pixel size 768 lines 1024 elements per line 500 pixel wide line is almost half the width of monitor Guy-Vincent Jourdan :: CSI 3140 :: based on Jeffrey C. Jackson s slides 42

Common HTML Elements Monitor resolution determines pixel size 1024 lines 1280 elements per line 500 pixel wide line is less than half the width of monitor Guy-Vincent Jourdan :: CSI 3140 :: based on Jeffrey C. Jackson s slides 43

Common HTML Elements Guy-Vincent Jourdan :: CSI 3140 :: based on Jeffrey C. Jackson s slides 44

Common HTML Elements Hyperlinks are produced by the anchor element a Clicking on a hyperlink causes browser to issue GET request to URL specified in href attribute and render response in client area Content of anchor element is text of hyperlink (avoid leading/trailing space in content) Guy-Vincent Jourdan :: CSI 3140 :: based on Jeffrey C. Jackson s slides 45

Common HTML Elements Anchors can be used as source (previous example) or destination The fragment portion of a URL is used to reference a destination anchor Browser scrolls so destination anchor is at (or near) top of client area Guy-Vincent Jourdan :: CSI 3140 :: based on Jeffrey C. Jackson s slides 46

Common HTML Elements Comments are a special form of tag Not allowed to use -- within comment Guy-Vincent Jourdan :: CSI 3140 :: based on Jeffrey C. Jackson s slides 47

Nesting Elements If one element is nested within another element, then the content of the inner element is also content of the outer element XHTML requires that elements be properly nested Guy-Vincent Jourdan :: CSI 3140 :: based on Jeffrey C. Jackson s slides 48

Nesting Elements Most HTML elements are either block or inline Block: browser automatically generates line breaks before and after the element content Ex: p,div Inline: element content is added to the flow Ex: span, tt, strong, a Guy-Vincent Jourdan :: CSI 3140 :: based on Jeffrey C. Jackson s slides 49

Nesting Elements Syntactic rules of thumb: Children of body must be blocks Blocks can contain inline elements Inline elements cannot contain blocks Specific rules for each version of (X)HTML are defined using SGML or XML (covered later) Guy-Vincent Jourdan :: CSI 3140 :: based on Jeffrey C. Jackson s slides 50

Relative URL s Consider an <img> start tag containing attribute specification This is an example of a relative URL: it is interpreted relative to the URL of the document that contains the img tag If document URL is http://localhost:8080/multifile.html then relative URL above represents absolute URL http://localhost:8080/valid-xhtml10.png Guy-Vincent Jourdan :: CSI 3140 :: based on Jeffrey C. Jackson s slides 51

Relative URL s Guy-Vincent Jourdan :: CSI 3140 :: based on Jeffrey C. Jackson s slides 52

Relative URL s Query and fragment portions of a relative URL are appended to the resulting absolute URL Example: If document URL is http://localhost:8080/pageanch.html and it contains the anchor element then the corresponding absolute URL is http://localhost:8080/pageanch.html#section1 Guy-Vincent Jourdan :: CSI 3140 :: based on Jeffrey C. Jackson s slides 53

Relative URL s Advantages: Shorter than absolute URL s Primary: can change the URL of a document (e.g., move document to a different directory or rename the server host) without needing to change URL s within the document Should use relative URL s whenever possible Guy-Vincent Jourdan :: CSI 3140 :: based on Jeffrey C. Jackson s slides 54

Lists Guy-Vincent Jourdan :: CSI 3140 :: based on Jeffrey C. Jackson s slides 55

Lists Unordered List List Items Ordered List Definition List Guy-Vincent Jourdan :: CSI 3140 :: based on Jeffrey C. Jackson s slides 56

Lists Guy-Vincent Jourdan :: CSI 3140 :: based on Jeffrey C. Jackson s slides 57

Tables Rules Borders Rules Guy-Vincent Jourdan :: CSI 3140 :: based on Jeffrey C. Jackson s slides 58

Tables Border 5 pixels, rules 1 pixel Table Row Table Data Guy-Vincent Jourdan :: CSI 3140 :: based on Jeffrey C. Jackson s slides 59

Tables Guy-Vincent Jourdan :: CSI 3140 :: based on Jeffrey C. Jackson s slides 60

Tables Table Header Guy-Vincent Jourdan :: CSI 3140 :: based on Jeffrey C. Jackson s slides 61

Tables Guy-Vincent Jourdan :: CSI 3140 :: based on Jeffrey C. Jackson s slides 62

Tables cellspacing cellpadding Guy-Vincent Jourdan :: CSI 3140 :: based on Jeffrey C. Jackson s slides 63

Tables cellspacing cellpadding Guy-Vincent Jourdan :: CSI 3140 :: based on Jeffrey C. Jackson s slides 64

Tables cellspacing cellpadding Guy-Vincent Jourdan :: CSI 3140 :: based on Jeffrey C. Jackson s slides 65

Frames Guy-Vincent Jourdan :: CSI 3140 :: based on Jeffrey C. Jackson s slides 66

Frames 1/3,2/3 split Guy-Vincent Jourdan :: CSI 3140 :: based on Jeffrey C. Jackson s slides 67

Frames Hyperlink in one frame can load document in another: Value of target attribute specification is id/name of a frame Guy-Vincent Jourdan :: CSI 3140 :: based on Jeffrey C. Jackson s slides 68

Frames User interface issues: What happens when the page is printed? What happens when the Back button is clicked? How should assistive technology read the page? How should the information be displayed on a small display? Recommendation: avoid frames except for applications aimed at power users Guy-Vincent Jourdan :: CSI 3140 :: based on Jeffrey C. Jackson s slides 69

Forms Guy-Vincent Jourdan :: CSI 3140 :: based on Jeffrey C. Jackson s slides 70

Forms Each form is content of a form element Guy-Vincent Jourdan :: CSI 3140 :: based on Jeffrey C. Jackson s slides 71

Forms action specifies URL where form data is sent in an HTTP request Guy-Vincent Jourdan :: CSI 3140 :: based on Jeffrey C. Jackson s slides 72

Forms HTTP request method (lower case) Guy-Vincent Jourdan :: CSI 3140 :: based on Jeffrey C. Jackson s slides 73

Forms The XHTML grammar require any child of the form element to be a block Many form elements are actually inline, so including a block element on top such a div or a table is a simple way to be compliant with the grammar Guy-Vincent Jourdan :: CSI 3140 :: based on Jeffrey C. Jackson s slides 74

Forms div is the block element analog of span (no-style block element) Guy-Vincent Jourdan :: CSI 3140 :: based on Jeffrey C. Jackson s slides 75

Forms Form control elements must be content of a block element Guy-Vincent Jourdan :: CSI 3140 :: based on Jeffrey C. Jackson s slides 76

Forms Text field control (form user-interface element) Guy-Vincent Jourdan :: CSI 3140 :: based on Jeffrey C. Jackson s slides 77

Forms Text field used for one-line inputs Guy-Vincent Jourdan :: CSI 3140 :: based on Jeffrey C. Jackson s slides 78

Forms Guy-Vincent Jourdan :: CSI 3140 :: based on Jeffrey C. Jackson s slides 79

Forms Name associated with this control s data in HTTP request Guy-Vincent Jourdan :: CSI 3140 :: based on Jeffrey C. Jackson s slides 80

Forms Width (number of characters) of text field Guy-Vincent Jourdan :: CSI 3140 :: based on Jeffrey C. Jackson s slides 81

Forms input is an empty element Guy-Vincent Jourdan :: CSI 3140 :: based on Jeffrey C. Jackson s slides 82

Forms Use label to associate text with a control Only one control inside a label element! Guy-Vincent Jourdan :: CSI 3140 :: based on Jeffrey C. Jackson s slides 83

Forms Form controls are inline elements Guy-Vincent Jourdan :: CSI 3140 :: based on Jeffrey C. Jackson s slides 84

Forms textarea control used for multi-line input Guy-Vincent Jourdan :: CSI 3140 :: based on Jeffrey C. Jackson s slides 85

Forms Height and width in characters Guy-Vincent Jourdan :: CSI 3140 :: based on Jeffrey C. Jackson s slides 86

Forms textarea is not an empty element; any content is displayed Guy-Vincent Jourdan :: CSI 3140 :: based on Jeffrey C. Jackson s slides 87

Forms Guy-Vincent Jourdan :: CSI 3140 :: based on Jeffrey C. Jackson s slides 88

Forms Checkbox control Guy-Vincent Jourdan :: CSI 3140 :: based on Jeffrey C. Jackson s slides 89

Forms Value sent in HTTP request if box is checked Guy-Vincent Jourdan :: CSI 3140 :: based on Jeffrey C. Jackson s slides 90

Forms Controls can share a common name Guy-Vincent Jourdan :: CSI 3140 :: based on Jeffrey C. Jackson s slides 91

Forms Submit button: form data sent to action URL if button is clicked Guy-Vincent Jourdan :: CSI 3140 :: based on Jeffrey C. Jackson s slides 92

Forms Guy-Vincent Jourdan :: CSI 3140 :: based on Jeffrey C. Jackson s slides 93

Forms Form data (in GET request) Guy-Vincent Jourdan :: CSI 3140 :: based on Jeffrey C. Jackson s slides 94

Forms Displayed on button and sent to server if button clicked Guy-Vincent Jourdan :: CSI 3140 :: based on Jeffrey C. Jackson s slides 95

Forms Radio buttons: at most one can be selected at a time. Guy-Vincent Jourdan :: CSI 3140 :: based on Jeffrey C. Jackson s slides 96

Forms Radio button control Guy-Vincent Jourdan :: CSI 3140 :: based on Jeffrey C. Jackson s slides 97

Forms All radio buttons with the same name form a button set Guy-Vincent Jourdan :: CSI 3140 :: based on Jeffrey C. Jackson s slides 98

Forms Only one button of a set can be selected at a time Guy-Vincent Jourdan :: CSI 3140 :: based on Jeffrey C. Jackson s slides 99

Forms This button is initially selected (checked attribute also applies to check boxes) Guy-Vincent Jourdan :: CSI 3140 :: based on Jeffrey C. Jackson s slides 100

Forms Boolean attribute: default false, set true by specifying name as value Guy-Vincent Jourdan :: CSI 3140 :: based on Jeffrey C. Jackson s slides 101

Forms Represents string: >50 Guy-Vincent Jourdan :: CSI 3140 :: based on Jeffrey C. Jackson s slides 102

Forms Menu Guy-Vincent Jourdan :: CSI 3140 :: based on Jeffrey C. Jackson s slides 103

Forms Menu control; name given once Guy-Vincent Jourdan :: CSI 3140 :: based on Jeffrey C. Jackson s slides 104

Forms Each menu item has its own value Guy-Vincent Jourdan :: CSI 3140 :: based on Jeffrey C. Jackson s slides 105

Forms Item initially displayed in menu control Guy-Vincent Jourdan :: CSI 3140 :: based on Jeffrey C. Jackson s slides 106

Forms Other form controls: Fieldset (grouping) Password Clickable image Non-submit buttons Hidden (embed data) File upload Hierarchical menus Guy-Vincent Jourdan :: CSI 3140 :: based on Jeffrey C. Jackson s slides 107

Forms Guy-Vincent Jourdan :: CSI 3140 :: based on Jeffrey C. Jackson s slides 108

XML DTD Recall that XML is used to define the syntax of XHTML Set of XML files that define a language are known as the document type definition (DTD) DTD primarily consists of declarations: Element type: name and content of elements Attribute list: attributes of an element Entity: define meaning of, e.g., > Guy-Vincent Jourdan :: CSI 3140 :: based on Jeffrey C. Jackson s slides 109

XML DTD Example from http://www.w3.org/tr/xhtml1/dtd/xhtml1-strict.dtd <!ELEMENT html (head, body)> <!ATTLIST html %i18n; id ID #IMPLIED xmlns %URI; #FIXED 'http://www.w3.org/1999/xhtml' > <!ENTITY % i18n "lang %LanguageCode; #IMPLIED xml:lang %LanguageCode; #IMPLIED dir (ltr rtl) #IMPLIED" > Guy-Vincent Jourdan :: CSI 3140 :: based on Jeffrey C. Jackson s slides 110

XML Element Type Declaration Element type name Guy-Vincent Jourdan :: CSI 3140 :: based on Jeffrey C. Jackson s slides 111

XML Element Type Declaration Element type content specification (or content model) Guy-Vincent Jourdan :: CSI 3140 :: based on Jeffrey C. Jackson s slides 112

XML Element Type Declaration Element type content specification (or content model) Guy-Vincent Jourdan :: CSI 3140 :: based on Jeffrey C. Jackson s slides 113

XML Element Type Declaration Element type content specification (or content model) Guy-Vincent Jourdan :: CSI 3140 :: based on Jeffrey C. Jackson s slides 114

XML Element Type Declaration Element type content specification (or content model) Guy-Vincent Jourdan :: CSI 3140 :: based on Jeffrey C. Jackson s slides 115

XML Element Type Declaration Element type content specification (or content model) Guy-Vincent Jourdan :: CSI 3140 :: based on Jeffrey C. Jackson s slides 116

XML Element Type Declaration Element type content specification (or content model) Guy-Vincent Jourdan :: CSI 3140 :: based on Jeffrey C. Jackson s slides 117

XML Element Type Declaration Element type content specification (or content model) Guy-Vincent Jourdan :: CSI 3140 :: based on Jeffrey C. Jackson s slides 118

XML Element Type Declaration <!ELEMENT textarea (#PCDATA)> Element type content specification (or content model) Guy-Vincent Jourdan :: CSI 3140 :: based on Jeffrey C. Jackson s slides 119

XML Element Type Declaration <!ELEMENT textarea (#PCDATA)> Element type content specification (or content model) Guy-Vincent Jourdan :: CSI 3140 :: based on Jeffrey C. Jackson s slides 120

XML Element Type Declaration Element type content specification (or content model) Guy-Vincent Jourdan :: CSI 3140 :: based on Jeffrey C. Jackson s slides 121

XML Element Type Declaration Element type content specification (or content model) Guy-Vincent Jourdan :: CSI 3140 :: based on Jeffrey C. Jackson s slides 122

XML Element Type Declaration Element type content specification (or content model) Guy-Vincent Jourdan :: CSI 3140 :: based on Jeffrey C. Jackson s slides 123

XML Element Type Declaration Child elements of table are: Guy-Vincent Jourdan :: CSI 3140 :: based on Jeffrey C. Jackson s slides 124

XML Element Type Declaration Child elements of table are: Optional caption Guy-Vincent Jourdan :: CSI 3140 :: based on Jeffrey C. Jackson s slides 125

XML Element Type Declaration Child elements of table are: Optional caption followed by Guy-Vincent Jourdan :: CSI 3140 :: based on Jeffrey C. Jackson s slides 126

XML Element Type Declaration Child elements of table are: Optional caption followed by Any number of col elements Guy-Vincent Jourdan :: CSI 3140 :: based on Jeffrey C. Jackson s slides 127

XML Element Type Declaration Child elements of table are: Optional caption followed by Any number of col elements or Guy-Vincent Jourdan :: CSI 3140 :: based on Jeffrey C. Jackson s slides 128

XML Element Type Declaration Child elements of table are: Optional caption followed by Any number of col elements or any number of colgroup elements Guy-Vincent Jourdan :: CSI 3140 :: based on Jeffrey C. Jackson s slides 129

XML Element Type Declaration Child elements of table are: Optional caption followed by Any number of col elements or any number of colgroup elements then Guy-Vincent Jourdan :: CSI 3140 :: based on Jeffrey C. Jackson s slides 130

XML Element Type Declaration Child elements of table are: Optional caption followed by Any number of col elements or any number of colgroup elements then Optional header Guy-Vincent Jourdan :: CSI 3140 :: based on Jeffrey C. Jackson s slides 131

XML Element Type Declaration Child elements of table are: Optional caption followed by Any number of col elements or any number of colgroup elements then Optional header followed by Guy-Vincent Jourdan :: CSI 3140 :: based on Jeffrey C. Jackson s slides 132

XML Element Type Declaration Child elements of table are: Optional caption followed by Any number of col elements or any number of colgroup elements then Optional header followed by optional footer Guy-Vincent Jourdan :: CSI 3140 :: based on Jeffrey C. Jackson s slides 133

XML Element Type Declaration Child elements of table are: Optional caption followed by Any number of col elements or any number of colgroup elements then Optional header followed by optional footer then Guy-Vincent Jourdan :: CSI 3140 :: based on Jeffrey C. Jackson s slides 134

XML Element Type Declaration Child elements of table are: Optional caption followed by Any number of col elements or any number of colgroup elements then Optional header followed by optional footer then One or more tbody elements Guy-Vincent Jourdan :: CSI 3140 :: based on Jeffrey C. Jackson s slides 135

XML Element Type Declaration Child elements of table are: Optional caption followed by Any number of col elements or any number of colgroup elements then Optional header followed by optional footer then One or more tbody elements or Guy-Vincent Jourdan :: CSI 3140 :: based on Jeffrey C. Jackson s slides 136

XML Element Type Declaration Child elements of table are: Optional caption followed by Any number of col elements or any number of colgroup elements then Optional header followed by optional footer then One or more tbody elements or one or more tr elements Guy-Vincent Jourdan :: CSI 3140 :: based on Jeffrey C. Jackson s slides 137

XML Attribute List Declaration Element type name Guy-Vincent Jourdan :: CSI 3140 :: based on Jeffrey C. Jackson s slides 138

XML Attribute List Declaration Recognized attribute names Guy-Vincent Jourdan :: CSI 3140 :: based on Jeffrey C. Jackson s slides 139

XML Attribute List Declaration Attribute types (data types allowed as attribute values) Guy-Vincent Jourdan :: CSI 3140 :: based on Jeffrey C. Jackson s slides 140

XML Attribute List Declaration ASCII characters: letter, digit, or. - _ : Guy-Vincent Jourdan :: CSI 3140 :: based on Jeffrey C. Jackson s slides 141

XML Attribute List Declaration Attribute value must be ltr or rtl Guy-Vincent Jourdan :: CSI 3140 :: based on Jeffrey C. Jackson s slides 142

XML Attribute List Declaration Like NMTOKEN but must begin with letter or _ : Attribute value must be unique Guy-Vincent Jourdan :: CSI 3140 :: based on Jeffrey C. Jackson s slides 143

XML Attribute List Declaration Any character except XML special characters < and & or the quote character enclosing the attribute value Guy-Vincent Jourdan :: CSI 3140 :: based on Jeffrey C. Jackson s slides 144

XML Attribute List Declaration Guy-Vincent Jourdan :: CSI 3140 :: based on Jeffrey C. Jackson s slides 145

XML Attribute List Declaration Attribute default declarations Guy-Vincent Jourdan :: CSI 3140 :: based on Jeffrey C. Jackson s slides 146

XML Attribute List Declaration Guy-Vincent Jourdan :: CSI 3140 :: based on Jeffrey C. Jackson s slides 147

XML Entity Declaration Entity declaration is essentially a macro Two types of entity: General: referenced from HTML document using & Entity name Guy-Vincent Jourdan :: CSI 3140 :: based on Jeffrey C. Jackson s slides 148

XML Entity Declaration Entity declaration is essentially a macro Two types of entity: General: referenced from HTML document using & Replacement text; recursively replaced if it is a reference Guy-Vincent Jourdan :: CSI 3140 :: based on Jeffrey C. Jackson s slides 149

XML Entity Declaration Entity declaration is essentially a macro Two types of entity: General: referenced from HTML document using & Parameter: reference from DTD using % Guy-Vincent Jourdan :: CSI 3140 :: based on Jeffrey C. Jackson s slides 150

XML Entity Declaration Entity declaration is essentially a macro Two types of entity: General: referenced from HTML document using & Parameter: reference from DTD using % Guy-Vincent Jourdan :: CSI 3140 :: based on Jeffrey C. Jackson s slides 151

DTD Files System Identifier: URL for primary DTD document DTD document contains element type, attribute list, and entity declarations May also contain declaration of external entities: identifiers for secondary DTD documents Guy-Vincent Jourdan :: CSI 3140 :: based on Jeffrey C. Jackson s slides 152

DTD Files External entity name Guy-Vincent Jourdan :: CSI 3140 :: based on Jeffrey C. Jackson s slides 153

DTD Files System identifier (relative URL) Guy-Vincent Jourdan :: CSI 3140 :: based on Jeffrey C. Jackson s slides 154

DTD Files Entity reference; imports content (entity declarations, called entity set) of external entity at this point in the primary DTD Guy-Vincent Jourdan :: CSI 3140 :: based on Jeffrey C. Jackson s slides 155

HTML Creation Tools Mozilla Composer Microsoft FrontPage Macromedia Dreamweaver Etc. Guy-Vincent Jourdan :: CSI 3140 :: based on Jeffrey C. Jackson s slides 156