La presentazione è in caricamento. Aspetta per favore

La presentazione è in caricamento. Aspetta per favore

Politecnico di Milano Esercizi Introduzione allHTML.

Presentazioni simili


Presentazione sul tema: "Politecnico di Milano Esercizi Introduzione allHTML."— Transcript della presentazione:

1 Politecnico di Milano Esercizi Introduzione allHTML

2 - 2 - Il WWW Il World Wide Web: una rete di pagine connesse tra loro e distribuite su diverse macchine Il server Web contiene le pagine Web da visualizzare Il client (il browser Web) visualizza le pagine Web Rete Client Server Web

3 - 3 - LHTML e le pagine Web Il linguaggio HTML (Hyper-Text Markup Language) serve per definire limpaginazione e laspetto grafico delle pagine Web Non è un linguaggio di programmazione! E un linguaggio di impaginazione detto a marcatura Una pagina HTML è un file composto da puro testo Lo standard supporta diverse codifiche La più comune: ISO (è una variante ASCII) Elementi quali immagini, suoni, filmati, ecc. sono contenuti in file separati Pagina Web: pagina HTML + ulteriori file (immagini, suoni, ecc.)

4 - 4 - I tag. Il processo di rendering Si usano particolari comandi (detti tag), inseriti nel testo, per indicare al browser come deve impaginare e visualizzate la pagina Web nel suo insieme Il browser interpreta i tag, formatta la pagina Web e ne genera la rappresentazione grafica (il rendering) HTML Il motore di rendering del browser Immag. audio, ecc. La finestra del browser

5 - 5 - La mia prima pagina HTML Questo è un esempio Ciao! Questo è un esempio di pagina HTML Scrivete il file con un editor di testo Salvate il file (con estensione.html o.htm) Aprite il file con un browser

6 - 6 - La mia prima pagina HTML Non va a capo! TitoloNome del file

7 - 7 - La sintassi dei tag Quasi tutti i tag sono composti da un tag di apertura e da un tag di chiusura: testo sul quale il tag agisce Es.: Questo è un esempio Alcuni tag non hanno la corrispondente chiusura: Es.: Per molti tag è possibile specificare degli attributi: Es.: …

8 - 8 - Formattazione logica Lidea iniziale dellHTML: esprimere il significato logico del testo, non la rappresentazione grafica La traduzione verso una certa rappresentazione grafica è lasciata interamente al browser Alcuni tag: Paragrafo: Evidenziazione di testo:, Titoli:,,,,, Formato indirizzo: Per alcuni di questi tag è possibile specificare degli attributi.

9 - 9 - Formattazione logica Questo è un esempio Titolo principale Titolo secondario Testo all'interno di un paragrafo Altro paragrafo Testo al di fuori di un paragrafo indirizzo: Via Ponzio 34/5, Milano

10 Formattazione logica

11 Formattazione fisica Specifica la rappresentazione grafica Alcuni tag: Neretto: Italico: Apice: Pedice: Barrato: Sottolineato: Forza il ritorno a capo: Specifica il carattere tipografico: Gli attributi permettono di variare limpaginazione standard:

12 Formattazione fisica Questo è un esempio Normale, neretto, italico, apice, pedice, barrato, sottolineato Inizio paragrafo va a capo Parolona!

13 Formattazione fisica

14 Elenchi I seguenti tag servono per specificare vari tipi di elenchi: Elenco puntato: Varianti dellelenco puntato:,, Elenco numerato: Varianto dellelenco numerato:,, Ogni voce dellelenco è racchiusa da

15 Elenchi Questo è un esempio Primo elemento Secondo elemento Primo elemento Secondo elemento

16 Elenchi Primo elemento Elemento scorretto Secondo elemento Primo elemento Secondo elemento Primo elemento Secondo elemento

17 Elenchi

18 Le tabelle Il testo (e in generale qualsiasi elemento grafico) può essere formattato sotto forma di tabella: Tabella: Titolo: Riga: Colonna: E possibile specificare alcuni attributi: spessore del bordo, distanza tra le celle, margine allinterno delle celle.

19 Le tabelle Questo è un esempio Colonna1 Colonna2 Uno Due Tre Quattro

20 Le tabelle

21 I link Servono per creare connessioni navigabili Link interni alla stessa pagina Link tra pagine Link: qualsiasi cosa Facendo click su qualsiasi cosa, il browser si sposta a indirizzo Indirizzo può essere una URL o unàncora o una combinazione delle due Àncora: Definisce una etichetta alla quale un link può puntare Di solito è usata per far spostare il browser in un altro punto, allinterno della stessa pagina che contiene il link

22 I link Questo è un esempio Vai al Politecnico di Milano Introduzione InfoA (file PDF) Vai in fondo alla pagina bla bla Fine della pagina

23 I link

24 Le immagini E possibile includere immagini: Alcuni attributi permettono di modificare le dimensioni dellimmagine: Es.:

25 Le immagini Questo è un esempio Un po' di testo... e un'immagine Un buon posto per parcheggiare!

26 Le immagini

27 Caratteri speciali Per inserire caratteri che non si trovano sulla tastiera, per es. ¥, Ç, Ø, ¾,… Per mascherare i caratteri Voglio far comparire i caratteri nella pagina La sintassi: &nome_carattere; < ¥¥ e tanti, tanti altri…

28 Mettendo insieme il tutto… Questo è un esempio Parcheggio ← fai click

29 Mettendo insieme il tutto… Divieto fai click → Il tag forza il ritorno a capo Il tag <br> forza il ritorno a capo

30 Mettendo insieme il tutto…

31 Il Mio Sito Il Mio Primo Sito!!! La mia home page Formattazione "logica" Formattazione "fisica" Elenchi Tabelle Link Immagini Complesso

32 Il Mio Sito Creiamo la cartella IlMioSito e copiamo tutti i file HTML e le immagini index.html è, per convenzione, il nome del file che contiene la home page Apriamo index.html con un browser…

33 Il Mio Sito

34 Riferimenti I padri del WWW: Tutorial sullHTML: Manuale sullHTML, in PDF: Manuale di riferimento per i tag HTML elements.asp Tabella caratteri speciali:


Scaricare ppt "Politecnico di Milano Esercizi Introduzione allHTML."

Presentazioni simili


Annunci Google