Learning HTML (Part 1)
Overview
HTML (Hypertext Markup Language) is a markup language that is behind every website you use.
So what exactly is a markup language? It refers to the fact you use it to provide meaningful structure to the content of a web page.
Webpage content consists of elements such as images, paragraphs of text, headings, lists etc.
We wrap our content in HTML elements defined by an opening tag, our content and a closing tag.
<tagname>Content goes here...</tagname>Some examples of HTML elements:
<h1>My first heading</h1>
<p>My first paragraph</p>In the code above ‘<h1>’ is an example of a starting tag, “My first heading” is the content nad </h1> is a closing tag.
Some HTML elements have no content (like the <hr> element). These elements are called empty elements and don’t have an end tag, we’ll cover these later.
What Happens When You Visit A Website?
You may have heard the terms ‘client’ and ‘server’. A server is simply a computer that has the ability to serve information. In our instance, this is a computer that stores a copy of our web pages HTML code. Clients refer to any device that is used to view web pages.
Your laptop, phone and tablet are all clients. In each instance, you interact with the web via a web browser. Safari, Chrome, Firefox and Safari for example.
Whenever you request to visit a website from your browser, your request finds its way to a server that stores a copy of the HTML code used to define the website. This HTML data (as well as CSS and JavaScript code, which we’ll cover later) is transferred to your machine over the internet and your web browser is able to understand the HTML and render the page.
So how did this HTML come to exist?
You don’t need any special tools to create HTML. You can write it in any simple text editor such as Notepad (Windows) or textEdit (Mac).
You may have heard of a number of code editors or IDEs (Integrated Development Environments) such as Visual Studio Code, Atom, Sublime or WebStorm.
These tools are very useful but not needed to learn HTML. I’ll leave the choice up to you if you wish to try them. If you are unsure which one to start with, my advice would be Visual Studio Code. It’s free and can be downloaded on Windows, Mac or Linux.
But the important point to remember is, they aren’t needed for HTML. I’ll do a future blog post on these tools as we progress.
A Caveat is don’t use an editor such as Word. It adds formatting to a file when you save it which will render your HTML files invalid.
The main takeaway, is that all you need is a text or code editor that can save your HTML files with a .html file extension.
E.g. my_first_page.html
So in order to view our HTML work, we just need to double click a .html file on our machine and our default web browser will open it and render our web page. Just like when you open a .docx file Word knows what it is and opens it, or a .pdf is opened by Adobe Acrobat. Our Web browser can render HTML it receives from the internet or in a local file on our machine.
This is how web pages start off. As HTML files a developer writes first on their machine before deploying it to an internet server for the world to access.
Enough Theory, Let’s Build Something Already
In your text/code editor of choice, create a new file and name it my_page.html
Add the following into your my_page.html
<html>
<body>
<h1>Rob McBryde</h1>
</body>
</html>Save the file somewhere on your machine, making sure that you retain the file extension .html.
Congratulations, you have just written your first HTML! Let’s see it in action. Navigate to the location you saved your my_page.html to and double click the file. It should open up in your default web browser. So what did we just write? Let’s go through it.
Our entire web page needs to be wrapped in <html> tags. The actual <html> text is called an “opening tag”, while </html> is called a “closing tag”.
Everything inside of these tags are considered part of the <html> “element”, which is an ethereal thing that gets created when a web browser parses your HTML tags.
The <body> tags wrap the visible elements in our web page. Anything you put between the opening and closing body tags will be displayed to the end user.
We have added a heading element with our name. HTML provides six levels of heading, the corresponding elements are <h1>, <h2>, <h3>,…<h6>. The higher the number, the less prominent the heading.
Experiment with changing the <h1> tag to another heading level (remember to change the opening and closing tags). You will need to save your file before seeing the change in your web browser. Take care when saving your file that it still retains the .html extension.
The spacing within your HTML file does not matter as it is ignored by the web browser but its good practice to help keep your code clean and easier to read as it grows in size.
Troubleshooting
Heading not visible.
If you aren’t seeing your heading, carefully check your HTML tags are nested in the correct order. It’s important to ensure there are no overlapping elements. For instance, the element is supposed to be
inside of the , so you never want to add the closing tag before closing the tag.
e.g. (DON’T EVER DO THIS)
<body>
<h1>Rob McBryde</body>
</h1>HTML opens in editor rather than web browser.
If you double click your my_page.html file to open it with a web browser and it opens as the raw HTML code in your text editor, make sure when you save your file you retain the .html file extension.
Next steps — Part 2
