Unidade 1: Rua Bispo Rodovalino N 190 Centro Taubat SP (12) 3622-4290 Unidade 2: Av. Felipe Callieira N 50 sob loja- JD Teresa M- Itapecerica da Serra SP (11) 4666-1109 2
Sumrio Aula 01- Introduo .................................................................................... 4 Tim Berners-Lee ........................................................................................................................................................ 4 O que HTML? ......................................................................................................................................................... 5 Para que devo usar HTML? ....................................................................................................................................... 5 Preciso estar online? ................................................................................................................................................ 6 O que so tags? ........................................................................................................................................................ 6 Maisculas ou Minsculas? ...................................................................................................................................... 6 O que necessrio para trabalhar com HTML? ....................................................................................................... 6 Salvando arquivos em HTML .................................................................................................................................... 7 Estrutura Bsica ........................................................................................................................................................ 8 Tags de Formatao .................................................................................................................................................. 9 Cabealhos ................................................................................................................................................................ 9 <br> e <p> ................................................................................................................................................................. 9 Como ver a fonte HTML ............................................................................................................................................ 9 Exerccio Aula 01 ........................................................................................ 10 Aula 02- Formatao .................................................................................. 11 Font ......................................................................................................................................................................... 11 Align ........................................................................................................................................................................ 11 Cores em ingls ....................................................................................................................................................... 11 Cores em hexadecimal ............................................................................................................................................ 12 Exerccio 02 ............................................................................................... 14 Aula 03- Listas ............................................................................................ 15 Lista no-ordenada (Marcadores) .......................................................................................................................... 15 Tipos de marcadores .............................................................................................................................................. 15 Lista ordenada (Numeraes) ................................................................................................................................ 15 Tipos de numeraes .............................................................................................................................................. 16 Listas de Definio .................................................................................................................................................. 16 Exerccio 03 ............................................................................................... 17 Advanced Graphic Computing and Arts
Unidade 1: Rua Bispo Rodovalino N 190 Centro Taubat SP (12) 3622-4290 Unidade 2: Av. Felipe Callieira N 50 sob loja- JD Teresa M- Itapecerica da Serra SP (11) 4666-1109 3
Unidade 1: Rua Bispo Rodovalino N 190 Centro Taubat SP (12) 3622-4290 Unidade 2: Av. Felipe Callieira N 50 sob loja- JD Teresa M- Itapecerica da Serra SP (11) 4666-1109 4
Aula 01- Introduo As pessoas imaginam que muito difcil construir um website. Isto no verdade! Qualquer um pode aprender como construir um website. Se voc continuar lendo, estar apto a construir um website em uma hora. Outros pensam - erroneamente - que so necessrios softwares avanados e caros para construir websites. verdade que existem muitos softwares capazes de criar um website para voc. Alguns mais fechados que outros. Mas, se voc pretende trilhar o caminho certo, dever criar voc mesmo o website. Felizmente, isto simples voc j tem a sua disposio todos os softwares que precisa. O objetivo desta mini apostila fornecer os conhecimentos bsicos que permitiro construir um website de forma correta. necessrio que voc se empenhe, pratique e consolide os ensinamentos aqui contidos. Mas, no se aborrea - aprender como construir um website divertido e bastante satisfatrio quando voc trilha o caminho certo de aprendizado. Ns sugerimos que voc estude somente duas ou trs lies por dia e pratique bastante tudo o que voc aprender em cada lio.
Tim Berners-Lee Sir Timothy John Berners-Lee nasceu em Londres, em 8 de junho de 1955. Em 1989, na poca em que trabalhava no Laboratrio Europeu de Fsica de Partculas (CERN), na Sua, o fsico Tim Berners-Lee props um projeto de hipertexto global, que viria a ser conhecido como a World Wide Web. A tecnologia permitia que as pessoas trabalhassem em conjunto, combinando seus conhecimentos em uma rede de documentos de hipertexto. Ele escreveu o cdigo do primeiro servidor WWW e o primeiro editor de hipertexto para a plataforma NeXTStep. Esse trabalho foi disponibilizado dentro do CERN, em 1990, e na Internet em geral, em 1991. At 1993, Tim continuou a trabalhar no projeto da Web, coordenando o feedback dos usurios atravs da Internet. Suas especificaes iniciais de HTTP e HTML foram refinadas e discutidas em crculos maiores como a disseminao da tecnologia web. Tim Berners-Lee graduou-se pela Universidade de Oxford, Inglaterra, em 1976. L, ele construiu seu primeiro computador usando portas TTL, um processador M6800 e uma Advanced Graphic Computing and Arts
Unidade 1: Rua Bispo Rodovalino N 190 Centro Taubat SP (12) 3622-4290 Unidade 2: Av. Felipe Callieira N 50 sob loja- JD Teresa M- Itapecerica da Serra SP (11) 4666-1109 5
televiso velha. Depois passou dois anos na Plessey Telecommunications, em Dorset, uma grande fabricante de equipamentos de telecomunicaes no Reino Unido, trabalhando com sistemas de transaes distribudas, rels de mensagem e tecnologia de cdigo de barras. Em 1978, Tim deixou Plessey e entrou na DG Nash, no mesmo condado, onde escreveu, entre outras coisas, um software para impressoras inteligentes e um sistema operacional multitarefa. Em seguida, passou um ano e meio como consultor independente, incluindo uma temporada de seis meses (junho-dezembro de 1980) como engenheiro de software do CERN. L, ele escreveu para uso pessoal o Enquire, seu primeiro software para armazenamento de informaes, que inclua o uso de associaes aleatrias. Esse programa foi base conceitual para o desenvolvimento futuro da World Wide Web. De 1981 at 1984, Tim trabalhou na Image Computer Systems, na rea de design tcnico, incluindo firmware de controle em tempo real, grficos e softwares de comunicaes, e uma linguagem macro genrica. Em 1984, ele passou a trabalhar no CERN em sistemas distribudos de tempo real para aquisio de dados cientficos e controle do sistema. Em 1994, Tim fundou a World Wide Web Consortium (W3C) no, ento, Laboratrio de Cincia da Computao (LCS) que se fundiu com o Laboratrio de Inteligncia Artificial, em 2003, para tornar-se o Laboratrio de Cincia da Computao e Inteligncia Artificial (CSAIL) no Instituto de Tecnologia de Massachusetts (MIT). Desde esse tempo, ele serviu como diretor do World Wide Web Consortium, uma organizao de padres Web que desenvolve tecnologias interoperveis (especificaes, diretrizes, software e ferramentas) para levar a Web ao seu potencial pleno. O W3C tem ramificaes no MIT, no ERCIM na Europa, e na Universidade de Keio, no Japo, bem como escritrios ao redor do mundo.
O que HTML? HTML (Hiper Text Markup Language) uma linguagem que possibilita apresentar informaes na Internet. Aquilo que voc v quando abre uma pgina na Internet a interpretao que seu navegador faz do HTML.
Para que devo usar HTML? Se voc quer construir websites ter que conhecer HTML. Mesmo que voc use um programa para criar seu website, tal como o Dreamweaver, um conhecimento bsico de HTML ser necessrio para tornar as coisas mais simples e para criar um website de melhor qualidade. A boa notcia que HTML fcil de aprender e de usar.
Advanced Graphic Computing and Arts
Unidade 1: Rua Bispo Rodovalino N 190 Centro Taubat SP (12) 3622-4290 Unidade 2: Av. Felipe Callieira N 50 sob loja- JD Teresa M- Itapecerica da Serra SP (11) 4666-1109 6
Preciso estar online? No. Voc no precisa estar conectado Internet - tanto para ler esta apostila como para construir seus websites. Se voc quer desconectar-se enquanto l esta apostila, voc poder imprimir ou simplesmente desconectar-se da Internet enquanto l a tela. Voc pode construir seu website no HD do seu computador e fazer o upload para a Internet quando terminar.
O que so tags? Tags so rtulos usados para informar ao navegador como deve ser apresentado o website. Todas as tags tm o mesmo formato: comeam com um sinal de menor "<" e acabam com um sinal de maior ">". Genericamente falando, existem dois tipos de tags - tags de abertura: <comando> e tags de fechamento: </comando>. A diferena entre elas que na tag de fechamento existe um barra "/". Tudo que estiver contido entre uma tag de abertura e uma tag de fechamento ser processado segundo o comando contido na tag.
Exemplo: <b>Este texto deve ser em negrito. Brasil</b>
Maisculas ou Minsculas? Para a maioria dos navegadores indiferente se voc usa maiscula, minscula ou mesmo uma mistura delas.<COMANDO>, <comando> ou <CoMaNdo> normalmente tem o mesmo efeito. Contudo a maneira correta usar minsculas. Ento, crie o hbito de escrever suas tags com minsculas.
O que necessrio para trabalhar com HTML? muito provvel que voc j tenha as ferramentas que precisa. Voc tem um "navegador". Navegador um programa que permite visualizar e navegar por pginas na Internet. Voc est lendo est pgina em um navegador. No importa qual navegador voc usa. O mais comum o Microsoft Internet Explorer. Mais existem outros, tais como, Opera e Mozilla Firefox que podem ser usados. Advanced Graphic Computing and Arts
Unidade 1: Rua Bispo Rodovalino N 190 Centro Taubat SP (12) 3622-4290 Unidade 2: Av. Felipe Callieira N 50 sob loja- JD Teresa M- Itapecerica da Serra SP (11) 4666-1109 7
Voc j deve ter ouvido falar ou at mesmo pode j ter usado programas tais como, Microsoft FrontPage, Macromedia Dreamweaver ou mesmo Microsoft Word, que podem - pelo menos anunciam que podem - criar websites para voc. Por ora, esquea estes programas! Eles no tm qualquer utilidade para voc na tarefa de codificar seu website. Voc precisar de um simples editor de textos. Se voc tem instalado o Windows, poder usar o Notepad (Bloco de Notas), que normalmente pode ser encontrado na pasta Acessrios. Se preferir poder utilizar um programa mais avanado como Notepad ++ que pode ser obtido no site do www.baixaki.com.br
Salvando arquivos em HTML No Notepad v ao menu "Arquivo" no topo da janela e escolha a opo "Salvar como...". Escolha "Todos os arquivos" no box "Salvar como tipo". Isto muito importante - caso voc no faa isto, o arquivo ser salvo como texto e no como documento HTML. Advanced Graphic Computing and Arts
Unidade 1: Rua Bispo Rodovalino N 190 Centro Taubat SP (12) 3622-4290 Unidade 2: Av. Felipe Callieira N 50 sob loja- JD Teresa M- Itapecerica da Serra SP (11) 4666-1109 8
Salve seu documento com o nome "pagina1.htm" (a extenso ".htm" indica que se trata de um documento HTML. A extenso ".html" d o mesmo resultado. Eu sempre uso ".htm", mas voc pode escolher a que voc preferir .htm ou .html). Voc pode salvar o documento onde voc quiser no seu HD - esteja certo de salvar em um lugar que depois voc possa achar com facilidade.
Estrutura Bsica <html> <head> <title> Minha primeira pgina web </title> </head> <body> <p>Hurrah! Esta a minha primeira pgina web.</p> </body> </html>
Advanced Graphic Computing and Arts
Unidade 1: Rua Bispo Rodovalino N 190 Centro Taubat SP (12) 3622-4290 Unidade 2: Av. Felipe Callieira N 50 sob loja- JD Teresa M- Itapecerica da Serra SP (11) 4666-1109 9
Tags de Formatao <b> este texto est em negrito </b> <i> este texto est em itlico </i> <u> este texto est sublinhado </u> <s> este texto est riscado </s>
<br> e <p> <br> Quebra de Linha <p> Criao de pargrafo
Como ver a fonte HTML Voc j viu uma pgina Web e imaginou "Como eles fazem isso"? Para descobrir, simplesmente clique na opo EXIBIR na barra de ferramentas do seu navegador e selecione CDIGO FONTE ou PGINA FONTE. Uma janela ir abrir para mostrar-lhe a HTML real da pgina.
Advanced Graphic Computing and Arts
Unidade 1: Rua Bispo Rodovalino N 190 Centro Taubat SP (12) 3622-4290 Unidade 2: Av. Felipe Callieira N 50 sob loja- JD Teresa M- Itapecerica da Serra SP (11) 4666-1109 10
Exerccio Aula 01 Crie um novo documento com a estrutura bsica HTML, digite a seguinte Receita de Bolo e salve no seu pendrive como receita.html
Bolo de Iogurte
Ingredientes:
1 copo de iogurte natural 2 copos de farinha de trigo 2 copos de acar 4 ovos inteiros 1 colher (sopa) de fermento em p 1/2 copo de leo
Como fazer:
Bata bem todos os ingredientes no liquidificador , deixando o fermento por ltimo. Despeje a massa em uma assadeira redonda, com furo no meio, untada com manteiga e polvilhada com farinha. Leve ao forno pr-aquecido, 180C (mdio), at assar (ao enfiar no bolo um palito, ele deve sair limpo).
Observao: Utilize o copo de iogurte como medida dos outros ingredientes.
Advanced Graphic Computing and Arts
Unidade 1: Rua Bispo Rodovalino N 190 Centro Taubat SP (12) 3622-4290 Unidade 2: Av. Felipe Callieira N 50 sob loja- JD Teresa M- Itapecerica da Serra SP (11) 4666-1109 11
Aula 02- Formatao Font A tag font usada para definir a formatao completa do texto.
Exemplo: <font face=arial size=7 color=red> A vida bela </font>
Onde: Font- define a letra Size- tamanho, somente at 7 Color: cor da fonte
Align Por regra o texto aparece sempre alinhado esquerda, porm usando a tag align podemos alterar o alinhamento (o mesmo vale para imagens).
*o alinhamento justificado somente ser visualizado com um texto contendo vrios pargrafos.
Cores em ingls A cor do texto pode ser definida atravs do atributo cor. Cada cor por sua vez definida por um nmero hexadecimal que est composto por trs partes. Cada uma destas partes representa a contribuio do vermelho, verde e azul cor em questo.
Advanced Graphic Computing and Arts
Unidade 1: Rua Bispo Rodovalino N 190 Centro Taubat SP (12) 3622-4290 Unidade 2: Av. Felipe Callieira N 50 sob loja- JD Teresa M- Itapecerica da Serra SP (11) 4666-1109 12
Por outro lado possvel definir de uma maneira imediata algumas das cores mais frequentemente usadas para as que se criaram um nome mais memotcnico:
Cores em hexadecimal As cores possuem um papel muito importante na composio de webs. So indicadas em valores RGB, ou seja, que para conseguir uma cor qualquer misturaremos quantidades de Vermelho, Verde e Azul. Os valores RBG so indicados em numerao hexadecimal, em base 16. (Os dgitos podem crescer at 16). Como no existem tantos dgitos numricos se utilizam as letras da A F.
Advanced Graphic Computing and Arts
Unidade 1: Rua Bispo Rodovalino N 190 Centro Taubat SP (12) 3622-4290 Unidade 2: Av. Felipe Callieira N 50 sob loja- JD Teresa M- Itapecerica da Serra SP (11) 4666-1109 13
Para conseguir uma cor, misturaremos valores desta maneira: RRGGBB Onde cada valor pode crescer desde 00 at FF.
Exemplo: Como se mudaria a fonte para escrever em vermelho: <font color="#FF0000">Vermelho</font>
Ao Atributo cor lhe damos um valor RGB em formato hexadecimal. O caractere # se coloca ao princpio da expresso.
Outras cores:
Exemplo da web:
Advanced Graphic Computing and Arts
Unidade 1: Rua Bispo Rodovalino N 190 Centro Taubat SP (12) 3622-4290 Unidade 2: Av. Felipe Callieira N 50 sob loja- JD Teresa M- Itapecerica da Serra SP (11) 4666-1109 14
Exerccio 02 Abra a receita de Bolo de Iogurte criada na aula 01 e formate-a como o exemplo abaixo:
Advanced Graphic Computing and Arts
Unidade 1: Rua Bispo Rodovalino N 190 Centro Taubat SP (12) 3622-4290 Unidade 2: Av. Felipe Callieira N 50 sob loja- JD Teresa M- Itapecerica da Serra SP (11) 4666-1109 15
Aula 03- Listas Lista no-ordenada (Marcadores) Uma lista no ordenada uma lista de itens. As listas de itens so marcadas com bullets (tipicamente pequenos crculos pretos). Uma lista no ordenada comea com a tag <ul>. Cada item da lista comea com a tag <li>.
Aqui est como aparece em um navegador:
Dentro de um item de uma lista voc pode colocar pargrafos, quebras de linha, imagens, vnculos, outras listas, etc.
Tipos de marcadores Pode-se alterar o tipo de marcador usando o atributo: <ul type=square> ou <ul type=circle> ou <ul type=disc>
Lista ordenada (Numeraes) Uma lista ordenada tambm uma lista de itens. As listas de itens so marcadas com nmeros. Uma lista ordenada comea com a tag <ol>. Cada item da lista comea com a tag <li>.
Advanced Graphic Computing and Arts
Unidade 1: Rua Bispo Rodovalino N 190 Centro Taubat SP (12) 3622-4290 Unidade 2: Av. Felipe Callieira N 50 sob loja- JD Teresa M- Itapecerica da Serra SP (11) 4666-1109 16
Aqui est como aparece em um navegador:
Tipos de numeraes Pode-se alterar o tipo de numerao usando o atributo: <ol type=a> <ol type=A> <ol type=I> <ol type=i> <ol type=1>
Alm disso determina por qual nmero comear usando o atributo:
<ol start=5 type=a>
Listas de Definio Uma lista de definies no uma lista de itens. Esta uma lista de termos e explicaes dos termos. Uma lista de definies comea com a tag <dl>. Cada termo da lista de definies comea com a tag <dt>. Cada definio da lista de definies comea com a tag <dd>.
Aqui est como aparece em um navegador:
Advanced Graphic Computing and Arts
Unidade 1: Rua Bispo Rodovalino N 190 Centro Taubat SP (12) 3622-4290 Unidade 2: Av. Felipe Callieira N 50 sob loja- JD Teresa M- Itapecerica da Serra SP (11) 4666-1109 17
Exerccio 03 Digite os seguintes comandos e salve como listas.html
</body> </html> Advanced Graphic Computing and Arts
Unidade 1: Rua Bispo Rodovalino N 190 Centro Taubat SP (12) 3622-4290 Unidade 2: Av. Felipe Callieira N 50 sob loja- JD Teresa M- Itapecerica da Serra SP (11) 4666-1109 18
Aula 04- Imagens Imagem Algumas imagens num site Web podem torn-lo mais atrativo e mais convivial. No obstante, importante no exagerar, porque as imagens podem implicar um tempo de carregamento bastante longo e podem em certos casos prejudicar a legibilidade. A baliza IMG da linguagem HTML permite inserir imagens numa pgina HTML. A imagem pode estar situada no mesmo servidor que a pgina na qual inserida mas igualmente num outro servidor especificando a sua URL completa. S os seguintes formatos de imagens so aceites em standard nas especificaes do W3C: As imagens JPEG (.JPG) : as imagens que tm um grande nmero de cores sero bem comprimidas, o que quer dizer que ocuparo menos espao, por conseguinte necessitaro um tempo de carregamento menor) As imagens PNG : A sua dimenso fraca no caso de imagens com poucas cores ou com toms uniformes. Este formato permite, alm disso, ter imagens entrelaadas (que se afixam progressivamente) com uma profundidade de cores de 24 bits e imagens nas quais se define uma cor como transparente. As imagens GIF : Possuem as mesmas vantagens que as imagens PNG,mas o formato GIF est limitado a 256 cores no mximo e este formato no totalmente livre.
Propriedades da imagem:
SRC : Indica o lugar da imagem ( obrigatrio) ALIGN : Especifica o alinhamento da imagem em relao ao texto adjacente. Pode ter os valores: TOP, MIDDLE, e BOTTOM (em cima, ao meio e debaixo) ALT : Permite afixar um texto alternativo quando a imagem no se afixa. TITLE : Permite afixar uma bolha informativa aquando passa pela imagem com o cursor. WIDTH : Permite especificar a amplitude da imagem. HEIGHT : Permite especificar a altura da imagem.
Advanced Graphic Computing and Arts
Unidade 1: Rua Bispo Rodovalino N 190 Centro Taubat SP (12) 3622-4290 Unidade 2: Av. Felipe Callieira N 50 sob loja- JD Teresa M- Itapecerica da Serra SP (11) 4666-1109 19
Assim, para inserir uma imagem, ser necessrio introduzir uma baliza do tipo:
<IMG SRC="url_de_l_image" ALT="Texto que substitui a imagem" TITLE="Texto a afixar">
Imagem de Fundo Este exemplo demonstra como adicionar uma imagem de fundo em uma pgina HTML.
<html> <body background="background.jpg"> <h3>Veja: Uma imagem de fundo!</h3> <p>Tanto arquivos gif quanto jpg podem ser usados como plano de fundo HTML.</p> <p>Se a imagem for menor do que a pgina, a imagem ser repetida.</p> </body> </html>
Advanced Graphic Computing and Arts
Unidade 1: Rua Bispo Rodovalino N 190 Centro Taubat SP (12) 3622-4290 Unidade 2: Av. Felipe Callieira N 50 sob loja- JD Teresa M- Itapecerica da Serra SP (11) 4666-1109 20
Exerccio 04 Crie um novo documento e digite as seguintes tags:
OBS: salve 8 imagens em seu pendrive.
Advanced Graphic Computing and Arts
Unidade 1: Rua Bispo Rodovalino N 190 Centro Taubat SP (12) 3622-4290 Unidade 2: Av. Felipe Callieira N 50 sob loja- JD Teresa M- Itapecerica da Serra SP (11) 4666-1109 21
Aula 05- Marquee Animaes (marquee) possvel animar alguns textos com tipos especiais de formatao, sempre diretamente no cdigo fonte. importante notar que recursos de animao devem ser utilizados com cuidado e parcimnia, pois em uma pgina que j apresenta vrios motivos que chamam a ateno do leitor (figuras, cores, fontes) os efeitos animados so mais um deles, e seu uso pode ocasionar um resultado final cansativo e confuso. muito simples, basta utilizar a tag <marquee>
Vamos ver um exemplo:
<html> <head> <title> Exemplo </title> </head> <body> </marquee>Este texto aparecer na tela do computador movimentando-se da direita para a esquerda como um letreiro digital</marquee> </body> </html>
Note que o texto fica entre as tags <marquee> e </marquee> Tudo o que estiver entre essas duas tags, vai se movimentar. Voc, alm de movimentar textos, pode tambm, movimentar imagens.
Veja um outro exemplo: <marquee> <img src=imagem.jpg> </marquee>
Nesse caso a figura imagem.jpg ira se movimentar na tela da direita pra esquerda, constantemente e sem parar, igual a um letreiro digital, s que em vez de texto, uma imagem vai de mexer. Advanced Graphic Computing and Arts
Unidade 1: Rua Bispo Rodovalino N 190 Centro Taubat SP (12) 3622-4290 Unidade 2: Av. Felipe Callieira N 50 sob loja- JD Teresa M- Itapecerica da Serra SP (11) 4666-1109 22
Velocidade (scrollamount) A propriedade scrollamount utilizada para definir a velocidade da animao (FPS):
<marquee scrollamount=50> Rpido </marquee>
Direo (direction) H alguns atributos teis da tag marquee. Um dos mais interessantes o de direo. Voc pode definir pra qual direo seu objeto (texto ou imagem) vai se movimentar, pode ser pra esquerda, pra direita, pra cima ou pra baixo. Por padro o movimento da direita pra esquerda. veja um exemplo:
<marquee direction=right> Este exto vai se mexer da esquerda pra direita. </marquee>
As opes de direction so: - right, da esquerda para direita; - left vice-versa da anterior; - up, de baixo pra cima e - down de cima pra baixo.
Comportamento (behavior) Com este atributo, definimos o estilo de comportamento executado pela animao, podendo ser utilizado um entre os trs valores disponveis: Behavior="scroll" - Este o comportamento padro utilizado pela tag <marquee>. Faz com que o elemento entre por um lado da tela e saia pelo outro, em um ciclo.
Behavior="slide" - Faz com que o elemento entre por um lado da tela e se desloque at o outro lado. Behavior="alternate" - Faz com que o elemento se desloque de um lado para o outro da tela, em um ciclo.
Advanced Graphic Computing and Arts
Unidade 1: Rua Bispo Rodovalino N 190 Centro Taubat SP (12) 3622-4290 Unidade 2: Av. Felipe Callieira N 50 sob loja- JD Teresa M- Itapecerica da Serra SP (11) 4666-1109 23
Repeties (Loop) Com este atributo, podemos definir o ciclo de repeties que ser aplicada a um comportamento estabelecido para a animao: (Loop="3") A animao executar o movimento estabelecido por trs vezes. Loop="infinite" O ciclo de movimentos ser executado ininterruptamente.
Largura (width) Largura do marquee. Se no marcamos altura, se colocar na seguinte linha, como em um pargrafo distinto. Se marcarmos uma largura, a marquee tentar se mostrar na mesma linha onde a tivermos colocado. Se no houver espao para ela se realizar a conseguinte quebra de linha para mostr-la um pouco mais abaixo.
BGCOLOR A cor de fundo do marquee. Aceita o nome de uma cor HTML ou de um valor RGB de tal cor.
HSPACE e VSPACE Estes dois atributos servem para definir o nmero de pixel que deve aparecer entre o marquee e outros contedos da pgina, em horizontal e vertical.
Onmouseover e Onmouseout Estes atributos permitem criar uma interao de acordo com a ao do usurio. Exemplo: <html> <head> <title> Animaes </title> </head> <body bgcolor="purple"> <p align="center"> <marquee scrollamount="40" direction="up" height="400" onmouseover="this.stop();" onmouseout="this.start();"> <img src="jinx.png"> </p></marquee> </body> </html> Advanced Graphic Computing and Arts
Unidade 1: Rua Bispo Rodovalino N 190 Centro Taubat SP (12) 3622-4290 Unidade 2: Av. Felipe Callieira N 50 sob loja- JD Teresa M- Itapecerica da Serra SP (11) 4666-1109 24
Exerccio 05 Digite a estrutura bsica HTML com os seguintes comandos e salve como animao.html
<marquee behavior="alternate"> Seu texto aqui </marquee>
<marquee behavior="scroll" direction="up"> Seu texto aqui </marquee> <marquee behavior="scroll" direction="left" scrollamount="1"> Seu texto aqui </marquee> <marquee behavior="scroll" direction="left" scrollamount="10"> Seu texto aqui </marquee> <marquee behavior="scroll" direction="left" scrollamount="20"> Seu texto aqui </marquee> Advanced Graphic Computing and Arts
Unidade 1: Rua Bispo Rodovalino N 190 Centro Taubat SP (12) 3622-4290 Unidade 2: Av. Felipe Callieira N 50 sob loja- JD Teresa M- Itapecerica da Serra SP (11) 4666-1109 25
Aula 06- Links Criando links Para construir um link voc usa o que tem usado at agora para codificar HTML: uma tag. Uma simples e pequenina tag com um elemento e um atributo suficiente para voc construir links para onde quiser. A tag <a> usada para criar uma ncora de onde vincular, o atributo href usado para onde enderear o documento, e as palavras entre as tags de abertura e fechamento da ncora sero exibidas como um hipervnculo.
Exemplo:
<a href=http://www.advanced.art.br> Acesse </a>
Alvo (Target) Com o atributo alvo, voc pode definir onde o documento vinculado ser aberto. A linha abaixo abrir o documento em uma nova janela do navegador:
Cor dos links Para facilitar a navegao pode-se usar cores diferentes para os links: - LINK: a cor dos links no visitados - ALINK: a cor que os links devem piscar no momento em que so acessados - VLINK: a cor dos links j visitados Ou seja, os navegadores guardam a informao sobre os links j visitados pelo usurio em um certo perodo de tempo, assim muito til que a cor dos links j visitados seja diferente da cor dos no visitados, para orientar o visitante quanto ao que j viu ou no. Alm disso, o link pode piscar em outra cor, diferente dessas duas, no momento em que clicado pelo usurio, para chamar a ateno para aquele ponto. Advanced Graphic Computing and Arts
Unidade 1: Rua Bispo Rodovalino N 190 Centro Taubat SP (12) 3622-4290 Unidade 2: Av. Felipe Callieira N 50 sob loja- JD Teresa M- Itapecerica da Serra SP (11) 4666-1109 26
Exerccio 06 Crie um documento com a estrutura bsica HTML e digite os seguintes comandos para a criao de links: