Corso html 5. Di Roberto Abutzu. * Terza parte: Prime nozioni: Tag e prima pagina, continuazione.

Dimensione: px

Iniziare la visualizzazioe della pagina:

Download "Corso html 5. Di Roberto Abutzu. *********** Terza parte: Prime nozioni: Tag e prima pagina, continuazione. **********"

Gilberta Brescia
8 anni fa
Visualizzazioni

1 Corso html 5. Di Roberto Abutzu. *********** Terza parte: Prime nozioni: Tag e prima pagina, continuazione. ********** Prime nozioni: Tag e prima pagina, continuazione. Nota bene, al fine di avere anche la lettura dei segni grafici, come minore, maggiore, eccetera, segni che servono a comporre gli elementi html, meglio se mettiamo la punteggiatura su tutto. La tag head e la tag body. Un documento Html lo dividiamo in due settori ben distinti: quello che viene visto a video dall'utente, e quello che invece non viene visualizzato ma che serve per far funzionare il sito e che serve ai motori di ricerca per consentire l'indicizzazione del sito. Per dirlo con parole più semplici, nella tag <head>, vengono riportate le informazioni che servono al browser per visualizzare la pagina e tutte le informazioni per i motori di ricerca. Nella tag <body>, vengono inseriti tutti gli elementi della pagina html che verranno visualizzati dal browser. Riapriamo il documento: index.html e posizioniamoci sotto la tag della lingua, in una riga nuova. Scriviamo: <head>

2 Diamo invio più volte per creare delle righe vuote. Scriviamo </head> e premiamo invio. Scriviamo ancora una tag: <body>. Diamo invio più volte per creare delle righe vuote. Scriviamo </body>. Se analizziamo quello che abbiamo scritto, ci rendiamo conto che abbiamo aperto e chiuso la tag Head, poi abbiamo aperto e chiuso la tag Body. Tra l'apertura e la chiusura di ogni singola Tag, abbiamo creato delle righe vuote dove inseriremo i contenuti della pagina. Da notare che quando si scrive codice html e si inseriscono delle righe vuote, tali righe non hanno nessun valore e il browser le ignora. Quindi, ora abbiamo: <!doctype html> <html lang="it"> <head> Alcune righe vuote. </head> <body> Alcune righe vuote.

Tra l'apertura e la chiusura di ogni singola Tag, abbiamo creato delle righe vuote dove inseriremo i contenuti della pagina.

3 </body> </html> La tag Head e i suoi contenuti. Quì vedremo come si inseriscono quelle tag che servono al buon funzionamento del sito e ai motori di ricerca, ma che sono nascoste a chi lo visita. Copiamo e inseriamo dentro alla tag <head>, dove abbiamo lasciato le righe vuote, queste righe: <meta charset="windows-1252" /> <meta name="author" content="roberto " /> <meta name="description" content="questo sito serve per far apprendere il linguaggio html ai disabili visivi. " /> <title> Sito di prova in html 5 </title> Queste righe devono essere all'interno della tag Head, quindi, nelle righe vuote tra <head> e </head>.

Copiamo e inseriamo dentro alla tag <head>, dove abbiamo lasciato le righe vuote, queste righe: <meta charset="windows-1252" /> <meta name="author"

4 Ecco una breve descrizione dei meta tag inseriti: I meta tag, sono divisi in nome="valore", quindi: minore, nome meta, uguale, virgolette, valore, virgolette, spazio, barra, maggiore. Nota che il meta tag è auto chiudente, come spiegato in precedenza. <meta charset="windows-1252" /> Questo meta, indica la codifica dei caratteri con il quale è stato scritto il sito. <meta name="author" content="roberto " /> Questo meta, indica l'autore del sito o il Cms usato. <meta name="description" content="questo sito serve per far apprendere il linguaggio html ai disabili visivi. " /> Questo meta, dà una descrizione accurata del sito e viene consigliato di scriverci dentro frasi con le parole che volete vengano raccolte dai motori di ricerca. Attenzione a non fare i furbi, inserendo termini non conformi ai contenuti del sito, perché i motori di ricerca se ne accorgono ed escludono il sito dalle ricerche. Di meta tag ne esistono molti, ma per il momento fermiamoci quì. Gli altri li vedremo in seguito. Inseriremo successivamente altri elementi, dando le spiegazioni del loro significato. <title> Sito di prova in html 5 </title>

<meta name="author" content="roberto " /> Questo meta, indica l'autore del sito o il Cms usato.

