Vous êtes sur la page 1sur 13

APOSTILA

DE

HTML
Escola Técnica (Professor: Ronni M. Madeira) Página: 2

Linguagem HTML
O Que é HTML ?
Você aprenderá o que é HTML, o que é uma página HTML e como salvá-la.

HTML - Hypertext Markup Language, na sigla em inglês, significa Linguagem de


Marcação de Hipertexto. É uma linguagem dedicada à construção de Página Web.
Página Web (é um documento composto de textos e códigos especiais chamados tags).
Os objetivos básicos da HTML são: formatar o conteúdo de uma página Web criar ligações entre
várias páginas HTML é uma linguagem de programação baseada em códigos especiais
denominados tags.
Tags (é um comando que diz como o texto ou a informação de uma página Web deve ser exibido)

Hipertexto é o conceito que possibilita a "navegação" entre segmentos de


texto independentemente de sua seqüência linear ou de sua localização.

• O que é uma página Web


A página Web é um documento criado através do código HTML, que
pode ser visualizado na rede mundial de computadores. Além de
textos, as páginas Web aceitam imagens, animações, sons e vídeos. O
código HTML, utilizado na criação da página Web, pode ser escrito em qualquer editor de
textos, por mais simples que seja, como o Bloco de notas do Windows. Visualize abaixo,
um exemplo de código – fonte de uma página HTML.
Código-fonte é o documento que exibe todos os comandos e informações de uma página Web
em códigos HTML.

Neste curso utilizaremos os termos "Página Web" e "Página HTML" como sinônimos.

• Salvando uma página HTML


É obrigatório salvar a página no formato HTML, para que você possa
visualizá-la em um browser.
Vamos utilizar o Bloco de notas do Windows como nosso editor de HTML.
1. Clique no botão INICIAR, localizado na barra de tarefas do Windows.
2. Em seguida, clique em Acessórios e Bloco de Notas.
O Bloco de notas é aberto e mostra uma página em branco.
3. Clique no menu Arquivo e, em seguida, clique em Salvar Como.
4. Na caixa de diálogo Salvar como, escolha uma pasta no campo Salvar em, ou crie uma nova
pasta clicando no ícone (Criar nova pasta).
5. No campo Nova pasta, digite: curso_basico.html. Pressione a tecla Enter.
6. Dê dois cliques sobre a pasta para abri-la.
7. No campo Nome, digite: iniciando.html e clique em Salvar.

Importante : Salve todos os arquivos (páginas html, imagens, etc.) dentro da


mesma pasta, para que a página html carregue-os em seu conteúdo. Acrescente a
extensão .html ou .htm depois do nome do documento para que o Browser reconheça-o
como um arquivo HTML.
Escola Técnica (Professor: Ronni M. Madeira) Página: 3

Browser, também conhecido como navegador, é o programa que permite a exibição e a interação
entre páginas Web. Os mais conhecidos são o Netscape Navigator e o Microsoft Internet
Explorer.

• Sumário
Você aprendeu o que é HTML, o que é uma página HTML e como salvá-la.

Elementos de uma página HTML.


Você aprenderá o que tags e quais são as principais tags de uma página. Aprenderá, também,
quais elementos compõem a estrutura básica de uma página HTML.

• O que são tags


O navegador é um compilador, ou seja, ele interpreta a linguagem HTML
e exibe na tela a formatação da página, definida através dos códigos,
conhecidos como tags.
As tags são identificadas facilmente por serem envolvidas pelos sinais "< >" (menor e maior) e
"< / >" (menor, barra, maior).
O formato genérico de uma tag é: <nome da tag>texto</nome da tag>.
A barra indica que a tag está sendo fechada. As tags são utilizadas aos pares. Elas "cercam" uma
faixa de texto e o altera.
Exemplo: <i>texto em itálico</i> faz com que o texto entre as tags apareça assim
em um Browser: texto em itálico. A tag com a barra " / " indica que ali fecha-se o
cerco que envolve um texto.

Veremos, no decorrer do curso, algumas tags que não precisam ser fechadas.

• Conhecendo a estrutura de uma página HTML


Nos próximos tópicos você verá como utilizar as principais tags, mas
antes conheça a estrutura de uma página HTML.
As tags <html> e </html> são a identificação de uma página HTML, ou seja,
fazem com que a página não seja considerada um documento de texto comum.
Você deve utilizar a tag <html> para iniciar a estrutura de uma página HTML e a tag
</html> para encerrar esta estrutura.
O par de tags <head> e </head> é usado para especificar o cabeçalho da página. O
cabeçalho contém informações sobre a página que não aparecem no navegador.
Entre as tags <body> e </body> se constrói o corpo da página HTML, ou seja, entre elas
são colocados os textos, imagens e links.
Visualize, logo abaixo, a estrutura básica de uma página HTML.

<html>
<head>
<title> </title>
</head>

<body>

</body>

</html>
Escola Técnica (Professor: Ronni M. Madeira) Página: 4

• Conhecendo os principais elementos de uma página HTML


Uma página HTML é composta basicamente por título, texto, imagem e Links.
Esses elementos são posicionados na página através de comandos específicos da
linguagem HTML.
Link é um "atalho" que pode levá-lo a outras partes do documento ou a outros documentos. Em
páginas HTML, os links são representados por textos sublinhados ou imagens. Quando você
aponta o mouse para um link, o cursor se transforma em uma mãozinha apontando.

• Sumário
Você aprendeu o que são tags e quais são as principais tags de uma página. Aprendeu,
também, quais elementos compõem a estrutura básica de uma página HTML.

Inserindo Texto
Você aprenderá a inserir título e texto em uma página HTML, alinhar, mudar de linha,
inserir parágrafos e cabeçalhos.

• Inserindo texto em uma página HTML


Veja como é simples inserir título e texto em uma página HTML. Abra o arquivo
"iniciando.html" salvo anteriormente e crie uma estrutura básica.
<html>
<head>
</head>
<body>
</body>
</html>

Insira um título em sua página digitando entre as tags <head> e </head> o comando:
<title>Curso de HTML</title>. O nome dado ao título será exibido na barra de títulos do
navegador. Insira um texto em sua página digitando: Meu curso de HTML entre as tags
<body> e </body>. Após inserido o título e o texto, a estrutura do arquivo ficará assim:
<html>
<head><title>Curso de HTML</title></head>
<body>Meu curso de HTML</body>
</html>

Tenha cuidado ao criar a estrutura da página, pois se uma tag estiver aberta, ou seja,
sem um dos caracteres <, > ou /, você não visualizará corretamente a página em um
Browser.
Escola Técnica (Professor: Ronni M. Madeira) Página: 5

• Visualizando a página em um navegador


Após ter inserido o título e o texto em sua página, você visualizará o
resultado em seu navegador. Antes de mais nada, salve o arquivo "iniciando.html"
clicando no menu
Arquivo e em Salvar do Bloco de notas.
1. Em seguida, abra o Windows Explorer, clicando no Iniciar da Barra de tarefas do Windows.
2. Clique em Programas, Windows Explorer.
3. Abra a pasta "curso_basico" e clique duas vezes sobre o arquivo "iniciando.html", para abri-
lo.

O seu navegador se abrirá, exibindo o arquivo com o título e o texto inserido.

• Alinhando o texto
Após inserir o texto, aprenda como alinhá-lo em sua página HTML.
As tags de alinhamento do texto são: <div> e </div>
O atributo de alinhamento é: align
As opções de alinhamento são:
center - texto centralizado
right - texto à direita
left - texto à esquerda
Volte ao Bloco de notas, clicando no botão correspondente na Barra de tarefas do Windows.

Com o arquivo "iniciando.html" aberto:


1. Posicione o cursor antes da expressão "Meu curso de HTML"
2. Digite o comando para centralizar o texto: <div align="center">Meu curso de HTML</div>
3. Salve a página clicando no menu Arquivo e em Salvar.
4. Volte ao navegador, clique no botão Atualizar (Explorer) ou Reload (Navigator) para ver o
texto centralizado.

Note que a tag <div> foi finalizada com a tag </div>. O recurso align=center, não
precisa ser repetido no fechamento do comando, pois ele não é uma tag e sim um
atributo das tags <div> e </div>.
Escola Técnica (Professor: Ronni M. Madeira) Página: 6

• Inserindo parágrafos
Uma das diferenças na construção de páginas HTML e textos tradicionais
é que não é possível adicionar parágrafo em HTML apenas pressionando
a tecla Enter. É necessário forçar o fim do parágrafo ou a quebra de linha
utilizando comandos especiais. As tags de parágrafos são: <p> e </p> Com o arquivo
"iniciando.html" aberto no Bloco de notas:
1. Posicione o cursor após a tag </div>. Você pode iniciar uma nova linha pressionando Enter.
2. Digite: <p>Definindo parágrafo na página HTML</p>
3. Salve o arquivo, clicando no menu Arquivo e em Salvar.
4. Vá para o navegador e dê um clique no botão Atualizar (Explorer) ou Reload (Navigator),
para visualizar o parágrafo inserido em sua página.

A tag </p> não precisa do fechamento para funcionar. No entanto, em


documentos que usam componentes avançados da linguagem, a
correspondente de fechamento é necessária. Por isso é melhor se habituar a
colocar o par de tags.

• Inserindo quebra de linha


Veja como é simples inserir quebras de linhas em seu texto.
A tag para quebra de linha é: <br>
Esta tag pode ser inserida em qualquer ponto do corpo de sua página HTML.
1. Volte ao arquivo "iniciando.html" no Bloco de notas.
2. Após a tag </p> digite: quebra de linha.
Em seguida, digite a tag <br> e novamente digite: quebra de linha.
A estrutura ficará assim:
quebra de linha <br>
quebra de linha.
Obs.: A tag <br> não utiliza a tag de fechamento.
3. Salve o arquivo no Bloco de notas e atualize-o no navegador.

Note que entre as duas frases, houve uma quebra de linha automática.

• Inserindo cabeçalho
O cabeçalho é uma tag que define o tamanho de cada linha de um texto
da página. O tamanho do cabeçalho pode ser diferenciado.
1. No Bloco de notas, posicione o cursor após o texto "quebra de linha" e
pressione a tecla Enter para iniciar uma nova linha.
2. Digite: <h1>Inserindo cabeçalho<h1>.
3. Pressione a tecla Enter e digite: <h2>Inserindo cabeçalho</h2>.
4. Pressione a tecla Enter novamente e repita estes passos até <h6>.
5. Salve o arquivo no Bloco de notas e atualize-o no navegador.

A tag cabeçalho possui 6 opções de tamanho: de <h1> até <h6>.

• Sumário
Você aprendeu a inserir título e texto em uma página HTML, alinhar, mudar de linha, inserir
parágrafos e cabeçalhos.
Escola Técnica (Professor: Ronni M. Madeira) Página: 7

Formatando uma página HTML


Você aprenderá a alterar a aparência do texto, mudando as fontes e atributos como tamanho,
cor e estilo.

• Definindo fonte, tamanho e cor do texto


A HTML permite que você deixe o texto mais dinâmico, atribuindo novas
cores, fontes e tamanhos. Formate um texto de acordo com a seqüência:
1. Inicie um novo documento no Bloco de notas, clicando no menu Arquivo e em
Novo.
2. Digite a estrutura padrão.
3. Posicione o cursor após a tag <body>.

Você utilizará uma única tag e diferentes atributos para especificar tamanho, cor
e tipo de fonte.
A sintaxe da tag e seus atributos é:
<font size=n face="nome da fonte" color=#000000>texto aqui</font>.
Onde:
Size define o tamanho da fonte (n varia de 1 a 7).
Face define o tipo da fonte.
Color define a cor da fonte (em valores hexadecimais).

4. Digite: <font size="4" color="#0000ff" face="courier new">Curso de HTML</font>.


5. Salve o arquivo dentro da pasta "curso_basico" com o seguinte nome: formatando.html.
6. Abra este arquivo no Browser clicando no menu Arquivo e em Abrir.
7. Na caixa de diálogo Abrir, clique no botão Procurar e localize o arquivo "formatando.html"
que se encontra na pasta "curso_basico".
8. Clique duas vezes sobre o arquivo e pressione o botão OK da caixa de diálogo Abrir.
9. Note que ao abrir o arquivo "formatando.html" no browser, o texto apresenta todas as
formatações editadas na estrutura HTML.

Para aplicar cor em um texto ou em qualquer outro comando HTML, é preciso conhecer a tabela de cores.
Escola Técnica (Professor: Ronni M. Madeira) Página: 8

Substitua as formatações atuais por outras opções de cores, fontes e tamanhos e visualize a diferença.

• Definindo o estilo para o texto (Negrito, Itálico e Sublinhado)


Além das formatações vistas no tópico anterior, aplique estilos variados
em seu texto.
1. No arquivo "formatando.html", posicione o cursor do mouse antes do texto "Curso
de HTML", e digite a tag <b>. O par de tags <b> e </b>. define o estilo Negrito no texto.
2. Salve o arquivo e atualize-o no navegador.
3. No Bloco de notas, substitua as tags <b> e </b> por <i> e </i> para aplicar
o estilo Itálico ao texto.
4. Visualize o resultado no Browser.
5. Use o par de tags <u> e </u> para aplicar o estilo Sublinhado ao texto.

As tags de estilo podem ser aplicadas simultaneamente, isto é, você poderá


aplicar no mesmo texto o estilo negrito, itálico e sublinhado.

• Sumário
Você aprendeu a alterar a aparência do texto, mudando as fontes e atributos
como tamanho, cor e estilo.

Acrescentado Links, Imagens e Cor de Fundo


Você aprenderá o que são Links e como criá-los, quais os tipos de imagens que podem ser
inseridas em uma página HTML e como adicionar uma cor e uma imagem ao fundo da página.

• O que são links


Link é um "atalho" que pode levá-lo a outras partes do documento ou a
outros documentos. Em páginas HTML, os links são representados por
textos sublinhados ou imagens. Quando você aponta o mouse para um link, o
cursor se transforma em uma mãozinha apontando.

• Inserindo links
Veja como é simples inserir links em uma página HTML. A tag link é: <a>
e </a>.
O atributo é: href. O par de tags <a> e </a> cria o link entre as páginas e o
atributo "href" informa o endereço da página de destino.
1. Crie uma nova página HTML com a estrutura básica no Bloco de notas.
2. Após a tag <body>, digite: experiência profissional.
3. Salve este arquivo com o nome: experiencia.html.
4. Clique no menu Arquivo e em Novo e crie outra estrutura básica.
5. Digite após a tag <body>: <a href="experiencia.html">Entrar na página experiência
profissional</a>.
6. Salve este arquivo com o nome "curriculo.html" e verifique se o link está funcionando. Abra o
navegador e clique sobre a frase: Entrar na página experiência profissional.
7. Ao clicar no link, a página "experiencia.html" se abrirá automaticamente.

Existem algumas restrições quanto à nomeação de páginas HTML:


- Dispense acentos ortográficos ao nomear uma página.
- Não deixe espaços entre as palavras.
- Ao atribuir o comando link, digite ao "pé da letra" o nome dado à página.
Escola Técnica (Professor: Ronni M. Madeira) Página: 9

• Tipos de imagens permitidas


Existem dois tipos de imagens que podem ser inseridas em uma
página.
Os formatos de imagens reconhecidos pelos navegadores são: formato .jpg
e formato .gif.

O formato jpg ou jpeg (Joint Photografic Experts Group) é mais utilizado para
fotos.

