•  30-09-2019
  •  | 
  •  

Domanda

Voglio iniziare a creare di nuovo i siti web, ma sono stato fuori dalla scena HTML per un po 'di tempo. Mi stavo chiedendo se questa è una buona ossatura per un sito web. E se no, che cosa devo modificare, aggiungere e / o rimuovere? 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<html>
    <head>
        <rel="stylesheet" type="text/css" href="css/main.css" />
        <meta http-equiv="content-type" content="text/php; charset=utf-8" />

        <title>Site Template - Welcome!</title>
    </head>

    <body>
        <div class="Container">
            <div class="Header">

            </div>

            <div class="Menu">
                <ul id="nav"> 
                    <li>menu item</li>  
                    <li>menu item</li> 
                    <li>menu item</li>  
                    <li>menu item</li> 
                    <li>menu item</li>  
                    <li>menu item</li> 
                </ul> 
            </div>

            <div class="Body">

            </div>
        </div>

    </body>

    <footer>
        <div class="Footer">
            <b>Copyright - 2010</b>
        </div>
    </footer>
</html>
È stato utile?

Soluzione

www.htmlshell.com , è possibile ottenere uno scheletro di base lì, con optional comprende per cose come jQuery o favicon, etc.

Altri suggerimenti

Sono stato cominciando con HTML5 Boilerplate .. . esso consente di assicurarsi che tutto sia il più coerente tra i vari browser e già tiene conto della maggior parte delle cose avrò bisogno più tardi.

tl; dr 

<!DOCTYPE html>
<html dir="ltr" lang="en">
<head>
  <meta charset="utf-8">
  <title>Example</title>
  <link rel="stylesheet" href="/default.css">
  <link rel="icon" href="/favicon.png" sizes="16x16" type="image/png">
  <link rel="canonical" href="http://example.com/">
  <meta name="description" content="…">
</head>
<body>

  <header>
    <!-- site-wide header -->
    <h1>Example <!-- site name --></h1>
  </header>

  <main>
    <!-- this page’s main content -->
  </main>

  <nav>
    <!-- site-wide navigation -->
  </nav>

  <footer>
    <!-- site-wide footer -->
  </footer>

</body>
</html>

Un HTML5 scheletro potrebbe assomigliare a questo: 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>CC</title>
</head>
<body>

</body>
</html>

(Si noti che questo non è il più minimale documento HTML5 , tante parti sono opzionali.)

Se si utilizza una codifica diversa da UTF-8, modificare il valore della meta-charset conseguenza.

Se si utilizza una lingua diversa da quella inglese di contenuti, modificare il valore dell'attributo lang conseguenza

.

Se si desidera specificare esplicitamente la direzionalità del testo, utilizzare il dir attributo sull'elemento html, ad esempio: <html dir="ltr" lang="en">

link comune / elementi meta da aggiungere al head

  • Collegamento a una foglio di stile (text/css si presume per impostazione predefinita): 

    <link rel="stylesheet" href="/default.css">

  • Collegamento a una favicon : 

    <link rel="icon" href="/favicon.png" sizes="16x16" type="image/png">

  • canonica URL del documento: 

    <link rel="canonical" href="http://example.com/">

  • descrizione del contenuto della pagina: 

    <meta name="description" content="…">

Elementi per la body

Come ogni pagina è diversa, questo non può essere risolta in generale, quindi potrebbe essere meglio lasciare il body vuoto.

Tuttavia, la maggior parte delle pagine probabilmente fanno parte di un sito web, e la maggior parte siti web probabilmente un colpo di testa a livello di sito (? header) con il nome del sito (? h1), piè di pagina (? footer) e menu di navigazione (? nav). Questi dovrebbero appartenere alla radice body sezionamento (cioè, non hanno altro elemento contenuto sezionamento come genitore). Il nav può o non può essere parte del header.
Il contenuto principale (? main) può o non può essere costituito da un elemento di sezionamento (di solito article o section, o più di essi). 

<header>
  <!-- site-wide header -->
  <h1>Example <!-- site name --></h1>
</header>

<main>
  <!-- this page’s main content -->
</main>

<nav>
  <!-- site-wide navigation -->
</nav>

<footer>
  <!-- site-wide footer -->
</footer>

Non c'è niente come un elemento <footer> in XHTML 1.0 Transitional. Si dovrebbe fare in questo modo: 

<body>
    ...
    <div class="footer">
        ...
    </div>
</body>

Mi piace usare un DOCTYPE rigoroso nei miei progetti, ma la tua funziona, anche. 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <link rel="stylesheet" type="text/css" href="main/css.css">
        <meta http-equiv="content-type" content="text/html;charset=utf-8">

        <title>Site Template - Welcome!</title>
    </head>

    <body>
        <div class="Container">
            <div class="Header">

            </div>

            <div class="Menu">
                <ul id="nav"> 
                    <li>menu item</li>  
                    <li>menu item</li> 
                    <li>menu item</li>  
                    <li>menu item</li> 
                    <li>menu item</li>  
                    <li>menu item</li> 
                </ul> 
            </div>

            <div class="Body">

            </div>
            <div class="Footer">
                Copyright - 2010
            </div>
        </div>
    </body>
</html>

Il W3C DOM Level 1 Nucleo è un buon posto per iniziare: 

<!DOCTYPE html>
<html>
<head>
  <title>My Document</title>
</head>
<body>
</body>
</html>
  

Il DOM del W3C Livello 1 consente di modificare l'albero contenuti qualsiasi modo si    vogliono . E 'abbastanza potente per costruire qualsiasi documento HTML da zero.

Da lì si può aggiungere qualsiasi opzione (<html lang="en">, <meta charset="utf-8">, ecc), elemento (link, main, nav, div, footer, etc.) o la dipendenza libreria (jQuery, Bootstrap, ecc), in base alle esigenze e le preferenze.

Autorizzato sotto: CC-BY-SA insieme a attribuzione
Non affiliato a StackOverflow
scroll top