Aprende HTML5 con nosotros ! ¿Te sumas? Este tutorial de HTML5 ha sido desarrollado por un grupo de estudiantes de programación, con la intención de compartir sus conocimientos y facilitar el aprendizaje de este lenguaje fundamental para la creación de páginas web.
El tutorial se basa en los apuntes de clase, por lo que podrás seguir paso a paso los conceptos fundamentales de HTML5 de una manera clara y concisa.
Nuestra idea es que a lo largo del tutorial, aprendas por tu cuenta a:
- Estructurar un documento HTML5: Descubrirás los elementos básicos que componen una página web y cómo organizarlos correctamente.
- Crear contenido web: Aprenderás a insertar texto, imágenes, vídeos y otros elementos multimedia en tus páginas.
- Formatear el texto: Conocerás las diferentes etiquetas HTML para dar formato al texto, como negrita, cursiva, títulos y párrafos.
- Enlazar páginas: Aprenderás a crear enlaces entre diferentes páginas web y a abrir recursos externos.
- Crear formularios: Descubrirás cómo crear formularios para que los usuarios puedan interactuar con tu página web.
- Organizar el contenido: Aprenderás a utilizar diferentes etiquetas HTML para organizar el contenido de tu página de manera lógica y visualmente atractiva.
Este tutorial es perfecto para principiantes que quieran aprender HTML5 desde cero. No se requieren conocimientos previos de programación, solo ganas de aprender y practicar.
¿Cómo seguir los tutorial que en general publicamos en este blog?
El tutorial se irá publicando poco a poco, completándolo por partes en este mismo sitio web. Cada parte estará dedicada a un tema específico de HTML5. Para seguir el tutorial, te recomendamos:
- Leer atentamente cada parte del tutorial.
- Practicar los ejemplos que se proporcionan.
- Resolver los ejercicios que se proponen (si los hay).
- Buscar información adicional en internet si lo necesitas.
- No dudes en preguntar si tienes alguna duda.
Como viene siendo habitual, esta mini guía gratuita de HMTL5 la hemos desarrollado un grupo de programadores, tanto por formación académica como hobbie personal. Pero entremos en harina, …
HTML, o HyperText Markup Language, es un lenguaje de marcado que se utiliza para crear páginas web. Es un lenguaje de texto que define la estructura y el contenido de una página web. HTML se utiliza junto con CSS (Cascading Style Sheets) para controlar el aspecto de una página web.
HTML5 es la última versión de HTML. Se introdujo en 2014 y ha introducido una serie de nuevas características y mejoras. Algunas de las nuevas características de HTML5 incluyen:
- HTML5 introduce una serie de nuevos elementos semánticos que proporcionan información sobre el significado del contenido de una página web. Esto hace que las páginas web sean más accesibles para las personas con discapacidades y para los motores de búsqueda.
- Incluye una serie de nuevas características para la incorporación de multimedia en las páginas web, como la capacidad de reproducir vídeos y audio sin plugins adicionales.
- Y nuevas características para mejorar la accesibilidad de las páginas web, como la capacidad de proporcionar descripciones de imágenes para personas con discapacidades visuales.
Para empezar a aprender HTML5, lo primero que necesitas es un editor de texto. Cualquier editor de texto sencillo te servirá, como Notepad o Sublime Text. Una vez que tengas un editor de texto, puedes empezar a crear tu primera página web.
Recopilación de cursos, tutoriales y manuales gratuitos de HTML5
HTML5 está de moda, ahora más nunca es necesario formarse en el nuevo estándar de Internet. Te ofrecemos a continuación una selección con los mejores recursos para aprender HTML5 gratis.
Dicho sea de paso la gran ventaja de desarrollar contenidos dinámicos para web en HTML5 frente a Adobe Flash es que es totalmente gratis.
No será necesario adquirir costosos paquetes de desarrollo web (los clientes Flash si son gratuitos). Además Flash no puede ejecutarse en dispositivos Appel con lo que HTML5 será más universal.
Temas básicos de HTML y HTML5
- Trabajar con tablas:
Videotutoriales de Youtube para empezar (nivel básico):
Empieza a aprender HTML5 a través de estos excelentes videotutoriales …
- Curso de HTML 5 de Jesús Conde en Youtube.
- Curso Práctico de HTML5 de bextlan lugar de bits vectores y píxeles en Youtube.
- Introducción a HTML5 de codigofacilito en Youtube.
Si lo que buscas es profundizar verdaderamente en la programación HTML5 nuestra recomendación pasa por estudiar los siguientes MOOCs:
Microsoft ha apostado fuerte por la difusión de ésta tecnología y nos ofrece diversos cursos, tutoriales y manuales gratuitos en MSDN y microsoftvirtualacademy.com.
Los estudiantes aprenden las funcionalidades y características que forman parte de la especificación HTML5 y las tecnologías que involucran.
También podrán aprender la diferencia entre la sintaxis de HMTL5 y la de HTML4 y/o XHTML 1.0. en msdn.microsoft.com.
Cursos de HTML5, desarrollo web y web mobile de excelente calidad: Excelente noticia para la comunidad iberoamericana Google & Udacity añaden subtítulos en español y portugués a sus cursos. Enlaces a los MOOCs:
- CS253 (Desarrollo web).
- CS256 (Desarrollo de aplicaciones móviles).
Curso online HTML5 App Development Fundamentals de microsoftvirtualacademy.com.
Excelente tutorial en la web, ideal para el autoaprendizaje en la web programacionweb.net que incluye aspectos como:
La descripción de la estructura base del nuevo marcado de etiquetas web, audio, vídeo, canvas, CSS en 3D, georeferenciación, orientación del dispositivo, reconocimiento de voz, manejo de la webcam y del micro.
MOOC: Desarrollo en HTML5, CSS y Javascript de Apps Web, Android, IOS y FirefoxOS* (5.ª ed.) en miriadax.net.
Otro excelente tutorial de HTML5 en w3schools.com.
Recursos gratuitos relacionados.
Manuales y tutoriales de CSS3 en español. Las hojas de estilo en cascada, CSS Cascading Style Sheets, se ocupan del formato de numerosas páginas web.
Actualmente son un estándar en la creación de páginas web, siendo aceptados por la totalidad de los navegadores existentes en mayor o menor grado (iExplorer, Firefox, Safari, Chrome, Opera, …).
Este punto es muy importante para los diseñadores web, ya que sus diseños dependen de las versiones que los navegadores acepten CSS y su grado de compatibilidad.
Cursos y tutoriales gratis de HTML. HTML es el lenguaje de marcas que sirve de base para la creación de páginas web. Define la estructura de documentos para la WWW y su contenido pero no está pensada para definir formatos como los archivos tipo PDF o DOC.
Por este motivo la apariencia de un documento HTML puede variar dependiendo del navegador que utilicemos. Es en este punto donde toma sentido la utilización de técnicas como las hojas de estilo o CSS.
Libros, manuales y cursos abiertos de XHTML. XHTML o eXtensible HyperText Markup Language es una redefinición del HTML basándose en la sintaxis de XML. Genera documentos y contenidos de hipertexto compatibles con XML.
Ejemplos: HTML5
La estructura básica de una página web HTML5 es la siguiente:
HTML
<!DOCTYPE html>
<html lang="es">
<head>
<title>Mi primera página web</title>
</head>
<body>
<h1>Este es el título de mi página web</h1>
<p>Este es el contenido de mi página web</p>
</body>
</html>
Esta página web tiene un título, un encabezado y un párrafo. El título se muestra en la barra de título del navegador. El encabezado es un texto grande que se utiliza para resaltar el contenido de la página. El párrafo es un bloque de texto que proporciona información.
Notas: Si utilizas inteligencias artificiales como Bard o ChatGPT puede solicitarles que entreguen código en HTML para realizar distintas funciones. El resultado es bastante bueno y siempre se puede retocar a mano.
Libros de programación con HTML5
El gran libro de HTML5, CSS3 y JavaScript 3ª Edición por MARCOMBO S.A.
«El gran libro de HTML5, CSS3 y JavaScript guía al lector paso a paso en el desarrollo de sitios y aplicaciones web. Después de leer este libro sabrá cómo estructurar sus documentos con HTML, cómo otorgarles estilos con CSS y cómo trabajar con las más poderosas APIs de JavaScript. Este libro es un curso completo que le enseñará cómo construir sitios webs adaptables y aplicaciones revolucionarias desde cero.
Cada capítulo explora conceptos básicos y complejos de HTML, CSS y JavaScript. La información viene acompañada por ejemplos funcionales que guían al recién iniciado y también al programador experto a través de cada etiqueta, estilo y función incluidos en estos lenguajes.
Este libro incluye:
- Introducción a HTML, CSS y JavaScript.
- Modelos de Caja Tradicional y Flexible.
- Diseño Web Adaptable.
- Vídeo y Audio.
- API Formularios.
- API Canvas, API WebGL, API Web Audio.
- API IndexedDB, API Web Storage, API File.
- API WebSocket, API WebRTC, API Stream.
- API Fullscreen, Ajax Level 2, API Web Workers.
- API Drag and Drop, API History, API Web Messaging.
- API Pointer Lock, API Geolocation, API Page Visibility.
- API TextTrack y más …
Además, en la parte inferior de la primera página del libro encontrará el código de acceso que le permitirá acceder de forma gratuita a los contenidos adicionales del libro en www.marcombo.info.»
HTML5 para Mentes Maestras, 2da Edición: Cómo aprovechar HTML5 para crear sitios web adaptables y aplicaciones revolucionarias por MinkBooks.
«Este libro también se encuentra publicado dentro de la colección «El Gran Libro de…», con el nombre «El Gran Libro de HTML5, CSS3 y JavaScript». Ambas publicaciones comparten el mismo contenido, aunque pueden variar en sus números de edición.
HTML5 para Mentes Maestras guía al lector paso a paso en el desarrollo de sitios y aplicaciones web. Luego de leer este libro sabrá cómo estructurar sus documentos con HTML, cómo otorgarles estilos con CSS, y cómo trabajar con las más poderosas APIs de JavaScript.
Este libro no es solo una introducción a HTML5, es un curso completo que le enseñará cómo construir sitios webs adaptables y aplicaciones revolucionarias desde cero.
Cada capítulo explora conceptos básicos y complejos de HTML, CSS y JavaScript. La información es acompañada por ejemplos funcionales que guían al recién iniciado y también al programador experto a través de cada etiqueta, estilo y función incluidos en estos lenguajes.
El objetivo de HTML5 para Mentes Maestras es acercarlo a la tecnología más avanzada disponible para la Web. Fue desarrollado con el propósito de prepararlo para el futuro, y fue escrito para el genio dentro suyo, para Mentes Maestras.
Aprenda cómo:
- Crear documentos HTML
- Crear hojas de estilos CSS
- Diseñar sitios web con Diseño Web Adaptable (Responsive Web Design)
- Programar en JavaScript
- Crear gráficos en 2D y 3D
- Crear animaciones en 2D y 3D
- Crear video juegos en 2D y 3D
- Llevar a sus aplicaciones a pantalla completa
- Generar audio para sus video juegos
- Crear efectos de audio en 3D
- Tomar fotos con la cámara web
- Crear un sistema para hacer video llamadas
- Transferir datos de un usuario a otro
- Procesar archivos de audio
- Subtitular sus videos
- Crear animaciones con CSS3
Este libro cubre:
- Introducción a HTML
- Introducción a CSS
- Introducción a Javascript
- Modelo de Caja Tradicional y Flexible
- Diseño Web Adaptable (Responsive Web Design)
- API Formularios, API Canvas
- API WebGL y librería Three.js
- API Web Audio, API IndexedDB
- API Web Storage, API File
- API Web Socket, API WebRTC
- API Stream, API FullScreen
- Ajax Nivel 2, API Web Workers
- API Drag and Drop, API History
- API Web Messaging, API Pointer Lock
- API Geolocation, API Page Visibility
- API TextTrack
- y más…»
HTML5: Up and Running por O’Reilly Media. (En inglés, pero es uno de los libros de referencia para aprender a programar HTML5).
«Si no conoce las nuevas funciones disponibles en HTML5, ahora es el momento de averiguarlo. Este libro proporciona información práctica sobre cómo y por qué la última versión de este lenguaje de marcado cambiará significativamente la forma en que se desarrolla para la Web.
HTML5 todavía está evolucionando, sin embargo, los navegadores como Safari, Mozilla, Opera y Chrome ya admiten muchas de sus características, y los navegadores móviles están aún más avanzados.
HTML5: Up & Running lo guía cuidadosamente a través de los cambios importantes en esta versión con muchos ejemplos prácticos, que incluyen marcas, gráficos y capturas de pantalla.
Aprenderá a usar el marcado HTML5 para agregar video, capacidades sin conexión y más, y podrá poner esa funcionalidad a trabajar de inmediato.
- Aprenda nuevos elementos semánticos, como <header>, <footer> y <section>
- Meet Canvas, una superficie de dibujo 2D que puedes programar con JavaScript
- Incruste vídeo en sus páginas web sin complementos de terceros
- Use la geolocalización para permitir que los visitantes de aplicaciones web compartan su ubicación física
- Aproveche la capacidad de almacenamiento local que va mucho más allá de las cookies.
- Cree aplicaciones web sin conexión que funcionen después de desconectar el acceso a la red
- Obtenga información sobre varios tipos de entrada nuevos para formularios web
- Crea tus propios vocabularios personalizados en HTML5 con microdatos.»
Software relacionado con HTML5.
- Google Web Designer es una aplicación web ideal para comenzar a realizar pequeños trabajos en HTML5 de manera asistida. Muy utilizado en el desarrollo y diseños de banners y websites completos.
Esperamos que este tutorial te sea de gran ayuda para aprender HTML5. Tienes enlaces relacionados al pie, gracias por leer nuestros artículos, esperamos vuestros comentarios …
