aula 2 – introdução a html - conceitos básicos e estrutura
TRANSCRIPT
Introdução a Linguagem HTML:Conceitos Básicos e Estrutura
Prof. André Constantino da SilvaProf. Rodolfo Francisco de Oliveira
IAM1 semestre de 2012
12 de março de 2012
Aula de Hoje
• Como escrevo uma página para a internet?
• Estrutura básica de um documento HTML
• Conceitos
• Algumas formatações em HTML
HTML, onde está?
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
O que está acontecendo?
Navegador
Contando as Palavras
• Ver o código-fonte do site www.folha.com.br
• Verificar quantas vezes as palavras aparecem:
• Dica: pressione CTRL+F para o navegador exibir os campos de busca
N. Palavra Repetições
1 <html>
2 </html>
3 <body>
4 </body>
5 <title>
6 </title>
N. Palavra Repetições
7 <h1>
8 </h1>
9 <h2>
10 </h2>
11 <h3>
12 </h3>
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?
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
</ >
Conceitos - Tag
<html>
<head>
</head>
<body>
Olá!
Este é um <b>exemplo de código HTML.</b>
<body>
</html>
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?
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?
A Tag <b>
• <b> indica ao navegador para escrever em negrito
• </b> indica onde deve-se terminar de aplicar a formatação de negrito
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 </>
Estrutura básica
<html>
</html>
Indica que este documento possui uma estrutura HTML que se
inicia aqui
E termina aqui
Estrutura básica
<html><head>
</head>
</html>
O cabeçalho (head ) é elemento fundamental de um documento HTML. O propósito
é apresentar informações gerais sobre a página.
Estrutura básica
<html>
<head>
</head>
<body>
<body>
</html>
O corpo (body) é outro elemento fundamental. O
conteúdo dentro de <body> será exibido pelo
navegador.
Estrutura básica
<html>
<head>
</head>
<body>
Olá!
Este é um <b>exemplo de código HTML.</b>
<body>
</html>
Conteúdo
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?
A Tag <title>
Sem <title> Com <title>
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?
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?
Fechamento de Tags
• E se eu esquecer de fechar uma tag?
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