Este módulo te proporcionare las herramientas fundamentales para comenzar a crear páginas web usando HTML5.

El lenguaje HTML, acrónimo de HyperText Markup Language, es el estándar fundamental para crear y estructurar el contenido de las páginas web. Es el lenguaje utilizado para la creación de documentos en la World Wide Web, y su uso es esencial para cualquier persona interesada en el desarrollo web o el diseño web. A continuación, exploraremos qué es HTML, para qué sirve y cómo se utiliza.

HTML es un lenguaje de marcado utilizado para la creación de páginas web. Se compone de una serie de elementos que se utilizan para estructurar el contenido de una página web, como texto, imágenes, enlaces y otros elementos multimedia. Estos elementos están definidos por etiquetas, que son instrucciones que indican al navegador cómo debe mostrar el contenido.

El un lenguaje de marcado representado con marca de etiqueta. <etiqueta> ….. </etiqueta>.

Por ejemplo, la etiqueta <p> se utiliza para crear un párrafo de texto, mientras que la etiqueta <img> se utiliza para insertar una imagen. Hablaremos más adelante sobre la etiqueta y como combinarla para crear una web sencilla. Mas adelante veremos como mostrar la diferencia entre elemento con marca y elemento sin marca.

HTML sirve para definir la estructura y el contenido de una página web. Permite a los desarrolladores web definir:

• Texto y contenido: Con etiquetas como <h1> a <h6> para encabezados, <p> para párrafos y <a> para enlaces.
• Imágenes y multimedia: Con etiquetas como <img> y <video>.
• Listas: Con etiquetas como <ul> para listas no ordenadas, <ol> para listas ordenadas y <li> para los elementos de la lista.
• Formularios: Con etiquetas como <form>,<input>, <textarea> ,<button>.

Los scripts y estilos básicos también pueden ser añadidos a través de etiquetas HTML, como los casos con <style> para incluir hojas de estilo CSS. presente la mayoría de las veces, el diseño y la funcionalidad de una página web se logran mejor a través del uso de lenguajes como CSS (Hoja de Estilos en Cascada) y JavaScript.

Un archivo HTML es un documento de texto que contiene el código fuente de una página web. Este archivo utiliza el lenguaje de marcado HTML (HyperText Markup Language) para estructurar el contenido de la página, definiendo cómo se presentará en un navegador web. Estos archivos tienen la extensión .html o .htm.

Para ver un archivo HTML, simplemente abre el archivo con un navegador web como Google Chrome, Mozilla Firefox o Safari. Puedes hacer esto haciendo clic derecho en el archivo y seleccionando «Abrir con» o arrastrando el archivo a la ventana del navegador.

Para comenzar a trabajar con HTML5, necesitas un editor de texto simple. Puedes usar herramientas como:

Notepad (Windows)
TextEdit (macOS)
Visual Studio Code
Sublime Text
Atom

Estos son algunos ejemplos de editores de texto que puedes utilizar para escribir código HTML. Para este módulo de curso, puedes comenzar con un editor básico como Notepad o TextEdit.

Un documento HTML sin etiquetas o sin marcas de elementos no tiene sentido en el contexto de HTML, ya que las etiquetas son el núcleo del lenguaje y definen la estructura y el contenido de una página web. Sin etiquetas, no hay HTML. Las etiquetas son los elementos que estructuran el contenido y le dan significado a la página. Sin embargo, si tienes un documento que aparenta no tener etiquetas HTML, el navegador no puede interpretar el contenido de manera significativa, ya que no hay nada que indicar cómo debe presentarse o estructurarse el contenido. El navegador interpretará cualquier texto como texto simple, sin aplicar el formato o la estructura que se esperaría con las etiquetas HTML.

Considera el siguiente ejemplo de texto sin marcas. Crear un documento de texto y guárdalo con la extensión html.
ejemplo: si tienes un archivo llamado index.html con el siguiente contenido:

Este es un ejemplo de texto con espacios consecutivos.

Este es un ejemplo
de texto
con
saltos de linea.

otros párrafo con salto y espacio.

Si abrimos en el navegador index.html el resultado sería:

Como podéis ver, sin marcas, el navegador interpreta el texto como parte de un único párrafo, sin que sirva de nada partirlo en varios párrafos en el editor. No hay ninguna etiqueta HTML, el navegador lo tratará como un solo párrafo de texto sin formato, sin aplicar ningún estilo o estructura adicional. No habrá encabezados, listas, tablas, ni ningún otro elemento HTML, porque no hay etiquetas que definan esos elementos.

Las marcas del lenguaje HTML, también conocidas como etiquetas, son las instrucciones que se utilizan para crear y estructurar el contenido de una página web. Estas etiquetas son elementos que se escriben entre corchetes angulares, como y , y definen cómo se debe mostrar el contenido en un navegador web.

la mayoría de las etiquetas HTML van en parejas:

una marca de apertura y una marca de cierre. La marca de apertura indica el inicio de un elemento, mientras que la marca de cierre indica el final de ese elemento. Ambas marcas usan la misma etiqueta, pero la marca de cierre tiene una barra adicional al principio. Por ejemplo, para crear un párrafo, se utiliza la etiqueta de apertura <p> y la etiqueta de cierre </p> .

Aquí tienes un ejemplo de cómo se vería un párrafo en HTML:

<p>Este es un párrafo.</p> 

Ejemplo de documento con marcas.
Aquí tienes un ejemplo de un documento HTML con marca.

<!DOCTYPE html> 

<html lang="es"> 
<head> 

    <meta charset="UTF-8"> 
    <title>Ejemplo de Página Web</title> 

</head> 
<body> 

    <h1>Título principal</h1> 
    <p>Este es un párrafo de texto.</p> 
    <p>Este es otro párrafo de texto.</p> 

    <ul> 

        <li>Elemento de lista 1</li> 
        <li>Elemento de lista 2</li> 
        <li>Elemento de lista 3</li> 
    </ul> 

    <a href="https://www.inforprograma.net">Enlace a un sitio web externo</a> 

</body> 
</html> 

En este ejemplo, se puede ver cómo se utilizan varias etiquetas HTML para crear una página web básica. La etiqueta < !DOCTYPE html> indica que el documento es un documento HTML. La etiqueta <html> define el documento HTML completo. Dentro de <html>, hay una sección <head> que contiene metadatos como la codificación de caracteres y el título de la página, que puede ver como se muestra el título en la pestaña de navegador, y una sección <body> que contiene el contenido visible de la página.

Dentro de <body>, se puede ver cómo se utilizan las etiquetas <h1>, <p>, <ul>, <li>, <a> para crear un título principal, dos párrafos, una lista no ordenada y un enlace. Cada una de estas etiquetas tiene una marca de apertura y una marca de cierre para indicar el inicio y el fin del elemento correspondiente.

La página resultante en el navegador. Ejemplo de Página Web

El título de la página se mostraría en la barra de título del navegador, mientras que el contenido visible de la página se mostraría en la ventana principal del navegador. El título principal se mostraría en una fuente grande y negrita, seguido de dos párrafos de texto. Luego, se mostraría una lista no ordenada con tres elementos de lista, cada uno en una nueva línea. Finalmente, se mostraría un enlace que, cuando se haga clic, llevará al usuario al sitio web externo especificado en el atributo href.

Como podéis ver la web con elemento de marca, se muestra tal como los estamos definiendo a diferencia de sin marca.

Si bien ya vemos hablado de los que es un documento html y su estructura básica. pero vamos a profundiza con más detalle. cuáles son los componentes básicos que se va a usar siempre en un documento HTML.

Un documento HTML típico consta de tres secciones principales: la declaración de la versión de HTML, la cabecera (head>) que contiene información general sobre el documento, y el cuerpo (body) que describe el contenido del documento. Aunque la declaración de la versión es opcional, se recomienda incluirla para asegurar que el documento se considere completamente correcto. La estructura básica de un documento HTML es la siguiente:

<!DOCTYPE html> 
<html> 
<head> 
    <title>Título del documento</title> 
</head> 
<body> 
    Contenido del documento 
</body> 
</html> 

1. Doctype (Declaración de Tipo de Documento)

• Define la versión de HTML y ayuda al navegador a renderizar el documento correctamente. <!DOCTYPE html>

2. Elemento HTML

