tutorial de html & css. apostila sobre html e css

www.DinheiroSite.com

HTML & CSS

INDICEINDICE.........................................................................................................................................................2 HTML BSICO ........................................................................................................................................5 COMO SE CRIA UM DOCUMENTO HTML............................................................................................................5 TAGS OU COMANDOS HTML........................................................................................................................... 5 ESTRUTURA BSICA........................................................................................................................................7 Criando o primeiro documento HTML..................................................................................................7 Comentrios...........................................................................................................................................8 Caracteres especiais..............................................................................................................................8 PARGRAFOS E QUEBRAS DE LINHA...............................................................................................8 O COMANDO .........................................................................................................................................8 Alinhando pargrafos............................................................................................................................8 O COMANDO
...................................................................................................................................... 8 O COMANDO ......................................................................................................................................9 Alterando o formato de linha de separao..........................................................................................9 USANDO IMAGENS COMO LINHAS SEPARADORAS......................................................................9 DIV ...........................................................................................................................................................9 BLOCKQUOTE..................................................................................................................................................9 ESTILOS DE TEXTO E FONTE.............................................................................................................10 APLICANDO CORES E TAMANHOS NO TEXTO.................................................................................................. 10 ALTERANDO O TAMANHO DA FONTE.................................................................................................................10 Size.......................................................................................................................................................10 Face.....................................................................................................................................................10 Color....................................................................................................................................................11 CABEALHOS..........................................................................................................................................11ALINHANDO CABEALHOS............................................................................................................................... 12

LISTAS....................................................................................................................................................... 12 LISTAS ORDENADAS......................................................................................................................................12 LISTAS NO ORDENADAS...............................................................................................................................12 LISTA DE DEFINIO.....................................................................................................................................13 IMAGENS.................................................................................................................................................. 14 O COMANDO IMG..........................................................................................................................................14 URLS E LINKS..........................................................................................................................................15 URL..........................................................................................................................................................15 Criando um Link com Arquivos Locais...............................................................................................16 Usando uma Imagem como Hiperlink.................................................................................................16 Vinculando Arquivos de outros diretrios..........................................................................................16 CRIANDO LINKS PARA SEES DE UMA PGINA........................................................................ 16 Criando uma ncora...........................................................................................................................16 ENVIANDO E-MAIL DIRETAMENTE DA PGINA HTML......................................................................................16 DEFININDO DESTINOS....................................................................................................................................16 TABELAS...................................................................................................................................................17ELEMENTOS BSICOS DE TABELAS.................................................................................................................... 17

PARMETROS...............................................................................................................................................18

_____________________________________________________________________ 2

HTML & CSS

Parmetros do elemento ....................................................................................................18 Parmetros do elemento ...........................................................................................................18 Parmetros dos Elementos e ........................................................................................19 FRAMES.....................................................................................................................................................20 Como funcionam os frames.................................................................................................................20 O Comando Document........................................................................................................................20 O Comando FRAMESET.....................................................................................................................20 Cols=tamanho.....................................................................................................................................21 ROWS=tamanho..................................................................................................................................21 Combinando ROWS e COLS...............................................................................................................21 O ATRIBUTO .................................................................................................21 O ATRIBUTO .................................................................................................................21 O COMANDO ....................................................................................................................... 21 Ajustando as margens internas do Frame...........................................................................................22 Barras de Rolagem e Redimensionamento dos Frames......................................................................22 INTERLIGAO DE FRAMES............................................................................................................................. 23 Criando a Estrutura dos Frames.........................................................................................................23 Criando o contedo do Menu..............................................................................................................23 IFRAME...................................................................................................................................................24 META..........................................................................................................................................................25 INFORMAES ESPECFICAS.............................................................................................................................25 VARIAES DO COMANDO META......................................................................................................................25 MULTIMIDEA..........................................................................................................................................25 CONSIDERAO NO USO DE MULTIMIDEA.......................................................................................................... 26 INSERINDO UM VDEO.................................................................................................................................... 26 ATRIBUTOS UTILIZADOS EM VDEOS..................................................................................................................26 USANDO O COMANDO EMBED PARA EXIBIR VDEO..........................................................................................27 O comando NOEMBED......................................................................................................................28 MARQUEE.................................................................................................................................................. 28 Combinando a utilizao de vrios Marquees....................................................................................30 SOM...........................................................................................................................................................30 Inserindo udio...................................................................................................................................31 Inserindo udio atravs de Hiperlinks................................................................................................31 INSERINDO MSICA DE FUNDO.........................................................................................................................31 O comando BGSOUND (Internet Explorer)....................................................................................... 31 JAVA...........................................................................................................................................................32ELEMENTO

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

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

_____________________________________________________________________ 3

HTML & CSS

DEFININDO TAGS DENTRO DO CONTEXTO.......................................................................................................38 CRIANDO UMA DEFINIO !IMPORTANT.............................................................................................................38 DEFININDO A CSS PARA IMPRESSO................................................................................................................38 DEFININDO QUBRAS DE PGINA PARA A IMPRESSO........................................................................................... 39 FAZENDO O DOWNLOADS DE FONTES................................................................................................................40 CONTROLES DE TEXTO..................................................................................................................................40 Ajustando o Kerning............................................................................................................................40 Ajustando o espaamento entre as palavras.......................................................................................40 Ajustando as Entrelinhas.....................................................................................................................40 DEFININDO SEGUNDO PLANO.........................................................................................................................41 BORDAS .....................................................................................................................................................42 ENVOLVENDO UM ELEMENTO COM TEXTO........................................................................................................42 POSICIONAMENTOS........................................................................................................................................43 Posicionamento Esttico.....................................................................................................................43 Posicionamento Relativo.....................................................................................................................43 Posicionamento Absoluto....................................................................................................................43 Posicionamento 3D.............................................................................................................................43 DEFININDO A VISIBILIDADE DE UM ELEMENTO...................................................................................................44 DEFININDO A REA VISIVEL DE UM ELEMENTO (RECORTE)...................................................................................44 Definindo o lugar do Overflow............................................................................................................45 BARRAS DE ROLAGEM COLORIDAS................................................................................................................... 45 CUIDADOS NA CONSTRUO DE UM SITE....................................................................................47 TRACE METAS..............................................................................................................................................47 FAA UM ESBOO.........................................................................................................................................47 DIVIDA O SEU SITE........................................................................................................................................47 ACESSO DIRETO A INFORMAO......................................................................................................................47 EVITE SITES TIPO CARNAVAL...........................................................................................................................47 NO SE PRENDA A PLATAFORMAS....................................................................................................................47 DIVULGUE O SEU SITE E OBSERVE OS ACESSOS...................................................................................................47 GLOSSRIO..............................................................................................................................................47

_____________________________________________________________________ 4

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.

_____________________________________________________________________ 5

HTML & CSS

Os principais elementos de pgina HTML so, ttulos, textos, pargrafos, imagens e links, responsveis pela chamada de outras pginas para a tela: 1. 2. 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. 5. Cabealho: So linhas de texto com tamanhos especiais. Existem seis tamanhos de cabealhos. Ttulo: o texto que aparece na barra de ttulo do browser. Imagem: So figuras, desenhos e fotos usados para ilustrar a

_____________________________________________________________________ 6

HTML & CSS

ESTRUTURA BSICA A estrutura bsica de um documento HTML a seguinte: Ttulo do Documento Aqui dever ser digitado e criado a maioria dos itens que iro aparecer em sua Home Page Vamos ver um pouco sobre os elementos bsicos do HTML: : Indicam respectivamente o incio e o fim do documento. Todo o resto deve estar entre estas marcas. : Delimitam a seo de cabealho do documento. Trata-se da primeira seo do documento. : Indicam o ttulo do documento, que ser apresentado na barra superior do browser. Estas marcas devem constar da seo de cabealho. : 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. configura uma pgina com a imagem fundo.gif como fundo. BGCOLOR: Configura a cor de fundo da pgina. EX: configura uma pgina com fundo branco (padro). TEXT: configura a cor padro do texto da pgina. EX: 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: 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 Este o meu primeiro documento em HTML

_____________________________________________________________________ 7

HTML & CSS

Agora no corpo do texto vou digitar o meu primeiro texto em Html, no momento no usarei nenhuma formatao especial aqui dentro.

ComentriosPodemos tambm acrescentar comentrios ao nosso cdigo HTML, estes comentrios no aparecem para no navegado e somente no cdigo, so representados pela seguinte TAG , 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.

Caracteres especiaisExistem 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 LINHAAo 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 e
O COMANDO 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 .

Alinhando pargrafosO Comando 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 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
O comando 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

_____________________________________________________________________ 8

HTML & CSS

comando
tem como funo avanar para a linha imediatamente aps quela em que ele se encontra, sem, contudo, deixar uma linha em branco. O COMANDO O comando 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 separaoAs linhas criadas pelo comando 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 SEPARADORASEm vez de usar o comando como separador, podemos usar uma imagem com o comando . Assim como o comando HR, podemos usar os parmetros WIDTH e HEIGHT para alterar o tamanho da imagem. DIV A Tag 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: Formatao de Pargrafos Texto centralizado Aqui temos um texto justificado, aqui temos um texto justificado, Aqui temos um texto justificado,
Aqui centralizamos um texto com o elemento DIV Comeamos justificadocentralizei continuamos justificado Recuando o Texto Recuando o Texto 2 vezes

_____________________________________________________________________ 9

HTML & CSS

ESTILOS DE TEXTO E FONTEAssim 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 Texto Aplica o estilo Negrito Itlico Texto Aplica o estilo Itlico Sublinhado Texto Aplica o estilo sublinhado(No funciona em alguns Browsers Strong Texto Similar ao Negrito Typerwriter Texto Deixa o texto com espaamento regular Big Texto Aumenta a fonte e aplica negrito Small Texto Reduz e altera a fonte Sobrescrito Texto Eleva o texto e diminui seu corpo Subscrito Texto Rebaixa o texto e diminui seu corpo Pulsante Texto Faz com que o texto pisque (No funciona no IE 4. APLICANDO CORES E TAMANHOS NO TEXTO ALTERANDO O TAMANHO DA FONTE Um dos recursos de tratamento do texto mais interessantes da linguagem HTML a possibilidade de alterar o tamanho, a cor e o tipo da fonte do texto utilizado. O comando responsvel por isso o comando , que do tipo liga desliga.

SizeO 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 o texto ser exibido no tamanho 5. Se o valor for especificado sem sinal, a fonte ser exibida no tamanho especificado.

FaceEsse 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._____________________________________________________________________ 10

HTML & CSS

ColorEsse 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. Aplicando estilos de texto Este texto est emNegrito
Este texto est em Itlico
Este texto est em Sublinhado
Este texto est em Negrito e Itlico Este texto recebeu o estilo chamado Strong que parecido com negrito
Este texto recebeu o estiloTyperwriter. Este texto recebeu o formato de fonte big que cria letras grandes.
Este texto recebeu o formato de fonte Small que cria letras pequenas.
Este um exemplo de texto Sobrescrito pelo comando SUP.
Este um exemplo de texto onde foi usado o efeito Subscrito do comando SUB. Para chamar a ateno use o comando BLINK.

CABEALHOSOutra 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 at . Alm do tamanho diferenciado, o comando cabealho insere uma linha em branco antes e depois da linha que contm o comando. Eles so

_____________________________________________________________________ 11

HTML & CSS

perfeitos para criar ttulos e iniciar sees dentro de uma pgina. O comando possui o maior tamanho enquanto que possui o menor tamanho de fonte. ALINHANDO CABEALHOS Como padro um cabealho gerado pelo comando sempre posicionado no lado esquerdo da linha. Usando o parmetro ALIGN pode-se centralizar ou ajustar o cabealho direita da linha. Veja o cdigo: Alinhando Cabealhos Cabealho sem alinhamento especial Cabealho com alinhamento centralizado Cabealho com alinhamento direita

LISTASNa 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 ... 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 . 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

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.

_____________________________________________________________________ 12

HTML & CSS

Como j foi visto acima ... 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 ... 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. Listas de definio Listas de definio HTML Hiper Text Markup Language OL Listas ordenadas com numerao. UL Listas sem ordenao LI Elemento da Lista Listas no ordenadas combinadas
com uma lista de Definio Parmetro do elemento OL

Parmetros do elemento IMG

BORDER

HEIGHT

VSPACE

HSPACE

_____________________________________________________________________ 13

HTML & CSS

IMAGENSVoc pode obter uma imagem atravs de uma cpia feita a partir de uma pgina da Internet, atravs de CDs ROMs, Scanners, etc. ou pode cria-las a partir de um programa de imagens. O COMANDO IMG Esse comando define a posio de uma imagem que aparece no corpo do documento. 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

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

_____________________________________________________________________ 14

HTML & CSS

Imagens 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, 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,
Usando uma imagem como marcador
Usando imagens como linhas separadoras

URLS E LINKSAt 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

_____________________________________________________________________ 15

HTML & CSS

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 LocaisVincular 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 de ncora. Veja a sintaxe bsica deste comando: caracteres 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 HiperlinkVoc pode usar uma imagem como hiperlink envolvendo-a com o comando .Em vez de especificar um texto de hiperlink, voc usa o comando para colocar a imagem.

Vinculando Arquivos de outros diretriosVoc 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 e dois de seus parmetros da linguagem. Um o , usado para criar o link em si, e o outro o , que cria ncoras ou endereos de sees de um documento, permitindo seu endereamento.

Criando uma ncoraPara 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. Texto Opcional 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 , que usa a opo MAILTO no lugar da URL. Tire as suas dvidas DEFININDO DESTINOS

_____________________________________________________________________ 16

HTML & CSS

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. Links Links Microsoft Macromedia Adobe e-mail Criando as ncoras Textos Imagens TEXTOS IMAGENS

TABELASAssim 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. 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 ... 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 e . ... 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. ... 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 .

_____________________________________________________________________ 17

HTML & CSS

... 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. ... Table Header ou Cabealho de Tabela Elemento que define clulas de cabealho. Clulas de cabealho tm caractersticas idnticas a clulas de dados definidas por , 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 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: 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: 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: CELLPADDING Determina, em pixels, o espao entre o contedo e as bordas da clula. Exemplo: ALIGN Configura o alinhamento horizontal da tabela em relao aos outros elementos da pgina. Pode conter os valores LEFT (esquerda), CENTER (centro) ou RIGHT( direita). Este parmetro no funciona em alguns browsers. BGCOLOR Define a cor de fundo da tabela.

Parmetros do elemento 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

_____________________________________________________________________ 18

HTML & CSS

esquerda para as clulas de dados (), e centralizado para clulas de cabealho (). 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 e 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 (), e centralizado para clulas de cabealho (). 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: Tabelas Ttulo da Tabela Texto1 Texto 2

bordercolorlight="#000080"

_____________________________________________________________________ 19

HTML & CSS

Texto 3 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.

FRAMESO 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 framesAo contrrio da maioria dos recursos da linguagem HTML, o uso frames requer um planejamento prvio. Esse planejamento consiste na criao da estrutura dos frames, na qual voc ir especificar a quantidade de frames, a disposio que eles tero na tela, a largura e a altura de cada frame, assim como o contedo que ser exibido em cada um deles. Trabalhar com frames exige duas etapas. Na primeira voc cria o layout dos frames, na segunda, define seu contedo.

O Comando DocumentO 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 e . Em seu lugar usado o comando . 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 para definir suas caractersticas individuais.

O Comando FRAMESETEste comando do tipo continer, ou seja deve ser aberto e fechado. Veja a sintaxe deste comando:

Cols=tamanhoO 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 Usando valores relativos Para dividir os frames igualmente pela largura da janela do browser, a melhor opo usar um asterisco (*) para cada coluna Usando valores percentuais A terceira forma de determinar a largura de uma coluna especificar os valores em forma de percentual, totalizando 100 por cento
A Bruxa de Blair 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
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

Incluindo a CSS em um site da WEBUm 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

_____________________________________________________________________ 35

HTML & CSS

CSS
A Bruxa de Blair 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 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 PRINCIPAIS ATRIBUTOS DE UMA FOLHA DE ESTILO

Atributos de PosioElemento 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 FontesElemento Font-family Font-size Font-style Definio Fonte que ser mostrar o texto Tamanho da Fonte Estilo usada Exemplo de Atributo para Helvetica, Arial, Courier 12pt,10cm, 5in Normal, italic

_____________________________________________________________________ 36

HTML & CSS

Font-weight

Peso da fonte

Bold, lighter,100,300

Atributos e Cores de Fundo da PginaElemento Color Backgrouncolor Backgroundimage Definio Cor do texto Cor de fundo Imagem de fundo Exemplo de Atributo Marrom,#ffffcc Marrom,#ffffcc Imagem.gif

Atributos de TextoElemento 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 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: .... 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;} .... LAYERS

_____________________________________________________________________ 37

HTML & CSS

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: : Equivalente :Equivalente 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: Tags Aninhadas < Capitulo Anterior Prximo Captulo > Novo Captulo Teste de pargrafo, Teste de pargrafo, Teste de pargrafo, Teste de pargrafo, Teste de pargrafo, Teste de pargrafo, Efeito curiosos 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

_____________________________________________________________________ 38

HTML & CSS

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: Midias Diferentes Mdia de tela
O que pode ser visto na tela ser diferente na impresso Teste DEFININDO QUBRAS DE PGINA PARA A IMPRESSO 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;>.... Onde always Fora a quebra de pgina antes do elemento. Auto permite que o browser coloque as quebras de pgina.

_____________________________________________________________________ 39

HTML & CSS

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 KerningO 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 palavrasPodemos 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 EntrelinhasO 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: Ajustando o Texto Palavras com Espaamento 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 Espaamento entre letras Espaamento entre letras Espaamento entre letras Espaamento entre letras 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: Cores e planos de fundo

_____________________________________________________________________ 41

HTML & CSS

testando cores de preenchimento texto 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. Boder style Border width None Thin Dotted Medium Dashed Tick Solid lenght Double Groove Ridge Inset outset Exemplo: Untitled Clula 1 abaixoabaixo e direita Texto envolvido por bordas
com duas linhas ENVOLVENDO UM ELEMENTO COM TEXTO

_____________________________________________________________________ 42

HTML & CSS

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 palavra-chave 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 EstticoComo 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 RelativoUm 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 AbsolutoO 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 3DApesar 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 z-index:n;. Exemplo: Posicioamento 3D

_____________________________________________________________________ 43

HTML & CSS

Posicionamento 3D Posicionamento 3D Posicionamento 3D Nesta folha de estilo forma utilizados posicionamento, IDS e classes e utilizamos o Span que chama as IDS e as classes Para saber mais sobre folhas de estilo acesse o site da W3 onde voc poder at mesmo conseguir alguns exemplos. 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) .

_____________________________________________________________________ 44

HTML & CSS

Definindo o lugar do OverflowQuando 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: Recortando a imagem

BARRAS DE ROLAGEM COLORIDAS 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 .

_____________________________________________________________________ 45

HTML & CSS

Basta apenas especificar as cores para cada uma das partes de sua barra de rolagem e depois clicar no boto Generate Code

_____________________________________________________________________ 46

HTML & CSS

CUIDADOS NA CONSTRUO DE UM SITEConstruir 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: Marca incio e fim de uma pgina. : delimita o cabealho de uma pgina._____________________________________________________________________ 47

HTML & CSS

: Delimita o corpo de uma pgina. Define o ttulo de uma pgina. : Define ttulos, subttulo de diferentes nveis. : Formata o texto em Negrito. : Formata o texto em Itlico. : Altera o fonte, tamanho e ou cor do texto. : Delimita um pargrafo.
: Quebra de Linha. : Configura o alinhamento do texto. :Centraliza objetos(texto, imagem, tabelas) : Cria uma linha horizontal. : Insere uma imagem. : Insere um Link : Cria uma lista ordenada.

: Cria uma lista no ordenada. : Cria uma lista de definio. : Cria um formulrio. Define os campos do formulrio. : define uma lista de opes no formulrio. : Define uma rea de texto no formulrio. : Cria uma tabela : Define o ttulo de uma tabela. : Define a linha de uma tabela. : Define as clulas de uma tabela. : Define as clulas de cabealho de uma tabela. :Define o conjunto de janelas (frames) da tela. :Configura cada regio (frame) da tela. : Define o contedo que ser exibido por browser sem suporte a frames. Insere um applet Java em uma pgina. Definem os parmetros do applet. Define os estilo usados na pgina.

_____________________________________________________________________ 48

tutorial de html & css. apostila sobre html e css

Documents