tabela tag html

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

Upload: pedrogavi

Post on 24-Nov-2015

47 views

Category:

Documents


3 download

TRANSCRIPT

  • TAGS BASICOS

    Inicia/termina um documento em HTML.

    Define a rea de cabealho, com elementos no visualizveis na pgina.

    Define a rea visvel do documento.

    CABEALHO

    Coloca o nome da pgina na barra de ttulo da janela.

    ATRIBUTOS DO CORPO

    Cor de fundo.

    Cor de texto.

    Cor das links.

    Cor das links previamente visitadas.

  • GRAFISMO

    Insere uma imagem.

    Alinha uma imagem em relao ao resto do texto.

    Define a borda da imagem.

    Insere uma linha horizontal.

    TABELAS

    Cria uma tabela.

    Linha de uma tabela

    Clula individual numa linha.

    ATRIBUTO DA TABELA

    Borda volta de cada clula.

    Espao entre as clulas.

    Margem interior das clulas.

    Largura da tabela - em pixels ou percentagem

    or Alinhamento horizontal do contedo das clulas.quot;left", "center" ou "right")

    or Alinhamento vertical do contedo das clulas.("top", "middle" ou "bottom")

    Numero de colunas 'percorridas' por uma clula.

    Numero de linhas 'percorridas' por uma clula.

    FRAMES

    Define o conjunto de frames. Surge antes de num documento com frames.

    Define as linhas num conjunto de frames. Valor pode ser em pixels, percentagem ou * (o resto / proporo).

  • 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 padro de comunicao chamado HTTP.

    Como funciona a WWW?

    A informao na Web armazenada em documentos chamados pginas Web.

    As pginas Web so arquivos armazenados em computadores

    chamados servidores Web.

    Os computadores que lem pginas Web so chamados clientes Web.

    Clientes Web vem as pginas com um programa chamado navegador Web.

    Navegadores populares so Internet Explorer e Netscape Navigator.

    Como o navegador busca as pginas?

    Um navegador procura uma pgina Web de um servidor atravs de uma

    requisio.

    Uma requisio um padro de requisio HTTP contendo um endereo de

    uma pgina.

    Um endereo de pgina assemelha-se a

    isto:http://www.algumacoisa.com/nomepagina.htm.

    Como o navegador mostra as pginas?

    Todas as pginas Web contm instrues de mostra

    O navegador mostra a pgina lendo estas instrues.

    As instrues de mostra mais comuns so chamadas marcaes (tags) HTML.

    As marcaes HTML assemelhan-se a isto Isto um pargrafo.

  • Quem est construindo os padres da Web?

    Os padres da Web no so feitos pela Netscape ou Microsoft.

    O corpo regulador da Web o W3C.

    W3C significa World Wide Web Consortium.

    O W3C junta as especificaes para os padres da Web.

    Os padres da Web mais essenciais so HTML, CSS and XML.

    O padro HTML mais atual a XHTML 1.0.

    Introduo ao HTML

    O que um arquivo HTML?

    HTML significa Hyper Text Markup Language (Linguagem de Marcao de

    Hipertexto)

    Um arquivo HTML um arquivo de texto contendo pequenas etiquetas de

    marcao (markup tags)

    As marcaes dizem para o navegador Web como mostrar a pgina

    Um arquivo HTML deve ter uma extenso 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:

    Ttulo da pgina

  • Esta minha primeira pgina. Este texto est em negrito

    Salve o arquivo como "primeira.htm".

    Inicie o seu navegador de Internet. Selecione "Abrir" (ou "Abrir Pgina") no menu

    Arquivo do seu navegador. Uma caixa de dilogo aparecer. Selecione "Procurar" (ou

    "Escolher Arquivo") e localize o arquivo HTML que voc recm criou - "primeira.htm" -

    selecione-o e clique em "Abrir". Agora voc dever ver um endereo na caixa de

    dilogo, por examplo "C:\MeusDocumentos\primeira.htm". Clique OK, e o navegador

    mostrar a pgina.

    Exemplo Explicado

    A primeira marcao no seu documento HTML . Esta tag diz para o seu

    navegador que este o incio de um documento HTML. A ltima tag no seu

    documento . Esta tag diz para o seu navegador que este o final de um

    documento HTML.

    O texto entre a tag e a tag a informao de cabealho. A

    informao de cabealho no mostrada na janela do navegador.

    O texto entre as tags o ttulo do seu documento. O ttulo mostrado na barra

    de ttulo do navegador (a barra mais superior do navegador).

    O texto entre as tags o texto que ser mostrado no seu navegador.

    O texto entre as tags e ser mostrado numa fonte em negrito.

    Extenso HTM ou HTML?

    Quando voc salva um arquivo HTML, voc pode usar tanto a extenso .htm quanto

    .html. Usamos .htm em nossos exemplos. Pode ser um mau hbito herdado do

  • passado quando alguns dos programas comumente usados somente permitiam

    extenses de trs letras.

    Com programas mais novos perfeitamente seguro usar .html.

    Observao 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 obtm]) como o FrontPage, o Claris

    Home Page, ou o Adobe PageMill em vez de escrever suas marcaes 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.

    Questes Freqentemente Perguntadas

    P: Aps ter editado um arquivo HTML, no consigo ver o resultado em meu

    navegador. Porque?

    R: Certifique-se de que voc salvou o arquivo com um nome e exteno apropriados

    como "c:\primeiro.htm". Certifique-se tambm de que voc usou o mesmo nome

    quando abriu o arquivo em seu navegador.

    P: Tentei editar um arquivo HTML mas as modificaes no aparecem no navegador.

    Porque?

    R: O navegador armazena suas pginas de modo que ele no precise ler a mesma

    pgina duas vezes. Quando voc modifica uma pgina, o navegador no sabe disso.

    Use o boto atualizar/recarregar para forar o navegador a ler a pgina 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

    lies avanadas pressupem 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 no Windows como o Mac.

    Entertanto, uns poucos exemplos nas lies avanadas pressupem que voc esteja

    rodando uma verso mais nova do Windows, como o Windows 98 ou Windows 2000.

  • Elementos HTML

    Documentos HTML so arquivos de texto constituidos de elementos HTML.

    Elementos HTML so definidos usando tags (etiquetas) HTML.

    Tags (etiquetas) HTML

    As tags HTML so usadas para marcar elements HTML

    As tags HTML so cercadas pelos dois caracteres < e >

    Os caracteres circundantes so chamados chaves angulares

    As tags HTML normalmente vm em pares como e

    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 contedo do elemento

    As tags HTML no so sensveis caixa, significa o mesmo que

    [caixa um termo tipogrfico para se referir ao corpo dos tipos; caixa-baixa:

    minsculas, caixa-alta: maisculas]

    Elementos HTML

    Lembre-se do exemplo HTML da pgina anterior:

    Ttulo da pgina

    Esta minha primeira pgina. Este texto est em negrito

    Este um elemento HTML:

    Este texto est em negrito;/b>

    O elemento HTML comea com uma tag de abertura:

    O contedo do elemento HTML : Este texto est em negrito

    O elemento HTML termina com uma tag de fechamento:

  • O propsito da tag definir um elemento HTML que dever ser exibido em

    negrito.

    Este tambm um elemento HTML:

    Esta minha primeira pgina. Este texto est em negrito

    Este elemento HTML comea com a tag de abertura , e termina com a tag de

    fechamento .

    O propsito da tag definir o elemento HTML que contm o corpo de um

    documento HTML.

    Porque usamos tags com letras minsculas?

    Recm dissemos que as tags HTML no so sensveis caixa: significa o mesmo

    que . Quando voc surfa na Web, voc notar que muitos tutoriais usam tags

    HTML em letras maisculas em seus exemplos. Ns sempre usamos tags minsculas.

    Por que?

    Se voc quer se preparar para as prximas geraes da HTML voc deve comear a

    usar tags minsculas. O World Wide Web Consortium (W3C) recomenda tags

    minsculas na sua recomendao HTML 4, e a XHTML (a prxima gerao da HTML)

    demanda tags minsculas.

    Atributos da Tag

    As tags podem ter atributos. Os atributos podem prover informao adicional sobre os

    elementos HTML na sua pgina.

    Esta tag define o elemento corpo da sua pgina HTML: . Com um atributo

    adicional bgcolor, voc pode dizer ao navegador que a cor de fundo da sua pgina

    deve ser vermelha, assim: .

    Esta tag define uma tabela HTML: . Com um atributo borda, voc pode dizer ao

    navegador que a tabela no deve ter bordas:

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

  • Os atributos so 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 so

    as mais comuns, mas aspas simples so tambm permitidas.

    Em algumas situaes raras, como quando um valor de atributo j contm aspas,

    necessrio usar aspas simples:

    name='Joo "Espingarda" da Silva'

    Tags HTML Bsicas

    As tags mais importantes na HTML so as tags que definem ttulos, pargrafos 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 mnimo de tags

    HTML ELe demonstra como o texto inserido em um elemento body exibido no

    navegador.

  • Pargrafos simples

    Este exemplo demonstra como o texto dentro de um elemento de pargrafo exibido

    no navegador.

    (Voc encontrar mais exemplos no final desta pgina)

    Ttulos

    Ttulos so definidos com as tags a . A define o ttulo maior. A

    define o ttulo menor.

    Este um ttulo

    Este um ttulo

    Este um ttulo

    Este um ttulo

    Este um ttulo

    Este um ttulo

    A HTML automaticamente adiciona uma linha em branco extra antes e aps um titulo..

    Pargrafos

    Os pargrafos so definidos com a tag.

    Este um pargrafo

    Este outro pargrafo

    A HTML adiciona automaticamente uma linha em branco extra antes e aps um

    pargrafo.

    Quebras de linha

    A tag usada quando voc quer terminar uma linha, mas no quer comear um

    novo pargrafo. A tag fora a quebra de linha onde quer que voc a coloque.

    Este um pargrafo com quebras de linha

  • A tag uma tag vazia. Ela no tem tag de fechamento.

    Comentrios em HTML

    A tag de comentrio usada para inserir um comentrio no cdigo fonte HTML. Um

    comentrio ser ignorado pelo navegador. Voc pode usar comentrios para explicar o

    seu cdigo, o que pode ajuda-lo quando voc editar o cdigo fonte numa data

    posterior.

    Observe que voc necessita de um ponto de exclamao aps a chave de abertura,

    mas no antes da chave de fechamento.

    Observaes Bsicas - Dicas teis

    Quando voc escreve texto HTML, voc nunca pode estar seguro de como o texto

    ser mostrado em outro navegador. Algumas pessoas tm telas de monitor grandes,

    algumas tm pequenas. O texto ser reformatado cada vez que o usurio

    redimensionar sua janela. Nunca tente formatar o texto em seu editor adicionando

    linhas e espaos ao texto.

    A HTML ir truncar os espaos em seu texto. Qualquer quantidade de espaos conta

    como um. Algumas informaes extras: Em HTML uma nova linha conta como um

    espao.

    Usar pargrafos vazios para inserir linhas em branco um mau hbito. Em vez

    disso use a tag . (Mas no use a tag para criar listas. Espere at que voc

    tenha aprendido sobre listas HTML.)

    Voc pode ter notado que pargrafos podem ser escritos sem a tag de fechamento

    . No confie nisso. A prxima verso da HTML no ir permitir que voc omita

    QUALQUER tag de fechamento.

    A HTML adiciona automaticamente uma linha em branco extra antes e aps alguns

    elementos, como antes e aps um pargrafo, e antes e aps um ttulo.

    Ns usamos um filete horizontal (a tag ), para separar as sees em nossos

    tutoriais.

  • Mais exemplos

    Mais pargrafos

    Este exemplo demonstra alguns dos comportamentos padres dos elementos de

    pargrafo.

    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 formatao HTML.

    Ttulos

    Este exemplo demonstra as tags que exibem ttulos em um documento HTML.

    Ttulo alinhado no centro

    Este exemplo demonstra um ttulo alinhado no centro.

    Filete horizontal

    Este exemplo demonstra como inserir um filete horizontal.

    Comentrios ocultos

    Este exemplo demonstra como inserir um comentrio oculto no cdigo fonte HTML.

    Cor de fundo

    Este exemplo demonstra como adicionar uma cor de fundo numa pgina HTML.

    Tags HTML Bsicas

    Tag Descrio

    Define um documento HTML

    Define o corpo do documento

    a Define ttulo 1 a ttulo 6

    Define um pargrafo

  • Insere uma nica quebra de linha

    Define um filete horizontal

    Define um comentrio

    Formatao de Texto em HTML

    A HTML define uma srie de elementos para formatar a sada, como texto em negrito

    ou itlico.

    Abaixo esto uma srie de exemplos que voc pode tentar por si mesmo:

    Exemplos

    Formatao 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 espaos com a

    tag pre.

    Tags de "sada de computador"

    Este exemplo demonstra o quo diferentes sero mostradas as tags de "sada de

    computador".

  • Endereo

    Este exemplo demonstra como escrever um endereo em um documento HTML.

    Abreviaturas e acrnimos

    Este exemplo demonstra como manejar uma abreviatura ou um acrnimo.

    Direo do texto

    Este exemplo demonstra como mudar a direo do texto.

    Citaes

    Este exemplo demonstra como manejar citaes 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 pgina Web e imaginou "Como eles fazem isso"?

    Para descobrir, simplesmente clique na opo EXIBIR na barra de ferramentas do seu

    navegador e selecione CDIGO FONTE ou PGINA FONTE. Uma janela ir abrir

    para mostrar-lhe a HTML real da pgina.

    Tags de Formatao de Texto

    Tag Descrio

    Define texto em negrito

    Define texto grande

    Define texto enfatizado;

  • Define texto em itlico

    Define texto pequeno

    Define texto forte

    Define texto subescrito

    Define texto superescrito

    Define texto inserido

    Define texto cancelado

    Desaprovada. Use em vez

    Desaprovada. Use em vez

    Desaprovada. Use estilos em vez

    Tags de "Sada de Computador"

    Tag Descrio

    Define texto de cdigo de computador

    Define texto de teclado

    Define amostra de cdigo de computador

    Define texto de teletipo

    Define uma varivel

    Define texto pr-formatado

    Desaprovada. Use em vez

    Desaprovada. Use em vez

  • Desaprovada. Use em vez

    Tags de Citaes curtas (Citations), Citaes longas (Quotations), e Definio

    Tag Descrio

    Define uma abreviatura

    Define um acrnimo

    Define um elemento de endereo

    Define a direo do texto

    Define uma citao longa

    Define uma citao curta

    Define uma citao

    Define um termo de definio

    Entidades de Caractere na HTML

    Alguns caracteres como o caractere

  • Uma entidade de caractere tem trs partes: um e comercial (&), um nome de entidade

    ou um # e um nmero de entidade, e finalmente um ponto e vrgula (;).

    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 nmero que o nome mais fcil de

    lembrar. A desvantagem que nem todos os navegadores suportam os nomes de

    entidades mais novos, enquanto que o suporte para nmeros de entidade muito bom

    em quase todos os navegadores.

    Observe que as entidades so sensveis caixa.

    Este exemplo permite que voc experimente entidades de caracteres: Entidades de

    Caractere

    Espao No Separvel

    A entidade de caractere mais comum na HTML o espao no separvel.

    Normalmente a HTML ir truncar os espaos do seu texto. Se voc escrever 10

    espaos no seu texto a HTML ir remover 9 deles. Para adicionar espaos ao seu

    texto, use a entidade de caractere .

    Entidades de Caractere Mais Comuns:

    Resultado Descrio Nome da Entidade Nmero da Entidade

    espao no separvel

    < menor do que < <

    > maior do que > >

    & e comercial & &

    " aspas " "

    ' apstrofe '

  • Algumas Outras Entidades de Caractere Comumente Usadas:

    Resultado Descrio Nome da Entidade Nmero da Entidade

    cent

    libra

    yen

    pargrafo (em ingls section)

    copyright

    marca registrada

    multiplicao

    diviso &division;

    Para ver uma lista completa das entidades de caractere da HTML v para Referncia

    de Entidades de Caractere.

    Vnculos (Links) em HTML

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

    Exemplos

    Crie hipervnculos

    Este exemplo demonstra como criar vnculos em um documento HTML.

    Uma imagem como vnculo

    Este exemplo demonstra como usar uma imagem como vnculo.

    (Voc encontrar mais exemplos na final desta pgina.)

  • A Tag ncora e o Atributo Href

    A HTML usa a tag (ncora) para criar um vnculo (link) com outro documento.

    Uma ncora pode apontar para qualquer recurso na Web: uma pgina em HTML, uma

    imagem, um arquivo de som, um filme, etc.

    Sintaxe para criar uma ncora:

    Texto a ser exibido

    A tag usada para criar uma ncora de onde vincular, o atributo href usado

    para onde enderear o documento, e as palavras entre as tags de abertura e

    fechamento da ncora sero exibidas como um hipervnculo.

    Esta ncora define um vnculo para as W3Schools:

    Visite as W3Schools!

    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:

    Visite as W3Schools!

    A Tag ncora e o Atributo Nome

    O atributo nome usado para criar uma ncora nomeada. Quando usamos ncoras

    nomeadas podemos criar vnculos que saltam diretamente para uma seo especfica

    em uma pgina, em vez de deixar o usurio rolar [a janela (scroll)] por todo parte para

    encontrar o que ele/ela est procurando.

  • Abaixo est a sintaxe de uma ncora nomeada:

    Texto a ser exibido

    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:

    Seo de Dicas teis

    Voc deve observar que a ncora nomeada no exibida de maneira especial.

    Para vincular diretamente a uma seo "dicas", adicione um sinal de # e o nome da

    ncora no final de uma URL, como esta:

    Saltar para a Seo de Dicas teis

    Um hipervnculo para a Seo de Dicas teis de DENTRO do arquivo "html_links.asp"

    seria assim:

    Saltar para a Seo de Dicas teis

    Observaes Bsicas - Dicas teis

    Sempre adicione uma barra inclinada (? trailing slash) para referenciar subdiretrios.

    Se voc faz um vnculo assim: href="http://www.w3schools.com/html", voc ir gerar

    duas requisies para o servidor, porque o servidor ir adicionar uma barra ao

    endereo para criar um novo pedido como este:

    href="http://www.w3schools.com/html/"

    ncoras nomeadas so geralmente usadas para cirar "sumrios" ("table of contents")

    no incio de um documento grande. A cada captulo dentro do documento dado um

    nome de ncora, e vnculos para cada uma destas ncoras so colocados no topo do

    documento.

    Se um navegador no puder encontrar uma ncora nomeada que foi especificada, ele

    vai para o topo do documento. Nenhum erro ocorre.

  • Mais Exemplos

    Abre um vnculo em uma nova janela do navegador

    Este exemplo demonstra como fazer um vnculo para outra pgina abrindo uma nova

    janela, de modo que o visitante no tenha que deixar o seu stio da Web.

    Vnculo para um local na mesma pgina

    Este exemplo demonstra como usar um vnculo 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 stio est

    travado em uma moldura (frame).

    Criar um vnculo de correio (mailto)

    Este exemplo demonstra como fazer um vnculo para uma mensagem de correio

    (somente ir funcionar de voc tiver o correio instalado).

    Criar um vnculo de correio (mailto) 2

    Este exemplo demonstra um vnculo de correio (mailto) mais complexo.

    Link Tags

    Tag Descrio

    Define uma ncora

    Molduras (Frames) HTML

    Com as molduras, voc pode exibir mais de uma pgina Web na mesma janela do

    navegador.

  • Exemplos

    Conjunto de Molduras Verticais

    Este exemplo demonstra como fazer um conjunto de molduras verticais com trs

    documentos diferentes.

    Conjunto de Molduras Horizontais

    Este exemplo demonstra como fazer um conjunto de molduras horizontais com trs

    documentos diferentes.

    Como usar a tag

    Este exemplo demonstra como usar a tag .

    (Voc pode encontrar mais exemplos no final desta pgina.)

    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 so:

    O desenvolvedor Web deve vigiar mais documentos HTML

    difcil imprimir a pgina inteira

    A Tag de Conjunto de Molduras (Frameset Tag)

    A tag 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 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:

    Observaes Bsicas - Dicas teis

    Se uma moldura tem bordas visveis, o usurio pode redimensiona-las arrastando a

    borda. Para evitar que um usurio faa isso, voc pode adicionar noresize="noresize"

    tag .

    Adicione a tag para navegadores que no suportam molduras.

    Mais Exemplos

    Conjunto de Molduras Misto

    Este exemplo demonstra como fazer um conjunto de molduras com trs documentos,

    e como mistura-los em linhas e colunas.

    Conjunto de molduras com noresize="noresize"

    Este exemplo demonstra o atributo noresize. As molduras so so redimensionveis.

    Mova o mouse sobre as bordas enter as molduras e observe que voc no pode

    mover as bordas.

    Moldura de navegao

    Este exemplo demonstra como fazer uma moldura de navegao. A moldura de

    navegao contm uma lista de vnculos com a segunda moldura como alvo. O

    arquivo chamado "contents.htm" contm trs vnculos. Cdigo fonte dos vnculos:

    Moldura a

    Moldura b

    Moldura c

    A segunda moldura ir mostrar os documentos vinculados.

  • Moldura em srie (inline)

    Este exemplo demonstra como criar uma moldura inline (uma moldura dentro de uma

    pgina HTML).

    Saltar para uma seo especfica dentro de uma moldura

    Este exemplo demonstra duas molduras. Uma das molduras tem uma fonte para uma

    seo especfica em um arquivo. A seo especfica identificada com no arquivo "link.htm".

    Saltar para uma seo especfica com moldura de navegao

    Este exemplo demonstra duas molduras. A moldura de navegao (content.htm)

    esquerda contm uma lista de vnculos com a segunda moldura (link.htm) como alvo A

    segunda moldura mostra o documento vinculado. Um dos vnculos na moldura de

    navegao est vinculado a uma seo especfica no arquivo alvo. O cdigo HTML no

    arquivo "content.htm" parece com isto: Vnculo sem ncoraVnculo com ncora.

    Tags de Molduras

    Tag Descrio

    Define um conjunto de molduras

    Define uma subjanela (uma moldura)

    Define uma seo noframe para navegadores que no manejam molduras

    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 pgina.)

    Tabelas

    As tabelas so definidas com a tag . Uma tabela dividida em linhas (com a

    tag ), e cada linha dividida em clulas de dados (com a tag ). As letras td

    significam "table data," que o contedo de uma clula de dados. Uma clula de

    dados pode conter texto, imagens, listas, pargrafos, formulrios, filetes horizontias,

    tabelas, etc.

    linha 1, clula 1

    linha 1, clula 2

    linha 2, clula 1

    linha 2, clula 2

    Como aparece no navegador:

    linha 1, clula 1 linha 1, clula 2

    linha 2, clula 1 linha 2, clula 2

    As Tabelas e o Atributo Border (Borda)

    Se voc no 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 sejam

    mostradas.

    Para exibir uma tabela com bordas, voc usar o atributo border:

    linha 1, clula 1

    linha 1, clula 2

  • Cabealhos em uma Tabela

    Os cabealhos em uma tabela so definidos com a tag .

    Cabealho

    Outro Cabealho

    linha 1, clula 1

    linha 1, clula 2

    linha 2, clula 1

    linha 2, clula 2

    Como aparece no navegador:

    Cabealho Outro Cabealho

    linha 1, clula 1 linha 1, clula 2

    linha 2, clula 1 linha 2, clula 2

    Clulas Vazias em uma Tabela

    Clulas sem contedo no so bem exibidas em muitos navegadores.

    linha 1, clula 1

    linha 1, clula 2

  • linha 2, clulal 1

    Como aparece no navegador:

    row 1, cell 1 row 1, cell 2

    row 2, cell 1

    Observe que as bordas em torno da clula vazia esto faltando.

    Para evitar isso, adicione um espao no separvel () s cluas vazias, para

    tornar as bordas visveis:

    linha 1, clula 1

    linha 1, clulal 2

    linha 2, clula 1

    Como aparece no navegador:

    linha 1, clula 1 linha 1, clula 2

    linha 2, clula 1

    Observaes Bsicas - Dicas teis

    Os elementos , e so raramente usado por causa do mau

    suporte dos navegadores. Espere mudanas em verses 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.

    Cabealhos em uma Tabela

    Este exemplo demonstra como exibir cabealhos de tabelas.

    Clulas Vazias

    Este exemplo demonstra como usar "" para manejar clulas que no tm

    contedo.

    Tabela com ttulo

    Este exemplo demonstra uma tabela com um ttulo.

    Clulas que abrangem mais do que uma linha/coluna

    Este exemplo demonstra como definir clulas 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 clula

    Este exemplo demonstra como usar enchimento de clula para criar mais espao em

    branco entre o contedo da clula e suas bordas.

    Espaamento de clula

    Este exemplo demonstra como usar espaamento de clula para aumentar a distncia

    entre as clulas.

    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 clula de tabela

    Este exemplo demonstra como adicionar um fundo a uma ou mais clulas de tabela.

  • Alinhar o contedo em uma clula de tabela

    Este exemplo demonstra como usar o atributo "align" para alinhar o contedo de

    clulas, par criar uma tabela mais "agradvel".

    O atributo frame (moldura)

    Este exemplo demonstra como usar o atributo "frame" para controlar as bordas em

    torno da tabela.

    Tags de Tabela

    Tag Descrio

    Define uma tabela

    Define um cabealho de tabela

    Define uma linha de tabela

    Define uma clula de tabela

    Define um ttulo de tabela

    Define um grupo de colunas de tabela

    Define os valores de atributo para uma ou mais colunas em uma tabela

    Define um cabealho de tabela

    Define o corpo de uma tabela

    Defines o rodap (footer) de uma tabela

    Listas em HTML

    A HTML suporta listas ordenadas, no ordenadas e de definies.

    Exemplos

    Uma lista no ordenada

    Este exemplo demonstra uma lista no ordenada.

  • Uma lista ordenada

    Este exemplo demonstra uma lista ordenada.

    (Voc pode encontrar mais exemplos no final desta pgina.)

    Listas No Ordenadas

    Uma lista no ordenada uma lista de itens. As listas de itens so marcadas com

    bullets (tipicamente pequenos crculos pretos).

    Uma lista no ordenada comea com a tag . Cada item da lista comea com a tag

    .

    Caf

    Leite

    Aqui est como aparece em um navegador:

    Caf

    Leite

    Dentro de um item de uma lista voc pode colocar pargrafos, quebras de linha,

    imagens, vnculos, outras listas, etc.

    Listas ordenadas

    Uma lista ordenada tambm uma lista de itens. As listas de itens so marcadas com

    nmeros.

    Uma lista ordenada comea com a tag . Cada item da lista comea com a tag .

    Caf

    Leite

    Aqui est como aparece em um navagador:

  • 1. Caf

    2. Leite

    Dentro de um item de uma lista voc pode colocar pargrafos, quebras de linha,

    imagens, vnculos, outras listas, etc.

    Lista de Definies

    Uma lista de definies no uma lista de itens. Esta uma lista de termos e

    explicaes dos termos.

    Uma lista de definies comea com a tag . Cada termo da lista de definies

    comea com a tag . Cada definio da lista de definies comea com a tag .

    Caf

    Bebida quente preta

    Leite

    Bebida fria branca

    Aqui est como aparece em um navegador:

    Caf

    Bebida quente preta

    Leite

    Bebida fria branca

    Dentro de uma definio de lista de definies voc pode colocar pargrafo, quebras

    de linha, imagens, vnculos, outras listas, etc.

    Mais Exemplos

    Diferentes tipos de listas ordenadas

    Este exemplo demonstra diferentes tipos de listas ordenadas.

    Diferentes tipos de listas no ordenadas

    Este exemplo demonstra diferentes tipos de listas no ordenadas.

  • Listas aninhadas

    Este exemplo demonstra como voc pode aninhar listas.

    Listas aninhadas 2

    Este exemplo demonstra uma lista aninhada mais complicada.

    Lista de definies

    Este exemplo demonstra uma lista de definies.

    Tags de Listas

    Tag Descrio

    Define uma lista ordenada

    Define uma lista no ordenada

    Define um item de lista

    Define uma lista de definies

    < Define um termo de definio

    Define uma descrio de definio

    Desaprovada. Use em vez

    Desaprovada. Use em vez

    Formulrios e Entradas (inputs) em HTML

    Os Formulrios em HTML so usados para selecionar diferentes tipos de entradas do

    usurio.

  • Exemplos

    Campos de texto

    Este exemplo demonstra como criar campos de texto em uma pgina HTML. Um

    usurio pode escrever o texto em um campo de texto.

    Campos de senha

    Este exemplo demonstra como criar um campo de senha em uma pgina HTML.

    (Voc encontrar mais exemplos no final desta pgina.)

    Formulrios

    Um formulrio uma rea que pode conter elementos de formulrio.

    Os elementos de formulrio so elementos que permitem o usurio entrar informao

    (como campos de texto, campos de rea de texto, menus drop-down, botes radiais,

    caixas de seleo, etc.) em um formulrio.

    Um formulrio definido pela tag .

    Entrada (Input)

    A tag de formulrio mais usada a tag . O tipo de input especificado com o

    atributo type (tipo). Os tipos de input mais cumumente usados so explicados abaixo.

    Campos de Texto

    Os campos de texto so usados quando voc quer que o usurio digite letras,

    nmeros, etc. em um formulrio.

    Primeiro nome:

  • ltimo nome:

    Como aparece no navegador:

    Primeiro nome:

    ltimo nome:

    Observe que o formulrio propriamente no est visivel. Tambm observe que em

    muitos navegadores, o comprimento do campo de texto de 20 caracteres por padro

    (default).

    Botes Radiais

    Botes Radiais so usados quando voc quer que o usurio selecione uma entre uma

    quantidade limitada de escolhas.

    Masculino

    Feminino

    Como aparece no navegador:

    Masculino

    Feminino

    Observe que somente uma opo pode ser escolhida.

    Caixas de Seleo

    As Caixas de Seleo so usadas quando voc quer que o usurio selecione uma ou

    mais opes de uma quantidade limitada de escolhas.

    Eu tenho uma bicicleta

  • Eu tenho um carro

    Como aparece no navegador:

    Eu tenho uma bicicleta

    Eu tenho um carro

    O Atributo Ao do Formulrio (Form's Action) e o Boto Enviar (Submit)

    Quando o usurio clica no boto "Enviar", o contedo do formulrio enviado para

    outro arquivo. O atributo de ao do formulrio define o nome do arquivo para o qual

    enviar o contedo. O arquivo definido no atributo action geralmente faz algo com a

    entrada recebida.

    Nome do Usurio:

    Como aparece no navegador:

    Nome do Usurio: Enviar

    Se voc digitar alguns caracteres no campo de texto acima, e clicar no boto Enviar",

    voc ir enviar a sua entrada para a pgina chamada "html_form_action.asp". Esta

    pgina ir mostrar-lhe a entrada recebida.

    Mais Exemplos

    Caixas de Seleo (Checkboxes)

    Este exemplo demonstra como criar caixas de seleo numa pgina HTML. Um

    usurio pode selecionar ou deselecionar uma caixa de seleo.

    Botes Radiais (Radiobuttons)

    Este exemplo demonstra como criar botes radiais numa pgina HTML.

  • Caixa drop down Simples

    Este exemplo demonstra como criar uma caixa drop down simples numa pgina

    HTML. A caixa drop-down uma lista selecionvel.

    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 usurio pode escrever texto na rea de texto. Numa rea de

    texto voc pode escrever uma quantidade ilimitada de caracteres.

    Criar um boto

    Este exemplo demonstra com criar um boto. No boto voc pode definir o seu prprio

    texto.

    Conjunto de campo em torno dos dados

    Este exemplo demonstra como desenhar uma borda com um ttulo em torno dos seus

    dados.

    Exemplos de Formulrios

    Formulrio com campos de entrada e um boto de envio

    Este exemplo demonstra como adicionar um formulrio em um apgina. O formulrio

    contm dois campos de entrada e um boto de envio.

    Formulrio com caixas de seleo

    Este formulrio contm duas caixas de seleo, e um boto de envio.

    Formulrio com botes radiais

    Este formulrio contm dois bot~es radiais, e um boto de envio.

    Enviar e-mail de um formulrio

    Este exemplo demonstra como enviar um e-mail de um formulrio.

    Tags de Formulrio

    Tag Descrio

    Define um formulrio para entradas do usurio

    Define um campo de entrada

  • Define uma rea de texto (um controle de entrada de texto multi-linhas)

    Define um rtulo para um controle

    Define um conjunto de campos

    Define um ttulo para um conjunto de campos

    Define uma lista selecionvel (uma caixa drop-down)

    Define um grupo de opo

    Define uma opo em uma caixa drop-down

    Define um boto para pressionar

    Desaprovada. Use 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 pgina Web.

    Inserir imagens de diferentes locais

    Este exemplo demonstra como exibir imagens de um outro diretrio ou outro servidor

    na sua pgina Web.

    (Voc pode encontrar mais exemplos no final desta pgina.)

    A Tag Image e o Atributo Src

    Na HTML, as imagns so definidas com a tag

    A tag vazia, o que significa que ela somente atributos e no tem tag de

    fechamento

    Para exibir uma imagen em uma pgina, 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 pgina.

    A sintaxe para definir uma imagem :

    O URL aponta para o local onde a imagem est armazenada. Uma imagem

    denominada "boat.gif" localizada no diretrio "images" em "www.w3schools.com" tem

    o URL: http://www.w3schools.com/images/boat.gif.

    O navegador pe a imagem onde a tag image osorre no documento. Se voc coloca

    uma tag image enter dois pargrafos, o navegador mostra o primeiro pargrafo, depois

    a imagem, e ento o segundo pargrafo.

    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:

  • O atributo "alt" diz ao leitor o que ele ou ela est perdendo numa pgina se o

    navegador no pode carregar imagens. O navagador ir ento exibir o texto alternativo

    em vez da imagem. uma boa prtica incluir o atributo "alt" para cada imagem numa

    pgina, para melhorar a exibio e a utilidade do seu documento para pessoas que

    tm navegadores somente de texto.

    Observaes Bsicas - Dicas teis

    Se um arquivo HTML contm dez imagens - onze arquivos so necessrios para exibir

    a pgina 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 pgina

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

    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 pgina se o

    navegador no pode carregar imagens. uma boa prtica incluir o atributo "alt" para

    cada imagem numa pgina.

    Fazer um hipervnculo com uma imagem

    Este exemplo demonstra como usar uma imagem como vnculo.

  • Criar uma mapa de imagem

    Este exemplo demonstra como criar uma mapa de imagem, com regies clicveis.

    Cada uma das regies um hipervnculo.

    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 sero mostradas

    na barra de estatus.

    Tags de Imagem

    Tag Descrio

    Define uma imagem

    Definesum mapa de imagem

    Define uma rea dentro de um mapa de imagem

  • Planos de Fundo em HTML

    Um bom plano de fundo pode fazer um stio 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 pgina fcil de

    ler

    M cor de fundo e de texto

    Um exemplo de uma cor de fundo e uma cor de texto que tornam a pgina difcil de ler

    (Voc pode encontrar mias exemlpos no final desta pgina.)

    Planos de Fundo

    A tag 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 nmero hexadecimal, um valor RGB, ou um nome de cor.

    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.

  • 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 mximo 10k

    A imagem de fundo parecer boa com outras imagens na pgina?

    A imagem de fundo parecer boa com as cores do texto na pgina?

    A imagem de fundo parecer boa quando ela for repetida na pgina?

    A imagem de fundo afasta o foco do texto?

    Observaes Bsicas - Dicas teis

    Os atributos bgcolor, background, e text na tag esto desaprovados nas

    verses mais recentes da HTML (HTML 4 e XHTML). O World Wide Web Consortium

    (W3C) removeu estes atributos de suas recomendaes. Nas verses futuras da

    HTML, as folhas de estilo (CSS) sero usadas para definir o layout e a exibir as

    propriedades dos elementos da HTML.

    Poucos dos stios Web mais visitados usam imagens de fundo.

    As cores de fundo mais usadas so: 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

    pgina fcil de ler

    Boa imagem de fundo 2

    Um exemplo de uma imagem de fundo e uma cor de texto que tornam o texto na

    pgina fcil de ler

    M imagem de fundo

    Um exemplo de uma imagem de fundo e uma cor de texto que tornam o texto na

    pgina muito difcil de ler.

  • Layout em HTML

    Em qualquer lugar na Web voc encontrar pginas que esto formatadas como

    pginas de jornal usando colunas HTML.

    Layout em HTML - Usando tabelas

    Uma prtica muito comum com a HTML,

    usar tabelas HTML para formatar o

    layout de uma pgina HTML.

    Uma parte desta pgina est formatada

    com duas colunas, como uma pgina de

    jornal.

    Conforme voc pode ver nesta pgina, h

    uma coluna esquerda e uma coluna

    direita.

    Este texto est exibido na coluna

    esquerda.

    Uma HTML usada para dividir

    uma parte desta pgina Web em duas

    colunas.

    O truque usar uma tabela sem bordas,

    e talvez um pouco de enchimento de

    clula extra.

    No importa quanto texto voc adiciona a

    esta pgina, ele ir ficar dentro das

    bordas de suas colunas.

    Mesmo Layout - Cor Adicionada

    Uma prtica muito comum com a HTML,

    usar tabelas HTML para formatar o

    layout de uma pgina HTML.

    Uma parte desta pgina est formatada

    com duas colunas, como uma pgina de

    jornal.

    Conforme voc pode ver nesta pgina, h

    uma coluna esquerda e uma coluna

    direita.

    Uma HTML usada para dividir

    uma parte desta pgina 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

    clula extra.

    No importa quanto texto voc adiciona a

    esta pgina, ele ir ficar dentro das

    bordas de suas colunas.

  • Exemplos

    Dividir uma parte de uma pgina HTML em colunas de tabela muito fcil de fazer.

    Para deixa-lo experimentar, colocamos este exemplo simples.

  • Fontes em HTML

    A tag na HTML est desaprovada. Ela ser supostamente removida numa

    futura verso da HTML.

    Mesmo que muita gente esteja usando-a, voc deve tentar evita-la, e usar estilos ao

    invs.

    A tag na HTML

    Com um cdigo HTML como este, voc pode especificar tanto o tamanho quanto o

    tipo da sada no navagador:

    This is a paragraph.

    This is another paragraph.

    Tente voc mesmo

    Atributos de Fonte

    Atributo Exemplo Propsito

    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 NO deve ser usada

  • A tag est desaprovada nas ltimas verses da HTML (HTML 4 e XHTML).

    O World Wide Web Consortium (W3C) removeu a tag de suas recomendaes.

    Em verses futuras da HTML, folhas de estilo (CSS) sero 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 captulos do tutorial de HTML!!! Nos prximos captulos

    explicaremos porque algumas tags, como a , sero removidas das

    recomendaes 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 ingls).

  • 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 contedo dos documentos, como:

    Este um pargrafo

    Esta uma lista no ordenada.

    Quando as tags como e atributos de cor foram adicionados especificao

    HTML 3.2, comeou um pesadelo dos desenvolvedores. O desenvolvimento de

    grandes stios Web onde informaes sobre fontes e cores tinham que ser adicionadas

    a cada pgina Web, tornou-se um processo longo, caro e e injustificadamente

    doloroso.

    O que to bom na HTML 4.0 ?

    Com a HTML 4.0 toda a formatao pode ser transferida do documento HTML para

    uma folha de estilo separada.

    Porque a HTML 4.0 separa a apresentao do documento de sua estrutura, temos o

    que sempre quisemos: total controle do layout de apresentao sem bagunar o

    contedo do documento.

    O que voc deve fazer sobre isso?

    Pare de usar atributos de estilo de apresentao dentro das suas tags de HTML.

    Nossa completa Referncia de Tag HTML indica as tags e atributos desaprovados na

    HTML 4.0. Ela tambm inclue muitos exemplos com o cdigo fonte completo.

    Tambm d uma olhada na Seo CSS e comee uma nova vida de desenvolvedor.

    Prepare-se para a XHTML

  • A XHTML a prxima gerao da HTML. Voc deve comear a se preparar para ela

    agora. A coisa mais importante que voc pode fazer comear a escrever em HTML

    4.01 vlida. Tambm comee a escrever suas tags em letras minsculas. Sempre

    feche seus elementos de tag. Nunca termine um pargrafo sem .

    Observao: A HTML 4.01 oficial recomenda o uso de tags em letras minsculas.

    Valide seus arquivos HTML como HTML 4.01

    Um documento HTML validado em relao a uma Document Type Definition (DTD)

    [Definio 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 no foram desaprovados

    ou que no aparecem em conjuntos de molduras (framsets):

    A DTD Transitional da HTML 4.01 inclue toda a DTD Strict mais os elementos e oa

    atributos desaprovados:

    A DTD Frameset da HTML 4.01 inclue toda a DTD Transitional mais as molduras

    (frames) tambm:

    Test Your HTML With the W3C Validator

    Entre o endereo da sua pgina na caixa anbaixo

    como http://www.w3schools.com/

  • Validar a pagina

  • Estilos em HTML

    Com a HTML 4.0 toda a formatao 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 informao de

    estilo adicionada seo .

    Vnculo no sublinhado

    Este exemplo demonstra como fazer um vnculo no sublinhado, usando um atributo

    de estilo.

    Vnculo para uma folha de estilo externa

    Este exemplo demonstra como usar a tag 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 trs maneiras de inserir uma folha de estilo:

    Folha de Estilo Externa

    Uma folha de estilo externa ideal quando o estilo aplicado em muitas pginas. Com

    uma folha de estilo externa, voc pode mudar a aparncia de um stio Web inteiro pela

    mudana de um arquivo. Cada pgina deve vincular-se folha de estilo usando a tag

    . A tag vai dentro da seo head.

    Folha de Estilo Interna

    Uma folha de estilo interna deve ser usada quando um documento especfico tem um

    estilo nico. Voc define estilos internos na seo head com a tag .

  • body {background-color: red}

    p {margin-left: 20px}

    Estilos Local (inline)

    Um estilo local (inline) deve ser usado quando um estilo nico deve ser aplicado a uma

    nica ocorrncia 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 pargrafo:

    Este um pargrafo

    Para aprender mais sobre estilos, visite o tutorial de CSS (em ingls).

    Tags de Estilo

    Tag Descrio

    Define uma definio de estilo

    Define uma referncia a um recurso

    Define uma seo num documento

    Define uma seo num documento

    Depsaprovada. Use estilos em vez

    Desaprovada. Use estilos em vez

    Desaprovada. Use estilos em vez

  • Cabealho (Head) HTML

    Exemplos

    O ttulo de um documento

    A informao de ttulo dentro de um elemento head no exibida na janela do

    navegador.

    Um alvo (target) para todos os vnculos

    Este exemplo demonstra como usar a tag base para fazer todos os vnculos em uma

    pgina abrirem em uma nova janela.

    O Elemento Head (Cabealho)

    O elemento head contm informao geral, tambm chamado meta-informao, sobre

    um documento. Meta significa "informao sobre".

    Voc pode dizer que meta-dados significa informao sobre dados, ou que meta-

    informao significa informao sobre informao.

    Informao Dentro do Elemento Head

    Os elementos dentro do elemento head no deveriam ser exibidos por uma

    nabegador.

    De acordo com o padro da HTML, somente umas poucas tags so legais dentro da

    seo head. So elas: , , , , , e .

    Veja a seguinte construo ilegal:

    Este um texto

    Neste caso o navegador tem duas opes:

    Mostrar o texto porque ele est dentro de um elemento pargrafo

    Ocultar o texto porque ele est dentro do elemento head

  • Se voc colocar um elemento HTML como ou dentro de um elemento head

    como este, muitos navegadores iro exibi-lo, mesmo sendo ilegal.

    Deveriam os navegadores perdoa-lo por erros como este? Pensamos que no. Outros

    que sim.

    Tags de Cabealho (Head)

    Tag Descrio

    Define informao sobre o documento

    Define o ttulo do documento

    Define o URL base para todos os vnculos numa pgina

    Define a referncia do recurso

    Define meta informao

    Tag Descrio

    Define o tipo do documento. Esta tag vai antes da tag de incio

    .

  • Meta em HTML

    Exemplos

    Descrio do documento

    A informao dentro de um elemento meta descreve o documento.

    Palavras-chave de documento

    A informao dentro de um elemento meta descreve as palavras-chave do documento.

    Redirecionar um usurio

    Este exemplo demonstra como redirecionar um usurio se o endereo do seu stio

    mudou.

    O Elemento Meta

    Conforme explicamos nos cap[itulos anteriores, o elemento head contm informao

    geral (meta-informao) sobre um documento.

    A HTML tambm inclue um elemento meta que vai dentro do elemento head. O

    propsito do elemento meta prover meta-informao sobre o documento.

    Muito freqentemente o elemento meta usado para prover informao que

    relevante para os navegadores ou para as ferramentas de busca (search engines)

    como a descrio do contedo do seu documento.

    observao: O W3C estabelece que "Alguns agentes de usurios suportam o uso de

    META para atualizar (refresh) a pgina atual aps alguns segundos, com a opo de

    substitui-la por um URI diferente. Os autores no devem fazer uso desta tcnica para

    enviar os usurios para pginas diferentes, pois isso torna a pgina incessvel para

    alguns usurios. Em vez disso, o envio de pgina automtico 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 usaro os atributos name e content da tag

    meta para indexar suas pginas.

    Este elemento meta define uma descrio da sua pgina:

  • Este elemento meta define palavras-chave para a sua pgina:

    A inteno dos atributos name e content descrever o contedo de uma pgina.

    Entertanto, como muitos webmasters usam tags meta para spamming, como repetir

    palavras-chave para dar s pginas uma pontuao maior, algumas ferramentas de

    busca pararam inteiramnete de usa-las.

    Voc pode ler mais sobre ferramentas de busca no Tutorial de Construo para a Web

    (em ingls).

    Atributos Meta Desconhecidos

    s vezes voc ver atributos meta que so desconhecidos por voc como este:

    Ento voc tem que aceitar que isto algo nico do stio ou do autor do stio, e que

    no tem provavelmente relevncia para voc.

    Voc pode ver uma lista completa dos atributos do elemento meta em

    Referncia Completa de Tags da HTML 4.01.

  • Localizadores de Recursos Uniformes (Uniform Resource Locators) na HTML

    Vnculos HTML

    Quando voc clica em um vnculo num documento em HTML como este: ltima

    Pgina, uma tag subjacente aponta para um local (um endereo) na Web com

    uma valor de atributo href como este: ltima Pgina.

    O vnculo ltima Pgina no exemplo um vnculo relativo ao stio Web em que voc

    est navegando, e o seu navegador ir construir um endereo Web completo

    comohttp://www.w3schools.com/html/lastpage.htm para acessar a pgina.

    Localizadores de Recursos Uniformes (Uniform Resource Locators, URL)

    Algo chamado de Uniform Resource Locator (URL) usado para enderear um

    documento (ou outros dados) na World Wide Web. Um endereo 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 servio da internet. O tipo mais comum http.

    O domain (domnio) define o domain name (nome do domnio) na Internet, como

    w3schools.com.

    O host (hospedeiro) define o hospedeiro do domnio. Se omitido, o pado para http

    www.

    A :port (porta) define o port number (nmero da porta) no hospedeiro. O nmero da

    porta normalmente omitido. O mero de porta padro para http 80.

    O path (caminho) definie um path (caminho) (um subdiretrio) no servidor. Se o

    caminho omitido, o recurso (o documento) deve estar localizado no diretrio raiz do

    stio Web.

    O filename (nome de arquivo) define o nome do documento. O nome de arquivo

    padro pode ser default.asp, ou index.html ou outro dependendo das configuraes 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 notcias Usenet

    telnet uma conexo Telnet

    WAIS um arquivo num ervidor WAIS

    Acessar um Grupo de notcias (Newsgroup)

    O seguinte cdigo HTML:

    Grupo de Notcias de HTML

    cria um vnculo para um grupo de notcias como este Grupo de notcias de HTML.

    Descarregar (Downloading) com FTP

    O seguinte cdigo HTML:

    Download WinZip

    cria um vnculo para descarregar um arquivo como este: Download WinZip.

    (O vnculo no funciona. No tente. Ele apenas um exemplo. A W3Schools no tem

    realmente um diretrio ftp.)

    Vincular com o seu sistema de Correio (Mail system)

    O seguinte cdigo HTML:

  • [email protected]

    cria um vnculo para o seu prprio sistema de correio como este:

    [email protected]

  • Scripts (Roteiros) HTML

    Exemplos

    Inserir um script

    Este exemplo demonstra como inserir um script no seu documento HTML.

    Trabalhar com navegadores que no suportam scripts

    Este exemplo demonstra como manejar navegadores que no suportam scripting.

    Inserir um Script numa Pgina HTML

    Um script em HTML definido com a tag . Observe que voc ter que usar o

    atributo type para especificar a linguagem descripting.

    document.write("Oi Mundo!")

    O script acima produzir esta sada:

    Oi Mundo!

    Observao: Para aprender mais sobre scripting em HTML, visite a JavaScript School

    (em ingls).

    Como Manejar Navegadores Antigos

    Um navegador que no reconhece a tag , ir exibir o contedo da tag

    como texto na pgina. Para evitar que o navegador faa isso, voc dever esconder o

    script em tags de comentrio. Um navegador antigo (que no reconhea a tag

    ) ir ignorar o comentrio e no ir escrever o contedo da tag na pgina, ao

  • passo que um navegador mais atual ir entender que o script deve ser executado,

    mesmo que esteja circundado por tags de comentrio.

    Example

    JavaScript:

    VBScript:

    A Tag

    Alm de esconder o script dentro de um comentrio, voc pode tambm adicionar a

    tag .

    A tag usada para definir um texto alternativo se um script NO for

    executado. Esta tag usada para navegadore que reconhecem a tag , mas

    no suportam o script dentro dela, de modo que o navegador ir exibir o texto dentro

    da tag ao invs. Entretanto, se um navegador suporta o script dentro da tag

    ele ir ignorar a tag .

    Exemplo

    JavaScript:

  • Seu navegador no suporta JavaScript!

    VBScript:

    Seu navegador no suporta VBScript!

    Tags de Script

    Tag Descrio

    Define a script

    Define um texto alternativo se o script no for executado

    Define um objeto (embedded)

    Define configuraes run-time (parmetros) para um objeto

    Desaprovada. Use em vez

  • Pronto para Publicar seu Trabalho?

    Seu Primeiro Passo: Um Servidor Web Pessoal

    Se voc quer que as pessoas vejam as suas pginas, voc deve publica-las.

    Para publicar seu trabalho, voc tem que copiar seus arquivos num servidor

    Web.

    O seu prprio 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 diretrio 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

    fcil de instalar e ideal para desenvolver e testar aplicaes Web. O PWS foi otimizado

    para uso em estaes de trabalho (workstations), mas tem todos os requisitos de um

    servidor Web completo. Eletambm roda Pginas de Servidor Ativas (Active Server

    Pages (ASP)) assim como o seu irmo maior IIS.

    Como instalar um Servidor Web Pessoal (PWS):

    Procure na instalao do seu Windows para ver se voc instalou o PWS.

    Se no, instale o PWS do diretrio PWS no seu CD do Windows.

    Siga as instrues e obtenha o execute o seu Personal Web Server.

    Leia mais sobre o Personal Web Server da Microsoft.

    Servidopr de Informao da Internet (Internet Information Server (IIS))

  • O servidor Web IIS incluido no Windows 2000, torna fcil construir grandes aplicaes

    para a Web. Tanto o PWS quanto o IIS incluem ASP, um padro de scripting server-

    side (que roda no servidor) que pode ser usado para criar aplicaes Web dinmicas e

    interativas. O IIS est tambm disponvel 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 Prximo Passo: Um Servidor Web Profissional

    Se voc no quer usar o PWS ou o IIS, voc deve carregar (upload) os seus

    arquivos para um servidor pblico.

    Muitos Provedores de Servios de INternet (Internet Service Providers (ISP's))

    se oferecero para hospedar suas pginas.

    Se o seu empregador tem uma Servidoe de Internet,voc pode pedir a ele para

    hospedar seu stio Web.

    Se vopc est pensando seriamente nisso, voc deve instalar o seu prprio

    Servidor de Internet.

    Antes de voc selecionar um ISP, assegure-se de ler o Tutorial de Hospedagem

    Web (Web Hosting) da W3Schools!!