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

Dimensione: px
Iniziare la visualizzazioe della pagina:

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

Transcript

1 HTML, HyperText Markup Language Prof. Renato SICA (ITIS "A. Meucci" - Castelfidardo (AN))

2 Scopo della lezione Mostrare, nella pratica, il concetto di ipertesto. Fornire, in pratica, il concetto di interprete. Senza avere alcuna conoscenza di programmazione scrivere (forse per la prima volta) un semplice programma ( la L di HTML sta per Language ). Fornire conoscenze di base per costruire pagine web statiche senza l ausilio di editor specializzati (Frontpage, HTML Edit, ). Fornire conoscenze per la costruzione di pagine web elementari nelle quali poter ospitare i vostri contributi multimediali.

3 HTML: un po di storia Il WWW (World Wide Web) fu inventato nel 1991 da Tim Berners Lee al CERN di Ginevra. Esso consisteva in un sistema per rendere disponibili su Internet dei contenuti di testi ed immagini (pagine Web) con facilità, mediante protocolli di comunicazione (HTTP HTTP), linguaggi di codifica dei contenuti (HTML), e sintassi per indicare la collocazione dei contenuti (URL). Lo standard HTML fu inizialmente sviluppato dall IETF. Oggi le specifiche dello standard e le sue evoluzioni sono manutenute dal World Wide Web Consortium (

4 HTML: le specifiche standard Lo standard HTML si è evoluto in diverse versioni successive: 1.0, 2.0, 3.0, 3.2, 4.0, Un cambio nel nome: la versione attualmente più recente si chiama XHTML 1.0. Molto simile alla precedente HTML Il cambiamento da HTML a XHTML riguarda principalmente l adozione delle regole più rigide utilizzate già da XML (un altro tipo di markup language usato per altri scopi e leggermente più complesso) per HTML, in modo da renderlo più facile da processare e manutenere.

5 HTML: i tag Un documento HTML è composto sia dal contenuto che da comandi. Il contenuto è ciò che viene visualizzato dall utente con un browser. I comandi (o tag) sono le istruzioni che fanno sì che il documento venga visualizzato correttamente in tutte le sue parti così come appare nel browser.

6 HTML: il formato dei tag Le pagine Web, dunque, contengono due tipi di oggetti: 1. Il testo del documento; 2. I tag HTML che indicano gli elementi, la struttura, la formattazione e i link ipertestuali con altre pagine,. In generale i tag hanno il seguente aspetto: <NomeTag> testo su cui il tag ha effetto </NomeTag> <NomeTag attributo= valore > contenuto </NomeTag>

7 HTML: il compito dei tag HTML è un markup language partendo dal testo si possono poi applicare alcuni particolari tag a parole e paragrafi per ottenere la formattazione richiesta. I tag definiscono: intestazioni, paragrafi, elenchi e tabelle lo stile dei caratteri, ad esempio il grassetto

8 HTML: come scrivere una semplice pagina Una pagina Web è un file con estensione.htm o.html Il modo migliore per iniziare a creare pagine Web è quello di usare un semplice editor di testi, ad esempio Notepad o Wordpad. Esistono anche: editor grafici di HTML (es. Front Page di Microsoft, Dreamweaver, HTML Edit ) editor a Tag programmi convertitori (Word, WordPerfect ecc.) L altro strumento di cui avremo bisogno per visualizzare le pagine che scriveremo è il browser.

9 HTML: struttura di una pagina Ciò che dobbiamo inizialmente scrivere è: <HTML> <HEAD> <TITLE></TITLE> </HEAD> <BODY> </BODY> </HTML>

10 HTML: primo esempio <HTML> <HEAD> <TITLE> Home Page di Nome </TITLE> </HEAD> <BODY> </BODY> </HTML>

11 HTML: il tag <body> Dopo l'intestazione deve essere inserito il corpo del documento, identificato dal marcatore <body>: <body>...</body> Il testo del documento va inserito tra questi due marcatori, includendo tutti gli altri marcatori con i quali si vorrà descriverne la struttura e la forma. L'elemento '<body>' prevede alcuni attributi che analizzeremo in seguito.

12 HTML: prima pagina (1/2) Cominciamo, dunque, a comporre la nostra pagina digitando quanto segue: <html> <head> <title>la mia prima pagina Web </title> </head> <body> <h1>questa e la Home page di Nome Cognome</h1> <p>questa e la mia prima pagina in HTML.</p> </body> </html>

13 HTML: prima pagina (2/2)

14 HTML: i tag <hn> I titoli di un documento possono essere articolati su vari livelli gerarchici (titolo di sezione, titolo di capitolo, titolo di paragrafo etc.) Gli elementi per codificare questi titoli interni hanno un marcatore della forma <hn> In HTML sono disponibili sei diversi livelli di titoli: <h1> è il livello più alto e <h6> il più basso Il primo viene solitamente utilizzato per marcare il titolo di un capitolo, o di una sezione importante, e i successivi per indicare sottosezioni progressivamente più piccole.

15 HTML: esempio tag <hn> (1/2) Un esempio: <html> <head> <title>la mia prima pagina Web </title> </head> <body> <h1>questa e la Home page di Nome Cognome</h1> <p>questa e la mia prima pagina in HTML.</p> <h1>primo livello</h1> <h2>secondo livello</h2> <h3>terzo livello</h3> <h4>quarto livello</h4> <h5>quinto livello</h5> <h6>sesto livello</h6> </body> </html>

16 HTML: esempio tag <hn> (2/2)

17 HTML: attributi dei tag <hn> E possibile inserire più titoli all'interno della pagina, anche dello stesso livello. Tutti i marcatori di questi titoli interni supportano un attributo che permette di specificare l'allineamento del testo. Il nome dell'attributo è 'align', e i valori possibili, che specificano il tipo di allineamento, sono: 1. center 2. left 3. right Ad esempio: <h1 align="center">home page di Nome Cognome</h1>

18 HTML: il tag <p> Un documento HTML può essere diviso in capoversi (paragrafi): a tale fine va utilizzato l'elemento <p>. L'effetto visivo di questa istruzione è quello di inserire un ritorno a capo e una riga vuota nel testo a video. Si noti che dopo ogni titolo <hn> il browser va a capo automaticamente.

19 HTML: esempio tag <p> Riportiamo nel nostro file le due parti che seguono: <p>questa riga</p><p>va a capo.</p> <p>quest'altra,invece, appare scritta su un unica riga nonostante ci siano degli a capo.</p>

20 HTML: attributi del tag <p> L esempio che abbiamo appena visto ci dice che l HTML visualizza i capoversi separandoli in funzione dell'istruzione <p> e non degli 'a capo' eventualmente presenti nel nostro file. Anche il marcatore <p> può avere degli attributi di tipo 'align'. <p align="right">, ad esempio, sposterà a destra il capoverso. Un altro marcatore che riguarda la gestione dei salti di linea è <br> (break). La sua funzione è quella di provocare un 'ritorno a capo' senza introdurre una riga vuota. <br> non ha un marcatore di chiusura in quanto indica semplicemente il punto in cui intervenire. Ricorrendo a più marcatori <br> in sequenza si possono creare delle spaziature verticali.

21 HTML: le liste non numerate In un documento possono comparire anche elenchi ordinati di voci, o liste che possono essere numerate (ad ogni voce della lista è assegnato automaticamente un numero progressivo) o non numerate (ogni voce della lista è preceduta da un pallino). HTML fornisce una serie di elementi per inserire liste all'interno di pagine Web. La sintassi per le liste non numerate è la seguente: <ul> <li>prima voce</li> <li>seconda voce</li> <li>terza voce</li> </ul>

22 HTML: le liste numerate Le liste numerate si costruiscono nello stesso modo, ma il tag di apertura è <ol> (ordered list) e quello di chiusura, ovviamente, </ol>. All'interno, ancora una serie di elementi <li> <ol> <li>prima voce</li> <li>seconda voce</li> <li>terza voce</li> </ol>

23 HTML: esempio liste

24 HTML: attributi delle liste Il formato delle liste può essere controllato mediante alcuni attributi tra cui: type="x dove x può assumere uno dei seguenti valori: circle = cerchio square = quadratino I = numeri romani maiuscoli i = numeri romani minuscoli a = lettere minuscole A = lettere maiuscole

25 HTML: Gli stili di carattere (1/2) In genere gli stili di carattere sono corsivo, grassetto, sottolineato. HTML dispone dei seguenti stili <strong>...</strong> Testo molto rilevante (viene reso di norma in grassetto) <em>...</em> Testo enfatizzato (viene reso di norma in corsivo) <cite>...</cite> Testo citato (viene reso di norma in corsivo) <address>...</address> Indirizzo (viene reso in corsivo o in grassetto con un carattere piccolo)

26 HTML: Gli stili di carattere (2/2) <b>...</b> Grassetto <u>...</u> Sottolineato <i>...</i> Italico o corsivo <big>...</big> carattere più grande <small>...</small> carattere più piccolo Gli stili possono essere sommati; ad esempio, per ottenere un testo corsivo neretto si può scrivere: <b><i>questa riga è in neretto e corsivo</i></b> La cosa importante è creare codice nidificato

27 HTML: esempio stile carattere

28 HTML: le righe orizzontali L'elemento <hr> ha lo scopo di inserire una linea orizzontale fra blocchi di testo o immagini all'interno di una pagina Web. Si tratta di un marcatore che non richiede tag di chiusura. Alcuni attributi applicabili sono: size="n dove n indica lo spessore della riga (es.: <hr size="5">); Noshade serve a eliminare l'effetto 'ombra' della linea (es.: <hr noshade>); width="n% n" regola la larghezza della riga, sia in percentuale, relativamente alla larghezza dello schermo, sia in assoluto, in pixel (es.: <hr width="50%"> oppure <hr width="250">); align="left center right allinea la riga rispettivamente a sinistra, al centro e a destra, ad es.: <hr align="right" width="80%">

29 HTML: esempio righe orizzontali

30 HTML: Attributi del BODY Ci sono degli attributi che possono essere aggiunti all'elemento <body> per specificare l'aspetto del testo e dello sfondo in una pagina Web: background="file-grafico" permette di indicare un file grafico (in formato GIF o JPEG) che viene inserito sullo sfondo della pagina; se l'immagine è più piccola rispetto alla pagina, essa viene automaticamente duplicata e affiancata alle sue copie bgcolor="#colore RGB" permette di assegnare un colore allo sfondo text="#colore RGB" indica il colore del testo all'interno della pagina link="#colore RGB" indica il colore dei link vlink="#colore RGB" indica il colore dei link già attivati alink="#colore RGB" indica il colore dei link mentre si attivano con il mouse

31 HTML: i colori Colore Esadecimale Arancione #FF8000 Bianco #FFFFFF Blu #0000FF Celeste #80FFFF Giallo #FFFF00 Grigio #C0C0C0 Marrone # Nero # Rosa #FF8080 Il valore che segue l attributo BGCOLOR è un valore esadecimale che indica il colore. Il colore è dato dalla fusione dei tre colori principali, il Rosso, il Verde e il Blu. Le prime due cifre indicano la quantità di Rosso, le seconde la quantità di Verde mentre le terze la quantità di Blu (#rrvvbb). Rosso Verde Viola #FF0000 #00FF00 #8080FF Tabella dei colori ai siti

32 HTML: esempio tabella di colori

33 HTML: esempio colore di sfondo (1/2) <HTML> <HEAD> <TITLE>IMMAGINE</TITLE> </HEAD> <BODY BGCOLOR= #00FF00 > <B> Prova colore sfondo</b> <P> </BODY> </HTML>

34 HTML: esempio colore di sfondo (2/2)

35 HTML: dimensionamento dei caratteri (1/2) Nel caso di dimensionamento in termini assoluti si usa il seguente marcatore: <font size="n">testo</font> Dove 'n' è un numero che va da 1 a 7, ad es.: <font size="4">prova</font>. La dimensione normale del font è 3. Dunque se si usano gli indici 1 o 2 si ottiene un font ridotto rispetto al testo normale, mentre con 4, 5, 6 e 7 si ottiene un font ingrandito.

36 HTML: dimensionamento dei caratteri (2/2) Nel caso di dimensionamento in termini relativi si usa la seguente marcatura: <font size="+/- n">testo</font> In questo caso n può variare da -2 a +4. Usando in modo combinato i vari tag è possibile ottenere effetti come questo: <font size="+4">h</font><font size="+3"> E</font><font size="-1">l</font><font size="+2">lo</font>

37 HTML: le immagini <HTML> <HEAD> <TITLE>Esempio pagina contenente una IMMAGINE</TITLE> </HEAD> <BODY BGCOLOR= # > <IMG SRC="tango1.jpg" alt="hugo Pratt/Corto Maltese e il tango"> <P> </BODY> </HTML> Se il file che contiene l immagine non si trova nella stessa directory del file html che lo include, si dovranno specificare anche i nomi delle directory (cartelle) fino a quella in cui si trova il file HTML (specificare il path), separati dalla barra (/), in questo modo: < img src=' immagini/tango1.jpg''> L attributo alt

38 HTML: esempio immagine

39 HTML: immagine in movimento <HTML> <HEAD> <TITLE>Esempio pagina contenente una IMMAGINE</TITLE> </HEAD> <BODY> <FONT SIZE="3" COLOR="BLUE"> ESEMPIO DI IMMAGINE in movimento (orizzontale)</font> <P> <MARQUEE> <IMG SRC="lungomaltese.jpg"> </MARQUEE> </P> </BODY> </HTML>

40 HTML: attributi del tag <img> L'elemento <img> è corredato da diversi attributi: per modificare le dimensioni (consigliati programmi di grafica) si può disporre degli attributi width e height. Ad esempio: <img src= esempio.gif height= 150 width= 45 > Attributo alt consente di inserire un testo accanto all immagine: alt= testo alternativo Attributo align per definire posizione dell'immagine rispetto al testo align = top align = middle testo allineato in alto testo allineato in centro align = bottom testo allineato in basso Altri attibuti hspace = vspace = border = spaziatura orizzontale (in pixel) spaziatura verticale (in pixel) in pixel Come già detto, un immagine può essere usata anche come sfondo: <body background= path completo >

41 HTML: link e riferimenti I documenti HTML sono degli ipertesti il cui funzionamento è dovuto agli HyperLink o ancoraggi, il cui tag specifico è <A>: <A HREF> L'elemento <A> (Anchor) ha bisogno di un tag di apertura e chiusura e al suo interno è possibile inserire testo, immagini o altri elementi multimediali. HREF (abbreviazione di Hypertext Reference) contiene l'url o la pagina da linkare: <A HREF=" Visita il sito del quotidiano La Repubblica </A> E' possibile sostituire al testo un'immagine Grazie a TARGET è possibile caricare un pagina associata a HREF in un'altra finestra del browser, attraverso la seguente sintassi: <A HREF= TARGET="_new">Visita </A> L'attributo TARGET="_new" indica al browser di caricare il link a in una nuova (_new) finestra.

42 HTML: link a mail E' possibile inserire collegamenti anche verso indirizzi , attraverso una sintassi leggermente diversa da quella indicata per le URL: <A HREF="mailto:ciccio@bellicapelli.it">Scrivimi!</A> Cliccando su questo link viene automaticamente aperto il programma di posta predefinito con il campo TO/A già impostato su ciccio@bellicapelli.it.

43 HTML: le tabelle Per creare una tabella in HTML si usano i tag: <table>.</table> all interno dei quali si deve definire il contenuto della tabella. Per definire una tabella si procede nel modo seguente: si realizza la prima riga facendo uso del tag <tr> = table row si indicano le varie celle facendo uso: del tag <th> per le intestazioni di cella </th> = table header del tag <td> per i dati della cella </td> = table data si passa alla seconda riga con le relative celle avendo cura di usare il tag </tr>

44 HTML: esempio tabelle (1/2) <HTML> <HEAD><TITLE>Esempio di TABELLA</TITLE> </HEAD> <BODY> <CENTER> Tabella<P> <TABLE border=1> <TR><TD>uno<TD>due <TR><TD>tre <TD>quattro <TR><TD>cinque<TD>sei </TABLE> </CENTER> </BODY> </HTML>

45 HTML: esempio tabelle (2/2)

46 HTML: attributi tabelle border="n" (es.: <table border="1">) rende visibile il bordo della tabella. Il valore n è in pixel. cellpadding="n" (es.: <table cellpadding="10">) è lo spazio tra il bordo della tabella e il testo contenuto all'interno delle celle. cellspacing="n" (es.: <table cellspacing="5">) è la distanza tra una cella e un'altra. width="n n%" (es.: <table width="100%"> oppure <table width="250">) la larghezza della tabella relativamente allo schermo, espressa con i valori percentuali, oppure in assoluto, in pixel. bgcolor="#rrggbb" (es.: <table bgcolor="#ff0000"> oppure < table bgcolor="red">) determina il colore di sfondo della tabella. La sintassi di rrggbb è la medesima vista per attribuire colori allo sfondo del documento o ai caratteri. In alternativa ai valori esadecimali si possono anche qui usare i nomi dei colori, in inglese (red, green, ecc.).

47 HTML: caratteri speciali CARATTERI SPECIALI: < > > < à à é é è è ì ì ò ò ù ù & & spazio APICE E PEDICE: <sup> </sup> <sub> </sub>

48 HTML: i frame Una pagina WEB può essere suddivisa in più aree indipendenti denominate frame. Permettono di visualizzare più elementi di interesse primario Migliorano l aspetto finale della pagina WEB E consigliabile non eccedere nel loro uso per non appesantire la realizzazione del sito. Un punto a loro sfavore è l incompatibilità con alcuni browser che non supportano il loro utilizzo per cui, di norma, si crea una versione del sito con frame ed una versione senza frame.

49 HTML: un esempio di utilizzo dei frame FRAME PER IL DOCUMENTO FRAME DI NAVIGAZIONE HOME Link1 Link2 Link3 CONTENUTO DELL HOME PAGE

50 HTML: suddivisione orizzontale con frame Oppure RIGA RIGA

51 HTML: tag per creare i frame Occorre utilizzare i TAG <FRAMESET> </FRAMESET> che servono per delimitare la definizione di tutta la struttura e i TAG <FRAME SRC= nome1.htm NAME="alias1"> <FRAME SRC= nome2.htm NAME="alias2"> che servono per definire il nome convenzionale delle righe o delle colonne

52 HTML: tag per creare i frame <frameset> è il tag iniziale (sostituisce a tutti gli effetti il tag <body>) e raccoglie la descrizione dei frame presenti nella pagina. Quando la lista dei frame termina, si inserisce il tag finale </frameset> Il tag <frame> serve alla definizione di ogni singolo frame e non necessita di chiusura dato che esso termina quando se ne definisce uno nuovo oppure quando si usa il tag </frameset> Per organizzare una pagina con frame occorre dapprima costruire e predisporre le pagine html che riempiranno i diversi frame e successivamente definire i frame all interno della pagina principale.

53 HTML: frame, struttura colonne <HTML> <HEAD> <TITLE>Pagina con Frame</TITLE> </HEAD> <FRAMESET COLS= 15%, 85%"> <frame src= primo.html" name="menu"> <frame src= secondo.html" name="mypage"> </FRAMESET> </HTML>

54 HTML: frame, struttura colonne

55 HTML: frame, struttura righe <HTML> <HEAD> <TITLE>Pagina con Frame</TITLE> </HEAD> <FRAMESET ROWS="25%, 75%"> <frame src= primo.html" name="menu"> <frame src= secondo.html" name="mypage"> </FRAMESET> </HTML>

56 HTML: frame, struttura righe

57 HTML: commenti Sintassi per un commento (ovunque nel file): <!--commento--> Utilizzati per segnalare delle sezioni di codice o altre informazioni utili a chiunque utilizzi la pagina HTML NON interpretate da BROWSER Utilizzare la scrittura indentata (soprattutto per programmi particolarmente lunghi)

58 Recenti evoluzioni di HTML: fogli di stile HTML tradizionale: i tag sono usati sia per specificare la struttura che l aspetto del documento. Problemi di manutenibilità, compatibilità, verifiche di correttezza, etc.. Separazione: HTML sempre più orientato alla struttura (tag come <font > destinati a cadere in disuso) Gli stylesheets specificano come una pagina deve apparire

59 HTML: CSS CSS (Cascading Style Sheet): File (o area del sorgente HTML) in cui viene definito l aspetto desiderato per gli elementi di una pagina Web. body { color: purple } body { background-color: #d8da3d; font-weight: normal } h1 { font-family: Helvetica, Geneva, Arial, sans-serif } a:link { color: blue } a:visited { color: purple }.titolo { color: white; background: red; }.sottotitolo { color: red; background: white; }

60 HTML: fogli di stile collegati <HTML> <HEAD> <TITLE>Usare i fogli di stile</title> <LINK REL="stylesheet" TYPE="text/css" HREF="stile.css"> </HEAD> <BODY>... </BODY> </HTML> Lo stesso file può essere richiamato da più pagine Web! Gli attributi del tag <LINK > REL: descrive il tipo di relazione tra il documento e il file collegato. Per i CSS due sono i valori possibili: stylesheet e alternate stylesheet. HREF: serve a definire l'url assoluto o relativo del foglio di stile. TYPE: identifica il tipo di dati da collegare. Per i CSS l'unico valore possibile è text/css. MEDIA: con questo attributo si identifica il supporto (schermo, stampa, etc) cui applicare un particolare foglio di stile. Unico di questi attributi ad essere opzionale.

61 HTML: fogli di stile incorporati Lo stile va comunque indicato all interno della sezione HEAD: <HTML> <HEAD> <TITLE>Usare i fogli di stile</title> <STYLE TYPE="text/css"> body { } </style> </HEAD> <BODY>... </BODY> </HTML> background: #FFFFCC;

62 HTML: fogli di stile in linea Ad esempio, si vuole formattare un titolo H1 in modo che abbia il testo di colore rosso e lo sfondo nero, scriveremo: <h1 style="color: red; background: black;">...</h1>

63 HTML: Quando usare i diversi tipi di CSS In base al meccanismo del cascading, si sfruttano le priorità: 1. In linea 2. Incorporati 3. Collegati Nota: l'uso estensivo di fogli in linea rischia di compromettere uno dei principali vantaggi dei CSS, ovvero avere pagine più leggere e facili da gestire. Il loro uso è ultimamente considerato deprecato anche dal W3C

64 HTML: stile_di_esempio.css /* Definisco le regole per il corpo del documento */ body { background: White; /* Prima dichiarazione: notate il punto e virgola finale!*/ font-family: Verdana, Geneva, Arial, Helvetica; /* Seconda dichiarazione*/ font-size: 12px; /* Terza dichiarazione */ } /* Titolo di primo livello */ h1 { color: black; } /* Paragrafo generico */ p { color: black; font: 12px/1.5 Georgia, "Times New Roman", serif; } #div1 { background: Silver; /* Sfondo color argento */ width: 300px; } #div2 { background: Silver; width: 300px; position: absolute; top: 400px; left: 400px; }

65 HTML: sintassi dei fogli di stile Come è fatta una regola:

66 HTML: CSS Selettore Class Per definire una classe si usa far precedere il nome da un semplice punto: <style type="text/css">.testorosso { font: 12px Arial, Helvetica, sans-serif; color: #FF0000; } </style> Per applicarla ad un elemento della pagina Web: <p class="testorosso"> In questo paragrafo parleremo di...</p>

67 HTML: CSS Selettore ID La sintassi per la definizione di un ID. Basta far precedere il nome dal simbolo di cancelletto: <style type="text/css"> #titolo {color: blue;} </style> Per applicarla ad un elemento della pagina Web: <h1 id="titolo"> Titolo dell articolo...</h1>

68 HTML: CSS Classe o ID? I selettori di tipo Class e ID funzionano nello stesso modo, ma con una sola fondamentale differenza: è ad essa che dovete fare riferimento per scegliere se usare una classe o un ID. In un documento (X)HTML l'attributo id è usato per identificare in modo univoco un elemento. In pratica, se assegno ad un paragrafo l'id "testorosso", non potrò più usare questo valore nel resto della pagina. Di conseguenza, l'id #testorosso dichiarato nel CSS trasformerà solo quel paragrafo specifico. Una singola classe, al contrario, può essere assegnata a più elementi, anche dello stesso tipo.

69 HTML: CSS Pseudo-classi Una pseudo-classe non definisce un elemento ma un particolare stato di quest'ultimo. In pratica imposta uno stile per un elemento al verificarsi di certe condizioni. La seguente regola vuol dire: i collegamenti ipertestuali (<A>) che non siano stati visitati (:link) avranno il colore blue. a:link {color: blue;} La seguente regola vuol dire: i collegamenti ipertestuali (<A>) che sono stati visitati (:visited) avranno il colore purple. a:visited { color: purple }

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 <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

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

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

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

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

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

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

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

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

- La formattazione con foglio di stile esterno: Come realizzare e collegare un file con codice di stile ad una pagina web.

- La formattazione con foglio di stile esterno: Come realizzare e collegare un file con codice di stile ad una pagina web. I fogli di stile. Argomenti trattati: - La formattazione con foglio di stile interno: Come dichiarare lo stile di una pagina web all'interno del suo codice. - Ereditarietà e selettori contestuali: Come

Dettagli

Navigare in Internet Laboratorio di approfondimento la creazione di siti web e/o blog. Marco Torciani. (Terza lezione) Unitre Pavia a.a.

Navigare in Internet Laboratorio di approfondimento la creazione di siti web e/o blog. Marco Torciani. (Terza lezione) Unitre Pavia a.a. Navigare in Internet Laboratorio di approfondimento la creazione di siti web e/o blog (Terza lezione) Unitre Pavia a.a. 2014-2015 27/01/2015 dott. 1 La struttura del testo in html L'HTML fornisce una serie

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

Login. Gestione contenuto. www.sitofaidate.it

Login. Gestione contenuto. www.sitofaidate.it www.sitofaidate.it Questa guida è stata scritta per utenti di basso/medio livello, guida pratica per chi vede per la prima volta l editor di testo jce i cui riferimenti delle icone sono visibili cliccando

Dettagli

Introduzione HTML. Maurizio Palesi. Multimedialità - Maurizio Palesi 1

Introduzione HTML. Maurizio Palesi. Multimedialità - Maurizio Palesi 1 Introduzione HTML Maurizio Palesi Multimedialità - Maurizio Palesi 1 Generalità sull HTML HTML: HyperText Markup Language (linguaggio di marcatura ipertestuale) E il linguaggio che permette di descrivere

Dettagli

LEZIONE 1 HTML. Come costruire il proprio sito con pochi strumenti e tanta creatività...

LEZIONE 1 HTML. Come costruire il proprio sito con pochi strumenti e tanta creatività... LEZIONE 1 HTML Come costruire il proprio sito con pochi strumenti e tanta creatività... La struttura di una pagina web intestazione Qui si dichiara il titolo del documento

Dettagli

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

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

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

caratteristiche del documento </head>

caratteristiche del documento </head> HTML: sintassi caratteristiche del documento documento 21 HTML: titolo del documento

Dettagli

Introduzione al Linguaggio HTML

Introduzione al Linguaggio HTML Introduzione al Linguaggio HTML 2 Cosa e l HTML HTML = Hyper Text Markup Language Serve per produrre documenti nel WWW (World Wide Web) Utilizza un insieme predefinito di marcatori (TAG) per definire la

Dettagli

(A) CONOSCENZA TERMINOLOGICA (B) CONOSCENZA E COMPETENZA (C) ESERCIZI DI COMPRENSIONE

(A) CONOSCENZA TERMINOLOGICA (B) CONOSCENZA E COMPETENZA (C) ESERCIZI DI COMPRENSIONE Dare una breve descrizione dei termini introdotti: (A) CONOSCENZA TERMINOLOGICA Foglio di stile interno Foglio di stile esterno Fogli di stile incorporati Fogli di stile inline (B) CONOSCENZA E COMPETENZA

Dettagli

Esercitazione n. 10: HTML e primo sito web

Esercitazione n. 10: HTML e primo sito web + Strumenti digitali per la comunicazione A.A 0/4 Esercitazione n. 0: HTML e primo sito web Scopo: Creare un semplice sito web con Kompozer. Il sito web è composto da una home page, e da altre due pagine

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

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

lo 2 2-1 - PERSONALIZZARE LA FINESTRA DI WORD 2000

lo 2 2-1 - PERSONALIZZARE LA FINESTRA DI WORD 2000 Capittol lo 2 Visualizzazione 2-1 - PERSONALIZZARE LA FINESTRA DI WORD 2000 Nel primo capitolo sono state analizzate le diverse componenti della finestra di Word 2000: barra del titolo, barra dei menu,

Dettagli

Excel. A cura di Luigi Labonia. e-mail: luigi.lab@libero.it

Excel. A cura di Luigi Labonia. e-mail: luigi.lab@libero.it Excel A cura di Luigi Labonia e-mail: luigi.lab@libero.it Introduzione Un foglio elettronico è un applicazione comunemente usata per bilanci, previsioni ed altri compiti tipici del campo amministrativo

Dettagli

WWW.ICTIME.ORG. NVU Manuale d uso. Cimini Simonelli Testa

WWW.ICTIME.ORG. NVU Manuale d uso. Cimini Simonelli Testa WWW.ICTIME.ORG NVU Manuale d uso Cimini Simonelli Testa Cecilia Cimini Angelo Simonelli Francesco Testa NVU Manuale d uso EDIZIONE Gennaio 2008 Questo manuale utilizza la Creative Commons License www.ictime.org

Dettagli

PULSANTI E PAGINE Sommario PULSANTI E PAGINE...1

PULSANTI E PAGINE Sommario PULSANTI E PAGINE...1 Pagina 1 Sommario...1 Apertura...2 Visualizzazioni...2 Elenco...2 Testo sul pulsante e altre informazioni...3 Comandi...3 Informazioni...4 Flow chart...5 Comandi...6 Pulsanti Principali e Pulsanti Dipendenti...6

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

APPUNTI DI HTML (SECONDA LEZIONE)

APPUNTI DI HTML (SECONDA LEZIONE) APPUNTI DI HTML (SECONDA LEZIONE) 1. TITOLI, PARAGRAFI, BLOCCHI DI TESTO E CONTENITORI. E utile scrivere il testo che vogliamo inserire nella nostra pagina html all interno di appositi tag. La pagina sarà

Dettagli

Cos è un word processor

Cos è un word processor Cos è un word processor è un programma di videoscrittura che consente anche di applicare formati diversi al testo e di eseguire operazioni di impaginazione: font diversi per il testo impaginazione dei

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

LEZIONE NO. 4: IMMAGINI E LINK: <IMG> <A HREF> 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

HTML 6. I frame. Sintassi di base. I frame e DOCTYPE FRAME. ...head... <FRAMESET lista_attributi> <FRAME SRC= URL lista_attributi>

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

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

Informatica A per Ingegneria Gestionale (2005-2006) Il linguaggio HTML. Elisa Quintarelli-Laura Mandelli. HyperText Markup Language

Informatica A per Ingegneria Gestionale (2005-2006) Il linguaggio HTML. Elisa Quintarelli-Laura Mandelli. HyperText Markup Language Informatica A per Ingegneria Gestionale (2005-2006) Il linguaggio HTML Elisa Quintarelli-Laura Mandelli 1 HyperText Markup Language Linguaggio di descrizione di testi secondo lo schema SGML (Standard Generalized

Dettagli

Sistema operativo. Sommario. Sistema operativo...1 Browser...1. Convenzioni adottate

Sistema operativo. Sommario. Sistema operativo...1 Browser...1. Convenzioni adottate MODULO BASE Quanto segue deve essere rispettato se si vuole che le immagini presentate nei vari moduli corrispondano, con buona probabilità, a quanto apparirà nello schermo del proprio computer nel momento

Dettagli

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

Per accedere clicca su START o AVVIO (in basso a sinistra sul tuo schermo), poi su PROGRAMMI, ACCESSORI e infine su BLOCCO NOTE.

Per accedere clicca su START o AVVIO (in basso a sinistra sul tuo schermo), poi su PROGRAMMI, ACCESSORI e infine su BLOCCO NOTE. Cos'è l'html HTML è una sigla che viene da una frase inglese che vuol dire: " Linguaggio di contrassegno di ipertesti" (Hyper Text Markup Language) L'Html non è un vero e proprio linguaggio di programmazione,

Dettagli

Collegamenti ipertestuali.

Collegamenti ipertestuali. Collegamenti ipertestuali. Argomenti trattati: - Premessa: Cosa sono e perchè sono l'essenza del Web. - : Come realizzare e personalizzare i vari tipi di link a pagine o risorse. - Il collegamento ipertestuale

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

XSL: extensible Stylesheet Language

XSL: extensible Stylesheet Language XSL: extensible Stylesheet Language XSL è un insieme di tre linguaggi che forniscono gli strumenti per l elaborazione e la presentazione di documenti XML in maniera molto flessibile. I tre linguaggi devono

Dettagli

Creare un Ipertesto. www.vincenzocalabro.it 1

Creare un Ipertesto. www.vincenzocalabro.it 1 Creare un Ipertesto www.vincenzocalabro.it 1 Obiettivi Il corso si prefigge di fornire: Le nozioni tecniche di base per creare un Ipertesto I consigli utili per predisporre il layout dei documenti L illustrazione

Dettagli

Olga Scotti. Esercizi. Create nella vostra directory HTML un albero di directory come quello della prossima slide (arancio = directory verde = file)

Olga Scotti. Esercizi. Create nella vostra directory HTML un albero di directory come quello della prossima slide (arancio = directory verde = file) Esercizi Create nella vostra directory HTML un albero di directory come quello della prossima slide (arancio = directory verde = file) Esercizi 12biz htdocs img Index.html Canzoni.html Galleria.htm guestbook

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

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

MS Word per la TESI. Barra degli strumenti. Rientri. Formattare un paragrafo. Cos è? Barra degli strumenti

MS Word per la TESI. Barra degli strumenti. Rientri. Formattare un paragrafo. Cos è? Barra degli strumenti MS Word per la TESI Barra degli strumenti Cos è? Barra degli strumenti Formattazione di un paragrafo Formattazione dei caratteri Gli stili Tabelle, figure, formule Intestazione e piè di pagina Indice e

Dettagli

www.filoweb.it STAMPA UNIONE DI WORD

www.filoweb.it STAMPA UNIONE DI WORD STAMPA UNIONE DI WORD Molte volte abbiamo bisogno di stampare più volte lo stesso documento cambiando solo alcuni dati. Potremmo farlo manualmente e perdere un sacco di tempo, oppure possiamo ricorrere

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

Come modificare la propria Home Page e gli elementi correlati

Come modificare la propria Home Page e gli elementi correlati Come modificare la propria Home Page e gli elementi correlati Versione del documento: 3.0 Ultimo aggiornamento: 2006-09-15 Riferimento: webmaster (webmaster.economia@unimi.it) La modifica delle informazioni

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

Capitolo 4 Pianificazione e Sviluppo di Web Part

Capitolo 4 Pianificazione e Sviluppo di Web Part Capitolo 4 Pianificazione e Sviluppo di Web Part Questo capitolo mostra come usare Microsoft Office XP Developer per personalizzare Microsoft SharePoint Portal Server 2001. Spiega come creare, aggiungere,

Dettagli

Un ripasso di aritmetica: Rappresentazione binaria - operazioni. riporti

Un ripasso di aritmetica: Rappresentazione binaria - operazioni. riporti Un ripasso di aritmetica: Rappresentazione binaria - operazioni A queste rappresentazioni si possono applicare le operazioni aritmetiche: riporti 1 1 0 + 1 0 = 1 0 0 24 Un ripasso di aritmetica: Rappresentazione

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

Figura 54. Visualizza anteprima nel browser

Figura 54. Visualizza anteprima nel browser Per vedere come apparirà il nostro lavoro sul browser, è possibile visualizzarne l anteprima facendo clic sulla scheda Anteprima accanto alla scheda HTML, in basso al foglio. Se la scheda Anteprima non

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

On-line Corsi d Informatica sul web

On-line Corsi d Informatica sul web On-line Corsi d Informatica sul web Corso base di FrontPage Università degli Studi della Repubblica di San Marino Capitolo1 CREARE UN NUOVO SITO INTERNET Aprire Microsoft FrontPage facendo clic su Start/Avvio

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

jt - joetex - percorsi didattici

jt - joetex - percorsi didattici jt - joetex - percorsi didattici Corso dreamweaver lezione 1 Sommario 1. Creare un sito in locale 2. creare la prima pagina Creare un sito in locale Un sito va creato tutto all'interno di un'unica cartella.

Dettagli

PowerPoint 2007 Le funzioni

PowerPoint 2007 Le funzioni PowerPoint 2007 Le funzioni Introduzione Cos è un ipertesto L' ipertesto è un testo organizzato in link, o collegamenti ad altre parti del testo e/o altri testi, in modo da consentire all utente di scegliere

Dettagli

Microsoft Word. Nozioni di base

Microsoft Word. Nozioni di base Microsoft Word Nozioni di base FORMATTARE UN DOCUMENTO Gli stili Determinano l aspetto dei vari elementi di testo di un documento Consistono in una serie di opzioni (predefinite o personalizzate) salvate

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

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

Come costruire una presentazione. PowerPoint 1. ! PowerPoint permette la realizzazione di presentazioni video ipertestuali, animate e multimediali

Come costruire una presentazione. PowerPoint 1. ! PowerPoint permette la realizzazione di presentazioni video ipertestuali, animate e multimediali PowerPoint Come costruire una presentazione PowerPoint 1 Introduzione! PowerPoint è uno degli strumenti presenti nella suite Office di Microsoft! PowerPoint permette la realizzazione di presentazioni video

Dettagli

HTML+XML= XHTML. Che cos è l XHTML

HTML+XML= XHTML. Che cos è l XHTML HTML+XML= XHTML Il ritorno al futuro del WEB A cura di Barbara Lotti Che cos è l XHTML Nel gennaio del 2000 il W3C ha rilasciato, anziché una nuova versione, una riformulazione dell HTML come applicazione

Dettagli

HTML (Hyper Text Markup Language)

HTML (Hyper Text Markup Language) HTML (Hyper Text Markup Language) E un linguaggio di scrittura di pagine per Internet (pagine web) nato nel 1992. E un linguaggio di marcatura ipertestuale Non è un linguaggio di programmazione, in quanto

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

Database 1 biblioteca universitaria. Testo del quesito

Database 1 biblioteca universitaria. Testo del quesito Database 1 biblioteca universitaria Testo del quesito Una biblioteca universitaria acquista testi didattici su indicazione dei professori e cura il prestito dei testi agli studenti. La biblioteca vuole

Dettagli

CREAZIONE E MODIFICA DELLA PAGINA WEB DELLA BIBLIOTECA Andare nel modulo Biblioteche in alto a sinistra. Digitare nel campo Nome Biblioteca la

CREAZIONE E MODIFICA DELLA PAGINA WEB DELLA BIBLIOTECA Andare nel modulo Biblioteche in alto a sinistra. Digitare nel campo Nome Biblioteca la CREAZIONE E MODIFICA DELLA PAGINA WEB DELLA BIBLIOTECA Andare nel modulo Biblioteche in alto a sinistra. Digitare nel campo Nome Biblioteca la denominazione del Comune della Biblioteca (basta anche solo

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

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

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

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

Guida all uso di Java Diagrammi ER

Guida all uso di Java Diagrammi ER Guida all uso di Java Diagrammi ER Ver. 1.1 Alessandro Ballini 16/5/2004 Questa guida ha lo scopo di mostrare gli aspetti fondamentali dell utilizzo dell applicazione Java Diagrammi ER. Inizieremo con

Dettagli

Modulo 1: Fondamenti per scrivere una pagina web

Modulo 1: Fondamenti per scrivere una pagina web Modulo 1: Fondamenti per scrivere una pagina web Indice del modulo Introduzione al linguaggio di marcatura Contenuto, struttura, presentazione Elementi e attributi Proviamo a scrivere una pagina HTML Aggiungere

Dettagli

NAVIGAORA HOTSPOT. Manuale utente per la configurazione

NAVIGAORA HOTSPOT. Manuale utente per la configurazione NAVIGAORA HOTSPOT Manuale utente per la configurazione NAVIGAORA Hotspot è l innovativo servizio che offre ai suoi clienti accesso ad Internet gratuito, in modo semplice e veloce, grazie al collegamento

Dettagli

I link e l'ipertestualità

I link e l'ipertestualità I link e l'ipertestualità I link sono "il ponte" che consente di passare da un documento all altro. In quanto tali, i link sono formati da due componenti: il contenuto che "nasconde" il collegamento (può

Dettagli

Manuale per i redattori del sito web OttoInforma

Manuale per i redattori del sito web OttoInforma Manuale per i redattori del sito web OttoInforma Contenuti 1. Login 2. Creare un nuovo articolo 3. Pubblicare l articolo 4. Salvare l articolo in bozza 5. Le categorie 6. Modificare un articolo 7. Modificare

Dettagli

GUIDA RAPIDA PER LA COMPILAZIONE DELLA SCHEDA CCNL GUIDA RAPIDA PER LA COMPILAZIONE DELLA SCHEDA CCNL

GUIDA RAPIDA PER LA COMPILAZIONE DELLA SCHEDA CCNL GUIDA RAPIDA PER LA COMPILAZIONE DELLA SCHEDA CCNL GUIDA RAPIDA BOZZA 23/07/2008 INDICE 1. PERCHÉ UNA NUOVA VERSIONE DEI MODULI DI RACCOLTA DATI... 3 2. INDICAZIONI GENERALI... 4 2.1. Non modificare la struttura dei fogli di lavoro... 4 2.2. Cosa significano

Dettagli

LA CORRISPONDENZA COMMERCIALE

LA CORRISPONDENZA COMMERCIALE LA CORRISPONDENZA COMMERCIALE GLI ELEMENTI ESSENZIALI DELLA LETTERA COMMERCIALE Intestazione Individua il nome e il cognome o la ragione sociale di chi scrive; contiene inoltre l indirizzo e i recapiti

Dettagli

MANUALE PER L UTILIZZO DELLA FUNZIONE EVENTI Rel.1.2 del 29 gennaio 2004

MANUALE PER L UTILIZZO DELLA FUNZIONE EVENTI Rel.1.2 del 29 gennaio 2004 MANUALE PER L UTILIZZO DELLA FUNZIONE EVENTI Rel.1.2 del 29 gennaio 2004 PRELIMINARE - Avete digitato la password che Vi è stata attribuita e siete entrati nell area riservata all AMMINISTRAZIONE del Vostro

Dettagli

Personalizza. Page 1 of 33

Personalizza. Page 1 of 33 Personalizza Aprendo la scheda Personalizza, puoi aggiungere, riposizionare e regolare la grandezza del testo, inserire immagini e forme, creare una stampa unione e molto altro. Page 1 of 33 Clicca su

Dettagli

Costruzione del layout in gino cms

Costruzione del layout in gino cms Costruzione del layout in gino cms Autore: Marco Guidotti - marco.guidotti(at)otto.to.it Versione: 1.0 Data: 2013-06-17 Layout Nell area amministrativa di gino l applicazione Layout permette di gestire

Dettagli

2.2.2.1 Identificare le diverse parti di una finestra: barra del titolo, barra dei menu, barra degli strumenti, barra di stato, barra di scorrimento.

2.2.2.1 Identificare le diverse parti di una finestra: barra del titolo, barra dei menu, barra degli strumenti, barra di stato, barra di scorrimento. Uso del computer e gestione dei file 57 2.2.2.1 Identificare le diverse parti di una finestra: barra del titolo, barra dei menu, barra degli strumenti, barra di stato, barra di scorrimento. All interno

Dettagli

HTML il linguaggio per creare le pagine per il web

HTML il linguaggio per creare le pagine per il web HTML il linguaggio per creare le pagine per il web Parte I: elementi di base World Wide Web Si basa sul protocollo HTTP ed è la vera novità degli anni 90 Sviluppato presso il CERN di Ginevra è il più potente

Dettagli

CMS MUSEO&WEB. Mappe grafiche. Andrea Tempera (OTEBAC) 12 aprile 2010

CMS MUSEO&WEB. Mappe grafiche. Andrea Tempera (OTEBAC) 12 aprile 2010 CMS MUSEO&WEB Mappe grafiche Andrea Tempera (OTEBAC) 12 aprile 2010 Introduzione Grazie ad appositi tag HTML possiamo associare molteplici collegamenti a differenti zone di un'unica immagine; un'immagine

Dettagli

Word è un elaboratore di testi in grado di combinare il testo con immagini, fogli di lavoro e

Word è un elaboratore di testi in grado di combinare il testo con immagini, fogli di lavoro e Word è un elaboratore di testi in grado di combinare il testo con immagini, fogli di lavoro e grafici, tutto nello stesso file di documento. Durante il lavoro testo e illustrazioni appaiono sullo schermo

Dettagli

Capitolo III Esercitazione n. 3: Funzionalità base di Word parte seconda

Capitolo III Esercitazione n. 3: Funzionalità base di Word parte seconda Capitolo III Esercitazione n. 3: Funzionalità base di Word parte seconda Scopo: formattare un documento con Microsoft Word 2007. PAGINA LASCIATA BIANCA INTENZIONALMENTE A Convertire un documento da formato

Dettagli

UTILIZZO DEI CSS. categoria e lente possiamo aggregare le istruzioni inserite ed avere infondo alla colonna stessa un anteprima.

UTILIZZO DEI CSS. categoria e lente possiamo aggregare le istruzioni inserite ed avere infondo alla colonna stessa un anteprima. UTILIZZO DEI CSS FOGLI STILE Il CSS consente di associare regole stilistiche agli elementi del codice HTML come o . Queste regole definiscono l aspetto rappresentativo degli elementi HTML a cui

Dettagli

Capitolo 3. L applicazione Java Diagrammi ER. 3.1 La finestra iniziale, il menu e la barra pulsanti

Capitolo 3. L applicazione Java Diagrammi ER. 3.1 La finestra iniziale, il menu e la barra pulsanti Capitolo 3 L applicazione Java Diagrammi ER Dopo le fasi di analisi, progettazione ed implementazione il software è stato compilato ed ora è pronto all uso; in questo capitolo mostreremo passo passo tutta

Dettagli

Scuola Digitale. Manuale utente. Copyright 2014, Axios Italia

Scuola Digitale. Manuale utente. Copyright 2014, Axios Italia Scuola Digitale Manuale utente Copyright 2014, Axios Italia 1 SOMMARIO SOMMARIO... 2 Accesso al pannello di controllo di Scuola Digitale... 3 Amministrazione trasparente... 4 Premessa... 4 Codice HTML

Dettagli

Appunti sugli Elaboratori di Testo. Introduzione. D. Gubiani. 19 Luglio 2005

Appunti sugli Elaboratori di Testo. Introduzione. D. Gubiani. 19 Luglio 2005 Appunti sugli Elaboratori di Testo D. Gubiani Università degli Studi G.D Annunzio di Chieti-Pescara 19 Luglio 2005 1 Cos è un elaboratore di testo? 2 3 Cos è un elaboratore di testo? Cos è un elaboratore

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

Compito di laboratorio di informatica HTML

Compito di laboratorio di informatica HTML Compito di laboratorio di informatica HTML Creare un sito che tratti un argomento a vostra scelta, cercando i testi e le immagini su Internet. Il sito deve prevedere una organizzazione a cartelle che separi

Dettagli

A destra è delimitata dalla barra di scorrimento verticale, mentre in basso troviamo una riga complessa.

A destra è delimitata dalla barra di scorrimento verticale, mentre in basso troviamo una riga complessa. La finestra di Excel è molto complessa e al primo posto avvio potrebbe disorientare l utente. Analizziamone i componenti dall alto verso il basso. La prima barra è la barra del titolo, dove troviamo indicato

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

Guida Joomla. di: Alessandro Rossi, Flavio Copes

Guida Joomla. di: Alessandro Rossi, Flavio Copes Guida Joomla di: Alessandro Rossi, Flavio Copes Grafica e template 1. 15. La grafica e i template Personalizzare l'aspetto del sito aggiungendo nuovi template e customizzandoli 2. 16. Personalizzare il

Dettagli

Settaggio impostazioni tema. Cliccando nuovamente su aspetto e poi su personalizza si avrà modo di configurare la struttura dinamica della template.

Settaggio impostazioni tema. Cliccando nuovamente su aspetto e poi su personalizza si avrà modo di configurare la struttura dinamica della template. I TEMI PREDEFINITI (TEMPLATE) Scelta del tema I temi predefiniti di wordpress sono la base di un sito che usa un utente che per ragioni pratiche o per incapacità non può creare un sito usando solo codice

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

Alla scoperta della nuova interfaccia di Office 2010

Alla scoperta della nuova interfaccia di Office 2010 Alla scoperta della nuova interfaccia di Office 2010 Una delle novità più eclatanti della versione 2007 era la nuova interfaccia con la barra multifunzione. Office 2010 mantiene questa filosofia di interfaccia

Dettagli