Benvenuti alla seconda puntata di questo corso (parola grossa!) di HTML.
Prima di tutto, alcune puntualizzazioni:
- con questo corso non diventerete (o forse sì) dei famosi sviluppatori di contenuti per il web, ma conoscerete le regole per scrivere correttamente una pagina e avrete capito le basi che vi permetteranno di accedere al vastissimo, affascinante mondo del web dal lato opposto rispetto a quello in cui siete abituati a stare.
- Potrà servirvi come riferimento quando scriverete il vostro primo sito (un po’ come facevo io, da una parte il Notepad++ e dall’altra il browser con un articolo carino sull’HTML).
- Un link importante dal quale potrete imparare tantissimo, il sito W3 schools, in cui affondare a piene mani per approfondire la struttura dell’HTML oltre a sbizzarrirvi con alcuni simpatici test .
E adesso, fiondiamoci sulla nostra pagina web.
Ci eravamo lasciati con un foglio quasi bianco, se non fosse per quella riga che avevamo scitto, un po’ misera, non credete?
Provvediamo subito con due accorgimenti, che sono due assolute novità:
- lo stile della pagina
Lo stile della pagina è una delle cose più importanti, subito dopo il contenuto, è lui che ci indica il colore dello sfondo, il tipo di carattere, la dimensione, la posizione, etc. Ci sono due modi per “dire” alla pagina come vogliamo abbellirla: lo stile in linea, i cui attributi si inseriscono direttamente nel codice HTML e i fogli di stile o CSS (cascade style sheets).Per il momento lavoreremo con lo stile in linea, i CSS saranno oggetto della prossima puntata. - le intestazioni (headings)
nell’html gli headings sono sei, dal <h1> al <h6> e permettono al browser che li legge di capire la struttura della pagina, <h1> è il più grande e, di solito, si utilizza per il titolo principale, <h2> potrà andar bene per un sottotitolo.
Per cominciare, apriamo “index.html”, se non lo avete spostato è ancora sul Desktop, se lo avete spostato o cancellato, riscrivetelo ricopiando e incollando quello che vi avevo indicato nella precedente puntata.
Finalmente ho scritto la mia prima pagina!
Adesso inseriamo un’altra riga che farà da intestazione o titolo della pagina, tra la chiusura del tag <body> e l’apertura del tag <p> e scriviamo “La mia prima pagina” inserendo prima della frase il tag <h1> e alla fine </h1>.
<h1>La mia prima pagina</h1>
…Così facendo avremo inserito il titolo della pagina aprendo e chiudendo i tag dell’intestazione h1.
Salvate la pagina e visualizzatela con il browser:
Niente male!
Adesso, però, dobbiamo centrare il titolo, così proprio non mi piace, eccoci allo stile della pagina.
per centrare il nostro titolo non dobbiamo fare altro che dare delle indicazioni al browser, in questo modo:
posizionatevi dentro il tag <h1> e inserite dopo h1 questa riga di codice:
style="text-align:center;"
in modo tale che tutto il codice risulti così:
La mia prima pagina
Finalmente ho scritto la mia prima pagina!
Abbiamo allineato il titolo (h1) con una semplicissima regola inserita nello stesso codice che avevamo utilizzato in precedenza, questo si chiama “stile in linea”.
Soltanto un ultimo sforzo per questa lezione, mi piacerebbe cambiare lo sfondo della pagina, che ne pensate?
Magari un giallo o qualcosa di estivo dato il periodo.
Semplice:
Aggiungete questa riga al codice->
<body style="background-color:yellow;">
dopo </title> e prima di </head>, così il nostro codice finale diventa:
La mia prima pagina
Finalmente ho scritto la mia prima pagina!
Salvate e guardate il capolavoro (suggerisco un paio di occhiali da sole :D)!
Lo so, non è il massimo, ma in poco tempo avete già imparato tanto, siate contenti di voi !
La prossima puntata parleremo della formattazione del testo, tenetevi pronti 🙂
p.s.: i colori più importanti si inseriscono come ho fatto adesso, yellow per il giallo, red per il rosso e così via per pochi altri, per tutti i colori esiste un codice esadecimale, affronteremo anche questo importante capitolo.
Scarica i files
Puntata Finale:
USATE UN EDITOR HTML CHE FATE PRIMA!
Caro Parappa, grazie per il commento, anche se non lo capisco: tu scrivi “usate un editor HTML”, ma Notepad++ cos’è secondo te?
Se ti va di proporre delle alternative, ben vengano, i commenti senza logica non li capisco.
P.s.: nel prossimo commento utilizza un vero indirizzo e-mail, per favore 😉