Scribd
Cargar
38 vistas8 páginas

Laboratorio de HTML5

Este documento describe un taller de introducción a HTML5, cubriendo conceptos básicos como la estructura de documentos, etiquetas comunes y nuevas etiquetas semánticas. Incluye secciones sobre materiales, contenido del taller, prácticas guiadas y un proyecto final para aplicar los conocimientos.

Cargado por

julio246y
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como PDF, TXT o lee en línea desde Scribd
38 vistas8 páginas

Laboratorio de HTML5

Este documento describe un taller de introducción a HTML5, cubriendo conceptos básicos como la estructura de documentos, etiquetas comunes y nuevas etiquetas semánticas. Incluye secciones sobre materiales, contenido del taller, prácticas guiadas y un proyecto final para aplicar los conocimientos.

Cargado por

julio246y
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como PDF, TXT o lee en línea desde Scribd
Está en la página 1/ 8

Taller de HTML5

Este taller tiene como meta dotar a los estudiantes con el conocimiento y la habilidad para
comprender y utilizar HTML5 en la creación de estructuras web eficientes y semánticamente
correctas, capacitándolos para desarrollar sitios web básicos que aprovechen las características
modernas de este lenguaje de etiquetas.

Materiales y Recursos

• Computadoras con acceso a editores de texto como Visual Studio Code o Sublime Text y
navegadores web modernos.
• Acceso a Internet para consultar recursos y documentación.

Contenido del Taller

Parte 1: Introducción a HTML5

El Lenguaje de Marcado de Hipertexto (HTML) ha sido la piedra angular del desarrollo web desde su
creación por Tim Berners-Lee en 1991. Su evolución puede resumirse en las siguientes fases clave:

• HTML Original (1991): Tim Berners-Lee desarrolló HTML para facilitar el intercambio de
documentos e información en el CERN. Inicialmente, HTML era un lenguaje bastante simple, con
capacidad para enlazar documentos y algunas etiquetas básicas para estructurar texto.

• HTML 2.0 (1995): Esta versión se considera la primera estándar de HTML, formalizando muchas
de las prácticas de codificación que ya se utilizaban de facto. Introdujo soporte mejorado para
formularios y tablas.

• HTML 3.2 y 4.01 (1997-1999): Estas versiones trajeron significativas mejoras, incluyendo soporte
para hojas de estilo en cascada (CSS), scripts y multimedia. HTML 4.01 en particular, estableció
muchas de las convenciones que aún hoy son relevantes.

• XHTML (2000): XHTML fue un intento de reformular HTML como una aplicación de XML,
enfocándose en una sintaxis más estricta y en la compatibilidad con los estándares web.
• HTML5 (2014): Desarrollado por el World Wide Web Consortium (W3C) y el Web Hypertext
Application Technology Working Group (WHATWG), HTML5 marcó un hito en la historia de
HTML. Introdujo una amplia gama de nuevas características y capacidades, incluyendo soporte
nativo para contenido multimedia sin necesidad de plugins externos, elementos semánticos
mejorados para estructurar contenido, y nuevas API para soportar aplicaciones web complejas
y juegos. HTML5 fue diseñado con la idea de "una sola web" que pudiera ser accesible en
numerosos dispositivos, desde computadoras de escritorio hasta teléfonos móviles.

La evolución de HTML hacia HTML5 refleja el crecimiento y la expansión de la web desde un sistema
simple de hipertexto a una plataforma compleja y rica para aplicaciones web multimedia y
responsivas.

Estructura Básica de un Documento HTML5

La estructura de un documento HTML5 comienza con la declaración de tipo de documento


(<!DOCTYPE html>), seguida por la raíz <html> que contiene dos secciones principales: <head> y
<body>.

<!DOCTYPE html>: Indica al navegador que el documento es HTML5.

<html>: Elemento raíz que envuelve todo el contenido de la página.

<head>: Contiene metadatos, enlaces a hojas de estilo, y scripts.

<body>: Encierra todo el contenido visible de la página, como texto, imágenes, y enlaces.

Ejemplo:

<!DOCTYPE html>

<html>

<head>

<title>Título de la página</title>

</head>

<body>

<h1>Bienvenidos al Taller de HTML5</h1>

<p>Este es un párrafo introductorio.</p>


</body>

</html>

Parte 2: Etiquetas y su Uso

Etiquetas de Encabezado: <h1> a <h6>

Las etiquetas de encabezado <h1> a <h6> se utilizan para definir títulos y subtítulos, con <h1> como
el más importante y <h6> el menos importante. Estos elementos ayudan a estructurar el contenido
y mejorar la accesibilidad.

Ejemplo

<h1>Encabezado Principal</h1>

<h2>Subtítulo</h2>

Párrafo: <p>

La etiqueta <p> define un bloque de texto como un párrafo, separándolo visualmente de otros
bloques mediante márgenes.

Ejemplo

<p>Este es un ejemplo de párrafo en HTML5.</p>

Enlaces: <a>

La etiqueta <a>, junto con el atributo href, se utiliza para crear enlaces a otras páginas, archivos, o
secciones dentro de la misma página.

Ejemplo

<a href="https://www.ejemplo.com">Visita Ejemplo</a>


Imágenes: <img>

<img> incrusta una imagen en el documento, utilizando el atributo src para especificar la ruta de la
imagen y alt para proporcionar texto alternativo.

Ejemplo

<img src="imagen.jpg" alt="Descripción de la imagen">

Listas: <ul>, <ol>, <li>

<ul> crea una lista no ordenada, <ol> una lista ordenada, y <li> define cada elemento de la lista.

Ejemplo

<ul>

<li>Elemento 1</li>

<li>Elemento 2</li>

</ul>

Divisiones y Span: <div> y <span>

<div> se usa para agrupar bloques de contenido, mientras que <span> se usa para agrupar contenido
en línea, como parte de un texto.

Ejemplo

<div>

<p>Texto dentro de un div.</p>

</div>

<span>Texto destacado</span>
Nuevas Etiquetas Semánticas

<header>, <footer>, <nav>, <section>, <article>, y <aside> son etiquetas semánticas introducidas en
HTML5 que proporcionan información sobre el tipo de contenido que contienen, mejorando la
estructura y accesibilidad del documento.

<article>

<header>

<h1>Título del Artículo</h1>

</header>

<p>Contenido del artículo...</p>

<footer>Autor: John Doe</footer>

</article>

Parte 3: Proyecto Final

Los estudiantes aplicarán lo aprendido construyendo un sitio web básico que conste de varias
páginas, utilizando la estructura, etiquetas y prácticas discutidas.

Recursos de Consulta

Para complementar el aprendizaje y resolver dudas específicas, los estudiantes pueden consultar los
siguientes sitios web:

• MDN Web Docs (Mozilla): Una fuente completa y fiable para aprender sobre HTML5 y
tecnologías web. MDN Web Docs
• W3Schools: Ofrece tutoriales y referencias sobre HTML5, incluyendo ejemplos de código.
W3Schools
• HTML5 Doctor: Un recurso útil que publica artículos, tutoriales y guías sobre HTML5. HTML5
Doctor
• Codecademy: Proporciona cursos interactivos que cubren HTML5 y otras tecnologías web.
Codecademy
• Stack Overflow: Una comunidad de desarrolladores donde puedes hacer preguntas y
compartir conocimientos sobre HTML5 y desarrollo web. Stack Overflow
Estos recursos ofrecen una amplia gama de información, desde conceptos básicos hasta técnicas
avanzadas, y son ideales para estudiantes que deseen profundizar en sus conocimientos de HTML5.

Práctica Guiada

Esta sesión se centra en ejercicios interactivos que permitirán a los estudiantes aplicar de manera
práctica lo aprendido sobre las etiquetas y estructuras de HTML5.

Comenzaremos creando el esqueleto de una página HTML5, explicando el propósito de cada sección
(<!DOCTYPE>, <html>, <head>, <body>).

A continuación, insertaremos diferentes tipos de contenido usando etiquetas como <h1>, <p>, <a>,
<img>, <ul>, y <ol>. Los estudiantes aprenderán a organizar el texto, insertar imágenes y crear listas.

Practicaremos la creación de menús de navegación usando <nav> y <a>, enseñando a los estudiantes
cómo vincular diferentes páginas y secciones dentro de una misma página.

Instruiremos sobre cómo incrustar elementos multimedia como videos y audios utilizando <video>
y <audio>, respectivamente.

Introduciremos las bases de los formularios con <form>, incluyendo entradas de texto, botones y
menús desplegables mediante <input>, <button>, y <select>.

Proyecto

El proyecto es una oportunidad para que se apliquen de manera integral los conocimientos
adquiridos durante el taller en un proyecto realista y completo.

Es necesario que trabajen individualmente para construir un sitio web pequeño pero funcional sobre
un tema de su elección. Este sitio deberá contener al menos:

• Una página de inicio que dé la bienvenida a los visitantes y describa el propósito del sitio.
• Una página sobre que proporcione información detallada sobre el tema o sobre los
creadores del sitio.
• Una página de contacto con un formulario funcional que simule la recopilación de
información de los visitantes.

Criterios del Proyecto

Para el proyecto final de este taller, te invitamos a poner en práctica todo lo aprendido creando tu
propio sitio web. Este sitio será tu lienzo personal donde podrás explorar y experimentar con las
diversas herramientas y conceptos de HTML5 que hemos cubierto. A continuación, te detallo
algunos puntos clave que esperamos ver reflejados en tu proyecto:

• Estructura Semántica: Presta atención a cómo organizas tu contenido. Utiliza las etiquetas
semánticas de HTML5 que hemos discutido, como <header>, <nav>, <section>, <article>,
<aside>, y <footer>, para darle a tu sitio una estructura lógica y accesible.

• Navegación Clara: Quiero que tu sitio no solo sea informativo sino también fácil de explorar.
Asegúrate de que los visitantes puedan moverse sin problemas de una página a otra y encontrar
lo que buscan sin confusiones.

• Elementos Multimedia: Aquí es donde puedes ser realmente creativo. Integra imágenes, videos
o audios que enriquezcan tu sitio y lo hagan más atractivo e interactivo. Recuerda usar las
etiquetas <img>, <video>, y <audio> para incluir estos elementos.

• Formulario de Contacto: Aunque este formulario no necesitará ser funcional (ya que trabajar
con el backend escapa del alcance de este taller), me gustaría ver cómo estructurarías un
formulario para recopilar información de tus visitantes. Utiliza las etiquetas <form> e <input>
para crear un espacio donde los usuarios puedan, por ejemplo, dejar un mensaje o suscribirse a
un boletín.

No te preocupes por hacerlo perfecto; lo más importante es que te diviertas en el proceso y explores
las posibilidades que HTML5 ofrece. Este proyecto es una oportunidad para que experimentes,
aprendas de cualquier desafío que surja y muestres tu creatividad. ¡Estamos ansiosos por ver lo que
crearás!

Recursos de Consulta

Para complementar el aprendizaje y resolver dudas específicas, los estudiantes pueden consultar los
siguientes sitios web:
• MDN Web Docs (Mozilla): Una fuente completa y fiable para aprender sobre HTML5 y
tecnologías web. MDN Web Docs
• W3Schools: Ofrece tutoriales y referencias sobre HTML5, incluyendo ejemplos de código.
W3Schools
• HTML5 Doctor: Un recurso útil que publica artículos, tutoriales y guías sobre HTML5. HTML5
Doctor
• Stack Overflow: Una comunidad de desarrolladores donde puedes hacer preguntas y compartir
conocimientos sobre HTML5 y desarrollo web. Stack Overflow

Estos recursos ofrecen una amplia gama de información, desde conceptos básicos hasta técnicas
avanzadas, y son ideales para estudiantes que deseen profundizar en sus conocimientos de HTML5.

También podría gustarte