Costruire il tuo sito web per principianti: 5 passaggi

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

Sia che tu abbia mai sognato di essere un programmatore di computer o che tu abbia mai utilizzato un sito Web, ammettiamolo, è quasi tutti noi, la tecnologia dell'informazione è diventata la spina dorsale del business. Sebbene all'inizio la programmazione possa sembrare un po' spaventosa, il mio obiettivo è insegnarti le basi fondamentali del web design in modo che dopo questo tutorial sarai in grado di creare la tua pagina web personale. Detto questo, arriviamo al punto!

Forniture

• Un PC Macintosh o Windows (sebbene si possano usare anche distribuzioni Linux, per ora le sto saltando perché questa è un'introduzione per principianti).
• La tua scelta di editor di testo (Blocco note su Windows, TextEdit su Mac) o la tua scelta di IDE. Nella mia esperienza, ho scoperto che Visual Studio Code funziona meglio per me stesso, quindi consiglierei anche di verificarlo qui: https://code.visualstudio.com/ per non parlare del fatto che funziona su tutte le piattaforme del sistema operativo.

Passaggio 1: tag e un po' di storia

Una volta che hai deciso la tua scelta di editor di testo o IDE, iniziamo con le basi.

Che ci crediate o no, HTML o HyperText Markup Language è in circolazione da quasi 30 anni e con ogni anno sono arrivati sempre più miglioramenti al linguaggio. Ora, potresti chiederti, come interpreta un browser cosa mettere sullo schermo? Questo viene fatto in alcune parti:

La formattazione del documento HTML è facile. Hai due sezioni conosciute come la testa e il corpo. L'intestazione di un sito Web contiene codice che non è visibile all'utente. Questo è usato per collegare i fogli di stile e dichiarare altri bit necessari per la corretta visualizzazione del sito. Seguendo la testa, il corpo è come sembra, il corpo del sito web. È qui che puoi parlare con la tua voce e mostrare al pubblico le tue fantastiche abilità HTML! Ora non è facile come digitare semplicemente il testo nel corpo e visualizzarlo esattamente nel modo desiderato, ma è quasi così facile in un certo senso con l'uso di cose che chiamiamo tag.

Ecco alcuni dei tag HTML di base:

• title – che viene utilizzato per dire al browser qual è il titolo della pagina. Questo è anche ciò che vedi quando guardi la scheda di una pagina web.
• h1, h2, h3, h4 – che vengono utilizzati per diverse dimensioni dell'intestazione, dove h1 è il più grande e h4 è il più piccolo. Tratterò di più su questo nella prossima sezione.
• p – paragrafo, utilizzato per scrivere paragrafi di testo. Come paragrafi su un foglio.
• br – break, che inserisce un'interruzione in linea con il testo.
• a – utilizzato per creare collegamenti ad altre pagine, come un collegamento cliccabile.
• img – usato per collegare un'immagine alla pagina web.
• ul, ol, li – elenchi non ordinati, elenchi ordinati e voci di elenco.
• – utilizzato per inserire commenti in linea nel codice che non verranno visualizzati dall'utente finale.

Ed ecco alcuni tag CSS (visivi):

• colore: utilizzato per assegnare un colore specifico a un elemento o a un set specifico nella pagina web.
• font-size – utilizzato per modificare la dimensione del carattere nella pagina.
• background-color – usato per cambiare il colore di sfondo di un certo elemento o dell'intera pagina.

Ho anche allegato un piccolo cheat sheet per aiutarti se ti senti un po' perso, ma non preoccuparti, ci prenderai la mano in pochissimo tempo! Inoltre, www.w3schools.com è anche una fantastica risorsa per qualsiasi domanda di programmazione. Mi hanno sicuramente salvato un po' di tempo o anche.

In sostanza, il modo in cui il browser legge il file è facile. Va linea per linea ed elabora funzione per funzione. I caratteri sono usati per dichiarare un tag come

e sono usati per chiudere il tag come

. Questo è importante, altrimenti il browser non sa dove fermarsi. Tra i

e

tag, è dove inserisci quello che vuoi!

Passaggio 2: configurazione dell'editor

Ora che abbiamo coperto un po' gli elementi di base di un sito Web HTML, tuffiamoci e proviamolo per noi stessi. Per questo passaggio successivo utilizzerò Visual Studio Code per programmare il sito Web, ma il layout del codice sarà lo stesso se ti senti più a tuo agio con l'utilizzo di Blocco note o TextEdit.

All'interno del Blocco note:

• Con Blocco note, il programma si avvia con un file vuoto che rende estremamente facile iniziare. Questo ci permetterà anche di saltare qualche passaggio rispetto all'utilizzo di VS Code. Iniziamo salvando il file nel formato corretto.
• Fare clic su File > Salva
• Inserisci un nome per il tuo file seguito da.html e in Salva come tipo, seleziona tutti i file. Fare clic su Salva.

All'interno del codice VS:

• Il modo migliore per sfruttare tutte le funzionalità dell'IDE è iniziare creando il file e dicendo all'IDE che tipo di file è. Questo può essere fatto come segue:
• Fare clic su File > Nuovo file
• Si apre un file vuoto

• Successivamente, ti consigliamo di iniziare salvando il file, anche se vuoto, in quanto ciò consentirà all'IDE di essere in grado di capire quale tipo di file sarà il prodotto finale. Quando salvi assicurati di includere l'estensione.html alla fine del nome del file. Fare clic su Salva.

Passaggio 3: progetti

Dopo aver salvato con successo il tuo file nomefile.html, iniziamo creando il framework per la nostra pagina web. Ricorda dall'alto quali parti chiave del file dobbiamo dichiarare prima di poter iniziare con la creazione del resto della pagina HTML. Suggerimento: quando si avvia il framework per il sito, il tag HTML !DOCTYPE comunica al browser che il file che sta leggendo è un file html. Questo può tornare utile se hai diversi tipi di codice nello stesso file e vuoi passare da un interprete all'altro. Per lo scopo di questo Instructable, non toccheremo troppo su questo, ma se dopo questo Instructable sei curioso di saperne di più sullo sviluppo HTML, sentiti libero di provarlo. Inserirò il tag HTML !DOCTYPE nella parte superiore del file per la migliore pratica. Ricorda di aprire e chiudere con.

Ecco dove è utile salvare il file prima di iniziare a programmare, ora che l'IDE sa che sta funzionando con un file HTML, utilizzerà intellisense per completare l'espressione e offrire suggerimenti in modo da non dimenticare accidentalmente di chiudere un tag. Nota che per quelli di voi che stanno usando Blocco note, intellisense non è disponibile come nell'IDE. Iniziamo inserendo i tag head e body come segue: (vedi seconda immagine).

Ora che la configurazione del documento è stata completata, possiamo andare alle gare e divertirci un po'!

Passaggio 4: codice; Codice; Codice;

Possiamo iniziare inserendo un titolo per il nostro file appena creato. Inserisci quello che desideri. Ricorda che questo è il nome che appare nella scheda del browser. Iniziamo anche inserendo un'intestazione per il nostro sito. Ricorda da prima come lo facciamo. Ho sentito h1/2/3/4? È corretto!

Prima di continuare, trovo utile aprire il nostro file in una finestra del browser in modo da poter vedere in tempo reale come le nostre modifiche si riflettono nel browser. Puoi farlo facendo clic su File> Salva per salvare il file, navigando nella cartella in cui è salvato il file HTML, per me questo è il desktop e usa il browser di tua scelta per aprire il file e lo guarderesti, ecco la tua pagina web! Nota: utilizzo personalmente Safari come browser preferito sul mio computer, tuttavia, nello sviluppo web, Firefox è il browser standard di riferimento per i test poiché funziona con quasi tutti i linguaggi di scripting web.

Come puoi vedere, il titolo viene mostrato nella scheda, oltre a vedere la nostra intestazione h1. Preferisco avere entrambe le finestre del browser del file aperte insieme all'IDE poiché quando si apporta una modifica nell'IDE e si salva, le modifiche sono istantanee nel browser.

Sentiti libero di provare ad aggiungere tag e a giocare con le diverse cose che puoi fare con l'HTML. Come puoi vedere di seguito, ho aggiunto alcuni paragrafi, interruzioni, collegamento ipertestuale esterno a Instructables.com, un'immagine (che può essere collegata da una fonte esterna o all'interno della stessa directory in cui è archiviato il file. HTML), un esempio di elenco non ordinato, un elenco ordinato e infine un commento.

Se vuoi provare ad aggiungere alcune opzioni di colore e disposizione, puoi inserire un tag di stile nell'intestazione del file. Questo è il punto in cui si passa da HTML a CSS, ma per motivi di visuale, inserirò alcune righe in modo che possiate vedere come funziona. In sostanza, il funzionamento dei CSS è che ti consente di controllare gli elementi HTML all'interno delle funzioni utilizzando le parentesi { } per inserire il tuo codice per uno specifico elemento HTML.

Passaggio 5: considerazioni finali

E il gioco è fatto; hai creato con successo la tua prima pagina web! Poiché questa è una guida per principianti, voglio rendere piacevole la tua prima esperienza con l'HTML. Il modo migliore per imparare nella mia esperienza è immergersi e provare le cose sul campo, vedere cosa puoi fare con il tuo codice e anche vedere come puoi decifrare il tuo codice. Questo crea integrità e ti aiuta a capire meglio come e perché il codice funziona nel modo in cui funziona. Ricorda che www. W3Schools.com è un'ottima risorsa per le domande e offre persino una sandbox virtuale all'interno del browser per provare il tuo codice. Spero che tu abbia imparato qualcosa e che sia felice di programmare!