Post on 10-Jul-2015
5/11/2018 HTML e CSS - slidepdf.com
http://slidepdf.com/reader/full/html-e-css-55a0ca535d411 1/52
Profesora: Iara Fernandes
Ribeiro
Aluna: Camila Vieira de Pontes
Turma: C911M em 2007
5/11/2018 HTML e CSS - slidepdf.com
http://slidepdf.com/reader/full/html-e-css-55a0ca535d411 2/52
Colégio e Faculdade Mercúrio - HTML & CSS – Professora Iara Fernandes Ribeiro
INDICEINDICE ...................................................................................................................................................................................2
INTRODUÇÃO ........................................................................................................................................................... ......... .3
CUIDADOS NA CONSTRUÇÃO DE UM SITE ...............................................................................................................4
TRACE METAS ....................................................................................................................................................................4
FAÇA UM ESBOÇO........................................................................................................................................................... 4DIVIDA O SEU SITE.......................................................................................................................................................... 4ACESSO DIRETO A INFORMAÇÃO......................................................................................................................................... 4EVITE SITES TIPO CARNAVAL............................................................................................................................................. 5 NÃO SE PRENDA A PLATAFORMAS...................................................................................................................................... 5DIVULGUE O SEU SITE E OBSERVE OS ACESSOS...................................................................................................................... 5COMO SE CRIA UM DOCUMENTO HTML .................................................................... ............ ............. ............. ............. ......5TAGS, MARCAS OU ELEMENTOS HTML .......................................................................... ............. ............. ............ ............. ..6ESTRUTURA BÁSICA....................................................................................................................................................... 7DESCRIÇÃO DOS ELEMENTOS BÁSICOS DO HTML: ................................................................... ............. ............. ............. ......7COMENTÁRIOS............................................................................................................................................................... 8
CARACTERES ESPECIAIS................................................................................................................................................... 8CRIANDO O PRIMEIRO DOCUMENTO HTML ................................................................ ............ ............. ............. ............. ......9 FORMATANDO CABEÇALHOS ......................................................................................................................... ........ 10
PARÁGRAFOS E QUEBRAS DE LINHA.................................................................................................................................. 10O COMANDO <BR> .............................................................. ............. ............. ............. ............. ............. ............. ........11O COMANDO <P> ................................................................. ............. ............. ............. ............. ............. ............. ........11ALINHANDO PARÁGRAFOS............................................................................................................................................... 11O COMANDO <HR> ....................................................................... ............. ............. ............. ............. ............ .............11
USANDO IMAGENS COMO LINHAS SEPARADORAS .............................................................................................12DIV .........................................................................................................................................................................12BLOCKQUOTE............................................................................................................................................................... 13
ESTILOS DE TEXTO E FONTE ....................................................................................................................... ........ ......14
APLICANDO CORES E TAMANHOS NO TEXTO ................................................................... ............. ............. ............. ..........15ALTERANDO O TAMANHO DA FONTE.................................................................................................................................. 15
Size ....................................................................................................................................................................... ........ .15 Face ............................................................................................................................................................................... 15Color .................................................................................................................................................................... ........ .15
CABEÇALHOS ................................................................................................................................................................. ..18
ALINHANDO CABEÇALHOS............................................................................................................................................... 18
LISTAS .................................................................................................................................................................................19
LISTAS ORDENADAS...................................................................................................................................................... 19LISTAS NÃO ORDENADAS............................................................................................................................................... 20LISTA DE DEFINIÇÃO..................................................................................................................................................... 20
IMAGENS ............................................................................................................................................................................22O COMANDO IMG.......................................................................................................................................................... 22MARQUEE.................................................................................................................................................................. 24
Combinando a utilização de vários Marquees .................................................................................................. ........ ..26
URLS E LINKS ............................................................................................................................................................. ......28
URL .............................................................................................. ............. ............. ............. ............. ............. ..........28Criando um Link com Arquivos Locais ........................................................................................................................28Usando uma Imagem como Hiperlink ..........................................................................................................................29Vinculando Arquivos de outros diretórios ...................................................................................................................29
CRIANDO LINKS PARA SEÇÕES DE UMA PÁGINA............................................................................................ 29Criando uma Âncora ........................................................................................................................................ ......... ...29
E NVIANDO E-MAIL DIRETAMENTE DA PÁGINA HTML ....................................................... ............. ............. ............. ..........29
DEFININDO DESTINOS.................................................................................................................................................... 30
Colégio e Faculdade Mercúrio - HTML & CSS – Professora Iara Fernandes Ribeiro
2
5/11/2018 HTML e CSS - slidepdf.com
http://slidepdf.com/reader/full/html-e-css-55a0ca535d411 3/52
Colégio e Faculdade Mercúrio - HTML & CSS – Professora Iara Fernandes Ribeiro
TABELAS .................................................................................................................................................................. ........ ..31
ELEMENTOS BÁSICOS DE TABELAS..................................................................................................................................... 31PARÂMETROS............................................................................................................................................................... 32
Parâmetros do elemento <TABLE> .................................................................................................................. ........ ..32 Parâmetros do elemento <TR> ....................................................................................................................................33 Parâmetros dos Elementos <TD> e <TH> .............................................................................................................. ...34
FRAMES ............................................................................................................................................................................ ..35Como funcionam os frames ............................................................................................................................. ........ .....36 O Comando Document ................................................................................................................................. ........ ........36 O Comando FRAMESET .......................................................................................................................................... ....36 Cols=tamanho .............................................................................................................................................. ........ ........36 ROWS=tamanho .......................................................................................................................................................... . 37 Combinando ROWS e COLS ........................................................................................................................... ........ .....37
O ATRIBUTO <FRAMESPACING=VALOR > .......................................................................... ............. ............. ............. ..37O ATRIBUTO <FRAMEBORDER =1/0> ...................................................... ............. ............. ............. ............. ............. ..........38O COMANDO <FRAME SRC> ............................................................................ ............. ............ ............. ............. .........38
Ajustando as margens internas do Frame ....................................................................................................................39 Barras de Rolagem e Redimensionamento dos Frames .................................................................................. ......... ...39
I NTERLIGAÇÃO DE FRAMES.............................................................................................................................................. 40
Criando a Estrutura dos Frames ..................................................................................................................................40Criando o conteúdo do Menu ..................................................................................................................................... ..40IFRAME ............................................................................ ............. ............. ............. ............ ............. ............. .........42
META .................................................................................................................................................................................. .43
I NFORMAÇÕES ESPECÍFICAS ............................................................................................................................................. 43VARIAÇÕES DO COMANDO META...................................................................................................................................... 43
MULTIMIDEA ....................................................................................................................................................................44
CONSIDERAÇÃO NO USO DE MULTIMIDEA............................................................................................................................ 44I NSERINDO UM VÍDEO..................................................................................................................................................... 44ATRIBUTOS UTILIZADOS EM VÍDEOS.................................................................................................................................. 45USANDO O COMANDO EMBED PARA EXIBIR VÍDEO............................................................................................................ 46
O comando NOEMBED ................................................................................................................................................47 SOM.......................................................................................................................................................................... 47
Inserindo Áudio ............................................................................................................................................ ........ ........48 Inserindo Áudio através de Hiperlinks .............................................................................................................. ........ ..48
I NSERINDO MÚSICA DE FUNDO......................................................................................................................................... 49O comando BGSOUND (Internet Explorer) ............................................................................................................... .49
GLOSSÁRIO ...................................................................................................................................................................... .50
GLOSSÁRIO ............................................................................................................ 55
INTRODUÇÃOA Internet é, sem dúvida alguma, é a grande explosão da atualidade, onde a cada dia
surgem mais e mais home pages de universidades, empresas, tendências, jornais, lojas e
tudo o mais que se possa imaginar.
Até pouco tempo, era impossível atingir um grande público com tanta facilidade e
rapidez. Com a WWW, tudo fica fácil. Porém, surgem alguns desafios e responsabilidades.
O grande desafio, é ser suficientemente interessante, para que as pessoas queiram visitar
Colégio e Faculdade Mercúrio - HTML & CSS – Professora Iara Fernandes Ribeiro
3
5/11/2018 HTML e CSS - slidepdf.com
http://slidepdf.com/reader/full/html-e-css-55a0ca535d411 4/52
Colégio e Faculdade Mercúrio - HTML & CSS – Professora Iara Fernandes Ribeiro
novamente. A grande reponsabilidade é oferecer algo de valor ou interesse para a
comunidade alvo, e lembrar que nem todo mundo possui conexão de alta velocidade. Se
quiser atrair a atenção das pessoas, você precisa ser criativo, cortês e interessante.
Construir um site interessante é um grande desafio, e saber HTML não é o suficiente,
então, antes de entrarmos nos detalhes da criação de página, vamos ver alguns cuidados
na construção de um site.
CUIDADOS NA CONSTRUÇÃO DE UM SITE
TRACE METAS Para que você tenha algum sucesso em seu site, o mesmo deve oferecer algo
atualizado e interessante.
Se você fizer algo focado em um público em especial, com bom conteúdo atualizadoconstantemente o seu site tem boas chance s de ser bem visitado.
Portanto antes de fazer uma página planeje bem o que você quer colocar em seu site
por que se um internauta o visitar e não ver algo que o interesse com certeza ele não
voltará.
FAÇA UM ESBOÇOOrganizar um site é uma das formas mais fáceis de garantir um bom resultado final.
Então antes de sair criando códigos de HTML, pare pegue papel e caneta e desenhe o seu
site para que ele não fique totalmente fora de foco.
DIVIDA O SEU SITEDivida o seu site em seções principais, relacionadas aos assuntos principais. Isto
além de facilitar o seu trabalho também facilitará ao visitante a navegação pelo seu site.
ACESSO DIRETO A INFORMAÇÃO
Evite sites “labirintos” em que o visitante fica navegando de um lado para outro enunca consegue encontrar o que realmente deseja.
Evite também percursos longos até o destino desejado, pois com certeza a internauta
que visitar o seu site vai acabar desistindo no meio do caminho.
Então para facilitar ao máximo a navegação por seu site crie barras de navegação se
possível com links para todas a seções.
Ao final de cada assunto criar um link para o inicio da página.
Colégio e Faculdade Mercúrio - HTML & CSS – Professora Iara Fernandes Ribeiro
4
5/11/2018 HTML e CSS - slidepdf.com
http://slidepdf.com/reader/full/html-e-css-55a0ca535d411 5/52
Colégio e Faculdade Mercúrio - HTML & CSS – Professora Iara Fernandes Ribeiro
EVITE SITES TIPO CARNAVALProcure seguir um padrão entre as suas páginas, se for usar fontes escuras use
fundos mais claros e vice versa e não faça uma página rosa choque, outra em seguida
verde-limão, etc...
NÃO SE PRENDA A PLATAFORMASVocê não pode esquecer que os internautas usam diversos tipos de sistemas
(Windows, Mac, Linux, etc...), então procure diminuir ao máximo o tamanho de imagens,
usar uma resolução de tela que você sabe que não dará problema na maioria das telas e
se possível testar o seu site em diversos sistemas operacionais.
DIVULGUE O SEU SITE E OBSERVE OS ACESSOSProcure cadastrar o seu site em todos os mecanismos de busca possíveis, e verifique
se possível ( alguns provedores de hospedagem dão esta opção) verifique sempre o cessoao seu site, se ele estiver baixo com certeza alguma coisa nele está errada.
COMO SE CRIA UM DOCUMENTO HTMLPara fazer Home Pages, você terá que aprender pelo menos um pouco de HTML
(Hipertext Markup Language) - Linguagem de Hipertexto Baseada em Marcas.
Apesar da palavra linguagem, que leva a associação com linguagens de
programação, não se assuste, você vai perceber que gerar documentos HTML é bastante
fácil e parecido com formatação de textos.
Para que qualquer computador pudesse entender os documentos HTML, sem as
complicações que trazem os caracteres de controles e coisa do tipo, foi definido que estes
documentos deveriam ser gerados no formato mais simples possível, o formato “txt”.
Colégio e Faculdade Mercúrio - HTML & CSS – Professora Iara Fernandes Ribeiro
5
5/11/2018 HTML e CSS - slidepdf.com
http://slidepdf.com/reader/full/html-e-css-55a0ca535d411 6/52
Colégio e Faculdade Mercúrio - HTML & CSS – Professora Iara Fernandes Ribeiro
Desta forma, documentos HTML podem ser gerados por qualquer editor de textos,
desde que gravados no formato texto e com extensão.Htm ou .html.
Uma página Web é composta de textos e comandos especiais que são chamados de
(tags). Assim como qualquer linguagem, o programador deve escrever o código-fonteseguindo as regras da linguagem. Esse código-fonte é posteriormente interpretado pelo
browser, que se encarregará de executar os comandos (tags) do código para formatar e
acessar recursos da Web.
O código fonte pode ser escrito usando-se o mais simples dos editores de texto.
Podemos usar o Bloco de Notas para esta tarefa. Mas existem outros editores, como
exemplo o Microsoft FrontPage, DreamWeaver, dentre muitos outros.
TAGS, MARCAS OU ELEMENTOS HTML
As TAGS são utilizadas para fazer todas as indicações necessárias ao Browser
(Programa navegador, capaz de recuperar páginas Web para seu computador).
Normalmente são especificadas em pares, delimitando um texto que sofrerá algum tipo de
formatação.
As TAGS são identificadas pelo sinais < > ou </ >.Entre os sinais <> são especificados os comandos propriamente ditos. No caso de
tags que necessitam envolver um texto, sua finalização deve ser feita usando-se a barra
de divisão / , indicando que a TAG está finalizando a marcação de texto.
Os principais elementos de página HTML são, títulos, textos, parágrafos, imagens e
links, responsáveis pela chamada de outras páginas para a tela:
Título: É o texto que aparece na barra de título do browser.
Imagem: São figuras, desenhos e fotos usados para ilustrar a página.
Texto: É a informação mais comum dentro de uma página. Pode ser formatado
através de comandos.
Link : É um trecho que aparece destacado do restante do texto, normalmente
sublinhado e com outra cor. Ao clicar no Link, o browser acessa outra região da página
atual ou uma página localizada em qualquer lugar na Internet. Uma figura também pode
ser usada como link, ou seja, clicando na figura saltamos para outro local.
Colégio e Faculdade Mercúrio - HTML & CSS – Professora Iara Fernandes Ribeiro
6
5/11/2018 HTML e CSS - slidepdf.com
http://slidepdf.com/reader/full/html-e-css-55a0ca535d411 7/52
Colégio e Faculdade Mercúrio - HTML & CSS – Professora Iara Fernandes Ribeiro
Cabeçalho: São linhas de texto com tamanhos especiais. Existem seis tamanhos de
cabeçalhos.
ESTRUTURA BÁSICA
A estrutura básica de um documento HTML é a seguinte:<HTML><HEAD>
<TITLE> Titulo do Documento < /TITLE>< /HEAD>
<BODY>texto,imagem,links, etc...
< /BODY>
< /HTML>
OBS.: As ( tags ) HTML não são sensíveis à caixa, ou seja, tanto faz escrever com
letras maiúsculas ou minúsculas, porém se você escrever em maiúsculas será bem melhor
para identificá-las. Veja: <HTML> </html>
DESCRIÇÃO DOS ELEMENTOS BÁSICOS DO HTML:<HTML></HTML>: Indicam respectivamente o início e o fim do documento. Todo o
resto deve estar entre estas marcas.
<HEAD></HEAD>: Delimitam a seção de cabeçalho do documento. Trata-se da
primeira seção do documento.
<TITLE></TITLE>: Indicam o título do documento, que será apresentado na barra
superior do browser. Estas marcas devem constar da seção de cabeçalho.
<BODY></BODY>: Corpo do documento. Entre estas marcas estará o conteúdo a
ser apresentado, textos, cores, imagens, etc. Este elemento pode conter cinco parâmetros
opcionais:
BACKGROUND: configura especificar uma imagem como fundo da página.
EX. <BODY BACKGROUND= “fundo.gif” > configura uma página com a imagem
fundo.gif como fundo.
BGCOLOR: Configura a cor de fundo da página, podendo ser configurado com um
valor Hexadecimal.
Colégio e Faculdade Mercúrio - HTML & CSS – Professora Iara Fernandes Ribeiro
7
5/11/2018 HTML e CSS - slidepdf.com
http://slidepdf.com/reader/full/html-e-css-55a0ca535d411 8/52
Colégio e Faculdade Mercúrio - HTML & CSS – Professora Iara Fernandes Ribeiro
EX: <BODY BGCOLOR= “White”> configura uma página com fundo branco
(padrão).
TEXT: configura a cor padrão do texto da página.
EX: <BODY TEXT= “Blue” > configura uma página com texto em cor preta. (padrão).
LINK, ALINK, VLINK: configura as cores dos links da página.
LINK configura a cor do link antes de clicado clicado; ALINK configura a cor do link
ativo, isto é quando é clicado; VLINK configura a cor de um link já visitado.
EX: <BODY LINK=”Blue” VLINK=”Purple” ALINK=”Red”> configura uma página
com links azuis, links visitados roxos e links ativos vermelhos.
Todas as marcas apresentadas são do tipo início-fim, ou seja, funcionam em pares.
Existe uma ordem seqüencial lógica entre as marcas.
Estes detalhes devem ser respeitados, senão o browser não conseguirá apresentar o
documento.
OBS.: Como HTML não é uma linguagem de programação, você não será avisado de
erros que tenha cometido na edição do seu documento.
COMENTÁRIOSPodemos também acrescentar comentários ao nosso código HTML, estes
comentários não aparecem para no navegado e somente no código, são representados
pela seguinte TAG <!- - inicia o comentário //- - >, finaliza o comentário.
CARACTERES ESPECIAISExistem caracteres que não podem ser obtidos através de teclado. Eles podem ser
inseridos em sua página através da especificação de um código especial que o browser
interpreta e substitui por um caractere específico. Esses códigos podem ser obtidosutilizando-se uma nomenclatura definida pela norma ISO.
HTML permite que caracteres especiais sejam representados por seqüências de
escape, indicadas por três partes: um & inicial, um número ou cadeia de caracteres
correspondente ao caracter desejado, e um ; final.
Quatro caracteres ASCII - <, >, e & têm significados especiais em HTML, e são
usados dentro de documentos seguindo a correspondência:
Colégio e Faculdade Mercúrio - HTML & CSS – Professora Iara Fernandes Ribeiro
8
5/11/2018 HTML e CSS - slidepdf.com
http://slidepdf.com/reader/full/html-e-css-55a0ca535d411 9/52
Colégio e Faculdade Mercúrio - HTML & CSS – Professora Iara Fernandes Ribeiro
Entidade Caracter
< <
> >
& &
Outras sequências de escape suportam caracteres ISO Latin1. Aqui está uma tabelacom os caracteres mais utilizados em Português:
Entidade Caracter
á á
â â
à à
ã ã
ç ç
é é
ê ê
í í
ó ó
ô ô
õ õ
ú ú
ü ü
Entidade Caracter
Á Á
 Â
