Description | Write valid and semantic HTML. |
---|---|
Type | Hand-in assignment with oral explanation. |
Duration | About 1 working day. |
Progress points | 1.5 |
Learning goals |
|
Learning materials
HTML, CSS, JavaScript Explained
A quick explanation of the roles of the three languages that work together in your browser.
Khan Academy - Intro to HTML
An interactive tutorial covering the basics of HTML.
Kan Academy - More HTML tags
This tutorial introduces links, tables and HTML comments.
HTML tutorials
If you don't like the above interactive tutorials, watching this videos (17m) may be a decent alternative. Or, if you feel you know all this, you can just skip to the next resource.
W3Schools HTML introduction
Quickly look over the content at W3Schools to see if there's anything still new to you. In particular, the following sections are relevant: Editors; Basic; Elements; Attributes; Headings; Paragraphs; Formatting; Comments; Links; Images; Tables; Lists; Blocks & Inline; Classes; Head; Entities; Css.
Semantic Markup
This article explains what semantic HTML is(not), and why (some) people care about it.
HTML cheat sheet
While working on the assignment, the following HTML cheat sheet might come in handy. It is a single (searchable) PDF document, with descriptions and examples for each HTML tag.
Online tool that checks HTML for errors.
While (and after!) working on the assignment, the W3C validator can be used to check if your HTML contains any errors. And yes, this tool is really strict!
Assignment
Let's build a website that honors some of the programming heroes of the ages! You do the HTML, we've done the CSS styling. Of course, the HTML should be valid, semantic and consistently indented.
Install the 'Live Server' extension
Objective #1MUST
Within Visual Studio Code, install the Live Server extension created by ritwickdey, using the Extensions tab on the left of the window. After installing it, switch back to the Explorer tab, right-click index.html
and select Open with Live Server
. This should open the HTML document in your browser for preview in such a way, that any changes you make and save (ctrl-s
) in Visual Studio Code will immediately be reflected in the browser.
The main page
Objective #22.1 points
You should edit the provided index.html
such that when viewed in a browser it looks exactly like this:
The provided style.css
file should take care of the styling. All you need to do is provide the right (semantic) HTML. You will probably want to peek inside the style.css
to see what tags are being styled. We haven't studied the CSS language yet, but it should be pretty to easy to spot what HTML tag are being styled. This page explains exactly what you may want to know.
And of course, you'll have to properly <link>
the CSS file from your HTML in order to apply it.
The privacy statement
Objective #32.1 points
Like above, but this time we're working on the most important page of any site: the one showing the privacy statement. Try to make privacy.html
look exactly like this:
Hint: The small
tag can be nested.
Links
Objective #42.1 points
All of the blue texts in our two pages should be hyperlinks. There should be four types of links:
- Regular, external links, in the description texts for our programming heroes. For each of these, feel free to pick any (appropriate) external URL to link to.
- The
Privacy statement
link in the footer of the first page should link to the second page. - The four
Read more on Wikipedia
links should, when clicked, open a new browser tab/window where the relevant Wikipedia page is loaded. (Hint: look into thetarget
attribute of<a>
.) - The table of contents links on the second page should have the browser scroll to the relevant sections in the document. (Hint: look into URI fragments.)
Compliance with standards
Objective #52.1 points
Both your pages should pass the W3 HTML validator without issues.
How to Indent HTML Code – And Why it's Important
Indenting
Objective #6- 1.5 points0.5 points
Your HTML should be consistently indented, such that humans can easily understand the structure of your document.
Rubrics mapping and grading
#2 | #3 | #4 | #5 | #6 | - | Σ | |
---|---|---|---|---|---|---|---|
Write valid and semantic HTML. | 2.1 | 2.1 | 2.1 | 2.1 | 2.1 | -1.5 | 9.0 |
Base grade. | 1.0 | 1.0 | |||||
Σ | 2.1 | 2.1 | 2.1 | 2.1 | 2.1 | -0.5 | 10.0 |