Quick summary
This chapter takes HTML further with HTML5 and CSS. You learn the new HTML5 form controls and validation, how to style and position elements with CSS, lists, adding audio and video, image maps, inline frames, and finally how to host a website so it is live on the Internet.
Key points
- HTML5 is the current version of HTML. It supports mobile devices, and all major browsers (Chrome, Firefox, Edge, Safari, Opera) support it.
- HTML5 adds new input types: color, number, url, image, date, email, month, week, time, range, search, tel and datetime-local.
- New input attributes help validation: required, placeholder, min, max, pattern (regular expression), readonly, autofocus, autocomplete, multiple.
- The
<meta>tag in the<head>stores page information (author, description, keywords). It is not shown on the page. - CSS (Cascading Style Sheets) controls the look of many pages from one place. A rule = selector + declaration block {property: value;}.
- Three ways to add CSS: inline (style attribute), internal/embedded (
<style>in head), external (separate .css file linked with<link>). - The position property can be static, fixed, relative or absolute; float moves an element left or right so text flows around it.
- Lists:
<ol>(numbered, type 1, A, a, I, i and start attribute),<ul>(bulleted),<dl>with<dt>and<dd>(definition list). <audio>and<video>play media without plug-ins; attributes include controls, autoplay, loop, muted, src;<source>gives alternate files.- An image map uses
<map>and<area>with shape (rect, circle, poly, default) and coords to make parts of an image clickable. <iframe>shows another web page inside a page (src, height, width).- Web hosting makes a site available online. Types include shared hosting and free hosting; a domain name and web space are needed.
Important terms
- HTML5 – latest version of HyperText Markup Language.
- CSS – language that describes the style and layout of HTML elements.
- Selector – the HTML element (or class/id) a CSS rule applies to.
- Image map – an image with several clickable areas.
- Iframe – inline frame that embeds another document.
- Web hosting – service that stores a website on a server connected to the Internet.
Formulas
| Item | Syntax |
|---|---|
| CSS rule | selector { property: value; } |
| External CSS | <link rel="stylesheet" href="style.css"> |
| Image map area | <area shape="circle" coords="x,y,r" href="..."> |
| Rectangle coords | x1,y1,x2,y2 (top-left and bottom-right) |
5 important questions
Q1. List any four new input types in HTML5.
color (colour picker), date (date picker), email (e-mail address field), number, range (slider), url, tel, search.
Q2. What are the three types of CSS?
Inline CSS (style attribute inside a tag), internal or embedded CSS (<style> tag in head) and external CSS (separate .css file linked to the page). External CSS can style many pages at once.
Q3. Explain the position property of CSS.
static is the default (normal flow). relative moves the element from its normal place using top/left. absolute places it relative to the nearest positioned parent. fixed keeps it fixed in the browser window even when the page scrolls.
Q4. What is an image map? Name the tags used.
An image map makes different regions of one image link to different pages. <img usemap="#name">, <map name="name"> and <area> with shape and coords are used.
Q5. What is web hosting? Name two types.
Hosting stores website files on a server so anyone can open it on the Internet. Shared hosting (low cost, many sites on one server) and free hosting (limited space and period).
Exam tip
Practise writing small HTML5 code (a form with validation, an image map, CSS rules). Code-based questions carry marks in theory and in the SOP practical.