Dando seqüência a nossa serie sobre HTML trataremos neste artigo dos atributos das tag HTML. Os atributos nada mais são do que configurações que podemos fazer nas diversas tag do HTML fazendo com que elas tenham uma aparência mais agradável no documento final. Aqui também irei mostrar algumas tabelas com as cores usadas em HTML com seus respectivos códigos.
Veremos também algumas tag que servem
apenas para "documentar” nossa pagina, adicionando palavras chaves e tag
utilizadas para layouts mais apurados.
Mais uma vez vale lembrar que para paginas mais requintadas e profissionais
temos que lançar mão dos recursos do CSS.
TAG Meta
As tag’s Meta são utilizadas por sites de busca como o Google® e o Yahoo?®.
Através delas você irá descrever alguns comentários sobre sua pagina.
|
<META NAME= “DESCRIPTION” > Fará
uma pequena descrição sobre seu site. |
|
<META NAME= “DESCRIPTOIN" CONTENT=
“Artigo número 3 da série HTML Active Delphi “>. |
|
<META NAME= “KEYWORDS” >
Com esta tag você colocará a(s) palavra(s) chave(s). |
|
<META NAME= “keywords" content=
“HTML, Delphi, PHP, Curso” >. |
|
<META NAME= “AUTHOR” >
Indica qual é o autor de
sua pagina. |
|
<META NAME= “AUTHOR” CONTENT=
“Rodrigo Carreiro Mourão” >. |
|
<META HTTP-EQUIV= “language” >
Indica o Idioma a ser utilizado na página. |
|
<META HTTP-EQUIV= “language"
content= “PT-br” >. |
|
<META HTTP-EQUIV= “Refresh” >
Redireciona sua página para uma página secundária, outro Site ou para algum
arquivo como uma foto. |
|
<META HTTP-EQUIV= “Refresh"
content= “10"; URL= “http://www.rodrigocarreiro.com” >
Onde 2 é o tempo em segundos que a página vai demorar até redirecionar e URL
é para onde o site será redirecionado. |
Tag <FONT>
Utilizamos a tag font para aplicar a um texto uma formatação mais especifica.
Com os atributos desta tag podemos definir a fonte, cor, tamanho e etc.
|
Face |
Indica o tipo de fonte que você
vai usar. Ex. <font face= “Times New Roman “>. |
|
Color |
Indica qual a cor você vai por em
seu texto. Ex. <font color=Navy>. |
|
Size |
Indica o tamanho do texto. Varia
de 1 a 7 o tamanho. |
<p><font face= “Arial" color=
“navy" size= “2">Este é o meu primeiro parágrafo em HTML</font></p>
A TAG DIV
Ela permite o alinhamento horizontal de qualquer elemento em uma página. Esta
TAG é muito utilizada em DHTML pela propriedade de agrupar elementos de página.
Ex. <div align= “Center” >Este texto está alinhado no centro.</div>
Com CSS podemos aumentar ainda mais o poder das DIV.
SOM
Para inserir sons na sua pagina vamos utilizar as seguintes Tag’s:
EMBED SRC – Para colocar as músicas para reproduzir em uma espécie de mini-media
player na pagina.
<embed src= “áudio.mp3" loop= “1">
BGSOUND SRC – Para colocar músicas em plano de fundo, para que apenas toque sem
que ninguém consiga ver, apenas ouvi-la.
<bgsound src= “áudio.mp3 loop="1">
LOOP – Utilizamos o loop para colocarmos quantas vezes queremos que a música
toque. Com loop=1, a musica tocara apenas uma vez, loop=2, duas vezes... Para
colocarmos para que se repita inúmeras vezes, colocamos loop=infinite.
Frames
Frames são divisões de uma pagina em HTML. Ela é composta de uma pagina
principal e diversas outras divisões, compostas por outras paginas. Na pagina
principal você insere as outras paginas em colunas ou linhas, sendo que você
identifica o tamanho que cada uma deve ter. É necessária cautela ao pôr frames,
pois se você não souber como organizá-las, sua pagina perdera todo o sentido. No
entanto, elas podem ser muito úteis para criação de menus em sua pagina.
Para criar as frames vamos usar duas Tag’s:
|
FRAMESET |
Indica como vai ser sua Frame, se
vai ser Horizontal ou vertical. |
|
ROWS |
Com este tipo, a frame ficará na
horizontal. |
|
COLS |
As Frames ficarão verticalmente. |
Quando você for configurar frame terá que dar valores de tamanhos para elas,
preferencialmente em % para ficar mais fácil de configurar.
<frameset cols= “16%,*" Border= “0">
<frame src= “menu.html" name= “frame" noresize scrolling= “no” >
<frame src= “texto.html" name= “home" noresize>
</frameset>
Note que colocamos uma parte que vem ser o menu com 16% da pagina, os outros 84%
foram embutidos no asterisco, após a vírgula. Agora vamos ver o atributo SRC da
tag FRAME.
No quadro acima você pode ver que inserimos dois arquivos: “menu.html” e
“texto.html” e damos nomes a elas. Os nomes são muito importantes para que
quando for abrir um link na outra frame coloque o atributo target e o nome da
frame.
<a href= “Downloads.html" target= “home” >
Os atributos Noresize e Scrolling, servem respectivamente para não deixar
modificar o tamanho da frame e nem que apareça a barra de rolagem nela.
Exemplo:
<html>
<head>
<title>Exemplo de Frame </title>
</head>
<frameset cols=”20%, 80%”>
<frame src=”pagina1.html”>
<frameset rows=”20%,80%”>
<frame src=”pagina3.html”>
<frame src=”pagina2.html” NAME=principal>
<noframe>
</noframe>
</frameset>
</frameset>
<body>
</body>
</html>
Atributos em <BODY>
A Tag BODY fará algumas configurações no corpo de sua pagina. Ela é quem diz a
cor do plano de fundo, a cor dos links, entre outras coisas.
|
BGCOLOR |
Determina a cor do Plano de Fundo
da página. |
|
LINK |
Determina a cor do Link que
aparecerá na página |
|
ALINK |
Determina a cor que aparecera
quando o link for clicado |
|
VLINK |
Determina a cor que aparecera no
link após ser clicado. |
|
BACKGROUND |
Se você for pôr uma imagem como
plano de fundo deve usar este elemento de BODY no lugar de bgcolor. |
|
LEFTMARGIN |
Margem esquerda da página. |
|
TOPMARGIN |
Margem superior da página. |
|
MARGINHEIGHT |
Margem superior. |
|
MARGINWIDTH |
Margem esquerda. |
<BODY BGCOLOR= “BLUE” LINK= “RED”
ALINK= “GRAY” VLINK= “DARKBLUE” >
Atributos em <P>
Para iniciar um parágrafo utilizamos a Tag P porém através dos atributos desta
tag podemos configurar nosso parágrafo.
|
ALIGN |
Alinha o texto de acordo com o
que você colocar. |
|
Left |
Esquerdo. |
|
Justify |
Justificado. |
|
Center |
Centralizado. |
|
Right |
Direito. |
<p align=Center Este é o meu
primeiro parágrafo em HTML</p>
ESTILOS DE TEXTO
Fora os estilos visto ate agora (<b> <i> <u>) podemos aplicar outros estilos aos
nossos textos.
|
<SUP> |
Faz com que o texto fique
sobrescrito. |
<sup>Texto sobrescrito</sup> |
|
<SUB> |
Faz com que o texto fique
subscrito. |
<sub>texto subscrito</sub> |
|
<BIG> |
Aumenta a fonte e atribui
negrito. |
<big>Texto GRANDE</BIG> |
|
<SMALL> |
Reduz e altera a fonte. |
<small>TEXTO pequeno</small> |
Atributos em <HR>
Insere uma linha horizontal no Browser. Com seus atributos também podem ser
personalizadas.
|
ALIGN |
“posição": pode ser Left, Center
e Right; |
|
WIDTH |
“n%": define a largura da linha,
pode ser definida em pixels ou em percentagem do tamanho horizontal da tela; |
|
SIZE |
“n": define a espessura da barra,
em pixels; |
|
NOSHADE |
define que a barra não deve ser
com efeito 3D; |
|
COLOR |
“#RRGGBB": define a cor da barra. |
<HR WIDTH= “80%" ALIGN= “Center" SIZE= “10” NOSHADE COLOR= “#F9A0BB” >
Atributos em <IMG>
Após inserirmos a imagem temos de configurá-la. Não é necessário, mas você pode
utilizar para deixar a sua imagem ao seu gosto. Utilizamos as seguintes Tag’s a
partir de IMG SRC
|
Width |
A partir dela informamos a
largura da imagem. Se não for configurada a imagem será inserida no seu
tamanho original. |
|
Height |
Com ela, informamos a altura.
Quando não é informada mantém também sua altura original. |
|
Border |
Cria e configura o tamanho da
borda da figura. |
|
Align |
Alinha a imagem em relação ao
texto. Temos três tipos de alinhamento. |
|
Top |
Alinha o texto paralelamente ao
topo da Imagem. |
|
Middle |
Alinha o texto no centro da
Imagem. |
|
Bottom |
Alinha o texto paralelamente à
base da imagem. |
|
Alt |
É uma tag em que você insere um
texto alternativo, para que se no caso o browser não abrir a imagem o texto
aparecerá no lugar. |
<img src= “imagem.jpg" Width=120 Height=160 align= “top” Border= “3” Alt=
“imagem principal” >
Atributos em <TABLE>
Podemos melhorar a aparência da tabela inserindo atributos.
|
BORDER |
espessura da borda em pixels. |
|
BOREDERCOLOR |
especifica a cor da borda da
tabela. |
|
WIDTH |
especifica a largura da tabela em
relação ao browser, em pixels ou %. |
|
HEIGHT |
especifica a altura da tabela em
relação ao browser, em pixels ou %. |
|
CELLSPACING |
especifica o espaço entre uma
célula e outra, em pixels. |
|
CELLADDING |
especifica o espaço entre os
dados e a borda da tabela, em pixels. |
|
BGCOLOR |
cor de fundo das células da
tabela. |
<table Border= “2" bordercolor= “#003300" bgcolor= “Green" Width= “60%"
Height= “40%" cellspacing= “3" celladding= “3">
Atributos Individuais
Há também a possibilidade de se formatar cada célula individualmente.
|
ALIGN |
alinha do conteúdo da célula ou
das células da linha. Valores: Right,Left, Center. |
|
BGCOLOR |
define a cor de fundo das células
da linha ou de uma célula individual. |
|
VALIGN |
alinhamento vertical de uma
célula ou de células de uma linha. Pode ser top, Middle ou Bottom. |
|
WIDTH |
largura de uma célula em pixels
ou %; |
|
NOWRAP |
indica ao browser que o texto da
célula não pode ser dividido em mais de uma linha. A coluna inteira terá o
tamanho do texto escrito naquela célula; |
<table Border= “2" bordercolor=
“#003300" bgcolor= “Green" Width= “60%" Height= “40%" cellspacing= “3"
celladding= “3">
<TR align= “Left" valign= “top">
Células Mescladas
Para mesclar as células vamos atribuir à Tag TD os seguintes atributos:
|
COLSPAN |
Será o número
de colunas que a célula ocupara. |
|
ROWSPAN |
Será o número
de linhas que a célula ocupara. |
<Table Border= “2" Width= “50%" cellpading= “3" celladding= “3">
<TR bgcolor= “#FFFACD” >
<TD colspan= “2">Célula 1</TD>
</TR>
</TABLE>
Exemplo 1:
<table border="5" bordercolor="#ff0000" cellspacing="12" cellpadding="7" width="150"
height="50" bgcolor="#6666ff"<tr><td>primeira coluna</td><td>segunda coluna</td><td>terceira
coluna</td></tr><tr><td>primeira linha</td><td>primeira linha</td><td>primeira
linha</td></table><br>
Exemplo 2:
<table border="1" bordercolor="#6666ff" cellspacing="0" cellpadding="0" width="300"
height="100" background="img01.jpg" <tr><td>primeira coluna</td><td>segunda
coluna</td><td>terceira coluna</td></tr><tr><td>primeira linha</td><td>primeira
linha</td><td>primeira linha</td></table><br>
Exemplo 3:
<table border="1" cellspacing="1" cellpadding="1" width="500" height="100"><caption>Título
da tabela</caption> <tr><th>Cabeçalho da tabela</th><th>Cabeçalho da tabela</th><th>Cabeçalho
da tabela</th></tr> <tr><td>primeira linha</td><td>primeira linha</td><td>primeira
linha</td></tr> <tr><td>segunda linha</td><td>segunda linha</td><td>segunda
linha</td></tr></table><br><br>
Inserindo Caracteres Especiais
Alguns caracteres como o “Ç” e letras acentuadas, como o “ê” ou o “ã”, não fazem
parte do dicionário inglês, e então não podem ser inseridas diretamente. É
necessário a utilização de códigos para que o Ç seja criado e as letras
acentuadas sejam crias.
Abaixo segue uma tabela com estes códigos.
|
Caractere |
Código |
|
Ç |
Ç |
|
ç |
ç |
|
 |
 |
|
â |
â |
|
à |
à |
|
ã |
ã |
|
Á |
Á |
|
á |
á |
|
À |
À |
|
à |
à |
|
Ê |
Ê |
|
ê |
ê |
|
Í |
Í |
|
í |
í |
|
Ó |
Ó |
|
ó |
ó |
|
Ô |
Ô |
|
ô |
ô |
|
Õ |
Õ |
|
õ |
õ |
|
Ú |
Ó |
|
ú |
ú |
|
Ü |
Ü |
|
ü |
ü |
|
< |
< |
|
> |
> |
|
" |
" |
|
& |
& |
|
Ø |
Ø |
|
ø |
ø |
Tabelas de Cores
Conclusão
Com o que foi mostrado ate o momento você será capaz de criar sites com mais
requinte e riqueza de layout, claro que nada mostrado aqui se compara a folhas
de estilos bem definidas e criativas. Por falar em criatividade esta e uma das
coisas que não se ensina em curso nenhum, ser criativo na minha opinião e um dom
agora para transformar a idéia criativa em algo concreto você terá que lançar
mão das tag’s e atributos mostrados aqui.
Para ter noção do que se pode fazer com a utilização dos atributos HTML
clique aqui e veja nossa pagina de exemplo
implementando algumas das tag’s e atributos mostrados aqui.
Na quarta e ultima parte desta serie sobre HTML trataremos das tag FORM e seus
elementos para construção de formulários HTML.
Eu sou Rodrigo Carreiro e pela sua atenção muito obrigado.
Rodrigo Carreiro Mourão
Consultor da TDS Tecnologia – RJ atuando na área de desenvolvimento de projetos
Orientados a Objetos, Design Patterns, MVC. BDS2006 Win32 Product Certified.
Borland Instructor Certified. Instrutor de treinamento oficiais CodeGaer
DelphiWin32, Delphi for PHP, Delphi .Net. Palestrante da Borland Conference
2007.
|
Home
Enviar para um amigo
Versão para impressão
Comentários
