x

Gli esempi base di una pagina web

Primo esempio

Questo è un breve esempio base di una pagina web senza formattazione del testo in html5.

Provare a scrivere con un editor di testo (si consiglia "Sublime Text" oppure "Brackets", ma va bene anche un qualsiasi editor di testo avanzato come Notepad++, oppure nel caso peggiore il Blocco Note di Windows) la seguente pagina web

 

<!DOCTYPE html> 
<html lang="it-IT"> 
<head> 
     <meta charset="UTF-8">
     <title> La mia prima pagina web </title> 
</head> 
<body> 
<h3> Questa è una pagina web </h3> 
<p> Ciao Mondo! 
</body> 
</html>

Una volta provata con un qualsiasi Browser (Firefox, Chrome, Internet Explorer, Safari, Edge) la pagina web che deve avere estensione .html si puo' consultare la seguente guida e fare esperimenti.

Guida introduttiva

 

Secondo Esempio, uso dei tag avanzati di HTML5

Questo è un altro esempio, si fa uso di alcuni tag avanzati di html5, ma non si formatta ancora il layout della pagina:

<!DOCTYPE html> 
<html lang="it-IT"> 
<head> 
     <meta charset="UTF-8">
     <title>primo esempio</title>
</head>
<body>
<div>
<header>
<h1>Questo è un esempio di titolo</h1>
<nav>
<ul>
<li><a href="/options">Prima voce</a></li>
<li><a href="/access">Seconda voce</a></li>
<li><a href="/mobile">Terza  voce</a></li>
</ul>
</nav>
</header>
<hgroup>
<h1>test</h1>
<p>mio gruppo</p>
</hgroup>
<div>
<h1>Sections</h1>
<section>
<h1>Main heading</h1>
<p>Some text</p>
<h2>Level 2 heading</h2>
<p>Some more text</p>
<h3>Level 3 heading</h3>
<p>A bit more text</p>
<h2>Another level 2 heading</h2>
<p>The last bit of text</p>
</section>
<figure>
<img src="irlanda-clima.jpg"
alt="Picture of the Irish south coast">
<figcaption>Looking out into the Atlantic Ocean from south west Ireland</figcaption>
</figure>
<footer>
<p>
&copy; Copyright  by Fausto
</p>
</footer>
</div>
</body>
</html>

Terzo esempio

Ora vediamo la struttura base che richiama un file CSS (Cascading Style Sheet);

<!DOCTYPE html> 
<html lang="it-IT"> 
<head> 
     <meta charset="UTF-8">
     <title>Titolo della pagina</title>
<link rel="stylesheet" type="text/css" href="css/mio_stile.css">
</head>
<body>
<div>
<header>
<h1>Questo è un esempio di titolo</h1>
<nav>
</nav>
</header>
<footer>
<p>
&copy; Copyright  by Fausto
</p>
</footer>
</div>
</div>
</body>
</html>

 

FILE CSS (Foglio di stile)

Ecco un primo esempio di file CSS che deve essere salvato nella sottocartella

css

con il nome

mio_stile.css
header
{ background: #faf; color: #fff; }
nav
{ border: 4px solid #000; }
section
{ border: 4px dashed #000; }
article
{ border: 2px dotted #000; }
input:valid {
outline: 5px solid green;
}
input:invalid {
outline: 5px dashed red;
}
section, article {padding: 4px; margin: 4px; display:block;}
header nav ul li{
list-style-type: none;
margin: 10px;
padding: 15px;
display:inline;
background: #fff; 
}

 

La struttura delle cartelle deve essere la seguente

PrimoEsempio (cartella)

--> indice.html (file html)

--> css (cartella)

------------> mio_stile.css (file css)

Categorie

↑