Olá, dando continuidade a nossa serie sobre html falaremos neste artigo sobre as principais tags html para construção de paginas html. Iremos seguir os passos da criação de uma homepage hipotética sobre livros (se quiser, escolha outro tema e faça a sua própria página). Dela constarão os principais elementos e recursos do HTML, de forma que, seguindo os exemplos, você será capaz de utilizar os mesmos recursos na criação da sua homepage.
Neste ponto e importante ressaltar o
seguinte. Inicialmente o HTML foi criado para criar estruturas de paginas html e
não layout. Hoje temos uma entidade internacional chamada W3C que publica
padrões para diversos formatos de arquivos como XML e HTML. Em relação ao HTML
temos os transational e os restrict, que se diferem por ter ou não marcação de
layout no conteúdo HTML. Tipo o alinhamento dos elementos são feitos no HTML ou
pelo CSS.
Este ultimo, CSS, e a maneira correta
(restrict) para se aplicar layout as paginas web. CSS (Cascading Style Sheets. —
Folha de Estilos em Cascata) é uma linguagem para estilos que define o layout de
documentos HTML. CSS controla fontes, cores, margens, linhas, alturas, larguras,
imagens de fundo, posicionamentos e muito mais.
HTML pode ser devidamente usado para
definir o layout de website. Contudo CSS proporciona mais opções e é mais
preciso e sofisticado. Atualmente todo navegador WEB suporta CSS. Basicamente a
diferença entre HTML e CSS e que o primeiro é usado para estruturar conteúdos e
o segundo é usado para formatar conteúdos estruturados. Bem parece meio louco
isso tudo, mas tudo fará sentido em breve.
Foi-se o tempo em que marcar seus
textos definindo "isto é um cabeçalho” ou "isto é um parágrafo" usando tags HTML
tais como <h1> e <p> era o suficiente. A Web se expandiu ganhou mais adeptos e
se tornou um verdadeiro mundo. Os designers começavam a sentir a necessidade de
encontrar meios de construir layout mais apresentáveis e criados facilmente. Foi
ai que fabricantes de navegadores (àquela época a Netscape e a Microsoft)
inventaram novas tags HTML tais como: <font> que se diferenciava das tags
originais do HTML pelo fato de destinar-se a layout e não à estrutura.
Isto despertou a criatividade de
muitos designers que começaram a dar asas a imaginação e utilizar tags
estruturais para melhorar seus layout como por exemplo a tag <table> que passou
a ser empregadas para layout. Muitas destas novas tags para layout como a tag <blink>
eram suportadas somente por um determinado tipo de navegador. Era comum nos
depararmos com a frase: "Você precisa do navegador X para visualizar esta
página".
A CSS foi inventada para solucionar
este problema, colocando à disposição dos web designers meios sofisticados de
projetar layout suportado por todos os navegadores e ao mesmo tempo separar os
estilos de apresentação da marcação dos conteúdos, tornando a manutenção dos
sites bem mais fácil. Mas isso tudo e um assunto que renderia uma outra serie
quem sabe !!!
Esta parte abrange os seguintes tópicos:
• Títulos,
parágrafos e separadores
• Formatação de blocos
• Listas
• Formatação de caracteres
• Tabelas
• Âncoras remotas
• Âncoras locais
• Imagens internas
Títulos, Parágrafos e Separadores
Título do documento
É necessário especificar um título para o documento. Este título não
aparecerá na página, mas em outra área fora da área de visualização do documento
(geralmente na barra de título do browser). É importante escolher um título que
tenha algum significado quando aparecer isolado em uma lista de bookmarks.
Escreva então o título entre <TITLE> e </TITLE>. Neste exemplo, como
nossa página é sobre livros, utilizaremos o seguinte título:
<TITLE>Livraria dos Livros</TITLE>
Títulos e subtítulos de seção
O título que adicionamos acima não aparece na página, pois não está definido
dentro do bloco <BODY>. Para criarmos um título na área de visualização,
utilizamos o elemento <H1> ... </H1>. Para o nosso exemplo:
<H1>Livros na Web</H1>
Salve o documento com extensão html e veja o resultado no browser . Observe
também onde aparece o título do documento que foi marcado com <TITLE>.
Parágrafos
Todo o texto que adicionarmos na página, deve estar dentro do elemento de
parágrafo, definido pelos rótulos <P> e </P>. Neste caso, o rótulo de
fechamento é opcional e pode ser dispensado. Portanto, devemos iniciar cada novo
parágrafo com <P>. Lembre-se que a formatação do texto no editor não afeta o
resultado final no visualizador. No nosso exemplo, acrescentaremos as seguintes
linhas:
<p>Esta é a página dos livros de programação, redes e
web.
Aqui você encontra tudo sobre desenvolvimento, hmmm... na verdade, este é só um
exemplo para você aprender HTML. Se você realmente procura algo sobre livros,
sugiro que procure no google uma das muitas livrarias digitais que existem no
mercado.
<p>Este é mais um parágrafo da página sobre Livros. O
Habito da leitura e uma pratica saudável que estimula a imaginação e a
criatividade.<p>Este terceiro parágrafo, embora não aparente ser outro parágrafo
no editor de texto, aparece no visualizador como tal.
Salve o documento html e veja o resultado no browser. Uma dica seria deixar o
browser com a pagina que estamos desenvolvendo aberta. Assim basta fazer as
alterações no bloco de nota, salvar e pressionar F5 no Browser para atualizar a
pagina e mostrar as alterações.
Quebras de linha
Quando é necessário quebrar uma linha dentro de um parágrafo, deve-se
usar <BR>. Este elemento não possui rótulo de fechamento e apenas marca a
posição onde deve ser quebrada uma linha. As três linhas do exemplo abaixo são
quebradas em quatro linhas no mesmo parágrafo:
<p>Eu gostaria que este parágrafo tivesse
quatro linhas.<br> Esta seria a segunda linha,<br> esta a
terceira e <br>esta a quarta.
O resultado mostra que as linhas forma quebradas no ponto onde colocamos <BR>, e
não onde elas quebram no editor de textos.
Separadores
O elemento <HR> define uma linha horizontal. A maioria dos
browsers gráficos apresenta-a como uma linha sombreada que atravessa toda a
largura da tela. No nosso exemplo, utilizaremos <HR> para separar o título do
corpo do texto e algumas seções que criaremos para o nosso documento.
Aproveitamos também para utilizar mais dois níveis de cabeçalho (<H2> e <H3>),
para destacar subseções em níveis hierárquicos decrescentes. Acrescentamos
então, uma linha horizontal após o título:
<h1>Livros na Web</h1>
<hr>
e mais quatro linhas, separando três
subseções do documento:
<hr>
<h2>Redes</h2>
<hr>
<h2>Programacao</h2>
<h3>Delphi</h3>
<h3>PHP</h3>
<hr>
<h2>WEB</h2>
<hr>
Salve o documente e veja o resultado
no browser. Observe que as linhas automaticamente introduzem uma quebra de linha
ao separar os blocos de texto. É possível controlar a largura, espessura,
posição e sombra da linha utilizando atributos mas isso fica pra mais adiante.
Para conferir se estamos no mesmo
caminho
clique aqui !! e observe como seu exemplo devera ficar.
Formatação de Blocos
Endentação
O elemento <BLOCKQUOTE> é utilizado para destacar um bloco de texto.
Em alguns browsers ele aparece em itálico, em um parágrafo separado do texto, em
outros ele aparece endentado. No nosso exemplo, acrescentaremos uma citação no
início da página, marcada com <BLOCKQUOTE>, da forma abaixo:
<blockquote>
“Pilomorfismo e a capacidade que um mesmo método tem de se comportar de maneira
diferente dependendo da classe de onde foi invocado.” (definição teórica sobre
Polimorfismo).</blockquote>
Salve o documente e veja o resultado
da marcação acima.
Endereço
Outro bloco de texto que pode ser definido é um bloco de endereço. <ADDRESS>
... </ADDRESS> marcam o início e o fim de tal bloco, que pode ser usado para
identificar a autoria do documento, conter endereços para contato, e-mail e
outras informações sobre o documento. <ADDRESS> geralmente é utilizado no final
da página. No exemplo, acrescentamos o seguinte bloco de texto no final do
documento:
<hr>
<address>
Para mais
informações entre em contato com livros@livraria.com.br<br>
Criado em 31 de fevereiro de 2150
</address>
Salve o documente e veja no resultado
como o seu browser formata o elemento ADDRESS (no final da página).
Pré-formatado
Outro elemento útil para formatação de blocos de texto é o <PRE>. Todo o
texto rotulado com <PRE> preserva os espaços, tabulações novas-linhas e retornos
e é formatado na tela com uma fonte fixa, geralmente Courier. É extremamente
útil para reproduzir planilhas, listagens de computador e outros dados que não
suportam fontes proporcionais. No nosso exemplo, decidimos refazer a citação
usando <PRE>, e fizemos previamente a sua formatação com tabulações, espaços e
novas-linhas:
<pre>
“Pilomorfismo e a capacidade que um mesmo método tem
de se comportar de maneira diferente dependendo
da classe de onde foi invocado.”
(definição teórica sobre Polimorfismo).
</pre>
Verifique e compare a formatação do
bloco de texto acima com o resultado.
Clique aqui para comparar os resultados.
Listas
O HTML define várias formas de apresentar listas em um documento. Toda lista
possui um rótulo inicial e final e só pode conter rótulos <LI>, que por
sua vez podem conter texto, parágrafos ou outras listas. Isto é mais facilmente
explicado através de exemplos, que veremos a seguir.
Não-ordenadas
As listas não-ordenadas são marcadas pelos rótulos <UL> e </UL>. Cada
ítem é contido dentro de <LI>, que não necessita de rótulo de fechamento
(qualquer novo <LI> ou o rótulo </UL> automaticamente fecham o item <LI>). No
nosso exemplo, utilizaremos o rótulo </UL> para fazer um pequeno sumário dos
ítens constantes da nossa página:
<hr>
<h2>Categorias</h2>
<ul>
<li>Redes
<li>Programação
<ul>
<li>Delphi
<li>PHP
</ul>
<li>WEB
</ul>
Observe que, dentro do segundo item da lista acima, além do texto
"Programação", há uma outra lista de nível hierárquico inferior, com mais dois
itens. O browser formatará a sub-lista de uma forma diferente (geralmente
endentada e com um marcador diferente).
Salve o documento e veja o resultado.
Ordenadas
As listas ordenadas são marcadas pelos rótulos <OL> e </OL>. Da
mesma forma que nas listas não-ordenadas, cada ítem é contido dentro de <LI>,
cujo fechamento é determinado pela próxima ocorrência de <LI> ou pelo rótulo de
fechamento </OL>. No exemplo, usamos <OL> para relacionar os três livros
fictícios dentro da lista sobre Delphi:
<ol>
<li>Os Segredos do Delphi 7 - 250 paginas
<li>Os Segredos do Delphi 2006 - 320 paginas
<li>Os Segredos do Delphi 2007 - 380 paginas
</ol>
Confira o resultado e compare com as listagens acima.
Clique aqui e vejo como exemplo devera parecer;
Formatação de Caracteres
Podemos destacar texto em um parágrafo usando elementos de formatação de
caracteres. O HTML pode marcar o texto visando uma formatação física (ex:
negrito, itálico, sublinhado, riscado, etc.) ou visando uma formatação lógica
(ex: grifado, fortemente destacado, variável, citação, etc.). A diferença
básica é que a formatação lógica diz o que o texto é, enquanto que a formatação
física diz como ele deve ser impresso. Os resultados podem ser os mesmos. No
exemplo abaixo, somente utilizaremos os elementos de formatação física <B> e
<I>, que marcam o texto como negrito e itálico, respectivamente.
Vamos grifar (com itálico)o autor da citação e as categorias dos livros
no primeiro parágrafo:
... (<i>Linnaeus, 1797</i>)</pre>
... a página dos livros de <i>programacao, redes e web</i>. Aqui você ...
e destacar (com negrito) o endereço e-mail para contato, o nome dos
livros na segunda lista e dois trechos do segundo parágrafo.
... no <b>Google</b> ou uma das muitas <b>livrarias
digitais</b> que existem nomercado.
>.
<ol>
<li><b>Os Segredos do Delphi 7</b> - 250 paginas
<li><b>Os Segredos do Delphi 2006</b> - 320 paginas
<li><b>Os Segredos do Delphi 2007</b> - 380 paginas
</ol>
... entre em contato com <b>livros@livraria.com.br</b>.<br>
Pode-se combinar destaques diferentes para um mesmo trecho, por exemplo,
negrito-itálico ou courier-itálico-negrito. Deve-se observar, entretanto, se os
rótulos estão sendo abertos e fechados na ordem correta. Por exemplo, a seguinte
marcação está incorreta:
<B><STRIKE>texto</B></STRIKE>
As formas corretas seriam:
<B><STRIKE>texto</STRIKE></B>
ou
<STRIKE><B>texto</B></STRIKE>
Confira o resultado.Experimente
também outros elementos físicos como <TT> e <u>.
Clicando aqui você poderá comparar como nosso exemplo esta ficando.
Tabelas
O recurso de tabela é um recurso muito poderoso com o qual, com criatividade,
pode-se controlar vários aspectos da formatação de uma página, como uso de
margens, uso de duas colunas, etc. Embora como dito na introdução o padrão é
utilizar o CSS. No nosso exemplo, faremos uma tabela simples apenas para
ilustrar os elementos que a compõem.
Os rótulos <TABLE> .. </TABLE> marcam o início e final de uma tabela.
<TABLE> só pode conter dois rótulos: <TR> (Table Row), que marca uma
linha de tabela; e <CAPTION>, que marca a legenda da tabela. Cada linha
pode conter uma ou mais células de dados, marcadas como <TD> (Table Data)
e <TH> (Table Header). Todas as linhas devem ter o mesmo número de
células de dados (a não ser que se usem atributos). O exemplo abaixo mostra a
listagem HTML de uma tabela simples:
<p><table border>
<tr> <td> 1,1 </td> <td> 1,2 </td> <td> 1,3 </td> </tr>
<tr> <td> 2,1 </td> <td> 2,2 </td> <td> 2,3 </td> </tr>
<tr> <td> 3,1 </td> <td> 3,2 </td> <td> 3,3 </td> </tr>
</table>
que resulta na seguinte formatação:
|
1,1 |
1,2 |
1,3 |
|
2,1 |
2,2 |
2,3 |
|
3,1 |
3,2 |
3,3 |
Se o atributo BORDER do rótulo
<TABLE> for omitido, a tabela não terá bordas.
Para o nosso exemplo, faremos outra tabela simples de três linhas e três
colunas. As células da primeira linha serão marcadas com <TH>, para que recebam
formatação de cabeçalho. Também incluímos uma legenda:
<table border>
<tr> <th>Livro</th> <th>Categoria</th> <th>Paginas</th> </tr>
<tr> <td>Delphi 7 </td> <td>Programação</td> <td>250</td> </tr>
<tr> <td>PHP 5</td> <td>Programação</td> <td>110</td> </tr>
<caption>Livros em Destaque</caption>
</table>
Assim como com as listas, os rótulos
de fechamento </TR>, </TD> e </TH> podem ser omitidos. (<TR> é fechado pela
próxima ocorrência de <TR> ou por </TABLE>; <TD> e <TH> são fechados pela
próxima ocorrência de <TD>, <TH>, <TR> ou </TABLE>)
Veja como foi formatada a tabela listada acima. Observe que, por default, os
dados de <TH> são alinhados pelo centro, enquanto que os dados de <TD> são
alinhados com a margem esquerda. EM tabelas o uso de atributos e muito comum
para melhorar a formatação mas isso veremos mais a frente.
Clique aqui e veja o exemplo.
Links
Âncoras Remotas
Nesta seção, adicionaremos ligações de hipertexto (links) à nossa home
page. O texto (ou imagem) que aciona o link e o objeto-alvo do mesmo são
chamados de âncoras. Uma âncora é um dos dois lados de um hyperlink
(ligação de hipermídia), que consiste de uma âncora-fonte que aponta para
o endereço de uma âncora-destino. O destino pode ser qualquer formato de
mídia eletrônica (um arquivo HTML, um arquivo de texto, uma imagem, um arquivo
de vídeo, etc.)
O elemento <A> marca uma âncora. <A
HREF="URL da âncora-destino> define uma âncora-fonte. O texto que for
marcado com <A HREF> aparece na página em destaque (geralmente azul e
sublinhado, por default, nos browsers mais populares). Se o link for acionado
(clicando o mouse sobre o texto marcado), o browser irá buscar o objeto apontado
pela URL. Alguns exemplos tornarão a compreensão mais fácil:
Vamos colocar links para o índice
Google
... sugiro que procure no <a href=http://www.google.com.br>
<B>google</B></a>.
A localidade acima foi referenciada
através de uma URL absoluta. Podemos também usar URLs relativas. Por exemplo,
vamos criar uma ligação para o Home Page deste tutorial, no final da página:
<hr>
<a href="index.html">Volta para Topo.</a>
<hr>
Podemos também utilizar outros tipos
de URLs como ftp, gopher, malito, etc. Na nossa página-exemplo, criaremos um
link de correio eletrônico (URL tipo mailto) para um endereço fictício. Se o
link for acionado, deverá aparecer uma janela para envio de correio eletrônico:
Para mais informações entre em contato com
<a href="mailto:livros@livraria.com.br>livros@livraria.com.br</a>.(endereço
fictício)<br>
Âncoras Locais
É possível também usar âncoras para navegar dentro de um documento local
ou remoto. <A NAME="nome-da-âncora"> marca uma posição no documento
(âncora-destino) que pode ser referenciada, dentro do mesmo documento, por <A
HREF="#nome-da-âncora">. No exemplo a seguir, marcaremos as três seções:
<ul>
<li><a name="Redes">Redes
<li><a name="Programacao">Programação
<ul>
<li>Delphi
<ol>
<li><b>Os Segredos do Delphi 7</b> - 250 paginas
<li><b>Os Segredos do Delphi 2006</b> - 320 paginas
<li><b> Os Segredos do Delphi 2007</b> - 380 paginas
</ol>
<li>PHP
</ul>
<li><a name="Web">WEB
</ul>
e as chamaremos pelo sumário. Crie no rodapé da pagina a lista abaixo:
<h3> Sumario </h3>
<li><a href="#Redes">Livros Sobre Redes</a>
<li><a href="#Programacao">Livros sobre Programacao</a>
<li><a href="#Web">Livros sobre Web</a>
</ul>
Se quiséssemos referenciar as âncoras acima a partir de outro documento,
teríamos apenas que complementá-la com o trecho #nome-da-âncora. Por exemplo:
<a href="../referencias.html#HTML">Guias
sobre HTML</a>
Âncoras não precisam ser somente
páginas HTML. Podem também ser arquivos de imagem, vídeo, arquivos executáveis
ou qualquer outra mídia eletrônica.
No exemplo abaixo, incluímos uma
âncora para uma imagem GIF (livros.jpg) além de outros apontadores remotos com
informações sobre livros.
<p>Se você
realmente procura algo sobre livros, sugiro que procure no <a href=http://www.google.com.br>
<B>google</B></a> ou uma das muitas livrarias digitais que existem nomercado. <a
href="livros. jpg ">Clique Aqui</a>
Lembre-se que a imagem deve estar no mesmo diretório onde estão os arquivos
html. Caso esteja em um local diferente então você deve passar o caminho
completo no link utilizando caminho relativo.
Veja o resultado Aqui. Teste as âncoras locais clicando nos link do
sumario.Clique no texto para acessar a imagem através do linkl. Crie uma ligação
na SUA homepage para este tutorial!
Imagens Internas
No exemplo anterior, vimos que é possível criar âncoras para referenciar textos
e imagens. Neste exemplo, utilizaremos o elemento <IMG>, que permite que imagens
referenciadas sejam mostradas dentro da página. O elemento <IMG> possui
um atributo obrigatório: SRC="URL da imagem", que informa ao browser onde
ele deve buscar o arquivo de imagem.
Os formatos de arquivo de imagem aceitos por todos os browsers são .gif, .jpg,
.jpeg, .png entre outras. O formato GIF, da Compuserve, é o mais popular.
Começaremos colocando no início da
nossa página, uma imagem (de um livro é claro!). Temos um arquivo de imagem no
formato JPG, no mesmo diretório que o arquivo HTML da nossa homepage, chamado "logolivro.jpg".
Para incluí-lo na página, utilizamos <IMG> da forma abaixo.
<center><img
src="logolivro.jpg"><br>
<h1>Livros na Web</h1></center><hr>
Veja o resultado. Experimente substituir livro.jpg por outras imagens. Veja o
que acontece se você não colocar o <BR> após a chamada da imagem.
Observe também, no exemplo acima, que utilizamos o elemento <CENTER>. <CENTER>
faz parte do HTML. Se seu browser suporta <CENTER>, você verá o título e a
imagem centrados. Se não suporta, eles serão alinhados pela margem esquerda.
Se a imagem não está no mesmo diretório que a página, temos que informar o
caminho (URL relativa) para que possa ser encontrada. Por exemplo:
<img src="./images/stego.gif">
informa que a imagem stego.gif está
no subdiretório . Se o arquivo está em outra máquina ou em outra árvore de
diretórios HTML, é necessário informar a URL absoluta, por exemplo:
<img src="http://www.dsc.ufpb.br/brdscicon.gif">
No nosso exemplo, incluiremos um
ícone (imagem JPG) dentro da ligação que criamos para retornar ao Sumário. Este
ícone então será uma imagem ativa, ou seja, passa a ser um link também. Se você
clicar nela, ela faz alguma coisa.
<hr>
<a href="exemplo7.html"><img src="left.jpg">
Volta para Topo.</a>
<hr>
Antes que veja o resultado do
parágrafo anterior, vamos adicionar alguns parágrafos com imagens. Além do
atributo SRC, <IMG> pode receber um atributo que controla o alinhamento vertical
da figura em relação a linha em que está contida. Este atributo é ALIGN=posição,
onde posição pode ser top, middle ou bottom (default), que alinha a
imagem respectivamente, pelo item mais alto da linha, pelo meio ou pela base do
texto.
<h2>Imagens de Livros</h2>
<p>Este é um livro sobre <b>Delphi</b>: <img src="delphi.jpg>,
da categoria <i>Programação</i>. A figura do Livro foi incluída neste parágrafo
sem alinhamento vertical.
<p>O Livro de <b>PHP</b> <img src="php.jpg" align=middle>, pertence a categoria
<i>Programação</i> tambem. Neste parágrafo temos o alinhamento pelo meio da
linha.
O Livro de <b>WEB</b>
<img src="web.jpg" align=top> é do grupo
<i>Web</i>. Neste parágrafo
ele foi alinhado com a parte de cima da linha.
Veja e compare os resultados.
Clique aqui e veja o resultado Final.
Conclusão
Com o que foi visto até agora, você já será capaz de criar sua homepage. Se
quiser incrementá-la com alguns atributos e recursos, então não perca o próximo
artigo. 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
