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

2. Ingeniørhøjskolen i Århus Agenda HTML & XHTML –Background –Browser Rendering –Basic HTML Elements –W3C validation service –HTML Elements Headers Links Formatting Images Lists

3. Ingeniørhøjskolen i Århus 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/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 Read

4. Ingeniørhøjskolen i Århus 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.asphttp://www.w3schools.com/html/html_reference.asp

5. Ingeniørhøjskolen i Århus 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

6. Ingeniørhøjskolen i Århus 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

7. Ingeniørhøjskolen i Århus 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.asphttp://www.w3schools.com/xhtml/xhtml_html.asp

8. Ingeniørhøjskolen i Århus 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 Title goes here Body content goes here Title goes here Body content goes here

9. Ingeniørhøjskolen i Århus 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

10. Ingeniørhøjskolen i Århus 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

11. Ingeniørhøjskolen i Århus DOCTYPE II XHTML 1.0 Strict – –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 – –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 – –Use this when you plan on using HTML Frames to divide the browser windows into multiple documents and navigation areas

12. Ingeniørhøjskolen i Århus HTML – Proces 1 HTTP Request (over TCP/IP) GET /request-URI HTTP/version User enters a URL into browser http://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 OK Server: 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... The rest of the document follows here Browser recieves response: Renders the document to a user Freindly format Web server finds using IP address & DNS Typically listening on port 80

13. Ingeniørhøjskolen i Århus HTML – How it Looks 1 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 9 10 Internet and WWW How to Program - Welcome 11 12 13 14 Welcome to XHTML! 15 16 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

14. Ingeniørhøjskolen i Århus Tags and Elements What is a ”Tag”? –Used for formatting content – content –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

15. Ingeniørhøjskolen i Århus Tags and Elements Examples: – – text that we need in bold – this is a textline Question: which of the above er legal and which are not?

16. Ingeniørhøjskolen i Århus Exaxmples of Tags/Elements Paragraph: … Linebreak: (in HTML ) Ordered list: … Unordered list: … List Elements:... Containers: … … See overview of HTML 4.01 at: –http://www.w3schools.com/html/html_reference.asphttp://www.w3schools.com/html/html_reference.asp

17. Ingeniørhøjskolen i Århus Main.html Program Output 1 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 9 10 Internet and WWW How to Program - Welcome 11 12 13 14 Welcome to XHTML! 15 16 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

18. Ingeniørhøjskolen i Århus Validation of XHTML code May be done at: –http://validator.w3.org/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

19. Ingeniørhøjskolen i Århus Header.html 1 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 9 10 Internet and WWW How to Program - Headers 11 12 13 14 15 Level 1 Header 16 Level 2 header 17 Level 3 header 18 Level 4 header 19 Level 5 header 20 Level 6 header 21 22 23 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.

20. Ingeniørhøjskolen i Århus Links.html 1 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 9 10 Internet and WWW How to Program - Links 11 12 13 14 15 Here are my favorite sites 16 17 Click on a name to go to that page. 18 19 Deitel 20 21 Prentice Hall 22 23 Yahoo! 24 25 USA Today 26 27 28 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.

21. Ingeniørhøjskolen i Århus Contact.html 1 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 9 10 Internet and WWW How to Program - Contact Page 11 12 13 14 15 16 My email address is 17 deitel@deitel.com 18. Click the address and your browser will open an 19 email message and address it to me. 20 21 22 To create an email link include “mailto:” before the email address in the href attribute.

22. Ingeniørhøjskolen i Århus Picture.html 1 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 9 10 Internet and WWW How to Program - Welcome 11 12 13 14 15 <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" /> 19 20 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.

23. Ingeniørhøjskolen i Århus Nav.html 1 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 9 10 Internet and WWW How to Program - Navigation Bar 11 12 13 14 15 16 17 18 <img src = "buttons/links.jpg" width = "65" 19 height = "50" alt = "Links Page" /> 20 21 22 <img src = "buttons/list.jpg" width = "65" 23 height = "50" alt = "List Example Page" /> 24 25 26 <img src = "buttons/contact.jpg" width = "65" 27 height = "50" alt = "Contact Page" /> 28 29 30 <img src = "buttons/header.jpg" width = "65" 31 height = "50" alt = "Header Page" /> 32 33 34 <img src = "buttons/table.jpg" width = "65" 35 height = "50" alt = "Table Page" /> 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.

24. Ingeniørhøjskolen i Århus Nav.html Program Output 36 37 38 <img src = "buttons/form.jpg" width = "65" 39 height = "50" alt = "Feedback Form" /> 40 41 42 43 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.

25. Ingeniørhøjskolen i Århus Contact2.html 1 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 9 10 Internet and WWW How to Program - Contact Page 11 12 13 14 15 16 17 18 My email address is 19 deitel@deitel.com 20. Click on the address and your browser will 21 automatically open an email message and address it to my 22 address. 23 24 25 26 All information on this site is © 27 Deitel & Associates, Inc. 2002. 28 29 30... tags, it can be set in subscript --> 31..., and it can be set into --> 32 --> 33 You may download 3.14 x 10 2 34 characters worth of information from this site. 35 Only one download per hour is permitted. 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

26. Ingeniørhøjskolen i Århus Links2.html 1 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 9 10 Internet and WWW How to Program - Links 11 12 13 14 15 Here are my favorite sites 16 17 Click on a name to go to that page. 18 19 20 Deitel 21 22 Prentice Hall 23 24 25 Yahoo! 26 27 USA Today 28 29 30 31 The entries in an unordered list must be included between the and tags. An entry in the list must be placed between the and tags.

27. Ingeniørhøjskolen i Århus List.html 1 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 9 10 Internet and WWW How to Program - Lists 11 12 13 14 15 The Best Features of the Internet 16 17 18 You can meet new people from countries around 19 the world. 20 You have access to new media as it becomes public: 21 22 23 24 tag --> 25 26 New games 27 New applications 28 29 30 31 For business 32 For pleasure 33 34 35 Entries for an ordered list must be placed between the and tags. By inserting a list as an entry in another list, lists can be nested.

28. Ingeniørhøjskolen i Århus List.html 36 Around the clock news 37 Search engines 38 Shopping 39 Programming 40 41 42 XML 43 Java 44 XHTML 45 Scripts 46 New languages 47 48 49 50 51 52 53 54 Links 55 Keeping in touch with old friends 56 It is the technology of the future! 57 58 59 60 My 3 Favorite CEOs 61 62 63 64 65 Harvey Deitel 66 Bill Gates 67 Michael Dell 68 The type attribute of the ordered list element allows you to select a sequence type to order the list.