HTML

Web Design Livre
<HTML>
Jezmael Basilio
1
Sumário
1. A linguagem HTM.
1.1. O que é HTML?
1.2. Por que aprender HTML é importante?
1.3. Fundamentos da linguagem HTML.
2. As tags essenciais.
2.1. Estrutura básica.
2.2. Títulos
2.2.1. Título do documento.
2.2.2. Título de seção.
3. Formatando o texto.
3.1. Parágrafos e quebra de linha.
3.2. Linhas Horizontais.
4. Personalizando a página.
4.1. Alterando a fonte.
4.2. Aplicando cor de fundo.
4.3. Aplicando estilos de texto.
4.4. Aplicando efeito no texto.
5. Listas
5.1. Listas não-ordenadas.
5.2. Listas ordenadas.
5.3. Listas de definições.
6. Links
6.1. Links relativos.
6.2. Links absolutos.
6.3. Links na mesma página.
7. Imagens
7.1. Formatos
7.2. Parâmetros da tag <img>.
7.2.1. Imagem como fundo da página.
7.2.2. Imagem como link.
8. Tabelas
8.1. As tags essenciais de uma tabela.
8.2. Os parâmetros assessórios de uma tabela.
8.3. A importância da tabela em uma página.
9. Frames
9.1. O que são frames.
9.2. As tag's <frameset></frameset> e <frame>.
9.3. O comando target.
9.4. Iframes.
10. Formulários
10.1 Atributos de <FORM>
2
<HTML>
1. A linguagem HTM.
1.1. O que é HTML?
HTML (HyperText Markup Language - Linguagem de Marcação de Hipertexto) é

considerada a base de todas as outras linguagens de desenvolvimento de páginas para Web.
Com função de compartilhar fotos, vídeos, músicas, textos e muito mais. Desenvolvida por
Tim Berners-Lee, essa linguagem tinha como objetivo fazer com que dispositivos diversos
pudessem visualizar as informações da Web: PCs com placas de vídeo; telefones celulares;
dispositivos para processar entrada e saída de voz e outros. Ficou popularizado pelo
aparecimento do browser Mosaic (o primeiro navegador gráfico da Web).
Como o nome diz a HTML é uma linguagem de marcação e de hipertexto, ou seja,
nada mais do que indica partes especiais em um texto simples. Por exemplo: trechos em
negritos, em itálico, com outra fonte, com uma tabela, com inserção de imagens, vídeos ou
qualquer outro arquivo de multimídia suportado pelo navegador.
Já quando dizemos que ela é uma linguagem de hipertexto estamos dizendo que tem
como função interligar vários documentos através de um link (ou ligação) que não é nada mais
que uma simples marcação em um texto indicando qual página que irá direcioná-lo depois que
você clicar.
Mas como é feito essa marcação? Através do que chamamos de tag’s (etiquetas) e
seus respectivos atributos, como o exemplo a seguir:
<TAG atributo1= “valor1” atributo2= “valor2” >Texto a ser formatado</TAG>
O HTML é uma linguagem padronizada, apesar de haver várias extensões. As versões

oficiais e padronizadas são publicadas pelo World Wide Web Consortium (ou W3C).
Para que possamos começar a criar uma página em HTML só precisaremos de um
simples editor de texto como o Kwrite, Kate, Gedit, ou um editor especializado para Web,
salvar os arquivos no formato .HTML ou .HTM e um navegador como o Firefox para testar os
resultados.
1.2. Por que aprender HTML é importante?

Existem vários programas editores de HTML (DreamWeaver, Front Page, NVU,
Quanta Plus, kumpozer, Hot Dog, Star Web...) que codificam nossas ações em cima de um
texto para códigos HTML. Para que, então, aprender HTML? Bom, os editores têm suas
limitações, podendo apresentar resultados nem sempre esperados. Por não conter alguns
recursos você vai querer aperfeiçoar cada vez mais a sua página e para que isso ocorra,
precisará recorrer aos códigos HTML.
1.3. Fundamentos da linguagem HTML.

Como foi dito anteriormente, uma página básica em HTML é um arquivo de texto
simples contendo marcações em HTML que definem a formatação do mesmo. Quando o
browser acessa o arquivo, ele procura os comandos que estão entre os caracteres "<"
(menor que) e ">" (maior que). Podendo então reconhecer o comando e atribuindo a
formatação para o texto mostrado na tela.
Existem dois tipos de tag's: aqueles que são isolados, ou seja, não é preciso outra
tag da mesma fechando a instrução, como o <BR />, <HR> e <P>, que representam
respectivamente uma quebra de linha, uma barra lateral e um novo parágrafo. O outro tipo
é o que exige a inclusão de uma segunda tag complementar, indicando o final da seção, ela
3
é a mesma tag, mas se diferencia por ter uma barra "/" como </FONT> ou </P>, que
representam respectivamente uma finalização de uma formatação de texto e um final de
parágrafo (pode ser opcional sua utilização). Para que sua página possa ser visualizada
perfeitamente em outros navegadores utilizaremos o padrão W3C em cada página criada.
Exemplos:
<BODY></BODY> //corpo da página
<CENTER></CENTER> //mantém o corpo da página ao centro
<HTML></HTML> //marca do início do documento HTML
<P></P> //parágrafo
<DIV></DIV> //divisão
<TABLE></TABLE> //tabela
<FORM></FORM> //formulário
<FONT></FONT> //estilo de fonte
2. As tags essenciais
2.1. Estrutura básica
Para entendermos a estrutura básica de uma página em HTML vamos montar nossa
primeira página.
• Primeiro abra um editor de texto, como o Kwrite, Gedit ou Kate.

• Digite as seguintes linhas:
<html>
<head>
<title>Minha Primeira Página em HTML!</title>
</head>
<body>

<p align="center">Essa é a minha primeira página em HTML!</p>
</body>
</html>
Observação: Dependendo da codificação do seu navegador ou do seu computador, talvez

seja necessário usar o conjunto de caracteres ISO-Latin-1. Esse suporte tem objetivo de
compatibilidade para quem visualiza a sua página, podendo ser de outro lugar ou não.
Para utilizar os caracteres especiais você deve ter conhecimento deles ou utilizar um editor
de HTML que faz a codificação automaticamente. Vamos utilizar a nossa primeira página
como teste. Onde temos os caracteres “é” substitua por é e onde tem “á” substitua
por á . Pronto?! No final desse tutorial eu colocarei a relação dos caracteres
especiais para que possam aprender.
BOAS DICAS:
 Sempre feche uma tag que você começou a usar.
4
 Mantenha suas tags sempre aninhadas (usando o tabulador), assim você melhora a
compreensão quando for ler o código de suas páginas.
• Salve o arquivo com o nome “primeiro.html”.
• Agora visualize sua primeira página, abrindo o arquivo que você salvou com o
Mozilla Firefox, será ele o nosso navegador padrão.
Vamos entender agora o que cada tag significa:

<HTML>...</HTML> Esta tag é a estrutura principal do arquivo HTML. Ele marca o início e o
final da página. Sem ela o navegador não vai "entender" que o documento esta escrito na
linguagem HTML.
<HEAD>...</HEAD> Esta tag marca a área de cabeçalho. Em HTML é opcional, mas no
basearemos no padrão W3C ela se torna indispensável. É nela que especificamos que
iremos utilizar CSS, XML, Javascript ou outras linguagens ou metadados na página.
<TITLE>...</TITLE> Responsável pelo título da página que aparece na barra de título da
janela do navegador e sempre está dentro da tag <HEAD>.
<BODY>...</BODY> Como diz o próprio nome, ele é o corpo do documento, tudo que
estiver entre estas tags será exibido na tela do navegador.
 Essa é uma tag de comentário, isso implica em dizer que o navegador irá
ignorar o que estará inscrito dentro.
<P>...</P> Esta tag informa que está sendo utilizado um novo parágrafo de texto. O
atributo align= "center" significa que o texto está alinhado ao centro.
Curiosidade!
Talvez você já tenha visto páginas da internet com as extensões .html e .htm mas muitos
se perguntam qual a diferença entre elas. Ela está no fato de que alguns servidores
ignorar a letra “l”. Se você enviar um arquivo para um servidor e quando for visualizá-lo
e ele aparecer sem a letra possivelmente esse servidor seja em DOS.
2.2. Títulos
2.2.1. Título do documento.
Cada documento tem um título que é exibido na barra de título do navegador. Esse
título deve ser escrito somente entre as tags <TITLE>...</TITLE>. Quando o usuário utiliza
uma ferramenta de busca como Google, Yahoo, Cadê, etc. procurando por um assunto
específico, o conteúdo do marcador <TITLE> de uma página é a primeira coisa a ser
vasculhada pelo navegador. Daí a grande importância em escolher títulos coesos para as
páginas e que consigam traduzir o conteúdo da página em poucas palavras.
5
Além disso, quando o usuário escolhe uma página para colocar em sua lista de
Favoritos do browser, é o título da página que aparecerá na lista. Caso a página não tenha o
marcador <TITLE> ou ele não conter nada, o browser assumirá o nome do arquivo.
Boa Dica:
 Colocar títulos com ponto na frente do nome é uma estratégia para que sua página
sempre esteja no topo dos favoritos, caso ele s estejam em ordem alfabética.
Exemplo:
..:: Titulo da Página ::.. ou ::.. Titulo da Página ..::
2.2.2. Título de seção ou cabeçalho.

Dentro das tags <body>...</body> podemos definir seções ou cabeçalhos, por meio
das tags <Hn>... </Hn> as quais são utilizadas para criar cabeçalho na área de
visualização. Existem seis tamanhos prefixados de cabeçalho, sendo que “n” pode variar de
1 a 6. (quanto menor o número maior o cabeçalho)
• Abra novamente o editor de texto e crie um novo arquivo chamado

“cabecalho.html” com o código abaixo:
<html>
<head>
<title>Exemplo de Cabeçalhos</title>
</head>
<body bgcolor="#a98151">
<center>
<h1>CABEÇALHO DE TAMANHO 1</h1>
</center>
</body>
</html>
• Salve o arquivo e abra no navegador.
6
Note que colocamos uma cor de fundo na página, essa característica é dada pelo
atributo bgcolor e seu valor "#a98151" que indica as cores RGB (Red, Green e Blue) em
hexadecimal.
Outra característica da nossa página é que o alinhamento de todos os cabeçalhos está
sendo feito pela tag <center>, se tirarmos ele todo o texto ficará alinhado no modo padrão,
a esquerda da página. Outra maneira de fazer alinhamento no cabeçalho é utilizando o
atributo aling dentro da tag <Hn>.
• Apague a tag <center> e acrescente o atributo aling mais um dos valores que ele
suporta, “right”, “left”, “center” ou “justify” .
Exemplo: <h1 aling=”center”>CABEÇALHO DE TAMANHO 1</h1>
• Salve o arquivo e verifique a mudança atualizando a página (Tecla F5).
7
3. Formatando o texto
3.1. Parágrafos e quebra de linha.
Não podemos fazer parágrafos simplesmente dando uma ENTER ou ESPACE, em HTML
existem tags próprias para indicar ao navegador isso, são elas:
<P>...<P> Indica um novo parágrafo, o comando de fechamento da tag pode ser omitido
quando não houver mais nenhum parágrafo seguinte, caso contrário o navegador interpreta
como sendo ainda do mesmo parágrafo. Também suporta o atributo de alinhamento align e
title (que indica um título ao parágrafo).
<BR/> Tag para quebra de linha. Não utiliza fechamento.
• Crie um novo arquivo chamado “paragrafo.html” e insira o código:
<html>
<head>
<title>Parágrafo</title>
</head>
<body>
Esse é o meu primeiro parágrafo de teste.
Esse já é o meu segundo parágrafo de teste.
<p> Agora com o marcador de parágrafo.</p>
E sua linha seguinte.
</body>
</html>
• Salve o arquivo e visualize no navegador.
Note nos dois primeiros parágrafos que digitamos não houve quebra, apenas quando
inserimos a tag <p> o navegador conseguiu interpretá-lo como sendo um novo parágrafo.
Agora vamos utilizar a tag <BR/>.
8
• Insira a tag <BR/> depois do primeiro parágrafo que digitamos.
• Insira também a mesma tag antes da palavra “marcador” que se encontra no nosso
terceiro parágrafo digitado.
• Salve e verifique a diferença.
Agora insira atributos dentro da tag <p> para ver como ela reage, salve e visualize.
Exemplo: <p aling=”center” title=”qualquer coisa”>Algum texto aqui</p>
Boa dica:
Para uma melhor organização de um conjunto de parágrafos podemos utilizar a tag
<div>. Ela junto com o atributo align evita que alinhemos todos os parágrafos que
digitamos.
Exemplo:
<div align=”right” title=”título1”>
<p>Primeiro parágrafo...</p>
...
<p>Último parágrafo</p>
</div>
3.2. Linhas Horizontais.

