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 & HTML
Cosa e l HTML 4 HTML = Hyper Text Markup Language Serve per produrre documenti nel WWW (World Wide Web) Documento in formato testuale Utilizza un insieme predefinito di marcatori (TAG) per definire la formattazione e il layout del testo in esso contenuto <tag> testo </tag> Come si scrive un documento Editor di testo (notepad etc..) Editor WYSIWYG ( Frontpage -Dreamweaver) Da la possibilità di definire dei collegamenti tra pagine differenti
HTML e collegamenti Ipertestuali 5 Il Web è un sistema di informazioni ipertestuali (collegamenti tra documenti mediante hyperlinks). L HTML permette in maniera semplice di definire collegamenti tra documenti html html Segui questo link
Struttura minima del documento 6 <HTML> <HEAD> <TITLE>Il titolo del documento</title> </HEAD> <BODY> Contenuto della pagina </BODY> </HTML>
Una pagina vuota, per iniziare 7 Aprire notepad e scrivere <HTML> <HEAD> </HEAD> <TITLE>La mia pagina</title> <BODY> Pagina Bianca</BODY> </HTML> Salvare il documento come pagina.html Aprire il documento con Internet Explorer o Firefox
Il contenuto della pagina 8 Modificare la pagina in modo da creare una semplice etichetta che raccoglie i dati anagrafici dello studente Corso di Informatica Grafica Facoltà Edile-Architettura Nome Studente: proprio nome Matricola: 1234556678 AA iscrizione: gg/mm/aaaa
Caratteri speciali 9 Alcuni caratteri speciali devono essere rappresentati utilizzando delle costanti così definite: à è é < < > > & spazio à è é & Per andare a capo si utilizza il tag <br>
Intestazioni 10 <h1>un titolo di primo livello</h1> Titoli di diverso livello (fino a 6) <h2>un titolo di secondo livello</h2> <h3>un titolo di terzo livello</h3> <h2>un altro titolo di secondo livello</h2> Aggiungiamo una intestazione alla pagina Titolo in grande: Home Page di Sottotitoli: Presentazione Lavoro e studio Hobby & interessi Download Contatti
Paragrafi 11 <p>questo è un primo paragrafo di testo</p> <p>questo è un secondo paragrafo di testo un po più lungo del primo</p> Nell area di Presentazione aggiungiamo una nostra descrizione. Per ogni riga utilizziamo un paragrafo
Enfasi e grassetto 12 Enfasi Questo e` molto <em>interessante</em>! Italico: Questo e` molto <i>interessante</i>! Grassetto: Questo e` molto <b>interessante</b>! Modifichiamo il testo evidenziandone alcune parti interessanti (il proprio nome, l università etc)
Font: forme del testo 13 Tag font per definire dimensione e colore del testo <font color= red size=3> rosso </font> <font color= green size=5> verde </font> Colori: blue, green, yellow, red, magenta I colori sono codificati con un numero di 6 cifre esadecimali #ffff00 corrisponde al giallo, #ff0000 corrisponde al rosso L attributo Face definisce il font <font face= Courier New >Il mio testo</font> Per una lista completa dei colori in html file: colori HTML.pdf Modificare la pagina in modo che il sottotitolo Lavoro e studio sia rosso; cambiare anche il colore degli altri sottotitoli secondo il proprio gusto
Sfondi e colori della pagina 14 Attributi del tag BODY Immagine di sfondo <BODY BACKGROUND="URL"> Colore di sfondo <BODY BGCOLOR="******"> Colore del testo <BODY TEXT="******"> Modifichiamo lo sfondo della pagine con un colore a scelta (per esempio lightgray)
Come andare a capo e introdurre 15 spazi Gli spazi e gli a capo nel file non servono Oltre che con <p> è possibile andare a capo con il tag <br> Per introdurre spazi si usa il carattere speciale Add e con accento
Liste numerate e non 16 Elenchi non numerate <ul> <li>il primo elemento della lista</li> <li>il secondo elemento</li> <li>il terzo elemento</li> </ul> Elenchi numerate <ol> <li>il primo elemento della lista</li> <li>il secondo elemento</li> <li>il terzo elemento</li> </ol> Nella sezione Lavoro e Studio aggiungere i dettagli del proprio curricolo scolastico e universitario Evidenziare di rosso le date rilevanti
Per Casa 17 Cercare con un motore di ricerca la Ricetta della Pasta e Fagioli Creare una pagina che contiene le seguenti sezioni: Sezione ingredienti contenente la lista degli ingredienti su un foglio La lista deve essere rappresentata a colori alternati (es grigio/verde) Sezione procedimento Contiene la descrizione del procedimento da seguire Ogni fase deve essere descritta su paragrafi separati Sezione vini Contiene la lista dei vini consigliati
Le immagini 18 Immagini riconosciute dai Browser: GIF,JPEG,PNG <img src="micio.jpg"/> <img src="micio.jpg" width="278" height="278" alt="il mio gatto preferito"/> <img src="micio.jpg" width="150" height="278" alt="il mio gatto preferito"/> <img src="micio.jpg" width="150" height="150" alt="il mio gatto preferito"/> Aggiungiamo alla nostra pagina una nostra foto
I collegamenti (link) 19 Per i collegamenti si usa il tag <a> con attributo href il cui valore è l URL della pagina che vogliamo collegare. <a href="pagina.html">pagina collegata</a> L attributo TARGET indica se aprire o meno il link su una nuova finestra. Valori ammessi:_blank, _self, _parent, _top Il testo tra <a> e </a> è il testo del collegamento che sarà visualizzato (in genere) in blu e sottolineato dai browser. Link assoluti (protocollo + indirizzo + percorso + file) <a href="http://www.w3c.org/docs/spec.html">w3c</a> e relativi (percorso + file relativo alla pagina in cui si trova): <a href= esempio1.html">il primo esempio</a> Aggiungiamo un link alla guida sui tag HTML e un altro per i colori; usiamo una lista per rappresentare i vari collegamenti