Objective:

To learn how to build a website using HTML and CSS

Outcomes:

  • All: To understand HTML and CSS
  • Most: To edit HTML and CSS
  • Some: To learn about different versions of HTML and CSS

What is HTML and CSS

HTML and CSS are names of languages that let you describe how the contents of a web page appears in a Web Browser.

  1. HTML lets you specify the type of information
    (eg. headers, images, lists, tables, etc)
  2. CSS lets you style how the information looks.

The HTML/CSS editing window

These lessons use an HTML editing window (shown below, from Trinket), that lets you see the HTML and CSS that creates a web page, and optionally edit them yourself.

For example, the following HTML on the left, produces the boxes on a mini-webpage on the right, together with CSS that you can see by clicking the tab “style.css”.

HTML and CSS editing window

Exercise

The HTML instructions are what appears between the angled brackets, such as <body>

  1. Make sure that the tab “index.html” is selected, and see if you can change the numbers in the boxes. Like many editors, if you make a mistake, your can “undo” it by holding down the Ctrl key, and tapping the letter Z (abbreviated to: Ctrl Z).
  2. Make sure that the tab “style.css” is selected, and see if you can change the colours of the boxes.
  3. If you’re feeling adventurous, you can edit anything in the two tabs, and see what happens. If you want to reset everything and start again, click the hamburger menu ☰ and select Reset (or you can just refresh the page).

Introductory Keywords

  1. CSS: the language that lets specify the style of various elements on a web page. CSS is an abbreviation for “Cascading Style Sheets”. The word “cascading” refers to the rules which determine how a Browser prioritises the CSS keywords, which cascade like a waterfall.
  2. HTML: the language that describes the type of content on a page. HTML is an abbreviation for “HyperText Markup Language”. The word “hypertext” means “link”.
  3. document: another word for the web page
  4. source: refers to the HTML and CSS that describes a web page. Sometimes called “source code”.
  5. tag: an individual HTML keyword, surrounded with angled brackets, eg. <p> which refers to a paragraph of text.
  6. web page: what you see in your Browser.