Índice del curso de HTML5

  1. Introducción
  2. Estructura de una página web
  3. Comentarios
  4. Encabezados y párrafos
  5. Enlaces e imágenes
  6. Listas
  7. Ejercicio resumen de fundamentos de HTML
  8. iframes
  9. Páginas de consulta
  10. Tablas
  11. Estilos en línea
  12. Unidades de medida
  13. Capas
  14. Hacer una NewsLetter con HTML
  15. favicon
  16. Hojas de estilos
  17. Selectores CSS
  18. Algunos estilos de CSS3
    1. Motores de navegación
    2. text-shadow
    3. border-radius, box-shadow
    4. border-image
    5. Ejercicio - background centrado
    6. background-size
    7. Multiple Background & size
    8. background con rgba
    9. Gradientes
    10. Fuentes
    11. columns
    12. Animaciones con transition
    13. text-overflow
    14. transform
  19. GIMP
  20. display:block, inline, inline-block
  21. Margin Collapse
  22. padding y width
  23. Ejercicios de maquetación vertical
  24. Hacer una newsletter responsive sin media queries
  25. img vs background
  26. Flexbox
  27. Algunos tips
    1. Pintar el color de fondo de una línea
    2. Incrustar una imagen
    3. Sangría francesa (hanging intent)
    4. Capitalizar una letra
    5. contenteditable
    6. Soporte para textos asiáticos
    7. wbr - Word Break
  28. Ejercicios de HTML
  29. Break! - gran día de repaso
  30. Links de interés
  31. position
  32. Opacidades
  33. Popups con CSS
  34. Ejercicio - Galería de fotos
  35. Navigation Bar
  36. !important
  37. Páginas reales
  38. Grid Layout
  39. Selectores avanzados de CSS
  40. HTML5: definición y ejemplos
  41. HTML5 vs HTML4
  42. divs semánticos
  43. Video y audio
  44. svg
  45. Formularios
  46. Animaciones con CSS3
  47. Responsive design
  48. Más ejercicios de html
  49. Página de error 404
  50. Insertar el buscador de google
  51. Dominio y alojamiento
  52. Ejercicio - Proyecto
  53. Ejercicio - Clientes y proveedores

Introducción

¿Qué es?

Es la tecnología con la que estás escritas las páginas web. Los navegadores son capaces de leer este lenguaje e interpretarlo para mostrar sus contenidos.

Herramientas de desarrollo

Editores

Software libre
Software de pago

Prototipado

Algunos términos

Páginas estáticas

El cliente solicita una página que se encuentra en el servidor y el servidor envía al cliente la página tal cual la tiene alojada, sin hacerle ninguna modificación en función de la petición del cliente o de cualquier otro parámetro.

html

  • Es un lenguaje de etiquetado.
  • No es case sensitive.
  • html vs htm

HTML vs Dreamweaver

Pantallazo de indeed.com

La web x.0

  • 1.0: la web 1.0 tenía un carácter principalmente divulgativo y unidireccional. Las empresas publicaban documentos eran difíciles de actualizar.
  • 2.0: también denominada "la red social". El usuario inexperto también es una fuente de contenido. Se hacen blogs, wikis, foros, y redes sociales. Es una web colaborativa.
  • 3.0: es la web semántica, la web de la nube, la web de las aplicaciones y la web multidispositivo que hace que "todos estemos conectados". Los tablets, smartphones, coches inteligentes, televisiones, neveras forman parte activa de esta web.

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 :)

gif animado ordenador
icono de mandar un mail¡Contacta conmigo!
Pablo Monteserín
contacta conmigoPablo Monteserín

Para dudas técnicas sobre los ejercicios de mis cursos es necesario estar suscrito.