topical media & game development
lib-present-course-webtechnology-assignments-assignment-1.htm / htm
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>WT - Assignment HTML</title>
<link href="lib-present-course-webtechnology-style-note.css"
rel="stylesheet" type="text/css" />
</head>
<body>
<h1>Assignment "HTML"</h1>
<h2>Learning goals</h2>
<p>After the assignment the student should:</p>
<ul>
<li>be able to read a simple HTML source;</li>
<li>be able to write basic HTML with a text editor;</li>
<li>understand the nature of a markup language;</li>
<li>understand the distinction between content markup and style markup.</li>
</ul>
<p><strong>Background:</strong> The purpose of the assignment is to
learn the nature of a markup language such as HTML through hands-on
experience. Although this kind of basic editing of HTML is not
something you will do often in the future, it is important for you to
understand how a language such as HTML works. WYSIWYG (What You See Is
What You Get) editors generate HTML for you without providing much
insight. It is important that you as professional are able to
understand what such editors generate, and thus be able to judge
differences, problems, <em>et cetera</em>. Also, you need to be able
to understand the source of a Web page and may need to generate HTML
in scripts (see further in the course). Last but not least, WYSIWYG editors might
not be able to generate the HTML and/or CSS that you want, due to
limitations in functionality.</p>
<h2>The assignment</h2>
<p>Your job is to manually construct, with the help of a text editor
such as <code>jedit</code> or <code>emacs</code>, an HTML file that
contains the answers to all the Lab questions for Week 1 of the
course. The HTML source should meet the following criteria:</p>
<ol>
<li>It should be a valid XHTML 1.0 document, that is parsed
correctly by the <a href="http://validator.w3.org/">W3C
Validator</a>. The document should contain the associated W3C
validation image.</li>
<li>The document should just contain content markup and no style
markup. </li>
<li>The document should exemplify the use of (almost) all HTML constructs
listed in the <a href="#html-list">appendix</a>.</li>
<li>Where appropriate, use the HTML representation of special
characters.</li>
<li>Include at the end of the document a feedback form consisting of
three parts:
<ol>
<li>A text field for the name of the person giving feedback</li>
<li>A few appropriate boxes/buttons to give an opinion (think of
some useful response categories).</li>
<li>A text area for general feedback</li>
</ol>
For the moment the form will not do anything interesting other
than returning the input entered (this topic is
covered further on in the course). Simply include the following
attributes in the <code>form</code> element:
<pre>
<form action="http://media.cwi.nl/cgi-bin/wt1-test" method="get">
</pre></li>
</ol>
<h2>Hints and Tips</h2>
<ul>
<li>This assignment covers material of Chapter 2 of Jackson (except
Secs. 2.8, 2.10 and 2.11).</li>
<li>Use an online HTML manual (see the course materials on
Blackboard) to look up particular HTML details. </li>
<li>If you see initially no opportunity to use a particular HTML element
listed in the appendix, be a bit creative. </li>
</ul>
<h2>Submission details</h2>
<p>Check the Blackboard site of the course for submission details. </p>
<h2 id="html-list">Appendix: List of HTML constructs to be used</h2>
<table border="1">
<tbody>
<tr>
<td>Document-level elements</td>
<td><code>html</code>, <code>head</code>, <code>title</code>,
<code>body</code>, , <code>p</code></td>
</tr>
<tr>
<td>Headings</td>
<td><code>h1</code>, <code>h2</code>, ....</td>
</tr>
<tr>
<td>Various list forms</td>
<td><code>ul</code>, <code>ol</code>, <code>dl</code></td>
</tr>
<tr>
<td>Links (external, within same document)</td>
<td><code>a</code>, the <code>id</code> attribute</td>
</tr>
<tr>
<td>Tables</td>
<td><code>table</code>, <code>tr</code>,
<code>th</code>, <code>td</code></td>
</tr>
<tr>
<td>Images</td>
<td><code>img</code>, <code>caption</code></td>
</tr>
<tr>
<td>Quotes</td>
<td><code>blockquote</code>, <code>q</code></td>
</tr>
<tr>
<td>Text types</td>
<td><code>em</code>, <code>strong</code>, <code>code</code>,
<code>pre</code></td>
</tr>
</tbody>
</table>
<p>
<a href="http://validator.w3.org/check?uri=referer"><img
src="http://www.w3.org/Icons/valid-xhtml10.png"
alt="Valid XHTML 1.0!" height="31" width="88"
style="float: right" /></a>
</p>
</body>
</html>
(C) Æliens
20/08/2009
You may not copy or print any of this material without explicit permission of the author or the publisher.
In case of other copyright issues, contact the author.
