Tutorial de HTML Com CSS

HTML & CSS
INDICE
INDICE........................................................................................................................................................2 HTML BSICO ......................................................................................................................................5 COMO SE CRIA UM DOCUMENTO HTML....................................................................................................5 TAGS OU COMANDOS HTML .....................................................................................................................5 ESTRUTURA BSICA ..................................................................................................................................6 Criando o primeiro documento HTML.................................................................................................6 Comentrios .........................................................................................................................................6 Caracteres especiais.............................................................................................................................6 PARGRAFOS E QUEBRAS DE LINHA ..............................................................................................7 O COMANDO <P>......................................................................................................................................7 Alinhando pargrafos...........................................................................................................................7 O COMANDO <BR>...................................................................................................................................7 O COMANDO <HR>...................................................................................................................................7 Alterando o formato de linha de separao .........................................................................................7 USANDO IMAGENS COMO LINHAS SEPARADORAS......................................................................7 DIV...........................................................................................................................................................7 BLOCKQUOTE ............................................................................................................................................8 ESTILOS DE TEXTO E FONTE .............................................................................................................8 APLICANDO CORES E TAMANHOS NO TEXTO ...........................................................................................8 ALTERANDO O TAMANHO DA FONTE ..........................................................................................................8 Size .......................................................................................................................................................9 Face ......................................................................................................................................................9 Color.....................................................................................................................................................9 CABEALHOS ........................................................................................................................................10
ALINHANDO CABEALHOS .......................................................................................................................10
LISTAS......................................................................................................................................................10 LISTAS ORDENADAS ................................................................................................................................10 LISTAS NO ORDENADAS ........................................................................................................................10 LISTA DE DEFINIO ...............................................................................................................................10 IMAGENS.................................................................................................................................................11 O COMANDO IMG .....................................................................................................................................11 URLS E LINKS ........................................................................................................................................13 URL ........................................................................................................................................................13 Criando um Link com Arquivos Locais ..............................................................................................13 Usando uma Imagem como Hiperlink ................................................................................................13 Vinculando Arquivos de outros diretrios..........................................................................................13 CRIANDO LINKS PARA SEES DE UMA PGINA ........................................................................13 Criando uma ncora ..........................................................................................................................14 ENVIANDO E-MAIL DIRETAMENTE DA PGINA HTML ............................................................................14 DEFININDO DESTINOS ..............................................................................................................................14 TABELAS .................................................................................................................................................14
ELEMENTOS BSICOS DE TABELAS ...........................................................................................................14 PARMETROS ..........................................................................................................................................15
Parmetros do elemento <TABLE>...................................................................................................15 Parmetros do elemento <TR>..........................................................................................................15 Parmetros dos Elementos <TD> e <TH>........................................................................................16 FRAMES ...................................................................................................................................................17 http://Apostilas.Fok.com.br Seu site de Apostilas e Tutoriais de 42 2
HTML & CSS Como funcionam os frames ................................................................................................................17 O Comando Document .......................................................................................................................17 O Comando FRAMESET....................................................................................................................17 Cols=tamanho ....................................................................................................................................17 ROWS=tamanho.................................................................................................................................17 Combinando ROWS e COLS ..............................................................................................................18 O ATRIBUTO <FRAMESPACING=VALOR>............................................................................................18 O ATRIBUTO <FRAMEBORDER=1/0> ........................................................................................................18 O COMANDO <FRAME SRC> ..................................................................................................................18 Ajustando as margens internas do Frame ..........................................................................................19 Barras de Rolagem e Redimensionamento dos Frames .....................................................................19 INTERLIGAO DE FRAMES ......................................................................................................................19 Criando a Estrutura dos Frames........................................................................................................19 Criando o contedo do Menu .............................................................................................................19 IFRAME .................................................................................................................................................20 META........................................................................................................................................................21 INFORMAES ESPECFICAS .....................................................................................................................21 VARIAES DO COMANDO META .............................................................................................................21 MULTIMIDEA.........................................................................................................................................21 CONSIDERAO NO USO DE MULTIMIDEA ................................................................................................21 INSERINDO UM VDEO ..............................................................................................................................21 ATRIBUTOS UTILIZADOS EM VDEOS ........................................................................................................22 USANDO O COMANDO EMBED PARA EXIBIR VDEO ................................................................................23 O comando NOEMBED .....................................................................................................................23 MARQUEE ...............................................................................................................................................24 Combinando a utilizao de vrios Marquees ...................................................................................25 SOM.........................................................................................................................................................25 Inserindo udio ..................................................................................................................................26 Inserindo udio atravs de Hiperlinks ...............................................................................................26 INSERINDO MSICA DE FUNDO .................................................................................................................26 O comando BGSOUND (Internet Explorer).......................................................................................26 JAVA .........................................................................................................................................................27
ELEMENTO HTML PARA APPLETS JAVA ...................................................................................................27
FOLHAS DE ESTILO .............................................................................................................................27 VERSES DA CSS ....................................................................................................................................27 CSS - 1 ................................................................................................................................................28 CSS Positioning (CSS-P) .................................................................................................................28 CSS 2 ...............................................................................................................................................28 CSS 3 ...............................................................................................................................................28 REGRAS DA CSS......................................................................................................................................28 INCLUINDO CSS NO DOCUMENTO ...........................................................................................................28 Incluindo a CSS em uma pgina WEB ...............................................................................................29 Incluindo a CSS em um site da WEB ..................................................................................................29 PRINCIPAIS ATRIBUTOS DE UMA FOLHA DE ESTILO ...................................................................................30 DEFININDO CLASSES ................................................................................................................................31 DEFININDO IDS .......................................................................................................................................31 LAYERS ...................................................................................................................................................31 DEFININDO TAGS DENTRO DO CONTEXTO ..............................................................................................31 CRIANDO UMA DEFINIO !IMPORTANT ...................................................................................................32 DEFININDO A CSS PARA IMPRESSO ........................................................................................................32 DEFININDO QUBRAS DE PGINA PARA A IMPRESSO ................................................................................33 FAZENDO O DOWNLOADS DE FONTES .......................................................................................................33 CONTROLES DE TEXTO ............................................................................................................................33 Ajustando o Kerning...........................................................................................................................33 Ajustando o espaamento entre as palavras ......................................................................................34 Ajustando as Entrelinhas....................................................................................................................34 DEFININDO SEGUNDO PLANO ..................................................................................................................34 BORDAS ..................................................................................................................................................35 http://Apostilas.Fok.com.br Seu site de Apostilas e Tutoriais de 42 3
HTML & CSS ENVOLVENDO UM ELEMENTO COM TEXTO ..............................................................................................36 POSICIONAMENTOS ..................................................................................................................................36 Posicionamento Esttico ....................................................................................................................36 Posicionamento Relativo ....................................................................................................................36 Posicionamento Absoluto ...................................................................................................................36 Posicionamento 3D ............................................................................................................................36 DEFININDO A VISIBILIDADE DE UM ELEMENTO ........................................................................................37 DEFININDO A REA VISIVEL DE UM ELEMENTO (RECORTE) ......................................................................37 Definindo o lugar do Overflow...........................................................................................................37 BARRAS DE ROLAGEM COLORIDAS ..........................................................................................................38 CUIDADOS NA CONSTRUO DE UM SITE...................................................................................39 TRACE METAS .........................................................................................................................................39 FAA UM ESBOO ....................................................................................................................................39 DIVIDA O SEU SITE ...................................................................................................................................39 ACESSO DIRETO A INFORMAO ..............................................................................................................39 EVITE SITES TIPO CARNAVAL ...................................................................................................................39 NO SE PRENDA A PLATAFORMAS............................................................................................................39 DIVULGUE O SEU SITE E OBSERVE OS ACESSOS ........................................................................................39 GLOSSRIO ............................................................................................................................................39
http://Apostilas.Fok.com.br Seu site de Apostilas e Tutoriais de 42
HTML & CSS
HTML BSICO
A Internet , sem sombra de dvida, o lugar mais quente da atualidade, onde os internautas passam a maior parte do tempo, e onde proliferam home pages de universidades, empresas, tendncias, jornais, lojas e tudo o mais que se possa imaginar. At pouco tempo, atingir o grande pblico era privilgio de poucos. Com a WWW, tudo fica diferente; coloque uma home page no ar, mande um e-mail para algumas pessoas, e saiba que, se o contedo for bom, a sua pgina ser visitada e divulgada para outras pessoas. Para colocar uma pgina no ar, duas coisas: fazer a Home Page e conseguir um espao em disco em uma mquina conectada permanentemente na Internet. Agora voc conhecer o bsico da linguagem HTML, utilizada para se construrem pginas Web. Para fazer Home Pages, voc ter que aprender pelo menos um pouco de HTML (Hipertext Markup Language) que pode ser traduzido como Linguagem de Hipertexto baseada em Marcas. Apesar da palavra linguagem, que leva a associao com linguagens de programao, ao final deste curso 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 bom e velho 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. COMO SE CRIA UM DOCUMENTO HTML Uma pgina Web composta de textos e comandos especiais (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. At o programa Bloco de Notas pode ser usado para esta tarefa. Mas existem editores WYSIWYG (What you see is what you get, ou o que voc v o que realmente obtm) como exemplo podemos citar o Microsoft FrontPage, DreamWeaver. Existem ainda editores no WYSIWIG, onde voc tem que construir o cdigo, mas ele completa muitos comando, como exemplo podemos citar o Arachnophilia e o AceExpert, e na prpria Internet existem vrios destes editores gratuitos. TAGS OU COMANDOS HTML As TAGS 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: 1. Ttulo: o texto que aparece na barra de ttulo do browser. 2. Imagem: So figuras, desenhos e fotos usados para ilustrar a pgina. 3. Texto: a informao mais comum dentro de uma pgina. Pode ser formatado atravs de comandos. 4. 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.
http://Apostilas.Fok.com.br Seu site de Apostilas e Tutoriais de 42 5
HTML & CSS
5. Cabealho: So linhas de texto com tamanhos especiais. Existem seis tamanhos de cabealhos.
HTML & CSS
ESTRUTURA BSICA A estrutura bsica de um documento HTML a seguinte: <HTML> <HEAD> <TITLE> Ttulo do Documento</TITLE> </HEAD> <BODY> Aqui dever ser digitado e criado a maioria dos itens que iro aparecer em sua Home Page </BODY> </HTML> Vamos ver um pouco sobre os 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. EX: <BODY BGCOLOR= White > configura uma pgina com fundo branco (padro). TEXT: configura a cor padro do texto da pgina. EX: <BODY TEXT= Black > configura uma pgina com texto em cor preta. (padro). LINK, ALINK, VLINK: configura as cores dos links da pgina. ALINK configura a cor do link ativo, isto quando clicado, e VLINK configura a cor de um link j visitado. EX: <BODY LINK=Blue VLINK=Purple ALINK=Red> configura uma pgina com links azuis, links ativos vermelhos e links visitados roxos. Esta estrutura inicial simples, no entanto existem detalhes que devem ser respeitados: Todas as marcas apresentadas so do tipo incio-fim, ou seja, funcionam em pares. Em cada documento HTML s deve haver uma marca de cada tipo acima. Existe uma ordem seqencial lgica entre as marcas. Estes detalhes devem ser respeitados, seno o browser no conseguir apresentar o documento. Como HTML no uma linguagem de programao, voc no ser avisado de erros que tenha cometido na edio do seu documento.
Criando o primeiro documento HTML

<HTML> <HEAD> <TITLE>Este o meu primeiro documento em HTML</TITLE> </HEAD> <BODY BGCOLOR=Red TEXT=White> Agora no corpo do texto vou digitar o meu primeiro texto em Html, no momento no usarei nenhuma formatao especial aqui dentro. </BODY> </HTML> 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. So utilizados para ocultar scripts dentro do cdigo Html, pois caso o script no possa ser processado o mesmo ser ignorado pelo navegador.
Comentrios
HTML & CSS
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. Alguns dos smbolos mais utilizados no HTML o que corresponde ao espao do teclado, j que na HTML ele considera apenas um espao. Para uma tabela mais completa visite o link http://www.w3.org/TR/html401/sgml/entities.html
PARGRAFOS E QUEBRAS DE LINHA

Ao contrrio dos editores de texto comum, nos quais voc insere uma quebra ou avano de linha toda vez que pressiona a tecla ENTER, em um programa HTML 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 <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=CENTER ALIGN=RIGHT ALIGN=JUSTIFY ALIGN=LEFT Centraliza o texto. Alinha pela margem direita Alinha pelas duas margens Alinha pela margem esquerda (padro)
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 <HR> O comando <HR> tem como finalidade inserir uma linha divisria na posio em que foi especificado. 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. O parmetro SIZE altera a espessura (altura) da linha, deixando-a mais grossa em funo do valor especificado. Esse valor expresso em pixels. A largura ou comprimento da linha alterada pelo parmetro WIDTH e 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. Veja o cdigo abaixo:
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
HTML & CSS
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
Vamos a um exemplo: <html> <head> <title>Formatao de Pargrafos</title> </head> <body> <P align="center">Texto centralizado</p> <P align="Justify">Aqui temos um texto justificado, aqui temos um texto justificado, Aqui temos um texto justificado, <BR> <div align="center">Aqui centralizamos um texto com o elemento DIV</div> <div align="justify">Comeamos 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

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 Sintaxe Funo Negrito <B>Texto</B> Aplica o estilo Negrito Itlico <I>Texto</I> Aplica o estilo Itlico Sublinhado <U>Texto</U> Aplica o estilo sublinhado(No funciona em alguns Browsers Strong <Strong>Texto</Strong> Similar ao Negrito Typerwriter <TT>Texto</TT> Deixa o texto com espaamento 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 (No funciona no IE 4. APLICANDO CORES E TAMANHOS NO TEXTO
HTML & CSS
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
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> <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>
HTML & CSS
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.
HTML & CSS
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 OL</DT> <DD> <UL> <LI>TYPE</LI> <LI>START</LI> </UL> </DD> <DT>Parmetros 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 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.
HTML & CSS
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 HSPACE=> ALIGN=| BOTTOM | TOP | MIDLE
o nome da figura, se estiver no mesmo diretrio do programa ou seu caminho completo. Exibe o texto quando o browser no encontra ALT=texto a imagem, ou uma legenda quando o cursor do mouse passa sobre ela mostrando o texto especificado. ALIGN=TOP | MIDLE | Especifica o alinhamento da imagem relativamente linha de texto onde exibida. BOTTOM ALIGN=LEFT | RIGHT Especifica o alinhamento da imagem relativamente s bordas laterais da janela Esse parmetro especifica a largura de WIDTH=nmero| exibio da imagem independentemente do nmero% 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 HEIGHT=nmero independentemente de seu tamanho fsico. Se a imagem for maior ou menor do que o valor especificado. Especifica em pixels a largura da borda da BORDER=nmero imagem. O valor zero remove a imagem SRC=URL VSPACE=nmero HSPACE=nmero 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=
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 <html> <head> <title>Imagens</title> </head> <body background="images/backarvore.jpg" text="yellow"> <img src="images/worldmap.jpg" width="200" height="100" alt="Mapa Mundi" align="left" align="midle"> <DIV align="justify">O Mapa, O Mapa, O Mapa, O Mapa, O Mapa, O Mapa, O Mapa, O Mapa, O Mapa, O Mapa, O Mapa, O Mapa, O Mapa, O Mapa, O Mapa, O Mapa, O Mapa, O Mapa, O Mapa, O Mapa, O Mapa, O Mapa, O Mapa, O Mapa, O Mapa, O Mapa, O Mapa, O Mapa, O Mapa, O Mapa, O Mapa, O Mapa, O Mapa, O Mapa,O Mapa,O Mapa, O Mapa, O Mapa, O Mapa, O Mapa, O Mapa, O Mapa, O Mapa, O Mapa, O Mapa, O Mapa, O Mapa, O Mapa, O Mapa, O Mapa, O Mapa, O Mapa, O Mapa, O Mapa, O Mapa, O Mapa, O Mapa, O Mapa, O Mapa, O Mapa, O Mapa, O Mapa, O Mapa, O Mapa, O Mapa, O Mapa, O Mapa, O Mapa, O Mapa, O Mapa, O Mapa, O Mapa, O Mapa, </div><hr>
HTML & CSS
<img src="images/Batlow.gif" alt="Morcego" align="right"><DIV align="justify">O Morcego,O Morcego, O Morcego, O Morcego, O Morcego, O Morcego, O Morcego, O Morcego, O Morcego, O Morcego, O Morcego, O Morcego, O Morcego, O Morcego, O Morcego, O Morcego, O Morcego, O Morcego, O Morcego, O Morcego,O Morcego,O Morcego,O Morcego,O Morcego,O Morcego,O Morcego,O Morcego, </div> <Br> <img src="images/Hlpglobe.gif" width="20" height="20"><b>Usando uma imagem como marcador</b><bR> Usando imagens como linhas separadoras <br> <img src="images/arame.gif" width="120%"> </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.hardcore.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

HTML & CSS
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:softwaresuporte@hardcoreinformatica.zzn.com">e-mail</a> <hr> <P Align="center">Criando as ncoras</P> <a href="#textos">Textos</a> <a href="#imagens">Imagens</a> <P> <a name="textos">TEXTOS</a> <p> </p><p> </p><p> </p><p> </p><p> </p><p> </p> <a name="imagens">IMAGENS</a> <p align="center"><img border="0" src="entrar1.gif" width="150" height="50"></p> </body> </html>
TABELAS
Assim com as listas que ns j vimos, no HTML existem elementos especficos para a criao e formatao de tabelas. O recurso de tabelas muito interessante e muito usado nas pginas Web.
HTML & CSS
O conceito 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. 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
HTML & CSS
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>
HTML & CSS
</tr> </table> </body> </html> Ateno: Alm de 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.
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 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 Document
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>
HTML & CSS
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 O texto ao redor do frame alinhado pela parte superior do frame. MIDDLE O texto ao redor do frame alinhado pelo meio do frame. BOTTO O texto aos redor do frame alinhado pela parte inferior do M frame. LEFT O frame alinhado esquerda, deixando o texto posicionado no seu lado direito.
HTML & CSS
RIGHT
O frame alinhado direita, deixando o texto posicionado no seu lado esquerdo
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>
HTML & CSS
<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
HTML & CSS 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 name="keywords" content="Photoshop,Flash, Fireworks, Dreamweaver, HTML"> 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
HTML & CSS
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 Finalidade Exemplo ALIGN=TOP, O texto que margeia a <IMG SRC=video.avi MIDDLE, ou imagem alinhado ALIGN=MIDDLE>Este texto BOTTOM pelo topo, meio ou alinhado pelo meio da figura. base do vdeo. ALIGN=LEFT A imagem, ou vdeo <IMG SRC=video.avi ou RIGHT alinhado a esquerda ALIGN=RIGHT>Este texto ou direita da pgina aparece do lado esquerdo da imagem. ALT=texto Especifica um texto IMG SRC=video.avi ALT=figura alternativo para ser exibida. exibido no local do vdeo BORDER=n Especifica a largura da <IMG SRC=vdeo.avi borda em pixels do BORDER=5>Esta imagem possui vdeo borda de 5 pixels de largura. CONTROLS Exibe botes de <IMG DYNSRC=vdeo.avi controle do tipo vdeo CONTROLS> cassete DYNSRC=URL Especifica o URL do <IMG SRC=vide.gif, vdeo que ser DYNSRC=vdeo.avi> exibido. HEIGHT=n Especifica a altura do <IMG SRC=vdeo.avi vdeo. Se o vdeo WIDTH=150 HEIGHT=200> possuir outro tamanho ser ajustado para o tamanho especificado HSPACE=n Especifica uma <IMG SRC=vdeo.avi margem horizontal em HSPACE=10 VSPACE=10> volta da imagem para
HTML & CSS
LOOP=n LOOP=INFINIT E
SRC START= FILEOPEN/ MOUSEOVER
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 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=vdeo.avi DYNSRC=vdeo.avi LOOP=3> o vdeo executado trs vezes.
<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,FILEOPE N>
VSPACE=n WIDTH=n
<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
HTML & CSS
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> MARQUEE O Internet Explorer introduziu um comando muito simptico 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 ALIGN=posio Especifica como o texto que envolve o marquee ser alinhado. Pode conter os seguintes valores: TOP Alinha o texto pela sua parte superior MIDDLE Alinha o texto pelo meio BOTTOM Alinha o texto pela sua parte inferior Especifica o comportamento do texto, ou seja, como ser a sua rolagem pela janela. Pode conter os seguintes valores. SCROLL Inicia a rolagem introduzindo o texto de um lado e rola o texto at que ele saia completamente da janela no lado oposto ao que comeou. Aps a ultima letra ter sado da tela, o texto reaparece no canto inicial repetindo continuamente o processo. SLIDE Inicia a rolagem introduzindo o texto de um lado e rola o texto at que ele atinja a borda oposta. Quando a primeira letra do texto bater na borda, o texto para de rolar e permanece naquela posio. ALTERNAT Cria um efeito de movimento para o E texto, que inicia de um lado, entrando pela borda da janela e, ao bater na outra borda, inverte o seu deslocamento voltando para a borda inicial.
25
BEHAVIOR=tipo
HTML & CSS
BGCOLOR=cor
Especifica a cor do texto do Segundo plano. Caso no seja especificada uma cor, assumida a cor de segundo plano atual. DIRECTION=direo Especifica a direo que o texto vai usar para o deslocamento. O padro LEFT, que faz o texto deslocar-se do canto direito da janela para o canto esquerdo. Pode ser especificado tambm o valor RIGHT que inverte o sentido de deslocamento. HEIGHT=n Especifica a largura do painel, ou a rea do MARQUEE. Se for especificado um nmero, ele considerado como quantidade de pixels. Se for seguido do sinal %, indica a largura com relao janela por meio da porcentagem. HSPACE=n Especifica a largura em pixels das margens esquerda e direita, para afasta-lo do texto ou outros objetos que o cercam. LOOP=n Especifica quantas vezes ser executado. Se o valor de n for 1 ou INFINITE ele ser executado continuamente. SCROLLAMOUNT=n Indica a quantidade de pixels que ser usada para deslocar o marquee a cada movimentao. SCROLLDELAY=n Especifica em milissegundos o tempo entre cada deslocamento do texto. VSPACE=n Especifica em pixels a margem superior e inferior do marquee. WIDTH=n Especifica a altura do painel, ou rea do marquee. Se for especificado um nmero, ele considerado como quantidade de pixels. Se for seguido do sinal %, indica a altura em relao janela por meio de porcentagem Tenho certeza de que vocs vo gostar de usar esse comando para chamar a ateno dos seus usurios. Antes, porm, teste a visualizao da pgina com um browser que no seja compatvel com esse comando para verificar como ficar a tela. Infelizmente,a Netscape deixou de incorporar 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. No terceiro 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>
HTML & CSS
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> <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> vrios Marquees em seqncia </marquee> </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>
HTML & CSS
<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 Finalidade Exemplo SRC= URL Especifica o endereo do <BGSOUND SRC=ring.au arquivo de udio que ser executado. LOOP=n Especifica quantas vezes o <BGSOUND SRC=ring.au arquivo ser reproduzido. LOOP=3> LOOP=INFINITE O valor INFINITE reproduz Executa o arquivo o arquivo continuamente 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>
JAVA
Java. Com certeza voc j deve ter ouvido falar nele. Primeiramente nunca devemos confundir JAVA com Javascript, pois so coisas totalmente distintas. JAVA uma linguagem de programao desenvolvida inicialmente pela SUN, e a sua construo bastante complexa e Javascript uma linguagem de scripts desenvolvida inicialmente pela Netscape. Bom vamos agora aprender a incorporar programas de Java (classes) no documento HTML. ELEMENTO HTML PARA APPLETS JAVA Os applets Java so arquivos com extenso .class que o browser carrega junto com a sua pgina. Uma vez transferido para o seu computador, o browser executa o aplicativo da forma configurada na pgina e exibe o resultado na sua tela. Tal como as imagens referenciadas em sua pgina, um applet tambm precisa ser transferido para o seu espao de home page no seu provedor. <APPLET CODE=... WHIDTH=... HEIGHT=...
HTML & CSS
CODEBASE=...> <PARAM NAME=...VALUE=...> <PARAM NAME=...VALUE=...> <PARAM NAME=...VALUE=...> </APLLET> O elemento HTML de um applet bem simples. Tudo que voc tem a fazer colocar o nome do arquivo .class correspondente ao applet no parmetro CODE, colocar a largura e a altura da rea ocupada pelo mesmo nos parmetros WIDTH E HEIGHT e em CODEBASE voc pode especificar o diretrio (no servidor WEB) onde ficaro s seus applets. Vamos agora utilizar alguns applets mais comuns utilizados pela Web. Todos os Applets que sero mostrados aqui foram adquiridos na prpria WEB. Um dos programas mais conhecidos para a criao de applets ANFY que pode ser baixado no seguinte link: http://anfyteam.com/index.htm. Ele permite que voc possa criar o seu applet e depois copiar o cdigo e colar diretamente dentro do HTML.
FOLHAS DE ESTILO
A CSS traz para a WEB a mesma convenincia de um s lugar para definir os estilos que esto disponveis na maioria dos editores de texto. Voc pode definir uma CSS em uma localizao central para afetar a aparncia das tags HTML em uma nica pgina da WEB ou em todo um site da WEB. Embora a metodologia da CSS funcione com a HTML, no HTML. Em vez disso, a CSS um cdigo separado que amplia as capacidades da HTML, permitindo que voc redefina o modo como as tags HTML funcionam. VERSES DA CSS A CSS evoluiu nos ltimos anos sob a orientao do W3C ( www.w3.org/Style/CSS/ ) at a sua verso atual a 2(dois). Embora a maioria dos browsers modernos suporte a verso mais recente, os browsers mais antigos suportam as combinaes das verses antigas da CSS. Elas so:
CSS - 1
O W3C lanou a primeira verso oficial da CSS em 1996. Essa primeira verso inclua a capacidade de ncleo associada s CSS, tais como a capacidade de formatar texto, definir fontes e margens.
CSS Positioning (CSS-P)

Os criadores da WEB precisavam de uma forma de posicionar os elementos na tela de forma precisa. A CSS 1 j havia sido lanada e a CSS-2 ainda estava distante, de modo que a W3C lanou uma soluo intermediria: A CSS- Positioning. Esse padro de destinava a ser uma proposta que seria discutida pelas vrias partes envolvidas antes de ele ser oficializado. A Netscape e a Microsoft assumiram essas propostas, porm, e incluram as idias preliminares nas verses 4 de seus navegadores. Embora a maioria dos recursos bsicos sejam suportados em ambos os browsers como o nome de marca diversos recursos forma deixados de fora.
CSS 2
A verso mais recente da CSS surgiu em 1998. O nvel 2 inclui todos os atributos das duas verses anteriores mais uma nfase maior na facilidade de acesso e na capacidade de especificar CSSs especificas de mdia. A partir do IE e Netscape 6 suportam CSS 2.
CSS 3
Este padro ainda est em desenvolvimento, e mesmo aps o lanamento geralmente leva alguns anos para que os navegadores suportem o padro. Sem dvida, a nova adio ser o Scalable Vector Graphics (SVG). Esse um formato que permite incluir formas (linhas, crculos, curvas e outras), como vetores e no bitmaps, levando o poder dos grficos baseados no vetor e na tipografia WEB. REGRAS DA CSS O melhor da folha de estilo em cascata que ela incrivelmente fcil de configurar. No exige plug-ins ou softwares diferente apenas regras. Podemos definir regras que dizem a uma tag HTML especifica o seu contedo, ou pode criar regras genricas e, em seguida, aplic-las s TAGS como quiser. Existem trs etapas na regras da CSS.
HTML & CSS
Seletor HTML: A parte de texto de uma TAG HTML se chama seletor. Exemplo: p {font: bold 12pt times;} Classe: Uma classe uma regra de agente livre que pode ser aplicada a qualquer tag HTML de acordo com a sua vontade. Voc pode dar classe o nome que quiser. Uma classe o tipo de seletor mais verstil. Exemplo: .minhaclasse{font bold 12pt times;} ID: As regras de ID funcionam como os seletores de classe, porque podem ser aplicadas, a qualquer Tag HTML. Os seletores de ID, porm, geralmente so aplicados somente uma vez na pgina a determinada TAG HTML para criar um objeto para ser usado com uma funo JavaScript. Exemplo: #objeto{font bold 12pt times;} INCLUINDO CSS NO DOCUMENTO Embora a CSS signifique nunca ter que definir a aparncia de cada tag individualmente, voc ainda tema liberdade de definir os estilos dentro das TAGS individuais. Isso particularmente til para substituir cada um dos outros estilos que esto definidos para a pgina. Veja o exemplo abaixo: <html> <head> <title>CSS</title> </head> <body style="background-color:black;"> <br> <h1 style="color:red">A Bruxa de Blair</h1> <h2 style="color:yellow">O Filme</h2> <BR> <P style="color:White"> o filme o filme o filme o filme o filme o filme o filme o filme o filme o filme o filme o filme o filme o filme o filme <br> o filme o filme o filme o filme o filme o filme o filme o filme o filme o filme o filme o filme o filme o filme o filme o filme <br> o filme o filme o filme o filme o filme o filme o filme o filme o filme o filme o filme o filme o filme o filme o filme </p> </body> </html>
Incluindo a CSS em uma pgina WEB

A principal utilizao da CSS para definir as regras de todo um documento. Para fazer isso, voc deve inclui as regras de estilo no ttulo do documento aninhado dentro de um conteiner de estilo. Embora os resultados do acrscimo de estilo dessa forma possam parecer idnticos ao acrscimo dos estilos diretamente em uma TAG HTML, a colocao dos estilos em uma localizao comum permite alterar os estilos de um documento a partir de um nico lugar. Veja o mesmo exemplo acima como ficaria: <html> <head> <title>CSS</title> <style type="text/css"> <!-body{background-color:black;} h1{color:red;} h2{color:yellow;} p{color:white;} --> </style>
HTML & 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>
Incluindo a CSS em um site da WEB
Um dos benefcios da CSS a possibilidade de criar uma folha de estilo para ser usada no apenas em um nico documento HTML, mas atravs de todo um site da WEB. Voc pode aplicar essa folha de estilo externa a uma centena de documentos HTML. O estabelecimento de um arquivo de CSS externo um processo de duas etapas. Em primeiro lugar, configure as regras em um arquivo de texto. Em seguida, configure as regras em um arquivo e vincule ao seu documento HTML, o arquivo que contm as formataes deve possuir a extenso CSS. Veja o mesmo exemplo: Arquivo CSS: body{background-color:black;} h1{color:red;} h2{color:yellow;} p{color:white;} Arquivo HTML <html> <head> <title>CSS</title> <link rel="stylesheet" href="configura.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
HTML & CSS
Atributos de Posio
Elemento Position Top Left Width Height Z-index Padding Margin Border-width Border-color Border-style Broder-width Definio Tipo de Posicionamento Distncia Vertical para o canto superior esquerdo do quadro Distncia Horizontal para o canto superior esquerdo do quadro Largura do Quadro Altura do Quadro Camada usada quando sobrepondo quadros Margem entre as bordas do quadro e o texto interno ao quadro Margem entre as bordas do quadro e o texto externo ao quadro Largura da borda do quadro Cor da borda do quadro Estilo da Borda Largura da borda do quadro Exemplo de Atributo Absolute ou relative 10in, 150px, 30 cm 10in, 150px, 30 cm 10in, 150px, 30 cm 10in, 150px, 30 cm 1,2,3,4 2,5,10,17 1,2,3,4 Thin, medium, thick Yellow,#00FFAA None,dotted,dashed,soli d,double Thin,medium,thick
Atributos de Fontes
Elemento Font-family Font-size Font-style Font-weight Definio Fonte que ser mostrar o texto Tamanho da Fonte Estilo Peso da fonte usada Exemplo de Atributo para Helvetica, Arial, Courier 12pt,10cm, 5in Normal, italic Bold, lighter,100,300
Atributos e Cores de Fundo da Pgina

Elemento Color Backgrouncolor Backgroundimage Definio Cor do texto Cor de fundo Imagem de fundo Exemplo de Atributo Marrom,#ffffcc Marrom,#ffffcc Imagem.gif
Atributos de Texto
Elemento Word-spacing Letter-spacing Textdecoration Vertical-align Text-align Text-height Definio Espaamento entre as palavras Espeamento entre as letras Decorao de texto Alinhamento vertical Alinhamento Horizontal Altura da Linha Exemplo de Atributo 1em, 5pt 0,1em, 0,1cm, 2 pt None, underline, blink Middle, top, sub, super Left,center, right 200%, 1.2, 20pt
DEFININDO CLASSES
32
HTML & CSS
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 (.) e um nome de classe. Em seguida, abra a sua definio com uma chave ({) O nome da classe pode ser o que voc quiser, desde que use letras e nmeros. Por exemplo podemos criar uma classe chamada .copy{. Ela uma classe independente e voc pode us-la com qualquer TAG HTML, com uma condio: as propriedades definidas para a classe devem funcionar com o tipo de tag com a qual voc a usa. 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>...</p>. DEFININDO IDS Assim como o seletor de classe, o seletor de ID pode ser usado para criar estilos exclusivos que so independentes de qualquer TAG HTML em particular. Assim sendo, eles podem ser designados a qualquer TAG HTML que se aplique. As regras de ID sempre comeam com (#) e, sem seguida, o nome do ID. O nome pode ser uma palavra ou qualquer conjunto de letras ou nmeros que voc quiser. Digite as suas definies para essa classe separando-as com um ponto e vrgula. Voc pode usar um ID com qualquer tipo de propriedade, mas o melhor uso para os seletores de ID para definir os objetos exclusivos na tela. Um ID no funcionar at ser especificada com uma TAG HTML individual dentro de um documento. Exemplo: #area{color:red;margin-left:9em;position:relative;} <P id=area>...</p>. LAYERS Uma camada do Netscape uma parte independente do contedo da WEB que h dentro de um documento HTML, a qual separada com um dos pares de tags de duas camadas: <layer>: Equivalente <div style=position:absolute;> <ilayer>:Equivalente <span style=position:absolute;> DEFININDO TAGS DENTRO DO CONTEXTO Quando uma TAG cercada por outra TAG, uma dentro da outra, so chamadas de tags aninhadas. Em um conjunto aninhado, a TAG externa chamada de pai e a interna de filha. Digite o seletor HTML da TAG pai seguida por um espao. Voc pode digitar quantos seletores, HTML quiser para quantos pais e TAGS aninhadas diferentes tiver, mas o ltimo seletor da lista aquele que recebe todos os estilos da regra. Veja o exemplo abaixo: <html> <head> <title>Tags Aninhadas</title> <style type="text/css"> <!-p a:link{color:red; text-decoration:underline;} div.menu{color:#900; font-weight:bold; text-decoration:none; font-size:20;} p{font:12px;} --> </style> </head> <body> <div class="menu"> <a href="anterior.htm">< Capitulo Anterior</a> <a href="proximo.htm">Prximo Captulo ></a> </div> <hr> <h3>Novo Captulo</h3>
HTML & CSS
<p>Teste de pargrafo, Teste de pargrafo, Teste de pargrafo, Teste de pargrafo, Teste de pargrafo, Teste de pargrafo, <a href="curioso.htm">Efeito curiosos</a></p> </body> </html> CRIANDO UMA DEFINIO !IMPORTANT O valor !important pode ser includo em uma definio para fornecer o mximo de peso na determinao da ordem em cascata. Para forar que uma definio seja sempre usada abra uma regra da CSS com um seletor e uma chave ({), digite uma definio de estilo, um espao, !important e um ponto e vrgula para fechar a definio. O Netscape 4 no suporta !important Exemplo: p{ font-size:12px !important;} DEFININDO A CSS PARA IMPRESSO Quando a maioria das pessoas pensam em pginas WEB, pensa nessas pginas exibidas na tela. Entretanto, mais cedo ou mais tarde, a maioria das pessoas quer imprimir pelo menos algumas pginas da WEB. O que parece bem na tela nem sempre bom quando impresso. A CSS permite dizer ao browser para usar folhas de estilo diferentes dependendo da pgina da WEB se destinar ao monitor do computador ou a impressora. Crie duas folhas de estilo (arquivos.css), uma otimizada para o uso em uma tela de computador e outra adaptada para a impresso. Veja os cdigos abaixo: CSS para Tela: body{ color:white; font-family:Arial; background:black url(images/backarvore.jpg) no-repeat;} h1,h2{ font-weight:bold;} .cassea{ color:#999999;} CSS para Impresso: body{ color:black; font-family:Arial; h1,h2{ font-weight:bold;} .cassea{ color:#999999;} Cdigo no HTML: <html> <head> <title>Midias Diferentes</title> <link rel="stylesheet" href="tela.css" media="screen"> <link rel="stylesheet" href="impressao.css" media="print"> </head> <body> <h1> Mdia de tela </h1> <br> <span class="classea">O que pode ser visto na tela ser diferente na impresso</span> <hr> <h2>Teste</h2> </body> </html> DEFININDO QUBRAS DE PGINA PARA A IMPRESSO
HTML & CSS
Um problema que voc encontrar ao tentar imprimir um site da WEB so as quebras de pgina. Na verdade, uma pgina da WEB pode conter diversas pginas impressas. Assim sendo, o cabealho de uma seo pode aparecer na parte inferior de uma pgina e seu texto na parte superior da prxima pgina. Podemos forar uma quebra de pgina ao imprimir uma pgina da WEB, para isso utilize: < TAG style=page-break-before:always;>....</TAG> Onde always Fora a quebra de pgina antes do elemento. Auto permite que o browser coloque as quebras de pgina. FAZENDO O DOWNLOADS DE FONTES Um dos melhores recursos da WEB o download de fontes. Imagine se em vez de depender da lista limitada de fontes browser-safe ou em vez de criar grficos apenas para obter o tipo desejado, voc pudesse enviar automaticamente fontes para o computador do visitante. Com a CSS-2 isso possvel com algumas restries. Para o IE voc tem que converter as suas fontes para o formato .eot, usando um programa chamado WEFT (http://www.microsoft.com/typography/web/embedding/weft3 ) Esse programa porm exclusivo do Windows. No Netscape, voc tem que comprar o software TrueDoc(www.truedoc.com), esse programa era para funcionar tanto no Netscape quanto no IE, mas no IE tem muitos BUGS. Outro problema a diferena entre os nomes de fontes de diferentes SO. Para fazer o download de uma fone basta apenas o seguinte: @font-face{ Bastarda; src:url(Bastarda.eot);} p{font-family:Bastarda, Arial;} recomendado a incluso de pelo menos uma fonte alternativa, para o caso da fonte referenciada no conseguir ser baixada. CONTROLES DE TEXTO
Ajustando o Kerning
O Kerning se refere quantidade de espao que h entre as letras de uma palavra. Geralmente, quando h mais espao entre as letras a facilidade de leitura maior. Por outro lado, espao de menos pode impedir a leitura, fazendo com que as palavras individuais apaream menos distintas na pgina. Para definir o Kerning: Letter-spacing: 2em. Um valor positivo para o espaamento de letras inclui mais espao na quantidade padro; um valor negativo fecha o espao.
Ajustando o espaamento entre as palavras

Podemos tambm ajustar o espaamento entre as palavras. A incluso de um pequeno espao entre as palavras na tela pode ajudar a tornar o seu texto mais fcil de ler, mas espao demais interrompe o caminho do olho do leitor na tela. Para definir estes espaamento: Word-spacing: 8px;
Ajustando as Entrelinhas
O espao entre as linhas tambm podem ser aumentados para dar um efeito dramtico, criando reas de espao em negativo no texto. Mas tambm podem ser usados para facilitar a leitura e incluso de comentrios em seu texto. Para definir o espaamento entra linhas: Line-height:2; ou line-height:12px ou line-height:% Exemplo: <html> <head> <title>Ajustando o Texto</title> <style type="text/css"> <!-.copia{line-height:2;} .titulo{word-spacing:8px;} .kerning{letter-spacing:2em} --> </style>
HTML & CSS
</head> <body> <h1 class="titulo">Palavras com Espaamento</h1> <hr> <p class="copia">teste de texto com espaamento entre linhas teste de texto com espaamento entre linhas teste de texto com espaamento entre linhas teste de texto com espaamento entre linhas teste de texto com espaamento entre linhas </p> <P class="kerning">Espaamento entre letras Espaamento entre letras Espaamento entre letras Espaamento 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 pgina ou a imagem e cor de segundo plano imediatamente atrs de cada elemento individual da pgina. Para definir o segundo plano iniciamos a digitao 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 espao. Esse valor pode ser o nome da cor, um valor hexadecimal de cor ou um valor RGB. url(imagem/figura.jpg) Para utilizar uma figura de fundo podemos definir a localizao do arquivo. Alternativamente pode-se usar none em vez de url, ele instrui a browser a no utilizar uma imagem de segundo plano. Repeat Defina qual ser o modo de repetio a ser utilizado eles podem ser: Repeat-x: Instrui o browser para repetir o grfico de segundo plano na horizontal. Repeat-y: Instrui o browser para repetir o grfico de segundo plano na vertical. No-repeat: faz com que o grfico de segundo plano aparea apenas uma vez. Fixed: Instrui para que a figura fique fixa ou seja no role com o site. Scroll: Instrui para que a imagem role junto com a tela. Right top: Digite dois valores separados por um espao para especificar o lugar onde o segundo plano deve aparecer em relao ao canto superior esquerdo do elemento. Exemplo: <html> <head> <title>Cores e planos de fundo</title> </head> <style type="text/css"> <!-body{background:black url(images/astalavistagrouplogo3.jpg) no-repeat fixed center; color:white;} h2{background-color:yellow;color:red;} .copia{background-color:orange;color:brown;} --> </style> <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, voc pode usar border para definir a largura, o estilo e/ou a cor. Tambm possvel definir a borda do elemento em cada lado da caixa individualmente. As principais propriedades para bordas so: border-width, border-style, border-color.
HTML & CSS
Boder style None Dotted Dashed Solid Double Groove Ridge Inset outset Thin Medium Tick lenght
Border width
Exemplo: <html> <head> <title>Untitled</title> <style type="text/css"> <!-.inset{border-style:inset; border-color:red; border-width:15px} .double{border-style:double; border-color:orange; border-width:10px;} td{text-align:center;} --> </style> </head> <body> <table class="inset"> <tr> <td colspan=2>Clula 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, quando a capacidade de fazer o texto flutuar ao redor de um grfico foi includa, os designers de toda parte estavam maravilhados. A CSS levou este passo um pouco adiante, permitindo que o texto no apenas flutue ao redor do texto, mas tambm que flutue ao redor dos outros blocos de texto e do texto ao redor das tabelas, para isso usamos a propriedade float. Inicie sua definio digitando a propriedade float seguida de dois pontos. A seguir digite uma palavrachave para dizer ao browser o lado da tela no qual o elemento deve flutuar, e estas podem ser : right, left e none. Por exemplo Img{float:right;} POSICIONAMENTOS Quando voc define os atributos de uma tag HTML, por meio de um seletor em uma CSS, na verdade, voc separa todo o contedo dentro de um conteiner daquela TAG como sendo um elemento exclusivo da janela. Em seguida possvel manipular esse elemento exclusivo por meio do posicionamento da CSS. Um elemento pode ter um de quatro valores de posicionamento esttico, relativo, absoluto ou fixo embora apenas os trs primeiros normalmente estejam disponveis na maioria dos browsers. O tipo de posicionamento diz ao browser como ele deve tratar o elemento ao posicion-lo na janela.
Posicionamento Esttico
HTML & CSS
Como padro, os elementos so posicionados como estticos dentro da janela, a menos que voc os defina com os outros posicionamentos. Entretanto o posicionamento esttico diferente, porque um elemento esttico no pode ser posicionado ou reposicionado explicitamente.
Posicionamento Relativo
Um elemento definido como sendo posicionado relativamente fluir at o seu lugar dentro da janela ou dentro de seu elemento pai, assim como o comportamento padro de qualquer outro elemento da HTML ou seja, ele aparece aps tudo que est antes dele na HTML e antes de tudo que est aps ele na HTML. Voc pode mover um elemento posicionado relativamente a partir de sua posio natural na janela usando as propriedades top e left. Essa tcnica til para controlar o modo como os elementos aparecem com relao aos outros elementos da janela.
Posicionamento Absoluto
O posicionamento absoluto cria um elemento independente um agente livre separado do restante do documento, no qual voc pode colocar qualquer tipo de contedo HTML que quiser. Os elementos que so definidos dessa forma so colocados em um ponto exato da janela por meio das coordenadas x e y. O canto superior esquerdo da janela ou de seu elemento conteiner a origem.
Posicionamento 3D
Apesar da rea da tela ser bidimensional, os elementos que so posicionados podem receber uma terceira dimenso: uma ordem de empilhamento na qual um elemento se relaciona ao outro. Os elementos posicionados recebem nmeros automticos de empilhamento, a partir do 0 (zero)incrementalmente com 1,2,3 e assim por diante. Esse sistema chamado de ndice Z. O nmero de ndice Z de um elemento um valor que mostra sua relao 3D com os outros elementos da janela. Para definir o indice Z de um elemento, primeiro defina o posicionamento (ex: absolute) depois zindex:n;. Exemplo: <html> <head> <title>Posicioamento 3D</title> <style type="text/css"> <!-BODY{font-family:Arial;font-size:11pt;background-color:yellow;color:black;} .titulo1{position:absolute;top:20px;left:20px;z-index:1;font-family:Arial Black; color:navy;font-size:28pt;} .titulo2{position:absolute;top:17px;left:17px;z-index:2;font-family:Arial Black; color:blue;font-size:28pt;} .titulo3{position:absolute;top:14px;left:14px;z-index:3;font-family:Arial Black; color:cyan;font-size:28pt;} .box2{position:absolute;top:185px;left:60px;z-index:2;width:70px;font-family:Times;backgroundcolor:blue; color:white;font-size:10pt;font-style:italic;font-weight:bold;padding:15} .box3{position:absolute;top:90px;left:150px;z-index:3;width:200px;font-family:Courier New;background-color:navy; color:white;font-size:13pt;font-style:italic;font-weight:bold;padding:15;text-align:center;} B{color:yellow;font-size:16pt;} a{color:yellow;text-decoration:none;} a:visited{color:white;background-color:black;} --> </style> </head> <body> <Span class="titulo1">Posicionamento 3D</Span> <Span class="titulo2">Posicionamento 3D</Span> <Span class="titulo3">Posicionamento 3D</Span> </span> <span class="box2">Nesta folha de estilo forma utilizados posicionamento, IDS e classes e utilizamos o Span que chama as IDS e as classes</span>
HTML & CSS
<span class="box3">Para saber mais sobre folhas de estilo acesse o site da <a href="http://www.w3.org/TR/REC-CSS2">W3</a> onde voc poder at mesmo conseguir alguns exemplos.</span> </body> </html> DEFININDO A VISIBILIDADE DE UM ELEMENTO A propriedade visibility designa se um elemento visvel quando visualizado inicialmente na janela. Se a visibilidade estiver definida como hidden, o elemento invisvel, mas ainda ocupa espao no documento, e um grande retngulo vazio aparece no lugar do elemento. Exemplo: .hide{position:relative; visibility:hidden;} DEFININDO A REA VISIVEL DE UM ELEMENTO (RECORTE) Ao contrrio da definio de largura e altura de um elemento, a qual controla suas dimenses, o recorte de um elemento designa a quantidade daquele elemento que visvel na janela. O restante do contedo do elemento ainda est l, mas ficar invisvel para o espectador e ser tratado como um espao vazio pelo browser. Para isso usamos a propriedade clip: rect(n n n n) .
Definindo o lugar do Overflow

Quando um elemento recortado ou quando a largura e a altura so menores do que a rea necessria para exibir tudo, parte do contedo no exibida. A propriedade overflow permite especificar como esse contedo extra tratado. Para definir o controle do overflow use: width, height,overflow(auto, scroll, hidden e visible) Exemplo: <html> <head> <title>Recortando a imagem</title> <style type="text/css"> <!-.recorte{position:absolute; clip:rect(15 100 95 50); top:0px; left:0px;} .over{ width:250px; height:150px; overflow:auto; float:right; margin:5px;} --> </style> </head> <body> <div class="recorte"><img src="images/worldmap.jpg" align="left"></div> <div class="over"><img src="images/worldmap.jpg" align="left"></div> </body> </html>
BARRAS DE ROLAGEM COLORIDAS

HTML & CSS
Uma das ltimas modas na CSS a possibilidade de colocar cores nas barras de rolagem, para facilitar este processo existem vrios programas que tratam deste recurso um dos mais conhecido o CollWeb Scrollbars que pode ser baixado no site www.superdownloads.com.br .
Basta apenas especificar as cores para cada uma das partes de sua barra de rolagem e depois clicar no boto Generate Code <STYLE type="text/css"> <!-BODY { scrollbar-face-color:#8080FF; scrollbar-highlight-color:#FFFFFF; scrollbar-3dlight-color:#0080FF; scrollbar-darkshadow-color:#004080; scrollbar-shadow-color:#0000FF; scrollbar-arrow-color:#FFFFFF; scrollbar-track-color:#E0E0E0; } --> </STYLE>
40
HTML & CSS
CUIDADOS NA CONSTRUO DE UM SITE

Construir um site interessante um grande desafio, e saber HTML no o suficiente, ento agora vamos dar a voc algumas regras de boa etiqueta na WEB TRACE METAS Existem hoje muitas pginas na WEB e com os mais variados assuntos, 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 um site 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 criar bookmarks (indicadores) lembre-se de que 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 segui 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 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 ao cesso ao seu site, se ele estiver baixo com certeza alguma coisa nele est errada.
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.
HTML & CSS
<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.
42

Tutorial de HTML Com CSS

Hochgeladen von

Dokumentinformationen

Copyright

Verfügbare Formate

Dieses Dokument teilen

Dokument teilen oder einbetten

Freigabeoptionen

Stufen Sie dieses Dokument als nützlich ein?

Sind diese Inhalte unangemessen?

Copyright:

Verfügbare Formate

Tutorial de HTML Com CSS

Hochgeladen von

Copyright:

Verfügbare Formate

HTML & CSS

http://Apostilas.Fok.com.br Seu site de Apostilas e Tutoriais de 42

HTML & CSS

HTML & CSS

http://Apostilas.Fok.com.br Seu site de Apostilas e Tutoriais de 42

HTML & CSS

Criando o primeiro documento HTML

HTML & CSS

PARGRAFOS E QUEBRAS DE LINHA

Alterando o formato de linha de separao

USANDO IMAGENS COMO LINHAS SEPARADORAS

HTML & CSS

ESTILOS DE TEXTO E FONTE

HTML & CSS

HTML & CSS

Para chamar a <BLINK>ateno</BLINK> use o comando BLINK.</font> </BODY> </HTML>

HTML & CSS

HTML & CSS

HTML & CSS

Criando um Link com Arquivos Locais

Usando uma Imagem como Hiperlink

Vinculando Arquivos de outros diretrios

HTML & CSS

Criando uma ncora

HTML & CSS

Parmetros do elemento <TABLE>

HTML & CSS

Parmetros do elemento <TR>

Parmetros dos Elementos <TD> e <TH>

HTML & CSS

Como funcionam os frames

HTML & CSS

Combinando ROWS e COLS

HTML & CSS

O frame alinhado direita, deixando o texto posicionado no seu lado esquerdo

Ajustando as margens internas do Frame

Barras de Rolagem e Redimensionamento dos Frames

Criando a Estrutura dos Frames

Criando o contedo do Menu

HTML & CSS

HTML & CSS

HTML & CSS

SRC START= FILEOPEN/ MOUSEOVER

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

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

HTML & CSS

WHIDTH=pixels > </EMBED>

http://Apostilas.Fok.com.br Seu site de Apostilas e Tutoriais de 42

HTML & CSS

Combinando a utilizao de vrios Marquees

HTML & CSS

Inserindo udio atravs de Hiperlinks

HTML & CSS

O comando BGSOUND (Internet Explorer)

HTML & CSS

CSS Positioning (CSS-P)

HTML & CSS

Incluindo a CSS em uma pgina WEB

HTML & CSS

Incluindo a CSS em um site da WEB

HTML & CSS

Atributos e Cores de Fundo da Pgina

http://Apostilas.Fok.com.br Seu site de Apostilas e Tutoriais de 42

HTML & CSS