Introdução HTML básico

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

Aula de Hoje
• Como escrevo uma página para a internet?

• Estrutura básica de um documento HTML

• Conceitos

• Algumas formatações em HTML

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

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
<html>
<head>
</head>
<body>
Olá!
<body>
</html>

• Alterar a posição de <b> e </b> para ver o resultado
• Salvar
• 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> Indica que este
documento possui uma
estrutura HTML que se
inicia aqui

</html>
E termina aqui

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>

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>

Estrutura básica
<html>
<head>
</head>
<body> Conteúdo
Olá!
<body>
</html>

A Tag <title>
<html>
<head>
<title>Exemplo de documento HTML</title>
</head>
<body>
Olá!
<body>
</html>
• Alterar a posição de <b> e </b> para ver o resultado
• Salvar
• 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á!
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

Introdução HTML básico

Recomendados

Recomendados

Mais conteúdo relacionado

Mais procurados

Mais procurados (20)

Destaque

Destaque (20)

Semelhante a Introdução HTML básico

Semelhante a Introdução HTML básico (20)

Mais de André Constantino da Silva

Mais de André Constantino da Silva (20)

Último

Último (20)

Introdução HTML básico