4Geeks logo
4Geeks logo

Bootcamps

Explora nuestra extensa colección de cursos diseñados para ayudarte a dominar varios temas y habilidades. Ya seas un principiante o un aprendiz avanzado, aquí hay algo para todos.

Academia

Aprende en vivo

Únete a nosotros en nuestros talleres gratuitos, webinars y otros eventos para aprender más sobre nuestros programas y comenzar tu camino para convertirte en desarrollador.

Próximos eventos en vivo

Catálogo de contenidos

Para los geeks autodidactas, este es nuestro extenso catálogo de contenido con todos los materiales y tutoriales que hemos desarrollado hasta el día de hoy.

Tiene sentido comenzar a aprender leyendo y viendo videos sobre los fundamentos y cómo funcionan las cosas.

Full-Stack Software Developer - 16w

Data Science and Machine Learning - 16 wks

Buscar en lecciones


IngresarEmpezar
← Regresar a lecciones

Weekly Coding Challenge

Todas las semanas escogemos un proyecto de la vida real para que construyas tu portafolio y te prepares para conseguir un trabajo. Todos nuestros proyectos están construidos con ChatGPT como co-pilot!

Únete al reto

Podcast: Code Sets You Free

Un podcast de cultura tecnológica donde aprenderás a luchar contra los enemigos que te bloquean en tu camino para convertirte en un profesional exitoso en tecnología.

Escuchar el podcast
Editar en Github

¿Qué es HTML? Es tiempo de aprender HTML y su estructura

Espacios vacíos y saltos de línea

☝️ Ya que en el capítulo anterior decíamos que las casas, tiendas y edificios son páginas web; entonces el código HTML sería los planos del edificio.

HTML es el esqueleto del sitio web

Todas las páginas web tienen HTML. Es la estructura base de TODO. Imagínatelo como los pilares de una construcción.

HTML te permite dividir la información del sitio web en partes (similar a las partes básicas de un documento): header (encabezado), title (título), content (contenido), footer (pie de página), subtitle (subtítulo), etc. Luego, con CSS podrás hacer la página hermosa, y con JavaScript la harás interactiva.

Originalmente, los navegadores solo podían interpretar HTML. Las páginas web eran sencillas y no se usaba CSS o JavaScript. Un sitio web era un simple documento de texto plano con los elementos típicos que cualquier documento de Word tiene: títulos, listas de viñetas, párrafos, etc.

qué es html

Sintaxis del HTML: Todo es <Tags> (etiquetas).

qué es html

¿Recuerdas que Internet trabaja solo con texto?

En ese sentido, HTML es un lenguaje que utiliza etiquetas (<tags>) para representar los elementos que una página web debería de tener. Un tag es simplemente una palabra que comienza con < > y termina con </ >. Todos los tags se deben de abrir y cerrar, (los tags de cierre siempre preceden al elemento con /)

Hay 2 tipos diferentes de tags:

  • Tags con contenido: cuando hay contenido entre ambos tags, debes de cerrarlos con (</tag>). Por ejemplo, para marcar un tag de texto como un párrafo, debes empezar con (<p>) y cerrarlo al final con (</p>).

  • Tags sin contenido: son tags independientes sin tags de cierre (</ >). Por ejemplo, el tag para un salto de línea es (<br>).

Atributos

Una vez definidos los <tag>, podemos describir con más detalle su comportamiento asignándole atributos a esos <tag>. Por ejemplo, si queremos que nuestro documento/página HTML tenga un link a otra página, utilizamos el tag <a> y le asignamos un atributo llamado href, que permite especificar el URL de la otra página a la que queremos hacer el enlace.

1<a href="google.com">Haz clic aquí para ir a google.com</a>

En teoría, tú debes utilizar uno de estos tags. No puedes inventar tus propios tags porque el navegador no sabría cómo interpretarlas. Debes conocer el significado de cada tag HTML para utilizarlos sabiamente… ¡Pero no te preocupes, que no hay muchos! 🙂

Para el título (el heading) principal del documento, se utiliza el tag <h1>. Por ejemplo: una tienda en línea podría tener una sección para la categoría de "Electrónicos". El título de dicha categoría sería "Electrónicos" y el tag <h1> lo escribiríamos de la siguiente manera:

1 <h1>Electrónicos</h1>

Tags Anidadas

Por último, es importante saber que un tag puede tener uno o más tags en su contenido. Por ejemplo, si quisiéramos darle un estilo en cursiva a la palabra “electrónicos” debemos acompañar esa palabra con el tag <i>:

1 <h1><i>Electrónicos</i></h1>

Espacios vacíos y saltos de línea

Los espacios vacíos (o en blanco) y los saltos de línea son omitidos por el navegador al momento de interpretar el texto. Si escribimos cinco espacios en blanco seguidos, o uno solo, el navegador lo interpretará de la misma manera. Si queremos un salto de línea, debemos usar la etiqueta <br>. Si queremos más "espacio", necesitamos insertar &nbsp; por cada espacio en blanco (sí, es raro, pero es así).

Estas tres alternativas se van a ver iguales (espacios y saltos de líneas van a ser ignorados):

1<tag>Hello</tag><tag>World</tag>

Los saltos de línea son ignorados:

1<tag>Hello</tag> 2<tag>World</tag>

Los espacios son ignorados:

1<tag>Hello</tag> <tag>World</tag>

Estructura de página

Todas las páginas deben empezar con la declaración del <!DOCTYPE html> seguido por los tags <html>, luego <head> y por último <body>. Estos tags deben contener otros tags dentro de ellos (etiquetas anidadas), y eso es así porque separarán la página en dos pedazos principales: el HEAD (la cabeza) y el BODY (el cuerpo):

1<!-- Siempre debemos empezar con un tag HTML para demostrarle al navegador que este es un documento en formato HTML. --> 2<!DOCTYPE html> 3<html> 4 <head> 5 <!-- Dentro del tag head vamos a definir toda la información que requiere el navegador para empezar a interpretar la página. --> 6 </head> 7 <body> 8 <!-- Dentro del tag body vamos a definir el contenido de la página. --> 9 </body> 10</html>

Vamos a simular el pensamiento de un navegador: Imaginemos que una persona en su navegador (lado del cliente) está solicitando visualizar la página web: “4Geeks.com”

  • El servidor abrirá un archivo HTML por defecto en el servidor. Probablemente sea index.html.
  • Luego, leerá el contenido y lo interpretará como un HTML (porque la extensión del archivo es index.html).
  • La persona no verá el texto que contiene el archivo, en cambio verá una interpretación visual de ese texto.

Como ya sabemos, dicha página va a contener, por lo menos, los siguientes tags:

learn html

NombreTagsDescripción
HTML<html>Debemos empezar aclarándole al navegador que esto es un documento HTML. También podemos especificar la versión de HTML que estamos utilizando.
Head<head>Todo lo que esté dentro del HEAD no lo verá el usuario. Es la parte de la página en donde le dices al navegador en qué idioma está hecha la página, de qué se trata, cargas las fuentes (font type) necesarias, defines el ícono que va a tener la pestaña en el navegador y muchas otras cosas realmente importantes.
Body<body>Aquí vas a colocar todo el contenido del documento que verá el usuario final.
Si esto fuera MS Word, el body marcaría el inicio de tu página, la primera línea del texto del documento.

El <head> es como el sobre de una carta.

Leemos el sobre de una carta para conocer información sobre la carta en sí misma, no sobre el contenido. En el sobre puedes enterarte de quién la escribió, en que idioma está, de dónde viene, etc.

En el caso de HTML, <head> puede contener los siguientes tags (entre otros menos importantes):

NombreTagDescripción
Title<title>El título aparece en la ventana del navegador, también es utilizado cuando compartes la página en las redes sociales: Facebook, Twitter, Instagram, etc. Todas esas redes utilizan el título de la página como extracto por defecto para compartir cuando algún usuario copia el URL de tu página en su muro. Por último, es fundamental para SEO (Optimización para buscadores), ya que, Google le da mucha importancia dentro del contenido.
Meta<meta>Los meta tags describen al documento. Se utilizan para especificar cosas como: autor, título, fecha, palabras clave, descripción, etc. Los buscadores aman los meta tags porque les permite entender mejor el contenido antes de leerlo.
Link<link>Tiene como finalidad enlazar a la página con hojas de estilos CSS. Cuando veamos el capítulo de CSS, aprenderemos a crear hojas de estilos y podremos importarlas utilizando este tag.
Style<style>Si no queremos o no podemos importar una hoja de estilo CSS, también tenemos la posibilidad de definir estilos en el propio documento HTML dentro de este tag. Es una práctica que no recomendamos en casi ningún escenario, solo deberías usarla cuando te veas obligado.
Script<script>Se utiliza para agregar código JavaScript a la página. Todo el código JavaScript debe estar siempre contenido dentro de estos tags que también se puede utilizar en el BODY si así lo deseamos. La diferencia es que cualquier código JavaScript que coloquemos en un tag de <script> ubicado en el body, no estará disponible al momento de iniciar la ejecución de la página (justo en eso es que nos ayuda el HEAD).

