Cómo se usa html con archivos e imágenes

HTML es el acrónimo de HyperText Markup Language (Lenguaje de Marcado de Hipertexto) y es el lenguaje que se utiliza para crear las páginas web. Este lenguaje indica a los navegadores cómo deben mostrar el contenido de una página web.

Algo de historia

HTML nació públicamente en un documento llamado HTML Tags (Etiquetas HTML), publicado por primera vez en Internet por Tim Berners-Lee en 1991. En esta publicación se describen 22 etiquetas que mostraban un diseño inicial y relativamente simple de HTML. Varios de estos elementos se conservan en la actualidad. Otros se han dejado de usar, y muchos otros se han ido añadiendo con el paso de los años. De esta manera, podemos hablar de que han existido distintas versiones de HTML a lo largo de la historia de internet.

Rutas de enlace relativas y absolutas

Muchos de los que están comenzando a aprender el lenguaje de marcado de hipertexto enfrentan dificultades al especificar rutas a los archivos, porque la página o incluso la imagen no siempre estarán en la misma carpeta que el documento HTML actual.

Echemos un vistazo más de cerca a cómo establecer rutas correctamente, aprendamos a distinguir entre rutas relativas y absolutas y consideremos las diferencias entre la raíz del servidor web y la raíz de su disco.

Llamo su atención sobre el hecho de que, en la mayoría de los casos, las rutas de enlace absolutas se utilizan para páginas o archivos que se encuentran en otros recursos (no están ubicados en el mismo servidor que la página desde la que están vinculados).

Si la página o el archivo al que está vinculado se encuentra en el mismo servidor que la página desde la que está vinculado, entonces, por regla general, se utilizan vínculos relativos. La característica principal de los enlaces relativos es que se colocan en relación con la raíz del sitio o con respecto al documento HTML actual. Para mas información podemos acceder a este Curso online de HTML5.

Ruta relativa al documento actual

Primero, propongo comprender las rutas relativas al documento HTML actual. Independientemente de la jungla en la que se encuentre el archivo, establecerá la ruta relativa a este archivo; también utilizará este método en la tarea práctica.

En los ejemplos, cuando colocamos imágenes en nuestra página, indicamos la ruta en relación con el documento actual. Veamos un ejemplo similar, pero también proporcionemos un enlace a un documento html ubicado en la misma carpeta que el archivo en sí:

Ejemplo de conexión de archivos:

<! DOCTYPE html>
<html>
    <head> 
        <title> Un ejemplo de conexión de archivos a un documento HTML desde la misma carpeta <title>
    </head>
    <cuerpo>
        <img the src = "image.png"  alt = "alguna imagen la información" > <-! Coloque sus imágenes -> 
        <a the href = "page.html"> Elemento de contenido </a> <-! consulte la página ->
    </body>
</html>

Pasemos al siguiente ejemplo, digamos que tenemos un archivo index.html, en el mismo directorio hay una carpeta (directorio) llamada etc desde la cual necesitamos conectar una imagen y hacer un enlace al documento page.html:

<! DOCTYPE html>
<html>
    <head> 
        <title> Ejemplo de conexión de archivos desde el directorio secundario <title>
    </head>
    <cuerpo>
        <img the src = "etc / image.png"  alt = "alguna imagen la información" > <-! coloca la imagen de un directorio secundario -> 
        <a the href = "etc/page.html"> elemento de contenido </ a > <! - consulte la página del directorio secundario ->
    </body>
</html>

Preste atención a cómo indicamos la ruta a nuestros archivos: establecemos el nombre del directorio y, a través de una barra inclinada, indicamos el nombre del archivo que necesitamos. Este directorio es secundario en relación con el directorio actual y para conectar los archivos necesarios, bajamos un nivel (nombre_directorio / archivo_requerido ). Mas información relacionada con este apasiónate tema la podemos encontrar en el blog de Diego C Martin.