Recommended
More Related Content
What's hot
Similar to HTML e CSS Seconda Lezione
Similar to HTML e CSS Seconda Lezione (20)
HTML e CSS Seconda Lezione
- 1. Ciò che consiglio sempre è suddividere una pagina in tante piccole divisioni e allineare essa grazie ai CSS. Il CSS (Cascading Style Sheets o Fogli di stile) è un linguaggio informatico usato per definire la formattazione di documenti HTML e XHTML. Ma andiamo subito al dunque e vediamo come suddividere una pagina.
- 2. Noi useremo un TAG per indicare le varie parti della pagina. Il TAG è <DIV> seguito al suo interno con un “id” che sarebbe l’identificativo della nostra parte di pagina. A pagina successiva vi è un esempio di allineamento di una pagina web.
- 3. Esempio: <html> <div id=“contenitore”> <head> <div id=“titolo”> <title> Questa è la mia prima pagina </title> </div> </head> <body> <div id=“navigazione”> </div> <div id=“collegamenti”> </div> <div id=“centro”> <h1> Ciao, Mondo </h1> </div> <div id=“coda”> </div> </body> </div> </html>
- 4. I TAG che prima abbiamo impostato e quindi le parti di pagina che ora abbiamo devono essere comunque richiamate in un CSS per essere impostate come vogliamo. Vediamo come fare. La dichiarazione di uno style di CSS avviene in questo modo: <style type="text/css"> #IdDelCampoCreatoDaNoi {text-align: center;} </style> In questo modo abbiamo dichiarato il nostro CSS nel seguente modo: Centra tutto il testo del pezzo da noi dichiarato secondo lo schermo del computer pur non avendo la grandezza della pagina web. Nel caso vorremmo centrare la nostra pagina web e avessimo dato una dimensione fissa alla pagina basterà dichiarare il tutto direttamente sul container (o contenitore) in questo modo: #contenitore { width:”GrandezzaPaginaInPixel”px; margin:0 auto }
- 5. NB:Questo tipo di attributo può essere utilizzato nella maggior parte dei TAG HTML. align=“valore” Qui di seguito vi è una tabella con i valori che il seguente attributo può assumere: Align=“…” Significato Center righe di testo allineate al centro Left righe di testo allineate a sinistra Right righe di testo allineate a destra Justify righe di testo allineate su entrambi i margini
- 6. Un paragrafo è una porzione di testo separata dalle altre da una riga di spazio o semplicemente un ritorno a capo. Per definire un nuovo paragrafo si usa il TAG: <p> Testo del paragrafo </p> É possibile inoltre impostare l'allineamento del testo utilizzando l’attributo align=“valore“ Esempio: <p align=“center”> Testo del paragrafo </p> In questo caso il testo contenuto nel paragrafo sarà centrato all’interno della pagina.
- 7. Alcune parti di testo possono essere evidenziate utilizzando uno stile diverso dal testo normale come il corsivo, il grassetto e il sottolineato. La parte di testo da evidenziare deve essere racchiusa tra una delle seguenti coppie di TAG: TAG Significato <i>…</i> ITALIC: Testo in corsivo <b>…</b> BOLD: Testo in grassetto <u>…</u> UNDERLINE: Testo sottolineato
- 8. A differenza di quanto avviene nei programmi di word processing, in HTML inserire un ritorno a capo (mediante il tasto INVIO) durante la scrittura del testo non produce l’effetto desiderato, occorre invece utilizzare il TAG: <br> TAG Effetto <p> Ciao, come stai? </p> Ciao, come stai? <p> Ciao, Ciao, come stai? come stai? </p> <p> Ciao,<br>come stai? </p> Ciao, come stai?
- 9. Può essere utile separare un paragrafo da un un’altro mediante una linea orizzontale utilizzando il TAG: <hr>
- 10. Più spazi di seguito vengono raggruppati in unico spazio: <hr> TAG Effetto <p> Ciao, come stai? </p> Ciao, come stai? Per evitare questo occorre inserire il testo tra i TAG: <pre> Testo </pre> TAG Effetto <p><pre> Ciao, come stai? </pre></p> Ciao, come stai?
- 11. Il font del testo che digitiamo può essere modificato con il TAG: <font> Testo </font> Ovviamente questo TAG per modificare il nostro testo deve possedere almeno un attributo dei seguenti: Attributo Significato <font face=“NomeFont”> Cambia il font del testo che segue <font color=“Valore”> Cambia il colore del testo che segue <font size=“Valore”> Cambia la grandezza del testo che segue
- 12. 1. Creare una pagina HTML che abbia come titolo: “La mia seconda pagina”, e come titolo principale nel corpo la seguente stringa: “Ciao, Mondo. Questa è la mia seconda pagina!”. 2. Lo sfondo deve essere una immagine che tu preferisci e i testi devono essere “bianchi”. 3. Deve essere presente il paragrafo “Questo è un nuovo TAG che ho imparato” di colore “Rosso” con font “Calibri” e una grandezza di “4”. 4. Tracciare una linea che separi il primo titolo della pagina con il paragrafo. 5. Inserire un secondo paragrafo con il testo “Vi piace la mia pagina web?” poi andate a capo e dopo scrivete “A me si!”, tutto il paragrafo deve essere in grassetto. NB: Tutta la pagina deve essere allineata e centrata con il browser del computer, la pagina ha dimensione di 1000px.