Concetti Chiave
- Utilizzare il blocco note di Windows o un editor HTML per gestire i progetti, creando una directory dedicata per i file.
- La struttura di base di una pagina HTML include i tag <html>, <head> per i meta tag, e <body> per il contenuto principale.
- I tag fondamentali per modificare lo stile del testo comprendono <b> per il grassetto e <i> per il corsivo, tra gli altri.
- È possibile personalizzare il colore e lo stile del testo utilizzando il tag <font>, specificando attributi come colore e dimensioni.
- Per inserire immagini e liste, si usano i tag <img> per le immagini e <ol> o <ul> per le liste numerate o puntate.
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.
Dovete sapere solo una cosa, questo è un tag:
[/CODE]
[/p]
[h2]Struttura di base di un progetto html[/h2]
[p]
La prima cosa da imparare è come strutturare un progetto.
[/p]
[p]
Innanzi tutto si parte dal tag [b]<html>[/b] che andrà appunto a dire al nostro browser che noi stiamo utilizzando l'html.
[/p]
[p]
Da qui il codice sarà diviso in due: il primo è l'[b]<head>[/b] ed il secondo è il [b]<body>[/b].
[/p]
[p]
Nell'head si andranno ad inserire i [b]meta tag[/b] che su fc non ci servono, quindi vi risparmio la spiegazione.
[/p]
[p]
Nel body viene scritto il codice vero e proprio.
[/p]
[p]
Quindi la struttura di una pagina standard è questa:
[/p]
[p]
[CODE]<html>
[/p]
[p]
<head>
[/p]
[p]
[b]<title>Ciao Mondo</title>[/b]
[/p]
[p]
</head>
[/p]
[p]
<body>
[/p]
[p]
Ciao Mondo
[/p]
[p]
</body>
[/p]
[p]
<html>
Modifica dello stile del testo
I tag più semplici sono quelli per modificare lo stile del testo, quindi andiamoli a vedere:
[/CODE] [b]GRASSETTO[/b]CORSIVO
[/p]
[p]
[CODE]<i></i>
SOTTOLINEATO
[sup][/sup]IN APICE
<sub></sub>IN PEDICE
<strike></strike>BARRATO
Colorazione e formattazione del testo
Il testo però alle volte necessita di essere colorato o altro quindi ecco il tag più generale per modificare UNA PARTE di testo.
Da cui saranno dovuti aggiungere dei tag all'interno dello stesso, quindi:
[b]<font color="blue" face="arial" size="3">Ciao Mondo</font>[/b]
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).
Inserimento di immagini e liste
Per modificare TUTTO il testo della pagina, bisogna andare ad inserire degli ulteriori tag all'interno del
, quindi
<html>
[/p]
[p]
<head></head>
[/p]
[p]
[b]<body face="arial" color="red" size="7" [b]bgcolor[/b]="orange">[/b]
[/p]
[p]
</body>
[/p]
[p]
</html>
Dove bgcolor è il colore di background. In alternativa, per inserire un'immagine di sfondo, si può usare questo:
<body background="nomeimmagine.jpg"
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:
[b]<img src="nomeimmagine.gif" width="300" height="200">[/b]
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
Triangolo amoroso HG:
[/p]
[p]
[b]<ol>[/b]
[/p]
[p]
<li>
[/p]
[p]
<font color="red">Katniss</font>
[/p]
[p]
</li>
[/p]
[p]
<li>
[/p]
[p]
<font color="orange">Peeta</font>
[/p]
[p]
</li>
[/p]
[p]
<li>
[/p]
[p]
<font color="yellow">Gale</font>
[/p]
[p]
</li>
[/p]
[p]
</ol>
Mentre sostituendo al tag
- , il tag
Per delimitare un paragrafo utilizzeremo il tag
.
Per andare a capo useremo il tag "br" che non ha tag di chiusura.
[b]<br>[/b]
Domande da interrogazione
- Qual è il primo passo per gestire un progetto HTML utilizzando il blocco note?
- Qual è la struttura di base di una pagina HTML?
- Come si possono modificare lo stile e il colore del testo in HTML?
- Quali tag si utilizzano per inserire immagini e liste in una pagina HTML?
- Come si delimita un paragrafo e si va a capo in HTML?
Il primo passo è creare una directory per il progetto e aprire una nuova nota nel blocco note dove scrivere il codice, salvando i file con estensioni .txt e .htm o .html per visualizzarli nel browser.
La struttura di base di una pagina HTML include il tag `<html>`, seguito da `<head>` e `<body>`, dove nel `<head>` si inseriscono i meta tag e nel `<body>` il contenuto visibile.
Per modificare lo stile del testo si possono utilizzare tag come `<b>` per il grassetto e `<i>` per il corsivo, mentre per colorare il testo si può usare il tag `<font>` con attributi come `color`, `face` e `size`.
Per inserire un'immagine si utilizza il tag `<img src="nomeimmagine.gif" width="300" height="200">`, mentre per creare una lista numerata si usa `<ol>` e per una lista a puntini `<ul>`.
Un paragrafo si delimita con il tag `<p>`, mentre per andare a capo si utilizza il tag `<br>`, che non ha un tag di chiusura.
Accedi a tutti gli appunti
Tutor AI: studia meglio e in meno tempo
