|
|
|
|
|
|
Il Tag BODY e i coloriOra procederemo con l'aggiungere il contenuto alla nostra pagina web, per far questo (sempre utilizzando lo stesso file di prima) scrivere in mezzo a "<html>" e "</html>" i seguenti Tag:
ottendendo in totale il seguente codice:
Salvate e visualizzate la pagina facendo doppio clic sul file o premendo il tasto "Aggiorna" del vostro browser. Il risultato sarà una pagina vuota con la semplice scritta: La mia pagina web personale. Nel Tag "<body>" è possibile specificare molte informazioni utili, quali il colore del testo, il colore dei link, lo sfondo della pagina, sia inteso come colore che come immagine (texture).
I colori in HTMLI colori in HTML si specificano utilizzando il sistema RGB (Red, Green, Blu, cioe' rosso, verde, blu) scrivendoli in esadecimale, con il prefisso "#", miscelando questi valori è possibile ottenere tutta la scala cromatica. Per esempio il colore rosso e' rappresentato dai valori RGB 255,0,0. La scala RGB va da 0 a 255, quindi il valore 255,0,0 significa che il rosso e' in quantità massima e che il verde e il blu sono completamente assenti, quindi il risultato è che avremo un colore rosso acceso, e questo in esadecimale di scrive "#ff0000". Il blu in RGB è uguale a 0,0,255 e in esadecimale lo 0 si scrive con "00" e il 255 di scrive con "ff", quindi si traduce in "#0000ff", e così via. Per le varie sfumature e colori fare riferimento ad una tabella colori in esadecimale, oppure potete utilizzare programmi appositi che miscelano i colori e restituiscono il valore esadecimale. Colore del testoIl colore del testo (se non differentemente specificato) è preimpostato su nero, per specificare un colore diverso, per esempio giallo, bisogna aggiungere, al Tag "<body>" il seguente attributo "text":
Colore dello sfondoIl colore dello sfondo preimpostato è bianco, ma possiamo sia cambiarlo che utilizzare una texture, o una foto, come immagini di sfondo. E' consigliabile evitare di scegliere colori molto forti come sfondo in quanto potrebbero infastidire l'utente che visita il vostro sito, quindi ridurre la sua permanenza o addirittura spingere gli utenti ad andare altrove quasi subito. Per semplicemente il colore di sfondo, per esempio azzurro chiaro, dobbiamo aggiungere l'attibuto "bgcolor":
Se si visualizza la pagina nel browser si vedrà che lo sfondo ha assunto un colore azzurro chiaro. Per impostare invece una texture di sfondo abbiamo bisogno di un'immagine, questa non deve essere troppo grande o pesante altrimenti aumenterà il tempo di scaricamento. Uno sfondo adatto è rappresentato dall'immagine sotto riportata, se non hai nulla a portata di mano puoi scaricarla e salvarla nella cartella che hai creato precedentemente insieme al file HTML che hai creato.
Per inserire questo sfondo nella tua pagina bisogna inserire la specifica "background" al Tag "<body>", come sotto riportato:
Salva e visualizza la pagina, vedrai che ora questa presenterà uno sfondo uniforme composto da tante copie, affiancate in righe e colonne all'infinito, di questa immagine scelta e, scorrendo in basso nel caso in cui la pagina abbia un lungo testo) lo sfondo scorrera' insieme alla pagina, cioè il testo sembrerà stampato sullo sfondo come se questo fosse una carta, se invece vogliamo ottenere l'effetto che il testo sembri stampato su un lucido che scorre sullo sfondo fisso dobbiamo aggiungere un'ulteriore specifica, cioè "bgproperties", quindi:
Questo è molto comodo quando, per esempio, come sfondo ultilizziamo una grande immagine che rimane fissa e non scorre, però è sconsigliabile utilizzare quest'ultima specifica per lo sfondo in quanto non tutti i browser la supportano, e il fine del buon sviluppatore web è di realizzare siti che siano visibili ugualmente da differenti browser in modo da rendere un'immagine unica per tutti i visitatori. Nota: è possibile mettere lo sfondo in una sottocartella, per esempio al fine di organizzare meglio i files nel sito, in questo caso si dovrà specificare il percorso relativo dalla directory dove si trova il file html alla directory e al filename che rappresenta lo sfondo. Poniamo il caso che lo sfondo si trovi nella cartella "images", nel valore dell'attributo "background" dovremo specificare, al posto di "sfondo.jpg", il seguente valore: "images/sfondo.jpg". Nota: se si utilizzano contemporaneamente sia il colore di sfondo (bgcolor) che una texture (background) quest'ultima andra' a coprire completamente il colore di sfondo, pertanto se decidiamo di utilizzare una texture di sfondo è inutile specificare anche il colore in quanto non cambierà nulla nella visualizzazione finale della pagina.
Colore dei linkI link (o collegamenti) verranno trattati più avanti, tuttavia nel tag "<body>" è possibile specificarne i colori in quanto è proprio qui che si impostano gli attributi generali di una pagina web. Le proprietà dei colori dei link hanno 3 diverse specifiche relative ad un link visitato, ad un link non visitato, e ad un link attivo, cioè mentre lo si clicca, e queste 3 differenti specifiche sono: "link" per i link non visitati, "vlink" per i link visitati, "alink" per i link attivi o mentre si cliccano. Nell'esempio vogliamo far si che i link nella nostra pagina siano blu intenso quando non sono mai stati cliccati, blu dopo che sono stati cliccati, e neri mentre si cliccano, quindi aggiungeremo questi attributi al Tag "<body>":
Nota: Se non viene specificato nessun colore i colori saranno: blu primario per i link non visitati, viola per i link visitati e rosso per i link attivi.
Riassumendo...Ora scriveremo un file html contenente tutte queste specifiche sopra descritte, quindi:
Salva e visualizza il file nel browser, avrai una pagina azzurra con una scritta gialla e nessun link in quanto non è stato ancora inserito. La scritta gialla è illeggibile quindi cambiamola in nera sostituendo: text="#ffff00" con text="#000000" quindi salva e visualizza, ora la scritta è leggibile, ma cambiamo anche lo sfondo con la texture, per far questo eliminiamo la specifica: bgcolor="#ccffff" e sostituiamola con: background="sfondo.jpg" Il codice HTML definitivo è questo:
Se viene visualizzato nel browser si vedrà una pagina con una texture di sfondo uniforme e la scritta sopra in nero. Il prossimo passo sarà di aggiungere un titolo e formattare il testo. |
Powered by PM Digital Studio P.Iva 01467900435 |
