IS5103HTML and CSS W03 EXERCISE

Starting from:

~~$30~~

$24

Exercise 1
Purpose: HTML5 In this exercise, you will consider the purpose and elements of HTML5 and test your knowledge of HTML in the W3Schools quiz. You do not need to write any HTML for this exercise.
1. Why was HTML5 introduced rather than the proposed XHTML2?
2. What do we mean by semantic elements in HTML5? Give examples of sectioning, grouping and text-level semantic tags that were introduced in HTML5 and when you might use them.
3. What HTML5 features are supported by your browser? http://html5test.com/
Markup Quiz

Exercise 2: Presentation Logic (CSS)
In this exercise, you will examine an existing web page and the linked CSS style sheet(s) used to display the text, font and background styling in a browser and familiarise yourself with the variety of techniques in use. You do not need to write any CSS for this exercise.
1. What do the links in the head tags do?
The head tags are the metadata used to inform certain information related to the HTML. This information is not shown on the browser.

• <!DOCTYPE html> - HTML5 way of declaring that the provided document is a HTML for the sake of browser understanding. It is not case sensitive .

Other older HTML declarations were:
HTML 4.01: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
XHTML 1.1: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

• <html lang="en"> - Indicates the language of the webpage
• <head> - Metadata is data about the HTML document. Metadata is not displayed. Metadata typically define the document title, character set, styles, scripts, and other meta information.

• <meta charset="utf-8"> - specifies the character encoding for the web page.
• <title>Alice's Adventure's In Wonderland | Chapter III</title> - Describes the title of the web page
• <link href="font-properties.css" rel="stylesheet"> - Links to external CSS stylesheet
• <link href="text-properties.css" rel="stylesheet"> - Links to external CSS stylesheet
• <link href="color-background-properties.css" rel="stylesheet"> - - Links to external CSS stylesheet

2. Identify the main HTML tags in use?
a. <h1>
b. <p>
c. <article>
d. <div>
e. <footer>

3. Which page semantics are used? Using your understanding of the html source can you draw an outline of the page structure?
4. Are there any images in use? How have they been added to the page?
There are no image tags used in the HTML section, but then there are images used under the CSS background properties.
5. What fonts are displayed on the page? Do you recognise the name of the font faces?
Font families used are – Times new roman, Georgia
6. Are there any class styles in use on the page index.html? Where have they been applied in the HTML?