La presentazione è in caricamento. Aspetta per favore

La presentazione è in caricamento. Aspetta per favore

Introduzione al linguaggio HTML Bibliografia: Arena - Borchia Linguaggi del Web – Petrini Editore introduzione tag head tag body link.

Presentazioni simili


Presentazione sul tema: "Introduzione al linguaggio HTML Bibliografia: Arena - Borchia Linguaggi del Web – Petrini Editore introduzione tag head tag body link."— Transcript della presentazione:

1 Introduzione al linguaggio HTML Bibliografia: Arena - Borchia Linguaggi del Web – Petrini Editore introduzione tag head tag body link testo immagini elenchi tabelle INDICE

2 Note introduttive HTML è l'acronimo di Hypertext Markup Language ("Linguaggio di contrassegno per gli Ipertesti") e non è un linguaggio di programmazione. Si tratta invece di un linguaggio di marcatura (o di formazione pagina'), che permette di indicare come disporre gli elementi all'interno di una pagina: le indicazioni vengono date attraverso degli appositi marcatori, detti "tag". Ciò significa che l'HTML non ha meccanismi che consentono di prendere delle decisioni, e non è in grado di compiere delle iterazioni ("ripeti questa cosa, finché non succede questo"), né ha altri costrutti propri della programmazione.

3 Leditor HTML Leditor più comune è un qualsiasi editor di testo, ad esempio Blocco note. Dopo aver creato il codice Html, salvare il file (o rinominarlo) utilizzando come estensione.htm oppure.html. Esistono in commercio editor visuali del tipo WYSWIG (What you See is What You Get), cioè programmi che permettono di inserire graficamente, come se lavoraste in word, gli elementi delle pagine (ad esempio FrontPage o DreamWeawer). Gli editor visuali di tipo WYSWIG hanno vantaggi a livello di produttività, ma non permettono la flessibilità e pienezza di controllo che si ottiene con la scrittura del codice.

4 I TAG I tag vanno inseriti tra parentesi uncinate ( ), la chiusura del tag viene indicata con una "/" (è il simbolo comunemente detto "slash". Quindi: ). Il contenuto va inserito tra l'apertura e la chiusura del tag medesimo, secondo questa forma: contenuto

5 I tag: >body> Testa del documento Corpo del documento

6 La sezione Head non verrà visualizzata allutente, tranne il tag che contiene il titolo della pagina: pagina web di prova

7 I tag: >body> Testa del documento Corpo del documento

8 Body Questo tag introduce il browser nella sezione della pagina corrispondente alle informazioni mostrate a video. Allinterno di questo marcatore, è possibile (a volte indispensabile) inserire una serie di attributi, con i rispettivi valori, per istruire il browser su come visualizzare alcuni particolari della pagina. Le istruzioni principali riguardano il colore o limmagine di sfondo, il colore del testo, il colore dei link.... ed altro

9 I commenti Unaltra strategia importante, per rendere il nostro codice più leggibile è quella di inserire dei "commenti" nei punti più significativi: si tratta di indicazioni significative per il webmaster, ma invisibili al browser. Inserendo i commenti in punti specifici del documento ci permette di mantenere lorientamento anche in file molto complessi e lunghi. La sintassi è la seguente:

10 Tag utilizzati per i caratteri della pagina Testo Corsivo evidenziazione in corsivo Testo Grassetto evidenziazione in grassetto Testo Sottolineato testo sottolineato Testo centrato testo o paragrafo centrato Dimensione carattere dimensione dei caratteri - n da 1 a 6. n=1 grande n=6 piccolo

11 Esempio grandezza caratteri esempio grandezza caratteri prova testo H1 prova testo H2 prova testo H3 prova TESTO h4 prova testo H5 prova testo H6

12 Tag singoli ritorno a capo linea orizzontale

13 coloreparola chiavenotazione esadecimale arancioneorange#FFA500 blublue#0000FF biancowhite#FFFFFF gialloyellow#FFFF00 grigiogray# marronebrown#A52A2A neroblack# rossored#FF0000 verdegreen# violaviolet#EE82EE Lo standard HTLM 4.0 specifica la possibilità di indicare i colori fondamentali anche con una stringa di testo. esempio: body bgcolor=orange

14 text=#FFFFFF Link=#0000FF vlink=#FFFFFF alink=#0000FF topmargin=2 leftmargin=2 rightmargin=3 Bottommargin=5 bgcolor=# Background=nomefile.gif Principali Attributi del tag body colore del testo; colore del link; colore del link visitato; colore del link attivo; margine vuoto superiore espresso in pixel; margine vuoto sinistro espresso in pixel; margine vuoto destro espresso in pixel; margine vuoto inferiore espresso in pixel; colore di sfondo; immagine di sfondo;

15 Attributo Background Background annulla limpostazione di bgcolor, ma si inseriscono entrambi poiché, se limmagine di sfondo non venisse caricata, comunque verrebbe fissato un colore compatibile con il resto della grafica. Background può usufruire di un ulteriore attributo utile a bloccare limmagine selezionata per lo sfondo, durante lo scorrimento della pagina; listruzione bgproperties=fixed

16 Testo paragrafo Esempio: paragrafo 1 paragrafo 2 paragrafo 1 paragrafo 2 Il paragrafo è lunità di base entro cui suddividere un testo. Il tag lascia una riga vuota prima della sua apertura e dopo la sua chiusura. Blocco di Testo Esempio: blocco 1 blocco 2 blocco 1 blocco 2 Il blocco di testo va a capo, ma a differenza del paragrafo non lascia spazi prima e dopo la sua apertura.

17 Allineamento testo Tipo di allineamento Sintassicodice HTML Testo allineato a sinistra testo Nel mezzo del cammin di nostra vita mi ritrovai per una selva oscura ché la diritta via era smarrita Testo allineato a destra testo Nel mezzo del cammin di nostra vita mi ritrovai per una selva oscura ché la diritta via era smarrita Testo giustificato testo Testo Nel mezzo del cammin di nostra vita mi ritrovai per una selva oscura ché la diritta via era smarrita

18 I link Le ancore dette più comunemente link sono fondamentalmente il cuore della pagina, grazie a questi collegamenti è possibile spostarsi da una pagina allaltra, da un sito allaltro, da un server allaltro. Il tag con attributo href= Esempi: Altavista il motore di ricerca Altavista il motore di ricerca Altavista il motore di ricerca target=_blank Lattributo target serve per fare caricare la pagina linkata nella stessa finestra (_top) oppure in una nuova finestra (_blank) Come riferimenti inoltre, è possibile usare valori come: effettua una spedizione allindirizzo specificatomailto: esempio:.... Permette di creare un collegamento di download di file ad esempio.exe,.zip,.mp3

19 Esempio Il sito della 5°C benvenuti GUIDA HTML

20 Caratteri speciali &nbps; no breaking space Spazio normale Spazio normale Spazio&nbps; doppio Spazio doppio Spazio&nbps;&nbps triplo Spazio triplo " < < > > € è è & & £ £

21 Scegliere il font del testo Per scegliere il tipo di carattere con cui un font deve essere visualizzato è sufficiente usare la sintassi: testo in Arial E bene tener conto di due accorgimenti: scegliere caratteri "sicuri", che siano cioè senzaltro presenti sul pc dellutente; non indicare un solo carattere, ma una serie di caratteri che gradualmente si allontanano dal risultato che vorremmo ottenere, ma non di molto, fino ad indicare la famiglia a cui il nostra carattere appartiene. In questo modo il browser dellutente cercherà di trovare nella propria cartella dei fonts il primo carattere indicato, se non lo trova passerà al secondo, e solo come ultima spiaggia sceglierà si utilizzare il carattere predefinito (il famigerato "Times") Verdana e caratteri simili

22 Colore e dimensione del testo Adesso che abbiamo scelto il carattere con cui scrivere il nostro testo possiamo scegliere il colore, con la sintassi: testo blu ovvero: testo blu testo blu Le dimensioni del testo si attribuisco mediante lattributo "size" del tag font. testo di grandezza 1 Riassumendo il tag font può assumere il seguente formato: Benvenuti sul mio sito

23 Le immagini Le regole da rispettare nelluso di immagini per il web: non inserire immagini troppo grosse e pesanti; Non inserirne troppe nella stessa pagina; Usare formati compressi, ovvero.jpg,.gif e png Per inserire le immagini il tag è Gli attributi principali del tag sono: -> indica la posizione esatta dellimmagine (source) -> rappresenta un testo alternativo -> indica la dimensione dellimmagine in larghezza in pixel -> indica la dimensione dellimmagine in altezza in pixel -> indica la posizione dellimmagine nella pagina rispetto al testo I valori sono: left, right, center, top, bottom, middle Border -> per inserire una cornice allimmagine assegnando lo spessore del bordo in pixel; il valore 0 indica assenza del bordo Esempio:

24 Esempio La mia prima pagina con gif animata HTM Prova immagine Gif animata È importante assegnare sempre un colore alla pagina anche quando lo sfondo della pagina è bianco (al massimo assegnare bgcolor="#FFFFFF"). Infatti, come impostazione predefinita, il browser assegna alla pagina il colore di sfondo che lutente ha impostato nella finestra del sistema operativo: quindi se lutente ha impostato uno sfondo nero e voi non avete assegnato nessun colore di sfondo alla pagina, la vostra pagina sarà nera. testo a sinistra testo a destra Nel mezzo del cammin di nostra vita mi ritrovai per una selva oscura ché la diritta via era smarrita ciao

25 Gli elenchi - Liste non ordinate 5T 4T 3T 3I Per realizzare lelenco occorre aver inserito il seguente codice HTML 5T 4T 3T 3I type=square è lattributo che permette di scegliere il punto elenco come nellesempio Type=circle (pallino nero) è il simbolo di default

26 Gli elenchi - Liste ordinate 1.Gennaio 2.Febbraio 3.Marzo 4.Aprile 5.Maggio Per realizzare lelenco occorre aver inserito il seguente codice HTML Gennaio Febbraio Marzo Aprile Maggio type=1 (numeri arabi ) è il simbolo di default type="a alfabeto minuscolo type=A alfabeto maiuscolo type=i numeri romani minuscoli type=I numeri romani maiscoli

27 Esempio di elenchi annidati Combinando tra loro i due tipi di marcatori per gli elenchi è possibile costruirne versioni annidate Esempio: primo della 1a lista secondo della 1a lista a.primo della 2a lista b.secondo della 2a lista terzo della 1a lista primo della 1a lista secondo della 1a lista primo della 2a lista secondo della 2a lista terzo della 1a lista

28 Le Tabelle Tag per creare una tabella che si chiude con Esempio: Contenuto della Tabella Contenuto della Tabella apre la tabella Due attributi del tag table: border=2 indicare lo spessore del bordo ; se =0 tabella senza bordo width=400 indica lo spazio occupato dalla tabella in orizzontale table row: indica lapertura di una riga table data: indica una cella allinterno di una riga

29 Esempio di tabella con più righe Prima riga Prima riga Seconda riga Terza riga Le Tabelle Seconda riga Terza riga

30 Esempio di tabella con più colonne Prima cella Prima cella Seconda cella Terza cella Le Tabelle Seconda cellaTerza cella Come si nota in questo esempio si può inserire la dimensione in termini percentuali

31 Esempio di tabella con più righe e colonne Snx alta Snx alta Mezzo alta Dx alta Snx bassa Mezzo bassa Dx bassa Le Tabelle Snx bassa Mezzo alto Mezza bassa Dx alta Dx bassa Esempio Piramide

32 Attributo rowspan applicabile alla cella e quindi inserito nel tag Cella che occupa due righe Cella che occupa 2 Righe DX alta Dx bassa Le Tabelle Dx alta Dx bassa Si utilizza per raggruppare più righe di una cella

33 Attributo Colspan applicabile alla cella e quindi inserito nel tag Cella che occupa due colonne Snx alta DX alta cella che occupa 2 colonne Le Tabelle Snx altaDx alta Si utilizza per raggruppare più colonne di una cella

34 Riga di intestazione tabella Il marcatore indica table header, ovvero intestazione di tabella. Permette di definire una prima riga automaticamente centrata e in grassetto. Esempio: Cella Testata prima cella seconda cella terza cella Cella Testata Prima cellaSeconda cellaTerza cella

35 Esercizi Realizzare la seguente tabella inserendo contenuti sia di testo che immagine utilizzando il tag per la testata Pagina web con vari elementi

36 Frame 20%80%

37 Frame

38 Frame

39 Ipertesto Progettazione Documentazione Home HobbyAutore Descrizione Breve Strutture HtmlLinkNote descrittive HomeFrame (due elementi: Indice descrizione Hobby Autore Argomento trattato dalla pagina IndiceContenuto in home (elenco puntato) AutoreTabella & ImmagineHomeDati personali: Data di nascita – età – residenza – indirizzo


Scaricare ppt "Introduzione al linguaggio HTML Bibliografia: Arena - Borchia Linguaggi del Web – Petrini Editore introduzione tag head tag body link."

Presentazioni simili


Annunci Google