Esta clase pertenece al curso de HTML y CSS, y partiremos desde la clase anterior. Si no sabes de dónde partimos, te ruego revises las clases anteriores.
¿Qué encontrarás aquí?
Contenedores en HTML.
Es importante tener en cuenta que todo lo que hagamos en HTML no lo podemos hacer directamente sobre el fichero HTML a pelo, ya que (aunque esto lo veremos más adelante con mayor detalle) hemos de pensar en cada apartado de la web como una caja que ocupará una parte de la página web, una caja que ocupará un espacio de la misma. ¿Y cómo delimito ese apartado? Pues con la etiqueta <div>.
Encabezados en HTML.
En la anterior clase dejé la página web de mi Academia de Educación Online Minerva así. Ahora, simplemente con fines educativos, vamos a hablar de los encabezados.
Imaginemos que en esta página web quisiéramos poner distintas secciones de los estudios que se imparten. Lo veremos mejor con un ejemplo.
<div>
<h1>Academia de Educación Online Minerva</h1>
<h2>Estudios</h2>
<h3>Informática</h3>
<h4>Redes</h4>
<h4>Sistemas</h4>
<h4>Programación</h4>
<h5>Lenguajes de marcas</h5>
<h6>HTML</h6>
<h5>Lenguajes de diseño</h5>
<h6>CSS</h6>
<h5>Lenguajes de programación</h5>
<h6>Java</h6>
<h6>JavaScript</h6>
<h6>PHP</h6>
<h3>Marketing Digital</h3>
</div>
El encabezado es el título de algo (una sección de tu web, un artículo de texto etc.) de tu página web. Se usan las etiquetas h + número del encabezado. Tenemos las etiquetas <h1>, <h2>, <h3>, <h4>, <h5> y <h6>. Sólo puede haber una etiqueta <h1> en una sección de tu web, ya que es el título propiamente dicho. Puede haber varias etiquetas <h2>, <h3>, <h4>, <h5> y <h6>. Están ordenadas de forma jerárquica, siendo el número cuanto más cercano a 1 más importante y cuanto más cercano a 6 menos importante. Fíjate que tengo todas las etiquetas dentro de un contenedor, con su etiqueta <div> que se abre y su etiqueta </div> que se cierra.
La importancia de los encabezados para el SEO.
El SEO (Search Engine Optimization) consiste básicamente en posicionar tu página web lo más alto posible en los buscadores (por ejemplo, en Google). ¿Cuántas veces miras más allá de los cinco-diez primeros resultados? Pues eso. Aparecer arriba en el buscador te permite atraer más tráfico web, lo que significa visitas, posibles compradores si vendes algo… En resumen: dinero.
¿Y cómo determina Google (por ejemplo) qué página aparece más arriba que otra cuando buscas una palabra clave (por ejemplo, pongamos que buscas en Google «cursos de programación»)? Pues en base a un algoritmo desconocido (no lo iban a hacer público para que todo el mundo optimizase exactamente las mismas cosas) pero que yo te resumo en algo muy sencillo: cuando buscas en tu buscador de referencia es porque tienes una necesidad. Las páginas web que mejor satisfagan esa necesidad a la larga serán las mejor posicionadas arriba. Es una forma sencilla de comprender esto.
Pues bien, una buena estructura de los encabezados ayuda a que cuando los buscadores revisen tu página (de forma automática, por supuesto) la posicionen más arriba, porque entenderán que el contenido de la misma queda más claro. Fíjate en el ejemplo de arriba: hay una buena estructura de encabezados, porque dentro de informática tienes encabezados de menor jerarquía, dentro de lenguajes de programación exactamente igual etc.
Textos en HTML.
Aquí no vamos a hablar de etiquetas que den significado al texto (por ejemplo, etiquetas que pongan en negrita o en cursiva un texto), sino que vamos a abordar las etiquetas que contienen bloques de texto y las diferencias existentes entre ellas.
Si quiero poner un párrafo, utilizaré la etiqueta <p>. Con fines de prueba (para que cada vez que quieras un párrafo no tengas que escribirlo o buscarlo por Internet para hacer un copia y pega) puedes usar el clásico Lorem ipsum, que es el texto estándar que se pega para probar estas cosas. Puedes generarlo de aquí.
Si en vez de un texto quiero escribir sólo una frase, puedo utilizar la etiqueta <span>.
Hay muchas más etiquetas de texto, y una mayor complejidad, pero como estamos dando nuestros primeros pasos en HTML, por ahora, esto es suficiente.
Un truco de Visual Studio Code para manejar el texto.
Es posible que al maquetar texto en Visual Studio Code el texto se salga de la pantalla al ser más largo que el ancho de la pantalla del entorno de desarrollo y sea muy incómodo a la hora de maquetar y escribir código. Verás algo así:
Hay una opción para que el texto se ajuste al tamaño de la pantalla, y sea cómodo maquetar el código. Tienes que irte al menú de arriba, seleccionar View y seleccionar la opción Toggle Word Wrap. Si lo tienes en castellano, te pondrá otra cosa, pero la opción estará en el mismo lugar. También puedes activar esta configuración con Alt + Z.
Usando esa configuración, tu código en Visual Studio Code se verá así:
Pues ya sabes un «truco» más de Visual Studio Code. Iremos viendo más a lo largo del curso.
Ejercicios.
Ejercicio 1.
Teniendo el siguiente conjunto de categorías, agrúpalas de forma jerárquica en una página web que se llamará «Agencia de Viajes» mediante encabezados utilizando las etiquetas de encabezados que hemos visto para ello. Las categorías son las siguientes: Francia, Portugal, Extremadura, Cáceres, España, Europa Occidental, Andalucía, Europa, Badajoz.
No es necesario que crees un documento HTML en Visual Studio Code para ello, aunque puedes hacerlo si quieres, con que en un bloc de notas o en un papel vayas haciendo una estructura de código similar a la vista arriba me es suficiente.
Es posible que tengas que utilizar Google Maps para resolver este ejercicio, pero está pensado de forma intencionada para que comprendas mejor la jerarquía de las etiquetas de encabezado <h1>, <h2>, <h3>, <h4>, <h5> y <h6>.
Ejercicio 2.
Vas a tener los siguientes encabezados y los siguientes textos, y tendrás que escribirlo en un código que tenga sentido de acuerdo a lo visto en esta clase.
Los encabezados son los siguientes: ¿Debería estudiar informática para ganar mucho dinero?, La atracción del dinero, Quiero estudiar informática para ganar mucho dinero, De los sueños a la vida real, La trampa del canto del dinero, Situaciones que se dan en el sector IT.
Los textos son los siguientes:
a) Esta es una de las preguntas recurrentes que se hace cualquier persona antes de introducirse en el mundo de la informática. Y tú, estás en una de las dos siguientes situaciones, o bien eres una persona joven, que quieres realizar tus primeros estudios, o bien Quizás ya no eres tan joven, has estudiado algo que no tiene que ver con la informática y estás decepcionado con la precariedad laboral, los bajos salarios, el desempleo en tu sector… y estás pensando en realizar un cambio hacia la informática.
b) Por tanto, quieres estudiar informática para ganar mucho dinero. O, al menos, es una parte importante de tu motivación hacia unos estudios relacionados con el sector. Pero… ¿Deberías? En España, hay una gran escasez de programadores con experiencia (y ya si pedimos nivel alto de idiomas, apaga y vámonos) y una alta demanda de los mismos. Muchas empresas europeas (aunque menos de las que nos gustaría) instalan una sede en España a fin de contratar talento a bajo coste comparado con su país. La demanda se incrementa año tras año (al menos así ha sido hasta el inicio de la crisis de 2020 provocada por la pandemia de Covid-19) mientras que la oferta de desarrolladores se ha mantenido estable.
c) Esas situaciones son desde programadores a los que llamas para intentar que participen en tu proceso de selección (y mejoras, evidentemente, sus condiciones actuales) pero no te cogen el teléfono; programadores que tienen igual 6 meses/1 año de experiencia e idiomas con una tecnología muy demandada e intentar ficharlo ofreciéndole un salario elevado para su experiencia porque no encuentras a nadie más; o bien Una falta de interés acusada en cambios laborales en verano, incluso en programadores que no tienen trabajo porque se acabó su proyecto y están ahora mismo en desempleo, porque te comentan que estamos en verano, tienen cómo vivir estos meses y quieren disfrutar de las vacaciones.
d) Por tanto, es lógico que sientas el canto del dinero atrayéndote hacia la informática. Pero, cuidado, ¡es una trampa! Te cuento lo que te va a pasar con una alta probabilidad si te metes en este sector SÓLO por dinero, que acabarás quemado/a relativamente pronto y tendrás ganas de abandonar.
e) Muchísima gente que, evidentemente, eligen hacer un Ciclo Formativo de Grado Superior porque son dos años, su coste es muy reducido (o gratis) comparado con estudiar Ingeniería Informática en la Universidad, el recorrido a nivel salarial suele ser similar (con ciertos matices que veremos en otro artículo) y son ciclos formativos que ofrecen una alta empleabilidad (normalmente, todos los estudiantes que los acaban encuentran trabajo en menos de 6 meses, eso siempre antes del COVID-19). La elección no es mala. El problema es que cuando sólo te guías por el dinero, no vas a ser capaz de superar ningún obstáculo durante tus estudios. Pero, incluso siendo positivo, en cuanto trabajes vas a amargarte. El sector IT requiere alta capacidad de aprendizaje, de forma constante (las tecnologías no descansan) y, o te encanta y eres muy friki, o en el mejor de los casos vas a acabar siendo un trabajador que rinde poco y que, por tanto, tiene un salario inferior al que podría tener. En el peor de los casos acabarás con problemas de estrés y estudiando otra cosa. Con lo cual, ahórrate tu tiempo y tu dinero.
f) Este artículo fue escrito por Sergio Gordillo
Ejercicios resueltos.
Ejercicio 1 resuelto.
El código del ejercicio resuelto es el siguiente:
<div>
<h1>Agencia de viajes</h1>
<h2>Europa</h2>
<h3>Europa Occidental</h3>
<h4>España</h4>
<h5>Andalucía</h5>
<h5>Extremadura</h5>
<h6>Cáceres</h6>
<h6>Badajoz</h6>
<h4>Portugal</h4>
<h4>Francia</h4>
</div>Ejercicio 2 resuelto.
Lo primero que he de comentarte es que este ejercicio es una adaptación de la estructura del HTML y de los textos de este artículo, por si quieres ver la estructura jerárquica de los encabezados de HTML de este ejercicio en acción en una página web real. Tienes el código de este ejercicio resuelto, es decir, la solución, en nuestro GitHub.
Tu pantalla ha de quedar exactamente así:
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!
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.