Bannato 53 punti

HTML di base

Editor HTML:

Per una miglior gestione dell'html io consiglio di utilizzare il blocco note di windows o anche un html editor qualsiasi reperibile da internet.

Nel caso del blocco note è buona norma creare una directory (cartella) per il nostro progetto e aprire una nuova nota dove scriveremo il nostro codice. Da qui salveremo 2 tipi di file: per prima uno file con estensione .txt e in secondo luogo un file con estensione .htm o .html per leggere su browser il nostro progetto come se lo stessimo visualizzando una pagina web.

Nomenclatura:

Dovete sapere solo una cosa, questo è un tag:
[CODE]<p>[/CODE]

Struttura:

La prima cosa da imparare è come strutturare un progetto.
Innanzi tutto si parte dal tag <html> che andrà appunto a dire al nostro browser che noi stiamo utilizzando l'html.

Da qui il codice sarà diviso in due: il primo è l'<head> ed il secondo è il <body>.
Nell'head si andranno ad inserire i meta tag che su fc non ci servono, quindi vi risparmio la spiegazione.
Nel body viene scritto il codice vero e proprio.

Quindi la struttura di una pagina standard è questa:
[CODE]<html>
<head>
<title>Ciao Mondo</title>
</head>
<body>
<p>Ciao Mondo</p>
</body>
<html>[/CODE]

Vari TAG:

I tag più semplici sono quelli per modificare lo stile del testo, quindi andiamoli a vedere:
[CODE]<b></b>[/CODE] GRASSETTO
[CODE]<i></i>[/CODE] CORSIVO
[CODE]<u></u>[/CODE] SOTTOLINEATO
[CODE]<sup></sup>[/CODE] IN APICE
[CODE]<sub></sub>[/CODE] IN PEDICE
[CODE]<strike></strike>[/CODE] BARRATO

Il testo però alle volte necessita di essere colorato o altro quindi ecco il tag più generale per modificare UNA PARTE di testo.
<span></span>
Da cui saranno dovuti aggiungere dei tag all'interno dello stesso, quindi:
[CODE]<font color="blue" face="arial" size="3">Ciao Mondo</font>[/CODE]

Qui avrò un Ciao Mondo scritto in arial, colorato in blu e con dimensioni di 3 pixel.
I colori possono essere comunque reperiti tramite dei codici (es. #FFFFF) scritti in tabelle di colori su internet (sarebbe impossibile impararli tutti a memoria).

Per modificare TUTTO il testo della pagina, bisogna andare ad inserire degli ulteriori tag all'interno del <body>, quindi

[CODE]<html>
<head></head>
<body face="arial" color="red" size="7" bgcolor="orange">
</body>
</html>[/CODE]
Dove bgcolor è il colore di background. In alternativa, per inserire un'immagine di sfondo, si può usare questo:
[CODE]<body background="nomeimmagine.jpg"[/CODE]
Dove nomeimmagine.jpg può essere sostituito da un link dell'immagine stessa, se il progetto dovesse essere mandato online (altrimenti l'immagine deve stare nella stessa directory del nostro progetto).

Analogamente, per inserire un'immagine dove vogliamo, possiamo usare questo:
[CODE]<img src="nomeimmagine.gif" width="300" height="200">[/CODE]
Dove width ed height servono a decidere di che grandezza la nostra immagine verrà visualizzata. Qui non ci serve un tag di chiusura.

Per creare una lista possiamo usare due metodi:
Il primo è per una lista numerata, quindi avremo
[CODE]<b>Triangolo amoroso HG:</b>
<ol>
<li>
<font color="red">Katniss</font>
</li>
<li>
<font color="orange">Peeta</font>
</li>
<li>
<font color="yellow">Gale</font>
</li>
</ol>[/CODE]
Mentre sostituendo al tag <ol>, il tag <ul> avremo una lista a puntini.

Per delimitare un paragrafo utilizzeremo il tag [CODE]<p></p>.[/CODE]
Per andare a capo useremo il tag "br" che non ha tag di chiusura.
[CODE]<br>[/CODE]

Hai bisogno di aiuto in Informatica?
Trova il tuo insegnante su Skuola.net | Ripetizioni
Registrati via email
Consigliato per te
Maturità 2018: date, orario e guida alle prove