La Nostra Prima Pagina – WEB DESIGN #3

per creare una pagina web dovremo seguire alcune regole di convenzione utili a uniformare il modo in cui nominiamo i file sul nostro pc. 

Partiamo con il creare sul desktop una cartella che chiameremo con il nome del sito che intendiamo realizzare. 

Dentro questa cartella dobbiamo creare altre tre cartelle con i seguenti nomi: 

  • img (per le immagini)
  • pages (per le pagine)
  • css (per lo stile, ne parleremo nell’articolo 5.

Sempre all’interno della cartella del nostro sito dobbiamo creare un file che, sempre per convenzione, chiameremo “index.html”. Alla fine di tutto ci ritroveremo con una struttura simile alla seguente:

quello che a noi interessa in questo momento è proprio il file index, apriamolo con un qualsiasi editor di testo (consiglio vivamente Atom o Vscode).

Cominciamo con il scrivere il codice di base che determina lo scheletro di una pagina html che è il seguente:

Una pagina è solitamente costituita da una “sezione iniziale” detta head nella quale andranno una serie di informazioni riguardanti il sito, il suo titolo, le parole chiave ecc…

Successivamente abbiamo la sezione body ovvero il corpo vero e proprio della pagina, tra i tag di apertura e di chiusura del body verrà scritto l’intero codice del nostro sito.

Salviamo adesso il file e andiamo ad aprirlo con un browser web (consiglio Google Chrome).

Il risultato sarà una schermata totalmente bianca, non chiudetela, ci servirà più avanti.

Popoliamo la pagina:

Adesso andrò ad inserire alcuni elementi di testo all’interno della mia pagina, salverò le modifiche e dal browser ricaricherò la pagina (simbolo dell freccina roteante).

Il risultato sarà simile al seguente:

Conclusioni:

Siamo riusciti a creare insieme una primissima bozza di una pagina web, l’abbiamo popolata e arricchita di contenuti, nelle prossime lezioni andremo a vedere meglio come strutturare la nostra pagina dandole uno stile coerente e per nulla anonimo.

Se vuoi un consiglio continua ad esercitarti inserendo nuovi elementi nella nostra pagina, ti tornano utili i tag studiati nelle lezioni precedenti.

Leave a Reply

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *

You may use these HTML tags and attributes:

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>