Você está na página 1de 72

1

Apresentao Este material, apresentado em CD ou impresso na forma de apostila, foi elaborado para ser mais um recurso didtico a ser utilizado no Curso de capacitao em informtica, tanto para apresentao da parte terica do curso como para assimilar o contedo. Objetivo Este curso introdutrio, tem por objetivo a insero digital dos articipantes capacitando-os para o uso da informtica e do potencial da internet na sua rotina diria. Assim, constitui-se em um pacote que ser chamado PACOTE WEB ESIGN, por se tratar especificamente de conhecimentos de computao abrangendo noes de HTML Hypertext Markup Language, em ingls, ou em portugus que significa Linguagem de Marcao de Hipertexto, dedicada construo de pginas Web. Metodologia A metodologia adotada no curso permitir que o participante receba todo o contedo diretamente em laboratrio de informtica e faa uso do mesmo, sempre que possvel para melhorar o seu desenvolvimento. Pensando nisso a equipe que elaborou este material primou pela simplicidade, utilizando figuras ilustrativas de forma a facilitar a compreenso dos contedos. No final da apostila foram adicionados exerccios para auxiliar na fixao de cada tpico, porm as possibilidades da informtica so ilimitadas e depender de cada participante buscar situaes do seu dia a dia para utilizar os seus conhecimentos e abrir as portas do mundo digital.

Contedo
1. 2. DEFINIO: __________________________________________________________________________________ 5 CRIANDO DOCUMENTOS HTML. _________________________________________________________________ 5 2.1. ELEMENTOS BSICOS _____________________________________________________________________ 6 2.1.1. TTULOS ____________________________________________________________________________ 6 2.1.2. CABEALHO _________________________________________________________________________ 7 2.1.3. PARGRAFO ________________________________________________________________________ 8 2.1.4. QUEBRA DE LINHA ___________________________________________________________________ 9 2.1.5. COMENTRIOS ______________________________________________________________________ 9 2.1.2. DICAS _____________________________________________________________________________ 10 3. FORMATAO DE TEXTOS _____________________________________________________________________ 12 3.1. 3.2. DEFININDO CORES _______________________________________________________________________ 12 ESTILOS DE TEXTO _______________________________________________________________________ 13

3.3. FORMATANDO BLOCOS DE TEXTO __________________________________________________________ 14 3.3.1. TAG DIV ___________________________________________________________________________ 14 4. CONTROLE DE CORES E GRFICOS DE FUNDO _____________________________________________________ 15 4.1. CORES E ELEMENTOS GRFICOS DE FUNDO __________________________________________________ 15 4.1.1. BACKGROUND (IMAGEM DE FUNDO) ___________________________________________________ 15 4.1.2. BGCOLOR __________________________________________________________________________ 16 4.2. CORES DE LETRAS E LINKS _________________________________________________________________ 17 4.2.1. ATRIBUTO TEXT _____________________________________________________________________ 17 4.2.2. ATRIBUTO LINK, VLINK E ALINK ________________________________________________________ 17 5. LINKS ______________________________________________________________________________________ 19 5.1. 5.2. 5.3. 5.4. 6. NCORAS ______________________________________________________________________________ 19 INTERLIGANDO DOCUMENTOS EM OUTROS DIRETRIOS _______________________________________ 19 INTERLINGANDO URLs ___________________________________________________________________ 21 LINKS PARA E-MAILS _____________________________________________________________________ 21

LISTAS _____________________________________________________________________________________ 22 6.1. 6.2. 6.3. 6.4. LISTAS NO NUMERADAS _________________________________________________________________ 22 LISTAS NUMEREDAS _____________________________________________________________________ 24 LISTAS DE DEFINIES ___________________________________________________________________ 25 LISTAS INTERCALADAS ___________________________________________________________________ 26

7.

IMAGENS ___________________________________________________________________________________ 28 7.1. 7.2. INSERINDO IMAGENS NA PGINA __________________________________________________________ 28 DIMENSIONANDO IMAGENS ______________________________________________________________ 29

7.3. ALINHANDO IMAGENS ___________________________________________________________________ 29 7.3.1. ALINHAMENTO EM RELAO AO NAVEGADOR____________________________________________ 29 7.3.2. ALINHAMENTO EM RELAO AO TEXTO _________________________________________________ 30 7.4. 8. OUTROS ATRIBUTOS _____________________________________________________________________ 31

TABELAS ___________________________________________________________________________________ 33

8.1. 8.2. 8.3.

MARCAES BSICAS ____________________________________________________________________ 33 DESENVOLVENDO UMA TABELA SIMPLES ____________________________________________________ 33 ATRIBUTOS DE CONTROLE DE TABELAS ______________________________________________________ 35

8.4. CORES E IMAGEM NA TABELA _____________________________________________________________ 43 8.4.1. CORES NA TABELA ___________________________________________________________________ 43 8.4.2. IMAGEM DE FUNDO NAS TABELAS _____________________________________________________ 44 9. FRAMES ____________________________________________________________________________________ 45 9.1. Sintaxe ________________________________________________________________________________ 45 9.1.1. Frameset __________________________________________________________________________ 45 Frame______________________________________________________________________________________ 49 9.2. 9.3. 9.4. 10. 10.1. 10.2. 10.3. 10.4. 10.5. INTERCALAO FRAMESET ______________________________________________________________ 50 LINKS _________________________________________________________________________________ 51 COMANDOS PARA FRAME/NOFRAME. ______________________________________________________ 52 META TAGS _______________________________________________________________________________ 52 Introduo ___________________________________________________________________________ 52 Como utilizar as meta tags ______________________________________________________________ 53 keywords ____________________________________________________________________________ 53 description ___________________________________________________________________________ 54 Escondendo seu site dos buscadores _____________________________________________________ 54

10.6. Mais do que divulgar seu site nos buscadores ______________________________________________ 56 10.6.1. content-language ___________________________________________________________________ 56 10.6.2. content-type _______________________________________________________________________ 56 10.6.3. author ____________________________________________________________________________ 57 10.6.4. reply-to ___________________________________________________________________________ 57 10.6.5. generator __________________________________________________________________________ 57 10.7. 10.8. 11. 11.1. 11.2. 11.3. 12.1. 12.2. 12.3. 12.4. 12.5. 12.6. 13. 14. 15. Redirecionando o visitante para outra pgina ______________________________________________ 57 Finalizando __________________________________________________________________________ 58 CORES ___________________________________________________________________________________ 58 MATIZ, SATURAO E TONALIDADE ______________________________________________________ 58 SISTEMA DE REPRESENTAO DAS CORES _________________________________________________ 59 PSICOLOGIA DAS CORES ________________________________________________________________ 59 ESTILO ANTIGO _______________________________________________________________________ 62 ESTILO MODERNO _____________________________________________________________________ 63 SERIFA GROSSA _______________________________________________________________________ 63 SEM SERIFA __________________________________________________________________________ 64 MANUSCRITO ________________________________________________________________________ 64 DECORATIVO _________________________________________________________________________ 65 CARACTERES ESPECIAIS _____________________________________________________________________ 65 TABELA DE CORES _________________________________________________________________________ 71 SEJA UM BOM WEB DESIGNER! ______________________________________________________________ 72

1. DEFINIO: Os arquivos em HTML - HyperText Markup Language - Linguagem de Formatao de Hipertexto - pode ser gerados em qualquer editor de texto. possvel transformar um arquivo .doc (formato Word) para HTML. A linguagem HTML utiliza marcaes especficas e distintas para dizer ao navegador (Internet Explorer, Firefox, Mozilla, e outros) como exibir o documento. Os comandos HTML so chamados de TAGS, compreende as marcas padres que so utilizadas para fazer indicaes a um browser. Assim como em outras linguagens, os comandos tm uma sintaxe prpria e seguem algumas regras: - As TAGs aparecem sempre entre os sinais de menor que (<) e maior que (>); - Geralmente so utilizados em pares , sendo que a TAG de finalizao de um comando precedida de uma barra (/). A maioria das etiquetas tem a sua correspondente de fechamento: <etiqueta> ............................................. </etiqueta> De um modo geral, as tags aparecem em pares, por exemplo: <H1> Cabecalho </H1> Onde: - A tag <H1> indica o incio na instruo; - O texto Cabealho indica o texto que ser formatado; - E a tag </H1> indica o final da instruo. O smbolo que termina uma determinada etiqueta igual aquele que a inicia, antecedido por uma barra ( / ) e precedido pelo texto referente. As etiquetas so necessrias, pois servem para definir a formatao de um bloco de texto, e assim marcamos onde comea e termina o texto com a formatao especifica por ela. <font> IDEPAC Instituto de Desenvolvimento Profissional Amigos Contabilistas, Empresrios, Profissionais Liberais e Informtica </font> H excees para a utilizao dos pares de etiquetas. Por exemplo, a que indica um final de um pargrafo: <p> no necessita de uma correspondente </p> para terminar a formatao do bloco de texto. A etiqueta que indica quebra de linha <br> tambm no precisa de etiqueta correspondente, entre outras.

2. CRIANDO DOCUMENTOS HTML. Todo documento HTML precisa conter certas tags padronizadas, no mnimo <HEAD>, </HEAD>, <BODY> e </BODY>, pois elas constituem as duas partes bsicas de um documento HTML que so: o HEAD (cabealho) e o BODY (corpo do documento). <HTML> <HEAD> <TITLE>Curso de WebDesign</TITLE> </HEAD> <BODY> <H1>Este o primeiro nvel de cabealho.</H1><p> Bem-vindo ao mundo do HTML. Este o primeiro pargrafo.<p> Este o segundo paragrfo </BODY> </HTML>

A tag <HEAD> contm, entre outras coisas, o <TITLE> (ttulo), e a tag <BODY> armazena todo o contedo do documento, normalmente composto de pargrafos, listas, tabelas, etc. Para interpretar corretamente o contedo do documento HTML, os browsers esperam informaes em acordo com as especificaes HTML. Abra o bloco de notas, e digite o cdigo acima e salve-o como primeiro.html. Em seguida, abra arquivo primeiro.html no navegador (Internet Explorer, ou outro).

