I Tag
Intestazioni
Nell’HTML ci sono vari tipi di intestazioni che vanno dal titolo principale (h1) al testo più piccolo in assoluto che è l’h6. In poche parole si usano per indicare dal testo più importante che è scritto con caratteri più grandi al testo meno importante scritto più piccolo.
<h1> = Titolo Principale
<h2> = Sottotitolo
<h3> = Si usa spesso per i commenti di un blog o di una foto
<h4>, <h5>,<h6> = Tag utilizzati quando si vuole rendere il testo meno importante del paragrafo (testo racchiuso tra <p> e </p>), utilizzando font di dimensione più piccola.
Faccio un esempio, in modo che capiate l’importanza delle intestazioni nell’HTML:
<h1> = 34px
<h2> = 28px
<h3> = 24px
<p> = 20px
<h4> = 16px
<h5> =14px
<h6> =12px
Link
Per usare un Link in HTML si usa il tag <a>, per indicare la destinazione si usa href quindi per mettere un link sulla propria pagina web, ad esempio condividere il sito di Facebook si utilizza:
<a href=”www.facebook.com”>Facebook </a>
Immagini
Per inserire un immagine si utilizza il tag , per cercare l’immagine si usa l’attributo src ed inoltre è obbligatorio inserire l’attributo alt che, in caso l’immagine non si veda, aggiunge un testo alternativo ad essa. Opzionali gli attributi width (lunghezza) e height (altezza) per ridimensionare la foto.
Esempio:
<img src= "casa.jpg" width= "320px" height= "220px" alt= "La mia casa" />
Come potete notare dall’esempio il tag img non ha la controparte di chiusura </img> ma si aggiunge solo il backslash alla fine del tag.
Bottoni
Per inserire un bottone si usa il tag <button>, ad esempio:
<button> Clicca qui </button>
Liste
Le liste si dividono in liste ordinate/numeriche ( <ol> ) e liste non ordinate/puntate (<ul>) e ogni elemento nella lista viene raffigurato dal tag <li></li>
.Esempio di lista ordinata:
<ol>
<li>Elemento 1</li>
<li>Elemento 2</li>
</ol>
Esempio di lista non ordinata:
<ul>
<li>Elemento 1</li>
<li>Elemento 2</li>
</ul>
Come potete vedere sono praticamente identiche cambia solo l’utilizzo di ol o ul, la differenza però è presente quando viene visualizzata l’elaborazione nel browser: con ol avremo un risultato di un elenco numerato, mentre utilizzando ul avremo un elenco puntato.
Esercitatevi ad usare una volta una lista con ol e successivamente modificare ol in ul o ad aggiungere un’altra lista.
Inserire una riga bianca
A volte è importante saltare una riga (break row in inglese) per aggiungere uno spazio bianco e rendere il testo più piacevole da leggere, in HTML si usa il tag <br> (break row appunto) ed è un tag che non ha quello di chiusura.
Per inserire una riga bianca dunque si usa <br> ma è preferibile utilizzare il tag <br /> che indica che è un tag che si apre e si chiude nello stesso momento.
L’HTML non è Case Sensitive
L’HTML non è Case Sensitive, ossia si può usare indifferentemente un tag sia scritto in minuscolo che maiuscolo, ma la Standard W3C richiede che sia scritto in minuscolo, anche per la retrocompatibilità con il xHTML.
Si può usare <P> e <p>, ma è preferibile e consigliato utilizzare <p>. Iniziare subito a rispettare lo standard W3C è un buon modo per imparare nel migliore di modi l’html.
Unica eccezione il tag iniziale <!DOCTYPE html> il DOCTYPE viene sempre inserito in maiuscolo ma il restante codice va scritto tutto in minuscolo, ricordatevelo!