Consejos sobre marcos HTML para problemas comunes

click fraud protection

Como diseñadores web, todos queremos trabajar con las últimas y mejores tecnologías. A veces, sin embargo, nos quedamos atascados trabajando en páginas heredadas que, por una razón u otra, no se pueden actualizar a los estándares web actuales. Puede ver esto en ciertas aplicaciones de software que pueden haber sido creadas a medida para empresas hace muchos años. Si tiene la tarea de trabajar en esos sitios, sin duda se ensuciará las manos trabajando con algún código antiguo. ¡Incluso puede ver uno o dos allí!

El elemento HTML era un accesorio de diseño de páginas web hace algunos años, pero es una característica que rara vez ve en los sitios en estos días, y por una buena razón. Veamos dónde está el soporte hoy y qué necesita saber si se ve obligado a trabajar con marcos en un sitio web heredado.

Soporte HTML5 para marcos

LaHTML5. Esto significa que si está codificando una página web usando la última versión del lenguaje, no puede usar marcos HTML en su documento. Si quieres usar unHTML 4.01 o XHTML para tu tipo de documento de la página.

instagram viewer

Debido a que los marcos no son compatibles con HTML5, no utilizará este elemento en un sitio recién creado. Esto es algo que solo encontrará en los sitios heredados antes mencionados.

No confundirse con iFrames

El HTML

Orientación a marcos HTML

Bien, habiendo dicho todo lo relacionado con la obsolescencia de los marcos, ¿qué sucede si necesitas trabajar con estas viejas piezas de HTML?

Si está usando un tipo de documento más antiguo y desea usar marcos HTML, existen algunos problemas comunes que debe conocer. Uno de esos problemas es conseguir que los enlaces se abran en el correcto marco. A esto se le llama focalización. Le da a sus etiquetas de anclaje un "objetivo"para abrir sus enlaces en. El objetivo suele ser el nombre del marco.


En el conjunto de marcos anterior, hay dos marcos, el primero se llama "nav" y el segundo se llama "principal". Podemos imaginar que el marco de navegación (frame1.html) es navegación y todos los enlaces dentro de él deberían abrirse dentro del marco principal (frame2.html).

Para hacer esto, le daría a los enlaces en frame1 el destino de "principal". target = "principal">. Pero, ¿qué sucede si no desea agregar el objetivo a cada enlace en su página de navegación? Puede establecer un destino predeterminado en el HEAD de su documento. A esto se le llama el objetivo base. Agregarías la línea

Marcos y no marcos

Una de las secciones más mal utilizadas de la etiqueta de marcos es noframes. Esta etiqueta permite a las personas con navegadores incompatibles con marcos ver su página (esto no funciona para HTML5, solo para navegadores realmente antiguos sin soporte de marcos, por lo que no puede intentar meter esto en HTML5 para hacerlo trabaja. Buen intento, pero sin suerte), y ese es el objetivo final, ¿no?

En un conjunto de marcos típico, el HTML se ve así:


Esto creará una página con dos marcos, la parte superior tiene 40 píxeles de alto y la parte inferior es el resto de la página. Esto sería un buen conjunto de marcos de la barra de navegación superior con la marca y la navegación en el marco de 40 píxeles.

Sin embargo, si uno de sus espectadores llega a su sitio en un navegador que no es compatible con marcos, obtiene una página en blanco. Las posibilidades de que regresen a su sitio son bastante escasas, y para que puedan verlo, debe agregar cuatro líneas más de HTML:


Este sitio está enmarcado, pero puedes ver una versión sin marco.

Debido a que está apuntando a la parte de contenido de su conjunto de marcos (frame2.html) en la parte de noframes de la página, su sitio se vuelve accesible.

Tenga en cuenta que, si bien puede estar utilizando la última versión de tu navegador favorito, es posible que su audiencia no desee descargar continuamente el software más reciente. Es posible que su máquina no lo admita o que no tengan espacio para instalar un programa de más de 20 Meg en su disco duro. Agregar cuatro líneas de HTML es una solución simple.

instagram story viewer