AeroPlanos

Aero

Aero

S.O.S. HTML

HyperText Markup Language

— Esta é uma breve introdução para escrever HTML.

Se também pretendes escrever a tua Página Pessoal encontras aqui a maneira de o conseguir. Se já possuis um "Site" e pretendes compreender melhor HTML, estás no lugar certo. Esta página são os meus apontamentos sobre HTML. Talvez sejam a ajuda que procuras.

Índice:

Existem ficheiros (ou pastas) com a extensão .exe .doc .txt etc. Os ficheiros.exe são ficheiros executáveis (programas), os ficheiros.doc são documentos de texto, os ficheiros.txt são documentos de texto simples... Esta página é um ficheiro.html. É um ficheiro de texto simples, mas com determinadas características (códigos/tags). Ao ser lido por um "browser" (p.ex: Internet Explorer), o texto é apresentado de acordo com os códigos nele contidos. Porquê?
— Porque é um ficheiro HTML (HyperText Markup Language).
Para ser publicado necessita de um "Site". Neste caso o site é http://Aero-Planos.planetaclix.pt/.

Bem, se esta página é um ficheiro de texto simples, também pode ser lido e escrito com o "Bloco de notas" do Windows. Para isso acciona em "Ver código fonte" que se encontra num dos menus de comandos do Internet Explorer. Sugiro aliás esta técnica para se aprender com outros "Webmasters" como escrever páginas para a Web.

Criar uma Página:

Abre o "Bloco de notas" e escreve o seguinte:

<HTML>

<HEAD>
  <title>HTML - Apontamentos</title>
</HEAD>

<BODY>
<H1>HyperText Markup Language</H1>
<P>Estes são os meus apontamentos sobre HTML!<br>
... etc. etc. etc.</P>
</BODY>

</HTML>

Podes simplesmente copiar e colar o texto para o "Bloco de notas". Não esqueças de o gravar como... "Nota001.htm",ou qualquer outro nome, mas com a extensão ".htm" ou ".html".
É também bom ser-se arrumado. Cria pois uma pasta, p.ex: C:\PagPessoal\, para guardares as tuas experiências de HTML. O teu documento será então referenciado como C:\PagPessoal\Nota001.htm
Está feito! Vê o resultado através do I.E.(Internet Explorer). Escreveste o teu primeiro documento.html.

Nota:
— Os documentos HTML começam obrigatóriamente com <HTML> e terminam com </HTML>, indicando ao "browser" que efectivamente se trata de um documento HTML.
— São constituidos por duas partes fundamentais: <HEAD> e <BODY>.
— O código <P> e </P> marcam o início e o fim do parágrafo.
— Uma mudança de linha introduz-se com <BR> ou <br> (break). Neste caso não é necessário utilizar </br>.

HTML é uma linguagem com uma característica muito especial. É que para se criar um ficheiro.exe, isto é, para se fazer um programa executável, é necessário escrever o programa e depois compilá-lo. Em HTML não é necessário o compilador. Basta um qualquer editor de texto. Daí a sua beleza, o seu segredo... "de todos e para todos"! É a InterNet!

Inserir Imagens:

CS-XAO

Uma página sem imagens é como uma comida sem sal!
Uma imagem insere-se utilizando o código <img>. Para inserir a imagem "CS-XAO.jpg" que se situa na pasta "images" utilizei a seguinte instrução:

<IMG SRC="images/CS-XAO.jpg">

O atributo "SRC" informa o browser da localização e nome da imagem. Fornecendo também a indicação do tamanho da imagem consegue-se melhorar a velocidade de apresentação, pois o browser reserva assim antecipadamente o espaço necessário para a imagem.

<IMG SRC="images/CS-XAO.jpg"
WIDTH="175" HEIGHT="117">

Existe também outro atributo utilizado por <img> tag. Trata-se de "ALT" que fornece um texto alternativo para a imagem.

<IMG SRC="images/CS-XAO.jpg"
WIDTH="175" HEIGHT="117"
ALT="CS-XAO">

Recomenda-se a inclusão desta pequena descrição, pois para além de ser visível quando se pára o rato sobre a imagem, permite a apresentação do texto alternativo, caso a imagem não esteja disponível.

Imagens podem ser criadas com programas de edição de gráficos, p.ex: Paint do Windows, com um scaner ou por meio de câmaras digitais. Os formatos mais vulgarizados são: JPEG e GIF. Os primeiros produzem geralmente melhores resultados em fotografias. Existe também o formato PNG mas, tal como os GIFs, produz melhores resultados em artes gráficas, quando se lida com superfícies "planas" de cor.
Para evitar que a apresentação da página seja muito demorada, deve-se evitar a utilização de imagens demasiado grandes. Em alternativa pode-se fornecer um "link" de uma imagem a outra maior. Quem desejar ver os pormenores... terá essa possibilidade.

Criar Links:

A possibilidade de "navegar" na InterNet é conseguida por meio de "hyperlinks". Com um "click" pode-se passar dum canto do mundo para o outro! Com um click posso aceder a informação de outro continente, ou o meu amigo Frank Moss, da Australia, pode saber das minhas actividades em "AeroPlanos".
Se já dominas as bases de "HTML" e pretendes passar para o capítulo seguinte, click... "CSS"!

<A HREF="../CSS/index.html">CSS</A>

Se pretendes passar para outro "site" é necessário indicar a morada completa, o "URL" (Uniform Resource Locator).

<A HREF="http://www.google.pt/">Google</A>

Link to: — Google

Google
http://www.google.pt/ Uma imagem também pode servir para criar um link.

Basta substituir o texto que serve de âncora por uma imagem:

<a href="http://www.google.pt/"><img
  src="../images/GoogleLogo_60wht.gif" width="176" height="77"
  border="0" alt="Google http://www.google.pt/" align="middle">
</a>

Pode-se endereçar uma imagem a outra imagem, a outra página, ou a outro site.

AeroPlanos - Home <—— logo.gif
O link seguinte permite estabelecer a ligação da imagem logo.gif com a Home Page deste site.

<a href="/"><img src="logo.gif" alt="AeroPlanos - Home"></a>

O indicador <a>...</a> estabelece uma âncora entre um texto, imagem, etc. com outro objecto, página, imagem...

Um link de uma imagem a outra imagem é normalmente utilizado para criar "thumbnails". Para isso é necessário ter duas imagens de tamanhos diferentes.
Imagens muito grandes utilizam também uma grande quantidade de bytes, tornando a apresentação da página muito lenta.

Tags:

Os comandos que se usam para dar forma a documentos HTML são vulgarmente apelidados de "tags". Como referi no início, o documento é apresentado de acordo com esses "tags", códigos, instruções. O browser reconhece tratar-se de um "tag" pelos sinais < e >. Alguns exemplos:

<html></html>
<head></head>
<title></title>
<body></body>
<H1></H1> Capítulo, cabeçalho, (header)
<P></P> Início e fim de parágrafo
<BR> Mudança de linha (break)
<A></A> Para inserir um hyperlink
<B></B> Bold
<U>Sublinhado</U> Sublinhado
<i>Itálico</i> Itálico
<i><u>Itálico sublinhado</u></i> Itálico sublinhado

O objectivo não é decorar estes comandos (tags). Existem muitos mais! Pretende-se com estes exêmplos compreender a sua lógica.
Repare-se no último exemplo:
<i><u>...</u></i> está certo
<i><u>...</i></u> está errado!

Caracteres especiais: &®ñ¶½¿

Uma mudança de linha pode acontecer onde não é desejavel. Ás vezes pretende-se que duas palavras, como "Rools Royce", permaneçam na mesma linha, mesmo que o browser, por exemplo por motivos de redimensionamento de ecran, as vá separ. Para evitar isso utiliza-se um caracter especial &nbsp; "non breaking space" em substituição do espaço entre as palavras.

Problema com solução idêntica se coloca se pretendermos escrever o símbolo < sem que seja considerado como uma instrução. O caracter especial introduz-se escrevendo &lt; em substituição do símbolo "menor que" (less than). Os caracteres especiais apresentam-se no quadro:

Caracteres Especiais
Caracter Código
© &copy;
® &reg;
&trade;
  &nbsp;
" &quot;
& &amp;
< &lt;
> &gt;
&#8212;
&#8364;

Para escrever em português utiliza-se um conjunto de caracters especial (charset=ISO-8859-1). É o conjunto de caracteres designado por "Latin 1" utilizado na Europa Ocidental.
É por isso conveniente incluir a seguinte linha de comando em <head>:

<meta http-equiv="Content-Type"
      content="text/html; charset=ISO-8859-1">

O quadro seguinte apresenta o conjunto de caracteres especiais designados por "Latin 1":

Latin 1 character set
charset=ISO-8859-1
  &nbsp; À &Agrave; à &agrave;
¡ &iexcl; Á &Aacute; á &aacute;
¢ &cent; Â &Acirc; â &acirc;
£ &pound; Ã &Atilde; ã &atilde;
¤ &curren; Ä &Auml; ä &auml;
¥ &yen; Å &Aring; å &aring;
¦ &brvbar; Æ &AElig; æ &aelig;
§ &sect; Ç &Ccedil; ç &ccedil;
¨ &uml; È &Egrave; è &egrave;
© &copy; É &Eacute; é &eacute;
ª &ordf; Ê &Ecirc; ê &ecirc;
« &laquo; Ë &Euml; ë &euml;
¬ &not; Ì &Igrave; ì &igrave;
­ &shy; Í &Iacute; í &iacute;
® &reg; Î &Icirc; î &icirc;
¯ &macr; Ï &Iuml; ï &iuml;
° &deg; Ð &ETH; ð &eth;
± &plusmn; Ñ &Ntilde; ñ &ntilde;
² &sup2; Ò &Ograve; ò &ograve;
³ &sup3; Ó &Oacute; ó &oacute;
´ &acute; Ô &Ocirc; ô &ocirc;
µ &micro; Õ &Otilde; õ &otilde;
&para; Ö &Ouml; ö &ouml;
· &middot; × &times; ÷ &divide;
¸ &cedil; Ø &Oslash; ø &oslash;
¹ &sup1; Ù &Ugrave; ù &ugrave;
º &ordm; Ú &Uacute; ú &uacute;
» &raquo; Û &Ucirc; û &ucirc;
¼ &frac14; Ü &Uuml; ü &uuml;
½ &frac12; Ý &Yacute; ý &yacute;
¾ &frac34; Þ &THORN; þ &thorn;
¿ &iquest; ß &szlig; ÿ &yuml;

E ainda... para escrever água (H2O) ou 22=4 utilizam-se os códigos <sub> e <sup> "superscript" e "subscript", que colocam o texto ligeiramente acima ou abaixo da linha.

H<sub>2</sub>O
2<sup>2</sup>=4

Ex.mo(a) Senhor (a):

Mais?...

Site Map:

Por vezes a navegação torna-se difícil. Em "sites" muito grandes, com muitas páginas, ou mesmo dentro da própria página, quando se pretende encontrar determinado assunto, a solução é o "Mapa do Site". O "Site Map" de AeroPlanos é um exêmplo de como criar zonas de uma imagem que sejam links a outras páginas ou a capítulos.
Primeiro é necessário criar uma imagem. De preferência uma imagem.gif pelo seu tamanho reduzido em bytes. Depois insere-se a imagem no documento HTML. Tudo bem? Necessitas rever como inserir imagens?

Mapa deste Site

Mapa do Site AeroPlanos Home Arquitectura Aviação Links Contactos S.O.S. index

Uma vez criada a imagem, insere-se no documento, mas com mais algumas informações:

<p align="center">
<img src="Mapa.gif" width="400" height="300" border="0"
usemap="#mapa" alt="Mapa do Site">
<map name="mapa">
<area shape="rect" coords="122,22,275,69" href="/"
  alt="AeroPlanos Home">
<area shape="rect" coords="94,100,164,121" href="Arq1.html"
  alt="Arquitectura">
<area shape="rect" coords="234,100,304,121" href="RV-6.html"
  alt="Aviação">
<area shape="rect" coords="94,158,164,179" href="Links.html"
  alt="Links">
