HTML. Hyper Text Markup Language

Transcript

1 HTML Hyper Text Markup Language

2 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.

3 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>

4 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.

5 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.

6 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.

7 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.

8 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

9 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.

10 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>

11 Schema di base <html> <head> </html> intestazione del documento </head> <body> corpo del documento </body>

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

13 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:

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

15 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. 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.

16 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 = > Che restituirà questo:

17 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:

18 Un po di stile PROPRIETA background color border VALORE 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 Identifica il colore del testo. Come valore si possono usare sempre i colori scritti in inglese 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

19 Un po di stile PROPRIETA text-align font-weight font-style VALORE Identifica dove deve essere allineato il testo. Può assumere i seguenti valori: left, right, center, justify Ammette due valori: normal o bold, nel primo caso il testo rimane invariato, nel secondo diventa grassetto. 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 height, width Specifica l altezza del carattere. Es: 30px Specifica altezza e la larghezza dell elemento.es: 50px

20 Un po di stile - Esempio <div style= background: black; color: white; border: 3px solid red; text-align: center; font-size 30px > </div> Risultato: Ciao <span style= font-weight:bold > Ragazzi </span>.<br/> E ora di <span style= font-style: italic; color: red; text-decoration: underline > Cominciare! </span> Ciao Ragazzi. E ora di Cominciare!

21 HTML Parte seconda

22 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 Secondo elemento Terzo elemento 1. Primo elemento 2. Secondo elemento 3. Terzo elemento 4. Vediamo adesso come si realizza in HTML

23 Elenchi puntati - esempio Elenco puntato: <ul> </ul> <li>prima voce</li> <li>seconda voce</li> <li>terza voce</li> 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.

24 Elenchi numerati - esempio Elenco numerato: <ol> </ol> <li>prima voce</li> <li>seconda voce</li> <li>terza voce</li> 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.

25 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.

26 Url assoluto - esempi masterchef.sky.it/ sito immagini chef.png

27 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.

28 MIO SITO Url relativo Home.html Seconda.html Pagine esempi Adesso Dobbiamo Noi stiamo andiamo risalire a fino trovare alla programmando cartella Immagini l immagine mio la sito, pagina che ci mentre seconda.html interessa, noi adesso entriamo e vogliamo nella siamo aggiungere cartella nella un cartella Immagini: immagine pagine che si trova quindi: nella cartella../immagini immagini, in particolare Background.jpg../ Testa.jpg. L URL relativo E ci poi aiuta selezioniamo a raggiungere E l immagine siamo nella che attraverso cartella ci interessa: MIO pochi SITO passaggi. Testa.jpg../Immagini/Testa.jpg

29 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.

30 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

31 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

32 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>

33 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 Esempio: A C B D <table> <tr> <td>a</td> <td>b</td> </tr> <tr> <td>c</td> <td>d</td> </tr> </table> HTML

34 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.

35 L HTML È GIA FINITO ;)