Introduction to HTML M. Douglas Wray. Covered in this class: HTML 4 vs XHTML The DOCTYPE and why...
-
Upload
stephanie-gray -
Category
Documents
-
view
221 -
download
1
Transcript of Introduction to HTML M. Douglas Wray. Covered in this class: HTML 4 vs XHTML The DOCTYPE and why...
![Page 1: 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.](https://reader033.fdocuments.in/reader033/viewer/2022061305/5514010f550346d8488b48f8/html5/thumbnails/1.jpg)
Introduction to HTMLM. Douglas Wray
![Page 2: 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.](https://reader033.fdocuments.in/reader033/viewer/2022061305/5514010f550346d8488b48f8/html5/thumbnails/2.jpg)
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
![Page 3: 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.](https://reader033.fdocuments.in/reader033/viewer/2022061305/5514010f550346d8488b48f8/html5/thumbnails/3.jpg)
But first, tell me about YOU
Tell us who you are and why you’re here.
![Page 4: 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.](https://reader033.fdocuments.in/reader033/viewer/2022061305/5514010f550346d8488b48f8/html5/thumbnails/4.jpg)
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: [email protected]
![Page 5: 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.](https://reader033.fdocuments.in/reader033/viewer/2022061305/5514010f550346d8488b48f8/html5/thumbnails/5.jpg)
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/
![Page 6: 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.](https://reader033.fdocuments.in/reader033/viewer/2022061305/5514010f550346d8488b48f8/html5/thumbnails/6.jpg)
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:
![Page 7: 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.](https://reader033.fdocuments.in/reader033/viewer/2022061305/5514010f550346d8488b48f8/html5/thumbnails/7.jpg)
FAH – Frequently-Accessed HTMLElements 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
![Page 8: 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.](https://reader033.fdocuments.in/reader033/viewer/2022061305/5514010f550346d8488b48f8/html5/thumbnails/8.jpg)
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
![Page 9: 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.](https://reader033.fdocuments.in/reader033/viewer/2022061305/5514010f550346d8488b48f8/html5/thumbnails/9.jpg)
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>
![Page 10: 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.](https://reader033.fdocuments.in/reader033/viewer/2022061305/5514010f550346d8488b48f8/html5/thumbnails/10.jpg)
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
![Page 11: 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.](https://reader033.fdocuments.in/reader033/viewer/2022061305/5514010f550346d8488b48f8/html5/thumbnails/11.jpg)
Intrapage Links
![Page 12: 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.](https://reader033.fdocuments.in/reader033/viewer/2022061305/5514010f550346d8488b48f8/html5/thumbnails/12.jpg)
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.
![Page 13: 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.](https://reader033.fdocuments.in/reader033/viewer/2022061305/5514010f550346d8488b48f8/html5/thumbnails/13.jpg)
Lists
<ul>
<li>First list item</li>
<li>Second list item</li>
<li>And so on...</li>
</ul>
![Page 14: 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.](https://reader033.fdocuments.in/reader033/viewer/2022061305/5514010f550346d8488b48f8/html5/thumbnails/14.jpg)
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>
![Page 15: 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.](https://reader033.fdocuments.in/reader033/viewer/2022061305/5514010f550346d8488b48f8/html5/thumbnails/15.jpg)
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
![Page 16: 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.](https://reader033.fdocuments.in/reader033/viewer/2022061305/5514010f550346d8488b48f8/html5/thumbnails/16.jpg)
List stylesnone 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 numberdecimal-leading-zero
The marker is a number padded by initial zeros (01, 02, 03, etc.)
georgianThe 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
![Page 17: 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.](https://reader033.fdocuments.in/reader033/viewer/2022061305/5514010f550346d8488b48f8/html5/thumbnails/17.jpg)
Table elements
<table> - tabulated data<th> - table headers<tr> - table row<td> - table data cell
Basic table by Jenifer Hanen at Dev.Opera.Com
![Page 18: 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.](https://reader033.fdocuments.in/reader033/viewer/2022061305/5514010f550346d8488b48f8/html5/thumbnails/18.jpg)
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
![Page 19: 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.](https://reader033.fdocuments.in/reader033/viewer/2022061305/5514010f550346d8488b48f8/html5/thumbnails/19.jpg)
DIV-ide and conquerDIV = 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
![Page 20: 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.](https://reader033.fdocuments.in/reader033/viewer/2022061305/5514010f550346d8488b48f8/html5/thumbnails/20.jpg)
HTML Image Maps
Clickable areas on images
<img>
<map>
<area>
Example code and demo
Luna Beach Resort dive site map
![Page 21: 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.](https://reader033.fdocuments.in/reader033/viewer/2022061305/5514010f550346d8488b48f8/html5/thumbnails/21.jpg)
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
![Page 22: 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.](https://reader033.fdocuments.in/reader033/viewer/2022061305/5514010f550346d8488b48f8/html5/thumbnails/22.jpg)
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>
![Page 23: 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.](https://reader033.fdocuments.in/reader033/viewer/2022061305/5514010f550346d8488b48f8/html5/thumbnails/23.jpg)
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
![Page 24: 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.](https://reader033.fdocuments.in/reader033/viewer/2022061305/5514010f550346d8488b48f8/html5/thumbnails/24.jpg)
I welcome your I welcome your questions!questions!