1 / 24

Introduction to HTML

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.

zonta
Download Presentation

Introduction to HTML

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Introduction to HTML M. Douglas Wray

  2. 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

  3. But first, tell me about YOU Tell us who you are and why you’re here.

  4. 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

  5. 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/

  6. 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:

  7. 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

  8. 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

  9. 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>

  10. 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

  11. 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>

  12. 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.

  13. Lists <ul> <li>First list item</li> <li>Second list item</li> <li>And so on...</li> </ul>

  14. 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>

  15. 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

  16. List styles http://www.w3schools.com/CSS/tryit.asp?filename=trycss_list-style-type_all

  17. Table elements <table> - tabulated data <th> - table headers <tr> - table row <td> - table data cell Basic table by Jenifer Hanen at Dev.Opera.Com

  18. 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

  19. 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

  20. HTML Image Maps Clickable areas on images <img> <map> <area> Example code and demo Luna Beach Resort dive site map

  21. 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

  22. 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>

  23. 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

  24. ? I welcome your questions!

More Related