Una pagina web inizia sempre con il tag <html> e si conclude con il tag </html> : ogni elemento che compone la pagina sarà racchiuso tra essi.

Dimensione: px

Iniziare la visualizzazioe della pagina:

Download "Una pagina web inizia sempre con il tag <html> e si conclude con il tag </html> : ogni elemento che compone la pagina sarà racchiuso tra essi."

Romina Massaro
7 anni fa
Visualizzazioni

1 HTML per semplici pagine web HTML è l acronimo di Hypertext Markup Language ( Linguaggio di contrassegno per gli Ipertesti ) e NON è un linguaggio di programmazione E un linguaggio che permette di indicare come disporre gli elementi all interno di una pagina: le indicazioni vengono date attraverso degli appositi marcatori, detti tag. Una pagina HTML è formata da testo: è un semplice file di testo che ha estensione.html o.htm e un browser web è in grado di aprire il file in automatico cliccandoci su due volte Creare una pagina web Si può creare anche con il blocco note, salvarla in qualche cartella del computer e dare al file l estensione html (ad esempio miapagina.html ) Il TAG è costituito da < e > all interno dei quali si mette il comando : ad esempio <body> è un tag Quasi tutti i tag devono essere chiusi mettendo il simbolo / nel comando: apertura: <body> chiusura: </body> La sintassi per creare pagine web Se si vuol scrivere del testo che NON faccia parte del codice e che quindi non sia elaborato dal browser, si usa un commento: La sintassi è:  Una pagina web inizia sempre con il tag <html> e si conclude con il tag </html> : ogni elemento che compone la pagina sarà racchiuso tra essi <html> altri tag </html>

Una pagina HTML è formata da testo: è un semplice file di testo che ha estensione.html o.

2 Le sezioni principali della pagina web Un documento HTML è normalmente diviso in due sezioni: Testa ( <head> ): Contiene informazioni non immediatamente percepibili, ma che riguardano il modo in cui il documento deve essere letto dal browser Corpo ( <body> ): Qui è racchiuso il contenuto vero e proprio del documento <html> <head> </head> <body> </body> </html> Nella sezione <head> è possibile specificare il Titolo della pagina con il tag <title> : esso sarà visualizzato sulla barra di navigazione del browser Nella sezione <body> che rappresenta il contenitore generale degli elementi della pagina, si può impostare una immagine o un colore di sfondo con gli attributi background e bgcolor <html> <head> <title> Titolo pagina web </title> <! il tag <title> crea il titolo della pagina --> </head> <body background= image1.gif bgcolor= red style="background-repeat:no-repeat" > </body> </html> Nota 1: la scritta style="background-repeat:no-repeat" serve per non far ripetere più volte l'immagine di sfondo nel caso questa sia più piccola della pagina intera; si può eliminare se si vuole lo sfondo riempito Nota 2: il bgcolor può essere espresso in diversi formati; per avere i codici di ogni formato basta uno sguardo su internet ( )

specificare il Titolo della pagina con il tag <title> : esso sarà visualizzato sulla barra di navigazione del browser Nella sezione <body> che rappresenta il contenitore generale degli elementi della

3 I tag per i contenuti: paragrafi Per inserire un elemento (testo, immagine, link, ecc) è buona norma creare un paragrafo (tag ), ovvero un contenitore che riserva uno spazio nella pagina (lascia una riga vuota prima e dopo l elemento inserito) Esempio: paragrafo 1 Anche il tag <div> crea un paragrafo che però va a capo senza lasciare una riga vuota prima e dopo l elemento inserito nel paragrafo Simile ai precedenti è anche lo che non va a capo e continua sulla stessa linea del tag che lo include. I tag HTML: il testo All interno dei contenitori visti in precedenza si possono inserire gli elementi visivi della pagina web, ad esempio il testo Per andare a capo all interno di un testo bisogna usare il tag (break); se se ne usano due di seguito, si lascia anche una riga vuota nel testo Se si vuole tracciare una riga orizzontale per suddividere il testo in più parti si utilizza il tag <hr> (horizzontal rule) Nota: chiudere questi tag è facoltativo E possibile allineare il contenuto del paragrafo (e quindi non solo il testo, ma anche gli altri tag) utilizzando l attributo align del tag con i valori left, right, justify Esempio: testo allinea il testo al bordo sinistro

nel paragrafo Simile ai precedenti è anche lo <span> che non va a capo e continua sulla stessa linea del tag che lo include.

4 I tag HTML: lo stile del testo Quando si vuole creare un titolo per un paragrafo si può usare il tag <hn>, dove la n è la dimensione che decresce da 1 a 6 Esempio: <h5> Titolo paragrafo a dimensione ridotta 5 </h5> Per rendere il testo in grassetto lo si racchiude nel tag Per rendere il testo in corsivo lo si racchiude nel tag Per rendere il testo sottolineato lo si racchiude nel tag Per rendere il testo barrato lo si racchiude tra <strike> </strike> Per rendere il testo a apice lo si racchiude nel tag Per rendere il testo p pedice lo si racchiude nel tag <inf> </inf> Per cambiare il tipo di Font al testo si utilizza il tag con l attributo face Esempio: testo Per cambiare la dimensione del Font al testo si utilizza il tag con l attributo size (che varia da 1 a 7) Esempio: testo E anche possibile esprimere la dimensione in modo relativo alla dimensione standard Esempio: testo Per cambiare il colore del testo si utilizza il tag con l attributo color Esempio: testo

