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 ( ) & Ampersand (&) © Copyright symbol (©) 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…