•  30-09-2019
  •  | 
  •  

Pregunta

Quiero empezar a crear sitios web de nuevo, pero he estado fuera de la escena HTML desde hace un tiempo. Me estaba preguntando si esto es un buen esqueleto de un sitio web. Y si no, ¿qué debería cambiar, añadir y / o eliminar? 

<!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>
¿Fue útil?

Solución

Trate www.htmlshell.com , se puede obtener un esqueleto básico allí, con opcional incluye cosas como jQuery o iconos de favoritos, etc.

Otros consejos

He estado empezando con para HTML 5 .. . que ayuda a asegurarse de que todo es el más consistente a través de los distintos navegadores y ya tiene en cuenta la mayoría de las cosas que voy a necesitar más adelante.

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 esqueleto podría tener este aspecto: 

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

</body>
</html>

(Tenga en cuenta que este no es el más mínimo documento HTML 5 , por lo que muchas partes son opcionales.)

Si está utilizando una codificación diferente que no sea UTF-8, cambie el valor de la meta-charset en consecuencia.

Si está utilizando un lenguaje diferente contenido de Inglés, cambie el valor del atributo lang consecuencia

.

Si desea especificar explícitamente la direccionalidad de texto, utilice el dir atributo en el elemento html, por ejemplo: <html dir="ltr" lang="en">

link Común / meta elementos a añadir a la head

  • Enlazar a un hoja de estilo (text/css se supone por defecto): 

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

  • La vinculación a un favicon : 

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

  • canónica URL del documento: 

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

  • Descripción del contenido de la página: 

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

Elementos para la body

A medida que cada página es diferente, esto no puede ser respondida en general, por lo que sería mejor dejar el body vacía.

Sin embargo, la mayoría de las páginas probablemente son parte de un sitio web, y la mayoría de sitios web, probablemente, tener un encabezado de todo el sitio (? header) con el nombre del sitio (? h1), pie de página (? footer) y el menú de navegación (? nav). Estos deben pertenecer a la body seccionar la raíz (es decir, no tienen otro elemento de contenido de seccionamiento como padre). El nav puede o no ser parte de la header.
El contenido principal (? main) puede o no puede consistir en un elemento de seccionamiento (generalmente article o section, o múltiples de ellos). 

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

No hay nada como un elemento <footer> en XHTML 1.0 Transitional. Usted debe hacerlo de esta manera: 

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

Me gusta usar un tipo de documento estricta en mis proyectos, pero el suyo funciona, también. 

<!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>

El W3C DOM Nivel 1 Core es un lugar bueno para empezar: 

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

El W3C DOM Nivel 1 permite cambiar el árbol de contenido de la forma que    quieren . Es lo suficientemente potente como para construir cualquier documento HTML desde cero.

Desde allí se puede añadir cualquier opción (<html lang="en">, <meta charset="utf-8">, etc.), elemento (link, main, nav, div, footer, etc.) o las dependencias de bibliotecas (jQuery, Bootstrap, etc.), en base a sus necesidades y preferencias.

Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top