Hyper Text Markup Language
annuncio pubblicitario
HTML Hyper Text Markup Language IL WEB Le componenti principali del web sono: • HTML: definizione del contenuto delle pagine • CSS: definizione dell’aspetto delle pagine • Javascript: definizione del comportamento delle pagine • PHP: accesso ai dati persistenti su un DBMS Noi affronteremo solo i primi due aspetti per la realizzazione di siti statici. HTML e CSS • HTML sta per Hyper Text Markup Language che significa: linguaggio di contrassegno per ipertesti. • Cos’è un ipertesto? Un ipertesto è un insieme di testi messi in relazione tra loro tramite collegamenti e parole chiave. • Cosa usiamo per “contrassegnare”? L’HTML è un linguaggio che utilizza i “tag”. • Cos’è un “tag”? Si tratta di marcatori che identificano e controllano la presenza, la disposizione e l’aspetto degli elementi contenuti nel mio ipertesto. Esempio: <tag> il mio contenuto </tag> HTML e CSS • L’HTML non è un vero e proprio linguaggio di “programmazione” si tratta di un linguaggio che serve a dichiarare la struttura del mio ipertesto, se lo vogliamo vedere sotto un altro aspetto si tratta di un linguaggio per programmare ipertesti. • CSS: Cascading Style Sheet – Fogli di Stile a Cascata • Il CSS è un linguaggio che definisce l’aspetto dei nostri ipertesti, che d’ora in poi diventeranno vere e proprie pagine web. • Il CSS è inglobato all’interno dell’HTML dato che sono strettamente legati l’uno all’altro. • Il CSS ci permette di dare il nostro stile al nostro sito web. HTML e CSS - Riassunto • L’HTML definisce la struttura ed il contenuto del documento, quindi della nostra pagina web. • Il CSS definisce la presentazione grafica degli elementi presenti all’interno del nostro documento. I tag • Il formato generale di un tag è il seguente: <tag [attributo="valore"] ... > contenuto del tag </tag> • < >: le parentesi angolari delimitano l’inizio e la fine di ogni elemento. • tag: (nome del tag)identifica l’oggetto da trattare. • attributo: (nome dell’attributo) è una proprietà del tag che si vuole specificare, è opzionale. • valore: (valore dell’attributo) identifica il valore che si vuole attribuire alla proprietà specificata prima. La coppia attributo valore si può ripetere per specificare varie proprietà dell’elemento che sto dichiarando. I tag • contenuto: (codice HTML) è il contenuto vero e proprio del tag e può comprendere altro HTML oppure semplice testo. • </tag>: (fine del tag) identifica la fine dell’elemento che sto dichiarando. I tag - Esempio Codice HTML: <p style="text-align:center; border:1pt solid;" > colore predefinito <span style="color:red;"> colore rosso </span> colore predefinito </p> Risultato: colore predefinito colore rosso colore predefinito La nostra prima pagina • I file HTML e CSS vengono creati tramite un semplice editor di testo. Alcuni esempi sono blocco note, notepad+ +, ecc… • Per creare un file HTML basterà aprire un documento bianco e salvarlo come “nome del mio documento.html”. • Un documento HTML è aperto e chiuso dal tag <html> … </html> • È di norma suddiviso in due parti: l’intestazione (<head>…</head>) e il corpo (<body>…</body>). • Per una migliore lettura del codice è molto importante l’indentazione. Indentazione • È una modalità di scrivere codice HTML, e non, che facilità la lettura di chi scrive e di chi legge. • Come si applica? Ogni volta che ho aperto un tag vado a capo e indento semplicemente schiacciando il tasto TAB, che ha questo simbolo “ à| “, e ogni volta che lo chiudo, invece torno indietro esattamente dello stesso spazio. Es: <tag1> contenuto <tag2> contenuto </tag2> contenuto </tag1> Schema di base <html> <head> …intestazione del documento… </head> <body> …corpo del documento… </body> </html> L’intestazione • La <head> contiene informazioni che servono al browser per interpretare nel modo giusto la pagina. • I principali tag di intestazione sono i suguenti: • <title> Titolo </title> identifica il titolo della pagina che verrà visualizzato nella scheda del browser. • <style> Codice CSS </style> specifica le regole CSS da applicare al documento HTML stesso per la corretta visualizzazione della pagina. Il corpo del documento • Il <body> definisce la struttura della pagina, contiene codice HTML, testi e immagini che verranno poi visualizzate dal browser. • In seguito vedremo tutti i principali tag che si trovano all’interno del <body> • Per effettuare un commento in HTML, ovvero inserire del testo all’interno del codice sorgente che però non verrà visualizzato nella pagina vera e propria, si usa la seguente sintassi: <!-- il mio commento --> Testo e paragrafi • Nel linguaggio HTML esistono tre tipi di tag per identificare un raggruppamento di testo, altrimenti detto paragrafo. Sono i seguenti: • <p>…Testo…</p> blocco di testo preceduto e seguito da una riga bianca. • <div>…Testo…</div> blocco di testo senza formattazione, che può contenere anche altri sottoblocchi. • <span>…Testo…</span> blocco di testo in linea. Identifica un gruppo di parole sulla stessa riga. Testo e paragrafi • Per quanto riguarda gli spazi e gli a capo in HTML ci sono parole riservate: • <br> uno dei pochi tag che non ha bisogno di essere chiuso e identifica “l’a capo” che altrimenti in HTML non esisterebbe. • &nbsp; identifica uno spazio. Infatti in HTML data un riga formata tutta da spazi solamente il primo verrà letto come tale per i restanti bisogna usare questa parola riservata. Immagini • Per aggiungere un immagine in mezzo al nostro testo basterà includere il seguente tag: <img src=“dove si trova l’immagine”> • Nell’attributo “src” bisognerà specificare dove si trova l’immagine per adesso basterà inserire l’indirizzo internet a cui fa riferimento ad esempio: <img src”=https://scontent-b-mxp.xx.fbcdn.net/hphotos-ash3/579596_3944415685161_1568079572_n.jpg”> Che restituirà questo: Un po’ di stile • Queste sono alcune proprietà CSS semplici che vi potranno servire per creare una semplice pagina web. • Per applicare il CSS a un elemento basta che specifichiate l’attributo “style” dell’elemento con all’interno le regole che volete applicare separate da un “;” (punto e virgola) • Esempio: <div style=“parametro: valore; parametro2: valore2; parametro3: valore3;”> contenuto </div> Al posto di parametro e valore potrete usare le sueguenti: Un po’ di stile PROPRIETA’ VALORE background Identifica il colore di sfondo dell’elemento. Come valore gli si può attribuire un colore scritto in inglese ad esempio: red, green, blue, lightgreen, black, ecc… color Identifica il colore del testo. Come valore si possono usare sempre i colori scritti in inglese border Identifica il bordo dell’elemento: può essere “none”, senza bordo, o in alternativa ha bisogno che tre parametri siano specificati: • Altezza: un numero seguito da “px” es: 3px • Tipo: può essere: solid, dotted, inset, ecc.. • Colore: colore scritto in inglese. Il risultato sarà così: 3px solid black Un po’ di stile PROPRIETA’ VALORE text-align Identifica dove deve essere allineato il testo. Può assumere i seguenti valori: left, right, center, justify font-weight Ammette due valori: normal o bold, nel primo caso il testo rimane invariato, nel secondo diventa grassetto. font-style Ammette due valori: normal o italic, nel primo caso il testo rimane invariato, nel secondo diventa corsivo. text-decoration Ammette due valori: none o underline, nel primo caso il testo rimane invariato, nel secondo diventa sottolineato. font-size Specifica l’altezza del carattere. Es: 30px height, width Specifica altezza e la larghezza dell’elemento.Es: 50px Un po’ di stile - Esempio <div style=“background: black; color: white; border: 3px solid red; text-align: center; font-size 30px”> Ciao <span style=“font-weight:bold”> Ragazzi </span>.<br/> E’ ora di <span style=“font-style: italic; color: red; text-decoration: underline”> Cominciare! </span> </div> Risultato: Ciao Ragazzi. E’ ora di Cominciare! HTML Parte seconda Elenchi • Esistono 2 tipi di elenchi in HTML, quelli puntati e quelli numerati. Questi due tipi li potete riscontrare anche in Word. Vediamo come sono fatti: • Elenco puntato Elenco Numerato • Primo elemento 1. Primo elemento 2. Secondo elemento • Secondo elemento 3. Terzo elemento • Terzo elemento 4. … • … • Vediamo adesso come si realizza in HTML Elenchi puntati - esempio • Elenco puntato: <ul> <li>Prima voce</li> <li>Seconda voce</li> <li>Terza voce</li> </ul> • Il tag <ul> sta per “unordered list”. • il tag <li> sta per ”list item”. • Questi elementi ammettono tutti gli stili che abbiamo visto la volta scorsa. Elenchi numerati - esempio • Elenco numerato: <ol> <li>Prima voce</li> <li>Seconda voce</li> <li>Terza voce</li> </ol> • Il tag <ol> sta per “ordered list”. • il tag <li> sta per ”list item”. • Questi elementi ammettono tutti gli stili che abbiamo visto la volta scorsa. Url assoluto • Cos’è una URL? URL è un metodo per identificare univocamente una risorsa (file, immagini, siti, ecc…) nel WEB o sul nostro computer. Spesso viene anche usato l’appellativo di indirizzo. • Un url è composto da tre parti: protocollo://dominio/percorso • Il protocollo: identifica che tipo di servizio dobbiamo offrire o ottenere. Noi useremo sempre lo “http”. • Il dominio: è il posto dove si trova la risorsa che vogliamo andare a inserire. Di solito si tratta di un sito internet. • Il percorso: è il percorso attraverso il quale possiamo accedere al file che ci interessa. Vedremo alcuni esempi. Url assoluto - esempi • http://google.it • http://masterchef.sky.it/ • http://masterchef.sky.it/sito/immagini/chef.jpg masterchef.sky.it/ • sito • immagini • chef.png Url relativo • È sostanzialmente solo l’ultima parte dell’URL assoluto. Infatti utilizza solo il percorso per specificare a che risorsa devo accedere. • L’URL relativo serve per accedere solamente alle risorse che sono sul mio sito o sul mio computer. • Permette anche di accedere alle cartelle superiori tramite la scrittura “../” • Vediamo un paio di esempi per chiarirci un po’ le idee. MIO SITO Pagine Home.html Seconda.html Url relativo esempi Noi Dobbiamo stiamo risalireafino Adesso andiamo alla programmando cartella mio la sito, pagina trovare l’immagine che Immagini mentre seconda.html noi adesso e vogliamo ci interessa, entriamo siamo aggiungere nella un cartella immagine nella cartella Immagini: pagine che si trova quindi: nella cartella immagini, particolare ../Immaginiin Background.jpg ../ Testa.jpg. L’URL relativo ci aiuta a raggiungere E poi selezioniamo E siamo nella l’immagine attraverso cartella che ci MIO pochi SITO passaggi. interessa: Testa.jpg ../Immagini/Testa.jpg I link • Nelle pagine HTML è possibile realizzare collegamenti esterni ad altre pagine. • Il tag da utilizzare è <a> ... </a>; il codice contenuto nel tag diventa il collegamento attivo: può essere un testo o un’immagine. • L’attributo impostabile del tag <a>, oltre allo style, è sostanzialmente uno: l’ “href” , che indica il percorso della pagina o della risorsa a cui si deve essere rimandati. • Cliccando sul link si viene reindirizzati alla risorsa corrispondente all’url dell’href. Link - esempi • Sempre secondo l’esempio della struttura precedente, se ci troviamo nella pagina Home.html possiamo inserire un link del tipo <a href=“Seconda.html”>Vai alla seconda pagina</a> • Il risultato sarà il seguente Vai alla seconda pagina E cliccandoci sopra verrà caricata la pagina “Seconda.html” • Come potete notare abbiamo usato un URL relativo. • Se vogliamo caricare un immagine invece scriveremo così <a href=“../Immagini/bg.jpg”>Vai all’immagine</a> Vai all’immagine Le ancore • Le ancore sono dei collegamenti interni alla pagina. Come se fossero dei segnalibri. • Vengono visualizzati allo stesso modo dei link, ma cliccandoci sopra veniamo semplicemente spostati in una parte diversa della pagina (ad esempio in fondo). • Per crearne uno si utilizza sempre il tag <a> ma in maniera diversa. • Dobbiamo specificare due cose per creare un ancora: • La bandierina o il segnaposto che indica il punto della pagina dove vogliamo spostarci • Il link che attiva lo spostamento Ancore - esempio • Per il segna posto: <a name=“finedellapagina”></a> • Per il link che effettuerà lo spostamento: <a href=“#finedellapagina”>Vai in fondo alla pagina</a> • L’HTML … <body> <a href=“#finedellapagina”>Vai in fondo alla pagina</a> … tanto testo in mezzo … <a name=“finedellapagina”></a> </body> Tabelle • In HTML è possibile creare le tabelle. • Per le tabelle abbiamo a disposizione 3 tag: • <table>…</table> Identifica la tabella vera e proria • <tr>…</tr> Identifica una riga della tabella • <td>…</td> Identifica una cella della tabella HTML • Esempio: <table> <tr> A B C D <td>A</td> <td>B</td> </tr> <tr> <td>C</td> <td>D</td> </tr> </table> Iframe • Gli iframe sono come dei box html, ad esempio una div, che contengono al suo interno un’altra pagina. È un modo semplice e veloce per inserire il contenuto di una pagina esterna all’interno della mia. • Il codice HTML è molto semplice: <iframe src=“pagina da includere.html”></iframe> • Con le proprietà CSS che conosciamo possiamo specificare anche una altezza e una larghezza. • Nell’attributo “src” dobbiamo specificare la pagina html che vogliamo includere sempre con la solita regola dell’URL relativo. L’HTML È GIA FINITO ;)
