Ejemplo de página WEB

Se pretende estudiar algunos conceptos básico de construcción de una página web.

Esto es la etiqueta arriba

HEAD
Entre <HEAD> y </HEAD> se ponen ciertos tag para identificar la página, como título.

TITLE
Entre <TITLE> y </TITLE> se pone el título de la página. Está dentro del HEAD.

META
En el tag META también se puede establecer el título de la página, además de su descripción, palabras claves, dirección del propietario, autor, tipo de carácteres que utiliza la página, idioma...

META NAME="TITLE" CONTENT="Página web de Antonio"
META NAME="DESCRIPTION" CONTENT ="Esta página trata de la elaboración de páginas web"
META NAME="KEYWORDS" CONTENT="página, web, ejemplo, tag, hiperenlace"
META NAME="OWNER" CONTENT="jperez@terra.es"
META NAME="AUTHOR" CONTENT="Antonio Pérez"
META HTTP-EQUIV="CHARSET" CONTENT="ISO-8859-1"
META HTTP-EQUIV="CONTENT-LANGUAJE" CONTENT="Spanish"

Se puede prescindir de este tag.

BODY

Entre <BODY> y </BODY> se escriben los código de la página, es decir, el cuerpo de la página. Casi todo lo que pongamos en la página estará entre estos dos tags.

Dentro del tag BODY, se pueden establecer el tipo y color de letras de los hiperenlaces y del fondo de la página (background).
<BODY> vLink=#993399 aLink=#993399 link=#996600 bgColor=#ffffff background="c:/DIBUJOS/fondo.jpeg">

Cambios de líneas y espacios
Los cambios de líneas y los espacios presentes en el código fuente no se respetan en el visor de la página.
Es decir, si cuando construimos la página cambiamos de línea de texto en el código fuente, este cambio de línea no se verá en el visor. Del mismo modo si en el código fuente ponemos una línea muy larga, el visor de la página cambiará de línea cuando lo vea conveniente.
Tampoco se respeta los múltiples espacios. Si escribimos una palabra y luego ponemos varios espacios, el visor de página solo dejará un espacio.
Es decir, si en el código fuente escribimos "Esto...........es.un.ejemplo", luego se verá de esta manera "Esto.es.un.ejemplo" (Los puntos lo he puesto como si fuesen espacios)
Para provocar un cambio de línea tenemos que poner (Break Row, Rotura de Línea)

Los tag o marcas. El centrado
Son los códigos que se utilizan en la página. Casi todos los códigos tienen un inicio y un final.
Ejemplo el CENTRADO: <CENTER> y </CENTER>, tiene un comienzo, luego se pone la palabra que se quiere centrar y luego un final de centrado.
<CENTER> Esto estará centrado</CENTER>, saldrá de esta manera:
Esto estará centrado
Se pueden anidar los tag, es decir, una tag dentro de otro tag.
<CENTER> Esto estará centrado y en negrita</CENTER>
Esto estará centrado y en negrita
Tipos de letras
Existen diversos tipod de letras, los más importantes son negrita, cursiva y subrayado.
Se utilizan los siguientes tag B, I y U.
Ejemplo:
En negrita----------------- En negrita
En cursiva-------------------- En cursiva
Subrayada----------------- ~~Subrayada~~

Titulares o Cabeceras
Podemos cambiar el tamaño de un texto mediante el tag H, (H1, H2, H3, H4,...) (Head Cabecera o Titular), también se puede cambiar el tamaño del texto mediante el tag FONT que veremos posteriormente.

Con H1

Con H2

Con H3

Con H4

Líneas horizontales
Se consigue mediante el tag <HR>

Texto libre
Si escribimos un texto entre los tag <PRE></PRE>, el texto aparecerá como en el código fuente, se respetan los cambios de líneas y los espacios del código fuente.

Texto     escrito    en
Preformateado, sale igual      que está en    el 
código fuente

Párrafo
Se utiliza para mejorar la lectura, mediante la separación de renglones.
De realiza mediante el tag .

Cambio de tipo de letra
Se realiza mediante la orden FONT y /FONT
Tipo de letra
Tipo de letra

Lista ordenada

<OL>
   <LI>Juan</LI>
   <LI>Antonio</LI>
   <LI>Pedro</LI>
</OL>

Saldrá de esta manera

Juan
Antonio
Pedro

Inserción de imagen
Se pone el siguiente código:
<IMG SRC="duke.gif" WIDTH=64 HEIGHT=51>

Inserción de hiperenlace
Se pone al siguiente código:
<A HREF="www.intel.com">Ve a Intel</A>
Ve a Intel

Inserción de un hiperenlace a una etiqueta en la misma página
En el lugar a donde queramos ir ponemos:
< NAME="arriba">Esto es arriba</A>
Y en donde queramos hacer el hiperenlace ponemos:
< HREF="#arriba">Ve arriba</A>
Ve arriba

Inserción de un hiperenlace indicado mediante una imagen
Poner:
<A HREF="www.intel.com"><IMG SRC="duke.gif" WIDTH=64 HEIGHT=51></A>

Inserción de una lista con hiperenlaces

<OL>
   <LI><A  HREF="www.intel.com">A intel</A></LI>
   <LI><A  HREF="www.altavista.com">A altavista</A></LI>
   <LI><A  HREF="www.yahoo.com">A yahoo</A></LI>
</OL>

Tablas
En una página web es algo complicado situar los textos e imágenes, ya que como hemos visto anteriormente, el visor de página no respeta los cambios de líneas ni los espacios del código fuentes. Una manera de solventarlo es utilizando las tablas:


<TABLE BORDER>
   <TD>uno </TD>
   <TD>dos </TD>
   <TD>tres </TD>
   <TD>cuatro </TD>
<TR>
   <TD>cinco </TD>
   <TD>seis </TD>
   <TD>siete </TD>
   <TD>ocho </TD>
<TR>
   <TD>nueve </TD>
   <TD>diez </TD>
   <TD>once </TD>
   <TD>doce </TD>
<CAPTION ALIGN=Top>Ejemplo de tabla </CAPTION>
</TABLE>

Ejemplo de tabla
uno	dos	tres	cuatro
cinco	seis	siete	ocho
nueve	diez	once	doce