A linguagem HTML é relativamente fácil. Em
poucos dias você aprende. O difícil é entender como explorar
seus recursos limitados para criar páginas atraentes e com
conteúdo. A outra dificuldade é conceber textos interessantes
para serem colocados nas Home Pages. Existem programas com a
finalidade de criar páginas Web, os chamados editores de HTML.
Mas cuidado: a maioria deles apenas facilita a inserção de
comandos e diretivas HTML em modo texto.
Todo documento HTML apresenta elementos entre parênteses angulares (< e >); esses elementos são as etiquetas (tags) de HTML, que são os comandos de formatação da linguagem. A maioria das etiquetas tem sua correspondente de fechamento:
<etiqueta>...</etiqueta>
Isso é necessário porque as etiquetas servem para definir a formatação de uma porção de texto, e assim marcamos onde começa e termina o texto com a formatação especificada pela etiqueta.
A estrutura de um documento HTML apresenta os seguintes elementos:
<HTML> <HEAD><TITLE>Título do Documento</TITLE></HEAD> <BODY> texto, imagem, links, ... </BODY> </HTML>
As etiquetas HTML não são sensíveis à caixa. Traduzindo: tanto faz escrever <HTML>, <Html>, <html>, <HtMl>, ...
<HEAD> contém informações sobre o documento; o elemento <TITLE>, por exemplo, define um título, que é mostrado no alto da janela do browser. Nesta página, por exemplo, está definido assim:
<HEAD><TITLE>Primeiros Passos em HTML</TITLE></HEAD>
Todo documento WWW deve ter um título; esse título é referenciado em buscas pela rede, dando uma identidade ao documento.
É sugerido que os títulos dos documentos sejam sugestivos, evitando-se, portanto, títulos como "Introducao". Os títulos não devem conter acentos ou outros caracteres especiais (eles não serão mostrados corretamente por alguns browsers).
O texto contido em <BODY> é mostrado na janela principal do browser, contendo o texto que será apresentado ao leitor. <BODY> pode conter cabeçalhos, parágrafos, listas, tabelas, links para outros documentos, e imagens.
Há seis níveis de cabeçalhos em HTML: de <H1> a <H6>:
<H1>Este é um cabeçalho de nível 1</H1> <H2>Este é um cabeçalho de nível 2</H2> <H3>Este é um cabeçalho de nível 3</H3> <H4>Este é um cabeçalho de nível 4</H4> <H5>Este é um cabeçalho de nível 5</H5> <H6>Este é um cabeçalho de nível 6</H6>
Esses cabeçalhos são mostrados da seguinte forma:
Obs.: Cabeçalhos não podem ser aninhados.
É bom notar que o título do documento não precisa ter necessariamente o mesmo texto do cabeçalho principal.
Como vimos no exemplo 1, as quebras de linha não são significativas em HTML. Para separar blocos de texto, precisamos usar o elemento <P>:
Parágrafo 1;<P>Parágrafo 2.
que produz:
Parágrafo1;
Parágrafo2.
Quando queremos apenas mudar de linha, sem acrescentar uma linha em branco entre blocos de texto, usamos o elemento <BR>:
Parágrafo 1;<br> linha 1 do parágrafo 1, <br>linha 2 do parágrafo 1.<P>Parágrafo 2;<br> linha 1 do parágrafo 2, <br>linha 2 do parágrafo 2.
Que é apresentado da seguinte forma:
Parágrafo 1;
linha 1 do parágrafo 1,
linha 2 do parágrafo 1.
Parágrafo 2;
linha 1 do parágrafo 2,
linha 2 do parágrafo 2.
Usamos <BR> apenas quando queremos que a linha seja mudada em determinado ponto, porque os browsers já se encarregam de encaixar o texto apresentado dentro dos limites de sua janela.
Obs.: Como percebemos, tanto o elemento <P> quanto o elemento <BR> não exigem etiquetas de fechamento.
HTML permite ligações de uma região de texto (ou imagem) a um outro documento. Nestas páginas, temos visto exemplos dessas ligações: o browser destaca essas regiões e imagens do texto, indicando que são ligações de hipertexto - também chamadas hypertext links ou hiperlinks ou simplesmente links.
Para inserir um link em um documento, utilizamos a etiqueta <A>, da seguinte forma:
<A HREF = "arq_dest">âncora</A>
onde:
Há dois tipos de formatação em HTML: lógico e físico. Os efeitos de apresentação na tela são os mesmos: o motivo da distinção entre eles se deve à idéia básica de independência entre especificação e apresentação.
A formatação lógica segue o significado lógico do texto marcado. A formatação física especifica explicitamente o estilo que se quer para o texto: itálico, grifado etc.
Quando formatamos um trecho de texto como cabeçalho de nível 1, não explicitamos se esse tipo de cabeçalho deve ser em alguma fonte determinada, em um tamanho determinado, justificado à esquerda ou à direita, ou centralizado. Esses detalhes de apresentação são deixados para o browser - o dispositivo de apresentação do documento - que pode ser configurado de acordo com o leitor (usuário final).
Desse modo, além de facilitar enormemente o trabalho de quem escreve os documentos, a linguagem garante a uniformidade de apresentação de cabeçalhos, parágrafos, listas, etc.
HTML permite três modos texto especiais. São chamados modos lógicos, porque definem blocos de texto por seus propósitos lógicos. A maneira em que os blocos serão mostrados é determinada pelo browser.
<pre>uma linha aqui, outra ali, etc.</pre>
uma linha aqui, outra ali, etc.
Para citações de livros etc
Como visto anteriormente, HTML permite dois
tipos de formatação: lógico e físico.
HTML permite que caracteres especiais sejam
representados por sequências de escape, indicadas por três
partes: um & inicial, um
número ou cadeia de caracteres correspondente ao caracter
desejado, e um ; final.
Quatro caracteres ASCII - <, >, e & têm significados especiais em HTML, e são usados dentro de documentos seguindo a correspondência:
Entidade |
Caracter |
| < | < |
| > | > |
| & | & |
Outras sequências de escape suportam caracteres ISO Latin1. Temos aqui uma tabela com os caracteres mais utilizados em Português:
Entidade |
Caracter |
Entidade |
Caracter |
|
| á | á | Á | Á | |
| â | â | Â | Â | |
| à | à | À | À | |
| ã | ã | Ã | Ã | |
| ç | ç | Ç | Ç | |
| é | é | É | É | |
| ê | ê | Ê | Ê | |
| í | í | Í | Í | |
| ó | ó | Ó | Ó | |
| ô | ô | Ô | Ô | |
| õ | õ | Õ | Õ | |
| ú | ú | Ú | Ú | |
| ü | ü | Ü | Ü |
Como vemos, as sequências de escape são sensíveis à caixa.
- Por que usar estas formatações??
Os browsers costumam também mostrar corretamente os caracteres acentuados normalmente. Essa prática, embora facilite sobremaneira a digitação dos documentos, não é recomendada "ainda", devido a um problema relativo à transmissão desses caracteres.
Chama-se conjunto de caracteres uma representação digital de texto. Um caracter é um símbolo cujas diversas representações devem significar a mesma coisa para uma comunidade de pessoas. Na prática, porém, existem alguns conjuntos que associam dois números distintos a um mesmo caracter.
Na World-Wide Web, os acentos da Língua Portuguesa chegam a travar os browsers de usuários em outros países, que usam um conjunto de caracteres diferentes do ISO Latin 1 - apesar do ISO Latin 1 ser padrão na WWW.
A versão 2.0 do Netscape permite que se escolha a codificação adequada ao conjunto de caracteres relativo aos documentos a serem recuperados. Mesmo assim, caracteres japoneses às vezes travam browsers no Brasil. Para garantir a interpretação apropriada de um documento, pode-se inserir uma indicação do esquema de codificação, escrevendo por exemplo:
<HTML> <HEAD> <META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=ISO-8859-1"> <TITLE>...
O comando img é utilizado para se fazer inserções de imagens em documentos, junto com os textos:
<img src="nome_imagem">
onde nome_imagem é o nome do arquivo que contém a imagem que se quer inserir; pode ser referenciado também um arquivo que esteja em um diretório diferente, ou mesmo de um outro servidor (o que, logicamente, não é conveniente).
Assim, escrevendo:
<img src = "bola.gif">
inserimos a figura no documento.
As imagens são arquivos com extensão *.gif, *.xbm, *.jpg.
Existem também alguns atributos de alinhamento, que produzem os seguintes resultados:
<img align=top src="imagem"> Alinha o texto adjacente com o topo da imagem, embora com linhas compridas o resultado não seja muito bom
<img align=middle src="imagem"> Alinha o texto adjacente com o meio da imagem, embora com linhas compridas o resultado não seja muito bom
<img align=bottom src="imagem"> Alinha o texto adjacente com a parte de baixo da imagem (default)
O Netscape permite, ainda, os seguintes alinhamentos do HTML 3.0:
<img align=right src="imagem"> Alinha imagem à direita, e tudo o que houver ao redor (texto, outras imagens) a partir do topo da imagem. É preciso testar o resultado para ver se surte o efeito desejado na tela.
<img align=left src="imagem"> Alinha imagem à esquerda, e tudo o que houver ao redor (texto, outras imagens) a partir do topo da imagem. É preciso testar o resultado para ver se surte o efeito desejado na tela.
Para ter duas imagens, uma em cada margem, numa mesma linha, escreva:
<IMG align=left SRC="bola.gif"
alt="imagem"><IMG align=right
SRC="bola.gif" alt="imagem">
Há vários tipos de listas em HTML, sendo estas as mais usadas:
<DL> <DT>termo a ser definido <DD>definição <DT>termo a ser definido <DD>definição </DL>
Que produz:
Este tipo de lista é muito útil quando se deseja, por exemplo, escrever um parágrafo de texto tabulado para a direita:
<DL> <DD>Desta maneira é possível escrever parágrafos com uma apresentação diferente e agradável de se ler! </DL>
<UL>
<LI>item de uma lista
<LI>item de uma lista, que pode ser tão grande
quanto se queira, sem que seja necessário se preocupar
com a formatação das margens de texto
<LI>item
</UL><OL> <LI>item de uma lista numerada <LI>item de uma lista numerada, que pode ser tão grande quanto se queira, sem que seja necessário se preocupar com a formatação das margens de texto <LI>item de lista numerada </OL>
Observação: As listas podem ser aninhadas. Por exemplo:
<DL> <DT>termo a ser definido <DD>definição <OL> <LI>item de uma lista numerada <LI>item de uma lista numerada <UL> <LI>item de uma lista </UL> <LI>item de uma lista numerada </OL> <DT>termo a ser definido <DD>definição </DL>
Netscape e Internet Explorer aceitam uma formatação alternativa
para listas numeradas e não-numeradas:
<UL type=square>
<LI>item de uma lista
<LI>item de uma lista
<LI>item de uma lista
</UL><UL type=disc>
<LI>item de uma lista
<LI>item de uma lista
</UL><UL type=circle>
<LI>item de uma lista
<LI>item de uma lista
</UL>É possível também modificar os bullets de apenas alguns ítens da lista:
<UL type=square>
<LI>item
<LI type=circle>item
</UL> <OL type=I> <LI>item de lista numerada <LI>item de lista numerada <LI>item de lista numerada <LI>item de lista numerada <LI>item de lista numerada </OL>
<OL type=i> <LI>item de lista numerada <LI>item de lista numerada <LI>item de lista numerada <LI>item de lista numerada <LI>item de lista numerada </OL>
<OL type=a> <LI>outro item <LI>outro item <LI>outro item </OL>
<OL type=A> <LI>outro item <LI>outro item <LI>outro item </OL>