Transcript html_basics

Introduction to (X)HTML
How the Web Works
 What is the WWW (web page)?
Part of the Internet
One of the ways information can be shared via
the Internet (Others: Email, FTP, Telnet)
HTML Documents
Viewed in a browser
Web Page
Based on Hypertext and HTTP
HTTP: Hypertext Transfer Protocol
 The protocol or rules that specify how information is
requested and sent between web server and client
HyperText
HTML
 Hypertext Markup Language
 Simple, universal mark-up language used to publish
content on the web
 A plain text document
 No special software needed
 Saved with .htm or .html extension
 Uses HTML tags
 Describes a documents structure
 Hosted on a server
HTML
 Elements (Container tags – markup + content) / Empty Tags
(standalone)
HTML
 HTML Markup Element
 HTML Tags placed in angle brackets <>
 Consist of two tags: Opening tag / Closing tag (“on” and “off”)
 End tag always begins with a slash(/)
HTML
Empty Tag (Standalone)
 Do not have text content
 Places an element on the page (provide a directive)
 Indicated by single tag
 (XHTML note: now needs a closing tag
ex: <br> now <br /> )
HTML
 Basic HTMLStructure – 3 parts
 <html>….</html>
 the first & last tag in document
 <head>…</head>
 Includes info about your document
 <title>…</title>
 Name of your page (bookmarks, browser indexing)
 <body>…</body>
HTML
Attributes: Information or instructions that modify the tag
 Attributes use values
 Located in the opening tag
 One tag can have multiple attributes
HTML
Block & inline elements
 Block Elements Ex: <p /> <h1>…</h1>
 Each block element begins a new line
 Have space above and below the element by default
 Inline Elements Ex: <em>…</em>
 Do not start new lines (flow within other elements )
