What is HTML and what is its functionality? – WAU

HTML is a fundamental part of web standards, in conjunction with other technologies such as CSS and JavaScript. Since this language is the basis for building pages, it is important to know it in order to create our own website.

Web pages are information dissemination tools with the most varied purposes: from spread knowledge until generate business opportunities. Whatever the purpose, they all have in common the language with which they are built: the HTML.

As we will see, it is not a programming language and it is quite simple to understand. Read on and see how building a web page is easier than it looks!

Check out the subjects that we will deal with in this post:

What is HTML and what is it for?

HTML is the acronym in English for Hypertext Markup Language, which we translate into London as a hypertext markup language.

Despite the complicated names, HTML is nothing more than a language used to create web pages using bookmarks (tags) and attributes, which define how content should be presented in a web browser.

But you must be wondering: what is a hypertext? This concept refers to a text with interconnected blocks containing words, images, sounds, tables and other elements. In addition, they can have paths that point to other hypertexts, paths known as hyperlinks, hyperlinks or just links.

The creation of HTML is attributed to Tim Berners-Lee, the inventor of World Wide Web.

The idea was to create an environment in which scientists could publicize your research so that your colleagues could easily consult them. Berners-Lee ended up creating HTML as standard language to prepare these documents.

Since its implementation in the early 1990s, HTML has undergone several improvements and today it is the Foundation blogs, e-commerces, social networks and all kinds of pages accessible from a web browser.

What are the main elements of HTML?

Now that you know what HTML is, let’s look at the main markers that define the function of the elements that are part of the page.

But first we need to remember that these tags are identified with a less than sign (). Most tags need to be closed, which is represented by a slash (/) between the “<“ sign and the tag name.

Everything will be clearer with the following examples.

Paragraph (

)

The tag

it must be opened and closed to define a paragraph.

Este é um parágrafo em HTML.

Header (

,

,

,

,

,

)

Heading tags, or header tags, help to create a hierarchy between parts of the text, separating it into sections. O

is the most relevant heading, followed by

,

and so on until the

, of lesser importance.

Título principal

Parágrafo de introdução.

1. Primeiro intertítulo

Parágrafo da primeira seção.

Mais um parágrafo da primeira seção.

2. Segundo intertítulo

Parágrafo da segunda seção.

Mais um parágrafo da segunda seção.

3. Terceiro intertítulo

Parágrafo da terceira seção.

3.1. Intertítulo dentro da terceira seção

Parágrafo da seção 3.1.

3.2. Mais um intertítulo dentro da terceira seção

Parágrafo da seção 3.2.

Image ()

The image tag does not need to be closed, as its content is defined in the tag itself with the “src” attribute.

Anchor ()

The anchor tag defines a link to another page. The “href” attribute determines the destination of this link.

Arquitetura da Informação

Sorted list (

    )

An ordered list is displayed with numbered elements. Each element must be tagged with the tag

  • (list item).

    1. SEO
    2. Links patrocinados
    3. Redes sociais

    Unordered list (

      )

    The unordered list tag shows elements as bulletpoints.

    • Automação de marketing
    • Geração de leads
    • E-mail marketing

    Table (

    )

    The table tag displays information in the form of rows and columns. Inside the tag

    , we use the tags

    to represent the lines,

    to represent the headers and

    to represent each cell.

    Nome Sobrenome
    Jonah Berger
    Ann Handley
    Neil Patel

    Comment ()

    We use this tag to write a comment that helps to understand the code. Everything written between the markers it will not be shown to the user.

    O HTML é fundamental para quem deseja criar um site na web.

    What is the basic structure of such a document?

    We saw several elements, but now we will know how to place them inside HTML code. Like any web standard, it is necessary to follow some rules for the construction of these codes.

    We start with the statement , to inform the web browser that the document in question is an HMTL.

    Then we open the tag , which we will need to close at the end. Inside, we add , which should contain the page’s metadata (data about data), such as the title that will appear in the browser tab (), calls to external files and other crucial meta tags for SEO work.</p> <p>It’s important to include the tag so that the browser correctly displays certain characters that we use in London, such as accents and cedilla.</p> <p>Finally, we open the tag , where we add the part of the HTML document that contains the elements visible to the user.</p> <pre class="wp-block-code"><code> <title>Minha primeira página

    Minha primeira página

    Meu primeiro parágrafo!

    How to create your first HTML code?

    To create HTML code, you only need one editor plain text (Notepad, for example) and a web browser (Chrome, Opera, Firefox, Safari, etc.) to see how your page will look. Professional developers use code editors more specialized, but we can proceed initially with a simple editor.

    The first step is to create a new file and save it with the .html extension. For this tutorial, we can name it index.html.

    Then, paste the code that we showed in the previous section with the basic structure of an HTML and save the file.

    
    
    	
    		
    		Minha primeira página
    	
    	
    		

    Minha primeira página

    Meu primeiro parágrafo!

    Now just open the file in your favorite browser and you’re done, you just created your first HTML code!

    What is the relationship between HTML, CSS and JavaScript?

    We understand that HTML is the structure of a web page, but how to format the style of its elements? To configure fonts, colors, alignment, in short, the way the HTML components will be presented, we use the CSS, acronym for Cascading Style Sheets, or cascading style sheets.

    Although it is possible to describe the styles within the HTML code itself, it is recommended that HTML make a call to one or more individual CSS files. Thus, the code is more organized, since it isolates the structure of the style.

    CSS is based on selectors and declarations with properties and values. That is, we choose the HTML elements to which we want to apply the styles and declare what the properties of these components will be.

    See in this example the paragraph selector (p), with a statement that defines the color, font family and font size.

    p {
    	color: white;
    	font-family: verdana;
    	font-size: 15px;
    }

    There is also a third layer for the development of web pages, dedicated to creating dynamic behaviors: the JavaScript. This, which in fact is a programming language – not to be confused with Java -, allows to give more interactivity to the page and improve the user experience.

    With it, we can choose what happens when the visitor clicks on a certain part of the page, presses a certain key, scrolls the page and much more. The applications are numerous and depend basically on the creativity of who is developing it.

    Even JavaScript is excellent for those who want to learn to program, since the syntax of the language is quite easy. In addition, it is possible to make immediate tests, viewing the result of your code directly in the web browser.

    Did you notice how HTML is simpler than it looks? So continue your studies, because despite the simplicity, this is a very rich subject, with many other tags and attributes that would not fit in a single post.

    Did you like the article? Then check out this application that can be useful for your day to day. Learn how to create your own HTML email signature!

    By |2020-03-07T02:56:44+00:00March 7th, 2020|Digital Marketing|