Tutorial HTML 1

TUTORIAL HTML
B Á S I C O
CRIANDO E PUBLICANDO PÁGINAS DA WEB
Copyright © 2008: Thaís Mendes Ramalho (thais.mendes@criarwebsite.com)
É permitida a redistribuição deste tutorial somente em sua versão original, sem alterações.
Este e outros tutoriais estão disponíveis na página: http://www.criarwebsite.com
SOBRE O TUTORIAL:
Este tutorial faz parte de uma série completa para aqueles que querem aprender a
desenvolver páginas da web. Ao final desta série de tutoriais, você deverá estar apto(a) a
criar websites completos. Para que o tamanho do arquivo não ficasse muito grande, este
tutorial foi dividido em partes:
1. Básico
2. Formulários
3. Tabelas
Existem dezenas de outros tutoriais de HTML na Internet mas eu quis desenvolver

um tutorial que fosse o mais fácil e rápido de seguir e de consultar, ainda que contendo
uma série de exemplos. Sugestões e críticas a respeito do tutorial serão muito bem-vindas.
Se encontrar falhas neste tutorial, por favor, entre em contato comigo e verei como posso
melhorá-lo. Todos os colaboradores terão seu nome e website incluídos nas revisões.
Devido ao formato deste documento (.PDF), não foi possível incluir vídeos
diretamente entre os textos. Além disto, minha intenção foi que este documento pudesse
ser utilizado para consultas rápidas no futuro. Por este motivo, uma versão on-line do
tutorial foi criada em meu website, contendo mais alguns exemplos de códigos - além de
vídeos, imagens e modelos prontos de sites.
Para adquirir a continuação deste tutorial, por favor, acesse:
http://www.criarwebsite.com
Este tutorial parte da suposição de que você não tem praticamente

nenhum conhecimento sobre como são criadas página da web. Caso você já
tenha tido algum contato com a linguagem HTML, os primeiros tópicos podem
parecer simples demais – e esta é a intenção, realmente. Qualquer que seja
seu nível de instrução, este tutorial deverá ajudá-lo a aprender a construir
páginas da web simples, rapidamente.
== Índice ==
- INTRUDUÇÃO:
A. O Que é HTML?
B. HTML e Compatibilidade.
C. Como Editar, Salvar e Visualizar?
- HTML BÁSICO:
1. Estrutura do HTML
2. Meta Tags
3. Propriedades do <body>
4. Formatação de texto
a. Sub-Títulos
b. Propriedades da Fonte
c. Outras Opções de Formatação
d. Quebras de Linha
5. Parágrafos
6. Linha Horizontal
7. Imagens e Sons
8. Links Internos e Externos
9. Listas
a. Listas Ordenadas
b. Listas Não-Ordenadas
c. Listas Descritivas
- CONCLUSÃO
INTRODUÇÃO
1. O Que é HTML?
HTML (Hypertext Mark-up Language) é a linguagem de hipertexto utilizada para desenvolver

páginas da web.
O HTML é formado por marcações (ou tags) que indicam ao navegador (programa com o qual
você pode visualizar as páginas da web) como você quer que os elementos desse documento sejam
apresentados.
Ou seja, uma página em HTML é escrita utilizando texto puro (letras, números, etc.), que será
interpretado pelo navegador – este, por sua vez, deverá ler todas as tags (marcações) do documento e
apresentar os elementos da página de acordo com elas.
Exemplos de Tags: Tag única: (quebra de linha)

Tag dupla: ..texto.. (sublinha o texto)
Nota: Você pode utilizar tanto letras maiúsculas

quanto minúsculas ao criar sua página utilizando
HTML: = 
As páginas da web são abertas por um Programa de

computador chamado de "navegador". Exemplos de
navegadores são: FirefoxTM e Internet ExplorerTM
2. HTML e Compatibilidade:
Os vários navegadores interpretam HTML de formas diferentes. Caso pretenda criar websites
profissionalmente, o ideal é que você instale várias opções de navegadores em seu computador, de forma a
prever a aparência que suas páginas da web terão, ao menos nos navegadores mais comumente utilizados.
O computador que o internauta utiliza ao visitar seu website também poderá apresentar suas
páginas de uma forma diferente daquela que o seu computador apresenta, dependendo da configuração de
tela do monitor, da quantidade de cores suportadas, etc....
Atualmente, sua maior preocupação poderá ser com a resolução de tela utilizada, pois esta difere
bastante entre os diversos computadores. Os computadores mais antigos ainda podem ter uma resolução
de tela de 480 por 600 pixels, enquanto os mais novos chegam a 1440 por 900 pixels. Isto faz com que o
tamanho dos textos e imagens apareçam maiores ou menores, e faz com que alguns sites não caibam
inteiros na janela do navegador (precisando ser utilizada a barra de rolagem para ver o restante da página).
Sendo assim, a aparência final da sua página irá depender do programa (navegador) e do
computador que estão sendo utilizados por cada visitante do seu website.
3. Como Editar, Salvar e Visualizar:
As páginas da web, como mencionado, são desenvolvidas utilizando texto puro, o que significa que
basta escrever o código em um programa de edição de texto simples (como o ‘Bloco de Notas’ do Windows)
e depois salvá-lo como:
Tipo: Todos os arquivos (*.*) , nomeando-o com a extensão .html (exemplo: página.html)
Você pode utilizar qualquer editor de texto

simples para criar sua página da web.
Basta salvar sua página como tipo: Todos os Arquivos e com a
extensão .html
Alternativamente, você pode salvá-las com a extensão padrão de texto .txt e renomeá-las mais
tarde com a extensão de arquivo HTML: .html ou .htm
Nota: O WordTM é um exemplo de Editor de Texto que não serve para

digitar o código de páginas da web, pois ele gera documentos formatados (texto
em negrito, itálico, imagens, tabelas, etc.) - Ele oferece apenas a possibilidade
de converter seus documentos para o formato de páginas da web.
Eu não recomendo que você utilize conversores de documentos para criar suas páginas da web. Os
programas que convertem texto formatado em páginas da web geralmente limitam a aparência que você
pode dar ao seu site, e geram códigos cheios de falhas e erros. Isso pode causar incompatibilidade com
alguns navegadores e também tornar seu código quase ilegível.
Além de editores de texto puro, você pode utilizar um Editor de HTML especializado para editar
suas páginas. Existem diversos Editores de HTML no mercado, inclusive editores online e editores
gratuitos, basta escolher o que for ideal para você. Um conselho: editores de páginas da web que são muito
caros geralmente não valem o custo.. já testei sharewares e versões de avaliação destes programas, mas
desinstalei todos eles antes do prazo de utilização acabar.
O tipo de ferramenta que sempre utilizei para criar minhas páginas da web, antes mesmo de
conhecer muito bem a linguagem HTML (eu ainda não sabia criar tabelas e conhecia poucas marcações),
são os Editores de HTML que ajudam a escrever o código diretamente na fonte.
Com um clique de botão, ele inclui as marcações do HTML para você, e quando você menos
esperar terá memorizado todas e poderá escrever tudo sem a ajuda do editor. Com o tempo, você poderá
utilizar os botões do programa somente como atalhos, pois saberá todas as marcações necessárias.
Outro recurso interessante desses editores é o de auto-completar. Você começa a digitar uma
marcação e ele termina de completá-la. Isto aumenta a velocidade de criação da página, sem limitar sua
capacidade criativa, ao contrário dos editores visuais, os quais abordarei mais adiante.
Para achar um editor de HTML, basta buscar em sites de downloads. Se você não se sente à
vontade com a lingua inglesa, busque em sites de downloads brasileiros. Caso contrário, teste o HTML-Kit
(http://www.htmlkit.com/download/), um dos melhores editores de HTML gratuitos, em inglês.
Outra possibilidade disponível são os editores de HTML do tipo WYSIWYG (“What You See Is What
You Get”  “O Que Você Vê é O Que Você Obtém”), em que você não precisa editar nem uma linha de
código HTML, e são quase tão fáceis de utilizar quanto programas comuns que geram texto formatado.
Este tipo de Editor de Texto, no entanto, não é o que procuramos aqui, certo? Eles criam
dependência, porque não ajudam você a aprender o código HTML, e limitam suas opções. Além disso, a
maioria deles custa bem caro. Quanto mais recursos o editor escolhido oferecer a você, mais tempo você
terá que passar aprendendo a utilizá-lo, ao invés de usar esse tempo para aprender HTML. Um editor de
código, por outro lado, permite que você aprenda HTML ao mesmo tempo em que explora suas funções.
PLANO DE AÇÃO:
1. Abra o Bloco de Notas ou outro editor de sua preferência;

2. Digite algum texto simples, utilizando as três marcações/tags que vimos
até agora: coloque uma parte do seu texto entre e para que ela
fique em negrito; outras partes, coloque entre e para sublinhá-
las; e certifique-se de usar a marcação sempre que quiser que seu
texto mude de linha.
3. Salve sua página com o nome: index.html e abra-a em seu navegador da
internet – clicando sobre o ícone index.html, da mesma forma que você faz
para abrir qualquer outro arquivo em seu computador.
Para obter ajuda com os planos de ação, veja o vídeo em: http://www.criarwebsite.com/videos
Sempre que precisar, peça ajuda também em nosso fórum: http://www.criarwebsite.com/forum
HTML BÁSICO
1. Estrutura do HTML:
Esta é a estrutura de uma página em HTML:
<html>
<head>
<title> Aqui vem o Título </title>
</head>
<body>
Aqui vem o principal, o corpo da página.
</body>
</html>
Definições:
<html> ... </html> => Indicam o início e o fim da página.
<head> ... </head> => Indicam o cabeçalho da página.
<title> ... </title> => Título da página, dentro do cabeçalho.
<body> ... </body> => Entre estas duas marcações fica quase todo o código que você
irá utilizar para desenvolver sua página – é o corpo da sua página.
Exemplo: Veja onde aparece o título, ao abrir a página salva.

2. Meta Tags:
Dentro do cabeçalho da página, ou seja, entre <head> e </head>, você terá também um outro
componente importante do seu documento: As Meta Tags.
Meta Tags são marcações utilizadas para informar algumas propriedades do seu documento, como
autor da página, editor de texto utilizado, etc.
Elas não são obrigatórias mas há duas delas que você deverá sempre utilizar:
Meta Keywords e Meta Description
Essas duas marcações são utilizadas por alguns dos maiores websites de busca para indexar seu
website. Sem ter sua página indexada nesses grandes buscadores, você estará perdendo uma grande
oportunidade de publicidade para seu website.
<head>
<title>Título da Página</title>
<meta name=”keywords” value=”Aqui vêm palavras-chave relacionadas ao conteúdo do seu

website”>
<meta name=”description” value=”Aqui vem uma breve descrição sobre o seu website.”>
</head>
As palavras-chave relacionadas ao conteúdo do seu website (também chamadas de Keywords)

são as palavras que, ao serem digitadas por uma pessoa em um site de busca, trarão sua página como um
dos resultados. A breve descrição do seu site aparecerá nas páginas de resultado das buscas logo abaixo
do título da página.
Como você pode ver no exemplo acima, algumas marcações do HTML possuem atributos. Este é o
caso das meta tags, onde temos os atributos name e value, preenchidos de acordo com sau função.
3. Propriedades da Tag <body>:
Dentro da marcação <body>, você poderá determinar algumas propriedades para sua página da web:
<body background=”imagem-de-fundo.jpg”> ... </body>
background=”” => Aqui você indica a figura que servirá de pano-de-fundo (opcional).
Trata-se do “caminho virtual” até a figura - que pode ser, por exemplo:
background=”http://www.web.com/fundo1.jpg” (em outro website) ou
background=”figuras/fundo1.jpg” (dentro do diretório “figuras”) ou
background=”fundo.jpg” (no mesmo diretório que a página da web)
bgcolor=”” => Aqui você indica a cor do plano-de-fundo da página.
No HTML, você tem duas opções para determinar uma cor:
● Escrever o nome da cor em inglês (blue, red, purple, deepskyblue, etc.)

● Escrever seu hex number (ou número hexadecimal):
#FF8080 #FF80C0 #FF00FF #FF0000

#00FF00 #0080C0 #8080C0 #008000 etc....
text=”” link=”” vlink=”” alink=””

Cor padrão do texto, links, links visitados e links ativos, consecutivamente.
Links visitados são aqueles que levam para uma página onde o
internauta já esteve. Link ativo é aquele em que se está clicando.
Outras Propriedades da marcação <body>:
BgProperties=”fixed” => Neste exemplo, o plano-de-fundo permanecerá imóvel quando a página

estiver sendo rolada para baixo. Este efeito é interessante quando o plano-
de-fundo é uma imagem e não somente uma cor.
TopMargin=”0” => Define a margem superior da página.
Se você quiser definir uma margem maior no alto da página ou (como no

exemplo acima) retirar toda a margem superior para incluir alguma figura ou
tabela junto ao topo da página, use esta propriedade.
LeftMargin=”0” => Define a margem esquerda da página.
RightMargin=”0” => Define a margem direita da página.
BgSound=”musica.mid” => Define uma gravação de áudio, de fundo, para a página. Lembre-se
apenas de que nem todos têm o mesmo gosto musical que você....
PLANO DE AÇÃO:
4. Abra, no seu navegador da internet, a página criada no plano de ação

anterior;
5. Clique na página com o botão direito do mouse e selecione a opção “Exibir
Código-Fonte”. Isto fará com que o código fonte da página seja aberto e
você poderá editá-lo;
6. Acrescente à sua página as marcações novas aprendidas. Dê um título,
escolha as cores do texto e dos links, mude as margens para modificar a
posição do seu texto na página.
Ilustração de ajuda para o plano de ação.

4. Formatação de Texto:
Quebras de Linha:
Ao interpretar um documento HTML, o navegador irá ignorar múltiplos espaços e linhas em branco.
Isto significa que:
Texto Texto
Texto Texto
Aparecerá no documento final como:
Texto Texto Texto Texto
Então, para indicar uma quebra de linha, escreva: 

E, para indicar múltiplos espaços, utilize:
Subtítulos:
Para incluir um subtítulo em sua página, utilize a marcação:
<H1 align=”center”> ... </H1>
Sendo 1 um número entre 1 e 6, indicando a importância do subtítulo e, com isso, o tamanho da

letra a ser utilizada. 1 corresponde à maior letra e 6 corresponde à menor:
... H3 H4 H5 H6
align=”center” =>Alinhamento do sub-título na página.

center = centralizado left = à esquerda right = à direita
Propriedades da Fonte:
 … 
face=”” => Indica as fontes (estilos de letra) a serem utilizadas.

Tenha em mente que, se o computador do internauta não tiver nenhuma das fontes indicadas, ele
verá seu texto na fonte padrão do navegador dele, o que pode fazer seu documento ter uma aparência
completamente diferente da planejada.
As fontes indicadas acima são algumas das fontes “seguras”, que quase todos os computadores
têm. Outras fontes comuns são: Tahoma, Verdana, Impact, Courier.
size=”” O tamanho da letra vai de 1 a 7. (Desta vez, 1 corresponde à menor)
color=”” Cor do texto (indicada pelo seu número hexadecimal, como nas cores da tag <body>)
Outras Opções de Formatação do Texto:
As opções abaixo podem ter resultados diferentes, dependendo do navegador.
<BiG> texto </BiG>

Letra um pouco maior
 texto 

Letra um pouco menor
 texto ou texto 

Texto em Negrito
 ... ou ... 

Texto em Itálico
 ... 

Texto Sublinhado

Dentro das tags de “observações”, você pode escrever um texto

qualquer que não irá aparecer na sua página, somente no código fonte.
Desta forma, você pode indicar onde começa determinado texto
ou determinada parte da sua página para que mais tarde você possa
interpretar facilmente o seu código.
Exemplo: 
<CENTER> … </CENTER>
Os elementos da página que estiverem entre as marcações acima aparecerão centralizados.
<PRE> … </PRE>
O texto que estiver entre as marcações acima aparecerá na página da mesma forma como foi escrito no
código (pré-formatado): respeitando múltiplos espaços e quebras de linha.
<BLOCKQUOTE> … </BLOCKQUOTE>
Todas as linhas de texto que estiverem entre as duas tags acima terão as margens esquerda e direita
maiores que as das outras partes do documento.
Exemplo:
Texto texto texto texto texto texto texto

<blockquote> texto texto texto texto
texto texto texto texto </blockquote>
texto texto texto texto texto texto texto
5. Parágrafos:
 ... 
A marcação acima determina um parágrafo – que, por padrão, equivale a duas quebras de linha - e
muda o alinhamento do texto.
O alinhamento vertical, como regra geral, só funciona dentro de tabelas que tenham sua altura
definida e que tenham, em seu interior, texto que respeite esta altura.
Align=”center”
Centraliza o texto. Outras opções de alinhamento horizontal:
Left = esquerda Right = direita Justify = margens iguais
Valign=”top”
Alinhamento vertical do texto, neste caso alinhado ao topo. Outras opções:
Bottom = ao fundo (abaixo).
6. Linha Horizontal
<hr width=”200” size=”1” color=”#FF8000”>
Size=””
Espessura da linha
Width=””
Comprimento da linha
Color=””
Cor da linha
7. Imagens e Sons:
Imagens:
<img src=”figura.gif” width=”90” height=”40” border=”0”>
Src=””
Determina o endereço da figura na web.
Width=””
Determina a largura da figura.
Height=””
Determina a altura da figura.
Border=””
Determina a largura da borda.
Sons:
<embed src=”som.mid” autostart=”true” loop=1 hidden=”false”>
Src=””
Indica o endereço do som (o “caminho” até ele) na web.
Autostart=””
Determina se o som deverá começar sozinho ou somente se o internauta apertar o play.
True = Sim (começa sozinho) False = Não
Loop=””
Determina quantas vezes o som deverá se repetir. Um número negativo (ex.: -1) determina que o som toque
indefinidamente.
Hidden=””
Determina se o controle do som deverá estar oculto na página ou não.
True = Sim False = Não
 Se não estiver oculto, o internauta poderá utilizá-lo para

diminuir o volume, iniciar ou pausar a música, etc.. De
preferência, esta propriedade deve estar configurada como
“false”, caso contrário você corre o risco de espantar alguns
visitantes com uma música insistente.
8. Links Internos e Externos:
<a href=”pagina2.html” target=_blank>Clique Aqui!</a>
Tudo o que estiver entre <a ..> e </a> servirá de link (ligação) para outra página. Você pode colocar
uma marcação de imagem entre eles, por exemplo, para que a figura sirva de link para outra página.
href=””
Determina o destino para onde leva esse link. Pode ser outra página do site: nomedapagina.html, pode ser
outro website: http://www.outrosite.com/pagina.html, ou pode ser um documento qualquer que não uma
página da web: texto.txt, arquivo.zip.
target=_blank
Determina a janela em que a nova página deverá ser aberta.
Se você indicar “janela1”, por exemplo, o destino será aberto na janela nomeada “janela1”. Se ainda não
houver uma janela com esse nome, ele abrirá uma janela nova e a nomeará “janela1”.
No exemplo acima, _blank indica que uma nova janela deverá ser aberta.
Esta é uma propriedade opcional, mas você pode também indicar _self para que o novo documento seja
aberto na mesma janela.
<a href=”mailto:nome@email.com.br”>nome@email.com.br</a>
No exemplo acima, o link é um endereço de e-mail. Caso a pessoa utilize

um programa de e-mail integrado ao navegador, bastará clicar no link para
abrir o programa.
<a name=”02”>Parte 2:</a>
As marcações acima podem ser usadas para indicar uma âncora na parte
do texto que estiver entre elas. Desta forma, você pode criar um link para
esta parte da página, de qualquer outro lugar, digitando:
<a href=”#02”>Clique aqui para ir para a segunda parte.</a>
Você pode também indicar um link de uma página para uma parte de
outra página. Exemplo:
<a href=”http://www.site.com/pagina.html#02”>
Segunda parte da página. </a>
Usando imagens como links:
<a href=”pagina2.html”><img src=”figura.gif”></a>
Para utilizar imagens como links, basta envolver a marcação da imagem <img> com a marcação
de link (<a href=””> e </a>).
9. Listas Ordenadas e Não-Ordenadas:
Listas Ordenadas:
<ol type="1"> ( OL = ordered list = lista ordenada )

<li> Item 1 </li> ( LI = list item = item da lista )
<li> Item 2 </li>
</ol>
A lista acima terá seus itens listados utilizando números, como os tópicos deste tutorial.
1. Item 1
2. Item 2
Outras opções:
<ol type="A">
<li> Item 1</li>
<li> Item 2</li>
</ol>
A lista acima terá seus itens listados utilizando as letras maiúsculas do alfabeto.
Trocando “A” por “a”, serão utilizadas as letras minúsculas.
<ol type="I">
<li> Item 1</li>
<li> Item 2</li>
</ol>
A lista acima terá seus itens listados utilizando numerais romanos.

Listas Não-Ordenadas:
<ul type="disc"> ( UL = unordered list = lista não-ordenada )

<li> Item 1</li> ( LI = list item = item da lista )
<li> Item 2</li>
</ul>
O exemplo acima ficaria assim:

• Item 1
• Item 2
<ul type="circle">
<li> Item 1</li>
<li> Item 2</li>
</ul>

o Item 1
o Item 2
<ul type="square">
<li> Item 1</li>
<li> Item 2</li>
</ul>

 Item 1
 Item 2
Você pode, também, criar uma hierarquia entre os itens da lista:
<ul type="square">
<li> Item 1
<ul>
<li> Sub-item 1</li>
</ul>
</ul>
 Item 1
o Sub-item 1
o Sub-item 2
<ol type="1">
<li> Item 1
<ol type="a">
</ol>
</ol>
1. Item 1
a. Sub-item 1
b. Sub-item 2
Listas Descritivas:
<DL>
<DT> Item 1
<DD> Descrição 1</DD>
<DT> Item 2
<DD> Descrição 2</DD>
</DL>
Item 1
Descrição 1
Item 2
Descrição 2
PLANO DE AÇÃO:
7. Abra para edição, mais uma vez, a página criada no plano de ação
anterior;
8. Acrescente à sua página uma lista ordenada (<li>), listando as dúvidas que
você ainda tenha sobre a criação de páginas da web. Faça outra lista (<li>)
com as idéias para criação de sites que você possa ter tido durante a
leitura deste tutorial.
9. Coloque uma âncora no topo da sua página, nomeando-a “topo”. Crie, no
final da sua página, um link interno com o texto “Voltar para o início”. Esse
link deverá levar o internauta de volta para o topo da página (ou seja,
deverá apontar para a âncora “topo”).
CONCLUSÃO
Espero que este primeiro tutorial tenha ajudado você a entender como funciona a criação de
páginas da web. Há um longo caminho pela frente, desde a criação de sites simples com o conteúdo deste
pequeno tutorial, até a criação de páginas dinâmicas que interagem com os visitantes.
Suas sugestões e críticas me ajudarão a planejar melhor os próximos tutoriais da série. Participe
sempre do nosso fórum, proponha novos tópicos sobre a criação de websites – para geração de renda ou
diversão – a serem abordados nos próximos tutoriais, e assista aos vídeo-tutoriais.
Você certamente irá aprender HTML muito mais rápido criando a sua própria página, aos poucos,
do que apenas lendo tutoriais. Sugiro que você procure um Editor de HTML simples e gratuito na web e
comece a praticar um pouco. Quando achar que já consegue criar uma página simples com o que foi
ensinado acima, volte ao site (www.criarwebsite.com) e baixe a continuação deste tutorial.

Tutorial HTML 1

Enviado por

Dados do documento

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

Tutorial HTML 1

Enviado por

Direitos autorais:

Formatos disponíveis

TUTORIAL HTML

CRIANDO E PUBLICANDO PÁGINAS DA WEB

Copyright © 2008: Thaís Mendes Ramalho (thais.mendes@criarwebsite.com)

Existem dezenas de outros tutoriais de HTML na Internet mas eu quis desenvolver

Para adquirir a continuação deste tutorial, por favor, acesse:

Este tutorial parte da suposição de que você não tem praticamente

HTML (Hypertext Mark-up Language) é a linguagem de hipertexto utilizada para desenvolver

Exemplos de Tags: Tag única: <BR> (quebra de linha)

Nota: Você pode utilizar tanto letras maiúsculas

As páginas da web são abertas por um Programa de

3. Como Editar, Salvar e Visualizar:

Você pode utilizar qualquer editor de texto

Nota: O WordTM é um exemplo de Editor de Texto que não serve para

1. Abra o Bloco de Notas ou outro editor de sua preferência;

Esta é a estrutura de uma página em HTML:

<html> ... </html> => Indicam o início e o fim da página.

<head> ... </head> => Indicam o cabeçalho da página.

<title> ... </title> => Título da página, dentro do cabeçalho.

Exemplo: Veja onde aparece o título, ao abrir a página salva.

Meta Keywords e Meta Description

<meta name=”keywords” value=”Aqui vêm palavras-chave relacionadas ao conteúdo do seu

As palavras-chave relacionadas ao conteúdo do seu website (também chamadas de Keywords)

<body background=”imagem-de-fundo.jpg”> ... </body>

background=”http://www.web.com/fundo1.jpg” (em outro website) ou

background=”figuras/fundo1.jpg” (dentro do diretório “figuras”) ou

background=”fundo.jpg” (no mesmo diretório que a página da web)

bgcolor=”” => Aqui você indica a cor do plano-de-fundo da página.

No HTML, você tem duas opções para determinar uma cor:

● Escrever o nome da cor em inglês (blue, red, purple, deepskyblue, etc.)

#FF8080 #FF80C0 #FF00FF #FF0000

text=”” link=”” vlink=”” alink=””

BgProperties=”fixed” => Neste exemplo, o plano-de-fundo permanecerá imóvel quando a página

TopMargin=”0” => Define a margem superior da página.

Se você quiser definir uma margem maior no alto da página ou (como no

LeftMargin=”0” => Define a margem esquerda da página.

RightMargin=”0” => Define a margem direita da página.

4. Abra, no seu navegador da internet, a página criada no plano de ação

Ilustração de ajuda para o plano de ação.

Aparecerá no documento final como:

Texto Texto Texto Texto

Então, para indicar uma quebra de linha, escreva: <BR>

Para incluir um subtítulo em sua página, utilize a marcação:

<H1 align=”center”> ... </H1>

Sendo 1 um número entre 1 e 6, indicando a importância do subtítulo e, com isso, o tamanho da

align=”center” =>Alinhamento do sub-título na página.

<font face=”Arial, Helvetica, Sans-Serif” size=”1” color=”#000000”> … </font>

face=”” => Indica as fontes (estilos de letra) a serem utilizadas.

size=”” O tamanho da letra vai de 1 a 7. (Desta vez, 1 corresponde à menor)

Outras Opções de Formatação do Texto:

As opções abaixo podem ter resultados diferentes, dependendo do navegador.

<BiG> texto </BiG>

<SMALL> texto </SMALL>

<B> texto </B> ou <STRONG> texto </STRONG>

<I> ... </I> ou <EM> ... </EM>

<U> ... </U>

Dentro das tags de “observações”, você pode escrever um texto

Texto texto texto texto texto texto texto

<P align=”center” valign=”top”> ... </P>

<hr width=”200” size=”1” color=”#FF8000”>

<img src=”figura.gif” width=”90” height=”40” border=”0”>

<embed src=”som.mid” autostart=”true” loop=1 hidden=”false”>

 Se não estiver oculto, o internauta poderá utilizá-lo para

<a href=”pagina2.html” target=_blank>Clique Aqui!</a>