Você está na página 1de 33

Certificado ISO 9001:2000 N 23.

0021/98

Centro de Informtica CETEP Quintino


www.ciquintino.com.br

Elaborada por: Wanderson Mirandela

A POLTICA DA QUALIDADE DO CI Prover cursos de nvel bsico profissionalizante na rea de Informtica, adequados realidade do mercado de trabalho, buscando a melhoria contnua dos servios prestados e da eficcia do Sistema de Gesto, de forma a garantir a plena satisfao dos seus alunos e colaboradores, atravs do atendimento aos requisitos da norma NBR ISO 9001:2000. O CURSO DE WEBDESIGN O treinamento de um Web Designer baseado em um contedo que visa familiarizar os participantes no apenas para a criao, mas tambm a manuteno de Web Sites, compreender os fatores mais importantes no design de um site, desenvolver contedo para a web, utilizar ferramentas para a gesto de Home Pages, utilizar-se do tratamento digital de informaes, alm de um conjunto de diversas solues grficas. Nos dias atuais, ser um Web Designer ter uma slida profisso, com uma forte tendncia expanso deste mercado, em virtude do avano da tecnologia. Assim, o aluno estar apto a criar pginas pessoais e profissionais para a internet. Utilizando algumas das mais modernas e importantes tecnologias do mercado.

APOSTILA DE WEBDESIGN Mdulo de HTML - 2004 Equipe de Elaborao Wanderson Mirandela Reviso Amanda Tanaka Aprovao Sandra Regina Barbosa

Apostila de Html Curso WebDesign

ndice
1. HTML - Introduo 1.1 - Iniciando um documento 1.2 - TAGs usados no incio do documento 1.3 - Ttulos e subttulos 1.4 - Formatao de textos 2. HTML 2.1 - Imagens 2.2 - Links 3. Listas 3.1 - Listas ordenadas 3.2 - Listas no ordenadas 3.3 - Atributos adicionais do elemento UL 4. Refresh Page 5. Tabelas 5.1 - Construindo tabelas com o elemento TABLE 5.1.1 - O ttulo da tabela (Elemento CAPTION) 5.1.2 - Table Headings (Elemento TH) 5.1.3 - Table Data (Elemento TD) 5.1.4 - End of Table Row (Elemento TR) 5.2 - Atributos para a Tabela 5.2.1 - BORDER 5.2.2 - ALIGN 5.2.3 - VALIGN 04 04 05 05 06 08 08 10 11 11 11 12 13 14 14 14 14 14 15 15 15 16 17

Apostila de Html Curso WebDesign

6. Frames 6.1 - Estrutura 6.2 - Sintaxe 6.3 - FRAMESET 6.3.1 - ROWS 6.3.2 - COLS 6.4 - FRAME 6.4.1 - SRC 6.4.2 - NAME 6.4.3 - SCROLLING 6.4.5 - NORESIZE 6.4.6 - TARGET 6.5 - BORDER 7. Msica 8. Caracteres Especiais 9. Exerccios de Fixao 10. Bibliografia

18 18 18 19 19 19 20 20 20 20 21 21 22 22 23 24 33

1. HTML Introduo
Apostila de Html Curso WebDesign 3

HTML significa Hypertext Markup Language e a linguagem de descrio de documentos usada na WWW - World Wide Web. Ela orientada por marcadores, chamados TAGs. Os TAGs so os comandos utilizados pela linguagem HTML. Cada TAG informa ao programa visualizador (o Browser), como ele dever formatar o texto, que deve estar dentro dos sinais de menor que (<) e maior que (>). Exemplo: <HTML>, <BODY>, etc. Os Tags podem ser nicos ou duplos, com incio e fim. Quando forem duplos, a Barra de Diviso ( / ) indicar, na segunda Tag, o seu trmino. Exemplos: TAG nico: <BR> 1.1 - INICIANDO UM DOCUMENTO Todo o documento HTML fica contido entre os TAGS: <HTML> e </HTML>. Dentro destes tags, tem-se duas sees bsicas: HEAD Contm parmetros de configurao do documento. BODY Contm o documento em si. A estrutura bsica de um documento HTML : <html> <head> <title>Ttulo da home page</title> </head> <body> Contedo da home page! </body> </html> TAG duplo: <P>....</P>

1.2 - TAGS USADOS NO INCIO DO DOCUMENTO <HTML>...</HTML> Envolvem todas as sees de um documento (HEAD e BODY). <HEAD>...</HEAD>

Apostila de Html Curso WebDesign

Envolvem a seo de cabealho do documento. <TITLE>...</TITLE> Indica o ttulo do documento para o Browser. Os Browsers apresentam este ttulo na Barra de ttulos da sua Janela no Windows. <BODY>...</BODY> Envolvem a seo de corpo do documento. Aqui fica o contedo principal da Home Page. Opcionalmente podemos indicar um arquivo de imagem para formar o fundo, usando a opo: BACKGROUND, descrita mais adiante. 1.3 - TTULOS E SUBTTULOS Para demarcar ttulos e subttulos, use os TAGs de HEADER (H1 a H6), juntamente com as opes CENTER ou BLINK. Veja alguns exemplos: Texto inserido entre <H1> e </H1>:

Texto inserido entre <H2> e </H2>:

Texto inserido entre <H3> e </H3>:

Texto inserido entre <H3><CENTER> e </CENTER></H3> :

1.4 - FORMATAO DE TEXTOS


H dois tipos de formatao em HTML: lgica e fsica. Os efeitos de apresentao na tela so os mesmos: o motivo da distino entre eles se deve idia bsica de independncia entre especificao e apresentao. Quando formatamos um trecho de texto como cabealho de nvel 1, no explicitamos se esse tipo de cabealho deve ser em alguma fonte determinada, em um tamanho determinado, justificado esquerda ou direita, ou centralizado. Esses detalhes de apresentao so deixados para o browser - o dispositivo

Apostila de Html Curso WebDesign

de apresentao do documento - que pode ser configurado de acordo com o leitor (usurio final). A formatao lgica segue o significado lgico do texto marcado: um endereo de email, uma citao etc. Sua apresentao final varia conforme o browser, podendo oferecer resultados mais ricos. A formatao fsica especifica explicitamente o estilo que se quer para o texto: itlico, grifado etc. Sua apresentao final no sofre grandes variaes. Estilos Lgicos <CITE> Para ttulos de livros, filmes, e citaes curtas. Exemplo: Assisti Guerra nas Estrelas umas oito vezes! <CODE> Para indicar trechos de cdigo de programas. Exemplo: for (x=0); cl &&(!feof(stdin)); x++)); <DFN> Indica definio de uma palavra, em geral apresenta o texto em itlico. Exemplo: CERN: Centre dstudes et Recherches Nucleaires <EM> nfase, tambm normalmente apresentado em itlico. Exemplo: preciso pesquisar muito para encontrar o termo exato. <KBD> Indica uma entrada via teclado. Exemplo: Para ler mensagens recebidas, digite pine -i <SAMP> Indica uma seqncia de caracteres, por exemplo uma mensagem de erro ou um resultado. Exemplo: O resultado do primeiro applet : Hello, World! <STRONG> Forte nfase, mostrado normalmente em negrito. Exemplo: Antes de enviar um e-mail, confira o campo Subject:! <VAR> Indica variveis, ou valores que o usurio dever escrever; geralmente mostrado em itlico. Exemplo: No campo Login, escreva guest. Estilos Fsicos

Apostila de Html Curso WebDesign

<B> Quando disponvel no browser, mostrado em negrito (em alguns browsers, pode aparecer sublinhado) <I> Itlico (em alguns casos, caracteres inclinados) <TT> Tipo teletype - fonte de espaamento fixo. <U> Sublinhado; deve ser usado com cuidado, pois confunde-se com a apresentao de links. <STRIKE> ou <S> Frase riscada. <BIG> Fonte um pouco maior. <SMALL> Fonte um pouco menor. <SUB> Frase em estilo ndice, como em H2O. <SUP> Frase em estilo expoente, como em Km2. Observao: As Marquees possvel obter o efeito de animao de texto, atravs do tag <MARQUEE>. Atributos de largura e direo do efeito permitem diversas apresentaes diferentes. Por exemplo (o efeito s executado no Internet Explorer e em verses recentes do Netscape - e de maneiras diferentes): <MARQUEE BEHAVIOR=SLIDE DIRECTION=RIGHT>Texto</MARQUEE> <MARQUEE BEHAVIOR=SLIDE DIRECTION=LEFT>Texto</MARQUEE> <MARQUEE BEHAVIOR=ALTERNATE DIRECTION=LEFT>Texto</MARQUEE> <MARQUEE WIDTH=30%>Texto</MARQUEE> <MARQUEE SCROLLAMOUNT=50>Texto</MARQUEE>

2. HTML

Apostila de Html Curso WebDesign

2.1 - IMAGENS Pode-se inserir imagens dentro de um documento HTML. Os formatos mais usados so o GIF e o JPG, ambos com compactao de pixels. Antes de criar uma pgina com dezenas de figuras e fotos, lembre-se de que ao criar e testar sua pgina em seu micro, todas as imagens sero carregadas quase que instantaneamente. Contudo, quando sua pgina estiver na internet, o tempo para que uma imagem grande seja carregada pode tornar o aceso a sua pgina muito difcil. A quantidade de cores tambm influi no tamanho da imagem. Se voc digitalizar uma imagem com 65 mil cores, o tamanho do arquivo ser muito maior do que ela tivesse sido capturada com 256 cores. Para inserir uma imagem, usa-se o tag <IMG>, que nico, no exigindo um tag para finalizar. Exemplo: <IMG SRC="figura1.gif"> Os arquivos com as imagens devero estar armazenados no seu Provedor de acesso, juntamente com o documento HTML, para que a imagem seja visualizada pelo usurio.
Atributos bsicos de imagem ALT Indica um texto alternativo, descrevendo brevemente a imagem, que apresentado no lugar da imagem nos browsers (aquela informao que descreve uma imagem quando paramos a seta do mouse sobre ela). recomendvel que esteja sempre presente. <IMG SRC="c:\pasta\imagem.gif ALT="descrio_da_imagem"> WIDTH e HEIGHT Atributos de dimenso da imagem, em pixels. Grande parte dos editores HTML coloca automaticamente os valores destes atributos, quando indicamos a insero de uma imagem. Uma das vantagens de se usar esses atributos que o browser pode montar mais rapidamente as pginas, por saber de antemo o espao que dever ser reservado para elas. <IMG SRC="imagem" ALT="descrio" WIDTH="largura" HEIGHT="altura"> BORDER Quando uma frase ou palavra marcada como um link, ela se apresenta sublinhada; quando uma imagem se torna um link, ganha uma borda azul que indica esta condio. Porm, por questes de apresentao, nem sempre interessa termos essa borda ao redor da imagem. Assim, com o atributo BORDER, podemos controlar esse detalhe.

Apostila de Html Curso WebDesign

Se quisermos uma borda mais larga... <A HREF="URL"><IMG SRC="imagem" ALT="descrio" BORDER=4></A> Se quisermos uma imagem sem borda... <A HREF="URL"><IMG SRC="imagem" ALT="descrio" BORDER=0></A> OBS: Essa borda pode ser apresentada tambm em imagens que no so ncora de links. Basta aplicar, por exemplo, a BORDER=N dentro da tag IMG SRC. Exemplo: <IMG SRC="icones/fotoicm.gif" ALT="Foto antiga do ICMC" BORDER=2> Assim, possvel dar mais destaque a uma imagem, sem ser necessrio edit-la:

Foto Original

Foto com Border=3, dentro da tag IMG SRC

ALIGN <IMG SRC="imagem" ALT="descrio" ALIGN=alinhamento> Existem tambm atributos de alinhamento, que produzem os seguintes resultados: ALIGN=TOP Alinha o texto adjacente com o topo da imagem, embora com linhas compridas o resultado no seja muito bom. ALIGN=MIDDLE Alinha o texto adjacente com o meio da imagem, embora com linhas compridas o resultado no seja muito bom ALIGN=BOTTOM Alinha o texto adjacente com a parte de baixo da imagem (default) ALIGN=RIGHT Alinha imagem direita, e tudo o que houver ao redor (texto, outras imagens) a partir do topo da imagem. ALIGN=LEFT Alinha imagem esquerda, e tudo o que houver ao redor (texto, outras imagens) a partir do topo da imagem. OBS: Para ter duas imagens, uma em cada margem, numa mesma linha, escreva: <IMG align=left SRC="imagem.gif" alt="imagem"><IMG align=right SRC="imagem.gif" alt="imagem">...e se pode escrever vontade entre as imagens!
Apostila de Html Curso WebDesign 9

Isso resulta em: ...e se pode escrever vontade entre as Imagens.

2.2 - LINKS
Com HTML possvel fazermos ligaes de uma regio de texto (ou imagem) para um outro documento. Para inserir um link em um documento, utilizamos o tag <A>, da seguinte forma: <A HREF = "arq_destino"> texto ou figura </A> onde: arq_destino o URL (Uniform Resource Local) do documento de destino; texto ou figura o texto ou imagem que servir de ligao hipertexto do documento sendo apresentado para o documento de destino. Atributos <A> tem vrios atributos, utilizados de acordo com a ao associada ao link. Os mais usados so: HREF Indica o arquivo de destino da ligao de hipertexto. TARGET Indica o frame em que ser carregado o arq_destino.

3. Listas 3.1 - LISTAS ORDENADAS Listas ordenadas so tambm denominadas listas numeradas, pois, quando um navegador encontra um TAG, iniciando uma lista ordenada, ele passa a mostrar cada item utilizando nmeros, como 1, 2, 3, e assim sucessivamente. Listas ordenadas so iniciadas pela TAG <OL> e finalizadas com o TAG </OL>. Cada item utiliza O TAG <LI>. Exemplo:

Apostila de Html Curso WebDesign

10

<OL> <LI> facil fazer uma Home Page: <LI>Tem que ter pacincia <LI>Bons recursos <LI>E no exagerar em imagens </OL> Resultado Final: 1. facil fazer uma Home Page: 2. Tem que ter pacincia 3. Bons Recursos 4. E no exagerar em imagens.

3.2 - LISTAS NO ORDENADAS Listas no ordenadas so muito parecidas com as ordenadas. A diferena o fato de elas no definirem explicitamente uma ordem, como no caso as numeradas. Eles so formados por smbolos, que podem ser bola, quadrado, ou uma bola vazia. Elas so iniciadas com o TAG <UL> e so respectivamente terminadas com </UL>, e seus elementos so descritos igual s nem as numeradas: com <LI>. Exemplo:

<UL> <LI>Internet <LI>Intranet <LI>E-mail </UL> Resultado: Internet


Apostila de Html Curso WebDesign 11

Intranet E-mail

3.3 - ATRIBUTOS ADICIONAIS DO ELEMENTO UL O Netscape introduziu o atributo TYPE tambm em listas ordenadas. Ele recebe o tipo do marcador que ser utilizado ao lado dos itens da lista, o qual pode ser CIRCLE, SQUARE OU DISC, respectivamente, bola, quadrado, ou uma bola vazia. Exemplo:
<html> <head> <title>Listas</title> </head> <body> Listas com Marcadores <b>sem atributos</b>: <UL> <LI>Internet <LI>Intranet <LI>E-mail </UL> Listas com Marcadores e o type <b>square</b>: <UL type="square"> <LI>Internet <LI>Intranet <LI>E-mail </UL> Listas com Marcadores e o type <b>circle</b>: <UL type="circle"> <LI>Internet <LI>Intranet <LI>E-mail </UL> Listas com Marcadores e o type <b>disc</b>: <UL type="disc"> <LI>Internet <LI>Intranet <LI>E-mail </UL> </body> </html>

Apostila de Html Curso WebDesign

12

4. Refresh Page So pginas normalmente sem links, que chamam outras depois de um determinado tempo dentro dela, sem nenhuma interferncia do internauta. Para que o Refresh ocorra, basta colocar no documento a seguinte linha de comando, dentro do HEAD:
<META HTTP-EQUIV="REFRESH" CONTENT="segundos; URL=Documento.htm">

Exemplo: <HTML> <HEAD> <META HTTP-EQUIV="REFRESH" CONTENT="5; URL=http://www.cade.com.br"> <TITLE> Ttulo da Pgina </TITLE> </HEAD> <BODY bgcolor="Cornsilk"> <center><font color="Darkred" size="5" face="simsun">Esta uma pgina de teste de</font></h1></center> <center><font color="Darkred" size="7" face="simsun">Redirecionamento</font></h1></center> </BODY> </HTML>

5. Tabelas Tabelas correspondem a um timo formato para originar informaes, e por essa razo que eles foram acrescentados linguagem HTML 5.1 - CONSTRUINDO TABELAS COM O ELEMENTO TABLE A TAG <TABLE> utilizada para a representao de dados tabulares. A estrutura e o contedo da tabela devem ficar dentro das TAGs <TABLE> </TABLE> 5.1.1 - O TTULO DA TABELA (ELEMENTO CAPTION) A TAG <CAPTION> especifica o ttulo de uma tabela. Por exemplo: <CAPTION>Notas da primeira avaliao</CAPTION> 5.1.2 - TABLE HEADINGS (ELEMENTO TH)
Apostila de Html Curso WebDesign 13

A TAG <TH> usada para especificar as clulas de cabealho da tabela. Essas clulas so diferentes das outras, pois seu contedo aparece geralmente em negrito. O elemento TH pode ser apresentado sem contedo algum: isso corresponde a uma clula em branco. As tabelas podem ainda conter mais de um TH para uma dada coluna, ou linha, ou simplesmente no conter nenhum elemento TH, isto , no conter em nenhuma clula um destaque. O TAG dela : <HT>texto em destaque</HT> Observaes: Elas devem ficar, assim como todas, dentro da TAG <TABLE>. 5.1.3 - TABLE DATA (ELEMENTO TD) A TAG <TD> especifica a clulas de dados de uma tabela. Por se tratar de dados comuns (e no cabealhos), essas clulas possuem seu contedo escrito em fonte normal, sem nenhum destaque e alinhamento esquerda. Assim como o TH, pode-se construir clulas em branco, usando o elemento TD, como no exemplo a seguir: <TD>Clulas de dados</TD> Observaes: A TAG de terminao, <TD>, tambm opcional.

5.1.4 - END OF TABLE ROW (ELEMENTO TR) A TAG <TR> indica o fim de uma linha na tabela. Cada linha da tabela pode conter vrias clulas e, portanto, necessrio que se faa uso de uma marcao que indique exatamente o ponto de quebra de uma linha e incio de outra. Toda linha deve terminar com um <TR>, com exceo da ltima linha da tabela, que dispensa o TR porque o uso da prpria marcao de fim de tabela </TABLE> torna implcito o fim da linha. 5.2 - ATRIBUTOS PARA A TABELA As marcaes das tabelas podem apresentar resultados diferentes, se acompanhadas de alguns atributos. Os principais so: 5.2.1 - BORDER

Apostila de Html Curso WebDesign

14

Um atributo opcional para ser usado com TABLE o atributo BORDER. Se ele estiver presente, a tabela ser formatada com linhas de borda. Ateno aos alunos do Centro de Informtica: Todas as explicaes acima como as que esto por vir, foram feitas, para que voc possa saber o que significa a TAG em questo! Exemplo:
<TABLE BORDER> <CAPTION> Nota da primeira avaliao </CAPTION> <TD>Notas/Alunos</TD> <TH>Eduardo</TH> <TH>Ana Lcia</TH> <TH>Andra</TH> <TR> <TH>Notas</TH> <TD>8,0</TD> <TD>9.3<TD> <TD>7.8</TD> <TR> <TH>No de Inscrio</TH> <TD>376234809</TD> <TD>387349048</TD> <TD>502350432</TD> </TABLE>

Veja o resultado:

O atributo BORDER pode tambm receber um valor que vai estabelecer qual a espessura (alm da existncia) da linha de borda da tabela (BORDER="valor"). Se o valor atribudo for 0 (zero), o BORDER funciona exatamente como o caso padro, sem o BORDER. Dessa maneira, possvel colocar tabelas em maior destaque, atribuindo um valor maior que 1 para o BORDER.
<TABLE BORDER=5> <TD>TESTE</TD> <TD>TESTE2</TD> <TD>TESTE3</TD> <TR> <TD>TESTE4</TD> <TD>TESTE5</TD> <TD>TESTE6</TD>
Apostila de Html Curso WebDesign 15

</TABLE>

Veja o resultado:

5.2.2 - ALIGN Este atributo pode ser aplicado a TH, TD ou TR e controla o alinhamento do texto dentro de uma clula, com relao as bordas laterais. Quando aplicado a TR, ele define o alinhamento de toda uma linha da tabela. O exemplo abaixo mostra como o ALIGN aceita os valores LEFT, CENTER ou RIGHT, para alinhar esquerda, centralizar ou alinhar direita, respectivamente.

