1 / 42

HTML?

HTML?. H yper T est M arkup L anguage Linguaggio di specifica che usa i marcatori : <nomeMarcatore> Testo </nomeMarcatore> E che permette di visualizzare Ipertesti. TAG. Definizione Si definisce TAG generalmente una parola (elemento) racchiusa tra parentesi angolate <>

ravi
Download Presentation

HTML?

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. HTML? • HyperTestMarkupLanguage • Linguaggio di specifica che usa i marcatori: <nomeMarcatore> Testo </nomeMarcatore> E che permette di visualizzare Ipertesti.

  2. TAG Definizione Si definisce TAG generalmente una parola (elemento) racchiusa tra parentesi angolate <> es. <caramella>, <html>, <body> …. In HTML il testo racchiuso da <> è già definito (lo vedremo man mano), mentre in altri linguaggi di Markup il testo può essere definito dall’utente (XML).

  3. Attributi Definizione Viene definito Attributo il testo, diverso da quello dell’elemento del tag, compreso nei tag di apertura es. <body bgcolor =“1234”> …. Nell’esempio bgcolor è l’attributo e “1234” è il valore dell’attributo, in generale il valore dell’attributo viene sempre messo tra virgolette (“”).

  4. TAG (apertura e chiusura) • In HTML tutto ciò che deve essere visualizzato deve essere racchiuso tra il TAG di apertura e il TAG di chiusura

  5. <HTML> • Tutti gli elementi e il contenuto di un documento HTML sono compresi tra <html> e </html> • Dopo <html> si procede con i due tag che dividono il documento in due parti fondamentali: • L’intestazione (<head>) • Il corpo (<body>)

  6. Tag di struttura • Un semplice documento HTML <html> ======= <HTML> <head> ======= <HEAD> </head> ======= </HEAD> <body> ======= <BODY> </body> ======= </BODY> </html> ======= <HTML> Not case sensitive

  7. Intestazione <head> <title> Prima Pagina </title> <META name =“author” content =“Franca Debole”> <META name =“GENERATOR” content =“WordPad”> <META name =“keywords” content =“html, prima pagina”> </head>

  8. Corpo <body> Altri TAG Altro testo ….. Tutto il contenuto del documento HTML </body>

  9. COLORI • I colori sono espressi in Esadecimale(0..F): #FFFFFF #000000 la forma #xxyyzz: xx = red yy = green zz = blue oppure • I colori sono espressi con il loro nome: Yellow Thistle

  10. Tabella colori

  11. Immagini • Le immagini consentite nel linguaggio HTML sono: • .gif • .jpg • .png In genere si adoperano le .gif quando servono immagini animate o con trasparenze, ma il .jpg risulta il più veloce da caricaree quindi il + conveniente da usare.

  12. Dimensione (small , big) • Normale normale • Small: <small>piccolo</small> • Big: <big>grande</big> Nota: 1) tag di chiusura 2) tag senza attributi

  13. Dimensione (small , big)

  14. <FONT> • Permette di modificare alcune caratteristiche del testo in qualsiasi momento

  15. Attributi <FONT> (1) • Size può assumere valori compresi tra 1 e 7 <font size="1"> size1 </font> <font size="2"> size2 </font> <font size="3"> size3 </font> <font size="4"> size4 </font> <font size="5"> size5 </font> <font size="6"> size6 </font> <font size="7"> size7 </font>

  16. Attributi <FONT> (2) • Assume valori standard degli editor di testi <font face="Verdana"> testo </font> <font face="Book Antiqua"> testo </font> <font face="Times New Roman"> testo </font>

  17. Attributi <FONT> (3) • Colora il testo usando la specifica che abbiamo già visto per bgcolor <font color =“#bbbb00"> testo </font> <font color =“#6699cc"> testo </font> <font color =“#ff6633"> testo </font>

  18. Formattazione Testo • Gli spazi • Il newline (ritorno carrello) • I titoli • I paragrafi

  19. Spazi • Gli spazi in HTML vengono considerati diversamente da come siamo abituati Se scrivo <body>Spazio1 Spazio2</body> o <body>Spazio1 Spazio2</body> Il browser dopo la parola Spazio1 in entrambi i casi aggiungerà solamente uno spazio.

  20. Come aggiungere spazi? Grazie ad un carattere speciale: &nbsp; Senza Con In entrambi i casi ho usato sei spazi

  21. Caratteri Speciali • Oltre a &nbsp; usato per lo spazio ci sono altri metacaratteri alcuni dei quali devono essere usati obbligatoriamente in HTML Vedi: http://www.asciitable.com/

  22. Andare a capo In HTML non è possibile andare a capo premendo invio (return) E allora come? • Usare <BR> Nota: 1) Nessun TAG di chiusura!

  23. <BR> • <BR> indica un interruzione di linea (break row) <font size="6"> Voglio andare a capo ORA lo ha fatto?? </font> <font size="6"> Voglio andare a capo ORA <br> lo ha fatto?? </font>

  24. Titoli • In un testo generalmente si evidenziano i titoli dal resto • In HTML ci sono 6 possibilità di formattare i titoli cioè possiamo scrivere: Titolo1 Titolo2 Titolo3 Titolo4 Titolo5 Titolo6 Usando un <Hy>.

  25. <Hy> • Abbiamo sei possibilità: y = {1,2,3,4,5,6} <Hy> Titolo </Hy> Nota: 1) Tag di chiusura!

  26. <Hy> cont... • Stilisticamente parlando un buon creatore di pagine HTML non passa mai da un titolo3 a un titolo1 È buona norma rispettare la gerarchia dal titolo più grande (H1) al più piccolo (H6)

  27. Formato carattere

  28. Grassetto & Corsivo • Grassetto normale e <B>grassetto</B> B = Bold • Corsivo normale e <I>corsivo</I> I = Italic Nota: 1) tag di chiusura 2) tag senza attributi

  29. Grassetto & Corsivo

  30. Sottolineato • Sottolineato normale e <U>sottolineato</U> U = Underline Nota: 1) tag di chiusura 2) tag senza attributi

  31. Sottolineato

  32. Pedice & Apice • Pedice normale e <sub>pedice</sub> • Apice normale e <sup>apice</sup> Nota: 1) tag di chiusura 2) tag senza attributi

  33. Pedice & Apice

  34. Combinazioni • Grassetto corsivo (viceversa) <b><i> Pippo </i></b>  Pippo • Sottolineato corsivo (viceversa) <u><i> Pippo </i></u>  Pippo • Pedice corsivo (viceversa) Pluto<sub><i> Pippo </i></sub>  PlutoPippo

  35. Paragrafi P1 At the same time, there began to take form a system of numbering, the calendar, hieroglyphic writing, and a technically advanced art, all of which later influenced other peoples. Within the framework of this gradual evolution or cultural progress the Preclassic horizon has been divided into Lower, Middle and Upper periods, to which can be added a transitional or Protoclassic period. Testo suddiviso in due paragrafi (P1, P2) in HTML è possibile usando <P> P2

  36. Con <P>

  37. Senza <P>

  38. <P> • Tag di chiusura • Tag con attributi

  39. <P ALIGN=“”> Di default Il paragrafo è allineato a sinistra <p align=“center”> <p align=“left”> <p align=“right”>

  40. Immagini • Le immagini consentite nel linguaggio HTML sono: • .gif • .jpg • .png In genere si adoperano le .gif quando servono immagini animate o con trasparenze, ma il .jpg risulta il più veloce da caricaree quindi il + conveniente da usare.

  41. IMMAGINE DI SFONDO • Sintassi: <BODYbackground= “pathtoimageaaaaaa.bbb”> • Semantica: aaaaaa = nome dell’immagine bbb = estensione dell’immagine path 

  42. PATH • Assoluto metto tutto il percorso partendo dalla directory principale es: c:\Documents and Settings\Documenti\Immagini\NomeImmagine.gif • Relativo metto solamente il percorso partendo dalla directory in cui è posta la mia WebPage. es: Immagini/NomeImmagine.gif

More Related