Professora Ana Carolina Jaskulski. Março/2007

Tamanho: px
Começar a partir da página:

Download "Professora Ana Carolina Jaskulski. http://anacarol.blog.br anamaxwell@gmail.com. Março/2007"

Transcrição

1 F 141 Páginas Linguagem HTML Professora Ana Carolina Jaskulski Março/2007

2 2 Índice Introdução História Evolução do HTML Fundamentos da Linguagem HTML Os Nomes dos Arquivos A Lógica LIFO O Arquivo HTML Básico O Arquivo index.htm Elementos Estruturais...13 <html atributos>... </html>...13 version= "versão"...13 lan="idioma"...13 dir= "rtl ltr"...13 <head atributos>... </head>...13 <body atributos> background= "URL"...14 bgcolor= "#rrggbb" ou "nome"...15 text= "#rrggbb" ou "nome"...15 link= "#rrggbb" ou "nome"...15 alink= "#rrggbb" ou "nome"...15 vlink= "#rrggbb" ou "nome"...16 hover= "#rrggbb" ou "nome"...16 bgproperties= "fixed"...16 leftmargin= "n"...16 topmargin= "n"...17 scroll= "yes no auto" Elementos do Cabeçalho...18 <script >...</script >...18 status= "mensagem"...18 defaultstatus= "mensagem"...18 Alterando o Formato do Cursor...18 Usando um Arquivo como Cursor...19 cursor:url(...)...19 Anexando Objetos ao Cursor Links e Imagens...22 Links Internos e Externos...22 href= "..."...22 name= "..."...23 target="_blank", "nome" ou "_top"...24 title="descrição"...24 style=text-decoration=: " "...25 Link Que Muda o Cursor...25 onmouseover=" "...26 Fazendo um link oculto...26 onclick="alert('...')"...27 mailto:...27 Criando Links Para Download...28 Abrir no Browser Arquivos de Outros Softwares...29 Configurando a Página Inicial - Página de Abertura Imagens...31 <img atributos>...31

3 3 src="..."...31 align="top middle bottom left right"...31 width="largura", height="altura"...33 border="valor"...33 vspace="y" hspace="x"...34 alt="texto"...35 onmouseover, onmouseout="imagem"...35 Criando um Diretório de Imagens Reduzidas...35 Imagem de Baixa Resolução...36 lowsrc="arquivo" Elementos Especiais...37 <applet>... </applet>...37 code="classe Java"...37 codebase="url base"...37 name="nome"...37 align, alt, hspace, vspace, height, width...37 <param atributos>...37 name="nome"...37 value="valor"...38 <font atributos>... </font>...38 size="valor" ou "incremento"...38 color="#rrggbb" ou "nome"...39 face="nome de fonte"...40 <br atributos>...41 clear="left", "right", "all"...41 <nobr>... </nobr>...41 <wbr> <map atributos>... </map >...42 name="nome_do_mapa"...42 ismap...42 usemap="#nome_do_mapa"...42 <area atributos>...43 shape="circ", "poly" ou "rect"...43 coords="coordenadas"...43 href="url"...43 nohref Bloqueando a Cópia da Página...44 oncontextmenu="return false"...44 onselectstart="return false"...44 <!-- comentários... --> Formatação de textos e caracteres...45 Elementos Lógicos...45 <strong>... </strong>...45 <em>... </em>...45 <cite>... </cite>...45 <var>... </var>...45 <samp>... </samp>...45 <kbd>... </kbd>...45 <dfn>... </dfn>...45 <code>... </code>...45 <pre>... <pre>...46 Elementos Físicos...47 <b>... </b>...47 <i>... </i>...47 <tt>... </tt>...47

4 4 <u>... </u>...47 <strike>... </strike>...47 <del>... </del>...47 <s>... </s>...47 <sub>... </sub>...47 <sup>... </sup>...47 <small>... </small>...47 <big>... </big>...47 <blink>... </blink>...48 align="top", "middle", "bottom"...49 behavior =scroll, slide, alternate...49 bgcolor="cor"...50 direction=left, right, up, down...50 height="número", %:...50 hspace="número"...50 loop="número", -1 a infinite...50 scrollamount="número"...50 scrolldelay="número"...50 vspace="número"...50 width="número", % Formatações...57 <H1, H2,..., H6 atributos>...57 </H1, H2,..., H6>...57 align="center", "left", "right" ou "justify"...57 style="propriedades"...57 <p atributos>... </p>...58 align...58 style="propriedades" Linhas Horizontais...60 <hr atributos>...60 size="número"...60 width="número"...60 align="left", "center" ou "right"...61 noshade...61 color="#rrggbb" ou "nome" Linhas Verticais...63 Outros Separadores de Texto Texto Pré-Formatado...68 <pre atributos>... </pre>...68 width="..."...68 Espaçamento Forçado...68 <q atributo>... </q>...69 cite=url...69 <blockquote>... </blockquote>...69 <address>... </address>...70 <div atributos>... </div>...70 align="center", "left" ou "right"...70 style="propriedades"...70 <center>... </center>...71 <acronym atributos>... </acronym>...71 title Listas...72 Não Ordenada...72 <ul atributos>... </ul>...72

5 5 type= tipo"...72 Ordenada <ol atributos>... </ol>...72 type="tipo"...72 start="valor"...73 <li atributos>... </li>...73 <dl atributos>... </dl>...73 compact...73 <dt atributos>... </dt>...74 <dd atributos>... </dd>...74 Usando Figuras como Marcadores Tabelas...76 <table>...</table> <table atributos>... </table>...76 border="valor"...77 cellpadding="valor"...78 width="valor" e height="valor"...79 bgcolor="#rrggbb" ou "nome"...79 background ="diretório/nome do arquivo"...80 bordercolor ="#rrggbb" ou "nome"...80 bordercolordark ="#rrggbb" ou "nome"...81 bordercolorlight ="#rrggbb" ou "nome"...81 <tr atributos> align="left, right" ou "center"...82 valign="baseline, bottom, top" ou "middle"...83 bgcolor="cor"...83 bordercolor="cor"...84 bordercolordark="cor"...84 bordercolorlight="cor"...84 char="caracter"...84 charoff="número"...84 table data <td atributos> rowspan=número...85 colspan=número...85 align=left, right ou center...86 valign=baseline, bottom, top ou middle...87 nowrap...87 width=valor...88 bgcolor="#rrggbb"...89 background="diretório/nome do arquivo"...89 bordercolor...89 bordercolordark e bordercolorlight...90 <th atributos>... </th>...90 <caption atributos> </caption>...91 align=top, (default) ou bottom...91 Formatando grandes tabelas...91 <thead>...</thead>...91 <tbody>...</tbody>...92 <tfoot>...</tfoot>...92 Usando Tabelas para criar Colunas de Texto...93 Imagens, Cores e Backgrounds em Tabelas...96 Fazendo Gráficos de Estatísticas Tabela com Imagens Linkadas...103

6 6 15 Multimídia <bgsound atributo> src="url" loop="número infinite" meta Vídeos com img align= "" alt="texto" border="número" controls dynsrc="url" height="número" hspace="número" loop="número ou infinite" src="endereço" start="fileopen / mouseover" vspace="número" width="número" <embed atributos>... </embed> align="left", "right", "top", "bottom" border="número" frameborder="no" height="número" hidden="true", "false" hspace="número" name="texto" pallete="foreground", "background" pluginspace="endereço" vspace="número" type="mimetype" width="número" <nobed>... </nobed> Posicionamento de Objetos - div left (esquerdo) e top (topo) width (largura) e height (altura) position z-index overflow Filtros alpha opacity finishopacity style startx starty finishx finishx blur add direction strength chroma color dropshadow color offx...119

7 7 offy positive fliph e flipv glow color strength gray invert motion blur strenght direction progid:dximagetransform.microsoft wave add freq lightstrength phase strength xray Frames <frameset atributos>... </frameset> cols="x, y,..." rows="x, y,..." frameborder="1 / 0" Frames verticais Frames Horizontais Frames Combinados framespacing="valor" <frame atributos> align="top, middle, bottom, left, right" frameborder="1 / 0" src="url" name="rótulo" marginheight="número" marginwidth="número" noresize scrolling="yes no" Montando um Diretório com frames <iframe>... </iframe > src="url" name="texto" width="número" height="número" align="top middle bottom left right" Frameborder="1 0" margnwidth="pixels" marginheight="pixels" scrolling="yes no auto" Botões Fechar a janela Imprimir a página "Voltar" e "Avançar" Exibir Código Fonte Botões Coloridos Botões com Links Botões Texturizados...139

8 8 Tamanhos e Formatos Botões com Imagens...141

9 9 Introdução Aqui neste material você encontrará muitas informações sobre HTML. É um apanhado de materiais que encontrei (outros que ganhei) e alguns exemplos que visam ajudar no seu aprendizado. Esta apostila não substitui a aula. Tampouco você precisa ter ela durante as aulas- ela é um complemento. Nem todos os conteúdos abordados aqui nós veremos em sala de aula... porque não há tempo para tudo. Esta apostila é um Guia. Ela não vai te ensinar CSS. Ela não vai te ensinar tudo de HTML. Nem DHTML. Nem Javascript. Nem Ajax. A editora Alta Books lançou a coleção Use a cabeça. com livros MUITO divertidos, muito completos e muito bons de ler. São escritos com técnicas que ajudam o leitor decorar os comandos através de exemplos bem humorados e figuras divertidas. No site da editora eles disponibilizaram parte dos livros em formato PDF. Dê uma olhada. É muito divertido!. Use a Cabeça - HTML com CSS e Use a Cabeça AJAX No site eu vou sempre colocar mais informações e outras fontes de pesquisa - de vários assuntos. Essa apostila não visa lucros... você não deve pagar por ela. Bons estudos!

10 10 1 História A internet nasceu em 1969, nos Estados unidos. Interligava originalmente laboratórios de pesquisa e se chamava ARPANET (ARPA: Advanced Research Projects Agency). Era uma rede do Departamento de Defesa norte-americano. Era o auge da Guerra Fria, e os cientistas queriam uma rede que continuasse de pé em caso de um bombardeio. Surgiu então o conceito central da internet: uma rede em que todos os pontos se equivalem e não há um comando central. Assim, se B deixa de funcionar, A e C continuam podendo se comunicar. O nome internet" surgiu bem mais tarde, quando a tecnologia da ARPANET passou a ser usada para conectar universidades e laboratórios, primeiro nos EUA e depois em outros países. Por isso que não há um único lugar que "governa" a internet. Hoje ela é um conjunto de milhares de redes no mundo inteiro. O que essas redes têm em comum é o protocolo TCP/IP (Transmission Control Protocol/Internet Protocol), que permite que elas se comuniquem umas com as outras. Então, a internet pode ser definida como: uma rede de redes baseadas no protocolo TCP/IP; uma comunidade de pessoas que usam e desenvolvem essas redes; uma coleção de recursos que podem ser alcançados através destas redes. Durante cerca de duas décadas, a internet ficou restrita ao ambiente acadêmico e científico. Em 87 pela primeira vez foi liberado seu uso comercial nos EUA. A "antiga" internet, antes da Web, exigia do usuário disposição para aprender comandos em Unix (uma linguagem de programação) bastante complicados, e enfrentar um ambiente pouco amigável (unicamente em texto). A Web fez pela internet o que o Windows fez pelo computador pessoal tornou acessível. O poder da WWW (World Wide Web - Rede de Alcance Mundial), reside em sua capacidade em associar uma determinada parte de um documento eletrônico a outro computador e a outro documento à milhares de quilômetros afastado. Essa conexão entre documentos é possível graças à utilização do protocolo de comunicação chamado HTTP (Hypertext Transfer Protocol - Protocolo de transferência de Hipertexto) e da linguagem HTML (Hypertext Markup Language Linguagem de Desenvolvimento de Hipertexto). O HTML nasceu em 1991 no CERN (European Council for Nuclear Research Conselho Europeu de Pesquisas Nucleares), na suíça. Seu criador, o inglês Tim Berners-Lee de 44 anos, a concebeu unicamente como uma linguagem que serviria para interligar computadores do laboratório e outras instituições de pesquisa e exibir documentos científicos de forma simples e fácil de acessar. Um desenvolvimento fundamental aconteceu em julho de 1992 com a liberação da biblioteca de desenvolvimento para WWW. Foi essa biblioteca que deu origem à construção de vários browsers WWW e servidores que tornaram a WEB viável. Um desses browsers foi o Mosaic, o primeiro browser multiplataforma que explorava completamente a capacidade de hipermídia da WEB. Desenvolvido por Marc Andreson, então do NCSA, o Mosaic foi que iniciou o crescimento explosivo da WEB. No outono 1993 tornou-se disponível a milhões de usuários, com a liberação das versões para Mac e Windows. Se por um lado novos browsers têm superado os recursos do Mosaic, por outro lado foi esse programa que se tornou sinônimo da WEB. Cada versão de HTML tem tentado refletir todo o consenso entre a indústria de software para que o investimento feito pelos autores de páginas não seja desperdiçado e que os seus documentos não deixem de se poder ler num curto período de tempo. O HTML tem sido desenvolvido com a visão que todos os equipamentos fossem capazes de usar a informação da Web, computadores com monitores de diversas resoluções e vários números de cores, equipamentos para input e output de voz, computadores com alta e baixa largura de freqüência e muito mais. Não desperdiçando o tempo (e custo) de serviço de um Webmaster que faz um site e logo-logo esse site deixa de funcionar - para isso é mantido o padrão. Com o HTML (e a facilidade dele), a internet se tornou uma imensa biblioteca, onde há de tudo. Tornou-se uma grande arena de conhecimento e diversão O HTML 4.0 estende com mecanismos para style sheets (CSS), scripting, frames (janelas), embedding objects, melhor suporte para texto com direção variável (esquerda, direita, e ambos), tabelas mais visualizáveis, melhorias nos forms, melhor acessibilidade para pessoas com incapacidades. 1.1 Evolução do HTML Primeira aparição do HTML HTML+ Algumas definições da aparência, tabelas, formulários HTML v2.0 Padronização para as características principais HTML v3.0 uma extensão do HTML+ entendido como um rascunho de padrão HTML v3.2 Netscape e Internet Explorer definem seus próprios padrões baseados nas implementações correntes JavaScript criada por Brendan Eich da Netscape como uma extensão do HTML para o browser Navigator v2.0. JavaScript é uma linguagem de roteiro (script) baseada em objetos e permite que sejam manipulados através de eventos dinâmicos que faltavam ao HTML: abertura de janelas de avisos etc CSS1 em dezembro deste ano é apresentada pela primeira vez a Folha de Estilo, criada para complementar a linguagem HTML. Possuía uma formatação simples e cerca de 60 propriedades HTML v4.0 São lançados os browsers Netscape v4.0 (agosto) e internet Explorer v4.0 (outubro) que apresentaram um conjunto de tecnologias (CSS, JavaScript/VBScript e DOM) que juntas disponibilizaram diversos recursos tornando o HTML dinâmico. Surge então o DHTML CSS2 em maio é lançado a segunda versão da Folha de Estilo que, além de incluir todas as propriedades do CSS1 ainda

11 11 apresenta por volta de 70 novas propriedades HTML v4.01 Alguma modificações da versão anterior XHTML v1.0 É criado e consiste de uma versão XML do HTML v Fundamentos da Linguagem HTML O Edit foi um dos primeiros (e mais simples) editores de texto. Caracteres ASCii puro, sem formatação alguma (mudança de cor de fonte, tabulações nem parágrafos), mas depois vieram os WordStar, OpenAcces, Carta Certa, Word. Cada um trazia suas inovações (suas possibilidades), que infelizmente não eram compatíveis entre si, ou seja: uma arquivo do Word não abria no Carta Certa. A incompatibilidade existia porque cada programa adicionava ao texto códigos próprios (para o controle dele e que os outros não conheciam), mas com o passar do tempo foram-se criando formas de transformar de um padrão para outro: de Word para Carta Certa, por exemplo. Para evitar que ocorram incompatibilidades como esta, na internet foi desenvolvido o padrão HTML. O HTML é uma linguagem de formatação criada para estruturar a página que será exibida na internet (no browser). Seus arquivos são de texto puro com códigos de marcação (as Tags). Cada Tag é um comando que será interpretado pelo browser (por exemplo, a tag <b> é o comando para transformar o texto em negrito). Ser em texto puro significa que os arquivos em HTML não contêm nada além de letras, números, sinais de pontuação e caracteres em geral que podem ser impressos. um arquivo HTML é também conhecido como página Web ou Home Page e são identificados com a extensão.htm ou.html, exemplo: index.htm. Os códigos de marcação de uma página HTML também são conhecidos como código fonte e para acessá-los basta posicionar o ponteiro do mouse sobre a página, clicar no botão direito e selecionar a opção [Exibir código fonte]. Muitos Webmasters não gostam que os usuários da internet fiquem xeretando no código fonte de sua home page porque lá está toda a sua criatividade, truques de macetes de elaboração da página (a questão de copyright ou direitos autorais), por isso é comum encontrarmos sites com bloqueio deste recurso A grande vantagem da linguagem HTML é que, por ela ser muito simples, não necessita de conhecimentos prévios de programação, por isso que muitas vezes é escolhida como a primeira Linguagem de Programação a ser aprendida por uma pessoa. Outro fator é o de não precisar de um editor específico, qualquer um serve (o Bloco de Notas e o Vi, por serem texto puro, são excelente para isso), mas existem editores exclusivamente HTML, os WYSiWYG (What You See is What You Get - O que você vê é o que você tem). Estas ferramentas foram desenvolvidas para facilitar a vida do Webmaster, porém, como tudo na Rede está em fase de transição, estes editores ainda deixam muito a desejar tanto na apresentação de novos recursos do HTML (que normalmente levam tempo para serem incorporados aos editores), como também na possibilidade de acontecerem incompatibilidades do editor para com a linguagem. Quando isso acontece o Webmaster (que conhece a Linguagem HTML), simplesmente entra no código fonte e "faz na mão", pois não tem como o browser não cumprir uma ordem direta. Entrar no código fonte para suprimir as redundâncias e os caracteres de controle dos editores ("sujeiras do código") é um grande artifício, principalmente para diminuir o tamanho do arquivo. Sabendo HTML se ganha independência para criar, usando a criatividade, e sem depender dos recursos do Editor HTML que se estaria usando. 1.3 Os Nomes dos Arquivos HTML não faz distinção entre letras maiúsculas (caixa alta) e letras minúsculas (caixa baixa). Tanto faz escrever <font> como <FONT>. Porém o servidor onde a página estiver hospedada (ou o sistema operacional, caso a página esteja no seu próprio computador) diferencia letras minúsculas e maiúsculas, e se criar um link para um arquivo chamado apostila.htm e ele estiver com o nome Apostila.htm, o servidor simplesmente não irá encontrá-lo. É por isso que muitas vezes o servidor retorna com uma mensagem de "Arquivo não encontrado". Os nomes não devem conter mais que 32 caracteres nem espaços em branco (use o símbolo _ para substituir o espaço em branco), assim, ao invés de nomear o arquivo "pagina um.html", nomeie como "pagina_um.html" O ponto final deve ser usado uma só vez para separar a extensão (de três letras) que classifica o arquivo. Não use pagina..html, use pagina.html para o nome do arquivo. Os nomes de arquivos não devem conter caracteres, tais como: acentos, cedilha, pontuações, sinais de maior e menor, pipe, trema, e comercial, asterisco, parênteses, chaves etc. use somente números, letras e underline (o _) 1.4 A Lógica LIFO O HTML é uma Linguagem de Marcação., onde se insere marcações (tags), na forma de elementos HTML no conteúdo da informação que será publicada. As marcações informam ao browser como formatar o conteúdo (em Cabeçalhos, Parágrafos, Listas e Tabelas) e onde inserir links em hipertexto e imagens e outros Objetos. As tags são delimitadas entre os sinais de menor "<" e maior ">". A maioria das tags funciona em dois tempos, ou seja, tem que se especificar onde começa e onde termina, por exemplo: <tag>texto</tag>, onde o sinal "/" significa o fim da atuação da tag. Nunca se deve 'embaralhar' as tags, elas podem vir uma dentro da outra, porém a que começou primeiro tem que necessariamente terminar por último, assim:

12 12 <tag1> <tag2> <tag3> texto </tag3> </tag2> </tag1> Nunca misture a seqüência, como por exemplo: <tag1> <tag2> <tag3> texto </tag2> </tag1> </tag3> isso segue a lógica LIFO (Last in, First Out - O último aberto deve ser o primeiro a ser fechado). Nem todas as tags necessitam ser terminadas. A tag que significa linha em branco não necessita de fim, assim como também a tag de barra horizontal. Como não são todas as tags que são relacionadas com textos, a tag que significa imagem não necessita de terminação e nem se relaciona necessariamente com texto. Uma tag é formada por comando, atributo e valor. Os atributos com seus valores modificam os resultados default dos comandos. 1.5 O Arquivo HTML Básico O documento HTML normalmente possui extensão.htm ou.html. Existe uma tag que identifica o documento como sendo HTML, é a <html>, que necessariamente é a primeira que aparece no texto, e sua terminação </html> é obviamente a última. em seguida definese o cabeçalho com <head> e </head> Dentro do cabeçalho podem existir diversas outras tags específicas e scripts em diversas linguagens, porém o que sempre existe é a definição do título, com <title> e </title>. Este título é o que irá aparecer na barra superior da janela do browser, junto com o nome do mesmo. Fora do cabeçalho, porém dentro das tags <html>, existe o "corpo" definido por e e aonde vai o "corpo" do site. Estas são as tags básicas de todo arquivo html. <html> <head> <title> </title> </head> </html> <! <! <! <! <! <! <! <! início do código html --> cabeçalho --> título --> final do título --> final do cabeçalho --> corpo do site --> final do corpo do site --> final do código html--> 1.6 O Arquivo index.htm Normalmente, o arquivo index.htm é o arquivo default dentro de um diretório. Quando indicamos um endereço (link) e não especificamos um arquivo dentro de um diretório, o browser procura pelo arquivo index.html. Se esse arquivo não existir, o browser apresentará uma listagem dos arquivos contidos naquele diretório, o que pode não ser nosso desejo. Por exemplo, o endereço de um site pode ser Se digitar no browser somente o browser procurará naquele servidor ("meusite.com.br") o arquivo index.html dentro do diretório "meu_diretorio" mesmo que eu não tenha especificado isso quando eu digitei o endereço. Porém, se o arquivo index.html tiver sido deletado ou for inexistente, o browser não abrirá nenhum outro arquivo, mas exibirá uma lista de todos os arquivos e diretórios contidos no diretório "meu_diretorio".

13 13 2 Elementos Estruturais <html atributos>... </html> É o comando de abertura e fechamento do documento HTML. Todos os demais comandos devem ser envolvidos por ele. version= "versão" informa a versão do HTML usado. lan="idioma" <html lang="en-us"> O corpo do arquivo... </html> No exemplo acima estou declarando que o arquivo HTML está no idioma inglês Americano. Os idiomas diferem de muitas maneiras quanto à aparência impressa: tipos de caracteres, fluxo direcional e uma infinidade de peculiaridades principalmente nos idiomas orientais. dir= "rtl ltr" Determina a direção do fluxo do texto: RTL da direita para a esquerda, Ltr da esquerda para a direita. <html lang="he" Dire="RTL"> Essa é uma página formatada para o Hebraico. </html> rtl (observe que a barra de rolagem vertical passou para o lado esquerdo): Visualização dir.= "Ltr" <head atributos>... </head>

14 14 Contém o cabeçalho do documento HTML também conhecido como Meta Tag (informações sobre o documento para classificação e indexação dele). Elas não aparecem na página visualizada. <html> <head> <title> Apostila de HTML </title> <link rev=made href="mailto:"> <meta name= "author" content= "Ana Carolina Schneider da Silva" > <meta name= "keywords" content= "HTML, WWW, tutorial, comandos, programação" > <meta name= "description" content= "Apostila de HTML com comandos". básicos e avançados ">". <meta name="language" content="portuguese"> <meta name="robots" content="all, follow"> </head> Este é um exemplo de corpo do site para mostrar que só o que está aqui vai aparecer para nosso caro internauta!! </html> Visualização (observe que as informações estão somente no código): <body atributos>... Contém o corpo do documento HTML, a parte que aparece na área de visualização do browser. Os atributos alteram a aparência. background= "URL" Contém a URL (localização) da imagem que cobrirá o fundo da área de visualização do documento se repetindo para cobrir toda a tela (tiling ou lado-a-lado). Atenção para cores fortes: isso não poderá impedir a leitura do texto. <html> <body background="imagens\folha.jpg"> Esse é o body - o conteúdo do seu site... e as figuras aqui atrás são o background e não aparecerão quando o internauta imprimir o site; </html>

15 15 bgcolor= "#rrggbb" ou "nome" indica um número em hexadecimal ou um nome que define a cor de fundo. O nome é uma das 16 cores universalmente conhecidas (padrão VGA do Windows): aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white (branco), yellow. text= "#rrggbb" ou "nome" Cor de texto. O padrão é preto (text= "#000000"). <html> <body text="lime"> isso é um texto na cor lime... cuidado! Algumas cores podem *ofuscar* o internauta!!!! - esta que estou usando, por exemplo ;) </html> Visualização (cuidado com o uso inadequado das cores!!): link= "#rrggbb" ou "nome" Cor de texto do link, sendo que o padrão é azul (link= "#0000FF"). <html> <body link="red"> Essa é uma (outra) excelente revista para interessados em banco de dados (e é grátis!): <a href= "http://www.oracle.com/profitmagazine" > PROFIT </a> (ah! esse link (por padrão) estaria em azul) </html> cor do link em vermelho: alink= "#rrggbb" ou "nome" Cor do link já visitado (na hora que clico, muda a cor), o padrão é o vermelho (alink= "#FF0000").

16 16 vlink= "#rrggbb" ou "nome" Configura a cor do link ativo, sendo que a cor padrão é vermelho púrpura (vlink= "#800080"). hover= "#rrggbb" ou "nome" Cor do link quando o cursor estiver sobre ele. bgproperties= "fixed". Mantém o papel de parede fixo no fundo da tela, impedindo que o ele role junto com o conteúdo da página. <html> <body bgproperties="fixed" background="imagens\sky03.jpg"> Observe que mesmo movimentando AS BARRAS de rolagem (tanto a vertical quanto a horizontal) a figura de fundo permanece fixa - ela não se move junto com o texto ************************* **************** **************************************** ***************************** ***************************************** ************************** ********************* </html> Visualização (depois de mover a barra): leftmargin= "n" Define o tamanho, em pixels, do espaço entre o início do texto e a borda esquerda da área de visualização do browser. <body leftmargin= "10" > Observe o espaço entre a margem e o início desse texto --- LEFTMARGIN=10 Visualização com leftmargin = 10:

17 17 Visualização com leftmargin = 100 topmargin= "n". Define o tamanho, em pixels, do espaço entre o início do texto e a borda superior da área de visualização do browser. <body topmargin= "50" > Observe o espaço entre o início desse texto e a parte SUPERIOR--- TOPMARGiN=50 scroll= "yes no auto" Este atributo define se a página terá as barras de rolagens horizontal e vertical. Onde "yes" Sempre apresentará as barras mesmo que a página não precise, "no" NUNCA apresentará as barras mesmo que a página precise e "auto" apresentará as barras automaticamente caso a página venha a precisar delas. No exemplo a seguir configurei SCRolL= "no", isso é, ele irá apresentar uma página sem as barras.

18 18 3 Elementos do Cabeçalho <script >...</script > status= "mensagem" Exibe uma mensagem que aparece na barra de status (barrinha no canto inferior esquerdo). Pode-se alterar essa mensagem determinando entre os parâmetros <script> status= "..." </script> a mensagem que quer que apareça. Pode-se acentuar normalmente!!! <html> <script> status= "isso é um exemplo de mensagem na barra de status" </script> </html> defaultstatus= "mensagem" Mostra uma mensagem quando nenhuma outra está sendo exibida. Alterando o Formato do Cursor Basta acrescentar o parâmetro style= "cursor:tipo_do_cursor". ao comando href, e quando colocar o mouse sobre o link, o formato do cursor se modificará.

19 19 Usando um Arquivo como Cursor cursor:url(...)

20 20 especifica um arquivo.ani a escolher. Por exemplo com o arquivo meu_cursor.ani. <a href= "meu_link.htm" style= "cursor:url (meu_cursor.ani)" > Aqui esta um link </a> Para mudar definitivamente um cursor de uma página basta usar a classe de estilo inserindo body {cursor:url(... )} entre as tags <head>... </head>. Este cursor só irá funcionar nesta homepage, de modos que, quando você clicar num link ou fechar a página ele voltará ao cursor normal configurado em seu sistema operacional. No exemplo abaixo, o cursor default da página (quando não estiver sobre um outro link definido) será o cursor progress. <html> <head> <style type="text/css"> body {cursor:progress} </style> </head> <a href="historia.htm" > Historia </a> </html> Anexando Objetos ao Cursor Deve-se tomar cuidado ao usar este tipo de efeito porque ele pode acabar irritando o internauta que ao movimentar o cursor tem esse objeto atrapalhando ou distraindo sua atenção. Para vincular um arquivo de imagem ao cursor, de modo que essa imagem o acompanhará, fazemos assim: Entre <head> e </head> colocamos o código javascript a seguir: <head> <script type="text/javascript"> function cursor(){ trail.style.visibility="visible" trail.style.position="absolute" trail.style.left=event.clientx+10 trail.style.top=event.clienty } </script> </head> Depois colocamos o parâmetro onmousemove= "cursor()" na tag, ficando assim <body onmousemove= "cursor ()" >... Por último colocamos dentro do corpo do documento (entre e ) a linha que identificará a figura que se movimentará com o cursor e seu tamanho. <img id="trail" height="64"> style="visibility:hidden" src="imagens\minha_imagem.gif" width="64" Todo o código ficará assim: <html> <head> <script type="text/javascript"> function cursor(){ trail.style.visibility="visible" trail.style.position="absolute" trail.style.left=event.clientx+10 trail.style.top=event.clienty } </script>

21 21 </head> <body onmousemove="cursor()"> <img id="trail" style="visibility:hidden" src="imagens/minha_imagem.gif" width="64" height="64"> </html>

22 22 4 Links e Imagens O termo hypertext é definido por "texto que tem link para outros textos".sendo assim o que caracteriza a estrutura HTML é a sua propriedade de se "ligar indefinidamente a outros documentos". O link é um canal, uma porta de conexão com outra página, possibilitando a interação de um site com outros sites existentes. Os links podem ser relativos, absolutos, internos e externos Link (ou hiperlink) é um termo inglês que quer dizer "ligação" e sua função é ligar dois documentos. O link relativo não especifica o caminho completo do endereço do arquivo, já o link absoluto sim. Por exemplo aqui está o link relativo que direciona para o arquivo de exemplo_de_link.html, que está no mesmo diretório e na mesma máquina do arquivo que o chamará. <html> <a href="exemplo_de_link.html"> isso aponta para o arquivo exemplo_de_link.html </a> </html> Porém o seu endereço absoluto seria: <html> <a href="c:\ana\exemplo_de_link.html"> isso aponta para o arquivo exemplo_de_link.html </a> </html> Mas como o arquivo exemplo_de_link.html, onde quero chegar, está no mesmo diretório do site que está chamando-lhe, não precisa todo o trabalho de digitação, apenas o nome do arquivo já basta. O link absoluto é usado para localizar arquivo que está num servidor (ou diretório ou máquina) diferente, por isso seu endereço tem que estar completo. Links Internos e Externos O Link interno é aquele que liga dois pontos em uma mesma homepage. O Link Externo é aquele que cria uma ligação entre homepages diferentes em locais diferentes e, por isso, é um link absoluto (tem que possuir o endereço completo). <a atributos>... </a> uma âncora é um ponto de referência que marca o destino de um link interno. As âncoras criam pontos de ligação entre todos os tópicos abordados, organizando sua estrutura e com isso otimizando sua navegação. Por exemplo, quando se cria um artigo com índice e todo o seu conteúdo está na mesma página, podemos fazer com que cada ponto do índice seja um link para o parágrafo exato (da mesma página) ao qual esse item diz respeito. Para definir um link, utilizaremos o par de tags <a>.. </a>, cujo "A" vem de "Anchor" ("âncora" em inglês). Quando numa página necessito colocar um link para uma palavra (ou parágrafo) no final dessa página, faz-se necessário colocar uma marcação (uma âncora) nesse destino para que o link o encontre. Portanto, um link possui dois comandos distintos: (<a href= "..." >, comando de partida e <a NAME= "#..." > comando de chegada) que possibilitam: saltos para pontos diferentes em uma mesma página ou saltos para pontos de uma página diferente mas que se encontra no mesmo diretório da página que a chama. href= "..." De Hypertext REFerence ou referência de hipertexto. informa a URL, que pode ser um documento HTML, uma imagem ou outro tipo de recurso. Esse é um exemplo de link para outro site de HTML: <html>

23 23 <a href="http://www.icmsc.sc.usp.br/manuals/html/index.html"> Tutorial HTML ICMC-USP </a> </html> name= "..." Este atributo estabelece o ponto de chegada (destino) nos saltos interligados do link. Esse exemplo coloca a frase (o link) que quando clicar o levará para onde coloquei a âncora (entre <a name= "..." > e </a>). <html> <a href="#imgreduzidas"> Clique aqui e chegue ao destino </a> <br><br> isso seria um texto muito grande <br> isso seria um texto muito grande<br>isso seria um texto muito grande<br>isso seria um texto muito grande<br>isso seria um texto muito grande<br>isso seria um texto muito grande<br>isso seria um texto muito grande<br>isso seria um texto muito grande<br>isso seria um texto muito grande<br>isso seria um texto muito grande<br>isso seria um texto muito grande<br>isso seria um texto muito grande <br><br> <a name="imgreduzidas"> DESTINO!!!!!!!! </a> </html> Quando abre o site: Depois que clica no link e vai parar na âncora:

24 24 target="_blank", "nome" ou "_top" Especifica uma janela ou quadro que receberão a página ou recurso referenciado. Se target="_blank", a página será aberta em uma nova janela do browser. <html> <head> </head> <a href="2.html" target="_blank"> Link para 2.html </a> </html> target="nome" a página será aberta dentro de um frame que possua o tal nome. target="_top", a página será aberta sobre a mesma janela do browser, ignorando qualquer organização de frames. title="descrição" Apresenta um quadro com a descrição do link quando o mouse é posicionado sobre ele. <html> <a href="2.html" title="isso aponta para a pagina 2.html"> Link para 2.html </a> </html>

25 25 style=text-decoration=: " " Este é o link tradicional, que você já conhece: Ele, geralmente, se apresenta na cor azul e possui um sublinhado. <html> <a href="http://www.oracle.com"> Oracle - uma grande empresa que também usa Linux </a> </html> :) Pode-se omitir esse sublinhado inserindo o seguinte parâmetro style="text-decoration:none" <html> <a href="http://www.oracle.com" style="text-decoration:none"> Oracle - uma grande empresa que também usa Linux :) </a> </html> No exemplo acima se tira o sublinhado de um link específico, para fazer o mesmo com todos os links da página basta inserir estes parâmetros em qualquer lugar da página entre <body...> e <html> <style type="text/css"> a:link {text-decoration:none} a:visited {text-decoration:none} a:active {text-decoration:none} </style> <a href="http://www.oracle.com" > PostgreSQL - Outro excelente SGBD - esse é free! </a> </html> :) (observe que não tem parâmetro dentro da tag <a href> do link e que mesmo assim ele mão está sublinhado) Link Que Muda o Cursor Quando você sobrepõe um link com o cursor ele muda a seta para uma mãozinha, esta é a condição default. Pode-se escolher qual figura de cursor deve aparecer em determinado link. Nos exemplos abaixo o primeiro link terá o cursor HELP (que apresenta uma seta com a interrogação) e o segundo o cursor de espera (com a ampulheta). <html> Visite um excelente site brasileiro sobre informática, principalmente hardware -

26 26 <a href="http://www.clubedohardware.com.br" style="cursor:help"> Clube do Hardware </a> <br><br> <a href="http://www.apostilando.com.br" style="cursor:wait"> Apostilando.com.br - ótimo site para download de apostilas </a> </html> (Observe que a frase que coloquei informando o destino do link está fora de <a href> e </a>, por isso que o link só é o nome do site. No segundo link toda a frase está entre as tags <a href> e </a>, por isso toda ela está em azul e toda ela é link). onmouseover=" " O link automático consiste naquele que abre espontaneamente quando o mouse passa sobre ele, sem que seja necessário o internauta dar o clique. Sua sintaxe é simples: <html> <a href="2.html" onmouseover="parent.location='2.html'"> Passe o mouse aqui e irá para outro site mesmo sem clicar!!!! </a> </html> quando abre o site: Depois que passa o mouse sobre o link: Fazendo um link oculto Qual a utilidade de criar um link que ninguém possa ver? Bom, isso vai da sua imaginação. Você pode criar situações interessantes com esse recurso. imagine alguns links ocultos e automáticos numa homepage de estórias ilustrada que entram inesperadamente com um fundo musical. O internauta, ao mover o mouse sobre sua página entrará numa seção oculta, sem que ele entenda o que está acontecendo. A sintaxe do link oculto (e automático) é a seguinte: <html> Passe o mouse aqui no final dos pontinhos e vá para outra página... <a href="3.html"onmouseover="parent.location='3.html'" style="textdecoration:none"> </a> </html>

27 27 Quando abre a página: Depois que passa o mouse: Onde (no-break space) cria um espaço em branco que será a área de atuação do link. Para aumentar essa área basta aumentar a quantidade de espaços. Tem de se tomar cuidado, porque pode-se perder o controle da situação se tiverem muitos links ocultos, e o internauta pode pensar que o browser dele está com problema (ou algo parecido), e se irritar e abandonar sua página de vez. onclick="alert('...')" Através da função onclick="alert('...')" podemos inserir uma mensagem no link. Essa mensagem aparecerá entre o clique no link e a mudança da tela. Esse recurso é útil para mensagens de aviso em geral, pois a caixa de mensagem abrirá antes da página destino ser carregada. <html> <a href="2.html" onclick="alert('tchau... você está prestes a sair desse site e entrar em outro!')"> Clique aqui e vá para outro site </a> </html> Quando abre o site: Quando clica no link: Depois de clicar em "ok" (abre o site destino): mailto: Podemos acionar o programa de diretamente de uma página HTML usando uma variação do comando <a>, que usa a opção mailto no lugar da URL.

28 28 <html> <a href="mailto:"> Clique para me mandar um mail </a> </html> Se quiser que uma figura seja o link que acionará o seu programa de , coloque <img src="minha_figura.gif"> antes de </a> (minha_figura.gif é o nome do arquivo de imagem como esse pombinho). O atributo border="0" elimina a borda e deixa um acabamento mais apresentável em figuras com movimento. <a href="mailto:"> <img src="imagens\minha_figura.gif" </a> border="0"> Visualização depois de clicar na figura: Você pode enviar para múltiplos destinatários simplesmente colocando os endereços separados por vírgulas. Exemplo: <a Criando Links Para Download Para colocar uma relação de arquivos para o usuário fazer download, o jeito mais organizado é o seguinte: Primeiro, crie um diretório (pasta) chamada "download" no servidor onde sua homepage está hospedada (no local onde o seu site está), ali serão colocados os arquivos que serão disponibilizados. Depois, basta utilize a tag <a href> (a mesma tag utilizada para criar os links) e direcione os arquivos indicando sua URL (o caminho, tais como o nome do diretório e o nome do arquivo). Por exemplo, criei o diretório download e dentro dele coloquei o game Fooblillard3 <html> <a href="download\foobillard3.rar"> Clique aqui para download do game Foobillard 3.0 </a> </html>

29 29 Como o arquivo está zipado, ele pergunta se quero abrir (utilizando um aplicativo) ou salvar...se o arquivo fosse um vídeo, por exemplo, não estivesse compactado e eu tivesse um plug-in que o reconhecesse, ele seria automaticamente executado e a janela (figura acima) não apareceria. Compactar (zipar) os arquivos (e não simplesmente colocá-los para download) diminui o tempo de download (facilitando a vida do internauta). Abrir no Browser Arquivos de Outros Softwares Imagine que tenhas uma planilha do Excel (ou outro tipo de arquivo) para disponibilizar no seu site e não tens paciência de convertê-la para HTML... Faça com que esse arquivo (essa planilha) abra no browser, mesmo sem estar em HTML!!!!! Basta indicar o nome completo do arquivo e colocar o parâmetro target="window" para que o arquivo seja aberto em outra janela. Atenção!!!!! Mesmo que esse arquivo esteja sendo visualizado no browser, é necessário que o usuário tenha um software que reconheça arquivos com tal extensão. Por exemplo, o arquivo que vou disponibilizar é o dados.xls. Mesmo que ele seja aberto numa janela do browser, tenho que ter o Excel instalado na minha máquina (ou outro software que abra arquivos.xls) <html> <a href="download\dados.xls" target="window"> Veja uma planilha do Excel no seu browser </a> </html> Configurando a Página Inicial -

30 30 Página de Abertura Para fazer com que determinado site seja habilitado como a página inicial do usuário (a primeira página a ser carregada quando abrimos o browser), usamos o código a seguir (o browser pedirá uma confirmação para o usuário quando ele clicar no link). <html> <a href="#" unclick="this.style.behavior='url(#default#homepage)'; this.sethomepage ('anacarol.blog.br');"> coloque o site da disciplina como sua página inicial. </a> </html>

31 31 5 Imagens <img atributos> Não existe a terminação </img>. insere uma imagem no documento. utilizado dentro de: elementos de formatação de caracteres, listas, tabelas, formulários, links src="..." A URL da imagem é o único atributo obrigatório. LembrE-SE: A posição do comando img antecede o texto em todos os exemplos abaixo. align="top middle bottom left right" Alinha a imagem em relação ao texto pelo topo, meio, base (default), esquerda e direita, respectivamente. Exemplos: align="top": Alinha a parte de cima da imagem com a parte mais alta da linha. Causa falha de seqüência. <html> <img src="imagens\leaf6.jpg" align="top"> Alinha a parte de cima......e se continuar o texto, a linha de baixo fica muito distante da de cima. </html> align="middle": Alinha a base do texto com a linha média da imagem. Também causa falha. <html> <head> </head> <img src="imagens\sorriso.gif" align="middle"> Alinha a base do texto com a linha média da imagem. Quando o texto troca de linha, salta para a parte inferior da figura também causando uma falha de continuidade. </html> align="bottom": Alinha a parte de baixo da imagem com a base do texto. isso não causa descontinuidade. <html>

32 32 <img src="imagens\fnt14001.jpg" align="bottom"> frase fica na parte de baixo da figura &Eacute muito usada uma figura como letra capitular (como o "A" no início dessa frase), como em jornais e revistas. </html> align="left": Posiciona a imagem no canto esquerdo jogando todo o texto para a direita. Após o término da imagem o texto volta a ocupar a largura normal da página e ficando em baixo da figura. isso não causa falha de continuidade do texto. <html> <img src="imagens\raio.jpg" align="left"> O texto fica do lado Direito da figura, continua percorrendo toda ela e se a frase for muuuuuuiiiiito grande, termina em baixo dela. Esse é um jeito inteligente de usar figuras sem atrapalhar a leitura. </html> align="right": Alinha a imagem à direita forçando o texto a ocupar todo o lado livre a esquerda. É o contrário do exemplo anterior. <html> <img src="imagens\star.jpg" align="right">o texto começa do lado ESQUERDO e depois de percorrer toda a figura, ele termina de baixo dela, sem atrapalhar a leitura e sem deixar espaço vago. </html> Não existe um atributo em img que centraliza a imagem envolvendo-a com textos a sua esquerda e direita. Para isso temos que recorrer a tabela. Exemplo: <table> <td width="250" style="text-align:justify"> Texto lado esquerdo... <td width="150"> <img src="imagens\sol3.gif"> <td width="250" style="text-align:justify"> Texto lado direito... </table>

33 33 width="largura", height="altura" informa a largura e a altura da imagem, em pixels. Com esses parâmetros, o browser reserva espaço para a figura e mostra logo o texto. Ao colocar o sinal % após algum valor em "width", ele calculará esse valor (em porcentagem) em relação à largura da janela. <img src="imagens\mundo.gif" width="100%" height="80"> <img src="imagens\mundo.gif" width="45%" height="150"> border="valor" Permite criar e alterar o tamanho da borda ao redor da imagem, sendo que: border="0" oculta a borda.: <img src="imagens\brass.jpeg" <br> <img src="imagens\brass.jpeg" <br> <img src="imagens\brass.jpeg" border="0"> border="1"> border="5">

34 34 vspace="y" hspace="x" Cria um espaço entre a imagem e o texto que a envolve. Parece uma moldura invisível. <img src="imagens\2bois.gif" vspace="20" HSPACE="20" align="left"> Observe: ****************************** ****************** ************ ****************************** ****************************** ***** ************** *********** *********** ******************* ****************************** ********* *************************** Parece que essa figura tem uma margem (ou uma moldura) invisível! Visualização (hspace="20") <img src="imagens\2bois.gif" vspace="20" HSPACE="80" align="left"> Agora com HSPACE=80 ****************************** ****************************** ****************************** ****************************** ****************************** ****************************** ****************************** ************************************ (hspace="80")

35 35 alt="texto" É um rótulo que aparece quando posiciona-se o mouse sobre a imagem... muito útil quando o browser do internauta não permite exibição de imagens (ao menos a pessoa vai poder saber o que teria ali naquele lugar). <img src="imagens\brasil.gif" alt="bandeira do Brasil"> onmouseover, onmouseout="imagem" Estes dois atributos fazem com que, ao passar o cursor sobre um objeto, ele execute uma função pré-programada. Essa figura é um link para o site 2.html, mas quando passa-se o mouse sobre ela, ela modifica a barra de status do Windows, exibindo a frase: " Assim se modifica a barra de status". <a href="2.html" onmouseover="window.status="assim se status";return true;" onmouseout="window.status=''; return true;"> <img src="imagens\elefante.gif" name="imagem2"> </a> altera a barra de (com o mouse fora da figura) Com o mouse sobre a figura...: Criando Reduzidas um Diretório de Imagens

36 36 Visando diminuir o tamanho de seu site (e, assim, o tempo de transferência dele), auxiliando quem não tem banda larga, usa-se muito imagens reduzidas com link para sua correspondente em tamanho natural uma forma interessante de se fazer isso é: Primeiro, criar uma página HTML que contenha a figura em tamanho real. Segundo colocar na sua página a figura estipulando os parâmetros width="" height="", obviamente, deixando a figura menor do que ela realmente é, e fazer essa figura pequena ser um link para a página que contem a figura em tamanho real (grande). Página com figura pequena: <a href="janela.html"> <img src="imagens\janela.jpg" width="60" height="41" alt="ir para Janela.jpg"> </a> Página com figura em tamanho real (janela.html) <img src="imagens\janela.jpg" Visualização (figura em tamanho menor): Depois de clicar na figura pequena: Imagem de Baixa Resolução lowsrc="arquivo" Este atributo, do comando <img>, faz com o browser exiba uma imagem inicial, de baixa resolução, enquanto carrega a imagem definitiva. Logicamente para que a tática dê certo a imagem de baixa resolução deve ser bem menor que a definitiva. <img src="arquivo1" lowsrc="arquivo2"> A imagem de baixa resolução coloque em "arquivo2".

37 37 6 Elementos Especiais <applet>... </applet> Esta tag inclui um programa executável em Java na página, os applets Java, como são chamados. São programas de computador acionados pelos documentos em HTML. Os applets são transferidos a partir de um servidor Web para, em seguida, serem executados no computador do usuário. Os applets Java são multiplataforma, isto é, eles funcionam em PC, Macintosh, Sun, IBM ou Hewlett-Packard. Esse tipo de independência de plataforma tem sido a razão de seu maior sucesso. code="classe Java" informa o nome do arquivo executável que será carregado ou a sua URL completa. codebase="url base" informa o caminho para o arquivo executável citado em code. É obrigatório se não foi fornecida a URL completa em code. name="nome" Fornece um rótulo para o applet (opcional) align, alt, hspace, vspace, height, width idênticos aos atributos de mesmo nome de <img> Basta copiar o arquivo.class para o diretório onde está o arquivo HTML que irá exibir o efeito, depois insira no arquivo HTML os seguintes parâmetros: <applet code="meu_arquivo.class" width="310" height="42"> <param name="text" value="título"> <param name="fontname" value="arial"> <param name="bgcolor" value="cd853f"> <param name="fontstyle" value="b"> <param name="fontsize" value="30"> <param name="sleeptime" value="180"> </applet> cole esse código-fonte no arquivo HTML onde você quer que o efeito apareça. Seus parâmetros de configuração são o seguinte: width=310 height=42 é o tamanho da janela onde o texto está contido; text value especifica o texto que irá exibir o efeito; fontname especifica o tipo da fonte; bgcolor a cor de fundo; fontstyle o efeito (no nosso exemplo ela está em negrito "B"); fontsize o tamanho da fonte e finalmente sleeptime que determina o tempo de duração do efeito apresentado. Quando abre uma homepage que possui os aplicativos applets Java o arquivo é copiado automaticamente para o seu diretório de arquivos temporários. Para localizá-lo basta clicar em [iniciar], na barra de ferramentas do Windows e depois em [Localizar]. Digite *.class <encher>. O comando de busca irá apresentar uma relação de todos os applets que você foi adquirindo pelas suas jornadas na Web. O RainbowText.class estará entre eles. Basta copia-lo para o diretório de sua homepage e pronto. <param atributos> Fornece parâmetros para um applet. É utilizado dentro de: <APPLET> name="nome"

38 38 informa o nome do parâmetro (definido no applet). value="valor" informa o valor do parâmetro (definido pelo autor da página). <font atributos>... </font> Altera tamanho, tipologia e cor do texto marcado. Pode conter texto, formatação de caracteres e ser utilizado dentro de blocos, listas, tabelas, formulários. size="valor" ou "incremento" Altera o tamanho do texto. Pode ser através de um valor de 1, o menor, até 7, o maior (o padrão é 3, caso não seja especificado o tamanho) ou através de incrementos de -3 a +3. No exemplo abaixo cada letra está com um tamanho diferente, partindo do tamanho 7 em ordem decrescente, depois crescente, depois decrescente... <font size="7"> T </font> <font size="6"> A </font> <font size="5"> M </font> <font size="4"> A </font> <font size="3"> N </font> <font size="2"> H </font> <font size="1"> O </font> <font size="2"> D </font> <font size="3"> A </font> <font size="4"> F </font> <font size="5"> O </font> <font size="6"> N </font> <font size="7"> T </font> <font size="1"> E </font>

39 39 color="#rrggbb" ou "nome" Altera a cor do texto. Pode ser através do valor RGB (Red/Green/Blue) ou através de um dos 16 nomes padrão VGA do Windows. Os valores RGB estão na base hexadecimal (0 a 9, A, B, C, D, E, F). NOME PADRÃO CÓDIGO NOME PADRÃO CÓDIGO red ff0000 maroon lime 00ff00 green blue 0000ff navy yellow ffff00 olive aqua 00ffff teal fuchsia ff00ff purple white ffffff silver c0c0c0 black gray <font size="7" T </font> <font size="6" A </font> <font size="5" M </font> <font size="4" A </font> <font size="3" N </font> <font size="2" H </font> <font size="1" O </font> <font size="2" D </font> <font size="3" A </font> <font size="4" F </font> <font size="5" O color="red"> color="008000"> color="0000ff"> color="ab0125"> color="red"> color="008000"> color="0000ff"> color="ab0125"> color="red"> color="008000"> color="0000ff">

40 40 </font> <font size="6" color="ab0125"> N </font> <font size="7" color="red"> T </font> <font size="1" color="008000"> E </font> face="nome de fonte" Altera a tipologia do texto de acordo com o nome de uma fonte disponível no sistema local. Se a fonte não estiver disponível, não será alterada. <font size="7" T </font> <font size="6" A </font> <font size="5" M </font> <font size="4" A </font> <font size="3" N </font> <font size="2" H </font> <font size="1" O </font> <font size="2" D </font> <font size="3" A </font> <font size="4" F </font> <font size="5" O </font> <font size="6" N </font> <font size="7" T </font> <font size="1" E </font> color="red" face="monotype Corsiva"> color="008000" face="ms Sans Serif"> color="0000ff" face="courier New"> color="ab0125" face="timesroman"> color="red" face="arial Narrow"> color="008000" face="impact"> color="0000ff" face="georgia"> color="ab0125" face="verdana"> color="red" face="arial Black"> color="008000" face="century Gothic"> color="0000ff" face="garamond"> color="ab0125" face="tunga"> color="red" face="wingdings"> color="008000" face="sylfaens">

41 41 <br atributos> Break Line - Quebra de linha. Força o texto que o segue a iniciar na próxima linha. É utilizado dentro de: cabeçalhos, elementos de formatação de caracteres, blocos, células de tabelas, itens de listas. Esse é um texto muiiiiiiiiiiiiiiiiiiitoooooooooooooooooooooooo <br> longo por isso depois da palavra looooongo eu coloquei um br e vou colocar outro agora <br> agora ja passei para a outra linha. clear="left", "right", "all" Sem a opção clear simplesmente introduz uma quebra de linha. Com a opção clear=left, quebra a linha e desce até encontrar uma margem esquerda limpa. clear=right faz o mesmo em relação à margem direita e clear=all, desce até encontrar ambas as margens livres de figuras. <nobr>... </nobr> Esse comando evita que o texto seja quebrado em mais de uma linha, ou seja, o texto envolvido por <nobr>...</nobr> irá ter somente uma linha não importando a quantidade de palavras que ele contenha. <nobr> Esse é um texto longo mas como tem essa tag antes, ele não quebra de jeito nenhum, tendo que ficar rolando a página de um lado para o outro para conseguir ler... chato, n&atildeo? </nobr> <wbr> Word Break. indica ao browser onde o texto pode ser quebrado. Esta tag é usada em conjunto com <nobr>. <nobr>

42 42 Esse é um texto longo mas como tem essa tag antes, ele não quebra de jeito nenhum, tendo que ficar rolando a <Wbr> página de um lado para o outro para conseguir ler... chato, n&atildeo? </nobr> <map atributos>... </map > O formato de imagem mais usado na internet é o gif e o jpg. Eles foram adotados devido seu tamanho comprimido, otimizando o tempo de abertura das homepages que utilizam imagens, fotos ou figuras em gerais. Tais imagens podem ser mapeadas de forma que uma determinada área sua possa ser vinculada a uma âncora de acesso para outros links. Mapear uma imagem consiste em determinar as coordenadas da imagem que pertencem a uma área de link com pontos de ativação. Existem duas maneiras de se fazer isso. uma imagem é formada por pixels (pontos). Seu tamanho é dimensionado pelos eixos X (largura) e Y (altura). A imagem dos limões, abaixo, possui a dimensão de 81 x 66 pixels. Portanto suas coordenadas partem do canto superior esquerdo (0 x 0) e vão até o canto inferior direito (81 x 66). Para verificar a dimensão de uma imagem basta clicar sobre ela com o botão direito do mouse e depois selecionar Propriedades (no browser ou no Explorer, por exemplo), ali é apresentado várias informações sobre a imagem, entre elas sua dimensão. Mapear uma imagem consiste em informar ao browser que determinada área da imagem irá acessar outro link, por exemplo podese te ruma imagem onde cada parte dessa mesma imagem acessa um link diferente. name="nome_do_mapa" Rotula o mapa com um nome que pode ser referenciado por uma imagem através do atributo usemap. ismap indica que a figura é uma imagem mapeada (imagemap) controlada pelo servidor (o mapa é estabelecido por arquivo separado, no servidor). usemap="#nome_do_mapa" indica que a figura é uma imagem mapeada (imagemap) controlada pelo cliente (o mapa é estabelecido pelo elemento <map>, na mesma página HTML). #nome_do_mapa informa o rótulo do mapa <map> usado pela imagem. <center> <img src="imagens\lemon.gif" usemap="#meu_mapa" border="1"> <map name="meu_mapa"> <area shape=rect coords="0,0,40,33" href="outra_pagina.html"> </map> </center> Observe o comando img src="...", especificando o nome da imagem, com o parâmetro usemap="#...", especificando o nome do mapa, antecedendo o comando map name="...". Agora movimente o cursor sobre a imagem e observe que no seu primeiro 1/4 aparece a opção de âncora para outro arquivo HTML (outra_pagina.html).

43 43 <area atributos> Define coordenadas para imagens mapeadas. As coordenadas variam conforme o tipo da área a ser mapeada. A área do tipo circular possui duas coordenadas, uma para definir o centro do círculo e outra para definir o raio. A área retangular possui duas coordenadas, também, uma para o vértice superior esquerdo e outra para o vértice inferior direito. A área poligonal possui uma coordenada para cada vértice, conforme o tipo da poligonal. É utilizado somente dentro de: <MAP> Determinar as coordenadas de uma área quadrada ou retangular até que é fácil, o problema começa a complicar quanto tentamos definir as áreas circulares ou, pior, as poligonais de uma imagem qualquer, por exemplo temos uma foto de uma pessoa e queremos que quando clicamos na cabeça aponte para uma página, nos pés para outra e nas mãos para outra. Para isso temos diversos softwares shareware ou freeware que faz todo o trabalho matemático, como o Map This v1.31 (870Kbytes). shape="circ", "poly" ou "rect" Círculo, polígono ou retângulo, respectivamente. coords="coordenadas" Depende da forma: coords="x1, y1, x2, y2, x3, y3,..." definem os vértices em um polígono; coords="x1, y1, x2, y2" vértices opostos em um retângulo; coords="x, y, r" centro e raio de um círculo. href="url" informa a URL que deve ser carregada ao se selecionar a área. nohref Permite que a área selecionada não acione nenhum link. Editores de Áreas Mapeadas

44 44 7 Bloqueando a Cópia da Página Esses dois atributos são colocados dentro de. oncontextmenu="return false" Desabilita o menu que é acionado através do botão direito do mouse mesmo que a pessoa clique com o direito (para copiar e colar, por exemplo), esse, menu não abrirá. onselectstart="return false" O usuário não consegue selecionar o texto - botão esquerdo do mouse pressionado e arrastado sobre o texto. <!-- comentários... --> São anotações que só podem/devem ser vistas por quem for bisbilhotar o código fonte. Tudo o que for escrito entre o <!-- e o --> será ignorado pelo browser e não será mostrado na tela. Ele pode ser usado em qualquer lugar do documento. Outro comando com função similar é o <comment>...</comment>. utilize sempre comentários: são eles que localizam o programador dentro do código e não devem ser usados somente em outras linguagens de programação, mas em HTML também devemos adotá-lo! <html> <head> <!-- A seguir está o título da Página --> <title> Página com alguns comentários </title> </head> <!-- Aqui é o conteúdo da página que será exibido ao usuário, porém este comentário -obviamente, por ser um comentário- não será exibido --> <comment> isso também é um comentário, mas desta vez utilizei uma tag em vez dos símbolos!! </comment> Você está vendo PARTE do código HTML deste site... Para saber TUDO que contém nele, verifique o código fonte!!! <!-- Aqui terminou a parte visível do documento --> </html>

45 45 8 Formatação de textos e caracteres São elementos usados para destacar trechos de texto. Podem ser lógicos (sugerem uma utilização para o texto destacado: grifo, destaque, variável, trecho de código, etc.) ou físicos ( somente dão uma formatação específica para o trecho: negrito, itálico, etc) A ação dos físicos restringe-se à capacidade de visualização do browser (alguns podem não interpretar). Tanto lógicos quanto físicos podem conter: texto, elementos de formatação de caracteres, <a>, <img>, <br> e são permitidos dentro de: cabeçalhos, elementos de formatação de caracteres, <a>, <pre>, <p>, <li>, <dd>, <dt>, Elementos Lógicos <strong>... </strong> Destaque (geralmente negrito). <em>... </em> Grifo (geralmente itálico). <cite>... </cite> Citação (geralmente itálico) <var>... </var> variável (geralmente itálico) <samp>... </samp> Amostra (geralmente fonte de largura fixa) <kbd>... </kbd> Teclado (geralmente fonte de largura fixa) <dfn>... </dfn> indica definição de uma palavra (geralmente em itálico) <code>... </code> Quando se deseja mostrar códigos de programas em geral, e não se quer que o browser interprete tais códigos, usa-se esse tag (geralmente fonte de largura fixa).

46 46 <pre>... <pre> Permite que o texto apareça tal qual a gente o escreve (inclusive com as quebras de linha sem colocar o br. quando eu pular de linha ele pula também) <strong> Texto como strong </strong> <br> <em> Texto como em </em> <br> <cite> Texto como cite </cite> <br> <var> Texto como var </var> <br> <samp> Texto como samp </samp> <br> <kbd> Texto como kbd </kbd> <br> <dfn> Texto como dfn </dfn> <br> <code> Texto como code </code> <pre> isso é um texto com pre dei um monte de espacos e troquei de linha browser me mostrou tal qual ter colocado br </pre> e aqui eu e troquei de novo... e o eu escrevi - mesmo sem eu

47 47 Elementos Físicos <b>... </b> Negrito <i>... </i> itálico <tt>... </tt> Teletipo <u>... </u> sublinhado <strike>... </strike> Texto riscado <del>... </del> Texto riscado <s>... </s> Texto riscado <sub>... </sub> Texto subscrito (como os números de fórmulas químicas) <sup>... </sup> Texto Sobrescrito (como exponenciais matemáticos) <small>... </small> Texto menor <big>... </big> Texto maior o contrário de small

48 48 <blink>... </blink> Texto Pulsante Texto normal <br> <B> Texto como </b> <br> <i> Texto como </i> <br> <tt> Texto como </tt> <br> <u> Texto como </u> <br> <strike> Texto como </strike> <br> <del> Texto como </del> <br> <s> Texto como </s> <br> Texto normal e <sub> texto como </sub> <br> Texto normal e <sup> texto como </sup> <br> <small> Texto como </small> <br> <big> Texto como </big> <br> <blink> Texto como </blink> B i Ti u strike del S sub sup small big blink

49 49 Pode-se usar vários comandos se formatação ao mesmo tempo, mas sempre a primeira tag a ser aberta é a última a ser fechada ;) Você também pode usar vários comandos de formatação ao mesmo tempo sobrepondo-os, sempre seguindo a lógica LIFO, isto é: A primeira tag a ser aberta, é a última a ser fechada <b> <i> <u> Este texto está com bold, itálico e sublinhado. </u> </i> </b> <br> <tt> <strike> Este texto está com teletipo riscado. </strike> </tt> Objetos em movimento: marquee Propriedade que possibilita o efeito de rolamento de um objeto (texto, quadro ou imagem) para a esquerda ou direita, para cima ou para baixo como também define sua velocidade. A sintaxe é a seguinte: <marquee atributo="efeito"> objeto </marquee> align="top", "middle", "bottom" Alinha o texto pelo topo, meio e inferior, respectivamente. behavior =scroll, slide, alternate Scroll inicia o texto aparecendo de um lado e segue até desaparecer a última letra do outro, slide inicia o texto de um lado e segue até a primeira letra tocar o lado oposto (bate e estaciona, não volta), então ele pára; e alternative onde o texto aparece de um lado e segue até tocar o lado oposto, então ele retorna (o bate-e-volta)

50 50 bgcolor="cor" Especifica a cor de fundo. Pode ser pelo nome da cor ou através de seu código RGB. direction=left, right, up, down Especifica a direção do texto, esquerda (default), direita, para cima e para baixo, respectivamente. height="número", %: Especifica a largura do painel. Se for um número ele especifica a quantidade de pixels se for % ele especifica a largura da janela do marquee em porcentagem. hspace="número" Especifica a largura em pixels das margens esquerda / direita. loop="número", -1 a infinite Especifica quantas vezes será executado a rolagem do texto, se o valor for -1 ou infinite, o texto rolará infinitamente. scrollamount="número" Especifica a quantidade de pixels que será usada para deslocar o marquee, ou seja, quanto maior for o valor, maior será a velocidade de deslocamento. scrolldelay="número" Especifica em milissegundos o tempo de deslocamento do texto. vspace="número" Determina em pixels a margem superior e inferior do marquee. width="número", % O número especifica a altura do painel, % especifica a altura em relação a janela em porcentagem. Texto centralizado em fonte tamanho 5 (<font size="5">) rolando numa faixa de 70% (width=70%) da tela entre duas barras <hr> : <center> <hr width="80%"> <marquee behavior="scroll" width="70%"> <font size="5"> <b> Não esqueça de fazer backup de seus arquivos. </b> </font> </marquee> <hr width="80%"> </center>

51 51 Agora um exemplo com o texto e imagem rolando (scroll) de baixo para cima direction="up e diminui a velocidade do movimento scrollamount="1" (bem devagar) de forma que ela irá correr lentamente como na abertura de um filme. <marquee behavior="scroll" direction="up" scrollamount="11"> <img src="imagens\3sun5a.gif" align="left"> <center> <i> Texto... </i> </center> </marquee> início da rolagem: Final da rolagem: Texto em movimento alternado (behavior=alternate) (bate-e-volta), da esquerda pra direita (left, default) e cor de fundo (bgcolor="dda0dd"). <marquee behavior="alternate" direction="left" bgcolor="dda0dd"> <font size="5"> <b>

52 52 <i> isso é ótimo para tontear alguém!!:d </i> </b> </font> </marquee> inicio: Bate: Volta: Combinação de marquee com rolagens em direções alternadas (um da direita para a esquerda e outro da esquerda para a direita). A porcentagem divide a tela ao meio! Se tirar a porcentagem fica cada um correndo em linha diferente!!! <marquee behavior="scroll" direction="left" width="50%" bgcolor="ffa500"> <font color="ff4500"> Agora marquees combinados </font> </marquee> <marquee behavior="scroll" direction="right" width="50%" bgcolor="ff7f50"> <font color="191970"> sodanibmoc seeuqram aroga </font> </marquee> início: Final: Aqui aumentei a velocidade de rolamento do texto com scrollamount="30". (Cuidado com a velocidade!!! Seu usuário pode não conseguir ler um "texto a jato" ;P

53 53 <marquee behavior="scroll" direction="right" scrollamount="30"> <font color="green"> <b> Vc disse que sabe ler rápido? :)) </b> </font> </marquee> início: Final: Rolamento de um texto com várias linhas (utilizando o comando <pre>) <marquee behavior="scroll" direction="left" scrolldelay="150" vspace="20"> <font size="3" color="#ff00ff"> <pre> <b> Agora bem devagarzinho... Você pode fazer efeitos de movimento com várias linhas também. </b> </pre> </marquee> início: Final: Rolamentos de texto dentro de uma tabela... Espero que tenha ficado didático ao menos para demonstrar que marquee também funciona em tabelas <center> <table border="5" bgcolor="#ffd700" width="450">

54 54 <td bgcolor="#00bfff"> <marquee behavior=scroll direction=left scrollamount="3"> <b> uma célula </b> </marquee> <td colspan=2 bgcolor="#9acd32"> <marquee behavior=scroll direction=left scrollamount="3"> <b> outra!! </b> </marquee> <td bgcolor="#f0e68c"> <marquee behavior=scroll direction=left scrollamount="3"> <b> mais uma!! </b> </marquee> <td colspan=4 bgcolor="#483d8b"> <marquee behavior=scroll direction=right scrollamount="3"> <font color="#ffffff"> isso é uma tabela com marquee </font> </marquee> </table> </center> início: Final: uma imagem com movimento! <marquee behavior="scroll" direction="left" <img src="imagens\cat_toilet.gif"> </marquee> scrolldelay="140" scrollamount="20"> início:

55 55 Fim: Página com uma janela (criada com a tag <iframe>) com o arquivo 2.html, sendo que a sua página (fora da janela) recebe um background (pingüins). <body background="imagens\pinguins2.gif"> <center> <iframe src="pagina_da_janela.html" width="650" height="90" scrolling="auto" frameborder="1"> </iframe> <br> Esse texto não está mais no frame, está no seu site mesmo!! </center>

56 56

57 57 9 Formatações Vamos aplicar formatações a títulos, cabeçalhos, parágrafos, textos espaçados, saltos de linha, endentação, centralização de objetos, formatação de diversos tipos de linhas.. <H1, H2,..., H6 atributos> </H1, H2,..., H6> São disponíveis seis níveis de cabeçalhos formando uma hierarquia descendente em tamanho. Os comandos de cabeçalho incluem uma linha antes e outra depois (não necessita colocar um <br> depois que termina a frase... ele pula a linha automaticamente). As tags <H1, H2, H3, H4, H5, H6> apresentam apenas 6 tamanhos de cabeçalho sendo o <H1> o maior tamanho. Podem conter: texto; todos os elementos de formatação de caracteres; <a>, <img>, <br>, etc.. é utilizado dentro de:, <form>, <blockquote>, <center>, <div> align="center", "left", "right" ou "justify" Alinha o cabeçalho no centro, à esquerda (padrão), à direita ou pelas duas margens, respectivamente. <h1 align="center"> h1 com align=center </h1> <h2 align="left"> h2 com align=left </h2> <h3 align="right"> h3 com align=right </h3> <h4 align="justify"> h4 com align=justify. ou seja, fica parelha a margem esquerda e a margem direita, como um bloco de texto ' quadradinho'. sem aquelas ' idas e vindas' como fica o caderno da gente.ah! isso se o parágrafo for muito grande, se for somente uma linha, fica só alinhadinho à esquerda, viu? </h4> <h5 align="center"> h5 com align=center </h5> <h6> h6 com align default - sem eu ter especificado </h6> style="propriedades"

58 58 atributo de <H...>.Altera a apresentação do cabeçalho (cor, fonte, tamanho, sublinhado, estilo) de acordo com uma lista de propriedades de estilo. Por exemplo. formatar a palavra "Computador" em azul marinho, fonte Helvetica (ou, na ausência desta, a fonte Sans-serif), com 2 cm de tamanho (pode-se usar pt,. in,. cm também ). <h3 style="color: navy; font-family: Helvetica, Sans-serif; font-size: 2cm"> Computador </h3> <p atributos>... </p> P (Paragraph) Parágrafo é usado para separar blocos de texto (geralmente com o espaço de uma linha entre eles). É opcional usar </p>. é utilizado dentro de:, <form>, <blockquote>, <center>, <li>, <dd>, <div> align "center", alinhamento pelo centro; "left" - alinhamento pela esquerda, (default),"right" - alinhamento pela direita ou "justify" (justificado) - alinha o texto pelas duas margens. O modo justificado permite dar ao parágrafo uma aparência mais profissional e organizada, já que os textos ficam alinhados de maneira uniforme entre as margens esquerda e direita. <p align="justify"> Para inovar é preciso olhar as coisas de uma nova forma, entender as pessoas, ter vontade de assumir riscos e trabalhar pesado. uma idéia não se transforma em inovação até que tenha sido largamente adotada e incorporada à vida das pessoas. Muita gente teme mudanças, portanto, uma peça-chave do processo é convencer os outros de que sua idéia é boa. Você pode simplesmente incorporar a ajuda deles e, fazendo isso, estará ajudando-os a descobrir a utilidade de sua idéia. </p> style="propriedades" formata o parágrafo (cor, fonte, tamanho, sublinhado, estilo) de acordo com uma lista de propriedades de estilo. Parágrafo na cor verde , fonte Verdana ou, na ausência dessa, a fonte Sans-serif em itálico com tamanho 11pt

59 59 <p style="color:006400; font-family: verdana, sans-serif; font-style: italic; fontsize: 11pt"> Se você quer inovar, precisa de três coisas: um certo grau de conhecimento na área; um desejo grande de fazer algo útil (seja para a sociedade ou para a indústria) e um objetivo. </p> No exemplo acima se está formatando apenas um parágrafo, os demais manterão a configuração padrão (conforme pode ver). Mas se o desejo for tornar essa configuração como formato padrão na homepage, então tem que colocar a sintaxe abaixo entre as tags <head>...</head> da página HTML, e então todos os parágrafos terão essa formatação. <head> <style type="text/css"> P { color: #006400; font-size: 11pt; } </style> </head> font-family: verdana, sans-serif; font-style: italic;

60 60 10 Linhas Horizontais <hr atributos> Horizontal Rule - Régua horizontal, usada como divisor de texto.. é utilizado dentro de:, <form>, <blockquote>, <pre>, <center>, <div> size="número" Espessura da linha em pixels. Aqui em baixo está <hr size="2"> Aqui em baixo está <hr size="4"> Aqui em baixo está <hr size="9"> Aqui em baixo está <hr size="20"> uma linha size=2 uma linha size=4 uma linha size=9 uma linha size=20 width="número" Largura da linha: número pode ser um valor absoluto em pixels ou uma percentagem em relação a largura da página (seguido de %). O default é aparecer centralizada a linha caso ela seja menor que 100% da largura da página. Linha com 20% da largura da página <hr width="20%"> Linha com 50% da largura da página <hr width="50%"> Linha com 80% da largura da página <hr width="80%"> Linha com largura de 10 pixels <hr width="10"> Linha com largura de 40 pixels <hr width="40"> Linha com largura de 90 pixels <hr width="90">

61 61 align="left", "center" ou "right" Se for menor que a largura da página, a linha pode ser alinhada pela margem esquerda, pelo centro ou pela margem direita, respectivamente. O default é centralizado. Linha com 50% da largura da página alinhada à direita <hr width="50%" align="right"> e esta com 75% da largura e alinhada à esquerda <hr width="50%" align="left"> noshade Especifica uma linha horizontal sólida, sem sombreamento (o default é a sombreada). Linhas sem sombreamento, e com size = 3, 8 e 12 respectivamente <hr noshade size="3"> <hr noshade size="8"> <hr noshade size="12"> color="#rrggbb" ou "nome"

62 62 Determina uma cor para a linha. O default é o cinza. Linhas com cores iguais a red, #00ff00 e #00ccff, respectivamente <hr noshade size="3" color="red"> <hr noshade size="5" color="#00ff00"> <hr noshade size="8" color="#00ccff">

63 63 11 Linhas Verticais Não existe uma tag que cria uma linha vertical (assim como <hr> para a horizontal), o que existe são alguns macetes que substitui esse comando. Primeiro recurso: Se pegarmos o comando <hr> (a linha horizontal) e configurar seus atributos width para uma largura muito pequena e size para uma altura muito grande temos uma linha vertical. um problema com esse recurso é que ele não funciona para linhas verticais maiores que size="100", ou seja, a linha terá no máximo um tamanho igual ao terceiro exemplo. <hr width="2" size="50"> <hr width="2" size="75"> <hr width="2" size="100"> Segundo recurso: aplicar o mesmo princípio (de afinar largura e alongar altura), mas em uma tabela. Os atributos são: border, cellpadding, cellpacing e height. As linhas não têm limite de tamanho. Cria-se, então, uma tabela com UMA linha e UMA célula - sem textos!!!!! Então teremos uma linha do tamanho que necessitarmos. <table border cellpadding="1" cellpacing="0" height="200"> </table>

64 64 <table border cellpadding="1" cellpacing="0" height="400"> </table> Agora vou acrescentar cor e espessura. <table border cellpadding="0" cellpacing="0" height="20" bgcolor="#006600"> </table> <table border cellpadding="1" cellpacing="1" height="30" bgcolor="#ff2400"> </table> <table border cellpadding="1" cellpacing="2" height="40" bgcolor="#0000c9">

65 65 </table> Os exemplos acima criam linhas verticais livres, isso é, desvinculada com qualquer objeto, mas podemos utilizar a tag <table> (tabela) para criar linhas vinculadas a objetos. Nos exemplos a seguir o texto irá determinar o comprimento da linha, e isso é o mais prático quando se quer uma linha vertical (faz uma tabela, onde uma célula vai estar com o texto e a outra célula não conterá texto e será tão fina que parecerá uma linha) Repare que para alterar a posição (direita/esquerda) da linha, basta alterar a posição da "célula-linha" para antes ou depois da célula que tem o texto. Para alterar cor e espessura das linhas basta configurar os atributos width e bgcolor da célula. Lembre-se: cada célula começa com e termina com!!!!! Cada linha da tabela começa com e termina com!!!! <table cellpadding="0"> <td width="2" bgcolor="#db7093"> <td width="200"> isso é um texto com uma linha do lado... aquela linha é uma célula da tabela e esse texto está em outra célula. A diferença é a espessura delas, certo? </table> Outro exemplo, mas com a linha um pouco mais grossa (lembre-se que o que diferencia é a largura das células... se quiser a linha mais grossa, deve-se aumentar a largura da célula que não recebe texto). <table cellpadding="0"> <td width="250"> Outro exemplo de texto com uma linha grossa à direita (essa linha é outra célula da tabela, mas à direita e mais fina que a célula desse texto aqui). <td width="7" bgcolor="008000"> </table>

66 66 Aqui está um exemplo de uma tabela com três células, sendo que a do meio recebe o texto e as outras duas (as de fora) possuem uma largura bem estreita (width=3) <table> <td width="3" bgcolor="purple"> <td width="280"> Aqui está um texto com linhas dos dois lados... Elas são duas células da tabela (uma antes e outra depois desta célula AQUI que tem este texto que você esté lendo!!!) <td width="3" bgcolor="purple"> </table> Outros Separadores de Texto O comando de inserção de imagens também pode ser usado como separador de texto, etc... Existem muitos arquivos gif ou jpeg criados exclusivamente para isso. Para inserir um arquivo de imagem usamos o comando <img src="arquivo.ext"> Os parâmetros width=número e height=número que altera a largura e altura da imagem pode causar alguns efeitos interessantes: <center> <img src="imagens\linha.gif"> </center> <center> <img src="imagens\vizinhanca.gif"> </center> <center> <img src="imagens\mabelt.gif"> </center> Outros exemplos de linhas:

67 67

68 68 12 Texto PréFormatado <pre atributos>... </pre> pre (Preformatted Text). digitar em um código HTML vários espaços em branco entre duas palavras, de nada adiantará, o browser só reconhecerá um. Para resolver isso é usando os tags <pre>...</pre>. O texto que estiver dentro deste elemento preservará a formatação original (o browser interpretará os espaços, retornos e tabulações). O texto pré-formatado é exibido em uma fonte de espaçamento fixo, como Courier, ou seja, cada letra vai ocupar sempre o mesmo espaço que a outra. Pode conter: texto, elementos de formatação de caracteres, <a>, <br>, <hr> e pode ser utilizado dentro de:, <form>, <blockquote>, <dd>, <li> width="..." Opcional. informa a largura em colunas. Note que as fontes ocupam tamanho fixo, mas o tamanho das letras depende do browser: <pre> através do comando pre em qualquer mostrado pode-se lugar da tela bem igual colocar texto que ele ao codigo fonte. sera inclusive com um moooooooonte de espacos e novas-linhas como esse exemplo aqui. Cuidado!!! Se fizer linha muito longa o usuário vai ter de usar a barra de rolagem horizontal do navegador porque ele não vai quebrar a linha sozinho!!!! </pre> Espaçamento Forçado

69 69 Non-Breaking Space.Ainda que o Webmaster adicione dez espaços com a tecla [space] várias vezes em seu código fonte, o browser irá considerar apenas um espaço. isso é muito chato quando descobrimos que o texto teima em não ficar no lugar indicado de uma coluna. uma forma de impor espaçamentos forçados é o conjunto de caracteres (non-breaking space). Repita 3 vezes se terá três espaços seguidos. 1000,00 <br> 903,00 <br> &nbsp 21,00 <br> &nbsp&nbsp 0,23 usando <p> aumentando o espaçamento vertical entre cada parágrafo... esse é um jeito de pular a linha sem usar <br>. O número de computadores de médio porte utilizados nas empresas com Linux em todo mundo vem crescendo rapidamente. <p> No último trimestre de 2003, sua comercialização totalizou 960 milhões de dólares: 63,1% superior às vendas no ano anterior. </p> <q atributo>... </q> É usado para citações curtas. Se parece com o blockquote. cite=url Especifica a fonte da citação.: <q cite=url> texto... </q>: <blockquote>... </blockquote> Destacar um bloco de texto aumentando a espessura de suas margens. Pode conter: listas, cabeçalhos, separadores, blocos, formulários, tabelas e estar dentro de, <form>, <dd>, <li>, <blockquote>, <pre> Observe o deslocamento das margens dir/esq. do segundo parágrafo que foi ajustado com o parâmetro:

70 70 Sobre JavaScript e Applets Java em sites: <br> Segundo John e Peter Kent em JavaScript para Netscape - Guia Oficial: <blockquote> O Javascipt enviará informações da página para a applet Java, e a applet Java poderá retornar algo para a página. </blockquote> Ou seja, o JavaScript é uma interface entre sua página e os Applets Java. Visualização observe o segundo parágrafo: <address>... </address> Bloco de texto destacado. utilizado para endereços e para assinar o documento. Veja um exemplo de address: <address> CTT - Maxwell Educacional <br> Porto Alegre - RS - Brasil </address> <div atributos>... </div> divide a página em blocos que podem ser alterados de acordo com características comuns. align="center", "left" ou "right" Alinha todo o bloco de acordo com a posição. style="propriedades" Altera a apresentação do conteúdo do bloco (cor, fonte, tamanho, sublinhado, estilo, espaçamento) de acordo com uma lista de propriedades de estilo. <div style="color: ; font-family: Comic Sans MS;font-size: 12pt;line-height: 14pt">

71 71 formata esse texto em verde, fonte Comic Sans MS 12pt (ou qualquer outra fonte sem serifa caso não tenha Comic Sans) e espaçamentos entre linhas de 14pt. </div> <center>... </center> Alinha um bloco de texto, cabeçalho, tabela ou imagem no centro da página. Pode conter blocos e ser utilizado dentro de, <form>, <blockquote> e <pre>. Figuras também podem ser centralizadas: <br> <br> <center> <img src="imagens\div82.gif"> </center> <acronym atributos>... </acronym> Esta tag indica que o conteúdo envolvido por ela é um acrônimo (abreviação formada pelas letras iniciais de uma frase.) title Este atributo apresenta a forma desabreviada do acrônimo, tornando desnecessária a utilização de textos explicativos sobre a abreviação (geralmente apresentada entre parênteses). Para programar em Java necessita do <acronym title = "Java Developer's Kit"> JDK </acronym> instalado.

72 72 13 Listas Uma forma de estruturar um documento HTML é a utilização de listas. Elas funcionam como um sumário, um menu ou um resumo do conteúdo do documento. Existem dois tipos de listas: não ordenadas (que contém uma série de itens sem numeração), e as ordenadas (que atribuem um número ou letra para cada elemento da lista). Não Ordenada <ul atributos>... </ul> ul (unordered List) é o comando usado para gerar lista não ordenada. Define os níveis (para identação). Ele deve envolver o primeiro e o último item da lista. Cada <ul> funciona como um toque na tecla tab, sendo que se coloco um <ul> dentro de outro <ul>, eu terei uma identação no meio da lista. Cada <li> é um tópico da lista. Não necessita </li>, mas pode ser usado! Pode conter <li> e poder ser utilizado dentro de: <li>, <dd>,, <form>, <blockquote>,, <center> type= tipo" tipo: disc, circle ou square. Estrutura de uma lista típica: <ul type="disc"> <li>lista NÃO ORDENADA: <ul type="square"> <li> Vegetais <li> Animais <ul type="circle"> <li> Vertebrados <li> invertebrados </ul> <li> Minerias </ul> </ul> (veja que a cada <ul> eu mudo o nível da identação) Ordenada <ol atributos>... </ol> ol (Ordered List) - Consiste no comando para a lista ordenada de itens com números, letras maiúscula ou minúscula e algarismos romanos. Pode conter: <li> e é utilizado dentro de: <li>, <dd>,, <form>, <blockquote>,, <center> type="tipo"

73 73 "tipo-de-numeração" descreve o formato de numeração empregado na lista. Pode ser de letras: type=a (alfabeto maiúsculas); type=a (alfabeto minúsculas); type=i (romanos maiúsculos); type=i (romanos minúsculos) ou type=1 (numeração -default). start="valor" "valor" é o número no qual se inicia a contagem de numeração. Por exemplo: start=8 iniciaria a contagem a partir de 8, viii, Viii, H ou h, dependendo do valor do atributo type. A cada novo <ol> reinicia a contagem! Estrutura de uma lista numerada típica: <ol type="1" START="8"> <li> Melancia <li> Repolho <ol type="a"> <li> Repolho-roxo <li> Repolho-verde </ol> <li> Goiaba <ol type="i"> <li> Goiaba-branca <ol type="1"> <li> Bem madura <li> Ainda verde </ol> <li> Goiaba-vermelha </ol> </ol> observe Bem os níveis de texto e como reinicia a contagem a cada novo <ol>! <li atributos>... </li> Li (List item), item de lista. O descritor de fechamento ( a tag </li> ) é opcional (em geral não é utilizado). Pode conter: outro nível de listas (<ul>, <ol>, <dl>), texto, elementos de formatação de caracteres, blocos, <a>, <img>, <br> e é utilizado dentro de <ul> e <ol> <dl atributos>... </dl> Listas de definições. NÃO possui numeração e nem caracteres de marcação (circulo, quadrado, bolinha) antes de cada tópico. Somente identa (usando um <dl> para cada identação e um <dt> para cada tópico e <dd> para definir cada tópico) Pode conter: <dt>, <dd> e ser utilizado dentro de: <li>, <dd>,, <form>, <blockquote>,, <center> compact opcional. Especifica uma formatação compacta (que utiliza menos espaço vertical)

74 74 <dt atributos>... </dt> Marca o termo a ser definido. O descritor de fechamento é opcional e em geral não é utilizado. Pode conter: texto, elementos de formatação de caracteres, <a>, <img>, <br> e é utilizado dentro de: <dl> <dd atributos>... </dd> Marca a definição do termo. O descritor de fechamento é opcional e em geral não é utilizado. Pode conter: listas, <ul>, <ol>, <dl>, texto, elementos de formatação de caracteres, blocos, <a>, <img>, <br> e é utilizado dentro de: <dl> <dl> <dt> varanda <dd> um cômodo de uma casa. <dt> Garagem <dd> um local onde se estaciona. <dl> <dt> Garagem coberta <dd> Local coberto, onde se estaciona. <dt> Garagem aberta <dd> Local aberto, onde se estaciona. </dl> <dt> Telhado <dd> Local onde o gato fica </dl> Visualização (observe que não existe marcação no início dos tópicos) Usando Figuras como Marcadores A combinação do comando <blockquote> com alguns gifs, pode criar efeitos de marcação elaborados, também. Nesse caso, a identação (como a tecla tab do teclado) será feita a cada <blockquote>. Para cada nível mais à direita, mais um <blockquote> deve ser aberto <blockquote> <img src="imagens\cafe.gif" > Capítulo i <br> <blockquote> <img src="imagens\pipoca.gif" > Parágrafo <br> <blockquote> <img src="imagens\pipoca2.gif"> Texto <br>

75 75 </blockquote> </blockquote> <img src="imagens\cafe.gif" > Capítulo ii <br> <blockquote> <img src="imagens\pipoca.gif" > Parágrafo <br> <blockquote> <img src="imagens\pipoca2.gif" > Texto <br> </blockquote> </blockquote> <img src="imagens\cafe.gif" > Capítulo iii <br> <blockquote> <img src="imagens\pipoca.gif" > Parágrafo <br> <blockquote> <img src="imagens\pipoca2.gif" > Texto <br> </blockquote> </blockquote> </blockquote> Observe que a cada novo <blockquote> é criado um novo nível

76 76 14 Tabelas Tabela surgiu pela primeira no HTML na versão 3.2 para melhorar o layout da página oferecendo recursos para posicionar seus textos e imagens semelhante as páginas dos jornais e revistas.basicamente uma tabela é composta por três tags: <table>...</table> Este é o elemento principal que estabelece os limites da tabela. Dentro dele estão todos os demais elementos da tabela;... Este elemento define a linha da tabela. Para uma tabela, por exemplo, ter 4 linhas este atributo deve ser escrito 4 vezes.;... Este define a célula da linha. Dentro das células podemos inserir o texto, imagens, formulários e até mesmo outra tabela. A seguir está um exemplo de uma tabela simples montada com estas 3 tags. Observe que para criar duas linhas tive que repetir o conjunto... duas vezes. Para criar 3 células em cada linha repeti o conjunto... 3 vezes em cada linha. E finalmente um conjunto de <table>...</table> envolvendo toda a estrutura. A barra "/" antes da tag representa o fechamento (fim) dela. <table border=1> Linha Linha Linha Linha Linha Linha </table> 1, coluna 1 1, coluna 2 1, coluna 3 2, coluna 1 2, coluna 2 2, coluna 3 Agora vamos nos aprofundar um pouquinho mais. <table atributos>... </table> table é o elemento principal que estabelece os limites de uma tabela. Ele pode conter atributos:

77 77 border="valor" Define uma borda para a tabela. Se este atributo não estiver presente, a tabela será exibida sem bordas ou linhas separando as células. Quando é especificado border sem nenhum valor, é criada uma borda de 1 pixel de espessura. <table> Célula sem borda </table> <table border> border = 1 </table> <table border="5"> border = 5 </table> cellpacing="valor" Controla o espaçamento entre as células de uma tabela ou torna as bordas mais grossas, se elas existirem. Valor absoluto em pixels. <table border cellpacing="3"> célula 1 célula 2 </table> <br> <br> <table border cellpacing="10"> célula 1 célula 2 </table> <br> <br> <table cellpacing="30">

78 78 célula 1 célula 2 </table> cellpadding="valor" Controla a quantidade de espaço entre o conteúdo da célula e suas bordas, estando elas visíveis ou não. Valor absoluto em pixels. <table border cellpadding="10"> célula 1 célula 2 </table> <table border cellpadding="30"> célula 1 célula 2 </table> <table cellpadding="50"> célula 1 célula 2 </table>

79 79 width="valor" e height="valor" Permite especificar a largura e altura da tabela, seja através de um valor absoluto em pixels ou através de uma percentagem da área da página. Para percentagem, utilize o sinal "%" após o número. Reduza a janela do browser e observe o efeito que isso causa aos dois exemplos acima. O exemplo 1 mantém o seu tamanho fixo, enquanto o exemplo 2 ajusta-se a % da janela reduzida. <table border width="60" height="40"> célula 1 célula 2 </table> <table border width="30%" height="30%"> célula 1 célula 2 </table> bgcolor="#rrggbb" ou "nome" Altera a cor de fundo da tabela ou apenas da célula conforme aonde ele for usado. Pode ser através do valor RGB ou através de um dos 16 nomes padrão VGA do Windows. <table bgcolor="blue">

80 80 célula 1 célula 2 </table> background ="diretório/nome do arquivo" coloca um arquivo de imagem como fundo da tabela ou da célula. Se o arquivo de imagem estiver no mesmo diretório do arquivo.htm onde a tabela é exibida você pode omitir o diretório no endereço do background. <table border background="imagens\confeti.jpg" height="80" width="200"> célula 1 célula 2 </table> bordercolor ="#rrggbb" ou "nome" Altera a cor das bordas da tabela. <table border bordercolor="#4682b4"> célula 1 célula 2 </table> <br> <br> <table border bordercolor="red"> célula 1 célula 2 </table>

81 81 bordercolordark ="#rrggbb" ou "nome" Altera a cor da sombra das bordas de toda a tabela ou de uma célula específica. <table border bordercolordark="#4682b4"> <td bordercolordark="#ff6600"> célula 1 célula 2 </table> <br> <br> <table border bordercolordark="red"> <td bordercolordark="#000000"> célula 1 <td bordercolordark="#000000"> célula 2 </table> Visualização (compare com o outro exemplo, onde só tinham as ocres, e não as sombras) bordercolorlight ="#rrggbb" ou "nome" Altera a cor da luz das bordas de toda a tabela ou de uma célula específica. <table border bordercolorlight="#4682b4"> <td bordercolorlight="#cc33cc"> célula 1 célula 2 </table> <br> <br> <table border bordercolorlight="red">

82 82 célula 1 célula 2 </table> <tr atributos>... table row - Linha de tabela. Todas as células são dispostas em linhas. O conjunto... deve se repetir conforme o número que linhas que se deseja criar. table row pode conter os seguintes atributos: align="left, right" ou "center" Controla o alinhamento horizontal do conteúdo das células na linha. Para habilitar align configurei espaçamento horizontal da tabela com o width="300", para que haja o deslocamento horizontal do texto. <table border width="300"> <tr align="center"> Texto no Centro da linha </table> <br><br> <table border width="300"> <tr align="right"> Texto todo à direita </table>

83 83 valign="baseline, bottom, top" ou "middle" Controla o alinhamento vertical do conteúdo das células na linha. Para habilitar Valign configurei o espaçamento vertical da tabela com height="100", para que haja o deslocamento vertical do texto. <table border width="180" height="100"> <tr valign="bottom"> Texto na base da linha </table> <br><br> <table border width="180" height="100"> <tr Valign="middle"> Texto no meio da linha </table> bgcolor="cor" Define a cor de fundo da linha envolvendo todas as células que estiverem nela. <table border="1" width="60%"> <tr bgcolor="ff4500">

84 84 Cuidado com as cores para <tr bgcolor="db7093"> o texto poder ser lido! </table> bordercolor="cor" Define a cor da borda da linha. bordercolordark="cor" Define a cor da sombra da borda da linha. bordercolorlight="cor" Define a cor da luz da borda da linha. char="caracter" Define o caracter de alinhamento da célula que pode ser um ponto, uma vírgula ou caracteres tais como "=", "/", ":", etc. No exemplo abaixo usei um ponto como caracter de alinhamento. charoff="número" Define o deslocamento do caracter de alinhamento da célula. Ah! Muito poucos browsers sabem interpretar esses parâmetros. <table> <colgroup align="char" char="." charoff="35%">

85 </colgroup> </table> table data <td atributos>... Célula de dados da tabela. Pode conter texto, listas, elementos de formatação de caracteres, blocos, arquivos de imagem e também outras tabelas. rowspan=número Especifica o número de linhas que a célula pode ocupar. O default é 1. é o famosos efeito "mesclar células" na horizontal <table border="1" width="60%"> <td rowspan=2 align="center"> Mesclada Normal Normal </table> colspan=número Especifica o número de colunas que a célula pode ocupar. O default é 1. <table border="1" width="60%"> <td colspan="2" align="center"> Celula 1 primeira linha Celula 1 segunda linha celula 2 segunda linha

86 86 </table> Agora a combinação entre as duas: <table border="1" width="60%"> <td colspan="2" align="center"> L1 C1 L1 C2 <td rowspan="2" align="center"> L2 C1 L2 C2 L3 C1 </table> align=left, right ou center Controla o alinhamento horizontal do conteúdo das células. <table border width="400"> <td align="right"> right - cuidado com a grafia <td align="center"> center <td align="left"> left </table>

87 87 valign=baseline, bottom, top ou middle Controla o alinhamento vertical do conteúdo das células. <table border width="140" height="100"> <td Valign="bottom"> bottom <td Valign="middle"> middle <td Valign="top"> top <td Valign="baseline"> baseline </table> nowrap Atributo Booleano. evita que haja uma quebra de linha dentro da célula (se incluído significa verdadeiro, senão falso). O termo booleano provém do nome do matemático inglês George Boole (1815 / 1864), criador da álgebra booleana. Este atributo, em conjunto com o atributo width, permite criar células com tamanho fixo. Assim quando o browser é redimensionado pelo usuário, as células terão sempre o mesmo tamanho ao invés de quebrar seu conteúdo em várias linhas. A sintaxe... <td nowrap width="200">......especifica uma célula de 200 pixels de largura cujo conteúdo não pode ter quebra de linha (text wrapping). Abaixo o código para criação de duas tabelas iguais, porém a última não tem o atributo nowrap. Esse efeito, então será visualizado quando a janela não estiver maximizada. <table border> <td nowrap width="200" align="center"> Esta é uma tabela comum... <td nowrap width="200" align="center"> com uma célula configurada <td nowrap width="200" align="center"> COM o atributo nowrap... </table> <br><br> <table border> <td width="200" align="center"> Esta é uma tabela comum... <td width="200" align="center"> com uma célula configurada <td width="200" align="center">

88 88 Sem o atributo nowrap... </table> Janela maximizada: E agora mais estreita (observe a diferença a segunda tabela não tem nowrap) width=valor Controla a largura da célula, seja através de um valor absoluto em pixels, seja através de uma percentagem em relação à largura da tabela. &nbsp = Espaço vazio <table border> <td width="10"> <td width="10"> width=10 <td width="80"> width=80 <td width="120"> width=120 </table>

89 89 bgcolor="#rrggbb" Define uma cor de fundo para a célula. No exemplo abaixo estou apresentando uma configuração de cores completa envolvendo table, tr e td. background="diretório/nome do arquivo" Define uma textura de fundo na célula. Quando eu coloco um background na tabela (ou na linha), as células daquela tabela (ou daquela linha) receberão (todas) aquele background, a não ser que eu defina um outro para cada uma delas. <table border background="imagens\menta.jpg"> <td background="imagens\sky.jpg"> aqui tem a figura sky.jpg <td background="imagens\papel.jpg"> e aqui a papel.jpg e aqui como não identifiquei, ela fica com o fundo da própria tabela (o menta.jpg) </table> Visualização (observe que a tabela tem o background menta.jpg. a primeira célula tem um outro (o sky.jpg) e a segunda célula tem o (papel.jpg), como não defini um para a terceira célula, ela recebe o da tabela o menta.jpg) bordercolor Altera a cor da borda de uma célula específica dentro da tabela. <table border=3 bordercolor="blue"> <td bordercolor="red"> célula 1 célula 2 </table> <br><br> <table border=5 bordercolor="purple"> célula 1 <td border =3 bordercolor="yellow"> célula 2 </table>

90 90 bordercolordark e bordercolorlight Têm a mesma função que estes atributos em <table> porém aqui eles são aplicados apenas em uma célula. Os exemplos já foram apresentados acima. Aqui está um tabuleiro. A tabela é definida assim: <table border="3" cellpadding="1"> E as linhas assim: <tr height="25"> Cada célula dentro de cada linha é assim (onde o bgcolor varia em white ou black) <td width="25" bgcolor="white"> <th atributos>... </th> title heading. Este comando especifica um título centralizado e em negrito para cada coluna. <table border > <th> texto negrito e no centro por causa da tag th </th> <th> linha 1 coluna 2 - tambem com a tag th </th> linha 2 coluna 1 linha 2 coluna 2 </table>

91 91 <caption atributos> </caption> Este elemento é usado para especificar uma legenda à tabela e sua tag deve seguir imediatamente após a table inicial. Só deve haver uma tag desse tipo na tabela. align=top, (default) ou bottom Controla a posição da legenda em relação a tabela. <table border> <caption align="top"> Legenda no topo </caption> <th> L1 C1 - Titulo 1 (com th) </th> <th> L1 C2 - Titulo 2 (com th) </th> L2 C1 (celulas normais com td) L2 C2 </table> Formatando grandes tabelas Vamos imaginar a seguinte situação: Quero criar uma tabela que possui muitas células, distribuídas em diversas linhas, sendo que algumas células terão uma formatação de cor e texto diferentes que as demais. Eu não posso configurar <table> porque, como falei, a células possuem formatações diferentes e não aceita formatação para células individuais. Nesse caso o jeito seria entrar em cada célula e inserir os parâmetros, célula por célula... Tudo bem, já fiz isso diversas vezes e com o auxílio do comando COPY fica até mais fácil. Porém quando a tabela é consideravelmente enorme, esse método deixa de ser adequado, pois o excesso de formatação além de ser trabalhoso deixaria o arquivo desnecessariamente "pesado". Para resolver este problema existem três tags criadas exclusivamente para essa finalidade: <thead>...</thead> formata o cabeçalho.

92 92 <tbody>...</tbody> formata o corpo. <tfoot>...</tfoot> formata o rodapé. Elas foram criadas exclusivamente para facilitar a formatação dos módulos da tabela. Vamos supor que a tabela abaixo é uma lista de preços de materiais enorme, com 80 itens!! A borda (em table) possuirá uma formatação diferente que o seu título, cabeçalho e rodapé, que por sua vez serão diferentes que o seu corpo. Configurar cada item do título, cabeçalho e rodapé até que seria simples, porém o corpo da tabela possui 240 células!!! Pois em cada item possuo 3 células e como são 80 itens (3 x 80 = 240). imagine acionar o comando COPY 240 vezes!! <table border width="350" bgcolor="cyan"> <!-- borda azul claro --> <thead bgcolor="gold"> <!-- parte de cima amarelo --> <td colspan=5 align="center"> Parte de cima da tabela </thead> <tbody bgcolor="purple" style="font-size:18"> <!-- titulos roxo--> <td width="25"> item <td width="150"> DESCRIÇÃO <td width="50"> QUANT. </tbody> <tbody bgcolor="pink" style="font-size:12"> <!-- corpo rosa --> 1) CD-RW R$3,50 2) Cartucho recarregado 17,

93 ) Caneta para quadro branco R$2,00 </tbody> <tfoot bgcolor="blue" style="color:#ffffff"> <!-- base da tabela em azul --> <td colspan=5 align="center"> Parte de baixo... ;) </tfoot> </table> Usando Tabelas para criar Colunas de Texto Uma forma de incrementar a apresentação de sua homepage é dividir o texto em duas ou mais colunas, estilo manchete de revista. Vou montar um exemplo com um texto formatado em duas colunas. Primeiro digite o texto em modo simples, sem qualquer formatação. Depois divida o texto exatamente no meio criando uma linha em branco entre o texto superior e o inferior (conforme o exemplo do texto em itálico, abaixo). O texto superior será a coluna direita e o inferior a esquerda. Agora vou inserir os parâmetros de tabela <table>, envolvendo os dois blocos de texto, superior e inferior. Entre eles irei inserir uma coluna intermediária com <td width="8%">, direi que essa linha possui um packground especial (as laranjas), só para identificar a linha e para separar uma coluna da outra usando essa coluninha especial. <table> <td width="20%"> Saiba o que fez Steve Jobs parecer um bom sujeito <td width="5%" background="imagens\laranja.jpg"> <td width="75%"> em 1976, a Apple começou a comercializar o Apple i por us$ 666 e logo nesse primeiro ano, as vendas alcançaram us$ 774 mil. Steve Jobs viu que estava na hora de ampliar a empresa, e para isso apelou para os empréstimos. Diz o financeiro (que emprestou o dinheiro) que ele era muito mal apresentado, se vestia muito mal, mas que só comia frutas, e isso o fez dar um voto de confianca e

94 94 efetuar o empréstimo para a apple. </table> Visualização (Observe que a soma de "width="20%" + "5%" + "75%" = 100% que é a largura da tela do seu monitor. A coluna do centro serve como um separador de texto.agora vou usar o mesmo exemplo para inserir imagens nas colunas. ) <table> <td width="48%"> <img src="imagens/ping.gif" align="left" vspace="6" hspace="10" border="2" > Essa figura e esse texto estão na mesma célula, viu? <td width=3pt bgcolor=gold> Aqui é outra célula! <td background="imagens\pipoca.jpg" align="left" vspace="6" hspace="10" border="2"> E isso aqui é para lembrar SÁBADO, ótimo dia para comer pipoca. </table> que amanhã é veja que a cada novo td uma nova célula é aberta. Repare que eu não determinei tamanho para a nova célula, portanto ela assume o resto da largura disponível. imagine o mesmo exemplo com figura de centro e o texto margeando suas duas laterais. Para isso vou criar mais dois blocos de tabela,com três divisões cada, e trabalhar com eles. Quando se cria uma tabela com mais de uma linha e com mais de uma coluna, os tamanhos de coluna (largura das células) da primeira linha é que definirão a largura das demais colunas, portanto, se o tamanho das células da primeira linha for 10, depois 20 e depois 70%, as outras linhas dessa mesma tabela também terão essas mesmas larguras de colunas. Para eu ter larguras diferentes de colunas, tenho que criar nova tabela (nem que a tabela tenha só uma linha). <table> <td width="48%"> Primeira célula da PRIMEIRA tabela. Esse vermelho aqui do lado é uma outra célula

95 95 <td width="1%" bgcolor=red> <td width="51%" background="imagens\margarida.jpg"> Aqui está a terceira célula - desta vez, com margaridas no fundo. </table> <table> <td width="25%"> Primeira célula desta SEGUNDA tabela. O baterista aqui do lado é a segunda célula desta tabela aqui <td width="50%"> <img src="imagens\bateria.gif" align="left" vspace="6" hspace="10" > <td width="25%"> Terceira e última célula desta tabela. </table> <table> <td width="48%"> Primeira célula da primeira linha. Aqui do lado tem outra célula - também poderí amos chamar de COLUNA. <td width="10%" bgcolor=00ff7f > <td width="48%"> Esta é a última célula desta linha. Veja que a largura das células da primeira linha vai ser a mesma largura da segunda linha mesmo que eu não defina largura na segunda linha <td > primeira célula da SEGUNDA LINHA. Aqui do lado tem outra célula <td bgcolor=pink > última célula dessa linha!!. </table> (repare que a ultima tabela tem 2 linhas, e que na segunda linha eu não especifico largura de celula porque será sempre as mesmas larguras da primeira linha da tabela).

96 96 Imagens, Tabelas Cores e Backgrounds em Alinhando três arquivos de imagem.gif. <table border> <img src="imagens\garfield.gif"> <img src="imagens\rosa.jpg"> <img src="imagens\martelando.gif"> </table> (observe que como nao defini a largura das celulas, elas se dispõe conforme o tamanho da figura veja também que o atributo "border" na tag table define que a tabela terá uma borda) Configurando border="0" (sem borda) e usando cellpadding="50" para aumentar os espaços entre as figuras temos os seguintes resultados: <table border="0" cellpadding="50">

97 97 <img src="imagens\garf.gif"> <img src="imagens\bola.gif"> <img src="imagens\borboleta.gif"> </table> Você pode inserir um texto do lado direito, esquerdo, ou, usando a tag <br>, (break line = quebra de linha), acima e abaixo da imagem. Você pode usar normalmente quebras de linhas e até linhas (<hr>) e formatações (<b>) dentro de uma célula. Aqui colocarei cellpadding (distância) = 10, compare com o exemplo acima (do Garfield), que o cellpadding é 50! <table border="0" cellpadding="10"> <img src="imagens\queijo.jpg"><br>um queijo... um chocolate <br> <img src="imagens\chocolate.jpg"> <img src="imagens\rosa.jpg">e flores...! </table> (repare que como não coloquei <br> depois da figura na última célula, o texto ficou do lado) Agora vamos inserir uma cor de fundo com o atributo bgcolor: <table border="0" cellpadding="10" bgcolor="#87ceeb"> <img src="imagens\magica.gif"> <br>abóboras!

98 98 O Sistema Solar <br> <img src="imagens\sistema.gif"> <img src="imagens\ramalhete.gif"> um ramalhete! </table> (observe que o fundo ficou azul e que "Abóboras" está escrito em baixo porque tem um <br> antes, e que "O Sistema Solar" está escrito em cima da figura porque entre o texto e a figura tem um <br>. Veja a distância entre os objetos com o uso do cellpadding = 10) inserindo um background. (figura como fundo) <table > <td bgcolor=ba55d3> <img src="imagens\pegadas.gif" <br> Esse fundo é uma cor (uso do bgcolor). <td background="imagens\pool.jpg"> Aqui e no cogumelo, eu uso o background (para ter figuras como fundo) <br> <img src="imagens\jacare.gif"> <td background="imagens\manta.jpg"> <img src="imagens\cogumelo.gif"> </table> Mais um exemplo de como se pode ter efeitos diferentes (usando figuras com movimento como fundo)uso do cellpacing="0" para

99 99 eliminar os espaços entre as células. <table border="0" cellpadding="20" cellpacing="0"> <td background="imagens\color.gif"> <img src="imagens\quadro.gif"> <td background="imagens\inch.gif"> <img src="imagens\dado.gif"> <td background="imagens\gota.gif"> <img src="imagens\cabeca.gif"> </table> Alguns gifs são ótimos para se colocar bem em cima da página (como enfeite)... e eles podem ocupar a largura toda da tela (são ótimos para sublinhas títulos, por exemplo). Esses gifs também podem ser colocados em tabelas (como no exemplo abaixo, onde dependendo da altura do texto ele vai repetir ou não a figura dentro da célula), mas tenha muito cuidado na hora de inserir textos em cima de figuras (o internauta pode ter dificuldade de ler). Gifs usados: Pisca (troca as cores das lâmpadas e "acende") Jacaroa (pisca os olhos): Pasta (a mão comprime o tubo e a "pasta" :é espirrada até o fim da página (ou da célula da tabela) <table border="1" cellpadding="10"> <td background="imagens\pisca.gif" width="150"> <b> olhe as cores!! </b> <td background="imagens\jacaroa.gif" width="400"> <font color=ba55d3>

100 100 um gif interessante <br> colocar bem em cima <br> de sua pagina! </font> para <td background="imagens\pasta.gif" width="200"> </table> Fazendo Gráficos de Estatísticas Geralmente o Webmaster utiliza arquivos gif ou jpg que (cá entre nós), além de serem mais trabalhosos ocupam mais espaço na página, também. Vamos analisar passo-a-passo como montar o gráfico. Ele nada mais é que um conjunto de módulos sendo que cada módulo consiste numa tabela inserida dentro da outra. Observe uma dificuldade que temos: 1ª célula da 1ª linha 2ª célula da 1ª linha 3ª célula da 1ª linha 1ª célula da 2ª linha 2ª célula da 2ª linha 3ª célula da 2ª linha 1ª célula da 3ª linha 2ª célula da 3ª linha 3ª célula da 3ª linha Veja que quando eu defino a largura das células da primeira linha, eu estou definindo a largura das células de todas as linhas daquela tabela (as primeiras células sempre terão a mesma largura, as segundas células também e as terceiras células também). isso não tem problema quando vou usar uma tabela normal, mas quando eu vou fazer um gráfico de barras horizontais, eu necessito que a coluna onde vão as barras (a segunda coluna de cada linha, por exemplo), tenha tamanhos diferentes (porque as barras terão tamanhos variados de linha para linha). isso obriga eu ter uma outra tabela dentro de cada uma das "segundas células" (dentro das segundas células de cada linha), e essa nova tabela mudará de tamanho de acordo com o tamanho que eu quero as barras. Somente colocando uma tabela dentro da outra é que eu conseguirei larguras diferentes <table border=1>

101 Homens <td width="200"> <table height="15" width="50" bgcolor="pink"> </table> 300 <! aqui inicia a outra barra --> Mulheres <table height="15" width="100" bgcolor="pink"> </table> 600 </table> 1- Tabela de base: terá 3 colunas (para ir o "masculino" e o "feminino", as barras e os valores) 2- primeira linha (para ir cada uma das 3 células) 3- Primeira célula da primeira linha (para ir o "masculino") 4- O conteúdo da primeira célula da primeira linha (o "masculino") 6- coluna onde vão as barras vai deve ser igual em todas as barras (por isso só defino na primeira) e deve ser maior que a maior barra para ficar mais apresentável. 7- largura, altura e cor da BARRA! Altura deve ser igual em todas as barras 8- linha que conterá a célula que formará a barra 9- célula vazia que formara a barra 14- Terceira célula da tabela de base, que conterá texto do valor que a barra está representando. 15- o valor (escrito) que a barra está representando 19- linha que fará a outra barra 20- primeira célula da segunda linha 21- conteúdo da primeira célula (o "Mulheres") 23- coluna onde vai a barra (já defini a largura quando fiz a primeira, por isso não defino de novo) 24- largura, altura e cor que quero que a barra tenha (altura tem que ser igual em todas para ser mais bonito) 25- linha que recebera a célula vazia 26- célula vazia que será a barra em si 31- célula que recebera o valor que a barra está representando 32- valor O gráfico de barras vertical segue o mesmo princípio, mas ele terá uma tabela com uma linha (onde estarão duas colunas (uma para cada barra) e dentro dessas colunas estará uma tabela em cada para que seja desenhadas as barras coloridas). Relembrando: só teremos tabelas dentro dessas colunas para que possamos colocar alturas diferentes nas barras. Depois de pronta as barras, colocamos na tabela primária uma outra linha com os rótulos (das legendas)

102 <table border=1> <tr height="240"> <td valign="bottom" > <table> <tr width=10 height=200> 200 <td bgcolor="pink" </table> <!-- TERMiNA A PRiMEiRA BARRA --> <td valign="bottom" > <table> <tr width=10 height=100> 100 <td bgcolor="pink" > </table> <!-- legenda --> Mulheres <!-- rotulo --> <!-- segunda celula --> Homens <!-- outro rotulo --> </table> 1- tabela primária (duas colunas uma para cada barra) e duas linhas (uma para as barras e outra para a legenda) 2- primeira linha que terá as duas colunas (uma para cada barra) 3- primeira coluna onde vai a primeira barra 4- tabela que desenhara a barra 5- linha que desenhara a barra terá a largura e a altura da barra (largura deve ser igual para todas as barras do gráfico para ficar mais bonito 6- valor que ficara "em cima" da barra para indicar o valor que ela representa 7- célula vazia que será a barra; e a sua cor 13- segunda coluna que conterá a segunda barra 14 - tabela que desenhará a segunda barra 15- linha com a altura e a largura da segunda barra 16- valor que a barra representa fica em cima da barra 17- célula vazia que será a barra 23- segunda linha da tabela, que será a legenda 24- primeira célula da legenda 25- primeira rótulo "Mulheres" 26- segunda célula 27- segundo rótulo "Homens"

103 103 Tabela com Imagens Linkadas Criação de uma tabela com três colunas em uma linha. Cada coluna será um frame (uma outra janela), e cada um desses frames abre um arquivo html diferente. um efeito legal é esse: cada site html que abre em cada um desses frames, possui uma figura que é um link para outro site... que pode conter também somente uma tabela ou ser um link para a mesma página que esta abrindo da outra coluna (no outro frame) da tabela que você criou!! Ou seja, uma tabela que mostra outras páginas que tem figuras que se chamam!! Como um jogo! Visualização quando abre: E quando clica na primeira imagem ela vai chamar outro arquivo!

104 104 Veja agora de forma mais didática como isso foi feito: Escolha três imagens de tamanho igual (sakura.gif, libra.jpg e light.jpg) com width="150" heiht="338". em seguida crie a estrutura de tabela normal com 3 células. Dentro dessas células os parâmetros da tag iframe. Cada iframe tem o mesmo tamanho das imagens. O atributo scrolling="no" omite aquelas barras de rolagens horizontal e vertical. Porém as imagens não são inseridas diretamente dentro do iframe, para isso criei 3 arquivos HTML que chamei arquivo-a.htm, arquivo-b.htm e arquivo-c.htm sendo que cada um possui SÓ, E SOMENTE SÓ, uma imagem. <table border=1> <tr > <iframe scrolling="no"> </iframe> <iframe scrolling="no" > </iframe> <iframe scrolling="no" > </iframe> </table> src="imagens\arquivo-a.html" width="150" height="338" src="imagens\arquivo-b.html" width="150" height="338" src="imagens\arquivo-c.html" width="150" height="338" a tabela a linha a primeira coluna o frame dentro dessa primeira coluna com o arquivo que deverá abrir nele, a largura e a altura e o scrolling="no" para não aparecer barra de rolagem 7. a outra coluna que terá o outro frame 8. definição do outro frame abrindo o outro arquivo 1. terceira e ultima coluna 2. terceiro e ultimo frame abrindo o terceiro arquivo Os arquivos HTML com as imagens contidas são simples, porém possuem alguns parâmetros importantes. Os três são semelhantes, só mudando os nomes do arquivo e sua respectiva imagem. Sintaxe do arquivo-a.htm 1. <html> 2. <head> 3. </head> <div style="position:absolute; left:0px; top:0px;"> 6. <a href="imagens\arquivo-b.html">

105 <img src="imagens\light.jpg"> 8. </a> 9. </div> </html> define a posição (o mais encostado da lateral esquerda e o mais acima possível) define o que será chamado quando clicar na imagem. define a imagem que será usada como link quando clicar nela abre o link da linha acima Observe que a imagem light.jpg deste arquivo é um link que chama o arquivo-b. A imagem do arquivo-b possui outro link chamando o arquivo-c e a imagem do arquivo-c possui um outro link chamando o arquivo-a, fechando o loop de 3 saltos. Arquivo-b.html <html> <head> </head> <div style="position:absolute; left:0px; top:0px;"> <a href="imagens\arquivo-c.html"> <img src="imagens\sakura.jpg"> </a> </div> </html> Arquivo-c.html <html> <head> </head> <div style="position:absolute; left:0px; top:0px;"> <a href="imagens\arquivo-a.html"> <img src="imagens\libra.jpg"> </a> </div> </html>

106 Multimídia <bgsound atributo> bgsound executa um arquivo de som ( exclusivo do internet Explorer), assim que a página é acessada. uma vez iniciada a execução do som, pode-se interrompê-la pressionando Esc ou simplesmente mudando de página. A tag <bgsound> deve ser colocado entre as tags <head>...</head>. <bgsound src="audio/minha_musica.mid" loop="1"> src="url" endereço do arquivo de som. No exemplo acima, o arquivo mid está dentro do diretório "audio". loop="número infinite" quantas vezes o arquivo será executado. meta Possibilita colocar a chamada da música dentro do. Porém, usando META tem de clicar no stop para a música parar, não adianta somente dar esc. <html> <head> </head> <body bgcolor="#000000"> <meta http-equiv="refresh" content=5; url="d:\msc\asas.mp3> </html> Observe que abre no browser uma janela do Media Player (tanto com, quanto sem "<meta>").

107 Vídeos com img Dentro do comando img existe um parâmetro muito usado para se inserir clipe de vídeo na homepage. É o dynsrc, abreviatura de Dynamic Source. Clip de Eric Clapton com Jeff Beck e Jimmy Page - Layla <center> <img dynsrc="imagens\ericclap.mpg" width="100" height="70" loop="infinite"> </center> (no quadrado aparece o clip) No exemplo acima temos dynsrc que exibe o arquivo numa janela de 100 x 70 pixels com uma repetição infinita (loop=infinite). align= "" top, middle, bottom, left, right. Alinha o texto que margeia a imagem pelo topo, meio, base, esquerda e direita, respectivamente. alt="texto" Exibe um texto alternativo no lugar da imagem. border="número" Especifica a largura da borda. controls Exibe botões de controle sob a imagem. dynsrc="url" Exibe o arquivo de vídeo. Os formatos de arquivo são avi, mpg e mov. height="número" Determina a altura da janela que será aberta para exibir o arquivo. hspace="número" Especifica uma margem horizontal entre a imagem e o texto.

108 108 loop="número ou infinite" Especifica quantas vezes o arquivo será exibido. src="endereço" Especifica o endereço do arquivo de vídeo. start="fileopen / mouseover" Fileopen (default), especifica que o vídeo deve ser executado imediatamente. Mouseover faz com que o vídeo seja executado somente quando o cursor do mouse passa sobre a área da imagem. vspace="número" Especifica uma margem vertical entre a imagem e o texto. width="número" Determina a largura da janela que será aberta para exibir o arquivo. Agora alguns parâmetros de configuração sobre o mesmo arquivo: <center> <img dynsrc="imagens\ericclap.mpg" border="2" start="mouseover" alt="a imagem nao pode ser carregada"> </center> O parâmetro border=2 criou uma borda preta em torno da imagem; start=mouseover faz a imagem se movimentar (iniciar o clip) quando o cursor do mouse é passado sobre ela, o alt apresenta uma janelinha com o nome "A imagem nao pode ser carregada", quando a imagem, por uma razão qualquer, deixa de ser carregada. <embed atributos>... </embed> Executa ou carrega um objeto, como um vídeo ou arquivo de som. align="left", "right", "top", "bottom" Alinha o texto à esquerda, direita, topo e base, respectivamente. border="número" insere e determina a espessura de uma borda em torno do applet. frameborder="no" Configura uma moldura sem borda. height="número" Determina a altura da janela em pixels. hidden="true", "false" Determina se o plug-in é visível na página.

109 109 hspace="número" Especifica as bordas horizontais. name="texto" Especifica o nome do applet. pallete="foreground", "background" plano. Só é usado na plataforma Windows. Foreground faz a paleta do plug-in ser a paleta de primeiro plano. background a do segundo pluginspace="endereço" Especifica o endereço que contém as instruções para a instalação do plug-in. vspace="número" Especifica as bordas verticais. type="mimetype" Determina o tipo de mime da tag embed deve ser carregado. width="número" Determina a largura da janela em pixels. <center> <embed src="imagens\ericclapton.mpg" width="150" align="top" height="150"> Eric Clapton,Jeff Beck, Jimmy Page - Layla (texto alinhado no topo). </embed> </center> <nobed>... </nobed> Este comando exibe uma mensagem informando que o browser usado não tem capacidade para exibir o objeto. A mensagem deve ser inserida entre <nobed> e </nobed>.

110 Posicionamento de Objetos - div Um recurso interessante que o CSS trouxe ao Webmaster foi o controle do posicionamento de objetos na tela, que não era possível apenas com o HTML convencional. Agora pode-se definir a localização exata de um objeto e sobrepô-los em camadas nas mais diferentes maneiras. Através da propriedade position o posicionamento pode acontecer de três modos distintos: absolute - definido pelas margens superior e esquerda da tela.; relative - definido pela margem inferior do último objeto e margem esquerda da tela. static - O posicionamento é definido pelo próximo espaço disponível no canto esquerdo da tela. left (esquerdo) e top (topo) definem a distância que o objeto terá em relação ao browser ou a outro objeto dependendo do que for definido em posicion. As unidades que definem as distâncias podem ser em pixels (px), points (pt) e porcentagem (%). width (largura) e height (altura) definem o tamanho do bloco que irá comportar o objeto. position Quando você especifica uma posição absoluta em pixel de um objeto (um quadro, uma imagem ou algum texto), ele aparecerá no local exato que você o especificar mesmo quando o internauta minimiza a tela do browser. Os blocos de posições absolutas podem se sobrepor, e a hierarquia de sobreposição obedece àquela apresentada no código-fonte, isso é, os objetos definidos por último irão sobrepor os anteriores. Abaixo segue um exemplo prático de como isso acontece. São três textos com background (o que forma retângulos quando eu estipulo alturas e larguras), e são colocados a uma altura (top) da tela e à uma distância da margem esquerda (left) <div style="background-color:4682b4; position:absolute; height:50px; width:200px;"> Bloco azul </div> <div style="background-color:7fff00; position:absolute; height:50px; width:200px;"> Bloco verde </div> <div style="background-color: ; position:absolute; height:50px; width:200px;"> Bloco cinza </div> left:200px; top:210px; left:300px; top:230px; left:400px; top:250px; (a altura e a largura são iguais, o que varia é a distância de cima da página e da esquerda (top e left)

111 111 Agora invertendo as posições dos blocos. Também foram alteradas as propriedades left & top dos três blocos para que o exemplo fosse deslocado mais para baixo na tela. <div style="background-color: 7fff00; position: absolute; left: 300px; top: 530px; height: 50px; width: 200px"> Bloco verde </div> <div style="background-color: 4682b4; position: absolute; left: 200px; top: 550px; height: 50px; width: 200px"> Bloco azul </div> <div style="background-color: ; position: absolute; left: 400px; top: 570px; height: 50px; width: 200px"> Bloco cinza </div> Agora vou apresentar os mesmos exemplos porém mudando a configuração de absolute para relative. Como já disse na posição relativa o objeto irá ocupar o próximo espaço disponível abaixo do último objeto <div style="background-color: 7fff00; position: relative; left:200px; top:10px; height: 50px; width: 200px;"> Bloco verde

112 112 </div> <div style="background-color: 4682b4; position: relative; left:300px; top:10px; height: 50px; width: 200px;"> Bloco azul </div> <div style="background-color: ; position: relative; left: 400px; top:-20px; height: 50px; width: 200px;"> Bloco cinza </div> O top do bloco verde está a 10px abaixo do texto, já o top do bloco azul também deveria estar a 10px abaixo do texto (sobrepondo a metade direita do bloco verde), porém sua distância não corresponde com o que vemos. isso porque relative contabiliza a distância do texto mais a altura (height) do bloco anterior. Então ele irá contar 10px + 50px = 60px abaixo do texto. Para sobrepô-los temos que inserir valores negativos em top. Observe que o bloco cinza possui top:-20px, então ele irá subir 30px para dentro do bloco azul (pois além do bloco cinza não ter os 10px, ele possui -20px totalizando -30px). A equação ficaria assim: [-20 -(+10)] = 80px. isso quer dizer que o bloco cinza com top=-20px está 80px abaixo do texto. isso parece muito complicado... Qual seria a utilidade de relative funcionar assim? Para posicionar um objeto no meio ou final de arquivos HTML relativamente longos, não precisamos ficar calculando sua posição vertical, relative já o colocaria diretamente no local disponível mais próximo. Agora sobre a razão de ele funcionar assim só o W3C (Consórcio internacional que padroniza os protocolos e linguagens utilizadas na Web) saberá responder. A posição estática irá inserir o objeto no espaço disponível mais próximo sem nenhuma característica especial aplicada a ele, isso é, ele irá ocupar o primeiro canto superior esquerdo, conforme você está vendo abaixo independente de você inserir valores em left e top. <div style="background-color: eee8aa; position: static; left:200px; top:10px; height: 50px; width: 200px;"> Bege </div> <div style="background-color: ff7f50; position: static;left:300px; top:10px; height: 50px; width: 200px;"> Laranja </div> <div style="background-color: 483d8b; position: static;left: 400px; top:-20px; height: 50px; width: 200px;"> Azul </div>

113 113 Observe que em static as propriedades left & top são ignoradas. z-index z-index define uma hierarquia de sobreposição de objetos independente do seu alinhamento sintático. Os valores de z-index são sempre inteiros e o objeto que tiver o maior valor irá sobrepor os demais. Essa norma é usada tanto para o posicionamento absoluto como para o relativo. <div style="position: absolute; left: 80px; top: 4px; z-index:1"> <img src="imagens\mickey.gif"> </div> <div style="position: absolute; left: 80px; top: 4px; z-index:2"> <img src="imagens\jacare.gif "> </div> (repare que o Mickey tem z-index menor, por isso ele está atrás do jacaré o jacaré tem fundo transparente) <div style="position: absolute; left: 80px; top: 4px; z-index:2"> <img src="imagens\mickey.gif"> </div> <div style="position: absolute; left: 80px; top: 4px; z-index:1"> <img src="imagens\jacare.gif "> </div> trocando a ordem, o mickey fica na frente (como tem fundo branco, o jacaré não aparece). Repare que embora o alinhamento sintático das figuras permaneça o mesmo, a sobreposição das figura se alteraram. overflow É aplicada sobre um texto que extrapolou o tamanho do bloco definido por width e height. Seus valores são: visible - Onde será mostrado todo o conteúdo da caixa.; hidden - Onde não será mostrado o conteúdo que ficar fora dos limites da caixa.; auto - O browser mostrará uma barra de rolagem, caso seja necessário.; scroll - O browser sempre mostrará uma barra de rolagem, mesmo que não seja necessário. <div style="overflow:scroll; width:400px; height:80px; background-color:40e0d0">

114 114 Este texto está configurado com overflow:scroll e irá aparecer dentro de um quadro com barras de rolagem horizontal e vertical mesmo que as barras sejam desnecessárias. </div> <div style="overflow:visible; width:300px; height:80px; background-color:#ffc0cb"> Este texto está configurado com overflow:visible e irá aparecer dentro de um quadro sem barras de rolagem. </div>

115 Filtros Efeitos visuais (sombreamento, foco...)apareceram pela primeira vez como controles de ActiveX e posteriormente foram incorporados como propriedades de folha de estilo aceitas inicialmente pelo browser internet Explorer v4.0. Note o uso de <span>. alpha Cria um efeito de transparência total ou parcial no objeto por ele envolvido de forma que quanto menor for a sua graduação de porcentagem, definida por opacity=% maior será a sua transparência. opacity Apresenta o grau de transparência do objeto e seu valor refere-se a %. Opacity=100 apresenta um objeto totalmente opaco e opacity=0 um objeto totalmente invisível. finishopacity Define o nível de opacidade e seus valores vão de 0 à 100%. style Seus estilos podem ser 0 (uniforme), 1 (linear), 2 (radial) ou 3 Retangular. startx Coordenada horizontal para começo do gradiente de opacidade. starty Coordenada vertical para começo do gradiente de opacidade. finishx Coordenada horizontal para o fim do gradiente de opacidade. finishx Coordenada vertical para o fim do gradiente de opacidade. <span style="font-size: height:1;filter:alpha(opacity=10)"> opacity =10 </span> 24pt; font-family: Arial Black; <span style="font-size: height:1;filter:alpha(opacity=80)"> opacity = 80 </span> 24pt; font-family: Arial Black;

116 116 <span style="font-size: 24pt; font-family: Arial Black; height:1;filter:alpha(style=0)"> style=0 uniforme </span> <span style="font-size: 24pt; font-family: Arial Black; height:1;filter:alpha(style=1)"> style=1 linear </span> <span style="font-size: 24pt; font-family: Arial Black; height:1;filter:alpha(style=2)"> style=2 radial </span> <span style="font-size: 24pt; font-family: Arial Black; height:1;filter:alpha(style=3)"> style=3 retangular </span> <span style="font-size: 24pt; font-family: Arial Black; height:1;filter:alpha(opacity=0, finishopacity=50, style=2)"> opacity=0 finishopacity=50 style=2 </span> <span style="font-size: 24pt; font-family: Arial Black; height:1;filter:alpha(opacity=0, Finishopacity=70, style=3)"> opacity=0 finishopacity=70 style=3 </span>

117 117 blur Este filtro cria um efeito difuso diminuindo a definição das bordas do objeto. Sua sombra apresenta a mesma cor do objeto, porém com uma textura mais atenuada. add Booleano, 1 Sombreamento nítido, 0 Sombreamento difuso. direction Define o ângulo em que o efeito deve acontecer. Seu valor vai de 0 (topo) em incrementos de 45 graus até 315 graus. strength Define o comprimento que o efeito deve ter. Default = 5. <span style="height:1; filter: Blur(add=0,Direction=45, Strength=3)"> <font color="blue"> <img src="imagens\cs05g.gif"> Figura e texto </font> COM <font color="red"> o filtro. </font> </span> <span style="height:1; filter: Blur(add=1,Direction=45, Strength=2)"> <font color="blue"> <img src="imagens\cs05g.gif"> Figura e texto </font> COM <font color="red"> o filtro </font> </span> <span style="height:1; filter: Blur(add=1,Direction=45, Strength=3)"> <font color="blue"> <img src="imagens\cs05g.gif"> Figura e texto </font> COM

118 118 <font color="red"> o filtro </font> </span> <span style="height:1; filter: Blur(add=1,Direction=10, Strength=3)"> <font color="blue"> <img src="imagens\cs05g.gif"> Figura e texto </font> COM <font color="red"> o filtro </font> </span> <span style="height:1; filter: Blur(add=1,Direction=45,Strength=5)"> <font color="blue"> <img src="imagens\cs05g.gif"> Figura e texto </font> COM <font color="red"> o filtro </font> </span> <font color="blue"> <img src="imagens\cs05g.gif"> Figura e texto </font> Sem <font color="red"> o filtro </font>

119 119 chroma Este filtro torna uma cor específica do objeto transparente. No exemplo a seguir a imagem home1.gif tem o fundo branco (criando contraste com o background) Com o filtro chroma pode-se neutralizar o fundo branco (#FFFFFF) da imagem, simulando uma imagem GiF de fundo transparente. Ah! O efeito não funcionará caso a cor selecionado não exista na figura. color Define uma cor do código RGB que sofrerá o efeito de transparência. <body background="imagens\ambulancia.jpg"> <span style="filter:chroma(color=ffffff); height:1"> <img src="imagens\home1.gif"> </span> Visualização (usando o filtro): Sem o filtro: dropshadow Este filtro cria um eleito de sombra sólida no objeto. pode ser direcionada conforme o ângulo desejado. color Define a cor RGB (#rrggbb) da sombra. Os valores são em hexadecimal. offx Determina a distância de afastamento em "x" (horizontal). Os valores em pixels (px) podem ser positivos ou negativos. offy Determina a distância de afastamento em "y" (vertical). Os valores em pixels (px) podem ser positivos ou negativos.

120 120 positive Parâmetro booleano: 1 para sombra positiva. 0 para sombra negativa. <span style="font-size: 24pt; font-family: Arial height:1;filter:dropshadow(color=blue, offx=2, offy=2, positive=1) ;height:1"> color =blue offx=2 offy=2 </span> Black; <span style="font-size: 24pt; font-family: Arial Black; filter:dropshadow(color=green, offx=10, offy=10, positive=1) ;height:1"> color =green offx=10 offy=10 </span> height:1; fliph e flipv Efeito de imagem invertida no objeto. FlipH inverte no sentido horizontal (reflexo de espelho) e FlipV inverte no sentido vertical (reflexo na superfície de um lago). <p align="center" style="filter:fliph; height:1; font-size:20px; color:#8b008b"> Socorram-me subi no ônibus em Marrocos </p> <p align="center" style="filter:flipv; height:1; font-size:20px; color:#8a2be2"> Socorram-me subi no ônibus em Marrocos </p> glow Borra os contornos do objeto. Esse borro pode ter uma cor diferente do objeto. Repare que no exemplo a seguir o objeto possui bordas pretas e o borrado é vermelho

121 121 color Define a cor RGB (#rrggbb) do borrado. strength Determina a distância de afastamento do efeito. Seu valor é em pixels (px) e pode ser valor positivo (borro externo) ou negativo (borro interno). <div style="filter:glow(color=red strength=-10); height:1"> <img src="imagens\comp.png"> </div> Visualização strength = -10: <div style="filter:glow(color=red strength=10); height:1"> <img src="imagens\comp.png"> </div> Visualização - strength=10: <div style="filter:glow(color=red strength=200); height:1"> <img src="imagens\comp.png"> </div> Visualização - strength=200: gray Esse filtro torna a figura em tons de cinza: A figura normal é:

122 122 <div style="filter:gray; height:1"> <img src="imagens\pordosol.jpg"> </div> invert inverte a matiz de cores do objeto, criando um efeito como o negativo de uma fotografia. Figura normal: <div style="filter:invert; height:1"> <img src="imagens\flores.jpg"> </div> Visualização ( filtro invert): motion blur Este filtro cria um efeito de movimento no objeto.

123 123 strenght Define o comprimento do efeito (em pixels). direction Define o grau em que o efeito deve ocorrer (obviamente, de 0 a 360 graus). progid:dximagetransform.microsoft Parâmetros proprietários da Microsoft obrigatórios Visualização sem o efeito: <div style="height:1; filter:progid:dximagetransform.microsoft.motionblur(strength=20, direction=100)"> <img src="imagens\rio.jpg"> </div> Visualização - strength=20 direction=100 <div style="height:1; filter:progid:dximagetransform.microsoft.motionblur(strength=100, direction=45)"> <img src="imagens\rio.jpg"> </div> Visualização strength=100, direction=45

124 124 wave Cria um efeito de ondulação no objeto. add Parâmetro booleano: 1 cria o efeito wave, 0 anula o efeito. freq Número de ondulações que o objeto deve sofrer. lightstrength intensidade de ondulação luminosa. (de 0 a 100%) phase Freqüência da ondulação, seu valor vai de 0 a 360graus. strength intensidade da ondulação da imagem. Visualização figura sem o efeito: <span style="filter:wave(freq=13, lightstrength=30); height:1"> <img src="brasil.gif"> </span> Visualização freq=13 lightstrength=30: <span style="filter:wave(freq=4, lightstrength=80); height:1"> <img src="brasil.gif"> </span> Visualização freq=4 lightstrength=80: <span style="filter:wave(freq=4, lightstrength=80, strength=5);height:1"> <img src="brasil.gif"> </span> Visualização freq=4 lightstrength=80 strength=5:

125 125 <span style="filter:wave(freq=4, lightstrength=80, phase=360); height:1"> <img src="brasil.gif"> </span> Visualização freq=4 lightstrength=80 phase=360 : xray Efeito de chapa de raio X (se parece muito com o efeito Gray, mas é menos nítido: imagem sem efeitos: imagem com efeito Gray: <div style="filter:xray; height=1"> <img src="imagens\barra_flor.jpg"> </div> Visualização XRay:

126 Frames <frameset atributos>... </frameset> Define um conjunto de quadros. um arquivo HTML que contenha o <frameset> não deve conter também o descritor.. Pode ser utilizado dentro de <html>, <frameset> e pode <frame>, <no frames>, <frameset> cols="x, y,..." largura ocupada por cada quadro. Pode ser uma porcentagem (valor seguido de "%") em relação à largura total da página ou um valor absoluto em pixels. rows="x, y,..." altura ocupada por cada quadro. Pode ser uma ou um valor absoluto frameborder="1 / 0" largura em pixels da borda dos quadros. Por default, todo quadro possui uma borda. Para retirá-la use frameborder="0". Frames verticais Esta é a sintaxe de um arquivo HTML simples com frames verticais. O exemplo consiste num arquivo dividido em três frames: 1, 2 e 3 com 10, 30 e 20 colunas, respectivamente. Cada frame exibirá seu arquivo correspondente conforme mostra o comando <frame src="..."> O arquivo criado simplesmente estrutura a apresentação dos outros arquivos HTML, chamados frames_1.html, frame_2.html e frame_3.html (mas poderia ser qualquer outro site, viu?). Ele é a moldura de apresentação desses três arquivos HTML. Quando a janela criada para cada arquivo não for suficiente para exibir todo o seu conteúdo, ele automaticamente cria barras de rolagem vertical e/ou horizontal, conforme a necessidade. <html> <frameset cols="10,15,20"> <frame src="frame_1.html"> <frame src="frame_2.html"> <frame src="frame_3.html"> </frameset> </html>

127 127 Frames Horizontais O mesmo exemplo dado anteriormente (usando frame_1.html, frame_2.html e frame_3.html), mas usando o atributo "rows=10,15,20": e sem as bordas, frameborder="0". <html> <frameset rows="10,25,10" frameborder="0"> <frame src="frame_1.html"> <frame src="frame_2.html"> <frame src="frame_3.html"> </frameset> </html> Visualização - foram incluídas automaticamente barras de rolagem porque não foi suficiente o espaço!!! Para dividir os frames em janelas iguais no browser usamos o "*". <frameset cols="*,*,*"> ou <frameset rows="*,*,*"> irá criar três janelas verticais ou horizontais equivalentes. Outra forma de distribuir os frames é usando valores percentuais. Determine quantos % cada frame deverá ocupar na janela do monitor. As distribuições sempre deverão totalizar os 100%: <frameset cols="20%,60%,20%"> Frames Combinados Os atributos "cols" e "rows" podem ser combinados simultaneamente criando janelas verticais e horizontais. <frameset cols="30%,70%"> <frameset rows="50%,50%"> <frame src="frame_1.html"> <frame src="frame_2.html"> </frameset> <frame src="frame_3.html"> </frameset>

128 128 framespacing="valor" Este atributo altera a espessura das bordas deixando os frames mais separados entre si. <frameset cols="30%,70%" framespacing="15"> <frameset rows="50%,50%"> <frame src="frame_1.html"> <frame src="frame_2.html"> </frameset> <frame src="frame_3.html"> </frameset> <frame atributos> Define um quadro dentro de um conjunto <frameset>. É utilizado dentro de: <frameset> align="top, middle, bottom, left, right" Ajusta o alinhamento do frame ou do texto. frameborder="1 / 0" Ativa ou desativa a exibição de borda no frame relacionado. src="url"

129 129 informa a URL do documento que será exibido dentro do quadro. name="rótulo" Define um nome para o quadro que pode ser referenciado pelo atributo target do elemento <a>. marginheight="número" Define um espaçamento vertical em pixels entre a borda do quadro e o seu conteúdo. marginwidth="número" Define um espaçamento horizontal em pixels entre a borda do quadro e o seu conteúdo. noresize impede que o quadro possa ser redimensionado pelo usuário. scrolling="yes no" Decide se haverá ou não barra de rolamento para permitir a visualização do conteúdo do quadro. Por default, as barras de rolamento aparecem sempre que o conteúdo ultrapassa a área de visualização do browser. <frameset cols="30%,70%"> <frameset rows="50%,50%"> <frame marginwidth="50" marginheight="50" src="frame_1.html"> <frame scrolling="no" src="frame_2.html"> </frameset> <frame frameborder=0 src="frame_3.html"> </frameset> Neste exemplo, no frame 1 marginwidth=50 marginheight=50, observe como ficaram as margens do texto. Ele criou um espaçamento nas bordas verticais e horizontais. No frame 2 configurei scrolling="no", ou seja, sem barras de rolagem. embora exista uma parte do texto que ficou oculta (no monitor de 14"), a barra de rolagem vertical não aparece. No frame 3 configurei frameborder=0, então ele aparecerá sem bordas, observe a diferença entre os frames 1 e 2, com borda e o frame 3, sem borda. <noframes>... </noframes> Caso o browser do usuário seja antigo ou não compatível com os recursos de frames, um recurso muito utilizado é inserir uma mensagem de aviso entre <noframes>... </noframes>, informando o usuário. <frameset cols="30%,70%"> <frameset rows="50%,50%"> <frame marginwidth="50" marginheight="50" src="frame_1.html"> <frame scrolling="no" src="frame_2.html"> </frameset>

130 130 <frame frameborder=0 src="frame_3.html"> </frameset> <noframes> O seu browser não suporta frames. Sugerimos obter uma versão atualizada do Netscape Navigator 3.0 ou do internet Explorer 3.0 através dos seguintes sites: <p> Microsoft: <a href="http://www.microsoft.com"> </a> </p> <p> Netscape: <a href="http://home.netscape.com"> </a> </p> <p> <center> Clique no botão [Back] do seu browser para voltar. </center> </p> </noframes> Visualização - caso o browser não suportasse frames: Montando um Diretório com frames Montar uma estrutura com frames verticais de forma que, ao clicar no índice do frame à esquerda ele mude apenas o frame à direita mantendo o resto da página inalterada. Para montar essa estrutura vou criar mais três arquivos que me servirão como exemplos. Os arquivos chamarão matriz.htm, indice.htm e abertura.htm (dei aos arquivos nomes associados as suas funções pra ficar mais fácil o entendimento). matriz.htm: Este e o arquivo que irá comportar os frames. É ele que irá aparecer no monitor com os dois frames verticais. indice.htm: Este é o arquivo que irá conter a lista de arquivos à esquerda. Serão os nossos já conhecidos frame1, frame2 e frame3.htm. abertura.htm: Este é o arquivo que sempre irá aparecer à direita quando entrarem na sua página juntamente com o arquivo índice à esquerda. Sintaxe do arquivo matriz.htm <html> <frameset cols=20%,*> <frame name="ladoesquerdo" src=indice.htm> <frame name="ladodireito" src="abertura.htm"> </frameset> </html>

131 131 Observe que o frame da esquerda terá 20% de tamanho <frameset cols=20%,*> e o asterisco indica que o restante do espaço ficará com o arquivo da direita. O parâmetro <frame name="ladoesquerdo" src=indice.htm> define qual arquivo irá aparecer à esquerda e <frame name="ladodireito" src=abertura.htm>, qual arquivo irá aparecer a direita. Para criar o arquivo indice.htm <html> <head> <base target="ladodireito"> </head> <body bgcolor="#daa520"> <center> <h1> Diretório </h1> <br> Clique sobre a lista abaixo. <br> <a href="abertura.htm"> abertura </a> <br> <a href="frame_1.htm"> Frame 1 </a> <br> <a href="frame_2.htm"> Frame 2 </a> <br> <a href="frame_3.htm"> Frame 3 </a> </center> </html> Sintaxe do abertura.htm: <html> Oi... esta é e abertura.htm! </html>

132 132 O parâmetro <base target="ladodireito"> acima, irá indicar ao browser onde os arquivos vinculados pelo comando <a href> devem ser carregados. Para entender melhor vamos ao exemplo prático, ele nada mais é que os dois arquivos apresentados acima. Os arquivos frame_1, frame_2 e frame_3 são os mesmos já usados (não colocarei novamente a sintaxe porque poderiam ser quaisquer outros sites (como o por exemplo, em um dos frames) Note como ficou fácil o entendimento analisando as sintaxes dos arquivos acima e depois verificando o exemplo. Visualização final (abrindo o matriz.htm): <iframe>... </iframe > Define um frame embutido na página (como uma janela) e permite também a inclusão de outros documentos HTML. src="url" Endereço do documento que será exibido. name="texto" Nome do frame. width="número" Define a largura do frame.

133 133 height="número" Define a altura do frame. align="top middle bottom left right" Alinha o frame em relação a página no topo, meio, base, esquerda e direita, respectivamente. Frameborder="1 0" O valor 1 insere uma borda no frame, o valor 0 omite. margnwidth="pixels" Define uma largura para a margem. marginheight="pixels" Define uma altura para a margem. scrolling="yes no auto" yes permite a rolagem do frame, no não permite. Exemplo: uma janela no centro desta página utilizando o comando iframe. A sintaxe de configuração é a seguinte: <center> <iframe width="350" height="200" scrolling="auto" frameborder="1"> </iframe> </center> visualização: Este frame possui o tamanho de 350 x 200 pixels, barra de rolagem automática e uma borda. Agora irei colocar um arquivo HTML dentro desta janela (o arquivo background.htm). Sintaxe: <center> <iframe src="background1.htm" frameborder="1"> </iframe> </center> width="350" height="200" scrolling="auto"

134 134 No próximo exemplo coloquei um texto rolante dentro da janela. Para criar o texto rolante coloquei uma frase qualquer dentro do comando marquee que por sua vez está dentro do arquivo banner.htm, depois inseri o arquivo banner.htm dentro da janela iframe, pronto! Sintaxe deste exemplo: <center> <iframe src="banner.htm" marginheight="2px"> </iframe> </center> width="400" height="20" scrolling="no" frameborder="1" Arquivo banner.htm <html> <body bgcolor="#d8d8bf"> <center> <marquee behavior="scroll" width="700"> <font face="verdana" size="2"> Outro exemplo de aplicação é esta mensagem estilo banner. </font> </marquee> </center> </html>

135 Botões Fechar a janela <html> <FORM> <INPUT ONCLICK="window.close()"> </FORM> </html> TYPE="button" NAME="Button" VALUE="Fechar a janela" <html> <A HREF=JavaScript:window.close()> Fechar a janela </a> </html> <html> Clique na figura para fechar a janela <A HREF=JavaScript:window.close()> <IMG SRC="imagens/fechar.gif "> </a> </html> Imprimir a página <FORM> <INPUT TYPE="button" ONCLICK="window.print()"> </FORM> NAME="Button" VALUE="Imprimir esta página" <A HREF=JavaScript:window.print()>

136 136 Imprimir esta página </a> <A HREF=JavaScript:window.print()> <IMG SRC="imagens/imprimir.gif"> </a> "Voltar" e "Avançar" <FORM> <INPUT TYPE="button" ONCLICK="window.history.go(-1)"> </FORM> NAME="Button" VALUE="Voltar" <html> <A HREF="javascript:window.history.go(-1)">Voltar</a> </html> <html> <FORM> <INPUT TYPE="button" ONCLICK="window.history.go(1)"> </FORM> </html> NAME="Button" VALUE="Avançar" <html> <A HREF="javascript:window.history.go(1)"> Avançar </a> </html>

137 137 Exibir Código Fonte <html> <INPUT TYPE="button" VALUE="Código "view-source:"+ window.location.href"> </html> Fonte" ONCLICK="window.location = Botões Coloridos <INPUT TYPE="submit" NAME="button" VALUE="Botão 1"> <INPUT TYPE="submit" NAME="button" VALUE="Botão 2"> O atributo VALUE="texto" é o que apresenta a escrita na sua superfície. Vamos modificar o botão 1 que terá uma letra azul escuro (color: 0000FF) e um fundo azul claro (background-color: 87CEFA), e o Botão 2 terá uma letra preta (color: )e um fundo amarelo ouro (background-color: FFD700). <html> <INPUT TYPE="submit" background-color:87cefa"> <INPUT TYPE="submit" background-color:ffd700"> NAME="button" VALUE="Botão 1" STYLE="color:0000FF; NAME="button" VALUE="Botão 2" STYLE="color:000000; </html> Botões com Links Para endereçar os botões com links, tem-se de renomear os botões, por uma questão de referência. O botão 1 passará a ser o Cadê e o 2 será o Google. Um detalhe de apresentação será incluir o parâmetro STYLE="cursor:hand" para que o cursor mude para a mãozinha quando o mouse sobrepõe o botão. <html> <FORM METHOD=GET ACTION="http://www.cade.com.br/"> <INPUT TYPE="submit" NAME="button" VALUE="Cadê" STYLE="cursor:hand;

138 138 color:0000ff; background-color:87cefa"> <FORM METHOD=GET ACTION="http://www.google.com.br/"> <INPUT TYPE="submit" NAME="button" STYLE="cursor:hand; color:000000; background-color:ffd700"> </FORM> </FORM> </html> VALUE="Google" Note que o tamanho do botão se ajusta automaticamente a quantidade de caracteres que tem na sua superfície. Para alinhar os botões lado-a-lado podemos recorrer aos recursos de <TABLE> (tabela). <CENTER> <TABLE> <TR> <TD> <FORM METHOD=GET ACTION="http://www.cade.com.br/"> <INPUT TYPE="submit" NAME="button" VALUE="Cadê?" STYLE="cursor:hand; color:0000ff; background-color:87cefa"> </FORM> </TD> <TD> <FORM METHOD=GET ACTION="http://www.google.com.br/"> <INPUT TYPE="submit" NAME="button" VALUE="Google" STYLE="cursor:hand; color:000000; background-color:ffd700"> </FORM> </TD> </TR> </TABLE> </CENTER> (estão centralizados na página) Os botões personalizados apresentados acima são estáticos, isso é, não reagem a sobreposição do mouse. Movimente o mouse sobre eles (sem clicar) e repare que eles parecem simples imagens. Então vamos fazê-los responder a sobreposição do mouse com alternamento de cores. Primeiro: inserimos o código CSS/JavaScript. Observe os seletores.troca1 e.troca2. São eles que irão definir as cores iniciais do botão. Se escolher duas cores diferentes tem que usar dois seletores com propriedades diferentes. <!-- indica qual cor terão qnd abrir a página //--> <STYLE>.troca1 {background-color:black}.troca2 {background-color:gray} </STYLE> <SCRIPT LANGUAGE="JavaScript1.2"> function Troca(cor){ var mud=event.srcelement if (mud.tagname=="input"&&mud.type=="submit") event.srcelement.style.backgroundcolor=cor } </SCRIPT> <!-- chama a funcao e muda qnd o mouse passar por cima, muda outras 2 cores //--> <CENTER>

139 139 <TABLE> <TR> <TD> <FORM METHOD=GET ACTION="http://www.cade.com.br/" onmouseover="troca('yellow')" onmouseout="troca('red')"> <INPUT TYPE="submit" NAME="button" VALUE="Cadê" STYLE="color:pink; cursor:hand" class="troca1"> </FORM> </TD> <TD> <FORM METHOD=GET ACTION="http://www.google.com.br/" onmouseover="troca('blue')" onmouseout="troca('green')"> <INPUT TYPE="submit" NAME="button" VALUE="Google" STYLE="color:white"; cursor:hand" class="troca2"> </FORM> </TD> </TR> </TABLE> </CENTER> Quando abre a página: Quando o mouse está em cima do primeiro: Quando o mouse sai de cima do primeiro e está em cima do segundo: Quando o mouse sai fora dos dois: Botões Texturizados Geralmente a superfície do botão é muito pequena e isso dificulta uma definição clara de sua textura. Usamos o atributo padding para definir o distanciamento entre o texto (do botão) e suas bordas, manipulando a sua área de superfície. Os valores usados em padding são points (pt), inches (in), centimeters (cm), pixels (px) ou percentage (%). Botão 1 sem padding (default), botão 2 com 5 pixel de padding e botão 3 com 1 centimetro de padding: <html> <INPUT TYPE="submit" NAME="button" VALUE="Botão 1" STYLE="color:000000"> <INPUT TYPE="submit" NAME="button" VALUE="Botão 2" STYLE="color:000000; padding:5px"> <INPUT TYPE="submit" NAME="button" VALUE="Botão 3" STYLE="color:000000; padding:1cm"> </html>

LINGUAGEM DE PROGRAMAÇÃO HTML COMPONENTES: ROBSON EDMILSON

LINGUAGEM DE PROGRAMAÇÃO HTML COMPONENTES: ROBSON EDMILSON COMPONENTES: ROBSON EDMILSON O HTML (Hiper Text Mark-up Language) é uma linguagem de programação hipertexto. O HTML tem códigos para criar páginas na web. Estes códigos que definem o tipo de letra, qual

Leia mais

HTML. Conceitos básicos de formatação de páginas WEB

HTML. Conceitos básicos de formatação de páginas WEB HTML Conceitos básicos de formatação de páginas WEB HTML HyperText Markup Language Linguagem utilizada para criar hipertexto na web Ou seja, criar documentos estruturados utilizando para tal um conjunto

Leia mais

Webdesign HTML. Introdução a HTML e as principais tags da linguagem. Thiago Miranda dos Santos Souza

Webdesign HTML. Introdução a HTML e as principais tags da linguagem. Thiago Miranda dos Santos Souza Webdesign HTML Introdução a HTML e as principais tags da linguagem Conteúdos Os materiais de aula, apostilas e outras informações estarão disponíveis em: www.thiagomiranda.net Objetivos Apresentar a HTML

Leia mais

QUEM FEZ O TRABALHO?

QUEM FEZ O TRABALHO? Introdução a Linguagem HTML: Conceitos Básicos e Estrutura ANA PAULAALVES DE LIMA 1 QUEM FEZ O TRABALHO? Com as tagsaprendidas hoje, faça uma página HTML sobre você com as seguintes informações: Seu nome

Leia mais

Linguagem WEB Prof. Alexandre Unterstell alexunter@gmail.com - www.alex.inf.br/cesc

Linguagem WEB Prof. Alexandre Unterstell alexunter@gmail.com - www.alex.inf.br/cesc Linguagem WEB Prof. Alexandre Unterstell alexunter@gmail.com - www.alex.inf.br/cesc Dicas Importantes: - Sempre crie um diretório em seu computador e salve todos os arquivos que vai usar (imagens e paginas),

Leia mais

2 HTML Inserindo objetos

2 HTML Inserindo objetos 2 HTML Inserindo objetos Vinicius A. de Souza va.vinicius@gmail.com São José dos Campos, 2011. 1 Sumário Desenvolvimento Web Imagem...3 Links...5 Links para locais da mesma página...6 Áudio e vídeo...8

Leia mais

> Herbet Ferreira Rodrigues > contato@herbetferreira.com

> Herbet Ferreira Rodrigues > contato@herbetferreira.com Curso HTML & CSS > Herbet Ferreira Rodrigues > contato@herbetferreira.com Sumário > Apresentação > Introdução ao HTML História Começando a Programar > Tags em HTML Headings (Cabeçalhos) Parágrafos Formatação

Leia mais

Tutorial de HTML. O que é HTML? Aprendendo

Tutorial de HTML. O que é HTML? Aprendendo Tutorial de HTML Tutorial: O que é HTML? Aprendendo Títulos Textos Imagens Links Imagens Clicáveis Explorando o TAG BODY Música de Fundo Gifs Animados Tabelas Testando sua Página O que é HTML? HTML é uma

Leia mais

Programação web Prof. Wladimir

Programação web Prof. Wladimir Programação web Prof. Wladimir HTML @wre2008 1 Sumário Histórico; Resumo XHTML; Tags; Edição de documentos HTML; Publicação de um documento; Estrutura básica de um documento HTML; Edição de documentos

Leia mais

CURSO BÁSICO DE HTML Alessandro S Silveira. Lista de tags e atributos

CURSO BÁSICO DE HTML Alessandro S Silveira. Lista de tags e atributos CURSO BÁSICO DE HTML Alessandro S Silveira Lista de tags e atributos Os tags apresentados aqui formam uma compilação das definições oficiais da linguagem mais as extensões introduzidas por empresas como

Leia mais

Introdução. História. Como funciona

Introdução. História. Como funciona Introdução O HTML é uma linguagem de marcação utilizada para desenvolvimento de sites. Esta linguagem surgiu junto com o HTTP, ambos possibilitaram a internet ser popularizada. História O HTML foi criado

Leia mais

Aula 03: Noções Fundamentais do CSS, Formatação de Fonte e Inserção de Imagens

Aula 03: Noções Fundamentais do CSS, Formatação de Fonte e Inserção de Imagens Aula 03: Noções Fundamentais do CSS, Formatação de Fonte e Inserção de Imagens Tag para inserir imagens e HTML O modelo CSS Noções fundamentais e funcionamento do CSS Incluindo estilos em uma página Sintaxe

Leia mais

OPERAÇÃO DE SOFTWARE E APLICATIVOS

OPERAÇÃO DE SOFTWARE E APLICATIVOS OPERAÇÃO DE SOFTWARE E APLICATIVOS 1 SUMÁRIO 1 INTRODUÇÃO A WEB... 4 1.1 O QUE É A WORLD WIDE WEB?... 4 1.2 COMO FUNCIONA A WWW?... 4 1.3 SERVIDORES WEB... 4 1.4 BROWSERS... 4 1.5 PADRÕES DA WEB... 5 1.6

Leia mais

Curso Superior de Tecnologia em Análise e Desenvolvimento de Sistemas Prof. Felippe Scheidt IFPR Campus Foz do Iguaçu 2014/2

Curso Superior de Tecnologia em Análise e Desenvolvimento de Sistemas Prof. Felippe Scheidt IFPR Campus Foz do Iguaçu 2014/2 Curso Superior de Tecnologia em Análise e Desenvolvimento de Sistemas Prof. Felippe Scheidt IFPR Campus Foz do Iguaçu 2014/2 Objetivo. O objetivo da disciplina é conhecer os princípios da programação de

Leia mais

4 - HTML Básico: 4.2 - Criando documentos HTML:

4 - HTML Básico: 4.2 - Criando documentos HTML: 4 - HTML Básico: 4.1 - O que é HTML? Os documentos na Web são organizados com o uso de comandos que são interpretados pelos browsers. Estes comandos compõem a linguagem HTML (HyperText Markup Language).

Leia mais

Ferramentas para Multimídia e Internet - 1486

Ferramentas para Multimídia e Internet - 1486 1 Ferramentas para Multimídia e Internet - 1486 HTML BÁSICO: O que é uma página WEB? Uma página WEB, também conhecida pelo termo inglês webpage, é uma "página" na World Wide Web, geralmente em formato

Leia mais

4.14 - Imagens: SRC único atributo que não pode ser omitido neste tag Nota: img

4.14 - Imagens: <IMG SRC=...> SRC <IMG SRC=tecnologia.jpg> único atributo que não pode ser omitido neste tag Nota: img 4.14 - Imagens: O tag utilizado para a inclusão de imagens em páginas html é o: O atributo SRC especifica o local aonde está a imagem e o seu nome. Nas páginas pessoais é mais comum o uso

Leia mais

4.14 - Imagens: src único atributo que não pode ser omitido neste TAG Nota: img

4.14 - Imagens: <img src=...> src <img src=tecnologia.jpg> único atributo que não pode ser omitido neste TAG Nota: img 4.14 - Imagens: O TAG utilizado para a inclusão de imagens em páginas html é o: O atributo src especifica o local onde está a imagem e o seu nome. Nas páginas pessoais é mais comum o uso

Leia mais

MÓDULO 1 - xhtml Básico

MÓDULO 1 - xhtml Básico MÓDULO 1 - xhtml Básico 1. Introdução xhtml significa Extensible Hypertext Markup Language (Linguagem de Marcação Hipertextual Extensível) e é a linguagem de descrição de documentos usada na World Wide

Leia mais

1. HTML - Introdução. Hyper Text Markup Language. É uma linguagem de formatação de conteúdos. Portável. Ficheiros de pequena dimensão

1. HTML - Introdução. Hyper Text Markup Language. É uma linguagem de formatação de conteúdos. Portável. Ficheiros de pequena dimensão 1. HTML - Introdução Hyper Text Markup Language É uma linguagem de formatação de conteúdos Não é uma linguagem de programação Portável Não depende da plataforma em que é vizualizado Ficheiros de pequena

Leia mais

André Kawamoto NE31A

André Kawamoto NE31A André Kawamoto NE31A Internet Internet: uma coleção de redes Todos os computadores conectados à Internet fazem parte de uma rede (rede local, rede doméstica) Rede de Redes Internet x WWW Internet e World

Leia mais

Roteiro 2: Conceitos de Tags HTML

Roteiro 2: Conceitos de Tags HTML Roteiro 2: Conceitos de Tags HTML Objetivos Detalhar conceitos sobre TAGS HTML: elementos, atributos, elemento vazio, links. Implementar páginas de internet com uso da linguagem HTML; Ferramentas Necessárias

Leia mais

Programação para Internet I

Programação para Internet I Programação para Internet I Aula 05 e 06 Fernando F. Costa nando@fimes.edu.br 1 Tags de Formatação de Texto - Permite que um texto se mova de um lado para o outro da página. Sintaxe:

Leia mais

Desenvolvimento Web. Saymon Yury C. Silva Analista de Sistemas. http://www.saymonyury.com.br

Desenvolvimento Web. Saymon Yury C. Silva Analista de Sistemas. http://www.saymonyury.com.br Desenvolvimento Web Saymon Yury C. Silva Analista de Sistemas http://www.saymonyury.com.br Vantagens Informação em qualquer hora e lugar; Rápidos resultados; Portabilidade absoluta; Manutenção facilitada

Leia mais

Internet. Prof. Ricardo Argenton Ramos. www.univasf.ed.br/~ricardo.aramos

Internet. Prof. Ricardo Argenton Ramos. www.univasf.ed.br/~ricardo.aramos Internet Prof. Ricardo Argenton Ramos www.univasf.ed.br/~ricardo.aramos O que é Internet? A Internet é uma rede capaz de interligar todos os computadores do mundo. O que faz a Internet tão poderosa assim

Leia mais

Faculdade de Ciências Médicas FCM Unicamp Núcleo de Tecnologia de Informação NTI

Faculdade de Ciências Médicas FCM Unicamp Núcleo de Tecnologia de Informação NTI Manual do usuário Desenvolvendo páginas em Drupal Faculdade de Ciências Médicas FCM Unicamp Núcleo de Tecnologia de Informação NTI Conteúdo Primeiro Passo... 3 1.1 Login... 3 1.2 Recuperando a Senha...

Leia mais

HTML Curso Básico HTML CURSO BÁSICO Aprenda os conceitos iniciais de HTML em alguns minutos.

HTML Curso Básico HTML CURSO BÁSICO Aprenda os conceitos iniciais de HTML em alguns minutos. HTML CURSO BÁSICO Aprenda os conceitos iniciais de HTML em alguns minutos. 1 Índice 1 - INTRODUÇÃO 3 2 - TAGS 3 3 - EDITORES 3 4 - SALVANDO UMA PAGINA HTML 3 5 - INICIANDO UMA PÁGINA 3 6 - CONSTRUINDO

Leia mais

Módulo: Criação de Páginas WEB

Módulo: Criação de Páginas WEB Módulo: Criação de Páginas WEB 50 Horas - Sessão 05/13 TEXTO ANIMADO O comando MARQUEE orienta o browser a definir o efeito de texto/imagem a passar no ecrã. Deve ser utilizado quando queremos dar destaque

Leia mais

Curso PHP Básico. Jairo Charnoski do Nascimento

Curso PHP Básico. Jairo Charnoski do Nascimento Curso PHP Básico Jairo Charnoski do Nascimento Agenda Ferramentas necessárias Introdução HTML HTML? Tags Construindo seu primeiro website Observações sobre a estrutura Mais tags Atributos Agenda Cores

Leia mais

XHTML. A versão mais recente desta linguagem é a XHTML (extensible HyperText Markup Language Linguagem de Marcação de Hipertexto Estendida).

XHTML. A versão mais recente desta linguagem é a XHTML (extensible HyperText Markup Language Linguagem de Marcação de Hipertexto Estendida). XHTML 1. Significado do Termo HTML (HyperText Markup Language Linguagem de Marcação de Hipertexto) é a linguagem na qual são feitas as páginas que irão compor um site da Internet. A versão mais recente

Leia mais

Passa a passo para construir uma página pessoal - Parte 1

Passa a passo para construir uma página pessoal - Parte 1 Passa a passo para construir uma página pessoal - Parte 1 Quais ferramentas são necessárias? - Editor de texto básico (sem formatações): use o Bloco de Notas (não use o MS Word e WordPad) - Navegador (browser):

Leia mais

Web Design. Prof. Felippe

Web Design. Prof. Felippe Web Design Prof. Felippe 2015 Sobre a disciplina Fornecer ao aluno subsídios para o projeto e desenvolvimento de interfaces de sistemas Web eficientes, amigáveis e intuitivas. Conceitos fundamentais sobre

Leia mais

Programação HTML Construção de Páginas para WEB 47

Programação HTML Construção de Páginas para WEB 47 Programação HTML Construção de Páginas para WEB 47 INICIANDO EXEMPLO3.HTML Crie um novo arquivo html chamado exemplo3.html dentro da pasta exemplos. Após os exercícios e trabalhos anteriores, nossa pasta

Leia mais

Sumário. HTML CSS JQuery Referências IHC AULA 6 5-09-2011 1

Sumário. HTML CSS JQuery Referências IHC AULA 6 5-09-2011 1 Sumário HTML CSS JQuery Referências IHC AULA 6 5-09-2011 1 Linguagem HTML HTML é a abreviação de HyperText Markup Language, que pode ser traduzido como Linguagem de Marcação de Hipertexto. Não é uma linguagem

Leia mais

1 INTRODUÇÃO. Web é o diminutivo para World Wide Web.

1 INTRODUÇÃO. Web é o diminutivo para World Wide Web. 1 1 INTRODUÇÃO Antes de começarmos a trabalhar HTML, é necessário que se conheça alguns termos básicos que envolvem esta linguagem. Internet é um conjunto de pequenas redes de computadores, formando assim

Leia mais

DESENVOLVIMENTO WEB I - 7122

DESENVOLVIMENTO WEB I - 7122 6.2 - Formulários: Um dos recursos mais fascinantes da linguagem HTML é a possibilidade de criar formulários eletrônicos. Usando um formulário o usuário pode interagir com o servidor, enviando dados que

Leia mais

6.2 - Formulários: form
...
form action method POST GET exceto outros formulários form

6.2 - Formulários: form <form action=url_de_script method=método>...</form> form action method POST GET exceto outros formulários form 6.2 - Formulários: Um dos recursos mais fascinantes da linguagem HTML é a possibilidade de criar formulários eletrônicos. Usando um formulário o usuário pode interagir com o servidor, enviando dados que

Leia mais

Mini-curso de PHP. Aulas ministradas por: André Luis de Paula Arthur Kalsing Diego Silva

Mini-curso de PHP. Aulas ministradas por: André Luis de Paula Arthur Kalsing Diego Silva Mini-curso de PHP Aulas ministradas por: André Luis de Paula Arthur Kalsing Diego Silva Aula 1 Breve introdução de HTML, Conceitos básicos de PHP, Sintaxe, Separador de instruções e Comentários (Cap 1

Leia mais

Desenvolvedor Web Docente André Luiz Silva de Moraes

Desenvolvedor Web Docente André Luiz Silva de Moraes Roteiro 2: Introdução a Linguagem HTML Neste roteiro é explorada a linguagem HTML. A linguagem HTML (Hypertext Markup Language) é amplamente utilizada na construção de páginas de internet e é responsável

Leia mais

Desenvolvimento em Ambiente Web. Prof. André Y. Kusumoto andrekusumoto.unip@gmail.com

Desenvolvimento em Ambiente Web. Prof. André Y. Kusumoto andrekusumoto.unip@gmail.com Desenvolvimento em Ambiente Web Prof. André Y. Kusumoto andrekusumoto.unip@gmail.com Listas A HTML permite definir três categorias distintas de listas: Ordenadas Sem ordenação Lista de definição 2/28 Listas

Leia mais

Desenvolvimento em Ambiente Web. Prof. André Y. Kusumoto andrekusumoto.unip@gmail.com

Desenvolvimento em Ambiente Web. Prof. André Y. Kusumoto andrekusumoto.unip@gmail.com Desenvolvimento em Ambiente Web Prof. André Y. Kusumoto andrekusumoto.unip@gmail.com Conceitos de HTML Prof. André Y. Kusumoto andrekusumoto.unip@gmail.com Definição de HTML Linguagem de marcadores (tags).

Leia mais

DHTML - MÓDULO 1: VISÃO GERAL E INTRODUÇÃO Por Marcelo Camargo Visão geral

DHTML - MÓDULO 1: VISÃO GERAL E INTRODUÇÃO Por Marcelo Camargo Visão geral Apostila retirada de http://www.ibestmasters.com.br DHTML - MÓDULO 1: VISÃO GERAL E INTRODUÇÃO Por Marcelo Camargo Visão geral A tecnologia DHTML (Dynamic HTML) foi apresentada inicialmente como um conjunto

Leia mais

INSTITUTO FEDERAL DE EDUCAÇÃO, CIÊNCIA E TECNOLOGIA DO RN - IFRN APOSTILA: AUTORIA WEB PROFESSOR: ADDSON ARAÚJO DA COSTA SANTA CRUZ - RN

INSTITUTO FEDERAL DE EDUCAÇÃO, CIÊNCIA E TECNOLOGIA DO RN - IFRN APOSTILA: AUTORIA WEB PROFESSOR: ADDSON ARAÚJO DA COSTA SANTA CRUZ - RN INSTITUTO FEDERAL DE EDUCAÇÃO, CIÊNCIA E TECNOLOGIA DO RN - IFRN APOSTILA: AUTORIA WEB PROFESSOR: ADDSON ARAÚJO DA COSTA SANTA CRUZ - RN Sumário 1. Introdução...1 2. Tags...1 3. HTML...1 4. Cabeça, Corpo

Leia mais

INTERNET -- NAVEGAÇÃO

INTERNET -- NAVEGAÇÃO Página 1 INTRODUÇÃO Parte 1 O que é a Internet? A Internet é uma rede mundial de computadores, englobando redes menores distribuídas por vários países, estados e cidades. Ao contrário do que muitos pensam,

Leia mais

HyperText Markup Language HTML

HyperText Markup Language HTML HyperText Markup Language HTML Prof. Luis Nícolas de Amorim Trigo nicolas.trigo@ifsertao-pe.edu.br http://professor.ifsertao-pe.edu.br/nicolas.trigo/ Introdução Linguagem de Marcação de Hipertexto. Uma

Leia mais

Desenvolvimento de Sites com PHP e Mysql Docente André Luiz Silva de Moraes

Desenvolvimento de Sites com PHP e Mysql Docente André Luiz Silva de Moraes Roteiro 2: Introdução a Linguagem HTML Desenvolvimento de Sites com PHP e Mysql Neste roteiro é explorada a linguagem HTML. A linguagem HTML (Hypertext Markup Language) é amplamente utilizada na construção

Leia mais

Introdução a Tecnologia Web Desenvolvimento e Manutenção de Site

Introdução a Tecnologia Web Desenvolvimento e Manutenção de Site Tecnologia Educacional na Formação Profissionalizante de Jovens Introdução a Tecnologia Web Jovens do Saber Digital Inclusão Sócio-Digital Fortaleza - Ceará, Brasil Sumário 1. O que é a Internet? 2. O

Leia mais

Ensino I nterativo Universidade Anhembi Morumbi. Multimídia I

Ensino I nterativo Universidade Anhembi Morumbi. Multimídia I Ensino I nterativo Universidade Anhembi Morumbi Multimídia I Objetivo Mostrar o que é preciso para o desenvolvimento de um Projeto para Web, apresentando os primeiros conceitos de HTML. Tópicos 1. Etapas

Leia mais

Maurício Samy Silva. Novatec

Maurício Samy Silva. Novatec Maurício Samy Silva Novatec Sumário Agradecimentos...13 Sobre o autor...13 Introdução...15 Para quem foi escrito este livro... 15 Convenções tipográficas... 16 Site do livro... 18 Capítulo 1 O que é (X)HTML?...20

Leia mais

1. Como criar uma conta

1. Como criar uma conta Tutorial MediaWiki 1. Como criar uma conta Para criar uma conta clique no botão, disponível canto superior direito, "Entrar". Será então mostrada a página de entrada na conta onde terá de introduzir os

Leia mais

WebDesign. Professor: Paulo Trentin paulo@paulotrentin.com.br http://www.paulotrentin.com.br. Escola CDI de Videira

WebDesign. Professor: Paulo Trentin paulo@paulotrentin.com.br http://www.paulotrentin.com.br. Escola CDI de Videira WebDesign Professor: Paulo Trentin paulo@paulotrentin.com.br http://www.paulotrentin.com.br Escola CDI de Videira Entendendo Alguns Conceitos Antes de prosseguirmos é importante ter em mente o motivo pelo

Leia mais

Apostila Básica de Informática Ensino Fundamental Volume 4

Apostila Básica de Informática Ensino Fundamental Volume 4 Apostila Básica de Informática Ensino Fundamental Volume 4 1 Introdução:... 3 A Tela do Excel... 3 Criando uma nova pasta de trabalho... 3 Diferença entre Pasta de Trabalho e Planilha.... 4 Salvando sua

Leia mais

Introdução ao HTML Hypertext Markup Language

Introdução ao HTML Hypertext Markup Language Introdução ao HTML Hypertext Markup Language Prof. Marcus Ramos Tags São comandos que são inseridos juntamente com o texto a ser apresentado, e que definem a forma como o mesmo será exibido na tela do

Leia mais

Como criar uma página WEB

Como criar uma página WEB Como criar uma página WEB Utilização de comandos HTML Luís Manuel Borges Gouveia versão 1.1 Dezembro, 1996 Requisitos necessários para criar ou editar uma página Web um navegador (browser): Netscape ou

Leia mais

Este arquivo é parte integrante do CD MEGA CURSOS Acesse - www.megacursos.com.br

Este arquivo é parte integrante do CD MEGA CURSOS Acesse - www.megacursos.com.br Pg 1 Introdução... Pg 2 Exemplo completo... Pg 3 Passo 2... Pg 4 Hyperlinks e Texto dentro de uma caixa... Pg 5 Tag para cores e Tabelas... Pg 6 Formatar o Texto... Pg 7 Download... Pg 8 Frame... Pg 9

Leia mais

WEB DESIGNER WEB DESIGNER

WEB DESIGNER WEB DESIGNER WEB DESIGNER 1 WEB DESIGNER INICIO DO CURSO DE HTML 4.0 Toda vez que você acessar um site (veja tópico Word Wide Web) por meios de domínios quando adiciona a URL na barra de endereço, do seu Navegador

Leia mais

HTML. Leandro Sorgetz, Roberto Pretto

HTML. Leandro Sorgetz, Roberto Pretto HTML Leandro Sorgetz, Roberto Pretto Faculdades de Informática de Taquara Curso de Sistemas de Informação Fundação Educacional Encosta Inferior do Nordeste Av. Oscar Martins Rangel, 4500 Taquara RS Brasil

Leia mais

INTRODUÇÃO AO DESENVOLVIMENTO WEB. PROFª. M.Sc. JULIANA H Q BENACCHIO

INTRODUÇÃO AO DESENVOLVIMENTO WEB. PROFª. M.Sc. JULIANA H Q BENACCHIO INTRODUÇÃO AO DESENVOLVIMENTO WEB PROFª. M.Sc. JULIANA H Q BENACCHIO As imagens são armazenadas em forma de arquivos, principalmente PNG (para desenhos) ou JPG (para fotos) Para incluir imagens usa-se

Leia mais

WWW - World Wide Web

WWW - World Wide Web WWW World Wide Web WWW Cap. 9.1 WWW - World Wide Web Idéia básica do WWW: Estratégia de acesso a uma teia (WEB) de documentos referenciados (linked) em computadores na Internet (ou Rede TCP/IP privada)

Leia mais

Desenvolvimento em Ambiente Web. Prof. André Y. Kusumoto andrekusumoto.unip@gmail.com

Desenvolvimento em Ambiente Web. Prof. André Y. Kusumoto andrekusumoto.unip@gmail.com Desenvolvimento em Ambiente Web Prof. André Y. Kusumoto andrekusumoto.unip@gmail.com No início A Web é criada em 1989, para ser um padrão de publicação e distribuição de textos científicos e acadêmicos.

Leia mais

MINISTÉRIO DA EDUCAÇÃO

MINISTÉRIO DA EDUCAÇÃO MINISTÉRIO DA EDUCAÇÃO SECRETARIA DE EDUCAÇÃO PROFISSIONAL E TECNOLÓGICA INSTITUTO FEDERAL DE EDUCAÇÃO, CIÊNCIA E TECNOLOGIA DE SANTA CATARINA CAMPUS SÃO JOSÉ TECNICO EM TELECOMUNICAÇÕES REDES DE COMPUTADORES

Leia mais

Sumário INTRODUÇÃO 3 DICAS PARA CRIAR UM BOM SITE 4

Sumário INTRODUÇÃO 3 DICAS PARA CRIAR UM BOM SITE 4 Sumário Todos os direitos reservados e protegidos pela Lei 5.988 de 14/12/73. Nenhuma parte deste livro, sem prévia autorização por escrito de Celta Informática, poderá ser reproduzida total ou parcialmente,

Leia mais

CAPÍTULO 06. AG8 Informática. Este capítulo abrangerá :

CAPÍTULO 06. AG8 Informática. Este capítulo abrangerá : 3ª PARTE CAPÍTULO 06 Este capítulo abrangerá : 1. Tags de formatação de texto lógicas e físicas 2. Texto pré-formatado 3. Endereços, citações e comentários 38 TAGS DE FORMATAÇÃO Assim como em um editor

Leia mais

mkdir /srv/www/default/html/calculadora/imagens mkdir /srv/www/default/html/calculadora/blocos

mkdir /srv/www/default/html/calculadora/imagens mkdir /srv/www/default/html/calculadora/blocos Programando em PHP www.guilhermepontes.eti.br lgapontes@gmail.com Criando uma Calculadora Primeiramente deve se criar uma estrutura para armazenar os arquivos necessários para o funcionamento da calculadora.

Leia mais

Introdução 1ª Parte Web Web Web Web Browsers Editores Editores Etiquetas (tags) base indica que se trata de uma página escrita em linguagem HTML. Esta deve abranger todo o código;

Leia mais

CURSO: PROGRAMADOR WEB DISCIPLINA: HTML 4.0.1

CURSO: PROGRAMADOR WEB DISCIPLINA: HTML 4.0.1 ESCOLA ESTADUAL PROF. JOSÉ BARROSO TOSTES PROFESSOR: ESP. ANDREW RODRIGUES CURSO: PROGRAMADOR WEB DISCIPLINA: HTML 4.0.1 CURSO: PROGRAMADOR WEB DISCIPLINA: HTML 4.0.1 1 APOSTILA DE INTRODUÇÃO À LINGUAGEM

Leia mais

Aula 4: Cores e Multimídia

Aula 4: Cores e Multimídia Aula 4: Cores e Multimídia Nesta quarta aula vamos entender os conceitos de cores na WEB. Veremos como definir a cor da página e dos textos. Aprenderemos a incluir recursos multimídia de som e vídeo em

Leia mais

Quem sou eu? Ana Paula Alves de Lima. Formação: E-mail: paulapeniel@gmail.com

Quem sou eu? Ana Paula Alves de Lima. Formação: E-mail: paulapeniel@gmail.com Introdução a Linguagem HTML: Conceitos Básicos e Estrutura ANA PAULAALVES DE LIMA INFORMÁTICA E METODOLOGIA - SUBSEQUENTE 1 Quem sou eu? Ana Paula Alves de Lima Formação: Bacharel em Sistemas de Informação;

Leia mais

INTRODUÇÃO À PROGRAMAÇÃO

INTRODUÇÃO À PROGRAMAÇÃO Departamento de Informática INTRODUÇÃO À PROGRAMAÇÃO Apontamentos de (HyperText Markup Language) Prof. Carlos Pampulim Caldeira Évora, Março de 2003 ÍNDICE 1. O QUE É O?...1 1.1 INTRODUÇÃO...1 1.2 QUE

Leia mais

Roteiro de Estudos e Atividades Avaliativas HTML

Roteiro de Estudos e Atividades Avaliativas HTML Roteiro de Estudos e Atividades Avaliativas HTML Faça essa atividade de forma individual ou em dupla, faça o máximo de questões que conseguir. Pesquise na Web o significado das tags e utilize-as para alcançar

Leia mais

Algoritmia e Programação APROG HTML. Introdução. Nelson Freire (ISEP DEI-APROG 2014/15) 1/15

Algoritmia e Programação APROG HTML. Introdução. Nelson Freire (ISEP DEI-APROG 2014/15) 1/15 APROG Algoritmia e Programação HTML Introdução Nelson Freire (ISEP DEI-APROG 2014/15) 1/15 O que é o HTML? Sumário Geral Documento HTML Elemento HTML Estrutura Básica de Documento HTML Elementos Títulos

Leia mais

PROGRAMAÇÃO WEB DO LADO DO CLIENTE

PROGRAMAÇÃO WEB DO LADO DO CLIENTE PROGRAMAÇÃO WEB DO LADO DO CLIENTE FORMULÁRIO Na linguagem HTML é permitido que o usuário interaja com o servidor através de formulários ligados a scripts desenvolvidos em linguagens como PHP, Servlets,

Leia mais

1.Introdução ao HTML página 04. 2.O que é o HTML página 05. 3.O que são tags HTML página 05. 4.Iniciando com HTML página 10

1.Introdução ao HTML página 04. 2.O que é o HTML página 05. 3.O que são tags HTML página 05. 4.Iniciando com HTML página 10 Apostila de Índice HTML 1.Introdução ao HTML página 04 2.O que é o HTML página 05 3.O que são tags HTML página 05 4.Iniciando com HTML página 10 5.Mais tags HTML página 12 6.Atributos página 14 7.Links

Leia mais

APOSTILA DE HTML. Programa de Educação Tutorial Curso de Engenharia de Telecomunicações Universidade Federal Fluminense. Rafael de Oliveira Ribeiro

APOSTILA DE HTML. Programa de Educação Tutorial Curso de Engenharia de Telecomunicações Universidade Federal Fluminense. Rafael de Oliveira Ribeiro APOSTILA DE HTML Programa de Educação Tutorial Curso de Engenharia de Telecomunicações Universidade Federal Fluminense Autor atual: Últimas atualizações: Robertha Pereira Pedroso Pâmella Almeida Gomes

Leia mais

Comandos Básicos de HTML

Comandos Básicos de HTML Comandos Básicos de HTML Agora iniciaremos o estudo ao HTML, para você fazer o site utilize o bloco de notas do windows(notepad) ou um outro editor de texto como Notepad++, Geany ou PSPAD. Para fazer você

Leia mais

4. Características Gerais das Tabelas do HTML

4. Características Gerais das Tabelas do HTML 4. Características Gerais das Tabelas do HTML Curso de Extensão em HTML PUCRS A criação de uma tabela começa pelo tag e termina pelo tag. Antes do texto de cada linha da tabela você deve inserir o tag

Leia mais

Programação para a Web - I. José Humberto da Silva Soares

Programação para a Web - I. José Humberto da Silva Soares Programação para a Web - I José Humberto da Silva Soares Fundamentos de Internet Rede Mundial de Computadores; Fornece serviços, arquivos e informações; Os computadores que têm os recursos são chamados

Leia mais

Coleção - Análises de email marketing em clientes de email

Coleção - Análises de email marketing em clientes de email Coleção - Análises de email marketing em clientes de email Introdução Nesta útima edição da Coletânea de Análises de Email Marketing em Clientes de Email, apresentamos os estudos dos clientes Yahoo! Mail

Leia mais

Publicação web. Será ativado um assistente de publicação que lhe guiará em todas as etapas a seguir apresentadas.

Publicação web. Será ativado um assistente de publicação que lhe guiará em todas as etapas a seguir apresentadas. Publicação web Pré requisitos: Lista de questões Formulário multimídia Este tutorial tem como objetivo, demonstrar de maneira ilustrativa, todos os passos e opções que devem ser seguidos para publicar

Leia mais

UNIVERSIDADE FEDERAL DO PARANÁ FRONTPAGE 2000

UNIVERSIDADE FEDERAL DO PARANÁ FRONTPAGE 2000 UNIVERSIDADE FEDERAL DO PARANÁ PRÓ-REITORIA DE RECURSOS HUMANOS E ASSUNTOS ESTUDANTIS COORDENAÇÃO DE DESENVOLVIMENTO DE RECURSOS HUMANOS UNIDADE DE QUALIFICAÇÃO FRONTPAGE 2000 Módulo I Hamilton Chaiben

Leia mais

Microsoft Office Excel

Microsoft Office Excel 1 Microsoft Office Excel Introdução ao Excel Um dos programas mais úteis em um escritório é, sem dúvida, o Microsoft Excel. Ele é uma planilha eletrônica que permite tabelar dados, organizar formulários,

Leia mais

HTML HTML. Criação de Páginas WEB. Caracteres especiais < < > > Sessão 10

HTML HTML. Criação de Páginas WEB. Caracteres especiais < < > > Sessão 10 HTML Sessão 10 HTML HTML permite que caracteres especiais sejam representados por sequências de escape, indicadas por três partes: um & inicial, um número ou cadeia de caracteres correspondente ao caractere

Leia mais

Programação para Internet

Programação para Internet Programação para Internet Aula 09 Os direitos desta obra foram cedidos à Universidade Nove de Julho Este material é parte integrante da disciplina oferecida pela UNINOVE. O acesso às atividades, conteúdos

Leia mais

APOSTILA DE FRONTPAGE 2000

APOSTILA DE FRONTPAGE 2000 APOSTILA DE FRONTPAGE 2000 Pagina 1 de 14 Introdução A cada dia verificamos que a informação é uma ferramenta de extrema necessidade em qualquer negócio. Sabendo disto, diversas empresas investem em tecnologias

Leia mais

Mozart de Melo Alves Júnior

Mozart de Melo Alves Júnior Mozart de Melo Alves Júnior WORD 2000 INTRODUÇÃO: O Word é um processador de texto com recursos de acentuação, formatação de parágrafo, estilo de letras diferentes, criação de tabelas, corretor ortográfico,

Leia mais

XXIV SEMANA MATEMÁTICA

XXIV SEMANA MATEMÁTICA XXIV SEMANA ACADÊMICA DA MATEMÁTICA Minicurso: Produção de Páginas Web para Professores de Matemática Projeto de Extensão: Uma Articulação entre a Matemática e a Informática como Instrumento para a Cidadania

Leia mais

APOSTILA. Curso de HTML com PHP HTML. Pablo Dapont

APOSTILA. Curso de HTML com PHP HTML. Pablo Dapont APOSTILA Curso de HTML com PHP HTML Pablo Dapont PET Computação - sala 202 Prédio 43424 ( prédio dos laboratórios ) Instituto de Informática - UFRGS email : pet@inf.ufrgs.br Av. Bento Gonçalves, 9500 bloco

Leia mais

OS LINKS Os termos que aparecem em destaque na página, geralmente sublinhados e em cores diferentes, são textos que indicam uma ligação hipertexto.

OS LINKS Os termos que aparecem em destaque na página, geralmente sublinhados e em cores diferentes, são textos que indicam uma ligação hipertexto. Apostila de web estático Prof. Eduardo 2 CAPÍTULO PADRÕES DE FUNDO Uma Home page pode conter uma textura como padrão de fundo, um arquivo no formato gif ou jpg, ou utilizar as cores do padrão RGB. A notação

Leia mais

Módulo 11 A Web e seus aplicativos

Módulo 11 A Web e seus aplicativos Módulo 11 A Web e seus aplicativos Até a década de 90, a internet era utilizada por acadêmicos, pesquisadores e estudantes universitários para a transferência de arquivos e o envio de correios eletrônicos.

Leia mais

PDI 1 - Projeto e Design de Interfaces Web

PDI 1 - Projeto e Design de Interfaces Web Introdução a HTML e XHTML Elementos básicos parte 2 Professor: Victor Hugo L. Lopes Agenda: --Adicionando imagens; --Trabalhando com vídeos e sons em HTML; Disponível em http://wp.me/p48yvn-43 2 Inserindo

Leia mais

Por que aprender a fazer tabelas? Tabelas auxiliam na formatação da página, e é por essa razão que eles foram acrescentados à linguagem html

Por que aprender a fazer tabelas? Tabelas auxiliam na formatação da página, e é por essa razão que eles foram acrescentados à linguagem html Por que aprender a fazer tabelas? Tabelas auxiliam na formatação da página, e é por essa razão que eles foram acrescentados à linguagem html Tabela de dados Tabelas para alinhar texto Tabelas para conter

Leia mais

Formulários. Permite ao usuário enviar informações por meio da página, em forma de pesquisa, mala direta, compra eletrônica e outros.

Formulários. Permite ao usuário enviar informações por meio da página, em forma de pesquisa, mala direta, compra eletrônica e outros. Formulários Permite ao usuário enviar informações por meio da página, em forma de pesquisa, mala direta, compra eletrônica e outros. O formulário depende de outros programas no servidor, para receber e

Leia mais

Iniciando o Word 2010. Criar um novo documento. Salvando um Documento. Microsoft Office Word

Iniciando o Word 2010. Criar um novo documento. Salvando um Documento. Microsoft Office Word 1 Iniciando o Word 2010 O Word é um editor de texto que utilizado para criar, formatar e imprimir texto utilizado para criar, formatar e imprimir textos. Devido a grande quantidade de recursos disponíveis

Leia mais

Neste capítulo veremos como se trabalha com fórmulas e funções que são as ferramentas que mais nos ajudam nos cálculos repetitivos.

Neste capítulo veremos como se trabalha com fórmulas e funções que são as ferramentas que mais nos ajudam nos cálculos repetitivos. Fórmulas e Funções Neste capítulo veremos como se trabalha com fórmulas e funções que são as ferramentas que mais nos ajudam nos cálculos repetitivos. Operadores matemáticos O Excel usa algumas convenções

Leia mais

Coleção - Análises de email marketing em clientes de email

Coleção - Análises de email marketing em clientes de email Coleção - Análises de email marketing em clientes de email Thunderbird e Terra Nesta terceira edição da Coletânea de Análises de Email Marketing em Clientes de Email, apresentamos os estudos do webmail

Leia mais

Programação para Internet

Programação para Internet Programação para Internet Aula 07 Os direitos desta obra foram cedidos à Universidade Nove de Julho Este material é parte integrante da disciplina oferecida pela UNINOVE. O acesso às atividades, conteúdos

Leia mais

José Frazão. Página 2 de 19

José Frazão. Página 2 de 19 Página 2 de 19 Índice Página 1. Introdução 4 2. História e características 5 3. Sintaxe 5 3.1. Texto 7 3.2. Comandos básicos mais utilizados 8 3.3. Fundo (Backgrounds) e cores 10 3.4. Tabela de acentos

Leia mais

JavaScript. JavaScript é uma linguagem de script usada em navegadores web. É uma linguagem dinâmica, estruturada e orientada em objetos.

JavaScript. JavaScript é uma linguagem de script usada em navegadores web. É uma linguagem dinâmica, estruturada e orientada em objetos. JavaScript JavaScript é uma linguagem de script usada em navegadores web. É uma linguagem dinâmica, estruturada e orientada em objetos. Pode ser usada dentro do próprio arquivo HTML ou estruturada em um

Leia mais

Excel 2010 Modulo II

Excel 2010 Modulo II Excel 2010 Modulo II Sumário Nomeando intervalos de células... 1 Classificação e filtro de dados... 3 Subtotais... 6 Validação e auditoria de dados... 8 Validação e auditoria de dados... 9 Cenários...

Leia mais