Introduction to HTML M. Douglas Wray
Covered in this class: HTML 4 vs XHTML The DOCTYPE and why it's crucial Elements, the basic building blocks of a web page CSS and how it relates to HTML How to write clean, standards-compliant code What NOT to do
But first, tell me about YOU Tell us who you are and why you’re here.
About Doug Wray Web developer since 1999, worked for StorageTek, EDS and the University of Colorado Teach Intro to Web Design and Intro to HTML Avid WordPress user and consultant Personal website: macwebguru.com Personal email: macguiguru@spamcop.net
Source materials for this class Much of the material discussed comes from: http://dev.opera.com/articles/view/12-the-basics-of- html/ - open-source web curriculum. W3Schools.com HTML Tutorial: http://www.w3schools.com/html/ as well as links here: http://www.macwebguru.com/links/css-links/
What is HTML HyperText Markup Language Markers around text (elements) instruct browser on how to deal with text. HTML 4.01 / XHMTL Reference http://www.w3schools.com/tags/ Note: this list is extensive, here’s the ones you’re going to use the most:
FAH – Frequently-Accessed HTML Elements you’ll use routinely <a href=“”> </a> start and end hypertext anchors <b> </b> start/end bold text (also <strong> </strong) <blockquote> - indented text <body> - defines the document’s body <br /> - defines a single line break <div> - defines a section in a document <!DOCTYPE> - defines browser rending ruleset <h1> to <h6> - defines HTML headings <head> - defines information about the document <hr /> - horizontal rule (line) <html> - start of html <i> </i> - start/end italic text (also <em> </em) <li> - list item <link> - reference external files like CSS & JavaScript <meta /> - defines metadata in an HTML document <ol> - ordered (numbered) list <p> - paragraph <span> - select pieces of text <table> - tabulated data <td> - table data cell <th> - table headers <title> - html document title in browser bar <tr> - table row <ul> - unordered (bulleted) list Others you’ll use less often <code> - for displaying programming code <fieldset> - broder around form <form> - input forms <input /> - form fields <option> - items in a selector <map> - image map – clickable areas in images <pre> - preformatted text – honors spaces <select> - drop-down list in form
Headfirst into the Web The <head> is where basic assumptions and linkages are defined. <!DOCTYPE> - defines browser rending ruleset – W3C Doctypes <title> - html document title in browser bar <meta> - defines metadata in an HTML document – keywords and description <link> - references external documents such as stylesheet and JavaScript Much more detail about the <head> element
Typical Text <h1> First header </h1> <p> This is a paragraph. <span style=“color:red;>It can have color text</span>. It can have <b>bold text in it</b> as well as <i>italic<i>. You don’t nest lists inside it, they’re a separate element. You can also break<br />lines. <ul> <li>List item</li> <h2> Second header </h2> <table> <tr> <td>Table Data Cell</td><td>Table Data Cell</td><td>Table Data Cell</td> </tr> </table> <blockquote> This is indented text. It can be many words. It can have <b>bold text in it</b> as well as <i>italic<i>. You don’t nest tables inside it, they’re a separate element. Marking up text and Lesser-known semantic elements. </blockquote>
Arr!!! Drop Anchor! <a href=“url”>Linked text</a> <a id=“subject” name=“subject”></a> <a href=“#subject”>Go to subject section in page</a> <a href=“url” target=“_blank”>New Veender</a> Even more detail on linking
Intrapage Links <a href=“#one”>Widgets</a> <a href=“#two”>Gidgits</a> <a href=“#three”>Digits</a> <a href=“#four”>Midgets</a> More details Luna Beach Resort FAQ <a id=“one”></a> <h1>Section One</h1> <p>All about widgets</p> <a id=“two”></a> <h1>Section Two</h1> <p>All about gidgits</p> <a id=“three”></a> <h1>Section Three</h1> <p>All about digits</p> <a id=“four”></a> <h1>Section Four</h1> <p>All about midgets</p>
Links and images Basic link-on-image: <a href=“url”><img src=“path/to/image.jpg” /></a> ‘image.jpg’ can be a button or a picture. Note, button- based navigation is tedious to maintain. Google ‘sliding doors of CSS’ for details on reusable button menu. <a href=“url”><img src=“path/to/image” style=“border:none;” /></a> If don’t WANT an underline/border on rollover.
Lists <ul> <li>First list item</li> <li>Second list item</li> <li>And so on...</li> </ul>
List o’ links – bulleted (default) <ul> <li><a href=“url”>First linked item</a></li> <li><a href=“url”>Second linked item</a></li> <li><a href=“http://google.com”>Google</a></li> </ul>
List o’ links – ordered (numbered) <ol> <li><a href=“url”>First linked item</a></li> <li><a href=“url”>Second linked item</a></li> <li><a href=“http://google.com”>Google</a></li> </ol> <ol style=“list-style:upper-roman;”> More list examples
List styles none No marker circle The marker is a circle disc The marker is a filled circle. This is default square The marker is a square armenian The marker is traditional Armenian numbering decimal The marker is a number decimal-leading-zero The marker is a number padded by initial zeros (01, 02, 03, etc.) georgian The marker is traditional Georgian numbering (an, ban, gan, etc.) lower-alpha The marker is lower-alpha (a, b, c, d, e, etc.) lower-greek The marker is lower-greek (alpha, beta, gamma, etc.) lower-latin The marker is lower-latin (a, b, c, d, e, etc.) lower-roman The marker is lower-roman (i, ii, iii, iv, v, etc.) upper-alpha The marker is upper-alpha (A, B, C, D, E, etc.) upper-latin The marker is upper-latin (A, B, C, D, E, etc.) upper-roman The marker is upper-roman (I, II, III, IV, V, etc.) http://www.w3schools.com/CSS/tryit.asp?filename=trycss_list-style-type_all
Table elements <table> - tabulated data <th> - table headers <tr> - table row <td> - table data cell Basic table by Jenifer Hanen at Dev.Opera.Com
Forms <fieldset> - broder around form <legend> - title above form <label> - titles for fields <form> - input forms <input> - form fields <option> - items in a selector <select> - drop-down list in form HTML forms—the basics
DIV-ide and conquer DIV = division of page – ‘block’ element DOM – Document Object Model Generic containers – the div and span elements The CSS layout model - boxes, borders, margins, padding Divitis CSS Zen Garden
HTML Image Maps Clickable areas on images <img> <map> <area> Example code and demo Luna Beach Resort dive site map
CSS Styles – made of Rules and Selectors Inline and External - <link> command – Examples Divs and the Box Model Floated elements and clearing floats – Floatin’ Away Styling text W3 Schools CSS Tutorial
CSS in use <p style=“color:red;”>This is a styled paragraph</p> <style> p {color:red;} </style> <p>This is a styled paragraph</p> <p>So is this</p> <p>In fact, they ALL are</p>
Class act <style> .warning { color:red; font-style:italic; font-weight:900; } </style> <p class=“warning”>Danger Will Robinson!</p> Defining style rules My list of CSS Links
I welcome your questions! ? I welcome your questions!