Certificado ISO 9001:2000 Nº 23.0021/98 Centro de Informática CETEP Quintino www.ciquintino.com.br Elaborada por: Wanderson Mirandela
A POLÍTICA DA QUALIDADE DO CI Prover cursos de nível básico profissionalizante na área de Informática, adequados à realidade do mercado de trabalho, buscando a melhoria contínua dos serviços prestados e da eficácia do Sistema de Gestão, de forma a garantir a plena satisfação dos seus alunos e colaboradores, através do atendimento aos requisitos da norma NBR ISO 9001:2000. O CURSO DE WEBDESIGN O treinamento de um Web Designer é baseado em um conteúdo que visa familiarizar os participantes não apenas para a criação, mas também a manutenção de Web Sites, compreender os fatores mais importantes no design de um site, desenvolver conteúdo para a web, utilizar ferramentas para a gestão de Home Pages, utilizar-se do tratamento digital de informações, além de um conjunto de diversas soluções gráficas. Nos dias atuais, ser um Web Designer é ter uma sólida profissão, com uma forte tendência à expansão deste mercado, em virtude do avanço da tecnologia. Assim, o aluno estará apto a criar páginas pessoais e profissionais para a internet. Utilizando algumas das mais modernas e importantes tecnologias do mercado. APOSTILA DE WEBDESIGN Módulo de HTML - 2004 Equipe de Elaboração Wanderson Mirandela Revisão Amanda Tanaka Aprovação Sandra Regina Barbosa Apostila de Html Curso WebDesign 1
Índice 1. HTML - Introdução 04 1.1 - Iniciando um documento 04 1.2 - TAGs usados no início do documento 05 1.3 - Títulos e subtítulos 05 1.4 - Formatação de textos 06 2. HTML 08 2.1 - Imagens 08 2.2 - Links 10 3. Listas 11 3.1 - Listas ordenadas 11 3.2 - Listas não ordenadas 11 3.3 - Atributos adicionais do elemento UL 12 4. Refresh Page 13 5. Tabelas 14 5.1 - Construindo tabelas com o elemento TABLE 14 5.1.1 - O título da tabela (Elemento CAPTION) 14 5.1.2 - Table Headings (Elemento TH) 14 5.1.3 - Table Data (Elemento TD) 14 5.1.4 - End of Table Row (Elemento TR) 15 5.2 - Atributos para a Tabela 15 5.2.1 - BORDER 15 5.2.2 - ALIGN 16 5.2.3 - VALIGN 17 Apostila de Html Curso WebDesign 2
6. Frames 18 6.1 - Estrutura 18 6.2 - Sintaxe 18 6.3 - FRAMESET 19 6.3.1 - ROWS 19 6.3.2 - COLS 19 6.4 - FRAME 20 6.4.1 - SRC 20 6.4.2 - NAME 20 6.4.3 - SCROLLING 20 6.4.5 - NORESIZE 21 6.4.6 - TARGET 21 6.5 - BORDER 22 7. Música 22 8. Caracteres Especiais 23 9. Exercícios de Fixação 24 10. Bibliografia 33 1. HTML Introdução Apostila de Html Curso WebDesign 3
HTML significa Hypertext Markup Language e é a linguagem de descrição de documentos usada na WWW - World Wide Web. Ela é orientada por marcadores, chamados TAGs. Os TAGs são 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 início e fim. Quando forem duplos, a Barra de Divisão ( / ) indicará, na segunda Tag, o seu término. Exemplos: TAG único: <BR> TAG duplo: <P>...</P> 1.1 - INICIANDO UM DOCUMENTO Todo o documento HTML fica contido entre os TAGS: <HTML> e </HTML>. Dentro destes tags, tem-se duas seções básicas: HEAD BODY Contém parâmetros de configuração do documento. Contém o documento em si. A estrutura básica de um documento HTML é: <title>título da home page</title> <body> Conteúdo da home page! 1.2 - TAGS USADOS NO INÍCIO DO DOCUMENTO <HTML>...</HTML> Envolvem todas as seções de um documento (HEAD e BODY). <HEAD>...</HEAD> Apostila de Html Curso WebDesign 4
Envolvem a seção de cabeçalho do documento. <TITLE>...</TITLE> Indica o título do documento para o Browser. Os Browsers apresentam este título na Barra de títulos da sua Janela no Windows. <BODY>...</BODY> Envolvem a seção de corpo do documento. Aqui fica o conteúdo principal da Home Page. Opcionalmente podemos indicar um arquivo de imagem para formar o fundo, usando a opção: BACKGROUND, descrita mais adiante. 1.3 - TÍTULOS E SUBTÍTULOS Para demarcar títulos e subtítulos, use os TAGs de HEADER (H1 a H6), juntamente com as opções 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 - FORMATAÇÃO DE TEXTOS Há dois tipos de formatação em HTML: lógica e física. Os efeitos de apresentação na tela são os mesmos: o motivo da distinção entre eles se deve à idéia básica de independência entre especificação e apresentação. Quando formatamos um trecho de texto como cabeçalho de nível 1, não explicitamos se esse tipo de cabeçalho deve ser em alguma fonte determinada, em um tamanho determinado, justificado à esquerda ou à direita, ou centralizado. Esses detalhes de apresentação são deixados para o browser - o dispositivo Apostila de Html Curso WebDesign 5
de apresentação do documento - que pode ser configurado de acordo com o leitor (usuário final). A formatação lógica segue o significado lógico do texto marcado: um endereço de e- mail, uma citação etc. Sua apresentação final varia conforme o browser, podendo oferecer resultados mais ricos. A formatação física especifica explicitamente o estilo que se quer para o texto: itálico, grifado etc. Sua apresentação final não sofre grandes variações. Estilos Lógicos <CITE> Para títulos de livros, filmes, e citações curtas. Exemplo: Assisti Guerra nas Estrelas umas oito vezes! <CODE> Para indicar trechos de código de programas. Exemplo: for (x=0); cl &&(!feof(stdin)); x++)); <DFN> Indica definição de uma palavra, em geral apresenta o texto em itálico. Exemplo: CERN: Centre d Éstudes et Recherches Nucleaires <EM> Ênfase, também normalmente apresentado em itálico. 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 seqüência 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 variáveis, ou valores que o usuário deverá escrever; geralmente mostrado em itálico. Exemplo: No campo Login, escreva guest. Estilos Físicos Apostila de Html Curso WebDesign 6
<B> Quando disponível no browser, é mostrado em negrito (em alguns browsers, pode aparecer sublinhado) <I> Itálico (em alguns casos, caracteres inclinados) <TT> Tipo teletype - fonte de espaçamento fixo. <U> Sublinhado; deve ser usado com cuidado, pois confunde-se com a apresentação de links. <STRIKE> ou <S> Frase riscada. <BIG> Fonte um pouco maior. <SMALL> Fonte um pouco menor. <SUB> Frase em estilo índice, como em H 2 O. <SUP> Frase em estilo expoente, como em Km 2. Observação: As Marquees É possível obter o efeito de animação de texto, através do tag <MARQUEE>. Atributos de largura e direção do efeito permitem diversas apresentações diferentes. Por exemplo (o efeito só é executado no Internet Explorer e em versões 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 7
2.1 - IMAGENS Pode-se inserir imagens dentro de um documento HTML. Os formatos mais usados são o GIF e o JPG, ambos com compactação de pixels. Antes de criar uma página com dezenas de figuras e fotos, lembre-se de que ao criar e testar sua página em seu micro, todas as imagens serão carregadas quase que instantaneamente. Contudo, quando sua página estiver na internet, o tempo para que uma imagem grande seja carregada pode tornar o aceso a sua página muito difícil. A quantidade de cores também 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, não exigindo um tag para finalizar. Exemplo: <IMG SRC="figura1.gif"> Os arquivos com as imagens deverão estar armazenados no seu Provedor de acesso, juntamente com o documento HTML, para que a imagem seja visualizada pelo usuário. Atributos básicos de imagem ALT Indica um texto alternativo, descrevendo brevemente a imagem, que é apresentado no lugar da imagem nos browsers (aquela informação que descreve uma imagem quando paramos a seta do mouse sobre ela). É recomendável que esteja sempre presente. <IMG SRC="c:\pasta\imagem.gif ALT="descrição_da_imagem"> WIDTH e HEIGHT Atributos de dimensão da imagem, em pixels. Grande parte dos editores HTML coloca automaticamente os valores destes atributos, quando indicamos a inserção de uma imagem. Uma das vantagens de se usar esses atributos é que o browser pode montar mais rapidamente as páginas, por saber de antemão o espaço que deverá ser reservado para elas. <IMG SRC="imagem" ALT="descrição" 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 condição. Porém, por questões de apresentação, nem sempre interessa termos essa borda ao redor da imagem. Assim, com o atributo BORDER, podemos controlar esse detalhe. Apostila de Html Curso WebDesign 8
Se quisermos uma borda mais larga... <A HREF="URL"><IMG SRC="imagem" ALT="descrição" BORDER=4></A> Se quisermos uma imagem sem borda... <A HREF="URL"><IMG SRC="imagem" ALT="descrição" BORDER=0></A> OBS: Essa borda pode ser apresentada também em imagens que não são â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, é possível dar mais destaque a uma imagem, sem ser necessário editá-la: Foto Original Foto com Border=3, dentro da tag IMG SRC ALIGN <IMG SRC="imagem" ALT="descrição" ALIGN= alinhamento > Existem também 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 não seja muito bom. ALIGN=MIDDLE Alinha o texto adjacente com o meio da imagem, embora com linhas compridas o resultado não 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 é possível fazermos ligações de uma região 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 ligação hipertexto do documento sendo apresentado para o documento de destino. Atributos <A> tem vários atributos, utilizados de acordo com a ação associada ao link. Os mais usados são: HREF Indica o arquivo de destino da ligação de hipertexto. TARGET Indica o frame em que será carregado o arq_destino. 3. Listas 3.1 - LISTAS ORDENADAS Listas ordenadas são também denominadas listas numeradas, pois, quando um navegador encontra um TAG, iniciando uma lista ordenada, ele passa a mostrar cada item utilizando números, como 1, 2, 3, e assim sucessivamente. Listas ordenadas são 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 paciência <LI>Bons recursos <LI>E não exagerar em imagens </OL> Resultado Final: 1. É facil fazer uma Home Page: 2. Tem que ter paciência 3. Bons Recursos 4. E não exagerar em imagens. 3.2 - LISTAS NÃO ORDENADAS Listas não ordenadas são muito parecidas com as ordenadas. A diferença é o fato de elas não definirem explicitamente uma ordem, como é no caso as numeradas. Eles são formados por símbolos, que podem ser bola, quadrado, ou uma bola vazia. Elas são iniciadas com o TAG <UL> e são respectivamente terminadas com </UL>, e seus elementos são 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 também 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: <title>listas</title> <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> Apostila de Html Curso WebDesign 12
4. Refresh Page São páginas normalmente sem links, que chamam outras depois de um determinado tempo dentro dela, sem nenhuma interferência 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> Título da Página </TITLE> </HEAD> <BODY bgcolor="cornsilk"> <center><font color="darkred" size="5" face="simsun">esta é uma página 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 informações, e é por essa razão que eles foram acrescentados à linguagem HTML 5.1 - CONSTRUINDO TABELAS COM O ELEMENTO TABLE A TAG <TABLE> é utilizada para a representação de dados tabulares. A estrutura e o conteúdo da tabela devem ficar dentro das TAGs <TABLE> </TABLE> 5.1.1 - O TÍTULO DA TABELA (ELEMENTO CAPTION) A TAG <CAPTION> especifica o título de uma tabela. Por exemplo: <CAPTION>Notas da primeira avaliação</caption> 5.1.2 - TABLE HEADINGS (ELEMENTO TH) Apostila de Html Curso WebDesign 13
A TAG <TH> é usada para especificar as células de cabeçalho da tabela. Essas células são diferentes das outras, pois seu conteúdo aparece geralmente em negrito. O elemento TH pode ser apresentado sem conteúdo algum: isso corresponde a uma célula em branco. As tabelas podem ainda conter mais de um TH para uma dada coluna, ou linha, ou simplesmente não conter nenhum elemento TH, isto é, não conter em nenhuma célula um destaque. O TAG dela é: <HT>texto em destaque</ht> Observações: Elas devem ficar, assim como todas, dentro da TAG <TABLE>. 5.1.3 - TABLE DATA (ELEMENTO TD) A TAG <TD> especifica a células de dados de uma tabela. Por se tratar de dados comuns (e não cabeçalhos), essas células possuem seu conteúdo escrito em fonte normal, sem nenhum destaque e alinhamento à esquerda. Assim como o TH, pode-se construir células em branco, usando o elemento TD, como no exemplo a seguir: <TD>Células de dados</td> Observações: A TAG de terminação, <TD>, também é 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 várias células e, portanto, é necessário que se faça uso de uma marcação que indique exatamente o ponto de quebra de uma linha e início de outra. Toda linha deve terminar com um <TR>, com exceção da última linha da tabela, que dispensa o TR porque o uso da própria marcação de fim de tabela </TABLE> torna implícito o fim da linha. 5.2 - ATRIBUTOS PARA A TABELA As marcações das tabelas podem apresentar resultados diferentes, se acompanhadas de alguns atributos. Os principais são: 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. Atenção aos alunos do Centro de Informática: Todas as explicações acima como as que estão por vir, foram feitas, para que você possa saber o que significa a TAG em questão! Exemplo: <TABLE BORDER> <CAPTION> Nota da primeira avaliação </CAPTION> <TD>Notas/Alunos</TD> <TH>Eduardo</TH> <TH>Ana Lúcia</TH> <TH>Andréa</TH> <TR> <TH>Notas</TH> <TD>8,0</TD> <TD>9.3<TD> <TD>7.8</TD> <TR> <TH>No de Inscrição</TH> <TD>376234809</TD> <TD>387349048</TD> <TD>502350432</TD> </TABLE> Veja o resultado: O atributo BORDER pode também receber um valor que vai estabelecer qual a espessura (além da existência) da linha de borda da tabela (BORDER="valor"). Se o valor atribuído for 0 (zero), o BORDER funciona exatamente como o caso padrão, sem o BORDER. Dessa maneira, é possível 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 célula, com relação 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 célula</td> <TD>Segunda célula</td> <TD>Terceira célula</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 relação à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 são divisões de telas do seu browser que permitem a utilização de vários documentos no formato HTML. Este recurso permite criar páginas HTML que podem ser visualizadas simultaneamente na janela do Browser, compartilhando o espaço disponível. Sem o recurso de frames, para visualizar três páginas diferentes, por exemplo, o usuário necessitaria acessa-las individualmente por meio de uma página inicial que contivesse um menu, ou então, acessar uma página 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> Título 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> </HTML> <HEAD> <TITLE> Frame 1 </TITLE> </HEAD> <BODY> <FONT SIZE=6> <B> Frame n1 </B> </FONT> </BODY> 6.3 - FRAMESET A primeira especificação é o FRAMESET, que é acompanhado pelas definições ROWS e COLS. 6.3.1 - ROWS Exemplo: Especifica o numero de FRAMES e a altura de cada um. <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 Exemplo: Especifica o numero de FRAMES e a largura de cada um. <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 especificação é o FRAME, que é acompanhado pelas definições SRC, NAME, SCROLLING, NORESIZE, TARGET. 6.4.1 - SRC Especifica o documento de formato HTML chamado para o FRAME. Indispensável, por que sem ele o documento aparecerá vazio, só com as divisões. 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 necessário 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 opções: Yes, No, Auto. Yes - Exibe a barra de rolagem independente do tamanho do documento. No - Não 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 usuário de mudar o tamanho da área especificada do FRAME. Por default o usuário 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 utilização 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 não existe". 6.5 - BORDER Define qual a borda que o FRAME terá. Mais útil na utilização de BACKGROUNDS iguais. Exemplo: Apostila de Html Curso WebDesign 21
<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. Música Existem 2 maneiras de colocar músicas em uma home page, através 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 música. Caso você queira que a música 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: É recomendável usar arquivos midi, por serem bem menores que os wavs! 8. Caracteres Especiais Em determinados momentos da criação de página em HTML, pode-se fazer necessário a utilização de caracteres que, normalmente, podem não ser reconhecidos pelo browser. Estes caracteres são chamados caracteres especiais. Veja a tabela a seguir, contendo alguns exemplos: Á Á á á Â Â â â À À à à Apostila de Html Curso WebDesign 22
Å Å å å Ã Ã ã ã Ä Ä ä ä Æ Æ æ æ É É é é Ê Ê ê ê È È è è Ë Ë ë ë Ð Ð ð ð Í Í í í Î Î î î Ì Ì ì ì Ï Ï ï ï Ó Ó ó ó Ô Ô ô ô Ò Ò ò ò Ø Ø ø ø Õ Õ õ õ Ö Ö ö ö Ú Ú ú ú Û Û û û Ù Ù ù ù Ü Ü ü ü Ç Ç ç ç Ñ Ñ ñ ñ < < > > & & " " Ý Ý ý ý Þ Þ þ þ ß ß º º ª &170; ¹ ¹ ² ² ³ ³ ƒ ƒ † ‡ ‰ ««± ±»» ¼ ¼ ½ ½ ¾ ¾ 9. Exercícios de Fixação Os exercícios de fixação a seguir estão divididos em níveis, de acordo com o conteúdo desenvolvido nesta apostila. São 5 níveis: Exercícios de fixação Nível 1 1) Estrutura básica em HTML Apostila de Html Curso WebDesign 23
<body> 2) Estrutura simples contendo informações <title>meu primeiro site em HTML</title> <body> Esta é a minha primeira página em HTML! 3) Estrutura contendo quebras de linha <title>exemplos de Quebras de Linha</title> <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 diferença de espaçamento entre as duas tags de quebra de linha. A tag br tem por objetivo inserir uma quebra de linha imediatamente após ser inserida, enquanto a tag p insere duas linhas em branco. 4) Estrutura contendo linhas horizontais divisórias <title>exemplos de linhas divisórias horizontais</title> <body> Paulo <br> Beto<br> João<br><hr> Ana<br> Beatriz<br> Lúcia<br><hr> Apostila de Html Curso WebDesign 24
Ao ser inserida no meio desta linha, é mostrada uma barra na próxima linha <hr> e o restante do texto na linha seguinte. 5) Estrutura contendo estilos de texto <title>estilos de texto</title> <body> São vários 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>itálico</i> - aplica o efeito itálico 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 máquina 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> 6) Estrutura contendo formatação de texto <title>formatação de texto</title> <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> 7) Estrutura contendo cor de fundo e texto centralizado <title>fundo colorido e texto alinhado</title> <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 página contém o fundo colorido com as letras em branco.</font></center> Exercícios de fixação Nível 2 1) Estrutura contendo cor de fundo, alinhamentos de parágrafo e cabeçalhos <title>fundo colorido com parágrafos alinhados e cabeçalhos</title> <body bgcolor=#ffff99> <h1>cabeçalhos</h1> A palavra cabeçalho, acima digitada, é um exemplo de cabeçalho no tamanho H1. Em HTML os cabeçalhos variam de H1 a H6, sendo H1 o maior e a seqüência decrescente. Os cabeçalhos têm o objetivo de servir como títulos, textos simples ou em destaque, pois possuem padrões 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 três tipos:<p> <p align= left >left (ou alinhamento à esquerda, que é o padrão de qualquer editor de textos).</p> <p align= center >center (ou alinhamento centralizado).</p> <p align= right >right (ou alinhamento à direita).</p> 2) Estrutura contendo fundo com imagem (arquivo.gif ou.jpeg) <title>fundo contendo imagem</title> <body background="fundocat.jpg"> <p align="center"><font size=6 color=#ffffff face="comic sans ms">bem vindos à minha Home Page</font></p> 3) Estrutura contendo imagens e textos Apostila de Html Curso WebDesign 26
<title>imagens com e sem bordas</title> <body bgcolor=#33ccff> <font size=4 face= tahoma color=#330099>para inserir imagens em HTML, como fotos e figuras, é necessário utilizar a tag <b>img src</b>, mais o nome completo do arquivo que será inserido como figura, inclusive a extensão. Algumas imagens podem vir com uma borda, e para retira-la, utiliza-se a tag <b>border=</b> mais o número 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> 4) Estrutura contendo alinhamento de imagens <title>alinhamento de imagens</title> <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> 5) Estrutura contendo alterações nos tamanhos das imagens <title>tamanhos das imagens</title> <body bgcolor=#ffffcc> <img src="garfield.gif"> O tamanho desta figura não 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. Apostila de Html Curso WebDesign 27
Exercícios de fixação Nível 3 1) Estrutura contendo link para e-mail <title>links para e-mail</title> <body bgcolor=#6699cc> Em HTML textos e imagens podem servir como links, ou seja, ligações para outras páginas no próprio 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 criação 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> 2) Estrutura contendo link para URL <title>links para e-mail</title> <body bgcolor=#66ccff> Exemplos de links para URL, ou seja, para endereços 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> 3) Estrutura contendo tabelas <title>tabelas</title> <body bgcolor=#ffcc99> O uso de tabelas é essencial para muitas das páginas existentes na web. Para se utilizar estas tabelas em HTML, necessita-se de mais de uma tag. As mais utilizadas são:<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 início e o final de uma linha da tabela<br> <b>td</b> - Serve para indicar cada célula 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 João</td> <td>ana e Pedro</td> </tr> <tr> <td>maria e João</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> Exercícios de fixação Nível 4 1) Estrutura contendo Listas Ordenadas e Não-Ordenadas <title>listas Ordenadas e Não-Ordenadas em HTML</title> 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 Não-Ordenadas é a tag UL (Unordered List). Exemplo: <UL> <LI> Primeiro item da lista <LI> Segundo item da lista <LI> Terceiro item da lista </UL> 2) Estrutura alinhamento Justify de parágrafos <title>alinhamento Justify</title> <body bgcolor=#66ccff> <p align= justify >Quando o Web Design necessitar de um alinhamento mais específico, no caso, o Justificar, que alinha o texto tanto à sua direita quanto à esquerda, será necessário a utilização 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> Exercícios de fixação Nível 5 1) Estrutura contendo variações de Marquee <title>teste de Marquee</title> <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> 2) Estrutura contendo background com imagem de fundo fixa <title>background com imagem de fundo fixa</title> <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> 3) Estrutura para transformar o Site em página inicial do usuário <title>página Inicial</title> <body bgcolor=#669999> <p align="center"><font size=6 color=#ffffff face="impact">welcome to Fire s Page</font></p> <a href= # onclick= this.style.behavior= url(default#homepage) ; this.sethomepage( http://www.globo.com ); >Clique aqui</a> Apostila de Html Curso WebDesign 31
10. Bibliografia Html 4 Prático e Rápido 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