1 – 2 html

Pubblicato il di

Una pagina web è semplicemente una pagina di testo, che ci viene restituita quando scriviamo un indirizzo nel browser (o se l’indirizzo viene restituito da un motore di ricerca) .
Gli elementi contenuti in un file html si chiamano tag.
Il tag è un descrittore che è compreso tra i segni maggiore e minore.

Solitamente c’è un tag di apertura e uno di chiusura, Il tag di chiusura ha davanti al nome del descrittore uno forward slash.

<html>tag apertura e chiusura </html>

Dopo il primo tag che introduce una pagina html, il secondo è l’intestazione <head> che contiene il titolo <title>.

Il corpo della pagina è il body <body>.

<!DOCTYPE html>
<html>
<head>
    <title>Title</title>
</head>
<body>

</body>
</html>

Nel body posso inserire il contenuto della pagina, per esempio potrei scrivere del testo anche senza tag e verrebbe visualizzato dal browser. Però è altamente sconsigliato perchè non potrei manipolarlo. Quindi se voglio inserire del testo semplice userò il semplice tag <p> che sta per paragrafo.

<p>ciao</p>

Usando il tag <p> rispetto a testo libero, avrò un piccolo spostamento del testo in basso, perchè il p ha un margine predefinito rispetto alla finestra. Questo margine può essere controllato usando regole di stile. Tali regole possono essere inline dentro il tag tramite l’attributo style oppure essere inserite e richiamate su un file esterno CSS.

<p style="margin-top: 0px">ciao</p>

In questo caso ho annullato il margine predefinito del tag p. Anche il body però ha un suo margine predefinito, se volessi annullarlo potrei fare la stessa cosa:

<body style="margin: 0px">
<p style="margin-top: 0px">ciao</p>
</body>

Posso applicare tutti gli stili che voglio ai miei tag, ma per semplicità di lettura e eventuale correzione o modifica è necessario utilizzare un foglio di stile esterno. Un altra caratteristica dell’ html  è che se inserisco più spazi tra una parola e l’altra, il browser riconosce solo il primo. Lo spazio vuoto aggiuntivo si scrive con &nbsp  (non breaking space). Per andare a capo uso <br /> , tag particolare perché viene chiuso con lo slash finale. Se voglio mettere alcune parole in bold uso il tag <b> , sottolineato <u> , corsivo <i> con le relative chiusura.

Un altro tag che permette di applicare delle regole diversificate ad una porzione di un paragrafo è il tag <span> che non manda a capo e non interrompe il flusso del tag p :

<p>ciao sono la <span style="color: red">pagina web</span></p>

Fino adesso il linguaggio è identico alle versioni precedenti. Una novità dell’html5 è l’attributo con contenteditable che impostato a true permette all’utente di modificare il tag direttamente dal browser.

<p contenteditable="true">ciao sono la pagina web</p>

Un nuovo tag inserito in html5 è <menuitem> che permette di aggiungere una voce al menu che si apre se  l’utente fa click col tasto destro.

<menu type="context" id="menu">
    <menuitem label="Condividi su : youtube" onclick="window.location='http://www.youtube.com';"></menuitem>
</menu>
<p contextmenu="menu" align="center">ìì PROVA ... PROVA ...</p>

Al momento in cui scrivo solo firefox supporta tale caratteristica.

Altro attributo è quello hidden che permette di nascondere un tag. Per esempio creo un bottone (attributo <button>) che tramite javascript mi assegna hidden ad un tag:

<p id=”paragrafo”>PROVA … PROVA …</p>
<button type=”button” onclick=”getElementById(‘paragrafo’).setAttribute(‘hidden’,”);”>
NASCONDI
</button>

al click si esegue il comando getElementById che prende tutti i tag html con id paragrafo e gli setta l’attributo hidden per nasconderli