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

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

Aula de Hoje
• Combinação de tags

• Mais tags

• Atributos de tags

• Criar links entre páginas da Internet

As Tags , e <s>
• Modificar seu documento HTML para:
<html>
<head>
<title>Exemplo de documento HTML</title>
</head>
<body>
Olá!
Este é um exemplo de código HTML.
Em HTML indicamos formatação através de
tags. É possível escrever em negrito, em itálico,
sublinhado e <s>riscado</s>.
</body>
</html>
• O que acontece?

Combinação de Tags
• Modificar seu documento HTML para:
<html>
...
Em HTML indicamos formatação através de
tags. É possível escrever em negrito, em
itálico, sublinhado e <s>riscado</s>.
Também é possível combinar tags para
escrever em negrito com itálico,
negrito com sublinhado,
itálico com sublinhado entre outras
combinações.
</body>
</html>

• Modificar a ordem das tags para:
<html>
...
<body>
Olá!
Este é um exemplo de código
HTML.
Em HTML indicamos formatação através
de tags. É possível escrever em negrito, em
itálico, sublinhado e <s>riscado</s>.
Também é possível combinar tags para
negrito com sublinhado, itálico
com sublinhado entre outras combinações.
Para alguns casos a ordem da tag não
importa: abrir tag i e depois tag b é igual
a abrir tag b e depois tag i.
</body>
</html>

As Tag e 
...
<body>
Olá!
Este é um exemplo de código HTML.
Em HTML indicamos formatação através de tags.
É possível escrever em negrito, em itálico,
sublinhado e <s>riscado</s>.
 Também é possível combinar tags para
negrito com sublinhado, itálico
com sublinhado entre outras combinações.
 Para alguns casos a ordem da tag não importa:
abrir tag i e depois tag b é igual a abrir
tag b e depois tag i.
</body>
</html>

As Tag e 

Olá!
Este é um exemplo de código HTML.
Em HTML indicamos formatação através de
. É possível escrever em negrito, em itálico,
sublinhado e <s>riscado</s>.
 Também é possível combinar tags para
ever em negrito com itálico, negrito
sublinhado, itálico com
inhado entre outras combinações.
 Para alguns casos a ordem da tag não
orta: abrir tag i e depois tag b é igual a
abrir tag b e depois tag i.

As Tags <h1>, <h2> e <h3>
...
<body>
<h1>Exemplo de página em HTML</h1>
<h2>Olá!</h2>
Este é um exemplo de código HTML.
<h2>Formatação</h2>
Em HTML indicamos formatação através de tags. É possível escrever em
negrito, em itálico, sublinhado e <s>riscado</s>.
<h2>Combinação de Tags</h2>
Também é possível combinar tags para escrever em negrito com
itálico, negrito com sublinhado, itálico com
sublinhado entre outras combinações.
<h3>Ordem das tags combinadas</h3>
Para alguns casos a ordem da tag não importa: abrir tag i e depois tag
b é igual a abrir tag b e depois tag i.
</body>

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>

Essas são tags
de títulos e
subtítulos
<h2> é a tag de
subtítulo, tamanho
menor que <h1>
mas é maior que
<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>

• 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

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!

Cores
• É possível colocar cor em texto e no fundo
(background)

...
</head>
<body style="background: yellow;
color: blue;">
…

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;">
…

Cores
• Também é possível aplicar cores em um parágrafo
ou cabeçalho

...
<h2 style="color: brown;">Olá!</h2>
Este é um
exemplo de código HTML.
<h2>Formatação</h2>
...

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

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
• 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

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

Mais conteúdo relacionado

Destaque

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

Mais de André Constantino da Silva

Último

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