CADERNO DE EXERCCIOS EDITOR DE TEXTO - WRITER

APOSTILA DE HTML

APOSTILA HTML

1 AULA
Assuntos a serem Abordados: Notepad (Bloco de Notas) e Notepad++ O que HTML? Marcaes HTML (tags) Estrutura de uma pgina HTML O que so Cabealhos? Pargrafos e Quebra de Linha Elementos e Atributos de Pginas Alinhamentos de pargrafo Criando uma Diviso Texto Pr-Formatado Verificao de Aprendizagem (Ver o Caderno de Exerccios) 1. Notepad(loco de Notas) e Notepad++ Notepad(Bloco de Notas) O Notepad (ou Bloco de notas em portugus) um editor de textos bsico que pode ser utilizado para criar documentos simples. O uso mais comum do Bloco de notas exibir ou editar arquivos de texto (.txt), mas muitos usurios o consideram uma ferramenta simples para criar pginas da Web. Como o Bloco de notas oferece suporte apenas a uma formatao muito bsica, no possvel salvar acidentalmente uma formatao especial em documentos que devem permanecer como texto puro. Isso especialmente til ao criar documentos HTML para uma pgina da Web, uma vez que os caracteres especiais ou outra formatao no podem aparecer na pgina da Web publicada, pois podem at causar erros.

APOSTILA HTML

Notepad++ O Notepad++ um editor de texto que suporta vrias linguagens de programao rodando sob o sistema Microsoft Windows. O objetivo do Notepad++ oferecer um esguio e eficiente binrio com uma interface grfica totalmente modificvel. Alm disto, usurios podem definir suas prprias linguagens usando um "sistema de definio de linguagem" integrado, que faz do Notepad++ extensvel, para ter colorizao de sintaxe e compactao de trechos de cdigo. O Notepad++ no apenas um editor de cdigo, mas tambm uma alternativa ao bloco de notas graas a sua velocidade.

2. O QUE HTML?

HTML: Hyper Text Markup Language (Uma linguagem de Marcao de Texto) A HTML uma linguagem de marcao. Criar um documento em uma linguagem de marcao significa que voc comea com o texto da sua pgina e inclui tags especiais no incio e no final de determinadas palavras ou pargrafos. Caractersticas Gerais do HTML Documentos HTML so arquivos escritos em ASCII - texto. Podem ser criados em qualquer editor de texto (wordpad, edit, notepad). Existem editores especficos para vrias plataformas. 3

APOSTILA HTML

Existem conversores de vrios formatos, por exemplo, doc para html. A unidade mnima de informao a pgina. H diferenas entre os diversos clientes Web, de forma que nem todas as marcaes e seus correspondentes recursos so suportados por todos eles. Quando um cliente no entende uma determinada marcao, ele simplesmente a ignora. Ao criar um documento, importante test-lo com vrios clientes.

3. MARCAES HTML (Tags) Marcaes HTML conhecidas como tags so os sinais de menor que e maior que ( '<' e '>' ), e tudo que estiver entre eles. As tags so partes importantes em documentos HTML, elas so as responsveis por toda a formatao do texto. Com elas voc pode dividir o documento em rea de cabealho e corpo, colocar ttulos, criar tabelas, divises, formulrios e ainda formatar trechos especficos do texto. 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 um texto. H excees a esse funcionamento em pares das marcaes. Por exemplo, a que indica um final de pargrafo: <p> . No necessita de uma correspondente: </p>. A marcao que indica quebra de linha - <br> tambm no precisa de uma correspondente, e outras tais como <hr> e <li>.

Exemplo de tag : <nome da tag> texto </nome da tag> Assim como outras linguagens, HTML possui uma estrutura bsica para seus programas. Para que um browser interprete corretamente o programa, ele deve possuir alguns comandos bsicos que sempre devero estar presentes. Alguns browsers at dispensam seu uso, porm melhor assumir tais comandos como parte fundamental do programa. INFORMAES TEIS Uma considerao a ser feita em HTML sobre as tags, que elas no so sensveis caixa, ou seja, a notao <title> equivalente a <TITLE>, embora as convenes atuais incentivem o uso de todas as tags em letras minsculas. Ento, para seguir os mais novos padres web voc deve usar letras minsculas. Uma outra questo que pode surgir sobre a extenso dos arquivos. Este fato uma herana dos tempos antigos (no que diz respeito Internet ) do MS-DOS e do Windows 16 bits, em que os nomes dos arquivos tinham no mximo 8 caracteres e as suas extenses no podiam ter mais de 3 caracteres, e por isso era comum ver arquivos com nomes como 'index.htm'. Essas deficincias, que no passado obrigaram a usar a extenso .htm em vez de .html j foram eliminadas, logo totalmente aceitvel usar 'index.html' ou 'index.htm'.

4. ESTRUTURA DE UMA PGINA HTML 4

APOSTILA HTML

Uma pgina HTML dividida em duas partes: a cabea e o corpo. Na cabea (ou cabealho) so definidos os atributos principais do documento, como o ttulo e as palavras-chave. O corpo contm a parte visvel do documento, sendo aquela que voc ver processada em seu navegador. Estrutura Bsica de uma Pgina HTML <html> <head> <title> Ttulo da Pgina </title> </head> <body> Esta minha primeira pgina em HTML. </body> </html> A primeira tag em seu documento HTML <html>. Esta tag define o incio de um documento HTML e indica ao navegador que todo contedo posterior deve ser tratado como uma srie de cdigos HTML. A ltima tag em seu documento dever ser </html>. Esta tag indica ao navegador que o fim de seu documento HTML. A tags <head> ... </head> representam a informao do cabealho. Nenhuma informao contida no cabealho exibida na janela do navegador. Estes comandos para cabealho so opcionais, isto , um programa HTML pode funcionar sem eles. Mas conveniente us-los, pois o ttulo da pgina acrescentado atravs deles. A tags <title> ... </title> representam o ttulo de seu documento, ou seja, o texto que estiver contido entre estas tags ser o ttulo e ser exibido na legenda do navegador, na parte de cima do browser. O texto entre as tags <body> ... </body> so as informaes que sero exibidas na pgina. Estas tags definem o corpo de uma pgina HTML. 5. O QUE SO CABEALHOS? Os cabealhos ( tambm chamados de Headings) servem para criar ttulos diferenciar as sees da sua pgina. Cabealhos so exibidos em letras maiores e em negrito. O primeiro cabealho em cada documento deve estar marcado como <H1>. Eles possuem seis valores diferentes, sendo que a de valor 1 a que possui a maior fonte e a de valor 6 possui a menor fonte.. Por exemplo, usando o seguinte cdigo: <h1> Ttulo 1 </h1> <h2> Ttulo 2 </h2> <h3> Ttulo 3 </h3> <h4> Ttulo 4 </h4> <h5> Ttulo 5 </h5> <h6> Ttulo 6 </h6> No cdigo acima, o HTML automaticamente solta uma linha em branco entre um Ttulo e outro. 5

APOSTILA HTML

Tome cuidado ao definir o tamanho de um cabealho, voc no est definindo o tamanho da letra (fonte 10, fonte 14). Voc apenas define que ele aparecer com maior tamanho e destaque que o resto do texto. 6. PARGRAFOS E QUEBRA DE LINHA PARGRAFOS Para comear 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>. Esse comando dever aparecer em par: <p> </p>. QUEBRA DE LINHA A tag <br> utilizada quando voc quer terminar uma linha, mas no quer comear um novo pargrafo. Com este comando voc faz com que ocorra uma quebra de linha, onde voc posicionar a tag. Note que para o elemento <br> no existe o comando </br>, isto , a quebra de linha no age numa regio de texto delimitada, mas sim num ponto do texto. INFORMAES TEIS Sempre que voc quiser inserir linhas em branco, utilize a tag <br>. Existem pessoas que utilizam pargrafos vazios para obter o mesmo resultado, mas isso est errado. A tag <p> deve ser usada apenas para definir pargrafos, e o elemento <br> no deve ser usado, por exemplo, para criar listas, pois existem tags concebidas especificamente para isso. Sempre que voc precisar obter uma formatao especial , voc deve usar o elemento que foi criado para esse efeito. 7. ELEMENTOS E ATRIBUTOS DE PGINAS Elementos HTML so definidos usando tags de abertura, contedo e tag de fechamento. Tudo o que se encontrar entre as tags de abertura e de fechamento fazem parte do contedo do elemento. Uma pgina HTML composta basicamente de ttulos, textos, pargrafos, imagens e links, responsveis pela chamada de outras pginas para a tela. Todos esses elementos so posicionados na pgina por meio de comandos especficos de linguagem. Ttulo O ttulo de uma pgina web indica qual o assunto abordado e ir aparecer na barra de ttulo do browser. Voc poder ter apenas um ttulo. Este ttulo utilizado por programas de lista (hotlist) do seu navegador e tambm por outros programas que catalogam pginas da Internet. Para atribuir um ttulo pgina voc dever utilizar a tag: <title> </title>. Esta tag sempre ser includa no cabealho (entre as tags <head> </head). Imagem So figuras, desenhos e fotos usados para ilustrar a pgina. Texto 6

APOSTILA HTML

a informao mais comum dentro da pgina. Pode ser formatado atravs de vrios comandos.

Atributos HTML, definem caractersticas adicionais aos elementos, informam ao navegador a respeito das propriedades que os elementos podem assumir. Tais atributos devem ser colocados sempre na tag de abertura e nunca na tag de fechamento, logo aps o nome do elemento, precedido de um espao e composto de um nome de atributo, um sinal de igual ( = ) e um valor de atributo, cercado por aspas duplas ( " ) ou simples ( ). No HTML, os valores dos atributos podem ser definidos da forma: atributo=valor Assim como existem muitas tags, tambm existem muitos atributos. Alguns atributos so empregados em tags especficas, enquanto outros servem para vrias tags e vice-versa. Algumas tags podem conter somente um tipo de atributo, enquanto outras podem conter vrios tipos. Para facilitar o entendimento de como utilizar atributos, veremos nas sees seguintes, atributos que sero aplicados a vrios elementos. 8. ALINHAMENTOS DE PARGRAFO

Voc j deve ter visto que em certos documentos o texto aparece ora alinhado direita, ora esquerda, no centro ou ento ocupando uniformemente o espao da pgina ( texto justificado). Isso pode ser obtido facilmente em HTML. Veja a tabela abaixo:

<p align=left > <p align=right > <p align=center > <p align=justify >

Alinha o texto esquerda Alinha o texto direita Alinha o texto centralizado Alinha o texto justificado

Note que entre os delimitadores < e > no encontra-se apenas o elemento <p>. Alm dele, existe o texto align="alinhamento". Dizemos que align um atributo do elemento p e alinhamento o valor desse atributo. No caso de <p align="justify">, o valor do atributo align (que significa alinhamento em ingls) justify (justificado). 9. CRIANDO UMA DIVISO Existem momentos em que queremos que vrios pargrafos possuam um mesmo valor de atributo - centralizado, por exemplo. Ao invs de escrevermos align="justify" a cada abertura de novo pargrafo, podemos usar o elemento div, que cria uma "diviso" no documento na qual alguns atributos so preservados. Suas vantagens sobre o align que: Precisar ser utilizada apenas uma vez, ao contrrio do atributo align, que tem de ser includo em diversas tags. A tag <div> pode ser usada para alinhar qualquer elemento (cabealho, pargrafos, citaes, imagens, tabelas, etc.). O atributo align encontra-se disponvel apenas em um nmero limitado de tags.

APOSTILA HTML

Voc dever colocar a tag <div> e acrescentar o atributo align na tag de abertura. O atributo align poder ter os valores: left, right , justify e center. Vejamos o exemplo:

<div align="center "> <p> Texto 1 Texto 2 Texto 3 </p> <p> Texto 4 Texto 5 Texto 6 </p> </div> 10. TEXTO PR-FORMATADO O texto de um arquivo em HTML formatado atravs das tags. Mas voc possui a opo da tag <pre> </pre> para estabelecer uma formatao atravs de um editor de texto e que esta formatao permanea na sua pgina html. O texto pr-formatado excelente para apresentar cdigo-fonte com seus espaamentos adequados. Este recurso pode ser utilizado para criar tabelas mas no recomendvel. Uma observao importante que, ao usar tags de estilo, no tags de elemento, neste espao elas iro funcionar normalmente.

SINTAXE: <PRE> TEXTO TEXTO TEXTO </PRE>

11. VERIFICAO DE APRENDIZAGEM (VER O CADERNO DE EXERCCIOS)

APOSTILA HTML

2 AULA Assuntos a serem Abordados: Tags de Formatao Formatao de Fonte Entidades, Acentuao e Caracteres Especiais Tabelas de Caracteres Especiais Linhas Horizontais Efeitos de Movimento Verificao de Aprendizagem (Ver o Caderno de Exerccios)

1. TAGS DE FORMATAO Assim como em um editor de texto, em HTML voc poder utilizar vrios elementos para se formatar um texto, como por exemplo, escrever em negrito, itlico, sublinhado, etc. TAG NEGRITO ITLICO SUBLINHADO SINTAXE FUNO <b>texto</b> Aplica o estilo negrito <I>texto</I> Aplica o estilo itlico <u>texto</u> Aplica o estilo sublinhado (em alguns browsers esta tag no funciona)

Os principais comandos de estilo: TAG STRONG TYPERWRITER BIG SMALL SOBRESCRITO SUBESCRITO SINTAXE <strong>texto</strong> <tt>texto</tt> <big>texto</big> <small>texto</small> <sup>texto>/sup> _texto FUNO Similar ao negrito Deixa o texto com espaamento regular Aumenta a fonte e aplica Negrito Reduz e altera a fonte Eleva o texto e diminui seu corpo Rebaixa o texto e diminui seu corpo

2. FORMATAO DE FONTE

Para fazer alteraes no tamanho, tipo e cor da fonte de seu texto voc utilizar a tag <font> </font>. Sua sintaxe a seguinte: <font size="tamanho" color="cor" face="tipo">texto</font> Size - especifica o tamanho da fonte a ser utilizada para o texto. Os valores permitidos vo de 1, o menor, a 7, o maior. Sendo 3 o valor padro. Face - especifica o tipo de fonte a ser escolhida para o texto. 9

APOSTILA HTML

Color - especifica a cor do texto atravs de um nome predefinido de cores. No entanto, podemos obter qualquer cor que desejarmos combinando propores corretas de trs cores bases: Vermelho (Red) , Verde (Green) e Azul (Blue). Seu valor ser especificado no formato hexadecimal. Desta forma, possvel exprimir cores usando trs nmeros hexadecimais que definem as quantidades de vermelho, verde e azul que entram na composio de uma determinada cor. O valor mais baixo de uma determinada cor 0 (#00 em cdigo hexadecimal) e o valor mais alto 255 (#FF em cdigo hexadecimal). Assim, a cor preta tem 0 de vermelho, 0 de verde e 0 de azul, escrevendo na forma #000000. J o branco possui 255 de vermelho, 255 de verde e 255 de azul, sendo seu cdigo #FFFFFF. O amarelo forte possui 255 de vermelho, 255 de verde e 0 de azul, sendo seu cdigo #FFFF00. A tabela abaixo mostra os resultados de diversas combinaes de cores: TABELA DE CDIGOS DAS CORES:
Nome da Cor Amarelo Amarelo Esverdeado Aquamarine Aquamarine Mdio Azul Azul Ardsia Azul Ardsia Escuro Azul Brilhante Azul Celeste Azul Claro Azul Corn Flower Azul Escuro Azul Marinho Azul Mdio Azul Neon Azul Rich Azul Violeta Baker's Chocolate Branco Bright Ouro RGB Hexadecimal #FFFF00 #99CC32 #70DB93 #32CD99 #0000FF #007FFF #6B238E #C0D9D9 #3299CC #5F9F9F #42426F #00009C #23238E #3232CD #4D4DFF #5959AB #9F5F9F #5C3317 #FFFFFF #D9D919 Cor

10

APOSTILA HTML

Bronze Bronze Claro Bronze Escuro Caqui Cinza Cinza Brilhante Cinza Claro Cobre Cobre Claro Cobre Escuro Coral Cyan Escarlata Firebrick Goldenrod Mdio Goldenrod Laranja Laranja Mandarian Light Steel Blue Light Wood Magenta Marrom Marrom Marrom Escuro Medium Slate Blue Orqudea Escuro Orqudea Mdio Ouro Ouro Velho Plum

#DB9370 #EBC79E #8C7853 #9F9F5F #C0C0C0 #A8A8A8 #CDCDCD #D98719 #B5A642 #B87333 #FF7F00 #00FFFF #8C1717 #8E2323 #EAEAAE #DBDB70 #FF7F00 #E47833 #8F8FBD #E9C2A6 #FF00FF #8E236B #A62A2A #5C4033 #7F00FF #9932CD #9370DB #CD7F32 #CFB53B #EAADEA

11

APOSTILA HTML

Preto Prpura Escuro Quartz Rosa Rosa Temperado Salmo Semi-Sweet Chocolate Sienna Silver Steel Azul Summer Sky Tan Escuro Thistle Turquesa Turquesa Escuro Turquesa Mdio Verde Verde Amarelado Verde Cobre Verde Cobre Escuro Verde Escuro Verde Floresta Verde Floresta Mdio Verde Hunter Verde Limo Verde Oceano Verde Oceano claro Verde Oliva Escuro Verde Primavera Verde Primavera

#000000 #871F78 #D9D9F3 #FF6EC7 #FF1CAE #6F4242 #6B4226 #8E6B23 #E6E8FA #236B8E #38B0DE #97694F #D8BFD8 #ADEAEA #7093DB #70DBDB #00FF00 #93DB70 #527F76 #4A766E #2F4F2F #238E23 #6B8E23 #215E21 #32CD32 #426F42 #238E68 #4F4F2F #7FFF00 #00FF7F

12

APOSTILA HTML

Vermelho Vermelho Indiano Vermelho Violeta Violeta Violeta Vermelho Mdio Wheat Wood Mdio

#FF0000 #4E2F2F #CC3299 #4F2F4F #DB7093 #D8D8BF #A68064

3. ENTIDADES, ACENTUAO E CARACTERES ESPECIAIS Alguns caracteres em HTML so chamados de caracteres reservados que quando aparecem num documento HTML so interpretados pelo navegador. Para acessar um caractere, voc precisa usar a seguinte conveno: &nome-especial; Onde o nome-especial o nome ou um nmero associado ao smbolo grfico que voc deseja mostrar no seu documento. H caracteres que no podem ser obtidos por meio do 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 a partir de uma entidade HTML. A norma ISO utiliza um cdigo composto pelo caractere & seguido do smbolo # (cerquilha) e, ento, de uma combinao numrica com ponto-e-vrgula. J a entidade HTML usa o caractere & seguido de uma palavra que identifica o smbolo com ponto-e-vrgula. Por exemplo, e voc utilizar a palavra caf com a acentuao do seu teclado, com certeza na visualizao do seu browser ficar perfeita, mas pode ser que em outros computadores com a configurao diferente no aparea da mesma forma. O ideal coloc-la assim: caf&eacute; ou ca&#233; Ex: Dirio = di&aacute;rio Natao = Nata&ccedil;&atilde;o Sequncia = sequ&ecirc;ncia E se desejasse colocar a palavra entre aspas: &quot;caf&eacute;&quot 4. TABELAS DE CARACTERES ESPECIAIS Smbolos de Marcao Cdigo Smbolo &quot; &amp; &lt; &gt; " & < > Cdigo Numrico &#34; &#38; &#60; &#62; Smbolo " & < > 13

APOSTILA HTML

Smbolo de Espao Cdigo Smbolo &nbsp; Currency Symbols Cdigo Smbolo &cent; &pound; &curren; &yen; Cdigo Numrico &#162; &#163; &#164; &#165; Smbolo || Cdigo Numrico &#160; Smbolo ||

Smbolos de Pontuaes Cdigo Smbolo &iexcl; &laquo; &raquo; &iquest; &ndash; &mdash; &lsquo; &rsquo; &sbquo; &ldquo; &rdquo; &bdquo; &lsaquo; &rsaquo; INFORMAES TEIS Caso voc queira escrever uma pgina HTML em outro idioma ter que usar bastante esses caracteres especiais. Quando voc utiliza a acentuao comum do teclado nas suas pginas podem at parecer que tudo ir correr tudo bem. Mas algum que visualizar suas pginas em um computador que no tenha as mesmas configuraes de vdeo e teclado, alguns caracteres podem no sair da forma desejada. 14 Cdigo Numrico &#161; &#171; &#187; &#191; &#8211; &#8212; &#8216; &#8217; &#8218; &#8220; &#8221; &#8222; &#8249; &#8250; Smbolo

APOSTILA HTML

5. LINHAS HORIZONTAIS A tag <hr> insere uma linha horizontal. Ela no possui tag de fechamento e utilizada para auxiliar na distino de blocos de contedo.

Essa linha possui vrios atributos, oferecendo resultados diversos. Os atributos iro definir as propriedades que a linha ir conter, como largura, cor, posio e comprimento.
<hr size=7> insere uma linha de largura 7 (pixels). <hr color=red> insere uma linha com cor vermelha. <hr align=left> insere uma linha alinhada esquerda. <hr width=50%> insere uma linha de 50% de comprimento. Voc poder utilizar os atributos separados ou juntos em uma linha horizontal. <hr size=7 color=red align=left width=50%> insere uma de largura 7, com cor vermelha ,

alinhada esquerda , de 50% de comprimento.

INFORMAES TEIS
Para voc utilizar os atributos de alinhamento em uma linha horizontal, voc deve atentar para o comprimento da linha, ou seja, o espao disponvel que ela est ocupando. Voc poder posicionar uma linha horizontal direita, esquerda e no centro, porm, se desejar posicionar na parte inferior da janela no ser possvel utilizar atributos de alinhamento, para isso, voc poder fazer uso da tag <br>.

6. EFEITOS DE MOVIMENTO possvel obter o efeito de animao de texto, atravs da tag <marquee>.
Sintaxe: <marquee behavior=efeito>Texto</marquee>

Atributos: scroll - o letreiro continuar rolando continuamente em um mesmo sentido.

<marquee behavior=scroll>Texto</marquee>

slide - o letreiro parte de um ponto da tela e vai at o outro, e pra quando chega ao final do seu percurso.
<marquee behavior=slide>Texto</marquee>

alternate - o letreiro deslizar at o outro lado da tela, e quando chegar l, ele voltar pela tela novamente indo e voltando. 15

APOSTILA HTML

<marquee behavior=alternate>Texto</marquee>

Tambm possvel definir as direes que o texto ir ter em seu percurso atravs do efeito direction.
Sintaxe: <marquee direction=efeito>Texto</marquee>

Atributos: up - o letreiro ir para cima.

<marquee direction=up>Texto</marquee>

down - o letreiro ir para baixo.

<marquee direction=down>Texto</marquee>

left - o letreiro ir para a esquerda.

<marquee direction=left>Texto</marquee>

right - o letreiro ir para a direita.

<marquee direction=right>Texto</marquee>

7. VERIFICAO DE APRENDIZAGEM (VER O CADERNO DE EXERCCIOS)

3 AULA
Assuntos a serem Abordados: Listas Imagens Colocando uma imagem como plano de fundo Colocando uma cor no fundo da pgina Verificao de Aprendizagem (Ver o Caderno de Exerccios)

1. LISTAS A linguagem HTML contm elementos que permitem criar dois tipos de listas: as no ordenadas e as ordenadas. 1.2 - Listas No Ordenadas Uma lista no ordenada contm vrios itens marcados todos com o mesmo smbolo (normalmente um crculo pequeno ou um quadrado pequeno).

16

APOSTILA HTML

Para criar uma lista no ordenada, utilizamos o elemento <ul> ( unordered list ). Dentro desse elemento, os vrios itens so criados com o elemento <li> ( list item ). O exemplo seguinte mostra uma lista simples: <ul> <li> Laranja <li> Uva </ul> Este o aspecto de como vai ficar em seu navegador: Laranja Uva

Dentro de uma lista no ordenada podemos colocar pargrafos, quebras de linha, imagens, outras listas, etc. Voc poder personalizar sua lista no ordenada com o atributo Type. O atributo Type pode assumir trs valores (circle, disk e square) para definir o tipo de marcao a ser usado na lista. Veja o exemplo: <ul type=square> <li> Laranja <li> Uva </ul> Agora veja como ficar em seu navegador: Laranja Uva

1.3 - Listas Ordenadas Uma lista ordenada contm vrios tens numerados e criada com o elemento <ol> ( ordered list ). Os itens da lista ordenada definem-se com o elemento <li> ( list item ). <ol> <li> Abacate <li> Abacaxi </ol> Este o aspecto de como vai ficar em seu navegador: 1. Abacate 2. Abacaxi 17

APOSTILA HTML

Dentro de uma lista ordenada podemos colocar pargrafos, quebras de linha, imagens, outras listas, etc. Voc poder personalizar sua lista ordenada com o atributo Type e Start. O atributo Type pode assumir cinco valores ( 1 , a , A , i , I ) para definir o tipo de numerao a ser usado na lista ordenada. "1" - Especifica que os algarismos arbicos padro ( 1, 2, 3, 4, ... ) sero usados para numerar a lista. "a" - Especifica que as letras minsculas ( a, b, c, d, ... ) sero usadas para numerar a lista. "A" - Especifica que as letras maisculas ( A, B, C, D, ... ) sero usadas para numerar a lista. "i" - Especifica que os algarismos romanos minsculos ( i, ii, iii, iv, ... ) sero usados para numerar a lista. "I" - Especifica que os algarismos romanos maisculos ( I, II, III, IV, ... ) devem sero usados para numerar a lista. Agora um exemplo com o atributo Type: <p>Ingredientes para bolo</p> <ol type="a"> <li>Farinha de trigo <li>Acar <li>Manteiga <li>Ovos <li>Leite <li>Fermento </ol> Agora veja como ficar em seu navegador: Ingredientes para bolo a. b. c. d. e. f. Farinha de trigo Acar Manteiga Ovos Leite Fermento

Em uma lista ordenada o ponto inicial 1. Usando o atributo Start voc poder determinar o nmero ou a letra que inicia sua lista. Como no exemplo abaixo: <p>Ingredientes para bolo</p> <ol type=1 start=3> <li>Farinha de trigo <li>Acar <li>Manteiga <li>Ovos <li>Leite <li>Fermento </ol> 18

APOSTILA HTML

Agora veja como ficar em seu navegador: Ingredientes para bolo 3. 4. 5. 6. 7. 8. Farinha de trigo Acar Manteiga Ovos Leite Fermento

Usando o atributo Value em um item da lista ordenada poderemos alterar os valores da lista a partir de qualquer ponto. Exemplo: <ul> <li> <li value=10> <li> </ul> 2. IMAGENS Alm de manipular texto, o HTML tambm serve para exibir imagens de uma maneira muito simples, usando para isso o elemento img. As imagens dentro de uma pgina devem estar preferencialmente no formato ".gif". Este o formato (ou extenso) mais universalmente aceito pelos visualizadores de WWW (browsers). O Internet Explorer consegue decodificar outros formatos como o ".jpg" e ".rgb", mas esta capacidade no comum a todos os programas visualizadores. Por isso fique atento quando for aplicar certos tipos de formatos (extenses). Para inserir uma imagem em uma pgina web utilizamos a tag <img src> e seus atributos. Sintaxe: <img src=nome da imagem.extenso Poderemos acrescentar os seguintes atributos para imagens:

Width="valor em pixel" Height="valor em pixel" Align(center, left, right) Alt="texto alternativo" Border="valor em pixel" Vspace="valor em pixel" Hspace="valor em pixel"

Largura da imagem Altura da imagem Alinhamento da imagem. Texto que aparecer ao passar o mouse sobre a imagem Especificao da largura da borda da imagem. Indica o espao que deve ser deixado acima e abaixo da imagem. Indica o espao que deve ser deixado nas laterais da imagem.

O atributo src - source, ( fonte em ingls ) d o nome do arquivo da imagem e o nico atributo obrigatrio para o elemento img. Quando seu navegador abre um arquivo html e encontra o 19

APOSTILA HTML

elemento img, ele usar o respectivo atributo src como o endereo onde est o arquivo de imagem a ser exibido. Por isso voc deve organizar as imagens juntamente com os arquivos a serem salvos em um mesmo local. 3. COLOCANDO UMA IMAGEM COMO PLANO DE FUNDO O atributo background estabelece que o padro de fundo da pgina ser uma imagem. Este atributo inserido dentro da tag <body>. Sendo que o valor desse atributo indica o local onde se encontra a imagem. Se as dimenses da imagem forem inferiores s dimenses da pgina, o navegador repetir a imagem (como num cho de mosaicos ou em uma parede de azulejos), por forma a ocupar todo o fundo da pgina. O exemplo abaixo mostra bem como se faz isso: <body background=" imagem. jpg"> <body background="c:\site\imagem.jpg> O valor do atributo background uma URL (endereo) que define o local onde se encontra a imagem. Na primeira linha mais acima, demos uma URL relativa e na segunda demos uma URL absoluta. 4. COLOCANDO UMA COR NO FUNDO DA PGINA <body bgcolor="cor"> O atributo bgcolor nos permite escolher a cor de fundo da pgina, utilizando o cdigo das cores ou at mesmo o nome de cada cor.
5. VERIFICAO DE APRENDIZAGEM (VER O CADERNO DE EXERCCIOS

4 AULA
Assuntos a serem Abordados: Links ncoras Atributos de <body> Tabelas tag <table> Atributos da tag <table> Verificao de Aprendizagem (Ver o Caderno de Exerccios)

1. LINKS A principal atrao da Internet a criao de documentos com o conceito de hipertexto, ou seja, um documento que se vincula a outros documentos por meio de ligaes especiais chamadas links 20

APOSTILA HTML

ou hiperlinks. Com esse conceito, voc pode criar documentos que faam referncias e permitam ao usurio acessar tais referncias no importando se elas esto em outra pgina Web, no seu micro ou em algum servidor de rede. O uso de hipertexto tambm facilita a criao de documentos extensos cujas sees ou tpicos podem ser rapidamente acessados por meio dos links. Imagine que voc crie uma pgina sobre determinado assunto em vrios tpicos abordados. Assim como em um livro voc cria todo o texto do documento e depois cria, no incio, um sumrio indicando os tpicos do documento. Se quiser acessar diretamente o texto de um tpico, basta dar um clique sobre o item do tpico no sumrio e ele ser imediatamente exibido. Um link reconhecido em uma pgina por estar em cor normalmente diferente do resto do texto e, ao passar com o mouse sobre esse texto o cursor muda para uma mo apontando para o link. Isso feito de modo muito simples com o elemento a, como segue: <a href="endereo da pgina">texto que ser o link</a> Exemplo: <a href="c:\site\casa.html">Minha casa</a> 1.2. Usando uma imagem como link Exemplo: <a href="c:\site\casa.html><img src="c:\site\imagem.jpg"></a> Como voc deve ter percebido, o atributo href (Hipertext Reference) indica o endereo da pgina que voc quer "linkar" ( ligar ) ao seu documento. 2. NCORAS Uma ncora um ponto de referncia ou endereo que ser acessado por um link, usada dentro do documento para marcar o incio de uma seo do documento. Suponha que seu texto seja muito grande, o que tornaria trabalhoso para quem estiver vendo a pgina conseguir se movimentar entre um tpico e outro. Ento faa o seguinte: Nomeie um pedao da sua pgina atravs do tag: <a name="nome"> Texto </a> Lembre se que "nome" fictcio, voc escolhe o nome. Depois disso escreva o pedao que voc quer associar a esse Nome. Agora crie um link para chegar at esse pedao, usando o tag: <a href="#nome">Clique Aqui</a>

21

APOSTILA HTML

Pronto! Ao clicar na mensagem "Clique Aqui" de sua pgina, o usurio ir at o pedao que voc nomeou. ATENO: O sinal de cerquilha (#) necessrio para a ncora, pois avisa ao browser para procurar o link no documento atual. Uma ncora um ponto de referncia ou endereo que ser acessado por um link. 3. ATRIBUTOS DE <BODY> Atravs de atributos de <body>, podemos definir cores para os textos, links e para o fundo das pginas, bem como uma imagem de fundo):
<body bgcolor="#ffffff" text="#rrggbb" link="#rrggbb" alink="#rrggbb" vlink="#rrggbb" >

onde: bgcolor : Cor de fundo (padro: cinza ou branco) text : Cor dos textos da pgina (padro: preto) link : A cor dos links (padro: azul) alink : A cor dos links, quando acionados (padro: vermelho) vlink : Cor dos links, depois de visitados (padro: azul escuro ou roxo) Seus valores podem ser dados em valores hexadecimais equivalentes a cores no padro RGB (Red, Green, Blue) ou mesmo dando os nomes das cores. Existem tabelas de cores com esses valores, mas grande parte dos editores j oferece uma interface bem amigvel atravs da qual escolhemos as cores desejadas, sem nos preocuparmos com cdigos de cores complexos. 4. TABELAS tag <table> Tabelas auxiliam na visualizao de dados ou na diviso de sua pgina em setores. Entenda por uma tabela HTML como sendo semelhante a uma tabela que voc desenharia numa folha de papel ou num outro programa de computador. O elemento principal de uma tabela o table e aqui segue um exemplo simples de tabela: <table> <tr> <td>Primeira</td> <td>Segunda</td> </tr> <tr> <td>Terceira</td> <td>Quarta</td> </tr> </table> 22

APOSTILA HTML

Cujo resultado : Primeira Segunda Terceira Quarta Em HTML, as tabelas so divididas em linhas e clulas. Na tabela acima, a primeira linha contm as clulas Primeira e Segunda, enquanto que a segunda linha contm as clulas Terceira e Quarta. Dentro de um bloco <table>, os principais elementos que voc utilizar so o <tr>(linha) , e o <td>(clula) . Dessa forma, podemos definir as linhas e as clulas da tabela. obrigatrio que um bloco <td> esteja definido dentro de um bloco <tr>, ou seja, que as clulas estejam dentro de linhas. No exemplo anterior, criamos uma linha com <tr> e em seguida, dentro de um bloco <td>, escrevemos o texto da clula (Primeira). Abrimos outro bloco <td> nesse mesmo bloco <tr>, onde colocamos o texto da segunda clula (Segunda). Depois, fechamos a linha com o </tr> para em seguida abrir uma nova linha, onde criamos as clulas contendo os textos Terceira e Quarta. Na figura abaixo, voc poder ver com detalhes o significado de cada elemento que compe a estrutura bsica de uma tabela

Segue abaixo o conjunto de marcaes essenciais para desenhar tabelas em HTML. Alguns atributos podem ser definidos para cada uma dessas marcaes. Falaremos desses atributos mais adiante. 23

APOSTILA HTML

<table></table> - Toda tabela deve ser iniciada com a marcao <table> e encerrada com </table>. ATENO: Dessa forma a tabela vai aparecer sem bordas, mas dividindo linhas e clulas. Para que a tabela aparea com bordas simples, defina dessa forma <table border></table>. Antes e depois de uma tabela, acontece sempre uma quebra de linha. <tr></tr> - Cada linha de uma tabela deve sempre aparecer entre as marcaes <tr> e </tr>. <td></td> - Esta a marcao que define cada clula de uma tabela. As clulas de uma tabela devem sempre aparecer entre as marcaes de linhas (<tr> e </tr>). Como padro, o texto nas clulas alinhado a esquerda. <th></th> - Desta forma so definidos os ttulos de uma tabela. Estes podem ser posicionados em qualquer clula. A diferena entre a marcao de clula e ttulo de clula que o ttulo aparece em negrito. 5. ATRIBUTOS DA TAG <TABLE> Vamos ver ento o exemplo de uma tabela utilizando essas marcaes bsicas: <table border> <tr> <td>Itens/Ms</td> <th>Janeiro</th><th>Fevereiro</th><th>Maro</th> </tr> <tr> <th>Usuarios</th><td>80</td><td>93</td><td>120</td> </tr> <tr> <th>Linhas</th><td>3</td><td>3</td><td>5</td> </tr> </table> Uma tabela simples:
<table border=4> <tr><th>coluna 1</th><th>coluna 2</th></tr> <tr><td>linha1, coluna 1</td><td> linha 1, coluna 2</td></tr> <tr><td>linha 2, coluna 1</td><td>linha 2, coluna 2</td></tr> </table>

5.1. Aplicando bordas na tabela O atributo border no elemento table serve para dar borda tabela, sendo possvel definir ainda, o valor da largura da borda da tabela. Sem o atributo border, o elemento table no ficaria muito distinto onde comea e termina cada uma das clulas: 24

APOSTILA HTML

<table border=1> <tr> <td>Primeira</td> <td>Segunda</td> </tr> <tr> <td>Terceira</td> <td>Quarta</td> </tr> </table> O exemplo abaixo mostra duas tabelas nas quais so especificados os valores 10 e 5 para a borda, e outra na qual nenhuma borda foi especificada. Voc pode criar uma tabela sem bordas para montar um menu em que as opes no fiquem unicamente na vertical, como ocorre quando se usa o comando para a criao de listas.

5.2. Largura de clulas e tabelas Para escolher a largura de tabelas e clulas, utiliza-se o j conhecido atributo width, cujo argumento idntico para o caso de imagens: <table border="1" width="200"> <tr> <td width="30%">Primeira</td> <td width="70%">Segunda</td> 25

APOSTILA HTML

</tr> <tr> <td>Terceira</ td> <td>Quarta</ td> </tr> </table>

Note que quando o width utilizado com o elemento table, a largura refere-se largura da pgina, enquanto que quando usado dentro de um td a largura referente ao tamanho da tabela. Isso tudo desde que o argumento seja dado em porcentagem e no em pixels. 5.3. Espaamento entre clulas Para controlarmos a distncia entre duas clulas, utilizamos o atributo cellspacing, cujo argumento dado em pixels: <table cellspacing="20" border="1"> <tr> <td>Primeira</td> <td>Segunda</td> </tr> <tr> <td>Terceira</td> <td>Quarta</td> </tr> </table>

Para controlar o espaamento vertical, utilizamos o cellpadding: <table cell spacing="20" cellpadding="35" border="1"> <tr> <td>Primeira</ td> <td>Segunda</td> </tr> <tr> <td>Terceira</td> <td>Quarta</td> </tr> </table> 26

APOSTILA HTML

5.4. Ampliando uma clula para mais de uma coluna

O exemplo acima mostra o uso da opo Colspan para aumentar o tamanho de uma clula e fazer com que ela ocupe colunas adjacentes. Note que o contedo desta clula est centralizado pelo comando align=center. Lembre-se de que esse no um recurso exclusivo do Internet Explorer. Veja o resultado:

5.5. Expandindo uma clula para mais de uma linha. A opo Rowspan serve para aumentar o tamanho de uma clula e fazer com que ela ocupe colunas adjacentes. Note que o contedo desta clula est centralizado pelo comando valign=top. Veja o efeito desses comandos:

Resultado do Cdigo:

27

APOSTILA HTML

5.6. Ttulos de Colunas Com o par de comandos <th> (Title Heading), voc pode especificar ttulos para as colunas. Esses comandos funcionam da mesma forma que os <td>, s que deixam o contedo da clula centralizado e em negrito. Veja o prximo exemplo.

Resultado do Cdigo:

28

APOSTILA HTML

6. Verificao de Aprendizagem (Ver o Caderno de Exerccios)

5 AULA
Assuntos a serem Abordados: Formulrios tag <form> <frames> / <frameset> Endereos Verificao de Aprendizagem (Ver o Caderno de Exerccios)

1. FORMULRIOS TAG <FORM> Os formulrios servem para recolher dados introduzidos pelos visitantes e envi-las para voc, atravs de seu servidor. Um formulrio uma seo da pgina HTML que contm elementos que permitem ao visitante inserir dados (elementos <textarea> e vrios tipos de elementos <input>, <option> e <select>). Estes elementos permitem inserir dados numricos, textos pequenos, textos longos, selecionar elementos em uma lista com vrias escolhas, responder facilmente com respostas do tipo "sim" ou "no", selecionar rapidamente uma opo em um pequeno grupo, etc. 1.2. Criar Formulrios Os formulrios so criados com o elemento <form>. Dentro desse elemento principal colocamos diversos elementos para a insero dos dados. <form> <input> . . . <input> </form> O elemento <form> por si s no faz com que o navegador desenhe nada na pgina nem permite inserir dados. Ele contm elementos que recolhem os dados e possui atributos que dizem ao navegador como e para onde devem ser enviados os dados inseridos pelo visitante. Veremos a sintaxe desta tag: < form name="form1" method="post" action=""> name o nome que ser dado ao formulrio, por padro definido form1, mas o usurio pode colocar outro nome.

29

APOSTILA HTML

method o mtodo que ser utilizado para que os dados do formulrio sejam enviados para o cliente da pgina. Existem dois mtodos para este envio, o post e o get. Veremos melhor a sua utilizao no curso de ASP. action o arquivo que ser executado pelo formulrio para que os dados cheguem ao cliente com segurana. Aps colocarmos a <form>, teremos que criar as caixas de texto onde sero digitadas as informaes. Para isso utilizaremos a tag <input> veja a sintaxe: <input type="text" name="textfield"> onde: type o tipo que ser a caixa de texto, normalmente o tipo text, mas h outros tipos password que utilizado em caixas que guardam informaes sobre senhas. name o nome que ser dado caixa de texto que guardar as informaes.

1.3. Action e Botes (Reset e Submit) Quando o visitante clica sobre o boto "Submeter" (ou "Submit"), as opes marcadas e o texto que foram inseridos no formulrio so enviados para voc (ou para seu servidor ). Conhea dois dos principais botes e suas funes. submit - usado para enviar os dados do formulrio. reset - utilizado para limpar os dados do mesmo. O atributo action do elemento <form> contm o endereo (URL) do recurso da Web (site, download, email, etc. ) que est encarregado de realizar este processamento. para l que o contedo do formulrio ser enviado. <form name="input" action="exemplos /action.html " method="get "> Nome de usurio: <input type="text" name="usuario"> <input type="submit" value="submeter"> <form> O exemplo acima ficar sendo exibido da seguinte forma em seu navegador:

1.4. Input O elemento que encontramos com maior frequncia em formulrios o elemento <input>. 30

APOSTILA HTML

O exemplo abaixo mostra um formulrio simples com dois elementos input: <html> <head> <title>Cadastro Pessoal</title> </head> <body> <form name=cadastro method=post action= > <b><i>Cadastro Pessoal </i></b> <br> Nome: <input type="text" name="Nome"> <br> Telefone: <input type="text" name="Nome"> <br> <br> <input type="submit" name="Enviar" value="Enviar"> <input type="reset" name="Limpar" value="Limpar"> </form> </body> </html> ATENO: um input para cada caixa de texto. O formulrio acima ficar sendo exibido desta forma em seu navegador:

O elemento <input> pode assumir diversas formas com finalidades diferentes. 1.5. Radio Buttons Os "Radio Buttons" so utilizados para se criar um grupo pequeno de opes em que apenas podemos selecionar uma de cada vez. <form action="processamento.asp"> <input type="radio" name=" sexo" value="masculino"> Masculino <br> <input type="radio" name=" sexo" value=" feminino"> Feminino <form> 31

APOSTILA HTML

O exemplo acima ficar sendo exibido desta maneira em seu browser:

Repare que s podemos selecionar uma das opes acima. 1.6. Checkboxes As caixas de validao "checkboxes" devem ser usadas sempre que queremos que o visitante aceite (ou no) os itens dentro de um pequeno grupo. permitido validar mais de uma opo simultaneamente. <form> <input type="checkbox" name="carro">Eu tenho um carro <br> <input type="checkbox" name="surf ">Eu tenho uma prancha de surf <form> O exemplo acima ficar sendo exibido desta forma em seu browser:

Repare que podemos selecionar vrias opes ao mesmo tempo. 2. <FRAMES> / <FRAMESET> Os frames (molduras) so subjanelas definidas sobre a janela principal do browser. Estas subjanelas so criadas dividindo a janela em vrias partes, cada parte chamada de frameset. Os frames so geralmente usados para que um frameset permanea enquanto outros mudem baseados nos links que o usurio seleciona. 2.1. <frameset></frameset> Determina o incio e o fim de um frame. Este elemento divide a janela do browser em linhas e colunas. Deve ser usado juntamente com os parmetros cols (frame na vertical) ou rows (frame na horizontal). 2.2.Atributos Frame src=pgina.htm" Determina a pgina ou arquivo que ser carregado na regio correspondente. name="nome" Determina um nome ao frameset correspondente. O nome de vital importncia na utilizao dos frames. noresize Deixa a linha do frameset esttica. marginheight="x" Determina a largura em pixels da margem vertical. marginwidth="x" Determina a largura em pixels da margem horizontal.

32

APOSTILA HTML

scrolling="valor" Determina se aparecer barra de rolagem. Os valores podem ser yes (com barra de rolagem), no (sem barra de rolagem) ou auto (barra de rolagem s aparecer quando o contedo da pgina ultrapassar o tamanho do frameset. cols="x,x" Determina o nmero de regies verticais da pgina. Deve ser indicado juntamente com uma lista de valores. Cada valor especifica a largura de cada frameset e pode ser definido em pixels, percentual ou atravs de asterisco. rows="x,x" Determina o nmero de regies horizontais da pgina. Deve ser indicado juntamente com uma lista de valores. Cada valor especifica a largura de cada frameset e pode ser definido em pixels, percentual ou atravs de asterisco. border="x" Determina a espessura da linha divisria que aparece entre os framesets. Sendo que x o valor da borda em pixels. bordercolor="cor" Determina a cor da linha divisria que aparece entre os framesets. Importante! Para abrir uma pgina em frameset diferentes voc deve especificar o nome do mesmo no link. Exemplo: <a href="pagina.htm" target="nomedoframeset"></a> Logo abaixo est o cdigo bsico de uma pgina com frame. Este exemplo mostra uma pgina HTML com Frames (molduras). 1 Pgina: pagina_banner.htm 2 Pgina: pagina_menu.htm 3 Pgina: pagina_princ.htm Criar a Pgina Index.htm, que ser a pgina dos Frames, onde ser visualizado as pginas anteriormente criadas. 1 Pgina: pagina_banner.htm <html> <body> Pgina Banner<br> Oi Tudo bem !!!<p> </body> </html> 2 Pgina: pagina_menu.htm <html> 33

APOSTILA HTML

<body> Pgina Menu<br> Oi Tudo OK !!!<p> </body> </html> 3 Pgina: pagina_princ.htm <html> <body> Pgina Principal<br> Oi Tudo Legal !!!<p> </body> </html> Pode ser acrescidos cores, imagens e efeitos em todas as pginas! Use sua criatividade. Pgina Index.htm <html> <head> <title> Home Page </title> </head> <frameset rows="25%,25%,25%" bordercolor="yellow"> <frame src="pagina_banner.htm" name="banner"> <frame src="pagina_menu.htm" name="menu"> <frame src="pagina_princ.htm" name="conteudo"> </frameset> </html> Esta pgina que foi criada, deve ser chamada de index.htm. 3. ENDEREOS Esta tag utilizada para identificar autorias de sua pgina. Geralmente so apresentadas na parte inferior de cada pgina. Mostra quem confeccionou aquela pgina, com quem o leitor deve entrar em contato caso queira ter alguma informao ou fazer alguma observao. Estes endereos so precedidos de um fio <hr>, que ainda veremos, e voc poder utilizar a tag <br> para separar linhas. Sintaxe: <ADDRESS> TEXTO</ADDRESS> Esta uma excelente forma de garantir que as pessoas entrem em contato com voc caso necessitem e tambm uma forma de estar melhorando a sua HP (Home Page) atravs de sugestes. 34

APOSTILA HTML

6 AULA
Assuntos a serem Abordados: Cascading Style Sheets Porque o CSS Vantagens dos Estilo CSS Trabalhando com css. Adicionando fontes Trabalhando com o painel Design na aba Estilos CSS Formatando o plano de fundo da pagina.

Cascading Style Sheets(css). Cascading Style Sheets (ou simplesmente CSS) uma linguagem de estilo utilizada para definir a apresentao de documentos escritos em uma linguagem de marcao, como HTML ou XML. Seu principal benefcio prover a separao entre o formato e o contedo de um documento. Ao invs de colocar a formatao dentro do documento, o desenvolvedor cria um link (ligao) para uma pgina que contm os estilos, procedendo de forma idntica para todas as pginas de um portal. Quando quiser alterar a aparncia do portal basta portanto modificar apenas um arquivo. Porque o CSS Reduz o tempo de trabalho e manuteno das paginas web sendo possvel uma melhor administrao das tags HTML, acelerando as possveis alteraes futuras, que em um site grande geraria(muito trabalho). No CSS possvel editar de forma mais abrangentes as estruturas de tags HTML, reduzindo a limitao da linguagem, personalizando mais ainda as paginas. Podendo controlar FONTES, CORES, IMAGEM DE FUNDO, LINHAS, ALTURA, LARGURA, MARGENS. Resumindo um HTML advanced onde voc tem mais liberdade para trabalhar

Vantagens dos Estilo CSS Antes de mais nada, deve ser dito que quase tudo o que se pode fazer com style sheets pode ser feito tambm com os descritores de HTML convencionais (existem apenas umas poucas excees, e uma enorme quantidade de coisas que s podem ser feitas com tediosas construes de HTML). Entretanto, h vantagens adicionais no uso do css. 1. Separao Lgica da Estruturao e da Formatao das Informaes Com o tempo o HTML evoluiu para uma combinao complexa e confusa de estruturar e formatar os descritores, o que torna a manuteno de um web site grande e complicado uma tarefa rdua e 35

APOSTILA HTML

difcil (se voc usar a tag FONT, por exemplo, e quiser mudar uma fonte ou a sua cor num certo nmero de pginas, vai gastar horas para rastrear todas as tags). Os estios css vo lhe permitir isolar os cdigos de formatao aplicado a vrias pginas, de maneira que as mudanas gerais de estilo podem ser feitas editando apenas um nico arquivo. 2. Reduo do Tamanho e de Tempo de Carregamento das Pginas Quando um usurio quer acessar uma pgina web, o browser tem que analisar todo o cdigo HTML da pgina para represent-la na tela. Se voc colocar uma formatao complexa nas suas pginas, isso acrescenta um monte de tempo de anlise para cada pgina. Ao colocar as formataes numa nica folha de estilo referenciada por cada pgina, voc reduz a quantidade de cdigo das pginas e conseqentemente isto reduz tambm a quantidade de dados que tm que ser transmitidos e analisados pelos browsers. O resultado so pginas que aparecem mais rapidamente e usurios mais felizes.

Trabalhando com css.

Uma maneira bem fcil de acresentar estilizao pgina adicionar algumas cores a ela. Comecemos com uma folha de estilos incorporada ao arquivo HTML. Mais a frente, separaremos os arquivos HTML e CSS. Separar os arquivos uma boa tcnica, pois isto permite usar a mesma folha de estilos para vrios arquivos HTML: voc precisar escrever uma s folha de estilos. Por ora vamos colocar nossa CSS no mesmo arquivo HTML. Vamos precisar inicialmente do elemento <style> no nosso arquivo HTML. A folha de estilos ser colocada dentro deste elemento acrescente mais cinco linhas de cdigo dentro da tag "head" do seu arquivo HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"> <html> <head> <title>Minha primeira pgina CSS</title> <style type="text/css"> Delimitador body { tag que recebera os atributos color: purple; Altera cor da fonte background-color: #d8da3d } Plano de fundo da pagina. </style> Delimitador </head> <body> A primeira linha informa que trata-se de uma folha de estilos escrita para CSS (text/css). A segunda linha diz que as regras de estilo a seguir, aplicam-se ao elemento body. A terceira determina que os textos sero em cor purple (prpura) e a linha a seguir coloca a cor #d8da3d (amarela esverdeada) para o fundo da pgina.

36

APOSTILA HTML

Em CSS as folhas de estilos so constituidas de regras. Cada regra compe-se de trs partes: 1. um selector (no exemplo: body), que informa ao browser qual a parte do documento a qual se aplica a regra; 2. uma propriedade (no exemplo, 'color' e 'background-color', duas propriedades distintas), que especifica qual o aspecto do layout que est sendo estilizado; 3. e um valor ('purple' e '#d8da3d'), que fornece o valor da propriedade. No exemplo nota-se que as regras podem ser combinadas. Ali esto escritas duas propriedades. Poderamos ter escrito duas regras separadamente sem combin-las:
body { color: purple } body { background-color: #d8da3d }

A cor de fundo (background-color) do elemento body valer para todo o documento. Ns no escrevemos nenhuma regra adicional colocando fundo de outra cor para os outros elementos da pgina (p, li, address) ento por 'default' eles no tero cor de fundo (ou seja: sero transparentes). A propriedade 'color' determina a cor dos textos para o elemento body e todos os elementos contidos em body herdaro esta cor, a menos que uma outra regra CSS determine uma cor diferente para qualquer elemento na pgina.

37

APOSTILA HTML

Adicionando fontes
Outra coisa bem fcil de se estilizar so as fontes para os elementos da pgina. Vamos escolher fonte Georgia para os textos, exceto para o cabealho h1 ao qual atribuiremos a fonte Helvetica. Voc nunca ter como saber quais so as fontes que os visitantes do seu site tm instaladas em suas mquinas, por isso de boa tcnica sempre especificarmos fontes alternativas nas folhas de estilos: se a fonte Georgia no estiver disponvel as fontes Times New Roman ou Times ir substitu-la sem grandes prejuzos e ainda mais, se ambas tambm estiverem indisponveis o browser do visitante usar uma fonte (with serif) com serifas. Se a fonte Helvetica no estiver instalada, as fontes Geneva, Arial e SunSans-Regular so similares e se nenhuma delas estiver disponvel o browser usar uma fonte sem serifas.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"> <html> <head> <title>Minha primeira pgina CSS</title> <style type="text/css"> body { font-family: Georgia, Times New Roman,Times, serif; fonte color: purple; cor da fonte background-color: #d8da3d } h1 { Alterando a fonte no elemento font-family: Helvetica, Geneva, Arial, SunSans-Regular, sans-serif } </style> </head> <body>

38

APOSTILA HTML

Agora cabealho(h1) e texto esto com fontes diferentes.

Trabalhando com o painel Design na aba Estilos CSS

Este ser o painel que usaremos para construir os estilos CSS de uma maneira mas dinmica sem a utilizao de cdigos .

A aba estilo CSS e formada pelos botes anexar folha de estilos Ao clicar no boto novo estilo abrir a seguinte janela.

, nova folha de estilo

39

APOSTILA HTML

Nome da Classe , seletor ou tag Criar Classe

Editar tag HTML

Editar seletor (aes de link) Criar um documento css externo

Adiciona o css na o pagina html

Depois de configurar seu novo estilo pressione o boto OK para salvar o estilo na pasta raiz de seu projeto.Apos salvar o arquivo abrirar uma janela para configurar seu primeiro estilo css.

Formate a classe a classe como desejado depois pressione OK. Para aplicar o estilo no objeto selecione-o e clique no nome do estilo criado. 40

APOSTILA HTML

Estilo criado

Ao clicarmos no estilo o texto absorveu as caractersticas predefinidas na janela do estilo . Podemos alterar as formataes predefinidas no estilo clicando com o boto direito ou dando um clique duplo em cima do estilo , realize as alteraes desejadas depois OK.

Perceba que ao clicar em OK, automaticamente tudo que tinha a formatao antiga foi alterada , agilizando assim o processo de formatao do site.

41

APOSTILA HTML

Formatando o plano de fundo da pagina. Atravs do css podemos tambm editar o plano de fundo do site , podendo assim ter um maior controle sobre plano de fundo.Crie um novo estilo, clique na categoria fundo , formate como e OK.

Criando Lista personalizada.

Com o css podemos tambm redefinir os marcadores das lista ordenadas e no ordenadas .Antes de criar um estilo abra o Fireworks e crie o seu marcador (altura : 20 e largura: 20).

42

APOSTILA HTML

Com o marcador j pronto volte para o Dreamweaver , crie uma novo estilo ,OK, clique na categoria lista escolha a imagem que deseja utilizar como marcador( A imagem criada no fireworks) e OK.

Diferente dos outro estilos j vistos para adicionar o estilo ao texto deve-se primeiro aplicar os marcadores tradicionais que se localizam na barra de propriedades , e so depois aplicar o estilo css.

43

APOSTILA HTML

44