• Las etiquetas <html> y </html> son los elementos más importantes en un documento HTML, ya que definen el inicio y el final del documento HTML. Estas etiquetas delimitan el área de contenido HTML de un documento y son las que le dicen al navegador que está comenzando y terminando el documento HTML.

<html lang="es">
... 
</html> 

</html>: Esta es la etiqueta de cierre que marca el final del documento HTML. Debe ir después de todos los contenidos y elementos HTML, cerrando la sección del documento.

3. Encabezado (Head)

• La sección de cabecera de un documento HTML es un bloque de código que se encuentra delimitado por las marcas <head> y </head>. Esta sección contiene información general sobre el documento, como el título, propiedades de estilo, metaetiquetas, enlaces a archivos CSS, scripts, y otros elementos que no se muestran directamente en la página web, pero son esenciales para su funcionamiento y presentación.

 <head> 
  <title>Título del documento</title> 
</head> 

4. Cuerpo (Body) 

• El cuerpo de un documento HTML, delimitado por las marcas <body> y </body>, contiene el contenido principal que se muestra en la página web, como texto, imágenes, enlaces, listas, tablas, formularios, etc.

<body> 
    <h1>Contenido del documento </h1> 
    <p>Texto de ejemplo.</p> 
</body> 

Por los tanto esta sería la estructura básica de cualquier documento HTML. Puede partir de esa plantilla base para empezar a crear tu página HTML.

En HTML, los elementos son los bloques de construcción básicos de una página web. Cada elemento está definido por una etiqueta que encierra el contenido que se desea mostrar o funcionalidad que se desea implementar.

El anidamiento de elementos en HTML se refiere a la estructura jerárquica en la que algunos elementos se encuentran dentro de otros, formando una estructura de árbol. Esta estructura jerárquica permite que los elementos hijos hereden automáticamente las propiedades y estilos del elemento padre. El elemento raíz es el que está en el nivel superior de esta jerarquía y contiene todos los demás elementos del documento HTML. Aunque a veces se puede omitir la marca de cierre de algunos elementos, no es una práctica recomendada debido a que reduce la legibilidad del código.

Los anidamientos de elementos en HTML se refieren a la práctica de colocar elementos HTML dentro de otros elementos HTML. Esto se hace para estructurar el contenido de una página web de manera jerárquica y organizada, permitiendo una mejor representación de la información y facilitando el diseño y la funcionalidad del sitio web. Los elementos anidados son esenciales para crear una estructura lógica y legible del contenido, y permiten que los navegadores y los motores de búsqueda entiendan mejor la relación entre los diferentes bloques de contenido.

Por ejemplo, un elemento <div> puede contener varios elementos <p> (párrafo), y cada uno de estos párrafos puede contener elementos <span> para destacar partes específicas de texto. Aquí tienes un ejemplo de cómo se podría ver esto en el código HTML con anidamiento de elemento:

<div> 
  <p>Este es un párrafo.</p> 
  <p>Este es otro párrafo.</p> 
  <p>Este párrafo contiene <span>texto destacado</span> dentro de él.</p> 
</div> 

En este ejemplo, el div> es el contenedor principal y contiene tres párrafos. Uno de estos párrafos contiene un que destaca el texto «texto destacado». Es importante cerrar correctamente los elementos anidados. En HTML, los elementos deben cerrarse en el orden inverso al que se abrieron, lo que se conoce como la regla FIFO (First In, First Out). Esto significa que el último elemento abierto debe cerrarse primero.

Aquí tienes otro ejemplo para ilustrar esto:

<div> 
  <p>Este es un párrafo.</p> 
  <p>Este es otro párrafo.</p> 
  <p>Este párrafo contiene <span>texto destacado</span> dentro de él.</p> 
</div> 

En este código, primero se abre el <div>, luego se abren los tres párrafos y finalmente se cierran en el orden inverso: el </span>, luego el segundo párrafo, luego el primero y por último el </div>. Es importante seguir estas reglas para que el navegador pueda interpretar correctamente el documento HTML y renderizar la página correctamente. Si no se cierran los elementos de manera adecuada, puede resultar en un comportamiento inesperado en la visualización de la página o en errores de validación del código HTML.

