CURSO BÁSICO DE HTML

 

Guía Maestra Definitiva: HTML5 + CSS3 (Estructura y Diseño)

1. Fundamentos: ¿Qué es HTML?

HTML (HyperText Markup Language) es el lenguaje de marcado que define la estructura de la web.

  • No es programación: No tiene lógica; es un sistema de etiquetas para clasificar contenido.

  • Hipertexto: Enlaces que conectan el mundo.

  • Marcado: Etiquetas que le dicen al navegador qué está viendo.

Analogía del Cuerpo Humano:

  • HTML (Huesos): El esqueleto que sostiene la información.

  • CSS (Piel/Ropa): El diseño, colores y disposición visual.

  • JavaScript (Músculos/Nervios): El movimiento y la interacción.

2. Etiquetas de Estructura Global

Estas etiquetas organizan el documento, pero no siempre son visibles.

  1. <!DOCTYPE html>: Indica que usamos HTML5. Su función es evitar que el navegador use reglas de renderizado antiguas que rompan el diseño.

  2. <html>: El contenedor raíz. El atributo lang="es" es vital para que Google y los lectores de pantalla sepan que el sitio está en español.

  3. <head>: La "mente" de la página. Contiene metadatos, el título y los enlaces a archivos CSS.

  4. <body>: El "cuerpo". Aquí vive todo lo que el usuario ve (textos, imágenes, videos).

3. Etiquetas de Texto y Jerarquía

Su función es dar orden y sentido a la lectura.

  • <h1> a <h6>: Títulos. Regla SEO: Solo debe haber un <h1> por página (el título principal). Los demás son subsecciones.

  • <p>: Párrafos. El navegador les da un margen automático para facilitar la lectura.

  • <strong>: Negrita. Función técnica: Indica al navegador que el texto es importante.

  • <em>: Cursiva. Indica énfasis en el tono de voz.

  • <hr>: Crea una línea horizontal para separar temáticas.

Estilo CSS para texto:

Etiquetas y Propiedades de Diseño (El "Look")

Para modificar el aspecto, usamos propiedades que se pueden aplicar mediante el atributo style="" en HTML o en una hoja de estilos externa.

A. Tamaño de la Fuente (font-size)

  • Función: Define qué tan grande se verá el texto.

  • Unidades comunes: px (píxeles) para tamaño fijo, o em/rem para tamaños relativos.

  • Ejemplo: <p style="font-size: 20px;">Texto grande</p>

B. Color de la Fuente (color)

  • Función: Cambia el color del texto.

  • Formatos: Nombres (red), Hexadecimal (#FF0000) o RGB (rgb(255,0,0)).

  • Ejemplo: <h1 style="color: darkred;">Título Importante</h1>

C. Fondo (background-color)

  • Función: Pinta el área detrás del contenido. Es vital para resaltar bloques o secciones.

  • Ejemplo: <div style="background-color: yellow;">Este bloque resalta</div>

D. Tipografía (font-family)

  • Función: Define el estilo de la letra (Arial, Verdana, Times New Roman).

  • Ejemplo: <p style="font-family: Arial;">Letra sin remates</p>

CSS
h1 { color: #0047AB; font-family: Verdana; text-align: center; }
p { font-size: 16px; color: #333333; line-height: 1.5; }

4. Multimedia y Enlaces (Vinculación)

Aquí es donde conectamos archivos externos.

A. Enlaces (<a>)

  • href: Ruta de destino.

  • target="_blank": Abre en pestaña nueva.

  • download: Fuerza la descarga de archivos (PDF, Excel).

  • Anclas (id): Si pones <h2 id="tema1">, puedes saltar ahí con <a href="#tema1">.

B. Imágenes (<img>)

Etiqueta de auto-cierre.

  • src: Origen de la imagen.

  • alt: Función vital: Texto alternativo para accesibilidad y SEO.

C. Videos (<video>)

  • controls: Obligatorio para ver botones de Play/Pausa.

  • <source>: Define el archivo de video.

Estilo CSS para multimedia:

CSS
img { border-radius: 10px; border: 2px solid #ddd; }
video { width: 100%; max-width: 500px; }

5. Organización (Tablas y Listas)

Listas

  • <ul>: Lista desordenada (viñetas).

  • <ol>: Lista ordenada (pasos 1, 2, 3).

  • <li>: Cada elemento de la lista.

Tablas (Función Excel)

  • <table>: El contenedor.

  • <tr>: Fila de la tabla.

  • <th>: Celda de encabezado (negrita).

  • <td>: Celda de dato normal.

Estilo CSS para tablas:

CSS
table { width: 100%; border-collapse: collapse; background: white; }
th, td { padding: 10px; border: 1px solid #808080; }
th { background-color: #333; color: white; }

6. Contenedores y Código (Para tu Blog)

  • <div>: Una caja de bloque. Se usa para agrupar secciones (Layout).

  • <span>: Contenedor en línea. Se usa para resaltar una palabra dentro de un párrafo.

  • <pre> y <code>: Fundamentales. Permiten mostrar código de Python sin que se ejecute y respetando los espacios.

Estilo CSS para código:


CSS
pre { background: #222; color: #fff; padding: 15px; border-radius: 5px; overflow-x: auto; }
code { font-family: 'Courier New', monospace; }

7. Interacción (Formularios)

  • <form>: Define la zona de ingreso de datos.

  • <label>: El nombre del campo.

  • <input>: El cuadro donde el usuario escribe.

    • type="email": Valida que tenga un "@".

    • type="submit": El botón de enviar.

8. Ejercicio Completo Integrado (Copia y Prueba)

Este código une todo tu contenido con el diseño CSS:

HTML
<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <title>Mi Página Avanzada de Recursos</title>
    <style>
        /* CSS GENERAL */
        body { background-color: #f0f0f0; font-family: Arial, sans-serif; margin: 40px; }
        h1 { color: darkred; border-bottom: 2px solid darkred; }
        .caja-codigo { background: #222; color: #00FF00; padding: 15px; border-radius: 8px; }
        
        /* CSS TABLAS */
        table { width: 100%; border-collapse: collapse; background: white; margin: 20px 0; }
        th, td { padding: 12px; border: 1px solid #ccc; text-align: left; }
        th { background: #333; color: white; }
        tr:nth-child(even) { background: #f9f9f9; } /* Efecto cebra como Excel */

        /* CSS FORMULARIO */
        input[type="email"] { padding: 10px; width: 250px; border-radius: 5px; border: 1px solid #ccc; }
        button { background: #2ECC71; color: white; padding: 10px 20px; border: none; cursor: pointer; border-radius: 5px; }
    </style>
</head>
<body>
    <h1>Catálogo de Recursos: Excel y Python</h1>
    <p>Este texto es <strong>azul</strong> (si lo pones en style) y mide 18px.</p>

    <table>
        <tr>
            <th>Recurso</th>
            <th>Enlace/Vista</th>
        </tr>
        <tr>
            <td>Imagen de Ejemplo</td>
            <td><img src="https://via.placeholder.com/100" alt="Ejemplo" width="100"></td>
        </tr>
        <tr>
            <td>Manual Python</td>
            <td><a href="manual.pdf" download>Descargar PDF</a></td>
        </tr>
    </table>

    <h3>Ejemplo de código en Python:</h3>
    <pre class="caja-codigo"><code>
import pandas as pd
def saludar():
    print("Hola, bienvenidos a mi blog")
saludar()</code></pre>

    <h3 style="margin-top: 20px;">Video de Presentación</h3>
    <video width="320" controls>
        <source src="movie.mp4" type="video/mp4">
        Tu navegador no soporta videos.
    </video>

    <hr>
    <form>
        <label>Suscríbete para recibir tips de Excel:</label><br><br>
        <input type="email" placeholder="tu@correo.com">
        <button type="submit">Enviar</button>
    </form>
</body>
</html>

Comentarios

Publicar un comentario

Entradas populares de este blog

Tutorial Básico de Excel

  Manual Maestro de Excel: De Cero a Pro (Nivel Básico e Intermedio) 1. Anatomía Profunda de la Interfaz Para dominar Excel, primero debemos conocer el "tablero de mandos": Cinta de Opciones: Es la barra superior donde están todas las herramientas (Inicio, Insertar, Fórmulas, etc.). Cuadro de Nombres: Ubicado a la izquierda de la barra de fórmulas. Te dice en qué celda estás (ej. A1 ) y sirve para saltar rápidamente a una celda específica. Barra de Fórmulas: Es el espacio alargado en la parte superior. Aquí es donde realmente ves lo que hay dentro de una celda (una fórmula), mientras que en la celda solo ves el resultado. Etiquetas de Hojas: En la parte inferior puedes crear nuevas hojas haciendo clic en el signo (+) . Puedes cambiarles el nombre haciendo doble clic sobre ellas. 2. Gestión y Formato de Datos Profesionales No basta con meter datos; deben ser legibles. Tipos de Datos y Alineación Texto: Siempre se alinea a la izquierda . Números: Siempre se alinean a la d...
Leer más

El mejor Campocorto del Historia fuera de Cooperstown

Imagen
  Omar Enrique Vizquel González   ( Caracas , 24 de abril de 1967) es un ex campocorto   venezolano  que inició su carrera de beisbolista en los  Leones de Caracas  en Venezuela y que jugó en las  Grandes Ligas de Béisbol  con los  Seattle Mariners  (1989-93),  Cleveland Indians  (1994-2004),  San Francisco Giants  (2005-2008), con los  Texas Rangers  (2009),  Medias Blancas de Chicago  (2010-2011) y  Toronto Blue Jays  (2012). Después de firmar un contrato de Ligas Menores con los  Toronto Blue Jays , a sus 45 años de edad, se mantuvo como jugador activo en las Grandes Ligas, mejorando los registros que lo consolidan como uno de los mejores  campocortos  defensivos de todos los tiempos, el 3 de octubre de 2012 se retiró de las Grandes Ligas, siendo esta su última temporada como jugador profesional. Estadísticas avanzadas de por vida Temporada Team LG PA TB XBH HBP SAC SF B...
Leer más