Primi Elementi sul linguaggio HTML

Dimensione: px

Iniziare la visualizzazioe della pagina:

Download "Primi Elementi sul linguaggio HTML"

Riccardo Giovannini
6 anni fa
Visualizzazioni

1 Primi Elementi sul linguaggio HTML Docente Tutor: Dott. Gianluigi Roveda Informatica per l'impresa

2 Premessa: I lucidi qui presentati non sono una trattazione completa dell'argomento ma una introduzione, lo studente di Informatica per l'impresa potrà approfondire consultando i riferimenti indicati nell'ultimo lucido.

3 Cosa tratteremo? - Sintassi del linguaggio HTML I TAG più usati oggi giorno - Esempi di uso del linguaggio HTML

4 Hyper - Iper Text Markup - Testo - Marcatura Linguaggio per la descrizione di ipertesti multimediali tramite marche Language - Linguaggio

5 ipertesto Prefisso che indica qualcosa che sta al di sopra per quantità o grado! Mi pare ovvio!!!

6 Lettura di un LIBRO (SEQUENZIALE) Navigazione di un Ipertesto (si percorre un grafo) p.1 p.2 p.3.

7 Un ipertesto è caratterizzato da: 1. Pagine (nodi). 2. Rimandi alle pagine (link).

8 ... click su home click su persone click su home click su persone... click su docenti...

9 Più di uno ma di cosa? Da media: plurale della parola latina medium, che traduciamo semplicemente in mezzo. Nel nostro caso si considerano i mezzi di comunicazione multimediale testi video audio immagini

10 <HTML> <head> </head> T E S T A INFORMAZIONE NON VISIBILE metainformazioni Titolo Parole chiave Autore... <body> C O R P O INFORMAZIONE VISIBILE </body> </HTML>

11 Esempio di pagina HTML <html> <head> <title> Pagina di Mario Rossi </title> </head> <body bgcolor=green> <center> <H1> La Pagina Web del Sig. Rossi </H1> <br> <IMG SRC="foto.jpg" border="0"> <br><br> Premi <a href="primapagina.html"> qui </a> per entrare! <br><br> <H3> data ultima modifica: </H3> </center> </body> </html>

12 MARCHE o TAG <HTML> racchiude la pagina web <HEAD> racchiude la testa della pagina web <BODY> racchiude il corpo della pagina web < NOME-TAG > elemento < / NOME-TAG > MARCA d'inizio elemento MARCA di fine elemento Esempi: <b>ciao</b> <i> CIAO</i> <u>ciao</u CIAO CIAO CIAO Nota: 1. alcuni TAG non prevedono chiusura, come quello per andare a capo (<BR>); 2. i TAG possono essere scritti sia in minuscolo che in maiuscolo, ad esempio <b> e <B> sono lo lo stesso TAG.

13 <HTML> Metainformazioni <head> </head> <body> </body> </HTML> Titolo della pagina <title> titolo-della-pagina </title> <meta NAME= nome-della metainformazione" CONTENT= contenuto"> Valori per NAME tra i più usati: Esempio: author, description, expired, keywords, copyright, date <html> <head> <title> La mia Prima Pagina </title> <meta name= author content= John Smith > <meta name="description" content="documento introduttivo"> </head>... opzionale Nota: Possono essere presenti anche collegamenti a file esterni (fogli di stile, javascript, ecc).

<HTML> Successione di elementi, noi ne vedremo alcuni:

tabelle, - testo a caratteri a larghezza fissa, -

immagini, - corsivo, grassetto, sottolineato, -

direttamente Stile Logico - definizioni, - enfasi, -

14 <HTML> Successione di elementi, noi ne vedremo alcuni: <head> </head> <body> Stile Fisico - elenchi, - tabelle, - testo a caratteri a larghezza fissa, - paragrafo, - testo preformattato, - a capo, - immagini, - corsivo, grassetto, sottolineato, - collegamento ipertestuale, - moduli, aspetto indicato direttamente Stile Logico - definizioni, - enfasi, - intestazione titoli, - citazioni. </body> </HTML> aspetto determinato dal browser

15 PARAGRAFO Esempio: <p> The body of a document contains the document's content. The content may be presented by a user agent in a variety of ways. For example, for visual browsers, you can think of the body as a canvas </p>... Visualizzazione: dopo il paragrafo va a capo Esempio: <p> The body of a document contains the document's content. The content may be presented by a user agent in a variety of ways. For example, for visual browsers, you can think of the body as a canvas </p> <p> The body of a document contains the document's content. The content may be presented by a user agent in a variety of ways. For example, for visual browsers, you can think of the body as a canvas </p>... <p lista-attributi> testo-paragrafo </p> opzionale

16 ALLINEAMENTO Usando l'attributo ALIGN con <p> il simbolo = associa un'attributo a un valore valori attributi Esempio: ALIGN=LEFT ALIGN=CENTER ALIGN=RIGHT <p align=center> The body of a document contains the document's content. The content may be presented by a user agent in a variety of ways. For example, for visual browsers, you can think of the body as a canvas </p>... allinea a sinistra allinea al centro allinea a destra N.B.: si usa anche con altri TAG Usando il TAG CENTER Esempio:... <center> The body of a document contains the document's content. The content may be presented by a user agent in a variety of ways. For example, for visual browsers, you can think of the body as a canvas </center>...

17 TESTO PREFORMATTATO vanno entrambi a capo <pre> Prima riga Seconda riga Terza riga </pre>... Prima riga Seconda riga Terza riga Visualizzazione nel browser Il numero di spaziature è lo stesso

18 ELENCHI Puntato (tag UL) Numerato (tag OL) di Definizioni (tag ) Mele Pere Arance Banane 1. Mele 2. Pere 3. Arance 4. Banane <ul> <li>mele <li>pere <li>arance <li>banane </ul> <ol> <li>mele <li>pere <li>arance <li>banane </ol> <DL> <DT> mela <DD> frutto <DT> patata <DD> tubero <DT> lattuga <DD> verdura </DL> <DL COMPACT> <DT> mela <DD> frutto <DT> patata <DD> tubero <DT> lattuga <DD> verdura </DL> Inizio & fine elenco Elementi dell'elenco Inizio & fine elenco Elementi dell'elenco Inizio & fine elenco termini da definire definizione N.B.: non tutti i browser distinguono tra le liste di definizioni e le liste di definizioni compatte

19 ELENCHI ANNIDATI Parte di una voce di un'elenco può essere un'elenco <UL> <LI> Elettrodomestici <UL> <LI> Computer <LI> Televisori <LI> Lavastoviglie </UL> <LI> Alimenti <OL> <LI> Carni <LI> Vegetali <DL> <DT> Mela <DD> frutta <DT> Patata <DD> tubero <DT> Lattuga <DD> verdura </DL> <LI> Latticini </OL> <LI> Vestiti </UL>

20 TAG PER LO STILE DEI CARATTERI TAG STILE ESEMPIO EFFETTO <B> grassetto <B> grassetto </B> grassetto <I> corsivo <I> corsivo </I> corsivo <U> sottolineato <U> sottolineato </U> sottolineato <TT> caratteri a lunghezza fissa <TT>lunghezza fissa</tt> lunghezza fissa ATTENZIONE.: <TT> è molto utile quando si devono incolonnare delle informazioni <TT> 10 +<BR> 3 =<BR> ----<BR> 13<BR> </TT> = Informatica per l'impresa Primi Elementi sui linguaggi del Web:HTML 20

