Introduction to XHTML, 2006 ©Nina Bresnihan, TCD. 1 Introduction to XHTML 1.0

Introduction to XHTML, 2006 ©Nina Bresnihan, TCD.

1

Introduction to XHTML 1.0Introduction to XHTML 1.0

http://http://www.cs.tcd.ie/Nina.Bresnihan/healthinfowww.cs.tcd.ie/Nina.Bresnihan/healthinfo//

Introduction to XHTML, 2006 ©NinIntroduction to XHTML, 2006 ©Nina Bresnihan, TCD.a Bresnihan, TCD.

22

Introduction to Markup LanguagesIntroduction to Markup Languages

Historically, the word Historically, the word markupmarkup has been used to describe has been used to describe annotation or other marks within a text intended to annotation or other marks within a text intended to instruct a compositor or typist how a particular passage instruct a compositor or typist how a particular passage should be printed or laid out. should be printed or laid out.

Eg. Eg. wavy underlining to indicate boldface, special wavy underlining to indicate boldface, special symbols for passages to be omitted or printed in a symbols for passages to be omitted or printed in a particular font etc. particular font etc.


33


As the formatting and printing of texts was automated, As the formatting and printing of texts was automated, the term was extended to cover all sorts of special the term was extended to cover all sorts of special markup codesmarkup codes inserted into electronic texts to govern inserted into electronic texts to govern formatting, printing, or other processing.formatting, printing, or other processing.

Generalizing from that sense, we define markupGeneralizing from that sense, we define markup as as any any means of making explicit an interpretation of a textmeans of making explicit an interpretation of a text. .


44


By By markup languagemarkup language we mean a set of markup we mean a set of markup conventions used together for encoding texts. conventions used together for encoding texts.

A markup language must A markup language must ::• SSpecify what markup is allowedpecify what markup is allowed..• WWhat markup is requiredhat markup is required• HHow markup is to be distinguished from textow markup is to be distinguished from text• WWhat the markup means. hat the markup means.


55

SGMLSGML

SGML is an international standard for the description of SGML is an international standard for the description of marked-up electronic text. marked-up electronic text.

More exactly, SGML is a More exactly, SGML is a metalanguagemetalanguage, that is, a means , that is, a means of formally describing a language, in this case, a of formally describing a language, in this case, a markup markup languagelanguage. .


66

SGMLSGML

SGML allows you to define your own SGML allows you to define your own markup tagsmarkup tags, each , each of which is used to mark a particular sort of document of which is used to mark a particular sort of document element, such as a paragraph, section heading or a list.element, such as a paragraph, section heading or a list.

In SGML defining a tag consists of giving it a name and In SGML defining a tag consists of giving it a name and some attributes and specifying some restrictions on the some attributes and specifying some restrictions on the context in which the tag can be used.context in which the tag can be used.


77

SGMLSGML

In SGML the structure of a document in defined in the In SGML the structure of a document in defined in the Document Type Definition (DTD)Document Type Definition (DTD) . .

A DTD describes how a document can be structured.A DTD describes how a document can be structured.


88

SGMLSGML

If a DTD describes a sufficiently large class of If a DTD describes a sufficiently large class of documents it may make sense to construct display documents it may make sense to construct display software specifically for that class of document and to software specifically for that class of document and to hardwire the layout rules into the hardware.hardwire the layout rules into the hardware.

That way every document will be laid out consistently by That way every document will be laid out consistently by a particular display program.a particular display program.


99

Markup LanguagesMarkup Languages

This is the approach followed by the first generation of This is the approach followed by the first generation of web browsers.web browsers.

Most of the formatting of headers, lists, tables and other Most of the formatting of headers, lists, tables and other elements is controlled by the browser, but some details, elements is controlled by the browser, but some details, specifically fonts, type sizes and colours, may be specifically fonts, type sizes and colours, may be controlled by preferences set by the user.controlled by preferences set by the user.


1010

Markup LanguagesMarkup Languages

Alternative option: Provide a separate specification of the Alternative option: Provide a separate specification of the layout, parallel to and complementing the DTD.layout, parallel to and complementing the DTD.

This layout specification is known as a This layout specification is known as a stylesheetstylesheet..

For each tag defined in the DTD, a stylesheet provides a For each tag defined in the DTD, a stylesheet provides a rule describing the way in which elements with that tag rule describing the way in which elements with that tag should be laid out.should be laid out.


1111

Markup Languages and the WWWMarkup Languages and the WWW

Since structural markup can be interpreted on any Since structural markup can be interpreted on any platform in a logically consistent – if not necessarily platform in a logically consistent – if not necessarily visually consistent – manner, it is ideally suited for the visually consistent – manner, it is ideally suited for the markup of documents which are to be transmitted over markup of documents which are to be transmitted over networks.networks.

When the World Wide Web was being designed SGML When the World Wide Web was being designed SGML was used as the basis of the was used as the basis of the Hypertext Markup Hypertext Markup LanguageLanguage (HTML).(HTML).


1212

HTMLHTML

HTML provides a set of tags suitable for marking up web HTML provides a set of tags suitable for marking up web pages. It does not provide any way of defining new tags.pages. It does not provide any way of defining new tags.

HTML is defined by an SGML DTD, which describes the HTML is defined by an SGML DTD, which describes the structure of the class of documents known as Web structure of the class of documents known as Web pages.pages.

Like SGML it is concerned solely with identifying the Like SGML it is concerned solely with identifying the structural elements of a page and not with their structural elements of a page and not with their appearance.appearance.


1313

HTMLHTML

Originally the WWW was intended as a means of Originally the WWW was intended as a means of dissemination of scientific research, so the DTD for the dissemination of scientific research, so the DTD for the Web pages contained tags corresponding to the main Web pages contained tags corresponding to the main elements of a scientific paper:elements of a scientific paper:• TitleTitle• Headings that can be nested several levels deepHeadings that can be nested several levels deep• Lists of various typesLists of various types• Some typographical control (bold, italic)Some typographical control (bold, italic)• TablesTables• FormsForms• Etc.Etc.


1414

HTML’s LimitationsHTML’s Limitations

Although adequate for marking up simple mainly textual Although adequate for marking up simple mainly textual papers for which they were originally intended, HTML’s papers for which they were originally intended, HTML’s layout tags are not sufficient for all the diverse types of layout tags are not sufficient for all the diverse types of material which have found their way onto the WWW.material which have found their way onto the WWW.

Two results:Two results:• Browser manufacturers added Browser manufacturers added ad hocad hoc proprietary proprietary

extensions to HTML.extensions to HTML.• Web Designers used tags in ways they were never Web Designers used tags in ways they were never

intended.intended.


1515

XMLXML

Solution – provide web designers with a facility to define Solution – provide web designers with a facility to define their own tags.their own tags.

SGML can do this, but too unwieldy, slow response SGML can do this, but too unwieldy, slow response times.times.

Work on adapting SGML to the Internet led to the Work on adapting SGML to the Internet led to the definition of a subset, known as definition of a subset, known as XML (eXtensible Markup XML (eXtensible Markup Language).Language).


1616

XMLXML

Provides all of the important facilities of SGML without Provides all of the important facilities of SGML without the overhead imposed by full SGML. the overhead imposed by full SGML.

XML allows web designers to define their own DTDs for XML allows web designers to define their own DTDs for any type of document.any type of document.

All new browsers now read and interpret (parse) both All new browsers now read and interpret (parse) both HTML and XML but as XML becomes the new standard HTML and XML but as XML becomes the new standard HTML will be left in the lurch.HTML will be left in the lurch.


1717

XHMTL 1.0XHMTL 1.0

XHTML is an XML-based language that reproduces XHTML is an XML-based language that reproduces essentially all the features of HTML, subject to the essentially all the features of HTML, subject to the stricter syntax of XML.stricter syntax of XML.

XHTML documents can be processed by both HTML and XHTML documents can be processed by both HTML and XML software. So XHTML documents can be read by XML software. So XHTML documents can be read by existing HTML browsers or can be used with future existing HTML browsers or can be used with future browsers that understand XML.browsers that understand XML.


1818

SGML and XML Family TreeSGML and XML Family Tree


1919

How Does XHTML Work?How Does XHTML Work?

W3C - World Wide Web Consortium W3C - World Wide Web Consortium http://www.w3.org/http://www.w3.org/

Can be applied to text, images, sound, and video files - Can be applied to text, images, sound, and video files - in fact to almost any kind of electronic informationin fact to almost any kind of electronic information

Used to format documents and link them together Used to format documents and link them together regardless of the type of computer with which the file regardless of the type of computer with which the file was originally createdwas originally created

Uses predefined commands to determine how pieces of Uses predefined commands to determine how pieces of the document should look - known as tags.the document should look - known as tags.


2020

How Does it Work?How Does it Work?

Separates text from the format of the textSeparates text from the format of the text

Web browser interprets the format after you receive the Web browser interprets the format after you receive the page - information comes to you fasterpage - information comes to you faster


2121

How Does it Work?How Does it Work?

StepsSteps

1.1. Using your web browser you go looking for informationUsing your web browser you go looking for information

2.2. Browser finds computer that stores this information Browser finds computer that stores this information (server) by using the HTTP protocol(server) by using the HTTP protocol

3.3. Server send the Web page as a plain text file back to Server send the Web page as a plain text file back to you (again using HTTP)you (again using HTTP)

4.4. Browser interprets the text and tags and shows you the Browser interprets the text and tags and shows you the formatting, graphics and text that appears on the pageformatting, graphics and text that appears on the page


2222

Creating your First PageCreating your First Page

Open Microsoft Notepad:Open Microsoft Notepad:

The The <html<html and and </html></html> tags identify your file as an XHTML file tags identify your file as an XHTML file


2323

Creating your First Page (cont.)Creating your First Page (cont.)

The The <head><head> and and </head></head> tags are used to indicate tags are used to indicate any information about the document itself (more any information about the document itself (more anon…).anon…).

The The <title><title> and and </title></title> tags are used to add a tags are used to add a title to your browser’s title bar ( The coloured band at the title to your browser’s title bar ( The coloured band at the top of your browser).top of your browser).

The The <body><body> and and </body></body> tags are used to surround tags are used to surround any text that will appear within the XHTML page.any text that will appear within the XHTML page.


2424

Adding Adding ContentContent

ParagraphsParagraphs• A paragraph is created whenever you insert text between A paragraph is created whenever you insert text between

the the <p><p> tags.tags.

<html><html><head><head><title>My first Web page</title><title>My first Web page</title></head></head>

<body><body><p><p>This is my first Web page.This is my first Web page.</p></p></body></body></html></html>


2525

Saving and Viewing Your DocumentSaving and Viewing Your Document

In order to view your page in a browser you must first In order to view your page in a browser you must first save it.save it.

All XHTML documents must be saved using a All XHTML documents must be saved using a .htm.htm or or .html.html extension. extension.

You can preview any XHTML file in your browser, You can preview any XHTML file in your browser, even when that file is stored on your computer rather even when that file is stored on your computer rather than the web server.than the web server.


2626


Netscape / Mozilla - select ‘open file’ from the File menu.Netscape / Mozilla - select ‘open file’ from the File menu.

Internet Explorer - select ‘open’ from the File menu, then Internet Explorer - select ‘open’ from the File menu, then ‘browse’ for your file.‘browse’ for your file.


2727


Although all XHTML commands are the same, not all Although all XHTML commands are the same, not all browsers interpret the commands in the same way.browsers interpret the commands in the same way.

