Curso de HTML

Curso de HTML

Grupo Máster Madrid

Curso de HTML
Introducción al diseño web con HTML5

Un poco de historia

Curso de HTML. – Internet nació principalmente con la intención de comunicar información por medio de texto, sin mas pretensiones que la mera difusión de la misma, el desarrollo de un lenguaje de programación que fuese capaz de mostrar esta información en las pantallas de los primitivos internautas era algo que vendría de la mano con la creación de Internet.

Con estas premisas en 1980 el físico Tim Berners-Lee, trabajador del CERN (Organización Europea para la Investigación Nuclear) propuso un nuevo sistema de “hipertexto” se desarrolla una simple versión de HTML propuesta para crear la estructura básica de páginas web, organizar su contenido y compartir información,

Tras finalizar el desarrollo de su sistema de “hipertexto”, Tim Berners-Lee lo presentó a una convocatoria organizada para desarrollar un sistema de “hipertexto” para Internet. Después de unir sus fuerzas con el ingeniero de sistemas Robert Cailliau, presentaron la propuesta ganadora llamada WorldWideWeb (W3).

La primera propuesta oficial para convertir HTML en un estándar se realizó en 1993 por parte del organismo IETF (Internet Engineering Task Force). Aunque se consiguieron avances significativos (en esta época se definieron las etiquetas para imágenes, tablas y formularios) ninguna de las dos propuestas de estándar, llamadas HTML y HTML+ consiguieron convertirse en estándar oficial.

En 1995, el organismo IETF organiza un grupo de trabajo de HTML y consigue publicar, el 22 de septiembre de ese mismo año, el estándar HTML 2.0. A pesar de su nombre, HTML 2.0 es el primer estándar oficial de HTML.

Curso de HTML

A partir de 1996, los estándares de HTML los publica otro organismo de estandarización llamado W3C (World Wide Web Consortium). La versión HTML 3.2 se publicó el 14 de Enero de 1997 y es la primera recomendación de HTML publicada por el W3C.

HTML 4.0 se publicó el 24 de Abril de 1998 (siendo una versión corregida de la publicación original del 18 de Diciembre de 1997) y supone un gran salto desde las versiones anteriores. Entre sus novedades más destacadas se encuentran las hojas de estilos CSS, la posibilidad de incluir pequeños programas o scripts en las páginas web, mejora de la accesibilidad de las páginas diseñadas, tablas complejas y mejoras en los formularios.

El limitado objetivo de HTML motivó a varias compañías a desarrollar nuevos lenguajes y programas para agregar características a la web nunca antes implementadas. Estos desarrollos iniciales crecieron hasta convertirse en populares y poderosos accesorios. Simples juegos y bromas animadas pronto se transformaron en sofisticadas aplicaciones, ofreciendo nuevas experiencias que cambiaron el concepto de la web para siempre.

Java y Flash son claros ejemplos de ello, tecnologías exitosas, masivamente adoptadas y ampliamente consideradas como el futuro de Internet.

La evolución de Internet, el incremento de número de usuarios, y la propia red, que pasará de ser una forma de conectar amantes de los ordenadores a un campo estratégico para los negocios y la interacción social, y algún que otro factor más, evidenciarían en un corto espacio de tiempo las limitaciones de estas dos tecnologías.

La mayor limitación de Java y Flash fue la falta de integración. Su concepción desde el principio como complementos (plug-ins), hizo que ya nacieran con ‘fecha de caducidad’ como lenguajes para el diseño web, al no existir comunicación e integración alguna entre aplicaciones y documentos web.

La falta de integración, preparó el camino para la evolución de Javascript, un lenguaje interpretado incluido en navegadores, claramente era la manera de mejorar la experiencia de los usuarios y proveer funcionalidad para la web.

En cierto punto durante este proceso, se hizo evidente para algunos desarrolladores que ni Java ni Flash podrían proveer las herramientas que ellos necesitaban para crear las aplicaciones demandadas por un número creciente de usuarios. Estos desarrolladores, impulsados por las mejoras otorgadas por los navegadores, comenzaron a aplicar Javascript en sus aplicaciones de un modo nunca visto. La innovación y los increíbles resultados obtenidos llamaron la atención de más programadores. Pronto lo que fue llamado la “Web 2.0” nació y la percepción de Javascript en la comunidad de programadores cambió radicalmente.

Javascript era claramente el lenguaje que permitía a los desarrolladores innovar y hacer cosas que nadie había podido hacer antes en la web. En los últimos años, programadores y diseñadores web alrededor del mundo surgieron con los más increíbles trucos para superar las limitaciones de esta tecnología y sus iniciales deficiencias en potabilidad. Gracias a estas nuevas implementaciones, Javascript, HTML y CSS se convirtieron pronto en la más perfecta combinación para la necesaria evolución de la web

HTML5, como veremos durante todo este Curso de HTML, es una mejora de esta combinación, proponiendo estándares para cada aspecto de la web y también un propósito claro para cada una de las tecnologías involucradas. A partir de ahora, HTML provee los elementos estructurales, CSS se encuentra concentrado en cómo volver esa estructura utilizable y atractiva a la vista, y Javascript tiene todo el poder necesario para proveer dinamismo y construir aplicaciones web completamente funcionales.

Curso de HTML
Novedades en HTML5

HTML5 ha sustituido no sólo HTML 4, sino también XHTML 1 y DOM Nivel 2. Esta versión nos permite una mayor interacción entre nuestras páginas web y el contenido media (vídeo, audio, entre otros) así como una mayor facilidad a la hora de codificar nuestro diseño básico.

Algunas de las nuevas características de HTML5

  • Nuevas etiquetas semánticas para estructurar los documentos HTML, destinadas a remplazar la necesidad de tener una etiqueta <div> que identifique cada bloque de la página.
  • Los nuevos elementos multimedia como <audio> y <video>
  • La integración de gráficos vectoriales escalables (SVG) en sustitución de los genéricos <object>, y un nuevo elemento <canvas> que nos permite dibujar en él.
  • El cambio, redefinición o estandarización de algunos elementos, como <a>, <cite> o <menu>.
  • MathML para fórmulas matemáticas.
  • Almacenamiento local en el lado del cliente.
  • Y otros muchos nuevos APIs que veremos a lo largo de los siguientes capítulos de este Curso de diseño web con HTML5.
Curso Html5
Nuevo estándar Html 5

Curso de HTML
Especificación oficial

La W3C elabora las normas a seguir para la creación de las páginas HTML5. Sin embargo, no es necesario, aunque si recomendable, conocer todas estas especificaciones, escritas es un lenguaje bastante formal, para diseñar páginas con este lenguaje. Las normas oficiales están escritas en inglés y se pueden consultar de forma gratuita aquí

La actualización o el uso del nuevo estándar HTML5 no impide el uso del marcado anterior, ya que los elementos previamente definidas en HTML 4 o Xhtml son totalmente funcionales en HTML5. De hecho apartir de ahora y durante todo el curso no haremos distinciones entre unas y otras.

Curso de HTML
Capitulos

1. Estructura de un documento HTML5


Capitulo 1
HTML5 dispone de una estructura básica clara, bien definida y determinada por etiquetas específicas.

Ver...

2. El elemento head en HTML5


Capitulo 2
El elemento head contiene los metadatos que aportan información extra sobre la página

Ver...

3. El body en HTML5


Capitulo 3
En Html el código entre las etiquetas <body> es el que genera la parte visible para el usuario del documento

Ver...

4. Etiquetas semánticas en HTML5


Capitulo 4
HTML5 provee una serie nuevas etiquetas creadas específicamente para reflejar cada parte de una web.

Ver...

5. Css en Html


Capitulo 5
CSS es un lenguaje que provee estilos visuales a los elementos de un documento HTML.

Ver...

6. Selectores css


Capitulo 6
Los selectores CSS que el selector permiten seleccionar qué elementos en el DOM se le aplica una regla CSS

Ver...

7. Selectores avanzados


Capitulo 7
CSS define otros selectores más avanzados que nos van a permitir simplificar las hojas de estilos

Ver...

8. Pseudoclases en CSS


Capitulo 8
Las pseudoclases se utilizan para proporcionar estilos, pero no a los elementos sino sus diferentes estados.

Ver...

9. Pseudoelementos en CSS


Capitulo 9
Los pseudoelementos, son elementos que no existen en el HTML, pero desde CSS podemos hacer que existan.

Ver...

10. Etiquetas de texto en HTML5


Capitulo 10
Etiquetas de texto en HTML5 el texto es la parte fundamental del contenido de una web y de ahí la importancia de manejar correctamente sus etiquetas

Ver...

11. Enlaces en HTML5


Capitulo 11
Enlaces en HTML5 se crean mediante la etiqueta ‘a’ del inglés “anchor” y su incorporación fue clave en el éxito de HTML

Ver...

12. Imagenes en HTML5


Capitulo 12
Imagenes en HTML5, el manejo de imágenes es parte fundamental del diseño web y HTML5 provee una serie de etiquetas y atributos nuevos para su uso

Ver...

13. Etiqueta picture en HTML5


Capitulo 13
La etiqueta picture en HTML5 es un contenedor usado para especificar múltiples elementos source para una etiqueta específica img contenida en ella

Ver...

14. Figure en HTML5


Capitulo 14
El elemento figure en Html5 representa contenido independiente, a menudo con un título. relacionado con el flujo principal, pero independiente de éste

Ver...

15. Audio y video en HTML5


Capitulo 15
Audio y vídeo en HTML5, En Html5 tenemos a nuestra disposición para la inclusión de contenidos multimedia las etiquetas audio y vídeo

Ver...

16. Listas en HTML5


Capitulo 16
Las Listas en HTML5 nos permiten formatear de distintos modos la información en una web ademas de ser la base de elementos como menús, FAQ,s, glosarios etc

Ver...

17. Tablas en HTML5


Capitulo 17
Las Tablas en HTML5, nos sirven para mostrar contenido tabulado, informes, resultados, listas usuarios etc.. todo esto y mas podemos maquetarlo con tablas.

Ver...

18. Formularios en HTML5


Capitulo 18
Formularios en HTML5 son elementos preparados para recibir datos que introduce el usuario esos datos son enviados y procesados en un servidor o el navegador

Ver...

19. Inputs en html5


Capitulo 19
Inputs en html5 son los elementos esenciales para la recepción de datos. estos controlan el formato y funcionalidades especiales según el tipo de input

Ver...

20. Select en html5


Capitulo 20
Un select en html5, es un elemento que muestra una lista de opciones en un formulario cada una de las cuales serán incluidas dentro de una etiqueta

Ver...

21. Textarea en html5


Capitulo 21
Un elemento textarea en Html5, representa un input para edición muti-línea de texto plano fundamentales para el envío de mensajes hoy veremos su uso.

Ver...