Sei una new entry nel mondo della programmazione web, e non sai da dove iniziare?
Esempio dopo esempio, in questo articolo, ti spiegheremo come creare una pagina web partendo da zero.
Il primo passaggio è quello di definire la struttura della nostra pagina attraverso l’HTML. Quest’ ultimo non è un linguaggio di programmazione, ma di markup (marcatore).
La struttura di una pagina HTML è costituita appunto da marcatori che prendono il nome di tag HTML.
I tag Html sono racchiusi tra parentesi angolari. La maggior parte di questi è caratterizzata da tag di apertura e di chiusura.
<nomeTag>contenuto</nomeTag>
L’unione di tag di apertura, tag di chiusura e contenuto costituisce l’elemento HTML. L’utilizzo dei tag permette di creare la tipica struttura ad albero di un documento HTML. Un elemento prende il nome di parent (genitore), quando contiene uno o più elementi, e child (figlio) quando è contenuto all’interno di un altro elemento.
Tipica struttura di un documento HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>
Come puoi notare dall’esempio in alto, i tag principali di un documento HTML sono: <html>, <head> e <body>.
Il tag <html> è la radice del documento HTML, è il tag principale che contiene tutti gli altri elementi ed indica al browser come deve interpretare il documento. All’interno del tag <head>, troviamo tutti i tag che hanno lo scopo di impartire delle direttive al browser come ad esempio:
- Il <title>, indica il titolo della pagina. Viene visualizzato all’interno del tab o in cima alla finestra di un qualsiasi browser;
- I <meta>, hanno lo scopo di fornire indicazioni al browser come ad esempio: la codifica dei caratteri utilizzati all’interno del documento, la responsività dello stesso, la compatibilità con un determinato browser, ecc;
- I <link>, servono per puntare a determinate risorse. Nella maggior parte dei casi si utilizzano per collegare fogli di stile esterni;
- Gli <script>, utilizzati per collegare ad esempio file Javascript con lo scopo di dare dinamicità alla pagina.
Il tag <body>, è il corpo del documento. Contiene tutto ciò che viene effettivamente visualizzato dall’utente sul browser. Quest’ultimo può contenere al suo interno: immagini, titoli, paragrafi, video ecc.
Lo scopo principale di un tag, è quello di dare significato al suo contenuto. A tal proposito entra in gioco la semantica: quella parte della linguistica che studia il significato delle parole.
Quindi dopo questa piccola spiegazione, puoi comprendere che con il termine tag semantico, si identifica l’elemento che descrive espressamente il proprio significato.
Un esempio di tag semantico è <h1>, il quale viene utilizzato per il titolo principale di una pagina o di un articolo.
NB: in una pagina web ci deve essere un solo tag <h1>.
Questo tag fa parte dei cosiddetti tag di intestazione, e differisce dagli altri: <h2>, <h3>, <h4>, <h5> ed <h6> appunto per il significato che attribuisce al suo contenuto.
I tag HTML posso avere attributi, dediti a specificare in maniera dettagliata la funzione o la tipologia dell’elemento.
<input type="text" name="name" placeholder="Inserisci qui del testo indicativo">
Il tag <input> nell’esempio in alto indica un elemento che consente agli utenti di inserire informazioni. NB: utilizzato ad esempio nei form.
Gli attributi in questo esempio specifico sono: type, name e placeholder. L’attributo type specifica appunto il tipo del contenuto, in questo caso particolare testuale. In alternativa puoi inserire come valore dell’attributo type ad esempio: email, button, ecc…
L’attributo placeholder serve per inserire un testo indicativo, con lo scopo di indirizzare l’utente nel completamento del campo input. Name invece è il nome che attribuiamo al campo.
Ti consigliamo di approfondire l’argomento utilizzando la nostra guida HTML e CSS.
