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>):
<h1>Here is my cat:</h1>
<img src="kitten.jpg" width="200">
<p>He's called 'fluffy' because he is fluffy.</p>
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:
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.
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.
Saving your code
After writing your HTML & CSS, save your files - making sure that the files have .html and .css file extensions.
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.
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.