Iniziamo il nostro percorso di Webmaster dalla spiegazione della struttura di una pagina web con semplice linguaggio HTML. Tutte le pagine web, statiche o dinamiche, semplici o complesse, sono costituite da una identica struttura di base che illustreremo.
Per creare la pagina web utilizzeremo un semplice editor testi (Blocco Note per Windows va benissimo per il nostro lavoro).Utilizzando il nostro editor testi scriviamo le seguenti linee di codice.
<html> <head> <title>Titolo pagina web</title> </head> <body> Contenuto della mia prima pagina web </body> </html>
Questo rappresenta la più elementare struttura di una pagina web sia statica che dinamica…tutti i siti web in circolazione, dai più semplici ai più complessi hanno una base strutturale di questo tipo. L’aggiunta di ulteriore elementi di codice, come vedremo, all’interno della pagina html, rende le pagine web diverse tra di loro.
Dunque fra i tag (così sono definiti gli elementi di codice) vengono inseriti tutti gli oggetti di formattazione che verranno interpretati dal browser web (Internet Explorer, Chrome, Firefox, Opera, etc) e visualizzati sul display del nostro dispositivo.
Si comincia con <html> di apertura che avrà il suo corrispondente tag di chiusura, all’interno del quale troviamo prima di tutto il tag di intestazione <head> dove inserire il titolo della nostra pagina web (che leggeremo nella barra del titolo del browser) e come vedremo nelle lezioni successive elementi di codice Javascript o css. Arriviamo al tag <body> che letteralmente viene definito il corpo della nostra pagina. Tutto ciò che inseriremo al suo interno verrà mostrato nel contenuto della pagina web…quindi è un po’ come se fosse il foglio bianco all’interno del quale scriviamo il testo, inseriamo le immagini ed altri oggetti multimediali. Tutti i tag illustrati hanno i corrispondenti codici di chiusura per esempio: </html>, </head>, </title>, </body> (come riportato nel listato precedente).
Salviamo il nostro lavoro attraverso Blocco Note ricordando di dare un nome al file ed utilizzare l’estensione .html oppure .htm (noi abbiamo deciso di chiamare il file con index.html).
Visualizziamo la nostra pagina index.html
Proviamo a modificare il codice della nostra pagina web. Centriamo il contenuto del body. Quindi dobbiamo aprire nuovamente il file precedente con il nostro blocco note (nei sistemi windows aprire blocco note, file, apri il file index.html) e modificare la riga corrispondente al testo contenuto nella pagina apportando la seguente modifica:
<body> <center> Contenuto della mia prima pagina web </center> </body>
salviamo e apriamo nuovamente il file con il nostro browser. Noteremo il testo al centro del nostro monitor (o altro dispositivo di visualizzazione come Tablet o Smartphone). Possiamo anche decidere di inserire un elemento di formattazione in grassetto nel contenuto della pagina. Il codice diventerà:
<body> <center><b> Contenuto della mia prima pagina web </b></center> </body>
Un serie di tag utilizzati spesso per misurare la dimensione del carattere (Font in inglese) in html sono i seguenti:
<h1>Prova</h1> <h2>Prova</h2> <h3>Prova</h3> <h4>Prova</h4> <h5>Prova</h5> <h6>Prova</h6>
Il Tag html per i Titoli
La dimensione del tag decresce a partire da <h1> che è la sua dimensione massima. Questo codice viene spesso utilizzato per il titolo delle pagine (all’interno del body) allo stesso modo con cui utilizziamo i titoli dei capitoli o dei paragrafi in un libro. È un tag apprezzato dai motori di ricerca.
Il nostro codice all’interno della struttura della pagina web diventerà:
<html> <head> <title>Titolo pagina web</title> </head> <body> <center><h1>Titolo contenuto</h1></center> <center><b>Contenuto della mia prima pagina web</b></center> </body> </html>
Tag Titoli
Provate anche voi a modificare con il vostro editor testi i vari tag della pagina ed a visualizzarla nuovamente con il browser.
Puoi approfondire utilizzando il video corso online per webmaster
