Aula 2 – Introdução a HTML - conceitos básicos e estrutura

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 exemplo de código HTML.

<body>

</html>

Um Exemplo de HTML

• Modificar o texto para:<html>

<head></head><body>

Olá!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


<head></head><body>

Olá!Este é um exemplo de código HTML.

<body>

</html>

• Alterar a posição de e para ver o resultado• Salvar • No Firefox, clicar no botão atualizar (refresh)• O que acontece?

A Tag 

• indica ao navegador para escrever em negrito

• 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 exemplo de código HTML.

<body>

</html>

Conteúdo

A Tag <title>


<head><title>Exemplo de documento HTML</title>

</head><body>

Olá!Este é um exemplo de código HTML.

<body>

</html>• Alterar a posição de e 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 , e <s>

• exibe o texto em itálico

• exibe o texto sublinhado

• <s> exibe o texto riscado

Vamos testar?

As Tags , e <s>

• Modificar seu documento HTML para:<html>

<head><title>Exemplo de documento HTML</title>

</head><body>

Olá!Este é um exemplo de código HTML.Em HTML indicamos formatação através de

tags. É possível escrever em negrito, em itálico, sublinhado 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

Aula 2 – Introdução a HTML - conceitos básicos e estrutura

Education

Transcript of Aula 2 – Introdução a HTML - conceitos básicos e estrutura