1 - What is HTML?
Technically, HTML stands for “Hypertext Markup Language”, which is a markup language that allows us to create web pages in a structured way.
It is a standard language that browsers are able to read and render.
HTML works hand in hand with CSS and JavaScript to create web pages, which we will see later on.
The three elements have completely different functions, which are
- HTML - The structure of the web
- CSS - The styles
- JavaScript (Js) - The functionality.
The combination of these three technologies is what makes it possible for us to enjoy functional web pages.
To create the structure of a web page we use tags, which browsers already understand.
<!DOCTYPE html>
<html>
<head>
<title>Nuestra primera web</title>
</head>
<body>
Hola mundo
</body>
</html>As we can see in the example, to create web pages with HTML we use tags. In the previous example, we have several tags, which are the most basic ones.
<!DOCTYPE HTML>This is required in all your web pages. It indicates what type of web page we have, in this case HTML5.<html>Contains the body of the page<head>Contains the metadata of the web page<body>Contains the content of the web page, which will be available to the user
We will see more tags in the next post.
2 - Differences Between HTML 4 and HTML 5
The main differences lie in their tags. Previously, the <div> tag was used for everything. For example, the website menu used to be inside a div tag with an id called menu. Nowadays, with HTML5, we use the <nav> tag. The same applies to the website header, where we use <header>, or the website footer with <footer>
Additionally, another very important change has been multimedia elements such as audio or videos, which we will see later.
This is how we could show the difference between HTML4 and HTML5:
As we can see, there are a greater number of tags, which makes our lives easier and simplifies programming.
3 - How Does a Website Work?
A web page built with HTML, CSS, and JavaScript allows us to have functionality, but it does not allow us to have a dynamic website, where we update the content without the need to update the code, but rather by inserting it into a database.
For example, this website is dynamic, where I write the posts on the server side, they are saved in the database, and are displayed dynamically to the user depending on where they click.
Static pages are usually those that provide information about products. For example, a law firm that wants to advertise on the internet – except for a possible blog – will, in most cases, have a static site.
To have a dynamic website, we must connect the web page to a server, which is another computer containing the data.
Basically, what we do when we connect to the internet and search on Google is connect our computer to another computer and download files, which the browser interprets and displays as a web page.
That's why it's said that the browser is an interpreter.
That's why HTML, CSS, and JavaScript are called client-side languages, because when you access them, a plain text file is downloaded, and it's the browser that processes and displays it correctly.
Note: You can check this if you go to the developer options in your browser, under the networking tab.
4 - How to Program in HTML?
Unlike programming languages, where we need to compile the code or run it through the Java virtual machine in the case of Java, to learn HTML, CSS, and JavaScript all we need is a plain text editor and a browser.
Personally, I will use Visual Studio Code, which you can download here
It is completely free and from Microsoft. It has become very popular since it was released two or three years ago, although it originally started as a fork of Atom on GitHub (link to Git/GitHub course).
I will also make a video where I will explain which extensions I use.
But you can use others like Sublime Text or Notepad++
When we move on to other courses, where we combine the backend with the frontend, I will probably use Visual Studio, but for now it’s not necessary.
The only thing we need to do is save the file with the .html extension, which we can then open with the browser.
And that’s all for now; if you liked it, don’t hesitate to share it.
If there is any problem you can add a comment bellow or contact me in the website's contact form
