HTML Tutorial
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 chamadospá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.
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.
·
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:
Lembre-se do exemplo HTML da página anterior:
·
<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>
|
·
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:
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>
Esta é minha
primeira página. <b>Este texto está em negrito</b>
</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'
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.
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'
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
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'
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.
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'
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>
<h2>Este
é um título</h2>
<h3>Este
é um título</h3>
<h4>Este
é um título</h4>
<h5>Este
é um título</h5>
<h6>Este
é um título</h6>
|
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>
|
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.
<!-- Este é
um comentário -->
|
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.
HTML define uma série de elementos para formatar a saída, como
texto em negrito ou itálico.
Abaixo estão uma série de exemplos que você pode tentar por si
mesmo:
Exemplos
Este exemplo demonstra como você pode formatar texto em um
documento HTML.
Este exemplo demonstra como você pode controlar quabras de linha e
espaços com a tag pre.
Este exemplo demonstra o quão diferentes serão mostradas as tags
de "saída de computador".
Este exemplo demonstra como escrever um endereço em um documento
HTML.
Este exemplo demonstra como manejar uma abreviatura ou um
acrônimo.
Este exemplo demonstra como mudar a direção do texto.
Este exemplo demonstra como manejar citações longas e curtas.
Este exemplo demonstra como marcar um texto que foi cancelado ou
inserido em um documento.
Como ver a fonte HTML
Você já viu uma página Web e imaginou "Como eles fazem
isso"?
Para descobrir, simplesmente clique na opção EXIBIR na barra de
ferramentas do seu navegador e selecione CÓDIGO FONTE ou PÁGINA FONTE. Uma janela
irá abrir para mostrar-lhe a HTML real da página.
Tags de Formatação de Texto
Tag
|
Descrição
|
<b>
|
Define texto em negrito
|
<big>
|
Define texto grande
|
<em>
|
Define texto enfatizado;
|
<i>
|
Define texto em itálico
|
<small>
|
Define texto pequeno
|
<strong>
|
Define texto forte
|
<sub>
|
Define texto subescrito
|
<sup>
|
Define texto superescrito
|
<ins>
|
Define texto inserido
|
<del>
|
Define texto cancelado
|
<s>
|
Desaprovada. Use <del> em vez
|
<strike>
|
Desaprovada. Use <del> em vez
|
<u>
|
Desaprovada. Use estilos em vez
|
Tags de "Saída de Computador"
Tag
|
Descrição
|
<code>
|
Define texto de código de computador
|
<kbd>
|
Define texto de teclado
|
<samp>
|
Define amostra de código de computador
|
<tt>
|
Define texto de teletipo
|
<var>
|
Define uma variável
|
<pre>
|
Define texto pré-formatado
|
<listing>
|
Desaprovada. Use <pre> em vez
|
<plaintext>
|
Desaprovada. Use <pre> em vez
|
<xmp>
|
Desaprovada. Use <pre> em vez
|
Tags de Citações curtas (Citations), Citações longas (Quotations),
e Definição
Tag
|
Descrição
|
<abbr>
|
Define uma abreviatura
|
<acronym>
|
Define um acrônimo
|
<address>
|
Define um elemento de endereço
|
<bdo>
|
Define a direção do texto
|
<blockquote>
|
Define uma citação longa
|
<q>
|
Define uma citação curta
|
<cite>
|
Define uma citação
|
<dfn>
|
Define um termo de definição
|
Nenhum comentário:
Postar um comentário