Il linguaggio HTML

RedWitch · 06-02-2006, 19.31.25

L'HTML, non è altro che un linguaggio attraverso il quale il pc "legge" le pagine web, che noi poi vediamo "tradotte", grazie al browser che utilizziamo (IE, Mozilla Firefox,Opera etc).
Oggi, ci sono numerosi editor (ad esempio dreamwever o frontpage) che permettono la costruzione di pagine web , praticamente senza conoscere il linguaggio HTML, ma la conoscenza, almeno delle basi, di questo linguaggio è indispensabile conoscerle.

Il codice HTML è composto da elementi racchiusi da "<>" , che vengono chiamati TAG, vedremo di seguito i principali TAG indispensabili per la costruzione di una pagina web.

Per poter inserire i tag, e dare vita così al nostro codice html , non dobbiamo far altro che utilizzare il blocco note di Windows, avendo l'accortezza, di salvare il nostro file contente il codice, con l'estensione
. html (o .htm).

Ricordiamoci che , per ogni tag aperto <tag> , ne corrisponde uno chiuso </tag> che dobbiamo ricordarci di inserire ogni volta, dopo aver inserito il contenuto che ci interessa.

I tag di base (indispensabili per la costruzione della pagina) sono:

<html> .........................</html> è il tag che definisce la pagina web.
<head> ....................... </head> è il tag che definisce l'intestazione della pagina web (es: il titolo della pagina ed eventuali sottotitoli)
<title> ........................</title> è il tag che ci permette di visualizzare il nome che vogliamo dare alla nostra pagina web.
<body>.........................</body> è il tag che ci permette di inserire il contenuto nella nostra pagina web (testo, a cui potremo aggiungere immagini, collegamenti ipertestuali etc)

continua

RedWitch · 25-02-2006, 21.28.31

Per riuscire a comprendere meglio quanto sopra, proviamo adesso a tradurre nella pratica, la creazione della nostra prima pagina web.

Apriamo un foglio del block notes (notepad) di Windows (o di altro editor testuale di cui siamo in possesso).

Per creare la nostra pagina web, essenziale è il tag :

<html> che inseriremo come prima cosa, e, andremo a chiudere la nostra pagina web con il tag </html>

All’interno di questi due tag, possiamo inserire tutti gli elementi della pagina web che desideriamo.

Iniziamo con il nome che vogliamo dare alla pagina web che visualizzeremo nella barra blu in alto della finestra del nostro browser.
Il tag è <title>….. </title>
Chiamerò questa pagina “Esempio”

Avrò quindi:

<html>
<title>Esempio</title>
</html>

Adesso il titolo (ed eventuali sottotitoli) che voglio dare alla pagina. Il tag è <head> …..</head>
Come titolo inserisco ad esempio “Prova pagina web”
Avrò:

<html>
<title>Esempio</title>
<head>Prova pagina web</head>
</html>

A questo punto, andiamo ad inserire il contenuto della nostra pagina web.

il tag è <body> …..</body>
Come contenuto, inserisco : “questa è una pagina di prova html. ”
Per separare il titolo della pagina, dal corpo del documento, inserisco il tag , tante volte, quanto voglio distanziare una riga dall’altra. (ne ho inseriti due nell’esempio)

Ecco il codice che a questo punto avrò:

<html>
<title>Esempio</title>
 
<head>Prova pagina web</head>
<body> Questa è una pagina di prova html</body>
</html>

Salviamo ora, sul nostro pc la pagina web, per vedere il risultato.

Dal nostro block notes, scegliamo “salva con nome” ---- > nomepagina.html (io l’ho chiamata prova.html)
Non dimentichiamo di inserire l’estensione .html (o .htm) altrimenti salveremo soltanto un documento di testo.

Naturalmente, questa è la pagina più semplice che si possa creare, vedremo , come formattare il testo, dare dimensioni diverse ad esempio al testo, o parti di testo, inserire immagini, tabelle, inserire un colore del testo, e dello sfondo etc.

Continua.

RedWitch · 17-03-2006, 11.31.29

Proseguiamo la costruzione della nostra pagina web, con aggiungendo alcuni elementi.

Abbiamo dato forma alla pagina web più semplice che si possa creare, con un titolo, e un contenuto :

<html>
<title>Esempio</title>
 
<head>Prova pagina web</head>
<body> Questa è una pagina di prova html</body>
</html>

Con questi tag, avremo una pagina bianca, con testo in automatico (nero).

Il tag che definisce lo sfondo dell'intera pagina è <body bgcolor="..........."> .Il colore possiamo sceglierlo noi, inserendo il codice esadecimale del colore che ci interessa.

