Introdução a Linguagem HTML:     formatação de texto     Prof. André Constantino da Silva    Prof. Rodolfo Francisco de Ol...
Na aula passada...
Aula de Hoje• Combinação de tags• Mais tags• Atributos de tags• Criar links entre páginas da Internet
As Tags <i>, <u> e <s>• Modificar seu documento HTML para:     <html>              <head>                       <title>Exe...
Combinação de Tags• Modificar seu documento HTML para:<html>     ...             Em HTML indicamos formatação através de  ...
• Modificar a ordem das tags para:         <html>   ...                  <body>                          Olá!             ...
As Tag <p> e <br />  ...  <body>             Olá!             <p>Este é um <b>exemplo de código HTML.</b>             <p>E...
As Tag <p> e <br />              Olá!              <p>Este é um <b>exemplo de código HTML.</b>              <p>Em HTML ind...
As Tags <h1>, <h2> e <h3>...<body>    <h1>Exemplo de página em HTML</h1>    <h2>Olá!</h2>    Este é um <b>exemplo de códig...
As Tags <h1>, <h2> e <h3>                   Essas são tags                   de títulos e                   subtítulos    ...
As Tags <h1>, <h2> e <h3>                   Essas são tags                   de títulos e                   subtítulos    ...
As Tags <h1>, <h2> e <h3>                   Essas são tags                   de títulos e                   subtítulos    ...
As Tags <h1>, <h2> e <h3>• Sempre usem essas tags para estruturar seu  documento HTML• Exemplo:  – Receita: ingredientes, ...
Atributos em Tags• Atributos em tags são utilizados para fornecer  informações adicionais para algumas tags  – Ficar atent...
Cores• É possível colocar cor em texto e no fundo  (background)...</head>            <body style="background: yellow;color...
Cores• Pode-se utilizar o código hexadecimal das cores  ao invés dos nomes  – Códigos na página:    http://www.w3schools.c...
Cores• Também é possível aplicar cores em um parágrafo  ou cabeçalho...          <h2 style="color: brown;">Olá!</h2>      ...
O atributo style• Várias tags possuem o atributo style• Pode-se definir:  – color: define as cores das palavras  – backgro...
Lembretes• Prova dia 03/04• Próxima aula: Revisão, tragam suas dúvidas
Tarefa para Casa• Usar as tags aprendidas na aula de hoje na  página da Internet criada para a última tarefa  de casa• Exe...
Aula 3 – Linguagem HTML -  formatação de texto
Upcoming SlideShare
Loading in …5
×

Aula 3 – Linguagem HTML - formatação de texto

2,034 views

Published on

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
2,034
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
63
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Aula 3 – Linguagem HTML - formatação de texto

  1. 1. Introdução a Linguagem HTML: formatação de texto Prof. André Constantino da Silva Prof. Rodolfo Francisco de Oliveira IAM 1 semestre de 2012 12 de março de 2012
  2. 2. Na aula passada...
  3. 3. Aula de Hoje• Combinação de tags• Mais tags• Atributos de tags• Criar links entre páginas da Internet
  4. 4. As Tags <i>, <u> e <s>• Modificar seu documento HTML para: <html> <head> <title>Exemplo de documento HTML</title> </head> <body> Olá! Este é um <b>exemplo de código HTML.</b> Em HTML indicamos formatação através de tags. É possível escrever em <b>negrito</b>, em <i>itálico</i>, <u>sublinhado</u> e <s>riscado</s>. </body> </html>• O que acontece?
  5. 5. Combinação de Tags• Modificar seu documento HTML para:<html> ... Em HTML indicamos formatação através de tags. É possível escrever em <b>negrito</b>, em <i>itálico</i>, <u>sublinhado</u> e <s>riscado</s>. Também é possível combinar tags para escrever em <b><i>negrito com itálico</i></b>, <b><u>negrito com sublinhado</u></b>, <i><u>itálico com sublinhado</u></i> entre outras combinações. </body></html>
  6. 6. • Modificar a ordem das tags para: <html> ... <body> Olá! Este é um <b>exemplo de código HTML.</b> Em HTML indicamos formatação através de tags. É possível escrever em <b>negrito</b>, em <i>itálico</i>, <u>sublinhado</u> e <s>riscado</s>. Também é possível combinar tags para escrever em <b><i>negrito com itálico</i></b>, <b><u>negrito com sublinhado</u></b>, <i><u>itálico com sublinhado</u></i> entre outras combinações. Para alguns casos a ordem da tag não importa: <i><b>abrir tag i e depois tag b</b></i> é igual a <b><i>abrir tag b e depois tag i</i></b>. </body> </html>
  7. 7. As Tag <p> e <br /> ... <body> Olá! <p>Este é um <b>exemplo de código HTML.</b> <p>Em HTML indicamos formatação através de tags. É possível escrever em <b>negrito</b>, em <i>itálico</i>, <u>sublinhado</u> e <s>riscado</s>. <br/>Também é possível combinar tags para escrever em <b><i>negrito com itálico</i></b>, <b><u>negrito com sublinhado</u></b>, <i><u>itálico com sublinhado</u></i> entre outras combinações. <br/>Para alguns casos a ordem da tag não importa: <i><b>abrir tag i e depois tag b</b></i> é igual a <b><i>abrir tag b e depois tag i</i></b>. </body></html>
  8. 8. As Tag <p> e <br /> Olá! <p>Este é um <b>exemplo de código HTML.</b> <p>Em HTML indicamos formatação através de. É possível escrever em <b>negrito</b>, em <i>itálico</i>,sublinhado</u> e <s>riscado</s>. <br/>Também é possível combinar tags para ever em <b><i>negrito com itálico</i></b>, <b><u>negrito sublinhado</u></b>, <i><u>itálico com inhado</u></i> entre outras combinações. <br/>Para alguns casos a ordem da tag nãoorta: <i><b>abrir tag i e depois tag b</b></i> é igual a<i>abrir tag b e depois tag i</i></b>.
  9. 9. As Tags <h1>, <h2> e <h3>...<body> <h1>Exemplo de página em HTML</h1> <h2>Olá!</h2> Este é um <b>exemplo de código HTML.</b> <h2>Formatação</h2> Em HTML indicamos formatação através de tags. É possível escrever em <b>negrito</b>, em <i>itálico</i>, <u>sublinhado</u> e <s>riscado</s>. <h2>Combinação de Tags</h2> Também é possível combinar tags para escrever em <b><i>negrito com itálico</i></b>, <b><u>negrito com sublinhado</u></b>, <i><u>itálico com sublinhado</u></i> entre outras combinações. <h3>Ordem das tags combinadas</h3> Para alguns casos a ordem da tag não importa: <i><b>abrir tag i e depois tag b</b></i> é igual a <b><i>abrir tag b e depois tag i</i></b>.</body>
  10. 10. As Tags <h1>, <h2> e <h3> Essas são tags de títulos e subtítulos <h1> é a tag de título, sua exibição é em letras grandes comparadas com <h2> e <h3>
  11. 11. As Tags <h1>, <h2> e <h3> Essas são tags de títulos e subtítulos <h2> é a tag de subtítulo, tamanho menor que <h1> mas é maior que <h3>
  12. 12. As Tags <h1>, <h2> e <h3> Essas são tags de títulos e subtítulos <h3> é a tag de subtítulo, sua exibição é em letras menores do que as usadas em <h1> e <h2>
  13. 13. As Tags <h1>, <h2> e <h3>• Sempre usem essas tags para estruturar seu documento HTML• Exemplo: – Receita: ingredientes, modo de fazer, tempo de preparo – Trabalho: Introdução, Desenvolvimento (capítulos ou seções), Conclusão – Redação: Título, texto
  14. 14. Atributos em Tags• Atributos em tags são utilizados para fornecer informações adicionais para algumas tags – Ficar atento aos atributos que uma tag possui!
  15. 15. Cores• É possível colocar cor em texto e no fundo (background)...</head> <body style="background: yellow;color: blue;"> <h1>Exemplo de página em HTML</h1>…
  16. 16. Cores• Pode-se utilizar o código hexadecimal das cores ao invés dos nomes – Códigos na página: http://www.w3schools.com/html/html_colors.asp...</head> <body style="background: #FFFF00;color: #3300FF;"> <h1>Exemplo de página em HTML</h1>…
  17. 17. Cores• Também é possível aplicar cores em um parágrafo ou cabeçalho... <h2 style="color: brown;">Olá!</h2> <p style="color: red;">Este é um<b>exemplo de código HTML.</b></p> <h2>Formatação</h2>...
  18. 18. O atributo style• Várias tags possuem o atributo style• Pode-se definir: – color: define as cores das palavras – background: defina a cor de fundo
  19. 19. Lembretes• Prova dia 03/04• Próxima aula: Revisão, tragam suas dúvidas
  20. 20. Tarefa para Casa• Usar as tags aprendidas na aula de hoje na página da Internet criada para a última tarefa de casa• Exemplos: – inserir links para os sites que vocês mais gostam e site da prefeitura da cidade que moram – fotos da sua cidade que estão na internet

×