www.DinheiroSite.

com

HTML & CSS

INDICE
INDICE.........................................................................................................................................................2 HTML BÁSICO –........................................................................................................................................5 COMO SE CRIA UM DOCUMENTO HTML............................................................................................................5 TAGS OU COMANDOS HTML........................................................................................................................... 5 ESTRUTURA BÁSICA........................................................................................................................................7 Criando o primeiro documento HTML..................................................................................................7 Comentários...........................................................................................................................................8 Caracteres especiais..............................................................................................................................8 PARÁGRAFOS E QUEBRAS DE LINHA...............................................................................................8 O COMANDO <P>.........................................................................................................................................8 Alinhando parágrafos............................................................................................................................8 O COMANDO <BR>...................................................................................................................................... 8 O COMANDO <HR>......................................................................................................................................9 Alterando o formato de linha de separação..........................................................................................9 USANDO IMAGENS COMO LINHAS SEPARADORAS......................................................................9 DIV ...........................................................................................................................................................9 BLOCKQUOTE..................................................................................................................................................9 ESTILOS DE TEXTO E FONTE.............................................................................................................10 APLICANDO CORES E TAMANHOS NO TEXTO.................................................................................................. 10 ALTERANDO O TAMANHO DA FONTE.................................................................................................................10 Size.......................................................................................................................................................10 Face.....................................................................................................................................................10 Color....................................................................................................................................................11 CABEÇALHOS..........................................................................................................................................11
ALINHANDO CABEÇALHOS............................................................................................................................... 12

LISTAS....................................................................................................................................................... 12 LISTAS ORDENADAS......................................................................................................................................12 LISTAS NÃO ORDENADAS...............................................................................................................................12 LISTA DE DEFINIÇÃO.....................................................................................................................................13 IMAGENS.................................................................................................................................................. 14 O COMANDO IMG..........................................................................................................................................14 URLS E LINKS..........................................................................................................................................15 URL..........................................................................................................................................................15 Criando um Link com Arquivos Locais...............................................................................................16 Usando uma Imagem como Hiperlink.................................................................................................16 Vinculando Arquivos de outros diretórios..........................................................................................16 CRIANDO LINKS PARA SEÇÕES DE UMA PÁGINA........................................................................ 16 Criando uma Âncora...........................................................................................................................16 ENVIANDO E-MAIL DIRETAMENTE DA PÁGINA HTML......................................................................................16 DEFININDO DESTINOS....................................................................................................................................16 TABELAS...................................................................................................................................................17
ELEMENTOS BÁSICOS DE TABELAS.................................................................................................................... 17

PARÂMETROS...............................................................................................................................................18

_____________________________________________________________________ 2

HTML & CSS

Parâmetros do elemento <TABLE>....................................................................................................18 Parâmetros do elemento <TR>...........................................................................................................18 Parâmetros dos Elementos <TD> e <TH>........................................................................................19 FRAMES.....................................................................................................................................................20 Como funcionam os frames.................................................................................................................20 O Comando Document........................................................................................................................20 O Comando FRAMESET.....................................................................................................................20 Cols=tamanho.....................................................................................................................................21 ROWS=tamanho..................................................................................................................................21 Combinando ROWS e COLS...............................................................................................................21 O ATRIBUTO <FRAMESPACING=VALOR>.................................................................................................21 O ATRIBUTO <FRAMEBORDER =1/0>.................................................................................................................21 O COMANDO <FRAME SRC>....................................................................................................................... 21 Ajustando as margens internas do Frame...........................................................................................22 Barras de Rolagem e Redimensionamento dos Frames......................................................................22 INTERLIGAÇÃO DE FRAMES............................................................................................................................. 23 Criando a Estrutura dos Frames.........................................................................................................23 Criando o conteúdo do Menu..............................................................................................................23 IFRAME...................................................................................................................................................24 META..........................................................................................................................................................25 INFORMAÇÕES ESPECÍFICAS.............................................................................................................................25 VARIAÇÕES DO COMANDO META......................................................................................................................25 MULTIMIDEA..........................................................................................................................................25 CONSIDERAÇÃO NO USO DE MULTIMIDEA.......................................................................................................... 26 INSERINDO UM VÍDEO.................................................................................................................................... 26 ATRIBUTOS UTILIZADOS EM VÍDEOS..................................................................................................................26 USANDO O COMANDO EMBED PARA EXIBIR VÍDEO..........................................................................................27 O comando NOEMBED......................................................................................................................28 MARQUEE.................................................................................................................................................. 28 Combinando a utilização de vários Marquees....................................................................................30 SOM...........................................................................................................................................................30 Inserindo Áudio...................................................................................................................................31 Inserindo Áudio através de Hiperlinks................................................................................................31 INSERINDO MÚSICA DE FUNDO.........................................................................................................................31 O comando BGSOUND (Internet Explorer)....................................................................................... 31 JAVA...........................................................................................................................................................32
ELEMENTO

HTML PARA APPLETS JAVA...........................................................................................................32

FOLHAS DE ESTILO...............................................................................................................................33 VERSÕES DA CSS........................................................................................................................................33 CSS - 1.................................................................................................................................................33 CSS – Positioning (CSS-P)..................................................................................................................33 CSS – 2................................................................................................................................................33 CSS – 3................................................................................................................................................33 REGRAS DA CSS......................................................................................................................................... 33 INCLUINDO CSS NO DOCUMENTO...................................................................................................................34 Incluindo a CSS em uma página WEB................................................................................................34 Incluindo a CSS em um site da WEB...................................................................................................35 PRINCIPAIS ATRIBUTOS DE UMA FOLHA DE ESTILO...............................................................................................36 DEFININDO CLASSES......................................................................................................................................37 DEFININDO IDS...........................................................................................................................................37 LAYERS.......................................................................................................................................................37

_____________________________________________________________________ 3

HTML & CSS

DEFININDO TAGS DENTRO DO CONTEXTO.......................................................................................................38 CRIANDO UMA DEFINIÇÃO !IMPORTANT.............................................................................................................38 DEFININDO A CSS PARA IMPRESSÃO................................................................................................................38 DEFININDO QUBRAS DE PÁGINA PARA A IMPRESSÃO........................................................................................... 39 FAZENDO O DOWNLOADS DE FONTES................................................................................................................40 CONTROLES DE TEXTO..................................................................................................................................40 Ajustando o Kerning............................................................................................................................40 Ajustando o espaçamento entre as palavras.......................................................................................40 Ajustando as Entrelinhas.....................................................................................................................40 DEFININDO SEGUNDO PLANO.........................................................................................................................41 BORDAS .....................................................................................................................................................42 ENVOLVENDO UM ELEMENTO COM TEXTO........................................................................................................42 POSICIONAMENTOS........................................................................................................................................43 Posicionamento Estático.....................................................................................................................43 Posicionamento Relativo.....................................................................................................................43 Posicionamento Absoluto....................................................................................................................43 Posicionamento 3D.............................................................................................................................43 DEFININDO A VISIBILIDADE DE UM ELEMENTO...................................................................................................44 DEFININDO A ÁREA VISIVEL DE UM ELEMENTO (RECORTE)...................................................................................44 Definindo o lugar do Overflow............................................................................................................45 BARRAS DE ROLAGEM COLORIDAS................................................................................................................... 45 CUIDADOS NA CONSTRUÇÃO DE UM SITE....................................................................................47 TRACE METAS..............................................................................................................................................47 FAÇA UM ESBOÇO.........................................................................................................................................47 DIVIDA O SEU SITE........................................................................................................................................47 ACESSO DIRETO A INFORMAÇÃO......................................................................................................................47 EVITE SITES TIPO CARNAVAL...........................................................................................................................47 NÃO SE PRENDA A PLATAFORMAS....................................................................................................................47 DIVULGUE O SEU SITE E OBSERVE OS ACESSOS...................................................................................................47 GLOSSÁRIO..............................................................................................................................................47

_____________________________________________________________________ 4

e na própria Internet existem vários destes editores gratuitos. As TAGS são identificadas pelo sinais < > ou </ >. você terá que aprender pelo menos um pouco de HTML (Hipertext Markup Language) que pode ser traduzido como Linguagem de Hipertexto baseada em Marcas. mande um e-mail para algumas pessoas.HTML & CSS HTML BÁSICO – A Internet é. Para que qualquer computador pudesse entender os documentos HTML. que se encarregará de executar os comandos (tags) do código para formatar e acessar recursos da Web. o bom e velho “txt”. tendências. Agora você conhecerá o básico da linguagem HTML. documentos HTML podem ser gerados por qualquer editor de textos. o programador deve escrever o código-fonte seguindo as regras da linguagem. onde você tem que construir o código.Htm ou . mas ele completa muitos comando. Desta forma. Para fazer Home Pages. coloque uma home page no ar. como exemplo podemos citar o Arachnophilia e o AceExpert. Até o programa Bloco de Notas pode ser usado para esta tarefa. Entre os sinais <> são especificados os comandos propriamente ditos. delimitando um texto que sofrerá algum tipo de formatação. o lugar mais quente da atualidade. ou o que você vê é o que realmente obtém) como exemplo podemos citar o Microsoft FrontPage. e saiba que. desde que gravados no formato texto e com extensão. lojas e tudo o mais que se possa imaginar. atingir o grande público era privilégio de poucos.html. jornais. Existem ainda editores não WYSIWIG. utilizada para se construírem páginas Web. sem as complicações que trazem os caracteres de controles e coisa do tipo. No caso de tags que necessitam envolver um texto. Até pouco tempo. COMO SE CRIA UM DOCUMENTO HTML Uma página Web é composta de textos e comandos especiais (tags). indicando que a TAG está finalizando a marcação de texto. Com a WWW. que leva a associação com linguagens de programação. a sua página será visitada e divulgada para outras pessoas. foi definido que estes documentos deveriam ser gerados no formato mais simples possível. ao final deste curso você vai perceber que gerar documentos HTML é bastante fácil e parecido com formatação de textos. Apesar da palavra linguagem. empresas. O código fonte pode ser escrito usando-se o mais simples dos editores de texto. sua finalização deve ser feita usando-se a barra de divisão / . Esse código-fonte é posteriormente interpretado pelo browser. Para colocar uma página no ar. se o conteúdo for bom. onde os internautas passam a maior parte do tempo. tudo fica diferente. Mas existem editores WYSIWYG (What you see is what you get. _____________________________________________________________________ 5 . sem sombra de dúvida. TAGS OU COMANDOS HTML As TAGS normalmente são especificadas em pares. DreamWeaver. duas coisas: fazer a Home Page e conseguir um espaço em disco em uma máquina conectada permanentemente na Internet. Assim como qualquer linguagem. e onde proliferam home pages de universidades.

Imagem: São figuras. normalmente sublinhado e com outra cor. Título: É o texto que aparece na barra de título do browser. o browser acessa outra região da página atual ou uma página localizada em qualquer lugar na Internet. Cabeçalho: São linhas de texto com tamanhos especiais. clicando na figura saltamos para outro local. 5. 3. Link: É um trecho que aparece destacado do restante do texto. Ao clicar no Link.HTML & CSS Os principais elementos de página HTML são. Uma figura também pode ser usada como link. Existem seis tamanhos de cabeçalhos. desenhos e fotos usados para ilustrar a _____________________________________________________________________ 6 . parágrafos. imagens e links. página. textos. Texto: É a informação mais comum dentro de uma página. ou seja. 2. responsáveis pela chamada de outras páginas para a tela: 1. 4. títulos. Pode ser formatado através de comandos.

Estes detalhes devem ser respeitados. funcionam em pares. você não será avisado de erros que tenha cometido na edição do seu documento.  Existe uma ordem seqüencial lógica entre as marcas. que será apresentado na barra superior do browser. EX: <BODY BGCOLOR= “White” > configura uma página com fundo branco (padrão). VLINK: configura as cores dos links da página. Como HTML não é uma linguagem de programação. ALINK configura a cor do link ativo. Estas marcas devem constar da seção de cabeçalho.gif” > configura uma página com a imagem fundo. Criando o primeiro documento HTML <HTML> <HEAD> <TITLE>Este é o meu primeiro documento em HTML</TITLE> _____________________________________________________________________ 7 . • BGCOLOR: Configura a cor de fundo da página. Trata-se da primeira seção do documento. (padrão). no entanto existem detalhes que devem ser respeitados:  Todas as marcas apresentadas são do tipo início-fim. • LINK. Entre estas marcas estará o conteúdo a ser apresentado. EX.HTML & CSS ESTRUTURA BÁSICA A estrutura básica de um documento HTML é a seguinte: <HTML> <HEAD> <TITLE> Título do Documento</TITLE> </HEAD> <BODY> Aqui deverá ser digitado e criado a maioria dos itens que irão aparecer em sua Home Page </BODY> </HTML> Vamos ver um pouco sobre os elementos básicos do HTML: <HTML></HTML>: Indicam respectivamente o início e o fim do documento. links ativos vermelhos e links visitados roxos. <HEAD></HEAD>: Delimitam a seção de cabeçalho do documento. Todo o resto deve estar entre estas marcas. ou seja. • TEXT: configura a cor padrão do texto da página. Este elemento pode conter cinco parâmetros opcionais: • BACKGROUND: configura especificar uma imagem como fundo da página. cores. EX: <BODY TEXT= “Black” > configura uma página com texto em cor preta. imagens.  Em cada documento HTML só deve haver uma marca de cada tipo acima. ALINK. <BODY></BODY>: Corpo do documento. Esta estrutura inicial é simples. etc. <TITLE></TITLE>: Indicam o título do documento. senão o browser não conseguirá apresentar o documento. e VLINK configura a cor de um link já visitado. <BODY BACKGROUND= “fundo. EX: <BODY LINK=”Blue” VLINK=”Purple” ALINK=”Red”> configura uma página com links azuis.gif como fundo. isto é quando é clicado. textos.

HTML & CSS </HEAD> <BODY BGCOLOR=”Red” TEXT=”White”> Agora no corpo do texto vou digitar o meu primeiro texto em Html. já que na HTML ele considera apenas um espaço. Caracteres especiais Existem caracteres que não podem ser obtidos através de teclado. São os comandos <P> e <BR> O COMANDO <P> Para forçar um novo parágrafo. Esses códigos podem ser obtidos utilizando-se uma nomenclatura definida pela norma ISO. pode-se mudar o alinhamento de forma que o texto do parágrafo inteiro fique centralizado ou alinhado à direita. Alinhando parágrafos O Comando <P> inicia um novo parágrafo onde o texto é automaticamente alinhado pela margem esquerda da tela. </BODY> </HTML> Comentários Podemos também acrescentar comentários ao nosso código HTML. São utilizados para ocultar scripts dentro do código Html..w3. O _____________________________________________________________________ 8 . ou seja. nos quais você insere uma quebra ou avanço de linha toda vez que pressiona a tecla ENTER. caso esteja no meio de uma linha de texto e não em seu final. pois caso o script não possa ser processado o mesmo será ignorado pelo navegador. 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>.inicia o comentário //. em um programa HTML é 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. Nesse caso.html PARÁGRAFOS E QUEBRAS DE LINHA Ao contrário dos editores de texto comum. 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. Existem dois comandos para criar quebras de linha e novos parágrafos.org/TR/html401/sgml/entities. que corresponde ao espaço do teclado. são representados pela seguinte TAG <!. Alguns dos símbolos mais utilizados no HTML é o &nbsp. finaliza o comentário. Alinha pela margem direita Alinha pelas duas margens Alinha pela margem esquerda (padrão) O COMANDO <BR> O comando <P> insere uma linha em branco no seu local ou na linha seguinte à qual ele foi inserido. estes comentários não aparecem para no navegado e somente no código.. no momento não usarei nenhuma formatação especial aqui dentro. ALIGN=CENTER ALIGN=RIGHT ALIGN=JUSTIFY ALIGN=LEFT Centraliza o texto. Através do parâmetro ALIGN. Para uma tabela mais completa visite o link http://www.>. deve-se usar um par de comandos <P> envolvendo o parágrafo.

podemos usar os parâmetros WIDTH e HEIGHT para alterar o tamanho da imagem.HTML & CSS comando <BR> tem como função avançar para a linha imediatamente após àquela em que ele se encontra. O parâmetro SIZE altera a espessura (altura) da linha. 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. aqui temos um texto justificado. como é o caso de ALIGN. Veja o código abaixo: USANDO IMAGENS COMO LINHAS SEPARADORAS Em vez de usar o comando <HR> como separador. deixar uma linha em branco. sendo que. Aqui temos um texto justificado. O COMANDO <HR> O comando <HR> tem como finalidade inserir uma linha divisória na posição em que foi especificado. 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. o tamanho da linha é fixo ou utiliza uma porcentagem relativa à largura da janela. e pode ser cumulativo Vamos a um exemplo: <html> <head> <title>Formatação de Parágrafos</title> </head> <body> <P align="center">Texto centralizado</p> <P align="Justify">Aqui temos um texto justificado. podemos usar uma imagem com o comando <IMG>. DIV A Tag <DIV></DIV> envolve uma área do texto ou divisão que pode receber parâmetros específicos de alinhamento. Esse valor é expresso em pixels. <BR> <div align="center">Aqui centralizamos um texto com o elemento DIV</div> <div align="justify">Começamos justificado<P align="center">centralizei</P> continuamos justificado</div> <hr align="center"> <blockquote>Recuando o Texto</blockquote> <blockquote><blockquote>Recuando o Texto 2 vezes</blockquote></blockquote> <HR color="red" size=10 width=75%> _____________________________________________________________________ 9 . deixando-a mais grossa em função do valor especificado. A largura ou comprimento da linha é alterada pelo parâmetro WIDTH e pode ser expresso em pixels. Assim como o comando HR. seu tamanho varia em função da largura da janela. nesse caso. contudo. Seu uso é recomendado para criar uma divisão na página. Assim. sem.

o texto é exibido na fonte padrão. se o sistema não possuir a primeira opção. de maneira que. você pode criar uma série de efeitos no texto. 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. alterando a forma ou o tipo da fonte. Os valores permitidos vão de 1. Size O parâmetro size especifica o tamanho da fonte utilizada. 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 funciona em 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 corpo Subscrito <SUB>Texto</SUB> Rebaixa o texto e diminui seu corpo Pulsante <BLINK>Texto</BLINK> Faz com que o texto pisque (Não funciona no IE 4. a fonte será exibida no tamanho especificado. Todos os comandos que alteram o estilo do texto são do tipo contêiner ou liga desliga. Se for especificado um número antecedido pelo sinal de adição ou de subtração. o tamanho da fonte atual será aumentado ou diminuído nesse valor. O comando responsável por isso é o comando <FONT>. ou seja. Podemos especificar várias fontes. a cor e o tipo da fonte do texto utilizado. Se não for encontrada nenhuma das fontes especificadas. Por exemplo. a segunda é carregada. precisam ser especificados em pares. se a fonte atual é 3 e for especificado <FONT SIZE=+2> o texto será exibido no tamanho 5. _____________________________________________________________________ 10 . o maior. que é do tipo liga desliga. o menor até 7. Se o valor for especificado sem sinal. Face Esse parâmetro permite que seja escolhida uma fonte diferente para o texto. marcando o início e fim do texto que sofrerá a formatação. O padrão é 3.HTML & CSS </body> </html> ESTILOS DE TEXTO E FONTE Assim como no editor de textos.

<BR> Este texto recebeu o formato de fonte <SMALL>Small</SMALL> que cria letras pequenas. A linguagem HTML possui seis comandos de cabeçalho de <H1> até <H6>.<BR> Este é um exemplo de texto onde foi usado o efeito <SUB>Subscrito</SUB> do comando SUB.HTML & CSS Color Esse parâmetro especifica a cor do texto.<P> Para chamar a <BLINK>atenção</BLINK> use o comando BLINK. o comando cabeçalho insere uma linha em branco antes e depois da linha que contém o comando. Além do tamanho diferenciado. Veja o exemplo abaixo: As figuras acima mostram o código anterior sendo visualizado no IE e o Netscape.<HR> Este texto recebeu o formato de fonte <BIG>big</BIG> que cria letras grandes. observem que no IE o comando BLINK não é aplicado. Eles são _____________________________________________________________________ 11 .</font> </BODY> </HTML> CABEÇALHOS Outra forma muito usada para mudar o tamanho da letra e aplicar um efeitos em textos é utilizando cabeçalhos. RGB ou através de um nome predefinido de cores como mostra a tabela abaixo: Cor Aqua Black Fuchsia Green Brown Olive Silver White Código #70DB93 #000000 #FF00FF #00FF00 #800000 #808000 #E6E8FA #FFFFFF Cor Blue Cyan Gray Lime Navy Red Teal Yellow Código #0000FF #00FFFF #C0C0C0 #32CD32 #23238E #FF0000 #008080 #FFFF00 Não exagere na quantidade cores e tamanho das letras do texto ou a sua página parecerá uma mensagem enviada por código. Seu valor pode ser especificado no formato hexadecimal. <HTML> <HEAD><TITLE>Aplicando estilos de texto</TITLE> </HEAD> <BODY> <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>. <BR> Este é um exemplo de texto <SUP>Sobrescrito</SUP> pelo comando SUP.

. listas sem ordenação (UL). que podem ser listas ordenadas (OL). os itens serão precedidos por um marcador (bullet). sendo que... A estrutura das listas sem ordenação é a mesma das listas ordenadas.II. o paginador utilizará um marcador (bullet) diferente para os itens de cada lista. O parâmetro opcional START define a partir de que elemento a numeração deve se iniciar... Usando o parâmetro ALIGN pode-se centralizar ou ajustar o cabeçalho à direita da linha.Z). “I” (I.etc). O parâmetro opcional TYPE define como será o tipo de numeração de cada linha..3.etc). ALINHANDO CABEÇALHOS Como padrão um cabeçalho gerado pelo comando <Hn> é sempre posicionado no lado esquerdo da linha.ii. ou seja. e “1” (1.HTML & CSS perfeitos para criar títulos e iniciar seções dentro de uma página.2. ou listas de definições (DL). “i’ (i. Veja o código: <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.. os itens da lista são definidos pelos elementos <LI></LI>.b. “a”(a.. O comando <H1> possui o maior tamanho enquanto que <H6> possui o menor tamanho de fonte.>..</UL> são os elementos delimitadores de listas sem ordenação (UL – Unordered Lists).iii. na apresentação.III.</OL> são os elementos delimitadores de listas ordenadas (OL – Ordered Lists).2. Ele deve receber como valor um número indicando em que posição a contagem deve se iniciar. listas dentro de listas.. etc).). A estrutura das listas ordenadas é bastante simples: entre os elementos de início e fim....z).B. A seguir. Os tipos disponíveis são: “A” (A. é utilizado o tipo padrão (1. Os itens são apresentados em linhas consecutivas e precedidos por uma numeração atribuída pelo paginador.START=. veremos as características de cada umas delas.3. No caso de listas sem ordenação aninhadas (listas dentro de listas). _____________________________________________________________________ 12 . Um detalhe interessante é que podem ser criadas listas aninhadas. LISTAS ORDENADAS <OL TYPE=. LISTAS NÃO ORDENADAS <UL>. etc.. Se omitido.

</DL> são as marcas que englobam uma lista de definições.HTML & CSS Como já foi visto acima <LI>.. e a respectiva definição na linha seguinte. links . pois existem dois elementos – o termo a ser definido (DT). deslocada para a direita..</LI> é o elemento que define um item de uma lista ordenada ou sem ordenação. ideais para a criação de glossários e coisas do gênero. outras listas.</DD> <DT>UL</DT> <DD>Listas sem ordenação</DD> <DT>LI</DT> <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 OL</DT> <DD> <UL> <LI>TYPE</LI> <LI>START</LI> </UL> </DD> <DT>Parâmetros do elemento IMG</DT> <DD> <UL> <LI>SRC</LI> <LI>ALT</LI> <LI>BORDER</LI> <LI>WIDTH</LI> <LI>HEIGHT</LI> <LI>VSPACE</LI> <LI>HSPACE</LI> </UL> </DD> </DL> </BODY> _____________________________________________________________________ 13 . <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... e a definição propriamente dita (DD). Na apresentação cada termo aparece em uma linha. imagens. O seu conteúdo pode ser texto. A estrutura desta lista é diferente das outras.etc. LISTA DE DEFINIÇÃO <DL>.

Exibe o texto quando o browser não encontra ALT=”texto” a imagem. através de CDs ROMs.gif que esteja no mesmo diretório do programa deve ser especificado o seguinte comando: IMG SRC=”foto. todos os demais são opcionais. etc. Especifica a altura de exibição da imagem HEIGHT=”número” independentemente de seu tamanho físico. ALIGN=”TOP” | “MIDLE” | Especifica o alinhamento da imagem relativamente à linha de texto onde é exibida.gif” <html> _____________________________________________________________________ 14 . ele é relativo à largura da janela. O COMANDO IMG Esse comando define a posição de uma imagem que aparece no corpo do documento. Especifica em pixels a largura da borda da BORDER=”número” imagem. ou uma legenda quando o cursor do mouse passa sobre ela mostrando o texto especificado..HTML & CSS </HTML> IMAGENS Você pode obter uma imagem através de uma cópia feita a partir de uma página da Internet. Se a imagem for maior ou menor do que o valor especificado. Se for o colocado o sinal de porcentagem. Scanners..” HEIGHT=”…” BORDER=”…” ALT=”Texto” VSPACE=”…” HSPACE=”…”> ALIGN=| “BOTTOM” | “TOP” | “MIDLE” É o nome da figura. ela será esticada ou comprimida para caber no espaço especificado. “BOTTOM” ALIGN=”LEFT” | “RIGHT” Especifica o alinhamento da imagem relativamente às bordas laterais da janela Esse parâmetro especifica a largura de WIDTH=”número”| exibição da imagem independentemente do ”número%” seu tamanho físico. Se a imagem for maior ou menor do que o valor especificado. O valor zero remove a imagem SRC=”URL VSPACE=”número” HSPACE=”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. <IMG SRC=”URL” WIDTH=”. se estiver no mesmo diretório do programa ou seu caminho completo. ou pode cria-las a partir de um programa de imagens. para exibir uma imagem chamada foto. Portanto. Determina em pixels o espaço que deve ser deixado em branco nas laterais da imagem Com exceção do parâmetro SRC.

</div> <Br> <img src="images/Hlpglobe. 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. O Mapa. O Mapa.br/index.O Mapa. O Morcego. O Mapa. O Mapa. O Mapa. O Mapa. O Mapa. O Mapa. O Mapa. Gopher ou WAIS). O Mapa. O Mapa. O Mapa.O Morcego.O Morcego. ou seja .hardcore.O Morcego. O Mapa.O Morcego. O Mapa. O Morcego. O Mapa. O Morcego.gif" width="20" height="20"><b>Usando uma imagem como marcador</b><bR> Usando imagens como linhas separadoras <br> <img src="images/arame. O Mapa. O Morcego. O Morcego. O Mapa.O Morcego. O Mapa. O Mapa. mas que poderiam ter sido criados em um processador de textos. O Mapa. O Mapa. O Mapa.NomeDoArquivo http://www.gif" alt="Morcego" align="right"><DIV align="justify">O Morcego. O Mapa. O Mapa. O Mapa. O Mapa. O Mapa. </div><hr> <img src="images/Batlow. O Mapa. o endereço servidor e a localização do arquivo. não importando se elas estão em outra página WEB. O Morcego. O Mapa.HTML & CSS <head> <title>Imagens</title> </head> <body background="images/backarvore. O Mapa. O Morcego. O Morcego. O Mapa. (como por exemplo http. O Mapa. O Morcego. O Mapa. O Mapa. URL A Internet usa uma nomenclatura específica para indicar o endereço de um documento. O Mapa. O Mapa. O Mapa. O Mapa. O Mapa. O Mapa. O Mapa. O Mapa. O Mapa. no seu micro ou em qualquer servidor da rede. O Mapa. O Morcego. O Morcego. O Morcego. um documento que se liga a outros por meio de vínculos especiais chamados hyperlinks. O Mapa. O Morcego.O Morcego. O Mapa. O Mapa. O Mapa.com. O Mapa. O Mapa.gif" width="120%"> </body> </html> URLS E LINKS Até agora você aprendeu como criar documentos interessantes. O Mapa.jpg" width="200" height="100" alt="Mapa Mundi" align="left" align="midle"> <DIV align="justify">O Mapa. O Mapa. essa nomenclatura inclui três componentes. O Morcego. Chamada de Uniform Resource Locator (Localizador Universal de Recursos) ou URL. O Mapa. O Mapa. O Mapa. O Mapa. O Mapa.O Mapa. O Mapa. O Principal atrativo da Internet é a criação de documentos com o conceito de hipertexto. O Mapa.O Morcego. O Mapa. O Mapa.htm _____________________________________________________________________ 15 . O Mapa. O Morcego. O Mapa. O Morcego. O Mapa. usando a seguinte sintaxe: Protocolo://servidor. Ela deve conter o protocolo do documento. O Morcego. O Mapa.jpg" text="yellow"> <img src="images/worldmap. O Mapa. O Mapa. O Mapa. O Mapa.O Morcego. O Mapa. O Morcego.

utilizando o comando <A> de âncora. você precisa criar uma âncora (também chamado de indicador em alguns editores de HTML) no inicio de cada seção do documento. Especifica o nome da seção de um documento à qual um link de hipertexto faz referência.htm: É o nome do documento que será acessado. permitindo seu endereçamento. Vinculando Arquivos de outros diretórios Você pode especificar o endereço de outros diretórios usando um esquema de caminhos parecido com DOS.HTML & CSS http: É o protocolo www. Criando uma Âncora Para interligar uma página. para separar diretórios. Pode ser usado dentro e fora do documento. Um é o <H HREF>. aproveitamos também e trabalhamos com inserção de imagens na página: ENVIANDO E-MAIL DIRETAMENTE DA PÁGINA HTML Você pode acionar o programa padrão de e-mail diretamente de uma página HTML usando uma variação do comando <A>. Você precisa apenas especificar o nome completo do arquivo que será chamado. Criando um Link com Arquivos Locais Vincular um texto com uma página local é uma tarefa bastante simples.com.br”>Tire as suas dúvidas </A> DEFININDO DESTINOS _____________________________________________________________________ 16 . Em vez de especificar um texto de hiperlink. Essa âncora recebe um nome que será mencionado pelo link que acessará. que usa a opção MAILTO no lugar da URL..hardcore.com. Existe uma diferença entre esses caminhos. e depois as âncoras. usando a barra / no lugar da barra \.br: É o nome do servidor index. usado para criar o link em si. <A HREF=”MAILTO:faleconosco@provedor. <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. o programador em HTML deve conhecer bem o funcionamento do comando <A> e dois de seus parâmetros da linguagem. Veja a sintaxe básica deste comando: <A HREF=”. Usando uma Imagem como Hiperlink Você pode usar uma imagem como hiperlink envolvendo-a com o comando <A></A>.”NAME”. que cria âncoras ou endereços de seções de um documento. você usa o comando <IMG> para colocar a imagem. Na Web você deve inverter a barra de espaços... e o outro é o <A NAME>. CRIANDO LINKS PARA SEÇÕES DE UMA PÁGINA Para dominar o uso do hipertexto..”>caracteres</A> Principais parâmetros: HREF=”URL” NAME=”String” Especifica o endereço do URL ao qual o link está associado.

macromedia. o título á apresentado acima da tabela e centralizado.. e deve constar entre as marcas que definem a tabela.. Na linguagem HTML.</TABLE> São as marcas que englobam a definição de uma tabela.gif" width="150" height="50"></p> </body> </html> TABELAS Assim com as listas que nós já vimos. O número de linhas de uma tabela corresponde ao número de <TR></TR>.com.com">e-mail</a> <hr> <P Align="center">Criando as Âncoras</P> <a href="#textos">Textos</a> &nbsp.. _blank: nova janela e _parent: quadro pai. Tabelas são definidas em linhas. _top: página inteira.br">Macromedia</a> <p><a href="http://www.</TR> Table Row ou Linha de tabela Este é o elemento utilizado na definição de linhas de tabelas.zzn. mas separado das marcas que definem linhas e colunas.microsoft. sendo as linhas compostas de células.com.com.&nbsp. links. O conceito é o mesmo conhecido usualmente: ela tem linhas e colunas.</p> <a name="imagens">IMAGENS</a> <p align="center"><img border="0" src="entrar1.</p><p>&nbsp. ELEMENTOS BÁSICOS DE TABELAS <TABLE>. Todas as demais marcas referentes a tabelas – linhas e células – somente serão consideradas se incluídas entre <TABLE>e </TABLE>. você pode inserir nas células tudo o que normalmente faz parte do corpo de um documento. <TR>.</p><p>&nbsp. <CAPTION>.adobe.br">Microsoft</a> <p><a href="http://www.(recurso muito utilizado em frames) através do parâmetro target: . e na interseção delas estão as células. _____________________________________________________________________ 17 . no HTML existem elementos específicos para a criação e formatação de tabelas.</CAPTION> Trata-se de um elemento opcional que define o título da tabela. Sem parâmetros. como textos. <html> <head> <title>Links</title> </head> <body> <p align="center">Links</p> <p><a href="http://www..</p><p> &nbsp. listas e até outras tabelas..</p><p>&nbsp.. imagens. O recurso de tabelas é muito interessante e muito usado nas páginas Web.<a href="#imagens">Imagens</a> <P> <a name="textos">TEXTOS</a> <p>&nbsp. E podem ser _self: Mesmo quadro.br" target="_blank">Adobe</a> <p><a href="mailto:softwaresuporte@hardcoreinformatica.HTML & CSS Podemos também definir destinos para os nossos links.</p><p>&nbsp.

. Parâmetros do elemento <TABLE> • BORDER A apresentação padrão de uma tabela é sem bordas. Pode conter os valores LEFT. Caso não seja especificado. entretanto. <TH>. e caso o número de células varie de uma linha para outra. É especificado em pixels. e pela utilização de fonte em Negrito. CENTER OU RIGHT.</TD> Table Data ou Dados de Tabela Marcas que delimitam as células que compõem as linhas. o alinhamento é à _____________________________________________________________________ 18 .. que pode ser definida em pixels ou em percentual referente à largura da janela. que é centralizado. PARÂMETROS Estes elementos básicos. o espaço entre o conteúdo e as bordas da célula. Parâmetros do elemento <TR> • ALIGN Configura o alinhamento horizontal dos elementos contidos nas células de uma linha. as linhas com menos células são completadas à direita com células em branco. Exemplo: <TABLE BORDER=2> • BORDERCOLOR Permite que se coloque cores nas bordas de sua tabela e possui duas variações: bordercolorlight e bordercolordark. ou seja. A presença do parâmetro BORDER indica justamente que deve ser desenhada uma borda em torno de cada célula da tabela. em pixels. • BGCOLOR Define a cor de fundo da tabela. referências a imagens..HTML & CSS <TD>. e assim sendo devem estar inseridas entre as marcas de linhas. Este parâmetro não funciona em alguns browsers. • WIDTH Especifica a largura da tabela. baseado nos textos inseridos nas células. a não ser pelo alinhamento horizontal. permitindo que se coloque duas cores de bordas em volta de sua tabela. Pode ser usado para indicar a espessura da borda (em pixels).</TH> Table Header ou Cabeçalho de Tabela Elemento que define células de cabeçalho. Pode conter os valores LEFT (esquerda). o próprio browser se encarrega de determinar a largura mais adequada.. O alinhamento padrão de uma célula é à esquerda horizontalmente e centralizado verticalmente. Se omitido. textos. possuem alguns parâmetros que permitem um maior controle sobre alguns detalhes da apresentação da tabela. CENTER (centro) ou RIGHT( direita). Exemplo: <TABLE CELLSPACING=3> • CELLPADDING Determina. com BORDER=X. Exemplo: <TABLE WIDTH=75%> • CELLSPACING Define o espaço entra as células. a largura das linhas de grade (as bordas que envolvem as células). e até tabelas. Células de cabeçalho têm características idênticas a células de dados definidas por <TD>. Exemplo: <TABLE CELLPADING=6> • ALIGN Configura o alinhamento horizontal da tabela em relação aos outros elementos da página. Uma célula pode conter tudo o que normalmente consta do corpo de um documento HTML – Links.

o browser entende que o texto dentro daquela célula não pode ser dividido em mais de uma linha. • ROWSPAN Define o número de linhas a ser ocupado por uma célula. • VALIGN Define o alinhamento vertical dos elementos contidos na célula. Parâmetros dos Elementos <TD> e <TH> • ALIGN Configura o alinhamento horizontal dos elementos contidos na célula. já que uma de suas células “vale”por duas. o alinhamento é à esquerda para as células de dados (<TD>).HTML & CSS esquerda para as células de dados (<TD>). Ao atribuir ROWSPAN=2 para uma célula. • VALIGN Define o alinhamento vertical dos elementos contidos nas células de uma linha. assim esta linha deverá possuir uma célula a menos que as demais. Deve ser utilizado para expandir uma célula verticalmente (para baixo). Se omitido. MIDLE(meio) ou BOTTON(fundo). MIDLE(meio) ou BOTTOM (fundo). Pode conter os valores LEFT. CENTER OU RIGHT. ela ocupará o seu espaço e o espaço de mais uma célula para a direita. o alinhamento é ao meio. • 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. Pode conter os valores TOP(topo). Se atribuirmos COLSPAN=2 a uma célula. para evitar colunas demasiadamente largas. e centralizado para células de cabeçalho (<TH>). • NOWRAP Quando este parâmetro encontra-se associado a uma célula. Este parâmetro deve ser utilizado com cuidado. Vamos a um exemplo: <html> <head> <title>Tabelas</title> </head> <body> <table border="10" width="100%" 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> bordercolorlight="#000080" _____________________________________________________________________ 19 . Se omitido. diminuirá em 1 o número de células da linha de baixo. e centralizado para células de cabeçalho (<TH>). • BGCOLOR Define a cor de fundo da linha. Pode conter os valores TOP (topo). • BGCOLOR Define a cor de fundo da linha. o alinhamento é ao meio. Se omitido.

Na primeira você cria o layout dos frames. define seu conteúdo. a largura e a altura de cada frame. a janela do browser é dividida em frames que compartilham o espaço disponível. Dentro desse par de comandos são especificados todos os atributos dos frames que serão criados. podemos simular colunas de texto. Utilizando uma tabela de tamanho definido. compatível com a versão 2 e superiores do Navigator e do IE. independente da resolução de vídeo do visitante de sua página. Eles são usados para criar textos com elementos na tela de forma mais fácil. O frameset define as características gerais dos frames. podemos evitar que a página fique grande demais para resoluções de 640x480. O Comando FRAMESET Este comando é do tipo contêiner. Por exemplo. entre outras aplicações. Sem o recurso de frames. facilitando a navegação pelo manual. para delimitar áreas de uma página e diversas outras utilidades que você nem imagina.HTM e C. podemos usar tabelas para garantir que o texto fique na posição A da tela e a imagem fique na posição B. HTM. o uso frames requer um planejamento prévio. na qual você irá especificar a quantidade de frames. assim como o conteúdo que será exibido em cada um deles. permite ao desenvolvedor criar páginas HTML que podem ser visualizadas simultaneamente na janela do browser. B. Como funcionam os frames Ao contrário da maioria dos recursos da linguagem HTML.HTML & CSS <td width="34%">Texto 3</td> </tr> </table> </body> </html> Atenção: Além de criar tabelas para exibir dados como numa planilha. ou seja deve ser aberto e fechado. Veja a sintaxe deste comando: <FRAMESET COLS=tamanho _____________________________________________________________________ 20 . Trabalhar com frames exige duas etapas. Esse documento se diferencia dos demais documentos HTML. a disposição que eles terão na tela. Cada frame especificado precisará de um outro comando chamado <FRAME> para definir suas características individuais. para visualizar três páginas diferentes chamadas A. 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. como sua quantidade e disposição horizontal e vertical. Você pode considera-lo como um documento mestre. os elementos de tabelas são usados para formatar páginas de uma forma geral. na segunda. pois ele não usa os comandos <BODY> e </BODY>. O Comando Document O uso de frames exige a criação de um documento HTML especial que contém todas as definições dos frames. Com esse recurso. Esse planejamento consiste na criação da estrutura dos frames. 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. Em seu lugar é usado o comando <FRAMESET></FRAMESET>.HTM. FRAMES O recurso de frames (janelas). podemos exibir mais de um frame (janela) simultaneamente.

permitindo dividir a tela em áreas coloridas distintas. ele usa o valor 1. a terceira tenha 100 pixels e a outra ocupe o espaço restante. Pode ser especificado um valor padrão para todas as colunas ou tamanhos individuais. que exibe a borda.*. Contudo. usando os dois atributos. Por exemplo. só que cria os frames horizontalmente. Se for especificado o valor 0. a melhor opção é usar um asterisco (*) para cada coluna <FRAMESET COLS=*.*. percentagem ou tamanho relativo. pode-se usar o seguinte comando: <FRAMESET COLS=25%. ele apenas distancia um frame de outro pela quantidade de pixels especificada. Você pode criar um janela dividida em dois frames horizontais.50% FRAMESPACING=10> O ATRIBUTO <FRAMEBORDER=1/0> Esse atributo tem a finalidade de eliminar as bordas dos frames. Usando valores em pixels <FRAMESET COLS=”100. A penas a primeira linha deve ser alterada para: <FRAMESET ROWS=50%. O COMANDO <FRAME SRC> _____________________________________________________________________ 21 . Para que isso seja possível. A omissão de bordas é interessante para criar a ilusão de uma única janela. onde o primeiro deles é dividido em duas colunas. onde as partes dessa janela são independentes das outras. aplica-se a ROWS. Combinando ROWS e COLS Pode-se combinar a criação de frames.300. Os valores podem ser especificados em pixels. O código pode ser o mesmo do exemplo anterior.200”> Usando valores relativos Para dividir os frames igualmente pela largura da janela do browser. dando a impressão de que a borda dos frames foi aumentada. para criar um frameset com três colunas de modo que a primeira ocupe 25%. Nele deverá ser especificada a largura de cada coluna do documento. basta aninhar conjuntos de comandos <FRAMESET> O ATRIBUTO <FRAMESPACING=VALOR> Esse atributo tem como finalidade alterar o espaço entre os frames.HTML & CSS FRAMEBORDER=1/0 FRAMESPACING=spacing ROWS=tamanho></FRAMESET> Cols=tamanho O atributo cols é usado para criar um documento com frames dispostos em colunas.100> ROWS=tamanho O atributo ROWS funciona da mesma forma que o atributo COLS. Outro efeito interessante é a mudança da cor de fundo de cada janela. Tudo o que foi exposto para COLS.50%. as bordas serão omitidas. Como padrão.*> 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%.25% Os diferentes valores podem ser combinados entre si.

quando ajustado para o valor no. não permite que o frame tenha barras de rolagem quando a janela for redimensionada. Noresize Esse atributo evita que o frame seja redimensionado pelo usuário. ele ativa ou desativa a exibição de borda para o frame atual. Name=nome Atribui um nome para o frame. Scrolling=yes/no Esse atributo. RIGHT O frame é alinhado à direita. Os valores permitidos são: TOP O texto ao redor do frame é alinhado pela parte superior frame. deve ser usado o comando MARGINWIDTH. Para criar um margem nas laterais da janela. de maneira que possa ser identificado e localizado para carregar documentos. deve ser usado o atributo MARGINHEIGHT. O tamanho da margem deve ser especificado em pixels. deixando o texto posicionado seu lado direito. LEFT O frame é alinhado à esquerda. Barras de Rolagem e Redimensionamento dos Frames Como padrão.HTML & CSS 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. Ajustando as margens internas do Frame O desenvolvedor pode criar uma margem interna para o frame. deixando o texto posicionado seu lado esquerdo do do no no Frameborder=0/1 Idêntico ao atributo de mesmo nome do comando <FRAMESET>. 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 _____________________________________________________________________ 22 . BOTTO O texto aos redor do frame é alinhado pela parte inferior M frame. Marginheight=altura Especifica a altura da margem superior e inferior do frame em pixels. Para criar uma margem na parte superior e outra no rodapé do frame. de forma a distanciar o conteúdo da janela da sua borda. Marginwidht=largura Especifica a largura das margens esquerda e direita do frame em pixels. MIDDLE O texto ao redor do frame é alinhado pelo meio do frame. SRC=endereço Endereço deve ser substituído pelo nome ou URL do documento que será exibido no frame.

HTM>Capítulo 2</A> <LI><A HREF=D. você deve incluir o comando <BASE TARGET>.HTM>Capítulo 4</A> <LI><A HREF=F. Criando o conteúdo do Menu O arquivo de menu contém os links para os capítulos do manual. 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. Nessa situação.HTM>Capítulo 3</A> <LI><A HREF=E.HTML & CSS do que o conteúdo a ser exibido. Para isso iremos aprender mais alguns itens. Para alterar essas características.HTM>Capítulo 1</A> <LI><A HREF=C. Para indicar ao browser em qual janela os documentos dos capítulos deverão ser carregados. deve ser atribuído a ele o valor no para desativar as barras de rolagem. você deve usar os comandos SCROLLING E NORESIZE. um para o menu e outro para os capítulos.htm _____________________________________________________________________ 23 . INTERLIGAÇÃO DE FRAMES Até agora você viu como criar um conjunto de frames para exibir documentos independentes um do outro. No caso do comando SCROLLING. Se esse comando for omitido. Nesse documento. 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> <LI><A HREF=A. que é responsável por indicar ao browser onde os arquivos vinculados pelo comando <A HREF> devem ser carregados. Criando a Estrutura dos Frames Esse arquivo contém a definição de dois frames. os capítulos serão carregados no frame do menu. O frame que conterá o menu principal recebera o nome de “menu”. apenas o nome do frame “textos” tem de ser obrigatoriamente especificado.HTM>Introdução</A> <LI><A HREF=B. e nenhum arquivo será previamente carregado. devemos incluir no documento que contém os links um novo comando chamado <BASE TARGET=”nome da janela”> contendo o nome da janela-alvo. O frame que receberá o nome de “textos”. 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.HTM>Capítulo 5</A> </UL> </CENTER> </BODY> </HTML> Script para o topo. Em nosso exemplo. ele orienta o browser a carregar os links no frame chamado “textos”.

HTML & CSS <html> <head> <title>Topo</title> </head> <body> <div align="center"> <img src="images/principal1. então pode-se colocar qualquer texto ou figura HTML para o usuário.gif"> </div> </body> </html> Crie também um arquivo com a estrutura básica do HTML e salve-o com o nome de nada.htm”> </frameset> <noframes> <body> <p>Esta página usa quadros mas seu navegador não aceita quadros.</p> <p align="center">Utilizando IFRAME</p> <div align="center"> <center> _____________________________________________________________________ 24 . IFRAME O IFRAME é um frame interno que só pode ser utilizado em IE de versão 4 ou superior. Veja agora o código para o frame: <html> <head> <title>Frames</title> </head> <frameset rows="64.*"> <frame name="topo" scrolling="no" noresize src=="topo.*"> <frame name="menu" src="menu. <html> <head> <title>IFRAME</title> </head> <body bgcolor="#000000" text="#FFFFFF"> <p>&nbsp. ele possui os mesmos parâmetros dos Frames.</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.htm"> <frame name="textos" src=”nada. pois ele pode ser colocado no documento e conforme altera-se o documento do IFRAME ele altera na página.htm"> <frameset cols="150. ele está facilitando a troca de informações em sites de que precisam mudar textos.

<META HTTP-EQUIV=resposta CONTENT=descrição NAME=descrição URL=url> O comando META deve ser especificado entre os comandos <HEAD> </HEAD>.htm"></iframe></td> </tr> </table> </center> </div> </body> </html> META O comando META é um dos comandos pouco explorados da linguagem HTML. é responsável por importantes aspectos de uma página HTML. URL=arquivo. palavras-chave. Dreamweaver. VARIAÇÕES DO COMANDO META Usar o recurso do autocarregamento é indicado quando você deseja exibir alguma informação inicial e depois outra informação. etc. Através dele. Esse é o propósito deste capítulo.HTML & CSS <table border="0" width="80%" height="193"> <caption>&nbsp. e conhecendo o Windows todos sabemos de sua capacidade em trabalhar com multimídia. 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. depois de um tempo carrega outra página. data de vencimento ou criação do documento. informações especificas que serão usadas pelo servidor. como o nome do autor. _____________________________________________________________________ 25 . ou pelos mecanismos de busca na Internet. A maioria dos usuários que acessa a Internet faz isso a partir de ambientes gráficos. em resposta a uma solicitação do usuário. como o Windows. HTML"> 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.Flash. Que permite a criação de documentos com ligações para outros contidos em qualquer computador ligado à Internet.htm”> Outro grande uso do comando META é para que possa ser usado para as consultas em mecanismos de busca. Isso é possível da seguinte forma: <META HTTP-EQUIV=”Refresh” CONTENT=”5 . Contudo. vamos aprender a trabalhar com os elementos multimídia em nossas páginas. e seus conteúdos descrevem características do documento HTML. Por exemplo o usuário acessa uma página que exibe informações sobre a empresa. INFORMAÇÕES ESPECÍFICAS Esse comando das linguagem HTML pode ser usado para criar metainformação ou variáveis. Fireworks. podemos criar documentos dinâmicos.</caption> <tr> <td width="100%" height="187" align="center"> <p align="center"><IFRAME SRC="textos. <meta name="description" content="Site sobre Informática"> <meta name="keywords" content="Photoshop.

ou imagem é alinhado ALIGN=MIDDLE>Este texto é BOTTOM pelo topo.avi” controle do tipo vídeo CONTROLS> cassete DYNSRC=URL Especifica o URL do <IMG SRC=”vide.gif”.avi” borda em pixels do BORDER=5>Esta imagem possui vídeo borda de 5 pixels de largura. executa o programa responsável pela sua exibição. INSERINDO UM VÍDEO Existem várias maneiras de inserir um vídeo em sua página. HEIGHT=n Especifica a altura do <IMG SRC=”vídeo. a velocidade de transferência de informações via Internet. ou até mesmo minutos para ser carregada imagine a execução de um clipe de vídeo com mais de 1MB. O texto que margeia a <IMG SRC=”video. ALT=texto Especifica um texto IMG SRC=”video.HTML & CSS 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. ou vídeo é <IMG SRC=”video. Se uma imagem de 70Kb pode levar vários segundos.avi”> exibido. base do vídeo. Os vídeos vão se popularizar mais quando a Internet a cabo se tornar mais acessível. exibido no local do vídeo BORDER=n Especifica a largura da <IMG SRC=”vídeo.avi” ALT=”figura alternativo para ser exibida”. estes atributos estão na tabela abaixo: Atributo Finalidade Exemplo ALIGN=TOP. vídeo que será DYNSRC=”vídeo. ou aparecer diretamente na página. Se o vídeo WIDTH=150 HEIGHT=200> possuir outro tamanho será ajustado para o _____________________________________________________________________ 26 .avi” ou RIGHT alinhado a esquerda ALIGN=RIGHT>Este texto ou direita da página aparece do lado esquerdo da imagem. O principal parâmetro usado para inserir vídeo é a DYNSRC.avi” MIDDLE. O vídeo pode aparecer sob a forma de um link que ao ser clicado. 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. meio ou alinhado pelo meio da figura. CONTROLS Exibe botões de <IMG DYNSRC=”vídeo. A maneira mais simples de incluir um clipe de vídeo em sua página é utilizar as opções do comando IMG. ALIGN=LEFT A imagem.avi” vídeo.

<IMG SRC http://www. vertical para o vídeo.FILEOPE N> VSPACE=n WIDTH=n <IMG SRC=”video. Caso contrário. Ele funciona tanto no Internet Explorer quanto no Netscape Navigator.gif” DYNSRC=”vídeo.avi” VSPACE=10> <IMG SRC=”vídeo. Como padrão.br/video.HTML & CSS HSPACE=n LOOP=n LOOP=INFINIT E SRC START= FILEOPEN/ MOUSEOVER tamanho especificado Especifica uma margem horizontal em volta da imagem para afastá-la do texto que a envolve Especifique quantas vezes o vídeo será executado. Sintaxe: <EMBED ALIGN=”LEFT” | “RIGHT” | “TOP” | “BOTTOM” BORDER=”pixels” FRAMEBORDER=”NO” _____________________________________________________________________ 27 . <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. Especifica uma margem.hardcore. em pixels Especifica a largura da Imagem <IMG SRC=”vídeo. avi> DYNSRC=”vídeo. é executado o número de vezes especificado. o vídeo será executado continuamente.avi” HSPACE=10 VSPACE=10> <IMG SRC=”vídeo. mas também de arquivos de diferentes tipos em uma página HTML e que são executados por algum plug-in previamente instalado. Se n for igual a –1 ou INFINITE. o vídeo assume o valor FILEOPEN e é executado imediatamente após seu carregamento . O valor MOUSEOVER faz com que o vídeo seja executado quando o cursor passa sobre a área da imagem do vídeo. Especifica o endereço do vídeo Para clips de vídeo especifica quando o vídeo deve ser executado.com.avi” LOOP=3> o vídeo é executado três vezes.avi” START= FILEOPEN> O vídeo é executado ao ser carregado.avi” START=MOUSEOVER.avi” DYNSRC=”vídeo.

use o comando <NOEMBED> para exibir uma mensagem indicando que o browser não tem capacidade para exibir o objeto.asf"></embed> <HR> <embed src="ambulancia. ou seja.HTML & CSS HEIGHT=”pixels” HIDDEN=”TRUE” | “FALSE” HSPACE=”pixels” NAME=”appletName” 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. 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 Especifica o comportamento do texto.mpeg"></embed> </body> </html> MARQUEE O Internet Explorer introduziu um comando muito simpático chamado MARQUEE. Veja na tabela abaixo a sintaxe do comando MARQUEE ALIGN=posição Especifica como o texto que envolve o marquee será alinhado. que faz com que um texto especificado fique rolando em uma determinada área da página. <html> <head> <title>Multimidea</title> </head> <body> <IMG DYNSRC="Cyclers. como será a sua rolagem pela janela. BEHAVIOR=tipo _____________________________________________________________________ 28 .avi" START="fileopen" Loop="Infinite"> <HR> <embed src="admiradora. Pode conter os seguintes valores.

HSPACE=n Especifica a largura em pixels das margens esquerda e direita. Se for especificado um número. Se for seguido do sinal %. WIDTH=n Especifica a altura do painel. ou área do marquee. Antes. SCROLLAMOUNT= Indica a quantidade de pixels que será usada para n deslocar o marquee a cada movimentação. BGCOLOR=cor Especifica a cor do texto do Segundo plano. Quando a primeira letra do texto bater na borda. ele é considerado como quantidade de pixels. ALTERNAT Cria um efeito de movimento para o E texto. DIRECTION=direção Especifica a direção que o texto vai usar para o deslocamento. O padrão é LEFT. Se for seguido do sinal %. Pode ser especificado também o valor RIGHT que inverte o sentido de deslocamento. que inicia de um lado. indica a largura com relação à janela por meio da porcentagem. porém. SLIDE Inicia a rolagem introduzindo o texto de um lado e rola o texto até que ele atinja a borda oposta. teste a visualização da página com um browser que não seja compatível com esse comando para verificar como ficará a tela. ele é considerado como quantidade de pixels. para afasta-lo do texto ou outros objetos que o cercam. é assumida a cor de segundo plano atual. que faz o texto deslocar-se do canto direito da janela para o canto esquerdo. inverte o seu deslocamento voltando para a borda inicial. Se o valor de n for –1 ou INFINITE ele será executado continuamente. o texto para de rolar e permanece naquela posição. ao bater na outra borda. Se for especificado um número.HTML & CSS 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. o texto reaparece no canto inicial repetindo continuamente o processo. VSPACE=n Especifica em pixels a margem superior e inferior do marquee. ou a área do MARQUEE. indica a altura em relação à janela por meio de porcentagem Tenho certeza de que vocês vão gostar de usar esse comando para chamar a atenção dos seus usuários. SCROLLDELAY=n Especifica em milissegundos o tempo entre cada deslocamento do texto. SCROLL _____________________________________________________________________ 29 . Após a ultima letra ter saído da tela. entrando pela borda da janela e. HEIGHT=n Especifica a largura do painel. Caso não seja especificada uma cor. LOOP=n Especifica quantas vezes será executado.

<html> <head> <title> Combinando vários Marquees</title> </head> <body bgcolor="#FFFFFF"> <marquee height="15" width="300" behavior="Scroll" direction="right" 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> <hr> <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> </html> SOM _____________________________________________________________________ 30 . Eles podem ser colocados lado a lado ou um sobre o outro para a criação de um marquee com várias linhas. Combinando a utilização de vários Marquees Você pode criar alguns efeitos interessantes combinando o uso de vários marquees. Eles partem das bordas e colidem no centro da página. foi adicionados uma quebra de linha com o comando <BR> entre os dois e delimitada uma largura.a Netscape deixou de incorporar esse comando à versão 4 do seu browser. três marquees são colocados um abaixo do outro. criando um painel de três linhas.HTML & CSS Infelizmente. Os primeiros dois marquees são colocados lado a lado com o texto rolando em posição contrária. Porém. O segundo exemplo é uma variação do primeiro. No terceiro exemplo.

Inserindo Áudio através de Hiperlinks Veja o código abaixo onde os arquivos de áudio e estão vinculadas as páginas através de hyperlinks. permite transmissões ao vivo e quando executado. a partir de um arquivo. Ele carrega e executa imediatamente um arquivo de som. ou seja.mid">Missão impossível</a> <a href="solar2.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. como um sintetizador. através de comandos específicos. Ao contrário dos formatos anteriores. assim que a página é acessada. RAM ou RA: É o formato RealAudio. Sua vantagem é que ele possui um tamanho extremamente reduzido e oferece ótima qualidade para música orquestrada. vejam quais são eles: AU: Esse formato é dominante na plataforma Unix e é compatível com quase todas as demais plataformas. 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. Inserindo Áudio Assim como no caso dos clipes de vídeo. pode-se interrompê-la pressionando a tecla ESC ou mudando de página. <html> <head> </head> <body bgcolor="#FFFFFF"> <a href="mission2. o uso de som também enfrenta problemas de velocidade de transmissão devido às limitações da rede ou do browser. podemos usar duas técnicas para incluir áudio na página. Existe hoje na Web uma procura enorme em arquivos MP3. a segunda através do comando META e. Uma vez iniciada a execução do som. Seu tamanho é menor do que os arquivos WAV e com qualidade superior. dependendo do browser. porém quatro ou cinco deles dominam o mercado e são compatíveis com a maioria dos browsers atuais. A primeira é através de hiperlinks.AU</a> ou <a href="eg-follow. Menos problemático do que o uso do vídeo.mp2"> no formato . e está se tornando muito popular. WAV: Formato padrão de som da plataforma Windows – oferece boa qualidade de som. equivalentes aos arquivos de vídeo MPEG. É adequado para instrumentos e voz.WAV</a>. porém gera arquivos de tamanho muito grande.HTML & CSS 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. MIDI: Esse formato é um padrão para a representação de instrumentos musicais produzidos por um instrumento eletrônico. o que o torna problemático para ser executado quando não existe boa velocidade de transmissão entre o browser e o servidor. ou imagens.au">no formato . devido ao tamanho dos seus arquivos. reproduz o som à medida que ele vai sendo lido. A sintaxe é: _____________________________________________________________________ 31 . Existem vários tipos de formatos para arquivos de áudio. <a href="gamel. pois permite a execução sob demanda. MP3: Esse formato. ou seja.wav"> do tipo . ele não é compatível com voz. todos os formatos de MPA são arquivos de áudio compactados.

Bom vamos agora aprender a incorporar programas de Java (classes) no documento HTML. HEIGHT=. CODEBASE=.> <PARAM NAME=.. e a sua construção é bastante complexa e Javascript é uma linguagem de scripts desenvolvida inicialmente pela Netscape..VALUE=.class” que o browser carrega junto com a sua página.. Tudo que você tem a fazer é colocar o nome do arquivo “..VALUE=... LOOP=n Especifica quantas vezes o arquivo será reproduzido..mid"> <body bgcolor="#FFFFFF"> <font color=Red> <h1> O comando BGSOUND </h1> </font> </body> </html> Exemplo <BGSOUND SRC=”ring.. LOOP=INFINITE O valor INFINITE reproduz o arquivo continuamente Veja um exemplo abaixo: <html> <head> </head> <bgsound src="africa.VALUE=.....au” <BGSOUND SRC=”ring.> <PARAM NAME=. o browser executa o aplicativo da forma configurada na página e exibe o resultado na sua tela. Primeiramente nunca devemos confundir JAVA com Javascript.. Uma vez transferido para o seu computador. WHIDTH=.> <PARAM NAME=. ELEMENTO HTML PARA APPLETS JAVA Os applets Java são arquivos com extensão “. colocar a largura e a altura da área ocupada pelo mesmo nos parâmetros WIDTH E HEIGHT e _____________________________________________________________________ 32 . JAVA é uma linguagem de programação desenvolvida inicialmente pela SUN... Com certeza você já deve ter ouvido falar nele. Tal como as imagens referenciadas em sua página...au” LOOP=3> Executa o arquivo infinitamente JAVA Java.. pois são coisas totalmente distintas.> </APLLET> O elemento HTML de um applet é bem simples..class” correspondente ao applet no parâmetro CODE. <APPLET CODE=.. um applet também precisa ser transferido para o seu espaço de home page no seu provedor.HTML & CSS Atributo SRC= URL Finalidade Especifica o endereço do arquivo de áudio que será executado.

permitindo que você redefina o modo como as tags HTML funcionam. Embora a maioria dos browsers modernos suporte a versão mais recente. A Netscape e a Microsoft assumiram essas propostas. Em vez disso. Elas são: CSS .htm.1 O W3C lançou a primeira versão oficial da CSS em 1996. Embora a maioria dos recursos básicos sejam suportados em ambos os browsers como o nome de “marca” diversos recursos forma deixados de fora. Ele permite que você possa criar o seu applet e depois copiar o código e colar diretamente dentro do HTML. Um dos programas mais conhecidos para a criação de applets é ANFY que pode ser baixado no seguinte link: http://anfyteam. de modo que a W3C lançou uma solução intermediária: A CSS. O nível 2 inclui todos os atributos das duas versões anteriores mais uma ênfase maior na facilidade de acesso e na capacidade de especificar CSSs especificas de mídia. CSS – 2 A versão mais recente da CSS surgiu em 1998. CSS – Positioning (CSS-P) Os criadores da WEB precisavam de uma forma de posicionar os elementos na tela de forma precisa. Todos os Applets que serão mostrados aqui foram adquiridos na própria WEB.HTML & CSS em CODEBASE você pode especificar o diretório (no servidor WEB) onde ficarão só seus applets. os browsers mais antigos suportam as combinações das versões antigas da CSS. Esse padrão de destinava a ser uma proposta que seria discutida pelas várias partes envolvidas antes de ele ser oficializado. definir fontes e margens. e mesmo após o lançamento geralmente leva alguns anos para que os navegadores suportem o padrão. a CSS é um código separado que amplia as capacidades da HTML.w3. Esse é um formato que permite incluir formas (linhas. e incluíram as idéias preliminares nas versões 4 de seus navegadores.com/index.org/Style/CSS/ ) até a sua versão atual a 2(dois). porém. A CSS 1 já havia sido lançada e a CSS-2 ainda estava distante. Embora a metodologia da CSS funcione com a HTML. Sem dúvida. círculos. não é HTML. levando o poder dos gráficos baseados no vetor e na tipografia à WEB. Essa primeira versão incluía a capacidade de núcleo associada às CSS. como vetores e não bitmaps. a nova adição será o Scalable Vector Graphics (SVG). CSS – 3 Este padrão ainda está em desenvolvimento. Vamos agora utilizar alguns applets mais comuns utilizados pela Web.Positioning. VERSÕES DA CSS A CSS evoluiu nos últimos anos sob a orientação do W3C ( www. curvas e outras). FOLHAS DE ESTILO A CSS traz para a WEB a mesma conveniência de “um só lugar” para definir os estilos que estão disponíveis na maioria dos editores de texto. tais como a capacidade de formatar texto. REGRAS DA CSS _____________________________________________________________________ 33 . A partir do IE e Netscape 6 suportam CSS 2. Você pode definir uma CSS em uma localização central para afetar a aparência das tags HTML em uma única página da WEB ou em todo um site da WEB.

você deve inclui as regras de estilo no título do documento aninhado dentro de um conteiner de estilo. Para fazer isso. geralmente são aplicados somente uma vez na página a determinada TAG HTML para criar um objeto para ser usado com uma função JavaScript."> <br> <h1 style="color:red">A Bruxa de Blair</h1> <h2 style="color:yellow">O Filme</h2> <BR> <P style="color:White"> o filme o filme o filme o filme o filme o filme o filme o filme o filme o filme o filme o filme o filme o filme o filme <br> o filme o filme o filme o filme o filme o filme o filme o filme o filme o filme o filme o filme o filme o filme o filme o filme <br> o filme o filme o filme o filme o filme o filme o filme o filme o filme o filme o filme o filme o filme o filme o filme </p> </body> </html> Incluindo a CSS em uma página WEB A principal utilização da CSS é para definir as regras de todo um documento.HTML & CSS O melhor da folha de estilo em cascata é que ela é incrivelmente fácil de configurar. Os seletores de ID. Você pode dar à classe o nome que quiser. Existem três etapas na regras da CSS. aplicá-las às TAGS como quiser. você ainda tema liberdade de definir os estilos dentro das TAGS individuais. Isso é particularmente útil para substituir cada um dos outros estilos que estão definidos para a página. Veja o exemplo abaixo: <html> <head> <title>CSS</title> </head> <body style="background-color:black. Uma classe é o tipo de seletor mais versátil. Exemplo: p {font: bold 12pt times. Exemplo: . Podemos definir regras que dizem a uma tag HTML especifica o seu conteúdo. Embora os resultados do acréscimo de estilo dessa forma possam parecer idênticos ao acréscimo dos estilos diretamente em uma TAG HTML. porque podem ser aplicadas. ou pode criar regras genéricas e. a colocação dos estilos em _____________________________________________________________________ 34 . Seletor HTML: A parte de texto de uma TAG HTML se chama seletor.} INCLUINDO CSS NO DOCUMENTO Embora a CSS signifique nunca ter que definir a aparência de cada tag individualmente.minhaclasse{font bold 12pt times. em seguida.} Classe: Uma classe é uma regra de “agente livre” que pode ser aplicada a qualquer tag HTML de acordo com a sua vontade. porém.} ID: As regras de ID funcionam como os seletores de classe. Não exige plug-ins ou softwares diferente – apenas regras. a qualquer Tag HTML. Exemplo: #objeto{font bold 12pt times.

} h1{color:red.} h1{color:red.} Arquivo HTML <html> <head> _____________________________________________________________________ 35 .HTML & CSS uma localização comum permite alterar os estilos de um documento a partir de um único lugar. Veja o mesmo exemplo acima como ficaria: <html> <head> <title>CSS</title> <style type="text/css"> <!-body{background-color:black.} --> </style> </head> <body> <br> <h1>A Bruxa de Blair</h1> <h2>O Filme</h2> <BR> <P> o filme o filme o filme o filme o filme o filme o filme o filme o filme o filme o filme o filme o filme o filme o filme <br> o filme o filme o filme o filme o filme o filme o filme o filme o filme o filme o filme o filme o filme o filme o filme o filme <br> o filme o filme o filme o filme o filme o filme o filme o filme o filme o filme o filme o filme o filme o filme o filme </P> </body> </html> Incluindo a CSS em um site da WEB Um dos benefícios da CSS é a possibilidade de criar uma folha de estilo para ser usada não apenas em um único documento HTML. Em seguida. mas através de todo um site da WEB. O estabelecimento de um arquivo de CSS externo é um processo de duas etapas. o arquivo que contém as formatações deve possuir a extensão CSS.} h2{color:yellow. Você pode aplicar essa folha de estilo externa a uma centena de documentos HTML.} p{color:white. configure as regras em um arquivo e vincule ao seu documento HTML. configure as regras em um arquivo de texto.} h2{color:yellow.} p{color:white. Em primeiro lugar. Veja o mesmo exemplo: Arquivo CSS: body{background-color:black.

30 cm 1. 5in Normal.4 2.#00FFAA None.medium.3. 150px. 30 cm 10in.2.dashed.17 1. 30 cm 10in.css"> </head> <body> <br> <h1>A Bruxa de Blair</h1> <h2>O Filme</h2> <BR> <P> o filme o filme o filme o filme o filme o filme o filme o filme o filme o filme o filme o filme o filme o filme o filme <br> o filme o filme o filme o filme o filme o filme o filme o filme o filme o filme o filme o filme o filme o filme o filme o filme <br> o filme o filme o filme o filme o filme o filme o filme o filme o filme o filme o filme o filme o filme o filme o filme </P> </body> </html> PRINCIPAIS ATRIBUTOS DE UMA FOLHA DE ESTILO Atributos de Posição Elemento Position Top Left Width Height Z-index Padding Margin Border-width Border-color Border-style Broder-width Definição Tipo de Posicionamento Distância Vertical para o canto superior esquerdo do quadro Distância Horizontal para o canto superior esquerdo do quadro Largura do Quadro Altura do Quadro Camada usada quando sobrepondo quadros Margem entre as bordas do quadro e o texto interno ao quadro Margem entre as bordas do quadro e o texto externo ao quadro Largura da borda do quadro Cor da borda do quadro Estilo da Borda Largura da borda do quadro Exemplo de Atributo Absolute ou relative 10in.2.double Thin.HTML & CSS <title>CSS</title> <link rel="stylesheet" href="configura.10. 150px. italic _____________________________________________________________________ 36 . 30 cm 10in.10cm.soli d. medium.4 Thin. Courier 12pt. thick Yellow.thick Atributos de Fontes Elemento Font-family Font-size Font-style Definição Fonte que será mostrar o texto Tamanho da Fonte Estilo usada Exemplo de Atributo para Helvetica.3.dotted.5. 150px. Arial. 150px.

Assim sendo.margin-left:9em. sem seguida.1cm.} <P id=”area”>. 2 pt None.gif Atributos de Texto Elemento Word-spacing Letter-spacing Textdecoration Vertical-align Text-align Text-height Definição Espaçamento entre as palavras Espeçamento entre as letras Decoração de texto Alinhamento vertical Alinhamento Horizontal Altura da Linha Exemplo de Atributo 1em. O nome pode ser uma palavra ou qualquer conjunto de letras ou números que você quiser.position:relative.. top. com uma condição: as propriedades definidas para a classe devem funcionar com o tipo de tag com a qual você a usa.300 Atributos e Cores de Fundo da Página Elemento Color Backgrouncolor Backgroundimage Definição Cor do texto Cor de fundo Imagem de fundo Exemplo de Atributo Marrom.. Ela é uma classe independente e você pode usá-la com qualquer TAG HTML. Digite as suas definições para essa classe separando-as com um ponto e vírgula.center. eles podem ser designados a qualquer TAG HTML que se aplique. Em seguida. mas o melhor uso para os seletores de ID é para definir os objetos exclusivos na tela.) e um nome de classe. Você pode usar um ID com qualquer tipo de propriedade.copy{. sub. 20pt DEFININDO CLASSES O uso de seletor de classes permite configurar um estilo independente que você pode aplicar em seguida a qualquer TAG HTML Para definir um seletor de classe digite um ponto (. Um ID não funcionará até ser especificada com uma TAG HTML individual dentro de um documento. As regras de ID sempre começam com (#) e. 1.</p>. lighter. Exemplo: <p class=”copy”>. Por exemplo podemos criar uma classe chamada . LAYERS _____________________________________________________________________ 37 . o nome do ID. DEFININDO IDS Assim como o seletor de classe. underline.HTML & CSS Font-weight Peso da fonte Bold.#ffffcc Imagem.100. 5pt 0.. o seletor de ID pode ser usado para criar estilos exclusivos que são independentes de qualquer TAG HTML em particular. super Left.1em. Exemplo: #area{color:red.. abra a sua definição com uma chave ({) O nome da classe pode ser o que você quiser. 0. right 200%.#ffffcc Marrom. Para aplicar a sua classe a uma tag HTML inclua class=”nome” na tag na qual você deseja aplicar a classe. desde que use letras e números.</p>.2. blink Middle.

font-weight:bold. são chamadas de tags aninhadas. mas o último seletor da lista é aquele que recebe todos os estilos da regra. a qual é separada com um dos pares de tags de duas camadas: <layer>: Equivalente à <div style=”position:absolute. Teste de parágrafo. Teste de parágrafo. Para forçar que uma definição seja sempre usada abra uma regra da CSS com um seletor e uma chave ({). a TAG externa é chamada de pai e a interna de filha. Digite o seletor HTML da TAG pai seguida por um espaço. font-size:20.menu{color:#900. !important e um ponto e vírgula para fechar a definição. digite uma definição de estilo.htm">Efeito curiosos</a></p> </body> </html> CRIANDO UMA DEFINIÇÃO !IMPORTANT O valor !important pode ser incluído em uma definição para fornecer o máximo de peso na determinação da ordem em cascata. Você pode digitar quantos seletores. text-decoration:underline. Veja o exemplo abaixo: <html> <head> <title>Tags Aninhadas</title> <style type="text/css"> <!-p a:link{color:red. O Netscape 4 não suporta !important Exemplo: p{ font-size:12px !important. <a href="curioso.htm">Próximo Capítulo &gt.} DEFININDO A CSS PARA IMPRESSÃO _____________________________________________________________________ 38 .} div.HTML & CSS Uma camada do Netscape é uma parte independente do conteúdo da WEB que há dentro de um documento HTML. Em um conjunto aninhado. Teste de parágrafo. Teste de parágrafo. text-decoration:none.htm">&lt.} --> </style> </head> <body> <div class="menu"> <a href="anterior. Capitulo Anterior</a> <a href="proximo. uma dentro da outra. HTML quiser para quantos pais e TAGS aninhadas diferentes tiver. Teste de parágrafo.”> DEFININDO TAGS DENTRO DO CONTEXTO Quando uma TAG é cercada por outra TAG.</a> </div> <hr> <h3>Novo Capítulo</h3> <p>Teste de parágrafo.”> <ilayer>:Equivalente à <span style=”position:absolute. um espaço.} p{font:12px.

css). mais cedo ou mais tarde.HTML & CSS Quando a maioria das pessoas pensam em páginas WEB. Assim sendo.cassea{ color:#999999. h1.css" media="screen"> <link rel="stylesheet" href="impressao. pensa nessas páginas exibidas na tela. font-family:Arial. Crie duas folhas de estilo (arquivos. uma página da WEB pode conter diversas páginas impressas. para isso utilize: < TAG style=”page-break-before:always.”>.h2{ font-weight:bold..cassea{ color:#999999.} Código no HTML: <html> <head> <title>Midias Diferentes</title> <link rel="stylesheet" href="tela..jpg) no-repeat. a maioria das pessoas quer imprimir pelo menos algumas páginas da WEB. font-family:Arial.. Na verdade. A CSS permite dizer ao browser para usar folhas de estilo diferentes dependendo da página da WEB se destinar ao monitor do computador ou a impressora.css" media="print"> </head> <body> <h1> Mídia de tela </h1> <br> <span class="classea">O que pode ser visto na tela será diferente na impressão</span> <hr> <h2>Teste</h2> </body> </html> DEFININDO QUBRAS DE PÁGINA PARA A IMPRESSÃO Um problema que você encontrará ao tentar imprimir um site da WEB são as quebras de página. Auto permite que o browser coloque as quebras de página.h2{ font-weight:bold. O que parece bem na tela nem sempre é bom quando impresso. Veja os códigos abaixo: CSS para Tela: body{ color:white. o cabeçalho de uma seção pode aparecer na parte inferior de uma página e seu texto na parte superior da próxima página.</TAG> Onde always Força a quebra de página antes do elemento. background:black url(images/backarvore.} h1.} . uma otimizada para o uso em uma tela de computador e outra adaptada para a impressão.} CSS para Impressão: body{ color:black. Podemos forçar uma quebra de página ao imprimir uma página da WEB. _____________________________________________________________________ 39 .} . Entretanto.

criando áreas de espaço em negativo no texto. ou line-height:12px ou line-height:% Exemplo: <html> <head> <title>Ajustando o Texto</title> <style type="text/css"> <!-. para o caso da fonte referenciada não conseguir ser baixada. quando há mais espaço entre as letras a facilidade de leitura é maior. Para fazer o download de uma fone basta apenas o seguinte: @font-face{ Bastarda. Para definir estes espaçamento: Word-spacing: 8px.com/typography/web/embedding/weft3 ) Esse programa porém é exclusivo do Windows. você pudesse enviar automaticamente fontes para o computador do visitante. No Netscape.eot. usando um programa chamado WEFT (http://www. Ajustando as Entrelinhas O espaço entre as linhas também podem ser aumentados para dar um efeito dramático. Geralmente. src:url(Bastarda.} É recomendado a inclusão de pelo menos uma fonte alternativa. Imagine se em vez de depender da lista limitada de fontes browser-safe ou em vez de criar gráficos apenas para obter o tipo desejado.} .microsoft. Com a CSS-2 isso é possível com algumas restrições. você tem que comprar o software TrueDoc(www. Mas também podem ser usados para facilitar a leitura e inclusão de comentários em seu texto.eot). espaço de menos pode impedir a leitura.com). Arial. Para definir o espaçamento entra linhas: Line-height:2.copia{line-height:2.} p{font-family:Bastarda. mas espaço demais interrompe o caminho do olho do leitor na tela. A inclusão de um pequeno espaço entre as palavras na tela pode ajudar a tornar o seu texto mais fácil de ler. Para definir o Kerning: Letter-spacing: 2em. CONTROLES DE TEXTO Ajustando o Kerning O Kerning se refere à quantidade de espaço que há entre as letras de uma palavra. Para o IE você tem que converter as suas fontes para o formato . esse programa era para funcionar tanto no Netscape quanto no IE. um valor negativo fecha o espaço.kerning{letter-spacing:2em} _____________________________________________________________________ 40 .titulo{word-spacing:8px. mas no IE tem muitos BUGS. Ajustando o espaçamento entre as palavras Podemos também ajustar o espaçamento entre as palavras.truedoc. Por outro lado. fazendo com que as palavras individuais apareçam menos distintas na página. Um valor positivo para o espaçamento de letras inclui mais espaço na quantidade padrão.} . Outro problema é a diferença entre os nomes de fontes de diferentes SO.HTML & CSS FAZENDO O DOWNLOADS DE FONTES Um dos melhores recursos da WEB é o download de fontes.

color:brown. Repeat Defina qual será o modo de repetição a ser utilizado eles podem ser: Repeat-x: Instrui o browser para repetir o gráfico de segundo plano na horizontal. Esse valor pode ser o nome da cor. Para definir o segundo plano iniciamos a digitação com a propriedade background seguida de dois pontos e em seguida dos valores de segundo plano: White  Digite um valor para a cor que você deseja para o segundo plano seguido de um espaço.copia{background-color:orange. url(imagem/figura. color:white.} h2{background-color:yellow. Right top: Digite dois valores separados por um espaço para especificar o lugar onde o segundo plano deve aparecer em relação ao canto superior esquerdo do elemento. No-repeat: faz com que o gráfico de segundo plano apareça apenas uma vez.} --> </style> _____________________________________________________________________ 41 .HTML & CSS --> </style> </head> <body> <h1 class="titulo">Palavras com Espaçamento</h1> <hr> <p class="copia">teste de texto com espaçamento entre linhas teste de texto com espaçamento entre linhas teste de texto com espaçamento entre linhas teste de texto com espaçamento entre linhas teste de texto com espaçamento entre linhas </p> <P class="kerning">Espaçamento entre letras Espaçamento entre letras Espaçamento entre letras Espaçamento entre letras </P> </body> </html> DEFININDO SEGUNDO PLANO Podemos usar a propriedade background para definir a imagem e a cor do segundo plano de toda a página ou a imagem e cor de segundo plano imediatamente atrás de cada elemento individual da página. um valor hexadecimal de cor ou um valor RGB. Exemplo: <html> <head> <title>Cores e planos de fundo</title> </head> <style type="text/css"> <!-body{background:black url(images/astalavistagrouplogo3.jpg)  Para utilizar uma figura de fundo podemos definir a localização do arquivo.color:red. Fixed: Instrui para que a figura fique fixa ou seja não role com o site.} . Repeat-y: Instrui o browser para repetir o gráfico de segundo plano na vertical. ele instrui a browser a não utilizar uma imagem de segundo plano.jpg) no-repeat fixed center. Scroll: Instrui para que a imagem role junto com a tela. Alternativamente pode-se usar none em vez de url.

As principais propriedades para bordas são: border-width. Boder style Border width None Thin Dotted Medium Dashed Tick Solid lenght Double Groove Ridge Inset outset Exemplo: <html> <head> <title>Untitled</title> <style type="text/css"> <!-.} --> </style> </head> <body> <table class="inset"> <tr> <td colspan=2>Célula 1</td></tr> <tr><td>abaixo</td><td>abaixo e à direita</td></tr> </table> <p class="double">Texto envolvido por bordas<br>com duas linhas</p> </body> </html> ENVOLVENDO UM ELEMENTO COM TEXTO _____________________________________________________________________ 42 . Também é possível definir a borda do elemento em cada lado da caixa individualmente.} td{text-align:center.HTML & CSS <body> <h2> testando cores de preenchimento</h2> <hr> <span class="copia">texto </span> </body> </html> BORDAS Para definir um atributo de borda para uma caixa simultaneamente a CSS fornece a propriedade border. border-style. o estilo e/ou a cor. border-width:15px} .inset{border-style:inset. border-color:orange. border-color:red.double{border-style:double. border-color. border-width:10px. você pode usar border para definir a largura.

Entretanto o posicionamento estático é diferente. Posicionamento Relativo Um elemento definido como sendo posicionado relativamente fluirá até o seu lugar dentro da janela ou dentro de seu elemento pai. a menos que você os defina com os outros posicionamentos. O tipo de posicionamento diz ao browser como ele deve tratar o elemento ao posicioná-lo na janela. O número de índice Z de um elemento é um valor que mostra sua relação 3D com os outros elementos da janela. os elementos são posicionados como estáticos dentro da janela. quando a capacidade de fazer o texto flutuar ao redor de um gráfico foi incluída.3 e assim por diante. Você pode mover um elemento posicionado relativamente a partir de sua posição natural na janela usando as propriedades top e left. O canto superior esquerdo da janela ou de seu elemento conteiner é a origem. Os elementos posicionados recebem números automáticos de empilhamento.} POSICIONAMENTOS Quando você define os atributos de uma tag HTML. Para definir o indice Z de um elemento. para isso usamos a propriedade float. mas também que flutue ao redor dos outros blocos de texto e do texto ao redor das tabelas. os elementos que são posicionados podem receber uma terceira dimensão: uma ordem de empilhamento na qual um elemento se relaciona ao outro. na verdade. a partir do 0 (zero)incrementalmente com 1. os designers de toda parte estavam maravilhados. e estas podem ser : right. relativo. A CSS levou este passo um pouco adiante. Esse sistema é chamado de índice Z.. Exemplo: <html> <head> <title>Posicioamento 3D</title> _____________________________________________________________________ 43 . permitindo que o texto não apenas flutue ao redor do texto. Essa técnica é útil para controlar o modo como os elementos aparecem com relação aos outros elementos da janela. primeiro defina o posicionamento (ex: absolute) depois z-index:nº. Em seguida é possível manipular esse elemento exclusivo por meio do posicionamento da CSS. Posicionamento Absoluto O posicionamento absoluto cria um elemento independente – um agente livre – separado do restante do documento. assim como o comportamento padrão de qualquer outro elemento da HTML – ou seja. absoluto ou fixo – embora apenas os três primeiros normalmente estejam disponíveis na maioria dos browsers.HTML & CSS No inicio do desenvolvimento HTML. Posicionamento 3D Apesar da área da tela ser bidimensional. Um elemento pode ter um de quatro valores de posicionamento – estático. Por exemplo Img{float:right. A seguir digite uma palavra-chave para dizer ao browser o lado da tela no qual o elemento deve flutuar.2. Inicie sua definição digitando a propriedade float seguida de dois pontos. porque um elemento estático não pode ser posicionado ou reposicionado explicitamente. left e none. ele aparece após tudo que está antes dele na HTML e antes de tudo que está após ele na HTML. por meio de um seletor em uma CSS. você separa todo o conteúdo dentro de um conteiner daquela TAG como sendo um elemento exclusivo da janela. Os elementos que são definidos dessa forma são colocados em um ponto exato da janela por meio das coordenadas x e y. Posicionamento Estático Como padrão. no qual você pode colocar qualquer tipo de conteúdo HTML que quiser.

top:90px.font-family:Arial Black.z-index:2.text-decoration:none.} DEFININDO A ÁREA VISIVEL DE UM ELEMENTO (RECORTE) Ao contrário da definição de largura e altura de um elemento.} a{color:yellow.font-size:28pt.org/TR/REC-CSS2">W3</a> onde você poderá até mesmo conseguir alguns exemplos. color:navy. color:white.z-index:2. visibility:hidden.left:60px.box2{position:absolute. _____________________________________________________________________ 44 .textalign:center.color:black.width:200px.left:17px.} . o elemento é invisível.font-weight:bold.top:20px.padding:15} .font-style:italic.background-color:yellow. mas ainda ocupa espaço no documento.} a:visited{color:white.padding:15.HTML & CSS <style type="text/css"> <!-BODY{font-family:Arial. Se a visibilidade estiver definida como hidden.fontfamily:Times.left:150px.titulo2{position:absolute. O restante do conteúdo do elemento ainda está lá.hide{position:relative. color:blue.background-color:blue. color:cyan.} .font-style:italic.font-family:Arial Black.font-size:13pt.left:20px.background-color:black.} --> </style> </head> <body> <Span class="titulo1">Posicionamento 3D</Span> <Span class="titulo2">Posicionamento 3D</Span> <Span class="titulo3">Posicionamento 3D</Span> </span> <span class="box2">Nesta folha de estilo forma utilizados posicionamento.} . mas ficará invisível para o espectador e será tratado como um espaço vazio pelo browser.z-index:3. Exemplo: .width:70px. o recorte de um elemento designa a quantidade daquele elemento que é visível na janela.</span> </body> </html> DEFININDO A VISIBILIDADE DE UM ELEMENTO A propriedade visibility designa se um elemento é visível quando é visualizado inicialmente na janela.box3{position:absolute.z-index:1. Para isso usamos a propriedade clip: rect(nº nº nº nº) . a qual controla suas dimensões.w3.font-family:Arial Black.font-size:11pt.titulo1{position:absolute. IDS e classes e utilizamos o Span que chama as IDS e as classes</span> <span class="box3">Para saber mais sobre folhas de estilo acesse o site da <a href="http://www.font-size:28pt.top:185px. e um grande retângulo vazio aparece no lugar do elemento.top:17px. color:white.} .font-weight:bold.font-size:16pt.} B{color:yellow.z-index:3.top:14px.background-color:navy.titulo3{position:absolute.fontfamily:Courier New.font-size:10pt.font-size:28pt.left:14px.

height:150px. float:right. clip:rect(15 100 95 50). height.overflow(auto.jpg" align="left"></div> <div class="over"><img src="images/worldmap.br .} . overflow:auto.over{ width:250px. left:0px. A propriedade overflow permite especificar como esse conteúdo extra é tratado. margin:5px.com. Para definir o controle do overflow use: width.} --> </style> </head> <body> <div class="recorte"><img src="images/worldmap. top:0px. scroll.superdownloads. parte do conteúdo não é exibida.jpg" align="left"></div> </body> </html> BARRAS DE ROLAGEM COLORIDAS Uma das últimas modas na CSS é a possibilidade de colocar cores nas barras de rolagem.HTML & CSS Definindo o lugar do Overflow Quando um elemento é recortado ou quando a largura e a altura são menores do que a área necessária para exibir tudo. hidden e visible) Exemplo: <html> <head> <title>Recortando a imagem</title> <style type="text/css"> <!-.recorte{position:absolute. _____________________________________________________________________ 45 . para facilitar este processo existem vários programas que tratam deste recurso um dos mais conhecido é o CollWeb Scrollbars que pode ser baixado no site www.

scrollbar-3dlight-color:#0080FF. } --> </STYLE> _____________________________________________________________________ 46 . scrollbar-highlight-color:#FFFFFF.HTML & CSS Basta apenas especificar as cores para cada uma das partes de sua barra de rolagem e depois clicar no botão Generate Code <STYLE type="text/css"> <!-BODY { scrollbar-face-color:#8080FF. scrollbar-shadow-color:#0000FF. scrollbar-arrow-color:#FFFFFF. scrollbar-track-color:#E0E0E0. scrollbar-darkshadow-color:#004080.

NÃO SE PRENDA A PLATAFORMAS Você não pode esquecer que os internautas usam diversos tipos de sistemas (Windows. EVITE SITES TIPO CARNAVAL Procure seguir um padrão entre as suas páginas.. com bom conteúdo atualizado constantemente o seu site tem boas chance s de ser bem visitado. então procure diminuir ao máximo tamanho de imagens. e verifique se possível ( alguns provedores de hospedagem dão esta opção) verifique sempre ao cesso ao seu site. 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. ACESSO DIRETO A INFORMAÇÃO Evite sites “labirintos” em que o visitante fica navegando de um lado para outro e nunca consegue encontrar o que realmente deseja. relacionadas aos assuntos principais. <HEAD></HEAD>: delimita o cabeçalho de uma página. etc. e saber HTML não é o suficiente. Se você fizer algo focado em um público em especial.HTML & CSS CUIDADOS NA CONSTRUÇÃO DE UM SITE Construir um site interessante é um grande desafio. FAÇA UM ESBOÇO Organizar um site é uma das formas mais fáceis de garantir um bom resultado final. Portanto antes de fazer um site 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á. 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. DIVIDA O SEU SITE Divida o seu site em seções principais.. Ao criar bookmarks (indicadores) lembre-se de que ao final de cada assunto criar um link para o inicio da página. Isto além de facilitar o seu trabalho também facilitará ao visitante a navegação pelo seu site. Mac. etc.. Evite também percursos longos até o destino desejado. Linux.). pois com certeza a internauta que visitar o seu site vai acabar desistindo no meio do caminho. para que você tenha algum sucesso em seu site. DIVULGUE O SEU SITE E OBSERVE OS ACESSOS Procure cadastrar o seu site em todos os mecanismos de busca possíveis. se for usar fontes escuras use fundos mais claros e vice versa e não faça uma página rosa choque. o mesmo deve oferecer algo atualizado e interessante. _____________________________________________________________________ 47 . GLOSSÁRIO <HTML></HTML>: Marca início e fim de uma página. então agora vamos dar a você algumas regras de boa etiqueta na WEB TRACE METAS Existem hoje muitas páginas na WEB e com os mais variados assuntos. outra em segui verde-limão. se ele estiver baixo com certeza alguma coisa nele está errada. 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.

tamanho e ou cor do texto. _____________________________________________________________________ 48 . <H1></H1> à <H6></H6>: Define títulos. <I></I>: Formata o texto em Itálico. <FORM></FORM>: Cria um formulário. <TITLE></TITLE> Define o título de uma página. <UL> <LI> <LI> </UL>: Cria uma lista não ordenada. <A></A>: Insere um Link <OL> <LI> <LI> </OL>: Cria uma lista ordenada. tabelas) <HR>: Cria uma linha horizontal. <DIV></DIV>: Configura o alinhamento do texto. subtítulo de diferentes níveis. <APPLET></APPLET> Insere um applet Java em uma página. <P></P>: Delimita um parágrafo. <INPUT> Define os campos do formulário. <DL> <DT></DT> <DD></DD> </DL>: Cria uma lista de definição. <TR></TR>: Define a linha de uma tabela. <TD></TD>: Define as células de uma tabela. <SELECT OPTION></OPTION>: define uma lista de opções no formulário. <IMG>: Insere uma imagem. <STYLE></STYLE> Define os estilo usados na página. <FRAMESET></FRAMESET>:Define o conjunto de janelas (frames) da tela. <TH></TH>: Define as células de cabeçalho de uma tabela. <NOFRAMES></NOFRAMES>: Define o conteúdo que será exibido por browser sem suporte a frames. <BR>: Quebra de Linha. <FONT></FONT>: Altera o fonte.HTML & CSS <BODY></BODY>: Delimita o corpo de uma página. </SELECT> <TEXTAREA></TEXTAREA>: Define uma área de texto no formulário. <TABLE></TABLE>: Cria uma tabela <CAPTION></CAPTION>: Define o título de uma tabela. <PARAM> Definem os parâmetros do applet. <B></B>: Formata o texto em Negrito. imagem. <CENTER></CENTER>:Centraliza objetos(texto. <FRAME>:Configura cada região (frame) da tela.