Want to create interactive content? It’s easy in Genially!

Get started free

Microcurso: Introducción al Html

Templates 🎨

Created on April 30, 2025

Un microcurso gratuito para introducirte al mundo del HTML. Perfecto para educación online, clases interactivas y desarrollo web. Instrucciones didácticas e innovadoras, con recursos creativos. Edita y personaliza esta plantilla para una experiencia de aprendizaje dinámica y práctica.

Start designing with a free template

Discover more than 1500 professional designs like these:

Essential Business Proposal

Project Roadmap Timeline

Step-by-Step Timeline: How to Develop an Idea

Artificial Intelligence History Timeline

Microlearning: Teaching Innovation with AI

Microlearning: Design Learning Modules

Video: Responsible Use of Social Media and Internet

Explore all templates

Transcript

Microcurso

Introducción al HTML

EDITA O ELIMINA ESTA LOCUCIÓN

¿Qué vas a aprender?

En este microcurso descubrirás los fundamentos de HTML (Hyper Text Markup Language), el lenguajeque da estructura a las páginas web. Al finalizar esta píldora serás capaz de:

  • Identificar las etiquetas más comunes de HTML.
  • Comprender la estructura básica de una página web.
  • Escribir código HTML sencillo para crear contenido web.

Conceptos básicos

Información extra dentro de una etiqueta (ej. href en <a>).

Lenguaje de marcado para estructurar páginas web.

Elemento que indica el tipo de contenido (ej. <p> para un párrafo).

HTML

Etiqueta

Atributo

Editor de código

Aplicación para escribir HTML (ej. VS Code, Sublime Text).

Programa que interpreta el HTML y muestra la web.

Navegador

Cada etiqueta en HTML es una pequeña pieza que encaja en el puzzle de una página web.

Estructura de una página HTML

Toda página HTML tiene una estructura básica como esta:

<!DOCTYPE html> <html> <head> <title> Mi primera web</title> </head> <body> <h1> ¡Hola mundo! </h1> <p> Este es mi primer sitio web.</p> </body> </html>

12345678910

Funciones de las etiquetas

  • <h1> Título principal
  • <p> La etiqueta párrafo se usa para definir un párrafo de texto
  • <h1> a <h6> Encabezados jerárquicos
  • <p> Párrafos
  • <strong> Texto en negrita
  • <em> Texto en cursiva o enfatizado

Dar formato al texto

Insertar enlaces e imágenes

Ahora vamos a descubrir las etiquetas que nos permiten crear enlaces y mostrar imágenes. <a href="URL"> Crea un enlace a otra página. <a href="https://genially.com"> Visita Genially</a> <img src = "archivo" alt="texto"> Muestra una imagen. <img src="logo.png" alt= "Logo de mi sitio">

Pon a prueba lo aprendido hasta ahora

Información adicional dentro de una etiqueta que modifica su comportamiento. Ejemplo: href en un enlace define la URL de destino.

Parte de una página HTML donde se coloca todo el contenido visible para el usuario, como textos, imágenes, enlaces o listas.

Elemento del código HTML que indica cómo debe mostrarse un contenido. Siempre va entre < >.Ejemplo: <p> para un párrafo.

Etiqueta

Body

Atributo

¿Qué hemos aprendido?

✅ Qué es HTML y para qué sirve. ✅ Qué son etiquetas, atributos y elementos. ✅ Cómo se estructura una página web. ✅ Cómo escribir texto, enlaces e imágenes con HTML.

¡Ya estás listo para empezar a crear tus propias páginas web básicas!

<!DOCTYPE html> define el tipo de documento<html> contiene todo el contenido<head> incluye datos invisibles como el título<body> contiene el contenido visible

Enlaces: consejos y buenas prácticas

  • Usa enlaces descriptivos: evita “haz clic aquí”, mejor “Descubre más recursos sobre HTML”.
    • Puedes abrir un enlace en una nueva pestaña con<a href="URL" target="_blank">Texto</a>
  • Puedes enlazar a secciones de la misma página usando anclas<a href="#seccion1">Ir a Sección 1</a>