Guida HTML Css

LINGUAGGIO HTML INTRODUZIONE
Questo ebook non vuole essere una guida completa all’HTML ma solo un manuale che possa
aiutare i blogger meno esperti a districarsi con i codici per avere un aiuto nella pubblicazione degli
articoli. HTML è l’acronimo di HyperText Markup Language ed è un linguaggio usato per documenti
e pagine ipertestuali disponibili nel web.
L’HTML non è un linguaggio di programmazione ma è un linguaggio di markup in cui determinati tag

descrivono colore, dimensioni, link o altre caratteristiche del testo. Ci sono tag che determinano
anche la modalità di impaginazione, di formattazione e di visualizzazione grafica.
Il linguaggio HTML supporta l’inserimento di script e oggetti esterni quali immagini e filmati. I file
HTML si riconoscono perché hanno una estensione .html o .htm. Quest’ultima estensione è un
retaggio del DOS che non permetteva di utilizzare più di tre caratteri. La sintassi dell’HTML è stabilità
dal World Wide Web Consortium (W3C). I documenti HTML sono in grado di supportare molte altre
tecnologie quali CSS, JavaScript e jQuery, XML, JSON, streaming audio e streaming video. I tag
sono rinchiusi dentro delle marcature formate da due parentesi angolari più comunemente
conosciute come segno di minore (<) e maggiore (>).
La struttura di un documento è invariabilmente compresa tra i tag <html> e </html> che ne

determinano l’inizio e la fine. La chiusura di un tag viene fatta anteponendo il segno di slash (/) al
tag iniziale. La struttura di una pagina HTML è formata da due parti: la sezione HEAD e la sezione
BODY. I tag inseriti nella sezione HEAD normalmente non vengono visualizzati nella pagina ma
servono come informazioni di controllo e di servizio quali
1. Metadata per motori di ricerca e codifica dei caratteri

2. Collegamenti verso file esterni quali stili CSS e Javascript
3. Inserimenti di stili CSS e script locali
4. Titolo della pagina visualizzato nel browser
Nella sezione BODY sono invece presenti i tag che servono per determinare la visualizzazione e
l’aspetto del documento quali
1. Intestazioni e titoli di capitoli, testo, ecc

2. Strutture di testo come paragrafi, citazioni, ecc
3. Aspetto del testo come grassetto, corsivo, ecc
4. Elenchi, Liste, Tabelle, Moduli, ecc
5. Link o Collegamenti ipertestuali
6. Layout del documento
7. Inserimento di immagini, audio, video, animazioni, script e applicazioni esterne
2
La grande maggioranza di siti sono strutturati con un CMS o Modello o Tema che tramite un server
determina l’aspetto e il funzionamento di una generica pagina del sito. Ciascuna di queste ultime ha
poi un particolare HTML che la contraddistingue dalle altre.
I vari browser traducono tutto il contenuto e i tag di una pagina HTML in quello che poi noi vediamo
quando la apriamo. I vari browser in certi casi traducono il linguaggio di markup in modo diverso
tra di loro anche se questa problematica è stata in gran parte risolta per quelli più comuni.
La struttura generica di una pagina web è la seguente
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h1>Titolo</h1>
<p>Paragrafo.</p>
</body>
</html>
Gli elementi HTML vengono introdotti nella pagina web in questo modo
<nometag>Contenuto</nometag>
Esempi
<h1>Questo è un titolo</h1>
<p>Questo è un paragrafo</p>
Ci sono anche tag che non hanno bisogno di chiusura come <br/> che rappresenta il salto di riga e
<img> che serve per inserire le immagini. I documenti HTML contengono semplice testo e tag e
possono essere visualizzati per esempio con un programma tipo Block Notes o un editor specifico
per linguaggi di programmazione quale il gratuito Notepad++ .
HTML DI BASE
I tag per inserire i titoli di una pagina sono i seguenti
<h1>Titolo principale</h1>
<h2>Titolo secondario</h2>
<h3>Titolo minore</h3>
<h4>Intestazione più piccola</h4>
3
Il formato dei titoli va a decrescere a partire da H1 in poi ma non si devono usare questi tag per
modificare i caratteri ma per dare maggiore o minore importanza a un titolo.
Un paragrafo inizia con <p> e termina con </p> in questo modo
<p>Questo è un paragrafo</p>
<p>Questo è un altro paragrafo</p>
Alla fine di un paragrafo viene sempre inserito un salto di riga. Se si utilizza il tag div per un testo
<div>Questo è un contenuto</div>
Ci sarà ugualmente un salto di riga mentre per mostrare il testo alla stessa altezza va utilizzato il tag
span. Utile per esempio per mettere in grassetto o in corsivo una singola parola
Questo è un testo <span>tutto sulla stessa linea</span>
Il tag span viene usato per esempio per inserire colorazioni diverse nello stesso blocco di testo.
I collegamenti o link vengono inseriti con questa sintassi
<a href='URL del collegamento' title='tooltip del link' target='_blank'/>Testo visibile del link</a>
Dove l’URL del collegamento è la pagina a cui si viene indirizzati se ci si clicca sopra, il tooltip del
link è la scritta che si visualizza quando si passa sopra con il mouse. Il tag Title è opzionale così come
target='_blank' che serve per far aprire il link in un’altra scheda del browser.
Le Immagini si inseriscono invece secondo questa sintassi
<img src="Indirizzo immagine" alt='nome immagine' title='titolo immagine' width="150"

height="100" />
Il tag img non ha bisogno di chiusura però deve terminare con la slash che precede il segno di
maggiore (/>). L’indirizzo immagine è l’indirizzo della foto caricata nel web . Il tag Alt è importante
perché mostra il Testo alternativo della immagine ai browser che non riescono a aprirla mentre il
tag Title mostra un tooltip quando si passa sulla immagine con il cursore. Width e Height
rappresentano le dimensioni in pixel rispettivamente di larghezza e altezza della immagine.
4
LINK O COLLEGAMENTI
Nel paragrafo precedente abbiamo visto che la sintassi per inserire un collegamento è la seguente
<a href='URL del collegamento' title='tooltip del link' target='_blank'/>Testo visibile del link</a>
Si può usare anche il tag name per creare un segnalibro all’interno della pagina a cui vogliamo
indirizzarci in questo modo.
Segnalibro dentro una pagina HTML:
<a name="hack">Sezione della pagina</a>
Un segnalibro dentro allo stesso documento:
<a href="#hack">Sezione della stessa pagina</a>
Linkare un segnalibro da un'altra pagina:
<a href="http://www.nome-post.htm#hack">Visita la sezione hack</a>
Maggiori informazioni sui link interni alle pagine web si possono trovare in questo post.
Per linkare una immagine si usa invece questo codice
<a href="http://wwwideepercomputeredinternet.com/"> <img src="URL Immagine" /> <a/>
dove il codice della immagine è ridotto all’essenziale. Si possono linkare anche altri oggetti come
animazioni, video e anche altri oggetti HTML. Si usa la sintassi precedente e basterà inserire il loro
codice al posto di quello della immagine colorato di blu.
Si può anche linkare un indirizzo email. Con questo genere di link, che ci clicca sopra apre il
programma predefinito per la posta elettronica. Il codice è il seguente:
<a href="mailto:miaposta@esempio.com?Subject=Un%20Saluto">
dove occorre sostituire l’indirizzo email e l’oggetto della mail. In questo caso %20 rappresenta
uno spazio e l’espressione Un Saluto sarà automaticamente inserita nell’Oggetto della email.
5
GLI ATTRIBUTI
I tag HTML possono avere degli attributi che inseriscono informazioni aggiuntive. Tali attributi
vengono sempre inseriti nel tag di apertura e non in quello di chiusura. Inoltre vengono sempre
racchiusi dentro delle virgolette doppie o virgolette singole.
Abbiamo già visto alcuni tipi di attributi come quello per inserire un link
<a href="Indirizzo Link">Questo è un collegamento</a>
Gli attributi più rilevanti sono:
class che specifica una classe di un elemento

