Struttura Base di un documento Html

Ogni documento HTML sarà strutturato nella seguente maniera:

    • Si definisce il doctype: un tag che non ha bisogno di chiusura e che ha il compito di fornire informazioni al server Web che ospita la pagina su quale standard html andremo ad utilizzare:
      <!doctype html>
  • si apre il tag <html>, che conterrà tutto il codice e verrà chiuso alla fine del documento.
  • Il tag <head>, letteralmente “testa”, che contiene a sua volta tag relativi a
    informazioni non visualizzabili, ma che indicano come la pagina deve essere interpretata, o informazioni complementari, come il titolo della pagina (quello che viene visualizzato sulla barra del titolo del browser).
  • Il tag <body>, che contiene i tag di formattazione del reale contenuto della pagina.

Ecco un esempio di base che mostra la struttura base di un documento html e l’utilizzo dei tag base per la gestione del testo. (Link diretto a codepen)

<!doctype html>
<html>
  <head>
    <title>Sono il titolo della pagina, quello che compare in alto sul browser!</title>
  </head>
  <body>
    <!-- I tag H* indicano la titolazione-->
    <h1>Sono il titolo principale</h1>
    <!-- I tag p indicano un paragrafo, mentre i br, l' a capo-->
    <p>orem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas vel mi ligula.<br/> Aenean id erat blandit, vestibulum turpis at, tincidunt lectus. Proin non iaculis arcu. Vivamus luctus, nisi ac scelerisque porta, est velit blandit lacus, sit amet tempor tellus quam in quam.</p>
    <h2>Sono un sottotitolo</h2>
    <p>Curabitur at magna mauris. Interdum et malesuada fames ac ante ipsum primis in faucibus. Sed eleifend consequat turpis sed faucibus. Nam ullamcorper, ante eget cursus auctor, tellus sem cursus lacus, blandit iaculis dui nisl a augue.</p>
    <!-- ul+li ol+li dl+dt+dd sono i tag per le liste, rispettivaemtne Non odinate, ordinate, e definition list -->
    <ul>
      <li>Maecenas augue dui</li>
      <li>Rhoncus a faucibus efficitur</li>
      <li>consequat sed turpis</li>
    </ul>
   
    <ol>
      <li>Maecenas augue dui</li>
      <li>Rhoncus a faucibus efficitur</li>
      <li>consequat sed turpis</li>
    </ol>
    <h3>Glossario</h3>
    <dl>
      <dt>Parola</dt> <dd>Spiegazione parola</dd>
      <dt>Parola</dt> <dd>Spiegazione parola</dd>
      <dt>Parola</dt> <dd>Spiegazione parola</dd>
    </dl>
    <h2>Grassetti e italici</h2>
    <p>Suspendisse <strong>bibendum</strong> imperdiet tortor sit amet varius. Curabitur congue <em>turpis</em> vel augue condimentum pharetra. Curabitur varius cursus placerat.</p>
  </body>
</html>

See the Pen avpVwo by Mariachiara Pezzotti (@merissimissima) on CodePen.

Lascia un commento

Il tuo indirizzo email non sarà pubblicato.