Creare il tuo primo sito web: 10 passaggi

2024 Autore: John Day | [email protected]. Ultima modifica: 2024-01-30 10:01

In questo tutorial imparerai a costruire una pagina web di base che ha un foglio di stile collegato e un file javascript interattivo.

Passaggio 1: creazione della cartella

Crea una cartella per i file che creeremo da archiviare. Sentiti libero di nominarlo come preferisci, ricorda solo dove si trova perché in seguito salveremo i file su di esso.

Passaggio 2: creazione del primo file

Apri il tuo editor di testo preferito. Nel mio caso userò semplicemente il blocco note integrato di Windows 10. Una volta che hai un nuovo file, digita quanto segue:

Questa è la mia prima pagina web, offerta da un'istruttrice

Questo è ciò che è noto come tag HTML. Sta per Titolo 1. Il testo che mettiamo all'interno di questo tag apparirà come un'intestazione sulla pagina. Si apre e si chiude così. Il testo tra i due tag è ciò che verrà visualizzato nel tuo browser web. La parte che dice sta dando a quel tag un attributo a cui faremo riferimento nel passaggio x. Una volta fatto, vai avanti e salva il file nella cartella che abbiamo creato nel passaggio 1 come index.html.

Passaggio 3: apri il file

Ora che abbiamo completato la navigazione nel file all'interno della cartella che abbiamo creato, fai clic con il pulsante destro del mouse sul file e seleziona l'opzione "apri con" e seleziona il browser web che utilizzi. Nel mio caso questo è Google Chrome. Ora guarda le fatiche del tuo duro lavoro fino ad ora!

Passaggio 4: modellare la tua pagina

Così com'è, il nostro sito Web è piuttosto semplice. Aggiungeremo quello che è noto come un foglio di stile a cascata per ravvivare un po' le cose. Crea un nuovo file di testo e digita quanto segue:

h1{colore: blu; allinea testo: centro;}

Quello che stiamo dicendo al browser qui è di trovare qualsiasi elemento in un tag h1 (di cui abbiamo appreso nel passaggio 2) e dargli un colore blu e allinearlo al centro della pagina. Salva questo file nella cartella che abbiamo creato nel passaggio 1 come style.css.

Passaggio 5: collega Style.css al tuo Index.html

A questo punto abbiamo due file separati che non sanno l'uno dell'altro. Dobbiamo dire al nostro file index.html che abbiamo un file style.css a cui vogliamo che faccia riferimento e da cui prendere uno stile. Per fare ciò, apriremo il nostro file index.html nel nostro editor di testo e sopra il nostro tag h1 aggiungeremo quello che è noto come tag di collegamento. Il tag link fa proprio come suggerisce il suo omonimo, si collega a qualcosa. Nel nostro caso un foglio di stile. Vai avanti e digita. Il tag di collegamento è un tag a chiusura automatica, quindi non è necessario un tag di fine. Il rel sta per relazione e href sta dicendo al file indice dove si trova il nostro file esterno a cui stiamo facendo riferimento. Ora salva il file index.html.

Passaggio 6: visualizza la tua nuova pagina in stile

Rivedere il passaggio 3 e ricaricare la pagina Web e dare un'occhiata a come si riflettono le modifiche.

Passaggio 7: creazione di un pulsante

Riapri il file index.html nel tuo editor di testo e digita quanto segue:

Cliccami!

e salvare il file. Questo crea un elemento pulsante sulla pagina. Una volta salvato, riapri il file come mostrato nel passaggio 3 e assicurati che il pulsante si trovi nella parte inferiore sinistra della pagina.

Passaggio 8: crea il tuo file Javascript

Infine creeremo il nostro file javascript. Questo è ciò che renderà interattivo il nostro sito. Apri un editor di testo e digita quanto segue:

document.querySelector("#button").addEventListener("click", function(){

document.querySelector("#heading").innerText = "Cambiare l'intestazione al volo"

})

Quello che stiamo facendo è chiedere al documento di trovarci un elemento con l'ID di pulsante, e faremo in modo che il pulsante risponda a un evento clic modificando un testo di elementi con l'ID di intestazione in "Cambiare l'intestazione al volo ". Salva il file come button.js nella cartella che abbiamo creato nel passaggio 1.

Passaggio 9: collega i tuoi file Javascript e di indice

Come abbiamo fatto con il file style.css, dobbiamo dire al nostro file index.html del nostro file javascript. Nella parte inferiore sotto tutto ciò che abbiamo fatto finora, digita quanto segue:

Il tag script ci consente di aggiungere un linguaggio di scripting (nel nostro caso, javascript) per fornire funzionalità alla nostra pagina. Gli stiamo dicendo di cercare un file chiamato button.js e di aggiungere tutto il codice contenuto al suo interno al nostro file indice. Dopo averlo digitato, salva il file e riaprilo come mostrato nel passaggio 3.

Passaggio 10: testare il pulsante appena creato

Ora vai avanti e fai clic sul pulsante e guarda il cambio di intestazione!

Congratulazioni!! Hai creato la tua prima pagina web interattiva! Mi chiedo quanto potresti andare oltre sapendo quello che sai ora??