• #Aplicaciones
  • #Bases de datos
  • #Dispositivos
  • #Hardware
  • #Inversión
  • #Marketing
  • #Programacion
  • #Sistemas
  • Plantilla Básica HTML5

    TutorialeshtmlProgramacion

    Cuando comienzas cualquier proyecto web y no usas ningún framework, es habitual que agregues siempre las mismas líneas HTML tanto en la cabecera como en el pié del documento. En este tutorial vamos a ver qué es lo mínimo que debes incluir en el archivo index.html.

    Elementos que Debes Incluir

    Aquí tienes una lista con los elementos que deberías incluir:

    • Declaración del Tipo de Documento: Es común olvidarse de esta declaración, ya que no es imprescindible para que la página que estás creando funcione. Sin embargo, siempre está bien incluir la etiqueta doctype para indicar el contenido del documento a los navegadores o a los diferentes motores que vaya a consumirlo.
      <!doctype html>

      No se trata de una etiqueta HTML, sino que es simplemente algo que proporciona información al navegador acerca del tipo de documento que se encontrará. Esta declaración no es sensible a las mayúsculas, por lo que puedes escribirla como te plazca. Para más detalles, consulta qué es y cómo se utiliza la etiqueta doctype.

    • Codificación de Caracteres: La codificación de caracteres se indica mediante una meta etiqueta HTML. La codificación más utilizada es la UTF-8, que cubre el 95% de los caracteres de los idiomas existentes:
      <meta charset="utf-8">

      Aquí tienes más información acerca de la codificación UTF8.

    • Definición del Viewport: El viewport no es ningún estándar y se suele utilizar para definir el comportamiento de los navegadores en dispositivos móviles. En general, al ancho máximo del documento debe ser equivalente al ancho máximo de la pantalla del dispositivo. Para definir este valor se se usa la siguiente meta etiqueta:
      <meta name="viewport" content="width=device-width, initial-scale=1">

      Como ves, también se define la escala, que hace posible agregar un zoom si es necesario, aunque en este caso es la escala 1:1, que es la más común, ya que en general, se suelen utilizar media queries CSS para definir los estilos del documento. Puedes encontrar más información acerca del viewport aquí.

    • Versiones Antiguas de Internet Explorer: La meta etiqueta X-UA-Compatible permite definir la versión de Internet Explorer en la cual se debe renderizar la página. Esta etiqueta ya no se usa del mismo modo ni en Internet Explorer 11 ni en el navegador Microsoft Edge. El navegador Internet Explorer siempre comenzará a renderizar la página usando la última versión, por lo que esta etiqueta debe situarse en la parte superior del documento. Cuando el navegador encuentre esta etiqueta, el renderizado volverá a comenzar desde cero. En general, recomiendo usar «IE=edge» como valor, puesto que las versiones antiguas de Internet Explorer incluyen bastantes bugs y no suelen respetar los estándares:
      <meta http-equiv="x-ua-compatible" content="ie=edge">
    • Enlaces a Archivos CSS y JS: En general, los enlaces a los archivos CSS usan la etiqueta link, y deben colocarse en la cabecera o head del documento.Con respecto a lo scripts o archivos JS, lo recomendable es incluirlos justo antes de la etiqueta </body> para evitar errores. Si incluyes un script en la cabecera y éste modifica algún elemento HTML, seguramente salte algún error, ya que el código HTML al que hace referencia todavía no se habrá renderizado. Este es emotivo de que la librería jQuery incluya la famosa función $( document ).ready(). Así que ya sabes; para evitar errores, en el pié. Para una explicación más detallada, consulta por qué no debes incluir scripts en la cabecera.
    • Estandarizando estilos: Por último, tampoco estaría mal que usases algún tipo de framework CSS que estandarize los estilos de diferentes navegadores. Por ejemplo, puedes usar Normalize.css, que es el que usa Bootstrap, entre otros frameworks. Puedes encontrarlo aquí.

    El Resultado Final

    Aquí tienes la plantilla del archivo index.html resultante, en la que se incluyen todos los elementos de la lista:

    <!DOCTYPE html>
    <html lang="es">
      <head>
          <meta charset="utf-8" />
          <meta http-equiv="x-ua-compatible" content="ie=edge" />
          <meta name="viewport" content="width=device-width, initial-scale=1" />
    
          <title>Titulos del Documento</title>
    
          <link rel="stylesheet" href="css/archivo.css" />
          <link rel="stylesheet" href="css/normalize.css" />
          <link rel="icon" href="favicon.png" />
      </head>
      <body>
          <script src="js/script.js"></script>    
      </body>
    </html>

    Deja una respuesta

    Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

    Ingeniero técnico en informática, actualmente trabajo como desarrollador web y programador de videojuegos.

    https://twitter.com/neeonez