Embed Size (px)
Citation preview
Introduction to HTMLM. 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: [email protected]
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 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
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
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 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
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 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
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 I welcome your questions!questions!