Older browsers do not understand the newer HTML 4 Older browsers do not understand the newer HTML 4 and XHTML Commands - may produce errors.and XHTML Commands - may produce errors.

However most Web pages will look the same However most Web pages will look the same regardless of the browser or platform - just test, test, regardless of the browser or platform - just test, test, test…test…

http://validator.w3.org/http://validator.w3.org/


2828

Remember the BasicsRemember the Basics

You MUST follow some basic Web coding principles You MUST follow some basic Web coding principles (more to follow…)(more to follow…)

• Include all the required XHTML elements that you Include all the required XHTML elements that you learned so far.learned so far.

• Use lowercase for all elements and attributes (this Use lowercase for all elements and attributes (this is a requirement of XHMTL).is a requirement of XHMTL).

• Don’t forget your end tags. Don’t forget your end tags. • Never use spaces in filenames.Never use spaces in filenames.• Always use lowercase for your filenames.Always use lowercase for your filenames.


2929

Adding Text and FormattingAdding Text and Formatting

How do you add another paragraph?How do you add another paragraph?

• Web browsers don’t pay any attention to how many blank Web browsers don’t pay any attention to how many blank lines you put in your text; they only pay attention to the lines you put in your text; they only pay attention to the HTML commands.HTML commands.

• The The <p><p> tag tells the browser to add a blank line before it tag tells the browser to add a blank line before it displays any text that follows.displays any text that follows.


3030


<html><html>

<head><head>

<title>Typing Paragraphs in XHTML</title><title>Typing Paragraphs in XHTML</title>

</head></head>

<body><body>

<p><p>This is the first line.This is the first line.

But is this the second?But is this the second?</p></p>

<p>No,this is.<p>No,this is.</p></p>

</body></body>

</html></html>


3131



3232

Adding TextAdding Text

What if you just want your text to appear on the next What if you just want your text to appear on the next line? (lines of an address, poetry etc)…line? (lines of an address, poetry etc)…

Use the line break, or Use the line break, or <br><br> tag - forces the browser to tag - forces the browser to move any text following the tag to the next line of the move any text following the tag to the next line of the browser, without adding a blank line in between.browser, without adding a blank line in between.


3333

Closing TagsClosing Tags

Every open tag in your XHTML document needs to Every open tag in your XHTML document needs to be accompanied by a closing tag.be accompanied by a closing tag.

So, a paragraph in your document cannot look like this: So, a paragraph in your document cannot look like this:

<p>This is a bad paragraph! <p>This is a bad paragraph!

Instead, use a closing tag, like this: Instead, use a closing tag, like this:

<p>This is a good paragraph!</p><p>This is a good paragraph!</p>


3434

Closing TagsClosing Tags

TThere is a shortcut for closing tags that don't usually here is a shortcut for closing tags that don't usually need to be logically closed. The shortcut is to add a need to be logically closed. The shortcut is to add a close-command slash at the end of the tag to turn it off. close-command slash at the end of the tag to turn it off.

E.g., there's no need to type: E.g., there's no need to type: <br></br><br></br> In XHTML, the In XHTML, the tag looks like this: tag looks like this: <br<br />/>


3535


Want to add another blank line?Want to add another blank line?

<p> </p><p> </p>

stands for non-breaking space – forces the stands for non-breaking space – forces the browser to display white space.browser to display white space.


3636


HeadingsHeadings• XHTML enables you to add six different heading tags to your XHTML enables you to add six different heading tags to your

pages by using the tags pages by using the tags <h1><h1> through to through to <h6><h6>. These tags . These tags have an associated closing tag:have an associated closing tag:

<h1>This is Heading 1</h1><h1>This is Heading 1</h1>

• The closing tags also create an automatic paragraph break; The closing tags also create an automatic paragraph break; in other words all headings automatically include a blank line in other words all headings automatically include a blank line to separate them from the text.to separate them from the text.

• Heading 1, the Heading 1, the <h1><h1> tag is the largest font of the heading tag is the largest font of the heading tags and Heading 6, the tags and Heading 6, the <h6><h6> tag the smallest. tag the smallest.


3737



3838

Linking Text and DocumentsLinking Text and Documents

• Before you can link to another page (or resource), you Before you can link to another page (or resource), you have to know its have to know its uniform resources locator (URL)uniform resources locator (URL)..

• You can find the URL for any resource in the Address You can find the URL for any resource in the Address box (or Location box) of your browser. box (or Location box) of your browser.


3939


HyperlinksHyperlinks• A hyperlink is the text that enables you to jump from A hyperlink is the text that enables you to jump from

a Web document to another location.a Web document to another location.

• The The <a><a> tag (called an anchor) is used to define tag (called an anchor) is used to define hyperlinks.hyperlinks.

• The The <a><a> tag tag requires requires an attribute. If you want to link an attribute. If you want to link to someplace you use:to someplace you use:

<<a hrefa href= “= “the URL you want to link tothe URL you want to link to”>”>the linkthe link</a></a>


4040


Hyperlink to another locationHyperlink to another location• The The <a><a> tag with the tag with the hrefhref attribute, and its closing tag, attribute, and its closing tag, </a>,</a>, surround any text that you want to highlight. surround any text that you want to highlight.

• The default hyperlink highlighting in most browsers is The default hyperlink highlighting in most browsers is underlined blue text.underlined blue text.

• For example, here you would click on the words ‘click here’ to For example, here you would click on the words ‘click here’ to jump (hyperlink) to the document found at the URL inside the jump (hyperlink) to the document found at the URL inside the quotes:quotes:

Please <a href = “http://www.microsoft.com”> Please <a href = “http://www.microsoft.com”> click here</a> to open the Microsoft Web site.click here</a> to open the Microsoft Web site.


4141


Linking to Other Files and EmailLinking to Other Files and Email

