Entendido.

Este sitio utiliza cookies para analizar la navegación. Si continúa navegando se entiende que acepta su uso. Ver más detalles.";

Logo

Aprende Web

Crea y diseña tus sitios en la Web.

Mi primera web

Aprender a hacer una sencilla web paso a paso partiendo de cero.


Y ahora tambien aprende a programar en C++ con Aprende Web C++


logo rss RSS. Suscribir canal.

Buscar en Aprende Web

Traducir página

Visita nuestro blog:

bolg.aprende-web.net

y entérate de las novedades o deja un comentario.

Dudas y sugerencias:

aprendeweb@aprende-web.net




Sobre ésta página

Ültima modificación: 29-01-2016.

Visitas este mes: 24

Visitas el mes pasado: 43

logo

Donativos

Si este sitio te parece interesante puedes contribuir con una pequeña aportación.




8. La segunda página (II)

8.2 Estructura de cajas

Etiquetas básicas

Tal como habrás supuesto, lo primero que debemos hacer en el archivo plantilla.html es poner las etiquetas básicas que tiene toda página web. Para ello abriremos el archivo plantilla con el HTML-Kit y escribiremos lo siguiente:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>
<head>
   <title>Plantilla</title>
</head>
<body>

</body>
</html>

Una vez hemos puesto las etiquetas básicas en la página vamos a guardar el archivo. Para ello puedes pulsar en el botón superior derecho, para cerrar el archivo, Te saldrá un cuadro en el que pregunta si quieres guardar los cambios; pulsas en "yes"; o puedes tambien guardar el archivo pulsando en el menu superior en Archivo / Salvar. Si tienes varios archivos abiertos puedes pulsar en Archivo / Salvar Todo para guardarlos todos a la vez; o si quieres guardar en otro archivo y conservar el anterior, pùlsa en Archivo / Salvar Como....

Estructura de la página

Vamos ahora a centrarnos en la estructura que le daremos a la página. La estructura la conseguiremos por medio de cajas o divs; y deberá ser la siguiente:


estructura de la página

Cada caja o recuadro que hemos marcado debemos delimitarla con las etiquetas <div> ... </div> y le pondremos un nombre para especificarlo, de la siguiente manera:

<div id="nombre_etiqueta"> ... </div>

El atributo id="..." es parecido al atributo class="..." que ya usamos en la página anterior; sin embargo cada "id" es único dentro de la página, no pudiendo haber dos con el mismo nombre (texto que se pone entre comillas).

Vamos a insertar los "divs" necesarios en la página para crear la estructura anterior. Para ello abre el archivo plantilla.html con el HTML-Kit y dentro de la etiqueta body escribe lo siguiente (texto en azul):


<body>
<div id="cabecera">
   Esta es la cabecera
</div>
<div id="navegacion">
   Esta será la barra de navegación
</div>
<div id="menu">
   Aquí va el menú
</div>
<div id="contenidos">
   Aqui irán los contenidos.
</div>
<div id="pie">
   Aquí pondremos el pie de página.
</div>
	 
</body>

Como ves cada caja tiene una etiqueta "div id" con un nombre diferente, para poder luego distinguirlas en el código CSS y poder aplicarle estilos diferentes. Las etiquetas "div" se escriben en el mismo orden en que aparecen (de arriba a abajo, y de izquierda a derecha), y les hemos puesto un texto porvisional para poder verlas, ya que si no estarían vacías y no ocuparían nada.

Una vez escrito el código anterior en el editor de textos, guardamos el archivo y miramos los cambios en el navegador.

Tu página Web quedará así: Ver mi Web.

De momento esto no se parece mucho al resultado que pretendemos, pero pronto empezará a cambiar cuando apliquemos estilos y empecemos a rellenar con texto. Empezaremos por dar estilo a las diferentes cajas, y posicionarlas en su sitio. pero eso ya será en los siguientes pasos:


Ir al siguiente paso: la hoja de estilo







Mi primera web

Anterior siguiente ... Siguiente siguiente


imprimir esta página

Página creada por ANYELGUTI.

Sugerencias: aprendeweb@aprende-web.net. Envia un manda un correo

Visita nuestro blog par saber en qué estamos trabajando: Aprende Web Blog

Más sobre anyelguti en http://anyelguti.16mb.com