Aprenda os princípios básicos para confecção de um site em HTML para que você possa fazer o seu primeiro site.
Serão apresentadas as tags (marcadores de código responsáveis por uma função específica) para incluir objetos como imagens, links, títulos, tabelas. Veremos ainda como formatar textos, definir o plano de fundo da página, além de uma tabela contendo as principais cores utilizadas.
Atualmente existem vários editores com interface gráfica que permitem criar páginas web facilmente, arrastando e soltando componentes na tela. Porém, conhecendo os códigos que estão por trás da interface (que os editores geram quando montamos a interface manualmente), é possível criar páginas usando um simples editor de texto como o Bloco de Notas do Windows. Basta salvar o arquivo com extensão “.html” e manter a sintaxe correta da linguagem. Por exemplo, o conteúdo da página deve estar entre as tags <html> e </html>.
Observação importante: toda tag aberta deve ser fechada em algum ponto. Para isso se usa a barra “/” dentro de uma tag semelhante a de abertura. Por exemplo, a tag <table> deve ser fechada com a tag </table>. Existem ainda as tags que são abertas e fechadas em um único marcador, por exemplo, a tag <br/> que representa uma quebra de linha, não precisa de outra de fechamento, pois ela fecha a si própria com a barra posta no final.
Estrutura básica de uma página HTML
Uma página HTML deve manter sempre uma estrutura básica, a partir da qual são inseridos outros elementos com formatações avançadas. A Listagem 1 mostra a estrutura base de toda página HMTL.
Listagem 1: Estrutura básica da página HTML
<html><head><title>Título da página</title></head> <body>ento. Texto, imagens, tabelas, etc. </body> </htmlCorpo do docum>
O conteúdo da tag <title>, ou seja, o título da página, será exibido no topo da janela/aba do browser. Quando a página for adicionada aos favoritos, esse título também será sugerido como atalho.
Atributos da tag <body>
Através da tag <body> (corpo) podemos definir propriedades gerais para toda a página. Por exemplo, é possível determinar a cor do plano de fundo da página, ou usar uma imagem para essa função, e a cor dos links em várias situações (visitados, não visitados, clicados).
Os atributos dessa tag são os seguintes:
- bgcolor: cor do plano de fundo. Deve ser usado o código hexadecimal ou o nome da cor (conforme tabela vista mais adiante), assim como em todos os atributos de cores.
- background: URL de uma imagem para ser usada como plano de fundo.
- link: cor natural dos links, ou seja, enquanto eles ainda não foram clicados (o padrão é azul).
- alink: cor dos links quando são clicados (o padrão é vermelho).
- vlink: cor dos links após serem visitados (o padrão é roxo).
- text: cor do texto da página.
A listagem a seguir mostra um exemplo de definição de alguns desses atributos.
Listagem 2: Definindo atributos da tag body
<body text=”black” bgcolor=”blue” link=”yellow”></body>
Cores
Ao atribuir valores aos atributos de cores da página (plano de fundo, cor do texto, etc), é possível usar o nome das cores em inglês (apenas algumas cores) ou o código hexadecimal destas. Usando o código hexadecimal é possível aplicar várias cores além das que possuem nome padrão, que são listadas abaixo.
| Cor | Nome (no html) | Código hexadecimal |
| Preto | black | #000000 |
| Branco | white | #ffffff |
| Azul | blue | #0000ff |
| Amarelo | yellow | #ffff00 |
| Verde | green | #009000 |
| Lima | lime | #00ff00 |
| Marrom | maroon | #800000 |
| Oliva | olive | #00ffff |
| Azul celeste | aqua | #ff00ff |
| Lilás | fuchsia | #808080 |
| Cinza | gray | #000080 |
| Azul escuro | navy | #000080 |
| Roxo | purple | #800080 |
| Verde escuro | teal | #008080 |
| Cinza claro | silver | #c0c0c0 |
| Vermelho | red | #ff0000 |
Tabela 1: Nomes e códigos hexadecimais das principais cores
Cabeçalhos HTML
A linguagem HTML permite adicionar cabeçalhos (ou títulos) no corpo da página, diferenciando-os do restante do texto pelo tamanho da fonte. Para isso existem as tags “h”, que possuem seis níveis, de 1 a 6. A seguir tem-se um exemplo de utilização dos seis níveis de cabeçalho, seguido do resultado do código na Figura 1.
Listagem 3: Utilizando cabeçalhos
<h1>Título de nível 1</h1><h2>Título de nível 2</h2><h4>Título de nível 4</h4><h3>Título de nível 3</h3> <h5>Título de nível 5</h5><h6>Título de nível 6</h6>
Figura 1: Cabeçalhos visualizados no browser
É possível alterar o alinhamento dos títulos definindo seu atributo “align” com um dos seguintes valores: center, left e right, conforme se vê na Listagem 4.
Listagem 4: Alinhando os cabeçalho
<h1 align=”center”>Título de nível 1 - centralizado</h1><h2 align=”left”>Título de nível 2 - esquerda</h2><h3 align=”right”>Título de nível 3 - direita</h3>
Figura 2: Cabeçalhos alinhados
A tag <font> - definindo o tamanho e cor do texto
Usando a tag <font> é possível alterar algumas das características primordiais do texto como o tipo da fonte (Arial, Times New Roman, etc), a cor e o tamanho. Essas propriedades são alteradas com a definição dos atributos face, color e size, respectivamente, da tag font.
O código seguinte é um exemplo de uso desses atributos, logo após são apresentados os resultados.
Listagem 5: Uso da tag <font>
<font face="Arial" size="3" color="blue">Arial 3 Azul</font><font face="Times" size="4" color="green">Times 4 Verde</font><font face="Courier" size="5" color="red">Courrier 5 Vermelho</font>
Figura 3: Características da fonte alteradas
Formatação adicional do texto
Existem algumas tags bastante úteis que permitem aplicar uma formatação a um trecho do texto, apenas adicionando as tags de abertura e fechamento antes e depois do texto a ser formatado, assim como foi visto para a tag <font>.
- <b></b>: marca o texto como em negrito (bold).
- <i></i>: marca o texto como em itálico (italics).
- *<u></u>: marca um texto como sublinhado (underlined).
- *<s></s> ou <strike></strike>: marca um texto como riscado.
- <sub></sub>: marca um texto como subscrito.
- <sup></sup>: marca o texto como sobrescrito.
- *<center></center>: centraliza o texto.
Observação: as tagas marcadas com asterisco (*) foram descontinuadas na versão 5 da HTML, ou seja, seu uso não é mais indicado.
É possível ainda usar essas tags em conjunto, devendo-se apenas manter a ordem de abertura e fechamento, como será mostrado na Listagem 6.
Listagem 6: Usando tags de formatação de texto
<b>negrito</b> <i>itálico</i> <sub>subscrito</sub> <sup>sobrescrito</sup> <b><i>negrito e itálico</i></b>
O que gera o seguinte resultado, quando aberto no browser:
Figura 4: Aplicação de formatações no texto
Parágrafos e quebras de linha
Geralmente, quando escrevemos textos mais extensos, é preciso dividi-los em parágrafos, de forma a separar e organizar melhor as informações. Durante a codificação (“escrita” do código) de uma página HTML, podemos usar a tecla Enter para organizar o texto no editor, mas essas quebras de linha não serão interpretadas pelo navegador. Para isso é preciso utilizar as devidas tags <br/> para quebrar a linha e passar para a linha de baixou, ou <p></p> para definir um parágrafo.
Por questão de organização do código, é indicado usar a definição correta de parágrafos no lugar das quebras de linha.
Por exemplo, a listagem a seguir mostra um texto extenso com várias quebras de linha onde deveriam haver divisões de parágrafos. Em seguida é mostrada a forma correta de estruturar o código para o mesmo texto.
Listagem 7: Texto com várias quebras de linha
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin gravida sagittis porta. In feugiat porta erat. Quisque tempor dictum mauris.<br/>vestibulum lacus eget odio fermentum viverra. Pellentesque hendrerit pulvinar venenatis. Donec ut odio vel velit iaculis hendrerit. Sed pharetra augue eget ipsum faucibus lobortis. <br/>Donecsce quis magna ante, sed tempus lorem. Sed lacus ipsum, tempus ac aliquet a, dignissim in neque. Praesent sed lorem id augue dignissim lacinia.F u
O resultado é o seguinte:
Figura 5: Texto com quebras de linha no browser
Agora o mesmo texto definido em parágrafos.
Listagem 8: Texto com vários parágrafos
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin gravida sagittis porta. In feugiat porta erat. Quisque tempor dictum mauris.</p><p>Donec vestibulum lacus eget odio fermentum viverra. Pellentesque hendrerit pulvinar venenatis. Donec ut odio vel velit iaculis hendrerit. Sed pharetra augue eget ipsum faucibus lobortis.</p><p>Fusce quis magna ante, sed tempus lorem. Sed lacus ipsum, tempus ac aliquet a, dignissim in neque. Praesent sed lorem id augue dignissim lacinia.</p>
Agora, vemos que o resultado é inclusive visualmente mais organizado (Figura 6), como deve ser o texto realmente.
Figura 6: Texto dividido em parágrafos
Sabendo como dividir o texto corretamente em parágrafos, podemos ainda alterar seu alinhamento para atender às diversas situações que surgem no dia-a-dia. Isso pode ser feito com a definição do atributo “align” da tag <p>, com um dos seguintes valores: left (alinhado à esquerda), right (alinhado à direita), Center (centralizado) e justify (justificado).
O valor padrão para essa propriedade é “left”, então todo texto fica naturalmente alinhado à esquerda.
Imagens
Inserir imagens na página é uma das necessidades mais comuns e, por esse motivo, também é consideravelmente simples de ser feito. Para esse fim existe a tag <img>, cujos atributos são mostrados a seguir:
- src: caminho completo do arquivo de imagem (incluindo a extensão do arquivo).
- alt: texto alternativo para a imagem, geralmente uma descrição da mesma.
- width: largura da imagem em pixels.
- height: altura da imagem em pixels.
Observação: os atributos src e alt são obrigatórios para a tag <img>. Além disso, a tag deve ser fechada nela mesma, ou seja, a sintaxe mínima é <img src=”caminho” alt=”texto”/>.
A seguir temos um exemplo de código para a inserção de imagens seguido do resultado visualizado no browser.
Listagem 9: Inserindo imagens
<img src="Java_05.png" alt="Imagem 1"/><img src="Java_05.png" alt="Imagem 2" width="100"/><img src="Java_05.png" alt="Imagem 3" height="200"/>
Figura 7: Exemplos de imagens com a tag img
É importante fazer algumas observações:
- Caso não sejam definidas a largura e/ou a altura, a imagem será adicionada à página em seu tamanho original.
- Ao alterar apenas uma das dimensões, a outra é redefinida proporcionalmente. Caso se deseje alterar tanto a largura quanto a altura com valores específicos, os dois atributos devem ser definidos.
Criando links
Como em toda página web, podemos precisar inserir links para outras páginas, para downloads, e-mails, etc. A HTML possui uma tag chamada âncora (anchor, em inglês) representada por <a> que nos permite criar links facilmente, apenas definindo seu atributo “href” com o endereço para o qual o usuário deve ser redirecionado.
A sintaxe básica da tag <a> é apresentada na listagem a seguir, onde criamos um link para o endereço “http://www.meusite.com.br” com o texto “Meu Link”, onde o usuário pode clicar para ser redirecionado.
Listagem 10: Sintaxe de criação de links
<a href="http://www.meusite.com.br">Meu Link</a>
No lugar do texto “Meu Link” podem ser inseridos outros elementos como, por exemplo, imagens, títulos, etc. Basta manter a ordem de abertura e fechamento correta das tags.
No atributo “href” informamos o caminho para o qual o link deve levar o usuário, o que não necessariamente precisa ser outro site. Podemos também criar links para download de arquivos ou para envio de emails. Para downloads, basta indicar o caminho do arquivo a ser baixado e para enviar emails, é preciso usar mailto:email_desejado. A seguir veremos vários exemplos de links para sites e arquivos, usando imagens e textos comuns.
Listagem 11: Exemplos de links
<a href="www.meusite.com.br">Meu Link</a><a href="arquivo.zip">Baixar arquivo</a>png" alt="Download"/></a> <a href="www.meusite.com.br"><h1>Titulo<a href="arquivo.zip"><img src="download.como link</h1></a>
O que gera o seguinte resultado:
Figura 8: Links na página
Conhecendo a sintaxe da tag <a>, basta utilizar as demais tags corretamente e criar os arranjos desejados com imagens, títulos, formatando a fonte, entre outras modificações.
Listas
Outra estrutura bastante comum de ser utilizada em páginas web é a lista, que serve pra organizar um conjunto de itens, sequencialmente ou não. As listas podem ser ordenadas ou não, ou seja, cada item podem ou não ter um número/letra/símbolo que o identifique sequencialmente.
As tags para listas ordenadas e não ordenadas são, respectivamente, <ol></ol> e <ul></ul>. Entre essas marcações devem ser inseridos os itens, que levam a tag <li></li>, conforme os exemplos abaixo.
Listagem 12: Usando listas
<ol><li>Primeiro item</li><li>Segundo item</li></ol> <ul> <li>Prime<li>Terceiro item</li >iro item</li> <li>Segundo item</li><li>Terceiro item</li></ul>
Nesse código temos duas listas, uma ordenada e uma não ordenada, que no browser têm a seguinte aparência.
Figura 9: Lista numerada e não numerada
Existe ainda um terceiro tipo de lista: a lista de definição, que como o nome sugere, é usada para apresentar itens com um título seguido de sua definição. A tag principal desse tipo de lista é a <dl></dl>, enquanto os itens são compostos por duas tags: <dt></td> para o título e <dd></dd> para a definição. O exemplo a seguir torna mais fácil a compreensão desse elemento.
Listagem 12: Uso de lista de definição
Figura 10: Lista de definição vista no browser
Tabelas
As tabelas, por muito tempo foram usadas incorretamente para montar toda a estrutura do site. Ou seja, a página era uma grande tabela e todo seu conteúdo era organizado dentro das células. Isso era usado pela facilidade de se montar o layout usando essa estrutura, afinal, as tabelas tinham suas células bem definidas e fáceis de manipular.
Porém, forma não era correta e isso foi sendo visto ao longo dos anos e passou-se a utilizar o conceito de “tableless” (sem tabelas). Começou-se a incentivar o uso das tags corretas para estruturação do layout e das tabelas para seu objetivo real: apresentação de dados “tabulares”.
As tabelas são criadas sobre a tag base <table></table> e é dividida em linhas <tr></tr> e colunas <td></td>. A ordem de hierarquia é essa: table > tr > td, uma dentro da outra. Ou seja, a tabela é dividida em linhas que, por sua vez, são divididas em colunas.
A tag table possui o atributo “border”, que define a borda das células com um número inteiro representando a espessura. A Listagem 13 apresenta um exemplo básico de tabela.
Listagem 13: Exemplo de tabela
<dl><dt>Item 1</dt><dd>Definicao do item 1</dd><dt>Item 2</dt>item 2</dd> <dt>Item 3</dt><dd>Definicao d o <dd>Definicao do item 3</dd></dl>
Nessa tabela temos duas linhas (tr) com três colunas (td) cada, como vemos na figura a seguir.
Figura 11: Tabela com duas linhas e três colunas
HTML 5
A versão mais recente da linguagem HTML, a HTML5 trouxe várias novidades para o desenvolvimento web. Novas tags foram inseridas, bem como outras foram descontinuadas. Com essa versão, objetiva-se obter a maior compatibilidade entre browsers (cross browser), que até então era um dos principais problemas dos desenvolvedores web front-end (responsáveis pela página em si, o lado cliente).
Com o auxílio das folhas de estilo e da Javascript (linguagem de script responsável por dar mais dinamismo à página HTML), que não são foco deste artigo, é possível montar páginas bastante complexas, com efeitos diversos. Porém, muitas vezes o código que funcionava em um browser, era incompatível com os demais, o que fazia com que os designers precisassem escrever vários códigos para obter a compatibilidade, quando conseguiam. Muitas vezes se tornava impossível adicionar uma funcionalidade a uma página, pois essa não poderia ser visualizada em todos os navegadores. Em alguns casos, porém, o usuário ficava “preso” a um navegador, se quisesse utilizar um determinado recurso, precisaria usar o browser sugerido.
Esse foi o principal objetivo do lançamento das mais recentes versões das “Web Standards”, tecnologias base da web (HTML, CSS e Javascript). Com elas, espera-se obter total (ou maior) compatibilidade entre os navegadores, inclusive aqueles de dispositivos móveis, cuja quantidade de usuários vem crescendo rapidamente.
Referências e sugestões de estudos complementares
HTML Básico
Sem Comentários