Introduzione all HTML
|
|
|
- Severina Manfredi
- 7 anni fa
- Visualizzazioni
Transcript
1 prof. ing. Dino Molli SVILUPPO SOFTWARE - FORMAZIONE E CONSULENZA INFORMATICA MARIGLIANO (NA) info@dinomolli.it Dispense a cura del prof. ing. Dino Molli Introduzione all HTML Introduzione all H T M L pag. 1/15
2 Il linguaggio HTML Il linguaggio HTML (HyperText Markup Language) è il linguaggio con cui sono scritte le pagine Web. E un linguaggio definito attraverso degli standard internazionali, anche se la Microsoft e la Netscape utilizzano delle versioni proprie di questo linguaggio di modo che non c è perfetta compatibilità tra pagine scritte espressamente per Internet Explorer e pagine per Netscape. HTML non è un linguaggio di programmazione: esso infatti consente di descrivere il contenuto di una pagina Web, indicando di quali parti essa è composta e in che modo devono apparire sullo schermo, ma non è possibile creare programmi semplicemente in HTML (ad esempio non è possibile prendere decisioni, ripetere dei comandi, memorizzare dei dati ed altro). Le pagine Web sono memorizzate in file HTML la cui estensione è.html (o.htm) che è essenzialmente un file testo leggibile anche con un normale editor (ad esempio Blocco Note per Windows). HTML è un linguaggio basato sui tag ( tagged ), ossia la pagina è descritta inserendo dei comandi (detti appunto tag) all interno del testo da visualizzare. I tag sono distinguibili dal testo vero e proprio perché sono scritti tra parentesi angolari (< e >), mentre il testo è tutto quello non contenuto entro parentesi angolari. Ad esempio in questo frammento di pagina <h1> Il linguaggio HTML </h1> <font size=5> U</font>na <B> breve </B> introduzione </br> i tag sono <h1> </h1> <font size=5> </font> <B> </B> </br> e il testo è Il linguaggio HTML Una breve introduzione. Segue ora una breve introduzione ai comandi principali del linguaggio HTML, versione 4.0. Per una più completa descrizione del linguaggio si rinvia a testi specializzati, sia cartacei, sia on-line. Introduzione all H T M L pag. 2/15
3 Generalità Come si è già visto, il linguaggio HTML è basato sui tag, che possono essere scritti indifferentemente sia in maiuscolo, che in minuscolo. Molti tag devono racchiudere delle parti di testo (ad esempio il tag H1) perché hanno effetto solo su quella parte di testo. Perciò hanno un loro corrispondente tag di chiusura, che presenta una barra (/) davanti al nome: il tag di chiusura di H1 è /H1; si dirà inoltre che H1 è il tag di apertura di /H1. La mancanza del tag di chiusura è solitamente una condizione di errore e può causare una visualizzazione non corretta della pagina. Altri tag (ad esempio BR o IMG) non hanno il corrispondente tag di chiusura. Se si devono usare due tag di apertura uno dentro l altro, allora i rispettivi tag di chiusura devono apparire nell ordine inverso. Ad esempio se si hanno due coppie di tag <X> </X> e <Y> </Y> in cui Y deve comparire all interno del tag X allora un loro possibile utilizzo è <X> <Y>. </Y> </X> mentre non è corretto disporli in questo modo <X> <Y>. </X> </Y> poiché il tag X viene chiuso prima del tag Y. Nella maggior parte dei tag si ha la possibilità di specificare il valore di uno o più attributi, cioè delle caratteristiche che indicano più precisamente l effetto del tag. Ad esempio il tag FONT ha un attributo SIZE; nell esempio sopra citato si è dato a SIZE il valore 5 con il comando <FONT SIZE=5>. Se in un tag di apertura si assegnano dei valori agli attributi, allora nel tag di chiusura non si devono ripetere gli attributi, cioè il tag di apertura <FONT SIZE=5> viene chiuso dal semplice tag </FONT> e non dal tag </FONT SIZE=5>. Se si specificano i valori di più attributi questi devono essere separati da uno spazio e l ordine di assegnamento non conta, ad esempio <FONT SIZE=5 FACE= Arial > e <FONT FACE= Arial SIZE=5> sono equivalenti. Struttura principale di una pagina La struttura di una normale pagina Web è la seguente <HTML> Introduzione all H T M L pag. 3/15
4 <HEAD> intestazione della pagina </HEAD> <BODY> corpo della pagina </BODY> </HTML> L intestazione (HEAD) Dispense a cura del prof. Ing. Dino Molli Nell intestazione vengono inserite delle informazioni sulla pagina Web, che a parte il titolo, non vengono visualizzate ma sono utilizzate dal browser e dai motori di ricerca. Per specificare il titolo della pagine (compare sulla parte superiore della finestra, in blu) si usa <TITLE> titolo della pagina </TITLE> Per specificare le parole chiave e il contenuto della pagina Web (informazioni usate più che altro dai motori di ricerca) si usano i tag META <META NAME="KEYWORDS" CONTENT= parole chiave della pagina > <META NAME="DESCRIPTION" CONTENT="descrizione della pagina > Il corpo (BODY) Il corpo di una pagina contiene tutte le parti normalmente visualizzate all interno della finestra del browser (testo, immagini, ecc.). Tutti i comandi successivi, tranne quelli relativi ai frame, sono utilizzabili solo all interno del body. Intestazioni I tag fondamentali di formattazione Esistono sei livelli di intestazioni, cioè di tipi di titoli inseribili nella pagina <H1> Intestazione di primo livello </H1> <H2> Intestazione di secondo livello </H2> <H3> Intestazione di terzo livello </H3> <H4> Intestazione di quarto livello </H4> <H5> Intestazione di quinto livello </H5> <H6> Intestazione di sesto livello </H6> Introduzione all H T M L pag. 4/15
5 L intestazione di primo livello viene visualizzata con caratteri molto grandi, quella di secondo livello con caratteri grandi, ma più piccoli di H1, fino ad arrivare a H6, che dovrebbe essere poco più grande del testo normale. Formattazione del carattere Per impostare la formattazione del carattere si usa il tag FONT con la sintassi <FONT FACE= nome del font COLOR= colore SIZE=grandezza> testo </FONT> Gli attributi FACE, COLOR e SIZE sono tutti facoltativi e ognuno di essi può essere specificato oppure no (e in tal caso si intende che quella caratteristica non viene cambiata). FACE modifica il tipo di carattere (il font nel senso letterale del termine). Ad esempio <FONT FACE= arial > Scritta in Arial </FONT> COLOR definisce il colore dei caratteri. Il colore viene specificato in due modi. Per alcuni colori molto usati basta scrivere il colore in inglese (AQUA, BLACK, BLUE,FUCHSIA, GREY,GREEN, LIME, MAROON, NAVY, OLIVE, PURPLE, RED, SILVER, TEAL, WHITE e YELLOW). Ad esempio <FONT COLOR= Red > Scritta in rosso </FONT> Tutti gli altri colori sono descritti con una codifica standard detta RGB. In pratica il colore viene decomposto nelle componenti fondamentali: rosso, verde e blu. Ogni colore è quindi visto come una percentuale di rosso, di verde e di blu, ad esempio il giallo è 100% rosso, 100% verde e 0% blu. Le percentuali sono poi moltiplicate per 255 ed espresse nel codice esadecimale. Ad esempio il giallo è FF FF 00. Per inserire il codice RGB si premette un carattere #. Ad esempio <FONT COLOR= #FFFF00 > Scritta in giallo </FONT> SIZE imposta la grandezza dei caratteri. Ad esempio <FONT SIZE= 6 > testo scritto molto piccolo </FONT> <FONT SIZE= 36 > testo scritto molto grande </FONT> La grandezza è un numero positivo compreso tra 1 (più piccolo) e 7 (più grande) o un numero relativo compreso tra 7 e +7. Il numero relativo indica Introduzione all H T M L pag. 5/15
6 se aumentare (ad esempio +2) o diminuire (ad esempio 1) la grandezza rispetto ai caratteri precedenti. Per rendere dei caratteri in grassetto, in corsivo o sottolineato si usa rispettivamente <B>caratteri da mettere in grassetto </B> <I>caratteri da mettere in corsivo </I> <U> caratteri da sottolineare </U> Formattazione del paragrafo Per andare a capo si usa il tag <BR> poiché l andata a capo in un testo viene considerato come uno spazio. Per delimitare un paragrafo si usa <P> testo del paragrafo </P> Alla fine del paragrafo viene lasciata una linea vuota. Per decidere l allineamento a sinistra, centrato e a destra si usano rispettivamente <P ALIGN=LEFT> testo allineato a sinistra </P> <P ALIGN=CENTER>testo centrato </P> <P ALIGN=RIGHT> testo allineato a destra </P> Elenchi Per creare un elenco puntato si usa <UL> <LI> elemento </LI> <LI> elemento </LI>... <LI> elemento </LI> </UL> Ogni elemento dell elenco sarà preceduto da un pallino (o da un altro simbolo a scelta e indicato nel tag UL con l attributo TYPE, che può assumere i valori DISC, CIRCLE, SQUARE). Per creare un elenco numerato si usa <OL> <LI> elemento </LI> <LI> elemento </LI>... Introduzione all H T M L pag. 6/15
7 <LI> elemento </LI> </OL> Ogni elemento dell elenco sarà preceduto da un numero progressivo (o con un altro sistema a scelta e indicato nel tag OL con l attributo TYPE). Immagini Elementi di decorazione Per inserire un immagine si usa il tag IMG <IMG SRC= immagine ALT= testo alternativo WIDTH= larghezza HEIGHT= altezza > in cui nell attributo obbligatorio SRC si deve indicare l URL dell immagine, e nei tag facoltativi ALT un testo alternativo che viene visualizzato al posto dell immagine (fino a che non viene visualizzata) e su una finestrella gialla quando si passa sull immagine WIDTH la larghezza dell immagine in pixel o in percentuale rispetto alla larghezza totale della pagina HEIGHT l altezza dell immagine in pixel o in percentuale rispetto all altezza totale della pagina Le immagini utilizzate comunemente sono in formato GIF, per disegni, piccole fotografie e disegni animati, e in formato JPEG, per fotografie di dimensioni normali. Poco diffuso, ma standard, è il formato PNG. Righe Una riga orizzontale si ottiene con il tag <HR>. Si può specificare lo spessore della riga con l attributo SIZE. Colori e sfondo Per decidere i colori della pagina e l eventuale sfondo si usa al posto del tag senza attributi <BODY>, una versione più dettagliata con diversi attributi tutti opzionali <BODY BGCOLOR= colore sfondo TEXT= colore caratteri LINK= colore collegamenti VLINK= colore collegamenti visitati BACKGROUND= immagine sfondo > in cui BGCOLOR indica il colore da usare come sfondo di tutta la pagina TEXT indica il colore dei caratteri (tranne quelli sotto l effetto di un tag <FONT COLOR= >) LINK indica il colore dei caratteri del testo di un link non ancora visitato Introduzione all H T M L pag. 7/15
8 VLINK indica il colore dei caratteri del testo di un link già visitato BACKGROUND indica l URL di un immagine da mettere come sfondo di tutta la pagina. I colori sono specificati come nel tag FONT. Collegamenti (Link) Per creare un link ad una pagina (o in generale ad una risorsa) si usa il comando A (abbreviazione di ANCHOR) <A HREF= URL nuova pagina > testo del link </A> Il testo del link verrà visualizzato con un colore diverso (specificato negli attributi LINK e VLINK del tag BODY, o deciso dal browser) e sottolineato. Passando sopra al link con il mouse comparirà solitamente nella barra di stato del browser l indirizzo a cui saltare. Dentro il testo del link può anche comparire un immagine, che sarà cliccabile anche lei. E inoltre possibile creare un collegamento ad una parte della stessa pagina, o di un altra pagina, attraverso l uso dei frammenti. Ad esempio se una pagina è molto lunga (per esempio dieci schermate), può essere utile inserire un link che porti ad inizio pagina. Per fare ciò bisogna individuare il punto della pagina a cui saltare e dargli un nome con il comando <A NAME= nome del frammento > ad esempio <A NAME= inizio > e poi creare un link la cui URL di arrivo sia il nome del frammento preceduto dal carattere #, ad esempio <A HREF= #inizio > Torna all inizio della pagina </A> E possibile combinare insieme i due tipi di link e inserire un collegamento ad una parte di un altra pagina con il link <A HREF= indirizzo_pagina#parte > Tabelle Il comando per creare una tabella di M righe per N colonne è <TABLE BORDER= dim. bordo > <TR> <TD> dato riga 1 colonna 1</TD> Introduzione all H T M L pag. 8/15
9 <TD> dato riga 1 colonna 2</TD> <TD> dato riga 1 colonna N</TD> </TR> <TR> <TD> dato riga 2 colonna 1</TD> <TD> dato riga 2 colonna 2</TD> <TD> dato riga 2 colonna N</TD> </TR> <TR> <TD> dato riga M colonna 1</TD> <TD> dato riga M colonna 2</TD> <TD> dato riga M colonna N</TD> </TR> </TABLE> Dispense a cura del prof. Ing. Dino Molli In pratica ogni riga inizia con il tag <TR> e finisce con </TR>, al suo interno ogni cella è delimitata da <TD> e </TD>. Il testo di una cella può essere allineato a sinistra, al centro o a destra con i comandi <TD ALIGN= LEFT > testo della cella </TD> <TD ALIGN= CENTER > testo della cella </TD> <TD ALIGN= RIGHT > testo della cella </TD> Una cella può contenere il titolo della colonna o della riga, in tal caso al posto di <TD> </TD> si usa <TH> </TH>, in tal modo il contenuto della cella è scritto in grassetto e centrato. La dimensione del bordo è specificata in punti e può anche essere 0, in tal caso la tabella viene disegnata senza griglia: una tabella del genere si usa ad esempio per posizionare scritte e immagini in riga o in colonna. Una cella può occupare anche più di una riga con il comando <TD ROWSPAN=num_righe> testo </TD> o più colonne con il comando <TD COLSPAN=num_colonne> testo </TD> Ad esempio la tabella Introduzione all H T M L pag. 9/15
10 Tabella Nazione Italia Francia Inghilterra Capitale Roma Parigi Londra si ottiene con <TABLE BORDER=1> <TR> <TD COLSPAN=2> Tabella </TD> </TR> <TR> <TH> Nazione </TH> <TH> Capitale </TH> </TR> <TR> <TD> Italia </TD> <TD> Roma </TD> </TR> <TR> <TD> Francia </TD> <TD> Parigi </TD> </TR> <TR> <TD> Inghilterra </TD> <TD> Londra </TD> </TR> </TABLE> mentre la tabella Nazione Italia Olanda Capitale Roma L Aja Amsterdam si ottiene con <TABLE BORDER=1> <TR> <TD> Nazione </TD> <TD> Capitale </TD> </TR> <TR><TD ALIGN= CENTER > Italia </TD> <TD> Roma </TD> </TR> <TR> <TD ALIGN= CENTER ROWSPAN=2> Olanda </TD> <TD> L Aja </TD> </TR> <TR> <TD> Amsterdam </TD> </TR> </TABLE> Frame I frame sono il meccanismo per far visualizzare più pagine Web sulla stessa schermata. Le pagine presenti nella schermata possono essere disposte in modo verticale, una a fianco all altra (a colonne) o in modo orizzontale, una sopra l altra (a righe). Per comporre un frame di N pagine bisogna creare una pagina contenitore che contiene i riferimenti alle pagine, in cui al posto del corpo (tutto quello Introduzione all H T M L pag. 10/15
11 compreso tra <BODY> e </BODY>) si deve inserire un tag FRAMESET e l indicazione delle pagine che compaiono nel frame. Per indicare un frame a colonne si usa <FRAMESET COLS= larghezza colonna1,larghezza colonna2,, larghezza colonna2 > <FRAME SRC= sorgente1 NAME= nome del frame1 > <FRAME SRC= sorgente2 NAME= nome del frame2 > <FRAME SRC= sorgenten NAME= nome del framen > </FRAMESET> in cui sorgente1, sorgente2,, sorgenten sono le URL delle pagine che devono apparire, invece nome del frame1, nome del frame2,, nome del framen sono dei nomi che associano a ciascuna colonna e che serviranno per i link. Per ogni colonna va indicata la larghezza in termini di pixel o di percentuale di larghezza della finestra. Ad esempio per creare un frame di due colonne di uguale larghezza, in cui la prima contiene la pagina pag1.html e la seconda pag2.html pag1.html pag2.html si deve scrivere <HTML> <FRAMESET COLS= 50%,50% > <FRAME SRC= pag1.html NAME= sinistra > <FRAME SRC= pag2.html NAME= destra > </FRAMESET> </HTML> Se invece si desidera creare un frame a righe si deve usare <FRAMESET ROWS= altezza riga1, altezza riga2,, altezza rigan > al posto di <FRAMESET COLS= > indicando le altezze di ogni riga, sempre in termini di pixel o di percentuale di altezza della finestra. Introduzione all H T M L pag. 11/15
12 Si possono anche combinare frame orizzontali e verticali insieme. Ad esempio una schermata con tre pagine web disposte in questo modo pag_sup.html pag_sin.html pag_des.html si può ottenere con un frame di due righe in cui la seconda riga è sua volta un frame di due colonne: <HTML> <FRAMESET ROWS= 20%,* > <FRAME SRC= pag_sup.html NAME= sopra > <FRAMESET COLS= 30%,* > <FRAME SRC= pag_sin.html NAME= sinistra > <FRAME SRC= pag_des.html NAME= destra > </FRAMESET> </FRAMESET> </HTML> * come dimensione indica di usare tutto il resto della schermata. Per eliminare i border usare l attributo FRAMEBORDER= NO sul tag FRAMESET. I link con i frame Se in una pagina di un frame c è un link, allora se l utente clicca sul link, viene sostituita la pagina stessa. Ciò in qualche caso può essere corretto, ma in casi in cui una parte del frame è, ad esempio, l indice del sito, non va bene. In pratica in questo caso si vorrebbe che cliccando su un link di una parte del frame (l indice) venga sostituita un altra parte del frame. Bisogna a tal scopo modificare il link indicando con un attributo TARGET il nome del frame che deve essere sostituito per far posto alla nuova pagina: Introduzione all H T M L pag. 12/15
13 <A HREF= URL nuova pagina TARGET= nome del frame da sostituire >testo del link </A> Nell esempio di prima, se in pag1.html si vuole creare un link ad una pagina che si vada a sostituire a pag2.html si deve scrivere <A HREF= pag3.html TARGET= destra > Clicca qui </A>. Form I form sono il meccanismo per consentire all utente di digitare dei dati che verranno mandati al server per eventuali elaborazioni. Il classico esempio è dato dai motori di ricerca: in una schermata si possono digitare una o più parole chiave che vengono inviate al server e servono come base per la ricerca delle pagine web. Il server lancerà un programma, solitamente una CGI (ad esempio in Perl) oppure una pagina ASP o PHP per interpretare la richiesta dell utente. Per creare una form si usa il comando <FORM ACTION= programma METHOD= metodo invio > elementi della form </FORM> Il programma che deve trattare i dati digitati nella form viene indicato nell attributo ACTION. Il metodo di invio può essere GET (i dati saranno visibili nell URL del programma) o POST. Gli elementi della form possono essere dei tag INPUT, SELECT o TEXTAREA. Il tag INPUT serve a inserire delle caselle di testo <INPUT TYPE= TEXT NAME= nome > delle checkbox <INPUT TYPE= CHECKBOX NAME= nome VALUE=valore> delle caselle radio-button (checkbox mutuamente esclusivi) <INPUT TYPE= RADIO NAME= nome VALUE=valore> e infine i due pulsanti della form, uno per inviare i dati <INPUT TYPE= SUBMIT VALUE= scritta del pulsante > e uno per cancellare i dati <INPUT TYPE= RESET VALUE= scritta del pulsante > Introduzione all H T M L pag. 13/15
14 Il tag SELECT consente di creare dei menù a tendina simili ai ListBox di Visual Basic <SELECT NAME= nome > <OPTION VALUE= valore1 > titolo opzione 1 <OPTION VALUE= valore2 > titolo opzione 2... </SELECT> Infine il tag TEXTAREA serve per creare delle caselle di testo di più linee. I dati digitati nella form saranno inviati al programma dopo aver cliccato sul pulsante di tipo SUBMIT e saranno distinti attraverso il nome indicato con l attributo NAME dei vari INPUT, SELECT e TEXTAREA. Ad esempio una form per inserire dei dati anagrafici da inviare al programma Registra.pl sarà <FORM ACTION= Registra.pl > Cognome: <INPUT TYPE= text NAME= cognome > <BR> Nome: <INPUT TYPE= text NAME= nome > <BR> Sesso: M <INPUT TYPE= radio NAME= sesso VALUE= M > F <INPUT TYPE= radio NAME= sesso VALUE= F > <BR> Cittadinanza: <SELECT NAME= cittad > <OPTION VALUE= I > Italiana <OPTION VALUE= C > Comunitaria <OPTION VALUE= E > ExtraComunitaria </SELECT> <BR> <INPUT TYPE= SUBMIT NAME= Invia i dati > </FORM> Introduzione all H T M L pag. 14/15
15 S o m m a r i o Il linguaggio HTML... 2 Generalità... 3 Struttura principale di una pagina... 3 L intestazione (HEAD)... 4 Il corpo (BODY)... 4 I tag fondamentali di formattazione... 4 Intestazioni... 4 Formattazione del carattere... 5 Formattazione del paragrafo... 6 Elenchi... 6 Elementi di decorazione... 7 Immagini... 7 Colori e sfondo... 7 Collegamenti (Link)... 8 Tabelle... 8 Frame I link con i frame Form S o m m a r i o Introduzione all H T M L pag. 15/15
HTML Guida base. Guida grafica essenziale all Hyper Text Markup Language I parte
HTML Guida base Guida grafica essenziale all Hyper Text Markup Language I parte In questa breve guida imparerai come è fatta la struttura della pagina HTML impostare il titolo della pagina impostare lo
HTML Sintassi di HTML Tag principali per i contenuti I Forms
Lezione 1 HTML Sintassi di HTML Tag principali per i contenuti Tag principali per i contenuti I Forms L HTML (HyperText Markup Language) g è il linguaggio gg di markup utilizzato per veicolare le informazioni
non è linguaggio di markup formato testo .htm .html interpretando
HTML Gli ipertesti del web sono scritti usando il linguaggio HyperText Markup Language (HTML). HTML non è un linguaggio di programmazione! HTML non ha meccanismi per prendere delle decisioni o compiere
HTML. Es: La prossima parola è in <b>neretto</b> Es: La prossima parola è in neretto
HTML Il linguaggio HTML (HyperText Markup Language) utilizza annotazioni (tag) per descrivere come verrà visualizzato il documento sul browser di un client. L HTML non è un linguaggio di programmazione
Corso di PROGRAMMAZIONE IN RETE
Corso di PROGRAMMAZIONE IN RETE Laurea Specialistica - Media Education Dr. Annamaria Bria 1 1 Dipartimento di Matematica Università della Calabria Riferimenti MANUALE http://www.w3.org/tr/1999/rec-html401-19991224/
Il linguaggio HTML. <html> </html> I documenti HTML vanno racchiusi dentro una coppia di TAG (marcatori): apertura e chiusura.
Il linguaggio HTML I documenti HTML vanno racchiusi dentro una coppia di TAG (marcatori): apertura e chiusura. . I tag devono essere racchiusi dentro parentesi acute Il tag di chiusura
Programmazione Web D B M G. Il linguaggio HTML
Programmazione Web Il linguaggio HTML Il linguaggio HTML Concetti di base Le interfacce utente in HTML I form Le tabelle Il passaggio dei parametri contenuti nei form HTML: HyperText Markup Language Standard
Introduzione al linguaggio HTML
Introduzione al linguaggio HTML 1 Richiami introduttivi (1) sito Internet (sito Web o sito WWW) insieme delle pagine che si riferiscono ad uno stesso utente, argomento o azienda, registrate su un server
Linguaggio HTML. Elementi di Informatica e Programmazione Università degli Studi di Brescia. Il Linguaggio HTML
Reti Linguaggio HTML 1 Il Linguaggio HTML n HTML = Hypertext Markup Language n Linguaggio di markup di tipo descrittivo (usato per descrivere e formattare documenti ipertestuali) con una sintassi prestabilita
D B M G Il linguaggio HTML
Programmazione Web Il linguaggio HTML Il linguaggio HTML Concetti di base Le interfacce utente in HTML I form Le tabelle Il passaggio dei parametri contenuti nei form @2011 Politecnico di Torino 1 Concetti
HTML 3. Liste puntate ed ordinate Immagini
HTML 3 Liste puntate ed ordinate Immagini Creazione di elenchi Elenchi puntati (elenchi non ordinati) Elenchi numerati (elenchi ordinati) Elenchi annidati Elenchi menu Elenchi glossario Tecnologie di Sviluppo
@2011 Politecnico di Torino 1
Concetti di base Programmazione Web Il linguaggio HTML HTML consente di annotare un testo per contrassegnare le parti che lo compongono Le annotazioni sono realizzate tramite i "tag" Visualizzare documenti
Formattazione di liste
Formattazione di liste Con HTML si possono costruire liste puntate o numerate: Occorre definire l inizio e la fine della lista e poi definire ogni singolo elemento della lista. Le liste numerate si costruiscono
Introduzione. Elementi di Informatica. Standard. Struttura dei TAG - 1. Annidamento e Indentazione. Struttura dei TAG - 2
Università degli Studi di Udine Facoltà di Ingegneria CORSO DI LAUREA IN SCIENZE dell ARCHITETTURA Elementi di Informatica HTML e CSS D. Gubiani HTML è l acronimo di HyperText Markup Language che tradotto
Laboratorio Digitale 1
Informatica Corso di PROGRAMMAZIONE Applicata ai Beni IN Culturali RETE Laboratorio Digitale 1 Corso di Laboratorio Digitale 1 Corso di laurea comunicazione e DAMS Laurea Specialistica - Media Education
Corso di HTML. Prerequisiti. Modulo L2 B4 - Le tabelle. Concetto di tabella Coordinate di cella in una tabella. M. Malatesta B4-Le tabelle-06
Corso di HTML Modulo L2 B4 - Le tabelle 1 Prerequisiti Concetto di tabella Coordinate di cella in una tabella 2 1 Introduzione In questa Unità illustriamo il concetto e l uso delle tabelle in HTML. Le
STRUTTURA BASE DELLA PAGINA HTML
INDICE INDICE... 1 Convenzioni e simboli usati... 1 STRUTTURA BASE DELLA PAGINA HTML... 1 Alcuni dei Principali TAG Html:... 2 Gli attributi dei TAG Html:... 2 ALIGN... 2 attributi del tag ... 2
MODULO 7 HTML HTML. HTLM (Hypertext Markup Language) è un linguaggio per la creazione di documenti ipertestuali e ipermediali
MODULO 7 HTML MODULO 6 - HTML 1 HTML HTLM (Hypertext Markup Language) è un linguaggio per la creazione di documenti ipertestuali e ipermediali Un sistema ipertestuale è un insieme di nodi connessi da collegamenti.
HTML 4.01 Prima lezione
HTML 4.01 Prima lezione A cura di Ivano Stranieri 1 Programma del corso Le basi dell HTML Paragrafi e formattazione del testo Link Tabelle: sintassi ed utilizzo Creazione di frame Form ed interazione con
INTRODUZIONE AL LINGUAGGIO HTML: PARTE 2. Internet + HTML + HTTP = WWW
1 INTRODUZIONE AL LINGUAGGIO HTML: PARTE 2 Internet + HTML + HTTP = WWW Scopo della esercitazione 2 Conoscere i principali tag HTML Realizzare una propria Home Page utilizzando alcuni semplici tag HTML
a cura di Romina Biava HTML IMMAGINI ELENCHI TABELLE LINK FRAME FORM STRUTTURA DI UNA PAGINA HTML
a cura di Romina Biava HTML IMMAGINI ELENCHI TABELLE LINK FRAME FORM STRUTTURA DI UNA PAGINA HTML Le pagine web consistono in una "testa", in inglese head e un "corpo", detto anche body.
Il linguaggio HTML. Marco Porta - CIM: Web Design & Technologies
Il linguaggio HTML 1 Il linguaggio HTML Origini e caratteristiche dell'html... HTML = Hyper Text Markup Language è un linguaggio di markup, e in quanto tale non richiede alcuna conoscenza della programmazione
Programmazione Web D B M G. Il linguaggio HTML
Programmazione Web Il linguaggio HTML Il linguaggio HTML Concetti di base Le interfacce utente in HTML I form Le tabelle Il passaggio dei parametri contenuti nei form HTML: HyperText Markup Language Standard
Linguaggio per ipertesti
Linguaggio per ipertesti Un linguaggio per descrivere gli ipertesti è l HyperText Markup Language (HTML) Non è il solo (VRML,XML,...) l HTML è un linguaggio di formattazione e permette di formattare del
D B M G. Basi di dati. Programmazione Web: HTML. Programmazione Web. Il linguaggio Politecnico di Torino 1
Programmazione Web Il linguaggio HTML Il linguaggio HTML Concetti di base Le interfacce utente in HTML I form Le tabelle Il passaggio dei parametri contenuti nei form @2011 Politecnico di Torino 1 Concetti
D B M G. Basi di dati. Programmazione Web: HTML. Programmazione Web. Il linguaggio Politecnico di Torino 1
Programmazione Web Il linguaggio HTML Il linguaggio HTML Concetti di base Le interfacce utente in HTML I form Le tabelle Il passaggio dei parametri contenuti nei form @2011 Politecnico di Torino 1 Concetti
Ogni documento HTML è contraddistinto dai seguenti comandi di base, che ne definiscono la struttura:
COMANDI BASE HTML Ogni documento HTML è contraddistinto dai seguenti comandi di base, che ne definiscono la struttura: Nome del documento All'interno
Laboratorio di Informatica (Chimica)
Laboratorio di Informatica (Chimica) HTML: Elementi Avanzati. Walter Cazzola Dipartimento di Informatica e Comunicazione Università à degli Studi di Milano. e-mail: cazzola@dico.unimi.it Walter Cazzola
@2011 Politecnico di Torino 1
Il linguaggio HTML Programmazione Web Concetti di base Le interfacce utente in HTML I form Il passaggio dei parametri contenuti nei form Il linguaggio HTML Concetti di base Concetti di base HTML: HyperText
@2011 Politecnico di Torino 1
Il linguaggio HTML Programmazione Web Concetti di base Le interfacce utente in HTML I form Il passaggio dei parametri contenuti nei form Il linguaggio HTML Concetti di base Concetti di base HTML: HyperText
HTML. Es: La prossima parola è in <b>neretto</b> Es: La prossima parola è in neretto
HTML Il linguaggio HTML (HyperText Markup Language) utilizza annotazioni (tag) per descrivere come verrà visualizzato il documento sul browser di un client. HTML non è un linguaggio di programmazione ma
HTML. Es: La prossima parola è in <b>neretto</b> Es: La prossima parola è in neretto
HTML Il linguaggio HTML (HyperText Markup Language) utilizza annotazioni (tag) per descrivere come verrà visualizzato il documento sul browser di un client. HTML non è un linguaggio di programmazione ma
Comandi principali del linguaggio HTML (Hyper Text Markup Language)
Comandi principali del linguaggio HTML (Hyper Text Markup Language) Caratteristiche di HTML HTML è un linguaggio di formattazione (markup) di documenti ed è il linguaggio base per produrre documenti per
Modulo o Form in Html
Pagina dinamica E un documento contenente oggetti, dati e informazioni che possono variare anche in base all iterazione dell utente con il documento stesso. Un esempio classico è quello di una persona
HTML il linguaggio per creare le pagine per il web
HTML il linguaggio per creare le pagine per il web Parte II: elementi "complessi" HTML: frame i frame servono per suddividere il browser in parti indipendenti all interno delle quali si possono caricare
HTML il linguaggio per creare le pagine per il web
HTML: frame HTML il linguaggio per creare le pagine per il web Parte II: elementi "complessi" i frame servono per suddividere il browser in parti indipendenti all interno delle quali si possono caricare
HTML Guida di riferimento
Dipartimento di Elettronica ed Informazione Politecnico di Milano Informatica A - GES Prof. Plebani A.A. 2006/2007 HTML Guida di riferimento La presente dispensa e da utilizzarsi ai soli fini didattici
Tag <br> : per definire l interruzione di riga (andata a capo)(senza tag di chiusura); sta per break row
TAG FONDAMENTALI Tag : per definire l interruzione di riga (andata a capo)(senza tag di chiusura); sta per break row Tag , tag ,.tag : per definire le intestazioni (i titoli) e la loro
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:
HTML Settima lezione. 7 Aprile di Ivano Stranieri
HTML 4.01 Settima lezione 7 Aprile 2004 di Ivano Stranieri 0 Lezione precedente Cosa sono i FRAME A cosa servono i FRAME Sintassi Attributi Collegamenti e NOFRAME IFRAME Vantaggi e svantaggi dei FRAME
Informatica di Base Laboratorio di HTML Dott. Serena Villata A.A. 2004/05
Informatica di Base Multid@ms Laboratorio di HTML Dott. Serena Villata A.A. 2004/05 1 Che cos è l HTML? Hyper Text Markup Language Definisce le caratteristiche stilistiche di un documento, non è programmazione!
Corso di HTML. Prerequisiti. Modulo L3 3 Blocchi di testo
Corso di HTML Modulo L3 3 Blocchi di testo 1 Prerequisiti Formattazione di un testo Struttura a titoli di un testo Giustificazione e allineamento del testo 2 1 Introduzione In questa Unità vediamo altri
HTML Interazione con l utente
HTML Interazione con l utente Il web è interattivo e per questo motivo una pagina html deve prevedere la possibilità, per l'utente, di inviare informazioni o effettuare delle scelte. Il linguaggio HTML,
HTML - ESERCITAZIONE 1
HTML - ESERCITAZIONE 1 Impostazione - sfondo formattazione 1. Costruisci un file di testo e salvalo come pagina web (con estensione.htm) col nome: Cognome Nome 01. 2. Inserisci nella giusta posizione i
HTML Sesta lezione. 29 Marzo di Ivano Stranieri
HTML 4.01 Sesta lezione 29 Marzo 2004 di Ivano Stranieri 0 Lezione precedente Costruire una tabella Raggruppare righe (e colonne) Unire righe e colonne Attributi di e Come utilizzare
Tabelle HTML. Tabelle Un po di notazione.
Tabelle HTML!! Le tabelle in HTML permettono di rappresentare tabelle di dati ", ma anche di formattare del testo, delle immagini, altre tabelle in righe e colonne, possono cioè essere usate per l impaginazione
Tipi di testo. Esempio 4. Enfasi. Inserire immagini. Esempio 5 INFO WEB LEZIONE N.4
Tipi di testo INFO WEB LEZIONE N.4 RAVENNA, 13 MARZO 2008 All interno di un documento HTML è possibile inserire due tipi di testo Titoli Sei livelli di grandezza , ,, Paragrafi
Serve per impostare. enfatizza il testo (l effetto è quello del grassetto, comando utile per i motori di ricerca) <ul> comandi relativi all immagine
Comandi principali HTML Serve per impostare il titolo della pagina (nella sezione head) il font del titolo 1 il font del titolo 2 paragrafo una o più parole alle quali applicare
HTML Tutorial HTML By A.C. Neve 1
HTML Tutorial HTML By A.C. Neve 1 Il linguaggio HTML (Hyper Text Markup Language) è il più diffuso linguaggio per la creazione di pagine WEB. La creazione di un documento HTML si effettua con un qualsiasi
HTML HTML. HyperText Markup Language. Struttura di un documento. Gli elementi essenziali di un documento HTML sono i seguenti TAG: <HTML>...
HTML HyperText Markup Language Struttura di un documento HTML Gli elementi essenziali di un documento HTML sono i seguenti TAG: ... ... ... Struttura di un documento
Metodologie Informatiche Applicate al Turismo
Metodologie Informatiche Applicate al Turismo 6. HTML Parte II Paolo Milazzo Dipartimento di Informatica, Università di Pisa http://www.di.unipi.it/ milazzo milazzo di.unipi.it Corso di Laurea in Scienze
Informatica. Comunicazione & DAMS A.A. 2015/16. Dr.ssa Valeria Fionda
Informatica Comunicazione & DAMS A.A. 2015/16 Dr.ssa Valeria Fionda Pagina Web Struttura base pagina Web: (Heading
HTML: FORM. Prof. Francesco Accarino IIS Altiero Spinelli Via Leopardi 132 Sesto San Giovanni
HTML: FORM Prof. Francesco Accarino IIS Altiero Spinelli Via Leopardi 132 Sesto San Giovanni Form Text Radio Select CheckBox TextArea Button ... L'elemento serve per delimitare un modulo
"-//W3C//DTD XHTML 1.1//EN
XHTML 1.1 extensible HyperText Markup Language DOCTYPE All inizio di un documento xhtml bisogna specificare a quali regole ci atteniamo. Tutti i documenti che scriveremo inizieranno con 2 righe particolari:
IMMAGINI INTRODUZIONE
IMMAGINI INTRODUZIONE Prima di inserire le immagini nella pagina HTML, le stesse devono essere copiate all interno della cartella del progetto (Sito). La loro copia può avvenire o tramite Risorse del Computer
Web. HyperText Markup Language
Web HyperText Markup Language HTML HyperText Markup Language permette la creazione di documenti multimediali ipertestuali è il linguaggio per la creazione di pagine web non è l unico: PHP, JavaScript,
Le liste non ordinate
Le liste non ordinate Semplici elenchi preceduti da un pallino: segnala l inizio della lista precede ogni voce Attributi: disc(standard), square(quadrato pieno), circle(quadrato
Internet, il web e il linguaggio HTML. percorso 3. Form
Form Se le pagine web utilizzassero il linguaggio HTML limitatamente ai soli tipi di tag visti sino a questo punto, la comunicazione tra impianto tecnologico (computer, dati, programmi ecc.) ed utente
Linguaggio HTML (2) Attributi di <FONT> Per variare lo stile di carattere rispetto al default, si possono utilizzare tre attributi:
Linguaggio HTML (2) Attributi di Per variare lo stile di carattere rispetto al default, si possono utilizzare tre attributi: SIZE= numero per modificare le dimensioni Es:
Linguaggi di programmazione PC server-client CSS
Linguaggi di programmazione PC server-client CSS HTML MySQL PHP HTML: Hyper Tex Markup Language PHP: Hypertext Preprocessor CSS: Cascading Style Sheet MySQL: Relational database HTML Hyper Tex Markup Language
Laboratorio di Basi di Dati e Web/Basi di dati e Multimedia. Docenti: Alberto Belussi e Carlo Combi Lezione 5
Laboratorio di Basi di Dati e Web/Basi di dati e Multimedia Docenti: Alberto Belussi e Carlo Combi Lezione 5 HyperText Markup Language Linguaggio di descrizione di testi secondo lo schema SGML (Standard
Primi passi con HTML. Il documento HTML
Primi passi con HTML. Il documento HTML La mia prima pagina in HTML Questo è il corpo del documento che stiamo realizzando. Questa non è una nuova riga.
NOZIONI BASE DI HTML
NOZIONI BASE DI HTML Aggiornato al 06 marzo 2006 Ermes ZANNONI (ermes@zannoni.to.it) (http://www.zannoni.to.it) Indice : 1. Introduzione 2. Tag di default 3. Formattazione del testo 3.1 Dimensione del
APPUNTI DI HTML (QUARTA LEZIONE)
APPUNTI DI HTML (QUARTA LEZIONE) 1. LA STRUTTURA BASE DELLE TABELLE Le tabelle sono una parte estremamente importante del codice HTML. Sono uno strumento indispensabile per gestire i layout grafici. Immaginiamo
HTML 4.01 Seconda lezione
HTML 4.01 Seconda lezione A cura di Ivano Stranieri 0 Lezione precedente Cos è internet browser editor di testo HTML: cos è e cosa non è i marcatori i tag di struttura: DOCTYPE HTML HEAD TITLE META BODY
HTML il linguaggio per creare le pagine per il web
HTML il linguaggio per creare le pagine per il web Parte II: elementi "complessi" HTML: frame I frame servono per suddividere il browser in parti indipendenti all interno delle quali si possono caricare
HTML. Linguaggio testuale formato da TAG, che consente il collegamento tra diversi file.
Con la sigla HTML si intende: HYPER TEXT MARKUP LANGUAGE HTML Linguaggio testuale formato da TAG, che consente il collegamento tra diversi file. Iper testo Un documento o pagina puo essere collegato ad
<!-- TESTO DEL COMMENTO
Il corpo della pagina: il tag Come abbiamo già avuto modo di osservare, il tag definisce ed identifica il corpo della pagina, cioè la "porzione visibile" di un qualsiasi documento HTML. Avendo
I moduli HTML Interazione per l invio di informazioni in Internet
I moduli HTML Interazione per l invio di informazioni in Internet Sviluppo di siti web UD09 Fablab Design Interazione e uso dei moduli Uno dei fattori che ha decretato il successo del Web è senz'altro
WEB. Introduzione HTML. Gabriele Murara
WEB Introduzione HTML Gabriele Murara 1 HTML HTML = Hypertext Markup Language ("Linguaggio di contrassegno per gli Ipertesti"). non è un linguaggio di programmazione (sono linguaggi di programmazione il
CSS. Esercizi CC BY ALESSANDRO URSOMANDO DIAPOSITIVA 2 CSS PROPRIETÀ
CSS Esercizi CSS PROPRIETÀ DIAPOSITIVA 2 Corredare l esercizio precedentemente realizzato di un file.css che presenti delle dichiarazioni per impostare: l ampiezza del body a 800 pixel a giallo chiaro
HTML il linguaggio per creare le pagine per il web
HTML il linguaggio per creare le pagine per il web Parte II: elementi "complessi" HTML: frame i frame servono per suddividere il browser in parti indipendenti all interno delle quali si possono caricare
LEZIONE NO. 3: LE TABELLE DI ATTILIO ABBIEZZI
HTML BASE LEZIONE NO. 3: LE TABELLE DI ATTILIO ABBIEZZI 1 gestire Tabelle La larghezza e l'altezza complessiva di una tabella viene indicata all'interno dell'attributo , il quale appunto
HTML il linguaggio per creare le pagine per il web
HTML il linguaggio per creare le pagine per il web Parte II: elementi "complessi" HTML: frame I frame servono per suddividere il browser in parti indipendenti all interno delle quali si possono caricare
HTML il linguaggio per creare le pagine per il web
HTML: frame HTML il linguaggio per creare le pagine per il web Parte II: elementi "complessi" I frame servono per suddividere il browser in parti indipendenti all interno delle quali si possono caricare
Cl Calendario dl del corso
Cl Calendario dl del corso 12/02/2010 09.00-12.00 Introduzione al mondo WEB Concetti fondamentali e struttura di un sito e delle pagine pg web Gli URL, i link, le immagini I linguaggi HTML e CSS 16/02/2010
Frames. Come organizzare le pagine web usando i frames. Definizione Frame = 1. struttura, armatura, telaio 2. inf. videata, schermata, cornice
Frames Come organizzare le pagine web usando i frames Definizione Frame = 1. struttura, armatura, telaio 2. inf. videata, schermata, cornice Usare i frame Per poter usare i frame è necessario comunicare
Metodologie Informatiche Applicate al Turismo
Metodologie Informatiche Applicate al Turismo 7. HTML Parte III (Aspetti avanzati) Paolo Milazzo Dipartimento di Informatica, Università di Pisa http://www.di.unipi.it/ milazzo milazzo di.unipi.it Corso
Cimini Simonelli - Testa
WWW.ICTIME.ORG HTML Manuale introduttivo al linguaggio HTML Cimini Simonelli - Testa v.2-11/01/2008 Sommario Introduzione... 3 Formattazione della pagina... 4 Inserire un colore di sfondo... 4 Inserire
HTML il linguaggio per creare le pagine per il web
HTML: frame HTML il linguaggio per creare le pagine per il web Parte II: elementi "complessi" i frame servono per suddividere il browser in parti indipendenti all interno delle quali si possono caricare
INTRODUZIONE HTML. L HTML è un linguaggio (non di programmazione) che consente di realizzare ipertesti.
INTRODUZIONE HTML L HTML è un linguaggio (non di programmazione) che consente di realizzare ipertesti. Un ipertesto è un documento che può essere consultato anche in modo non sequenziale, ma con collegamenti
HTML Lezione1. Prof. Accarino IIS Altiero Spinelli Via Leopardi 132 Sesto San Giovanni
HTML Lezione1 Prof. Accarino IIS Altiero Spinelli Via Leopardi 132 Sesto San Giovanni HTML (Hyper Text Markup Language) è formato da definizioni, elementi (tags), questi impartiscono al browser (il programma
CSS: HTML: Proprietà per la formattazione delle immagini Immagini di sfondo e sfondi multipli. Le immagini mappate
CSS: Proprietà per la formattazione delle immagini Immagini di sfondo e sfondi multipli HTML: Le immagini mappate 1 Le principali proprietà che permettono di manipolare le immagini agiscono sul box mode
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 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
APPUNTI DI INFORMATICA IL LINGUAGGIO HTML
APPUNTI DI INFORMATICA IL LINGUAGGIO HTML Vediamo le seguenti istruzioni dell HTML link permette di dare un colore alla nostra "parola calda", se questo attributo non viene esplicitato
HTML Lezione2 Le Immagini e i link. Prof. Accarino IIS Altiero Spinelli Via Leopardi 132 Sesto San Giovanni
HTML Lezione2 Le Immagini e i link Prof. Accarino IIS Altiero Spinelli Via Leopardi 132 Sesto San Giovanni Le immagini I formati supportati dal websono diversi e variano a seconda del browser adoperato.i
SOMMARIO. Prefazione... XI. Capitolo 1 - Le variabili dell ambiente di progettazione Web... 1
Prefazione... XI Capitolo 1 - Le variabili dell ambiente di progettazione Web... 1 HTML, XML e il futuro dei linguaggi per il Web... 2 Il linguaggio HTML: una breve introduzione storica... 2 Il linguaggio
Basi di Dati-X HTML HTML HTML. Corso di Laurea in Informatica Anno Accademico 2013/2014
HTML 2 Basi di Dati-X Corso di Laurea in Informatica Anno Accademico 2013/2014 Hyper Text Markup Language linguaggio testuale per descrivere la struttura di documenti ipertestuali disponibili nel World
STILE E CSS. classi sezioni. tag
Perchè occorre lo stile? HTML con i suoi tag e relativi attributi possiede un suo stile standard che offre purtroppo poche personalizzazioni. Un sito web deve avere uniformità di colori, di font e dimensioni
Pablo Genova I. I. S. Angelo Omodeo Mortara Indirizzo Tecnico-Economico A. S
Breve introduzione all' HTML Pablo Genova gallini.genova@gmail.com I. I. S. Angelo Omodeo Mortara Indirizzo Tecnico-Economico A. S. 2017 2018 Un assaggio di HTML Come abbiamo visto nelle lezioni precedenti
Scrivere in Html Tag e loro attributi
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