0% acharam este documento útil (0 voto)

18 visualizações195 páginas

HTML e CSS

O documento apresenta uma série de exercícios práticos para ajudar os alunos a dominar conteúdos de HTML e hospedagem de domínios. Os exercícios incluem a pesquisa de disponibilidade de domínios, criação de páginas HTML, e cópia de conteúdos de sites. Além disso, orientações sobre como salvar e organizar os arquivos são fornecidas.

Enviado por

empregarcursospedagogico

Direitos autorais

Levamos muito a sério os direitos de conteúdo. Se você suspeita que este conteúdo é seu, reivindique-o aqui.

Formatos disponíveis

Baixe no formato PDF, TXT ou leia on-line no Scribd

0% acharam este documento útil (0 voto)

18 visualizações195 páginas

HTML e CSS

Enviado por

empregarcursospedagogico

Direitos autorais

Levamos muito a sério os direitos de conteúdo. Se você suspeita que este conteúdo é seu, reivindique-o aqui.

Formatos disponíveis

Baixe no formato PDF, TXT ou leia on-line no Scribd

Você está na página 1/ 195

1

1.9. Exercícios de Conteúdo

Olá, seja bem-vindo a nossa área de exercícios. Foram desenvolvidas uma série de atividades, para que você fixe e
domine todo o conteúdo abordado nesta aula. Por isso, é muito importante que todos os exercícios sejam
realizados e, em caso de dúvida, chame o instrutor.

Observação: Salve os exercícios. Se você precisar de orientação de como localizar sua pasta, converse com seu
instrutor, para que ele lhe oriente a criar uma ou ajudar a encontrá-la.
Exercício 1:

Este exercício tem como objetivo pesquisar no registro.br se domíniograndepaladar.com.br está disponível
para compra.
1) Vamos começar acessando o site, clique no endereço atual.

2) Pressione a tecla Delete para apagar o conteúdo.

3) Digite www.registro.br e pressione a tecla Enter para prosseguir.

4) Após o site ter sido aberto, digite na caixa de pesquisa o domínio, grandepaladar.com.br e em seguida
pressione a tecla Enter.
5) Após ter sido pesquisado, o registro.br vai informar se o domínio está liberado para compra e o valor de
custo por ano.

Exercício 2:
Este exercício tem como objetivo pesquisar no registro.br qual a mensagem que é exibida, mas quando o domínio
já existe.
1) Vamos começar acessando o site, clique no endereço atual.
2) Pressione a tecla Delete para apagar o conteúdo. Digite
3) www.registro.br e pressione a tecla Enter para prosseguir.

4) Após o site ter sido aberto, digite na caixa de pesquisa o domínio chefedecozinha.com.br, em seguida
pressione a tecla Enter.
5) Neste caso, o domínio já existe. Abaixo é sugerido uma lista de opções para o seu domínio.

Exercício 3:
Este exercício tem como objetivo conferir os planos de hospedagem no site Kinghost.
1) Vamos começar acessando o site. Clique no endereço atual.
6) Pressione a tecla Delete para apagar o conteúdo.
7) Digite www.kinghost.com.br e pressione a tecla Enter para prosseguir.

8) Após o site ter sido aberto, clique no botão “ver planos de hospedagem”.

9) Para visualizar os planos, clique na seta de navegação em destaque.

Exercício 4:

Este exercício tem como objetivo praticar a estrutura básica do HTML.

1) Vamos começar abrindo o Bloco de Notas. Vá em Iniciar, Acessórios do Windows, Bloco de Notas. Em
outras versões, vá em Iniciar, Todos os programas, Acessórios, Bloco de Notas.
2) Feito isso, agora digite o código abaixo.

<!DOCTYPE HTML>
<html lang="pt-br">
<head>
<meta charset="utf-8"/>
<title>Grandes Escritorores Brasileiros</title>
</head>

<body>
<h1>Grandes Escritores Brasileiros</h1>
<h3>Machado de Assis</h3>
<h4>Livros</h5>
<p>
Dom Casmurro, Memórias Póstumas de Brás Cuba, O Alienista e Quincas Borba
</p>

<h3>Carlos Drummond de Andrade</h3>

<h4>Livros</h5>
<p>
A Rosa do Povo, Brejo das Almas, Sentimento do Mundo, Contos de Aprendiz e O Avesso das
Coisas.
</p>

</body>
</html>
3) Após ter concluído a digitação, vamos salvar o documento.
4) Clique no menu Arquivo;
5) Na lista que surgiu, clique na opção “Salvar como”;
6) Pressione a tecla Backspace para apagar o texto da caixa Nome;
7) Digite como nome, o título grandes-escritores.html
8) Clique na caixa Tipo;
9) Selecione a opção Todos os arquivos;
10) Clique na caixa Codificação;
11) Na lista de opções, clique em UTF-8;
12) Para concluir, clique no botão Salvar;
13) Feche a janela do documento;
14) Clique duas vezes no documento grandes-escritores.html

15) Veja o resultado no navegador

Exercício 5:

Este exercício tem como objetivo copiar uma matéria do site da W3C, e criar um documento HTML.
1) Na caixa de pesquisa, digite W3C e pressione a tecla Enter.

2) Na lista de resultados, clique no primeiro link.

3) Feito isso, a página da W3C será aberta.

4) O nosso objetivo aqui é copiar a matéria sobre Web Semântica para o nosso documento HTML.
5) Na lista lateral, clique em Web Semântica;

6) Surge ao lado o conteúdo;

Abrir o Bloco de Notas:

1) Clique em Iniciar, Acessórios de Windows, Bloco de Notas;

2) Digite as primeiras linhas de código;

<!DOCTYPE HTML>
<html lang="pt-br">
<head>
<meta charset="utf-8"/>
<title>Web Semântica</title>
</head>
<body>
<h1>Web Semântica</h1>
<p>
</p>
Para copiar o texto do site, siga os próximos passos:

1) Posicione o ponteiro do mouse no ícone do Chrome;

2) Na lista que surgiu, clique na janela do W3C;

3) Para selecionar o texto, clique no local indicado e arraste até o outro lado;

4) Clique com o botão direito do mouse dentro da área selecionada em destaque;

5) Na lista que surgiu, clique na opção Copiar;

6) Posicione o ponteiro do mouse no ícone do Bloco de Notas e clique;

7) No Bloco de Notas, clique no local indicado com o botão direito do mouse;

8) Na lista que surgiu, clique na opção Colar;

9) Veja que o conteúdo foi colado entre as tags<p></p>

10) Para concluir, digite abaixo da tag</p> o código que está faltando:

</p>
</body>
</html>

Para gravar o documento no formato HTML:

1) Clique no menu Arquivo;

2) Na lista que surgiu, clique na opção “Salvar como”;

3) Pressione a tecla Backspace para apagar o texto da caixa Nome;
1) Digite na caixa Nome, websemantica.html
2) Clique na caixa Tipo;
3) Na lista que surgiu, clique em Todos os arquivos;
4) Clique na caixa Codificação;
5) Na lista que surgiu, clique em UTF-8;
6) Para concluir, clique no botão Salvar;
7) Feche a janela do documento;
8) Clique duas vezes no documento websemantica.html
9) Veja o resultado no navegador;

1.10. Exercícios de Fixação

Este exercício tem como objetivo praticar o uso das tags, cabeçalho de título e de parágrafo.

10) Desenvolva a página conforme resultado final do navegador;

11) Salve a página com o nome fixacao.html

12) Verifique se funcionou no navegador conforme o exemplo acima.

Exercício 2:

O objetivo desse exercício é pesquisar qual a empresa que presta serviços de hospedagem e possui o melhor
preço. Faça um documento HTML informando o plano de hospedagem e o valor.
1) Acesse as seguintes empresas de hospedagem, bysite, locaweb e kinghost.
2) Copie de cada site o plano de hospedagem com o melhor preço e faça o seu documento HTML.
3) Siga o exemplo a seguir.

4) Salve com o documento, como o nome planos-de-hospedagem.html

5) Verifique se funcionou no navegador.

Exercício 3:

O objetivo desse exercício é verificar se os seguintes domínios estão liberados para compra.
1) Acesse o site registro.br
2) Seguem os nomes a serem pesquisados:

academiasintonia.com.br, lojatomdosom.com.br, oficinapedivela.com.br, academiaboaforma.com.br e

lojalebes.com.br
3) Faça um teste e, ao concluir, feche o Navegador.

Exercício 4:

A finalidade desse exercício é criar uma página, copiando duas matérias do site g1.globo.com e aplicar conforme
o modelo que segue abaixo.
1) Modelo da página a ser desenvolvida.
2) Após ter concluído, salve o documento com o nome noticias-da-semana.html
3) Faça um teste e, ao concluir, feche o Navegador.

Exercício 5:

Esse exercício pretende desenvolver uma página pessoal, escolha um assunto, ou veja a sugestão abaixo.
1) Sugestões:

a) pode ser um assunto de sua escolha;

b) pode ser criado um currículo; procure na internet por currículo online para ter uma base;
2) Após ter concluído, salve o documento com o nome pagina-pessoal.html
3) Visualize como ficou no navegador.
2
2.5. Exercícios de Conteúdo

Olá, seja bem-vindo, a nossa área de exercícios, desenvolvemos uma série de atividades, para que você domine todo
conteúdo abordado nesta aula, é muito importante você fazer todos os exercícios, qualquer dúvida, chame o seu
instrutor.

Observação: Salve os exercícios, se você precisar de orientação, de como localizar sua pasta, converse com seu
instrutor, para que ele lhe crie uma, ou oriente, onde a mesma se encontra.

Exercício 1:

Este exercício, tem como objetivo, criar uma página falando um pouco sobre relógios e ilustrar o texto com
algumas imagens.
A pasta que será usada para desenvolver os exercícios vai ser a pasta Documentos.

1) Na área de trabalho clique duas vezes no ícone Este Computador;

2) Clique duas vezes na pasta Documentos.

3) A seguinte janela será exibida.

4) Clique na opção Nova Pasta que aparece em destaque, contorno em vermelho;
5) O ícone “Nova pasta” surgiu, digite o nome exercicio1-aula2 e pressione a tecla enter.

6) Veja que a nova pasta surgiu com o nome exercicio1-aula2.

7) Abra a pasta exercicio1-aula2 com dois cliques.

8) Dentro da pasta exercicio1-aula2, vamos criar a pasta imagens. Clique no botão em destaque.

9) Digite como título, imagens e pressione a tecla enter para confirmar.

10) Veja que a pasta imagens foi criada.

Copiando as imagens que serão usadas no exercício.

Abra a pasta Arquivos auxiliares/aula2/exercicio1-imagens/ e copie as três imagens (clepsidra, relogio-antigo-

igreja e relogio-areia), e cole dentro da pasta imagens que você acabou de criar.
Observação: qualquer dúvida chame o instrutor, para auxiliar na localização desta pasta, que é a origem das
imagens.
Para desenvolver nosso exercício, acesse o Bloco de Notas.

1) Clique em Iniciar, Acessórios do Windows, Bloco de Notas;

2) Digite o código abaixo:

<!DOCTYPE HTML>
<html lang="pt-br">
<head>
<meta charset="utf-8"/>
<title>Relógios</title>
</head>
<body>
<h1>Relógios</h1>
<p>
O relógio é um instrumento usado para medir o tempo. Estima-se que o homem começou a medir o tempo há
cerca de 5000 anos, por uma vara fincada no chão, onde se observava o movimento das sombras, que eram
projetadas no solo. Esse mecanismo não marcava as horas, apenas dividia o dia.
</p>
<img src="imagens/relogio-antigo-igreja.jpg" alt="Relógio antigo ingreja" title="Relógio antigo ingreja" />
<h1>Relógio de Água e Relógio de Areia</h1>
<p>
Com a necessidade de medidas mais precisas, surgiu a Clepsidra, ou relógio de água, e a ampulheta, ou
relógio de areia. Esses se baseavam no tempo em que uma substância líquida ou sólida.
</p>
<img src="imagens/clepsidra.jpg" alt="Clepsidra" title="Clepsidra" />
<img src="imagens/relogio-areia.jpg" alt="Relógio de areia" title="Relógio de areia" />

</body>
</html>

Observação: preste atenção na hora da digitação, confira o código linha por linha.

Salvar o documento:
1) Clique no menu Arquivo;
2) Na lista que surgiu, clique na opção “Salvar como”;
3) A seguinte janela será exibida.

4) Clique duas vezes na pasta Documentos;

5) Dentro da pasta Documentos, clique duas vezes na pasta exercicio1-aula2.
6) Para apagar o texto dentro da caixa Nome, clique no final da linha, como mostra a barra em vermelho;
7) Pressione a tecla Backspace e digite relogios.html
8) Ainda nesta janela vamos definir o tipo deste documento, clique dentro da caixa Tipo e selecione Todos os
arquivos;
9) Para que os caracteres especiais sejam reconhecidos pelo navegador, clique na caixa Codificação e
selecione UTF-8;
10) Para finalizar, clique no botão Salvar;
Acesse o documento relogios.html para visualizar no navegador.

Veja o resultado:

Exercício 2:
Este exercício, tem como objetivo, criar um currículo, listando as experiências profissionais em ordem
numérica. Listar os seus cursos de aperfeiçoamento, utilizando marcadores.

A pasta que será usada para desenvolver os exercícios vai ser a pasta Documentos.

1) Na área de trabalho clique duas vezes no ícone Este Computador;

2) Clique duas vezes na pasta Documentos.

3) A seguinte janela será exibida.

4) Clique na opção Nova Pasta que aparece em destaque, contorno em vermelho;

5) O ícone “Nova pasta” surgiu, digite o nome exercicio2-aula2 e pressione a tecla enter.
6) Veja que a nova pasta surgiu com o nome exercicio2-aula.

7) Clique duas vezes na pasta exercicio2-aula2 em destaque;

8) Para criar a pasta imagens, clique no botão em destaque.

9) Digite como título o nome imagens, em seguida pressione a tecla enter;

Veja como ficou a nossa pasta de trabalho.

Copiando as imagens que serão usadas no exercício.

Abra a pasta Arquivos auxiliares/aula2/exercicio2-imagens/ e copie a imagem currículo e cole dentro da pasta
imagens que você acabou de criar.
Observação: qualquer dúvida chame o instrutor, para auxiliar na localização desta pasta, que é a origem das
imagens.

Para desenvolver nosso exercício, acesse o Bloco de Notas.

1) Clique em Iniciar, Acessórios do Windows, Bloco de Notas;

2) O Bloco de Notas é exibido.

3) Digite o código abaixo:

<!DOCTYPE HTML>
<html lang="pt-br">
<head>
<meta charset="utf-8"/>
<title>Meu Currículo</title>
</head>
<body>
<h1>Currículo João da Silva</h1>
<img src="imagens/curriculo.jpg" alt="Currículo João da Silva" title="Currículo João da Silva" />

<h3>Cursos de Aperfeiçoamento</h3>
<ul>
<li>Técnico em informática</li>
<li>Auxiliar administrativo</li>
<li>Eletrônica</li>
<li>Técnico em segurança do trabalho</li>
</ul>

<h3>Experiências profissionais</h3>
<ol>
<li>DuVille Design </li>
<li>Crossvale Motos</li>
<li>Fibra - equipamentos eletrônicos</li>
</ol>

</body>
</html>

Observação: preste atenção na hora da digitação, confira o código linha por linha.

Salvar o documento:
1) Clique no menu Arquivo;
2) Na lista que surgiu, clique na opção “Salvar como”;
3) A seguinte janela será exibida.

4) Clique duas vezes na pasta Documentos, em destaque, com contorno vermelho;

5) A seguir a pasta exercicio2-aula2 será exibida.

6) Acesse esta pasta, clique duas vezes no ícone em destaque.

7) Na caixa Nome, clique no final do texto que aparece;

8) Pressione a tecla Backspace para apagar o conteúdo;
9) Digite currículo.html;
10) Na caixa Tipo, clique em Documentos de texto;
11) Na lista, clique em Todos os arquivos;
12) Na caixa Codificação, clique em ANSI;
13) Clique em UTF-8;
14) Para concluir, clique no botão Salvar.
Visualizando o resultado:

1) Clique duas vezes no ícone do documento curriculo.

2) Veja a página no navegador.

Exercício 3:
Este exercício, tem como objetivo, criar uma página sobre os escritores brasileiros, citando dois deles como
exemplo. O exercício vai possuir três arquivos, o index.html, escritor1.html e escritor2.html.
1) Na área de trabalho clique duas vezes no ícone Este Computador;

2) Clique duas vezes na pasta Documentos.

3) A seguinte janela será exibida.

4) Clique na opção Nova Pasta que aparece em destaque, contorno em vermelho;

5) O ícone “Nova pasta” surgiu, digite o nome exercicio3-aula2 e pressione a tecla enter.

6) Veja que a nova pasta surgiu, clique duas vezes na pasta exercicio3-aula2.
7) Para criar a pasta imagens, clique no botão Nova pasta em destaque.

8) Digite o nome imagens e pressione a tecla enter;

Copiando as imagens que serão usadas no exercício.

Abra a pasta Arquivos auxiliares/aula2/exercicio3-imagens/ e copie as imagens erico-verissimo e machado-
de-assis, cole dentro da pasta imagens que você acabou de criar.

Observação: qualquer dúvida chame o instrutor, para auxiliar na localização desta pasta, que é a origem das
imagens.

Para desenvolver nosso exercício, acesse o Bloco de Notas.

1) Clique em Iniciar, Acessórios do Windows, Bloco de Notas;

2) O Bloco de Notas é exibido.

3) Digite o código abaixo:

<!DOCTYPE HTML>
<html lang="pt-br">
<head>
<meta charset="utf-8"/>
<title>Escritores Brasileiros</title>
</head>
<body>
<h1>Escritores Brasileiros</h1>

<a href="machado-de-assis.html">
<img src="imagens/machado-de-assis.jpg" alt="Machado de Assis" />
</a>
<a href="erico-verissimo.html">
<img src="imagens/erico-verissimo.jpg" alt="Érico Veríssimo" />
</a>
<p>
Clique em um dos escritores, para ler uma breve descrição.
</p>

</body>
</html>

Salvar o primeiro documento:

1) Clique no menu Arquivo;

2) Na lista de opções, clique em Salvar como;
3) Abra a pasta Documentos, com dois cliques;
4) Abra a pasta exercicio3-aula2, com dois cliques;
5) Clique dentro da caixa Nome;
6) Pressione a tecla Backspace para apagar o conteúdo.
7) Digite na caixa nome o título index.html;
8) Clique dentro da caixa Tipo;
9) Clique na caixa Codificação;
10) Selecione na lista a opção UTF-8;
11) Clique no botão Salvar para concluir;
Para visualizar o resultado:

1) Clique no ícone em destaque;

2) Veja o resultado no navegador

Criar a página do escritor Machado de Assis:

1) Clique em Iniciar, Acessórios do Windows, Bloco de Notas;

2) O Bloco de Notas é exibido.

3) Digite o código abaixo:

<!DOCTYPE HTML>
<html lang="pt-br">
<head>
<meta charset="utf-8"/>
<title>Machado de Assis</title>
</head>
<body>
<h1>Machado de Assis</h1>
<img src="imagens/machado-de-assis.jpg" alt="Machado de Assis" />
<p>
Machado de Assis (1839-1908) foi um escritor brasileiro. Primeiro presidente da Academia Brasileira de Letras.
Foi um autor completo. Escreveu romances, contos, poesias, peças de teatro, inúmeras críticas, crônicas e
correspondências.
</p>
<a href="index.html">Voltar</a>
</body>
</html>

Salvar o segundo documento:

1) Clique no menu Arquivo;

2) Na lista de opções, clique em Salvar como;

3) Abra a pasta Documentos, com dois cliques;

4) Abra a pasta exercicio3-aula2, com dois cliques;

5) Clique dentro da caixa Nome;

6) Pressione a tecla Backspace para apagar o conteúdo.
7) Digite na caixa nome o título machado-de-assis.html;
8) Clique dentro da caixa Tipo e selecione a opção Todos os arquivos;
9) Clique na caixa Codificação;
10) Selecione na lista a opção UTF-8;
11) Clique no botão Salvar para concluir;
Para visualizar o resultado:

1) Clique no ícone em destaque.

Veja o resultado no navegador.

A página principal foi acessada, clique na foto do escritor Machado de Assis para visualizar algumas
informações.
Criar a página do escritor Machado de Assis:
1) Clique em Iniciar, Acessórios do Windows, Bloco de Notas;

2) O Bloco de Notas é exibido.

3) Digite o código abaixo:
<!DOCTYPE HTML>
<html lang="pt-br">
<head>
<meta charset="utf-8"/>
<title>Érico Veríssimo</title>
</head>
<body>
<h1>Érico Veríssimo</h1>
<img src="imagens/erico-verissimo.jpg" alt="Érico Veríssimo" />
<p>
Érico Veríssimo (1905-1975) foi um escritor brasileiro. Foi um dos melhores romancistas brasileiros. Fez
parte do Segundo Tempo Modernista. Recebeu o "Prêmio Machado de Assis" com a obra "Música ao Longe" e
o "Prêmio Graça Aranha" com "Caminhos Cruzados".
</p>
<a href="index.html">Voltar</a>
</body>
</html>

Salvar o terceiro documento:

1) Clique no menu Arquivo;

7) Digite na caixa nome o título erico-verissimo.html;

8) Clique dentro da caixa Tipo e selecione a opção Todos os arquivos;
9) Clique na opção ANSI na caixa Codificação;
10) Na lista, clique em UTF-8;
11) Para concluir, clique no botão Salvar;

Para visualizar o resultado:

1) Clique no ícone em destaque.

Para visualizar a página do escritor Érico Veríssimo clique na imagem em destaque.

A página foi aberta, logo abaixo encontraremos o link voltar, permitindo acesso a página principal.

Clique no link voltar para acessar a página principal.

Exercício 4:
Este exercício, tem como objetivo, criar uma página listando os produtos, da linha de surf, em uma tabela,
informando o preço e algumas informações adicionais.
1) Na área de trabalho clique duas vezes no ícone Este Computador;
2) Clique duas vezes na pasta Documentos.

3) A seguinte janela será exibida.

4) Clique na opção Nova Pasta que aparece em destaque, contorno em vermelho;

5) O ícone “Nova pasta” surgiu, digite o nome exercicio4-aula2 e pressione a tecla enter.

6) Veja que a nova pasta surgiu, clique duas vezes na pasta exercicio4-aula2.

Criando uma pasta para as imagens do exercício.

Para criar a pasta imagens, clique no botão Nova pasta em destaque.

9) Digite o nome imagens e pressione a tecla enter;

Copiando as imagens que serão usadas no exercício.

Abra a pasta Arquivos auxiliares/aula2/exercicio4-imagens/ e copie as imagens produto1, produto2 e
produto3, cole dentro da pasta imagens que você acabou de criar.
Observação: qualquer dúvida chame o instrutor, para auxiliar na localização desta pasta, que é a origem das
imagens.
Para desenvolver nosso exercício, acesse o Bloco de Notas.
1) Clique em Iniciar, Acessórios do Windows, Bloco de Notas;

2) O Bloco de Notas é exibido.

3) Digite o código abaixo:

<!DOCTYPE HTML>
<html lang="pt-br">
<head>
<meta charset="utf-8"/>
<title>Produtos em Destaque</title>
</head>
<body>
<h1>Produtos em Destaque</h1>
<p>
Aqui você encontra as melhores marcas e produtos de qualidade.<br/>
Confira a tabela abaixo com alguns de nossos produtos de destaque. <br/>
Para entrar em contato, ligue para (051) 9 9700-0000 ou envie um e-mail para [email protected]
</p>

<table border="1" cellspacing="0">

<tr>
<td><img src="imagens/produto1.jpg" alt="Long John Mormaii" /></td>
<td><img src="imagens/produto2.jpg" alt="Prancha de surf CBS" /></td>
<td><img src="imagens/produto3.jpg" alt="Short John O'NEILL" /></td>
</tr>
<tr>
<td>MORMAII LONG JOHN MORMAII THUNDER 3...<br/> R$ 800,00 ou 10x de R$ 80,00 sem juros no
cartão</td>
<td>CBS SURF PRANCHA DE SURF CBS VIPER FISH...<br/> R$ 1.990,00
ou 10x de R$ 199,00 sem juros no cartão</td>
<td>ONEILL SHORT JOHN O'NEILL REACTOR 3/2 FULL...<br/> R$ 300,00
ou 10x de R$ 30,00 sem juros no cartão</td>
</tr>

</body>
</html>

Salvar o quarto documento:

1) Clique no menu Arquivo;

2) Na lista de opções, clique em Salvar como;
3) Abra a pasta Documentos, com dois cliques;
4) Abra a pasta exercicio4-aula2, com dois cliques;
5) Apague o conteúdo da caixa Nome;
6) Digite como título, destaque.html
7) Clique na caixa Tipo;
8) Selecione a opção Todos os arquivos;
9) Clique na caixa Codificação;
10) Na lista escolha a opção UTF-8;
11) Para concluir, clique no botão Salvar;

Para ver funcionando no navegador, clique duas vezes no ícone em destaque.

Veja o resultado da página no navegador.

Exercício 5:

Este exercício, tem como objetivo, criar uma página, trazendo um pouco de algumas bandas dos anos 80, será
visto o uso de listas, tabelas e links para outros documentos e sites.

1) Na área de trabalho clique duas vezes no ícone Este Computador;

2) Clique duas vezes na pasta Documentos.

3) A seguinte janela será exibida.

4) Clique na opção Nova Pasta que aparece em destaque, contorno em vermelho;

5) O ícone “Nova pasta” surgiu, digite o nome exercicio5-aula2 e pressione a tecla enter.

6) Veja que a nova pasta surgiu, clique duas vezes na pasta exercicio5-aula2.

Criando uma pasta para as imagens do exercício.

1) Para criar a pasta imagens, clique no botão Nova pasta em destaque

2) Digite como título, imagens e pressione a tecla enter para confirmar.

Copiando as imagens que serão usadas no exercício.

Abra a pasta Arquivos auxiliares/aula2/exercicio5-imagens/ e copie as imagens guns, legião-urbana, metallica

e titas, cole dentro da pasta imagens que você acabou de criar.
Observação: qualquer dúvida chame o instrutor, para auxiliar na localização desta pasta, que é a origem das
imagens.

Para desenvolver nosso exercício, acesse o Bloco de Notas.

1) Clique em Iniciar, Acessórios do Windows, Bloco de Notas;

2) O Bloco de Notas é exibido.

Digite o código abaixo:

<!DOCTYPE HTML>
<html lang="pt-br">
<head>
<meta charset="utf-8"/>
<title>Bandas Clássicas dos anos 80</title>
</head>
<body>

<h1>Bandas Clássicas dos anos 80</h1>

<p>
O site se dedica à divulgação de algumas bandas que até hoje fazem história na vida de muitas pessoas.<br/>
Para conhecer mais o nosso trabalho, envie e-mail para [email protected].
</p>

<h3>Letra A</h3>

<ul>
<li>ABBA</li>
<li>A-HA</li>
<li>ALPHAVILLE</li>
</ul>

<h3>Letra B</h3>

<ul>
<li>BLITZ</li>
<li>BEE GEES</li>
<li>BON JOVI</li>
</ul>

<h3>Letra C</h3>

<ul>
<li>CAPITAL INICIAL</li>
<li>CAMISA DE VÊNUS</li>
<li>CYNDI LAUPER</li>
</ul>

<h3>Para visualizar outros itens da lista, <a href="outros-artistas.html"> clique aqui!</a></h3>

<table border="1" cellspacing="0">

</body>
</html>

Salvar o quinto documento:

1) Clique no menu Arquivo;

2) Na lista de opções, clique em Salvar como;
3) Abra a pasta Documentos, com dois cliques;
4) Abra a pasta exercicio5-aula2, com dois cliques;
5) Clique dentro da caixa Nome e apague o conteúdo.
6) Digite o título bandas-classicas.html
7) Clique na caixa Tipo;
8) Na lista selecione a opção Todos os arquivos;
9) Clique na caixa Codificação;
10) Na lista clique em UTF-8;
11) Para concluir, clique no botão Salvar.
Para ver funcionando no navegador, clique duas vezes no ícone em destaque;
Para criar o documento com a lista de outros artistas, siga os passos abaixo:

1) Clique em Iniciar, Acessórios do Windows, Bloco de Notas;

2) O Bloco de Notas é exibido.

Digite o código abaixo:

<!DOCTYPE HTML>
<html lang="pt-br">
<head>
<meta charset="utf-8"/>
<title>Bandas Clássicas dos anos 80</title>
</head>
<body>

<h1>Bandas Clássicas dos anos 80</h1>

<h3>Nesta página vamos listar alguns artistas e seus sucessos. Para acessar a página principal <a href="bandas-
classicas.html">clique aqui</a>.</h3>

<h4>RPM</h4>
<img src="imagens/rpm.jpg" alt="RPM" />
<ol>
<li>Rádio Pirata</li>
<li>Olhar 43</li>
<li>A Cruz e a Espada</li>
<li>Revoluções por Minuto</li>
</ol>

<h4>U2</h4>
<img src="imagens/u2.jpg" alt="U2" />
<ol>
<li>With or Without You</li>
<li>Sunday Bloody Sunday</li>
<li>New Year's Day</li>
<li>Beautiful Day</li>
</ol>

</body>
</html>

Salvar este documento:

1) Clique no menu Arquivo;

2) Na lista de opções, clique em Salvar como;
3) Clique dentro da caixa Nome;
4) Apague o conteúdo e digite outros-artistas.html;
5) Clique dentro da caixa Tipo;
6) Na lista, clique na opção Todos os arquivos;
7) Clique na caixa Codificação;
8) Na lista clique em UTF-8;
9) Para concluir, clique no botão Salvar;

Para visualizar a página no navegador.

1) Clique no ícone em destaque;

2) Para visualizar outros artistas, clique no link “clique aqui”;

2.6. Exercícios de Fixação

Olá, seja bem-vindo, a nossa área de exercícios de fixação, desenvolvemos uma série de atividades, para que você
domine todo conteúdo abordado nesta aula, é muito importante você fazer todos os exercícios, qualquer dúvida,
chame o seu instrutor.

Observação: Salve os exercícios, se você precisar de orientação, de como localizar sua pasta, converse com seu
instrutor, para que ele lhe crie uma, ou oriente, onde a mesma se encontra.
Exercício 1:

Este exercício, tem como objetivo, criar uma página falando sobre duas estações do ano, primavera e verão, e
utilizar três fotos para ilustrar cada estação.
1) Crie dentro da pasta Documentos, a subpasta fixacao2, nesta pasta crie a pasta imagens e o documento
index.html.

2) Desenvolva a página conforme ilustração abaixo. As imagens podem ser reduzidas com a propriedade
WIDTH=”valor_em_pixels”.
3) Salve a página com o nome, index.html, como é mostrado na imagem acima.
4) Verifique se funcionou no navegador, conforme o exemplo acima.
Observação: imagens meramente ilustrativas, pode pesquisar outras imagens.

Exercício 2:

Este exercício, tem como objetivo, criar uma página sobre uma receita de estrogonofe de carne, a página vai
conter uma imagem, uma lista de marcadores e uma lista numerada.
6) Crie dentro da pasta Documentos, a subpasta fixacao2, nesta pasta crie a pasta imagens e o documento
index.html.

7) Desenvolva a página conforme ilustração abaixo. A imagem pode ser reduzida com a propriedade
WIDTH=”valor_em_pixels”
8) Salve a página com o nome, index.html, como é mostrado na imagem acima.
9) Verifique se funcionou no navegador.

Observação: esta receita foi usada como exemplo, pode pesquisar outra.

Exercício 3:

Este exercício, tem como objetivo, criar uma página falando sobre curiosidades de alguns países. Ao clicar em
uma das bandeiras, o usuário será redirecionado para uma página falando um pouco mais sobre o país
selecionado.
1) Crie dentro da pasta Documentos, a subpasta fixacao2, nesta pasta crie a pasta imagens e os seguintes
documentos index.html, sobre-chile.html e sobre-russia.html.

2) Para este exercício as imagens podem ser reduzidas de tamanho com a propriedade
WIDTH=”valor_em_pixels”.
3) Ilustrando a página index.html
4) Salve a página com o nome, index.html, como é mostrado na imagem acima.
5) Verifique se funcionou no navegador.

Ilustrando a página sobre-russia.html

Ilustrando a página sobre-chile.html

Observação: você pode pesquisar outros países.

Exercício 4:

Este exercício, tem como objetivo, criar uma página, criar uma página falando sobre as nove posições do Beisebol,
utilizando para isso uma tabela.
1) Crie dentro da pasta Documentos, a subpasta fixacao4, nesta pasta crie a pasta imagens e o documento
index.html.

2) Desenvolva a página conforme ilustração abaixo. A imagem pode ser reduzida com a propriedade
WIDTH=”valor_em_pixels”

3) Após ter concluído, salve o documento com o nome index.html

4) Faça um teste no navegador.

Observação: você pode pesquisar outro esporte.

Exercício 5:
Este exercício, tem como objetivo, desenvolver uma página sobre uma loja fictícia, a primeira página, vai exibir
algumas informações e um link para acessar a página falando sobre moda masculina, e outra página falando sobre
moda feminina.
1) Crie dentro da pasta Documentos, a subpasta fixacao4, nesta pasta crie a pasta imagens e o documento
index.html.

2) As imagens a serem utilizadas, apliquem a propriedade WIDTH=”valor_em_pixels” para reduzir o tamanho.

3) Desenvolva a página conforme a ilustração abaixo.

4) Após ter concluído, salve o documento com o nome index.html

5) Faça um teste no navegador.
Criando o arquivo moda-masculina.html

Observação: no caso das imagens, é uma só que representa calças e outra que representa terno, e estão dentro
de uma tabela, por isso foi possível que as categorias aparecessem na lateral.
Criando o arquivo moda-feminina.html

Observação: Pode ser utilizado outras fotos, estas são apenas exemplos.
6) Após ter concluído, salve o documento com o nome index.html
7) Faça um teste no navegador.
3
3. Os formulários HTML.

Nesta aula vamos aprender a utilizar formulários, que são recursos do HTML que permitem que o usuário possa
interagir com o site.
Uma grande vantagem é receber informações dos usuários, muitas vezes um cadastro, facilita em controlar um
fluxo real e ajuda a conhecer as necessidades do cliente.
Outro recurso é desenvolver uma área de acesso, a uma página de informações restritas, com login e senha.

Criar um espaço no site, para que o usuário cadastre seu e-mail, é algo bem interessante, pois manter seus
clientes atualizados, trazendo novidades da sua empresa, é algo promissor. Hoje a newsletter é uma publicação fixa
da empresa para seus clientes e potenciais clientes.

Em um site de compras, é importante ter um formulário de busca, ele agiliza na localização do produto que o
usuário procura.
Estaremos aplicando, cada um destes recursos, utilizando exemplos práticos, para que você possa desenvolver
suas habilidades com estes elementos do HTML.

3.1. A tag FORM

Para criar um formulário, devemos utilizar a tag FORM, que permite reunir diversos elementos de formulário
(botões, campos de digitação, etc). Esta tag possui alguns atributos, entre eles o method (método), que indica a
forma que serão enviadas as respostas e o action (ação), indica o endereço de envio da informação.

O método POST, é o valor que corresponde ao envio de dados, que o formulário armazena. As informações são
enviadas, em um bloco de dados separado da URL. É o método mais utilizado.
O método GET, é o valor que corresponde ao envio de dados, onde as informações são enviadas como se
fizessem parte da URL, são codificados e separados do endereço por um ponto de interrogação.
O ACTION, especifica o local (url) do servidor, que vai processar os dados do formulário.

O atributo NAME, define o nome do formulário.

Sintaxe:

<form method="post" ou "get" action="url">

Campos do formulário

</form>

3.2. Campos do formulário

TAG INPUT

Define um campo de entrada de dados, possui alguns atributos, como nome, tipo, valor de entrada, tamanho
e comprimento.

63
O atributo NOME, é fundamental para que o campo, seja associado por um nome e assim usado em um script
ou uma linguagem de programação como o PHP.
O atributo TYPE, define o tipo de atributo a ser exibido.

O atributo VALUE, define o valor do campo.

O atributo SIZE, define o tamanho do campo.

O atributo MAXLENGTH, define o comprimento, ou seja, a quantidade de caracteres que o campo pode
receber.
Código de exemplo:

<input type="" name="" value="" size="" maxlength="" />

Resultado no navegador:

Tipos de valores definidos no input.

TEXT
Define um campo de digitação que permite inserir apenas uma linha de texto. Para limitar a quantidade de
caracteres podemos utilizar o atributo maxlength.

Exemplo:

Neste exemplo, será possível preencher no máximo 10 caracteres.

SIZE

É o controle da largura da caixa de texto.

Exemplo:

<input type="text" size="40" />

PASSWORD
Define um campo de digitação, protegido, em forma de asteriscos.
Exemplo:
<input type="password" />

64
RADIO
É um botão de escolha, permitindo apenas uma escolha entre as opções apresentadas. Deve possuir o mesmo
nome e o valor deve ser especificado para cada opção.
Exemplo:

<input type="radio" name="sexo" value="f" /> Feminino

<input type="radio" name="sexo" value="m" /> Masculino

CHECKBOX

São caixas a serem marcadas que permitem múltipla escolha. Deve possuir um nome e um valor.
Exemplo:

<input type="checkbox" name="atuacao1" value="ad" /> Administrativo

<input type="checkbox" name="atuacao2" value="vd" /> Vendas

<input type="checkbox" name="atuacao3" value="eq" /> Estoque

<input type="checkbox" name="atuacao4" value="pd" /> Produção

Atributo VALUE

O VALUE é a informação do campo input que será enviada para o servidor. Podemos definir um valor padrão
no value, e caso este campo não for preenchido, será enviado o valor padrão que foi definido para o campo.

Este atributo é opcional, exceto quando o valor do atributo type, for radio ou checkbox.

Exemplo:
<input type="text" value="Digite o seu nome" />

SUBMIT
(Submeter), este botão envia os dados do formulário. O texto do botão pode ser determinado pelo atributo
value.
Exemplo:

<input type="submit" value="Enviar" />

RESET
(Restaurar), este botão permite limpar os dados do formulário.

65
Exemplo:

<input type="Reset" value="Limpar" />

FILE
Um controle que permite enviar um arquivo com o formulário. Neste caso deve ser aplicado o atributo ENCTYPE
na linha do FORM.
Exemplo:

<input type="file" />

ENCTYPE
Este atributo serve para definir o tipo de codificação com que os dados serão enviados. O valor multipart/form-
data.
Este é usado para o usuário enviar um arquivo do seu computador para o servidor.

Exemplo:
<form method="post" ou "get" action="url" enctype="multipart/form-data">

HIDDEN
Um campo com este tipo, não é exibido, porem o valor é enviado ao servidor.

Exemplo:
<input type="hidden" value="valor" name="nome_campo" />

TAG SELECT

O elemento SELECT “<select></select>”, este elemento representa um controle que exibe um menu de opções.
As opções dentro da lista são representadas pelo elemento <option></option>.

<select>
<option>opção 1</option>
<option>opção 2</option>
</select>

Exemplo:

<select name="cidade">
<option>Selecione</option>
<option>Porto Alegre</option>
<option>Canoas</option>
<option>São Leopoldo</option>
</select>

66
Resultado no navegador:

TAG TEXTAREA
A tag TEXTAREA permite a entrada de texto multilinhas. Possui alguns atributos, o cols que permite definir o
número de colunas e o rows que permite definir o número de linhas.
Exemplo:

<textarea name="comentario" cols=30 rows=5></textarea>

Resultado no navegador.

3.3. Exercícios de Conteúdo

Observação: Salve os exercícios, se você precisar de orientação, de como localizar sua pasta, converse com seu
instrutor, para que ele lhe crie uma, ou oriente, onde a mesma se encontra.

Exercício 1:

Este exercício, tem como objetivo, criar uma página de cadastro de clientes. Criaremos na pasta Documentos,
uma pasta chamada exercicio-formularios.
1) Abra o ícone Este Computador, clique duas vezes nesta imagem;

2) Abra a pasta Documentos, clique duas vezes no ícone em destaque;

67
3) Criaremos neste local, uma pasta chamada exercicios-formularios. Clique na pasta em destaque;

4) Pressione a tecla Backspace para apagar o título;

5) Digite exercicios-formularios e pressione a tecla enter;

6) Pronto! Nossa pasta foi criada, agora abriremos o bloco de notas;

7) Clique no botão Iniciar do Windows, em destaque;

8) Na lista, clique em Acessórios do Windows;

9) Em Acessórios, clique em Bloco de Notas;

10) Digite o código abaixo:

<!DOCTYPE HTML>
<html lang="pt-br">
<head>
<meta charset="utf-8"/>
<title>Cadastro de Clientes</title>
</head>
<body>
<h1>Cadastro de Clientes</h1>
<form method="post" action="">
<table>
<tr>
<td>
<strong>Pessoa:</strong>
<input type="radio" name="pessoa" value="f"/>Física
<input type="radio" name="pessoa" value="j"/>Jurídica
</td>
</tr>

68
<tr>
<td><strong>*Nome:</strong></td>
<td><strong>*Sobrenome:</strong></td>
</tr>
<tr>
<td><input type="text" name="nome" size="50" /></td>
<td><input type="text" name="sobrenome" size="20" /></td>
</tr>
<tr>
<td><strong>*E-mail:</strong></td>
<td><strong>Telefone:</strong></td>
</tr>
<tr>
<td><input type="text" name="email" size="50" /></td>
<td><input type="text" name="telefone" /></td>
</tr>
<tr>
<td><strong>Cidade:</strong></td>
<td><strong>Bairro:</strong></td>
</tr>
<tr>
<td><input type="text" name="cidade" size="50" /></td>
<td><input type="text" name="bairro" /></td>
</tr>
<tr>
<td><input type="checkbox" value="s" name="ofertas" />
Quero receber ofertas</td>
</tr>
<tr>
<td><input type="submit" value="Finalizar Cadastro" /></td>
</tr>
</table>
</form>
</body>
</html>

11) Após ter digitado, salve o documento como o nome, cadastro-de-clientes.html.

12) Clique no menu Arquivo;
13) Na lista, clique em Salvar como;
14) Abra a pasta Documentos, clique duas vezes na pasta em destaque;

69
15) Na estrutura de pastas, clique duas vezes na pasta exercicio-formularios em destaque;

16) Clique dentro da caixa Nome, apague o conteúdo e digite cadastro-de-clientes.html;

17) Altere a extensão do documento, clique dentro da caixa Tipo e selecione Todos os arquivos;

18) Para interpretação dos caracteres especiais, na caixa Codificação clique em UTF-8;

19) Para concluir, clique no botão Salvar;

20) Para visualizar o funcionamento, clique duas vezes no ícone do Chrome;

21) Veja o resultado no navegador.

70
Exercício 2:
Este exercício, tem como objetivo, criar uma página permitindo escolher o tipo de veículo e um modelo, neste
exemplo usaremos um campo tipo radio e um select option.
Criando uma pasta para as imagens que serão usadas neste exercício.

1) Clique no botão Nova Pasta em destaque;

2) Digite imagens no nome da pasta e pressione a tecla enter;

3) Para confirmar a nova pasta foi criada, veja a imagem abaixo.

Copiando as imagens que serão usadas no exercício.

Abra a pasta Arquivos auxiliares/aula3/exercicio2-imagens/ e copie as três imagens (carro, moto e caminhão),
e cole dentro da pasta imagens que você acabou de criar.
Observação: qualquer dúvida chame o instrutor, para auxiliar na localização desta pasta, que é a origem das
imagens.

Para desenvolver nosso exercício, acesse o Bloco de Notas.

3) Clique em Iniciar, Acessórios do Windows, Bloco de Notas;

4) O Bloco de Notas é exibido.

5) Digite o código abaixo:

<!DOCTYPE HTML>
<html lang="pt-br">
<head>
<meta charset="utf-8"/>
<title>Tabela FIPE</title>
</head>
<body>

71
<h1>Tabela FIPE</h1>
<form method="post" action="">
<table>
<tr>
<td>
<input type="radio" name="tabela" value="car" /><img src="imagens/carro.png" />
<input type="radio" name="tabela" value="mot" /><img src="imagens/moto.png" />
<input type="radio" name="tabela" value="cam" />
<img src="imagens/caminhao.png" />
</td>
</tr>
<tr>
<td>Descrição</td>
</tr>
<tr>
<td>
<input type="text" name="nome" size="40" />
</td>
</tr>
<tr>
<td>Modelo</td>
</tr>
<tr>
<td>
<select name="modelo">
<option>1985 - Gasolina</option>
<option>1987 - Gasolina</option>
<option>1989 - Gasolina</option>
</select>
</td>
</tr>
<tr>
<td><input type="submit" value="Enviar" /></td>
</tr>
</table>
</form>
</body>
</html>

6) Após ter digitado, salve o documento como o nome, tabela-fipe.html.

7) Clique no menu Arquivo.
8) Na lista que surgiu, clique em Salvar como;
9) Apague o conteúdo da caixa Nome;
10) Digite tabela-fipe.html;
11) Na caixa Tipo, clique na opção Todos os arquivos;
12) Na caixa Codificação, clique na opção UTF-8;
13) Para concluir, clique no botão Salvar;
14) Para visualizar o funcionamento, clique duas vezes no ícone do Chrome;

72
15) Veja o resultado do exercício no navegador.

Exercício 3:

Este exercício, tem como objetivo, criar uma página de login. Para desenvolver nosso exercício, acesse o Bloco
de Notas.
1) Clique em Iniciar, Acessórios do Windows, Bloco de Notas;

2) O Bloco de Notas é exibido.

3) Digite o código abaixo:

<!DOCTYPE HTML>
<html lang="pt-br">
<head>
<meta charset="utf-8"/>
<title>Acesse sua conta</title>
</head>
<body>
<h1>Conta Web</h1>
<form method="post" action="">
<table>
<tr>
<td><input type="button" value="ENTRE COM O FACEBOOK" /></td>
</tr>
<tr>
<td>Ou entre com o seu login.</td>
</tr>
<tr>
<td><input type="text" name="login" value="Digite seu login" /></td>

73
</tr>
<tr>
<td><input type="password" name="senha" value="Digite sua senha" /></td>
</tr>
<tr>
<td><input type="checkbox" name="contado" value="s" /> Manter conectado |
<a href="#">Esqueceu sua senha?</a></td>
</tr>
<tr>
<td><input type="submit" value="ENTRAR" /></td>
</tr>
<tr>
<td>Não tem um login? <a href="#">CADASTRE-SE</a>.</td>
</tr>
</table>
</form>
</body>
</html>

4) Após ter digitado, salve o documento como o nome, tabela-fipe.html.

5) Clique no menu Arquivo;
6) Na lista que surgiu, clique na opção Salvar como;
7) Clique dentro da caixa Nome e digite conta-web.html;
8) Escolha na caixa Tipo a opção Todos os arquivos;
9) Na caixa Codificação clique na opção UTF-8;
10) Para concluir, clique no botão Salvar;
11) Para visualizar o nosso exercício, clique duas vezes no ícone do Chrome;

12) Veja o resultado no navegador.

Exercício 4:

Este exercício, tem como objetivo, criar uma página com duas áreas, uma para acessar a sua conta e outra para
criar uma nova conta.

74
Copiando as imagens que serão usadas no exercício.
Abra a pasta Arquivos auxiliares/aula3/exercicio4-imagens/ e copie a imagem (logo-norte-sound), e cole
dentro da pasta imagens que está dentro da pasta do exercício.
Observação: qualquer dúvida chame o instrutor, para auxiliar na localização desta pasta, que é a origem das
imagens.
Para desenvolver nosso exercício, acesse o Bloco de Notas.

1) Clique em Iniciar, Acessórios do Windows, Bloco de Notas;

2) O Bloco de Notas é exibido.

3) Digite o código abaixo:

<!DOCTYPE HTML>
<html lang="pt-br">
<head>
<meta charset="utf-8"/>
<title>Login | Norte Sound</title>
</head>
<body>
<img src="imagens/logo-norte-sound.png" />
<form method="post" action="">
<table>
<tr>
<td>
<table>
<tr>
<td align="center"><h3>Criar uma nova conta</h3></td>
</tr>
<tr>
<td align="center"><input type="text" name="conta" value="E-mail" size="40" /></td>
</tr>
<tr>
<td align="center"><input type="submit" value="CRIAR CONTA" /></td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
</table>
</td>

75
<td>
<table>
<tr>
<td><h3>Entrar na minha conta</h3></td>
</tr>
<tr>
<td align="center"><input type="text" name="email_cpf" value="E-mail ou CPF" size="40" /></td>
</tr>
<tr>
<td align="center"><input type="text" name="senha" value="senha" size="40" /></td>
</tr>
<tr>
<td align="center"><input type="submit" value="ENTRAR" size="40" /></td>
</tr>
<tr>
<td><a href="#">Esqueci a senha</a></td>
</tr>
</table>
</td>

</tr>
</table>
</form>
</body>
</html>
4) Após ter digitado, salve o documento como o nome, norte-sound.html.
5) Clique no menu Arquivo;
6) Na lista que surgiu, clique na opção Salvar como;
7) Clique dentro da caixa Nome e digite norte-sound.html;
8) Escolha na caixa Tipo a opção Todos os arquivos;
9) Na caixa Codificação clique na opção UTF-8;
10) Para concluir, clique no botão Salvar;
11) Para visualizar o nosso exercício, clique duas vezes no ícone do Chrome;

12) Veja o resultado no navegador.

76
Exercício 5:
Este exercício, tem como objetivo, criar uma página de cadastro de notícias.
Copiando as imagens que serão usadas no exercício.
Abra a pasta Arquivos auxiliares/aula3/exercicio5-imagens/ e copie a imagem (logo-noticias), e cole dentro
da pasta imagens que está dentro da pasta do exercício.
Observação: qualquer dúvida chame o instrutor, para auxiliar na localização desta pasta, que é a origem das
imagens.
Para desenvolver nosso exercício, acesse o Bloco de Notas.

1) Clique em Iniciar, Acessórios do Windows, Bloco de Notas;

2) O Bloco de Notas é exibido.

Digite o código abaixo:

<!DOCTYPE HTML>
<html lang="pt-br">
<head>
<meta charset="utf-8"/>
<title>Notícias da Web</title>
</head>
<body>
<img src="imagens/logo-noticias.jpg" />
<form method="post" action="">
<table>
<tr>
<td align="right"><strong>Título:</strong></td>
<td><input type="text" name="titulo" size="60" /></td>
</tr>
<tr>
<td align="right"><strong>Status:</strong></td>
<td><input type="radio" name="status" value="r" />Rascunho
<input type="radio" name="status" value="p" checked />Publicado

77
</td>
</tr>

<tr>
<td align="right"><strong>Publicado em:</strong></td>
<td><input type="text" name="data-publicado" value="Data" />
<input type="text" name="hora-publicado" value="Hora" /></td>
</tr>

<tr>
<td align="right"><strong>Conteúdo:</strong></td>
<td><textarea name="conteudo" cols="62" rows="8"></textarea></td>
</tr>

3) Após ter digitado, salve o documento como o nome, noticias-web.html;

4) Clique no menu Arquivo;
5) Na lista que surgiu, clique na opção Salvar como;
6) Clique dentro da caixa Nome e digite noticias-web.html;
7) Escolha na caixa Tipo a opção Todos os arquivos;
8) Na caixa Codificação clique na opção UTF-8;
9) Para concluir, clique no botão Salvar;
10) Para visualizar o nosso exercício, clique duas vezes no ícone do Chrome;

11) Veja o resultado no navegador.

78
3.4. Exercícios de Fixação

Crie dentro da pasta Documentos, a subpasta fixacao3, nesta pasta crie a pasta imagens e o documento
index.html.

Exercício 1:
Este exercício, tem como objetivo, criar uma página de cadastro, para desenvolver o formulário utilize o
elemento table e os campos input, radio, checkbox, textarea e submit.
5) Desenvolva a página conforme ilustração abaixo. Definir uma largura para os campos do formulário, o
campo de comentário, definir largura igual a 60 e altura igual a 6.

79
6) Salve a página com o nome, cadastro-associados.html, como é mostrado na imagem acima.
7) Verifique se funcionou no navegador, conforme o exemplo acima.

Exercício 2:

Este exercício, tem como objetivo, criar uma página de cadastro de produtos para desenvolver o formulário
utilize o elemento table e os campos input, input file e submit.
5) Salvar o exercício dentro da pasta fixacao3.

6) Desenvolva a página conforme ilustração abaixo.

7) Salve a página com o nome, cadastro-produtos.html, como é mostrado na imagem acima.

8) Verifique se funcionou no navegador.

Exercício 3:
Este exercício, tem como objetivo, criar uma página de cadastro de clientes, para desenvolver o formulário
utilize o elemento table e os campos input, select e submit. Para controlar o tamanho dos campos utilize os
atributos size, cols e rows.

1) Salvar o exercício dentro da pasta fixacao3.

2) Desenvolva a página conforme ilustração abaixo.

80
3) Salve a página com o nome, cadastro-clientes.html, como é mostrado na imagem acima.
4) Verifique se funcionou no navegador.
Observação: a imagem deve ser copiada da pasta Arquivos auxiliares, aula3 e o arquivo é fixação3.

Exercício 4:

Este exercício, tem como objetivo, criar uma página de login.

1) Salvar o exercício dentro da pasta fixacao3.

2) Desenvolva a página conforme ilustração abaixo.

5) Após ter concluído, salve o documento com o nome login-web.html

6) Faça um teste no navegador.
Observação: as imagens devem ser copiadas da pasta Arquivos auxiliares, aula3 e os arquivos são: avatar,
ícone-login e ícone-senha.
Exercício 5:

Este exercício, tem como objetivo, desenvolver uma página de cadastro de vendas.
1) Salvar o exercício dentro da pasta fixacao3.

81
2) Desenvolva a página conforme ilustração abaixo.

3) Após ter concluído, salve o documento com o nome sistema-vendas.html

4) Faça um teste no navegador.

Observação: as imagens devem ser copiadas da pasta Arquivos auxiliares, aula3 e os arquivos são: digitando,
fornecedor, funcionários, contas, clientes e sistema-vendas.

82
4
4.3. Exercícios de Conteúdo

Olá, seja bem-vindo a nossa área de exercícios. Desenvolvemos uma série de atividades, para que você domine todo
conteúdo abordado nessa aula. Por isso, é muito importante você fazer todos os exercícios e, em caso de dúvida,
chame o seu instrutor.

Observação: Salve os exercícios. Se você precisar de orientação de como localizar sua pasta, converse com seu
instrutor, para que ele lhe ajude a criar uma ou lhe oriente a encontrá-la.

Exercício 1:

Este exercício tem como objetivo criar um site sobre a empresa de ônibus VAI DE BUS, onde serão criadas as
seguintes páginas. index.html, modalidades.html, fretamento.html, vantagens.html e contato.html.O projeto
será desenvolvido dentro da pasta Documentos na pasta vaidebus.

1) Abra o ícone Este Computador, clique duas vezes nesta imagem;

2) Abra a pasta Documentos, clique duas vezes no ícone em destaque;

3) Criaremos neste local uma pasta chamada exercicios-formularios. Clique na pasta em destaque;

4) Pressione a tecla Backspace para apagar o título;

5) Digite vai-de-bus e pressione a tecla enter;
6) Pronto! Nossa pasta foi criada, agora clique duas vezes nela para abri-la.
7) Criaremos a pasta de imagens. Clique no botão Nova pasta em destaque.

8) A pasta foi criada.

Copiando as imagens que serão usadas no exercício.
Abra a pasta Arquivos auxiliares/aula4/imagens-exercício-passo-a-passo/ e copie todasas imagens e cole
dentro da pasta imagens que está dentro da pasta do exercício.

88
Observação: Em caso de dúvida, chame o instrutor para auxiliar na localização desta pasta, que é a origem das
imagens.

9) Vamos abrir o bloco de notas;

10) Clique no botão Iniciar do Windows em destaque;

11) Na lista, clique em Acessórios do Windows;

12) Em Acessórios, clique em Bloco de notas;

13) Vamos iniciar criando a página home, digiteo código abaixo:

<!DOCTYPE HTML>
<html lang="pt-br">
<head>
<meta charset="utf-8"/>
<title>Vai de Bus</title>
</head>
<body style="text-align:center;">

<img src="imagens/cabecalho.png" alt="vai de bus"/>

<p>
<a href="index.html">HOME</a> |
<a href="modalidades.html">MODALIDADES</a> |
<a href="fretamento.html">FRETAMENTO</a> |
<a href="vantagens.html">VANTAGENS</a> |
<a href="contato.html">CONTATO</a>
</p>
<img src="imagens/barra1.png" />
<img src="imagens/home-banner.png" />
<hr/>
<p>VAIDEBUS - Todos os direitos reservados. Rua Ipiranga, 123 | Sapiranga/RS | Fone:
(051) 3670-0010</p>

</body>
</html>
14) Após ter digitado, salve o documento como o nome index.html.
15) Clique no menu Arquivo;

89
16) Na lista, clique em Salvar como;
17) Abra a pasta Documentos, clique duas vezes na pasta em destaque;

18) Na estrutura de pastas, clique duas vezes na pasta vai-de-bus em destaque;

19) Clique dentro da caixa Nome, apague o conteúdo e digite index.html;

20) Altere a extensão do documento, clique dentro da caixa Tipo e selecione Todos os arquivos;
21) Para interpretação dos caracteres especiais, na caixa Codificação clique em UTF-8;
22) Para concluir, clique no botão Salvar;
23) Para visualizar o funcionamento, clique duas vezes no ícone do Chrome;
24) Veja o resultado no navegador.

Exercício 2:
Este exercício tem como objetivo criar a página modalidades. Utilizaremos o index.html como base.

1) Clique com o botão direito no index.html

2) Na lista que surgiu, clique na opção Copiar;

3) Para exibir a cópia, clique com o botão direito do mouse dentro do local em destaque;

90
4) Na lista que surgiu, clique na opção Colar;

5) Esta cópia deve ser renomeada para modalidades, clique com o botão direito na cópia.

6) Na lista que surgiu, clique na opção Renomear.

7) Pressione a tecla Backspace para apagar e digite o nome modalidades;
8) Para editar este documento, clique com o botão direito na área em destaque.

9) Na lista ao lado, clique em Bloco de notas;

10) Com o Bloco de notas aberto, selecione a área em destaque;

11) Pressione a tecla Backspace para apagar.

12) Acrescente o código abaixo, conforme a área em destaque com as chaves:

<!DOCTYPE HTML>
<html lang="pt-br">
<head>
<meta charset="utf-8"/>

91
<title>Vai de Bus</title>
</head>
<body style="text-align:center;">

<img src="imagens/cabecalho.png" alt="vai de bus"/>

<h1>MODALIDADES</h1>

<p>Conheça as diversas modalidades de viajar com a VAIDEBUS.</p>

<h3>Convencional</h3>
<p>Possui paradas ao longo da viagem para embarque e desembarque de passageiros.</p>

<h3>Semi-direto</h3>
<p>O embarque e o desembarque são feitos em mais de uma localidade.</p>

<hr/>

</body>
</html>

13) Para atualizar o documento, clique no menu Arquivo;

14) Na lista que surgiu, clique na opção Salvar;

15) Pronto! O documento foi atualizado.

16) Na pasta do projeto, clique duas vezes no ícone modalidades.

17) Veja o resultado no navegador.

92
Exercício 3:

Este exercício tem como objetivo criar a página fretamento. Utilizaremos o index.html como base.
1) Clique com o botão direito no index.html

2) Na lista que surgiu, clique na opção Copiar;

3) Na área em destaque, clique com o botão direito;

4) Escolha a opção Colar;

5) A cópia surgiu, clique com o botão direito do mouse nesse documento.

6) Selecione a opção Renomear;

7) Pressione a tecla Backspace para apagar.

8) Digite fretamento e pressione a tecla Enter.

9) Para editar este documento, clique com o botão direito na área em destaque.

93
10) Clique na opção Abrir com;
11) Na lista que surgiu, clique na opção Bloco de notas;
12) Com o Bloco de notas aberto, selecione a área em destaque;

13) Pressione a tecla Backspace para apagar e acrescente o código abaixo, conforme área em destaque com as
chaves:

<!DOCTYPE HTML>
<html lang="pt-br">
<head>
<meta charset="utf-8"/>
<title>Vai de Bus</title>
</head>
<body style="text-align:center;">

<img src="imagens/cabecalho.png" alt="vai de bus"/>

<h1>FRETAMENTO</h1>

<p>
Com o fretamento o cliente é quem escolhe seu destino.</p>
<p>
A empresa disponibiliza carros modernos, confortáveis<br/>
e motoristas
treinados para deixar a viagem ainda melhor.</p>

94
<img src="imagens/fretamento1.png" />

<h3>Confira as modalidades:</h3>

<p><strong>Viagens turísticas:</strong><br/>
<p>Traslado para aeroportos e hotéis, locação de ônibus com motorista em tempo integral para
passeio.</p>

<p>Viagens escolares:<br/>
Ônibus seguros e profissionais treinados para transportar as crianças em viagens nacionais, internacionais
e passeios educativos.</p>

<hr/>

</body>
</html>

14) Para atualizar o documento, clique no menu Arquivo;

15) Na lista que surgiu, clique na opção Salvar;

16) Pronto! O documento foi atualizado.

17) Na pasta do projeto, clique duas vezes no ícone fretamento.

18) Veja o resultado no navegador.

Exercício 4:
Este exercício tem como objetivo criar a página vantagens. Utilizaremos o index.html como base.
1) Clique com o botão direito no index.html

95
2) Na lista que surgiu, clique na opção Copiar.

3) Na área em destaque clique com o botão direito;

4) Selecione a opção Colar;

5) A cópia surgiu, clique com o botão direito do mouse nesse documento;

6) Clique na opção Renomear;

7) Digite o nome vantagens e pressione a tecla enter;

8) Para editar este documento, clique com o botão direito na área em destaque;

9) Na lista que surgiu, clique em Abrir com;

10) Na próxima lista, clique na opção Bloco de notas;
11) Selecione a área em destaque e pressione a tecla Backspace para apagar;

19) Pressione a tecla Backspace para apagar e acrescente o código abaixo, conforme área em destaque com as
chaves:

<!DOCTYPE HTML>
<html lang="pt-br">
<head>
<meta charset="utf-8"/>
<title>Vai de Bus</title>
</head>
<body style="text-align:center;">

96
<img src="imagens/cabecalho.png" alt="vai de bus"/>
<p>
<a href="index.html">HOME</a> |
<a href="modalidades.html">MODALIDADES</a> |
<a href="fretamento.html">FRETAMENTO</a> |
<a href="vantagens.html">VANTAGENS</a> |
<a href="contato.html">CONTATO</a>
</p>
<img src="imagens/barra1.png" />
<h1>VANTAGENS</h1>

<img src="imagens/vantagens.png" />

<p>
Compre a sua passagem de ônibus antecipada e ganhe até 30% de desconto. São diversos destinos
intermunicipais e interestaduais para você viajar. Consulte linhas cadastradas com essa vantagem.
</p>

<p>

Para garantir o seu desconto, compre sua passagem com antecedência e peça pela promoção na hora da compra.
Nas viagens intermunicipais, você pode pagar em até 6 vezes e nas interestaduais em até 10 vezes.
</p>
<p>
Economize na passagem e esbanje reencontros.
</p>
<hr/>
<p>VAIDEBUS - Todos os direitos reservados. Rua Ipiranga, 123 | Sapiranga/RS | Fone: (051) 3670-0010</p>

</body>
</html>
20) Para atualizar o documento, clique no menu Arquivo;

21) Na lista que surgiu, clique na opção Salvar;

22) Pronto! O documento foi atualizado.

23) Na pasta do projeto, clique duas vezes no ícone vantagens.

24) Veja o resultado no navegador

97
Exercício 5:

Este exercício tem como objetivo criar a página contato. Utilizaremos o index.html como base.
1) Clique com o botão direito no index.html

2) Na lista que surgiu, clique na opção Copiar;

3) Na área em destaque, clique com o botão direito;

4) Na lista que surgiu, clique na opção Colar;

5) Clique com o botão direito na cópia;
6) Na lista que surgiu, clique na opção Renomear;
7) Digite o nome contato e pressione a tecla enter;
8) Para editar este documento, clique com o botão direito na área em destaque;

98
9) Na área em destaque, clique com o botão direito;

10) Na lista que surgiu, clique na opção Abrir com;

11) Na próxima lista, clique em Bloco de notas;
12) Selecione a área em destaque e pressione a tecla Backspace para apagar;

13) Acrescente o código abaixo, conforme área em destaque com as chaves:

<!DOCTYPE HTML>
<html lang="pt-br">
<head>
<meta charset="utf-8"/>
<title>Vai de Bus</title>
</head>
<body style="text-align:center;">

<img src="imagens/cabecalho.png" alt="vai de bus"/>

99
<p>Entre em contato com preenchendo o formulário ao lado.
Teremos o maior prazer em atender ao seu contato.</p>

<form method="post" action="">

<table style="width:600px; margin:auto;">
<tr>
<td colspan="2" align="left">
<input type="radio" name="pessoa" value="f"/>Pessoa Física
<input type="radio" name="pessoa" value="f"/>Pessoa Física
</td>
</tr>
<tr>
<td align="right">CPF:</td>
<td align="left"><input type="text" name="cpf" size="50"/></td>
</tr>
<tr>
<td align="right">Nome:</td>
<td align="left"><input type="text" name="nome" size="50"/></td>
</tr>
<tr>
<td align="right">E-mail:</td>
<td align="left"><input type="text" name="email" size="50"/></td>
</tr>
<tr>
<td align="right">Fone:</td>
<td align="left"><input type="text" name="fone" size="50"/></td>
</tr>
<tr>
<td align="right">Cidade:</td>
<td align="left"><input type="text" name="cidade" size="50"/></td>
</tr>
<tr>
<td align="right">Assunto:</td>
<td align="left">
<select name="assunto">
<option>Selecione</option>
<option>Cancelamento</option>
<option>Elogio</option>
<option>Encomendas</option>
<option>Informação</option>
<option>Reclamação</option>
<option>Vendas</option>
<option>Sugestão</option>
</select>
</td>
</tr>
<tr>
<td align="right">Mensagem:</td>
<td align="left"><textarea name="msg" cols="50" rows="6"></textarea></td>
</tr>

100
<tr>
<td align="left"></td>
<td align="left"><input type="submit" value="Enviar"/></td>
</tr>
</table>
</form>

<hr/>

</body>
</html>

14) Para atualizar o documento, clique no menu Arquivo;

15) Na lista que surgiu, clique na opção Salvar

16) Pronto! O documento foi atualizado.

17) Na pasta do projeto, clique duas vezes no ícone contato.

4.4. Exercícios de Fixação

Crie dentro da pasta Documentos, a pasta fixacao4 e a pasta imagens.

101
Exercício 1:

Este exercício, tem como objetivo, criar um site sobre esportes. Cada exercício vai tratar de uma página do site.
Iniciamos com a index. Lembre-se que os links são index.html, futebol.html, volei.html, beisebol.html e
contato.html
8) Desenvolva a página conforme ilustração abaixo.

1) Salve a página com o nome, index.html, como é mostrado na imagem acima.

2) Verifique se funcionou no navegador, conforme o exemplo acima.

Exercício 2:

Este exercício, tem como objetivo, criar a página sobre futebol.

1) Desenvolva a página conforme ilustração abaixo.

102
2) Salve a página com o nome, futebol.html, como é mostrado na imagem acima.

3) Verifique se funcionou no navegador, conforme o exemplo acima.

Exercício 3:

Este exercício, tem como objetivo, criar a página sobre volei.

1) Desenvolva a página conforme ilustração abaixo.

2) Salve a página com o nome, futebol.html, como é mostrado na imagem acima.

3) Verifique se funcionou no navegador, conforme o exemplo acima.

Exercício 4:

Este exercício, tem como objetivo, criar a página sobre beisebol.

1) Desenvolva a página conforme ilustração abaixo.

103
2) Salve a página com o nome, beisebol.html, como é mostrado na imagem acima.

3) Verifique se funcionou no navegador, conforme o exemplo acima.

Exercício 5:

Este exercício, tem como objetivo, criar a página sobre contato.

1) Desenvolva a página conforme ilustração abaixo.

2) Salve a página com o nome, contato.html, como é mostrado na imagem acima.

3) Verifique se funcionou no navegador, conforme o exemplo acima.

104
5
5.4. Exercícios de Conteúdo

Olá, seja bem-vindo a nossa área de exercícios. Desenvolvemos uma série de atividades, para que você domine todo
conteúdo abordado nessa aula, por isso é muito importante que você faça todos os exercícios. Qualquer dúvida,
chame o seu instrutor.

Observação: Salve os exercícios. Se você precisar de orientação de como localizar sua pasta, converse com seu
instrutor para que ele lhe ajude a criar uma ou lhe oriente a encontrá-la.
Exercício 1:

Este exercício tem como objetivo criar umsitesobre a fictícia vinícola Porto Oliva, onde serão criadas as
seguintes páginas: index.html, produtos.html, vinicola.htmlefale-conosco.html.O projeto será desenvolvido
dentro da pasta Documentos na pasta porto-oliva.

1) Abra o ícone Este Computador, clique duas vezes nesta imagem;

111
2) Abra a pasta Documentos, clique duas vezes no ícone em destaque;

3) Criaremos, nesse local, uma pasta chamada porto-oliva. Clique na pasta em destaque;

4) Pressione a tecla Backspace para apagar o título;

5) Digite porto-oliva e pressione a tecla enter;
6) Pronto! Nossa pasta foi criada, agora clique duas vezes nessa pasta para abri-la.
7) Criaremos a pasta de imagens. Clique no botão Nova pasta.
8) A pasta foi criada.
Copiando as imagens que serão usadas no exercício.

Abra a pasta Arquivos auxiliares/aula5/imagens-exercício-passo-a-passo/ e copie todas as imagens e cole

dentro da pasta imagens, localizada dentro da pasta do exercício.
Observação: em caso de dúvida, chame o instrutor para auxiliar na localização dessa pasta, que é a origem das
imagens.
9) Vamos abrir o bloco de notas;
10) Clique no botão Iniciar do Windows em destaque;

11) Na lista, clique em Acessórios do Windows;

12) Em Acessórios, clique em Bloco de notas;

13) Vamos iniciar criando a página home, digiteo código abaixo:

112
<!DOCTYPE HTML>
<html lang="pt-br">
<head>
<meta charset="utf-8"/>
<title>Vinícola Porto Oliva</title>
</head>
<body style="margin:auto; width:1000px; text-align:center">
<header>
<figure style="margin:0">
<img src="imagens/barra-home.jpg" alt="Vinícola Porto Oliva"/>
</figure>
</header>

<section>
<hr/>
<nav>
<a href="index.html">HOME</a> |
<a href="produtos.html">PRODUTOS</a> |
<a href="vinicola.html">VINÍCOLA</a> |
<a href="fale-conosco.html">FALE CONOSCO</a>
</nav>
<hr/>
<figure style="margin:0">
<img src="imagens/banner-home.jpg" alt="Banner"/>
<img src="imagens/barra-representantes.jpg" alt="Nossos Representantes"/>
</figure>
<p>
<strong>Clique no mapa e selecione um Estado para ver a lista de representantes.</strong>
</p>
<figure style="margin:0">
<img src="imagens/mapa-home.jpg" alt="Mapa Representantes"/>
</figure>
</section>
<hr/>
<footer>
<p>Vinícola Porto Oliva - Todos os direitos reservados© </p>
</footer>
</body>
</html>

14) Após ter digitado, salve o documento como o nome, index.html.

15) Clique no menu Arquivo;
16) Na lista que surgiu, clique na opção Salvar como.
17) Abra a pasta Documentos, clique duas vezes na pasta em destaque;
18) Na estrutura, clique duas vezes na pastas porto-oliva.
19) Clique dentro da caixa Nome, apague o conteúdo e digite index.html
20) Altere a extensão do documento, clique dentro da caixa Tipo e selecione Todos os arquivos
21) Para interpretação dos caracteres especiais, na caixa Codificação clique em UTF-8;
22) Para concluir, clique no botão Salvar;
23) Para visualizar o funcionamento, clique duas vezes no ícone do Chrome;
24) Veja o resultado no navegador.

113
Exercício 2:

Este exercício tem como objetivo criar a página produtos. Utilizaremos o index.html como base.
1) Clique com o botão direito no index.html

2) Na lista que surgiu, clique na opção Copiar;

3) Para exibir a cópia, clique com o botão direito do mouse dentro do local em destaque;

4) Na lista que surgiu, clique na opção Colar;

5) Essa cópia deve ser renomeada para produtos, clique com o botão direito na cópia.
6) Na lista que surgiu, clique na opção Renomear.
7) Pressione a tecla Backspace para apagar e digite o nome produtos;
8) Para editar esse documento, clique com o botão direito na área em destaque.

9) Na lista ao lado, clique em Bloco de notas;

10) Com o Bloco de notas aberto, selecione a área em destaque;

114
11) Pressione a tecla Backspace para apagar.
12) Acrescente o código abaixo, conforme a área em destaque com as chaves:
<!DOCTYPE HTML>
<html lang="pt-br">

<head>
<meta charset="utf-8"/>
<title>Vinícola Porto Oliva</title>
</head>

<body style="margin:auto; width:1000px; text-align:center">

</header>

<section>
<hr/>
<nav>
<a href="index.html">HOME</a> |
<a href="produtos.html">PRODUTOS</a> |
<a href="vinicola.html">VINÍCOLA</a> |
<a href="fale-conosco.html">FALE CONOSCO</a>
</nav>
<hr/>
<figure style="margin:0">
<img src="imagens/barra-produtos.jpg" alt="Nossos Produtos"/>
</figure>
<table style="margin:auto">
<tr>
<td><img src="imagens/foto1.jpg"/></td>
<td><img src="imagens/foto2.jpg"/></td>
<td><img src="imagens/foto3.jpg"/></td>
<td><img src="imagens/foto4.jpg"/></td>
</tr>
<tr>
<td>Vinho Tinto Porto Oliva <br/> R$ 25,90 <br/><button>Comprar</button></td>
<td>Vinho Demi-seco <br/> R$ 33,50 <br/><button>Comprar</button></td>
<td>Vinho Tinto Porto Oliva <br/> R$ 45,50 <br/><button>Comprar</button></td>
<td>Vinha Tinto Porto Oliva <br/> R$ 62,90 <br/><button>Comprar</button></td>
</tr>
</table>
</section>

115
<hr/>
<footer>
<p>Vinícola Porto Oliva - Todos os direitos reservados© </p>
</footer>

</body>
</html>
13) Para atualizar o documento, clique no menu Arquivo;
14) Na lista que surgiu, clique na opção Salvar;
15) Pronto! O documento foi atualizado.
16) No navegador, clique no link produtos.

17) Veja o resultado no navegador.

Exercício 3:

Este exercício tem como objetivo criar a página vinícola. Utilizaremos o index.html como base.
1) Clique com o botão direito no index.html

2) Na lista que surgiu, clique na opção Copiar;

3) Para exibir a cópia, clique com o botão direito do mouse dentro do local em destaque;

