Close

HTML in pillole ovvero il codice per scrivere una pagina Internet, spiegato semplice

Html e Css sono davvero indispensabil?

I codici servono o i codici non servono?
È possibile creare e gestire un sito web non essendo programmatori? Anzi senza conoscere neppure le basi dei linguaggi più utili come HTML e CSS?
Mah a dirvi il vero secondo me sì, ci si può riuscire! Io ho creato vari siti e blog senza capirci nulla di programmazione e codici… fintantoché non ci si imbatte in un problema!

Allora corri a cercare spiegazioni,scoppiazzI di qua, provi di là, procedI a tentoni e alla fine con molta pazienza (e magari qualche piccolo aiuto di amici più esperti) riescI pure a risolvere tutto. Ma ad un certo punto, non so a voi ma a me subentra la curiosità, la voglia di capire e allora si tenta di imparare.

Perciò si comincia a studiare i famigerati linguaggi!

Sinceramente a me all’inizio sembrava tutto geroglifici, ma un paio di corsi e tanta pazienza dopo, qualcosa ci ho capito!

HTMLNo, no non sono diventata un’esperta programmatrice figurarsi, ma almeno sono riuscita a leggere un codice e a capire cosa nel mio sito non va.

Il linguaggio di programmazione continua a sembrarmi arabo, pure antico, ma almeno le basi adesso le ho e con ancora molta pazienza e studio prima o poi ne verrò fuori!

Quindi, se avete voglia vi lascio piccole pillole di Html e di Css, così come l’ho capito io! almeno per cercar di capire di cosa stiamo parlando. Non vuol essere un corso e non ha nessuna pretesa di insegnarvi sono solo i miei appunti. Poi se volete approfondire vi suggerisco di seguire dei buoni corsi e di leggervi le spiegazioni di w3School, che sono abbastanza semplici e vi permettono di non sentirvi un turco ad una predica.

 

Pillole di HTML

 

Indice
LINGUAGGIO HTML
SINTASSI
ELEMENTI
ATTRIBUTI
FORMATTAZIONE
COLLEGAMENTI

Il linguaggio HTML è stato creato alla fine degli anni ’80 da Tim Berners-Lee, in pratica l’html è testo affiancato da una struttura ipertestuale (ipertesto) che aggiunge altre funzionalità, nello specifico:

  • link tra i documenti
  • formattazione basilare del testo (grassetto, corsivo, tabelle, ecc.).
  • visualizzazione di foto, tabelle e immagini digitali nel testo

Grazie al linguaggio HTML, agli inizi degli anni ’90 nacque il Web.

Il linguaggio HTML serve a creare e descrivere la struttura di una pagina web e i suoi elementi.

HTML= Hypertext Markup Language

HTML= linguaggio di markup, per la creazione di pagine web.

Un documento HTML è un semplice file di testo, per crearne uno si può usare anche un editor di testo gratuito come Notepad o block notes su Windows.

Il linguaggio HTML serve a creare e descrivere la struttura di una pagina web e i suoi elementi.

MA COME FUNZIONA QUESTO LINGUAGGIO HTML?

Proviamo a capirlo assieme!

L’HTML non è un linguaggio di programmazione, ma soltanto un sistema di codifica dell’ipertesto all’interno di un documento.

I codici di formattazione dell’Html sono detti tag.

Tutti i tag Html sono compresi tra il simbolo minore < e maggiore > (quelle parentesi a punta che troviamo sulla tastiera e che non sappiamo mai come usare).

I tag sono caratterizzati da un tag di apertura e uno di chiusura, i tag di chiusura si distinguono da quelli di apertura perché hanno lo slash / prima del nome.

In genere tutti i tag presentano un tag di apertura e uno di chiusura, tranne alcuni casi come il tag Immagine che non necessita di una chiusura. Vedremo poi fra poco alcuni tipi di tag nello specifico.

HTML SINTASSI

Struttura di una pagina HTML

Dichiarazione

Ogni pagina HTML inizia con una dichiarazione.
Cioè una riga di codice (questa riga è sempre uguale) che spiega al browswer che il documento seguente è in HTML.

< !DOCTYPE html >

HTML documentoLa pagina Html, quindi inizia sempre con una < = simbolo di minore seguito da ! = pipe e la parola DOCTYPE html che identifica il tipo di documento.
Questa riga di codice, come tutte i comandi in HTML sarà chiusa con />

Tutti i comandi HTML saranno sempre racchiusi tra:

<> </>

 

 

Broswer = navigatore: un’applicazione per l’acquisizione, la presentazione e la navigazione di risorse sul web.

Radice della pagina

Alla dichiarazione fa seguito l’elemento radice della pagina, cioè una riga di codice che spiega al browser che tipo di pagina si troverà davanti.

A seguire avremo le informazioni sulla pagina racchiuse nell’HEAD.

In questa sessione troveremo raccolte tutte le informazioni generali del documento, il titolo, le spiegazioni al browser e le informazioni di formattazione grafica.

Molto importante in questa sezione è il TITLE, cioè il titolo della pagina.

Molto spesso la sezione head di una pagina diventa lunghissima perchè è lì che si racchiudono la maggior parte delle informazioni per la SEO e tutti i comandi di CSS che permettono di personalizzare il nosto documento.

Ma di questo parleremo più avanti.

HEAD

Nella sezione HEAD sono inserite tutte le meta informazioni aggiuntive sulla pagina: i metatag, le keyword e la descrizione del documento, il title sul browser, il foglio di stile css da utilizzare e le eventuali personalizzazioni di stile della pagina ecc.

HEAD = foglietto illustrativo per il browser con tutte le indicazioni sul nostro sito.

Terminata questa parte illustrativa e istruttiva per il browser inizia la parte che contiene i nostri contenuti, che è detta body.

BODY

La sezione BODY è molto importante  poiché racchiude tutti i contenuti ipertestuali ( testo, link, immagini, tag HTML, ecc. ) visualizzati sul browser.

BODY = contenitore di tutti gli elementi visibili della nostra pagina

In un documento HTML è la sezione delimitata dal tag di apertura <body> e dal tag di chiusura </body>.

Elementi principali del body

Ogni elemento viene definito da un TAG, cioè da un etichetta che lo identifica.

< tagnome > Nostro contenuto < /tagnome >

Tutti gli elementi,  vanno sempre scritti con un’apertura e una chiusura.

Se nella sezione HEAD sono riposte le informazioni utili per l’organizzazione del testo, nella sezione BODY è presente il testo, i tag  ipertestuali ed infine il contenuto vero e proprio.

HTML ELEMENTI

Vediamo adesso un riassunto dei principali elementi html detti anche Tag

Tag

Tag header

Sono i tag che identificano i titoli di un documento, sono fondamentali per vari motivi:

  • rendono il documento ipertestuale più ordinato e leggibile
  • suddividono il testo in paragrafi inserendo un’intestazione a ciascuno di essi
  • sono  fattore di ottimizzazione del documento per i motori di ricerca

Si dentificano con il simbolo h

h=titolo

I titoli possono essere di diversa categoria discendente:

h1; h2; h3….h6, a seconda dell’importanza che gli si vuole dare.

Alti elementi saranno:

p = paragrafo

br = spazio vuoto

img = immagine

audio = file audio

video = file video

button = tasto

ecc…

Ogni elemento viene definito quindi da un TAG.

TAG = etichetta

I tag html vengono poi letti dai browser e trasformati nella versione grafica che noi vediamo on line.

Il testo però scritto così risulterebbe anonimo, monotono, tutto uguale e nero, più o meno come quello dei vecchi giornali, se vogliamo renderlo un po’ più accattivante dobbiamo andarlo a formattare.

Una parentesi a se stante meriano gli elementi contenitore, con i quali si possono raggruppare vari elementi presenti in un documento,  eventualmente uniformandoli tutti per stile.Questi elementi possono essere di due tipi:

  • elemento blocco, come il div 
  • elementi on line come lo span

Ogni qualvolta si crea una modifica ad un elemento o a parte di esso autmaticamente questo viene convertito in un elemento online di tipo span. Possiamo dire quindi che un elemento span è una figura teorica.

Un esempio può essere un titolo

Esempio di codic econ span

Se invece vogliamo rendere omogenei una serie di elementi  creando una sezione in una pagina web e definirne l’intero layout oppure vogliamo raggruppare elementi cui assegnare una formattazione con il CSS dovremo creare un elemento di blocco di tipo div.

Questo elemento raggrupperà tutto quello che noi vogliamo inglobare rendendolo un blocco uniforme.

Un esempio può essere un indice dgli argomenti, che sarà formeto da un titolo e varie righe di testo, che possono essere anche anchor text che rimandano ad un’altra sezione o ad un’altra pagina.

Indice

Titolo 1

Titolo 2

Titolo 1

 

 

 

HTML ATTRIBUTI

Ogni elemento html o tag presente in un documento può venir personalizzato e per farlo si usano gli attributi, cioè dei parametri che permettono di modificare i valori di un elemento.

In genere gli attributi sono codici (nome dell’attributo) inseriti all’interno del tag html seguiti dal simbolo uguale (=) e da un valore tra virgolette che definisce il parametro.

Sintatticamente:  nome-attributo=”valore-attributo”

Gli attributi permettono di ottenere effetti diversi, ad esempio:

background-color consente di cambiare il colore dello sfondo

color assegna il colore del testo

text-align permette di allineare il testo

href assegna un indirizzo URL in un collegamento ipertestuale

Quando gli attributi da specificare sono più di due, è sufficiente separarli tra loro da uno spazio, ricordandosi sempre di porre il valore di ogni attributo tra virgolette.

Vediamo adesso come personalizzare il nostro documento html o parti di esso utilizzando l’html e i suoi attributi.

HTML FORMATTAZIONE

Una prima formattazione, si può avere anche all’interno del body stesso, utilizzando i comandi di formattazione di HTML, una formattazione più accattivante si avrà poi aggiungendo il codice CSS, che vedremo in seguito.

Gli elementi di formattazione servono a rendere il nostro contenuto più leggibile.

Sono infatti stati progettati per visualizzare tipi speciali di testo:

Esempi sono:

HTML FORMATTAZIONE

  • Testo in grassetto si indica con b
  • Parte importante si indica con strong
  •  Testo in corsivo si indica con i
  • Testo enfatizzato si indica con em
  • Testo contrassegnato si indica con mark
  • Testo più piccolo si indica con small
  • Testo eliminato si indica con del
  •  Testo inserito si indica con ins
  • Testo pedice si indica con sub
  • Testo in apice si indica con sup

In un testo html le formattazioni si possono anche sommare, cioè si puo voler colorare, sottolineare e mettere in grassetto una parola o una parte di un testo, in questo caso si parlerà di annidamento dei tag.

Può capitare che i tag annidati siano in contrasto tra loro. In questo caso, prevale sempre il tag più interno ossia quello più vicino al testo in quanto è l’ultimo ad essere interpretato dal browser.

Oltre a voler formattare una singola parola spesso si può aver necessità di personalizzare anche parte del testo, modificandone font, grandezza, ,allineamento, colore, aggiungendo background o bordi in quel caso è più opportuno ricorrere ad un “artefizio” creando un elemento fittizio.

Vediamo nello specifico come fare:

Allineamento del testo

Tutti i tag prevedono l’allineamento al centro, a sinistra o a destra tramite l’attributo align. I valori dell’attributo sono:

  • align-center
  • align-left
  • align-right
Modificare un Font

Possiamo anche modificare il tipo di carattere di una singola parola o di un paragrafo in questo caso, all’inizio del testo antepongo il tag FONT di apertura mentre alla fine FONT di chiusura con il valore FACE.

Ad esempio posso applico il font Verdana al testo del documento.

Colore del Font

Anche il colore del testo può essere modificato utilizzando il linguaggio html

<color font= “#codice colore”> testo </font>

In genere questo sistema non si usa più ma si preferisce utilizzare un codice CSS.

HTML COLLEGAMENTI

In una pagina html abbiamo visto prima si possono inserire anche collegamenti ipertestuali detti anche link, che ci permettono di passare rapidamente da una pagina all’altra del nostro sito, ma anche al di fuori nel web, oppure possono farci rapidamente andare da una parte all’altra di uno stesso documento, ad esempio back to the top o vai all’indice.

Link = collegamento ipertestuale tra due documenti.

I collegamenti HTML sono collegamenti ipertestuali.

È possibile fare clic su un collegamento e passare a un altro documento.

Quando si sposta il ​​mouse su un collegamento, la freccia del mouse si trasformerà in una piccola mano.

I link possono essere di vari tipi:

  • Link esterno = indirizzo URL di una risorsa situata in altro sito web
  • Link interno = indirizzo di una risorsa situata nello stesso sito web
  • Ancora  = collegamento a un elemento interno al documento stesso

Un collegamento non deve necessariamente essere di testo, può essere un’immagine o qualsiasi altro elemento HTML!

Sintassi dei collegamenti HTML

Creare un link esterno

Per creare un link ad una risorsa esterna al proprio sito si deve usare l’elemento <a seguito dall’attributo href

HTML LinkQuindi avremo

<a href = “URL destinazione” >Linking text</a>

Link text sarà la parte visibile dal lettore e sarà colorata a seconda:

collegamento non visitato blu

collegamento visitato viola

collegamento attivo rosso

Per aprire il collegamento in un’altra scheda si usa il comando target=” _blank”

target=”_blank”Link text

Il testo da cui parte il link è detto anchor text.

Nel caso del link esterno è importante indicare il protocollo Internet ( es. HTTP, HTTPS, FTP, ecc. ) della risorsa di destinazione.

Il protocollo Internet che generalmente troviamo per le pagine web è di due tipi:

  • protocollo http (Hyper Text Transfer Protocol)
  • protocollo https (Hyper Text Transfer Protocol Secure)

Per inserire come collegamento un indirizzo mail sostituire a Url – mailto:indirizzoemail

Per inserire come collegamento un’immgine sostituire a Url – <img>

Creare un link interno

I collegamenti interni in una pagina web sono dei link che spostano l’utente da un punto a un altro dello stesso documento. Sono dette ancore, etichette o segnalibri.

Sono particolarmente utili nella lettura dei documenti molto lunghi (es. content pillar ), perché evitano all’utente lo scorrimento del testo e consentono di giungere direttamente al contenuto richiesto.

Per creare un collegamento interno bisogna avere due elementi

  • punto di partenza = link dove l’utente clicca (collegamento ipertestuale testuale o immagine linkata)
  • punto di arrivo = ancora da inserire nel punto di destinazione cioè la zona della pagina dove il browser si deve spostare quando l’utente clicca sul collegamento interno, detta ancora o ancoraggio.

Quindi per creare un link interno avremo un link di partenza, che per l’utente sarà in tutto e per tutto uguale ad un normale link attivo cliccabile. Una volta cliccato su di esso l’utente verrà trasportato in un’altra parte della pagina.

Non c’è un limite massimo di etichette inseribili  in un documento HTML, quando si utilizzano diverse etichette è però necessario assegnare a ciascuna un nome diverso per far sì che il browser capisca inequivocabilmente dove partire e dove atterrare.

Come si fa tutto ciò?

Per prima cosa devo creare un punto di atterraggio e assegnargli un nome, utilizzando il tag <a seguito dall’attributo name.

<a name = “segnalibro” ></a>

Questo tag non sarà evidenziato sullo schermo e apparirà all’utente come un normale testo o immagine.

Nel punto di partenza devo invece inserire un collegamento ipertestuale ad altro punto della stessa pagina, utilizzando il tag <a con l’attributo href. Come indirizzo di destinazione del link  il nome dell’etichetta anticipato dal simbolo #

<a href=”segnalibro”>nosto testo d’arrivo></a>

Questo tag viene visualizzato sul browser dell’utente come un link attivo, dove l’utente può cliccare, simile ai link verso un’altra pagina.

Questo sistema è molto comodo per creare indici della pagina, rimandando ad esempio ai vari sottotitoli o per spostarsi in sezioni molto lontane nello stesso documento.

 

 

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *