Il linguaggio HTML di Andrea Leotardi Il linguaggio HTML Quasi tutte le pagine Web sono disegnate utilizzando l’HTML (Hyper Text Markup Language), un linguaggio che descrive l’aspetto della pagina attraverso codici e comandi (chiamati “TAG”). La prima cosa da comprendere è che una pagina HTML altro non è che un normalissimo file di testo, che fa riferimento ad altri elementi separati, come immagini, filmati, file multimediali. Quello che si vedere visualizzato nel browser (navigatore, interprete del linguaggio HTML), non è un singolo documento, ma l’insieme di svariati documenti disposti secondo le indicazioni inseriti nella pagina HTML. Tra i browser, ricordiamo Internet Explorer (in dotazione con il sistema operativo Windows), Netscape Navigator/Communicator, Opera ecc. Per il trasferimento delle pagine internet si ricorre al protocollo http::// (hyper text transfer protocol – protocollo per il trasferimento di iper testi); questo non si occupa solo della trasmissione dei files, ma anche dei servizi di autenticazione e cifratura dei dati. Tornando all’HTML. Il linguaggio HTML è molto semplice da imparare, visto che è basato principalmente su TAG (etichette). L’HTML ha una sintassi ben precisa, infatti ogni “tag” è sempre racchiuso da i simboli di maggiore e minore (< e >). Ad esempio il “tag” <I> fa sì che il testo venga scritto in “italico” ossia in corsivo. Per terminare l’effetto di un “tag”, si utilizza un “tag” di chiusura, che è composto dal “tag” di apertura, preceduto da una barra: </I>. Al giorno d’oggi esistono molti programmi che ci aiutano nella creazione di pagine internet, i cosiddetti “editor”. Questi programmi ci permettono di lavorare in modalità “grafica”, ossia come se noi stessimo editando la pagina con un programma di video scrittura. Ed automaticamente l’editor, crea il “codice html” opportuno. Tra questi programmi ricordiamo: FrontPage di Microsoft, DreamWeaver di Macromedia, GoLive di Adobe. Il testo ed il codice HTML sono solo una delle componenti di una pagina Web. Gli altri elementi importanti di una pagina internet sono: immagini, o comunque la grafica in generale, le animazioni, i suoni ecc. Raccolta di immagini gratuite le possiamo trovare al seguente indirizzo: http://ausmall.com.au/freegraf http://www.iconographics.com http://www.erinet.com/jelane/families Notizie ricavate da “manuale pratico & trucchi per 1 il PC” Elaborazioni di Andrea Leotardi Il linguaggio HTML di Andrea Leotardi html images …….. ………….. ………….. ………….. Come si può notare nel grafico qui sopra, un sito internet mantiene una struttura gerarchica. Questo perché dobbiamo cercare di mantenere raccolti i files che sono tra di loro omogenei, quindi tutti i files html nella cartella “html”, tutte le immagini dentro alla cartella “images”. Per mettere, ad esempio, a disposizione un font o un documento, possiamo creare una cartella dedicata, chiamandola, per esempio, “download” CONSIGLIO: E’ preferibile utilizzare 8 caratteri per il nome del file 3 caratteri per l’estensione xxxxxxxx.htm NON utilizzare spazi nei nomi, perché questi vengono automaticamente sono sostituiti dal carattere speciale %20 E’ sconsigliabile inserire “fonts” speciali (tipi di caratteri disponibili nel sistema operativo), visto che non tutti i S.O. posseggono quel carattere. O comunque bisogna metterlo a disposizione di “download”. Notizie ricavate da “manuale pratico & trucchi per 2 il PC” Elaborazioni di Andrea Leotardi Il linguaggio HTML di Andrea Leotardi Anatomia di una pagina Tutte le pagine Web, devono iniziare con un “tag” che le identifica come documenti HTML. Questo “tag”, che deve precedere tutti gli altri, è <HTML>. E visto che, come si è già detto, tutti i “tag” hanno una chiusura, dovremo chiuderlo con </HTML>. I documenti HTML sono poi divisi in due zone: la prima è la HEAD, contiene le informazioni che si riferiscono al titolo (TITLE), la data di creazione, l’autore ecc. La seconda parte è il BODY, contiene il vero e proprio corpo della pagina: testo, immagini ecc. Un esempio: <HTML> <Head> <TITLE>Titolo della pagina </TITLE> </HEAD> <BODY> Contenuto della pagina </BODY> </HTML> NON HA IMPORTANZA SE I TAG SONO SCRITTI IN MAIUSCOLO O IN MINUSCOLO Un sito molto bello che può aiutarvi nella creazione delle pagine internet è il seguente: http://www.w3schools.com Altri “tag” importanti sono: <BR> (l’unico che non ha la chiusura), permette l’interruzione di riga e di andare a capo <P> … </P>, permette di creare un nuovo paragrafo. Inserire un’immagine: <img scr=”nomefile.gif” alt=”descrizione del logo” width=”100” height=”100”> In questa maniera, avremo il nome del file, l’eventuale descrizione (facoltativa) e la dimensione in “punti per pollice”. Per creare un collegamento ipertestuale, ossia un collegamento ad una pagine, un’immagine ecc., usiamo il seguente tag di “anchor” = àncora <A href=”http://www.unipr.it”>Il sito dell’università di Parma</A> e comparirà: Il sito dell’università di Parma Per inviare un’e-mail utilizziamo il seguente “tag” mailto:[email protected] e verrà richiamato il programma di posta elettronica e creata automaticamente una e-mail con l’indirizzo citato. [email protected] Notizie ricavate da “manuale pratico & trucchi per 3 il PC” Elaborazioni di Andrea Leotardi