Tempo stimato per la lettura 6 minuti

Inserimento del logo nell’home page di un sito web e dello style nell’header

In questa lezione andremo a vedere come inserire nell’header dell’home page di un sito web il logo posizionato in alto e lo style dentro il tag header così da formattare meglio il codice.

Cominciamo con l’ormai ben noto passaggio di duplicare la lezione precedente. Vai quindi nella cartella htdocs di xampp, duplica lezione-5 in lezione-6 e apri Atom in modalità progetto con lezione-6.

Inserimento di un’immagine in html usando il logo

Il logo è una figura, un disegno, un marchio che rappresenta una determinata azienda, prodotto, servizio, società o altro. Per altre informazioni sul logo ti invito a leggere la lezione dedicata “come creare un logo“.

In questa lezione andremo a usare un logo esistente e lo prenderemo da uno dei tanti siti web gratuiti, lo faremo dal sito https://www.iconfinder.com/, una risorsa web sia gratuita che a pagamento che ci consente di scaricare icone in vari formati. Per altre informazioni utili sull’uso delle icone ti invito a leggere l’articolo dedicato “dove trovare icone per i siti web“.

Collegati al sito https://www.iconfinder.com/.

Home page del sito iconfinder

Nella barra di ricerca digita la parola ” art ” e poi premi invio, sarà caricata una pagina simile all’immagine sotto. Il tuo risultato a video potrebbe essere leggermente diverso. Non preoccuparti, le icone sono le stesse ma potrebbero non corrispondere in quanto visualizzate in ordine casuale.

Risultato ricerca su icon finder

Il risultato della nostra ricerca mostra tutte le icone che il sito mette a disposizione. Noi andiamo a “spuntare” l’opzione “free” dal menù di navigazione laterale a sinistra così da visualizzare solo le icone gratuite. (vedi immagine sopra)

Risultato ricerca immagini gratuite

Scegli una delle icone che preferisci, al click sull’immagine si aprirà una schermata che ti permetterà di scaricare l’immagine. Clicca sul pulsante download icon png formato 512px.

Scaricare icona free per sito web

L’immagine sarà salvata nella cartella download, a questo punto dobbiamo organizzare la cartella materiale del progetto.

Organizzare le cartelle di un sito web in fase di sviluppo

Non esiste un metodo standard per organizzare le cartelle di un sito web in fase di sviluppo ognuno trova quella che dal suo punto di vista è la soluzione ideale. Personalmente divido sempre il progetto in due cartelle.

La cartella sito che corrisponde al nome del dominio relativo al progetto in questione, ad esempio www.mariorossi.it posizionata all’interno di htdocs di xampp e che in questo caso corrisponde a lezione-6.

La cartella sorgenti che invece può trovarsi sul desktop o in qualsiasi posto del computer che contiene tutti i file di ogni progetto, quelli fatti da noi e quelli forniti dal cliente.

Nell’immagine sotto ho creato sul desktop una cartella PROGETTI/CORSO BASE HTML/ SORGENTI, dove andrò a mettere tutto il materiale di questo corso.

Esempio di organizzazione cartella sorgenti

Adesso che la dinamica di organizzazione delle cartelle relative al materiale di un sito web in fase di sviluppo è chiara possiamo andare avanti e inseriamo il logo nell’home page del nostro sito web.

Inserire il logo di un sito in html

Per inserire il logo prima di tutto all’interno della cartella lezione-6 di xampp andiamo a creare una sotto cartella immagini, (vedi immagine).

Creazione cartella immagini per sito web

Ora copia il logo che abbiamo scaricato nella cartella sorgenti del progetto, incollalo all’interno della cartella immagini di lezione-6 e rinominalo in “logo.png”.

Logo nella cartella immagini del sito

Adesso il logo deve essere inserito nel codice per poter essere visualizzato all’interno della pagina web, per farlo useremo il tag img.

Il tag img in html

Questo tag, consente l’inserimento delle immagini nella pagina web di un sito e la sua sintassi è la seguente:

<img src=”nomedelfile.png” />

Come avrai notato, questo tag non ha la chiusura </img> ma lo slash ” / ” è compreso nell’apertura. Il tag img è uno dei pochi detti speciali perchè caratterizzato proprio dalla mancanza di chiusura.

Andando quindi a scrivere il codice per richiamare il nostro logo, all’interno del div header

Digitando ora sul browser il nostro indirizzo di xampp http://127.0.0.1/sitiweb/html-base/lezione-6/, Il risultato a video sarà una cosa del genere.

Inserimento del logo nell’header del sito

L’immagine inserita è quadrata di dimensione 512px x 512px, essendo dentro un contenitore (div header) di altezza 100px (definita precedentemente nell’attributo style), esce da questo spazio. Bisogna andare a lavorare sull’attributo style per impaginare correttamente il logo.

Più precisamente andremo a definire una larghezza di 100px e un’altezza auto così che l’immagine si adatti proporzionalmente.

<img src=”immagini/logo.png” style=”width:100px; height:auto;” />

Il codice della nostra pagina web sarà quindi.

E avremo a video una situazione del genere.

Logo formattato con attributo style

In questo specifico caso stiamo lavorando con proporzioni semplici per chiarire i concetti di base, l’immagine infatti essendo quadrata ha assunto proporzionalmente un’altezza di 100px che corrisponde esattamente a quella dell’header. Se il logo fosse largo 150px si presenterebbe lo stesso problema iniziale.

Per ovviare a questo possiamo omettere di inserire l’altezza all’header impostandola su “auto” così anch’essa di adatterà proporzionalmente, in quanto influenzata dall’altezza dell’immagine contenuta al suo interno.

Guardando la pagina web a video sul browser non sarà cambiato assolutamente nulla, con l’unica differenza che se aumenti la larghezza del logo a 120px l’header si adatterà di conseguenza, prova!

Lo style nell’header della pagina html

Definire l’attributo style all’interno dei tag html è utile quando lavoriamo a pagina web semplici o per modifiche rapide. Per un uso più corretto della formattazione, lo style di una pagina web può essere scritto all’interno del tag header in alto alla pagina web in modo da tenere più pulito il codice del body, così da agevolarne la lettura.

Quello che fino ad ora abbiamo usato come attributo all’interno di un div diventa un vero e proprio tag se usato nell’header ed ha la seguente sintassi.

<header >

<style>
elemento_da_modificare{
attributo1:valore1;
attributo2: valore2;
attributo3:valore:3;
}
</style>

</header >

Cerchiamo di capire la sintassi.

Essendo style diventato un tag adesso è composto da apertura e chiusura.

<style >



</style>

Al suo interno, la voce “elemento_da_modificare” corrisponde a uno degli elementi all’interno del tag body, ad esempio il container che, avendo esso l’attributo id è richiamato all’interno dello style con il valore corrispondente all’attributo id preceduto dal simbolo ” # ” cancelletto e seguito dalle parentesi graffe aperte e chiuse.

<style >

#container {

}

</style>

Volendo andare a specificare tutte le caratteristiche del container al suo interno scriveremo il codice dello style in questo modo.

<style >

#container {
width:700px;
height:620px;
background-color:#CCCCCC;
margin:0 auto;
}

</style>

Lo stesso principio vale per tutti gli elementi presenti nella nostra pagina web, con l’importante differenza che per richiamare i tag che al suo interno contengono l’attributo id devo scrivere il valore dello stesso attributo preceduto dal cancelletto, mentre per richiamare un tag basta scrivere il suo nome, ad esempio body,

La nostra pagina web quindi mettendo lo style nell’header del documento avrà il codice organizzato in questo modo.

A video nella nostra pagina web non è cambiato assolutamente niente, ma ora il codice è organizzato in maniera pulita e corretta.

Per dare un aspetto grafico un pochino più gradevole, andiamo ora a modificare i colori come segue.

Il risultato a video sarà come l’immagine sotto.

Pagina web con tag style nell’header

Tra le varie modifiche al codice è stato tolto il colore di sfondo al div container perché tanto non ci serve visto che è coperto dai tre elementi interni header, main e footer.

Il container e gli altri elementi hanno altezza auto per farli adattare di conseguenza (trannl il main per il momento).

Il footer ha in più rispetto agli altri div l’attributo “color” con valore “#FFF” che server per colorare il testo, in questo caso avendo dato sfondo nero lo abbiamo fatto bianco.

Codifica dei caratteri

Avrai notato che nel footer c’è scritto ” piè di pagina “, questo perché non abbiamo impostato la codifica dei caratteri nel formato europeo, per farlo dobbiamo aggiungere nel tag header il seguente codice.

<meta charset=”utf-8″>

Per avere a video questo

Inserimento della codifica dei caratteri

Se vuoi maggiori informazioni sulla codifica dei caratteri leggi l’articolo dedicato dal titolo i caratteri speciali HTML.

Nella prossima lezione vedremo come inserire il menù di navigazione principale nella testata del sito.