Figura 1.1 Modelo de arquivo HTML Explicao: A primeira TAG que encontramos no documento <HTML>. Ela o elemento raiz de um documento HTML, pois dentro dela est todo o contedo da pgina. Esta tag diz ao navegador para iniciar um novo documento HTML, onde o contedo que dever ser exibido esta entre as tags <HTML> e </HTML>. O texto contido ente as TAG <HEAD> e </HEAD> define o cabealho do documento. Estas informaes so importantes, pois indicam ao navegador a forma que a pgina deve ser presentada graficamente. A tag <TITLE> define o ttulo da pgina. Observe a figura 1.1 o topo do navegador, est informado Curso de WebDesign. A tag <BODY> informa ao navegador o que dever ser exibido graficamente. O corpo da pgina BODY constitudo pelo contedo que est entre as tags <BODY> e </BODY>. 2.1. ELEMENTOS BSICOS 2.1.1. TTULOS Todo documento em HTML deve possuir um ttulo. O ttulo exibido em local separado da pgina, e utilizado para identificar o documento em outros contextos, de modo que o ttulo deve indicar claramente o contedo do documento. As tag utilizadas para ttulos so: <TITLE> e <\TITLE>.
<html> <title>Este o ttulo</title> <body> <h2>E este o cabealho de nvel 2</h2> Aqui entra o texto do documento ...

</body> </html>

Figura2.1 Modelo de ttulo 2.1.2. CABEALHO

Os cabealhos normalmente so usados para ttulos e subttulos de uma texto da pgina. A linguagem HTML possui seis nveis de cabealhos, numerados de 1 a 6; quanto menor o nvel, maior ser o destaque. Em geral, os cabealhos so exibidos em letras maiores e em negrito, e o HTML adiciona uma linha em branca antes e depois dos cabealhos. O primeiro cabealho de uma pgina deve ser marcada como <H1>. COMANDO: <Hy> Texto do Cabealho </Hy> Onde o y um nmero que poder ser especificado entre 1 a 6, definindo o nvel do cabealho.
COMANDO: <H1> Cabealho nvel 1 </H1> <H2> Cabealho nvel 2 </H2> <H3> Cabealho nvel 3 </H3> <H4> Cabealho nvel 4 </H4> <H5> Cabealho nvel 5 </H5> <H6> Cabealho nvel 5 </H6>

Figura 2.2 Modelo de Cabealhos

2.1.3. PARGRAFO A tag <p> utilizada para definir o incio de um pargrafo, criando uma linha em branco entre cada pargrafo. O tag <p> tambm responsvel pelo alinhamento dos pargrafos. O alinhamento pode ser: LEFT : Pargrafo alinhado a esquerda. CENTER: Pargrafo alinhado ao centro. RIGHT: Pargrafo alinhado a direita. JUSTIFY : Pargrafo justificado. <html> <head> <title>Alinhamento de pargrafos</title> </head> <body> <p>Este pargrafo utiliza o alinhamento padro dos navegadores de Internet (esquerdo). <p align=center>Este pargrafo utiliza o alinhamento centralizado <p align=right>Este pargrado utiliza o alinhamento direita. </body> </html>

Figura 2.3 Modelo de alinhamento de pargrafos 8

2.1.4. QUEBRA DE LINHA A tag <br> usada para terminar uma linha sem iniciar um novo pargrafo. Esta tag <br>, ou line break, provoca uma mudana de linha sem acrescentar espao extra entre as linhas. Veja a diferena entre o uso da tag <p> e da tag <br>: MODELO I <html> <body> <h1>Utilizando a tag p </h1> Vamos separar esta linha com a marcao de paragrfo.<p> Para verificar a diferena. </body> </html> MODELO II <html> <body> <h1>Utilizando a tag br</h1> Diferena quando separamos duas linhas utilizando<br> a marcao de quebra de linha<br> Diferena quando separamos duas linhas utilizando<br> a marcao de quebra de linha <br> Verificou a diferena? </body> </html>

Figura 2.4 Modelos de quebra de linha


2.1.5. COMENTRIOS

Os comentrios servem para dizer ao navegador que o contedo apenas anotaes e que no devem ser apresentados graficamente na pgina. Os comentrios so utilizados para explicar o cdigo fonte para que mais tarde seja possvel compreender o que foi feito.
9

COMANDO: <!-- Comentrio da pgina -->

2.1.6. Lista de elementos bsicos.

2.1.7. DICAS.

Quando criamos pginas em HTML devemos ter sempre ateno ao fato delas poderem ser apresentadas de forma diferente em cada navegadores (browsers) ou em computadores diferentes. O ASPECTO GRFICO PODE DIFERIR ENTRE COMPUTADORES OU ENTRE NAVEGADORES ! Isso ocorre no s pela diferena ente os sistemas, mas tambm pelo fato de que os usurios possuem monitores diferentes e podem redimensionar a janela do navegador para o tamanho que preferirem. - As diferenas nos tamanhos das janelas dos navegadores fazem com que o nmero de linhas varie muito. Por esse motivo no seremos capazes de controlar nem o nmero de linhas nem os locais em que acontecem as mudanas de linhas. - Sempre que quiser inserir linhas em branco use <br>. - J observou alguma vez uma pgina da internet, e se perguntou: Quais as instrues que foram utilizadas?. Se estiver utilizando o Internet Explorer e quiser descobrir as instrues, v at o menu Exibir e escolha a opo Cdigo Fonte, ou clique com o boto direito do mouse e selecione a opo Exibir Cdigo Fonte. - No desanime se o aspecto do cdigo fonte lhe aparecer assustador. Se esse for o caso, pode ter certeza que a pgina que est visualizando foi feita por um programa especfico. Ao longo do curso, ser possvel verificar que o cdigo HTML bem escrito a mo muito fcil de ler, mas muitas pessoas complicam o cdigo para confundir.

10

REVISO CPITULO 1 e 2
1. Qual o smbolo que determina o fechamento de uma tag? ________________________________________________________________________ ________________________________________________________________________ ________________________________________________________________________ ________________________________________________________________________

2. Quais os elementos bsicos de uma pgina HTML? ________________________________________________________________________ ________________________________________________________________________ ________________________________________________________________________ ________________________________________________________________________

3. Qual a diferena entre a tag <p> e a tag <br>? ________________________________________________________________________ ________________________________________________________________________ ________________________________________________________________________ ________________________________________________________________________

4. Quando utilizamos os comentrios? ________________________________________________________________________ ________________________________________________________________________ ________________________________________________________________________ ________________________________________________________________________

11

3. FORMATAO DE TEXTOS 3.1. DEFININDO CORES

A tag <font> permite que voc insira em sua pgina um texto com fontes, tamanhos, cores e tipos diferentes. COMANDO: <FONT SIZE=n FACE=nome COLOR=cor> Texto </font> Onde: SIZE: indica o tamanho da fonte que varia de 1 a 7, sendo 3 o valor padro da maioria dos navegadores. FACE: indica o nome da fonte utilizada. As fontes padres da maioria dos navegadores so: o ARIAL, TIMES NEW ROMAN, GEORGIA, COURIER, VERDANA. COLOR : Define a cor da fonte do texto, em hexadecimal.
Veja o exemplo abaixo:
<html> <head><title>Formatao</title></head> <body> <h1>Formatao </h1> <h2>Algumas fontes padres da internet</h2> <font face="Times New Roman" color=red size=7> Fonte Times New Roman, cor vermelha e tamanho 7</font><br> <font face="Georgia" color=blue size=5> Fonte Georgia, cor azul e tamanho 5</font><br> <font face="Courier" color=#000000 size=3> Fonte Courier, cor preto e tamanho3</font><br> <font face="verdana" color=green size=1> Fonte verdana, cor verde e tamanho1</font><br> </body> </html>

Figura 3.1 Modelo de Formatao


12

3.2. ESTILOS DE TEXTO

O HTML define muitos elementos para formatar textos, como por exemplo escrever em negrito, itlico ou sublinhado. ELEMENTO DESCRIO <b> Define texto escrito em negrito. <big> Define texto com letra maior. <em> Define texto enfatizado. (escrita com caracteres itlicos) <i> Define texto escrito com caracteres itlicos. <small> Define texto com letra menor. <strong> Define texto forte (escrita com caracteres em negrito) <sub> Texto subscrito (alinhado um pouco mais para baixo) <sup> Texto sobrescrito (alinhado um pouco mais para cima) <blink> Texto pulsante COMANDO: <html> <head> <title>Exemplo</title> </head> <body> <b>Isto texto em negrito</b> <br> <strong>Isto texto forte</strong> <br> <big>Isto texto maior</big> <br> <em>Isto texto enfatizado</em> <br> <i>Isto texto itlico</i> <br> <small>Isto texto mais pequeno</small> <br> Este texto contm uma parte alinhada mais <sub>abaixo</sub> <br> Este texto contm uma parte alinhada mais <sup>acima</sup> </body> </html>

Figura 3.2 Modelo de formatao de texto 13

3.3. FORMATANDO BLOCOS DE TEXTO 3.3.1. TAG DIV

A tag <div> permite alinhar horizontalmente qualquer elemento em sua pgina. O alinhamento pode ser: left, center ou right. Onde a posio pode ser: LEFT: Alinhamento a esquerda; CENTER: Alinhamento centralizado; RIGHT: Alinhamento a direita. O padro de alinhamento da tag <div> a esquerda. COMANDO: <div align=posicao>Elementos a serem alinhados</div> <html> <head> <title>ALINHAMENTO DE ELEMENTOS COM A TAG DIV</title> </head> <body> <div align=center border=2> <h1>Usando a TAG DIV </h1></div> <div align=right> <p> Usando a tag DIV possvel alinhar o texto sem problemas <p>Pode utilizar o alinhamento a direita que alinha o seu texto na margem direita da tela.<br> Como um texto criado em um editor de texto para ser exibido na pgina. </div> </body> </html>

Figura 3.3 Modelo de bloco de texto


14

4. CONTROLE DE CORES E GRFICOS DE FUNDO

Uma cor ou imagem de fundo bem escolhidos podem melhorar o aspecto da pgina, mas uma m escolha capaz de causar danos muito graves na legibilidade e no aspecto geral. A maioria dos browsers permite a utilizao de cores, apenas 256, mas j o suficiente para criar uma pgina com fundo e textos personalizados. As cores so compostas por cdigo RGB (red, green, blue). Cada cdigo define a intensidade do vermelho, do verde e do azul. 4.1. CORES E ELEMENTOS GRFICOS DE FUNDO

4.1.1. BACKGROUND (IMAGEM DE FUNDO)

O atributo background deve ser aplicado tag <body>, que especifica uma imagem que ser utilizada como fundo de uma pgina, sendo que a imagem ocupar toda a rea de fundo da tela. COMANDO: <body background=URL>Corpo da pgina</body> <html> <head> <title>Imagem de fundo - BACKGROUND</title> </head> <body background=fundo.jpg> <h1 align=center>Imagem de fundo<br>Background</h1> <p align=center>Com esse atributo voc insere imagem de fundos nas pginas. </body> </html>

Figura 4.1 Modelo do atributo background

15

4.1.2. BGCOLOR

O atributo BGCOLOR o atributo que determina a cor de fundo da pgina, permitindo que se defina uma cor de fundo padro para a pgina sem a necessidade de utilizar um arquivo de imagem. COMANDO: <body bgcolor=#FFFFCC>Corpo da pgina</body> <html> <head> <title>Cor de fundo - BGCOLOR</title> </head> <body bgcolor=#FFFFCC> <h1 align=center>Cor de Fundo<br>BGCOLOR</h1> <p align=center>Com esse atributo voc controla a cor de fundo das pginas. </body> </html>

Figura 4.2 Modelo de uso do atributo BGCOLOR

DICAS: importante ter cuidado ao aplicar elementos de fundo, para no prejudicar a leitura dos textos. interessante sempre visitar outras pginas que utilizam este recurso para recolher boas idias. Para tornar a visualizao das pginas mais rpidas, alguns usurios no utilizam imagens em suas pginas, em vez disso utilizam o atributo BGCOLOR.
16

4.2. CORES DE LETRAS E LINKS

4.2.1. ATRIBUTO TEXT

O atributo TEXT utilizado para controlar a cor do texto normal de uma pgina, ou seja, define a cor de todo o texto do documento, exceto os links. O atributo TEXT inserido na tag <BODY>, tendo como padro a cor preto (#000000). COMANDO: <body text=#RRGGBB>Corpo da Pgina </body> <html> <head> <title>Cor de texto - TEXT</title> </head> <body bgcolor=#FFFFFF text=#333333> <h1 align=center>CORES DE LETRAS DE TEXTO NORMAL</h1> <p align=center>Com esse atributo voc controla a cor do texto em uma pgina. </body> </html>

Figura 4.3 Modelo do uso do atributo TEXT


4.2.2. ATRIBUTO LINK, VLINK E ALINK

Os atributos LINK, VLINK e ALINK fazem o controle das cores do textos que funcionam como link na pgina. LINK: Define cores de links no visitados. Cor padro o AZUL. VLINK: Define as cores dos links j consultados. Cor padro vermelho-prpura.
17

ALINK: Define as cores dos links selecionados, ou seja, quando o usurio pressionou o boto do mouse e ainda no soltou. Cor padro vermelho. COMANDO: <body link=#RRGGBB vlink=#RRGGBB alink=#RRGGBB>Corpo da pgina</body> <html> <head> <title>Cor de Links - LINK VLINK ALINK</title> </head> <body bgcolor=#FFFFE0 text=#FF6347 LINK#0000CD VLINK=#7FFFD4 ALINK=#ADFF2F > <h1 align=center>EXEMPLO DE CORES</h1> <p align=center>O fundo da pgina est com uma cor especial:<BR> <B>Lightyellow - RGB : #FFFFE0</b><br> <b>Alink = GreenYellow - RGB:#ADFF2F</b><br> <b>Link = MediumBlue RGB:#0000CD</b><br> <b>Vlink = Aquamarine- RGB: #7FFFD4</b> </body> </html>

REVISO CAPTULO 4
1) Porque importante ter cautela ao utilizar cores e imagens de fundo em pginas para WEB? 2) Qual a diferena entre o atributo BACKGROUND e BGCOLOR? 3) O atributo TEXT utilizado em qual TAG? 4) Defina os atributos: a) LINK: ___________________________________________________________________________ ___________________________________________________________________________ b) VLINK: ___________________________________________________________________________ ___________________________________________________________________________ c) ALINK: ___________________________________________________________________________ ___________________________________________________________________________

18

5. LINKS

O principal poder do HTML, est na capacidade de ligar partes de textos e imagens a outros documentos. A interligao entre documentos feito utilizando a tag <a>, e no se restringe apenas a outras pginas. Os links podem apontar para qualquer recurso disponvel na WEB, podendo ser uma pgina em HTML, uma imagem, um arquivo de som, um filme, etc. 5.1. NCORAS As ncoras so links que utilizamos quando queremos buscar o contedo na mesma pgina. So muito utilizadas em pginas que tm o contedo extenso, onde definimos sees na pginas, sendo que cada seo ter um nome que servir de referncia para o link. Para criarmos uma ncora selecionamos um local da pgina para inser-la. <a name=nomedaseo> </a>

Onde: - <a (h um espao depois do a): a abertura da tag de link; - name:nome da seo: o nome dado a seo. - No necessrio inserir nada entre as tags <a> e </a>; - </a>: utilizada para encerrar a tag. Com essa tag voc inserir uma imagem ou texto que indicar ao usurio que ao clicar neste tipo de link, este ir gui-lo at o local onde foi inserida a ncora. <a href=#Nome da Seo> Texto ou imagem </a> Onde: - <a = a abertura da tag de link; - href=#Nome da Seo = indica o nome da seo que ser acessada. - Texto ou imagem = indica o texto ou a imagem que receber o link. - </a> = encerra a TAG. - O smbolo # indica ao navegador que o link se encontra na mesma pgina. indispensvel o uso de #. 5.2. INTERLIGANDO DOCUMENTOS EM OUTROS DIRETRIOS

Para interligar documentos em outros diretrios necessrio apenas indicar o caminho completo da localizao do mesmo. Quando falamos de WEB, a forma de localizar arquivos diferente do Windows e DOS, vejamos por que: - A barra utilizada para separar diretrios a barra convencional ( / ); - O diretrio atual ser sempre o ponto de partida para buscarmos arquivos em outro diretrio; - Caso o arquivo esteja localizado em outros nveis de diretrios, utilizamos .. / .

19

Exemplo: Ao clicar no link Pagina 1, na pgina index.html, queremos quer abra a pgina pagina1.htm, localizada dentro do diretorio pagina1. <a href=pagina1/pagina1.html>Pgina 1</a>

Figura 5.1 Modelo de links para documentos localizados em outros diretrios

Vamos imaginar a seguinte situao: Estamos na pgina materias.html, localizada no diretrio materias, dentro do diretrio pagina1 e ao clicarmos no link Pgina Inicial queremos que nos posicione na index.html que esta fora do diretrio pagina1. Como fazemos?

Figura 5.2 Modelo de nveis de diretrios <html> <head> <title>LINK PARA OUTRO DIRETRIO</title> </head> 20

<body> <div align=center> <h1 align=center>Pgina Matrias</h1> <p> Modelo de interligao de documentos localizados em nvel diferente.<br> <a href=../../index.html>Pgina Inicial </a> </body> </html> Observe a linha: <a href=../../index.html>Pgina Inicial </a> Sendo que: - <a = a tag de abertura de link; - href = especifica a localizao de qualquer tipo de recurso da internet, incluindo arquivos HTML. - ../../index.html = indica que o arquivo index.html est 2 NVEIS ( ../../ ) inferior a pgina atual, ou seja, para exibir o arquivo index.html, teremos que retornar dois diretrios, sendo estes os diretrios materias/pagina1. (Observe a figura 5.2) -Pgina Inicial = o texto que ser utilizado como link, para que ao clicarmos este nos direcione para o local indicado no atributo href. -O visitante da pgina apenas visualizar a palavra indicada entre as tags <a> </a>, que no caso citado acima a palavra Pgina Inicial.
5.3. INTERLINGANDO URLs

Para criarmos um link para qualquer endereo localizado na internet, utilizamos uma URL. URL a abreviao de Uniform Resource Locator, que tem a funo de especificar a localizao de pginas ou arquivos em servidores da WEB. A URL composta de duas partes: 1) O protocolo Internet do documento; 2) O endereo do servidor da pgina. <a href: protocolo://servidor.arquivo> texto ou imagem </a> Onde: O protocolo: o tipo de servidor que est sendo acessado; Os mais utilizado so: - HTTP: = Hiper Text Transfer Protocol, um servidor da www. - FTP: = File Transfer Protocol, um servio para a troca de arquivos, programas entre o servidor e o computador remoto. - Servidor = Entenda como servidor o computador onde a pgina est localizada. - Arquivo = o arquivo que deseja ser visualizado, podendo ser um diretrio e o nome do arquivo.
5.4. LINKS PARA E-MAILS

possvel colocar links para e-mail em pginas HTML. Ao clicar sobre o link do e-mail, abrir o programa de envio de e-mail, podendo ser este o OULTLOOK EXPRESS ou outro que estiver configurado no computador.
21

<a href=mailto:endereo>Texto ou Imagem </a> Onde: - mailto = informa ao navegador que o link para e-mails; - endereo = dever ser informado o e-mail que ser direcionada as mensagens.

REVISO CAPTULO 5
1) Qual a tag utilizada para indicar links? __________________________________________________________________ 2) O que so ncoras? E para que servem? ___________________________________________________________________________ ________________________________________________________ 3) Como fazer links com arquivos que esto em outros diretrios, o que utilizamos? ___________________________________________________________________________ _________________________________________________________ 4) Escreva o comando para fazer links para e-mails.

6. LISTAS

As listas so utilizadas para organizar os contedos das pginas, servindo como resumos ou ndices dos sites. As listas podem conter links para outras pginas, para arquivos ou outros sites. Existem 4 tipos de listas, sendo estas: - LISTA NO NUMERADA; - LISTA NUMERADA - LISTA DE DEFINIES - LISTA INTERCALADAS.
6.1. LISTAS NO NUMERADAS

As listas no numeradas inserem marcadores na frente de cada item. Comando: <UL TYPE=formato> <LI> Item 1 <LI> Item 2 <LI> Item 3 </UL> Onde: <UL>: indica o nicio da lista pontuada; TYPE=formato: indica o formato do marcador da lista, pode ser: - disc : formato de ponto (padro utilizado pelos navegadores); - square: formato de quadrado; - circle: formato de crculo; <LI>: indica os tpicos da lista. </UL>: indica o fim da lista.
22

<html> <head> <title> Listas no numeradas </title> </head> <body> <h1> Listas no numeradas</h1> <ul type=disc> <li> Type = disc <li> Item 1 <li> Item 2 <li> Item 3 </ul> <ul type=square> <li> type=square <li> Item 1 <li> Item 2 <li> Item 3 </ul> <ul type=circle> <li> type = circle <li> Item 1 <li> Item 2 <li> Item 3 </ul> </body> </html>

Figura 6.1 Modelo de lista no numerada

23

6.2. LISTAS NUMEREDAS

A lista numerada semelhante lista no numerada, porm no lugar de marcadores inserida na pgina uma lista numrica ou alfabtica, com valor pr-definido ou no. Comando:

<OL TYPE=formato START=n> <LI> Item 1 <LI> Item 2 <LI> Item 3 </OL> Onde: OL: indica o nicio da lista numerada. Type=formato : indica o formato da numerao da lista, que pode ser: 1: Lista numrica A: Lista alfabtica com letras maisculas; a: Lista alfabtica com letras minsculas; I : Lista numrica com nmeros romanos maisculos; i : Lista numrica com nmeros romanos minsculos. START=n : indic o valor inicial da lista numerada; <LI>: indica o tpico da lista. </OL> indica o fim da lista numerada.
<html> <head> <title> Listas numerada </title> </head> <body> <h1> Listas numeradas</h1> <h3>Lista numerada padro</h3> <ol> <li> Item 1 <li> Item 2 <li> Item 3 </ol> <h3>Lista numerada padro com START=10</h3> <ol start=10> <li> Item 1 <li> Item 2 <li> Item 3 </ol> <h3>Lista alfabtica com letras maisculas</h3> <ol type=A> <li> Item 1 <li> Item 2 <li> Item 3 </ol> </body> </html>

24

Figura 6.2 Modelo de Lista numerada


6.3. LISTAS DE DEFINIES

As listas de definies so diferentes da demais listas, pois cada item da lista possui dois elementos: um item e uma descrio do item. Comando: <DL> <DT> Item 1 <DD> Descrio do Item 1 <DT> Item 2 <DD> Descrio do Item 2 </DL> Onde: <DL>: indica o nicio da lista descritiva; <DT>: indica o item da lista; <DD>: indica a descrio do item da lista ; </DL>: indica o fim da lista. NOTA: - Para cada tag <DT> existe uma tag <DD> - No necessrio encerrar as tags <DT> e <DD <html> <head> <title> Listas de Definies </title> </head> <body> <h1> Listas de Definies</h1> <DL> <DT><b>Listas no numeradas</b> <DD> As listas no numeradas ou pontuadas inserem marcadores na frente de cada item. </DL>
25

<DL> <DT><b>Lista numeradas</b> <DD>As listas numeradas inserem nmeros ou letras na frente de cada item. </DL> <DL> <DT><b>Lista de Definies</b> <DD>As listas de definies so diferentes das demais listas, pois possuem dois elementos: o item e a descrio do item. </DL> </body> </html>

Figura 6.3 Modelo de lista de definies


6.4. LISTAS INTERCALADAS

As listas intercaladas so utilizadas para melhor organizar as estruturas dos itens, podendo criar hierarquias, unindo listas numeradas com listas no numeradas. <html>
<head> <title> Listas Intercaladas </title> </head> <body> <h1> Lista Intercaladas</h1> <UL> <LI>Estados da Regio Sul <UL> <LI>Paran <LI>Santa Catarina </UL> <LI>Estados da regio Sudeste <OL> <LI>So Paulo <LI>Rio de Janeiro <LI>Minas Gerais </OL> </UL> </body> </html>

26

Figura 6.4 Modelo de Lista Intercalada


REVISO CAPTULO 6 1) Para que servem as listas? ______________________________________________________________________________ ______________________________________________________________________________ ____________________________________________________________________________ 2) Defina: a) LISTA NO NUMERADA: ______________________________________________________________________________ ______________________________________________________________________________ _____________________________________________________________________ b) LISTA NUMERADA: ___________________________________________________________________________ ______________________________________________________________________________ ________________________________________________________________________ c) LISTA DE DEFINIES: ___________________________________________________________________________ ______________________________________________________________________________ ________________________________________________________________________ d) LISTA INTERCALADA: ______________________________________________________________________________ ________________________________________________________________________ 3) A tag <OL> utilizada para indicar qual tipo de lista? ______________________________________________________________________________ ________________________________________________________________________ 4) Para escreve uma lista alfabtica, qual o comando devo utilizar? Escreva o comando. ______________________________________________________________________________ ______________________________________________________________________________ _____________________________________________________________________ 5) Qual a diferena entre a lista de definies das demais listas? ______________________________________________________________________________ ______________________________________________________________________________ _____________________________________________________________________ 27

7. IMAGENS Hoje em dia, a grande maioria dos navegadores exibem imagens dispostas em sites, porm as imagens possuem formatos especficos, pois no qualquer tipo de arquivo de imagem que deve ser inserido em uma pgina para WEB. Os formatos mais aceitos so os arquivos com a extenso: .GIF ou . JPEG (JPG). O formato GIF (Grafic Interchange Format) suporta no mximo 256 cores e gera imagens com tamanhos menores. Este formato muito utilizado para desenhos ou grficos, gerando arquivos com a extenso .GIF. J o formato JPEG (Joint Photografic Engineering Group) suporte 16 milhes de cores e pode reduzir o tamanho de uma imagem em at 10 vezes. Este formato muito utilizado para fotos, gerando arquivos com a extenso .JPEG ou JPG. Ao utilizar gifs animados, tenha cuidado, pois estes arquivos podem ocupar bastante espao em disco. O tamanho dos gifs animados depender da quantidade de cores e quadros utilizados para a animao. Estes detalhes faro com que sua pgina carregue mais rpido no navegador do usurio, tornado assim a visitao ao site mais agradvel.
7.1. INSERINDO IMAGENS NA PGINA

Comando: <img src=diretorio/arquivo> Onde: - <img>: tag que indica que h uma imagem na pgina. - Src =diretorio/arquivo : atributo que indica o diretrio e a imagem que dever ser exibida.

Figura 7.1 Modelo de insero de imagens

28

7.2. DIMENSIONANDO IMAGENS

Todas as imagens possuem um tamanho x e y, sendo x sua largura e y a sua altura. O tamanho das imagens exibidas no navegador pode ser redimensionado. Para redimensionar a imagem utilizamos dois atributos: o WIDHT e o HEIGHT. Comando: <img src=imagem/diretorio width=n height=n> Onde: - Widht=n: indica a largura da imagem em pixels. - Height=n : indica a altura da imagem em pixels.

Figura 7.2 Modelo de redimensionamento de imagens NOTA: - MUITO CUIDADO, ao redimensionar imagens, pois elas podem perder a sua definio, ficando com o aspecto distorcido.
7.3. ALINHANDO IMAGENS

As imagens inseridas em uma pgina podem ser posicionadas na tela da seguinte forma: TOP, MIDDLE, BOTTOM, LEFT e RIGHT. O atributo utilizado para alinhar a imagem o ALIGN. Comando: <img src=diretorio/arquivo widht=n height=n ALIGN=posio>
7.3.1. ALINHAMENTO EM RELAO AO NAVEGADOR

Em relao ao navegador, utilizamos duas posies sendo estas: - LEFT: Alinha a imagem a esqueda. (posio padro dos navegadores) - RIGHT : Alinha a imagem a direita. <html> <head> <title>Alinhando Imagens</title> </head>
29

<body> <h1>Alinhamento de Imagens</h1> <p>Alinhamento a Esquerda<br> <img src=ft02.gif width=150 height=150 align=left><br> <br><BR><BR><BR><BR><BR> <p>Alinhamento a Direita <img src=ft02.gif width=150 height=150 align=right > </body> </html>

Figura 7.3 Modelo de alinhamento de imagens ao navegador


7.3.2. ALINHAMENTO EM RELAO AO TEXTO

Em relao ao texto podemos utilizar os seguintes alinhamentos: TOP, BOTTOM e MIDDLE. Onde: -TOP: Alinha o texto com o topo da imagem; - MIDDLE: Alinha o texto com o centro da imagem; - BOTTOM: Alinha o texto com o rodap da imagem. <html> <head> <title>Alinhando Imagens</title> </head> <body> <h1>Alinhamento de Imagens</h1> <p>Texto Alinhdo ao topo<br> <img src="images2.jpg" width=100 height=100 align=top><br> <p>Texto alinhado ao centro<br> <img src="images2.jpg" width=100 height=100 align=middle>
30

<p>Texto alinhado ao rodap&eacute;<br> <img src="images2.jpg" width=100 height=100 align=bottom> </body> </html>

Figura 7.4 Modelo de alinhamento de imagem ao texto 7.4. OUTROS ATRIBUTOS

O atriibuto ALT utilizado para exibir uma mensagem quando a imagem est sendo carregada. Tambm tem a funo de especificar ou indicar a imagem, quando o cursor do mouse colocado sobre ela. Comando: <img src=diretorio/imagem width=n height=n align = posicao ALT=mensagem > Onde: - ALT = mensagem : indica a mensagem que ser exibida quando o cursor do mouse for colocado sobre a imagem.

Figura 7.5 Modelo de utilizao do atributo ALT

31

<html> <head> <title>Redimensionado Imagens</title> </head> <body> <h1>Redimensionamento de Imagens </h1> <img src=ft01.jpg alt=A mensagem inserida aqui ser apresentada quando o cursor do mouse for posicionado sobre a imagem> </body> </html>

REVISO - CAPTULO 7 1)Quais os formatos de arquivos de imagens mais indicados para WEB?
___________________________________________________________________________ ___________________________________________________________________________ __________ 2)Qual a diferena entre as imagens no formato GIF e JPG? ___________________________________________________________________________ ___________________________________________________________________________ ___________________________________________________________________________ 3) Defina os alinhamentos: a) TOP: ___________________________________________________________________________ ___________________________________________________________________________ ________________________________________________________________________ b) MIDDLE: ___________________________________________________________________________ ___________________________________________________________________________ ___________________________________________________________________________ c) BOTTOM : ___________________________________________________________________________ ___________________________________________________________________________ ___________________________________________________________________________ d) LEFT: ___________________________________________________________________________ ___________________________________________________________________________ ___________________________________________________________________________ e) RIGHT: ___________________________________________________________________________ ___________________________________________________________________________ ___________________________________________________________________________ 5) O atributo ALT utilizado para: ___________________________________________________________________________ ___________________________________________________________________________ ___________________________________________________________________________

32

8. TABELAS As tabelas so muito utilizadas na internet hoje em dia, para estruturar o layout das pginas, para organizar dados, etc. Em uma tabela podemos inserir textos, imagens, links e outros elementos e ainda podemos utilizar uma tabela dentro outra tabela. No primeiro contato, possvel achar difcil a compreenso das tags utilizadas para estruturar as tabelas, mas com o uso tornar mais fcil a utilizao e a interpretao de possveis falhas que um editor de HTML qualquer possa gerar.
8.1. MARCAES BSICAS

<TABLE> </TABLE> Esta tag indica o incio e o fim da tabela. O atributo border insere uma borda para marcar a diviso das clulas. <TR> </TR> - Esta tag indica as linhas da tabela. <TD> </TD> - Esta tag indica as clulas contidas em cada linha da tabela. nesta tag que inserimos os dados que sero exibidos na tabela. <TH> </TH> - Esta tag define os ttulos de uma tabela, podendo ser utilizado em qualquer clula. A diferena entre a tag <TD></TD> e a tag <TH> <TH> que o contedo inserido entre as tags <TH></TH> ser exibido em negrito. <CAPTION> </CAPTION> - Esta tag insere a legenda da tabela. Deve ser inserida entre as tags <TABLE> </TABLE>.
8.2. DESENVOLVENDO UMA TABELA SIMPLES

Com base no contedo do item acima, vamos desenvolver nossa primeira tabela. 1. MODELO <table border> <tr> <td>Primeira Clula Primeira Linha</td> <td>Segunda Clula Segunda Linha</td> </tr> <tr> <td>Primeira Clula Segunda Linha</td> <td>Segunda Clula Segunda Linha</td> </tr> </table>

33

Onde o comando acima ir ser exibido da seguinte forma:

Figura 8.1 Primeiro modelo de tabela


2. MODELO <table border> <CAPTION>Modelo 2 de Tabelas Simples</CAPTION> <tr> <td>Itens/Ms</td> <th>Janeiro</th> <th>Fevereiro</th> <th>Maro</th> </tr> <tr> <th>Usurios</th> <td>100</td> <td>200</td> <td>300</td> </tr> <tr> <th>Linhas</th> <td>1</td> <td>2</td> <td>3</td> </tr> </table>

Figura 8.2 Segundo exemplo de tabela


34

8.3. ATRIBUTOS DE CONTROLE DE TABELAS

WIDTH Este atributo utilizado para alterar a largura da tabela e das clulas em relao ao navegador. Os valores inseridos podem ser em pixel ou em percentuais, ou seja, este atributo determina a rea da tela que a tabela ir ocupar. Comando: 1 MODELO WIDTH na tag <TABLE> <table border widht=50> <tr> <td>Segunda</td> <td>Tera </td> <td>Quarta</td> </tr> <tr> <td>Quinta</td> <td>Sexta</td> <td>Sbado</td> </tr> </table>

Figura 8.3 Modelo de atributo width na tabela

35

2 MODELO WIDTH na tag <TD> <table border> <tr> <td width=50%>Segunda</td> <td>Tera </td> <td>Quarta</td> </tr> <tr> <td>Quinta</td> <td>Sexta</td> <td>Sbado</td> </tr> </table>

Figura 8.4 Modelo de atributo width na tag <TD> BORDER O atributo border utilizado na tag <TABLE>, para definir se a tabela ser exibida com linhas de contorno. Caso o atributo no esteja informado, a tabela aparecer sem bordas. Observe:

Figura 8.5 Modelo do uso do atributo BORDER


36

ALIGN O atributo ALIGN controla o alinhamento da tabela em relao a pgina. Pode se utilizado nas tags <TD> <TH>, onde este alinhar o texto contidos nas clulas a posio informada no ALIGN. O atributo ALIGN aceita as seguintes posies: - LEFT : alinhamento a esquerda; - RIGHT: alinhamento a direita; - CENTER: alinhamento centralizado.

Figura 8.6 Modelo de uso do atributo ALIGN

Modelo de uso do atributo ALIGN na tag <TABLE> <html> <head> <title>Tabelas</title> </head> <body> <h1>Atributos ALIGN - tag TABLE</h1><BR> <table width=300 border=2 align=center> <tr> <td >1</td> <td >2</td> <td >3</td> </tr> </table> </body> </html>
37

Modelo de uso do atributo ALIGN na tag <TD> <TH> <html> <head> <title>Tabelas</title> </head> <body> <h1>Atributos ALIGN - tag TD e TH</h1><BR> <table width=300 border=2 align=center> <tr> <td align=center>1</td> <td align=left>2</td> <td align=right>3</td> </tr> <tr> <tH align=center>Alinhamento CENTER</tH> <tH align=left>Alinhamento LEFT</tH> <tH align=right>Alinhamento RIGHT</tH> </tr> </table> </body> </html> VALIGN O atributo VALIGN controla o alinhamento do contedo das clulas em relao a borda superior e inferior. Pode se utilizado nas tags <TD> <TH>. O atributo VALIGN aceita as seguintes posies: - TOP : alinhamento ao topo; - MIDDLE: alinhamento ao centro; - BOTTOM: alinhamento ao rodap.
Modelo de uso do atributo VALIGN <html> <head> <title>Tabelas</title> </head> <body> <h1>Atributos VALIGN</h1><BR> <table width=300 border=2 align=center> <tr> <td align=center valign=top height=50>1</td> <td align=center valign=middle>2</td> <td align=center valign=bottom>3</td> </tr> <tr> <tH align=center>Alinhamento TOP</tH> <tH align=center>Alinhamento MIDDLE</tH> <tH align=center>Alinhamento BOTTOM</tH> </tr> </table> </body> </html>

38

Figura 8.7 Modelo de uso do atributo VALIGN CELLSPACING O atributo CELLSPACING define a distncia entre as clulas e linhas, sendo aplicvel a tag <TABLE>. Os valores informados neste atributo so em pixels.

Figura 8.8 Modelo de uso do atributo CELLSPACING com valores variados

Modelo de uso do atributo CELLSPACING <html> <head> <title>Tabelas</title> </head> <body> <h1>Atributo CELLSPACING</h1><BR> <table width=300 border=2 align=center cellspacing=0> <tr> 39

<td align=center height=30>1</td> <td align=center >2</td> <td align=center >3</td> </tr> </table> </body> </html> CELLPADDING O atributo CELLPADDING define a distncia ente o contedo da clula em relao as suas bordas, sendo aplicvel na tag <TABLE>. Os valores informados neste atributo so em pixels.

Figura 8.9 Modelo de uso do atributo CELLPADDING com valores variados Modelo de uso do atributo CELLPADDING <html> <head> <title>Tabelas</title> </head> <body> <h1>Atributo CELLPADDING</h1><BR> <table width=300 border=2 align=center cellspacing=0 cellpadding=10> <tr> <td align=center >1</td> <td align=center >2</td> <td align=center >3</td> </tr> </table> </body> </html> COLSPAN O atributo COLSPAN aplicado nas tags <TH> e <TD>, pois definem quantas colunas uma clula pode abranger. Por padro, na maioria dos navegadores cada clula corresponde a uma coluna na tabela.
40

Figura 8.10 Modelo de uso do atributo COLSPAN <html> <head> <title>Tabelas</title> </head> <body> <h1>Atributo COLSPAN</h1><BR> <table width=300 border=2 align=center cellspacing=2 cellpadding=2> <tr> <td align=center colspan=2>1</td> <td align=center>2</td> </tr> <tr> <td align=center >3</td> <td align=center >4</td> <td align=center >5</td> </tr> </table> </body> </html>

ROWSPAN O atributo ROWSPAN aplicado nas tags <TH> e <TD>, pois definem quantas colunas uma clula pode abranger. Por padro, na maioria dos navegadores cada clula corresponde a uma coluna na tabela.

41

Figura 8.11 Modelo de uso do atributo ROWSPAN Modelo de uso do atributo ROWSPAN <html> <head> <title>Tabelas</title> </head> <body> <h1>Atributo ROWSPAN</h1><BR> <table width=300 border=2 align=center cellspacing=2 cellpadding=2> <tr> <td align=center rowspan=2>1</td> <td align=center>2</td> <td align=center>3</td> </tr> <tr> <td align=center >4</td> <td align=center >5</td> </tr> </table> </body> </html>

42

8.4. CORES E IMAGEM NA TABELA 8.4.1. CORES NA TABELA

O atributo BGCOLOR utilizado para aplicar cor de fundo a clula ou a tabela. Este atributo pode ser inserido nas tags <TABLE> , <TD> e <TH>.

Figura 8.12 Modelo de uso de cores de fundo

Modelo de uso do atributo BGCOLOR <html> <head> <title>Tabelas</title> </head> <body> <h1>CORES NA TABELA</h1><BR> <table width=300 border=2 align=center cellspacing=2 cellpadding=2> <tr> <td align=center bgcolor=blue>1</td> <td align=center bgcolor=green>2</td> <td align=center bgcolor=magenta>3</td> </tr> <tr> <td align=center bgcolor=red>4</td> <td align=center bgcolor=white>4</td> <td align=center bgcolor=yellow>5</td> </tr> </table> </body>

43

8.4.2. IMAGEM DE FUNDO NAS TABELAS

Semelhante a inserir cores de fundo, possvel colocar imagens com fundo da tabela. Essa tcnica muito utilizada, e para isso usamos o atributo BACKGROUND. Este atributo pode ser utilizado nas tags <TABLE>, <TD>, <TH>.

Figura 8.13 Modelo de uso de imagens como fundo de tabela. <html>


<head> <title>Tabelas</title> </head> <body> <h1>IMAGENS NA TABELA</h1><BR> <table width=300 border=2 align=center cellspacing=2 cellpadding=2 background=ft02.gif> <tr> <td align=right valign=bottom><H2>Modelo de Imagem de Fundo<H2></TD> </tr> </table> </body> </html>

REVISO CAPTULO 8
1)Quais as tags bsicas para estruturarmos uma tabela? _____________________________________________________________________ _____________________________________________________________________ _____________________________________________________________________ 2)Escreva o cdigo de uma tabela simples. _____________________________________________________________________ _____________________________________________________________________ _____________________________________________________________________ 3) O atributo BORDER utilizado para: _____________________________________________________________________ _____________________________________________________________________ 4) O atributo ALIGN utilizado para: _____________________________________________________________________ 5) Para que serve os atributos COLSPAN e ROWSPAN? _____________________________________________________________________
44

9. FRAMES

Frames so janelas para os documentos HTML. Como os Frames podemos dividir a nossa tela em varias partes. As marcaes vistas anteriormente como <body> e </body>, neste caso so substitudas por <frameset></frameset>. Para salvar escolheremos o nome da pgina.html. Para comear definiremos cada frame dentro das marcaes frameset. Uma URL vir associada a cada frame. Abaixo teremos uma estrutura em sua base. <html> <head> <title></title> </head> <frameset ...> <frame src=URL> <frame src= URL> </frameset> </html> Obs: Acima teremos apenas uma demostrao, essa marcaes o funcionaro, pois ainda faltam definir alguns atributos para as reas de frameset, tambm com URLS a cada frame, que ser visto mais adiante. Alm das marcaes frameset e frame aceitarem extenses, valores e atributos, podem tambm aceitar intercalaes assim como listas e tabelas.

9.1. Sintaxe

9.1.1. Frameset

Aceita atributos ROWS e COLS, que so divises horizontais (linhas) e verticais (colunas) entre janelas. ROWS - <frameset rows valor, valor> Estabelece as divises horizontais entre as janelas, essas, que vem juntamente com seus valores que cada janela ir ocupar. Portanto, cada janela ao ser criada dever ser acompanhada de um valor, onde so separados por vrgulas. Existem trs maneiras de se estabelecerem valores: Percentual: Valor percentual, sempre somando um valor de 100%. Podemos dizer que o mtodo mais simples. Exemplo: rows- 30%,30%, 40%. <html> <head>
45

<title></title> </head> <frameset rows=30%,30%,40%> <frame src=cell1.html> <frame src= cell2.html> <frame src= cell3.html> </frameset> </html>

Numrico: Quantidade de pixels que cada frame deve ocupar, no muito recomendado, pois no sabemos o valor final de pixels que cada cliente compreende. Exemplo: ROWS= 20,80 <html> <head> <title></title> </head> <frameset rows=20,80> <frame src=cell1.html> <frame src= cell2.html> <frame src= cell3.html> </frameset> </html>

Figura 9-1 Note que a pgina ser dividida em duas.


46

Relativo: Define-se uma relao entre os valores. No exemplo abaixo, o primeiro frame ir ocupar dois teros da tela e o segundo um tero. Exemplo: ROWS= 2*,*. <html> <head> <title></title> </head> <frameset rows=30,*,40> <frame src=cell1.html> <frame src= cell2.html> <frame src= cell3.html> </frameset> </html>

Figura 9.2 COLS - <FRAMESET COLS = VALOR, VALOR ...> Seu funcionamento semelhante ao ROWS, o que difere a diviso da tela em duas janelas verticais. Abaixo alguns exemplos de divises e, COLS. Exemplo1: <html> <head> <title></title> </head> <frameset cols=20,*,50> <frame src=cell1.html> <frame src= cell2.html>
47

<frame src= cell3.html> </frameset> </html>

Figura 9.3 Exemplo: <html> <head> <title></title> </head> <frameset cols=30%,30%,40%> <frame src=cell1.html> <frame src= cell2.html> <frame src= cell3.html> </frameset> </html>

Figura 9.4 48

No possvel definir COLS e ROWS em uma mesma rea de <frameset>, necessrio definir vrias reas, onde cada rea delimita um frameset.
Frame:

Cada janela contida em uma rea frameset definida pelo frame. Ela no necessita de finalizao (/frame), cada frame considera seis atributos possveis. Src = url define a URL que ser exibido em cada frame. Name = nome_da_janela Associa um nome a uma janela, usado quando uma janela for o destino de um link em outro documento, um recurso opcional que deve comear com caracter alfanumrico. Marginwidth = valor Estabelece as margens esquerda e direita de cada frame, onde o valor ter que ser absoluto, onde o menor um. Tambm um recurso opcional, pois o browser no caso de no estipular nenhuma medida, utilizar o padro. Scrolling= yes, no,auto Nada mais do que a barra de rolagem, esta opo ir definir se possuir a barra ou no. Existem trs opes: Yes: Barra sempre visvel. No: Sem barra. Auto: Barra aplicada quando necessrio. Recurso opcional devido ao fato de que se no estiver estabelecido nenhuma opo o browser tm como padro a opo Auto. Noresize Tambm um recurso opcional. Quando ele no aparece, pode-se alterar o tamanho da janela com cursor a borda da mesma. Exemplo: <frame src= http://www.ufrrj.br name=rural marginwidth = 2 marginheight= 5 scrolling=auto noresize>. Noframes uma opo de navegao de pgina, para quem no possui browser que estende frames. Esta marcao tem a seguinte sequencia: <noframe> texto</noframe>

Confira o exemplo: <html> <head><title></title></head> <frameset rows= 20%,80%> <noframes> <body bgcolor=#000000 text=#ffff00 link=##0000>
49

BEM VINDO <p> NO SEI. <i> BROWSER</i> <a href= http//:www.yahoo.com.br> Internet Explore</a> </p> <hr> </body> </noframes> <frameset cols= 30%,70%> <frame name=1 src= cell1.html noresize> <frame name= 2 src= cell2.html noresize </frameset> <frameset cols=40%, 60%> <frameset name=3 marginwidth=50 src=cell3.html> </frameset> <frameset rows=20%, 80%> <frame name=4 src= cell4.html name= chat> <frame name=5 src=cell5.html> </frameset> </frameset> </html>
9.2. INTERCALAO FRAMESET

Para um melhor aprendizado, criaremos um exemplo de intercalaes de janelas, suas divises horizontais e verticais e assim sendo, siga os exemplos abaixo e tente criar seus frames intercalados. Exemplo 1: <html> <head><title></title></head> <frameset rows=20%,80%> <frameset cols= 33%,33%,33%> <frame src=> <frame src=> <frame src=> </frameset> <frameset cols=45%,55%> <frame src=>
50

<frame src=> </frameset> </frameset> </html>

Figura 9.6

9.3. LINKS

Para os links teremos a marcao Target, que especifica em qual janela ou link ser apresentado ao clicar sobre. Alguns frames podem necessitar de um ndice que esteja visvel o tempo inteiro, ento necessitaremos de uma janela para o ndice sempre visvel e outra em que o servio ocorrer.

Siga os passos abaixo para a utilizao do Target. 1. Primeiramente vamos atribuir um nome a cada frame em seu frame (name=valor). 2. Acrescentar a marcao Target no documento onde ser criado o link. <a> href=url target= valor>, valor este, idntico ao associado a marcao no frame. Exemplo 1: <html> <head><title></title></head> <frameset rows=70%,30%> <frame name= concluir src=cell1.html <frame src=barra.html> </frameset> </frameset> </html>

51

<html> <head><title></title></head> < a href=http://www.sports.com.br target=cocluir>[link para ocr-sp]</a> < a href=http://www.sports.com.br target=cocluir>[link para ocr-df]</a> < a href=http://www.sports.com.br target=cocluir>[link para ocr-df]</a> </body> </html>

9.4. COMANDOS PARA FRAME/NOFRAME.

Abaixo as caractersticas e funes para frame e noframe. Frames <frame src= url> Associa uma janela a uma url. <frame name= valor> Associa uma janela a um nome. <frame marginwidth= valor> estabelece a margem esquerda e direita do frame. <frame marginheight= valor> estabelea a margem superior e inferior do frame. <frame scrolling = yes/no/auto> determina a presena, ausncia ou presena automtica da barra de rolagem. <frame noresize> estabelece que cada frame ter a janela fixa, sem permitir modific-la. Noframes <noframe></noframe> estabelece uma rea de navegao, no caso de no puder estender o frame. <body></body> iternamente a <noframe></noframe> delimita o documento, assim como todas as marcaes em html. Target <a href =url target= name> Estabelece a janela a ser exibida. O nome associado tem que ser idntico ao nome atribudo ao destino ao frame.
10. META TAGS 10.1. Introduo

Meta tags so linhas de cdigo HTML ou "etiquetas" que, entre outras coisas, descrevem o contedo do seu site para os buscadores. nelas que voc vai inserir as palavras-chave que facilitaro a vida do usurio na hora de te encontrar, por exemplo. Por meio delas, voc pode tambm "assinar" seu site, declarando sua autoria sobre o cdigo fonte.

52

Cada vez mais os buscadores levam em considerao a qualidade do contedo nos resultados de pesquisa, e por isso simplesmente adicionar meta tags no cdigo fonte da sua pgina no vai melhorar o posicionamento dela. Porm, as meta tags ainda tem seu espao se utilizadas corretamente.

10.2.

Como utilizar as meta tags

As meta tags devem ser includas no seu cdigo HTML, dentro da tag <head>, como mostra o exemplo a seguir: <html> <head> <title> Aprendendo sobre as meta tags </title> <meta name="author" content="Erika Sarti"> <meta name="description" content="Meta Tags - O que so e como utiliz-las"> <meta name="keywords" content="sites, web, desenvolvimento"> </head> ... Vamos entender melhor as instrues "menos bvias", isto , keywords e description:
10.3. keywords

Nesta tag voc deve incluir uma quantidade de palavras que se referem ao contedo da pgina. Mantenha o limite de aproximadamente 150 caracteres. Se no utilizar as mesmas palavras, tente utilizar sinnimos. Nunca quebre uma linha de palavras-chave, porque seu trecho de cdigo ser considerado um erro e ser ignorado. Sempre separe as palavras com vrgula e declare todas elas em letras minsculas - alguns buscadores tm problemas com letras maisculas e podem ignorar seu site. <meta name="keywords" content="sites, web, desenvolvimento, html, design"> Pessoalmente, eu costumo incluir os termos no singular e no plural (site, sites). No caso de palavras acentuadas, eu ignoro a acentuao ou utilizo os caracteres acentuados em HTML ("manuteno" fica "manutencao" ou "manuten&ccedil;&atilde;o").

53

Infelizmente, alguns desenvolvedores fizeram mal uso deste recurso no passado, o que faz com que alguns robots e spiders no deem muita ateno s meta tags keywords. Se no tm mais tanta influncia nos resultados dos principais buscadores, as meta tags keywords ainda podem ajudar a categorizar o contedo da sua pgina. Por isso, sempre use palavras-chave coerentes com o seu contedo, e nunca acrescente itens s para aparecer melhor na busca, afinal voc sabe que quando o usurio entra no seu site e no encontra o que foi "prometido" sair rapidamente da pgina. Alm disso, os buscadores melhoram seus algoritmos de busca a cada dia, e um truquezinho que aparentemente vai te ajudar pode atrapalhar e muito.
10.4. description

Uma ou duas frases que o buscador apresentar como um resumo do contedo do seu site. Procure manter um limite de aproximadamente 90 caracteres.
<meta name="description" content=" Meta Tags - O que so e como utiliz-las Um artigo para iniciantes">

Sozinhas, as meta tags no fazem milagres na divulgao do seu site: d muita importncia ao seu contedo em primeiro lugar. a dobradinha contedo bem apresentado + atualizao constante que vai fazer com que o usurio sempre volte. Um ttulo coerente com o contedo e explicativo tambm ajuda. Cuide tambm dos seus links: procure inserir apenas endereos para pginas com assuntos relacionados ao seu contedo, e tente ser "linkado" de volta. Em quanto mais pginas relevantes sobre o mesmo assunto seu site aparecer, melhor ele estar no ranking dos buscadores.

10.5.

Escondendo seu site dos buscadores

Hoje em dia um pouco obsoleto utilizar as meta tags para esconder determinadas pginas do seu site dos buscadores. Para melhores resultados, voc pode experimentar o uso de um arquivo robots.txt (link em ingls). To importante quanto conhecer a utilidade da tag keywords saber usar a tag robots. A funo desta informar aos buscadores se devem indexar sua pgina ou no. Parece contraditrio falar sobre isso, mas, na verdade, bloquear seu site pode ter l suas vantagens. Quando voc utiliza pop-ups ou iframes para mostrar o contedo do seu site, por exemplo, no interessante que o buscador indexe essas pginas, afinal, se elas forem acessadas individualmente, no vo significar nada e no traro visitao relevante ao seu site. Tambm pode ser interessante no indexar seu site quando o contedo restrito a um grupo de pessoas e no precisa de divulgao ou quando voc quer fazer um blog mais reservado, por exemplo. Nestes casos, mesmo que outras pessoas faam links para o seu site, ele no aparecer em nenhuma busca (na verdade, isso pode depender de critrios internos do buscador).

54

Os valores possveis para esta tag so:


<meta <meta <meta <meta <meta name="robots" name="robots" name="robots" name="robots" name="robots" content="index,follow"> content="noindex,follow"> content="index,nofollow"> content="noindex,nofollow"> content="noarchive">

Aqui, os valores "index" e "noindex" se referem ao tratamento da pgina inicial: se o buscador deve ou no inclu-la nos resultados, respectivamente. J os valores "follow" e "nofollow" se referem aos links da pgina inicial, se eles devem ser visitados e indexados ou no. Portanto:
<meta name="robots" content="index,follow">

Indexa a pgina inicial e todas as pginas nela referenciadas.


<meta name="robots" content="noindex,follow">

A instruo acima no indexa a pgina inicial, mas indexa as pginas nela referenciadas.
<meta name="robots" content="index,nofollow">

A instruo anterior indexa a pgina inicial, mas nenhum link existente nela.
<meta name="robots" content="noindex,nofollow">

Por fim, a instruo acima no indexa nem a pgina inicial e nem seus links. Portanto, se voc quiser evitar que os sites de busca encontrem seu site, use a ltima opo. Porm, se voc quiser que apenas o Google no encontre seu site ou se quiser remover uma pgina dos seus resultados de busca a partir da prxima varredura, pode utilizar a seguinte tag:
<meta name="googlebot" content="noindex,nofollow">

A maioria dos buscadores armazena uma cpia da sua pgina em cache, para otimizar a busca. Para evitar isso, voc pode utilizar a tag a seguir:
<meta name="robots" content="noarchive">

Todavia, lembre-se que alm de acelerar a busca, armazenar uma cpia em cache tem a finalidade de disponibilizar o resultado ao usurio caso seu site esteja passando por algum problema tcnico. Use esta tag somente se o contedo do seu site for muito especfico quanto a essa necessidade.

55

10.6.

Mais do que divulgar seu site nos buscadores

As meta tags no servem s para divulgar seu contedo. Basicamente, a funo delas fornecer informaes adicionais sobre seu site. Vamos conhecer melhor algumas meta tags interessantes.

10.6.1. content-language
Especifica a lngua primria da pgina. til para ajudar o buscador a classificar seu site no idioma apropriado, orientar os navegadores a exibir acentuao e caracteres especiais corretamente, e para facilitar o uso de corretores ortogrficos. Alguns valores possveis: pt Portugus pt-br Portugus do Brasil en Ingls en-us Ingls dos EUA en-gb Ingls Britnico fr Francs de Alemo es Espanhol it Italiano ru Russo zh Chins ja Japons Um exemplo usando o valor "pt-br":
<meta http-equiv="content-language" content="pt-br">

10.6.2. content-type
Especifica o tipo de contedo da pgina e o conjunto de caracteres que ele usa. recomendvel utilizar esta meta tag em todas as pginas do seu site, porque ela garante que os navegadores iro tratar seu documento da maneira mais apropriada, especialmente quando voc utiliza formulrios para enviar informaes entre pginas. Para quem desenvolve pginas em idiomas orientais, utilizar o conjunto de caracteres apropriados fundamental para que eles sejam exibidos corretamente. Os valores mais comuns so:
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">

Onde: text/html define que o contedo um texto em linguagem HTML. Se voc desenvolve sites em XHTML ou XML, certamente sabe que dever aplicar os valores "application/xhtml+xml" e "application/xml", respectivamente.

56

iso-8859-1 a codificao da linguagem mais comum para exibir textos em lnguas derivadas do latim.

10.6.3. author
Por meio das meta tags, voc tambm pode declarar sua autoria sobre a pgina, "assinando" seu cdigo fonte: Eu considero esta tag importantssima. Ela pode ser til quando algum usurio procura pelo seu nome em um buscador ou quando o site do seu cliente no tem uma forma de contato direto com voc desenvolvedor por alguma razo.
<meta name="author" content="Erika Sarti">

Infelizmente, trabalhamos com o risco de clientes no pagarem pelo nosso trabalho, motivo pelo qual tambm importante manter uma tag com o seu nome no cdigo do site para ajudar a provar que ele foi desenvolvido por voc.

10.6.4. reply-to
Especifica um endereo de e-mail para entrar em contato com o responsvel pelo site.
<meta name="reply-to" content="erikasarti@infowester.com">

10.6.5. generator
Alguma vez voc j reparou que quando edita uma pgina HTML feita no FrontPage ou no Word, muitas vezes o programa que a gerou que abre para edio, e no o Bloco de Notas ou seu editor no-visual padro? Isso por causa da meta tag generator, que especifica o programa que construiu a pgina:
<meta name="generator" content="Microsoft FrontPage 5.0">

assim que o sistema operacional sabe que editor utilizar e que cone mostrar ao exibir um arquivo .htm ou .html em uma pasta.

10.7.

Redirecionando o visitante para outra pgina

Alguma vez voc j deve ter visitado um site que mudou de endereo e que exibe uma mensagem do tipo: Voc ser redirecionado para um novo site em 5 segundos.Se no quiser aguardar, clique aqui. Esse redirecionamento pode ser feito com meta tag, por meio de uma nica linha:
<meta http-equiv="refresh" content=" 5 ;url=http://www.novosite.com/">

Ou seja, depois de 5 segundos, o navegador ser redirecionado para o endereo www.novosite.com.

57

Essa mesma tag utilizada para atualizar automaticamente uma pgina dinmica, como a home page de um portal ou a sesso de notcias de um site, por exemplo. Neste caso, o intervalo de tempo em segundos deve ser bem maior e a URL deve ser o endereo do prprio site a ser atualizado.
<meta http-equiv="refresh" content="120;url=http://www.seusite.com/">

Lembre-se apenas de utilizar esse recurso com cautela, pois uma pgina que atualizada automaticamente pode interromper a atividade do usurio, deixando-o irritado.

10.8.

Finalizando

As meta tags so interessantes para o seu site, mas no so o mais importante. Voc deve priorizar a disponibilizao de bom contedo e, claro, evitar enganar ou confundir seu usurio. Acreditar que somente um bom trabalho em meta tags ser o suficiente para o seu site ser bem indexado um erro, mesmo porque, conforme j informado no texto, os buscadores esto cada vez mais preparados para identificar "truques". Por isso, utilize meta tags, mas procure tambm trabalhar com boas prticas. Voc pode conhecer algumas delas no nosso j referenciado artigo sobre Search Engine Optimization.

11. CORES

A cor um poderoso aspecto da nossa experincia do mundo, quando bem aplicada, pode melhorar e muito a mensagem que queremos transmitir. Quando falamos de cores precisamos entender o que representam para ns e para as outras pessoas. O efeito das cores nos meios de comunicao tem sido estudado h vrios anos. Cada meio de comunicao (jornal, revista, televiso, web, etc) representa as cores de maneiras diferentes. As cores se diferenciam em trs fatores: matiz, saturao (intensidade) e tonalidade (luminosidade).
11.1. MATIZ, SATURAO E TONALIDADE

MATIZ a cor pura dominante, como por exemplo: azul, amarelo, vermelho. SATURAO OU INTENSIDADE o quanto a cor pura dominante (ou matiz) diluda pela luz branca e intensidade o quantidade de luz refletida (claro/escuro). TONALIDADE a qualidade acromtica e representa o brilho relativo, do claro ao escuro, de uma cor, em relao a uma escala de cinzas que varia do branco ao preto. CONTRASTE: O contraste a base da distino da forma, tamanho, posio, volume e aparncia dos objetos. Considerando a cor, o contraste pode ser obtido entre a diferena no matiz e a tonalidade ou iluminao. O contraste entre as cores pode ser usado para alterar a sensao.

58

11.2.

SISTEMA DE REPRESENTAO DAS CORES

O sistema RGB o padro de cores na web. um sistema cartesiano (x, y, z) onde cada cor primria (Red, Green e Blue) representa um dos eixos do cubo RGB. o modelo usado em TV e monitores O modelo CMYK formado pelas cores ciano (Cyan), magenta (Magenta), amarelo (Yellow) e preto (blacK). utilizado em dispositivos de impresso. Algumas cores podem ser exibidas nos monitores de vdeo, mas no podem ser impressas, e algumas cores pode ser impressas, mas no exibidas em monitores. Alm disso, existem cores que enxergamos que no podem ser presentadas pelo monitores e impressoras.
11.3. PSICOLOGIA DAS CORES

As cores tm propriedades diferentes de acordo com a cultura onde so consideradas. No caso da WEB, preciso ter cuidados especiais para transmitir a mesma mensagem visual a pessoas de diferentes culturas. Cada cor possui uma caracterstica e uma influncia sobre todos ns. As nossas emoes estimuladas pelas cores podem ter uma relao negativa ou positiva dependendo da experincia que associamos a elas. As cores podem tanto acalmar quando estimular. Alm disso, os diversos fatores culturais fixam atitudes psicolgicas que orientam inconscientemente as inclinaes individuais. Veja alguns exemplos: - BRANCO: Indica limpeza, pureza. - CINZA: Indica tristeza e neutralidade. - ROSA: Indica graa e ternura. - PRETO: Indica sujeira e coisas negativas. - VERMELHO: Indica calor e energia. - AZUL: Indica honradez, f e pureza. Esses significados ficam enraizados na cultura de um povo e passam a integrar, nas sensaes visuais para definir estados emocionais ou situaes vividas pelo indivduo. Em relao criao publicitria, os psiclogos procuram dar um sentido mais prtico quanto ao uso das cores. De acordo com estudos, existe uma estreita relao entre a idade e a preferncia que uma pessoa manifesta por determinada cor. Este estudo muito utilizado para elaborar projetos comunicao visual baseados no pblico alvo. Os adultos idosos preferem cores mais escuras, como o azul e o verde, enquanto as crianas preferem cores vibrantes como o vermelho e o amarelo. Veja a tabela abaixo:

59

