Estado: Incompleta | Nivel: Principiante |
Después de mucho tiempo queriendo hacerlo, voy a empezar creando una guia para principiantes de HTML. Esta es la primera parte de una serie de artículos que iré publicando acerca del universalmente conocido HTML.
En Internet hay multitud de guias y tutoriales de creación de sitios web, donde te explican que es el HTML y seguramente, antes de llegar aquí muchos de vosotros ya habréis hojeado muchas de estas. Mi idea es que esta sea una guía eminentemente práctica para la gente que quiere empezar a crear páginas web, desde lo más básico.
Posteriormente, completaré esta guia con otra de referencia, acerca de las marcas más utilizadas del lenguaje. Y como para aprender lo mejor es practicar vamos a dejar un poco de lado los aspectos más técnicos y vamos a ir a lo práctico.
Dado que esta es una guia para principiantes, intentaré explicar los conceptos usando solo los términos técnicos que sean imprescindibles. Cuando estos vayan apareciendo iré explicando que significan.
Intentaré que sea un guia breve, concisa y clara. Para los que quieran ampliar este tema dejaré enlaces a otras webs, con temas para profundizar. Y por supuesto si quieres que amplíe algún concepto, no dudéis en contactar conmigo o dejarme algún comentario.
INTRODUCCIÓN
HTML los las siglas en inglés de Hypertext Markup Languaje. En cristiano se traduce como Lenguaje de Marcas de Hipertexto. Es el lenguaje básico de Internet y con el se crean las páginas web.
Básicamente se compone de una serie de marcas que sirven para formatear el texto de un sitio web (a partir de ahora utilizaré indistintamente el término "sitio web" para referirme a una página web, aunque en técnicamente sitio web es un termino más amplio). Estas marcas le dicen al navegador como tiene que formatear el texto de la página para que se vea en pantalla, es decir si va centrado, si es en negrita, cursiva etc...
En un principio servía solamente para eso, para formatear téxto. Posteriormente HTML se ha ido modificando y adaptándose a las nuevas necesidades de la red, pudiendo incluir en nuestras páginas webs, formularios para interactuar con el usuario, fotos, vídeos etc... Así mismo también ha cambiado la forma de escribir y diseñar las páginas web, con la aparición de las CSS (hojas de estilo en cascada), XML, DHTML (HTML dinámico). Pero esto último no es objeto de este artículo.
Aquí nos restringiremos al simple y puro HTML, es decir, como formatear texto de manera que podamos verlo en un navegador.
COSAS QUE NECESITAMOS
Hay una serie de cosas que necesitamos en nuestro ordenador para poder crear y ver las páginas web, a parte de lo obvio, como un ordenador, una conexión a Internet etc... xD Aunque realmente esto último solo es necesario para que otras personas vean nuestra página.
¿Como?. Pues lo que oís. Para crear una página web solo necesitamos un editor normal de textos, como el notepad de windows o el gvim de Linux. Lo que veis es lo que hay. Un archivo HTML es simplemente un archivo de texto plano, no hace falta un compilador ni nada por el estilo.
Y para ver la página que hemos creado solamente necesitamos un navegador. Y en este sentido hay muchos y para todos los S.O (Sistemas Operativos) del mercado. Los más usados son Internet Explorer (para windows, ya en su versión 7), Mozilla Firefox (en versiones para Windows y para Linux) y Opera (muy usado en Linux). Hay muchos más, pero yo me quedo con Firefox con diferencia.
La diferencia entre unos y otros es la forma de interpretar las marcas HTML y sobre todo las posiciones de los elementos en pantalla, pero dado que el tutorial que nos ocupa no es muy avanzado, nos vale con cualquiera.
Bien, ya tenemos el editor y el navegador. Ahora vamos con el proceso para crear una página web, que es bastante sencillo: vamos al editor, creamos un archivo nuevo, metemos las marcas HTML y nuestro texto y le ponemos extensión .html. Lo guardamos y lo abrimos con nuestro navegador. ¿Fácil verdad?, hasta yo podría hacerlo xD.
LAS ETIQUETAS HTML
Para empezar es bueno saber que los documentos HTML estan compuestos, como hemos comentado antes, por etiquetas o 'tags'. La estructura básica de una etiqueta es:
<nombre_de_etiqueta parámetros> texto que esta afectado por al etiqueta </nombre_de_etiqueta>
La primera parte de la etiqueta la que va entre <> se llama etiqueta de apertura. La última parte la que va </> se llama etiqueta de cierre. Lo que va entre estas dos etiquetas, puede ser texto solo, o también pueden ser otras etiquetas.
A tener en cuenta sobre las etiquetas en general:
- Todas las etiquetas, junto con sus parámetros van encerradas entre los símbolos de mayor (<) y menor (>).
- La mayoria de las etiquetas llevan una etiqueta de apertura y otra de cierre que indica el final. La etiqueta de cierre siempre lleva el mismo nombre que la etiqueta de apertura a la que va asociada, pero lleva una barra invertida (/) delante de su nombre.
- Las etiquetas se pueden anidar, de manera que dentro de una etiqueta pueden ir otras, además de texto.
- La mayoria de las etiquetas, llevan parámetros. Estos modifican el comportamiento por defecto de las etiquetas. Muchos de estos parámetros son comunes a varias etiquetas.
- Los parametros se especifican, salvo en casos excepcionales, como : nombre = valor. El valor, puede ser numérico o una cadena de caracteres. En caso de que sea una cadena debe ir encerrada entre comillas, que pueden ser dobles o simples, esto es indiferente.
- Los nombres de las etiquetas se pueden escribir en mayúsculas o en minúsculas, a gusto del consumidor. HTML no distinque entre mayusculas y minusculos.
Ejemplo: La etiqueta <p> sirve para designar un párrafo. Luego todo lo que vaya entre la etiqueta de apertura <p> y la de cierre </p> será un mismo párrafo. Podemos escribir:
<p> Hola esto es un párrafo </p>
Existe un parámetro en la etiqueta <p> que sirve para designar la alineación de la etiqueta. Este parámetro es 'align'. Asi podemos escribir:
<p align="center"> Esto es un párrafo centrado </p>
ESTRUCTURA DE UN DOCUMENTO HTML
Un vez que sabemos lo que es una etiqueta y como se usa, podemos comenzar un poco a ver la esctructura general de un documento HTML.
Los documentos HTML llevan siempre al comienzo la etiqueta <HTML>. Siempre existe y se especifica al inicio de cada documento HTML. Sirve para decirle al navegador que se lo que va a leer se trata de un documento HTML.
Seguidamente viene la cabecera, que se especifica mediante la etiqueta <HEAD>. Dentro de la cabecera podemos esquecificar muchas cosas que son inherentes al documento y dan al navegador información acerca del mismo. La más importante sin duda es la etiqueta <TITLE> que especifica el título de la página web. El texto que especifiquemos entre las etiquetas de apertura y cierre de <TITLE> se verá en la barra superior del navegador web. Otras etiquetas a destacar que estan en la cabecera, son las etiquetas <META> de las que hablaremos más adelante.
Seguidamente de la cabecera viene la etiqueta <BODY>. Esta etiqueta especifica el inicio de lo que se llama el cuerpo del documento, es decir lo que se va a ver en pantalla. Esta etiqueta tiene una serie de parámetros para especificar el tipo de letra, color de fondo etc...
Ejemplo: Vamos a crear la estructura general de un documento HTML. Esta estructura es común en todas las páginas que hagas a si que conviene que te la sepas bien. De todas maneras cuando ya hayas escrito unas cuantas páginas web te acoradrás de ella en seguida:
<HTML>
<HEAD>
<TITLE> Mi primera página HTML </TITLE>
</HEAD>
<BODY>
Contenido de mi página web.
</BODY>
</HTML>
Y hasta aqui esta introducción. Deciros que HTML no tiene nada más de complejo. Solamente saber que es una etiqueta, su escructura y como podemos utilizarlas para formatear nuestros textos y hacer la web. Todo lo demás consiste en saber que etiquetas tiene HTML y para que sirven.
A partir de ahora me dedicaré a explicar etiquetas en concreto que es de los que realmente se compone. Explicare para que sirven y sus parámetros más importantes, como usarlas de manera correcta y ejemplos concretos.
Que sepáis que HTML tiene mucho de diseño (de hay el llamado Diseño Web). Las etiquetas y su estructura, son las que son y de nada vale aprendérserselas de memoria porque siempre hay guías de referencia a las que podemos acudir. Lo que si que hay que saber es más o menos para que sirve cada una de ellas y ese será el objetivo de las próximas entregas de este curso.
Que una página web quede vistosa, sea atractiva y todo lo demás depende de la creatividad de cada uno. Esto entra en otro campo muy distinto, que son las guias de estilo. En ellas podemos encontrar como hacer una web vistosa, con colorines que no inviten a cerrar el navegador cuando entremos en la web, como poner los menús y los elementos de la página etc...
Un saludo y hasta la próxima entrega.
