Fundamentos de HTML: Uso y Creación de Etiquetas Básicas

Clase 4 de 27 • Curso de Creación de Páginas Web con Wordpress y No-code

Clase anteriorSiguiente clase

Resumen

¿Qué es HTML y por qué es esencial en desarrollo web?

HTML, siglas de HyperText Markup Language, es la columna vertebral de cualquier página web. Es fundamental para quienes desean incursionar en el desarrollo Frontend, ya que define la estructura y el contenido de los sitios web mediante el uso de etiquetas. Comprender el funcionamiento de estas etiquetas es esencial para crear páginas web funcionales y bien estructuradas.

¿Cómo funcionan las etiquetas en HTML?

Las etiquetas HTML son bloques de construcción que definen diferentes partes de una página web. Crean una estructura lógica y ordenada que los navegadores web interpretan para mostrar contenido.

  • Estructura básica: Una página web completa puede estar compuesta por múltiples etiquetas, como <header>, <footer>, y <div>, que estructuran elementos como cabezales, pies de página, y contenedores de contenido.

  • Contenidos anidados: Las etiquetas pueden contener otras etiquetas, lo que permite crear contenido más rico y complejo. Por ejemplo, dentro de un <div> puedes colocar una imagen <img>, junto con un párrafo <p> que describa la imagen.

  • Etiquetas auto-cerradas: Algunas etiquetas, como <img>, no requieren un cierre manual (</img>), ya que se cierran automáticamente.

¿Qué son los atributos en HTML y para qué sirven?

Los atributos proporcionan propiedades adicionales a las etiquetas y especifican detalles sobre cómo deben mostrarse o comportarse.

  • Definición de atributos: Los atributos se escriben dentro de una etiqueta HTML y pueden definir aspectos como el ancho width y la altura height de una imagen:

    <img width="500" height="500" src="MrMichi.jpg">

  • Atributos comunes: Los atributos más frecuentes incluyen src para especificar la fuente de una imagen, href para enlaces, y alt para describir visualmente el contenido de una imagen.

¿Cuáles son las etiquetas básicas que debo conocer?

Aunque HTML ofrece un amplio conjunto de etiquetas, algunas son esenciales para cualquier desarrollador web principiante:

  • Estructurales:

    • <html>: Delimita el inicio y final del documento HTML.
    • <head>: Contiene meta información sobre el documento, como el título.
    • <body>: Encierra el contenido visible, incluyendo texto, imágenes, y otros elementos.

  • Texto:

    • <h1>, <h2>, etc.: Encabezados que organizan y priorizan la información.

  • Multimedia:

    • <img>: Inserta imágenes.
    • <video>: Incorpora contenido de video.

  • Enlaces y listas:

    • <a>: Crea enlaces a otros documentos.
    • <ul>, <ol>, <li>: Forman listas no ordenadas, ordenadas y los ítems de dichas listas.

Con estos elementos, es posible comenzar a formar una comprensión sólida de cómo diseñar y hacer funcional un sitio web utilizando HTML. Con el tiempo y la práctica, los desarrolladores pueden profundizar más en características avanzadas y comenzar a explorar otros lenguajes como CSS y JavaScript para mejorar sus habilidades y conocimientos en desarrollo web.

¿Te gustaría aprender más sobre etiquetado avanzado y ver casos prácticos de HTML? ¡Sigue explorando y no dudes en consultar recursos en línea para ampliar tus conocimientos! ¡El mundo del desarrollo web te espera!