Curso de HTML 5 – Jose J. Fernández

¡Bienvenido a mi curso de HTML! Es un curso online gratuito con el que aprenderás los fundamentos de la creación de páginas web, desde cero. Aprenderás todo esto:

A crear páginas web en HTML 5.
A crear páginas que funcionan en todos los navegadores y que respetan los estándares.
A estructurar y maquetar semánticamente páginas web en HTML 5.
A presentar y optimizar la información con marcado de Schema.org.
A optimizar el HTML para posicionamiento en buscadores (SEO).
A aplicar criterios básicos de accesibilidad web.
Y mucho más.

Empezar el curso

Información del curso

Conocimientos previos: para este curso voy a asumir que sabes cosas básicas como copiar y pegar texto, guardar ficheros, copiar y pegar ficheros y otras operaciones básicas, pero no necesitas saber nada de informática ni de HTML. Si ya sabes HTML hay algunas cosas que ya sabrás y otras que no, pero en general podrás aprovechar el curso tanto si no sabes nada de desarrollo web como si ya tienes nociones.

Contenidos del curso: el temario está abajo, en esta misma página. Envíame comentarios, correcciones o lo que quieras mediante mi formulario de contacto.

Disponibilidad: el curso está publicado en esta web bajo licencia Creative Commons 4.0 BY-NC-ND.

Índice del curso de HTML

Introducción a HTML
1. Qué es y para qué sirve HTML
2. Dónde escribir el HTML: el editor de texto
3. Dónde ver el HTML: el navegador web
4. Tipos de documento HTML: HTML 5
5. Estructura de un documento HTML 5
Tu primera página en HTML 5
1. Las etiquetas en HTML
  1. Regla #1: las etiquetas se abren y se cierran
  2. Regla #2: etiquetas dentro de etiquetas
  3. Regla #3: atributos de etiquetas
2. Tu primera página
El cabecero de una página en HTML 5
1. La etiqueta <html>
2. Cabecero del documento: la etiqueta <head>
3. Título de la página: etiqueta <title>
4. Codificación: <meta charset="utf-8">
5. Un cabecero mínimo completo
6. Metadatos: la etiqueta <meta>
7. Relaciones con otros documentos: la etiqueta <link>
8. Estilo CSS: la etiqueta <style>
9. Código Javascript: la etiqueta <script>
Estructura: maquetación de una página en HTML 5
1. La etiqueta <body>
2. Pasos previos a la maquetación: wireframing
3. Estructura general de la página: interpreta el wireframe
4. Teoría: las etiquetas de estructura en HTML 5
5. Cabecero: la etiqueta <header>
6. Títulos: las etiquetas <h1>, <h2> y siguientes
7. Navegación: la etiqueta <nav>
8. Bloque de contenido principal: la etiqueta <main>
9. Unidad de contenido independiente: la etiqueta <article>
10. Porción de contenido: la etiqueta <section>
11. Bloques relacionados: la etiqueta <aside>
12. Pie: la etiqueta <footer>
13. Contenedor genérico: la etiqueta <div>
14. Uso de las diferentes etiquetas
15. Errores comunes al maquetar en HTML 5
16. Ejemplo de estructura utilizando todos los elementos
Formato: presentación del texto en HTML 5
1. Párrafos: la etiqueta <p>
2. Negrita y cursiva: las etiquetas <strong> y <em>
3. Enlaces: la etiqueta <a> y el atributo href
4. Direcciones, fechas y horas: las etiquetas <address> y <time>
5. Código: las etiquetas <pre>, <code> y <kbd>
6. Citas: las etiquetas <cite> y <blockquote>
7. Abreviaturas: la etiqueta <abbr>
8. Subíndice y superíndice: las etiquetas <sub> y <sup>
9. Listados
  1. Listas ordenadas: las etiquetas <ol> y <li>
  2. Listas desordenadas: la etiqueta <ol> y <li>
  3. Listas de definición: las etiquetas <dl>, <dt> y <dd>
  4. Listas anidadas
10. Tablas
  1. La etiqueta <table>
  2. Filas en una tabla: la etiqueta <tr>
  3. Cabecero de una tabla y de una fila: las etiquetas <thead> y <th>
  4. Cuerpo de la tabla: las etiquetas <tbody> y <td>
  5. Alterando la forma de las celdas: los atributos colspan y rowspan
11. Texto y CSS: la etiqueta <span> y los atributos class y style
Formularios en HTML 5 (próximamente)
1. La etiqueta <form>
  1. Funcionamiento de un formulario: action, submit y method
  2. El atributo action
  3. El atributo method: post y get
Elementos multimedia en HTML 5 (próximamente)
Anexo #1: accesibilidad en HTML 5 (próximamente)
Anexo #2: fragmentos de información y Schema.org (próximamente)
Anexo #3: extensión social de la web (próximamente)
Anexo #4: HTML 5 para SEO (próximamente)