HTML is the language that is used today to define the elements of web pages, including the texts that are part of it, headers, links, redirects and other such things. In short, HTML makes your page understandable by the browser of the guy who is accessing it. Below is a very introductory and simplified summary on the topic.
Here are some important concepts so that the rest of the text makes sense.
The creation of a home page on the internet is something that has become practically mandatory for companies that want to spread their image and products among people from all corners of the world. This process of creating a page, although it takes some time to perfect the skills, is much easier than it sounds, and it is not necessary to have years of programming courses to be able to create a page to promote a product.
Already solving some common misconceptions here, HTML is not a programming language, not even a hacking tool, that friend of yours who knows how to see the source code of the page is not necessarily a hacker and being a programmer or a web designer does not mean being a genius of computing. In fact, it's all much simpler and more practical than what you're thinking it is, so don't worry about details like that just yet.
A web page is composed of texts and certain “tags” of a markup language commonly known as HTML (Hyper Text Markup Language). It is very simple, and aims to format the displayed text, give semantic meaning to certain excerpts and create links between pages.
As with other markup languages, the developer must write his HTML following the standard syntax of the language, so that it is compatible with the browsers available on the market today and can be interpreted and rendered correctly. This code can be written using simple text editors such as Windows Notepad, but we highly recommend using a more complete editor such as VS Code or Sublime Text.
When a browser renders a web page, it reads the text and looks for tags or special symbols and renders those parts with more specific settings. These tags are the HTML tags. For example, if text is to be rendered as bold, it will be written as <b>my text</b>, where the <b> tag means “bold”, or “bold” in English. In addition to the visual aspect, a tag can also redirect to other pages (<a>) and to show images (<img>).
Tags are normally specifiable in pairs, delimiting text to be marked as something different from the rest of the page and giving meaning to that content, but there are some individual tags, such as the <img> tag, that do not have their respective tag. closure.
Tags are identified by being surrounded by <> or </>. The tag data is specified between the <> signs. In the case of tags that have a closing, their pair must have the / symbol at the end.
The generic format of a tag is: <mytag>text</mytag>. See some examples:
<b>This text is in bold</b> while this <i>word</i> is in italics.<h3>This command generates a title of size 3</h3>this text <br> will have a line breakAs with programming languages and other markup languages, there are certain structures that identify parts of a page, such as the following:
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
Area for page content
</body>
</html>
<!DOCTYPE html> tag tells us that the code below is in HTML5 format<html> tag indicates that everything inside it is part of an HTML page<head> tag indicates that everything inside it will only be in the header, and will be processed before the page body content, including CSS, JavaScript, charset definitions and other such things<body> tag indicates that what is inside it is part of the page body, such as texts, images and linksThe formatting of a text is given using some types of specific tags, such as headers (<h1>, <h2>, among others), paragraph tags (<p>), tags that represent some specific element in the text (such as <br>, <hr>, etc) and tags that change the default style of a piece of text (such as the <b> and <i> tags).
Headers graphically represent a text heading. More than that: they semantically represent a title, indicating what the title and subtitles of an article are. Its usage is like this:
<h1>Title</h1>
<p>A bit of text</p>
<h2>Subtitle</h2>
<p>Some more text</p>
The more sense the title makes in relation to the text, the better, both for SEO and to help the reader settle in.
Titles are represented by <hn> tags, where n is a number from 1 to 6, with <h1> being the most relevant title in the text and <h6> the least relevant.
Paragraphs are snippets of general content text that are inserted as the content of the <p> tag. Just as <h1> tags represent a title of text, <p> tags represent paragraphs of text. Its usage is like this:
<p>My first paragraph of extremely long text that I'm using for testing that has no semantic value at all</p>
<p>My second paragraph of extremely long text that I am using for testing and which has no semantic value at all</p>
<p>My third paragraph of extremely long text that I am using for testing and which has no semantic value at all</p>
<br> tags are tags that provide a text break anywhere you want. If you, for example, have code similar to this:
this text <br> will have a line break
You will get a line break similar to this:
There are several HTML text formatting tags. I won't venture too much into this for now, but some of the most used are:
| Command | Syntax | Function |
|---|---|---|
| Bold | <b>text</b> | Apply bold style |
| Italics | <i>text</i> | Make the text italic |
| Underline | <u>text</u> | Leave the text underlined |
| Strong | <strong>text</strong> | Visually it does the same thing as bold, but semantically represents something more relevant than the rest of the text |
| Emphasis | <em>text</em> | Visually it does the same thing as italics, but semantically representing something more relevant than the rest of the text |
You must now be thinking: “why are there tags that do the same thing but have different semantic meanings?” There are several reasons, one of which is that the <b> and <i> tags existed since the first versions of HTML and were used both to present something more relevant than the rest of the text and to style a page, which would cause a big mess these days, with search engines understanding that website menus have relevant words for text and stuff like that. One of the tasks of a developer, regardless of technology, is to create things that make sense, not just work.
This was just a short introductory summary to help you get acquainted with the world of HTML and the internet. Next week there will be one of those about tables, links and images.
So, did you like it? Was there any doubt? Tell me in the comments 😊😄❤️
O HTML é a linguagem que hoje é usada para definir os elementos de páginas web, incluindo os textos que fazem parte dela, os cabeçalhos, os links, os redirecionamentos e outras coisas do tipo. Em resumo, o HTML faz a sua página ser compreendida pelo navegador do cara que está acessando ela. Aqui embaixo tem um resumo bem introdutório e simplificado sobre o tema.
Aqui tem alguns conceitos importantes para que o resto do texto faça sentido.
A criação de uma home page na internet é algo que se tornou praticamente obrigatório para empresas que queiram divulgar sua imagem e produtos entre pessoas de todos os cantos do mundo. Esse processo, de criação de uma página, embora leve certo tempo para aperfeiçoar as habilidades, é muito mais fácil do que parece, e não é necessário possuir anos de cursos de programação para ser capaz de criar uma página para divulgação de produto.
Já resolvendo alguns equívocos comuns aqui, HTML não é uma linguagem de programação, nem mesmo uma ferramenta de hackers, aquele seu amigo que sabe ver o código fonte da página não é necessariamente um hacker e ser um programador ou um webdesigner não significa ser um gênio da computação. Na verdade, tudo é muito mais simples e prático do que o que você está pensando que é, então não se preocupe com detalhes como esse por enquanto.
Uma página web é composta de textos e de certas “tags” de uma linguagem de marcação conhecida comumente como HTML (Hiper Text Markup Language). Ela é bem simples, e tem como objetivo formatar o texto exibido, dar sentido semântico a determinados trechos e criar ligações entre as páginas.
Assim como em outras linguagens de marcação, o desenvolvedor deve escrever seu HTML seguindo a sintaxe padrão da linguagem, para que ele seja compatível com os navegadores disponíveis hoje no mercado e possa ser interpretado e renderizado corretamente. Esse código pode ser escrito usando editores de texto simples, como o notepad do Windows, mas é altamente recomendável que se utilize um editor mais completo, como o VS Code ou o Sublime Text.
Quando um navegador renderiza uma página na internet, ele lê o texto e procura por tags ou por símbolos especiais e renderiza essas partes com configurações mais específicas. Essas tags são as tags HTML. Por exemplo, se um texto tem que ser renderizado como negrito, ele será escrito como <b>meu texto</b>, onde a tag <b> significa “bold”, ou “negrito” em inglês. Além do aspecto visual, uma tag também pode redirecionar para outras páginas (<a>) e para mostrar imagens (<img>).
As tags normalmente são especificáveis em pares, delimitando um texto a ser marcado como algo diferente do resto da página e dando sentido a esse conteúdo, mas existem algumas tags individuais, como a tag <img>, que não possuem sua respectiva tag de fechamento.
As tags são identificadas por serem envolvidas por <> ou </>. Entre os sinais <> são especificados os dados da tag. No caso de tags que possuem fechamento, o seu par deve possuir ao final o símbolo /.
O formato genérico de uma tag é: <minhatag>texto</minhatag>. Veja alguns exemplos:
<b>Este texto está em negrito</b> enquanto esta <i>palavra</i> está em itálico.<h3>Este comando gera um título de tamanho 3</h3>esse texto <br> vai ter uma quebra de linhaAssim como em linguagens de programação e outras linguagens de marcação, existem certas estruturas que identificam partes de uma página, como as seguintes:
<!DOCTYPE html>
<html>
<head>
<title>Título da página</title>
</head>
<body>
Área para conteúdo da página
</body>
</html>
<!DOCTYPE html> nos diz que o código abaixo está no formato HTML5<html> indica que tudo que estiver dentro dela faz parte de uma página HTML<head> indica que tudo que está dentro dela ficará apenas no cabeçalho, e será processado antes do conteúdo do corpo da página, incluindo CSS, JavaScript, definições de charset e outras coisas do tipo<body> indica que o que estiver dentro dela faz parte do corpo da página, como textos, imagens e linksA formatação de um texto é dada usando alguns tipos de tags específicas, como cabeçalhos (<h1>, <h2>, entre outros), tags de parágrafo (<p>), tags que representam algum elemento específico no texto (como <br>, <hr>, etc) e tags que alteram o estilo padrão de um trecho do texto (como as tags <b> e <i>).
Os cabeçalhos graficamente representam um cabeçalho de um texto. Mais do que isso: eles representam semanticamente um cabeçalho, indicando qual é o título e os subtítulos de um artigo. Sua utilização é assim:
<h1>Título</h1>
<p>Um pouco de texto</p>
<h2>Subtítulo</h2>
<p>Mais algum texto</p>
Quanto mais sentido o título fizer em relação ao texto, melhor, tanto para SEO quanto para ajudar o leitor a se ambientar.
Os títulos são representados por tags <hn>, onde n é um número que vai de 1 a 6, sendo o <h1> o título mais relevante do texto e o <h6> o menos relevante.
Parágrafos são trechos de texto de conteúdo geral que são inseridos como conteúdo da tag <p>. Assim como as tags <h1> representam um título de um texto, as tags <p> representam parágrafos do texto. Sua utilização é assim:
<p>Meu primeiro parágrafo de texto extremamente longo que eu estou usando para teste e que não possui valor semântico nenhum</p>
<p>Meu segundo parágrafo de texto extremamente longo que eu estou usando para teste e que não possui valor semântico nenhum</p>
<p>Meu terceiro parágrafo de texto extremamente longo que eu estou usando para teste e que não possui valor semântico nenhum</p>
As tags <br> são tags que fornecem uma quebra de texto em qualquer lugar que você queira. Se você, por exemplo, tiver um código semelhante a esse:
esse texto <br> vai ter uma quebra de linha
Você vai ter uma quebra de linha semelhante a essa:
Existem diversas tags de formatação de texto em HTML. Não vou me aventurar muito nisso por enquanto, mas algumas das mais usadas são:
| Comando | Sintaxe | Função |
|---|---|---|
| Negrito | <b>text</b> | Aplica o estilo negrito |
| Itálico | <i>text</i> | Deixa o texto em itálico |
| Sublinhado | <u>text</u> | Deixa o texto sublinhado |
| Strong | <strong>text</strong> | Visualmente faz a mesma coisa do negrito, mas representando semanticamente algo mais relevante que o resto do texto |
| Emphasis | <em>text</em> | Visualmente faz a mesma coisa do itálico, mas representando semanticamente algo mais relevante que o resto do texto |
Você agora deve estar pensando: “por que existem tags que fazem a mesma coisa mas que tem sentidos semânticos distintos?” Existem diversos motivos, um deles é que as tags <b> e <i> existiam desde as primeiras versões do HTML e serviam tanto para apresentar algo mais relevante que o resto do texto quanto para estilizar uma página, o que causaria uma grande confusão nos dias de hoje, com mecanismos de busca entendendo que menus de sites tem palavras relevantes para o texto e outras coisas do tipo. Uma das tarefas de um desenvolvedor, independente da tecnologia, é criar coisas que façam sentido, e não apenas que funcionem.
Esse foi só um pequeno resumo de introdução para te ajudar a se ambientar no mundo do HTML e da internet. Semana que vem ainda vai vir um desses sobre tabelas, links e imagens.
E então, gostou? Ficou alguma dúvida? Conta pra mim nos comentários 😊😄❤️