back

Introduction to HTML & CSS

What is HTML?

HyperText Markup Language (HTML) is a language for describing and structuring web pages. HTML documents can include things like text, images, sound and video, using ‘tags’ to organise the content. Here’s a very simple HTML example, including a heading (<h1>), a paragraph of text (<p>) and an image (<img>):

<html>
    <h1>Here is my cat:</h1>
    <img src="kitten.jpg" width="200">
    <p>He's called 'fluffy' because he is fluffy.</p>
</html>

What is CSS?

Cascading Style Sheets (CSS) is another language, used to format and style HTML documents. For example, you could make the paragraph of text above blue with this CSS code:

    p {
    color:blue;
}

Using Trinket

When completing our HTML & CSS projects, we recommend using Trinket to build webpages online. Trinkets can be embedded in a web page, try editting the trinkets above.

Trinket offers several advantages over using a text editor offline:

  • Children can see a live preview of their HTML & CSS code;
  • Children can save their code online, allowing them to access their webpages both within their club and at home;
  • Children can share their webpages with others, and can remix webpages shared with them.
  • The first HTML & CSS project (called Happy Birthday) explains the creating, saving and viewing of a simple webpage in more detail.

For general information on using Trinket in a Code Club see our Trinket Introduction and Trinket Accounts pages.