Introduzione al linguaggio HTML L’HTML (Hyper Text Markup Language)

Introduzione al linguaggio HTML L’HTML (Hyper Text Markup Language)
è un linguaggio nato per poter visualizzare, su pagine Web, informazioni di carattere ipertestuale (testi su cui si può navigare cliccando su appositi collegamenti detti “links”), immagini, video e suoni. Non è quindi un linguaggio di programmazione: permette solo di mostrare le informazioni volute presentandole su browser (programma per visualizzare le metapagine) quali, ad esempio, Mozilla, Chrome, Internet Explorer, ecc…

Struttura tipica di un documento
Come prima cosa osserviamo che una pagina HTML si distingue dall’estensione .html o .htm I tag sono i comandi (è indifferente scriverli in minuscolo o maiuscolo – no CASE SENSITIVE). I tag base, che un documento HTML deve contenere necessariamente, sono i seguenti : <HTML> <HEAD> </HEAD> <BODY> </BODY> </HTML>

Un tag, generalmente, va sempre in coppia: il primo indica da dove applicare il relativo comando, il secondo dove chiuderlo. Tutte le istruzioni HTML vengono racchiuse fra parentesi angolate, il tag di apertura è della forma <istruzione>, e viene generalmente terminato da un comando del tipo </istruzione>.

Rispondi alle seguenti domande.
Qual’è il linguaggio per costruire pagine web? Quale significato diamo al termine Ipertestuale? Cos’è un Browser? Cosa significa Case sensitive? Come si chiamano le istruzioni del linguaggio Html? Quale Estensione deve avere un file per essere riconosciuto dal browser? Quali sono le istruzioni di base da inserire in una pagina web? Come viene chiuso un tag?

Prima LEZIONE – la prima pagina web
Apri il programma "Blocco note“(Start -> Programmi -> Accessori -> Blocco note) 2) Scrivi il seguente codice <HTML> <HEAD> Qui scrivo il titolo della pagina </HEAD> <BODY> Qui scrivo il testo della pagina </body> </html> 3) Salva la pagina con il nome “prova.html“ (file - salva con nome - prova.html) nella tua cartella di lavoro 4) Chiudi la finestra del programma 5) Apri la pagina “prova" dalla cartella in cui l'hai salvata.

Seconda LEZIONE- l’header del documento
Il risultato finale della nostra prima pagina web dovrebbe essere il seguente: Qui scrivo il titolo della pagina Qui scrivo il testo della pagina Per migliorarne l’aspetto, col fine che il nostro titolo sia ben evidenziato, operare nel seguente modo: riapriamo il nostro file prova.html (tasto destro del mouse – apri con - Blocco note) modifichiamo la frase Qui scrivo il titolo della pagina nel seguente modo <h1> Qui scrivo il titolo della pagina </h1> risalviamo il file e vediamo l’effetto creato dovrebbe essere il seguente: Qui scrivo il titolo della pagina Qui scrivo il testo della pagina i livelli di heading vanno da 1 (il più grande) a 6 modificare il file prova.html con i vari livelli di heading

Seconda LEZIONE bis – grassetto, inclinato, sottolineato
riapriamo il nostro file prova.html (tasto destro del mouse – apri con - Blocco note) modifichiamo la frase Qui scrivo il teato della pagina nel seguente modo <B> Qui scrivo </B> il <I> titolo </I> <U> della pagina </U> risalviamo il file e vediamo l’effetto creato dovrebbe essere il seguente: Qui scrivo il testo della pagina

Range massimo per le dimensioni dei caratteri da +7 a -7
Terza LEZIONE - i fonts Il testo che apparirà sul display può essere caratterizzato, e personalizzato, utilizzando una miriade di fonts diversi scelti ad esempio tra i Times, Times New Roman, Arial, Algerian, ecc… Esempio: Modifichiamo il nostro file scrivendo prima del tag </BODY> i seguenti tags: <font color="#FF0000" face="Arial" size=“+6"> Prova per colore, stile e dimensioni del carattere </font> N.B. al posto dei valori esadecimali (#FF0000 – possiamo digitare il nome del colore, ad esempio RED, YELLOW, GREEN, BROWN, ecc… Se vogliamo che le dimensioni del carattere siano minori rispetto a quello standard basta mettere il segno meno davanti al numero nell’istruzione size Range massimo per le dimensioni dei caratteri da +7 a -7

