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
3. Aula de Hoje
• Combinação de tags
• Mais tags
• Atributos de tags
• Criar links entre páginas da Internet
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. 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. • 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. 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. 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ão
orta: <i><b>abrir tag i e depois tag b</b></i> é igual a
<i>abrir tag b e depois tag i</i></b>.
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. 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. 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. 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. 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. 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. 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. 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. 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.
19. 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
21. 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