Exercise 2
Start by making a copy of your file from Exercise 1 called exercise2.html
. [Leave your work from the last exercise in-place at the same URL just in case the marking isn't done yet and upload the newly-named file separately.]
Semantic Markup
Have a look at the HTML you created last week, and in particular the <dfn>
, <code>
, or <strong>
element(s) you added.
Have another look at the tag in the HTML tag reference. Did you use it for content that had a meaning that matched the description in the reference? That is, was it a newly-defined term, or piece of computer code (like HTML code you'd type in a text editor), or very important piece of text? If not, fix the content so it matches the tag.
Markup Practice
Add another section to your exercise2.html
: a <section>
with an <h2>
section heading like this:
<section>
<h2>Markup Practice</h2>
⋮
</section>
Below the heading, add markup for this content:
Remember that we aren't concerned with appearance: choose markup that matches the meaning of the various pieces of content there. It may look different, and that's okay. I have deliberately made the screenshot look unlike web pages: your result won't look the same and you should be okay with that.
Hints: in the HTML tag reference, have a look at the <dl>
, <dt>
, and <dd>
tags for definition lists; and at <cite>
. The link should go to the Study Guide for this course.
More Markup
Add another section to your page. Since it's another section at the same “level”, it should follow the previous section and also have a level 2 heading, so your markup will be arranged like this:
<section><h2>Markup Practice</h2>…</section>
<section><h2>More Markup</h2>…</section>
In this new section, add some content that is appropriate for each of these tags (in whatever order/arrangement makes sense for the content you create). As usual, have a look at the HTML reference and make sure you know what kind of content these tags should be used for.
<address>
: contact information (not necessarily an actual “address” for the author: an email or other contact info is appropriate).- a
<figure>
containing an<img>
and<figcaption>
. Use any image you want (for the imagesrc
), or use the URL http://www.cs.sfu.ca/CC/165/common/study-guide/floats/router.jpg if you like. [If you are using your own image file, it must be uploaded to the server along with your HTML.] - a
<q>
and<cite>
.
Validating Your Page
Give your page to the HTML Validator to have it check for any errors in your markup.
Video: Using the HTML Validator
You'll probably want to use the “Validate by File Upload” option and give it the file from your computer. You can also upload to the server and give the URL there (“Validate by URI”). The results should be the same however you submit the file: do whichever you find easier.
Fix any errors, so the validator gives none for your HTML.
Submitting
Upload the file to your public_html
folder on the server, as you did last week. Find the page online by typing the URL to make sure it's there properly.
Submit the URL of your HTML page to the CourSys activity Exercise 2.