270 likes | 464 Views
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.
E N D
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 WordPressuser 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 LanguageMarkers around text (elements) instruct browser on how to deal with text. • HTML 4.01 / XHMTL Referencehttp://www.w3schools.com/tags/Note: this list is extensive, here’s the ones you’re going to use the most:
FAH – Frequently-Accessed HTML 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 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
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. <p> <ul> <li>List item</li> <li>List item</li> <li>List item</li> <ul> <h2> Second header </h2> <table> <tr> <td>Table Data Cell</td><td>Table Data Cell</td><td>Table Data Cell</td> </tr> <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> • Linked text • <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 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!