Desarrollo Web HMTL

Introducción a HMTL

Ruben RG

“Lenguajes” para Frontend

  • HTML: Estructura, soporte o esqueleto de documentos web
  • CSS: Diseño y presentación del os elementos del documento web
  • JavaScript: funcionalidad y dinamismo de documentos web y sus elementos

HTML, ¿es un lenguaje de programación?

HyperText Markup Language
Lenguaje de etiquetas de hipertexto

XML -> HTML -> XHTML

XML: Extensible Markup Language (Lenguaje de Marcado Extensible) <- W3C

<message>
    <warning>
         Hola, mundo
    </warning>
    <extradata />
</message>

XHTML

HTML

¿HTML 5 y HTML 4?

URL

Uniform Resource Locator (Localizador de Recursos Uniforme). Una URL no es más que una dirección que es dada a un recurso único en la Web.

En teoría, cada URL válida apunta a un único recurso. Dichos recursos pueden ser páginas HTML, documentos CSS, imágenes, etc. 

En la práctica, hay algunas excepciones, siendo la más común una URL apuntando a un recurso que ya no existe o que ha sido movido. Como el recurso representado por la URL y la URL en si son manejadas por el servidor Web, depende del dueño del servidor web manejar ese recurso y su
URL asociada adecuadamente.

URL Absolutas y Relativas

Las partes requeridas de una URL dependen del contexto en el que se utiliza la URL. 

En la barra de direcciones del navegador, una URL no tiene ningún contexto, por lo que debe proporcionar una URL completa (o absoluta). No necesita incluir el protocolo (el navegador usa HTTP de manera predeterminada) o el puerto (que solo se requiere cuando el servidor web de destino está utilizando algún puerto inusual), pero todas las otras partes de la URL son necesarias.

Cuando se usa una URL dentro de un documento, como en una página HTML, las cosas son un poco diferentes. Debido a que el navegador ya tiene la propia URL del documento, puede usar esta información para completar las partes faltantes de cualquier URL disponible dentro de ese documento. Podemos diferenciar entre una URL absoluta y una URL relativa mirando solo la parte de ruta de la URL. Si la parte de ruta de la URL comienza con el carácter “/”, el navegador buscará ese
recurso desde la raíz superior del servidor, sin referencia al contexto dado por el
documento actual.

URL Absolutas

URL Completa https://developer.mozilla.org/es/docs/Learn
Protocolo implícito//developer.mozilla.org/es/docs/LearnEn este caso, el navegador llamará a esa URL con el mismo protocolo que el utilizado para cargar el documento que aloja esa URL.
Nombre de dominio implícito/es/docs/LearnEste es el caso de uso más común para una URL absoluta dentro de un documento HTML. El navegador utilizará el mismo protocolo y el mismo nombre de dominio que el utilizado para cargar el documento que aloja esa URL. Note: no es posible omitir el nombre de dominio sin omitir también el protocolo..

URL Relativas

Para comprender mejor los siguientes ejemplos, supongamos que las URL se invocan desde el documento ubicado en la siguiente URL: https://developer.mozilla.org/es/docs/Learn

Sub-recursosSkills/Infrastructure/Understanding_URLsDebido a que la URL no se inicia con /el navegador intentará encontrar el documento en un subdirectorio del que contiene el recurso actual. Entonces, en este ejemplo, realmente queremos llegar a esta URL: https://developer.mozilla.org/es/docs/Learn/Skills/Infrastructure/Understanding_URLs.
Volviendo en el árbol de directorios../CSS/displayEn este caso, usamos el ../ convención de escritura, heredada del mundo del sistema de archivos UNIX, para decirle al navegador que queremos subir desde un directorio. Aquí queremos
llegar a esta URL:
https://developer.mozilla.org/es/docs/Learn/../CSS/display,
que se puede simplificar a:
https://developer.mozilla.org/es/docs/CSS/display.

URL Semánticas

Las URL semánticas usan palabras con un significado inherente que cualquier persona puede entender, independientemente de sus conocimientos técnicos.

La semántica lingüística es irrelevante para las computadoras. Probablemente has visto URL que parecen mashups de caracteres aleatorios. Pero hay muchas ventajas en la creación de URL legibles por humanos:

  • Es más fácil para ti manipularlos.
  • Aclara las cosas para los usuarios en términos de dónde están, qué están haciendo, qué están leyendo o interactuando en la Web.
  • Algunos motores de búsqueda pueden usar esa semántica para mejorar la clasificación de las páginas asociadas.