Download presentation
Presentation is loading. Please wait.
1
Programming the Web using XHTML and JavaScript
Chapter 2 Creating a Basic Web Page
2
The HTML Source Document
“Surfing” Click hyperlink (or enter a URL) Browser requests document from server Server returns document requested Browser displays document
3
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
4
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”
5
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
6
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>
7
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
8
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
9
The HTML Source Document
<head> </head> <title>Page Title</title> … <body> … </body> Page content goes here
10
The HTML Source Document
A complete HTML document Ch02-Ex-03
11
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
12
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
13
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>
14
HTML, XML, and XHTML Nesting
<head> <title>Chapter 2</title> </head> <title>Chapter 2 </title> Correct Incorrect
15
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?
16
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
17
Brief History of Markup Languages
GML Generalized Markup Language IBM – 1960’s Used to create text documents (manuals) Basis of Script Bookmaster
18
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
19
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
20
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”
21
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
22
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 W3C created World Wide Web Consortium Create an “official” version of HTML
23
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!
24
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!
25
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?
26
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)
27
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” ¬ 1st line: XML Declaration 2nd line: Document Type Definition
28
<html xmlns=“http://www.w3.org/1999/xhtml”>
HTML, XML, and XHTML Also, change <html> tag itself: <html xmlns=“ “Tags defined in this document conform to the W3C definitions found at ...” Start using the new standards NOW Ch02-Ex-04 XML namespace
29
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” />
30
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)
31
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
32
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
33
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
34
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!
35
<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: Check the above tags for good explanations
36
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
37
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
38
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>
39
More Tags! Font size: <big>…</big>
<small>…</small> Do NOT use header tags to control the appearance of text This misclassifies the text
40
More Tags! Can fonts be specified directly? Font tag
<font name=“courier”>…</font> Defines presentation, not structure Style sheet method is preferred (Chapter 3)
41
More Tags! Who should control appearance?
Designer? Surfer? Default is surfer (by controlling browser settings)
42
More Tags! Comments <!-- anything at all --> Annotate code
Explain what and why Prevent code from being processed Temporarily remove code from being processed
43
Deprecation Elements noted to be discontinued in the [near] future
Avoid using, use newer replacements
![Deprecation Elements noted to be discontinued in the [near] future](http://slideplayer.com./slide/13406247/80/images/43/Deprecation+Elements+noted+to+be+discontinued+in+the+%5Bnear%5D+future.jpg "Avoid using, use newer replacements.")
44
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
Similar presentations
