Apostila HTML

Capítulo 1 Fundamentos de HTML Curso de HTML
Capítulo 1
Fundamentos de HTML
Objetivos deste capítulo

Conhecer HTML;
Diferenciar as linguagens de marcação das linguagens de
programação;
Saber o que são as tags HTML e como utilizá-las;
Identificar as tags para a estrutura geral de uma página.
O que é HTML
O HTML (HyperText Markup Language) é uma linguagem de
marcação de documentos com hipertexto, cuja função é enviar para o
navegador instalado no computador do usuário comandos de
formatação que informamam de que maneira textos, imagens etc.
devem ser exibidos na tela. Além dessas marcações, o HTML contém
comandos que permitem fazer links de uma página para outra.
O HTML não foi concebido para controlar a aparência de uma página,

assim como ocorre nos editores de texto. Na realidade, ele é
composto por um conjunto de normas e instruções que informam ao
browser de que maneira ele deve exibir a página na tela de seu
computador. Essas instruções, chamadas de tags, estão inseridas nos
documentos originais que criaram as páginas (documento-fonte).
Imagine, por exemplo, que você gostaria de exibir em negrito a frase

"Seja Bem-vindo" na página Web que você está criando. Neste caso,
teríamos que usar um marcador de início de negrito e outro para fim
de negrito. Em HTML, temos:
<B>Seja Bem-vindo</B>
Podemos dizer que as tags nada mais são do que referências que
orientam o navegador se uma determinada frase deve estar em
negrito, o tamanho e estilo de sua fonte, as imagens e o local da
1
página em que devem aparecer, se existem links para outras páginas

etc.
Em resumo, podemos dizer que HTML é uma linguagem de marcação

usada pela Web, cuja função é definir formatos para as páginas e
possibilitar a inserção de links de hipertexto, permitindo a navegação
entre várias páginas.
Para escrever em HTML, você pode utilizar qualquer editor de texto,

desde que cada documento seja salvo no formato "somente texto" e
com a extensão .htm ou .html. Você também pode usar editores de
HTML, especialmente desenvolvidos para este fim, o que facilita
bastante o trabalho do programador, como, por exemplo, o
DreamWeaver da Adobe.
Um ponto importante a ser ressaltado é que o HTML não pode ser

confundido com linguagens de programação, como C++, Pascal, etc.,
que são usadas no desenvolvimento de softwares, como contas a
pagar e a receber, controle de estoque, agenda etc. HTML é
simplesmente uma linguagem de marcação muito mais simples do
que as linguagens de programação.
Embora o HTML seja um padrão adotado pelos browsers

(navegadores) e seu desenvolvimento esteja atrelado aos avanços da
Internet, diferentes navegadores podem exibir uma mesma página de
modo um pouco diferente; sem dúvida, um fator de complicação para
os desenvolvedores web.
Algumas características do HTML

É uma linguagem de marcação e não de programação;
Seus comandos recebem o nome de tags;
A maioria dessas tags aparece em pares, uma iniciando um
determinado bloco e a outra encerrando esse bloco. Exemplos:
<HEAD> e </HEAD>, <TITLE> e </TITLE>, <BODY> e </BODY>
Algumas tags podem aparecer isoladamente (não aos pares),

como, por exemplo:
<BR> e <HR>
2
As tags estão sempre contidas entre os sinas menor que e maior

que <...>;
As tags podem ser escritas tanto com letras minúsculas como
maiúsculas, ou uma combinação delas. Por exemplo:
<HEAD>, <head>, <Head>, <hEaD>
Algumas tags possuem outros comandos associados que são

denominados atributos, cuja finalidade é expandir sua
abrangência.
O que é HTML
Todo documento escrito em HTML possui quatro tags básicas usadas
para descrever a estrutura geral de uma página a ser lida pelo
navegador (browser), como título, tipo de linguagem adotada,
ferramentas disponíveis etc. Um documento escrito em HTML deve
ter, no mínimo, a seguinte estrutura:
1 <HTML>
2 <TITLE>Faça um Site</TITLE>
3 <HEAD>
4
5 <BODY>
6 ... conteúdo da página
7 </BODY>
8
9 </HTML>
As tags <HTML>...</HTML>
Sua função é indicar ao navegador que o documento a ser lido possui
marcação HTML, o que torna esta tag a mais importante de uma
página. Elas devem obrigatoriamente abrir e encerrar uma página.
Sintaxe:
<HTML>
...Sua página
</HTML>
3
As tags <HEAD>...</ HEAD >

Indicam quais os comandos que devem ser lidos pelo navegador
antes que a página seja carregada, ou seja, servem de cabeçalho par
a página, como título a ser inserido na janela do navegador, métodos
para a abertura da página, as linguagens incorporadas etc. Na
hierarquia da linguagem HTML, a tag <HEAD> vem logo abaixo da
tag <THML>.
Sintaxe:
<HEAD>
...Cabeçalho da página
</HEAD>
As tags <TITLE>...</TITLE>
Definem um título a ser exibido na barra de título da janela do
navegador. Essas tags sempre devem estar entre as tags <HEAD> e
</HEAD>.
Sintaxe:
<TITLE>...Cabeçalho da página...</TITLE>
Definem um título a ser exibido na barra de título da janela do

navegador. Essas tags sempre devem estar entre as tags <HEAD> e
</HEAD>.
É muito importante que você defina um título em sua página, pois ele
serve como referência para os sites de busca. Além do mais, se você
adicionar a página aos seus favoritos, o título da página se torna
âncora e atalho para ela.
Por estas razões, é muito importante que você atribua títulos

sugestivos às suas páginas. Não use títulos genéricos, tais como:
Seja bem-vindo, Introdução etc. Escolha um título curto que seja
suficiente para descrever o conteúdo da página.
Você só pode usar um título por página e seu conteúdo deve ser um
texto simples, ou seja, não coloque outras tags no título.
4
As tags <BODY>...</BODY>
Contêm todo o restante de uma página escrita em HTML. Elas
iniciam e finalizam a página a ser exibida pelo navegador, ou seja,
contêm todo o corpo do documento. Hierarquicamente a tag
<BODY> vem imediatamente após a tag <HEAD>, e a tag de
finalização </BODY> vem imediatamente antes da tag </HTML>. A
tag <BODY> também pode conter alguns atributos para definir uma
cor de fundo para a página, cor do texto etc.
Sintaxe:
<BODY>
...conteúdo da página
</BODY>
X Laboratório 1.1
Construindo a primeira página
1 Utilizando o Bloco de Notas, digite o código apresentado abaixo:
1 <HTML>
2 <TITLE>Faça um Site – HTML</TITLE>
3 <HEAD>
4
5 <BODY>
6 Olá amigo, seja bem vindo.
7 </BODY>
8 </HTML>
2 Localize o arquivo em C:\web\nhtml\labs (ou na sua unidade

de trabalho).
3 Na Caixa de Diálogo Salvar Como... nomeie o arquivo como
Lab1_1.htm.
4 Clique no botão Salvar.
5 Feche o Bloco de Notas.
6 Para visualizar o resultado em seu navegador, abra o Windows
Explorer e dê um duplo-clique sobre o arquivo Lab1_1.htm que
se encontra na pasta C:\web\nhtml\labs.
5
Figura 1.1
Visualização do laboratório Lab1_1.htm
Nas próximas seções você vai aprofundar seus conhecimentos

agregando novas informações a essa página.
Atributos da tag <BODY>

Como você já viu, o conteúdo inserido entre as tags <BODY> e
</BODY> será exibido na janela principal de seu navegador.
A tag <BODY> pode conter alguns atributos que permitem alterar a

aparência geral da página, tais côo: cor de fundo, imagem de fundo,
cor padrão para o texto que será exibido na página etc.
Atributos são partes extras das tags HTML que contêm opções ou
NOTA
outras informações sobre a tag em si.
A seguir descrevemos dois desses atributos:
Bgcolor: define uma cor de fundo para a página. Se esse atributo

for omitido, o navegador exibe a página com a cor de fundo
padrão, normalmente branco ou cinza. Você pode definir as cores
de três maneiras diferentes: nome da cor em inglês (yellow,
black, red, blue etc.), em hexadecimal (#FFFFFF, #000000 etc.),
ou em RGD.
6
Sintaxe:
<BODY BGCOLOR="nome da cor">
Exemplo:
<BODY BGCOLOR="yellow"> ou <BODY BGCOLOR="#FFFF00">
Exibe a página com fundo amarelo.
A tabela seguinte exibe o nome das cores básicas e seus respectivos

códigos em hexadecimal.
Aqua Black Blue Fuchsia

(#00FFFF) (#000000) (#0000FF) (#FF00FF)
Green Gray Lime Maroon
(#008000) (#808080) (#00FF00) (#800000)
Navy Olive Purple Red
(#000080) (#808000) (#800080) (#FF0000)
Silver Teal White Yellow
(#C0C0C0) (#008080) (#FFFFFF) (#FFFF00)
Text: define uma cor para o texto exibido em toda a página. Se

esse atributo for omitido, o navegador exibe o texto com a cor
padrão, normalmente o preto.
Sintaxe:
<BODY TEXT="nome da cor">
Exemplo:
<BODY TEXT="blue"> ou <BODY TEXT="#0000FF">
Exibe o texto da página na cor azul.
7
X Laboratório 1.2
Inserindo atributos na tag <BODY>
Neste laboratório, vamos fazer uma alteração na página construída

no laboratório anterior inserindo os atributos bgcolor e text na tag
<BODY>.
1 No Bloco de Notas, abra o arquivo lab1_1.htm que se encontra

na pasta C:\web\nhtml\labs.
2 Altere a linha 5 (em negrito) conforme indica a listagem
seguinte:
1 <HTML>
2 <HEAD>
4 </HEAD>
5 <BODY BGCOLOR="#FFCC00" TEXT="#990000">
7 </BODY>
8 </HTML>
3 Salve seu trabalho como Lab1_2.htm.

4 Visualize o resultado em seu navegador (abra o Windows
Explorer e dê um duplo-clique com o botão esquerdo do mouse
sobre o arquivo Lab1_2.htm que se encontra na pasta
C:\web\nhtm\labs), figura 1.2.
Figura 1.2
Visualização do laboratório Lab1_2.htm
8
Observe que a página foi exibida com um fundo laranja com texto
escrito em vermelho-escuro.
NOTA Os atributos bgcolor e text da tag <BODY> foram desaprovados

nas recomendações mais recentes do W3C para a linguagem
HTML (HTML 4 e XHTML). A forma recomendada para obter os
mesmos resultado baseia-se na utilização de estilos CSS. A
utilização destes atributos só se justifica se precisarmos manter a
compatibilidade com browsers antigos que não suportam CSS.
Mais adiante você vai aprender os conceitos básicos de CSS.
Tag <META>
A tag <HEAD>, além do título, pode conter outras informações úteis

para o gerenciamento da página que está sendo exibida em seu
navegador. Tais informações são inseridas em uma tag denominada
<META>.
Embora você não seja obrigado a inserir tags <META> em sua

página, seu uso pode ser útil para a realização de algumas tarefas,
tais como: passar informações para os "robôs" dos sites de busca,
atualizar automaticamente a página em um intervalo de tempo
predefinido etc.
Os campos <META> possuem três atributos principais:
Name: indica um nome para a informação.

http-equiv: faz uma correspondência com campos de cabeçalho
do protocolo http. A informação contida nesse campo pode ser
lida pelos navegadores e provocar algumas ações.
Content: define o conteúdo.
Para que você possa entender melhor o que acabamos de explicar,

nada melhor do que um exemplo prático.
<HEAD>
<META http-equiv="Content-type" content="text/html; charset=isso-8859-1">
<META name="KeyWords" content="HTML, internet, web, livro">
<TITLE>Faça um Site – HTML</TITLE>
</HEAD>
9
Existe poucos valores para o atributo http-equiv, sendo o mais

comum o Content-Type, cuja função é indicar o conjunto de
caracteres usado pela página que está sendo exibida, fazendo com
que o navegador exiba corretamente os caracteres especiais que
estejam presentes no texto.
Para garantir uma exibição correta da língua português usamos o

charset ISO-8859-1. Neste caso, a tag <META> terá a seguinte
sintaxe:
<META http-equiv="Content-type" content="text/html; charset=isso-8859-1">
Uma outra aplicação para http-equiv é o Refresh que tem por

objetivo fazer com que o navegador execute uma determinada página
após algum tempo preestabelecido.
<META http-equiv="Refresh" content="5; URL=http://www.facaumsite.com.br">
Neste exemplo, a página do Site Faça um Site será exibida

automaticamente após cinco segundos.
O atributo name pode conter uma série de palavras-chave, sendo a

mais comum KeyWords, cuja a função é ajudar os sites de busca.
Em nosso exemplo usamos:
<META name="KeyWords" content="HTML, internet, web, livro">
Em que as palavras de busca são: HTML, Internet, web e livro.
X Laboratório 1.3
Inserindo tags <META> em uma página
Neste laboratório, vamos fazer uma alteração na página construída

no laboratório anterior inserindo algumas tags <META>.
1 No Bloco de Notas, abra o arquivo lab1_2.htm que se encontra

na pasta C:\web\nhtml\labs.
2 Insira as linhas que estão em negrito na listagem seguinte:
10
1 <HTML>
2 <HEAD>
3 <META http-equiv="Content-type" content="text/html; charset=isso-8859-1">
4 <META http-equiv="Refresh" content="5; URL=http://www.facaumsite.com.br">
6 </HEAD>
7 <BODY BGCOLOR="#FFCC00" TEXT="#990000">
9 </BODY>
10 </HTML>
3 Salve seu trabalho como Lab1_3.htm.

4 Visualize o resultado em seu navegador (abra o Windows
Explorer e dê um duplo-clique com o botão esquerdo do mouse
sobre o arquivo Lab1_3.htm) que se encontra na pasta
C:\web\nhtml\labs).
Inicialmente a página Lab1_3.htm será exibida em seu

navegador. Após cinco segundos a página do Site Faça um Site
será automaticamente exibida pelo navegador, Figura 1.3,
graças à instrução inserida na linha 4 do documento.
<META http-equiv="Refresh" content="5; URL=http://www.facaumsite.com.br">
Em que 5 representa o número de segundos necessários para

que o refresh seja executado e a URL contém o endereço da
página a ser exibida após o refresh.
Figura 1.3
Refresh para a home page da série Faça um Site.
11
Resumo
Neste capítulo você aprendeu que o HTML é uma linguagem de marcação de

texto usada para descrever documentos de hipertexto na web, cuja função é
descrever o conteúdo de uma página e não a sua aparência.
Você também conheceu a estrutura básica de um documento HTML, como

inserir títulos na barra de títulos do navegador, exibir o conteúdo de uma
página (inserido entre as tags <BODY> e </BODY>) e algumas funções
utilizadas nas tags <META>.
No próximo capítulo você aprenderá a trabalhar com textos.
12

Apostila HTML

Загружено:

Сведения о документе

Исходное описание:

Авторское право

Доступные форматы

Поделиться этим документом

Поделиться или встроить документ

Параметры публикации

Этот документ был вам полезен?

Это неприемлемый материал?

Авторское право:

Доступные форматы

Apostila HTML

Загружено:

Авторское право:

Доступные форматы

Capítulo 1 Fundamentos de HTML Curso de HTML

Objetivos deste capítulo

O HTML não foi concebido para controlar a aparência de uma página,

Imagine, por exemplo, que você gostaria de exibir em negrito a frase

página em que devem aparecer, se existem links para outras páginas

Em resumo, podemos dizer que HTML é uma linguagem de marcação

Para escrever em HTML, você pode utilizar qualquer editor de texto,

Um ponto importante a ser ressaltado é que o HTML não pode ser

Embora o HTML seja um padrão adotado pelos browsers

Algumas características do HTML

<HEAD> e </HEAD>, <TITLE> e </TITLE>, <BODY> e </BODY>

Algumas tags podem aparecer isoladamente (não aos pares),

As tags estão sempre contidas entre os sinas menor que e maior

<HEAD>, <head>, <Head>, <hEaD>

Algumas tags possuem outros comandos associados que são

As tags <HEAD>...</ HEAD >

Definem um título a ser exibido na barra de título da janela do

Por estas razões, é muito importante que você atribua títulos

1 Utilizando o Bloco de Notas, digite o código apresentado abaixo:

2 Localize o arquivo em C:\web\nhtml\labs (ou na sua unidade

Nas próximas seções você vai aprofundar seus conhecimentos

Atributos da tag <BODY>

A tag <BODY> pode conter alguns atributos que permitem alterar a

A seguir descrevemos dois desses atributos:

Bgcolor: define uma cor de fundo para a página. Se esse atributo

<BODY BGCOLOR="nome da cor">

<BODY BGCOLOR="yellow"> ou <BODY BGCOLOR="#FFFF00">

Exibe a página com fundo amarelo.

A tabela seguinte exibe o nome das cores básicas e seus respectivos

Aqua Black Blue Fuchsia

Text: define uma cor para o texto exibido em toda a página. Se

<BODY TEXT="nome da cor">

<BODY TEXT="blue"> ou <BODY TEXT="#0000FF">

Exibe o texto da página na cor azul.

Neste laboratório, vamos fazer uma alteração na página construída

1 No Bloco de Notas, abra o arquivo lab1_1.htm que se encontra

3 Salve seu trabalho como Lab1_2.htm.

NOTA Os atributos bgcolor e text da tag <BODY> foram desaprovados

A tag <HEAD>, além do título, pode conter outras informações úteis

Embora você não seja obrigado a inserir tags <META> em sua

Os campos <META> possuem três atributos principais:

Name: indica um nome para a informação.

Para que você possa entender melhor o que acabamos de explicar,

Existe poucos valores para o atributo http-equiv, sendo o mais

Para garantir uma exibição correta da língua português usamos o

<META http-equiv="Content-type" content="text/html; charset=isso-8859-1">

Uma outra aplicação para http-equiv é o Refresh que tem por

<META http-equiv="Refresh" content="5; URL=http://www.facaumsite.com.br">

Neste exemplo, a página do Site Faça um Site será exibida

O atributo name pode conter uma série de palavras-chave, sendo a

<META name="KeyWords" content="HTML, internet, web, livro">

Em que as palavras de busca são: HTML, Internet, web e livro.

Neste laboratório, vamos fazer uma alteração na página construída

1 No Bloco de Notas, abra o arquivo lab1_2.htm que se encontra

3 Salve seu trabalho como Lab1_3.htm.

Inicialmente a página Lab1_3.htm será exibida em seu

<META http-equiv="Refresh" content="5; URL=http://www.facaumsite.com.br">

Em que 5 representa o número de segundos necessários para

Neste capítulo você aprendeu que o HTML é uma linguagem de marcação de

Você também conheceu a estrutura básica de um documento HTML, como

No próximo capítulo você aprenderá a trabalhar com textos.

Вам также может понравиться