<TABLE BORDER> <TD>Primeira clula</TD> <TD>Segunda clula</TD> <TD>Terceira clula</TD> <TR> <TD ALIGN="CENTER">Centro</TD> <TD ALIGN="LEFT">Esquerda</TD> <TD ALIGN="RIGHT">Direita</TD> <TR> </TABLE> Veja o resultado:

5.2.3 - VALIGN

Apostila de Html Curso WebDesign

16

Pode ser aplicado a TH e TD e define o alinhamento do texto em relao s bordas superior e inferior. Aceita os valores TOP, MIDDLE, E BOTTOM para alinhar na parte de cima, no meio e na parte de baixo, respectivamente. Veja o exemplo: <TABLE BORDER> <TD>Teste de alinhamento</TD> <TD VALIGN="TOP">TOP</TD> <TD VALIGN="middle">MIDDLE</TD> <TD VALIGN="bottom">BOTTOM</TD> </TABLE> Veja o resultado:

6. Frames Os FRAMES so divises de telas do seu browser que permitem a utilizao de vrios documentos no formato HTML. Este recurso permite criar pginas HTML que podem ser visualizadas simultaneamente na janela do Browser, compartilhando o espao disponvel. Sem o recurso de frames, para visualizar trs pginas diferentes, por exemplo, o usurio necessitaria acessa-las individualmente por meio de uma pgina inicial que contivesse um menu, ou ento, acessar uma pgina por vez, no browser.

6.1 - ESTRUTURA Assim como o corpo do HTML, os FRAMES tem sua estrutura. Eles entram no lugar do corpo, substituindo o <BODY></BODY> por <FRAMESET></FRAMESET>. Exemplo:
Apostila de Html Curso WebDesign 17

<HTML> <HEAD> <TITLE> Ttulo do Documento </TITLE> </HEAD> <FRAMESET> Sintaxe dos Frames </FRAMESET> </HTML> 6.2 - SINTAXE Primeiramente devemos fazer um documento HTML para ele ser especificado pela sintaxe de FRAMES, no caso chamado de Frame1.htm.

<HTML> <HEAD> <TITLE> Frame 1 </TITLE> </HEAD> <BODY> <FONT SIZE=6> <B> Frame n1 </B> </FONT> </BODY> </HTML>

6.3 - FRAMESET A primeira especificao o FRAMESET, que acompanhado pelas definies ROWS e COLS. 6.3.1 - ROWS Especifica o numero de FRAMES e a altura de cada um. Exemplo:
<FRAMESET ROWS="20%,30%,50%"> <FRAME SRC="FRAME1.HTM">
Apostila de Html Curso WebDesign 18

<FRAME SRC="FRAME1.HTM"> <FRAME SRC="FRAME1.HTM"> </FRAMESET>

Neste exemplo de cima, ele chama 3 FRAMES, o 1 com 20% da tela, o 2 com 30% da tela, o 3 com 50% da tela (ambos em altura). 6.3.2 - COLS Especifica o numero de FRAMES e a largura de cada um. Exemplo:
<FRAMESET COLS="20%,30%,50%"> <FRAME SRC="FRAME1.HTM"> <FRAME SRC="FRAME1.HTM"> <FRAME SRC="FRAME1.HTM"> </FRAMESET>

Neste exemplo de cima, ele chama 3 FRAMES, o 1 com 20% da tela, o 2 com 30% da tela, o 3 com 50% da tela (ambos em largura). 6.4 - FRAME A segunda especificao o FRAME, que acompanhado pelas definies SRC, NAME, SCROLLING, NORESIZE, TARGET. 6.4.1 - SRC Especifica o documento de formato HTML chamado para o FRAME. Indispensvel, por que sem ele o documento aparecer vazio, s com as divises. Exemplo:
<FRAMESET COLS="20%,30%,50%"> <FRAME SRC="FRAME1.HTM"> <FRAME SRC="FRAME1.HTM"> <FRAME SRC="FRAME1.HTM"> </FRAMESET>

6.4.2 - NAME Especifica o nome do documento de formato HTML chamado para o FRAME. extremamente necessrio para o uso do TARGET, que ser visto a seguir.
Apostila de Html Curso WebDesign 19

Exemplo:
<FRAMESET COLS="20%,30%,50%"> <FRAME SRC="FRAME1.HTM" NAME="Principal"> <FRAME SRC="FRAME1.HTM"> <FRAME SRC="FRAME1.HTM"> </FRAMESET>

6.4.3 - SCROLLING Define se o Frame ter barra de rolagem, o default Auto. Fornece as opes: Yes, No, Auto. Yes - Exibe a barra de rolagem independente do tamanho do documento. No - No exibe a barra de rolagem, mesmo que o documento seja maior que o tamanho especificado.

Auto - S exibe a barra de rolagem se o documento for maior que a rea especificada. Exemplo:
<FRAMESET COLS="20%,30%,50%" <FRAME SRC="FRAME1.HTM" SCROLLING="no"> <FRAME SRC="FRAME1.HTM" SCROLLING="yes"> <FRAME SRC="FRAME1.HTM" SCROLLING="auto"> </FRAMESET>

6.4.4 - NORESIZE Impossibilita o usurio de mudar o tamanho da rea especificada do FRAME. Por default o usurio pode mudar esta rea. Exemplo: <FRAMESET COLS="20%,30%,50%"> <FRAME SRC="FRAME1.HTM" NORESIZE>
Apostila de Html Curso WebDesign 20

