Tag basilari per blogger

Tag basilari per blogger

Tag da conoscere per chi ha un blog

HTML

Per creare un blog o un sito internet,  non è necessario pagare un professionista perchè, se si ha tempo e non si ha bisogno di particolari funzionalità avanzate, basta avere una conoscenza basica di html

benchè non si può proprio avere un sito senza nemmeno conoscere l'ABC dell'HTML ossia del linguaggio di programmazione principale con cui vengono generati i siti internet.

L'HTML (HyperText Markup Language)  non è un linguaggio di programmazione vero e proprio, ossia un linguaggio per comunicare istruzioni ad un computer, ma un Markup Language ossia un modo di scrivere testo formattato per il web.

I browser come Firefox o Internet Explorer leggono questo codice HTML e mostrano quanto viene scritto in modo ordinato, con tutti gli oggetti disposti come ha voluto chi ha fatto il sito.

In altre parole, l'HTML descrive le pagine web e, sulla base di questa descrizione, il browser crea un'immagine.

Vediamo di seguito le regole base per capire come usare il proprio blog o sito:

1) La formattazione del testo nei siti internet viene oggi fatta usando il CSS, un altro linguaggio di markup che permette di descrivere l'impostazione grafica di una pagina web, in modo da richiamare poi gli stili nell'HTML.

Si possono comunque usare alcuni tag di formattazione di base quando serve:

HTML: <b>grassetto</b> (si può anche usare strong invece di b)

Come si vede sui browser: grassetto 

HTML: <i>corsivo</i> (si può anche usare en invece di i)

Come si vede: corsivo

HTML: <u>sottolineato</u> 

Come si vede: sottolineato

HTML: <s>barrato</s> (si può anche usare strike invece di s)

Come si vede: barrato

2) La creazione di link ipertestuali permette di descrivere URL o indirizzi di siti, senza dover specificare l'intero indirizzo, brutto da vedere, soprattutto se il link è molto lungo.

HTML: <a href="http://www.navigaweb.net" title="Navigaweb">Navigaweb.net</a>

Come si vede: Navigaweb.net

Questo tag HTML è un po 'più complicato: il tag reale per specificare i link ipertestuali è <a> mentre gli altri elementi aggiuntivi sono attributi che specificano ulteriori caratteristiche.

L'attributo href= specifica l'indirizzo mentre il title= definisce quello che compare passando il mouse sulla parola.

In HTML si usano le virgolette per racchiudere i valori degli attributi mentre in xHTML (usato anche dall'editor di Blogger) si usa l'apostrofo '.

3) Aggiungere immagini o foto è una delle cose più importanti da sapere, anche perchè spesso, nei siti che fanno da hosting di foto, viene fornito il codice HTML da usare nei blog o nei forum o in altri siti.

HTML: <img src="http://www.esempio.com/Smiley.jpg" alt="smiley" />

Come si vede:  smiley

In questo caso, il tag effettivo è <img> mentre gli attributi richiesti sono src= e, opzionalmente, alt= che descrive l'immagine a parole.

Anche in questo caso, utilizzare le virgolette per evitare collegamenti interrotti.

Come si può notare, il tag <img> si chiude con un /> senza ripetere la parola img.

Si può aggiungere l'attributo float="left" o float="right" per formattare un'immagine a destra o a sinistra, in modo sia avvolta dal testo.

Per fare un link ipertestuale di un'immagine si può usare come codice:

HTML: <a href="http://www.navigaweb.net"><img alt="smiley" src="http://www.esempio.com/Smiley.png" /></a>

4) Paragrafi e interruzioni di riga

Per creare un testo strutturato, e per andare a capo, è necessario utilizzare tag per creare interruzioni di riga e paragrafi.

In HTML, dopo una riga, si può scerivere <br /> per andare a capo.

Questo si apre e si chiude nello stesso tempo quindi non bisogna ripeterlo.

Per creare paragrafi, nel senso c'è una riga vuota prima e dopo, bisogna racchiudere il testo scritto tra i tag HTML <p> e </p> 

5) Le liste si possono fare in modo ordinato come elenchi numerati oppure non ordinato con elenchi puntati.

L'elenco numerato si fa così:

HTML 

<ol> 

<li>Articolo Uno</li> 

<li>Articolo Due</li> 

</ol>

Risultato:

Articolo Uno

Articolo Due

L'elenco puntato usa un tag diverso, invece di <ol> si usa <ul> :

<ul>

<li>Articolo uno</li>

<li>articolo due</li>

</ul>

Risultato: 

Articolo uno

Articolo due

In entrambi i casi, il tag <li> viene utilizzato per definire un elemento all'interno della lista.

Per concludere: Un tag non fa altro che indicare una posizione o una selezione del documento, specificando il tipo di magia che deve essere fatta.

Alcuni tag sono presenti in ogni pagina web e racchiudono le sezioni: <HTML> ... </HTML> indica inizio e fine della pagina, <HEAD> ... </HEAD> è la testa del documento, dove sono indicati tiolo, descrizione, CSS e script e <BODY> ... </BODY> che è invece il corpo della pagina.

Ancoraggio Html di immagine

Ancoraggio Html di immagine

Il web è una giungla misteriosa, tutto ciò che noi guardiamo o clicchiamo è composto da un sotto strato capillare di codici, tag, e altre cose con paroloni strani che vanno a formare la struttura del web stesso…. Si potrebbe un po’ paragonare all’ interruttore della luce, lo guardiamo, può avere forma o colori differenti, se schiacciamo un bottone si accende una luce, se ne clicchiamo un altro apriamo il cancello, ma questo avviene grazie a ciò che c’è dietro… un reticolo di cavi, trasformatori ecc…. in un certo senso lo stesso vale per il web 
Andiamo a vedere in modo pratico cosa c’è sotto per avere un’idea di come è fatta questa struttura cercherò di spiegare alcune cose basilari nel modo più semplice possibile per cercare di far capire anche ai neofiti:

Immagini:
Ne esistono in diversi formati, i più usati sono: ‘’ .gif .jpg e .png’’
L'elemento <img> è necessario per richiamare una immagine, ma da solo non serve a nulla, necessita di diversi attributi uno è obbligatorio ovvero: src. Questo tag non necessita del tag di chiusura ma di solito i tag hanno bisogno di un tag di apertura e un altro di chiusura. (Vedremo come negli esempi)
L'attributo src (source) è indispensabile per l'elemento img, senza questo non funzionerebbe nulla. Permette di specificare il nome dell'immagine completo della sua estensione (.png , jpg ecc) E' possibile specificare anche percorsi (path) fatti da cartelle (directory) e/o sottocartelle (subdirectory) compresi gli URL (indirizzi internet di un elemento) richiamanti l'immagine da altri siti.
Ma come facciamo a dare una url ad una immagine?
Occorre caricarla nel web, ci sono vari siti gratuiti per poter fare ciò https://imageshack.us è uno dei più noti ma ce ne sono molti altri, una volta caricata la nostra immagine nel sito ci verra fornito l’indirizzo della nostra immagine ecco questo indirizzo sarà la nostra url da mettere nel codice, nel mio caso ho caricato la foto di un fiore il suo indirizzo (URL) è il seguente: https://imageshack.com/a/img922/3872/09DNlh.jpg

Vediamo un esempio pratico da scrivere in una pagina web: 
<img src="nome_immagine.jpg"> 

Al posto di "nome immagine" dovremo mettere l’URL (indirizzo) della foto
<img src=" https://imageshack.com/a/img922/3872/09DNlh.jpg ">  

Ecco come risulterà nell’editor:

Ed ecco come risulterà nella vostra pagina:

Ci sono molti attributi che possiamo aggiungere a questo codice servono per allineare l’immagine a sinistra piuttosto che a destra, altri che ci permettono di aggiungere un bordo, altri ancora per cambiare la grandezza dell’immagine, ma di questo parlerò in futuro per  non complicarvi troppo le idee, spero che questo articolo sia abbastanza chiaro anche per chi si sta avvicinando per la prima volta  alla costruzione di una pagina web. 
Alla prossima!

HTML 

Cosa significa HTML??

Proviamo a dirlo in parole semplici:

HTML è un'abbreviazione di un termine inglese " Hyper Text Markup Language".

Che è un tipo di linguaggio di programmazione utilizzato per creare pagine e documenti su internet . Le pagine HTML sono dei file di testo composte da speciali marcatori (o tag) che posizionano testi ed immagini. Tutti i marcatori iniziano sempre con il simbolo " < " e finiscono con " > ".

Vediamo un esempio pratico che ho creato per voi:

Visibilmente si vede questo

Per crearla è stato scritto questo