fbpx
Volver a Curso

Curso profesional de HTML y CSS.

0% Completado
0/0 Steps
  1. Antes de empezar el curso.

    Grupos y foros.
  2. Módulo 1 - Desarrollo web
    1.1 Sitios Web
    4 Temas
    |
    1 Cuestionario
  3. 1.2 Lenguajes
    4 Temas
    |
    1 Cuestionario
  4. 1.3 Herramientas
    3 Temas
  5. Módulo 2 - HTML
    2.1 Estructura
    5 Temas
    |
    1 Cuestionario
  6. 2.2 Contenido
    6 Temas
    |
    1 Cuestionario
  7. Descargar material 1
  8. Módulo 3 - CSS
    3.1 Estilos
    2 Temas
  9. 3.2 Referencias
    2 Temas
  10. 3.3 Propiedades
    12 Temas
    |
    1 Cuestionario
  11. 4.1 Cajas
    1 Tema
    |
    1 Cuestionario
  12. Módulo 4 - Diseño web
    4.2 Modelo de caja tradicional
    4 Temas
    |
    1 Cuestionario
  13. 4.3 Modelo de caja flexible
    2 Temas
    |
    1 Cuestionario
  14. 5.1 Web móvil
  15. Despedida del curso
  16. Descargar material 2
  17. Descargar material 3
  18. Módulo 5 - Diseño web adaptable
    Proyecto 1 - Netflix
    13 Temas
  19. Final del curso
    Proyecto 2 - Azul Web
    6 Temas
  20. Proyecto final
    2 Temas
  21. Encuesta
Lección Progreso
0% Completado

💸 ¡Impulsa tu carrera en programación!

Descubre nuestros cursos gratuitos con certificación y aprovecha el soporte excepcional que ofrecemos a través de nuestros foros. Al unirte, no solo adquirirás nuevos conocimientos, sino que también formarás parte de una gran comunidad de aprendizaje comprometida y apasionada. ¡Comienza hoy mismo tu viaje en Azul School!

El  lenguaje de Marcas de Hipertexto, HTML por sus siglas en inglés, se compone por un grupo de etiquetas con un nombre rodeado por signos de menor que y mayor que, o como también se le conoce a dichos signos; paréntesis angulares. Los paréntesis angulares delimitan la etiqueta y el nombre define el tipo de contenido que representa. Por ejemplo, la etiqueta <html> indica que el contenido es código HTML. Algunas de estas etiquetas son declaradas individualmente (por ejemplo, <hr>) y otras son declaradas en pares, que incluyen una de apertura y otra de cierre, como <body></body> (en la etiqueta de cierre el nombre va precedido por una barra invertida). 

Las etiquetas individuales y las de apertura pueden incluir atributos para ofrecer información adicional acerca de sus contenidos (por ejemplo, <html lang=”es”>). Las etiquetas individuales y la combinación de etiquetas de apertura y cierre se llaman elementos. Los elementos compuestos por una sola etiqueta se usan para modificar el contenido que los rodea o incluir recursos externos, mientras que los elementos que incluyen etiquetas de apertura y cierre se utilizan para delimitar el contenido del documento, tal como ilustra la siguiente imagen.

Para definir un documento es necesario combinar varios elementos. Dichos elementos son listados en secuencia de arriba abajo y pueden contener elementos dentro de otros elementos. Por ejemplo, el elemento <html> que se muestra en la imagen anterior declara que su contenido debe ser interpretado como código HTML. Por lo tanto, el resto de los elementos que describen el contenido de ese documento se deben declarar entre las etiquetas <html> y </html>. 

Al mismo tiempo, los elementos dentro del elemento <html> pueden incluir otros elementos. El siguiente ejemplo muestra un documento HTML sencillo que incluye todos los elementos necesarios para definir una estructura básica y mostrar el mensaje HOLA MUNDO! en la pantalla.

<!DOCTYPE html>
<html>
<head lang="es">
	<title>Mi primer documento HTML</title>
</head>
<body>
	<p>HOLA MUNDO!</p>
</body>
</html>

En el ejemplo anterior presentamos un código sencillo, pero con una estructura compleja. En la primera línea, se encuentra una etiqueta individual que declara el tipo de documento (<!DOCTYPE html>) seguida por una etiqueta de apertura <html lang=”es”>. Entre las etiquetas <html> y </html> se incluyen otros elementos que representan la cabecera y el cuerpo del documento (<head> y <body>), los cuales a su vez encierran más elementos con sus respectivos contenidos (<title> y <p>), demostrando cómo se compone un documento HTML. Los elementos se listan uno a continuación de otro y también dentro de otros elementos, de modo que se construye una estructura de tipo árbol con el elemento <html> como raíz.

Como ya mencionamos, las etiquetas individuales y de apertura pueden incluir atributos. Por ejemplo, la etiqueta de apertura <html> declarada en el código anterior no está solo compuesta por el nombre html y los paréntesis angulares, sino también por el texto lang=”es”. Este es un atributo con un valor. El nombre del atributo es lang y el valor es se asigna al atributo usando el carácter =. Los atributos ofrecen información adicional acerca del elemento y su contenido. En este caso, el atributo lang declara el idioma del contenido del documento (es por Español).