REVISÃO HTML Uma página HTML é reconhecida pelas seguintes

Transcrição

REVISÃO HTML
Uma página HTML é reconhecida pelas seguintes tags:
<HTML>
<HEAD>
<TITLE></TITLE>
</HEAD>
<BODY>
</BODY>
</HTML>
Texto, imagem, formulários devem ficar entre as tags <BODY> e </BODY>
<HTML>
◦
◦
◦
Ela é o elemento raiz de um documento HTML, pois dentro dela está todo o conteúdo da
página.
Esta tag diz ao navegador para iniciar um novo documento HTML, onde o conteúdo que
deverá ser exibido esta entre as tags <HTML> e <\HTML>.
Abertura e fechamento do documento HTML.
</HTML>
<HEAD>
<TITLE>
◦ Define o título da página.
◦ Representa a abertura e fechamento do título do documento
</TITLE>
</HEAD>
 O texto contido ente as TAG <HEAD> e <\HEAD> define o cabeçalho do documento. Representa a
abertura e fechamento do cabeçalho do documento
<BODY>
◦
◦
O corpo da página “BODY” é constituído pelo conteúdo que está entre as tags <BODY> e
</BODY>.
informa ao navegador o que deverá ser exibido graficamente.
</BODY>
ATRIBUTOS DE BODY
 bgcolor = nomecor | #rrggbb | rgb(x,x,x)
 Define uma cor de fundo para a página
◦ Exemplos:
<body bgcolor="blue">
<body bgcolor="#0000FF">
 background=nomearquivo
 Define uma imagem como fundo de uma página. Supondo a existência de um
arquivo de imagem com o nome "imagem.gif" no mesmo diretório onde se
encontra
a
página,
podemos
fazer
o
seguinte:
<body
background="imagem.gif">.
 Se o arquivo de imagem não estiver no mesmo diretório, será necessário
especificar o caminho.
 text=nomecor | #rrggbb | rgb(x,x,x)
 Define a cor do texto para todo o corpo da página, ou seja, para tudo que está
entre as tags <body> e </body>, sendo que o padrão é black (preto). Pode-se
usar o nome da cor, o código hexadecimal no formato #rrggbb ou o código
decimal no formato rgb(x,x,x).
◦ Exemplos:
<body text="blue">
<body text="#00FF00">
 Se você quer que o texto da página, do início ao fim, tenha determinada cor,
então defina esse atributo. Mas, no decorrer do texto você pode mudar a cor de
segmentos da página, utilizando a tag <font> com o seu atributo color. Mas,
depois que for aplicada a tag de fechamento </font>, o texto volta à cor
estabelecida no atributo text de <body>.
Veja o exemplo abaixo:
<body text="green">
<p>Este parágrafo é verde, porque essa cor foi estabelecida como
atributo de body.</p>
<p><font color="blue">Estas palavras são azuis,</font> mas estas
voltam a ser verdes.</p>
</body>
 link=nomecor | #rrggbb | rgb(x,x,x)
 Define a cor dos links que não foram visitados
◦ Exemplos:
<body link="blue" vlink="green" alink="yellow">
 vlink=nomecor | #rrggbb | rgb(x,x,x)
 Define a cor dos links já visitados.
◦ Exemplos:
 alink=nomecor | #rrggbb | rgb(x,x,x)
 Define a cor dos links ativos. Um link está ativo no momento em que se dá um
clique nele.
◦ Exemplos:
COMENTÁRIOS
 Os comentários servem para dizer ao navegador que o conteúdo é apenas anotações e que não
devem ser apresentados graficamente na página.
 Os comentários são utilizados para explicar o código fonte para que mais tarde seja possível
compreender o que foi feito.
 Comando: 
TAGS REFENTES A TEXTOS
CABEÇALHOS
A tag <H> permite especificar até seis níveis de cabeçalhos. São 6 níveis: h1 (o maior) até h6 (o menor).
Exemplo:
<H1>texto aqui</H1>
<H2>texto aqui</H2>
<H3>texto aqui</H3>
<H4>texto aqui</H4>
<H5>texto aqui</H5>
<H6>texto aqui</H6>
OBS: É necessário abertura e fechamento.
Atributos das tags <H>




Align = left (alinhar a esquerda)
Align = right (alinhar a direta)
Align = center (alinhar ao centro)
Align = justify (justificado)
◦
Exemplos:
<h1 align= center> O texto vem sempre entre a tag </h1>
PARÁGRAFO
A tag <p> Inicia um parágrafo pulando uma linha.
Atributos da tag <P>




Align = left (alinhar a esquerda)
Align = right (alinhar a direta)
Align = center (alinhar ao centro)
Align = justify (justificado)
◦
Exemplos:
<P align= center>texto aqui</P>
Observação:
Não é necessário fechamento, contudo caso utilize atributos que não serão repetidos a todos feche-a para
que este não se espalhe.
QUEBRA DE LINHA
Representado pela tag <br> é usada para terminar uma linha sem iniciar um novo parágrafo
Atributos da tag <BR>
◦
Clear - Utilizado para interromper o fluxo de texto ao lado de uma imagem ou tabela. Quando
<img> ou <table> contém o atributo align definido como left ou right, o texto inicia-se ao lado da
imagem ou da tabela e vai contornando-a. Então, <br> com o atributo clear faz com que esse fluxo
lateral seja interrompido.O texto é jogado para a próxima margem livre.
◦ left - pula e atinge a margem livre após a imagem ou tabela alinhada à esquerda.
◦ right - pula e atinge a margem livre após a imagem ou tabela alinhada à direita.
◦ all - pula e atinge as duas margens livres (esquerda e direita).
◦
Exemplo: <img src="imagem.gif" align="right">texto<br clear=all>texto
Observação:
Usa-se all com mais freqüencia porque há situações em que, com sua utilização, pode-se obter o mesmo
que obteríamos com left ou right. Mas left e right têm especial importância quando temos uma imagem ou
tabela à esquerda e outra à direita, e uma delas é menor na altura. Neste caso, você pode querer que o
efeito seja interrompido apenas em relação à imagem menor, mas que continue em relação à maior.
<FONT>
Estabelece o tipo de fonte, o tamanho e a cor.
Atributos da tag <FONT>
◦
Face- Define a fonte do texto, como arial, verdana, etc. O padrão costuma ser Times New Roman,
dependendo do navegador. Você deve preocupar-se em colocar uma fonte mais comum, porque
pode ser que o visitante não tenha a que você escolheu instalada em seu computador. Caso ocorra
isso, o texto será exibido com a padrão.
◦
Exemplos:
<font face="arial">
<font face="Comic Sans MS,arial,verdana">
Pelo segundo exemplo, você percebe que pode especificar mais de uma fonte, para que o
navegador escolha a primeira, se encontrá-la, e se não encontrar, coloque a segunda e assim por
diante. Neste caso você não pode deixar de colocar o valor do atributo entre aspas que em alguns
casos são opcionais. Quando um atributo possui espaços em seu interior as aspas passam a ser
necessárias. No caso exemplificado, não fossem colocadas as aspas, o navegador entenderia que o
nome da primeira fonte é apenas Comic. Note que tem de ser apenas um par de aspas, englobando
todos os nomes.
Observação:
Quando você coloca a tag <font> com os atributos face, size e color em qualquer ponto do documento, a
partir daí todo o texto terá essa fonte até encontrar o fechamento </font>, exceto o conteúdo das tabelas.
O texto antes e depois de uma tabela terá a fonte que você definiu, mas o texto dentro de suas células terá
a fonte padrão. Então, é preciso definir a fonte dentro de cada célula, ou seja, utilizar as tags <font> e
</font> entre <td> e </td>.
◦
Color- Define a cor da fonte do texto. Pode-se usar o nome da cor, o código hexadecimal no
formato #rrggbb ou o código decimal no formato rgb(x,x,x). Neste último formato, x pode ser um
número de 0 a 255 ou um percentual de 0% a 100%.
◦
Exemplos:
<font face="arial" size="2" color="green">
<font face="arial" size="2" color="#00FF00">
<font face="arial" size="2" color="rgb(0,255,0)">
<font face="arial" size="2" color="rgb(0%,100%,0%)">
Note que o símbolo # no início do código hexadecimal é obrigatório.
Observações:
- Muitas vezes você não poderá utilizar o nome das cores, porque poucas têm um nome reconhecido pelo
navegador. É recomendável que se utilize sempre o código hexadecimal.
- Se a definição da cor não for feita em <font> (ou, se feita, mas depois fechada com </font>), o texto será
apresentado na cor padrão que é o preto (black ou #000000) ou a definida no atributo text de <body>.
- Ao definirmos uma cor para o texto, devemos considerar a cor que foi escolhida como fundo, para que
ocorra o devido contraste entre ambas e fique assegurada a nitidez dos caracteres. Assim, um fundo de cor
clara exige uma cor escura para o texto, já um fundo de cor escura exige uma cor clara.
- Quando você coloca a tag <font> com os atributos face, size e color em qualquer ponto do documento, a
O texto antes e depois de uma tabela terá a fonte que você definiu, mas o texto dentro de suas células terá
a fonte padrão. Então, É preciso definir a fonte dentro de cada célula, ou seja, utilizar as tags <font> e
◦
Size- Define o tamanho da fonte do texto. Existem 7 tamanhos numerados de 1 a 7 por ordem
crescente. Portanto, se especificarmos size="1", teremos o menor tamanho e, se especificarmos
size="7", teremos o maior. Você notará que esses números não coincidem com os números que
identificam o tamanho da fonte em seu processador de textos, como o Word, onde encontramos,
por exemplo, tamanhos 10, 12, etc. Aqui é uma escala de 1 a 7 que vigora.
◦ Exemplo:
<font size="2">.
Existe também outra maneira de especificar esse tamanho de fonte. Podemos modificar o tamanho
definido anteriormente utilizando os sinais + e -.
◦ Exemplo:
<font size="=+1">
No caso deste último exemplo, se o tamanho anterior era 2, passa a ser três. Ou seja, você pode aumentar
ou diminuir o tamanho, em vez de especificar outro.
Observação:
- Quando você coloca a tag <font> com os atributos face, size e color em qualquer ponto do documento, a
- O texto antes e depois de uma tabela terá a fonte que você definiu, mas o texto dentro de suas células
terá a fonte padrão. Então, É preciso definir a fonte dentro de cada célula, ou seja, utilizar as tags <font> e
<B> TEXTO EM NEGRITO
◦ Exemplo: <B>texto aqui</B>
<I> TEXTO EM ITÁLICO
◦
Exemplo: <I>texto aqui</I>
<U> TEXTO SUBLINHADO
◦ Exemplo: <U>texto aqui</U>
<SUP> TEXTO SOBRESCRITO
◦ Exemplo: <SUP>texto aqui </SUP>
<SUB> TEXTO SUBSCRITO
◦ Exemplo: <SUB>texto aqui</SUB>
<TT>TEXTO MONO-ESPAÇO
◦ Exemplo: <TT>texto aqui</TT>
<HR>
Cria uma linha divisória horizontal.
Atributos da tag <HR>
◦
align=left | center | right - Com esse atributo você pode também definir o alinhamento de uma
linha horizontal. É claro que neste caso você deverá também definir uma extensão com o atributo
size. Isso porque o padrão da extensão da linha é de 100% e, sendo assim, não surtirá nenhum
efeito um alinhamento como right ou center, já que a largura da página estará integralmente
ocupada.
◦ Exemplo: <hr align="center">
◦
size=x - Define a espessura da linha horizontal criada. Pode ser um número de 1 a 100.
Especificando um número maior que 100, será entendido como 100.
◦ Exemplos:
<hr size="5">
<hr size="10">
◦
width=x | x% - Define a extensão da linha horizontal criada. O padrão é a linha atingir toda a
largura da página. Deve ser especificado em quantidade de pixels ou em percentual. Veja os
◦ Exemplos:
<hr width="200"> - A linha terá 200 pixels de extensão.
<hr width="50%"> - A linha terá uma extensão igual à metade da largura da página
◦
noshade - A linha horizontal sem esse atributo é desenhada com uma sombra que lhe dá um efeito
de três dimensões. Com esse atributo a linha fica sem essa sombra, ou seja, perde o efeito de três
dimensões.
◦ Exemplo: <hr noshade>
<DIV>
Abertura e fechamento de uma divisão de página cujos elementos que estão dentro dela obedecerão às
mesmas definições.
Atributos da tag <DIV>
 Align = left (alinhar a esquerda)
 Align = right (alinhar a direta)
 Align = center (alinhar ao centro)
Outra aplicação desse atributo é na divisão de página criada pela tag <div>. O objetivo dessa tag é o de
estabelecer uma única formatação para todo o bloco englobado por ela. Você define o alinhamento de
todos os elementos que estão dentro do bloco por atacado. Suponha que você queira dar o mesmo
alinhamento para dez parágrafos. Uma das formas seria especificar o atributo align nas dez tags <p>. Mas é
melhor colocar tudo entre as tags <div> e </div> e fazer a definição uma vez só. Quanto aos valores
atribuídos, eles são os mesmos que vimos para o alinhamento de parágrafo. Mesmo tendo sido definido
um alinhamento dentro do bloco <div>, você pode ainda alinhar parágrafos específicos de forma diferente,
abrindo exceções dentro do bloco. Mas depois que for novamente aplicada a tag <p> sem esse
alinhamento particular, volta a funcionar o que foi estabelecido em <div>.
◦ Veja como funciona:
<div align="right">
<p>Este parágrafo está alinhado à direita por causa da definição em
div
<p>Este também.
<p align="left">Este está à esquerda.
<p>Volta a definição feita em div
</div>
TAGS REFENTES A LISTAS
LISTA NÃO NUMERADA
As listas não numeradas inserem marcadores na frente de cada item.
 Comando:
<UL TYPE=”formato”>
<LI> Item 1
<LI> Item 2
<LI> Item 3
</UL>
Atributos da tag <UL>
As listas não ordenadas também possuem um tipo de marcador. O padrão é um pequeno círculo cheio.
Para mudar o tipo de marcador nas listas não ordenadas, atribua um dos seguintes valores ao atributo
type:
 TYPE=”formato”: indica o formato do marcador da lista, pode ser:
 disc : formato de ponto (padrão utilizado pelos navegadores);
 square: formato de quadrado;
 circle: formato de círculo;
◦
Exemplo: <ul type=circle>
LISTA NUMERADA
A lista numerada é semelhante a lista não numerada, porém no lugar de marcadores é inserido na página
uma lista numérica ou alfabética, com valor pré-definido ou não.
 Comando:
<OL TYPE=”formato” START=”n”>
<LI> Item 1
<LI> Item 2
<LI> Item 3
</OL>
Atributos da tag <OL>
As listas ordenadas têm, por padrão, os seus itens numerados com algarismos arábicos. Você poderá
mudar o tipo de marcador para letras, minúsculas ou maiúsculas, ou para algarismos romanos, minúsculos
ou maiúsculos. Para fazer isso basta definir o atributo type com um dos seguintes valores:
 TYPE=”formato”: indica o formato do marcador da lista, pode ser:
 1 - seqüência numérica (algarismos arábicos) - o padrão.
 a - letras minúsculas.
 A - letras maiúsculas.
i - seqüência numérica (algarismos romanos minúsculos).
 I - seqüência numérica (algarismos romanos maiúsculos).
◦
Exemplo: <ol type="A">
 START = “n”
Você pode querer definir um número a partir do qual os itens de sua lista ordenada comecem a ser
contados (o padrão é 1). Por exemplo: <ol start="3">. Isso vale para qualquer tipo de ordem, seja
em algarismos arábicos, em romanos (minúsculos ou maiúsculos), ou letras do alfabeto (minúsculas
ou maiúsculas), mas o valor atribuído a start sempre será em algarismo arábico.
◦
Exemplos:
<ol start="3"> - Os itens da lista serão numerados a partir de 3. Não precisa
de type porque o padrão é adotado.
<ol type="i" start=3> - O primeiro item será iii.
<ol type="A" start=3> - O primeiro item será C.
Observação:
Utilizamos o atributo type também na tag <LI>. Esta tag representa os itens de uma lista.
Quando utilizamos o atributo type em <ol> ou <ul>, estamos definindo o tipo de marcador para toda a
lista. Entretanto, você pode definir um tipo de marcador diferente para um item específico de uma lista,
usando o mesmo atributo na tag <li>. Se o item pertencer a uma lista ordenada, use os mesmos valores
que são usados em <ol> e, se pertencer a uma lista não ordenada, use os mesmos valores que são usados
em <ul>.
◦
Eis os exemplos:
<li type="A">
<li type="circle">
LISTA INTERCALADAS
As listas intercaladas são utilizadas para melhor organizar as estruturas dos itens, podendo criar
hierarquias, unindo listas numeradas com listas não numeradas.
◦ Exemplo:
<h1> Lista Intercaladas</h1>
<UL>
<LI>Estados da Região Sul
<UL>
<LI>Paraná
<LI>Santa Catarina
</UL>
<LI>Estados da região Sudeste
<OL>
<LI>São Paulo
<LI>Rio de Janeiro
<LI>Minas Gerais
</OL>
</UL>
LISTA DE DEFINIÇÕES
A lista de definições são diferentes das demais listas, pois cada item da lista possui dois elementos: um
item e uma descrição do item.
 Comando:
<DL>
<DT> Item 1
<DD> Descrição do Item 1
<DT> Item 2
<DD> Descrição do Item 2
</DL>
TAGS REFENTES A LINKS
<a>
Estabelece um texto ou imagem como link. ë necessário fechamento.
Atributos da tag <a>
 HREF=ARQUIVODESTINO
Define o destino do link. O valor atribuído a href pode ser um nome de um arquivo, um caminho
completo do arquivo (path), uma URL ou ainda um alvo localizado no interior de uma página.
◦
Exemplos:
<a href="arq.htm"> acessa uma página no mesmo site e no mesmo diretório.
<a href="artigos/arq.htm"> acessa uma página no mesmo site mas noutro
diretorio.
<a href="http://www.abc.com.br"> acessa um arquivo em outro site.
<a href="#capitulo1"> acessa um alvo localizado no interior da mesma
página.
<a href="arq.htm#capitulo1"> acessa um alvo localizado no interior de outra
página mas no mesmo site.
Notar que, para acessar um ponto localizado no interior do arquivo, é necessário o símbolo #.
Quando o arquivo não estiver no mesmo diretório, será necessário especificar o caminho completo
 NAME=NOMEALVO
Define o alvo a ser atingido no interior da página. Quando você estabelece um link, precisa de uma
referência para o destino, ou seja, é necessário atribuir um valor ao atributo href. Quando se trata
de acessar um site ou um arquivo, a referência já existe, porque você dispõe do endereço do site ou
do nome do arquivo. Mas quando você precisa atingir um alvo no interior da página, é necessário
criar tal referência.
Para
isso
você
utiliza
o
atributo name:
<a
name=nomealvo>textoalvo<a>
onde nomealvo é um nome que você cria e texto alvo é o trecho de texto que você quer atingir
dentro da página.
◦
Exemplo:
<a name="cap3">Capítulo 3</a>
[corpo do texto intitulado capítulo 3]
Agora você pode acessar o capítulo 3 de seu documento assim:
<a href="#cap3">Capítulo 3</a>.
Note que é necessário usar o símbolo # no atributo href.
 TARGET=_BLANK | _SELF | _PARENT | _TOP
Define em qual janela (ou frame) que será exibido o resultado do link. Se não for especificado, a
exibição será feita na própria janela onde está o link.
Pode-se atribuir um dos seguintes valores:
 blank - A exibição é feita em uma nova janela.
 self - A exibição é feita na própria janela onde está o link(padrão).
 parent - A exibição é feita na janela que contém o frame onde está o link.
 top - A exibição é feita na janela que ocupa posição mais alta na hierarquia, quando há
frames.
◦ Exemplo:
<a href=http://www.abc.com.br target="_blank">Site ABC</a>.
TAGS REFENTES A IMAGENS
 Comando:
<img src=”diretorio/arquivo”>
<img>: tag que indica que há uma imagem na página.
Src =”diretorio/arquivo” : atributo que indica o diretório e a imagem que deverá ser
exibida.
Atributos da tag <img>
 SRC=NOMEARQUIVO
Especifica o arquivo de imagem ou o caminho completo (path). Observe que src vem de source
(fonte).
◦
Exemplos:
<img src="imagem.gif"> acessa um arquivo de imagem no mesmo mesmo
diretório.
<img src="imagens/imagem.jpg"> acessa um arquivo de imagem noutro
diretório.
Quando o arquivo não estiver no mesmo diretório, será necessário especificar o caminho
 LOWSRC=NOMEARQUIVO
Define uma imagem provisória, de baixa resolução, para ser exibida antes de ser carregada a
definitiva. É um truque para melhorar a performance da página, mas hoje em dia pouca gente o
utiliza porque as máquinas agora têm mais recursos.
Pode-se, por exemplo, carregar uma imagem em preto e branco antes da colorida. A especificação
é feita da mesma forma que em src, ou seja, o nome do arquivo ou o caminho completo.
◦
Exemplo:
<img lowsrc="imagem1.gif" src="imagem2.gif">
Quando o arquivo não estiver no mesmo diretório
 ALIGN=BOTTOM | LEFT | RIGHT | TOP | MIDDLE
Define o alinhamento da imagem dentro da página e controla o fluxo do texto ao seu redor. Tal
texto é o que é digitado imediatamente após a tag <img>. Descrevemos abaixo como isso funciona
com cada um dos valores que podemos atribuir.
bottom - A imagem coloca-se à esquerda do texto. O texto tem seu início na linha nivelada
com o canto inferior direito da imagem. Este é o padrão, portanto não precisa ser especificado.
◦
Exemplo: <img src="imagem.gif">texto.
left - A imagem coloca-se à esquerda da página. O texto tem seu início na linha nivelada com o
canto superior direito da imagem, contornando-a.
◦
Exemplo: <img src="imagem.gif" align="left">texto.
right - A imagem coloca-se à direita da página. O texto tem seu início na linha nivelada com o
canto superior esquerdo da imagem, contornando-a.
◦
Exemplo: <img src="imagem.gif" align="right">texto.
top - A imagem coloca-se à esquerda do texto. O texto tem seu início na linha nivelada com o
canto superior direito da imagem. Apenas uma linha fica ao lado da imagem, sendo que o resto do texto
passa a fluir por baixo a partir da margem esquerda da página. É de se notar que esse tipo de alinhamento
é mais útil com pouco texto.
◦
Exemplo: <img src="img.gif" align="top">texto.
middle - A imagem coloca-se à esquerda do texto. O texto tem seu início na linha nivelada com
o ponto central da imagem (sentido vertical). Apenas uma linha fica ao lado da imagem, sendo que o resto
do texto passa a fluir por baixo a partir da margem esquerda da página. Como em top, esse alinhamento
também é mais útil com pouco texto.
◦
Exemplo: <img src="imagem.gif" align="middle">texto.
O alinhamento de uma imagem dentro da página pode ser feito também utilizando o atributo align
na tag <p> ou <div>, mas a definição em <img>, se for left ou right, irá prevalecer.
Já os valores bottom, middle e top apenas controlam o fluxo do texto e, com eles, o alinhamento da
imagem obedece ao que foi definido em <p> ou <div>, sendo que o padrão é left. Podemos
esclarecer isso melhor através de alguns exemplos, onde fizemos a combinação do alinhamento
definido em <p> com o alinhamento definido em <img>.
<p align="right"><img src="imagem.gif" align="middle">pouco texto</p>
<p align="right"><img src="imagem.gif" align="top">pouco texto</p>
<p align="center"><img src="imagem.gif" align="middle">pouco texto</p>
<p align="center"><img src="imagem.gif" align="top">pouco texto</p>
Observação:
Você pode interromper o fluxo do texto ao lado da imagem, fazendo-o passar para a parte de baixo antecipadamente, com
a utilização do atributo clear na tag <br>.
 WIDTH=X E HEIGHT=X
Para redimensionar a imagem utilizamos dois atributos: o WIDTH e o HEIGHT.
 Comando:
<img src=“imagem/diretorio” width=“n” height=“n”>
Widht=”n”: indica a largura da imagem em pixels.
Height=”n” : indica a altura da imagem em pixels.
◦
Exemplo:
<h1> Exemplo redimensionando imagens</h1>
<img src="google.jpg”>
<img src="google.jpg” width=“203” height=“145”>
<img src="google.jpg” width=“284” height=“203”>
 ALT=TEXTO
Especifica um texto que aparecerá dentro do retângulo da imagem até que ela seja baixada.
Observe que alt vem de alternative (texto alternativo). Esse texto aparecerá também numa tarjeta
quando o ponteiro do mouse for estacionado sobre a imagem.
Essa definição é importante para que o visitante saiba de qual imagem se trata, antes de ela ser
exibida, ou mesmo depois.
◦
Exemplo:
<img src="imagem.jpg" alt="foto da igreja">
É imporante que você digite o texto entre aspas. Sabemos que em muitos casos as aspas são
dispensáveis, mas aqui, se não fossem colocadas, o navegador iria ver só a primeira palavra. No
caso, exibiria apenas a palavra foto.
 BORDER=X
Define que a imagem terá bordas, ou seja, será colocada dentro de um retângulo, e o valor
atribuído em pixels estabelece a sua espessura. Se definida como zero não terá bordas.
◦
Exemplos:
<img src="imagem.jpg" border="1"> coloca a imagem dentro de um
retângulo.
<img src="imagem.jpg" border="0"> a imagem é exibida sem borda.
 HSPACE=X E VSPACE=X
Definem as margens da imagem, em pixels. O atributo hspace define as margens à esquerda e à
direita (sentido horizontal) e o vspace acima e abaixo (sentido vertical). Muito úteis para distanciar
o texto da extremidade da imagem.
◦
Exemplo:
<img src="imagem.jpg" hspace="20" vspace="10">
Não é possível definir margem à esquerda diferente da margem à direita. Da mesma forma, não é
possível definir margem de cima diferente da margem de baixo.
 TITLE
O atributo TITLE é utilizado para exibir uma mensagem quando a imagem está sendo carregada.
Também tem a função de especificar ou indicar a imagem, quando o cursor do mouse é colocado
sobre ela.
 Comando:
<img src=”diretorio/imagem” width=”n” height=”n” align=”posicao”
TITLE=”mensagem”>
TITLE = “mensagem” : indica a mensagem que será exibida quando o cursor do mouse for
colocado sobre a imagem.
 ALT
O atributo ALT é utilizado para exibir uma mensagem quando a imagem não é exibida.
 Comando:
<img src=”diretorio/imagem” width=”n” height=”n” align=”posicao”
ALT=”mensagem”>
ALT = “mensagem” : indica a mensagem que será exibida quando a imagem não for carregada.
TAGS REFENTES A TABELAS
As tabelas são muito utilizadas na internet para estruturar o layout das páginas e para exibir dados.
Em uma tabela podemos inserir textos, imagens, links e outros elementos e ainda podemos utilizar
uma tabela dentro outra tabela.
<TABLE> </TABLE>
Esta tag indica o início e o fim da tabela.
<TR> </TR>
Esta tag indica as linhas da tabela.
<TD> </TD>
Esta tag indica as células contidas em cada linha da tabela. É nesta tag que inserimos os dados que
serão exibidos na tabela.
<TH> </TH>
Esta tag define os títulos de uma tabela, podendo ser utilizado em qualquer célula.
A diferença entre a tag <TD></TD> e a tag <TH> <TH> é que o conteúdo inserido entre as tags
<TH></TH> será exibido em negrito.
Abertura e fechamento de uma célula dentro de uma linha da tabela. Funciona como <td>, mas o texto
que contém aparece em negrito e centralizado (uma espécie de cabeçalho ou título).
<CAPTION> </CAPTION>
Esta tag insere a legenda da tabela. Deve ser inserida entre as tags <TABLE> </TABLE>.
Atributos da tag <TABLE>, <TD>, <TR>
 WIDTH=X
Como atributo de <table> e <td>
Em <table> define a largura da tabela e em <td> define a largura da célula. Os valores são atribuídos
em pixels ou em percentagem. Não sendo definida as larguras da tabela e das células, cada uma das
células terá uma largura suficiente para acomodar o seu conteúdo. E, se as larguras forem definidas de
forma insuficiente para acomodar o conteúdo, haverá quebra de linhas, fazendo a altura crescer. Mas
isso só vai ocorrer se o conteúdo for quebrável, como um texto, por exemplo. Suponha que o conteúdo
seja uma imagem com 100 pixels de largura e que a célula tenha uma definição de 50 pixels, neste
caso, prevalecerá a largura suficiente para acomodar a imagem.
A soma dos valores das larguras das células de uma linha será igual à largura da tabela. É interessante
definir as larguras em percentagem, porque em pixels, a visualização não será a mesma dependendo
da resolução de vídeo.
◦
exemplo:
<table width="100%">
<tr>
<td width="50%"> célula 1 da linha 1</td>
</tr>
<tr>
</tr>
</table>
Se você definir a largura da tabela em 100%, ela ocupará toda a largura da página que é possível ser
vista sem a barra de rolagem horizontal. Isso com qualquer resolução de vídeo.
Quando não há definição de largura para as células, a largura total da tabela é dividida igualmente
entre elas e, quando apenas algumas estão definidas, o espaço restante é dividido igualmente entre
as demais.
A não ser nos casos em que se usa o atributo colspan, todas as células de uma mesma coluna terão
a largura igual, prevalencendo sempre a maior largura. Portanto, é possível alterar a largura de uma
coluna, definindo-a em uma única célula dentro de uma coluna.
Se você quiser criar uma tabela mais estreita ou mais larga pode definir a sua largura em um
percentual menor ou maior que 100%. E, ainda assim, a soma das larguras das células deve ser igual
a 100%, porque essa soma deve corresponder à largura integral da tabela (integralidade=100%),
embora ela possa ter um valor relativo diferente de 100%. Quando essa soma for menor ou maior
que 100%, isso será ajustado e esse ajuste recairá sobre a última célula.
 HEIGHT=X
Como atributo de <table>, <tr> e <td>
Em <table> define a altura da tabela, em <tr> define a altura de todas as células pertencentes à
linha, e em <td> define a altura da célula. Os valores são atribuídos em pixels ou em percentagem.
Na maioria das vezes deixamos de utilizar esse atributo tanto em <table>, como em <tr> ou em
<td>, porque as células já crescem o suficiente para acomodar o conteúdo inserido. Inclusive,
quando definimos a largura com o atributo width; se essa largura não for suficiente para a largura
do texto, então haverá quebras de linha e a célula crescerá automaticamente na altura. Além disso,
há de se considerar o fato de que esse atributo não é contemplado por todos os browsers. Mas há
situações em que sua utilização pode ser interessante.
Apesar de funcionar, não há muito sentido na utilização de height em <td> porque não há como
fazer com que células pertencentes a uma mesma linha apresentem-se com alturas diferenciadas.
O que ocorre é que a linha toda assume altura da célula de maior altura. Assim é preferível definir a
altura em <tr>. Dá mais clareza ao código.
O funcionamento de height é muito parecido com o de width, mas height, em vez de atuar na
largura, atua na altura, obviamente. Então, para se ter uma idéia a respeito, você pode ler as
considerações feitas em width. Observe, entretanto, que <tr> nao possui width.
 ALIGN=LEFT | CENTER | RIGHT
Como atributo de <table>
Define o alinhamento da tabela dentro da página e controla o fluxo do texto ao seu redor. Tal texto é o
que é digitado imediatamente após a tag </table>. Descrevemos abaixo como isso funciona com cada
um dos valores que podemos atribuir.
left - A tabela coloca-se à esquerda da página. O texto tem seu início na linha nivelada com o
canto superior direito da tabela, contornando-a.
◦
Exemplo: <table align="left">...</table>texto
right - A tabela coloca-se à direita da página. O texto tem seu início na linha nivelada com o
canto superior esquerdo da tabela, contornando-a.
◦
Exemplo: <table align="right">...</table>texto
center - A tabela coloca-se no centro da página. O fluxo do texto não é afetado, ou seja, ele aparece
normalmente abaixo da tabela.
◦
Exemplo: <table align="center">
Observações:
1) Os efeitos obtidos com left e right numa tabela são os mesmos que se obtém com uma imagem, mas,
quanto aos obtidos em <img> através dos valores bottom, middle e top, não há para eles correspondentes
em <table>.
2) O alinhamento de uma tabela também pode ser definido no parágrafo que a contém, mas a definição
em <table> prevalece sobre a feita em <p>.
Como atributo de <tr> e <td>
Define o alinhamento horizontal do conteúdo das células. Quando é atribuído a <tr>, todas as células
pertencentes à linha terão o alinhamento definido e, quando atribuído a <td>, somente a célula que
teve a definição. Mesmo tendo feito a definição para a linha, você poderá fazê-la também para uma ou
mais células. Assim todas as células terão um alinhamento igual, exceto as que tiveram uma definição
particular.
São os seguintes os valores que podem ser atribuídos:
left - alinhamento à esquerda (o padrão).
center - alinhamento ao centro.
right - alinhamento à direita.
◦
Exemplos:
<tr align="center">
<td align="right">
 CELLSPACING=X e CELLPADDING=X
Como atributos de <table>
Definem, em pixels, o espaço entre as células e a margem dentro das células, respectivamente.
Com cellspacing você cria um distanciamento entre as extremidades das células, nos quatro lados, à
direita, à esquerda, em cima e embaixo.
Com cellpadding, você também cria um distanciamento, mas do conteúdo da célula em relação às suas
extremidades e também nos quatro lados.
◦
Exemplo:
<table cellspacing="3" cellpadding="5">
Para se ter uma idéia mais nítida da diferença entre os dois atributos, observe uma tabela com bordas,
ou seja, com o atributo border igual ou maior que 1. Nela você percebe que cellspancing estabelece um
distanciamento entre os contornos das células contíguas. Já cellpaddig, estabelece um distanciamento
do conteúdo da célula em relação ao seu contorno.
Outra forma de se observar o efeito causado por esses atributos é colocando uma cor de fundo em
cada célula com bgcolor. Esses fundos criam para cada célula uma espécie de tarja e dentro da tarja
fica o conteúdo da célula. Assim, com cellspacing, você cria um distanciamento entre as tarjas, à
esquerda e à direita, bem como em cima e embaixo. E, com cellpadding, você cria distanciamentos do
conteúdo em relação à extremidade da tarja.
É bom esclarecer que o funcionamento de ambos os atributos não depende de que haja bordas ou
fundos nas células. Entretanto, quando temos uma tabela que não possui bordas, e que para suas
células não houve nenhuma definição de cor de fundo ou de imagem de fundo, na prática, pode ser
indiferente utilizar cellspacing ou cellpadding para estabelecer espaços entre os conteúdos das células.
Ou seja, neste caso, pode-se estabelecer o espaço desejado utilizando apenas um dos atributos.
 BORDER=X
Define que a tabela terá bordas em seu contorno (bordas externas) e no contorno de suas células
(bordas internas). O valor em pixels define a espessura das bordas externas. A espessura das bordas
internas ficam inalteráveis. O valor zero define que a tabela não terá bordas nem externas nem
internas. Se for especificado apenas border, sem atribuição de valor, tal especificação equivalerá à
atribuição de 1 pixel.
◦
Exemplos:
<table border="1"> bordas externas e internas com a espessura de 1 pixel.
<table border> bordas externas e internas com a espessura de 1 pixel.
(equivalente à anterior.)
<table border="2"> bordas externas com a espessura de 2 pixels e internas com 1
pixel.
<table border="0"> sem bordas.
<table> sem bordas (padrão).
 BORDERCOLOR=NOMECOR | #RRGGBB | RGB(X,X,X)
Define a cor das bordas da tabela (externa e interna). Pode-se usar o nome da cor, o código
hexadecimal no formato #rrggbb ou o código decimal no formato rgb(x,x,x). Neste último formato, x
pode ser um número de 0 a 255 ou um percentual de 0% a 100%.
◦
Exemplos:
<table border="1" bordercolor="blue">
<table border="1" bordercolor="#00FF00">
Muitas vezes você terá que recorrer ao código hexadecimal, porque apenas algumas cores podem ser
identificadas pelo nome.
 BGCOLOR=NOMECOR | #RRGGBB | RGB(X,X,X)
Como atributo de <table>, <tr> , <td> ou <th>
Define uma cor de fundo de uma tabela, linha ou célula. Pode-se usar o nome da cor, o código
hexadecimal no formato #rrggbb ou o código decimal no formato rgb(x,x,x). Neste último formato, x
pode ser um número de 0 a 255 ou um percentual de 0% a 100%.
Quando uma cor de fundo é definida para a página na tag <body>, a tabela também será abrangida,
mas mesmo assim você poderá definir outra cor para a tabela, o que irá distingüi-la. Isso pode ser feito
também para uma ou mais linhas e/ou células.
◦
Exemplos:
<table bgcolor="yellow">
<table bgcolor="FF9900">
<tr bgcolor="#008000">
<tr bgcolor="rgb(204,102,0)">
<td bgcolor="#CD5C5C">
<td bgcolor="rgb(80%,20%,60%)">
 BACKGROUND=NOMEARQUIVO
Define uma imagem como fundo de uma tabela. Supondo a existência de um arquivo de imagem com o
nome "imagem.gif" no mesmo diretório onde se encontra a página, podemos fazer o seguinte: <table
background="imagem.gif">.
Se o arquivo de imagem não estiver no mesmo diretório, será necessário especificar o caminho e, para
fazer isso adequadamente.
Observações:
Muitas vezes você não poderá utilizar o nome das cores, poucas têm um nome reconhecido pelo
navegador. É recomendável que se utilize sempre o código hexadecimal.
Ao escolhermos uma imagem como fundo, devemos considerar a sua cor e nos preocupar também
com a definição de uma cor adequada para o texto, para que ocorra o devido contraste entre ambas e
fique assegurada a nitidez dos caracteres. Assim, uma imagem de cor clara exige uma cor escura para o
texto, já um fundo de cor escura exige uma cor clara
Mesmo tendo colocado uma imagem de fundo, devemos também colocar uma cor de fundo igual ou
semelhante à cor da imagem (com o atributo bgcolor). Dessa maneira, mesmo que o navegador não
carregue a imagem por algum motivo, o contraste estabelecido para o texto estará preservado. Assim,
para que tal problema não ocorra, podemos estabelecer o seguinte: <table bgcolor="black"
background="imagem.gif">. Mas é claro que essa preocupação será desnecessária, caso o texto tenha
uma cor que possa apresentar-se nítida num fundo branco.
 VALIGN
Como atributo de <tr> e <td>
Define o alinhamento vertical do conteúdo das células. Quando é atribuído a <tr>, todas as células
pertencentes à linha terão o alinhamento definido e, quando atribuído a <td>, somente a célula que
teve a definição. Mesmo tendo feito a definição para a linha, você poderá fazê-la também para uma ou
mais células. Assim todas as células terão um alinhamento igual, exceto as que tiveram uma definição
particular.
São os seguintes os valores que podem ser atribuídos:

top - alinhamento no topo da célula.
middle - alinhamento no meio da célula (o padrão).
bottom - alinhamento na parte de baixo da célula.
◦
Exemplos:
<tr valign="middle">
<td valign="bottom">
 COLSPAN
Como atributo de <td>
Expande a largura de uma célula. O valor atribuído é um número inteiro que corresponde à quantidade
de colunas que a célula expandida abrange.
◦
Veja o exemplo:
<table border="1">
<tr><td colspan="2" align="center">célula expandida</td></tr>
<tr>
<td>célula 1/linha 2</td>
</tr>
</table>
célula expandida
célula 1/linha 2 célula 2/linha 2
Veja ao lado a tabela criada no código exemplificado. Possui duas linhas: na segunda linha colocamos
duas células e na primeira linha apenas uma com colspan="2". Assim criamos na primeira linha uma
célula expandida que tem a largura igual à soma das larguras das células da segunda linha. Apenas para
melhorar a estética, acrescentamos align="center".
 ROWSPAN
Como atributo de <td>
Expande a altura de uma célula. O valor atribuído é um número inteiro que corresponde à quantidade
de linhas que a célula expandida abrange.
◦
Veja o exemplo:
<table border="1">
<tr>
<td rowspan="3">célula 1(expandida)</td><td>célula 2/linha 1</td>
</tr><tr>
</tr><tr>
</tr>
</table>
célula 2/linha 1
célula 1(expandida) célula 2/linha 2
célula 2/linha 3
Veja ao lado a tabela criada no código exemplificado. Note que a criamos com três linhas: na primeira
linha colocamos célula 1 e célula 2, sendo que a primeira foi expandida na altura com rowspan="3".
Nas linhas 2 e 3, colocamos apenas célula 2, porque a célula 1 da primeira linha ocupa o espaço no
sentido vertical.
OUTRAS TAGS
 TAG PRE
A tag <PRE> permite que os textos sejam exibidos tal como foram escritos (espaços em branco e
quebras de linha serão respeitados).
◦ Exemplo:
<PRE>
Há três noite que
eu não durmo
olará
Pois perdi o meu galinho
olará
</pre>
 TAG BLOCKQUOTE
A tag blockquote fornece a delimitação de um parágrafo citado que pode conter várias linhas. Esta
tag destaca o parágrafo, deslocando-o um pouco para a direita (dependendo da direção do texto).
O uso de blockquote como forma de identar o texto foi definido como inadequado pela W3C em
favorecimento ao uso de folhas de estilo.
Blockquote ainda possui um atributo chamado cite. Cite serve para determinar a página fonte da
citação, ou seja, de qual página da internet veio tal citação. Para demonstrar o uso de citações de
parágrafo, abaixo está uma pequena parte do discurso de J. Kennedy sobre a corrida espacial
retirada do site Wikipédia.
...
<BLOCKQUOTE CITE="http://pt.wikipedia.org/wiki/John_F._Kennedy">
<P>Eu acredito que a nação deva se comprometer para alcançar o objetivo,<BR>
antes do fim da década, de aterrissar o homem na lua<BR>
e fazê-lo voltar em segurança para a Terra.</P>
</BLOCKQUOTE>

REVISÃO HTML Uma página HTML é reconhecida pelas seguintes

Transcrição

Documentos relacionados

Código Fonte

Inserindo Assinatura no Hotmail

HTML - Uol

Apostila de HTML e CSS

Effect of Central Corneal Thickness and Corneal Hysteresis

• New K1ck Counter-Strike Division

A sucessiva apresentação de modelos avant

Fechadura Biométrica SHS-1321

Aula 11

Aula3_DW - Blog do Prof. PC

Apostila (Html 4.0.1)

Apresentação do PowerPoint - Habitação, Mobiliário e Decoração

2 DESENVOLVENDO UMA PÁGINA WEB