HTML, the basics

Internet is one of the most powerful communication platforms. Most likely you surf on the web every day, read an online newspaper, look at pictures, or even watch a movie!

Have you ever wondered how all this cool stuff is made?
Well, every single page you have visited has its foundation in HTML (an acronym for HyperText Markup Language), which is a very simple notation that exists since the beginning of the world wide web. With a simple click of the mouse one can “be at the other end of the world”. The purpose of HTML is to describe the logical parts of a document, thus to organise the content of a document, such as a website. It is coded in English.

With it, you can create text, titles, add images, and a lot of other things. In other words: You can create any content you like!

So, this leads me to another question: Would you like to make webpages on your own? If your answer is “yes”, then keep reading!

Basic things needed to write HTML

If you are reading this article, you probably have everything you need already. But let’s go through a quick checklist anyways:

  • A computer: You don’t need a high-end machine. Any kind of computer is fine. It doesn’t matter if you are on Windows, Linux or Mac.
  • A text editor: Don’t use a word processor. We need something more simple, to save files without format, like Notepad (if you are running Windows). Most likely this is already installed.
  • A browser: It is the program used to look at pages, like Chrome, Firefox, Edge. The same browser you normally use is perfect.

Your first HTML page

In a few steps you will have finished your first webpage. You are going to be amazed of how easy it was! Let’s begin!

1) Open a text editor
Remember that it has to be able to save files in plain text format (in other words, “format-less”).

2) Type this chunk of basic text
Do it! It might make no sense right now, but after you are done, you will understand.

<html>
<head>
<!-- this is my first webpage -->
<title>My very first web page!</title>
</head>
<body>
<h1>MY FIRST WEBPAGE</h1>
<p>
This is my first webpage ever! The first of many!
</p>
<p>
This is nice!
</p>
</body>
</html>

3) Save the file as MyFirstWebpage.html
Actually, you can name the file whatever you like. Just pay attention to its extension, it has to be .html.
And, of course, save the file in a location where you can find it.

4) Launch your browser
Just open it, don’t type any address.

5) Load your webpage into the browser

There are a few ways to do it: double click on your file, drag the file to the browser window, or use the browser’s menu to open a local file.

If all went well (and I’m sure of it), you will see something like this:

html-first-webpage-code-browser

Your browser just interpreted what you wrote in HTML. Depending on your browser you may see a slight difference in forms and sizes (due to missing updates, syntax interpretation…). However, one thing is for sure, each browser acts the way you want it to. If you want to have a certain text as main heading and you indicate this in your HTML code, then the browser makes sure to show this text as main heading. Let’s have a closer look on what this all means.

UNDER THE SURFACE

As you might have noticed, there is some text inside angle braces

<>

The key to write HTML code is the text inside angle braces. Angle braces are special elements called tags. They aren’t shown on the webpage, their mission is to give instructions to the browser about the meaning of the text that is within. For instance, the tag

<h1>

informs the browser it has to display a title, and, because of the “1” near the “h”, a primary title. The tags are embedded into each other to indicate the structure of the page.

There is a certain hierarchy among tags, you can’t nest every single tag as you want; you will understand this in a minute (almost there!).

Each tag has an opening and an ending. Both of them are pretty much the same, except that the ending has a slash (/). Let’s take some examples:

<h1>

Everything that follows this tag is a heading.The number describes the importance, 1 being the most important heading and 6 the least important one. Here, “h1” means it is the most important title of the page.

</h1>

Here ends the heading of importance 1

Example:

<h1>My main heading</h1>

Browsers show headings in a special way. It is the same as with newspapers, which use different headlines according to the importance of the text (for instance, the headline’s font is bigger than the actual article’s font).

<p>

Everything written after this tag is part of a paragraph

</p>

Here ends the paragraph

Example:

<p>My first paragraph</p>

With this tag, you can easily separate different ideas in the same topic (well, like a “real” paragraph).

See, it’s not that complicated, just some basics to understand. Let’s continue to see some more details about HTML.

All in all, the basic structure of a webpage is the following:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Title</title>
</head>
<body>
</body>
</html>

Some explanations concerning this structure:

<!DOCTYPE html>

In short,

<!DOCTYPE html>

is a document type declaration. It is not a HTML tag, but an instruction to the browser indicating the HTML version that encoded this specific page. It should always be written on top of each HTML document so that the browser is aware of the specific document type. In our previous example we simplified the code, so don’t worry about not having found the