116
4) Na lista que surgiu, clique na opção Colar;

5) Essa cópia deve ser renomeada para produtos, clique com o botão direito na cópia e selecione Renomear.

6) Digite vinicola e pressione a tecla Enter.

7) Para editar o documento, clique com o botão direito nele, escolha Abrir com e, na lista, clique em Bloco de
notas.
8) Com o Bloco de notas aberto, selecione a área em destaque.

9) Pressione a tecla Backspace para apagar.

10) Acrescente o código abaixo, conforme a área em destaque com as chaves:

<p>A nossa história inicia em 1930, com a chegada de imigrantes italianos. Estabelecidos no Sul do Brasil, na
Serra Gaúcha, onde encontraram paisagens e clima similar aos de seu país de origem.</p>
<h4>Tipos de Vinhos</p>

<article style="margin:0 auto;">

Observação: Para acrescentar o vídeo, siga os próximos passos:

1-No youtube, digite “sobre vinhos”;

2-Escolha um dos vídeos e clique em Compartilhar;

117
3-Na lista que surgiu, clique em Incoporar;

4-Copie o endereço que é exibido e cole dentro do código.

11) Para atualizar o documento, clique no menu Arquivo;

12) Na lista que surgiu, clique na opção Salvar;

13) Pronto! O documento foi atualizado.

14) No navegador clique no link produtos.

Exercício 5:
Este exercício tem como objetivo criar a página fale conosco. Utilizaremos o index.html como base.

1) Clique com o botão direito no index.html

2) Na lista que surgiu, clique na opção Copiar;

3) Na área em destaque, clique com o botão direito;

118
4) Na lista que surgiu, clique na opção Colar;

5) Clique com o botão direito na cópia;

6) Na lista que surgiu, clique na opção Renomear;

7) Digite o nome fale-conosco e pressione a tecla enter;

8) Para editar esse documento, clique com o botão direito na área em destaque;

9) Na área em destaque, clique com o botão direito;

10) Na lista que surgiu, clique na opção Abrir com e, ao lado, selecione Bloco de notas;

11) Selecione a área em destaque e pressione a tecla Backspace para apagar;

12) Acrescente o código abaixo, conforme área em destaque com as chaves:

<!DOCTYPE HTML>
<html lang="pt-br">

<head>
<meta charset="utf-8"/>
<title>Vinícola Porto Oliva</title>
</head>

119
<body style="margin:auto; width:1000px; text-align:center">
<header>
<figure style="margin:0"><img src="imagens/barra-home.jpg" alt="Vinícola Porto Oliva"/></figure>
</header>
<section>
<hr/>
<nav>
<a href="index.html">HOME</a> |
<a href="produtos.html">PRODUTOS</a> |
<a href="vinicola.html">VINÍCOLA</a> |
<a href="fale-conosco.html">FALE CONOSCO</a>
</nav>
<hr/>
<figure style="margin:0">
<img src="imagens/barra-fale-conosco.jpg" alt="Fale Conosco"/>
</figure>
<table style="margin:auto; text-align:left">
<tr>
<td>Nome:</td>
</tr>
<tr>
<td><input type="text" size="50" name="nome"/></td>
</tr>
<tr>
<td>E-mail:</td>
</tr>
<tr>
<td><input type="text" size="50" name="email"/></td>
</tr>
<tr>
<td>Assunto:</td>
</tr>
<tr>
<td><input type="text" size="50" name="assunto"/></td>
</tr>
<tr>
<td>Mensagem:</td>
</tr>
<tr>
<td><textarea cols="51" rows="8" name="msg"></textarea></td>
</tr>
<tr>
<td><input type="submit" value="Enviar"/></td>
</tr>
</table>
</section>
<hr/>
<footer>
<p>Vinícola Porto Oliva - Todos os direitos reservados© </p>
</footer>

</body>
</html>

120
13) Para atualizar o documento, clique no menu Arquivo;

14) Na lista que surgiu, clique na opção Salvar

15) Pronto! O documento foi atualizado.

16) Na pasta do projeto, clique duas vezes no ícone contato.

5.5. Exercícios de Fixação

Abra a pasta Arquivos auxiliares/aula5/imagens-exercício-fixação/ e copie todas as imagens, e cole dentro da

pasta imagens que está dentro da pasta do exercício.

Observação: qualquer dúvida chame o instrutor, para auxiliar na localização desta pasta, que é a origem das
imagens.

Para organizar nossos exercícios, iremos criar uma pasta de trabalho.

Crie dentro da pasta Documentos, a pasta fixacao5 e a pasta imagens.

121
Exercício 1:
Este exercício, tem como objetivo, criar um site sobre floricultura. Cada exercício vai tratar de uma página do
site. Iniciamos com a index. Lembre-se que os links são index.html, arranjos.html, cestas.html e cartoes.html
Desenvolva a página conforme ilustração abaixo.

Salve a página com o nome, index.html, como é mostrado na imagem acima.

Verifique se funcionou no navegador, conforme o exemplo acima.

Exercício 2:

Este exercício, tem como objetivo, criar a página sobre arranjos.

Desenvolva a página conforme ilustração abaixo.

122
Salve a página com o nome, arranjos.html, como é mostrado na imagem acima.
Verifique se funcionou no navegador, conforme o exemplo acima.

Exercício 3:

Este exercício, tem como objetivo, criar a página sobre cestas.

Desenvolva a página conforme ilustração abaixo.

123
Salve a página com o nome, cestas.html, como é mostrado na imagem acima.
Verifique se funcionou no navegador, conforme o exemplo acima.

Exercício 4:

Este exercício, tem como objetivo, criar a página sobre cartões.

Desenvolva a página conforme ilustração abaixo.

Salve a página com o nome, cartoes.html, como é mostrado na imagem acima.

Verifique se funcionou no navegador, conforme o exemplo acima.

124
6
6.7. Exercícios de Conteúdo

Olá, seja bem-vindo a nossa área de exercícios. Desenvolvemos uma série de atividades para que você domine todo
conteúdo abordado nesta aula. É muito importante você fazer todos os exercícios e, qualquer dúvida, chame o seu
instrutor.

Exercício 1:

Este exercício tem como objetivo, criar um site sobre a fictícia Amo Neve, onde serão criadas as seguintes
páginas. index.html, aneve.html, equipamentos.html e estacao-ski.html e fale-conosco.html. O projeto será
desenvolvido dentro da pasta Documentos na pasta amo-neve.
1) Abra o ícone Este Computador, clique duas vezes nesta imagem;

2) Abra a pasta Documentos, clique duas vezes no ícone em destaque;

137
3) Criaremos, neste local, uma pasta chamada amo-neve. Clique na pasta em destaque;

4) Pressione a tecla Backspace para apagar o título;

5) Digite amo-neve e pressione a tecla enter;
6) Pronto! Nossa pasta foi criada, agora clique duas vezes nesta pasta para abri-la.
7) Criaremos a pasta de imagens. Clique no botão Nova pasta em destaque.

8) A pasta foi criada.

Copiando as imagens que serão usadas no exercício.

Abra a pasta Arquivos auxiliares/aula6/imagens-exercício-passo-a-passo/ e copie todas as imagens. Após cole
dentro da pasta imagens que está dentro da pasta do exercício.

Observação: qualquer dúvida chame o instrutor, para auxiliar na localização desta pasta, que é a origem das
imagens.

9) Vamos abrir o bloco de notas;

10) Clique no botão Iniciar do Windows em destaque;

11) Na lista, clique em Acessórios do Windows;

12) Em Acessórios, clique em Bloco de notas;

138
13) Vamos iniciar criando a página home, digite o código abaixo:
<!DOCTYPE HTML>
<html lang="pt-br">
<head>

<div style="height:600px;">
<h1 style="font:bold 22px verdana">CATEGORIAS</h1>
<figure style="margin:0; height:470px;">
<div style="float:left; width:482px; height:400px">
<a href="aneve.html"><img src="imagens/imagem1.jpg" title="Clique para abrir" alt="A
Neve"/></a>
<figcaption style="font:bold 14px arial;">A Neve</figcaption>
<a href="estacao-ski.html"><img style="margin-top:10px;" src="imagens/imagem3.jpg"
title="Clique para abrir" alt="Estação Ski"/></a>
<figcaption style="font:bold 14px arial;">Estação de Ski</figcaption>
</div>
<div style="float:right; width:482px; height:400px">
<a href="equipamentos.html"><img src="imagens/imagem2.jpg" title="Clique para abrir"
alt="Estação de Ski"/></a>
<figcaption style="font:bold 14px arial;">Equipamentos</figcaption>
<a href="fale-conosco.html"><img style="margin-top:10px;" src="imagens/imagem4.jpg"
title="Clique para abrir" alt="Fale conosco"/></a>
<figcaption style="font:bold 14px arial;">Entre em Contato</figcaption>
</div>
</figure>
<div style="width:1000px; height:110px; background:#EEE; float:left;">
<h4 style="width:200px; text-align:left; font:bold 16px arial; margin:35px 20px;
float:left;">CADASTRE-SE PARA RECEBER NOVIDADES.</h4>
<form method="post" style="float:right; margin-right:20px;">
<table>

139
<tr>
<td><input type="text" value="Nome" style="width:300px; height:22px; margin-
top:40px;"/></td>
<td><input type="text" value="E-mail" style="width:300px; height:22px; margin-
top:40px;"/></td>
</tr>
</table>
</form>
</div>
<div style="width:1000px; height:100px; background:black; float:left;">
<figure style="margin:0">
<a href="#" target="_blank"><img style="margin:10px;" src="imagens/face.png" title="Face"
alt="Face"/></a>
<a href="#" target="_blank"><img style="margin:10px;" src="imagens/insta.png"
title="Instagram" alt="Instagram"/></a>
<a href="#" target="_blank"><img style="margin:10px;" src="imagens/twitter.png"
title="Twitter" alt="Twitter"/></a>
</figure>
</div>
</div>
</section>
<footer style="width:1000px; height:20px; background:#333; float:left;">
<p style="margin:3px 0; color:white; font:normal 10px verdana;">Amo Neve - Todos os direitos
reservados© </p>
</footer>
</body>
</html>

14) Após ter digitado, salve o documento como o nome, index.html.

15) Clique no menu Arquivo;

16) Na lista que surgiu, clique na opção Salvar como.

17) Abra a pasta Documentos, clique duas vezes na pasta em destaque;

18) Abra a pasta amo-neve.

140
19) Clique dentro da caixa Nome, apague o conteúdo e digite index.html
20) Altere a extensão do documento, clique dentro da caixa Tipo e selecione Todos os arquivos

21) Para interpretação dos caracteres especiais, na caixa Codificação clique em UTF-8;
22) Para concluir, clique no botão Salvar;
23) Para visualizar o funcionamento, clique duas vezes no ícone do Chrome;

24) Veja o resultado no navegador.

Exercício 2:
Este exercício tem como objetivo criar a página ANEVE. Utilizaremos o index.html como base.
1) Clique com o botão direito no index.html

2) Clique na opção Copiar;

3) Para exibir a cópia, clique com o botão direito do mouse, dentro do local em destaque;

141
4) Clique na opção Colar;
5) Esta cópia deve ser renomeada como aneve. Para isso, clique com o botão direito na cópia.

6) Clique na opção Renomear.

7) Pressione a tecla Backspace para apagar e digite o nome aneve;

8) Para editar este documento, clique com o botão direito na área em destaque em Abrir com. Após, clique
na opção Bloco de notas.
9) Com o Bloco de notas aberto, selecione a área em destaque;

10) Pressione a tecla Backspace para apagar.

142
11) Acrescente o código abaixo. Compare o código para verificar o que pode ser mantido.
<!DOCTYPE HTML>
<html lang="pt-br">
<head>

<a href="index.html" style="color:yellow; width:100px; height:30px; display:block; font:bold 14px arial; text-
decoration:none; line-height:30px; background:#13102B;">HOME</a>
<h1 style="font:normal 22px verdana; margin:0;">A NEVE</h1>
</header>
<section style="background:white;">
<div style="height:570px;">
<article style="width:440px; height:450px; margin-left:5px; float:left;">
<p style="font:normal 12px arial; text-align:justify;">As sensações que temos ao entrar em contato com a neve são muitas, e
completamente diferentes do que estamos costumados ao viver em um país tropical: o frio seco, as paisagens que misturam o
verde dos bosques com o branco intenso…</p>
<p style="font:normal 12px arial; text-align:justify;">As sensações que temos ao entrar em contato com a neve são muitas, e
completamente diferentes do que estamos costumados ao viver em um país tropical: o frio seco, as paisagens que misturam o
verde dos bosques com o branco intenso…</p>
<p style="font:normal 12px arial; text-align:justify;">As sensações que temos ao entrar em contato com a neve são muitas, e
completamente diferentes do que estamos costumados ao viver em um país tropical: o frio seco, as paisagens que misturam o
verde dos bosques com o branco intenso…</p>
<figure style="margin:0;">
<img src="imagens/aneve.jpg"/>
</figure>
</article>
<article style="width:530px; height:450px; float:right; margin:15px 5px 0 0;">
<figure style="margin:0;">
<img src="imagens/aneve1.jpg"/>
</figure>
<p style="font:normal 12px arial; text-align:justify;">
A possibilidade de fazer um grande número de atividades, sejam elas os esportes de neve como o ski e o snowboard;
ou sejam as caminhadas (trekkings), os passeios de bicicleta, de trenó; as aventuras em motos de neve, cavalos, jipes
tracionados…</p>
<p style="font:normal 12px arial; text-align:justify;">
A possibilidade de fazer um grande número de atividades, sejam elas os esportes de neve como o ski e o snowboard;
ou sejam as caminhadas (trekkings), os passeios de bicicleta, de trenó; as aventuras em motos de neve, cavalos, jipes
tracionados…</p>
</article>
<div style="width:1000px; height:100px; background:black; float:left; margin-top:10px;">

143
</div>
</section>
<footer style="width:1000px; height:20px; background:#333; float:left;">
<p style="margin:3px 0; color:white; font:normal 10px verdana;">
Amo Neve - Todos os direitos reservados©
</p>
</footer>
</body>
</html>
12) Para atualizar o documento, clique no menu Arquivo;
13) Na lista que surgiu, clique na opção Salvar;
14) Pronto! O documento foi atualizado.
15) No navegador clique no link A Neve e veja o resultado.

Exercício 3:
Este exercício tem como objetivo criar a página equipamentos. Utilizaremos o index.html como base.

1) Clique com o botão direito no documento aneve

2) Clique na opção Copiar;

3) Para exibir a cópia, clique com o botão direito do mouse dentro do local em destaque;

4) Clique na opção Colar;

144
5) Esta cópia deve ser renomeada para equipamentos, clique com o botão direito na cópia e selecione
Renomear.

6) Digite equipamentos e pressione a tecla Enter.

7) Para editar o documento, clique com o botão direito nele, escolha Abrir com, e na lista clique em Bloco de
notas.
8) Com o Bloco de notas aberto acrescente o código abaixo: Compare o código para verificar o que pode ser
mantido.
<!DOCTYPE HTML>
<html lang="pt-br">
<head>

<a href="aneve.html" style="color:yellow; width:100px; height:30px; display:block; font:bold 14px arial; text-
decoration:none; line-height:30px; background:#13102B; float:left; ">A NEVE</a>
<a href="equipamentos.html" style="color:yellow; width:150px; height:30px;
display:block; font:bold 14px arial; text-decoration:none; line-height:30px; background:#13102B; float:left;
">EQUIPAMENTOS</a>
<a href="estacao-ski.html" style="color:yellow; width:150px; height:30px;
display:block; font:bold 14px arial; text-decoration:none; line-height:30px; background:#13102B; float:left; ">ESTAÇÃO DE
SKI</a>
<a href="fale-conosco.html" style="color:yellow; width:150px; height:30px;
display:block; font:bold 14px arial; text-decoration:none; line-height:30px; background:#13102B; float:left; ">FALE
CONOSCO</a>
</div>
</div>
</header>
<section style="background:white; float:left;">
<h1 style="width:1000px; float:left; font:normal 22px verdana; margin:15px 0;">EQUIPAMENTOS</h1>

<p style="font:normal 14px arial;">Aqui você vai encontrar uma linha diversificada de equipamentos, os
melhores Skis e pranchas de Snowboard.</p>
<div style="width:1000px; height:30px; font:bold 16px verdana; text-align:left; float:left; line-height:30px;
text-indent:0.5cm; background:#4E6C89;color:white;">SKI</div>
<figure>
<img style="margin:10px;" src="imagens/equip1.jpg" alt=""/>
<img style="margin:10px;" src="imagens/equip2.jpg" alt=""/>
<img style="margin:10px;" src="imagens/equip3.jpg" alt=""/>
</figure>
<div style="width:1000px; height:30px; font:bold 16px verdana; text-align:left; float:left; line-height:30px;
text-indent:0.5cm; background:#4E6C89; color:white;">SNOWBOARD</div>
<figure>
<img style="margin:10px;" src="imagens/equip4.jpg" alt=""/>
<img style="margin:10px;" src="imagens/equip5.jpg" alt=""/>
<img style="margin:10px;" src="imagens/equip6.jpg" alt=""/>
</figure>
<div style="width:1000px; height:100px; float:left; background:black; float:left; margin-top:0px;">

<figure style="margin:0">
<a href="#" target="_blank"><img style="margin:10px;" src="imagens/face.png"
title="Face" alt="Face"/></a>
<a href="#" target="_blank"><img style="margin:10px;" src="imagens/insta.png"
title="Instagram" alt="Instagram"/></a>
<a href="#" target="_blank"><img style="margin:10px;" src="imagens/twitter.png"
title="Twitter" alt="Twitter"/></a>
</figure>
</div>
</section>
<footer style="width:1000px; height:20px; background:#333; float:left;">
<p style="margin:3px 0; color:white; font:normal 10px verdana;">Amo Neve - Todos os direitos
reservados© </p>
</footer>
</body>
</html>

9) Para atualizar o documento, clique no menu Arquivo;

10) Na lista que surgiu, clique na opção Salvar;

11) Pronto! O documento foi atualizado.

12) No navegador clique no link equipamentos.

Exercício 4:
Este exercício tem como objetivo criar a página estação de ski. Utilizaremos o documento equipamentos como
base.
1) Clique com o botão direito no documento aneve

2) Clique na opção Copiar;

3) Para exibir a cópia, clique com o botão direito do mouse dentro do local em destaque;

4) Clique na opção Colar;

5) Esta cópia deve ser renomeada para estacao-ski. Clique com o botão direito na cópia e selecione
Renomear.
6) Digite estacao-ski e pressione a tecla Enter.
7) Para editar o documento, clique com o botão direito nele, escolha Abrir com, e, na lista, clique em Bloco
de notas.
8) Com o Bloco de notas aberto, acrescente o código abaixo. Compare o código para verificar o que pode ser
mantido:
<!DOCTYPE HTML>
<html lang="pt-br">

<body style="margin:auto; width:1000px; text-align:center; background:url(imagens/bg.jpg);">

<header style="background:white;">
<figure style="margin:0;background:white"><img src="imagens/banner4.jpg" alt="Amo
Neve"/></figure>
<div style="float:left; width:1000px; background:#13102B">
<div style="float:right;">
<a href="index.html" style="color:yellow; width:100px; height:30px; display:block; font:bold 14px arial;
text-decoration:none; line-height:30px; background:#13102B; float:left; ">HOME</a>
<a href="aneve.html" style="color:yellow; width:100px; height:30px; display:block; font:bold 14px arial;
text-decoration:none; line-height:30px; background:#13102B; float:left; ">A NEVE</a>
<a href="equipamentos.html" style="color:yellow; width:150px; height:30px; display:block; font:bold 14px
arial; text-decoration:none; line-height:30px; background:#13102B; float:left; ">EQUIPAMENTOS</a>
<a href="estacao-ski.html" style="color:yellow; width:150px; height:30px; display:block; font:bold 14px
arial; text-decoration:none; line-height:30px; background:#13102B; float:left; ">ESTAÇÃO DE SKI</a>
<a href="fale-conosco.html" style="color:yellow; width:150px; height:30px; display:block; font:bold 14px
arial; text-decoration:none; line-height:30px; background:#13102B; float:left; ">FALE CONOSCO</a>
</div>
</div>
</header>
<section style="background:white; float:left;">
<h1 style="width:1000px; float:left; font:normal 22px verdana; margin:15px 0;">ESTAÇÃO DE SKI</h1>

<p style="font:normal 14px arial;">Hoje em dia, uma estação de ski é, na verdade, um centro de lazer, que
recebe turistas de todas as idades, interessados nas muitas atividades possíveis de serem feitas em lugares de montanha –
entre eles, os esportes de neve, como o esqui e o snowboard.</p>
<figure>
<img style="margin:10px;" src="imagens/estacao1.jpg" alt=""/>
<img style="margin:10px;" src="imagens/estacao2.jpg" alt=""/>
</figure>
<figure>
<img style="margin:10px;" src="imagens/estacao3.jpg" alt=""/>
<img style="margin:10px;" src="imagens/estacao4.jpg" alt=""/>
</figure>
<div style="width:1000px; height:100px; float:left; background:black; float:left; margin-top:0px;">

<figure style="margin:0">
<a href="#" target="_blank"><img style="margin:10px;" src="imagens/face.png" title="Face"
alt="Face"/></a>
<a href="#" target="_blank"><img style="margin:10px;" src="imagens/insta.png" title="Instagram"
alt="Instagram"/></a>
<a href="#" target="_blank"><img style="margin:10px;" src="imagens/twitter.png" title="Twitter"
alt="Twitter"/></a>
</figure>
</div>
</section>
<footer style="width:1000px; height:20px; background:#333; float:left;">
<p style="margin:3px 0; color:white; font:normal 10px verdana;">Amo Neve - Todos os direitos
reservados© </p>
</footer>
</body>
</html>

9) Para atualizar o documento, clique no menu Arquivo;

10) Na lista que surgiu, clique na opção Salvar;

11) Pronto! O documento foi atualizado.

12) No navegador clique no link estação de ski.

Exercício 5:

Este exercício tem como objetivo criar a página fale conosco. Utilizaremos o documento estacao-ski como base.
1) Clique com o botão direito no documento estacao-ski

2) Clique na opção Copiar;

3) Para duplicar, clique com o botão direito na área em destaque;

4) Clique na opção Colar;

5) Para renomear, clique com o botão direito na cópia;

6) Clique na opção Renomear;

7) Digite o nome fale-conosco e pressione a tecla enter;

8) Para editar este documento, clique com o botão direito na área em destaque;

9) Na área em destaque, clique com o botão direito;

10) Na lista que surgiu, clique na opção Abrir com e ao lado selecione Bloco de notas;
11) Acrescente o código abaixo. Compare o código para verificar o que pode ser mantido.
<!DOCTYPE HTML>
<html lang="pt-br">

<head>
<meta charset="utf-8"/>
<title>Amo Neve</title>
</head>
<body style="margin:auto; width:1000px; text-align:center; background:url(imagens/bg.jpg);">
<header style="background:white;">
<figure style="margin:0;background:white"><img src="imagens/banner5.jpg" alt="Amo Neve"/></figure>
<div style="float:left; width:1000px; background:#13102B">
<div style="float:right;">
<a href="index.html" style="color:yellow; width:100px; height:30px;
display:block; font:bold 14px arial; text-decoration:none; line-height:30px; background:#13102B; float:left; ">HOME</a>
<a href="aneve.html" style="color:yellow; width:100px; height:30px; display:block;
font:bold 14px arial; text-decoration:none; line-height:30px; background:#13102B; float:left; ">A NEVE</a>
<a href="equipamentos.html" style="color:yellow; width:150px; height:30px;
display:block; font:bold 14px arial; text-decoration:none; line-height:30px; background:#13102B; float:left;
">EQUIPAMENTOS</a>
<a href="estacao-ski.html" style="color:yellow; width:150px; height:30px; display:block;
font:bold 14px arial; text-decoration:none; line-height:30px; background:#13102B; float:left; ">ESTAÇÃO DE SKI</a>
<a href="fale-conosco.html" style="color:yellow; width:150px; height:30px; display:block;
font:bold 14px arial; text-decoration:none; line-height:30px; background:#13102B; float:left; ">FALE CONOSCO</a>
</div>
</div>
</header>
<section style="background:white; float:left;">
<h1 style="width:1000px; float:left; font:normal 22px verdana; margin:15px 0;">FALE CONOSCO</h1>
<div style="height:350px;">
<form method="post" action="">
<table style="margin:auto;">
<tr>
<td><input type="text" name="nome" value="Nome" style="width:300px;
height:30px; color:#333; font:normal 14px verdana;"/></td>
<td><input type="text" name="sobrenome" value="Sobrenome"
style="width:300px; height:30px; color:#333; font:normal 14px verdana;"/></td>
</tr>
<tr>
<td><input type="text" name="email" value="E-mail" style="width:300px;
height:30px; color:#333; font:normal 14px verdana;"/></td>
<td><input type="text" name="telefone" value="Telefone" style="width:300px;
height:30px; color:#333; font:normal 14px verdana;"/></td>
</tr>
<tr>
<td><input type="text" name="estado" value="Estado" style="width:300px;
height:30px; color:#333; font:normal 14px verdana;"/></td>
<td><input type="text" name="cidade" value="Cidade" style="width:300px;
height:30px; color:#333; font:normal 14px verdana;"/></td>
</tr>
<tr>
<td colspan="2" align="center"><textarea name="msg" style="width:605px;
height:80px; font:normal 14px verdana;"></textarea></td>
</tr>
<tr>
<td colspan="2" align="center"><input type="submit" value="Enviar"
style="width:80px; height:30px; font:normal 14px verdana;"/></td>
</tr>
</table>
</form>
</div>
<div style="width:1000px; height:100px; float:left; background:black; float:left; margin-top:0px;">
<figure style="margin:0">
<a href="#" target="_blank"><img style="margin:10px;" src="imagens/face.png"
title="Face" alt="Face"/></a>
<a href="#" target="_blank"><img style="margin:10px;" src="imagens/insta.png"
title="Instagram" alt="Instagram"/></a>
<a href="#" target="_blank"><img style="margin:10px;" src="imagens/twitter.png"
title="Twitter" alt="Twitter"/></a>
</figure>
</div>
</section>
<footer style="width:1000px; height:20px; background:#333; float:left;">
<p style="margin:3px 0; color:white; font:normal 10px verdana;">Amo Neve - Todos os direitos
reservados© </p>
</footer>
</body>
</html>
12) Para atualizar o documento, clique no menu Arquivo;

13) Na lista que surgiu, clique na opção Salvar

14) Pronto! O documento foi atualizado.

15) Na pasta do projeto, clique duas vezes no ícone fale-conosco.

6.8. Exercícios de Fixação

Olá, seja bem-vindo a nossa área de exercícios de fixação. Desenvolvemos uma série de atividades para que você
domine todo conteúdo abordado nesta aula. É muito importante você fazer todos os exercícios e, qualquer
dúvida, chame o seu instrutor.

Observação: Salve os exercícios. Se você precisar de orientação de como localizar sua pasta, converse com seu
instrutor para que ele lhe crie uma ou oriente onde a mesma se encontra.
Copiando as imagens que serão usadas no exercício.
Abra a pasta Arquivos auxiliares/aula6/imagens-exercício-fixação/ e copie todas as imagens. Após, cole
dentro da pasta imagens que está dentro da pasta do exercício.
Observação: em caso de dúvida, dúvida chame o instrutor para auxiliar na localização desta pasta, que é a
origem das imagens.

Para organizar nossos exercícios, iremos criar uma pasta de trabalho.

Crie dentro da pasta Documentos, a pasta fixacao6 e a pasta imagens.

Exercício 1:
Este exercício tem como objetivo criar um site fictício sobre uma loja de jóias. Cada exercício vai tratar de uma
página do site. Iniciamos com a index.
Desenvolva a página conforme ilustração abaixo.

Salve a página com o nome, index.html, como é mostrado na imagem acima.

Verifique se funcionou no navegador, conforme o exemplo acima.
Exercício 2:
Este exercício tem como objetivo criar a página sobre aliancas.

Desenvolva a página, conforme ilustração abaixo.

Salve a página com o nome, aliancas.html, como é mostrado na imagem acima.

Verifique se funcionou no navegador, conforme o exemplo acima.

Exercício 3:
Este exercício tem como objetivo criar a página sobre noivado.
Desenvolva a página, conforme ilustração abaixo.
Salve a página com o nome, noivado.html, como é mostrado na imagem acima.

Verifique se funcionou no navegador, conforme o exemplo acima.

Exercício 4:

Este exercício tem como objetivo criar a página sobre formatura.

Desenvolva a página, conforme ilustração abaixo.
Salve a página com o nome, formatura.html, como é mostrado na imagem acima.

Verifique se funcionou no navegador, conforme o exemplo acima.

Exercício 5:

Este exercício tem como objetivo criar a página sobre franqueados.

Desenvolva a página, conforme ilustração abaixo
Salve a página com o nome, formatura.html, como é mostrado na imagem acima.
Verifique se funcionou no navegador, conforme o exemplo acima.
7
7.7. Exercícios de Conteúdo

Exercício 1:

Este exercício tem como objetivo criar um site sobre a DC COMICS, onde será criada uma página com as
seguintes áreas: o cabeçalho e o menu, um local para os destaques lego e trailers, um local para os produtos em
destaque e, por fim, o rodapé.O projeto será desenvolvido dentro da pasta Documentos, na pasta dc-comics.
1) Abra o ícone Este Computador, clique duas vezes nesta imagem;

2) Abra a pasta Documentos, clique duas vezes no ícone em destaque;

3) Criaremos, neste local, uma pasta chamada dc-comics. Clique na pasta em destaque;

4) Pressione a tecla Backspace para apagar o título;

5) Digite dc-comicse pressione a tecla enter;

6) Pronto! Nossa pasta foi criada, agora clique duas vezes nela para abri-la.
7) Criaremos a pasta de imagens. Clique no botão Nova pasta em destaque.

8) A pasta foi criada.

Copiando as imagens que serão usadas no exercício.

Abra a pasta Arquivos auxiliares/aula7/imagens-passo-a-passo/ e copie todas as imagens, e cole dentro da
pasta imagens que está dentro da pasta do exercício.

Observação: em caso de dúvida, chame o instrutor para auxiliar na localização desta pasta, que é a origem das
imagens.
9) Vamos abrir o bloco de notas;
10) Clique no botão Iniciar do Windows em destaque;

11) Na lista, clique em Acessórios do Windows;

12) Em Acessórios, clique em Bloco de notas;

13) Vamos iniciar, criando as áreas do cabeçalho e menu de navegação, digite o código abaixo:
<!DOCTYPE HTML>
<html lang="pt-br">
<head>
<meta charset="utf-8"/>
<title>DC COMICS</title>
<style>
*{margin:0; padding:0; text-decoration:none; list-style:none; }
body{background:#20242E; margin:auto; text-align:center; }
#banner{width:100%; height:400px; background:url(imagens/imagem1.jpg) no-repeat center;
background-size:cover; background-position:center;}
#nav{width:100%; height:52px; background:#4B5063;}
#nav ul{width:800px; height:52px; margin:auto; }
#nav ul li{display:inline-block; }
#nav ul li a{font:normal 16px verdana; padding:0 10px; color:#FFF; line-height:52px; display:inline-block; }
#nav ul li a:hover{background:#333; }
.linha-vert{border-left:1px solid white; line-height:52px; margin:0 5px;}
</style>
</head>
<body>
<header id="header">
<figure>
<img id="banner" />
</figure>
<nav id="nav">
<ul>
<li><a href="#">HOME</a><span class="linha-vert"></span></li>
<li><a href="#">NOVIDADES</a><span class="linha-vert"></span></li>
<li><a href="#">EPISÓDIOS</a><span class="linha-vert"></span></li><li><a
href="#">TEMPORADAS</a></li>
</ul>
</nav>
</header>
</body>
</html>

14) Após ter digitado, salve o documento como o nome, index.html.

15) Clique no menu Arquivo;
16) Na lista que surgiu, clique na opção Salvar como.
17) Abra a pasta Documentos, clique duas vezes na pasta em destaque;

18) Abra a pasta dc-comics.

19) Clique dentro da caixa Nome, apague o conteúdo e digite index.html

20) Altere a extensão do documento, clique dentro da caixa Tipo e selecione Todos os arquivos
21) Para interpretação dos caracteres especiais, na caixa Codificação clique em UTF-8;
22) Para concluir, clique no botão Salvar;
23) Para visualizar o funcionamento, clique duas vezes no ícone do Chrome;

24) Veja o resultado no navegador.

Exercício 2:
Este exercício tem como objetivo criar asáreas dos destaques LEGO E TRAILERS.
1) Com o Bloco de notas aberto, iremos acrescentar o seguinte código.
<!DOCTYPE HTML>
<html lang="pt-br">
<head>
<meta charset="utf-8"/>
<title>DC COMICS</title>
<style>
*{margin:0; padding:0; text-decoration:none; list-style:none; }
body{background:#20242E; margin:auto; text-align:center; }
#banner{width:100%; height:400px; background:url(imagens/imagem1.jpg) no-repeat center;
background-size:cover; background-position:center; }
#nav{width:100%; height:52px; background:#4B5063;}
#nav ul{width:800px; height:52px; margin:auto; }
#nav ul li{display:inline-block; }
#nav ul li a{font:normal 16px verdana; padding:0 10px; color:#FFF; line-height:52px; display:inline-
block; }
#nav ul li a:hover{background:#333; }
.linha-vert{border-left:1px solid white; line-height:52px; margin:0 5px;}

/* lego e trailers CSS– início */

#container{clear:both; width:1000px; height:auto; background:#FFF; margin:auto; padding-top:1px; }

.bg-titulo{width:340px; background:url(imagens/barra-titulos.jpg) no-repeat; margin-top:15px; }

.titulo{font:bold 16px verdana; text-align:left; margin:3px 0; }
#destaque{margin:15px auto; width:808px; height:295px; }
.ajusta-destaque{float:left; margin:0 5px;}
#trailers{width:1000px; height:165px; margin:auto; }
#container-trailer{width:744px; height:137px; margin:15px auto; }
.ajuste-trailer{width:244px; float:left; margin:0 2px;}
.texto-trailer{width:244px; height:20px; background:#354343; color:#FFF; font:normal 12px arial; line-
height:20px; }
/* lego e trailers CSS – final */
</style>
</head>
<body>
<header id="header">
<figure>
<img id="banner" />
</figure>
<nav id="nav">
<ul>
<li><a href="#">HOME</a><span class="linha-vert"></span></li>
<li><a href="#">NOVIDADES</a><span class="linha-vert"></span></li>
<li><a href="#">EPISÓDIOS</a><span class="linha-vert"></span></li>
<li><a href="#">TEMPORADAS</a></li>
</ul>
</nav>
</header>

<section id="container">
<div class="bg-titulo"><h1 class="titulo">AVENTURA LEGO</h1></div>
<figure id="destaque">
<div class="ajusta-destaque">
<img src="imagens/lego1.jpg" alt="Lego 1"/>
</div>
<div class="ajusta-destaque">
<img src="imagens/lego2.jpg" alt="Lego 2"/>
</div>
<div class="ajusta-destaque">
<img src="imagens/lego3.jpg" alt="Lego 3"/>
</div>
<div class="ajusta-destaque">
<img src="imagens/lego4.jpg" alt="Lego 4"/>
</div>
</figure>
<div class="bg-titulo"><h1 class="titulo">TRAILERS</h1></div>
<figure id="trailers">
<div id="container-trailer">
<div class="ajuste-trailer">
<img src="imagens/trailer1.jpg" alt="Mulher Maravilha"/>
<ahref="https://www.youtube.com/watch?v=VSB4wGIdDwo" target="_blank"><figcaption class="texto-
trailer">Play</figcaption></a>
</div>
<div class="ajuste-trailer">
<img src="imagens/trailer2.jpg" alt="Aquaman"/>
<a href="https://www.youtube.com/watch?v=hHh5Rs--DAE" target="_blank"><figcaption
class="texto-trailer">Play</figcaption></a>
</div>
<div class="ajuste-trailer">
<img src="imagens/trailer3.jpg" alt="Ciborgue"/>
<a href="https://www.youtube.com/watch?v=dI2xxH2tg-s" target="_blank"><figcaption
class="texto-trailer">Play</figcaption></a>
</div>
</div>
</figure>

</body>
</html>
2) Para atualizar o documento, clique no menu Arquivo;
3) Na lista que surgiu, clique na opção Salvar;

4) Pronto! O documento foi atualizado.

5) No navegador clique no botão Atualizar em destaque.
Veja o resultado:

Observação: clique em um dos botões Play e veja o assista o vídeo.

Exercício 3:

Este exercício tem como objetivo criar as áreas dos produtos em destaque.
1) Digite o código abaixo.

<!DOCTYPE HTML>
<html lang="pt-br">
<head>
<meta charset="utf-8"/>
<title>DC COMICS</title>
<style>
*{margin:0; padding:0; text-decoration:none; list-style:none; }
body{background:#20242E; margin:auto; text-align:center; }
#banner{width:100%; height:400px; background:url(imagens/imagem1.jpg) no-repeat center;
background-size:cover; background-position:center;}
#nav{width:100%; height:52px; background:#4B5063;}
#nav ul{width:800px; height:52px; margin:auto; }
#nav ul li{display:inline-block; }
#nav ul li a{font:normal 16px verdana; padding:0 10px; color:#FFF; line-height:52px; display:inline-
block; }
#nav ul li a:hover{background:#333; }
.linha-vert{border-left:1px solid white; line-height:52px; margin:0 5px;}
#container{clear:both; width:1000px; height:auto; background:#FFF; margin:auto; padding-
top:1px; }
.bg-titulo{width:340px; background:url(imagens/barra-titulos.jpg) no-repeat; margin-top:15px; }
.titulo{font:bold 16px verdana; text-align:left; margin:3px 0; }
#destaque{margin:15px auto; width:808px; height:295px; }
.ajusta-destaque{float:left; margin:0 5px;}

#trailers{width:1000px; height:165px; margin:auto; }

#container-trailer{width:744px; height:137px; margin:15px auto; }
.ajuste-trailer{width:244px; float:left; margin:0 2px;}
.texto-trailer{width:244px; height:20px; background:#354343; color:#FFF; font:normal 12px arial;
line-height:20px; }

/* produtos em destaque CSS – início */

#lojadc{width:1000px; height:420px; margin:auto; }
#container-loja{width:672px; height:; margin:auto; }
.ajuste-produto{width:220px; margin:15px 2px; float:left; }
.texto-prod{font:normal 12px arial; margin:0; }
.destaque-preco{font:bold 14px arial; color:red;}
</style>
</head>
<body>
<header id="header">
<figure>
<img id="banner" />
</figure>
<nav id="nav">
<ul>
<li><a href="#">HOME</a><span class="linha-vert"></span></li>
<li><a href="#">NOVIDADES</a><span class="linha-vert"></span></li>
<li><a href="#">EPISÓDIOS</a><span class="linha-vert"></span></li> <li><a
href="#">TEMPORADAS</a></li>
</ul>
</nav>
</header>
<section id="container">
<div class="bg-titulo"><h1 class="titulo">AVENTURA LEGO</h1></div>
<figure id="destaque">
<div class="ajusta-destaque">
<img src="imagens/lego1.jpg" alt="Lego 1"/>
</div>
<div class="ajusta-destaque">
<img src="imagens/lego2.jpg" alt="Lego 2"/>
</div>
<div class="ajusta-destaque">
<img src="imagens/lego3.jpg" alt="Lego 3"/>
</div>

<div class="ajusta-destaque">
<img src="imagens/lego4.jpg" alt="Lego 4"/>
</div>
</figure>
<div class="bg-titulo"><h1 class="titulo">TRAILERS</h1></div>
<figure id="trailers">
<div id="container-trailer">
<div class="ajuste-trailer">
<img src="imagens/trailer1.jpg" alt="Mulher Maravilha"/>
<a href="https://www.youtube.com/watch?v=VSB4wGIdDwo"
target="_blank"><figcaption class="texto-trailer">Play</figcaption></a>
</div>
<div class="ajuste-trailer">
<img src="imagens/trailer2.jpg" alt="Aquaman"/>
<a href="https://www.youtube.com/watch?v=hHh5Rs--DAE" target="_blank"><figcaption
class="texto-trailer">Play</figcaption></a>
</div>
<div class="ajuste-trailer">
<img src="imagens/trailer3.jpg" alt="Ciborgue"/>
<a href="https://www.youtube.com/watch?v=dI2xxH2tg-s" target="_blank"><figcaption
class="texto-trailer">Play</figcaption></a>
</div>
</div>
</figure>

<div class="bg-titulo"><h1 class="titulo">LOJA DC COMICS</h1></div>
<figure id="lojadc">
<div id="container-loja">
<div class="ajuste-produto">
<img src="imagens/produto1.jpg" alt=""/>
<p class="texto-prod">Camiseta Feminina Wonder Woman Shield</p><p
class="texto-prod destaque-preco">Por: R$ 80,00</p><p class="texto-prod">ou 3x Sem juros de R$ 26,66 </p>
</div>
<div class="ajuste-produto">
<img src="imagens/produto2.jpg" alt=""/>
<p class="texto-prod">Chinelo Slide Wonder Woman Movie</p><p class="texto-
prod destaque-preco">Por: R$ 90,00</p><p class="texto-prod">ou 3x Sem juros de R$ 30,00 </p>
</div>
<div class="ajuste-produto">
<img src="imagens/produto3.jpg" alt=""/>
<p class="texto-prod">Camiseta Masculina Arrow You Have Failed This City</p><p
class="texto-prod destaque-preco">Por: R$ 69,90</p><p class="texto-prod">ou 3x Sem juros de R$ 23,30 </p>
</div>
</div>
</figure>
</section>

</body>
</html>
2) Para atualizar o documento, clique no menu Arquivo;

3) Na lista que surgiu, clique na opção Salvar;

4) Pronto! O documento foi atualizado.
5) No navegador clique no botão Atualizar em destaque.

Exercício 4:
Este exercício tem como objetivo criar o rodapé.
1) Digite o código abaixo.

<!DOCTYPE HTML>
<html lang="pt-br">
<head>
<meta charset="utf-8"/>
<title>DC COMICS</title>
<style>
*{margin:0; padding:0; text-decoration:none; list-style:none; }
body{background:#20242E; margin:auto; text-align:center; }
#banner{width:100%; height:400px; background:url(imagens/imagem1.jpg) no-repeat center;
background-size:cover; background-position:center;}
#nav{width:100%; height:52px; background:#4B5063;}
#nav ul{width:800px; height:52px; margin:auto; }
#nav ul li{display:inline-block; }
#nav ul li a{font:normal 16px verdana; padding:0 10px; color:#FFF; line-height:52px; display:inline-block; }
#nav ul li a:hover{background:#333; }
.linha-vert{border-left:1px solid white; line-height:52px; margin:0 5px;}
/* lego e trailers */
#container{clear:both; width:1000px; height:auto; background:#FFF; margin:auto; padding-top:1px; }

.bg-titulo{width:340px; background:url(imagens/barra-titulos.jpg) no-repeat; margin-top:15px; }

.titulo{font:bold 16px verdana; text-align:left; margin:3px 0; }
#destaque{margin:15px auto; width:808px; height:295px; }
.ajusta-destaque{float:left; margin:0 5px;}

#trailers{width:1000px; height:165px; margin:auto; }

/* produtos em destaque */
#lojadc{width:1000px; height:420px; margin:auto; }
#container-loja{width:672px; height:; margin:auto; }
.ajuste-produto{width:220px; margin:15px 2px; float:left; }
.texto-prod{font:normal 12px arial; margin:0; }
.destaque-preco{font:bold 14px arial; color:red;}

/* rodapé – início */
footer{width:100%; height:300px; padding-top:1px; background:url(imagens/bg-footer.jpg) no-repeat
center; background-size:cover; background-position:center;}
#container-footer{width:1000px; height:200px; margin:15px auto; }
.nav-footer{width:150px; float:left; margin:0 10px;}
.titulo-footer{width:150px; font:bold 14px arial; color:#065FBE; text-align:left; margin:10px 0;}
.nav-footer ul li{width:150px; height:20px; text-align:left; }
.nav-footer ul li a{font:normal 12px arial; color:white; }
/* rodapé – final */

</style>
</head>

<body>
<header id="header">
<figure>
<img id="banner" />
</figure>
<nav id="nav">
<ul>
<li><a href="#">HOME</a><span class="linha-vert"></span></li>
<li><a href="#">NOVIDADES</a><span class="linha-vert"></span></li>
<li><a href="#">EPISÓDIOS</a><span class="linha-vert"></span></li>
<li><a href="#">TEMPORADAS</a></li>
</ul>
</nav>
</header>

<section id="container">
<div class="bg-titulo"><h1 class="titulo">AVENTURA LEGO</h1></div>

<div class="bg-titulo"><h1 class="titulo">TRAILERS</h1></div>

<div class="bg-titulo"><h1 class="titulo">LOJA DC COMICS</h1></div>

<figure id="lojadc">
<div id="container-loja">
<div class="ajuste-produto">
<img src="imagens/produto1.jpg" alt=""/>
<p class="texto-prod">Camiseta Feminina Wonder Woman Shield</p><p
class="texto-prod destaque-preco">Por: R$ 80,00</p><p class="texto-prod">ou 3x Sem juros de R$ 26,66 </p>
</div>
<div class="ajuste-produto">
<img src="imagens/produto2.jpg" alt=""/>
<p class="texto-prod">Chinelo Slide Wonder Woman Movie</p><p class="texto-
prod destaque-preco">Por: R$ 90,00</p><p class="texto-prod">ou 3x Sem juros de R$ 30,00 </p>
</div>
<div class="ajuste-produto">
<img src="imagens/produto3.jpg" alt=""/>
<p class="texto-prod">Camiseta Masculina Arrow You Have Failed This City</p><p
class="texto-prod destaque-preco">Por: R$ 69,90</p><p class="texto-prod">ou 3x Sem juros de R$ 23,30 </p>
</div>
</div>
</figure>
</section>

<footer>
<div id="container-footer">
<nav class="nav-footer">
<h1 class="titulo-footer">DC COMICS</h1>
<ul>
<li><a href="#">Características</a></li>
<li><a href="#">Quadrinhos</a></li>
<li><a href="#">Filmes</a></li>
<li><a href="#">TV</a></li>
<li><a href="#">Jogos</a></li>
<li><a href="#">Vídeos</a></li>
</ul>
</nav>

<nav class="nav-footer">
<h1 class="titulo-footer">NOTÍCIAS</h1>
<ul>
<li><a href="#">Para Fãs</a></li>
<li><a href="#">Para Família</a></li>
<li><a href="#">Para Imprimir</a></li>
</ul>
</nav>

<nav class="nav-footer">
<h1 class="titulo-footer">LOJA</h1>
<ul>
<li><a href="#">Shop DC</a></li>
<li><a href="#">Shop DC Colecionadores</a></li>
</ul>
</nav>
</div>
</footer>
</body>
</html>
2) Para atualizar o documento, clique no menu Arquivo;
3) Na lista que surgiu, clique na opção Salvar;

4) Pronto! O documento foi atualizado.

5) No navegador, clique no botão Atualizar em destaque.
Exercício 5:

Este exercício tem como objetivo criar a área das redes sociais.

1) Digite o código abaixo, o que está em destaque.

<!DOCTYPE HTML>
<html lang="pt-br">

<head>
<meta charset="utf-8"/>
<title>DC COMICS</title>
<style>

*{margin:0; padding:0; text-decoration:none; list-style:none; }

body{background:#20242E; margin:auto; text-align:center; }

#banner{width:100%; height:400px; background:url(imagens/imagem1.jpg) no-repeat
center; background-size:cover; background-position:center;}
#nav{width:100%; height:52px; background:#4B5063;}
#nav ul{width:800px; height:52px; margin:auto; }
#nav ul li{display:inline-block; }
#nav ul li a{font:normal 16px verdana; padding:0 10px; color:#FFF; line-
height:52px; display:inline-block; }
#nav ul li a:hover{background:#333; }
.linha-vert{border-left:1px solid white; line-height:52px; margin:0 5px;}
/* lego e trailers */
#container{clear:both; width:1000px; height:auto; background:#FFF; margin:auto;
padding-top:1px; }

.bg-titulo{width:340px; background:url(imagens/barra-titulos.jpg) no-repeat; margin-

top:15px; }
.titulo{font:bold 16px verdana; text-align:left; margin:3px 0; }
#destaque{margin:15px auto; width:808px; height:295px; }
.ajusta-destaque{float:left; margin:0 5px;}
#trailers{width:1000px; height:165px; margin:auto; }
#container-trailer{width:744px; height:137px; margin:15px auto; }
.ajuste-trailer{width:244px; float:left; margin:0 2px;}
.texto-trailer{width:244px; height:20px; background:#354343; color:#FFF;
font:normal 12px arial; line-height:20px; }

/* rodapé */
footer{width:100%; height:300px; padding-top:1px; background:url(imagens/bg-
footer.jpg) no-repeat center; background-size:cover; background-position:center;}
#container-footer{width:1000px; height:200px; margin:15px auto; }
.nav-footer{width:150px; float:left; margin:0 10px;}
.titulo-footer{width:150px; font:bold 14px arial; color:#065FBE; text-align:left;
margin:10px 0;}
.nav-footer ul li{width:150px; height:20px; text-align:left; }
.nav-footer ul li a{font:normal 12px arial; color:white; }
/* redes sociais css – início */
#redes-sociais{width:100%; height:70px; background:#20242E; }
.icones-rs{width:1000px; height:70px; background:; margin:auto; }
.ajusta-img{margin:15px 10px; }
/* redes sociais css – final */
</style>
</head>
<body>
<header id="header">
<figure>
<img id="banner" />
</figure>
<nav id="nav">
<ul>
<li><a href="#">HOME</a><span class="linha-vert"></span></li>
<li><a href="#">NOVIDADES</a><span class="linha-vert"></span></li>
<li><a href="#">EPISÓDIOS</a><span class="linha-vert"></span></li>

<li><a href="#">TEMPORADAS</a></li>
</ul>
</nav>
</header>

<section id="container">
<div class="bg-titulo"><h1 class="titulo">AVENTURA LEGO</h1></div>
<figure id="destaque">
<div class="ajusta-destaque">
<img src="imagens/lego1.jpg" alt="Lego 1"/>
</div>
<div class="ajusta-destaque">
<img src="imagens/lego2.jpg" alt="Lego 2"/>
</div>
<div class="ajusta-destaque">
<img src="imagens/lego3.jpg" alt="Lego 3"/>
</div>
<div class="ajusta-destaque">
<img src="imagens/lego4.jpg" alt="Lego 4"/>
</div>
</figure>

<div class="bg-titulo"><h1 class="titulo">TRAILERS</h1></div>

<figure id="trailers">
<div id="container-trailer">
<div class="ajuste-trailer">
<img src="imagens/trailer1.jpg" alt="Mulher Maravilha"/>
<a href="https://www.youtube.com/watch?v=VSB4wGIdDwo"
target="_blank"><figcaption class="texto-trailer">Play</figcaption></a>
</div>
<div class="ajuste-trailer">
<img src="imagens/trailer2.jpg" alt="Aquaman"/>
<a href="https://www.youtube.com/watch?v=hHh5Rs--DAE"
target="_blank"><figcaption class="texto-trailer">Play</figcaption></a>
</div>
<div class="ajuste-trailer">
<img src="imagens/trailer3.jpg" alt="Ciborgue"/>
<a href="https://www.youtube.com/watch?v=dI2xxH2tg-s"
target="_blank"><figcaption class="texto-trailer">Play</figcaption></a>
</div>
</div>
</figure>

<div class="bg-titulo"><h1 class="titulo">LOJA DC COMICS</h1></div>

<figure id="lojadc">
<div id="container-loja">
<div class="ajuste-produto">
<img src="imagens/produto1.jpg" alt=""/>
<p class="texto-prod">Camiseta Feminina Wonder Woman Shield</p><p
class="texto-prod destaque-preco">Por: R$ 80,00</p><p class="texto-prod">ou 3x Sem juros de R$ 26,66 </p>
</div>
<div class="ajuste-produto">
<img src="imagens/produto2.jpg" alt=""/>
<p class="texto-prod">Chinelo Slide Wonder Woman Movie</p><p
class="texto-prod destaque-preco">Por: R$ 90,00</p><p class="texto-prod">ou 3x Sem juros de R$ 30,00 </p>
</div>
<div class="ajuste-produto">
<img src="imagens/produto3.jpg" alt=""/>
<p class="texto-prod">Camiseta Masculina Arrow You Have Failed This
City</p><p class="texto-prod destaque-preco">Por: R$ 69,90</p><p class="texto-prod">ou 3x Sem juros de R$
23,30 </p>
</div>
</div>
</figure>
</section>

<nav class="nav-footer">
<h1 class="titulo-footer">DC COMICS</h1>
<ul>
<li><a href="#">Características</a></li>
<li><a href="#">Quadrinhos</a></li>
<li><a href="#">Filmes</a></li>
<li><a href="#">TV</a></li>
<li><a href="#">Jogos</a></li>
<li><a href="#">Vídeos</a></li>
</ul>
</nav>
<nav class="nav-footer">
<h1 class="titulo-footer">NOTÍCIAS</h1>
<ul>
<li><a href="#">Para Fãs</a></li>
<li><a href="#">Para Família</a></li>
<li><a href="#">Para Imprimir</a></li>
</ul>
</nav>
<nav class="nav-footer">
<h1 class="titulo-footer">LOJA</h1>
<ul>
<li><a href="#">Shop DC</a></li>
<li><a href="#">Shop DC Colecionadores</a></li>
</ul>
</nav>
</div>
</footer>

<div id="redes-sociais">
<div class="icones-rs">
<figure>
<a href="https://www.facebook.com/" target="_blank"><img class="ajusta-img"
src="imagens/icone-face.png" alt=""/></a>
<a href="https://twitter.com/" target="_blank"><img class="ajusta-img" src="imagens/icone-
twitter.png" alt=""/></a>
<a href="https://www.youtube.com/" target="_blank"><img class="ajusta-img"
src="imagens/icone-youtube.png" alt=""/></a>
<a href="https://br.pinterest.com/" target="_blank"><img class="ajusta-img"
src="imagens/icone-pinterest.png" alt=""/></a>
</figure>
</div>
</div>

</body>
</html>
2) Para atualizar o documento, clique no menu Arquivo;

3) Na lista que surgiu, clique na opção Salvar;

4) Pronto! O documento foi atualizado.

5) No navegador clique no botão Atualizar em destaque

7.8. Exercícios de Fixação

Abra a pasta Arquivos auxiliares/aula7/imagens-exercício-fixação/ e copie todas as imagens, e cole dentro da

pasta imagens que está dentro da pasta do exercício.
Observação: Em caso de dúvida, chame o instrutor para auxiliar na localização desta pasta, que é a origem das
imagens.
Para organizar nossos exercícios, iremos criar uma pasta de trabalho.

Crie dentro da pasta Documentos, a pasta fixacao7 e a pasta imagens.

Exercício 1:
Este exercício tem como objetivo criar um site sobre a DC COMICS e a MARVEL. Cada exercício vai tratar de
uma página do site. Iniciamos com a index.
1) Desenvolva o cabeçalho da página, conforme ilustração abaixo.
2) A medida do cabeçalho é de 100% a imagem é de 1600 pixels de largura por 400 pixels de altura. Foi feita
uma montagem com as imagens.

3) Salve a página com o nome, index.html, como é mostrado na imagem acima.

4) Verifique se funcionou no navegador, conforme o exemplo acima.

Exercício 2:
Este exercício tem como objetivo criar uma área que trata sobre os seriados daMarvel.
1) Desenvolva a página, conforme ilustração abaixo.
2) Divida esta área em duas colunas. Na segunda coluna, faça o formulário com o campo de pesquisa. O texto
foi extraído de uma busca pela Marvel.

3) Apenas atualize a página, clicando no menu Arquivo, Salvar.

4) Verifique se funcionou no navegador, conforme o exemplo acima.

Exercício 3:

Este exercício tem como objetivo criar a área que trata sobre os seriados da DC COMICS.
1) Desenvolva a página, conforme ilustração abaixo.
2) As séries de televisão foram digitadas dentro de uma tabela.

3) Apenas atualize a página, clicando no menu Arquivo, Salvar.

4) Verifique se funcionou no navegador, conforme o exemplo acima.

Exercício 4:

Este exercício tem como objetivo criar a área que trata sobre os produtos do site.
1) Desenvolva a página, conforme ilustração abaixo.

2) Apenas atualize a página, clicando no menu Arquivo, Salvar.

3) Verifique se funcionou no navegador, conforme o exemplo acima.

Exercício 5:

Este exercício tem como objetivo criar o rodapé da página.

1) Desenvolva a página, conforme ilustração abaixo

2) Neste exemplo, foi feito uma montagem com as imagens.

3) Apenas atualize a página, clicando no menu Arquivo, Salvar.

4) Verifique se funcionou no navegador, conforme o exemplo acima.
8
8.8. Exercícios de Conteúdo

Exercício 1:

Este exercício, tem como objetivo, criar um site sobre a fictícia HOSPEDAGEM CENTRAL, onde será criada uma
página com as seguintes áreas. O cabeçalho será fixado ao rolar a página. Alguns elementos serão posicionados
acima de outros. O projeto será desenvolvido dentro da pasta Documentos, na pasta hospedagem-central.

1) Abra o ícone Este Computador, clique duas vezes nesta imagem;

2) Abra a pasta Documentos, clique duas vezes no ícone em destaque;

3) Criaremos neste local, uma pasta chamada hospedagem-central. Clique na pasta em destaque.

4) Pressione a tecla Backspace para apagar o título

5) Digite hospedagem-central e pressione a tecla enter;

6) Pronto! Nossa pasta foi criada, agora clique duas vezes nesta pasta, para abri-la.
7) Criaremos a pasta de imagens. Clique no botão Nova pasta em destaque.

8) A pasta foi criada.

Copiando as imagens que serão usadas no exercício.

Abra a pasta Arquivos auxiliares/aula8/imagens-passo-a-passo/ e copie todas as imagens, e cole dentro da

pasta imagens que está dentro da pasta do exercício.
Observação: qualquer dúvida chame o instrutor, para auxiliar na localização desta pasta, que é a origem das
imagens.
9) Crie a pasta CSS para gravar o nosso estilo. Clique no local em destaque.

10) Pressione a tecla Backspace para apagar o título e digite CSS.

11) Veja que a pasta css foi criada.
12) Vamos abrir o Notepad++. Clique no botão Iniciar.
13) Na lista clique em Notepad++

Exercício 2:

Este exercício tem como objetivo criar a introdução HTML e a seção HEADER juntamente com o CSS.
1) Com o Notepad++ aberto vamos ajustar algumas configurações antes de usá-lo.

2) Clique no menu Formatar.

3) Na lista que surgiu, clique na opção Codificação em UTF-8, em destaque.

4) Clique no menu Linguagem.

5) Na lista que surgiu, clique na opção H.

6) Na lista ao lado, clique na opção HTML.

7) Digite o código abaixo.
<!DOCTYPE HTML>
<html lang="pt-br">
<head>
<meta charset="utf-8"/>
<title>HOSPEDAGEM CENTRAL</title>
<link href="css/estilo.css" type="text/css" rel="stylesheet"/>
</head>
<body>
<header id="header">
<div id="area-header">
<h1>HOSPEDAGEM CENTRAL</h1>
<nav>
<a href="#">HOME</a>
<a href="#">HOSTING</a>
<a href="#">DOMÍNIO</a>
<a href="#">PÁGINAS</a>
<a href="#">CONTATO</a>
</nav>
</div>
</header>
<div id="fixa-header"></div>

8) Salvando o arquivo:

9) Clique no menu Arquivo, Salvar como.

10) Abra a pasta hospedagem-central.

11) Na caixa Nome digite index e logo após clique no botão Salvar.
12) Criando o arquivo estilo.css
13) Clique no menu Arquivo, Novo.
14) Clique no menu Formatar;
15) Na lista que surgiu, clique na opção Codificação em UTF-8, em destaque;
16) Clique no menu Linguagem;
17) Na lista que surgiu, clique na opção C.
18) Na lista ao lado clique na opção CSS em destaque.

19) Clique no menu Arquivo, Salvar como.

20) Na caixa de diálogo que surgiu, abra a pasta css.

21) Na caixa nome digite estilo logo após clique no botão Salvar.

22) Digite o código abaixo referente a introdução e ao elemento HEADER.

*{margin:0; padding:0; list-style:none; text-decoration:none;}

body{background:#EBDCDA;}
#header{width:100%; height:60px; position:fixed; z-index:2; margin:auto; background:#FFF;}
#area-header{width:1000px; height:60px; margin:auto; background:#FFF;}
h1{font:normal 18px verdana; color:#000; float:left; line-height:60px;}
nav{width:430px; float:right;}
nav a{color:#000; font:normal 14px verdana; margin:0 10px; line-height:60px;}
nav a:hover{color:blue;}
#fixa-header{width:100%;height:60px; clear:both;}
23) Para conferir como está ficando clique no botão Salvar todos em destaque.

24) Na pasta clique duas vezes no index

25) Veja o resultado.

Exercício 3:

Este exercício tem como objetivo criar a área do BANNER juntamente com o CSS.

1) Acesse o index.
2) Digite o código abaixo, na linha 24.

<section id="banner">
<a href="#" id="seta-left"><img src="imagens/seta-left.jpg"/></a>
<div id="ajusta-texto">
<h1>VPS Hosting</h1>
<p>O Lorem Ipsum é um texto modelo da indústria tipográfica e de impressão.</p>
<a href="#" id="link-vd">ver detalhes</a>
<div id="circle-desconto"><img src="imagens/10porcento.png"/></div>
</div>
<a href="#" id="seta-right"><img src="imagens/seta-right.jpg"/></a>
</section>
3) Acesse o estilo e digite o código na linha 11.

4) Digite o código abaixo.

/* banner */
#banner{width:100%; height:350px; margin-top:1px; background:red; position:relative;
background:url(../imagens/img1.jpg) no-repeat center; background-size:cover; background-position:center;}
#seta-left{width:44px; height:44px; position:absolute; left:1px; top:150px;}
#seta-right{width:44px; height:44px; position:absolute; right:1px; top:150px;}
#ajusta-texto{width:1000px; height:auto; margin:auto; }
#ajusta-texto h1{font:normal 50px verdana; color:#FFF; float:left; margin-top:50px;}
#ajusta-texto p{font:normal 14px verdana; color:#FFF; float:left; clear:both;}
#link-vd{clear:both; font:normal 14px verdana; width:140px; height:38px; display:block;
background:#23AFE3; color:#FFF; text-align:center; position:relative; top:30px; line-height:38px;}
#link-vd:hover{color:yellow;}
#circle-desconto{width:122px; height:122px; position:relative; margin:0 0 0 200px;}
5) Clique no botão Salvar todos.

Veja o resultado. Acesse o navegador e atualize a página.

Exercício 4:
Este exercício tem como objetivo criar a área da barra de INFORMATIVO juntamente com o CSS.
1) Acesse o index.

2) Digite o código na linha 35

3) Digite o código abaixo

<section id="informativo">
<div id="ajuste-info">
<div id="aba-info">
<p>Procurando qualidade superior</p>
<p>NOME DO DOMÍNIO?</p>
</div>
<div id="ext-dominio">
<div class="dominiovlr">.com<br/>R$ 19,90</div>
<div class="dominiovlr dominiolinha">.org<br/>R$ 21,90</div>
<div class="dominiovlr">.br<br/>R$ 40,00</div>
</div>
<div id="formulario">
<form method="post" action="">
<input type="text" id="inputname" placeholder="Digite o dominio"/>
<select id="selectdominio">
<option>.com</option>
<option>.org</option>
<option>.br</option>
<option>.net</option>
</select>
<input type="submit" value="Buscar" id="inputsubmit"/>
</form>
</div>
</div>
</section>
4) Acesse o estilo.
5) Digite o código na linha 21

/* informativo */
#informativo{width:100%; height:70px; background:#32000C; position:relative;}
#ajuste-info{width:1000px; height:auto; margin:auto;}
#aba-info{width:270px; height:100px; background:#CA0726; position:absolute; top:-40px; padding-
top:40px;}
#aba-info p{font:normal 16px verdana; color:#FFF; text-align:center;}
#aba-info p+p{font:normal 22px verdana; color:#FFF; text-align:center;}
#ext-dominio{width:350px; height:60px; text-align:center; float:left; position:relative; top:5px;
left:272px;}
.dominiovlr{font:normal 18px verdana; width:110px; text-align:center; margin-top:10px; color:#FFF;
float:left;}
.dominiolinha{border-left:1px dotted #FFF; border-right:1px dotted #FFF;}
#formulario{width:400px; height:60px; float:right;}
#inputname{width:200px; height:20px; float:left; margin-top:20px; padding:5px; color:#FFF;
outline:none; background:none; border:1px solid #FFF;}
#selectdominio{width:100px; height:32px; background:#75001E; float:left; outline:none;
margin:20px 2px 0 2px; color:#FFF; border:1px solid #FFF;}
#inputsubmit{width:80px; height:32px; background:none; float:left; margin-top:20px;
padding:0px 20px; color:#FFF; border:1px solid #FFF;}

6) Clique no botão Salvar todos

No navegador atualize a página e confira como ficou.

Exercício 5:

Este exercício tem como objetivo criar a área do CONTAINER e FOOTER juntamente com o CSS.

1) Acesse o index.

2) Digite o código na linha 60

3) Digite o código abaixo

<section id="container">
<div class="hospedagem">
<h1>HOSPEDAGEM I</h1>
<span id="linha-dashed"></span>
<p>R$ <span id="doze">12</span>,90</p>
<p>
1 site<br/> 5Gb de espaço em disco<br/>
Contas de e-mail<br/> Transferência ilimitada<br/>
Banco de dados<br/> Painel de Controle<br/>
</p>
<a href="#" id="saibamais">Saiba mais</a>
</div>

<div class="hospedagem">
<h1>HOSPEDAGEM II</h1>
<span id="linha-dashed"></span>
<p>R$ <span id="doze">15</span>,90</p>
<p>
1 site<br/> 5Gb de espaço em disco<br/>
Contas de e-mail<br/> Transferência ilimitada<br/>
Banco de dados<br/> Painel de Controle<br/> Scripts modelo
</p>
<a href="#" id="saibamais">Saiba mais</a>
</div>

<div class="hospedagem">
<h1>HOSPEDAGEM III</h1>
<span id="linha-dashed"></span>
<p>R$ <span id="doze">19</span>,90</p>
<p>
1 site<br/> 5Gb de espaço em disco<br/> Contas de e-mail<br/>
Transferência ilimitada<br/> Banco de dados<br/> Painel de Controle<br/>
Scripts modelo<br/> Transferência Ilimitada
</p>
<a href="#" id="saibamais">Saiba mais</a>
</div>

<div class="hospedagem">
<h1>CLOUD HOSTING</h1>
<span id="linha-dashed"></span>
<p>R$ <span id="doze">240</span>,90</p>
<p>
Um ambiente exclusivo com painel de controle e alta performance.
</p>
<a href="#" id="saibamais">Saiba mais</a>
</div>
<figure id="destaque"><img src="imagens/destaque.jpg"/></figure>

</section>

<footer id="footer">
<div id="area-footer">
<div id="footer-um">
<h1>RECEBA NOSSA NEWSLETTER</h1>
<div id="formulario-footer">
<form method="post" action="">
<input type="text" id="inputname-footer" placeholder="Digite o e-
mail"/>
<input type="submit" value="Buscar" id="inputsubmit-footer"/>
</form>
</div>
</div>
<div id="footer-dois">
<h1>RECEBA NOSSA NEWSLETTER</h1>
<figure id="redesociais">
<a href="#" target="_blank"><img src="imagens/face.png"/></a>
<a href="#" target="_blank" class="margem-icone"><img
src="imagens/gplus.png"/></a>
<a href="#" target="_blank" class="margem-icone"><img
src="imagens/twitter.png"/></a>
<a href="#" target="_blank"><img src="imagens/youtube.png"/></a>
</figure>
</div>
</div>
</footer>

</body>
</html>
4) Acesse o estilo.

5) Digite o código na linha 35

6) Digite o código abaixo

/* container */
#container{width:1000px; height:955px; background:#FFF; margin:auto; padding-top:1px;}
.hospedagem{width:230px; height:270px; background:#5D4A53; float:left; margin:60px 0 0 15px;
position:relative;}
.hospedagem h1{width:100%; font:bold 20px arial; text-align:center; color:#FFF; margin:5px 0;}
#linha-dashed{clear:both; width:90%; height:5px; display:block; border-bottom:1px dashed #FFF;
margin:auto;}
.hospedagem p{width:100%; font:normal 14px arial; color:#FFF; text-align:center; margin:5px 0;}
.hospedagem p+p{text-align:left; margin:15px 10px;}
#doze{font:bold 50px arial; color:#23AFE3;}
#saibamais{width:100%; font:normal 14px arial; color:#FFF; position:absolute; bottom:5px; text-
align:center;}

/* destaque */
#destaque{float:left; margin-top:20px;}

/* footer */
#footer{float:left; width:100%; height:95px; background:#32000C;}
#area-footer{width:1000px; height:auto; margin:auto;}
#footer-um{width:678px; height:70px; float:left;}
#footer-um h1{font:normal 14px verdana; color:#FFF; margin-top:10px;}
#formulario-footer{float:left; width:670px; height:65px;}
#inputname-footer{width:320px; height:20px; float:left; margin-top:10px; padding:5px;
color:#FFF; outline:none; background:none; border:1px solid #FFF;}
#inputsubmit-footer{width:90px; height:32px; float:left; margin:10px 0 0 5px;
background:#23AFE3; border:none;}
#footer-dois{width:320px; height:70px; float:right;}
#footer-dois h1{font:normal 14px verdana; color:#FFF; margin-top:10px;}
#redesociais{width:310px; height:40px; margin-top:15px; float:left;}
.margem-icone{margin:0 5px;}
7) Clique no botão Salvar todos

8) Confira no navegador a página, clique no botão Atualizar.

8.9. Exercícios de Fixação

Abra a pasta Arquivos auxiliares/aula8/imagens-exercício-fixação/ e copie todas as imagens, e cole dentro da

pasta imagens que está dentro da pasta do exercício.
Observação: qualquer dúvida chame o instrutor, para auxiliar na localização desta pasta, que é a origem das
imagens.
Para organizar nossos exercícios, iremos criar uma pasta de trabalho.

Crie dentro da pasta Documentos, a pasta fixacao8 e a pasta imagens.

Exercício 1:

Este exercício, tem como objetivo, criar um site sobre uma fictícia empresa de SHOW DE ILUSÕES. Cada
exercício vai tratar de uma área do site.
1) Desenvolva o cabeçalho da página conforme ilustração abaixo.
2) A medida do cabeçalho é de 100% a imagem é de 1600 pixels de largura por 400 pixels de altura.

3) Sugestão para o título é nos tamanhos 30 e 60 pixels.

4) Sugestão para os links é no tamanho 22 pixels.
5) Salve a página com o nome, index.html, como é mostrado na imagem acima.
6) Verifique se funcionou no navegador, conforme o exemplo acima.
Exercício 2:
Este exercício, tem como objetivo, criar uma área que trata dos destaques.
1) Desenvolva a página conforme ilustração abaixo.
2) Dividir o fundo da página, o principal é de 1600 por 1365 pixels na cor #141718.
3) O fundo centralizado é de 1000 por 1294 pixels na cor #CCCCCC

4) As barras da legenda, a primeira na cor #A0B1C3, a segunda na cor #DD84FF e a terceira na cor #FFFF99
5) Apenas atualize a página clicando no menu Arquivo, Salvar.
6) Verifique se funcionou no navegador, conforme o exemplo acima.

Exercício 3:

Este exercício, tem como objetivo, criar uma área que trata sobre alguns dos principais SHOWS.
1) Desenvolva a página conforme ilustração abaixo.

2) As séries de televisão foram digitadas dentro de uma tabela.

3) Tamanho do retângulo é de 246 x 246 pixels. Fonte para números tamanho 22, para títulos tamanho 18 e
texto tamanho 14.
4) Apenas atualize a página clicando no menu Arquivo, Salvar.
5) Verifique se funcionou no navegador, conforme o exemplo acima.

Exercício 4:

Este exercício, tem como objetivo, criar uma área que trata dos eventos.
1) Desenvolva a página conforme ilustração abaixo.

2) Apenas atualize a página clicando no menu Arquivo, Salvar.

3) Verifique se funcionou no navegador, conforme o exemplo acima.

Exercício 5:

Este exercício, tem como objetivo, deixar livre para você criar o rodapé acrescentando as redes sociais.
1) Desenvolva a rodapé

2) Neste exemplo foi feito uma montagem com as imagens.

3) Após ter concluído atualize a página clicando no menu Arquivo, Salvar.
9
9.4. Exercícios de Conteúdo

Exercício 1:

Criar dentro da pasta Documentos a subpasta aula9 e copiar as fotos da pasta Arquivos
Auxiliares/Aula9/imagens-passo-a-passo.
1) Clique duas vezes na pasta Documentos;

2) Clique no ícone Nova Pasta .

3) Pressione a tecla Backspace para apagar o título e em seguida digite liga-do-esporte.
4) Clique duas vezes na pasta liga-do-esporte.
5) Para criar a pasta CSS clique no botão em destaque.

6) Pressione a tecla Backspace para apagar o título e em seguida digite css.

7) Clique novamente no botão Nova Pasta.
8) Pressione a tecla Backspace para apagar o título e em seguida digite imagens.
9) As copiar as imagens chame o instrutor.
10) Agora abra o Notepad++
11) Clique no botão Iniciar;
12) Na lista que surgiu, clique em Notepad++
13) Ajustando o formato de caracteres especiais, clique no menu Formatar.
14) Ajustando a linguagem de programação, clique no menu Linguagem, clique na letra “H” e logo após em
HTML.
15) Digite o código abaixo.

<!DOCTYPE HTML>
<html lang="pt-br">
<head>
<meta charset="utf-8"/>
<title>Liga do Esporte</title>
<link href="css/estilo.css" type="text/css" rel="stylesheet"/>
</head>

<body>
<header id="header">
<div id="areaheader">
<h1>LIGA DO ESPORTE</h1>
<nav>
<ul id="series">
<li id="seriea"><a href="#">SÉRIE A</a>
<ul id="listaseriea">
<li><img src="imagens/serie-a-1.png" alt="Série A 1"/></li>
<li><img src="imagens/serie-a-2.png" alt="Série A 2"/></li>
<li><img src="imagens/serie-a-3.png" alt="Série A 3"/></li>
<li><img src="imagens/serie-a-4.png" alt="Série A 4"/></li>
</ul> </li> <li id="serieb"><a href="#">SÉRIE B</a> <ul
id="listaserieb"> <li><img src="imagens/serie-b-1.png"
alt="Série B 1"/></li> <li><img src="imagens/serie-b-2.png"
alt="Série B 2"/></li> <li><img src="imagens/serie-b-3.png"
alt="Série B 3"/></li> <li><img src="imagens/serie-b-4.png"
alt="Série B 4"/></li> </ul> </li> <li id="seriec"><a
href="#">SÉRIE C</a> <ul id="listaseriec"> <li><img
src="imagens/serie-c-1.png" alt="Série C 1"/></li> <li><img
src="imagens/serie-c-2.png" alt="Série C 2"/></li> <li><img
src="imagens/serie-c-3.png" alt="Série C 3"/></li> <li><img
src="imagens/serie-c-4.png" alt="Série C 4"/></li> </ul>
</li> </ul> </nav> </div> </header>

<section id="container">
<div id="ajuste-1">
<figure id="foto1"><img src="imagens/foto1.jpg"/></figure>
<figure id="foto2"><img src="imagens/foto2.jpg"/></figure>
</div>
<div id="ajuste-2">
<figure id="foto3"><img src="imagens/foto3.jpg"/></figure>
<figure id="foto4"><img src="imagens/foto4.jpg"/></figure>
</div>
<figure id="circulo"><img src="imagens/circulo.png"/></figure>
</section>
</body>
</html>
16) Para salvar clique no meu Arquivo, Salvar como.
17) Clique duas vezes na pasta Documentos.
18) Para abrir a pasta liga-do-esporte.
19) Dentro da pasta clique duas vezes em liga-do-esporte.
20) Clique dentro da caixa Nome e apague o título teclando Backspace e em seguida digite index.
21) Para finalizar clique no botão Salvar.

Exercício 2:

Este exercício, tem como objetivo, criar a página de estilo para ajustar o index.
1) Crie um novo documento, clique no menu Arquivo/ Novo.
2) Ajustando o formato de caracteres especiais, clique no menu Formatar/ Codificação em UTF-8.
3) Ajustando a linguagem de programação, clique no menu Linguagem, clique na letra “C” e logo após em
CSS.
4) Digite o código abaixo:

*{margin:0; padding:0; list-style:none; text-decoration:none;}

body{margin:auto; text-align:center;}

#header{width:100%; height:70px; position:relative; background:#009900;}

#areaheader{width:1000px; height:70px; margin:auto;}
h1{width:200px; height:70px; float:left; font:normal 20px arial; color:#FFF; line-height:70px; }

nav{width:300px; height:70px; background:#CCC; float:right; position:relative;z-index:2;}

ul li{float:left; margin:0 20px; line-height:70px; }
#listaseriea{width:170px; height:170px; position:absolute; left:0px; display:none;}
#listaseriea li{line-height:0; margin:0; background:#DDD;}
#seriea:hover > #listaseriea{display:block;}

#listaserieb{width:170px; height:170px; position:absolute; left:80px; display:none;}

#listaserieb li{line-height:0; margin:0; background:#DDD;}
#serieb:hover > #listaserieb{display:block;}

#listaseriec{width:170px; height:170px; position:absolute; left:140px; display:none;}

#listaseriec li{line-height:0; margin:0; background:#DDD;}
#seriec:hover > #listaseriec{display:block;}

#container{width:1000px; height:500px; margin:0 auto; position:relative; }

#ajuste-1{width:1000px; height:auto;}
#foto1{float:left;}
#foto2{float:right;}
#ajuste-2{width:1000px; height:auto;}
#foto3{float:left;}
#foto4{float:right;}
#circulo{position:absolute; top:200px; left:350px;}
5) Para salvar clique no menu Arquivo/ Salvar como.

6) Clique duas vezes na pasta CSS.

7) Clique dentro da caixa Nome e digite estilo.

8) Clique no botão Salvar.

9) Faça o teste abrindo o index

Veja o resultado.
Exercício 3:
Este exercício tem como objetivo, criar um menu de navegação com imagem. Uma pasta chamada menu-
navegacao será criada.
1) Crie dentro da pasta Documentos;

2) Clique no botão Nova Pasta em destaque

3) Apague o título com a tecla Backspace, digite menu-navegacao e pressione a tecla Enter.

4) Copie a imagem a ser usada no exercício que está na pasta Arquivos Auxiliares/Aula9/imagens-passo-a-
passo
5) Agora abra o Notepad++
6) Clique no botão Iniciar;
7) Na lista que surgiu, clique em Notepad++
8) Ajustando o formato de caracteres especiais, clique no menu Formatar.
9) Ajustando a linguagem de programação, clique no menu Linguagem, clique na letra “H” e logo após em
HTML.
10) Digite o código abaixo.

<!DOCTYPE HTML>
<html lang="pt-br">
<head>
<meta charset="utf-8"/>
<title>Lista Esportes</title>
<link href="css/estilo.css" type="text/css" rel="stylesheet"/>
</head>
<body>
<nav id="menu">
<ul>
<li><a href="#">Meu Time</a></li>
<li><a href="#">Melhores momentos</a></li>
<li><a href="#">Agora no Esporte</a></li>
<li><a href="#">O melhor do Esporte</a></li>
<li><a href="#">Opiniões</a></li>
</ul>
</nav>
</body>
</html>
11) Agora vamos salvar, clique no menu Arquivo, Salvar como.

12) Abra a pasta menu-navegacao.

13) Clique dentro da caixa Nome, apague o título e digite index.

14) Para concluir, clique no botão Salvar.

Exercício 4:

*{list-style:none; text-decoration:none; }
#menu ul li {display: inline; padding:30px 0; background:url(../imagens/bola.png) no-repeat 0px; padding-
left:22px;}
#menu ul li a{font:normal 12px arial; color:#000;}
#menu ul li a:hover{text-decoration:underline;}
5) Para salvar clique no menu Arquivo/ Salvar como.
6) Clique duas vezes na pasta CSS.

7) Clique na caixa Nome e apague o título, em seguida digite estilo.

8) Para concluir clique no botão Salvar.

Veja com o ficou a página no navegador.

Exercício 5:

Este exercício tem como objetivo, utilizar a propriedade min-height para ajustar o tamanho das áreas de texto
da página. Crie a pasta mundo-do-boxe.
1) Crie dentro da pasta Documentos;
2) Clique no botão Nova Pasta em destaque

3) Apague o título com a tecla Backspace, digite mundo-do-boxe e pressione a tecla Enter.
4) Copie a imagem a ser usada no exercício que está na pasta Arquivos Auxiliares/Aula9/imagens-passo-a-
passo
5) Agora abra o Notepad++
6) Clique no botão Iniciar;
7) Na lista que surgiu, clique em Notepad++
8) Ajustando o formato de caracteres especiais, clique no menu Formatar.
9) Ajustando a linguagem de programação, clique no menu Linguagem, clique na letra “H” e logo após em
HTML.
10) Digite o código abaixo.

<!DOCTYPE HTML>
<html lang="pt-br">
<head>
<meta charset="utf-8"/>
<title>História do Boxe</title>
<link href="css/estilo.css" type="text/css" rel="stylesheet"/>
</head>
<body>
<header id="header">
<h1>Mundo do Boxe</h1>
</header>
<section id="container">
<div id="area-container">
<article id="historia">
<h2>História</h2>
<p>
Na antiguidade, antes mesmo das civilizações grega e romana, há indícios
arqueológicos que indicam que o homem praticava lutas usando as mãos, desferindo golpes uns contra os outros.
</p>
<p>
Os gregos e romanos também praticavam lutas deste tipo com objetivos
esportivos (caso dos gregos) ou de simples diversão (caso dos romanos).
</p>
</article>
<article id="esporte">
<h2>Crescimento do Esporte</h2>
<p>
Porém, o boxe só ganhou algumas regras, aproximando-se do que é hoje, no
século XVII, no Reino Unido. Foi no ano de 1867, que o uso de luvas e o número de assaltos foram determinados
como regras oficiais.
</p>
<p>
Para tornar as lutas mais competitivas, as regras do boxe definiram categorias que
variam de acordo com o peso do lutador (boxeador ou pugilista).
</p>
<p>
As lutas profissionais possuem, no máximo, 12 assaltos com 3 minutos cada.
Porém, em determinadas competições o número de assaltos pode ser menor. Nas Olimpíadas, por exemplo, são 3
rounds de 3 minutos cada.
</p>
</article>

<nav id="menu">
<h2>Principais organizações</h2>
<ul>
<li><a href="#">Associação Mundial de Boxe (AMB)</a></li>
<li><a href="#">Conselho Mundial de Boxe (CMB)</a></li>
<li><a href="#">Federação Internacional de Boxe (FIB)</a></li>
<li><a href="#">Organização Mundial de Boxe (OMB)</a></li>
</ul>
</nav>
</div>
<figure id="boxe"><img src="imagens/foto.jpg"/></figure>
</section>
</body>
</html>
11) Para salvar clique no menu Arquivo/ Salvar como
12) Clique duas vezes na pasta Mundo-do-Boxe.
13) Clique dentro da caixa Nome e digite index.
14) Para concluir clique no botão Salvar.
15) Para criar o estilo clique no menu Arquivo/ Novo.
16) Clique no menu Formatar, Codificação em UTF-8;
17) Clique no menu Linguagem, Clique na letra “C” e clique em CSS;
18) Digite o código abaixo.

*{list-style:none; text-decoration:none; margin:0; padding:0;}

body{margin:auto; background:#444;}

#header{width:100%; height:40px; background:#000;}

h1{font:normal 20px arial; color:#999; line-height:40px; padding-left:10px;}

#container{width:1000px; min-height:1px; margin:auto; padding:10px 0 0 0; background:#333; }
#area-container{width:1000px; min-height:1px; margin:auto; padding:5px 0; float:left;}

#historia{width:300px; min-height:1px; padding:10px 5px; background:#333; float:left; margin:0 5px;}

#esporte{width:300px; min-height:1px; padding:10px 5px; background:#333; float:left; border-right:1px
solid #DDD; border-left:1px solid #DDD; margin:0 5px;}

h2{font:normal 16px arial; color:#999; line-height:40px; padding-left:10px;}

p{font:normal 12px arial; color:#999; padding:0 10px; margin:10px 0; text-align:justify;}

#menu{width:300px; min-height:1px; padding:10px 5px; background:#333; float:left; margin:0 5px;}

#menu ul li{display:block; background:url(../imagens/luva.png) no-repeat 0px; padding-left:35px;}
#menu ul li a{color:#999; font:normal 12px arial;}
#menu ul li a:hover{color:#FFF; text-decoration:underline;}

#historia{width:300px; min-height:1px; padding:10px 5px; background:#333; float:left;}

19) Clique no menu Arquivo/ Salvar Como.

20) Clique duas vezes na pasta CSS.
21) Clique dentro da caixa Nome e digite estilo.
22) Para concluir clique no botão Salvar.
23) Veja com o ficou no navegador.
9.5. Exercícios de Fixação

Abra a pasta Arquivos auxiliares/aula9/imagens-exercício-fixação/ e copie todas as imagens, e cole dentro da

Crie dentro da pasta Documentos, a pasta fixacao9 e a pasta imagens.

Exercício 1:

Este exercício, tem como objetivo, criar uma página sobre alguns esportes radicais. Neste primeiro momento
vamos criar o background e a área dos links.
1) O background vai ocupar toda a área conforme imagem. O quadro de navegação é de 300 x 200 pixels, cor
de fundo igual #663333. Texto tipo Arial tamanho 18 e cor #FFFFCC.

2) Salve a página com o nome, index.html, na pasta fixacao9.

Exercício 2:

Continuação da página esportes radicais.

A área central possui as seguintes dimensões:
-Tamanho 1000 x 595
-Cor de fundo igual a #FFCC66 e opacidade igual a 80%
Definindo as propriedades do quadro paraquedismo.
-Tamanho 310 x 410
-Cor de fundo igual a #FFFFCC e opacidade igual a 70%
-Título na fonte Arial, tamanho 18 e cor igual a #333333 e texto na fonte Arial, tamanho 14 e cor igual a #333333
Definindo as propriedades do quadro alpinismo.
-Tamanho 310 x 295
-Cor de fundo igual a #FFFFCC e opacidade igual a 70%
-Título na fonte Arial, tamanho 18 e cor igual a #333333 e texto na fonte Arial, tamanho 14 e cor igual a #333333

Definindo as propriedades do quadro alpinismo.

-Tamanho 310 x 450

-Cor de fundo igual a #FFFFCC e opacidade igual a 70%

-Título na fonte Arial, tamanho 18 e cor igual a #333333 e texto na fonte Arial, tamanho 14 e cor igual a #333333.

Apenas atualize a página clicando no menu Arquivo, Salvar.

Verifique se funcionou no navegador, conforme o exemplo acima.

Veja a aparência final.
Exercício 3:
Este exercício, tem como objetivo, criar uma página sobre alguns Rafting. Neste primeiro momento vamos criar
o background e a barra de navegação com o logo.

1) Crie na pasta Documentos a pasta “rafting”, dentro as pastas “css” e “imagens”.

2) Desenvolva a página conforme ilustração abaixo.

3) Definições iniciais.

-Background com imagem ocupando toda a página.

-Barra de navegação com largura igual a 100% e altura igual a 90 pixels, cor branca.

-Logo com 124 x 149 pixels e links no formato Arial, tamanho 18 e cor igual a #333333
4) Salve com o nome index.

Exercício 4:
Continuação da página Rafting.
1) Desenvolva a página conforme ilustração abaixo.

2) A área central tem as seguintes propriedades:

-Tamanho 1000 x 880 pixels.

-Título, fonte Arial, tamanho 18 e cor #333333 e as duas imagens possuem as seguintes propriedades.
Dimensões de 350 x 224 pixels.
3) A imagem do alojamento possui as seguintes propriedades.

-Tamanho 767 x 350 pixels.

Exercício 5:

Continuação da página Rafting.

1) Desenvolva as áreas de texto conforme as descrições abaixo.

2) As caixas de texto possuem as seguintes propriedades.

-O tamanho 282 x 105 pixels.

-A cor de fundo #FFFFFF e o contorno na cor #CCCCCC

-Título na fonte Arial, tamanho 18 e na cor #333333 e texto na fonte Arial, tamanho 14 e na cor #333333

Confira a imagem do site completo.

10
10.3. Exercícios de Conteúdo

Exercício 1:

Este exercício, tem como objetivo criar a área de cabeçalho com um gradiente.

1)Acesse o campo de busca do Windows e digite Notepad++

2)Na lista clique no aplicativo Notepad++

3)Clique no menu Formatar e em seguida na opção Codificação em UTF-8.

4)Clique no menu Linguagem e em seguida na letra “H” e por fim na opção HTML.

5)Pronto agora digite o código abaixo:

<!DOCTYPE HTML>
<html lang="pt-br">
<head>
<title>Exercício 1</title>
<style>
*{margin:0; padding:0; font-family:arial; list-style:none; text-decoration:none;}
h1{color:white; font:normal 32px arial; float:left; line-height:100px;}
header{width:100%; height:100px; background:linear-gradient(180deg, black, white);}
nav{float:right;}
nav a{color:white; margin:0 5px; line-height:100px;}
</style>
</head>
<body>
<header>
<h1>Logotipo</h1>
<nav>
<a href="#">HOME</a>
<a href="#">EMPRESA</a>
<a href="#">PRODUTOS</a>
<a href="#">CONTATO</a>
</nav>
</header>
</body>
</html>
6)Salvando o nosso exemplo. Clique no menu Arquivo e em seguida na opção Salvar como.
7)Salve na Área de trabalho com o nome aula12-exercicio1.
8)Para visualizar clique no menu Executar e em seguida na opção Launch in Chrome.
Observação: Fique à vontade para fazer testes e trocar os valores informados na interação.

Exercício 2:

Este exercício, tem como objetivo criar cantos arredondados em duas imagens.
1)Acesse o campo de busca do Windows e digite Notepad++

2)Na lista clique no aplicativo Notepad++

3)Clique no menu Formatar e em seguida na opção Codificação em UTF-8.

4)Clique no menu Linguagem e em seguida na letra “H” e por fim na opção HTML.

5)Pronto agora digite o código abaixo:

<!DOCTYPE HTML>
<html lang="pt-br">
<head>

<title>Exercício 2</title>
<style>
*{margin:0; padding:0; font-family:arial; list-style:none; text-decoration:none; text-align:left; }
h1{color:#333; width:100%; margin-left:5px; font:normal 32px arial; float:left; line-height:100px; }
#foto1{border-radius:0 0 20px 0; float:left; margin:0 5px; }
#foto2{border-radius:0 0 0 20px; float:left; }
</style>
</head>
<body>
<div>
<h1>RESTAURANTE BOM GOSTO</h1> <img
src="imagens/foto1.png" id="foto1" /> <img
src="imagens/foto2.png" id="foto2" />
</div>
</body>
</html>
6)Salvando o nosso exemplo. Clique no menu Arquivo e em seguida na opção Salvar como.
7)Salve na Área de trabalho com o nome aula12-exercicio2.
8)Para visualizar clique no menu Executar e em seguida na opção Launch in Chrome.
Observação: Fique à vontade para fazer testes e trocar os valores informados na interação.

Exercício 3:
Este exercício, tem como objetivo criar uma área para o menu de navegação com gradiente linear.
1)Acesse o campo de busca do Windows e digite Notepad++

2)Na lista clique no aplicativo Notepad++

3)Clique no menu Formatar e em seguida na opção Codificação em UTF-8.

4)Clique no menu Linguagem e em seguida na letra “H” e por fim na opção HTML.

5)Pronto agora digite o código abaixo:

<!DOCTYPE HTML>
<html lang="pt-br">
<head>

<title>Exercício 2</title>
<style>
*{margin:0; padding:0; font-family:arial; list-style:none; text-decoration:none; text-align:left;}
nav{width:250px; height:300px; background:#DDD; margin:10px; background:linear-
gradient(rgba(153,51,51,0.5),rgba(255,255,255,0));}
nav a{width:100%; height:30px; display:block; text-align:center; padding:5px 0px;}
</style>
</head>
<body>
<nav>
<a href="#">Home</a>
<a href="#">Vídeos</a>
<a href="#">Serviços</a>
<a href="#">Editoriais</a>
<a href="#">Natureza</a>
<a href="#">Contato</a>
</nav>
</body>
</html>
6)Salvando o nosso exemplo. Clique no menu Arquivo e em seguida na opção Salvar como.
7)Salve na Área de trabalho com o nome aula12-exercicio3.
8)Para visualizar clique no menu Executar e em seguida na opção Launch in Chrome.
Observação: Fique à vontade para fazer testes e trocar os valores informados na interação.

Exercício 4:

Este exercício, tem como objetivo uma tarja de destaque da semana com cantos arredondados e transparência.

1)Acesse o campo de busca do Windows e digite Notepad++

2)Na lista clique no aplicativo Notepad++

3)Clique no menu Formatar e em seguida na opção Codificação em UTF-8.

4)Clique no menu Linguagem e em seguida na letra “H” e por fim na opção HTML.

5)Pronto agora digite o código abaixo:

<!DOCTYPE HTML>
<html lang="pt-br">
<head>

<title>Exercício 4</title>
<style>
*{margin:0; padding:0; list-style:none; text-decoration:none; text-align:left; }
h1{width:800px; height:60px; font:normal 30px arial; color:yellow; padding-left:10px; background:linear-
gradient(90deg, #333399, white); line-height:60px; }
div{width:200px; height: 190px; background:#333; margin:0 20px; border-radius: 0 0 15px 15px; }
div a{color:yellow; font:normal 16px arial; display:block; width:100%; text-align:center; padding-top:10px;
height:30px;}
</style>
</head>
<body>
<h1>PRODUTOS EM DESTAQUE</h1>
<div>
<a href="#">Decorações</a>
<a href="#">Tapetes</a>
<a href="#">Iluminação</a>
<a href="#">Ferragens</a>
</div>
</body>
</html>
6)Salvando o nosso exemplo. Clique no menu Arquivo e em seguida na opção Salvar como.

7)Salve na Área de trabalho com o nome aula12-exercicio4.

8)Para visualizar clique no menu Executar e em seguida na opção Launch in Chrome.

Observação: Fique à vontade para fazer testes e trocar os valores informados na interação.
Exercício 5:

Este exercício, tem como objetivo criar um formulário com os campos arredondados.

1)Acesse o campo de busca do Windows e digite Notepad++

2)Na lista clique no aplicativo Notepad++

3)Clique no menu Formatar e em seguida na opção Codificação em UTF-8.

4)Clique no menu Linguagem e em seguida na letra “H” e por fim na opção HTML.

5)Pronto agora digite o código abaixo:

<!DOCTYPE HTML>
<html lang="pt-br">
<head>

<title>Exercício 4</title>
<style>
*{margin:0; padding:0; list-style:none; text-decoration:none; text-align:left; }
h1{width:600px; height:60px; font:normal 30px arial; color:white; padding-left:10px; background:linear-
gradient(90deg, #000, white); line-height:60px;}
div{width:500px; height: 250px; background:#CCC; padding-top:5px; margin:10px; border-radius: 0 15px 0
15px; }
input{width:300px; height:30px; margin:5px; border:1px solid #999; border-radius:5px; display:block; }
textarea{width:300px; height:80px; margin:5px; border:1px solid #999; border-radius:5px; display:block; }

</style>
</head>
<body>
<h1>FORMULÁRIO DE CADASTRO</h1>
<div>
<form>
<input type="text" placeholder="Nome"/> <input
type="text" placeholder="E-mail"/> <input
type="text" placeholder="Assunto"/> <textarea
placeholder="Comentário"></textarea>
</form>
</div>
</body>
</html>
6)Salvando o nosso exemplo. Clique no menu Arquivo e em seguida na opção Salvar como.
7)Salve na Área de trabalho com o nome aula12-exercicio5.
8)Para visualizar clique no menu Executar e em seguida na opção Launch in Chrome.
Observação: Fique à vontade para fazer testes e trocar os valores informados na interação.
10.4. Exercícios de Fixação

Observação: Salve os exercícios, se você precisar de orientação, de como localizar sua pasta, converse com seu
instrutor, para que ele lhe crie uma, ou oriente, onde a mesma se encontra.

Exercício 1:

-Criar o seguinte menu de navegação.

Cores: #CC6600 e #FFCC33

Exercício 2:
-Vamos acrescentar uma imagem com cantos arredondados.

Exercício 3:
-Acrescentar na página as datas de informativos.
Exercício 4:
-Acrescentar imagens com borda e cantos arredondados.

Nesta aula vamos aprender como aplicar efeitos de transição nos links da página e como utilizar fontes do
Google.
Por um bom tempo um site com animações precisava do Flash para criar uma interação. Hoje o CSS3 já possui
suporte para realizar efeitos, algo que permite que funcione com mais rapidez e em dispositivos móveis.
Usar fonte para embelezar o texto era algo restrito, mas hoje, através do Google, podemos aplicar fontes
modernas no nosso site.
11
11.2. Exercícios de Conteúdo

Olá, seja bem-vindo a nossa área de exercícios. Desenvolvemos uma série de atividades para que você domine todo
conteúdo abordado nesta aula, por isso é muito importante você fazer todos os exercícios e, qualquer dúvida,
chame o seu instrutor.

Observação: Salve os exercícios. Se você precisar de orientação de como localizar sua pasta, converse com seu
instrutor para que ele lhe ajude a criar uma ou oriente a encontrá-la.

Exercício 1:

Este exercício tem como objetivo definir um efeito de transição quando o ponteiro do mouse passar sobre a
área retangular trocando de cor de fundo.
Veja o nosso modelo em que o background muda para a cor vermelha ao passar o ponteiro do mouse:

1)Acesse o campo de busca do Windows e digite Notepad++

2)Na lista clique no aplicativo Notepad++

3)Clique no menu Formatar e, em seguida, na opção Codificação em UTF-8.

4)Clique no menu Linguagem e, em seguida, na letra “H”. Por fim, na opção HTML.

5) Pronto, agora digite o código abaixo:

<!DOCTYPE HTML>
<html lang="pt-br">
<head>

<title>Exercício 1</title>
<style>
div {
font:normal 14px arial;
text-align:center;
display: block;
background-color: #666;
color:white;
width: 200px;
height: 40px;
border: solid 5px black;transition: 1s;
cursor:pointer;
line-height:40px;
}
div:hover {transition: 1s; background:red; }
</style>
</head>
<body>
<div>Galeria de Fotos</div>
</body></html>

6)Salvando o nosso exemplo. Clique no menu Arquivo e, em seguida, na opção Salvar como.

7)Salve na Área de trabalho com o nome aula11-exercicio1.

8)Para visualizar, clique no menu Executar e, em seguida, na opção Launch in Chrome.

Observação: Fique à vontade para fazer testes e trocar os valores informados na interação.

Exercício 2:

Este exercício tem como objetivo alterar o tamanho das caixas das datas das notícias quando o ponteiro do
mouse passar sobre os quadros.

1)Acesse o campo de busca do Windows e digite Notepad++

2)Na lista clique no aplicativo Notepad++

3)Clique no menu Formatar e, em seguida, na opção Codificação em UTF-8.

4)Clique no menu Linguagem e, em seguida, na letra “H”. Por fim, na opção HTML.

5)Pronto, agora digite o código abaixo:

<!DOCTYPE HTML>
<html lang="pt-br">
<head>

<title>Exercício 2</title>
<style>
p{font:normal 26px arial;}
div {
font:normal 18px arial;
text-align:center;
display: inline-block;
background-color: #666;
color:white;
width: 50px;
height: 50px;
border: solid 5px black;
transition: 0.5s;
cursor:pointer;
line-height:50px;
}
div:hover {transition: 0.5s; width:60px; height:60px; line-height:60px; }
</style>
</head>
<body>
<p>Notícias</p>
<div>10/03</div>
<div>11/03</div>
</body></html>
6)Salvando o nosso exemplo. Clique no menu Arquivo e, em seguida, na opção Salvar como.
7)Salve na Área de trabalho com o nome aula11-exercicio2.
8)Para visualizar, clique no menu Executar e, em seguida, na opção Launch in Chrome.
Observação: Fique à vontade para fazer testes e trocar os valores informados na interação.

Exercício 3:

Este exercício tem como objetivo criar um efeito de transição dentro de um campo de formulário.
Veja o nosso modelo, quando o ponteiro do mouse passa sobre.

1)Acesse o campo de busca do Windows e digite Notepad++

2)Na lista clique no aplicativo Notepad++

3)Clique no menu Formatar e, em seguida, na opção Codificação em UTF-8.

4)Clique no menu Linguagem e, em seguida, na letra “H”. Por fim, na opção HTML.

5)Pronto, agora digite o código abaixo:

<!DOCTYPE HTML>
<html lang="pt-br">
<head>

<title>Exercício 3</title>
<style>
p{font:normal 26px arial;}
input{
font:normal 15px arial;
background-color: #666;
color:white;
width: 200px;
height: 20px;
border: solid 1px black;
-webkit-transition: all 0.5s linear;
}
input:hover{background:green;}
</style>
</head>
<body>
<p>Formulário</p>
<input type="text"/>
</body>
</html>

6)Salvando o nosso exemplo. Clique no menu Arquivo e, em seguida, na opção Salvar como.
7)Salve na Área de trabalho com o nome aula11-exercicio3.
8)Para visualizar, clique no menu Executar e, em seguida, na opção Launch in Chrome.
Observação: Fique à vontade para fazer testes e trocar os valores informados na interação.

Exercício 4:

1)Este exercício tem como objetivo arredondar apenas dois lados do retângulo.
Veja o nosso exemplo:

1)Acesse o campo de busca do Windows e digite Notepad++

2)Na lista clique no aplicativo Notepad++

3)Clique no menu Formatar e, em seguida, na opção Codificação em UTF-8.

4)Clique no menu Linguagem e, em seguida, na letra “H”. Por fim, na opção HTML.

5)Pronto, agora digite o código abaixo:

<!DOCTYPE HTML>
<html lang="pt-br">
<head>

<title>Exercício 4</title>
<style>
p{font:normal 26px arial;}
div {
font:normal 18px arial;
text-align:center;
display: inline-block;
background-color: #666;
color:white;
width: 80px;
height: 50px;
border: solid 5px black;
transition: 0.5s;
cursor:pointer;
line-height:50px;

}
div:hover {transition: 0.5s; border-radius:0 10px 0 10px; }
</style>
</head>
<body>
<p>Downloads</p>
<div>Jogos</div>
<div>Músicas</div>
<div>Filmes</div>
</body></html>

6)Salvando o nosso exemplo. Clique no menu Arquivo e, em seguida, na opção Salvar como.
7)Salve na Área de trabalho com o nome aula11-exercicio3.
8)Para visualizar clique no menu Executar e, em seguida, na opção Launch in Chrome.
Observação: Fique à vontade para fazer testes e trocar os valores informados na interação.

11.3. Exercícios de Fixação

-Este exercício tem como finalidade criar um menu de navegação com 5 links. O tamanho da área de navegação
deve ser de 800px por 60px e o fundo com um gradiente linear.

-Criar um efeito de transição apenas nos links onde ao passar o ponteiro do mouse sobre cada link a cor do
texto trocar com tempo de 1s

Exercício 2:
-Desenhe as seguintes formas.

-Crie um efeito de transição quando o ponteiro do mouse passar sobre cada forma para aumentar o tamanho.

Exercício 3:

-Crie o formulário abaixo:

-Crie um efeito de transição ao passar o ponteiro do mouse sobre os campos, trocar a cor do fundo e da borda.
Exercício 4:
-Crie um menu de navegação.

-Ao passar o ponteiro do mouse sobre cada menu, trocar a cor do fundo e a cor do texto.
12
12.1. Exercícios de Conteúdo

Observação: Salve os exercícios. Se você precisar de orientação de como localizar sua pasta, converse com seu
instrutor para que ele lhe ajude a criar uma ou oriente a encontrá-la.

Exercício 1:

Este exercício tem como objetivo trocar a cor do layout quando a tela for menor que 800 pixels.
1)Acesse o campo de busca do Windows e digite Notepad++

2)Na lista clique no aplicativo Notepad++

3)Clique no menu Formatar e, em seguida, na opção Codificação em UTF-8.

4)Clique no menu Linguagem e, em seguida, na letra “H”. Por fim, na opção HTML.

5)Pronto, agora digite o código abaixo:

<!DOCTYPE HTML>
<html lang="pt-br">
<head>

<title>Exercício 1</title>
<style>
*{margin:0; padding:0; font-family:arial;}
header{width:100%; height:80px; background:#000000; color:white; line-height:80px; }
nav{width:100%; height:40px; background:#339933; color:white; line-height:40px;}
section{width:100%; height:500px; background:#DDD; }
@media (max-width: 800px){
header{background:#003333;}
nav{background:#99CCCC;}
section{background:#FFFFCC;}
}
</style>
</head>
<body>
<header>
<h1>Título da página</h1>
</header>
<nav>
<h3>Menu de navegação</h3>
</nav>
<section>
<h4>Conteúdo da página</h4>
</section>
</body>
</html>
6)Salvando o nosso exemplo. Clique no menu Arquivo e, em seguida, na opção Salvar como.
7)Salve na Área de trabalho com o nome aula12-exercicio1.

8) Para visualizar, clique no menu Executar e, em seguida, na opção Launch in Chrome.

Observação: Fique à vontade para fazer testes e trocar os valores informados na interação.

Exercício 2:

Este exercício tem como objetivo criar um espaço para o logo no lado esquerdo e para o menu de navegação à
direita. Caso o navegador seja reduzido abaixo de 800 pixels, o logo será centralizado e o menu de navegação. Além
de centralizado, cada link vai ficar em uma linha.

1)Acesse o campo de busca do Windows e digite Notepad++

2)Na lista clique no aplicativo Notepad++

3)Clique no menu Formatar e, em seguida, na opção Codificação em UTF-8.

4)Clique no menu Linguagem e, em seguida, na letra “H”. Por fim, na opção HTML.

5)Pronto, agora digite o código abaixo:

<!DOCTYPE HTML>
<html lang="pt-br">
<head>

<title>Exercício 2</title>
<style>
*{margin:0; padding:0; font-family:arial; list-style:none; text-decoration:none;}
h1{color:white; font:normal 32px arial; float:left; line-height:100px;}
#headerprincipal{width:100%; height:100px; background:#333;}
#navprincipal{float:right;}
#navprincipal a{color:white; margin:0 5px; line-height:100px;}

@media (max-width: 800px){

h1{width:100%; text-align:center;}
#headerprincipal, #navprincipal{width:100%; }
#headerprincipal, #navprincipal a {width:100%; display:block; color:black; text-align:center; line-
height:30px;}
}
</style>
</head>
<body>
<header id="headerprincipal">
<h1>Logotipo</h1>
<nav id="navprincipal">
<a href="#">HOME</a>
<a href="#">EMPRESA</a>
<a href="#">PRODUTOS</a>
<a href="#">CONTATO</a>

</nav>
</header>
</body>
</html>
6)Salvando o nosso exemplo. Clique no menu Arquivo e, em seguida, na opção Salvar como.

7)Salve na Área de trabalho com o nome aula12-exercicio2.

8)Para visualizar, clique no menu Executar e, em seguida, na opção Launch in Chrome.

Observação: Fique à vontade para fazer testes e trocar os valores informados na interação.

Exercício 3:

Este exercício tem como objetivo criar três áreas quando a tela do navegador chegar a 800 pixels duas colunas
desaparecem.
1)Acesse o campo de busca do Windows e digite Notepad++

2)Na lista clique no aplicativo Notepad++

3)Clique no menu Formatar e, em seguida, na opção Codificação em UTF-8.

4)Clique no menu Linguagem e, em seguida, na letra “H” . Por fim, na opção HTML.

5)Pronto, agora digite o código abaixo:

<!DOCTYPE HTML>
<html lang="pt-br">
<head>

<title>Exercício 3</title>
<style>
*{margin:0; padding:0; font-family:arial;}
#informativo1{width:10%; height:600px; background:#996666; float:left;}
#layout{width:80%; height:600px; background:#FF9966; float:left;}
#informativo2{width:10%; height:600px; background:#996666; float:left;}
#footer{width:100%; height:100px; background:#E7B8B8; float:left;}
@media (max-width: 800px){

#informativo1{display:none;}
#layout{width:100%;}
#informativo2{display:none;}
}
</style>
</head>
<body>
<div id="informativo1">
</div>
<div id="layout">
</div>
<div id="informativo2">
</div>
<div id="footer">
</div>

</body>
</html>

6)Salvando o nosso exemplo. Clique no menu Arquivo e, em seguida, na opção Salvar como.

7)Salve na Área de trabalho com o nome aula12-exercicio1.

8)Para visualizar, clique no menu Executar e, em seguida, na opção Launch in Chrome.

Observação: Fique à vontade para fazer testes e trocar os valores informados na interação.

Exercício 4:

Este exercício tem como objetivo ajustar o conteúdo do site à esquerda, no modo padrão de visualização do
site, e ajustar à direita com bordas quando chegar em 800 pixels.
1)Acesse o campo de busca do Windows e digite Notepad++

2)Na lista clique no aplicativo Notepad++

3)Clique no menu Formatar e, em seguida, na opção Codificação em UTF-8.

4)Clique no menu Linguagem e, em seguida, na letra “H”. Por fim, na opção HTML.

5)Pronto, agora digite o código abaixo:

<!DOCTYPE HTML>
<html lang="pt-br">
<head>

<title>Exercício 4</title>
<style>
*{margin:0; padding:0; font-family:arial;}
#area1{width:300px; float:left;}
@media (max-width: 800px){
#area1{float:right; width:400px;}
img{border:2px solid black; border-radius:10px 0 10px 0;}
}
</style>
</head>
<body>
<div id="area1">
<p>
O Lorem Ipsum é um texto modelo da indústria tipográfica e de impressão. O Lorem Ipsum tem
vindo a ser o texto padrão usado por estas indústrias, desde o ano de 1500, quando uma misturou os caracteres de
um texto para criar um espécime de livro.
</p>
<img src="imagens/carro1.png"/>
</div>
<div id="area1">
<p>
O Lorem Ipsum é um texto modelo da indústria tipográfica e de impressão. O Lorem Ipsum tem
vindo a ser o texto padrão usado por estas indústrias, desde o ano de 1500, quando uma misturou os caracteres de
um texto para criar um espécime de livro.
</p>
<img src="imagens/carro2.png"/>
</div>
<div id="area1">
<p>
O Lorem Ipsum é um texto modelo da indústria tipográfica e de impressão. O Lorem Ipsum tem
vindo a ser o texto padrão usado por estas indústrias, desde o ano de 1500, quando uma misturou os caracteres de
um texto para criar um espécime de livro.
</p>
<img src="imagens/carro3.png"/>
</div>
</body>
</html>
6)Salvando o nosso exemplo. Clique no menu Arquivo e, em seguida, na opção Salvar como.

7)Salve na Área de trabalho com o nome aula12-exercicio4.

8)Para visualizar, clique no menu Executar e, em seguida, na opção Launch in Chrome.

Observação: Fique à vontade para fazer testes e trocar os valores informados na interação.

12.2. Exercícios de Fixação

Observação: Salve os exercícios, se você precisar de orientação, de como localizar sua pasta, converse com seu
instrutor, para que ele lhe crie uma, ou oriente, onde a mesma se encontra.

Exercício 1:

-Este exercício tem como objetivo ajustar a página quando o tamanho da tela for menor que 800 pixels.
Exercício 2:

-Este exercício tem como objetivo modificar os elementos na página conforme mostra a imagem abaixo.

Exercício 3:

-Este exercício tem como objetivo ajustar a página conforme o modelo abaixo.

Você também pode gostar

Crie Seu Próprio Site
50% (4)
Crie Seu Próprio Site
5 páginas
ATIVIDADE PRATICA - Uninter
Ainda não há avaliações
ATIVIDADE PRATICA - Uninter
6 páginas
Lógica de Programação: Crie seus primeiros programas usando Javascript e HTML
No Everand
Lógica de Programação: Crie seus primeiros programas usando Javascript e HTML
Paulo Silveira
3.5/5 (10)
Guia prático de TypeScript: Melhore suas aplicações JavaScript
No Everand
Guia prático de TypeScript: Melhore suas aplicações JavaScript
Thiago da Silva Adriano
Ainda não há avaliações
Exercícios Internet PDF
Ainda não há avaliações
Exercícios Internet PDF
4 páginas
Caelum HTML Css Javascript PHP
100% (1)
Caelum HTML Css Javascript PHP
263 páginas
Desenvolva jogos com HTML5 Canvas e JavaScript
No Everand
Desenvolva jogos com HTML5 Canvas e JavaScript
Éderson Cássio
4/5 (1)
Aula 12 HTML-CSS
Ainda não há avaliações
Aula 12 HTML-CSS
7 páginas
Apostila - HTML e CSS PDF
Ainda não há avaliações
Apostila - HTML e CSS PDF
281 páginas
Protegendo Seu Programa Contra Pirataria
No Everand
Protegendo Seu Programa Contra Pirataria
Valdeir Duarte Monteiro
Ainda não há avaliações
Desenvolvimento para Web PDF
Ainda não há avaliações
Desenvolvimento para Web PDF
300 páginas
Dominando Html E Css
No Everand
Dominando Html E Css
Joaquim B. De Souza
Ainda não há avaliações
Fundamentos Do HTML
Ainda não há avaliações
Fundamentos Do HTML
8 páginas
Canivete suíço do desenvolvedor Node
No Everand
Canivete suíço do desenvolvedor Node
Caio Incau
Ainda não há avaliações
HTML
100% (1)
HTML
104 páginas
Css Basico 1 PDF
Ainda não há avaliações
Css Basico 1 PDF
13 páginas
Aula WEB
Ainda não há avaliações
Aula WEB
51 páginas
Apostila de HTML e CSS
Ainda não há avaliações
Apostila de HTML e CSS
104 páginas
Exercícios Práticos de HTML
Ainda não há avaliações
Exercícios Práticos de HTML
2 páginas
Programando em JavaScript
No Everand
Programando em JavaScript
Preston Prescott
Ainda não há avaliações
HTML
92% (12)
HTML
22 páginas
Apostila de HTML para Iniciantes - Seus Primeiros Passos Na Web
Ainda não há avaliações
Apostila de HTML para Iniciantes - Seus Primeiros Passos Na Web
4 páginas
Aula 11 HTML-CSS
Ainda não há avaliações
Aula 11 HTML-CSS
9 páginas
Anotações F Desenvolvimento Software
Ainda não há avaliações
Anotações F Desenvolvimento Software
30 páginas
Aula 3
Ainda não há avaliações
Aula 3
45 páginas
E-Book HTML
Ainda não há avaliações
E-Book HTML
65 páginas
Análise pt1
Ainda não há avaliações
Análise pt1
5 páginas
Apontamentos HTML
Ainda não há avaliações
Apontamentos HTML
33 páginas
SketchUp LayOut passo a passo
No Everand
SketchUp LayOut passo a passo
João Gaspar
3/5 (2)
Exercícios HTML Basico
Ainda não há avaliações
Exercícios HTML Basico
8 páginas
Desbravando Java e Orientação a Objetos: Um guia para o iniciante da linguagem
No Everand
Desbravando Java e Orientação a Objetos: Um guia para o iniciante da linguagem
Rodrigo Turini
5/5 (3)
Aula 01
Ainda não há avaliações
Aula 01
34 páginas
Programação Web I
Ainda não há avaliações
Programação Web I
5 páginas
PW3 Online
Ainda não há avaliações
PW3 Online
59 páginas
Aula Senai Atividades HTML CSS 12 - 130824
Ainda não há avaliações
Aula Senai Atividades HTML CSS 12 - 130824
11 páginas
Apostila HTML Basico
Ainda não há avaliações
Apostila HTML Basico
74 páginas
Java Script
100% (1)
Java Script
274 páginas
Fichas de Trabalho HTML
Ainda não há avaliações
Fichas de Trabalho HTML
7 páginas
Primeiro Teste e Entendendo o Resultado.
Ainda não há avaliações
Primeiro Teste e Entendendo o Resultado.
5 páginas
HTML 1
Ainda não há avaliações
HTML 1
20 páginas
k19 k02 Desenvolvimento Web Com HTML Css e Javascript
Ainda não há avaliações
k19 k02 Desenvolvimento Web Com HTML Css e Javascript
480 páginas
PWR Aula08 Dominios e Hospedagem
Ainda não há avaliações
PWR Aula08 Dominios e Hospedagem
39 páginas
HTML
Ainda não há avaliações
HTML
104 páginas
SketchUp para design de móveis
No Everand
SketchUp para design de móveis
João Gaspar
Ainda não há avaliações
MM2 WEB01 Exercicio
Ainda não há avaliações
MM2 WEB01 Exercicio
3 páginas
HTML e CSS
Ainda não há avaliações
HTML e CSS
251 páginas
Introdução Ao Desenvolvimento de Sistemas Web ADS07
Ainda não há avaliações
Introdução Ao Desenvolvimento de Sistemas Web ADS07
4 páginas
k19 k02 Desenvolvimento Web Com HTML Css e Javascript
100% (2)
k19 k02 Desenvolvimento Web Com HTML Css e Javascript
476 páginas
Html Para Iniciantes
No Everand
Html Para Iniciantes
Joaquim B. De Souza
Ainda não há avaliações
CodeIgniter: Produtividade na criação de aplicações web em PHP
No Everand
CodeIgniter: Produtividade na criação de aplicações web em PHP
Jonathan Lamim Antunes
Ainda não há avaliações
Refatorando com padrões de projeto: Um guia em Java
No Everand
Refatorando com padrões de projeto: Um guia em Java
Marcos Brizeno
Ainda não há avaliações
Introdução A Php Com Banco De Dados Mysql
No Everand
Introdução A Php Com Banco De Dados Mysql
Ricardo De Moraes / André Luis De Souza Silva
Ainda não há avaliações
Elasticsearch: Consumindo dados real-time com ELK
No Everand
Elasticsearch: Consumindo dados real-time com ELK
Alexandre Lourenço
Ainda não há avaliações
Desenvolvimento Web De iniciante a Profissional remunerado: Volume 2
No Everand
Desenvolvimento Web De iniciante a Profissional remunerado: Volume 2
Ojula Technology Innovations
Ainda não há avaliações
Algoritmo Explicado
No Everand
Algoritmo Explicado
Jorge Luiz E. De Souza
Ainda não há avaliações
HTML 5
No Everand
HTML 5
Preston Prescott
4.5/5 (2)
Almanaque 36: Volume 5
No Everand
Almanaque 36: Volume 5
Ricardo Garay
Ainda não há avaliações
Introdução A Lógica De Programação Com A Ferramenta De Desenvolvimento Lazarus
No Everand
Introdução A Lógica De Programação Com A Ferramenta De Desenvolvimento Lazarus
Ricardo De Moraes
Ainda não há avaliações
A lógica do jogo: Recriando clássicos da história dos videogames
No Everand
A lógica do jogo: Recriando clássicos da história dos videogames
Marcus Becker
Ainda não há avaliações
Programação em C# Para Iniciantes
No Everand
Programação em C# Para Iniciantes
Troy Dimes
Ainda não há avaliações
Yesod e Haskell: Aplicações web com Programação Funcional pura
No Everand
Yesod e Haskell: Aplicações web com Programação Funcional pura
Alexandre Garcia de Oliveira
Ainda não há avaliações
Aula 2
Ainda não há avaliações
Aula 2
1 página
Aula 1
Ainda não há avaliações
Aula 1
1 página
Aula 4
Ainda não há avaliações
Aula 4
1 página
Aula 7
Ainda não há avaliações
Aula 7
2 páginas
Aula 6
Ainda não há avaliações
Aula 6
1 página
3Ds Max 2020: 1.aula 1 - Exercícios de Fixação
Ainda não há avaliações
3Ds Max 2020: 1.aula 1 - Exercícios de Fixação
1 página
Aula 5
Ainda não há avaliações
Aula 5
1 página
Introducao ABNT Educacao Enfermagem
Ainda não há avaliações
Introducao ABNT Educacao Enfermagem
3 páginas
Document 1
Ainda não há avaliações
Document 1
2 páginas
? Resumo de Adm 1
Ainda não há avaliações
? Resumo de Adm 1
2 páginas
Curso Manual Completo Pregador Vocacionado Pregadorvocacionado
100% (1)
Curso Manual Completo Pregador Vocacionado Pregadorvocacionado
44 páginas
Apontamentos Redes e Internet
Ainda não há avaliações
Apontamentos Redes e Internet
18 páginas
SENAI - Aula de Desenvolvimento de Sistemas (Bruno Guilherme)
Ainda não há avaliações
SENAI - Aula de Desenvolvimento de Sistemas (Bruno Guilherme)
8 páginas
Introdução Ao Desenvolvimento Web
Ainda não há avaliações
Introdução Ao Desenvolvimento Web
25 páginas
Plataforma Hub - Ebook - Manual - Ficha - Tecnica - MKTP
Ainda não há avaliações
Plataforma Hub - Ebook - Manual - Ficha - Tecnica - MKTP
112 páginas
HTML5 para Iniciantes
Ainda não há avaliações
HTML5 para Iniciantes
12 páginas
Exercicios HTML
Ainda não há avaliações
Exercicios HTML
5 páginas
Web Interativa Com Ajax e PHP - Juliano Niederauer - Capítulo 1
Ainda não há avaliações
Web Interativa Com Ajax e PHP - Juliano Niederauer - Capítulo 1
25 páginas
Captacao de Energia Solar Via Placa Solar Arduino e Interface Web
Ainda não há avaliações
Captacao de Energia Solar Via Placa Solar Arduino e Interface Web
13 páginas
Manual Plataforma Moodle
Ainda não há avaliações
Manual Plataforma Moodle
84 páginas
Tags em HTML
Ainda não há avaliações
Tags em HTML
24 páginas
07 Desenvolvimento Web
Ainda não há avaliações
07 Desenvolvimento Web
3 páginas
Simulado 1
Ainda não há avaliações
Simulado 1
4 páginas
Apostila Javascript
Ainda não há avaliações
Apostila Javascript
27 páginas
O Que É HTML - Entenda de Forma Descomplicada - Homehost
Ainda não há avaliações
O Que É HTML - Entenda de Forma Descomplicada - Homehost
7 páginas
Manual - Ganttproject 2 PDF
Ainda não há avaliações
Manual - Ganttproject 2 PDF
63 páginas
(Manual Do Tema) Galeria
Ainda não há avaliações
(Manual Do Tema) Galeria
63 páginas
Revisar Envio Do Teste - QUESTIONÁRIO UNIDADE III - 7106-..
Ainda não há avaliações
Revisar Envio Do Teste - QUESTIONÁRIO UNIDADE III - 7106-..
7 páginas
1-Sobre A Web: História
Ainda não há avaliações
1-Sobre A Web: História
96 páginas
Aplicações Web em Java
Ainda não há avaliações
Aplicações Web em Java
120 páginas
Revista - ENSINO DE HISTÓRIA E A INCORPORAÇÃO DAS NOVAS TECNOLOGIAS DA INFORMAÇÃO E COMUNICAÇÃO - UMA REFLEXÃO - Me Carlos Augusto Lima Ferreira PUC-BA 1999
Ainda não há avaliações
Revista - ENSINO DE HISTÓRIA E A INCORPORAÇÃO DAS NOVAS TECNOLOGIAS DA INFORMAÇÃO E COMUNICAÇÃO - UMA REFLEXÃO - Me Carlos Augusto Lima Ferreira PUC-BA 1999
19 páginas
CPW - Aulas 1 - 20
Ainda não há avaliações
CPW - Aulas 1 - 20
232 páginas
Arquitetura Web
100% (1)
Arquitetura Web
82 páginas
CSS3 - Maurício Samy Silva
100% (2)
CSS3 - Maurício Samy Silva
25 páginas
Revisar Envio Do Teste - QUESTIONÁRIO UNIDADE I - ..
Ainda não há avaliações
Revisar Envio Do Teste - QUESTIONÁRIO UNIDADE I - ..
6 páginas
WEB - 04.2 - Linguagem CSS - Propriedades
Ainda não há avaliações
WEB - 04.2 - Linguagem CSS - Propriedades
23 páginas
Use A Cabeça HTML Com CSS e XHTML PDF
Ainda não há avaliações
Use A Cabeça HTML Com CSS e XHTML PDF
159 páginas
Técnicas e Linguagens de Programação 12 - 2022/2023
Ainda não há avaliações
Técnicas e Linguagens de Programação 12 - 2022/2023
265 páginas
AP2 2019-2 Gabarito CPW
Ainda não há avaliações
AP2 2019-2 Gabarito CPW
4 páginas