<!--#include virtual="commontop.html" -->
<title>Web Programming Step by Step, Lecture 2: Basic HTML and CSS</title>
</head>
<body>
<div class="layout">
<div id="controls"><!-- DO NOT EDIT --></div>
<div id="currentSlide"><!-- DO NOT EDIT --></div>
<div id="header"></div>
<div id="footer">
<h1><em>Web Programming Step by Step</em>, Lecture 2</h1>
<h2>Basic HTML and CSS</h2>
</div>
</div>
<div class="presentation">
<div class="slide">
<h1><a href="http://www.webstepbook.com/">Web Programming Step by Step</a></h1>
<h3>Lecture 2 <br /> Basic HTML and CSS</h3>
<h4>Reading: Chapter 2; 3.1 - 3.3</h4>
<p class="license">
Except where otherwise noted, the contents of this presentation are Copyright 2010 Marty Stepp and Jessica Miller.
</p>
<div class="w3c">
<a href="http://validator.w3.org/check/referer"><img src="images/w3c-xhtml11.png" alt="Valid XHTML 1.1" /></a>
<a href="http://jigsaw.w3.org/css-validator/check/referer"><img src="images/w3c-css.png" alt="Valid CSS!" /></a>
</div>
</div>
<div class="slide">
<h1>
Languages of the Web
</h1>
<ul>
<li>Client-side (in the browser):
<ul>
<li>HTML – content/structure</li>
<li>CSS – appearance</li>
<li>JavaScript – behavior/interactivity</li>
</ul>
</li>
<li>Server-side:
<ul>
<li>executed on the server before sending client-side code to the browser</li>
<li>we'll learn a language called PHP</li>
<li>many other server-side languages: ASP/C#, JSP (Java), Perl, Python (Django), Ruby (Rails)</li>
</ul>
</li>
<li>Information exchange:
<ul>
<li>XML (for exchanging data, or for storing it in a file)</li>
<li>SQL (for querying a database)</li>
</ul>
</li>
</ul>
</div>
<div class="slide titleslide">
<h1>2.1: Basic HTML</h1>
<ul>
<li>
<strong>2.1: Basic HTML</strong>
</li>
<li>
2.3: Web Standards
</li>
<li>
2.2: More HTML Elements
</li>
</ul>
</div>
<div class="slide">
<h1>
Hypertext Markup Language (<a href="http://www.w3schools.com/html/default.asp">HTML</a>)
<span class="readingsection">(2.1.1)</span>
</h1>
<ul>
<li>describes the <em>content</em> and structure of information on a web page
<ul>
<li>not the same as the <em>presentation</em> (appearance on screen)</li>
</ul>
</li>
<li>surrounds text content with opening and closing <span class="term">tags</span></li>
<li>entire thing (opening tag + closing tag + content) is called an <span class="term">element</span>
<ul>
<li>
syntax:<br/>
<code><</code><var>tagName</var><code>></code> <var>content</var> <code></</code><var>tagName</var><code>></code><br/>
<code>\~~~~~~~~~~~~~~~~~~~~~~~/</code> <em class="term">element</em>
</li>
<li>example: <code><em><p></em>This is a paragraph<em></p></em></code></li>
</ul>
</li>
<li>most whitespace is insignificant in HTML (ignored or collapsed to a single space)</li>
<li>we will use a stricter, more standard version called <a href="http://www.w3schools.com/xhtml/xhtml_html.asp">XHTML</a></li>
</ul>
</div>
<div class="slide">
<h1>
Structure of an HTML page
<span class="readingsection">(2.1.2)</span>
</h1>
<pre class="syntaxtemplate html">
<html>
<head>
<var>information about the page</var>
</head>
<body>
<var>page contents</var>
</body>
</html>
</pre>
<ul>
<li>the <span class="term">header</span> describes the page and the <span class="term">body</span> contains the page's contents</li>
<li>an HTML page is saved into a file ending with extension <code>.html</code></li>
<li class="incremental">but this is not quite the syntax we'll use... (see next slide)</li>
</ul>
</div>
<div class="slide">
<h1>
Structure of an XHTML page
<span class="readingsection">(2.1.2)</span>
</h1>
<pre class="syntaxtemplate html">
<em><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"></em>
<html <em>xmlns="http://www.w3.org/1999/xhtml"</em>>
<head>
<var>information about the page</var>
</head>
<body>
<var>page contents</var>
</body>
</html>
</pre>
<ul>
<li>the <code>DOCTYPE</code> and <code>xmlns</code> additions tell the browser to interpret our page's code as XHTML, the latest/greatest standard version of the language</li>
</ul>
</div>
<div class="slide">
<h1>
Paragraph:
<a href="http://www.w3schools.com/tags/tag_p.asp"><code><p></code></a>
<span class="readingsection">(2.1.3)</span>
</h1>
<p class="description">paragraphs of text (block)</p>
<div class="example">
<pre class="examplecode html">
<em><p></em>You're not your job.
You're not how much money you have in the bank.
You're not the car you drive. You're not the contents
of your wallet. You're not your khakis. You're
the all-singing, all-dancing crap of the world.<em></p></em>
</pre>
<div class="exampleoutput insertoutput"></div>
</div>
<!--
<p>
You're not your job. You're not how much money you have in the bank. You're not the car you drive. You're not the contents of your wallet. You're not your khakis. You're the all-singing, all-dancing crap of the world.
</p>
-->
<ul>
<li>placed within the <code>body</code> of the page</li>
<li><a href="http://www.w3schools.com/tags/tryit.asp?filename=tryhtml_paragraphs2">more paragraph examples</a></li>
</ul>
</div>
<div class="slide">
<h1>
Headings:
<a href="http://www.w3schools.com/tags/tag_h1.asp"><code><h1></code></a>,
<a href="http://www.w3schools.com/tags/tag_h2.asp"><code><h2></code></a>, ...,
<a href="http://www.w3schools.com/tags/tag_h2.asp"><code><h6></code></a>
</h1>
<p class="description">headings to separate major areas of the page (block)</p>
<div class="example">
<pre class="examplecode html">
<em><h1></em>University of Whoville<em></h1></em>
<em><h2></em>Department of Computer Science<em></h2></em>
<em><h3></em>Visiting Faculty<em></h3></em>
</pre>
<div class="exampleoutput insertoutput"></div>
</div>
<ul>
<li>not to be confused with <code><title></code> tag (see next slide)</li>
<li><a href="http://www.w3schools.com/tags/tryit.asp?filename=tryhtml_headers">More heading examples</a></li>
</ul>
</div>
<div class="slide">
<h1>Page title: <a href="http://www.w3schools.com/tags/tag_title.asp"><code><title></code></a></h1>
<p class="description">describes the title of the web page</p>
<pre class="examplecode html">
<em><title></em>Chapter 2: HTML Basics<em></title></em>
</pre>
<ul>
<li>placed within the <code>head</code> of the page</li>
<li>displayed in the web browser's title bar and when bookmarking the page</li>
<li>not to be confused with a header tag like <code><h1></code> (see previous slide)</li>
</ul>
</div>
<div class="slide">
<h1>
Horizontal rule:
<a href="http://www.w3schools.com/tags/tag_p.asp"><code><hr></code></a>
</h1>
<p class="description">a horizontal line to visually separate sections of a page (block)</p>
<div class="example">
<pre class="examplecode html">
<p>First paragraph</p>
<em><hr /></em>
<p>Second paragraph</p>
</pre>
<div class="exampleoutput insertoutput"></div>
</div>
<ul>
<li>should be immediately closed with <code> /></code></li>
</ul>
</div>
<div class="slide">
<h1>More about HTML tags</h1>
<ul>
<li>some tags can contain additional information called <span class="term">attributes</span>
<ul>
<li>syntax: <code><</code><var>tagName</var> <var>attribute</var><code>="</code><var>value</var><code>"</code> <var>attribute</var><code>="</code><var>value</var><code>"></code> <var>content</var> <code></</code><var>tagName</var><code>></code></li>
<li>example: <code><a <em>href="page2.html"</em>>Next page</a></code></li>
</ul>
</li>
<li>some tags don't contain content; can be opened and closed in one tag
<ul>
<li>syntax: <code><</code><var>tagName</var> <var>attribute</var><code>="</code><var>value</var><code>"</code> <var>attribute</var><code>="</code><var>tagName</var><code>" /></code></li>
<li>example: <code><hr <em>/></em></code></li>
<li>example: <code><img src="bunny.jpg" alt="pic from Easter" <em>/></em></code></li>
</ul>
</li>
</ul>
</div>
<div class="slide">
<h1>
Links:
<a href="http://www.w3schools.com/tags/tag_h1.asp"><code><a></code></a>
<span class="readingsection">(2.1.4)</span>
</h1>
<p class="description">links, or "anchors", to other pages (inline)</p>
<div class="example">
<pre class="examplecode html">
<p>
Search <em>
<a href="http://www.google.com/"></em>Google<em></a></em> or our
<em><a href="lectures.html"</em>>Lecture Notes<em></a></em>.
</p>
</pre>
<div class="exampleoutput insertoutput"></div>
</div>
<ul>
<li>uses the <code>href</code> attribute to specify the destination URL
<ul>
<li>
can be <span class="term">absolute</span> (to another web site) or
<span class="term">relative</span> (to another page on this site)
</li>
</ul>
</li>
<li>anchors are inline elements; must be placed in a block element such as <code>p</code> or <code>h1</code></li>
<li>not to be confused with the <code><link /></code> tag (used to include style sheets)</li>
</ul>
</div>
<div class="slide">
<h1>Block and inline elements (<a href="http://www.autisticcuckoo.net/archive.php?id=2005/01/11/block-vs-inline-1">explanation</a>)</h1>
<div class="centerfigure">
<img src="images/layout2.png" alt="elements" />
</div>
<ul>
<li><span class="term"><a href="http://htmlhelp.com/reference/html40/block.html">block</a></span> elements contain an entire large region of content
<ul>
<li>examples: paragraphs, lists, table cells</li>
<li>the browser places a margin of whitespace between block elements for separation</li>
</ul>
</li>
<li><span class="term"><a href="http://www.cs.sfu.ca/CC/165/sbrown1/wdgxhtml10/inline.html">inline</a></span> elements affect a small amount of content
<ul>
<li>examples: bold text, code fragments, images</li>
<li>the browser allows many inline elements to appear on the same line</li>
<li>must be nested inside a block element</li>
</ul>
</li>
</ul>
<!-- ***
a picture would be nice here
some block elements can contain only other block elements
body, form
some can contain only inline elements and plain text
p
some can contain either
div
li
-->
</div>
<div class="slide">
<h1>
Images:
<a href="http://www.w3schools.com/tags/tag_h1.asp"><code><img></code></a>
</h1>
<p class="description">inserts a graphical image into the page (inline)</p>
<div class="example">
<pre class="examplecode html">
<em><img src="images/gollum.jpg" alt="Gollum from LOTR" /></em>
</pre>
<div class="exampleoutput insertoutput"></div>
</div>
<ul>
<li>the <code>src</code> attribute specifies the image URL</li>
<li>XHTML also requires an <code>alt</code> attribute describing the image</li>
</ul>
</div>
<div class="slide">
<h1>More about images</h1>
<div class="example">
<pre class="examplecode html">
<em><a href="http://theonering.net/"></em>
<img src="images/gandalf.jpg" alt="Gandalf from LOTR"
<em>title="You shall not pass!"</em> />
<em></a></em>
</pre>
<div class="exampleoutput insertoutput"></div>
</div>
<ul>
<li>if placed in an <code>a</code> anchor, the image becomes a link</li>
<li title="See? Even this bullet right here."><code>title</code> attribute is an optional tooltip (on ANY element)</li>
</ul>
</div>
<div class="slide">
<h1>
Line break:
<a href="http://www.w3schools.com/tags/tag_p.asp"><code><br></code></a>
</h1>
<p class="description">forces a line break in the middle of a block element (inline)</p>
<div class="example">
<pre class="examplecode html">
<p>Teddy said it was a hat, <em><br /></em> So I put it on.</p>
<p>Now Daddy's sayin', <em><br /></em> Where the
heck's the toilet plunger gone?</p>
</pre>
<div class="exampleoutput insertoutput"></div>
</div>
<ul>
<li>
Warning: Don't over-use <code>br</code> (guideline: >= 2 in a row is bad)
</li>
</ul>
<div class="handout">
<ul>
<li><code>br</code> should not be used to separate paragraphs or used multiple times in a row to create spacing</li>
</ul>
</div>
</div>
<div class="slide">
<h1>
<a href="http://www.w3schools.com/tags/tag_phrase_elements.asp">
Phrase elements
</a>:
<code><em></code>, <code><strong></code>
</h1>
<p class="description">
<code>em</code>: emphasized text (usually rendered in italic) <br />
<code>strong</code>: strongly emphasized text (usually rendered in bold) <br />
</p>
<div class="example">
<pre class="examplecode html">
<p>
HTML is <em><em></em>really<em></em></em>,
<em><strong></em>REALLY<em></strong></em> fun!
</p>
</pre>
<div class="exampleoutput insertoutput"></div>
</div>
<ul>
<li>as usual, the tags must be properly nested for a valid page</li>
</ul>
</div>
<div class="slide">
<h1>Nesting tags</h1>
<pre class="examplecode html badcode">
<p>
HTML is <em>really,
<strong>REALLY<em class="bad"></em></em> lots of</strong> fun!
</p>
</pre>
<ul>
<li>tags must be correctly nested</li>
<ul>
<li>(a closing tag must match the most recently opened tag)</li>
</ul>
<li>the browser may render it correctly anyway, but it is invalid XHTML
<ul>
<li>
(how would we get the above effect in a valid way?)
</li>
</ul>
</li>
</ul>
</div>
<div class="slide">
<h1>Comments: <a href="http://www.w3schools.com/tags/tag_comment.asp"><code><!--</code> ... <code>--></code></a></h1>
<p class="description">comments to document your HTML file or "comment out" text</p>
<div class="example">
<pre class="examplecode html">
<span class="comment"><!-- My web page, by Suzy Student
CSE 190 D, Spring 2048 --></span>
<p>CSE courses are <span class="comment"><!-- NOT --></span> a lot of fun!</p>
</pre>
<div class="exampleoutput insertoutput"></div>
</div>
<ul>
<li>many web pages are not thoroughly commented (or at all)</li>
<li>still useful at top of page and for disabling code</li>
<li>comments cannot be nested and cannot contain a <code>--</code></li>
</ul>
</div>
<div class="slide titleslide">
<h1>2.3: Web Standards</h1>
<ul>
<li>
2.1: Basic HTML
</li>
<li>
<strong>2.3: Web Standards</strong>
</li>
<li>
2.2: More HTML Elements
</li>
</ul>
</div>
<div class="slide">
<h1>
Web Standards
<span class="readingsection">(2.3.1)</span>
</h1>
<ul>
<li>
It is important to write proper XHTML code and follow proper syntax.
</li>
<li>Why use XHTML and web standards?
<ul>
<li>more rigid and structured language</li>
<li>more interoperable across different web browsers</li>
<li>more likely that our pages will display correctly in the future</li>
<li>can be interchanged with other XML data: <a href="http://en.wikipedia.org/wiki/Scalable_Vector_Graphics">SVG</a> (graphics), <a href="http://en.wikipedia.org/wiki/MathML">MathML</a>, <a href="http://en.wikipedia.org/wiki/MusicXML">MusicML</a>, <a href="http://en.wikipedia.org/wiki/List_of_XML_markup_languages">etc.</a></li>
</ul>
</li>
</ul>
</div>
<div class="slide">
<h1>
W3C XHTML Validator
<span class="readingsection">(2.3.2)</span>
</h1>
<div class="example">
<pre class="examplecode html">
<p>
<em><a href="http://validator.w3.org/check/referer">
<img src="http://www.w3.org/Icons/valid-xhtml11"
alt="Validate" />
</a></em>
</p>
</pre>
<div class="exampleoutput">
<p>
<a href="http://validator.w3.org/check/referer">
<img src="images/w3c-xhtml11.png" alt="Validate" />
</a>
</p>
</div>
</div>
<ul>
<li><a href="http://validator.w3.org/">validator.w3.org</a></li>
<li>checks your HTML code to make sure it follows the official XHTML syntax</li>
<li>more picky than the browser, which may render bad XHTML correctly</li>
</ul>
</div>
<div class="slide titleslide">
<h1>2.2: More HTML Elements</h1>
<ul>
<li>
2.1: Basic HTML
</li>
<li>
2.3: Web Standards
</li>
<li>
<strong>2.2: More HTML Elements</strong>
</li>
</ul>
</div>
<div class="slide">
<h1>
Unordered list:
<a href="http://www.w3schools.com/tags/tag_ul.asp"><code><ul></code></a>,
<a href="http://www.w3schools.com/tags/tag_li.asp"><code><li></code></a>
<span class="readingsection">(2.2.1)</span>
</h1>
<p class="description">
<code>ul</code> represents a bulleted list of items (block)<br />
<code>li</code> represents a single item within the list (block)
</p>
<div class="example">
<pre class="examplecode html">
<em><ul></em>
<em><li></em>No shoes<em></li></em>
<em><li></em>No shirt<em></li></em>
<em><li></em>No problem!<em></li></em>
<em></ul></em>
</pre>
<div class="exampleoutput insertoutput"></div>
</div>
</div>
<div class="slide">
<h1>More about unordered lists</h1>
<ul>
<li>a list can contain other lists:</li>
</ul>
<div class="example">
<pre class="examplecode exampleleftcolumn html">
<ul>
<li>Simpsons:
<em><ul></em>
<em><li></em>Homer<em></li></em>
<em><li></em>Marge<em></li></em>
<em></ul></em>
</li>
<li>Family Guy:
<em><ul></em>
<em><li></em>Peter<em></li></em>
<em><li></em>Lois<em></li></em>
<em></ul></em>
</li>
</ul>
</pre>
<div class="exampleoutput examplerightcolumn insertoutput"></div>
</div>
</div>
<div class="slide">
<h1>Ordered list: <a href="http://www.w3schools.com/tags/tag_ul.asp"><code><ol></code></a></h1>
<p class="description">
<code>ol</code> represents a numbered list of items (block)
</p>
<div class="example">
<pre class="examplecode exampleleftcolumn html">
<p>RIAA business model:</p>
<em><ol></em>
<em><li></em>Sue customers<em></li></em>
<em><li></em>???<em></li></em>
<em><li></em>Profit!<em></li></em>
<em></ol></em>
</pre>
<div class="exampleoutput examplerightcolumn insertoutput"></div>
</div>
<div class="handout">
<ul>
<li>we can make lists with letters or Roman numerals using CSS (later)</li>
</ul>
</div>
</div>
<div class="slide">
<h1>Definition list:
<a href="http://www.w3schools.com/tags/tag_dl.asp"><code><dl></code></a>, <a href="http://www.w3schools.com/tags/tag_dt.asp"><code><dt></code></a>, <a href="http://www.w3schools.com/tags/tag_dd.asp"><code><dd></code></a>
</h1>
<p class="description">
<code>dl</code> represents a list of definitions of terms (block) <br />
<code>dt</code> represents each term, and <code>dd</code> its definition
</p>
<div class="example">
<pre class="examplecode html">
<em><dl></em>
<em><dt></em>newbie<em></dt> <dd></em>one who does not have mad skills<em></dd></em>
<em><dt></em>own<em></dt> <dd></em>to soundly defeat
(e.g. I owned that newbie!)<em></dd></em>
<em><dt></em>frag<em></dt> <dd></em>a kill in a shooting game<em></dd></em>
<em></dl></em>
</pre>
<div class="exampleoutput insertoutput" style="font-size: smaller;"></div>
</div>
</div>
<div class="slide">
<h1>
Quotations: <a href="http://www.w3schools.com/tags/tag_blockquote.asp"><code><blockquote></code></a>
<span class="readingsection">(2.2.3)</span>
</h1>
<p class="description">
a lengthy quotation (block)
</p>
<div class="example">
<pre class="examplecode html">
<p>As Lincoln said in his famous Gettysburg Address:</p>
<em><blockquote></em>
<p>Fourscore and seven years ago, our fathers brought forth
on this continent a new nation, conceived in liberty, and
dedicated to the proposition that all men are created equal.</p>
<em></blockquote></em>
</pre>
<div class="exampleoutput insertoutput"></div>
</div>
</div>
<div class="slide">
<h1>Inline quotations: <a href="http://www.w3schools.com/tags/tag_q.asp"><code><q></code></a></h1>
<p class="description">a short quotation (inline)</p>
<div class="example">
<pre class="examplecode html">
<p>Quoth the Raven, <em><q></em>Nevermore.<em></q></em></p>
</pre>
<div class="exampleoutput insertoutput"></div>
</div>
<ul>
<li>
Why not just write the following?<br />
<code><p>Quoth the Raven, "Nevermore."</p></code>
</li>
</ul>
<div class="handout">
<p>We don't use " marks for two reasons:</p>
<ol>
<li>XHTML shouldn't contain literal quotation mark characters; they should be written as <code>&quot;</code></li>
<li>using <code><q></code> allows us to apply CSS styles to quotations (seen later)</li>
</ol>
</div>
</div>
<div class="slide">
<h1>
HTML Character Entities
<span class="readingsection">(2.2.4)</span>
</h1>
<p class="description">
a way of representing any <a href="http://en.wikipedia.org/wiki/Unicode">Unicode</a> character within a web page
</p>
<table class="standard">
<tr><th class="spaced slidetable">character(s)</th><th class="slidetable">entity</th></tr>
<tr class="code"><td>< ></td><td>&lt; &gt;</td></tr>
<tr class="code"><td>é è ñ</td><td>&eacute; &egrave; &ntilde;</td></tr>
<tr class="code"><td>™ ©</td><td>&trade; &copy;</td></tr>
<tr class="code"><td>π δ Δ</td><td>&pi; &delta; &Delta;</td></tr>
<tr class="code"><td>И</td><td>&#1048;</td></tr>
<tr class="code"><td>" &</td><td>&quot; &amp;</td></tr>
</table>
<ul>
<li><a href="http://www.w3schools.com/tags/ref_entities.asp">Complete list of HTML entities</a></li>
<li>How would you display the text <code>&amp;</code> on a web page?</li>
</ul>
</div>
<div class="slide">
<h1>HTML-encoding text</h1>
<div class="example">
<pre class="examplecode html" style="font-size: smaller;">
<em>&lt;</em>p<em>&gt;
&lt;</em>a href=<em>&quot;</em>http://google.com/search?q=marty<em>&amp;</em>ie=utf-8<em>&quot;&gt;</em>
Search Google for Marty
<em>&lt;</em>/a<em>&gt;
&lt;</em>/p<em>&gt;</em>
</pre>
<div class="exampleoutput insertoutput"></div>
</div>
<ul>
<li>To display the link text in a web page, its special characters must be encoded as shown above</li>
</ul>
</div>
<div class="slide">
<h1>
Computer code:
<a href="http://www.w3schools.com/tags/tag_phrase_elements.asp"><code><code></code></a>
</h1>
<p class="description">
a short section of computer code (usually shown in a fixed-width font)
</p>
<div class="example">
<pre class="examplecode html">
<p>
The <em><code></em>ul<em></code></em> and <em><code></em>ol<em></code></em>
tags make lists.
</p>
</pre>
<div class="exampleoutput insertoutput"></div>
</div>
</div>
<div class="slide">
<h1>
Preformatted text:
<a href="http://www.w3schools.com/tags/tag_pre.asp"><code><pre></code></a>
</h1>
<p class="description">a large section of pre-formatted text (block)</p>
<div class="example">
<pre class="examplecode html">
<em><pre></em>
Steve Jobs speaks loudly
reality distortion
Apple fans bow down
<em></pre></em>
</pre>
<div class="exampleoutput insertoutput"></div>
</div>
<ul>
<li>displayed with exactly the whitespace / line breaks given in the text</li>
<li>shown in a fixed-width font by default</li>
<li>how would it look if we had instead enclosed it in <code>code</code> tags?</li>
</ul>
</div>
<div class="slide">
<h1>
Web page metadata:
<a href="http://www.w3schools.com/tags/tag_meta.asp"><code><meta></code></a>
<span class="readingsection">(2.3.3)</span>
</h1>
<p class="description">
information about your page (for a browser, search engine, etc.)
</p>
<pre class="examplecode html">
<<em>meta</em> http-equiv="Content-Type"
content="text/html; charset=utf-8" />
<<em>meta</em> name="description"
content="Authors' web site for Building Java Programs." />
<<em>meta</em> name="keywords" content="java, textbook" />
</pre>
<ul>
<li>placed <strong>in the <code>head</code></strong> section of your XHTML page</li>
<li><code>meta</code> tags often have both the <code>name</code> and <code>content</code> attributes
<ul>
<li>some <code>meta</code> tags use the <code>http-equiv</code> attribute instead of <code>name</code></li>
</ul>
</li>
<li>using a <code>meta</code> tag <code>Content-Type</code> stops validator "tentatively valid" warnings
</li>
</ul>
</div>
<div class="slide">
<h1>Favorites icon ("favicon")</h1>
<pre class="syntaxtemplate html">
<link href="<var>filename</var>" type="<var>MIME type</var>" rel="shortcut icon" />
</pre>
<div class="example">
<pre class="examplecode html">
<link href="yahoo.gif" type="image/gif" rel="shortcut icon" />
</pre>
<div class="exampleoutput">
<img src="images/favicon1.gif" alt="favicon" /> <img src="images/favicon2.gif" alt="favicon" />
</div>
</div>
<ul>
<li>the <code>link</code> tag, placed in the <code>head</code> section, attaches another file to the page
<ul>
<li>in this case, an icon to be placed in the browser title bar and bookmarks</li>
</ul>
</li>
<li>IE6: Doesn't work; must put a file <code>favicon.ico</code> in the root of the web server (<a href="http://www.clickfire.com/viewpoints/articles/favicons.php">info</a>)</li>
</ul>
</div>
<div class="slide titleslide">
<h1>3.1: Basic CSS</h1>
<ul>
<li>
<strong>3.1: Basic CSS</strong>
</li>
<li>
3.2: More CSS
</li>
</ul>
</div>
<div class="slide">
<h1>The bad way to produce styles</h1>
<div class="example">
<pre class="examplecode html">
<p>
<em><font face="Arial"></em>Welcome to Greasy Joe's.<em></font></em>
You will <em><b></em>never<em></b></em>, <em><i></em>ever<em></i></em>, <em><u></em>EVER<em></u></em> beat <em>
<font size="+4" color="red"></em>OUR<em></font></em> prices!
</p>
</pre>
<div class="exampleoutput insertoutput"></div>
</div>
<ul>
<li>tags such as <code>b</code>, <code>i</code>, <code>u</code>, and <code>font</code> are discouraged in strict XHTML
<ul>
<li>Why is this bad?</li>
</ul>
</li>
</ul>
</div>
<div class="slide">
<h1>
Cascading Style Sheets (CSS):
<code><a href="http://www.w3schools.com/tags/tag_link.asp"><link></a></code>
<span class="readingsection">(3.1.2)</span>
</h1>
<pre class="syntaxtemplate html">
<head>
...
<em><link href="<var>filename</var>" type="text/css" rel="stylesheet" /></em>
...
</head>
</pre>
<pre class="examplecode html">
<link href="style.css" type="text/css" rel="stylesheet" />
</pre>
<ul>
<li><span class="term">CSS</span> describes the appearance and layout of information on a web page
<ul>
<li>(as opposed to HTML, which describes the content of the page)</li>
</ul>
</li>
<li>can be embedded in HTML or placed into separate <code>.css</code> file (preferred)</li>
<li>not to be confused with </li>
</ul>
</div>
<div class="slide">
<h1>
Basic CSS rule syntax
<span class="readingsection">(3.1.1)</span>
</h1>
<pre class="syntaxtemplate css">
<var>selector</var> {
<var>property</var>: <var>value</var>;
<var>property</var>: <var>value</var>;
<var>...</var>
<var>property</var>: <var>value</var>;
}
</pre>
<pre class="examplecode css">
p {
font-family: sans-serif;
color: red;
}
</pre>
<ul>
<li>a CSS file consists of one or more <span class="term">rules</span></li>
<li>a rule's <span class="term">selector</span> specifies HTML element(s) and applies style <span class="term">properties</span>
<ul>
<li>
a selector of <code>*</code> selects all elements
</li>
</ul>
</li>
</ul>
</div>
<div class="slide">
<h1>
CSS properties for colors
<span class="readingsection">(3.1.3)</span>
</h1>
<div class="example">
<pre class="examplecode css">
p {
<em>color: red;</em>
<em>background-color: yellow;</em>
}
</pre>
<div class="exampleoutput insertoutput">
<p>This paragraph uses the style above.</p>
</div>
</div>
<table class="standard">
<tr>
<th>
property
</th>
<th>
description
</th>
</tr>
<tr>
<td>
<code><a href="http://www.w3schools.com/css/pr_text_color.asp">color</a></code>
</td>
<td>
color of the element's text
</td>
</tr>
<tr>
<td>
<code><a href="http://www.w3schools.com/css/pr_background-color.asp">background-color</a></code>
</td>
<td>
color that will appear behind the element
</td>
</tr>
</table>
</div>
<div class="slide">
<h1>Specifying colors</h1>
<div class="example">
<pre class="examplecode css">
p { color: <em>red</em>; }
h2 { color: <em>rgb(128, 0, 196)</em>; }
h4 { color: <em>#FF8800</em>; }
</pre>
<div class="exampleoutput insertoutput">
<p>This paragraph uses the first style above.</p>
<h2>This h2 uses the second style above.</h2>
<h4>This h4 uses the third style above.</h4>
</div>
</div>
<ul>
<li><a href="http://www.w3schools.com/css/css_colors.asp">color names</a>: <span style="font-size: smaller"><code style="color: aqua">aqua</code>, <code style="color: black">black</code>, <code style="color: blue">blue</code>, <code style="color: fuchsia">fuchsia</code>, <code style="color: gray">gray</code>, <code style="color: green">green</code>, <code style="color: lime">lime</code>, <code style="color: maroon">maroon</code>, <code style="color: navy">navy</code>, <code style="color: olive">olive</code>, <code style="color: purple">purple</code>, <code style="color: red">red</code>, <code style="color: silver">silver</code>, <code style="color: teal">teal</code>, <code style="color: white">white</code> (<a href="http://www.clickz.com/showPage.html?page=3116421">white</a>), <code style="color: yellow">yellow</code></span></li>
<li>RGB codes: red, green, and blue values from 0 (none) to 255 (full)</li>
<li>hex codes: RGB values in base-16 from 00 (0, none) to FF (255, full)</li>
</ul>
</div>
<div class="slide">
<h1>
CSS properties for <a href="http://www.theonion.com/content/node/28261">fonts</a>
<span class="readingsection">(3.1.5)</span>
</h1>
<table class="standard">
<tr>
<th>
property
</th>
<th>
description
</th>
</tr>
<tr>
<td>
<code><a href="http://www.w3schools.com/css/pr_font_font-family.asp">font-family</a></code>
</td>
<td>
which font will be used
</td>
</tr>
<tr>
<td>
<code><a href="http://www.w3schools.com/css/pr_font_font-size.asp">font-size</a></code>
</td>
<td>
how large the letters will be drawn
</td>
</tr>
<tr>
<td>
<code><a href="http://www.w3schools.com/css/pr_font_font-style.asp">font-style</a></code>
</td>
<td>
used to enable/disable italic style
</td>
</tr>
<tr>
<td>
<code><a href="http://www.w3schools.com/css/pr_font_weight.asp">font-weight</a></code>
</td>
<td>
used to enable/disable bold style
</td>
</tr>
<tr>
<td colspan="2" class="completelist">
<a href="http://www.w3schools.com/css/css_reference.asp#font">Complete list of font properties</a>
</ul>
</td>
</tr>
</table>
</div>
<div class="slide">
<h1><code><a href="http://www.w3schools.com/css/pr_font_font-family.asp">font-family</a></code></h1>
<div class="example">
<pre class="examplecode css">
p {
<em>font-family: Georgia;</em>
}
h2 {
<em>font-family: "Courier New";</em>
}
</pre>
<div class="exampleoutput insertoutput">
<p>This paragraph uses the first style above.</p>
<h2>This h2 uses the second style above.</h2>
</div>
</div>
<ul>
<li>enclose multi-word font names in quotes</li>
</ul>
</div>
<div class="slide">
<h1>More about <code>font-family</code></h1>
<div class="example">
<pre class="examplecode css">
p {
font-family: <em>Garamond, "Times New Roman", serif</em>;
}
</pre>
<div class="exampleoutput insertoutput">
<p>This paragraph uses the above style.</p>
</div>
</div>
<ul>
<li>can specify multiple fonts from highest to lowest priority</li>
<li><span class="term">generic font names</span>: <br />
<span style="font-family: serif">serif</span>, <span style="font-family: sans-serif">sans-serif</span>, <span style="font-family: cursive">cursive</span>, <span style="font-family: fantasy">fantasy</span>, <span style="font-family: monospace">monospace</span></li>
</ul>
<div class="handout">
<ul>
<li>if the first font is not found on the user's computer, the next is tried</li>
<li>generally should specify similar fonts</li>
<li>placing a generic font name at the end of your <code>font-family</code> value ensures that every computer will use a valid font</li>
</ul>
</div>
</div>
<div class="slide">
<h1><code><a href="http://www.w3schools.com/css/pr_font_font-size.asp">font-size</a></code></h1>
<div class="example">
<pre class="examplecode css">
p {
<em>font-size: 14pt;</em>
}
</pre>
<div class="exampleoutput insertoutput">
<p>This paragraph uses the style above.</p>
</div>
</div>
<ul>
<li><a href="http://www.w3schools.com/css/css_units.asp">units: pixels (<code>px</code>) vs. point (<code>pt</code>) vs. m-size (<code>em</code>)</a><br />
<code style="font-size: 16px;">16px</code>, <code style="font-size: 16pt;">16pt</code>, <code style="font-size: 1.16em;">1.16em</code></li>
<li>vague font sizes: <code style="font-size: xx-small;">xx-small</code>, <code style="font-size: x-small;">x-small</code>, <code style="font-size: small;">small</code>, <code style="font-size: medium;">medium</code>, <code style="font-size: large;">large</code>, <code style="font-size: x-large;">x-large</code>, <code style="font-size: xx-large;">xx-large</code>, <code style="font-size: smaller;">smaller</code>, <code style="font-size: larger;">larger</code></li>
<li>percentage font sizes, e.g.: <code style="font-size: 90%;">90%</code>, <code style="font-size: 120%;">120%</code></li>
</ul>
<div class="handout">
<ul>
<li><code>pt</code> specifies number of <em>point</em>, where a point is 1/72 of an inch onscreen</li>
<li><code>px</code> specifies a number of pixels on the screen</li>
<li><code>em</code> specifies number of <em>m-widths</em>, where 1 em is equal to the font's current size</li>
</ul>
</div>
</div>
<div class="slide">
<h1>
<code><a href="http://www.w3schools.com/css/pr_font_font-weight.asp">font-weight</a></code>,
<code><a href="http://www.w3schools.com/css/pr_font_font-style.asp">font-style</a></code>
</h1>
<div class="example">
<pre class="examplecode css">
p {
<em>font-weight: bold;</em>
<em>font-style: italic;</em>
}
</pre>
<div class="exampleoutput insertoutput">
<p>This paragraph uses the style above.</p>
</div>
</div>
<ul>
<li>either of the above can be set to <code>normal</code> to turn them off (e.g. headings)</li>
</ul>
</div>
<!--#include virtual="commonbottom.html" -->