Html básico

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.
Neste artigo serão mostrados os principais códigos HTML necessários para
você criar sua página web básica.
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>
Corpo do documento. Texto, imagens, tabelas, etc. </body>
</html>
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> <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>
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/> 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.
<br/> Fusce quis magna ante, sed tempus lorem. Sed lacus ipsum,
tempus ac aliquet a, dignissim in neque. Praesent sed lorem id augue
dignissim lacinia.
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> <a href="arquivo.zip"><img
src="download.png" alt="Download"/></a> <a
href="www.meusite.com.br"><h1>Titulo 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>
<li>Terceiro item</li> </ol> <ul> <li>Primeiro item</li> <li>Segundo 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> <dd>Definicao do item 2</dd> <dt>Item 3</dt>
<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.
Leia mais em: http://www.devmedia.com.br/html-basico-codigos-html/
16596

Html básico

Recommandé

Recommandé

Contenu connexe

Tendances

Tendances (20)

En vedette

En vedette (20)

Similaire à Html básico

Similaire à Html básico (20)

Plus de Devmedia

Plus de Devmedia (7)

Dernier

Dernier (6)

Html básico