Curso HTML Módulo I

0
CURSO DE DESENVOLVIMENTO
WEB
MÓDULO I - HTML
AUTOR: JOSÉ AILTON BATISTA DA SILVA

1
SUMÁRIO
INTRODUÇÃO................................................................................................................................... 2
O que é a Internet? ........................................................................................................................ 2
O que são Redes de Computadores?............................................................................................. 2
O que é WWW?............................................................................................................................. 2
Principais Protocolos de Redes...................................................................................................... 3
Servidor HTTP ............................................................................................................................... 3
HTML................................................................................................................................................. 4
O que HTML? ................................................................................................................................ 4
Linguagens de Marcação ............................................................................................................... 4
O que é “marcação”? ..................................................................................................................... 4
Sintaxe de marcação HTML ........................................................................................................... 4
Criando um documento HTML........................................................................................................ 6
Marcadores de Cabeçalho e de Corpo ........................................................................................... 7
A estrutura do documento HTML.................................................................................................... 9
A sintaxe de marcação HTML – Parte 2 ......................................................................................... 9
Sistemas de Cores........................................................................................................................11
Usando os atributos da tag BODY.................................................................................................13
Formatando Texto: Títulos e parágrafos........................................................................................15
Formatando textos II .....................................................................................................................18
Criando listas de definição, marcação e numeradas......................................................................20
Usando o hipertexto......................................................................................................................22
O atributo name ............................................................................................................................24
Usando links locais .......................................................................................................................25
Trabalhando com imagens............................................................................................................26
Usando Plug’in..............................................................................................................................28
Inserindo Caracteres Especiais .....................................................................................................30
Usando tabelas HTML...................................................................................................................32
Usando iFrames............................................................................................................................35
Usando Frames.............................................................................................................................35
BIBLIOGRAFIA.................................................................................................................................40

2
INTRODUÇÃO
O que é a Internet?
A Internet é um dos meios de comunicação mais usados hoje em dia, nela
você pode enviar mensagens, buscar informações, ler noticias, procurar emprego,
fazer compras, jogar, estudar, enfim, fazer uma gama de coisa sem precisar sair de
casa.
A internet surgiu no período da Guerra Fria, na disputa militar entre os
Estados Unidos e a União Soviética e até chegar os dias atuais houve grandes
revoluções. Ela nada mais é do que o um grupo de computadores interconectados e
trocando informações.
O que são Redes de Computadores?
São grupos de computadores que se comunicam e trocam dados usando
algum meio de comunicação como: cabos, ondas de rádio, fibra óptica, etc. Para
haver comunicação é preciso que os computadores “falem a mesma língua”, isto é,
deve haver um conjunto de regras que devem ser seguidas pelos computadores
para a transmissão dos dados. Essas regras são na verdade programas de
computador chamados de protocolos.
Os protocolos de comunicação são programas de implementam um hardware
de rede, como placa de fax-modem, roteador, hub, etc. O protocolo padrão usado
pelo mundo para comunicação de redes é o TCP/IP. Esse protocolo define que cada
computador de uma rede tenha um numero de identificação chamada protocolo de
internet ou simplesmente IP. Ele também tem uma serie de regras para não haver
erro nos pacotes de dados e já vêm instalados nos Sistemas Operacionais.
O que é WWW?
A World Wide Web é a parte gráfica da internet. São os sites, documentos e
paginas espalhados pela internet. WWW significa “teia de alcance mundial”, foi
chamado assim, pois se mapeássemos os computadores conectados a ela teríamos
uma enorme teia envolvendo o mundo.

3
Principais Protocolos de Redes
Temos diversos serviços disponíveis pela internet como serviço de e-mail,
controle remoto, grupo de noticias, etc. Temos então protocolos adicionais ao
TCP/IP, os principais são:
 TCP – Protocolo responsável pela comunicação de dois Computadores e
garante a transmissão e recepção de dados de forma correta.
 IP – Protocolo responsável pela identificação do computador na rede,
endereçando cada maquina com um numero.
 Telnet – Protocolo responsável pelo controle remoto de computador de
serviço de terminal do Windows.
 POP3 – Protocolo responsável pela Leitura das mensagens disponíveis da
Caixa de entrada do servidor de e-mail.
 SNMP – Protocolo responsável pelo envio de mensagens de e-mail.
 FTP – Protocolo responsável pela transferência de Arquivos entre
computadores.
 HTTP – Protocolo responsável pela transferência de paginas em hipertexto
usados nos navegadores para acessar sites.
Servidor HTTP
Quando uma pessoa abre o navegador, digita “http://www.google.com” e
pressiona ENTER. O navegador envia uma requisição HTTP ao computador do
Google. Essa requisição é um pedido para enviar uma determinada pagina do site,
que no caso é a pagina inicial.
Um servidor HTTP ou simplesmente servidor Web é um programa instalado
em uma máquina que ficar esperando requisições HTTP dos clientes. Essas
requisições são pedidos de envio de paginas, imagens, áudio, etc.

4
HTML
O que HTML?
HTML significa HyperText Markup Language, isto é, Linguagem de marcação
de hipertexto. É uma linguagem de marcação ou metalinguagem usada para criar
documentos web. O HTML é a linguagem padrão no mundo para o uso nos
navegadores.
Linguagens de Marcação
Existem diversas linguagens de marcação para os diferentes tipos de
aplicação, mas o comum entre elas são o modo de funcionamento. As linguagens de
marcação são usadas como uma base de anotação para guardar informação. As
linguagens mais conhecidas são:
 XML – Usada geralmente como banco de dados.
 SVG – Usada para criar gráficos vetoriais.
 CFML – Usada no servidor web ColdFusion
 VRML – Usada para criar modelos em 3D.
 XHTML – Novo padrão HTML pelas normas da W3C
O que é “marcação”?
Marcações são abstração de objetos reais. No caso do HTML podemos dizer
que são comandos para gerar objetos como imagens, textos, hiperlinks, botões, etc.
Cada marcação referencia um objeto no navegador como, por exemplo, o
marcador “<img>” referencia-se a uma imagem.
Sintaxe de marcação HTML
Para criar marcações em um documento HTML precisamos estabelecer
algumas regras para que o navegador possa entender o código.
A primeira regra é que todo marcador deve esta entre o sinal de “<” e “>”.
Exemplo: <img>, <a>, <table>, <body>.

5
A segunda regra é que existem dois tipos de marcadores: tipo vazio e tipo
container. Os marcadores tipo vazio, também chamado de marcadores simples, são
declaradores entre os sinais de maior e menor.
Exemplos de marcadores tipo vazio:
<img>, <br>, <hr>
Já os marcadores tipo container têm dois comandos: o de inicio que é igual ao
tipo vazio e o de fim que também é igual, a única diferença é a barra no inicio o
comando.
Exemplo de marcadores tipo container:
<marquee></marquee>, <table></table>, <head></head>
No exemplo acima os marcadores tipo container existem dois comandos e o
comando final tem a barra.
Os marcadores tipo container delimitam algum conteúdo que pode ser algum
texto ou outros marcadores.
Exemplo:
<marquee>Ola Pessoal!</marquee>
<div><u><img></u></div>
No exemplo acima o marcador marquee delimita um texto “Ola Pessoal”, já o
marcador div delimita o conteúdo “<u><img></u>” e o marcador u delimita o
marcador vazio “<img>”.
Cada marcador no HTML tem uma função especial e vai gerar algum objeto
no navegador.
Os marcadores também são chamados de tags ou etiquetas.

6
Criando um documento HTML
Vamos iniciar a partir de agora a parte prática. Os conceitos vão sendo vistos
conforme cada passo.
Para criarmos um documento HTML só precisamos de um editor de texto
ASCII, ou seja, os editores de texto simples como o “Bloco de Notas” do Windows ou
o “KEdit” do Linux.
Iremos então ao sistema Windows pressionar [CTRL] + [R] para abrir a janela
“Executar” e digitar “notepad”.
Com o Bloco de Notas aberto então digite o código abaixo:
<html>
<head>
</head>
<body>
Ola Mundo!
</body>
</html>
Agora clique no menu Arquivo > Salvar como....
IMPORTANTE!!!
Crie uma pasta em algum lugar no Computador com o Nome “CURSO DE
WEB”, nela salvaremos os projetos criados.
Salve o documento com o nome “pagina_exemplo.html”.

7
É muito importante digitarmos o texto “ponto html” (.html) ao final do nome
do arquivo, como na figura acima, pois fazendo isso criamos uma pagina web.
Com o arquivo salvo, entre na pasta “CURSO DE WEB” e dê dois cliques no
arquivo.
A pagina deverá abrir no navegador padrão.
No exemplo digitado temos o marcador html, esse marcador indica o inicio e o
fim do documento. Então tudo que estiver entre <html> e </html> é o conteúdo
do documento.
O marcador head indica o inicio e o fim do cabeçalho. É no cabeçalho onde
digitaremos as informações da pagina como nome do autor, titulo da pagina, etc.
O marcador body indica o inicio e o fim o corpo da pagina, isto é, a parte
mostrada na tela do navegador. Observe que o que esta entre <body> e </body> é
somente o texto “Ola Mundo!” e o mesmo foi mostrado no navegador.
Marcadores de Cabeçalho e de Corpo
Outra regra usada no HTML é que existem marcadores somente para o corpo
ou para o cabeçalho. Vamos ao exemplo:
Digite o código abaixo no “notepad” e salve como “segunda_pagina.html”.

8
<html>
<head>
<title>Segunda
Pagina</title>
</head>
<body>
<marquee>Ola
Terra!</marquee>
</body>
</html>
No exemplo acima utilizamos o marcador title, o conteúdo inserido entre ela
será mostrado na barra de titulo do navegador. Veja que o texto “Segunda Pagina”
foi inserido entre title e ele foi mostrado como titulo do navegador.
O marcador marquee faz com que tudo entre ele se mova na horizontal, no
caso o texto “Ola Terra” deverá está em movimento.
Vamos agora tentar, usando o marcador marquee, gerar movimento a titulo:
<html>
<head>
<marquee><title>Segunda
Pagina</title></marquee>
</head>
<body>
<marquee>Ola
Terra!</marquee>
</body>
</html>
Veja que o titulo não entrou em movimento, isso porque o marcador marquee
não pode ser usado como marcador de cabeçalho, isto é, não pode estar entre
<head> e </head>.
Então confirmamos que certos marcadores só podem ser usados no BODY e
outros só podem ser usados no HEAD.

9
A estrutura do documento HTML
Um documento HTML deve ser estruturado da seguinte forma:
<html> ;Indica Inicio de Documento HTML
<head> ;Indica Inicio de Cabeçalho
Aqui fica o cabeçalho!
</head> ;Indica o Fim do cabeçalho
<body> ;Indica inicio do corpo (parte visual)
Aqui fica o
Conteúdo da
Pagina
</body> ;Indica fim de corpo
</html> ;Indica Fim de Documento HTML
Essa é a estrutura padrão de um documento HTML e deve ser seguida para
não haver problemas na visualização da pagina no navegador.
A sintaxe de marcação HTML – Parte 2
Vamos mostrar agora alguns marcadores novos:
blink - Faz o texto piscar. Obs. Está tag só funciona no Firefox e Netscape.
hr(horizontal row) – Cria uma linha horizontal no navegador.
<HTML>
<HEAD>
<TITLE>Terceira
pagina</title>
<body>
<hr>
<blink>Isto tem que estar
piscando no
FF</BLINK>
<HR>
</BodY>
</HTML>
Observe que alguns marcadores estão em maiúsculo e outros em maiúsculo
e minúsculo. Isso não influencia no código, pois o HTML não é case-sensitive, por
isso podemos digitar em qualquer caixa, alta ou baixa.

10
Alguns objetos HTML podem ser mudados suas propriedades como cor,
largura, altura, fundo, etc. Para mudarmos usando marcação, temos de usar os
chamados “atributos de marcação”. Veja as regras para dos atributos HTML.
1ª. Os atributos só podem ser inseridos no marcador de inicio.
2º. Cada marcador tem um atributo especifico que pode existir em outros ou
não.
3º. Não há ordem na inserção de atributos, isso é, posso escrever os atributos
antes ou depois de qualquer um.
Exemplo global de inserção de atributos:
<marca atributo1=”valor1” atributo2=”valor2”></marca>
<marca atributo1=”valor1” atributo2=”valor2”>
Vamos então alterar as propriedades do objeto linha usando seus atributos
principais que são:
size=”pixeis” – Altera a altura da linha. O valor inserido nesse atributo são
pixeis, isso é, é um valor numérico com o sufixo px para indicar pixel;
width=”numero, pixeis, porcentagem” – Altera o comprimento da linha. O valor
inserido pode ser numero, pixeis ou porcentagem.
noshade=”noshade ou nada” – Alterna fundo sombra da linha. Caso digite o
valor “noshade” você adiciona o fundo sombra, se não, a propriedade fica
desativada.
color=”cor em inglês, código RGB, código Hex” – Altera cor da linha. O valor
pode ser uma cor em inglês ou código RGB ou hexadecimal. (Você verá códigos de
cores adiante).
align=”left, center, right” – Altera alinhamento da linha. O valor “center”
centraliza a linha na pagina, “left” alinha a esquerda e “right” alinha a direita.

11
<html>
<head>
<title>Quarta pagina
pagina</title>
<body>
<hr size="10px"
width="500px"
align="left"
noshade="noshade">
<blink>Isto tem que
estar piscando no
FF</blink>
<hr size="15px"
width="30%"
align="right"
color="blue">
<hr width="80px"
align="center">
</body>
</html>
Sistemas de Cores
A utilização de cores nos documentos HTML se faz através do uso de
sistemas de cores, os principais são: RGB, hexadecimal, CMYK.
O sistema CMYK (Ciano, Mangenta, amarelo, Preto) é comumente usado em
impressoras. Ela é formada pelas cores secundárias e o preto.
O sistema RGB é usado em praticamente todos os monitores, Televisores,
etc. É formado pelas cores primárias vermelho, verde e Azul (RedGreenBlue) a
união delas formam todas as cores.
O sistema de cor RGB simplesmente é a representação de cores em forma de
números. Uma cor no sistema RGB tem 3 bytes, onde cada byte especifica uma cor
primária.
Como um byte só pode suportar números de 0 a 255, chamamos de 255 de
100% da cor na composição.
Para escrevermos uma cor em RGB no documento HTML usamos a seguinte
sintaxe: rgb(red,Green,blue).

12
Onde red, green e blue são números de 0 a 255.
Exemplos:
rgb(255,0,0);rgb(0,255,0);rgb(255,255,0);rgb(130,145,10)
Podemos gerar códigos RGB utilizado o Paint do Windows. Veja como:
Abra o Paint:
Clique no botão “Editar Cores”. A caixa de Cores irá aparecer.

13
Selecione a cor desejada usando a paleta deslizante e ponteiro deslizante.
Observe que há três campos de textos com nome vermelho, verde, azul,
copie os valores para a sintaxe, assim você poderá inserir a cor desejada no
documento. Exemplo: rgb(64,180,189).
Muitos navegadores têm problemas com a sintaxe do RGB, mas existe um
padrão usado por todos os navegadores que são o sistema RGB em hexadecimal. O
sistema consiste em usar um numero hexadecimal de dois algarismos para
representar a cor. A sintaxe é: #RRGGBB.
Onde RR, GG e BB é um numero hexadecimal de 0x00 a 0xFF.
Exemplos: #FF0000; #00FFFF; #C0C0C0
Podemos usar então uma calculadora cientifica para passar os valores
capturados no paint e transformar-los em hexadecimal.
Usando os atributos da tag BODY
Iremos agora ver como alterar os propriedades da tag BODY. Os principais
atributos são:
Atributo Valor Descrição
bgcolor cor Altera a cor de fundo do documento.
text cor Altera cor padrão do texto.
link cor Altera cor padrão dos links.
alink cor Altera a cor padrão dos links acionados
vlink cor Altera cor padrão dos links visitados
background URL Adiciona um fundo ao documento.
Veja então o exemplo abaixo.

14
<html>
<head>
<title>quinta
pagina</title>
<body bgcolor="#FFFF00"
text="#FF0000"
link="#00FF00">
ISSO EH UM TEXTO!<br>
<a href="#">ISSO EH UM
LINK</a>
<a href="#">ISSO TAMBEM
EH UM LINK</a>
</body>
</html>
No exemplo acima adicionamos no corpo da pagina o texto “isso eh um texto”
e também dois links. Observe que o texto sem link está vermelho, pois o atributo text
foi alterado para a cor vermelha, já o primeiro link está com a cor verde, pois o link
está com a cor e o segundo link está azul, pois já havia sido clicado.
Veja outro exemplo.
<html>
<head>
<title>quinta
pagina</title>
<body
background="fundo.jpg"
bgcolor="#FFFF00"
text="#FF0000"
link="#00FF00">
ISSO EH UM TEXTO!<br>
<a href="#">ISSO EH UM
LINK</a>
<a href="#">ISSO TAMBEM
EH UM LINK</a>
</body>
</html>
Observe que nesse exemplo há uma imagem no fundo, isso porque o atributo
background foi inserido no body referenciando uma imagem que está dentro da
pasta onde o documento foi salvo.

