Javasript
HTML
Chi ha inventato HTML ?
L’HTML, acronimo di HyperText Markup Language, è il linguaggio standard utilizzato per la creazione e la visualizzazione di pagine web. È stato sviluppato nel 1989 da un ricercatore britannico del CERN di nome Tim Berners-Lee, con l’obiettivo di creare un sistema per condividere e accedere a documenti scientifici in modo semplice e veloce tramite la rete.
La prima versione dell’HTML era molto semplice e conteneva solo un piccolo set di tag (ovvero i comandi che descrivono il contenuto della pagina web) che permettevano di creare documenti ipertestuali (ovvero documenti che contengono collegamenti a altri documenti).
Questi primi documenti ipertestuali hanno fornito la base per la creazione del World Wide Web.
1993, il primo browser web, chiamato Mosaic, è stato rilasciato, rendendo possibile la visualizzazione di pagine web su un’ampia gamma di computer.
1994, il W3C (World Wide Web Consortium) è stato fondato con l’obiettivo di stabilire standard per il web, tra cui l’HTML.
1995, è stata rilasciata la versione 2.0 dell’HTML, che ha introdotto nuovi tag e attributi per consentire una maggiore flessibilità nella creazione di pagine web.
997, è stata rilasciata la versione 3.2 dell’HTML, che ha aggiunto ulteriori funzionalità, tra cui il supporto per tabelle e frame.
La versione più significativa dell’HTML è stata l’HTML 4.0, rilasciata nel 1997. Questa versione ha introdotto molti nuovi tag e attributi, tra cui quelli per i form e i fogli di stile. Inoltre, ha reso possibile l’utilizzo di scripting lato client tramite JavaScript.
HTML5
HTML5
Nel 1998, il W3C ha iniziato a lavorare alla creazione di una nuova versione dell’HTML, che sarebbe diventata
l’HTML5. L’HTML5 è stato finalmente rilasciato nel 2014, dopo molti anni di sviluppo e discussioni tra i
membri del W3C e la comunità del web.
L’HTML5 ha introdotto molte nuove funzionalità, tra cui il supporto per l’audio e il video nativo, il drag
and drop, il canvas per la grafica, la localizzazione e l’accessibilità migliorate.
Ecco alcune delle sue principali caratteristiche:
- Supporto multimediale migliorato: HTML5 ha introdotto nuovi tag HTML, come <video> e
<audio>, che semplificano l’inclusione di contenuti multimediali nelle pagine web senza la
necessità di utilizzare plugin come Adobe Flash. - Supporto per la grafica: supporta la grafica vettoriale, che consente di creare grafiche scalabili e
adattabili a diversi dispositivi, grazie all’introduzione del tag <canvas>. - Supporto per la geolocalizzazione: ha introdotto la possibilità di ottenere informazioni sulla
posizione dell’utente utilizzando la funzionalità di geolocalizzazione del browser. - Supporto per l’archiviazione locale: H ha introdotto la possibilità di archiviare i dati localmente,
tramite il supporto ai web storage e ai database SQL. - Miglioramenti nella semantica: permette l’utilizzo di nuovi tag HTML che migliorano la semantica della
pagina web, come <header>, <footer>, <nav>, <article>, <section>, che
consentono di definire in modo più preciso la struttura della pagina web. - Supporto per dispositivi mobili: ha insite nuove funzionalità e tecnologie che facilitano lo sviluppo di
applicazioni web per dispositivi mobili, come la compatibilità con schermi touch e la gestione della
cache offline.
Oggi, l’HTML5 è lo standard utilizzato per la creazione di pagine web e viene costantemente aggiornato dal
W3C per migliorare le funzionalità e la compatibilità con i browser moderni
Come Funziona HTML?
- HTML (Hypertext Markup Language) è il linguaggio di markup utilizzato per creare le pagine web.
- Il protocollo HTTP (Hypertext Transfer Protocol) invece, è il protocollo di comunicazione utilizzato per
la trasmissione di informazioni tra client e server. - Quando un browser web richiede una pagina web, il server risponde con un documento HTML che il browser
interpreta e visualizza nella finestra del browser. Il documento HTML è costituito da un insieme di
elementi HTML che descrivono il contenuto della pagina web. - Ogni elemento HTML è definito da un tag HTML che specifica il tipo di elemento e un insieme di attributi
HTML che forniscono informazioni aggiuntive sul comportamento o l’aspetto dell’elemento. Ad esempio, il
tag HTML <img> viene utilizzato per inserire un’immagine nella pagina web, mentre l’attributo
“src” specifica l’URL dell’immagine. - Il contenuto della pagina web viene organizzato in una struttura ad albero chiamata Document Object
Model (DOM). Il browser interpreta il documento HTML, crea un albero DOM e lo utilizza per visualizzare
la pagina web. Quando il browser incontra un tag HTML, crea un nodo dell’albero DOM che rappresenta
l’elemento HTML e lo aggiunge all’albero DOM. - L’albero DOM rappresenta la struttura logica della pagina web e può essere modificato tramite
JavaScript. Ad esempio, i programmatori web possono utilizzare JavaScript per aggiungere, rimuovere o
modificare gli elementi della pagina web in modo dinamico, senza dover ricaricare l’intera pagina.
💻 Come visualizzare codice HTML in una pagina
Per mostrare un codice come testo semplice, usa il tag <code>. Ad esempio:
Questo è un esempio di codice HTML inline:
<div class="container">Hello World!</div>
📌 Esempio di codice multi-linea:
//***** HTML **********
<html>
<head>
<link rel="stylesheet" href="style.css">
<title>Esempio di codice</title>
</head>
<body>
<div class=container">
<h1>Hello World!</h1>
<p>Questo è un esempio di codice HTML mostrato come testo.</p>
</div>
</body>
</html>
//***** CSS ************//
/* codice inserito nel foglio di stile e poi richiamto in html:(vedi html sopra)
**link rel="stylesheet" href="style.css"*/
body{
background: #2d2d2d;
color: #fff;
padding: 15px;
border-radius: 8px;
overflow-x: auto;
margin:0 auto;
}
.container {
background-color: #f4f4f4;
padding: 3px 6px;
border-radius: 5px;
}
.container h1,p{
font-family: monospace;
color: #d63384;
}
/* condice inserito nell' HTML con tag */
/*
body{
background: #2d2d2d;
color: #fff;
padding: 15px;
border-radius: 8px;
overflow-x: auto;
margin:0 auto;
}
.container {
background-color: #f4f4f4;
padding: 3px 6px;
border-radius: 5px;
}
.container h1,p{
font-family: monospace;
color: #d63384;
}
💻 Come visualizzare codice JAVASCRIPT in una pagina come semplice testo
Per mostrare un codice come testo semplice, usa il tag <code>e il tag<pre>. Ad esempio:
Questo è un esempio di codice Javascript:
document.addEventListener('DOMContentLoaded', () => {;
Ecco un esempio di codice JavaScript:
<pre>
document.addEventListener('DOMContentLoaded', () => {
const form = document.querySelector('form');
const nome = document.querySelector('#fname');
const cognome = document.querySelector('#lname');
const button = document.querySelector('button');
const paragrafo = document.querySelector('p');
button.setAttribute('type', 'submit');
button.addEventListener('click', validate);
function validate(e) {
e.preventDefault();
modulo();
}
function modulo(e) {
let nameValue = nome.value.trim();
let surnameValue = cognome.value.trim();
const minMax = /^[a-zA-Z]{3,10}$/i; //regex validation
if (nome.value == '' || cognome.value == '' || nome.value >1 || cognome.value >1 ) {
nome.style.border = '2px solid red';
cognome.style.border = '2px solid red';
paragrafo.innerHTML = 'inserisci i dati';
e.preventDefault();
}
else if (!minMax.test(nameValue) || !minMax.test(surnameValue)) {
nome.style.border = '2px solid red';
cognome.style.border = '2px solid red';
paragrafo.innerHTML = 'inserisci almeno 3 caratteri pe campo';
}
else if (minMax.test(surnameValue) && minMax.test(nameValue)) {
nome.style.border = '';
cognome.style.border = '';
nome.style.border = '2px solid green';
cognome.style.border = '2px solid green';
paragrafo.innerHTML = 'inviato correttamente';
setInterval(() => {
paragrafo.innerHTML = '';
nome.style.border = '';
cognome.style.border = '';
nome.value = '';
cognome.value = '';
window.location.reload();
}, 1000)
}
}
});
</pre>
