HTML HYPERTEXT
CHE COS'È HTML
HTML, acronimo di HyperText Markup Language, è il linguaggio di markup standard per la creazione di pagine web. Consiste in una serie di elementi o tag che vengono utilizzati per definire la struttura e il contenuto di una pagina web. HTML permette di formattare il testo, inserire immagini, link e altri elementi multimediali all’interno di una pagina web. È il fondamento su cui si basa la struttura di qualsiasi sito web e viene utilizzato insieme ad altri linguaggi di programmazione e tecnologie per creare siti web dinamici e interattivi.
HTML QUICKSTART
PER COMINCIARE A UTILIZARE HTML SI DEVE SCARICARE UN PROGRAMMA (IDE = INTEGRATED DEVELOPMENT ENVIRONMENT) SUL PC, NOI PER COMODITA’ UTILIZZIAMO VISUAL STUDIO CODE MA ESISTONO ANCHE ALTRE PROGAMMI IDE DEDICATE ALL’EDITING DI CODICI SORGENTI MA QUESTA E’ SICURAMENTE UNA DELLE MIGLIORI E PIU’ CONOSCIUTE.
PER COMINCIARE A SCRIVERE UNA STRINGA DI TESTO IN HTML DEVI INSTALARE L’ESTENSIONE “HTML”, DOPO AVERLA INSTALATA SI CREA UN NUOVO FILE CON UN NOME A SCELTA E POI SI COMINCIA A SVILUPPARE IL SITO WEB.
FUNZIONI
STRUTTURA DEL FILE HTML
Ogni file HTML inizia con il tag di apertura HTML e finisce con il tag di chiusura HTML.
Un file HTML è fatto di head che contiene le informazioni riguardo la pagina (per esempio title, link, meta ecc.) e body dove va scritto tutto il contenuto della pagina.
<!DOCTYPE html>
<html lang=”it”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=
device-width, initial-scale=1.0″>
<title>Document
</title>
</head>
<body>
</body>
</html>
PARAGRAFO
Serve Per inserire i paragrafi si usa l’elemento “p”.
<p>Buongiorno, come stai?</p>
Nel tuo browser fa visualizzare cosi:
Buongiorno, come stai?
INTESTAZIONE
Serve Per inserire i titoli o intestazioni si usano gli elementi: h1, h2, h3, h4, h5, h6.
<h1>TESTO 1</h1>
<h2>TESTO 2</h2>
<h3>TESTO 3</h3>
<h4>TESTO 4</h4>
<h5>TESTO 5</h5>
Nel tuo browser fa visualizzare cosi:
IMAGINE
immagine si usa l’elemento: img src=”” alt=””
src=”” – Specifica il percorso dell’immagine
L’attributo src obbligatorio specifica il percorso (URL) dell’immagine.
Nota: quando una pagina web viene caricata, è il browser, in quel momento, che ottiene l’immagine da un server web e la inserisce nella pagina. Pertanto, assicurati che l’immagine rimanga effettivamente nello stesso punto rispetto alla pagina web, altrimenti i tuoi visitatori otterranno un’icona di collegamento interrotto. L’icona del collegamento interrotto e il testo alternativo vengono visualizzati se il browser non riesce a trovare l’immagine.
alt=”” – Specifica un testo alternativo per l’immagine
L’attributo alt richiesto fornisce un testo alternativo per un’immagine, se l’utente per qualche motivo non può visualizzarla (a causa di una connessione lenta, di un errore nell’attributo src).
nel web browser vengono visualizzate come:
<img src=”<img src=”https://www.focusjunior.it/
content/uploads/2018/03/universo-1.jpg”>
Nel tuo browser fa visualizzare cosi:
TAG: a
<a href=”https:
//www.rizzoli.it/”>
per vedere il sito della scuola</a>
Nel tuo browser fa visualizzare cosi:
TAG: br
Si scrivere per staccare due paragrafi o elementi
<p>ciao</p>
<br>
<p>ciao</p>
Nel tuo browser fa visualizzare cosi:
TAG: b
Si scrivere per trasformare in grassetto o bold un paragrafo
<p>questo è un paragrafo normale</p>
<b>questo è un paragrafo in grassetto</b>
Nel tuo browser fa visualizzare cosi:
TAG: i
Si scrivere per trasformare in italic font un paragrafo
<p>questo è un paragrafo normale</p>
<i>questo è un paragrafo in Italic</i>
Nel tuo browser fa visualizzare cosi:
TAG: ul, li, ol,
Si utilizza per creare un lista si usano questi attributi, vengono spessi usati come lista per nav
<ul>
<li>ciao</li>
<li>ciao</li>
<li>ciao</li>
<li>ciao</li>
<li>ciao</li>
</ul>
<ol>
<li>ciao</li>
<li>ciao</li>
<li>ciao</li>
<li>ciao</li>
<li>ciao</li>
</ol>
Nel tuo browser fa visualizzare cosi:
TAG: table, thead, tbody, th, td, tr
Serve per far creare le tabelle
</table>
Nel tuo browser fa visualizzare cosi:
| Lun | Mar | Mer | Gio | ven |
|---|---|---|---|---|
| ST/ECO | LAB SW | INGL | LAB HW | |
| ST/ECO | LAB SW | INGL | LAB HW | |
| LAB GR | LAB SW | ITA | LAB HW | MATE |
| LAB GR | CITT | ITA | ED MOT | MATE |
| SCIE | LAB WEB | MATE | LAB SW | |
| SCIE | LAB WEB | LAB SW |
TAG:label
Serve per dare un nome in input
<form action=”/
action_page.php”>
<input type=”radio” id=”html” name=”fav_language” value=”HTML”>
<label for=”html”>HTML
</label><br>
</form>
Nel tuo browser fa visualizzare cosi:
TAG:input
Per creare diversi controlli in un form HTML. È un elemento in linea e riceve attributi come type , name , minlength , maxlength , placeholder e così via
<input type=”button”>
<input type=”checkbox”>
<input type=”color”>
<input type=”date”>
<input type=”datetime-local”>
<input type=”email”>
<input type=”file”>
<input type=”hidden”>
<input type=”image”>
<input type=”month”>
<input type=”number”>
<input type=”password”>
Nel tuo browser fa visualizzare cosi:
TAG: select, option
Sono attributi che utilizzato per creare menu a discesa, in modo che gli utenti possano selezionare il valore che vogliono
<label id=”linuguaggio” for=”lang”>Language
</label>
<select name=”languages” id=”lang”>
<option value=”php”>PHP
</option>
<option value=”java”>Java
</option>
</select>
Nel tuo browser fa visualizzare cosi:
TAG: fieldset, legend
Fieldset serve per raggruppare elementi correlati (controlli ed etichette) in un modulo web creando un riquadro intorno a loro
legend serve per dare un nome al fieldset
<fieldset>
<legend>Programmi
</legend>
<label for=”lang”>Language
</label>
<select name=”languages” id=”lang”>
<option value=”javascript”>
JavaScript</option>
<option value=”php”>
PHP</option>
<option value=”java”>
Java</option>
</select>
</fieldset>
Nel tuo browser fa visualizzare cosi:
TAG: nav,main,div
Questi tag vingono utilizzati per definire una sezione di navigazione all’interno di una pagina. Solitamente contiene link o altri elementi di navigazione che consentono agli utenti di spostarsi tra le diverse pagine o sezioni del sito.
main si usa di più per separare in grupo gli attributi del main contenuto del programma
nav si usa di più per separare in gruppo gli attributi della barra di navigazione
div si usa di più per separare il un contenuto scelto del programma
<nav>
<ul>
<li><a href=””>Home</a></li>
<li><a href=””>html</a></li>
<li><a href=””>CSS</a></li>
<li><a href=””>SVG</a></li>
<li><a href=””>javaScript</a></li>
<li><a href=””>Come creare la barra di navigazione</a> </li>
</ul>
</nav>
<main>
<p>ciao</p>
<p>sono markus</p>
</main>
<div>
<p>ciao</p>
<p>sono pasan</p>
</div>
Nel tuo browser fa visualizzare cosi: