es:web_development:layout:position
This is an old revision of the document!
Table of Contents
Desarrollo Web Lección 5 - Diseño
Posicionamiento forzado
Objetivo
Esta actividad presenta algunas etiquetas HTML predefinidas para estructurar páginas y analiza el uso de 'posición' para forzar su página en un diseño particular.
Pretrabajo
- Cree un nuevo archivo llamado 'layout.html' en su directorio personal.
- En 'layout.html', configure el código HTML básico con un enlace a 'style'css'.
Etiquetas de Diseño Predefinidas
- HTML incluye algunas etiquetas predefinidas para ayudarlo a diseñar su documento. Agregue este código a
<body>de su archivo 'layout.html'.
<header>Encabezado</header>
<nav>Navegación</nav>
<main>Principal</main>
<footer>Pie de página</footer>
- Antes de que nos fijemos demasiado en estas etiquetas, agreguemos algo de CSS para que pueda ver cómo se ve su diseño predeterminado. Agregue el siguiente código a su archivo 'style.css'.
header {
background-color:indianred;
border:darkred solid 2px;
}
nav {
background-color: burlywood;
border:yellow solid 2px;
}
main {
background-color: lightgreen;
border: darkgreen solid 2px;
}
footer {
background-color: lightskyblue;
border: darkblue solid 2px;
}
- Ahora abra 'layout.html' en Live Server y vea cómo se ve. Los colores y los bordes están puramente ahí para que entiendas cómo encajan las piezas en la pantalla. Por lo general, tendrán antecedentes similares.
- Los cuatro elementos llenan la pantalla de izquierda a derecha, envolviendo su contenido firmemente a la izquierda, arriba y abajo y se apilan uno encima del otro en el orden en que los colocamos.
- Puede usarlos para cualquier contenido que desee, pero, por supuesto, es más fácil de seguir para usted y cualquier persona con la que trabaje si los usa con el nombre.
<header>suele ser para el banner en la parte superior de la pantalla que muestra el logotipo y el nombre del sitio.<nav>generalmente se usa para la navegación del sitio debajo del banner o al costado del contenido principal.<main>es donde agregaría el contenido de su página.<footer>es para cualquier cosa que desee en la parte inferior de la página y, a menudo, incluye enlaces de contacto, información sobre la organización e incluso información sobre el diseñador de la página y los derechos de autor.
es/web_development/layout/position.1647531122.txt.gz · Last modified: 2023/08/16 09:33 (external edit)
Except where otherwise noted, content on this wiki is licensed under the following license: CC Attribution-Share Alike 4.0 International
