Resources for Web Students

The Basic HTML Template:

<html>
<head>
  <title>TITLE GOES HERE</title>
</head>
<body>
  THINGS THAT GO ONSCREEN GO HERE
</body>
</html>

Basic Tags For the <body>

<p></p> - The basic paragraph mark.
<br /> - The line break.
<pre></pre> - Don't collapse line breaks. Use only when necessary.
<h1></h1>, <h2></h2>, <h3></h3> - Headers
<ol></ol> - The ordered list (has to have <li></li>'s in it.
<ul></ul> - The un-ordered list (has to have <li></li>'s in it.
<li></li> - List items. Only work in <ol></ol>'s and <ul></ul>'s
<strong></strong> - Example of an inline element
<a href="http://theuri.com"></a> - Makes it hypertext!
<img src="the_image.gif"> - You can't describe images with text!

Reference Material and Expanded Resources

Web-Based Reference Material

This page - http://danieltalsky.com/webclass/
W3Schools - http://www.w3schools.com
The W3C (World Wide Web Consortium) - http://w3.org
The Web Standards Project - http://www.webstandards.org/learn/
Webmonkey's HTML Special Characters Reference - http://webmonkey.wired.com/webmonkey/reference/special_characters/

Print Reference Material

The O'Reilly Books - especially: HTML & XHTML: The Definitive Guide
HTML for the World Wide Web with XHTML and CSS: Visual QuickStart Guide
Head First HTML & CSS

The XHTML 1.0 Template:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>TITLE GOES HERE</title>
</head>
<body>
  THINGS THAT GO ONSCREEN GO HERE
</body>
</html>

Anatomy of CSS

Selector		Definition
		Property		Value
div	{	font-size	:	30px	; }

Ways To Include CSS In an HTML Document

Inline Styles

Inline styles can go in any tag, but all have to go one the same line.

<p style="color: red; font-size: 120%;">This will be red and bigger.</p>

This will be red and bigger.

The `<style></style>` tag

Style tags only go in the HEAD, not the BODY. They affect the whole page.



<head>

[...other head stuff...]

  <style type="text/css">

    body {
      margin-top: 0px;
    }

    p {
      font-weight: bold;
      border: 1px solid black;
      padding: .5em;
      background-color: skyblue;
    }

    em {
      color: darkgreen;
    }

  </style>

[...other head stuff...]

</head>

Linking To an External Stylesheet



<head>

[...other head stuff...]

<link rel="stylesheet" type="text/css" href="this_is_the_stylesheet.css" />

[...other head stuff...]

</head>

Put just one line in the head tag to link to an external style sheet.

Kinds of Selectors

p {} - Affects all <p></p> tags.
.someclass {} - Affects all tags with: class="someclass" in them. Classes generally refer to something that is applied to multiple tags.
#someid {} - Affects all tags with: id="someid" in them. ID's usually refer to a single unique instance of a tag.
div.someclass {} - Affects only <div></div> tags with: class="someclass" in them.
p.someclass b {} - Affects only <b></b> tags that are inside <p class="someclass"></p>
p.someclass,b {} - Affects BOTH <b></b> tags AND <p class="someclass"></p> tags.

Daniel Talsky is a web developer in Seattle, WA
For further information regarding computer outreach, contact: daniel@danieltalsky.com

where are the funny slogans?