Escolha uma das opções e acesse esse e outros materiais sem bloqueio. 🤩
Cadastre-se ou realize login
Ao continuar, você aceita os Termos de Uso e Política de Privacidade
Escolha uma das opções e acesse esse e outros materiais sem bloqueio. 🤩
Cadastre-se ou realize login
Ao continuar, você aceita os Termos de Uso e Política de Privacidade
Escolha uma das opções e acesse esse e outros materiais sem bloqueio. 🤩
Cadastre-se ou realize login
Ao continuar, você aceita os Termos de Uso e Política de Privacidade
Escolha uma das opções e acesse esse e outros materiais sem bloqueio. 🤩
Cadastre-se ou realize login
Ao continuar, você aceita os Termos de Uso e Política de Privacidade
Escolha uma das opções e acesse esse e outros materiais sem bloqueio. 🤩
Cadastre-se ou realize login
Ao continuar, você aceita os Termos de Uso e Política de Privacidade
Escolha uma das opções e acesse esse e outros materiais sem bloqueio. 🤩
Cadastre-se ou realize login
Ao continuar, você aceita os Termos de Uso e Política de Privacidade
Escolha uma das opções e acesse esse e outros materiais sem bloqueio. 🤩
Cadastre-se ou realize login
Ao continuar, você aceita os Termos de Uso e Política de Privacidade
Escolha uma das opções e acesse esse e outros materiais sem bloqueio. 🤩
Cadastre-se ou realize login
Ao continuar, você aceita os Termos de Uso e Política de Privacidade
Escolha uma das opções e acesse esse e outros materiais sem bloqueio. 🤩
Cadastre-se ou realize login
Ao continuar, você aceita os Termos de Uso e Política de Privacidade
Escolha uma das opções e acesse esse e outros materiais sem bloqueio. 🤩
Cadastre-se ou realize login
Ao continuar, você aceita os Termos de Uso e Política de Privacidade
Prévia do material em texto
TAG’S BASICOS
<html> </html>
Inicia/termina um documento em HTML.
<head> </head>
Define a área de cabeçalho, com elementos
não visualizáveis na página.
<body></body>
Define a área visível do documento.
CABEÇALHO
<title></title>
Coloca o nome da página na barra de título da
janela.
ATRIBUTOS DO CORPO
<body bgcolor=?>
Cor de fundo.
<body text=?>
Cor de texto.
<body link=?>
Cor das links.
<body vlink=?>
Cor das links previamente visitadas.
<body alink=?
Cor da link activa.
TEXTO
<b></b>
Texto carregado.
<i></i>
Texto em itálico.
<tt></tt>
Texto estilo máquina de escrever, mono
espaçamento.
<font size=?></font>
Tamanho das letras.
<font color=?</font>
Cor das letras.
<font face=?></font>
Define a fonte utilizada.
TEXTO
<a href=”URL”></a> Cria uma hiperligação.
<a href=mailto:EMAIL></a>
Cria uma link para o envio de correio.
<a name=”NOME”></a> Cria um 'alvo' dentro de uma página.
<a href=”#NAME”></a> Faz a ligação a um 'alvo' presente dentro da
mesma página.
FORMATAÇÃO
<p></p>
Define a área de um parágrafo.
<p align=?>
Alinhamento de um parágrafo.
<br>
Insere uma quebra de linha.
<div align=?> 'Tag' genérico utilizado para
formatar blocos de texto.
GRAFISMO
<img src=”FICHEIRO”> Insere uma imagem.
<img src=”FICHEIRO” align=”?”> Alinha uma imagem em relação ao resto do
texto.
<img src=”FICHEIRO” border=”?”> Define a borda da imagem.
<hr>
Insere uma linha horizontal.
TABELAS
<table></table>
Cria uma tabela.
<tr></tr>
Linha de uma tabela
<td></td>
Célula individual numa linha.
ATRIBUTO DA TABELA
<table border=#>
Borda à volta de cada célula.
<table cellspacing=#>
Espaço entre as células.
<table cellpadding=#>
Margem interior das células.
<table width=# or %>
Largura da tabela - em pixels ou percentagem
<tr align=?> or<td align=?>
Alinhamento horizontal do conteúdo das
células.quot;left", "center" ou "right")
<tr valign=?> or <td valign=?>
Alinhamento vertical do conteúdo das
células.("top", "middle" ou "bottom")
<td colspan=#>
Numero de colunas 'percorridas' por uma
célula.
<td rowspan=#>
Numero de linhas 'percorridas' por uma célula.
FRAMES
<frameset></frameset>
Define o conjunto de frames. Surge antes de
<body> num documento com frames.
<frameset rows=”valor,valor”> Define as linhas num conjunto de frames. Valor
pode ser em pixels, percentagem ou * (o resto
/ proporção).
<frameset cols=”valor,valor” Define as colunas num conjunto de frames.
Valor pode ser em pixels, percentagem ou * (o
resto / proporção).
<frame>
Define uma unica frame. Surge dentro de
<frameset>.
<noframes></noframes>
Área onde é inserido o conteúdo visivel em
browsers que não suportam o uso de frames.
ATRIBUTOS DE UM FRAME
<frame src=”url”> Especifica o documento HTML a ser exibido na
frame.
<frame name=”nome”> Dá um nome à frame de modo a poder ser
'linkada' a partir de outras frames.
<frame scrolling=VALOR>
Define se a frame tem barra de scroll. VALOR
pode ser "yes", "no" ou "auto".
<frame noresize>
Impede o visitante de redimensionar a frame.
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, recomendamosenfaticamente 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>
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:
<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'
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>
<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>
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.
<!-- 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 asseçõ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
<!--> Define um comentário
Formatação de Texto em HTML
A 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
Formatação de texto
Este exemplo demonstra como você pode formatar texto em um documento HTML.
Texto Pré-formatado
Este exemplo demonstra como você pode controlar quabras de linha e espaços com a
tag pre.
Tags de "saída de computador"
Este exemplo demonstra o quão diferentes serão mostradas as tags de "saída de
computador".
Endereço
Este exemplo demonstra como escrever um endereço em um documento HTML.
Abreviaturas e acrônimos
Este exemplo demonstra como manejar uma abreviatura ou um acrônimo.
Direção do texto
Este exemplo demonstra como mudar a direção do texto.
Citações
Este exemplo demonstra como manejar citações longas e curtas.
Texto cancelado ou inserido
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
Entidades de Caractere na HTML
Alguns caracteres como o caractere <, têm um significado especial na HTML. e por
isso não podem ser usados no texto.
Para exibir um sinal de menor do que (<) em HTML, temos que usar uma entidade de
caractere.
Entidades de Caractere
Alguns caracteres têm significado especial na HTML, como o sinal de menor do que
(<) que define o início de uma tag de HTML. Se quisermos que o navegador exiba de
fato estes caracteres devemos inserir entidades de caractere na fonte da HTML.
Uma entidade de caractere tem três partes: um e comercial (&), um nome de entidade
ou um # e um número de entidade, e finalmente um ponto e vírgula (;).
Para exibir um sinal de menor do que em um documento HTML devemos
escrever: < ou <
A vantagem de usar um nome em vez de um número é que o nome é mais fácil de
lembrar. A desvantagem é que nem todos os navegadores suportam os nomes de
entidades mais novos, enquanto que o suporte para números de entidade é muito bom
em quase todos os navegadores.
Observe que as entidades são sensíveis à caixa.
Este exemplo permite que você experimente entidades de caracteres: Entidades de
Caractere
Espaço Não Separável
A entidade de caractere mais comum na HTML é o espaço não separável.
Normalmente a HTML irá truncar os espaços do seu texto. Se você escrever 10
espaços no seu texto a HTML irá remover 9 deles. Para adicionar espçaos ao seu
texto, use a entidade de caractere .
Entidades de Caractere Mais Comuns:
Resultado Descrição Nome da Entidade Número da Entidade
espaço não separável  
< menor do que < <
> maior do que > >
& e comercial & &
" aspas " "
' apóstrofe '
Algumas Outras Entidades de Caractere Comumente Usadas:
Resultado Descrição Nome da Entidade Número da Entidade
¢ cent ¢ ¢
£ libra £ £
¥ yen ¥ ¥
§ parágrafo (em inglês section) § §
© copyright © ©
® marca registrada ® ®
× multiplicação × ×
÷ divisão &division; ÷
Para ver uma lista completa das entidades de caractere da HTML vá para Referência
de Entidades de Caractere.
Vínculos (Links) em HTML
A HTML usa um hipervínculo (hiperlink) para vincular-se a outro documento na Web.
Exemplos
Crie hipervínculos
Este exemplo demonstra como criar vínculos em um documento HTML.
Uma imagem como vínculo
Este exemplo demonstra como usar uma imagem como vínculo.
(Você encontrará mais exemplos na final desta página.)
A Tag Âncora e o Atributo Href
A HTML usa a tag <a> (âncora) para criar um vínculo (link) com outro documento.
Uma âncora pode apontar para qualquer recurso na Web: uma página em HTML, uma
imagem, um arquivo de som, um filme, etc.
Sintaxe para criar uma âncora:
<a href="url">Texto a ser exibido</a>
A tag <a> é usada para criar uma âncora de onde vincular, o atributo href é usado
para onde endereçar o documento, e as palavras entre as tags de abertura e
fechamento da âncora serão exibidas como um hipervínculo.
Esta âncora define um vínculo para as W3Schools:
<a href="http://www.w3schools.com/">Visite as W3Schools!</a>
A linha acima será mostrada assim em um navegador:
Visite as W3Schools!
A Atributo Alvo (Target)
Com o atributo alvo, você pode definir onde o documento vinculado será aberto.
A linha abaixo abrirá o documento em uma nova janela do navegador:
<a href="http://www.w3schools.com/"
target="_blank">Visite as W3Schools!</a>
A Tag Âncora e o Atributo Nome
O atributo nome é usado para criar uma âncora nomeada. Quando usamos âncoras
nomeadas podemos criar vínculos que saltam diretamente para uma seção específica
em uma página, em vez de deixar o usuário rolar [a janela (scroll)] por todo parte para
encontrar o que ele/ela está procurando.
Abaixo está a sintaxede uma âncora nomeada:
<a name="rótulo">Texto a ser exibido</a>
O atributo nome é usado para criar uma âncora nomeada. O nome da âncora pode ser
qualquer texto que você quiser usar.
A linha abaixo define uma âncora nomeada:
<a name="dicas">Seção de Dicas Úteis</a>
Você deve observar que a âncora nomeada não é exibida de maneira especial.
Para vincular diretamente a uma seção "dicas", adicione um sinal de # e o nome da
âncora no final de uma URL, como esta:
<a href="http://www.w3schools.com/html_links.asp#tips">
Saltar para a Seção de Dicas Úteis</a>
Um hipervínculo para a Seção de Dicas Úteis de DENTRO do arquivo "html_links.asp"
seria assim:
<a href="#tips">Saltar para a Seção de Dicas Úteis</a>
Observações Básicas - Dicas Úteis
Sempre adicione uma barra inclinada (? trailing slash) para referenciar subdiretórios.
Se você faz um vínculo assim: href="http://www.w3schools.com/html", você irá gerar
duas requisições para o servidor, porque o servidor irá adicionar uma barra ao
endereço para criar um novo pedido como este:
href="http://www.w3schools.com/html/"
Âncoras nomeadas são geralmente usadas para cirar "sumários" ("table of contents")
no início de um documento grande. A cada capítulo dentro do documento é dado um
nome de âncora, e vínculos para cada uma destas âncoras são colocados no topo do
documento.
Se um navegador não puder encontrar uma âncora nomeada que foi especificada, ele
vai para o topo do documento. Nenhum erro ocorre.
Mais Exemplos
Abre um vínculo em uma nova janela do navegador
Este exemplo demonstra como fazer um vínculo para outra página abrindo uma nova
janela, de modo que o visitante não tenha que deixar o seu sítio da Web.
Vínculo para um local na mesma página
Este exemplo demonstra como usar um vínculo para saltar para outra parte de um
documento.
Livrar-se de uma moldura (frame)
Este exemplo demonstra como livrar-se de uma moldura (frame), se o seu sítio está
travado em uma moldura (frame).
Criar um vínculo de correio (mailto)
Este exemplo demonstra como fazer um vínculo para uma mensagem de correio
(somente irá funcionar de vocÊ tiver o correio instalado).
Criar um vínculo de correio (mailto) 2
Este exemplo demonstra um vínculo de correio (mailto) mais complexo.
Link Tags
Tag Descrição
<a> Define uma âncora
Molduras (Frames) HTML
Com as molduras, você pode exibir mais de uma página Web na mesma janela do
navegador.
Exemplos
Conjunto de Molduras Verticais
Este exemplo demonstra como fazer um conjunto de molduras verticais com três
documentos diferentes.
Conjunto de Molduras Horizontais
Este exemplo demonstra como fazer um conjunto de molduras horizontais com três
documentos diferentes.
Como usar a tag <noframes>
Este exemplo demonstra como usar a tag <noframes>.
(Você pode encontrar mais exemplos no final desta página.)
Molduras (Frames)
Com molduras, você pode exibir mais de um documento HTML na mesma janela do
navegador. Cada documento HTML é chamado de moldura, e cada moldura é
independente das outras.
As desvantagens de usar molduras são:
O desenvolvedor Web deve vigiar mais documentos HTML
É difícil imprimir a página inteira
A Tag de Conjunto de Molduras (Frameset Tag)
A tag <frameset> define como dividir a janela em molduras
Cada conjunto de molduras define um conjunto de linhas ou colunas
Os valores das linhas/colunas indicam a quantidade da área da tela que cada
linha/coluna irá ocupar
A Tag Moldura (Frame)
A tag <frame> define qual documento HTML colocar em cada moldura
No exemplo abaixo temos um conjunto de frames com duas colunas. A primeira
coluna é configurada em 25% da largura da janela do navegador. A segunda coluna é
configurada em 75% da largura da janela do navegador. O documento HTML
"frame_a.htm" é colocado na primeira coluna, e o documento HTML "frame_b.htm" é
colocado na segunda coluna:
<frameset cols="25%,75%">
<frame src="frame_a.htm">
<frame src="frame_b.htm">
</frameset>
Observações Básicas - Dicas Úteis
Se uma moldura tem bordas visíveis, o usuário pode redimensiona-las arrastando a
borda. Para evitar que um usuário faça isso, você pode adicionar noresize="noresize"
à tag <frame>.
Adicione a tag <noframes> para navegadores que não suportam molduras.
Mais Exemplos
Conjunto de Molduras Misto
Este exemplo demonstra como fazer um conjunto de molduras com três documentos,
e como mistura-los em linhas e colunas.
Conjunto de molduras com noresize="noresize"
Este exemplo demonstra o atributo noresize. As molduras são são redimensionáveis.
Mova o mouse sobre as bordas enter as molduras e observe que você não pode
mover as bordas.
Moldura de navegação
Este exemplo demonstra como fazer uma moldura de navegação. A moldura de
navegação contém uma lista de vínculos com a segunda moldura como alvo. O
arquivo chamado "contents.htm" contém três vínculos. Código fonte dos vínculos:
<a href ="frame_a.htm" target ="showframe">Moldura a</a><br />
<a href ="frame_b.htm" target ="showframe">Moldura b</a><br />
<a href ="frame_c.htm" target ="showframe">Moldura c</a>
A segunda moldura irá mostrar os documentos vinculados.
Moldura em série (inline)
Este exemplo demonstra como criar uma moldura inline (uma moldura dentro de uma
página HTML).
Saltar para uma seção específica dentro de uma moldura
Este exemplo demonstra duas molduras. Uma das molduras tem uma fonte para uma
seção específica em um arquivo. A seção específica é identificada com <a
name="C10"> no arquivo "link.htm".
Saltar para uma seção específica com moldura de navegação
Este exemplo demonstra duas molduras. A moldura de navegação (content.htm) à
esquerda contém uma lista de vínculos com a segunda moldura (link.htm) como alvo A
segunda moldura mostra o documento vinculado. Um dos vínculos na moldura de
navegação está vinculado a uma seção específica no arquivo alvo. O código HTML no
arquivo "content.htm" parece com isto: <a href ="link.htm" target
="showframe">Vínculo sem âncora</a><br /><a href ="link.htm#C10" target
="showframe">Vínculo com âncora</a>.
Tags de Molduras
Tag Descrição
<frameset> Define um conjunto de molduras
<frame> Define uma subjanela (uma moldura)
<noframes> Define uma seção noframe para navegadores que não manejam molduras
<iframe> Define uma subjanela (moldura) inline
Tabelas em HTML
Com a HTML você pode criar tabelas.
Exemplos
Tabelas
Este exemplo demonstra como criar tabelas em um documento HTML.
Bordas da Tabela
Este exemplo demonstra diferentes bordas de tabelas.
(Você pode encontrar mais exemplos no final desta página.)
Tabelas
As tabelas são definidas com a tag <table>. Uma tabela é dividida em linhas (com a
tag <tr>), e cada linha é dividida em células de dados (com a tag <td>). As letras td
significam "table data," que é o conteúdo de uma célula de dados. Uma célula de
dados pode conter texto, imagens, listas, parágrafos, formulários, filetes horizontias,
tabelas, etc.
<table border="1">
<tr>
<td>linha 1, célula 1</td>
<td>linha 1, célula 2</td>
</tr>
<tr>
<td>linha 2, célula 1</td>
<td>linha 2, célula 2</td>
</tr>
</table>
Como aparece no navegador:
linha 1, célula 1 linha 1, célula 2
linha 2, célula 1 linha 2, célula 2
As Tabelas e o Atributo Border (Borda)
Se você não especificar um atributo border a tabela será exibida sem qualquer borda.
Às vezes isto pode ser útil, mas geralmente, você irá querer que as bordas sejammostradas.
Para exibir uma tabela com bordas, você usará o atributo border:
<table border="1">
<tr>
<td>linha 1, célula 1</td>
<td>linha 1, célula 2</td>
</tr>
</table>
Cabeçalhos em uma Tabela
Os cabeçalhos em uma tabela são definidos com a tag <th>.
<table border="1">
<tr>
<th>Cabeçalho</th>
<th>Outro Cabeçalho</th>
</tr>
<tr>
<td>linha 1, célula 1</td>
<td>linha 1, célula 2</td>
</tr>
<tr>
<td>linha 2, célula 1</td>
<td>linha 2, célula 2</td>
</tr>
</table>
Como aparece no navegador:
Cabeçalho Outro Cabeçalho
linha 1, célula 1 linha 1, célula 2
linha 2, célula 1 linha 2, célula 2
Células Vazias em uma Tabela
Células sem conteúdo não são bem exibidas em muitos navegadores.
<table border="1">
<tr>
<td>linha 1, célula 1</td>
<td>linha 1, célula 2</td>
</tr>
<tr>
<td>linha 2, célulal 1</td>
<td></td>
</tr>
</table>
Como aparece no navegador:
row 1, cell 1 row 1, cell 2
row 2, cell 1
Observe que as bordas em torno da célula vazia estão faltando.
Para evitar isso, adicione um espaço não separável ( ) às céluas vazias, para
tornar as bordas visíveis:
<table border="1">
<tr>
<td>linha 1, célula 1</td>
<td>linha 1, célulal 2</td>
</tr>
<tr>
<td>linha 2, célula 1</td>
<td> </td>
</tr>
</table>
Como aparece no navegador:
linha 1, célula 1 linha 1, célula 2
linha 2, célula 1
Observações Básicas - Dicas Úteis
Os elementos <thead>,<tbody> e <tfoot> são raramente usado por causa do mau
suporte dos navegadores. Espere mudanças em versões futuras da XHTML. Se você
tem o Internet Explorer 5.0 ou mais recente, você pode ver um exemplo funcional no
tutorial de XML.
Mais Exemplos
Tabela sem bordas
Este exemplo demonstra uma tabela sem bordas.
Cabeçalhos em uma Tabela
Este exemplo demonstra como exibir cabeçalhos de tabelas.
Células Vazias
Este exemplo demonstra como usar " " para manejar células que não têm
conteúdo.
Tabela com título
Este exemplo demonstra uma tabela com um título.
Células que abrangem mais do que uma linha/coluna
Este exemplo demonstra como definir células que abrangem mais de uma linha ou
uma coluna.
Tags dentro de uma tabela
Este exemplo demonstra como exibir elementos dentro de outros elementos.
Enchimento de célula
Este exemplo demonstra como usar enchimento de célula para criar mais espaço em
branco entre o conteúdo da célula e suas bordas.
Espaçamento de célula
Este exemplo demonstra como usar espaçamento de célula para aumentar a distância
entre as células.
Adicionar uma cor de fundo ou uma imagem de fundo a uma tabela
Este exemplo demonstra como adicionar um fundo a uma tabela.
Adicionar uma cor de fundo ou uma imagem de fundo a uma célula de tabela
Este exemplo demonstra como adicionar um fundo a uma ou mais células de tabela.
Alinhar o conteúdo em uma célula de tabela
Este exemplo demonstra como usar o atributo "align" para alinhar o conteúdo de
células, par criar uma tabela mais "agradável".
O atributo frame (moldura)
Este exemplo demonstra como usar o atributo "frame" para controlar as bordas em
torno da tabela.
Tags de Tabela
Tag Descrição
<table> Define uma tabela
<th> Define um cabeçalho de tabela
<tr> Define uma linha de tabela
<td> Define uma célula de tabela
<caption> Define um título de tabela
<colgroup> Define um grupo de colunas de tabela
<col> Define os valores de atributo para uma ou mais colunas em uma tabela
<thead> Define um cabeçalho de tabela
<tbody> Define o corpo de uma tabela
<tfoot> Defines o rodapé (footer) de uma tabela
Listas em HTML
A HTML suporta listas ordenadas, não ordenadas e de definições.
Exemplos
Uma lista não ordenada
Este exemplo demonstra uma lçista não ordenada.
Uma lista ordenada
Este exemplo demonstra uma lista ordenada.
(Você pode encontrar mais exemplos no final desta página.)
Listas Não Ordenadas
Uma lista não ordenada é uma lista de itens. As listas de itens são marcadas com
bullets (tipicamente pequenos círculos pretos).
Uma lista não ordenada começa com a tag <ul>. Cada item da lista começa com a tag
<li>.
<ul>
<li>Café</li>
<li>Leite</li>
</ul>
Aqui está como aparece em um navegador:
Café
Leite
Dentro de um item de uma lista você pode colocar parágrafos, quebras de linha,
imagens, vínculos, outras listas, etc.
Listas ordenadas
Uma lista ordenada é também uma lista de itens. As listas de itens são marcadas com
números.
Uma lista ordenada começa com a tag <ol>. Cada item da lista começa com a tag <li>.
<ol>
<li>Café</li>
<li>Leite</li>
</ol>
Aqui está como aparece em um navagador:
1. Café
2. Leite
Dentro de um item de uma lista você pode colocar parágrafos, quebras de linha,
imagens, vínculos, outras listas, etc.
Lista de Definições
Uma lista de definições não é uma lista de itens. Esta é uma lista de termos e
explicações dos termos.
Uma lista de definições começa com a tag <dl>. Cada termo da lista de definições
começa com a tag <dt>. Cada definição da lista de definições começa com a tag <dd>.
<dl>
<dt>Café</dt>
<dd>Bebida quente preta</dd>
<dt>Leite</dt>
<dd>Bebida fria branca</dd>
</dl>
Aqui está como aparece em um navegador:
Café
Bebida quente preta
Leite
Bebida fria branca
Dentro de uma definição de lista de definições você pode colocar parágrafo, quebras
de linha, imagens, vínculos, outras listas, etc.
Mais Exemplos
Diferentes tipos de listas ordenadas
Este exemplo demonstra diferentes tipos de listas ordenadas.
Diferentes tipos de listas não ordenadas
Este exemplo demonstra diferentes tipos de listas não ordenadas.
Listas aninhadas
Este exemplo demonstra como você pode aninhar listas.
Listas aninhadas 2
Este exemplo demonstra uma lista aninhada mais complicada.
Lista de definições
Este exemplo demonstra uma lista de definições.
Tags de Listas
Tag Descrição
<ol> Define uma lista ordenada
<ul> Define uma lista não ordenada
<li> Define um item de lista
<dl> Define uma lista de definições
<dt>< Define um termo de definição
<dd> Define uma descrição de definição
<dir> Desaprovada. Use <ul> em vez
<menu> Desaprovada. Use <ul> em vez
Formulários e Entradas (inputs) em HTML
Os Formulários em HTML são usados para selecionar diferentes tipos de entradas do
usuário.
Exemplos
Campos de texto
Este exemplo demonstra como criar campos de texto em uma página HTML. Um
usuário pode escrever o texto em um campo de texto.
Campos de senha
Este exemplo demonstra como criar um campo de senha em uma página HTML.
(Você encontrará mais exemplos no final desta página.)
Formulários
Um formulário é uma área que pode conter elementos de formulário.
Os elementos de formulário são elementos que permitem o usuário entrar informação
(como campos de texto, campos de área de texto, menus drop-down, botões radiais,
caixas de seleção, etc.) em um formulário.
Um formulário é definido pela tag <form>.
<form>
<input>
<input>
</form>
Entrada (Input)
A tag de formulário mais usada é a tag <input>. O tipo de input é especificado com o
atributo type (tipo). Os tipos de input mais cumumente usados são explicados abaixo.
Campos de Texto
Os campos de texto são usados quando você quer que o usuário digite letras,
números, etc. em umformulário.
<form>
Primeiro nome:
<input type="text" name="firstname">
<br>
Último nome:
<input type="text" name="lastname">
</form>
Como aparece no navegador:
Primeiro nome:
Último nome:
Observe que o formulário propriamente não está visivel. Também observe que em
muitos navegadores, o comprimento do campo de texto é de 20 caracteres por padrão
(default).
Botões Radiais
Botões Radiais são usados quando você quer que o usuário selecione uma entre uma
quantidade limitada de escolhas.
<form>
<input type="radio" name="sex" value="male"> Masculino
<br>
<input type="radio" name="sex" value="female"> Feminino
</form>
Como aparece no navegador:
Masculino
Feminino
Observe que somente uma opção pode ser escolhida.
Caixas de Seleção
As Caixas de Seleção são usadas quando você quer que o usuário selecione uma ou
mais opções de uma quantidade limitada de escolhas.
<form>
<input type="checkbox" name="bike">
Eu tenho uma bicicleta
<br>
<input type="checkbox" name="car">
Eu tenho um carro
</form>
Como aparece no navegador:
Eu tenho uma bicicleta
Eu tenho um carro
O Atributo Ação do Formulário (Form's Action) e o Botão Enviar (Submit)
Quando o usuário clica no botão "Enviar", o conteúdo do formulário é enviado para
outro arquivo. O atributo de ação do formulário define o nome do arquivo para o qual
enviar o conteúdo. O arquivo definido no atributo action geralmente faz algo com a
entrada recebida.
<form name="input" action="html_form_action.asp"
method="get">
Nome do Usuário:
<input type="text" name="user">
<input type="submit" value="Enviar">
</form>
Como aparece no navegador:
Nome do Usuário: Enviar
Se você digitar alguns caracteres no campo de texto acima, e clicar no botão Enviar",
você irá enviar a sua entrada para a página chamada "html_form_action.asp". Esta
página irá mostrar-lhe a entrada recebida.
Mais Exemplos
Caixas de Seleção (Checkboxes)
Este exemplo demonstra como criar caixas de seleção numa página HTML. Um
usuário pode selecionar ou deselecionar uma caixa de seleção.
Botões Radiais (Radiobuttons)
Este exemplo demonstra como criar botões radiais numa página HTML.
Caixa drop down Simples
Este exemplo demonstra como criar uma caixa drop down simples numa página
HTML. A caixa drop-down é uma lista selecionável.
Outra caixa drop down
Este exemplo demonstra como criar uma caixa drop down simples com um valor pré-
selecionado.
Área de Texto
Este exemplo demonstra como criar uma área de texto (um controle de entrada de
texto multi-linhas). Um usuário pode escrever texto na área de texto. Numa área de
texto você pode escrever uma quantidade ilimitada de caracteres.
Criar um botão
Este exemplo demonstra com criar um botão. No botão você pode definir o seu próprio
texto.
Conjunto de campo em torno dos dados
Este exemplo demonstra como desenhar uma borda com um título em torno dos seus
dados.
Exemplos de Formulários
Formulário com campos de entrada e um botão de envio
Este exemplo demonstra como adicionar um formulário em um apágina. O formulário
contém dois campos de entrada e um botão de envio.
Formulário com caixas de seleção
Este formulário contém duas caixas de seleção, e um botão de envio.
Formulário com botões radiais
Este formulário contém dois bot~es radiais, e um botão de envio.
Enviar e-mail de um formulário
Este exemplo demonstra como enviar um e-mail de um formulário.
Tags de Formulário
Tag Descrição
<form> Define um formulário para entradas do usuário
<input> Define um campo de entrada
<textarea> Define uma área de texto (um controle de entrada de texto multi-linhas)
<label> Define um rótulo para um controle
<fieldset> Define um conjunto de campos
<legend> Define um título para um conjunto de campos
<select> Define uma lista selecionável (uma caixa drop-down)
<optgroup> Define um grupo de opção
<option> Define uma opção em uma caixa drop-down
<button> Define um botão para pressionar
<isindex> Desaprovada. Use <input> em vez
Imagens em HTML
Com a HTML você pode exibir imagens em um documento.
Exemplos
Inserir imagens
Este exemplo demonstra como exibir imagens na suaa página Web.
Inserir imagens de diferentes locais
Este exemplo demonstra como exibir imagens de um outro diretório ou outro servidor
na sua página Web.
(Você pode encontrar mais exemplos no final desta página.)
A Tag Image e o Atributo Src
Na HTML, as imagns são definidas com a tag <img>
A tag <img> é vazia, o que significa que ela somente atributos e não tem tag de
fechamento
Para exibir uma imagen em uma página, você necessita usar o atributo src. Src
significa "source" [fonte]. O valor do atributo src é a URL da imagem que você quer
exibir na sua página.
A sintaxe para definir uma imagem é:
<img src="url">
O URL aponta para o local onde a imagem está armazenada. Uma imagem
denominada "boat.gif" localizada no diretório "images" em "www.w3schools.com" tem
o URL: http://www.w3schools.com/images/boat.gif.
O navegador põe a imagem onde a tag image osorre no documento. Se você coloca
uma tag image enter dois parágrafos, o navegador mostra o primeiro parágrafo, depois
a imagem, e então o segundo parágrafo.
O Atributo Alt
O atributo alt é usado para definir um "texto alternativo" para uma imagem. O valor do
atributo alt é um texto definido pelo autor:
<img src="boat.gif" alt="Big Boat">
O atributo "alt" diz ao leitor o que ele ou ela está perdendo numa página se o
navegador não pode carregar imagens. O navagador irá então exibir o texto alternativo
em vez da imagem. É uma boa prática incluir o atributo "alt" para cada imagem numa
página, para melhorar a exibição e a utilidade do seu documento para pessoas que
têm navegadores somente de texto.
Observações Básicas - Dicas Úteis
Se um arquivo HTML contém dez imagens - onze arquivos são necessários para exibir
a página direito. Carregar imagens leva tempo, assim meu melhor conselho é: Use
iamgens com cuidado.
Mais Exemplos
Imagem de fundo
Este exemplo demonstra como adicionar uma imagem de fundo em uma página
HTML.
Alinhar imagens
Este exemplo semonstra como alinhar uma imagem dentro do texto.
Deixe a imagem flutuar
Este exemplo demonstra como deixar uma imagem flutuar à esquerda ou à direita de
um parágrafo.
Ajustar imagens para diferentes tamanhos
Este exemplo demonstra como ajustar imagens para diferentes tamanhos.
Exibir um texto alternativo para uma imagem
Este exemplo demonstra como exibir um texto alternativo para uma imagem. O
atributo "alt" diz para o leitor o que ele ou ela está perdendo numa página se o
navegador não pode carregar imagens. É uma boa prática incluir o atributo "alt" para
cada imagem numa página.
Fazer um hipervínculo com uma imagem
Este exemplo demonstra como usar uma imagem como vínculo.
Criar uma mapa de imagem
Este exemplo demonstra como criar uma mapa de imagem, com regiões clicáveis.
Cada uma das regiões é um hipervínculo.
Transformar uma imagem em um mapa de imagem
Este exemplo demonstra como trnsformar uma imagem em um mapa de imagem.
Você verá que se mover o mouse sobre a imagem, as coordenadas serão mostradas
na barra de estatus.
Tags de Imagem
Tag Descrição
<img> Define uma imagem
<map> Definesum mapa de imagem
<area> Define uma área dentro de um mapa de imagemPlanos de Fundo em HTML
Um bom plano de fundo pode fazer um sítio Web parecer realmente bonito.
Exemplos
Boa cor de fundo e de texto
Um exemplo de uma cor de fundo e uma cor de texto que que tornam a página fácil de
ler
Má cor de fundo e de texto
Um exemplo de uma cor de fundo e uma cor de texto que tornam a página difícil de ler
(Você pode encontrar mias exemlpos no final desta página.)
Planos de Fundo
A tag <body> tem dois atributos onde você pode especificar planos de fundo. O plano
de fundo pode ser uma cor ou uma imagem.
Bgcolor
O atributo bgcolor configura o plano de fundo em uma cor. O valor deste atributo pode
ser um número hexadecimal, um valor RGB, ou um nome de cor.
<body bgcolor="#000000">
<body bgcolor="rgb(0,0,0)">
<body bgcolor="black">
As linhas acima todas configuram a cor do plano de fundo para preto
Background
O atributo background configura o plano de fundo para uma imagem. O valor do
atributo é a URL da imagem que você quer usar. Se a imagem é menor do que a
janela do navegador, a imagem será repetida até preencher a janela inteira do
navegador.
<body background="clouds.gif">
<body background="http://www.w3schools.com/clouds.gif">
O URL pode ser relativo (como na primeira linha acima) ou absoluto (como na
segunda linha acima).
Observe: Se você quer usar uma imagem de plano de fundo, você deve ter em mente:
A imagem de fundo aumentará o tempo de carga? Dica: Arquivos de imagem
devem ter no máximo 10k
A imagem de fundo parecerá boa com outras imagens na página?
A imagem de fundo parecerá boa com as cores do texto na página?
A imagem de fundo parecerá boa quando ela for repetida na página?
A imagem de fundo afasta o foco do texto?
Observações Básicas - Dicas Úteis
Os atributos bgcolor, background, e text na tag <body> estão desaprovados nas
versões mais recentes da HTML (HTML 4 e XHTML). O World Wide Web Consortium
(W3C) removeu estes atributos de suas recomendações. Nas versões futuras da
HTML, as folhas de estilo (CSS) serão usadas para definir o layout e a exibir as
propriedades dos elementos da HTML.
Poucos dos sítios Web mais visitados usam imagens de fundo.
As cores de fundo mais usadas são: branco, preto e cinza.
Mais Exemplos
Boa imagem de fundo
Um exemplo de uma imagem de fundo e uma cor de texto que tornamo texto na
página fácil de ler
Boa imagem de fundo 2
Um exemplo de uma imagem de fundo e uma cor de texto que tornam o texto na
página fácil de ler
Má imagem de fundo
Um exemplo de uma imagem de fundo e uma cor de texto que tornam o texto na
página muito difícil de ler.
Layout em HTML
Em qualquer lugar na Web você encontrará páginas que estão formatadas como
páginas de jornal usando colunas HTML.
Layout em HTML - Usando tabelas
Uma prática muito comum com a HTML,
é usar tabelas HTML para formatar o
layout de uma página HTML.
Uma parte desta página está formatada
com duas colunas, como uma página de
jornal.
Conforme você pode ver nesta página, há
uma coluna esquerda e uma coluna
direita.
Este texto está exibido na coluna
esquerda.
Uma <table> HTML é usada para dividir
uma parte desta página Web em duas
colunas.
O truque é usar uma tabela sem bordas,
e talvez um pouco de enchimento de
célula extra.
Não importa quanto texto você adiciona a
esta página, ele irá ficar dentro das
bordas de suas colunas.
Mesmo Layout - Cor Adicionada
Uma prática muito comum com a HTML,
é usar tabelas HTML para formatar o
layout de uma página HTML.
Uma parte desta página está formatada
com duas colunas, como uma página de
jornal.
Conforme você pode ver nesta página, há
uma coluna esquerda e uma coluna
direita.
Uma <table> HTML é usada para dividir
uma parte desta página Web em duas
colunas.
Este texto está exibido na coluna direita.
O truque é usar uma tabela sem bordas,
e talvez um pouco de enchimento de
célula extra.
Não importa quanto texto você adiciona a
esta página, ele irá ficar dentro das
bordas de suas colunas.
Exemplos
Dividir uma parte de uma página HTML em colunas de tabela é muito fácil de fazer.
Para deixa-lo experimentar, colocamos este exemplo simples.
Fontes em HTML
A tag <font> na HTML está desaprovada. Ela será supostamente removida numa
futura versão da HTML.
Mesmo que muita gente esteja usando-a, você deve tentar evita-la, e usar estilos ao
invés.
A tag <font> na HTML
Com um código HTML como este, você pode especificar tanto o tamanho quanto o
tipo da saída no navagador:
<p>
<font size="2" face="Verdana">
This is a paragraph.
</font>
</p>
<p>
<font size="3" face="Times">
This is another paragraph.
</font>
</p>
Tente você mesmo
Atributos de Fonte
Atributo Exemplo Propósito
size="number" size="2" Define o tamanho da fonte
size="+number" size="+1" Aumenta o tamanho da fonte
size="-number" size="-1" Decrementa o tamanho da fonte
face="face-name" face="Times" Define o nome da fonte
color="color-value" color="#eeff00" Define a cor da fonte
color="color-name" color="red" Define a cor da fonte
A tag <font> NÃO deve ser usada
A tag <font> está desaprovada nas últimas versões da HTML (HTML 4 e XHTML).
O World Wide Web Consortium (W3C) removeu a tag <font> de suas recomendações.
Em versões futuras da HTML, folhas de estilo (CSS) serão usadas para definir o layout
e exibir as propriedades dos elementos HTML.
O Jeito Certo de Fazer - Com Estilos
Configurar a fonte do texto
Este exemplo domonstra como configurar a fonte de um texto.
Configurar o tamanho da fonte do texto
Este exemplo demonstra como configurar o tamanho da fonte de um texto.
Configurar a cor da fonte do texto
Este exemplo demonstra como configurar a cor da fonte de um texto.
Configurar a fonte, o tamanho da fonte, e a cor da fonte do texto
Este exemplo demonstra como configurar a fonte, o tamanho da fonte, e a cor da fonte
de um texto.
Onde Aprender Mais Sobre Folhas de Estilo?
Primeiro: Termine os últimos capítulos do tutorial de HTML!!! Nos próximos capítulos
explicaremos porque algumas tags, como a <font>, serão removidas das
recomendações da HTML, e como inserir uma folha de estilos num documento HTML.
Para aprender mais sobre folhas de estilo: Estudo o Tutorial de CSS (em inglês).
Por que usar HTML 4.0?
A HTML 3.2 Estava Muito Errada!
A HTML original nunca pretendeu conter tags para formatar um documento. As tags
HTML pretendiam definir o conteúdo dos documentos, como:
<p>Este é um parágrafo</p>
<ul>Esta é uma lista não ordenada</ul>.
Quando as tags como <font> e atributos de cor foram adicionados à especificação
HTML 3.2, começou um pesadelo dos desenvolvedores. O desenvolvimento de
grandes sítios Web onde informações sobre fontes e cores tinham que ser adicionadas
a cada página Web, tornou-se um processo longo, caro e e injustificadamente
doloroso.
O que é tão bom na HTML 4.0 ?
Com a HTML 4.0 toda a formatação pode ser transferida do documento HTML para
uma folha de estilo separada.
Porque a HTML 4.0 separa a apresentação do documento de sua estrutura, temos o
que sempre quisemos: total controle do layout de apresentação sem bagunçar o
conteúdo do documento.
O que você deve fazer sobre isso?
Pare de usar atributos de estilo de apresentação dentro das suas tags de HTML.
Nossa completa Referênciade Tag HTML indica as tags e atributos desaprovados na
HTML 4.0. Ela também inclue muitos exemplos com o código fonte completo.
Também dê uma olhada na Seção CSS e começe uma nova vida de desenvolvedor.
Prepare-se para a XHTML
A XHTML é a próxima geração da HTML. Você deve começar a se preparar para ela
agora. A coisa mais importante que você pode fazer é começar a escrever em HTML
4.01 válida. Também começe a escrever suas tags em letras minúsculas. Sempre
feche seus elementos de tag. Nunca termine um parágrafo sem </p>.
Observação: A HTML 4.01 oficial recomenda o uso de tags em letras minúsculas.
Valide seus arquivos HTML como HTML 4.01
Um documento HTML é validado em relação a uma Document Type Definition (DTD)
[Definição de Tipo de Documento]. Antes que um arquivo HTML possa ser
apropriadamente validado, uma DTD correta deve ser adicionada como primeira linha
do arquivo.
A DTD Strict da HTML 4.01 inclue elementos e atributos que não foram desaprovados
ou que não aparecem em conjuntos de molduras (framsets):
<!DOCTYPE HTML PUBLIC
"-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
A DTD Transitional da HTML 4.01 inclue toda a DTD Strict mais os elementos e oa
atributos desaprovados:
<!DOCTYPE HTML PUBLIC
"-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
A DTD Frameset da HTML 4.01 inclue toda a DTD Transitional mais as molduras
(frames) também:
<!DOCTYPE HTML PUBLIC
"-//W3C//DTD HTML 4.01 Frameset//EN"
"http://www.w3.org/TR/html4/frameset.dtd">
Test Your HTML With the W3C Validator
Entre o endereço da sua página na caixa anbaixo
como http://www.w3schools.com/
Validar a pagina
Estilos em HTML
Com a HTML 4.0 toda a formatação pode ser transferida do documento HTML para
uma folha de estilo separada.
Exemplos
Estilos em HTML
Este exemplo demonstra como formatar um documento HTML com a informação de
estilo adicionada à seção <head>.
Vínculo não sublinhado
Este exemplo demonstra como fazer um vínculo não sublinhado, usando um atributo
de estilo.
Vínculo para uma folha de estilo externa
Este exemplo demonstra como usar a tag <link> para vincular com uma folha de estilo
externa.
Como Usar Estilos
Quando um navegador lê uma folha de estilo, ele formata o documento de acordo com
ela. Há três maneiras de inserir uma folha de estilo:
Folha de Estilo Externa
Uma folha de estilo externa é ideal quando o estilo é aplicado em muitas páginas. Com
uma folha de estilo externa, você pode mudar a aparência de um sítio Web inteiro pela
mudança de um arquivo. Cada página deve vincular-se à folha de estilo usando a tag
<link>. A tag <link> vai dentro da seção head.
<head>
<link rel="stylesheet" type="text/css"
href="meuestilo.css">
</head>
Folha de Estilo Interna
Uma folha de estilo interna deve ser usada quando um documento específico tem um
estilo único. Você define estilos internos na seção head com a tag <style>.
<head>
<style type="text/css">
body {background-color: red}
p {margin-left: 20px}
</style>
</head>
Estilos Local (inline)
Um estilo local (inline) deve ser usado quando um estilo único deve ser aplicado a uma
única ocorrência de um elemento.
Para usar estilos locais (inline) você usa o atributo de estilo na tag relevante. O
atributo de estilo pode conter qualquer propriedade CSS. O exemplo mostra como
mudar a cor e a margem esquerda de um parágrafo:
<p style="color: red; margin-left: 20px">
Este é um parágrafo
</p>
Para aprender mais sobre estilos, visite o tutorial de CSS (em inglês).
Tags de Estilo
Tag Descrição
<style> Define uma definição de estilo
<link> Define uma referência a um recurso
<div> Define uma seção num documento
<span> Define uma seção num documento
<font> Depsaprovada. Use estilos em vez
<basefont> Desaprovada. Use estilos em vez
<center> Desaprovada. Use estilos em vez
Cabeçalho (Head) HTML
Exemplos
O título de um documento
A informação de título dentro de um elemento head não é exibida na janela do
navegador.
Um alvo (target) para todos os vínculos
Este exemplo demonstra como usar a tag base para fazer todos os vínculos em uma
página abrirem em uma nova janela.
O Elemento Head (Cabeçalho)
O elemento head contém informação geral, também chamado meta-informação, sobre
um documento. Meta significa "informação sobre".
Você pode dizer que meta-dados significa informação sobre dados, ou que meta-
informação significa informação sobre informação.
Informação Dentro do Elemento Head
Os elementos dentro do elemento head não deveriam ser exibidos por uma
nabegador.
De acordo com o padrão da HTML, somente umas poucas tags são legais dentro da
seção head. São elas: <base>, <link>, <meta>, <title>, <style>, e <script>.
Veja a seguinte construção ilegal:
<head>
<p>Este é um texto</p>
</head>
Neste caso o navegador tem duas opções:
Mostrar o texto porque ele está dentro de um elemento parágrafo
Ocultar o texto porque ele está dentro do elemento head
Se você colocar um elemento HTML como <h1> ou <p> dentro de um elemento head
como este, muitos navegadores irão exibi-lo, mesmo sendo ilegal.
Deveriam os navegadores perdoa-lo por erros como este? Pensamos que não. Outros
que sim.
Tags de Cabeçalho (Head)
Tag Descrição
<head> Define informação sobre o documento
<title> Define o título do documento
<base> Define o URL base para todos os vínculos numa página
<link> Define a referência do recurso
<meta> Define meta informação
Tag Descrição
<!DOCTYPE> Define o tipo do documento. Esta tag vai antes da tag de início
<html>.
Meta em HTML
Exemplos
Descrição do documento
A informação dentro de um elemento meta descreve o documento.
Palavras-chave de documento
A informação dentro de um elemento meta descreve as palavras-chave do documento.
Redirecionar um usuário
Este exemplo demonstra como redirecionar um usuário se o endereço do seu sítio
mudou.
O Elemento Meta
Conforme explicamos nos cap[itulos anteriores, o elemento head contém informação
geral (meta-informação) sobre um documento.
A HTML também inclue um elemento meta que vai dentro do elemento head. O
propósito do elemento meta é prover meta-informação sobre o documento.
Muito freqüentemente o elemento meta é usado para prover informação que é
relevante para os navegadores ou para as ferramentas de busca (search engines)
como a descrição do conteúdo do seu documento.
observação: O W3C estabelece que "Alguns agentes de usuários suportam o uso de
META para atualizar (refresh) a página atual após alguns segundos, com a opção de
substitui-la por um URI diferente. Os autores não devem fazer uso desta técnica para
enviar os usuários para páginas diferentes, pois isso torna a página incessível para
alguns usuários. Em vez disso, o envio de página automático deve ser feito usando
redirecionamento no lado do servidor."
emhttp://www.w3.org/TR/html4/struct/global.html#adef-http-equiv.
Palavras-chave para Ferramentas de Busca (Search Engines)
Algumas ferramentas de busca na WWW usarão os atributos name e content da tag
meta para indexar suas páginas.
Este elemento meta define uma descrição da sua página:<meta name="description" content="Tutoriais Web livres sobre HTML, CSS, XML, e
XHTML">
Este elemento meta define palavras-chave para a sua página:
<meta name="keywords" content="HTML, DHTML, CSS, XML, XHTML, JavaScript,
VBScript">
A intenção dos atributos name e content é descrever o conteúdo de uma página.
Entertanto, como muitos webmasters usam tags meta para spamming, como repetir
palavras-chave para dar às páginas uma pontuação maior, algumas ferramentas de
busca pararam inteiramnete de usa-las.
Você pode ler mais sobre ferramentas de busca no Tutorial de Construção para a Web
(em inglês).
Atributos Meta Desconhecidos
Às vezes você verá atributos meta que são desconhecidos por você como este:
<meta name="security" content="low">
Então você tem que aceitar que isto é algo único do sítio ou do autor do sítio, e que
não tem provavelmente relevância para você.
Você pode ver uma lista completa dos atributos do elemento meta em
Referência Completa de Tags da HTML 4.01.
Localizadores de Recursos Uniformes (Uniform
Resource Locators) na HTML
Vínculos HTML
Quando você clica em um vínculo num documento em HTML como este: Última
Página, uma tag subjacente <a> aponta para um local (um endereço) na Web com
uma valor de atributo href como este: <a href="lastpage.htm">Última Página</a>.
O vínculo Última Página no exemplo é um vínculo relativo ao sítio Web em que você
está navegando, e o seu navegador irá construir um endereço Web completo
comohttp://www.w3schools.com/html/lastpage.htm para acessar a página.
Localizadores de Recursos Uniformes (Uniform Resource Locators, URL)
Algo chamado de Uniform Resource Locator (URL) é usado para endereçar um
documento (ou outros dados) na World Wide Web. Um endereço Web completo como
este:http://www.w3schools.com/html/lastpage.htm segue estas regras de sintaxe:
scheme://host.domain:port/path/filename
O scheme (esquema) define o tipo de serviço da internet. O tipo mais comum é http.
O domain (domínio) define o domain name (nome do domínio) na Internet, como
w3schools.com.
O host (hospedeiro) define o hospedeiro do domínio. Se omitido, o padão para http
é www.
A :port (porta) define o port number (número da porta) no hospedeiro. O número da
porta é normalmente omitido. O úmero de porta padrão para http é 80.
O path (caminho) definie um path (caminho) (um subdiretório) no servidor. Se o
caminho é omitido, o recurso (o documento) deve estar localizado no diretório raiz do
sítio Web.
O filename (nome de arquivo) define o nome do documento. O nome de arquivo
padrão pode ser default.asp, ou index.html ou outro dependendo das configurações do
servidor Web.
Esquemas de URL
Alguns exemplos dos esquemas mais comuns pode ser encontrado abaixo:
Esquemas Acessa
file um arquivo no seu PC local
ftp um arquivo num servidor FTP
http um arquivo num Servidor da World Wide Web
gopher
um arquivo num servidor Gopher
news um grupo de notícias Usenet
telnet uma conexão Telnet
WAIS um arquivo num ervidor WAIS
Acessar um Grupo de notícias (Newsgroup)
O seguinte código HTML:
<a href="news:alt.html">Grupo de Notícias de HTML</a>
cria um vínculo para um grupo de notícias como este Grupo de notícias de HTML.
Descarregar (Downloading) com FTP
O seguinte código HTML:
<a href="ftp://www.w3schools.com/ftp/winzip.exe">Download WinZip</a>
cria um vínculo para descarregar um arquivo como este: Download WinZip.
(O vínculo não funciona. Não tente. Ele é apenas um exemplo. A W3Schools não tem
realmente um diretório ftp.)
Vincular com o seu sistema de Correio (Mail system)
O seguinte código HTML:
<a href="mailto:someone@w3schools.com">someone@w3schools.com</a>
cria um vínculo para o seu próprio sistema de correio como este:
someone@w3schools.com
Scripts (Roteiros) HTML
Exemplos
Inserir um script
Este exemplo demonstra como inserir um script no seu documento HTML.
Trabalhar com navegadores que não suportam scripts
Este exemplo demonstra como manejar navegadores que não suportam scripting.
Inserir um Script numa Página HTML
Um script em HTML é definido com a tag <script>. Observe que você terá que usar o
atributo type para especificar a linguagem descripting.
<html>
<head>
</head>
<body>
<script type="text/javascript">
document.write("Oi Mundo!")
</script>
</body>
</html>
O script acima produzirá esta saída:
Oi Mundo!
Observação: Para aprender mais sobre scripting em HTML, visite a JavaScript School
(em inglês).
Como Manejar Navegadores Antigos
Um navegador que não reconhece a tag <script>, irá exibir o conteúdo da tag <script>
como texto na página. Para evitar que o navegador faça isso, você deverá esconder o
script em tags de comentário. Um navegador antigo (que não reconheça a tag
<script>) irá ignorar o comentário e não irá escrever o conteúdo da tag na página, ao
passo que um navegador mais atual irá entender que o script deve ser executado,
mesmo que esteja circundado por tags de comentário.
Example
JavaScript:
<script type="text/javascript">
<!--
document.write("Oi Mundo!")
//-->
</script>
VBScript:
<script type="text/vbscript">
<!--
document.write("Oi Mundo!")
'-->
</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 type="text/javascript">
<!--
document.write("Oi Mundo!")
//-->
</script>
<noscript>Seu navegador não suporta JavaScript!</noscript>
VBScript:
<script type="text/vbscript">
<!--
document.write("Oi Mundo!")
'-->
</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!!Mais conteúdos dessa disciplina
(31)994408961- RESOLVIDO-Aula Pratica Programacao para internet em front-end- Prova de Construção WEB
- Resumo HTML5 e CSS3
- Classificação de Usuários Web
- Ava_I_EstudoTransversal Propriedade Intelectual
- Avaliação - Unidade 1 - Programação Back End e Front End
- Avaliação disciplina on-line Estudo Contemporâneo e Transversal Propriedade Intelectual Leitura de Imagens Gráficos e Mapas
- React Native: Navegação e Animações
- Associe corretamente as propriedades de estilo em CSS com suas descrições: Considere as seguintes propriedades de estilo em CSS: 1. background-c...
- No que se refere a enquadramentos, Detalhe (Cut Up) ou Extreme Close Up (ECU) mostra: Detalhes de uma região da face ou de um objeto. Detalhes dos pés
- De acordo com as especificações técnicas, por meio da retificação, a rugosidade mínima que conseguimos alcançar é Rt: 2,5µ. Na maioria das vezes, para
- Assinale a alternativa que exemplifica uma atração turística do Rio de Janeiro: a ) HTML image 10 b ) HTML image 11 c ) HTML image 12 d ) HTML image 1
- A linguagem HTML é composta por diversas tags que definem diferentes componentes como tabelas, campos de formulário e imagens. Algumas das tags de ...
- Referente à Informatização do Processo Judicial, podemos afirmar que: Documento Anônimo: Relaciona-se a um documento que possui a indicação do nome de
- Referente à Informatização do Processo Judicial, podemos afirmar que: Documento Anônimo: Relaciona-se a um documento que possui a indicação do nome de
- COLOQUEI 03 SOQUETES DE LAMPADA NA MESMA LINHA DE FIAÇÃO, SOMENTE A ULTIMA LIGA... O QUE PODE SER?
- Sobre a história da Exclusão no mundo, leia as afirmativas abaixo e assinale a alternativa correta: - Antes e durante a Idade Média a exclusão seguida
- Resolva a equação para x e assinale a alternativa com a resposta correta: 2x2−1=1 Questão 13Escolha uma opção: a. x=0 b. x=−1 c. x=±2 d. x=1 e. x=±1
- 20. Segundo as normas que regulamentam os procedimentos de trâmites processuais no âmbito da CLT, analise as sentenças a seguir e, em seguida, assinal
- O desenvolvimento de APIs RESTful com FastAPI, é comum que OS analistas precisem criar rotas que aceitem parâmetros dinâmicos. Esses parâmetros são es
- Atividades como as brincadeiras, além de construírem a corporeidade na criança, desenvolvem os aspectos inter-relacionais e também auxiliam na solu...
- Interpretação_Clínica_de_Exames_Laboratoriais_Vol I
- MODULO B de 2024 - Logica de Programacao e Algoritmos