HTML5

Acerca de este curso

Este curso de HTML5 contiene todo el conocimiento que he ido adquiriendo durante mis años de trabajo como maquetador web. Cada vez que encuentro una forma mejor de hacer las cosas, laxº añado a la documentación y ejercicios de este curso, así que está especialmente actualizado

Si quieres dedicarte al desarrollo de páginas web o buscas una forma sencilla de crear una aplicación móvil, HTML5 es sin duda la primera tecnología que debes aprender.

HTML5 es la tecnología más versátil que existe para mostrar y consultar información. Si abandonas el papel y el lápiz para tomar apuntes y te pasas al código HTML5, podrás incrustar vídeos, audios, interactividades de cualquier tipo, y reproducir tu documentación en tu ordenador, imprimirla en papel, verla en tu teléfono móvil, compartirla por whats app… No sólo aprendemos tecnologías web para optar a un trabajo cualificado. Lo hacemos porque es estimulante y porque nos ayuda en nuestro día a día. De forma sencilla, utilizando sólo HTML5 podrás :

  • Tener los apuntes de clase o la documentación específica que necesitas para tu trabajo accesible desde cualquier sitio y para cualquier persona, con exactamente el diseño que necesitas.
  • Hacer tu currículum online con el diseño que tú decidas y disponer de él mediante una dirección de Internet que podrás compartir en cualquier momento.
  • Subir a internet el guión de una obra de teatro que estás estudiando para poder consultarla en cualquier momento.
  • Intentar ganar dinero mediante comisiones en Amazón cuando alguién compre un producto a gracias a una información que ha consultado en una página que tú has hecho.
  • Dar el primer paso en esta apasionante aventura que es el desarrollo tecnológico.

La sugerencia que marca la diferencia

Estás apunto de comenzar una aventura. Una aventura que es tan apasionante como bien se te vaya a dar (quizás por eso a mucha gente no le resulta apasionante…). Te propongo una cosa. De ahora en adelante, haz tus apuntes de HTML y de las materias que estén por venir escribiendo el código en una página web. Haz tus apuntes de HTML escribiendo HTML!. Y cada vez que aprendas algo nuevo, añadelo. No hay ninguna guía mejor que la que te haces tu mismo.

El papel y el lápiz son tan bonitos… pero mientras que no podamos hacer páginas web con ellos, mi recomendación es que tomes notas sobre como hacer páginas web haciendo páginas web.

Así que ya sabes, cuando aprendas a meter imágenes… mete alguna!. Cuando aprendas a poner subyarados, negritas y colores… remarca lo importante. Cuando aprendas a meter enlaces… haz tu propia colección de enlaces de interés. Y así, hasta que realmente tengas unas apuntes tan prácticos y bonitos como estos (aunque si te presto mi foto, serán igual de bonitos 🙂

Módulos

Hojas de estilos

Lecciones

Otras lecciones

Display block, inline, inline-block y float

Los estilos display y float definen cómo se va a comportar un elemento con respecto a los que lo rodean. Cada uno de estos estilos define un comportamiento diferente que paso a explicar:

Botonera con submenús

Esta botonera está resuelta de forma similar a como funcionan las botoneras en wordpress. Una botonera (o navbar) es una lista de enlaces.

Newsletter responsive sin media queries

Para maquetar una newsletter no usamos divs. Los divs son una herramienta indispensable para maquetar páginas webs. Sin embargo los lectores de correos funcionan como lo hacían los navegadores hace años.

Ejercicio – display:inline-block y float:left

Como ampliación al video en el que explicaba la teoría del display block, inline, display inline-block y float left, os muestro como resolver este ejercicio que se plantea típicamente cuando estamos maquetando

Cómo usar media queries

Por qué y cómo usar media queries. Este es uno de los ejercicios que propongo en clase para aprender a hacer páginas responsives.

Tutorial introductorio de Flexbox

Con estos estilos podremos fácilmente colocar las cosas que antes estaban en vertical, en horizontal, y viceversa, cambiar el orden y tamaño de las columnas, etc.

Ejemplo de maquetación con HTML

Este es de los primeros ejercicios del curso de html. Es un ejercicio básico y sencillo, en el que si te fijas, si intentas descomponer la web en rectángulos (en div), verás que hay un div que contiene toda la página y que dentro de este rectángulo contenedor hay varios rectángulos que se van colocando en horizontal

Ejercicio CSS

Vamos a ver como maquetar letras dándole estilos a los span. Un span es lo mismo que un div, pero tiene el estilo display con valor inline. Esto significa que el contenido del span se pondrá en línea (en horizontal)con el resto texto.

Mostrar un icono de precarga

Este video corresponde a la sección de lecciones adicionales del curso de diseño de páginas web con HTML5 y CSS disponible en esta web.

Reseteadores de estilos

stos estilos definen un comportamiento por defecto de la etiqueta, que en muchas ocasiones no nos viene bien. A veces quisiéramos que los párrafos estuviesen más juntos y debemos eliminar el margin-bottom.

Aviso Legal | Política de privacidad