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>..............................................................................................................................8 Alterando o formato de linha de separação.........................................................................................9 USANDO IMAGENS COMO LINHAS SEPARADORAS.....................................................................9 DIV ...................................................................................................................................................9 BLOCKQUOTE.........................................................................................................................................9 ESTILOS DE TEXTO E FONTE..............................................................................................................9 APLICANDO CORES E TAMANHOS NO TEXTO............................................................................................10 ALTERANDO O TAMANHO DA FONTE..........................................................................................................10 Size.......................................................................................................................................................10 Face.....................................................................................................................................................10 Color....................................................................................................................................................10 CABEÇALHOS.........................................................................................................................................11
ALINHANDO CABEÇALHOS .......................................................................................................................11

LISTAS.......................................................................................................................................................12 LISTAS ORDENADAS.............................................................................................................................12 LISTAS NÃO ORDENADAS.......................................................................................................................12 LISTA DE DEFINIÇÃO.............................................................................................................................12 IMAGENS..................................................................................................................................................13 O COMANDO IMG..................................................................................................................................14 URLS E LINKS..........................................................................................................................................15 URL.................................................................................................................................................15 Criando um Link com Arquivos Locais..............................................................................................15 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.......................................................................................................................................17 Parâmetros do elemento <TABLE>...................................................................................................18 Parâmetros do elemento <TR>..........................................................................................................18 Parâmetros dos Elementos <TD> e <TH>........................................................................................18

_____________________________________________________________________ 2

HTML & CSS

FRAMES.....................................................................................................................................................20 Como funcionam os frames.................................................................................................................20 O Comando Document........................................................................................................................20 O Comando FRAMESET....................................................................................................................20 Cols=tamanho.....................................................................................................................................20 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......................................................................................................................22 Criando a Estrutura dos Frames........................................................................................................22 Criando o conteúdo do Menu.............................................................................................................23 IFRAME..........................................................................................................................................24 META.........................................................................................................................................................24 INFORMAÇÕES ESPECÍFICAS.....................................................................................................................24 VARIAÇÕES DO COMANDO META..............................................................................................................25 MULTIMIDEA..........................................................................................................................................25 CONSIDERAÇÃO NO USO DE MULTIMIDEA...................................................................................................25 INSERINDO UM VÍDEO............................................................................................................................25 ATRIBUTOS UTILIZADOS EM VÍDEOS..........................................................................................................25 USANDO O COMANDO EMBED PARA EXIBIR VÍDEO....................................................................................27 O comando NOEMBED......................................................................................................................27 MARQUEE..........................................................................................................................................28 Combinando a utilização de vários Marquees...................................................................................29 SOM..................................................................................................................................................30 Inserindo Áudio...................................................................................................................................30 Inserindo Áudio através de Hiperlinks...............................................................................................30 INSERINDO MÚSICA DE FUNDO.................................................................................................................31 O comando BGSOUND (Internet Explorer).......................................................................................31 JAVA...........................................................................................................................................................31
ELEMENTO

HTML PARA APPLETS

JAVA....................................................................................................32

FOLHAS DE ESTILO..............................................................................................................................32 VERSÕES DA CSS................................................................................................................................32 CSS - 1.................................................................................................................................................32 CSS – Positioning (CSS-P).................................................................................................................32 CSS – 2................................................................................................................................................33 CSS – 3................................................................................................................................................33 REGRAS DA CSS.................................................................................................................................33 INCLUINDO CSS NO DOCUMENTO............................................................................................................33 Incluindo a CSS em uma página WEB...............................................................................................34 Incluindo a CSS em um site da WEB..................................................................................................34 PRINCIPAIS ATRIBUTOS DE UMA FOLHA DE ESTILO........................................................................................35 DEFININDO CLASSES..............................................................................................................................36 DEFININDO IDS...................................................................................................................................36 LAYERS..............................................................................................................................................37 DEFININDO TAGS DENTRO DO CONTEXTO................................................................................................37 CRIANDO UMA DEFINIÇÃO !IMPORTANT......................................................................................................37 DEFININDO A CSS PARA IMPRESSÃO........................................................................................................38 DEFININDO QUBRAS DE PÁGINA PARA A IMPRESSÃO.....................................................................................38 FAZENDO O DOWNLOADS DE FONTES.........................................................................................................39 CONTROLES DE TEXTO..........................................................................................................................39 Ajustando o Kerning...........................................................................................................................39

_____________________________________________________________________ 3

HTML & CSS

Ajustando o espaçamento entre as palavras......................................................................................39 Ajustando as Entrelinhas....................................................................................................................39 DEFININDO SEGUNDO PLANO..................................................................................................................40 BORDAS ............................................................................................................................................41 ENVOLVENDO UM ELEMENTO COM TEXTO..................................................................................................41 POSICIONAMENTOS................................................................................................................................42 Posicionamento Estático.....................................................................................................................42 Posicionamento Relativo....................................................................................................................42 Posicionamento Absoluto....................................................................................................................42 Posicionamento 3D.............................................................................................................................42 DEFININDO A VISIBILIDADE DE UM ELEMENTO............................................................................................43 DEFININDO A ÁREA VISIVEL DE UM ELEMENTO (RECORTE).............................................................................43 Definindo o lugar do Overflow...........................................................................................................43 BARRAS DE ROLAGEM COLORIDAS............................................................................................................44 CUIDADOS NA CONSTRUÇÃO DE UM SITE...................................................................................46 TRACE METAS......................................................................................................................................46 FAÇA UM ESBOÇO.................................................................................................................................46 DIVIDA O SEU SITE................................................................................................................................46 ACESSO DIRETO A INFORMAÇÃO...............................................................................................................46 EVITE SITES TIPO CARNAVAL...................................................................................................................46 NÃO SE PRENDA A PLATAFORMAS............................................................................................................46 DIVULGUE O SEU SITE E OBSERVE OS ACESSOS............................................................................................46 GLOSSÁRIO..............................................................................................................................................46

_____________________________________________________________________ 4

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

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

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

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

como é o caso de ALIGN. nesse caso. <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%> </body> </html> ESTILOS DE TEXTO E FONTE _____________________________________________________________________ 9 . deixando-a mais grossa em função do valor especificado. para alinhar o texto. Assim como o comando HR. podemos usar uma imagem com o comando <IMG>. O parâmetro SIZE altera a espessura (altura) da linha. Seu uso é recomendado para criar uma divisão na página. seu tamanho varia em função da largura da janela. Assim. podemos usar os parâmetros WIDTH e HEIGHT para alterar o tamanho da imagem. Aqui temos um texto justificado. DIV A Tag <DIV></DIV> envolve uma área do texto ou divisão que pode receber parâmetros específicos de alinhamento. A largura ou comprimento da linha é alterada pelo parâmetro WIDTH e pode ser expresso em pixels. Podemos envolver vários parágrafos com o elemento DIV BLOCKQUOTE O comando Blockquote permite dar recuos de parágrafos aos parágrafos. Esse valor é expresso em pixels. o tamanho da linha é fixo ou utiliza uma porcentagem relativa à largura da janela.HTML & CSS O comando <HR> tem como finalidade inserir uma linha divisória na posição em que foi especificado. aqui temos um texto justificado. 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. Veja o código abaixo: USANDO IMAGENS COMO LINHAS SEPARADORAS Em vez de usar o comando <HR> como separador. sendo que. 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.

RGB ou através de um nome predefinido de cores como mostra a tabela abaixo: _____________________________________________________________________ 10 . precisam ser especificados em pares. marcando o início e fim do texto que sofrerá a formatação. a segunda é carregada. Face Esse parâmetro permite que seja escolhida uma fonte diferente para o texto. a fonte será exibida no tamanho especificado. Se não for encontrada nenhuma das fontes especificadas. que é do tipo liga desliga. a cor e o tipo da fonte do texto utilizado. Podemos especificar várias fontes. alterando a forma ou o tipo da fonte. o texto é exibido na fonte padrão. Size O parâmetro size especifica o tamanho da fonte utilizada. você pode criar uma série de efeitos no texto. Color Esse parâmetro especifica a cor do texto.HTML & CSS Assim como no editor de textos. Todos os comandos que alteram o estilo do texto são do tipo contêiner ou liga desliga. se a fonte atual é 3 e for especificado <FONT SIZE=+2> o texto será exibido no tamanho 5. o tamanho da fonte atual será aumentado ou diminuído nesse valor. Seu valor pode ser especificado no formato hexadecimal. Se o valor for especificado sem sinal. de maneira que. Por exemplo. ou seja. Se for especificado um número antecedido pelo sinal de adição ou de subtração. 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. se o sistema não possuir a primeira opção. o maior. 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. Os valores permitidos vão de 1. o menor até 7. O padrão é 3. O comando responsável por isso é o comando <FONT>.

Eles são perfeitos para criar títulos e iniciar seções dentro de uma página.<P> Para chamar a <BLINK>atenção</BLINK> use o comando BLINK.<BR> Este é um exemplo de texto onde foi usado o efeito <SUB>Subscrito</SUB> do comando SUB.</font> </BODY> </HTML> CABEÇALHOS Outra forma muito usada para mudar o tamanho da letra e aplicar um efeitos em textos é utilizando cabeçalhos. observem que no IE o comando BLINK não é aplicado. Além do tamanho diferenciado. O comando <H1> possui o maior tamanho enquanto que <H6> possui o menor tamanho de fonte.HTML & CSS 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. Veja o exemplo abaixo: As figuras acima mostram o código anterior sendo visualizado no IE e o Netscape. <BR> Este é um exemplo de texto <SUP>Sobrescrito</SUP> pelo comando SUP. o comando cabeçalho insere uma linha em branco antes e depois da linha que contém o comando. <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>.<HR> Este texto recebeu o formato de fonte <BIG>big</BIG> que cria letras grandes.<BR> Este texto recebeu o formato de fonte <SMALL>Small</SMALL> que cria letras pequenas. ALINHANDO CABEÇALHOS _____________________________________________________________________ 11 . A linguagem HTML possui seis comandos de cabeçalho de <H1> até <H6>.

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

</DL> são as marcas que englobam uma lista de definições. <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.. através de CDs ROMs.HTML & CSS <DL>. etc. pois existem dois elementos – o termo a ser definido (DT). _____________________________________________________________________ 13 . A estrutura desta lista é diferente das outras. e a definição propriamente dita (DD). Scanners.. ideais para a criação de glossários e coisas do gênero. deslocada para a direita. ou pode cria-las a partir de um programa de imagens.</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> </HTML> IMAGENS Você pode obter uma imagem através de uma cópia feita a partir de uma página da Internet. Na apresentação cada termo aparece em uma linha. e a respectiva definição na linha seguinte.

O Mapa. O Mapa. para exibir uma imagem chamada foto. O Mapa. ou uma legenda quando o cursor do mouse passa sobre ela mostrando o texto especificado. O Mapa. O Mapa. se estiver no mesmo diretório do programa ou seu caminho completo.O Mapa. O Mapa. HEIGHT=”número” Especifica a altura de exibição da imagem independentemente de seu tamanho físico. ela será esticada ou comprimida para caber no espaço especificado. O Mapa. O Mapa. O Mapa. O Mapa. O Mapa.. O Mapa. O Mapa.O Mapa. O Mapa. O Mapa. O Mapa. Portanto. O Mapa. <IMG SRC=”URL” WIDTH=”. O _____________________________________________________________________ 14 .jpg" text="yellow"> <img src="images/worldmap. O Mapa. O Mapa. O Mapa. O Mapa.HTML & CSS O COMANDO IMG Esse comando define a posição de uma imagem que aparece no corpo do documento. O Mapa. Se for o colocado o sinal de porcentagem. O Mapa.gif que esteja no mesmo diretório do programa deve ser especificado o seguinte comando: IMG SRC=”foto. Se a imagem for maior ou menor do que o valor especificado. ALIGN=”LEFT” | “RIGHT” Especifica o alinhamento da imagem relativamente às bordas laterais da janela WIDTH=”número”| Esse parâmetro especifica a largura de ”número%” exibição da imagem independentemente do seu tamanho físico. ALIGN=”TOP” | “MIDLE” Especifica o alinhamento da imagem | “BOTTOM” relativamente à linha de texto onde é exibida. O Mapa. O Mapa. O Mapa. ele é relativo à largura da janela. BORDER=”número” Especifica em pixels a largura da borda da imagem. ALT=”texto” Exibe o texto quando o browser não encontra a imagem.” HEIGHT=”…” BORDER=”…” ALT=”Texto” VSPACE=”…” HSPACE=”…”> ALIGN=| “BOTTOM” | “TOP” | “MIDLE” SRC=”URL É o nome da figura.jpg" width="200" height="100" alt="Mapa Mundi" align="left" align="midle"> <DIV align="justify">O Mapa. Se a imagem for maior ou menor do que o valor especificado. O Mapa. O Mapa. O Mapa. todos os demais são opcionais. O Mapa. Determina em pixels o espaço que deve ser deixado em branco nas laterais da imagem Com exceção do parâmetro SRC. O valor zero remove a imagem 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.gif” <html> <head> <title>Imagens</title> </head> <body background="images/backarvore. O Mapa. O Mapa. O Mapa. O Mapa. O Mapa.. O Mapa.