Agora aprenderemos como utilizar a barra horizontal, que tem como objetivo separar
tópicos distintos entre título e texto.
<Hr> Tag de barra horizontal. Não é necessário ser fechado. Suporta quatro atributos:
width -> indica o tamanho horizontal da barra, podendo ser em % ou em pixels.
size -> indica o tamanho vertical (altura), escala em pixels.
align -> indica o alinhamento da barra, center, right, left ou justify.
color -> indica a cor da barra, escala em RGB hexadecimal #RRGGBB (exemplo #fca636).
noshade ->indica se a barra não apresentará efeito 3D, o valor “noshade” anula o efeito 3D.
9
• Crie um novo documento e insira o código:
<html>
<head>
<title> Barra Horizontal </title>
</head>
<body bgcolor="#d1a96a">
<h1 align="center">Amor pra recomeçar - Frejat</h1>
<HR size="8" color="#b78e58" align="right" noshade="noshade"/>
<p align="center">
Eu te desejo não parar tão cedo<br/>
Pois toda idade tem prazer e medo<br/>
E com os que erram feio e bastante<br/>
Que você consiga ser tolerante<br/>
Quando você ficar triste<br/>
Que seja por um dia, e não o ano inteiro (...)
</p>
</body>
</html>
• Salve com o nome “barra.html” e visualize no seu navegador.
Já que estamos nos baseando no padrão W3C, o atributo color deve ser inserido
dentro de outro atributo, o style. O style fornece um meio de incluir informações de
formatação e estilos de folha. O padrão do style é o CSS (Cascading Style Sheets).
• Troque então a linha da barra horizontal por esta abaixo, salve e visualize o
resultado:
<HR size="8" style="color: #b78e58;" align="right" noshade="noshade"/>
O resultado é o mesmo, mas lembre-se que estamos nos baseando no padrão W3C.
10
• Insira o atributo width e algum valor para teste, pode ser em % ou em pixels, salve
e visualize a página.
4. Personalizando a página
4.1. Alterando a fonte.
Para alteração de fonte, cor e tamanho, utilizamos a tag <font> e seus atributos color
(cor da fonte, em #RRGGBB) size (escala de -2 a 7) e face (tipos de fonte, Arial, Trebuchet
MS, Verdana...).
Vamos agora fazer nossa formatação de texto, crie um novo arquivo chamado
“fonte.html” e insira o código:
<html>
<head>
<title> Mudando a propriedade da Fonte </title>
</head>
<body>
<h1 align="center"><font face="Courier New"> Garotos - Leoni </font></h1>
<hr width=”80%” align="center" size="8" color="gray"></hr>
<p align="center">
<font size="2" color="gray" face="Arial">Seus olhos e seus olhares<br/>
Milhares de tenta&ccetil;ões <br/>
Meninas são tão <strong>mulheres</strong><br/>
Seus truques e confusões <br/>
Se espalham pelos pêlos <br/>
Boca e cabelo <br/>
Peitos e poses e apelos <br/>
Me arragam pelas pernas <br/>
Certas mulheres como você <br/>
Me levam sempre onde querem <br/>
Garotos não resistem (...)<br/>
</font>
</p>
</body>
</html>
• Salve e verifique o resultado.
11
Note que a fonte cinza está em todo o texto, devido a segunda tag <font> está
somente sendo fechada no final do corpo do texto, mas poderia ser fechada onde desejar.
Aproveite para brincar um pouco com os atributos e seus valores.
Outra maneira de modificar a fonte é utilizando o atributo style dentro da tag <font>.
Exemplo:
<font style="font-family:Arial; font-size:16px; color:#006699; background-color:#000000;"
size="2" color="gray" face="Arial">Fonte azul com fundo preto<br/>
Darei mais detalhes de propriedade de textos usando CSS no final desse

tutorial caso contrário procure se informar um pouco mais sobre assunto na
internet.
4.2. Aplicando cor ou imagem de fundo.

Outro recurso bastante importante e que já utilizamos é aplicar cor no fundo da
página. Esses recursos são dados dentro da tag <body>. Outras propriedades que
podemos dar a página são: a inserção de imagem como fundo da página, atribuir a cor
de todo o texto que será utilizado na página, as cores das palavras com link (visitados
e ativos) e a distância do corpo da página ao topo (margem). Abaixo a lista dos
atributos mais importantes e os parâmetros para seus valores.
Atributo Função Valor

bgcolor Cor de fundo cores especificas ou no formato #RRGGBB
background Imagem de fundo url (endereço) da imagem de fundo.
text Cor de todos os texto cores especificas ou no formato #RRGGBB
link Cor dos links cores especificas ou no formato #RRGGBB
alink Cor dos links ativos cores especificas ou no formato #RRGGBB
vlink Cor de links visitados cores especificas ou no formato #RRGGBB
Agora vamos criar um exemplo simples para demonstrar esses atributos. Crie um
novo arquivo chamado “pagina_pessoal.html” e crie uma página do seu estilo, com cores
de fontes, cores de fundo ou imagem de fundo. Mais adiante explicarei como aplicar links
em texto ou imagens, mas deixarei um exemplo simples para que possa testa as cores.
Exemplo:
12
<a href=”www.google.com.br”>Clique aqui para ir para o Google</a>
4.3. Aplicando estilos de texto.

Vamos mostrar algumas tags de formatação de estilo de fonte em HTML que podem
ser utilizados nos textos inseridos.
<B>...</B> Coloca o texto em negrito.

<BIG>...</BIG> Exibe o texto com uma fonte maior.
<I>...</I> Exibe o texto em itálico.
<U>...</U> Exibe o texto sublinhado
<SMALL>...</SMALL> Exibe o texto com uma fonte menor.
<STRIKE>...</STRIKE> Exibe o texto riscado.
<TT>...</TT> Exibe o texto com uma fonte mono espaçada, geralmente uma variação de
Courier.
Essas tags de formatação são o que chamamos de tags de formatação física, pode ser
utilizada uma dentro da outra por exemplo. Essa formatação permite que em um mesmo
trecho de texto possa ser aplicados em mais de um formato, esse apenas sugerem um tipo
de ênfase a ser dada no texto. Podendo também utilizar várias outras atribuições com o
atributo style dentro deles (exceto Strike e U). Agora vamos utilizar as tags de formatação.
• Abra um novo arquivo de texto e insira o código:

