Marquesina en Pagina Web
¿Que es una marquesina?
<MARQUEE WIDTH="80%" BEHAVIOR="alternate"> <IMG SRC="imagen.gif"> </MARQUEE>
Las marquesinas son texto en movimiento. Ya funciona con ambos navegadores (hasta hace poco Netscape no lo implementaba, el 7 ya lo hace).
La etiqueta es <MARQUEE>, un texto a desplazar y su cierre </MARQUEE>.
¿Como ponerla en una pagina web ?
<BODY>
<MARQUEE> Aquí pongo el texto </MARQUEE> </BODY> |
Así vemos los que tiene por defecto y que son: ocupa todo el ancho del cuadro, tiene la altura de la línea de texto y va de derecha a izquierda.
Podemos poner varias frases si colocamos <P> o <BR> dentro.
<BODY>
<MARQUEE> Aquí pongo un texto <P> Y aquí otro </MARQUEE> </BODY> |
Y aquí otro
|
Vamos a empezar a meter atributos y a cambiar un poco la cosa.
Empezamos con las medidas que son las viejas conocidas WIDTH y HEIGHT que toman valores en píxeles o en porcentajes de pantalla.
<BODY>
<MARQUEE WIDTH=70% HEIGHT=40> Aquí pongo el texto </MARQUEE> </BODY> |
Que se verá con 70% de ancho (del cuadro azul que para los efectos es como si fuera la pantalla completa) y 40 px de alto.
El color de fondo quedará curioso. Echamos mano del atributo BGCOLOR.
<BODY>
<MARQUEE BGCOLOR=#7070ff> Aquí pongo el texto </MARQUEE> </BODY> |
No funciona con imágenes como fondo.
No he conseguido alinear el texto que rodea al cuadro de marquesina con la vieja ALIGN, que toma valores de top, bottom, middle, left y right. Según todos lo manuales debería funcionar como lo hacían en la etiqueta <IMG> pero no me funciona con Explorer 6 y con Netscape 7 hace cosas raras.
El atributo BEHAVIOR es el que da más juego, su valor por defecto es scroll que significa que aparece por la derecha, se va a la izquierda y de forma continuada. Si le damos el valor slide y alternate tenemos:
<BODY>
<MARQUEE BEHAVIOR=slide> Aquí pongo el texto </MARQUEE> </BODY> |
Para verlo funcionar actualiza la página ya que al pararse y funcionar sólo una vez, no lo vemos.
<BODY>
<MARQUEE BEHAVIOR=alternate> Aquí pongo el texto </MARQUEE> </BODY> |
DIRECTION servirá para definir hacia donde mando el texto que, por defecto, va hacia la izquierda. Yo puedo mandarlo a la derecha así:
<BODY>
<MARQUEE DIRECTION=right> Aquí pongo el texto </MARQUEE> </BODY> |
O hacia arriba o abajo con down y up.
<BODY>
<MARQUEE HEIGHT=50 DIRECTION=up> Aquí pongo el texto </MARQUEE> </BODY> |
La velocidad de desplazamiento varía con SCROLLAMOUNT, que marca los saltos según el valor numérico; y SCROOLDELAY que determina el retraso en el movimiento en milisegundos. Veámoslo:
<BODY>
<MARQUEE SCROLLAMOUNT=40> Aquí pongo el texto </MARQUEE> </BODY> |
Mareante...
<BODY>
<MARQUEE SCROLLDELAY=1000> Aquí pongo el texto </MARQUEE> </BODY> |
Y este desespera (le he puesto 1000, que es un segundo).
El atributo LOOP (indefinido por defecto, como ya hemos visto), define el número de veces que vamos a ver moverse el texto.
<BODY>
<MARQUEE LOOP=2> Aquí pongo el texto </MARQUEE> </BODY> |
Tendremos que actualizar la página.
Los atributos HSPACE Y VSPACE los conocemos, definirían el espacio horizontal y vertical del texto fuera de la marquesina.
<BODY>
<MARQUEE BGCOLOR=yellow VSPACE=20> Aquí pongo el texto </MARQUEE> Otro texto. </BODY> |
Otro texto
|
Ni que decir tiene que podemos aplicar otras etiquetas como la de centrado, por ejemplo. Le pondremos color para que se distinga del fondo.
<BODY>
<CENTER> <MARQUEE WIDTH=50% BGCOLOR=#ffff00> Aquí pongo el texto </MARQUEE> </CENTER> </BODY> |
Mira esto que bonito que queda con la etiqueta <FONT>:
<BODY>
<CENTER> <MARQUEE WIDTH=70% BGCOLOR=#ffff00> <FONT FACE=arial COLOR=red SIZE=5> Aquí pongo el texto </FONT> </MARQUEE> </CENTER> </BODY> |
También la podemos meter en una tabla (ya se verán más adelante).
O meter la tabla en la marquesina:
Y podremos poner imágenes en vez de texto.
<MARQUEE WIDTH="80%" BEHAVIOR="alternate"> <IMG SRC="imagen.gif"> </MARQUEE>
Los pasos son los siguientes:
Abrir bloc de notas copiar los diferentes códigos que tienes ahí de pendiendo de lo que quieres
Las secciones son las partes temáticas en las que se puede dividir el contenido de una página web.
En HTML 4 / XHTML 1 la única etiqueta para definir agrupaciones de contenido era prácticamente la etiqueta <div>. Por ello, cualquier página de tamaño medio acababa teniendo muchos elementos <div>, en algunos casos para organizar el contenido de la página, pero también para aplicar estilos de carácter decorativo. El código fuente resultaba así difícil de entender y mantener.
La imagen siguiente muestra una página típica HTML 4 / XHTML 1, en la que para organizar las diferentes partes de la página se tenían que crear varias divisiones <div> y distinguirlas mediante clases para darles estilos diferenciados.
En HTML 5 se ha querido mejorar esa situación introduciendo varias etiquetas para definir diferentes tipos de secciones: <article>, <section>, <nav>, <aside>, <header> y <footer> (y también la etiqueta <main>, aunque esta no se considere una etiqueta de sección sino de bloque).
La página del ejemplo anterior se convertiría así en:
Al utilizar etiquetas específicas para tipos de contenido específico, se mejora la legibilidad y facilidad de reutilización tanto del código HTML como de las hojas de estilo.
La etiqueta <div> se mantiene en la recomendación HTML 5, pero reservada ya al resto de agrupaciones no consideradas por las etiquetas anteriores, es decir, con fines principalmente decorativos.
Nota: Para simplificar las ilustraciones, en los ejemplos del resto de esta página no se ha dibujado la etiqueta <body>.
Secciones y esquema (outline) del documento
En HTML 4 la "jerarquía" de los apartados de una página web venía determinada por las etiquetas de título (<h1>, ..., <h6>).
Como se comenta en la lección sobre esquemas, la recomendación HTML 5 redefinió el concepto de esquema (en inglés, outline) de una página web. En HTML 5 las secciones de un documento ya no se deberían definir mediante las etiquetas de título, sino mediante las cuatro etiquetas <article>, <section>, <nav> y <aside>.
Eso quiere decir, por ejemplo, que HTML 5 permite que en esas cuatro etiquetas se incluyan elementos <header>, <footer> o títulos <h1>, ..., <h6>, que se deben entender como encabezados, pies o página o títulos de la sección en el que se incluyen, independientes de la página en su conjunto.
Como actualmente (noviembre de 2017), ningún navegador implementa el concepto de esquema, la recomendación HTML 5.1 pide que se sigan utilizando las etiquetas de título (<h1>, ..., <h6>) para definir las secciones de un documento (véase el aviso en la recomendación)
Actualmente (noviembre de 2017), unicamente el validador del W3C incluye algoritmos para analizar el esquema (outline) de una página web propuesto en la recomendación HTML 5.
Cuerpo del documento: <body>
La etiqueta <body> abarca todo el contenido de la página web que se visualiza en el navegador. Por ello, una página web sólo puede tener un elemento <body>.
Encabezamiento: <header>
La etiqueta <header> está pensada para agrupar el contenido inicial de una página web. Puede contener únicamente los elementos que aparecen en las páginas de un sitio (el logotipo y un menú general, por ejemplo) o incluir también elementos particulares de la página (el título principal <h1> de la página, enlaces de navegación dentro de la página, texto de introducción, por ejemplo).
El elemento <header> puede estar incluido en <body> y entonces se entiende que es el encabezado de la página en su conjunto, pero también se puede incluir en <article>, <section>, <nav> y <aside> y entonces se entiende que es el encabezado del elemento que lo contiene.
La imagen siguiente muestra una página con varios elementos <header>:
Sección: <section>
La etiqueta <section> está pensada para agrupar los apartados del contenido principal del documento. Normalmente, las secciones <section> empiezan con un título (<h1>, <h2>, etc.) que hace referencia al tema tratado en la sección.
Un elemento <section> puede contener elementos <section>. Las secciones interiores se entienden como subsecciones de la sección exterior.
Un elemento <section> puede contener elementos <article> y viceversa.
Las etiquetas <section> y <article> son similares. La diferencia entre ellas es que <article> es para partes que forman una unidad en sí mismas y <section> es para partes de una unidad mayor.
Artículo: <article>
La etiqueta <article> está pensada para agrupar el contenido de la página que forma una unidad en sí misma desde el punto de vista temático. Es decir, que un artículo debería poder publicarse y leerse como documento independiente, aunque una página puede estar formada por varios artículos de temática relacionada o no.
Un elemento <article> puede contener otros elementos <article> que están relacionados con el contenido del <article> que los contiene.
Un elemento <article> puede contener elementos <section> y viceversa.
Las etiquetas <article> y <section> son similares. La diferencia entre ellas es que <article> es para partes que forman una unidad en sí mismas y <section> es para partes de una unidad mayor.
Si la página trata de un único tema y se va a utilizar un único elemento <article>, es preferible utilizar la etiqueta <main>.
Títulos: <h1> <h2> <h3> <h4> <h5> <h6>
Las etiquetas <h1>, <h2>, <h3>, <h4>, <h5> y <h6> están pensadas para marcar los títulos y subtítulos de los apartados de un documento.
La hoja de estilo por omisión de los navegadores suele mostrar los títulos en tamaño cada vez más pequeño (incluso más pequeño que el tamaño de los párrafos <p>), en negrita y con márgenes mayores que los los párrafos <p>.
<h1>Título 1</h1>
<h2>Título 2</h2>
<h3>Título 3</h3>
<h4>Título 4</h4>
<h5>Título 5</h5>
<h6>Título 6</h6>
En principio, los títulos <h1>, ..., <h6> se deben utilizar de forma jerárquica, es decir, no saltándose niveles y utilizando títulos del mismo nivel para contenido de la misma categoría (apartados principales, subapartados, etc.).
- <h1> se suele reservar para el título principal del documento (no confundir con la etiqueta <title>, que corresponde al texto de la pestaña del navegador en la que se muestra la página),
- <h2> para los títulos de los apartados del documento,
- <h3> para los subapartados de cada apartado,
- y así sucesivamente.
Hasta que los navegadores implementen el concepto de esquema (outline), los títulos <h1>, ..., <h6> definen de forma implícita las secciones anidadas en el esquema (outline) de la página web, como muestra el ejemplo siguiente, en el que las secciones implícitas están marcadas con un trazo discontínuo.
Si algún día los navegadores implementan el concepto de esquema (outline), las etiquetas de secciones <article>, <section>, <nav> y <aside>también crearán secciones en el esquema de la página web y las etiquetas de título se interpretarán teniendo en cuenta la sección en que están incluidas. Así, el documento siguiente será equivalente al anterior.
Lateral: <aside>
La etiqueta <aside> está pensada para agrupar contenido secundario y tangencial al contenido al que acompaña (por ejemplo, un bloque de anuncios, un grupo de enlaces externos relacionados, una cita del texto). Normalmente se suele mostrar en los lados del documento.
El elemento <aside> puede estar incluido en <body> y entonces se entiende que se trata de contenido secundario con respecto a la página en su conjunto, pero también se puede incluir en <article> o <section> y entonces se entiende que se rata de contenido secundario con respecto al elemento que lo contiene.
La imagen siguiente muestra una página con varios elementos <aside>:
Dirección <address>
La etiqueta <address> está pensada para contener información de contacto del autor de la información (dirección de correo, teléfono, etc.), pero no otro tipo de información. Normalmente se incluye en el pie de página <footer> general de <body> o en el pie de página <footer> de un <article>.
La hoja de estilo por omisión de los navegadores suele mostrar el bloque de dirección <address> en cursiva.
<footer>
<address>
Autor: Bartolomé Sintes Marco<br />
correo: bartolome.sintes@example.com
</address>
<p>Última modificación: 28 de noviembre de 2017</p>
</footer>
Comentarios
Publicar un comentario