Imparo l'HTML
Suggerisco di seguire i facili esempi del w3schools.com
Compito: riproduci gli esempi per le tag più usate, qui sotto elencate, sul tuo micro sito, possibilmente in pagine diverse e con un minimo di stilizzazione e personalizzazione.
Disclaimer I suggerimenti di questa pagina web (e la selezione di link a w3schools) permettono di familiarizzarsi con il linguaggio HTML di base, direi nella versione storica di circa 10/15 anni fa (non sono comprese le novità di HTML5), e di scrivere del codice di base, per realizzare pagine web elementari. Non si indica un percorso di studio per comprendere le basi teoriche di HTML e/o per conoscere tutte le sue possibilità.
HTML
- Definizioni di base e info storiche Utili da sapere.
- Che cosa si intenda per tag
Tag, tag di apertura, tag di chiusura (quella con la '/'),
Nidificazione (Nested) delle tag: ricordatevi che le tag sono come le parentesi, racchiudono del contenuto: da qui ( a lì );
e siccome è possibile avere della parentesi dentro altre parentesi, la regola è sempre: quella aperta per ultima deve essere chiusa per prima:
- {[()]()[{}]} è Ok
- {[()]([[]{)}]]} NON è Ok; perchè?
- Tag e Attributi Capite bene i seguenti punti.
- HTML elements can have attributes
- Attributes provide additional information about an element
- Attributes are always specified in the start tag
- Attributes come in name/value pairs like: name="value"
- Commenti Come in ogni linguaggio informatico, esiste un trucco per poter scrivere dei commenti per ricordarci perchè abbiamo scritto un certo codice. In html, si scrivono così: <!-- commento -->
- Struttura fondamentale del documento
<html>
<head>
Intestazione del file html, contiene istruzioni generali, ma non il contenuto che deve apparire nella pagina web
</head>
<body>
Corpo della pagina, qui il contenuto che deve apparire nella pagina
</body>
</html>
- Headings <h1><h2><h3><h4><h5><h6>
- Paragrafi <p> Considerate la nozione tipografica di paragrafo nella redazione per esempio di un libro.
- Formattazione del testo Neretto, corsivo, e diversi altri
- Hyperlinks Il meccanismo vincente della pagine web. Comprendi la differenza tra link text e il valore dell'attributo href
- Immagini Come far apparire delle immagini in una pagina web.
Attenzione a come scrivere il percorso e dove situare il file immagine
<img src="html5.gif" alt="Logo HTML" style="width:30px;height:22px;"> 
- Tabelle Utili
- Liste Considerate le varie possibilità
- Oltre l'ASCII Vedi cosa sia l'ASCII e come si fa a scrivere simboli strani - e non così strani, ma non ASCII - in una pagina web. Esercizio: come scrivi le lettere accentate italiane: à è é ù ì ò; e poi come scrivi il simbolo per l'Euro €.
- Colori e anche Colori Wow! (ma aiutatevi con qualche add-on di Firefox come ColorZilla)
- Classi, attributo class MOLTO utile, rende molto più ampie e personalizzabili le possibilità di stilizzazione (e non solo) di una pagina. Permette di raggruppare elementi anche disparati di una pagina web sotto uno stessa qualificazione, per es. pippo, e quindi di assegnare a questi, e solo a questi, regole di stilizzazione comuni. (Da studiare e confrontare anche l'attributo id, che però w3school presenta in altra sezione del sito)
- Entities Il problema, come faccio a far apparirela nella pagina web una tag, ovvero per esempio la stringa >> <p> <<, se il browser, quando la legge nel codice, l'interpreta come un comando di formattazione? Qui trovate la risposta (da capire bene)
- Moduli, Forms
IMPORTANTE -- DA INIZIARE A CAPIRE BENE, lo capiremo meglio quando vedremo meglio l'interazione client/server. In particolare capire:
- che per avere un modulo, si deve scrivere la tag <form>, e al suo interno la, o più spesso, le tag per ciascun campo di inserimento compreso nel modulo, e infine la tag per il bottone di invio;
- il ruolo del fondamentale attributo action della tag <form>, il cui valore indicherà al server cosa fare con i valori inseriti lato client nei campi di inserimento del modulo
- il ruolo dei necessari attributi name delle tag corrispondenti ai campi di inserimento, per permettere lato server di sapere da quale campo di inserimento provenga un dato valore
Accademia Albertina Torino, Scuola NTA, a.a. 2024-2025
Insegnamenti ABTEC40
a cura di mario chiari