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

Introdução a Linguagem HTML:formatação de texto

Prof. André Constantino da SilvaProf. Rodolfo Francisco de Oliveira

IAM1 semestre de 2012

12 de março de 2012

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

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>

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


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>

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>

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

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

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>


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

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>


<h2> é a tag de subtítulo, tamanho

menor que <h1> mas é maior que

<h3>


<h3> é a tag de subtítulo, sua

exibição é em letras menores do que as usadas em <h1> e

<h2>

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

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

<h1>Exemplo de página em HTML</h1>

…

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

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>

...

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

Technology

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