HTML CORSO BASE <ul><li>Il Browser </li></ul><ul><li>LO Standard HTML </li></ul><ul><li>I TAG </li></ul><ul><li>Annidament...
Maria A.R. Consoli  Corso HTML  L'HTML è il linguaggio con cui potete indicare come i vari elementi vanno disposti in una ...
Maria A.R. Consoli  Corso HTML  HTML E I BROWSER <ul><li>Il  Browser  è il programma che usate quando navigate nel Web. </...
Maria A.R. Consoli  Corso HTML  CACHE:  cartella in cui vengono memorizzati i files scaricati dal web . Internet Explorer ...
Maria A.R. Consoli Corso HTML  Lo standard HTML Il W3C ha rilasciato diverse versioni di questo linguaggio (HTML 2.0, HTML...
Maria A.R. Consoli Corso HTML  <ul><li>uno o più  browser </li></ul><ul><li>un  editor testuale  per scrivere il codice HT...
Maria A.R.Consoli Corso HTML  Questo avviene perché l'estensione non è .html, ma  .html.txt Per visualizzare l'estensione ...
Maria A.R.Consoli Corso HTML  Questo succede perché la pagina visualizzata è sempre quella vecchia memorizzata nella cache...
Maria A.R.Consoli Corso HTML  I TAG <ul><li>Hanno il compito di visualizzare le diverse parti di una pagina web. </li></ul...
Maria A.R.Consoli Corso HTML  Alcuni particolari tag non hanno contenuto - perché ad esempio indicano la posizione di alcu...
Maria A.R. Consoli  Corso HTML  L'annidamento  ci permette di attribuire formattazioni successive al testo che stiamo inse...
Maria A.R. Consoli  Corso HTML  indicazioni significative per il webmaster, ma invisibili al browser.  Inserendo i comment...
L'HTML è &quot;case unsensitive”   Questo significa che è del tutto indifferente se scrivere i tag in maiuscolo o in minus...
Maria A.R. Consoli  Corso HTML  STRUTTURA DI UNA PAGINA Una apagina HTML è suddivisa in tre sezioni: Specifiche Inizio cod...
Maria A.R. Consoli  Corso HTML  SPECIFICA !DOCTYPE <!DOCTYPE HTML PUBLIC &quot;-//W3C//DTD HTML 4.01 Transitional//IT&quot...
Maria A.R. Consoli  Corso HTML  HEAD <ul><li>Contiene informazioni non immediatamente percepibili, ma che riguardano il mo...
Maria A.R. Consoli  Corso HTML  BODY Sfondo Margini Lingua Colori del testo e dei link Titoli Blocchi di testo Allineament...
Maria A.R. Consoli  Corso HTML  BODY Imposta lo sfondo con un colore BGCOLOR Sintassi:  <body bgcolor=“colore&quot;> Bgcol...
Maria A.R. Consoli  Corso HTML  BODY Imposta lo sfondo con una immagine Sintassi:  <body background=“IMMAGINE&quot;> ESEMP...
Maria A.R. Consoli  Corso HTML  BODY Imposta i margini MARGIN Sintassi:  <body rightmargin =“n” leftmargin=“n&quot; topmar...
Maria A.R. Consoli  Corso HTML  BODY Imposta la lingua specifica ai motori di ricerca e al browser dell’utente quale lingu...
Maria A.R. Consoli  Corso HTML  BODY Impostare il colore del testo per tutta la pagina TEXT Sintassi:  <body text=“colore&...
Maria A.R. Consoli  Corso HTML  BODY Impostare il colore del link per tutta la pagina LINK Sintassi:  <body link=“colore&q...
Maria A.R. Consoli  Corso HTML  BODY Elemento di blocco TITOLO Sintassi:  <h x >titolo </h x > “ h“=heading(titolo) X=nume...
Maria A.R. Consoli  Corso HTML  BODY Elemento di blocco PARAGRAFO Sintassi:  <p>paragrafo </p> ESEMPIO <p>esempio di parag...
Maria A.R. Consoli  Corso HTML  BODY Elemento di blocco DIV Sintassi:  <div>testo</div ESEMPIO <div>Blocco di testo</div> ...
Maria A.R. Consoli  Corso HTML  BODY Elemento di blocco SPAN Sintassi:  <span>contenitore</span> ESEMPIO <span>ESEMPIO DI ...
Maria A.R. Consoli  Corso HTML  BODY Elemento di blocco ALLINEAMENTO Sintassi:  <p align=“orientamento&quot;>testo</p> “ O...
Maria A.R. Consoli  Corso HTML  BODY A CAPO Sintassi:  <br>(a capo)  oppure  <hr attributi> (a capo con una linea) attribu...
Maria A.R. Consoli  Corso HTML  BODY LO STILE STILI FISICI definiscono graficamente lo stile del carattere   Esempio12 <b>...
Maria A.R. Consoli  Corso HTML  BODY LO STILE STILI LOGICI forniscono informazioni sul ruolo svolto dal contenuto  SENZA R...
Maria A.R. Consoli  Corso HTML  BODY LO STILE STILI LOGICI forniscono informazioni sul ruolo svolto dal contenuto  Esempio...
Maria A.R. Consoli  Corso HTML  BODY IL FONT <font face=&quot;Arial&quot;>testo in Arial</font> testo in Arial <font face=...
Maria A.R. Consoli  Corso HTML  BODY IL FONT Le famiglie di font Verdana, Arial, Helvetica, sans-serif  Verdana e caratter...
Maria A.R. Consoli  Corso HTML  BODY IL COLORE ESEMPIO <font color=“blu&quot;>testo blu </font> Sintassi:  <font color=“co...
Maria A.R. Consoli  Corso HTML  BODY LA DIMENSIONE ESEMPIO <font size=&quot;5&quot;>testo di grandezza 5</font>  <font siz...
Maria A.R. Consoli  Corso HTML  BODY GLI ELENCHI <ul><li>Elenchi ordinati </li></ul><ul><li>Elenchi non ordinati </li></ul...
Maria A.R. Consoli  Corso HTML  BODY GLI ELENCHI Elenchi ordinati Sintassi <ol>  <li>nome del primo elemento  <li>nome del...
Maria A.R. Consoli  Corso HTML  BODY GLI ELENCHI Elenchi ordinati Sintassi <ol type=“attributo”>  <li>nome del primo eleme...
Maria A.R. Consoli  Corso HTML  BODY GLI ELENCHI Elenchi non ordinati Sintassi <ul>type=“attributo”>  <li>nome del primo e...
Maria A.R. Consoli  Corso HTML  BODY GLI ELENCHI Elenchi di definizioni Sintassi <dl>>  <attr>nome del primo elemento  <at...
Maria A.R. Consoli  Corso HTML  Ipertesti I LINK I link sono &quot;il ponte&quot; che consente di passare da un testo all’...
Maria A.R. Consoli  Corso HTML  Ipertesti I LINK Nota bene E’ opportuno dividere il sito in varie sezioni, in modo da aver...
Maria A.R. Consoli  Corso HTML  Ipertesti LE ANCORE Servono per muoversi rapidamente in una pagina che non entra in una sc...
Maria A.R. Consoli  Corso HTML  Ipertesti UN TITOLO AI LINK Nota bene L’attributo  title  è molto importante per descriver...
Maria A.R. Consoli  Corso HTML  HEAD ESEMPIO: <head>    <meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html;...
Maria A.R. Consoli  Corso HTML  Ipertesti I LINK <ul><li>Per far riferimento a un file che si trovi all’interno della stes...
Upcoming SlideShare
Loading in...5
×

Lezione HTML

1,374

Published on

HTML

Published in: Education
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
1,374
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
77
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Lezione HTML

  1. 1. HTML CORSO BASE <ul><li>Il Browser </li></ul><ul><li>LO Standard HTML </li></ul><ul><li>I TAG </li></ul><ul><li>Annidamento e Identizione </li></ul><ul><li>I commenti </li></ul><ul><li>Case unsensitive </li></ul><ul><li>Struttura pagina-DOCTYPE </li></ul><ul><li>HEAD </li></ul><ul><li>BODY </li></ul><ul><li>Ipertesti </li></ul><ul><li>Immagini </li></ul><ul><li>Suoni </li></ul><ul><li>Tabelle </li></ul><ul><li>Form </li></ul>Maria A.R. Consoli Corso HTML BY,  NC, SA Attribuzione - Non commerciale - Condividi allo stesso modo : Commons Deed | Legal Code)
  2. 2. Maria A.R. Consoli Corso HTML L'HTML è il linguaggio con cui potete indicare come i vari elementi vanno disposti in una pagina Web. Un documento html non è nient'altro infatti che un file di testo con delle indicazioni sul colore delle scritte, sulla posizione delle immagini all'interno della pagina, su come far scorrere il testo, e altre cose di questo genere.
  3. 3. Maria A.R. Consoli Corso HTML HTML E I BROWSER <ul><li>Il Browser è il programma che usate quando navigate nel Web. </li></ul><ul><li>scarica i vari files che si trovano su un computer remoto (il server) </li></ul><ul><li>legge i documenti scritti in html </li></ul><ul><li>visualizza la pagina </li></ul><ul><li>Internet Explorer </li></ul><ul><li>Netscape Navigator </li></ul><ul><li>Mozilla (open source) </li></ul><ul><li>Opera </li></ul>
  4. 4. Maria A.R. Consoli Corso HTML CACHE: cartella in cui vengono memorizzati i files scaricati dal web . Internet Explorer visualizza così il percorso della cache Strumenti > Opzioni Internet > Generale > Impostazioni > Visualizza file rendering della pagina: visualizzazione di un file html da parte del browser. Motore di rendering: sezione del browser che si occupa di mostrare sul video la pagina. HTML: acronimo di Hypertext Markup Language (&quot;Linguaggio di contrassegno per gli Ipertesti&quot;) W3C: (World Wide Web Consortium ( http://www.w3.org/ )) organismo che si occupa di standardizzare la sintassi del linguaggio HTML Alcuni termini
  5. 5. Maria A.R. Consoli Corso HTML Lo standard HTML Il W3C ha rilasciato diverse versioni di questo linguaggio (HTML 2.0, HTML 3.2, HTML 4.0); l'HTML si è evoluto in XHTML. <ul><li>l'HTML verrà utilizzato ancora per diversi anni come linguaggio principe delle pagine web. </li></ul><ul><li>Alcuni concetti dell'XHTML richiedono già una certa comprensione dei problemi che si acquisisce solo con l'esperienza. </li></ul><ul><li>L'HTML è più immediato e consente di incominciare subito a produrre documenti web; </li></ul><ul><li>Chi conosce l'XHTML non può non conoscere l'HTML . La conoscenza dell'HTML è infatti il prerequisito essenziale di ogni webmaster. </li></ul><ul><li>Le differenze tra i due linguaggi non sono così marcate e passare dall'uno all'altro non dovrebbe richiedere molta fatica. </li></ul>MA ALLORA PERCHE'?
  6. 6. Maria A.R. Consoli Corso HTML <ul><li>uno o più browser </li></ul><ul><li>un editor testuale per scrivere il codice HTML </li></ul>Cosa serve? <ul><li>CREARE IL FILE </li></ul><ul><li>Aprite in editor testuale, per esempio “Blocco note”; </li></ul><ul><li>Scrivere il codice di una pagina; </li></ul><ul><li>Salvare con l’estensione &quot;html&quot;, ad esempio miaPagina.html ; </li></ul><ul><li>Chiudete l’editor </li></ul><ul><li>Troverete il file con l’icona del browser e si aprirà in automatico cliccandoci su due volte. </li></ul>Come fare? <ul><li>MODIFICARE IL FILE </li></ul><ul><li>utilizzate i comandi Visualizza > HTML , </li></ul><ul><li>cambiate il codice, </li></ul><ul><li>salvate, </li></ul><ul><li>utilizzate il pulsante &quot;aggiorna&quot; del browser </li></ul><ul><li>visualizzare le modifiche. </li></ul>
  7. 7. Maria A.R.Consoli Corso HTML Questo avviene perché l'estensione non è .html, ma .html.txt Per visualizzare l'estensione del file in sistemi Windows andate in una cartella e quindi: Strumenti > Opzioni cartella > Visualizzazione E poi togliere la spunta da: &quot;Nascondi le estensioni dei file per i tipi di file conosciuti&quot; infine premere il pulsante: &quot;Come cartella corrente” LE MODIFICHE... CHE FINE HANNO FATTO? il file continua ad apparire come documento di testo?
  8. 8. Maria A.R.Consoli Corso HTML Questo succede perché la pagina visualizzata è sempre quella vecchia memorizzata nella cache. Ricordatevi di impostare la cache del vostro browser in modo che il file html venga ricaricato ogni volta che richiamate la pagina. In Internet Explorer: Strumenti > Opzioni Internet > Generale > Impostazioni > Ricerca versioni più recenti delle pagine memorizzate: all'apertura della pagina AGGIORNATE SEMPRE LA CACHE La pagina visualizzata non è modificata?
  9. 9. Maria A.R.Consoli Corso HTML I TAG <ul><li>Hanno il compito di visualizzare le diverse parti di una pagina web. </li></ul><ul><li>Hanno differenti nomi a seconda della loro funzione. </li></ul><ul><li>I tag vanno inseriti tra parentesi uncinate ( <TAG> ) </li></ul><ul><li>la chiusura del tag viene indicata con una &quot;/&quot; (Quindi: </TAG> ). </li></ul><ul><li>Il contenuto va inserito tra l'apertura e la chiusura del tag medesimo, secondo questa forma: </li></ul><ul><li><TAG attributi> testo </TAG> </li></ul><ul><li>la struttura di un attributo è: attributo=&quot;valore&quot; </li></ul><ul><li>Quindi in definita la struttura di un tag sarà: </li></ul><ul><li><TAG attributo1=&quot;valore1&quot; attributo2=&quot;valore2&quot;> testo </TAG> </li></ul>
  10. 10. Maria A.R.Consoli Corso HTML Alcuni particolari tag non hanno contenuto - perché ad esempio indicano la posizione di alcuni elementi (come il tag delle immagini) -, conseguentemente questi tag non hanno neanche chiusura. La loro forma sarà dunque: <TAG attributi> Ecco un esempio di immagine: <IMG widht=&quot;20&quot; height=&quot;20&quot; src=&quot;miaImmagine.gif&quot; alt=&quot;alt&quot;> come si vede il tag non viene chiuso. Questo tipo di tag viene detto &quot;empty&quot;, cioè &quot;vuoto&quot;. TAG PARTICOLARI
  11. 11. Maria A.R. Consoli Corso HTML L'annidamento ci permette di attribuire formattazioni successive al testo che stiamo inserendo. esempio: <TAG1 attributi>  contenuto 1   <TAG2>    contenuto 2   </TAG2> </TAG1> Apertura e chiusura del tag si trovano allo stesso livello, mentre il contenuto viene spostato verso destra di un tab: Questa procedura si chiama indentazione , e grazie ad essa il codice HTML risulta più leggibile esempio: <P align=&quot;right&quot;>  testo 1    <P align=&quot;left&quot;>       testo 2    </P> </P> Annidamento e Identazione
  12. 12. Maria A.R. Consoli Corso HTML indicazioni significative per il webmaster, ma invisibili al browser. Inserendo i commenti in punti specifici del documento ci permette di mantenere l'orientamento anche in file molto complessi e lunghi. Sintassi <!-- questo è un commento --> I COMMENTI esempio: <!-- menu di sinistra --> <!-- barra in alto --> <!-- eccetera -->
  13. 13. L'HTML è &quot;case unsensitive” Questo significa che è del tutto indifferente se scrivere i tag in maiuscolo o in minuscolo. <P ALIGN=&quot;RIGHT&quot;> e <p align=&quot;right&quot;> vengono letti allo stesso modo dal browser. Per aumentare la leggibilità del codice è buona norma scrivere in maiuscolo il nome del tag (es: <P> ) e in minuscolo gli attributi (es: align=&quot;right&quot; ). Quindi: <P align=&quot;right&quot;> L'XHTML è &quot;case sensitive&quot; per abituarsi già al linguaggio che verrà è consigliabile scrivere tutto in minuscolo. Maiuscolo e minuscolo, in ogni caso non costituiscono errore. Maiuscolo o minuscolo? Maria A.R. Consoli Corso HTML
  14. 14. Maria A.R. Consoli Corso HTML STRUTTURA DI UNA PAGINA Una apagina HTML è suddivisa in tre sezioni: Specifiche Inizio codice Testata Fine testata Corpo Fine corpo Fine codice esempio: SPECIFICHE <html> <!– Inizio codice --> <head> <!-- testata --> Qui il nostro contenuto  </head> <!– Fine testata --> <body> <!-- Corpo --> Qui il nostro contenuto </body> <!– Fine corpo --> </html> <!– Fine codice -->
  15. 15. Maria A.R. Consoli Corso HTML SPECIFICA !DOCTYPE <!DOCTYPE HTML PUBLIC &quot;-//W3C//DTD HTML 4.01 Transitional//IT&quot;> specifica il tipo di documento. E’ la prima riga da inserire. HTML : il tipo di linguaggio utilizzato è l'HTML PUBLIC : il documento è pubblico W3C : il documento fa riferimento alle specifiche rilasciate dal W3C DTD HTML 4.01 Transitional: il documento fa riferimento a una DTD (&quot;Document Type Definition&quot; cioè &quot;Definizione del tipo di documento&quot;); la versione di HTML supportata è la 4.01 &quot;transitional&quot; IT: la lingua con cui è scritta la DTD è l‘italiano ( EN : la lingua con cui è scritta la DTD è l'inglese)
  16. 16. Maria A.R. Consoli Corso HTML HEAD <ul><li>Contiene informazioni non immediatamente percepibili, ma che riguardano il modo in cui il documento deve essere letto e interpretato. Questo è il luogo dove scrivere </li></ul><ul><li>i meta-tag (alcuni sono ad esclusivo beneficio dei motori di ricerca), </li></ul><ul><li>script JavaScript o VbScript, </li></ul><ul><li>fogli di stile </li></ul><ul><li><meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=iso-8859-1&quot;> </li></ul><ul><li>indica al browser che deve caricare il set di caratteri occidentale (e non - ad esempio - il set di caratteri giapponese). </li></ul><ul><li><title>Nome del sito</title> </li></ul><ul><li>Il title è il titolo della pagina e compare in alto sulla barra del browser. </li></ul><ul><li><base href=“indirizzo url &quot;> </li></ul><ul><li>Il percorso assoluto a cui fare riferimento per trovare tutti i files a cui si fa riferimento. </li></ul><ul><li><meta name=&quot;keywords&quot; content=“parole da inserire nei motori di ricerca&quot;> </li></ul><ul><li>indica alcuni contenuti relativi al sito stesso. Le keywords compaiono separate da virgola, da punto e virgola, oppure senza alcun segno di interpunzione. </li></ul>Esempio
  17. 17. Maria A.R. Consoli Corso HTML BODY Sfondo Margini Lingua Colori del testo e dei link Titoli Blocchi di testo Allineamento Andare a capo Stile Font, Colore, dimensione Elenchi Qui è racchiuso il contenuto vero e proprio del documento Il contenuto della pagina verrà formattato a seconda dei tag utilizzati:
  18. 18. Maria A.R. Consoli Corso HTML BODY Imposta lo sfondo con un colore BGCOLOR Sintassi: <body bgcolor=“colore&quot;> Bgcolor =background color Colore= uno dei colori indicati nella tabella NOTA BENE Il numero di colori che l’utente ha a disposizione dipende dalla scheda video. Poiché non c’è modo di sapere quale scheda video abbia l’utente, i webdesigner fanno riferimento alla &quot;palette sicura&quot; dei 256 colori (palette web safe). Esempio1 colore parola chiave notazione esadecimale arancione orange #FFA500 blu blue #0000FF bianco white #FFFFFF giallo yellow #FFFF00 grigio gray #808080 marrone brown #A52A2A nero black #000000 rosso red #FF0000 verde green #008000 viola violet #EE82EE
  19. 19. Maria A.R. Consoli Corso HTML BODY Imposta lo sfondo con una immagine Sintassi: <body background=“IMMAGINE&quot;> ESEMPIO Se l’immagine “imgsfondo.gif” si trova nella stessa cartella della nostra pagina <body background=&quot;imgSfondo.gif&quot;> Se la sua posizione è diversa indicare il percorso assoluto <body background=“www.itcdefelice.it/immages/imgSfondo.gif&quot;> Se nella <HEAD> abbiamo dichiarato il tag “base ” <body background=“immages/imgSfondo.gif&quot;> NOTA BENE L’immagine di sfondo verrà ripetuta in orizzontale e in verticale. E’ possibile abbinare i due tag: <body bgcolor=&quot;#0000ff&quot; background=&quot;imgSfondo.gif&quot;> BACKGROUND Esempio2
  20. 20. Maria A.R. Consoli Corso HTML BODY Imposta i margini MARGIN Sintassi: <body rightmargin =“n” leftmargin=“n&quot; topmargin=“n“ downmargin=“n”> ESEMPIO <body leftmargin=“2&quot; topmargin=“3“ > NOTA BENE Il testo della pagina inizia al confine con il margine superiore, le eventuali immagini di sfondo inizieranno sempre dal bordo pagina. Se si utilizza un logo è bene eliminare i margini <body bgcolor=&quot;#0000ff&quot; background=&quot;imgSfondo.gif&quot;> Esempio3
  21. 21. Maria A.R. Consoli Corso HTML BODY Imposta la lingua specifica ai motori di ricerca e al browser dell’utente quale lingua stiamo utilizzando LANG Sintassi: <body lang=“sigla lingua&quot;> ESEMPIO <body lang=&quot;it&quot;> NOTA BENE Si tratta di un attributo che vi sarà utile soprattutto se vi capiterà di sviluppare dei siti multilingua
  22. 22. Maria A.R. Consoli Corso HTML BODY Impostare il colore del testo per tutta la pagina TEXT Sintassi: <body text=“colore&quot;> ESEMPIO <body text=&quot;red&quot;> oppure <body text=&quot;#ffffff&quot;> NOTA BENE Usate la tabella vista per il colore dello sfondo Esempio4
  23. 23. Maria A.R. Consoli Corso HTML BODY Impostare il colore del link per tutta la pagina LINK Sintassi: <body link=“colore&quot; alink=“colore&quot; vlink=“colore&quot;> link =collegamento a riposo (d i default i link sono blu ( #0000FF )) alink=collegamento attivo vlink=collegamento visitato(d i default i vlink sono ( #800080 ). ESEMPIO <body link=&quot;red&quot; alink=“brown&quot; vlink=&quot;green&quot;> NOTA BENE Usate la tabella vista per il colore dello sfondo Esempio5
  24. 24. Maria A.R. Consoli Corso HTML BODY Elemento di blocco TITOLO Sintassi: <h x >titolo </h x > “ h“=heading(titolo) X=numero da 1 a 6 (grandezze del titolo) . Si tratta dunque di un elemento di blocco ESEMPIO <h3>titolo 3 </h3> NOTA BENE Il tag <hx> risulta in grassetto e lascia una riga vuota prima e dopo di sé Le dimensioni del carattere dipendono dall’impostazione utente Esempio6
  25. 25. Maria A.R. Consoli Corso HTML BODY Elemento di blocco PARAGRAFO Sintassi: <p>paragrafo </p> ESEMPIO <p>esempio di paragrafo </p> NOTA BENE Il tag <P> lascia una riga vuota prima della sua apertura e dopo la sua chiusura. Esempio7
  26. 26. Maria A.R. Consoli Corso HTML BODY Elemento di blocco DIV Sintassi: <div>testo</div ESEMPIO <div>Blocco di testo</div> NOTA BENE Il blocco di testo va a capo, ma - a differenza del paragrafo – non lascia spazi prima e dopo la sua apertura. Esempio8
  27. 27. Maria A.R. Consoli Corso HTML BODY Elemento di blocco SPAN Sintassi: <span>contenitore</span> ESEMPIO <span>ESEMPIO DI SPAN</span> NOTA BENE non va a capo Esempio9
  28. 28. Maria A.R. Consoli Corso HTML BODY Elemento di blocco ALLINEAMENTO Sintassi: <p align=“orientamento&quot;>testo</p> “ Orientamento” =“left” oppure “right” oppure “justify” ESEMPIO <p align=&quot;left&quot;>testo</p><p align=&quot;right&quot;>testo</p><p lign=&quot;justify&quot;>testo</p> NOTA BENE L’attributo &quot;align&quot; è disapprovato dal W3C Esempio10
  29. 29. Maria A.R. Consoli Corso HTML BODY A CAPO Sintassi: <br>(a capo) oppure <hr attributi> (a capo con una linea) attributi: noshade sfuma la linea &quot; size &quot; l’altezza in pixel, &quot; width &quot; larghezza in pixel ESEMPIO <br> <hr noshade size=&quot;5&quot; width=&quot;50%&quot; > Esempio11
  30. 30. Maria A.R. Consoli Corso HTML BODY LO STILE STILI FISICI definiscono graficamente lo stile del carattere Esempio12 <b>testo </b> grassetto <i>testo</i> corsivo <u>testo</u> sottolineato <strike>testo</strike> tagliato <sup>testo </sup> apice <sub>testo</sub> pedice RENDERING testo testo testo testo testo Testo
  31. 31. Maria A.R. Consoli Corso HTML BODY LO STILE STILI LOGICI forniscono informazioni sul ruolo svolto dal contenuto SENZA RENDERING <abbr>abbreviazione</<abbr> abbreviazione <acronym>acronimo</acronym> acronimo <code>codice</code> linguaggio di progr. <q>citazione all’interno della frase</q> breve citazione
  32. 32. Maria A.R. Consoli Corso HTML BODY LO STILE STILI LOGICI forniscono informazioni sul ruolo svolto dal contenuto Esempio13 CON RENDERING <address>indirizzo</address> <blockquote>blocco di citazione</blockquote> citazione: rientrato a destra <cite>citazione</cite> citazione: corsivo <dfn>definizione</dfn> definizione: corsivo <em>enfasi</em> enfasi: corsivo <kbd>keyboard</kbd> digitazione: spaziatura fissa <samp>esempio</samp> esempio: spaziatura fissa <strong>rafforzamento</strong> con forza: grassetto <var>variabile</var> una variabile: corsivo
  33. 33. Maria A.R. Consoli Corso HTML BODY IL FONT <font face=&quot;Arial&quot;>testo in Arial</font> testo in Arial <font face=&quot;Verdana&quot;>testo in Verdana</font> testo in Verdana Sintassi: <font face=“tipo di font o famiglia di font&quot;>testo</font> NOTA BENE IL TAG <font> è disapprovato dal W3C. Il &quot;font&quot; di default è il &quot;Times&quot;. Non è possibile far sì che l’utente visualizzi un testo in un carattere fantasioso scelto da noi. Allo stato attuale dell’arte l’utente che naviga in internet può visualizzare solo i caratteri che sono installati nel suo S.O.: in Windows si tratta dei caratteri presenti in: Pannello di controllo > Tipi di caratteri
  34. 34. Maria A.R. Consoli Corso HTML BODY IL FONT Le famiglie di font Verdana, Arial, Helvetica, sans-serif Verdana e caratteri simili Arial, Helvetica, sans-serif Arial e caratteri simili Times New Roman, Times, serif Times e caratteri simili Courier New, Courier, mono Curier e caratteri simili Georgia, Times New Roman, Times, serif Georgia e caratteri simili Geneva, Arial, Helvetica, sans-serif Geneva e caratteri simili
  35. 35. Maria A.R. Consoli Corso HTML BODY IL COLORE ESEMPIO <font color=“blu&quot;>testo blu </font> Sintassi: <font color=“colore&quot;>testo </font> NOTA BENE Usate la tabella vista per il colore dello sfondo. Questo tag viene utilizzato se si intende usare un colore diverso da quello stabilito con il tag <text>. Di solito si utilizza in abbinamento col tag <font> Esempio: <font face=&quot;Verdana, Arial, Helvetica, sans-serif&quot; color=&quot;blue&quot;>
  36. 36. Maria A.R. Consoli Corso HTML BODY LA DIMENSIONE ESEMPIO <font size=&quot;5&quot;>testo di grandezza 5</font> <font size=“+2&quot;>testo di grandezza 5</font> Sintassi: <font size=“n&quot;>testo di grandezza n</font> n= misura del carattere da 1 a 7 oppure + o – n (relativamente a 3) NOTA BENE La dimensione del carattere di default nel browser Internet explorer è 3 La dimensione del carattere dipende dalle impostazioni del browser dell’utente . Di solito si utilizza in abbinamento col tag <font> Es.: <font face=&quot;Verdana, Arial, Helvetica, sans-serif&quot; color=&quot;blue“ size 5> Esempio14
  37. 37. Maria A.R. Consoli Corso HTML BODY GLI ELENCHI <ul><li>Elenchi ordinati </li></ul><ul><li>Elenchi non ordinati </li></ul><ul><li>Elenchi di definizioni </li></ul>Sintassi <elenco>  <elemento>nome del primo elemento  <elemento>nome del secondo elemento ………. …… </elenco>
  38. 38. Maria A.R. Consoli Corso HTML BODY GLI ELENCHI Elenchi ordinati Sintassi <ol>  <li>nome del primo elemento  <li>nome del secondo elemento ………. …… </ol> ol= order list li=list item Esempio <ol>  <li> primo elemento  <li>secondo elemento <li>terzo elemento </ol> Testo fuori lista
  39. 39. Maria A.R. Consoli Corso HTML BODY GLI ELENCHI Elenchi ordinati Sintassi <ol type=“attributo”>  <li>nome del primo elemento  <li>nome del secondo </ol> ol= order list li=list item Attributo:1=numeri arabi; a=alfabeto minuscolo; A=alfabeto maiuscolo; i=romani minuscoli; I=romani maiuscoli Esempio <ol type=“a”>  <li> primo elemento  <li>secondo elemento <li>terzo elemento </ol> Testo fuori lista Esempio15
  40. 40. Maria A.R. Consoli Corso HTML BODY GLI ELENCHI Elenchi non ordinati Sintassi <ul>type=“attributo”>  <li>nome del primo elemento  <li>nome del secondo </ul> ul= unorder list li=list item Attributo:disc=pallino pieno; circle=pallino vuoto; square=quadrato pieno; Esempio <ul type=“circle”>  <li> primo elemento  <li>secondo elemento <li>terzo elemento </ul> Testo fuori lista Esempio16
  41. 41. Maria A.R. Consoli Corso HTML BODY GLI ELENCHI Elenchi di definizioni Sintassi <dl>>  <attr>nome del primo elemento  <attr>nome del secondo </dl> dl= definition list Attributo: dt=senza rientro; dd= con rientro; Esempio <dl>  <dd>nome del primo elemento  <dd>nome del secondo </dl> Esempio17
  42. 42. Maria A.R. Consoli Corso HTML Ipertesti I LINK I link sono &quot;il ponte&quot; che consente di passare da un testo all’altro <ul><li>Sono formati da: </li></ul><ul><li>la risorsa verso cui il collegamento punta </li></ul><ul><li>contenuto che &quot;nasconde“ il collegamento (non importa se si tratta di testo, di immagine o di files) </li></ul>Esempio18 Sintassi: <a href=“risorsa&quot;>contenuto</a> ESEMPIO <a href=“www.cataniaedintorni.it&quot;>notizie su Catania e non solo</a> Nota bene Per motivi di sicurezza non è possibile eseguire un file &quot;.exe&quot; direttamente dal web; l’utente dovrà sempre prima scaricarlo sul proprio PC.
  43. 43. Maria A.R. Consoli Corso HTML Ipertesti I LINK Nota bene E’ opportuno dividere il sito in varie sezioni, in modo da avere tutti i documenti dello stesso tipo all’interno di un contesto omogeneo. Per creare collegamenti verso i documenti più reconditi, destreggiandoci tra le strutture più ramificateesistono due tecniche: indicare un percorso assoluto Viene utilizzato per far riferimento ad un percorso certo(se si è già in possesso di un proprio sito) http://www.itcdefelice.it/corsi/programmatori/materie.html indicare un percorso relativo Viene utilizzato per far riferimento ad un percorso ancora da definire(se non si è già in possesso di un proprio sito) Esempio percorso relativo
  44. 44. Maria A.R. Consoli Corso HTML Ipertesti LE ANCORE Servono per muoversi rapidamente in una pagina che non entra in una schermata. Ad una àncora viene assegnato un nome con: <a name=“ nome ancora &quot;> testo </a> Alla hotword si definisce il link con: <a href =&quot;#nome dell’ancora &quot;> testo </a> Per creare un indice interno alla pagina si procede dunque in due fasi distinte: creazione dell’ancora a cui puntare ( <a name=&quot;mioNome&quot;> ) creazione del collegamento all’ancora appena creata e riferimento attraverso il cancelletto ( <a href=&quot;#mioNome&quot;> ) È bene non confondere le due fasi. o SEGNALIBRI Esempio19
  45. 45. Maria A.R. Consoli Corso HTML Ipertesti UN TITOLO AI LINK Nota bene L’attributo title è molto importante per descrivere l’elemento a cui fa riferimento il link ed è anche utilissimo per migliorare la propria presenza nei motori di ricerca, che ne vanno a leggere il contenuto. Esempio 20 Sintassi: <a title=“commento&quot; href=URL&quot; > testo</a> L’attributo title è molto importante, e serve per descrivere l’elemento a cui fa riferimento il link.
  46. 46. Maria A.R. Consoli Corso HTML HEAD ESEMPIO: <head>    <meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=iso-8859-1&quot;> <title>ISTITUTO TECNICO COMMERCIALE DE FELICE CATANIA</title> <base href=&quot;http://www.itcdefelice.it/miaCartella&quot;> <meta name=&quot;keywords&quot; content=“scuola, istituto, tecnico, superiore, commerciale, de felice, catania&quot;> </head>
  47. 47. Maria A.R. Consoli Corso HTML Ipertesti I LINK <ul><li>Per far riferimento a un file che si trovi all’interno della stessa directory basta linkare il nome del file </li></ul><ul><li><a href=&quot;paginaDaLinkare.html&quot;>pagina</a> </li></ul><ul><li>Per far riferimento a un file contenuto in una cartella di livello inferiore alla posizione corrente, nominare la cartella seguita dallo &quot;slash&quot;, e poi il nome del file. <a href=&quot;prima/interna/interna.html&quot;>pagina interna</a> </li></ul><ul><li>Per tornare su di un livello, è sufficiente utilizzare la notazione </li></ul><ul><li><a href=&quot;../../index.html&quot;>pagina interna</a> </li></ul>
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×