TERZA LEZIONE bis – colori della pagina
all’interno del BODY della pagina web possiamo impostare i colori per lo sfondo. <BODY BGCOLOR= "#000080“ > (# = verde scuro) (# = blue scuro) (#ff = rosso vivo) (# = rosso scuro) OPPURE DIGITARE IL COLORE: YELLOW, RED, BLUE, ECC… Se vogliamo inserire un’immagine come sfondo basta sostituire all’argomento bgcolor l’argomento (indicando il path dove si trova l’immagine.gif) background=“immagine.gif” Provare a impostare i colori nella nostra pagina web Sapendo che:”#000000” = nero; ”#000080” = blue; ”#0000FF” = azzurro; ”#C0C0C0” = grigio; ”#FF0000” = rosso; ”#FF00FF” = magenta; ”#00FF00” = verde; ”#FFFF00” = giallo; ”#FFFFFF” = bianco. Il numero dei colori và da FFFFFF a cioè a 166 pari a ben combinazioni realizzabili

Quale programma è consigliabile utilizzare per creare pagine web? Quale funzione svolge il tag <h1>? Quale funzione svolge il tag <b>? Quale funzione svolge il tag <i>? Quale funzione svolge il tag <u>? Quale funzione svolge il tag <font color=>? All’interno del tag font color=, a cosa serve aggiungere Face=? All’interno del tag font color, a cosa serve aggiungere Size=?

Quarta LEZIONE - Il corpo del documento
Per centrare un testo inserire il tag <CENTER> Per creare un a capo inserire il tag <BR> (Break Row) Per creare un nuovo paragrafo inserire il tag <P> (paragraph) Un attributo molto usato con il tag <P> è ALIGN <P ALIGN=left> (allinea il testo a sinistra) <P ALIGN=right> (allinea il testo a destra) <P ALIGN=center> (allinea il testo al centro) Per creare una riga di separazione inserire il tag <HR> (Horizontal Rule) I suoi attributi sono WIDTH (dimensioni della larghezza del riquadro), ALIGN, SIZE (dimensioni dell’altezza del riquadro) e NOSHADE (per non visualizzare l’effetto ombra) Provare gli effetti dei vari tag sul nostro file utilizzando il seguente comando <body> <hr ALIGN=CENTER SIZE=25 NOSHADE WIDTH="60%"> Qui scrivo il testo della pagina

Quinta LEZIONE – il tag <PRE>
A volte risulta molto utile poter visualizzare un testo esattamente come lo si scrive, tenendo conto di “spazi” ed “a capo” così come sono stati digitati. L’istruzione da utilizzare in questo caso è <PRE> (PREformatted) Modifichiamo il nostro file scrivendo prima del tag </BODY> le seguenti frasi: <PRE> “Tutto quello che sto scrivendo viene visualizzato andando a capo quando lo richiedo con tutti i caratteri di s p a z i a t u r a in questo modo tutto viene riportato come l’ho scritto.” </PRE>

Per centrare del testo si usa il tag… Quale funzione svolge il tag <br>? Quale funzione svolge il tag <p>? Il tag <p> può essere seguito da Align che serve per … Quale funzione svolge il tag <hr>? Quale funzione svolge il tag <hr ALIGN=CENTER SIZE=25 NOSHADE WIDTH="60%"> Quale funzione svolge il tag <pre>? Tag HTML di base

Sesta LEZIONE – le Liste
Lista Semplice La lista semplice (ELENCO PUNTATO) inizia sempre con il tag <ul> (Unordered List) e finisce con il corrispondente </ul>. Ogni singola riga viene individuata dal tag <li> (List Item), un eventuale intestazione deve essere contenuta fra i tags <lh> … </lh> (List Header). Esempio: creiamo una lista non ordinata nella nostra pagina web prima del TAG </BODY> <UL> <LH> Lista della merce per la rivendita</LH> <LI> Panini </LI> <li> Pizzette </li> <li> Coca cola </li> <li> Duplo </li> </UL>

Sesta LEZIONE bis – le Liste
Lista Semplice Al tag <ul> possiamo associare TYPE= per definire un punto elenco differente (CIRCLE, SQUARE, DISC) - Provare le diverse forme, scrivendo ad esempio il seguente tag: <ul type=circle> <UL TYPE=CIRLCE> <LH> Lista della merce per la rivendita</LH> <LI> Panini </LI> <li> Pizzette </li> <li> Coca cola </li> <li> Duplo </li> </UL> Provare anche con SQUARE: <UL TYPE=SQUARE > <LH> Lista della merce per la rivendita </LH> ………………. </UL>

Settima LEZIONE – le Liste
Lista Ordinata La lista ordinata (ELENCO ORDINATO) si distingue da quella semplice in quanto prevede un certo ordine logico nelle voci che la compongono i tags che ne definiscono l’inizio ed il termine sono rispettivamente <ol> (Ordered List) e </ol>. Il resto della sintassi e analoga a quella della lista semplice. Esempio: creiamo una lista ordinata nella nostra pagina web <OL> <LH> Lista della merce per la rivendita</LH> <LI> Panini </LI> <li> Pizzette </li> <li> Coca cola </li> <li> Duplo </li> </OL>

Settima LEZIONE BIS – le Liste
Lista Ordinata Al tag <ul> possiamo associare TYPE= per definire un tipo di elenco differente (1, A, a, i, I) e START= per stabilire da quale numero iniziare il conteggio - Provare le diverse forme, scrivendo ad esempio il seguente tag: <ol type=VALORE start=POSIZONE> Esempio: creiamo una lista ordinata nella nostra pagina web <OL TYPE=A> <LH> Lista della merce per la rivendita</LH> <LI> Panini </LI> <li> Pizzette </li> <li> Coca cola </li> <li> Duplo </li> </OL>

Settima LEZIONE TER – le Liste
Lista Ordinata Al tag <ul> possiamo associare TYPE= per definire un tipo di elenco differente (1, A, a, i, I) e START= per stabilire da quale numero iniziare il conteggio - Provare le diverse forme, scrivendo ad esempio il seguente tag: <ol type=VALORE start=POSIZIONE> Esempio: creiamo una lista ordinata nella nostra pagina web <OL TYPE=i START=7> <LH> Lista della merce per la rivendita</LH> <LI> Panini </LI> <li> Pizzette </li> <li> Coca cola </li> <li> Duplo </li> </OL>

Per creare una Lista Ordinata e Semplice si usano i tag … Quale funzione svolge il tag <LH>? Quale funzione svolge il tag <LI>? Il tag <ul> (lista semplice) può essere seguito da … che serve per … Il tag <ol> (lista ordinata) può essere seguito da … che servono per …

Ottava LEZIONE – le Immagini (IMG + ALT)
Il tag che definisce un’immagine all’interno di un documento è <IMG> seguito dal percorso del file immagine (src=“path”) <IMG SRC=“immagine.gif“> è consigliabile aggiungere all’interno del tag il comando ALT=“commento” (ad esempio: alt=“immagine non disponibile”). Nel caso in cui il browser non riesca a visulizzare la nostra immagine apparirà il commento definito dopo l’istruzione ALT= Provare tali istruzioni nella nostra pagina web

Nona LEZIONE – le Immagini (WIDTH + HEIGHT)
Nell’LEZIONE precedente abbiamo appreso che il tag <IMG> seguito dal percorso del file immagine (src=“path”) ci consente di inserire un’immagine nella pagina web. A tale istruzione possiamo aggiungere le istruzioni width: larghezza e height: altezza <img src=“immagine.gif“ width=“xxx” height=“xxx”> i valori “xxx” indicano le dimensioni dell’immagine da visualizzare I formati grafici supportati sono: GIF (le più indicate); JPEG (un po’ più pesanti delle GIF) e BITMAP (da usare solo se necessarie) Decima LEZIONE – le Immagini (BORDER) Il tag <border=valore> inserisce una cornice all’immagine delle dimensioni stabilite (per default il valore è zero) <img src=“immagine.gif“ width=“xxx” height=“xxx” border=5>

Per inserire un’immagine si usa il tag … A cosa serve l’istruzione SRC? Il tag ALT= serve per … Per ridimensionare l’immagine, in altezza e in larghezza, si utilizzano … Il tag <border> ci permette di … Ordina, in base al loro “peso”, i principali formati immagine utilizzate in Internet

Decima LEZIONE – i collegamenti ipertestuali: frasi
I collegamenti ipertestuali, chiamati generalmente link, sono degli elementi del documento HTML (come parole o immagini) che, una volta ‘cliccati’, consentono di passare ad un’altra sezione dello stesso o di un altro documento. Il tag che si occupa della creazione e gestione dei link è <A> … </A> al quale si possono associare numerosi argomenti quale, ad esempio, il link al sito del nostro istituto: <A href=" visita il sito della nostra scuola </A> la frase “visita il sito della nostra scuola” è ciò che apparirà sulla pagina web e che consente il link all’URL definito (Per URL s’intende una sorta di indirizzo universale tramite il quale è possibile definire in maniera univoca un sito, un certo documento o una sua specifica parte)

Undicesima LEZIONE – i collegamenti ipertestuali: la Posta elettronica (e_mail)
Anche la Posta Elettronica è considerato un collegamento ipertestuale, che si può realizzare mediante frasi o immagini, come nell’esempio seguente <A Per inviare una mail clicca qui </A> Provare a costruire il link per inviare un’ all’indirizzo specificato

Quattordicesima LEZIONE – le Tabelle
Una delle maggiori innovazioni avvenute nelle definizioni del linguaggio HTML è stata l’introduzione delle Tabelle, con queste è possibile visualizzare calendari, posizionare immagini in aree dello schermo altrimenti irraggiungibili, migliorare l’aspetto di tutto il sito o creare listini prezzi. Il tag che consente la definizione di una tabella è <TABLE> … </TABLE> per vedere l’effetto di una tabella nella nostra pagina web digitiamo, all’interno del BODY, i seguenti tags: <TABLE border=2 cellspacing=5 cellpadding=5> <TR> <TH> COGNOME </TH> <TH> NOME </TH> <TD> BALOTELLI </TD> <TD> MARIO </TD> <TD > PIRLO </TD> <TD> ANDREA </TD> <TD> TOTTI </TD> <TD> FRANCESCO </TD> </TABLE> (TH: intestazione della tabella – TD: contenuto di una cella – TR: riga della tabella L’attributo BORDER è utilizzato per dare spessore al bordo della tabella, CELLPADDING indica lo spazio da lasciare a destra e a sinistra del contenuto della cella, CELLSPACING indica lo spazio da lasciare tra una cella e l’altra come bordatura

A cosa serve il tag <A> All’interno del tags <A> HREF … </A> possiamo inserire …. Quale funzione svolge il tag <table>? Il tag <TH> serve per … Il tag <TD> serve per … Il tag <TR> serve per … alla fine bisogna chiuderlo?

Dodicesima LEZIONE – le Tabelle - parametri
Parametri che consentono di manipolare a piacere le tabelle Parametri del tag <TABLE> ALIGN=(left, center, right) allinea la tabella al margine voluto (sinistro, centro, destro) della finestra BGCOLOR=“#rrggbb” assegna alla tabella il colore specificato in “#rrggbb” dove tali paramentri vanno, come già detto nelle precedenti lezioni, da (nero) ad FFFFFF (bianco) BORDERCOLOR=“#rrggbb” assegna al bordo della tabella il colore specificato in “#rrggbb” BORDERCOLORLIGHT=“..” consente di definire un colore più chiaro da utilizzare nella definizione di un bordo dall’aspetto tridimensionale BORDERCOLORDARK=“…” consente di definire un colore più scuro da utilizzare nella definizione di un bordo dall’aspetto tridimensionale Provare a impostare le dimensioni ed i colori nella tabella della nostra pagina web

Tredicesima LEZIONE – i Forms – parte 1
I forms rappresentano, probabilmente, il metodo d’interazione con l’utente più usato dai siti presenti su Internet. In associazione con il protpcollo CGI (Common Gateway Interface) è possibile creare dei questionari, dei moduli per l’interrogazione, dei motori di ricerca, dei moduli d’invio posta, dei carrelli della spesa virtuali e quant’altro possa venire in mente all’amministratore del sito. Il tag che consente la creazione di forms è <FORM> … </FORM> Il tag <INPUT> definisce un campo nel quale è possibile inserire dei dati. I suoi parametri possibili sono elencati nella seguente tabella: Parametri che consentono di manipolare a piacere i FORMS TYPE Rappresenta il parametro più importante in quanto consente di specificare quale tipo di campo si desidera creare: CHECKBOX, crea delle caselline che possono assumere il valore yes oppure no HIDDEN, non viene visualizzato sul video ma è comunque elaborato dal server quando il form viene inviato all’utente IMAGE, quando l’utente clicca sopra l’immagine il form viene regolarmente inviato al server PASSWORD, permette d’inserire una password che non apparirà sullo schermo RADIO, simile al Checkbox, definisce delle caselline che possono essere selezionate una alla volta RESET, crea un pulsante, che se premuto azzera i dati inseriti SUBMIT, crea un pulsante che se premuto invia i dati al server TEXT crea un campo nel quale è possibile inserire una sola linea di testo

Diciottesima LEZIONE – i Forms – parte 2
Una volta definito il tipo di campo che si desidera inserire nel form, tramite il parametro TYPE (tabella della lezione precedente), è possibile specificarne le caratteristiche. Per raggiungere questo scopo sono previsti numerosi parametri aggiuntivi. TYPE ALIGN Viene utilizzato con le immagini cliccabili (TYPE=image). I valori possibili sono: ALIGN=top – middle – bottom – left – right CHECKED Viene utilizzato con i campi logici TYPE=checkbox oppure TYPE=radio. Specifica che al momento della visualizzazione del form, oppure dopo un click sul pulsante RESET, tali campi devono risultare attivi (posizione yes) MAXLENGHT Specifica il numero massimo di caratteri che possono essere inseriti in un campo NAME Specifica il nome del campo SIZE Specifica la dimensione massima del campo che apparirà nel form (da non confondere con maxlenght) VALUE Definisce il valore iniziale che assume il campo, è richiesto con TYPE=radio e TYPE=checkbox URL Specifica l’URL dove è possibile trovare l’immagine cliccabile. Viene utilizzato con TYPE=image

Quattordicesima LEZIONE – i Forms – parte 3
Nelle lezioni precedente abbiamo appreso la composizione dei forms e dei parametri che possiamo associarvi. È ora di passare alla fase di realizzazione utilizzando la nostra pagina web. Provare a digitare i seguenti forms <html> <head> <h1> PROVA FORMS </h1> </head> <body> <form> <input type=radio name="Italia" value="y">Italia <br> <input type=radio name="Usa" value="y">Stati Uniti <br> <input type=radio name="Canada" value="y">Canada <br> <input type=checkbox name="Giappone“ value="y">Giappone <br> <input type=checkbox name="Cina" value="y">Cina </form> </body> </html>

Quindicesima LEZIONE – i Forms – parte 4
Provare a digitare i seguenti forms a) Per inserire una password in un forms. <html> <head> <h1> PROVA PASSWORD </h1> </head> <body> <form> <input type=password name="pwd"> <br> Digitare password </form> </body> </html> b) Per inserire i pulsanti di RESET e/o Invia Form <html> <head> <h1> PROVA RESET e INVIO</h1> </head> <body> <form> <input type=reset value="Pulsante di Reset"> <br> <input type=submit value="invia il Form" </form> </body> </html>

