O que é HTML?
HTML é a sigla em inglês para Hypertext Markup Language, que traduzimos para o português como linguagem de marcação de hipertexto.
O HTML é parte fundamental das normas da web, em conjunto com outras tecnologias como o CSS e o JavaScript . Já que essa linguagem é a base para a construção de páginas, é importante conhecê-la para criarmos o nosso próprio site na internet.
As páginas web (sejam sites, blogs ou landing pages) são ferramentas de divulgação de informação com as mais variadas finalidades, desde difundir conhecimento até gerar oportunidades de negócio.
Seja qual for o intuito, todas elas têm em comum a linguagem com a qual são construídas, o HTML.
Como veremos, não se trata de uma linguagem de programação e é bastante simples de entender.
Apesar dos nomes complicados, o HTML nada mais é que uma linguagem usada para criar páginas web por meio de marcadores (tags) e atributos, que definem como o conteúdo deve ser apresentado em um navegador web.
O que é um hipertexto?
Esse conceito faz referência a um texto com blocos interconectados contendo palavras, imagens, sons, tabelas e outros elementos. Além disso, eles podem ter caminhos que apontam para outros hipertextos, caminhos esses conhecidos como hiperligações, hyperlinks ou apenas links.
Quem Criou o HTML?
A criação é atribuída a Tim Berners-Lee, o inventor da World Wide Web.
A ideia era criar um ambiente em que cientistas pudessem divulgar suas pesquisas para que seus colegas pudessem consultá-las com facilidade.
Berners-Lee acabou criando o HTML como linguagem padrão para elaborar esses documentos.
Desde a sua implementação, no início dos anos 1990, o HTML passou por diversas melhorias e hoje é o alicerce de blogs, e-commerces, redes sociais e todo o tipo de página acessível de um navegador web.
Marcadores:
Vamos ver os principais marcadores que definem a função dos elementos que fazem parte da página.
Mas antes precisamos lembrar que essas tags são identificadas com um sinal de menor que (<), seguido pelo nome da tag e um sinal de maior que (>).
A maior parte das tags precisa ser fechada, o que representamos com uma barra (/) entre o sinal “<“ e o nome da tag.
Exemplos de Marcadores:
Parágrafo (<p>)
A tag <p> deve ser aberta e fechada para definir um parágrafo.
<p>Este é um parágrafo em HTML.</p>
Cabeçalho (<h1>, <h2>, <h3>, <h4>, <h5>, <h6>)
As heading tags, ou tags de cabeçalho, ajudam a criar uma hierarquia entre as partes do texto, separando-o em seções.
O <h1> é o cabeçalho de maior relevância, seguido pelo <h2>, <h3> e assim sucessivamente até o <h6>, de menor importância.
<h1>Título principal</h1>
<p>Parágrafo de introdução.</p>
<h2>1. Primeiro intertítulo</h2>
<p>Parágrafo da primeira seção.</p>
<p>Mais um parágrafo da primeira seção.</p> <h2>2. Segundo intertítulo</h2>
<p>Parágrafo da segunda seção.</p>
<p>Mais um parágrafo da segunda seção.</p> <h2>3. Terceiro intertítulo</h2>
<p>Parágrafo da terceira seção.</p>
<h3>3.1. Intertítulo dentro da terceira seção</h3>
<p>Parágrafo da seção 3.1.</p>
<h3>3.2. Mais um intertítulo dentro da terceira seção</h3>
<p>Parágrafo da seção 3.2.</p>
Imagem (<img>)
A tag de imagem não precisa ser fechada, já que o seu conteúdo é definido na própria tag com o atributo “src”.
<img src="https://programartudo.blogspot.com/png">
Âncora (<a>)
A tag de âncora define um link para outra página. O atributo “href” determina o destino desse link.
<a href="https://programartudo.blogspot.com/">programartudo</a>
Lista ordenada (<ol>)
Uma ordered list, ou lista ordenada, é exibida com elementos numerados.
Cada elemento deve ser marcado com a tag <li> (list item).
<ol> <li>Blog</li> <li>programação</li> <li>Postagens</li> </ol>
Lista não ordenada (<ul>)
A tag unordered list, ou lista não ordenada, mostra os elementos como bulletpoints.
<ul> <li>Marketing</li> <li>empregos</li> <li> Marketing digital</li> </ul>
Tabela (<table>)
A tag de tabela exibe informações no formato de linhas e colunas.
Dentro da tag <table>, usamos as tags <tr> para representar as linhas, <th> para representar os cabeçalhos e <td> para representar cada célula.
<table> <tr> <th>Nome</th> <th>Sobrenome</th> </tr> <tr> <td>Sergio</td> <td>Dantas</td> </tr> <tr> <td>Anne</td> <td>Harlley</td> </tr> <tr> <td>Nestor </td> <td>Endril</td> </tr> </table>
Comentário (<!– –>)
Usamos esta tag para escrever algum comentário que ajude no entendimento do código.
Tudo que estiver escrito entre os marcadores <!– e –> não será mostrado ao usuário.
<p>O HTML é fundamental para quem deseja criar um site na web.</p>
<!-- Este é um parágrafo em HTML -->
Vimos diversos elementos, mas agora vamos saber como colocá-los dentro de um código HTML. Como qualquer padrão da web, é necessário seguir algumas regras para a construção desses códigos.
Começamos com a declaração <!DOCTYPE html>, para informar ao navegador web que o documento em questão é um HMTL.
Em seguida, abrimos a tag <html>, que precisaremos fechar no fim. Dentro dela, adicionamos <head>, que deverá conter os metadados (dados sobre dados) da página, como o título que vai aparecer na aba do navegador (<title>), chamadas para arquivos externos e outras meta tags cruciais para um trabalho de SEO.
É importante incluir a tag <meta charset=”utf-8″> para que o navegador exiba corretamente certos caracteres que utilizamos em português, como acentos e cedilha.
Por fim, abrimos a tag <body>, em que adicionamos a parte do documento HTML que contém os elementos visíveis para o usuário.
Como criar código em HTML?
Para criar um código HTML, você só precisa de um editor de texto simples (o Bloco de Notas, por exemplo) e de um navegador web (Chrome, Opera, Firefox, Safari, etc.) para visualizar como vai ficar a sua página.
Desenvolvedores profissionais usam editores de código mais especializados, mas podemos seguir inicialmente com um editor simples.
O primeiro passo é criar um novo arquivo e salvá-lo com a extensão .html
Podemos dar o nome de index.html
Depois, cole o código que mostramos na seção anterior com a estrutura básica de um HTML e salve o arquivo.
Exemplo de "Hello, World!" em HTML:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Primeira página</title> </head> <body> <h1>"Hello, World!"</h1> </body> </html>
Agora é só abrir o arquivo no seu browser preferido e pronto, você acabou de criar o seu primeiro código HTML!
Se gostou do conteúdo, considere pagar-me um café :
Curso de HTML Que eu recomendo:
Curso de criação de sites profissionais:
Curso de HTML, CSS e JavaScript:
Canal no Youtube:
Comentários
Postar um comentário
Obrigado pelo seu feedback!