Tecnologia WEB I. Prof. Erwin Alexander Uhlmann. Dos princípios do HTML, estruturação com CSS e automação com Javascript

Transcrição

1 1 Tecnologia WEB I Prof. Erwin Alexander Uhlmann Dos princípios do HTML, estruturação com CSS e automação com Javascript UHLMANN, Erwin Alexander. Dos princípios do HTML, estruturação com CSS e automação com Javascript. Instituto Siegen. Guarulhos, 2012.

2 2 Agradecimentos Agradeço à minha esposa Kátia por entender minha ausência, meus pais Mirtes e Günter por terem criado meu caminho, aos meus alunos que viabilizaram este trabalho e a todos os autores de livros e bibliotecas que consultei para que pudesse devidamente embasar este.

3 3 Sumário Agradecimentos...2 Introdução... 5 Aula Pré-requisitos... 6 Software... 6 HTML... 8 Títulos Aula Tabelas Cores Junção de colunas Junção de linhas Linhas e colunas fundidas Aula Listas Listas ordenadas Listas aninhadas e mistas Aula Formulários Exercício iframe Aula HTML Audio Vídeo... 24

4 4 CSS... Erro! Indicador não definido. Aula Aula Aula Aula Aula Aula Aula Aula Aula Aula Bibliografia... 58

5 5 Introdução O objetivo deste trabalho é introduzir as técnicas basilares para construção de um website seguindo os preceitos e padrões definidos pelo W3C ( o esperado pelo mercado e que seja simples de produzir, manter e modificar.

6 6 Aula 1 Pré-requisitos Software Amaya Este é o software referência em edição da marcação HTML. Criado pelo W3C, o Amaya é um editor WYSIWYG (What You See Is What You Get Editor visual de marcação HTML) que já aplica as definições do W3C com avisos de erros de codificação ou desconformidades. $ : Grátis. Avaliação:

7 7 Dreamweaver Este é o melhor! O problema é que é pago, e bem pago. Este editor da Adobe tem longa história de desenvolvimento. Atende diversas ferramentas que permitem até um usuário com pouco conhecimento criar uma página, além de suporte à diversas linguagens de programação e Banco de Dados. $: US$ 229,00 (13/12/2011) Avaliação: Expression Web A Microsoft definitivamente entrou para a briga dos editores web. Para encarar o Dreamweaver ela lançou o Expression Web 4, que pode ser avaliado como uma versão antiga, de uma ou duas gerações passadas, do software da Adobe. Pago mas com diversos recursos, segue a linha do principal concorrente. $: US$149,00 Avaliação:

8 8 Existem diversos editores HTML, ao longo deste trabalho, iremos utilizar o Amaya, pois além de gratuito é a referência. HTML Hypertext Markup Language é o significado do HTML, isto é, uma linguagem de marcação de hipertexto (texto comum também). O HTML básico segue a seguinte estrutura: <html> <! Isto é um comentário em HTML. Aqui começa a página.--> <head> <! Esta parte pertence ao cabeçalho--> <title>título da página </title> </head> <body> <! Aqui fica a parte visível do site--> <p>olá, seja benvindo ao seu primeiro site!</p> <! Você notou que as TAGs <...> sempre terminam com </...>?--> </body> </html> Agora é com você, Construa uma página usando o HTML com o título Página do...(seu nome), e com alguns conteúdos visíveis, seu são:

9 9 Página do XXX em título 1. Como??? <h1>página do XXX</h1> Exercício de escrita em marcação HTML em título 2. Como??? <h2>...</h2> Exercício 1 Título 3. Como??? Última chance! <h3>...</h3> Então, posso ir colocando <hx> enquanto quiser títulos? Não, você pode colocar de 1 até 6. E por que devo colocar títulos? GOOGLE!!! Se você não colocar títulos, ele não vai te ranquear devidamente, a isto se chama SEO (Search Engine Optimization). Saiba mais em: Outra coisa interessante, você notou que quando uma tag é aberta (<body>, <h1>) outra a encerra (</body>, </h1>)? Mas nem todas são assim, as tags que marcam conteúdos devem ser encerradas, as tags que são estruturantes, como <meta />, <hr /> e outras se autoencerram. Como? Vamos pegar o exemplo da linha horizontal, <hr />, depois da identificação da tag, adicione um espaço uma barra e feche. O interessante desta tag, assim como veremos em outras, você pode adicionar atributos. Vamos ver algumas (das 91 recomendas pelo W3C) tags e atributos: Elemento Descrição Atributos a Link accesskey = atalho de teclado (<a accesskey= l...) href = endereço de destino (<a href= link.html...) name = nome do elemento (<a name= nome...) target = onde vai abrir? _self, na mesma janela, _blank, em uma nova janela,_parent, na janela pai, _top, no topo do documento (<a target= _blank...) tabindex = ordem de uso da tecla TAB para usabilidade (<a tabindex= 0...) b Negrito <b>palavra</b> body Corpo background = imagem.jpg

10 10 bgcolor = cor de fundo (#FFFFFF) text = cor de todo texto contido no body link = cor dos links vlink = links visitados alink = links ativos hlink = ao passar o mouse sobre br Quebra de linha <br /> Observe que este elemento não marca nenhum texto, por isso se auto encerra. div Divisão Uma div (<div>...</div>)deve conter uma classe (<div class= topo >) e tudo o que for criado dentro desta div irá obedecer o que foi criado na classe topo (Veja mais em CSS) em Ênfase Itálico fieldset Caixa Cria um acaixa entorno de elementos comuns, apenas visual. form Formulári o Cria um elemento que o que estiver dentro dele, exceto textos do formulário, será enviado. method = post envia os dados de forma oculta e get que utiliza a url para enviar (veja mais na sessão formulário) h1 a h6 Título <h1></h1> align = center, left, right, justify alinhamento do texto head Cabeçalho Informações sobre o documento como o nome, documentos relacionados, idioma, autoria, palavras chave, entre outros. iframe Quadro Cria uma janela para outro documento <iframe src= documento.html width= 100 height= 100 scrolling= auto yes no frameborder= 1 align= center left right justify ></iframe>

11 11 img Imagem <img src= imagem.jpg width= 253 height= 128 align= bottom middle top left right alt= nome da imagem /> input Comunica ção Este é um elemento do formulário <input type= text = caixa de texto password = senha checkbox = caixa de ticar (tic check) radio = semelhante o check, mas permite apenas uma opção submit = botão de enviar file = para procurar arquivos no seu micro hidden = oculto. Para enviar informações. Image = um botão com uso de alguma imagem Button = sem ação, para uso do Javascript li Lista Marcador ou numerador em associação com a ul ou ol ol Ordinate Lista ordenada, numerada, associada ao li list option Opção Associada ao select p Parágrafo <p></p> Select Seleção <select><option value= XPTO >XPTO</option>...</select> O objetivo desta parte do curso é escrever não é programar, HTML não é uma linguagem, mas sim uma marcação uma página web que seja válida, mas por que validar uma página? Simples, todos navegadores abrirão? Todos funcionarão da mesma forma? Todos recursos serão válidos e apresentarão os mesmos resultados? Para validar uma página você deve estar de acordo com as regras definidas pelo W3C e pode ser consultado seu escritório no Brasil e a validação pelo endereço PRESTE

12 12 ATENÇÃO! Estes endereços são de suma importância e merecem ser adicionados como favoritos. Crie a página e submeta-a, seja via endereço num servidor ou via upload. Se a página estiver correta, o W3C lhe oferecerá um selo certificando sua página. para o HTML, Vamos criar a seguinte página: Figura 1 - Primeira página HTML Para tanto vamos começar pela estrutura básica. 1. <?xml version="1.0" encoding="iso "?> Nesta linha o documento é especificado como xml, codificado para o padrão europeu ocidental de fontes. 2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

13 13 " transitional.dtd"> DOCTYPE é o tipo de document de novo??? Sim, ele também pode ser um documento tipo... html público, seguindo as regras do W3C. 3. <html xmlns=" Aqui começa o html. Ele obedecerá aos padrões definidos pelo W3C no endereço referenciado. 4. <head> Na head que deve ser encerrada por </head> - estão as informações sobre o documento, como título - <title>aqui fica o título</title> - e as metatags. 5. <body> O body contém a parte visível do site. Títulos Para o título vamos utilizar a tag <h1>. Esta tag abre o título de maior tamanho e encerra com </h1>, desta forma: <h1>tecnologia Web I</h1> Estes títulos podem ir de h1 à h6. Para escrevermos os elementos textuais, vamos utilizar a tag <p>texto</p>. Existem diversos elementos textuais, mas vamos estuda-los aos poucos, conforme necessidade. Para navegar vamos utilizar a tag <a>link</a>. No entanto todo link deve ter um endereço, assim vamos adicionar o parâmetro href que é o endereço de destino, ficando <a href= pagina.html >Texto do link</a>. Podemos ainda informar que o navegador poderá abrir uma nova página, na mesma somente no topo quando dividida ou ainda na parte principal, usando o target, assim, <a href= paginas.html target= _parent >nome do link</a>. Assim como no link praticamente todas as tags de marcação aceitam mais parâmetros formatadores como cores, tamanhos e alinhamento. <h1><font color="#dd3333">tecnologia Web I</font></h1>

14 14 Para quebra de linha vamos utilizar o <br /> e outro elemento interessante é a linha horizontal <hr />. Note que a quebra de linha não aceita conteúdo (<br>texto</br>) nem aparece, por isso não há parâmetros, no entanto a tag hr aceita, como <hr width= 75% align= right />. Para as imagens os navegadores interpretam como tal quando há a tag <img />. Ele vai renderizar como imagem, então é preciso informar qual com o parâmetro src, <img src= imagem.jpg />, podendo estar na raiz, numa pasta (src= pasta/imagem.jpg ) ou num endereço da internet (src=" além deste elemento é importante informar o texto alternativo alt e as dimensões width e height. <img src=" alt="valid XHTML 1.0 Transitional" height="31" width="88" />

15 15 Aula 2 Tabelas Para as tabelas vamos construir um passo a passo. Toda tabela começa com a tag <table>. <table></table> - Abre a tabela <tr></tr> - Abre a linha <td></td> - Abre a linha Vamos construir uma pequena tabela de 2 x 2. Figura 2 - Tabela 2 x 2 <table border="0" width="50%"> <tr> <td bgcolor="#ff0000"> </td> <td bgcolor="#00ff00"> </td> </tr> <tr> <td bgcolor="#0000ff"> </td> <td bgcolor="#ffff00"> </td> </tr> </table> Explicando: <table border - borda com espessura 0 (invisível); width=50% - ocupe metade da página; <tr> - Linha; <td> - coluna; bgcolor cor de fundo;

16 16 Cores Tabela 1 - Tabela de cores Cor Código Preto = black # Branco = white Azul = blue Amarelo = yellow #FFFFFF #0000FF #FFFF00 Verde = green # Lima = lime #00ff00 Marron = maroon # Oliva = olive # Azul Celeste = aqua Lilás = fuchsia #00ffff #ff00ff Cinza = gray # Azul escuro = navy # Roxo = purple # Verde escuro = teal # Cinza claro = silver Vermelho = red #c0c0c0 #FF0000 Junção de colunas <table width="50%" border="1"> <tr> <td colspan="2"> </td> </tr> <tr> <td> </td> <td> </td> </tr> </table>

17 17 Junção de linhas <table width="50%" border="1"> <tr> <td rowspan="2"> </td> <td> </td> </tr> <tr> <td> </td> </tr> </table> Linhas e colunas fundidas <table border="1" width="50%"> <tr> <td colspan="4"> </td> </tr> <tr> <td rowspan="2"> </td> <td colspan="2" rowspan="2"> </td> <td> </td> </tr> <tr> <td> </td> </tr> <tr> <td colspan="3"> </td> <td> </td> </tr> </table>

18 18 Aula 3 Listas As listas podem ser ordenadas (ordinate [ol]) e desordenadas (unordinate[ul]). Vamos ver: Listas ordenadas 1. Item 1 2. Item 2 3. Item 3 Código HTML <ol> <li>item 1</li> <li>item 2</li> <li>item 3</li> </ol> Listas desordenadas Item 1 Item 2 Item 3 Código HTML <ul> <li>item 1</li> <li>item 2</li> <li>item 3</li> </ul> Listas aninhadas e mistas 1. Item Item Item Item 2 Item 2.1

19 19 Item Item Item 3.1 Item Item Item 3.2 Código HTML <ol> <li>item 1 <ol> <li>item 1.1 </li> </ol> </li> <ol> <li>item 1.2</li> </ol> <li>item 2 <ul> <li>item 2.1</li> <li>item 2.2</li> </ul> </li> <li>item 3 <ol> <li>item 3.1 <ul> <li>item 3.1.1</li> <li>item 3.1.2</li> </ul> </li> <li>item 3.2</li> </ol> </li> </ol>

20 20 Aula 4 Formulários Os formulários são os elementos de comunicação da Internet. Vamos estudar alguns tipos e elementos. Um formulário é iniciado com a tag <form> e se encerra com </form>. Para que se enviem as informações, poderemos utilizar duas formas, GET e POST, sendo que a GET utilizará a URL como meio de envio e a POST se valerá da comunicação direta de envio de dados para o servidor via navegador, assim, as informações do GET serão visíveis e reutilizáveis e as do POST ocultas e voláteis. Vamos ver: <form method= get action= aula4.html > </form> O parâmetro action é obrigatório, pois conterá o endereço para onde as informações serão enviadas. Dentro do form iremos inserir os elementos à serem preenchidos, os inputs. Texto <input type="text" name="nome" size="50" /> Área de Texto <textarea name= mensagem cols= 50 rows= 10 ></textarea> Checkbox <input name="checkbox" type="checkbox" checked="checked" value="sim!!! Desejo SPAMS!!!" />

21 21 Radio <input type="radio" name="genero" value="m" id="genero_0" /> Menu <select name="estado"> <option>escolha</option> <option value="sp">são Paulo</option> <option value="mg">minas Gerais</option> <option value="sc">santa Catarina</option> <option value="rs">rio Grande do Sul</option> </select> Submit <input type="submit" value="enviar" name="enviar" /> Existem outros tipos, mas como dito anteriormente, vamos aprender essencialmente o necessário para a confecção do site apresentado e complementar quando da necessidade. Exercício Construa um formulário para envio de um currículo. O candidato deverá cadastrar todos os dados necessários. Escolha um currículo como padrão e desenvolva. Sugestão: utm_medium=mail&utm_campaign=inf_mail_bienv_can iframe O iframe é um interessante comando presente no HTML para incluir uma página em outra, isto significa que nosso formulário pode ser único e incluído em diversas páginas. E? Bem, simples, e se o site tiver 100 páginas e seu cliente pede para incluir ou excluir um item? Fazer 100 vezes??? iframe! <iframe frameborder="0" scrolling="no" src="menu.html" height="15px"> </iframe>

22 22 Abra o iframe, indique a espessura de sua borda, se terá barra de rolagem, qual o caminho da página que será incorporada e suas dimensões e por fim, encerre. Simples!

23 23 Aula 5 HTML 5 O html 5 é a nova versão do html 4. Foi desenvolvido para a interoperabilidade e padronização de plataformas e navegadores (motores). Compare as estruturas do html4 e do 5, abaixo: HTML 4 HTML 5 <!DOCTYPE HTML> <html lang="pt-br"> <head> <meta charset="utf-8"> <link rel="stylesheet" type="text/css" href="estilo.css"> <title></title> </head> <body> <?xml version="1.0" encoding="iso "?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " transitional.dtd"> <html xmlns=" <head> <meta http-equiv="content-type" content="text/html; charset=iso " /> <title></title> </head> </body> </html> <body> </body> </html> É claro que são as duas estruturas base e validadas pelo W3C. Veja um formulário em html5: <form method="post" action="aula5.html"> Nome:<input type="text" name="nome" placeholder="digite seu nome!" autofocus required /><br /> Idade:<input type="range" min="10" max="100" value="18" name="idade" required /><br /> Busca:<input type="search" name="busca" placeholder="busca" /><br /> Telefone:<input type="number" pattern="\([0-9]{2)[\s][0-9]{4-[0-9]{4" name="telefone" /><br /> <input type=" " required name=" " /><br /> <input type="submit" value="enviar" /> </form>

24 24 Figura 3 Formulário em HTML5 Audio <audio src="09 Midnight.mp3" controls="controls"></audio> Vídeo <video src= video.mp4 controls= controls ></video>

25 25 Aula 6 CSS O CSS (Cascading Style Sheet), folha de estilo em cascata é uma codificação que pode ser incluído ou à parte da codificação html. Ele tem este nome por permitir a herança dos estilos de pai para filho, em cascata. Basicamente o CSS obedece a seguinte estrutura: Seletor {Propriedade: Valor Ou seja... O seletor é uma tag html ou uma classe que você poderá criar, como <h1>, <p>, <img>, ou no caso das classes,.topo,.navegacao,.rodape. Note que as classes são iniciadas com um ponto e NUNCA possuem acentos, espaços, caracteres especiais, etc. Exemplos: p { color: #FFFFFF Todos os parágrafos da página html terão cor branca. Observe que no CSS os sinais < e > não são escritos. h1 { color: #000000; background-color: #ffff00; font-style: italic; text-align: right; ou img { float: left; padding: 5px; No primeiro exemplo a cor dos títulos será preta, o background amarelo, com a fonte itálica alinhada à direita, no segundo exemplo a imagem está alinhada à esquerda, independente do texto, por isso o float e com um distanciamento de 5 pixels de qualquer objeto. Os dois casos são válidos, porém no primeiro, o ; separa as instruções, assim como no segundo que está separado por linhas. Há também os casos de multivaloração, como: h1{ font-family: "Times New Roman"; color: #AAFFDD;

26 26 text-shadow: /*0.1em 0 0.2em #88AAFF,*/ -0.1em 0 0.2em #88AAFF, 0 0.1em 0.2em #88AAFF/*, 0-0.1em 0.2em #88AAFF*/; font-size: 50px; text-align: center; Veja o seletor text-shadow, que cria sombras no texto que ele trabalha da seguinte forma: Deslocamento para a direita (para esquerda coloque um valor negativo), para cima (adivinhe como faz para ser para baixo...), sua difusão, 0 para cópia idêntica do texto e quanto maior o valor maior a difusão e por fim a cor. Ele pode ter várias sombras, por isso é multivalorado. Você viu o comentário /*...*/? Quando a fonte tiver espaço no nome, adicione aspas. Seletores class e id Um seletor class aplica-se à toda gama que for identificada como pertencente à uma classe, assim: p.destaque {color: #ff0000; Dentro de um parágrafo que possuir a classe destaque obedecerá à esta configuração, exemplo: <p class= destaque >Oferta!</p> Já para os seletores id, identificados pelo #, o css será aplicado somente à aquela instância, assim: #topo {font-family: Tahoma; No html: <div id= topo >Título</div> Quando queremos aplicar um design diferenciado à uma parte específica de uma página, criamos as divs. No CSS.topo { font-family: "Eras Demi ITC"; font-size: 50px; color: #0099CC; background-color: #000066; Alguns exemplos

27 27 /*Isto é um comentário*/ body{ margin: ; background-color:#009966; font-family:tahoma, Geneva, sans-serif; h1{ font-family:"times New Roman", Times, serif; font-size:50px; color:#009966; text-shadow:5px 5px 10px #FFF, -5px 5px 10px #FFF, 5px -5px 10px #FFF, -5px -5px 10px #FFF;/*exceto IE*/ p:first-letter{ font-family:tahoma, Geneva, sans-serif; color:#fff; letter-spacing:0.5em; font-size:50px; text-shadow: 5px 5px 10px #ccc, -5px 5px 10px #ccc, 5px -5px 10px #ccc, -5px -5px 10px #ccc;.classe_a{ margin:0 5px 10px 20px; padding:0 5px 10px 20px; background-color:#ccc; font-family:"courier New", Courier, monospace; color:#003;.classe_b{ background-color:#fff; float:right; width:10%; p{ border: solid 1px white; border-radius: 1em; box-shadow: black 0.5em 0.5em 0.3em; background:#fff; Listas Vamos criar uma lista? Item 1 Item 2 Item 3 Item 4 Item 5 A codificação será assim: HTML

28 28 <div id="navcontainer"> <ul id="navlist"> <li id="active"><a href="#" id="current">item one</a></li> <li><a href="#">item two</a></li> <li><a href="#">item three</a></li> <li><a href="#">item four</a></li> <li><a href="#">item five</a></li> </ul> </div> CSS None Para fazer com que os pontos da lista sejam quadrados, escreva o CSS assim: #navlist li { list-style-type: square; Mas por quê??? Você notou no html que o id da lista é navlist? O CSS pode ser feito com um. no lugar do #.Então os itens li dentro do navlist terão o tipo de estilo de lista quadrado, square. Ok, mãos à obra! Crie listas com outros elementos como imagens e símbolos do word. Agora vamos criar a seguinte lista: Neste caso foram criadas linhas separadoras, vejamos o código HTML <div id="navcontainer"> <ul id="navlist"> <li id="active"><a href="#" id="current">item um</a></li> <li><a href="#">item dois</a></li> <li><a href="#">número três</a></li> <li><a href="#">item quatro</a></li> <li><a href="#">o ponto cinco</a></li> </ul> </div>

29 29 CSS #navlist { padding-left: 0; margin-left: 0; border-bottom: 1px solid gray; width: 200px; #navlist li { list-style: none; margin: 0; padding: 0.25em; border-top: 1px solid gray; #navlist li a { text-decoration: none;

30 30 Aula 7 CSS Menu cascata Agora vamos elaborar um menu de navegação em cascata. Primeiro precisamos elaborar uma lista de possíveis links em html. <ul> <li><a href="#">link1</a> <ul> <li><a href="#">link1.1</a></li> <li><a href="#">link1.2</a></li> </ul> </li> <li><a href="#">link2</a> <ul> <li><a href="#">link2.1</a></li> <li><a href="#">link2.2</a></li> </ul> </li> <li><a href="#">link3</a> <ul> <li><a href="#">link3.1</a></li> <li><a href="#">link3.2</a></li> </ul> </li> <li><a href="#">link4</a> <ul> <li><a href="#">link4.1</a></li> <li><a href="#">link4.2</a></li> </ul> </li> </ul> O resultado deverá ser este:

31 31 O primeiro passo é eliminar os marcadores de texto. Crie um arquivo CSS e escreva: ul { list-style:none; Agora vamos fazer com que os subitens(li) da lista (ul) fiquem ocultos. li ul{ display:none; Mas se ficarem ocultos, não vai ter graça, eles devem ser acessíveis! li:hover ul { display:block; Agora ele vai ficar se remoldando o menu em cada vez que eu passar sobre os itens? li ul{ position: absolute; display:none; Você reparou que é o mesmo item já anteriormente criado? A posição dele foi definida como absoluta, ou seja, depende do valor inserido, como não há ainda, ele obedece ao fim do parágrafo escrito, o link pai. Adicione então, o comando left: 200px;, pois iremos definir que a largura do menu será de 200 pixels, em ul, com o comando width: 200px;. Agora vamos fazer o alinhamento dos subitens (li) dentro das uls. Espera! Não entendi! Não era isso que foi criado? A ul li vai comandar a ul pai e suas li. Já a li ul vai comandar os subitens, as listas (ul) dentro das lis. Tem certeza? Vamos ver... ul li{ position:relative; border:#ccc 1px solid; li ul{ position: absolute; left: 200px; top: 0; display:none; background-color:#ccc; Observe que não foram criados novos seletores, apenas adicionamos propriedades aos já criados, com exceção da ul li.

32 32 Na ul li a posição é relativa ao site e adicionamos uma borda à ele, já na li ul, a posição é absoluta, depois do bloco ul li e um background cinza para ilustrar onde age cada seletor. Mas e aquele top: 0;? Alinha o menu ao topo da ul li. Agora começam alguns elementos de design que ajudarão na identificação. Observe os seletores: li:hover ul { display:block; Ok, este já existia, nem vamos mais mexer nele. ul li:hover{ background-color:#ccc; Este é o novo, é o comportamento dentro da ul pai, no seletor li quando passar sobre, pinte de cinza, afinal a ul dentro da li é cinza, (li ul). Adicione o seletor valorado padding: 5px; na ul e na ul li. ul li a{ display:block padding: 5px; Para exibir os links. Veja agora o código completo, para os efeitos visuais. body{ ul{ margin ; list-style:none; border: #CCC 3px solid; width: 200px; padding: 5px; background-color:#fff; ul li{ position:relative; border:#ccc 1px solid; padding: 5px; li ul{ position: absolute; left: 199px; top: 0;

33 33 display:none; background-color: #CCC; ul li a{ display:block; text-decoration:none; padding: 5px; border: 1px solid #CCC; border-bottom:0; background-color:#ccc; li:hover ul { display:block; Remova a linha... ul li:hover{ background-color:#ccc; Não tem mais função, claro. Cara, muito legal!!! Mas... e se tiver mais um nível? <ul> <li><a href="#">link1</a> <ul> <li><a href="#">link1.1</a></li> <li id="pre"><a href="#">link1.2</a> <ul id="sub"> <li><a href="#">link1.2.1</a></li> <li><a href="#">link1.2.2</a></li> </ul> </li> </ul> </li> <li><a href="#">link2</a> <ul> <li><a href="#">link2.1</a></li> <li><a href="#">link2.2</a></li> </ul>.... Esta parte foi adicionada. Veja que agora a ul tem um id e um li também. Então fica fácil!

34 34 Adicione estas duas linhas, pois elas agem diretamente no item identificado(id). ul#sub{ display:none; li#pre:hover ul#sub{ display:block; E se for horizontal? CSS body{ ul { li{ margin ; list-style:none; border: #69C 3px solid; padding:3px; background-color:#ccc; width: 25%; text-align:center; border-radius: 2em; box-shadow:#000 10px 10px 10px; border: #FFF 1px solid; padding: 2px; background-color #CCC; ul li{ display:inline; padding: 2px; li ul{ display:none; position:absolute; padding: 3px; li:hover ul { display:block;.links a:hover{ color:#69c; text-decoration:underline; HTML

35 35 <ul> <li><a href="#">link1</a> <ul> <li class="links"><a href="#">link1.1</a></li> <li><a href="#">link1.2</a></li> </ul> </li> <li><a href="#">link2</a> <ul> <li><a href="#">link2.1</a></li> <li><a href="#">link2.2</a></li> </ul> </li>...

36 36 Aula 8 Float O float é a flutuação de um objeto. Ele aceita somente o alinhamento à esquerda ou à direta. Crie uma imagem alinhada à esquerda e o texto à sua direita, assim: Para este efeito o código será: CSS None HTML <p> <img src="images/image.gif" alt="" width="100" height="100">lorem ipsum dolor sit amet, consectetuer... </p> Para alinhas o quadrado à direta, adicione o código: CSS.floatright { float: right; HTML <p> <img class="floatright" src="images/image.gif" alt="" width="100" height="100">lorem ipsum dolor sit amet, consectetuer... </p>

37 37 CSS.floatright { float: right; HTML <p> <img class="floatright" src="images/image.gif" alt="" width="100" height="100">lorem ipsum dolor sit amet, consectetuer... </p> CSS.floatright { float: right; margin: px 10px; HTML <p> <img class="floatright" src="images/image.gif" alt="" width="100" height="100">lorem ipsum dolor sit amet, consectetuer... </p>

38 38 CSS.floatright { float: right; margin: px 10px; border: 1px solid #666; HTML <p> <img class="floatright" src="images/image.gif" alt="" width="100" height="100">lorem ipsum dolor sit amet, consectetuer... </p> CSS.floatright { float: right; margin: px 10px; border: 1px solid #666; padding: 2px; HTML <p> <img class="floatright" src="images/image.gif" alt="" width="100" height="100">lorem ipsum dolor sit amet, consectetuer...

39 39 </p> CSS.floatright { float: right; margin: px 10px; border: 1px solid #666; padding: 2px; HTML <p> <img class="floatright" src="images/image.gif" alt="" width="100" height="100">lorem ipsum dolor sit amet, consectetuer... </p> Desenho com CSS Vamos desenhar um quadrado com quatro cores diferentes. HTML <div class="quadcolor" id="quadcolor"></div> O CSS.quadcolor { width: 50px; height: 50px; border: 15px solid; border-color: #FF0 #00F #0F0 #F00; E o resultado...

40 40 Ok. Se é possível construir com 4 bordas de cores diferentes e o centro vazio, por que não com 2 cores diferentes e sem centro? HTML <div class="triangulo" id="triangulo"></div> E o CSS.triangulo{ width: 0; height: 0; border-bottom: 50px solid; border-left: 50px solid; border-right: 50px solid; border-top: 50px solid; border-color: # # #F00 #F00; E se quiséssemos Criar um triangulo não triangulo-retângulo?

41 41 Aula 9 Javascript Vamos aprender passo-a-passo. Então, para quê o JAVASCRIPT? O Javascript é uma linguagem tipo script, ou seja, é interpretada linha a linha, para executar funções em seu navegador, esteja ele online ou não. Agora que conhecemos o HTML e o CSS, podemos entender um pouco mais de Javascript. <HTML> <HEAD> <TITLE>Titulo</TITLE> </HEAD> <BODY> </BODY> </HTML> A estrutura HTML segue um padrão único. Dentro desta estrutura vamos posicionar nosso Javascript. Primeiramente no próprio arquivo HTML, depois em um arquivo externo. De forma geral os scripts podem ser escritos dentro da HEAD, por uma razão simples. ORGANIZAÇÃO! Organize-se, chega de ser bagunceiro! Mas e se eu colocar fora? Vai funcionar do mesmo jeito, mas naquela bagunça. Onde é HTML, CSS, PHP, JS... O script se escreve assim: <script> e terminamos com </script> Mas que tipo de script?... Ok, vamos especificar então. <script type="text/javascript"> e encerrado simplesmente com </script>, ok? Mas nem todo lugar precisa ter uma inscrição de script, como dentro das TAGs HTML que já aceitam o Javascript por natureza de seus navegadores. O JavaScript pode escrever frases no navegar e deve ser chamado com o manipulador de eventos do HTML onload, dentro do body, veja: <script type="text/javascript">

42 42 function olamundo() { var msg = "Olá Mundo!!!"; document.open(); document.write(msg); document.close(); </script> E no body <body onload="olamundo()"> Você também pode associar funções, como o caso do alert. <body onload="alert('olá mundo!');"> Outros manipuladores de eventos: onclick = quando o mouse clicar sobre o item; onmouseover = quando o mouse passar sobre o elemento; onmouseout = quando o mouse sair sobre o elemento; onfocus = quando o elemento receber o foco, seja pelo mouse ou pelo teclado; onblur = quando o elemento perder o foco. Estes manipuladores podem ser associados ao body ou ao img, afinal são associados ao carregamento de algo. Vamos lá, respire fundo, tome muita coragem e teste! Teste até doer, mas teste!!! Incrível não? Até você deve estar se achando inteligente, mas calma, as coisas não acabaram faltam muitas páginas... Agora vamos escrever um pouco. Um texto pode ser escrito pelo JavaScript da seguinte forma: 1. <script type="text/javascript"> 2. //Isto é um comentário de uma linha 3. /*E este é 4. de múltiplas linhas.*/ 5. document.write("código JavaScript"); 6. </script>

43 43 Alert A função alert serve para situações em que o usuário deverá ver o alerta, como no preenchimento de formulário ou ao ler um texto. Escreva! <script type="text/javascript"> alert("clique em 'OK' para formatar seu micro!"); </script> Observe que a palavra OK está com aspas simples, isto por que se você colocar aspas duplas o texto se encerrará ali! Dentro das aspas duplas, somente as simples. Compreendeu 02? Mas e se eu quiser que o texto tenha aspas duplas? Simples! Adicione \ antes das aspas duplas, assim. alert("clique em \"OK\" para formatar seu micro!"); Então quer dizer que se eu escrever vai aparecer esta janela? Figura 4 Alert E onde é que eu escrevo? Se você escrever antes do <title> antes dele o popup irá se apresentar, se escrever antes do <body>, adivinhe! Então escreva onde melhor lhe convir! Quer uma boa sacada? Como funciona o carregamento do HTML? O desafio é fazer aparecer um popup explicativo para cada parte (antes dela) a ser carregada. Então vamos fundir o CSS aprendido antes com o Javascript.

Exibir mais