À À
à Ã
Ç Ç
É É
Ê Ê
Í Í
Ó Ó
Ô Ô
Õ Õ
Ú Ú
Ü Ü
Existem alguns símbolos que vêm sendo incorporados ao conjunto de caracteres
reconhecidos em HTML. Por exemplo, ©, que é o símbolo © , ® para ® , e §
para §.
CRIANDO O PRIMEIRO DOCUMENTO HTMLAbra o bloco de notas e digite a linha de cógigo a sagir:
<HTML>
<HEAD><TITLE>Este é o meu primeiro documento em HTML</TITLE>
</HEAD>
<BODY BGCOLOR="Blue" TEXT="Black">
Meu primeiro texto em Html, no momento não usarei nenhuma formatação especial
aqui dentro.
</BODY>
Colégio e Faculdade Mercúrio - HTML & CSS – Professora Iara Fernandes Ribeiro
9
5/11/2018 HTML e CSS - slidepdf.com
http://slidepdf.com/reader/full/html-e-css-55a0ca535d411 10/52
Colégio e Faculdade Mercúrio - HTML & CSS – Professora Iara Fernandes Ribeiro
</HTML>
Agora salve sem esquecer que a extensão é.HTML. Ficará assim: primeiro.HTML
Minimize o bloco de notas e abra o arquivo. Ele vai aparecer no seu Browser. Sehouver a necessidade de alguma alteração, sem fechar o Browser, maximize o Bloco de
Notas, faça as alterações necessárias e salve, para isso você pose simplesmente
pressionar as teclas Ctrl+S. Volte ao Browser e pressione a tecla F5 para atualizar.
FORMATANDO CABEÇALHOSComo vimos anteriormente há seis níveis de cabeçalhos em HTML, de <H1> a <H6>:
<H1> Este é um cabeçalho de nível 1 </H1>
<H2> Este é um cabeçalho de nível 2 </H2><H3> Este é um cabeçalho de nível 3 </H3><H4> Este é um cabeçalho de nível 4 </H4><H5> Este é um cabeçalho de nível 5 </H5><H6> Este é um cabeçalho de nível 6 </H6>
Veja no bloco de notas:
<HTML>
<HEAD>
<TITLE>Formatando Cabeçalhos</TITLE>
</HEAD>
<BODY>
<H6 align="center">Minha primeira página</H6>
<H5 align="center">Minha primeira página</H5>
<H4 ALIGN="center">Minha primeira página</H4><H3 ALIGN="center">Minha primeira página</H3>
<H2 ALIGN="center">Minha primeira página</H2>
<H1 ALIGN="center">Minha primeira página</H1>
</BODY>
</HTML>
PARÁGRAFOS E QUEBRAS DE LINHA
Colégio e Faculdade Mercúrio - HTML & CSS – Professora Iara Fernandes Ribeiro
10
5/11/2018 HTML e CSS - slidepdf.com
http://slidepdf.com/reader/full/html-e-css-55a0ca535d411 11/52
Colégio e Faculdade Mercúrio - HTML & CSS – Professora Iara Fernandes Ribeiro
Num programa HTML você não pode inserir uma quebra ou avanço de linha toda vez
que pressiona a tecla ENTER, é necessário colocar um comando específico para que o
browser entenda que você deseja mudar de linha e iniciar uma nova linha ou começar um
novo parágrafo. Existem dois comandos para criar quebras de linha e novos parágrafos.
São os comandos <P> e <BR>
O COMANDO <BR>O comando <P> insere uma linha em branco no seu local ou na linha seguinte à qual
ele foi inserido, caso esteja no meio de uma linha de texto e não em seu final. O comando
<BR> tem como função avançar para a linha imediatamente após àquela em que ele se
encontra, sem, contudo, deixar uma linha em branco.
O COMANDO <P>Para forçar um novo parágrafo, ou seja, avançar uma linha em branco e iniciar o
texto na segunda linha após o final do parágrafo anterior deve ser usado o comando <P>.
ALINHANDO PARÁGRAFOS
O Comando <P> inicia um novo parágrafo onde o texto é automaticamente alinhado
pela margem esquerda da tela. Através do parâmetro ALIGN, pode-se mudar o
alinhamento de forma que o texto do parágrafo inteiro fique centralizado ou alinhado à
direita. Nesse caso, deve-se usar um par de comandos <P> envolvendo o parágrafo.
ALIGN=LEFT Alinha pela margem esquerda (padrão)
ALIGN=RIGHT Alinha pela margem direita
ALIGN=CENTER Centraliza o texto.
ALIGN=JUSTIFY Alinha pelas duas margens
O COMANDO <HR>O comando <HR> tem como finalidade inserir uma linha divisória na posição em que
foi especificadoF. Seu uso é recomendado para criar uma divisão na página.
Alterando o formato de linha de separação
As linhas criadas pelo comando <HR> podem ter o seu tamanho alterado pelos
parâmetros SIZE e WIDTH.
SIZE – Configura a espessura da linha.
Colégio e Faculdade Mercúrio - HTML & CSS – Professora Iara Fernandes Ribeiro
11
5/11/2018 HTML e CSS - slidepdf.com
http://slidepdf.com/reader/full/html-e-css-55a0ca535d411 12/52
Colégio e Faculdade Mercúrio - HTML & CSS – Professora Iara Fernandes Ribeiro
WIDTH - Configura a largura ou comprimento da linha. Pode ser expresso em pixels,
sendo que, nesse caso, o tamanho da linha é fixo ou utiliza uma porcentagem relativa à
largura da janela. Assim, seu tamanho varia em função da largura da janela.
ALIGN – Configura o alinhamento da linha.(Left, right ou center).
NOSHADE – Desenha uma linha sólida sem sombra (default= linha sombreada).
Tudo isso é muito fácil, não é mesmo? Então vamos incrementar um pouquinho mais
a nossa página.
EX.:
<HTML>
<HEAD>
<TITLE>Este é o meu primeiro documento em HTML</TITLE>
</HEAD>
<BODY BGCOLOR="blue" TEXT="Black">
<H3>Meu primeiro texto em Html, no momento não usarei nenhuma formatação
especial aqui dentro.</H3><BR>
Agora já posso fazer a quebra de linhas<BR>
<P ALIGN="center">e inserir um novo parágrafo centralizado.</P>
<P> Agora vou inserir uma linha horizontal na minha página</P>
<HR SIZE="10" width="50%" ALIGN="center" NOSHADE>
</BODY>
</HTML>
USANDO IMAGENS COMO LINHAS SEPARADORAS
Em vez de usar o comando <HR> como separador, podemos usar uma imagem com
o comando <IMG>. Assim como o comando HR, podemos usar os parâmetros WIDTH e
HEIGHT para alterar o tamanho da imagem.
DIV
Colégio e Faculdade Mercúrio - HTML & CSS – Professora Iara Fernandes Ribeiro
12
5/11/2018 HTML e CSS - slidepdf.com
http://slidepdf.com/reader/full/html-e-css-55a0ca535d411 13/52
Colégio e Faculdade Mercúrio - HTML & CSS – Professora Iara Fernandes Ribeiro
A Tag <DIV></DIV> envolve uma área do texto ou divisão que pode receber
parâmetros específicos de alinhamento, como é o caso de ALIGN, para alinhar o texto.
Podemos envolver vários parágrafos com o elemento DIV
BLOCKQUOTE O comando Blockquote permite dar recuos de parágrafos aos parágrafos, e pode ser
cumulativo
Ex.:
<HTML>
<Head>
<TITLE>Formatação de Parágrafos</TITLE>
</HEAD>
<BODY BGCOLOR=”Green” TEXT=”Blue”>
<H1 align="center">Alinhamento de parágrafos</H1>
<P align="center">O comando align "center" permitiu que meu texto ficasse
centralizado</P>
<P align="Justify">Agora O comando align "Justify" fez com que meu texto ficasse
justificado. O alinhamento justificado é muito útil para que o texto fique todo certinho.</P>
<P ALIGN="LEFT">Meu texto ficou alinhado à esquerda com o comando align
"left"</P>
<P align="RIGHT">Meu texto está alinhado à direita porque utilizei o comando align
"right"</P><BR>
<HR align="center"> <!--insere uma linha simples><//-->
<BLOCKQUOTE>Com o comando blockquote pude recuar uma vez o meutexto</BLOCKQUOTE>
<BLOCKQUOTE><BLOCKQUOTE>Aqui recuei meu texo 2 vezes, logo a seguir
aparece uma linha vermela porque utilizei o comando "HR" mais o atibuto "color e atributo
Size</BLOCKQUOTE></BLOCKQUOTE>
<HR color="red" WIDTH=75% SIZE=20 > <!--insere uma linha vermelha utilizando
75% da largura da página com a espessura 20<//-->
</BODY>
Colégio e Faculdade Mercúrio - HTML & CSS – Professora Iara Fernandes Ribeiro
13
5/11/2018 HTML e CSS - slidepdf.com
http://slidepdf.com/reader/full/html-e-css-55a0ca535d411 14/52
Colégio e Faculdade Mercúrio - HTML & CSS – Professora Iara Fernandes Ribeiro
</HTML>
ESTILOS DE TEXTO E FONTE
Assim como no editor de textos, você pode criar uma série de efeitos no texto,
alterando a forma ou o tipo da fonte. Todos os comandos que alteram o estilo do texto são
do tipo contêiner ou liga desliga, ou seja, precisam ser especificados em pares, marcando
o início e fim do texto que sofrerá a formatação.
Os principais comandos de estilo de texto são:
Comando Sintaxe Função
Negrito <B>Texto</B> Aplica o estilo Negrito
Itálico <I>Texto</I> Aplica o estilo Itálico
Sublinhado <U>Texto</U> Aplica o estilo sublinhado(Não funcionaem alguns Browsers
Strong <Strong>Texto</Strong> Similar ao Negrito
Typerwriter <TT>Texto</TT> Deixa o texto com espaçamento regular
Big <BIG>Texto</BIG> Aumenta a fonte e aplica negrito
Small <SMALL>Texto</SMALL> Reduz e altera a fonte
Sobrescrito <SUP>Texto</SUP> Eleva o texto e diminui seu corpoSubscrito <SUB>Texto</SUB> Rebaixa o texto e diminui seu corpo
Pulsante <BLINK>Texto</BLINK> Faz com que o texto pisque (Nãofunciona no IE 4.
Colégio e Faculdade Mercúrio - HTML & CSS – Professora Iara Fernandes Ribeiro
14
5/11/2018 HTML e CSS - slidepdf.com
http://slidepdf.com/reader/full/html-e-css-55a0ca535d411 15/52
Colégio e Faculdade Mercúrio - HTML & CSS – Professora Iara Fernandes Ribeiro
APLICANDO CORES E TAMANHOS NO TEXTO
ALTERANDO O TAMANHO DA FONTE Um dos recursos de tratamento do texto mais interessantes da linguagem HTML é a
possibilidade de alterar o tamanho, a cor e o tipo da fonte do texto utilizado. O comando
responsável por isso é o comando <FONT>, que é do tipo liga desliga.
SizeO parâmetro size especifica o tamanho da fonte utilizada. Os valores permitidos vão
de 1, o menor até 7, o maior. O padrão é 3. Se for especificado um número antecedido
pelo sinal de adição ou de subtração, o tamanho da fonte atual será aumentado oudiminuído nesse valor. Por exemplo, se a fonte atual é 3 e for especificado <FONT
SIZE=+2> o texto será exibido no tamanho 5. Se o valor for especificado sem sinal, a fonte
será exibida no tamanho especificado.
FaceEsse parâmetro permite que seja escolhida uma fonte diferente para o texto.
Podemos especificar várias fontes, de maneira que, se o sistema não possuir a primeira
opção, a segunda é carregada.
Se não for encontrada nenhuma das fontes especificadas, o texto é exibido na fonte
padrão.
Color
Esse parâmetro especifica a cor do texto. Seu valor pode ser especificado no formato
hexadecimal, RGB ou através de um nome predefinido de cores como mostra a tabela
abaixo:
Colégio e Faculdade Mercúrio - HTML & CSS – Professora Iara Fernandes Ribeiro
15
5/11/2018 HTML e CSS - slidepdf.com
http://slidepdf.com/reader/full/html-e-css-55a0ca535d411 16/52
Colégio e Faculdade Mercúrio - HTML & CSS – Professora Iara Fernandes Ribeiro
Cores e Fontes
Cores - As cores são introduzidas através do elemento <FONT>, usando o sistema
RGB para cores (da mesma forma que vimos para cores de documentos), como mostradono exemplo a seguir:
<FONT COLOR="red"> Texto </FONT>
Produzirá na página: a palavra Texto escrita na cor vermelha.
Assim, um trecho de texto pode ter uma cor diferente da definição geral de cores,
feita através dos
atributos de <BODY>.
Tamanho - Veja a formatação a seguir:
<FONT SIZE=3> Texto </FONT>
Colégio e Faculdade Mercúrio - HTML & CSS – Professora Iara Fernandes Ribeiro
16
Cor Código Cor Código
Aqua #70DB93 Blue #0000FF
Black #000000 Cyan #00FFFF
Fuchsia #FF00FF Gray #C0C0C0
Green #00FF00 Lime #32CD32
Brown #800000 Navy #23238E
Olive #808000 Red #FF0000
Silver #E6E8FA Teal #008080
White #FFFFFF Yellow #FFFF00
5/11/2018 HTML e CSS - slidepdf.com
http://slidepdf.com/reader/full/html-e-css-55a0ca535d411 17/52
Colégio e Faculdade Mercúrio - HTML & CSS – Professora Iara Fernandes Ribeiro
Produzirá na página: a palavra Texto como o tamaho 3.
Este comando permite que o autor do documento altere o tamanho das letras em
trechos específicos de
texto. O tamanho básico dos textos é 3 (padrão). Podemos indicar tamanhos relativos
a esse, por exemplo:
<FONT SIZE=+2> Letra maior </FONT>
Letra normal
<FONT SIZE=-2> Letra menor </FONT>
Letra maior Letra normal Letra menor
Fontes - Uma evolução que permite a escolha da fonte para os textos, é o atributo
FACE:
<FONT FACE="Arial"> Texto </FONT>
Produzirá: a palavra Texto com a fonte (tipo de letra) Arial.
Mais exemplos:
<FONT FACE="Verdana" COLOR="blue"> Fonte Verdana Azul </FONT>
Fonte Verdana Azul
Apostila de HTML - Fonte: http://www.icmc.usp.br/ensino/material/html/intro.html
Profa. Flávia Pereira de Carvalho - fpereira@faccat.br - http://fit.faccat.br/~fpereira 8
<FONT FACE="Arial" COLOR="green"> Fonte Arial Verde </FONT>
Fonte Arial verde
<FONT FACE="Courier New" COLOR="red"> Fonte Courier New Vermelha </FONT>
Fonte Courier New Vermelha
Não exagere na quantidade cores e tamanho das letras do texto ou a sua página
parecerá uma mensagem enviada por código.
Veja o exemplo abaixo:
As figuras acima mostram o código anterior sendo visualizado no IE e o Netscape,
observem que no IE o comando BLINK não é aplicado.
<HTML>
<HEAD><TITLE>Aplicando estilos de texto</TITLE>
</HEAD>
<body bgcolor=”blue”>
Colégio e Faculdade Mercúrio - HTML & CSS – Professora Iara Fernandes Ribeiro
17
5/11/2018 HTML e CSS - slidepdf.com
http://slidepdf.com/reader/full/html-e-css-55a0ca535d411 18/52
Colégio e Faculdade Mercúrio - HTML & CSS – Professora Iara Fernandes Ribeiro
<font face="Arial" size="4" color="Red">Este texto está em<B>Negrito</B><BR>
Este texto está em <I>Itálico</I><BR>
Este texto está em <U>Sublinhado</U><BR>
Este texto está em<B><I> Negrito e Itálico</B></I><P>Este texto recebeu o estilo<STRONG> chamado Strong que é parecido com
</STRONG>negrito<BR>
Este texto recebeu o estilo<TT>Typerwriter</TT>.<HR>
Este texto recebeu o formato de fonte <BIG>big</BIG> que cria letras grandes.<BR>
Este texto recebeu o formato de fonte <SMALL>Small</SMALL> que cria letras
pequenas. <BR>
Este é um exemplo de texto <SUP>Sobrescrito</SUP> pelo comando SUP.<BR>
Este é um exemplo de texto onde foi usado o efeito <SUB>Subscrito</SUB> do
comando SUB.<P>
Para chamar a <BLINK>atenção</BLINK> use o comando BLINK.</font>
</BODY>
</HTML>
CABEÇALHOS
Outra forma muito usada para mudar o tamanho da letra e aplicar um efeitos em
textos é utilizando cabeçalhos. A linguagem HTML possui seis comandos de cabeçalho de
<H1> até <H6>. Além do tamanho diferenciado, o comando cabeçalho insere uma linha
em branco antes e depois da linha que contém o comando. Eles são perfeitos para criar
títulos e iniciar seções dentro de uma página. O comando<H1>
possui o maior tamanhoenquanto que <H6> possui o menor tamanho de fonte.
ALINHANDO CABEÇALHOS
Como padrão um cabeçalho gerado pelo comando <Hn> é sempre posicionado no
lado esquerdo da linha. Usando o parâmetro ALIGN pode-se centralizar ou ajustar o
cabeçalho à direita da linha.
Veja o código:
Colégio e Faculdade Mercúrio - HTML & CSS – Professora Iara Fernandes Ribeiro
18
5/11/2018 HTML e CSS - slidepdf.com
http://slidepdf.com/reader/full/html-e-css-55a0ca535d411 19/52
Colégio e Faculdade Mercúrio - HTML & CSS – Professora Iara Fernandes Ribeiro
<HTML>
<HEAD><TITLE>Alinhando Cabeçalhos</TITLE>
</HEAD>
<BODY>
<H2> Cabeçalho sem alinhamento especial</H2>
<HR>
<H2 ALIGN=CENTER>Cabeçalho com alinhamento centralizado</H2>
<HR>
<H2 ALIGN=RIGHT>Cabeçalho com alinhamento à direita</H2>
</BODY>
</HTML>
LISTAS
Na linguagem HTML existem elementos específicos para a criação de listas, que
podem ser listas ordenadas (OL), listas sem ordenação (UL), ou listas de definições (DL).
Um detalhe interessante é que podem ser criadas listas aninhadas, ou seja, listas dentro
de listas. A seguir, veremos as características de cada umas delas.
LISTAS ORDENADAS
<OL TYPE=...START=...>...</OL> são os elementos delimitadores de listasordenadas (OL – Ordered Lists). A estrutura das listas ordenadas é bastante simples: entre
os elementos de início e fim, os itens da lista são definidos pelos elementos <LI></LI>. Os
itens são apresentados em linhas consecutivas e precedidos por uma numeração atribuída
pelo paginador. O parâmetro opcional TYPE define como será o tipo de numeração de
cada linha. Os tipos disponíveis são: “A” (A,B,...Z), “a” (a,b,...z), “I” (I,II,III, etc.), “i’
(i,ii,iii,etc), e “1” (1,2,3,etc). Se omitido, é utilizado o tipo padrão (1,2,3, etc). O parâmetro
opcional START define a partir de que elemento a numeração deve se iniciar. Ele deve
receber como valor um número indicando em que posição a contagem deve se iniciar.
Colégio e Faculdade Mercúrio - HTML & CSS – Professora Iara Fernandes Ribeiro
19
5/11/2018 HTML e CSS - slidepdf.com
http://slidepdf.com/reader/full/html-e-css-55a0ca535d411 20/52
Colégio e Faculdade Mercúrio - HTML & CSS – Professora Iara Fernandes Ribeiro
LISTAS NÃO ORDENADAS
<UL>...</UL> são os elementos delimitadores de listas sem ordenação (UL –
Unordered Lists). A estrutura das listas sem ordenação é a mesma das listas ordenadas,
sendo que, na apresentação, os itens serão precedidos por um marcador (bullet). No caso
de listas sem ordenação aninhadas (listas dentro de listas), o paginador utilizará um
marcador (bullet) diferente para os itens de cada lista.
Como já foi visto acima <LI>...</LI> é o elemento que define um item de uma lista
ordenada ou sem ordenação. O seu conteúdo pode ser texto, outras listas, imagens,
links ,etc.
LISTA DE DEFINIÇÃO
<DL>...</DL> são as marcas que englobam uma lista de definições, ideais para acriação de glossários e coisas do gênero. A estrutura desta lista é diferente das outras,
pois existem dois elementos – o termo a ser definido (DT), e a definição propriamente dita
(DD). Na apresentação cada termo aparece em uma linha, e a respectiva definição na
linha seguinte, deslocada para a direita.
<HTML>
<HEAD>
<TITLE>Listas de definição</TITLE>
</HEAD>
<BODY>
<H2>Listas de definição</H2>
<DL>
<DT>HTML</DT><DD>Hiper Text Markup Language</DD>
<DT>OL</DT>
<DD>Listas ordenadas com numeração.</DD>
<DT>UL</DT>
<DD>Listas sem ordenação</DD>
<DT>LI</DT>
Colégio e Faculdade Mercúrio - HTML & CSS – Professora Iara Fernandes Ribeiro
20
5/11/2018 HTML e CSS - slidepdf.com
http://slidepdf.com/reader/full/html-e-css-55a0ca535d411 21/52
Colégio e Faculdade Mercúrio - HTML & CSS – Professora Iara Fernandes Ribeiro
<DD>Elemento da Lista</DD>
</DL>
<H2>Listas não ordenadas combinadas<BR>com uma lista de Definição</H2>
<DL><DT>Parâmetro do elemento UL</DT>
<DD>Lista não ordenada
<UL>
<LI>TYPE</LI>
<LI>START</LI>
</UL>
</DD>
<BR>
<DT>Parâmetros do elemento IMG<Br> Utilizando Parâmtro do elemento OL</DT>
<DD>Lista ordenada com marcador alfabético<BR>
<OL type=A start=A>
<LI>SRC</LI>
<LI>ALT</LI>
<LI>BORDER</LI>
<LI>WIDTH</LI>
</OL>
<DD>Lista ordenada com marcador alfabético<BR><OL type=1 start=1>
<LI>HEIGHT</LI>
<LI>VSPACE</LI>
<LI>HSPACE</LI>
</OL>
</DD>
Colégio e Faculdade Mercúrio - HTML & CSS – Professora Iara Fernandes Ribeiro
21
5/11/2018 HTML e CSS - slidepdf.com
http://slidepdf.com/reader/full/html-e-css-55a0ca535d411 22/52
Colégio e Faculdade Mercúrio - HTML & CSS – Professora Iara Fernandes Ribeiro
</DL>
</BODY>
</HTML>
IMAGENS
Você pode obter uma imagem através de uma cópia feita a partir de uma página da
Internet, através de CDs ROMs, Scanners, etc. ou pode cria-las a partir de um programa
de imagens.
O COMANDO IMG
Esse comando define a posição de uma imagem que aparece no corpo do
documento.
<IMG SRC=”URL” WIDTH=”...” HEIGHT=”…” BORDER=”…” ALT=”Texto”
VSPACE=”…” HSPACE=”…”>
ALIGN=| “BOTTOM” | “TOP” | “MIDLE”
SRC=”URLÉ o nome da figura, se estiver no mesmo diretório do
programa ou seu caminho completo.
ALT=”texto” Exibe o texto quando o browser não encontra a imagem,ou uma legenda quando o cursor do mouse passa sobre ela
mostrando o texto especificado.
ALIGN=”TOP” | “MIDLE”| “BOTTOM”
Especifica o alinhamento da imagem relativamente à linha
de texto onde é exibida.
ALIGN=”LEFT” |“RIGHT”
Especifica o alinhamento da imagem relativamente às
bordas laterais da janela
WIDTH=”número”|”número%”
Esse parâmetro especifica a largura de exibição da
imagem independentemente do seu tamanho físico. Se a
imagem for maior ou menor do que o valor especificado, ela
será esticada ou comprimida para caber no espaço
especificado. Se for o colocado o sinal de porcentagem, ele é
relativo à largura da janela.
HEIGHT=”número”Especifica a altura de exibição da imagem
independentemente de seu tamanho físico. Se a imagem for
maior ou menor do que o valor especificado.
Colégio e Faculdade Mercúrio - HTML & CSS – Professora Iara Fernandes Ribeiro
22
5/11/2018 HTML e CSS - slidepdf.com
http://slidepdf.com/reader/full/html-e-css-55a0ca535d411 23/52
Colégio e Faculdade Mercúrio - HTML & CSS – Professora Iara Fernandes Ribeiro
BORDER=”número”Especifica em pixels a largura da borda da imagem. O
valor zero remove a imagem
VSPACE=”número”Determina em pixels o espaço que deve ser deixado em
branco na parte de cima e na parte de baixo da imagem.
HSPACE=”número” Determina em pixels o espaço que deve ser deixado embranco nas laterais da imagem
Com exceção do parâmetro SRC, todos os demais são opcionais. Portanto, para
exibir uma imagem chamada foto.gif que esteja no mesmo diretório do programa deve ser
especificado o seguinte comando: IMG SRC=”foto.gif”
Vamos para o bloco de notas praticar. (as figuras são sugestões, podem ser
substituídas, porém devem estar na mesma pasta do seu arquivo).
<HTML>
<HEAD>
<TITLE>Formatando texto dividido com imagens</TITLE>
</HEAD>
<BODY leftmargin="40%" rightmargin="40%" background="G59.jpg"
BGPROPERTIES="fixed" text="blue">
<H1 ALIGN="center">Minhas Imagens</H1>
<MARQUEE BEHAVIOR= SCROL WIDTH=100%> Veja como ficam distribuídas as
minhas imagens</MARQUEE><BR><br>
<img src="urso12.gif" width="100" height="120" alt="Minhas flores" align="left"
align="midle">
<DIV align="justify">Minhas rosas, Minhas rosas, Minhas rosas, Minhas rosas,
Minhas rosas, Minhas rosas, Minhas rosas, Minhas rosas, Minhas rosas, Minhas rosas,Minhas rosas, Minhas rosas, Minhas rosas, Minhas rosas, Minhas rosas, Minhas rosas,
Minhas rosas, Minhas rosas, Minhas rosas, Minhas rosas, Minhas rosas, Minhas rosas,
Minhas rosas, Minhas rosas, Minhas rosas, Minhas rosas, Minhas rosas, Minhas rosas,
Minhas rosas, Minhas rosas, Minhas rosas, Minhas rosas, Minhas rosas, Minhas rosas,
Minhas rosas, Minhas rosas, Minhas rosas, Minhas rosas, Minhas rosas, Minhas rosas,
Minhas rosas, Minhas rosas, Minhas rosas, Minhas rosas, Minhas rosas, Minhas rosas,
Minhas rosas, Minhas rosas, Minhas rosas, Minhas rosas, Minhas rosas, Minhas rosas ,
Colégio e Faculdade Mercúrio - HTML & CSS – Professora Iara Fernandes Ribeiro
23
5/11/2018 HTML e CSS - slidepdf.com
http://slidepdf.com/reader/full/html-e-css-55a0ca535d411 24/52
Colégio e Faculdade Mercúrio - HTML & CSS – Professora Iara Fernandes Ribeiro
Minhas rosas, Minhas rosas, Minhas rosas, Minhas rosas, Minhas rosas, Minhas rosas,
Minhas rosas, Minhas rosas, Minhas rosas, Minhas rosas, Minhas rosas"
</DIV><BR>
<hr>
<BR>
<img src="borboletas.gif" width="140" height="140"alt="Borboletas"
align="right"><DIV align="justify">Borboletas, Borboletas, Borboletas, Borboletas,
Borboletas, Borboletas, Borboletas, Borboletas, Borboletas, Borboletas, Borboletas,
Borboletas, Borboletas, Borboletas, Borboletas, Borboletas, Borboletas, Borboletas,
Borboletas, Borboletas, Borboletas, Borboletas, Borboletas, Borboletas, Borboletas,
Borboletas, Borboletas, Borboletas, Borboletas, Borboletas, Borboletas, Borboletas,Borboletas, Borboletas, Borboletas, Borboletas, Borboletas, Borboletas, Borboletas,
Borboletas, Borboletas, Borboletas, Borboletas, Borboletas, Borboletas, Borboletas,
Borboletas, Borboletas, Borboletas, Borboletas, Borboletas, Borboletas, Borboletas,
Borboletas, Borboletas, Borboletas, Borboletas, Borboletas, Borboletas, Borboletas,
</DIV>
<Br>
<BR>
<img src="estrela.gif" width="40" height="40"><b>Usando uma imagem como
marcador</B><BR>
Usando imagens como linhas separadoras
<BR>
<P ALIGN="CENTER"><img src="g52.gif" width="50%">
</BODY>
</HTML>
MARQUEE
O Internet Explorer introduziu um comando o chamado MARQUEE, que faz com que
um texto especificado fique rolando em uma determinada área da página.
Veja na tabela abaixo a sintaxe do comando MARQUEE
Colégio e Faculdade Mercúrio - HTML & CSS – Professora Iara Fernandes Ribeiro
24
5/11/2018 HTML e CSS - slidepdf.com
http://slidepdf.com/reader/full/html-e-css-55a0ca535d411 25/52
Colégio e Faculdade Mercúrio - HTML & CSS – Professora Iara Fernandes Ribeiro
ALIGN=posição
Especifica como o texto que envolve o marquee será
alinhado. Pode conter os seguintes valores:
TOP Alinha o texto pela sua parte superior
MIDDLE Alinha o texto pelo meio
BOTTOM Alinha o texto pela sua parte inferior
BEHAVIOR=tipo
Especifica o comportamento do texto, ou seja, como será a
sua rolagem pela janela. Pode conter os seguintes valores.
SCROLL
Inicia a rolagem introduzindo o texto de um
lado e rola o texto até que ele saia completamente
da janela no lado oposto ao que começou. Após a
ultima letra ter saído da tela, o texto reaparece no
canto inicial repetindo continuamente o processo.
SLIDE
Inicia a rolagem introduzindo o texto de um
lado e rola o texto até que ele atinja a borda oposta.
Quando a primeira letra do texto bater na borda, o
texto para de rolar e permanece naquela posição.
ALTERNATE
Cria um efeito de movimento para o texto, que
inicia de um lado, entrando pela borda da janela e,
ao bater na outra borda, inverte o seu deslocamento
voltando para a borda inicial.
BGCOLOR=cor Especifica a cor do texto do Segundo plano. Caso não seja
especificada uma cor, é assumida a cor de segundo plano atual.
DIRECTION=direção
Especifica a direção que o texto vai usar para o
deslocamento. O padrão é LEFT, que faz o texto deslocar-se do
canto direito da janela para o canto esquerdo. Pode ser
especificado também o valor RIGHT que inverte o sentido de
deslocamento.
HEIGHT =n
Especifica a largura do painel, ou a área do MARQUEE. Se
for especificado um número, ele é considerado como quantidade
de pixels. Se for seguido do sinal %, indica a largura com relação à
janela por meio da porcentagem.
HSPACE =nEspecifica a largura em pixels das margens esquerda e
direita, para afasta-lo do texto ou outros objetos que o cercam.
LOOP =n Especifica quantas vezes será executado. Se o valor de n for
Colégio e Faculdade Mercúrio - HTML & CSS – Professora Iara Fernandes Ribeiro
25
5/11/2018 HTML e CSS - slidepdf.com
http://slidepdf.com/reader/full/html-e-css-55a0ca535d411 26/52
Colégio e Faculdade Mercúrio - HTML & CSS – Professora Iara Fernandes Ribeiro
–1 ou INFINITE ele será executado continuamente.
SCROLLAMOUNT=nIndica a quantidade de pixels que será usada para deslocar o
marquee a cada movimentação.
SCROLLDELAY=nEspecifica em milissegundos o tempo entre cada
deslocamento do texto.
VSPACE=nEspecifica em pixels a margem superior e inferior do
marquee.
WIDTH=n
Especifica a altura do painel, ou área do marquee. Se for
especificado um número, ele é considerado como quantidade de
pixels. Se for seguido do sinal %, indica a altura em relação à
janela por meio de porcentagem
É muito bom usar esse comando para chamar a atenção dos seus usuários. Porém,
será interessante testar a visualização da página com um browser que não seja compatível
com esse comando para verificar como ficará a tela. Infelizmente, a Netscape não
incorporou esse comando à versão 4 do seu browser.
Combinando a utilização de vários Marquees
Você pode criar alguns efeitos interessantes combinando o uso de vários marquees.Eles podem ser colocados lado a lado ou um sobre o outro para a criação de um marquee
com várias linhas. Os primeiros dois marquees são colocados lado a lado com o texto
rolando em posição contrária. Eles partem das bordas e colidem no centro da página. O
segundo exemplo é uma variação do primeiro. Porém, foi adicionados uma quebra de linha
com o comando <BR> entre os dois e delimitada uma largura.
Neste exemplo, três marquees são colocados um abaixo do outro, criando um painel
de três linhas.<HTML>
<HEAD>
<TITLE> Combinando vários Marquees</TITLE>
</HEAD>
<BODY bgcolor="#FFFFFF">
<MARQUEE height="15" width="300" behavior="Scroll" direction="right"
Colégio e Faculdade Mercúrio - HTML & CSS – Professora Iara Fernandes Ribeiro
26
5/11/2018 HTML e CSS - slidepdf.com
http://slidepdf.com/reader/full/html-e-css-55a0ca535d411 27/52
Colégio e Faculdade Mercúrio - HTML & CSS – Professora Iara Fernandes Ribeiro
bgcolor="#FFFF00" loop=infinite>
É fácil juntar dois Marquees</MARQUEE>
<MARQUEE height="15" width="300"behavior="Scroll" direction="Left"
bgcolor="#00FF00" loop=infinite>É fácil juntar dois Marquees</MARQUEE>
<HR>
<BODY bgcolor="#FFFFFF">
<MARQUEE height="15" width="200" behavior="Scroll" direction="right"
bgcolor="#FFFF00" loop=infinite>
É fácil juntar dois Marquees</MARQUEE>
<BR>
<MARQUEE height="15" width="200" behavior="Scroll" direction="Left"
bgcolor="#00FF00" loop=infinite>
É fácil juntar dois Marquees</MARQUEE>
<BR>
<BODY bgcolor="#FFFFFF">
<MARQUEE height="15" width="200" behavior="Scroll" direction="left"
bgcolor="#FFFF00" loop=infinite>
Para criar um Marque com</MARQUEE>
<BR>
<marquee height="15" width="200" behavior="Scroll" direction="Left"bgcolor="#FFFF00" loop=infinite>
diversas linhas bastam especificar </MARQUEE><br>
<MARQUEE height="15" width="200" behavior="Scroll" direction="Left"
bgcolor="#FFFF00" loop=infinite>
vários Marquees em seqüência </MARQUEE>
</BODY>
Colégio e Faculdade Mercúrio - HTML & CSS – Professora Iara Fernandes Ribeiro
27
5/11/2018 HTML e CSS - slidepdf.com
http://slidepdf.com/reader/full/html-e-css-55a0ca535d411 28/52
Colégio e Faculdade Mercúrio - HTML & CSS – Professora Iara Fernandes Ribeiro
HTML
URLS E LINKS
Até agora você aprendeu como criar documentos interessantes, mas que poderiamter sido criados em um processador de textos.
O Principal atrativo da Internet é a criação de documentos com o conceito de
hipertexto, ou seja, um documento que se liga a outros por meio de vínculos especiais
chamados hyperlinks. Com esse conceito você pode criar documentos que façam
referência a um endereço qualquer do computador ou da Web e permitam ao usuário
acessar essas referências, não importando se elas estão em outra página WEB, no seu
micro ou em qualquer servidor da rede.
URLA Internet usa uma nomenclatura específica para indicar o endereço de um
documento. Chamada de Uniform Resource Locator (Localizador Universal de Recursos)
ou URL, essa nomenclatura inclui três componentes. Ela deve conter o protocolo do
documento, (como por exemplo http. Gopher ou WAIS), o endereço servidor e a
localização do arquivo, usando a seguinte sintaxe:
Protocolo://servidor.NomeDoArquivo
http://www.hardcore.com.br/index.htm
http: É o protocolo
www.voce.com.br : É o nome do servidor
index.htm: É o nome do documento que será acessado.
Criando um Link com Arquivos Locais
Vincular um texto com uma página local é uma tarefa bastante simples. Você precisaapenas especificar o nome completo do arquivo que será chamado, utilizando o comando
<A> de âncora. Veja a sintaxe básica deste comando:
<A HREF=”...”NAME”...”>caracteres</A>
Colégio e Faculdade Mercúrio - HTML & CSS – Professora Iara Fernandes Ribeiro
28
5/11/2018 HTML e CSS - slidepdf.com
http://slidepdf.com/reader/full/html-e-css-55a0ca535d411 29/52
Colégio e Faculdade Mercúrio - HTML & CSS – Professora Iara Fernandes Ribeiro
Principais parâmetros:
HREF=”URL” Especifica o endereço do URL ao qual o l ink está
associado. Pode ser usado dentro e fora do documento.
NAME=”String” Especifica o nome da seção de um documento à
qual um link de hipertexto faz referência.
Usando uma Imagem como HiperlinkVocê pode usar uma imagem como hiperlink envolvendo-a com o comando <A></A>.
Em vez de especificar um texto de hiperlink, você usa o comando <IMG> para colocar a
imagem.
Vinculando Arquivos de outros diretórios
Você pode especificar o endereço de outros diretórios usando um esquema decaminhos parecido com DOS. Existe uma diferença entre esses caminhos. Na Web você
deve inverter a barra de espaços, usando a barra / no lugar da barra \, para separar
diretórios.
CRIANDO LINKS PARA SEÇÕES DE UMA PÁGINA
Para dominar o uso do hipertexto, o programador em HTML deve conhecer bem o
funcionamento do comando <A> e dois de seus parâmetros da linguagem. Um é o <HHREF>, usado para criar o link em si, e o outro é o <A NAME>, que cria âncoras ou
endereços de seções de um documento, permitindo seu endereçamento.
Criando uma Âncora
Para interligar uma página, você precisa criar uma âncora (também chamado de
indicador em alguns editores de HTML) no inicio de cada seção do documento. Essa
âncora recebe um nome que será mencionado pelo link que acessará.
<A NAME=”#nome da âncora”>Texto Opcional</A>
Iremos criar agora uma página Web com exemplos de links e âncoras :
Neste código criamos primeiramente os links com as âncoras da página, e depois as
âncoras, aproveitamos também e trabalhamos com inserção de imagens na página:
ENVIANDO E-MAIL DIRETAMENTE DA PÁGINA HTML
Colégio e Faculdade Mercúrio - HTML & CSS – Professora Iara Fernandes Ribeiro
29
5/11/2018 HTML e CSS - slidepdf.com
http://slidepdf.com/reader/full/html-e-css-55a0ca535d411 30/52
Colégio e Faculdade Mercúrio - HTML & CSS – Professora Iara Fernandes Ribeiro
Você pode acionar o programa padrão de e-mail diretamente de uma página HTML
usando uma variação do comando <A>, que usa a opção MAILTO no lugar da URL.
<A HREF=”MAILTO:faleconosco@provedor.com.br”>Tire as suas dúvidas </A>
DEFININDO DESTINOS Podemos também definir destinos para os nossos links,(recurso muito utilizado em
frames) através do parâmetro target: . E podem ser _self: Mesmo quadro, _top: página
inteira, _blank: nova janela e _parent: quadro pai.
<html>
<head>
<title>Links</title>
</head>
<body>
<p align="center">Links</p>
<p><a href="http://www.microsoft.com.br">Microsoft</a>
<p><a href="http://www.macromedia.com.br">Macromedia</a>
<p><a href="http://www.adobe.com.br" target="_blank">Adobe</a>
<p><a href="mailto:colegiomercurio@colegiomercurio.com.br">e-mail</a>
<hr>
<P Align="center">Criando as Âncoras</P>
<a href="#textos">Textos</a> <a href="#imagens">Imagens</a>
<p> </p>
<P>
<a name="textos">TEXTOS</a>
<p> </p><p> </p><p> </p><p> </p><p> </p><p>&nbs
p;</p><p> </p><p> </p><p> </p><p> </p><p> </p><p>&nb
sp;</p><p> </p><p> </p>
<a name="imagens">IMAGENS</a></p><p> </p><p> </p><p>
</p><p> </p>
Colégio e Faculdade Mercúrio - HTML & CSS – Professora Iara Fernandes Ribeiro
30
5/11/2018 HTML e CSS - slidepdf.com
http://slidepdf.com/reader/full/html-e-css-55a0ca535d411 31/52
Colégio e Faculdade Mercúrio - HTML & CSS – Professora Iara Fernandes Ribeiro
<p align="center"><img border="0" src="cachorrinhos.gif" width="180"
height="100"></p>
<p> </p><p> </p><p> </p><p> </p><p> </p><p>&nbs
p;</p><p> </p><p> </p><p> </p><p> </p><p> </p><p>&nb
sp;</p><p> </p><p> </p>
</body>
</html>
TABELAS
O conceito de TABELA é o mesmo conhecido usualmente: ela tem linhas e colunas, e
na interseção delas estão as células.Na linguagem HTML, você pode inserir nas células tudo o que normalmente faz parte
do corpo de um documento, como textos, links, imagens, listas e até outras tabelas.
Podemos criar tabelas para exibir dados como numa planilha, os elementos de
tabelas são usados para formatar páginas de uma forma geral. Eles são usados para criar
textos com elementos na tela de forma mais fácil, para delimitar áreas de uma página e
diversas outras utilidades que você nem imagina.
Por exemplo, podemos usar tabelas para garantir que o texto fique na posição A da
tela e a imagem fique na posição B, independente da resolução de vídeo do visitante de
sua página. Utilizando uma tabela de tamanho definido, podemos evitar que a página fique
grande demais para resoluções de 640x480, podemos simular colunas de texto, entre
outras aplicações.
ELEMENTOS BÁSICOS DE TABELAS
<TABLE>...</TABLE>São as marcas que englobam a definição de uma tabela. Todas as demais marcas
referentes a tabelas – linhas e células – somente serão consideradas se incluídas entre
<TABLE>e </TABLE>.
<CAPTION>...</CAPTION>
Trata-se de um elemento opcional que define o título da tabela, e deve constar entre
as marcas que definem a tabela, mas separado das marcas que definem linhas e colunas.
Sem parâmetros, o título á apresentado acima da tabela e centralizado.
Colégio e Faculdade Mercúrio - HTML & CSS – Professora Iara Fernandes Ribeiro
31
5/11/2018 HTML e CSS - slidepdf.com
http://slidepdf.com/reader/full/html-e-css-55a0ca535d411 32/52
Colégio e Faculdade Mercúrio - HTML & CSS – Professora Iara Fernandes Ribeiro
<TR>...</TR>
Table Row ou Linha de tabela
Este é o elemento utilizado na definição de linhas de tabelas. Tabelas são definidas
em linhas, sendo as linhas compostas de células. O número de linhas de uma tabela
corresponde ao número de <TR></TR>.
<TD>...</TD>
Table Data ou Dados de Tabela
Marcas que delimitam as células que compõem as linhas, e assim sendo devem estar
inseridas entre as marcas de linhas. Uma célula pode conter tudo o que normalmente
consta do corpo de um documento HTML – Links, referências a imagens, textos, e até
tabelas.
O alinhamento padrão de uma célula é à esquerda horizontalmente e centralizado
verticalmente, e caso o número de células varie de uma linha para outra, as linhas com
menos células são completadas à direita com células em branco.
<TH>...</TH>
Table Header ou Cabeçalho de Tabela
Elemento que define células de cabeçalho. Células de cabeçalho têm característicasidênticas a células de dados definidas por <TD>, a não ser pelo alinhamento horizontal,
que é centralizado, e pela utilização de fonte em Negrito.
PARÂMETROS Estes elementos básicos, entretanto, possuem alguns parâmetros que permitem um
maior controle sobre alguns detalhes da apresentação da tabela.
Parâmetros do elemento <TABLE>BORDER
A apresentação padrão de uma tabela é sem bordas. A presença do parâmetro
BORDER indica justamente que deve ser desenhada uma borda em torno de cada célula
da tabela. Pode ser usado para indicar a espessura da borda (em pixels), com
BORDER=X. Exemplo: <TABLE BORDER=2>
BORDERCOLOR
Colégio e Faculdade Mercúrio - HTML & CSS – Professora Iara Fernandes Ribeiro
32
5/11/2018 HTML e CSS - slidepdf.com
http://slidepdf.com/reader/full/html-e-css-55a0ca535d411 33/52
Colégio e Faculdade Mercúrio - HTML & CSS – Professora Iara Fernandes Ribeiro
Permite que se coloque cores nas bordas de sua tabela e possui duas variações:
bordercolorlight e bordercolordark, permitindo que se coloque duas cores de bordas em
volta de sua tabela.
WIDTH
Especifica a largura da tabela, que pode ser definida em pixels ou em percentual
referente à largura da janela. Caso não seja especificado, o próprio browser se encarrega
de determinar a largura mais adequada, baseado nos textos inseridos nas células.
Exemplo: <TABLE WIDTH=75%>
CELLSPACING
Define o espaço entra as células, ou seja, a largura das linhas de grade (as bordas
que envolvem as células). É especificado em pixels. Exemplo: <TABLECELLSPACING=3>
CELLPADDING
Determina, em pixels, o espaço entre o conteúdo e as bordas da célula. Exemplo:
<TABLE CELLPADING=6>
ALIGN
Configura o alinhamento horizontal da tabela em relação aos outros elementos da
página. Pode conter os valores LEFT (esquerda), CENTER (centro) ou RIGHT( direita).
Este parâmetro não funciona em alguns browsers.
BGCOLOR
Define a cor de fundo da tabela.
Parâmetros do elemento <TR>
ALIGN
Configura o alinhamento horizontal dos elementos contidos nas células de uma linha.
Pode conter os valores LEFT, CENTER OU RIGHT. Se omitido, o alinhamento é à
esquerda para as células de dados (<TD>), e centralizado para células de cabeçalho
(<TH>).
VALIGN
Colégio e Faculdade Mercúrio - HTML & CSS – Professora Iara Fernandes Ribeiro
33
5/11/2018 HTML e CSS - slidepdf.com
http://slidepdf.com/reader/full/html-e-css-55a0ca535d411 34/52
Colégio e Faculdade Mercúrio - HTML & CSS – Professora Iara Fernandes Ribeiro
Define o alinhamento vertical dos elementos contidos nas células de uma linha. Pode
conter os valores TOP(topo), MIDLE(meio) ou BOTTOM (fundo). Se omitido, o
alinhamento é ao meio.
BGCOLOR
Define a cor de fundo da linha.
Parâmetros dos Elementos <TD> e <TH>ALIGN
Configura o alinhamento horizontal dos elementos contidos na célula. Pode conter os
valores LEFT, CENTER OU RIGHT.
Se omitido, o alinhamento é à esquerda para as células de dados (<TD>), e
centralizado para células de cabeçalho (<TH>).VALIGN
Define o alinhamento vertical dos elementos contidos na célula. Pode conter os
valores TOP (topo), MIDLE(meio) ou BOTTON(fundo). Se omitido, o alinhamento é ao
meio.
BGCOLOR
Define a cor de fundo da linha.
NOWRAP
Quando este parâmetro encontra-se associado a uma célula, o browser entende que
o texto dentro daquela célula não pode ser dividido em mais de uma linha. Este parâmetro
deve ser utilizado com cuidado, para evitar colunas demasiadamente largas.
COLSPAN
Especifica o número de colunas de uma tabela a ser ocupado por uma célula. Deve
ser utilizado para expandir uma célula horizontalmente. Se atribuirmos COLSPAN=2 a uma
célula, ela ocupará o seu espaço e o espaço de mais uma célula para a direita, assim esta
linha deverá possuir uma célula a menos que as demais, já que uma de suas células
“vale”por duas.
ROWSPAN
Colégio e Faculdade Mercúrio - HTML & CSS – Professora Iara Fernandes Ribeiro
34
5/11/2018 HTML e CSS - slidepdf.com
http://slidepdf.com/reader/full/html-e-css-55a0ca535d411 35/52
Colégio e Faculdade Mercúrio - HTML & CSS – Professora Iara Fernandes Ribeiro
Define o número de linhas a ser ocupado por uma célula. Deve ser utilizado para
expandir uma célula verticalmente (para baixo). Ao atribuir ROWSPAN=2 para uma célula,
diminuirá em 1 o número de células da linha de baixo.
Vamos a um exemplo:
<html>
<head>
<title>Tabelas</title>
</head>
<body>
<table border="10" width="100%" bordercolorlight="#000080"
bordercolordark="#0000FF">
<tr>
<th width="100%" colspan="3">
<p align="center">Título da Tabela</th>
</tr>
<tr><td width="33%">Texto1</td>
<td width="33%">Texto 2</td>
<td width="34%">Texto 3</td>
</tr>
</table>
</body>
</html>
FRAMES
O recurso de frames (janelas), compatível com a versão 2 e superiores do Navigator
e do IE, permite ao desenvolvedor criar páginas HTML que podem ser visualizadas
simultaneamente na janela do browser. Com esse recurso, a janela do browser é dividida
em frames que compartilham o espaço disponível.
Colégio e Faculdade Mercúrio - HTML & CSS – Professora Iara Fernandes Ribeiro
35
5/11/2018 HTML e CSS - slidepdf.com
http://slidepdf.com/reader/full/html-e-css-55a0ca535d411 36/52
Colégio e Faculdade Mercúrio - HTML & CSS – Professora Iara Fernandes Ribeiro
Sem o recurso de frames, para visualizar três páginas diferentes chamadas A. HTM,
B.HTM e C.HTM, o usuário precisaria acessá-las individualmente por meio de uma página
inicial que contivesse um menu ou então através da especificação de seu URL
Usando o recurso de frames, podemos exibir mais de um frame (janela)
simultaneamente. Em nosso projeto iremos usar um dos frames para exibir
permanentemente o conteúdo da página do menu e a outra para exibir o conteúdo dos
capítulos, facilitando a navegação pelo manual.
Como funcionam os framesAo contrário da maioria dos recursos da linguagem HTML, o uso frames requer um
planejamento prévio. Esse planejamento consiste na criação da estrutura dos frames, na
qual você irá especificar a quantidade de frames, a disposição que eles terão na tela, a
largura e a altura de cada frame, assim como o conteúdo que será exibido em cada umdeles. Trabalhar com frames exige duas etapas. Na primeira você cria o layout dos frames,
na segunda, define seu conteúdo.
O Comando DocumentO uso de frames exige a criação de um documento HTML especial que contém todas
as definições dos frames. Você pode considera-lo como um documento mestre. Esse
documento se diferencia dos demais documentos HTML, pois ele não usa os comandos
<BODY> e </BODY>. Em seu lugar é usado o comando <FRAMESET></FRAMESET>.
Dentro desse par de comandos são especificados todos os atributos dos frames que serão
criados. O frameset define as características gerais dos frames, como sua quantidade e
disposição horizontal e vertical. Cada frame especificado precisará de um outro comando
chamado <FRAME> para definir suas características individuais.
O Comando FRAMESETEste comando é do tipo contêiner, ou seja deve ser aberto e fechado. Veja a sintaxe
deste comando:
<FRAMESET
COLS=tamanho
FRAMEBORDER=1/0
FRAMESPACING=spacing
ROWS=tamanho></FRAMESET>
Cols=tamanho
Colégio e Faculdade Mercúrio - HTML & CSS – Professora Iara Fernandes Ribeiro
36
5/11/2018 HTML e CSS - slidepdf.com
http://slidepdf.com/reader/full/html-e-css-55a0ca535d411 37/52
Colégio e Faculdade Mercúrio - HTML & CSS – Professora Iara Fernandes Ribeiro
O atributo cols é usado para criar um documento com frames dispostos em colunas.
Nele deverá ser especificada a largura de cada coluna do documento. Pode ser
especificado um valor padrão para todas as colunas ou tamanhos individuais. Os valores
podem ser especificados em pixels, percentagem ou tamanho relativo.
Usando valores em pixels
<FRAMESET COLS=”100,300,200”>
Usando valores relativos
Para dividir os frames igualmente pela largura da janela do browser, a melhor opção
é usar um asterisco (*) para cada coluna
<FRAMESET COLS=*,*,*>
Usando valores percentuais
A terceira forma de determinar a largura de uma coluna é especificar os valores em
forma de percentual, totalizando 100 por cento
<FRAMESET COLS=25%,50%,25%
Os diferentes valores podem ser combinados entre si. Por exemplo, para criar um
frameset com três colunas de modo que a primeira ocupe 25%, a terceira tenha 100 pixels
e a outra ocupe o espaço restante, pode-se usar o seguinte comando:
<FRAMESET COLS=25%,*,100>
ROWS=tamanho
O atributo ROWS funciona da mesma forma que o atributo COLS, só que cria os
frames horizontalmente. Tudo o que foi exposto para COLS, aplica-se a ROWS.
Combinando ROWS e COLSPode-se combinar a criação de frames, usando os dois atributos. Você pode criar um
janela dividida em dois frames horizontais, onde o primeiro deles é dividido em duas
colunas. Para que isso seja possível, basta aninhar conjuntos de comandos <FRAMESET>
O ATRIBUTO <FRAMESPACING=VALOR>
Esse atributo tem como finalidade alterar o espaço entre os frames, dando a
impressão de que a borda dos frames foi aumentada. Contudo, ele apenas distancia um
frame de outro pela quantidade de pixels especificada.
Colégio e Faculdade Mercúrio - HTML & CSS – Professora Iara Fernandes Ribeiro
37
5/11/2018 HTML e CSS - slidepdf.com
http://slidepdf.com/reader/full/html-e-css-55a0ca535d411 38/52
Colégio e Faculdade Mercúrio - HTML & CSS – Professora Iara Fernandes Ribeiro
O código pode ser o mesmo do exemplo anterior. A penas a primeira linha deve ser
alterada para:
<FRAMESET ROWS=50%,50% FRAMESPACING=10>
O ATRIBUTO <FRAMEBORDER=1/0>Esse atributo tem a finalidade de eliminar as bordas dos frames. Como padrão, ele
usa o valor 1, que exibe a borda. Se for especificado o valor 0, as bordas serão omitidas. A
omissão de bordas é interessante para criar a ilusão de uma única janela, onde as partes
dessa janela são independentes das outras. Outro efeito interessante é a mudança da cor
de fundo de cada janela, permitindo dividir a tela em áreas coloridas distintas.
O COMANDO <FRAME SRC>
Sintaxe:
<FRAME ALIGN=posição
FRAMEBORDER=1/0
MARGINHEIGHT=altura
MARGINWIDTH=largura
NAME=nome
SCROLLING=yes/no
SRC=endereço
Align=posição
Ajusta o alinhamento do frame ou do texto. Os valores permitidos são:
TOP O texto ao redor do frame é alinhado pela parte superior do
frame.
MIDDLE O texto ao redor do frame é alinhado pelo meio do frame.
BOTTOM O texto aos redor do frame é alinhado pela parte inferior do
frame.
LEFT O frame é alinhado à esquerda, deixando o texto
posicionado no seu lado direito.
RIGHT O frame é alinhado à direita, deixando o texto posicionado
no seu lado esquerdo
Colégio e Faculdade Mercúrio - HTML & CSS – Professora Iara Fernandes Ribeiro
38
5/11/2018 HTML e CSS - slidepdf.com
http://slidepdf.com/reader/full/html-e-css-55a0ca535d411 39/52
Colégio e Faculdade Mercúrio - HTML & CSS – Professora Iara Fernandes Ribeiro
Frameborder=0/1
Idêntico ao atributo de mesmo nome do comando <FRAMESET>, ele ativa ou
desativa a exibição de borda para o frame atual.
Marginheight=altura
Especifica a altura da margem superior e inferior do frame em pixels.
Marginwidht=largura
Especifica a largura das margens esquerda e direita do frame em pixels.
Name=nome
Atribui um nome para o frame, de maneira que possa ser identificado e localizado
para carregar documentos.
Noresize
Esse atributo evita que o frame seja redimensionado pelo usuário.
Scrolling=yes/no
Esse atributo, quando ajustado para o valor no, não permite que o frame tenha barras
de rolagem quando a janela for redimensionada.
SRC=endereçoEndereço deve ser substituído pelo nome ou URL do documento que será exibido no
frame.
Ajustando as margens internas do FrameO desenvolvedor pode criar uma margem interna para o frame, de forma a distanciar
o conteúdo da janela da sua borda. Para criar um margem nas laterais da janela, deve ser
usado o comando MARGINWIDTH. Para criar uma margem na parte superior e outra no
rodapé do frame, deve ser usado o atributo MARGINHEIGHT. O tamanho da margemdeve ser especificado em pixels.
Barras de Rolagem e Redimensionamento dos FramesComo padrão, os frames possuem os atributos que permitem seu
redimensionamento e a inclusão automática de barras de rolagem quando suas dimensões
ficam menores do que o conteúdo a ser exibido. Para alterar essas características, você
deve usar os comandos SCROLLING E NORESIZE.
No caso do comando SCROLLING, deve ser atribuído a ele o valor no para desativar
as barras de rolagem.
Colégio e Faculdade Mercúrio - HTML & CSS – Professora Iara Fernandes Ribeiro
39
5/11/2018 HTML e CSS - slidepdf.com
http://slidepdf.com/reader/full/html-e-css-55a0ca535d411 40/52
Colégio e Faculdade Mercúrio - HTML & CSS – Professora Iara Fernandes Ribeiro
INTERLIGAÇÃO DE FRAMES Até agora você viu como criar um conjunto de frames para exibir documentos
independentes um do outro. Nosso projeto inicial previa a criação de um manual eletrônico
usando frames para mostrar um índice permanente na tela enquanto outra janela exibia o
conteúdo selecionado. Para isso iremos aprender mais alguns itens. O primeiro deles é a
atribuição de um nome para o frame e o segundo é direcionar o carregamento de um
documento em uma janela específica.
Para indicar ao browser em qual janela os documentos dos capítulos deverão ser
carregados, devemos incluir no documento que contém os links um novo comando
chamado <BASE TARGET=”nome da janela”> contendo o nome da janela-alvo.
Criando a Estrutura dos FramesEsse arquivo contém a definição de dois frames, um para o menu e outro para os
capítulos. O frame que receberá o nome de “textos”, e nenhum arquivo será previamente
carregado. O frame que conterá o menu principal recebera o nome de “menu”. Nessa
situação, apenas o nome do frame “textos” tem de ser obrigatoriamente especificado.
Criando o conteúdo do MenuO arquivo de menu contém os links para os capítulos do manual. Nesse documento,
você deve incluir o comando <BASE TARGET>, que é responsável por indicar ao browser
onde os arquivos vinculados pelo comando <A HREF> devem ser carregados. Em nosso
exemplo, ele orienta o browser a carregar os links no frame chamado “textos”. Se essecomando for omitido, os capítulos serão carregados no frame do menu.
Os códigos dos documentos ficarão da seguinte maneira e salve o documento como
menu:
<HTML>
<HEAD>
<TITLE>Menu Principal</TITLE>
<BASE TARGET="textos">
</HEAD>
<BODY BGCOLOR="FFFFEE">
<CENTER>
<H1>Menu Principal</H1>
<UL>
Colégio e Faculdade Mercúrio - HTML & CSS – Professora Iara Fernandes Ribeiro
40
5/11/2018 HTML e CSS - slidepdf.com
http://slidepdf.com/reader/full/html-e-css-55a0ca535d411 41/52
Colégio e Faculdade Mercúrio - HTML & CSS – Professora Iara Fernandes Ribeiro
<LI><A HREF=A.HTM>Introdução</A>
<LI><A HREF=B.HTM>Capítulo 1</A>
<LI><A HREF=C.HTM>Capítulo 2</A>
<LI><A HREF=D.HTM>Capítulo 3</A><LI><A HREF=E.HTM>Capítulo 4</A>
<LI><A HREF=F.HTM>Capítulo 5</A>
</UL>
</CENTER>
</BODY>
</HTML>
Script para o topo.htm
<html>
<head>
<title>Topo</title>
</head>
<body>
<div align="center">
<img src="images/principal1.gif">
</div>
</body>
</html>Crie também um arquivo com a estrutura básica do HTML e salve-o com o nome de
nada.
Veja agora o código para o frame:
<html>
<head>
<title>Frames</title>
Colégio e Faculdade Mercúrio - HTML & CSS – Professora Iara Fernandes Ribeiro
41
5/11/2018 HTML e CSS - slidepdf.com
http://slidepdf.com/reader/full/html-e-css-55a0ca535d411 42/52
Colégio e Faculdade Mercúrio - HTML & CSS – Professora Iara Fernandes Ribeiro
</head>
<frameset rows="64,*">
<frame name="topo" scrolling="no" noresize src=="topo.htm">
<frameset cols="150,*"><frame name="menu" src="menu.htm">
<frame name="textos" src=”nada.htm”>
</frameset>
<noframes>
<body>
<p>Esta página usa quadros mas seu navegador não aceita quadros.</p>
</body>
</noframes>
</frameset>
</html>
No código acima pode-se ver também que foi utilizada a TAG <NOFRAMES>
</NOFRAMES> esta TAG é utilizada para avisar o usuário que o navegador dele não
suporta frames, então pode-se colocar qualquer texto ou figura HTML para o usuário.
IFRAME
O IFRAME é um frame interno que só pode ser utilizado em IE de versão 4 ou superior, eleestá facilitando a troca de informações em sites de que precisam mudar textos, pois elepode ser colocado no documento e conforme altera-se o documento do IFRAME ele alterana página, ele possui os mesmos parâmetros dos Frames.
<html><head><title>IFRAME</title></head><body bgcolor="#000000" text="#FFFFFF"><p> </p><p align="center">Utilizando IFRAME</p><div align="center">
<center><table border="0" width="80%" height="193">
<caption> </caption><tr>
Colégio e Faculdade Mercúrio - HTML & CSS – Professora Iara Fernandes Ribeiro
42
5/11/2018 HTML e CSS - slidepdf.com
http://slidepdf.com/reader/full/html-e-css-55a0ca535d411 43/52
Colégio e Faculdade Mercúrio - HTML & CSS – Professora Iara Fernandes Ribeiro
<td width="100%" height="187" align="center"><p align="center"><IFRAME SRC="textos.htm"></iframe></td>
</tr></table></center>
</div>
</body></html>
META
O comando META é um dos comandos pouco explorados da linguagem HTML.
Contudo, é responsável por importantes aspectos de uma página HTML. Através dele,
podemos criar documentos dinâmicos, informações especificas que serão usadas pelo
servidor, em resposta a uma solicitação do usuário, ou pelos mecanismos de busca naInternet.
INFORMAÇÕES ESPECÍFICAS Esse comando das linguagem HTML pode ser usado para criar metainformação ou
variáveis, e seus conteúdos descrevem características do documento HTML, como o nome
do autor, data de vencimento ou criação do documento, palavras-chave, etc.
<META HTTP-EQUIV=resposta CONTENT=descrição NAME=descrição URL=url>
O comando META deve ser especificado entre os comandos <HEAD> </HEAD>.
VARIAÇÕES DO COMANDO META
Usar o recurso do autocarregamento é indicado quando você deseja exibir alguma
informação inicial e depois outra informação. Por exemplo o usuário acessa uma página
que exibe informações sobre a empresa, depois de um tempo carrega outra página. Isso é
possível da seguinte forma:
<META HTTP-EQUIV=”Refresh” CONTENT=”5 ; URL=arquivo.htm”>
Outro grande uso do comando META é para que possa ser usado para as consultas
em mecanismos de busca, ou seja os mecanismos verificam no comando META de sua
página qual é a sua descrição e quais são as palavras chaves do site.
<meta name="description" content="Site sobre Informática">
<meta name="keywords" content="Photoshop,Flash, Fireworks, Dreamweaver,
HTML">
Colégio e Faculdade Mercúrio - HTML & CSS – Professora Iara Fernandes Ribeiro
43
5/11/2018 HTML e CSS - slidepdf.com
http://slidepdf.com/reader/full/html-e-css-55a0ca535d411 44/52
Colégio e Faculdade Mercúrio - HTML & CSS – Professora Iara Fernandes Ribeiro
Podemos também especificar o autor e programa gerador do código HTML através
do comando META
<meta name="author" content="Marcos Paulo Furlan">
<meta name="generator" content="HTML-Kit">
MULTIMIDEA
O principal elemento de sucesso da Internet é o hiperlink. Que permite a criação de
documentos com ligações para outros contidos em qualquer computador ligado à Internet.
A maioria dos usuários que acessa a Internet faz isso a partir de ambientes gráficos, como
o Windows, e conhecendo o Windows todos sabemos de sua capacidade em trabalhar
com multimídia. Esse é o propósito deste capítulo, vamos aprender a trabalhar com oselementos multimídia em nossas páginas.
Os principais elementos multimídia para uma aplicação são:
Fotos ou imagens estáticas
Animação
Áudio
Vídeo
CONSIDERAÇÃO NO USO DE MULTIMIDEA
O grande inimigo da utilização de multimídia é o mesmo relacionado com as
imagens, a velocidade de transferência de informações via Internet. Se uma imagem de
70Kb pode levar vários segundos, ou até mesmo minutos para ser carregada imagine a
execução de um clipe de vídeo com mais de 1MB.
Os vídeos vão se popularizar mais quando a Internet a cabo se tornar mais acessível.
INSERINDO UM VÍDEO
Existem várias maneiras de inserir um vídeo em sua página. O vídeo pode aparecer
sob a forma de um link que ao ser clicado, executa o programa responsável pela sua
exibição, ou aparecer diretamente na página.
Colégio e Faculdade Mercúrio - HTML & CSS – Professora Iara Fernandes Ribeiro
44
5/11/2018 HTML e CSS - slidepdf.com
http://slidepdf.com/reader/full/html-e-css-55a0ca535d411 45/52
Colégio e Faculdade Mercúrio - HTML & CSS – Professora Iara Fernandes Ribeiro
A maneira mais simples de incluir um clipe de vídeo em sua página é utilizar as
opções do comando IMG. O principal parâmetro usado para inserir vídeo é a DYNSRC ,
abreviatura de Dynamic Source
ATRIBUTOS UTILIZADOS EM VÍDEOS
O vídeo como qualquer imagem em um documento HTML também possui uma
infinidade de atributos, estes atributos estão na tabela abaixo:
Atributo Finalidade Exemplo
ALIGN=TOP,MIDDLE, ou
BOTTOM
O texto que margeiaa imagem é alinhadopelo topo, meio oubase do vídeo.
<IMG SRC=”video.avi”ALIGN=MIDDLE>Este texto é alinhado pelomeio da figura.
ALIGN=LEFTou RIGHT
A imagem, ou vídeo éalinhado a esquerdaou direita da página
<IMG SRC=”video.avi”ALIGN=RIGHT>Este texto aparece do ladoesquerdo da imagem.
ALT=texto Especifica um textoalternativo para ser exibido no local dovídeo
IMG SRC=”video.avi” ALT=”figura exibida”.
BORDER=n Especifica a largurada borda em pixels dovídeo
<IMG SRC=”vídeo.avi” BORDER=5>Estaimagem possui borda de 5 pixels de largura.
CONTROLS Exibe botões de
controle do tipo vídeocassete
<IMG DYNSRC=”vídeo.avi” CONTROLS>
DYNSRC=URL Especifica o URL dovídeo que seráexibido.
<IMG SRC=”vide.gif”, DYNSRC=”vídeo.avi”>
HEIGHT=n Especifica a altura dovídeo. Se o vídeopossuir outrotamanho seráajustado para otamanho especificado
<IMG SRC=”vídeo.avi” WIDTH=150HEIGHT=200>
HSPACE=n Especifica uma
margem horizontalem volta da imagempara afastá-la dotexto que a envolve
<IMG SRC=”vídeo.avi” HSPACE=10
VSPACE=10>
LOOP=nLOOP=INFINIT
E
Especifique quantasvezes o vídeo seráexecutado. Se n for igual a –1 ouINFINITE, o vídeoserá executadocontinuamente. Casocontrário, é
executado o número
<IMG SRC=”vídeo.avi” DYNSRC=”vídeo.avi”LOOP=3> o vídeo é executado três vezes.
Colégio e Faculdade Mercúrio - HTML & CSS – Professora Iara Fernandes Ribeiro
45
5/11/2018 HTML e CSS - slidepdf.com
http://slidepdf.com/reader/full/html-e-css-55a0ca535d411 46/52
Colégio e Faculdade Mercúrio - HTML & CSS – Professora Iara Fernandes Ribeiro
de vezesespecificado.
SRC Especifica o endereçodo vídeo
<IMG SRC http://www.hardcore.com.br/video.avi>
START=FILEOPEN/
MOUSEOVER
Para clips de vídeoespecifica quando o
vídeo deve ser executado. Comopadrão, o vídeoassume o valor FILEOPEN e éexecutadoimediatamente apósseu carregamento . Ovalor MOUSEOVERfaz com que o vídeoseja executadoquando o cursor
passa sobre a áreada imagem do vídeo.
DYNSRC=”vídeo.avi” START= FILEOPEN>O vídeo é executado ao ser carregado.
<IMG SRC=”vídeo.gif”DYNSRC=”vídeo.avi”START=MOUSEOVER,FILEOPEN>
VSPACE=n Especifica umamargem, vertical parao vídeo, em pixels
<IMG SRC=”video.avi”VSPACE=10>
WIDTH=n Especifica a largurada Imagem
<IMG SRC=”vídeo.avi”WIDTH=150 HEIGHT=200>
USANDO O COMANDO EMBED PARA EXIBIR VÍDEO
O comando EMBED permite a exibição não somente de vídeo, mas também dearquivos de diferentes tipos em uma página HTML e que são executados por algum plug-in
previamente instalado. Ele funciona tanto no Internet Explorer quanto no Netscape
Navigator.
Sintaxe:
<EMBED
ALIGN=”LEFT” | “RIGHT” | “TOP” | “BOTTOM”
BORDER=”pixels”
FRAMEBORDER=”NO”
HEIGHT=”pixels”
HIDDEN=”TRUE” | “FALSE”
HSPACE=”pixels”
NAME=”appletName”
Colégio e Faculdade Mercúrio - HTML & CSS – Professora Iara Fernandes Ribeiro
46
5/11/2018 HTML e CSS - slidepdf.com
http://slidepdf.com/reader/full/html-e-css-55a0ca535d411 47/52
Colégio e Faculdade Mercúrio - HTML & CSS – Professora Iara Fernandes Ribeiro
PALLETE=”FOREGROUND” | “BACKGROUND”
PLUGINSPACE=”instrURL”
SRC=”endereço”
TYPE=”MIMEtype”VSPACE=”pixels”
WHIDTH=”pixels”
>
…
</EMBED>
O comando NOEMBED
Para manter a compatibilidade com browsers antigos, use o comando <NOEMBED>
para exibir uma mensagem indicando que o browser não tem capacidade para exibir o
objeto.
<html>
<head>
<title>Multimidea</title>
</head>
<body>
<IMG DYNSRC="Cyclers.avi" START="fileopen" Loop="Infinite">
<HR>
<embed src="admiradora.asf"></embed>
<HR>
<embed src="ambulancia.mpeg"></embed>
</body>
</html>
SOM
Colégio e Faculdade Mercúrio - HTML & CSS – Professora Iara Fernandes Ribeiro
47
5/11/2018 HTML e CSS - slidepdf.com
http://slidepdf.com/reader/full/html-e-css-55a0ca535d411 48/52
Colégio e Faculdade Mercúrio - HTML & CSS – Professora Iara Fernandes Ribeiro
A inclusão de som em uma home page ou aplicação Internet pode ser um recurso
bastante interessante para chamar a tenção do usuário. Menos problemático do que o uso
do vídeo, devido ao tamanho dos seus arquivos, o uso de som também enfrenta
problemas de velocidade de transmissão devido às limitações da rede ou do browser.
Existem vários tipos de formatos para arquivos de áudio, porém quatro ou cinco deles
dominam o mercado e são compatíveis com a maioria dos browsers atuais, vejam quais
são eles:
AU: Esse formato é dominante na plataforma Unix e é compatível com quase todas
as demais plataformas. É adequado para instrumentos e voz.
WAV: Formato padrão de som da plataforma Windows – oferece boa qualidade de
som, porém gera arquivos de tamanho muito grande, o que o torna problemático para ser executado quando não existe boa velocidade de transmissão entre o browser e o servidor.
MIDI: Esse formato é um padrão para a representação de instrumentos musicais
produzidos por um instrumento eletrônico, como um sintetizador. Ao contrário dos formatos
anteriores, ele não é compatível com voz, pois na verdade o arquivo MIDI não é uma
gravação digital de som e sim um arquivo com comandos para a execução de sons. Sua
vantagem é que ele possui um tamanho extremamente reduzido e oferece ótima qualidade
para música orquestrada.
MP3: Esse formato, ou seja, todos os formatos de MPA são arquivos de áudio
compactados, equivalentes aos arquivos de vídeo MPEG. Seu tamanho é menor do que os
arquivos WAV e com qualidade superior. Existe hoje na Web uma procura enorme em
arquivos MP3.
RAM ou RA: É o formato RealAudio, e está se tornando muito popular, pois permite a
execução sob demanda, ou seja, permite transmissões ao vivo e quando executado, a
partir de um arquivo, reproduz o som à medida que ele vai sendo lido.
Inserindo ÁudioAssim como no caso dos clipes de vídeo, ou imagens, podemos usar duas técnicas
para incluir áudio na página. A primeira é através de hiperlinks, a segunda através do
comando META e, dependendo do browser, através de comandos específicos.
Inserindo Áudio através de HiperlinksVeja o código abaixo onde os arquivos de áudio e estão vinculadas as páginas
através de hyperlinks.
Colégio e Faculdade Mercúrio - HTML & CSS – Professora Iara Fernandes Ribeiro
48
5/11/2018 HTML e CSS - slidepdf.com
http://slidepdf.com/reader/full/html-e-css-55a0ca535d411 49/52
Colégio e Faculdade Mercúrio - HTML & CSS – Professora Iara Fernandes Ribeiro
<html>
<head>
</head>
<body bgcolor="#FFFFFF"><a href="mission2.mid">Missão impossível</a>
<a href="solar2.wav"> do tipo .WAV</a>,
<a href="gamel.au">no formato .AU</a> ou
<a href="eg-follow.mp2"> no formato .mpeg</a>
</body>
</html>
INSERINDO MÚSICA DE FUNDO
O comando BGSOUND (Internet Explorer)Esse novo comando introduzido pelo browser da Microsoft é extremamente
simpático. Ele carrega e executa imediatamente um arquivo de som, assim que a página é
acessada. Uma vez iniciada a execução do som, pode-se interrompê-la pressionando a
tecla ESC ou mudando de página. A sintaxe é:
Atributo Finalidade Exemplo
SRC= URL Especifica o
endereço do arquivo de
áudio que será
executado.
<BGSOUND SRC=”ring.au”
LOOP=n Especifica quantas
vezes o arquivo será
reproduzido.
<BGSOUND SRC=”ring.au”
LOOP=3>
LOOP=INFINITE O valor INFINITE
reproduz o arquivo
continuamente
Executa o arquivo
infinitamente
Veja um exemplo abaixo:
Colégio e Faculdade Mercúrio - HTML & CSS – Professora Iara Fernandes Ribeiro
49
5/11/2018 HTML e CSS - slidepdf.com
http://slidepdf.com/reader/full/html-e-css-55a0ca535d411 50/52
Colégio e Faculdade Mercúrio - HTML & CSS – Professora Iara Fernandes Ribeiro
<html>
<head>
</head>
<bgsound src="africa.mid"><body bgcolor="#FFFFFF">
<font color=Red>
<h1> O comando BGSOUND </h1>
</font>
</body>
</html>
GLOSSÁRIO
<HTML></HTML>: Marca início e fim de uma página.
<HEAD></HEAD>: delimita o cabeçalho de uma página.
<BODY></BODY>: Delimita o corpo de uma página.
<TITLE></TITLE> Define o título de uma página.
<H1></H1> à <H6></H6>: Define títulos, subtítulo de diferentes níveis.
Colégio e Faculdade Mercúrio - HTML & CSS – Professora Iara Fernandes Ribeiro
50
5/11/2018 HTML e CSS - slidepdf.com
http://slidepdf.com/reader/full/html-e-css-55a0ca535d411 51/52
Colégio e Faculdade Mercúrio - HTML & CSS – Professora Iara Fernandes Ribeiro
<B></B>: Formata o texto em Negrito.
<I></I>: Formata o texto em Itálico.
<FONT></FONT>: Altera o fonte, tamanho e ou cor do texto.
<P></P>: Delimita um parágrafo.<BR>: Quebra de Linha.
<DIV></DIV>: Configura o alinhamento do texto.
<CENTER></CENTER>:Centraliza objetos(texto, imagem, tabelas)
<HR>: Cria uma linha horizontal.
<IMG>: Insere uma imagem.
<A></A>: Insere um Link
<OL>
<LI>
<LI>
</OL>: Cria uma lista ordenada.
<UL>
<LI>
<LI>
</UL>: Cria uma lista não ordenada.
<DL>
<DT></DT>
<DD></DD></DL>: Cria uma lista de definição.
<FORM></FORM>: Cria um formulário.
<INPUT> Define os campos do formulário.
<SELECT OPTION></OPTION>: define uma lista de opções no formulário.
</SELECT>
<TEXTAREA></TEXTAREA>: Define uma área de texto no formulário.
Colégio e Faculdade Mercúrio - HTML & CSS – Professora Iara Fernandes Ribeiro
51
5/11/2018 HTML e CSS - slidepdf.com
http://slidepdf.com/reader/full/html-e-css-55a0ca535d411 52/52
Colégio e Faculdade Mercúrio - HTML & CSS – Professora Iara Fernandes Ribeiro
<TABLE></TABLE>: Cria uma tabela
<CAPTION></CAPTION>: Define o título de uma tabela.
<TR></TR>: Define a linha de uma tabela.
<TD></TD>: Define as células de uma tabela.<TH></TH>: Define as células de cabeçalho de uma tabela.
<FRAMESET></FRAMESET>:Define o conjunto de janelas (frames) da tela.
<FRAME>:Configura cada região (frame) da tela.
<NOFRAMES></NOFRAMES>: Define o conteúdo que será exibido por browser sem
suporte a frames.
<APPLET></APPLET> Insere um applet Java em uma página.
<PARAM> Definem os parâmetros do applet.
<STYLE></STYLE> Define os estilo usados na página.
Você pode encontrar um material rico e completo no site:
http://www.icmc.usp.br/ensino/material/html/intro.html
Colégio e Faculdade Mercúrio - HTML & CSS – Professora Iara Fernandes Ribeiro
52