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++
RSS. Suscribir canal. Buscar en Aprende Web
Traducir página
Visita nuestro blog:
y entérate de las novedades o deja un comentario.
Dudas y sugerencias:
Sobre ésta página
última modificación: 13-07-2018.
Visitas este mes: 15
Visitas el mes pasado: 13

GRACIAS
Por elegir aprende-web
Aprende-web está diseñado a partir de los lenguajes que aquà mismo se enseñan.
By Anyelguti
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:
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
imprimir esta página
Página creada por ANYELGUTI.
Sugerencias:
aprendeweb@aprende-web.net. Envia un 
Visita nuestro blog par saber en qué estamos trabajando: Aprende Web Blog
Más sobre anyelguti en http://anyelguti.16mb.com