Guia Básica de HTML
El Árbol de HTML (DOM)
HTML no es una lista de comandos, es un árbol genealógico. Cada etiqueta tiene "padres", "hijos" y "hermanos".
El
<body>es el padre de todos los textos.Un
<li>(elemento de lista) es hijo de un<ul>(lista).
2. Atributos: El "ADN" de las Etiquetas
Las etiquetas pueden tener información extra llamada Atributos. Van siempre dentro de la etiqueta de apertura:
<etiqueta atributo="valor">Contenido</etiqueta>
Atributos Globales más importantes:
id: Un nombre único para una etiqueta (como una cédula). No se puede repetir.
class: Un nombre para un grupo de etiquetas (como un equipo de fútbol).
style: Permite poner colores o tamaños directamente (aunque es mejor usar CSS).
3. Estructura Semántica (HTML5)
Antiguamente, todo se hacía con <div>. Ahora, para que Google lea bien tu blog y te posicione mejor (SEO), usamos etiquetas con significado:
<header>: El encabezado (logo, nombre del blog).<nav>: El menú de navegación (el que pusimos en Blogger).<main>: El contenido principal del artículo.<article>: Cada una de tus entradas o posts.<aside>: La barra lateral (widgets, archivos).<footer>: El pie de página (derechos de autor, contacto).
4. Tablas en HTML (Tu Excel en la Web)
Como eres experto en Excel, te gustará saber cómo pasar tus datos a la web. Una tabla se construye fila por fila:
<table>: Inicia la tabla.<tr>: (Table Row) Crea una fila.<th>: (Table Header) Encabezado de columna (negrita).<td>: (Table Data) Celda de datos normal.
Ejemplo de Tabla de Jugadores:
5. Formatos de Texto Especiales
Para darle énfasis a tus textos sin usar CSS:
<strong>Texto</strong>: Negrita (importancia para buscadores).<em>Texto</em>: Cursiva (énfasis).<mark>Texto</mark>: Resaltado tipo marcador amarillo.<br>: Salto de línea simple (no necesita cierre).<hr>: Una línea horizontal divisoria.
6. Multimedia y Enlaces Avanzados
Enlaces que abren en pestaña nueva:
Si no quieres que la gente se vaya de tu blog al hacer clic, usa target="_blank":
<a href="https://google.com" target="_blank">Visita Google</a>
Imágenes con dimensiones:
Controla el tamaño desde el HTML:
<img src="foto-messi.jpg" width="300" height="200" alt="Messi celebrando un gol">
7. EJERCICIO AVANZADO: Crea tu "Bio-Card"
Óscar, intenta crear un archivo HTML que sea como tu tarjeta de presentación digital. Copia esto en tu Bloc de Notas y guárdalo como mi_perfil.html:
¿Por qué esto es útil para ti?
En Blogger: Si entras a "Vista HTML" al escribir un post, puedes pegar ese código de la tabla y se verá perfecta.
En Excel: Puedes exportar datos y darles este formato para que tu blog se vea más profesional que el promedio.