Sedicesima LEZIONE – i Forms – parte 5: SELECT
Il tag <SELECT>… </SELECT> definisce un campo dotato di più valori possibili, comodamente selezionabili tramite menù. Questo tag viene utilizzato in associazione al tag <OPTION> Provare a digitare i seguenti forms <html> <head> <h1> PROVA FINESTRA A MENU'</head> <body> <form> <SELECT NAME="Stati"> <OPTION VALUE="it">ITALIA <OPTION VALUE="us">STATI UNITI <OPTION VALUE="ca">CANADA <OPTION VALUE="jp">GIAPPONE <OPTION VALUE="ch">CINA </form> </body> </html> Modificando le seguenti righe cosa succede? <head> <h1> PROVA FINESTRA CON MENU‘ A TENDINA</head> <SELECT NAME="Stati" SIZE=3 MULTIPLE> La funzione SIZE specifica il numero di voci visibili (nel nostro caso 3), mentre la funzione MULTIPLE ci consente, (tenendo premuto il tasto control) di selezionare più voci del menù – Se dopo il parametro OPTION aggiungo il parametro SELECTED la voce di menù cui si riferisce verrà identificata come preselezionata alla prima visualizzazione del form, oppure dopo aver premuto il tasto RESET

Diciassettesima LEZIONE – i Forms – parte 6: TEXTAREA
Il tag <TEXTAREA>… </TEXTAREA> definisce un campo un campo libero nel quale si possono inserire dei commenti o delle richieste d’informazioni. Questo tag viene utilizzato in associazione ai parametri NAME (nome del campo), ROWS (numero di righe che compongono l’area per l’immissione dei dati e COLS (numero delle colonne). Provare a digitare i seguenti forms html> <head> <h1> PROVA TEXT AREA</head> <body> <form> <textarea name="note" rows=10 cols=20> Inserite i vostri commenti in questo spazio </textarea> <input type=reset value="Pulsante di reset"> <input type=submit value="Invia commento"> </form> </body> </html>

Introduzione al linguaggio HTML L’HTML (Hyper Text Markup Language)

Presentazioni simili

Presentazione sul tema: "Introduzione al linguaggio HTML L’HTML (Hyper Text Markup Language)"— Transcript della presentazione:

Presentazioni simili

Sul progetto

Feed-back

Entrare

Autorizzarsi attraverso i social network:

Introduzione al linguaggio HTML L’HTML (Hyper Text Markup Language)

Presentazioni simili

Presentazione sul tema: "Introduzione al linguaggio HTML L’HTML (Hyper Text Markup Language)"— Transcript della presentazione:

Presentazioni simili

Sul progetto

Feed-back