Il Linguaggio HTML

I

NOVITA’ 2019!

Parliamoci chiaro: non puoi pensare di diventare un ETHICAL HACKER senza conoscere almeno un LINGUAGGIO DI PROGRAMMAZIONE!

Accedi adesso al corso “PYTHON PER HACKER – 2019”

Oltre 10 ORE di VIDEO LEZIONI e oltre 100 CODICI PRONTI DA ESEGUIRE!




Prima pagina in HTML

Realizziamo insieme la nostra prima pagina HTML.

Per prima cosa creiamo un file di testo vuoto e salviamolo in una cartella, editiamo il file e scriviamo un testo al suo interno e modifichiamo l’estensione in .html.

Apriamo adesso la pagina HTML creata:

E come si osserva, qualunque browser sarà adesso in grado di interpretare correttamente questa pagina HTML.

La struttura di una pagina HTML

Ci affideremo adesso ad un “simulatore” online di codice HTML così da velocizzare tutti i nostri test.

Analizziamo subito la struttura base di una pagina HTML:

Abbiamo il tag di apertura e chiusura della pagina: < html > e < /html >. Il tag di apertura e chiusura dell’HEAD: < head > e < /head >.

Il tag di apertura e chiusura del BODY dove è presente il contenuto vero e proprio della pagina HTML: < body >< /body >.

Per cui i tag principali, che definiscono la struttura di una pagina HTML, sono:

  • < HTML >
  • < HEAD >
  • < BODY >

Poi ci sono altri TAG come il titolo (< title >) o la definizione dei paragrafi (< p >) che analizzeremo meglio in seguito, in linea di massima, definiscono la formattazione del nostro codice HTML.

Eseguendo la pagina, questo il risultato:

E’ possibile esaminare il codice HTML di una pagina web; ad esempio, con il borwser Chrome, possiamo accedervi con la combinazione di tasti CTRL+U:

Editor di testo e codice

Un editor di testo ci permette di velocizzare e ottimizzare la modifica di varie tipologie di codice, tra cui quello HTML.

Il primo strumento che vi consiglio è SUBLIME TEXT.

Come osserviamo permette un’ottima ed efficiente gestione delle pagine HTML:

Poi abbiamo l’altro tool suggerito che è NOTEPAD ++ (da non confondere con il semplice NOTEPAD già presente sul sistema operativo Windows).

Quest’ultimo ha tutta una serie di ottimi tool per la gestione del testo:

TAG significativi nel linguaggio HTML

Alcuni TAG utili nel linguaggio HTML sono:

  • PARAGRAFO -> < p >< /p >
  • BREAK LINE -> < br >< /br >
  • TITOLO H1,H2,H3 -> < h1 >< /h1 >, < h2 >< /h2 >, < h3 >< /h3 >

Cerchiamo adesso di comprenderne meglio il funzionamento utilizzando il simulatore online HTML.

PARAGRAFO:

Codice eseguito:

BREAK LINE:

Codice eseguito:

TITOLO:

Codice eseguito:

Questi TAG hanno la loro utilità anche nell’ottimizzazione di una pagina web dal punto di vista della SEO (Search Engine Optimization), tuttavia non ci soffermeremo su questi aspetti.

Elenchi nel linguaggi HTML

Gli elenchi nel linguaggio HTML si dividono in due categorie:

  • Elenchi ORDINATI
  • Elenchi NON ORDINATI

Gli elenchi non ordinati sono i più diffusi. Per definire un elenco si utilizza il tag < li >.

vediamo un esempio:

E questo il risultato eseguendo il codice evidenziato sopra:

L’elenco ordinato invece si esprime utilizzando il tag < ul >:

E questo il risultato eseguendo il codice evidenziato sopra:

Link nel linguaggio HTML

I LINK sono una delle grandi potenzialità del linguaggio HTML, permettono di rendere più “dinamico” un certo testo fornendoci la possibilità di “spostarci” da un testo all’altro.

I link si compongono di 2 elementi:

  • CONTENUTO -> è la parte visibile del link.
  • RISORSA -> è una pagina differente che può risiedere sul server locale oppure essere esterna.

Per definire un link si utilizza il tag < a href=”nome_risorsa” > contenuto_visibile < /a >.

La parte evidenziata sopra in giallo è il CONTENUTO del link.

La parte evidenziata sopra in giallo è la RISORSA del link.

Eseguendo il codice questo il risultato:

Qui abbiamo la possibilità di cliccare sul link “Google” e di essere quindi “dirottati” sul sito www.google.it.

I FORM nel linguaggio HTML

I FORM ci permettono di interagire maggiormente all’interno di un certo sito web o meglio, ci offrono la possibilità di raccogliere i dati inseriti dagli utenti.

Necessaria una precisazione: il linguagio HTML ci permette di implementare quello che potremmo definire FRONT-END della web application, poi l’effettiva elaborazione dei dati viene effettuata in BACK-END da un linguaggio lato server (PHP, ad esempio).

I form si implementano utilizzando i seguenti tag: < form >, < fieldset >, < legend > strutturandoli come segue:

Questo il risultato dell’esecuzione del codice sopra:

Una delle possibilità di utilizzo dei FORM è tramite l’utilizzo di INPUT. Esistono diverse tipologie di INPUT tra cui:

INPUT TYPE TEXT:

Eseguendo il codice questo il risultato:

INPUT TYPE BUTTON:

Eseguendo il codice questo il risultato:

Creazione interfacce utente

Esaminiamo adesso alcuni componenti che ci permettono la creazione di base di interfacce utente.

CHECKBOX:

La checkbox permette all’utente di effettuare delle scelte multiple:

Eseguiamo adesso il codice:

Notare che siamo sempre all’interno di un form; possiamo selezionare più di un’opzione:

RADIO BUTTON:

I radio button a differenza delle checkbox permettono di effettuare una scelta esclusiva:

Attenzione ad inserire lo stesso nome (nell’esempio “piatto”) e un differente valore. Eseguiamo adesso il codice:

Come si osserva dobbiamo operare una scelta esclusiva tra PASTA,PESCE e TORTA.

Aggiungi un commento

Articoli recenti

Categorie