<html>
<head>
<title>Formatando um Texto</title>
</head>
<body>
<B>TEXTO EM NEGRITO</B><BR/>
<BIG>TEXTO EM FONTE MAIOR</BIG><BR/>
<I>TEXTO EM &Itilde;TALICO</I><BR/>
<U>EXIBE O TEXTO SUBLINHADO</U><BR/>
13
<SMALL>TEXTO EM FONTE MENOR</SMALL><BR/>
<STRIKE>TEXTO RISCADO</STRIKE><BR/>
<TT>EXIBE O TEXTO USANDO UMA FONTE EM TAMANHO FIXO</TT>
</body>
</html>
• Salve o arquivo como “estilo_texto.html” e visualize no Firefox.
Outras tag de formatação:

<BLOCKQUOTE>...</BLOCKQUOTE> Destaca o texto deixando-o com uma margem maior,
uma citação.
<CITE>...</CITE> Exibe o texto em itálico e é utilizado para citações de livros, filmes,
obras, etc.
<CODE>...</CODE> Exibe o texto em fonte tamanho fixo (como Courier) e é utilizado
para identificar trechos de códigos de programas.
<STRONG>...</STRONG> Exibe o texto em negrito e é utilizado para destacar um texto.
Essas tag são o que chamamos de tags de Formatação lógica, elas ajuda na
formatação de textos dando uma melhor compreensão do que está sendo lido.
5. Listas
A linguagem HTML contém elementos que permitem criar listas de definições, listas
ordenadas e listas não ordenadas como os que são utilizados nos aplicativos de edição de
textos (ex.: OpenOffice Write).
5.1.1 Listas Não Ordenada

Uma lista não ordenada contém vários itens marcados todos com o mesmo símbolo
(normalmente um círculo pequeno ou um quadrado pequeno). Para criar uma lista não
ordenada usam-se os comandos <ul>...</ul> (unordered list) Dentro desses comandos os
vários itens são criados com o comando <li></li> (list item). Os atributos que a tag
suporta são type (tipo de caractere que fará a marcação [square|circ|disc]) e compact
(reduz os espaços na frente da linha e espaçamentos [compact])
Exemplo de lista não ordenada
• Primeiro item
• Segundo item
14
• Terceiro item
Agora vamos criar uma lista em HTML. Abra um novo arquivo e insira o código.
<html>
<head>
<title>Lista não ordenada</title>
</head>
<body >
<h4> Minha lista de estados e cidades</h4>
<ul>
<li>Rio Grande do Norte</li>
<li>Mossoró</li>
<li>São Paulo</li>
<li>Santos</li>
<li>Rio de Janeiro</li>
<li>Rio de Janeiro</li>
<li>Ceará</li>
<li>Fortaleza</li>
<li>Bahia</li>
<li>Salvador</li>
</ul>
</body>
</html>
• Salve com o nome “lista.html” e visualize no seu navegador.
Note que as cidades deveriam ser uma sub-lista dos estados, para isso fazemos uma lista
dentro de outra lista.
Teste agora utilizando uma lista dentro de outra e com os atributos suportados, como o
exemplo:
<li>Rio Grande do Norte

<ul type=”square”>
<li>Mossoró</li>
<li>Natal</li>
</ul>
</li>
15
5.1.2. Listas Ordenadas
Uma lista ordenada contém vários itens marcados em ordem crescente. Para criar uma lista
ordenada usam-se os comandos <ol>...</ol> ("ordered list") Dentro desses comandos os
itens em ordem crescente são criados com o comando <li> ("list item"). Os atributos que a
tag suporta são type (tipo de caractere que fará a marcação [i|I|a|A|1]), compact (reduz os
espaços na frente da linha e espaçamentos [compact]) e start (indica onde deve começar a
numeração ou as letras da lista [valor]).
Exemplo de lista ordenada
1. Primeiro item
h. Sub-item
2. Segundo item
3. Terceiro item
• Agora aproveite o arquivo “lista.html” e salve como “lista_ordenada.html” e

atribua valores em ordem crescente.
5.1.2. Listas de Definições.

São usadas para definir palavras ou termos. Precisa de duas tags para completar o item e não
usa a tag <li> usa-se a tag <dd>. Essa tag não tem atributos, mas pode utilizar o style
normalmente.
<DL>marca o início da lista de definição.

<DT> Palavra a ser explicada.
<DD> Explicação </DD>
</DT>
</DL> Tag de finalização.
Exemplo de lista de definição:
Palavra:
Essa é a definição da minha palavra.
Essa é a segunda definição da minha palavra
Palavra2:
Essa é a única definição dessa palavra
Crie um novo arquivo chamado “lista_definicao.html” aproveitando o exemplo anterior,

salve, visualize e crie novas listas para treino.
16
6. Links
O link é o recurso mais poderoso da linguagem HTML. Conhecido como hiperlink ou
hipertexto o link é a ligação de uma página a outra dentro ou fora do site. Os links podem
ser vinculados com textos, sons, imagens, vídeos, etc. A criação de um link é simples,
utiliza-se apenas uma tag chamada âncora <A></A>.
Os lados de uma ligação de hipertexto são definidos da seguinte maneira: o lado onde
ela parte é chamado de link e o lado de chegada chama-se âncora. Seus parâmetros são
HREF (Hipertest Reference) e NAME.
<A HREF=”URL”> PÁGINA </A> âncora de partida, que se refere ao hipertexto a ser
localizado por meio do endereço fornecido pela URL. PÁGINA aparecerá na Home Page em
destaque indicando que é um link. Quando o usuário rolar o mouse em cima da palavra
PÁGINA e der um clique, imediatamente o link o levará para a página de destino.
6.1. Links relativos.

São os links que têm relação direta com o diretório raiz da home page, quer dizer, os
arquivos estão na mesma pasta. Para acessá-los, é só informar o nome do arquivo.
Exemplo:
<a href= “listas.html”>Link para a Pãgina Listas</a>
listas.html é o nome do arquivo HTML que monta a página com os exemplos dos
diferentes tipos de listas.
• Agora vamos utilizar um arquivo já criador como exemplo. Abra o arquivo

“fonte.html”.
Modifique a linha:
Certas mulheres como você </a><br/>
Por:
Certas <a href="barra.html">mulheres como você </a><br/>
6.2. Links absolutos.

Este tipo de link permite acesso a qualquer página ou arquivo existente em outro
diretório ou na internet, que pode estar em qualquer parte do planeta. Para este tipo de
acesso é necessário o endereço absoluto de uma URL (URL é a abreviação de Uniform
Resource Locator e serve para especificar o endereço de uma Home Page), que não
depende da página atual.
Exemplo:
<a href= “http://www.uern.br” > Portal Ação Digital </a>
6.3. Links na mesma página.

Quando um documento tem trechos muito longos, é preciso criar uma âncora para acessar
esses trechos. A sintaxe do link de referência para um trecho de um documento deve conter
o caractere especial # (tralha) seguido do endereço da âncora de chegada.
Âncora de Saída
<a href= “#Referência” >Ir para baixo</a>
Âncora de chegada (trecho)
<a name= “Referência” >TRECHO</a>
17
NAME – quando a âncora vier acompanhada deste parâmetro, na verdade ela esta indicando
o ponto de chegada (URL que foi referenciada no link), que é o endereço de um trecho
(tópico) de um documento.
Colocada em lugar estratégico no texto, para indicar onde o assunto se inicia. Deve ter a
mesma URL do link de referência para ele (o link de referência) possa encontrar o trecho
referenciado.
Você pode personalizar as cores que ficarão seus links de acordo com a sua característica
(já visitado, não visitado e normal). É somente utilizar os atributos alink, vlink e link dentro
da tag <body>.
7. Imagens
Uma página fica bem mais atraente quando existem imagens para ilustrar seu
conteúdo. No entanto, é preciso ter cuidado com a quantidade de imagens, pois elas
influenciam e muito o carregamento da página. É muito simples inserir uma imagem. Só é
preciso saber que os formatos aceitos são GIF, JPG, JPEG, PNG ou SVG e as seguintes
tags:
<img src=”nomedaimagem.extensão” width=”largura” height=”altura”>
Outros parâmetros da tag IMG:

border: permite alterar a largura da borda da imagem (em pixels).
hspace: define a margem em branco nas laterais (esquerda e direita) da imagem evitando
que o texto fico encostado na figura (em pixels).
vspace: define a margem em branco nas partes superior e inferior. Os valores são em pixels
(em pixels).
alt: usado para inserir um texto alternativo, que aparece quando o cursor aponta para a
figura.
width: permite alterar a largura da imagem, aumentando ou diminuindo-a em relação ao
seu tamanho original. São aceitos valores em quantidade de pixels ou em porcentagem da
tela (em pixels ou em %).
height: determina a altura da imagem, aumentando ou diminuindo-a em relação ao seu
tamanho original. São aceitos valores em quantidade de pixels ou em porcentagem da tela
(em pixels ou em %).
align: alinhamento absoluto da imagem (os valores podem ser: absbottom, absmiddle,
baseline, bottom, middle, texttop, top, left, right).
Vamos inserir nossa primeira imagem no corpo do texto.
• Crie um novo arquivo chamado “imagem.html” e insira o código:
<html>
<head>
<title>Inserindo uma imagem</title>
</head>
<body>
Testando o texto junto a imagem <img src="ubuntu.png" width="269" height="70"
alt="Site Ubuntu.gov" align="middle"/>continuando o texto
</body>
</html>
18
• Verifique se a imagem está no mesmo diretório do arquivo em HTML, salve e visualize
no navegador.
• Utilize os outros atributos, salve e verifique as modificações.
7.1. Imagem como link.

Para que uma imagem funcione como um link, simplesmente inserimos a tag <img>
dentro da tag <a></a>. Utilizaremos o exemplo anterior como exemplo.
• Abra o arquivo “imagem.html” e adicione um link a imagem do ubuntu para o site da

UERN (www.google.br).
<a href=”www.ubuntu.gov”><img src="ubuntu.png" width="269" height="70" alt="Site
Ubuntu.gov" align="middle"/></a>
• Salve e teste o seu link criado.
8. Tabelas
Tabelas correspondem a uma ótima organização de informações, desse modo foi
incorporado à linguagem HTML. Atualmente vários sites utilizam esse recurso
essencialmente para layout da página através do posicionamento das imagens e texto. As
tabelas são simplesmente linhas separadas por colunas de conteúdo. Esse conteúdos podem
ser qualquer tipo de mídia suportada pelo navegador ou até mesmo outra tabela.
Nesse capítulo vamos tentar dominar a utilização da tabela, alinhamento, formatação,
mesclagem.
8.1. As tags essenciais de uma tabela.

A tag principal de uma tabela é a tag <table></table>, ela define que será utilizado
uma tabela. A tag que define a criação de uma linda é a tag <tr></tr>, a tag de criação de
coluna é <td></td> e a tag que define o nome das colunas é a tag <th></th>, ele destaca
o texto com negrito e centraliza ao meio da coluna. Essas tags são ignoradas pelo
navegador caso não estejam dentro da tag <table>. Uma tag opcional na tabela é a tag que
define o nome da tabela <caption></caption>, na qual o texto contido nele, é uma
rotulação tanto para toda a tabela como para colunas. Agora vamos mostrar um exemplo
simples.
 Abra seu editor de texto e insira o código abaixo:
<html>
<head>
<title> Criando minha primeira tabela </title>
19
</head>
<body>
<table>
<caption>Esse é o título da minha tabela</caption>
<tr>
<th> Cabeçalho: linha1 e coluna1 </th>
<th> Cabeçalho: linha1 e coluna2 </th>
</tr>
<tr>
<td> Coluna: linha2 e coluna1 </td>
</tr>
<tr>
</tr>
</table>
</body>
</html>
 Salve e olhe no navegador.
Uma boa característica das tabelas é a formatação dos texto inseridos nela. Teste os
atributos aling e valing (alinhamento vertical) dentro das tags <td></td>, <td></td> e
<th></th>.
8.2. Os parâmetros assessórios de uma tabela.

Você pode modificar a propriedade da tabela, como cor, borda, espaçamento, cor de fundo,
imagem, etc. Abaixo a lista de atributos básicos para sua tabela:
Atributo Função Valores Exemplo
align Alinhamento Top, bottom, left, <td align=”center”>

horizontal center, right
border Espessura da borda Em pixels <table border=”4”>
20
cellpadding Espaço entre a borda Em pixels <table
e o conteúdo cellpadding=”2”>
cellspacing Espaço entre as Em pixels <table

células da tabela cellspacing=”5”>
width Largura da tabela Em pixels ou por <td width=”50%”>

cento %
valing Alinhamento vertical Top, middle, bottom, <td valign=”top”>

baseline
colspan Define quantas Número <td colspan=”2”>

colunas o conteúdo
vai abranger
rowspan Define quantas linhas Número <td rowspan=”2”>

o conteúdo vai
abranger
bordercolor Define a cor da borda Formato #RRGGBB <table

bordercolor=”#3f3f3c”
>
border rule Permite esconder none, rows, cols, all <table border
quais células deve ser rule=”cols”>
mostrado
Além desses atributos as tabelas também aceitam atributos de páginas como background e
bgcolor, title, style.
 Crie uma tabela e teste os atributos para modificar as propriedades da tabela.
21
9. Frames
9.1. O que são frames.

Até a chegada do Netscape 2.0 uma página era composta de apenas uma janela, sem
divisões. Através desse recurso poderoso chamado framing, a janela do navegador pode ser
dividida em diversas partes, cada parte chamada de frame. Os frames podem ser
manipulados separadamente e conter dados diferentes. Apesar desse recurso ser
interessante, ele vem caindo em desuso, atualmente tem uma boa atuação em índices e
tutoriais na Web. Para melhorar o design dos sites, atualmente pode-se alterar as diversas
propriedades de um frame, como omissão de barra de rolagem e bordas. A navegação em
Frame tem dois ou mais documentos de navegação, mas com duas características distintas.
Documentos de Layout: contém informações sobre a estrutura de frames dos

documentos. É nele que se encontra a referências para os outros documentos na qual o
usuário vai visualizar o conteúdo (chamado de "documento filho") ou navegar por
documento de layout.
Documentos de Conteúdo: contém os documentos normais em HTML. Ele deve ser

visto em um fram ou sozinho no navegador.
9.2. As tag's <frameset></frameset> e <frame>.
A utilização de Frames na linguagem HTML é feita através dos marcadores

<FRAMESET></FRAMESET> ela substitui a tag <body> em um documento de layout. Ele
tem a função de dividir a janela em duas ou mais linhas ou em duas ou mais colunas.
Existem três atributos principais, cols (define que a divisão é em colunas e o tamanho em
% das partes que eles ocuparão na tela), rows (define que a divisão é em linhas e o
tamanho em % das partes que eles ocuparão na tela) e border (já conhecida nas tabelas,
define a espessura da borda do frame). Se o atributo rows não for dado, cada coluna
ocupará todo o comprimento da página, o mesmo ocorre com o atributo cols, se ele não for
dado cada linha estenderá a largura total da página. Dentro dessa tag existe a tag
<FRAME> que não necessita ser fechada, é dentro dela que informamos o endereço da
página que aparecerá no frame utilizando o atributo src para informar o endereço e também
o atributo name para informar o nome do frame.
Exemplo:
<FRAMESET ROWS="30%,40%,30%"> 
<FRAME SRC="pagina1.html">
</FRAMESET>
Exemplo2:
<FRAMESET COLS="20%, 80%"> 
<FRAME SRC="col1.html">
</FRAMESET>
22
Exemplo3:
<FRAMESET COLS= “20%, 80%” >
<FRAME SRC= “col1.html” >
<FRAMESET ROWS= “20%, 80%” > 
<FRAME SRC= “lin1.html” > 
<FRAME SRC= “lin2.html” >
</FRAMESET>
</FRAMESET>
Exemplo4:
<FRAMESET ROWS="x, y">
<FRAME SRC="lin1.html"> 
<FRAMESET COLS="x, y"> 
</FRAMESET>
</FRAMESET>
Agora vamos fazer um exemplo. Crie um novo arquivo chamado “layout_principal.html” e

insira o código
<html>
<head>
<title> Testando os Frames </title>
</head>
<frameset cols="40%, *" >
<frame src="fonte.html">
<frame src="lista.html">
</frameset>
</html>
9.3. O comando target.

Quando uma pessoa pressiona um link dentro de um frame, o link carregará a outra
página dentro de próprio frame, mas há como carregar em outro frame. Para que isso seja
possível, a navegação em outro frame existe o atributo target dentro da tag <a></a>.
23
Façamos o teste para melhor explicação, acrescente no arquivo que acabamos de criar nas
duas tags de frame os seus nomes com a tag name.
<frame src="fonte.html" name="fonte">

<frame src="lista.html" name="lista">
Agora abra o arquivo “fonte.html” e na linha que insere um link, acrescente o atributo
target e seu valor com o nome “lista”.
<a href="barra.html" target="lista">mulheres como você</a>
Salve e teste o resultado.
24
9.4. Iframes.
A Inline Frame, ou "iFrame", é uma tag que cria um frame dentro da página HTML, em vez
de "dividir" a página em duas ou mais partes. É muito utilizado para exibir um conteúdo
específico dentro de uma página como um texto ou arquivo multimídia.
Exemplo:
<IFRAME align="center" frame name="nome" src="endereco.html" width="(largura do
quadro)" height="(altura do quadro)" scrolling="(presença ou não de barra de rolamento no
quadro)" frameborder="(presença ou não de borda no quadro)"></IFRAME>
 Crie uma nova página chamada “iframe.html” e teste um iframe dentro dele com
outra página que você já criou.
10. Formulários
Formulários são de grande utilidade para a Web, pois permitem a interatividade entre
o usuário possibilitando cadastros, pesquisas, envio de comentários, etc. Um formulário
HTML é simplesmente uma página Web que contém, além de texto, elementos especiais
chamados controles, representados por caixas de checagem, botões, caixas de seleção,
campos de textos e outros marcadores. Então um formulário funciona da seguinte maneira:
os usuários preenchem os campos do formulário, envia-os, em seguida, é processado para
um banco de dados que armazena as informações. Essas informações por sua vez têm uma
função específica do site, como por exemplo, servir para vendas na internet. Formulários
também podem ser gerados para a navegação entre páginas e Sites na Web. O marcador
usado é o <FORM></FORM>.
Exemplo:
<HTML>
<HEAD>
<TITLE>Exemplo de Formulário</TITLE>
</HEAD>
<BODY>
<FORM> Aqui irão entrar os campos de formulário </FORM>
</BODY>
</HTML>
10.1 Atributos de <FORM>

O elemento FORM pode conter alguns atributos que determinaram para onde será mandada
a entrada do FORM. Vejam como eles são:
<FORM name= “nome do formulário” method= “valor” action= “tratador do formulário”

>elementos dos formulários</FORM>
name: Especifica o nome do formulário. Útil em casos de validação dos campos, por
exemplo, quando se utiliza uma linguagem de scripts como JavaScript.
method: Método que define como os dados serão transmitidos para o programa que irá
processá-los. Devem ter valores GET ou POST, sendo que a diferença entre estes dois
valores está no modo como os dados são empacotados. Normalmente o programa que será
utilizado para processar o formulário já especifica o valor para o atributo method.
action: Indica o endereço do programa que receberá os dados do formulário (tratador do
formulário).
25
Exemplo:
<form name= “maladireta” method=”post” action=”maladireta.php”></form>
Para que você possa indicar qual objeto será mostrado no seu formulário (campo
texto, checkbox, etc) deve-se utilizar a tag <input/> que não é necessário ser fechada.
Exemplo:
<form method="POST" action="http://www.xyz.com.br/cgi-bin/script">
<p>
<input type="text" name="T1" size="20"/> 
<input type="submit" value="Submit" name="B1"/> 
<input type="reset" value="Reset" name="B2"/> 
</p>
</form>
Atributos e os valores suportados dentro da tag <input/>:

Atributo Descrição Valor Exemplo
Type Especifica que tipo de objeto "text", "password", <input type="text"
deve ser checkbox", "hidden", size="40"/>
"radio", button",
"submit" e "reset"
Name Indica o nome do objeto, não Qualquer nome <input type="text"
será exibido para o usuário. size="20"
Ele é utilizado pelo script name="endereco"/>
associado ao formulário para a
manipulação de suas
informações.
Size Indica o número de caracteres Um número inteiro <input type="text"
visíveis de um objeto tipo size="40"/>
"text" (caixa de texto).
Align Determina o comportamento "top", "middle" e <input type="text"
dos objetos em relação a "bottom" size="40"
textos e imagens presentes na align="top"/>
mesma linha
Value É o conteúdo do objeto. Qualquer texto <input type="text"
Dependendo do tipo de objeto size="40" value="Rio
(ex.: caixas de texto) o de Janeiro"/>
conteúdo pode ser manipulado
pelo usuário.
Maxlength Indica o número máximo de Um número inteiro <input type="text"
caracteres permitido como size="40"
conteúdo de um objeto tipo maxlength="100"/>
"text".
Checked Determina qual a opção “checked” <input
padrão (default) para objetos type="checkbox"
tipo "radio". Para objetos tipo checked="checked"/>
"checkbox", sua presença
determina que ele esteja como
default, assinalado.
Disable Desabilita o tipo que será “disable” <input type="radio"
utilizado. Importante quando value="outro"
existem escolhas que disabled="disabled" /
dependem de outras. Ou >
quando você não deseja que o
usuário copie o texto.
26
Readonly Como já diz o nome, somente “readonly” <input name="nome"
leitura do texto. type="text"
readonly="readonly"
value="Jezmael" />
Para que possamos entender um pouco mais sobre a utilização de cada tipo objeto
que será utilizado, vou explicar alguns deles.
:: Caixa de texto ::
O valor text no atributo type de um <input/> indica que o campo será de texto, ou
seja, um campo onde o usuário poderá entrar com dados.
Exemplo:
<form action="teste.php">
<p>Entre com seu nome:<input type="text" name="nome"/></p>
</form>
O atributo value, neste caso, pode ser usado para determinar um valor prévio para o
campo, que será exibido quando a página for carregada.
Exemplo:
<p>Entre com seu nome:<input type="text" name="nome" value="Jezmael"/></p>
</form>
O atributo size configura o tamanho do campo e é baseado no número de caracteres.

Este valor não limita o tamanho do campo, somente define o tamanho em que será
mostrado na página. Quem define o número máximo de caracteres que podem ser digitados
é o atributo maxlenght, que é opcional.
Exemplo:
<p>Entre com seu nome:<input type="text" name="nome" value="Jezmael"
size="20" maxlenght ="30"/></p>
</form>
:: Formulário com senha ::

Quando colocamos o valor password no atributo type estamos dizendo que é do tipo
texto, mas os caracteres serão substituídos por asterisco, por segurança é claro.
Exemplo:
<p>Digite sua senha:<input type="password" name="Senha" size="8" maxlenght="8"/></p>
</form>
:: Caixa de Checagem ::
O valor "checkbox" no atributo TYPE define uma caixa de checagem. Na prática, as
caixas de checagem aparecem em grupos e os usuários podem escolher uma ou mais
opções.
name: define o nome da caixa de checagem. No caso de várias caixas, cada uma deve
ter um nome diferenciado.
value: contém o valor do campo, que será passado ao programa interpretador do
formulário.
27
checked: atributo opcional que pode ser utilizado quando se deseja que a opção já
apareça selecionada na página.
Exemplo:
<p>Escolha a área de interesse</p>
<input type="checkbox" name="caixa1" value="linux"/> cursos de linux<br/>
<input type="checkbox" name="caixa2" value="html"/> cursos de html<br/>
<input type="checkbox" name="caixa3" value="programming"> cursos de
programaç&aatilde;o
</form>
:: Botão de Opção ::
O valor “radio” no atributo TYPE define um botão de escolha. Na prática os botões de
escolha aparecem em grupos e podem permitir que apenas uma opção seja escolhida
dentre as existentes (exclusão mútua).
name: define o nome do botão de opção. No caso de botões de opção com exclusão
mútua, cada botão do grupo deverá utilizar o mesmo nome.
value: contém o valor do campo, que será passado ao programa interpretador do
formulário.
checked: atributo opcional que pode ser usado quando se deseja que a opção já
apareça selecionada na página.
Exemplo sem exclusão mútua:

<input type="radio" name="radio1" value="linux"/> Curso linux<br/>
<input type="radio" name="radio2" value="html"/> Curso HTML<br/>
<input type="radio" name="radio3" value="programming"> Curso
Programação<br/>
</form>
exemplo com exclusão mútua:

<input type="radio" name="radio1" value="linux"/> Curso linux<br/>
<input type="radio" name="radio1" value="html"/> Curso HTML<br/>
<input type="radio" name="radio1" value="programming"> Curso
Programação<br/>
</form>
:: Botão LIMPA/CANCELA ::
O valor "reset" no atributo TYPE define um botão que limpa todos os campos,
devolvendo os mesmos valores de quando a página foi carregada. No atributo VALUE, pode-
se definir o que será escrito no botão. Caso nenhum valor seja definido, aparecerá somente
RESET.
Exemplo:
<p>entre com seu nome: <input type="text"/></p>
<input type="reset" value="apagar"/>
</form>
28
:: Botão SUBMIT ::
O valor "submit" no atributo TYPE define um botão que aciona o envio das informações
preenchidas no formulário ao programa interpretador. O atributo VALUE define o que será
escrito no botão. Caso nenhum valor seja definido, aparecerá somente SUBMIT.
Exemplo:
<input type="submit" value="Enviar"/>
</form>
:: Imagem como Botão ENVIAR ::

Alternativa para o botão tipo SUBMIT, pode-se usar uma imagem que possua função
de enviar o formulário para processamento. Ou seja, em vez de usar um botão comum usa
se uma imagem que pode ser um botão personalizado (colorido).
name: define o nome do controle.
src: define o endereço ou o nome do arquivo de imagem.
alt: define o texto que será mostrado quando o mouse passar pela imagem.
Exemplo:
<input type="image" src="botaoenvia.gif" alt="Clique para enviar o Formulário"/>
</form>
:: Texto com múltiplas Linhas ::

Agora vamos aprender como fazer uma caixa de texto com múltiplas linhas. Para isso
teremos que usar uma nova tag dentro do formulário, a tag <textarea></textarea>.
Dentro dela temos os atributos: name (que indica o nome para os scripts para manipulação
dos dados), rows (que indica o número de linhas que a área do texto vai possuir) e cols
(que indica quantas colunas a área do texto vai possuir).
Exemplo:
<p>Deixe deu comentário
<textarea cols="30" rows="3" wrap="off" name=”nome”>Área do texto</textarea>
</p></form>
:: Caixa de Seleção::
O marcador SELECT permite a criação de uma lista de opções a serem escolhidas pelo
usuário. As opções são criadas através do TAG <option></option> que deve estar dentro
da tag <select></select>. Os atributos que o <select> utiliza são:
Name; indica o nome.
Size; o número de opção que serão exibidos.
Multiple; define que o usuário pode fazer múltiplas escolhas.
Exemplo:
<select name="nome" size="2">
<option value="valor" selected="selected">texto a aparecer</option>
29
<option value="valor2">texto a aparecer2</option>
</select>
Já dentro da tag <option> você pode utilizar o atributo select="select" que indica qual
deve inicialmente aparecer selecionado.
Nota: Não iremos nos aprofundar como validar os formulários nessa apostila. Espero
que isso aconteça em outro curso que desejamos ensinar, Programação em PHP. Quem
sabe voltaremos com o estudo de CSS.
Dicas: Espero que tenham gostado do conteúdo e que busquem ainda mais se
informar sobre novas ferramentas mais avançadas. Busquem descobrir sobre a web 2.0,
leiam bastantes tutoriais na internet sobre HTML e sobre como melhorar sua página. Até a
próxima!
REFERÊNCIAS
Linguagem de Programação HTML, Fernanda Sampaio Cavalcante.
HTML, Marcos Rogério Fernandes. 2008
HTML e introdução ao PHP, João Paulo de Oliveira. 2005
HTML - Curso Completo, Efeitos Visuais. Página: http://www.efeitosvisuais.com/ acesso
em 2008
HTML 4 for Dummies. Ed. Tittel, Stephen Nelson James. Rio de Janeiro: Campus. 1998
30
Lista de Caracteres especiais – ISO-Latin-1
31
32
33
34
35
Exemplo de Lista de Cores em RBG
36

HTML

Transféré par

Informations du document

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

HTML

Transféré par

Droits d'auteur :

Formats disponibles

Web Design Livre

HTML (HyperText Markup Language - Linguagem de Marcação de Hipertexto) é

<TAG atributo1= “valor1” atributo2= “valor2” >Texto a ser formatado</TAG>

O HTML é uma linguagem padronizada, apesar de haver várias extensões. As versões

1.2. Por que aprender HTML é importante?

1.3. Fundamentos da linguagem HTML.

• Primeiro abra um editor de texto, como o Kwrite, Gedit ou Kate.

Observação: Dependendo da codificação do seu navegador ou do seu computador, talvez

• Salve o arquivo com o nome “primeiro.html”.

Vamos entender agora o que cada tag significa:

2.2.2. Título de seção ou cabeçalho.

• Abra novamente o editor de texto e crie um novo arquivo chamado

• Salve o arquivo e abra no navegador.

• Crie um novo arquivo chamado “paragrafo.html” e insira o código:

• Salve o arquivo e visualize no navegador.

3.2. Linhas Horizontais.

• Salve com o nome “barra.html” e visualize no seu navegador.

• Salve e verifique o resultado.

Darei mais detalhes de propriedade de textos usando CSS no final desse

4.2. Aplicando cor ou imagem de fundo.

Atributo Função Valor

4.3. Aplicando estilos de texto.

<B>...</B> Coloca o texto em negrito.

• Abra um novo arquivo de texto e insira o código:

• Salve o arquivo como “estilo_texto.html” e visualize no Firefox.

Outras tag de formatação:

5.1.1 Listas Não Ordenada

Exemplo de lista não ordenada

• Salve com o nome “lista.html” e visualize no seu navegador.

<li>Rio Grande do Norte

Exemplo de lista ordenada

• Agora aproveite o arquivo “lista.html” e salve como “lista_ordenada.html” e

5.1.2. Listas de Definições.

<DL>marca o início da lista de definição.

Exemplo de lista de definição:

Crie um novo arquivo chamado “lista_definicao.html” aproveitando o exemplo anterior,

6.1. Links relativos.

• Agora vamos utilizar um arquivo já criador como exemplo. Abra o arquivo

6.2. Links absolutos.

6.3. Links na mesma página.

Outros parâmetros da tag IMG:

Vamos inserir nossa primeira imagem no corpo do texto.

• Crie um novo arquivo chamado “imagem.html” e insira o código:

7.1. Imagem como link.

• Abra o arquivo “imagem.html” e adicione um link a imagem do ubuntu para o site da

8.1. As tags essenciais de uma tabela.

 Salve e olhe no navegador.

8.2. Os parâmetros assessórios de uma tabela.

Atributo Função Valores Exemplo

align Alinhamento Top, bottom, left, <td align=”center”>

border Espessura da borda Em pixels <table border=”4”>

cellspacing Espaço entre as Em pixels <table

width Largura da tabela Em pixels ou por <td width=”50%”>

valing Alinhamento vertical Top, middle, bottom, <td valign=”top”>

colspan Define quantas Número <td colspan=”2”>

rowspan Define quantas linhas Número <td rowspan=”2”>

bordercolor Define a cor da borda Formato #RRGGBB <table

 Crie uma tabela e teste os atributos para modificar as propriedades da tabela.

9.1. O que são frames.

Documentos de Layout: contém informações sobre a estrutura de frames dos

Documentos de Conteúdo: contém os documentos normais em HTML. Ele deve ser

9.2. As tag's <frameset></frameset> e <frame>.

A utilização de Frames na linguagem HTML é feita através dos marcadores

Agora vamos fazer um exemplo. Crie um novo arquivo chamado “layout_principal.html” e

<a href="barra.html" target="lista">mulheres como você</a>