Html para principiantes

A partir de aquí y en sucesivas entregas, os presentamos un curso de HTML, desde nivel básico hasta un nivel avanzado el cual os permitirá conocer este lenguaje a fondo, su utilización, y su función en la “Red de redes”.

Muy bien, por partes.

HTML, es un lenguaje de programación, usado parea la creación de páginas web. Si no se busca demasiadas pretensiones en una página web, se puede crear una página web completa, sólo con la utilización de este lenguaje. En este manual os mostraremos las etiquetas de HTML exclusivamente, de forma que al final del manual podréis crear vuestra propia página web utilizando HTML de forma estricta.

Hyper Text Marks Languaje, es el desarrollo de este palabra.

Es un lenguaje de etiquetas, lo que supone que toda etiqueta de la sintaxis está dentro de los signos < >. Todas las instrucciones irán colocadas entre este tipo de signos.

Una características de este lenguaje es que no da errores, simplemente si las instrucciones están mal colocadas, lo que obtendremos será una mala disposición de elementos, aunque no sea esta la disposición que nosotros buscamos.

Mucha gente está familiarizada con este lenguaje de programación, ya que es la base de la programación de las páginas web.

El HTML además es un lenguaje con el cual se puede programar de forma muy desordenada, es decir mezclando la apertura y el cierre de las etiquetas, y el navegador lo ejecutará igual. Si no has programado nunca, te recomiendo que seas lo más ordenado posible a la hora de colocar estas etiquetas, ya que lo que comiences a hacer en un principio, será lo que hagas posteriormente, y si deseas pasar a otros lenguajes de programación, el orden será una de las principales características para que puedas programar en dicho lenguaje. Ten en cuenta que los malos vicios son fáciles de adquirir pero muy difícil dejarlos.

En este leguaje de etiquetas es capaz de imbuir otro tipos de lenguaje como ASP, PHP, JSP… lenguajes denominados de “servidor” con los cuales se pueden efectuar conexiones a bases de datos u otros lenguajes como JavaScript con el cual se pueden efectuar otras funciones que en este manual no os explicaremos. Eso lo dejaremos para otra ocasión.

En este lenguaje existen muchas etiquetas, con sus correspondientes funciones. No os las explicaremos todas, porque para eso ya están publicado una gran cantidad de manuales al uso, y algunos de ellos, muy buenos, así como otros cientos de recursos que se pueden encontrar en la Web.

Os mostraremos una serie de etiquetas, que bajo mi punto de vista son las más importantes, y con las cuales una persona primeriza debería tener bastante para crear su primera página web. No obstante el resto de las etiquetas os la dejo para que vayáis investigando poco a poco, según vuestra impaciencia y vuestra investigación os vayan llevando a niveles mayores.

Sobre la creación de páginas web existe una serie de creencias totalmente falsas. Para hacer una página web lo único que se necesita es un editor de texto, como por ejemplo el TexEdit de Mac OS X o el Block de Notas de Windows. No hace falta ningún programa especial, ni nada por el estilo. Los editores tipo Dreamweaver o GoLive, lo que hacen son facilitar la creación de páginas web, con sus pros y sus contras, ya que en algunos casos lo que generan es lo que se denomina “código basura”, es decir código fuente que no tienen función aparente, que el navegador intenta ejecutar, pero que no interpreta nada, ya que por ejemplo, simplemente están colocadas las etiquetas sin ningún tipo de argumento dentro de ellas. Esto en un principio no es muy importante, pero con el tiempo y la experiencia, observarás que la rapidez de carga de una página es fundamental en el éxito de la misma.

Mi recomendación es que dejes esos programas a un lado, y aprendas a programar con algún editor de textos, si quieres algo un poco más sofisticado puedes utilizar programas como BBEdit, el cual proporcionará ayudas visuales a las etiquetas y te hará la vida más sencilla. Pero los programas antes mencionados, los utilizaría cuando sepamos que estamos haciendo plenamente, ya que así podremos controlar y “limpiar” todo el código basura que este programa nos colocará cuando creemos una página web.

Por supuesto, además de un editor de texto también necesitarás un navegador. Para interpretar HTML, cualquier nos va a ser válido. Para ver los resultados de lo que hagamos, lo único que tienes que hacer es ir abriendo el archivos que vas creando, desde el menú archivo de tu navegador, y te mostrará lo que has hecho, y si lo has hecho bien o no.

El HTML, tiene 3 tipos de instrucciones:

1.- Simples: por ejemplo <BR> Es un salto de línea

2.- Dobles: <B> el argumento que sea </B> El resultado será que el texto estará en negrita.

3.- Múltiples: El ejemplo más sencillo de este tipo de órdenes son las tablas:

Lo que le hemos dicho al navegador es que dibuje una tabla, y luego cree una fila y una columna.

Por ahora no te preocupes de los ejemplos, un poco más adelante veremos las etiquetas una a una. Las etiquetas usadas para el ejemplo, es sólo para que puedas apreciar la diferencia que hay entre un tipo de instrucciones y otras.

Empezando a crear

Una página web siempre está compuesta por una etiqueta que inicia y otra que acabe.

En el caso de un página web es:

<HTML> Etiqueta de inicio

</HTML> Etiqueta de fin

Dentro de estas etiquetas introduciremos todo lo que queramos en la página.

Toda página web se divide en dos partes fundamentales. La primera se denomina encabezado o Head y la segunda parte es el cuerpo o Body.

El HEAD o Encabezado, es la primera parte de la página web, en la cual se podrán colocar datos como el tipo de caracteres que se han usado para la creación de esa página, el idioma en el que está desarrollada, los datos relacionados con buscadores, el título de la página web, y otros datos similares. Es la parte menos vistosa de una página web.

El BODY o Cuerpo de la página es donde se alberga todo el contenido de la página Web, botones, tablas, texto y demás elementos. A fin de cuentas cuando navegas por la red, lo que ves son todos los elementos que se han dispuesto en el BODY de esa página, y podrás observar muy pocos elemento des Encabezado.

En esta característica existe una excepción, y son los denominados marcos, ya que las páginas web que contienen todos los marcos no tiene Body. El tema relacionado con los marcos lo veremos más adelante.

Así que una página web tiene la siguiente estructura:

En una página web todos los caracteres tienen una codificación, por ejemplo los espacios en blanco, las tildes de las palabras. Pensemos que nuestra página web, no la vamos a visitar nosotros solos, sino que deben poder acceder a ella cualquier visitante que llegue, sea cual sea su procedencia.

Aquí tenemos el primer problema, y es que nuestras teclados, generalmente están configurados en español, o con caracteres latinos. Esto supone que podremos escribir tildes en las palabras de forma directa, mientras que una persona alemana o inglesa no podrá.Si escribimos las tildes como las colocamos en nuestro procesador de texto, lo que verán otras personas son caracteres extraños como cuadrados a la hora de visitar nuestra página. Y para evitar esos problemas lo que se hace es codificarlos, para que su visionado sea igual, independientemente de la configuración del lenguaje de nuestro sistema operativo.

Para escribir un espacio en blanco, su codificación debería ser:   Esto nos creará un espacio en blanco.

El & es una especie de código de control, el cual le indica a nuestro navegador que lo que viene después de él, es un signo especial, como por ejemplo ©, el cual se consigue escribiendo &copy;

Las tildes las obtendremos de la siguiente manera:

– &aacute; = á

– &eacute; = é

– &iacute; = í

– &oacute; = ó

– &uacute; = ú

– &ntilde; = ñ

Esto llevado a la práctica, queda de la siguiente manera:

Ni&ntilde;a = Niña

L&iacute;nea= Línea

Etiqueta HR

Esta etiqueta lo que hace es colocar una línea horizontal en el documento, sin necesidad de crear una imagen para tal efecto, lo que produce además una menor cantidad de información en la página y por lo tanto una ejecución más rápida del código.

Se le puede establecer la anchura, la alineación y el tamaño.

<HR WIDTH = “300” ALIGN = “CENTER” SIZE = “10”>

Esta etiqueta nos creará una línea horizontal de 300 píxels de longitud, alineada al centro, con una anchura de 10 píxels.

Las medidas en píxels pueden ser cambiadas por porcentajes.

En Windows, la etiqueta <HR> lo que crea es una línea horizontal, con un efecto de 3D. Si queremos que este efecto no aparezca, lo que haremos será añadir la instrucción NOSHADE

<HR NOSHADE>

La semana que viene… decorando texto.