Carregar apresentação
A apresentação está carregando. Por favor, espere
2
Karine Alessandra Córdova
Linguagem de Programação Web Karine Alessandra Córdova
3
Inserindo descrição da página
<meta name="description" content="Descrição do site">
4
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.
5
Exercício 02 Utilize a estrutura já criada no exercício anterior e adicione palavras-chave para sua página.
6
Inserindo palavras chave de uma página
<meta name="keywords" content="Palavras-chave do site">
7
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>
8
Inserindo cor de fundo <body bgcolor="#CEE7FF">
9
Exercício 02 Utilize a estrutura já criada nos exercícios anteriores e adicione cor de fundo para seu site.
10
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>
11
Inserindo imagem de fundo
background=" OBS: deve ser adicionado dentro da tag body
12
Exercício 03 Utilize a estrutura já criada nos exercícios anteriores e adicione uma imagem de fundo para seu site.
13
Inserindo imagens <img border="0" src=" 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.
14
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).
15
Inserindo imagens com link
<a target="_blank" href=" <img alt="Descrição da imagem" src="
16
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.
17
Utilizando cores e definição de tamanho em texto
<font size="10" color="#3366CC“ face="Verdana">Texto colorido com tamanho dez</font>
18
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).
19
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.
20
Inserindo Links <a target="_blank" href=" aqui para ir ao site do google</a> Ou <a href="pagina2.html">Clique aqui para acessar minha segunda página </a>
21
Entrevistando o Href (Livro Use a Cabeça)
24
Exercício 06 Exercício imagens (10 imagens – 5 com locais e 5 com links da web)
25
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.
26
Inserindo Tabela <table border=“1” > <tr>
<td>Linha 1 coluna 1 </td> <td>Linha 2 coluna 1</td> </tr> <td>Linha 1 coluna 2 </td> <td>Linha 2 coluna 2</td> <td>Linha 1 coluna 3 </td> <td>Linha 2 coluna 2 </td> </table>
27
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.
28
Resultado <table border="1"> <tr>
<td><a target="_blank" href=" 1</a></td> <td><a target="_blank" href=" 2</a></td> <td><a target="_blank" href=" 3</a></td> </tr> <td><a target="_blank" href=" 4</a></td> <td><a target="_blank" href=" 5</a></td> <td><a target="_blank" href=" 6</a></td> </table>
29
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
31
Resultado
32
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
Apresentações semelhantes
