Your SlideShare is downloading. ×
  • Like
  • Save
Linguaggio html
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Now you can save presentations on your phone or tablet

Available for both IPhone and Android

Text the download link to your phone

Standard text messaging rates apply

Linguaggio html

  • 494 views
Published

 

Published in Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
494
On SlideShare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
0
Comments
0
Likes
1

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. LINGUAGGIO HTML
  • 2. INTRODUZIONE HTML è l’acronimo di HyperText Markup Language ed è il primo linguaggio ideato (oltre che il più utilizzato) per realizzare pagine internet. Una comune pagina HTML è un documento di testo contenente codice HTML ed avente le estensioni .htm o .html (la prima veniva usata in DOS). Il linguaggio HTML descrive il contenuto di una pagina eb, ma non la forma.
  • 3. INTRODUZIONE L’ideazione e la nascita dell’HTML sono merito di due fisici del CERN di Ginevra che nel 1989 crearono un sistema di informazioni collegate tra loro, accessibile attraverso la rete in uso al centro stesso. Il linguaggio HTML che ha subìto diversi cambiamenti nel tempo, è stato ormai quasi soppiantato da linguaggi come l’XHTML (fusione di HTML e XML), che permette di ottenere documenti XML per il web e leggibili da tutti i browser, e il CSS che permette di definire per ogni elemento o gruppo di elementi della pagina, determinati stili, ed è più flessibile. Il W3C è un programma “validatore” che si occupa di verificare che la sintassi dell’HTML rispetti gli standard
  • 4. IL TAG Il tag è l’unità fondamentale dell’HTML, è l’istruzione che fa capire al browser come interpretare il codice e visualizzarlo sul monitor. Ogni tag è caratterizzato da tre elementi:  il segno minore <  il nome  il segno maggiore > Il tag di chiusura, dopo il segno < ha uno slash / che comunica al browser che quello è un tag di chiusura. Esempio:<nome tag>contenuto da formattare</nome tag>
  • 5. STRUTTURA GENERALE DI UNAPAGINA HTML I tag <html> indicano all’interprete (il browser) che il documento è stato formattato in html <html> I tag <head> servono a definire <head>codice</head> l’intestazione del documento, cioè <body>codice</body> tutte le informazioni che servono a </html> definirie il contenuto della pagina All’interno dei tag <body> è presente il resto del documento, il corpo della pagina, cioè quello che verrà poi visualizzato sul browser. È indifferente scrivere i tag in maiuscolo o in minuscolo.
  • 6. ELEMENTI I block-elements:  Possono contenere in-line elements ed altri block-elements e quando vengono inseriti iniziano una nuova riga Gli in-line elements:  Possono contenere solo testo e altri in-line elements. Vengono visualizzati sulla riga corrente e non vanno a capo. Block-elements e in-line elements vengono chiamati anche text-elements.
  • 7. COMMENTI Si possono inserire dei commenti <html> all’interno del codice che non saranno <head> letti dal browser, ma che saranno <!-- qui ci va il titolo --> utili per una maggiore comprensione </head> anche a distanza di tempo. <body> <!-- qui ci va il contenuto --> Per inserire commenti, basta usare la </body> sintassi: <!-- commento -->
  • 8. SCRITTURA Indentazione:  Il codice viene rientrato man mano che si entra nei sotto-tag Stili:  Tutto maiuscolo: si scrivono tutti i tag grandi, e gli attributi e i valori in minuscolo  Maiuscoli alcuni tag: si scrivono in maiuscolo solo i tag principali come <html>, <head>, <body>  Tutto minuscolo: tutti i tag si scrivono minuscolo, ed una corretta indentazione diminuisce i problemi di confusione. Questo stile è consigliato perché compatibile con XHTML Tag vuoti  I tag vuoti sono quelli che non hanno tag di chiusura. Per mantenere la compatibilità con XML conviene inserire uno / prima della chiusura (preceduto da uno spazio)  Esempio: <img src = „images/fiore.png‟>  diventerà <img src = „images/fiore.png‟ />
  • 9. IL TITOLO <html> Per visualizzare un titolo è <head> sufficiente inserire all’interno del tag <title>titolo</title> <head>, il tag <title> seguito dal </head> titolo e dal suo tag di chiusura </title> <body>codice</body> </html>
  • 10. METATAG I metatag sono dei tag speciali Nome TAG Valore Funzione che all’interno dei tag <head> permettono di definire ilDC.Title Titolo del documento Definisce il titolo del documento contenuto della pagina web.Description Descrizione del sito Descrive il contenuto del sito o della pagina Non producono alcun effetto grafico nella visualizzazioneCreation_date Data Indica la data di creazione o quando verrà aggiornata della pagina.Keywords Ogni parola chiave è separata da ; Dichiara le parole chiave del sito o della pagina Sono costituiti da due parti:Robots All; none; index; noindex; follow; Indica ai motori di ricerca l’indicizzazione Nome del metatag nofollow;Revisit-after Numero di giorni seguito da days Indica ai motori di ricerca dopo quanti giorni Valore del metatag tornare a visitare la paginaGenerator L’editor usato per scrivere il indica l’editor utilizzato per scrivere il codice codice della paginaCopyright Il proprietario del contenuto del Indica a chi spetta il copyright del contenuto La sintassi è: sito del sitoAuthor L’autore della pagina Indica l’autore della pagina ed <meta name=“nome meta tag” eventualmente il suo indirizzo email content=“valore del meta tag”>Owner Proprietario del sito Indica il proprietario del sitoLanguage Una o più lingue Indica la lingua o le lingue del sitoDC.Language Una o più lingue Indica al motore di ricerca di indicizzare le pagine in base alla lingua
  • 11. METATAG HTTP-EQUIV I metatag HTTP_EQUIV sono Nome TAG Valore Funzione quelli contenuti nella parte iniziale della risposta HTTP del server web al broser.Expires Data e ora nel formato Indica la data di scadenza della GMT validità della paginaReply-to Indirizzo email Definisce un indirizzo email cui La sintassi è: gli utenti possono fare riferimento <meta http-equiv=“nome metaSet-Cookie Cookievalue; expires; Salva un cookie sul computer del tag” content=“valore del meta path; visitatore tag”>Refresh Serve per ricaricare la pagina dopo un determinato tempoContent- Indica il set di caratteri in usoType nella paginaPragma No-cache costringe il Solo per netscape, forza il sito a browser a svuotare la non leggere il sito della cache cache e ricaricarlaImagetoolba Yes abilita la Da i.e. 6.0 in su abilita/disabilitar visualizzazione della la toolbar che appare sulle toolbar, no la disabilita immaginidistribution Global se è un contenuto Indica se il contenuto della di interesse generale, in pagina è di interesse generale o caso contrario usare local specifico
  • 12. DOCTYPE La prima riga di ogni pagina web (prima di qualsiasi tag, anche prima del tag <html>) è il DocType. Questa riga fornisce al browser tutte le informazioni per capire le caratteristiche della pagina, ed ha bisogno di diverse informazioni:  Il linguaggio usato all’interno della pagina  Una dichiarazione in cui si determina se il documento è di dominio pubblico o meno  Una nota che veicoli a quali specifiche del W3C si fa riferimento  La lingua del documento <!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//IT” http://www.3.org/TR/html4/loose.dtd> Indica che il linguaggio è l’html, che il documento è di dominio pubblico e rispetta le specifiche del W3C del tipo HTML Transitional definiti nel DTD (Document Type Definition) loose.dtd, la lingua è italiano.
  • 13. FORMATTARE IL TESTOFONT Ad eccezione dei tag di stile, l’insieme dei tag è stata sostituita dai “fogli di stile”Famiglia di font Caratteristiche Esempi di font che consentono di utilizzare meno codice.Serif Sono proporzionati ed Times, georgia hanno le grazieSans-serif Sono proporzionati e non Helvetica, geneva, verdana, hanno le grazie arialMonospace Non sono proporzionati, Courier, courier new con o senza le graziecursive Hanno le grazie Vivaldi, comic sansFantasi Non sono classificabili woodblockÈ possibile personalizzare l’aspetto del testoattraverso l’attributo face, ma è comunquepreferibile scegliere sempre le famiglie generiche difont in modo da garantire la massima compatibilità.
  • 14. FORMATTARE IL TESTOCOLORE DIMENSIONI Il colore si può impostare  Le dimensioni sono determinate dal valore di size tra 1 e 7, il valore predefinito è 3. attraverso l’attributo color, i <body> cui valori possono essere <font size=“3”>questo testo sarà di dimensione 3</font> tutti i colori disponibili, sia in </body> formato nominale, sia in formato esadecimale.  Si può anche determinare una dimensione base del<body> font e lo si può ingrandire inserendo gli operatori + e - <font color=“red”>questo testo <body> sarà di colore rosso</font> <basefont size=“4”> <font size=“+2”>questo testo sarà di dimensione 6</font>oppure oppure <font <font size=“-2”>questo testo sarà di dimensione 2</font> color=“#FF0000”>questo testo </body> sarà di colore rosso</font></body>
  • 15. FORMATTARE IL TESTOSTILE In HTML vi sono due stili utilizzabili: Stile logico Stile fisico Significato Stile fisico: non si preoccupa della funzioen che ha il testo all’interno del contesto pagina<strong> <b> b rende il testo in grassetto; e si limita a definire solo gli strong è usualmente visualizzato in attributi del testo grassetto<em> <i> rende il testo in corsivo Stile logico: si preoccupa di veicolare all’interprete la funzione del blocco di testo che<cite> <u> rende il testo sottolineato è all’interno<code> <tt> rende il testo monospaziato<kbd> <tt> rende il testo monospaziato come <code>
  • 16. ORGANIZZARE IL TESTOTITOLO PARAGRAFO Vi sono sei livelli di Vi sono tre tag a suddividere titoli, il primo è il più il testo in paragrafi: <p>: elemento block di defalut ha grande e man mano che dei margini superiori ed inferiori si va verso il sesto il a separarlo dal resto dei titolo sarà più piccolo. contenuti <div>: elemento block, di default il testo non ha margini La sintassi è: <span>: elemento in-line, serve a <h1>titolo paragrafo</h1> raggruppare concettualmente il testo.
  • 17. ORGANIZZARE IL TESTOLINEE DIVISORIE ANDARE A CAPO Si può inserire una linea che Il tag che si occupa di questa divida un articolo dall’altro, con il tag <hr>, i suoi attributi sono funzione è <br> (che non width che ne indica la larghezza prevede un tag di chiusura) (in pixel o in percentuale); size che ne regola le dimensioni (in pixel); align che ne indica l’allineamento a sinistra, al centro, a destra. Esempio: <body>Esempio: <h1>Titolo</h1><body> <br><h1>Titolo</h1> <br><hr width=“100%” size=“3”><div>paragrafo</div> <br></body> <div>paragrafo</div> </body>
  • 18. ORGANIZZARE IL TESTOELENCHI ORDINATI ELENCHI NON ORDINATI Per gli elenchi ordinati si usa il Gli elenchi non ordinati usano il tag <ul>, tag <ol>, gli elementi dell’elenco ed anch’essi utilizzano i tag <li>. devono essere inclusi all’interno del tag <li> ed ogni elemento sarà E’ possibile cambiare l’immagine del preceduto da un numero. pallino attraverso l’attributo type (circle per un cerchio vuoto, disc per un pallino pieno, square per un quadratino pieno)Esempio:<body> Esempio:<ol> <body><li>1° elemento</li> <ul type=“disc”><li>2° elemento</li> <li>elemento con pallino</li><li>3° elemento</li> <li>elemento con pallino</li></ol> </ul></body> </body>
  • 19. ORGANIZZARE IL TESTOELENCHI DI DEFINIZIONI TESTO PREFORMATTATO Gli elenchi di definizioni prevedono un elemento di testo ed una spiegazione dello Indica del testo che verrà stesso. I tag sono tre: <dl> che contiene l’elenco ed indica di che tipo è, <dt> per visualizzato così come è specificare la parola da spiegare, e <dd> che serve a contenere la spiegazione. scritto, rispettando gli spazi.Esempio:<body> La sintassi è:<dl><dt>termine</dt> <pre>testo preformattato che <dd>spiegazione dettagliata del sarà inserito come è stato termine</dd><dt>un altro termine</dt> scritto</pre> <dd>spiegazione dettagliata dell‟altro termine</dd></dl></body>
  • 20. ORGANIZZARE IL TESTOTESTO LAMPEGGIANTE TESTO SCORREVOLE Per far apparire del testo Per inserire del testo scorrevole il tag che va usato è <marquee> i cui attributi sono lampeggiante si usa il tag direction (left, right), height e widt (in pixel <blink>, ma non rientra o in percentuale), loop (un numero che determina quante volte va visualizzata la nelle specifiche del W3C e scritta; -1 o infinite per mostrarla pertanto è sconsigliato. all’infinito). Anche il tag <marquee> è sconsigliato.Esempio: Esempio: <body><body> <marquee direction=“left” width=“100%” height=“10%”<blink>testo lampeggiante</blink> loop=“-1”>Testo scorrevole</marquee> </body></body>
  • 21. LINKLa sintassi per creare un collegamento ipertestuale esterno, è semplice:<a href=“http://www.nomesito.it”>parola cliccabile</a>I collegamenti interni necessitano di un collegamento con l’attributo name:<a href=“#paragrafo”>vai al paragrafo</a><a name=“paragrafo”>questo non è un link ma il testo a cui siamo stati rimandati</a>È anche possibile creare link vuoti (p.es. in fondo alla pagina per tornare all’inizio della stessa):<a href=“#”>questo link è vuoto</a>Attraverso un link si può aprire il client di posta elettronica per inviare un’email con il campo destinatario precompilato:<a href=“mailto:indirizzo@mail.it”>parola da visualizzare</a>E si possono inserire anche oggetto e corpo del messaggio:<a href=“mailto:indirizzo@mail.it?subject=soggetto&body=corpo del messaggio”>invia mail</a>
  • 22. LINK Attributo Valori Significatolink qualsiasi colore indica il colore di tutti i link della paginaalink qualsiasi colore indica tutti i link attivivlink qualsiasi colore indica tutti i link già visitatiaccesskey qualsiasi lettera determina le scorciatoie da tastiera (cliccando Alt+valore viene mostrato il link)title qualsiasi lettera/parola il valore di title verrà mostrato quando il cursore sarà sopra il linktarget _blank (apre in una determina come verrà visualizzata la risorsa del link nuova pagina) _mail (apre nella stessa pagina)hreflang diversi valori indica la lingua del documento e facilita l’indicizzazione da parte dei motori di ricerca
  • 23. IMMAGINIAttributo Significatoborder identifica il bordo, che a 0 non è presente, e aumenta di spessore aumentando il numerotitle testo informativo, visualizzato passando il cursore sull’immaginewidth forza la dimensione della foto in larghezza (pixel o percentuale)height forza la dimensione della foto in altezza (pixel o percentuale)alt permette di specificare un testo alternativo, descrittivo dell’immagine
  • 24. IMMAGINILa sintassi per inserire l’immagine è:<img src=“url dell‟immagine” alt=“testo alternativo”height=“30” width=“20” title=“titolo” />Non è previsto un tag di chiusura, perciò richiede uno / prima del > finaleL’attributo align definisce l’allineamento dell’immagine rispetto al testo:  Bottom: il bordo inferiore è allineato verticalmente con la prima linea del testo;  Middle: la prima riga del testo è allineata con il centro dell’immagine; dopo la prima riga il testo scorre sotto l’immagine;  Top: la prima riga del testo è allineata con il bordo superiore dell’immagine;  Left  Right
  • 25. IMMAGINIMAPPA D’IMMAGINE FAVICON Le mappe d’immagine sono delle il tag <link> permette di mappe costituite da un’immagine sulla cui area sono disposti diversi inserire una favicon che dovrà link (p.es. la penisola italiana, avere necessariamente il cliccando su una regione si verrà indirizzati verso le pagine inerenti nome “favicon” e dovrà essere quella regione) grande 16x16px, e potràEsempio: essere .gif, .ico, .jpg<MAP NAME=“map1”> Esempio:<AREA HREF=“pagina.html” ALT=“Pagina” TITLE=“Pagina” <head> SHAPE=RECT COORDS=“6,116,97,184”> <link rel=“icon”</MAP> href=“http://percorso/favicon.ico”><img src=“immaginedamappare.jpg” </head> usemap=“#map1”>
  • 26. TABELLE Per inserire una tabella, il tag è <table></table>, e tra questi tag vanno inserite le colonne <tr> e le righe <td>. Se si vuole creare una cella d’intestazione si può usare il tag <th>. Attributi di righe e colonne sono:  Align: allinea il testo della cella a destra (right), a sinistra (left) o al centro (center)  Valign: allinea il testo sul margine superiore (top), sul margine inferiore (bottom), e in mezzo (middle) alla cella  Colspan e rowspan: indicano rispettivamente l’estensione di una colonna e di una riga.  Height e width: indicano l’altezza e la larghezza delle celle. Il tag <caption> permette di aggiungere una didascalia alla tabella, e supporta l’attributo align.
  • 27. TABELLEAttributo Significatoborder stabilisce la dimensione del bordo esterno, 0 di defaultwidth stabilisce la larghezza della tabellaheight stabilisce la lunghezza della tabellacellspacing stabilisce la spaziatura tra le cellecellpadding stabilisce la spaziatura tra il testo e la cella che lo contieneSi possono inserire anche delle tabelle preformattate attraverso il tag<pre> che, come già detto, inserisce il testo così com’è stato creato.
  • 28. SFONDO Per poter settare un colore come sfondo di una pagina si può utilizzare l’attributo bgcolor inserito all’interno del tag <body> sia con valori esadecimali, sia con il valore nominale del colore.La sintassi è:<body bgcolor=“#FFFF00”></body>(la pagina avrà sfondo giallo)oppure<body bgcolor=“black”></body>(lo sfondo sarà nero)Una volta inserita un’immagine, come sfondo, sarà ripetuta sia orizzontalmente che verticalmente; l’immagine si può inserire con l’attributo background all’interno di <body>Esempio:<body bgcolor=“FFFF00” background=“immagine.jpg”></body>(questa pagina contiene un‟immagine come sfondo, ma in attesache venga caricata, si vedrà uno sfondo giallo)
  • 29. MULTIMEDIAPer permettere di scaricare un file è sufficiente creare un link che come risorsa abbia il file da far scaricare.Esempio:<a href=“http://www.url.it/file.mpg”>scarica il video!</a>Se si desidera far ascoltare un suono di sottofondo si può inserire il tag <bgsound> i cui attributi sono src e loop:La sintassi è:<bgsound src=“url del file audio” loop=“numero di volte”>Il tag <bogsound> non rientra nelle specifiche W3C.
  • 30. MODULI Il tag <form> definisce i moduli: campi di testo, checkbox, area di testo e box di selezione. I suoi attributi sono action e method, il primo per specificare a quale file verranno inviati i dati, il secondo indica il modo in cui verranno spediti.Per creare un campo di testo il tag è <input>, i cui principali attributi sono type, name, value.All’interno dei form è possibile inserire uno o più campi di vario tipo, come text, che è un campo di testo, radio, che indica voci da selezionare, mutualmente esclusive, checkbox, che indica voci per selezione multipla.Altri due attributi del tag <input> sono size e maxlenght.Se si vuole oscurare il contenuto di un campo è sufficiente inserire password come valore dell’attributo type.
  • 31. MENU A DISCESA Per creare un menu a discesa si usa il tag <select></select>, al cui interno le voci saranno definite attraverso il tag <option></option>.Esempio:<form action=“prova.php” method=“post”><select name=“menu”><option>prima voce</option><option>seconda voce</option><option>terza voce</option></select></form>
  • 32. AREA DI TESTO Le aree di testo si possono creare utilizzando il tag <textarea>. I suoi attributi sono: rows che indica il numero di righe, e cols che indica il numero di colonne, name che da un nome all’area di testo e wrap che manderà automaticamente il testo a capo.
  • 33. PULSANTISUBMIT RESET È il valore dell’attributo  È il valore dell’attributo type che invia i dati ad type che resetta i campi un’altra pagina di un modulo per poterli ricompilare
  • 34. FRAME I frame sono dei “riquadri”, nei quali è suddivisa la pagina (p.es.: menu, link e contenuto), la loro utilità sta nel non dover riscrivere interamente il codice della pagina ma dividendola in frame si potrà ricaricare solamente il frame centrale del contenuto. L’uso dei frame è comunque sconsigliabile perché con il PHP si avrebbe lo stesso risultato ma con meno codice; inoltre per riuscire a disegnare dei frame graficamente accattivanti è necessario saper utilizzare i fogli di stile.