Introducción
HTML CSS Basics es uno de los primeros conceptos que cualquier persona debe aprender al comenzar su camino en el desarrollo web. Antes de explorar JavaScript, frameworks modernos o aplicaciones web complejas, es fundamental comprender cómo funcionan HTML y CSS. Estas dos tecnologías son la base de prácticamente todos los sitios web que existen en Internet.
HTML proporciona la estructura de una página web, mientras que CSS se encarga de su diseño y apariencia visual. Juntos permiten crear páginas atractivas, organizadas y adaptables a diferentes dispositivos. Si eres un principiante, dominar estos fundamentos te facilitará el aprendizaje de tecnologías más avanzadas en el futuro.
En esta guía aprenderás qué son HTML y CSS, cómo trabajan juntos, sus etiquetas y propiedades más importantes, las mejores prácticas y algunos consejos para comenzar a desarrollar sitios web profesionales.
¿Qué es HTML?
HTML significa HyperText Markup Language (Lenguaje de Marcado de Hipertexto). Es el lenguaje utilizado para estructurar el contenido de una página web.
Con HTML puedes crear:
- Encabezados
- Párrafos
- Imágenes
- Enlaces
- Tablas
- Formularios
- Listas
- Videos
- Botones
En otras palabras, HTML define qué elementos aparecerán en una página.
Estructura básica de un documento HTML
Todo documento HTML comienza con una estructura similar a esta:
<!DOCTYPE html>
<html>
<head>
<title>Mi Primera Página</title>
</head>
<body>
<h1>Hola Mundo</h1>
<p>Este es mi primer sitio web.</p>
</body>
</html>
Cada etiqueta tiene una función específica para organizar el contenido correctamente.
¿Qué es CSS?
CSS significa Cascading Style Sheets (Hojas de Estilo en Cascada).
Mientras HTML crea la estructura, CSS agrega el diseño visual.
Con CSS puedes modificar:
- Colores
- Tipografía
- Tamaño del texto
- Márgenes
- Espaciado
- Fondos
- Bordes
- Sombras
- Animaciones
- Diseño responsive
Sin CSS, todas las páginas web tendrían una apariencia muy simple.
Ejemplo:
h1{
color: blue;
font-size:40px;
}
Este código cambia el color del encabezado a azul y aumenta su tamaño.
¿Cómo trabajan juntos HTML y CSS?
HTML y CSS funcionan como un equipo.
HTML crea los elementos.
CSS decide cómo deben verse esos elementos.
Por ejemplo:
HTML:
<h1>Bienvenido</h1>
CSS:
h1{
color:red;
text-align:center;
}
Resultado:
Un título rojo y centrado.
Principales etiquetas HTML
Encabezados
Los encabezados organizan el contenido.
<h1>Título Principal</h1>
<h2>Subtítulo</h2>
<h3>Otro subtítulo</h3>
Se utilizan desde <h1> hasta <h6>.
Párrafos
<p>Este es un párrafo.</p>
Los párrafos contienen la mayor parte del contenido de una página.
Enlaces
<a href="https://example.com">Visitar sitio</a>
Permiten navegar entre diferentes páginas.
Imágenes
<img src="imagen.jpg" alt="Descripción">
La propiedad alt mejora la accesibilidad y el SEO.
Listas
Lista ordenada:
<ol>
<li>HTML</li>
<li>CSS</li>
</ol>
Lista desordenada:
<ul>
<li>HTML</li>
<li>CSS</li>
</ul>
Formularios
Los formularios recopilan información del usuario.
<form>
<input type="text">
<input type="email">
<button>Enviar</button>
</form>
Selectores CSS
Los selectores indican qué elementos recibirán un estilo.
Selector de etiqueta
p{
color:black;
}
Afecta todos los párrafos.
Selector de clase
.destacado{
color:red;
}
HTML:
<p class="destacado">
Texto importante
</p>
Selector por ID
#menu{
background:black;
}
HTML:
<div id="menu"></div>
Colores en CSS
CSS permite utilizar colores de varias formas.
Nombre:
color:red;
HEX:
color:#FF0000;
RGB:
color:rgb(255,0,0);
RGBA:
color:rgba(255,0,0,.5);
Tipografía
Puedes modificar la fuente.
font-family:Arial;
Tamaño:
font-size:18px;
Negrita:
font-weight:bold;
Cursiva:
font-style:italic;
Márgenes y espaciado
CSS controla el espacio entre elementos.
margin:20px;
padding:15px;
Margin crea espacio exterior.
Padding crea espacio interior.
Bordes
border:2px solid black;
También puedes modificar:
- Color
- Grosor
- Estilo
- Radio
Ejemplo:
border-radius:10px;
Fondos
Agregar un color:
background:#f5f5f5;
Agregar una imagen:
background-image:url("fondo.jpg");
Flexbox
Flexbox facilita la organización de elementos.
display:flex;
También puedes usar:
justify-content:center;
align-items:center;
Es una herramienta muy utilizada en el diseño moderno.
CSS Grid
CSS Grid permite crear diseños complejos.
Ejemplo:
display:grid;
grid-template-columns:1fr 1fr;
Es ideal para páginas con múltiples columnas.
Diseño Responsive
Actualmente los sitios web deben adaptarse a móviles, tabletas y computadoras.
CSS utiliza Media Queries.
@media(max-width:768px){
body{
font-size:16px;
}
}
Esto mejora la experiencia del usuario en pantallas pequeñas.
Buenas prácticas al aprender HTML CSS Basics
Si estás comenzando, sigue estas recomendaciones:
- Escribe código limpio.
- Usa nombres descriptivos para las clases.
- Mantén una buena indentación.
- Evita repetir estilos innecesarios.
- Organiza los archivos correctamente.
- Practica creando pequeños proyectos.
- Aprende la semántica de HTML.
- Haz que tus sitios sean responsive.
Errores comunes de los principiantes
Muchos desarrolladores nuevos cometen errores como:
No cerrar etiquetas.
Utilizar demasiados estilos en línea.
No organizar el código.
No validar formularios.
Ignorar la accesibilidad.
No optimizar imágenes.
No probar el sitio en dispositivos móviles.
Evitar estos errores acelerará tu aprendizaje.
Herramientas recomendadas
Para practicar HTML y CSS puedes utilizar:
- Visual Studio Code
- CodePen
- JSFiddle
- GitHub
- Git
- Chrome DevTools
Estas herramientas son gratuitas y ampliamente utilizadas por desarrolladores profesionales.
Proyecto para practicar
Una excelente manera de aprender consiste en crear un sitio web sencillo con:
- Encabezado
- Menú de navegación
- Imagen principal
- Sección “Sobre Nosotros”
- Galería
- Formulario de contacto
- Pie de página
Este proyecto permite practicar la mayoría de los conceptos básicos.
¿Qué aprender después de HTML y CSS?
Una vez domines estos fundamentos, puedes continuar con:
- JavaScript
- Diseño Responsive avanzado
- Flexbox
- CSS Grid
- Animaciones CSS
- Git y GitHub
- Bootstrap
- Sass
- React
- Desarrollo Backend
Estos conocimientos ampliarán tus oportunidades como desarrollador web.
Conclusión
Aprender HTML CSS Basics es el primer paso para convertirse en desarrollador web. HTML proporciona la estructura de una página, mientras que CSS se encarga del diseño y la presentación visual. Dominar ambos lenguajes te permitirá crear sitios web modernos, organizados y adaptables a cualquier dispositivo.
La práctica constante es la clave del éxito. Comienza con proyectos pequeños, experimenta con nuevas etiquetas y propiedades de CSS, y mejora gradualmente tus habilidades. Con una base sólida en HTML y CSS estarás preparado para aprender tecnologías más avanzadas y construir aplicaciones web cada vez más completas.