La presentazione è in caricamento. Aspetta per favore

La presentazione è in caricamento. Aspetta per favore

Corso di Webmaster HTML HyperText Markup Language Linguaggio per marcare unIpertesto Prof. Molteni Jonathan.

Presentazioni simili


Presentazione sul tema: "Corso di Webmaster HTML HyperText Markup Language Linguaggio per marcare unIpertesto Prof. Molteni Jonathan."— Transcript della presentazione:

1 Corso di Webmaster HTML HyperText Markup Language Linguaggio per marcare unIpertesto Prof. Molteni Jonathan

2 .HTM o.HTML e le pagine Web HTML linguaggio interpretato: il codice sorgente sempre leggibile e modificabile interpretato al volo, volta per volta, dal browser linguaggio di impaginazione detto a marcatura pagina Web: pagina HTML + ulteriori file (immagini, suoni,video ecc.) la pagina HTML contiene i riferimenti a questi file il browser Web riceve la pagina HTML, legge i riferimenti, chiede e riceve i file aggiuntivi, infine visualizza il tutto marcatori, tag, inseriti nel testo, per indicare al browser Web come deve impaginare e visualizzate la pagina Web

3

4 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 Web

5 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.: …

6 Head Nellintestazione del documento vengono introdotti i tag che identificano il titolo del documento e altre informazioni facoltative circa la natura e il contenuto della pagina : mediante questo tag e i suoi attributi si possono specificare alcune caratteristiche della pagina, tra cui le parole chiave relative ai contenuti del testo utilizzate dai motori di ricerca per classificare il sito;

7 Body Il corpo del documento ospita il contenuto vero e proprio della pagina, quello che verrà visualizzato nella finestra del browser Il tag può essere utilizzato in forma semplice oppure se ne possono specificare attributi.

8 Attributi del Body : i link appaiono di colore giallo; : i link attivi (nel momento in cui li si seleziona con il mouse) appaiono di colore arancione; : i link già visitati appaiono di colore grigio.

9 Esempio Questo è un esempio Titolo principale Titolo secondario Testo all'interno di un paragrafo Altro paragrafo Testo al di fuori di un paragrafo indirizzo: Via Italia 34/5, Como

10 STRUTTURA A MATRIOSKA I comandi sono contenuti luno dentro laltro e ognuno va a influenzare solo la porzione di testo racchiusa tra il rispettivo tag di apertura e quello di chiusura. 1. = tutto quello che verrà scritto da qui in poi sarà in corsivo; 2. = tutto quello che verrà scritto da qui in poi sarà sottolineato; 3. = tutto quello che verrà scritto da qui in poi sarà in grassetto; 4. = qui finisce ciò che devessere visualizzato in grassetto; 5. = qui finisce ciò che devessere visualizzato in sottolineato; 6. = qui finisce ciò che devessere visualizzato in corsivo. Es: Nel mezzo del cammin di nostra vita… Es: Nel mezzo del cammin di nostra vita

11 Elenchi I seguenti tag servono per specificare vari tipi di elenchi: Elenco puntato: Elenco numerato: Ogni voce dellelenco è racchiusa da …

12 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 llinterno delle celle (Vedi esempio: es04tabelle.html)

13 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 Web apre la pagina che si trova a indirizzo Indirizzo può essere una URL o unancora o una combinazione delle due Ancora: Definisce una etichetta alla quale un link può puntare Di solito è usata per far spostare il browser Web in un altro punto, allinterno della stessa pagina che contiene il link Vedi esempio: link.html

14 Le immagini Includere immagini: Alcuni attributi permettono di modificare le dimensioni dellimmagine:

15 Caratteri speciali e commenti Per inserire caratteri che non si trovano sulla tastiera, per es. ¥, Ç, Ø,.,… la sintassi è: &nome_carattere; < < > > ¥ ¥ e tanti, tanti altri… Per inserire commenti:

16 Cascading Style Sheets Formattazioni logica e fisica, separate Uso due file: File HTML contiene la formattazione logica File CSS contiene la formattazione fisica: indica al browser Web come visualizzare i tag logici In questo modo è più facile cambiare la formattazione fisica (lo stile) di una pagina HTML

17

18 Esempio CSS: pagina html Pagina con CSS I.S.I.S Paolo Carcano Corso di WebMaster Prof. Jonathan Molteni

19 Esempio CSS: file stile.css..headingscourse{ color: #Red; font-style: normal; font-weight: bold; font-size: 18px; line-height: 24px; font-family: Verdana, Geneva, Arial, sans-serif; text-align: center }.headingsgest{ color: #FF0099; font-style: normal; font-weight: bold; font-size: 14px; line-height: 24px; font-family: Verdana, Geneva, Arial, sans-serif; text-align: center }.headingsprof{ color: #00ff00; font-style: normal; font-weight: bold; font-size: 14px; line-height: 19px; font-family: Verdana, Geneva, Arial, sans-serif; text-align: center }

20 DOCUMENTI SENZA CORPO: I FRAME Pag 55 Pag 70 tag


Scaricare ppt "Corso di Webmaster HTML HyperText Markup Language Linguaggio per marcare unIpertesto Prof. Molteni Jonathan."

Presentazioni simili


Annunci Google