lo si racchiude nel tag <u> </u> Per rendere il testo barrato lo si racchiude tra <strike> </strike> Per rendere il testo a apice lo si racchiude nel tag <sup> </sup> Per rendere il testo p pedice lo

5 I tag HTML: Gli elenchi Ci sono 2 tipi di elenchi: non ordinati e ordinati Gli elenchi ordinati Gli elenchi ordinati sono contraddistinti dall enumerazione degli elementi che compongono la lista. Avremo quindi una serie progressiva ordinata e individuata da lettere o numeri Il tag da utilizzare per aprire un elenco ordinato è <ol> ( ordered list ) e gli elementi sono individuati dal tag <li>( list item ) <ol> <li> primo elemento </li> <li>secondo elemento </li>.. </ol> Lo stile di enumerazione di default è quello numerico, ma è possibile indicare uno stile differente per mezzo dell attributo type : type="1 (è default) per numeri arabi ; type="a alfabeto minuscolo ; type="a alfabeto maiuscolo ; type="i numeri romani minuscoli ; type="i numeri romani maiuscoli <ol type= I > <li> primo elemento </li> <li>secondo elemento </li> </ol>

list item ) <ol> <li> primo elemento </li> <li>secondo elemento </li>.

6 Gli elenchi non ordinati Gli elenchi non ordinati sono individuati dal tag <ul> ( unordered list ), e gli elementi dell elenco sono contraddistinti ancora dal tag <li> Il tipo di segno utilizzato per gli elementi dell elenco dipende dal browser, ma di solito è un pallino pieno. È possibile comunque scegliere un altro tipo di segno sempre con l attributo type : type="disc (è default) visualizza un pallino pieno type="circle visualizza un cerchio vuoto type="square visualizza un quadrato pieno I link e l ipertestualità Una delle caratteristiche del web è l essere costituito da ipertesti: i link sono il ponte che consente di passare da un sito ad un altro, da una pagina all altra, per navigare il web I link sono formati da due componenti: il contenuto (un testo o un immagine): è la parte visibile del link, i collegamenti da cliccare all interno della pagina la risorsa verso cui il collegamento punta; può essere una risorsa interna (dello stesso sito della pagina che lo crea) oppure una esterna ad un altro sito web Il tag per creare un link è <a> </a> insieme all attributo href per individuare la risorsa Esempio: <a href= > clicca qui per andar a libero </a>

È possibile comunque scegliere un altro tipo di segno sempre con l attributo type : type="disc (è default) visualizza un pallino pieno type="circle visualizza un cerchio vuoto type="square visualizza

7 Nell esempio precedente il link viene fatto ad una risorsa esterna, ovvero ad un altro sito web ( Se si vuole creare un link ad una pagina del sito che si sta creando bisogna far riferimento al percorso fisico di quel file (nel File System) Per far riferimento a un file che si trova all interno della stessa directory basta scrivere il nome del file. Esempio: <a href= paginadalinkare.html > vai a pagina </a> Per far riferimento a un file contenuto in una cartella di livello inferiore alla posizione corrente, si indica la cartella seguita da /, e poi il nome del file (cartella/nomefile.html) Esempio: <a href= prima/interna/pagina.html > pagina inferiore (2 livelli) </a> Se la cartella che contiene il file a cui far riferimento è ad un livello superiore alla posizione corrente, è sufficiente utilizzare../ e il nome della pagina: Esempio: <a href=../../pagina.html > pagina superiore (2 livelli) </a>

della stessa directory basta scrivere il nome del file. Esempio: <a href= paginadalinkare.

8 Le immagini Un contenitore come <div> o oltre al testo può contenere una immagine tramite <img src= /> ; l immagine può essere un file locale, presente in una cartella del sito un link ad una immagine presente in un altro sito web diverso dal nostro La sintassi del tag da usare per inserire l immagine è: <img src="../img/logo.gif" /> <img src=" UN INDIRIZZO WEB " /> Nota 1: questo tag NON ha quello di chiusura, infatti si vede lo / già nello stesso tag di apertura Nota 2: l'immagine può diventare un link cliccabile: basta inserirla tra l apertura del tag <a href> e la chiusura </a> al posto del testo come visto in precedenza. Si può ridimensionare l immagine usando gli attributi width (larghezza) ed height (altezza) Esempio: <img src="logo.gif" width="224" height="69" /> Come visto con il testo, si può allineare l immagine utilizzando l attributo align e i valori left e right Esempio: <img src= logo.gif width= 224 height= 69 align= left > Altri possibili valori per align sono: bottom (allinea nella parte bassa del contenitore), middle (allinea al centro del contenitore), top (allinea nella parte alta del contenitore)

gif" /> <img src=" UN INDIRIZZO WEB " /> Nota 1: questo tag NON ha quello di chiusura, infatti si vede lo / già nello stesso tag di apertura Nota 2: l'immagine può diventare un link cliccabile: basta

Documenti analoghi

Informatica A per Ingegneria Gestionale (2005-2006) Il linguaggio HTML. Elisa Quintarelli-Laura Mandelli. HyperText Markup Language

Informatica A per Ingegneria Gestionale (2005-2006) Il linguaggio HTML Elisa Quintarelli-Laura Mandelli 1 HyperText Markup Language Linguaggio di descrizione di testi secondo lo schema SGML (Standard Generalized