Internet e HTML Diffusione di informazioni mediante la rete Internet.

Slides:



Advertisements
Presentazioni simili
Modulo 2 Scatto di una foto digitale, invio di questa mediante posta elettronica e inserimento dell’immagine in una pagina web.
Advertisements

Introduzione all’HTML
Il linguaggio HTML I documenti HTML vanno racchiusi dentro una coppia di TAG (marcatori): apertura e chiusura. ……………………………… …………………………… ……………….
Lezione 1 Primi passi in HtML SCRIVERE TESTI di Sergio Capone
HtML Premessa introduttiva al laboratorio Sergio Capone.
HYPER TEXT MARK-UP LANGUAGE
Internet: la rete delle reti
HTML Hyper Text Mark-Up Language. HTML Hyper Text Mark-Up Language Linguaggio di marcatura per ipertesti E un linguaggio di formattazione usato per descrivere.
HTML Hyper Text Mark-Up Language. HTML Hyper Text Mark-Up Language Linguaggio di marcatura per ipertesti E un linguaggio di formattazione usato per descrivere.
HTML LE PAGINE WEB COME SI SA, INTERNET E UN SISTEMA MONDIALE DI RETI DI COMPUTER CHE PERMETTE DI UTILIZZARE UN SISTEMA DI CONNESSIONE TRA COMPUTER.
HTML LE PAGINE WEB COME SI SA, INTERNET E UN SISTEMA MONDIALE DI RETI DI COMPUTER CHE PERMETTE DI UTILIZZARE UN SISTEMA DI CONNESSIONE TRA COMPUTER.
Il linguaggio HTML.
1 Minicorso sull HTML A cura di Leo Izzo H T M L Tempo richiesto 4 ore.
1 Scoprire e capire HTML Creare semplici pagine WEB Maria Laura Alessandroni.
HTML e CSS Concetti base Comunicazione Multimediale.
1 Università della Tuscia - Facoltà di Scienze Politiche.Informatica 2 - a.a Prof. Francesco Donini Richiami sul modello Client/Server (per.
LHTML è un linguaggio per computer comprensibile da parte dei browser Web Le pagine Web sono scritte in HTML LHTML è necessario sul Web per formattare.
Architettura del World Wide Web
Esercitazioni di Informatica Grafica per Edile - Architettura
Labbreviazione: WWW letteralmente: World = mondo Wide = esteso Web = rete Può essere tradotta come: Rete estesa in tutto il mondo.
Internet Explorer Il browser.
CORSO DI INFORMATICA LAUREA TRIENNALE-COMUNICAZIONE & DAMS
Un’introduzione a HTML (I)
RISORSE WEB Internet Per un uso consapevole delle risorse della Rete
HTML HyperText Markup Language
Corso di PHP.
Sommario Allineamento ( ) Immagini ( ) Link ( ). Allineamenti Oltre a posso usare per allineare testo ed immagini un altro tag: align = center o left.
HyperText Markup Language 17-23/6/08 Informatica applicata B Cristina Bosco.
Obiettivi dellinterfaccia Web Una buona interfaccia web deve assolvere a diverse funzioni: far percepire i contenuti permettere di individuare.
WORLD WIDE WEB Il World Wide Web (Web, WWW o W3) è un'architettura software utilizzata per fornire l'accesso e la navigazione ad un insieme molto vasto.
Classe 5 A Pr1 Il Sito Web Internet è la rete mondiale grazie alla quale possiamo comunicare via computer con ogni parte del globo. Di Internet fa parte.
2a Lezione: Martedì 6 Febbraio – HTML Comandi base
Progettazione multimediale
Test Reti Informatiche A cura di Gaetano Vergara Se clicchi sulla risposta GIUSTA passi alla domanda successiva Se clicchi sulla risposta ERRATA passi.
V.1 Progettazione Multimediale – 1 Progettazione multimediale HTML e i tag di base.
Paragrafi e allineamenti
HTML per iniziare Gianpaolo Cecere. 29 aprile Sintassi HTML I tag HTML sono direttive per i browser I tag sono contenitori per porzioni di documento.
Applicazioni Web HTTP, HTML e CSS Elaborato da Gianluca Lauteri e Daniele Filannino.
Creare pagine web Xhtlm. Struttura di una pagina.
Il linguaggio HTML Le pagine web sono file di testo scritte utilizzando il linguaggio HTML. I documenti HTML vanno racchiusi dentro una coppia di TAG.
Il World Wide Web Lidea innovativa del WWW è che esso combina tre importanti e ben definite tecnologie informatiche: Documenti di tipo Ipertesto. Sono.
BIOINFO3 - Lezione 101 GLI IPERTESTI Una delle innovazioni introdotte da HTML e dal WWW in generale, rispetto ad un testo normale è sicuramente la possibilità
Il Linguaggio HTML “Profe, ma io a casa l’HTML non ce l’ho!“
Il linguaggio HTML Antonella Schiavon – settembre 2008 rev. 1 – aprile 2011.
HTML HyperText Markup Language Linguaggio per marcare un’Ipertesto
Hyper-Text Mark-Up Language
HTML Gli elementi principali di una pagina Web. Titolo: 2  Attribuisce un titolo alla pagina  Il titolo è visibile nella “barra del titolo” del browser.
Corso Web CSV – Andiamo on-line 1 Andiamo on-line Corso di formazione Elementi base per la costruzione di un sito web.
1° Meeting Clienti myDonor® - Firenze 5 ottobre 2012 La comunicazione HTML da myDonor® da myDonor® Daniela Loreti Matteo calzolari
HTML I tag HTML (parte 1). I tag HTML  I comandi che il browser interpreta  Etichette per marcare l’inizio e la fine di un elemento HTML  Formato e.
CORSO Di WEB DESIGN prof. Leonardo Moriello
Creazione di pagine per Internet Brevi note a cura di Emanuele Lana
Linguaggio HTML & realizzazione di pagine su Web server Caratteristiche di un sito Web: fasi di realizzazione e linguaggio HTML.
Tag TABLE. Oltre ad avere la funzione di rappresentare dati di ogni genere allineati in righe e colonne, le tabelle in HTML si utilizzano per costruire.
GUIDA BASE PER L’HTML Indice:
HTML 4.01 Apogeo. I tag di base Capitolo 1 I tag SintassiEsempi:
HTML HTML e il web.
HTML e CSS C. Gena, C. Picardi, J. Sproston HTML e CSS.
Tag IMG Per inserire un'immagine in una pagina HTML basta inserire il tag: ; questo tag non ha bisogno di chiusura. Affinché l'immagine venga visualizzata.
PROGETTO… Internet Providers, registrazione del dominio Costruire una home page … e renderla visibile sul Web.
Fondamenti di Markup Languages: Richiami di HTML © 2005 Stefano Clemente Stefano Clemente
ELABORAZIONE TESTI MICROSOFT WORD EM 09.
Master in Telemedicina HTML per iniziare Maria Simi, dicembre 2004 [da un tutorial di Rigget]
Introduzione al linguaggio HTML
Creazione di pagine per Internet Brevi note a cura di Emanuele Lana
HTML HTML Sistema di contrassegno riconosciuto dai Browser come (Firefox, Chrome, Internet Explorer) Hyper Text Markup Language.
Il linguaggio HTML Introduzione Formattazione Multimedialità.
HTML. Pagina HTML Struttura Titolo Hello World! Paragrafo apre il documento html contiene informazioni come il titolo della pagina, i meta tags, la codifica.
HYPER TEXT MARK-UP LANGUAGE
Hyper Text Mark-Up Language
Transcript della presentazione:

Internet e HTML Diffusione di informazioni mediante la rete Internet

Navigazione: il modello client - server

Client computer collegato a Internet in modo permanente o temporaneo. Hardware e software di qualsiasi tipo. Sul client gira un software client http (browser) (es. Internet Explorer, Mozilla Firefox …)

Server Computer sempre collegato a Internet. Hardware e software di qualsiasi tipo. Sul server gira un software server http (es. Microsoft IIS, Apache …)

Richiesta del client Client: Richiede un servizio specificando un URL Es. Server: Se il documento è presente viene inviato al client. Si tratta di un documento di testo. Se il server non esiste o non risponde o sul server non è presente la cartella o il file viene inviato un messaggio di errore

Visualizzazione Client: Riceve il documento ed inizia a visualizzarlo interpretando alcuni comandi di formattazione testo Se nel file html è presente un riferimento ad un’immagine o a un file multimediale, il client richiede al server di inviare il file (potrebbe essere un diverso server) Riceve l’immagine e la visualizza nella posizione specificata o gestisce il file multimediale Dopo varie interazioni con il server la pagina è completa

Navigazione L’utente può cliccare su una zona sensibile del documento interattivo (testo o immagine) e richiedere a un server l’invio di un nuovo documento html.

HTML HYPER TEXT MARK-UP LANGUAGE

HTML Hyper Text Mark-Up Language Linguaggio di marcatura per ipertesti E’ un linguaggio di formattazione usato per descrivere i documenti ipertestuali disponibili nel World Wide Web I siti web sono scritti in HTML Il codice viene letto ed elaborato dal browser, il quale genera la pagina che viene visualizzata sullo schermo

Cosa sono le pagine HTML Ogni volta che navighiamo in rete visualizziamo pagine HTML Che contengono testo, immagini, suoni ecc. E sono collegate fra loro in modo da formare un ipertesto

Un esempio di pagina HTML <html> Esempio Esempio Buongiorno Buongiorno Questo è un documento HTML Questo è un documento HTML a cura di a cura di clicca qui clicca qui </html>

Risultato

Alcuni tag I tag sono racchiusi fra parentesi angolari Quasi sempre esiste un tag di apertura a cui ne corrisponde uno di chiusura... Racchiude l’intero documento HTML... Racchiude l’intero documento HTML... Racchiude l’intestazione del documento HTML... Racchiude l’intestazione del documento HTML... Racchiude il corpo del documento HTML... Racchiude il corpo del documento HTML I tag funzionano come comandi per il browser; ce ne sono per indicare il testo in grassetto, per creare elenchi, per mostrare un link e altro ancora.

HTML file di testo Un file HTML è un file di testo quindi potrebbe essere generato da un qualunque editor di testo (es. blocconote) Fra gli editor testuali consigliamo Notepad++

Editor wysiwyg Esistono vari editor ad alto livello che facilitano il compito di realizzazione di pagine web WYSIWYG (What You See Is What You Get) (Ciò che vedi è ciò che ottieni) … quasi … Gli Editor avanzati evitano all’utente di conoscere e maneggiare i tag, che restano dietro le quinte.

Dreamweaver Dreamweaver è un programma per la realizzazione di siti web prodotto da Macromedia (dal 2005 società di proprietà di Adobe Systems) è tra i programmi più utilizzati nel suo campo Il programma utilizza un'interfaccia visuale (definito anche editor visuale) del tipo WYSIWYG (What You See Is What You Get): con esso si possono realizzare pagine web, scrivendo semplicemente del testo, inserendo immagini e collegamenti ipertestuali, senza dover conoscere il linguaggio HTML. Dreamweaver è utile anche per i programmatori che preferiscono scrivere autonomamente il codice: il programma aiuta l'utente dando suggerimenti mentre vengono scritti i tag e gli attributi (ad esempio, scrivendo le prime due lettere di tag e attributi viene proposta automaticamente una lista tra cui scegliere, una funzione molto simile all'IntelliSense di Microsoft).

tag tag Viene visualizzato dal browser all’apertura della pagina stessa Nell’intestazione si inserisce il tag Nell’intestazione si inserisce il tag Esempio<head> Titolo della pagina Titolo della pagina </head>

Formattazione del testo Il testo va inserito nel tag Il testo va inserito nel tag 6 tipi di titoli (variano le dimensioni) Esempi Titolo di grandezza massima Titolo di grandezza massima Titolo piu’ piccolo Titolo piu’ piccolo Titolo di dimensione minima Titolo di dimensione minima Paragrafi: per delimitare un paragrafo si utilizza il tag Paragrafi: per delimitare un paragrafo si utilizza il tag Al termine di un paragrafo il testo va a capo Questo e’ un paragrafo Questo e’ un paragrafo

Suddivisione del documento in blocchi Il tag permette di creare un blocco che può contenere testo immagini In un blocco è possibile definire l’allineamento con l’attributo align Esempio: Testo Testo Testo sottolineato … Testo sottolineato … Testo in corsivo … Testo in corsivo … Testo in grassetto … Testo in grassetto … Inserimento di riga orizzontale Inserimento di riga orizzontale

Elenchi ordinati <ol> elemento 1 elemento 1 elemento 2 elemento 2 elemento 3 elemento 3 </ol>

Elenchi non ordinati <ul> elemento 1 elemento 1 elemento 2 elemento 2 elemento 3 elemento 3 </ul>

Immagini Le immagini sono esterne alle pagine html Nel codice html va inserito un riferimento al file che contiene l’immagine Attenzione a non utilizzare percorsi assoluti per fari riferimento alle immagini Utilizzare percorsi relativi Esempio

Attributi del tag Attributi del tag width e height definiscono larghezza e altezza dell’immagine alt definisce il testo alternativo per chi non visualizza l’immagine align definisce l’allineamento dell’immagine rispetto al testo (right, keft, top, bottom, middle) Un esempio

I link Per collegare le pagine fra loro si utilizzano i link che permettono di costruire la struttura ipertestuale del sito Per i link si utilizza il tag con l’attributo href Link a una pagina sullo stesso sito collegamento a un’altra pagina del sito collegamento a un’altra pagina del sito collegamento a un altro sito collegamento a un altro sito

Immagine come link Il tag può essere utilizzato all’interno del tag per fare in modo che una immagine diventi un link per una nuova pagina

Tabelle Le tabelle sono definite dal tag Le tabelle sono definite dal tag Il tag contiene righe di celle, definite dal tag Il tag contiene righe di celle, definite dal tag Ogni tag contiene celle di dati, definite dal tag Ogni tag contiene celle di dati, definite dal tag Le celle di titolo sono definite dal tag Le celle di titolo sono definite dal tag Le righe procedono dall’alto verso il basso Le celle procedono da sinistra a destra Ogni cella di dati può contenere tutto ciò che si vuole collegamenti, immagini, liste e anche altre tabelle

Un esempio di tabella <tr> cella 1 riga 1 cella 1 riga 1 cella 2 riga 1 cella 2 riga 1 </tr><tr> cella 1 riga 2 cella 1 riga 2 cella 2 riga 2 cella 2 riga 2 </tr></table>

Direttive per la realizzazione del sito Creare una cartella che conterrà tutti e soli i file del nostro sito (es. cartella sito sotto a documenti) Creare un documento e assegnare subito il titolo, il colore del testo e dello sfondo (file-proprietà) Salvare il file nella cartella con un nome significativo (tutto minuscolo, niente spazi e nessun carattere particolare) (es. lamiapagina.html) Il nome della pagina iniziale del sito è opportuno che sia index.html