Introduzione ad HTML/CSS. Linguaggi di Mark-Up: XML Anno Accademico 2003/2004

Dimensione: px
Iniziare la visualizzazioe della pagina:

Download "Introduzione ad HTML/CSS. Linguaggi di Mark-Up: XML Anno Accademico 2003/2004"

Transcript

1 Introduzione ad HTML/CSS Linguaggi di Mark-Up: XML Anno Accademico 2003/2004

2 Cosa è il web? Il Web è una rete di risorse di informazioni. È composto da 3 elementi fondamentali: 1. Un uniform naming scheme per localizzare le risorse nel Web (e.g., URIs). 2. Protocolli, per accedere alle risorse per nome del Web (e.g., HTTP). 3. Ipertesti per la navigazione sul web (e.g., HTML).

3 URI (Uniform Resource Identifier) Ogni risorsa disponibile su web (documenti HTML,immagini,video,mp3,...) ha un indirizzo che può essere codificato da un URI. Un URI consiste tipicamente da tre parti: Meccanismo usato per accedere alla risorsa (Naming Scheme); Nome della macchina su cui risiede la risorsa (Machine Hosting); La Risorsa: Il path della risorsa sulla macchina che ospita; Esempio Indirizzo WEB della mia home page: Che si traduce in: C'è un documento disponibile tramite il protocollo HTTP; Questo documento risiede sul server accessibile tramite il path: /~snicotra/index.html (index.html viene attaccato di default) Altri esempi di naming scheme sono: Indirizzi di posta elettronica: Siti ftp (File Transfer Protocol):_ ftp://ftp.unina.it

4 Sezioni e URI relativi All'interno di un documento HTML possono essere specificate delle ancore che risultanto accessibili aggiungendo all'uri il simbolo # seguito dal nome. Es: Gli URI relativi sono privi di naming scheme e di machine hosting In altre parole contengono solo il path della risorsa. (Es. file.html, img/background.gif

5 A che servono gli URI? Creare Link ad un altro documento o risorsa, Creare Link a fogli di stile o script esterni Inserire un immagine, oggetto, o un applet nella pagine, Creare un immagine cliccabile (MAP) Spedire una form. Creare dei Frames Citare riferimenti esterni Riferirsi a convenzioni sui metadata che descrivono dei documenti.

6 Cosa è HTML? HTML è una lingua franca per pubblicare ipertesti sul World Wide Web. E' un formato non proprietario basato su SGML. I documenti HTML possono essere creati da semplici editor di testo (persino Blocco Note ), da più meno potenti tool WYSISYG, o generati dinamicamente da linguaggi di scripting sever side (PHP, ASP, Perl)

7 Che cos è l HTML (2) Linguaggio universalmente conosciuto (potenzialmente una sorta di lingua madre di pubblicazione) che tutti i computer possono interpretare. Tramite l HTML l autore può: Pubblicare documenti online con headings (titoli), testo, tabelle, liste, foto, etc. Recuperare informazioni online attraverso links inpertestuali cliccando Costruire forms per condurre transazione con servizi remoti, per fare ricerche, prenotare alberghi, fare acquisti ecc. Insierire fogli di calcolo, video, suoni, e molte altre applicazioni.

8 Chi decide cosa? L HTML è un linguaggio che viene interpretato dal browser. Differenti Browser = Differenti HTML? Nasce il Consorzio w3c (www.w3c.org) (1994) allo scopo di creare standard che tutti i produttori devono (o dovrebbero) rispettare. Il consorzio fornisce le specifiche Recommendation.

9 HTML History 1990 Nascita HTML HTML HTML HTML XHTML XHTML Module-based XHTML 2001

10 Noi tratteremo HTML 4.01 Specification W3C Recommendation 24 December con attenzione a XHTML 1.0 The Extensible HyperText Markup Language (Second Edition) e a Web Accessibility Initiative (WAI) E un occhio lontano al concetto di usabilità

11 Struttura di un documento HTML Un documento HTML è fatto da tre parti 1. Una linea che contiene la versione di HTML 2. Una sezione contenente l'intestazione. (HEAD) 3. Il corpo, che contiene il contenuto del documento.

12 Il mio primo HTML <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/tr/html4/strict.dtd"> <html> <head> <meta http-equiv="content-type" content="text/html; charset=iso "> <title>il mio primo HTML</title> </head> <body> <p> Hello, World! </p> </body> </html> Esempi\ilmioprimohtml.html

13 La dichiarazione <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/tr/html4/strict.dtd"> Ci dice quale versione di HTML stiamo utilizzando. In particolare quale DTD (Document Type Definition) tra quelle disponibili in HTML 4.01 utilizziamo: The HTML 4.01 Strict DTD (strict.dtd) : comprende tutti gli elementi e gli attributi che non sono deprecated e che non appaiono nei documenti frameset. The HTML 4.01 Transitional DTD (loose.dtd): Strict + elementi deprecated <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/tr/html4/loose.dtd"> The HTML 4.01 Frameset DTD (frameset.dtd) Transitional + Frames <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/tr/html4/frameset.dtd">

14 Analisi <html> <head> <meta http-equiv="content-type content="text/html; charset=iso "> <title>il mio primo HTML</title> </head> <body> <p> Hello, World! </p> </body> </html> TAG di apertura Radice del documento HTML Intestazione del documento Dichiarazione necessaria Al browser per identificare Il tipo di documento E il set di caratteri Corpo del documento TAG di chiusura

15 Struttura dei comandi HTML Un generico TAG HTML (elemento) è del tipo: <nometag attr1= val1 attr2= val2 > Parte interna (può contenere altri tag) </nometag> Esempio: <html> blablabla </html>

16 Buone abitudini (in vista di XTML) In XHTML vanno scritti solo in minuscolo. In XHTML tutti i TAG devono essere chiusi I valori degli attributi vanno sempre tra

17 Gli attributi e i tag deprecated Nelle varie versioni di HTML, spesso si sono mantenuti obsoleti o sbagliati alcuni tag e alcuni attributi per retro-compatibilità. Tali elementi vengono detti deprecated. Le versioni Transitional di HTML li ammettono e, in ogni caso, vanno conosciuti. Molti di questi elementi hanno a che fare con la rappresentazione visiva degli elementi

18 Il Tag HTML TAG: <html> Attributi: Lang: (it,en) Dir: Direzione del testo (LTR RTL) NOTA: Lang e Dir sono attributi di internazionalizzazione (i18n) che quasi tutti gli elementi supportano.

19 L intestazione <head> </head> Racchiude informazioni sul documento. <title> </title> Titolo (Obbligatorio) Indica il titolo del documento (si vede nella barra del titolo) <meta> (non si chiude) Attributi: Name: Nome Content: CDATA http-equiv: Nome Esempi: <meta http-equiv="content-type content="text/html; charset=iso > <meta name= author content= Salvo Nicotra > <meta name="keywords" content= html,css,dmi"> Anche i tag <script> <style> <link> vanno in questa sezione

20 L elemento BODY <body> Attributi: background = uri Sfondo Pagina (deprecated) text = color Colore del testo (deprecated) link, vlink, alink = color Colori dei link da visitare, visitati, rollover Altri attributi comuni: id, class: identificatori lang, dir: informazioni i18n style: informazioni di stile bgcolor=colore colore di sfondo Attributi sugli eventi: onload,onunload, onclick

21 Due parole sugli identificatori Gli attributi id, class vengono rispettivamente per assegnare un nome unico ad un elemento e per assegnare l elemento ad una o più classi. Ad esempio id viene usato come selettore di stile, come target anchor per i link, per i linguaggi di script, ecc. Class viene usato sostanzialmente per i fogli di stile

22 Elementi inline o block level Gli elementi HTML si distinguono in inline o block level. I block level contengono altri block level o inline, gli inline solo dati o altri inline. (ad esempio <p> è inline)

23 Raggruppare gli elementi: div e span <div> contenitore per elementi block level <span> contenitore per elementi in line Aggiungono struttura al documento (divisione in sezioni) Attributi: id, class, lang, dir, style, eventi align = left center right justify (Deprecated) Allineamento orizzontale dell elemento rispetto al contesto Esempio: <div align="center"> Sezione allineata al centro </div>

24 Titoli (Headings) <h1> <h2> <h3> <h4> <h5> <h6> Sei livelli di titoli (livello di importanza: da 1 a 6). Attributi: id, class, i18n, style, align, eventi Di solito l user agent (il browser) li visualizza usando particolari font e portando a capo il testo successivo. Non servono a fare il testo + grande, ma ad indicare del testo che è considerato + importante nel documento.

25 Address <address> </address> E un elemento inline. Attributi: id, class, i18n, style, eventi (li chiameremo soliti ) Il tag ADDRESS normalmente si usa all inizio o alla fine del corpo del documento HTML per indicare i riferimenti dell autore e/o curatore della pagina. Il browser può visualizzarlo in corsivo. Esempio: <address> Questo documento è stato scritto da </address>

26 Tag di testo I seguenti TAG sono tag inline che indicano particolari proprietà del testo. Normalmente il browser li rappresenta in modo particolare, il che non significa che devono essere usati per ottenere effetti visivi!!! Gli attributi per tutti questi tab sono i soliti EM: Indicates emphasis. STRONG: Indicates stronger emphasis. CITE: Contains a citation or a reference to other sources. DFN: Indicates that this is the defining instance of the enclosed term. CODE: Designates a fragment of computer code. SAMP: Designates sample output from programs, scripts, etc. KBD: Indicates text to be entered by the user. VAR: Indicates an instance of a variable or program argument. ABBR: Indicates an abbreviated form (e.g., WWW, HTTP, URI, Mass., etc.). ACRONYM: Indicates an acronym (e.g., WAC, radar, etc.).

27 blockquote e q Tag per le citazioni. <blockquote> Block-level <q> inline Ammettono l attributo cite=uri per indicare l origine della citazione (oltre i soliti ) q si usa per citazioni in mezzo al testo blocklevel per una citazione lunga Non servono a identare il testo, sebbene sia la normale rappresentazione del visual agent

28 Apice e Pedice <sub> e <sup> Scrivere l equazione della parabola y=ax 2 +bx+c diventa y=ax<sup>2</sup>+bx+c Descrivere un elemento di una matrice: M i,j M<sub>i,j</sub> Nomi stranieri: <span lang="fr">m<sup>lle</sup> Dupont</span>

29 Linee e paragrafi Il tag <p> definisce un paragrafo (è inline) Attributi: I soliti + align (deprecated) Per andare a capo forzatamente si usa il tag <br> (sta per break) che non si chiude.

30 Il Tag PRE (Preformatted) <pre> Inserisce del testo preformattato, cioè del testo che viene stampato dal browser così come lo abbiamo scritto. È un tag inline.

31 Sui colori I colori vanno in esadecimale ma alcuni sono stati standardizzati con nomi significativi Black = "#000000" Green = "#008000" Silver = "#C0C0C0" Lime = "#00FF00" Gray = "#808080" Olive = "#808000" White = "#FFFFFF" Yellow = "#FFFF00" Maroon = "#800000" Navy = "#000080" Red = "#FF0000" Blue = "#0000FF" Purple = "#800080" Teal = "#008080" Fuchsia = "#FF00FF" Aqua = "#00FFFF