O formato gif (Graphics Interchange Format) é mais utilizado para desenhos


vetoriais, como os cliparts.

Para criar uma imagem com extensão .gif ou .jpg é necessário utilizar um
programa de edição gráfica, como por exemplo o Photoshop ou o CorelDRAW.

• Inserindo imagens
A inclusão de imagens em uma página HTML dá mais qualidade ao
trabalho. É fácil incluir uma imagem na página HTML. A sintaxe é:<img
src="nome da imagem"> Não é necessário fechar esta tag.

A imagem criada deve ser salva na mesma pasta que contém as páginas HTML
para que o navegador possa abri-la.

• Inserindo cor de fundo


Personalize sua página alterando a cor do fundo. O comando de cor de fundo "bgcolor", é
um atributo da tag <body>.
1. Abra o Bloco de notas e crie uma estrutura padrão sem a tag <body>.
2. Digite como exemplo: <body bgcolor="#FFFF00">O fundo desta página é amarelo</body>.
Com o comando inserido, a estrutura ficará assim:
<html>
<head>
Escola Técnica (Professor: Ronni M. Madeira) Página: 10

</head>
<body bgcolor="#FFFF00">O fundo desta página é amarelo</body>
</html>
3. Salve este arquivo com o nome: fundo.html. Abra-o no navegador.

Consulte a Tabela de Cores , substitua a cor amarela (#FFFF00) por outros


valores hexadecimais e atualize a página. Note que a cor de fundo da página é
alterada.

• Inserindo imagem de fundo


É possível inserir uma imagem de fundo na página HTML, caso não queira
utilizar uma única cor.
O comando de inserção de imagem "background", é um atributo da tag <body>.
Ao digitar a estrutura básica, substitua a tag <body> por este comando:
<body background= "nome da imagem.gif ou .jpg">.

A imagem precisa estar arquivada na pasta onde se encontra a página HTML


correspondente.

• Sumário
Você aprendeu o que são Links e como criá-los, quais os tipos de imagens que
podem ser inseridas em uma página HTML e como adicionar uma cor e uma
imagem ao fundo da página.

Referências de TAGS
Você visualizará uma lista com as tags que aprendeu no curso de HTML Básico e terá a
oportunidade de criar uma página pessoal.

• Tabela de tags
Visualize, abaixo, uma tabela contendo as tags aprendidas durante o curso.
Tags Função
<html> e </html>
Início e fim da estrutura de uma página HTML.
Todo o documento deve estar entre estas tags.

Agrupa informações da página, como o título,


por exemplo. Com exceção do título,
<head> e </head>
informações contidas nestas tags não são
exibidas no navegador.

<title> e </title> Digite o título da página entre estas tags.

Os comandos entre estas tags são visíveis no


<body> e /body>
navegador.

<i> texto itálico </i> <u> texto sublinhado </u>

<b> texto negrito </b> <strike> texto riscado </strike>

<sub>texto subescrito</sub> <sob>texto sobrescrito</sob>


Escola Técnica (Professor: Ronni M. Madeira) Página: 11

<big>texto em fonte maior</big> <small>texto em fonte menor</small>

<center>texto centralizado.</center> Centralizar um texto na página.

Texto com tamanho de letra pré formatado: h1


<h1>Texto de Cabeçalho</h1>
maior, h2 menor até h6.

<br> Utilize para quebrar linhas.

Alinha o texto. Os atributos são "center",


<div align= "center"> e </div>
"right" e "left".

<a href="arquivo.html"> Texto Link </a> Cria link para outra página.

<a href = mailto:


"ronni.madeira@bol.com.br"> Clique aqui
Cria link para enviar email.
</a>

Insere imagem na página com extensões .gif


<img src= "imagem" alt="texto">
ou .jpg, alt (exibe uma mensagem).

<font size=10 face="Arial black" Define tamanho, tipo, cor. Pode-se utilizar o
color=#000000>Texto </font> nome da cor em inglês em vez do código.

<body bgcolor=#000000> Define a cor de fundo da página.

Insere imagem de fundo na página com


<body background= "img.gif">
extensões .gif ou .jpg

<bgsound src="som.mid" loop="infinite">


Insere uma música instrumental na sua página.

<pre>Texto Pré Formatado</pre> Exibe um texto com a formatação digitada.

<addrees>Texto final</addrees> Insere um texto para final da página.

<hr> Insere uma linha horizontal.

<p> Insere um parágrafo, não utiliza </p>.

• Criando sua página HTML


Agora que você conhece o básico da linguagem HTML, crie sua página
pessoal.
1. Inicie o Bloco de notas do Windows.
Escola Técnica (Professor: Ronni M. Madeira) Página: 12

2. Crie a estrutura padrão de uma página HTML e mãos à obra.

Note que neste exemplo foram inseridas as tags vistas ao longo deste curso.

• Sumário
Você visualizou uma lista com as tags que aprendeu no curso de HTML Básico e criou uma
página pessoal.

Efeitos para sua Página da Internet

 Mensagem Animada
<MARQUEE behavior=alternate height=36 scrollAmount=3 width=344> Mensagem </MARQUEE>
alternado altura Velocidade largura

 Atributos da Página
<body bgcolor="cor_do_fundo" text="cor_do_texto" link="não_selecionado" vlink="link_selecionado">

 Personalizando suas Figuras


<IMG src="figura.gif" alt="Mensagem a ser exibida" width=100% height=6 align="botton" hspace=5>
largura altura alinhar espaço hor.
Alinhar: botton  base middle  meio top  topo left  esquerda right  direita

Tabelas
<TABLE BORDER=2>
<CAPTION>Legenda</CAPTION>
<TR> <TD>Teste </TD> <TD> de </TD> </TR>
<TR> <TD>Tabela</TD> <TD>Html</TD> </TR>
</TABLE>

Legeda
Teste de
Tabela Html
Escola Técnica (Professor: Ronni M. Madeira) Página: 13

Âncoras Internas
(encontrar um texto na página)
Para Linkar:
<A HREF="#Texto">Clique para ir para o Texto</A>

Para marcar:
<A NAME="Texto"><!- -></A>
Texto a ser encontrado.

Âncora para outra página: (segue para próxima página e para em determinado ponto "Texto")
<A HREF="pag2.htm#Texto">Página 2, Texto</A>

Quadros (Frames) para sua página.

Digitar abaixo do </HEAD> e antes to <BODY>.


<frameset cols="20%,*">  Coluna c/ 20% e * (indica o restante 80%).
<frameset rows="33%,*">  Linha c/ 33% e * (indica o restante 67%).
<frame src="pag1.html" name="indice">  1ª Página a ser exibida (a esquerda)
<frame src="pag2.html" name="ver">  2ª Página a ser exibida (a direita).
</frameset>  final do 1º frameset.
</frameset>  final do 2º frameset.
Na pag1.html:( abaixo do </HEAD> e antes to <BODY>)
<base target="ver">

Bloqueio do Botão Direito do Mouse para Visualizar o Código Fonte.

Digitar dentre do <body>.


<SCRIPT>
<!-- Begin
function right(e) {
if (navigator.appName == 'Netscape' &&
(e.which == 3 || e.which == 2))
return false;
else if (navigator.appName == 'Microsoft Internet Explorer' &&
(event.button == 2 || event.button == 3)) {
alert("Página Bloqueada.");
return false;
}
return true;
}
document.onmousedown=right;
if (document.layers) window.captureEvents(Event.MOUSEDOWN);
window.onmousedown=right;
// End -->
</SCRIPT>

Algumas Dicas Importantes:


 A primeira página deve-se chamar index.htm ou (html).
 Os arquivos devem ser gravados em minúsculo sem utilizar acentos e cedilha.
 Para publicar seu Site na Internet, utilize o endereço: www.hpg.com.br (totalmente gratuito).