Ci eravamo lasciati nella scorsa lezione http://tinformatizzo.blogspot.com/2010/12/la-prima-pagina-tag-principali-corso.html dopo aver creato la struttura di base della nostra pagina html.
Ora ci accingiamo a modificare il nostro file facendo uso di nuovi tag per dare un aspetto diverso alla nostra pagina.
Come già detto, tutto quello che possiamo visualizzare nel nostro browser è contenuto tra i tag <body> e </body> del nostro file, perciò è proprio in questa "zona" che andremo ad apportare le nostre modifiche.
Aprite dunque il file e aggiungete le parti che ho di seguito evidenziato in grassetto:
<html>
<head>
<title>Corso_HTML_base</title>
</head>
<body>
<p align="center">
<b>ciao mondo! E' bello fare le pagine html</b>
<br />
Chi va piano va sano e va lontano
<p align="right">
Saluti
</p>
</p>
</body>
</html>
Il risultato è il seguente:
Tag <p> </p>
Tutto quello che viene inserito tra questi tag viene considerato come un unico paragrafo.
E' possibile aggiungere degli attributi al tag. (gli attributi si aggiungono dopo il nome del tag separati da uno spazio e servono per fornire delle caratteristiche aggiuntive al contenuto dei tag.. in questo caso l'attributo è align="center")
Tag <b> </b>
Ciò che è contenuto in questi tag verrà visualizzato in grassetto
Tag <br /> (utilizzabile anche senza / dato che non ho riscontrato errori da parte dei browser finora..)
Tag particolare visto che è usato singolarmente senza il tag di apertura e serve per andare a capo.
Analizziamo quello che abbiamo fatto con questi tre nuovi tag nella nostra paginetta html:
1. Prima di tutto, volendo mettere in evidenza la nostra frase, ho messo "ciao mondo! E' bello fare le pagine html" tra i tag <b> e </b>. E infatti ora viene visualizzata in grassetto dal nostro browser.
2. Poi ho deciso di racchiudere questa frase in un paragrafo con i tag <p> e </p> messi rispettivamente prima e dopo "<b>ciao mondo! E' bello fare le pagine html</b>".
Perchè questo?
Perchè volevo mettere al centro della mia pagina la frase e per farlo avevo la necessità di utilizzare il tag <p> aggiungendo l'attributo "align" impostato sul valore "center" (align="center"). In questo modo ho detto al browser di centrare il paragrafo al centro della pagina.
3. Dopodichè, sempre all'interno del paragrafo ho utilizzato il tag <br />. In questo modo sono andato a capo. E ho scritto l'altra frase "Chi va piano va sano e va lontano" che, come possiamo vedere, è correttamente visualizzata dal nostro browser alla riga successiva (e sempre al centro visto che stiamo scrivendo sempre all'interno del paragrafo centrato).
Infine abbiamo inserito un altro paragrafo, stavolta allineato a destra (align="right"), con all'interno la parola "Saluti".
Notare che mettendo il secondo paragrafo interamente all'esterno del primo paragrafo in questo modo:
<html>
<head>
<title>Corso_HTML_base</title>
</head>
<body>
<p align="center">
<b>ciao mondo! E' bello fare le pagine html</b>
<br />
Chi va piano va sano e va lontano
</p>
<p align="right">
Saluti
</p>
Saluti
</p>
</body>
</html>Il risultato è praticamente identico!!!
Ma allora a che serve annidare i paragrafi se poi il risultato è lo stesso?
Beh in questo caso non si notano differenze, per questi particolari attributi che abbiamo utilizzato ma in altre occasioni che analizzaremo in seguito e con altri tag, è importante l'annidamento.
Ciao e alla prossima :)
Prossima lezione:Il tag div - Corso HTML di base
Nessun commento:
Posta un commento