Welcome to the HTML tutorial! This is the second module in the How to Make Your Own Website series.
In module one, I introduced the core fundamentals for web development and in this HTML tutorial it is time to continue our journey. You learnt that a browser is a program that knows how to take a URL, fetch the required resources from a web server and display the retrieved web page for you. We also learnt why we need to learn HTML and the benefits of doing so!
Now you are ready to actually create your first web page and see this process in action for yourself. Let’s jump right in to HTML!
Watch Supporting Video on YouTube
The Right Tools For The Job
As we are about to learn how to code up web pages using HTML, we need some tools. For web programming, I highly recommend you download and install a good text editor program on your computer. A good text editor will make coding more easy and fun. It will do handy things like auto-completion and syntax highlighting. That is, it will second guess and finish off code for you and highlight different code in colours making it easier to read! I recommend the following free text editors:
If you do not wish to install anything you can use a tool like Notepad but it will not have features to help you code like syntax highlighting.
You will need to do this tutorial on a laptop or desktop computer. It cannot be done on mobile or tablet unfortunately, because those devices are primarily designed for content consumption, not creation, so they do not have the required functionality.
You will also need a browser but luckily this comes pre-installed with all computers these days. I am doing these steps on Microsoft Windows using the Google Chrome browser but any Operating System (OS) and browser combination will do, the HTML code will always be the same.
Introduction To HTML
Hyper Text Markup Language (HTML) is a structured language for describing web pages. The “markup” part refers to a set of tags. Each tag describes content within a web page. A website is simply a set of web pages.
HTML was originally developed at CERN by Tim Berners-Lee in 1980 as means for scientists to create and share information. It is always useful when learning a new language to check out its history and understand why it was created and what problem it was designed to solve. This helps put what you are learning into context.
HTML allows us to create and publish pages online. We can include text, images, video and other rich content. It also allows us to navigate from page to page using hyperlinks or just links for short.
Everything you see online is essentially HTML!
You Can Check Out HTML Code Of ANY Web Page
You can see the HTML source code for any web page. How you do this will vary browser to browser. In Internet Explorer, right click the page and click on “View Source”. In Chrome, right click the page and click on “View Page Source”. This will bring up the HTML code for that page! Try it!
Your First Web Page – Hello World!
It is usual when learning a new language to do the most basic thing first. Tradition has it that the first program when learning a new language should say “Hello World!”. Don’t ask me why, it is just a fun thing that programmers do!
Open up the text editor you downloaded and type in the code below. I advise you to actually type it in, rather than copy and paste it. This will force you to think about it and you will understand the structure more intuitively!
Note I am using CodePen to show source code in this tutorial series. If you click “EDIT on CodePen” you can open this code and play with it!
This is how it should look if you are using Sublime Text.
Now save the file somewhere on your computer, for example on your Desktop and name it – index.html
Go to your Desktop or wherever you saved your file to. Right click it and select open with and select a web browser. You can also usually drag the file into an empty browser tab. Again this part may vary depending on the OS/browser combination you are using and may require a little trial and error!
Once you open it successfully in a browser it should look like this!
Congratulations! You just created your first web page!
What’s Going On Here?
Well, we created an HTML document. Each part of the document tells the browser something about the content it needs to display!
- DOCTYPE marks the document type to be HTML
- An HTML tag starts with <tag> and ends with </tag>
- The content of the tag is between the start and end
- <html> tag describes the HTML document
- <head> is data about the HTML document or meta data
- <title> is the title of the HTML document
- <body> is the actual content of the page
- <h1> is heading 1, we also have h2, h3 to h6
- <p> is a paragraph
- HTML code is not case-sensitive but it is usual to write it in all lowercase
Notice also how the tags are nested forming a hierarchy. Each web page will have a common structure. Each web page will have a <html> section, a <head> and a <body>! Notice also how each line of code is on a new line and is indented using tab – this is just to make it easier to read and see the structure.
Why not take a moment to have a play around with your code changing the text and seeing what happens? Try adding additional sub header using <h2> tag and test what happens. Save your code in your text editor and refresh the browser using F5 to see the results!
This is called iterating, where the developer changes code and then checks the results and then repeats the process continuously, refining their work as they go. The tighter this loop, the less chance of introducing difficult to fix bugs into your code. You should aim to make small changes and double-check those changes work before moving on as a general programming principle.
Where Do These Tags Come From?
WWW Consortium (W3C) maintains and develops the HTML specification with input from commercial software vendors. It is continuously evolving and we are currently on HTML5. All the different browsers implement the HTML specification.
New Terminology You Learnt In This Module!
An HTML tag is a special code structure used to “markup” an HTML document.
This is the code that the programmer writes.
A hyperlink or simply link is a pointer to another web page.
This is the way coders indent their code to make it more readable.
This is the process of writing code in small increments and then testing it and repeating this process.
HTML5 is the current version of the HTML specification.
Also known as an OS, it’s the base software that runs on top of the hardware – such as Windows, Mac OS or Linux.
CodePen is a playground for the front end side of the web. It’s all about inspiration, education, and sharing. Developers can quickly create web code snippets and share them!
That’s the end of the HTML tutorial. We learnt how to create a very simple first web page and see it in action using a browser. There are many other tags for use in HTML and we will cover the most common ones in the next tutorial!