Aprende HTML5 para hacer tus propios diseños web

Crea sitios web usando todo el potencial de HTML5

Created byCarlos Blanco Gómez

Last updated 12/2017

Spanish

What you'll learn

Horas de Vídeo en las que aprenderás más de 38 temas diferentes.
HTML5 e introducción a CSS paso a paso
Estructuración y Maquetación
Multimedia (Audio y Vídeo)
Implementar Tablas, Formularios
Dominaras HTML5.
Construir Páginas Web Estáticas
Prácticas referentes a situaciones con HTML5.
introducción a las APIs de HTML5

Course content

7 sections • 45 lectures • 6h 51m total length

Introducción6:27
Breve introducción al entorno de HTML5.

Atributos6:05
Veremos como utilizar los atributos en las etiquetas de html
Encabezados4:58
Aprederemos para que sirven los encabezamientos, estas etiquetas se utilizar para especificar títulos o subtítulos.
Párrafos3:17
CSS estilo4:58
Trabajaremos con CSS explicaremos algunos propiedades de este lenguaje de programación
Formato6:21
Veremos las etiquetas de HTML que utilizaremos para dar presentación a nuestro textos
Referencias o citas5:43
Aprederemos etiquetas que sirven para presentación de pié de página o anotaciones en un texto.
Comentarios y colores6:27
Como se aplican las etiquetas de comentarios y colores
CSS15:21
Seguimos con un poco de CSS algunas propiedades y como aplicarlo.
Enlaces5:17
Trabajaremos con los enlaces veremos algunas formas de utilizarlos y su estructura
Imagenes16:08
Veremos como manipular las imágenes en HTML
Tablas10:37
Las tablas son utilizadas en la creación de páginas web veremos como utilizarlas y con estructurarlas.
Listas10:40
Aprenderemos los diferentes tipos de listas y su funcionalidad
Elementos de bloque y en línea3:54
Cada elemento HTML tiene un valor de visualización predeterminado según el tipo de elemento que sea. El valor de visualización predeterminado para la mayoría de los elementos es bloque o en línea.
Iframe4:11
Un iframe se usa para mostrar una página web dentro de una página web.
Javascript, rutas y head15:44
Veremos para que sirve la etiqueta javascript, como utilizar las rutas y todos los componentes que se pueden incluir en la etiqueta head.
Layout10:42
Los sitios web a menudo muestran contenido en múltiples columnas (como una revista o un periódico).

HTML5 ofrece nuevos elementos semánticos que definen las diferentes partes de una página web:
<header> -
<nav> -
<section> -
<article> -
<aside> -
<footer> -
<details> -
<summary> -
Veremos todo esto.
Responsive5:09
El diseño web adaptable hace que su página web se vea bien en todos los dispositivos (computadoras de escritorio, tabletas y teléfonos). veremos como hacer responsiva nuestra página.
Elementos de código de computadora4:17
Veremos todos los elementos de HTML para este cometido

Que es un formulario y su estructura15:07
El elemento HTML <form> define un formulario que se utiliza para recopilar la entrada del usuario.
Elementos de un formulario15:29
Describimos todos los elementos de formulario.
Tipos de input21:34
Este capítulo describe los diferentes tipos de entrada para el elemento <input>.
Atributos del input (parte 1)10:44
Veremos todos los atributos que se pueden utilizar en una etiqueta input
Atributos del input (parte 2)12:53
Veremos todos los atributos que se pueden utilizar en una etiqueta input.
Atributos del input (parte 3)8:46
Veremos todos los atributos que se pueden utilizar en una etiqueta input
Atributos del input (parte 4)10:18
Veremos todos los atributos que se pueden utilizar en una etiqueta input

Lo nuevo de HTML en su versión HTML59:47
Los nuevos elementos HTML5 más interesantes son:
Nuevos elementos semánticos como:
<header>, <footer>, <article>, and <section>.
Nuevos atributos de elementos de formulario como número, fecha, hora, calendario y rango.
Nuevos elementos gráficos: <svg> y <canvas>.

Nuevos elementos multimedia: <audio> y <video>.
Canvas12:41
El elemento HTML <canvas> se usa para dibujar gráficos en una página web.
SVG9:23
Google maps7:31
Introducción a la API de google maps

HTML5 vídeo5:57
El elemento HTML5 <video> especifica una forma estándar de insertar un video en una página web.
html5 audio3:30
El elemento HTML5 <audio> especifica una forma estándar de incrustar audio en una página web.
HTML5 plug-ins3:51
El propósito de un complemento es ampliar la funcionalidad de un navegador web.
HTML5 youtube7:07
Anteriormente en este tutorial, ha visto que podría tener que convertir sus videos a diferentes formatos para que se reproduzcan en todos los navegadores.

Convertir videos a diferentes formatos puede ser difícil y tomar mucho tiempo.

Una solución más fácil es dejar que YouTube reproduzca los videos en su página web.

Geolocalización12:18
La API de geolocalización de HTML se utiliza para ubicar la posición de un usuario.
HTML5 Drag and Drop8:25
Arrastrar y soltar es una característica muy común. Es cuando "agarras" un objeto y lo arrastras a una ubicación diferente.

En HTML5, arrastrar y soltar forma parte del estándar: cualquier elemento puede ser arrastrable.
HTML5 Web Storage9:25
Con el almacenamiento web, las aplicaciones web pueden almacenar datos localmente dentro del navegador del usuario.

Antes de HTML5, los datos de la aplicación tenían que almacenarse en cookies, incluidos en cada solicitud del servidor. El almacenamiento web es más seguro y se pueden almacenar grandes cantidades de datos localmente, sin afectar el rendimiento del sitio web.

A diferencia de las cookies, el límite de almacenamiento es mucho mayor (al menos 5 MB) y la información nunca se transfiere al servidor.

El almacenamiento web es por origen (por dominio y protocolo). Todas las páginas, desde un origen, pueden almacenar y acceder a los mismos datos.
HTML5 Web Workers5:24
Al ejecutar scripts en una página HTML, la página deja de responder hasta que finaliza el script.

Un web worker es un JavaScript que se ejecuta en segundo plano, independientemente de otros scripts, sin afectar el rendimiento de la página. Puede continuar haciendo lo que quiera: hacer clic, seleccionar cosas, etc., mientras el trabajador web se ejecuta en segundo plano.
HTML5 Server-Sent Events7:40
Server-Sent Events (Los eventos enviados por el servidor) permiten que una página web obtenga actualizaciones de un servidor.

Creación del proyecto (parte 1)10:26
Creación de página web funcional
Creación del proyecto (parte 2)13:11
Creación de página web funcional
Creación del proyecto (parte 3)10:47
Creación de página web funcional
Creación del proyecto (parte 4)12:54
Creación de página web funcional
Creación del proyecto (parte 5)10:00
Creación de página web funcional
Creación del proyecto (parte 6)10:27
Creación de página web funcional

Requirements

Debes tener el navegador Google Chrome
No necesitas conocimientos HTML
No importa el Sistema Operativo que utilices.
Tener un editor de texto para poder programar

Description

¿Quieres aprender el lenguaje principal para crear paginas web? ¿Eres Principiante o Intermedio en HTML5?

Bienvenido al curso.

HTML5 es la última versión de HTML. El término representa dos conceptos diferentes: Se trata de una nueva versión de HTML, con nuevos elementos, atributos y comportamientos. Contiene un conjunto más amplio de tecnologías que permite a los sitios Web y a las aplicaciones ser más diversas y de gran alcance.

Haremos un estudio completo del lenguaje, dentro de este curso se hará una referencia una leve introducción a las APIs de este lenguaje y al lenguaje de programación CSS.

Who this course is for:

Para principiantes o Intermedios en el mundo del Desarrollo Web y/o buscan mejorar en HTML
No se necesita tener conocimientos acerca de ningún lenguaje Web ni de programación.

Aprende HTML5 para hacer tus propios diseños web

What you'll learn

Explore related topics

Course content

Introdución1 lecture • 6min

HTML18 lectures • 2hr 20min

Formularios7 lectures • 1hr 35min

HTML5 y Graphics4 lectures • 39min

HTML5 media4 lectures • 20min

HTML5 APIs5 lectures • 43min

Proyecto fin de curso6 lectures • 1hr 8min

Requirements

Description

Who this course is for: