-
Notifications
You must be signed in to change notification settings - Fork 1
Computing Tools for CS studies exercises week 2: HTML(5) and CSS
Exercises for week 2. They are a bit easier than last week’s exercises.
We will be doing a valid HTML5 site. HTML5 is so nice and even works on mobile browsers too these days.
A short list of important new features in HTML5 (a longer introduction):
-
New semantic sectioning elements: section, article, aside, nav. No more divs!
-
New multimedia and graphics elements: video, audio, canvas, svg.
-
Void elements are allowed without “/>”-ending them. Like this:
<img src="cathorse.jpg" alt="cat or a horse?">
- Tutorials by HTML Dog (HTML ja CSS) are good and thorough. You are recommended to keep them open while doing the exercises. HTML Dog uses XHTML standard, but they are easy to translate into HTML5 (replace the freakishly long DOCTYPE with short & lovely HTML5 doctype).
- Notifically HTML5's new stuff: Dive into HTML5, HTML5 Doctor.
- W3Consortium has the original mega-thorough standards documents: HTML5 and CSS(3).
- Validate your site! HTML5 validator (also W3C's validator is okay), CSS validator.
The HTML exercises build upon the previous tasks, so doing them in order saves you from a bunch of trouble.
Test your site on your favorite browser. We recommend using Chrome/Chromium and Firefox.
Copy following snippet as a skeleton for your site. Save it as first.html in your public_html directory. Use your favorite text editor, gedit is recommended.
<html>
<head>
<title>My awesome site</title>
</head>
<body>
BOOM! Welcome to Sampumon’s WORLD DOMINATION SITE! My partner in crime is Ötzi. You can write here whatever you like. Blind copy-pasting is not necessary. We are university students, you know!
</body>
</html>Later you can rename the file as index.html, so the browsers shows it instead of the directory listing. But for the moment, it is desirable to see the listing in public_html.
Make the first.html visible to the world: http://cs.helsinki.fi/u/username (this was done already in the exercise [public_html])
Except: in addition to [public_html], we want to
# move index.html out of the way:
cd public_html
mv index.html old_index.html
# make public_html directory listing visible for the world:
chmod a+r public_html
# (is probably by default already)Use our old friend ls -la in public_html. Contemplate if the permissions are adequate for the www server. WWW server belongs to group o(thers). Tutorial on the subject. We’ll come back to this in the week 3.
Browse to your home page http://cs.helsinki.fi/u/username (replace username). There should be a directory listing visible, which includes first.html.
Modify the first.html to include h1 header and another paragraph of text, then put the paragraphs inside p elements.
Indent the HTML code. Computer scientist indents everything always. Something like this:
<html>
<head>
<title>My nuggets</title>
</head>
<body>
<h1>…</h1>
<p>…</p>
…Add a HTML5 DOCTYPE to first.html. It tells that the document is valid HTML5.
Check the results: http://html5.validator.nu. Fix mistakes! Umlauts are fixed in the next exercise.
NB: Do this exercise even if the umlauts work already.
Fix umlauts. Hopefully in educational and enlightening way.
-
Add umlauts (äöå) to the first.html, if there are none. You can also add some unicode special characters. Save.
-
Let’s see what’s the character encoding of first.html.
-
gedit shows the encoding, when you hover the pointer on the tab
in the terminal: file shows the encoding and the file type:
user@melkki:/cs/home/user/public_html$ file -i * eka.html: text/html; charset=utf-8 -
a lovely little tool, curl, shows the file encoding as the www server sends it (header Content-Type):
curl -I http://www.cs.helsinki.fi/u/username/first.html -
You can see what Firefox thinks of the encoding, View > Character Encoding
-
-
Do the umlauts show up correctly in the browser?
We use, and you should too, the UTF-8 character encoding. At least gedit saves files as UTF-8 by default. On the other hand HTTP protocol defines ISO-8859-1 as the default encoding, so we have to explicitly say that we are using UTF-8.
-
Fix umlauts.
You can do this in two ways:
- .htaccess, which is created in public_html, so it has an effect on all the HTML documents you have
- meta charset, which must be set in each HTML document you create
- (actually, there are other options)
Add a list to first.html. List all the reasons why you start studying computer science in the list. Put a h2 header before the list, “Why I am studying computer science?” or something.
Add an image of GARGANTUAN robot. Remember to add the mandatory alt attribute. If you haven’t had the chance of taking a picture of any huge robots, you can use Flickr or Google or something.
Remember! Use only images which have a licence that permits non-commercial use. Sometimes authors require attribution. Usually that means that you have to add a link to the source and the name of the photographer. You are expected to know these things as a university student!
Add following style element inside the head element (properly indented!):
<style type="text/css">
body {
font-family: Helvetica, Arial, sans-serif;
background-color: #efc;
margin-left: 4em;
margin-right: 20%;
}
h1 {
border-bottom: thin solid gray;
}
</style>Add a class attribute to the first p element:
<p class="introduction">…</p>
Then add a CSS selector for that paragraph. You can find help in the section “CSS Intermediate” on the "HTML Dog" tutorial. Make the text on the introduction show up as italic. Of course you can go wild on the styling! Using your creativity is always recommended!
Okay! Time for some of the biggest improvements in HTML5. Documents are no longer outlined by using h1…h6 elements. Instead the new sectioning elements are used, go read the excellent Mozilla Dev article on the subject.
You should have at least one h1 and one h2 header at the moment. Add some section elements so, that the h1 header is inside one section element and the h2 header is inside two section elements. The page title should be outside of all section elements. Remember indentation! Like this:
<h1>SAMPUMON MEGATRON</h1>
<section>
<h1>…</h1>
…
<section>
<h2>…</h2>
…
</section>
…
</section>Did anything change? Go have a look-see on the browser. Is the HTML code better or worse? Validate!
Use the HTML5 outliner to see if your document structure is correct.
Ps. possibly the article element fits your situation better than section.
Now that your document is structured by nesting section elements, we can make a change: make all the header h1 headers. The section elements ensure that the structure is correct, h1…h6 structuring is passé.
Check with the HTML5 outliner.
Oh but! Now the previous CSS styling for h1 headings broke, because all headings are h1. Fix the CSS so that only first (outermost) h1 heading has a bottom border.
Add a footer element to the end, outside the section elements but inside the body element. The content could be something like “❤ Awesome computer tools website 2015 by Doge ❤”. You do not need to copy that, you can write whatever you like. Check the semantics of the footer (and other elements).
Add a “last modification” time element to the footer. Put both date and time in it.
You can automate this later in the exercise [http-ssi].
Open Chrome/Chromium's web inspector and/or install Firebug into Firefox. Chrome: wrench icon > Tools > Developer Tools. Or ctrl + shift + i, or f12. Inspector can also be opened by right-clicking any part of page and choosing "Inspect Element".
Choose an h1 element from inspector, and chance its css properties so that turn off the border-bottom. Border line should disappear immediately from the document!
It's also convenient to do fast tests/changes to html code with inspector. Especially useful it's for JavaScript debugging.
Do a new (empty) HTML file: second.html. Copy the old html as template. Remove all content (everything inside body element) and add new content, such as: "On this page I'll list and describe my cat/worm compost/icelandic horses/gigantic robots/star wars figurines with images". Validate.
You noticed that the CSS styles are identical in both HTML files? That's not fun, computer scientists does not maintain duplicates.
Do a new file: styles.css. Remove the style element from both HTML files, and move the contents of style element (between <style> and </style>) into styles.css. Link styles.css from both html files:
<link rel="stylesheet" type="text/css" href="styles.css" />
Add lots of text to second.html. Header(s), paragraphs, lists, copy-paste something, report today's feelings. Also two images. The other at the beginning of page, other somewhere in the middle. As pseudo html, it should look like this:
h1. Gigantic robots or any other subject which interests you.
img.
p. On this page there's some more gigantic robots with name and image! Tsuippaduips! The text just keeps on going without end, lalalalalala. Don't use lorem ipsum. img. Text continues. You'll need some more text, so that it fills the intire web browser window. It should fill entire window, so that the next exercise succeeds. Good luck!
Make the images float! Add following CSS classes to img elements.
For the first img: <img class="left" … />
And for the second: <img class="right" … />.
Add matching CSS selectors to styles.css. Then make the images float!
Float the left-classed images the the left, and right-classed images to right. If everything goes correctly, text flows between images and continues automatically under images. If the text is too close of imageds, add marginal.
Link first.html→second.html, that is, add an a element to first.html, which points to second.html. Use relative URLs (just the file name, when files are at the same directory).
Also add a (second) link to your favorite site, such as your photo gallery, horse site or blog. The link should be interesting, which happens if there's self-created content, or then it's some esoteric hard-to-find treasure site.
Btw. You can also rename the files meaningfully, instead of generic first/second.
Copy/move the images included from your site into your local public_html directory, into subdirectory images. Change the html code to point to the local copy. Check that it works.
Add a table into second.html, where you list the properties of your cat/worm compost/icelandic horses/gigantic robots/star wars figurines. Possible properties: length, weight, color, special power, expected noise, lifetime estimate, dangerous yes/no, living habitat (desert, forest, swamp, city).
Tables are good for tabular data. They are bad for hacking layout. You can recognize data as tabular, if there's a natural header for each column (and row). Here the headers are the properties you are describing. Put the table headers into th element.
Add a nav element to the beginning of first.html (just after
tag). This will be the navigation area of your site. Into the nav element, add links (a elements) to all other pages of your site (first.html, second.html, …). Like this:<nav>
<a ...>Eka sivu</a>
<a ...>Toka sivu</a>
</nav>Add navigation bar to second.html page also. This can be done easily by following the instructions of http-ssi assignment. You could also manually copy the navigation element to the second.html but adding new pages would be hard since you'd have to update all existing pages navigation bars.
Also add css styles to nav elements, so that nav has slightly darker background than around it. And some padding, so that the width of darkened background around text looks good. Bonus: remove margin from nav element, so that it begins at the very top-left corner of page.
Finally we finalize your navigational links. Basic user interface guidelines dictate that the current page's navigation link should be hilighted, so the visitor knows where she is.
If the nav element would be copied to every page of your site (instead of just nav.html), you could easily but painfully add the hilight to every page. It's also possible to do highlightation with SSI, but not reasonably, since SSI only has conditional statements (if), no looping statement (for). SSI is not Turing complete.
We do a clever CSS trick. Just follow instructions. If you didn't complete the http-ssi assignment you need to update all existing pages navigation bars.
UI guidelines also tell us, that the current navigation link should not be a link. This is not as serious as highlighting it, so we'll do it as a fun JavaScript exercise.
Copy-paste following working JavaScript code to your site. Here's some view on where to put JavaScript. We also suggest putting it into separate .js file.
document.addEventListener("DOMContentLoaded", function() {
// every a element in document
links = document.getElementsByTagName("a");
for (var a = 0; a < links.length; a++) {
if (document.location.href.match(links[a].href)) {
// note: a element without href attribute is valid
links[a].removeAttribute("href");
}
}
}, false);Test that it works. Check from JavaScript console, that there's no JavaScript errors!
Bonus. If you got excited, you can also redo task [css-nav] with JavaScript. It's easy to add to the code above.
Add a sexy HTML5 video element to your site. There's a complete example in the link. Add controls to the element, so you can play/pause/fullscreen. Also check the "browser support" table about working video formats in different browsers.
You can produce the video file yourself, or pick from internet. For example you can grab videos from YouTube in semistandard webm format. Downloading videos might not be according to YouTube's license.
BOOM. Here's some extra thought about making your own video.
Okay! If you're excited (AND WHO'S NOT???), here's suggested programs for creating videos. On Ubuntu, all of these create videos in ogv format, which work in Chrome and Firefox.
-
Video camera and editing program
- Ubuntu: PiTiVi
- OS X: iMovie
- Windows Live Movie Maker
-
Web-camera & grab some video
- Ubuntu: Cheese
- OS X: Photo Booth
- Windows: something's bundled maybe?
-
Screencast, ie. save the computer screen events
- Ubuntu: recordmydesktop (installed on department)
- OS X: QuickTime Player
- Windows: maybe the free (beer) & free (speech) CamStudio?
Offer your videos in at least mp4 and ogv/webm formats, so that they work in nearly every browser. FFmpeg and MEncoder do format conversions:
- mp4→ogv:
ffmpeg -i in.mp4 -sameq -acodec libvorbis out.ogv - ogv→mp4:
mencoder in.ogv -of lavf -lavfopts format=mp4 -ovc x264 -oac faac -o out.mp4
FFmpeg and MEncoder also do all other possible video processing. Useful might be changing (usually lowering) the resolution/bitrate. See for example beginners ffmpeg tutorial.
- Windows? Miro VideoConverter.
- OS X? MPEG Streamclip, ffmpegX or Miro.
- Ubuntu? Transmageddon.
For ripping DVDs, gorgeous HandBrake!
HELLO. Excersises have ended. Before you yell paja pony to come and validate:
- Check indentation. Computer scientists indent everything, always.
- Validate your page. Ponies will not accept invalid code.
- Also document outline is worth checking out. THANKYOU!
By completing the following assignments you can substitute one of the assignments listed above. These assignments are not counted to the weeks maximum assignment count. So completing both assignments you can substitute two assignments above (one each).
Next step would be to add this navigation area to other pages of your site (second.html etc), but! That makes no sense, you don't want to maintain same navigational content on several pages. When you add more pages to your site (third.html maybe), you'd have to update all old pages. Adding pages should be O(1), not O(n).
We'll do a trick. Move the nav element (with it's content) to a new file named nav.html. In first.html, where the nav element was, add this line:
<!--#include virtual="nav.html"-->
Add execution permissions to first.html, and every other page where you will be using this SSI #include directive:
chmod u+x first.html
Add the include directive and x permissions to second.html, and any other pages you have.
HOP. We noted that with most, this works just fine, but with some not. If it doesn't work, continue as follows:
-
Change {first,second,…}.html file extension to .shtml. Does it work now?
-
If not, create a file .htaccess containing:
AddHandler server-parsed .shtml -
If it still won't work, check x permissions and report to instructor.
<!-- normally this is an HTML comment, which the browser won't render visible -->, but www server interprets comments starting with # as SSI directives, if the html file has execution permissions (+x). From this follows that SSI directives only work when you open the pages via web server; if you open the html files directly into web browser (via file system), SSI directives will not work.
Funtask: load first.html from internet with telnet.
Type following in terminal. You have to be fast, or cs dept's www server time-disconnects you. Copy-paste might work (but note that you have to replace username below).
telnet cs.helsinki.fi 80
GET /u/username/first.html HTTP/1.1
Host: www.cs.helsinki.fi
(2x enter)
Coolio? Yes! This is the protocol www browser uses to get pages. Now you can make your own www browser, good luck!
Nb. if you need to get pages/stuff from internet via command line and in real life, use curl or wget.