Per iniziare a lavorare con l’HTML non ti servono conoscenze pregresse di programmazione, la sintassi è molto semplice.
L’HTML è un linguaggio di markup nato per formattare e impaginare documenti ipertestuali nel web 1.0, se hai utilizzato o utilizzi linguaggi di marcatura (o formattazione) come LaTeX, XML, JSON ti sentirai a “casa” e se non li conosci?
Non importa perché la sintassi dell’HTML è molto semplice:
<TAG> Contenuto </TAG>Ogni TAG impagina e formatta un contenuto, di seguito il TAG per creare un paragrafo.
<p> Questo è un paragrafo. </p>I TAG si possono scrivere sia in maiuscolo che in minuscolo, in gergo si dice che non sono case-sensitive.
Creiamo la nostra prima pagina HTML
Per scrivere codice ti serve un’editor o un IDE (Ambiente di Sviluppo integrato), di seguito alcuni editor gratuiti e molto usati (anche da Software Engineer che lavorano presso multinazionali come Google, Microsoft, Apple, Oracle etc).
Se continuerai a seguirmi ti serviranno anche per altri linguaggi per il Web che spiegherò (CSS, Javascript, PHP)
Sono presenti le versioni per Windows, MacOs e Linux
Passi da seguire
Ti consiglio i seguenti passi per creare il tuo workspace e mantenerlo ordinato :
- crea una cartella
- rinominala WebSites
- all’interno di WebSites crea un’altra cartella
- rinominala firstSite
- con l’editor che hai installato crea un file, salvalo con nome: index.html
Benissimo! Se hai seguito correttamente i passaggi dovresti avere una folder structure di questo tipo:
Primi tag
All’interno del file index.html digita il seguente codice:
<!DOCTYPE html>
<html>
<head>
<title>First Site</title>
</head>
<body>
Hello World!!!!
</body>
</html><!DOCTYPE html> non è un TAG ma un’informazione che passiamo al browser per comunicare il tipo di contenuto. Stiamo usando HTML 5
<html> TAG che indica che è una pagina html
<head> TAG che identifica l’head del messaggio e conterrà oltre al titolo della pagina (visibile nella tab del browser) delle informazioni (che impareremo più avanti) per i motori di ricerca
<body> TAG che specifica il contenuto vero e proprio della pagina
Testiamo la nostra pagina HTML
Per vedere l’output del tuo codice ti basta aprire il file index.html con un browser web come Chrome, Safari, Edge, Firefox
Materiale extra:
Ti lascio la mia repository su GitHub dove puoi trovare l’esempio con qualche aggiunta che ti suggerisco di iniziare ad analizzare prima della prossima lezione sullo sviluppo web.
Nuove lezioni:
