Welcome to the first blog post, I'm L.Maverick and it's my pleasure to explain to you what HTML is and what it's for, let's get started!


But after all...

What is HTML?

HTML is part of almost every website we see on the internet, it stands for HiperText Markup Language, it is practically the basic component of every website considered by many to be the "skeleton" of the website, which is why today nowadays HTML is almost always accompanied by 2 partners, the famous CSS and JavaScript. I'll explain in more detail what each one is.

For this site, for example, that you are looking at, the HTML is the general content that you can see, such as the text and the image, but it is not restricted to that, it also has videos, sounds, music, buttons and so on. To make it easier, think of HTML as everything that contains content.

CSS, on the other hand, is the beautification of your website, such as the background color, the text font, image size, visual effects (it can be animated too), literally the aesthetics of the website.

JavaScript is a programming language that together with the two above makes the website more dynamic and gives a more lively look to the website, for example Youtube, if you enter the computer and hover over a video, it will show a small snippet, this is done by JS (Short for JavaScript), or when you search for something and some options appear below, it is also JS.


Where can I develop in HTML?

HTML is so simple that you can even use notepad, there are other tools that allow you to test the code in real time like Visual Studio Code created by Microsoft which is one of the most used. If you don't want VS Code you can use Atom, Notepad++ and Eclipse (Some are available for Windows, Mac and Linux).


 It's important to say that HTML is not considered a programming language, it's a markup language, so in order not to be ugly, don't say "I program HTML", say "I develop in HTML", this can avoid embarrassing moments with people who pay attention to it.

To develop in HTML you will need to know the main tags (they can be called elements too), it creates hierarchy, organizes and structures the content of your site, as if it were drawers in a closet, in which each drawer you put something like the logo of your site, the text of the article and the illustrative images. Each one in a corner and organizing them all between sections, paragraphs and titles.

What are TAGS?

Tags are commands that define the structure of the page, define whether it will be a paragraph, title, image, whether it will have a line break or not, all tags have an opening and almost all of them have a closing, the opening consists of "<(tag you want )>" and the closing in "</(tag you want)>", an example I will use is the paragraph tag (p), I want the following sentence to appear "This is a paragraph", for this I will use the code <p>That's a paragraph</p>, it looks like this:

That's a paragraph

But if you test this code at this exact moment, it won't work for 2 reasons, 1 of them is that you have to save the file in the right extension, which is .html and the second reason is that you didn't put the main tag and more most important, see below.

Basic Structure

For any HTML code to work, it must have the DOCTYPE declaration, which in the case of the most current version, HTML 5, just put <!DOCTYPE html>, after that we must open the main html tag, the <html> tag itself that must have the closing at the end of the code.

Now let's put 2 more tags that cannot be missing, the <head> tag that will receive metadata, external links, site title, and can also receive the CSS file. After the head there is the <body> tag, it is literally the body of the site, where you put all the information that will be visible and rendered by the browser such as the paragraph, articles, images and so on.

An addendum is that for you to put the title of your site that will appear next to the icon, you have to use the <title> tag, see the example below of a basic HTML structure:

<!DOCTYPE html>
<html>
    <head>
        <title> (título) </title>
        (você pode colocar o CSS aqui)        
    </head>

    <body>
	  (código geral fica aqui)
    </body>
</html>


But there is a little thing missing, which is more notable for Brazilians and Latin America, the site would not read special characters like "ç", "ã" and "é", and to solve this it is very simple, we put the metadata tag (<meta>) and put the charset (basically says which language pattern we will use) as UTF-8, which can read "Ç" that it has here in Brazil.

Now the code starts to take shape, adding this to solve many problems the code looks like this:

<!DOCTYPE html>
<html>
    <head>
        <title> (título) </title>
        <meta charset="utf-8"/>
        (você pode colocar o CSS aqui)
    </head>

    <body>
	  (código geral fica aqui)
    </body>
</html>


 So we have the base code needed on every site, but you won't just know that, on the site you can find explanations of new tags and what they are for, but don't worry, I'll show you some.

Tags that can't be missing in HTML

