Scribd
Carica
90 visualizzazioni14 pagine

AppuntiWeb-Html e CSS 1

Caricato da

luigi
Copyright
© © All Rights Reserved
Per noi i diritti sui contenuti sono una cosa seria. Se sospetti che questo contenuto sia tuo, rivendicalo qui.
Formati disponibili
Scarica in formato PDF o leggi online su Scribd
90 visualizzazioni14 pagine

AppuntiWeb-Html e CSS 1

Caricato da

luigi
Copyright
© © All Rights Reserved
Per noi i diritti sui contenuti sono una cosa seria. Se sospetti che questo contenuto sia tuo, rivendicalo qui.
Formati disponibili
Scarica in formato PDF o leggi online su Scribd
Sei sulla pagina 1/ 14
Capitolo 7.1 Glistrumenti di base Navigare nel World Wide Web, cio® vsitare st formati da pagine web, & un'operazione cosi comune nella nostra vita quetidiana che armai la diamo per scancate. In patticore, grazie a questo servizio di Internet, con pochi gest su un personal ‘computer o uno smartphone possiamo cercate e trovare in pochi istaninformazioni che sono sparse in decine di milion di sti web. E istrutivo, ped, rifetere sulla varietd complessiti degli strumenti informatie mplicericerce nel web che siamo per fare una > lanciamo un browser, cos! da poter vsualizzae la pagina del motored cere > digitiamo le paroie-chiave che definiscona Vargomenta di intereasee chiediamo al browser ai nviate i aat al motore di ricer > i motore di ricerca contiene un database in cui sono indicizzati i contenu det siti; interpreta le nosire parale-chiave come una query cioe un'interrogazione del data base, 2e-nvie al nostro browser la rlsposta; > A broweer -traduce- la repacta det motore di ricerca visualizza una nuova pagina web contenente i Hink alle isore di internet che trattano Vargomente rcereato. quando poi facciamo clic su um link per visitare un sito ta quelli ovat, evviamo un "muovo processo simile a quello appena descrito:il nostro browser via un messageio a un web server, chiedendogli i trovare iste server esegue Ia richiestae epedisce Indieto un codice sorgente, che il browser pot trsforma in pagine web visualizzate sul nostro schermo. Le pagine del ato poseone contenete material multimedilt immagini vdeo, suo e anche in questa caso il browser é in grado ci viuslizeale ec geste esecuzione, er non rimanere semplilfuitori passivi ai queste teenolope,e per poterciventare creator i nzow strumenti e contenuti original per il web, é bene conoacere gi stru smenti che abbisme appena descitta i maga in cul interagiecono ta loro. MW browser Iprimo strumento da conoscere il browser i programma di cui sono esempi Mozilla ‘refox, Google Chrome, wietosoft Lage e Apple Safar. Questa &Fepplicazione software che ci permette di xcuriosare (rowse) tale reor se della Rete, porché visualizza le pagine dei si web, Come vedremo, infat, una pagina web él prodott di pit Tinguaggt GTM, CS, Jinguagg! ai scripting che il browser ea interprtare e tradurre nell'insieme di tet, smmagini e centensi mulkimedias che nei vediam ello schermo del computer 70 L'«ecosistema» del web J vecowsers Fappcatone lathe vinta page co iweb r Chia di ltiira, per capire come funziona il mondo Te Zaniehet pr te seusta ES Sete ers . ©. Fer constatarlo, basta premete sulla tastiera dun pe testo fl mentze si visualizza ‘un ait con il browser e poi aprire sulla desta la acheda Elements, ‘Come nell'esempio delle figura 7.1, sullo schermo appariraallora un riquadro che mostra il codicecorrspondente alla pagina vieuaizzara, ‘er «apres un sito web blcogna cllegarsi a Intemete intertogare un web sever. 11 browser dungue & un'applicazione lata cient infat risiede su un dispositive utente ella Rete e rceve servizi dalle appicazion lato server dislocate su computer postin varie parti del mondo, [Nel caso della comunicazione via Internet id avviene tramite il protocollo HTTP (hypertext Transfer Protoco), che @ stato propettato per Ia trasmissione di ipertesti Tcontenuti del web nfatti sono ipertest,ossia testi contenenti link, cio collega- rent che permettono di spesterl tra le pagine web in maniera non sequential. ‘Le risposta che dal web server arive al browser ed évisvalizzata come pagina web codifcatn im HTML, un lingvaggio dedicnto proprio alla gestone deg ipertests Winguaggto HTML Vocronimo HTML significa HyperText Markup Language, osia slinguaggio « mareatari per ipercesti». ‘Questo lingvaggio @ stato creato nel 1990 da Tim Berners-Lee al CERN di Ginevea i grande laboratorio internazionale per lo studio dela fica dalle alte energie (iguea 7), obietiva iniziale oi Berners-Lee era endere accesibilalla comunita ecentfca di tutte il manda idatf perimental elerelarion! aulericercheevole ei diversi laborstort Figura Unapagna wed veaizrata inser al fesies TM Figura 72 Tm Beners-ee ela placa peste ego Sine, W ‘guceesto el difusione del HTM1 sono stat immediati—ben ole i estrtto ambi to accademico tanto da rendere nacessaria gi nel 194 Tistituzione del WSC, World Wide Web Consortium. Questo organizmo internazionale, inipendente ¢ senza scopo i lueo, resiedute Gallo stesso Berners-Lee, si occupa dello sviluppo del inguaggio HTML e della defn lone della versione standar uffciale Lo sviluppo dele teenologe e Taumento dei contenu veicolat dal web hanno in- fat imposto un costante rinnovamento del linguaggio, che oggi @ arrvato alla 4a auinta versione, detts appunto HTMLS, ‘Ali albor del web i produttoni commercial di software spesso «personalirzavanos ‘llingungeio, con il visultato che le pagine web si aprivano correttamente soltento.cen alcuni browser e nan con ats (Ogi invece, grazie all'eistenza di una versione uffcisle dell HTML, tutti produto ‘idevone attenersi al medesimo standard esi pu garantie una compatibilita univer sole nella gestione delle pagine web. I marcatorio tag ‘ZHTOLé un linguaggio che usa mareator cosa una serie di parole-chiavechiarnate tag (eetichetien), che s scrivono racchiuse tra le parentes! angolri <>, cos: . [Normalmente tag hanno nel codice un ambit dase ben defini, coe racchivdono alloro inter testo ale istrusini.e sine uso vanno cus sande la bara slash /. come in . ‘Dr vedere un primo asempio di codice HTML, crea sul desktop del tuo computer una cortliacorse_ wee sarica 8 su interno, da sit eb de iro le prows_1-heml che codifica una semplice pagina web, Per visualizzare Ia pagina bastera un doppio clic sul fle, se nel tuo pe estensione bhuml gia associta al browser, altsimenti puei fare cic su le con i tasto esto del ‘mouse sceglere Yopzione ApH eon nel men contestuale e poi selesionare il browser ‘In alterntiva sell browser ¢ git aperto,digta nella barra degli indiriza testo ‘ev con ve slash, seguito dal percorso del file ce vuoi aprize, pot premi iltasto BB. In una scheda o tab del browser ora apparirh la pagina descritea dal codice HAC, che avra aspetto mostratou desta nella figura 73. ‘or vedere nel rowser il codicecocispondente alla pagina pool usare taste i, op pare premere insieme i due ast: Bie fj nel qual caso codice appara in un nuc- ‘tab. In altemative, puoi aprte di nuovo i le prove Lhe, ma questa volta con on editor ai testi come Boze note a Windows. ‘tn questo codice, grazie anche alle indentazioni delle istruzioni, puoi viconoscere faciimentealeune prime caratterstche important dell HTML > tag principale , aperto ala riga 2 chiuso alls rigs 15, @quelio che defn sce licontenuto dellintera pagina: re HTML stag omaretn, Sone leparcle-hiave elIHTML si scrivono traparentes angola y 6 ‘agus 7.3 eva coseoin HINGeiasvaveualezaione Con browser Chom browser ee a ee 11 tg , sperto alla rga 3 chiseo alla tga 6 contiene al sue interne ita, ‘, aperto e chiuso nella stesse rige 5; quest ultimo marcatore definisce i ‘Stolo che browser mostra sulle guetta della sched in cul si apre Is poginn > allinterno del tag chodiy> po il tag , aperto alla ign 8 eho ala ga 13, ce delimita un elenco puntato di testo; tlle righe 9121 teat i ciagcun punte dal/slence &precedute da un tag apes toe seguito da un tag €/14> chien, (ti ambit d’uso dei marestor formana dunque una cerarchia simile, per ceti vers, a ‘quella delle parentes!annidate in un'espressione mavematca ‘a segnalato che 'HTML non @ un linguaggio case sensitive: nelle istruzioni i tag si possono scrverein carater minuscoli oppure maiuscoli, senza che cid cambi i signi beato del codice commenti in HTML ‘Come avviene con linguaggid programmazione, anche nel caso dell HTML pud esse re maltowtile aggiungere commenti nel codice sorgente che nivtio a capirne la ogiea il funzionamento, Im HTML i comment si aprono con iltag Guests & un coments punto esclamativo va messo soltanto nel ta dl aperture, non in quello di chiusura ‘Almomento dellinterpretasione del cadice, browser trascurer ttt | eomment 81 chiudono con ==>, cost LHTML non 2 tutto 1 lnguaggio HTME. permette di svolgere le principal activi di costrazione al una pagina web, come per esempio: > creare In strutsura della pagina, efinendo lo spazio rservato ai veri contenu, un pe! come avviene nellSmnpaginazione diun giomale; > tribte una inzione particolare a alco content per eserpia etabiireche un ‘certo testo avr I funzione a link; > incerve nella pagina contenu i tipaparticalare, come madul per Pinsarimento di dati oppure element multimedtali >. memonizare parole-chiave esti metedai che descrivanci contenu dalla pagina = che motor a ierea usano per indicizare | sit nel loro database ‘stevia & importante chiarire in dora anche cid che !HTOML none non a: > VHETMAL non si occupa del layout grafico e quindl delestetice delle pagine web: la THETML non & un lingoagio dk progeammazione, bensi un lingua dihiaratve: ddescrive i contenuti¢ la strutiura delle pagine web, ma non formula istruzioni da ‘eseguie, delegando invece questa compito ai cosiddeti Hnguagg\ di seripting. | foglidistile css actonimo €8S (Cascading Style Sheets fog di stile a cascatae) indica un Unguagyio tusat per la formattazione dei documenti HTML, Anche lo sviluppo dei GSS & curato fn dal 1996 dal consoreio WIC ea ¢ punta ogg alla versione 4 "ogi i stile non Soltantoaiutano a migliorare le quali estetica dei sit, ma so prattuto consentona di separare la gestione del concenuri da quella della forma: eid rondo possible una produzione ai tipo industrale nel sottore del web, TI funzionamanto di base dun folio di stile @semplice:emite un casiédato se leo 5 odie puntae un elementa del cdica HTMI.¢ ne definiace carsterstiche come il core, tipe di carattare ol sfonde. ermaneun eee ‘Nels iqua 74, per esempio, le righe 5-7 che abbiame riquadrato inseriscono'un folio Ai stile nel codice gi visto in precedenza, SORT TA =o E> 0 [Omucimvnntmemrennaneaiios La igs 6 inzia con 14: questo @ il seettore del tag a cul sar applicato lo stile deinito trae parentes: gaffe, i significa che tutti tag €14> dell pagina HTML essumeran- no lo stile specifiato qui ‘Cos, grazie al fogio ds, i empliceelenco pustato che avevarno visto nella pate te dest della gure 72 diventa, nella visualizzazione del browse, una testta gratia con test in caratere Aral ¢ in color bianco a sfondo verde, Toph di sule CSS si pssonoinserite nel codice HTML in tre modi divers: > ncorporatial'intemo dela sezione , come in questo esempio; > ester in un file con estensione .ess che viene richiamato nelle Atm, in modo fanzlagoa clo che avvene per le Ubrerie dl funzion| dei ingusggl dl programmezione Si pxd anche cesnite lo stile Solin, clog airettamente allinterno dei tag HTML, seri vende per esempio ii atylen"fontsarial; coler:zed; "D4 presento, ‘Questa pratica perd in generale & poco consiliabile, perché mescola contenu stilt xendendo i cdiee pit confuso e meno facimente legbile ‘inguaggi di scripting lato client: JavaScript {Limpetuosa diffusone del web ha portato alo sluppo dist sempre pi interattivi, con pagine che si modiicano in bas alle azioni dell utente ‘A questo scopo si usano i cosiddett linguagg! di scripting, dove per sript (leteral ‘mente il ecopiones, per erempio di un film) si intende un breve codice. ‘Si tratta di Tinguagg al progratnmezione di ivello meto alto, che automatizzano Vesecuzione a runtime di cert compiti di slito sono interpretati anziché compilt Teletonelinguagg! dl ecipting eneral-purpowe come Python o Pel, oppure per Tusa in ambionti specific, come i browser web: tra questi ultimi il pit cifuso & JavaScript (da non confondere con Java che & un inguaggio completamente dstints). JavaScripts integra perfettemente con i coice HTM. ha leseguenti carattristiche: > un vero linguaggio i programmazione con una grammatica e una sincassi pict date varabill, operator, strutture di selezione e cc iteratvi Fgura 74 tft un opie tle ula vsualzzazone J tat esse Tec cieertr pepetrelapete Sn y 7.3 editor Notepad++ Esistono molte applicazioni che consentono di servere codice in HTML, CSS 0 Java Script su un personal computer La pit semplice& eciter di testo puro, non formatta- {o, messo a disposizione da ogni sistema operaivo. ‘Sipua uesre per ecempio i lee nat di Windows, con Ia sola accortazzs di scelia- re come estensione dei ie, al momento del salvatageio.html, ss oppure, qualora ‘sino fog di stile e script estemi Se invece il eadice CSS o Jnvacript & embedded, sti inseitoallinterno del cedice HTML, lstensione del le ear sempre html ‘sono pol molt ltt programmi che si possone scarcavegatultamente da intemet, ‘eanche numerosi siti web che permettono di scivee i codicediettaments anne er eaempio sito repli, che consente di seeiere ta nameros lingua, fle per PHMAL un ambiente di eviluppo diviso in due riquadr: mente sulla sinistra si scive Lode, sulla deste si puo vedere oi cesta i rsultato della sa nterpretaione, Installare Notepad++ Per questo corso useremo Notepads, un editor offline freeware per Windows che hs alcune carateristiche particolarmente uti: > si pub usare per acrvere caice in ttt Linguagg! Al sulluppe peri web; > permet di searicare una versione che non neceosicn di installazione; > hha funzioni automatiche per la colorazione de codice, Mindentszione, evidenzia zionee il completamento dei tag > hn un’incerfacciagrafien anche in itllane ed & personalizable in varl modi ase conda dele esigenze di eiascun utente Notepad++ si pub scaricare gratuitamente dal sito web notepad-plus-plus.org, Per Li- ‘pus/Ubunt esiste Pequivalente Notepadig, carieabile da notepadgg.com. ‘Nella sezione download del sito ei pud scepliere tra laversione 22 « ques a4 bit, 4m base al sistema operalivo usito e decidere se scaricare un file eseguible exe, che fungera da installer, oppure vn pacchettoalverativo2ip. {Quest ultima versione compressa non rchiedealcana installazione nel computer: & sufficente decomprimeria in una carte propria scelta da cul poi si pot lanciane diretamentelasegubile exe Dopo aver avvato il programma, per scegliere la lingua dellinterfaceia, si apre il ment Settings, si selesiona Preferences e poi, nella fnestra che s| apre, i ecarre i ‘en Localization come nels figura 7.13, <= 2 — = — == eS= = a = = Scr = aay ‘a = coe = mes af Hits i Te Figura 7.19 La cota dela fnguainloepaces otepades & un editor che permatte di seriverecodice programmande in molt lin- ung iver, Se i vuole che per default il testo sia interpretato come codice HTM, nella stessa ‘nesta Preferenze si deve selezionare a sinista Js voce Nuovo documento e quindi scegiere HTML nel mena Linguaggio predefinito, come nella Figura 7.14. 'Se po capita di dover scriverecodice in un inguagglo diverse, non eccorre nacessa- riamente combiare quello predefinit; &suffiienteseeglere fl nuove linguaggio dal ‘ment Linguaggio éelleschermata principale del programs, ey it Figura. t4 ascata de! Se pian present = Nafepades Impostareilinquaptio predetinito & importante per peter frre del riconoscimento e del completamente automratico del cotice. Per esempin,¢ comodo farsi che Notepad++ chiuds automaticamence i tag HTML aperti quando si scrive i codice: basa selezionare a snistra nella fnestra Preferenze 1 woce Auto-completamentae pl spuntare la calla tg eiseura htm anche utile sepliere Ia cartelia in ui verranna saath default file prodotti com Notepads, Per fro, nella Gneatrn Preferenze si sceglle Cartella predefisita ¢ pol ‘git il percorse della cartel, nel nostro caro coreo web sul desktop. sloogne pol leordare che il colic di ua sito web formato in generale da moti le: ‘pagine HTML, immagini, clerenti multimedial fog iste e senpt ‘Quest fle vengono collegatlindicando nel codice la loro posijone sul disco righlo del proprio computer (nel caso degli exerci di questo corea) del web server (quando si lavora online, Peril funzionamento di un progetto web & guindi importante stair in anticipo,e oi rspettare con serupoo, a gerarchia dee eartelle dove si salveranno i fle 1 questo medi s evitera il famigerato ermore 404, che nel contesto del web significa pagina non trovatae (Questo codice di stato del protocllo HTTP non. ons server nen trovaton che appaiono quando non Si resce a stable la connessione con un web Lerone 404 indies inace che il server & ta to comettamente ragglunto, ma che uno 0 pi file necestari per cotrure a pagina nen sono ‘memorizzatinelia posizione in cil codice 51 sepetta di rore, w Riconoscere gli errori disintassi [EHTML un inguaggto interpretato,percé non c'é un compilatore che possa segns- ‘ae gli eventual error nel codice al momenta di reare Ile ereguibile, come avviene fon gl IDE come Dev. Cus ‘anda # scrve in HTML, Verrore pi comune # Ia mancats chivsura én tag. Net codice di sinistra della gure 7.18, per exempio, il tag Col> aperta alla rga & nan poi stato chiuso, per dimenticanza Notepads~-riconosce i problems elo segnala facendo assumere il celore rosso ala strumura grafca vertical che sta tra | numer i ria il eodice. Figura 75 unerovedtsieasst esr gaflotepaces Aoteceice desta Nel codice di destra della Agura Verone & stato correo aggiungendo la chiueura del Cagallariga 20. ‘Orala stattura grafic ta numer e il codice ha di nuovo il normale coloregrigioe termina in corispondensa del'ultimo tag . Inaltreadeaso, ses facie sul tag
    di Genii in viola, eonfermando cosi che in sin Slo di chiusura sev IN SINTESt > endlel F744, C85 e JovaSeipr sk possono severe con un semplice sitar di tect non formatat, salvandol el! opportune format. > Esistono perb anche moti programmi dedica con fanzioné util come 1a colerazione.indentazione el completamente automatico del cod = Notepades un buon editor freeware dl questa tipo, > Per vitae eror, 2 importante rispettare con cura Ja gerarehia delle cartelle in cus salvano vari fl che fanno parte dh un progetto web, SR Hl Cre cosa ignfeacireche ncosice sorgenteterbetied? El Serb afencodiioscunceiela gta estersone de Fie spond ctanco un ese. initindows css sascrit Bl ale ep. spears no sempie ch once 3 Stree emer elcempte cade HTM ee 1 cua ere pi tcl decane can 8 sce 7.4 Dietro le pagine web: i tag HTML ‘Tutte le pagine HAL hanno in comune alcune carateristiche struturaiMistrazione Inizialee te tag principal visit nela figura quia fanco. ‘Questo @ilcodice di una pagina HTML sidots a suo elementi minim, eppure per- feamente compiuta la i puo cise visualizzare coreettamente con un browser, anche sf risutato saré una sempiice pagina bianca, odie inizia con Ia riga , che deve sempre eacere presente Winizio del file: non @ un fag, bene unatruzione che comunica al roweet i tip di ocumente che doves interpretare. Il tag sperto alla niga ?& quello che contiene Fintero codice della pagina: ‘questo sara quind! Poltimo tag a essere rchiuso alla fine de! file, un po" come avviene InCiCts con le parentes gaffe dela funzione principale main 1a pagina vera e propria si compone di due sezioni, definite dai tag e , clot testes e «corpoe della pagina. Questi ag, come cra vedremc, sono a loro volta contenston oats tag. ‘Qui stiame serivendo | tag in carateri maluseol, per evidensarl; ma ® bene sorte tineare che I i pub indifferentemente anche scrvere minuscol, perche i Unguageso HIML non & case-sensitive, Lasezione La sesione @ un contenitore di metadti, iota informasioni relative alla pag ‘na web. Tra i suotitag pi importanti ci sono > dofinisce tole dela pagina web, che appare nella inguetia della scheda ‘el browser @impartante defnislo per ogni pagina che st cea, perché | motor dt ‘ieerca catelogans le pagine anche in base al toa, che appare poi nel'slenco dt ssultat dalle icerche: > serve per defnire nel le HTML gli stl grafic da applicare sl documen- to; nelPecempio git vieto nella figure 74, questa definiione awveniva allinter no dellHTML; se invecr si scegle di ralvae i fog distil in le ester, si sera {tag Gliattributi el inguaggio HTME gl rebut sono pecifiche inerme a ag ‘Come abbiamo appena vist, per esempio, il tag el, che indice Is relasione ta il documento HTML e quello cllegsto; > type, che specifica ipo di documento che si ole collegare > ree (hypertext reference, cok aiferimente ipertestusles), che indica a quale docu ‘mente revise cove towarlo, ‘Mott arnibut si possono applicare a tag diversi Per esempio, come visto poco sopra, Vattrbuto type é sar anche dal tag (che perd usa Fatibut sxe, Invece i href, per specificare URL det fle ester) Disolino:tag anno sempre chiusi dopo aver apertconlapossiblitadinsenzeistrs- soni tra apertura e a chiusua. Esistono perd anche casi come quello del tag « a tag ‘Alintera della sezione si usa anche il tog contienesoltanto metadat, cio’ dati relativ alla pagina web éhe non apparizanno nella pagina stessa, ma sono maportanti per trasmettere informazion’ al browser, ai rmotori i rcerea ead alte servi Gel web, ‘Nei nostn primi esempi di codice HTML aboiamo gia incontrato V'sttnbuto char wat, che defnisce tr doppl apicl i set di caratteri da save per la pagina web, Fer esemplo: “OmTA charaet="UTP- Indica che i caratari sazanne rappresentat on la paticolate codifica UTF-8 (Unicode ‘Transformation Format, 8 bit, che usa supp di byte per rappresentare i caratteri Uni- code ‘Alls attributi important di @MBMA> sono defniti da un nome (nama) codiesto € permettono di inserire un testo descritiva del contenuto (content) corrispondente: ‘OETA nanen"description” contents! OTA nane="keywords" content="Parole-chiave del site"> ‘Deacrizione del sito” OTA nana="author” content="Nome dell! autore del sito">. 1s doecrzione & il principale attribute wsato dai motori ai ricerca per indiczeare iit, percie ¢ bene inserila con grande cur, Un autiouto particolarmente importante dl , introdoto con la versione S dell HTM, ¢ pame="viewport”: serve per far ndimensionare automaticamente al browser la pagina web, in base alla laghezza (width) dello schermo usato dll utente a inte 207 nanew"viewport” contant="widtindevice width, initial-scale-t.0"> dove Vistrusione initial-seale=1. 0 dice al browser di iniziae aprendo la pagina 4 granderza naturale, per poi naimensionaria in base allo schermo Gel device, ot dello specie dispositive 2 eu il rower @installato ‘Graze a questa strazione, la pagina web pote essere visualizzata eonettarnente sia sul monitor dua personal computer sa sulle schetmo di un tablet od une smartphone. La serione 1a aesione di un file HTML contione i tag che defniscono cid che appari nella pogina we, Nel scorpos dela pagina i coda Pinserimente dei contanati- testo; bell, m= agin, altri element’ mltimedial, ink lf evi ci orsuperema im dettagio nel pros simo capiccle ‘Qui esamineremo invece acu possbili mod di strutturaree orzanizzare i conte ‘nti nella pagina tramite tag che sono sinvisibi a schermos, perené dedicat alin paginazione ino alewvento della versione 5 dell HTML, il ag principe per Vorganizzazione dei contenuti stato
    , che suddividela pagina web in pid/sezioni,ogouna dele qual, ‘unge da contenitore per att tag ‘esempio della figura 7.16 movtra come si possa usare il tag
    insiome oli atrinutielasae 1a ‘Questo codice definice alle ighe 14 e 24 due sexioni a cul & attrfouta In stesan classe mia_classe; nel browser Ie due sezion eppaiono percio formattate allo stesso ‘mod, con Hondo gill, in base al fogio ai stile deni lle righ 7 {a Sezione defnitaallariga 19 ha invece un sttrbuto 4d ed & associata al diverse stile mio 4a desilto alle ighe 9-10 del codice. Questa la sezione che il browser vi sualizza con lo sfonde rors, 786 Jarno esting Saray tata ‘imetadati iste gf sent y J pienero el tog “nowy deinerino ‘omteat ene sarenno veoinen rose Poche sigh Inia! di codice CSS permettono dunque di formate concent tnvintera sere di sezioni della pagina HTML, tramiteYattrto elaes, oppure una singola sezione specifica identfiatadallatebuto 4d. ‘a notata che Te deticizoni¢ stile che si applicano a una classe sono preceaute al punta (.mla_clasee alla rige 7), mentre por un id sono precedute dal carattere cancellewo fémia_ia ala riga 9). Identifeator esas sono eters universal Ii si pub usare per qualsiasi tag a cut si posta apalcare un foglio di stile oun codice JavaScript. La differenza ra due che {Ld pub essere atibuit a un unico elemento nella pagina. 1a versione pi recente di ETAL ha introdeto, came ora vedremo, ag specified Impaginarione ene detniseano in manteraunivocn la composisone della pagina. Ci thx vo oleate «poco consign aun da tag , ARTICLES, ASTDED © MEADER> (da non eonfondere con la sezione lone ghar Glasses Figure 717 unmodela ssrttuacon ager TLS cc > , 2 indica una parzone dela pagina che ospita contenu ditintio marginal, per ecempio i comand di navigazione oi banner pubblictai;idealmente appare 2 Tazo del contenuto principale, ma Tinserimenta del tag di per 8 non ne prescrve sutomaticamente la posizione; > . tag finale cas strutsua, & analog al pit ai agin del word proces: sor; nelle pagine web, per, anziché ospitare i numeri di pagina ¢usato per inserire jnformazioni come Ia dichisrasione di copyright « i dati del'autore o dell axenda plopritaria del site {a strature della figura 7.17 non va considerata come rgida e pd anche essere anni data pit vote allinterno di una stesea pagina web, Un blog, per esempio, pub essere strutturato cosi che ogni pect sia un pud contenere un
    , con il italo del post ei link per chi vuole fare comment, «un Meodice HTML, alte a specificare i contenutl delle pagine web, serve che per determinare 3 comportamento de browse, per fornire me {ndati ot motor i ricerca «per mpaginare scentenu > gn pagina HTML ha une ezine con tag che denna sl brow se informazion sulle carateristich dela pagina e su come interpre tareilcodice stesso. > gn pagina HTM ha po una seaione , cul tagservono per vi> sualizzae a schermof content e anche per otganizzamela swuttura > EITM ha introdotojmuov tag cHEADERD, , & “, che alutano a razionalizae Venpapinazione del si web. SER Hl Atirero diquletagvarnacodtiatin HTML content Bf Scriin casein guar del fig name dl og dala pagravied ne cevmo essereisuaizzataschemmapagiaione HIM pl appoprao. dal bower [Bd Sc due rae funn important vote dal tagcat nella sezone . 2 Bl ces etrsionocerverostin! code duns tua pagina wc per far sapere che autre seitu? 78 es. -HREF="https: _ come un bloc di testo, Perio va ‘capo in modo automatic alla Chiusura di ogni tag anche nel caso della rga 11 del ‘codice, ove abbiame digitato tre tag consecutivamente ‘Se ora nel browser prem! il tasto Pl per far apparire il codic e pot nel rquadro @ destraselezioni uno dei tag potral vedere | valor di default che ne regolano la visua- Hzzazione, come in barea a deetrn nella figura 4 Siriconosce cosi che per ogni tag browser applica un vera e proprio fet di stile predefinit, Nel caso di <2>, per esernpio la figura mestra che: > lavisualizzazione (Aieplay| & come blocco di testo (block > ilcorpo del carattere (font-size) &speciicato come 1.Sem cid significa che sari tunavoltaemesze pi grande rspetoalladimensione dl test standard, fasta per conventions in 16 panti; > lleposos grafico del carter (ront-weighe) lo stile gressetio bata); > Yapplicazione wabkit, che nel beowser si occupa del rendering, cio’ dalla resa graf ‘ansehermo, tesa la dimensione dei margin: before/aftar/seart/ends gust {ao lati del blocco di testo, me Tote ane A eens aoe pene oh TM 'paragrati InFIMLI tg a> define un paraga, che pe browsed soo tiblacco a testo standard ‘ie comport che, per default, un paragrafo sar visulizato come testo privo di formattazioniinoliue i testo nda sampre a capo alla chiuvura del tg

    , come viene anche pe tito, ma non prima, ‘Le unita di misura in HTML [UHTWL contented ueare verse unit dt mlsura pera dimensione del tera, punto pixel (px) sono un'unita dl misuraassoluta, che gaantise una visu licedrione wniforme del testo su monitor con solizion diverse, ma non sempre "sponde correttamente quando si usa la funzione zoom del browse. adattsbii de testo ello zoom 8 invece garantie dalle unica di misura ame 2, ‘che sono relative esealail:defnscono la dmencione del test rispetivamente ‘come miltiploo come percentusle di una dimensioned riferimentoprestabiits. Di slitos imposta ana a misura di rierimento ne dels pagina ol stassegnano le dimension! del carat al sngol element dela pagina sand Fem, im

    Potrebbero piacerti anche