HTML - de Cero a Profesional

Conceptos Básicos de HTML

Anatomía de un documento HTML

Imagina que un documento HTML es como una receta de cocina. En la receta, tienes diferentes partes que describen los ingredientes y los pasos a seguir para preparar un plato. De manera similar, un documento HTML está dividido en diferentes partes que describen el contenido y la estructura de una página web.

1. Etiqueta <html>: Esta es la etiqueta principal que envuelve todo el contenido de la página. Es como el libro de recetas en el que se encuentra toda la información.

2. Etiqueta <head>: Dentro de esta etiqueta, se incluyen metadatos sobre la página, como el título que aparece en la pestaña del navegador, enlaces a hojas de estilo CSS, scripts JavaScript y otras configuraciones importantes que no se muestran en la página.

3. Etiqueta <title>: Esta etiqueta define el título de la página que se muestra en la pestaña del navegador. Es como el título de la receta que ves en el libro de recetas.

4. Etiqueta <body>: Aquí es donde se encuentra todo el contenido visible de la página, como texto, imágenes, enlaces y otros elementos. Es como la lista de ingredientes y los pasos de preparación en una receta.

Dentro del <body>, encontrarás varias etiquetas que describen diferentes partes de la página:

1.  Encabezados (<h1>, <h2>, etc.): Estas etiquetas se utilizan para definir los títulos y subtitulos de la página, como los nombres de las secciones o capítulos en una receta.

2. Párrafos (<p>): Estas etiquetas se utilizan para envolver bloques de texto en la página, como las instrucciones de una receta.

3. Imágenes (<img>) y Enlaces (<a>): Estas etiquetas se utilizan para insertar imágenes y crear enlaces a otras páginas web, como las fotos de los platos terminados en una receta o referencias a otros recursos.

4. Otras etiquetas: Además de estas, hay muchas otras etiquetas que se pueden utilizar en un documento HTML para agregar diferentes tipos de contenido, como listas, tablas, formularios y más. Cada una tiene su propia función y se utiliza para estructurar y dar formato al contenido de la página.

				
					<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="description" content="Raspicode">
    <meta name="keywords" content="HTML, CSS, JavaScript">
    <title>RaspiCode</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <header>
        <h1>Bienvenidos a Raspicode</h1>
    </header>
    
    <nav>
        <ul>
            <li><a href="#inicio">Inicio</a></li>
            <li><a href="#acerca">Acerca de</a></li>
            <li><a href="#contacto">Contacto</a></li>
        </ul>
    </nav>
    
    <main>
        <section id="inicio">
            <h2>Sección de Inicio</h2>
            <p>Bienvenidos a mi página web. Aquí encontrarás información interesante sobre diferentes temas.</p>
            <img decoding="async" src="imagen.jpg" alt="Imagen de inicio">
        </section>
        
        <section id="acerca">
            <h2>Acerca de Nosotros</h2>
            <p>Somos un equipo apasionado por crear contenido web y compartir nuestros conocimientos con el mundo.</p>
        </section>
        
        <section id="contacto">
            <h2>Contáctanos</h2>
            <p>Si tienes alguna pregunta o comentario, no dudes en ponerte en contacto con nosotros.</p>
            <form action="enviar.php" method="post">
                <label for="nombre">Nombre:</label>
                <input type="text" id="nombre" name="nombre">
                <label for="email">Email:</label>
                <input type="email" id="email" name="email">
                <label for="mensaje">Mensaje:</label>
                <textarea id="mensaje" name="mensaje"></textarea>
                <button type="submit">Enviar</button>
            </form>
        </section>
    </main>
    
    <footer>
        <p>&copy; 2024 Mi Página Web</p>
    </footer>
</body>
</html>

Etiquetas, elementos y atributos HTML

Imagina que estás construyendo con bloques de LEGO. Cada bloque tiene su forma y función específica, y puedes combinarlos de diferentes maneras para construir algo nuevo y emocionante. En HTML, las etiquetas son como esos bloques de LEGO.

1. Etiquetas: Las etiquetas son como los bloques de LEGO individuales. Cada etiqueta tiene un nombre y se utiliza para definir diferentes partes de una página web, como títulos, párrafos, imágenes, enlaces, etc. Por ejemplo, <h1> se usa para crear un título principal, <p> para un párrafo de texto, <img> para una imagen, <a> para un enlace, y así sucesivamente.

2. Elementos: Los elementos HTML están formados por una o más etiquetas y el contenido que está dentro de esas etiquetas. Por ejemplo, un elemento de título (<h1>) podría contener el texto «Mi Título», y un elemento de párrafo (<p>) podría contener el texto «Este es un párrafo de ejemplo». En resumen, un elemento HTML es una combinación de una etiqueta de apertura, el contenido y una etiqueta de cierre, cuando es necesario.

3. Atributos: Los atributos proporcionan información adicional sobre una etiqueta o elemento HTML. Piensa en ellos como etiquetas opcionales que puedes agregar para dar más detalles o controlar el comportamiento de la etiqueta. Por ejemplo, en la etiqueta <img>, el atributo src se utiliza para especificar la ruta de la imagen que se mostrará, y el atributo alt se utiliza para proporcionar un texto alternativo para la imagen en caso de que no se pueda cargar.

Recursos