HyperText Markup Language- Linguaggio di contrassegno per gli Ipertesti

E' il principale linguaggio di pubblicazione di pagine Web e viene sempre più utilizzato per realizzare contenuti e applicazioni mobili. Esso non è un linguaggio di programmazione ma serve per indicare e disporre i vari elementi in una pagina web, cioè la grafica dei siti web. HTML fu realizzato nel 1991 da Tim Berners Lee e si evolse fino a maturare nello standard HTML 5, quello attualmente usato.

HTML5 è formato da:

Una sintassi per il markup semplice e intuitiva, con l’introduzione di specifici controlli per i form o degli attributi “data-” per arricchire i tag di informazioni specifiche. I comandi (racchiusi sempre tra i simboli "<" e ">" chiamati "tag") associano al testo un particolare attributo. I tag possono essere scritti sia in maiuscolo che in minuscolo.
Una serie di API che consentono di gestire network, multimedia (video), e l'hardware (batterie...) dei dispositivi.

HTML
Serve a definire i collegamenti tra le pagine e l’importanza che hanno i testi, creare input per gli utenti, caricare immagini, video...

CSS
Un regolamento che permette di definire l’aspetto grafico degli elementi sulla pagina, cioè si può modificare ogni caratteristica visiva della pagina, come le dimensioni, colori, animazioni. Ma anche leggere il testo per non vedenti.

JavaScript
E' un linguaggio di programmazione (pensato e realizzato in una decina di giorni, quindi con molti errori e sfruttati a proprio vantaggio) utile per modificare qualunque cosa nella pagina HTML: lo stile, i contenuti della pagina, l’interazione con l’utente. Ci permette di creare la logica dell’interfaccia utente o di una applicazione e di sfruttare le API messe a disposizione dal browser, come la gestione del mouse, la modifica delle immagini, ma anche la richieste di dati e la loro gestione.

Per inserire nell'Html il CSS si deve inserire nel head il codice compreso tra <style> … </style>

Per inserire JavaScript bisogna inserirlo nel body e compreso tra <script> ... </script>

TIPI DI TESTO

<!DOCTYPE html>

<title>Ingegneria </title>

</head>

<h1>Titolo</h1>

<h4>Sottotitolo</h4>

<p align="left"> Paragrafo allineato a sinistra

<p align="center">Paragrafo centrato

<p align="right">Paragrafo allineato a destra

</p>

<h1>Caratteri</h1>

<p>Paragrafo di testo 2 <br>

<em> Corsivo </em> <br>

<strong> Grassetto</strong> <br>

<cite> Citazione </cite> <br>

<samp> Esempio </samp> <br>

<code> Codice </code> <br>

<u> Sottolineato </u> <br>

<sub> Pedice testo </sub> <br>

<sup> Apice testo </sup> <br>

</p>

<!--Inserisci uno spazio vuoto usando il codice HTML

Inserisci due spazi vuoti usando il codice HTML &ensp;

Inserisci quattro spazi vuoti usando il codice HTML &emsp;-->

<allert>  Errore </allert>

</div>

</body>

</html>

Titolo

Sottotitolo

Paragrafo allineato a sinistra

Paragrafo centrato

Paragrafo allineato a destra

Caratteri

Paragrafo di testo 2

Corsivo

Grassetto

Citazione

Esempio

Codice

Sottolineato

Pedice testo

Apice testo

Errore

IMMAGINI E INPUT

<!DOCTYPE html>

<body>

<div>

<h1>IMMAGINI</h1>

</div>

<div>

<h1>INPUT</h1>

<button> click here </button> <br><br>

</div>

</body>

</html>

LISTE E TABELLE

<!DOCTYPE html>

<body>

<div>

<h1>LISTE</h1>

<li> Prima parte </li>

<li> Capitolo 1 </li>

<li> Primo paragrafo </li>

<li> Secondo paragrafo </li>

</ol>

<li> Capitolo 2 </li>

<li> Primo paragrafo </li>

<li> Secondo paragrafo </li>

</ol>

</ul>

<li> Seconda parte </li>

</ol>

</div><br>

<div>

<h1>TABELLA</h1>

<p> Per definire una tabella “minimale”, che sia comunque interpretata correttamente dai browser si può riprodurre un esempio simile al seguente:

</p>

<table>

<tr><td>Colonna 1</td><td>Colonna 2</td></tr>

</table>

</div>

</body>

</html>

DIVISORI

TABELLE

LOCALIZZATORE

Clicca qui per provare

Nota: il sito non prende traccia di alcun dato relativo alla posizione. Il codice è utile per trovare immediatamente le proprie coordinate geografiche

<body>

</body>

if (navigator.geolocation) {

navigator.geolocation.getCurrentPosition(function(position) {

var lat = position.coords.latitude;

var lon = position.coords.longitude;

let message = `La tua posizione geografica è: latitudine: ${lat} e longitudine: ${lon}`;

let locationDiv = document.getElementById("location");

locationDiv.textContent = message;

locationDiv.style.color = "red";

window.location.href = `https://www.google.com/maps/search/?api=1&query=${lat},${lon}`;

});

} else {

console.log("Geolocation is not supported by this browser.");

}

