Come fare per - Creare un sito web
Scopri come creare un sito Web reattivo che funzioni su tutti i dispositivi, PC, laptop, tablet e telefono.
Crea un sito web da zero
Una "bozza di layout"
Può essere saggio disegnare una bozza di layout del design della pagina prima di creare un sito web:
Barra di navigazione
Contenuto laterale
Un po' di testo un po' di testo..
Contenuto principale
Un po' di testo un po' di testo..
Un po' di testo un po' di testo..
Un po' di testo un po' di testo..
Piè di pagina
Primo passo: pagina HTML di base
HTML è il linguaggio di markup standard per la creazione di siti Web e CSS è il linguaggio che descrive lo stile di un documento HTML. Uniremo HTML e CSS per creare una pagina web di base.
Nota: se non conosci HTML e CSS, ti suggeriamo di iniziare leggendo il nostro Tutorial HTML .
Esempio
<!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>
Esempio spiegato
- La
<!DOCTYPE html>dichiarazione definisce questo documento come HTML5 - L'
<html>elemento è l'elemento radice di una pagina HTML - L'
<head>elemento contiene meta informazioni sul documento - L'
<title>elemento specifica un titolo per il documento - L'
<meta>elemento dovrebbe definire il set di caratteri come UTF-8 - L'
<meta>elemento con name="viewport" fa apparire il sito web in buone condizioni su tutti i dispositivi e le risoluzioni dello schermo - L'
<style>elemento contiene gli stili per il sito web (layout/design) - L'
<body>elemento contiene il contenuto della pagina visibile - L'
<h1>elemento definisce un'intestazione grande - L'
<p>elemento definisce un paragrafo
Creazione del contenuto della pagina
All'interno <body>dell'elemento del nostro sito Web, utilizzeremo la nostra "Bozza di layout" e creeremo:
- Un'intestazione
- Una barra di navigazione
- Contenuto principale
- Contenuto laterale
- Un piè di pagina
Intestazione
Un'intestazione si trova solitamente nella parte superiore del sito Web (o subito sotto un menu di navigazione in alto). Spesso contiene un logo o il nome del sito web:
<div class="header">
<h1>My Website</h1>
<p>A website
created by me.</p>
</div>
Quindi utilizziamo i CSS per definire lo stile dell'intestazione:
.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 di navigazione
Una barra di navigazione contiene un elenco di collegamenti per aiutare i visitatori a navigare nel tuo sito web:
<div class="navbar">
<a href="#">Link</a>
<a href="#">Link</a>
<a href="#">Link</a>
<a href="#" class="right">Link</a>
</div>
Usa CSS per definire lo stile della barra di navigazione:
/* 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 */
}
Contenuto
Crea un layout a 2 colonne, diviso in un "contenuto laterale" e un "contenuto principale".
<div class="row">
<div class="side">...</div>
<div
class="main">...</div>
</div>
Usiamo CSS Flexbox per gestire il layout:
/* 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 */
}
Quindi aggiungi media query per rendere il layout reattivo. Ciò assicurerà che il tuo sito Web appaia bene su tutti i dispositivi (desktop, laptop, tablet e telefoni). Ridimensiona la finestra del browser per vedere il risultato.
/* 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%;
}
}
Suggerimento: per creare un diverso tipo di layout, cambia semplicemente la larghezza della flessione (ma assicurati che si aggiunga al 100%).
Suggerimento: ti chiedi come funziona la regola @media? Maggiori informazioni a riguardo nel nostro capitolo CSS Media Query .
Suggerimento: per saperne di più sul modulo di layout della scatola flessibile, leggi il nostro capitolo CSS Flexbox .
Che cos'è il dimensionamento della scatola?
Puoi facilmente creare tre scatole galleggianti affiancate. Tuttavia, quando aggiungi qualcosa che ingrandisce la larghezza di ogni riquadro (ad es. riempimento o bordi), il riquadro si rompe. La box-sizingproprietà ci consente di includere l'imbottitura e il bordo nella larghezza (e altezza) totale della scatola, assicurandoci che l'imbottitura rimanga all'interno della scatola e che non si rompa.
Puoi leggere di più sulla proprietà box-sizing nel nostro CSS Box Sizing Tutorial .
Piè di pagina
Alla fine, aggiungeremo un piè di pagina.
<div class="footer">
<h2>Footer</h2>
</div>
E lo stile:
.footer {
padding: 20px; /* Some padding */
text-align: center; /* Center text*/
background: #ddd;
/* Grey background */
}
Congratulazioni! Hai creato un sito web reattivo da zero.
Spazi W3Schools
Se desideri creare il tuo sito Web e ospitare i tuoi file .html, prova il nostro costruttore di siti Web gratuito , chiamato W3schools Spaces :
