El post que buscas se encuentra eliminado, pero este también te puede interesar

Como crear tu propia pagina web [SuperMegapost](parte 1)

introduccion al curso

intro

este curso está dedicado a mostrarte la manera de crear un sitio de éxito en la red. Como complemento a este sitio te ofrecemos este pequeño manual con el que podrás conocer los entresijos del lenguaje HTML, el que se usa para crear páginas web.

En este curso pretendemos tan solo que llegues a ser capaz de construir páginas web correctas, válidas para cualquier explorador, tando los de la familia de Netscape como los diferentes Explorers de Microsoft y otros. La idea es por tanto que estas páginas te sirvan como una guia práctica en tu labor de crear buenas páginas web.

Quizás pienses que con los editores gráficos está todo hecho y no es necesario conocer el HTML. En parte llevas razón, si no pretendes pasar del nivel de principiante y tan solo quieres crear páginas impersonales para ti y tus amigos pues no necesitas conocer HTML. Pero si lo que quieres es llegar a crear y publicar verdaderos sitios web de aspecto profesional y dignos de estar en la red, entonces lo mejor es que conozcas a fondo el lenguaje con el que se construyen esos sitios.

que es una pagina web?

Pues eso de entrada podemos preguntarnos qué es una página web. Habrían dos respuestas: para el internauta y para el diseñador.

Para el internauta una página WEB es una pantalla en su monitor que le muestra la información que va buscando y enlaces a otros sitios relacionados.

Para el diseñador una página WEB es un documento construído para mostrar información en la pantalla de un monitor, que contiene además de la información una serie de instrucciones para indicar como se ha de mostrar esa información. Estas instrucciones se escriben siguiendo un lenguaje llamado HTML

Como ves el diseñador define la página web como algo más completo y técnico que el simple internauta. La página web se concreta en un documento con un nombre terminado con la extensión .htm o .html.

Una serie de páginas web interconectas e interrelacionadas de alguna forma (el mismo tema, el mismo objetivo...) forman un sitio web, que habitualmente está almacenado en un servidor.

requisitos

Para seguir el curso los requisitos son mínimos: un ordenador, un navegador y un editor de texto simple es suficiente. Pero te recomendaría, además, instalar un servidor de internet en tu ordenador. No te asustes, no es nada del otro mundo. Tanto si usas Windows como si te mueves en el mundo Linux te recomiendo el servidor Apache (si piensas trabajar con PHP te recomiendo la versión 1.xx, la 2 sigue siendo desaconsejable), es muy simple de instalar y de configurar. Con este servidor corriendo en tu equipo tendrás un sitio llamado localhost al que podrás acceder como si se tratara de un servidor de internet: http://localhost/, pero solo es visible en tu ordenador.

En cuanto al editor de páginas web utiliza un editor tipo texto, o uno gráfico, pero trabajano en modo texto. Recuerda que la idea es conocer el lenguaje HTML, y los editores gráficos esconden el código. Míra estas herramientas que te pueden ser útiles, recuerda que de gratis también hay cosas buenas.

En cuanto al navegador lo mejor es tener uno de cada, de esa manera podrás comprobar que todo lo que hagas funciona en ambos modelos, aunque hoy por hoy el rey es el Explorer de Microsoft.

el HTML

Antes de entrar de lleno en materia un poquito de historia, nunca viene mal conocer el material de trabajo a fondo. El HTML o lenguaje de marcas de hipertexto es un derivado de un lenguaje usado para describir documentos, el SGML. ¿Y esto que significa? Pues muy sencillo: la estructura de las páginas web se describe en la propia página mediante una serie de etiquetas que le dicen al navegador como debe mostrar el documento, o sea, la página web: cuando debe cambiar de párrafo, cuando debe mostrar el texto en negrita o en color, cuando mostrar una imagen, cuando un enlace a otro documento, etc. Y esto se lo dice al navegador mediante unas marcas o etiquetas en el documento. El HTML es el lenguaje que explica qué etiquetas se pueden usar en una página y como se usan.

Como ves todo va mezclado: información y formato, algo que ha comenzado a cambiar con la aparición de los estilos CSS, un interesante intento de separar la información del formato de presentación.

Los inicios: HTML 2.0

Cuando internet salió del ámbito universitario y se convirtió en una herramienta de dominio público la versión de HTML existente era la 2.0, algo limitada pero que cualquier navegador va a ser capaz de interpretar.

HTML 3.0 y 3.2

A medida que la red se extendía, los documentos que circulaban por ella se hicieron más complejos y completos, la versión 2.0 pronto se mostró demasiado limitada para cumplir con su cometido: mostrar las páginas web en los terminales de los usuarios. Así que los exploradores comenzaron a incluir etiquetas extras no contempladas en el estándard. Por entonces el IETF (Intenert Enginierign Task Force) era el encargado de normalizar todo lo relativo a la recien nacida red de redes y elaboró la versión 3.0, versión que pretendía incorporar las nuevas etiquetas y las que estuvieran por llegar.

Este standard no terminó de cumplir lo esperado, además en esas fechas la sección de standarización de HTML de este comité cerraba sus puertas, por lo que un grupo de empresas, entre las que estaban Netscape, Microsoft, IBM y Sun, crearon un nuevo comité para estandarizar internet, era el W3C, organismo que aún hoy dicta los estándares no solo para HTML, sino también para las hojas de estilo CSS y otras herramientas de la red. Su primer trabajo consistió en mejorar la versión 3.0 de HTML, lo que llevó al HTML 3.2, que incluía muchas de las nuevas etiquetas que los principales navegadores de la época, osea, Netscape y Explorer, ya estaban utilizando.

HTML 4.0

El HTML 3.2 era una solución temporal que se aprobó en enero de 1997, momento en el que el W3C comenzaba a eloborar un nuevo estandard con reformas profundas, era la versión 4.0. En julio de 1997 se presenta el borrador de este nuevo estándar que unifica el manejo de los marcos (frames e iframes), las hojas de estilo y los scripts. El 17 de diciembre de 1997 dicho borrador corregido fue finalmente aprobado como HTML 4.01, y es el que aún hoy día viene usándose para la creación de las páginas web.

tu primera pagina

el codigo

Lo mejor para aprender a hacer algo es ... ¡hacerlo!. Así que vamos a la primera página

<HTML>
<HEAD>
<TITLE>Mi primera pagina web
</TITLE>
</HEAD>
<BODY>
<H1 align="center" >Mi Primera pagina web </H1>
<HR>
<P>
Esto tan sencillo es una verdadera página web, aunque le falta el contenido, pero todo llegará.</P>
</BODY>
</HTML>


Si quieres ver como queda esto en el explorador solo tienes que pulsar aquí: http://creatuweb.espaciolatino.com/tutorhtml/ejemplos/mipagina.htm

