HTML

¿Qué es HTML?

HTML (HyperText Markup Language) es el lenguaje estándar para estructurar el contenido de las páginas web. No es un lenguaje de programación propiamente dicho, sino un lenguaje de marcado: su función es indicar al navegador qué es cada elemento —un título, un párrafo, una imagen, un enlace— y cómo debe organizarse en pantalla.

Tabla de etiquetas HTML

Tag Descripción Ejemplo Video
<html> Raíz del documento <html></html> No
<head> Metadatos del documento <head></head> No
<body> Contenido visible <body></body> No
<h1> - <h6> Encabezados jerárquicos <h1>Título</h1> No
<p> Párrafo de texto <p>Texto</p> No
<a> Enlace o ancla <a href="#">Link</a> No
<img> Imagen <img src="img.jpg"> No
<div> Contenedor de bloque <div>Contenido</div> No
<span> Contenedor en línea <span>texto</span> No
<ul> Lista desordenada <ul><li></li></ul> No
<ol> Lista ordenada <ol><li></li></ol> No
<li> Elemento de lista <li>Item</li> No
<table> Tabla de datos <table></table> No
<tr> Fila de tabla <tr></tr> No
<td> Celda de datos <td>Dato</td> No
<th> Celda de encabezado <th>Header</th> No
<form> Formulario <form></form> No
<input> Campo de entrada <input type="text"> No
<button> Botón interactivo <button>OK</button> No
<section> Sección temática <section></section> No
<article> Artículo independiente <article></article> No
<header> Encabezado de sección <header></header> No
<footer> Pie de sección <footer></footer> No
<nav> Navegación <nav></nav> No
<br> Salto de línea <br> No
<hr> Línea horizontal <hr> No
<strong> Texto importante <strong>Texto</strong> No
<em> Énfasis <em>Texto</em> No
<video> Video embebido <video></video> Ver
<audio> Audio embebido <audio></audio> No
<canvas> Dibujo gráfico <canvas></canvas> No

CSS

¿Qué es CSS?

CSS (Cascading Style Sheets) permite dar estilo a las páginas web, controlando colores, diseño, tipografía y distribución. Es el lenguaje que transforma la estructura HTML en interfaces visualmente atractivas.

Sintaxis básica

selector {
            propiedad: valor;
            }

Tipos de selectores

Selectores Simples

p { }  /* Elemento */
                     .clase { }      /* Clase */
                     #id { }         /* ID */
                     * { }           /* Universal */

Combinadores

div p { }       /* Descendiente */
div > p { }     /* Hijo directo */
h1 + p { }      /* Adyacente */
h1 ~ p { }      /* Hermano general */

Pseudoclases

a:hover { }
li:nth-child(2) { }
p:not(.activo) { }
input:focus { }

Pseudoelementos

p::before { }
p::after { }
p::first-line { }
p::first-letter { }

Selectores de Atributo

input[type="text"] { }
a[href] { }
img[alt] { }
[class^="btn"] { }

Formas de insertar CSS

Externo

<link rel="stylesheet"
      href="css/style.css">

Interno

<style>
  p { color: red; }
</style>

Inline

<p style="color: red;">
  Texto
</p>

Propiedades CSS más utilizadas

Propiedades de texto y fuente

Propiedad Descripción Ejemplo Video
color Color del texto color: #2c3e50; No
font-size Tamaño de fuente font-size: 16px; No
font-family Tipo de letra font-family: Arial; No
font-weight Grosor del texto font-weight: bold; No
text-align Alineación horizontal text-align: center; No
text-decoration Decoración de texto text-decoration: underline; No
line-height Altura de línea line-height: 1.5; No
letter-spacing Espacio entre letras letter-spacing: 2px; No
text-transform Transforma texto text-transform: uppercase; No

Propiedades de fondo y color

Propiedad Descripción Ejemplo Video
background-color Color de fondo background-color: #3498db; No
background-image Imagen de fondo background-image: url(img.jpg); No
background-size Tamaño del fondo background-size: cover; No
background-repeat Repetición del fondo background-repeat: no-repeat; No
background-position Posición del fondo background-position: center; No

Propiedades de modelo de caja

Propiedad Descripción Ejemplo Video
margin Espacio externo margin: 10px; No
padding Espacio interno padding: 20px; No
border Borde del elemento border: 1px solid #000; No
width Ancho del elemento width: 100%; No
height Alto del elemento height: auto; No
box-sizing Modelo de caja box-sizing: border-box; No
overflow Control de desbordamiento overflow: hidden; No

Propiedades de posicionamiento y layout

Propiedad Descripción Ejemplo Video
display Tipo de visualización display: flex; No
position Tipo de posicionamiento position: relative; No
top / left / right / bottom Posición específica top: 10px; No
flex-direction Dirección de flex flex-direction: row; No
justify-content Alineación horizontal justify-content: center; No
align-items Alineación vertical align-items: center; No
gap Espacio entre elementos gap: 20px; No

Características avanzadas

Transiciones

transition: all 0.3s ease;
                    transition: transform 0.5s;

Permiten animar cambios de propiedades CSS suavemente.

Animaciones

@keyframes fadeIn {
                               from { opacity: 0; }
                                 to { opacity: 1; }
}
.elemento {
  animation: fadeIn 1s;
}

Crea animaciones complejas con fotogramas clave.

Media Queries

@media (max-width: 768px) {
  body {
    font-size: 14px;
  }
}

Adapta el diseño a diferentes tamaños de pantalla.

Especificidad en CSS

#header { }   /* 1-0-0 */
.menu { }     /* 0-1-0 */
nav { }       /* 0-0-1 */

Determina qué regla se aplica cuando varios selectores compiten por el mismo elemento. El orden de prioridad es: ID, clase y elemento.

Unidades de medida (px, em, rem, %)

font-size: 16px;    /* Absoluta */
width: 2em;          /* Relativa al padre */
font-size: 1.5rem;   /* Relativa a la raíz */
width: 50%;          /* Porcentaje */

Definen el tamaño de los elementos de forma fija o adaptable según el contexto del diseño.

Flexbox o Grid (conceptos básicos)

.contenedor {
  display: flex;       /* o grid */
  justify-content: center;
  align-items: center;
}

Sistemas de diseño modernos para organizar elementos en filas, columnas o cuadrículas de forma flexible.