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

Dimensione: px

Iniziare la visualizzazioe della pagina:

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

Fabiana Quarta
8 anni fa
Visualizzazioni

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

2 Scopo della esercitazione 2 Conoscere i principali tag HTML Realizzare una propria Home Page utilizzando alcuni semplici tag HTML

3 3 Architettura & HTML

4 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

e il layout del testo in esso contenuto <tag> testo </tag> Come si scrive un documento Editor di testo

5 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

6 Struttura minima del documento 6 <HTML> <HEAD> <TITLE>Il titolo del documento</title> </HEAD> <BODY> Contenuto della pagina </BODY> </HTML>

7 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

Pagina Bianca</BODY> </HTML> Salvare il documento come

8 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: AA iscrizione: gg/mm/aaaa

studente Corso di Informatica Grafica Facoltà Edile-Architettura

9 Caratteri speciali 9 Alcuni caratteri speciali devono essere rappresentati utilizzando delle costanti così definite: à è é < < > > & spazio à è é & Per andare a capo si utilizza il tag <br>

10 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

titolo di secondo livello</h2> Aggiungiamo una intestazione alla pagina Titolo in grande:

11 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

del primo</p> Nell area di Presentazione aggiungiamo una

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

13 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

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:

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

BGCOLOR="******"> Colore del testo <BODY TEXT="******">

15 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

16 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

lista</li> <li>il secondo elemento</li> <li>il terzo elemento</li> </ol> Nella sezione Lavoro e Studio

17 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

rappresentata a colori alternati (es grigio/verde) Sezione procedimento Contiene la descrizione del procedimento

18 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

jpg" width="278" height="278" alt="il mio gatto preferito"/> <img src="micio.

19 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=" 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

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.

Documenti analoghi

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