O ser humano reage a cores para gostar ou no gostar de determinada coisa, para reagir ou no reagir, para negar ou afirmar. Todos os psiclogos esto em comum acordo ao atriburem significados a cores que so bsicas a qualquer indivduo que viva dentro de nossa sociedade e cultura. Vejamos alguns significados, segundo um estudo realizado pelo Prof. Modesto Farina: BRANCO: Sugere pureza, simplicidade, otimismo, Com a ausncia de caracteres, cria a impresso de vazio e infinito. Evoca ao refrescante e desinfetante, principalmente quando usado junto com o azul claro. PRETO: Smbolo do infortnio e da morte, exibe caracterstica impenetrvel. a cor mais desprovida de sentimento, porm se for brilhante, confere nobreza, distino e elegncia. CINZA: Exprime um estado de alma duvidoso e neutro e evoca medo, desnimo e monotonia, medida que for mais escuro. O tom mais escuro a cor do sujo e desprezvel, como no tom grafite. Brilhante como a prata, clssico e nobre. VERMELHO: Significa fora, alegria de viver, virilidade, dinamismo. s vezes pode ser irritante ou exaltante. Impe-se como dignidade e severidade, benevolncia e charme. Cor quente por definio, sem as caractersticas do Amarelo que espalha e invade todas as cores ao seu redor. uma cor conclusiva, porque se basta. Quanto mais escuro, mais profundo, grave e circunspecto, como o Vermelho Cardinalcio. Se mais claro, exprime temperamento jovial e fantasioso. VERDE: a cor mais fria, calma e tranquila, no exprimindo qualquer sentimento de alegria, tristeza ou paixo. Imvel, satisfeita, tambm a cor da esperana. Se tiver uma pitadinha de Amarelo, torna-se ensolarada, ativa, indiferente. J se houver a predominncia do Azul, tornase carregada, severa, repleta de pensamentos. AZUL: Cor que exprime calma profunda, interior, infinita e diferente do verde. solene, grave e espiritual, as anlises racionais so ignoradas. Nos tons mais claros e brilhantes, provoca sensao de frescor e higiene, sendo a preferida pelas mulheres. O tom turquesa exprime grande fora, fogo interior e frio, como lagos iluminados pelo sol de vero. As tonalidades mais escuras agradam mais aos homens.

60

AMARELO: Luminosa, vibrante, vistosa e gostosa, principalmente em tons claros e limpos. cor superficial, no transmitindo profundidade. cor muito ativa, que estimula a criatividade, mas se sujar com o marrom ou verde, apresenta aspecto doentio, repugnante. Aquecida com ligeiros tons de Vermelho, evoca um misto de alegria e satisfao. LARANJA: a cor mais acolhedora, quente, ntima como fogo ardente, mais irradiante e expansiva que o vermelho. Ao mesmo tempo, transmite refrescncia se associada com o fruto. VIOLETA: Misteriosa e triste, melanclica, demonstra um pensamento profundo e religioso. Em tons mais claros e luminosos, como o lils, torna-se mgica e mstica. ROSA: Tmido, romntico, intimista. O Rosa a cor feminina por excelncia, com pouca vitalidade exprimindo afeio e afetuosidade. Sugere intimidade. MARROM: a cor mais realista, segundo estudiosos, a cor que representa justia. No sendo brutal ou vulgar, evoca a vida s e cotidiana. Neutra por excelncia, a medida que vai escurecendo adquire caractersticas do Preto. PASTEL: A caracterstica de abrandamento e afabilidade das cores quais se origina. Os tons Pastel so a representao das coisas que se encontram dentro da solido e do foro ntimo. As cores devem ser planejadas para interface considerando o contexto em que sero utilizadas, muitas vezes tendo que respeitar a cor do logotipo da empresa. DICAS - Evitar fundos escuros. Fundo preto no recomendado (principalmente em portais de comunicao), pois h poucas cores que contrastam e causa cansao visual. No caso de impresso em Preto e Branco, a cor a ser usada para o texto ou imagem pode ser convertida para o escuro. - Reduzir o nmero de cores. Muitos designers se esquecem que a maioria dos monitores apenas consegue representar, milhares de cores, outros 256 ou 16 cores, alm dos monitores em Preto e Branco que equipam sistemas comerciais. Para sistemas comerciais, usar apenas 16 cores, pois ao serem convertidas para o monocromtico, h padres de cinza suficientes. - Usar sempre textos com letras pretas. A letra preta, sobre um fundo claro, tem melhor legibilidade. Podemos dispor de opes para troca da cor de plano de fundo, porm esse recurso pode no ser bem aceito pela maioria. - No tornar a tela muito brilhante ou escura, use cores brilhantes em reas pequenas e cores suaves em reas maiores. - Tenham em mente que as cores mal utilizadas so piores do que no fazer uso delas.

61

12. TIPOLOGIA

A TIPOLOGIA significa o estudo dos tipos, ou seja, o conjunto de caracteres tipogrficos que so conhecidos como fontes. Elas admitem algumas variaes tais como itlico, negrito, sublinhado, etc. Hoje em dia, existem diversos tipos disponveis de fontes. A maior parte dos tipos de fontes, podem ser classificados em 6 categorias, que so estas:

Iremos conhecer as similaridades entre os tipos, tornando-o mais consciente quando aos detalhes e aplicaes das letras.
12.1. ESTILO ANTIGO

Os tipos criados no estilo antigo baseiam-se na escrita mo dos escribas que trabalhavam com uma pena na mo. Os estilos antigos sempre tm serifa e as serifas das letras em caixa-baixa (minsculas) sempre tm um ngulo. Por isso todos os traos curvos das letras passam de grossos para finos, o que chamamos tecnicamente de transio grosso-fino. Um tipo Estilo Antigo tem uma nfase diagonal.

62

Algumas fontes: - Times New Roman - Garamond - Goudy - Palatino O estilo antigo o melhor grupo de tipos para utilizar em grandes extenses de texto corrido. Caso esteja trabalhando com um texto muito longo e deseja que as pessoas o leiam, coloque-o no estilo antigo.
12.2. ESTILO MODERNO

Os tipos modernos tm serifas, mas estas so horizontais e no inclinadas e so muito mais finas. Semelhante a uma ponte de ao, a estrutura forte com uma transio grossofino radical, ou contraste, nos traos. No h evidncias da inclinao, a nfase perfeitamente vertical. Os tipos modernos tm uma esttica fria e elegante. Os tipos modernos tm uma aparncia forte, principalmente quando so muito grandes. Por suas fortes transies grosso-fino, a maioria dos tipos modernos no so uma boa opo de grandes extenses de texto corrido.

Algumas fontes: - Bodoni - Times Bold - Fenice - Ultra - Walbaum


12.3. SERIFA GROSSA

As letras com serifa grossa tm pouca transio ou nenhuma transio grosso-fino. s vezes, essa categoria de tipos chamada de Clarendon, porque a fonte Clarendon a sntese desse estilo. Muitos dos tipos com serifa grossa, com contraste grosso-fino suave tm um grau muito elevado de legibilidade, o que significa que podem ser facilmente utilizados em textos extensos. Porm esses tipos criam uma pgina mais escura do que aqueles em estilo antigo, pois seus traos so mais grossos e o peso de cada letra relativamente igual. Tipos com serifa grossa costumam ser utilizados em livros infantis, pois sua esttica clara e direta.

63

Algumas fontes: Clarendon New Century Scoolbook

12.4.

SEM SERIFA

Os tipos sem serifa so quase sempre de peso igual, o que significa que virtualmente no h uma transio grosso-fino visvel nos traos; as letras tm sempre a mesma espessura.

Algumas fontes: - Arial - Century Gothic - Folio - Tahoma


12.5. MANUSCRITO

A categoria de tipos manuscritos inclui todos os tipos que parecem ter sido escritos a mo, com uma caneta tinteiro, com um pincel ou, s vezes, com um lpis ou caneta profissional. Os tipos manuscritos devem sem utilizados pouco a pouco, ou seja, os tipos mais elaborados nunca deveriam ser colocados na forma de blocos de textos e nunca com todas as letras em caixa-alta (maisculas).

64

12.6.

DECORATIVO

Os tipos decorativos so fceis de identificar. Eles so timos, engraados, diferentes, fceis de usar, costumam ser baratos e sempre existe uma fonte para cada capricho que voc queira expressar. lgico que por serem diferenciados, seu uso dever ser limitado.

Algumas fontes: - Addled - Extravaganza - Fajita - Scarlett - Party


13. CARACTERES ESPECIAIS As formas de representar caracteres especiais, atraves de uma notacao especifica, sao chamadas de ENTIDADES. Existem "ENTIDADES DE CARACTERES" e "ENTIDADES NUMERICAS". Um carater bastante util e o espaco nao ignoravel, o "&nbsp;". Este caractere e importante quando desejamos forcar o browser a nao ignorar espacos em brancos entre palavras. Veja algumas tabelas mostrando varios simbolos:

65

66

67

68

69

70

14. TABELA DE CORES

71

15. SEJA UM BOM WEB DESIGNER! Para poder criar um site como um bom Web Designer, preciso seguir algumas regras, no s para tornar a pginas bonita e agradvel, mas tambm para torn-la eficaz. Algumas regras que consideramos essenciais: SIMPLICIDADE A CHAVE Faa com que tudo seja muito simples, evite pginas com muita informao, colocando apenas o essencial numa pgina, principalmente se for pgina principal de seu site. EVITE TEXTOS LONGOS Textos longos devem ser resumidos ao mximo ou divididos em vrias pginas pequenas, sempre evitando textos longos. USE IMAGENS Sempre que possvel, use imagens no lugar de textos, uma imagem expressa muito mais que palavras s vezes, principalmente na internet, onde o usurio no tem pacincia para grandes leituras. EVITE OS EXAGEIROS Jamais utilize coisas do tipo msicas de fundo, bolas e figuras como Gifs animadas e todo tipo de elemento semelhante. Nem pense em usar clipart em suas homepage, um Gif Animado pode ser utilizado s vezes na criao de um logo ou bunner, mas sem muito exagero de efeitos. FAA PGINAS LEVES Nenhuma pgina do site deve demorar a carregar, caso seu contedo seja grande e importante, devemos avisar o usurio que poder demorar a carregar. CONHEA O USURIO Pense sempre que o usurio ter um equipamento inferior ao seu e que deve acessar o mesmo contedo. Caso uma conexo mais lenta, uma visualizao de 800x600, diferentes navegadores, este o tipo de usurio que devemos atingir. CORES E FONTES Utilizem sempre cores para destacar elementos, mas no de uma forma to destacada, mistura de cores e tudo mais, pois muitas cores podem fazer um belo carnaval do seu site. Cuidado ao utilizar fontes diferentes, nem sempre o usurio ter este tipo sofisticado de fonte que voc queira utilizar, normalmente um tipo de fonte ARIAL, TIMES e suas derivadas pode ser ideal. Se precisar usar algum tipo de fonte diferente, crie a mesma como uma figura que possa carregar no navegador do usurio sem sofrer alteraes. EMOO X RAZO - D preferncia a usar o lado emocional em vez do racional quando criar um design, algo que agrade aos olhos e a navegao do usurio com simplicidade.

72