Curso HTML. Introducción

2008-11-17T18:04:00.000-08:00

El World Wide Web (WWW) es un sistema que contiene una cantidad de información casi infinita. Esta información debe estar estructurada, con la finalidad de encontrar los temas de interés que desea uno localizar. La unidad básica que es almacenada en WWW, son páginas Web. Estas páginas se caracterizan por contener texto, imágenes, animaciones e incluso sonido y video.

La característica principal de las páginas Web es que son hipertexto, esto significa que no son documentos aislados y que se encuentran ligados a través de links (enlaces de hipertexto), mediante esto, los cibernautas pueden presionar sobre el texto (link) y mandar llamar otra página Web y así empezar a "navegar" en tu sitio.

Actualmente se considera que el WWW ya no es un sistema de hipertexto, sino de hipermedia, ya que ahora las páginas web contienen imágenes, videos, gráficos, botenes.

Figura 1.1. Al principio el texto predominaba en el WWW, actualmente podemos observar imágenes en los sitios, al igual que animaciones.

Características del lenguaje HTML

La Web es distribuida. La información es seccionada en distintas páginas enlazadas.
La Web es hipertexto y es sencilla de navegar.
Son compatibles con todo tipo de ordenadores (PC's, Macintosh, etc.)
Es dinámica.

Todo esto es debido al lenguaje de desarrollo de páginas Web, denominado HTML (HiperText Markup Language) cuyas siglas significan "lenguaje hipertexto de marcas". Este lenguaje es capaz de convertir un archivo de texto en una página Web con texto, tipos y tamaños de letra, animaciones, formularios, etc.

Qué se necesita para crear una página web

Una característica importante del lenguaje HTML es que el desarrollador no requiere ningún software especial para realizar una página Web.

Para confeccionar una página web lo único que se necesita es un editor de texto. Existen editores especializados en crear ficheros HTML

Podemos utilizar Notepad, WordPad o el que queramos. Es preferible utilizar Notepad o un editor especializado para generar archivos HTML.

Figura 1.2. Solo se requiere un editor de notas para crear HTML.

Una vez hemos escrito el código deberemos guardar el archivo (con formato de texto) con la extensión .html

Los siguientes son nombres válidos de archivos que contengan código HTML: index.html, index.htm,principal.html, PRINCIPAL.htm, etc...

NOTA: Si el editor o procesador de textos usado para crear la página obliga a usar la extensión .txt al guardar el archivo en modo texto, deberemos guardarlo con esta extensión, por ejemplo como index.txt, y posteriormente cambiar el nombre del archivo desde fuera del programa a index.html o index.htm .

Para ello usaremos el comando rename.

ATENCIÓN: El World Wide Web es un sistema que diferencia las mayúsculas de las minúsculas. Es un error común llamar a un archivo index.html y luego referirse a él como Index.html.

Últimamente han aparecido nuevas alternativas que facilitan la programación de páginas Web. Son los editores HTML. Podemos dividir estos editores en dos grupos:

Asistentes: ayudan a crear el código HTML e incluyen plantillas de código prefabricadas.
Conversores: son programas con otra función que la de la programación Web pero que permiten convertir a HTML
Editores WYSIWYG (What You See Is What You Get, lo que ves es lo que obtienes): estos editores permiten crear páginas web sin escribir código HTML como si se tratase de un programa de dibujo por ordenador.

Figura 1.3. Ejemplo de un editor WYSIWYG.

Razones para usar HTML

Todos estos editores HTML tipos pueden ser de gran ayuda y tienen sus ventajas e inconvenientes, pero la experiencia demuestra que conocer el lenguaje HTML ofrece bastantes ventajas:

Seremos capaces de aprovechar todas las características de este lenguaje, incluso las más nuevas.
Aunque se use inicialmente un editor WYSWYG tendremos los conocimientos suficientes para modificar posteriormente el código que éste ha creado. Así se pueden corregir errores o incluir etiquetas no soportadas por el editor.
No dependeremos de la disponibilidad de una herramienta concreta para poder crear páginas web. Con un simple editor de textos será suficiente.

Las bases de HTML

Una vez repasadas unas nociones básicas de HTML y de la programación de páginas Web en general entraremos de lleno en la programación con este lenguaje. Es un lenguaje muy fácil de aprender y que nos permitirá crear páginas con mayor facilidad aún.

Las órdenes de este lenguaje estarán formadas por unos comandos llamados etiquetas que pueden tener o bien la siguiente estructura:

O bien de esta manera:

  TEXTO

La primera estructura está formada por una única instrucción y la segunda por dos: una que marca el inicio de la etiqueta y otra que marca el final, con texto entre ambas.

El nombre de la etiqueta va delimitado por los símbolos menor que (<) y mayor que (>), todas las instrucciones de HTML deben ir encerradas entre estos dos símbolos.

Pero las etiquetas no se limitan a indicar ordenes tan sencillas, estas órdenes tienen en ocasiones parámetros. Por ejemplo la etiqueta

tal y como lo hemos hecho anteriormente daría lugar a la línea que vemos en la figura 1.5, es decir le dice al navegador que dibuje una línea horizontal en la pantalla. Esta línea tiene un grosor predeterminado y un ancho variable en función del tamaño de la ventana del navegador.

Figura 1.5. Uso básico de una etiqueta HTML sin ningún tipo de parámetros. Ejemplo usando la etiqueta

para crear una línea horizontal.

Sin embargo hay muchas formas de pintar una línea y sería deseable poder elegir detalles tales como la anchura y el grosor que va a tener dicha línea. Para especificar este tipo de detalles se crearon los atributos de las etiquetas. Este nuevo elemento se introduce en una etiqueta de la siguiente manera:

Es decir, en primer lugar ponemos el nombre de la etiqueta, después el nombre del atributo seguido por un signo igual y posteriormente el valor que queramos darle a ese atributo encerrado entre comillas una etiqueta puede tener tantos atributos como se deseen y en ocasiones son necesarios para que la etiqueta tenga algún significado.

En nuestro ejemplo de la línea horizontal existe un atributo llamado SIZE, que significa tamaño en inglés, que permite controlar el grosor de la línea que será dibujada en pantalla. Veamos un ejemplo, en la figura 1.6 podemos ver la línea horizontal con diferentes grosores.

Figura 1.6. Las etiquetas tienen atributos para cambiar aspectos del efecto que producen. En este ejemplo vemos como se puede cambiar el grosor de una línea con el atributo SIZE.

El valor que toma el atributo size determina el número de puntos de pantalla o pixeles que debe ocupar, en grosor, la línea.

En la figura 1.6 vemos que el valor numérico que le damos al atributo size no va entrecomillado, por ejemplo en

. En HTML no es necesario entrecomillar los valores de los atributos cuando están formados únicamente por números [0-9], letras [a-z, A-Z], guiones y puntos. En todo caso es muy recomendable incluir las comillas siempre. De esta forma no tenemos que preocuparnos de cuando ponerlas y cuando no y a la vez cumplimos el nuevo estándar XHTML.

Sammyboy's Page

Curso HTML. Introducción

Características del lenguaje HTML

Qué se necesita para crear una página web

Razones para usar HTML

Las bases de HTML