• You can use the same You can use the same hrefhref attribute to link to email attribute to link to email addresses, to other pages of your own Web site, or even to addresses, to other pages of your own Web site, or even to other files on your own computer.other files on your own computer.

• This hyperlink points to another file (second.htm) on your This hyperlink points to another file (second.htm) on your own computer. The second.htm file is stored in the same own computer. The second.htm file is stored in the same directory as the page linking to it:directory as the page linking to it:

Please <a href=“second.htm”>click here</a> Please <a href=“second.htm”>click here</a> to open my second Web page.to open my second Web page.


4242


Linking to Other Files (cont.)Linking to Other Files (cont.)

• IfIf the second.htm file was stored in another directory (e.g. the second.htm file was stored in another directory (e.g. The links directory)The links directory) belowbelow the directory that your first the directory that your first page is page is stored in stored in the hyperlink would need to include the directory the hyperlink would need to include the directory name too:name too:

Please <a href=“links/second.htm”>click Please <a href=“links/second.htm”>click here</a> to open my second Web page.here</a> to open my second Web page.

• IfIf the second.htm file was stored in another directory (e.g. the second.htm file was stored in another directory (e.g. The links directory)The links directory) aboveabove the directory that your first the directory that your first page page is stored in is stored in the hyperlink would need to include the hyperlink would need to include an indication an indication that it is above itthat it is above it::

• Please <a href=“Please <a href=“..../second.htm”>click/second.htm”>click here</a> to open my second Web page.here</a> to open my second Web page.


4343


Linking to Other Files (cont.)Linking to Other Files (cont.)

• Similarly if it is two directories above it:Similarly if it is two directories above it: Please <a href=“Please <a href=“../..../../second.htm”>click /second.htm”>click here</a> to open my second Web page.here</a> to open my second Web page.

• What happens if the directories are on the same level??What happens if the directories are on the same level??


4444


Linking to EmailLinking to Email

• You can link to an email address by using the mailto prefix. You can link to an email address by using the mailto prefix. When you click on the words click here, an email window When you click on the words click here, an email window appears that enables you to type in your message to Mickey appears that enables you to type in your message to Mickey Mouse will appear:Mouse will appear:

<a<a href=“mailto:[email protected]”> href=“mailto:[email protected]”> click here to send mail to Mickey</a>.click here to send mail to Mickey</a>.


4545

Adding ImagesAdding Images

The two most commonly used graphics file formats The two most commonly used graphics file formats found on the Web are GIF and JPEG.found on the Web are GIF and JPEG.

• JPEG (Joint Photographic Experts Group) format is primarily JPEG (Joint Photographic Experts Group) format is primarily used for realistic, photographic-quality images.used for realistic, photographic-quality images.

• GIF (Graphics Interface Format) used for almost everything elseGIF (Graphics Interface Format) used for almost everything else

• Also PNG (Portable Network Graphics) format - gaining in Also PNG (Portable Network Graphics) format - gaining in popularity. Expected to replace GIF. Not currently supported by popularity. Expected to replace GIF. Not currently supported by most browsers.most browsers.


4646


Add all images using the image source tag:Add all images using the image source tag:

<img src=“<img src=“locationlocation”” / />>

This is the This is the <img><img> tag with an attribute ( tag with an attribute (srcsrc) and an ) and an attribute value (attribute value (locationlocation).).


4747


<html><html>

<head><head>

<title>My First Image</title><title>My First Image</title>

</head></head>

<body><body>

<p>This is an image in my first web page</p><p>This is an image in my first web page</p>

<p><img src="metalman_green.gif" /> </p><p><img src="metalman_green.gif" /> </p>

</body></body>

</html></html>


4848



4949


Adding Alternate Text - Adding Alternate Text - RequiredRequired

• Text pop-up that describes the image or tells you more about the Text pop-up that describes the image or tells you more about the Web site that image represents.Web site that image represents.

• Use the Use the altalt attribute with the attribute with the <img><img> tag. tag.

• Like the Like the srcsrc attribute the alt attribute tells the browser more attribute the alt attribute tells the browser more information about the image.information about the image.

• <img src = “metalman_green.gif” alt=“scary green man”<img src = “metalman_green.gif” alt=“scary green man” / />>


5050


Adding Alternate TextAdding Alternate Text

• Important becauseImportant because Some people with slower connections choose to customise Some people with slower connections choose to customise

their browsers to ignore imagestheir browsers to ignore images Not all browsers let you see imagesNot all browsers let you see images Identifies images for the visually impairedIdentifies images for the visually impaired

• The The altalt attribute ensures that people who can’t see your attribute ensures that people who can’t see your graphics can still understand their context. It is a graphics can still understand their context. It is a requirementrequirement of of XHTMLXHTML


5151


Image AttributesImage Attributes• Without any other attributes the browser displays the image at Without any other attributes the browser displays the image at

its original size and aligns the bottom of the graphic with the its original size and aligns the bottom of the graphic with the bottom of the text. bottom of the text.

Adjusting the Width and HeightAdjusting the Width and Height• Use the Use the widthwidth and and heightheight attributes. attributes.• Can be set to a fixed pixel size or a percentage of the page Can be set to a fixed pixel size or a percentage of the page

size.size.• If you want to ensure that an image takes up the full screen or If you want to ensure that an image takes up the full screen or

half the screen use percentages - must specify.half the screen use percentages - must specify.• If you want the image to be a certain size use the pixel setting If you want the image to be a certain size use the pixel setting

- default.- default.


5252


Adjusting the Width and HeightAdjusting the Width and Height

<img src = “metalman_green.gif” alt=“scary green man” <img src = “metalman_green.gif” alt=“scary green man” height=“309” width=“345”height=“309” width=“345” / />>

<img src = "pixel.gif" alt="line" width="100%" <img src = "pixel.gif" alt="line" width="100%" height=“height=“2px2px““ / />>


5353


Using Images as LinksUsing Images as Links

• Exactly the same as using textExactly the same as using text• Use the anchor tag <a> to surround the item you want to act as Use the anchor tag <a> to surround the item you want to act as

your hyperlink.your hyperlink.

<a href=“ghost_story.htm”><a href=“ghost_story.htm”>

<img src = <img src = ““ghost5.gif”ghost5.gif”

alt = “click here for more ghostly tales” alt = “click here for more ghostly tales” width="80" height="80”width="80" height="80” / />>

</a> </a>


5454

Creating TablesCreating Tables

Table: Table: An arrangement of horizontal rows and vertical An arrangement of horizontal rows and vertical columns. The intersection of a row and a column is columns. The intersection of a row and a column is called a cell.called a cell.

Used for:Used for:• displaying tabular data in rows and columnsdisplaying tabular data in rows and columns• controlling the layout and appearance of a Web pagecontrolling the layout and appearance of a Web page


5555


Creating tables requires organisationCreating tables requires organisation

All tables begin with the All tables begin with the <table><table> tag and end with a tag and end with a </table></table> tag. tag.

In between those tags are three other tags to be In between those tags are three other tags to be aware of:aware of:• <tr> <tr> defines a horizontal rowdefines a horizontal row• <td> <td> defines a data cell within that rowdefines a data cell within that row• <th> <th> specifies a data cell as a table heading (in newer specifies a data cell as a table heading (in newer

browsers, a table heading cell is formatted as centered and browsers, a table heading cell is formatted as centered and bold).bold).


5656



5757


Formatting TablesFormatting Tables - Attributes - Attributes

• borderborder (default: (default: 00))

Width of the border (in pixels - Width of the border (in pixels - <table><table> tag) tag)

• cellpadding cellpadding (default: (default: 00))

Space between border & content (in pixels - Space between border & content (in pixels - <table><table> tag)tag)

• cellspacingcellspacing (default: (default: 00))

Space between cells (in pixels - Space between cells (in pixels - <table><table> tag). tag).


5858


Formatting TablesFormatting Tables - Attributes - Attributes

• vvalign align (default: (default: centercenter))

Vertical alignment of cell contents (Vertical alignment of cell contents (top, bottomtop, bottom, or, or

baselinebaseline))

• widthwidth (default: (default: to fitto fit))

Width of table or cells (in pixels or as a Width of table or cells (in pixels or as a %% of the page) of the page)


5959

<html><head><title>My first formatted table</title></head>

<body>

<table border="1"><tr><th > Column 1 </th> <th > Column 2</th></tr><tr><td align="center"> Row 2 </td><td align="center"> Row 2</td></tr><tr><td align="center"> Row 3 </td><td align="center"> Row 3</td></tr></table>

</body></html>



6060

Advanced TablesAdvanced Tables

The The colspancolspan and and rowspanrowspan attributesattributes are invaluable in creating are invaluable in creating complex tablescomplex tables::

<html><html><head><title>My first formatted table</title></head><head><title>My first formatted table</title></head>

<body><body><table border="1"><table border="1"><tr><th colspan="2"> Column 1 and Column 2 are combined <tr><th colspan="2"> Column 1 and Column 2 are combined

</th></tr></th></tr><tr><td> Row 2 </td> <td rowspan="2"> Row 2 and Row 3 are <tr><td> Row 2 </td> <td rowspan="2"> Row 2 and Row 3 are

combined</td></tr>combined</td></tr><tr><td> Row 3 </td></tr> <tr><td> Row 3 </td></tr> </table></table></body></body></html></html>


6161

FormsForms

FormsForms• Text fieldsText fields• ButtonsButtons• CheckboxesCheckboxes• RadiobuttonsRadiobuttons• Lists/menusLists/menus• Edit Form PropertiesEdit Form Properties


6262

Building FormsBuilding Forms

The basic construction of a html form isThe basic construction of a html form is::

<<formform>> begin a form begin a form

<<input /input /> ask for information in one of > ask for information in one of several different ways... several different ways...

<<input /input /> ...there can be as many input > ...there can be as many input areas as you wish areas as you wish

</</formform> end a form > end a form


6363


The most common The most common typetype of form of form <<inputinput>> is is texttext..

<<formform>><<inputinput typetype="text“="text“ / />></</formform>>


6464


Every input needs a name. Every input needs a name.

<<formform>>

<<inputinput typetype="text" ="text" namename=“=“addressaddress““ / />>

</</formform>>

• When the user types in his address (When the user types in his address (eg. eg. 1313 Mockingbird 1313 Mockingbird Lane), it will become the input's value and be paired with Lane), it will become the input's value and be paired with addressaddress so the end result after so the end result after processing will beprocessing will be::

addressaddress=1313 Mockingbird Lane.=1313 Mockingbird Lane.


6565


We can if we want, type in a We can if we want, type in a valuevalue..

<<formform>>

<<inputinput typetype="text" ="text" namename=“=“addressaddress" " valuevalue="44 ="44 Cherry St“Cherry St“ / />>

</</formform>>

This will automatically pair the This will automatically pair the valuevalue 44 Cherry St with 44 Cherry St with the name the name addressaddress, unless the user changes it. , unless the user changes it.


6666


We can specify the size of the text input box. We can specify the size of the text input box.

<<formform>>

<<inputinput typetype="text" ="text" namename=“=“addressaddress" " valuevalue="44 Cherry St“="44 Cherry St“ size size=“10”=“10” / />>

</</formform>>


6767


If we want, we can specify how many characters a user If we want, we can specify how many characters a user can input. can input.

<<formform>>

<<inputinput typetype="text" ="text" namename=“=“addressaddress" " valuevalue="44 Cherry St“="44 Cherry St“ size size==“3“300”” maxlengthmaxlength==““1010” /” />>

</</formform>>


6868


Very similar to the Very similar to the typetype==“text”“text” is the is the typetype==“password”“password”..

It is exactly the same, except it displays *** instead of the It is exactly the same, except it displays *** instead of the actual input. actual input.

The browser will send you the input,The browser will send you the input, it just won't display it just won't display it. it.

<<formform>><<inputinput typetype="password“="password“ / />></</formform>>


6969


Remember that each Remember that each <<inputinput>> must have a must have a namename. .

<<formform>>

<<inputinput typetype="password“="password“ name name=“=“userpassuserpass““ / />></</formform>>

sizesize, , valuevalue, and , and maxlengthmaxlength attributes work here attributes work here also. also.


7070


Radio Buttons and Check Boxes.Radio Buttons and Check Boxes.

• Radio buttons allow the user to choose one of several Radio buttons allow the user to choose one of several options. options.

• Check Boxes allow the user to choose one or more orCheck Boxes allow the user to choose one or more or all of several options. all of several options.


7171


Radio Buttons. Radio Buttons.

<<formform>>

<<inputinput typetype="radio" ="radio" namename=“=“best friendbest friend”” / />><br /><br />

<<inputinput typetype="radio" ="radio" namename=“=“best friendbest friend”” / />><br /><br />

<<inputinput typetype="radio" ="radio" namename=“=“best friendbest friend”” / />>

</</formform>>

Note that each input has the same name. The reason will become Note that each input has the same name. The reason will become apparent. apparent.


7272


Radio Buttons Radio Buttons

• Each of the Radio Buttons must be assigned a Each of the Radio Buttons must be assigned a valuevalue. You also need to label them.. You also need to label them.

<<formform>><<inputinput typetype="radio" ="radio" namename=“=“best friendbest friend““ value=“Anne” /value=“Anne” />>Anne Smith<br />Anne Smith<br /><<inputinput typetype="radio" ="radio" namename=“=“best friendbest friend““ value=“Susan” /value=“Susan” />>Susan Murphy<br />Susan Murphy<br /><<inputinput typetype="radio" ="radio" namename=“=“best friendbest friend““ value=“Mary” /value=“Mary” />>Mary O’BrienMary O’Brien</</formform>>


7373


Radio Buttons Radio Buttons

• You can tidy things up by adding a statement above You can tidy things up by adding a statement above the buttons, and if you want, choose a default the buttons, and if you want, choose a default selection (optional). selection (optional).

<<formform>>Who is your best friend?Who is your best friend?<<inputinput typetype="radio" ="radio" namename=“=“best friendbest friend““ value=“Anne” value=“Anne” checked= “checked” /checked= “checked” />>Anne Smith<br />Anne Smith<br /><<inputinput typetype="radio" ="radio" namename=“=“best friendbest friend““ value=“Susan” /value=“Susan” />>Susan Murphy<br />Susan Murphy<br /><<inputinput typetype="radio" ="radio" namename=“=“best friendbest friend““ value=“Mary” /value=“Mary” />>Mary O’BrienMary O’Brien</</formform>>


7474


Radio ButtonsRadio Buttons

• The user of course can only choose 1 option. Their The user of course can only choose 1 option. Their choice will be returned to you as the name/value pair choice will be returned to you as the name/value pair ‘‘best friendbest friend=“=“Anne”’Anne”’ (or whoever they pick). (or whoever they pick).


7575


Check BoxesCheck Boxes• Building Check Boxes is pretty much the same thing. However Building Check Boxes is pretty much the same thing. However

for Check Boxes the for Check Boxes the namename changes and the changes and the valuevalue stays the stays the same and with Radio Buttons, the same and with Radio Buttons, the valuevalue changes but the changes but the namename stays the same. stays the same.

<form><form><input type="checkbox" name=“<input type="checkbox" name=“MaryMary““ value=“yes” / value=“yes” />><br /><br /><input type="checkbox" name=“<input type="checkbox" name=“AnneAnne““ value=“yes” / value=“yes” /> > <br /><br /><input type="checkbox" name=“<input type="checkbox" name=“SusanSusan““ value=“yes” / value=“yes” />><br /><br /><input type="checkbox" name=“<input type="checkbox" name=“NiamhNiamh““ value=“yes” / value=“yes” />></form></form>


7676


Check BoxesCheck Boxes

• OK, let's label each box and lastly, you may want to add a little OK, let's label each box and lastly, you may want to add a little something above your check boxes and maybe pick a couple something above your check boxes and maybe pick a couple defaults. defaults.

<form><form> <p><p>Which of these guys are your friends?Which of these guys are your friends?</p></p>

<input type="checkbox" name=“<input type="checkbox" name=“MaryMary““ value=“yes” value=“yes” //>>Mary O’Brien<br />Mary O’Brien<br /><input type="checkbox" name=“<input type="checkbox" name=“AnneAnne““ value=“yes” value=“yes” checked=“checked” /checked=“checked” />>Anne Smith<br />Anne Smith<br /><input type="checkbox" name=“<input type="checkbox" name=“SusanSusan““ value=“yes” value=“yes” //>>Susan Murphy<br />Susan Murphy<br /><input type="checkbox" name=“<input type="checkbox" name=“NiamhNiamh““ value=“yes” value=“yes” checked =“checked” /checked =“checked” />>Niamh O’DeaNiamh O’Dea

</form></form>


7777


Check BoxesCheck Boxes

• The user can choose 1, 2, none or all of the options. Their The user can choose 1, 2, none or all of the options. Their choices will be returned to you as the name/value pairs... choices will be returned to you as the name/value pairs...

• AnneAnne==yesyes• NiamhNiamh==yesyes

• (or whatever they choose... if they choose nothing, nothing will (or whatever they choose... if they choose nothing, nothing will be returned to you) be returned to you)


7878


Drop Down MenusDrop Down Menus

• With this type you use <With this type you use <selectselect> instead of <> instead of <inputinput> and it has > and it has a closing tag. a closing tag.

• Don't forget to give it a name. Don't forget to give it a name.

<form><form>

<select name=“best friend”><select name=“best friend”>

</select></select>

</form></form>


7979


Drop Down MenusDrop Down Menus

• Next add a few Next add a few optionsoptions a and give each nd give each <<optionoption>> a a valuevalue. We can also specify a default other than the first . We can also specify a default other than the first option in the list.option in the list.

<<formform>><<select nameselect name="="best friendbest friend">"><<option value=“Mary”option value=“Mary”>>Mary</option>Mary</option><<option value=“Anne”option value=“Anne”> > Anne</option>Anne</option><<option value=“Susan”option value=“Susan”> > Susan</option>Susan</option><<option value=“Niamh” selected=“selected option value=“Niamh” selected=“selected > > Niamh</option>Niamh</option></</selectselect>></</formform>>


8080

Building FormsBuilding Forms Scrolling MenusScrolling Menus

• A Scrolling A Scrolling MenuMenu is very similar in construction to a is very similar in construction to a Drop down Drop down MenuMenu. .

• JustJust add a add a sizesize attribute to the attribute to the <<selectselect>> tag tag (t (the he sizesize is simply is simply how many options show in the windowhow many options show in the window).).

<<formform>><<select nameselect name=“=“best friendbest friend”” size=“2” size=“2”>><<option value=“Mary”option value=“Mary”>>Mary </option>Mary </option><<option value=“Anne”option value=“Anne”> > Anne </option>Anne </option><<option value=“Susan”option value=“Susan”> > Susan </option>Susan </option><<option value=“Niamh”option value=“Niamh”>>Niamh </option>Niamh </option></</selectselect>></</formform>>


8181


Text AreasText Areas

• A very useful type of inputA very useful type of input

<<formform>>

<<textareatextarea namename=“=“commentscomments">">

</</textareatextarea>>

</</formform>>


8282


Text AreasText Areas• You control the size of the box like so... You control the size of the box like so...

<<formform>>

<<textareatextarea namename=“=“commentscomments" " rowsrows==““66”” colscols==““5050””>>

</</textareatextarea>>

</</formform>>

• rowsrows is the height, is the height, colscols is the width. is the width.


8383


SubmitSubmit and and ResetReset BButtons uttons

<<formform>><<inputinput typetype="submit“="submit“ / />></</formform>>

• submitsubmit of course, sends the data... of course, sends the data... • ...and ...and resetreset, clears the form. , clears the form.

<<formform>><<inputinput typetype=“=“resetreset““ / />></</formform>>


8484


SubmitSubmit and and ResetReset BButtonsuttons• We can easily change what the buttons say. We can easily change what the buttons say.

<<formform>>

<<inputinput typetype="submit" ="submit" valuevalue==""Send it awaySend it away” /” />>

<<inputinput typetype="reset" ="reset" valuevalue="Clear the form“="Clear the form“ / />>

</</formform>>


8585

XML DeclarationXML Declaration

Every strictly conforming XHTML document Every strictly conforming XHTML document must begin with an XML declaration:must begin with an XML declaration:

<?xml version “1.0” charset=“iso-<?xml version “1.0” charset=“iso-8859-1” ?>8859-1” ?>

Simply states that the rest of the document is Simply states that the rest of the document is XMLXML


8686

XML DeclarationXML Declaration

The version attribute gives the version of XML The version attribute gives the version of XML that the document is based on – currently the that the document is based on – currently the supported value is “1.0”supported value is “1.0”

The charset property defines the character set The charset property defines the character set and encoding in which the document is stored and encoding in which the document is stored on a computer.on a computer.


8787

<HTML><HTML>

To conform to the XHTML 1.0 standard To conform to the XHTML 1.0 standard The root The root element of the document must be element of the document must be htmlhtml..

The root element of the document must contain an The root element of the document must contain an xmlnsxmlns declaration for the XHTML namespace declaration for the XHTML namespace..

The namespace for XHTML is defined to be The namespace for XHTML is defined to be http://www.w3.org/1999/xhtmlhttp://www.w3.org/1999/xhtml. An example root . An example root element might look like:element might look like:<html xmlns="http://www.w3.org/1999/xhtml" <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> xml:lang="en" lang="en">


8888

<HTML><HTML>

The The xmlnsxmlns attribute indicates the URL attribute indicates the URL identifying the identifying the namespacenamespace location – a resource location – a resource containing a general definition of the language.containing a general definition of the language.

i.e. the place at which the element names and i.e. the place at which the element names and language rules are defined.language rules are defined.

The value for XHTML is fixed.The value for XHTML is fixed.


8989

Three "flavours" of XHTML 1.0Three "flavours" of XHTML 1.0

XHTML 1.0 is specified in three "flavours". XHTML 1.0 is specified in three "flavours".

You specify which of these variants you are You specify which of these variants you are using by inserting a line at the beginning of the using by inserting a line at the beginning of the document. document.

Each variant has its own DTD - Document Type Each variant has its own DTD - Document Type Definition - which sets out the rules and Definition - which sets out the rules and regulations for using HTML in a succinct and regulations for using HTML in a succinct and definitive manner.definitive manner.


9090

XHTML 1.0 StrictXHTML 1.0 Strict

Use this when you want really clean structural Use this when you want really clean structural mark-up, free of any markup associated with mark-up, free of any markup associated with layout. layout.

Use this together with W3C's Cascading Style Use this together with W3C's Cascading Style Sheet language (Sheet language (CSSCSS) to get the font, color, and ) to get the font, color, and layout effects you want.layout effects you want.


9191

XHTML 1.0 TransitionalXHTML 1.0 Transitional

Many people writing Web pages for the general Many people writing Web pages for the general public to access might want to use this flavor of public to access might want to use this flavor of XHTML 1.0. XHTML 1.0.

The idea is to take advantage of XHTML The idea is to take advantage of XHTML features including style sheets but nonetheless features including style sheets but nonetheless to make small adjustments to your markup for to make small adjustments to your markup for the benefit of those viewing your pages with the benefit of those viewing your pages with older browsers which can't understand style older browsers which can't understand style sheets. sheets.


9292

XHTML 1.0 FramesetXHTML 1.0 Frameset

Use this when you want to use Frames to Use this when you want to use Frames to partition the browser window into two or more partition the browser window into two or more frames.frames.


9393

DOCTYPE DeclarationsDOCTYPE Declarations

There must be a DOCTYPE declaration in the There must be a DOCTYPE declaration in the document prior to the root element. document prior to the root element.

The public identifier included in the DOCTYPE The public identifier included in the DOCTYPE declaration must reference one of the three declaration must reference one of the three DTDs using the respective Formal Public DTDs using the respective Formal Public Identifier. Identifier.


9494


XHTML 1.0 StrictXHTML 1.0 Strict::

<!DOCTYPE html PUBLIC "-//W3C//DTD <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/x"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">html1-strict.dtd">


9595


XHTML 1.0 TransitionalXHTML 1.0 Transitional::

<!DOCTYPE html PUBLIC "-//W3C//DTD <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/x"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">html1-transitional.dtd">


9696


XHTML 1.0 FramesetXHTML 1.0 Frameset::

<!DOCTYPE html PUBLIC "-//W3C//DTD <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/x"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd"> html1-frameset.dtd">


9797

Put it all together…Put it all together…

<?xml version “1.0” charset=“iso-8859-1” ?><?xml version “1.0” charset=“iso-8859-1” ?> <!DOCTYPE html PUBLIC "-//W3C//DTD <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> xml:lang="en" lang="en"> <head> <title><head> <title>XHTMLXHTML</title> </head> </title> </head> <body> </body> <body> </body> </html> </html>


9999

Relevant BooksRelevant Books

Ian S. Graham, Ian S. Graham, XHTML 1.0 Language and Design XHTML 1.0 Language and Design SourcebookSourcebook, Wiley, 2000., Wiley, 2000.

John Shelley, John Shelley, XHTML and CSS ExplainedXHTML and CSS Explained, Bernard , Bernard Babani, 2001.Babani, 2001.

Chuck Musciano & Bill Kennedy, Chuck Musciano & Bill Kennedy, HTML & XHTML: The HTML & XHTML: The Definitive GuideDefinitive Guide, O'Reilly & Associates 2002. , O'Reilly & Associates 2002.


100100

Relevant SitesRelevant Sites W3C - The World Wide Web ConsortiumW3C - The World Wide Web Consortium

http://www.w3.org/http://www.w3.org/

Webmonkey - Web developers’ resourcesWebmonkey - Web developers’ resourceshttp://http://hotwired.lycos.com/webmonkeyhotwired.lycos.com/webmonkey//

DevEdge Online - Netscape developers’ supportDevEdge Online - Netscape developers’ supporthttp://devedge.netscape.com/http://devedge.netscape.com/

MSDN Online - Microsoft developers’ supportMSDN Online - Microsoft developers’ supporthttp://msdn.microsoft.com/http://msdn.microsoft.com/


101101

XHTML 2.0XHTML 2.0

Great article (the first of a few...):Great article (the first of a few...): http://www.xml.com/pub/a/2003/03/19/dive-into-xml.htmlhttp://www.xml.com/pub/a/2003/03/19/dive-into-xml.html

And here is the specification (working draft version May And here is the specification (working draft version May 2003): 2003): http://www.w3.org/TR/xhtml2/http://www.w3.org/TR/xhtml2/

There is also an XForms working draft available that will There is also an XForms working draft available that will replace the <frame> element from the xhtml-1.0-replace the <frame> element from the xhtml-1.0-frameset specification frameset specification

http://www.w3.org/TR/xframes/http://www.w3.org/TR/xframes/


102102

XHTML 2.0XHTML 2.0

Comparison between XHTML1 and XHTML2: Comparison between XHTML1 and XHTML2: • XHTML 2.0 is NOT intended to be backwards-compatible. All of the XHTML 2.0 is NOT intended to be backwards-compatible. All of the

deprecated tags from HTML 4.01 have been removed. deprecated tags from HTML 4.01 have been removed. • Forms are replaced with XForms Forms are replaced with XForms • <img> and <applet> tags have been dropped in favour of the object <img> and <applet> tags have been dropped in favour of the object

element. element. • <p> elements can no longer contain additional nested <p> elements. <p> elements can no longer contain additional nested <p> elements. • The new <section> element, in conjunction with the <h> element, The new <section> element, in conjunction with the <h> element,

offers a mechanism for structuring documents into sections to offers a mechanism for structuring documents into sections to enhance the often badly used <h1><h2>... elements. enhance the often badly used <h1><h2>... elements.

• <br> has been depreciated to be replaced by <line>. <br> has been depreciated to be replaced by <line>. • <q> is replaced with <quote>.<q> is replaced with <quote>.• New elements <nl> and <name> have been added to specifically New elements <nl> and <name> have been added to specifically

address navigation lists, etc. address navigation lists, etc. • The href attribute has now become a common attribute which means The href attribute has now become a common attribute which means

any element can be a link and have events attached to it. any element can be a link and have events attached to it.

Introduction to XHTML, 2006 ©Nina Bresnihan, TCD. 1 Introduction to XHTML 1.0

Documents

Transcript of Introduction to XHTML, 2006 ©Nina Bresnihan, TCD. 1 Introduction to XHTML 1.0