By SHARK
CabealhoElementos Elementos Bsicos HTML Imagens Links listas Modificando o Referncias Tabelas
Devemos usar aspas ou plicas/apstrofos (escrevemos "texto" ou 'texto')? Os valores dos atributos devem ser sempre colocados entre aspas. Normalmente utilizamos as aspas normais ( " ), mas os apstrofos ( ' ) tambm so permitidos. Em alguns casos, o valor do atributo contm o prprio caractere aspas. Numa situao dessas, devemos usar apstrofos (que aqui funcionam como aspas simples) para colocar em torno do valor do atributo, assim:
alt='Ele disse: "No!" ' Notas Rpidas As Tags HTML so utilizadas
para marcar elementos HTML. Elas esto cercadas pelos dois
caracteres < (menor que) e > (maior que) As tags normalmente
aparecem em pares, como e A primeira tag em um par sempre a
tag de incio, a segunda tag do par a tag de fim O texto entre o
comeo e o fim da tag o contedo do elemento. HTML no sensitive, ou
seja, a mesma coisa que Se por acaso voc escreveu os cdigos HTML
errado - por exemplo >b> invs de - no se desespere, pois o
mximo que pode acontecer o seu navegador interpretar sua pgina de
forma diferente do esperado e desenh-la de um jeito maluco. O
CABEALHO DE UM DOCUMENTO HTML O Elemento (cabealho do documento)O
elemento contm informao de caractere geral, tambm designada por
meta-informao, sobre o contedo do documento e sobre a forma como
ele deve ser apresentado. Podemos dizer que o termo metainformao
(ou meta-dados) significa dados que descrevem outros dados ou
informaes.A Informao Contida no Elemento Os elementos contidos
dentro do elemento no so exibidos na tela do navegador. O padro
HTML estabelece que s um pequeno nmero de elementos pode aparecer
dentro do cabealho. Eles so: , , , , e . A construo seria o
seguinte: Aqui temos algum texto Nesta situao acima, o navegador
pode reagir de duas formas:Apresentar o texto porque ele se
encontra dentro de um elemento Esconde o texto porque ele pertence
ao cabealho. Se voc colocar um elemento no autorizado, como ou ,
dentro do cabealho, a maioria dos navegadores vai escrever este
elemento na pgina. Aparentemente, as pessoas que so responsveis
pela concepo dos browsers acham que este gnero de erros aceitvel.
Esta e outras deficincias dos browsers so parcialmente responsveis
pelas ms prticas de codificao adquiridas por muitos criadores de
pginas HTML. Uma das razes que levaram criao da linguagem XHTML foi
a necessidade de acabar com estas situaes de uma vez por todas.
Elementos de cabealho ( )Descrio Elemento Contm informao importante
a respeito do documento mas que no deve ser apresentada no corpo da
pgina Define o ttulo da pgina Define um URL base comum para todas
as ligaes relativas da pgina Faz referncia a um recurso externo e
estabelece a ligao com ele D informao sobre aquilo que o documento
contm A declarao DOCTYPEA declarao DOCTYPE serve para indicar o DTD
a usar para validar na pgina. Quando utilizada, deve aparecer logo
no incio da pgina, antes do elemento DeclaraoDescrioDefine o tipo
de documento. Deve ser colocada antes de qualquer elemento pelo que
fica mesmo antes do elemento O elemento O elemento contm informao
de caractere geral (metainformao) sobre o documento e deve ser
colocado dentro do elemento . Sua finalidade fornecer informao que
descreve o documento.Palavras-chave para os motores de pesquisa
Durante alguns anos a utilizao mais freqente da informao fornecida
pelo elemento foi a criao de ndices para sites de busca. Atualmente
somente alguns buscadores ainda usam esta informao para indexar
pginas, e os de maior sucesso ignoram este elemento. No entanto, h
partes que continuam a ser tidas em considerao pelos agentes
(robots) dos buscadores, como por exemplo, as indicaes dadas sobre
as pastas em que no deve ser feita qualquer indexao. Alguns
sistemas de busca (no muitos) usam a informao contida nos elemento
meta para indexar as pginas. No fragmento de cdigo seguinte, o
elemento contm uma breve descrio da pgina:Na parte do cdigo abaixo
o elemento contm uma palavras-chave para indexar a pgina:Como
acabamos de ver, os nomes dados ao atributo name indicam claramente
a finalidade da informao contida no elemento meta.Infelizmente,
muitos criadores de pginas para a Web abusaram do elemento meta e
usaram de forma contrria sua filosofia para enganar os motores de
pesquisa. Em conseqncia disso, os sites de busca passaram a ignorar
cada vez mais o elemento , o que acabou dificultando todos aqueles
que pretendiam us-lo de forma correta.Valores desconhecidos para o
atributo name do elemento Algumas vezes encontramos situaes em que
o atributo name do elemento contm um valor desconhecido, como no
exemplo seguinte:Numa situao destas devemos interpretar o elemento
meta como contendo informao que especfica do website. Essa informao
pode ser importante para o autor da pgina, mas provavelmente
irrelevante para os visitantes. possvel que essas informaes sejam
teis para algum software que leia a pgina.ELEMENTOS E ATRIBUTOS
Elementos Um elemento uma estrutura semntica, composta de tag de
abertura, contedo e tag de fechamento. Os documentos HTML so
simples arquivos de texto que contm "tags de marcao". Essas
etiquetas definem os elementos da linguagem HTML e os seus
contedos. A lista seguinte indica algumas de suas caractersticas:
As "tags de marcao" do HTML so usadas para definir os elementos. As
tags HTML escrevem-se utilizando os caracteres < e > , entre
eles o nome do elemento e os seus atributos. A primeira tag do par
a tag de incio (ou de abertura) e a segunda do par a tag de fim (ou
de fechamento). Tudo o que se encontrar entre as tags de incio e de
fim fazem parte do contedo do elemento. Em XHTML as tags devem ser
escritas sempre com letras minsculas, e as tags e no representam o
mesmo elemento. Voc se lembra de nosso primeiro exemplo mostrado?!
Exemplo 01 Esta minha primeira pgina. Este texto est em negrito
Esta parte abaixo um elemento HTML:Este texto est em negritoRepare
alguns aspectos do cdigo acima:Este elemento inicia com a tag: O
contedo do elemento este: Este texto est em negrito O elemento
termina com a tag final: O propsito da tag colocar o contedo do
elemento HTML em negrito (bold)Segundo Exemplo Esta minha primeira
pgina. Este texto est em negrito Este elemento HTML inicia com tag
e termina com a tag . O propsito da tag definir o contedo
principal, o corpo do documento.Atributos das Tags Tag um cdigo
usado para marcar o incio e, onde for requerido, o fim de um
elemento HTML. H, como exposto acima, tags de abertura e de
fechamento. Uma tag de abertura representada por sinal de menor (
< ), um nome de elemento HTML, e um sinal de maior ( > ) (ex.
) e deve ser colocada imediatamente antes do incio do contedo do
elemento. Uma tag de fechamento se diferencia de uma tag de
abertura apenas por uma barra ( / ) antes do nome do elemento (ex.
) e deve ser colocadaimediatamente aps o fim do contedo do
elemento. Os Atributos servem para definir uma propriedade de um
elemento HTML. Os atributos HTML devem ser colocados sempre na tag
de abertura, logo aps o nome do elemento, precedido de um espao e
composto de um nome de atributo, um sinal de igual ( = ) e um valor
de atributo, cercado por aspas duplas ( " ) ou simples ( ) A tag
define o corpo ( body ) de uma pgina HTML. No exemplo seguinte
adicionei o atributo bgcolor (que significa "background color", ou
cor de fundo) para indicarmos que queremos que a pgina fique com
uma cor vermelha em seu plano de fundo. Este um exemplo com
formatao e utilizando atributos. Este texto est em negrito Vamos
considerar agora a tag , que define um elemento de uma tabela. Ao
juntarmos o atributo border (que significa borda) com o valor
apresentado a seguir, estamos dizendo ao navegador para no colocar
as bordas da tabela ( indica uma espessura nula para a linha de
contorno da tabela): Esta a minha primeira tabela. J no exemplo
abaixo estamos dizendo ao navegador para desenhar uma linha de
contorno com espessura 2 ( border="2" ) Esta a minha segunda
tabela. Os atributos sempre entram em pares nome/valor
(name/value), assim: name="value"Nota 1: Os atributos s podem
aparecer nas tags de incio. proibido colocar atributos nas tags de
fechamento. Nota 2: Para garantir a compatibilidade com a linguagem
XHTML, utilize letras minsculas para escrever o nome dos atributos,
e sempre coloque os valores entre aspas.Atributos podem ser
aplicados maioria das tags Voc normalmente usar atributos com mais
freqncia em algumas tags, tais como a tag body e raramente usar em
outras, como por exemplo, atag br que um comando para pular de
linha e no precisa de nenhuma informao adicional. Assim como
existem muitas tags, tambm existem muitos atributos. Alguns
atributos so empregados em tags especficas enquanto outros servem
para vrias tags. E vice-versa: algumas tags podem conter somente um
tipo de atributo, enquanto outras podem conter vrios tipos. Isto
pode parecer um pouco confuso, mas medida que voc for praticando
vai constatar que tudo fcil e lgico, bem como vai verificar as
inmeras possibilidades que os atributos oferecem.ELEMENTOS BSICOS
DA LINGUAGEM HTMLCabealhosOs cabealhos (tambm chamados de Headings)
servem para criar ttulos diferenciar as sees da sua pgina. Eles
possuem seis valores diferentes, sendo que a de valor 1 a que
possui a maior fonte e a de valor 6 possui a menor fonte.Por
exemplo, usando o seguinte cdigo: Ttulo 1 Ttulo 2 Ttulo 3 Ttulo 4
Ttulo 5 Ttulo 6 No cdigo acima, o HTML automaticamente solta uma
linha em branco entre um ttulo e outro.PargrafosOs pargrafos so
definidos com a tag Este um pargrafo Este um outro pargrafoNo cdigo
acima, o HTML automaticamente acrescenta uma linha em branco antes
e depois de um pargrafo.Alinhamentos de pargrafoVoc j deve ter
visto que em certos documentos o texto aparece ora alinhado
direita, ora esquerda, no centro ou ento ocupando uniformemente o
espao da pgina (texto justificado). Isso pode ser obtido facilmente
em HTML. Veja a tabela abaixo:ELEMENTO DESCRIO Alinha o texto
esquerda Alinha o texto direita Alinha o texto centralizado Alinha
o texto justificadoNote que entre os delimitadores < e > no
encontra-se apenas o elemento . Alm dele, existe o texto
align="alinhamento". Dizemos que align um atributo do elemento p e
alinhamento o valor desse atributo. No caso de , o valor do
atributo align (que significa alinhamento em ingls) justify
(justificado). Os atributos, as palavras que seguem oelemento,
informam o navegador a respeito das propriedades que os elementos
podem assumir. Confuso?! Pode parecer um pouco confuso, mas no .
Como disse a Toya, "Um disco de banda punk pode ter diversas
propriedades ou 'atributos' - a cor do disco, tamanho, velocidade,
etc, tudo isso so atributos." E eu digo mais: se voc coloca o disco
num toca-discos, voc pode ouvi-lo em duas ou no mximo trs
velocidades. s vezes d pra ouvir ao contrrio. Mas se voc arremessar
seus discos do Fofo, garanto que eles podero girar em muitas outras
velocidades. Assim o HTML, com muitas opes para voc exibir seu
texto. No HTML, os valores dos atributos podem ser definidos da
forma atributo=valor ou atributos="valor" (como em
align="justify"), que mais recomendada. Como voc viu, nem todos os
cdigos em HTML necessitam de atributos, em especial os comandos de
modificao de texto como negrito, itlico, sublinhado, etc.
Resumindo, os atributos definem caractersticas adicionais aos
elementos. Nas sees seguintes veremos elementos com vrios
atributos. Por exemplo, no adianta dizer ao seu navegador pra por
um link em alguma parte do seu texto, preciso dizer ao navegador,
por exemplo, pra que lugar esse link aponta. isso o que um atributo
faz. Criando uma diviso Existem momentos em que queremos que vrios
pargrafos possuam um mesmo valor de atributo - centralizado, por
exemplo. Ao invs de escrevermos align="justify" a cada abertura de
novo pargrafo, podemos usar o elemento div, que cria uma "diviso"
no documento na qual alguns atributos so preservados. Vejamos o
exemplo: Pargrafo 1 Pargrafo 1 Pargrafo 1 Pargrafo 2 Pargrafo 2
Pargrafo 2 Pargrafo 3 Pargrafo 3 Pargrafo 3 Experimente mudar os
atributos do alinhamento pra ver o que acontece!! Na parte de
Folhas de Estilo mostrarei como utilizar o elemento div para criar
sees lgicas em documentos. Quebras de Linha A tag
utilizada quando voc quer terminar uma linha, mas no quer comear um
novo pargrafo. Com este comando voc faz com que ocorra uma quebra
de linha, onde voc posicionar a tag. Note que para o elemento
no existe o comando , isto , a quebra de linha no age numa regio de
texto delimitada, mas sim num ponto do texto. Complicado?! Ento
vamos l, mais uma vez explicando de uma outra forma: comandos como
, e agem sobre uma regio do texto e precisam ser fechados com seus
respectivos , e , pois do contrrio esses comandos agiro at o fim do
documento. J o comando de quebra de linha, , e alguns outros atuam
somente no ponto onde eles aparecem.Veja o exemplo abaixo da
utilizao da tag
Este
um par
grafo com quebra de linha A tag
uma etiqueta vazia, ela no possui tag final.Comentrios A tag de
comentrio utilizada para inserir comentrios no cdigo fonte HTML.
Todo tipo de comentrio ignorado pelo navegador, isto , ele no ser
exibido na tela. Voc pode utilizar esta tag para explicar seu cdigo
fonte ou parte dele, que poder ajud-lo quando voc estiver editando
seus cdigos posteriormente.Note que voc precisa de um ponto de
exclamao depois do parnteses de abertura, e no antes do parnteses
final.O HTML uma Linguagem de marcao de texto. Mais
especificamente, uma linguagem de marcao de hipertexto. Portanto,
antes de comear a falar de HTML, vamos entender o que vem a ser uma
linguagem de marcao.Linguagens de marcao (markup languages em
ingls) so linguagens que combinam texto com informaes extras sobre
o texto. Essa informao extra pode ser representada por diversos
smbolos ou palavraschave diferentes, dependendo da linguagem de
marcao com que estivermos trabalhando.O HTML no era uma linguagem
de formatao de textos qualquer, ela possibilitava ligar textos que
estavam num computador a textos que estavam num outro computador,
usando como meio a internet. O processador e visualizador de HTML
so chamados de navegador, pela caracterstica do hipertexto que
permite ao usurio "nadar" na informao.O navegador (tambm chamado de
browser), nada mais faz do que abrir arquivos de computador e, caso
esses arquivos contenham cdigos HTML, interpret-los segundo o padro
do hipertexto e gerar a "pgina html", que a manifestao grfica dos
cdigos - aquilo que voc usualmente v quando navega pela internet.
Por conveno, os nomes dos arquivos em HTML terminam com .html.
Exemplo: index.html, foo.bar.html e etc.hml (existem tambm arquivos
html que terminam com .shtml e outras extenses malucas). Observe
que esses arquivos podem estar tanto no computador do usurio que
usa o navegador quanto em outros computadores: o navegador capaz de
abrir esses arquivos desde que eles estejam acessveis - as tais
pginas web.ESTRUTURA DE UMA PGINA EM HTML U ma pgina HTML dividida
em duas partes, a cabea e o corpo. Na cabea (ou cabealho) so
definidos os atributos principais do documento, como o ttulo e as
palavras-chave. O corpo contm a parte visvel do documento, i.e,
aquela que voc ver processada em seu navegador. Existe ainda uma
regio da pgina que est tanto fora da cabea quanto do corpo (no! no
a falta de juzo!), mas no iremos entrar nesse mrito.Um arquivo HTML
constitudo por textos que definem os elementos da linguagem HTML
usando "etiquetas de marcao"; As etiquetas de marcao do instrues ao
navegador sobre a estrutura do documento e sobre a forma de como a
pgina deve ser apresentada graficamente. Os arquivos HTML podem ser
escritos usando um simples editor de textos e seus nomes devem
possuir a extenso .html Inicie o Bloco de Notas (notepad.exe).Agora
digite o seguinte texto: Exemplo 01 Esta minha primeira pgina. Este
texto est em negrito Salve este arquivo com o nome ex01.htm.Abra o
seu navegador. Agora abra o arquivo que voc salvou acima, chamado
index.htm utilizando as opes do menu ou arrastando o cone do
arquivo para dentro da janela do navegador. Observe o
resultado.Explicao do Exemplo A primeira tag em seu documento HTML
. Esta tag define o incio de um documento HTML e indica ao
navegador que todo contedo posteriordeve ser tratado como uma srie
de cdigos HTML. A ltima tag em seu documento dever ser . Esta tag
indica ao navegador que o fim de seu documento HTML.O texto entre
as tags ... a informao do cabealho. Nenhuma informao contida no
cabealho exibida na janela do navegador.O texto entre as tags ... o
ttulo de seu documento. O ttulo ser exibido na legenda do
navegador, na parte de cima do browser.O texto entre as tags ... so
as informaes que sero exibidas na pgina.O texto entre ... ficar com
o estilo Negrito (Bold)Devemos usar a extenso .htm ou .html? Os
nomes dos arquivos escritos em HTML devem ter a extenso .html, mas
a extenso .htm ainda utilizada. Este fato uma herana dos tempos
(pr-histricos no que diz respeito Internet) do MS-DOS e do Windows
16 bits, em que os nomes dos arquivos tinham no mximo 8 caracteres
e as suas extenses no podiam ter mais de 3 caracteres. Essas
deficincias, que no passado obrigaram a usar a extenso .htm em vez
de .html j foram eliminadas. Por isso devemos usar a extenso .html,
a no ser que exista uma boa razo para voc estar utilizando .htm
(pouco provvel).Editores "Puros" versus WYSIWYG Existem duas formas
de se criar um texto formatado atravs de linguagens de marcao. A
primeira consiste em escrever o texto, usando as instrues da
linguagem, num editor de texto puro. Em seguida, usa-se o
processador de texto para produzir o texto formatado.A outra
maneira usar um editor de textos WYSIWYG (What You See Is What You
Get - O Que Voc V O Que Voc Tem). Apesar da sigla ser comprida, o
conceito simples: esse tipo de programa composto por um editor de
texto que tambm um processador de textos formatados. A diferena
aqui que o texto que o usurio est editando e visualizando no o
texto puro, mas sim o texto j formatado graficamente, ou seja, o
que voc v o que voc tem. Voc provavelmente j usou editores desse
tipo. Os editores como o Word, o AbiWord e o OpenOffice Writer so
WYSIWYG e os documentos que eles geram utilizam Linguagens de
marcao.Por que utilizamos tags com letras minsculas?! Em HTML os
nomes das tags e elementos podem ser escritos tanto com letras
maisculas quanto com letras minsculas, tanto que a mesma coisa que
. Se voc observar em tutoriais encontrados pela Web, vai notar que
os mais antigos geralmente utilizam letras maisculas para escrever
os nomes das tags, mas os mais modernos utilizam exclusivamente
letras minsculas. Nesta minha apostila utilizo sempre letras
minsculas porque existe uma razo muito forte para isso. A nova
gerao do HTML uma aplicao do XML e designada por XHTML. O XHTML a
melhor linguagem para se criar pginas para a Web, mas mais restrita
do que o HTML (rouba algumas das liberdades que o HTML oferece). Ao
contrrio do que acontece em HTML, em XML as etiquetas e representam
elementos diferentes, visto que em XHTML foi adotado uma conveno
segundo a qual todas as etiquetas devem ser escritas com letras
minsculas. Por este motivo extremamente recomendvel que se escreva
todas as etiquetas com letras minsculas. Deste modo, voc estar
adquirindo bons modos e quase no ter trabalho de converter suas
pginas HTML para XHTML.IMAGENSAlm de manipular texto, o html tambm
serve para exibir imagens de uma maneira muito simples, usando para
isso o elemento img:O atributo src - source, fonte em ingls - d o
nome do arquivo da imagem e o nico atributo obrigatrio para o
elemento img. Os atributos para a largura (width) e a altura
(height) no so necessrios, mas sero muito teis quando as pessoas
estiverem navegando em seu site: quando seu navegador abre um
arquivo html e encontra o elemento img, ele usar o respectivo
atributo src como o endereo onde est o arquivo de imagem a ser
exibido. Em outras palavras, o elemento img apenas passa uma
referncia do arquivo de imagem ao navegador, ou seja, voc no est
colocando esse arquivo de imagem dentro do seu arquivo html, voc
est apenas colocando em seu arquivo html uma referncia a esse
arquivo de imagem. O navegador, por sua vez, comea a baixar essa
imagem a partir desse endereo atributo enquanto termina de exibir o
documento.Dependendo do tipo de arquivo de imagem, ela s ser
exibido pelo navegador quando terminar de ser baixada. Se isso
ocorrer e voc no utilizou os atributos width e height no seu
documento, o navegador s reservar espao na tela do seu computador
para a exibio da imagem quando ela estiver sido baixada, e duranter
esse intervalo a formatao do seu documento pode ficar diferente.
Para evitar isso - somente por uma questo de estilo - recomendamos
que voc sempre use os atributos width e height, que informam ao
navegador o tamanho da imagem, antes mesmodele comear a baix-la, e
assim o espao na tela do seu computador ser apropriadamente
reservado para ela.11.1 - Tamanho de exibio da imagemOs atributos
width e height merecem um pouco mais de ateno. Como vimos, so os
atributos que determinam o tamanho que a imagem ser exibida.
Existem duas formas de se fazer isso, utilizando o tamanho em
pixels (tamanho absoluto) e em valores relativos ao tamanho
disponvel da tela do computador, isto , em porcentagem.Um pixel a
menor unidade luminosa da tela do seu computador que os programas
podem manipular, e isso depende muito da resoluo da tela do seu
computador. Um pixel um quadradinho luminoso. Atualmente as telas
de computador tem uma resoluo de 800 pixels de comprimento e 600 de
altura, s vezes pode ser de 1024 de comprimento e 768 na altura ou
resolues at maiores, de tal modo que nossos olhos j no conseguem
distinguir entre pixels contguos.O tamanho das imagens
computadorizadas tambm pode ser medido em pixels, que o tamanho que
a imagem vai ocupar na tela do seu computador quando ela for
exibida. Para que voc descubra qual o tamanho da sua imagem, voc
ter que usar algum programa de edio de imagens ou ento abri-la
diretamente no seu navegador. Experimente ir no menu Arquivo e
depois em Abrir, no seu nagevador, ou ento digitar a localizao da
imagem diretamente na barra de endereos. Quando a imagem for
exibida, clique sobre ela com o boto direito do seu mouse e em
seguida v em Propriedades. Uma janela com as informaes da imagens -
inclusive seu tamanho - dever aparecer. De posse desses valores,
basta colocar-los dentro da do img. No exemplo anterior, onde
usamos o cdigo width="221" height="300", a imagem foi exibida com
221 pixels de largura e 300 de altura, coincidentemente sendo seu
tamanho original. Poderamos ter escrito:Ou seja, a imagem foi
mostrada com um tamanho menor do que o original. Tambm poderamos
usar tamanhos maiores que original... que tal voc experimentar algo
como width="2210" height="3000"?!O segundo modo de determinar o
tamanho de exibio das imagens no navegador consiste em utilizar
porcentagem. Por exemplo: Resultar numa imagem exibida com um dcimo
(10%) do espao disponvel da tela do computador.Nos dois modos de
determinar o tamanho - em pixels e em porcentagem podemos escolher
valores independentes para a altura e a largura, de tal forma que a
imagem fique distorcida. Olha que engraado: 11.2 - Texto
alternativoExistem ainda outros atributos interessantes para a
exibio de imagens. Voc pode incluir uma descrio da imagem para que
se, por qualquer razo, algum no consiga ver a imagem ela possa ler
uma descrio no espao vazio. Essa descrio tambm aparecer quando voc
passar o mouse por sobre a imagem.Voc pode adicionar uma pequena
descrio desta maneira:O atributo alt (texto alternativo) utilizado
para dar a pequena descrio, neste caso "Emma Goldman!".11.3 - Borda
da imagemUma borda (contorno) da imagem pode ser adicionada com o
atributo border: O valor do atributo border indicar o tamanho dessa
moldura.Alinhamento da imagem possvel ainda colocar imagens e texto
um do lado do outro, de diversas formas. Vamos supor a mais
simples:O texto aparece ao lado da imagem.Esse cdigo pode funcionar
muito bem, mas s vezes acontece do texto aparecer abaixo da imagem.
Para fazer o posicionamento da imagens e do texto corretamente,
basta utilizar o atributo align, que funciona de modo anlogo ao do
alinhamento de paragrfos: O texto vai aparecer esquerda da imagem
(o atributo right faz que a imagem fique direita da tela), mesmo
tendo escrito aps o cdigo sobre a imagem. Enquanto o texto puder
ficar ao lado da imagem, ele ficar.Quando ele no mais couber nesse
espao, ele comear a ser exibido abaixo da imagem, como voc pode ver
aqui. Utilizar o alinhamento de imagens a melhor maneira de
garantir que ela aparecer no local desejado. Espaamento da imagem
Notou como o texto do exemplo anterior saiu colado imagem?! possvel
definir um espaamento entre a imagem e qualquer objeto (texto,
imagem, tabelas) que esteja ao seu lado, acima ou abaixo, usando
para isso os atributos vspace (espaamento vertical) e hspace
(espaamento horizontal). O valor desses atributos diz ao navegador
qual ser o espao em pixels entre a imagem e qualquer objeto: O
texto vai aparecer direita da imagem, a cinco pixels de distncia
dela. Deu pra notar a diferena?! Utilizando todos esses atributos
para a exibio de imagens voc obtm um texto bem diagramado e bonito
de ser lido. Nota: Ao utilizar imagens, lembre-se de que elas podem
aumentar consideravelmente o tempo de carregamento para ver o
contedo de suas pginas, por isso, use-as com cuidado.Elementos
relacionados com imagensELEMENTO DESCRIO Insere uma imagem Define
um mapeamento sobre a imagem ("image map") Define uma rea clicvel
sobre um mapa de imagemFundos de PginaUma cor ou uma imagem de
fundo bem escolhido podem melhorar o aspecto da pgina, mas uma m
escolha capaz de causar danos muito graves na legibilidade e no
aspecto geral da pgina. O atributo bgcolor do elemento O elemento
possui atributos que nos permitem especificar as cores do texto e a
cor de fundo. Tambm podemos usar uma imagem como padro de fundo. O
atributo bgcolor nos permite escolher a cor de fundo da pgina. O
quadro seguinte mostra trs formas de indicar a cor de fundo da
pgina usando um cdigo de cor hexadecimal, um cdigo RGB e um nome de
cor (veja mais frente o tpico sobre cores). As linhas apresentadas
mais acima usam formas diferentes (mas todas vlidas) para dar a cor
preta ao fundo da pgina.Nota: a forma recomendada para formatar o
texto e os fundos de pgina baseia-se em estilos CSS. A utilizao do
atributo bgcolor s se justifica se precisarmos de manter a
compatibilidade com navegadores antigos que no suportam CSS
(veremos sobre CSS no fim da apostila).O atributo backgroundO
atributo background estabelece que o padro de fundo da pgina ser
uma imagem. O valor deste atributo indica o local onde se encontra
a imagem. Se as dimenses da imagem forem inferiores s dimenses da
pgina, o navegador repetir a imagem (como num cho de mosaicos ou em
uma parede de azulejos), por forma a ocupar todo o fundo da pgina.O
exemplo abaixo mostra bem como se faz isso: O valor do atributo
background uma URL (site) que define o local onde se encontra a
imagem. Na primeira linha mais acima, demos uma URL relativa e na
segunda demos uma URL absoluta.Nota: a forma recomendada para
formatar o texto e os fundos de pgina baseia-se em estilos CSS. A
utilizao deste atributo s se justifica se precisarmos de manter a
compatibilidade com navegadores antigos que no suportam CSS. Dicas
Sempre que utilizar uma imagem de fundo na pgina, no se esquea
destes aspectos: Certifique-se de que o tamanho da imagem (em
KBytes) no muito grande, pois em caso afirmativo, o tempo para
carregar a pgina aumentaria consideravelmente. Certifique-se de que
a imagem de fundo combina bem com a cor do texto. Certifique-se de
que o fundo combina bem com as outras imagens da pgina. Verifique
se a repetio da imagem de fundo em mosaico resulta em um padro
perfeito. Se voc perceber algumas falhas aparentes, utilize outra
imagem de fundo ou faa uma edio nesta atual. Certifique-se de que a
imagem no incmoda e que no desvia a ateno do texto.Os atributos
bgcolor, background e text do elemento foram reprovados nas
recomendaes mais recentes da W3C para a linguagem HTML (HTML 4 e
XHTML). A forma recomendada para obter os mesmos resultados
baseia-se na utilizao de estilos CSS. A utilizao destes atributos s
se justifica se precisarmos de manter a compatibilidade com
navegadores antigos que no suportam CSS. So poucos os sites de
qualidade que utilizam imagens de fundo, e aqueles que o fazem,
usam fundos que no atrapalham a visualizao do site.LIGAES DE
HIPERTEXTO ("LINKS") Essa uma das sees mais importantes desta
apostila, pois afinal estamos falando de hipertexto. Queremos que
uma pgina HTML possa fazer referncia a outras pginas html ou para
qualquer outro tipo de arquivo que se encontre em outros lugares da
web. No jargo da internet, voc quer ligar (link) parte da sua pgina
com outras. Isso feito de modo muito simples com o elemento a, como
segue: CMI Brasil Como voc deve ter percebido, o atribudo href
(Hipertext Reference / Referncia de Hipertexto) indica o endereo da
pgina que voc quer "linkar" (ligar) ao seu documento. No exemplo
acima, o texto CMI Brasil aparece como uma referncia para o link.
Se voc clicar sobre esse texto, seu navegador automaticamente
tentar abrir a pgina http://www.midiaindependente.org Os endereos
so escritos na forma de URL (Uniform Resource Locators), que uma
maneira que inventaram para se especificar o caminho at se chegar
num arquivo que esteja nalgum local da internet.O formato da URL :
protocolo://nome-do-computador/pastas/arquivo O protocolo indica
como o navegador ir buscar o arquivo. Nome do computador aquele
endereo do tipo www.ninguem.com.br e as pastas so os diretrios
dentro desse computador onde esto os arquivos. Uma URL de um artigo
do site da CMI Brasil , por exemplo,
http://www.sp.senai.br/pt/blue/2004/09/290669.shtml, onde http:// o
protocolo, pt, blue, 2004 e 09 so pastas (uma fica dentro da outra)
e 290669.shtml o nome do arquivo. http:// \--- www.sp.senai.br \---
pt \-- blue \--- 2004 \--- 09\--290669.shtml Lembre-se tambm que
quando voc acessa o endereo http://www.ninguem.com.br, por exemplo,
est na verdade vendo o arquivo
http://www.ninguem.com.br/index.html. Os arquivos do tipo
index.html sempre so procurados pelo navegador quando voc solicita
apenas o nome do site ou uma pasta de um computador. Em html,
existem trs formas possveis de se fazer links: os links internos,
os links locais (ou relativos) e os links externos.Links internos
Links internos so aqueles que ligam uma seo de uma pgina com uma
outra seo da mesma pgina. Por exemplo, se eu quiser fazer uma
referncia para a seo Hipertexto dessa nossa apostila, basta que eu
primeiro defina um nome para a seo Hipertexto e ento adicione um
link pra ela. Isso feito da seguinte forma: 1 - Vou at o incio da
seo Hipertexto e adiciono o seguinte cdigo, ao invs de simplesmente
escrever o ttulo da seo: Hipertexto 2 - Adiciono o link pra essa
seo com o seguinte cdigo, V para a seo hipertexto O atributo name
serve apenas para dar um nome para uma posio de uma pgina html. O
valor de name pode ser qualquer um (nesse caso eu coloquei
"Hipertexto"). Quando voc fizer uma referncia a um link interno
utilizando o atributo href, voc precisa necessariamente adicionar o
caractere # (jogo da velha) antes do nome da sua seo - no nosso
caso, #Hipertexto - pois do contrrio seu navegador tentar abri-lo
como um link local. Links locais ou relativos Links locais so
aqueles que referenciam um arquivo que esteja no mesmo computador
que a sua pgina. Links locais no contm o http:// no incio do
endereo. Por exemplo, se no meu documento html eu quiser fazer um
link para o arquivo links.html que est na mesma pasta do meu
documento, no preciso digital o endereo completo, mas apenas:
Acesse os links! Esse tipo de argumento para o href tambm chamado
de links relativos. Se voc quiser linkar uma pgina que esteja do
diretrio (pasta) superior da sua pgina, use dois pontos e uma barra
antes do nome do arquivo: Acesse os links! A vantagem de voc usar
links relativos que voc pode mover todo o seu site para um novo
endereo na internet e no precisar reeditar todos os links que
apontam para pginas do seu prprio site.Links externos Links
externos so aqueles que podem apontar para qualquer arquivo
disponvel na internet, como por exemplo: SENAI! Os links externos
precisam necessariamente conter o prefixo http:// e o endereo
completo do arquivo. Alvo (target) Um atributo interessante para o
elemento o target, que permite que o link seja aberto numa outra
janela do seu navegador. Acesse o SENAI! O argumento do atributo
target o nome da janela do navegador que abrir o link. Se voc
quiser que o link seja aberto numa nova janela, simplesmente
escolha qualquer nome como argumento. Elementos para fazer ligaes
ELEMENTO DESCRIO Define uma ncora ou uma ligao de hipertextoLISTAS
A linguagem HTML contm elementos que permitem criar listas de
definies, listas ordenadas e listas no ordenadas. Listas No
Ordenadas Uma lista no ordenada contm vrios itens marcados todos
com o mesmo smbolo (normalmente um crculo pequeno ou um quadrado
pequeno). Para criar uma lista no ordenada, utilizamos o
elemento
("unordered list"). Dentro desse elemento, os vrios itens so
criados com o elemento ("list item").O exemplo seguinte mostra uma
lista simples:RumBagaoEste o aspecto de como vai ficar em
seu navegador: Rum BagaoDentro de uma lista no ordenada podemos
colocar pargrafos, quebras de linha, imagens, outras listas, etc.
Listas OrdenadasUma lista ordenada contm vrios itens numerados e
criada com o elemento ("ordered list"). Os itens da lista
definem-se com o elemento ("list item"). Rum Bagao Este o aspecto
de como vai ficar em seu navegador:Rum Bagao Dentro de uma lista
ordenada podemos colocar pargrafos, quebras de linha, imagens,
outras listas, etc. Listas de Definies Uma lista de definies no
constituda por uma srie de itens, mas sim por vrios termos
acompanhados de descries de seus significados. As listas de
definies so criadas com o elemento ("definition list") O nome de
cada termo fica dentro de um elemento ("definition term") e a sua
descrio fica no elemento ("definition description") Rum Bebida
espirituosa muito apreciada pelos piratas do CaribeBagao Bebida com
elevado teor alcolico. A sabedoria popular atribui-lhe fortes
propriedades teraputicas. Este o aspecto de como vai ficar em seu
navegador:Rum Bebida espirituosa muito apreciada pelos piratas do
Caribe Bagao Bebida com elevado teor alcolico. A sabedoria popular
reconhece-lhe fortes propriedades teraputicas.Dentro de um elemento
podemos colocar pargrafos, quebras de linha, imagens, outras
listas, etc.Elementos para ListasELEMENTO DESCRIO Define uma
lista ordenada Define uma lista no ordenada Insere um item na lista
Insere uma lista de definies Apresenta a definio de um termo Insere
a definio de um termo Desuso. Utilize Desuso. Utilize
MODIFICANDO O CORPO DO DOCUMENTO Como j vimos, o elemento body
engloba o corpo do seu documento HTML. Ele possui muitos atributos
que possibilitam modificar a aparncia da sua pgina, como cor de
fundo ou das letras. Esses atributos tambm podem ser utilizados
junto com o atributo td. Aqui mostraremos apenas os atributos que
interferem nas cores da sua pgina:bgcolor: define a cor de fundo de
um documento text: a cor do texto link: a cor dos links alink: a
cor dos links ativos atualmente (a pgina que voc est visitando)
vlink: cor dos links j visitados Os argumentos so o nome ou o nmero
de uma cor, exatamente como no caso do atributo color usado no
elemento font. Por exemplo: Isso uma confuso! Isso uma pgina em
html. Essa uma pgina HTML onde o fundo ser preto, com letras
cinzas, links em vermelho e links ativos em branco. Essas so as
definies globais de cor para seu documento, e a qualquer instante
voc pode mudar as cores com o elemento font.GUIA DE REFERNCIA RPIDA
Como resumo de todo o cdigo HTML apresentado at agora, deixo
algumas tabelas de referncia rpida que podem ser at impressas e
guardadas no bolso.Caractersticas gerais de um documento HTML CDIGO
html head title body EXIGE FECHAMENTO sim sim sim simFUNO bloco
interno considerado documento html bloco que define a cabea do
documento bloco que define o ttulo do documento bloco interno
considerado o corpo do htmlAparncia do documento CDIGO b i u font
EXIGE FECHAMENTO sim sim sim simFUNO bloco em negrito bloco em
itlico bloco sublinhado muda as caractersticas da fontepremantm o
texto pr-formatadosimQuebra de linha, pargrafos e divises CDIGO br
center p div FUNO quebra de linha texto centralizado pargrafos cria
uma divisoEXIGE FECHAMENTO no sim recomendado simAtributos diversos
CDIGO ATRIBUTO FUNO p, div align alinhamento font font font face
color size fonte, nome da fonte cor tamanho ver a tabela de cores
disponvel na pasta APOIO -7 a +7 VALORES POSSVEIS letf, right,
justify, centerEspaamento e entidades CDIGO FUNO espao simples
EXIGE FECHAMENTO no uma tagO documento HTML bsico Aqui colocamos o
ttulo Aqui colocamos os contedos visveis Elementos de cabealho
(para captulos ou seces) Cabealho maior . . . . . . . . . . . .
Cabealho menorElementos para texto Isto um pargrafo
(mudana forada de linha) (linha horizontal) Isto texto
pr-formatadoEstilos lgicos Isto texto enfatizado Isto texto forte
Isto cdigo de computadorEstilos fsicos Isto texto em negritoIsto
texto em itlicoLigaes e ncoras Isto uma Ligao Enviar e-mailUma
ncora com nome: Dicas teis Saltar para a Seo de DicasLista no
ordenada Primeiro itemItem seguinteLista ordenada Primeiro
itemItem seguinte Lista de definies Primeiro termo Definio Termo
seguinte Definio Tabelas um cabealho outro cabealho algum texto
mais texto Subjanelas (molduras, ou "frames") Formulrios Rabanetes
Alhos Cebolas Entidades < representa o mesmo que < >
representa o mesmo que > representa o mesmo que Outros Elementos
Texto citado a partir de uma fonte externa. Endereo (1 linha)
Endereo (2 linha)
Cidade
TABELAS Tabelas auxiliam na visualizao de dados ou na diviso de sua
pgina em setores. Entenda por uma tabela HTML como sendo semelhante
a uma tabela que voc desenharia numa folha de papel ou num outro
programa de computador. O elemento principal de uma tabela o table
e aqui segue um exemplo simples de tabela: Primeira Segunda
Terceira Quarta Em HTML, as tabelas so divididas em linhas e
clulas. Na tabela acima, a primeira linha contm as clulas Primeira
e Segunda, enquanto que a segunda linha contm as clulas Terceira e
Quarta. Dentro de um bloco table, os principais elementos que voc
utilizar so o tr, ou table row (linha), e o td, ou table data
(clula). Dessa forma, podemos definir aslinhas e as clulas da
tabela. mandatrio que um bloco td esteja definido dentro de um
bloco tr, ou seja, que as clulas estejam dentro de linhas. No
exemplo anterior, criamos uma linha com tr e em seguida, dentro de
um bloco td, escrevemos o texto da clula (Primeira). Abrimos outro
bloco td nesse mesmo bloco tr, onde colocamos o texto da segunda
clula (Segunda). Depois, fechamos a linha com o para em seguida
abrir uma nova linha, onde criamos as clulas contendo os textos
Terceira e Quarta. O atributo border no elemento table serve para
dar borda tabela. Sem o ele no ficaria muito distinto onde comea e
termina cada uma das clulas: Primeira Segunda Terceira Quarta
Dentro de um bloco td possvel colocar cdigos HTML e inclusive criar
at tabelas dentro de clulas! Veja s: Primeira Segunda Terceira
Quarta Quinta Espaamento entre clulas Para controlarmos a distncia
entre duas clulas, utilizamos o atributo cellspacing, cujo
argumento dado em pixels: Primeira Segunda Terceira Quarta Para
controlar o espaamento vertical, utilizamos o cellpadding: Primeira
Segunda Terceira Quarta Preenchimento de clulasPode ser que voc
queira uma tabela onde a primeira linha tenha duas clulas, a
segunda com apenas uma clula e a terceira com trs clulas. Faremos o
seguinte: Primeira Segunda Terceira Quarta Quinta Sexta Percebeu
como a tabela ficou cheia de buracos?! Para que as clulas preencham
os buracos, utilizaremos o atributo colspan: Primeira Segunda
Terceira Quarta Quinta Sexta Da mesma forma, se quisermos uma
coluna com apenas uma clula e outra com duas, poderamos usar o
atributo rowspan. Veja a diferena entre usarmos e no usarmos o
rowspan: Primeira Segunda Terceira Primeira Segunda Terceira
Largura de clulas e tabelas Para escolher a largura de tabelas e
clulas, utiliza-se o j conhecido atributo width, cujo argumento
idntico para o caso de imagens: Primeira Segunda Terceira Quarta
Note que quando o width utilizado com o elemento table, a largura
referese largura da pgina, enquanto que quando usado dentro de um
td a largura referente ao tamando da tabela. Isso tudo desde que o
argumento seja dado em porcentagem e no em pixels.
Top Related