HTML consists of different elements. We then use CSS to change the appearance of these elements. An element is initiated with <Name of element>, and is closed/ended with </Name of element>. You can add comments in the HTML code. These comments are not displayed in the web browser, but might make your work when coding the HTML easier. A HTML comment is written as <!--This is a comment.-->.
To create the color clock we first need to create a simple web page. This web page will later on display our color clock. We do that by specifying the document type. This is an instruction to the web browser about what version of HTML the page is written in. As we write this web page in HTML5 we only write <!doctype html> in the top of the HTML document. The actual HTML code, the content of the web page, is written within the html tag, that is between <html> and </html>. The HTML code usually consists of two parts, the head and the body.
The <head> element is a container for all the head elements on the web page. The <head> element might include the title of the document, scripts, styles, and meta information. Here we specify the meta charset, which is the character encoding of the HTML document. If the charset is incorrect the web browser might misunderstand, or misinterpret the characters, the HTML code, or the text we have written. We use UTF-8 - Character encoding for Unicode. We also insert the title of the page within the <title> element, that is not the title that will show on the actual web page but rather the title that will be shown on top of the web page in the web browser.
Then follows the body, which defines the web page’s body. The <body> element contains all the contents of the web page, such as text, hyperlinks, images, tables, lists, and so on. At this point we will only insert a paragraph element here. The paragraph element is defined by the paragraph tag <p>. Write some text in the paragraph element, later we will replace this text with the time. We also need to give the paragraph element that will show the time an id. The id attribute specifies a unique id for an HTML element, and this value must be unique, i.e. only used once, within the HTML document.
From now on, the HTML code will not be shown in full. It is however easy to get access to the HTML source code in any web page by right-clicking and selecting "View page source".
The first step is to build up a simple web page with a paragraph element.
At the moment it does not look like much, but with some JavaScript and CSS later on it will be much more interesting. In step 2 we will add a JavaScript to the web page to show the clock.