Introducción a la programación en HTML y CSS, parte 1

Idioma del curso: Disponible en español.

Un sitio web bien diseñado ofrece a los clientes información sobre una empresa, detalles sobre cómo encontrarla o ponerse en contacto con ella, y la posibilidad de realizar compras y pedidos. Las empresas de todos los tamaños pueden usar sitios web para atraer tráfico y llegar a más clientes que nunca.

La base de muchas páginas web —que, en conjunto, forman un sitio web— son los lenguajes de programación HTML y CSS. Aprender a usar estos lenguajes, que se utilizan para crear y dar estilo al contenido de una página web, es un paso importante para crear tus propias páginas web bien diseñadas.

Temas del curso:

Lección 1: Primeros pasos con HTML

TEMA A: Conceptos básicos de HTML

• HTML: información general
• Anatomía de una etiqueta HTML
• Primeros pasos
• Actividad 1-1: Inspeccionar una página web

TEMA B: Elementos básicos de una página web

• La etiqueta de encabezado
• Etiquetas de párrafo y salto de línea
• Etiquetas básicas de formato de texto
• Actividad 1-2: Usar HTML para añadir elementos básicos

TEMA C: Crear listas

• Listas ordenadas
• Listas desordenadas
• Elementos de lista
• Actividad 1-3: Crear una lista HTML
• Resumen
• Preguntas de repaso

Lección 2: Profundizar en HTML

TEMA A: Imágenes en HTML

• La etiqueta de imagen
• Definir una fuente de imagen
• Definir texto alternativo para la imagen
• Tamaño de las imágenes
• Actividad 2-1: Añadir una imagen en HTML

TEMA B: Enlaces en HTML

• Enlazar a otra página web
• Enlaces internos
• Actividad 2-2: Añadir un enlace

TEMA C: Tablas en HTML

• Estructura de una tabla en HTML
• Fila de encabezado de tabla
• Filas de datos de tabla
• Actividad 2-3: Crear una tabla HTML
• Resumen
• Preguntas de repaso

Lección 3: Primeros pasos con CSS 

TEMA A: Conceptos básicos de CSS 

• CSS: hojas de estilo en cascada 

• La etiqueta <style> 

• Tipografía y jerarquía en CSS 

• Actividad 3-1: Crear un área de estilos con la etiqueta <style> 

TEMA B: Colores en CSS 

• Cambiar el color de un elemento de una página web 

• Nombres de colores en CSS 

• Sistema de colores RGB 

• Sistema de colores hexadecimal 

• Color de fondo 

• Actividad 3-2: Añadir colores CSS de distintas maneras 

TEMA C: Uso de identificadores CSS adicionales 

• Uso de nombres de ID en CSS 

• Uso de nombres de clase en CSS 

• Actividad 3-3: Usar un nombre de ID para aplicar estilos 

• Resumen 

• Preguntas de repaso 

Lección 4: Dar estilo al texto con CSS 

TEMA A: Familias tipográficas 

• ¿Qué es una fuente? 

• Uso de la propiedad font-family 

• Con serifa frente a sin serifa 

• Nombres de fuentes 

• Tipos de fuentes adicionales 

• Fuentes alternativas 

• Actividad 4-1: Cambiar la familia tipográfica en CSS 

TEMA B: Tamaño de fuente 

• La propiedad font-size 

• Píxeles 

• EM 

• Actividad 4-2: Cambiar el tamaño de fuente del texto 

TEMA C: Más propiedades de texto CSS 

• La propiedad font-style 

• La propiedad font-weight 

• La propiedad line-height 

• La propiedad text-align 

• Actividad 4-3: Personalizar texto con propiedades adicionales 

TEMA D: Sintaxis abreviada para fuentes 

• Sintaxis abreviada de CSS 

• Sintaxis abreviada de CSS para fuentes 

• Actividad 4-3: Aplicar en la práctica la sintaxis abreviada CSS para fuentes 

• Resumen 

• Preguntas de repaso 

Lección 5: Técnicas avanzadas de estilo con HTML y CSS 

TEMA A: Agrupar elementos 

• ¿Qué es un elemento de agrupación? 

• Formato en línea frente a formato de bloque 

• Actividad 5-1: Usar las etiquetas <span> y <div> para agrupar elementos de una página web 

TEMA B: Dimensiones de los div 

• Ajustar el ancho de un div 

• Ajustar la altura de un div 

• Desbordamiento 

• Actividad 5-2: Ajustar el estilo de un bloque div 

TEMA C: El modelo de caja CSS 

• El modelo de caja CSS 

• Márgenes CSS 

• Bordes CSS 

• Relleno CSS 

• Actividad 5-3: Ajustar el estilo de un bloque div 

• Resumen 

• Preguntas de repaso