HTML b�sico: C�digos HTML para Iniciantes

Por que eu devo ler este artigo:HTML (abreviaç�o de Hypertext Markup Language) � uma linguagem de marcaç�o utilizada na estruturaç�o de p�ginas web. Sua sintaxe � bastante simples e, assim como a XML � baseada em tags, que representam os diversos elementos de uma p�gina, como imagens e links.

Ao acessar uma p�gina web atrav�s de um navegador, ele � capaz de interpretar o c�digo HTML e renderiz�-lo de forma compreens�vel para o usu�rio final, exibindo textos, bot�es etc. com as configuraç�es definidas por meio das diversas tags que essa linguagem disp�e.

Atualmente a HTML encontra-se na vers�o 5 e � padronizada pelo W3C (World Wide Web Consortium), uma organizaç�o internacional respons�vel por estabelecer padr�es para a internet, como a linguagem XML, CSS e o SOAP.

Estrutura b�sica de uma p�gina HTML

A estrutura b�sica de uma p�gina HTML pode ser vista na Listagem 1, na qual podemos ver as principais tags que s�o necess�rias para que o documento seja corretamente interpretado pelos browsers.


<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<title>Document</title>
</head>
<body>
<!-- Conte�do -->
</body>
</html>

Listagem 1. Estrutura b�sica de uma p�gina HTML

Linha 1: a instruç�o DOCTYPE deve ser sempre a primeira a aparecer em uma p�gina HTML para indicar ao browser qual vers�o da linguagem usada. Nesse caso, estamos trabalhando com a HTML5, vers�o na qual a declaraç�o do DOCTYPE � bastante simples, como podemos ver na listagem;

Linhas 2 e 10: abertura e fechamento da tag html, que delimita o documento. Sendo assim, todas as demais tags da p�gina devem estar nesse espaço;

Linhas 3 e 6: abertura e fechamento da tag head, que define o cabeçalho do documento. O conte�do nesse espaço n�o � vis�vel no browser, mas cont�m instruç�es sobre seu conte�do e comportamento. Dentro dessa tag, por exemplo, podem ser inseridas folhas de estilo e scripts;

Linha 4: a tag meta, nesse caso, especifica qual conjunto de caracteres (character set ou charset) ser� usado para renderizar o texto da p�gina. O UTF-8 cont�m todos os caracteres dos padr�es Unicode e ASCII, sendo, portanto, o mais utilizado em p�ginas web. A mesma tag meta, por�m com outros atributos, pode ser utilizada para outros fins, como na SEO (Search Engine Optimization);

Linha 5: a tag title define o t�tulo da p�gina, aquele que aparece na janela/aba do navegador;

Linhas 7 e 9: abertura e fechamento da tag body, marcando o espaço no qual deve estar contido o conte�do visual da p�gina. As demais tags que representam texto, bot�es etc. devem ser adicionadas nesse intervalo;

Linha 8: nessa linha podemos observar a sintaxe para adiç�o de coment�rios em HTML. Esse trecho n�o � renderizado pelo browser.

Para desenvolver p�ginas com HTML basicamente precisamos de um editor de texto, como o Bloco de Notas do Windows, Nano e Emacs no Linux, entre v�rios outros. H�, ainda, editores com opç�es avançadas, como recursos de syntax hilghligt e autocomplete, como Sublime Text, Atom, Brackets e Visual Studio Code, que podem ser usados para editar documentos HTML.

Independentemente do editor utilizado, podemos simplesmente copiar o c�digo da Listagem 1 para um deles e salvar o arquivo com extens�o .html. Em seguida, podemos abrir esse arquivo em um browser.

Tags do HTML

Um documento HTML � composto por tags, as quais possuem um nome e aparecem entre os sinais < e >, como vimos na Listagem 1, por exemplo, em <html> e <head>. Naquele exemplo tamb�m vimos que algumas tags precisam ser abertas e fechadas, como em <body> </body>. Nesse caso, a tag de fechamento deve conter a barra / antes do nome. Outras, por�m, n�o precisam ser fechadas, como a tag <meta>. Nesses casos, a adiç�o da barra / no final da pr�pria tag, como vemos na Linha 4 da Listagem 1 � opcional.

Outro aspecto importante da linguagem � que ela � case insensitive, ou seja, n�o leva em consideraç�o a diferença entre letras mai�sculas e min�sculas. No entanto, o uso apenas de letras min�sculas tem sido utilizado como padr�o pelos desenvolvedores.

Al�m dessas caracter�sticas, as tags tamb�m possuem atributos, como vemos na Linha 4 da Listagem 1, na qual a tag meta possui o atributo charset=�UTF-8�. Essas propriedades definem algumas caracter�sticas adicionais de cada tag e em alguns casos s�o obrigat�rias. Seus valores devem aparecer entre aspas duplas, como no exemplo acima, ou em aspas simples, caso o pr�prio valor contenha aspas duplas.

Cabeçalhos do HTML

Cabeçalhos s�o normalmente utilizados para identificar p�ginas e seç�es e possuem apar�ncia diferenciada do restante do texto. No HTML h� seis n�veis de cabeçalhos/t�tulos que podem ser utilizados por meio das tags h1, h2, h3, h4, h5 e h6, sendo h1 o maior/mais relevante e h6 o menor/menos relevante.

De acordo com as regras de SEO, � recomendado que uma p�gina possua apenas uma tag <h1> que indique seu assunto, pois essa tag informa aos motores de busca qual sua principal palavra-chave.

Na Listagem 2 podemos ver como utilizar essas tags, e na Figura 1 temos o resultado desse c�digo. Para testar esse c�digo, basta copi�-lo para o espaço indicado na Linha 8 da Listagem 1 e salvar o documento com a extens�o .html.


<h1>T�tulo de n�vel 1</h1>
<h2>T�tulo de n�vel 2</h2>
<h3>T�tulo de n�vel 3</h3>
<h4>T�tulo de n�vel 4</h4>
<h5>T�tulo de n�vel 5</h5>
<h6>T�tulo de n�vel 6</h6>

Listagem 2. Diferentes n�veis de cabeçalho

Execute o c�digo

Figura 1. Diferentes n�veis de cabeçalho

Par�grafos no HTML

Par�grafos de texto s�o gerados na HTML por meio das tags . Esse � um exemplo de tag cuja disposiç�o na tela se d� em forma de bloco, ou seja, um par�grafo � posto sempre abaixo do outro.

O c�digo da Listagem 3 adiciona tr�s par�grafos, que podem ser visualizados na Figura 2.


<p>Primeiro par�grafo do texto.</p>
<p>Segundo par�grafo do texto.</p>
<p>Terceiro par�grafo do texto.</p>

Listagem 3. Adicionando par�grafos

Execute o c�digo

Figura 2. Par�grafos visualizados na p�gina

Imagens no HTML

A inserç�o de imagens em uma p�gina HTML pode ser feita por meio da tag img, que recebe no atributo src o endereço do arquivo a ser carregado. Al�m desse, outros dois atributos importantes s�o o alt, que indica um texto alternativo que ser� exibido caso o arquivo n�o possa ser carregado, e title, que indica o texto que aparecer� como tooltip ao passar o mouse sobre a figura.

O c�digo da Listagem 4 insere uma imagem a partir do arquivo avatar.png, localizado na mesma pasta do arquivo HTML, e uma tag img apontando para um arquivo inexistente. Observe na Figura 3 que enquanto a primeira aparece corretamente, a segunda � exibida com um �cone de erro o texto alternativo que informamos. Note, ainda, que sobre a primeira figura est� sendo exibido o tooltip definido no atributo title.


<img src="avatar.png" alt="Texto alternativo" title="Avatar" />
<img src="arquivo_inexistente.jpg" alt="Texto alternativo" title="Outra figura"/>

Listagem 4. Inserindo imagem

Execute o c�digo

Figura 3. Exemplos de uso da tag img

No caso da tag img, ainda temos as tags figure e figcaption que ser�o abordadas no t�pico de HTML Sem�ntico, por�m, a sua estrutura � simples e � representada pelo c�digo abaixo:


<figure>
   <img src="http://meusite.com.br/assets/imagem.jpg" alt="Imagem">

   <figcaption>Legenda da figura 1</figcaption>
</figure>

Listagem 4.1. Imagem com legenda

Links no HTML

Links s�o normalmente utilizados para direcionar o usu�rio para outras p�ginas, ou para outras partes da mesma p�gina. Nos dois casos, utilizamos a tag a, que possui o atributo href no qual indicamos o destino daquele link.

A Listagem 5 mostra como adicionar um link para outra p�gina, neste caso, indicada pelo arquivo pagina2.html.


<a href="pagina2.html">P�gina 2</a>

Listagem 5. Inserindo link

J� a Listagem 6 mostra como adicionar um link para um elemento na mesma p�gina. Nesse caso, ao clicar no link o browser mudar� o foco para o elemento que possui o atributo id igual �quele indicado no href.


<a href="#paragrafo3">Ir para o par�grafo 3</a>
<!--outros elementos-->
<p id="paragrafo3">Par�grafo no rodap�.</p>

Listagem 6. Inserindo link com id

Note tamb�m que nesse caso o href requer ainda o sinal de cerquilha (#) antes do id do elemento que ser� o foco do link.

Tabelas no HTML

Tabelas s�o elementos utilizados com frequ�ncia para exibir dados de forma organizada em linhas e colunas. No HTML, elas s�o formadas por tr�s tags b�sicas: table, para delimitar a tabela; tr, para indicar as linhas; e td para formar as colunas. A Listagem 7 mostra um exemplo simples de tabela com tr�s linhas e duas colunas, e seu resultado pode ser visto na Figura 4.


<table>
<tr>
<td>Linha 1, Coluna 1</td>
<td>Linha 1, Coluna 2</td>
</tr>
<tr>
<td>Linha 2, Coluna 1</td>
<td>Linha 2, Coluna 2</td>
</tr>
<tr>
<td>Linha 3, Coluna 1</td>
<td>Linha 3, Coluna 2</td>
</tr>
</table>

Listagem 7. Exemplo de uso de tabelas

Execute o c�digo

Figura 4. Exemplo de tabela com tr�s linhas e duas colunas

Existem ainda outras tr�s tags utilizadas para delimitar, de forma mais organizada, as partes da tabela: thead para o cabeçalho; tbody para o corpo; e tfoot para o rodap�. A Listagem 8 traz um exemplo de tabela mais complexa, utilizando todas as tags. Seu resultado � apresentado na Figura 5.


<table>
<thead>
<tr>
<th>Produto</th>
<th>Preço</th>
<th>Quantidade</th>
</tr>
</thead>
<tbody>
<tr>
<td>Feij�o</td>
<td>R$ 8,75</td>
<td>1</td>
</tr>
<tr>
<td>Arroz</td>
<td>R$ 4,99</td>
<td>2</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>Total</td>
<td></td>
<td>R$ 18,73</td>
</tr>
</tfoot>
</table>

Listagem 8. Tabela com cabeçalho e rodap�

Execute o c�digo

Figura 5. Tabela com cabeçalho e rodap�

Por padr�o, as tabelas n�o possuem bordas. Isso deve ser adicionado por meio das CSS.

Listas no HTML

Listas s�o elementos �teis para organizar e ordenar itens que est�o relacionados de alguma forma. No HTML � poss�vel criar tr�s tipos de listas: ordenadas (com a tag ol), n�o ordenadas (com a tag ul), e de definiç�o (por meio da tag dl).

Na Listagem 9 temos um exemplo de lista ordenada, enquanto a Listagem 10 traz um exemplo de lista n�o ordenada. Em seguida, a Figura 6 mostra o resultado dos dois c�digos. Observe que cada item das primeiras listas � definido pela tag li.


<ol>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ol>

Listagem 9. Lista ordenada

Execute o c�digo


<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>

Listagem 10. Lista n�o ordenada

Execute o c�digo

Figura 6. Listas ordenada e n�o ordenada

No caso das listas ordenadas temos o atributo type que permite especificar o tipo de marcador a ser usado: n�meros (padr�o), n�meros romanos ou letras.


<ol type="I">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ol>

Listagem 9.1. Lista ordenada por n�mero romano mai�sculo

Os valores permitidos para esse atributo s�o:

1 - n�meros (padr�o)
i - n�meros romanos min�sculos
I - n�meros romanos mai�sculos
a - letras min�sculas
A - letras mai�sculas

As listas de definiç�o t�m um comportamento um pouco diferente, uma vez que cada item � composto por um t�tulo (dt) e uma definiç�o (dd), semelhante ao que ocorre em dicion�rios, nos quais temos os verbetes e suas definiç�es. Na Listagem 11 temos um exemplo desse tipo de lista, com seu resultado ilustrado na Figura 7.


<dl>
<dt>T�tulo 1</dt>
<dd>Definiç�o 1</dd>
<dt>T�tulo 2</dt>
<dd>Definiç�o 2</dd>
<dt>T�tulo 3</dt>
<dd>Definiç�o 3</dd>
</dl>

Listagem 11. Exemplo de lista de definiç�o

Execute o c�digo

Figura 7. Listas de definiç�o

Formul�rios no HTML

Formul�rios s�o normalmente utilizados para integrar a p�gina HTML a algum processamento no lado servidor. Nesses casos, a p�gina envia dados para uma aplicaç�o (Java, PHP, .NET etc.), que os recebe, trata e retorna algum resultado.

No HTML, geralmente usamos a tag form para delimitar a �rea na qual se encontram os campos a serem preenchidos pelo usu�rio, a fim de serem enviados para processamento no back-end (enquanto a p�gina HTML � chamada de front-end da aplicaç�o).

A Listagem 12 mostra um exemplo de formul�rio com v�rios tipos de campos para entrada de dados e um bot�o para submet�-los ao servidor. Na Figura 8 vemos seu resultado.


<form action="salvar_dados.php" method="post">
<input type="text" placeholder="Digite aqui"> <br/>
<input type="checkbox">Checkbox <br/>
<input type="radio">Radio button <br/>
<input type="range"> <br/>
<input type="submit" value="Enviar">
</form>

Listagem 12. Formul�rio com campos

Execute o c�digo

Figura 8. Formul�rio para envio de dados

Formataç�o de texto

As tags de formataç�o de texto ajudam a destacar trechos da parte escrita da p�gina, seja para fins de SEO ou por requisitos do conte�do. Formataç�es como negrito e it�lico podem ser aplicadas com facilidade utilizando as v�rias tags dispon�veis para esse fim:

b e strong para negrito/texto forte;
i e em para it�lico/�nfase;
sup e sub para sobrescrito e subscrito, respectivamente;
ins e del para indicar trechos que foram inclu�dos ou removidos, respectivamente;
small para textos menores que o padr�o;
mark para texto destacado.

Apesar da tag e terem resultados visualmente id�nticos, eles t�m usos diferentes. A tag deve ser utilizada quando quer se destacar algo que � apenas visual, como por exemplo, deixar um link com mais vis�vel. A tag por sua vez, al�m de destacar o visual, d� um destaque sem�ntico ao texto, ent�o se o conte�do que voc� quer dar destaque � uma parte relevante do texto, utilize a tag . O mesmo vale para as tags e , onde a tag � utilizada apenas para formataç�o visual e a tag d� �nfase sem�ntica ao texto, n�o devendo ser utilizada para uso puramente est�tico.

Na Listagem 13 vemos exemplos de uso dessas tags, e seu resultado pode ser observado em seguida, na Figura 9.


<p>Texto em negrito com <b>bold</b> e <strong>strong</strong>.</p>
<p>Texto em it�lico com <i>italics<i> e <em>emphasis</em>.</p>
<p>Texto <sup>sobrescrito</sup> e <sub>subscrito</sub>.</p>
<p>Texto <ins>inserido</ins> e <del>exclu�do</del>.</p>
<p>Texto <small>pequeno</small> e <mark>destacado</mark>.</p>

Listagem 13. Tags de formataç�o de texto

Execute o c�digo

Figura 9. Textos com formataç�o especial

�udio no HTML

Com HTML tamb�m � poss�vel inserir �udio e v�deo nas p�ginas com facilidade. Para �udio, podemos utilizar a tag audio, da mesma forma que apresentada na Listagem 14.


<audio controls src="musica.mp3" >
Seu browser n�o suporta �udio.
</audio>

Listagem 14. Inserindo �udio

Na tag audio, o atributo src aponta para o arquivo de �udio que ser� executado (MP3, OGG ou WAV). J� o atributo controls indica que devem ser exibidos os controles de gerenciamento do �udio (bot�es play, pause etc.). Al�m dele, outros tamb�m merecem destaque: autoplay, para fazer com que o �udio seja executado assim que for carregado; loop, para que o �udio seja executado repetidas vezes.

Caso o browser n�o ofereça suporte a essa tag, o texto contido eu seu interior ser� exibido.

Tamb�m podemos informar mais de um arquivo de �udio (opç�es alternativas de formato, por exemplo). Nesse caso, precisamos utilizar a tag source, como no exemplo da Listagem 15.


<audio controls src="musica.mp3" >
<source src="musica.ogg" type="audio/ogg">
<source src="musica.mp3" type="audio/mpeg">
</audio>

Listagem 15. Inserindo �udio com a tag source

Dessa vez, os arquivos ser�o buscados na ordem em que aparecem na lista. Caso um n�o seja localizado ou n�o possa ser carregado, o browser buscar� imediatamente o pr�ximo.

A Figura 10 ilustra o resultado desses c�digos, com o controle de �udio exibido no browser. Note tamb�m que no topo da janela (na aba do navegador) � exibido um �cone informando ao usu�rio que essa p�gina est� executando um �udio.

Figura 10. �udio em execuç�o na p�gina

V�deo no HTML

Semelhante ao �udio, tamb�m podemos inserir v�deos nas p�ginas HTML utilizando a tag video, adicionada na HTML5, como na Listagem 16.


<video src="video.mp4" width="640" height="480" controls>
Seu browser n�o suporta v�deo HTML5.
</video>

Listagem 16. Inserindo v�deo

Dessa vez, al�m dos atributos j� vistos no �udio, tamb�m precisamos informar a largura (width) e a altura (height) do v�deo, a fim de mant�-lo adequado ao layout.

O c�digo da Listagem 17 pode ser utilizado quando desejarmos informar mais de um arquivo de v�deo como opç�es de carregamento, da mesma forma que vimos na tag audio. Nesse caso, os formatos suportados s�o MP4, WebM e Ogg.


<video width="640" height="480" controls>
<source src="video.webm" type="video/webm">
<source src="video.mp4" type="video/mp4">
</video>

Listagem 17. Inserindo v�deo

O resultado agora pode ser visto na Figura 11.

Figura 11. V�deo em execuç�o na p�gina

Div e Span no HTML

As tags div e span s�o duas das mais utilizadas no HTML, com objetivos distintos, por�m com grande import�ncia para a composiç�o do layout das p�ginas e formataç�o do texto.

As divs s�o normalmente utilizados para representarem containers para outros elementos, agrupando-os visualmente dentro de um bloco que pode conter dimens�es e posiç�o definidas. Por padr�o, uma div n�o possui apar�ncia caracter�sticas visuais definidas, isso precisa ser feito via CSS ao atribuir bordas, cores etc. Sua principal caracter�stica, no entanto, � que essa tag representa um elemento do tipo bloco, ou seja, que quando adicionado na p�gina, automaticamente gera uma nova linha no layout (semelhante a um par�grafo), ao inv�s de ser alocado lateralmente nos demais componentes.

O c�digo da Listagem 18 demonstra um uso b�sico das divs.


<input type="text" value="input 1">
<input type="text" value="input 2">
<div><input type="text" value="input 3"></div>
<div><input type="text" value="input 4"></div>

Listagem 18. Inserindo divs

Execute o c�digo

Perceba no resultado da Figura 12 que, enquanto os dois primeiros inputs s�o dispostos lateralmente, os dois �ltimos aparecem um abaixo do outro, uma vez que est�o dentro de divs diferentes.

Figura 12. Exemplos de uso das divs

J� a tag span � um elemento do tipo inline, ou seja, quando adicionado na p�gina, ele � inserido lateralmente ap�s os demais componentes, diferente das divs que s�o elementos do tipo bloco.

Elementos span, por padr�o, tamb�m n�o possuem nenhuma caracter�stica visual definida, isso precisa ser feito via CSS para destacar ou aplicar uma formataç�o especial para um certo trecho do texto. Por exemplo, a Listagem 19 demonstra o uso do span em dois casos. No primeiro, a tag n�o conta com nenhum atributo adicional; no segundo, adicionamos a ela uma apar�ncia diferenciada via CSS.


<p>Este � um texto com um <span>
trecho em destaque</span>.</p>
<p>
Este � um texto com um <span
>
trecho em destaque</span>.
</p>

Listagem 19. Trabalhando com span

Execute o c�digo

O resultado pode ser visto na Figura 13 e, como esperado, no primeiro caso n�o conseguimos perceber nenhuma diferença visual devido ao uso do span.

Figura 13. Exemplo de uso do span

Neste artigo vimos uma breve introduç�o � linguagem HTML para inicinates, uma das bases do desenvolvimento web e que atualmente tamb�m vem sendo amplamente utilizada na criaç�o de aplicativos mobile h�bridos. Portanto, conhecer essa linguagem � fundamental para quem deseja desenvolver aplicaç�es

HTML b�sico - c�digos HTML

Aprenda os princípios básicos para confecção de um site em HTML para que você possa fazer o seu primeiro site.

Estrutura b�sica de uma p�gina HTML

Tags do HTML

Cabeçalhos do HTML

Par�grafos no HTML

Imagens no HTML

Links no HTML

Tabelas no HTML

Listas no HTML

Formul�rios no HTML

Formataç�o de texto

�udio no HTML

V�deo no HTML

Div e Span no HTML

Artigos relacionados