</script>

WEBCAM E MICROFONO

Clicca qui per provare

Nota: il sito non prende traccia di alcun dato video. Il codice è solo un test.

// Richiedi l'accesso alla webcam

navigator.mediaDevices.getUserMedia({ video: true, audio: true })

.then(stream => {

// Ottieni il riferimento all'elemento video

const video = document.getElementById('webcam');

// Assegna il flusso della webcam all'elemento video

video.srcObject = stream;

// Inizia la riproduzione dell'elemento video

video.play();

})

.catch(err => {

console.error('Accesso alla webcam negato', err);

});

</script>

CSS: Dimensioni, colore e forma dei caratteri

<font size=1> Dimensione 1</font> <br>

<font size=6> Dimensione 6</font>

Dimensione 1

Dimensione 6

<!DOCTYPE html>

<div class="mydiv"><span class="w3-text-green" style="color: #00ff00;">Sono verde!</span></div> <br>

<div class="mydiv"><span class="w3-text-red" style="color: #ff0000;">Sono rosso!</span></div> <br>

</html>

<!DOCTYPE html>

<h1 style="color: green;background-color: blue;height:100px;width:300px ">COLOR</h1> <br>

<p>

<h2 style="color: grey;background-color: Yellow;width:100px ">COLOR</h2> <br>

</p>

<h3 style="color: red;background-color: black;width:400px ">COLOR</h3></p>

<circle cx="50" cy="50" r="40"

stroke="green" stroke=width="8"

full="black"

</html>

Sono verde!

Sono rosso!

Sono blu!

COLOR

BLOCCARE COPIA TESTO

<!DOCTYPE html>

<head>

</head>

<body>

<div>

</sourcecode>

<sourcecode language=”html”]&lt;body oncontextmenu=&quot;return false;&quot;&gt;

</sourcecode>

<sourcecode language=”html”]&lt;body oncontextmenu=&quot;alert(‘Contenuto Copiato’);return false;&quot;&gt;

</sourcecode>

<oncontextmenu="return false">

</div>

</body>

</html>

COLORI

Ogni codice HTML, come detto precedentemente, è formato da sei caratteri che possono sembrare casuali preceduti dal simbolo "#". Ebbene, questi caratteri, che possono essere sia lettere che numeri, non sono altro che numeri veri e propri del sistema numero esadecimale.

Significato dei simboli: Le combinazioni da sei caratteri dei codici dei colori HTML sono inoltre formate da tre coppie alfanumeriche. Ogni coppia di caratteri alfanumerici rappresenta l'intensità di uno dei colori base dell'universo, che sono il rosso, il verde e il blu. L'intensità dei colori sono rappresentati a partire dalla coppia di caratteri "00", che è l'intensità di colore minima, per finire con la coppia di caratteri "FF", che è l'intensità massima. La prima coppia di caratteri alfanumerici formanti il codice dei colori HTML a sei cifre corrisponde all'intensità del colore rosso. La seconda coppia corrisponde al colore verde e la terza coppia, ossia le ultime due cifre alfanumeriche, corrisponde al colore blu.

Espandi per il codice:

<!DOCTYPE html>

<html>

<head>

<title>Titolo Pagina</title>

</head>

<div>

<table>

<td>Welcome to </td>

</tr>

</table>

</div>

</body>

var sColor1 = "white";

var sColor2 = "gray";

var iColorLoop = 0;

var iCurrentCELL = 0;

var bAscending = true;

var output = null;

var startTime = new Date();

function startCycle()

{

output = document.getElementById('output');

setInterval(cycleColors,100);

}

function cycleColors()

{

var celColorChange = document.getElementById('celColorChange').cells;

if (bAscending)

{

celColorChange[iCurrentCELL++].style.color = sColor2;

if (iCurrentCELL == celColorChange.length)

{

bAscending = false;

iCurrentCELL = celColorChange.length;

}

else

{

celColorChange[--iCurrentCELL].style.color = sColor1;

if (iCurrentCELL == 0)

{

bAscending = true;

changeColors();

}

function changeColors()

{

switch (iColorLoop++)

{

case 0:

sColor1="yellow";

sColor2="orange";

break;

case 1:

sColor1="hotpink";

sColor2="purple";

break;

case 2:

sColor1="aqua";

sColor2="blue";

break;

case 3:

sColor1="lightgreen";

sColor2="green";

}

if (iColorLoop > 3)

iColorLoop = 0;

}

</script>

table {

font-family: "georgia";

font-size: 35pt;

color: blue;

}

#celSlide {

letter-spacing: 9px;

color: silver;

}

</style>

</body>

</html>

Riassunto tag HTML

Riassunto tag CSS

​

HyperText Markup Language- Linguaggio di contrassegno per gli Ipertesti

TIPI DI TESTO

Titolo

Caratteri

IMMAGINI E INPUT

LISTE E TABELLE

DIVISORI

TABELLE

LOCALIZZATORE

WEBCAM E MICROFONO

CSS: Dimensioni, colore e forma dei caratteri

COLOR

COLOR

COLOR

BLOCCARE COPIA TESTO

COLORI

Espandi per il codice: