Introducción a HTML

¿Qué necesidad queremos solucionar?

Como te comenté, esto no es un curso de HTML y CSS al uso. Con este curso también busco fomentar habilidades blandas. Una de ellas es la proactividad. Quiero que busques un problema o necesidad que tenga la sociedad o el mundo y que tu solución sea la temática de tu página web. Eso ayudará a tu motivación cuando no entiendas nada y quieras dejarlo.

En mi caso, he seleccionado como problemática el paro juvenil en España. Según este artículo publicado en enero de 2021, la tasa media de desempleo juvenil en España es del 40.13%, siendo las peores comunidades autónomas en cuanto a este indicador Ceuta, Melilla, Canarias, Andalucía y Extremadura. Si quieres más información al respecto, puedes consultar el artículo que te he mencionado anteriormente. Yo por mi parte, con este indicador ya me sobra motivación para hacer una página web para fomentar las habilidades tecnológicas y las soft skills en la juventud. La educación siempre ha sido y será un arma para el progreso de la sociedad y de nuestra civilización. No hace falta por ahora que tengamos claro exactamente qué queremos como web. Lo iremos viendo poco a poco. Por lo pronto, tras este chute de motivación (no programamos por programar, sino con un fin concreto que nos importa) vamos a conocer a nuestro nuevo y gran amigo HTML.

¿Qué es HTML?

Lo primero que tienes que saber es que HTML no es un lenguaje de programación. Es un lenguaje de marcas. En este curso veremos HTML y CSS, que son la base del desarrollo web moderno. HTML es un lenguaje de marcas y CSS un lenguaje de diseño gráfico. Pero de CSS hablaremos más adelante. Centrémonos ahora en HTML.

¿Y qué es un lenguaje de marcas o de marcado? Básicamente son lenguajes con los que, mediante etiquetas o marcas, damos información al navegador de cómo tiene que estructurar la información. Hay muchos, pero no vamos a complicarnos con teoría inútil, simplemente comentarte que el estándar en desarrollo web es HTML.

¿Y qué diferencia un lenguaje de marcas de un lenguaje de programación? A grosso modo, en un lenguaje de programación yo espero que el programa haga algo, es decir, que yo le pase unos datos de entrada, los procese (según las instrucciones que le he ordenado) y me devuelva un resultado. Por ejemplo, yo podría decir con código que si un programa recibe dos números, que los sume y que me devuelva el resultado. Un lenguaje de marcas como HTML no procesa la información de esa forma. Simplemente nos permite estructurar la información de un documento de una determinada forma para que el navegador lo muestre como yo quiero. Es decir, con HTML yo le estoy diciendo al navegador «esto es el título», «esto es el subtítulo», «esto es el párrafo» etc.

Nuestra primera página web.

Creando la estructura de un documento HTML.

Pues sí. Presta atención porque vamos a crear nuestra primera página web en HTML. Algo muy sencillo. Veamos. Sigue estas instrucciones paso a paso.

• Vete a la carpeta que creamos en la clase anterior, que se llama CursoHTMLCSS. Dentro de la carpeta, crea otra carpeta con el número 0 (para identificar que es el primer proyecto que hacemos) seguido de un guión y el nombre de tu proyecto. En mi caso, el proyecto se llama 0-EducacionContraElDesempleo. No te preocupes ni por las tildes ni por los espacios. Te aconsejo no ponerlos para no tener problemas, ya irás viendo que los ordenadores necesitan el código perfectamente claro porque si no se hacen un lío. Y los nombres de las carpetas y los archivos también lo necesitan tremendamente claro, es decir: no tildes, no espacios.

• Abre la carpeta con Visual Studio Code tal y como observas en la imagen.

• Nombra al fichero con el nombre index.html. Por convención, se usa ese nombre para el fichero HTML de una página web, para el fichero HTML dónde se inicia la página web. Recuerda que una página web no es otra cosa que un conjunto de ficheros con un determinado formato que un servidor envía a un cliente tras la petición previa del cliente. Puedes repasar más acerca de esto en la clase sobre ¿Cómo funciona Internet?.
• Ahora utilizaremos un atajo de Visual Studio Code. Los atajos nos permiten escribir código de forma mucho más rápida, y nos ahorran tener que memorizar un montón de código que suele ser siempre el mismo. Al menos en proyectos sencillos o sin requisitos especiales. Escribirás dentro del documento index.html la palabra html y Visual Studio Code ya te sugerirá distintas opciones. Clicka en HTML5 (que es la versión actual de HTML) y verás mucho código. No te abrumes. Ahora te lo explicaré.

Comprendiendo la estructura de un documento HTML.

Si has seguido bien todos los pasos, tendrás en pantalla lo siguiente:

