HTML Básico

HTML
HTML
bsico
cdigos
Aprenda os princpios bsicos para confeco de um site em

HTML para que voc possa fazer o seu primeiro site.
Neste artigo sero mostrados os principais cdigos HTML necessrios para voc criar
sua pgina web bsica.
Sero apresentadas as tags (marcadores de cdigo responsveis por uma funo
especfica) para incluir objetos como imagens, links, ttulos, tabelas. Veremos ainda como
formatar textos, definir o plano de fundo da pgina, alm de uma tabela contendo as
principais cores utilizadas.
Atualmente existem vrios editores com interface grfica que permitem criar pginas web
facilmente, arrastando e soltando componentes na tela. Porm, conhecendo os cdigos que
esto por trs da interface (que os editores geram quando montamos a interface
manualmente), possvel criar pginas usando um simples editor de texto como o Bloco de
Notas do Windows. Basta salvar o arquivo com extenso .html e manter a sintaxe correta
da linguagem. Por exemplo, o contedo da pgina deve estar entre as tags <html> e
</html>.
Observao 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 so abertas e fechadas em
um nico marcador, por exemplo, a tag <br/> que representa uma quebra de linha, no
precisa de outra de fechamento, pois ela fecha a si prpria com a barra posta no final.
Estrutura bsica de uma pgina HTML

Uma pgina HTML deve manter sempre uma estrutura bsica, a partir da qual so inseridos
outros elementos com formataes avanadas. A Listagem 1 mostra a estrutura base de
toda pgina HMTL.
Listagem 1: Estrutura bsica da pgina HTML
<html>
<head>
<title>Ttulo da pgina</title>
</head>
<body>
Corpo do documento. Texto, imagens, tabelas, etc.
</body>
</html>
O contedo da tag <title>, ou seja, o ttulo da pgina, ser exibido no topo da janela/aba do
browser. Quando a pgina for adicionada aos favoritos, esse ttulo tambm ser sugerido
como atalho.
Atributos da tag <body>

Atravs da tag <body> (corpo) podemos definir propriedades gerais para toda a pgina. Por
exemplo, possvel determinar a cor do plano de fundo da pgina, ou usar uma imagem
para essa funo, e a cor dos links em vrias situaes (visitados, no visitados, clicados).
Os atributos dessa tag so os seguintes:
bgcolor: cor do plano de fundo. Deve ser usado o cdigo 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 no foram clicados (o padro
azul).
alink: cor dos links quando so clicados (o padro vermelho).
vlink: cor dos links aps serem visitados (o padro roxo).
text: cor do texto da pgina.
A listagem a seguir mostra um exemplo de definio 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 pgina (plano de fundo, cor do texto, etc),
possvel usar o nome das cores em ingls (apenas algumas cores) ou o cdigo
hexadecimal destas. Usando o cdigo hexadecimal possvel aplicar vrias cores alm das
que possuem nome padro, que so listadas abaixo.
Cor
Nome (no html)
Cdigo 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
Lils
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 cdigos hexadecimais das principais cores
Cabealhos HTML
A linguagem HTML permite adicionar cabealhos (ou ttulos) no corpo da pgina,
diferenciando-os do restante do texto pelo tamanho da fonte. Para isso existem as tags h,
que possuem seis nveis, de 1 a 6. A seguir tem-se um exemplo de utilizao dos seis
nveis de cabealho, seguido do resultado do cdigo na Figura 1.
Listagem 3: Utilizando cabealhos
<h1>Ttulo de nvel 1</h1>
Figura 1: Cabealhos visualizados no browser

possvel alterar o alinhamento dos ttulos definindo seu atributo align com um dos
seguintes valores: center, left e right, conforme se v na Listagem 4.
Listagem 4: Alinhando os cabealho
<h1 align=center>Ttulo de nvel 1 - centralizado</h1>
<h2 align=left>Ttulo de nvel 2 - esquerda</h2>
<h3 align=right>Ttulo de nvel 3 - direita</h3>
Figura 2: Cabealhos alinhados
A tag <font> - definindo o tamanho e cor do

