Uploaded on

HTML

HTML

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
877
On Slideshare
0
From Embeds
0
Number of Embeds
2

Actions

Shares
Downloads
21
Comments
0
Likes
1

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. CORSO BASE •Il Browser •Ipertesti •Immagini •LO Standard HTML •Suoni •I TAG •Tabelle •Form •Annidamento e Identizione •I commenti •Case unsensitive •Struttura pagina-DOCTYPE •HEAD •BODY BY, NC, SA Maria A.R. ConsoliAttribuzione - Non commerciale - Condividi allo stesso modo : Commons Deed | Legal Code) Corso HTML
  • 2. LHTML è il linguaggio con cui poteteindicare come i vari elementi vanno dispostiin una pagina Web. Un documento html non è nientaltro infattiche un file di testo con delle indicazioni sulcolore delle scritte, sulla posizione delleimmagini allinterno della pagina, su comefar scorrere il testo, e altre cose di questogenere. Maria A.R. Consoli 2 Corso HTML
  • 3. Il Browser è il programma che usate quando navigate nel Web.scarica i vari files che si trovano su un computer remoto (il server)legge i documenti scritti in htmlvisualizza la pagina Internet Explorer Netscape Navigator Mozilla (open source) Opera Maria A.R. Consoli 3 Corso HTML
  • 4. CACHE: cartella in cui vengono memorizzati i files scaricati dal web .Internet Explorer visualizza così il percorso della cacheStrumenti > Opzioni Internet > Generale > Impostazioni > Visualizzafilerendering della pagina: visualizzazione di un file html da parte delbrowser.Motore di rendering: sezione del browser che si occupa di mostrare sulvideo la pagina.HTML:acronimo di Hypertext Markup Language ("Linguaggio dicontrassegno per gli Ipertesti")W3C: (World Wide Web Consortium (http://www.w3.org/)) organismo chesi occupa di standardizzare la sintassi del linguaggio HTML Maria A.R. Consoli 4 Corso HTML
  • 5. Il W3C ha rilasciato diverse versioni di questo linguaggio (HTML 2.0, HTML 3.2, HTML 4.0); lHTML si è evoluto in XHTML.lHTML verrà utilizzato ancora per diversi anni come linguaggio principedelle pagine web.Alcuni concetti dellXHTML richiedono già una certa comprensione deiproblemi che si acquisisce solo con lesperienza.LHTML è più immediato e consente di incominciare subito a produrredocumenti web;Chi conosce lXHTML non può non conoscere lHTML. La conoscenzadellHTML è infatti il prerequisito essenziale di ogni webmaster.Le differenze tra i due linguaggi non sono così marcate e passare dallunoallaltro non dovrebbe richiedere molta fatica. Maria A.R. Consoli 5 Corso HTML
  • 6. uno o più browser un editor testuale per scrivere il codice HTML CREARE IL FILE MODIFICARE IL FILE1. Aprite in editor testuale, per 1. utilizzate i comandi Visualizza esempio “Blocco note”; > HTML,2. Scrivere il codice di una pagina; 2. cambiate il codice,3. Salvare con l‟estensione "html", 3. salvate, ad esempio miaPagina.html; 4. utilizzate il pulsante "aggiorna"4. Chiudete l‟editor del browser5. Troverete il file con l‟icona del 5. visualizzare le modifiche. browser e si aprirà in automatico cliccandoci su due volte. Maria A.R. Consoli 6 Corso HTML
  • 7. Questo avviene perché lestensione non è .html, ma .html.txtPer visualizzare lestensione del file in sistemi Windows andatein una cartella e quindi:Strumenti > Opzioni cartella > VisualizzazioneE poi togliere la spunta da:"Nascondi le estensioni dei file per i tipi di file conosciuti"infine premere il pulsante:"Come cartella corrente” Maria A.R.Consoli 7 Corso HTML
  • 8. Questo succede perché la pagina visualizzata è sempre quella vecchiamemorizzata nella cache.Ricordatevi di impostare la cache del vostro browser in modo che il filehtml venga ricaricato ogni volta che richiamate la pagina.In Internet Explorer:Strumenti > Opzioni Internet > Generale > Impostazioni >Ricerca versioni più recenti delle pagine memorizzate: allaperturadella pagina Maria A.R.Consoli 8 Corso HTML
  • 9. Hanno il compito di visualizzare le diverse parti di una pagina web.Hanno differenti nomi a seconda della loro funzione.I tag vanno inseriti tra parentesi uncinate (<TAG>)la chiusura del tag viene indicata con una "/" (Quindi: </TAG>). Il contenuto va inserito tra lapertura e la chiusura del tag medesimo,secondo questa forma: <TAG attributi> testo </TAG>la struttura di un attributo è: attributo="valore"Quindi in definita la struttura di un tag sarà: <TAG attributo1="valore1" attributo2="valore2"> testo </TAG> Maria A.R.Consoli 9 Corso HTML
  • 10. Alcuni particolari tag non hanno contenuto - perché ad esempioindicano 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="20" height="20" src="miaImmagine.gif" alt="alt">come si vede il tag non viene chiuso. Questo tipo di tag viene detto"empty", cioè "vuoto". Maria A.R.Consoli 10 Corso HTML
  • 11. Lannidamento ci permette di attribuireformattazioni successive al testo chestiamo inserendo. esempio:esempio: <P align="right"><TAG1 attributi> testo 1contenuto 1 <P align="left"> <TAG2> testo 2 contenuto 2 </P> </TAG2> </P></TAG1>Apertura e chiusura del tag si trovano allostesso livello, mentre il contenuto vienespostato verso destra di un tab:Questa procedura si chiama indentazione,e grazie ad essa il codice HTML risulta piùleggibile Maria A.R. Consoli 11 Corso HTML
  • 12. indicazioni significative per ilwebmaster, ma invisibili albrowser. esempio: <!-- menu di sinistra -->Inserendo i commenti in puntispecifici del documento ci <!-- barra in alto -->permette di mantenerelorientamento anche in file molto <!-- eccetera -->complessi e lunghi. Sintassi<!-- questo è un commento --> Maria A.R. Consoli 12 Corso HTML
  • 13. LHTML è "case unsensitive”Questo significa che è del tutto indifferente se scrivere i tag in maiuscolo o inminuscolo. <P ALIGN="RIGHT"> e <p align="right">vengono letti allo stesso modo dal browser.Per aumentare la leggibilità del codice è buona norma scrivere in maiuscolo ilnome del tag (es: <P>) e in minuscolo gli attributi (es: align="right"). Quindi: <P align="right"> LXHTML è "case sensitive"per abituarsi già al linguaggio che verrà è consigliabile scrivere tutto inminuscolo. Maiuscolo e minuscolo, in ogni caso non costituiscono errore. Maria A.R. Consoli 13 Corso HTML
  • 14. Una apagina HTML è esempio: suddivisa in tre sezioni: SPECIFICHE <html> <!– Inizio codice -->Specifiche <head> <!-- testata --> Inizio codice Qui il nostro contenuto Testata </head> <!– Fine testata--> Fine testata <body> <!-- Corpo --> Corpo Qui il nostro contenuto Fine corpo </body> <!– Fine corpo --> Fine codice </html> <!– Fine codice --> Maria A.R. Consoli 14 Corso HTML
  • 15. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//IT"> specifica il tipo di documento. E‟ la prima riga da inserire.HTML: il tipo di linguaggio utilizzato è lHTMLPUBLIC: il documento è pubblicoW3C: il documento fa riferimento alle specifiche rilasciate dal W3CDTD HTML 4.01 Transitional: il documento fa riferimento a una DTD ("DocumentType Definition" cioè "Definizione del tipo di documento");la versione di HTML supportata è la 4.01 "transitional"IT: la lingua con cui è scritta la DTD è l„italiano (EN: la lingua con cui è scritta laDTD è linglese) Maria A.R. Consoli 15 Corso HTML
  • 16. Contiene informazioni non immediatamente percepibili, ma che riguardano il modo in cui ildocumento deve essere letto e interpretato. Questo è il luogo dove scriverei meta-tag (alcuni sono ad esclusivo beneficio dei motori di ricerca), script JavaScript o VbScript, fogli di stile<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">indica al browser che deve caricare il set di caratteri occidentale (e non - ad esempio - il set dicaratteri giapponese).<title>Nome del sito</title>Il title è il titolo della pagina e compare in alto sulla barra del browser.<base href=“indirizzo url ">Il percorso assoluto a cui fare riferimento per trovare tutti i files a cui si fa riferimento.<meta name="keywords" content=“parole da inserire nei motori di ricerca">indica alcuni contenuti relativi al sito stesso. Le keywords compaiono separate da virgola, dapunto e virgola, oppure senza alcun segno di interpunzione. Esempio Maria A.R. Consoli 16 Corso HTML
  • 17. Qui è racchiuso il contenuto vero e proprio del documentoIl contenuto della pagina verrà formattato a seconda dei tag utilizzati: Sfondo Margini Lingua Colori del testo e dei link Titoli Blocchi di testo Allineamento Andare a capo Stile Font, Colore, dimensione Elenchi Maria A.R. Consoli 17 Corso HTML
  • 18. Imposta lo sfondo con un coloreSintassi: <body bgcolor=“colore">Bgcolor =background color #FFA500Colore= uno dei colori indicati nella #0000FFtabella #FFFFFF NOTA BENE #FFFF00 Il numero di colori che l‟utente ha a #808080 disposizione dipende dalla scheda #A52A2A video. Poiché non c‟è modo di sapere quale scheda video abbia #000000 l‟utente, i webdesigner fanno #FF0000 riferimento alla "palette sicura" dei 256 colori (palette web safe). #008000 #EE82EE Esempio1 Maria A.R. Consoli 18 Corso HTML
  • 19. Imposta lo sfondo con una immagine Sintassi: <body background=“IMMAGINE"> ESEMPIOSe l‟immagine “imgsfondo.gif” si trova nella stessa cartella della nostra pagina <body background="imgSfondo.gif">Se la sua posizione è diversa indicare il percorso assoluto <body background=“www.itcdefelice.it/immages/imgSfondo.gif">Se nella <HEAD> abbiamo dichiarato il tag “base” <body background=“immages/imgSfondo.gif"> NOTA BENE L‟immagine di sfondo verrà ripetuta in orizzontale e in verticale. E‟ possibile abbinare i due tag: <body bgcolor="#0000ff" background="imgSfondo.gif"> Esempio2 Maria A.R. Consoli 19 Corso HTML
  • 20. Imposta i margini Sintassi: <body rightmargin =“n” leftmargin=“n" topmargin=“n“ downmargin=“n”> ESEMPIO<body leftmargin=“2" 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="#0000ff" background="imgSfondo.gif"> Esempio3 Maria A.R. Consoli 20 Corso HTML
  • 21. Imposta la lingua specifica ai motori di ricerca e al browser dell‟utente quale lingua stiamo utilizzando Sintassi: <body lang=“sigla lingua"> ESEMPIO<body lang="it"> NOTA BENE Si tratta di un attributo che vi sarà utile soprattutto se vi capiterà di sviluppare dei siti multilingua Maria A.R. Consoli 21 Corso HTML
  • 22. Impostare il colore del testo per tutta la pagina Sintassi: <body text=“colore"> ESEMPIO<body text="red"> oppure <body text="#ffffff"> NOTA BENE Usate la tabella vista per il colore dello sfondo Esempio4 Maria A.R. Consoli 22 Corso HTML
  • 23. Impostare il colore del link per tutta la pagina Sintassi: <body link=“colore" alink=“colore" vlink=“colore"> link =collegamento a riposo (di default i link sono blu (#0000FF)) alink=collegamento attivo vlink=collegamento visitato(di default i vlink sono (#800080). ESEMPIO<body link="red" alink=“brown" vlink="green"> NOTA BENE Usate la tabella vista per il colore dello sfondo Esempio5 Maria A.R. Consoli 23 Corso HTML
  • 24. Elemento di bloccoSintassi: <hx>titolo </hx>“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 Maria A.R. Consoli 24 Corso HTML
  • 25. Elemento di bloccoSintassi: <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 Maria A.R. Consoli 25 Corso HTML
  • 26. Elemento di blocco Sintassi: <div>testo</div ESEMPIO <div>Blocco di testo</div> NOTA BENEIl blocco di testo va a capo, ma - a differenza del paragrafo – non lascia spazi prima e dopo la sua apertura. Esempio8 Maria A.R. Consoli 26 Corso HTML
  • 27. Elemento di bloccoSintassi: <span>contenitore</span> ESEMPIO <span>ESEMPIO DI SPAN</span> NOTA BENE non va a capo Esempio9 Maria A.R. Consoli 27 Corso HTML
  • 28. Elemento di bloccoSintassi: <p align=“orientamento">testo</p>“Orientamento” =“left” oppure “right” oppure “justify” ESEMPIO <p align="left">testo</p><p align="right">testo</p><p lign="justify">testo</p> NOTA BENE L‟attributo "align" è disapprovato dal W3C Esempio10 Maria A.R. Consoli 28 Corso HTML
  • 29. Sintassi: <br>(a capo) oppure <hr attributi> (a capo con una linea) attributi:noshade sfuma la linea "size" l‟altezza in pixel, "width" larghezza in pixel ESEMPIO <br> <hr noshade size="5" width="50%" > Esempio11 Maria A.R. Consoli 29 Corso HTML
  • 30. STILI FISICI definiscono graficamente lo stile del carattere<b>testo </b> grassetto RENDERING testo<i>testo</i> corsivo testo<u>testo</u> sottolineato testo<strike>testo</strike> tagliato testo<sup>testo </sup> apice testo<sub>testo</sub> pedice Testo Esempio12 Maria A.R. Consoli 30 Corso HTML
  • 31. 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 Maria A.R. Consoli 31 Corso HTML
  • 32. STILI LOGICI forniscono informazioni sul ruolo svolto dal contenuto 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 Esempio13 Maria A.R. Consoli 32 Corso HTML
  • 33. Sintassi: <font face=“tipo di font o famiglia di font">testo</font><font face="Arial">testo in Arial</font> testo in Arial<font face="Verdana">testo in Verdana</font> testo in Verdana NOTA BENE IL TAG <font> è disapprovato dal W3C. Il "font" di default è il "Times".Non è possibile far sì che l‟utente visualizzi un testo in un carattere fantasiososcelto 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 trattadei caratteri presenti in: Pannello di controllo > Tipi di caratteri Maria A.R. Consoli 33 Corso HTML
  • 34. Le famiglie di font Maria A.R. Consoli 34 Corso HTML
  • 35. Sintassi: <font color=“colore">testo </font> ESEMPIO<font color=“blu">testo blu </font> NOTA BENE Usate la tabella vista per il colore dello sfondo.Questo tag viene utilizzato se si intende usare un colore diverso da quellostabilito con il tag <text>.Di solito si utilizza in abbinamento col tag <font> Esempio: <font face="Verdana, Arial, Helvetica, sans-serif" color="blue"> Maria A.R. Consoli 35 Corso HTML
  • 36. Sintassi: <font size=“n">testo di grandezza n</font> n= misura del carattere da 1 a 7 oppure + o – n (relativamente a 3) ESEMPIO<font size="5">testo di grandezza 5</font><font size=“+2">testo di grandezza 5</font> NOTA BENELa dimensione del carattere di default nel browser Internet explorer è 3La dimensione del carattere dipende dalle impostazioni del browser dell‟utente .Di solito si utilizza in abbinamento col tag <font> Es.: <font face="Verdana, Arial, Helvetica, sans-serif" color="blue“ size 5> Esempio14 Maria A.R. Consoli 36 Corso HTML
  • 37. •Elenchi ordinati •Elenchi non ordinati •Elenchi di definizioni Sintassi<elenco><elemento>nome del primo elemento<elemento>nome del secondo elemento ………. ……</elenco> Maria A.R. Consoli 37 Corso HTML
  • 38. Elenchi ordinati Sintassi Esempio<ol> <ol><li>nome del primo elemento <li> primo elemento<li>nome del secondo <li>secondo elementoelemento <li>terzo elemento ………. </ol> …… Testo fuori lista</ol>ol= order listli=list item Maria A.R. Consoli 38 Corso HTML
  • 39. Elenchi ordinati Sintassi Esempio<ol type=“attributo”> <ol type=“a”><li>nome del primo elemento <li> primo elemento<li>nome del secondo <li>secondo elemento</ol> <li>terzo elementool= order list </ol>li=list item Testo fuori listaAttributo:1=numeri arabi;a=alfabeto minuscolo;A=alfabeto maiuscolo; Esempio15i=romani minuscoli;I=romani maiuscoli Maria A.R. Consoli 39 Corso HTML
  • 40. Elenchi non ordinati Sintassi Esempio<ul>type=“attributo”> <ul type=“circle”><li>nome del primo elemento <li> primo elemento<li>nome del secondo <li>secondo elemento</ul> <li>terzo elementoul= unorder list </ul>li=list item Testo fuori listaAttributo:disc=pallino pieno;circle=pallino vuoto;square=quadrato pieno; Esempio16 Maria A.R. Consoli 40 Corso HTML
  • 41. Elenchi di definizioni Sintassi Esempio<dl>> <dl><attr>nome del primo elemento <dd>nome del primo elemento<attr>nome del secondo <dd>nome del secondo </dl></dl>dl= definition listAttributo: dt=senza rientro;dd= con rientro; Esempio17 Maria A.R. Consoli 41 Corso HTML
  • 42. I link sono "il ponte" che consente di passare da un testo all‟altro Sono formati da: •la risorsa verso cui il collegamento punta •contenuto che "nasconde“ il collegamento (non importa se si tratta di testo, di immagine o di files) Sintassi: <a href=“risorsa">contenuto</a> ESEMPIO <a href=“www.cataniaedintorni.it">notizie su Catania e non solo</a> Nota benePer motivi di sicurezza non è possibile eseguire un file ".exe" direttamente dalweb; l‟utente dovrà sempre prima scaricarlo sul proprio PC. Esempio18 Maria A.R. Consoli 42 Corso HTML
  • 43. Nota beneE‟ opportuno dividere il sito in varie sezioni, in modo da avere tutti i documentidello stesso tipo all‟interno di un contesto omogeneo.Per creare collegamenti verso i documenti più reconditi, destreggiandoci tra lestrutture più ramificateesistono due tecniche:indicare un percorso assolutoViene utilizzato per far riferimento ad un percorso certo(se si è già in possessodi un proprio sito) http://www.itcdefelice.it/corsi/programmatori/materie.htmlindicare un percorso relativoViene utilizzato per far riferimento ad un percorso ancora da definire(se non si ègià in possesso di un proprio sito) Esempio percorso relativo Maria A.R. Consoli 43 Corso HTML
  • 44. o SEGNALIBRIServono per muoversi rapidamente in una pagina che non entra in unaschermata.Ad una àncora viene assegnato un nome con:<a name=“nome ancora"> testo </a>Alla hotword si definisce il link con:<a href="#nome dell’ancora"> testo </a>Per creare un indice interno alla pagina si procede dunque in due fasi distinte:creazione dell‟ancora a cui puntare (<a name="mioNome">)creazione del collegamento all‟ancora appena creata e riferimentoattraverso il cancelletto (<a href="#mioNome">)È bene non confondere le due fasi. Esempio19 Maria A.R. Consoli 44 Corso HTML
  • 45. L‟attributo title è molto importante, e serve per descrivere l‟elemento a cui fa riferimento il link.Sintassi: <a title=“commento" href=URL" > testo</a> Nota beneL‟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 Maria A.R. Consoli 45 Corso HTML
  • 46. ESEMPIO:<head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <title>ISTITUTO TECNICO COMMERCIALE DE FELICE CATANIA</title> <base href="http://www.itcdefelice.it/miaCartella"> <meta name="keywords" content=“scuola, istituto, tecnico, superiore, commerciale, de felice, catania"></head> Maria A.R. Consoli 46 Corso HTML
  • 47. •Per far riferimento a un file che si trovi all‟interno della stessadirectory basta linkare il nome del file <a href="paginaDaLinkare.html">pagina</a>•Per far riferimento a un file contenuto in una cartella di livelloinferiore alla posizione corrente, nominare la cartella seguitadallo "slash", e poi il nome del file.<a href="prima/interna/interna.html">pagina interna</a>•Per tornare su di un livello, è sufficiente utilizzare lanotazione <a href="../../index.html">pagina interna</a> Maria A.R. Consoli 47 Corso HTML