Html Aula 1 - parte 2

18
Construção de páginas

Transcript of Html Aula 1 - parte 2

Page 1: Html Aula 1 - parte 2

Construção de páginas

Page 2: Html Aula 1 - parte 2

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
Page 4: Html Aula 1 - parte 2
Page 5: Html Aula 1 - parte 2

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

<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
Page 8: Html Aula 1 - parte 2

Adicionando estilo <style type="text/css"> p { color: maroon; } </style>

Page 9: Html Aula 1 - parte 2

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
Page 11: Html Aula 1 - parte 2

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

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
Page 14: Html Aula 1 - parte 2

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
Page 16: Html Aula 1 - parte 2

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

Novos elementos   Citações Longas

Page 18: Html Aula 1 - parte 2

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>