Although HTML cannot be classified as ‘programming’ (‘coding’ is perhaps more fitting since we are engaging with a code ) most would agree that its understanding is absolutely fundamental before engaging with other programming languages. HTML dictates the structure of most of the world wide web’s content, while CSS then styles how such content should look. Although a website can be written without any knowledge of either HTML or CSS (through sites such as blogger.com), knowing both is essential to actually fully develop our own website content.
What does HTML stand for?
HTML stands for Hypertext Markup Language. Hypertext can be described as an advanced version of a plain text with the ability to include hyperlinks, which, again, could be described as advanced regular links. Markup refers to all the different characters or other symbols that you insert within a plain text document to indicate how the content of the document should be displayed.
The image above is a simple example of a HTML, where <a> markups (also called tags) were used to create a hyperlink.
Where is HTML writen?
Unlike plain text, HTML has to follow certain rules for it to be recognised as an actual HTML document. The simplest way to write an HTML code is through the Windows’ Notepad or MacOS’ TextEdit – all it takes is to save the text file as .html (instead of the standard .txt extension). There are more sophisticated HTML editors which automatically format some of the code for you and make HTML writing slightly more fun and organised. In this tutorial, I will be using Sublime Text, but I can also highly recommend the Atom editor.
Our first page
For clarity purposes, I recommend creating a dedicated folder for our HTML document, as it will help us link our HTML document with other files later on. When opening our editor, create a new file, name it, add ‘.html’ at the end of the name and save it in our folder. Most editors will already recognise the .html extension and add a corresponding icon (in my case a google chrome icon) to the file, as seen below. Also, although we can name the file whatever we want, it is a good practice to name our code index.html, as most browsers will automatically interpret the ‘index.html’ file to be the homepage of a website.
Now some actual coding
The first thing we have to do with any HTML file is to put the <!DOCTYPE html> declaration at the beginning of the document. This simply tells browsers what type of document to expect. This declaration is case insensitive, and the following would, therefore, also work: <!DoCtYpE hTmL> or <!doctype html>.
After this, we create our first HTML tag – the <html> tag. All tags within HTML start with ‘<‘ and end with ‘>‘, as this is the language’s main syntax. An HTML tag will apply to anything immediately following it, and to denote where the tag should end, we have to write it once again, but this time with a forward-slash (“/”) after the first ‘<‘ (the pattern is, therefore, <TAG> </TAG>). All of our code should be included within the <html> and </html> tags. Our file should now look like this:
Nothing that we wrote so far will be visible when we visit our website but it is vital for the structure of our code. Within our <html></html> tags, we need to include the <head></head> tags. The head tag is used to declare any meta-information about our HTML documents, such as the document/website title, language of the webpage, and other meta information. To add a title of the page, add <title> </title> with the actual desired title in between the tags (as shown below). When we double-click on our index.html folder, it should open in our primary browser, and we can now see the title in the respective browser tab.
Next, we need to include the <body></body> tag, which contains all visible content of our webpage. It does, just like the <head> element, go inside the <html> tag, and not within the <head> tag. Our document should now look like this:
Before we see our website for the first time, we need to write something within the <body> tag. The two basic tags to include within a paragraph are <h1></h1>, defining a large heading, and <p></p>, defining a paragraph. Try to put these two within the document and make a title and a paragraph under it.
<!DOCTYPE html> <html> <head> <title> NUTRITION INFORMATION FOR LAWYERS </title> </head> <body> <h1>Should Lawyers Eat More Carrots?</h1> <p>Nutritionists have reached the conclusion that ...</p> </body> </html>
After we got this, it is time to see our website. Simply double click our index.html file and the browser will automatically open it (if this does not work on MacOS, make sure to check the ‘Display HTML files as HTML code instead of formatted text’ box in TextEdit –> Preferences –> Open and Save).