Concetti Chiave
- Il contenuto spiega come creare collegamenti tra pagine web utilizzando una semplice struttura HTML.
- Viene presentato un esempio di sito web con quattro pagine collegate tra loro tramite link cliccabili su immagini di componenti del computer.
- La prima pagina contiene una tabella che elenca alcuni componenti del PC, con immagini che fungono da link verso altre pagine.
- Ogni pagina dedicata a un componente presenta immagini relative e un link per ritornare alla pagina principale.
- Vengono illustrati i tag HTML fondamentali per costruire un sito web semplice: <a href> per i link, <img> per le immagini, e <table> per organizzare i contenuti in tabelle.
Per capire come funzionano i collegamenti tra pagine web, la cosa migliore è costruirne qualcuna. Qui ne facciamo quattro: nella prima c'è una tabella con tre pezzi del computer (scheda madre, hard disk e RAM), e cliccando sulla foto di ognuno si finisce nella sua pagina, da cui poi si può tornare indietro. Sotto trovi il codice di tutte e quattro, pagina per pagina.
Quali sono i componenti di un pc?
Pagina 1:
Questa pagina contiene alcune delle componenti di un pc
Mother Board
Hard Disk
Ram
Partiamo dall'inizio. La prima riga, , serve solo a dire al browser che stiamo scrivendo in HTML. Poi tutto quanto sta dentro : nella parte mettiamo le informazioni sulla pagina, come il titolo (), quello che vedi in alto nella scheda del browser, mentre in va tutto ciò che appare davvero sullo schermo.
Il cuore della pagina è la tabella. la crea con un bordo sottile, ogni è una riga e ogni una casella: a sinistra scriviamo il nome del componente, a destra mettiamo la sua foto con . Il trucco sta nel tag : avvolgendo la foto, la trasforma in un link, e così basta cliccarci sopra per aprire la pagina della scheda madre.
Descrizione della scheda madre
Pagina 2:
Questa pagina descrive la Mother Board
Scheda Madre
Immagini relative alle schede madri
Descrizione
Ritorna alla Pagina 1
La seconda pagina è quella della scheda madre. Qui non c'è niente di complicato: un titolo, tre foto messe una dopo l'altra e lo spazio per una descrizione. L'ultima riga è la più importante, perché con creiamo il link per tornare alla pagina iniziale. Senza di quello, chi arriva qui resterebbe "bloccato".
Pagina 3:
Questa pagina descrive l'Hard Disk
Hard Disk
Immagini relative all'Hard Disk
Descrizione
Ritorna alla Pagina 1
La terza pagina è identica alla seconda, cambiano solo l'argomento (l'hard disk) e le foto. Una volta capita la struttura, basta copiarla e modificare i contenuti.
Pagina 4:
Questa pagina descrive la Ram
Ram
Immagini relative alla Ram
Descrizione.
Ritorna alla Pagina 1
L'ultima è dedicata alla RAM, e anche lei ha il suo link per tornare all'inizio. Ricapitolando: con colleghiamo le pagine tra loro, con inseriamo le immagini (che possono diventare a loro volta dei link) e con la tabella mettiamo un po' d'ordine nei contenuti. Con questi tre tag hai già in mano tutto quello che serve per fare un piccolo sito.
Domande da interrogazione
- Qual è la struttura di base di una pagina HTML?
- Come si crea un link in una pagina HTML?
- Come si inseriscono immagini in una pagina HTML?
- Qual è la funzione di una tabella in HTML?
- Come si naviga tra le pagine di un sito web semplice?
La struttura di base di una pagina HTML include il doctype, l'elemento `<html>`, la sezione `<head>` per le informazioni come il titolo, e la sezione `<body>` per il contenuto visibile sullo schermo.
Un link in una pagina HTML si crea utilizzando il tag `<a href="url">`, dove "url" è l'indirizzo della pagina a cui si vuole collegare. Questo tag può avvolgere un testo o un'immagine per renderli cliccabili.
Le immagini si inseriscono in una pagina HTML utilizzando il tag `<img src="percorso_immagine">`, dove "percorso_immagine" è il percorso del file immagine.
Una tabella in HTML, creata con il tag `<table>`, organizza i contenuti in righe (`<tr>`) e celle (`<td>`), permettendo di presentare dati in modo ordinato e strutturato.
Si naviga tra le pagine di un sito web semplice utilizzando i link creati con il tag `<a href>`, che collegano le diverse pagine tra loro, permettendo di passare da una pagina all'altra cliccando su testi o immagini.
Accedi a tutti gli appunti
Tutor AI: studia meglio e in meno tempo
