Html Aula 1 - parte 2
-
Upload
eduardo-mendes-de-oliveira -
Category
Documents
-
view
447 -
download
1
Transcript of Html Aula 1 - parte 2
![Page 1: Html Aula 1 - parte 2](https://reader034.fdocument.pub/reader034/viewer/2022042510/5585258bd8b42a4c128b4ea1/html5/thumbnails/1.jpg)
Construção de páginas
![Page 2: Html Aula 1 - parte 2](https://reader034.fdocument.pub/reader034/viewer/2022042510/5585258bd8b42a4c128b4ea1/html5/thumbnails/2.jpg)
Do diário para o web site Primeiro criaremos um esquema para a página, um
rascunho
Depois veremos que elementos HTML(<h1>,<h2>,<h3>,<p>) usaremos para construir a página
Criar o HTML
Adicionar outros elementos HTML
![Page 3: Html Aula 1 - parte 2](https://reader034.fdocument.pub/reader034/viewer/2022042510/5585258bd8b42a4c128b4ea1/html5/thumbnails/3.jpg)
![Page 4: Html Aula 1 - parte 2](https://reader034.fdocument.pub/reader034/viewer/2022042510/5585258bd8b42a4c128b4ea1/html5/thumbnails/4.jpg)
![Page 5: Html Aula 1 - parte 2](https://reader034.fdocument.pub/reader034/viewer/2022042510/5585258bd8b42a4c128b4ea1/html5/thumbnails/5.jpg)
Preparar território Criar a pasta diario
Dentro da pasta criar a pasta imagens Baixar as imagens para a página
http://www.fa7.edu.br/tecnicas/jr1.jpg http://www.fa7.edu.br/tecnicas/jr2.jpg Clique com botão direito no navegador e escolha
“save as” e salve na pasta diario/imagens
![Page 6: Html Aula 1 - parte 2](https://reader034.fdocument.pub/reader034/viewer/2022042510/5585258bd8b42a4c128b4ea1/html5/thumbnails/6.jpg)
<html> <head> <title>Diário do Jr</title> </head> <body> <h1>Viagens do Jr</h1> <p> Diário de bordo de viagem </p> </body> </html>
![Page 7: Html Aula 1 - parte 2](https://reader034.fdocument.pub/reader034/viewer/2022042510/5585258bd8b42a4c128b4ea1/html5/thumbnails/7.jpg)
![Page 8: Html Aula 1 - parte 2](https://reader034.fdocument.pub/reader034/viewer/2022042510/5585258bd8b42a4c128b4ea1/html5/thumbnails/8.jpg)
Adicionando estilo <style type="text/css"> p { color: maroon; } </style>
![Page 9: Html Aula 1 - parte 2](https://reader034.fdocument.pub/reader034/viewer/2022042510/5585258bd8b42a4c128b4ea1/html5/thumbnails/9.jpg)
Adicionando estilo <style type="text/css"> p { color: maroon; } h1 { font-family:sans-serif; color: gray; } h2 { font-family:sans-serif; color: gray; } </style>
![Page 10: Html Aula 1 - parte 2](https://reader034.fdocument.pub/reader034/viewer/2022042510/5585258bd8b42a4c128b4ea1/html5/thumbnails/10.jpg)
![Page 11: Html Aula 1 - parte 2](https://reader034.fdocument.pub/reader034/viewer/2022042510/5585258bd8b42a4c128b4ea1/html5/thumbnails/11.jpg)
Adicionando estilo <style type="text/css"> p { color: maroon; } h1, h2 { font-family:sans-serif; color: gray; } </style>
![Page 12: Html Aula 1 - parte 2](https://reader034.fdocument.pub/reader034/viewer/2022042510/5585258bd8b42a4c128b4ea1/html5/thumbnails/12.jpg)
Adicionando estilo <style type="text/css"> p { color: maroon; } h1, h2 { font-family:sans-serif; color: gray; border-bottom: 1px solid black; } </style>
![Page 13: Html Aula 1 - parte 2](https://reader034.fdocument.pub/reader034/viewer/2022042510/5585258bd8b42a4c128b4ea1/html5/thumbnails/13.jpg)
![Page 14: Html Aula 1 - parte 2](https://reader034.fdocument.pub/reader034/viewer/2022042510/5585258bd8b42a4c128b4ea1/html5/thumbnails/14.jpg)
Adicionando estilo <style type="text/css"> p { color: maroon; } h1, h2 { font-family:sans-serif; color: gray; } h1 { border-bottom: 1px solid black; } </style>
![Page 15: Html Aula 1 - parte 2](https://reader034.fdocument.pub/reader034/viewer/2022042510/5585258bd8b42a4c128b4ea1/html5/thumbnails/15.jpg)
![Page 16: Html Aula 1 - parte 2](https://reader034.fdocument.pub/reader034/viewer/2022042510/5585258bd8b42a4c128b4ea1/html5/thumbnails/16.jpg)
Novos elementos Aspas duplas Citações <h1>Viagens do Jr</h1> <p> Diário de bordo de viagem </p> <h2>1 de Agosto de 2006</h2> <img src="jr1.jpg"/> <p> Meu primeiro de viagem foi tranquilo. Viajei bastante. Posso afirmar que esta será <q>uma longa jornada</q>. </p>
![Page 17: Html Aula 1 - parte 2](https://reader034.fdocument.pub/reader034/viewer/2022042510/5585258bd8b42a4c128b4ea1/html5/thumbnails/17.jpg)
Novos elementos Citações Longas
![Page 18: Html Aula 1 - parte 2](https://reader034.fdocument.pub/reader034/viewer/2022042510/5585258bd8b42a4c128b4ea1/html5/thumbnails/18.jpg)
Novos elementos <blockquote> <h2>1 de Agosto de 2006</h2> <img src="jr1.jpg"/> <p> Meu primeiro de viagem foi tranquilo. Viajei bastante. Posso afirmar que esta será <q>uma longa jornada</q>.
</p> <blockquote> Primeira hora: descanso, Segunda hora: alegria, Terceira hora: euforia.
</blockquote> <p> Definivamente, esta viagem será ótima. </p>