<area shape="rect" coords="234,158,304,179" href="Contactos.html"
  alt="Contactos">
<area shape="circle" coords="199,233,22" href="../index.html#HTML"
  alt="S.O.S. index">
</map></p>

O atributo src especifica qual a imagem a inserir, "Mapa.gif". O atributo usemap utiliza-se para referenciar o elemento "mapa". Essa é a razão do símbolo #.

O elemento map especifica quais as zonas do "mapa" que servirão de hyperlinks. O atributo name relaciona o atributo usemap com a imagem propriamente dita, da mesma forma como uma palavra é usada para servir de link.

O elemento area serve para definir uma zona da imagem, a qual pode ter uma determinada forma, shape. As formas possíveis são: "circle" "rect" "poly". O atributo coords especifica as coordenadas da area, que por sua vez dependem da forma, shape, especificada.

O canto superior esquerdo de uma imagem tem as coordenadas (pixel coords) (x,y)="0,0". Á medida que se vai descendo o valor de y vai aumetando. O canto inferior esquerdo teria p.ex. as coords="0,100", (x=0,y=100). O canto superior direito as coords="100,0", (x=100,y=0). Para definir a área de cada uma das três formas, as coordenadas a especificar são as seguintes:

Note-se que se especificou sempre o atributo alt. O texto alternativo servirá de orientação se a imagem não estiver acessível.

Vamos olhar para a última parte do código. Diz respeito ao círculo que estabelece a ligação a esta mesma página. O hyperlink é feito da seguinte forma:

<area shape="circle" coords="199,233,22" href="../index.html#HTML"
  alt="S.O.S. index">

Quando o rato estaciona sobre o círculo, vê-se, na "Barra de estado" do I.E., o endereço de destino do link.

#...

O endereço é um ponto marcado na página, "index.html", com o nome "HTML".
Note-se que se usou o mesmo caracter que em usemap="# mapa".
O ponto "HTML" foi marcado da seguinte maneira:

<h3><a name="HTML">HTML</a></h3>

Também se pode construir um "Mapa do Site" por este processo:

Para experimentar se este "mapa" funciona podes "clicar" num título. Para voltar aqui basta premir a tecla "Retroceder" do I.E.

O código deste "Site Map" é o seguinte:

<ul><li><b><a name="sitemap">AeroPlanos</a></b>
<ol>
<li><a href="/">Introdução</a> <small>(Home)</small></li>
<li><a href="../../Arq1.html">Arquitectura</a></li>
<li><a href="../../RV-6.html">Aviação</a></li>
<li><a href="../index.html">S.O.S.</a>
  <ul>
  <li><a href="#top" class="pag">HTML</a> <small>(top)</small>
    <ul>
    <li><a href="#imagens" class="pag">Inserir Imagens</a></li>
    <li><a href="#links" class="pag">Criar Links</a></li>
    <li><a href="#tag" class="pag">Tags</a></li>
    <li><a href="#latin1" class="pag">Caracteres especiais</a></li>
    <li><a href="#map" class="pag">SiteMap</a></li>
    </ul></li>
  <li><a href="../CSS/index.html">CSS</a></li>
  <li><a href="../XHTML/index.html">XHTML</a></li>
  <li><a href="../XML/index.html">XML</a></li>
  <li><a href="../XSL/index.html">XSL</a></li>
  <li><a href="../DTD/index.html">DTD</a></li>
  <li><a href="../JavaScript/index.html">JavaScript</a></li>
  <li><a href="../Tips/index.html">Tips</a></li>
  <li><a href="../DOM/index.html">DOM</a></li>
  </ul></li>
<li><a href="../../Links.html">Links</a></li>
<li><a href="../../Contactos.html">Contactos</a></li>
</ol></li>
</ul>

O "tag" ul utilizou-se para criar a "lista" dos títulos, definidos por li linhas e outras sub-listas: ol (ordered list) e ul (unordered list).

— Para criar um link dirigido a um ponto específico de uma página, cria-se uma referência na página <a name="fim">Fim</a>, e o link a esse ponto:

<a href="#start">Princípio</a>
<a href="Página.html#fim">Fim</a>

Link to: — "Princípio e Fim"!