Jose J. Fernández Programador. Desarrollador web y SEO en León

Curso de HTML: introducción

Jose J. Fernández

Curso HTML

1. Qué es y para qué sirve HTML

HTML es un lenguaje de marcado utilizado para la creación de páginas web.

Con lenguaje de marcado nos referimos a que no es un lenguaje de programación, sino que se trata de una serie de etiquetas con las que se marca texto y que le dan a éste formato y estructura. En entregas posteriores hablaremos largo y tendido de las etiquetas en HTML, pues una parte importante del asunto es conocer las distintas etiquetas que hay disponibles y cuál es la función de cada una de ellas.

Utilizamos HTML para darle a una página web su estructura y un formato básico, mientras que luego recurriremos a otros elementos o lenguajes como CSS para modificar el diseño visual y la presentación en pantalla de la página, y PHP para añadirle funcionalidad a la página, como registro de usuarios e inicio de sesión. Normalmente se separa entre tecnologías “front end” y “back end”, que podríamos entender como el escaparate y la trastienda, la carrocería y el motor… Por mencionar algunas analogías.

En el front end o parte frontal de nuestra web entraría HTML junto a otros dos: CSS y JavaScript. De CSS ya hemos hablado, mientras que de JavaScript simplemente comentar que nos permite dar cierto dinamismo a las páginas, como por ejemplo menús desplegables. En el back end o parte interna de la web entrarían los lenguajes de programación como PHP o Ruby, junto con las bases de datos.

Abordaremos muchos de estos temas en cursos posteriores. Para dedicarse profesionalmente a desarrollo web es imprescindible conocer y dominar la mayoría de ellos, pero por el momento vamos a centrarnos única y exclusivamente en HTML.

2. Dónde escribir el HTML: el editor de texto

El código HTML se debe escribir en ficheros de texto mediante un editor de texto plano. No sirven editores con formato, como el Word o cualquier otro que venga incluído en un software ofimático. Para HTML debes utilizar un editor de texto plano, como por ejemplo el bloc de notas de Windows.

De todos modos, te recomiendo que utilices un editor de texto que disponga de resaltado de sintaxis. El resaltado de sintaxis es una característica de algunos editores de texto que les permite reconocer el código y colorearlo de una manera que nos ayuda a visualizarlo y entenderlo mucho más rápidamente.

En este caso es mejor recurrir a una imagen. Mira cómo se ve el texto sin resaltado de sintaxis:

Visualización de código HTML en Notepad++ sin resaltado de sintaxis

Siendo un mazacote de color uniforme es realmente difícil entender ese código. Pero por suerte se inventó hace mucho el resaltado de sintaxis, con el cual el código se ve de la siguiente manera:

Visualización de código HTML en Notepad++ con resaltado de sintaxis

Mejor, ¿verdad? El resaltado de sintaxis estructura visualmente el código de forma que podemos reconocer casi al instante lo que nos interesa, y se hace mucho más fácil leer y escribirlo gracias a esta característica.

Si utilizas Windows, tienes a tu disposición un estupendo editor de texto llamado Notepad++, que es el que utilizo yo y es el que ves en las capturas de pantalla. Es un muy buen editor, y te recomiendo que lo descargues e instales si planeas seguir con el curso. No te preocupes, es libre y gratuito. No hay que pagar nada y es completamente legal. Para mi es el mejor editor de texto de Windows.

Como escribimos en español (con tildes y eñes), deberás realizar una configuración sobre el editor. Encuentra el siguiente menú y pulsa sobre “Convertir a UTF-8 sin BOM”, como se muestra en la imagen:

Configuración de Notepad++ para HTML

Debes hacer esto cada vez que crees un documento nuevo, o bien configurar Notepad++ para que él mismo haga esto sin que tú se lo tengas que decir. Pulsa sobre el menú Configuración > Preferencias > Archivo nuevo, y ahí dentro marca la casilla de “UTF-8 sin BOM” y también la de “Aplicar a los archivos ANSI abiertos”. Pulsa sobre cerrar y estarás listo para continuar:

Configurar Notepad++ para UTF-8

Si no realizas este pequeño ajuste, las letras que tengan tildes o las eñes que hayas escrito en tu código, aparecerán como caracteres extraños cuando visualices la página web en el navegador. Con esta configuración, todos los caracteres españoles se verán correctamente.

Cuando estés listo para guardar tu página web y hayas escrito el código que quieras, desde tu editor tienes que guardar el documento, y añadirle la extensión .html (sólamente pon eso al final del nombre de archivo, por ejemplo miweb.html). De este modo pasará a ser reconocido por el sistema como una página web y se abrirá automáticamente con el programa adecuado cuando hagamos doble click sobre el archivo.

3. Dónde ver el HTML: el navegador web

Hemos hablado de dónde se escribe el HTML, pero no de dónde lo podemos ver: utilizaremos el navegador web. Normalmente, al guardar el fichero con extensión .html ya se nos abrirá con el navegador al hacer doble click, pero si no fuera así podemos utilizar el menú “Abrir con…” que aparece cuando hacemos click derecho sobre el archivo, y desde ahí seleccionar el navegador que tengamos instalado.

El navegador nos permite ver el resultado final de la página web que estemos creando, pero hay que tener varios puntos en cuenta.

  • No todos los navegadores muestran por igual la página. En un principio trabajaremos con código muy sencillo y ni siquiera debería haber diferencias, pero conforme tus creaciones en HTML (y CSS) vayan ganando en complejidad, es posible que notes diferencias entre los navegadores. Esto es perfectamente normal y no debes preocuparte por ahora.
  • Es conveniente que instales varios navegadores, si planeas dedicarte profesionalmente al desarrollo web. Si no es el caso, nos vale con el navegador que estés utilizando ahora mismo.
  • El navegador no nos indica si el HTML que hemos escrito está bien. Para esto veremos varias herramientas más adelante conforme avancemos en el curso. Por ahora quédate con la copla de que el navegador mira el código pero no te dice nada sobre éste, esté bien o no.

4. Tipos de documento HTML: HTML 5

A la hora de escribir HTML debemos ceñirnos a una versión del estándar HTML. Esto quiere decir que hay una manera de hacer las cosas ya marcada, y una serie de reglas y pautas que debemos seguir.

¿Y qué versión utilizamos? En el momento de escribir este curso (2014), se utiliza habitualmente HTML 5, que aunque no es un estándar cerrado (aún está en desarrollo) ha sido ampliamente aceptado y adoptado por la comunidad de desarrollo web en todo el mundo.

HTML 5 tiene algunos cambios importantes sobre la versión anterior, HTML 4.01. Nosotros no vamos a hablar en ningún momento de versiones anteriores y vamos a centrarnos en HTML 5, por ser el presente y el futuro de la web. Vamos también a descartar XHTML y similares, aunque si ya sabías XHTML, aprender HTML 5 te resultará sencillo.

Durante este curso aprenderemos también una de las tareas que más han cambiado en HTML 5 y es la maquetación semántica. Poca gente domina este aspecto y se conforma con traducir directamente desde HTML 4 o XHTML a HTML 5 y eso no sirve, o por lo menos no es lo óptimo. Nosotros veremos cómo hacerlo correctamente.

Resumiendo: hay unos estándares y unas normas que hay que seguir. Nosotros nos ceñiremos a HTML 5.

5. Estructura de un documento HTML

Para crear una página web mediante HTML hay que utilizar una estructura común a todos los documentos HTML. La estructura común es la siguiente:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Título</title>
	</head>
	<body>
		<!-- Tu código irá aquí -->
	</body>
</html>

No todo el código que hay ahí se muestra en la página web. De hecho, si guardas eso como fichero .html y lo abres, no vas a ver nada en la página. Es decir, una página totalmente en blanco.

El código que se escribe para ser visto (texto, imágenes, etc) se coloca dentro de las etiquetas body, es decir, el cuerpo del documento HTML.

Fíjate en la primera línea, se trata de la declaración del estándar que estamos utilizando. Esa línea le indica al navegador que está trabajando con un documento HTML 5, y que debe interpretarlo como tal. Si estuviéramos con HTML 4, esa línea sería diferente, al igual que también lo sería si utilizásemos XHTML.

Por ahora y para tus primeros pasos, copia y modifica esta plantilla. Todo el código que escribas que quieres que aparezca en la página web, debe reemplazar la línea de “tu código irá aquí” de la plantilla, y no debe modificar ninguna otra línea del documento. Un ejemplo:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Título</title>
	</head>
	<body>
		<p>Este texto sí aparece en la página web. ¿Por qué no lo pruebas?</p>
	</body>
</html>

Si eres capaz de copiar ese código, pegarlo en un documento en Notepad++, guardarlo como fichero .html y al abrirlo en el navegador ves texto, hemos concluído esta primera parte del curso de HTML.

Siguiente entrega: Tu primera página en HTML 5

Jonathan 2014-04-28 - 20:41

Tiene muy buena pinta Jose, mañana me pondré a hacerlo que hoy ando estudiando, aunque creo que esta lección podría saltármela la haré igual que hace 6 o 7 años que no toco HTML.

Suerte

Jose J. Fernández 2014-05-07 - 17:54

Ya está la segunda lección online, pero creo que también puedes saltártela ;) a lo mejor en la tercera ya tienes que empezar, que es la que introducirá cosas nuevas.

Diego 2014-09-29 - 15:16

Hola José! muy bueno!! voy a comenzar a tomarlo, estamos muy pero muy agradecidos por tu esfuerzo. Felicidades, está muy completo! sigue así!

Xavier 2015-12-14 - 16:45

Nada más viendo el diseño de este sitio Web, su maquetado y distribución se proyecta la calidad a esperar en el curso, espero terminarlo al 100%, he diseñado en Dreamweaver, con inclusión al código. Felicitaciones por tu Web Jose Fernandez.

  1. Curso de HTML: tu primera página en HTML 5 | Jose J. Fernández
  2. Curso de HTML: el cabecero de un documento HTML | Jose J. Fernández

No se mostrará públicamente.

Un enlace a tu blog o página web.