Scrivere in Html Tag e loro attributi

Dimensione: px

Iniziare la visualizzazioe della pagina:

Download "Scrivere in Html Tag e loro attributi"

Fausto Mori
5 anni fa
Visualizzazioni

1 Scrivere in Html Tag e loro attributi + Esercizi Prof.ssa Daniela Zangirolami Tutti i diritti sono riservati. Qualsiasi riproduzione, anche parziale, senza autorizzazione scritta è vietata. Legge 633 del 22 Aprile 1941 e successive modifiche.

2 Uno sguardo più dettagliato al TAG ovvero le etichette Start Tag Tag di apertura End Tag Tag di chiusura Carattere Carattere <p> </p> Parentesi di sinistra e di destra le lettere tra parentesi esempio: quello che si scrive il Tag di chiusura ha sempre indicano lo scopo del Tag. nel Tag <p> è un paragrafo. il simbolo / dopo la parentesi <

3 il termine "etichetta" e "elemento" hanno stesso lo stesso significato. Una etichetta-elemento comprende l apertura del tag: se decidiamo di scrivere un paragrafo dobbiamo sempre prima aprire il TAG, vediamo nell esempio: <p>l'enuma elish può essere considerato la "Genesi" della mitologia babilonese.</p> Quando si apre un TAG es: <p> dopo aver completato l elemento bisogna sempre obbligatoriamente chiudere il TAG es: </p> non si può scrivere nulla al di fuori dei TAG, il nostro editor di testo lo scriverà comunque ma il nostro Browser non è detto che elaborerà il dato.

4 L HTML si compone di vari elementi per esempio: un paragrafo un immagine sono elementi di una pagina web. Gli elementi a loro volta sono composti da TAG, attributi e contenuti. TAG un tag è un semplice termine descrittivo che indica al browser di che tipo di elemento si tratta. Start Tag: l inizio di ogni elemento è segnalato dal suo nome inserito tra parentesi angolari. Quindi lo start tag di un paragrafo è <p> quello di un immagine è <img>

5 End Tag: la fine di ogni elemento è segnalato da un end tag che è come uno start tag, con la differenza che il nome dell end tag è preceduto da uno slash / </p> paragrafo chiuso Attributi: si intende la modifica di un elemento base. Aggiungendo attributi al Tag si specificano al browser altri comandi più significativi, come le larghezze le altezze ecc <img src= nome immagine width= 100 heigth= 30 > il browser leggerà: l immagine é larga 100 alta 30 Contenuto: tutto quello che si trova tra start tag e end tag <p> questo è un paragrafo </p>

6 ESEMPIO DI COME NON SI GESTISCONO I TAG <html> <head> <title> Prova Html </title> </head> <body> Titolo del sito Web QUESTO è un ERRORE! <p>questa è la mia prima pagina web</p> Voglio raccontarvi la mia storia. QUESTO è un ERRORE! </body> <html>

7 ESEMPIO N.2: COME NON SI GESTISCONO I TAG APERTURA E CHIUSURA DI UN DOCUMENTO HTML <html> <head> Titolo del sito</title> <html> <body> <head> p> il mio primo sito web<p> </html> </body> <html> Questi sono gli errori/orrori più frequenti di quando si comincia a lavorare in HTML, ricordate sempre che il linguaggio iper testuale segue sempre delle regole precise che vanno rispettate, se mai lavorerete per produrre siti web più complessi vi accorgerete ben presto che se non rispettate queste semplici regole, il vostro lavoro non sarà soddisfacente.

8 TAG più usati Il testo tra <html> </html> descrive un documento HTML Il testo tra <head> </head> fornisce informazioni sul documento (non è visibile dal browser) Il testo tra <title> </title> fornisce un titolo per il documento (identità) Il testo tra <body> </body> descrive il contenuto della pagina visibile Il testo tra <h1> </h1> un titolo (h1 si usa per i titolo e ha una numerazione fino al h6) Il testo tra <p> </p> un paragrafo il testo tra <br> </br> è lo spazio tra i paragrafi, l andare a capo. il testo tra <div> </div> è lo spazio tra un elemento e l altro, sta per dividi

9 il testo tra <a href= > e </a> apre un Link il testo tra <img src= > apre un immagine il testo tra <body style= > e </body> decide il colore di sfondo, questo tag può essere aperto una sola volta, non va ripetuto il body una volta aperto. il testo tra <strong> </strong> testo in grassetto il testo tra <b> </b> testo in grassetto il testo tra <i> </i> testo in corsivo, italic il corsivo di word office, si usa solo con formattazione semplice altrimenti bisogna ricorrere al tag Font. il testo tra <font > e </div> si inserisce un testo con formattazione articolata, spesso scaricando font particolari da internet, di solito lo si chiude con </div> ma si può anche aprire un paragrafo con <p> oppure con <h1> il testo tra <mark> </mark> evidenzia il testo di giallo il testo tra <center> </center> centra Testo e Immagini nello schermo.

10 Altri tag molto utili e comunemente usati: <header> Intestazione spesso scritto <div id= header > crea uno spazio per l intestazione <nav> navigation ovvero il menu di navigazione del sito web spesso seguito da <a href= > <article> un paragrafo giustificato nel layout destra, sinistra, sopra, sotto. <section> una sezione per i widget per esempio i link ai social network <aside> a parte/da parte si intende un blocco di testo, immagini, video ecc giustificato nel layout <footer> colui che sta ai piedi - il piede del sito web un rimando a tutto quello che c è all interno del nostro sito web.

11 2 esempi di tag e loro posizione

12 Una tipica pagina web standard presenta un struttura composta da tre elementi: HTML HEAD BODY l elemento html contiene sia HEAD che BODY esempio: <html> <head> </head> <body> </body> </html>

14 LAYOUT un sito web è impostato come un giornale di cronaca, formato da diverse colonne una testata e uno spazio finale. i contenuti vengono visualizzati all interno delle colonne e possono cambiare nel tempo. Oggi il tema più ricorrente tra i siti web è il minimalismo, ovvero poco ma buono e fatto bene. l esempio migliore è Instagram, estremamente minimale ma efficace.

15 SOLO IL CONTENUTO NEL BODY VIENE VISUALIZZATO DAL BROWSER

16 <header> che è dentro al <body> <header> numero 2 che è sempre dentro al <body>ma potrebbe anche essere un semplice <h1> cioè un titolo. <article> che si trova sempre nel <body> qui all interno si possono caricare delle immagini.

17 Esempi di Layout con colonne da destra a sinistra. Nota Bene: non vi sono regole precise sul tipo di layout da scegliere a seconda del sito che si sta producendo!

18 PRIMO ESERCIZIO CREARE UNA CARTELLA SUL DESKTOP RINOMINA A PIACERE CON DATA DI OGGI ES: LEZIONE 2 GG/MM/AAAA APRIRE L EDITOR DI TESTO BLOCCO NOTE ( SI TROVA TRA LE APPLICAZIONI DI WINDOWS OPPURE SUL DESKTOP) SCRIVIAMO IL SEGUENTE COMANDO IPERTESTUALE: <html> <head> <title> HTML - Home Page </title> </head> <body> <h1>home Page</h1> <center><p>prima pagina in HTML </p></center> </body> </html>

19 Click su FILE poi su Salva con Nome scegliete di salvare il File sul Desktop oppure nella cartella che avete creato in precedenza poi su Nome Files: rinomina con index.html Spostatevi dove avete salvato il vostro file index.html e apritelo con il Browser Web che preferite vedrete la vostra prima pagina web!

Documenti analoghi

HTML. I tag HTML (parte 1)

HTML. I tag HTML (parte 1) HTML I tag HTML (parte 1) I tag HTML I comandi che il browser interpreta Etichette per marcare l inizio e la fine di un elemento HTML Formato e possono essere tag di apertura: tag di chiusura: