Andrea Vaccari. Il mio sito CREARE UN SITO WEB PARTENDO DA ZERO VOLUME 1. Estratto. I linguaggi HTML e CSS e il Design Responsivo.

Transcript

1 Andrea Vaccari Il mio sito CREARE UN SITO WEB PARTENDO DA ZERO VOLUME 1 Estratto I linguaggi HTML e CSS e il Design Responsivo Informatica

2 Andrea Vaccari: Il mio sito - Creare un sito web partendo da zero. Volume I I linguaggi HTML e CSS e il Design Responsivo. Copyright 2016 di Andrea Vaccari. Tutti i diritti riservati. Stampato per la prima volta da Lulu Press per conto dell autore nel gennaio Contatti: a.vaccari@gmail.com andreavaccari.altervista.org I file dei progetti presentati nel libro sono disponibili all indirizzo:

3 Contenuto Prefazione...10 Introduzione Una semplice pagina...14 La progettazione...14 Obiettivi didattici...14 Le specifiche di prodotto...15 Le specifiche funzionali, operative e tecniche...18 Le specifiche funzionali...18 Le specifiche operative...20 Le specifiche tecniche...21 La documentazione tecnica...21 L organizzazione di un progetto...22 Il linguaggio HTML...23 Il W3C...24 La realizzazione...25 I file di testo...25 La cartella dei progetti...27 Il file delle specifiche...28 Il file del codice...28 Visualizzare la pagina...29 Il linguaggio HTML...30 I commenti...30 Gli elementi...32 Gli elementi primari...33 La formattazione del codice...37 Spazi e tabulazioni...39 Il titolo della pagina...40 Il corpo della pagina...41 I testi casuali...42 I caporiga...44 Intestazioni e piè di pagina...46 Titoli e paragrafi...49 La struttura degli elementi

4 Struttura a blocco e in linea...53 Gli attributi...54 La lingua...55 La codifica dei caratteri...55 I metadati...56 Le parole chiave...56 La descrizione della pagina...57 L autore della pagina...57 Le entità...57 Riassunto La formattazione dei contenuti...65 La progettazione...65 Obiettivi didattici...65 Le specifiche funzionali...66 Le specifiche tecniche...67 La realizzazione...70 La cartella dei progetto...70 Il file del codice...70 Il linguaggio CSS...71 L attributo 'style'...71 La sezione 'body'...72 I colori...74 Il margine esterno...75 Le altre sezioni...77 L elemento style...77 I selettori...79 I selettori di tipo...79 I commenti...80 Priorità degli stili...80 Il margine interno...82 L elemento 'link'...83 Fruibilità degli stili...85 I selettori di classe...86 I tre livelli degli stili...88 I colori del testo e dello sfondo...89 I caratteri...91 I selettori di identità...93 L altezza degli elementi...94 L allineamento del testo...95 I margini

5 Togliere i bordi...97 La struttura degli elementi...97 Riassunto La navigazione fra i contenuti La progettazione Obiettivi didattici Le specifiche funzionali Le specifiche operative Le specifiche tecniche La realizzazione Il progetto e le specifiche Il file del codice I titoli dei paragrafi La larghezza della pagina I contenuti principali I contenuti secondari La struttura fluida Il margine interno I colori Il box-model Il selettore universale Il box-model modificato I motori di rendering Il menu di navigazione I selettori composti La griglia fluida Selettori di pseudo-elementi I contenitori I collegamenti I selettori di pseudo-classi Allineamento dei contenuti Intestazione e piè di pagina estesi Altezza estesa Intestazione fissa La griglia fluida Le altre pagine Riassunto Il design responsivo La progettazione Obiettivi didattici

6 Le specifiche funzionali Le specifiche tecniche La realizzazione Il progetto e le specifiche La struttura fluida La larghezza variabile La larghezza proporzionale I margini proporzionali La sillabazione Visualizzazione condizionale Le soglie di visualizzazione Spostare il menu La viewport La stampa Test della risoluzione Riassunto Le altre pagine La progettazione Obiettivi didattici Le specifiche funzionali Le specifiche tecniche La realizzazione Il progetto e le specifiche Le pagina delle foto La pagina del blog La pagina delle info I selettori di attributo La struttura flessibile I contenitori flessibili Gli elementi flessibili La larghezza dei contenuti L impostazione della larghezza Posizionare il menu Il posizionamento dei contenuti Le foto L allineamento del piè di pagina La pagina delle info Riassunto Conclusione Le tabelle

