Configurazione di CSS e HTML per il tuo sito web: un tutorial

Preslav Dobrev2022-10-28 · 5 min read

Configurazione di CSS e HTML per il tuo sito web: un tutorial

Creare siti web è il passo iniziale per iniziare con lo sviluppo web. Una delle prime cose che gli appassionati di sviluppo web devono imparare è come configurare CSS e HTML per un sito web. Configurando la pagina introduttiva di base, un principiante può prepararsi con le basi del design di un sito web, affinare le proprie competenze di sviluppo web e imparare a collaborare con gli sviluppatori.

Questo tutorial ti guiderà attraverso le basi della configurazione dei file HTML e CSS per il tuo sito web. Iniziamo!

Prerequisiti

Una comprensione di base di HTML e CSS.

Passo 1 - Configurazione iniziale

Inizialmente, creeremo una nuova directory di progetto e la chiameremo demo-project :

mkdir demo-project

1	mkdir demo-project

Successivamente, spostati nella directory corrente utilizzando il cd comando:

cd demo-project

1	cd demo-project

Nella cartella del progetto, aggiungiamo i seguenti file che ci serviranno per lanciare il nostro sito web di base:

index.html : Questo file conterrà tutti i codici HTML.
styles.css : Qui conserveremo tutti i file CSS per lo stile del nostro sito web.
images : Tutte le immagini necessarie devono essere conservate in questa cartella.

Ora che abbiamo creato la directory del nostro progetto e aggiunto i file necessari, andiamo avanti e aggiungiamo il contenuto HTML nel nostro index.html nel prossimo passo.

Passo 2 - Aggiungere contenuto HTML nel index.html file

Nel file index.html che abbiamo creato nel passo precedente, aggiungeremo i codici HTML introduttivi. Queste righe HTML di base fungeranno da istruzioni per il browser, ma non verranno visualizzate sulla pagina web.

Aggiungi il seguente blocco di codice nel tuo file index.html :

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="utf-8">
<title>Welcome to CloudSigma!</title>
<link rel="stylesheet" href="css/styles.css">
</head>

<body>
</body>

</html>

<!DOCTYPE html>

<head>

<title>Benvenuto su CloudSigma!</title>

</head>

<body>

</body>

</html>

Nota: Assicurati che il file index.html sia vuoto prima di aggiungere questi blocchi di codice. Inoltre, considera di cambiare il titolo come evidenziato nella sezione <title> .

Comprendiamo i termini utilizzati:

<!DOCTYPE html> : È una dichiarazione che informa il browser sul tipo di HTML utilizzato nel documento HTML.
- Poiché sono disponibili più versioni degli standard HTML, specificare il DOCTYPE rende facile per i browser identificare la versione HTML senza sforzo. Ad esempio, in questa guida, stiamo utilizzando l'ultima versione di HTML5.
<html> : Questo tag informa il browser che i contenuti inclusi al suo interno devono essere trattati come HTML. Quando si apre un file <html> , assicurati di chiuderlo utilizzando il tag </html> . Questo tag supporta gli attributi lang , e puoi specificare la lingua della pagina web. Nel nostro tutorial abbiamo impostato la lingua su inglese utilizzando il tag di lingua en .
- Visita il IANA Language Subtag Registry per verificare le altre lingue disponibili per l'uso.
<head> : Questo crea una sezione nel documento HTML e contiene informazioni sulla pagina web. Tuttavia, non ci sono dettagli sul contenuto e il browser non mostra alcuna informazione qui nella sezione head.
<meta charset="utf-8"> : Specifica il set di caratteri del documento. Deve essere in un formato Unicode, ovvero, UTF-8, che supporta la maggior parte delle lingue scritte riconosciute.
<title> : Il tag <title> informa il browser sul nome della pagina web. Il titolo appare sulla scheda del browser quando il sito web è elencato nei risultati di ricerca.
<link rel="stylesheet" href="css/styles.css"> : Informa il browser di identificare il foglio di stile contenente gli stili CSS.
<body> : Questo tag contiene i contenuti principali della pagina web. Quando si utilizza un tag <body> , assicurati di chiuderlo utilizzando il tag </body> tag.

Passo 3 - Stile tramite CSS

Nel file styles.css file, aggiungi lo stile in base alle esigenze del tuo progetto. In questo esempio, aggiungi le seguenti righe di codice nel tuo styles.css file:

body {
background-color: red;
}

h1 {
color: yellow;
text-align: centre;
}

p {
font-family: verdana;
font-size: 25px;
}

body {

background-color: red;

}

h1 {

color: yellow;

text-align: centre;

}

p {

font-family: verdana;

font-size: 25px;

}

Abbiamo finalmente creato i file HTML e CSS di base che ci serviranno per lanciare il nostro sito web. Inoltre, puoi aggiungere immagini e conservarle nella cartella delle immagini. Salva e chiudi il file. Successivamente, apri il index.html file nel tuo browser web preferito e vedrai una pagina di base sullo schermo.

Conclusione

In questo tutorial introduttivo, abbiamo imparato le basi della configurazione di HTML e CSS e creato un sito web rudimentale. Ora è il momento di creare nuove pagine, perfezionarle, aggiungere contenuti e collegare tutto dalla barra di navigazione. Come passo successivo, prova ad aggiungere altri contenuti al index.html file e dagli uno stile usando i CSS.

Inoltre, ci sono altri tutorial HTML e CSS che puoi trovare sul nostro blog:

Buona programmazione!

Preslav Dobrev

Autore · CloudSigma

Preslav Dobrev è un designer creativo presso CloudSigma, con un focus su un'identità aziendale coerente attraverso l'uso di canali di marketing tradizionali e innovativi. È abile nel fondere la visione artistica con il marketing strategico per creare narrazioni di brand di grande impatto.