Tags Basicos PDF

TAG’S BASICOS
Inicia/termina um documento em HTML.

<html> </html>
Define a área de cabeçalho, com elementos
<head> </head> não visualizáveis na página.
Define a área visível do documento.
<body></body>
CABEÇALHO
Coloca o nome da página na barra de título da

<title></title> janela.
ATRIBUTOS DO CORPO
Cor de fundo.
<body bgcolor=?>
Cor de texto.
<body text=?>
Cor das links.
<body link=?>
Cor das links previamente visitadas.
<body vlink=?>
Cor da link activa.
<body alink=?
TEXTO
Texto carregado.
<b></b>
Texto em itálico.
<i></i>
Texto estilo máquina de escrever, mono
<tt></tt> espaçamento.
Tamanho das letras.
<font size=?></font>
Cor das letras.
<font color=?</font>
Define a fonte utilizada.
<font face=?></font>
TEXTO
Cria uma hiperligação.

<a href=”URL”></a>
Cria uma link para o envio de correio.
<a href=mailto:EMAIL></a>
Cria um 'alvo' dentro de uma página.
<a name=”NOME”></a>
Faz a ligação a um 'alvo' presente dentro da
<a href=”#NAME”></a> mesma página.
FORMATAÇÃO
Define a área de um parágrafo.

<p></p>
Alinhamento de um parágrafo.
<p align=?>
Insere uma quebra de linha.
<br>
<div align=?> 'Tag' genérico utilizado para
formatar blocos de texto.
GRAFISMO
Insere uma imagem.

<img src=”FICHEIRO”>
Alinha uma imagem em relação ao resto do
<img src=”FICHEIRO” align=”?”> texto.
Define a borda da imagem.
<img src=”FICHEIRO” border=”?”>
Insere uma linha horizontal.
<hr>
TABELAS
Cria uma tabela.

<table></table>
Linha de uma tabela
<tr></tr>
Célula individual numa linha.
<td></td>
ATRIBUTO DA TABELA
Borda à volta de cada célula.

<table border=#>
Espaço entre as células.
<table cellspacing=#>
Margem interior das células.
<table cellpadding=#>
Largura da tabela - em pixels ou percentagem
<table width=# or %>
Alinhamento horizontal do conteúdo das
<tr align=?> or<td align=?> células.quot;left", "center" ou "right")
Alinhamento vertical do conteúdo das
<tr valign=?> or <td valign=?> células.("top", "middle" ou "bottom")
Numero de colunas 'percorridas' por uma
<td colspan=#> célula.
Numero de linhas 'percorridas' por uma célula.
<td rowspan=#>
FRAMES
Define o conjunto de frames. Surge antes de

<frameset></frameset> <body> num documento com frames.
Define as linhas num conjunto de frames. Valor
<frameset rows=”valor,valor”> pode ser em pixels, percentagem ou * (o resto
/ proporção).
Define as colunas num conjunto de frames.
<frameset cols=”valor,valor” Valor pode ser em pixels, percentagem ou * (o
resto / proporção).
Define uma unica frame. Surge dentro de
<frame> <frameset>.
Área onde é inserido o conteúdo visivel em
<noframes></noframes> browsers que não suportam o uso de frames.
ATRIBUTOS DE UM FRAME
Especifica o documento HTML a ser exibido na

<frame src=”url”> frame.
Dá um nome à frame de modo a poder ser
<frame name=”nome”> 'linkada' a partir de outras frames.
Define se a frame tem barra de scroll. VALOR
<frame scrolling=VALOR> pode ser "yes", "no" ou "auto".
Impede o visitante de redimensionar a frame.
<frame noresize>
TUTORIAL HTML
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 com´pleto. Eletambé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!!

Tags Basicos PDF

Enviado por

Dados do documento

Título original

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

Tags Basicos PDF

Enviado por

Direitos autorais:

Formatos disponíveis

TAG’S BASICOS

Inicia/termina um documento em HTML.

Coloca o nome da página na barra de título da

Cria uma hiperligação.

Define a área de um parágrafo.

Insere uma imagem.

Cria uma tabela.

Borda à volta de cada célula.

Define o conjunto de frames. Surge antes de

Especifica o documento HTML a ser exibido na

A Grande Teia Mundial (The World Wide Web)

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

Como funciona a WWW?

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

Como o navegador busca as páginas?

 Um navegador procura uma página Web de um servidor através de uma

Como o navegador mostra as páginas?

 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.

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

Salve o arquivo como "primeira.htm".

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

Extensão HTM ou HTML?

Com programas mais novos é perfeitamente seguro usar .html.

Observação sobre Editores de HTML:

Mas se você quiser ser um desenvolvedor Web habilidoso, recomendamos

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?

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:

Este é um elemento HTML:

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

O elemento HTML começa com uma tag de abertura: <b>

Este é também um elemento HTML:

O propósito da tag <body> é definir o elemento HTML que contém o corpo de um

Porque usamos tags com letras minúsculas?

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

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

Em algumas situações raras, como quando um valor de atributo já contém aspas, é

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

Tags HTML Básicas

A melhor maneira de aprender HTML é trabalhar com exemplos.

Tente você mesmo - 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>.

A HTML adiciona automaticamente uma linha em branco extra antes e após um

<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

Observe que você necessita de um ponto de exclamação após a chave de abertura,

Observações Básicas - Dicas Úteis

Problemas com poemas

Título alinhado no centro

Tags HTML Básicas

<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

espaço não separável

< menor do que < <

> maior do que > >

& e comercial & &

" aspas " "

' apóstrofe '

¢ cent ¢ ¢

£ libra £ £

¥ yen ¥ ¥

§ parágrafo (em inglês section) § §

© copyright © ©

® marca registrada ® ®

× multiplicação × ×

÷ divisão &division; ÷