21 INTESTAZIONE Stile Logico <HTML> <HEAD> <TITLE>Semplice Esempio di HTML</TITLE> <META NAME="Author" CONTENT="Nicola Dragoni"> <META NAME="Description" CONTENT="Documento introduttivo"> </HEAD> <BODY> <H3>Questo è un piccolo documento HTML</H3> </BODY> </HTML> <HTML> <HEAD> <TITLE>Semplice Esempio di HTML</TITLE> <META NAME="Author" CONTENT="Nicola Dragoni"> <META NAME="Description" CONTENT="Documento introduttivo"> </HEAD> Intestazione del... <BODY> <H1>Frutta</H1> Titolo capitolo <H2>Mele</H2> <H2>Agrumi</H2> Titolo paragrafo <H3>Arance</H3> <H3>Mandarini</H3> Titolo sottoparagrafo </BODY> </HTML> Elenco dei tag d'intestazione: <H1> <H2> <H3> <H4> <H5> <H6>

22 ALTRI ESEMPI DI TAG DI STILE LOGICO <DFN> <EM> <CITE> <CODE> <STRONG> definizione Di norma i browser lo mostrano in italico. enfasi Di norma i browser lo mostrano in in italico. citazioni Di norma i browser lo mostrano in italico. Per mostrare il codice (o listato di un programma) Di norma i browser lo mostrano in con caratteri a larghezza fissa. enfasi (tono forte) Di norma i browser lo mostrano in grassetto. <HTML> <HEAD> <TITLE>Prova di TAG</TITLE> </HEAD> <BODY> <H2>Proviamo i TAG in stile logico</h2> <DFN>definizione</DFN><BR> <EM> enfasi </EM><BR> <CITE>citazione </CITE><BR> <CODE>codice </CODE><BR> <STRONG>enfasi </STRONG> </BODY> </HTML> 22

23 TABELLE Tabella = { riga1, riga2,... } Riga = { cella1, cella2, } Spessore del bordo della tabella Attenzione: se il border vale 0 la tabella è senza bordi. <TABLE border="1"> <TR> <TD>A1</TD> <TD>B1</TD> <TD>C1</TD> </TR> <TR> <TD>A2</TD> <TD>B2</TD> <TD>C2</TD> </TR> </TABLE> fine riga Inizio & fine elenco Inizio & fine riga Inizio riga

IMMAGINI 340 X 300 <IMG SRC="caffe.gif"> Pathname dell'immagine da visualizzare SI POSSONO SPECIFICARE E MODIFICARE LE DIMENSIONI IN ASSOLUTO <IMG SRC="caffe.

24 IMMAGINI 340 X 300 <IMG SRC="caffe.gif"> Pathname dell'immagine da visualizzare SI POSSONO SPECIFICARE E MODIFICARE LE DIMENSIONI IN ASSOLUTO <IMG SRC="caffe.gif" HEIGHT=680 WIDTH=600> raddoppio la dimensione RELATIVO Attributo per precisare l'altezza Attributo per precisare la larghezza <IMG SRC="caffe.gif" HEIGHT=200% WIDTH=200%>

25 COLLEGAMENTI <a href= prova2.html > Passa a prova 2 </a> Pathname della pagina da aprire Elemento da premere per visionare la nuova pagina Tag di chiusura <a href= prova2.html > <IMG SRC= caffe.gif > </a> Tag di appertura che specifica la destinazione del collegamento ATTENZIONE : Le immagini che collegano altre pagine sono di norma bordate e i testi sottolineati. COLLEGAMENTI ESTERNI: <a href= > Continua... </a>

26 Esempi di EDITOR HTML: O P E N S O U R C E 1. DreamWeaver (ADOBE). 2. Amaya (W3C) 3. Komposer ( derivato dal progetto NVU della Linspire Inc. ) 4. Expression Web (Microsoft)

27 Riferimenti Sito del World Wide Web Consortium Sito dell'ufficio italiano del World Wide Web Consortium

Documenti analoghi

HTML. Es: La prossima parola è in <b>neretto</b> Es: La prossima parola è in neretto

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