<FRAME SRC="FRAME1.HTM"> <FRAME SRC="FRAME1.HTM"> </FRAMESET>

6.4.5 - TARGET Define qual a rea (FRAME) que aparecer o documento especificado pelo link. Mais til na utilizao de Menus e ndices. Necessita do NAME.

Exemplo: <FRAMESET COLS="20%,30%,50%"> <FRAME SRC="FRAME1.HTM" NAME="Principal"> <FRAME SRC="FRAME1.HTM"> <FRAME SRC="FRAME1.HTM"> </FRAMESET> O Link: <A HREF="http://www.microsoft.com" TARGET="Principal"> Microsoft </A> Se voc quiser criar um link que chama uma nova tela do browser basta colocar TARGET="um nome que no existe".

6.5 - BORDER Define qual a borda que o FRAME ter. Mais til na utilizao de BACKGROUNDS iguais. Exemplo:
21

Apostila de Html Curso WebDesign

<FRAMESET COLS="20%,30%,50%" FRAMEBORDER="NO" BORDER=0> <FRAME SRC="FRAME1.HTM" FRAMEBORDER="NO" BORDER=0> <FRAME SRC="FRAME1.HTM" FRAMEBORDER="NO" BORDER=0> <FRAME SRC="FRAME1.HTM" FRAMEBORDER="NO" BORDER=0> </FRAMESET>

7. Msica Existem 2 maneiras de colocar msicas em uma home page, atravs do HTML. A primeira com o TAG <BGSOUND> que s reconhecido pelo Internet Explorer. Para utilizar este TAG siga o exemplo :

<BGSOUND SRC="arquivo.mid"> Onde arquivo.mid o arquivo de msica. Caso voc queira que a msica repita-se, adicione o atributo loop="infinite". A segunda maneira com o TAG <EMBED> que, por ser reconhecido pelo Internet Explorer e Netscape, recomendado. Para utiliz-lo, siga o exemplo : <EMBED SRC="arquivo.mid"> Obs: recomendvel usar arquivos midi, por serem bem menores que os wavs!

8. Caracteres Especiais Em determinados momentos da criao de pgina em HTML, pode-se fazer necessrio a utilizao de caracteres que, normalmente, podem no ser reconhecidos pelo browser. Estes caracteres so chamados caracteres especiais. Veja a tabela a seguir, contendo alguns exemplos: &Aacute; &acirc; &aacute; &Agrave; &Acirc &agrave;
22

Apostila de Html Curso WebDesign

>

&Aring; &atilde; &AElig; &eacute &Egrave; &euml; &Iacute; &icirc; &Iuml; &oacute; &Ograve; &oslash; &Ouml; &uacute; &Ugrave; &uuml; &Ntilde; &gt; &reg; &yacute; &szlig; &#185; &#131; &#137; &#171; &#183; &#190; &#247;

&

&aring; &Auml; &aelig; &Ecirc; &egrave; &ETH; &iacute &Igrave; &iuml; &Ocirc; &ograve; &Otilde; &ouml; &Ucirc; &ugrave; &Ccedil; &ntilde; &amp; &copy; &THORN; &#186; &#178; &#134; &#162; &#177; &#188; &#191; &#161;

< "

&Atilde; &auml; &Eacute; &ecirc; &Euml; &eth; &Icirc; &igrave; &Oacute; &ocirc &Oslash; &otilde; &Uacute; &ucirc; &Uuml; &ccedil; &lt; &quot; &Yacute; &thorn; &170; &#179; &#135; &#163; &#187; &#189; &#215; &#164;

9. Exerccios de Fixao Os exerccios de fixao a seguir esto divididos em nveis, de acordo com o contedo desenvolvido nesta apostila. So 5 nveis:

Exerccios de fixao Nvel 1


1) Estrutura bsica em HTML

<html>
Apostila de Html Curso WebDesign 23

<head> </head> <body> </body> </html>


2) Estrutura simples contendo informaes

<html> <head> <title>Meu primeiro site em HTML</title> </head> <body> Esta a minha primeira pgina em HTML! </body> </html>
3) Estrutura contendo quebras de linha

<html> <head> <title>Exemplos de Quebras de Linha</title> </head> <body> Primeira linha contendo texto<br> Segunda linha contendo texto<br> Terceira linha contendo texto<br> Quarta linha contendo texto<p> Quinta linha contendo texto<p> Sexta linha contendo texto<p> Repare a diferena de espaamento entre as duas tags de quebra de linha. A tag br tem por objetivo inserir uma quebra de linha imediatamente aps ser inserida, enquanto a tag p insere duas linhas em branco. </body> </html>
4) Estrutura contendo linhas horizontais divisrias

<html> <head> <title>Exemplos de linhas divisrias horizontais</title> </head> <body> Paulo <br> Beto<br> Joo<br><hr> Ana<br> Beatriz<br> Lcia<br><hr>
Apostila de Html Curso WebDesign 24

Ao ser inserida no meio desta linha, mostrada uma barra na prxima linha <hr> e o restante do texto na linha seguinte. </body> </html>
5) Estrutura contendo estilos de texto

<html> <head> <title>Estilos de texto</title> </head> <body> So vrios os estilos que podem ser aplicados no texto, em HTML. Eis alguns exemplos: <p> <b>Negrito</b> - aplica o efeito negrito ao texto <br> <i>Itlico</i> - aplica o efeito itlico ao texto <br> <u>Sublinhado</u> - sublinha o texto <br> <strong>Strong</strong> - Similar ao negrito <br> <big>Big</big> - faz com que texto aumente de tamanho <br> <small>Small</small> - faz com que texto reduza de tamanho <br> <tt>Typerwriter</tt> - faz com o texto fique similar ao de uma mquina de escrever <br> <sup>Sobrescrito</sup> - Eleva o texto e diminui o seu corpo <br> <sub>Subscrito</sub> - Rebaixa o texto e diminui o seu corpo <br> <marquee>Marquee - faz com que o texto deslize pela tela </marquee> </body> </html>
6) Estrutura contendo formatao de texto

<html> <head> <title>Formatao de texto</title> </head> <body> <font size=7 color="blue" face="tahoma">F</font> <font size=6 color="gray" face="impact">O</font> <font size=5 color="silver" face="comic sans ms">R</font> <font size=4 color="lime" face="arial">M</font> <font size=4 color="red" face="times new roman">A</font> <font size=5 color="yellow" face="verdana">T</font> <font size=6 color="darkgreen" face="garamond">A</font> <font size=7 color="lightblue" face="arial black">R</font> </body> </html>
7) Estrutura contendo cor de fundo e texto centralizado

<html> <head><title>Fundo colorido e texto alinhado</title></head> <body bgcolor=darkblue>


Apostila de Html Curso WebDesign 25

<center><font size=7 color=#ffffff face="arial black">Fundo Colorido</font></center><p> <center><font size=5 color=#ffffff face="comic sans ms">Esta pgina contm o fundo colorido com as letras em branco.</font></center> </body> </html>

Exerccios de fixao Nvel 2


1) Estrutura contendo cor de fundo, alinhamentos de pargrafo e cabealhos

<html> <head> <title>Fundo colorido com pargrafos alinhados e cabealhos</title> </head> <body bgcolor=#ffff99> <h1>Cabealhos</h1> A palavra cabealho, acima digitada, um exemplo de cabealho no tamanho H1. Em HTML os cabealhos variam de H1 a H6, sendo H1 o maior e a seqncia decrescente. Os cabealhos tm o objetivo de servir como ttulos, textos simples ou em destaque, pois possuem padres diferenciados.<hr> <p align=center><h1>Alinhamentos</h1></p> Para alinharmos textos em HTML, utilizamos a tag <b>p align=</b>. Os alinhamentos podem ser de trs tipos:<p> <p align=left>left (ou alinhamento esquerda, que o padro de qualquer editor de textos).</p> <p align=center>center (ou alinhamento centralizado).</p> <p align=right>right (ou alinhamento direita).</p> </body> </html>
2) Estrutura contendo fundo com imagem (arquivo .GIF ou .JPEG)

<html> <head> <title>Fundo contendo imagem</title> </head> <body background="fundocat.jpg"> <p align="center"><font size=6 color=#ffffff face="comic sans ms">Bem vindos minha Home Page</font></p> </body> </html>
3) Estrutura contendo imagens e textos

<html>
Apostila de Html Curso WebDesign 26

<head> <title>Imagens com e sem bordas</title> </head> <body bgcolor=#33ccff> <font size=4 face=tahoma color=#330099>Para inserir imagens em HTML, como fotos e figuras, necessrio utilizar a tag <b>img src</b>, mais o nome completo do arquivo que ser inserido como figura, inclusive a extenso. Algumas imagens podem vir com uma borda, e para retira-la, utiliza-se a tag <b>border=</b> mais o nmero zero. Exemplo: <p></font> <font size=2 face=tahoma color=#330099> <center><img src=garfield.gif border=0> Imagem contendo a tag border=0</center><br> <center><img src=garfield.gif border=6> Imagem contendo a tag border=5</font ></center><br> </body> </html>
4) Estrutura contendo alinhamento de imagens

<html> <head> <title>Alinhamento de imagens</title> </head> <body bgcolor=#339999> <img src="garfield.gif" align="bottom"> Esta figura possui o alinhamento <b>bottom</b><br><br><br> <img src="garfield.gif" align="middle"> Esta figura possui o alinhamento <b>middle</b><br><br><br> <img src="garfield.gif" align="top"> Esta figura possui o alinhamento <b>top</b><br><br><br> <img src="garfield.gif" align="left"> Esta figura possui o alinhamento <b>left</b><br><br><br><br><br><br><br><br><br><br> <img src="garfield.gif" align="right"> Esta figura possui o alinhamento <b>right</b> </body> </html>
5) Estrutura contendo alteraes nos tamanhos das imagens

<html> <head> <title>Tamanhos das imagens</title> </head> <body bgcolor=#ffffcc> <img src="garfield.gif"> O tamanho desta figura no foi alterado<p> <img src="garfield.gif" widht=50 height=50> O tamanho foi alterado para width e height 50<p> <img src="garfield.gif" widht=200 height=200> O tamanho foi alterado para width e height 200<p> A tag <b>widht</b> refere-se largura da imagem e a tag <b>height</b> se refere altura. </body> </html>
Apostila de Html Curso WebDesign 27

Exerccios de fixao Nvel 3


1) Estrutura contendo link para e-mail

<html> <head> <title>Links para e-mail</title> </head> <body bgcolor=#6699cc> Em HTML textos e imagens podem servir como links, ou seja, ligaes para outras pginas no prprio micro, sites da internet o qual chamamos URL (Uniform Resource Locator) e at mesmo para facilitar o envio de e-mails.A tag utilizada para criao de links chama-se <b>a href=</b>.<p> Exemplo de link para e-mail utilizando texto: <a href=mailto:info.prof@bol.com.br>Entre em contato</a><p> Exemplo de link para e-mail utilizando figura: <a href=mailto:info.prof@bol.com.br><img src="garfield.gif" border=0></a> </body> </html>
2) Estrutura contendo link para URL

<html> <head> <title>Links para e-mail</title> </head> <body bgcolor=#66ccff> Exemplos de links para URL, ou seja, para endereos de sites j hospedados na internet:<p> Exemplo de link utilizando texto: <a href=http:www.globo.com>Globo.com</a><p> Exemplo de link utilizando figura: <a href=http:www.cade.com.br><img src="garfield.gif" border=0 align="middle"></a> </body> </html>
3) Estrutura contendo tabelas

<html> <head> <title>Tabelas</title> </head> <body bgcolor=#ffcc99> O uso de tabelas essencial para muitas das pginas existentes na web. Para se utilizar estas tabelas em HTML, necessita-se de mais de uma tag. As mais utilizadas so:<br> <b>table border</b> - Serve para iniciar e finalizar as tabelas em HTML<br>
Apostila de Html Curso WebDesign 28

<b>tr</b> - Serve para indicar o incio e o final de uma linha da tabela<br> <b>td</b> - Serve para indicar cada clula da tabela.<p> <table border> <tr> <td>Linha 1 - Coluna 1</td> <td>Linha 1 - Coluna 2</td> <td>Linha 1 - Coluna 3</td> </tr> <tr> <td>Linha 2 - Coluna 1</td> <td>Linha 2 - Coluna 2</td> <td>Linha 2 - Coluna 3</td> </tr> </table><p> <table border=6> <tr> <td>Ana e Joo</td> <td>Ana e Pedro</td> </tr> <tr> <td>Maria e Joo</td> <td>Maria e Pedro</td> </tr> </table><p> <table border=0> <tr> <td>Brasil</td> <td>Chile</td> </tr> <tr> <td>Hungria</td> <td>Dinamarca</td> </tr> </table> </body> </html>

Exerccios de fixao Nvel 4


1) Estrutura contendo Listas Ordenadas e No-Ordenadas

<html> <head> <title>Listas Ordenadas e No-Ordenadas em HTML</title> </head>


Apostila de Html Curso WebDesign 29

<body bgcolor=#6699cc> <H2><p align=center>Listas</p></H2> A tag utilizada para inserir Listas Ordenadas a tag OL (Odered List). Exemplo: <OL> <LI>Primeiro item da lista <LI> Segundo item da lista <LI> Terceiro item da lista </OL><BR> A tag utilizada para inserir Listas No-Ordenadas a tag UL (Unordered List). Exemplo: <UL> <LI> Primeiro item da lista <LI> Segundo item da lista <LI> Terceiro item da lista </UL> </body> </html>
2) Estrutura alinhamento Justify de pargrafos

<html> <head> <title>Alinhamento Justify</title> </head> <body bgcolor=#66ccff> <p align=justify>Quando o Web Design necessitar de um alinhamento mais especfico, no caso, o Justificar, que alinha o texto tanto sua direita quanto esquerda, ser necessrio a utilizao da tag <b>justify</b>, dentro do p align. Este texto, por exemplo, est alinhado de forma justificada, como em um editor de textos igual ao pagemaker ou ao Microsoft Word.</p> </body> </html>

Exerccios de fixao Nvel 5


1) Estrutura contendo variaes de Marquee

<html> <head> <title>Teste de Marquee</title> </head> <body bgcolor=#cc9966> <marquee>Marquee normal</marquee> <marquee behavior="slide">Marquee com behavior (comportamento, tipo) slide</marquee> <marquee behavior="slide" scrollamount=100>Marquee com behavior slide e scrollamount (velocidade) 100</marquee> <marquee behavior="alternate">Marquee com behavior alternate</marquee>
Apostila de Html Curso WebDesign 30

<marquee behavior="alternate" scrollamount=50>Marquee com behavior alternate e scrollamount 50</marquee> </body> </html>
2) Estrutura contendo background com imagem de fundo fixa

<html> <head> <title>Background com imagem de fundo fixa</title> </head> <body background="imagem.jpg" bgproperties=fixed> <p align="center"><font size=6 color=#ffffff face="comic sans ms">Bem vindos minha Home Page</font></p> </body> </html>
3) Estrutura para transformar o Site em pgina inicial do usurio

<html> <head> <title>Pgina Inicial</title> </head> <body bgcolor=#669999> <p align="center"><font size=6 color=#ffffff face="impact">Welcome to Fires Page</font></p> <a href=# onClick=this.style.behavior=url(default#homepage); this.setHomePage(http://www.globo.com);>Clique aqui</a> </body> </html>

Apostila de Html Curso WebDesign

31

10. Bibliografia

Html 4 Prtico e Rpido Autor: Ramalho, Jose Antonio Alves Editora: Berkeley Brasil Programando em Html 4.0 Autor: Marcondes, Christian Alfim Editora: Erica

Apostila de Html Curso WebDesign

32