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

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) – 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

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 –

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 : 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

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:

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: –

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

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

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

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

Ingeniørhøjskolen i Århus HTML – Proces 1 HTTP Request (over TCP/IP) GET /request-URI HTTP/version User enters a URL into browser 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/ 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

Ingeniørhøjskolen i Århus HTML – How it Looks 1 2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 3 " Internet and WWW How to Program - Welcome Welcome to XHTML! 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

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

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?

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: –

Ingeniørhøjskolen i Århus Main.html Program Output 1 2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 3 " Internet and WWW How to Program - Welcome Welcome to XHTML! 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

Ingeniørhøjskolen i Århus Validation of XHTML code May be done at: – –Files may be uploaded or checked via link –Should ALWAYS be done before deployment Try it out:

Ingeniørhøjskolen i Århus Header.html 1 2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 3 " Internet and WWW How to Program - Headers Level 1 Header 16 Level 2 header 17 Level 3 header 18 Level 4 header 19 Level 5 header 20 Level 6 header 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.

Ingeniørhøjskolen i Århus Links.html 1 2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 3 " Internet and WWW How to Program - Links Here are my favorite sites Click on a name to go to that page Deitel Prentice Hall Yahoo! USA Today 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.

Ingeniørhøjskolen i Århus Contact.html 1 2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 3 " Internet and WWW How to Program - Contact Page My address is Click the address and your browser will open an 19 message and address it to me To create an link include “mailto:” before the address in the href attribute.

Ingeniørhøjskolen i Århus Picture.html 1 2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 3 " Internet and WWW How to Program - Welcome <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" /> 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.

Ingeniørhøjskolen i Århus Nav.html 1 2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 3 " Internet and WWW How to Program - Navigation Bar <img src = "buttons/links.jpg" width = "65" 19 height = "50" alt = "Links Page" /> <img src = "buttons/list.jpg" width = "65" 23 height = "50" alt = "List Example Page" /> <img src = "buttons/contact.jpg" width = "65" 27 height = "50" alt = "Contact Page" /> <img src = "buttons/header.jpg" width = "65" 31 height = "50" alt = "Header Page" /> <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.

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

Ingeniørhøjskolen i Århus Contact2.html 1 2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 3 " Internet and WWW How to Program - Contact Page My address is Click on the address and your browser will 21 automatically open an message and address it to my 22 address All information on this site is © 27 Deitel & Associates, Inc tags, it can be set in subscript --> 31..., and it can be set into --> 32 --> 33 You may download 3.14 x 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

Ingeniørhøjskolen i Århus Links2.html 1 2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 3 " Internet and WWW How to Program - Links Here are my favorite sites Click on a name to go to that page Deitel Prentice Hall Yahoo! USA Today 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.

Ingeniørhøjskolen i Århus List.html 1 2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 3 " Internet and WWW How to Program - Lists The Best Features of the Internet You can meet new people from countries around 19 the world. 20 You have access to new media as it becomes public: tag --> New games 27 New applications For business 32 For pleasure 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.

Ingeniørhøjskolen i Århus List.html 36 Around the clock news 37 Search engines 38 Shopping 39 Programming XML 43 Java 44 XHTML 45 Scripts 46 New languages Links 55 Keeping in touch with old friends 56 It is the technology of the future! My 3 Favorite CEOs 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.