Lezione 2 - Securing Systems

class: center, middle
# Basi di HTML
*(intro rapida)*

---

# Introduzione a HTML

- HTML è il linguaggio che definisce la struttura delle pagine web

- È composto da tag racchiusi tra `<` e `>`

- Ogni tag descrive un elemento della pagina

- Browser e motori di ricerca lo capiscono al volo

- È la base su cui si appoggiano CSS e JavaScript

---

# Struttura minima di un file HTML

- `<!DOCTYPE html>` indica il tipo di documento

- `<html>` è il contenitore principale

- `<head>` contiene metadati, titolo, charset

- `<body>` contiene il contenuto visibile

- Ogni elemento è annidato gerarchicamente

---

# Il tag `<head>`

- Contiene informazioni per il browser

- Titolo della pagina con `<title>`

- Metadati con `<meta>`

- Inclusione di CSS esterni

- Script opzionali da caricare prima del body

---

# Il tag `<body>`

- Si vede tutto ciò che metti qui

- Testi, immagini, video, link, liste…

- Ogni elemento è un tag HTML

- L’ordine determina il flusso della pagina

- I browser interpretano anche se sbagli qualcosa

---

# Testo base

- `<h1>`…`<h6>` per i titoli

- `<p>` per i paragrafi

- `<strong>` per il grassetto semantico

- `<em>` per il corsivo semantico

- `<br>` per un’interruzione di riga veloce

---

# Link: `<a>`

- Definiti dal tag `<a>`

- L’attributo principale è `href`

- Possono aprire pagine, email, anchor interne

- `<a href="https://example.com">Vai</a>`

- Si possono stilizzare facilmente via CSS

---

# Immagini: `<img>`

- Tag autochiudente

- `src` punta all’immagine

- `alt` fondamentale per accessibilità

- width/height opzionali

- Non ha contenuto interno

- esempio <img alt="Gatto" src="gatto.gif">

---

# Liste

- Liste non ordinate: `<ul>`

- Liste ordinate: `<ol>`

- Ogni elemento è `<li>`

- Utilissime per menu e contenuti strutturati

- Supportano annidamento infinito

---

# Tabelle

- Struttura base: `<table>`

- Righe: `<tr>`

- Celle dati: `<td>`

- Celle header: `<th>`

- Evita di usarle per il layout

---

# Div e Span

- `<div>` è un contenitore a blocchi

- `<span>` è inline

- Servono per strutturare e raggruppare

- Spesso combinati con class e id

- Base del layout moderno

---

# Attributi

- Ogni tag può avere attributi

- Formato: `nome="valore"`

- `id` identifica un elemento unico

- `class` raggruppa elementi

- Attributi semantici migliorano accessibilità

---

# Commenti

- ``

- Non visibili nel browser

- Utili per note interne

- Buoni per debug

- Evita di metterci roba sensibile

---

# Form: introduzione

- Usati per input utente

- `<form>` è il contenitore

- `action` e `method` gestiscono l’invio

- Raccolgono testi, opzioni, file

- Base per login e ricerche

---

# Campi di input

- `<input>` gestisce testo, checkbox, radio, password…

- `type` definisce il tipo

- `placeholder` dà indicazione

- `value` precompila

- `name` è fondamentale per l’invio

---

# Altri elementi di form

- `<textarea>` per testi lunghi

- `<select>` per menu a tendina

- `<option>` per le voci

- `<button>` per invio o azioni

- Supporta validazione HTML5

---

# Semantica HTML5

- Tag più “parlanti”

- `<header>` e `<footer>`

- `<nav>` per la navigazione

- `<section>` e `<article>`

- Migliorano SEO e accessibilità

---

# Media

- `<video>` per video

- `<audio>` per audio

- `controls` per i comandi

- `<source>` per più formati

- Integrabili con JS

---

# Layout moderno

- HTML gestisce la struttura

- CSS gestisce il layout

- Mantieni HTML pulito

- Usa contenitori logici

- Flexbox e Grid fanno il resto (via CSS)

---

# Best practices

- Codice leggibile

- Annidamento corretto

- Tag semantici

- `alt` sempre presente

- Evita attributi obsoleti

---

# Errori comuni

- Tag non chiusi

- Annidamento errato

- Manca `alt` nelle immagini

- Usare `<br>` per layout

- Mischiare stile e struttura

---

# Conclusione

- HTML è semplice ma potente

- Base di tutto il web

- Struttura → stile → comportamento

- Browser perdonano, ma scrivere bene paga