Además, existen elementos vacíos que no tienen contenido ni marca de cierre, como <BR> para salto de línea.

Los atributos en HTML permiten definir propiedades específicas para los elementos, proporcionando información adicional al navegador sobre cómo debe interpretar y presentar ese elemento. Cada propiedad puede tener un valor asignado, y existen valores válidos establecidos para cada una. Aunque algunos elementos no tienen propiedades definidas, muchos otros sí, y para muchas de ellas existen valores predeterminados que se aplican el navegador si no se especifica ningún elemento.

Estos atributos se especifican dentro de la apertura de la etiqueta y generalmente toman la forma de nombre=»valor». Los atributos se utilizan para personalizar el comportamiento o la apariencia de un elemento, y pueden afectar cómo se renderiza en el navegador.

Por ejemplo, el atributo src se utiliza en la etiqueta <img> para especificar la ubicación de una imagen, y el atributo href se utiliza en la etiqueta <a> para especificar la URL a la que se debe redirigir cuando se hace clic en un enlace. Aquí tienes un ejemplo de cómo se podría usar un atributo en HTML:

Ejemplo de atributo:

• Atributos de enlace (href para enlaces, src para imágenes, alt para imágenes alternativas)
• Atributos de estilo (style para aplicar CSS directamente a un elemento)
• Atributos de eventos (onclick, onmouseover para acciones interactivas)
• Atributos de formularios (type, name, value para campos de entrada)

Estos atributos se utilizan dentro de las etiquetas para agregar funcionalidades y personalizar el comportamiento de los elementos en una página web.

Ejemplo de atributo: 

<!DOCTYPE html> 
<html lang="es"> 
<head> 
    <meta charset="UTF-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
    <title>Ejemplo de Atributos en HTML5</title> 
</head> 
<body> 
    <!-- Atributo src para una imagen --> 
    <img src="ruta/a/la/imagen.jpg" alt="Descripción de la imagen"> 
    <!-- Atributo href para un enlace --> 
    <a href="https://www.ejemplo.com" target="_blank">Visitar Ejemplo</a> 
    <!-- Atributo alt para una imagen --> 
    <img src="ruta/a/la/imagen.jpg" alt="Descripción de la imagen"> 
    <!-- Atributo target para un enlace --> 
    <a href="https://www.inforprograma.net" target="_blank">Visitar inforprograma.net</a> 
    <!-- Atributo type para un enlace de estilo --> 
    <link rel="stylesheet" href="ruta/a/el/archivo.css" type="text/css"> 
    <!-- Atributo value para un campo de formulario --> 
    <input type="text" value="Valor inicial"> 
    <!-- Atributo autoplay para un video --> 
    <video src="ruta/a/el/video.mp4" autoplay controls> 
        Su navegador no soporta el elemento video. 
    </video> 
    <!-- Atributo required para un campo de formulario --> 
    <form> 
        <label for="nombre">Nombre:</label> 
        <input type="text" id="nombre" name="nombre" required> 
        <label for="email">Correo electrónico:</label> 
        <input type="email" id="email" name="email" required> 
        <input type="submit" value="Enviar"> 
    </form> 
    <!-- Atributo max y min para un campo de número --> 
    <form> 
        <label for="numero">Número (1-10):</label> 
        <input type="number" id="numero" name="numero" min="1" max="10"> 
        <input type="submit" value="Enviar"> 
    </form> 
    <!-- Atributo placeholder para un campo de texto --> 
    <form> 
        <label for="nombre">Nombre:</label> 
        <input type="text" id="nombre" name="nombre" placeholder="Ingrese su nombre"> 
        <input type="submit" value="Enviar"> 
    </form> 
</body> 
</html> 

En este ejemplo, el atributo src se utiliza para especificar la ubicación de la imagen y el atributo alt se utiliza para proporcionar una descripción alternativa de la imagen. El atributo href se utiliza para especificar la URL a la que se debe redirigir cuando se hace clic en el enlace.

Este código HTML utiliza varios atributos comunes en HTML5, como src, href, alt, target, type, value, autoplay, required, max, min, y placeholder. Cada atributo tiene un propósito específico y facilita la creación de páginas web interactivas.

Es importante cerrar correctamente los atributos y utilizarlos de manera adecuada para que el navegador pueda interpretar correctamente el documento HTML y renderizar la página correctamente. Si no se cierran los atributos de manera adecuada, puede resultar en un comportamiento inesperado en la visualización de la página o en errores de validación del código HTML.

En HTML, los elementos estructurales de bloque y de línea cumplen funciones distintas en la estructuración y presentación del contenido de una página web.

Los elementos estructurales son fundamentales en el diseño y la organización de una página web, ya que definen la estructura principal del contenido y generalmente se colocan en una nueva línea. Pueden contener otros elementos estructurales, de línea y texto. Aquí tienes Algunos ejemplos de elementos estructurales incluyen:

<header>,<nav>, <section>, <article>, <aside>,< footer>, entre otros.

1. <h1> a <h6>: Encabezados de nivel 1 a 6.
   • os encabezados <h1> a <h6> se utilizan en HTML para definir los encabezados de nivel 1 a 6 en una página web. Estos encabezados se utilizan para estructurar el contenido y proporcionar una jerarquía visual al texto, siendo <h1< el encabezado de mayor nivel y <h6> el de menor nivel.

2. <p>: Párrafos.
   • El elemento <p> se utiliza en HTML para definir párrafos en una página web.

3. <div>: Secciones o divisiones.
   • El elemento div> se utiliza en HTML para definir secciones o divisiones en una página web. Este elemento no tiene un significado semántico en sí mismo y se utiliza principalmente para agrupar contenido en bloques para fines de estilo o estructura.
4. <ul>, <ol>,< li>: Listas no ordenadas, ordenadas y listas de items.
   • En HTML, los elementos <ul>,<ol>,< li> se utilizan para crear listas. Estos elementos se utilizan para presentar información en forma de listas y son fundamentales para la estructuración y presentación de contenido en una página web.
5. t<able>: Tablas.
   • Las tablas HTML se utilizan para organizar información en filas y columnas en una página web.
6. <form>: Formularios.
   • Los formularios en HTML se utilizan para recopilar información del usuario.

Ejemplo de Elementos Estructurales.

<!DOCTYPE html> 
<html lang="es"> 
<head> 
    <meta charset="UTF-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
    <title>Ejemplo de Elementos Estructurales</title> 
    <link rel="stylesheet" href="estilos.css"> 
</head> 
<body> 
    <h1>Título de la Página</h1> 
    <div id="contenedor"> 
        <header> 
            <h2>Cabecera de la Página</h2> 
        </header> 
        <nav> 
            <ul> 
                <li><a href="#inicio">Inicio</a></li> 
                <li><a href="#servicios">Servicios</a></li> 
                <li><a href="#contacto">Contacto</a></li> 
            </ul> 
        </nav> 
        <main> 
            <section> 
                <article> 
                    <h3>Artículo Principal</h3> 
                    <p>Contenido principal del artículo.</p> 
                </article> 
            </section> 
        </main> 
        <footer> 
            <p>Pie de página</p> 
        </footer> 
    </div> 
    <script src="scripts.js" defer></script> 
</body> 
</html> 

Estos elementos son esenciales para estructurar el contenido de una página web y garantizar una buena accesibilidad y organización del contenido. facilitando la navegación y la comprensión del contenido por parte de los usuarios y los motores de búsqueda.

Elementos de Línea

Los elementos de línea son útiles, estos elementos no definen estructuras y afectan a una parte concreta del contenido para establecer opciones de formato, crear hipervínculos o insertar objetos. Sólo pueden contener texto y otros elementos de línea. Algunos ejemplos incluyen:

1. <a>: Enlaces.
   • Permite la creación de hipervínculos para dirigir a otra página o recurso.
2. <strong>: Texto fuerte (negrita).
   • Destaca un texto de manera destacada.
3. <em>: Texto énfasis (cursiva).
   • Destaca un texto de manera enfática
4. <br>: Salto de línea.
   • Genera un salto de línea en el texto.
5. <span>:
   • Elemento inline para aplicar estilos o manipulación con JavaScript. Sirve para aplicar estilos o manipulación con JavaScript a una parte específica del contenido.

Ejemplo de Elementos de Línea  

!DOCTYPE html> 
<html lang="es"> 
<head> 
    <meta charset="UTF-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
    <title>Ejemplo de Elementos de Línea</title> 
    <link rel="stylesheet" href="estilos.css"> 
</head> 
<body> 
    <p>Este es un párrafo con <em>énfasis</em> y <strong>negrita</strong>.</p> 
    <p>Otra línea de texto con <a href="#">enlace</a>.</p> 
    <p>Texto con <span style="color: red;">color rojo</span>.</p> 
</body> 
</html> 

Estos elementos son esenciales para dar formato y funcionalidad específica a una parte del contenido en una página web.

Para estructurar el contenido, utilizamos diferentes etiquetas de encabezado y párrafos:

<h1>Título principal</h1>: Es un encabezado de nivel 1, que se utiliza para el título principal de la página. Los encabezados van del
<h1> al <h6>, siendo <h1> el más importante y <h6> el menos importante.

<h2>Subtítulo: </h2> Es un encabezado de nivel 2, que se utiliza para subtítulos o secciones secundarias dentro del contenido principal.
<p>Este es un párrafo. </p>: Es un párrafo de texto. La etiqueta <p> se utiliza para definir un párrafo de texto en una página web.
<p>Otro párrafo. </p>: Otro párrafo de texto, con la misma estructura que el primero.

Ejemplo encabezado y párrafo: 

<!DOCTYPE html> 
<html lang="es"> 
<head> 
    <meta charset="UTF-8"> 
    <title>Mi primera página web</title> 
</head> 
<body> 
    <h1>Título principal</h1> 
    <h2>Subtítulo</h2> 
    <p>Este es un párrafo.</p> 
    <p>Otro párrafo.</p> 
</body> 
</html> 

El resultado visual de este código será una página web con un título principal y dos párrafos de texto, sin estilos adicionales. Los encabezados y párrafos se mostrarán con un espaciado por defecto, y el título se verá en la pestaña del navegador. 

Agregar comentarios en el código

Los comentarios en HTML son una forma de incluir notas o explicaciones en tu código que no se renderizan en el navegador y no se ven en la página web. Son útiles para recordar lo que hace cada parte del código o para dejar notas para otros desarrolladores. Se escriben de la siguiente manera:

<!– Esto es un comentario en HTML –>

Ejemplo de comentario:

<!DOCTYPE html> 
<html lang="es"> 
<head> 
    <meta charset="UTF-8"> 
    <title>Mi primera página web</title> 
</head> 
<body> 
<!-- Este es un comentario que explica el propósito de esta sección --> 
    <h1>Título principal</h1> 
    <h2>Subtítulo</h2> 
<!-- Este es un comentario que explica el propósito de esta sección --> 
    <p>Este es un párrafo.<br>Otra línea dentro del mismo párrafo.</p> 
    <p>Otro párrafo.</p> 
</body> 
</html> 

En este ejemplo, los comentarios están rodeados por <!– y –>. Puedes escribir cualquier texto entre estos símbolos, y los navegadores lo ignorará. Los comentarios pueden tener múltiples líneas también:

Ejemplo de comentario multilinea: 

<!DOCTYPE html> 
<html lang="es"> 
<head> 
    <meta charset="UTF-8"> 
    <title>Mi primera página web</title> 
</head> 
<body> 
<!-- Este es un comentario que explica el propósito de esta sección 
    Este comentario se extiende por varias líneas --> 
    <h1>Título principal</h1> 
    <h2>Subtítulo</h2> 
<!-- Este es un comentario que explica el propósito de esta sección --> 
    <p>Este es un párrafo.<br>Otra línea dentro del mismo párrafo.</p> 
    <p>Otro párrafo.</p> 
</body> 
</html> 

Llegamos al final de este módulo, donde hemos explicado qué es HTML, para qué sirve y cómo crear un documento HTML. También hemos visto con ejemplos la estructura de una página web en HTML y cómo dar formato al texto y estructurar el código con elementos estructurados. Hemos explicado qué son las etiquetas en HTML y hemos utilizado etiquetas como las de encabezado y párrafo. Además, hemos mostrado y explicado qué son los comentarios en HTML y para qué sirven. A partir de la lista de índice de módulos 1 de curso. hemos cubierto estos temas de manera detallada.