LIBRO WEBMASTER... Strategie per programmare siti web e portali...Acquistalo su AMAZON CLICCA libro per webmaster

La struttura di una pagina HTML ▼

Lezione Demo indicativa del nostro video corso WEBMASTER – Struttura pagina web

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).

1
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>
2
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
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

corso online webmaster

Articolo letto (261) volte

Sono Daniele Venditti (Responsabile di Progettimultimediali.com e Corsi-online.it) mi occupo di formazione informatica dal 2001. Ho conseguito anni di specializzazione in sviluppo siti web con una serie di studi predisposti alle nuove tecnologie…. ho svolto dal 2001 ad oggi più di 8.000 ore di corsi tra preparazione al conseguimento della patente europea del computer (anche come esaminatore AICA) e corsi specifici di grafica web e corsi multimediali. Ho lavorato per grandi società del settore informatico come la Zucchetti Formazione (Milano – Perugia – Frosinone), Media e Services (Frosinone), Scuola di Formazione (Frosinone), e collaborato con scuole di formazione pubbliche nel settore della new ecomomy per la formazione finanziata da fondi regionali e comunitari. Ho dunque maturato una vasta esperienza nella realizzazione di siti web, produzioni multimediali come grafica e video on-line. Ritengo la Formazione online un aspetto essenziale per l'accrescimento professionale.

Comments

Leave a Reply

XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>