la explicacion

Si te fijas en la página que ves con el explorador solo se ve parte de lo que has escrito, concretamente todo lo que no está encerrado entre los símbolos < y >. Eso es el contenido de la página, pero ¿y lo que está entre esos paréntesis angulares? pues esas son las etiquetas que le dicen al explorador como mostrar el contenido: en grande, con colores, centrado, el título de la página, etc. Si te fijas cada etiqueta tiene un comienzo y un fin:

<ETIQUETA parámetros> ... </ETIQUETA>

Como ves una apertura y un cierre. Algunaas etiquetas (como <BR> cambio de línea o <HR> linea horizontal) no llevan cierre. Fijaros que lo primero que tenemos es la etiqueta <HTML> cerrda al final del documento con </HTML>, eso quiere decir que estamos ante un HTML:

<HTML> ... </HTML>

Dentro de ese documento vemos una parte llamada cabecera, que la reconocerás porque está limitada con la etiqueta <HEAD> </HEAD>. Él contenido de esta parte no siempre es visible, y si lo es nunca se muestra en la página en si. Contiene por ejemplo el título que se ve en la ventana del explorador, arriba a la izquierda. La cabecera queda por tanto :

<HEAD>
<TITLE>Mi página web</TITLE>
</HEAD>


Puede contener muchas otras cosas, pero eso lo dejamos para más adelante.

El cuerpo del documento

La otra parte es el cuerpo o <BODY> </BODY>, es el contenido de la página web. Tiene una etiqueta con cierre:

<BODY> ... </BODY>

Y ahora el contenido:

<H1 align="center"> Mi primera página web</H1>

Con esto colocaremos el texto en formato <H1> (o cabecera 1) y centrado (align="center", o sea, en tamaño grande y centrado en la página, una forma de resaltar la frase. Ahora separamos esa frase por medio de una línea horizontal:

<HR>

Como ves este es un ejemplo de etiqueta sin cierre. Y por último colocamos un texto escplicativo en un párrafo (<P></P>, o sea, un bloque de texto con un espacio por delante y otro por detrás :

<P>Esto tan sencillo es una verdadera página web, aunque le falta el contenido, pero todo llegará.</P>


Para empezar no está mal, por supuesto existen muchas más etiquetas con misiones diferentes a la de mostrar texto, pero eso lo iremos viendo poquito a poco.

el documento HTML

Estructura del documento

La estructura de un documento HTML se puede resumir así:

tipo de documento
<HTML>
<HEAD>
<TITLE>titulo de la página</TITLE>
cosas que afectan a la página pero no a su contenido
</HEAD>
<BODY parámetros>
contenido de la página
</BODY>
</HTML>


En el tipo de documento deberemos especificar a que estándar del HTML responde nuestra página entre una de las siguientes opciones:

<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML 2.0//EN">

Cumple el estándar HTML 2.0

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">

Cumple el estándar HTML 3.2

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"
"http://w3.org/TR/REC-html40/loose.dtd">


Cumple el estándar HTML 4.0

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"
"http://w3.org/TR/REC-html40/strict.dtd">


Cumple el estándar HTML 4.0 y no contiene además elementos desaconsejables

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Frameset//EN"
"http://w3.org/TR/REC-html40/frameset.dtd">


Es una definición de marcos que cumple el estándar HTML 4.0

El HTML 4.0 considera desaconsejables aquellos elementos que, aún siendo soportados, han sido sustituidos por otros más potentes y, por ello, es posible que sean eliminados del estándar HTML en el futuro.

la cabecera

Suele ser el lugar más indicado para colocar aquellos elementos de la página que no alteren el contenido de la misma, aunque si la forma de presentarlo y su comportamiento. Es por eso que es el lugar más recomendable para colocar los scripts y las hojas de estilo, como veremos en los capítulos correspondientes.

Hay también otro elemento interesante que podremos incluir en nuestras cabeceras. Cuando especificamos una URL relativa en un enlace, en principio es para acceder a una página situada en nuestro mismo servidor. Sin embargo, si especificamos:

<BASE HREF="http://www.misitio.com/">
Ahora todas nuestras URLs relativas se encontrarán dentro del servidor http://www.misitio.com


Meta Name

Además del título de la página, uno de los elementos que se pueden incluir aquí son los META. Entre otras cosas, sirven para indicar propiedades de la página como pueda ser el nombre de su autor. Por ejemplo,

<META NAME="GENERATOR" CONTENT="Mozilla/4.03 (Win95; I) ">

nos indicaría la herramienta con que hemos creado la página (en este caso la versión 4.03 en español para Windows 95 del Composer de Netscape). Como veréis el uso es muy simple, en NAME colocamos el nombre de la etiqueta y en CONTENT colocamos su valor, ambos entre comillas y con el signo igual por delante.
Estas son las propiedades más comunes:

Name Content
AUTHOR Autor de la página.
CLASSIFICATION Palabras que permite clasificar la página dentro de un buscador jerárquico (como Yahoo).
KEYWORDS Palabras clave por las que encontrarán la página en los buscadores. Google no le hace mucho caso.
GENERATOR Herramienta utilizada para hacer la página.
DESCRIPTION Descripción del contenido de la página. Google le hace algún caso.

Meta http-equiv

Son etiquetas usadas también para dar información al navegador y complementan las etiquetas Meta vistas en el apartado anterior. En algunos casos existen etiquetas Meta Name y http-equiv similares. Su uso es similar a las etiquetas Meta Name, por ejemplo:

<META HTTP-EQUIV="expires" CONTENT="Wed, 26 Feb 1997 08:21:57 GMT">

La única diferencia está en que en lugar de NAME usamos HTTP-EUIV, el resto es igual. Cuando el contenido conste de más de varios valores, estos se separan con ; (punto y coma). Veamos algunos tipos:


expires: Fecha desde la que la página debe ser recargada por los navegadores
pragma: El contenido debe ser no-cache y sirve para que el navegador no guarde la página en el ordenador del internauta.
Content-Language: Idioma en el que está escrita la página. Se usan las iniciales como: es_ES: español España, en_US: ingles americano...
Refresh: Indica al navegador el tiempo (en segundos) que debe esperar para recargar la página automáticamente y la página a la que debe ir. Ambos datos se separan con un punto y coma.
Content-Type: Tipo de docMARGINWIDTH y MARGINHEIGHTumento y juego de caracteres usado. Lo habitual es colocar el valor:
text/html; charset=iso-8859-1
Si n o se usa los caracteres especiales (letras acentuadas, ñ) pueden quedar ilegibles .

el cuerpo

El cuerpo es el contenido de la página propiamente dicho, o sea, lo que se ve, en el es donde colocarán prácticamente todos los elementos que vamos a ir viendo por este manual. Los atributos que admite esta etiqueta <BODY>:

BACKGROUND coloca la imagen como fondo de la pagina
BGCOLOR Define el color de fondo de la página.
BGPROPERTIES Cuando es igual a FIXED el gráfico definido como fondo de la página permanecerá inmóvil aunque utilicemos las barras de desplazamiento.
TEXT Color del texto.
LINK Color de un enlace no visitado (por defecto azul).
VLINK Color de un enlace ya visitado (por defecto púrpura).
ALINK Color que toma un enlace mientras lo estamos pulsando (por defecto rojo).
LEFTMARGIN y TOPMARGIN Número de pixels que dejará de margen entre el borde de la ventana y el contenido de la página.
MARGINWIDTH y MARGINHEIGHT Equivalentes a los anteriores, pero éstos funcionan en Netscape.

No resulta recomendable cambiar los colores del texto y enlaces a no ser que exista alguna dificultad al leerlos por haber cambiado el fondo, ya que en muchas ocasiones el usuario ha podido cambiarlos en las opciones de su navegador y estarán ya a su gusto.

texto

Dando formato

Evidentemente en las páginas no todo el contenido es igual y por tanto no todo se ha de mostrar en la misma forma, por eso HTML nos permite modificar el aspecto del texto: podemos darle diferentes formatos, modificando desdel el aspecto de los caracteres (tipo de letra) hasta el color. Podemos formatear desde las letras una por una hasta bloques completos de texto.


Estilos de párrafo


<P> Sirve para delimitar un párrafo. Inserta una línea en blanco antes del texto.

<p ALIGN=x> ... </p> Justificar el texto del párrafo a la izquierda (ALIGN=LEFT), derecha (RIGHT), al centro (CENTER) o a ambos márgenes (JUSTIFY html4 ) /

<CENTER> ... </CENTER> Permite centrar todo el bloque de texto encerrado.

<PRE WIDTH=x> ... </PRE> Representa el texto encerrado en ella con un tipo de letra de paso fijo. El parámetro WIDTH especifica el número máximo de caracteres en una línea.

<BLOCKQUOTE> ... </BLOCKQUOTE> Mete sangrías de párrafo tanto a derecha como a izquierda. Suele usarse como tabulador

Los encabezados

El HTML nos ofrece seis etiquetas distintas para mostrar cabeceras o títulos.

<H1> ... </H1>
<H2> ... </H2>
<H3> ... </H3>
<H4> ... </H4>
<H5> ... </H5>
<H6> ... </H6>

Actúan a nivel de párrafo, es decir, el texto encerrado en <h1></h1> lleva una linea enblanco por delante y por detrás. Habitualmente se utilizan para destacar títulos de los diferentes apartados o secciones de un texto.

Cambiando el tipo de letra

B> ... </B> Pone el texto en negrita. Soy un texto negro como el tizón
<I> ... </I> Representa el texto en cursiva. Estoy ladeado
<U> ... </U> Para subrayar algo. Como soy muy importante estoy subrayado
<S> ... </S> Para tachar.
<TT> ... </TT> Permite representar el texto en un tipo de letra de paso fijo. No soy variable
<SUP> ... </SUP> Letra superíndice. E=mc2
<SUB> ... </SUB> Letra subíndice. ai,j=bi,j+1
<BIG> ... </BIG> Incrementa el tamaño del tipo de letra. Soy GRANDE
<SMALL> ... </SMALL> Disminuye el tamaño del tipo de letra. Creí ver un lindo gatito

Estilos de texto

Son formatos predefinidos aplicables a caracteres individuales (y a grupos por supuesto). Realmente no se usan demasiado salvo que se controlen mediante los estilos CSS.

<CITE> ... </CITE> Cita, por ejemplo de un texto
<CODE> ... </CODE> Código
<STRONG> ... </STRONG> Fuerte, negrita
<EM> ... </EM> Enfasis.
<KBD> ... </KBD> Teclado
<VAR> ... </VAR> Representar variables de un código.
<SAMP> ... </SAMP> Para representar una serie de caracteres literalmente.
<ABBR> ... </ABBR> Abreviaturas

Otros elementos

Estas etiquetas realmente no son formato ni de párrafo ni de texto, pero hay que ponerlas en algún sitio:

<BR> Cambio de línea. Simple salto de linea
<HR> Barra horizontal. --------------------------------------------------------------------------------
<!-- ... --> Comentarios. No se ve el contenido

Caracteres especiales

Si habéis estudiado o leído algo acerca del modo de funcionamiento de los ordenadores y la informática, casi seguro que sabéis que la información que introduces en el ordenador está codificadaes decir, escrita de alguna manera que sea entendible para la máquina. En relación con esto habréis topado con unas siglas algo extrañas código ASCII, que no es más que una forma de codificar los caracteres asignando a cada uno un valor numérico. Sin entrar en más detalles resulta que el código ASCII solo tiene 128 símbolos, pero existe una extensión del código que llega a los 256 símbolos, aunque sólo están normalizados los 128 primeros, los restantes se usan para caracteres extraños como nuestra ñ o la ç o el €, o las letras acentuadas.

Es decir que todo lo que no sean caracteres ingleses quedan codificados con códigos ASCII por encima de 127, como caracteres especiales o extendidos. En base a esto existen muchos juegos de caracteres para mostrar las páginas, juegos que se adaptan a las particularidades de cada idioma.

Caracteres extendidos en HTML
Cualquier caracter, especial o no, puede mostrarse en una página usando su código ASCII, es decir, el número que tiene asignado, encerrado entre &# y ;. Por ejemplo el símbolo @ tiene como código ASCII el 64, así podemos representarlo como:

&#64;
Si usasemos el número 127 obtendremos nuestra tilde ~ . No obstante muchos caracteres especiales tienen sinónimos que nos facilitan su inserción en las páginas web:

Código Resultado
&aacute;, &Aacute;, &eacute;, &Eacute;,... á, Á, é, É, í, Í, ó, Ó, ú y Ú
&ntilde; y &Ntilde; ñ y ñ
&iquest; ¿
&iexcl; ¡
&ordm; º
&ordf; ª
&trade; ™ o ™
&copy; ©
&reg; ®
&nbsp; Espacio en blanco

Caracteres reservados

En el HTML existen cuatro caracteres de control, que se usan para formar etiquetas, establecer parámetros, etc.. Para poder emplearlos sin riesgo deberemos escribir los siguiente códigos:

Código
&lt; <
&gt; >
&amp; &
&quot; "

enlaces web


Enlaces


Las páginas web no son más que un caso particular de documentos de hipertexto, es decir, documentos cuyo contenido no es solo el texto simple que podemos leer sino también el contenido de otras fuentes a las que accedemos desde el documento. En el caso de las páginas web estas otras fuentes pueden estar situadas en cualquier parte de la red, y a ellos se accede mediante los enlaces o links: unos elementos interactivos del documento que aparentemente son solo eso una palabra o un gráfico que habitualmente destacan por su color o su forma. Es prácticamente imposible que una página web no posea uno de estos enlaces.

Los enlaces que nos encontramos en cualquier página pueden ser de dos tipos: internos a la propia página o externos a otra página. La forma de construir unos y otros es muy similar como verás a continuación.

La etiqueta <A>

La etiqueta <A></A> nos sirve para delimitar la zona de la página que constituye el enlace. Lo que esté encerrado en esta etiqueta será mostrado por el navegador de forma resaltada, bien sea por el color si es texto o por un borde si es una imagen (a menos que modifiquemos el formato), y si pulsamos con el cursor del ratón sobre esa zona el navegador se dirigirá al lugar apuntado por ese enlace. El formato completo de esta etiqueta es el que sigue:

<A HREF="dirección de destino" target="destino">Pulsar para saltar</A>

La dirección de destino será la página web especificada mediante una URL, en formato absoluto o relativo. En ambos casos el destino puede incluso ser un elemento concreto dentro de la página. En este caso se ha usado un texto pero igualmente podríamos colocar una imagen.

El atributo target es una manera de decirle al navegador en que ventana debe abrir esa nueva página. Por ahora veremos dos de sus valores posibles:

_blank
Muestra la nueva página en una ventana nueva y sin nombre del navegador.

_self
Muestra la nueva página en el marco donde está declarado el enlace. Este es el destino por defecto de cualqueir enlace dentro de una página
En el apartado dedicado a los frames veremos algo más de este parámetro.

Las URLs

Cualquier elemento conectado a la red internet se identifica por un conjunto de cuatro números entre 0 y 255, algo así como 84.234.12.122, cualquier sitio de internetestá identificado por esta dirección. Pero como quiera que recordar esos números no es nada fácil existen unos servidores de nombre que transforman esas direcciones en nombres más humanos como www.espaciolatino.com. A estas direcciones se les llama Universal Resource Locator, o URL, es la forma de localizar cualquier página en internet. En general tiene el siguiente formato:

protocolo://máquina:[email protected]
donde protocolo puede ser uno de los siguientes:

http
Es el protocolo para la transmisión de documentos HTML, es decir, el que habitualmente usamos para ver las páginas en nuestro navegador.

https
Es similar al anterior pero con la particularidad de que la información viaja codificada mediante técnicas de encriptación.

ftp
Es un protocolo para la transmisión de ficheros (File Transfer Protocol). Permite intercambiar ficheros con sitios en los que se ejecuten servidores ftp. Los navegadores actuales permiten acceder a estos servidores FTP, pero lo más normal es usasr unos programas al efecto denominados clientes de FTP.

mailto
Otro protocolo para la transmisión de datos, pero en este caso a través de servidores de correo.

news
Mediante este protocolo accedemos a los denominados grupos de noticias, listas de distribución de mensajes relativos a temas concretos. Habitualmente se accede a estos servidores mediante el cliente de correo.

telnet
Es un terminal de acceso remoto en modo texto. Es un sistema bastante inseguro por lo que no es habitual en servidores donde la seguridad esté bien pensada.

Lo más normal en nuestras páginas será acceder a elementos de otros páginas y por tanto lo habitual será usar URL del estilo http://servidor.dom/página.htm o similar.

En un enlace podremos usar la URL como hemos escrito más arriba, URL absoluta, pero también podremos usar formatos como /pagina.htm, parece que faltara la primera parte de la dirección ¿verdad? Pues no, en estos casos el navegador completa esa parte con la correspondiente de la página en la que esté el enlace, son las URL relativas. Por ejemplo si miras la URL de esta página verás que es

http://www.espaciolatino.com/tutorhtml/tema6.html

Pues bien si en esta página colocara un enlace en la forma

<A href="tema3.htm">Tema 3</A>

Esta dirección realmente apuntaría a

http://www.espaciolatino.com/tutorhtml/tema3.html

Como último detalle a tener en cuenta es el uso de la / como forma de referirse a la raiz del sitio. Así este enlace

<A href="/index.htm">Portada</A>
estaría apuntando a http://www.espaciolatino.com/index.htm.

Anclas

Como dijimos, es posible acceder a una posición dentro del documento HTML. Para ello lo primero que tenemos que hacer es colocar marcas de destino en el documento al que queremos acceder:

<A NAME="ancla">

A estos elementos se les llama anclas. Su uso es muy simple: en una etiqueta de enlace colocamos el símbolo # seguido del nombre del ancla de esta manera:

<A HREF="#ancla">Ancla en esta página</A>

Al pulsar sobre este enlace se mostrará en la ventana la parte de la página actual que contiene el ancla. Si queremos acceder a un ancla en otra página basta indicarlo al final de su URL. Como en este ekemplo:

<A HREF="enlaces.html#ancla">Ancla en la página enlaces.html</A>

Listas


El lenguaje HTML nos permite crear listas en las páginas web de una manera casi tan simple y efectiva como en un procesador de textos, para ello utiliza las etiquetas de listas, de las que existen varios tipos. Todas ellas se pueden anidar (meter unas dentro de otras) formando árboles más o menos complejos. Todos los tipos siguen el mismo formato:

<tipo_lista>
<LI>Primer elemento
<LI>Segundo elemento
</tipo_lista>


tipo_lista puede ser una de las siguientes: UL, OL, DL.

Listas desordenadas

La etiqueta <UL> significa unordered list, lista desordenada, y se corresponde con las viñetas en los procesadores de texto: son listas donde cada elemento está precedido de un símbolo como un putno o un disco. EL formato es el qeu sigue:

<UL>
<LI>Juan Pedro <LI>Luisa
</UL>



A partir del HTML 3.2 la etiqueta <UL> admite estos parámetros:

COMPACT Indica al navegador que debe representar la lista de la manera más compacta posible.

TYPE="disc", "circle", "square" Indica al navegador el dibujo que precederá a cada elemento de la lista. Para mayor flexibilidad se admite también como parámetro de <LI>.

Listas ordenadas

La etiqueta <OL> responde a Ordered List, lista ordenada, y nos permite presentar listas como esquemas numerados de un solo nivel, o sea, que cada elemento de la lsita lleva un número de orden. Por ejemplo,

<OL>
<LI>Primer elemento
<LI>Segundo elemento
</OL>



El HTML 3.2 admite estos parámetros para la etiqueta <OL> :

COMPACT Indica al navegador que debe representar la lista de la manera más compacta posible.

TYPE="1", "a", "A", "i", "I" Indica al navegador el tipo de numeración que precederá a cada elemento de la lista. Para mayor flexibilidad se admite también como parámetro de <LI>.

START="num" Indica al navegador el número por el que se empezará a contar los elementos de la lista.

VALUE="num" Atributo de <LI>, actúa como START pero a partir de un elemento predeterminado.


Listas de definiciones

Este tipo de lista utiliza las etiquetas <DT>y <DD> en lugar de <LI>. En estas lista cada elemento tiene una entrada de texto indentada respecto a dicho elemento. Es como si tuvieramos una lista de conceptos y sus definiciones (el texto indentado). Para entenderlo lo mejor es verlas en marcha:

<DL>
<DT>HTML<DD>Es un lenguaje de definición de páginas web.
<DT>Java<DD>Es un lenguaje de programación.
</DL>


La etiqueta <DL> sólo admite como parámetro el ya conocido COMPACT, que tiene el mismo comportamiento que con los otros dos tipos de lista anteriores. Un elemento <DT> puede contener varios elementos <DD>.
introduccion al curso

intro

este curso está dedicado a mostrarte la manera de crear un sitio de éxito en la red. Como complemento a este sitio te ofrecemos este pequeño manual con el que podrás conocer los entresijos del lenguaje HTML, el que se usa para crear páginas web.

En este curso pretendemos tan solo que llegues a ser capaz de construir páginas web correctas, válidas para cualquier explorador, tando los de la familia de Netscape como los diferentes Explorers de Microsoft y otros. La idea es por tanto que estas páginas te sirvan como una guia práctica en tu labor de crear buenas páginas web.

Quizás pienses que con los editores gráficos está todo hecho y no es necesario conocer el HTML. En parte llevas razón, si no pretendes pasar del nivel de principiante y tan solo quieres crear páginas impersonales para ti y tus amigos pues no necesitas conocer HTML. Pero si lo que quieres es llegar a crear y publicar verdaderos sitios web de aspecto profesional y dignos de estar en la red, entonces lo mejor es que conozcas a fondo el lenguaje con el que se construyen esos sitios.

que es una pagina web?

Pues eso de entrada podemos preguntarnos qué es una página web. Habrían dos respuestas: para el internauta y para el diseñador.

Para el internauta una página WEB es una pantalla en su monitor que le muestra la información que va buscando y enlaces a otros sitios relacionados.

Para el diseñador una página WEB es un documento construído para mostrar información en la pantalla de un monitor, que contiene además de la información una serie de instrucciones para indicar como se ha de mostrar esa información. Estas instrucciones se escriben siguiendo un lenguaje llamado HTML

Como ves el diseñador define la página web como algo más completo y técnico que el simple internauta. La página web se concreta en un documento con un nombre terminado con la extensión .htm o .html.

Una serie de páginas web interconectas e interrelacionadas de alguna forma (el mismo tema, el mismo objetivo...) forman un sitio web, que habitualmente está almacenado en un servidor.

requisitos

Para seguir el curso los requisitos son mínimos: un ordenador, un navegador y un editor de texto simple es suficiente. Pero te recomendaría, además, instalar un servidor de internet en tu ordenador. No te asustes, no es nada del otro mundo. Tanto si usas Windows como si te mueves en el mundo Linux te recomiendo el servidor Apache (si piensas trabajar con PHP te recomiendo la versión 1.xx, la 2 sigue siendo desaconsejable), es muy simple de instalar y de configurar. Con este servidor corriendo en tu equipo tendrás un sitio llamado localhost al que podrás acceder como si se tratara de un servidor de internet: http://localhost/, pero solo es visible en tu ordenador.

En cuanto al editor de páginas web utiliza un editor tipo texto, o uno gráfico, pero trabajano en modo texto. Recuerda que la idea es conocer el lenguaje HTML, y los editores gráficos esconden el código. Míra estas herramientas que te pueden ser útiles, recuerda que de gratis también hay cosas buenas.

En cuanto al navegador lo mejor es tener uno de cada, de esa manera podrás comprobar que todo lo que hagas funciona en ambos modelos, aunque hoy por hoy el rey es el Explorer de Microsoft.

el HTML

Antes de entrar de lleno en materia un poquito de historia, nunca viene mal conocer el material de trabajo a fondo. El HTML o lenguaje de marcas de hipertexto es un derivado de un lenguaje usado para describir documentos, el SGML. ¿Y esto que significa? Pues muy sencillo: la estructura de las páginas web se describe en la propia página mediante una serie de etiquetas que le dicen al navegador como debe mostrar el documento, o sea, la página web: cuando debe cambiar de párrafo, cuando debe mostrar el texto en negrita o en color, cuando mostrar una imagen, cuando un enlace a otro documento, etc. Y esto se lo dice al navegador mediante unas marcas o etiquetas en el documento. El HTML es el lenguaje que explica qué etiquetas se pueden usar en una página y como se usan.

Como ves todo va mezclado: información y formato, algo que ha comenzado a cambiar con la aparición de los estilos CSS, un interesante intento de separar la información del formato de presentación.

Los inicios: HTML 2.0

Cuando internet salió del ámbito universitario y se convirtió en una herramienta de dominio público la versión de HTML existente era la 2.0, algo limitada pero que cualquier navegador va a ser capaz de interpretar.

HTML 3.0 y 3.2

A medida que la red se extendía, los documentos que circulaban por ella se hicieron más complejos y completos, la versión 2.0 pronto se mostró demasiado limitada para cumplir con su cometido: mostrar las páginas web en los terminales de los usuarios. Así que los exploradores comenzaron a incluir etiquetas extras no contempladas en el estándard. Por entonces el IETF (Intenert Enginierign Task Force) era el encargado de normalizar todo lo relativo a la recien nacida red de redes y elaboró la versión 3.0, versión que pretendía incorporar las nuevas etiquetas y las que estuvieran por llegar.

Este standard no terminó de cumplir lo esperado, además en esas fechas la sección de standarización de HTML de este comité cerraba sus puertas, por lo que un grupo de empresas, entre las que estaban Netscape, Microsoft, IBM y Sun, crearon un nuevo comité para estandarizar internet, era el W3C, organismo que aún hoy dicta los estándares no solo para HTML, sino también para las hojas de estilo CSS y otras herramientas de la red. Su primer trabajo consistió en mejorar la versión 3.0 de HTML, lo que llevó al HTML 3.2, que incluía muchas de las nuevas etiquetas que los principales navegadores de la época, osea, Netscape y Explorer, ya estaban utilizando.

HTML 4.0

El HTML 3.2 era una solución temporal que se aprobó en enero de 1997, momento en el que el W3C comenzaba a eloborar un nuevo estandard con reformas profundas, era la versión 4.0. En julio de 1997 se presenta el borrador de este nuevo estándar que unifica el manejo de los marcos (frames e iframes), las hojas de estilo y los scripts. El 17 de diciembre de 1997 dicho borrador corregido fue finalmente aprobado como HTML 4.01, y es el que aún hoy día viene usándose para la creación de las páginas web.

tu primera pagina

el codigo

Lo mejor para aprender a hacer algo es ... ¡hacerlo!. Así que vamos a la primera página

<HTML>
<HEAD>
<TITLE>Mi primera pagina web
</TITLE>
</HEAD>
<BODY>
<H1 align="center" >Mi Primera pagina web </H1>
<HR>
<P>
Esto tan sencillo es una verdadera página web, aunque le falta el contenido, pero todo llegará.</P>
</BODY>
</HTML>


Si quieres ver como queda esto en el explorador solo tienes que pulsar aquí: http://creatuweb.espaciolatino.com/tutorhtml/ejemplos/mipagina.htm

la explicacion

Si te fijas en la página que ves con el explorador solo se ve parte de lo que has escrito, concretamente todo lo que no está encerrado entre los símbolos < y >. Eso es el contenido de la página, pero ¿y lo que está entre esos paréntesis angulares? pues esas son las etiquetas que le dicen al explorador como mostrar el contenido: en grande, con colores, centrado, el título de la página, etc. Si te fijas cada etiqueta tiene un comienzo y un fin:

<ETIQUETA parámetros> ... </ETIQUETA>

Como ves una apertura y un cierre. Algunaas etiquetas (como <BR> cambio de línea o <HR> linea horizontal) no llevan cierre. Fijaros que lo primero que tenemos es la etiqueta <HTML> cerrda al final del documento con </HTML>, eso quiere decir que estamos ante un HTML:

<HTML> ... </HTML>

Dentro de ese documento vemos una parte llamada cabecera, que la reconocerás porque está limitada con la etiqueta <HEAD> </HEAD>. Él contenido de esta parte no siempre es visible, y si lo es nunca se muestra en la página en si. Contiene por ejemplo el título que se ve en la ventana del explorador, arriba a la izquierda. La cabecera queda por tanto :

<HEAD>
<TITLE>Mi página web</TITLE>
</HEAD>


Puede contener muchas otras cosas, pero eso lo dejamos para más adelante.

El cuerpo del documento

La otra parte es el cuerpo o <BODY> </BODY>, es el contenido de la página web. Tiene una etiqueta con cierre:

<BODY> ... </BODY>

Y ahora el contenido:

<H1 align="center"> Mi primera página web</H1>

Con esto colocaremos el texto en formato <H1> (o cabecera 1) y centrado (align="center", o sea, en tamaño grande y centrado en la página, una forma de resaltar la frase. Ahora separamos esa frase por medio de una línea horizontal:

<HR>

Como ves este es un ejemplo de etiqueta sin cierre. Y por último colocamos un texto escplicativo en un párrafo (<P></P>, o sea, un bloque de texto con un espacio por delante y otro por detrás :

<P>Esto tan sencillo es una verdadera página web, aunque le falta el contenido, pero todo llegará.</P>


Para empezar no está mal, por supuesto existen muchas más etiquetas con misiones diferentes a la de mostrar texto, pero eso lo iremos viendo poquito a poco.

el documento HTML

Estructura del documento

La estructura de un documento HTML se puede resumir así:

tipo de documento
<HTML>
<HEAD>
<TITLE>titulo de la página</TITLE>
cosas que afectan a la página pero no a su contenido
</HEAD>
<BODY parámetros>
contenido de la página
</BODY>
</HTML>


En el tipo de documento deberemos especificar a que estándar del HTML responde nuestra página entre una de las siguientes opciones:

<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML 2.0//EN">

Cumple el estándar HTML 2.0

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">

Cumple el estándar HTML 3.2

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"
"http://w3.org/TR/REC-html40/loose.dtd">


Cumple el estándar HTML 4.0

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"
"http://w3.org/TR/REC-html40/strict.dtd">


Cumple el estándar HTML 4.0 y no contiene además elementos desaconsejables

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Frameset//EN"
"http://w3.org/TR/REC-html40/frameset.dtd">


Es una definición de marcos que cumple el estándar HTML 4.0

El HTML 4.0 considera desaconsejables aquellos elementos que, aún siendo soportados, han sido sustituidos por otros más potentes y, por ello, es posible que sean eliminados del estándar HTML en el futuro.

la cabecera

Suele ser el lugar más indicado para colocar aquellos elementos de la página que no alteren el contenido de la misma, aunque si la forma de presentarlo y su comportamiento. Es por eso que es el lugar más recomendable para colocar los scripts y las hojas de estilo, como veremos en los capítulos correspondientes.

Hay también otro elemento interesante que podremos incluir en nuestras cabeceras. Cuando especificamos una URL relativa en un enlace, en principio es para acceder a una página situada en nuestro mismo servidor. Sin embargo, si especificamos:

<BASE HREF="http://www.misitio.com/">
Ahora todas nuestras URLs relativas se encontrarán dentro del servidor http://www.misitio.com


Meta Name

Además del título de la página, uno de los elementos que se pueden incluir aquí son los META. Entre otras cosas, sirven para indicar propiedades de la página como pueda ser el nombre de su autor. Por ejemplo,

<META NAME="GENERATOR" CONTENT="Mozilla/4.03 (Win95; I) ">

nos indicaría la herramienta con que hemos creado la página (en este caso la versión 4.03 en español para Windows 95 del Composer de Netscape). Como veréis el uso es muy simple, en NAME colocamos el nombre de la etiqueta y en CONTENT colocamos su valor, ambos entre comillas y con el signo igual por delante.
Estas son las propiedades más comunes:

Name Content
AUTHOR Autor de la página.
CLASSIFICATION Palabras que permite clasificar la página dentro de un buscador jerárquico (como Yahoo).
KEYWORDS Palabras clave por las que encontrarán la página en los buscadores. Google no le hace mucho caso.
GENERATOR Herramienta utilizada para hacer la página.
DESCRIPTION Descripción del contenido de la página. Google le hace algún caso.

Meta http-equiv

Son etiquetas usadas también para dar información al navegador y complementan las etiquetas Meta vistas en el apartado anterior. En algunos casos existen etiquetas Meta Name y http-equiv similares. Su uso es similar a las etiquetas Meta Name, por ejemplo:

<META HTTP-EQUIV="expires" CONTENT="Wed, 26 Feb 1997 08:21:57 GMT">

La única diferencia está en que en lugar de NAME usamos HTTP-EUIV, el resto es igual. Cuando el contenido conste de más de varios valores, estos se separan con ; (punto y coma). Veamos algunos tipos:


expires: Fecha desde la que la página debe ser recargada por los navegadores
pragma: El contenido debe ser no-cache y sirve para que el navegador no guarde la página en el ordenador del internauta.
Content-Language: Idioma en el que está escrita la página. Se usan las iniciales como: es_ES: español España, en_US: ingles americano...
Refresh: Indica al navegador el tiempo (en segundos) que debe esperar para recargar la página automáticamente y la página a la que debe ir. Ambos datos se separan con un punto y coma.
Content-Type: Tipo de docMARGINWIDTH y MARGINHEIGHTumento y juego de caracteres usado. Lo habitual es colocar el valor:
text/html; charset=iso-8859-1
Si n o se usa los caracteres especiales (letras acentuadas, ñ) pueden quedar ilegibles .

el cuerpo

El cuerpo es el contenido de la página propiamente dicho, o sea, lo que se ve, en el es donde colocarán prácticamente todos los elementos que vamos a ir viendo por este manual. Los atributos que admite esta etiqueta <BODY>:

BACKGROUND coloca la imagen como fondo de la pagina
BGCOLOR Define el color de fondo de la página.
BGPROPERTIES Cuando es igual a FIXED el gráfico definido como fondo de la página permanecerá inmóvil aunque utilicemos las barras de desplazamiento.
TEXT Color del texto.
LINK Color de un enlace no visitado (por defecto azul).
VLINK Color de un enlace ya visitado (por defecto púrpura).
ALINK Color que toma un enlace mientras lo estamos pulsando (por defecto rojo).
LEFTMARGIN y TOPMARGIN Número de pixels que dejará de margen entre el borde de la ventana y el contenido de la página.
MARGINWIDTH y MARGINHEIGHT Equivalentes a los anteriores, pero éstos funcionan en Netscape.

No resulta recomendable cambiar los colores del texto y enlaces a no ser que exista alguna dificultad al leerlos por haber cambiado el fondo, ya que en muchas ocasiones el usuario ha podido cambiarlos en las opciones de su navegador y estarán ya a su gusto.

texto

Dando formato

Evidentemente en las páginas no todo el contenido es igual y por tanto no todo se ha de mostrar en la misma forma, por eso HTML nos permite modificar el aspecto del texto: podemos darle diferentes formatos, modificando desdel el aspecto de los caracteres (tipo de letra) hasta el color. Podemos formatear desde las letras una por una hasta bloques completos de texto.


Estilos de párrafo


<P> Sirve para delimitar un párrafo. Inserta una línea en blanco antes del texto.

<p ALIGN=x> ... </p> Justificar el texto del párrafo a la izquierda (ALIGN=LEFT), derecha (RIGHT), al centro (CENTER) o a ambos márgenes (JUSTIFY html4 ) /

<CENTER> ... </CENTER> Permite centrar todo el bloque de texto encerrado.

<PRE WIDTH=x> ... </PRE> Representa el texto encerrado en ella con un tipo de letra de paso fijo. El parámetro WIDTH especifica el número máximo de caracteres en una línea.

<BLOCKQUOTE> ... </BLOCKQUOTE> Mete sangrías de párrafo tanto a derecha como a izquierda. Suele usarse como tabulador

Los encabezados

El HTML nos ofrece seis etiquetas distintas para mostrar cabeceras o títulos.

<H1> ... </H1>
<H2> ... </H2>
<H3> ... </H3>
<H4> ... </H4>
<H5> ... </H5>
<H6> ... </H6>

Actúan a nivel de párrafo, es decir, el texto encerrado en <h1></h1> lleva una linea enblanco por delante y por detrás. Habitualmente se utilizan para destacar títulos de los diferentes apartados o secciones de un texto.

Cambiando el tipo de letra

B> ... </B> Pone el texto en negrita. Soy un texto negro como el tizón
<I> ... </I> Representa el texto en cursiva. Estoy ladeado
<U> ... </U> Para subrayar algo. Como soy muy importante estoy subrayado
<S> ... </S> Para tachar.
<TT> ... </TT> Permite representar el texto en un tipo de letra de paso fijo. No soy variable
<SUP> ... </SUP> Letra superíndice. E=mc2
<SUB> ... </SUB> Letra subíndice. ai,j=bi,j+1
<BIG> ... </BIG> Incrementa el tamaño del tipo de letra. Soy GRANDE
<SMALL> ... </SMALL> Disminuye el tamaño del tipo de letra. Creí ver un lindo gatito

Estilos de texto

Son formatos predefinidos aplicables a caracteres individuales (y a grupos por supuesto). Realmente no se usan demasiado salvo que se controlen mediante los estilos CSS.

<CITE> ... </CITE> Cita, por ejemplo de un texto
<CODE> ... </CODE> Código
<STRONG> ... </STRONG> Fuerte, negrita
<EM> ... </EM> Enfasis.
<KBD> ... </KBD> Teclado
<VAR> ... </VAR> Representar variables de un código.
<SAMP> ... </SAMP> Para representar una serie de caracteres literalmente.
<ABBR> ... </ABBR> Abreviaturas

Otros elementos

Estas etiquetas realmente no son formato ni de párrafo ni de texto, pero hay que ponerlas en algún sitio:

<BR> Cambio de línea. Simple salto de linea
<HR> Barra horizontal. --------------------------------------------------------------------------------
<!-- ... --> Comentarios. No se ve el contenido

Caracteres especiales

Si habéis estudiado o leído algo acerca del modo de funcionamiento de los ordenadores y la informática, casi seguro que sabéis que la información que introduces en el ordenador está codificadaes decir, escrita de alguna manera que sea entendible para la máquina. En relación con esto habréis topado con unas siglas algo extrañas código ASCII, que no es más que una forma de codificar los caracteres asignando a cada uno un valor numérico. Sin entrar en más detalles resulta que el código ASCII solo tiene 128 símbolos, pero existe una extensión del código que llega a los 256 símbolos, aunque sólo están normalizados los 128 primeros, los restantes se usan para caracteres extraños como nuestra ñ o la ç o el €, o las letras acentuadas.

Es decir que todo lo que no sean caracteres ingleses quedan codificados con códigos ASCII por encima de 127, como caracteres especiales o extendidos. En base a esto existen muchos juegos de caracteres para mostrar las páginas, juegos que se adaptan a las particularidades de cada idioma.

Caracteres extendidos en HTML
Cualquier caracter, especial o no, puede mostrarse en una página usando su código ASCII, es decir, el número que tiene asignado, encerrado entre &# y ;. Por ejemplo el símbolo @ tiene como código ASCII el 64, así podemos representarlo como:

&#64;
Si usasemos el número 127 obtendremos nuestra tilde ~ . No obstante muchos caracteres especiales tienen sinónimos que nos facilitan su inserción en las páginas web:

Código Resultado
&aacute;, &Aacute;, &eacute;, &Eacute;,... á, Á, é, É, í, Í, ó, Ó, ú y Ú
&ntilde; y &Ntilde; ñ y ñ
&iquest; ¿
&iexcl; ¡
&ordm; º
&ordf; ª
&trade; ™ o ™
&copy; ©
&reg; ®
&nbsp; Espacio en blanco

Caracteres reservados

En el HTML existen cuatro caracteres de control, que se usan para formar etiquetas, establecer parámetros, etc.. Para poder emplearlos sin riesgo deberemos escribir los siguiente códigos:

Código
&lt; <
&gt; >
&amp; &
&quot; "

enlaces web


Enlaces


Las páginas web no son más que un caso particular de documentos de hipertexto, es decir, documentos cuyo contenido no es solo el texto simple que podemos leer sino también el contenido de otras fuentes a las que accedemos desde el documento. En el caso de las páginas web estas otras fuentes pueden estar situadas en cualquier parte de la red, y a ellos se accede mediante los enlaces o links: unos elementos interactivos del documento que aparentemente son solo eso una palabra o un gráfico que habitualmente destacan por su color o su forma. Es prácticamente imposible que una página web no posea uno de estos enlaces.

Los enlaces que nos encontramos en cualquier página pueden ser de dos tipos: internos a la propia página o externos a otra página. La forma de construir unos y otros es muy similar como verás a continuación.

La etiqueta <A>

La etiqueta <A></A> nos sirve para delimitar la zona de la página que constituye el enlace. Lo que esté encerrado en esta etiqueta será mostrado por el navegador de forma resaltada, bien sea por el color si es texto o por un borde si es una imagen (a menos que modifiquemos el formato), y si pulsamos con el cursor del ratón sobre esa zona el navegador se dirigirá al lugar apuntado por ese enlace. El formato completo de esta etiqueta es el que sigue:

<A HREF="dirección de destino" target="destino">Pulsar para saltar</A>

La dirección de destino será la página web especificada mediante una URL, en formato absoluto o relativo. En ambos casos el destino puede incluso ser un elemento concreto dentro de la página. En este caso se ha usado un texto pero igualmente podríamos colocar una imagen.

El atributo target es una manera de decirle al navegador en que ventana debe abrir esa nueva página. Por ahora veremos dos de sus valores posibles:

_blank
Muestra la nueva página en una ventana nueva y sin nombre del navegador.

_self
Muestra la nueva página en el marco donde está declarado el enlace. Este es el destino por defecto de cualqueir enlace dentro de una página
En el apartado dedicado a los frames veremos algo más de este parámetro.

Las URLs

Cualquier elemento conectado a la red internet se identifica por un conjunto de cuatro números entre 0 y 255, algo así como 84.234.12.122, cualquier sitio de internetestá identificado por esta dirección. Pero como quiera que recordar esos números no es nada fácil existen unos servidores de nombre que transforman esas direcciones en nombres más humanos como www.espaciolatino.com. A estas direcciones se les llama Universal Resource Locator, o URL, es la forma de localizar cualquier página en internet. En general tiene el siguiente formato:

protocolo://máquina:[email protected]
donde protocolo puede ser uno de los siguientes:

http
Es el protocolo para la transmisión de documentos HTML, es decir, el que habitualmente usamos para ver las páginas en nuestro navegador.

https
Es similar al anterior pero con la particularidad de que la información viaja codificada mediante técnicas de encriptación.

ftp
Es un protocolo para la transmisión de ficheros (File Transfer Protocol). Permite intercambiar ficheros con sitios en los que se ejecuten servidores ftp. Los navegadores actuales permiten acceder a estos servidores FTP, pero lo más normal es usasr unos programas al efecto denominados clientes de FTP.

mailto
Otro protocolo para la transmisión de datos, pero en este caso a través de servidores de correo.

news
Mediante este protocolo accedemos a los denominados grupos de noticias, listas de distribución de mensajes relativos a temas concretos. Habitualmente se accede a estos servidores mediante el cliente de correo.

telnet
Es un terminal de acceso remoto en modo texto. Es un sistema bastante inseguro por lo que no es habitual en servidores donde la seguridad esté bien pensada.

Lo más normal en nuestras páginas será acceder a elementos de otros páginas y por tanto lo habitual será usar URL del estilo http://servidor.dom/página.htm o similar.

En un enlace podremos usar la URL como hemos escrito más arriba, URL absoluta, pero también podremos usar formatos como /pagina.htm, parece que faltara la primera parte de la dirección ¿verdad? Pues no, en estos casos el navegador completa esa parte con la correspondiente de la página en la que esté el enlace, son las URL relativas. Por ejemplo si miras la URL de esta página verás que es

http://www.espaciolatino.com/tutorhtml/tema6.html

Pues bien si en esta página colocara un enlace en la forma

<A href="tema3.htm">Tema 3</A>

Esta dirección realmente apuntaría a

http://www.espaciolatino.com/tutorhtml/tema3.html

Como último detalle a tener en cuenta es el uso de la / como forma de referirse a la raiz del sitio. Así este enlace

<A href="/index.htm">Portada</A>
estaría apuntando a http://www.espaciolatino.com/index.htm.

Anclas

Como dijimos, es posible acceder a una posición dentro del documento HTML. Para ello lo primero que tenemos que hacer es colocar marcas de destino en el documento al que queremos acceder:

<A NAME="ancla">

A estos elementos se les llama anclas. Su uso es muy simple: en una etiqueta de enlace colocamos el símbolo # seguido del nombre del ancla de esta manera:

<A HREF="#ancla">Ancla en esta página</A>

Al pulsar sobre este enlace se mostrará en la ventana la parte de la página actual que contiene el ancla. Si queremos acceder a un ancla en otra página basta indicarlo al final de su URL. Como en este ekemplo:

<A HREF="enlaces.html#ancla">Ancla en la página enlaces.html</A>

Listas


El lenguaje HTML

12 comentarios - Como crear tu propia pagina web [SuperMegapost](parte 1)

Faluu
Un muy buen trabajo amigo. Te felicito.
joseths10
esta bueno pero ponle imagenes
InsidetheZero +3
COPYPASTE DE WIKIPEDIA..
ademas pusite dos veces lo de HTLM
FAIL
gonzaloyanezl +1
mmm.... que sueño..... ponele algo de imagenes y lo leo
chodra
queres crear una web???desde cero???pasate!!!
http://www.taringa.net/posts/ebooks-tutoriales/9039875/Crear-una-web-facil-y-gratis_SuperHiperTeraGigaMegaPost_.html
y por esta comu tambien
http://www.taringa.net/comunidades/publicatuspostsaca
tonygaciass
si ya la tienen creada denla de alta en buscadores http://submituweb.hol.es/