hideAmara.org has a cloud-base solution for your organization or team of subtitling collaborators that comes with a private workspace and many other features.
💡 Learn more about Amara Plus today!

< Return to Video

Enlaces internos HTML

  • 0:00 - 0:03
    Los enlaces son una gran manera de conectar
  • 0:03 - 0:05
    una página web con otra página web.
  • 0:05 - 0:07
    Pero también pueden conectar una parte de una página web
  • 0:07 - 0:09
    con otra parte de la misma página web,
  • 0:09 - 0:14
    especialmente en páginas web muy largas, como para una tabla de contenidos.
  • 0:14 - 0:17
    He añadido mucha información a esta página,
  • 0:17 - 0:20
    así que puedo darles información sobre la historia de la web,
  • 0:20 - 0:22
    y las historia de las versiones de HTML.
  • 0:22 - 0:26
    Pienso que toda esta información merece el uso de una tabla de contenidos.
  • 0:26 - 0:29
    Y ya empecé una aquí, sólo es una lista desordenada,
  • 0:29 - 0:33
    con una lista de elementos de cada uno de los títulos de las secciones.
  • 0:33 - 0:36
    Y quiero enlazar cada uno de esos títulos de las secciones,
  • 0:36 - 0:39
    de manera que cuando presionen el ratón en alguno de ellos, vayan a la parte de la página que corresponde.
  • 0:39 - 0:42
    Para hacer eso, voy a usar otra vez la etiqueta "a",
  • 0:42 - 0:45
    así que empezaré por poner este título
  • 0:45 - 0:49
    dentro del inicio y fin de la etiqueta "a".
  • 0:49 - 0:55
    Ahora, ¿qué debe ir en "href" de este enlace?
  • 0:55 - 0:58
    Bueno, debemos decirle al navegador de alguna manera
  • 0:58 - 1:00
    hacia dónde debe saltar en la página web.
  • 1:00 - 1:03
    Alguna manera de identificar de forma única esa parte de la página.
  • 1:03 - 1:06
    Si ya has aprendido de selectores de CSS,
  • 1:06 - 1:09
    de hecho has visto cómo hacer esto.
  • 1:09 - 1:14
    Podemos hacerlo añadiendo un atributo "id" a la etiqueta.
  • 1:14 - 1:19
    Vamos a desplazarnos hacia abajo y encontrar el encabezado.
  • 1:19 - 1:23
    Y vamos a poner el atributo "id" a este encabezado.
  • 1:23 - 1:25
    Así que voy a poner mi cursor en
  • 1:25 - 1:27
    voy a teclear id="
  • 1:27 - 1:30
    y poner un buen identificador que sea único,
  • 1:30 - 1:33
    como "web-history".
  • 1:33 - 1:36
    Ok, vamos a desplazarnos de vuelta al enlace.
  • 1:36 - 1:40
    Y ahora, para decirle al navegador que vaya a este enlace interno,
  • 1:40 - 1:42
    debemos empezar con el signo numeral (#),
  • 1:42 - 1:46
    y luego teclear exactamente el identificador que tecleamos abajo.
  • 1:46 - 1:48
    Ok, así que ahora...
  • 1:48 - 1:51
    Pausen esta guía paso a paso, y traten de presionar el ratón en el enlace.
  • 1:51 - 1:56
    Adelante, esperaré. "Clicky-clicky-clicky"
  • 1:56 - 2:00
    Ok.¿Vieron cómo se desplazó hasta esta sección?
  • 2:00 - 2:01
    Entonces ¡funciona!
  • 2:01 - 2:03
    Podemos añadir más enlaces como éste
  • 2:03 - 2:06
    poniendo atributos en cada encabezado,
  • 2:06 - 2:08
    y haciendo etiquetas "" que apunten a ellos.
  • 2:08 - 2:10
    Pero dejaré que ustedes traten de hacerlo.
  • 2:10 - 2:12
    Lo más importante que deben recordar es que los IDs (identificadores) deben ser únicos,
  • 2:12 - 2:15
    porque de otra manera el navegador no sabrá hacia dónde dirigirse.
  • 2:15 - 2:18
    Así que háganlos lindos y descriptivos.
Title:
Enlaces internos HTML
Video Language:
English
Duration:
02:19
Martha Isabel Soriano Ruiz edited Spanish, Mexican subtitles for HTML internal links Feb 26, 2016, 12:29 AM
Martha Isabel Soriano Ruiz edited Spanish, Mexican subtitles for HTML internal links Mar 5, 2015, 11:08 PM
Martha Isabel Soriano Ruiz edited Spanish, Mexican subtitles for HTML internal links Mar 4, 2015, 4:59 AM

Spanish, Mexican subtitles

Revisions

  • Revision 3 Edited
    Martha Isabel Soriano Ruiz Feb 26, 2016, 12:29 AM