<section>
<?= t_head("My First Webpage: About Me!", "20–25") ?>
<figure class="example">
<img src="aboutme_no_css.png" alt="About Victoria Kirst" />
<figcaption>This is a similar page describing former CSE 190 M TA and coauthor of our textbook, Victoria Kirst.</figcaption>
</figure>
<p>Create an HTML page that describes you. Make the filename be your first and last names, all lowercase, separated by an underscore. (For example, Morgan’s would be <samp>morgan_doocy.html</samp>.)</p>
<p>Include information such as:</p>
<ul>
<li>A brief (sentence or two) description of you. Include your name, major, and year in school. Use a few <a href="../../lectures/basic-html-css/#slide16">HTML phrase elements</a> to emphasize key words.</li>
<li>Name one thing that interests you about this course. Why are you here?</li>
<li>
List three of your favorite things (books, movies, activities, etc.) in order of preference.
<ul>
<li>Link at least one of these to a related website (like IMDb, Wikipedia, or Amazon).</li>
</ul>
</li>
<li class="extra">A list of classes you are taking this quarter.</li>
<li class="extra">The name of someone sitting next to you, and something interesting about them.</li>
</ul>
<figure class="opening">
<img src="firefox_open_file.png" alt="Finding the Open File menu item in Firefox." />
<img src="firefox_open_file_2.png" alt="Opening your file in Firefox." />
<figcaption>Opening your file in Firefox.</figcaption>
</figure>
<p>To view your page in Firefox, open Firefox and click <strong>File</strong> → <strong>Open File…</strong> and navigate to the location where you saved your file.</p>
</section>
<section>
<?= t_head("Add a Stylesheet", "15") ?>
<figure class="example">
<img src="aboutme.png" alt="About Victoria Kirst (with styles)" />
<figcaption>Victoria’s page with some CSS styles applied.</figcaption>
</figure>
<p>Create a stylesheet named <samp>aboutme.css</samp>. Add CSS code to this file to alter the appearance of your About Me page. Do at least the following:</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>
<br/>
Don’t forget to specify fallback fonts, so that if one font isn’t available on the system a backup will be used. Be sure to include a generic family last.
</li>
<!-- <li>Attach an ID to one element in your HTML, and use it to style just that element from your CSS.</li> -->
<!-- <li>Attach a class to three elements throughout your HTML, and style them from your CSS. Make sure the elements are in very different places.</li> -->
<!-- <li>Create a CSS style that targets only one of the three elements you attached a class to. Use a <a href="../../lectures/basic-html-css/#slide70">context selector</a> to do this, based on the fact that it’s inside an element that the other two aren’t inside of.</li> -->
<li>Change at least one other thing (background color, text alignment, etc.).</li>
</ul>
</section>
<section>
<?= t_head("Validate Your Code", "10") ?>
<p>Now validate the syntax of your HTML and CSS code.</p>
<ol>
<li>
Open the XHTML validator here: <a class="button" href="http://validator.w3.org/">http://validator.w3.org/</a>
</li>
<li>
Choose one of the following methods of validating your file:
<ul>
<li>Click <strong>Validate by File Upload</strong> and then <strong>Browse</strong> to your HTML file.</li>
<li class="or">(or)</li>
<li>Click <strong>Validate by Direct Input</strong> and then copy & paste your code into the text box.</li>
</ul>
</li>
<li>
Click <strong>Validate</strong> and scan the results.
<ul>
<li>You want to get the <span class="validgreenbar">green bar</span> indicating 0 errors.</li>
<li>Yellow <span class="yellowwarning">warnings</span> are OK; these can be safely ignored.</li>
<li>If there are any <span class="errorredbar">errors</span>, fix <strong>only the first one</strong>, then repeat the previous steps to submit your fixed code for validation. (Often, fixing only the first problem removes many errors!)</li>
</ul>
</li>
</ol>
</section>
<section>
<?= t_head("Upload to the Course Web Server", "10", array('essential' => true)) ?>
<p>The real fun of writing web pages is putting them online on a real web site for others to see. This quarter we’ll be putting our lab work and homework on our own course web server.</p>
<p>Files are uploaded using a protocol called FTP. (We will be using the secure variant, SFTP.) You will need to use a file-transfer program to upload files to your web space.</p>
<p>To do this from home you will need to download and install appropriate <a href="../#!/software/file-transfer-ftp-program/">file-transfer software</a> onto your computer. (All University computers have one of these programs pre-installed.)</p>
<p>The following instructions are for a file-transfer program called FileZilla, running on Windows XP. The procedure for uploading will differ slightly with other programs and operating systems, but every SFTP program contains similar commands to what is shown below, so hopefully this will be enough to give you an idea of what to do. If you get stuck, please email your TA for help.</p>
<ol>
<li>
<figure>
<img src="sftp_run.png" alt="Launch the FileZilla program." />
<figcaption>Launch the FileZilla program.</figcaption>
</figure>
<p>Run the FileZilla program from your Start Menu. It will probably be located in a folder in the start menu named something like <strong>FileZilla FTP Client</strong>.</p>
</li>
<li>
<p>In the FileZilla program, enter a server name of <strong>info343.ischool.uw.edu</strong> . Use <strong>your own UWNetID and password</strong>, and enter <strong>22</strong> for the port. Press <strong>Quickconnect</strong>.</p>
<figure>
<img src="sftp_connect.png" alt="Connect to the course web server." />
<figcaption>Connect to the course web server.</figcaption>
</figure>
<p>When you connect for the first time, FileZilla will ask if you trust the server you’re connecting to, since it doesn’t recognize the server’s security key. Click OK to carry on connecting.</p>
<figure>
<img src="sftp_host_key.png" alt="Approve the host key." />
<figcaption>Approve the host key.</figcaption>
</figure>
</li>
<li>
<p>The left side of the FileZilla window is the files on your hard drive. The right side is the files on your web server space. Navigate the left side pane to the directory where you saved your files you want to upload. Navigate the right side to the <strong>public_html</strong> directory, which is the root of your web storage. Then drag the files from the left and drop them on the right.</p>
<figure>
<img src="sftp_public_html.png" alt="Navigate to your public_html directory." />
<figcaption>Navigate to your <strong>public_html</strong> directory.</figcaption>
</figure>
<p>You may want to create a directory on the web server inside of public_html/ to put your files in, so that not every lab's files share the same folder. To create a folder, right-click the empty white space in the right pane and choose <strong>Create directory</strong>.</p>
<figure>
<img src="sftp_transfer.png" alt="Transfer your files to the server." />
<figcaption>Transfer your files to the server.</figcaption>
</figure>
</li>
<li>
<p>Go view your files on the web by typing the following URL into your browser:</p>
<blockquote><samp>http://info343.ischool.uw.edu/YOUR_UW_NETID/</samp></blockquote>
<p>For example, if your UW NetID is <samp>johndoe</samp>, type the following URL:</p>
<blockquote><samp>http://info343.ischool.uw.edu/johndoe/</samp></blockquote>
<figure>
<img src="sftp_viewpage.png" alt="View your page on the web." />
<figcaption>View your page on the web.</figcaption>
</figure>
</li>
</ol>
</section>
<section>
<?= t_head("Add Validation Links", "5", array('extra' => true)) ?>
<p>Add two links somewhere on your page which go to the following addresses:</p>
<ul>
<li><samp>https://info343.ischool.uw.edu/validate-html.php</samp></li>
<li><samp>https://info343.ischool.uw.edu/validate-css.php</samp></li>
</ul>
<p>These links are special shortcuts that will automatically take you to view the results of validating your page, so you don’t have to manually submit your code to the validator every time you make a change. Simply upload your page to the server, refresh your page, and click the link!</p>
<p><strong>Important:</strong> These links will <strong>only</strong> work if you’re viewing your page on the course web server, not from your computer’s hard drive!</p>
</section>
<section>
<?= t_head("More HTML & CSS", "10", array('extra' => true)) ?>
<p>If you have time, go back to your page and experiment with adding as many different types of HTML element as you can. Some suggestions:</p>
<ul>
<li>Include a <code>blockquote</code> of your favorite quote!</li>
<li>Write some HTML code for some HTML code, so that the code itself will show up on the webpage. Wrap it in a <code>code</code> tag to indicate it’s code, and a <code>pre</code> tag to preserve whitespace. Don’t forget to escape special characters!</li>
<li>Make a list of interesting word definitions.</li>
<li>Make an embedded list inside of another list of a different type. For example, put a <code>ul</code> inside of a <code>dl</code> or vice versa.</li>
</ul>
<p>Now style these however you like. Suggestions:</p>
<ul>
<li>Add a <code>background-image</code> to something, and adjust the direction it repeats in.</li>
<li>Compare different units of font size. Use points (<code>pt</code>), ems (<code>em</code>), pixels (<code>px</code>) and percentages (<code>%</code>). <strong>Ensure there are no spaces between the number and the unit.</strong></li>
<li>Try out the three different ways of specifying colors.</li>
<li>Remove the default boldness from one kind of header, and make it be rendered in italic instead.</li>
</ul>
</section>
<section>
<?= t_head("Advanced Tweaks", "10", array('optional' => true)) ?>
<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>
<ol>
<li>Make your <strong>hyperlinks NOT underlined</strong> by default. Then when a user <strong>hovers over the link</strong>, the underline should appear. <em>(Hint: Look for information about CSS “pseudo-classes”.)</em></li>
<li>Make the first letter of every paragraph be 1.5 times the normal paragraph font size. <em>(Hint: Look for information about CSS pseudo-elements.)</em></li>
<li>
<p><strong>(Very hard!)</strong> Modify your page’s ordered list of favorites to decrease in order, from 3 down to 1. (Pretend your most favorite thing is now your least.) The order of the items on the page shouldn’t change; only the numbers next to them.</p>
<p>This should be done entirely using CSS. We aren’t going to give any hints; you must figure it out on your own by searching the web.</p>
</li>
<li>Add a silly image or video. You can click “Embed” on a video to get HTML code for adding it to your page—however, this code may cause your HTML to not validate using XHTML 1.1. If so, see if you can figure out:
<ul>
<li>Different HTML code to use to embed the video that’s valid XHTML 1.1.</li>
<li>How you would make the given code work.</li>
</ul>
</li>
</ol>
<p>These tricks may not be covered yet in class. Use Google or a CSS reference such as <a href="http://www.w3schools.com/css/css_reference.asp">W3Schools</a>.</p>
</section>
<footer>
<p>If you’ve finished everything, good job! Start researching more things you could add to your page to make it even better.</p>
</footer>