<!DOCTYPE html>

It is something mandatory in all web pages, but don’t worry many HTML editors are including this doctype tag by default.

The pair

<html></html>

indicates that everything in between these two tags is HTML code. The webpage begins with

<html>

and ends with

</html>

In the

<head></head>

section there are some special tags, such as the

<title>

tag where you define the title of your page (do not confuse with the titles inside the web page) or its appearance with a link to the CSS file (CSS means Cascading Style Sheets and we’ll get back to CSS later on with further information).

<meta charset="utf-8" />

To keep it simple, this tag describes with which character set your website is written. For the sake of completeness, charset=utf-8 means Character Set = Unicode Transformation Format-8bit. 😉

<title></title>

As stated above, this tag defines the page’s title. What you define as the title will appear, generally, in the browser’s window title bar. Search engines (like Google or Bing) use the title to describe the page.

In the section

<body></body>

goes the HTML code of the page content. Most of what the user sees is inside this area.

Referring to our initial exercise, the

<!- ->

tag is for comments, which are annotations that are ignored by the browser. They are used to describe something about the code. For instance, in our exercise, it stated “this is my first webpage”.

Let’s see some more useful basic tags in order to include links and images to the webpage.

To keep it simple, for links, it’s always the same tag:

<a></a>

One needs to define the localization of the link: href=””.

There are three different types of links:

  • Links to an external website:
    <a href="https://www.google.com">Click</a>
  • Links to a page on your own website:
    <a href="page.html">Click</a>
  • Links to another spot on the same page:
    <a href="#name">Click to go to title</a>

    In the third option you create an ID in the HTML code where you want to make the link to, and then this connects with the previously seen link building. An example within the text could be linking to a h1, such as

    <h1 id="name">My Title</h1>

In all of the above examples, the user will see what is between the

<a></a>

tags as a link and will just have to click on it to be sent to the destination entered in

href=""

For images, it’s always only one tag:

<img>

Like for the

<a>

tags, one needs to define the localization of the image with src=””:

<img src="image.jpg" />
<img src="https://yourwebsite.com/uploads/images/image.jpg" />

What is CSS?

So far we have defined the structure of the document, we gave meaning to each element.

We said “this is the heading”, “these sentences are a paragraph”, and so on.

But what if we want to change how some of these elements look? We now officially introduce the Cascading Style Sheets (CSS for shorter). What are those, you may ask? Well, it’s just the language to describe how elements (those that we created with HTML) should be displayed by the browser.
That’s the main difference between HTML and CSS: HTML defines the structure of the webpage, while CSS indicates how that structure should look like. For example, HTML defines what is the title with the <h> tags, while CSS defines its color, font, position, etc.

Let’s try it out! It’s really easy, just modify the

<head>

like this (the section

<style>

is the one you should add):

<head>
<!-- this is my first webpage -->
<title>My very first web page!</title>
<style>h1 { color: red; }</style>
</head>

You probably have some clue about what we just did… Maybe you remember the heading we created in HTML using the <h1> tag? Good! In a similar way, in CSS we make a reference to that element, using h1 (without angle braces) too! It’s very straight forward!
Then, surrounded by curly braces, we put what attribute we are going to change (in this case the color of the text) and which color it is going to have (I have picked red, for a nice contrast).

There are several ways to call the CSS for a specific webpage:

  • Like in the above example we can store all the CSS within the
    <head>

    tags

  • You can store all the CSS in a another file and call this file within the
    <head>

    tags of your webpage. It would look like this:

    <head>
    <!-- this is my first webpage -->
    <title>My very first web page!</title>
    <link rel="stylesheet" href="link-to-the-css-file" type="text/css" media="all">
    </head>
  • You can store the style of each tag within it. For example if we want to store the style of a title:
    <h1 style="color: red;">A Title which is red</h1>

Further details on CSS will be available in a future article on our website.

GOING FORWARD

Although basic, this first webpage can teach us very important concepts:

  • All tags are written in lowercase.
  • Tags generally have an opening and an ending, and can contain other tags or text.
  • Some tags can be repeated, like
    <p>

    some others can’t, like

    <title>
  • Blank lines in the HTML file are ignored. The markup is what indicates how the webpage looks.

Now that you have a basic understanding about how HTML works, you might want more. You still can go further, there are lots of things to do! You could build lists and tables or create forms for the user to fill with data, just to mention a few.

And don’t forget the most important thing: have fun with HTML!