El <body> es similar a cualquier documento de MS Word

Bien, ahora que conocimos la estructura general y necesaria de la página, vamos a revisar cuáles son los tags que podemos y debemos utilizar para definir el contenido de la misma.

Recuerda -por quinceava vez- que una página web es un… ¡documento de texto! Así es, si has pensado en la respuesta antes de leerla… ¡estás entendiendo! y si no es así, pues no te preocupes, que no conozco a nadie que haya entendido HTML y CSS tan rápidamente ;).

Veamos ahora en qué se compara un sitio web con un documento de Word:

width_calc

Los tags más utilizados dentro del <body> de un documento HTML son los siguientes:

NombreTagsDescripción
Heading<h1>, <h2>, ..., <h6>Define los headings y subheadings de la página (los headings no son lo mismo que el título; el título es utilizado por el navegador y se define en el tag title).
<h1>Este es un heading</h1>
Párrafo<p>Este tag separa el texto que contiene con un margen superior e inferior. De esta manera simula exactamente el comportamiento de un párrafo en un documento Word.<p>ejemplo de un párrafo</p>
Lista<ul>, <ol>Las listas son fundamentales en un documento, en el caso de HTML tenemos dos tags que podemos usar para listar contenido:

  • OL: Nos da una lista numerada (pone números delante).

  • UL: Nos da una lista no numerada (pone viñetas por delante).

    <ol>
    <li>Elemento 1</li>
    <li>Elemento 2</li>
    </ol>
  • Imagen<img>Nos permite agregar imágenes al documento, pueden ser imágenes PNG, JPEG, GIF y SVG principalmente.
    <img src="url de la imagen"/>
    Link (Anchor)<a>A veces queremos conectar una o más páginas entre ellas, enviar al usuario a otra página o incluso poder enviarlo a otra sección del mismo documento (tal como ocurre con el menú de este curso). Para eso está el tag “Anchor”.
    <a href="url de la pagina web">texto a clickear</a>
    Negrita<strong> o <b>Para resaltar un texto en negritas.
    <strong>texto en negritas</strong>
    Cursiva<i>Para colocar un texto en formato cursiva.
    <i>texto en cursiva</i>
    Salto de Línea<br>Para saltar el texto o contenido a la línea siguiente (similar al shift+enter en MS Word.)
    <br>
    Tablas<table>Las tablas fueron diseñadas para presentar datos de una forma legible y coherente. Tienen tags de headers (th), filas (tr) y celdas (td).

    <table>
    <tr><th>Columna 1</th><th>Columna 2</th></tr>
    <tr><td>Datos 1</td><td>Datos A</td></tr>
    <tr><td>Datos 2</td><td>Datos B</td></tr>
    <tr><td>Datos 3</td><td>Datos C</td></tr>
    </table>

    🔗 Haz clic aquí, para más tags HTML.

    Los atributos (propiedades)

    Ya sabemos que cada <tag> tiene un comportamiento diferente. Gracias a ellos podemos cambiar el tamaño de la letra - como ocurre con los headings - agregar márgenes entre párrafos, enumerar elementos, etc.

    Si quieres especificar más el comportamiento de una etiqueta en particular, puedes utilizar sus atributos. Para usarlos debes definirlos en el tag de apertura así:

    1<img src="http://www.mydomain.com/myimage.png" />

    En este caso, estamos asignándole al tag <img> la propiedad "src" que indica cual es la ruta de la imagen que debe visualizarse en este contenedor.

    Cada tag tiene sus propiedades (no tienes que memorizarlas, siempre las conseguirás rápidamente en Internet), pero si es bueno que revises las más importantes para que las tengas a disposición en tu mente.

    Por eso hemos creado una serie de ejercicios que te explicarán mejor cada una de las propiedades importantes de los elementos más utilizados de HTML.

    👏👏👏 ¡Estás un paso más cerca de aprender HTML!

    ¡Estamos muy orgullosos! 🙂

    Acabas de aprender lo esencial para realizar una página web como se hacía en 1999. Ahora tenemos unas pocas semanas más para ponerte al día con todo lo que ha pasado en estos últimos 20 años. ¡Ya puedes decir que sabes hacer una página web!

    HTML tiene muchísimos más tags y también tiene una nueva versión llamada HTML5. Otra vez, no te preocupes, todo eso lo aprenderás en las próximas lecciones para que hagas páginas web hermosas (gracias a CSS) y con interacción (Gracias a los formularios y JavaScript) ¡¡Para eso es que estamos acá!!

    learn html