--
---<!DOCTYPE html>
<html lang="it">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Come creare un template per post - Epicode</title>
<meta name="description"
content="Scopri come iniziare a creare un modello di pagina in HTML per un nuovo blogpost.">
<link rel="stylesheet" type="text/css" href="assets/css/style.css">
</head>
<body>
<header>
<a href="javascript:void(0)">
<img id="logo" src="assets/images/logo.png" alt="logo Epicode blog">
</a>
<p id="slogan">EPICODE - IL BLOG DEI DEVELOPERS</p>
</header>
<nav id="menu">
<a class="link-nav" href="javascript:void(0)" title="home">Home</a>
<a class="link-nav" href="javascript:void(0)" title="articoli">Articoli</a>
<a class="link-nav" href="javascript:void(0)" title="lavora con noi">Lavora con noi</a>
</nav>
<main>
<article>
<h1 id="post-head">Come creare un template per i post</h1>
<p id="autore-data">di Mario Rossi - <span id="data-pubblicazione">pubblicato il 25-10-2020</span></p>
<div>
<p>La prima cosa da fare è suddividere in blocchi logici la pagina, separando <strong>le parti
comuni</strong> a tutte le pagine da quelle specifiche.</p>
<p>Le varie aree saranno quindi suddivise in:</p>
<ul>
<li>Contenuti di intestazione del tag <code><header></code></li>
<li>Contenuti centrali variabili del tag <code><main></code> (corpo principale)</li>
<li>Contenuti di fine pagina comuni, da inserire nel tag <code><footer></code></li>
</ul>
</div>
<h2>Formattazione del codice</h2>
<p>
Il testo dell'articolo dovrà essere formattato per identificare tutte le parti da selezionare con i CSS.
Perciò i passi saranno:
</p>
<ol>
<li>Progettare su caarta il markup finale, assegnando ad ogni specifico testo il tag appropriato</li>
<li>Scrivere l'HTML dai tag esterni a quelli interni e dall'alto verso il basso</li>
<li>Applicare gli stili CSS</li>
</ol>
<p>L'applicazione di stili CSS è cresciuta negli anni fino a raggiungere la diffusione pressoché totale.</p>
<div id="sezione-tabella">
<caption id="table-caption">Diffusione dei CSS</caption>
<table>
<thead id="testata-tabella">
<tr>
<th>Anno</th>
<th>% di utilizzo</th>
</tr>
</thead>
<tbody>
<tr>
<td>2000</td>
<td>20%</td>
</tr>
<tr>
<td>2002</td>
<td>35%</td>
</tr>
<tr>
<td>2004</td>
<td>45%</td>
</tr>
<tr>
<td>2008</td>
<td>80%</td>
</tr>
<tr>
<td>2012</td>
<td>100%</td>
</tr>
</tbody>
</table>
</div>
<!--per il link dell'articolo è stata creata una classe, in quanto nel mondo reale spesso non c'è solo un link negli articoli-->
<p>Un test di validazione potrà essere fatto tramite il <a class="article-link" href="#">tool online
apposito</a>.</p>
</article>
<section id="newsletter">
<p id="cta-newsletter">Vuoi rimanere aggiornato su altre novità del blog? Iscriviti alla nostra newsletter:
</p>
<fieldset>
<form action="subscribe.php" method="POST">
<input type="text" id="mail" name="mail" placeholder="inserisci l'email" size="20">
<input id="button" type="submit" value="ISCRIVITI!">
</form>
</fieldset>
</section>
</main>
<aside>
<section>
<h2>Articoli correlati</h2>
<p class="correlati">
<a href="javascript:void(0)">Validare il codice HTML</a><br>
Categoria: develop<br><br>
<span class="correlati-data">Data: 18-9-2020</span>
</p>
<p class="correlati">
<a href="javascript:void(0)">Correggere la sintassi</a><br>
Categoria: develop<br><br>
<span class="correlati-data">Data: 25-9-2020</span>
</p>
<p class="correlati">
<a href="javascript:void(0)">Meno Kb nella pagina</a><br>
Categoria: ottimizzazione<br><br>
<span class="correlati-data">Data: 30-9-2020</span>
</p>
</section>
</aside>
<footer>
<p>Blog Develop ©2020</p>
<p>
<address>Testata online di Mario Rossi, registrata con n. 213/2018 con sede in via Luigi Einaudi 2 - Milano
P.IVA
00112233 <a id="footer-link" href="mailto:info@blogdevelop.it">info@blogdevelop.it</a></address>
</p>
</footer>
</body>
</html>