Utilizar HTML para crear un encabezado de página de inicio

Suscripción:

Para la creación de un encabezado de la página de inicio se requiere una cuenta que sea parte de una organización de ArcGIS Online. Consulte la Introducción para obtener más información.

Los administradores de una organización pueden personalizar el sitio web para presentar la información geográfica que es importante para su organización. Esto incluye una opción para crear un encabezado de la página de inicio utilizando HTML. Consulte información acerca de las demás opciones de configuración del sitio web en Acerca de la configuración del sitio web.

Acerca del encabezado

La página de inicio incluye un encabezado en la parte superior de la página que es de 960 píxeles de ancho por 180 píxeles de alto. Puede seleccionar una imagen para el área del encabezado, eligiendo una imagen predefinida o cargando un archivo desde el escritorio, o puede utilizar HTML para crear el contenido del encabezado. Consulta Personalizar la configuración general del sitio Web para obtener más información.

Su logotipo aparece en la imagen del encabezado. Si utiliza HTML para establecer el encabezado de la página de inicio, el logotipo no aparece (si no lo incluye en su HTML).

Sugerencia:

Si la organización está establecida en sólo SSL, se debe acceder a las referencias de imagen del HTML mediante HTTPS para que las imágenes aparezcan en el encabezado. Consulta Configurar los ajustes de seguridad para obtener más información.

HTML compatibles

A continuación se muestra una tabla de las etiquetas HTML que puede utilizar para crear un encabezado personalizado.

Etiqueta	Atributo
un/a	href, objetivo, estilo
img	src, ancho, altura, límite, alt, estilo
duración	estilo
tabla	ancho, altura, rellenado de celdas, espaciado de celdas, límite, estilo
div	estilo
fuente	tamaño, color, estilo
tr	altura, valign, alinear, estilo
td, th	altura, ancho, valign, alinear, colspan, rowspan, nowrap, estilo
b, strong, i, em, br, p, li, ul, tbody

Sugerencias para utilizar HTML

• Las etiquetas HTML no enumeradas en la tabla anterior no son compatibles y se filtrarán.
• Los protocolos admitidos para href y src son http y mailto.
• Las etiquetas se cierran de forma automática si no están cerradas.
• <>& se escapó de fuera de las etiquetas legales si no se escapó utilizando &lt; &gt; &amp; &quot.

Ejemplos

A continuación se muestran ejemplos de encabezados creados con HTML. Cada ejemplo incluye el código que se utilizó para crear el encabezado.

Página de inicio de un ejemplo que incluye un encabezado creado con HTML

El siguiente código incluye el HTML y CSS utilizados para crear el encabezado de una organización ambiental genérica:

<div style="width: 960px; font-family: futura, helvetica, arial; 
background: url(http://imagesite/generic_env.png); height: 180px">
<div style="width:680px; margin-left: 220px; margin-top: 60px; float: left;">
<span style="font-size:24px; color:#fdf77d;
 font-weight:bold; text-transform:uppercase; text-shadow: 2px 2px 2px #085a00;">
Generic Environment Organization</span><br/>
<p style="color:#ffffff; font-size:14px;">Lorem ipsum dolor sit amet,
 consectetur adipiscing elit. Donec ullamcorper lorem pulvinar libero ultricies.</p></div> </div>

Página de inicio de un ejemplo que incluye un encabezado creado con HTML

El siguiente código incluye el HTML y CSS que se utiliza para crear el encabezado de la página de inicio de un organismo público:

<div style="width: 960px; font-family: futura;
 background: url(http://imagesite/generic_gov.png); height: 180px">
<div style="margin-top: 120px; float: right; margin-right: 80px">
<a href="http://www.esri.com/industries/federal/index.html/" style="background: #65a9d7;
 background: -webkit-gradient(linear, left top, left bottom, from(#3e779d), to(#65a9d7));
 background: -webkit-linear-gradient(top, #3e779d, #65a9d7); 
background: -moz-linear-gradient(top, #3e779d, #65a9d7); 
background: -ms-linear-gradient(top, #3e779d, #65a9d7); 
background: -o-linear-gradient(top, #3e779d, #65a9d7);
border-bottom:#fff 1px solid; border-left: #fff 1px solid; padding-bottom: 7px;
 padding-left: 15px; padding-right: 15px; font-family: helvetica, arial, sans-serif;
 color: white; font-size: 14px; vertical-align: middle; 
border-top: #fff 1px solid; border-right: #fff 1px solid; text-decoration: none;
 padding-top: 7px; -moz-border-radius: 3px; -webkit-border-radius: 3px;
 border-radius: 3px; -moz-box-shadow: rgba(0,0,0,1) 0 1px 0;
 -webkit-box-shadow: rgba(0,0,0,1) 0 1px 0; box-shadow: rgba(0,0,0,1) 0 1px 0;
 text-shadow: rgba(0,0,0,.4) 0 1px 0" target="_blank">Government Home</a></div></div>