5 La tag Title, dà il nome alla pagina web. Non è visualizzata nella pagina stessa, ma viene riportata nella barra del titolo. Questo titolo deve essere sempre confacente con l'etichetta del link che la apre. Spieghiamo ora gli Attributi e i loro Valori. L'attributo è una caratteristica della Tag o comunque aggiunge informazioni alla tag stessa. Il valore è la misura che ha l'attributo. Non è immediato comprendere questi significati, ma facciamo esempi banali. Per esempio, abbiamo un paragrafo, che è la tag. Il font del carattere è l'attributo. Il tipo di carattere, Arial, è il valore dell'attributo. Quindi, avremo: paragrafo-font-arial. Che sarebbe: Tag-attributo-valore. Altro esempio, volendo una intestazione rossa, l'intestazione è la Tag. Il colore è l'attributo. Rosso è il valore del colore, quindi, dell'attributo. Spesso ci si confonde tra attributo e il suo valore, quindi, seguiamo questo ragionamento per capire e fissare definitivamente il concetto: 1. Faccio una intestazione. 2. Decido che la voglio colorata, e inserisco l'attributo colore. 3. Decido che il colore sarà il rosso e lo indico all'attributo dandogli il valore rosso. Nella tag head, vengono inseriti ulteriori elementi che vedremo in seguito, man mano che approfondiremo il discorso. Per il momento vi accenno solo ad alcune tipologie di questi elementi, tra quelli più utilizzati. Nella head, possiamo inserire i collegamenti, che in pratica sono dei link,

L'attributo è una caratteristica della Tag o comunque aggiunge informazioni alla tag stessa. Il valore è la misura che ha l'attributo.

6 ai fogli di stile Css che daranno la formattazione al file html. Inoltre è possibile inserire i famosi Java script. Questi elementi sono scritti in Java, un linguaggio di programazione vero e proprio, che permette di aggiungere ulteriori funzionalità alla pagina web del nostro sito. Questi elementi più o meno complessi e ricchi di funzioni, di solito, li possiamo trovare in internet gratuitamente. Ecco alcuni esempi, utilizzando il mio sito che è raggiungibile a questo indirizzo: I pulsanti per l'ingrandimento, aggiungi la pagina ai preferiti, la data e l'ora e, nelle province, la tabella del meteo, sono tutti script che troviamo su internet facendo una semplice ricerca con il nostro motore di ricerca preferito. Non è necessario conoscere la programmazione Java, quindi, come ho fatto io che non conosco questo linguaggio di programmazione, potete usare quelli già pronti e disponibili. Sono molti i siti che ne offrono, ma ne trovate tantissimi sicuramente su: Si tratta del grande sito di html che consiglio vivamente di visitare. In esso, per chi fosse interessato a costruire pagine html, troviamo una miniera inesauribile di elementi e istruzioni molto utili. Quando troviamo uno script che ci interessa, di solito è sufficiente copiarlo e inserirlo nella head. Ovviamente, seguite sempre le istruzioni che vengono fornite sulla pagina, prima o dopo lo script. Gli script in circolazione sono migliaia, ma in questo scritto fornirò solo quelli fondamentali. La cosa importante è sapere come si inseriscono nel documento html, cosa che impareremo piano piano. Poi, ognuno di voi inserirà nel proprio sito tutti quelli che gli interessano. Attenzione, e vedremo anche questo, certificate sempre le pagine nel validatore w3c ad ogni script che inserite, perché, anche html 5 è soggetto alla validazione ed essendoci in giro script un pò datati e non più validi, bisogna verificarli, prima di pubblicare una pagina nel sito. Nella head poi è possibile inserire ulteriori tag meta che danno le indicazioni necessarie ai motori di ricerca. Come vi ho già accennato all'inizio, alcune spiegazioni sono volutamente

Questi elementi più o meno complessi e ricchi di funzioni, di solito, li possiamo trovare in internet gratuitamente.

7 molto prolisse, ed ho deciso così solo per evitare di trovarsi ad andare avanti e non capire qualche concetto fondamentale che non vi farebbe capire quello che viene spiegato più avanti. Nella prossima parte, parleremo del tag body e della struttura della pagina. Contemporaneamente manderò anche le prime indicazioni sui file Css. Tutte le spiegazioni, inviate da me gradualmente, presuppongono da parte vostra che non ne facciate solo una raccolta, ma cominciate seriamente ad affrontare il discorso, studiando piano piano tutto quello che vi invierò, man mano che lo avrete. Soprattutto in seguito alla differenza tra il codice html e quello dei css, bisogna andarci cauti, perchè il codice si scrive in maniera diversa e non vorrei generare confusione. Comunque, prima inizieremo a dare un minimo di struttura alla home page del sito, poi penseremo a formattarlo e colorarlo con i Css. Vi rimando alla prossima parte per continuare a imparare i primi elementi di una pagina html. *********** Per ulteriori spiegazioni, scrivere a: Roberto Abutzu roberto@evyweb.it_

Tutte le spiegazioni, inviate da me gradualmente, presuppongono da parte vostra che non ne facciate solo una raccolta, ma cominciate seriamente ad affrontare il discorso, studiando piano piano tutto

Documenti analoghi

Corso html 5. Di Roberto Abutzu. `*` Ottava parte: I link, seconda parte. `` I link, seconda parte.

Corso html 5. Di Roberto Abutzu. `***********` Ottava parte: I link, seconda parte. `**********` I link, seconda parte. Continuiamo la parte che completerà la trattazione dei link, andando ad operare direttamente