id che specifica un unico id di un elemento
style che determina uno stile inline di un elemento
title che mostra l’informazione in un tooltip
TITOLI O INTESTAZIONI
Come abbiamo visto nel capitolo sull’HTML di base i titoli vengono definiti da
<h1>Titolo principale</h1>
<h2>Titolo secondario</h2>
<h3>Titolo minore</h3>
dove si può andare da <h1> per il titolo più importante fino a <h6> per quelli secondari.
Le linee orizzontali possono essere create con il tag
<hr/>
Si può verificare il corretto funzionamento di un codice HTML incollandolo nel tool online Real Time
che mostrerà nella parte bassa della finestra come risulta il codice inserito nella parte alta
6
In un codice HTML possono anche essere inseriti dei commenti che sono delle porzioni di testo che
non vengono mostrate dal browser ma servono al programmatore per ritrovare più facilmente un
codice che ha inserito. La sintassi di un commento è la seguente:

I tag HTML non sono case sensitive vale a dire le maiuscole funzionano esattamente come le
minuscole. Un codice di questo tipo
<P>Paragrafo primo</p>
funzionerà perfettamente ma la regola del W3C è quella di usare solo le minuscole.
GLI STILI O CSS

Gli stili o CSS sono stati introdotti con l’HTML4 e servono per rendere più efficiente il codice HTML.
Tali stili possono essere inseriti nella pagina in tre modi diversi:
1. Inline usando l’attributo style all’interno di un tag

2. Interno usando il tag <style> nella sezione <head>
3. Esterno usando un file CSS esterno
La terza opzione comporta l’inserimento di un codice simile a questo
<head>
<link rel="stylesheet" type="text/css" href="URL del file CSS" />
</head>
Nel secondo caso si possono creare delle classi di stile per un elemento generico o per un elemento
specifico che poi dovranno essere riprese nell’HTML
<html>
<head>
7
<style type="text/css">
.elemento {
background-color: yellow;
font-family: Georgia;
font-weight: bold;
}
</style>
</head>
<body>
<h1>Titolo del post</h1>
<p class="elemento">Questo testo avrà lo sfondo giallo e i caratteri Georgia</p>
</body>
</html>
L'attributo font-weight: bold; serve per mostrare il testo in grassetto.
L’esempio precedente riguarda un elemento generico da cui il punto prima del nome della classe
e l’attributo class inserito nell’elemento HTML . Il codice seguente
<html>
<head>
<style type="text/css">
#selettore {
font-size:18px;
font-weight:bold;
color:red;
}
</style>
</head>
<body>
<h1>Titolo del post</h1>
<div id="selettore">Questo testo avrà i caratteri di 18 pixel, sarà in grassetto e di colore
rosso</div>
8
</body>
</html>
Si riferisce invece a un elemento univoco con il nome della classe preceduto dal cancelletto ( # ) e
l’attributo id inserito nell’elemento HTML a cui si riferisce
Le classi di stile possono anche essere aggiunte inline utilizzando l’attributo style come mostrato
dall’esempio seguente
<body>
<h1 style="font-family:verdana; color:#003366;">Titolo</h1>
<p style="font-family: arial; color: red; font-size:20px; font-style:italic;">Un paragrafo.</p>
</body>
che produce questo risultato
En passant abbiamo anche visto che font-style: italic; serve per il corsivo mentre font-weight:bold;
per il grassetto. I tag <html>, <head> e <body> sono stati inseriti per mostrare la zona della pagina
in cui va inserito il codice e non devono essere inseriti realmente tutte le volte.
9
FORMATTAZIONE DEL TESTO
Cominciamo con degli esempi che spiegheranno meglio di tante parole
<b>Questo per il grassetto</b>

<strong>Anche questo è grassetto</strong>
<big>Questo testo è grande</big>
<i>Questo testo è in corsivo</i>
<em>Questo testo è enfatizzato</em>
<code>Questo è il font del computer</code>
Questo è<sub> un pedice</sub> e questo è un <sup>esponente</sup> o apice.
Se viene incollato su Real Time HTML Editor produce questo risultato
La differenza tra i tag <b> e <strong> è minima invece quella tra <i> e <em> è più significativa.
Spesso i browser li riproducono nella stessa maniera. Si può usare <strong> o <em> al posto di <b>
e <i> quando oltre a voler mostrare in grassetto e corsivo del testo ne vogliamo anche rimarcare
l’importanza SEO. Altri tag interessanti sono :
<abbr> Definisce una abbreviazione </abbr>

<blockquote> Definisce una citazione </blockquote>
<q> Definisce una citazione corta </q>
Il codice <abbr title="TESTO DEL TOOLTIP">TESTO VISUALIZZATO</abbr> inserisce un tooltip in

una porzione di testo della pagina.
ELENCHI E LISTE
Gli elenchi e le liste sono principalmente di tre tipi
10
1. Elenchi ordinati
2. Elenchi non ordinati
3. Liste di definizione
ELENCHI NON ORDINATI

Il codice di esempio di un elenco ordinato è il seguente
<ul>
<li>Primo elemento</li>
<li>Secondo elemento</li>
<li>Terzo elemento</li>
</ul>
Ciascun elemento avrà un cerchietto nero alla sua sinistra. I tag utilizzati sono <ul> e </ul> per inizio
e fine elenco e <li> e </li> per inizio e fine di ciascun elemento
ELENCHI ORDINATI
Il codice di esempio di un elenco ordinato è il seguente
<ol>
</ol>
I tag utilizzati sono <ol> e </ol> per l’elenco e <li> e </li> per ciascun elemento. In questo caso
ciascun elemento della lista sarà preceduto da un numero.
Si può inserire un elenco anche all’interno di un altro elenco in questo modo
<ol>
<ul>
<li>Elemento 1.1</li>
<li>Elemento 1.2</li>
11
</ul>
</ol>
Con questo risultato
LISTE DI DEFINIZIONE
Il codice di esempio di una lista di definizione è il seguente:
<dl>
<dt>Caffè</dt>
<dd>macchiato e molto caldo</dd>
<dt>Succo di frutta</dt>
<dd>Albicocca e lime</dd>
</dl>
e produce questo risultato
12
I tag utilizzati sono <dl> e </dl> per l’inizio e la fine della lista, <dt> e </dt> per l’inizio e la fine di
ciascun elemento, <dd> e </dd> per l’inizio e la fine della descrizione del singolo elemento.
Gli Elenchi possono essere personalizzati inserendo icone, numeri romani o greci e immagini di
sfondo. Per approfondire l’argomento vi consiglio di leggere il post sugli stili degli elenchi.
TABELLE
Le tabelle sono una parte importante dell’HTML e possono essere usate anche per fini diversi da
quelli soliti come per esempio un modo efficace per allineare immagini o bottoni.
Il codice di esempio di una tabella è il seguente
<table border="1" cellspacing="2" cellpadding="2" width="240">

<tr>
<th>Intestazione 1</th>
<th>Intestazione 2</th></tr>
<tr>
<td>Cella 1.1</td>
<td>Cella 1.2</td></tr>
<tr>
<td>Cella 2.1</td>
<td>Cella 2.2</td>
</tr>
</table>
Dove I tag utilizzati sono stati
1. <table> e </table> per l’inizio e la fine della tabella

2. border per la dimensione in pixel del bordo
3. cellspacing per la distanza in pixel tra cella e cella
4. cellpadding per la distanza tra contenuto e bordo della cella
5. widht per la larghezza della tabella
6. <tr> e </tr> definiscono l’inizio e la fine di una riga
7. <th> e </th> per inizio e fine dell’header della tabella
8. <td> e </td> per inizio e fine di una singola cella
Si possono usare anche i seguenti tag:
1. <caption> per la descrizione della tabella

2. <thead> gruppo di header nella tabella
3. <tbody> gruppo di contenuti nella tabella
13
Si possono inserire anche dei CSS usando l’attributo style per inserire colore di sfondo o per
determinare i vari colori dei singoli elementi.
IMMAGINI
Le immagini si inseriscono nell’HTML con il tag <img> che è vuoto cioè non ha bisogno di tag di
chiusura. Ha cioè lo stesso comportamento di <br/> che indica un salto di riga e <hr/> che invece
introduce una riga orizzontale. Il codice da usare è il seguente
<img src="Indirizzo immagine" alt='nome immagine' title='titolo immagine' width="150"

height="100" />
Dove deve essere inserito l’URL della immagine. Gli altri attributi sono opzionali ma molto
importanti e riguardano i seguenti elementi
1. Alt è il testo alternativo vale a dire quello che si legge quando il browser non apre
l’immagine
2. Title è il testo del tooltip che si visualizza quando si punta l’immagine con il mouse
3. Width e Height sono la larghezza e l’altezza. Nel caso ci sia un solo valore l’altro verrà di
conseguenza mantenendo invariate le proporzioni della immagine
14
Se si vuole mettere un collegamento a una immagine si usa questo codice
<a href="URL DEL COLLEGAMENTO"> <img src="URL Immagine" /> <a/>
dove sono stati omessi per brevità alcuni attributi dell’immagine.
LAYOUT E TAG DIV

Il layout è uno degli aspetti più importanti di una pagina web. È essenziale il contenuto che vi è
postato ma anche il modo in cui viene presentato. In questo modesto ebook non si possono certo
affrontare tutte le tematiche che riguardano l’aspetto di una pagina.
Se siamo utenti di piattaforme quali Blogger o Wordpress sono gli stessi modelli o temi che
attraverso i CSS o fogli di stile determinano il layout del sito. C’è il codice per la forma e la
dimensione dell’header, quello per la sidebar di sinistra e la sidebar di destra, quello per il footer
e quello per lo sfondo.
Nel caso in cui avessimo una pagina bianca in cui incollare codice senza che sia presente una
sovrastruttura potremo creare un HTML di questo tipo
<div id="contenitore" style="width:480px">

<div id="intestazione" style="background-color:#FFB411;">
<h1 style="margin-bottom:0;">Titolo della pagina</h1>
</div>
<div id="menu" style="background-color:#FFE622;height:200px; width:90px;float:left;">
<b>MENU</b><br />
GUIDE<br />
HTML<br />
CSS</div>
<div id="content" style="background-color:#EEFFEE;height:200px;width:390px;float:left;"> Quì
ci va il contenuto della pagina. Si possono usare tag di formattazione quali il <b>grassetto</b> o
il <i>corsivo</i>. E' anche possibile usare dei fogli di stile per <span style="color:#003366; font-
weight:bold;">personalizzare il testo</span></div>
<div id="footer" style="background-color:#FFB411;clear:both;text-align:center;">Copyright ©
www.ideepercomputeredinternet.com</div>
</div>
che produce questo risultato
15
Per dare un aspetto particolare a una parte del contenuto di una pagina si utilizza il tag <div> che
permette attraverso appropriati fogli di stile di impostare sfondo, colori del testo, margini esterni
(margin) e margini interni (padding). Ecco un esempio
<div style="color:#003366; background-color:#EEEEEE; width:400px; height:200px;

padding:5px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam quis lorem turpis.
Aliquam mauris quam, facilisis at egestas quis, fringilla id leo. Nam ac nisi nisl. Vestibulum in
sagittis eros. Pellentesque gravida ornare ultrices. Integer at sapien sem. Curabitur at lorem risus,
vitae mattis eros. Vestibulum suscipit elementum tortor at suscipit. Nam nec diam ac ante lobortis
tincidunt sit amet ac sem. Vestibulum laoreet, elit ac laoreet imperdiet, justo diam porta felis,
interdum congue turpis dolor vitae risus. Aliquam pellentesque eros non justo gravida et venenatis
tortor hendrerit.</div>
Che genera un blocco di testo con questo aspetto
16
MODULI E BOTTONI
Una delle ragioni dei successi del web è stata la possibilità di immettere o raccogliere informazioni
tramite la compilazione di moduli o form. E’ evidente che questa sezione dell’HTML può essere solo
accennata. La sintassi di un modulo generico è la seguente
<form>
elementi del modulo
</form>
Gli elementi del modulo possono essere text field, checkbox, password, radio button, submit
button e molti altri ancora. Ci limiteremo a vedere dei semplici esempi usando il tag <input> per gli
elementi
<form>
Nome:<input type="text" name="nome" /><br />
Cognome: <input type="text" name="cognome" />
</form>
produce questo effetto
Si possono inserire degli attributi quali la larghezza. Il codice seguente
<form>
Password: <input type="password" name="pswd" />
</form>
serve per la digitazione di password
17
mentre quello del tipo radio buttons permette di selezionare solo una tra varie scelte
<form>
<input type="radio" name="sex" value="male" /> Maschio<br />
<input type="radio" name="sex" value="female" /> Femmina
</form>
in questo modo
I form del tipo Checkboxes permettono invece di selezionare più opzioni tra quelle proposte
<form>
<input type="checkbox" name="trasporto" value="Bici" /> Possiedo una bici<br />
<input type="checkbox" name="trasporto" value="Auto" /> Possiedo una auto
</form>
Il codice precedente genera questo modulo
I moduli del tipo Drop Down List vengono creati con questo codice
<form>
<select name="auto">
<option value="FIAT">FIAT</option>
<option value="BMW">BMW</option>
18
<option value="AUDI">AUDI</option>
</select>
<select name="moto">
<option value="YAMAHA">YAMAHA</option>
<option value="ONDA">ONDA</option>
<option value="DUCATI">DUCATI</option>
</select>
</form>
Che danno poi questa risultanza
Il tag <form> rappresenta l’inizio e la fine del modulo, <select> e </select> l’inizio e la fine di una
lista e <option> ciascun elemento della lista.
Per i bottoni si può usare questo codice
<button> NOME DEL BOTTONE </button>
Se si vuole inserire anche un collegamento si può usare quest’altro
<a href="URL DEL COLLEGAMENTO" target="_blank" title="titolo"><input name="button"

value="testo visibile" style=" color:#191919; background-color: #FDBCB7;" type="submit"></a>
dove gli attributi da inserire li abbiamo già trattati nei precedenti capitoli. Un modo per creare un
bottone con un campo per inviare un dato a un server è quello di usare il codice seguente
<form name="input" action="#" method="get">

Indirizzo email: <input type="text" name="user" />
<input type="submit" value="Invia" />
</form>
19
dove al posto del cancelletto si incolla l’URL della pagina a cui inviare il modulo. È evidente che, se
non si ha la disponibilità di un sito web a cui accedere, questi codici non possono servire per ottenere
informazioni ma solo come mera curiosità.
Concludo questo capitolo indicando alcuni tag che fanno parte della stessa categoria di <form> e
<input>.
1. Textarea per la creazione di aree di input

2. Label che definisce una etichetta per un elemento input
3. Fieldset per la creazione di un bordo intorno a un form
4. Legend per la descrizione di un elemento fieldset
IFRAME
Gli Iframe sono degli elementi che servono per richiamare una pagina web all’interno di un’altra
pagina web. In sostanza si crea una finestra all’interno della quale si può vedere un’altra pagina di
cui si è immesso l’URL. Il codice di condivisione dei video di Youtube è formato da un Iframe.
<iframe align="center" height="200" width="300" scrolling="yes" src="URL PAGINA

WEB"></iframe>
Se ne possono settare le dimensioni e inserire altri attributi quali scrolling="no" per non mostrare
le barre di scorrimento oppure frameborder="0" per eliminare il bordo. Gli IFrame vengono usati
anche da servizi di video-sharing quali Youtube per incorporare il filmato nei siti web.
<iframe width="560" height="315" src="https://www.youtube.com/embed/bHgASPf1yHA"

title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write;
encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
20
APPENDICE
In questa sezione inserirò un po’ alla rinfusa alcune cose che non ho avuto modo di affrontare nel
resto dell’ebook ma che sono importanti anche per una conoscenza elementare dell’HTML
HTML5 E CCS3
Sono da anni già disponibili le versioni aggiornate per HTML e CSS cioè HTML5 e CSS3. Si tratta della
introduzione di nuovi tag che potranno via via essere interpretati dai vari browser per dare una
esperienza di navigazione ancora migliore. Verranno notevolmente aumentate le prestazioni dei
browser per quello che riguarda i filmati e verranno introdotte delle trasformazioni quali le
rotazioni. Mi limiterò ad alcuni aspetti dei tag HTML5 per inserire audio e video nelle pagine web.
Per creare un player audio in una pagina web si usa questo codice
<audio controls> <source src="Indirizzo Web del file audio" /> </audio>
Mentre per creare un player video si usa questo codice
<video controls="" preload="auto" src="URL FILE MP4" width="700" height="394"> </video>
21
TEXTAREA
La textarea è un codice per visualizzare un’area con barre di scorrimento. Il codice di base è
<form>
<textarea cols="50" rows="6" style="background-image: url(URL IMMAGINE DI SFONDO); color:
#191919; background-color: #FDBCB7; font-weight: bold; font-size: 14pt;">TESTO DA
VISUALIZZARE NEL BOX</textarea>
</form>
In cui si possono settare il numero delle colonne (50) e il numero delle righe (6) oltre a colore di
sfondo, immagine di sfondo, grassetto e dimensione del testo.
COME ALLINEARE O CENTRARE

Per centrare un oggetto HTML quale un testo o un video si usano due tag <div> in questo modo
<div align="center">
Codice dell’elemento da centrare
</div>
Se si vuole allineare a sinistra si sostituisce center con left, se si vuole allineare a destra si mette
right e infine si usa justify se si vuole giustificare un testo.
Per centrare una immagine si usa quest’altro codice
<img style='display:block; margin-left:auto; margin-right:auto;' src="URL IMMAGINE"/>
dove al solito codice è stato aggiunta la riga colorata di rosso.
CODICI DEI COLORI

I codici dei colori sono individuati da una terna ordinata di numeri da 0 a 255 che ne indicano la
quantità rispettivamente di Rosso, Verde e Blu. Per esempio (0,255,0) è il colore verde. Si può
usare anche la notazione esadecimale in cui un colore è determinato da sei cifre esadecimale che
vanno da 0 a F. Per esempio #7B0C15. Il modello dei colori RGB (Red, Green, Blue) è stato
integrato con il canale alfa della trasparenza ed è diventato RGBA.
Maggiori informazioni sui modelli RGB e RGBA si possono trovare nel post sui codici dei colori.
22
INDICE
LINGUAGGIO HTML INTRODUZIONE .................................................................................................... 2
HTML DI BASE .............................................................................................................................................. 3
LINK O COLLEGAMENTI ............................................................................................................................ 5
GLI ATTRIBUTI ............................................................................................................................................ 6
TITOLI O INTESTAZIONI ........................................................................................................................... 6
GLI STILI O CSS ............................................................................................................................................. 7
FORMATTAZIONE DEL TESTO ............................................................................................................. 10
ELENCHI E LISTE....................................................................................................................................... 10
ELENCHI NON ORDINATI ............................................................................................................................................11
ELENCHI ORDINATI ....................................................................................................................................................11
LISTE DI DEFINIZIONE .................................................................................................................................................12
TABELLE ...................................................................................................................................................... 13
IMMAGINI ................................................................................................................................................... 14
LAYOUT E TAG DIV .................................................................................................................................. 15
MODULI E BOTTONI ................................................................................................................................ 17
IFRAME ........................................................................................................................................................ 20
APPENDICE ................................................................................................................................................. 21
HTML5 E CCS3 ............................................................................................................................................................21
TEXTAREA ..................................................................................................................................................................22
COME ALLINEARE O CENTRARE .................................................................................................................................22
23
CODICI DEI COLORI ....................................................................................................................................................22
INDICE .......................................................................................................................................................... 23
Ebook scritto da Ernesto Tirinnanzi - Firenze lì, 24 Luglio 2022
Copyright © https://www.ideepercomputeredinternet.com
Il contenuto di questo libro può essere distribuito gratis anche modificato soltanto citando il nome
dell’autore e linkando il sito web di cui sopra con Licenza Creative Commons CC BY SA 4.0.
24

Guida HTML Css

Caricato da

Informazioni sul documento

Copyright

Formati disponibili

Condividi questo documento

Condividi o incorpora il documento

Opzioni di condivisione

Hai trovato utile questo documento?

Questo contenuto è inappropriato?

Copyright:

Formati disponibili

Guida HTML Css

Caricato da

Copyright:

Formati disponibili

LINGUAGGIO HTML INTRODUZIONE

L’HTML non è un linguaggio di programmazione ma è un linguaggio di markup in cui determinati tag

La struttura di un documento è invariabilmente compresa tra i tag <html> e </html> che ne

1. Metadata per motori di ricerca e codifica dei caratteri

1. Intestazioni e titoli di capitoli, testo, ecc

La struttura generica di una pagina web è la seguente

Un paragrafo inizia con <p> e termina con </p> in questo modo

Questo è un testo <span>tutto sulla stessa linea</span>

I collegamenti o link vengono inseriti con questa sintassi

Le Immagini si inseriscono invece secondo questa sintassi

<img src="Indirizzo immagine" alt='nome immagine' title='titolo immagine' width="150"

Segnalibro dentro una pagina HTML:

<a name="hack">Sezione della pagina</a>

Un segnalibro dentro allo stesso documento:

<a href="#hack">Sezione della stessa pagina</a>

Linkare un segnalibro da un'altra pagina:

<a href="http://www.nome-post.htm#hack">Visita la sezione hack</a>

Per linkare una immagine si usa invece questo codice

<a href="http://wwwideepercomputeredinternet.com/"> <img src="URL Immagine" /> <a/>

<a href="Indirizzo Link">Questo è un collegamento</a>

Gli attributi più rilevanti sono:

class che specifica una classe di un elemento

Le linee orizzontali possono essere create con il tag

funzionerà perfettamente ma la regola del W3C è quella di usare solo le minuscole.

GLI STILI O CSS

1. Inline usando l’attributo style all’interno di un tag

La terza opzione comporta l’inserimento di un codice simile a questo

L'attributo font-weight: bold; serve per mostrare il testo in grassetto.

che produce questo risultato

<b>Questo per il grassetto</b>

Se viene incollato su Real Time HTML Editor produce questo risultato

<abbr> Definisce una abbreviazione </abbr>

Il codice <abbr title="TESTO DEL TOOLTIP">TESTO VISUALIZZATO</abbr> inserisce un tooltip in

ELENCHI NON ORDINATI

Si può inserire un elenco anche all’interno di un altro elenco in questo modo

Con questo risultato

e produce questo risultato

Il codice di esempio di una tabella è il seguente

<table border="1" cellspacing="2" cellpadding="2" width="240">

Dove I tag utilizzati sono stati

1. <table> e </table> per l’inizio e la fine della tabella

Si possono usare anche i seguenti tag:

1. <caption> per la descrizione della tabella

<img src="Indirizzo immagine" alt='nome immagine' title='titolo immagine' width="150"

<a href="URL DEL COLLEGAMENTO"> <img src="URL Immagine" /> <a/>

dove sono stati omessi per brevità alcuni attributi dell’immagine.

LAYOUT E TAG DIV

<div id="contenitore" style="width:480px">

che produce questo risultato

<div style="color:#003366; background-color:#EEEEEE; width:400px; height:200px;

Che genera un blocco di testo con questo aspetto

produce questo effetto

Si possono inserire degli attributi quali la larghezza. Il codice seguente

serve per la digitazione di password

Il codice precedente genera questo modulo

Che danno poi questa risultanza

Per i bottoni si può usare questo codice

<button> NOME DEL BOTTONE </button>

Se si vuole inserire anche un collegamento si può usare quest’altro

<a href="URL DEL COLLEGAMENTO" target="_blank" title="titolo"><input name="button"

<form name="input" action="#" method="get">

1. Textarea per la creazione di aree di input

<iframe align="center" height="200" width="300" scrolling="yes" src="URL PAGINA