Programming the Web using XHTML and JavaScript Chapter 2 Creating a Basic Web Page
The HTML Source Document “Surfing” Click hyperlink (or enter a URL) Browser requests document from server Server returns document requested Browser displays document
The HTML Source Document HTML Document contains HTML source code Describes content and layout of Web page Content: what to display Words Data Pictures Etc… Layout: How it will look How it will behave
The HTML Source Document HTML documents are simple text-only What you’d see on a keyboard No specific fonts, sizes, etc. Layout specified by “elements” or “tags” Specify the structure of the page Classify the contents “This content is a heading” “This content is just some text” “Start a new paragraph here”
The HTML Source Document Examples Heading tags <h1>Some text goes here</h1> Levels 1 – 6 Most important – least important Ch02-Ex-01 Paragraph tag <p>The paragraph goes here</p> Ch02-Ex-02
The HTML Source Document Tag structure of Web pages HTML tags <html>The entire Web page goes here</html> Required Two major elements <head> <body>
The HTML Source Document Head element <head> Head information goes here </head> “Required” General information for the whole document e.g. <title> The page title goes here </title> <style> Style info here </style> <meta> Meta info here </meta> Keywords, what made this page, etc This information does not directly show in the browser
The HTML Source Document Body element <body> Body “stuff” goes here </body> Required Actual page content e.g. <p> A paragraph </p> <h1> Header 1 size characters </h1> <ol> Ordered list elements </ol> <hr> <!-- a horizontal rule --> What is actually displayed by the browser
The HTML Source Document <head> </head> <title>Page Title</title> … <body> … </body> Page content goes here
The HTML Source Document A complete HTML document Ch02-Ex-03
Editing an HTML Source Document Use plain-text editors (Notepad) Other types of editors (like MS WORD) use hidden formatting codes Filename.htm (or .html) Avoid spaces Use underscore character instead Enclose in quotes when using Notepad Ensure Save as type: is “All Files.htm” File – Open … Drag icon into open browser window
HTML, XML, and XHTML Writing HTML code: Make it human readable: Indent tags effectively Use spaces or tabs Spaces are usually the best! Won’t effect browser Make it easier for a human to read and understand Nest tags or elements properly Will effect browser
HTML, XML, and XHTML Indenting No formatting All run together, no spaces except between text words <html><head><title>Title</title></head><body><h1>Header 1</h1><p>This is a paragraph </p></body></html> Formatted Used tabs for indent <html> <head> <title>Title</title> </head> <body> <h1>Header 1</h1> <p> This is a paragraph </p> </body> </html>
HTML, XML, and XHTML Nesting <head> <title>Chapter 2</title> </head> <title>Chapter 2 </title> Correct Incorrect
HTML, XML, and XHTML Browsers: Evaluate from the top down Ignore extra whitespace Tabs, extra spaces, line breaks Make your HTML code easily readable by humans Ch02-Ex-03a but without human formatting Does HTML code have to be lower case?
Brief History of Markup Languages GML Generalized Markup Language SGML Standard Generalized Markup Language HTML HyperText Markup Language XML eXtensible Markup Language XHTML eXtensible HyperText Markup Language
Brief History of Markup Languages GML Generalized Markup Language IBM – 1960’s Used to create text documents (manuals) Basis of Script Bookmaster
Brief History of Markup Languages SGML Standard Generalized Markup Language Based on GML ideas Work Started mid 70’s Formalized as an ANSI Standard 1983 So comprehensive and complex Almost impossible to use
Brief History of Markup Languages HTML HyperText Markup Language Created by Tim Berners-Lee in 1989 Diverging Stories Designed complying to SGML ideas Designed then forced to SGML compliance
Brief History of Markup Languages EDI (Electronic Data Interchange) Formatted data to exchange information between (usually disparate) computer systems Typically proprietary XML eXtensible Markup Language Simplified and usable SGML Flexible Can define new tags and meanings as required Used to exchange data between electronic data system (replace EDI) DTD Document Type Definitions Defines the valid tags and their proper syntax “Required”
Brief History of Markup Languages XHTML eXtensible HyperText Markup Language HTML structure into XML DTD for the HTML tags Case sensitive XML is case sensitive -> XHTML is case sensitive
HTML, XML, and XHTML In The Beginning: 1994 - W3C created Browsers developed along diverging paths Netscape Explorer Features were added Browser specific Unique Not always compatible 1994 - W3C created World Wide Web Consortium Create an “official” version of HTML
HTML, XML, and XHTML PCs – not much of a problem Handheld devices – HUGE problem Need: A standardized version of HTML Compatible with all types of devices PCs, handhelds, others? HTML development stopped at V4 Flash: V5 is now under development!
HTML, XML, and XHTML XML – Extensible Markup Language Specifies a universal, structured format Data is classified by its meaning Users could create custom tags Car dealer: <make> <model> <year> Very strict syntax rules ensure universality Case matters!
HTML, XML, and XHTML XHTML – Extensible HTML Official release January 2000 XHTML is not XML but it is based on XML Inherits rules and benefits of XML Thus, XHTML is case-sensitive: <body> ≠ <BODY> ≠ <Body> ≠ <BoDy> Why?
HTML, XML, and XHTML Exceptions imply complexity Complexity requires Software cannot be written simply It must account for each exception individually Programs must therefore be larger and more difficult to maintain Complexity requires Additional processing (slower) an More memory (larger and more expensive)
HTML, XML, and XHTML How to make HTML into XHTML? Before <html> add: <?xml version=“1.0”> <!DOCTYPE html PUBLIC ¬ “-//W3C//DTD XHTML 1.0 Transitional//EN” ¬ http://www/w3/org/TR/xhtml/11/DTD/xhtml1-transitional.dtd> 1st line: XML Declaration 2nd line: Document Type Definition
<html xmlns=“http://www.w3.org/1999/xhtml”> HTML, XML, and XHTML Also, change <html> tag itself: <html xmlns=“http://www.w3.org/1999/xhtml”> “Tags defined in this document conform to the W3C definitions found at ...” Start using the new standards NOW Ch02-Ex-04 XML namespace
HTML, XML, and XHTML <meta> tag describes document content Useful for search engines Optional Goes in <head> section Attribute examples: Name: “keywords”, “description” Content <meta name=“keywords” content=“coffee, tea, imported” />
Paragraphs and Line Breaks Can’t use whitespace to format document Space, tab, linefeed, etc. HTML uses elements (tags) and only elements to define document’s structure Examples: Paragraph tag <p> Classifies a block of text as a paragraph Preceded and followed by a blank line (usually) Can add other attributes (Chapter 3)
Paragraphs and Line Breaks Break tag <br> Generates a line break Without inserting a blank line like the <p> tag. “Empty” tag – no </br> needed XHTML version: <br /> instead (space optional) / required by XHTML to indicate an empty element Ch02-Ex-05
More Tags! Emphasizing text Ch02-Ex-06 <em> - italics HTML: This <em>word</em> is italicized Browser: This word is italicized <strong> - bold HTML: This <strong>word</strong> is bold Browser: This word is bold Ch02-Ex-06
More Tags! Italics <i> … </i> Bold <b> … </b> Why use <em> or <strong>? <i> and <b> define the presentation (display) <em> and <strong> define the structure
More Tags! Structure vs. Presentation: so what? In early HTML, designers used tags for both: structure and presentation Problem: Those Web pages display well only on PCs Other devices required other versions of the HTML code. Presentation does not have to be visual!
<i>, <em>, <cite>, <dfn>, <var> More details on <i> vs. <em> Use of: <i> vs. <em> vs. <cite> vs. <dfn> vs. <var> All print as italics by default See: http://htmlhelp.com/reference/html40/ Check the above tags for good explanations
More Tags! By defining structure and presentation separately this problem is eliminated Structure defined by HTML code Presentation defined elsewhere: Browser Style sheet definitions (Chapter 3) This is the point of XHTML
More Tags! Block-level elements Inline elements Define a complete section of text Typically preceded and followed by a blank line Body, header, paragraph tags Inline elements Apply to a sequence of characters within a block Emphasis and strong tags
More Tags! Blocks may contain anything: Inline elements may contain Other blocks <body>… <p>…</p> …</body> Inline elements <h2>… <em>…</em> …</h2> Inline elements may contain Other inline elements <em>… <strong>…</strong> …</em> BUT NOT BLOCKS! <em>… <h2>…</h2> …</em>
More Tags! Font size: <big>…</big> <small>…</small> Do NOT use header tags to control the appearance of text This misclassifies the text
More Tags! Can fonts be specified directly? Font tag <font name=“courier”>…</font> Defines presentation, not structure Style sheet method is preferred (Chapter 3)
More Tags! Who should control appearance? Designer? Surfer? Default is surfer (by controlling browser settings)
More Tags! Comments <!-- anything at all --> Annotate code Explain what and why Prevent code from being processed Temporarily remove code from being processed
Deprecation Elements noted to be discontinued in the [near] future Avoid using, use newer replacements
Assignment Exercise 2.1, p. 52 Follow additional instructions on Assignments web page PTW Chapter 2 Post document to your Web space as “ptw02.htm” Send a copy of the code to Moodle Grade based on: Appearance Technical correctness of code Exercise works in IE and FireFox