blogdown: Creación de sitios web con R Markdown

B.1 HTML

HTML significa Hyper Text Markup Language, y es el lenguaje detrás de la mayoría de las páginas web que usted ve. Puede usar el menú Ver -> Ver fuente o el menú contextual Ver fuente de página para ver la fuente HTML completa de una página web en su navegador. Todos los elementos en una página están representados por etiquetas HTML. Por ejemplo, la etiqueta <p> representa párrafos, y <img> representa imágenes.

Lo bueno de HTML es que el lenguaje tiene solo un número limitado de etiquetas, y el número no es muy grande (especialmente el número de etiquetas comúnmente utilizadas). Esto significa que hay esperanza de que pueda dominar este idioma de manera completa y rápida.

La mayoría de las etiquetas HTML aparecen en pares, con una etiqueta de apertura y una etiqueta de cierre, por ejemplo, <p></p>. Usted escribe el contenido entre las etiquetas de apertura y cierre, por ejemplo, <p>Este es un párrafo.</ P>. Hay algunas excepciones, como la etiqueta <img>, que se puede cerrar con una barra inclinada / en la etiqueta de apertura, por ejemplo, <img src="foo.png"/>. Puede especificar los atributos de un elemento en la etiqueta de apertura usando la sintaxis name=value (algunos atributos no requieren value).

Los documentos HTML a menudo tienen la extensión de nombre de archivo .html (o .htm). A continuación se muestra una estructura general de un documento HTML:

<html>

  <head>
  </head>
  
  <body>
  </body>

</html>

Básicamente, un documento HTML consta de una sección head y body. Puede especificar los metadatos e incluir archivos como archivos CSS en la sección head. Normalmente, la sección head no está visible en una página web. Es la sección de ‘cuerpo’ que mantiene el contenido para mostrarse a un lector. A continuación se muestra un documento de ejemplo un poco más rico:

<!DOCTYPE html>
<html>

  <head>
    <meta charset="utf-8" />
    
    <title>Your Page Title</title>
    
    <link rel="stylesheet" href="/css/style.css" />
  </head>
  
  <body>
    <h1>A First-level Heading</h1>
    
    <p>A paragraph.</p>
    
    <img src="/images/foo.png" alt="A nice image" />
    
    <ul>
      <li>An item.</li>
      <li>Another item.</li>
      <li>Yet another item.</li>
    </ul>
    
    <script src="/js/bar.js"></script>
  </body>

</html>

En la cabecera, declaramos que la codificación de caracteres de esta página es UTF-8 a través de una etiqueta <meta>, especificamos el título mediante la etiqueta <title> e incluimos una hoja de estilo mediante una etiqueta <link>.

El cuerpo contiene un encabezado de sección de primer nivel <h1>,⁴¹ Un párrafo <p>, una imagen <img>, una lista desordenada <ul> con tres elementos de lista <li>, e incluye un archivo JavaScript al final a través de <script>.

Hay tutoriales mucho mejores en HTML que esta sección, como los que ofrecen MDN y w3schools.com, por lo que no vamos a hacer de esta sección un tutorial completo. En cambio, solo queremos brindar algunos consejos sobre HTML:

Puede validar su código HTML a través de este servicio: https://validator.w3.org. Este validador señalará posibles problemas de su código HTML. En realidad, también funciona para documentos XML y SVG.
Entre todos los atributos de HTML, las rutas de archivos (el atributo src de algunas etiquetas como <img>) y los enlaces (el atributo href de la etiqueta <a>) pueden ser las más confusas para los principiantes. Las rutas y los enlaces pueden ser relativos o absolutos, y pueden venir con o sin el protocolo y el dominio. Tiene que entender a qué apunta exactamente un enlace o una ruta. Un enlace completo tiene la forma http://www.example.com/foo/bar.ext, donde http especifica el protocolo (puede tratarse de otros protocolos como https o ftp), www.example.com es el dominio, y foo/bar.ext es el archivo debajo del directorio raíz del sitio web.
- Si se refiere a recursos en el mismo sitio web (el mismo protocolo y dominio), le recomendamos que omita el protocolo y los nombres de dominio, para que los enlaces continúen funcionando incluso si cambia el protocolo o dominio. Por ejemplo, un enlace <a href="/hi/there.html"> en una página http://example.com/foo/ hace referencia a http://example.com/hi/there.html. No importa si cambia http a https, o example.com a another-domain.com.
- Dentro del mismo sitio web, un enlace o ruta puede ser relativa o absoluta. El significado de una ruta absoluta no cambia sin importar dónde se coloca el archivo HTML actual, pero el significado de una ruta relativa depende de la ubicación del archivo HTML actual. Supongamos que está viendo la página example.com/hi/there.html:
- Una ruta absoluta /foo/bar.ext siempre significa example.com/foo/bar.ext. La barra diagonal significa el directorio raíz del sitio web.
- Una ruta relativa ../images/foo.png significa example.com/images/foo.png (.. significa subir un nivel). Sin embargo, si el archivo HTML there.html se mueve a example.com/hey/again/there.html, esta ruta en there.html se referirá a example.com/hey/images/foo.png.
- Cuando decida si usar rutas relativas o absolutas, aquí está la regla general: si no va a mover los recursos referidos o vinculados de un subpath a otro (por ejemplo, de example.com/foo/ a example.com/bar/), pero solo mueve las páginas HTML que usan estos recursos, usa rutas absolutas; Si desea cambiar el subpaso de la URL de su sitio web, pero las ubicaciones relativas de los archivos HTML y los recursos que utilizan no cambian, puede usar enlaces relativos (por ejemplo, puede mover todo el sitio web de example.com/ a example.com/foo/).
- Si los conceptos anteriores parecen demasiado complicados, una mejor manera es pensar detenidamente sobre la estructura de su sitio web y evitar mover archivos, o usar reglas de redireccionamientos si son compatibles (como los redireccionamientos 301 o 302).
- Si enlaza a un sitio web o página web diferente, debe incluir el dominio en el enlace, pero puede no ser necesario incluir el protocolo, por ejemplo, //test.example.com/foo.css es un ruta válida. El protocolo real de esta ruta coincide con el protocolo de la página actual, por ejemplo, si la página actual es https://example.com/, este enlace significa https://test.example.com/foo.css. Puede ser beneficioso omitir el protocolo porque los recursos HTTP no se pueden incrustar en páginas servidas a través de HTTPS (por razones de seguridad), por ejemplo, una imagen en http://example.com/foo.png no se puede incrustar en una página https://example.com/hi.html via <img src="http://example.com/foo.png"/>, pero <img src="//example.com/foo.png"/> funcionará si se puede acceder a la imagen a través de HTTPS, es decir, https://example.com/foo.png. El principal inconveniente de no incluir el protocolo es que tales enlaces y rutas no funcionan si abre el archivo HTML localmente sin usar un servidor web, por ejemplo, solo haga doble clic en el archivo HTML en su buscador de archivos y muéstrelo en el navegador.⁴²
- Un error muy común que las personas cometen es poner un enlace sin las dobles barras delanteras delante del dominio. Puede pensar que www.example.com es un enlace válido. ¡No lo es! Al menos no se vincula al sitio web al que desea vincularse. Funciona cuando lo escribe en la barra de direcciones de su navegador porque su navegador normalmente lo autocompletará en http://www.example.com. Sin embargo, si escribe un enlace <a href="www.example.com">Vea este enlace</a>, tendrá problemas. El navegador interpretará esto como un enlace relativo, y es relativo a la URL de la página web actual, por ejemplo, si actualmente está viendo http://yihui.name/cn/, el enlace www.example.com en realidad significa http://yihui.name/cn/www.example.com! Ahora debería conocer el texto de Markdown [Link](www.example.com) suele ser un error, a menos que realmente quiera vincular un subdirectorio de la página actual o un archivo con literalmente el nombre www.example.com.

Hay seis niveles posibles de h1, h2, …, a h6.↩
Eso es porque sin un servidor web, un archivo HTML se ve a través del protocolo archivo. Por ejemplo, puede ver una URL del formulario file://ruta/al/archivo.html en la barra de direcciones de su navegador. La ruta //example.com/foo.png se interpretará como file://example.com/foo.png, que es poco probable que exista como un archivo local en su computadora.↩