PAGINA WEB

PAGINA WEB

Antes de comenzar a aprender HTML, debemos saber con qué herramientas vamos a trabajar. Primero hay que entender que HTML es un lenguaje interpretado por los navegadores; eso significa que si escribimos correctamente los comandos en el código fuente de un archivo de formato .html o .htm, el contenido de este archivo será visualizado en cualquier navegador Web (por ejemplo Internet Explorer, Mozilla Firefox, Chrome,Safari o Opera).

Si queremos ver cómo está hecha una página Web, podemos hacerlo tocando sobre cualquier punto de ésta con el botón derecho de nuestro mouse, lo que abrirá un menú desplegable con varias opciones, en nuestro caso seleccionaremos Ver Código Fuente; y así se abrirá otra ventana con el código fuente de la página Web que estamos viendo. Quizá en un principio, si no sabemos HTML no entenderemos nada de lo que nos muestra la ventana del código fuente, pero con el tiempo a medida que aprendamos y practiquemos este lenguaje comenzaremos a comprender.

Ya sabemos cómo ver el código fuente de una página Web, ahora debemos saber con qué herramienta podremos hacer nuestras propias páginas. Hay muchos editores, como Dreamweaver por ejemplo, pero en mi opinión la mejor manera de aprender es utilizando una aplicación que todos tenemos en nuestras computadoras, el Bloc de notas. En realidad con esta simple herramienta podemos realizar sitios Web desde los más pequeños y simples, hasta portales de redes sociales de los más complejos, ya que con el Bloc de notas podemos programar en distintos lenguajes.

Bien, ahora es momento de comenzar con HTML. Primero hay que aclarar que su nombre proviene de las siglas de Hypertext Markup Language, que en inglés significa Lenguaje de Marcado de Hipertexto. 

El hipertexto no es más que el texto remarcado que si es seleccionado nos redirige a otra página o documento Web; en otras palabras son los hipervínculos o links. Ya que al desarrollarse este lenguaje la característica principal que presentaba era la posibilidad de pasar de un documento a otro de manea sencilla mediante el uso de estos textos remarcados en azul, siendo muy práctico lo que finalmente lo convirtió en el sistema de exploración Web estándar que hasta el día de hoy utilizamos en Internet.

Por lo tanto ya tenemos las herramientas para crear y visualizar nuestras páginas Web.

Los archivos de las páginas Web tienen que ser de tipo .htm o .html, los dos tipos son lo mismo, por lo tanto no habrán diferencias en los documento que vayamos a crear, está en nosotros elegir cualquiera de los dos tipos.

Para guardar un archivo de página Web, vamos al menú Archivo de nuestro Bloc de notas, seleccionamosGuardar como, elegimos un nombre, luego en tipo de archivo cambiamos de Documentos de texto a Todos los archivos; esto último es muy importante, ya que si no seleccionamos el tipo de Todos los archivos, todo lo que hayamos escrito en el código fuente se guardará como archivo de tipo .txt; y nosotros queremos guardarlo como archivo .htm o .html.

Ahora pasaremos a los más importante, los comandos HTML que nos permiten hacer páginas Web.

ELEMENTOS Y ETIQUETAS DE HTML

Cada cosa que queremos mostrar en una página Web es un elemento, o sea que un elemento puede ser un párrafo, un título, una imagen, una lista, un hipervínculo, etc.

Cada elemento está definido por etiquetas y contenido. Las etiquetas son los comandos HTML que especifican lo que queremos mostrar y el contenido puede ser un texto, la dirección de una imagen, la dirección de un hipervínculo, etc.

En HTML las etiquetas deben ser abiertas y cerradas, o sea que se necesita una etiqueta de apertura que indica dónde comienza el elemento y una etiqueta de cierre que indica dónde termina el elemento.

La estructura de definición de elementos HTML es la siguiente:

<nombre-de-etiqueta-de-elemento>Contenido</nombre-de-etiqueta-de-elemento>

Por ejemplo para escribir un párrafo debemos escribir el siguiente código fuente:

<p>Este es un párrafo de ejemplo</p>

Las etiquetas HTML se forman con signos de menor y mayor los cuales rodean el nombre del comando HTML. Por ejemplo <p> es la etiqueta de párrafo. Las etiquetas de cierre utilizan una barra antes del nombre del comando; de esta manera en el caso del párrafo, la etiqueta de cierre es </p>.

Las etiquetas de apertura y cierre deben rodear al contenido del elemento, o sea que en el caso anterior el contenido viene a ser el texto, el cual debe estar rodeado por las etiquetas de apertura y cierre, <p> </p>.

Hay casos de elementos con contenido vacío, esto significa que no requieren etiqueta de apertura y cierre, éstos simplemente se cierran en la primera y única etiqueta; un ejemplo de este tipo de elementos son los saltos de línea:

<br />

El elemento anterior realiza un salto de línea al renglón inmediatamente inferior. El cierre del mismo se realiza con una barra al final de la etiqueta como se muestra en el ejemplo anterior.

Todas las páginas HTML requieren siempre de la presencia de ciertos elementos obligatorios, estos son:

<html>, <head>, <title> y <body>.

El elemento <html> define dónde comienza el documento o página HTML y dónde finaliza.

Entre las dos etiquetas de apertura y cierre <html> y</html> debemos poner el elemento <body> (que significa cuerpo); este elemento es donde se pondrá todo el contenido visual, o sea todo lo que se va a poder ver en la página; el contenido visual debe estar encerrado por una etiqueta de apertura <body> y una de cierre </body>; quedando así:

<html> <body> Aquí deben ir todos los elementos visuales de la página, o sea párrafos, imágenes, hipervínculos, etc. </body> </html>

Otro elemento necesario es <head>, que significa cabecera; dentro de este elemento se agregan todos los elementos no visuales de la página, o sea todo lo que no se ve en el cuerpo principal del explorador Web; por ejemplo información para servidores, para motores de búsqueda, etc. De eso hablaremos más adelante.

<html> <head> Aquí deben ir todos los elementos no visuales de la página, como información para los motores de búsqueda entre otras cosas. </head> <body> Aquí deben ir todos los elementos visuales de la página, o sea párrafos, imágenes, hipervínculos, etc. </body> </html>

Otro elemento necesario es el del título de página, el cual aparece en la barra de título de la parte de arriba del explorador o en los más modernos en la pestaña de la página activa. Por ejemplo el título de esta página esCurso de HTML - Primera Parte. El título de una página se define con el elemento <title> el cual debe ir dentro del elemento de cabecera <head>. El texto del título debe ir rodeado de una etiqueta de apertura <title> y otra de cierre </title>.

De esta manera el código fuente de una página Web simple, con lo mínimo indispensable, quedaría así:

<html> <head> <title>Este es el título de la página Web</title> </head> <body> <p>Este es el texto de un párrafo que se verá en el cuerpo principal del explorador Web</p> </body> </html>

Recuerden que el elemento <p> es el que define párrafos.

Pueden probarlo copiando y pegando el texto del código fuente de arriba en el Bloc de notas y guardando el archivo con el nombre de ejemplo1.html

El código fuente anterior debe hacer que la página Web creada se vea como en la siguiente imagen:

Una cosa que hay que recordar siempre es de cerrar los elementos, ya que a pesar que algunas veces pueden verse algunos de los elementos en ciertos navegadores aunque nos olvidemos de cerrarlos; no hay que confiarse; siempre hay que cerrarlos ya que muchos elementos no serán visualizados correctamente.

Otro consejo; las etiquetas de los elementos pueden escribirse en mayúscula o en minúscula; pero, se recomienda escribirlas en minúscula ya que en versiones modernas de HTML, como XHTML (ya se tratará más adelante el tema de las versiones de HTML), es obligatorio que las etiquetas estén escritas en minúscula; por lo tanto para tener compatibilidad en todos los navegadores del futuro es mejor que éstas sean escritas con letras minúsculas.

Las etiquetas HTML pueden tener también atributos, los cuales proveen información adicional acerca de los elementos que definimos. Los atributos siempre se escriben en la etiqueta de apertura, o sea la primera, de la siguiente manera:

<nombre-de-etiqueta atributo="valor">

Un ejemplo es la etiqueta <a> que se utiliza para crear hipervínculos:

<a href="www.youbioit.com">Link a Youbioit.com</a>

En este caso a es el nombre de la etiqueta del elemento utilizado para crear hipervínculos y href el atributo que provee información acerca de la dirección a la que nos enviará el link. Más adelante se describirá mejor el elemento de hipervínculos <a>, ya que en este momento simplemente lo utilizamos para explicar los atributos.

El valor del atributo siempre debe ser escrito entre comillas. Pueden utilizarse tanto comillas dobles " como comillas simples '; pero es recomendable utilizar las dobles. Las comillas simples se utilizan en aquellos raros casos en los que el valor incluye comillas dobles, por lo tanto para diferenciarlas se utilizan comillas simples, por ejemplo:

name='Tienda "La neuquina" - Indumentarias de todo tipo'

Si este no es ese el caso, lo recomendable es utilizar comillas dobles en este formato:

atributo="valor del atributo"

Como sucede con el nombre de las etiquetas, es recomendable que los nombres de atributos estén escritos en letras minúsculas.

Otra cosa acerca de la sintaxis de los atributos en HTML es que hay que escribir el nombre del atributo, el signo= y el valor entre comillas siempre pegados.

Sintaxis Correcta:

atributo="valor del atributo"

Sintaxis Incorrecta:

atributo  =  "valor del atributo"

Sintaxis Incorrecta:

atributo  ="valor del atributo"