¿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)
Creando una página WEB
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á:
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>© 2013 Adaptado por el profesor. Fuente: Fundamentos de HTM5 de IBM.</p>
</footer>
</body>
</html>
Ahora el fichero de estilos css mis-estilos.css
