HTML per tu+ Chiara Pere+
Cos’é L’HTML è il linguaggio con cui potete indicare come i vari elemen7 saranno dispos7 in una pagina Web. L’estensione del file è .html e verrà visualizzato corre?amente trascinandolo nel browser. Abbiamo bisogno quindi di un blocconote e un browser. I tag HTML All’interno di ogni pagina sono presenti una serie di marcatori (i TAG), a cui viene affidata la visualizzazione e che hanno differen7 nomi a seconda della loro funzione. Ogni tag consiste di una parentesi angolare aperta <> e chiusa </> <h1> </h1> <html></html> Ogni documento HTML inizia con <html> e termina con </html> Viene diviso in due par7 1. Intestazione <head></head> Con7ene il 7tolo del documento ed altre informazioni non visualizzate dal browser 2. Corpo <body></body> Con7ene il documento vero e proprio, la parte visuale <head></head> Con7ene il 7tolo del documento ed altre informazioni non visualizzate, fornisce al browser informazioni importan7 sul documento che si vuole visualizzare come: Ctolo della pagina le parole chiave per i motori di ricerca i file esterni da includere (js e/o css) <body></body> Con7ene il contenuto del documento vero e proprio Testo Immagini Link Tabelle Scriviamone uno Un documento HTML minimale <html> <head> <7tle> Keep calm and write html </7tle> </head> <body> Questo &egrave; un documento HTML </body> </html> MolC tag I tag HTML possono rappresentare ogge+ (come ad esempio le immagini) o servire a suddividere la pagina in aree (come I 'div'). Ci sono diverse 7pologie di tag e conoscerle diventa determinante per usare il tag giusto al posto giusto e per applicare in seguito le regole CSS. Una cara?eris7ca importante del codice HTML è che i tag possono essere annidaC l'uno dentro l'altro. Anzi molto spesso è necessario farlo. La sintassi correMa è fondamentale, altrimenC il funzionamento è compromesso. Tag annidiaC <TAG1> contenuto 1 <TAG2>contenuto 2</TAG2> </TAG1> quindi <div align="right"> testo 1 <p align="le_">testo 2</p> </div> è uCle essere precisi sopraMuMo per controllare il documento se si verifica un problema. Tipologie di tag ElemenC di blocco Sono sostanzialmente gli elemen7 che cos7tuiscono un blocco a?orno a sé -­‐ e che di conseguenza vanno a capo -­‐ come i paragrafi, le tabelle, le form, ma sopra?u?o i div. ElemenC “inline” Sono gli elemen7 che -­‐ non andando a capo -­‐
possono essere integra7 nel testo, come i collegamen7 o le immagini, oppure gli span le liste numerate, o non numerate. Tag <div> </div> contenitore <h1> </h1> … <h6> </h6> 7tolazioni <p> </p> paragrafo <br/> a capo <a href="hMp://www.girlgeekdinnersbologna.com/">GGD </a> link <span></span> contenitore in line <ul> <li> </li> </ul> lista numerata Tag <img src="smiley.gif" alt="Smiley face" height="42" width="42"> immagini <table> <tr> <td> </td> </tr> </table> tabelle Tag Immagine <img src="smiley.gif" alt="Smiley face" height="42" width="42"> Possiamo definire: le dimensioni di visualizzazione di un'immagine specificando gli a?ribu7 WIDTH (larghezza in pixel) e HEIGHT (altezza in pixel). l'allineamento dell'immagine rispe?o al testo circostante mediante l'a?ributo ALIGN. BoMom: il lato inferiore dell'immagine appare allineato alla base della riga di testo (valore predefinito); Middle: il punto mediano dell'altezza dell'immagine si allinea alla base della riga di testo; il testo si spezza e prosegue so?o l'immagine; Lea: l'immagine si posiziona sul lato sinistro della pagina e il testo scorre intorno a lei sul lato destro; Right: l'immagine si posiziona sul lato destro della pagina e il testo scorre intorno a lei sul lato sinistro. Si può anche aggiungere un bordo intorno all'immagine tramite l'a?ributo border che deve essere espresso in pixel secondo la sintassi: <img src="image.jpg” border="5"> Un a?ributo fondamentale del tag <IMG> è ALT (testo alterna7vo). La sintassi corre?a è: <img src="nome immagine" alt="breve descrizione testuale"> Questa “didascalia” associata all'immagine appare durante il caricamento della pagina o quando si passa con il mouse sopra l'immagine. I vantaggi: i visitatori possono capire prima del caricamento completo il contenuto delle immagini; i browser speciali per non-­‐venden7 sono in grado di interpretare corre?amente la pagina; diversi motori di ricerca tengono conto del valore dell'a?ributo ALT delle immagini di una pagina per catalogarla con precisione. Ad ogni immagine si può associare un collegamento ipertestuale includendo il tag <IMG> all'interno della coppia di tag <a href> e </a> secondo la sintassi: <a href="index.html"><img src="index.gif"></a> Un'immagine linkata, appare generalmente circondata da un bordo di colore blu che risulta fas7dioso. In questo caso basta indicare all'interno del tag <img> l'aMributo border="0" per fare in modo che il bordo resC invisibile. I link <a> </a> È usato per indicare o ancorare un par7colare punto in un file HTML o per associare un collegamento ipertestuale alla porzione di documento racchiusa tra il tag di apertura e quello di chiusura, che può essere del semplice testo o una immagine, oppure una sequenza di elemen7. Lo standard HTML definisce a?ribu7 per questo tag, tui facolta7vi, sebbene almeno uno di essi deve essere presente affinché il tag sia di qualche u7lizzo. HREF Il valore di questo a?ributo è un URL ovvero un indirizzo di un qualche elemento presente sul web. all'URL viene associato tu?o ciò che è compreso tra i tag <A> ... </A>. TARGET Questo a?ributo è per iden7ficare la finestra del browser all’interno del quale si aprirà il link, se non specificato si aprirà nella stessa. target="_blank" serve a far aprire i link in nuove pagine Ora tocca a noi! Respiro Apro un file nuovo in blocco note lo salvo chiamandolo miosito.html e cominciamo … HTML / CSS Con l’HTML definisco il contenuto della pagina web e il suo funzionamento con i css (Cascading Style Sheets) invece definisco il suo aspe?o: colori, forme, font animazioni. Allegare un foglio di sCle Per allegare un foglio di s7le esterno in un documento html si aggiunge un <link>. La dichiarazione va sempre collocata all’interno della sezione <head> : <html> <head> <link href="s7le.css" rel="stylesheet" type="text/css"> </head> <body> [...] </body> </html> CSS body { background: white; } /* S7li per i 7toli h1 */ h1 { color: red; font: 36px Helve7ca, Arial, sans-­‐
serif; } CSS div { margin-­‐top: 10px; margin-­‐right: 5px; margin-­‐bo?om: 10px; margin-­‐le_: 5px; } Oppure inline <h1 style="color: red; background: black;">...</h1> StrumenC Fibebug o simili GRAZIE Chiara Perei [email protected]
