<?php
$server = 'http://courses.washington.edu';
?>
<section>
<?= head("Introduction") ?>
<p>This assignment practices basic HTML & CSS. There are two parts to this assignment:</p>
<ul>
<li>In <strong>Part A</strong> you will build a webpage using basic HTML & CSS. This page must match the output in our screenshots as closely as possible.</li>
<li>In <strong>Part B</strong> you will have the opportunity to redesign the page as you see fit using fonts, colors, and CSS box model properties.</li>
</ul>
<p>You will turn in <strong>at least</strong> the following files:</p>
<style type="text/css">
dl.filelist {
/* margin-left: 1em; */
}
dl.filelist dt {
float: left;
clear: left;
height: 1.4em;
}
dl.filelist dd {
margin-left: 10em;
height: 2.8em; /* line height (1.4) × 2 */
line-height: 2.8em;
/* background-color: fuchsia;*/
margin-bottom: .5em;
position: relative;
}
dl.filelist dd:before {
display: block;
position: absolute;
content: '}';
/* width: .25em;*/
left: -.5em;
top: -.1em;
font-size: 2.6em;
line-height: 1em;
/* background-color: fuchsia;*/
font-family: 'Open Sans', sans-serif;
font-weight: 100;
}
</style>
<dl class="filelist">
<dt><samp>espresso-a.html</samp></dt>
<dt><samp>styles-a.css</samp></dt>
<dd>Your HTML and CSS files from Part A.</dd>
<dt><samp>espresso-b.html</samp></dt>
<dt><samp>styles-b.css</samp></dt>
<dd>Your HTML and CSS files from Part B.</dd>
</dl>
<p class="note important" style="clear: left">Your file names must match these <em>exactly</em> — with precisely the same capitalization and spacing.</p>
<p>(If you have any additional files that are part of your design for Part B, you’ll be able to submit them as well.)</p>
</section>
<section>
<?= head("Part A: Basic HTML & CSS") ?>
<p>Write the HTML and CSS code to produce a webpage <strong>identical</strong> to the one in the screenshot below:</p>
<?= subhead("Expected Output", array('style' => 'display: none')) ?>
<figure class="expectedoutput">
<a href="output/hw1_expected_output_ff15_lion.png">
<img src="output/hw1_expected_output_ff15_lion.png" alt="Expected output for Part A as rendered in Firefox 15 on Mac OS X Lion" />
</a>
<figcaption>Expected output (see <a href="#matching-our-output">“Matching Our Output”</a> for more screenshots).</figcaption>
</figure>
<?= subhead("Content & Resources") ?>
<p>Download the text content of the document here:</p>
<p class="resource"><a href="hw1_content.txt"><?= $server . $_SERVER['REQUEST_URI'] ?>hw1_content.txt</a></p>
<p>Use this as a skeleton to which you will add your HTML code.</p>
<p class="note"><strong>Note:</strong> The plain text file contains a few small things that you may want to remove when marking it up with HTML. Since HTML adds meaning, some list markers, for example, may no longer be needed.</p>
<p>For the photo of the espresso shot, link to the following absolute URL:</p>
<p class="resource"><a href="http://info343.ischool.uw.edu/homework/1/espresso.jpg">http://info343.ischool.uw.edu/homework/1/espresso.jpg</a></p>
<?= subhead("Appearance Specifications", array('modified' => true)) ?>
<p>The exact specification for the document is outlined below.</p>
<ul>
<li>The entire page has a <strong>background color</strong> of <span class="specification"><code class="background color">#FCFEF6</code></span>. The prevalent <strong>text color</strong> is <span class="specification"><code class="foreground color">#464646</code></span> (a charcoal gray).</li>
<li>Most text on the page has a relative <strong>font size</strong> of <strong>1.1 times</strong> (i.e., 110% of) the browser’s default font size, and should use the following <strong>font families</strong> if they are available, in order of preference: Helvetica, Lucida Grande, Arial, or any other sans-serif font available on the system.</li>
<li>The name of the site is <strong>1.5 times</strong> the base font size of the page, and is in a <strong>normal font</strong> (i.e., not bolded). The name of the article is is <strong>2 times</strong> the base font size, and in a <strong>bold font</strong>.</li>
<li>The image has a <strong>1-pixel-thick border</strong>.</li>
<li>The image, the top two headers, and the article byline are all <strong>centered</strong> on the page.</li>
<li>The names of the various page sections are all <strong>underlined</strong> (and <strong>bolded</strong>). Hyperlinks, on the other hand, should be underlined <strong>only when the mouse is over them</strong>.</li>
<li>All bylines on the page (the one for the article as well as those for the comments) are <strong>80%</strong> of the base font size and rendered in an <strong>italic</strong> font.</li>
<li>
<p>There are various technical terms on the page. All of them are rendered in an <strong>italic font</strong>, <em>except</em> when inside a special note, when terms should be in a <strong>normal upright font</strong> to contrast with the surrounding italic. Each also has a <strong>dashed 1-pixel-thick border</strong> on the <strong>bottom only</strong>.</p>
<p class="note">Don’t forget the terms in steps 1, 3, and 4!</p>
</li>
<li>
<p>There are two shades of green used for some text content:</p>
<ul>
<li>A lighter <span class="specification"><code class="color">#A6BC65</code></span> is used for the site title, hyperlinks, and the bylines in comments.</li>
<li>A medium <span class="specification"><code class="color">#709602</code></span> is used for the title of the article, and for all technical terms on the page.</li>
</ul>
</li>
<li>The special note in the third step has a <strong>background color</strong> of <span class="specification"><code class="color">#EBEEDD</code></span>, as do the first two comments. The last comment has a different background color of <span class="specification"><code class="color">#f5debf</code></span> to distinguish it from the others (since it was made by the author of the article).</li>
<li>All comments have a <strong>1-pixel-thick border</strong> of the same color as the page’s text. The image at the top also has this same border.</li>
<li>All comments also have <strong>.75 ems</strong> of space <em>surrounding and between</em> all text content. (That is, inside the borders <em>and</em> between each piece of text.) <ins datetime="Thu, 04 Oct 7:30 PM">There is the same amount of space surrounding the text of the special note in step 3.</ins></li>
<li>There is a special warning at the end of the “Notes & Tips” section. This should have a <strong>background color</strong> of <span class="specification"><code class="color">lightpink</code></span>. Its border is <strong>3 pixels thick</strong> and <strong>dashed</strong>, in the same <strong>red color</strong> as the bold words inside. As with comments, there is <strong>.75 ems</strong> of space between the text content and the surrounding border.</li>
</ul>
<p><strong style="color: red">All other appearance is subject to the browser’s default rendering.</strong> If there’s something you see that we haven’t specified, chances are it’s a default style of the particular tag we used.</p>
<?= subhead("Additional Content") ?>
<p>The skeleton file includes only the text visible on the page. Some portions of the page contain additional information:</p>
<ol>
<li>
<p>The text shown in the browser’s <strong>tab bar or title bar</strong> should read:</p>
<pre>How to Brew Espresso – How²</pre>
</li>
<li>
<p>The URLs of the hyperlinks in the <strong>Related Links</strong> section are as follows:</p>
<dl class="urls">
<dt><strong>The Home Barista’s Guide to Espresso</strong>:</dt>
<dd class="resource"><a href="http://www.home-barista.com/espresso-guide.html">http://www.home-barista.com/espresso-guide.html</a></dd>
<dt><strong>Espresso Preparation</strong>:</dt>
<dd class="resource"><a href="http://www.coffeeresearch.org/espresso/extraction.htm">http://www.coffeeresearch.org/espresso/extraction.htm</a></dd>
<dt><strong>Some coffee shops near me</strong>:</dt>
<dd class="resource"><a href="http://www.yelp.com/search?find_desc=coffee+shops&ns=1&find_loc=university+district%2C+seattle%2C+wa">http://www.yelp.com/search?find_desc=coffee+shops<br/>&ns=1&find_loc=university+district%2C+seattle%2C+wa</a></dd>
</dl>
</li>
</ol>
<?= subhead("Matching Our Output") ?>
<figure class="example" style="margin-top: -1.5em;">
<a href="../comparison.html">
<img src="comparison.png" alt="Screenshot of the output comparison tool in use" />
</a>
<figcaption>The output comparison tool.</figcaption>
</figure>
<p>You may find our <a href="../comparison.html"><strong>output comparison tool</strong></a> helpful in comparing your output to ours. This superimposes your output directly over a screenshot of ours taken on the same browser and platform.</p>
<p style="color: red"><strong>However, we strongly discourage you from making a pixel-perfect comparison.</strong> Visual differences should not be taken as an indication of correctness or incorrectness.</p>
<p>For example, you might choose different HTML tags than us, which have different default styles. But perhaps your tags are just as good (or better!) than ours — in which case, you won’t lose points just because your page looks different.</p>
<figure class="example" style="margin-top: -4em">
<a href="output/hw1_expected_output_ff15_lion.png" class="cropped">
<img src="output/hw1_expected_output_ff15_lion.png" style="margin-top: -5em"
alt="Expected output for Part A as rendered in Firefox 15 on Mac OS X Lion" />
</a>
<figcaption>Expected output for Part A – taken in Firefox 15, on <strong>Mac OS X Lion</strong>, on an iSchool lab machine.</figcaption>
</figure>
<p>Likewise, it’s possible to use a tag that’s different than ours, but which looks identical on-screen — and if we don’t like the tag you used, you can lose points, even if your output is pixel-identical to ours.</p>
<figure class="example" style="margin-top: 3.5em">
<a href="output/hw1_expected_output_ff15_win7.png" class="cropped">
<img src="output/hw1_expected_output_ff15_win7.png" style="margin-top: -5em"
alt="Expected output for Part A as rendered in Firefox 15 on Windows 7" />
</a>
<figcaption>Expected output for Part A – taken in Firefox 15, on <strong>Windows 7</strong>, on an iSchool lab machine.</figcaption>
</figure>
<p>All screenshots are taken in <strong>Firefox 15</strong> on iSchool lab machines — some on <strong>Mac OS X Lion</strong>, with the Helvetica and Lucida Grande fonts installed, and some on <strong>Windows 7</strong>, without either of those fonts. We encourage you to test your pages in both environments to be sure you’ve correctly specified fonts.</p>
</section>
<section>
<?= head("Part B: Creative Improvement") ?>
<p>The page you’re required to build in Part A is not very attractive. In this part you will add more features and experiment with using fonts, colors, and the CSS box model to improve the page.</p>
<p>The only firm requirements are as follows:</p>
<ol>
<li>Adjust a box model property (<code>margin</code>, <code>padding</code>, <code>border</code>, or <code>width</code>) in at least <strong>five</strong> different CSS rules.</li>
<li>Choose a new typeface, or improve the use of the current one. You are allowed to use a CSS3 downloadable web font (discussed during week 2) if you like. (<a href="http://www.google.com/webfonts">Google Web Fonts</a> is a good source.)</li>
<li>Adjust line lengths (“measure”) and/or line heights (“leading,” discussed during week 2) to make content easier to read. (Line lengths can be adjusted by restricting the width of their containing element.)</li>
</ol>
<p>Beyond that, the only requirement is that you use your best judgment to make improvements to the page as you see fit.</p>
<p>You will be graded mostly on effort — but also partly on the extent to which we think your changes improve the look and feel of the page. So make it look good!</p>
<p>Following are a few more <em>suggestions</em> for making the page nicer-looking. None of these are explicitly required, but most of them are likely to help you to get full points for improving the look of the page:</p>
<ul>
<li>Choose a new color scheme (<a href="http://colorschemedesigner.com/">here’s a great tool</a> to help you), or improve the current one.</li>
<li>Improve the vertical spacing between elements. Adjusting vertical margins goes a long way!</li>
<li>If you would like to use Photoshop or another image editor to create more graphical headers, look into the various <a href="http://www.google.com/search?q=css+image+replacement+techniques">CSS image replacement techniques</a>.</li>
<li>Look into ways you could make the user comments nicer-looking with rules (lines), enlarged hanging quotation marks, avatars, etc.</li>
<li>Add a favorites icon to make the address bar a little more distinctive.</li>
</ul>
<p>You are permitted to tweak the HTML code you used from Part A (for example, to add or remove <code>id</code>s & <code>class</code>es). You may also add or remove HTML tags or modify the content slightly, but we would recommend being very judicious about this.</p>
<p>With the exceptions of the material from week 2 explicitly permitted above, you <strong>must</strong> restrict yourself to only use the HTML and CSS content learned in week 1 of this course: fonts, colors, backgrounds, and box model properties. <strong>Please do not use any other CSS properties.</strong> (If you’re already comfortable with CSS, consider this restriction a useful creative exercise! If you have a tag and/or property you would really like to use that we haven’t discussed in class, ask the instructor whether it is appropriate for use.)</p>
</section>
<section>
<?= head("Stylistic Considerations", array('modified' => true)) ?>
<p>You will be graded in part on certain choices you make in writing the code for your pages. Keep the following in mind:</p>
<ul>
<li>
<p><strong>Make good tag choices.</strong> Use the most appropriate HTML tags available to describe each piece of content. Be careful not to choose tags based on the appearance you want the content to have; rather, choose tags based on how well they describe the content or structure of the page. You can always use CSS to alter the appearance if it isn’t right.</p>
<div class="note">
<p><strong>Note:</strong> For Part A we have used some tags that, due to browser defaults, result in an appearance that we haven’t specified. These browser defaults often provide a hint at what tag we used, and to a certain extent imply that you should choose that tag based on appearance.</p>
<p>However, if you disagree with the tag we used, you are welcome to use a different tag with a different default appearance, so long as you can justify its use. In which case, it’s okay if your output doesn’t match ours exactly. We wouldn’t want you to choose your tags based on their appearance!</p>
</div>
</li>
<li><strong>Reduce redundancy.</strong> There are several styles that are shared by multiple elements. Whenever it makes your code more logically-structured, you should combine redundant style declarations into a single rule.</li>
<li><strong>Properly format your code.</strong> Use consistent indentation that makes the structure of your code easy to follow. In general, you should usually indent inside block-level elements. Wrap comments to no more than 100 characters on a line. Don’t worry about wrapping long HTML opening tags, but you may want to indent the content of a long opening tag even if it’s an inline element. <strong>Never</strong> add a line break inside of a URL!</li>
<li>
<ins datetime="Wed, Oct 3 2:30 PM">
<p><strong>Include proper comments.</strong> All files submitted should begin with an authorship comment with information to identify the work: the course, date, assignment, your name and section, and a brief description to the file are all standard things to include.</p>
<p class="important note">
<strong>Remember to use the right comment syntax!</strong><br/>
HTML comments look <code><!-- like this ---></code>, and CSS comments look <code>/* like this */</code>.
</p>
<p>These should be at the top of <strong>every file</strong>. (You don’t need to comment on sections of your HTML or CSS code, as you did in CSE 142 for example.)</p>
</ins>
</li>
<li><strong>Validate your code.</strong> For full credit, your code must pass the W3C validators with no errors. (Yellow warnings can be safely ignored.) Write valid XHTML 1.1 and CSS 2.1 code. For <strong>Part B only</strong> you may use CSS3 code so long as it passes the <strong>CSS Level 3</strong> profile (under More Options) on the W3C CSS validator.</li>
</ul>
</section>
<section>
<?= head("Grading") ?>
<p>The point breakdown for this assignment will be roughly as follows:</p>
<style type="text/css">
dl.breakdown {
margin-left: 1em;
}
dl.breakdown dt {
float: left;
clear: left;
width: 6em;
}
dl.breakdown dd {
margin-left: 6em;
margin-bottom: .5em;
width: 11em;
}
dl.breakdown .total {
border-top: solid 4px black;
font-weight: bold;
padding-top: .5em;
}
</style>
<dl class="breakdown">
<dt>~ 8 points</dt>
<dd>Part A</dd>
<dt>~ 6 points</dt>
<dd>Part B</dd>
<dt>~ 6 points</dt>
<dd>Stylistic and other considerations</dd>
<dt class="total">20 points</dt>
<dd class="total">Total</dd>
</dl>
<p><small style="font-style: italic; font-family: 'Open Sans'">The exact point value for each category is subject to change ± 2 points.</small></p>
</section>
<section>
<?= head("Submitting Your Assignment") ?>
<p>When you are finished with your assignment you are required to do <strong>both</strong> of the following:</p>
<ol>
<li>
<p><strong>Upload your files to the course web server.</strong> Put them in a folder named <em>exactly</em> <samp>hw1</samp> inside your <samp>public_html</samp> web directory on our web server (<samp>info343.ischool.uw.edu</samp>).</p>
<p class="important note">The folder you put your homework files in must match this exactly — including capitalization and spacing! <strong style="color: red">You may lose points if your files are not named <em>exactly</em> as specified in this document.</strong></p>
</li>
<li><p><strong>Submit your assignment via the drop box</strong> on the course website.</p></li>
</ol>
<p>You must do <strong>both</strong> of these to get full credit. You may submit your assignment as many times as you like; only the last submission will count. Please remember to upload to the web server <strong>exactly</strong> the same version that you submit to the drop box.</p>
<p>This assignment will not be accepted by any other means of submission without permission by the instructor or a TA.</p>
</section>