corso-base-html-primi-passi

Corso base HTML e CSS: I Primi Passi

Come già spiegato nell'articolo "Perché bisognerebbe studiare HTML & CSS nel 2021?", conoscere le basi fondamentali del linguaggio HTML  (HyperText Markup Language) ad oggi, per qualcuno potrebbe risultare obsoleto e magari si potrebbe pensare che si tratti di qualcosa destinato prettamente ad un pubblico amatoriale piuttosto che ad un’utenza di professionisti, ma non è affatto così, per questo abbiamo strutturato il nostro Corso base di HTML e CSS

Se sei finito su questa pagina, che tu sia un developper o un newbie della materia poco importa poiché se sei qui c è un motivo. Probabilmente il contenuto della tua ricerca e le risposte ai tuoi perché ti hanno condotto qui tramite le vie di “zio Google” oppure semplicemente vuoi accrescere le tue nozioni della materia e siamo felicissimi di esserti utili per farlo.

In Visual-Art trattiamo con molto rispetto ogni linguaggio in quanto per noi, anche i linguaggi di programmazione ormai obsoleti, rappresentano l’evoluzione dello sviluppo, sia software che web, fino ad arrivare a tutto ciò che ad oggi ci consente di sviluppare progetti di web design non indifferenti.

In questo preambolo del nostro Corso Base oggi vediamo 2 tra i tag HTML più importanti e fondamentali per la struttura di una pagina costruita con criterio, rispettando i canoni logici del web e delle pagine web

HTML – WHAT?

Il file HTML (O semplicemente "htm" per i developpers che operano su pc MS-DOS, e quindi dispositivi in cui non sono ammesse estensioni a quattro lettere), non sono nient’altro che file di testo basati prettamente su codice ASCII.

I file HTML non solo sono file di facile lettura per il dispositivo ma per via di questa caratteristica distintiva sono anche file facili da gestire in termini di trasmissione telematica.

ALT!

Non fare confusione, però, con i semplici file di testo poiché i file HTML si differenziano dai file di testo in quanto al loro interno sono contenute istruzioni programmate mixate in maniera corretta con il testo. Le pagine HTML sono quindi pagine scritte con un certo criterio, ordine e linguaggio standard che è, appunto, l’HTML.

Quando navighi sul Web, il browser che utilizzi (che tu stia utilizzando Chrome, Mozilla, Safari, ecc) è predisposto all’interpretazione automatica del linguaggio HTML per trasformare ogni singolo comando in caratteristiche grafiche. Comprendi bene, quindi che redigere una pagina in codice HTML non è poi un giochetto da ragazzi ma è un vero e proprio lavoro.

Non vogliamo burlarci di te né osare con la tua pazienza quindi facciamo subito un esempio tecnico-pratico per darti un assaggio di quello che abbiamo detto fin’ora

ES. 

Per scrivere un testo in grassetto scriveremo:

<strong>visual-art</strong>

E siccome il browser è programmato per restituirci visualmente in grassetto tutto ciò che sta tra <strong> e </strong> il risultato finale sarà

visual-art

ISTRUZIONI HTML – TAG

Da ciò che ci siamo detti nel paragrafo precedente, probabilmente, qualcosa inizia ad esserti più chiaro: le istruzioni HTML e quindi i TAG sono sempre contenuti tra le virgolette (quelle basse per intenderci < >) e si possono accoppiare affinchè sanciscano l’inizio e la fine dell’istruzione stessa come nell’esempio precedente: <strong> (inizio testo in grassetto) e </strong> (fine testo in grassetto).

 Chiaramente non vale la stessa regola per tutti i TAG (o istruzioni se ti piace di più il termine).

Non tutti i TAG  hanno bisogno di essere accoppiati e proprio per questo ce ne sono una minoranza che non necessitano una fine sancita. Pensaci bene, quale potrebbe essere un’istruzione che non ha bisogno di essere conclusa?

Ancora non ti viene in mente?

Te la spoileriamo noi.

L’istruzione “testo a capo” è l’esempio più semplice per fissare bene in mente questa caratteristica. In linguaggio HTML si sancisce l’istruzione semplicemente anteponendo <BR> prima del testo di riferimento.

Con questo abbiamo già capito alcune cose: le istruzioni (tags) sono sempre contenute fra < e > , e possono essere accoppiate, ovverosia sono costituite da un'istruzione. Ovviamente esistino una miriade di TAG HTML ma oggi ci soffermiamo solo sulle funzionalità basiche di questo linguaggio in modo da non confonderti le idee con una mole di nozioni troppo grande.

ISTRUZIONI STRUTTURALI FONDAMENTALI

Nonostante esistano innumerevoli editor per scrivere e visulaizzare linguaggio HTML, come per esempio il nostro preferito, ATOM, al quale dedicheremo un articolo ad hoc molto presto, il browser e l’ausilio di Notepad sono la risposta più semplice ed immediata per chi non vuole prendere dimestichezza sin da subito anche con un nuovo software e le funzionalità annesse.

Se editi in linguaggio HTML, il browser è il tuo migliore amico e deve sapere tutto ciò che stai facendo, proprio per questo gli devi dire dove inizia e dove finisce il file HTML

Come?

Ti basterà utilizzare semplicemente i TAG <HTML> e </HTML>.

Altre caratteristiche fondamentali del file HTML sono la testa (HEAD) ed il corpo (BODY) e naturalmente, anche qui, bisogna dire al browser dove inizia e finisce la testa e dove, invece, il corpo.

Si fa così: <HEAD> </HEAD> e <BODY> </BODY> .

 Pertanto un file HTML “nudo e crudo” contiene sempre ed obbligatoriamente queste istruzioni che al netto di altre funzioni ed istruzioni appariranno così:

<HTML>
 <HEAD>
 </HEAD>
 <BODY>
 </BODY>
</HTML>

Cosa c'è nella sezione HEAD del file?

Normalmente ci si mette il titolo della pagina, che comparirà nella fascia in alto dello schermo, al di sopra dei vari menù e tasti interattivi.

Come?

Semplice, si usano le seguenti istruzioni (TAG): <TITLE> </TITLE>

Ma facciamo anche qui un esempio tecnico-pratico per capirci

ES:

<HTML>
 <HEAD>
  <TITLE>CORSO BASE HTML E CSS: I PRIMI PASSI</TITLE>
 </HEAD>
 <BODY>
 </BODY>
</HTML>

Non correre cowboy!

Lo sappiamo che il tuo pensiero primordiale è stato “e nel body?”
Nel body c'è tutto il resto.

Ora lo vediamo insieme.

Come abbiamo già avuto modo di capire,il TAG <BODY> identifica il corpo della pagina, cioè la "porzione visibile" di un qualsiasi documento redatto in linguaggio HTML.

<HTML>
 <HEAD>
  <TITLE>CORSO BASE HTML E CSS: I PRIMI PASSI</TITLE>
 </HEAD>
 <BODY>
  Questo è il contenuto del tag "BODY", e sarà visualizzato all'interno del nostro     documento HTML
 </BODY>
</HTML>

CONCLUSIONI

Questo articolo finisce qui. Non vogliamo rischiare certamente di farti uscire il fumo dagli orecchi, sappiamo che ti abbiamo acceso il lume della curiosità e che certamente ci chiederai approfondimenti a riguardo.

Ti diciamo di più, ogni settimana, tramite i nostri articoli pubblicheremo una sezione che riguarderà appunto questo Corso base di HTML e CSS proprio come abbiamo fatto oggi.

Trascorreremo insieme un po’ di tempo per approfondire la materia, perché no, anche in termini ludici per non annoiarti. Amiamo quello che facciamo e ci piacerebbe lo amassi anche tu. Chiaramente ogni nuovo argomento avrà una curva di apprendimento ad hoc ma cercheremo di alleggerirla il più possibile.

Non esitare a contattarci per saperne di più o per toglierti dei dubbi che ti sorgono, saremo felici di risponderti.

Al prossimo appuntamento con il Corso base di HTML e CSS