CarnackyWeb http://www.carnackyweb.com Appunti di vita digitale Fri, 23 Dec 2011 13:25:47 +0000 en hourly 1 http://wordpress.org/?v=3.3 1. Introduzione ai CSS (fogli di stile) http://www.carnackyweb.com/1-introduzione-ai-css-fogli-di-stile/ http://www.carnackyweb.com/1-introduzione-ai-css-fogli-di-stile/#comments Fri, 23 Dec 2011 13:25:47 +0000 Carnacky http://www.carnackyweb.com/?p=134 . . . . . .]]> Con questa nuova lezione introduciamo il concetto di stile del sito. Quello che stiamo apprendendo nel corso di HTML ci porterà a produrre delle pagine web ben strutturate, semanticamente corrette. Cosa vuol dire? Che ogni elemento sarà posto dove è giusto che sia, col nome appropriato che ne identifica sia la posizione che la funzione. Per poter, però, assegnare alla struttura una certo stile grafico, aggiungere bordi, immagini, colori e tanto altro, abbiamo bisogno dei fogli di stile (CSS).
Una prima precisazione da fare, per poter apprendere bene i concetti che andremo ad esplicare man mano, è che in una pagina web gli elementi sono suddivisi in due macro categorie: elementi di blocco e elementi inline, in linea. Gli elementi di blocco producono interruzioni di linea e generano un box vero e proprie nel quale è contenuto l’elemento, spezzando, diciamo, il flusso normale del documento. Gli elementi inline, invece, seguono il flusso, non producendo interruzione alcuna.
Un’altra distinzione, poi, è quella tra elementi rimpiazzati ed elementi non rimpiazzati. Per i primi, il browser, che, come abbiamo detto, è il programma che interpreta le informazioni che gli diamo per poter visualizzare le pagine web, conosce solo le informazioni intrinseche, cioè le informazioni dell’elemento stesso e non dal box creato dal tag. Un esempio di tale comportamento è dato dal tag <img>. Infatti il browser mette, al posto del tag, l’immagine stessa richiamata dall’attributo src del tag.
Fatte queste premesse, passiamo ora ad addentrarci nella spiegazione di quelli che sono i CSS e di come vengono utilizzati. In questa prima lezione vedremo come includerli in un file .html e quali siano i vantaggi di questa suddivisione tra struttura e stile.
Per prima cosa, avere un unico file .css che racchiude tutti gli stili che andremo ad applicare al nostro sito web è sicuramente un vantaggio. Se pensiamo ad una sola pagina web, è ovvio che il vantaggio si riduce notevolmente fino a non averne affatto (ce ne sono ancora però), ma se pensiamo ad un sito di molte pagine, avere un unico foglio di stile porta ad una gestione del sito molto più snella ed efficace. Dover cambiare un font in 300 pagine con una sola dichiarazione è sicuramente un vantaggio, non trovate??
Vediamo ora come utilizzare un foglio di stile .css: possiamo includere il file .css nelle pagine html, utilizzare stili interni e stili in linea. Vediamo qualche esempio:

Inclusione all'inizio di un documento html:
    <head>
        <title>Titolo del documento</title>
        <link rel="stylesheet" type="text/css" href="stile.css">
    </head>
 
Stili interni tra i tag <style> </style>:
    <head>
        <style type="text/css">
        body{
             background-color:white;
        }
        </style>
    </head>
 
Stili in linea:
<body style="background-color:white;">

C’è anche un altro metodo, utilizzando la direttiva @import, ma tale funzionalità la analizzeremo più avanti. I metodi appena descritti sono quelli maggiormente utilizzati, andiamoli ad analizzare. Collegare un foglio di stile esterno, con estensione .css, ad una pagina html è alquanto semplice, si utilizza il tag <link> con gli attributi rel impostato a stylesheet, type impostato a text/css e href con il percorso, assoluto o relativo, del file .css da incorporare. Se vogliamo uno stile particolare per una sola pagina, che differisce quindi da quello per tutte le altre del nostro sito, possiamo utilizzare il tag <style>, anch’esso, come il tag <link> posizionato all’interno dei tag di apertura e di chiusura dell’HEAD. Il tag style ha due attributi, type che è obbligatorio e deve essere impostato a “text/css” ed un altro, media, che può essere impostato a vari valori, a seconda del media, del mezzo, che andrà a coinvolgere con le sue direttive. Di default, quindi se non viene scritto esplicitamente, esso è impostato a screen, che è quello maggiormente utilizzato. Altri valori saranno analizzati nelle appendici di questo corso. L’ultimo metodo è quello di utilizzare l’attributo STYLE per i vari tag all’interno della nostra pagina.
Nella prossima lezione analizzeremo la struttura delle direttive di un foglio di stile e come scrivere il nostro primo foglio di stile a cascata. Inoltre cercherò di spiegare meglio l’utilizzo dei vari metodi di impostazione di un foglio di stile appena descritti, non mancate!

Share

]]> http://www.carnackyweb.com/1-introduzione-ai-css-fogli-di-stile/feed/ 0 2. Struttura di un file .html http://www.carnackyweb.com/2-struttura-di-un-file-html/ http://www.carnackyweb.com/2-struttura-di-un-file-html/#comments Wed, 21 Dec 2011 10:04:10 +0000 Carnacky http://www.carnackyweb.com/?p=113 . . . . . .]]> Iniziamo dunque ad entrare nel vivo della questione! Come è strutturato un file .html? Innanzitutto un file .html non è altro che un semplice file di testo che ha, come estensione, .html o .htm. Tale estensione fa sì che il file venga riconosciuto dal browser ed interpretato dal suo motore di rendering in modo appropriato. Il motore di rendering non fa altro che prendere i tag, riconoscerli, e mostrare il documento correttamente formattato secondo le specifiche dettate dal w3c. Nelle appendici parleremo diffusamente della storia del web e della guerra tra i browser prima e della guerra tra gli standard poi.
Vogliamo allora provare a scrivere un file html? Possiamo usare qualsiasi editor di testo, anche il semplice BloccoNote di Windows può andar bene. Dopo averlo scritto, però, dobbiamo salvarlo con estensione .html, questa è l’unica cura che dobbiamo avere.
 
Quindi, il nostro primo file html avrà questa struttura:

<!DOCTYPE HTML>
<html>
    <head>
        <meta charset="utf-8">
        <title>Titolo del nostro documento</title>
    </head>

    <body>
    </body>
</html>

Dopo aver salvato il file, facendovi doppio click, dovreste vedere apparire una pagina completamente bianca nel vostro browser predefinito e, nella barra del titolo, il titolo che avrete inserito tra i tag TITLE. Analizziamo ora questa struttura che, seppur minimale, ci può già dare un’idea di come impostare le nostre pagine html.
Ogni documento html deve necessariamente iniziare con un DOCTYPE. Esso indica il tipo di documento che stiamo scrivendo ed indica al browser come comportarsi. Ora, come si può vedere, esso è davvero breve, indicando solo che si tratta di un documento HTML, ma prima, la stringa che identificava il documento, era abbastanza lunghetta (non bisognava certo impararla) e, per ogni numero di versione dell’HTML/XHTML esistevano più doctype, indicanti i vari tipi (es. XHTML strict, transition e via dicendo). Con l’avvento di HTML5 il doctype si è ridotto così come lo potete vedere ora. Tale tag non ha bisogno di essere chiuso.

Il tag HTML è il perno di un documento html ed indica, appunto, che sta iniziando un documento html. Viene aperto all’inizio del documento e chiuso alla fine dello stesso, dopo che tutto è stato scritto al suo interno. Un documento html a sua volta è suddiviso in due macro categoria, ognuna delle quali delimitata da una coppia di tag. La prima è l’HEAD e la seconda è il BODY. Come si può intuire dal nome stesso dei vari tag, essi identificano, rispettivamente, l’intestazione del documento, dove sono racchiuse informazioni che non saranno visualizzate, ma che saranno utili ad una corretta interpretazione da parte del browser del documento, e il corpo del documento, dove saranno racchiusi i tag e il contenuto vero e proprio del file che sarà visualizzato a schermo.
Andiamo con ordine però e analizziamo il tag META presente nell’HEAD. In questo caso esso identifica il tipo di set di caratteri utilizzato all’interno del nostro sito. E’ buona norma utilizzare quello inserito in questo esempio, l’UTF-8, che è quello più “standard”. In questo modo non avremo problemi di visualizzazione su computer con lingue diverse. In appendice poi tratteremo vari esempio di META tag, utili ai fini dell’indicizzazione del nostro sito e per tante altre belle cosucce!
All’interno dell’HEAD c’è anche la coppia di tag TITLE che racchiude, come il nome suggerisce, il titolo del nostro sito, quello che verrà visualizzato in alto sul nostro browser. Per questo tag non c’è molto altro che si possa dire!

Il BODY è il corpo del sito e tutto quello che verrà inserito tra il tag di apertura e di chiusura, sarà visualizzato nel browser. Nelle prossime lezioni “riempiremo” il bianco della pagina appena salvata ed inizieremo a creare una struttura per il nostro sito.
Cercate di non mancare!

Share

]]> http://www.carnackyweb.com/2-struttura-di-un-file-html/feed/ 0 1. Sviluppare un sito Web http://www.carnackyweb.com/1-sviluppare-un-sito-web/ http://www.carnackyweb.com/1-sviluppare-un-sito-web/#comments Tue, 20 Dec 2011 20:50:07 +0000 Carnacky http://www.carnackyweb.com/?p=96 . . . . . .]]> Per poter iniziare a sviluppare un sito internet, la prima cosa da sapere, è il codice HTML. Nel corso degli anni l’HTML ha subito vari cambiamenti, modifiche, anche al nome, ma ora è ritornato HTML, nella versione più moderna, la 5. Prima di spendere ulteriori parole nella storia dell’HTML (di questo parleremo in post appositi), bisogna chiarire che l’HTML, nonostante si parli di “sviluppo siti”, non è affatto un linguaggio di programmazione, ma, come dice appunto l’acronimo HTML (HyperText Markup Language), è un linguaggio di markup, di marcatura. Attraverso appositi TAG, permette al browser (il programma che ci consente di navigare attraverso le pagine nel web) di formattare il testo e gli elementi della pagina nel modo più appropriato.
Fatta questa premessa, è utile fare un’ulteriore precisazione: tutto quello che vedete, quando visitate un sito, fa parte dello stile del sito, del layout grafico del sito, che è solo uno strato posto tra l’utente finale e la struttura vera e propria. Bene, è questa struttura, l’ossatura di un sito, che sarà “sviluppata” in HTML.
Per aggiungervi grafica, stili, impaginazione ecc., vi rimando alla sezione CSS (Cascading Style Sheet), nella quale tratterò di tali argomenti e su come rendere più accattivante il vostro sito.
Dopo questa prima lezione introduttiva, non mancate le prossime lezioni.

Share

]]> http://www.carnackyweb.com/1-sviluppare-un-sito-web/feed/ 0