Guía para principiantes a: Creación de páginas web HTML5 / CSS3

Este artículo es parte de nuestra "serie de tutoriales de HTML5 / CSS3", dedicada a ayudarlo a ser un mejor diseñador y / o desarrollador. Haga clic aquí para ver más artículos de la misma serie.

HTML5 y CSS3 han barrido la web por asalto en solo 2 años. Antes de ellos ha habido muchas semánticas alteradas en la forma en que se espera que los diseñadores web creen páginas web, y con su llegada vienen muchos apoyos asombrosos como medios alternativos, etiquetas estilo XML y atributos de entrada progresivos para que los diseñadores web logren soñador características como animación.

Aunque la mayoría de los desarrolladores parecen mostrar demostraciones potenciales pero complicadas, HTML5 / CSS3 no son realmente ciencia espacial, y te guiaré por el proceso de relajación para construir una página web estándar HTML5 / CSS3 con una explicación completa y exhaustiva y tada. Bonos como recursos de aprendizaje y plantillas HTML5 gratuitas están disponibles para ti, ¡así que aprovecha esta oportunidad para comenzar tu viaje HTML5!

Cambios entre HTML4 y HTML5

Es posible que se pregunte por qué es tan importante cambiar a HTML5. Hay infinidad de razones, pero principalmente porque trabajará con los estándares globales de Internet como cualquier otro diseñador. De esta forma, encontrará más soporte en línea y sus sitios web se mostrarán correctamente en navegadores modernos que se mejoran constantemente.

(Fuente de la imagen: W3C)

La comparación entre HTML4 y HTML5 es difícil de detectar a nivel de superficie. Al ver el nuevo borrador de HTML5, puede ver los elementos destacados y los procedimientos corregidos de manejo de errores. Los desarrolladores de navegadores han disfrutado específicamente de las nuevas especificaciones para renderizar páginas web predeterminadas.

Lo que es más de HTML5 es la conversión de nuestro navegador web moderno. Con estas nuevas especificaciones, la web en su conjunto ahora se ve como una plataforma de aplicaciones para construir HTML (especialmente HTML5), CSS y JavaScript. Además, este sistema crea elegantemente la armonía entre los diseñadores web y los desarrolladores al establecer estándares comunes que todos los navegadores deberían seguir.

Además, se han creado muchos elementos para representar los medios digitales de la nueva era . Éstas incluyen

Esqueleto desnudo HTML5

Encuentro que la forma más fácil de entender cualquier tema es sumergirse en él . Así que construiré una plantilla de esqueleto HTML5 muy básica para una página web. Incluí algunos de los elementos más nuevos, que espero categorizar un poco más tarde.

 Bienvenido, ¡todos! 
un poco de contenido aquí.
pero algunos aquí también!

De inmediato, esto no es muy diferente de una página web HTML4 estándar. Lo que puede notar es que no necesitamos incluir más etiquetas de cierre automático . Estas son realmente buenas noticias, ya que ahorrarán mucho tiempo de sus proyectos de desarrollo.

Para aquellos que no saben, en los borradores XHTML había muchos elementos etiquetados de cierre automático . Esto terminaría con una barra inclinada antes del operador "mayor que" para indicar que no necesitaría incluir otra etiqueta de cierre en otro lugar. Como ejemplo, para crear una etiqueta meta keywords que usaría sin la necesidad de un cierre en otra parte.

Esta regla todavía se aplica en HTML5. ¡Pero ahora ni siquiera necesitas la barra transversal adicional ! es completamente válido, aunque se le permite continuar usando el estándar XHTML / XML. Para todos los navegadores compatibles con estándares, ambos elementos se procesarán de la misma manera.

Definiendo nuestras áreas de página

La mayoría de nuestro nuevo código no debería ser demasiado impactante. Nuestro doctype es hilarantemente más simple que nunca, no hay necesidad de atributos corporales excesivos, y la información en nuestro encabezado está claramente etiquetada. Continuando me gustaría centrar su atención en el contenido dentro de nuestro etiqueta. Esto incluye toda la estructura de la página principal. He utilizado algunas lindas etiquetas HTML para indicarles cómo puede incluirlas en su propio trabajo.

Primero verá que toda la página está encapsulada dentro de una etiqueta div . Lo he etiquetado con una ID de contenedor, lo que significa que envuelve todo el contenido de nuestro sitio web. Esto es útil para establecer un ancho máximo o contenido de posición en la pantalla. A continuación, he dividido la página en 3 elementos principales: uno