<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<!-- metadata -->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="generator" content="S5" />
<meta name="version" content="S5 1.1" />
<meta name="author" content="Marty Stepp" />
<meta name="company" content="University of Washington" />
<meta name="description"
content="Slides for the University of Washington's CSE 142 (190) programming labs." />
<meta name="keywords"
content="programming, java, jgrasp, building java programs, stepp, reges, washington, computer science" />
<!-- configuration parameters -->
<meta name="defaultView" content="slideshow" />
<meta name="controlVis" content="hidden" />
<!-- style sheet links -->
<link rel="stylesheet" href="ui/default/slides.css" type="text/css" media="projection" id="slideProj" />
<link rel="stylesheet" href="ui/default/outline.css" type="text/css" media="screen" id="outlineStyle" />
<link rel="stylesheet" href="ui/default/print.css" type="text/css" media="print" id="slidePrint" />
<link rel="stylesheet" href="ui/default/opera.css" type="text/css" media="projection" id="operaFix" />
<link rel="stylesheet" href="labs-slides.css" type="text/css" />
<!-- S5 JS -->
<script src="http://ajax.googleapis.com/ajax/libs/prototype/1.6.1.0/prototype.js" type="text/javascript"></script>
<script src="resources/slides.js" type="text/javascript"></script>
<script src="ui/default/slides.js" type="text/javascript"></script>
<!--
<script src="resources/DrawingOverlay.js" type="text/javascript"></script>
-->
<title>CSE 190 M Lab 1: 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>University of Washington, CSE 190 M</h1>
<h2>Lab 1: Basic HTML and CSS</h2>
</div>
</div>
<div class="presentation">
<div class="slide">
<h1>University of Washington, CSE 190 M</h1>
<h2>Lab 1: Basic HTML and CSS</h2>
<p class="license">
Except where otherwise noted, the contents of this document are Copyright 2010 Marty Stepp and Jessica Miller.
</p>
<p class="license">
<em>original lab idea and code by Victoria Kirst and Jeff Prouty; revised by Brian Le and Marty Stepp</em>
</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>
Basic lab instructions
</h1>
<ul>
<li>
You may want to <strong>bring your textbook</strong> to labs to look up syntax and examples.
</li>
<li>
Have a question? <strong>Ask a TA</strong> for help, or look at the book or past <a class="popup" href="../lectures.shtml">lecture slides</a>.
</li>
<li>
We encourage you to <strong>talk to your classmates</strong>; it's okay to share code and ideas during lab.
</li>
<li>
You probably won't finish all of the exercises. Do as much as you can in the allotted time. You don't need to finish the rest after you leave the lab.
</li>
<li>
Before you leave, <strong>check in</strong> with a TA to get credit for your work.
</li>
</ul>
</div>
<div class="slide">
<h1>Today's lab exercises</h1>
<p>
Today you will create a basic "About Me" HTML page and style it with a bit of CSS.
</p>
<ol>
<li><q>About Me</q> Page</li>
<li>Style Your Page with CSS</li>
<li>Validate Your Page</li>
<li>Upload Your Page to the Web</li>
<li>Advanced Style Techniques</li>
<li>Favorite Movie</li>
<li>Decrementing <code>ol</code></li>
</ol>
</div>
<div class="slide">
<h1>Exercise <span class="exercisenumber"></span>: <q>About Me</q> Page (~20-25 min)</h1>
<p class="readbeforestarting">
(The next 3 slides describe this exercise. Please read them all, then start.)
</p>
<p>
Create a page <code>aboutme.html</code> that describes you. Include information such as:
</p>
<ul>
<li>Your name</li>
<li>A description of you in <= 2 sentences. Emphasize important word(s) in bold.</li>
<li>A list of classes you are taking right now at UW.</li>
<li>Your 3 favorite movies, books, or TV shows, in order. Make at least one link to an interesting site about that TV show/movie/book, such as its <a class="popup" href="http://imdb.com/">IMDB</a> page.</li>
<li>Two images that represent you when you're happy and sad.
(consider <a class="popup" href="http://images.google.com/">GIS</a>)</li>
<!-- <li>One of your favorite quotes (You can use either of the <code>blockquote</code> or <code>q</code> tags).</li> -->
<li>Something about one of your neighbors (people sitting next to you)</li>
</ul>
<!--
<p>
<em>(Try to keep the page short so that you can try other exercises.)</em>
</p>
-->
</div>
<div class="slide">
<h1>Exercise <span class="exercisenumber noincrement"></span>, example</h1>
<p>
This example page describes former TA and textbook coauthor, Victoria Kirst:
</p>
<p style="height: 380px; overflow: scroll;">
<img src="1/images/aboutme_no_css.png" alt="expected output" />
</p>
</div>
<div class="slide">
<h1>Exercise <span class="exercisenumber noincrement"></span>, how to view the page</h1>
<p>
To see your page in the web browser, in TextPad click <strong>View</strong>, <strong>In Web Browser</strong>. <br />
Or in Firefox, click <strong>File</strong>, <strong>Open File...</strong> and browse to your page file to open it.
</p>
<div style="text-align: center">
<img src="1/images/view_in_web_browser.png" alt="view in web browser" style="vertical-align: middle" />
<span style="font-size: 24pt; margin: 1em;">OR</span>
<img src="1/images/firefox_open_file.png" alt="firefox open file" style="vertical-align: middle" />
<span style="margin: 1em;"> </span>
<img src="1/images/firefox_open_file_2.png" alt="firefox open file 2" style="vertical-align: middle" />
</div>
</div>
<div class="slide">
<h1>Exercise <span class="exercisenumber"></span>: CSS Styles (~15 min)</h1>
<p class="readbeforestarting">
(See example screenshot on next slide.)
</p>
<p>
Create a stylesheet named <code>styleme.css</code> to improve the appearance of your About Me page.
</p>
<ul>
<li>Change the color of at least two elements</li>
<li>
Change the font properties (family, size, weight, or style) of at least two elements. Some standard fonts:
<span style="font-size: smaller;"><span style="font-family:Arial">Arial</span>, <span style="font-family:'Arial Black'">Arial Black</span>, <span style="font-family:Verdana">Verdana</span>, <span style="font-family:'Trebuchet MS'">Trebuchet MS</span>, <span style="font-family:Georgia">Georgia</span>, <span style="font-family:Tahoma">Tahoma</span>, <span style="font-family:'Courier New'">Courier New</span>, <span style="font-family:'Times New Roman'">Times New Roman</span></span>
</li>
<li>Change at least one other thing (e.g. background color, text alignment, etc.)</li>
</ul>
</div>
<div class="slide">
<h1>Exercise <span class="exercisenumber noincrement"></span>, example</h1>
<p>
This example is Victoria's styled version of her page:
</p>
<p style="height: 380px; overflow: scroll;">
<img src="1/images/aboutme.png" alt="expected output" />
</p>
</div>
<div class="slide">
<h1>Exercise <span class="exercisenumber"></span>: Validate Your Page (~10 min)</h1>
<p>
Next, validate the syntax of your XHTML and CSS code:
</p>
<ol>
<li>Open <a class="popup" href="http://validator.w3.org/">http://validator.w3.org/</a> (XHTML) or <a class="popup" href="http://jigsaw.w3.org/css-validator/">http://jigsaw.w3.org/css-validator/</a> (CSS)</li>
<li>Either click <q>Validate by File Upload</q> and then Browse to your <code>aboutme.html</code> file,<br/>
or click <q>Validate by Direct Input</q> and then copy/paste your code into the text box.</li>
<li>If there are any errors, fix the first one, then repeat the previous steps.
<ul>
<li>
Try to get the <span style="background-color: green; color: white">green bar</span> for 0 errors. Yellow "tentatively valid" warnings are okay.
</li>
<li>
<em>(The error messages can be hard to understand. Feel free to ask a TA or neighbor for help.)</em>
</li>
</ul>
</li>
</ol>
</div>
<div class="slide">
<h1>Exercise <span class="exercisenumber"></span>: Put Page on Web (~10 min)</h1>
<ul>
<li>
Use our <a class="popup" href="../upload.shtml">Uploading Files</a> directions to upload your page to our Webster server.
<ul>
<li>
Put your files in a folder named <code>lab1</code> within your <code>public_html</code> area.
</li>
</ul>
</li>
<li>
Check the page by viewing it in the web browser. Its URL should be:
<ul>
<li><span class="url">http://webster.cs.washington.edu/<var>YOUR-UWNETID</var>/lab1/aboutme.html</span></li>
</ul>
</li>
</ul>
<p>
<em>Ask a TA if you have any problems logging in to Webster or uploading your files!</em>
</p>
</div>
<div class="slide">
<h1>Exercise <span class="exercisenumber"></span>: validation links</h1>
<p>
Add a link on your page to the XHTML Validator, using this image and link target:
</p>
<ul>
<li><span class="columnlabel">image:</span> <span class="url">http://www.w3.org/Icons/valid-xhtml11</span></li>
<li><span class="columnlabel">link URL:</span> <span class="url">https://webster.cs.washington.edu/validate.php</span></li>
</ul>
<p>
The next task will be to write a stylesheet for your page, so also include a link to the CSS Validator:
</p>
<ul>
<li><span class="columnlabel">image:</span> <span class="url">http://jigsaw.w3.org/css-validator/images/vcss</span></li>
<li><span class="columnlabel">link URL:</span> <span class="url">https://webster.cs.washington.edu/validate-css.php</span></li>
</ul>
<p>
<em>(These links work only if you view your page on webster, not on your computer's hard drive.)</em>
</p>
</div>
<div class="slide">
<h1>Exercise <span class="exercisenumber"></span>: Advanced Styles (~10 min)</h1>
<p class="readbeforestarting">
(See example screenshot on next slide.)
</p>
<p>
If you complete the previous exercises, great job! You can add any extra content to your page that you like. Or if you want a challenge, try to figure out how to add the following styles:
</p>
<ul>
<li>
Make your <strong>hyperlinks not underlined</strong> by default. When a user hovers over the link, the underline should appear.
(<em>Hint: Look for information about CSS <q>pseudo-classes</q>.)</em>
</li>
<li>
Make every paragraph start with a <q><strong>drop-caps</strong></q>; that is, a large initial letter that is 1.5 times the normal paragraph font size.
(<em>Hint: Look for information about CSS <q>pseudo-elements</q>.)</em>
</li>
</ul>
<p>
These are tricks not covered yet in class. Use Google or a CSS reference such as <a class="popup" href="http://www.w3schools.com/css/css_reference.asp">W3Schools</a>.
</p>
</div>
<div class="slide">
<h1>Exercise <span class="exercisenumber noincrement"></span>, example</h1>
<p>
These are snippets of TA Victoria's updated page, showing links and drop-caps:
</p>
<p><strong>Links:</strong> (hover is not shown)<br />
<img src="1/images/aboutme_majors_nounderline.png" alt="expected output" />
</p>
<p><strong>Drop-caps:</strong><br />
<img src="1/images/aboutme_majors_dropcap.png" alt="expected output" />
</p>
</div>
<div class="slide">
<h1>Exercise <span class="exercisenumber"></span>: Favorite Movie</h1>
<p class="readbeforestarting">
(See example screenshot on next slide.)
</p>
<p>
Look up one of the favorite movies/shows from your About Me page on <a class="popup" href="http://imdb.com/">imdb.com</a>.
</p>
<ul>
<li>
In your page, reproduce some of the film's IMDB info in a nested list under that movie's bullet.
<ul>
<li>
The info is in short <q>topic:</q> → <q>value</q> pairs, such as <q>Genre: Comedy</q>.
</li>
<li>
Therefore, represent it as an HTML <strong>definition list</strong>.
</li>
</ul>
</li>
<li>
Consider applying styles to your definition list to make it look snazzy.
</li>
</ul>
</div>
<div class="slide">
<h1>Exercise <span class="exercisenumber noincrement"></span>, example</h1>
<p>
These are snippets of TA Victoria's updated page, showing a favorite movie:
</p>
<p>
<img src="1/images/aboutme_majors_movies.png" alt="expected output" />
</p>
</div>
<div class="slide">
<h1>Exercise <span class="exercisenumber"></span>: (h4x0rz only): Decrementing <code>ol</code></h1>
<p class="readbeforestarting">
(See example screenshot on next slide.)
</p>
<p>
Modify your page's Top 3 movies/shows list to be in decreasing order, from 3 down to 1.
</p>
<p>
The list must look the same as the default ordered list format, but in reverse order.
</p>
<p>
The only change you may make to your HTML is to switch the order of your list items, but otherwise all work should be done by CSS. We aren't going to give any hints; you must figure it out on your own by searching the web.
</p>
<p>
<em>Note</em>: <strong>This is very tricky!</strong> It is not something that students will be expected to do in this course.
</p>
</div>
<div class="slide">
<h1>Exercise <span class="exercisenumber noincrement"></span>, example</h1>
<p>
These are snippets of TA Victoria's updated page with a decrementing <code>ol</code>:
</p>
<p>
<img src="1/images/aboutme_321.png" alt="expected output" />
</p>
</div>
<div class="slide">
<h1>If you finish them all...</h1>
<p>
If you finish all the exercises, you can add any other content or styles you like to your page.
</p>
<p>
If the lab is over or almost over, check with a TA and you may be able to be dismissed.
</p>
<p>
<strong>Great work!</strong>
</p>
</div>
</div>
<!-- Google Analytics -->
<!--
<script type="text/javascript">
if (location.href.match(/http:\/\//)) {
if (!location.href.match(/localhost/)) {
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
}
}
</script>
<script type="text/javascript">
if (location.href.match(/http:\/\//)) {
if (!location.href.match(/localhost/)) {
var pageTracker = _gat._getTracker("UA-2729135-5");
pageTracker._initData();
pageTracker._trackPageview();
}
}
</script>
-->
</body>
</html>