0% acharam este documento útil (0 voto)

1K visualizações

HTML Básico - Códigos HTML PDF

O documento explica os principais códigos HTML necessários para criar uma página web básica, incluindo tags para imagens, links, títulos e tabelas. Detalha estruturas como cabeçalhos, parágrafos, formatação de texto e cores. Fornece exemplos de como inserir imagens, definir o plano de fundo e estilizar o texto usando tags HTML.

Enviado por

Paulo Augusto Machado Jr

Direitos autorais

Formatos disponíveis

Baixe no formato PDF, TXT ou leia on-line no Scribd

0% acharam este documento útil (0 voto)

1K visualizações

HTML Básico - Códigos HTML PDF

Enviado por

Paulo Augusto Machado Jr

Direitos autorais

Formatos disponíveis

Baixe no formato PDF, TXT ou leia on-line no Scribd

Você está na página 1/ 19

devmedia.com.

HTML bsico - cdigos HTML

https://www.facebook.com/DevmediaWeb03

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>
<h2>Ttulo de nvel 2</h2>
<h3>Ttulo de nvel 3</h3>
<h4>Ttulo de nvel 4</h4>
<h5>Ttulo de nvel 5</h5>
<h6>Ttulo de nvel 6</h6>

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"/>

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>
<dd>Definicao do item 2</dd>
<dt>Item 3</dt>
<dd>Definicao do item 3</dd>
</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>
<td>Linha 1, Coluna 2</td>
<td>Linha 1, Coluna 3</td>
</tr>
<tr>
<td>Linha 2, Coluna 1</td>
<td>Linha 2, Coluna 2</td>
<td>Linha 2, Coluna 3</td>
</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

HTML 5
A verso mais recente da linguagem HTML, a HTML5 trouxe vrias
novidades para o desenvolvimento web. Novas tags foram inseridas,
bem como outras foram descontinuadas. Com essa verso,
objetiva-se obter a maior compatibilidade entre browsers (cross
browser), que at ento era um dos principais problemas dos
desenvolvedores web front-end (responsveis pela pgina em si, o
lado cliente).
Com o auxlio das folhas de estilo e da Javascript (linguagem de
script responsvel por dar mais dinamismo pgina HTML), que no
so foco deste artigo, possvel montar pginas bastante
complexas, com efeitos diversos. Porm, muitas vezes o cdigo que
funcionava em um browser, era incompatvel com os demais, o que
fazia com que os designers precisassem escrever vrios cdigos
para obter a compatibilidade, quando conseguiam. Muitas vezes se
tornava impossvel adicionar uma funcionalidade a uma pgina, pois
essa no poderia ser visualizada em todos os navegadores. Em
alguns casos, porm, o usurio ficava preso a um navegador, se
quisesse utilizar um determinado recurso, precisaria usar o browser
sugerido.
Esse foi o principal objetivo do lanamento das mais recentes
verses 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 mveis, cuja quantidade de usurios vem crescendo
rapidamente.
Referncias e sugestes de estudos complementares
HTML