HTML (HyperText Markup Language) is the most basic building block of the Web. It defines the meaning and structure of web content. Other technologies besides HTML are generally used to describe a web page’s appearance/presentation (CSS) or functionality behavior
Tags are used to mark up the start of an HTML element and they are usually enclosed in angle brackets. An example of a tag is:
Most tags must be opened
<h1> and closed
</h1> in order to function.
Attributes contain additional pieces of information. Attributes take the form of an opening tag and additional info is placed inside.
An example of an attribute is:
<img src="mydog.jpg" alt="A photo of my dog.">
In this instance, the image source (src) and the alt text (alt) are attributes of the
<tag>) and closed (
</tag>) with the element information such as a title or text resting between the tags.
<strong><em>This is really important!</em></strong>
Now that we’ve gotten the basic theory out of the way. It’s time to learn how to build our first website.
First off, we must ensure that we have the right tools. Most important, we need an HTML editor.
There are many choices on the market. Here are a handful of the most popular:
However, for this tutorial, we will use the Sublime Text 3 as it is free and also offers cross-platform support for Windows, Mac, and Linux users.
Another common choice for HTML and other language coders is Notepad ++. It is a tiny program to download and perform the functions you need for writing clean code.
Komodo Edit is one of two editors released by the same label. They offer a simple, open-source editor with a variety of extensions and language support.
It is free to download.
Your code’s front-end view varies from browser to browser – you will learn more about this with advanced CSS.
Do not use Microsoft Word or any other word processor when writing HTML code, only an HTML editor or at the very least, your machine’s built-in notepad, is suitable for the task.
First off, you need to open your HTML editor, where you will find a clean white page on which to write your code.
From there you need to layout your page with the following tags.
These tags should be placed underneath each other at the top of every HTML page that you create.
<!DOCTYPE html> — This tag specifies the language you will write on the page. In this case, the language is HTML 5.
<html> — This tag signals that from here on we are going to write in HTML code.
<head> — This is where all the metadata for the page goes — stuff mostly meant for search engines and other computer programs.
<body> — This is where the content of the page goes.
<head> tag, there is one tag that is always included:
<title>, but there are others that are just as important:
Let’s try out a basic
<head> <title>My First Webpage</title> <meta charset="UTF-8"> <meta name="description" content="This field contains information about your page. It is usually around two sentences long.">. <meta name="author" content="Conor Sheils"> </header>
Next, we will make
<body> is where we add the content which is designed for viewing by human eyes.
This includes text, images, tables, forms and everything else that we see on the internet each day.
In HTML, headings are written in the following elements:
As you might have guessed
<h2> should be used for the most important titles, while the remaining tags should be used for sub-headings and less important text.
Search engine bots use this order when deciphering which information is most important on a page.
Let’s try it out. On a new line in the HTML editor, type:
<h1>Welcome to My Page</h1>
And hit save. We will save this file as “” in a new folder called “my webpage.”
The Moment of Truth: Click the newly saved file and your first ever web page should open in your default browser. It may not be pretty it’s yours… all yours. *Evil laugh*
Well let’s not get carried away; we’ve still got loads of great features that we can add to your page.
Adding text to our HTML page is simple using an element opened with the tag
<p> which creates a new paragraph. We place all of our regular text inside the element
When we write text in HTML, we also have a number of other elements we can use to control the text or make it appear in a certain way.
They are as follows:
|<b>||Bold||Highlight important information|
|<strong>||Strong||Similarly to bold, to highlight key text|
|<i>||Italic||To denote text|
|<em>||Emphasised Text||Usually used as image captions|
|<mark>||Marked Text||Highlight the background of the text|
|<small>||Small Text||To shrink the text|
|<strike>||Striked Out Text||To place a horizontal line across the text|
|<u>||Underlined Text||Used for links or text highlights|
|<ins>||Inserted Text||Displayed with an underline to show an inserted text|
|<sub>||Subscript Text||Typographical stylistic choice|
|<sup>||Superscript Text||Another typographical presentation style|
These tags must be opened and closed around the text in question.
Let’s try it out. On a new line in the HTML editor, type the following HTML code:
<p>Welcome to <em>my</em> brand new website. This site will be my <strong>new<strong> home on the web.</p>
Don’t forget to hit save and then refresh the page in your browser to see the results.
As you may have noticed, the internet is made up of lots of links.
Almost everything you click on while surfing the web is a link takes you to another page within the website you are visiting or to an external site.
Links are included in an attribute opened by the <a> tag. This element is the first that we’ve met which uses an attribute and so it looks different to previously mentioned tags.
The <a> (or anchor) opening tag is written in the format:
<a href="https://blogging.com/how-to-start-a-blog/">Your Link Text Here </a>
The first part of the attribute points to the page that will open once the link is clicked.
Meanwhile, the second part of the attribute contains the text which will be displayed to a visitor in order to entice them to click on that link.
If you are building your own website then you will most likely host all of your pages on professional web hosting. In this case, internal links on your website will <a href=”tle Here</a>.
Let’s try it out. Make a duplicate of the code from your currentpage. Copy / paste it into a new window in your HTML editor.
Save this new page as “page2.html” and ensure that it is saved in the same folder as yourpage.
On page2.html add the following code:
This will create a link to Google on page 2. Hit save and return to yourpage.
On a new line onadd the following code:
Ensure the folder path to the file (page2.html) is correct. Hit save and previewin your browser.
If everything is correct then you will see a link which will take you to your second page. On the second page, there will be a link that will take you to.
In today’s modern digital world, images are everything. The <img> tag has everything you need to display images on your site. Much like the <a> anchor element, <img> also contains an attribute.
The attribute features information for your computer regarding the source, height, width and alt text of the image.
You can also define borders and other styles around the image using the class attribute. However, we shall cover this in a later tutorial.
The file types generally used for image files online are: .jpg, .png, and (less and less) .gif.