(per avere i codici dei diversi colori, esistono nel web numerosi siti che offrono l'apposita tabella ad esempio: qui )

Inserisco come colore l'azzurro:

<body bgcolor="#00CCFF">

Avrò quindi:

Andiamo a vedere come possiamo modificare il colore di sfondo della pagina.

<html>
<title>Esempio</title>
 
<head>Prova pagina web</head>
<body bgcolor="#00CCFF"> Questa è una pagina di prova html</body>
</html>

Adesso avremo una pagina con sfondo azzurro, e testo, "automatico" (nero).

Andiamo a modidicare il colore del testo, del nostro documento.

Il Tag è:

<body text="........."> (anche qui, sceglierò il colore che più mi aggrada, con la tabella dei colori di cui sopra)

Scelgo il blu:

<body text="000FF">

A questo punto il mio codice html sarà questo:

<html>
<title>Esempio</title>
 
<head>Prova pagina web</head>
<body bgcolor="#00CCFF" text="#000FF"> Questa è una pagina di prova html</body>
</html>
-----------------------------------------------------------------------------
continua

RedWitch · 23-03-2006, 17.36.47

Citazione:

<html>
<title>Esempio</title>
 
<head>Prova pagina web</head>
<body bgcolor="#00CCFF" text="#000FF"> Questa è una pagina di prova html</body>
</html>

Possiamo a questo punto, decidere come formattare il testo della nostra pagina, ricordando che con il codice html, dobbiamo "dire" tutto, affinchè la nostra pagina possa essere visualizzata nella maniera corretta.

Possiamo dividere la nostra pagina html in paragrafi, semplicemente inserendo il tag: ............... e allineare il testo del paragrafo a nostro piacimento :

 testo testo testo 

L'allineamento del , puo' essere al centro (center), sinistra (left), destra (right)

 testo testo testo (paragrafo centrato)
 testo testo testo (paragrafo a sinistra della pagina)
 testo testo testo (paragrafo a destra della pagina)
 testo testo testo (paragrafo giustificato)

Inoltre, possiamo decidere di modificare il testo,( sottolineandolo, inserendo parole in grassetto etc), con altri semplici tag (se fate caso, sono gli stessi che troviamo in tutti gli editor, ad esempio word)

 testo testo = il testo racchiuso nel tag risulterà in grassetto
 testo testo = Il testo racchiuso nel tag risulterà in corsivo
 testo testo = il testo racchiuso nel tag verrà sottolineato.

Alla prossima, i tag per le dimensioni del testo

RedWitch · 04-04-2006, 18.50.32

A questo punto, possiamo decidere, che tipo di font utilizzare per la nostra pagina html, facendo attenzione a non inserire font troppo particolari, per due motivi: il testo, deve essere il più facilmente possibile leggibile, inoltre, se scegliamo un font troppo particolare, rischiamo che chi verrà a vedere la nostra pagina html, non abbia il font in questione, e così, il browser, “sceglierà” di default il font “arial”.
I font, più comuni e leggibili sono arial, arial black, verdana, al limite un comic sans serif..

Il tag che definisce il font è :

 testo testo testo 

esempi: --à testo in arial
 --à testo in verdana

e così via.

Possiamo decidere anche quanto grande fare apparire il nostro testo:

in questo caso avremo il tag del font con l’attributo “size”, che potrà variare a 1 a 7 (in ordine crescente):

Esempio:

testo testo testo 

avremo un testo molto piccolo, di solito si usa una grandezza media, 2/3 .

-------------------------------------------------------------------
continua

Iside@ · 05-04-2006, 15.01.37

mi salvo tutto RedW ...anche se nn sono pratica questo puo servire!

RedWitch · 05-04-2006, 15.08.09

Ciao Isi

Il codice html, ormai è usato ben poco (almeno integralmente) per creare pagine web, perchè esistono degli editor in grado di crearle, con il minimo sforzo.. pero'.. vuoi mettere la soddisfazione di crearsi da sè una pagina web, o quantomeno di sapere dove mettere le mani, volendo aggiungere/togliere qualcosa direttamente dal codice?

Dicevo giusto ieri ad un'amica, che è semplice.. si puo' tranquillamente imparare da soli, con un po' di pazienza..
ciauuu

Iside@ · 05-04-2006, 16.43.40

Eh si ci vuole un po di pazienza tata

ellebi111 · 06-04-2006, 10.56.47

Gli editor sono molto comodi ma ogni tanto sporcano il file aggiungendo cose inutili. In più avolte impazziscono e non riescono a togliere gli errori che loro stessi hanno generato. Conoscere l'html ti permette quindi di seguire il flusso e di trovare l'errore logico o sintattico e di correggerlo.
In più conoscere il funzionamento del 'sistema html' in sè ti aiuta a volte a prendere decisioni che portano da una pagina elefantiaca ad una snella chiara ed efficiente.

RedWitch · 28-05-2006, 22.00.39

Vero Ellebi, mi vengono in mente quei fastidiosi "&nbsp" che inserisce Frontpage dentro al codice, che poi corrispondono a degli spazi non richiesti se non sbaglio...
---------------------

Riprendendo sulla costruzione delle pagine in html, può tornare utile inserire delle tabelle, all'interno delle quali, potremo organizzare testi o inserire immagini ad esempio.
La tabella è costituita da un insieme di righe e colonne, che formeranno delle celle, in cui andremo ad inserire i nostri contenuti.

Il tag che ci permette di creare la tabella è:

<table> ............. </table>

Se desideriamo che la tabella sia visibile graficamente, dovremo aggiungere a questo tag un attributo: border="dimensione bordo" (che potrà essere 1,2,3 etc)
A questo punto, il tag diventerà:

<table border"1">...................... </table>

All'interno del tag che definisce la tabella, andremo ad inserire quante righe ci occorreranno con il tag:

<tr> ................ </tr>

In questo modo, si ottengono tante righe quante ne occorrono, ma se desideriamo inserire più colonne in ogni riga (celle) dovremo andare ad inserire il tag:

<td> ............... </td>

-------------------------------
continua