Categorie
HTML

Lezione 3: La mia prima pagina HTML

Per scrivere una pagina in HTML, è necessario aprire un editor di testo (per esempio il notepad) e salvare la pagina con estensione .htm o .html.

Esistono diversi editor di testo gratuiti e con funzionalità molto utili agli sviluppatori.

In questa guida, faremo riferimento all’editor di testo Context, che è scaricabile gratuitamente al link http://www.contexteditor.org/.

Chiamiamo questa prima pagina saluta.html e scriviamo all’interno il seguente contenuto: 

Categorie
HTML

Lezione 2: Struttura della pagina HTML

Il primo tag che useremo è il tag <HTML>,  che indica che tutto ciò che è compreso tra apertura e chiusura tag è in codice HTML:


<html>

… altri tag …

</html>

 

Un documento HTML è normalmente diviso in due sezioni:

head

body 

Categorie
HTML

Lezione 1: Struttura di un tag

Il linguaggio HTML viene utilizzato per formattarele pagine web.

All’interno di ogni pagina è presente una serie di marcatori (i TAG), a cui viene affidata la formattazione della pagina web.

I tag vanno inseriti tra parentesi angolari

<Nome-TAG>

La chiusura del tag viene indicata con una “/” (è il simbolo comunemente detto “slash”). Quindi:

</Nome-TAG>

 

Nota bene: La maggior parte dei tag deve essere obbligatoriamente chiusa, altrimenti la pagina potrebbe non essere correttamente visualizzata.

Categorie
HTML

Inseriamo una mappa nel nostro sito.

Per inserire una mappa sul sito è possibile utilizzare il sito mappe di Google. 

Andiamo quindi sul sito https://www.google.it/maps e scriviamo il nostro indirizzo, per esempio viale della civiltà del lavoro 129, Roma

 

Categorie
HTML

Applichiamo gli stili al tag A

Di default il link è sottolineato e di colore blu. Per applicare uno stile diverso utilizziamo il selettore a, si possono utilizzare tutte le proprietà già usate per formattare il testo.

E’possibile anche applicare uno stile diverso ai link già visitati (a:visited) o al passaggio del mouse sul link (a:hover).

Vediamo una semplice pagina di esempio, che mostra il link AVANTI: