¿Qué es maquetar?

  • La maquetación es la distribución de los elementos en nuestra página.
  • La maquetación se realiza utilizando capas (<div>), también llamadas divisiones o contenedores y las etiquetas semánticas de HTML5.
  • La colocación de las capas en la página se realiza a través de CSS3.

¿Cómo Empezar? 

El primer paso es diagramar la estructura, el esqueleto de nuestra pagina:

  • Encabezado (donde irá el logo)  (Header)
  • Barra lateral u horizontal (donde irán los enlaces de navegación) (Navigation)
  • Contenido (Artículos y secciones con texto, imágenes, videos, etc) (Article, section...)
  • Pie de página (créditos, copyrigth) (Footer)

 

Estructura de página HTML

Creando una página WEB

Caso Práctico Caso práctico

Vamo a crear nuestra primera página web utilizando todo lo estudiado hasta ahora.

Para una mejor apariencia de nuestra página vamos a utilizar una hoja de estilos (aunque aún no hemos estudiado los estilos, nos servirá de introducción para el siguiente tema).

La página a crear tendrá la siguiente apariencia

 

La estructura de la página será:

Estructura HTML5

Realizaremos esta actividad utilizando Dreamweaver CC

El proceso a seguir para crear la página será:

1. Crear una carpeta llamada miweb. Aquí almacenaremos la página web, la image y la hoja de estilos css

2. Crea en dreamweaver un nuevo sitio para esta carpeta

3. Crear un nuevo documentos HTML5 y salvarlo como miEmpresa.html

4. Colocar la etiqueta para el tipo de documento:

<!doctype html>
<html lang="es">

5. Las etiquetas de la cabecera:

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
     <title>Página Ejemplo de HTML5</title>
     <link rel="stylesheet" href="mis-estilos.css"  />
</head>

 

6. Añade las etiquetas metas que creas oportunas.

7. Las etiquetas del cuerpo <body> y la cabecera principal <header>

<body >
     <header>
          <hgroup>
               <h1>Mi Empresa</h1>
               <h2>Ejemplo Simple de HTML5</h2>
          </hgroup>
     </header>

 

8. Las etiquetas para el navegador <nav>:

<nav>
     <ul>
          <li><a href="#">Inicio</a></li>
          <li><a href="#">Sobre Nosotros</a></li>
          <li><a href="#">Contacto</a></li>
     </ul>
</nav>

 

9. Las etiquetas para el articulo <article> y las secciones <setion> :

<article>
     <header>
          <h1>
               <a href="#" title="Link to this post" rel="bookmark">Cabecera del Artículo</a>
          </h1>
     </header>
     <p> Primum non nocere ad vitam Paramus . . . </p>
     <section>
          <header>
               <h1>Cabecera de la primera sección</h1>
          </header>
          <p>Scientia potentia est qua nocent docentp . . .</p>
     </section>

 

 

<section>
     <header>
          <h1>Segunda sección con mark, aside, menú e imagen</h1>
     </header>
     <p class="next-to-aside"> . . .  <mark>veni, vidi, vici</mark>. Mater . . .</p>
     <aside>
          <p>Esto es un aside con múltiples líneas. . . .</p>
     </aside>
     <menu label="File">
          <button type="button" onClick="JavaScript:alert('Clio . . .')">Clio</button>
          <button type="button" onClick="JavaScript:alert('Thalia . . .')">Thalia</button>
          <button type="button" onClick="JavaScript:alert
		                           ('Urania . . .')">Urania</button>
          <button type="button" onClick="JavaScript:alert
		                           ('Calliope . . .')">Calliope</button>
     </menu> 
     <figure><img src="stonehenge.jpg" alt="Stonehenge" width="200" height="131"/>
          <figcaption>Figure 1. Stonehenge</figcaption>
     </figure>
</section>

 

10.  Añadimos la sección para el vídeo:

<section>
          <header>
               <h1>Sección con vídeo</h1>
          </header>
          <p><video src="http://people.xiph.org/~maikmerten/demos/BigBuckBunny.ogv" 
                                controls autoplay loop>
                <div class="no-html5-video"><p>Este vídeo sólo podrá verse en Mozilla Firefox o Google Chrome. </p>
                </div>
          </video></p>
     </section>
</article>

 

11. Añadimos el pie <footer>:

 <footer>
              <p>&copy; 2013 Adaptado por el profesor. Fuente: Fundamentos de HTM5 de IBM.</p>
          </footer>
     </body>
</html>   

 

 

Ahora el fichero de estilos css mis-estilos.css

Mostrar / Ocultar