<!--#include virtual="../s5/commontop.html" -->
<title>Lecture 1: Internet/WWW, Basic HTML and CSS — INFO 343 Autumn 2012</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>INFO 343 Lecture 1</h1>
<h2>Internet/WWW; Basic HTML and CSS</h2>
</div>
</div>
<div class="presentation">
<div class="slide">
<h1>Internet/WWW, Basic HTML & CSS</h1>
<h3>Lecture 1</h3>
<!-- <h4>Reading: Chapter 2; 3.1–3.3</h4> -->
<p class="license">
The contents of this presentation are Copyright 2010 Marty Stepp, Jessica Miller, and/or Morgan Doocy.
</p>
<div class="w3c">
<a href="http://validator.w3.org/check/referer"><img src="../s5/images/w3c-xhtml11.png" alt="Valid XHTML 1.1" /></a>
<a href="http://jigsaw.w3.org/css-validator/check/referer"><img src="../s5/images/w3c-css.png" alt="Valid CSS!" /></a>
</div>
</div>
<div class="slide titleslide">
<h1>1.1: The Internet</h1>
<ul>
<li>
<strong>1.1: The Internet</strong>
</li>
<li>
1.2: The World Wide Web (WWW)
</li>
<li>
2.1: Basic HTML
</li>
</ul>
</div>
<div class="slide">
<h1>The Internet</h1>
<div class="centerfigure">
<img src="images/internet.png" alt="The Internet" />
</div>
<ul>
<li>Wikipedia: <a href="http://en.wikipedia.org/wiki/Internet">http://en.wikipedia.org/wiki/Internet</a></li>
<li>a connection of computer networks using the Internet Protocol (IP)</li>
<li>What's the difference between the Internet and the World Wide Web (WWW)?</li>
</ul>
<div class="handout">
<ul>
<li>the Web is the collection of web sites and pages around the world; the Internet is larger and also includes other services such as email, chat, online games, etc.</li>
</ul>
</div>
</div>
<div class="slide">
<h1>
Brief history
<span class="readingsection">(1.1.1)</span>
</h1>
<ul>
<li>began as a US Department of Defense network called <a href="http://en.wikipedia.org/wiki/ARPANET">ARPANET</a> (1960s-70s)</li>
<li>initial services: electronic mail, file transfer</li>
<li>opened to commercial interests in late 80s</li>
<li>WWW created in 1989-91 by <a href="http://en.wikipedia.org/wiki/Tim_Berners-Lee">Tim Berners-Lee</a></li>
<li>popular web browsers released: Netscape 1994, IE 1995</li>
<li>Amazon.com opens in 1995; Google January 1996</li>
<li class="incremental"><a href="http://www.webhamster.com/">Hamster Dance</a> web page created in 1999 <img src="images/hamster_dance.png" alt="hamster dance" class="incremental" style="vertical-align: top" /></li>
</ul>
</div>
<div class="slide">
<h1>Key aspects of the internet</h1>
<ul>
<li>subnetworks can stand on their own</li>
<li>computers can dynamically join and leave the network</li>
<li>built on open standards; anyone can create a new internet device</li>
<li>lack of centralized control (mostly)</li>
<li>everyone can use it with simple, commonly available software</li>
</ul>
</div>
<div class="slide">
<h1>
People and organizations
<span class="readingsection">(1.1.2)</span>
</h1>
<ul>
<li>Internet Engineering Task Force (<a href="http://en.wikipedia.org/wiki/Internet_Engineering_Task_Force">IETF</a>): internet protocol standards</li>
<li>Internet Corporation for Assigned Names and Numbers (<a href="http://en.wikipedia.org/wiki/ICANN">ICANN</a>): <br />
decides top-level <a href="http://news.com.com/ICANN+rejects+.xxx+domain/2100-1047_3-6071124.html">domain names</a></li>
<li>World Wide Web Consortium (<a href="http://en.wikipedia.org/wiki/World_Wide_Web_Consortium">W3C</a>): web standards</li>
</ul>
<div class="centerfigure">
<img src="images/ietf_logo.gif" alt="IETF" />
<img src="images/icann.jpg" alt="ICANN" />
<img src="images/w3c.png" alt="W3C" />
</div>
</div>
<div class="slide">
<h1>
Layered architecture
<span class="readingsection">(1.1.3)</span>
</h1>
<p>
The internet uses a layered hardware/software architecture (also called the "OSI model"):
<img class="rightfigure" src="images/osi_model.png" alt="OSI model" />
</p>
<ul>
<li><em>physical layer</em> : devices such as ethernet, coaxial cables, fiber-optic lines, modems</li>
<li><em>data link layer</em> : basic hardware protocols (ethernet, wifi, DSL PPP)</li>
<li><em>network / internet layer</em> : basic software protocol (IP)</li>
<li><em>transport layer</em> : adds reliability to network layer (TCP, UDP)</li>
<li><em>application layer</em> : implements specific communication for each kind of program (HTTP, POP3/IMAP, SSH, FTP)</li>
</ul>
</div>
<div class="slide">
<h1>Internet Protocol (<a href="http://en.wikipedia.org/wiki/Internet_Protocol">IP</a>)</h1>
<ul>
<li>a simple protocol for attempting to send data between two computers</li>
<li>each device has a 32-bit IP address written as four 8-bit numbers (0-255) <br />
<img src="images/fig1_ip_address.png" alt="IP address" style="width: 507px; margin-top: 20px;" />
</li>
<li>find out your internet IP address: <a href="http://www.whatismyip.com/">whatismyip.com</a></li>
<li>find out your local IP address:
<ul>
<li>in a terminal, type: <code>ipconfig</code> (Windows) or <code>ifconfig</code> (Mac/Linux)</li>
</ul>
</li>
</ul>
</div>
<div class="slide">
<h1>Transmission Control Protocol (<a href="http://en.wikipedia.org/wiki/Tcp_protocol">TCP</a>)</h1>
<ul>
<li>adds multiplexing, guaranteed message delivery on top of IP</li>
<li>
<strong>multiplexing</strong>: multiple programs using the same IP address
<ul>
<li><strong>port</strong>: a number given to each program or service</li>
<li>port 80: web browser (port 443 for secure browsing)</li>
<li>port 25: email</li>
<li>port 22: ssh</li>
<li>port 5190: AOL Instant Messenger</li>
<li><a href="http://en.wikipedia.org/wiki/List_of_TCP_and_UDP_port_numbers">more common ports</a></li>
</ul>
</li>
<li>some programs (games, streaming media programs) use simpler <a href="http://en.wikipedia.org/wiki/User_Datagram_Protocol">UDP</a> protocol instead of TCP</li>
</ul>
</div>
<div class="slide titleslide">
<h1>1.2: The World Wide Web (WWW)</h1>
<ul>
<li>
1.1: The Internet
</li>
<li>
<strong>1.2: The World Wide Web (WWW)</strong>
</li>
<li>
2.1: Basic HTML
</li>
</ul>
</div>
<div class="slide">
<h1>
<a href="http://en.wikipedia.org/wiki/Web_server">Web servers</a> and
<a href="http://en.wikipedia.org/wiki/Web_browser">browsers</a>
<span class="readingsection">(1.2.1)</span>
</h1>
<div class="topfigure">
<img src="images/webserver.gif" alt="web server" />
</div>
<ul>
<li>
<strong>web server</strong>: software that listens for web page requests
<ul>
<li><a href="http://www.apache.org">Apache</a></li>
<li>Microsoft Internet Information Server (IIS) (<a href="http://www.microsoft.com/resources/documentation/windows/xp/all/proddocs/en-us/iiiisin2.mspx?mfr=true">part of Windows</a>)</li>
</ul>
</li>
<li><strong>web browser</strong>: fetches/displays documents from web servers
<img class="rightfigure" src="images/web_browser.jpg" alt="Firefox web browser" />
<ul>
<li><a href="http://www.getfirefox.com/">Mozilla Firefox</a></li>
<li>Microsoft <a href="http://www.microsoft.com/windows/products/winfamily/ie/">Internet Explorer</a> (IE)</li>
<li>Apple <a href="http://www.apple.com/safari/">Safari</a></li>
<li><a href="http://www.google.com/chrome/">Google Chrome</a></li>
<li><a href="http://www.opera.com/">Opera</a></li>
</ul>
</li>
</ul>
</div>
<div class="slide">
<h1>
Domain Name System (<a href="http://en.wikipedia.org/wiki/Dns">DNS</a>)
<span class="readingsection">(1.2.2)</span>
</h1>
<ul>
<li>a set of servers that map written names to IP addresses
<ul>
<li>Example: <code>ischool.uw.edu</code> → <code>128.208.3.88</code></li>
</ul>
</li>
<li>many systems maintain a local cache called a <a href="http://en.wikipedia.org/wiki/Hosts_file">hosts file</a>
<ul>
<li>Windows: <code><a href="file:///C:/Windows/system32/drivers/etc/hosts">C:\Windows\system32\drivers\etc\hosts</a></code></li>
<li>Mac: <code><a href="file:///private/etc/hosts">/private/etc/hosts</a></code></li>
<li>Linux: <code><a href="file:///etc/hosts">/etc/hosts</a></code></li>
</ul>
</li>
</ul>
</div>
<div class="slide">
<h1>Uniform Resource Locator (<a href="http://en.wikipedia.org/wiki/Url">URL</a>)</h1>
<ul>
<li>an identifier for the location of a document on a web site</li>
<li>
a basic URL:
<pre>
<a href="http://www.aw-bc.com/info/regesstepp/index.html">http://www.aw-bc.com/info/regesstepp/index.html</a>
~~~~ ~~~~~~~~~~~~~ ~~~~~~~~~~~~~~~~~~~~~~~~~~
protocol host path
</pre>
</li>
<li>
upon entering this URL into the browser, it would:
<ul>
<li>ask the DNS server for the IP address of <code>www.aw-bc.com</code></li>
<li>connect to that IP address at port 80</li>
<li>ask the server to <code>GET /info/regesstepp/index.html</code></li>
<li>display the resulting page on the screen</li>
</ul>
</li>
</ul>
</div>
<div class="slide">
<h1>More advanced URLs</h1>
<ul>
<li>
<strong>anchor</strong>: jumps to a given section of a web page
<pre>
<a href="http://www.textpad.com/download/index.html#downloads">http://www.textpad.com/download/index.html<strong>#downloads</strong></a>
</pre>
<ul>
<li>fetches <code>index.html</code> then jumps down to part of the page labeled <code>downloads</code></li>
</ul>
</li>
<li>
<strong>port</strong>: for web servers on ports other than the default 80
<pre>
http://www.cs.washington.edu<strong>:8080</strong>/secret/money.txt
</pre>
</li>
<li>
<strong>query string</strong>: a set of parameters passed to a web program
<pre>
<a href="http://www.google.com/search?q=miserable+failure&start=10">http://www.google.com/search<strong>?q=miserable+failure&start=10</strong></a>
</pre>
<ul>
<li>parameter <code>q</code> is set to <code>"miserable+failure"</code></li>
<li>parameter <code>start</code> is set to <code>10</code></li>
</ul>
</li>
</ul>
</div>
<div class="slide">
<h1>
Hypertext Transport Protocol
(<a href="http://en.wikipedia.org/wiki/Http_protocol">HTTP</a>)
<span class="readingsection">(1.2.3)</span>
</h1>
<ul>
<li>the set of commands understood by a web server and sent from a browser</li>
<li>
some HTTP commands (your browser sends these internally):
<ul>
<li><code>GET <em>filename</em></code> : download</li>
<li><code>POST <em>filename</em></code> : send a web form response</li>
<li><code>PUT <em>filename</em></code> : upload</li>
</ul>
</li>
<li>
simulating a browser with a terminal window:
<pre class="examplecode shell">
$ <em>telnet www.cs.washington.edu 80</em>
Trying 128.208.3.88...
Connected to 128.208.3.88 (128.208.3.88).
Escape character is '^]'.
<em>GET /index.html</em>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 ...">
<html>
...
</pre>
</li>
</ul>
</div>
<div class="slide">
<h1>HTTP error codes</h1>
<ul>
<li>when something goes wrong, the web server returns a special "error code" number to the browser, possibly followed by an HTML document</li>
<li>common error codes:
<table class="standard">
<tr>
<th class="spaced">Number</th><th>Meaning</th>
</tr>
<tr>
<td>200</td>
<td>OK</td>
</tr>
<tr>
<td><a href="http://clsc.net/research/google-302-page-hijack.htm">301-303</a></td>
<td>page has moved (permanently or temporarily)</td>
</tr>
<tr>
<td><a href="http://www.cs.washington.edu/education/courses/cse190d/07sp/lectures/">403</a></td>
<td>you are forbidden to access this page</td>
</tr>
<tr>
<td><a href="http://www.homestarrunner.com/404.html">404</a></td>
<td>page not found</td>
</tr>
<tr>
<td>500</td>
<td>internal server error</td>
</tr>
<tr>
<td colspan="2" class="completelist"><a href="http://en.wikipedia.org/wiki/Http_error_codes">complete list</a></td>
</tr>
</table>
</li>
</ul>
</div>
<div class="slide">
<h1>Internet media ("<a href="http://en.wikipedia.org/wiki/Mime_type">MIME</a>") types</h1>
<ul>
<li>
sometimes when including resources in a page (style sheet, icon, multimedia object), we specify their type of data
<table class="standard">
<tr>
<th>MIME type</th>
<th class="slidetable">file extension</th>
</tr>
<tr class="code">
<td>text/html</td><td>.html</td>
</tr>
<tr class="code">
<td>text/plain</td><td>.txt</td>
</tr>
<tr class="code">
<td>image/gif</td><td>.gif</td>
</tr>
<tr class="code">
<td>image/jpeg</td><td>.jpg</td>
</tr>
<tr class="code">
<td>video/quicktime</td><td>.mov</td>
</tr>
<tr class="code">
<td>application/octet-stream</td><td>.exe</td>
</tr>
</table>
</li>
<li>Lists of MIME types: <a href="http://www.w3schools.com/media/media_mimeref.asp">by type</a>, <a href="http://www.webmaster-toolkit.com/mime-types.shtml">by extension</a></li>
</ul>
</div>
<div class="slide">
<h1>
Web languages / technologies
<span class="readingsection">(1.2.4)</span>
</h1>
<ul>
<li>Hypertext Markup Language (<a href="http://en.wikipedia.org/wiki/Html">HTML</a>): used for writing web pages</li>
<li>Cascading Style Sheets (<a href="http://en.wikipedia.org/wiki/Cascading_Style_Sheets">CSS</a>): stylistic info for web pages</li>
<li>PHP Hypertext Processor (<a href="http://www.php.net/">PHP</a>): dynamically create pages on a web server</li>
<li><a href="http://en.wikipedia.org/wiki/JavaScript">JavaScript</a>: interactive and programmable web pages</li>
<li>Asynchronous JavaScript and XML (<a href="http://en.wikipedia.org/wiki/Ajax_%28programming%29">Ajax</a>): accessing data for web applications</li>
<li>eXtensible Markup Language (<a href="http://en.wikipedia.org/wiki/Xml">XML</a>): metalanguage for organizing data</li>
<li>Structured Query Language (<a href="http://en.wikipedia.org/wiki/Sql">SQL</a>): interaction with databases</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>
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: more than one in a row without intervening text 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="../s5/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>
Citations:
<a href="http://www.w3schools.com/tags/tag_cite.asp"><code><cite></code></a>,
<a href="http://www.w3schools.com/tags/tag_cite.asp"><code><address></code></a>
</h1>
<p class="description">a citation (inline); address (block)</p>
<div class="example">
<pre class="examplecode html"><p>I read it on <em><cite></em><a href="http://reddit.com/">Reddit</a><em></cite></em>!</p></pre>
<div class="exampleoutput insertoutput"></div>
</div>
<ul>
<li>can be used for names of people or publications, web addresses, etc.</li>
</ul>
<div class="example">
<pre class="examplecode html"><em><address></em>
Mary Gates Hall<br/>
Box 325840
<em></address></em></pre>
<div class="exampleoutput insertoutput"></div>
</div>
<ul>
<li>can be used for street addresses, URLs, IP addresses, etc.</li>
</ul>
</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="../s5/images/favicon1.gif" alt="favicon" /> <img src="../s5/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>
<div class="slide">
<h1>Grouping styles</h1>
<div class="example">
<pre class="examplecode css">
p<em>, h1, h2</em> {
color: green;
}
h2 {
background-color: yellow;
}
</pre>
<div class="exampleoutput insertoutput">
<p>This paragraph uses the above style.</p>
<h2>This h2 uses the above styles.</h2>
</div>
</div>
<ul>
<li>a style can select multiple elements separated by commas</li>
<li>the individual elements can also have their own styles (like <code>h2</code> above)</li>
</ul>
</div>
<div class="slide">
<h1>
CSS comments:
<code>/*</code> ... <code>*/</code>
<span class="readingsection">(3.1.4)</span>
</h1>
<pre class="examplecode css">
<span class="comment">/* This is a comment.
It can span many lines in the CSS file. */</span>
p {
color: red;
background-color: aqua;
}
</pre>
<ul>
<li>CSS (like HTML) is usually not commented as much as code such as Java</li>
<li>the <code>//</code> single-line comment style is NOT supported in CSS</li>
<li>the <code><!-- ... --></code> HTML comment style is also NOT supported in CSS</li>
</ul>
</div>
<div class="slide">
<h1>
W3C CSS Validator
<span class="readingsection">(3.2.6)</span>
</h1>
<div class="example">
<pre class="examplecode css">
<p>
<a href="http://jigsaw.w3.org/css-validator/check/referer">
<img src="http://jigsaw.w3.org/css-validator/images/vcss"
alt="Valid CSS!" /></a>
</p>
</pre>
<div class="exampleoutput">
<a href="http://jigsaw.w3.org/css-validator/check/referer"><img src="../s5/images/w3c-css.png" alt="Valid CSS!" /></a>
</div>
</div>
<ul>
<li><a href="http://jigsaw.w3.org/css-validator/">jigsaw.w3.org/css-validator/</a></li>
<li>checks your CSS to make sure it meets the official CSS specifications</li>
<li>more picky than the web browser, which may render malformed CSS correctly</li>
</ul>
</div>
<!-- <div class="slide">
<h1>
CSS properties for text
<span class="readingsection">(3.1.6)</span>
</h1>
<table class="standard">
<tr>
<th>
property
</th>
<th>
description
</th>
</tr>
<tr>
<td>
<code><a href="http://www.w3schools.com/css/pr_text_text-align.asp">text-align</a></code>
</td>
<td>
alignment of text within its element
</td>
</tr>
<tr>
<td>
<code><a href="http://www.w3schools.com/css/pr_text_text-decoration.asp">text-decoration</a></code>
</td>
<td>
decorations such as underlining
</td>
</tr>
<tr>
<td>
<code><a href="http://www.w3schools.com/css/pr_dim_line-height.asp">line-height</a></code>, <br />
<code><a href="http://www.w3schools.com/css/pr_text_word-spacing.asp">word-spacing</a></code>, <br />
<code><a href="http://www.w3schools.com/css/pr_text_letter-spacing.asp">letter-spacing</a></code>
</td>
<td>
gaps between the various portions of the text
</td>
</tr>
<tr>
<td>
<code><a href="http://www.w3schools.com/css/pr_text_text-indent.asp">text-indent</a></code>
</td>
<td>
indents the first letter of each paragraph
</td>
</tr>
<tr>
<td colspan="2" class="completelist">
<a href="http://www.w3schools.com/css/css_reference.asp#text">Complete list of text properties</a>
</td>
</tr>
</table>
</div> -->
<div class="slide">
<h1><code><a href="http://www.w3schools.com/css/pr_text_text-align.asp">text-align</a></code></h1>
<div class="example">
<pre class="examplecode css">
blockquote { <em>text-align: justify;</em> }
h2 { <em>text-align: center;</em> }
</pre>
<div class="exampleoutput insertoutput">
<h2>The Emperor's Quote</h2>
<blockquote>
<p>
[TO LUKE SKYWALKER] The alliance... will die. As will your friends. Good, I can feel your anger. I am unarmed. Take your weapon. Strike me down with all of your hatred and your journey towards the dark side will be complete.
</p>
</blockquote>
</div>
</div>
<ul>
<li>can be <code>left</code>, <code>right</code>, <code>center</code>, or <code>justify</code> (which widens all full lines of the element so that they occupy its entire width) </li>
</ul>
</div>
<div class="slide">
<h1><code><a href="http://www.w3schools.com/css/pr_text_text-decoration.asp">text-decoration</a></code></h1>
<div class="example">
<pre class="examplecode css">
p {
<em>text-decoration: underline;</em>
}
</pre>
<div class="exampleoutput insertoutput">
<p style="text-decoration: underline;">This paragraph uses the style above.</p>
</div>
</div>
<ul>
<li>can also be <code style="text-decoration: overline;">overline</code>, <code style="text-decoration: line-through;">line-through</code>, <code style="text-decoration: blink;">blink</code>, or <code>none</code></li>
<li>
effects can be combined:
<p><code>text-decoration: overline underline;</code></p>
</li>
</ul>
</div>
<div class="slide">
<h1>
The <a href="http://www.w3schools.com/css/pr_list-style-type.asp"><code>list-style-type</code></a> property
<span class="readingsection">(3.2.4)</span>
</h1>
<pre class="examplecode css">
ol { <em>list-style-type: lower-roman;</em> }
</pre>
<ul style="list-style-type: square">
<li>Possible values:
<ol style="list-style-type: lower-roman">
<li><code>none</code> : No marker</li>
<li><code>disc</code> (default), <code>circle</code>, <code>square</code></li>
<li><code>decimal</code> : 1, 2, 3, etc.</li>
<li><code>decimal-leading-zero</code> : 01, 02, 03, etc.</li>
<li><code>lower-roman</code> : i, ii, iii, iv, v, etc.</li>
<li><code>upper-roman</code> : I, II, III, IV, V, etc.</li>
<li><code>lower-alpha</code> : a, b, c, d, e, etc.</li>
<li><code>upper-alpha</code> : A, B, C, D, E, etc.</li>
<li><code>lower-greek</code> : alpha, beta, gamma, etc.</li>
<li>others: <code>hebrew</code>, <code>armenian</code>, <code>georgian</code>, <code>cjk-ideographic</code>, <code>hiragana</code>, <code>katakana</code>, <code>hiragana-iroha</code>, <code>katakana-iroha</code></li>
</ol>
</li>
</ul>
</div>
<div class="slide">
<h1>CSS <a href="http://www.w3schools.com/css/css_reference.asp#background">properties for backgrounds</a></h1>
<table class="standard">
<tr>
<th>
property
</th>
<th>
description
</th>
</tr>
<tr>
<td>
<code><a href="http://www.w3schools.com/css/pr_background-color.asp">background-color</a></code>
</td>
<td>
color to fill background
</td>
</tr>
<tr>
<td>
<code><a href="http://www.w3schools.com/css/pr_background-image.asp">background-image</a></code>
</td>
<td>
image to place in background
</td>
</tr>
<tr>
<td>
<code><a href="http://www.w3schools.com/css/pr_background-position.asp">background-position</a></code>
</td>
<td>
placement of bg image within element
</td>
</tr>
<tr>
<td>
<code><a href="http://www.w3schools.com/css/pr_background-repeat.asp">background-repeat</a></code>
</td>
<td>
whether/how bg image should be repeated
</td>
</tr>
<tr>
<td>
<code><a href="http://www.w3schools.com/css/pr_background-attachment.asp">background-attachment</a></code>
</td>
<td>
whether bg image scrolls with page
</td>
</tr>
<tr>
<td>
<code><a href="http://www.w3schools.com/css/pr_background.asp">background</a></code>
</td>
<td>
shorthand to set all background properties
</td>
</tr>
</table>
</div>
<div class="slide">
<h1><code><a href="http://www.w3schools.com/css/pr_background-image.asp">background-image</a></code></h1>
<div class="example">
<pre class="examplecode css">
body {
<em>background-image: url("images/draft.jpg");</em>
}
</pre>
<div class="exampleoutput insertoutput" style="background-repeat: repeat; background-position: inherit;">
<p>
This is the first paragraph
</p>
<p>
This is the second paragraph...<br />
It occupies 2 lines
</p>
</div>
</div>
<ul>
<li>background image/color fills the element's content area</li>
</ul>
</div>
<div class="slide">
<h1><code><a href="http://www.w3schools.com/css/pr_background-repeat.asp">background-repeat</a></code></h1>
<div class="example">
<pre class="examplecode css">
body {
background-image: url("images/draft.jpg");
<em>background-repeat: repeat-x;</em>
}
</pre>
<div class="exampleoutput insertoutput" style="background-position: inherit;">
<p>This is the first paragraph</p>
<p>This is the second paragraph...<br />
It occupies 2 lines</p>
</div>
</div>
<ul>
<li>can be <code>repeat</code> (default), <code>repeat-x</code>, <code>repeat-y</code>, or <code>no-repeat</code></li>
</ul>
</div>
<div class="slide">
<h1><code><a href="http://www.w3schools.com/css/pr_background-position.asp">background-position</a></code></h1>
<div class="example">
<pre class="examplecode css">
body {
background-image: url("images/draft.jpg");
background-repeat: no-repeat;
<em>background-position: 370px 20px;</em>
}
</pre>
<div class="exampleoutput insertoutput">
<p>This is the first paragraph</p>
<p>This is the second paragraph...<br />
It occupies 2 lines</p>
</div>
</div>
<ul>
<li>value consists of two tokens, each of which can be <code>top</code>, <code>left</code>, <code>right</code>, <code>bottom</code>, <code>center</code>, a percentage, or a length value in <code>px</code>, <code>pt</code>, etc.</li>
<li>value can be negative to shift left/up by a given amount</li>
</ul>
</div>
<!--#include virtual="../s5/commonbottom.html" -->