Lo primero que tenemos que tener en cuenta: el navegador (que es quién leerá el documento HTML y lo mostrará según las instrucciones que le hayamos dado) es tonto. Y eso significa que no va a hacer lo que nosotros queramos, no es un humano, es un programa diseñado para ordenador para mostrarnos páginas web y, por tanto, hará lo que le indiquemos. De forma estricta. No lo que nosotros queramos, sino lo que le indiquemos. Es importante comprender esto.

Si pones el ratón a la izquierda del código, puedes plegar el código. Y eso vamos a hacer, para que podamos comprender mejor la estructura de un documento HTML.

Un documento HTML es como un árbol. Tenemos una tronco inicial del que se bifurcan ramas. Lo veremos más claro cuando despleguemos el código. Por el momento vamos a explicar estas tres líneas de código:

<!DOCTYPE html>

Con esto estoy indicando el tipo de documento, es decir, le estoy diciendo al navegador que este documento que va a leer es un documento con formato HTML.

<html lang="es">

</html>

La etiqueta html me indica que entre ambas etiquetas tengo la información del documento HTML. El lenguaje de marcas HTML funciona de la siguiente forma:

• Tengo una etiqueta de apertura <html>
• Tengo el contenido entre medias.
• Tengo una etiqueta de cierre </html>. El cierre se indica con la barra tras el signo <. Hay etiquetas que se autocierran pero eso lo veremos más adelante.
• Las etiquetas pueden tener atributos. Un atributo da información extra al navegador sobre lo que tenemos dentro de la etiqueta. En este caso, el atributo lang le indica al navegador el lenguaje que va a tener la página web. Visual Studio Code por defecto lo pone con el valor "en" ("en" de english, en inglés vaya) pero como mi página web va a estar en castellano, yo le pongo "es" (de español).

La cabecera del documento HTML.

La cabecera de un documento HTML incluye información que no se muestra en el navegador en general (veremos alguna excepción) pero que sí que da información útil al navegador de cómo tiene que procesar nuestro documento HTML. Va entre etiquetas <head> Además, desde este documento vincularemos otros documentos CSS, de JavaScript etc. pero poco a poco. Ahora analicemos este código básico línea por línea:

<meta charset="UTF-8">

La etiqueta meta nos permite introducir metadatos en nuestro documento HTML, es decir, introducir datos que describen datos. En este caso, tiene el atributo charset que tiene el valor de "UTF-8". Dicho valor indica el formato de los caracteres que acepta tu página. Piensa que no todos los países tenemos el mismo alfabeto (por ejemplo, el alfabeto latino que nosotros utilizamos tiene caracteres distintos al alfabeto chino o al alfabeto griego). Dándole al atributo charset el valor de "UTF-8" nuestra página web admitirá que le introduzcamos caracteres de un amplio conjunto de alfabetos, de forma que el navegador mostrará casi cualquier carácter que le introduzcamos de casi cualquier alfabeto humano. Si este atributo estuviera mal configurado y pusiéramos algún carácter que nuestro formato no soportara, aparecerían caracteres raros en pantalla y no es eso lo que queremos. Imagínate que haces una página web para un cliente griego, tiene que estar en griego, no indicas al navegador que usas este juego de caracteres y al cliente el texto no se le ve y en su lugar aparecen caracteres raros. Muy mal, ¿no? Pues para eso sirve esta línea de código.

<meta http-equiv="X-UA-Compatible" content="IE=edge">

Con esta etiqueta meta básicamente indicamos al navegador que versión de Internet Explorer queremos que utilice para renderizar nuestra web. En este caso, le estamos diciendo que Microsoft Edge. ¿Se puede abrir esta página web con cualquier otro navegador? Por supuesto. Pero en caso de que la abras con alguno de Microsoft, el navegador leerá el fichero web de acuerdo a las características que implementa Microsoft Edge, de modo que si tuvieras una página web con unas determinadas funcionalidades y la abrieras con un Internet Explorer de una versión antigua, probablemente no funcionara adecuadamente. ¿Has de poner ahí otros navegadores? Podrías, aunque yo nunca lo hago, ya que en general nunca he tenido problemas renderizando mis webs con Chrome, Firefox etc. pero sin embargo sí sé que versiones antiguas de Internet Explorer dan muchas problemas. De ahí que utilicemos esta línea de código. Para evitar problemas.

 <meta name="viewport" content="width=device-width, initial-scale=1.0">

Otra etiqueta meta. En este caso, con sus atributos lo que le estamos indicando al navegador es que queremos tomar control sobre cómo los usuarios visualizan la página web. El viewport es el área visible por el usuario de una página web. ¿Qué te hace pensar que una página web que ves de forma correcta en tu ordenador se verá de forma correcta en el móvil? Para poder empezar a controlar eso (además de hacer muchas más cosas) necesitas indicarle con name="viewport" que el viewport lo controlarás tú, y que no lo intuirá el navegador (que es lo que haría si no le indicamos nada). Con el atributo content y su valor "width=device-width, initial-scale=1.0" indicamos al navegador que el viewport será el ancho de la pantalla del dispositivo, y que entienda que ese ancho (que se puede medir en píxeles y en otras unidades de medida-ya lo veremos más adelante) es el 100% de la pantalla (ya veremos más adelante para que sirve esto). Por ahora quédate con que es un primer paso que nos facilitará que las páginas webs que hagamos puedan ser responsive, es decir, verse de la forma que nosotros queremos en distintos dispositivos. Esta etiqueta no hace a tu página web responsive, pero nos permite controlar el viewport, que es un requisito necesario pero no suficiente para ello.

<title>Document</title>

Con la etiqueta title básicamente lo que le estamos indicando al navegador es qué título tendrá nuestra web, es decir, que texto aparecerá en la pestaña del navegador web. Por defecto Visual Studio Code nos pone Document. Lo cambiaremos próximamente.

El body de nuestro documento HTML.

El body del documento HTML es el lugar dónde suceden las cosas. ¿A qué me refiero con eso? A que todo lo que aparezca aquí lo renderizará nuestro navegador web y lo podremos, por tanto, visualizar en el navegador. Será nuestra primera web. Mientras que la cabecera de nuestro documento HTML la generaremos automáticamente normalmente con Visual Studio Code (y normalmente solamente le cambiaremos el idioma-por ahora-, si hacemos la web en castellano, por ejemplo), el body será dónde escribiremos el código de nuestra página web. La cabecera normalmente la tocaremos poco (por ahora), al menos mucho menos que el body. Sin más, vamos a hacer nuestra primera página web.

Visualizando nuestra primera página web.

No esperes nada espectacular. Estamos empezando. Hay que gatear antes que andar y andar antes que correr. En mi caso, elegí que mi página web ayudara a solucionar el problema del paro juvenil en España mediante la educación en habilidades tecnológicas y soft skills, de modo que será una página web de una academia de educación online. La llamaré Minerva, que es la diosa de la sabiduría en la mitología romana.

¿Qué quiero ahora? Que en la pestaña de mi navegador aparezca el nombre de mi academia, es decir, Minerva; y que aparezca en pantalla la frase Hola mundo. No os iba a privar de vuestro primer Hola Mundo, que es la frase con la que los que aprenden a programar en un nuevo lenguaje se inician en el mismo, mostrándolo en pantalla.

¿Cómo lo haremos? En el head de mi documento HTML, en la etiqueta title, pondré Minerva.

En el body, entre etiquetas <h1>, pondremos Hola Mundo. Importante: etiqueta que se abre (<>), etiqueta que se cierra (</>). En este caso, observa que abro y cierro la etiqueta h1. No hacerlo te dará errores. Recuérdalo. La etiqueta <h1> nos permite poner títulos, encabezados en el documento, pero los estudiaremos más a fondo en la siguiente clase. Por ahora quédate con que nos permiten poner títulos.

Para visualizar la página web, simplemente abre la carpeta dónde tienes guardado tu fichero index.html y haz doble click sobre él. Se abrirá en tu navegador predefinido. Y el resultado será el siguiente:

Podemos observar en la pestaña del navegador lo que queríamos, y en pantalla lo que queríamos. ¡Hemos hecho nuestra primera página web!

Para despistados/as: podemos acceder a ella sin Internet porque simplemente es un documento HTML que tenemos guardado en nuestro ordenador. Sin más.

Si tienes alguna duda, puedes consultar el código de este ejercicio en nuestro GitHub. GitHub es un repositorio, algo así como un almacén dónde podrás consultar el código finalizado de cada clase. Es más complejo que esto, pero por ahora quédate con esta sencilla explicación.

Acceso al índice del curso.

Recuerda que para seguir nuestro curso de HTML y CSS sólo tienes que ir al índice y seguir por la clase de tu interés. ¡Feliz aprendizaje!

Esta clase, al ser práctica, no tiene ejercicios. Si has podido realizar todo lo que hemos visto en la clase sin problemas, perfecto. En caso de duda, recuerda que puedes preguntarle a la comunidad con el hashtag #SoySalvajeHTMLCSS en Twitter y que puedes contactar con nosotros (aunque no me comprometo a responder por falta de tiempo, aunque responderé si puedo)  por Twitter, Instagram o por nuestro formulario. Por supuesto, recuerda que si quieres que te ayudemos a crecer como profesional de forma más personalizada, no dudes en consultar nuestros servicios.  Y si estás pensando en comprar algún producto relacionado con informática, no dudes en consultar nuestras recomendaciones en la sección Productos. Nos vemos en la siguiente clase.