Universiteit Leiden

HTML Exercises

Make a web page on which you introduce yourself to your fellow classmates and the BDMS staff. First, read the "HTML and CSS Tutorial". Next, download the folder named "XML.zip". Save this file in your working directory and unzip the folder.

  • Open the file named 'cv.html'. In the body of this HTML file, write a brief curriculum vitae. Structure your text by using headings and paragraphs. Also include a hyperlink reference to the university where you completed your undergraduate studies. See "HTML and CSS Tutorial", sections 1-4.

  • Include a personal photo on your webpage. As a file name for the image, use 'me.jpg'. See "HTML and CSS Tutorial", section 5.

  • Create a bulleted list of all the languages that you master. See also section 6 of "HTML and CSS Tutorial".

  • Add a table with two rows and two columns. In the <table> element, use the attribute "style", and give it the value "width: 100%; ". The first column of the first row should contain the words "Prior Knowledge". Use the attribute "style" with the value "width: 20%; " in the opening <td> tag. In the second column of the first row, write a brief text in which you describe the current state of your technical skills. On the second row, the first column must contain the word "Expectations". The right hand column should contain a short text in which you describe what you expect to learn during the "Digital Media Technology" course. See section 7 of the "HTML and CSS Tutorial".

  • Read sections 8 and 9 of the tutorial. Change the typography of the web page, using CSS. The specifications below are suggestions. Feel free to work with other colours, font families or page dimensions.

    • Font: Arial, Verdana, Helvetica, sans-serif.
    • Colour of all h1 headings: #000066.
    • Hyperlinks that have not yet been visited should be shown in the colour #003366, and they should not be underlined. Links only need to be underlined when the mouse hovers over the link text. Visited links must appear in the colour #660066.
    • Change the margins of the page using the margin-left an margin-right properties, which can be used with percentages. Set the margins to 10%.