I tag HTML più utilizzati sono quelli per la formattazione del testo.

Il primo più importante è chiaramente il titolo della pagina, quindi il tag eh uno.

Il paragrafo si iscrive all'interno di un tag P e poi è possibile formattare il testo in grassetto in corsivo, inserire degli spazi, delle linee di separazione, eccetera.

Quindi vediamo degli esempi.

Ad esempio, inserendo questo testo intestazione all'interno di un account.

Questo compare in grassetto e con una dimensione del font più grande, mentre il testo inserito all'interno di un paragrafo comparirà come del testo semplice.

Vediamo un esempio.

Quindi, riprendendo il nostro file index HTML all'interno del tag body, possiamo anche fare degli spazi per leggere meglio il nostro codice.

Possiamo scrivere ad esempio il nostro account utilizzando sempre il tasto Tab e scrivere la nostra intestazione salvo il file.

Per comodità posso affiancare la finestra diviso Studio God con il mio browser, come abbiamo visto poco fa Visualizza in Esplora Fa il doppio click e mi si apre nel browser La mia pagina Ecco qui la mia intestazione per i titoli.

È possibile utilizzare i tag dall'acqua una all' h sei.

Questi sono in ordine di importanza, quindi il browser che cosa fa? Inserisce i tag man mano che aumenta il numero, quindi d'acqua una h due tre e via dicendo diminuisce la dimensione del font, quindi se io ad esempio crea un'intestazione due salvo mi sposto sul browser per aggiornare la pagina più velocemente posso utilizzare il tasto f cinque e vediamo che compare l'intestazione due.

Questa è un pochettino più piccola dell'intestazione di prima.

Quindi l'accaduto è il titolo di livello due, quindi di importanza leggermente inferiore rispetto all'account andando avanti con i nostri tag intestazione tre salvo aggiorno la finestra e vediamo che anche questo compare sempre più piccolo.

Questo via via con tutti i nostri tagli di intestazione.

Quindi ora li inseriamo tutti e vediamo il risultato l'intestazione cinque intestazione sei.

Eccoci qua.

Quello che è importante sapere è che il titolo che io scelgo non deve sceglierlo in base alla dimensione del font che voglio visualizzare, ma deve essere proprio l'importanza del titolo.

Quindi il titolo principale della pagina sarà sempre h uno, anche se poi lo vorrò di dimensioni inferiori e vedremo come si fa per inserire del testo semplice.

Abbiamo visto il rugby all'interno di questo tag p posso inserire appunto il testo che voglio visualizzare nella pagina.

Anche in questo caso, visto studio codec da a disposizione degli short food comodi per inserire dei contenuti riempitivi, quello che si usa di solito in tipografia e il loro mix um quindi io posso digitare Lorem tasto tab e mi compila con del testo segnaposto.

Questo è un testo che non ha alcun significato, però serve per visualizzare qualcosa nella pagina e alterna delle parole più lunghe delle parole piu' corte dei simboli di punteggiatura che simulano un testo verosimile.

Aggiorno sempre la mia pagina e trovo il testo scritto nella pagina.

Come vediamo il testo è allineato a sinistra e scorre per tutta la larghezza della pagina.

Quindi se io qui inserisco un altro Lorem, ad esempio salvo, aggiorno la pagina e vedo che si con catena.

Una prima cosa importante che notiamo è che nonostante io abbia utilizzato il tasto invio e sia andata a capo anche facendo diverse righe, inserisco un'altra frase nella mia pagina in realtà non compaiono le righe vuote.

Non va a capo, ma il testo viene concatenato alla frase precedente.

Questo perché? Perché lo gli spazi che noi inseriamo nella nostra nel nostro file html non vengono visualizzati nella finestra del browser per andare a capo.

Ci sono due alternative dipende un pochettino dal significato che noi vogliamo dare alla frase e al paragrafo.

Se si interrompe il paragrafo, quindi si inizia un nuovo discorso, si può utilizzare un secondo tag p e si crea un nuovo paragrafo e in questo caso vedremo il testo che va a capo e cioè un pochettino di spazi tettino tra il paragrafo precedente e questo qui.

Questo è un po' come quando siamo abituati a utilizzare ad esempio Ward.

Quando si va a capo si preme invio, si crea in automatico uno spazietto ino che separa appunto i paragrafi.

Se invece io non voglio questo spazietto posso ad esempio utilizzare un tag che si chiama BR.

Questo tag mi permette di mandare a capo il testo senza però creare questo spazio tra i paragrafi.

Aggiorno la mia pagina e vedo che in effetti il nuovo lorem è esattamente attaccato al paragrafo precedente, però va a capo.

Altri tag che possiamo utilizzare per la formattazione del testo sono ad esempio il tag strong e il tag, ma questi tag servono per formattare il testo, il primo in grassetto e il secondo in corsivo.

Questi sono tag semantici.

Che cosa significa? Significa che non contengono al loro nel loro nome la formattazione, mentre quello che succedeva una volta era utilizzare dei tag che che ora sono deprecato ti, che volevano proprio rappresentare lo stile, la formattazione del testo, mentre ora questi tag strong em servono proprio per dire quando un testo importante o dare enfasi a questo testo, a prescindere dallo stile che poi si sceglie per la visualizzazione.

Quindi se ad esempio prendo una parola a caso dei miei paragrafi e la inserisco all'interno di un tag st.

Rog, questo è il viso studio code che me lo compila in automatico.

Salvo aggiorno la pagina e adesso vediamo che questa parola è comparsa in grassetto.

Quindi strong mi identifica una parola importante del testo importante.

Chiaramente questo potrebbe anche essere una frase intera, quindi posso inserirlo alla fine della frase in modo da visualizzare l'intera frase in grassetto.

Il tag in invece sta per enfasi s' e mi permette di visualizzare del testo in corsivo.

Anche in questo caso la formattazione del testo poi io la posso modificare come come meglio preferisco di default il browser me lo visualizza in corsivo anche in questo caso possiamo inserire una parola o una frase intera html ci da' a disposizione anche dei tag per visualizzare delle liste.

Queste liste possono essere o puntate.

Ho numerate, quindi nel primo caso una lista puntata in inglese si chiama a nord liste, quindi una lista non ordinata e quindi il mio tag si chiama il che sta proprio per a nord.

Liste utilizzo sempre il tasto tab all'interno del mio tag al per andare a inserire tutti i vari elementi della mia lista devo utilizzare il tag è lì che sta per li stai tem.

In questo caso io non devo preoccuparmi di inserire il pallino all trattino perché sarà html che me lo visualizzerà in pagina correttamente.

Quindi ad esempio il primo elemento vado a capo crea un secondo tag li' vicino a quello precedente, sempre all'interno del tag u l il secondo elemento salvo aggiorno la mia pagina e visualizzo appunto il mio testo come elenco puntato.

Quindi che cosa sta succedendo? Il mio browser sta interpretando la mia pagina, sta interpretando i tag e sta visualizzando il relativo contenuto in base appunto i tag che sto utilizzando.

Cominciamo a vedere che la nostra pagina si sta arricchendo, è ci sono molti contenuti e molti tag html, quindi la prima cosa importantissima da fare da sapere è la l'ordine e Lynn.

Tentazione della del mio codice.

Quindi è importante che ogni programmatore scrive del codice ordinato e ben inventato.

Questo chiaramente al browser non fa alcuna differenza, perché abbiamo visto poco fa che gli spazi non vengono interpretati, non vengono visualizzati, però certamente aiutano i programmatori a leggere e comprendere in modo più semplice il contenuto della nostra pagina.

Quindi quando noi andiamo a inserire dei tag all'interno di altri tag, facciamo sempre questo rientro a sinistra.

Questi spazi qui ci sono sempre delle guerre tra i programmatori.

Chi utilizza quattro spazi, chi utilizza due spazi non fa una reale differenza, potete scegliere quello che preferite l'importante è che siate coerenti.

Quindi se cominciate utilizzando quattro spazi utilizzate sempre quattro spazi l'importante è sempre l'ordine e la pulizia del codice.

Vediamo un esempio di lista numerata.

In questo caso utilizziamo il tag o il che sta per ordered list.

Quindi una lista ordinata letteralmente anche in questo caso inseriamo il tag lei all'interno per creare gli elementi, quindi posso utilizzare lo stesso testo di prima primo elemento un altro rugby.

Il secondo elemento, salvo aggiorno la mia pagina, quindi vediamo che il testo che ho inserito è lo stesso sempre primo elemento e secondo elemento cambiando il tag padre che è al posto di wl scrivo o l e in questo caso il posto dei pallini.

Avrò i numeri quindi esattamente come siamo abituati, con ward che mi fa scegliere la lista puntata alla lista numerata.

Anche in questo caso, cambiando semplicemente un tag, cambia la visualizzazione del mio contenuto.

Posso poi andare a inserire una riga di separazione del mio testo per creare una riga, quindi un divisorio tra i contenuti della mia pagina.

Posso utilizzare ad esempio il tag hr che sta per orizzonte rullo, quindi una riga orizzontale aggiorna la pagina e mi compare proprio la riga di separazione del testo.

Questo è un modo che si usava un po' di tempo fa.

Adesso ci sono altri modi che vedremo nelle prossime elezioni per creare queste righe.

Questi bordi e sono più facili da gestire.

Però questo è sicuramente un modo semplice per inserire un divisorio tra i contenuti un'altra.

Cosa interessante è che si può andare a creare sempre con un tag è ad esempio un bottone.

Quindi utilizzando il tag button utilizzo sempre il mio tasto tab per l'autocompiacimento e se all'interno scrivo questo è un bottone salvo al giorno e mi compare proprio il bottone.

Questo bottone potrà cambiare formato.

Potrà cambiare stile in base al browser che state utilizzando il sistema operativo che state utilizzando, perché chiaramente è sempre il browser che decide come visualizzare questi contenuti.

Questi tag però in linea di massima sarà pur sempre un bottone.

Quindi possiamo distinguere i nostri tag in base a livello di tag significa ci sono dei tag che hanno un livello blocco, quindi che vengono rappresentati prendendo tutta la riga, quindi tutto la larghezza della pagina.

E poi ci sono dei tag definiti online che quindi stanno sulla stessa riga del loro contenitore.

In pratica quindi quelli tipici per la formattazione del testo, come il tag strong, il tam, il tag am e via discorrendo.

Ci sono poi dei tag speciali che sono self closing tax significa dei tag che non hanno bisogno del tag di chiusura.

Abbiamo visto il tag per abbiamo visto il tag HR.

Ce ne sono anche degli altri che scopriremo nelle prossime puntate quindi una cosa che abbiamo dato per scontato finora è il fatto che dei tag possono contenere degli altri tag.

Certamente sì, è la normalità.

Tutte le pagine web sono costruite in questo modo, quindi ogni tag sarà annidato in un tag genitore.

Anche il tag body stesso è il contenitore di tutto il contenuto della mia pagina.

Quindi, come dicevamo poco fa chiaramente importante mantenere il testo ordinato e ben inventato per migliorare la leggibilità di noi programmatori.

Ci sono poi dei tag speciali che non hanno un risvolto visivo, però hanno un ruolo di di separazione di contenitore, quindi non hanno un significato semantico, ma servono solo per contenere degli altri tag, per racchiudere il contenuto della pagina in diversi contenitori per poi poterlo visualizzare in modo differente.

Il primo contenitore di tipo blocco è il tag di v, che appunto non ha alcun significato semantico, non ha alcun risvolto di formattazione di stile, ma serve proprio come contenitore per tutti gli altri tag.

Un altro tipo di contenitore, questa volta di tipo online, è il tag spam, che appunto è un contenitore online e quindi non creerà una nuova riga, una una separazione orizzontale, ma si metterà a fianco a quello che è il suo contenuto vicino