7 Formattazione del testo Elementi non supportati Pubblicare il sito Appendici Linguaggio HTML Elementi in ordine alfabetico Sottotipi di elementi Elementi raggruppati per ambito Elementi supportati da tutti i browser Attributi globali Linguaggio CSS Selettori Selettori di pseudo-elementi Selettori di pseudo-classi Proprietà supportate da tutti i browser Proprietà in ordine alfabetico Glossario Sigle

8 Prefazione Questo libro tratta della creazione di un sito web partendo da zero, senza l ausilio dei cosiddetti CMS 1, strumenti sempre più utilizzati anche da aziende, per la semplicità e la velocità con cui rendono possibile la realizzazione di un sito anche complesso, senza bisogno di utilizzare la programmazione web, la cui conoscenza può comunque tornare utile, per personalizzare le pagine create da queste piattaforme. Quindi anche chi decide di usare uno di questi strumenti, può trarre beneficio dei concetti trattati in questo libro, in cui si spiegano le basi generiche della programmazione, e di quella web in particolare, partendo dalle nozioni più semplici. L unico requisito per capire quanto spiegato e metterne in pratica l insegnamento, è la capacità di svolgere le operazioni più elementari su un computer, come creare, modificare, eliminare file e cartelle, scrivere un comune documento di testo e utilizzare un qualsiasi web browser 2. Il libro spiega in modo semplice, sistematico e sequenziale i concetti chiave per la creazione di un sito, secondo i principi 1 CMS è l acronimo di Content Management System, ( Sistema di Gestione dei Contenuti ), in pratica una piattaforma con cui è possibile creare un sito in poco tempo, fra le quali le più conosciute sono forse attualmente WordPress, Joomla o Drupal. 2 Il web browser (o browser web, o anche più semplicemente browser) è un programma che permette di visualizzare le pagine web, come può essere Google Chrome, Mozilla Firefox, Internet Explorer, Safari o Opera. 10

9 fondamentali della programmazione web e della programmazione in generale, che distinguono un programmatore improvvisato, che scrive codice 1 in modo istintivo, da chi compila o- gni riga con cognizione di causa, e secondo una logica formale, che è di basilare importanza per la creazione di un software 2 manutenibile e ampliabile con una certa facilità. Nella programmazione web, la propria creatività può essere espressa nel design e nell impaginazione di un sito, la cui struttura è però necessario che venga costruita con la massima cura e conformità alle linee guida della programmazione standard, che garantiscono una migliore leggibilità del codice e facilitano una visualizzazione maggiormente omogenea del sito da parte delle varie versioni dei browser, la cui diversità nella resa grafica dei contenuti costituisce uno dei problemi più sentiti nel mondo web. I browser non sono infatti ancora in grado di visualizzare le pagine tutti allo stesso modo, benché recentemente si siano fatti enormi progressi rispetto a qualche anno addietro. Un evento che negli ultimi anni ha aumentato ulteriormente la complessità di realizzazione di pagine web a resa grafica omogenea, è il fatto che la navigazione su internet si è diffusa anche sui nuovi dispositivi portatili, come tablet e smartphone, il cui schermo ha un ampiezza decisamente inferiore di quella di un desktop 3. Chi realizza un sito web, deve quindi pianificare e verificare la corretta visualizzazione delle pagine che costruisce anche su questi dispositivi. 1 Il codice (o codice sorgente, sorgente, o listato ), è un qualsiasi testo in linguaggio informatico, composto da istruzioni, che vengono elaborate, e possono dar luogo a un documento diverso da quello di origine, come nel caso delle pagine web. 2 Il software è qualsiasi programma per computer, quindi anche l insieme dei file che compongono un sito web. 3 Con desktop (letteralmente piano della scrivania ) si intende il tradizionale personal computer da ufficio o da casa, che un tempo trovava normalmente alloggio sul piano della scrivania. 11

10 Introduzione Questo volume introduce all utilizzo dei linguaggi HTML 1 e CSS 2, che rappresentano le basi per la costruzione delle pagine web. In questi linguaggi vengono infatti costruite anche le pagine create dai CMS, e chi utilizza quindi questi strumenti per la creazione dei propri siti, e vuole capire cosa ci sia scritto nelle pagine che la piattaforma ha creato per lui, e come possa apporvi eventuali modifiche che questa non gli consente di fare, deve conoscere quanto meno le basi di questi due linguaggi. Qualche tempo fa le pagine web venivano scritte soltanto nel linguaggio HTML, che era pensato come un linguaggio di formattazione e impaginazione dei documenti. Con l HTML era possibile dare una struttura alle pagine e renderne graficamente i contenuti, con le limitazioni che questo strumento aveva nelle sue prime versioni. Successivamente è stato introdotto il linguaggio CSS, specificamente per la resa grafica dei contenuti, in modo da separare questa dalla strutturazione del documento, che resta invece la funzione principale del linguaggio HTML. Uno dei compiti di chi si accinge a creare un sito web, è quindi quello di porre attenzione al suo utilizzo essenzialmente per la strutturazione delle pagine, riservando la rea- 1 HTML è l acronimo per Hypertext Markup Language ( Linguaggio di Marcatura per Ipertesti ). 2 CSS è l acronimo per Cascading Style Sheets ( Fogli di Stile a Cascata ). 12

11 lizzazione della resa grafica al linguaggio CSS, che è stato creato appositamente per questo. Come vedremo nel libro, il linguaggio CSS può essere integrato nel codice HTML, oppure essere scritto in file separati, in modo da rendere la struttura dei listati più modulare e meglio leggibile. La modularità della struttura di un software, cioè la suddivisione del codice in parti funzionalmente separate, è un fattore che incide in modo sostanziale sui tempi di sviluppo 1 e manutenzione, perché ne facilita la lettura da parte di chi ci lavora, soprattutto nel caso che non sia sempre la stessa persona, come nelle aziende di medie e grandi dimensioni, nelle quali alla realizzazione di un software prende parte un intera squadra di progettisti e programmatori. Oltre che sui linguaggi HTML e CSS, il libro si focalizza in particolar modo sul famoso Design Responsivo, un termine che indica un modo di strutturare le pagine web, per poter essere visualizzate al meglio sugli schermi di grandezza e risoluzione diversa dei dispositivi coi quali è oggi possibile navigare su internet, come desktop, notebook, tablet e smartphone. Nel libro si spiegano i due metodi oggi più utilizzati per realizzare una struttura della pagina che si adatti alla larghezza della finestra del browser, che sono la struttura fluida e la struttura flessibile. La struttura fluida è stata ideata utilizzando risorse che facevano parte dei linguaggi HTML e CSS prima dell avvento dei tablet e degli smartphone nel mondo del web, e che quindi non erano state pensate a questo scopo. Per questo è abbastanza complessa e difficile da utilizzare, ma è ancora quella più diffusa, perché più compatibile con le versioni più datate di alcuni browser. La struttura flessibile invece dovrebbe rappresentare il futuro nella realizzazione delle pagine web, è più facile da utilizzare, ma è compatibile soltanto con le più recenti versioni dei browser. 1 Lo 'sviluppo è la realizzazione di un software, e lo sviluppatore è chi lo realizza, quindi il programmatore. 13

12

13 Glossario Questo è l elenco dei termini tecnici incontrati nel testo ordinati alfabeticamente: backup s.m. salvataggio di dati su appositi supporti (dischi fissi, dischi ottici, nastri magnetici), ai fini di prevenirne l accidentale perdita. browser s.m. software che permette di navigare tra contenuti diversi. Il termine è utilizzato generalmente come abbreviazione di web browser (vedi), ma ci sono anche altri tipi di browser, come ad esempio i file browser. browser web s.m. Vedi web browser. codice s.m. (o codice sorgente, o anche sorgente, o listato ) indica un qualunque scritto informatico, composto da istruzioni che servono a elaborare dati. Il termine è usato normalmente riguardo alle istruzioni di un linguaggio di programmazione. L HTML non è considerato un vero e proprio linguaggio di programmazione, perché non è costituito da istruzioni, ma da elementi strutturali. Però questi, che non vengono visualizzati dal browser, contengono istruzioni implicite relative alla struttura delle pagine web, e quindi costituiscono anch essi un codice sorgente, che dà luogo sullo schermo a un documento diverso da quello che lo ha originato. 255

14 desktop s.m. letteralmente piano della scrivania. Il termine è usato in ambito informatico per designare i tradizionali personal computer da ufficio o da casa, che trovavano inizialmente alloggio sul piano della scrivania. di default avv. predefinito. disco fisso s.m. vedi hard disk. estensione s.f. l estensione di un file è la parte del nome che segue il punto, ad esempio nel caso di un file dal nome readme.txt, l estensione è.txt. Quelle dei file HTML e CSS, sono rispettivamente.html e.css. Normalmente si considera il punto come parte dell estensione. file system s.m. termine con cui si indica la struttura di cartelle e file in una memoria di massa (es. in un disco fisso). font s.m. tipo di carattere, es. Book Antiqua, Verdana, ecc. input s.m. i dati oggetto di un elaborazione, come possono essere i due addendi, che danno origine al risultato di una somma, che ne rappresenta l output (vedi). hard disk s.m. (o disco fisso, o disco rigido ) dispositivo sul quale vengono memorizzati generalmente i dati e i programmi di un computer. hosting s.m. servizio offerto da un fornitore di servizi internet (Internet Service Provider), che consiste nel fornire uno spazio web, gratuito o a pagamento. implementare v.t. 1 realizzare, scrivere. 2 includere. indentare v.t. spostare verso destra tutto il testo di un paragrafo o a volte anche soltanto la prima riga. indirizzo IP s.m. un etichetta che identifica univocamente una risorsa informatica in rete secondo il protocollo di internet (Internet Protocol). 256

15 in locale avv. sul proprio computer. Lavorare in locale significa lavorare su file presenti sul proprio computer. in remoto avv. su un computer diverso dal proprio, col quale si è collegati, o ci si può collegare. Lavorare in remoto significa lavorare su file presenti su un computer col quale si è collegati. layout s.m. impaginazione. link s.m. collegamento. memoria di massa s.f. memoria secondaria di un computer, rappresentata di solito da dischi fissi, floppy disk, cd-rom e dvd, sui quali vengono memorizzati i dati in modo più o meno permanente, per essere poi utilizzati dal processore previo trasferimento sulla RAM, che è invece una memoria primaria. navigare v.i. consultare i contenuti di file e cartelle (file-system) o di ipertesti (internet) e spostarsi tra questi contenuti. output s.m. il risultato di un elaborazione dati, per esempio di una somma, i cui addendi ne rappresentano l input (vedi). percorso s.m. indica la posizione di un file su un disco. È composto dalla sequenza del nome delle cartelle che lo contengono, da quella superiore a quella inferiore, separate ciascuna da una barra che su Windows è \ e su Linux e MacOS è /. Il percorso può essere assoluto, se definisce inequivocabilmente la posizione del file sul disco, come nel caso di E:\Progetti\Il mio sito\progetto-001, o relativo, se manca l unità disco o la partizione, come nel caso di \Il mio sito\progetto-001. Il percorso relativo può trovarsi in una qualsiasi partizione, cartella o sottocartella. pixel s.m. l unità di misura di un immagine digitale rappresentata su uno schermo. Il termine deriva dalla contrazione delle due parole inglesi picture e element. project manager s.m. il responsabile di un progetto. 257

16 salvare v.t. memorizzare su un supporto informatico (per es. un disco fisso). software s.m. un qualsiasi programma per computer. spazio web s.m. uno spazio riservato normalmente da un fornitore di servizi internet (Internet Service Provider) per ospitare i file di un sito web. stringa s.f. una porzione qualunque di testo. sviluppare v.t. realizzare (il software). Lo sviluppatore è quindi colui che realizza un software, cioè il programmatore. team s.m. squadra, équipe. Usato primariamente nella locuzione team di sviluppo. unicode s.m. sistema di codifica che comprende i caratteri di quasi tutte le lingue del mondo. web browser s.m. Un programma con cui è possibile navigare tra le pagine web, come ad esempio Google Chrome o Mozilla Firefox. 258

17 Sigle CMS CSS HTML IP ISP RGB URL Content Management System, cioè Sistema di Gestione dei Contenuti, in pratica una piattaforma con la quale è possibile creare in poco tempo siti web anche piuttosto complessi (es. WordPress, Joomla e Drupal). Cascading Style Sheets, cioè Fogli di Stile a Cascata. Il linguaggio usato per la resa grafica dei contenuti delle pagine web. Hypertext Markup Language, cioè Linguaggio di Marcatura per Ipertesti. Il linguaggio usato per la strutturazione delle pagine web. Internet Protocol address. Internet Service Provider, aziende che forniscono servizi informatici, e mettono normalmente a disposizione uno spazio su disco, accessibile da internet, gratuito o a pagamento, per ospitare siti web. Red Green Blue, cioè Rosso Verde Blu. Il comune sistema di composizione dei colori su schermo. Uniform Resource Locator. Una sequenza di caratteri che identifica univocamente l indirizzo di una risorsa su internet. 259