Inicio » Guías » Internet » Lenguaje HTML. Creación de páginas Web

Guia de internet

Suscríbete al boletín

Recibirás información detallada de nuestras ofertas, noticias, etc.

Suscríbete al boletín

Introducción

En la lección 3 ya se vieron las posibilidades que ofrece la Web en cuanto a la navegación a través de las páginas que albergan los distintos servidores. La otra cara de la Web es la posibilidad de introducir información en la Red, de tal forma que cualquier usuario pueda tener acceso a la misma. Para ello habrá que crear una página Web, lo cual es relativamente sencillo.

En esta lección se pretenden mostrar los elementos más básicos del lenguaje HTML con los cuales se pueden  crear documentos de hipertexto simples. No se hará una descripción exhaustiva del lenguaje, pero se podrán crear de forma sencilla páginas Web que incluyan los elementos mínimos necesarios: imágenes e hiperenlaces.

Arriba

El lenguaje HTML

Para crear documentos de hipertexto que puedan visualizarse en la Web se ha desarrollado el lenguaje HTML (Hyper Text Markup Language). Este lenguaje permite dar indicaciones precisas al navegador de cómo debe presentarse el documento en pantalla o al imprimirse.

Arriba

Documentos HTML

Un documento HTML es un fichero de texto ASCII en el que se incluye, además del texto que se quiere mostrar en pantalla, ciertas directivas o marcas (tags) que indiquen, entre otras cosas, el formato del documento y la información relativa a los hiperenlaces.

Los tags se escriben entre los signos '<' y '>' y generalmente se introducen por parejas, indicando el comienzo y el final de una acción. En este caso el tag final es similar al inicial pero precedido por una barra '/'. Por ejemplo el tag <center> delante de un texto y el tag </center> detrás del mismo indican que el texto se mostrará centrado con respecto a la página.

La mayoría de los tags precisan de uno de cierre, que delimite el alcance de la acción, si bien se presentan excepciones.

El texto del documento junto a las directivas HTML se puede escribir con cualquier editor ASCII y el nombre del fichero que contenga dicho documento tendrá como extensión los caracteres html o htm.

Arriba

Ejemplo de documento HTML

Se va a mostrar un sencillo ejemplo para mostrar la utilización del lenguaje HTML. La primera imagen muestra el aspecto de dicho documento visto desde el navegador y la segunda el contenido del documento html correspondiente. En esta última imagen se observa que el documento se ha realizado con el Bloc de notas, que es un sencillo procesador de textos, pero puede ser creado con cualquier otro.

internet037.gif (10913 bytes)

internet038.gif (9030 bytes)

Las características del documento que muestran las imágenes anteriores son:

  • Los tags <HTML> y </HTML> indican que el texto que hay entre ellos está escrito en lenguaje HTML.
  • Los tags <HEAD> y </HEAD> indican que el texto que hay entre ellos no se va a visualizar cuando el documento se muestre en el navegador. Se utilizan para introducir textos que muestran información sobre el documento pero que no se quieren visualizar.
  • Los tags <BODY> y </BODY> indican el comienzo y el final del documento que se va a visualizar en el navegador.
  • Para indicar los títulos y subtítulos del documento se utilizan los tags <Hn> y </Hn>. En este caso n es un número entero del 1 al 16 que determina el nivel de título y subtítulo, por tanto, el tamaño de la letra.
    En el ejemplo, a la primera línea se le ha asignado un título de primer orden (H1) y a la siguiente de segundo orden (H2), el resto es texto normal.
  • Para que los textos o imágenes se muestren centrados con respecto a la página hay que utilizar los tags <CENTER> y </CENTER>, al comienzo y al final de los mismos respectivamente.
    En el ejemplo, los únicos párrafos que no aparecen centrados son los dos últimos, el resto del documento se encuentra entre los tags antes mencionados.
  • Para insertar imágenes en el documento se utiliza el tags <IMG SRC=...>. Tras el signo = hay que indicar, entre comillas, el lugar en el que el navegador encontrará la imagen, la cual debe estar en formato GIF o JPG.
    La imagen del documento se ha introducido con <IMG SRC="imagen1.gif">. Al hacer esta indicación el navegador busca la imagen en el mismo servidor y directorio en el cual se encuentra el documento, si la imagen se encontrase en otra ubicación habría que anteponer al nombre de la misma la ruta correspondiente al directorio en el cual se encuentra.
  • Para indicar un hiperenlace se utilizan los tags <A HREF=...> y </A>. Tras el signo = hay que indicar, entre comillas, la dirección URL del objeto al cual se quiere acceder al hacer clic sobre el enlace.
    En el ejemplo se ha insertado dos hiperenlaces <A HREF="web2.html"> y <A HREF="http://www.fer.es">. En el primer caso únicamente se indica el nombre del documento, ya que se encuentra en el mismo directorio que el documento original, mientras que en el segundo caso se indica la dirección completa, ya que el documento se encuentra en otro directorio.
  • Los tags <P> y </P> indican el comienzo y el final de un párrafo, respectivamente.
  • El tag <BR> indica un salto de línea.
    En el ejemplo se observa como el último párrafo contiene dos líneas de texto, al final de la primera se ha insertado el tags <BR> para que la segunda comience en una nueva línea.
  • Los tags <I> y </I> indican que el texto que hay entre ellos se va a mostrar en cursiva.
Arriba

Otros tags e instrucciones html

A continuación se indican otros elementos básicos que se utilizan para la creación de páginas Web.

  • Los tags <FONT size=n> y </FONT> permiten modificar el tamaño de los caracteres. En este caso n es un número entero comprendido entre 1 y 7, si no se emplean estos tags el valor por defecto que tiene el texto normal es 3. También se pueden anteponer al número n los signos + y -, en este caso se indica que el tamaño del texto aumentará o disminuirá respectivamente un valor n respecto al tamaño normal (3).
    Por ejemplo: si se indica el tags <FONT size=6> el texto tomará un tamaño de 6 unidades, si se indica <FONT size=-1> el texto tomará un tamaño de 2 unidades (3-1=2) y si se indica <FONT size=+3> el texto tomará un tamaño de 6 unidades (3+3=6).
  • Los tags <B> y </B> indican que el texto que hay entre ellos se va a mostrar en negrita.
  • Los tags <U> y </U> indican que el texto que hay entre ellos se va a mostrar subrayado.
  • Los tags <UL> y </UL> indican el comienzo y el final, respectivamente, de una lista no numerada. Cada uno de los elementos de dicha lista debe estar precedido por el tag <LI>.
  • Los tags <OL> y </OL> indican el comienzo y el final, respectivamente, de una lista numerada. Igual que ocurría con los tags anteriores, antes de cada uno de los elementos de la lista hay que introducir el tag <LI>.
  • El tag <HR> dibuja una línea horizontal.

Las siguientes imágenes muestran el aspecto y el contenido de un documento HTML en el cual se han empleado los tags indicando anteriormente.

internet039.gif (3677 bytes)

internet040.gif (4904 bytes)

Arriba

Creación de tablas

Algunos de los tags que se emplean para la creación de tablas son los siguientes:

  • Los tags <TABLE> y </TABLE> indican el comienzo y el final de una tabla. A continuación habrá que indicar los tags que establezcan las características de la misma.
  • Los tags <TR> y </TR> indican el comienzo y el final de una fila.
  • Los tags <TH> y </TH> indican que la celda es una celda de encabezamiento, por lo que el texto que haya entre ellos se mostrará en negrita y centrado.
  • Los tags <TD> y </TD> se utilizan para indicar los datos que contienen las distintas celdas de la tabla.

Las siguientes imágenes muestran el aspecto y el contenido de un documento HTML en el cual se ha creado una tabla.

internet041.gif (3467 bytes)

internet042.gif (4502 bytes)

Se observa como no se muestran las líneas correspondientes a la tabla, en este caso se puede emplear la tabla para alinear los distintos elementos del documento. Si se quieren mostrar las líneas correspondientes a la tabla habrá que introducir el tag <TABLE BORDER=1> en lugar de <TABLE>, en este caso el aspecto del documento es el que se muestra en la siguiente imagen.

internet043.gif (4186 bytes)

 

Arriba

Editores de documentos HTML

Como se ha podido comprobar a lo largo de la lección, no se precisa ningún programa especial para crear documentos HTML, ya que estos están escritos con texto ASCII, por lo que cualquier editor de texto permite su creación. Sin embargo, el tener que introducir los tags manualmente hace que la creación de los documentos sea lenta y obliga a conocer de una forma más o menos exhaustiva el lenguaje HTML.

Es por ello por lo que se han desarrollado gran cantidad de editores que permiten crear de una forma más cómoda y rápida documentos HTML. Existen dos tipos de editores:

  • Editores en los que se trabaja sobre el código HTML: presentan menús y botones que permiten introducir los tags de forma sencilla. Son muy útiles para los usuarios que tienen cierto conocimiento sobre el lenguaje HTML y desean tener un control minucioso del proceso de creación del documento.
  • Editores en los que no se trabaja sobre el código HTML de forma directa: se trabaja sobre una visualización del documento. Se utiliza como un procesador de texto en el cual se está visualizando constantemente el aspecto final del documento. Estos editores presentan menús y botones que permiten realizar las operaciones habituales para insertar y dar formato a los distintos elementos del documento. Con este tipo de editores no se precisa tener un gran conocimiento del lenguaje HTML, pero hay que tener en cuenta que no se tiene control de cómo se construye el código, por lo que en algunas ocasiones el resultado no es del todo el que se precisa.

Las suites Netscape e Internet Explorer presentan editores de documentos HTML, Netscape Composer y FrontPage Express respectivamente. Ambos editores corresponden al segundo grupo, en ellos se visualiza en todo momento el aspecto final del documento, por lo que de una forma sencilla cualquier usuario con unos conocimientos mínimos podrá crear sus propias páginas Web.

También se pueden crear páginas Web con Word 97, ya que presenta una opción que convierte a formato HTML cualquier documento que se haya creado con anterioridad.

Arriba

El editor FrontPage Express

El uso del editor FrontPage Express es relativamente sencillo y muy similar al de un procesador de textos del estilo de Word. La siguiente imagen muestra el aspecto de la ventana del programa.

internet044.gif (9254 bytes)

Para crear y dar formato al documento se utilizan las opciones de los menús o los botones de las barras de herramientas. No se va a entrar a explicar con detalle el programa pero se indican a continuación algunas de las opciones más empleadas para crear documentos sencillos.

Los pasos a seguir para crear una página Web son:

  1. Abrir el programa Inicio/Programas/Internet Explorer/FrontPage Express.
  2. Para establecer títulos o subtítulos seleccionar el texto, desplegar la lista Estilos de la barra de herramientas Formato (a su izquierda) y seleccionar el estilo que se quiere asignar (Encabezado 1, Encabezado 2, etc. correspondiente a los títulos H1,H2 ...).
    internet045.gif (1134 bytes)
  3. El texto y los objetos se pueden alinear a izquierda, derecha o centrado seleccionándolos y haciendo clic sobre el botón correspondiente de la barra de herramientas Formato.
    internet046.gif (971 bytes)
  4. Para cambiar de línea dentro del mismo párrafo pulsar la tecla Enter mientras se tiene pulsada la tecla Mayúsculas.
  5. Para cambiar de párrafo pulsar la tecla Enter.
  6. Para definir el formato del texto (negrita, subrayado, etc.) seleccionar el texto y hacer clic sobre el botón correspondiente de la barra de herramientas Formato o seleccionar la opción Formato/Fuente.
    internet048.gif (1120 bytes)
  7. Para crear listas hacer clic sobre el botón correspondiente de la barra de herramientas formato.
    internet047.gif (931 bytes)
  8. Para insertar una imagen seleccionar la opción Insertar/Imagen y seguir las indicaciones de los cuadros de diálogo que se presentan.
  9. Para insertar un hiperenlace seleccionar el texto o imagen y a continuación la opción Insertar/Hipervínculo, en el cuadro de diálogo que se presenta indicar la dirección URL correspondiente.
  10. Para insertar una tabla seleccionar la opción Insertar/Tabla e indicar los datos que se solicitan en el cuadro de diálogo que se presenta.
  11. Una vez creado el documento seleccionar la opción Archivo/Guardar y en el cuadro de diálogo que se presenta hacer clic sobre el botón Como archivo, al hacerlo el editor establecerá por defecto la extensión html para el documento.
Arriba

Publicación y promoción

Para que la página Web creada esté disponible para el resto de usuarios de la red es preciso "publicarla", esto es, ubicarla en un servidor Web de Internet. Normalmente, entre los servicios que nos proporciona nuestro proveedor de acceso a Internet se encuentra la de aportar un espacio donde ubicar nuestras páginas Web. También se presentan en la red servidores que permiten de una forma gratuita la publicación de nuestras páginas en los mismos. 

En función del proveedor la publicación de la página Web se hará a través de FTP o bien directamente desde una página Web. En ambos casos el proveedor nos indicará:

  • La dirección URL de la página a publicar.
  • Un nombre de usuario y contraseña con los cuales acceder a las páginas publicadas para poder realizar sobre ellas las modificaciones necesarias.

Por ejemplo en la dirección http://webs.demasiado.com te proporcionan gratuitamente hasta 10 Mb para albergar tu página web, además de proporcionarte información y ayuda en la creación de la misma. Simplemente tendrás que inscribirte y seguir las indicaciones que te van dando.

Una vez publicada la página Web, para poder visualizarla será necesario conocer su dirección URL, lo que limita el acceso a aquellas personas que conocen dicha dirección. Si queremos que nuestra página sea vista por el mayor número de personas posible tendremos que promocionar la misma lo cual conseguimos dándola de alta en distintos buscadores.

En la misma dirección indicada anteriormente encontrarás un enlace que te ayuda a registrar tu página en los distintos buscadores.

Arriba

Dominios

Al publicar nuestra página en un servidor, este nos proporciona una ubicación, un subdirectorio en el cual introducir nuestros archivos. Esto hace que la dirección URL de la página publicada sea una dirección muy larga ya que comenzará con el nombre de Dominio del servidor al cual sigue la ruta del subdirectorio y a esta el nombre de la página publicada. Por ejemplo si nuestra página Web estuviese publicada en el servidor de la FER nuestro nombre de dominio pudiera tener el siguiente aspecto:

http://www.fer.es/usuarios/adr/index.html

Esto implica que el nombre de dominio de nuestra página sea difícil de recordar, lo cual no es interesante. Para combatir este problema se han creado los llamados "dominios virtuales" los cuales permiten reconocer por un nombre simple la ubicación URL de una página dentro de un Servidor. Siguiendo con el ejemplo anterior el nombre de dominio podría ser:

http://www.adr.es

El registro de nombres de dominios es responsabilidad de Internic (http://www.internic.net) que se encarga del registro en USA de dominios y direcciones IP, en cooperación con la NSF (National Science Foundation) y la empresa Network Solutions Inc., que es quien tiene delegado el registro.

En Europa existe RIPE (http://www.ripe.net), que se encarga de la coordinación del registro regional Europeo de dominios y direcciones IP. En cada país existe un registro delegado de Internet. Concretamente, en España es ES-NIC (Centro de Comunicaciones CSIC Red Iris, http://www.nic.es)

El contratar un dominio virtual se podrá hacer contactando directamente con la autoridad competente o bien a través de una empresa que realice las gestiones necesarias. Por ejemplo, dos direcciones en las cuales poder contratar un dominio virtual son: http://www.servi-net.com/ http://www.nicspain.com/inicio.html http://www.nominalia.com.

Arriba