ingenieradesistemas
499751083497328
Cargando...

Introducción a HMTL5 y CSS3



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.

Introducción a HMTL5 y CSS3


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

 Introducción a HMTL5 y CSS3


HTML5 y CSS3 6540932414288586043

Publicar un comentario Default Comments

emo-but-icon

Página principal item

Los apuntes en tu correo

Síguenos en Facebook

Apuntes aleatorios