Creazione di collegamenti ipertestuali su testi e immagini del mio sito

In questa lezione vedremo come andare a inserire i link (collegamenti ipertestuali) nei testi e nelle immagini del mio sito web. Duplica lezione-7 all’interno della cartella htdocs di xampp e rinominarla lezione-8. Successivamente avvia Atom in modalità progetto usando la cartella appena creata.

Il tag a

Il tag a è quello che serve per creare link tra le pagine web e le risorse di un sito, è seguito dall’attributo href che server a indicare il percorso della risorsa da “navigare”. La sintassi è la seguente.

<a href=”risorsa.html” > contenuto da visualizzare </a>


<a href=”immagine.jpg” > contenuto da visualizzare </a>


<a href=”documento.pdf” > contenuto da visualizzare </a>


Nei tre esempi sopra il valore dell’attributo href corrisponde a dove punta il collegamento, mentre “contenuto da visualizzare” corrisponde a cosa vogliamo far vedere all’utente.

Inserimento dei link nel menù di navigazione

Ora andremo a inserire i collegamenti ipertestuali nel menù di navigazione del nostro sito. Solitamente in fase di sviluppo iniziale mancano le pagine interne in quanto si parte dall’home page e le altre pagine saranno create sulla sua falsa riga, pertanto l’unico collegamento funzionante sarà quello che punta alla index, per gli altri useremo il simbolo del cancelletto “#” per generare un link vuoto.

Aggiungi questo codice alla tua home page

Il risultato a video sarà questo (vedi immagine). Dove le tre voci del menù di navigazione adesso sono cliccabili, “chi siamo” e “contatti” al click non vanno da nessuna parte, mentre “home” al click ricarica l’home page del sito e l’url visualizzato sulla barra dell’indirizzo del browser cambierà in questo modo:

http://127.0.0.1/sitiweb/html-base/lezione-8/index.html

Pagina con link nel menù di navigazione

Uso delle classi nello style

Per andare a personalizzare le voci del menù di navigazione dobbiamo andare a lavorare sullo style in alto all’interno dell’header. Abbiamo visto che per modificare un elemento univoco al quale abbiamo dato un identificativo attraverso l’attributo id nello stile la sua regola è preceduta dal simbolo “#” cancelletto.

<div id=”nome”> </div>

#nome {
nome: valore;
}

Quando si lavora su una famiglia di elementi uguali come ad esempio i link del menù di navigazione, invece di usare l’ id che dovrei andare a scrivere con nome diverso ogni volta, si usa la classe.

Stessa logica nelle regole, con l’unica differenza che è preceduta dal “.” punto invece che da cancelletto e la regola della classe può essere applicata a più elementi contemporaneamente.

<div class=”nome”> </div>

.nome {
nome: valore;
}

Per avere a video questo risultato (vedi immagine)

Stile collegamenti ipertestuali

Andiamo ad analizzare la sintassi della regola

Nel body abbiamo aggiunto la classe link_nav ad ogni singola voce del menù di navigazione. In questo caso l’attributo è “class” seguito dal simbolo “=” e poi il valore dell’attributo tra le doppie virgolette.

<a href=”index.html” class=”link_nav”> home </a>
<a href=”#” class=”link_nav”> chi siamo </a>
<a href=”#” class=”link_nav”> contatti</a>

Mentre dentro il tag style nell’head del documento abbiamo aggiunto la formattazione della regola.

.link_nav{
text-transform: uppercase;
color:#333;
margin: 3px;
}

Più precisamente abbiamo scritto il testo in maiuscolo con “uppercase”, gli abbiamo dato il colore “#333” che è l’equivalente di “#333333” scritto in forma abbreviata e infine “margin:3px” che è la forma abbreviata usata quando vogliamo lavorare con tutti e quattro i margini uguali.

Togliere sottolineatura link e cambio colore al passaggio del mouse.

Di default ogni link quando è scritto per la prima volta assume la caratteristica identificativa della sottolineatura, tale formattazione può essere gestita nello style al passaggio del mouse creando una regola con “:hover”.

.link_nav{
text-transform: uppercase;
color:#333;
margin: 3px;
text-decoration:none;
}


.link_nav:hover{
color:#000;
text-decoration:underline; }

Nel primo caso abbiamo aggiunto alla regola precedente “text-decoration:none” per togliere la sottolineatura, mentre nel secondo caso abbiamo aggiunto “:hover” dopo .link_nav e quindi gli stiamo dicendo “quando passo sopra con il mouse”, fai determinate cose.

All’interno della regola con :hover dobbiamo andare a indicare quali saranno i cambiamenti che vogliamo far fare al nostro link, in questo caso colore nel “#000” e sottolineato.

Usa il codice sotto e poi prova a passare sopra i link con il puntatore del mouse.

Rendere cliccabile un’immagine

Come regola standard sui siti web il logo del sito punta all’home page, pertanto l’immagine o la scritta che lo caratterizza devono essere resi cliccabili con il tag a.

La sintassi è sempre la stessa del link solo che al posto del testo ci sarà il nostro logo.

<span id=”logo”/>
<a href=”index.html”>
<img src=”immagini/logo.png” />
</a>
</span>

In questo modo il logo diventerà cliccabile e rimanderà all’home page.

Inserimento di testo segnaposto e immagine

Uno dei grossi problemi dello sviluppo di un sito web è reperire i contenuti reali, in particolar modo quelli testuali. Durante la progettazione di un sito quindi subentra la necessità di inserire testi all’interno della pagina per riempire gli spazi e avere un’idea generale di come saranno visibili i contenuti.

Per farlo possiamo utilizzare il testo segnaposto “lorem ipsum” e generarlo da questo sito https://it.lipsum.com/.

Dopo aver cliccato sul link scorri la pagina e premi sul pulsante “genera lorem ipsum”, il sito crea automaticamente 5 paragrafi (vedi immagine).

Sito generatore di testo segnaposto lorem ipsum

Il sito ti rimanderà ad una pagina web co 5 paragrafi lorem ipsum (vedi immagine).

Paragrafi lorem ipsum

Seleziona i 5 paragrafi e copiali (vedi immagine).

Paragrafi lorem ipsum copiati

Incolla il testo dei 5 paragrafi all’interno del div id main al posto della parola “contenuti” (vedi immagine).

Testo paragrafi nel codice

Per avere a video questo risultato (vedi immagine).

Paragrafi visibili da browser

Si vedono così appiccicati nonostante nel codice siano staccati, perché se il testo deve comportarti come un paragrafo dobbiamo dirglielo attraverso un tag, precisamente il tag “<p>”.

Dal momento che nella nostra pagina web ci sono cinque paragrafi, dobbiamo andare ad aggiungere 5 tag p aperti e chiusi.

Per avere a video questo risultato (vedi immagine).

Nella prossima lezione vedremo come andare a formattare i contenuti del main e del footer.