Qué es HTML y para qué sirve. Muchos programadores novatos se hacen esta misma pregunta a la hora de iniciarse en el mundo del desarrollo web. Todos ellos se preguntan, cuando se enfrentan a la primera clase sobre fundamentos de programación, si es un lenguaje de marcado estándar o un lenguaje de programación más avanzado. Hay muchas dudas, pero en este post las resolveremos todas para que no quede ni un cabo suelto que atar.
En ese sentido, cabe destacar que el HTML es uno de los lenguajes más básicos y que se emplea para el desarrollo de páginas web. Ahondando más en la definición, está compuesto por etiquetas que los navegadores interpretan y que, en última instancia, crean, estructuran y aportan contenido a una página de internet.
¿Qué hay en esas etiquetas? Dentro se encuentran:
- Hipervínculos
- Saltos de página
- Imágenes
- Párrafos
- Listas
- Tablas
- Etc.
Si quisiéramos hacer un sencillo párrafo en una página web, tendríamos que hacer lo siguiente:
- Primero: especificar la etiqueta HTML, que iría así <html>
- Segundo: especificar la etiqueta del párrafo, que iría así <body> (por su significado en inglés de “cuerpo”).
- Tercero: especificar la etiqueta que enmarca el párrafo, que iría así <p>
- Cada una de esas etiquetas cerraría con su homóloga de cierre, e irían así: </html>, </body> y </p>
- Si quisiéramos añadir un encabezado al párrafo, entonces tendríamos que hacer uso de los elementos h1, h2, h3…. Se utilizan en orden jerárquico, siendo h1 el primer nivel y el resto los respectivos niveles de tamaño.
Como vemos, las etiquetas son simples fragmentos de texto dentro de unos corchetes <>. Esto no significa que podamos crear una página web desde 0, pero sí que el html es un lenguaje básico para estructurar y presentar el contenido.
¿Qué puedo crear con HTML?
Lo bueno del html es que tiene un despliegue rápido y, además, lo reconoce y admite cualquier explorador de internet. La principal desventaja es que es un lenguaje estático, aunque siempre podemos unirlo a otros lenguajes, tanto de marcado como de programación, para crear resultados impresionantes y elaborados. Aquí responderemos a la pregunta de qué puedo crear con html a través de distintos ejemplos:
Resaltado de texto
Imaginemos que estamos creando una página web sobre la Grecia Clásica y que, en uno de los párrafos de información, queremos resaltar un dato importante. Por ejemplo, este de aquí: “Pericles fue el responsable del período más esplendoroso de la Grecia clásica, quien gobernó por más de 30 años en Atenas”. ¿Cómo haríamos para resaltar el fragmento ‘período más esplendoroso’? Muy sencillo:
- Para poner un encabezado: <h1> Pericles y Grecia Clásica </h1>
- Para marcar el inicio del párrafo: <p>
- Para marcar el final del párrafo: </p>
- Para resaltar la parte que hemos escogido anteriormente: <mark> período más esplendoroso </mark>
El resultado del resaltado sería un fondo claro sobre el texto, que iría en color oscuro. No obstante, ten en cuenta que siempre puedes modificar los colores y añadir más vida al asunto con la propiedad CSS.
Entrada con sugerencias
Se trata de un desplegable con distintas opciones que nos puede servir a la hora de elaborar un menú, por ejemplo. Si queremos crear una página web sobre restauración, este desplegable nos serviría para introducir las opciones de “carta”, “equipo”, “reservas”, y todas aquellas descripciones que quisiéramos. Se trata, por tanto, de una lista de sugerencias que funcionaría de la siguiente manera:
- Para establecer el cuadrante con las opciones: <input> </input>
- Para establecer cada una de las opciones por individual: <option value=”carta”></option>
Chulo, ¿verdad?
Letra pequeña
Las marcas suelen incorporar la letra pequeña en productos o servicios para contarnos algo menos relevante o importante. En algunos casos, las empresas esconden los términos, condiciones y restricciones de productos y servicios en letras muy pequeñas para que no nos demos cuenta de las condiciones legales. ¿Cómo lo haríamos?
- Para establecer la letra pequeña: <small> *Se aplican términos y condiciones </small>
Recuerda que puedes utilizar CSS para mejorar el diseño de todo lo que idees.
Links URL
¿Y si tu página es un portal de viajes y que deseas introducir determinados enlaces que te redirijan a una web muy específica? Por ejemplo, que hablamos sobre Marruecos y que, en una de sus frases, queremos introducir un link concreto que nos lleve a la página sobre el ministerio de Turismo del país al que queremos viajar. Este caso sería muy sencillo:
- Para establecer el título: <h1> Visita Marruecos </h1>
- Para introducir un enlace: <a href=”Ministerio de Turismo” </a>
En HTML, los enlaces se marcan con la etiqueta <a> y el atributo principal de href=.
Mapa de imágenes
En este caso, un mapa de imágenes estático, sí, pero un mapa, al fin y al cabo. Estos mapas servirían, por ejemplo, para crear zonas clicables dentro de una imagen que funcionaran como anclas hacia otras partes del mismo artículo o página. La etiqueta sería <map>.
—
Hay muchos proyectos a los que puedes dar vida gracias a HTML. ¿Te interesan? Si es un ¡sí! Rotundo, te invitamos a ojear nuestros bootcamp. Encontrarás los mejores cursos, tanto para principiantes como para aquellos más avanzados en la materia.
¡Gracias por leernos, y hasta el siguiente post!
