Material Didádico de HTML Como Aprender

A Grande Teia Mundial (The World Wide Web)
O que é a World Wide Web?
A World Wide Web (WWW) é mais frequentemente chamada de a Web (Teia).

A Web é uma rede de computadores ao redor do mundo.
Todos os computadores na Web podem comunicar-se uns com os outros.
Todos os computadores usam um padrão de comunicação chamado HTTP.
Como funciona a WWW?
A informação na Web é armazenada em documentos chamados páginas Web.

As páginas Web são arquivos armazenados em computadores chamados servidores Web.
Os computadores que lêem páginas Web são chamados clientes Web.
Clientes Web vêem as páginas com um programa chamado navegador Web.
Navegadores populares são Internet Explorer e Netscape Navigator.
Como o navegador busca as páginas?
Um navegador procura uma página Web de um servidor através de uma requisição.

Uma requisição é um padrão de requisição HTTP contendo um endereço de uma página.
Um endereço de página assemelha-se a isto: http://www.algumacoisa.com/nomepagina.htm.
Como o navegador mostra as páginas?
Todas as páginas Web contém instruções de mostra

O navegador mostra a página lendo estas instruções.
As instruções de mostra mais comuns são chamadas marcações (tags) HTML.
As marcações HTML assemelhan-se a isto <p>Isto é um parágrafo</p>.
Quem está construindo os padrões da Web?
Os padrões da Web não são feitos pela Netscape ou Microsoft.

O corpo regulador da Web é o W3C.
W3C significa World Wide Web Consortium.
O W3C junta as especificações para os padrões da Web.
Os padrões da Web mais essenciais são HTML, CSS and XML.
O padrão HTML mais atual é a XHTML 1.0.
Introdução ao HTML
O que é um arquivo HTML?
HTML significa Hyper Text Markup Language (Linguagem de Marcação de Hipertexto)

Um arquivo HTML é um arquivo de texto contendo pequenas etiquetas de marcação (markup
tags)
As marcações dizem para o navegador Web como mostrar a página
Um arquivo HTML deve ter uma extensão de arquivo htm ou html
Um arquivo HTML pode ser criado usando um simples editor de textos
Quer experimentar?
Se você está rodando o Windows, inicie o Notepad [Bloco de notas] (ou inicie o SimpleText
se você está em um Mac) e digite o seguinte texto:
<html>
<head>
<title>Título da página</title>
</head>
<body>
Esta é minha primeira página. <b>Este texto está em negrito</b>
</body>
</html>
Salve o arquivo como "primeira.htm".
Inicie o seu navegador de Internet. Selecione "Abrir" (ou "Abrir Página") no menu Arquivo
do seu navegador. Uma caixa de diálogo aparecerá. Selecione "Procurar" (ou "Escolher
Arquivo") e localize o arquivo HTML que você recém criou - "primeira.htm" - selecione-o e
clique em "Abrir". Agora você deverá ver um endereço na caixa de diálogo, por examplo
"C:\MeusDocumentos\primeira.htm". Clique OK, e o navegador mostrará a página.
Exemplo Explicado
A primeira marcação no seu documento HTML é <html>. Esta tag diz para o seu navegador
que este é o início de um documento HTML. A última tag no seu documento é </html>. Esta
tag diz para o seu navegador que este é o final de um documento HTML.
O texto entre a tag <head> e a tag </head> é a informação de cabeçalho. A informação de

cabeçalho não é mostrada na janela do navegador.
O texto entre as tags <title> é o título do seu documento. O título é mostrado na barra de título
do navegador (a barra mais superior do navegador).
O texto entre as tags <body> é o texto que será mostrado no seu navegador.
O texto entre as tags <b> e </b> será mostrado numa fonte em negrito.
Extensão HTM ou HTML?
Quando você salva um arquivo HTML, você pode usar tanto a extensão .htm quanto .html.
Usamos .htm em nossos exemplos. Pode ser um mau hábito herdado do passado quando
alguns dos programas comumente usados somente permitiam extensões de três letras.
Com programas mais novos é perfeitamente seguro usar .html.
Observação sobre Editores de HTML:

Você pode facilmente editar arquivos HTML usando um editor WYSIWYG (what you see is
what you get [o que você vê é o que você obtém]) como o FrontPage, o Claris Home Page, ou
o Adobe PageMill em vez de escrever suas marcações num arquivo de texto puro.
Mas se você quiser ser um desenvolvedor Web habilidoso, recomendamos enfaticamente que
você use um editor de texto puro para aprender HTML elementar.
Questões Freqüentemente Perguntadas
P: Após ter editado um arquivo HTML, não consigo ver o resultado em meu navegador.
Porque?
R: Certifique-se de que você salvou o arquivo com um nome e extenção apropriados como
"c:\primeiro.htm". Certifique-se também de que você usou o mesmo nome quando abriu o
arquivo em seu navegador.
P: Tentei editar um arquivo HTML mas as modificações não aparecem no navegador.

Porque?
R: O navegador armazena suas páginas de modo que ele não precise ler a mesma página duas
vezes. Quando você modifica uma página, o navegador não sabe disso. Use o botão
atualizar/recarregar para forçar o navegador a ler a página editada.
P: Posso usar tanto o Internet Explorer quanto o Netscape Navigator?

R: Sim, você pode fazer todo o seu treinamento tanto com o Netscape 3.0 ou superior, quanto
com o Internet Explorer 3.0 ou superior. Entretanto, uns poucos exemplos nas lições
avançadas pressupõem que você esteja rodando o Internet Explorer 4.0 ou 5.0, ou o Netscape
6.0.
P: O meu computador deve rodar o Windows? Que tal um Mac?

R: Você pode fazer o seu terinamento em um computador não Windows como o Mac.
Entertanto, uns poucos exemplos nas lições avançadas pressupõem que você esteja rodando
uma versão mais nova do Windows, como o Windows 98 ou Windows 2000.
Elementos HTML
Documentos HTML são arquivos de texto constituidos de elementos HTML.
Elementos HTML são definidos usando tags (etiquetas) HTML.
Tags (etiquetas) HTML
As tags HTML são usadas para marcar elements HTML

As tags HTML são cercadas pelos dois caracteres < e >
Os caracteres circundantes são chamados chaves angulares
As tags HTML normalmente vêm em pares como <b> e </b>
A primeira tag em um par é a tag de abertura, a segunda tag é a tag de fechamento
O texto entre as tags de abertura e fechamento é o conteúdo do elemento
As tags HTML não são sensíveis à caixa, <b> significa o mesmo que <B> [caixa é um termo
tipográfico para se referir ao corpo dos tipos; caixa-baixa: minúsculas, caixa-alta: maiúsculas]
Elementos HTML
Lembre-se do exemplo HTML da página anterior:
<html>
<head>
<title>Título da página</title>
</head>
<body>
</body>
</html>
Este é um elemento HTML:
<b>Este texto está em negrito;/b>

O elemento HTML começa com uma tag de abertura: <b>
O conteúdo do elemento HTML é: Este texto está em negrito
O elemento HTML termina com uma tag de fechamento: </b>
O propósito da tag <b> é definir um elemento HTML que deverá ser exibido em negrito.
Este é também um elemento HTML:
<body>
</body>
Este elemento HTML começa com a tag de abertura <body>, e termina com a tag de
fechamento </body>.
O propósito da tag <body> é definir o elemento HTML que contém o corpo de um documento
HTML.
Porque usamos tags com letras minúsculas?
Recém dissemos que as tags HTML não são sensíveis à caixa: <B> significa o mesmo que
<b>. Quando você surfa na Web, você notará que muitos tutoriais usam tags HTML em letras
maiúsculas em seus exemplos. Nós sempre usamos tags minúsculas. Por que?
Se você quer se preparar para as próximas gerações da HTML você deve começar a usar tags
minúsculas. O World Wide Web Consortium (W3C) recomenda tags minúsculas na sua
recomendação HTML 4, e a XHTML (a próxima geração da HTML) demanda tags
minúsculas.
Atributos da Tag
As tags podem ter atributos. Os atributos podem prover informação adicional sobre os
elementos HTML na sua página.
Esta tag define o elemento corpo da sua página HTML: <body>. Com um atributo adicional
bgcolor, você pode dizer ao navegador que a cor de fundo da sua página deve ser vermelha,
assim: <body bgcolor="red">.
Esta tag define uma tabela HTML: <table>. Com um atributo borda, você pode dizer ao
navegador que a tabela não deve ter bordas: <table border="0">
Os atributos sempre vem em pares nome/valor como este: nome="valor".
Os atributos são sempre adicionados à tag de abertura de um elemento HTML.
Estilos de aspas, "red" ou 'red'?
Os valores dos atributos sempre devem ser inseridos entre aspas. Aspas duplas são as mais
comuns, mas aspas simples são também permitidas.
Em algumas situações raras, como quando um valor de atributo já contém aspas, é necessário
usar aspas simples:
name='João "Espingarda" da Silva'
Tags HTML Básicas
As tags mais importantes na HTML são as tags que definem títulos, parágrafos e quebras de
linha.
A melhor maneira de aprender HTML é trabalhar com exemplos.

Tente você mesmo - Exemplos
Um documento HTML muito simples

Este exemplo é um documento HTML muito simples, com somente um mínimo de tags
HTML ELe demonstra como o texto inserido em um elemento body é exibido no navegador.
Parágrafos simples
Este exemplo demonstra como o texto dentro de um elemento de parágrafo é exibido no
navegador.
(Você encontrará mais exemplos no final desta página)
Títulos
Títulos são definidos com as tags <h1> a <h6>. A <h1> define o título maior. A <h6> define
o título menor.
<h1>Este é um título</h1>
A HTML automaticamente adiciona uma linha em branco extra antes e após um titulo..
Parágrafos
Os parágrafos são definidos com a tag<p>.
<p>Este é um parágrafo</p>
<p>Este é outro parágrafo</p>
A HTML adiciona automaticamente uma linha em branco extra antes e após um parágrafo.
Quebras de linha
A tag <br> é usada quando você quer terminar uma linha, mas não quer começar um novo
parágrafo. A tag <br> força a quebra de linha onde quer que você a coloque.
<p>Este <br> é um pará<br>grafo com quebras de linha</p>

A tag <br> é uma tag vazia. Ela não tem tag de fechamento.
Comentários em HTML
A tag de comentário é usada para inserir um comentário no código fonte HTML. Um

comentário será ignorado pelo navegador. Você pode usar comentários para explicar o seu
código, o que pode ajuda-lo quando você editar o código fonte numa data posterior.


Observe que você necessita de um ponto de exclamação após a chave de abertura, mas não
antes da chave de fechamento.
Observações Básicas - Dicas Úteis
Quando você escreve texto HTML, você nunca pode estar seguro de como o texto será
mostrado em outro navegador. Algumas pessoas têm telas de monitor grandes, algumas têm
pequenas. O texto será reformatado cada vez que o usuário redimensionar sua janela. Nunca
tente formatar o texto em seu editor adicionando linhas e espaços ao texto.
A HTML irá truncar os espaços em seu texto. Qualquer quantidade de espaços conta como
um. Algumas informações extras: Em HTML uma nova linha conta como um espaço.
Usar parágrafos vazios <p> para inserir linhas em branco é um mau hábito. Em vez disso use
a tag <br>. (Mas não use a tag <br> para criar listas. Espere até que você tenha aprendido
sobre listas HTML.)
Você pode ter notado que parágrafos podem ser escritos sem a tag de fechamento </p>. Não
confie nisso. A próxima versão da HTML não irá permitir que você omita QUALQUER tag
de fechamento.
A HTML adiciona automaticamente uma linha em branco extra antes e após alguns
elementos, como antes e após um parágrafo, e antes e após um título.
Nós usamos um filete horizontal (a tag <hr>), para separar as seções em nossos tutoriais.
Mais exemplos
Mais parágrafos
Este exemplo demonstra alguns dos comportamentos padrões dos elementos de parágrafo.
Quebras de linha
Este exemplo demonstra o uso de quebras de linha em um documento HTML.
Problemas com poemas

Este exemplo demonstra alguns problemas com formatação HTML.
Títulos
Este exemplo demonstra as tags que exibem títulos em um documento HTML.
Título alinhado no centro

Este exemplo demonstra um título alinhado no centro.
Filete horizontal
Este exemplo demonstra como inserir um filete horizontal.
Comentários ocultos
Este exemplo demonstra como inserir um comentário oculto no código fonte HTML.
Cor de fundo
Este exemplo demonstra como adicionar uma cor de fundo numa página HTML.
Tags HTML Básicas
Tag Descrição
<html> Define um documento HTML
<body> Define o corpo do documento
<h1> a <h6> Define título 1 a título 6
<p> Define um parágrafo
<br> Insere uma única quebra de linha
<hr> Define um filete horizontal

</script>
VBScript:
<script type="text/vbscript">

</script>
A Tag <noscript>
Além de esconder o script dentro de um comentário, você pode também adicionar a tag
<noscript>.
A tag <noscript> é usada para definir um texto alternativo se um script NÃO for executado.
Esta tag é usada para navegadore que reconhecem a tag <script>, mas não suportam o script
dentro dela, de modo que o navegador irá exibir o texto dentro da tag <noscript> ao invés.
Entretanto, se um navegador suporta o script dentro da tag <script> ele irá ignorar a tag
<noscript>.
Exemplo
JavaScript:

</script>
<noscript>Seu navegador não suporta JavaScript!</noscript>
VBScript:
<script type="text/vbscript">

</script>
<noscript>Seu navegador não suporta VBScript!</noscript>
Tags de Script
Tag Descrição
<script> Define a script
<noscript> Define um texto alternativo se o script não for executado
<object> Define um objeto (embedded)
<param> Define configurações run-time (parâmetros) para um objeto
<applet> Desaprovada. Use <object> em vez
Pronto para Publicar seu Trabalho?
Seu Primeiro Passo: Um Servidor Web Pessoal
Se você quer que as pessoas vejam as suas páginas, vocÊ deve publica-las.
Para publicar seu trabalho, você tem que copiar seus arquivos num servidor Web.
O seu próprio computador pode agir como servidor Web se estiver conectado com uma rede.
Se você estiver rodando o Windows 98, você pode usar o PWS (Personal Web Server
[Servidor Web Pessoal]).
O PWS está oculto no diretório PWS no seu CD do Windows.
Servidor Web Pessoal (Personal Web Server (PWS))
O PWS transforma qualquer computador Windows em um servidor Web. O PWS é fácil de

instalar e ideal para desenvolver e testar aplicações Web. O PWS foi otimizado para uso em
estações de trabalho (workstations), mas tem todos os requisitos de um servidor Web
completo. Ele também roda Páginas de Servidor Ativas (Active Server Pages (ASP)) assim
como o seu irmão maior IIS.
Como instalar um Servidor Web Pessoal (PWS):
Procure na instalação do seu Windows para ver se você instalou o PWS.

Se não, instale o PWS do diretório PWS no seu CD do Windows.
Siga as instruções e obtenha o execute o seu Personal Web Server.
Leia mais sobre o Personal Web Server da Microsoft.
Servidopr de Informação da Internet (Internet Information Server (IIS))
O servidor Web IIS incluido no Windows 2000, torna fácil construir grandes aplicações para a
Web. Tanto o PWS quanto o IIS incluem ASP, um padrão de scripting server-side (que roda
no servidor) que pode ser usado para criar aplicações Web dinâmicas e interativas. O IIS está
também disponível para o Windows NT.
Se vocÊ quer ler mais sobre ASP, você deve estudar o ASP School.
Leia mais sobre o Internet Information Services da Microsoft.
Seu Próximo Passo: Um Servidor Web Profissional
Se você não quer usar o PWS ou o IIS, você deve carregar (upload) os seus arquivos para um
servidor público.
Muitos Provedores de Serviços de INternet (Internet Service Providers (ISP's)) se oferecerão
para hospedar suas páginas.
Se o seu empregador tem uma Servidoe de Internet,você pode pedir a ele para hospedar seu
sítio Web.
Se vopcê está pensando seriamente nisso, você deve instalar o seu próprio Servidor de
Internet.
Antes de você selecionar um ISP, assegure-se de ler o Tutorial de Hospedagem Web (Web
Hosting) da W3Schools!!

Material Didádico de HTML Como Aprender

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Material Didádico de HTML Como Aprender

Uploaded by

Copyright:

Available Formats

A Grande Teia Mundial (The World Wide Web)

O que é a World Wide Web?

A World Wide Web (WWW) é mais frequentemente chamada de a Web (Teia).

A informação na Web é armazenada em documentos chamados páginas Web.

Um navegador procura uma página Web de um servidor através de uma requisição.

Todas as páginas Web contém instruções de mostra

Os padrões da Web não são feitos pela Netscape ou Microsoft.

O que é um arquivo HTML?

HTML significa Hyper Text Markup Language (Linguagem de Marcação de Hipertexto)

O texto entre a tag <head> e a tag </head> é a informação de cabeçalho. A informação de

Extensão HTM ou HTML?

Com programas mais novos é perfeitamente seguro usar .html.

Observação sobre Editores de HTML:

Questões Freqüentemente Perguntadas

P: Tentei editar um arquivo HTML mas as modificações não aparecem no navegador.

P: Posso usar tanto o Internet Explorer quanto o Netscape Navigator?

P: O meu computador deve rodar o Windows? Que tal um Mac?

Documentos HTML são arquivos de texto constituidos de elementos HTML.

Elementos HTML são definidos usando tags (etiquetas) HTML.

Tags (etiquetas) HTML

As tags HTML são usadas para marcar elements HTML

Lembre-se do exemplo HTML da página anterior:

<b>Este texto está em negrito;/b>

Este é também um elemento HTML:

Porque usamos tags com letras minúsculas?

Os atributos sempre vem em pares nome/valor como este: nome="valor".

Os atributos são sempre adicionados à tag de abertura de um elemento HTML.

Estilos de aspas, "red" ou 'red'?

name='João "Espingarda" da Silva'

Tags HTML Básicas

A melhor maneira de aprender HTML é trabalhar com exemplos.

Um documento HTML muito simples

(Você encontrará mais exemplos no final desta página)

Os parágrafos são definidos com a tag<p>.

<p>Este <br> é um pará<br>grafo com quebras de linha</p>

A tag de comentário é usada para inserir um comentário no código fonte HTML. Um

Observações Básicas - Dicas Úteis

Problemas com poemas

Título alinhado no centro

Tags HTML Básicas

Formatação de Texto em HTML

Texto cancelado ou inserido

Como ver a fonte HTML

Para descobrir, simplesmente clique na opção EXIBIR na barra de ferramentas do seu

Tags de Formatação de Texto

Entidades de Caractere na HTML

Observe que as entidades são sensíveis à caixa.

Espaço Não Separável

Entidades de Caractere Mais Comuns:

Resultado Descrição Nome da EntidadeNúmero da Entidade

Resultado Descrição Nome da EntidadeNúmero da Entidade

Vínculos (Links) em HTML

A HTML usa um hipervínculo (hiperlink) para vincular-se a outro documento na Web.

Uma imagem como vínculo

(Você encontrará mais exemplos na final desta página.)

A Tag Âncora e o Atributo Href

<a href="url">Texto a ser exibido</a>

Esta âncora define um vínculo para as W3Schools:

<a href="http://www.w3schools.com/">Visite as W3Schools!</a>

A Atributo Alvo (Target)

A linha abaixo abrirá o documento em uma nova janela do navegador:

A Tag Âncora e o Atributo Nome