Este documento apresenta uma aula introdutória sobre HTML, incluindo a estrutura básica de um documento HTML, conceitos como tags e como formatar texto. Algumas tags ensinadas incluem <b> para negrito, <i> para itálico, <u> para sublinhado, <s> para riscado e <title> para o título da página. Os alunos foram encarregados de criar uma página HTML sobre si mesmos usando as tags aprendidas.
Slides Lição 6, CPAD, As Nossas Armas Espirituais, 2Tr24.pptx
Introdução HTML básico
1. Introdução a Linguagem HTML:
Conceitos Básicos e Estrutura
Prof. André Constantino da Silva
Prof. Rodolfo Francisco de Oliveira
IAM
1 semestre de 2012
12 de março de 2012
2. Aula de Hoje
• Como escrevo uma página para a internet?
• Estrutura básica de um documento HTML
• Conceitos
• Algumas formatações em HTML
4. Tudo na WWW tem HTML?
1. Abrir o Firefox
2. Entrar em um site (digitar URL e teclar enter)
3. Clicar com o botão direito
4. Clicar na opção Código-fonte
5. Irá abrir uma janela com o código HTML
• Faça esses passos em mais dois sites
6. Contando as Palavras
• Ver o código-fonte do site www.folha.com.br
• Verificar quantas vezes as palavras aparecem:
N. Palavra Repetições N. Palavra Repetições
1 <html> 7 <h1>
2 </html> 8 </h1>
3 <body> 9 <h2>
4 </body> 10 </h2>
5 <title> 11 <h3>
6 </title> 12 </h3>
• Dica: pressione CTRL+F para o navegador exibir os campos de busca
7. Um Exemplo de HTML
• Abrir o Bloco de Notas e digitar o seguinte texto:
<html>
<head>
</head>
<body>
Olá!
Este é um exemplo de código HTML.
<body>
</html>
• Salvar na pasta htdocs com o nome exemplo1.html
• No Firefox, digitar:
http://localhost/~seulogin/exemplo1.html
• O que aparece?
8. O que aconteceu com as palavras?
• <html>, </html>, <head>, </head>, <body>,
</body> são palavras chamadas tags
• Uma tag é um comando (instrução) de
formatação
– Não são exibidas pelo navegador
• Sempre são escritas entre < >
• Possuem seu respectivo elemento de fechamento
</ >
9. Conceitos - Tag
<html>
<head>
</head>
<body>
Olá!
Este é um <b>exemplo de código HTML.</b>
<body>
</html>
10. Um Exemplo de HTML
• Modificar o texto para:
<html>
<head>
</head>
<body>
<b>Olá!</b>
Este é um exemplo de código HTML.
<body>
</html>
• Salvar
• No Firefox, clicar no botão atualizar (refresh)
• O que acontece?
11. Um Exemplo de HTML
• Modificar o texto para:
<html>
<head>
</head>
<body>
Olá!
Este é um <b>exemplo de código HTML.</b>
<body>
</html>
• Alterar a posição de <b> e </b> para ver o resultado
• Salvar
• No Firefox, clicar no botão atualizar (refresh)
• O que acontece?
12. A Tag <b>
• <b> indica ao navegador para escrever em
negrito
• </b> indica onde deve-se terminar de aplicar a
formatação de negrito
13. Conceitos
• HTML: HyperText Markup Language
– Tradução: Linguagem de Marcação de Hipertexto
– Usado para produzir páginas na Web
• Tag: uma marcação, um comando de
formatação
– Escrito usando <>
– Fechamento </>
14. Estrutura básica
<html> Indica que este
documento possui uma
estrutura HTML que se
inicia aqui
</html>
E termina aqui
15. Estrutura básica
<html>
O cabeçalho (head ) é
<head> elemento fundamental de um
</head> documento HTML. O propósito
é apresentar informações
gerais sobre a página.
</html>
16. Estrutura básica
<html>
<head>
</head>
O corpo (body) é outro
<body>
elemento fundamental. O
conteúdo dentro de
<body> será exibido pelo
<body> navegador.
</html>
17. Estrutura básica
<html>
<head>
</head>
<body> Conteúdo
Olá!
Este é um <b>exemplo de código HTML.</b>
<body>
</html>
18. A Tag <title>
• Modificar o texto para:
<html>
<head>
<title>Exemplo de documento HTML</title>
</head>
<body>
Olá!
Este é um <b>exemplo de código HTML.</b>
<body>
</html>
• Alterar a posição de <b> e </b> para ver o resultado
• Salvar
• No Firefox, clicar no botão atualizar (refresh)
• O que acontece?
20. As Tags <i>, <u> e <s>
• <i> exibe o texto em itálico
• <u> exibe o texto sublinhado
• <s> exibe o texto riscado
Vamos testar?
21. 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?
23. Tarefa para Casa
• Com as tags aprendidas hoje, faça uma página
HTML sobre você com as seguintes
informações:
– Seu nome e de sua família (pais, irmãos)
– O que você gosta de fazer
– O que você não gosta de fazer
– Música, filme ou comida favoritos