There are more than 140 tags inside HTML, but not all of them are used, but the most used tags that can't be missed are:

  •     <head> = as I mentioned above, the head you can put titles and metadata of your page;
  •     <title> = defines the title of your page;
  •     <body> = the body of your page, where you structure your content;
  •     <h1>,<h2>,<h3>,<h4>,<h5>and <h6> = Tags to define a title and subtitles, ranging from 1 to 6, with h1 being the most important title and h6 the least important , this is important for SEO, search engines read the titles and define it as main points about what you write;
  •     <p> = Paragraph tag;
  •     <a> = Link tag, next to the href="” attribute you can create both external and internal links;
  •     <header> = a header-specific division;
  •     <section> = defines a section of your page;
  •     <article> = a specific division for the article;
  •     <div> = defines a division;
  •     <footer> = a specific division for the footer;
  •     <nav> = defines a navigation area such as a menu;
  •     <table> = create a table;
  •     <ol> = defines an ordered list of numbers or letters;
  •     <ul> = defines an unordered list with symbols;
  •     <li> = is each option in the list, the items in it;
  •     <form> = defines a form;
  •     <input> = defines the form fields;
  •     <textarea> = defines an area for the user to enter text;
  •     <button> = create a button;
  •     <img> = tag that allows you to place images in your project.

How did HTML come about?

Now a little bit of HTML history, initially HTML was a project called ENQUIRE started in 1980 by British physicist Tim Berners-Lee. At first he used the Pascal programming language, but years later with the help of Robert Cailliau they managed to implement a communication between user and server using the HTTP protocol, resulting in the most important thing on the web today, the famous World Wide Web, or for those closest to you, www.

 
There were other markup languages ​​at the time that competed with HTML, even HTML itself inherited some tags from other languages ​​such as SGML that was used for structuring documents, but over time and with the ease of creating public networks, HTML grew and has become the standard language for the web.

Okay, now what is the relationship between...

HTML, CSS and JavaScript

As much as HTML has evolved, it is still just a web markup language, limited to this function, but the site must have more layers, and for that CSS and JavaScript are present.


CSS

Starting with the CSS that is responsible for giving our document a visual shape, it can do a lot of things like apply spaces in areas, change background color, place gradient with different colors, change text font, and several other visual effects, some can be animated too. When you use CSS on a certain text, div or any other element people often say that they are styling it, so if you need to say you are going to change color or something, just say "I will style".

JavaScript

Among the 3 that are essential for web development, JavaScript is the only one that is a programming language, JS can make the site more dynamic, and it solves many of the things that might be impossible in HTML and CSS. As I already mentioned if you go to Youtube and try to preview a video without clicking on it, just place your mouse over the video and the magic happens, this preview is JavaScript, many of the interactive things that appear on the page JS is involved . A tip, think of HTML as the content, CSS as beautification and JS as interactivity.

What are the Advantages and Disadvantages of knowing HTML?


If you haven't been interested in HTML yet, I'll tell you some reasons to use it, starting with the advantages:

  1.     Easy to learn;
  2.     Easy to use;
  3.     There are many tutorials on Youtube and articles on the web;
  4.     HTML is easy to develop;
  5.     rapid development
  6.     It has templates that can simplify your development time;
  7.     It is free;
  8.     Widely used;
  9.     Supported in almost all browsers, if not all;
  10.     Easy for novice developers to learn.


Now some of the disadvantages of using HTML:

  1.     It doesn't show errors so it's harder to identify depending on the error;
  2.     HTML structuring can be confusing;
  3.     Need to write a lot of code for a little simple things;
  4.     You have to update if obsolete tags stop being supported, if you don't update your site it may stop working at some points (very rare to happen but it's possible);
  5.     The security offered by HTML is quite limited;
  6.     HTML can create more static and simple pages, for pages that need to have a lot of dynamics it can be work and HTML can be very limited.

 
We finally reached the end, this was the first article on the site, if you want to comment something or suggest you can comment below, hearing your opinion will be a great pleasure, I also ask you to help me if you can by following me on Instagram by clicking here.


Thank you very much and until next time!

Interested in books? Games? Anime or manga? Then visit our partner, Mistérios Nerd, they have several interesting subjects that are of interest to you, visit by clicking here, it's free!
 
Translated by google translator