Introducción a HMTL5 y CSS3
https://engineerdesistemas.blogspot.com/2016/10/introduccion-hmtl5-y-css3.html
HTML5 y CSS3 son tecnologías que me permiten ver la web de una forma diferente. Se puede importar directamente audio, video y se puede dibujar vectorialmente con el apoyo de JavaScript. Los efectos son distintos a lo que mostraba la web en años anteriores.
La combinación entre HTML5 y CSS3 hace posible que ya no sea necesario utilizar plugins externos para una vista moderna y agradable al usuario.
La estructura básica de un documento HTML5 es:
Al inicio del documento ahora solo es necesario colocar !DOCTYPE HTML y listo.
Se observan etiquetas principales.
html: indica el inicio y cierre del documento html en sí.
head: es el encabezado de nuestro documento, aquí van las meta-etiquetas adicionales.
body: es el cuerpo del documento html, dentro de esta etiqueta está todo el contenido de nuestra web.
header: es la cabezara principal de nuestro documento.
footer: es el pie de página de nuestro documento.
También podemos introducir una etiqueta nav lo cual nos permite establecer una lista de enlaces de navegación, tal como se muestra en el código:
Finalmente a nuestra estructura inicial y básica la podemos complementar con las siguientes nuevas etiquetas.
section: nos permite diferenciar una sección en nuestro documento.
article: nos permite distinguir un artículo en cuestión en nuestro documento y su título entre etiquetas h2.
aside: nos permite manejar contenido tangencial al documento que estamos trabajando.
El código se mostraría así:
Y el resultado visual en pantalla se muestra así:
La combinación entre HTML5 y CSS3 hace posible que ya no sea necesario utilizar plugins externos para una vista moderna y agradable al usuario.
La estructura básica de un documento HTML5 es:
<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
<header>
<h1>Titulo de la Web</h1>
</header>
Contenido de la web
</body>
<footer>
Pie de pagina
</footer>
</html>
Al inicio del documento ahora solo es necesario colocar !DOCTYPE HTML y listo.
Se observan etiquetas principales.
html: indica el inicio y cierre del documento html en sí.
head: es el encabezado de nuestro documento, aquí van las meta-etiquetas adicionales.
body: es el cuerpo del documento html, dentro de esta etiqueta está todo el contenido de nuestra web.
header: es la cabezara principal de nuestro documento.
footer: es el pie de página de nuestro documento.
También podemos introducir una etiqueta nav lo cual nos permite establecer una lista de enlaces de navegación, tal como se muestra en el código:
<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
<header>
<h1>Titulo de la Web</h1>
<nav>
<ul>
<li>Enlace 1</li>
<li>Enlace 2</li>
<li>Enlace 3</li>
<li>Enlace 4</li>
</ul>
</nav>
</header>
Contenido de la web
</body>
<footer>
Pie de pagina
</footer>
</html>
Finalmente a nuestra estructura inicial y básica la podemos complementar con las siguientes nuevas etiquetas.
section: nos permite diferenciar una sección en nuestro documento.
article: nos permite distinguir un artículo en cuestión en nuestro documento y su título entre etiquetas h2.
aside: nos permite manejar contenido tangencial al documento que estamos trabajando.
El código se mostraría así:
<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
<header>
<h1>Titulo de la Web</h1>
<nav>
<ul>
<li>Enlace 1</li>
<li>Enlace 2</li>
<li>Enlace 3</li>
<li>Enlace 4</li>
</ul>
</nav>
</header>
<section>
Contenido de la web
<article>
<h2>Titulo de articulo</h2>
<p>Contenido</p>
</article>
<aside>
<h3>Contenido tangencial</h3>
<p>Texto texto texto</p>
</aside>
</section>
</body>
<footer>
Pie de pagina
</footer>
</html>
Y el resultado visual en pantalla se muestra así:
