Presentation 3: Basic HTML & XHTML Fundamentals of Web-Centric Development.

Presentation 3:

Basic HTML & XHTML

Fundamentals of Web-Centric Development

Ingeniørhøjskolen i Århus

Agenda

• HTML & XHTML– Background

– Browser Rendering

– Basic HTML Elements

– W3C validation service

– HTML Elements• Headers• Links• Formatting• Images• Lists


HTML Background

• ”Invented” by Tim Berners-Lee along with HTTP as a facility for researchers (and others) to publish information on the Internet

• Legacy: Standard Generalized Markup Language (SGML) – http://www.w3.org/MarkUp/SGML/

• HTML carries both content and formatting information

• Content is information a user might need (text)

• HTML Elements (Tags) are for organizing and formatting – how the Browser should render data

This Content is for Humans to ReadThis Content is for Humans to Read

<b>This Content is for Humans to Read</b><b>This Content is for Humans to Read</b>


HTML Background

• Elements / Tags instructs Browser how to render a document

• Opposed to XML and XSL content and formatting is NOT separated

• Optional (recommended) use of Cascading Style Sheets for this

• Different concept than other types of programming

• See an overview of HTML 4.01 at– http://www.w3schools.com/html/html_reference.asp


HTML History

• 1992: HTML 1.0, Tim-Berners Lee original proposal• 1993: HTML+, various enhancement, primarily on layout• 1994: HTML 2.0, new standard with many enhancements• 1995: Several “non standard” Netscape features• 1996: Browser War: Netscape & Explorer not compatible• 1996: HTML 3.2, new standard, end of Browser War • 1997: HTML 4.0, CSS stylesheets introduced• 1999: HTML 4.01, the “final” HTML version• 2000: XHTML 1.0, XML version of HTML 4.01• 2001: XHTML 1.1, various changes• 2002: XHTML 2.0, major revision• 2008: HTML 5.0 on its way• 2012: HTML 5.0 finished?• Other markup: XML, WML, cHTML, HDML + many more


HTML vs XHTML

• XHTML is the successor of HTML– XML compliant version of HTML– Why? Too much ”Bad HTML”– Resource heavy to parse and render ”Bad/Invalid HTML”– Especially small devices (cell phones/PDA’s)– WAP/WML/XHTML MP– XHTML first fully functionally with Internet Explorer 5.5– Watch out for old browser versions!– Always dangerous to use too advanced HTML functionality– Important to design for older version browsers and many vendors– Check your target group

– Read more at:• http://www.w3schools.com/xhtml


HTML vs XHTML - Differences

• Major Differences:– XHTML is now based on XML and thus:– XHTML must be correctly nested– XHTML must be well-formed– Element and attribute names must be lowercase – All XHTML elements must be correctly closed– Attribute values must be in in quotation marks– ”id” atttribute replaces the ”name” attribute– XHTML DTD defines required elements

• See more at:– http://www.w3schools.com/xhtml/xhtml_html.asp


Structure of an XHTML document

• All XHTML documents must have a DOCTYPE declaration. ”html”, ”head” & ”body” elements must be present, and a ”title” element embedded in the ”head” element.

• Basic XHTML Template:

• DOCTYPE declaration is NOT part of the XHTML document.

• It is NOT an XHTML element and is not closed

<!DOCTYPE Doctype goes here><html> <head> <title>Title goes here</title> </head> <body> Body content goes here </body></html>

<!DOCTYPE Doctype goes here><html> <head> <title>Title goes here</title> </head> <body> Body content goes here </body></html>


DOCTYPE

• A DOCTYPE may appear as below:

• It instructs the browser what type of document this is, what elements are allowed – and how it should render the document

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


DOCTYPE

• The 3 Document Type Definitions– DTD specifices the syntax of a web page in SGML/XML/HTML. – DTD is used by SGML/XML/HTML applications, to specify rules

that governs the markup of documents of a specific type, including a given set of allowed element

– XHTML is specified by a SGML Document Type Definition also called a 'DTD'.

– XHTML DTD is formatted in a precise, computer-readable language (Extended Backus-Naur)

• 3 General XHTML DTD’er (document types) available– STRICT – TRANSITIONAL – FRAMESET


DOCTYPE II

• XHTML 1.0 Strict– <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">– Use this for extremely clean markup, almost totally free of formatting information

and presentation elements. Use Cascading Style Sheets (CSS) for formatting

• XHTML 1.0 Transitional– <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">– Use this for to allow for a more liberal formatting element usage and a transition

from HTML 4.01’s presentation elements and thus more cluttered design– CSS may still be used

• XHTML 1.0 Frameset– <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">– Use this when you plan on using HTML Frames to divide the browser windows into

multiple documents and navigation areas


HTML – Proces

1 HTTP Request (over TCP/IP)GET /request-URI HTTP/version

User enters a URL into browserhttp://www.dr.dk

2

Web server recieves the request:Finds the requested document and embedded resources (images, css, js)And returns it

3

A typical HTTP response would look something like this

HTTP/1.0 200 OKServer: Netscape-Communications/1.1 Date: Tuesday, 25-Nov-97 01:22:04 GMT Last-modified: Thursday, 20-Nov-97 10:44:53 GMT Content-length: 6372 Content-type: text/html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">

<HTML> ...The rest of the document follows here

Browser recieves response:Renders the document to a userFreindly format

Web server finds using IP address & DNSTypically listening on port 80


HTML – How it Looks1 <?xml version = "1.0"?>2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"3 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">4 5 6 7 8 <html xmlns = "http://www.w3.org/1999/xhtml">9 <head>10 <title>Internet and WWW How to Program - Welcome</title>11 </head>12 13 <body>14 <p>Welcome to XHTML!</p>15 </body>16 </html>

These are the only “nodes” the user will see.

The rest is for rendering and formatting purposes

Not a totally clear separation of content and presentation


Tags and Elements

• What is a ”Tag”?– Used for formatting content– <tag attribute=”value”>content</tag>

– Must be lowercase in XTHML (XML is case sensistive)

– XML Tags (e.g. XHTML & WML) must be ”Well Formed”

– No restrictions in pre-XHTML HTML (4.01 and below)

• Start + Close Tag -> Element


Tags and Elements

• Examples:– <img src=”pircture.gif” alt=”alternativ tekst” align=”right”>

– <b>text that we need in bold</b>

– <b>this is a textline

• Question: which of the above er legal and which are not?


Exaxmples of Tags/Elements

• Paragraph: <p>…</p>• Linebreak: <br/> (in HTML <br>)• Ordered list: <ol>…</ol>• Unordered list: <ul>…</ul>• List Elements: <li> ... </li>• Containers: <div>…</div>• <span>…</span>• See overview of HTML 4.01 at:

– http://www.w3schools.com/html/html_reference.asp


Main.html

Program Output

1 <?xml version = "1.0"?>2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"3 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">4 5 6 7 8 <html xmlns = "http://www.w3.org/1999/xhtml">9 <head>10 <title>Internet and WWW How to Program - Welcome</title>11 </head>12 13 <body>14 <p>Welcome to XHTML!</p>15 </body>16 </html>

The text between the title tags appears as the title of the web page.

Elements between the body tags of the html document appear in

the body of the web page


Validation of XHTML code

• May be done at:– http://validator.w3.org/– Files may be uploaded or

checked via link– Should ALWAYS be

done before deployment

Try it out:• www.au.dk• www.microsoft.com • www.google.com


Header.html

1 <?xml version = "1.0"?>2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"3 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">4 5 6 7 8 <html xmlns = "http://www.w3.org/1999/xhtml">9 <head>10 <title>Internet and WWW How to Program - Headers</title>11 </head>12 13 <body>14 15 <h1>Level 1 Header</h1> 16 <h2>Level 2 header</h2> 17 <h3>Level 3 header</h3> 18 <h4>Level 4 header</h4> 19 <h5>Level 5 header</h5> 20 <h6>Level 6 header</h6> 21 22 </body>23 </html>

The font size of the text between tags decreases as the header level increases.

Every XHTML document is required to have opening and closing html tags.


Links.html

1 <?xml version = "1.0"?>2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"3 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">4 5 6 7 8 <html xmlns = "http://www.w3.org/1999/xhtml">9 <head>10 <title>Internet and WWW How to Program - Links</title>11 </head>12 13 <body>14 15 <h1>Here are my favorite sites</h1>16 17 <p><strong>Click on a name to go to that page.</strong></p>18 19 <p><a href = "http://www.deitel.com">Deitel</a></p>20 21 <p><a href = "http://www.prenhall.com">Prentice Hall</a></p>22 23 <p><a href = "http://www.yahoo.com">Yahoo!</a></p>24 25 <p><a href = "http://www.usatoday.com">USA Today</a></p>26 27 </body>28 </html>

Text between strong tags will appear bold.

Elements placed between paragraph tags will be set apart from other

elements on the page with a vertical line before and after it.

Linking is accomplished in XHTML with the anchor (a) element.

The anchor links to the page that’s value is given

by the href attribute.

The text between the a tags is the anchor for the link.


Contact.html

1 <?xml version = "1.0"?>2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"3 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">4 5 6 7 8 <html xmlns = "http://www.w3.org/1999/xhtml">9 <head>10 <title>Internet and WWW How to Program - Contact Page11 </title>12 </head>13 14 <body>15 16 <p>My email address is 17 <a href = "mailto:[email protected]"> [email protected] 18 </a>. Click the address and your browser will open an19 email message and address it to me.</p>20 21 </body>22 </html>

To create an email link include “mailto:” before the email

address in the href attribute.


Picture.html

1 <?xml version = "1.0"?>2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"3 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">4 5 6 7 8 <html xmlns = "http://www.w3.org/1999/xhtml">9 <head>10 <title>Internet and WWW How to Program - Welcome</title>11 </head>12 13 <body>14 15 <p><img src = "xmlhtp.jpg" height = "238" width = "183" 16 alt = "XML How to Program book cover" />17 <img src = "jhtp.jpg" height = "238" width = "183"18 alt = "Java How to Program book cover" /></p>19 </body>20 </html>

The value of the src attribute of the image element is the location of the image file.

The height and width attributes of the image

element give the height and width of the image.

The value of the alt attribute gives a description of the image. This description is displayed if

the image cannot be displayed.

The second image could not be displayed properly, so the value of

its alt attribute is displayed instead.


Nav.html

1 <?xml version = "1.0"?>2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"3 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">4 5 6 7 8 <html xmlns = "http://www.w3.org/1999/xhtml">9 <head>10 <title>Internet and WWW How to Program - Navigation Bar11 </title>12 </head>13 14 <body>15 16 <p>17 <a href = "links.html">18 <img src = "buttons/links.jpg" width = "65" 19 height = "50" alt = "Links Page" /></a><br />20 21 <a href = "list.html">22 <img src = "buttons/list.jpg" width = "65" 23 height = "50" alt = "List Example Page" /></a><br />24 25 <a href = "contact.html">26 <img src = "buttons/contact.jpg" width = "65" 27 height = "50" alt = "Contact Page" /></a><br />28 29 <a href = "header.html">30 <img src = "buttons/header.jpg" width = "65" 31 height = "50" alt = "Header Page" /></a><br />32 33 <a href = "table.html">34 <img src = "buttons/table.jpg" width = "65" 35 height = "50" alt = "Table Page" /></a><br />

Placing an image element between anchor tags, creates an image that

is an anchor for a link.

A line break will render an empty line on a web page.


Nav.html

Program Output

36 37 <a href = "form.html">38 <img src = "buttons/form.jpg" width = "65" 39 height = "50" alt = "Feedback Form" /></a><br />40 </p>41 42 </body>43 </html>

Using an image as an anchor works exactly the same as using text.

Clicking on the image entitled “links” brings the user to the page on the right.


Contact2.html

1 <?xml version = "1.0"?>2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"3 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">4 5 6 7 8 <html xmlns = "http://www.w3.org/1999/xhtml">9 <head>10 <title>Internet and WWW How to Program - Contact Page11 </title>12 </head>13 14 <body>15 16 17 18 <p>My email address is 19 <a href = "mailto:[email protected]">[email protected] </a>. Click on the address and your browser will 21 automatically open an email message and address it to my22 address.</p>23 24 <hr /> 25 26 <p>All information on this site is <strong>©</strong>27 Deitel <strong>&</strong> Associates, Inc. 2002.</p>28 29 30 31 32 33 <p><del>You may download 3.14 x 10<sup>2</sup> 34 characters worth of information from this site.</del> 35 Only <sub>one</sub> download per hour is permitted.</p>

The horizontal rule element renders a horizontal line on the web page.

Special characters are denoted with an ampersand (&) and an

abbreviation for that character. In this case, the special characters are

ampersand and copyright.

Æøå kan være specialkakarakter

En moderne HTML editor løser dette for os


Links2.html

1 <?xml version = "1.0"?>2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"3 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">4 5 6 7 8 <html xmlns = "http://www.w3.org/1999/xhtml">9 <head>10 <title>Internet and WWW How to Program - Links</title>11 </head>12 13 <body>14 15 <h1>Here are my favorite sites</h1>16 17 <p><strong>Click on a name to go to that page.</strong></p>18 19 <ul>20 <li><a href = "http://www.deitel.com">Deitel</a></li>21 22 <li><a href = "http://www.prenhall.com">Prentice Hall23 </a></li>24 25 <li><a href = "http://www.yahoo.com">Yahoo!</a></li>26 27 <li><a href = "http://www.usatoday.com">USA Today</a>28 </li>29 </ul>30 </body>31 </html>

The entries in an unordered list must be included between

the <ul> and </ul> tags.

An entry in the list must be placed between the

<li> and </li> tags.


List.html

1 <?xml version = "1.0"?>2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"3 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">4 5 6 7 8 <html xmlns = "http://www.w3.org/1999/xhtml">9 <head>10 <title>Internet and WWW How to Program - Lists</title>11 </head>12 13 <body>14 15 <h1>The Best Features of the Internet</h1>16 17 <ul>18 <li>You can meet new people from countries around 19 the world.</li>20 <li>You have access to new media as it becomes public:21 22 23 24 25 <ul>26 <li>New games</li>27 <li>New applications28 29 30 <ol type = "I">31 <li>For business</li>32 <li>For pleasure</li>33 </ol> 34 </li> 35

Entries for an ordered list must be placed between the <ol> and </ol> tags.

By inserting a list as an entry in another list, lists can be nested.


List.html

36 <li>Around the clock news</li>37 <li>Search engines</li>38 <li>Shopping</li>39 <li>Programming40 41 <ol type = "a">42 <li>XML</li>43 <li>Java</li>44 <li>XHTML</li>45 <li>Scripts</li>46 <li>New languages</li>47 </ol>48 49 </li>50 51 </ul> 52 </li> 53 54 <li>Links</li>55 <li>Keeping in touch with old friends</li>56 <li>It is the technology of the future!</li>57 58 </ul> 59 60 <h1>My 3 Favorite <em>CEOs</em></h1>61 62 63 64 <ol>65 <li>Harvey Deitel</li>66 <li>Bill Gates</li>67 <li>Michael Dell</li>68 </ol>

The type attribute of the ordered list element allows you to select a

sequence type to order the list.

Presentation 3: Basic HTML & XHTML Fundamentals of Web-Centric Development.

Documents