Corso HTML e CSS (1^ lezione)

Impariamo a costruire un sito Web

Lezione 1: Introduzione

Subito una precisazione: tutti gli articoli che andranno col tempo a costituire il corso completo di HTML e CSS saranno rintracciabili sulla pagina Web Design oppure tramite la parola chiave ‘Corso HTML‘ .

Il corso inizierà dando tutti gli elementi necessari alla comprensione della materia anche a chi è realmente principiante, ma qusto non significa che non ci si addentrerà progressivamente in dettagli utili magari anche a chi principiante non è.

Premessa 1 – Avete sentito o magari già possedete qualcuno di quei meravigliosi programmi che permettono la costruzione di siti web in modo visuale? Dimenticateveli. innanzitutto non si impara così, e comunque non esiste alcun programma che consenta veramente di costruire un sito in modalità visuale. Si dovrà sempre intervenire sul codice. Lo strumento che useremo sarà quindi un editor di testo.

Premessa 2 – Che browser usate normalmente? Avete Internet Explorer versione 8 od inferiore. Perfetto conservatelo che ci servirà per testare il sito anche sul più arretrato dei browser. Dopodiché procuratevi un browser serio tipo Google Chrome, Firefox o magari entrambi e perché no anche Safari. Avere più Browser anche di versioni non recenti vi consentirà di verificare che quello che state facendo sia poi realmente visibile a tutti (od almeno ai più).

Premessa 3 – Avete un servizio di Hosting? Magari non sapete neppure cos’è? Non preoccupatevi. Inizialmente non ci serve. Dedicheremo in seguito un articolo a parte a questo argomento con qualche consiglio utile. D’altronde a che serve costruire un sito Web se poi non lo pubblichiamo?

Esaurite le premesse iniziamo con un po’ di nomenclatura:

  • HTML : E’ il inguaggio con cui si costruiscono pagine web statiche che poi viene interpretato dai browser per mostrare la pagina graficamente. E’ l’acronimo di Hyper Text Markup Language e come dice il nome non è un linguaggio di programmazione ma di “markup” che significa che contiene degli elementi che specificano come vada letta la pagina (se vogliamo un po come fa MS Word per formattare le pagine).
  • Elementi : Sono le parti costituenti la pagina HTML. Un esempio abbastanza evidente di elemento di una pagina HTML è il body che come dice il nome costituisce il corpo della pagina, quello che ingloba i contenuti che vogliamo mostrare. Gli elementi si individuano sulla pagina da due notazioni che identificano l’apertura e la chiusura dell’elemento stesso (vedi definizione successiva).
  • Tag : Sono le notazioni usate per delimitare un elemento della pagina. Per esempio il body è delimitato dai due tags <body> e </body>che sono appunto l’apertura e la chiusura del body. La notazione dei Tag prevede un nome  delimitato dai segni < e >.
    Come vedremo esistono anche tags che non delimitano alcun contenuto e che quindi non hanno una chiusura. Vengono chiamati Void Tags.
  • Attributi : Sono le caratteristiche a cui verrà assegnato un valore, che specificano il comportamento o l’aspetto di un elemento della pagina. Se per esempio inseriamo un box rettangolare, la larghezza, l’altezza, la posizione, il colore ecc. sono tutti attributi del box.
  • Evento : Un evento è un’azione od un processo che si attiva in concomitanza con l’azione di un utente (ad esempio un click, l’invio di un form ecc.). I comandi che attivano un evento verranno utilizzati per eseguire script Javascript.
  • MIME Type : Dice al browser come trattare delle specifiche estensioni di files. Ad esempio ‘text/css’ è il MIME Type che specifica un file CSS che vedremo presto. La tabella completa dei MIME Type la potete scaricare qui.
  • URL : E’ l’acronimo di Uniform Resource Locator ed è il protocollo usato dal browser per gestire gli indirizzi internet od accedere ai tuoi files sul server. Dietro ad un link che puoi cliccare c’è sempre un URL che ti conduce su una pagina internet, un file ecc.

Terminata questa parte un po’ noiosa, ma necessaria torniamo un attimo sullo strumento principale, browser a parte, che useremo, l’editor di testo. Potete usare ciò che volete, anche Notepad di Windows va bene. Io consiglio Notepad++ che è un programma Open Source con molte utili funzionalità aggiuntive; se per esempio nel menu scegliete Linguaggio –> HTML, vi aiuterà nella formattazione. Inoltre ci sono dei plugin tra cui uno chiamato HTML Tag che come dice il nome  aiuterà nella scrittura dei tag aprendo una finestra con l’elenco dei tag (purtroppo non sensibile al contesto) alla pressione dei tasti Ctrl+Barra spaziatrice.

Prima di chiudere la prima lezione introduttiva diciamo due parole sugli standard HTML L’ HTML infatti non è un linguaggio unico, ma ha, diciamo così, alcuni dialetti. Niente di particolarmente evidente o clamoroso, ma l’esistenza di queste differenze impone una dichiarazione dell’HTML usato come prima riga del file. E’ ciò che vedremo nella seconda lezione esaminando la struttura dei file HTML nelle diverse situazioni.

Diciamo subito che l’HTML5 di cui probabilmente avete letto, non verrà preso in considerazione, in quanto non è ancora uno standard riconosciuto (è ancora in fase di definizione) e un sito in HTML5 sarebbe inaccessibile alla maggior parte dei browser in circolazione attualmente.

Grazie e alla prossima.

2 thoughts on “Corso HTML e CSS (1^ lezione)”

Lascia un commento

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

Questo sito usa Akismet per ridurre lo spam. Scopri come i tuoi dati vengono elaborati.