Introducción a HTML

Las primeras cosas que debes saber sobre HTML: historia, objetivos y demás conocimientos donde sentar las bases del manual.

HTML es el lenguaje con el que se escribe el contenido de las páginas web. Las páginas web pueden ser vistas por el usuario mediante un tipo de aplicación llamada cliente web o más comúnmente "navegador". Podemos decir por lo tanto que el HTML es el lenguaje usado por para especificar el contenido que los navegadores deben representar a la hora de mostrar una página web.

Este lenguaje nos permite aglutinar textos, imágenes, enlaces... y combinarlos a nuestro gusto. La ventaja del HTML a la hora de representar el contenido en un navegador, con respecto a otros formatos físicos como libros o revistas, es justamente la posibilidad de colocar referencias a otras páginas, por medio de los enlaces hipertexto.

Un poco de historia

El lenguaje HTML se creó en 1991. Tiene una historia realmente corta pero para su poca vida ha sufrido importantes cambios. Su padre es Tim Berners-Lee que lo diseñó con objetivos divulgativos. Inicialmente no se pensó que la web llegaría a ser un área de ocio con carácter multimedia, de modo que, nació sin dar respuesta a todos los posibles usos que se le iba a dar y a todos los colectivos de gente que lo utilizarían en un futuro. Sin embargo, pese a esta deficiente planificación, si que se han ido incorporando modificaciones con el tiempo, agregando nuevas características para cubrir las nuevas necesidades.

Como hemos dicho, los programas que leen y presentan las páginas web a los usuarios se llaman navegadores. Éstos son los responsables de interpretar el HTML y "pintar" una página tal como ellos entiendan que deben hacer. Sin embargo, esas reglas de representación no son subjetivas de cada fabricante del navegador, sino que existe una organización llamada W3C que se encarga de definir el estándar que todos deben seguir a la hora de escribir e interpretar el HTML. Estos estándares del HTML se conocen como "Especificaciones", las cuales han ido apareciendo en el tiempo. El HTML5 es el último estándar en la actualidad.

Históricamente los navegadores, además de la propia comunidad de usuarios, han sido los mayores impulsores de los cambios ocurridos en el lenguaje. Una vez detectada la necesidad es el W3C el que crea el estándar y marca una dirección que todos deben seguir.

Los navegadores y sus problemas

El conflicto generado por los navegadores es debido a su diversidad. Existen multitud de navegadores o clientes web presentes en el mercado los cuales muchas veces no son capaces de interpretar un mismo código de una manera unificada. Esto obliga al desarrollador a, una vez creada su página, comprobar que esta puede ser leída satisfactoriamente por todos los navegadores, o al menos, los más utilizados. Cuando surgen problemas de interpretación, queda de parte del desarrollador resolver el problema tirando de técnicas o conocimientos que él disponga.

Afortunadamente, en la actualidad las diferencias de interpretación de los navegadores con respecto a un mismo código HTML son mínimos, pero en el pasado los desarrolladores tenían que emplear mucho tiempo en remar contracorriente para solucionarlos. Sin embargo, quedan todavía muchos usuarios que navegan con sistemas anticuados, ya sea por falta de interés para actualizarse, conocimientos, o por disponer ordenadores muy antiguos.

Pero no todo ha sido malo por parte de los navegadores. Ellos también son los responsables de introducir nuevas etiquetas en el uso común del día a día, que se han ido incorporando al estándar HTML en sucesivas versiones. Aunque antes de estandarizarse esas etiquetas era común que cada navegador crease su etiqueta propietaria para resolver la misma necesidad, lo que obligaba a los desarrolladores a repetir código o incluso a hacer versiones de páginas diferentes para navegadores. Con todo esto no queremos asustar a nadie y volvemos a repetir que las diferencias en la actualidad son mínimas, pero sí deseamos que quede clara la necesidad de la estandarización creada por el W3C, responsable de marcar una pauta que actualmente cumplen todos los navegadores modernos de manera bastante fiel.

Los lenguajes de la web

HTML no está solo como único lenguaje para crear la web, aunque en un principio sí que era así. Su evolución tan anárquica ha supuesto toda una seria de inconvenientes y deficiencias que han debido ser superados con la introducción de otras tecnologías accesorias capaces de organizar, optimizar y automatizar el funcionamiento de las webs. Ejemplos que pueden sonaros son las CSS, o JavaScript. Veremos más adelante en qué consisten algunas de ellas.

Lo que es importante para el desarrollador es conocer el enfoque de cada lenguaje, para saber cuál es la manera correcta de utilizarlo y cómo se complementan los unos a los otros. No es necesario que se sea experto en todos ellos, pero sí saber qué cosas se deberían hacer con cada cual, para no cometer errores que deriven en una mala interpretación por parte de los navegadores. Así mismo tenemos que pensar que no todas las personas van a acceder a una web a través de un ordenador, sino también de un teléfono o de navegadores especializados para personas con discapacidades, por ejemplo para ciegos. Es por ello que es importante escribir correctamente los lenguajes, respetando los estándares y así cada navegador podrá hacer su mejor papel para representar la pagina lo más correctamente posible.

En este manual queremos incidir mucho en este detalle, la correcta utilización del HTML: escribir el contenido, para que nuestro trabajo sea lo más adecuado y de elevada calidad.

Los editores de HTML

Además del navegador necesario para ver los resultados de nuestro trabajo, necesitamos evidentemente otra herramienta capaz de crear la página en si. Un archivo HTML (una página) no es más que un texto plano al que le colocamos extensión ".html". Es por ello que para programar en HTML necesitamos un editor de texto.

Nota: En 2001 cuando escribimos este manual por primera vez recomendábamos probar a comenzar con el Bloc de notas que viene con Windows. El motivo es que es un programa tan simple que nos permite centrarnos simplemente en el HTML, eliminando todo tipo de ayudas. Hoy preferimos recomendar otras alternativas, aunque hemos dejado esta nota por motivos nostálgicos.

Es recomendable usar un editor de textos sencillo, de texto plano. Queremos remarcar que nunca se debe usar el tipo de editor de textos que se usan para escribir documentos, cartas, trabajos para el colegio, como Wordpad o Microsoft Word, pues colocan su propio código especial al guardar los documentos y HTML es únicamente texto plano, con lo que podremos tener problemas. Otro tipo de editor que tampoco recomendamos es DreamWeaver, un editor que te escribe el HTML a base de tocar botones, negritas, listas, crear tabla, etc. Para aprender es extremadamente recomendable que se use un programa que te permita escribir el código en crudo, así no tendrás problemas en el futuro.

El tipo de editores que recomendamos son aquellos específicos para la edición de código, los cuales están pensados para facilitar los procesos de la programación y de la escritura de código plano como el del lenguaje HTML. Existen infinidad de editores de código interesantes, que nos aportan más o menos facilidades y que nos permiten aumentar nuestra productividad. No obstante, es aconsejable en un principio utilizar una herramienta lo más sencilla posible para poder prestar la máxima atención a nuestro código y familiarizarnos lo antes posible con él. Siempre tendremos tiempo más delante de pasarnos a editores más versátiles con la consiguiente ganancia de tiempo.

No es posible decir a nadie el editor que debe de usar, porque cada uno tendrá sus preferencias. No obstante, en 2016 y para las personas que están comenzando nosotros recomendamos:

Igual alguna persona que comience puede pensar que tienen muchas opciones, pero realmente podemos comenzar con lo básico, crear nuevos archivos, editar el código, guardarlos en nuestro disco duro... y punto. Recomendamos estos editores porque están disponibles para todas las plataformas, Windows, Mac y Linux y porque son gratuitos para cualquier uso.

A continuación tienes algunas referencias para ampliar la información, aunque con estas recomendaciones tienes para empezar. Para una referencia más claro todo el tema de editores y los tipos que existen, visita los artículos:

  • Editores de HTML.
  • Si buscas en DesarrolloWeb, en el buscador por "editores", encontrarás muchas otras alternativas.

HTML es para escribir el contenido

Volveremos sobre este punto, pues es de vital importancia para entender y usar bien HTML. Graba e tu memoria que HTML es para especificar el contenido de las páginas web y no el aspecto que van a tener.

Cuando nos referimos al contenido queremos indicar párrafos, imágenes, listas, tablas y todo aquello que forma parte de "el qué". Nunca debemos usar HTML para definir cómo se debe de ver un contenido, si el texto debe tener color rojo, con una fuente mayor, o si se debe alinear a la derecha. Para especificar el aspecto que debe tener una web se usa un lenguaje complementario, llamado CSS.

Por tanto, HTML sirve para decir qué contenido debe tener una página y CSS sirve para decir cómo se debe representar tal contenido, con qué estilo. Es fácil saltarse esta regla, porque en HTML existen diversas etiquetas (y atributos, de los que no hemos hablado todavía) que realmente están pensados para definir la presentación. Es una herencia de versiones pasadas del HTML y aunque en este manual se nos pueda saltar alguna vez alguna excepción, no debemos caer en la trampa de usar el HTML para definir cómo debe de representarse un elemento en la página.

Conclusión

Como has visto, una página es un archivo donde está contenido el código HTML en forma de texto. Estos archivos tienen extensión .html o .htm (es indiferente cuál utilizar). De modo que cuando programemos en HTML lo haremos con un editor de textos y guardaremos nuestros trabajos con extensión .html, por ejemplo mipágina.html

Consejo: Utiliza siempre la misma extensión en tus archivos HTML. Eso evitará que te confundas al escribir los nombres de tus archivos unas veces con .htm y otras con .html. Cabe remarcar que hoy todo el mundo usa la extensión ".html" y no ".htm"

Autor

Rubén Alvarez

Rubén es doctor en química y programador aficionado con experiencia en PHP.

Compartir

Comentarios

Miguel Angel Alvarez

04/2/2003
El bloc de notas se accede desde el botón de inicio, que está en la barra de tareas. Está en el grupo de programas llamado "Accesorios".

Inicio > Programas > Accesorios > Bloc de notas

davis

02/6/2004
faltó ; al momento de abrir el block de notas hay guardarlo una vez de haber terminado de trabajar con la estensioon de html para que se puedea aguardar en html.
ejemplo:

trabajo1.html

Alba

21/12/2005
llevo tres años con internet y nunca me habia enterado de las paginas para hecer tu pagina web.
¿son todas de pago?
si hicierais publicidad y alguna las pusierais gratutitas a lo mejor mas gente tendria su pagina web

Luis

18/7/2006
hola q tal mi pregunta es q hago despues que pongo en el bloc de notas? para ver q si esta bien lo que estoy haciendo como hago para visualiar asi como salen en los ejemlos

giovannipumas

11/7/2009
introduccion al html
para luis, puedes verlo en tu explorador de internet favorito, tan solo con la extension html puedes visualisar los cambios, o con un editor WYSIYG que te lo muestra al instante.

Apenas me acabo de suscribir porque quiero aprender a hacer mi página web

Sam

19/2/2010
Mas!!
Bueno pues la informacion me parace muy buena pero me gustaria saber mas sobre las versiones de html ya que segun hay desde la 1.0 hasta la 5.0 o algo asi la verdad me gustaria saber como se fue desarrollando cada una se los agradeceria.

gif

25/7/2010
Resumen introduccion html
en este articulo el principal objetivo es recordarnos algunos comceptos que se dieron en el anterior curso comenzar una web desde 0 y tambien darnos un abbre bocas de lo que se va a tratar como :
java scrip
csc
php
entre otros lenguajes y tambien algunos comceptos como lo son :
editor de texto plano
editor html

y darnos breves indicaciones de que es mejor utilizar un editor de texto como lo es block de notas y no word , o word pad ya que estos editores de texto lo que hacen es meter dentro nuestro lenguaje el de ellos mismos ocasionando problemas

sergio

13/6/2012
HTML
MUY INTERESANTE EL ARTICULO DE HTML

dikana laura gonzalez de leon

02/4/2013
examen
como se ejecuta una pagina de html.

Javi

21/12/2013
editor de texto plano
Hola,
En primer lugar, gracias por compartir todo esto con nosotros, me estoy divirtiendo mucho con lo que leo y veo por aqui.
Tambien me guagaria decir que en casa tengo un mac con mavericks me guagaria saber que editor de texto plano puedo utilizar, tambien aprovecho cualquier ocasion para leeros por el movil, ¿hay algun editor de texto plano para android?

Gracias