Formattazione main e footer

In questa lezione andremo a formattare gli ultimi due div, main e footer per completare il layout della nostra home page. Duplica lezione-8 all’interno della cartella htdocs di xampp e rinominarla lezione-9. Successivamente avvia Atom in modalità progetto usando la cartella appena creata.

Inserire titolo e sottotitolo nella pagina web

Per la gestione dei titoli c’è un tag predisposto a tale uso che è il tag H, sono 6 varianti che vanno da h1 a h6 dal più grande al più piccolo in questo modo.

<h1> Titolo principale </h1> <h2> Sottotitolo </h2> <h3> Titolo h3 </h3> <h4> Titolo h4 </h4> <h5> Titolo h5 </h5> <h6> Titolo h6 </h6>

Il tag h1 è usato per dare il titolo alla pagina, mentre il tag h2 viene usato per dare il sottotitolo. Gli altri tag a nostra discrezione in base alla tipologia di contenuti da organizzare.

Aggiungiamo quindi il tag h1 e h2 dentro il div id main nella nostra home page con questo codice.

Per avere a video questo risultato (vedi immagine).

Testo preceduto da h1 e h2

Inserire immagine nel testo

Per alleggerire la lettura di un articolo è preferibile alternare il testo con delle immagini. Per fare questo bisogna evitare di usare foto prese da altri siti per una questione di copyright .

Per questo corso useremo le foto prese dal sito https://unsplash.com/ che consente di scaricare le immagini gratuitamente e senza liberatoria. Suggerisco la lettura dell’articolo dal titolo “immagini gratuite in alta risoluzione” per approfondire l’argomento.

Visita il sito https://unsplash.com/ e nella barra della ricerca digita “paint” e poi premi invio.

Ricerca immagini per il sito

Sarà generato il risultato della ricerca caratterizzato da una serie di immagini corrispondenti alla parola “paint”, passa sopra una delle foto con il mouse e premi la freccia per scaricare quella che preferisci.

Scelta immagine da scaricare

L’immagine sarà salvata nella cartella download e dobbiamo spostarla nella cartella sorgenti che avevamo precedentemente creato sul desktop come visto nella lezione 6.

Immagine spostata nella cartella sorgenti

L’immagine che ho scaricato pesa 1,09 MB, sconsiglio l’uso di immagini così grandi per accompagnare il testo di una pagina web. Per il momento ci limiteremo ad usarla in questo modo ma è sempre meglio non appesantire troppo la pagina con immagini pesanti, in quanto rallentano molto il caricamento.

Ti suggerisco di leggere l’articolo dal titolo “salvare immagini per il web” per approfondire l’argomento.

Copia l’immagine scaricata nella cartella immagini del sito e rinominala “immagine-home.jpg” (vedi immagine).

Immagine

Ora richiama l’immagine con il tag img come hai fatto per il logo usando il codice che ho aggiunto nell’home page dopo il primo paragrafo.

Il tuo risultato a video sarà questo (vedi immagine).

Immagine dentro il testo della pagina web

Perché la mia immagine è piccola?

Nonostante sia stata inserita un’immagine grande sul browser viene vista piccola, questo è dovuto dalla sintassi di una regola che abbiamo scritto precedentemente.


img{
width:100px;
height:auto;
}

Indicando nello stile una formattazione con nometag {regole}, gli stiamo dicendo di applicare le regole a tutti i tag di quella tipologia che trova nella pagina salvo dove diversamente specificato.

Avendo quindi inserito nel div id main un’immagine, cioè un tag img, viene applicata la regola di larghezza 100px;

Per andare a modificare l’immagine dentro il div id main dobbiamo andare ad indicare le regole di stile in modo diverso.


#main img {
width:300px;
float:left;
padding: 10px 30px 10px 0;

}

Praticamente gli stiamo dicendo di applicare quelle regole a tutte le immagini dentro il div id main con #main img {regole}.

Se aggiungiamo anche questo blocco di regole per div id main:


#main {
width:660px;
height:auto;
background-color:#FFF;
padding:20px 20px 20px 20px;
text-align: justify;
font-size: 18px;
color:#333;
}
}

In questo secondo blocco ho aggiunto :

text-align: justify per giustificare il testo, font-size: 18px; per aumentare le domensioni e color:#333; per cambiare il colore. A video dovrei avere questo risultato.

Formattazione testo e immagini

Ecco il codice completo:

Il footer della pagina

Il footer della pagina o il piè di pagina, contiene di solito i dati dell’azienda (ragione sociale) e i link ai social per esempio.

Nel nostro sito andiamo ad aggiungere nel footer il codice:

Colorificio Esercizio S.r.l. Via Roma 12 <br />
12345 – Firenze (FI) <br />
P.IVA: 0000000000 C.F. MMMMMM00M00M000M <br />
Tel. 0551234156 – Email: info@miosito.it – PEC: ditta@miapec.it

Per avere a video questo risultato

Dati nel footer

In questo caso per formattare il testo del footer ho usato il tag BR, un’interruzione di linea che consente di andare a capo. Esattamente come per il tag IMG, ha la chiusura all’interno di se stesso.

Per concludere questa lezione dobbiamo rendere cliccabili i due indirizzi email. Basta aggiungere il tag a con l’attributo href in questo modo:

<a href=”mailto:info@miosito.it”>info@miosito.it</a>

<a href=”mailto:ditta@miapec.it”>ditta@miapec.it</a>

Dove all’interno dell’attributo href gli passiamo come destinazione finale l’indirizzo di posta preceduto da mailto:, questo consente di far aprire automaticamente il programma di posta predefinito impostato sul dispositivo con il quale viene visualizzato il sito.

A video avremo questo risultato:

Indirizzo email cliccabili

Ecco il codice completo:

Nella prossima e ultima lezione del corso base di HTML vedremo come creare le pagine interne raggiungibili dai link del menù di navigazione.