Web e Code Script

TAG HTML | Principali tag di formattazione

hello-world

Abbiamo detto nel precedente articolo che all’interno di ogni pagina è presente una serie di marcatori, i cosiddetti TAG, a cui viene affidata la visualizzazione e che hanno differenti nomi a seconda della loro funzione. I tag vanno inseriti tra parentesi uncinate (<TAG>) e la chiusura del tag viene indicata con una “/”, ossia lo “slash” (</TAG>).
Il contenuto va ovviamente inserito all’interno del tag medesimo.

<b attributi>contenuto</b>

Gli attributi dei TAG sono svariati. La loro struttura è attributo=”valore”. Quindi la struttura del tag diviene la seguente.

<b attributo_1="valore1" attributo_2="valore2" attributo_3="valore3">contenuto</b>

Volendo fare un esempio pratico, giustifichiamo un paragrafo al centro.

<P align="center">testo</p>

Alcuni tag, come quello per inserire un’immagine (img) non hanno contenuto, e di conseguenza non hanno neanche la chiusura.

Maiuscolo o minuscolo?

L’HTML è “case unsensitive“, cioè indipendente dal formato maiuscolo o minuscolo.
Tempo fa era buona norma scrivere il nome del tag in maiuscolo e gli attributi in minuscono, oggi invece è consigliabile scrivere tutto in minuscolo.

Principali tag di impostazione per un documento html

<html> <!-- racchiude tutti i tag in un documento HTML e lo definisce come un documento HTML -->
<head> <!-- racchiude i tag titolo e contiene titoli del documento ed informazioni di progettazione per il documento -->
<title> <!-- racchiude il titolo per il documento -->
</title> <!-- chiude il title -->
</head> <!-- chiude l'head -->
<body> <!-- racchiude tutti i tag che formano un documento -->
</body> <!-- chiude il body -->
</html> <!-- chiude l'html -->

 

Principali tag di formattazione del documento

<H1> </H1> è un tag di testata che crea il testo di dimensioni più grande. Il numero di tag di testata può variare da 1 a 6. Incrementando il numero rende più piccolo il testo

<P> </P> crea paragrafi
<BR> </BR> crea una interruzione di linea

<B> </B> rende il testo in grassetto

<STRONG> </STRONG> rende il testo in grassetto

<I> </I> rende il testo in corsivo

<U> </U> sottolinea il testo

<CENTER> </CENTER> centra il testo

<FONTCOLOR=”nome del colore”> </FONT> assegna al testo un colore

 

Collegamenti

<A HREF=”indirizzo da linkare”> </A> inserisce un collegamento

 

Tabelle

<TABLE> </TABLE> crea tabelle. Questo paio di tag racchiude tutti gli elenchi di tag per ognuno degli elementi nell’elenco

<TR> </TR> crea la riga di una tabella. Questo paio di tag racchiude tutti i tag di celle nella tabella

<TD> </TD> crea celle in una tabella

 

Elenchi ordinati

<OL> </OL> crea un elenco ordinato. Questo paio di tag racchiude tutti i tag di celle nell’elenco

<LI> </LI> racchiude l’elenco degli elementi

 

Elenchi

<UL> </UL> crea un elenco non ordinato. Questo paio di tag racchiude tutti i tag di celle nell’elenco

<LI> </LI> racchiude l’elenco degli elementi

 

Commenti

Una strategia importante, per rendere il nostro codice più leggibile è quella di inserire dei “commenti” nei punti più significativi: si tratta di indicazioni significative per i webmaster, ma invisibili al browser.
Inserire i commenti in punti specifici del documento ci permette di mantenere l’orientamento anche in file molto complessi e lunghi.
[HTML][/HTML]




emoticons

avatar
Autore: Valerio Del Re

Dott. in Comunicazione e Pubblicità per le Organizzazioni,
Grafico e Web Designer freelance, CEO presso Robadagrafici


Cosa ne pensi? Esprimi la tua opinione.
Scrivi un commento.

Loading Facebook Comments ...

Ti potrebbero interessare anche:


font-awesome

Icon Font Awesome. Come inserire sul sito icone tramite font

Le icone sono ormai uno standard per chi realizza siti internet. Permettono infatti un’ottima personalizzazione per lo stile […]


testare-sito-mobile-online

Testare sito mobile online. Effettua il test con Google

Se sei un webdesigner sicuramente nell’ultimo periodo ti starai dedicando allo studio della tecnica del responsive design. Un […]


orologio-esadecimale

What colour is it? L’orologio esadecimale

Oggi vi segnalo un sito creativo, da veri nerd, per appassionati di grafica e web. Si tratta del […]


sfumature-css3

Come creare una sfumatura con CSS3

CSS3 ha tantissime potenzialità che ogni web designer dovrebbe conoscere per evitare di fare un uso spropositato di […]


css3-box-shadow

Ombra CSS3. Come aggiungerla a testo, div e immagini

CSS3 è una rivoluzione. Ci permette di aggiungere tanti effetti grafici agli oggetti presenti nelle nostre pagine web, […]


css3-border-radius

Come smussare angoli di immagini e div con CSS3 Border Radius

Con Html5 e CSS3 il mondo del web ha fatto un notevole passo avanti, offrendo un’esperienza più ricca […]


mappa-vettoriale-jquery

Mappa del mondo con ingrandimento in jQuery

Creare una mappa navigabile per il sito internet è diventata ormai pratica comune, specialmente quando si tratta di […]


atlas

Arriva Atlas, la concorrenza di Facebook a Google

È ufficiale: Google ha un concorrente. Si chiama Atlas ed è di proprietà di Facebook. Quest’ultimo aveva acquistato […]


jquery-document-ready-function

La base della sintassi di jQuery: $(document) .ready()

Se vi state avvicinando da poco a jQuery e state iniziando a studiarlo, avrete notato che spesso il […]


php-if-else

PHP: gestire le condizioni con le istruzioni if e else

Se state realizzando un sito nel linguaggio di programmazione Php, magari con il CMS WordPress, imparare a gestire […]


Shares

Robadagrafici.com non è una testata giornalistica in quanto viene aggiornato senza alcuna periodicità. Non può pertanto considerarsi prodotto editoriale ai sensi della legge 62/2001. Le immagini e i testi pubblicati sono valutati come di pubblico dominio: qualora il loro uso violasse diritti d'autore, lo si comunichi all'autore del blog che provvederà alla loro pronta rimozione.
Tutti i contenuti sotto Licenza Creative Commons. Marchi e loghi di soggetti terzi utilizzati in questo sito sono di proprietà esclusiva dei rispettivi proprietari.
Roba da Grafici © 2011-2016 - Progetto a cura di ServiziWeb Srl - Privacy & Cookies Policy