Primi passi con HTML. Il documento HTML

Dimensione: px

Iniziare la visualizzazioe della pagina:

Download "Primi passi con HTML. Il documento HTML"

Basilio Randazzo
10 anni fa
Visualizzazioni

1 Primi passi con HTML. Il documento HTML <HTML> <HEAD> <TITLE>La mia prima pagina in HTML</TITLE> </HEAD> <BODY> Questo è il corpo del documento che stiamo realizzando. Questa non è una nuova riga. </BODY> </HTML> N.B. HTML non va a capo. La larghezza del testo è determinata dalla finestra del browser. a capo tag <BR> Come visualizzare la sorgente? Visualizza > HTML Oppure: Tasto destro > HTML Come è fatta una istruzione? < delimita l inizio istruzione P Elemento nome della istruzione ALIGN Attributo nome dell attributo Center Valore valore dell attributo > delimita la fine istruzione <P ALIGN = CENTER > html.doc 1

Questa non è una nuova riga. </BODY> </HTML> N.B. HTML non va a capo. La larghezza del testo è determinata dalla finestra del browser.

2  1. Il testo Scelta del carattere tag FONT attributi FACE (tipo di font). SIZE (dimensione del font) COLOR (colore del font) Questa riga è normale <BR> <FONT COLOR = #FF0000 SIZE = 10 > Mentre questa è più grande e rossa</font> Formattazione del testo <U>Questa frase è sottolineata</u> <B>Questa frase è in grassetto (bold)</b> <I>Questa frase è in corsivo (italic)</i> Allineamento tag <DIV> individua una sezione del documento. attributo ALIGN valore right, left, center, justify <DIV ALIGN = RIGHT >Questa frase è allineata a destra </DIV> <DIV ALIGN = LEFT >Questa frase è allineata a sinistra </DIV> <DIV ALIGN = CENTER >Questa frase è centrata </DIV> <DIV ALIGN = JUSTIFY >Questa frase è giustificata </DIV> Righe e paragrafi a capo tag <BR> spezza la riga, ma va a capo senza interporre spazio. html.doc 2

sottolineata</u> <B>Questa frase è in grassetto (bold)</b> <I>Questa frase è in corsivo (italic)</i> Allineamento tag <DIV> individua una sezione del documento.

3 nuovo paragrafo tag <P> un nuovo paragrafo inizia sempre a capo e con uno spazio interposto (praticamente un salto di riga). Il tag <BR> non ha il corrispondente tag di chiusura. Formati grafici: 2. Le immagini. Gif (Graphic interface format) 256 colori immagini con bordi netti icone a sfondo trasparente immagini in movimento Jpeg (Joint photographic experts group) 16 milioni di colori (True color) immagini fotografiche Inserimento di una immagine <IMG SRC = jeanne.jpg > <IMG SRC = http// > Modifica delle dimensioni dell immagine. <IMG SRC = jeanne.jpg WIDTH = 100 HEIGHT = 150 > <IMG SRC = jeanne.jpg WIDTH = 120 > impostando solo la larghezza l altezza varia in proporzione. html.doc 3

Gif (Graphic interface format) 256 colori immagini con bordi netti icone a sfondo trasparente immagini in movimento Jpeg (Joint photographic experts group) 16 milioni di colori

4 Inserimento di testo alternativo <IMG SRC= jeanne.jpg ALT = Miniatura di Giovanna WIDTH = 100 HEIGHT = 150 > Evitare immagini di grandi dimensioni. Nelle gallerie di immagini visualizzare una miniatura e lasciare il caricamento dell immagine a chi è interessato. Attenti al copyright. Rubare una immagine dal WEB è facilissimo, basta cliccarci sopra col tasto destro e scegliere salva immagine. Occorre accertarsi che l immagine non sia coperta da copyright. Collegamenti esterni 3. I collegamenti tag attributo valore <A> e </A> HREF il nome del file <A HREF = pagina8.htm >Clicca qui per andare a pagina 8 </A> Indirizzamento relativo e assoluto Indirizzamento assoluto: richiede di indicare il percorso completo permette di raggiungere qualsiasi pagina presente su Internet <A HREF= >Clicca qui per contattarci</a> Indirizzamento relativo: html.doc 4

Rubare una immagine dal WEB è facilissimo, basta cliccarci sopra col tasto destro e scegliere salva immagine. Occorre accertarsi che l immagine non sia coperta da copyright. Collegamenti esterni 3.

5 è sufficiente indicare il nome del file permette i collegamenti tra pagine dei siti organizzati in cartelle (directory) <A HREF = lezioni / lezione2.pdf >Leggi la seconda lezione</a> Collegamenti interni. creare un segnalibro nel punto in cui si vuole arrivare tag <A> ma con l attributo NAME all inizio del documento html: <A NAME = iniziopagina ></A> in altra parte del documento creare il collegamento <A HREF = #iniziopagina >Torna su</a> Il simbolo cancelletto (#) indica al browser che il valore dell attributo HREF non è il nome di un file esterno, ma un segnalibro. Collegamento con una immagine <A HREF = battaglie.html > <IMG SRC = battle.jpg WIDTH = 40 ></A> Collegamenti a file non Html. <A HREF = jeanne.jpg >Immagine di Giovanna</A> <A HREF = storia.zip >Storia di Francia</A> <A HREF = flauto.mid >Il flauto di battaglia</a> 4. Impostazione di una pagina. html.doc 5

creare un segnalibro nel punto in cui si vuole arrivare tag <A> ma con l attributo NAME all inizio del documento html: <A NAME = iniziopagina ></A> in altra parte del documento creare il collegamento

6 Colori dello sfondo, del testo, dei link. <BODY BGCOLOR = # TEXT = #00ff00 LINK = #ff8000 VLINK = #8000ff ALINK = #ff0000 > <BODY BACKGROUND = pietre.jpg TEXT = #00ff00 LINK = #ff8000 VLINK = #8000ff ALINK = #ff0000 > Valori di default: link blu, link attivo rosso, link visitato viola. Nomi dei colori specificati dal W3C. Aqua 00 FF FF Navy Black Olive Blue FF Purple Fucsia FF 00 FF Red FF Gray Silver C0 C0 C0 Green Teal Lime 00 FF 00 White FF FF FF Maroon Yellow FF FF 00 Impaginazione e tabelle. <TABLE> html.doc 6

jpg TEXT = #00ff00 LINK = #ff8000 VLINK = #8000ff ALINK = #ff0000 > Valori di default: link blu, link attivo rosso, link visitato viola.

7 <TR> <TD> Testo in colonna 1, riga1 <TD> Testo in colonna 2, riga1 </TR> <TR> <TD> Testo in colonna1, riga 2 <TD> Testo in colonna2, riga 2 </TR> </TABLE> <TABLE WIDTH = 100 BORDER = 2 CELLSPACING = 10 CELLPADDING = 0 BGCOLOR = #ffffff > <TR><TD ALIGN = CENTER > Testo prima casella <TD ALIGN = CENTER BGCOLOR = # > Testo seconda casella su sfondo verde </TR> </TABLE> html.doc 7

CELLSPACING = 10 CELLPADDING = 0 BGCOLOR = #ffffff > <TR><TD ALIGN = CENTER > Testo prima

8 Problemi e consigli: Dimensione delle pagine e velocità di caricamento. una pagina circa 100 KB con modem a 28,2 tempo di caricamento: 28 secondi in condizioni ideali 56 secondi in sovraccarico Criterio orientativo: tempo di caricamento 10 secondi con un modem a 28,8 in condizioni teoriche di funzionamento. Evitare tempi di caricamento superiore ai 40 secondi in condizioni ottimali. Calcolo del tempo di caricamento di una pagina: calcolare i KB occupati (testo, grafica, altri elementi) moltiplicare per 8192 (8 bit costituiscono un byte e 1024 byte costituiscono un KB) dividere per la velocità del modem, espressa in bit al secondo Metatag e ricerche <META NAME = DESCRIPTION CONTENT = Date, luoghi e battaglie della vita di Giovanna d Arco > <META NAME = KEYWORDS CONTENT = Giovanna d Arco, Domrémy, Orléans, Reims, Rouen > html.doc 8

condizioni teoriche di funzionamento. Evitare tempi di caricamento superiore ai 40 secondi in condizioni ottimali.

Documenti analoghi

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