HTML e CSS

Profesora: Iara Fernandes Ribeiro Aluna: Camila Vieira de Pontes Turma: C911M em 2007
Colgio e Faculdade Mercrio - HTML & CSS Professora Iara Fernandes Ribeiro
INDICE
INDICE...................................................................................................................................................................................2 INTRODUO.....................................................................................................................................................................3 CUIDADOS NA CONSTRUO DE UM SITE...............................................................................................................4 TRACE METAS....................................................................................................................................................................4 FAA UM ESBOO ...........................................................................................................................................................4 DIVIDA O SEU SITE..........................................................................................................................................................4 ACESSO DIRETO A INFORMAO.........................................................................................................................................4 EVITE SITES TIPO CARNAVAL.............................................................................................................................................5 NO SE PRENDA A PLATAFORMAS......................................................................................................................................5 DIVULGUE O SEU SITE E OBSERVE OS ACESSOS......................................................................................................................5 COMO SE CRIA UM DOCUMENTO HTML.............................................................................................................................5 TAGS, MARCAS OU ELEMENTOS HTML...............................................................................................................................6 ESTRUTURA BSICA.......................................................................................................................................................7 DESCRIO DOS ELEMENTOS BSICOS DO HTML:................................................................................................................7 COMENTRIOS...............................................................................................................................................................8 CARACTERES ESPECIAIS...................................................................................................................................................8 CRIANDO O PRIMEIRO DOCUMENTO HTML.........................................................................................................................9 FORMATANDO CABEALHOS.................................................................................................................................10 PARGRAFOS E QUEBRAS DE LINHA..................................................................................................................................10 O COMANDO <BR>....................................................................................................................................................11 O COMANDO <P>.......................................................................................................................................................11 ALINHANDO PARGRAFOS...............................................................................................................................................11 O COMANDO <HR>....................................................................................................................................................11 USANDO IMAGENS COMO LINHAS SEPARADORAS.............................................................................................12 DIV .........................................................................................................................................................................12 BLOCKQUOTE...............................................................................................................................................................13 ESTILOS DE TEXTO E FONTE.....................................................................................................................................14 APLICANDO CORES E TAMANHOS NO TEXTO....................................................................................................................15 ALTERANDO O TAMANHO DA FONTE..................................................................................................................................15 Size................................................................................................................................................................................15 Face...............................................................................................................................................................................15 Color.............................................................................................................................................................................15 CABEALHOS...................................................................................................................................................................18
ALINHANDO CABEALHOS ...............................................................................................................................................18
LISTAS.................................................................................................................................................................................19 LISTAS ORDENADAS......................................................................................................................................................19 LISTAS NO ORDENADAS...............................................................................................................................................20 LISTA DE DEFINIO.....................................................................................................................................................20 IMAGENS............................................................................................................................................................................22 O COMANDO IMG..........................................................................................................................................................22 MARQUEE..................................................................................................................................................................24 Combinando a utilizao de vrios Marquees............................................................................................................26 URLS E LINKS...................................................................................................................................................................28 URL.........................................................................................................................................................................28 Criando um Link com Arquivos Locais........................................................................................................................28 Usando uma Imagem como Hiperlink..........................................................................................................................29 Vinculando Arquivos de outros diretrios...................................................................................................................29 CRIANDO LINKS PARA SEES DE UMA PGINA............................................................................................29 Criando uma ncora....................................................................................................................................................29 ENVIANDO E-MAIL DIRETAMENTE DA PGINA HTML........................................................................................................29 DEFININDO DESTINOS....................................................................................................................................................30
Colgio e Faculdade Mercrio - HTML & CSS Professora Iara Fernandes Ribeiro 2
Colgio e Faculdade Mercrio - HTML & CSS Professora Iara Fernandes Ribeiro TABELAS............................................................................................................................................................................31
ELEMENTOS BSICOS DE TABELAS .....................................................................................................................................31
PARMETROS...............................................................................................................................................................32 Parmetros do elemento <TABLE>............................................................................................................................32 Parmetros do elemento <TR>....................................................................................................................................33 Parmetros dos Elementos <TD> e <TH>.................................................................................................................34 FRAMES..............................................................................................................................................................................35 Como funcionam os frames..........................................................................................................................................36 O Comando Document.................................................................................................................................................36 O Comando FRAMESET..............................................................................................................................................36 Cols=tamanho..............................................................................................................................................................36 ROWS=tamanho...........................................................................................................................................................37 Combinando ROWS e COLS........................................................................................................................................37 O ATRIBUTO <FRAMESPACING=VALOR>...................................................................................................................37 O ATRIBUTO <FRAMEBORDER =1/0>.................................................................................................................................38 O COMANDO <FRAME SRC >........................................................................................................................................38 Ajustando as margens internas do Frame....................................................................................................................39 Barras de Rolagem e Redimensionamento dos Frames..............................................................................................39 INTERLIGAO DE FRAMES..............................................................................................................................................40 Criando a Estrutura dos Frames..................................................................................................................................40 Criando o contedo do Menu.......................................................................................................................................40 IFRAME..................................................................................................................................................................42 META...................................................................................................................................................................................43 INFORMAES ESPECFICAS.............................................................................................................................................43 VARIAES DO COMANDO META......................................................................................................................................43 MULTIMIDEA....................................................................................................................................................................44 CONSIDERAO NO USO DE MULTIMIDEA............................................................................................................................44 INSERINDO UM VDEO.....................................................................................................................................................44 ATRIBUTOS UTILIZADOS EM VDEOS..................................................................................................................................45 USANDO O COMANDO EMBED PARA EXIBIR VDEO............................................................................................................46 O comando NOEMBED................................................................................................................................................47 SOM..........................................................................................................................................................................47 Inserindo udio............................................................................................................................................................48 Inserindo udio atravs de Hiperlinks........................................................................................................................48 INSERINDO MSICA DE FUNDO.........................................................................................................................................49 O comando BGSOUND (Internet Explorer)................................................................................................................49 GLOSSRIO.......................................................................................................................................................................50
GLOSSRIO ............................................................................................................ 55
INTRODUO A Internet , sem dvida alguma, a grande exploso da atualidade, onde a cada dia surgem mais e mais home pages de universidades, empresas, tendncias, jornais, lojas e tudo o mais que se possa imaginar. At pouco tempo, era impossvel atingir um grande pblico com tanta facilidade e rapidez. Com a WWW, tudo fica fcil. Porm, surgem alguns desafios e responsabilidades. O grande desafio, ser suficientemente interessante, para que as pessoas queiram visitar
novamente. A grande reponsabilidade oferecer algo de valor ou interesse para a comunidade alvo, e lembrar que nem todo mundo possui conexo de alta velocidade. Se quiser atrair a ateno das pessoas, voc precisa ser criativo, corts e interessante. Construir um site interessante um grande desafio, e saber HTML no o suficiente, ento, antes de entrarmos nos detalhes da criao de pgina, vamos ver alguns cuidados na construo de um site. CUIDADOS NA CONSTRUO DE UM SITE TRACE METAS Para que voc tenha algum sucesso em seu site, o mesmo deve oferecer algo atualizado e interessante. Se voc fizer algo focado em um pblico em especial, com bom contedo atualizado constantemente o seu site tem boas chance s de ser bem visitado. Portanto antes de fazer uma pgina planeje bem o que voc quer colocar em seu site por que se um internauta o visitar e no ver algo que o interesse com certeza ele no voltar. FAA UM ESBOO Organizar um site uma das formas mais fceis de garantir um bom resultado final. Ento antes de sair criando cdigos de HTML, pare pegue papel e caneta e desenhe o seu site para que ele no fique totalmente fora de foco. DIVIDA O SEU SITE Divida o seu site em sees principais, relacionadas aos assuntos principais. Isto alm de facilitar o seu trabalho tambm facilitar ao visitante a navegao pelo seu site.
ACESSO DIRETO A INFORMAO Evite sites labirintos em que o visitante fica navegando de um lado para outro e nunca consegue encontrar o que realmente deseja. Evite tambm percursos longos at o destino desejado, pois com certeza a internauta que visitar o seu site vai acabar desistindo no meio do caminho. Ento para facilitar ao mximo a navegao por seu site crie barras de navegao se possvel com links para todas a sees. Ao final de cada assunto criar um link para o inicio da pgina.
EVITE SITES TIPO CARNAVAL Procure seguir um padro entre as suas pginas, se for usar fontes escuras use fundos mais claros e vice versa e no faa uma pgina rosa choque, outra em seguida verde-limo, etc... NO SE PRENDA A PLATAFORMAS Voc no pode esquecer que os internautas usam diversos tipos de sistemas (Windows, Mac, Linux, etc...), ento procure diminuir ao mximo o tamanho de imagens, usar uma resoluo de tela que voc sabe que no dar problema na maioria das telas e se possvel testar o seu site em diversos sistemas operacionais. DIVULGUE O SEU SITE E OBSERVE OS ACESSOS Procure cadastrar o seu site em todos os mecanismos de busca possveis, e verifique se possvel ( alguns provedores de hospedagem do esta opo) verifique sempre o cesso ao seu site, se ele estiver baixo com certeza alguma coisa nele est errada.
COMO SE CRIA UM DOCUMENTO HTML Para fazer Home Pages, voc ter que aprender pelo menos um pouco de HTML (Hipertext Markup Language) - Linguagem de Hipertexto Baseada em Marcas. Apesar da palavra linguagem, que leva a associao com linguagens de programao, no se assuste, voc vai perceber que gerar documentos HTML bastante fcil e parecido com formatao de textos. Para que qualquer computador pudesse entender os documentos HTML, sem as complicaes que trazem os caracteres de controles e coisa do tipo, foi definido que estes documentos deveriam ser gerados no formato mais simples possvel, o formato txt.
Desta forma, documentos HTML podem ser gerados por qualquer editor de textos, desde que gravados no formato texto e com extenso.Htm ou .html. Uma pgina Web composta de textos e comandos especiais que so chamados de (tags). Assim como qualquer linguagem, o programador deve escrever o cdigo-fonte seguindo as regras da linguagem. Esse cdigo-fonte posteriormente interpretado pelo browser, que se encarregar de executar os comandos (tags) do cdigo para formatar e acessar recursos da Web. O cdigo fonte pode ser escrito usando-se o mais simples dos editores de texto. Podemos usar o Bloco de Notas para esta tarefa. Mas existem outros editores, como exemplo o Microsoft FrontPage, DreamWeaver, dentre muitos outros.
TAGS, MARCAS OU ELEMENTOS HTML As TAGS so utilizadas para fazer todas as indicaes necessrias ao Browser (Programa navegador, capaz de recuperar pginas Web para seu computador). Normalmente so especificadas em pares, delimitando um texto que sofrer algum tipo de formatao. As TAGS so identificadas pelo sinais < > ou </ >. Entre os sinais <> so especificados os comandos propriamente ditos. No caso de tags que necessitam envolver um texto, sua finalizao deve ser feita usando-se a barra de diviso / , indicando que a TAG est finalizando a marcao de texto. Os principais elementos de pgina HTML so, ttulos, textos, pargrafos, imagens e links, responsveis pela chamada de outras pginas para a tela: Ttulo: o texto que aparece na barra de ttulo do browser. Imagem: So figuras, desenhos e fotos usados para ilustrar a pgina. Texto: a informao mais comum dentro de uma pgina. Pode ser formatado atravs de comandos. Link: um trecho que aparece destacado do restante do texto, normalmente sublinhado e com outra cor. Ao clicar no Link, o browser acessa outra regio da pgina atual ou uma pgina localizada em qualquer lugar na Internet. Uma figura tambm pode ser usada como link, ou seja, clicando na figura saltamos para outro local.
Cabealho: So linhas de texto com tamanhos especiais. Existem seis tamanhos de cabealhos. ESTRUTURA BSICA A estrutura bsica de um documento HTML a seguinte: <HTML> <HEAD> <TITLE> Titulo do Documento </TITLE> </HEAD> <BODY> texto, imagem, links, etc... </BODY> </HTML> OBS.: As (tags) HTML no so sensveis caixa, ou seja, tanto faz escrever com letras maisculas ou minsculas, porm se voc escrever em maisculas ser bem melhor para identific-las. Veja: <HTML> </html>
DESCRIO DOS ELEMENTOS BSICOS DO HTML: <HTML></HTML>: Indicam respectivamente o incio e o fim do documento. Todo o resto deve estar entre estas marcas. <HEAD></HEAD>: Delimitam a seo de cabealho do documento. Trata-se da primeira seo do documento. <TITLE></TITLE>: Indicam o ttulo do documento, que ser apresentado na barra superior do browser. Estas marcas devem constar da seo de cabealho. <BODY></BODY>: Corpo do documento. Entre estas marcas estar o contedo a ser apresentado, textos, cores, imagens, etc. Este elemento pode conter cinco parmetros opcionais: BACKGROUND: configura especificar uma imagem como fundo da pgina. EX. <BODY BACKGROUND= fundo.gif > configura uma pgina com a imagem fundo.gif como fundo. BGCOLOR: Configura a cor de fundo da pgina, podendo ser configurado com um valor Hexadecimal.
EX: <BODY BGCOLOR= White> configura uma pgina com fundo branco (padro). TEXT: configura a cor padro do texto da pgina. EX: <BODY TEXT= Blue > configura uma pgina com texto em cor preta. (padro). LINK, ALINK, VLINK: configura as cores dos links da pgina. LINK configura a cor do link antes de clicado clicado; ALINK configura a cor do link ativo, isto quando clicado; VLINK configura a cor de um link j visitado. EX: <BODY LINK=Blue VLINK=Purple ALINK=Red> configura uma pgina com links azuis, links visitados roxos e links ativos vermelhos. Todas as marcas apresentadas so do tipo incio-fim, ou seja, funcionam em pares. Existe uma ordem seqencial lgica entre as marcas. Estes detalhes devem ser respeitados, seno o browser no conseguir apresentar o documento. OBS.: Como HTML no uma linguagem de programao, voc no ser avisado de erros que tenha cometido na edio do seu documento. COMENTRIOS Podemos tambm acrescentar comentrios ao nosso cdigo HTML, estes comentrios no aparecem para no navegado e somente no cdigo, so representados pela seguinte TAG <!- - inicia o comentrio //- - >, finaliza o comentrio.
CARACTERES ESPECIAIS Existem caracteres que no podem ser obtidos atravs de teclado. Eles podem ser inseridos em sua pgina atravs da especificao de um cdigo especial que o browser interpreta e substitui por um caractere especfico. Esses cdigos podem ser obtidos utilizando-se uma nomenclatura definida pela norma ISO. HTML permite que caracteres especiais sejam representados por seqncias de escape, indicadas por trs partes: um & inicial, um nmero ou cadeia de caracteres correspondente ao caracter desejado, e um ; final. Quatro caracteres ASCII - <, >, e & tm significados especiais em HTML, e so usados dentro de documentos seguindo a correspondncia:
Entidade < > &
Caracter < > &
Outras sequncias de escape suportam caracteres ISO Latin1. Aqui est uma tabela com os caracteres mais utilizados em Portugus:
Entidade á â à ã ç é ê í ó ô õ ú ü Caracter Entidade Á Â À Ã Ç É Ê Í Ó Ô Õ Ú Ü Caracter
Existem alguns smbolos que vm sendo incorporados ao conjunto de caracteres reconhecidos em HTML. Por exemplo, &copy, que o smbolo , ® para , e § para . CRIANDO O PRIMEIRO DOCUMENTO HTML Abra o bloco de notas e digite a linha de cgigo a sagir: <HTML> <HEAD> <TITLE>Este o meu primeiro documento em HTML</TITLE> </HEAD> <BODY BGCOLOR="Blue" TEXT="Black"> Meu primeiro texto em Html, no momento no usarei nenhuma formatao especial aqui dentro. </BODY>
</HTML>
Agora salve sem esquecer que a extenso .HTML. Ficar assim: primeiro.HTML Minimize o bloco de notas e abra o arquivo. Ele vai aparecer no seu Browser. Se houver a necessidade de alguma alterao, sem fechar o Browser, maximize o Bloco de Notas, faa as alteraes necessrias e salve, para isso voc pose simplesmente pressionar as teclas Ctrl+S. Volte ao Browser e pressione a tecla F5 para atualizar. FORMATANDO CABEALHOS Como vimos anteriormente h seis nveis de cabealhos em HTML, de <H1> a <H6>: <H1> Este um cabealho de nvel 1 </H1> <H2> Este um cabealho de nvel 2 </H2> <H3> Este um cabealho de nvel 3 </H3> <H4> Este um cabealho de nvel 4 </H4> <H5> Este um cabealho de nvel 5 </H5> <H6> Este um cabealho de nvel 6 </H6> Veja no bloco de notas: <HTML> <HEAD> <TITLE>Formatando Cabe&ccedilalhos</TITLE> </HEAD> <BODY> <H6 align="center">Minha primeira pgina</H6> <H5 align="center">Minha primeira pgina</H5> <H4 ALIGN="center">Minha primeira pgina</H4> <H3 ALIGN="center">Minha primeira pgina</H3> <H2 ALIGN="center">Minha primeira pgina</H2> <H1 ALIGN="center">Minha primeira pgina</H1> </BODY> </HTML> PARGRAFOS E QUEBRAS DE LINHA
Num programa HTML voc no pode inserir uma quebra ou avano de linha toda vez que pressiona a tecla ENTER, necessrio colocar um comando especfico para que o browser entenda que voc deseja mudar de linha e iniciar uma nova linha ou comear um novo pargrafo. Existem dois comandos para criar quebras de linha e novos pargrafos. So os comandos <P> e <BR> O COMANDO <BR> O comando <P> insere uma linha em branco no seu local ou na linha seguinte qual ele foi inserido, caso esteja no meio de uma linha de texto e no em seu final. O comando <BR> tem como funo avanar para a linha imediatamente aps quela em que ele se encontra, sem, contudo, deixar uma linha em branco. O COMANDO <P> Para forar um novo pargrafo, ou seja, avanar uma linha em branco e iniciar o texto na segunda linha aps o final do pargrafo anterior deve ser usado o comando <P>. ALINHANDO PARGRAFOS O Comando <P> inicia um novo pargrafo onde o texto automaticamente alinhado pela margem esquerda da tela. Atravs do parmetro ALIGN, pode-se mudar o alinhamento de forma que o texto do pargrafo inteiro fique centralizado ou alinhado direita. Nesse caso, deve-se usar um par de comandos <P> envolvendo o pargrafo. ALIGN=LEFT ALIGN=RIGHT ALIGN=CENTER ALIGN=JUSTIFY Alinha pela margem esquerda (padro) Alinha pela margem direita Centraliza o texto. Alinha pelas duas margens
O COMANDO <HR> O comando <HR> tem como finalidade inserir uma linha divisria na posio em que foi especificadoF. Seu uso recomendado para criar uma diviso na pgina. Alterando o formato de linha de separao As linhas criadas pelo comando <HR> podem ter o seu tamanho alterado pelos parmetros SIZE e WIDTH. SIZE Configura a espessura da linha.
WIDTH - Configura a largura ou comprimento da linha. Pode ser expresso em pixels, sendo que, nesse caso, o tamanho da linha fixo ou utiliza uma porcentagem relativa largura da janela. Assim, seu tamanho varia em funo da largura da janela. ALIGN Configura o alinhamento da linha.(Left, right ou center). NOSHADE Desenha uma linha slida sem sombra (default= linha sombreada). Tudo isso muito fcil, no mesmo? Ento vamos incrementar um pouquinho mais a nossa pgina. EX.: <HTML> <HEAD> <TITLE>Este o meu primeiro documento em HTML</TITLE> </HEAD> <BODY BGCOLOR="blue" TEXT="Black"> <H3>Meu primeiro texto em Html, no momento no usarei nenhuma formatao especial aqui dentro.</H3><BR> Agora j posso fazer a quebra de linhas<BR> <P ALIGN="center">e inserir um novo pargrafo centralizado.</P> <P> Agora vou inserir uma linha horizontal na minha pgina</P> <HR SIZE="10" width="50%" ALIGN="center" NOSHADE> </BODY> </HTML>
USANDO IMAGENS COMO LINHAS SEPARADORAS Em vez de usar o comando <HR> como separador, podemos usar uma imagem com o comando <IMG>. Assim como o comando HR, podemos usar os parmetros WIDTH e HEIGHT para alterar o tamanho da imagem. DIV
A Tag <DIV></DIV> envolve uma rea do texto ou diviso que pode receber parmetros especficos de alinhamento, como o caso de ALIGN, para alinhar o texto. Podemos envolver vrios pargrafos com o elemento DIV BLOCKQUOTE O comando Blockquote permite dar recuos de pargrafos aos pargrafos, e pode ser cumulativo Ex.: <HTML> <Head> <TITLE>Formatao de Pargrafos</TITLE> </HEAD> <BODY BGCOLOR=Green TEXT=Blue> <H1 align="center">Alinhamento de pargrafos</H1> <P align="center">O comando align "center" permitiu que meu texto ficasse centralizado</P> <P align="Justify">Agora O comando align "Justify" fez com que meu texto ficasse justificado. O alinhamento justificado muito til para que o texto fique todo certinho.</P> <P ALIGN="LEFT">Meu texto ficou alinhado esquerda com o comando align "left"</P> <P align="RIGHT">Meu texto est alinhado direita porque utilizei o comando align "right"</P><BR> <HR align="center">  <BLOCKQUOTE>Com o comando blockquote pude recuar uma vez o meu texto</BLOCKQUOTE> <BLOCKQUOTE><BLOCKQUOTE>Aqui recuei meu texo 2 vezes, logo a seguir aparece uma linha vermela porque utilizei o comando "HR" mais o atibuto "color e atributo Size</BLOCKQUOTE></BLOCKQUOTE> <HR color="red" WIDTH=75% SIZE=20 >  </BODY>
</HTML>
ESTILOS DE TEXTO E FONTE Assim como no editor de textos, voc pode criar uma srie de efeitos no texto, alterando a forma ou o tipo da fonte. Todos os comandos que alteram o estilo do texto so do tipo continer ou liga desliga, ou seja, precisam ser especificados em pares, marcando o incio e fim do texto que sofrer a formatao. Os principais comandos de estilo de texto so: Comando Negrito Itlico Sublinhado Strong Typerwriter Big Small Sobrescrito Subscrito Pulsante Sintaxe
<B>Texto</B> <I>Texto</I> <U>Texto</U> <Strong>Texto</Strong> <TT>Texto</TT> <BIG>Texto</BIG> <SMALL>Texto</SMALL> <SUP>Texto</SUP> <SUB>Texto</SUB> <BLINK>Texto</BLINK>
Funo
Aplica o estilo Negrito Aplica o estilo Itlico Aplica o estilo sublinhado(No funciona em alguns Browsers Similar ao Negrito Deixa o texto com espaamento regular Aumenta a fonte e aplica negrito Reduz e altera a fonte Eleva o texto e diminui seu corpo Rebaixa o texto e diminui seu corpo Faz com que o texto pisque (No funciona no IE 4.
APLICANDO CORES E TAMANHOS NO TEXTO ALTERANDO O TAMANHO DA FONTE Um dos recursos de tratamento do texto mais interessantes da linguagem HTML a possibilidade de alterar o tamanho, a cor e o tipo da fonte do texto utilizado. O comando responsvel por isso o comando <FONT>, que do tipo liga desliga. Size O parmetro size especifica o tamanho da fonte utilizada. Os valores permitidos vo de 1, o menor at 7, o maior. O padro 3. Se for especificado um nmero antecedido pelo sinal de adio ou de subtrao, o tamanho da fonte atual ser aumentado ou diminudo nesse valor. Por exemplo, se a fonte atual 3 e for especificado <FONT SIZE=+2> o texto ser exibido no tamanho 5. Se o valor for especificado sem sinal, a fonte ser exibida no tamanho especificado. Face Esse parmetro permite que seja escolhida uma fonte diferente para o texto. Podemos especificar vrias fontes, de maneira que, se o sistema no possuir a primeira opo, a segunda carregada. Se no for encontrada nenhuma das fontes especificadas, o texto exibido na fonte padro. Color Esse parmetro especifica a cor do texto. Seu valor pode ser especificado no formato hexadecimal, RGB ou atravs de um nome predefinido de cores como mostra a tabela abaixo:
Cor Aqua Black Fuchsia Green Brown Olive Silver White
Cdigo #70DB93 #000000 #FF00FF #00FF00 #800000 #808000 #E6E8FA #FFFFFF
Cor Blue Cyan Gray Lime Navy Red Teal Yellow
Cdigo #0000FF #00FFFF #C0C0C0 #32CD32 #23238E #FF0000 #008080 #FFFF00
Cores e Fontes Cores - As cores so introduzidas atravs do elemento <FONT>, usando o sistema RGB para cores (da mesma forma que vimos para cores de documentos), como mostrado no exemplo a seguir: <FONT COLOR="red"> Texto </FONT> Produzir na pgina: a palavra Texto escrita na cor vermelha. Assim, um trecho de texto pode ter uma cor diferente da definio geral de cores, feita atravs dos atributos de <BODY>. Tamanho - Veja a formatao a seguir: <FONT SIZE=3> Texto </FONT>
Produzir na pgina: a palavra Texto como o tamaho 3. Este comando permite que o autor do documento altere o tamanho das letras em trechos especficos de texto. O tamanho bsico dos textos 3 (padro). Podemos indicar tamanhos relativos a esse, por exemplo: <FONT SIZE=+2> Letra maior </FONT> Letra normal <FONT SIZE=-2> Letra menor </FONT> Letra maior Letra normal Letra menor Fontes - Uma evoluo que permite a escolha da fonte para os textos, o atributo FACE: <FONT FACE="Arial"> Texto </FONT> Produzir: a palavra Texto com a fonte (tipo de letra) Arial. Mais exemplos: <FONT FACE="Verdana" COLOR="blue"> Fonte Verdana Azul </FONT> Fonte Verdana Azul Apostila de HTML - Fonte: http://www.icmc.usp.br/ensino/material/html/intro.html Profa. Flvia Pereira de Carvalho - fpereira@faccat.br - http://fit.faccat.br/~fpereira 8 <FONT FACE="Arial" COLOR="green"> Fonte Arial Verde </FONT> Fonte Arial verde <FONT FACE="Courier New" COLOR="red"> Fonte Courier New Vermelha </FONT> Fonte Courier New Vermelha
No exagere na quantidade cores e tamanho das letras do texto ou a sua pgina parecer uma mensagem enviada por cdigo. Veja o exemplo abaixo: As figuras acima mostram o cdigo anterior sendo visualizado no IE e o Netscape, observem que no IE o comando BLINK no aplicado. <HTML> <HEAD><TITLE>Aplicando estilos de texto</TITLE> </HEAD> <body bgcolor=blue>
<font face="Arial" size="4" color="Red">Este texto est em<B>Negrito</B><BR> Este texto est em <I>Itlico</I><BR> Este texto est em <U>Sublinhado</U><BR> Este texto est em<B><I> Negrito e Itlico</B></I><P> Este texto recebeu o estilo<STRONG> chamado Strong que parecido com </STRONG>negrito<BR> Este texto recebeu o estilo<TT>Typerwriter</TT>.<HR> Este texto recebeu o formato de fonte <BIG>big</BIG> que cria letras grandes.<BR> Este texto recebeu o formato de fonte <SMALL>Small</SMALL> que cria letras pequenas. <BR> Este um exemplo de texto <SUP>Sobrescrito</SUP> pelo comando SUP.<BR> Este um exemplo de texto onde foi usado o efeito <SUB>Subscrito</SUB> do comando SUB.<P> Para chamar a <BLINK>ateno</BLINK> use o comando BLINK.</font> </BODY> </HTML> CABEALHOS Outra forma muito usada para mudar o tamanho da letra e aplicar um efeitos em textos utilizando cabealhos. A linguagem HTML possui seis comandos de cabealho de <H1> at <H6>. Alm do tamanho diferenciado, o comando cabealho insere uma linha em branco antes e depois da linha que contm o comando. Eles so perfeitos para criar ttulos e iniciar sees dentro de uma pgina. O comando <H1> possui o maior tamanho enquanto que <H6> possui o menor tamanho de fonte. ALINHANDO CABEALHOS Como padro um cabealho gerado pelo comando <Hn> sempre posicionado no lado esquerdo da linha. Usando o parmetro ALIGN pode-se centralizar ou ajustar o cabealho direita da linha. Veja o cdigo:
<HTML> <HEAD> <TITLE>Alinhando Cabealhos</TITLE> </HEAD> <BODY> <H2> Cabealho sem alinhamento especial</H2> <HR> <H2 ALIGN=CENTER>Cabealho com alinhamento centralizado</H2> <HR> <H2 ALIGN=RIGHT>Cabealho com alinhamento direita</H2> </BODY> </HTML> LISTAS Na linguagem HTML existem elementos especficos para a criao de listas, que podem ser listas ordenadas (OL), listas sem ordenao (UL), ou listas de definies (DL). Um detalhe interessante que podem ser criadas listas aninhadas, ou seja, listas dentro de listas. A seguir, veremos as caractersticas de cada umas delas. LISTAS ORDENADAS <OL TYPE=...START=...>...</OL> so os elementos delimitadores de listas ordenadas (OL Ordered Lists). A estrutura das listas ordenadas bastante simples: entre os elementos de incio e fim, os itens da lista so definidos pelos elementos <LI></LI>. Os itens so apresentados em linhas consecutivas e precedidos por uma numerao atribuda pelo paginador. O parmetro opcional TYPE define como ser o tipo de numerao de cada linha. Os tipos disponveis so: A (A,B,...Z), a(a,b,...z), I (I,II,III, etc.), i (i,ii,iii,etc), e 1 (1,2,3,etc). Se omitido, utilizado o tipo padro (1,2,3, etc). O parmetro opcional START define a partir de que elemento a numerao deve se iniciar. Ele deve receber como valor um nmero indicando em que posio a contagem deve se iniciar.
LISTAS NO ORDENADAS <UL>...</UL> so os elementos delimitadores de listas sem ordenao (UL Unordered Lists). A estrutura das listas sem ordenao a mesma das listas ordenadas, sendo que, na apresentao, os itens sero precedidos por um marcador (bullet). No caso de listas sem ordenao aninhadas (listas dentro de listas), o paginador utilizar um marcador (bullet) diferente para os itens de cada lista. Como j foi visto acima <LI>...</LI> o elemento que define um item de uma lista ordenada ou sem ordenao. O seu contedo pode ser texto, outras listas, imagens, links ,etc. LISTA DE DEFINIO <DL>...</DL> so as marcas que englobam uma lista de definies, ideais para a criao de glossrios e coisas do gnero. A estrutura desta lista diferente das outras, pois existem dois elementos o termo a ser definido (DT), e a definio propriamente dita (DD). Na apresentao cada termo aparece em uma linha, e a respectiva definio na linha seguinte, deslocada para a direita. <HTML> <HEAD> <TITLE>Listas de definio</TITLE> </HEAD> <BODY> <H2>Listas de definio</H2> <DL> <DT>HTML</DT> <DD>Hiper Text Markup Language</DD> <DT>OL</DT> <DD>Listas ordenadas com numerao.</DD> <DT>UL</DT> <DD>Listas sem ordenao</DD> <DT>LI</DT>
<DD>Elemento da Lista</DD> </DL> <H2>Listas no ordenadas combinadas<BR>com uma lista de Definio</H2> <DL> <DT>Parmetro do elemento UL</DT> <DD>Lista no ordenada <UL> <LI>TYPE</LI> <LI>START</LI> </UL> </DD> <BR> <DT>Parmetros do elemento IMG<Br> Utilizando Parmtro do elemento OL</DT> <DD>Lista ordenada com marcador alfabtico<BR> <OL type=A start=A> <LI>SRC</LI> <LI>ALT</LI> <LI>BORDER</LI> <LI>WIDTH</LI> </OL> <DD>Lista ordenada com marcador alfabtico<BR> <OL type=1 start=1> <LI>HEIGHT</LI> <LI>VSPACE</LI> <LI>HSPACE</LI> </OL> </DD>
</DL> </BODY> </HTML> IMAGENS Voc pode obter uma imagem atravs de uma cpia feita a partir de uma pgina da Internet, atravs de CDs ROMs, Scanners, etc. ou pode cria-las a partir de um programa de imagens. O COMANDO IMG Esse comando define a posio de uma imagem que aparece no corpo do documento. <IMG SRC=URL WIDTH=... HEIGHT= BORDER= ALT=Texto
VSPACE= HSPACE=> ALIGN=| BOTTOM | TOP | MIDLE

SRC=URL
o nome da figura, se estiver no mesmo diretrio do programa ou seu caminho completo. Exibe o texto quando o browser no encontra a imagem, ou uma legenda quando o cursor do mouse passa sobre ela mostrando o texto especificado. Especifica o alinhamento da imagem relativamente linha de texto onde exibida. Especifica o alinhamento da imagem relativamente s bordas laterais da janela Esse parmetro especifica a largura de exibio da imagem independentemente do seu tamanho fsico. Se a imagem for maior ou menor do que o valor especificado, ela ser esticada ou comprimida para caber no espao especificado. Se for o colocado o sinal de porcentagem, ele relativo largura da janela. Especifica a altura de exibio da imagem
ALT=texto
ALIGN=TOP | MIDLE | BOTTOM ALIGN=LEFT | RIGHT WIDTH=nmero| nmero%
HEIGHT=nmero
independentemente de seu tamanho fsico. Se a imagem for maior ou menor do que o valor especificado.
BORDER=nmero
Especifica em pixels a largura da borda da imagem. O valor zero remove a imagem Determina em pixels o espao que deve ser deixado em branco na parte de cima e na parte de baixo da imagem. Determina em pixels o espao que deve ser deixado em branco nas laterais da imagem
VSPACE=nmero
HSPACE=nmero
Com exceo do parmetro SRC, todos os demais so opcionais. Portanto, para exibir uma imagem chamada foto.gif que esteja no mesmo diretrio do programa deve ser especificado o seguinte comando: IMG SRC=foto.gif Vamos para o bloco de notas praticar. (as figuras so sugestes, podem ser substitudas, porm devem estar na mesma pasta do seu arquivo). <HTML> <HEAD> <TITLE>Formatando texto dividido com imagens</TITLE> </HEAD> <BODY leftmargin="40%" rightmargin="40%" background="G59.jpg"
BGPROPERTIES="fixed" text="blue"> <H1 ALIGN="center">Minhas Imagens</H1> <MARQUEE BEHAVIOR= SCROL WIDTH=100%> Veja como ficam distribudas as minhas imagens</MARQUEE><BR><br> <img src="urso12.gif" width="100" height="120" alt="Minhas flores" align="left" align="midle"> <DIV align="justify">Minhas rosas, Minhas rosas, Minhas rosas, Minhas rosas, Minhas rosas, Minhas rosas, Minhas rosas, Minhas rosas, Minhas rosas, Minhas rosas, Minhas rosas, Minhas rosas, Minhas rosas, Minhas rosas, Minhas rosas, Minhas rosas, Minhas rosas, Minhas rosas, Minhas rosas, Minhas rosas, Minhas rosas, Minhas rosas, Minhas rosas, Minhas rosas, Minhas rosas, Minhas rosas, Minhas rosas, Minhas rosas, Minhas rosas, Minhas rosas, Minhas rosas, Minhas rosas, Minhas rosas, Minhas rosas, Minhas rosas, Minhas rosas, Minhas rosas, Minhas rosas, Minhas rosas, Minhas rosas, Minhas rosas, Minhas rosas, Minhas rosas, Minhas rosas, Minhas rosas, Minhas rosas, Minhas rosas, Minhas rosas, Minhas rosas, Minhas rosas, Minhas rosas, Minhas rosas ,
Minhas rosas, Minhas rosas, Minhas rosas, Minhas rosas, Minhas rosas, Minhas rosas, Minhas rosas, Minhas rosas, Minhas rosas, Minhas rosas, Minhas rosas" </DIV><BR> <hr> <BR> <img Borboletas, src="borboletas.gif" width="140" Borboletas, height="140"alt="Borboletas" Borboletas, Borboletas, Borboletas, Borboletas, Borboletas, Borboletas, Borboletas,
align="right"><DIV
align="justify">Borboletas,
Borboletas, Borboletas, Borboletas, Borboletas, Borboletas, Borboletas,
Borboletas, Borboletas, Borboletas, Borboletas, Borboletas, Borboletas, Borboletas, Borboletas, Borboletas, Borboletas, Borboletas, Borboletas, Borboletas, Borboletas, Borboletas, Borboletas, Borboletas,
Borboletas, Borboletas,
Borboletas, Borboletas, Borboletas, Borboletas,
Borboletas, Borboletas, Borboletas, Borboletas, Borboletas, Borboletas,
Borboletas, Borboletas, Borboletas, Borboletas, Borboletas, Borboletas, Borboletas, </DIV> <Br> <BR> <img src="estrela.gif" width="40" height="40"><b>Usando uma imagem como marcador</B><BR> Usando imagens como linhas separadoras <BR> <P ALIGN="CENTER"><img src="g52.gif" width="50%"> </BODY> </HTML> MARQUEE O Internet Explorer introduziu um comando o chamado MARQUEE, que faz com que um texto especificado fique rolando em uma determinada rea da pgina. Veja na tabela abaixo a sintaxe do comando MARQUEE
Especifica como o texto que envolve o marquee ser alinhado. Pode conter os seguintes valores:
ALIGN=posio TOP MIDDLE BOTTOM
Alinha o texto pela sua parte superior Alinha o texto pelo meio Alinha o texto pela sua parte inferior
Especifica o comportamento do texto, ou seja, como ser a sua rolagem pela janela. Pode conter os seguintes valores. Inicia a rolagem introduzindo o texto de um lado e rola o texto at que ele saia completamente
SCROLL
da janela no lado oposto ao que comeou. Aps a ultima letra ter sado da tela, o texto reaparece no canto inicial repetindo continuamente o processo. Inicia a rolagem introduzindo o texto de um lado e rola o texto at que ele atinja a borda oposta.
BEHAVIOR=tipo SLIDE
Quando a primeira letra do texto bater na borda, o texto para de rolar e permanece naquela posio. Cria um efeito de movimento para o texto, que inicia de um lado, entrando pela borda da janela e,
ALTERNATE
ao bater na outra borda, inverte o seu deslocamento voltando para a borda inicial.
Especifica a cor do texto do Segundo plano. Caso no seja

BGCOLOR=cor
especificada uma cor, assumida a cor de segundo plano atual. Especifica a direo que o texto vai usar para o deslocamento. O padro LEFT, que faz o texto deslocar-se do
DIRECTION=direo canto direito da janela para o canto esquerdo. Pode ser
especificado tambm o valor RIGHT que inverte o sentido de deslocamento. Especifica a largura do painel, ou a rea do MARQUEE. Se for especificado um nmero, ele considerado como quantidade
HEIGHT =n
de pixels. Se for seguido do sinal %, indica a largura com relao janela por meio da porcentagem. Especifica a largura em pixels das margens esquerda e
HSPACE =n LOOP =n
direita, para afasta-lo do texto ou outros objetos que o cercam. Especifica quantas vezes ser executado. Se o valor de n for
1 ou INFINITE ele ser executado continuamente. Indica a quantidade de pixels que ser usada para deslocar o
SCROLLAMOUNT=n
marquee a cada movimentao. Especifica em milissegundos o tempo entre cada deslocamento do texto. Especifica em pixels a margem superior e inferior do marquee. Especifica a altura do painel, ou rea do marquee. Se for especificado um nmero, ele considerado como quantidade de
SCROLLDELAY=n
VSPACE=n
WIDTH=n
pixels. Se for seguido do sinal %, indica a altura em relao janela por meio de porcentagem
muito bom usar esse comando para chamar a ateno dos seus usurios. Porm, ser interessante testar a visualizao da pgina com um browser que no seja compatvel com esse comando para verificar como ficar a tela. Infelizmente, a Netscape no incorporou esse comando verso 4 do seu browser. Combinando a utilizao de vrios Marquees Voc pode criar alguns efeitos interessantes combinando o uso de vrios marquees. Eles podem ser colocados lado a lado ou um sobre o outro para a criao de um marquee com vrias linhas. Os primeiros dois marquees so colocados lado a lado com o texto rolando em posio contrria. Eles partem das bordas e colidem no centro da pgina. O segundo exemplo uma variao do primeiro. Porm, foi adicionados uma quebra de linha com o comando <BR> entre os dois e delimitada uma largura. Neste exemplo, trs marquees so colocados um abaixo do outro, criando um painel de trs linhas. <HTML> <HEAD> <TITLE> Combinando vrios Marquees</TITLE> </HEAD> <BODY bgcolor="#FFFFFF"> <MARQUEE height="15" width="300" behavior="Scroll" direction="right"
bgcolor="#FFFF00" loop=infinite> fcil juntar dois Marquees</MARQUEE> <MARQUEE height="15" width="300"behavior="Scroll" direction="Left" bgcolor="#00FF00" loop=infinite> fcil juntar dois Marquees</MARQUEE> <HR> <BODY bgcolor="#FFFFFF"> <MARQUEE height="15" width="200" behavior="Scroll" direction="right" bgcolor="#FFFF00" loop=infinite> fcil juntar dois Marquees</MARQUEE> <BR> <MARQUEE height="15" width="200" behavior="Scroll" direction="Left" bgcolor="#00FF00" loop=infinite> fcil juntar dois Marquees</MARQUEE> <BR> <BODY bgcolor="#FFFFFF"> <MARQUEE height="15" width="200" behavior="Scroll" direction="left" bgcolor="#FFFF00" loop=infinite> Para criar um Marque com</MARQUEE> <BR> <marquee height="15" width="200" behavior="Scroll" direction="Left" bgcolor="#FFFF00" loop=infinite> diversas linhas bastam especificar</MARQUEE><br> <MARQUEE height="15" width="200" behavior="Scroll" direction="Left" bgcolor="#FFFF00" loop=infinite> vrios Marquees em seqncia </MARQUEE> </BODY>
HTML URLS E LINKS At agora voc aprendeu como criar documentos interessantes, mas que poderiam ter sido criados em um processador de textos. O Principal atrativo da Internet a criao de documentos com o conceito de hipertexto, ou seja, um documento que se liga a outros por meio de vnculos especiais chamados hyperlinks. Com esse conceito voc pode criar documentos que faam referncia a um endereo qualquer do computador ou da Web e permitam ao usurio acessar essas referncias, no importando se elas esto em outra pgina WEB, no seu micro ou em qualquer servidor da rede. URL A Internet usa uma nomenclatura especfica para indicar o endereo de um documento. Chamada de Uniform Resource Locator (Localizador Universal de Recursos) ou URL, essa nomenclatura inclui trs componentes. Ela deve conter o protocolo do documento, (como por exemplo http. Gopher ou WAIS), o endereo servidor e a localizao do arquivo, usando a seguinte sintaxe: Protocolo://servidor.NomeDoArquivo http://www.hardcore.com.br/index.htm http: o protocolo www.voce.com.br: o nome do servidor index.htm: o nome do documento que ser acessado. Criando um Link com Arquivos Locais Vincular um texto com uma pgina local uma tarefa bastante simples. Voc precisa apenas especificar o nome completo do arquivo que ser chamado, utilizando o comando <A> de ncora. Veja a sintaxe bsica deste comando: <A HREF=...NAME...>caracteres</A>
Principais parmetros: HREF=URL NAME=String Especifica o endereo do URL ao qual o link est associado. Pode ser usado dentro e fora do documento. Especifica o nome da seo de um documento qual um link de hipertexto faz referncia.
Usando uma Imagem como Hiperlink Voc pode usar uma imagem como hiperlink envolvendo-a com o comando <A></A>. Em vez de especificar um texto de hiperlink, voc usa o comando <IMG> para colocar a imagem. Vinculando Arquivos de outros diretrios Voc pode especificar o endereo de outros diretrios usando um esquema de caminhos parecido com DOS. Existe uma diferena entre esses caminhos. Na Web voc deve inverter a barra de espaos, usando a barra / no lugar da barra \, para separar diretrios. CRIANDO LINKS PARA SEES DE UMA PGINA Para dominar o uso do hipertexto, o programador em HTML deve conhecer bem o funcionamento do comando <A> e dois de seus parmetros da linguagem. Um o <H HREF>, usado para criar o link em si, e o outro o <A NAME>, que cria ncoras ou endereos de sees de um documento, permitindo seu endereamento. Criando uma ncora Para interligar uma pgina, voc precisa criar uma ncora (tambm chamado de indicador em alguns editores de HTML) no inicio de cada seo do documento. Essa ncora recebe um nome que ser mencionado pelo link que acessar. <A NAME=#nome da ncora>Texto Opcional</A> Iremos criar agora uma pgina Web com exemplos de links e ncoras : Neste cdigo criamos primeiramente os links com as ncoras da pgina, e depois as ncoras, aproveitamos tambm e trabalhamos com insero de imagens na pgina: ENVIANDO E-MAIL DIRETAMENTE DA PGINA HTML
Voc pode acionar o programa padro de e-mail diretamente de uma pgina HTML usando uma variao do comando <A>, que usa a opo MAILTO no lugar da URL. <A HREF=MAILTO:faleconosco@provedor.com.br>Tire as suas dvidas </A> DEFININDO DESTINOS Podemos tambm definir destinos para os nossos links,(recurso muito utilizado em frames) atravs do parmetro target: . E podem ser _self: Mesmo quadro, _top: pgina inteira, _blank: nova janela e _parent: quadro pai. <html> <head> <title>Links</title> </head> <body> <p align="center">Links</p> <p><a href="http://www.microsoft.com.br">Microsoft</a> <p><a href="http://www.macromedia.com.br">Macromedia</a> <p><a href="http://www.adobe.com.br" target="_blank">Adobe</a> <p><a href="mailto:colegiomercurio@colegiomercurio.com.br">e-mail</a> <hr> <P Align="center">Criando as ncoras</P> <a href="#textos">Textos</a> <a href="#imagens">Imagens</a> <p> </p> <P> <a name="textos">TEXTOS</a> <p> </p><p> </p><p> </p><p> </p><p> </p><p>&nbs p;</p><p> </p><p> </p><p> </p><p> </p><p> </p><p>&nb sp;</p><p> </p><p> </p> <a name="imagens">IMAGENS</a></p><p> </p><p> </p><p>
</p><p> </p>
<p
align="center"><img
border="0"
src="cachorrinhos.gif"
width="180"
height="100"></p> <p> </p><p> </p><p> </p><p> </p><p> </p><p>&nbs p;</p><p> </p><p> </p><p> </p><p> </p><p> </p><p>&nb sp;</p><p> </p><p> </p> </body> </html> TABELAS O conceito de TABELA o mesmo conhecido usualmente: ela tem linhas e colunas, e na interseo delas esto as clulas. Na linguagem HTML, voc pode inserir nas clulas tudo o que normalmente faz parte do corpo de um documento, como textos, links, imagens, listas e at outras tabelas. Podemos criar tabelas para exibir dados como numa planilha, os elementos de tabelas so usados para formatar pginas de uma forma geral. Eles so usados para criar textos com elementos na tela de forma mais fcil, para delimitar reas de uma pgina e diversas outras utilidades que voc nem imagina. Por exemplo, podemos usar tabelas para garantir que o texto fique na posio A da tela e a imagem fique na posio B, independente da resoluo de vdeo do visitante de sua pgina. Utilizando uma tabela de tamanho definido, podemos evitar que a pgina fique grande demais para resolues de 640x480, podemos simular colunas de texto, entre outras aplicaes. ELEMENTOS BSICOS DE TABELAS <TABLE>...</TABLE> So as marcas que englobam a definio de uma tabela. Todas as demais marcas referentes a tabelas linhas e clulas somente sero consideradas se includas entre <TABLE>e </TABLE>. <CAPTION>...</CAPTION> Trata-se de um elemento opcional que define o ttulo da tabela, e deve constar entre as marcas que definem a tabela, mas separado das marcas que definem linhas e colunas. Sem parmetros, o ttulo apresentado acima da tabela e centralizado.
<TR>...</TR> Table Row ou Linha de tabela Este o elemento utilizado na definio de linhas de tabelas. Tabelas so definidas em linhas, sendo as linhas compostas de clulas. O nmero de linhas de uma tabela corresponde ao nmero de <TR></TR>. <TD>...</TD> Table Data ou Dados de Tabela Marcas que delimitam as clulas que compem as linhas, e assim sendo devem estar inseridas entre as marcas de linhas. Uma clula pode conter tudo o que normalmente consta do corpo de um documento HTML Links, referncias a imagens, textos, e at tabelas. O alinhamento padro de uma clula esquerda horizontalmente e centralizado verticalmente, e caso o nmero de clulas varie de uma linha para outra, as linhas com menos clulas so completadas direita com clulas em branco. <TH>...</TH> Table Header ou Cabealho de Tabela Elemento que define clulas de cabealho. Clulas de cabealho tm caractersticas idnticas a clulas de dados definidas por <TD>, a no ser pelo alinhamento horizontal, que centralizado, e pela utilizao de fonte em Negrito. PARMETROS Estes elementos bsicos, entretanto, possuem alguns parmetros que permitem um maior controle sobre alguns detalhes da apresentao da tabela.
Parmetros do elemento <TABLE> BORDER A apresentao padro de uma tabela sem bordas. A presena do parmetro BORDER indica justamente que deve ser desenhada uma borda em torno de cada clula da tabela. Pode ser usado para indicar a espessura da borda (em pixels), com BORDER=X. Exemplo: <TABLE BORDER=2> BORDERCOLOR
Permite que se coloque cores nas bordas de sua tabela e possui duas variaes: bordercolorlight e bordercolordark, permitindo que se coloque duas cores de bordas em volta de sua tabela. WIDTH Especifica a largura da tabela, que pode ser definida em pixels ou em percentual referente largura da janela. Caso no seja especificado, o prprio browser se encarrega de determinar a largura mais adequada, baseado nos textos inseridos nas clulas. Exemplo: <TABLE WIDTH=75%> CELLSPACING Define o espao entra as clulas, ou seja, a largura das linhas de grade (as bordas que envolvem as clulas). especificado em pixels. Exemplo: <TABLE CELLSPACING=3> CELLPADDING Determina, em pixels, o espao entre o contedo e as bordas da clula. Exemplo: <TABLE CELLPADING=6> ALIGN Configura o alinhamento horizontal da tabela em relao aos outros elementos da pgina. Pode conter os valores LEFT (esquerda), CENTER (centro) ou RIGHT( direita). Este parmetro no funciona em alguns browsers. BGCOLOR Define a cor de fundo da tabela. Parmetros do elemento <TR> ALIGN Configura o alinhamento horizontal dos elementos contidos nas clulas de uma linha. Pode conter os valores LEFT, CENTER OU RIGHT. Se omitido, o alinhamento esquerda para as clulas de dados (<TD>), e centralizado para clulas de cabealho (<TH>). VALIGN
Define o alinhamento vertical dos elementos contidos nas clulas de uma linha. Pode conter os valores TOP(topo), MIDLE(meio) ou BOTTOM (fundo). Se omitido, o alinhamento ao meio. BGCOLOR Define a cor de fundo da linha. Parmetros dos Elementos <TD> e <TH> ALIGN Configura o alinhamento horizontal dos elementos contidos na clula. Pode conter os valores LEFT, CENTER OU RIGHT. Se omitido, o alinhamento esquerda para as clulas de dados (<TD>), e centralizado para clulas de cabealho (<TH>). VALIGN Define o alinhamento vertical dos elementos contidos na clula. Pode conter os valores TOP (topo), MIDLE(meio) ou BOTTON(fundo). Se omitido, o alinhamento ao meio. BGCOLOR Define a cor de fundo da linha. NOWRAP Quando este parmetro encontra-se associado a uma clula, o browser entende que o texto dentro daquela clula no pode ser dividido em mais de uma linha. Este parmetro deve ser utilizado com cuidado, para evitar colunas demasiadamente largas.
COLSPAN Especifica o nmero de colunas de uma tabela a ser ocupado por uma clula. Deve ser utilizado para expandir uma clula horizontalmente. Se atribuirmos COLSPAN=2 a uma clula, ela ocupar o seu espao e o espao de mais uma clula para a direita, assim esta linha dever possuir uma clula a menos que as demais, j que uma de suas clulas valepor duas. ROWSPAN
Define o nmero de linhas a ser ocupado por uma clula. Deve ser utilizado para expandir uma clula verticalmente (para baixo). Ao atribuir ROWSPAN=2 para uma clula, diminuir em 1 o nmero de clulas da linha de baixo. Vamos a um exemplo: <html> <head> <title>Tabelas</title> </head> <body> <table border="10" width="100%" bordercolorlight="#000080"
bordercolordark="#0000FF"> <tr> <th width="100%" colspan="3"> <p align="center">Ttulo da Tabela</th> </tr> <tr> <td width="33%">Texto1</td> <td width="33%">Texto 2</td> <td width="34%">Texto 3</td> </tr> </table> </body> </html> FRAMES O recurso de frames (janelas), compatvel com a verso 2 e superiores do Navigator e do IE, permite ao desenvolvedor criar pginas HTML que podem ser visualizadas simultaneamente na janela do browser. Com esse recurso, a janela do browser dividida em frames que compartilham o espao disponvel.
Sem o recurso de frames, para visualizar trs pginas diferentes chamadas A. HTM, B.HTM e C.HTM, o usurio precisaria acess-las individualmente por meio de uma pgina inicial que contivesse um menu ou ento atravs da especificao de seu URL Usando o recurso de frames, podemos exibir mais de um frame (janela) simultaneamente. Em nosso projeto iremos usar um dos frames para exibir permanentemente o contedo da pgina do menu e a outra para exibir o contedo dos captulos, facilitando a navegao pelo manual. Como funcionam os frames Ao contrrio da maioria dos recursos da linguagem HTML, o uso frames requer um planejamento prvio. Esse planejamento consiste na criao da estrutura dos frames, na qual voc ir especificar a quantidade de frames, a disposio que eles tero na tela, a largura e a altura de cada frame, assim como o contedo que ser exibido em cada um deles. Trabalhar com frames exige duas etapas. Na primeira voc cria o layout dos frames, na segunda, define seu contedo. O Comando Document O uso de frames exige a criao de um documento HTML especial que contm todas as definies dos frames. Voc pode considera-lo como um documento mestre. Esse documento se diferencia dos demais documentos HTML, pois ele no usa os comandos <BODY> e </BODY>. Em seu lugar usado o comando <FRAMESET></FRAMESET>. Dentro desse par de comandos so especificados todos os atributos dos frames que sero criados. O frameset define as caractersticas gerais dos frames, como sua quantidade e disposio horizontal e vertical. Cada frame especificado precisar de um outro comando chamado <FRAME> para definir suas caractersticas individuais. O Comando FRAMESET Este comando do tipo continer, ou seja deve ser aberto e fechado. Veja a sintaxe deste comando: <FRAMESET COLS=tamanho FRAMEBORDER=1/0 FRAMESPACING=spacing ROWS=tamanho></FRAMESET> Cols=tamanho
O atributo cols usado para criar um documento com frames dispostos em colunas. Nele dever ser especificada a largura de cada coluna do documento. Pode ser especificado um valor padro para todas as colunas ou tamanhos individuais. Os valores podem ser especificados em pixels, percentagem ou tamanho relativo. Usando valores em pixels <FRAMESET COLS=100,300,200> Usando valores relativos Para dividir os frames igualmente pela largura da janela do browser, a melhor opo usar um asterisco (*) para cada coluna <FRAMESET COLS=*,*,*> Usando valores percentuais A terceira forma de determinar a largura de uma coluna especificar os valores em forma de percentual, totalizando 100 por cento <FRAMESET COLS=25%,50%,25% Os diferentes valores podem ser combinados entre si. Por exemplo, para criar um frameset com trs colunas de modo que a primeira ocupe 25%, a terceira tenha 100 pixels e a outra ocupe o espao restante, pode-se usar o seguinte comando: <FRAMESET COLS=25%,*,100> ROWS=tamanho O atributo ROWS funciona da mesma forma que o atributo COLS, s que cria os frames horizontalmente. Tudo o que foi exposto para COLS, aplica-se a ROWS. Combinando ROWS e COLS Pode-se combinar a criao de frames, usando os dois atributos. Voc pode criar um janela dividida em dois frames horizontais, onde o primeiro deles dividido em duas colunas. Para que isso seja possvel, basta aninhar conjuntos de comandos <FRAMESET> O ATRIBUTO <FRAMESPACING=VALOR> Esse atributo tem como finalidade alterar o espao entre os frames, dando a impresso de que a borda dos frames foi aumentada. Contudo, ele apenas distancia um frame de outro pela quantidade de pixels especificada.
O cdigo pode ser o mesmo do exemplo anterior. A penas a primeira linha deve ser alterada para: <FRAMESET ROWS=50%,50% FRAMESPACING=10> O ATRIBUTO <FRAMEBORDER=1/0> Esse atributo tem a finalidade de eliminar as bordas dos frames. Como padro, ele usa o valor 1, que exibe a borda. Se for especificado o valor 0, as bordas sero omitidas. A omisso de bordas interessante para criar a iluso de uma nica janela, onde as partes dessa janela so independentes das outras. Outro efeito interessante a mudana da cor de fundo de cada janela, permitindo dividir a tela em reas coloridas distintas. O COMANDO <FRAME SRC> Sintaxe: <FRAME ALIGN=posio FRAMEBORDER=1/0 MARGINHEIGHT=altura MARGINWIDTH=largura NAME=nome SCROLLING=yes/no SRC=endereo Align=posio Ajusta o alinhamento do frame ou do texto. Os valores permitidos so: TOP
MIDDLE BOTTOM
O texto ao redor do frame alinhado pela parte superior do frame. O texto ao redor do frame alinhado pelo meio do frame. O texto aos redor do frame alinhado pela parte inferior do frame. O frame alinhado esquerda, deixando o texto posicionado no seu lado direito. O frame alinhado direita, deixando o texto posicionado no seu lado esquerdo
LEFT
RIGHT
Frameborder=0/1 Idntico ao atributo de mesmo nome do comando <FRAMESET>, ele ativa ou desativa a exibio de borda para o frame atual. Marginheight=altura Especifica a altura da margem superior e inferior do frame em pixels. Marginwidht=largura Especifica a largura das margens esquerda e direita do frame em pixels. Name=nome Atribui um nome para o frame, de maneira que possa ser identificado e localizado para carregar documentos. Noresize Esse atributo evita que o frame seja redimensionado pelo usurio. Scrolling=yes/no Esse atributo, quando ajustado para o valor no, no permite que o frame tenha barras de rolagem quando a janela for redimensionada. SRC=endereo Endereo deve ser substitudo pelo nome ou URL do documento que ser exibido no frame. Ajustando as margens internas do Frame O desenvolvedor pode criar uma margem interna para o frame, de forma a distanciar o contedo da janela da sua borda. Para criar um margem nas laterais da janela, deve ser usado o comando MARGINWIDTH. Para criar uma margem na parte superior e outra no rodap do frame, deve ser usado o atributo MARGINHEIGHT. O tamanho da margem deve ser especificado em pixels. Barras de Rolagem e Redimensionamento dos Frames Como padro, os frames possuem os atributos que permitem seu
redimensionamento e a incluso automtica de barras de rolagem quando suas dimenses ficam menores do que o contedo a ser exibido. Para alterar essas caractersticas, voc deve usar os comandos SCROLLING E NORESIZE. No caso do comando SCROLLING, deve ser atribudo a ele o valor no para desativar as barras de rolagem.
INTERLIGAO DE FRAMES At agora voc viu como criar um conjunto de frames para exibir documentos independentes um do outro. Nosso projeto inicial previa a criao de um manual eletrnico usando frames para mostrar um ndice permanente na tela enquanto outra janela exibia o contedo selecionado. Para isso iremos aprender mais alguns itens. O primeiro deles a atribuio de um nome para o frame e o segundo direcionar o carregamento de um documento em uma janela especfica. Para indicar ao browser em qual janela os documentos dos captulos devero ser carregados, devemos incluir no documento que contm os links um novo comando chamado <BASE TARGET=nome da janela> contendo o nome da janela-alvo. Criando a Estrutura dos Frames Esse arquivo contm a definio de dois frames, um para o menu e outro para os captulos. O frame que receber o nome de textos, e nenhum arquivo ser previamente carregado. O frame que conter o menu principal recebera o nome de menu. Nessa situao, apenas o nome do frame textos tem de ser obrigatoriamente especificado. Criando o contedo do Menu O arquivo de menu contm os links para os captulos do manual. Nesse documento, voc deve incluir o comando <BASE TARGET>, que responsvel por indicar ao browser onde os arquivos vinculados pelo comando <A HREF> devem ser carregados. Em nosso exemplo, ele orienta o browser a carregar os links no frame chamado textos. Se esse comando for omitido, os captulos sero carregados no frame do menu. Os cdigos dos documentos ficaro 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.HTM>Introduo</A> <LI><A HREF=B.HTM>Captulo 1</A> <LI><A HREF=C.HTM>Captulo 2</A> <LI><A HREF=D.HTM>Captulo 3</A> <LI><A HREF=E.HTM>Captulo 4</A> <LI><A HREF=F.HTM>Captulo 5</A> </UL> </CENTER> </BODY> </HTML> Script para o topo.htm <html> <head> <title>Topo</title> </head> <body> <div align="center"> <img src="images/principal1.gif"> </div> </body> </html> Crie tambm um arquivo com a estrutura bsica do HTML e salve-o com o nome de nada. Veja agora o cdigo para o frame: <html> <head> <title>Frames</title>
</head> <frameset rows="64,*"> <frame name="topo" scrolling="no" noresize src=="topo.htm"> <frameset cols="150,*"> <frame name="menu" src="menu.htm"> <frame name="textos" src=nada.htm> </frameset> <noframes> <body> <p>Esta pgina usa quadros mas seu navegador no aceita quadros.</p> </body> </noframes> </frameset> </html> No cdigo acima pode-se ver tambm que foi utilizada a TAG <NOFRAMES> </NOFRAMES> esta TAG utilizada para avisar o usurio que o navegador dele no suporta frames, ento pode-se colocar qualquer texto ou figura HTML para o usurio. IFRAME O IFRAME um frame interno que s pode ser utilizado em IE de verso 4 ou superior, ele est facilitando a troca de informaes em sites de que precisam mudar textos, pois ele pode ser colocado no documento e conforme altera-se o documento do IFRAME ele altera na pgina, ele possui os mesmos parmetros dos Frames. <html> <head> <title>IFRAME</title> </head> <body bgcolor="#000000" text="#FFFFFF"> <p> </p> <p align="center">Utilizando IFRAME</p> <div align="center"> <center> <table border="0" width="80%" height="193"> <caption> </caption> <tr>
<td width="100%" height="187" align="center"> <p align="center"><IFRAME SRC="textos.htm"></iframe></td> </tr> </table> </center> </div> </body> </html>
META O comando META um dos comandos pouco explorados da linguagem HTML. Contudo, responsvel por importantes aspectos de uma pgina HTML. Atravs dele, podemos criar documentos dinmicos, informaes especificas que sero usadas pelo servidor, em resposta a uma solicitao do usurio, ou pelos mecanismos de busca na Internet. INFORMAES ESPECFICAS Esse comando das linguagem HTML pode ser usado para criar metainformao ou variveis, e seus contedos descrevem caractersticas do documento HTML, como o nome do autor, data de vencimento ou criao do documento, palavras-chave, etc. <META HTTP-EQUIV=resposta CONTENT=descrio NAME=descrio URL=url> O comando META deve ser especificado entre os comandos <HEAD> </HEAD>. VARIAES DO COMANDO META Usar o recurso do autocarregamento indicado quando voc deseja exibir alguma informao inicial e depois outra informao. Por exemplo o usurio acessa uma pgina que exibe informaes sobre a empresa, depois de um tempo carrega outra pgina. Isso possvel da seguinte forma: <META HTTP-EQUIV=Refresh CONTENT=5 ; URL=arquivo.htm> Outro grande uso do comando META para que possa ser usado para as consultas em mecanismos de busca, ou seja os mecanismos verificam no comando META de sua pgina qual a sua descrio e quais so as palavras chaves do site. <meta name="description" content="Site sobre Informtica"> <meta HTML">
name="keywords"
content="Photoshop,Flash,
Fireworks,
Dreamweaver,
Podemos tambm especificar o autor e programa gerador do cdigo HTML atravs do comando META <meta name="author" content="Marcos Paulo Furlan"> <meta name="generator" content="HTML-Kit"> MULTIMIDEA O principal elemento de sucesso da Internet o hiperlink. Que permite a criao de documentos com ligaes para outros contidos em qualquer computador ligado Internet. A maioria dos usurios que acessa a Internet faz isso a partir de ambientes grficos, como o Windows, e conhecendo o Windows todos sabemos de sua capacidade em trabalhar com multimdia. Esse o propsito deste captulo, vamos aprender a trabalhar com os elementos multimdia em nossas pginas. Os principais elementos multimdia para uma aplicao so: Fotos ou imagens estticas Animao udio Vdeo CONSIDERAO NO USO DE MULTIMIDEA O grande inimigo da utilizao de multimdia o mesmo relacionado com as imagens, a velocidade de transferncia de informaes via Internet. Se uma imagem de 70Kb pode levar vrios segundos, ou at mesmo minutos para ser carregada imagine a execuo de um clipe de vdeo com mais de 1MB. Os vdeos vo se popularizar mais quando a Internet a cabo se tornar mais acessvel. INSERINDO UM VDEO Existem vrias maneiras de inserir um vdeo em sua pgina. O vdeo pode aparecer sob a forma de um link que ao ser clicado, executa o programa responsvel pela sua exibio, ou aparecer diretamente na pgina.
A maneira mais simples de incluir um clipe de vdeo em sua pgina utilizar as opes do comando IMG. O principal parmetro usado para inserir vdeo a DYNSRC, abreviatura de Dynamic Source
ATRIBUTOS UTILIZADOS EM VDEOS O vdeo como qualquer imagem em um documento HTML tambm possui uma infinidade de atributos, estes atributos esto na tabela abaixo: Atributo
ALIGN=TOP, MIDDLE, ou BOTTOM ALIGN=LEFT ou RIGHT ALT=texto
Finalidade
O texto que margeia a imagem alinhado pelo topo, meio ou base do vdeo. A imagem, ou vdeo alinhado a esquerda ou direita da pgina Especifica um texto alternativo para ser exibido no local do vdeo Especifica a largura da borda em pixels do vdeo Exibe botes de controle do tipo vdeo cassete Especifica o URL do vdeo que ser exibido. Especifica a altura do vdeo. Se o vdeo possuir outro tamanho ser ajustado para o tamanho especificado Especifica uma margem horizontal em volta da imagem para afast-la do texto que a envolve Especifique quantas vezes o vdeo ser executado. Se n for igual a 1 ou INFINITE, o vdeo ser executado continuamente. Caso contrrio, executado o nmero
Exemplo
<IMG SRC=video.avi ALIGN=MIDDLE>Este texto alinhado pelo meio da figura. <IMG SRC=video.avi ALIGN=RIGHT>Este texto aparece do lado esquerdo da imagem. IMG SRC=video.avi ALT=figura exibida.
BORDER=n CONTROLS DYNSRC=URL HEIGHT=n
<IMG SRC=vdeo.avi BORDER=5>Esta imagem possui borda de 5 pixels de largura. <IMG DYNSRC=vdeo.avi CONTROLS> <IMG SRC=vide.gif, DYNSRC=vdeo.avi> <IMG SRC=vdeo.avi WIDTH=150 HEIGHT=200>
HSPACE=n
<IMG SRC=vdeo.avi HSPACE=10 VSPACE=10>
LOOP=n LOOP=INFINIT E
<IMG SRC=vdeo.avi DYNSRC=vdeo.avi LOOP=3> o vdeo executado trs vezes.
SRC START= FILEOPEN/ MOUSEOVER
VSPACE=n WIDTH=n
de vezes especificado. Especifica o endereo do vdeo Para clips de vdeo especifica quando o vdeo deve ser executado. Como padro, o vdeo assume o valor FILEOPEN e executado imediatamente aps seu carregamento . O valor MOUSEOVER faz com que o vdeo seja executado quando o cursor passa sobre a rea da imagem do vdeo. Especifica uma margem, vertical para o vdeo, em pixels Especifica a largura da Imagem
<IMG SRC http://www.hardcore.com.br/video.avi> DYNSRC=vdeo.avi START= FILEOPEN> O vdeo executado ao ser carregado. <IMG SRC=vdeo.gif DYNSRC=vdeo.avi START=MOUSEOVER,FILEOPEN>
<IMG SRC=video.avi VSPACE=10> <IMG SRC=vdeo.avi WIDTH=150 HEIGHT=200>
USANDO O COMANDO EMBED PARA EXIBIR VDEO O comando EMBED permite a exibio no somente de vdeo, mas tambm de arquivos de diferentes tipos em uma pgina HTML e que so executados por algum plug-in previamente instalado. Ele funciona tanto no Internet Explorer quanto no Netscape Navigator. Sintaxe: <EMBED ALIGN=LEFT | RIGHT | TOP | BOTTOM BORDER=pixels FRAMEBORDER=NO HEIGHT=pixels HIDDEN=TRUE | FALSE HSPACE=pixels NAME=appletName
PALLETE=FOREGROUND | BACKGROUND PLUGINSPACE=instrURL SRC=endereo TYPE=MIMEtype VSPACE=pixels WHIDTH=pixels > </EMBED> O comando NOEMBED Para manter a compatibilidade com browsers antigos, use o comando <NOEMBED> para exibir uma mensagem indicando que o browser no tem capacidade para exibir o objeto. <html> <head> <title>Multimidea</title> </head> <body> <IMG DYNSRC="Cyclers.avi" START="fileopen" Loop="Infinite"> <HR> <embed src="admiradora.asf"></embed> <HR> <embed src="ambulancia.mpeg"></embed> </body> </html>
SOM
A incluso de som em uma home page ou aplicao Internet pode ser um recurso bastante interessante para chamar a teno do usurio. Menos problemtico do que o uso do vdeo, devido ao tamanho dos seus arquivos, o uso de som tambm enfrenta problemas de velocidade de transmisso devido s limitaes da rede ou do browser. Existem vrios tipos de formatos para arquivos de udio, porm quatro ou cinco deles dominam o mercado e so compatveis com a maioria dos browsers atuais, vejam quais so eles: AU: Esse formato dominante na plataforma Unix e compatvel com quase todas as demais plataformas. adequado para instrumentos e voz. WAV: Formato padro de som da plataforma Windows oferece boa qualidade de som, porm gera arquivos de tamanho muito grande, o que o torna problemtico para ser executado quando no existe boa velocidade de transmisso entre o browser e o servidor. MIDI: Esse formato um padro para a representao de instrumentos musicais produzidos por um instrumento eletrnico, como um sintetizador. Ao contrrio dos formatos anteriores, ele no compatvel com voz, pois na verdade o arquivo MIDI no uma gravao digital de som e sim um arquivo com comandos para a execuo de sons. Sua vantagem que ele possui um tamanho extremamente reduzido e oferece tima qualidade para msica orquestrada. MP3: Esse formato, ou seja, todos os formatos de MPA so arquivos de udio compactados, equivalentes aos arquivos de vdeo MPEG. Seu tamanho menor do que os arquivos WAV e com qualidade superior. Existe hoje na Web uma procura enorme em arquivos MP3. RAM ou RA: o formato RealAudio, e est se tornando muito popular, pois permite a execuo sob demanda, ou seja, permite transmisses ao vivo e quando executado, a partir de um arquivo, reproduz o som medida que ele vai sendo lido. Inserindo udio Assim como no caso dos clipes de vdeo, ou imagens, podemos usar duas tcnicas para incluir udio na pgina. A primeira atravs de hiperlinks, a segunda atravs do comando META e, dependendo do browser, atravs de comandos especficos. Inserindo udio atravs de Hiperlinks Veja o cdigo abaixo onde os arquivos de udio e esto vinculadas as pginas atravs de hyperlinks.
<html> <head> </head> <body bgcolor="#FFFFFF"> <a href="mission2.mid">Misso impossvel</a> <a href="solar2.wav"> do tipo .WAV</a>, <a href="gamel.au">no formato .AU</a> ou <a href="eg-follow.mp2"> no formato .mpeg</a> </body> </html> INSERINDO MSICA DE FUNDO O comando BGSOUND (Internet Explorer) Esse novo comando introduzido pelo browser da Microsoft extremamente simptico. Ele carrega e executa imediatamente um arquivo de som, assim que a pgina acessada. Uma vez iniciada a execuo do som, pode-se interromp-la pressionando a tecla ESC ou mudando de pgina. A sintaxe : Atributo
SRC= URL
Finalidade Especifica udio executado. que o ser endereo do arquivo de
Exemplo <BGSOUND SRC=ring.au
LOOP=n
Especifica quantas reproduzido.
<BGSOUND
SRC=ring.au
vezes o arquivo ser LOOP=3>
LOOP=INFINITE
O valor INFINITE reproduz o continuamente
Executa
arquivo
arquivo infinitamente
Veja um exemplo abaixo:
<html> <head> </head> <bgsound src="africa.mid"> <body bgcolor="#FFFFFF"> <font color=Red> <h1> O comando BGSOUND </h1> </font> </body> </html>
GLOSSRIO
<HTML></HTML>: Marca incio e fim de uma pgina. <HEAD></HEAD>: delimita o cabealho de uma pgina. <BODY></BODY>: Delimita o corpo de uma pgina. <TITLE></TITLE> Define o ttulo de uma pgina. <H1></H1> <H6></H6>: Define ttulos, subttulo de diferentes nveis.
<B></B>: Formata o texto em Negrito. <I></I>: Formata o texto em Itlico. <FONT></FONT>: Altera o fonte, tamanho e ou cor do texto. <P></P>: Delimita um pargrafo. <BR>: Quebra de Linha. <DIV></DIV>: Configura o alinhamento do texto. <CENTER></CENTER>:Centraliza objetos(texto, imagem, tabelas) <HR>: Cria uma linha horizontal. <IMG>: Insere uma imagem. <A></A>: Insere um Link <OL> <LI> <LI> </OL>: Cria uma lista ordenada. <UL> <LI> <LI> </UL>: Cria uma lista no ordenada. <DL> <DT></DT> <DD></DD> </DL>: Cria uma lista de definio. <FORM></FORM>: Cria um formulrio. <INPUT> Define os campos do formulrio. <SELECT OPTION></OPTION>: define uma lista de opes no formulrio. </SELECT> <TEXTAREA></TEXTAREA>: Define uma rea de texto no formulrio.
<TABLE></TABLE>: Cria uma tabela <CAPTION></CAPTION>: Define o ttulo de uma tabela. <TR></TR>: Define a linha de uma tabela. <TD></TD>: Define as clulas de uma tabela. <TH></TH>: Define as clulas de cabealho de uma tabela. <FRAMESET></FRAMESET>:Define o conjunto de janelas (frames) da tela. <FRAME>:Configura cada regio (frame) da tela. <NOFRAMES></NOFRAMES>: Define o contedo que ser exibido por browser sem suporte a frames. <APPLET></APPLET> Insere um applet Java em uma pgina. <PARAM> Definem os parmetros do applet. <STYLE></STYLE> Define os estilo usados na pgina.
Voc pode encontrar um material rico e completo no site:

http://www.icmc.usp.br/ensino/material/html/intro.html

HTML e CSS

Загружено:

Сведения о документе

Авторское право

Доступные форматы

Поделиться этим документом

Поделиться или встроить документ

Параметры публикации

Этот документ был вам полезен?

Это неприемлемый материал?

Авторское право:

Доступные форматы

HTML e CSS

Загружено:

Авторское право:

Доступные форматы

Profesora: Iara Fernandes Ribeiro Aluna: Camila Vieira de Pontes Turma: C911M em 2007

Entidade &lt; &gt; &amp;

Caracter < > &

Cor Aqua Black Fuchsia Green Brown Olive Silver White

Cdigo #70DB93 #000000 #FF00FF #00FF00 #800000 #808000 #E6E8FA #FFFFFF

Cor Blue Cyan Gray Lime Navy Red Teal Yellow

Cdigo #0000FF #00FFFF #C0C0C0 #32CD32 #23238E #FF0000 #008080 #FFFF00

VSPACE= HSPACE=> ALIGN=| BOTTOM | TOP | MIDLE

ALIGN=TOP | MIDLE | BOTTOM ALIGN=LEFT | RIGHT WIDTH=nmero| nmero%

Borboletas, Borboletas, Borboletas, Borboletas, Borboletas, Borboletas,

Borboletas, Borboletas, Borboletas, Borboletas,

Borboletas, Borboletas, Borboletas, Borboletas, Borboletas, Borboletas,

Borboletas, Borboletas, Borboletas, Borboletas,

Borboletas, Borboletas, Borboletas, Borboletas,

Especifica a cor do texto do Segundo plano. Caso no seja

DIRECTION=direo canto direito da janela para o canto esquerdo. Pode ser

BORDER=n CONTROLS DYNSRC=URL HEIGHT=n

<IMG SRC=vdeo.avi HSPACE=10 VSPACE=10>

<IMG SRC=vdeo.avi DYNSRC=vdeo.avi LOOP=3> o vdeo executado trs vezes.

SRC START= FILEOPEN/ MOUSEOVER

<IMG SRC=video.avi VSPACE=10> <IMG SRC=vdeo.avi WIDTH=150 HEIGHT=200>

Finalidade Especifica udio executado. que o ser endereo do arquivo de

Exemplo <BGSOUND SRC=ring.au

Especifica quantas reproduzido.

vezes o arquivo ser LOOP=3>

O valor INFINITE reproduz o continuamente

Veja um exemplo abaixo:

Voc pode encontrar um material rico e completo no site:

Вам также может понравиться

Entidade < > &