texto
Usando a tag <font> possvel alterar algumas das caractersticas primordiais do texto
como o tipo da fonte (Arial, Times New Roman, etc), a cor e o tamanho. Essas propriedades
so alteradas com a definio dos atributos face, color e size, respectivamente, da tag font.
O cdigo seguinte um exemplo de uso desses atributos, logo aps so 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: Caractersticas da fonte alteradas
Formatao adicional do texto

Existem algumas tags bastante teis que permitem aplicar uma formatao 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 itlico (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.
Observao: as tagas marcadas com asterisco (*) foram descontinuadas na verso 5 da
HTML, ou seja, seu uso no mais indicado.
possvel 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 formatao de texto
<b>negrito</b> <i>itlico</i> <sub>subscrito</sub> <sup>sobrescrito</sup> <b><i>negrito e
itlico</i></b>
O que gera o seguinte resultado, quando aberto no browser:
Figura 4: Aplicao de formataes no texto
Pargrafos e quebras de linha

Geralmente, quando escrevemos textos mais extensos, preciso dividi-los em pargrafos,
de forma a separar e organizar melhor as informaes. Durante a codificao (escrita do
cdigo) de uma pgina HTML, podemos usar a tecla Enter para organizar o texto no editor,
mas essas quebras de linha no sero 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 pargrafo.
Por questo de organizao do cdigo, indicado usar a definio correta de pargrafos no
lugar das quebras de linha.
Por exemplo, a listagem a seguir mostra um texto extenso com vrias quebras de linha
onde deveriam haver divises de pargrafos. Em seguida mostrada a forma correta de
estruturar o cdigo para o mesmo texto.
Listagem 7: Texto com vrias 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 pargrafos.
Listagem 8: Texto com vrios pargrafos
<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 pargrafos

Sabendo como dividir o texto corretamente em pargrafos, podemos ainda alterar seu
alinhamento para atender s diversas situaes que surgem no dia-a-dia. Isso pode ser
feito com a definio do atributo align da tag <p>, com um dos seguintes valores: left
(alinhado esquerda), right (alinhado direita), Center (centralizado) e justify (justificado).
O valor padro para essa propriedade left, ento todo texto fica naturalmente alinhado
esquerda.
Imagens
Inserir imagens na pgina uma das necessidades mais comuns e, por esse motivo,
tambm consideravelmente simples de ser feito. Para esse fim existe a tag <img>, cujos
atributos so mostrados a seguir:
src: caminho completo do arquivo de imagem (incluindo a extenso do arquivo).
alt: texto alternativo para a imagem, geralmente uma descrio da mesma.
width: largura da imagem em pixels.
height: altura da imagem em pixels.

Observao: os atributos src e alt so obrigatrios para a tag <img>. Alm disso, a tag deve
ser fechada nela mesma, ou seja, a sintaxe mnima <img src=caminho alt=texto/>.
A seguir temos um exemplo de cdigo para a insero 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 observaes:
Caso no sejam definidas a largura e/ou a altura, a imagem ser adicionada pgina
em seu tamanho original.
Ao alterar apenas uma das dimenses, a outra redefinida proporcionalmente. Caso

se deseje alterar tanto a largura quanto a altura com valores especficos, os dois
atributos devem ser definidos.
Criando links
Como em toda pgina web, podemos precisar inserir links para outras pginas, para
downloads, e-mails, etc. A HTML possui uma tag chamada ncora (anchor, em ingls)
representada por <a> que nos permite criar links facilmente, apenas definindo seu atributo
href com o endereo para o qual o usurio deve ser redirecionado.
A sintaxe bsica da tag <a> apresentada na listagem a seguir, onde criamos um link para
o endereo http://www.meusite.com.br com o texto Meu Link, onde o usurio pode clicar
para ser redirecionado.
Listagem 10: Sintaxe de criao 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, ttulos, 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 usurio, o que no
necessariamente precisa ser outro site. Podemos tambm 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
vrios 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 pgina

Conhecendo a sintaxe da tag <a>, basta utilizar as demais tags corretamente e criar os
arranjos desejados com imagens, ttulos, formatando a fonte, entre outras modificaes.
Listas
Outra estrutura bastante comum de ser utilizada em pginas web a lista, que serve pra
organizar um conjunto de itens, sequencialmente ou no. As listas podem ser ordenadas ou
no, ou seja, cada item podem ou no ter um nmero/letra/smbolo que o identifique
sequencialmente.
As tags para listas ordenadas e no ordenadas so, respectivamente, <ol></ol> e
<ul></ul>. Entre essas marcaes 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 item</li>
<li>Terceiro item</li>
</ul>
Nesse cdigo temos duas listas, uma ordenada e uma no ordenada, que no browser tm a
seguinte aparncia.
Figura 9: Lista numerada e no numerada

Existe ainda um terceiro tipo de lista: a lista de definio, que como o nome sugere, usada
para apresentar itens com um ttulo seguido de sua definio. A tag principal desse tipo de
lista a <dl></dl>, enquanto os itens so compostos por duas tags: <dt></td> para o ttulo e
<dd></dd> para a definio. O exemplo na seguir torna mais fcil a compreenso desse
elemento.
Listagem 12: Exemplo de lista de definio
<dl>
<dt>Item 1</dt>
<dd>Definicao do item 1</dd>
<dt>Item 2</dt>
<dt>Item 3</dt>
</dl>
Figura 10: Lista de definio vista no browser
Tabelas
As tabelas, por muito tempo foram usadas incorretamente para montar toda a estrutura do
site. Ou seja, a pgina era uma grande tabela e todo seu contedo era organizado dentro
das clulas. Isso era usado pela facilidade de se montar o layout usando essa estrutura,
afinal, as tabelas tinham suas clulas bem definidas e fceis de manipular.
Porm, forma no era correta e isso foi sendo visto ao longo dos anos e passou-se a utilizar
o conceito de tableless (sem tabelas). Comeou-se a incentivar o uso das tags corretas
para estruturao do layout e das tabelas para seu objetivo real: apresentao de dados
tabulares.
As tabelas so 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, so divididas em colunas.
A tag table possui o atributo border, que define a borda das clulas com um nmero inteiro
representando a espessura. A Listagem 14 apresenta um exemplo bsico de tabela.
Listagem 14: Exemplo de uso de tabela
<table border="1">
<tr>
<td>Linha 1, Coluna 1</td>
</tr>
<tr>
</tr>
</table>
Nessa tabela temos duas linhas (tr) com trs colunas (td) cada, como vemos na figura a
seguir.
Figura 11: Tabela com duas linhas e trs colunas
Leia mais em: HTML bsico - cdigos HTML http://www.devmedia.com.br/html-basico-codigoshtml/16596#ixzz3jM8j9T00

HTML Básico

Caricato da

Informazioni sul documento

Copyright

Formati disponibili

Condividi questo documento

Condividi o incorpora il documento

Opzioni di condivisione

Hai trovato utile questo documento?

Questo contenuto è inappropriato?

Copyright:

Formati disponibili

HTML Básico

Caricato da

Copyright:

Formati disponibili

HTML

Aprenda os princpios bsicos para confeco de um site em

Estrutura bsica de uma pgina HTML

Atributos da tag <body>

Nome (no html)

Tabela 1: Nomes e cdigos hexadecimais das principais cores

Figura 1: Cabealhos visualizados no browser

Figura 2: Cabealhos alinhados

A tag <font> - definindo o tamanho e cor do

Figura 3: Caractersticas da fonte alteradas

Formatao adicional do texto

<b></b>: marca o texto como em negrito (bold).

O que gera o seguinte resultado, quando aberto no browser:

Figura 4: Aplicao de formataes no texto

Pargrafos e quebras de linha

Figura 5: Texto com quebras de linha no browser

Figura 6: Texto dividido em pargrafos

height: altura da imagem em pixels.

Figura 7: Exemplos de imagens com a tag img

Ao alterar apenas uma das dimenses, a outra redefinida proporcionalmente. Caso

<a href="www.meusite.com.br"><h1>Titulo como link</h1></a>

O que gera o seguinte resultado:

Figura 8: Links na pgina

Figura 9: Lista numerada e no numerada

Figura 10: Lista de definio vista no browser

As tabelas so criadas sobre a tag base <table></table> e dividida em linhas <tr></tr> e

Figura 11: Tabela com duas linhas e trs colunas

Leia mais em: HTML bsico - cdigos HTML http://www.devmedia.com.br/html-basico-codigoshtml/16596#ixzz3jM8j9T00

Potrebbero piacerti anche