Crea la tua prima pagina web! Semplice guida.

Creazione di una pagina web è un  processo di sviluppo della struttura del documento tramite linguagi html e css , il cui risultato è la pagina web finita. La struttura o layuot o markup di una pagina web è determinata da vraie tag HTML.

Tag sono dei blocchi rettangolari (posiamo chiamarli delle scatole ) dove si inserisce del contenuto(testo, immagini, video), esso  non vengono visualizzate nella finestra del browser. Esso soltanto dicono al browser il tipo di contenuto, e il browser in base alle informazioni ricevuti visualizza il loro contenuto - testo e file multimediali.

Come creare  una pagina web utilizzando i blocchi (struttura basata su blocchi)

1. Come dividere la nostra futura pagina in sezioni

Vorrei subito informare che abbiamo anche un corso dove spiegiamo come crearla, una pagina web, nei minimi detagli il corso si chiama "Sito web da 0"

Per creare una pagina web, è necessario identificare le aree principali (sezioni) della futura pagina .

Una pagina web standard contiene le seguenti sezioni:

structure main

Sintassi

<body>/* stiamo parlando della parte visiva al untente */.
<header></header>
<div class="main"></div>
<footer></footer>
</body>

Non useremo l'elemento <main>, in quanto non è supportato da tutti i browser.

Elementi <header>, <div> e <footer> - sono elementi di blocco, per cio occuperanno l'intera larghezza del blocco contenitore - elemento <body>. Una pagina con un markup del genere  sarà  bene visualizzata sui piccoli schermi, ma sui dispositivi ad alta risoluzione  una pagina web del genere sara  scomoda da leggere. È quindi necessario aggiungere una scatola contenitore per i contenuti e per il contenuto di ciascuna sezione:

container main

e impostare per esso la larghezza massima, padding, che separa il contenuto dai bordi nel dispositivo con una risoluzione dello schermo piccolo, non dimemtichimo di indicare anche margin esterno dal bordo del nostro contenitore, allineare il contenitore nel mezzo dell'unità genitore:

.container {
  width: 100%;
  max-width: 1024px; /*la larghezza massima può avere diverso valore */
  padding: 0 15px;
  margin: 0 auto;
}

Così abbiamo ottenuto la strutura di riferimento per la nostra pagina web (altezza della sezione in questo caso è virtuale, perché senza contenuto l'altezza della sezione e pari a zero).

2. Marcatura della parte superiore della pagina e il posizionamento dei suoi elementi

Passiamo alla  reazione della strutura della parte superiore della pagina cosi detto header. Elemento <header> viene utilizzato per raggruppare le informazioni e navigazione introduttivi  nella pagina / sito. Aggiungimo  nel tag <header> il logo della pagina e varie link di navigazione:
 

<header>
  <div class="container">
    <a href="/" class="logo">LOGO</a>
    <nav>
      <ul>
        <li><a href="/">Principale</a></li>
        <li><a href="/">Di noi </a></li>
        <li><a href="/">Contatti</a></li>
      </ul>
    </nav>
  </div>
</header>

Metti il tuo logo a sinistra e i link di navigazione - allineato al bordo destro della scatola :

.logo {
  float: left;
}
nav {
  float: right;
}
nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
nav li {
  display: inline-block; /*uno dei modi per mettere elementi di navigazione in orizzontale */
}

Ci sono diversi modi per mettere elementi block  di fila orizzontale . Ne abbiamo gia discusso queste possibilità. Quindi per approfondire potrai fare delle ricerche sul nostro sito e trovare articoli di riferimento  

Vorrei far ti notare  che una volta che abbiamo applicato la proprieta float, la parte rachiusa nel tag header è scomparsa. Questo perché gli elementi galleggianti (per i quali la proprietà è impostata come  float) vengono rimossi dal flusso normale e contenitore padre non vede più la loro altezza, così l'elemento <header> e altri eleementi che si trovano al suo interno con la classe  .container si sono decomposti . Per risolvere questo problema, vediamo di indicare per l'elemento con il classe .container: una pseudoclase che sarà da separatore per i blocchi che lo inseguono

.container:after /* vorrei subito precisare che esistono varie tecniche per creare queste separazioni dei blocchi uno di questi puo esser creazione un altra scatola dopo elementi flotanti con la proprietà clear*/
  content: "";
  display: table;
  clear: both;
}

Inoltre, aggiungeremo ad essa gli spazi  che separerano gli elementi verticali all'interno del contenitrore . Come risultato, I nostri stili css per questo blocco saranno cosi :

.container {
  width: 100%;
  max-width: 1024px;
  padding: 15px;
  margin: 0 auto;
}

Vedimo anche la situazione  in cui una immagine appare come il logo della nostra pagina web. Essa Può essere aggiunta direttamente nel tag, o inserita  come immagine di sfondo. L'immagine avrà la sua altezza, che puo essere moltoi diversa   dall'altezza del menu di navigazione, quindi ci si troveremo ad affrontare il problema del l'allineamento verticale degli elementi nel header.

Suponiamo che nel esempio, l'altezza del logo è di 38px, quindi, per allineare in verticale il logo e il nostro menu , è necessario impostrae per esso  giusta altezza della riga :

nav a {
  text-decoration: none;
  line-height: 38px;
}

3. Creare una griglia per la parte principale della pagina

La parte principale della pagina, spesso è costituita  da una griglia di blocchi di diverse larghezze. Possiamo posizionarli sempre con aiuo della proprietà float.  Ogni gruppo di  blocchi  racchiuderemo in una scatola piu grande sempre con aiuo del tag div e con la classe  .row :

<div class="main">
  <div class="container">
    <div class="row">
      <div class="col-1-3"></div>
      <div class="col-2-3"></div>
    </div>
    <div class="row">
      <div class="col-1-2"></div>
      <div class="col-1-2"></div>
    </div>
    <div class="row">
      <div class="col-1-4"></div>
      <div class="col-1-4"></div>
      <div class="col-1-2"></div>
    </div>
  </div>
</div>

Stili css

.col-1-2 {
  width: 50%;
  float: left;
}
.col-1-3 {
  width: 33.3333333333%;
  float: left;
}
.col-1-4 {
  width: 25%;
  float: left;
}
.col-2-3 {
  width: 66.6666666667%;
  float: left;
}

Anche er elementi con il classe .row  applicheremo  la pulizia del flusso:
.container:after, .row:after {
  content: "";
  display: table;
  clear: both;
}

Per separare  una dall'altra le  scatole create con il tag <div>con il clase row, è possibile aggiungere spazio inferiore esterno:

.row {
  margin-bottom: 15px;
}

L'altezza dei blocchi della griglia viene determinata dalla altezza del loro contenuto, è  possa essere diversa:

L'altezza diversa dei blocchi può essere risolta specificando , ad esempio, .row div {height: 100px}. Ma in questo caso è necessario essere sicuri che quando si aggiungono contenuti in blocchi esso non supererà questa altezza .

Se si desidera impostare un colore di sfondo per una serie di blocchi, posiamo realizzare questo cosi  : per un elemento con la classe .row aggiungere una nuova classe che permette  di stilizzare solo questa riga di blocchi  (per esempio  .row fila-uno), dopo di che posiamo attribuirli un colore di fondo e dopo posiamo attribuire un colore diverso di sfondo anche per i blocchi che esso continente.

<div class="row row-one">
  <div class="col-1-3">Lorem ipsum dolor sit amet.</div>
  <div class="col-2-3">Duis lobortis tempor tortor vel iaculis. Fusce volutpat commodo lacus, eget vestibulum lorem semper at.</div>
</div>

E rispetivi stili CSS
.row-one {
  background: lightblue;
}
.col-2-3 {
  width: 66.6666666667%;
  float: left;  
  background: seashell;
}

4. Markup della parte inferiore o footer della pagina  

Parte inferiore della  pagina, o  footer di solito contiene le informazioni di copyright, collegamenti supplementari, ecc.  Tutte queste informazioni anche esso sono di solito condivisi in colonne che possono essere uguali o differenti come larghezze.

<footer>
  <div class="container">
    <div class="col-1-3"></div>
    <div class="col-1-3"></div>
    <div class="col-1-3"></div>
  </div>
</footer>

In questo articolo ho voluto rendere idea di come creare struttura o markup di un pagina web con aiuto del tag div. Per approfondire ed imparare bene come creare un sito web consultate i nostri corsi "CSS pratica" e "Sito web da zero”.

Letto 468 volte
Altro in questa categoria: « Form in HTML. Tag nel HTML »