Apostila de HTML

CENAIC – Centro Nacional Integrado de Cursos 1
UTILIZANDO O HTML
Primeiro Exemplo
A melhor maneira de aprender a escrever páginas html é fazendo, para começarmos
iremos utilizar o Bloco de Notas (Notepad) do Windows, mas uma página html ou htm
pode ser escrita em qualquer editor de texto.
Para indicar que é uma página html o início do texto deve ser iniciado com
<HTML> e finalizado com </HTML>, esses códigos que são colocados entre o sinal de
< (menor) e > (maior) são chamados de tags, percebe-se que quando finaliza uma tag
é colocado uma / (barra), você irá perceber que se tem muitas tags em uma página
html, são tags para formatar texto, inserir figuras, etc.
Este é um pequeno exemplo de uma página HTML, abra o Bloco de Notas e vamos
começar.
<HTML>
<HEAD>
<TITLE>Primeiro Exemplo de HTML</TITLE>
</HEAD>
<BODY>
Esta é minha primeira página de html
</BODY>
</HTML>
Depois de escrito este primeiro exemplo clique no menu Arquivo depois em salvar
(deve ser salvo com a extensão html ou htm, e como estamos utilizando o bloco de
notas, o nome dado deve estar entre aspas, exemplo: “PrimeiroExemplo.htm”).
Para ver como ficou sua primeira página, basta dar dois cliques no arquivo salvo.
Agora vamos estudar um pouco sobre essas tags que acabamos de utilizar:
As tags <HTML> e </HTML> indicam que o documento é do tipo html.
As tags <HEAD> e </HEAD> indicam que é um cabeçalho.
As tags <TITLE> e </TITLE> indicam o título da página, que aparecerá na barra
superior do browser.
As tags <BODY> e </BODY> indicam o corpo do texto.
Juntamente com a tag <BODY> podemos usar os seguintes parâmetros, que não são
obrigatórias, caso não existam assumem um valor default:
Bgcolor – especifica uma cor de fundo para a página;
Background – especifica a imagem (.jpg ou .gif) usada de fundo da tela;
Bgproperties – Bgproperties=”Fixed”, fixa a imagem no fundo;
Text – define uma cor para o texto;
Link – define uma cor para os links;
Vlink – define cor para os links já visitados;
Alink – define a cor para o link na hora que for ativado.
Vamos agora fazer o mesmo exemplo anterior, mas agora vamos testar algumas
opções suportadas pela tag <BODY>, menos as opções dos links, que veremos mais
tarde.

<HTML>
<HEAD>
</HEAD>
<BODY Bgcolor=”Black” Text=”White”>
Esta é minha primeira página de html,
trocando a cor do fundo padrão para preta
e a cor da letra padrão para branca, utilizando
as opções Bgcolor e Background.
</BODY>
</HTML>
<!—Exemplo 2-->
<HTML>
<HEAD>
</HEAD>
<BODY Background=“triangulos.bmp”>
Esta é minha primeira página de html,
colocando uma imagem de fundo na página.
</BODY>
</HTML>
O que está entre  não será mostrado pelo navegador, e como podemos ver,
escrevermos o texto em mais de uma linha, porém o navegador não está obedecendo
esta regra, para que possa ser mostrado o texto em mais de uma linha, terá de ser
utilizado a tag após cada linha, ela faz com que a próxima frase venha escrito
logo abaixo.
Caso a imagem esteja em outra pasta, pode ser digitado o caminho e nome do arquivo.
Vamos ver dois exemplos para quer percebamos melhor.
Exemplo 01
<BODY Background=“c:\Imagem\triangulos.bmp”>
Aqui a figura triangulos.bmp se encontra dentro da pasta imagem que está na
unidade C:
Exemplo 02
<BODY Background=“Imagem\triangulos.bmp”>
Aqui a figura triangulos.bmp se encontra dentro da pasta imagem que está dentro da
pasta onde se encontra o arquivo html que está sendo executado.
Formatação do Texto
Podemos formatar o texto com as tags para que ele possa ficar ao nosso gosto, aqui
estão algumas delas:
 Quebra de linha, iniciando o texto seguinte na linha abaixo
 Força o fim de um parágrafo.
<HR> Inclui uma linha horizontal no texto
 Negrito
 Itálico
 Sublinhado
 Sobrescrito
 Subscrito
Exemplos:
Quebra de linha 
Quebra de linha 2.
Fim do parágrafo 

Fim do parágrafo 2.
<HR width=100% size=”7”>

(width indica o comprimento da linha na página em porcentagem, e o size indica a espessura
dela na página)
 Texto em Negrito 
 Texto em Itálico 
 Texto Sublinhado 
Texto Sobrescrito
 
 Texto Subscrito 
Fonte, Tamanho e Cor do Texto.

Para modificarmos a fonte, tamanho e cor do texto utilizamos as tags e
, com as opções, face (tipo da letra), size (tamanho da letra) e color (cor
da letra), da seguinte forma:
 Texto com letra arial, tamanho
18 e cor vermelha
Também ao invés de escrever as cores, pode usar os códigos delas, abaixo teremos
uma tabela com algumas cores e códigos.
Tabela de Cores
#000000 Preta
#FFFFFF Branca
#008000 Verde
#800000 Marrom
#808000 Bege
#000080 Azul Escuro
#800080 Bordo
#808080 Cinza
#FFFF00 Amarela
#00FF00 Verde Limão
#00FFFF Ciano
#FF00FF Margenta
#C0C0C0 Cinza Claro
#FF0000 Vermelha
#0000FF Azul
#008080 Verde
Alinhamento do Texto
O texto é alinhado a esquerda, centralizado e a direita, as tags de alinhamento são
utilizadas da seguinte forma:
 Texto a esquerda 

 Texto Centralizado 
 Texto a direita 
Exercício
É para ser construída uma página HTML que nos mostre exatamente como está no
centro do quadro pontilhado, seguindo a descrição que está logo abaixo, para cor da
letra e fundo, tamanho e tipo de letra e alinhamento.
Os outros exercícios deverão ser feitos da mesma maneira.
Exercício 01
Vamos exercitar algumas tags!!!

Negrito
Itálico
Sublinhado
Negrito e Itálico
Negrito e Sublinhado
Itálico e Sublinhado
Negrito, Sublinhado e Itálico
Descrição do Exercício 01
 O Título será: Exercício 01;
 O Fundo da Página será preta;
Nº. Linha Descrição
 01 Centralizado, Letra Arial, Tamanho 7, Negrito e cor Branca
 02 Centralizado, Letra Arial, Tamanho 6, Negrito e cor Amarela
 03 Esquerda, Letra Arial, Tamanho 5, cor Vermelha, Negrito
 04 Esquerda, Letra Arial, Tamanho 5, cor Vermelha, Itálico
 05 Esquerda, Letra Arial, Tamanho 5, cor Vermelha, Sublinhado
 06 Direita, Letra Arial, Tamanho 5, cor Azul, Negrito e Itálico
 07 Direita, Letra Arial, Tamanho 5, cor Azul, Negrito e Sublinhado
 08 Direita, Letra Arial, Tamanho 5, cor Azul, Itálico e Sublinhado
 09 Direita, Letra Arial, Tamanho 5, cor Azul, Negrito, Itálico e Sublinhado
Definição de Listas
As listas são utilizadas para organizar seu texto quando dor necessário uma relação de
itens ordenados ou não.
 Listas Ordenadas
<OL TYPE=a> </OL>
A Tag <OL> inicia uma lista, o TYPE define o tipo de numeração da lista, a tag
</OL> finaliza a lista, caso não coloque o TYPE, será colocado como números
arábicos, os tipos são:
A – Letras Maiúsculas
a – Letras Minúsculas
I – Algarismos Romanos
1 – Números Arábicos
<Li> indica o item da lista.
Exemplo:
<OL TYPE=a>
<Li>Primeiro
Código HTML <Li>Segundo
<Li>Terceiro
</OL>
a. Primeiro
b. Segundo
Exibido no Browser c. Terceiro
 Listas Não-Ordenadas
<UL TYPE=disk> </UL>
A Tag <UL> inicia uma lista, o TYPE define o tipo de numeração da lista, a tag
</UL> marca o final da lista, caso não coloque o TYPE, será colocado como
círculos:
disk – Pequeno Disco
square – Quadro Pequeno
circle – Círculo
<Li> indica o item da lista.
Exemplo:
<UL TYPE=circle>
<Li>Primeira
<UL TYPE=square>
<Li>Turma 01
Código HTML
<Li>Turma 02
</UL>
<Li>Segunda
<Li>Terceira
</UL>
o Primeira
 Turma 01
 Turma 02
Exibido no Browser o Segunda
o Terceira
OBS. Como pode ser visto, no código HTML foi dado alguns espaços na linha 3, 4 e 5,
mas isso não influencia em nada, poderia normalmente serem digitadas uma abaixo da
outra, mas isso é uma boa técnica de programação, assim é mais fácil de verificar
erros, e ainda já dá para ter uma idéia de como irá ser exibido no browser.
 Listas de Definição
<DL> <DT> <DD> </DL>
<DL> - Marca o Início da Lista
<DT> - Indica o Termo a ser Definido
<DD> - Indica a Definição do Termo Acima
</DL> - Indica o Fim da Lista
Exemplo:
Exemplo de Definição
<DL>
<DT>CPF
Código HTML <DD>Cadastro de Pessoa Física
<DT>OAB
<DD>Órgão dos Advogados do Brasil
</DL>
Exemplo de Definição
Exibido no Browser CPF

Cadastro de Pessoa Física
OAB
Órgão dos Advogados do Brasil
Exercício
Exercício 02
Listas Ordenadas, Listas Não-Ordenadas
Listas de Definição
Listas Ordenadas
I. Negrito
II. Itálico
III. Sublinhado
IV. Negrito e Itálico
Listas Não-Ordenadas
 Negrito, Itálico
o Negrito
o Itálico
 Itálico, Sublinhado
o Itálico
o Sublinhado
Listas de Definição

Tag para Negrito

Tag para Itálico

Tag para Sublinhado
 O Título será Exercício 02;
 O fundo da tela será Azul Escuro;
 A palavra Exercício 02 será escrito em Vermelho, Tamanho 7, Letra Arial e
Negrito;
 O Subtítulo Listas Ordenadas, Listas Não-Ordenadas e Listas de Definição,
é escrito em Amarelo, Tamanho 5, Letra Arial e Negrito;
 O restante é tudo escrito em Branco, com Letra Arial, mudando somente o
tamanho que são 5 e 4, repare os detalhes, pois existem linhas que estão em
Negrito, outras em Itálico e Sublinhado.
 OBS. Nesse exercício aparece no Browser , mas para fazer com
que pareça no seu navegador essas tags é usado os seguintes códigos:
 <(<) e >(>), então para aparecer a tag , deve ser escrito da
seguinte maneira:
 &lt:B>
Inserindo Imagens
As imagens podem ser de vários formatos, mas os mais utilizados são as .GIF e as
.JPG. Vamos ver algumas diferenças entre as duas.
.GIF
Foi desenvolvido pela CompuServe com intenção de diminuir o tamanho do
arquivo para tráfego na rede. É recomendado para ícones ou imagens com
menos de 256 cores, cores lisas, puras, preto e branco.
Comparando com o formato .JPG em tamanho é maior, porém em qualidade é
superior.
Outra diferença é que uma imagem .GIF pode ser transparentizada.
.JPG
Esse padrão foi proposto pelo COMITÊ ISO, é usada para imagens mais
complexas como fotografias com variação e mais de 256 cores. Permite alta taxa
de compressão, por isso gera um arquivo menor, às vezes 1/5 do tamanho
original, só que tudo isso implica numa perda de informação e qualidade.
Para inserirmos uma imagem, utilizamos a tag <IMG SRC>, o IMG indica que será
inserido uma imagem e o SRC mostra o caminho e nome da imagem, juntamente com
ela podemos usar alguns parâmetros que não são obrigatórios, caso não o utilizarmos
será inserida a imagem no tamanho real dela.
Parâmetros que podem ser usados junto com a tag <IMG>
 border para determinar a moldura da imagem;
 width para determinar a largura da imagem;
 height para determinar a altura da imagem;
 align=left para alinhar a imagem a esquerda do texto;
 align=top para alinhar o texto com o topo da imagem;
 align=middle para alinhar o texto com o meio da imagem;

 align=bottom para alinhar o texto com a parte inferior da imagem.
Exemplo 01
<img src="Leao.jpg">
Aqui a figura Leao.jpg se encontra dentro da pasta onde está localizado o arquivo
HTML que está sendo executado.
Exemplo 02
<img src="Imagem/Leao.jpg">
Aqui a figura Leao.jpg se encontra dentro da pasta imagem que está dentro da pasta
onde se encontra o arquivo html que está sendo executado.
Destas duas formas a figura será inseria no tamanho normal dela, caso queira
modificar o seu tamanho basta utilizar os parâmetros width e height.
Exemplo
<img width=100 height=100 src=”Imagem/Leao.jpg”>
Exercício
Exercício 03
Treinando a Inserir Imagens no Arquivo HTML
Vende-se um Notebook
Pentium III 750 MHZ

HD 10 GB
128 MB Ram
CD-ROM 24x
Tela Matriz Ativa 14"
Sistema Operacional Windows ME
Interessados ligar para o Fone: 6666-9999
Não perca tempo
Comemore essa Páscoa

Comprando esse incrível cesto
Contendo 8 Ovos deliciosos de chocolates
Cada Ovo é feito com um tipo diferente de chocolate
E dentro de cada um deles, uma surpresa diferente.
Interessados ligar para o Fone: 9854-9889

 Nesse não trabalharemos com cores de fundo e letra;
 O Título será Exercício 03;
 A palavra Exercício 03 será escrito Tamanho 7;
 O subtítulo: Treinando a Inserir Imagens no Arquivo HTML, é do Tamanho 5;
 Os subtítulos: Vende-se um Notebook e Não perca tempo, são do Tamanho
5;
 Os outros textos são do Tamanho 3;
 As Linhas de separação tem Comprimento 100% e Tamanho 7;
 Todas as Letras estão em Arial;
 A primeira imagem chama-se: Notebook.jpg;
 A segunda imagem chama-se: Cestopascoa.jpg;
Inserção de Tabelas
As tabelas são usadas para organizar o conteúdo de uma página, pois não existem
formas mais sofisticadas de controlar o posicionamento de imagens e textos, logo
utilizamos as tabelas para nos ajudar.
As tabelas são compostas de linhas, dentro das quais são colocadas células com o
conteúdo. Dentro das células pode-se colocar textos, imagens e até mesmo outra
tabela. Uma linha pode conter várias células, formando-se então uma tabela com várias
colunas.
Para construirmos uma tabela usamos as seguintes tags:
<TABLE> </TABLE> Início e fim da tabela;
<TH> </TH> Define o cabeçalho de cada coluna;
<TR> </TR> Delimita a linha;
<TD> </TD> Delimita cada elemento da tabela, cada célula.
Alguns atributos que podem ser usados na tabela:

 Colspan: Especifica quantas colunas da tabela a célula ocupará;
 Rowspan: Especifica quantas linhas da tabela a célula ocupará;
 Width: Define a largura exata da célula;
 Align: Alinhamento horizontal (right, center, left)
 Valign: Alinhamento vertical (top, middle, bottom)
 Border: Especifica a espessura da borda da tabela, caso
especifique tamanho 0 (zero), a borda estará invisível.
 Bgcolor: Especifica a cor do funda da célula;
 Bordercolor: Especifica a cor da borda da célula;
 Bordercolorlight: Especifica a cor da borda clara da célula;
 Bordercolordark: Especifica a cor da borda escura da célula;
 Background: Coloca uma imagem no fundo da célula.
Exemplo 01:
<TABLE BORDER=4> <TH>Coluna 01</TH><TH>Coluna 02</TH>
<TR><TD>Linha 01, Coluna 01</TD><TD>Linha 01, Coluna02</TD></TR>
<TR><TD>Linha 02, Coluna 01</TD><TD>Linha 02, Coluna02</TD></TR>
</TABLE>
Resultado na tela do Browser:
Coluna 01 Coluna 02
Linha 01, Coluna 01 Linha 01, Coluna02
Linha 02, Coluna 01 Linha 02, Coluna02
Exemplo 02:
<TABLE BORDER=4>
<th COLSPAN=2>Colunas 1 e 2</th>
<tr><td>Linha01, Coluna01</td><td>Linha01, Coluna02</td></tr>
<tr><td>Linha02, Coluna01</td><td>Linha02, Coluna02</td></tr>
<th rowspan=3>3 Linhas</th>
<td>Uma Linha</td>
<tr><td>Duas Linhas</td></tr>
<tr><td>Três Linhas</td></tr>
</TABLE>
Colunas 1 e 2
Linha01, Coluna01 Linha01, Coluna02
Linha02, Coluna01 Linha02, Coluna02
3 Linhas Uma Linha
Duas Linhas
Três Linhas
Exemplo 03:
<TABLE BORDER=1 WIDTH=100%>
<th colspan=3>Tabela de Cores</th>
<tr>
<td width=33% align="center">Cor</td>
<td width=33% align="center">Código</td>
<td width=33% align="center">Nome</td>
</tr>
<tr>
<td bgcolor="#000000">&nbsp</td>
<td align="center">#000000</td>
<td align="center">Preta</td>
</tr>
<tr>
<td bgcolor="#0000FF">&nbsp</td>
<td align="center">#0000FF</td>
<td align="center">Azul</td>
</tr>
<tr>
<td bgcolor="#FFFF00">&nbsp</td>
<td align="center">#FFFF00</td>
<td align="center">Amarela</td>
</tr>
<tr>
<td bgcolor="#00FF00">&nbsp</td>
<td align="center">#00FF00</td>
<td align="center">Verde Limão</td>
</tr>
<tr>
<td bgcolor="#FF0000">&nbsp</td>
<td align="center">#FF0000</td>
<td align="center">Vermelha</td>
</tr>
</TABLE>
Tabela de Cores
Cor Código Nome
#000000 Preta
#0000FF Azul
#FFFF00 Amarela
#00FF00 Verde Limão
#FF0000 Vermelha
Exercício:
Porções de Peixes
Temos uma grande variedade de porções de peixes,
tudo isso para que possamos satisfazer nossos hóspedes.
Peixes Valor em R$
Barbado. . . . . . . . . . . . . xx,xx
Berluza. . . . . . . . . . . . . xx,xx
Cascudo. . . . . . . . . . . . . xx,xx
Dourado. . . . . . . . . . . . . xx,xx
Lambari. . . . . . . . . . . . . xx,xx
Piau . . . . . . . . . . . . . . xx,xx
Pintado. . . . . . . . . . . . . xx,xx
Tilápia. . . . . . . . . . . . . xx,xx
Traira . . . . . . . . . . . . . xx,xx
 O fundo da página será cinza claro;
 O Título é Exercício 04;
 A figura chama-se fmenu.jpg, o seu tamanho é de 100 (altura) e 100
(largura), e está centralizada;
 O Título Porções de Peixes está em Arial, Tamanho 7, Negrito e
Centralizado;
 As duas linhas seguintes estão em Arial e Tamanho 3;
 Logo abaixo estão os Subtítulos Peixes e Valor em R$, que estão em Arial,
Negrito e Tamanho 3;
 O restante (Peixes e seus valores), só estão em Itálicos;
 OBS. Lembre-se que estamos trabalhando com tabelas, neste exercício temos
duas tabelas, uma onde está a Figura e o Título, e outra onde está o cardápio.
As Tabelas possuem duas colunas.
Links com Outros Documentos

Podemos fazer links para outros documentos (páginas, imagens, sons e outros
serviços da Internet), através da tag <A> </A>, chamadas de âncoras. Precisamos
informar o HREF (endereço de onde está a página que será acessada) e o
TEXTO/IMAGEM que indicará o link.
Por exemplo:
<A HREF=http://endereço/documento>texto/imagem</A>
 endereço: é o endereço de alguma página da internet que pode ser colocado
nesse link;
 documento: pode ser uma outra página que você criou, ou então uma imagem,
ou um documento qualquer, assim será solicitado um downlod;
 texto: é a palavra ou frase que será mostrada pelo Browser para que possa ser
clicada;
 imagem: é uma imagem que poderá ser clicada.
Exemplos:
Chamando uma página da internet
Código HTML <A HREF=http://www.olnet.com.br>Olnet</A>
Exibido no Browser Olnet
Chamando um serviço de Correio Eletrônico para envio de email;
Código HTML <A HREF="Mailto:adm@olnet.com.br">adm@olnet.com.br</A>
Exibido no Browser adm@olnet.com.br

Chamando o arquivo exercício_03.htm em uma nova janela;
<A HREF="exercício_03.htm" target="_blank">Exercício

Código HTML 03</A>
Exibido no Browser Exercício 03
Chamando o arquivo exercício_03.htm em uma nova janela, mas agora será dado um
clique em uma imagem;
<A HREF="exercício_03.htm" target="_blank"><img

Código HTML src=”Notebook.jpg” width=50 heigth=50 border=0>
</A>
Exibido no Browser
OBS. Usamos o parâmetro target=”_blank” para que possa ser aberta a página em
uma nova janela, e também quando utilizarmos duas ou mais páginas em uma mesma
janela, podemos utilizá-lo para direcionar em qual das páginas da janela que queremos
que seja substituída, mas veremos isso mais para frente, quando estivermos
trabalhando com o FrontPage e criando o menu da nossa loja virtual.
Exercício
Exercícios Feitos em HTML

Foram feitos 4 (quatro exercícios), esse é o quinto.
Nesse terá os links dos exercícios que foram feitos, e uma pequena descrição de cada um.
Exercícios Descrição
Exercício voltado para o treinamento de Cor de Fundo, Tamanho -
Exercício 01
Tipo - Cor da Letra, Alinhamento, Negrito, Itálico e Sublinhado.
Esse exercício além de utilizar o que já foi visto no exercício anterior,
Exercício 02 aprenderemos a utilizar as Listas Ordenadas, Listas Não-Ordenadas
e as Listas de Definição.
Nesse exercício praticamos um pouco mais do que já vimos, e ainda
Exercício 03 aprendemos a inserir Linhas Horizontais e a Inserir Imagens,
fazendo com que as páginas fiquem mais agradáveis.
Aqui foi criado um Menu de Porções de Peixes, precisando então a
utilizar tabelas, pois com elas, podemos fazer uma formatação mais
Exercício 04 complexas.
Mas a tabela que utilizamos aqui, as deixamos sem borda, fazendo
com que, quem visualize o Menu, não a veja.
Nele colocamos em prática a inserção de Hiperlinks, cada exercício
Exercício 05 que for clicado será aberto o exercício correspondente em uma nova
janela.

Apostila de HTML

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

Apostila de HTML

Enviado por

Direitos autorais:

Formatos disponíveis

CENAIC – Centro Nacional Integrado de Cursos 1

Fim do parágrafo <p>

<HR width=100% size=”7”>

<B> Texto em Negrito </B>

<I> Texto em Itálico </I>

<U> Texto Sublinhado </U>

<SUB> Texto Subscrito </SUB>

Fonte, Tamanho e Cor do Texto.

<p align=”left”> Texto a esquerda </p>

Vamos exercitar algumas tags!!!

Exibido no Browser CPF

 border para determinar a moldura da imagem;

 width para determinar a largura da imagem;

 height para determinar a altura da imagem;

 align=left para alinhar a imagem a esquerda do texto;

 align=top para alinhar o texto com o topo da imagem;

 align=middle para alinhar o texto com o meio da imagem;

Pentium III 750 MHZ

Interessados ligar para o Fone: 6666-9999

Não perca tempo

Comemore essa Páscoa

Interessados ligar para o Fone: 9854-9889

Alguns atributos que podem ser usados na tabela:

Resultado na tela do Browser:

Links com Outros Documentos

Código HTML <A HREF=http://www.olnet.com.br>Olnet</A>

Exibido no Browser Olnet

Chamando um serviço de Correio Eletrônico para envio de email;

Código HTML <A HREF="Mailto:adm@olnet.com.br">adm@olnet.com.br</A>

Exibido no Browser adm@olnet.com.br

<A HREF="exercício_03.htm" target="_blank">Exercício

Exibido no Browser Exercício 03

<A HREF="exercício_03.htm" target="_blank"><img

Exercícios Feitos em HTML

Você também pode gostar