Aula 3 – Linguagem HTML - formatação de texto
-
Upload
andre-constantino-da-silva -
Category
Technology
-
view
1.423 -
download
0
Transcript of 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>.
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>
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>
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>
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>
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>
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>
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