HTML vs. XHTML
HTML
Flavors
 Many versions of HTML
 Tim Berners-Lee
 Simple, text-only browsing & authoring system to share and manage information
 using the hypertext process to link to related documents
 Handful of tags
 Web content grew (Browsers- sort of made a mess of things)
 Browser developers implemented new features and new tags into their browsers
 HTML continued to grow – new, cool, exciting tags (<background>, <font>, <bgsound>,
<blink>, <image>)
 Each browser created its own proprietary tags – only supported by that particular platform
 W3C stepped in to help (http://www.w3.org/)
 Oversees ongoing development of the web
 Keeps track of browser features
 Help develop guidelines for common HTML language (HTML 3.2 - 1996)
(versions:http://www.utoronto.ca/webdocs/HTMLdocs/HTML_Spec/html.html)
XHTML
 Language almost identical to HTML
except it is written with different rules
 XHTML = Extensible Hypertext Markup
Language
 Allows for markup of text and the
inclusion of images and is capable of
linking documents together (hyperlinks)
HTML vs. XHTML
 XHTML is the reformulation of HTML 4.01
 HTML 4.01
 Emphasizes the separation of presentation from content
(presentation handed off to CSS)
 XHTML 1.0/1.1
 New standard recommended by W3C
 A well formed and valid XML equivalent of HTML 4.01
W3C working on HTML v5 and XHTML v2
HTML V5 and XHTL V2 Explained: http://www.ibm.com/developerworks/library/x-html5xhtml2.html
XHTML
 XHTML is HTML 4.01 reformatted using the
syntax of XML.
 XHTML follows the more structured and rigid
XML rules and syntax guidelines.
 XHTML – this more structured markup language
will enable one document to be viewed on
multiple devices (web browsers, cell phones,
PDAs, ect) by creating different style sheets for
each device.
HTML vs. XHTML differences
 Syntax differences:
 All elements must be terminated (close tag)
 (ex: <p>This is XHTML code!</p>
 Empty tags must be terminated (close tag)
 Written with a space and / symbol at the end (ex: <br /> )
 All elements and attributes must be in lowercase (ex: <p> not <P>)
 All attribute values must be contained within quotes (single or double)
(ex: <td nowrap=“nowrap”> not <td nowrap>)
 All elements must be nested properly
XHTML what does it look like?
1.
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML
1.0 Transitional//EN”
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
2.
<html xmlns=“http://www.w3.org/1999/xhtml”>
3.
<head>
4.
<title>Untitled Document</title>
5.
</head>
6.
<body>
This is where the content of your page will be placed.
7.
</body>
8.
</html>
XHTML what does it look like?
1.
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML
1.0 Transitional//EN”
http://www.w3.org/TR/xhtml1/DTD/xhtml1transitional.dtd”>
DOCUMENT TYPE DEFINITION (DTD):

Defines all elements and attributes in the language & their
rules

This URL points to a file that outlines the available
elements, attributes, and their appropriate usage.
XHTML what does it look like?
DOCUMENT TYPE DEFINITION - 3 XHTML DTDs available
1.
XHTML Transitional: maintains backward compatibility
with older browsers while still allowing access to HTML
4.01 elements. (includes presentation elements that
were in common use)
2.
XHTML Strict: doesn’t allow any HTML elements that
were designed to control the appearance of a page.
(omits all deprecated elements)
3.
XHTML Frameset: allows HTML elements needed to
create framesets.
Great explanation can be found at: Child, D. (2004) DTDs Explained, Added Bytes
Available: http://www.addedbytes.com/html/dtds-explained/
XHTML what does it look like?
2.
<html xmlns=http://www.w3.org/1999/xhtml
lang=“en” xml:lang=“en”>
XML namespace = This URL points to
a file that give detailed information
about the particular XML vocabulary
used on the page
XHTML what does it look like?
3.
<head>
contains all the header information
4.
<title>
defines the page title
5.
</head>
closing head tag (all XHTML tags must be closed)
6.
<body>
where all visible content will be placed
7.
</body>
closing body tag
8.
</html>
closing html tag
What is CSS?
 Cascading Style Sheets
 Separates the presentation (formatting) from the structure and
content of the page.
 Presentation = how the page looks
 Structure = the content
 CSS used to format the presentation of a page (how
it looks - what font is used, used to layout an entire
page)
Back to the Markup
 Block-level Elements
 Paragraphs <p>…</p>
 Headings <h#>…</h#> (six levels of headings)
 Provide logical hierarcy
 Improves accessibility
 Blockquote <blockquote>…</blockquote>
 Preformatted text <pre>…</pre>
 Preserves white space – returns and character spaces
 May be needed to convey meaning (code, poetry)
 Horizontal Rules <hr />
Back to the Markup
 Block-level Elements
 Unordered Lists <ul>…</ul> & <li>…</li>
 Default is disc change type: <ul type=“circle”>, “square”
 Ordered Lists <ol>…</ol> & <li>…</li>
 Default is #’s change type: <ol type=“A”> “a”, “I”, “I”
 Definition Lists <dl>…</dl> & <dt>…</dt> & <dd>…</dd>
 Note: Changing type and start value not supported in “strict” versions of
XHTML
 http://victor.transformadora.com/Oreilly/wdesign/wdesign/ch10_06.htm
Back to the Markup
 Inline Elements
 Line Breaks
 <br />
 Semantic inline text elements
 Describe the meaning of the text
 Examples: <em> for emphasis. <strong> strongly
emphasized, <q> short inline quote
 Presentational inline text elements
 Provide descriptions of the elements style
 Examples: <b> bold, <center>, <i> italics
Back to the Markup
 Special Characters
 Must use numeric or named character reference
 Examples:
 Character space (&nbsp;)
 & Ampersand (&amp;)
 © Copyright symbol (&copy;)
 Euro (&euro;)
Back to the Markup
 Links
 The anchor <a>…</a>
 Required attribute: href
 <a href=“http://www.uwm.edu”> Link to UWM </a>
 <a href=http://www.uwm.edu> <img src=“uwm_logo.gif”/> </a>
 Images
 Required attribute: src
 <img src=“uwm_logo.gif” alt=“UWM Logo” />
Lets give it a try…