Aula 3 – Linguagem HTML - formatação de texto
andreconstantino
2,386 views
21 slides
May 08, 2012
Slide 1 of 21
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
About This Presentation
No description available for this slideshow.
Slide Content
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
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
Na aula passada...
Aula de Hoje
•Combinação de tags
•Mais tags
•Atributos de tags
•Criar links entre páginas da Internet
•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?
•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 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>
<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álic o</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>
...
<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álic o</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>i tá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>negr ito 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>.
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>i tá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>negr ito 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. É pos sí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>
...
<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. É pos sí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>
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>
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>
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
•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!
•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>Exemplode páginaemHTML</h1>
…
•É possível colocar cor em texto e no fundo
(background)
...
</head>
<body style="background: yellow;
color: blue;">
<h1>Exemplode páginaemHTML</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>Exemplode páginaemHTML</h1>
…
•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>Exemplode páginaemHTML</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>
...
•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
•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
•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
•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
Tags
Categories
GeneralDownload
Download Slideshow Get the original presentation fileQuick Actions
Statistics
- Views 2,386
- Slides 21
- Age 4963 days
Related Slideshows
22
Pray For The Peace Of Jerusalem and You Will Prosper
RodolfoMoralesMarcuc
36 views
26
Don_t_Waste_Your_Life_God.....powerpoint
chalobrido8
39 views
31
VILLASUR_FACTORS_TO_CONSIDER_IN_PLATING_SALAD_10-13.pdf
JaiJai148317
35 views
14
Fertility awareness methods for women in the society
Isaiah47
32 views
35
Chapter 5 Arithmetic Functions Computer Organisation and Architecture
RitikSharma297999
31 views
5
syakira bhasa inggris (1) (1).pptx.......
ourcommunity56
32 views