O Mapa.O Morcego. O Morcego. O Principal atrativo da Internet é a criação de documentos com o conceito de hipertexto. O Mapa. O Mapa. O Mapa. O Mapa. O Mapa. no seu micro ou em qualquer servidor da rede. O Morcego.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 Mapa. O Mapa. O Morcego. O Mapa. O Morcego. Gopher ou WAIS). O Mapa. O Mapa.HTML & CSS Mapa. O Mapa. (como por exemplo http. Veja a sintaxe básica deste comando: <A HREF=”.hardcore. O Mapa..O Morcego. O Mapa. O Mapa. O Mapa. O Mapa.com. O Morcego. O Mapa. </div> <Br> <img src="images/Hlpglobe.O Morcego. O Mapa. O Morcego. O Mapa. Você precisa apenas especificar o nome completo do arquivo que será chamado. O Mapa. O Mapa.NomeDoArquivo http://www. mas que poderiam ter sido criados em um processador de textos.O Morcego.htm http: É o protocolo www. O Morcego. usando a seguinte sintaxe: Protocolo://servidor. O Morcego. o endereço servidor e a localização do arquivo.. O Mapa. O Mapa.br: É o nome do servidor index. essa nomenclatura inclui três componentes. não importando se elas estão em outra página WEB. O Mapa. 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 Morcego.br/index. O Mapa.com.gif" width="120%"> </body> </html> URLS E LINKS Até agora você aprendeu como criar documentos interessantes. Criando um Link com Arquivos Locais Vincular um texto com uma página local é uma tarefa bastante simples.gif" alt="Morcego" align="right"><DIV align="justify">O Morcego. O Mapa.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.”NAME”. O Morcego.O Morcego.htm: É o nome do documento que será acessado. O Morcego.hardcore. O Mapa. O Mapa. O Morcego. O Morcego. utilizando o comando <A> de âncora. O Mapa. O Morcego. O Morcego.. Chamada de Uniform Resource Locator (Localizador Universal de Recursos) ou URL. O Mapa. </div><hr> <img src="images/Batlow. O Morcego.”>caracteres</A> Principais parâmetros: HREF=”URL” Especifica o endereço do URL ao _____________________________________________________________________ 15 ..O Morcego. URL A Internet usa uma nomenclatura específica para indicar o endereço de um documento. Ela deve conter o protocolo do documento. ou seja .

_top: página inteira.com.com">e-mail</a> _____________________________________________________________________ 16 . Especifica o nome da seção de um documento à qual um link de hipertexto faz referência. CRIANDO LINKS PARA SEÇÕES DE UMA PÁGINA Para dominar o uso do hipertexto. para separar diretórios. <html> <head> <title>Links</title> </head> <body> <p align="center">Links</p> <p><a href="http://www. permitindo seu endereçamento. 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>. o programador em HTML deve conhecer bem o funcionamento do comando <A> e dois de seus parâmetros da linguagem.com.macromedia. Pode ser usado dentro e fora do documento. Existe uma diferença entre esses caminhos. Vinculando Arquivos de outros diretórios Você pode especificar o endereço de outros diretórios usando um esquema de caminhos parecido com DOS. usando a barra / no lugar da barra \. Em vez de especificar um texto de hiperlink.HTML & CSS NAME=”String” qual o link está associado. usado para criar o link em si.br">Microsoft</a> <p><a href="http://www. E podem ser _self: Mesmo quadro. você precisa criar uma âncora (também chamado de indicador em alguns editores de HTML) no inicio de cada seção do documento.com. Um é o <H HREF>. que cria âncoras ou endereços de seções de um documento. que usa a opção MAILTO no lugar da URL.zzn.br" target="_blank">Adobe</a> <p><a href="mailto:softwaresuporte@hardcoreinformatica.com.adobe. Essa âncora recebe um nome que será mencionado pelo link que acessará.br">Macromedia</a> <p><a href="http://www. <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. você usa o comando <IMG> para colocar a imagem. e o outro é o <A NAME>. Na Web você deve inverter a barra de espaços. Criando uma Âncora Para interligar uma página.(recurso muito utilizado em frames) através do parâmetro target: . <A HREF=”MAILTO:faleconosco@provedor. _blank: nova janela e _parent: quadro pai.br”>Tire as suas dúvidas </A> DEFININDO DESTINOS Podemos também definir destinos para os nossos links. Usando uma Imagem como Hiperlink Você pode usar uma imagem como hiperlink envolvendo-a com o comando <A></A>. e depois as âncoras.microsoft.

O conceito é o mesmo conhecido usualmente: ela tem linhas e colunas.&nbsp.gif" width="150" height="50"></p> </body> </html> TABELAS Assim com as listas que nós já vimos. e na interseção delas estão as células. <TR>..</TR> Table Row ou Linha de tabela Este é o elemento utilizado na definição de linhas de tabelas. <TH>.</p><p>&nbsp. Tabelas são definidas em linhas.</TH> Table Header ou Cabeçalho de Tabela Elemento que define células de cabeçalho.. O alinhamento padrão de uma célula é à esquerda horizontalmente e centralizado verticalmente.. links. Uma célula pode conter tudo o que normalmente consta do corpo de um documento HTML – Links. e pela utilização de fonte em Negrito. Células de cabeçalho têm características idênticas a células de dados definidas por <TD>. referências a imagens. e deve constar entre as marcas que definem a tabela. como textos. o título á apresentado acima da tabela e centralizado. as linhas com menos células são completadas à direita com células em branco. <TD>. e caso o número de células varie de uma linha para outra. Sem parâmetros.</TD> Table Data ou Dados de Tabela Marcas que delimitam as células que compõem as linhas. O número de linhas de uma tabela corresponde ao número de <TR></TR>. ELEMENTOS BÁSICOS DE TABELAS <TABLE>. imagens.. Todas as demais marcas referentes a tabelas – linhas e células – somente serão consideradas se incluídas entre <TABLE>e </TABLE>. O recurso de tabelas é muito interessante e muito usado nas páginas Web.HTML & CSS <hr> <P Align="center">Criando as Âncoras</P> <a href="#textos">Textos</a> &nbsp. textos. a não ser pelo alinhamento horizontal..</TABLE> São as marcas que englobam a definição de uma tabela.</p> <a name="imagens">IMAGENS</a> <p align="center"><img border="0" src="entrar1. <CAPTION>. Na linguagem HTML..<a href="#imagens">Imagens</a> <P> <a name="textos">TEXTOS</a> <p>&nbsp... e assim sendo devem estar inseridas entre as marcas de linhas.</p><p> &nbsp. PARÂMETROS _____________________________________________________________________ 17 .. listas e até outras tabelas. no HTML existem elementos específicos para a criação e formatação de tabelas. você pode inserir nas células tudo o que normalmente faz parte do corpo de um documento..</CAPTION> Trata-se de um elemento opcional que define o título da tabela. mas separado das marcas que definem linhas e colunas.</p><p>&nbsp. e até tabelas. que é centralizado. sendo as linhas compostas de células.</p><p>&nbsp.</p><p>&nbsp.

e centralizado para células de cabeçalho (<TH>). baseado nos textos inseridos nas células. Pode conter os valores LEFT. que pode ser definida em pixels ou em percentual referente à largura da janela. entretanto. • VALIGN _____________________________________________________________________ 18 . Parâmetros do elemento <TABLE> • BORDER A apresentação padrão de uma tabela é sem bordas. Caso não seja especificado. Exemplo: <TABLE CELLSPACING=3> • CELLPADDING Determina. Se omitido. Pode ser usado para indicar a espessura da borda (em pixels).HTML & CSS Estes elementos básicos. o espaço entre o conteúdo e as bordas da célula. Parâmetros dos Elementos <TD> e <TH> • ALIGN Configura o alinhamento horizontal dos elementos contidos na célula. CENTER OU RIGHT. em pixels. o alinhamento é à esquerda para as células de dados (<TD>). • BGCOLOR Define a cor de fundo da linha. É especificado em pixels. Este parâmetro não funciona em alguns browsers. Se omitido. possuem alguns parâmetros que permitem um maior controle sobre alguns detalhes da apresentação da tabela. a largura das linhas de grade (as bordas que envolvem as células). Exemplo: <TABLE WIDTH=75%> • CELLSPACING Define o espaço entra as células. A presença do parâmetro BORDER indica justamente que deve ser desenhada uma borda em torno de cada célula da tabela. MIDLE(meio) ou BOTTOM (fundo). Pode conter os valores LEFT (esquerda). o alinhamento é à esquerda para as células de dados (<TD>). • BGCOLOR Define a cor de fundo da tabela. • VALIGN Define o alinhamento vertical dos elementos contidos nas células de uma linha. ou seja. CENTER (centro) ou RIGHT( direita). Pode conter os valores TOP(topo). com BORDER=X. Parâmetros do elemento <TR> • ALIGN Configura o alinhamento horizontal dos elementos contidos nas células de uma linha. • WIDTH Especifica a largura da tabela. o alinhamento é ao meio. Exemplo: <TABLE BORDER=2> • BORDERCOLOR Permite que se coloque cores nas bordas de sua tabela e possui duas variações: bordercolorlight e bordercolordark. CENTER OU RIGHT. Exemplo: <TABLE CELLPADING=6> • ALIGN Configura o alinhamento horizontal da tabela em relação aos outros elementos da página. o próprio browser se encarrega de determinar a largura mais adequada. permitindo que se coloque duas cores de bordas em volta de sua tabela. Pode conter os valores LEFT. Se omitido. e centralizado para células de cabeçalho (<TH>).

Se atribuirmos COLSPAN=2 a uma célula. o browser entende que o texto dentro daquela célula não pode ser dividido em mais de uma linha. Eles são usados para criar textos com elementos na tela de forma mais fácil. podemos simular colunas de texto. _____________________________________________________________________ 19 . para delimitar áreas de uma página e diversas outras utilidades que você nem imagina. Utilizando uma tabela de tamanho definido. Ao atribuir ROWSPAN=2 para uma célula. • NOWRAP Quando este parâmetro encontra-se associado a uma célula. diminuirá em 1 o número de células da linha de baixo. Este parâmetro deve ser utilizado com cuidado. os elementos de tabelas são usados para formatar páginas de uma forma geral. ela ocupará o seu espaço e o espaço de mais uma célula para a direita. • BGCOLOR Define a cor de fundo da linha.HTML & CSS Define o alinhamento vertical dos elementos contidos na célula. o alinhamento é ao meio. • ROWSPAN Define o número de linhas a ser ocupado por uma célula. 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> <td width="34%">Texto 3</td> </tr> </table> </body> </html> bordercolorlight="#000080" Atenção: Além de criar tabelas para exibir dados como numa planilha. Deve ser utilizado para expandir uma célula verticalmente (para baixo). assim esta linha deverá possuir uma célula a menos que as demais. para evitar colunas demasiadamente largas. podemos evitar que a página fique grande demais para resoluções de 640x480. entre outras aplicações. independente da resolução de vídeo do visitante de sua página. Por exemplo. Se omitido. MIDLE(meio) ou BOTTON(fundo). • COLSPAN Especifica o número de colunas de uma tabela a ser ocupado por uma célula. já que uma de suas células “vale”por duas. podemos usar tabelas para garantir que o texto fique na posição A da tela e a imagem fique na posição B. Deve ser utilizado para expandir uma célula horizontalmente. Pode conter os valores TOP (topo).

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. Nele deverá ser especificada a largura de cada coluna do documento. a janela do browser é dividida em frames que compartilham o espaço disponível.*> Usando valores percentuais _____________________________________________________________________ 20 . podemos exibir mais de um frame (janela) simultaneamente. Você pode considera-lo como um documento mestre. pois ele não usa os comandos <BODY> e </BODY>. facilitando a navegação pelo manual. 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. O Comando FRAMESET Este comando é do tipo contêiner. Usando valores em pixels <FRAMESET COLS=”100. define seu conteúdo. ou seja deve ser aberto e fechado. para visualizar três páginas diferentes chamadas A. permite ao desenvolvedor criar páginas HTML que podem ser visualizadas simultaneamente na janela do browser. na segunda. na qual você irá especificar a quantidade de frames. percentagem ou tamanho relativo. a disposição que eles terão na tela. Como funcionam os frames Ao contrário da maioria dos recursos da linguagem HTML. Com esse recurso.*.200”> Usando valores relativos Para dividir os frames igualmente pela largura da janela do browser. compatível com a versão 2 e superiores do Navigator e do IE.HTM. Na primeira você cria o layout dos frames. Veja a sintaxe deste comando: <FRAMESET COLS=tamanho FRAMEBORDER=1/0 FRAMESPACING=spacing ROWS=tamanho></FRAMESET> Cols=tamanho O atributo cols é usado para criar um documento com frames dispostos em colunas.HTM e C. Em seu lugar é usado o comando <FRAMESET></FRAMESET>. Dentro desse par de comandos são especificados todos os atributos dos frames que serão criados. B. 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. Esse planejamento consiste na criação da estrutura dos frames. Cada frame especificado precisará de um outro comando chamado <FRAME> para definir suas características individuais. O frameset define as características gerais dos frames. a melhor opção é usar um asterisco (*) para cada coluna <FRAMESET COLS=*. Pode ser especificado um valor padrão para todas as colunas ou tamanhos individuais. o uso frames requer um planejamento prévio. HTM. assim como o conteúdo que será exibido em cada um deles.HTML & CSS FRAMES O recurso de frames (janelas). Os valores podem ser especificados em pixels. Esse documento se diferencia dos demais documentos HTML. como sua quantidade e disposição horizontal e vertical.300. Sem o recurso de frames. Trabalhar com frames exige duas etapas. a largura e a altura de cada frame.

para criar um frameset com três colunas de modo que a primeira ocupe 25%. MIDDLE O texto ao redor do frame é alinhado pelo meio do frame. A omissão de bordas é interessante para criar a ilusão de uma única janela. Você pode criar um janela dividida em dois frames horizontais. Como padrão. dando a impressão de que a borda dos frames foi aumentada. onde as partes dessa janela são independentes das outras. as bordas serão omitidas. onde o primeiro deles é dividido em duas colunas. pode-se usar o seguinte comando: <FRAMESET COLS=25%.50% FRAMESPACING=10> O ATRIBUTO <FRAMEBORDER=1/0> Esse atributo tem a finalidade de eliminar as bordas dos frames. O COMANDO <FRAME SRC> Sintaxe: <FRAME ALIGN=posição FRAMEBORDER=1/0 MARGINHEIGHT=altura MARGINWIDTH=largura NAME=nome SCROLLING=yes/no SRC=endereço Align=posição Ajusta o alinhamento do frame ou do texto.100> ROWS=tamanho O atributo ROWS funciona da mesma forma que o atributo COLS. basta aninhar conjuntos de comandos <FRAMESET> O ATRIBUTO <FRAMESPACING=VALOR> Esse atributo tem como finalidade alterar o espaço entre os frames. só que cria os frames horizontalmente. ele apenas distancia um frame de outro pela quantidade de pixels especificada.HTML & CSS A terceira forma de determinar a largura de uma coluna é especificar os valores em forma de percentual. Por exemplo. Os valores permitidos são: TOP O texto ao redor do frame é alinhado pela parte superior do frame. permitindo dividir a tela em áreas coloridas distintas. Tudo o que foi exposto para COLS. LEFT O frame é alinhado à esquerda. aplica-se a ROWS.25% Os diferentes valores podem ser combinados entre si. Se for especificado o valor 0.*. Outro efeito interessante é a mudança da cor de fundo de cada janela. que exibe a borda. Contudo. deixando o texto posicionado _____________________________________________________________________ 21 . O código pode ser o mesmo do exemplo anterior. totalizando 100 por cento <FRAMESET COLS=25%. Combinando ROWS e COLS Pode-se combinar a criação de frames. Para que isso seja possível. A penas a primeira linha deve ser alterada para: <FRAMESET ROWS=50%.50%. ele usa o valor 1. BOTTO O texto aos redor do frame é alinhado pela parte inferior do M frame. a terceira tenha 100 pixels e a outra ocupe o espaço restante. usando os dois atributos.

No caso do comando SCROLLING. de maneira que possa ser identificado e localizado para carregar documentos. de forma a distanciar o conteúdo da janela da sua borda.HTML & CSS RIGHT no seu lado direito. não permite que o frame tenha barras de rolagem quando a janela for redimensionada. 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. _____________________________________________________________________ 22 . um para o menu e outro para os capítulos. Barras de Rolagem e Redimensionamento dos Frames Como padrão. os frames possuem os atributos que permitem seu redimensionamento e a inclusão automática de barras de rolagem quando suas dimensões ficam menores do que o conteúdo a ser exibido. apenas o nome do frame “textos” tem de ser obrigatoriamente especificado. 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. Marginwidht=largura Especifica a largura das margens esquerda e direita do frame em pixels. deixando o texto posicionado no seu lado esquerdo Frameborder=0/1 Idêntico ao atributo de mesmo nome do comando <FRAMESET>. INTERLIGAÇÃO DE FRAMES Até agora você viu como criar um conjunto de frames para exibir documentos independentes um do outro. O frame que conterá o menu principal recebera o nome de “menu”. Ajustando as margens internas do Frame O desenvolvedor pode criar uma margem interna para o frame. Marginheight=altura Especifica a altura da margem superior e inferior do frame em pixels. Para indicar ao browser em qual janela os documentos dos capítulos deverão ser carregados. SRC=endereço Endereço deve ser substituído pelo nome ou URL do documento que será exibido no frame. deve ser usado o comando MARGINWIDTH. deve ser atribuído a ele o valor no para desativar as barras de rolagem. você deve usar os comandos SCROLLING E NORESIZE. Nessa situação. Name=nome Atribui um nome para o frame. deve ser usado o atributo MARGINHEIGHT. ele ativa ou desativa a exibição de borda para o frame atual. Para criar um margem nas laterais da janela. O frame que receberá o nome de “textos”. O tamanho da margem deve ser especificado em pixels. Scrolling=yes/no Esse atributo. Noresize Esse atributo evita que o frame seja redimensionado pelo usuário. quando ajustado para o valor no. Para isso iremos aprender mais alguns itens. Criando a Estrutura dos Frames Esse arquivo contém a definição de dois frames. e nenhum arquivo será previamente carregado. O frame é alinhado à direita. devemos incluir no documento que contém os links um novo comando chamado <BASE TARGET=”nome da janela”> contendo o nome da janela-alvo. Para alterar essas características. Para criar uma margem na parte superior e outra no rodapé do frame.

htm <html> <head> <title>Topo</title> </head> <body> <div align="center"> <img src="images/principal1.HTM>Capítulo 3</A> <LI><A HREF=E. você deve incluir o comando <BASE TARGET>.*"> <frame name="topo" scrolling="no" noresize src=="topo.HTM>Capítulo 2</A> <LI><A HREF=D. que é responsável por indicar ao browser onde os arquivos vinculados pelo comando <A HREF> devem ser carregados. Em nosso exemplo.HTML & CSS Criando o conteúdo do Menu O arquivo de menu contém os links para os capítulos do manual.*"> _____________________________________________________________________ 23 . Nesse documento. ele orienta o browser a carregar os links no frame chamado “textos”.htm"> <frameset cols="150.HTM>Capítulo 5</A> </UL> </CENTER> </BODY> </HTML> Script para o topo. Se esse comando for omitido.gif"> </div> </body> </html> Crie também um arquivo com a estrutura básica do HTML e salve-o com o nome de nada. Veja agora o código para o frame: <html> <head> <title>Frames</title> </head> <frameset rows="64.HTM>Capítulo 4</A> <LI><A HREF=F. 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. os capítulos serão carregados no frame do menu.HTM>Capítulo 1</A> <LI><A HREF=C.HTM>Introdução</A> <LI><A HREF=B.

INFORMAÇÕES ESPECÍFICAS Esse comando das linguagem HTML pode ser usado para criar metainformação ou variáveis.HTML & CSS <frame name="menu" src="menu.</caption> <tr> <td width="100%" height="187" align="center"> <p align="center"><IFRAME SRC="textos. como o nome do autor. palavras-chave. ou pelos mecanismos de busca na Internet. IFRAME O IFRAME é um frame interno que só pode ser utilizado em IE de versão 4 ou superior. informações especificas que serão usadas pelo servidor. data de vencimento ou criação do documento. e seus conteúdos descrevem características do documento HTML.</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. pois ele pode ser colocado no documento e conforme altera-se o documento do IFRAME ele altera na página.htm"> <frame name="textos" src=”nada. _____________________________________________________________________ 24 . é responsável por importantes aspectos de uma página HTML. ele possui os mesmos parâmetros dos Frames. então pode-se colocar qualquer texto ou figura HTML para o usuário. Através dele.htm”> </frameset> <noframes> <body> <p>Esta página usa quadros mas seu navegador não aceita quadros.htm"></iframe></td> </tr> </table> </center> </div> </body> </html> META O comando META é um dos comandos pouco explorados da linguagem HTML. <html> <head> <title>IFRAME</title> </head> <body bgcolor="#000000" text="#FFFFFF"> <p>&nbsp. Contudo. etc. <META HTTP-EQUIV=resposta CONTENT=descrição NAME=descrição URL=url> O comando META deve ser especificado entre os comandos <HEAD> </HEAD>. podemos criar documentos dinâmicos. ele está facilitando a troca de informações em sites de que precisam mudar textos.</p> <p align="center">Utilizando IFRAME</p> <div align="center"> <center> <table border="0" width="80%" height="193"> <caption>&nbsp. em resposta a uma solicitação do usuário.

Os vídeos vão se popularizar mais quando a Internet a cabo se tornar mais acessível. Esse é o propósito deste capítulo. ou aparecer diretamente na página.htm”> Outro grande uso do comando META é para que possa ser usado para as consultas em mecanismos de busca. A maneira mais simples de incluir um clipe de vídeo em sua página é utilizar as opções do comando IMG. INSERINDO UM VÍDEO Existem várias maneiras de inserir um vídeo em sua página. <meta name="description" content="Site sobre Informática"> <meta name="keywords" content="Photoshop. 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. Dreamweaver. Se uma imagem de 70Kb pode levar vários segundos. Fireworks. executa o programa responsável pela sua exibição. e conhecendo o Windows todos sabemos de sua capacidade em trabalhar com multimídia.Flash. a velocidade de transferência de informações via Internet. 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. O vídeo pode aparecer sob a forma de um link que ao ser clicado. ou até mesmo minutos para ser carregada imagine a execução de um clipe de vídeo com mais de 1MB. vamos aprender a trabalhar com os elementos multimídia em nossas páginas. Os principais elementos multimídia para uma aplicação são: • Fotos ou imagens estáticas • Animação • Áudio • Vídeo CONSIDERAÇÃO NO USO DE MULTIMIDEA O grande inimigo da utilização de multimídia é o mesmo relacionado com as imagens. como o Windows. O principal parâmetro usado para inserir vídeo é a DYNSRC. A maioria dos usuários que acessa a Internet faz isso a partir de ambientes gráficos. Por exemplo o usuário acessa uma página que exibe informações sobre a empresa. estes atributos estão na tabela abaixo: Atributo Finalidade Exemplo _____________________________________________________________________ 25 . URL=arquivo.HTML & CSS VARIAÇÕES DO COMANDO META Usar o recurso do autocarregamento é indicado quando você deseja exibir alguma informação inicial e depois outra informação. Isso é possível da seguinte forma: <META HTTP-EQUIV=”Refresh” CONTENT=”5 . depois de um tempo carrega outra página. 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. Que permite a criação de documentos com ligações para outros contidos em qualquer computador ligado à Internet.

avi” vezes o vídeo será DYNSRC=”vídeo.com. Como carregado. ou vídeo é ou RIGHT alinhado a esquerda ou direita da página ALT=texto <IMG SRC=”video.avi” margem horizontal em HSPACE=10 VSPACE=10> volta da imagem para afastá-la do texto que a envolve Especifique quantas <IMG SRC=”vídeo.avi” ALT=”figura alternativo para ser exibida”. vídeo que será DYNSRC=”vídeo.avi” LOOP=3> o executado. O texto que margeia a MIDDLE. ALIGN=LEFT A imagem. Especifica um texto IMG SRC=”video.avi” vídeo. exibido no local do vídeo Especifica a largura da <IMG SRC=”vídeo. é executado o número de vezes especificado. Especifica o endereço <IMG SRC do vídeo http://www. é BORDER=n CONTROLS DYNSRC=URL HEIGHT=n HSPACE=n LOOP=n LOOP=INFINIT E SRC START= FILEOPEN/ MOUSEOVER <IMG SRC=”video. Se n for vídeo é executado três vezes. igual a –1 ou INFINITE.FILEOPE executado N> imediatamente após _____________________________________________________________________ 26 .avi” borda em pixels do BORDER=5>Esta imagem possui vídeo borda de 5 pixels de largura.avi” FILEOPEN e é START=MOUSEOVER. ou imagem é alinhado BOTTOM pelo topo.avi” ALIGN=MIDDLE>Este texto alinhado pelo meio da figura. meio ou base do vídeo.gif” assume o valor DYNSRC=”vídeo. Se o vídeo WIDTH=150 HEIGHT=200> possuir outro tamanho será ajustado para o tamanho especificado Especifica uma <IMG SRC=”vídeo.br/video.avi” controle do tipo vídeo CONTROLS> cassete Especifica o URL do <IMG SRC=”vide.hardcore. Exibe botões de <IMG DYNSRC=”vídeo. o vídeo será executado continuamente.avi”> exibido.HTML & CSS ALIGN=TOP. padrão. Caso contrário.avi” START= especifica quando o FILEOPEN> vídeo deve ser O vídeo é executado ao ser executado.gif”. Especifica a altura do <IMG SRC=”vídeo.avi” ALIGN=RIGHT>Este texto aparece do lado esquerdo da imagem. avi> Para clips de vídeo DYNSRC=”vídeo. o vídeo <IMG SRC=”vídeo.

asf"></embed> <HR> <embed src="ambulancia.avi” VSPACE=10> <IMG SRC=”vídeo. em pixels Especifica a largura da Imagem <IMG SRC=”video.mpeg"></embed> _____________________________________________________________________ 27 . Ele funciona tanto no Internet Explorer quanto no Netscape Navigator. Especifica uma margem.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. use o comando <NOEMBED> para exibir uma mensagem indicando que o browser não tem capacidade para exibir o objeto.avi" START="fileopen" Loop="Infinite"> <HR> <embed src="admiradora. vertical para o 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. <html> <head> <title>Multimidea</title> </head> <body> <IMG DYNSRC="Cyclers. O valor MOUSEOVER faz com que o vídeo seja executado quando o cursor passa sobre a área da imagem do vídeo. Sintaxe: <EMBED ALIGN=”LEFT” | “RIGHT” | “TOP” | “BOTTOM” BORDER=”pixels” FRAMEBORDER=”NO” 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.HTML & CSS VSPACE=n WIDTH=n seu carregamento .

Se for especificado um número. _____________________________________________________________________ 28 . ALTERNAT Cria um efeito de movimento para o E texto. indica a largura com relação à janela por meio da porcentagem. SCROLL Inicia a rolagem introduzindo o texto de um lado e rola o texto até que ele saia completamente da janela no lado oposto ao que começou. Pode ser especificado também o valor RIGHT que inverte o sentido de deslocamento.HTML & CSS </body> </html> MARQUEE O Internet Explorer introduziu um comando muito simpático chamado MARQUEE. HEIGHT=n Especifica a largura do painel. ele é considerado como quantidade de pixels. Se for seguido do sinal %. que inicia de um lado. o texto reaparece no canto inicial repetindo continuamente o processo. como será a sua rolagem pela janela. é assumida a cor de segundo plano atual. entrando pela borda da janela e. ou a área do MARQUEE. Quando a primeira letra do texto bater na borda. que faz o texto deslocar-se do canto direito da janela para o canto esquerdo. o texto para de rolar e permanece naquela posição. Caso não seja especificada uma cor. Pode conter os seguintes valores: TOP Alinha o texto pela sua parte superior MIDDLE Alinha o texto pelo meio BOTTOM Alinha o texto pela sua parte inferior BEHAVIOR=tipo Especifica o comportamento do texto. DIRECTION=direção Especifica a direção que o texto vai usar para o deslocamento. ou seja. BGCOLOR=cor Especifica a cor do texto do Segundo plano. Após a ultima letra ter saído da tela. inverte o seu deslocamento voltando para a borda inicial. que faz com que um texto especificado fique rolando em uma determinada área da página. SLIDE Inicia a rolagem introduzindo o texto de um lado e rola o texto até que ele atinja a borda oposta. O padrão é LEFT. ao bater na outra borda. Pode conter os seguintes valores. Veja na tabela abaixo a sintaxe do comando MARQUEE ALIGN=posição Especifica como o texto que envolve o marquee será alinhado.

SCROLLAMOUNT= Indica a quantidade de pixels que será usada para n deslocar o marquee a cada movimentação. foi adicionados uma quebra de linha com o comando <BR> entre os dois e delimitada uma largura. O segundo exemplo é uma variação do primeiro. WIDTH=n Especifica a altura do painel. Se for especificado um número. criando um painel de três linhas. Eles partem das bordas e colidem no centro da página. três marquees são colocados um abaixo do outro. LOOP=n Especifica quantas vezes será executado. Combinando a utilização de vários Marquees Você pode criar alguns efeitos interessantes combinando o uso de vários marquees. Os primeiros dois marquees são colocados lado a lado com o texto rolando em posição contrária. para afasta-lo do texto ou outros objetos que o cercam. Antes. Eles podem ser colocados lado a lado ou um sobre o outro para a criação de um marquee com várias linhas.HTML & CSS HSPACE=n Especifica a largura em pixels das margens esquerda e direita. 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. 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. Infelizmente. VSPACE=n Especifica em pixels a margem superior e inferior do marquee. porém. ele é considerado como quantidade de pixels.a Netscape deixou de incorporar esse comando à versão 4 do seu browser. Porém. SCROLLDELAY=n Especifica em milissegundos o tempo entre cada deslocamento do texto. Se for seguido do sinal %. Se o valor de n for –1 ou INFINITE ele será executado continuamente. No terceiro exemplo. <html> <head> <title> Combinando vários Marquees</title> </head> <body bgcolor="#FFFFFF"> <marquee height="15" width="300" behavior="Scroll" bgcolor="#FFFF00" loop=infinite> É fácil juntar dois Marquees</marquee> <marquee height="15" width="300"behavior="Scroll" bgcolor="#00FF00" loop=infinite> É fácil juntar dois Marquees</marquee> <hr> <body bgcolor="#FFFFFF"> <marquee height="15" width="200" behavior="Scroll" bgcolor="#FFFF00" loop=infinite> É fácil juntar dois Marquees</marquee> <br> <marquee height="15" width="200" behavior="Scroll" direction="right" direction="Left" direction="right" direction="Left" _____________________________________________________________________ 29 . ou área do marquee.

A primeira é através de hiperlinks. o uso de som também enfrenta problemas de velocidade de transmissão devido às limitações da rede ou do browser. o que o torna problemático para ser executado quando não existe boa velocidade de transmissão entre o browser e o servidor. permite transmissões ao vivo e quando executado. devido ao tamanho dos seus arquivos. vejam quais são eles: AU: Esse formato é dominante na plataforma Unix e é compatível com quase todas as demais plataformas. Sua vantagem é que ele possui um tamanho extremamente reduzido e oferece ótima qualidade para música orquestrada. RAM ou RA: É o formato RealAudio. e está se tornando muito popular. pois permite a execução sob demanda. WAV: Formato padrão de som da plataforma Windows – oferece boa qualidade de som. Existem vários tipos de formatos para arquivos de áudio. ou imagens. ou seja. MIDI: Esse formato é um padrão para a representação de instrumentos musicais produzidos por um instrumento eletrônico. 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. MP3: Esse formato. Ao contrário dos formatos anteriores.HTML & CSS 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 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. ele não é compatível com voz. _____________________________________________________________________ 30 . todos os formatos de MPA são arquivos de áudio compactados. a segunda através do comando META e. podemos usar duas técnicas para incluir áudio na página. Inserindo Áudio Assim como no caso dos clipes de vídeo. Seu tamanho é menor do que os arquivos WAV e com qualidade superior. porém gera arquivos de tamanho muito grande. 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. Menos problemático do que o uso do vídeo. É adequado para instrumentos e voz. ou seja. como um sintetizador. através de comandos específicos. porém quatro ou cinco deles dominam o mercado e são compatíveis com a maioria dos browsers atuais. Existe hoje na Web uma procura enorme em arquivos MP3. a partir de um arquivo. reproduz o som à medida que ele vai sendo lido. equivalentes aos arquivos de vídeo MPEG. dependendo do browser.

LOOP=n Especifica quantas vezes <BGSOUND SRC=”ring.WAV</a>.wav"> do tipo . JAVA é uma linguagem de programação desenvolvida inicialmente pela SUN.mp2"> no formato . e a sua construção é bastante complexa e Javascript é uma linguagem de scripts desenvolvida inicialmente pela Netscape. <a href="gamel. assim que a página é acessada.au” o arquivo será LOOP=3> reproduzido.HTML & CSS <html> <head> </head> <body bgcolor="#FFFFFF"> <a href="mission2.au” arquivo de áudio que será executado.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. Com certeza você já deve ter ouvido falar nele. Ele carrega e executa imediatamente um arquivo de som. Uma vez iniciada a execução do som.mid"> <body bgcolor="#FFFFFF"> <font color=Red> <h1> O comando BGSOUND </h1> </font> </body> </html> JAVA Java. pois são coisas totalmente distintas. Primeiramente nunca devemos confundir JAVA com Javascript. Bom vamos agora aprender a incorporar programas de Java (classes) no documento HTML. LOOP=INFINITE O valor INFINITE reproduz Executa o arquivo o arquivo continuamente infinitamente Veja um exemplo abaixo: <html> <head> </head> <bgsound src="africa.au">no formato . _____________________________________________________________________ 31 . A sintaxe é: Atributo Finalidade Exemplo SRC= URL Especifica o endereço do <BGSOUND SRC=”ring.AU</a> ou <a href="eg-follow. pode-se interrompê-la pressionando a tecla ESC ou mudando de página.

... Todos os Applets que serão mostrados aqui foram adquiridos na própria WEB. colocar a largura e a altura da área ocupada pelo mesmo nos parâmetros WIDTH E HEIGHT e em CODEBASE você pode especificar o diretório (no servidor WEB) onde ficarão só seus applets.w3.org/Style/CSS/ ) até a sua versão atual a 2(dois).Positioning. VERSÕES DA CSS A CSS evoluiu nos últimos anos sob a orientação do W3C ( www.. Essa primeira versão incluía a capacidade de núcleo associada às CSS. porém. Embora a maioria dos browsers modernos suporte a versão mais recente..htm.> </APLLET> O elemento HTML de um applet é bem simples...VALUE=.... Uma vez transferido para o seu computador. o browser executa o aplicativo da forma configurada na página e exibe o resultado na sua tela. Esse padrão de destinava a ser uma proposta que seria discutida pelas várias partes envolvidas antes de ele ser oficializado.... CSS – Positioning (CSS-P) Os criadores da WEB precisavam de uma forma de posicionar os elementos na tela de forma precisa. <APPLET CODE=. tais como a capacidade de formatar texto.. Tal como as imagens referenciadas em sua página. WHIDTH=.HTML & CSS ELEMENTO HTML PARA APPLETS JAVA Os applets Java são arquivos com extensão “. um applet também precisa ser transferido para o seu espaço de home page no seu provedor..1 O W3C lançou a primeira versão oficial da CSS em 1996. 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. CODEBASE=.. Ele permite que você possa criar o seu applet e depois copiar o código e colar diretamente dentro do HTML.. os browsers mais antigos suportam as combinações das versões antigas da CSS. de modo que a W3C lançou uma solução intermediária: A CSS.com/index. a CSS é um código separado que amplia as capacidades da HTML. não é HTML. Elas são: CSS . A CSS 1 já havia sido lançada e a CSS-2 ainda estava distante. 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.> <PARAM NAME=.VALUE=.. HEIGHT=. Embora a metodologia da CSS funcione com a HTML.class” que o browser carrega junto com a sua página.. definir fontes e margens. Tudo que você tem a fazer é colocar o nome do arquivo “.> <PARAM NAME=. e incluíram as idéias preliminares nas versões 4 de seus _____________________________________________________________________ 32 ..> <PARAM NAME=.class” correspondente ao applet no parâmetro CODE. Um dos programas mais conhecidos para a criação de applets é ANFY que pode ser baixado no seguinte link: http://anfyteam. Em vez disso. A Netscape e a Microsoft assumiram essas propostas. Vamos agora utilizar alguns applets mais comuns utilizados pela Web.VALUE=. permitindo que você redefina o modo como as tags HTML funcionam.

Exemplo: p {font: bold 12pt times. você ainda tema liberdade de definir os estilos dentro das TAGS individuais. Exemplo: #objeto{font bold 12pt times. porém. Os seletores de ID.minhaclasse{font bold 12pt times. Existem três etapas na regras da CSS. levando o poder dos gráficos baseados no vetor e na tipografia à WEB.} Classe: Uma classe é uma regra de “agente livre” que pode ser aplicada a qualquer tag HTML de acordo com a sua vontade."> <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> _____________________________________________________________________ 33 . ou pode criar regras genéricas e. 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. Sem dúvida. Podemos definir regras que dizem a uma tag HTML especifica o seu conteúdo. 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. porque podem ser aplicadas. Você pode dar à classe o nome que quiser. CSS – 2 A versão mais recente da CSS surgiu em 1998. Não exige plug-ins ou softwares diferente – apenas regras. Uma classe é o tipo de seletor mais versátil. Isso é particularmente útil para substituir cada um dos outros estilos que estão definidos para a página.HTML & CSS navegadores.} ID: As regras de ID funcionam como os seletores de classe. em seguida. Esse é um formato que permite incluir formas (linhas. aplicá-las às TAGS como quiser. CSS – 3 Este padrão ainda está em desenvolvimento. Seletor HTML: A parte de texto de uma TAG HTML se chama seletor. Veja o exemplo abaixo: <html> <head> <title>CSS</title> </head> <body style="background-color:black. Exemplo: . A partir do IE e Netscape 6 suportam CSS 2.} INCLUINDO CSS NO DOCUMENTO Embora a CSS signifique nunca ter que definir a aparência de cada tag individualmente. Embora a maioria dos recursos básicos sejam suportados em ambos os browsers como o nome de “marca” diversos recursos forma deixados de fora. a nova adição será o Scalable Vector Graphics (SVG). e mesmo após o lançamento geralmente leva alguns anos para que os navegadores suportem o padrão. REGRAS DA CSS O melhor da folha de estilo em cascata é que ela é incrivelmente fácil de configurar. círculos. curvas e outras). como vetores e não bitmaps. a qualquer Tag HTML.

Em primeiro lugar. a colocação dos estilos em uma localização comum permite alterar os estilos de um documento a partir de um único lugar.} --> </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. configure as regras em um arquivo de texto. _____________________________________________________________________ 34 .} h1{color:red. Você pode aplicar essa folha de estilo externa a uma centena de documentos HTML. Para fazer isso.HTML & CSS 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.} h2{color:yellow.} p{color:white. Embora os resultados do acréscimo de estilo dessa forma possam parecer idênticos ao acréscimo dos estilos diretamente em uma TAG HTML. mas através de todo um site da WEB. você deve inclui as regras de estilo no título do documento aninhado dentro de um conteiner de estilo. O estabelecimento de um arquivo de CSS externo é um processo de duas etapas. Veja o mesmo exemplo acima como ficaria: <html> <head> <title>CSS</title> <style type="text/css"> <!-body{background-color:black. Em seguida.

} h2{color:yellow. 150px. 150px. 150px.dashed.4 Thin. Veja o mesmo exemplo: Arquivo CSS: body{background-color:black.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 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 Exemplo de Atributo Absolute ou relative 10in.} p{color:white. 30 cm 10in.3. 30 cm 10in.2. medium.} Arquivo HTML <html> <head> <title>CSS</title> <link rel="stylesheet" href="configura.soli _____________________________________________________________________ 35 . 30 cm 10in.17 1. 150px. thick Yellow.5. o arquivo que contém as formatações deve possuir a extensão CSS.HTML & CSS configure as regras em um arquivo e vincule ao seu documento HTML.4 2.dotted.} h1{color:red.#00FFAA None.3. 30 cm 1.10.2.

0. eles podem ser designados a qualquer TAG HTML que se aplique. lighter.10cm.thick Atributos de Fontes Elemento Font-family Font-size Font-style Font-weight Definição Fonte que será mostrar o texto Tamanho da Fonte Estilo Peso da fonte usada Exemplo de Atributo para Helvetica. 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 (. top. blink Middle..1cm.medium. Arial.. Em seguida. com uma condição: as propriedades definidas para a classe devem funcionar com o tipo de tag com a qual você a usa. 5in Normal. Ela é uma classe independente e você pode usá-la com qualquer TAG HTML. O nome pode ser uma palavra ou qualquer conjunto de letras ou números que você quiser. _____________________________________________________________________ 36 . Courier 12pt.center. Por exemplo podemos criar uma classe chamada .double Thin.</p>.copy{. right 200%. underline. 2 pt None. sub.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.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 do ID. Para aplicar a sua classe a uma tag HTML inclua class=”nome” na tag na qual você deseja aplicar a classe. Exemplo: <p class=”copy”>. italic Bold. 1.100. o seletor de ID pode ser usado para criar estilos exclusivos que são independentes de qualquer TAG HTML em particular. abra a sua definição com uma chave ({) O nome da classe pode ser o que você quiser.) e um nome de classe. desde que use letras e números. 5pt 0.#ffffcc Imagem. DEFININDO IDS Assim como o seletor de classe. Assim sendo.1em. sem seguida. As regras de ID sempre começam com (#) e.HTML & CSS Broder-width Largura da borda do quadro d.2. super Left.#ffffcc Marrom.

Um ID não funcionará até ser especificada com uma TAG HTML individual dentro de um documento..} --> </style> </head> <body> <div class="menu"> <a href="anterior. Teste de parágrafo.</p>. text-decoration:underline.”> <ilayer>:Equivalente à <span style=”position:absolute.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.} div. Você pode usar um ID com qualquer tipo de propriedade. Teste de parágrafo. <a href="curioso. uma dentro da outra.htm">Próximo Capítulo &gt.} <P id=”area”>. Você pode digitar quantos seletores. font-size:20. Capitulo Anterior</a> <a href="proximo. text-decoration:none. mas o último seletor da lista é aquele que recebe todos os estilos da regra. mas o melhor uso para os seletores de ID é para definir os objetos exclusivos na tela. a TAG externa é chamada de pai e a interna de filha. Teste de parágrafo.position:relative.htm">&lt.</a> </div> <hr> <h3>Novo Capítulo</h3> <p>Teste de parágrafo. são chamadas de tags aninhadas.”> DEFININDO TAGS DENTRO DO CONTEXTO Quando uma TAG é cercada por outra TAG. Veja o exemplo abaixo: <html> <head> <title>Tags Aninhadas</title> <style type="text/css"> <!-p a:link{color:red.menu{color:#900. _____________________________________________________________________ 37 . Teste de parágrafo. HTML quiser para quantos pais e TAGS aninhadas diferentes tiver.} p{font:12px. a qual é separada com um dos pares de tags de duas camadas: <layer>: Equivalente à <div style=”position:absolute. font-weight:bold. Em um conjunto aninhado. Exemplo: #area{color:red.HTML & CSS Digite as suas definições para essa classe separando-as com um ponto e vírgula.margin-left:9em. Teste de parágrafo.. LAYERS Uma camada do Netscape é uma parte independente do conteúdo da WEB que há dentro de um documento HTML. Digite o seletor HTML da TAG pai seguida por um espaço.

a maioria das pessoas quer imprimir pelo menos algumas páginas da WEB.css" media="screen"> <link rel="stylesheet" href="impressao.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. h1.jpg) no-repeat. O que parece bem na tela nem sempre é bom quando impresso. Veja os códigos abaixo: CSS para Tela: body{ color:white. mais cedo ou mais tarde.} Código no HTML: <html> <head> <title>Midias Diferentes</title> <link rel="stylesheet" href="tela. pensa nessas páginas exibidas na tela. 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.} . Entretanto.HTML & CSS Para forçar que uma definição seja sempre usada abra uma regra da CSS com um seletor e uma chave ({). O Netscape 4 não suporta !important Exemplo: p{ font-size:12px !important.h2{ font-weight:bold.h2{ font-weight:bold. uma otimizada para o uso em uma tela de computador e outra adaptada para a impressão.cassea{ color:#999999. background:black url(images/backarvore. Assim sendo. Crie duas folhas de estilo (arquivos. digite uma definição de estilo. !important e um ponto e vírgula para fechar a definição. font-family:Arial. Na verdade.} h1.} DEFININDO A CSS PARA IMPRESSÃO Quando a maioria das pessoas pensam em páginas WEB. um espaço. 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. uma página da WEB pode conter diversas páginas impressas. _____________________________________________________________________ 38 .css).cassea{ color:#999999.} . font-family:Arial.} CSS para Impressão: body{ color:black.

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

Fixed: Instrui para que a figura fique fixa ou seja não role com o site. um valor hexadecimal de cor ou um valor RGB.color:brown.jpg) no-repeat fixed center. url(imagem/figura.copia{line-height:2.} h2{background-color:yellow. 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.kerning{letter-spacing:2em} --> </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.HTML & CSS . Alternativamente pode-se usar none em vez de url. Repeat-y: Instrui o browser para repetir o gráfico de segundo plano na vertical. color:white. Scroll: Instrui para que a imagem role junto com a tela.jpg)  Para utilizar uma figura de fundo podemos definir a localização do arquivo. 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.} . No-repeat: faz com que o gráfico de segundo plano apareça apenas uma vez.} --> </style> _____________________________________________________________________ 40 .} .copia{background-color:orange.titulo{word-spacing:8px.color:red. 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. Esse valor pode ser o nome da cor.} . ele instrui a browser a não utilizar uma imagem de segundo plano. Exemplo: <html> <head> <title>Cores e planos de fundo</title> </head> <style type="text/css"> <!-body{background:black url(images/astalavistagrouplogo3.

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"> <!-. os designers de toda parte estavam maravilhados. Também é possível definir a borda do elemento em cada lado da caixa individualmente. quando a capacidade de fazer o texto flutuar ao redor de um gráfico foi incluída. border-style. border-color:red.double{border-style:double. border-width:15px} . o estilo e/ou a cor. você pode usar border para definir a largura. border-color. As principais propriedades para bordas são: border-width.} td{text-align:center.} --> </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 No inicio do desenvolvimento HTML.inset{border-style:inset. border-color:orange. border-width:10px. A _____________________________________________________________________ 41 .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.

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

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

scroll.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. margin:5px.} --> </style> </head> <body> <div class="recorte"><img src="images/worldmap.over{ width:250px. 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"> _____________________________________________________________________ 44 .com.overflow(auto. left:0px.jpg" align="left"></div> <div class="over"><img src="images/worldmap. top:0px. height. overflow:auto. clip:rect(15 100 95 50).recorte{position:absolute.} . height:150px. float:right. hidden e visible) Exemplo: <html> <head> <title>Recortando a imagem</title> <style type="text/css"> <!-.HTML & CSS Para definir o controle do overflow use: width.superdownloads.br . 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. scrollbar-darkshadow-color:#004080. } --> </STYLE> _____________________________________________________________________ 45 . scrollbar-highlight-color:#FFFFFF. scrollbar-track-color:#E0E0E0.HTML & CSS <!-BODY { scrollbar-face-color:#8080FF. scrollbar-shadow-color:#0000FF. scrollbar-arrow-color:#FFFFFF.

DIVULGUE O SEU SITE E OBSERVE OS ACESSOS Procure cadastrar o seu site em todos os mecanismos de busca possíveis. relacionadas aos assuntos principais. com bom conteúdo atualizado constantemente o seu site tem boas chance s de ser bem visitado. para que você tenha algum sucesso em seu site. Isto além de facilitar o seu trabalho também facilitará ao visitante a navegação pelo seu site. 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. Evite também percursos longos até o destino desejado. outra em segui verde-limão.). então procure diminuir ao máximo tamanho de imagens. etc. <HEAD></HEAD>: delimita o cabeçalho de uma página. e saber HTML não é o suficiente.. se ele estiver baixo com certeza alguma coisa nele está errada. DIVIDA O SEU SITE Divida o seu site em seções principais. 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á. 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.HTML & CSS CUIDADOS NA CONSTRUÇÃO DE UM SITE Construir um site interessante é um grande desafio. Linux. 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.. e verifique se possível ( alguns provedores de hospedagem dão esta opção) verifique sempre ao cesso ao seu site. _____________________________________________________________________ 46 . Se você fizer algo focado em um público em especial. pare pegue papel e caneta e desenhe o seu site para que ele não fique totalmente fora de foco. se for usar fontes escuras use fundos mais claros e vice versa e não faça uma página rosa choque. 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. pois com certeza a internauta que visitar o seu site vai acabar desistindo no meio do caminho. Então antes de sair criando códigos de HTML. etc.. Mac. o mesmo deve oferecer algo atualizado e interessante.. GLOSSÁRIO <HTML></HTML>: Marca início e fim de uma página. Ao criar bookmarks (indicadores) lembre-se de que ao final de cada assunto criar um link para o inicio da página. 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.

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

Sign up to vote on this title
UsefulNot useful