Your SlideShare is downloading. ×
Html e Css - 2 | WebMaster & WebDesigner
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Html e Css - 2 | WebMaster & WebDesigner

343
views

Published on

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

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

Published in: Technology

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
343
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
23
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. HTML e CSS [2]Synergia – Matteo Magni
  • 2. Elenchi http://www.diodati.org/w3c/html401/struct/lists.html<ol> <ul><li value="30"> imposta a 30 il  <li>Informazioni non numero di questa voce di  ordinate.</li>elenco. <li>Informazioni ordinate</li><li value="40"> imposta a 40 il  <li>Definizioni</li>numero di questa voce di elenco. </ul><li> attribuisce a questa voce di elenco il numero 41.</ol>
  • 3. Liste - Menu<div id="navigation_1"> <div id="navigation_2"><ul> <ul><li id="home"><a href="#"  <li id="home"><a href="#" title="Home ">Home</a></li> title="Home ">Home</a></li><li id="contatti"><a href="#"  <li id="contatti"><a href="#" title="Contatti">Contatti</a></li> title="Contatti">Contatti</a></li><li id="azienda"><a href="#"  <li id="azienda"><a href="#" title="azienda">azienda</a></li> title="azienda">azienda</a></li></ul> </ul></div> </div> Lo formatteremo tramite i css
  • 4. Elenchi di definizioni http://www.diodati.org/w3c/html401/struct/lists.html• DL, DT, DD <dl>Gli elenchi di definizioni si   <dt>Dweeb</dt>differenziano solo leggermente daglialtri tipi di elenchi per il fatto che le   <dd>persona giovane ed voci di elenco consistono di due parti: eccitabile che può un termine e una descrizione. Il maturare diventando un termine è fornito per mezzo Nerd o un Geek</dd>dellelemento DT ed è vincolato a   <dt>Hacker</dt>contenuto in riga. La descrizione èdata con lelemento DD che   <dd>un abile racchiude contenuto a livello di programmatore</dd>blocco. </dl>
  • 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/":• <a href="http://www.w3.org/">sito  Internet del W3C</a>
  • 6. Collegamenti - Ancore• Usare attributo name:<A name="ancora­vuota"></A><EM>...dellHTML...</EM><A href="#ancora­vuota">Collegamento ad ancora vuota</A>• Usare attributo id:<H2 id="sezione2">Sezione due</H2>...successivamente nel documento<P>Fate riferimento alla <A href="#sezione2">Sezione due</A> più sopra
  • 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. Sempre che non ci siano meccanismi di  rewrite url
  • 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:Ecco una foto di  <A href="http://someplace.com/neatstuff.gif" title="Una mia immersione con lautorespiratore">   me in immersione con lautorespiratore lestate scorsa</A>...dellaltro testo...
  • 11. Immaginihttp://www.diodati.org/w3c/html401/struct/objects.html<img src="pippo.png"     alt="Una foto della mia famiglia al lago.">
  • 12. Risorse esterne
  • 13. Attributo ALT http://www.diodati.org/w3c/html401/struct/objects.html#adef-alt<IMG src="mappasito.gif" alt="Mappa del sito di synergia" longdesc="mappasito.html"/>• 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 Corso di HTML<img  significato, come le gif src=”spazio.gif”  di spaziatura usate alt=”gif di  alt=” ” spaziatura”/>5• Non andiamo a complicare la vita Se limmagine non  allutente con alt privi di cè non vedremo  significato frasi inutili.
  • 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<a  I link possono esserehref="http://www.w3.org/Status" title="W3Cs  anche immagini, cheOpen Source"> se inserite allinterno<img src="http://www.w3.org del tag <a> risultano/Icons/WWW/w3c_home_nb “cliccabili”" alt="W3C" width="72" height="47"></a>
  • 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)<!DOCTYPE HTML PUBLIC "­//W3C//DTD HTML 4.01 Frameset//EN"   "http://www.w3.org/TR/html4/frameset.dtd">...<frameset cols="20%, 80%">  <frameset rows="100, 200">      <frame src="frame1.html">      <frame src="frame2.html">  </frameset>  <frame src="frame3.html">  <noframes>.....contenuto per chi non supporta i frame  </noframes></frameset></html>
  • 27. Frame (3) Obiettivo: riutilizzare il codice già scritto Col tempo ci si è accorti che il menu, lheader e il footer venivano ripetuti uguali in tutte le pagine.
  • 28. Frames - Target• Assegnando un nome ad un frame tramite lattributo name, gli autori possono riferirsi ad esso come al "bersaglio" di collegamenti definiti da altri elementi. Lattributo target può essere impostato per elementi che creano collegamenti (A, LINK), mappe immagine (AREA) e moduli (FORM).• Si consulti per favore la sezione sui nomi di frame di destinazione per informazioni sui nomi di frame riconosciuti.• Questo esempio illustra come le destinazioni consentano la modifica dinamica del contenuto di un frame. In primo luogo definiamo un frameset nel documento frameset.html, mostrato qui:
  • 29. Frames – Target (2) • Tale meccanismo sembrava fornire una buona esperienza di navigazione e permetteva al webmaster di non ripetere codice • DRY -Dont repeat yourself Allora, perché non si usa più??
  • 30. Frames are Evil • I frame danno grossi problemi di usabilità • Spesso capitava di raggiungere pagine indicizzate ma non avere a disposizione il menu per navigare • Non sono molto graditi dai motori di ricerca Esempio: http://www.phing.info/docs/guide/current/http://www.phing.info/docs/guide/current/chapters/ProjectComponents.html
  • 31. iFrame • Liframe (dallinglese inline frame) in informatica è un Elemento HTML. Si tratta infatti di un frame "ancorato" allinterno della pagina, equivale cioè ad un normale frame, ma con la differenza di essere un elemento inline (interno) della pagina, non esterno. • Liframe viene generalmente utilizzato per mostrare il contenuto di una pagina web, o di una qualsivoglia risorsa, allinterno di un riquadro in una seconda pagina principale. • Nel linguaggio HTML liframe viene rappresentato tramite il tag <iframe></iframe>.
  • 32. iFrame (2)Spesso ce li fanno usare i servizi esterni • Liframe ha gli stessi attributi del tag <frame>, i principali sono: width, height, src, frameborder che rappresentano rispettivamente la larghezza, laltezza, il file dorigine da visualizzare e la dimensione del bordo. Può inoltre sostenere lattributo style o comunque una classe di stile CSS. • A causa di alcune truffe informatiche che hanno sfruttato talune vulnerabilità dei browser pur essendo una risorsa utile e di per sé innocua, liframe ha ormai una fama ingiustamente negativa. • In ogni caso, per questioni di accessibilità e usabilità, ne è sconsigliato lutilizzo dalle nuove direttive del W3C.
  • 33. Domande? Slide:http://www.slideshare.net/ilbonzo Code:https://github.com/ilbonzo/Cypher mail: matteo@magni.me

×