Construção de páginas
Do diário para o web site
  Primeiro criaremos um esquema para a página, um
rascunho
  Depois veremos que elementos
HTML...
Preparar território
  Criar a pasta diario
  Dentro da pasta criar a pasta imagens
  Baixar as imagens para a página
 ...
<html>
<head>
<title>Diário do Jr</title>
</head>
<body>
<h1>Viagens do Jr</h1>
<p>
Diário de bordo de viagem
</p>
</body>...
Adicionando estilo
<style type="text/css">
p {
color: maroon;
}
</style>
Adicionando estilo
<style type="text/css">
p {
color: maroon;
}
h1 {
font-family:sans-serif;
color: gray;
}
h2 {
font-fami...
Adicionando estilo
<style type="text/css">
p {
color: maroon;
}
h1, h2 {
font-family:sans-serif;
color: gray;
}
</style>
Adicionando estilo
<style type="text/css">
p {
color: maroon;
}
h1, h2 {
font-family:sans-serif;
color: gray;
border-botto...
Adicionando estilo
<style type="text/css">
p {
color: maroon;
}
h1, h2 {
font-family:sans-serif;
color: gray;
}
h1 {
borde...
Novos elementos
  Aspas duplas  Citações
<h1>Viagens do Jr</h1>
<p>
Diário de bordo de viagem
</p>
<h2>1 de Agosto de 20...
Novos elementos
  Citações Longas
Novos elementos
  <blockquote>
<h2>1 de Agosto de 2006</h2>
<img src="jr1.jpg"/>
<p>
Meu primeiro de viagem foi tranquilo...
Html Aula 1 - parte 2
Html Aula 1 - parte 2
Html Aula 1 - parte 2
Html Aula 1 - parte 2
Html Aula 1 - parte 2
Html Aula 1 - parte 2
Upcoming SlideShare
Loading in...5
×

Html Aula 1 - parte 2

439

Published on

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
439
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
35
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Html Aula 1 - parte 2

  1. 1. Construção de páginas
  2. 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
  3. 3. 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
  4. 4. <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>
  5. 5. Adicionando estilo <style type="text/css"> p { color: maroon; } </style>
  6. 6. Adicionando estilo <style type="text/css"> p { color: maroon; } h1 { font-family:sans-serif; color: gray; } h2 { font-family:sans-serif; color: gray; } </style>
  7. 7. Adicionando estilo <style type="text/css"> p { color: maroon; } h1, h2 { font-family:sans-serif; color: gray; } </style>
  8. 8. Adicionando estilo <style type="text/css"> p { color: maroon; } h1, h2 { font-family:sans-serif; color: gray; border-bottom: 1px solid black; } </style>
  9. 9. Adicionando estilo <style type="text/css"> p { color: maroon; } h1, h2 { font-family:sans-serif; color: gray; } h1 { border-bottom: 1px solid black; } </style>
  10. 10. 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>
  11. 11. Novos elementos   Citações Longas
  12. 12. 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>
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×