html e css - 2 | webmaster & webdesigner

of 33/33
HTML e CSS [2] Synergia – Matteo Magni

Post on 29-Nov-2014

483 views

Category:

Technology

0 download

Embed Size (px)

DESCRIPTION

Seconda lezione modulo HTML e CSS del corso per WebMaster & WebDesigner 2013

TRANSCRIPT

  • 1. HTML e CSS [2]Synergia Matteo Magni
  • 2. Elenchi http://www.diodati.org/w3c/html401/struct/lists.html
    • impostaa30il
    • Informazioninonnumerodiquestavocedi ordinate.elenco.
    • Informazioniordinate
    • impostaa40il
    • Definizioninumerodiquestavocedielenco.
  • attribuisceaquestavocedielencoilnumero41.
  • 3. Liste - Menu
      • Home title="Home">Home
      • Contatti title="Contatti">Contatti
      • azienda title="azienda">azienda
    Lo formatteremo tramite i css
  • 4. Elenchi di definizioni http://www.diodati.org/w3c/html401/struct/lists.html DL, DT, DD Gli elenchi di definizioni si Dweebdifferenziano solo leggermente daglialtri tipi di elenchi per il fatto che le personagiovaneedvoci di elenco consistono di due parti: eccitabilechepuun termine e una descrizione. Il maturarediventandountermine fornito per mezzo NerdounGeekdellelemento DT ed vincolato a Hackercontenuto in riga. La descrizione data con lelemento DD che unabileracchiude contenuto a livello di programmatoreblocco.
  • 5. Collegamentihttp://www.diodati.org/w3c/html401/struct/links.html Nellesempio che segue, lelemento A definisce un collegamento. Lancora sorgente il testo "sito Internet del W3C" e lancora di destinazione "http://www.w3.org/": sito InternetdelW3C
  • 6. Collegamenti - Ancore Usare attributo name:...dellHTML...Collegamentoadancoravuota Usare attributo id:Sezionedue...successivamenteneldocumento

    FateriferimentoallaSezioneduepisopra

  • 7. Collegamenti Ancore (2) Usare id o name? Gli autori dovrebbero considerare i seguenti aspetti, quando devono decidere se usare id o name per un nome di ancora: Lattributo id pu essere pi che un semplice nome di ancora (ad es., un selettore per fogli di stile, un identificatore di elaborazione, ecc.). Alcuni programmi utente pi vecchi non supportano le ancore create con lattributo id. Lattributo name consente nomi di ancora pi ricchi (per mezzo di entit).
  • 8. Collegamenti url Quando si inserisce lurl per un link ad un documento HTML, questo pu essere indirizzato in maniera assoluta. http://www.magni.me/pippo/pluto.html In questo caso ci si riferisce al documento presente sullhost denominato www.magni.me, presente nella sottodirectory pippo e avente nome pluto.html /pippo/pluto.html In questo caso ci si riferisce ad un documento pluto.html presente nella directory di primo livello /pippo presente nello stesso server che richiama tale Esempio: ../paperino/pippo.html In questo caso si invoca un file che si trova in una directory denominata paperino la quale allo stesso livello gerarchico della directory in cui presente il file che lo invoca. Semprechenoncisianomeccanismidi rewriteurl
  • 9. Collegamenti - title http://www.diodati.org/w3c/html401/struct/global.html#h-7.4.3 Questo attributo offre informazioni per la consultazione relative allelemento per il quale impostato. A differenza dellelemento TITLE, che offre informazioni su un intero documento e pu apparire una volta soltanto, lattributo title pu chiosare un qualsiasi numero di elementi. Si consulti la definizione di un elemento per verificare se esso supporta questo attributo. I valori dellattributo title possono essere rappresentati dai programmi utente in una variet di modi.
  • 10. Collegamenti - titlePer esempio, i browser visuali mostrano frequentemente il titolo come un"consiglio utile" (un breve messaggio che appare quando il dispositivo dipuntamento si ferma su un oggetto). I programmi utente di tipo acusticopossono, in un contesto analogo, dire a voce linformazione presente nel title.Ad esempio, impostare tale attributo in un collegamento consente ai programmiutente (visuali e non visuali) di dire agli utenti qualcosa sulla natura della risorsacollegata:Eccounafotodimeinimmersioneconlautorespiratorelestatescorsa...dellaltrotesto...
  • 11. Immaginihttp://www.diodati.org/w3c/html401/struct/objects.html
  • 12. Risorse esterne
  • 13. Attributo ALT http://www.diodati.org/w3c/html401/struct/objects.html#adef-alt Lattributo alt specifica il testo alternativo che riprodotto quando limmagine non pu essere visualizzata. I programmi utente devono riprodurre il testo alternativo quando non possono supportare le immagini, quando non possono supportare un certo tipo di immagine o quando sono configurati per non visualizzare immagini.
  • 14. Se manca limmagine?Browser testuale
  • 15. Se manca limmagine?Chrome Firefox
  • 16. La ballata dellalt tooltip Alcuni browser mostrano lattributo alt comeToolTip quando il cursore passa sullimmagine. E un errore, il testo alt uno strumento di accessibilit. Non ha senso mostrare test alt ridondanti che il visitatore normodotato pu gi vedere.
  • 17. Immagini decorative? Per le immagini senza CorsodiHTML5 Non andiamo a complicare la vita Selimmaginenon allutente con alt privi di cnonvedremo significato frasiinutili.
  • 18. Uso di file esterni, multimedialit ed animazionihttp://www.diodati.org/w3c/html401/struct/objects.htmlSe volete inserire file multimediali (audio e video),oppure effetti grafici particolari scritti in qualchelinguaggio di programmazione, ricordatevi sempre difare attenzione al peso dei file che state inserendo.Siamo infatti sul web e dunque tutti i file, in un modo onellaltro, dovranno essere scaricati dal visitatore delvostro sito per essere correttamente visualizzati.
  • 19. Image & Link se inserite allinterno risultano/Icons/WWW/w3c_home_nb cliccabili"alt="W3C"width="72"height="47">
  • 20. Tools for WebMaster Di fronte a HTML Css Javascript non siamo soli
  • 21. Tools - Firebug Firebug unestensione di Mozilla Firefox che permette il debug, la modifica e il monitoraggio di tutti gli aspetti di una pagina web, come i fogli di stile, il codice HTML, la struttura DOM e il codice JavaScript (wikipedia)
  • 22. Tools Web developer toolbar Web Developer unestensione per Mozilla Firefox e i browser basati su Gecko (Flock e Seamonkey) che aggiunge al browser una toolbar con molti strumenti utili ai web developer. (wikipedia)
  • 23. Tools - Chrome
  • 24. Tools - IE Internet Explorer Developer Toolbarhttp://www.microsoft.com/en-us/download/details.aspx?id=18359
  • 25. Frameshttp://www.diodati.org/w3c/html401/present/frames.html In HTML i frame consentono agli autori di presentare i documenti in viste multiple, che possono essere finestre indipendenti o sottofinestre. Le viste multiple offrono ai progettisti un modo per mantenere determinate informazioni visibili, mentre altre viste sono fatte scorrere o sono sostituite. Ad esempio, allinterno della stessa finestra, un frame potrebbe mostrare uninsegna statica, una seconda un menu di navigazione ed una terza il documento principale, che pu essere fatto scorrere o pu essere sostituito navigando nel secondo frame.
  • 26. Frames (2)HTMLPUBLIC"//W3C//DTDHTML4.01Frameset//EN""http://www.w3.org/TR/html4/frameset.dtd">........contenutoperchinonsupportaiframe