Linguagem de Programação Web Karine Alessandra Córdova Inserindo descrição da página <meta name="description" content="Descrição do site"> Exercício 01 Crie uma estrutura de um site básico já visto em aula anteriormente e adicione uma descrição do conteúdo que irá conter em seu site. Exercício 02 Utilize a estrutura já criada no exercício anterior e adicione palavraschave para sua página. Inserindo palavras chave de uma página <meta name="keywords" content="Palavras-chave do site"> Resultado apresentado até o momento <html> <head> <title>Título do site</title> <meta name="description" content="Descrição do site"> <meta name="keywords" content="Palavras-chave do site"> </head> <body> </body> </html> Inserindo cor de fundo <body bgcolor="#CEE7FF"> Exercício 02 Utilize a estrutura já criada nos exercícios anteriores e adicione cor de fundo para seu site. Resultado apresentado até o momento <html> <head> <title>Título do site</title> <meta name="description" content="Descrição do site"> <meta name="keywords" content="Palavras-chave do site"> </head> <body bgcolor="#CEE7FF"> </body> </html> Inserindo imagem de fundo background="http://www.sc.senai.br/siteinstitucional/templates/default/i mg/cabecalho/logo_senai.jpg"> OBS: deve ser adicionado dentro da tag body Exercício 03 Utilize a estrutura já criada nos exercícios anteriores e adicione uma imagem de fundo para seu site. Inserindo imagens <img border="0" src=" http://www.sc.senai.br/siteinstitucional/templates/default/img/cabec alho/logo_senai.jpg" width="128" height="80"> Ou <img border="0" src=“logo_senai.jpg" width="128" height="80"> No segundo exemplo a imagem deve estar na mesma pasta de sua pagina html. Exercício 04 Utilizando a mesma estrutura já criada, insira duas imagens em seu site, uma com url externa e outra com a imagem na mesma pasta de sua pagina html, as imagens devem estar em linhas diferentes (utilize a tag <BR> para separá-las). OBS: Não utilize imagem para plano de fundo (exclua a tag que define uma imagem para plano de fundo utilizada no exercício anterior). Inserindo imagens com link <a target="_blank" href="http://www.google.com.br"> <img alt="Descrição da imagem" src="http://www.google.com.br/intl/ptBR_br/images/logo.gif"></a> Exercício 04 Crie uma nova página html contendo uma imagem com link apontando para outro site. A imagem deve estar no centro da tela. Utilizando cores e definição de tamanho em texto <font size="10" color="#3366CC“ face="Verdana">Texto colorido com tamanho dez</font> Exercício 04 Utilizando a mesma estrutura já criada, insira duas imagens em seu site, uma com url externa e outra com a imagem na mesma pasta de sua pagina html, as imagens devem estar em linhas diferentes (utilize a tag <BR> para separá-las). OBS: Não utilize imagem para plano de fundo (exclua a tag que define uma imagem para plano de fundo). Exercício 05 Utilize a estrutura já criada nos exercícios anteriores e adicione um texto colorido com tamanho 4 em seu site. Utilize também uma fonte Arial. Inserindo Links <a target="_blank" href="http://www.google.com.br">Clique aqui para ir ao site do google</a> Ou <a href="pagina2.html">Clique aqui para acessar minha segunda página </a> Entrevistando o Href (Livro Use a Cabeça) Exercício 06 Exercício imagens (10 imagens – 5 com locais e 5 com links da web) Exercício 07 Utilize a estrutura já criada nos exercícios anteriores e adicione um link em seu site, para uma página html que você mesmo irá criar. Passo 1: Devera ser criado uma nova página html (pagina2.html) contendo apenas um texto. Passo 2: Sua pagina principal devera ter um link e esse link deve apontar para sua pagina2.html. Inserindo Tabela <table border=“1” > <tr> <td>Linha 1 coluna 1 </td> <td>Linha 2 coluna 1</td> </tr> <tr> <td>Linha 1 coluna 2 </td> <td>Linha 2 coluna 2</td> </tr> <tr> <td>Linha 1 coluna 3 </td> <td>Linha 2 coluna 2 </td> </tr> </table> Exercício 06 Crie uma nova pagina html e insira uma tabela com 3 linhas e 2 colunas dentro de cada célula da tabela crie um texto com link apontando para um site diferente. Obs 1: também adicione borda para sua tabela utilizando o atributo border = 1 dentro da tag table Obs 2: os links devem ser abertos em uma nova janela ao serem clicados. Resultado <table border="1"> <tr> <td><a target="_blank" href="http://www.google.com.br">Site 1</a></td> <td><a target="_blank" href="http://www.mercadolivre.com.br">site 2</a></td> <td><a target="_blank" href="http://www.sc.senai.br">site 3</a></td> </tr> <tr> <td><a target="_blank" href="http://www.hotmail.com.br">site 4</a></td> <td><a target="_blank" href="http://www.echosis.com.br">site 5</a></td> <td><a target="_blank" href="http://www.echohost.com.br">site 6</a></td> </tr> </table> Exercício 07 Na pagina criada anteriormente com tabelas e links adicione estas tags dentro da tag body: link="#0000FF" vlink="#008000" alink="#FF00FF" Atenção:Não deve ser mudada a ordem de declaração destas TAGS Link - cor do link Vlink - cor do link visitado Alink – cor do link ativo • Resultado Exercício 08 Crie uma pagina html com todo o conteúdo apresentado são eles descrição da pagina palavras-chave da pagina cor de fundo para o site Imagem de fundo Imagens Utilizando cores e definição de tamanho em texto Links Inserindo Tabela, tabela com links
Download
