What is HTML?

Hypertext Markup Language (HTML) is a language for describing and structuring web pages. HTML documents can include text, images, sound, and videos. To organise the content, tags marked by a pair of less-than and greater-than signs (<>) are used.


Here’s a very simple HTML code example, including a heading (tag <h1>), a paragraph of text (tag <p>), and an image (tag <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 programming language that is used to format and style HTML documents. For example, you can make the paragraph <p> of text in the example above blue with this CSS code:


   p {
    color:blue;
}


Using Trinket to create HTML and CSS projects online

If you have access to the internet at your club while working on our HTML/CSS projects, we recommend using the online platform Trinket. 

Using Trinket, young people can:

  • See a live preview of the results of their HTML/CSS code

  • Save their code online, allowing them to access their projects both within their club and at home

  • Share their web pages with others, and remix web pages shared with them


Our first HTML & CSS project (called Happy Birthday) explains in more detail how to create, save, and view a simple web page using Trinket.


For general information on using Trinket in a Code Club see our Trinket introduction and Trinket accounts guides.


Writing HTML & CSS Offline

The following is a short guide to writing, editing, and viewing HTML/CSS code offline.


If you want to write your own HTML code, you can download the template web page documents in the Project Resources folder of any HTML/CSS Code Club project.


Open these files in an editor program. We recommend Sublime Text 3, but there are lots of other good editors available. A simple, pre-installed text editor (Notepad on Windows, TextEdit on Mac, or Leafpad on Linux) also works. To open all the files for your web page at once, highlight them all and then right-click to open them.



Opening


Saving your code

After writing your HTML & CSS, save your files - making sure that the files have .html and .css file extensions.


Saving

 

Viewing

To view a web page, double-click the example.html file to open it in a browser. If it opens in a text editor and not a browser, make sure that it has an .html file extension in the name.

Viewing

The easiest way to see changes to your web page that you’re making by changing the code is to open your files in both a browser and a text editor. You can then make changes in the text editor, save your changes and then click Refresh in the browser to see your updated web page.


Editing