HTML

Every web page, no matter how pretty or lively it may seem to us, is structured with 3 essential elements: the markup language (HTML), style sheets (CSS) and scripts (JavaScript). From the social network you visit every day, to the webmail you use to check your messages, or the portal where you buy your plane tickets. If you want to earn the title of Web Designer you must master every language like a ninja. Do you dare to step into the wonderful world of Web development? If so, I can only welcome you with a: welcome.

The goal of this responsive Web Design course oriented towards multi-device is not to teach you every corner, no matter how dark, but to train you to build modern sites compatible with any device (smartphones, tablets, laptops and desktops) using the most professional tools in the industry. Quality will always matter more than quantity, future compatibility more than speed, and order more than haste.

What happens when I want to visit a web page?

Let's see what happens from the moment we type the address of the site we want to visit until we see the final result. Without you noticing, there is a constant communication of requests and responses; an almost instantaneous negotiation.

How the internet works

Simple web page

It's a good time to see for yourself what a web page really is.

Open Notepad and create a new file called hola.html. Then copy the following content.

<!doctype html>
<html lang="es">
    <head>
        <meta charset="UTF-8"/>
        <title>Tab text</title>
    </head>
    <body>
       My first website
    </body>
</html>

Save the file and close Notepad.

To finish, find the file on your desktop and double-click on hola.html. Your default browser will automatically open showing the following appearance.

Hello world

Congratulations! You have created your first web page.

Difference between HTML, CSS and JavaScript

Before we get into the subject, it must be very clear what each language is used for.

According to the RAE (Royal Spanish Academy), a language can be defined as "A set of signs and rules that allows communication with a computer.". Don't confuse it with programming language: "A set of coded instructions that a computer interprets and executes directly". HTML is a markup language that defines a structure but holds no logic, while CSS and JavaScript are programming languages. You read that right! CSS is a programming language with all its properties such as variables, loops and conditionals. Later I'll back up this claim with references.

So that you understand what each element is, I'll use a metaphor close to your daily routine: Let's imagine a killer Robot that comes from the future; the skeleton is what keeps every part joined together and in order. That would be exactly what HTML is on a website.

HTML metaphor

To get used to its syntax you can look at a small example HTML code where you can see tags wrapping others.

<!doctype html>
<html lang="es">
    <head>
        <meta charset="UTF-8"/>
        <title>Tab text</title>
    </head>
    <body>
       My first website
    </body>
</html>

CSS

Style sheets, or CSS, would be the visual part of the Robot: the skin, the color, the hair... Decorative elements to please the human eye.

CSS metaphor

You indicate the tag that should be applied and, between braces ({}), the properties.

body {
    background-color: red;
    font-size: 2rem;
}

JavaScript

This programming language is what gives it life. It simply explains how to walk, when to draw the shotgun, what its goal is... without it, it would be a very expensive statue with the functionality of a paperweight.

JavaScript metaphor

document.querySelector('body').textContent = "bang!!!";
alert('bang!');

Don't let the simplicity of the example fool you. It's a complex language in constant evolution. There is even a professional dedicated exclusively to manipulating it, and they have their own name: frontend.

How the internet works

Before explaining the secrets of web development, we must know the ground we're going to walk on. Or at least have some minimal knowledge to know where to look when we run into problems.

Internet connection: You need a bridge between your computer and the internet. Telephone companies simplify the task for us by connecting us to the network, being the first point of entry themselves. On their part it involves human expense in installations, maintenance and constant technological evolution; making us pay a monthly fee to use their services.
TCP: Transmission Control Protocol is the protocol responsible for establishing a connection between 2 hosts and guaranteeing the sending of data, avoiding its loss and ensuring it is received in the same order.
IP: Internet Protocol is a number to identify devices on a network. Machines haven't been baptized by anyone, but they are given a random number each time they connect, as if it were a car license plate. It is necessary to communicate computers on the immense network that is the internet. As a curiosity, I'll tell you that IPv4 (for example 183.23.53.128) contains 4,294,967,296 possibilities (256 raised to the 4th power), while IPv6 (for example fd23:ea7e:3591:c608:fd3a:8e79:3b82:390b) increases to 340 sextillion (3 x 10 raised to the 40th power) combinations.
DNS: The Domain Name System is responsible for translating names into IP addresses, making it more human to browse the network. For example, the Firefox page has the IP address 63.245.208.212 (you can visit it by typing these numbers in your navigation bar). Can you imagine always remembering these numbers to get to the page? For that very reason, aliases, or shortcuts, were invented, which are popularly known as Domains. Going to firefox.com is equivalent to typing its IP. Throughout the world, different servers are distributed which synchronize with each other so that you can remember those addresses you visit so often without hardly having to remember anything.
HTTP: The Hypertext Transfer Protocol is the language that different devices on the internet use to communicate. Such as the conversation that can exist between your browser and the website you visit: response codes (does the 404 error ring a bell?), request methods (GET, POST...) and headers.

When your browser wants to view the Firefox page it sends this text.

GET / HTTP/1.1
Host: firefox.com
User-Agent: Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:69.0) Gecko/20100101 Firefox/69.0
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
Accept-Language: es,en-US;q=0.7,en;q=0.3
Accept-Encoding: gzip, deflate, br
DNT: 1
Upgrade-Insecure-Requests: 1
Connection: keep-alive
Pragma: no-cache

And the browser receives in response other information along with the HTML code.

HTTP/2.0 301 Moved Permanently
server: Apache/2.4.6 (CentOS)
x-backend-server: redirect1.webapp.mdc1.mozilla.com
cache-control: max-age=300
content-type: text/html; charset=iso-8859-1
date: Sat, 21 Sep 2019 08:34:08 GMT
location: https://www.mozilla.org/firefox/new/?redirect_source=firefox-com
accept-ranges: bytes
x-cache-info: caching
content-length: 272
X-Firefox-Spdy: h2

Here would go all the HTML code from the server

Hosting: If you want your website to be visited, the ultimate goal of any site, you're going to need a computer that is always turned on, waiting for a browser to request the website (through HTTP). Do we put it at home? What if the power goes out? What will the bill be at the end of the month? That's why there are companies that offer you hosting. We rent a room, or a folder, to copy our HTML code. They take care of maintenance, paying the electricity and always having the best internet connection. They also complement us with other equally useful services such as email accounts, security certificates (SSL) and CMS auto-installations (like WordPress).

Where we stand

Web Design has lived through a constant evolution that even today continues unstoppable. The most aggressive changes have been related to the techniques for laying out sites, since new devices and formats have never stopped being born. Who would have told Tim Berners-Lee, creator of HTML, that his pages should adapt to a pocket format with our Smartphones or that they would play videos?

Tim Berners-Lee

Here are the most important historical moments you should know.

1991: First Web, in black and white with an academic format.
1993: Insertion of Tables and images. The first layouts begin.
1995: JavaScript is born to avoid limitations thanks to Netscape (current Mozilla Foundation). The first version of PHP comes to light, the beginning of HTML generators by a machine (the beginnings of the Backend).
1996: The CSS standard is established to provide styles. A small company, FutureWare, develops an animation format called Flash.
2004: The possibility of creating simple Grids (layout 2.0).
2011: First version of the Bootstrap Framework.
2012: Responsive Web Design.
2014: Flex, modern Grid and multimedia (layout 3.0).
2019: Progressive Web App (PWA).
2022: Subgrid (layout 3.1).

Work tools

For this course you'll need to install a series of tools on your computer. All will be Free or free of charge.

HTML Editor: A quick solution can be Sublime Text, although if you prefer you can also use any other one that is ready to work with HTML files: Webstorm, VSCode, Emacs... You can check the following article with the best editors for web design.
Web Browser: I recommend Firefox Developer Edition for how complete its web development tools are. Although I would recommend testing your websites in the 3 most popular HTML engines.
Blink with 75% usage: Chrome, Edge or Chromium.
Webkit with 21% usage: Safari, Otter or Epiphany.
Quantum with 4% usage: Firefox.
Bookmarks: Keep the following links handy:
All the explanations and usage examples about all HTML tags or CSS styles, you can find them on the Mozilla Developer website.
To check the compatibility of each tag with the different browsers, you have Can I Use.
To read a description of each tag you can consult HTML Living Standard.
Image editor: such as Photoshop, Gimp, Affinity Photo... to optimize images.
Pencil and paper: You're going to need to take many notes. You can also use a pen or a goose quill.

If you've made it this far without big tears running down your cheeks from wide yawns, congratulations! Shall we start laying out? Move on to the next lesson.