4.19. Introducción a HTML: estructura básica, etiquetas y atributos: Modelo Box
Página 23 | Escuchar en audio
Introducción a HTML: estructura básica, etiquetas y atributos: Modelo de Caja
HTML, que significa lenguaje de marcado de hipertexto, es el lenguaje de marcado estándar para crear páginas web y aplicaciones. Junto con CSS y JavaScript, HTML es una tecnología fundamental utilizada por la mayoría de los sitios web para crear páginas web visualmente atractivas, interfaces de usuario para aplicaciones web e interfaces de usuario para muchas aplicaciones móviles.
Estructura básica de HTML
Un documento HTML está estructurado como un libro: tiene un encabezado y un cuerpo. El encabezado, contenido dentro de las etiquetas <head>, normalmente contiene metainformación sobre el documento, incluido el título que se muestra en la barra de título del navegador. El cuerpo, contenido dentro de las etiquetas <body>, contiene el contenido principal del documento HTML.
A un nivel más detallado, la estructura básica de un documento HTML consta de elementos HTML anidados. Un elemento HTML se define mediante una etiqueta de inicio, algo de contenido y una etiqueta de cierre. Por ejemplo, un párrafo, que está representado por la etiqueta <p>, se puede escribir de la siguiente manera: <p>Este es un párrafo.</p>.
Etiquetas y atributos HTML
Las etiquetas HTML indican el tipo de elemento que se inserta, como un encabezado (<h1> a <h6>), un párrafo (<p> ), una lista (<ul> o <ol> con elementos de lista <li>) o un enlace (<a> ).
Los atributos HTML proporcionan información adicional sobre los elementos. Vienen en pares de nombre y valor y se colocan dentro de la etiqueta de inicio del elemento. Por ejemplo, el elemento de enlace tiene un atributo href que indica la URL a la que conduce el enlace: <a href="https://www.example.com">Este es un enlace</a>.
Modelo Caja
En diseño web, un modelo de caja es un cuadro que rodea cada elemento HTML. Consiste en márgenes, bordes, relleno y el contenido real. Esta plantilla permite a los desarrolladores controlar el diseño y la posición de los elementos HTML en una página.
- Contenido: Esta es el área donde aparecen el texto y las imágenes.
- Relleno: Esta es el área alrededor del contenido, dentro del borde. El relleno aumenta el tamaño de la caja.
- Borde: Esta es el área fuera del relleno. El borde rodea el relleno y el contenido.
- Margen: Esta es el área fuera del borde. El margen es transparente y separa el cuadro de los cuadros circundantes.
Comprender el modelo de caja es fundamental para poder crear diseños complejos y responsivos. Es la base de casi todo el diseño CSS y es uno de los conceptos fundamentales para entender cómo funciona CSS.
En conclusión, HTML es un lenguaje de marcado esencial para el desarrollo web. Permite a los desarrolladores crear estructuras complejas y significativas con sus etiquetas y atributos, mientras que el modelo de caja permite un control preciso sobre la disposición y el diseño. Comprender estos conceptos es el primer paso para convertirse en un desarrollador front-end competente.
Ahora responde el ejercicio sobre el contenido:
¿Qué es el Modelo Caja en diseño web?
¡Tienes razón! Felicitaciones, ahora pasa a la página siguiente.
¡Tú error! Inténtalo de nuevo.
Siguiente página del libro electrónico gratuito:
24Introducción a HTML: estructura básica, etiquetas y atributos: Posicionamiento en CSS
5 minutos
¡Obtén tu certificado para este curso gratis! descargando la aplicación Cursa y leyendo el libro electrónico allí. ¡Disponible en Google Play o App Store!
