Ecco una pagina coi comandi di riepilogo per creare pagine in HTML. Collegato al corso HTML di base sul canale youtube.
Struttura base di una pagina HTML
La struttura di base per creare una pagina HTML.
<html> <head> </head> <body> </body> </html>
Tag <title>
Il tag <title> viene utilizzato per mostrare il titolo della pagina nella barra del titolo o nella scheda del browser web. Viene aggiunto all’interno del tag <head>.
<html>
<head>
<strong><title>Titolo Pagina</title></strong>
</head>
<body>
</body>
</html>
Impostazioni di Layout – Tag <body>
Come la maggior parte dei tag, anche il <body> include degli attributi.
- BGCOLOR = “colore”: indica un colore di sfondo.
- BACKGROUND = “immagine”: Imposta una immagine di sfondo.
- TEXT = “colore” : imposta il colore di default del testo.
- LANG = “IT” : imposta la lingua della pagina nei siti web multilingua.
- LEFTMARGIN = “distanza” : imposta il margine sinistro della pagina.
- RIGHTMARGIN = “distanza” : imposta il margine destro della pagina.
- LINK = “colore”: imposta il colore dei link.
- VLINK = “colore”: imposta il colore dei link visitati.
- ALINK = “colore”: imposta il colore dei link attivi
- STYLE = “BACKGROUND-IMAGE: URL (immagine)” : carica l’immagine
- STYLE = “BACKGROUND-ATTACHEMENT: FIXED fissa lo sfondo
- STYLE = “BACKGROUND-REPEAT: REPEAT” Non ripete lo sfondo
Esempio:
<BODY BGCOLOR = "RED">
Per assegnare uno sfondo rosso alla pagina.
Formattazione del testo
Impostazione del Font – Attributi del Tag <font>
- FACE = “font” : Imposta il tipo di carattere da visualizzare. Poiché i caratteri vengono presi dal PC nel quale è installato il browser, potrebbero non essere presenti. Utilizza dei font di riserva già presenti su tutti i computer come Verdana, Times New Roman, Tahoma, etc…questo è possibile farlo scrivendo più font separandoli con una virgola.
Esempio: <Font Face = “Titillium Web, Verdana”>Ciao!</font> - COLOR = “colore”: Imposta il colore del testo.
- SIZE = “dimensione”: Imposta la dimensione del testo. E’ possibile impostare una dimensione che va da 1 a 7, i quali non corrispondono ai punti dei font utilizzati nei programmi di word processing o di grafica.
Esempio:
<Font Face = "Times New Roman" Color = "Red" Size = 6>Ciao Mondo!</Font>
Impostazione di uno stile di intestazione – Il tag <Hn>
Dove per n sta per un numero da 1 a 7. 1 corrisponde al titolo più importante, 7 a quello meno importante.
Esempio:
<H1> Titolo </H1>
Definizione di un paragrafo – Attributi del tag <P>
Il paragrafo è l’unità fondamentale per la scrittura del testo. Ricorda: ogni paragrafo và a capo e lascia una riga vuota prima e dopo sè stesso.
- ALIGN = “allineamento” : definisce l’allineamento del paragrafo
- Left: sinistra;
- Center: centro;
- Right: destra;
- Justify: giustificato.
Esempio:
<p align = "center">Testo al centro</p>
Definizione di un paragrafo – Il tag <DIV>
Definisce un paragrafo ma senza spazi prima e dopo dell’apertura.
Definizione di un paragrafo – Il tag <SPAN>
Definisce un paragrafo ma senza spazi prima e dopo dell’apertura e senza andare a capo.
Come andare a capo in HTML – Il tag <BR>
Ogni tag <br> equivale ad un ritorno a capo.
Esempio:
Prima riga<br>Seconda riga<br>Terza riga<br>
Inserire una riga orizzontale – Attributi del tag <HR>
- NOSHADE : Evita di sfumare la linea;
- SIZE = “dimensione” : L’altezza in pixel della riga;
- WIDTH = “dimensione”: La larghezza in pixel o in percentuale della linea (es. WIDTH = “60%”);
- COLOR = “colore” : Indica il colore della linea;
- ALIGN = “allineamento”: La posizione della linea
- Left;
- Right;
- Center;
Esempio: <HR size = 2 width = "50%" color = "red">
Scrivere il testo in grassetto – Tag <B>
Per scrivere il testo in grassetto basta digitare <B> e </B> prima e dopo il testo da formattare.
Scrivere il testo in corsivo – Tag <I>
Per scrivere il testo in corsivo basta digitare <I> e </I> prima e dopo il testo da formattare.
Scrivere il testo in sottolineato – Tag <U>
Per scrivere il testo in sottolineato basta digitare <U> e </U> prima e dopo il testo da formattare.
Scrivere il testo con una linea di correzione – Tag <STIKE>
Per scrivere il testo con linea di correzione basta digitare <STIKE> e </STIKE> prima e dopo il testo da formattare.
Scrivere il testo in apice – Tag <SUP>
Per scrivere il testo come apice basta digitare <SUP> e </SUP> prima e dopo il testo da formattare.
Scrivere il testo in pedice – Tag <SUB>
Per scrivere il testo come pedice basta digitare <SUB> e </SUB> prima e dopo il testo da formattare.
Creazione di un link in HTML – Tag <A>
Il link può essere effettuato verso:
- un’altra pagina web;
- un punto particolare del documento;
- un documento;
- un’immagine;
- un file video;
- un file audio;
- direttamente il client di posta dell’utente con l’indirizzo e-mail gia impostato.
<A HREF “link” attributi> ... testo ... </A>
Link ad una pagina Web
<A HREF “indirizzo web” attributi> ... testo ... </A>
Esempio
<A HREF “http://www.grectech.it” attributi> ... Visita il blog ... </A>
Link ad una pagina
<A HREF=“percorso/nomefile”>NomeFile</A>
Per creare un collegamento assoluto è sufficiente fare riferimento all’indirizzo URL della pagina web (usati di solito per riferirsi a risorse situate nei siti di altre persone). I percorsi relativi fanno riferimento alla posizione degli altri file rispetto al documento in cui ci si trova in quel momento (usati per far riferimento ai documenti del proprio sito). Per far riferimento ad un file che si trova nella stessa cartella basta lineare solo il nome del file. Per far riferimento ad un file contenuto in una cartella di livello inferiore rispetto alla posizione corrente occorre far precedere il nome del file dal nome della cartella seguito da uno slash (/). Per tornare ad un livello superiore occorre utilizzare la notazione ../
Link ad una parte della pagina
<A HREF=“#riferimento”> ... </A>
Il simbolo cancelletto ( # ) indica che il collegamento deve cercare un ancora chiamata con il nome specificato nel riferimento all’interno della stessa pagina.
E’ indispensabile quindi che all’interno della pagina ci sia un ancora chiamata con tale nome. Per specificare l’ancora si utilizza la seguente sintassi:
<A NAME=”#riferimento”> ... </A>
Link al client di posta
<A HREF="MAILTO: indirizzo e-mail"> ... </A>
Attributi del tag <A>
- TARGET = “_BLANK” – Con _BLANK si specifica una nuova finestra. Nel caso in cui ci siano dei frame, basta inserire il nome del frame per aprirlo al suo interno.
- TITLE = “testo” – Testo esplicativo del link al passaggio del mouse.
- ACCESSKEY = “carattere” – Scorciatoia da tastiera per attivare il link.
Inserire Immagini nella Pagina – Il tag <img>
<IMG SRC = “percorso immagine” attributi>
Attributi del tag <IMG>
- WIDTH = “dimensione” – Larghezza dell’immagine
- HEIGHT = “dimensione” – Altezza dell’immagine
- ALT = “testo” – Testo alternativo (nel caso in cui l’immagine non venga caricata)
- TITLE = “testo” – Testo al passaggio del mouse
- BORDER = “dimensione” – Bordo dell’immagine
- ALIGN = “allineamento” – Allineamento nel paragrafo
- Left: Allinea l’immagine a sinistra rispetto al testo
- Right: Allinea l’immagine a destra rispetto al testo
Se non specificato l’immagine viene inserita nel punto in cui è stato specificato il tag. - Top: Allinea la prima riga del testo sulla sinistra nel lato superiore dell’immagine
- Middle: Allinea la prima riga del testo sulla sinistra al centro dell’immagine
Bottom: Allinea la prima riga del testo sulla sinistra nel lato inferiore dell’immagine
- HSPACE = “dimensione” – Imposta la distanza orizzontale tra l’immagine e ciò che la circonda
- VSPACE = “dimensione” – Imposta la distanza verticale tra l’immagine e ciò che la circonda
Blogger e scrittore ventenne nato a Taranto. Collabora con diverse agenzie di marketing digitale e operativo. Ha pubblicato il manuale Windows 10: Guide e Soluzioni e il libro di narrativa storica Cronache di un Palazzo Abbandonato.