15
Formatando Texto: Títulos e parágrafos
Digite o seguinte código:
<html>
<head>
<title>
formatando texto – parte 1
</title>
</head>
<body bgcolor=”#F0F0F0”>
Isso eh um Titulo
Aqui é meu paragrafo 1!!!
Autor
Aqui é meu subtítulo
Aqui é meu parágrafo.
</body>
</html>
Veja o seguinte: no corpo da pagina digitamos algo que seria um titulo,
parágrafos e subtítulo, veja que criamos varias quebra de linhas e espaços.
Vamos agora salvar o arquivo como “formatacao_parte1.html” e depois abrir
no navegador.

16
Observe que ao visualizarmos no navegador, todas as quebras de linhas e os
vários espaços antes na palavra “autor” não foram mostradas. Isso acontece porque
as quebras de linhas e os vários espaçamentos não influenciam no código HTML,
então podemos escrever todo código somente numa linha como abaixo:
<html><head><title>isso eh um titulo</title></head><body
bgcolor=”red”>Isso eh o corpo</body></html>
Para criamos então títulos e parágrafos devemos utilizar marcadores HTML
com essa finalidade. Os marcadores usados para criar títulos e subtítulos são os H1,
H2, H3, H4, H5, H6. Vamos a outro exemplo:
<html>
<head>
<title>Titulos</title>
</head>
<body>
<h1>Titulo Nivel 1</h1>
</body>
</html>
Observe que utilizando o marcador Hnº podemos criar até seis níveis de
títulos e que depois de cada Hnº é gerada automaticamente uma quebra de linha.
Vamos então agora ao exemplo no inicio do tópico e criar os títulos utilizando
os marcados HTML.
<html>
<head>
<title>
formatando texto – parte 1
</title>
</head>
<body bgcolor=”#F0F0F0”>
<h1>Isso eh um Titulo</h1>

17
Autor
<h2>Aqui é meu subtítulo</h2>
Aqui é meu parágrafo.
</body>
</html>
Iremos usar agora o marcador P(paragraph) para geramos os parágrafos do
exemplo anterior.
<html>
<head>
<title>
formatando texto –
parte 1
</title>
</head>
<body
bgcolor=”#F0F0F0”>
<h1>Isso eh um
Titulo</h1>
<p>Aqui é meu
paragrafo 1!!!</p>
<p>Aqui é meu
paragrafo 2!!!</p>
Autor
<h2>Aqui é meu
subtítulo</h2>
<p>Aqui é meu
parágrafo.</p>
</body>
</html>

18
Podemos utilizar também o atributo align para formatar o alinhamento os
títulos e parágrafos.
<html>
<head>
<title>alinhamento</title>
</head>
<body>
<h1
align="center">Titulo1</h1>
<p
align="left">paragrafo1</p>
<p
align="center">paragrafo2</p>
<p
align="right">paragrafo3</p>
<h2
align="left">Subtitulo1</h2>
<h3 align="right">Sub-
subtitulo1</h3>
<body>
</html>
Formatando textos II
Podemos formatar texto usando os estilos negrito, itálico e sublinhado.
Observe o exemplo:
<html>
<head>
<title>estilos</title>
</head>
<body>
<h1>Lorem ipsum dolor</h1>
<p>sit amet, consectetuer
adipiscing elit. Maecenas
porttitor congue
<strong>massa</strong>. Fusce
posuere, magna sed pulvinar
ultricies, <b>purus lectus</b>
malesuada <i>libero</i>, sit amet
commodo magna eros quis urna.
Nunc <u>viverra</u> imperdiet
enim. Fusce est.</p>
</body>
</html>

19
Para deixarmos o texto em negrito usamos a tag B(Bold) ou STRONG,
observe no exemplo acima que a frase “Purus lectus” esta entre B e a palavra
“massa” esta entre Strong, mas os dois estão em negrito.
A palavra “libero” esta em itálico, pois a tag utilizada para deixar em itálico é o
<i></i>. Já a palavra que esta entre a tag U(Under-line) ficou sublinhado.
Vamos utilizar agora o marcador font utilizado para formatar tipo, tamanho e
cor de texto. Veja abaixo os principais atributos:
Face Nome de fonte Altera estilo de fonte do texto
Size Numero em pixeis Altera o tamanho do texto
Color cor RGB Altera a cor do texto
Vamos agora ao exemplo:
<html>
<head>
<title>usando o
FONT</title>
</head>
<body>
<font size=”4px”
face=”Comic Sans MS”
color=”#FF0000”>Lorem ipsum
dolor sit amet,
consectetuer adipiscing
elit. Maecenas porttitor
congue massa. </font>Fusce
posuere, magna sed pulvinar
ultricies, purus lectus
malesuada libero, sit amet
commodo magna eros quis
urna.<br>
Nunc viverra imperdiet
enim. Fusce est.<font
color=”blue” face=”Arial”
size=”5px”> Vivamus a
tellus.</font>
</body>
</html>
Obs: A tag font está obsoleta, pois nos novos padrões, o HTML não é usado
para a estilização. Logo essa tag apresentará problemas nos navegadores atuais.

20
Ao utilizarmos parágrafos geramos um espaçamento antes e depois deles.
Para criarmos quebras de linhas sem gerar esses espaçamentos usamos o
marcador br(break row).
Criando listas de definição, marcação e numeradas
Uma lista de definição é usada para definir termos como em um dicionário ou
glossário. Numa lista de definição temos duas parte: o termo a ser descrito e a
descrição. A tag DL(Definition List) é usada para criar a lista, enquanto a tag
DT(Definition Term) é usado para definir o termo e a tag DD(data description) é a
descrição. Faça o exemplo abaixo e salve como “lista_definicao.html”.
<html>
<head>
<title>Lista de definição</title>
</head>
<body>
<dl>
<dt>termo1</dt>
<dd>Descrição de termo1</dd>
<dt>termo2</dt>
<dt>termo3</dt>
</dl>
</body>
</html>
Para criarmos listas não-numeradas usamos o marcador UL(unordered list), já
para criarmos listas numeradas usamos o marcador OL(ordered list). Para
inserirmos os itens nas listas numeradas e não-numeradas usamos o marcador li(list
item). Faça o exemplo abaixo:

21
<html>
<head>
<title>Listas</title>
</head>
<body>
<ul>
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
<li>item 4</li>
</ul>
<ol>
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
<li>item 4</li>
</ol>
</body>
</html>
Podemos também usar listas dentro de listas. Observe o exemplo:
<html>
<head>
</head>
<body>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<ol>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ol>
<li>Item 3</li>
<li>Item 4</li>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</ul>
</body>
</html>
Um atributo muito utilizado em listas HTML é o type. Ele define o tipo de
marcador nas listas não-numeradas (valor: disc, square, circle) e também define o
tipo de numeração nas listas numeradas (valor: 1, A, a, I, i). O type também pode ser

22
utilizado no marcador li, caso o usuário queira que somente aquele item tenha tal
tipo. O valor do type no marcador li pode ser: disc, square, circle, 1, A, a, i, I.
Faça o exemplo:
<html>
<head>
</head>
<body>
<ul type="square">
<li>Item 1</li>
<li>Item 2</li>
<ol type="A">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ol>
<li>Item 3</li>
<li>Item 4</li>
<ol type="cicle">
<li>Item 1</li>
<li type="i">Item 2</li>
<li>Item 3</li>
<li type="square">Item 4</li>
</ol>
</ul>
</body>
</html>
Usando o hipertexto
Nesse tópico iremos aprender a usar o hipertexto, parte fundamental no
HTML, pois toda web só funciona dinamicamente por causa dela. Os hipertextos são
os links, isto é, palavras, frases ou imagens, clicáveis em levam o usuário a qualquer
parte do documento ou para outra pagina.
O marcador usado para criar link é a(anchor) chamada simplesmente de
ancora. Ela sozinha não tem nenhuma utilidade, mas quando inserido o atributo href
e um valor no mesmo que pode ser uma URL ou nome de algum objeto HTML(será
visto adiante) poderemos criar links.
Veja o exemplo abaixo:

23
<html>
<head>
</head>
<body>
<ul>
<a href=”http://www.google.com”>
<li>Entrar no google</li>
</a>
<li>
<a
href=”http://www.hotmail.com”>Ir
para HotMail</a>
</li>
<li><a
href=”http://www.4shared.com”>
4Shred</a>
</li>
</ul>
</body>
</html>
Veja que tudo que esta entre <a> e </a> agora é um link no navegador. O
atributo href referencia para onde deve ir ao ser clicado. Por padrão o link fica na
cor azul e sublinhado. Um detalhe importante é que referenciamos os links para a
internet, por isso temos que usar o “http://” no valor do link, pois se digitamos
somente o site, o navegador irá interpretar como um link local.
Vamos fazer agora o seguinte:
Crie uma pasta dentro da pasta “CURSO DE WEB” com nome “paginas”.
Agora crie três paginas com
conteúdos diferentes e salve, dentro
da pasta “paginas”, como
“pagina1.html”, “pagina2.html” e
“pagina3.html”.
Por exemplo:
<html>
<head></head>
<body><h1>Essa é a pagina
1!!!!</h1></body>
</html>

24
Agora digite o exemplo abaixo e salve como “links.html” dentro da pasta
“Curso de Web”:
<html>
<head></head>
<body>
<a href="paginas/pagina1.html">
Acessar pagina 1</a><br>
<a href="paginas/pagina2.html ">
<a href="paginas/pagina3.html ">
<a href="lista_definicao.html">
Lista de definição</a>
</body>
</html>
Observe o seguinte: o ultimo link foi para ir para pagina “lista_definicao.html”
que está na mesma pasta do documento “links.html”. Como as duas paginas estão
na mesma pasta não precisamos digitar o caminho completo no valor do href, basta
digitarmos o nome da pagina e o navegador interpretará que o caminho dela é o
mesmo do documento atual. No mesmo caso temos as paginas “pagina1.html”,
“pagina2.html” e “pagina3.html”, só que elas estão na pasta “paginas”, mas a pasta
“pagina” esta na mesma pasta que o documento “links.html”, então podemos digitar
somente o nome da pasta com barra e o nome do documento requerido. Esse tipo
de endereçamento é chamado de links relativos.
É extremamente importante a utilização de links relativos, pois um dia
teremos de mover o projeto para outra pasta ou hospedar em um servidor e
utilizando links relativos não precisaremos reescrever os links.
O atributo name
O atributo name é um dos atributos padrões do html. Ele é um identificador de
objetos, isto é, quando usamos estamos definindo um nome que somente aquele
objeto terá. Com isso podemos localizá-lo a qualquer momento, podemos também
ver e alterar dinamicamente suas propriedades utilizando javaScript(será visto nos
próximos módulos).
Veja o exemplo de como atribuir um nome a algum objeto:

25
<hr name="linha1">
<a name="meulink">clique Aqui!!!</a>
<p name="paragrafo5">Loren ipsum dolor sit aet</p>
<a name="fim"></a>
Observe que agora podemos achar os objetos, pois todos ter um nome e não
há nomes iguais(nem podem existir). Temos no exemplo anterior então o objeto
linha1 que é um horizontal row, o meulink e fim que são anchor, o objeto paragrafo5
que é um paragraph.
Usando links locais
Podemos utilizar o marcador a(anchor) para saltar de alguma parte do
documento. Para isso utilizamos no atributo href o “#” seguido do nome do objeto
para onde devemos saltar.
Veja o exemplo:
<html>
<head>
<title>Links Locais</title>
</head>
<body>
<a name="inicio"
href="#fim">ir para
Fim</a><br>
Lorem<br>Lorem<br> Lorem<br>
Lorem<br> Lorem<br> Lorem<br>
<a href="#inicio"
name="fim">ir para Inicio</a>
</body>
</html>

26
Observe que no exemplo anterior temos dois links, onde um aponta para o
objeto “inicio” e o outro aponta para o objeto “fim”. Veja que os links são os próprios
objetos. Então quando clicarmos o primeiro link saltamos para o segundo link e
quando clicamos no segundo link saltamos para o primeiro.
Trabalhando com imagens
Em um dos tópicos anteriores você aprendeu como inserir imagens no fundo
da pagina usando o atributo background da tag body, conforme o código abaixo:
<body background="URL da imagem"></body>
Nesse tópico iremos aprender a trabalhar com imagens no HTML. O
marcador utilizado para essa finalidade é IMG. Um atributo requerido é o src, cujo
valor é uma URL de imagem. Veja o exemplo:
Insira uma imagem no formato JPEG na pasta “curso de web” e altere o nome
para “figura1”.
Agora escreva o seguinte código e visualize no navegador:

27
<html>
<head>
<title>Usando o IMG</title>
</head>
<body>
<img src="figura1.jpg">
</body>
</html>
Observe no exemplo, que foi inserido uma URL relativa em src, pois a
imagem está na mesma pasta do arquivo HTML.
A tabela abaixo mostra os principais atributos do marcador IMG.
Atribu
to
Valor Descrição
alt texto
Especifica texto alternativo para a
imagem
align
top,bottom,middle,left
,right
Alinha imagem com relação ao objeto de
nível superior.
border Pixeis ou % Define a largura da borda na imagem
height Pixeis ou % Define a altura da imagem
width Pixeis ou % Define a largura da imagem
ismap ismap
Especifica coordenadas do clique do
mouse na imagem ao servidor
usemap
# + Nome de um
marcador Map
Especifica um mapa de coordenadas para a
imagem
Veja o exemplo:
<html>
<head>
</head>
<body>
<img src="figura1.jpg">
<img src="figura1.jpg" alt="isso eh
uma imagem" border="6px"
width="600px">
</body>
</html>

28
Observe que inserimos duas imagens, onde a segunda tem a largura igual a
600 pixeis, com borda de 6 pixeis e caso a imagem não carregue o texto alternativo
“isso é uma imagem” irá substituí-lo.
Usando Plug’in
Podemos inserir diversos formatos de mídia em uma pagina HTML, para isso
é preciso usar as “tomadas”. Tomadas ou plug’in são programas que complementam
o navegador para mostrar determinada mídia, sendo áudio, vídeo, animação, etc.
É preciso que o computador tenha determinado plug’in para reproduzir
determinada mídia. No Windows, por padrão, existe o Windows Média Player Plugin
para reprodução de arquivos tipo MP3, WMA, ASF, MPG, AVI, WMV e outros. Outro
plugin muito usado é o Shockwave Flash para a reprodução de animações e
programas em actionScript.
O marcador usado para inserir tomadas é o embed. O embed é um marcador
muito dinâmico, pois dependendo na extensão do arquivo ele seleciona o plugin
padrão para reprodução.
Vamos ao exemplo:
Salve uma musica com extensão MP3 na pasta do curso. Lembrando em
todos os arquivos dentro da pasta de um projeto web devem está em letras
minúsculas, sem espaços ou caracteres especiais. No nosso exemplo estou
utilizando a musica com nome “jigsaw_falling_into_place_radiohead.mp3”.

29
<html>
<head>
<title>Tomadas</title>
</head>
<body>
Isso ai abaixo eh uma
tomada<br>
<embed
src="jigsaw_falling_into_place
_radiohead.mp3"></embed>
</body>
</html>
No exemplo acima foi utilizado o marcador embed usando o atributo src para
indicar onde está a mídia. Vamos agora mostrar o mesmo marcador, só que agora
utilizaremos um vídeo:
<html>
<head>
<title>Tomadas</title>
</head>
<body>
EMBED de Video:<br>
<embed src="video1.mp4"
width="190px"
height="190px"></embed>
</body>
</html>
No exemplo usamos o mesmo embed e o mesmo atributo src para indica
onde está mídia e, além disso, usamos os atributos width e height para configurar o
tamanho da tela do player na pagina.
Veja na tabela abaixo os principais atributos da tag embed.
Src URL
Define o arquivo a ser
reproduzido.
Width Pixeis ou % Define a largura do player
Height Pixeis ou % Define a altura do player
Loop True ou false Ativa repetição de mídia
Autoplay True ou false
Define auto-reprodução ao
carregar pagina

30
Os mesmos exemplos acima equivalem para arquivos em flash e outros. O
grande problema é a garantia que o navegador tenha o plugin. Em geral todos os
navegadores usam o plugin de flash, pois a maioria dos sites tem animações em
flash, logo é mais aconselhado usar um plugin de flash para executar musicas e
vídeos.
Inserindo Caracteres Especiais
Alguns caracteres especiais não podem ser inseridos diretamente no
documento HTML, pois estes são reservados pela linguagem. Por exemplo, se você
tentar inserir um nome seguido de um sinal de maior e menor o navegador
interpretara isso como um comando HTML e ira gerar um erro. Vamos ver um
exemplo:
<html>
<head>
<title>Inserindo caracteres
especiais</title>
</head>
<body>
<um texto entre sinais>
um paragrafo
</body>
</html>
Observe no exemplo acima que o texto “<um texto entre sinais>” não foi
mostrado no navegador, pois o Firefox interpretou o texto como um comando HTML.
Na frase “um parágrafo” o navegador mostrou somente um espaço depois da
palavra “um”, isso aconteceu porque como já havia dito o navegador só irá
interpretar um espaço e pular os outros.
Para inserimos caracteres especiais precisamos usar uma sintaxe adequada
para o navegador entender o texto. Veja agora um exemplo:

31
<html>
<head>
<title>Inserindo caracteres
especiais</title>
</head>
<body>
<um texto entre sinais><br>
um     &
nbsp;    &nbs
p;  &nbs
p;   paragrafo
</body>
</html>
No exemplo acima veja que inserimos um comando < para inserir o
caractere “<”, o comando > foi usado para inserir o “>” e para gerar os vários
espaçamentos usamos o comando  .
Veja agora uma lista dos principais caracteres especiais em HTML:
espaço  
& e comercial &
> maior que >
< menor que <
ˆ acento circunflexo &circ;
˜ acento til &tilde;
¨ acento trema ¨
´ acento agudo &cute;
¸ cedilha ¸
" aspas duplas "
“ e ” aspas duplas (esquerda e direita) “ e ”
‘ e ’ aspas simples (esquerda e direita) ‘ e ’
‹ e ›
aspas angulares simples (esquerda e
direita)
&lsaquo; e &rsaquo;
« e »
aspas angulares duplas (esquerda e
direita)
« e »
º ordenal masculino º
ª ordinal feminino ª
– travessão ‘en’ –
— travessão ‘em’ —
hífen oculto 
¯ macron ¯
… reticências …
¦ barra vertical ¦
• marcador (bullet) •
¶ parágrafo ¶

32
§ parágrafo legal §
♠ espadas &spades;
♣ paus &clubs;
♥ copas &hearts;
♦ ouros &diams;
© copyright ©
® marca registrada &reg
™ trade mark ™
£ libra esterlina £
¢ centavo ¢
€ euro €
¥ iene (yen) ¥
¤ símbolo monetário ¤
Usando tabelas HTML
Para trabalharmos com tabelas em um documento HTML precisamos
entender como ela se organiza. Observe o exemplo a seguir:
No exemplo acima veja que há um modo de se estruturar uma tabela. Existe
um comando principal que define o inicio e o fim da tabela. Um comando que define
o inicio e o fim da linha. E também um comando que define o inicio e o fim da célula.
Vamos aprender a usar agora os comandos HTML para criar uma tabela.
<table></table> - Cria um container da tabela HTML.

33
<TR></TR>(table row) - Cria uma linha em uma tabela HTML. O
comando só pode ser usado entre as tags <table></table>.
<td></td>(table data) – Cria uma célula numa tabela HTML. O
comando só pode ser usado entre as tags <tr></tr>.
<th></th>(table head) – Cria uma célula HTML tipo cabeçalho em
negrito. O comando só pode ser usado entre as tags <TR></TR>.
Vamos agora a um exemplo:
<html>
<head>
<title>tabelas</title>
</head>
<body>
<table border="1px">
<tr> <th>Nome </th> <th>Idade</th> <th>Sexo</th> </tr>
<tr> <td>João </td> <td>18 </td> <td>M </td> </tr>
<tr> <td>Maria</td> <td>10 </td> <td>F </td> </tr>
<tr> <td>José </td> <td>13 </td> <td>M </td> </tr>
<tr> <td>Julia</td> <td>20 </td> <td>F </td> </tr>
</table>
</body>
</html>

34
Podemos alterar as propriedades da tabela utilizando atributos específicos.
Veja os principais atributos:
Atributo Valor Descrição Uso
align Right,left,center
Define alinhamento horizontal do conteúdo das
células
TR, TD,
TABLE
bgcolor Cor em RGB Define cor de fundo da tabela, linha ou célula
TR. TD,
TABLE
valign Top, middle, bottom
Define alinhamento vertical do conteúdo das
celulas
TR, TD
Colspan Numero Mescla colunas da tabela TD
Rowspan Numero Mescla Linhas da tabela TD
Width Pixeis Define largura da tabela ou celula TD, TABLE
height pixeis Define altura da tabela ou celula TD, TABLE
Border Left, Center, right Define tamanho da borda da tabela TABLE
Cellpadding Pixeis
Define a distancia entre o conteúdo e a borda
das células
TABLE
Cellspacing Pixeis Define a distancia entre as células. TABLE
Vamos refazer o exemplo anterior agora usando outros atributos além do
“border”.
<html>
<head>
<title>tabelas</title>
</head>
<body>
<table border="1px" bgcolor="red"
cellspacing="5px">
<tr> <th>Nome </th> <th>Idade</th>
<th>Sexo</th> </tr>
<tr> <td>João </td> <td>18 </td>
<td>M </td> </tr>
<tr bgcolor="green"> <td>Maria</td>
<td>10 </td> <td>F </td> </tr>
<tr> <td>José </td> <td>13 </td>
<td>M </td> </tr>
<tr> <td>Julia</td> <td
colspan="2">20 </td> </tr>
</table>
</body>
</html>

35
Usando iFrames
Podemos inserir paginas dentro de nossas paginas usando o comando
iframe. Vamos ao exemplo:
<html>
<head>
<title>Quadros</title>
</head>
<body>
<h1>Usando Quadros de linha</h1>
<iframe
src="tabelas.html"></iframe>
</body>
</html>
Observe que usamos o comando iframe para inserir um quadro na pagina. O
atributo src foi utilizado para indicar qual pagina será exibida no quadro, que no
exemplo foi a pagina “tabelas.html”.
Veja agora os principais atributos da tag iframe:
Width Pixeis Configura largura
Height Pixeis Configura altura
Scrolling Yes, no, auto Configura barra de rolagem do
quadro
Frameborder 0 ou 1 Insere bordas no quadro
Usando Frames
O uso de quadros para a criação de sites hoje em dia está ultrapassado, mas
pode ser utilizada dependendo do caso. Vamos então criar duas paginas:
Faça o exemplo abaixo e salve como “quadro_principal.html”.

36
<html>
<head>
<title>Principal</title>
</head>
<body>
<h1>Lorem ipsum dolor sit amet</h1>consectetuer adipiscing elit.
Maecenas porttitor
congue massa. Fusce posuere, magna sed pulvinar ultricies, purus
lectus malesuada libero, sit amet commodo magna eros quis urna.<br>
Nunc viverra imperdiet enim. Fusce est. Vivamus a tellus.<br>
Pellentesque habitant morbi tristique senectus et netus et malesuada
fames ac turpis
egestas. Proin pharetra nonummy pede. Mauris et orci.<br>
Aenean nec lorem. In porttitor. Donec laoreet nonummy augue.<br>
Suspendisse dui purus, scelerisque at, vulputate vitae, pretium
mattis, nunc. Mauris
eget neque at sem venenatis eleifend. Ut nonummy.<br>
Fusce aliquet pede non pede. Suspendisse dapibus lorem pellentesque
magna. Integer nulla.<br>
Donec blandit feugiat ligula. Donec hendrerit, felis et imperdiet
euismod, purus ipsum pretium metus, in lacinia nulla nisl eget sapien.
Donec ut est in lectus consequat consequat.<br>
consectetuer adipiscing elit. Maecenas porttitor congue massa. Fusce
posuere, magna
ed pulvinar ultricies, purus lectus malesuada libero, sit amet commodo
magna eros quis urna.<br>
Nunc viverra imperdiet enim. Fusce est. Vivamus a tellus.<br>
Pellentesque habitant morbi tristique senectus et netus et malesuada
fames ac turpis egestas. Proin pharetra nonummy pede. Mauris et
orci.<br>
Aenean nec lorem. In porttitor. Donec laoreet nonummy augue.<br>
Suspendisse dui purus, scelerisque at, vulputate vitae, pretium
mattis, nunc. Mauris eget neque at sem venenatis eleifend. Ut
nonummy.<br>
Fusce aliquet pede non pede. Suspendisse dapibus lorem pellentesque
magna. Integer nulla.<br>
Donec blandit feugiat ligula. Donec hendrerit, felis et imperdiet
euismod, Purus ipsum pretium metus, in lacinia nulla nisl eget sapien.
Donec ut est in lectus consequat consequat.<br>
</body>
</html>

37
Faça agora o exemplo abaixo e salve como “menu.html”:
<html>
<head>
<title>menu</title>
</head>
<body bgcolor="#00FF00">
<h2>MENU</h2>
<a
href="quadro_principal.html">pa
gina 1</a><br>
<a
href="tabelas.html">tabelas</a>
<br>
<a
href="usando_img.html">Usando
Img</a><br>
</body>
</html>
Para usarmos frames primeiramente temos de criar uma pagina principal
chamada de frameset, é nela que vamos configurar a exibição de cada quadro na
tela do navegador. Essa pagina é um pouco diferente das outras, pois o corpo da
pagina não é limitada usando o comando body e sim usando o comando
<frameset></frameset>.
Vamos fazer agora a pagina do frameset. Salve o exemplo como
“usando_frameset.html”.
<html>
<head>
<title>o frameSet</title>
</head>
<frameset cols="15%,*">
<frame src="menu.html"></frame>
<frame src="quadro_principal.html"></frame>
</frameset>
</html>

38
Veja que o corpo da pagina no exemplo é limitada usando a tag
<frameset></frameset>. Foi usado o atributo “cols” para definir a divisão do
screen do navegador em colunas. Caso queira dividir a tela por linhas usamos o
atributo “rows”. O valor inserido no atributo “cols” foi “25%,*”, isso faz com que a
tela se divida em dois quadros. O primeiro tem largura de 25% da tela e o segundo
tem o restante, que é 75%.
Como estamos criando dois quadros, temos de inserir dois marcadores
<frame></frame> entre o frameset, onde o cada frame indica o quadro da tela.
Usamos o atributo src para definir qual pagina irá aparecer nos quadros.
No exemplo acima temos um pequeno problema. Caso clicarmos nos links do
quadro1 o conteúdo será mostrado no mesmo. Veja na imagem abaixo que clicamos
no link “pagina1” e o quadro1 foi carregado pelo link.

39
Para fazer com que os links clicados no quadro1 sejam carregados no
quadro2, usamos o atributo “name” nos frames e referenciamos nos atributos
“target” dos links.
Alterando o frameset, temos:
<html>
<head>
<title>o frameSet</title>
</head>
<frameset cols="15%,*">
<frame name="quadro1" src="menu.html"></frame>
<frame name="quadro2" src="quadro_principal.html"></frame>
</frameset>
</html>
Agora o primeiro frame tem o nome de “quadro1” e o segundo tem o nome de
“quadro2”.
Alterando os links da pagina menu, temos:
<html>
<head>
<title>menu</title>
</head>
<body bgcolor="#00FF00">
<h2>MENU</h2>
<a href="quadro_principal.html" target="quadro2">pagina
1</a><br>
<a href="tabelas.html" target="quadro2">tabelas</a><br>
<a href="usando_img.html" target="quadro2">Usando
Img</a><br>
</body>
</html>
Veja que nos links usamos o atributo “target” definido onde vamos carregar os
links, pois caso não configurarmos, os links serão carregados na mesma pagina.
Podemos usar o atributo target para carregar o link em uma nova pagina, para
isso usa-se o valor “_blank”. Caso queira carregar o link no quadro principal, isto é,
no frameset usamos o valor “_top”.

40
BIBLIOGRAFIA
www.w3schools.com

Curso HTML Módulo I

Recomendados

Recomendados

Mais conteúdo relacionado

Semelhante a Curso HTML Módulo I

Semelhante a Curso HTML Módulo I (20)

Mais de ailton bsj

Mais de ailton bsj (7)

Curso HTML Módulo I