1. Pre-history of XML: SGML, HTML, CSS

2010-09-01
Pre-history of XML: SGML, HTML, CSS Guest lecturer: Anders Schack-Nielsen
Chapter 1 pp. 3-31 Slides, book originals

Exercises for 2010-09-08

Doing these exercises will familiarise you with HTML and CSS. If you are already familiar with HTML and CSS, feel free to skip this exercise session altogether --- although you might want to look at Exercise 4.

  1. Tools and basic HTML.
    1. Find out how to make your browser display the HTML behind a web-page. (Look for “View source”.)
    2. Inspect the HTML behind my homepage, http://www.itu.dk/people/debois. Make a list of the tags you do not know.
    3. Using the book, find out what those tags do.
    4. Find out how to save a web-page to your local disk as a file “page.html”, and edit that file in Notepad. (Your browser will have a “Save page as …” menu option or button somewhere.) Change the title and some of the text. Save the file. View the modified page.html in a browser. Verify that you see your changes.
  2. DIY Publishing
    1. Still using notepad, write an HTML-homepage for yourself. Call it “index.html” (the name matters). Use only logical markup. The page should include:
      • A title
      • our name, address and telephone number
      • A short description of yourself. Emphasize something in the description.
      • A list of ITU-courses you’ve had.
      • A link to this page.
      • A reproduction of Figure 1.1 (p. 5) in the book as a table. (You don’t need to reproduce the entire table; the 1992, 1995, 1999 and 2001 entries will do.)
      • An image of yourself which, when you click on it, takes the viewer to a google search for your name. (Hint: use the regular link mechanism to make the image clickable; to find out how which URL makes google search for you, simply go to google, search for your name as you would usually do, then copy the URL of the results page.)
    2. Publish your own homepage. Using an ITU computer, copy your homepage “index.html” to H:\Public_html. You can now visit your own homepage at http://www.itu.dk/people/your-username.
  3. Stylesheets
    1. Add a stylesheet to index.html using the <style> tag (see p. 18 in the book). Change the emphasis in your description of yourself to be boldface.
    2. Change the font of the entire document.
    3. Split the stylesheet and the html into two documents: Move the contents of the <style> tag into a file “style.css”, and replace the <style>-tag with a <link>-tag (see p. 19 in the book.)
    4. Make your homepage visually appealing by modifying “style.css”
    5. Do exercise 1.4 (page 30) from the book. Note that “EX/physical.html” means “http://www.brics.dk/ixwt/exercises/physical.html“.
    6. Bonus exercise: Construct a stylesheet making my homepage visually appealing (you can change the HTML too, if you like.) Best effort will be rewarded with a Ritter Sport of the winner’s choice.
  4. Validation.
    1. Run my homepage through the w3 validator. Explain what’s wrong. Propose a fix.
    2. Run your own newly created homepage (see above) through the validator. Fix what’s wrong. Repeat until you have a valid homepage. The validator will then give you code to insert on your page that will display the w3-validity icon on the page.
    3. Run the ITU homepage http://www.itu.dk through the w3 validator. Explain what’s wrong. Propose a fix. (Hint: Read the first warning very carefully.)
  5. Forms.

    Do exercise 1.3 from the book. (In exercise 1, 2, and 3 above, I specified what is meant by “playing with”. Now decide for yourself. Make sure you get to try all of the controls on p. 14-15 of the book.)

  6. Cleanup. If you don’t want your new homepage visible to the public, remove the file “index.html” from H:\Public_html.
  7. Evaluation: Let me know how much time you spend, which (if any) you didn’t do and why, and whether these exercises were too hard, too easy, too boring, too many, too few, too something else, or just right. Use e-mail, (possibly anonymous), telephone, meeting, unreadable handwriting on candybar-paper or whatever to let me know.