HTML5/CSS3

tel (41) 4063-7810 - [email protected] - www.dltec.com.br

HTML5/CSS3

Atividade Prática 2.1 Capítulo 02


Pág. 2

Atividade Prática – Curso HTML5/CSS3

1 Objetivo .................................................................................................................. 3 2 Exercício – Criando Nosso Primeiro Projeto em HTML .................................................... 3


Pág. 3


1 Objetivo

O objetivo dessa atividade prática é que você se familiarize com a estrutura básica de um projeto e dos documentos HTML. Tente resolver todas as tarefas propostas. Caso tenha alguma dificuldade verifique o gabarito dessa atividade. Além do mais, você pode procurar a ajuda dos tutores (pelo fórum do capítulo) e tirar suas dúvidas.

2 Exercício – Criando Nosso Primeiro Projeto em HTML

Nesse exercício vamos nos habituar com a estrutura de pastas de um projeto HTML e também com a estrutura de cada arquivo .html. Então, vamos lá e mãos a obra... Importante: não iremos construir um site aqui, o objetivo dessa prática é familiarizar com os conceitos que você aprendeu até aqui. Mais para frente no curso, quando você estiver “afiado” com os comandos iremos construir um site de verdade (no projeto final). Tarefa 01: Crie uma estrutura de pastas em seu micro para armazenar os arquivos que iremos desenvolver nessa atividade. Escolha um local qualquer do seu micro e crie uma pasta chamada “meusite”. Dentro dessa pasta raiz crie as pastas para armazenar os arquivos de estilo (css), outra para os scripts (js) e uma para as imagens (img). -home/ |- meusite/ |- css/ |- img/ |- js/ Tarefa 02: Vamos agora criar o arquivo que seria nossa home page, a página inicial do site. Para isso, crie um arquivo com o nome index.html na pasta “meusite”. Nesse arquivo (index.html) construa a estrutura básica de um documento html conforme visto no curso. Siga as instruções abaixo. index.html Título da Página: Meu Primeiro Site em Html | DlteC do Brasil Descrição: Primeira atividade prática do curso HTML5/CSS3 na DlteC do Brasil. Aprendendo a estrutura de um arquivo html. Palavras-chaves: html, css, dltec, curso online Autor: Seu nome... Charset: UTF-8 Obs: Não vamos nos preocupar nesse momento com o conteúdo do site, apenas com sua estrutrua. No conteúdo (entre as tags <body></body>) coloque qualquer coisa. Utilize o loren ipsum generator, se desejar (http://lorem-ipsum.perbang.dk/).


Pág. 4


Veja abaixo como ficou a página index.html <!DOCTYPE html> <html lang=”pt-br”> <head>  <title>Meu Primeiro Site em Html | DlteC do Brasil</title>   <meta name="description" content="Primeira atividade prática do curso HTML5/CSS3 na DlteC do Brasil. Aprendendo a estrutura de um arquivo html." /> <meta name="keywords" content="html, css, dltec, curso online" /> <meta name="author" content="DlteC do Brasil" /> <meta charset="UTF-8" />  </head> <body> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce pellentesque, mi eget consectetur convallis, elit enim euismod nisi, nec lobortis magna nunc at ante. Duis adipiscing, augue sed dapibus fringilla, turpis metus varius massa, ut mattis nisl magna et purus. Phasellus blandit sem eu volutpat facilisis. Donec commodo ut ligula quis mollis. Nam pretium justo eget massa laoreet tincidunt. Nullam aliquet convallis tristique. Vivamus accumsan sit amet massa ut eleifend. Suspendisse quis lorem lobortis, pellentesque nibh placerat, malesuada neque. Vivamus tortor justo, egestas ornare sem a, aliquet luctus leo. Praesent ut feugiat odio. Maecenas eu pulvinar dui. Pellentesque adipiscing aliquet nibh, et tincidunt nisi tincidunt ac. Cras pellentesque, dui ac tristique tincidunt, ligula nibh blandit elit, nec hendrerit tellus orci vel lacus.</p> </body> </html> Tarefa 03: Vamos agora criar outras duas páginas para o nosso site, a página “Sobre mim” e a página “Contato”. Utilize os dados abaixo. sobremim.html Título da Página: Sobre mim | Meu Primeiro Site em Html Descrição: Que tal conhecer um pouco sobre mim? Aqui vão algumas informações sobre a minha pessoa...espero que goste. Palavras-chaves: html, css, dltec, curso online Autor: Seu nome... Charset: UTF-8 contato.html Título da Página: Contato | Meu Primeiro Site em Html Descrição: Precisando é só entrar em contato...preencha o formulário que em breve lhe retornarei. Palavras-chaves: html, css, dltec, curso online Autor: Seu nome... Charset: UTF-8


Pág. 5


Gabarito Ná área do aluno temos um arquivo “zipado” chamado gabarito21.zip onde colocamos os arquivos de gabarito para você conferir com o que você fez, caso tenha alguma dúvida. Tente fazer os seus arquivos antes de olhar o gabarito...depois que fizer o seu, dê uma “olhadinha” no gabarito para conferir. E não se esqueça, qualquer dúvida, utilize o fórum do capítulo que um dos tutores irá lhe auxiliar.

Documents

HTML5/CSS3