Cómo hacer un sitio web
Aprenda a crear un sitio web receptivo que funcione en todos los dispositivos, PC, computadora portátil, tableta y teléfono.
Crear un sitio web desde cero
Un "borrador de diseño"
Puede ser conveniente dibujar un borrador del diseño de la página antes de crear un sitio web:
Barra de navegación
Contenido lateral
Algún texto algún texto..
Contenido principal
Algún texto algún texto..
Algún texto algún texto..
Algún texto algún texto..
Pie de página
Primer paso: página HTML básica
HTML es el lenguaje de marcado estándar para crear sitios web y CSS es el lenguaje que describe el estilo de un documento HTML. Combinaremos HTML y CSS para crear una página web básica.
Nota: si no sabe HTML y CSS, le sugerimos que comience leyendo nuestro tutorial de HTML .
Ejemplo
<!DOCTYPE html>
<html lang="en">
<head>
<title>Page Title</title>
<meta
charset="UTF-8">
<meta name="viewport" content="width=device-width,
initial-scale=1">
<style>
body {
font-family: Arial, Helvetica, sans-serif;
}
</style>
</head>
<body>
<h1>My Website</h1>
<p>A website created by me.</p>
</body>
</html>
Ejemplo explicado
- La
<!DOCTYPE html>declaración define este documento como HTML5 - El
<html>elemento es el elemento raíz de una página HTML. - El
<head>elemento contiene metainformación sobre el documento. - El
<title>elemento especifica un título para el documento. - El
<meta>elemento debe definir el conjunto de caracteres para que sea UTF-8 - El
<meta>elemento con name="viewport" hace que el sitio web se vea bien en todos los dispositivos y resoluciones de pantalla - El
<style>elemento contiene los estilos para el sitio web (diseño/diseño) - El
<body>elemento contiene el contenido de la página visible. - El
<h1>elemento define un encabezado grande - El
<p>elemento define un párrafo.
Crear contenido de página
Dentro del <body>elemento de nuestro sitio web, usaremos nuestro "Borrador de diseño" y crearemos:
- un encabezado
- Una barra de navegación
- Contenido principal
- Contenido lateral
- un pie de página
Encabezamiento
Un encabezado generalmente se encuentra en la parte superior del sitio web (o justo debajo del menú de navegación superior). A menudo contiene un logotipo o el nombre del sitio web:
<div class="header">
<h1>My Website</h1>
<p>A website
created by me.</p>
</div>
Luego usamos CSS para diseñar el encabezado:
.header {
padding: 80px; /* some padding */
text-align: center; /* center the text */
background: #1abc9c;
/* green background */
color: white; /* white text color */
}
/* Increase the font size of the <h1> element */
.header h1 {
font-size: 40px;
}
Barra de navegación
Una barra de navegación contiene una lista de enlaces para ayudar a los visitantes a navegar por su sitio web:
<div class="navbar">
<a href="#">Link</a>
<a href="#">Link</a>
<a href="#">Link</a>
<a href="#" class="right">Link</a>
</div>
Use CSS para diseñar la barra de navegación:
/* Style the top navigation bar */
.navbar {
overflow: hidden; /* Hide overflow */
background-color: #333;
/* Dark background color */
}
/* Style the navigation bar links */
.navbar
a {
float: left; /* Make sure that the links stay
side-by-side */
display: block; /* Change the display to
block, for responsive reasons (see below) */
color: white; /* White text color */
text-align: center;
/* Center the text */
padding: 14px 20px; /* Add some padding */
text-decoration: none;
/* Remove underline */
}
/*
Right-aligned link */
.navbar a.right {
float: right;
/* Float a link to the right */
}
/*
Change color on hover/mouse-over */
.navbar a:hover {
background-color: #ddd; /* Grey background color */
color: black;
/* Black text color */
}
Contenido
Cree un diseño de 2 columnas, dividido en un "contenido lateral" y un "contenido principal".
<div class="row">
<div class="side">...</div>
<div
class="main">...</div>
</div>
Usamos CSS Flexbox para manejar el diseño:
/* Ensure proper sizing */
* {
box-sizing: border-box;
}
/* Column container */
.row {
display: flex;
flex-wrap: wrap;
}
/* Create
two unequal columns that sits next to each other */
/* Sidebar/left column
*/
.side {
flex: 30%; /* Set the width of the sidebar
*/
background-color: #f1f1f1; /* Grey background color
*/
padding: 20px; /* Some padding */
}
/* Main column */
.main {
flex: 70%; /* Set the width of the main content */
background-color: white; /* White background color */
padding: 20px; /* Some padding */
}
Luego agregue consultas de medios para que el diseño responda. Esto asegurará que su sitio web se vea bien en todos los dispositivos (computadoras de escritorio, portátiles, tabletas y teléfonos). Cambie el tamaño de la ventana del navegador para ver el resultado.
/* Responsive layout - when the screen is less than 700px wide, make the two
columns stack on top of each other instead of next to each other */
@media
screen and (max-width: 700px) {
.row {
flex-direction: column;
}
}
/*
Responsive layout - when the screen is less than 400px wide, make the
navigation links stack on top of each other instead of next to each other */
@media screen and (max-width: 400px) {
.navbar a {
float: none;
width: 100%;
}
}
Sugerencia: para crear un tipo diferente de diseño, simplemente cambie el ancho de flexión (pero asegúrese de que sume el 100 %).
Consejo: ¿Te preguntas cómo funciona la regla @media? Obtenga más información al respecto en nuestro capítulo Consultas de medios de CSS .
Sugerencia: para obtener más información sobre el módulo de diseño de caja flexible, lea nuestro capítulo CSS Flexbox .
¿Qué es el tamaño de la caja?
Puede crear fácilmente tres cajas flotantes una al lado de la otra. Sin embargo, cuando agrega algo que aumenta el ancho de cada cuadro (por ejemplo, relleno o bordes), el cuadro se romperá. La box-sizingpropiedad nos permite incluir el relleno y el borde en el ancho (y alto) total de la caja, asegurándonos de que el relleno quede dentro de la caja y que no se rompa.
Puede leer más sobre la propiedad de tamaño de cuadro en nuestro Tutorial de tamaño de cuadro CSS .
Pie de página
Por último, añadiremos un pie de página.
<div class="footer">
<h2>Footer</h2>
</div>
Y dale estilo:
.footer {
padding: 20px; /* Some padding */
text-align: center; /* Center text*/
background: #ddd;
/* Grey background */
}
¡Felicidades! Ha creado un sitio web receptivo desde cero.
Espacios W3Schools
Si desea crear su propio sitio web y alojar sus archivos .html, pruebe nuestro creador de sitios web gratuito , llamado W3schools Spaces :