32 Il tag FONT (Very deprecated) Specifica alcune caratteristiche del font usato. Attributi: Size (intero da 1...7) Color (o #xxyyzz o per nome (black )) Face (lista tipo font da utilizzare (helvetica,verdana..)

33 Stili di Font TT: Renders as teletype or monospaced text. I: Renders as italic text style. B: Renders as bold text style. BIG: Renders text in a "large" font. SMALL: Renders text in a "small" font. STRIKE e S: Render strike-through style text. (deprecated) U: Renders underlined text (deprecated) I tag fisici (inline) riguardano i font, sebbene non siano tutti deprecated, è sconsigliabile il loro uso in favore degli stili.

34 Elenchi L HTML permette di rappresentare dati sotto forma di elenco. Tre categorie: Liste non ordinate Liste ordinate Definizioni

35 Elenchi non ordinati L elenco non ordinato viene introdotto dal TAG <UL> (Unordered List) che va chiuso All interno del TAG ogni elemento va specificato con il TAG <LI> (List Element) Struttura: <ul> <li> Primo elemento </li> <li> i-esimo elemento </li> </UL>

36 Elenchi ordinati L elenco ordinato viene introdotto dal TAG <ol> (Ordered List) che va chiuso All interno del TAG ogni elemento va specificato con il TAG <li> (List Element) Struttura: <ol> <li> Primo elemento </li> <li> i-esimo elemento </li> </ol>

37 Alcuni attributi start= elemento_di_partenza ; da applicare a <ol> (deprecated) type= tipo_elenco ; da applicare ad entrambi (deprecated) Per ol i valori sono: 1, A, a, I, i Per ul, i valori sono: circle, square, dis

38 Elenchi di definizioni Generalmente sono coppie di termini/definizioni. Ad esempio quando si pubblicizza un prodotto si potrebbero indicare: Basso Costo La nuova versione di questo prodotto costa molto meno della precedente; Facile da usare Abbiamo migliorato l usabilità del prodotto Sicuro per i bambini Lo si può lasciare in una stanza con bimbi da soli: non si feriranno (non lo garantiamo)

39 I Tag <dl> Definition List: Apre l elenco, va chiuso alla fine. <dt>: Definition Term: Definisce il termine <dd>: Definition Description: Definisce la descrizione del termine.

40 Le liste si possono annidare <ul> <li> Sotto mettiamo una lista </li> <li> <ul> <li>bla</li> </ul> </li> </ul>

41 Link Collegamenti Ipertestuali Un link è un collegamento tra una risorsa web ed un altra. Costrutto di base per gli ipertesti. Causa di successo del web Un link ha due estremi, detti anchor Source anchor: inizio del link Destination: Risorsa puntata, qualsiasi risorsa web (documenti HTML, video, suoni, immagini, ecc)

42 Visitare una risorsa linkata Il comportamento di base di un link, di solito attivato dal click del mouse è: Viene prelevata la risorsa Il visual agent (browser) carica la risorsa visualizzandola o nella stessa pagina o in una nuova finestra (o in un frame) o aprendo un programma che gestisce il tipo di file relativo. Un link può puntare ad una parte della stessa pagina.

43 Il Tag <a> Il tag <a> Anchor, permette la creazione di link all interno di pagine HTML Va chiuso obbligatoriamente Di solito l elemento (la parte compresa tra l inizio e la fine di un tag) viene sottolineato e quando ci si passa sopra il cursore del mouse cambia forma

44 Il Tag <a> (2) Sintassi <a> Attributi: href= URI, indica la risorsa destinazione, può essere relativo (e.g. nello stesso computer) o assoluto (specificando tutte le parti dell URI). In altre parole specifica l anchor destinazione. name= Nome, da un nome al punto di ancoraggio in modo che possa essere destinazione di 0 o più link.

45 E tempo di esempi Un link alla pagina dell università <a href= >Se clicchi qui vai al sito dell università di Catania </A> Un link a google (importantissimo) <a href= > <strong> Il motore di Ricerca</strong> </a>

46 Links nella stessa pagina. <h1> Sommario</h1> <a href= #sezione1> > Sezione 1 </A> altre sezioni <a name= sezione1 > Sezione </A> Scrivere la sezione 1 <a name= sezione2 > Sezione 2</A>

47 Alcune note I link non si possono annidare. È illegale mettere un link dentro un altro link, oltre che inutile I nomi del link devono essere UNIVOCI Esempio sbagliato <a name= uno > </a> <a name= uno > </a>

48 Alcune note (bis) Il riferimento ai fragment identifiers, cioè ai nomi dei link, devono essere scritti esattamente come sono stati scritti. Il sistema dei nomi è case-sensitive, cioè distingue in modo diverso maiuscole e minuscole (esempio: Sezione è diverso da sezione )

49 Alcune note (tris) Gli anchor destination possono essere fissati su qualunque elemento utilizzando l attributo id. Valgono le stesse regole di prima Esempio <h1 id= sezione1 > </h1> Per riferirsi a <A href= #sezione1 > </A> L attributo id serve anche ad altre cose, che vedremo in seguito.

50 Id or Name? Visto che posso usare due tipi di anchor destination, quale scelgo? Alcune issues L attributo id si usa anche per altre cose (fogli di stile, javascript ) Alcuni vecchi browser non supportano l anchor destination con id L attributo name permette di usare più nomi

51 Un ultima cosa L attributo target= _blank, permette di aprire una nuova pagina quando si apre il link.

52 Non solo parole! Aggiungiamo le immagini alle nostre pagine WEB. Un immagine è un rettangolo colorato in cui ogni pixel (picture s element) è caratterizzato da un colore. Un immagine è una risorsa web che deve essere disponibile e localizzata da un URI! Le immagini sono collegate alla pagine HTML, il browser le carica e le visualizza nel punto in cui sono collegate.

53 E per il WEB? Non tutti i formati di immagini sono supportati dai browser. Consideriamo il sottoinsieme proprio dei formati supportati dai browser GIF (per immagini a pochi colori) JPEG (per fotografie) PNG (in evoluzione alternativa open source a GIF) Molti software per l elaborazione delle immagini supportano un ottimizzazione per comprimere le immagini per il WEB.

54 Il TAG per le immagini <img> NON VA CHIUSO Attributi: src= URI : obbligatorio: indica la locazione dell immagine. alt= Testo descrittivo : fornisce una descrizione testuale per i browser non visuali width e height, larghezza e altezza dell immagine impostate manualmente, supportano l uso di percentuali. (non obbligatori ma consigliati)

55 Alcuni altri attributi di IMG hspace= pixels, vspace= pixels (deprecated) Quantità di spazio da mettere a sinistra e a destra dell immagine border= pixels (deprecated) Dimensione del bordo dell immagine align= bottom middle top left right (deprecated) Posizione dell immagine rispetto al contesto

56 Tabelle Le tabelle costituiscono un modo per organizzare dati in righe e colonne; Le celle delle tabelle possono contenere: Testo Immagini Link Moduli Altre tabelle Le tabelle permettono anche di strutturare le pagine, di raggruppare celle, contenere titoli e didascalie;

57 Il TAG fondamentale <table> </table> Alcuni attributi: Width (in punti o percentuale, width= 100% allarga la tabella in tutto lo spazio del browser ) Align (left, center, right): allineamento rispetto alla pagina della tabella; (deprecated) Summary: testo, riassunto della tabella, per browser non visuali.

58 Didascalia della Tabella <caption> </caption> Indica una didascalia della tabella Se si vuole inserire, va messo subito dopo <table> Attributi: Align (top,bottom, left, right) (deprecated)

59 I tre gruppi fondamentali Ogni tabella è costituita da tre parti fondamentali: <thead>: intestazioni <tfoot>: finale <tbody>: corpo

60 Tabelle I tag <thead>, <tbody> e <tfoot> non sono obbligatori, possono essere omessi. <tbody> ci deve essere sempre tranne quando la tabella è fatta da una sola riga e non ci sono <thead> e <tfoot> I tag <thead> e <tfoot> ci devono essere solo quando la tabella ha rispettivamente intestazioni in alto o in basso. Possono esistere più blocchi <tbody>

61 Inserire una nuova Riga <tr> Table Row Crea una riga della tabella Attributi: bgcolor (colore di sfondo della riga) align (left,center,right,justify) valign (top,middle,bottom)

62 Inserire una colonna <td> Table Data Inserisce un elemento di colonna Attributi Width=percentuale o numeropixels; (deprecated) Height=percentuale o numeropixels; (deprecated) Rowspan=di quante righe mi prendo lo spazio? Colspan=di quante colonne mi prendo lo spazio? Bgcolor Align, valign

63 Esempio <table> <caption align="bottom">didascalia</caption> <tr> <td> Uno </td> <td> Due </td> <td> Tre </td> </tr> <tr> <td> Quattro </td> <td> Cinque </td> <td> Sei </td> </tr> <tr> <td> Sette </td> <td> Otto </td> <td> Nove </td> </tr> </table>

64 Formattazione della tabella da parte del browser Esistono alcune attributi della tabella che riguardano la visualizzazione della tabella. Stile del bordo Allineamento orizzontale e verticale del contenuto delle celle Margini delle celle

65 Bordi Frame (quale lato del rettangolo attorno l elemento deve essere visibile) Void (nessuno) Above Below Hsides Vsides Lhs Rhs Box Border

66 Rules Indica quale linee mettere tra le celle dentro la tabella rules= None Rows Cols all

67 Grandezza del bordo Grandezza del bordo Border = pixels Alcune regole Border= 0 implica frame= void

68 Allineamenti E possibile allineare il contenuto delle celle in modo autonomo. align= left center right justify valign = top middle bottom baseline

69 Ereditarietà delle specifiche di allineamento L allineamento orizzontale di una cella può essere specificato: Nell elemento stesso (ad esempio con <p> o <span>) Nella definizione dell elemento stesso <td> Nella riga di appartenza <tr> Nella tabella stessa

70 Ereditarietà delle specifiche di allineamento L allineamento verticale di una cella può essere specificato: Nell elemento stesso (ad esempio con <p>) Nella definizione dell elemento stesso <td> Nella riga di appartenza <tr> Nella tabella stessa

71 Margini Cellspacing = length (indica il numero di pixel da lasciare tra le celle e le celle con il bordo della tabella Cellpadding = lenght (indica il numero di pixel da lasciare tra la cella e il suo bordo).

72 Tabelle: In short <TABLE width border summary frames rules cellspacing cellpadding bgcolor background > <CAPTION align> </CAPTION> (opzionale) <thead> <tfoot> <tbody> <TR bgcolor align valign> <td o th bgcolor rowspan colspan width height align>... </table>

73

74 Anche l occhio vuole la sua parte Se le pagine web, in origine, sono nate dalla necessità di scrivere documenti in una lingua nota a tutti (e quindi sottolineando l aspetto semantico), Oggi le pagine web sono oggetto di consumo di milioni di persone e di conseguenza l aspetto spartano (ma chiaro) della pagine ha lasciato spazio all uso della grafica a scopo prevalentemente estetico.

75 Soluzioni prive di stile Il TAG Font e vari attributi (bgcolor ) L uso di tabelle e frames per il layout L uso di immagini-link Le mappe cliccabili Uso di TAG proprietari (Marquee su tutti Usare programmi (Applet Java, Flash, Shockwave, plugin vari) Dynamic HTML

76 Parole Nuove Accessibilità di un sito web Usabilità di un sito web Web-Designer

77 Idea Usare l HTML per descrivere il contenuto della pagine e definire un nuovo linguaggio (CSS) per controllare il layout globale della pagina. Separare dunque l aspetto grafico da quello informativo allo scopo di migliorare la navigazione, l usabilità e l aspetto estetico delle pagine.

78 I Fogli di Stile (CSS) CSS sta Cascading Style Sheets Gli stili definiscono come mostrare gli elementi HTML. Gli Stili sono normalmente immagazzinati in Style Sheets (Fogli di stile) Gli Stili sono stati aggiunti all HTML per risolvere un problema. I Fogli di stile esterni (.css) permettono di creare uno stile per una serie di pagine, e di risparmiare tempo. Le definizioni di stile multipli seguono precise regole di gerarchie (Cascading).

79 Gli stili: Risolvere un problema I Tag HTML sono stati creati per definire il contenuto di un documento. I TAG devono dire: questo è un paragrafo, questa è una tabella, questo è un titolo, ecc. Il Layout del documento era relegato al browser. Visto che IE e Netscape cominciavano ad aggiungere HTML tags e attributi (come FONT o l attributo bgcolor) alla specifica originale dell HTML, diventava sempre più difficile creare pagine Web che separassero chiaramente il contenuto dal layout. Per risolvere il problema, il World Wide Web Consortium (W3C) ha creato gli STILI aggiungendoli alla specifica HTML 4.0. Sia Netscape 4.0 (e superiori) che Internet Explorer 4.0 (e superiori) supportanno Cascading Style Sheets.

80 Fogli di stile:risparmio di tempo Gli stili in HTML 4 definiscono come gli elementi HTML devono essere visualizzati, similmente a come fa il tag FONT. I fogli di stile sono normalmente memorizzati al di fuori dei documenti HTML e usati da tutti i documenti. Se volessi cambiare l apparenza e il layout di tutto il sito, basta cambiare il foglio di stile senza modificare l HTML. CSS fa risparmiare tempo!

81 Multiple Styles Will Cascade Into One I fogli di stile permettono di specificare informazioni di stile in molti modi: Gli stili possono essere specificati: Dentro un elemento HTML (con l attributo style) Dentro un documento HTML (nella sezione HEAD) Esternamente in un file CSS e richiamati dentro un documento HTML

82 Cascading Order Quale stile viene usato quando vengono definiti più stili per lo stesso elemento? In generale, tutti gli stili cascade dentri un unico foglio di stile virtuale dove vengono rispettate le seguenti priorità (dal meno importante al più importante) Browser default External Style Sheet Internal Style Sheet (in <head> ) Inline Style (nell elemento HTML)

83 Sintassi CSS La sintassi di CSS è composta da tre parti: Un selettore (tipicamente il tag HTML da formattare) Una proprietà (un attributo da cambiare) Un Valore (valore ammissibile per la proprietà) selector {property: value} La proprietà e il valore sono divise da i due punti e dentro le parentesi graffe. body {color: black} Se il valore è un parola con spazi va messo tra virgolette. p {font-family: "sans serif"}

84 Specificare più proprietà Si possono specificare più proprietà comuni allo stesso selector (ad esempio colore del testo e allineamento per il tag P) separandole con il ; p {text-align:center;color:red} Allo scopo di migliorare la lettura dello stile si preferisce scriverlo nella forma: p { text-align: center; color: black; font-family: arial; }

85 Grouping I selettori possono essere raggruppati. L elemento di separazione è la virgola. Esempio: Tutti gli headings (titoli) scritti in verde. h1,h2,h3,h4,h5,h6 { color: green }

86 Esempio <style type="text/css"> h1 {color: red; text-align: center; font-size:24px} p {color: rgb(12,154,130); text-align: justify; font-size:12px} table {background:blue} td {color: yellow; text-align: center; font-size:14px; fontfamily:arial} </style>

87 The class Selector E possibile specificare uno stile specifico per un elemento in modo da caratterizzarlo ulteriormente. Ad esempio potrei volere un tipo paragrafo con allineamento a destra e corsivo e un altro tipo paragrafo centrato e grassetto. Con i fogli di stile è possibile definire un sotto tipo e richiamarlo con l attributo class. p.right {text-align: right; font-style: italic} p.center {text-align: center; font-weight:bold} Per richiamare i due tipi di paragrafo <p class="right"> Paragrafo a destra e corsivo </p> <p class="center"> Paragrafo centrato e grassetto </p> SEE

88 Definizioni Generali Il selettore può anche essere del tipo.nomeclasse il che vuol dire che tutti gli elementi HTML (specificando la classe) saranno formattati allo stesso modo.center {text-align: center} Significa tutti gli elementi con class= center saranno allineati al centro. <h1 class="center"> Titolo Centrato </h1> <p class="center"> Paragrafo centrato </p> See

89 CSS Comments Possono essere inseriti commenti nei fogli di stile mettendoli tra /* e */ Esempio /* questo è un commento */ p { text-align: center; /* Altro commento */ color: black; font-family: arial }

90 Scrivere CSS: Esterni Un foglio di stile esterno è ideale per siti che hanno più pagine su cui mantenere lo stesso stile. Con un foglio di stile esterno, è possibile cambiare il look di un sito, semplicemente cambiando un file. I fogli di stile vengono richiamati dentro le pagine HTML con il TAG <LINK> Il Tag <LINK> va messo nella sezione <HEAD> e ha questa forma <head> <link rel="stylesheet" type="text/css" href= miofile.css" /> </head> Il browser leggerà il foglio di stile e si preoccuperà di formattare la pagina come descritto nel file css. I file css possono essere scritti in quasiasi editor di testo (tipo Blocco Note) Il file CSS non deve contenere TAG HTML ma solo definizioni di stile. L estensione del file deve essere.css

91 Scrivere CSS: Interni I CSS interni vanno definiti se un documento HTML deve avere uno specifico stile. La struttura del CSS interno è racchiusa nell elemento <style> da inserire nel HEAD del documento. <head> <style type="text/css"> hr {color: sienna} p {margin-left: 20px} body {background-image: url("images/back40.gif")} </style> </head>

92 Scrivere CSS: Inline Gli stili possono essere specificati anche nell elemento stesso tramite l attributo style. Questo metodo va usato quando si vuole specificare uno stile da applicare ad un singolo elemento. Lo stile inline ha la stessa struttura di uno stile qualsiasi. Nell esempio sotto, vediamo come cambiare il colore e il margine sinistro di un paragrafo. <p style="color: sienna; margin-left: 20px"> Questo è un paragrafo </p>

Costruzione di un sito web - HTML

Costruzione di un sito web - HTML Costruzione di un sito web - HTML Obiettivi. Presentare le caratteristiche di un sito Web ed i concetti base per la sua costruzione: fasi di realizzazione e linguaggio HTML. Illustrare gli elementi fondamentali

Dettagli

Il linguaggio HTML Laboratorio Matematico Informatico 2 Matematica specialistica Pierluigi Amodio

Il linguaggio HTML Laboratorio Matematico Informatico 2 Matematica specialistica Pierluigi Amodio Il linguaggio HTML Laboratorio Matematico Informatico 2 Matematica specialistica Pierluigi Amodio Dipartimento di Matematica Università di Bari Il linguaggio HTML p. 1/3 HTML L HTML è il linguaggio (di

Dettagli

Linguaggio HTML (2) Attributi di Per variare lo stile di carattere rispetto al default, si possono utilizzare tre attributi:

Linguaggio HTML (2) Attributi di <FONT> Per variare lo stile di carattere rispetto al default, si possono utilizzare tre attributi: Linguaggio HTML (2) Attributi di Per variare lo stile di carattere rispetto al default, si possono utilizzare tre attributi: SIZE= numero per modificare le dimensioni Es:

Dettagli

Informatica di Base. Programma Lezioni

Informatica di Base. Programma Lezioni Informatica di Base Lezione III Il linguaggio HTML Hyper Text Markup Language 1 Informatica di Base Programma Lezioni 1 26 ottobre Introduzione Sistema binario e formato dei dati 2 2 novembre Numeri negativi

Dettagli

Esercitazioni di HTML

Esercitazioni di HTML Esercitazioni di HTML a cura di Maria Finazzi (23 novembre-1 dicembre 2006) e-mail: maria.finazzi@unipv.it pagine web: Dietro una pagina web Alcuni esempi:

Dettagli

Tutorial di HTML basato su HTML 4.0 e CSS 2

Tutorial di HTML basato su HTML 4.0 e CSS 2 Claudia Picardi Tutorial di HTML basato su HTML 4.0 e CSS 2 Informatica II per Scienze e Turismo Alpino Docenti: Viviana Patti e Claudia Picardi 4 Tabelle 4.1 La struttura di una tabella Elementi principali

Dettagli

Il linguaggio HTML - Parte 2

Il linguaggio HTML - Parte 2 Corso IFTS Informatica, Modulo 3 Progettazione pagine web statiche (50 ore) Il linguaggio HTML - Parte 2 Dott. Chiara Braghin braghin@dti.unimi.it Elenchi all interno di Un elenco è una sequenza

Dettagli

Comandi principali del linguaggio HTML (Hyper Text Markup Language)

Comandi principali del linguaggio HTML (Hyper Text Markup Language) Comandi principali del linguaggio HTML (Hyper Text Markup Language) Caratteristiche di HTML HTML è un linguaggio di formattazione (markup) di documenti ed è il linguaggio base per produrre documenti per

Dettagli

Primi passi con HTML. Il documento HTML

Primi passi con HTML. Il documento HTML Primi passi con HTML. Il documento HTML La mia prima pagina in HTML Questo è il corpo del documento che stiamo realizzando. Questa non è una nuova riga.

Dettagli

I PRINCIPALI TAG DEL LINGUAGGIO HTML

I PRINCIPALI TAG DEL LINGUAGGIO HTML Struttura generica di una pagina Web: I PRINCIPALI TAG DEL LINGUAGGIO HTML Titolo

Dettagli

Cimini Simonelli - Testa

Cimini Simonelli - Testa WWW.ICTIME.ORG HTML Manuale introduttivo al linguaggio HTML Cimini Simonelli - Testa v.2-11/01/2008 Sommario Introduzione... 3 Formattazione della pagina... 4 Inserire un colore di sfondo... 4 Inserire

Dettagli

Il linguaggio HTML - Nozioni di base (2)

Il linguaggio HTML - Nozioni di base (2) Corso IFTS Informatica, Modulo 3 Progettazione pagine web statiche (50 ore) Il linguaggio HTML - Nozioni di base (2) Dott. Chiara Braghin braghin@dti.unimi.it TAG strutturali visti fino ad ora -

Dettagli

LEZIONI DI HTML. Come costruire il proprio sito con pochi strumenti e tanta creatività...

LEZIONI DI HTML. Come costruire il proprio sito con pochi strumenti e tanta creatività... LEZIONI DI HTML Come costruire il proprio sito con pochi strumenti e tanta creatività... FORMATTARE IL CARATTERE Per formattare titoli interni del documento web possiamo utilizzare i tag , ,...,

Dettagli

HTML. Alcuni contenuti di queste slides sono tratti dal testo:

HTML. Alcuni contenuti di queste slides sono tratti dal testo: HTML Alcuni contenuti di queste slides sono tratti dal testo: Vito Roberto, Marco Frailis, Alessio Gugliotta, Paolo Omero Introduzione alle Tecnologie Web MCGraw Hill, 2005 1 HTML HyperText Markup Language

Dettagli

Fondamenti di Informatica II 28. Elementi di programmazione web e linguaggi di script (1)

Fondamenti di Informatica II 28. Elementi di programmazione web e linguaggi di script (1) Cenni storici sul web (Internet) Fondamenti di Informatica II 28. Elementi di programmazione web e linguaggi di script (1) Web significa letteralmente ragnatela Avviato nel 1989 (Tim Berners-Lee) come

Dettagli

Manuale scritto da Fuso Federico 4 A Anno scolastico 2011/2012 Parte 1

Manuale scritto da Fuso Federico 4 A Anno scolastico 2011/2012 Parte 1 Manuale scritto da Fuso Federico 4 A Anno scolastico 2011/2012 Parte 1 Chi può riuscire a creare pagine HTML? La realizzazione di pagine web non eccessivamente sofisticate è alla portata di tutti, basta

Dettagli

INTRODUZIONE ALL HTML

INTRODUZIONE ALL HTML INTRODUZIONE ALL HTML LE REGOLE GENERALI Di seguito, sono raccolti i tag html (comandi) di uso più frequente per la formattazione dei testi e la gestione di una pagina web all interno del nostro sistema

Dettagli

IL WEB. Il linguaggio HTML

IL WEB. Il linguaggio HTML IL WEB Il World Wide Web (o web o WWW) nasce al CERN come strumento a disposizione degli scienziati per la condivisione di informazioni utili per la ricerca. Ben presto l uso del web si estende dal mondo

Dettagli

Internet, Browser e HTML

Internet, Browser e HTML 1 2 I protocolli definiscono le regole e il modo per trasferire le informazioni. Internet, Browser e HTML La trasmissione prevede l utilizzo di una pila di protocolli, tale che: I protocolli a basso livello

Dettagli

HTML. Queste slides sono un adattamento di quelle di Luca Anselma, cui va il mio ringraziamento

HTML. Queste slides sono un adattamento di quelle di Luca Anselma, cui va il mio ringraziamento HTML Queste slides sono un adattamento di quelle di Luca Anselma, cui va il mio ringraziamento Cenni di HTML Hypertext Markup Language Linguaggio con cui sono scritte le pagine web Permette di realizzare

Dettagli

WWW (World Wide Web)!& ( # %% (*0 #,% )0#1( &#"#2

WWW (World Wide Web)!& ( # %% (*0 #,% )0#1( &##2 ! "#$" %% $"$&&"'& $%%& $'&( ) *+&, ) && *+ ( -./ WWW (World Wide Web)!& ( # (&%#(!(&&( %% (*0 #,% )0#1( &#"#2 Siti Web pagine Web: documenti pronti per essere registrati su un server Internet residenza

Dettagli

Architettura a tre livelli. Lo scenario e l ambiente. HTML - Hyper Text Markup Language. Enrico Cavalli. Anno Accademico 2012-2013

Architettura a tre livelli. Lo scenario e l ambiente. HTML - Hyper Text Markup Language. Enrico Cavalli. Anno Accademico 2012-2013 HTML - Hyper Text Markup Language Enrico Cavalli Anno Accademico 2012-2013 Lo scenario e l ambiente Architettura a tre livelli 1 Server 6 Web 2 5 3 Php 4 Database Server DB 1. Il browser richiede una pagina

Dettagli

GUIDA HTML 4.01 andreavasini@libero.it HTML.IT

GUIDA HTML 4.01 andreavasini@libero.it HTML.IT Tutti i diritti sono riservati. Per pubblicazioni od utilizzo di questo materiale pregasi contattare l autore al seguente indirizzo: andreavasini@libero.it Andrea Vasini HTML.IT HTML.IT - Andrea Vasini

Dettagli

HTML HyperText Markup Language: Linguaggio utilizzato per creare pagine Web. R. C. Esposito 1

HTML HyperText Markup Language: Linguaggio utilizzato per creare pagine Web. R. C. Esposito 1 HTML HyperText Markup Language: Linguaggio utilizzato per creare pagine Web R. C. Esposito 1 Introduzione HTML è l'acronimo di HyperText Markup Language HTML e il linguaggio standard per descrivere e definire

Dettagli

, utilizzando il tasto destro

, utilizzando il tasto destro HTML è l'acronimo di Hypertext Markup Language ("Linguaggio di contrassegno per gli Ipertesti") e non è un linguaggio di programmazione (sono linguaggi di programmazione il C, il C++, il Pascal, il Java,

Dettagli

Hyper Text Markup Language HTML

Hyper Text Markup Language HTML Operatore informatico giuridico A.A 2003/2004 I Semestre Hyper Text Markup Language HTML Dr. Raffaella Brighi HTML HTML è un linguaggio di marcatura (markup) per la creazione di ipertesti Le sezioni di

Dettagli

Guida html e css base

Guida html e css base Sommario Guida html e css base...1 Introduzione...1 Formattare il testo...4 Organizzare il testo in paragrafi...5 Creare le sezioni come in un libro...6 Creare gli elenchi...8 Inserire immagini e collegamenti...11

Dettagli

EUROPEAN COMPUTER DRIVING LICENCE WEB EDITING - Versione 2.0

EUROPEAN COMPUTER DRIVING LICENCE WEB EDITING - Versione 2.0 EUROPEAN COMPUTER DRIVING LICENCE WEB EDITING - Versione 2.0 Copyright 2010 The European Computer Driving Licence Foundation Ltd. Tutti I diritti riservati. Questa pubblicazione non può essere riprodotta

Dettagli

Linguaggio HTML. Reti. Il Linguaggio HTML. Il Linguaggio HTML

Linguaggio HTML. Reti. Il Linguaggio HTML. Il Linguaggio HTML Reti Linguaggio HTML 1 HTML = Hypertext Markup Language E il linguaggio usato per descrivere documenti ipertestuali Ipertesto = Testo + elementi di collegamento ad altri testi (link) Linguaggio di markup:

Dettagli

HTML. http://www.w3schools.com/html/default.asp

HTML. http://www.w3schools.com/html/default.asp HTML http://www.w3schools.com/html/default.asp HTML Cosa è l'html? HTML è un linguaggio per descrivere le pagine web. HTML è l'acronimo di H yper T ext M arkup L anguage HTML è un markup language Un linguaggio

Dettagli

Laboratorio di Programmazione Distribuita. Introduzione a HTML. Dott. Marco Bianchi Università degli Studi di L'Aquila

Laboratorio di Programmazione Distribuita. Introduzione a HTML. Dott. Marco Bianchi Università degli Studi di L'Aquila Laboratorio di Programmazione Distribuita Introduzione a HTML Dott. Marco Bianchi Università degli Studi di L'Aquila bianchi@di.univaq.it http://di.univaq.it/~bianchi Introduzione a HTML Introduzione a

Dettagli

HTML HyperText Markup Language:

HTML HyperText Markup Language: HTML HyperText Markup Language: Linguaggio utilizzato per creare pagine Web 421 Introduzione HTML è l'acronimo di HyperText Markup Language HTML e il linguaggio standard per descrivere e definire il contenuto

Dettagli

Pagine HTML. Concetti chiave. G.1 Tag. Basi del linguaggio HTML Realizzare semplici pagine HTML

Pagine HTML. Concetti chiave. G.1 Tag. Basi del linguaggio HTML Realizzare semplici pagine HTML Pagine HTML G Concetti chiave Basi del linguaggio HTML Realizzare semplici pagine HTML G.1 Tag Accludiamo questa appendice al fine di dare al lettore non esperto della materia gli elementi di base necessari

Dettagli

HTML e XML. Politecnico di Milano Facoltà del Design Bovisa Elementi di Informatica e Reti di calcolatori

HTML e XML. Politecnico di Milano Facoltà del Design Bovisa Elementi di Informatica e Reti di calcolatori HTML e XML Politecnico di Facoltà del Design Bovisa Elementi di Informatica e Reti di calcolatori Ing. Claudio Menghi Dipartimento di Elettronica e Informazione menghi@elet.polimi.it http://home.dei.polimi.it/menghi

Dettagli

Language. info@settingweb.it. www.settingweb.it

Language. info@settingweb.it. www.settingweb.it HTML HyperText Markup Language Documenti ipertestuali Sono formati da documenti multimediali: testo, immagini, suoni, video, ecc Comprendono le seguenti parti: contenuto struttura presentazione Che cos

Dettagli

Un introduzione al linguaggio HTML e alla creazione di una pagina Web. Stefania Funari

Un introduzione al linguaggio HTML e alla creazione di una pagina Web. Stefania Funari Un introduzione al linguaggio HTML e alla creazione di una pagina Web Appunti per il corso di Informatica (idoneità) N-R a.a. 2001-2002 Stefania Funari Dipartimento di Matematica Applicata Università Ca

Dettagli

GUIDA ALL HTML. Creato da SUPREMO KING

GUIDA ALL HTML. Creato da SUPREMO KING GUIDA ALL HTML Creato da SUPREMO_KING 1 PREMESSE L html è il linguaggio fondamentale attraverso il quale è possibile creare delle semplici pagine web. L html non è un linguaggio di programmazione ma un

Dettagli

Introduzione. Le pagine web sono scritte in HTML un semplice linguaggio di scrittura. HTML è la forma abbreviata di HyperText Markup Language

Introduzione. Le pagine web sono scritte in HTML un semplice linguaggio di scrittura. HTML è la forma abbreviata di HyperText Markup Language HTML 05/04/2012 1 Introduzione Le pagine web sono scritte in HTML un semplice linguaggio di scrittura. HTML è la forma abbreviata di HyperText Markup Language L'ipertesto è semplicemente un testo che funziona

Dettagli

Università degli Studi di Milano

Università degli Studi di Milano Università degli Studi di Milano Corso di Laurea in Sicurezza dei Sistemi e delle Reti Informatiche Lezioni 17 e 18 Creazione di File HTML FABIO SCOTTI Laboratorio di programmazione per la sicurezza Indice

Dettagli

Elementi di web design (parte I): introduzione all HTML

Elementi di web design (parte I): introduzione all HTML Elementi di web design (parte I): introduzione all HTML Luca Casotti E' necessario conoscere: Filesystem: cos'è un file e cos'è una cartella. Differenze fra tipi di file (sui sistemi windows: le estensioni

Dettagli

Concetti preliminari (pagina web, spazio web, provider, ) Come è strutturata una pagina web e consigli per sviluppare un sito

Concetti preliminari (pagina web, spazio web, provider, ) Come è strutturata una pagina web e consigli per sviluppare un sito HTML (HyperText Markup Language) Ing. Lucia Vaira lucia.vaira@unisalento.it Ing. Marco Zappatore marcosalvatore.zappatore@unisalento.it 2 Sommario Concetti preliminari (pagina web, spazio web, provider,

Dettagli

CORSI PER ADULTI. Le basi del Web: il linguaggio HTML e correlati. Corso: 14.03.2011 05.05.2011. Tecnico sistemi e reti n.colombini@gmail.

CORSI PER ADULTI. Le basi del Web: il linguaggio HTML e correlati. Corso: 14.03.2011 05.05.2011. Tecnico sistemi e reti n.colombini@gmail. CORSI PER ADULTI Corso: 14.03.2011 05.05.2011 Docente: Professione: Specializzazione: E-mail : Natan Colombini Consulente Informatico Progettista tecnico WEB Tecnico sistemi e reti n.colombini@gmail.com

Dettagli

HTML HTML. HyperText Markup Language. Struttura di un documento. Gli elementi essenziali di un documento HTML sono i seguenti TAG: ...

HTML HTML. HyperText Markup Language. Struttura di un documento. Gli elementi essenziali di un documento HTML sono i seguenti TAG: <HTML>... HTML HyperText Markup Language Struttura di un documento HTML Gli elementi essenziali di un documento HTML sono i seguenti TAG: ... ... ... Struttura di un documento

Dettagli

Cos è HTML. Hypertext Markup Language non è un linguaggio di programmazione. linguaggio 'di marcatura (Markup)

Cos è HTML. Hypertext Markup Language non è un linguaggio di programmazione. linguaggio 'di marcatura (Markup) HTML Olga Scotti Cos è HTML Hypertext Markup Language non è un linguaggio di programmazione non ha meccanismi che consentono di prendere delle decisioni non è in grado di compiere delle iterazioni linguaggio

Dettagli

Richiami sugli elementi del linguaggio HTML

Richiami sugli elementi del linguaggio HTML Richiami sugli elementi del linguaggio HTML Un documento in formato Web può essere aperto con un browser, attraverso un collegamento a Internet oppure caricandolo dal disco del proprio computer senza connettersi

Dettagli

Modulo ECDL WEBSTARTER. Obiettivi del modulo. Categoria Skill set Rif. Task Item. 1.1 Il web - Concetti. 1.2 HTML 1.2.1 Fondamenti

Modulo ECDL WEBSTARTER. Obiettivi del modulo. Categoria Skill set Rif. Task Item. 1.1 Il web - Concetti. 1.2 HTML 1.2.1 Fondamenti EUROPEAN COMPUTER DRIVING LICENCE WEBSTARTER - Versione 1.5 Copyright 2009 The European Computer Driving Licence Foundation Ltd. Tutti I diritti riservati. Questa pubblicazione non può essere riprodotta

Dettagli

Corso di Informatica Umanistica - Esercitazioni C A.A. 2008-2009. Dr. Antonio Bucchiarone 23 Aprile 2009

Corso di Informatica Umanistica - Esercitazioni C A.A. 2008-2009. Dr. Antonio Bucchiarone 23 Aprile 2009 Corso di Informatica Umanistica - Esercitazioni C A.A. 2008-2009 LEZIONE 1 ORGANIZZAZIONE ED INTRODUZIONE HTML Dr. Antonio Bucchiarone 23 Aprile 2009 Mi Presento Esercitatore: Antonio Bucchiarone SOA ResearchUnit,

Dettagli

Introduzione al linguaggio HTML. A. Lorenzi - Università di Bergamo - Facoltà di Economia 1

Introduzione al linguaggio HTML. A. Lorenzi - Università di Bergamo - Facoltà di Economia 1 Introduzione al linguaggio HTML A. Lorenzi - Università di Bergamo - Facoltà di Economia 1 Richiami introduttivi (1) sito Internet o sito Web o sito WWW: insieme delle pagine che si riferiscono ad uno

Dettagli

HTML Base. Dispensa per il Corso. Laboratorio Informatico: Reti e Internet 1

HTML Base. Dispensa per il Corso. Laboratorio Informatico: Reti e Internet 1 HTML Base Dispensa per il Corso Laboratorio Informatico: Reti e Internet 1 Sommario Sommario...2 1. HTML come linguaggio di markup...3 1.1 Cos è HTML...3 1.2 La sintassi basilare di HTML...3 2 Il documento

Dettagli

Indice PARTE PRIMA L INIZIO 1

Indice PARTE PRIMA L INIZIO 1 Indice Introduzione XIII PARTE PRIMA L INIZIO 1 Capitolo 1 Esplorare il World Wide Web 3 1.1 Come funziona il World Wide Web 3 1.2 Browser Web 10 1.3 Server Web 14 1.4 Uniform Resource Locators 15 1.5

Dettagli

Prof. Renato SICA (ITIS "A. Meucci" - Castelfidardo (AN))

Prof. Renato SICA (ITIS A. Meucci - Castelfidardo (AN)) HTML, HyperText Markup Language Prof. Renato SICA (ITIS "A. Meucci" - Castelfidardo (AN)) Scopo della lezione Mostrare, nella pratica, il concetto di ipertesto. Fornire, in pratica, il concetto di interprete.

Dettagli

HTML 6. I frame. Sintassi di base. I frame e DOCTYPE FRAME. ...head...

HTML 6. I frame. Sintassi di base. I frame e DOCTYPE FRAME. ...head... <FRAMESET lista_attributi> <FRAME SRC= URL lista_attributi> FRAME HTML 6 I frame Danno la possibilità di creare finestre multiple all'interno della finestra del browser Si riesce a suddividere la pagina in più sezioni indipendenti, ma che si possono influenzare

Dettagli

Spazio WEB: spazio fisico dove vengono memorizzate le pagine (15, 50, 100 Mb che si acquistano)

Spazio WEB: spazio fisico dove vengono memorizzate le pagine (15, 50, 100 Mb che si acquistano) 1 Concetti di base Pagina WEB: è un documento scritto in linguaggio html che contiene testo, immagini, link. L estensione di questi file è.html o.htm (pagine statiche, pagine dinamiche). Un sito WEB è

Dettagli

HTML - semplice guida by ComputerLucaWorld inizio stesura 03/01/2012 ancora da terminare (potete dare giudizi su come migliorarla!

HTML - semplice guida by ComputerLucaWorld inizio stesura 03/01/2012 ancora da terminare (potete dare giudizi su come migliorarla! HTML - semplice guida by ComputerLucaWorld inizio stesura 03/01/2012 ancora da terminare (potete dare giudizi su come migliorarla!) CENNI SULL'HTML L'html è il linguaggio di base per lo sviluppo di pagine

Dettagli

Tutorial di HTML basato su HTML 4.0 e CSS 2

Tutorial di HTML basato su HTML 4.0 e CSS 2 Claudia Picardi Tutorial di HTML basato su HTML 4.0 e CSS 2 Informatica II per Scienze e Turismo Alpino Docenti: Viviana Patti e Claudia Picardi 3 Immagini in documenti HTML 3.1 Rappresentazione delle

Dettagli

INTRODUZIONE AD HTML

INTRODUZIONE AD HTML INTRODUZIONE AD HTML I Frames ovvero Le cornici. Nelle lezioni precedenti abbiamo imparato a creare il nostro sito facendo uso di testo, immagini, links e meta comandi. Pochi e semplici ingredienti per

Dettagli

Tag di apertura e chiusura di una pagina web #############################################################################

<html> </html> Tag di apertura e chiusura di una pagina web ############################################################################# PaginaN (1) Guida all'html by ^shiva^ html-tag ########################### HTML ################### ####################################################### Tag di apertura e chiusura di

Dettagli

APPUNTI DI HTML (TERZA LEZIONE)

APPUNTI DI HTML (TERZA LEZIONE) Il web è costituito non da testi ma da ipertesti. APPUNTI DI HTML (TERZA LEZIONE) I link ci permettono di passare da un testo all altro. I link sono formati da due componenti: IL CONTENUTO "nasconde" il

Dettagli

Per l'esercizio preparare una cartella dal nome DUE COLONNE con le sottocartelle css e immagini

Per l'esercizio preparare una cartella dal nome DUE COLONNE con le sottocartelle css e immagini STRUTTURA A DUE COLONNE Per l'esercizio preparare una cartella dal nome DUE COLONNE con le sottocartelle css e immagini Un layout a due colonne ha, in genere, la seguente struttura: un'intestazione (TESTATA)

Dettagli

Dispensa di HTML per chi muove i primi passi nel Web

Dispensa di HTML per chi muove i primi passi nel Web Giorno dopo Giorno - Scritture quotidiane Un blog di Sergio Fumich www.sergiofumich.com Helps & Tools for the Web and Webmasters Dispensa di HTML per chi muove i primi passi nel Web INDICE 1 Che cos è

Dettagli

Metodologie Informatiche Applicate al Turismo

Metodologie Informatiche Applicate al Turismo Metodologie Informatiche Applicate al Turismo 9. HTML Parte II Paolo Milazzo Dipartimento di Informatica, Università di Pisa http://www.di.unipi.it/ milazzo milazzo di.unipi.it Corso di Laurea in Scienze

Dettagli

H T M L. Mariachiara Pezzotti

H T M L. Mariachiara Pezzotti H T M L Mariachiara Pezzotti che cos'è l'html è un linguaggio usato per descrivere i documenti ipertestuali disponibili su Internet. Non è un linguaggio di programmazione, ma un linguaggio di markup, ossia

Dettagli

INTRODUZIONE AL LINGUAGGIO HTML. Internet + HTML + HTTP = WWW

INTRODUZIONE AL LINGUAGGIO HTML. Internet + HTML + HTTP = WWW 1 INTRODUZIONE AL LINGUAGGIO HTML Internet + HTML + HTTP = WWW Scopo della esercitazione 2 Conoscere i principali tag HTML Realizzare una propria Home Page utilizzando alcuni semplici tag HTML 3 Architettura

Dettagli

Le immagini digitali. Modulo 2. Rappresentazione analogica. Rappresentazione digitale. Una palette a 16 colori

Le immagini digitali. Modulo 2. Rappresentazione analogica. Rappresentazione digitale. Una palette a 16 colori Foto digitale, invio via mail e inserimento in una pagina web Modulo 2 Cosa si intende con analogico e digitale? Come avviene la rappresentazione digitale delle immagini? Come è possibile trasformare un

Dettagli

Scegliere il font del testo

Scegliere il font del testo Scegliere il font del testo Vediamo ora come formattare il testo mediante la scelta del colore, delle dimensioni e del tipo di carattere del testo attraverso l utilizzo del tag . Il tipo di carattere

Dettagli

CSS. Dott. Nicole NOVIELLI novielli@di.uniba.it http://www.di.uniba.it/intint/people/nicole.html. ignorare la definizione degli elementi di stile

CSS. Dott. Nicole NOVIELLI novielli@di.uniba.it http://www.di.uniba.it/intint/people/nicole.html. ignorare la definizione degli elementi di stile CSS Dott. Nicole NOVIELLI novielli@di.uniba.it http://www.di.uniba.it/intint/people/nicole.html CSS: Cascading Style Sheet! Tecnologia W3C per la definizione dello stile di una pagina web! Contenuto e

Dettagli

Esercizi. Introduzione all HTML. Il WWW

Esercizi. Introduzione all HTML. Il WWW Politecnico di Milano Esercizi Introduzione all HTML Il WWW Il World Wide Web: una rete di pagine connesse tra loro e distribuite su diverse macchine Il server Web contiene le pagine Web da visualizzare

Dettagli

Disegnare il Layout. www.vincenzocalabro.it 1

Disegnare il Layout. www.vincenzocalabro.it 1 Disegnare il Layout www.vincenzocalabro.it 1 Il problema dell interfaccia Una buona interfaccia deve assolvere a diverse funzioni: far percepire i contenuti permettere di individuare le principali aree

Dettagli

Basi di Dati. Programmazione e gestione di sistemi telematici

Basi di Dati. Programmazione e gestione di sistemi telematici Basi di Dati. Programmazione e gestione di sistemi telematici Coordinatore: Prof. Paolo Nesi Docenti: Prof. Paolo Nesi Dr.sa Michela Paolucci Dr. Emanuele Bellini Obiettivi Scopo del corso: Comprensione

Dettagli

I principali tag nella realizzazione di pagine web

I principali tag nella realizzazione di pagine web Ministero della Pubblica Istruzione Ufficio Scolastico Regionale per il Veneto Ufficio Scolastico Provinciale di Padova Area della comunicazione e web I principali tag nella realizzazione di pagine web

Dettagli

LE BASI DELL HTML MA NON SOLO.

LE BASI DELL HTML MA NON SOLO. LE BASI DELL HTML MA NON SOLO. - 1 - Sommario: I concetti fondamentali : l ipertesto e la multimedialità Pag. 3 La progettazione : usabilità e uniformità Gli editor di html: front page Pag. 4 Il linguaggio

Dettagli

Lista dei Punti di Controllo per l'accessibilità dei contenuti web

Lista dei Punti di Controllo per l'accessibilità dei contenuti web Lista dei Punti di Controllo per l'accessibilità dei contenuti web Questo documento è tratto dal sito del W3C http://www.w3.org/tr/wai-webcontent/full-checklist.html ed è stato tradotto dagli studenti

Dettagli

MANUALE IMMEDIATO DI HTML

MANUALE IMMEDIATO DI HTML MANUALE IMMEDIATO DI HTML Realizzato da NiktorTheNat Iniziato il giorno 9 aprile 2010 - terminato il giorno 22 aprile 2010 email autore: niktorthenat@tiscali.it canale youtube: http://www.youtube.com/user/niktorthenat

Dettagli

WEBMASTER. Strategie per programmare siti web e portali. Corso pratico per Webmaster di Daniele Venditti. Manuale di informatica per il web

WEBMASTER. Strategie per programmare siti web e portali. Corso pratico per Webmaster di Daniele Venditti. Manuale di informatica per il web WEBMASTER Strategie per programmare siti web e portali Corso pratico per Webmaster di Daniele Venditti Manuale di informatica per il web www.progettimultimediali.com www.corsi-online.it Questo Ebook è

Dettagli

Manuali.net. Nevio Martini

Manuali.net. Nevio Martini Manuali.net Corso base per la gestione di Siti Web Nevio Martini 2009 Il Linguaggio HTML 1 parte Introduzione Internet è un fenomeno in continua espansione e non accenna a rallentare, anzi è in permanente

Dettagli

Prof. Rocco Ciurleo 1

Prof. Rocco Ciurleo 1 Istituto Tecnico Industriale Statale Conte Michele Maria Milano Polistena Classi: 2 E 2 G - a. s. 2012/2013 H T M L Guida base al linguaggio Prof. Rocco Ciurleo 1 Cos è l HTML HTML è l'acronimo di Hypertext

Dettagli

HTML CSS guida unica. htmlcss.it

HTML CSS guida unica. htmlcss.it HTML CSS guida unica htmlcss.it Accesso al web. 00.01 Dispositivi Il modo in cui tutti noi navighiamo il web è in costante evoluzione: console giochi, web TV, computer desktop, netbook, ma soprattutto

Dettagli

Modulo 13. Concetti avanzati di HTML Liste

Modulo 13. Concetti avanzati di HTML Liste Pagina 1 di 8 Concetti avanzati di HTML Liste Il formato HTML mette a disposizione 5 Tag per definire delle liste, supportando liste numerate, non numerate, di descrizione, menu e directory. Liste Numerate

Dettagli

Il Linguaggio HTML (Ultima revisione 09/10/2014) Pag. 1

Il Linguaggio HTML (Ultima revisione 09/10/2014) Pag. 1 Il Linguaggio HTML (Ultima revisione 09/10/2014) Pag. 1 IL LINGUAGGIO HTML Html è il linguaggio con cui le pagine web vengono scritte e progettate, anche se molti progettisti si rifiutano di pensare all'html

Dettagli

Corso di Informatica Generale 1 IN1. Linguaggio HTML

Corso di Informatica Generale 1 IN1. Linguaggio HTML Università Roma Tre Facoltà di Scienze M.F.N. Corso di Laurea in Matematica Corso di Informatica Generale 1 IN1 Linguaggio HTML Marco Liverani (liverani@mat.uniroma3.it) Sommario Breve cronologia del World

Dettagli

Guida web: HTML per principianti

Guida web: HTML per principianti Guida web: HTML per principianti A cura di macom http:// Introduzione "Le vie della comunicazione sono infinite" Ho scritto questa semplice e breve guida pensando ai miei inizi e alle difficoltà incontrate

Dettagli

LEZIONE NO. 2: E TAG DI FORMATTAZIONE DEL TESTO DI ATTILIO ABBIEZZI

LEZIONE NO. 2: <BODY> E TAG DI FORMATTAZIONE DEL TESTO DI ATTILIO ABBIEZZI HTML BASE LEZIONE NO. 2: E TAG DI FORMATTAZIONE DEL TESTO DI ATTILIO ABBIEZZI FONTI: HTML.IT 1 Impostare lo sfondo L'operazione successiva all'impostazione del documento è la definizione

Dettagli

Frammento dalla Bibbia di Gutenberg, il primo libro stampato del mondo occidentale (Mainz 1455)

Frammento dalla Bibbia di Gutenberg, il primo libro stampato del mondo occidentale (Mainz 1455) Il linguaggio HTML Frammento dalla Bibbia di Gutenberg, il primo libro stampato del mondo occidentale (Mainz 1455) Oggi la tecnologia del World Wide Web consente il trasferimento di documenti qualsiasi

Dettagli

Il linguaggio HTML - Parte 4

Il linguaggio HTML - Parte 4 Corso IFTS Informatica, Modulo 3 Progettazione pagine web statiche (50 ore) Il linguaggio HTML - Parte 4 Dott. Chiara Braghin braghin@dti.unimi.it HTML - I Riferimenti Ipertestuali Il piatto forte di tutto

Dettagli

Verifica di Accessibilità del sito www.aots.sanita.fvg.it

Verifica di Accessibilità del sito www.aots.sanita.fvg.it Verifica di Accessibilità del sito www.aots.sanita.fvg.it NOTE: Verifica effettuata in base ai requisiti descritti nell allegato A del Decreto Ministeriale 8 luglio 2005, ai sensi della legge n.4 del 9

Dettagli

Maria Grazia Ottaviani. informatica, comunicazione e multimedialità

Maria Grazia Ottaviani. informatica, comunicazione e multimedialità Maria Grazia Ottaviani informatica, comunicazione e multimedialità Unità digitale 1 Ambiente HTML Introduzione Oltre ai linguaggi di programmazione esistono anche linguaggi detti markup. Sono linguaggi

Dettagli

SITI WEB DEL COMUNE DI PESARO, RAPPORTO DI CONFORMITA' AI REQUISITI TECNICI DELLA LEGGE N.4-9 GENNAIO 2004

SITI WEB DEL COMUNE DI PESARO, RAPPORTO DI CONFORMITA' AI REQUISITI TECNICI DELLA LEGGE N.4-9 GENNAIO 2004 SITI WEB DEL COMUNE DI PESARO, RAPPORTO DI CONFORMITA' AI REQUISITI TECNICI DELLA LEGGE N.4-9 GENNAIO 2004 Le pagine del sito istituzionale e dei siti tematici del Comune di Pesaro sono state progettate

Dettagli

Basi di programmazione HTML

Basi di programmazione HTML Basi di programmazione HTML HTML (Hyper Text Markup Language) è un semplice linguaggio basato su un sistema di etichettatura (tagging scheme), derivato dal più complesso linguaggio SGML (Structured Generalized

Dettagli

Scrivere una applicazione html, css e javascript per Android

Scrivere una applicazione html, css e javascript per Android Scrivere una applicazione html, css e javascript per Android Prima di tuffarsi dentro, vorrei stabilire rapidamente il campo di gioco. In questo capitolo, definisco termini chiave, confrontare i pro e

Dettagli

Corso di HTML. Prerequisiti. Modulo L3. 1-Concetti generali. Browser Rete Internet Client e server. M. Malatesta 1-Concetti generali-12 28/07/2013

Corso di HTML. Prerequisiti. Modulo L3. 1-Concetti generali. Browser Rete Internet Client e server. M. Malatesta 1-Concetti generali-12 28/07/2013 Corso di HTML Modulo L3 1-Concetti generali 1 Prerequisiti Browser Rete Internet Client e server 2 1 Introduzione In questa Unità introduciamo alcuni semplici elementi del linguaggio HTML, con il quale

Dettagli

LEZIONE NO. 4: IMMAGINI E LINK: DI ATTILIO ABBIEZZI

LEZIONE NO. 4: IMMAGINI E LINK: <IMG> <A HREF> DI ATTILIO ABBIEZZI HTML BASE LEZIONE NO. 4: IMMAGINI E LINK: DI ATTILIO ABBIEZZI FONTI: HTML.IT 1 inserire immagini Internet, solo negli ultimi 10 anni affermatasi come media di massa, è stato per lunghi

Dettagli

Conformità: Conforme; tutte le pagine sono realizzate con linguaggio XHTML 1.0 Strict.

Conformità: Conforme; tutte le pagine sono realizzate con linguaggio XHTML 1.0 Strict. Tasti di accesso rapido Al fine di migliorare l'accessibilità del sito sono stati definiti i seguenti tasti di accesso rapido, per attivare le principali funzionalità offerte: [H] = Homepage [R] = Ricerca

Dettagli

Esploriamo Javascript! 1 di Ivan Venuti

Esploriamo Javascript! 1 di Ivan Venuti Esploriamo Javascript! 1 di Ivan Venuti L Html è stato pensato (e creato) per presentare contenuti statici che, visualizzati da utenti diversi, diano sempre lo stesso risultato. Per sopperire a questa

Dettagli

Accessibilità sito internet dell Ente e obiettivi anno 2014 e seguenti

Accessibilità sito internet dell Ente e obiettivi anno 2014 e seguenti COMUNE DI GALLARATE Settore Risorse Economiche e Finanziarie Centro Elaborazione Dati Accessibilità sito internet dell Ente e obiettivi anno 2014 e seguenti Dichiarazione di accessibilità Il sito del Comune

Dettagli

Scritto da Enrico Battuello Domenica 20 Febbraio 2011 13:30 - Ultimo aggiornamento Venerdì 07 Dicembre 2012 01:39

Scritto da Enrico Battuello Domenica 20 Febbraio 2011 13:30 - Ultimo aggiornamento Venerdì 07 Dicembre 2012 01:39 Nelle lezioni precedenti di questo tutorial abbiamo parlato di HTML5, abbiamo presentato alcuni dei nuovi tag introdotti con esso ed abbiamo creato la parte di codice HTML che costituisce il progetto d'esempio

Dettagli

Nozioni di base su HTML (4) Pubblicazione di un documento un documento è accessibile sul web quando viene memorizzato presso un Web

Nozioni di base su HTML (4) Pubblicazione di un documento un documento è accessibile sul web quando viene memorizzato presso un Web Nozioni di base su HTML HTML: HyperText Markup Language una collezione di stili (tags di markup) che, in maniera indipendente dal tipo di macchina sulla quale vengono interpretati, permettono di definire

Dettagli

Linguaggi per la descrizione dei documenti

Linguaggi per la descrizione dei documenti SGML (Standard General Markup Language) Linguaggi per la descrizione dei documenti SGML,HTML,XML Molteplicità di documenti di tipo diverso (es. web): articoli, cataloghi, rubriche, tabelle di dati etc..

Dettagli

FRONT PAGE E HTML Breve manuale d uso

FRONT PAGE E HTML Breve manuale d uso FRONT PAGE E HTML Breve manuale d uso Come si crea nella pratica un sito Internet? Qual è lo strumento più semplice? Come funziona il linguaggio Html? Queste sono le domande cui questo manuale intende

Dettagli

Creazione e modifica di una pagina Web

Creazione e modifica di una pagina Web PROGETTO P RO G E T T O Creazione e modifica di una pagina Web OBIETTIVI In questo progetto imparerete a: Descrivere Internet e i suoi termini chiave. Descrivere il World Wide Web e i suoi termini chiave.

Dettagli

Appendice A Come creare una pagina Web

Appendice A Come creare una pagina Web Appendice A Come creare una pagina Web Il sistema di informazioni utilizzato nel WWW non è di tipo sequenziale ma ipertestuale. È infatti formato da un insieme di documenti collegati tra loro, in modo

Dettagli