copertina

Basi dell'HTML

Articolo di Fabio Compagnoni

Articolo pubblicato il 02/04/2019

Introduzione

Iniziamo con il dire che l'html non è un linguaggio di programmazione.
Ma allora cos'è??
Vi rispondo dicendovi che è un linguaggio di markup, ovvero un linguaggio che serve per l'impaginazione e formattazione, insieme al CSS, di siti web e documenti ipertestuali.
Il linguaggio html è un linguaggio di dominio pubblico, stabilito dal World Wide Web Consortium (W3C).


Tag

L'html come linguaggio è determinato da dei tag che sono per esempio body. Quali sono questi tag?
Ce ne sono molteplici ma quelli che vi servono per capire e iniziare a scrivere con questo linguaggio sono i seguenti.

Ci tengo a dire che il linguaggio non è sempre stato così ma nel corso degli anni ci sono stati dei miglioramenti, infatti tutt'ora stiamo usando html5, mentre fino a qualche anno fa si usava html4 e inferiori.
E che l'html da solo serve a poco, infatti va accompagnato a CSS che non è altro che un file con estensione .css, è un foglio di stile dove vengono specificati dei tag a livello grafico, come colore, altezza, larghezza e molto altro.
Vi lascio ad una guida per i css a questa pagina CSS


Come creare un foglio html

Sembrerà una stupidata ma questo punto è molto importante.
Per creare un file html serve essenzialmente un notepad, per intenderci quello di windows va benissimo.
Ma se vogliamo ottenere una esperienza grafica più pulita, chiara e avere delle funzioni molto comode che non ci sono nel classico notepad, vi consiglio qualche programma.

Tralasciato il fatto del file, adesso vi faccio vedere subito qual'è la struttura base di un file html, poi dopo vi spiegherò ogni singola parte.


Head

Il tag head è un tag che serve per impostare un idea di testa della pagina, ma questa sezione serve per mettere cose che non si vedono come il titolo della pagina, il favicon, aggiungere css esterni con il tag link.
Questo tag quindi ha molteplici funzioni.

Body

Con il tag body si intende il corpo della pagina, quindi tutto ciò che è visibile e si trova in centro possiamo dire.

Div

Il tag div è un tag molto importante perchè permette di dividere la vostra pagina html in più sezioni personalizzabili con i css, dandogli un nome facendo
e personalizzando poi con i css mettendo .nome
Oltre a questo hanno molte altre funzioni.

a

Il tag a serve per inserire un collegamento ipertestuale come link che possono essere interni o estreni, quindi interni se interni al server quindi basta inserire la directory interna es <$a href="/articoli/25-01-19/peppino.php"> questo è un collegamento interno a peppino.php
Io ho messo $ perchè senno non appariva quello che scrivevo, quindi voi ovviamente non dovete metterlo.
Ma si può usare anche per inserire numeri di telefono, mail ...
Per le mail è <$a href="mailto:vostramail@mail.com">
Per i numeri di telefono è <$a href="tel:3891231539"> (il numero è puramente casuale, non provate a chiamarlo)

p

Il tag p serve per inserire un paragrafo di testo.
Viene accompagnata dal tag br/ che serve per andare a capo
e dal tag b per mettere in grassetto, i per dare l'effeto corsivo, u> per sottolineare.

ul li

Questi tag servono per creare un elenco puntato.
Risptettivamente si mette prima ul> per creare l'elenco e questo va all'inizio e alla fine
poi i tag li> servono per definire i singoli punti.
Per definire la tipologia dell'elenco vi rimando
qui dove viene spiegato in modo approfondito e ci sono tutti.

titoli (h1, h2...)

Questi tag rispettivamente h1 fino a h6 servono per definire titoli e sottotitoli di tutte le dimensioni, come sempre è possibile definirne l'aspetto grafico con i css

La mia piccola guida sui fondamentali dell'html è finito.
Se voleste precisazioni o non vi foste chiaro qualcosa potete contattarmi tramite i commenti sotto l'articolo oppure scrivendomi qui fabiocompagnoni@smanettone.eu