El diseño de página es la parte del diseño gráfico que se ocupa de la disposición de los elementos visuales en una página. El diseño de página se utiliza para que las páginas web se vean mejor. Establece la apariencia general, la importancia relativa y las relaciones entre los elementos gráficos para lograr un flujo fluido de información y movimiento ocular para lograr la máxima efectividad o impacto.
- los divs tienen una clase/identificación especial asociada con ellos.
<div class = "header"> ..... </div>
<div class = "section"> ..... </section>
<div class = "footer"> ..... </footer>
Información de diseño de página:
- Encabezado: La parte del front-end que se utiliza en la parte superior de la página. La etiqueta <header> se usa para agregar una sección de encabezado en las páginas web.s
Sintaxis:
<header>
<h1> ----- </h1>
<h2> ----- </h2>
----------------
----------------
</header>
- Barra de navegación: La barra de navegación es la misma que la lista del menú. Se utiliza para mostrar la información del contenido mediante hipervínculos. La etiqueta <nav> se usa para agregar la sección de navegación (elementos de navegación) en las páginas web.
Sintaxis:
<nav>
<ul>
<li> ..... </li>
<li> ..... </li>
</ul>
</nav>
- Índice / Barra lateral: contiene información adicional o anuncios y no siempre es necesario agregarlo a la página.
- Sección de contenido: La sección de contenido es la parte central donde se muestra el contenido. La etiqueta <main> se usa para agregar el contenido principal de las páginas web.
- Pie de página: La sección de pie de página contiene la información de contacto y otras consultas relacionadas con las páginas web. La sección de pie de página siempre se coloca en la parte inferior de las páginas web. La etiqueta <footer> establece el pie de página en las páginas web.
Sintaxis:
<footer>
.....
</footer>
Ejemplo:
html
<!DOCTYPE html>
<html>
<head>
<title>Page Layout</title>
<style>
.head1 {
font-size:40px;
color:#009900;
font-weight:bold;
}
.head2 {
font-size:17px;
margin-left:10px;
margin-bottom:15px;
}
body {
margin: 0 auto;
background-position:center;
background-size: contain;
}
.menu {
position: sticky;
top: 0;
background-color: #009900;
padding:10px 0px 10px 0px;
color:white;
margin: 0 auto;
overflow: hidden;
}
.menu a {
float: left;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 20px;
}
.menu-log {
right: auto;
float: right;
}
footer {
width: 100%;
bottom: 0px;
background-color: #000;
color: #fff;
position: absolute;
padding-top:20px;
padding-bottom:50px;
text-align:center;
font-size:30px;
font-weight:bold;
}
.body_sec {
margin-left:20px;
}
</style>
</head>
<body>
<!-- Header Section -->
<header>
<div class="head1">GeeksforGeeks</div>
<div class="head2">A computer science portal for geeks</div>
</header>
<!-- Menu Navigation Bar -->
<nav class="menu">
<a href="#home">HOME</a>
<a href="#news">NEWS</a>
<a href="#notification">NOTIFICATIONS</a>
<div class="menu-log">
<a href="#login">LOGIN</a>
</div>
</nav>
<!-- Body section -->
<main class = "body_sec">
<section id="Content">
<h3>Content section</h3>
</section>
</main>
<!-- Footer Section -->
<footer>Footer Section</footer>
</body>
</html>
Producción:
Navegador compatible:
- Google Chrome
- Borde de Microsoft
- Firefox
- Ópera
- Safari
HTML es la base de las páginas web y se utiliza para el desarrollo de páginas web mediante la estructuración de sitios web y aplicaciones web. Puede aprender HTML desde cero siguiendo este tutorial de HTML y ejemplos de HTML .
Publicación traducida automáticamente
Artículo escrito por rajusinghbhati y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA