Creación, Diseño Web de Layouts HTML Avanzados
Tutorial HTML » Diseño Web de Layouts
Elementos y técnicas de diseño layout HTML
Los diseños HTML proporcionan una forma de organizar las páginas web de forma educada, bien estructurada y receptiva, o podemos decir que el diseño HTML especifica una forma en la que se pueden organizar las páginas web. El diseño de la página web funciona con la disposición de los elementos visuales de un documento HTML.
El diseño de la página web es la parte más importante a tener en cuenta al crear un sitio web para que nuestro sitio web pueda parecer profesional con un gran aspecto. También puede usar marcos basados en CSS y JAVASCRIPT para crear diseños para el diseño de sitios web receptivo y dinámico.
Como crear Layout, Diseños HTML - ejemplo
Diseños Layout HTML: uso de DIV, SPAN
El elemento <div>es un elemento de nivel de bloque que se utiliza para agrupar elementos HTML. Mientras que la etiqueta <div> es un elemento de nivel de bloque, el elemento HTML se usa para agrupar elementos a nivel de línea.
Aunque podemos lograr diseños bastante agradables con tablas HTML, las tablas no fueron realmente diseñadas como una herramienta de diseño. Las tablas son más adecuadas para presentar datos tabulares.
v
Nota: este ejemplo utiliza la hoja de estilo en cascada (CSS), por lo que antes de comprender este ejemplo, debe comprender mejor cómo funciona CSS.
<!DOCTYPE html>
<html><head>
<title>HTML Layouts using DIV, SPAN</title>
</head><body>
</html>
<div style = "width:96%; margin-left:auto; margin-right:auto">
<div style = "background-color:#b5dcb3; width:100%; padding-top:12px; padding-bottom:12px; margin-bottom:8px">
<h1>Este es el título principal de la página web</h1>
</div>
<div style = "background-color:#aaa; height:200px; width:150px; float:left; padding:10px;">
<div><b>Menú izquierda</b></div>
HTML<br />
PHP<br />
PERL...
</div>
<div style = "background-color:#eee; height:200px; width:300px; float:left; margin-left:20px; padding:10px" >
<p>Tutoriales técnicos y gerenciales Tutoriales técnicos y gerenciales Tutoriales técnicos y gerenciales</p>
</div>
<div style = "background-color:#aaa; height:200px; width:140px; float:right; padding:10px;">
<div><b>Menú derecho</b></div>
HTML<br />
PHP<br />
PERL...
</div>
<div style = "background-color:#b5dcb3; clear:both">
<center>
Copyright © 2021 Agernict.com
</center>
</div>
</div>
</body>
Diseño flotante CSS - ejemplos
Es común hacer diseños web completos utilizando la propiedad flotante de CSS.
La flotación es fácil de aprender; solo necesita recordar cómo funcionan las propiedades de flotación y limpieza.
Desventajas: Los elementos flotantes están vinculados al flujo de documentos, lo que puede dañar la flexibilidad.
Obtenga más información sobre flotar en nuestro capítulo CSS Float and Clear
Cambie el tamaño de la ventana del navegador para ver el efecto de respuesta (aprenderá más sobre esto en nuestro próximo capítulo: HTML Responsive).
<!DOCTYPE html>
<html lang="en">
<head>
<title>CSS Template</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
box-sizing: border-box;
}body {
font-family: Arial, Helvetica, sans-serif;
}/* Style the header */
header {
background-color: #666;
padding: 30px;
text-align: center;
font-size: 35px;
color: white;
}/* Create two columns/boxes that floats next to each other */
nav {
float: left;
width: 30%;
height: 300px; /* only for demonstration, should be removed */
background: #ccc;
padding: 20px;
}/* Style the list inside the menu */
nav ul {
list-style-type: none;
padding: 0;
}article {
float: left;
padding: 20px;
width: 70%;
background-color: #f1f1f1;
height: 300px; /* only for demonstration, should be removed */
}/* Clear floats after the columns */
section::after {
content: "";
display: table;
clear: both;
}/* Style the footer */
footer {
background-color: #777;
padding: 10px;
text-align: center;
color: white;
}/* Responsive layout - makes the two columns/boxes stack on top of each other instead of next to each other, on small screens */
@media (max-width: 600px) {
nav, article {
width: 100%;
height: auto;
}
}
</style>
</head>
<body><header>
<h2>Ciudades</h2>
</header><section>
<nav>
<ul>
<li><a href="#">Londres</a></li>
<li><a href="#">Paris</a></li>
<li><a href="#">Tokio</a></li>
</ul>
</nav>
<article>
<h1> Londres </h1>
<p> Londres es la capital de Inglaterra. Es la ciudad más poblada del Reino Unido, con un área metropolitana de más de 13 millones de habitantes. </p>
<p> Situada a orillas del río Támesis, Londres ha sido un asentamiento importante durante dos milenios, y su historia se remonta a su fundación por los romanos, quienes la llamaron Londinium. </p>
</article>
</section><footer>
</body>
<p>Pie de página</p>
</footer>
</html>
Diseño CSS Flexbox
Cambie el tamaño de la ventana del navegador para ver el efecto de respuesta.
Nota: Flexbox no es compatible con Internet Explorer 10 y versiones anteriores.
<!DOCTYPE html>
<html lang="en">
<head>
<title>CSS Template</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
box-sizing: border-box;
}body {
font-family: Arial, Helvetica, sans-serif;
}/* Style the header */
header {
background-color: #666;
padding: 30px;
text-align: center;
font-size: 35px;
color: white;
}/* Container for flexboxes */
section {
display: -webkit-flex;
display: flex;
}/* Style the navigation menu */
nav {
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
background: #ccc;
padding: 20px;
}/* Style the list inside the menu */
nav ul {
list-style-type: none;
padding: 0;
}/* Style the content */
article {
-webkit-flex: 3;
-ms-flex: 3;
flex: 3;
background-color: #f1f1f1;
padding: 10px;
}/* Style the footer */
footer {
background-color: #777;
padding: 10px;
text-align: center;
color: white;
}/* Responsive layout - makes the menu and the content (inside the section) sit on top of each other instead of next to each other */
@media (max-width: 600px) {
section {
-webkit-flex-direction: column;
flex-direction: column;
}
}
</style>
</head>
<body>
<header>
<h2>Ciudades </h2>
</header><section>
<nav>
<ul>
<li><a href="#">Londres</a></li>
<li><a href="#">Paris</a></li>
<li><a href="#">Tokio</a></li>
</ul>
</nav>
<article>
<h1> Londres </h1>
<p> Londres es la capital de Inglaterra. Es la ciudad más poblada del Reino Unido, con un área metropolitana de más de 13 millones de habitantes. </p>
<p> Situada a orillas del río Támesis, Londres ha sido un asentamiento importante durante dos milenios, y su historia se remonta a su fundación por los romanos, quienes la llamaron Londinium. </p>
</article>
</section><footer>
</body>
<p>Footer</p>
</footer>
</html>
Etiquetas: Creación, Diseño Web de Layouts Avanzados, cómo diseñar el diseño de un sitio web, elementos del diseño de un sitio web, plantillas de diseño de sitios web, diseños de sitios web creativos, consejos de diseño del sitio web, pautas de diseño web, cómo organizar el diseño de un sitio web, diseño de diseño web moderno,
Creación, Diseño Web de Layouts HTML - html.es
This tool makes it easy to create, adjust, and experiment with custom colors for the web.
Magnews2 is a modern and creative free magazine and news website template that will help you kick off your online project in style.
Find here examples of creative and unique website layouts.
Find here examples of creative and unique website CSS HTML menu.