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

Los administradores del portal de una organización pueden personalizar el sitio web para presentar la información geográfica que sea importante para la organización. Esto incluye una opción para crear un encabezado personalizado de la página de inicio utilizando un editor de texto con formato o pegando código HTML. Si deseas información acerca de otras opciones de configuración del sitio Web, consulta Acerca de configurar el 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. Puedes seleccionar una imagen para el área del encabezado, eligiendo una imagen predefinida o cargando un archivo desde el escritorio, o puedes crear un diseño personalizado utilizando texto enriquecido o HTML.

Si eliges la opción Diseño personalizado, verás un editor de texto enriquecido en el que puedes ubicar gráficos y texto en un formato WYSIWYG (lo que ves es lo que obtienes). Elimina el contenido de encabezado existente y cámbialo por el tuyo propio. Para una mayor flexibilidad, haz clic en el botón Ver fuente HTML en el editor, que te permite escribir o pegar tu propio código HTML.

Si solo seleccionas una imagen para el encabezado, tu logotipo aparecerá en la imagen del encabezado. Si utilizas el diseño personalizado para establecer el encabezado de la página de inicio, el logotipo no aparece (si no lo incluyes en el diseño).

Sugerencia:

Si tu organización está definida como solo SSL, el acceso a las referencias a imágenes de tu diseño se deberá hacer a través de HTTPS para que las imágenes aparezcan en tu banner. Para obtener más información, consulta Configurar los ajustes de seguridad.

HTML compatibles

A continuación se muestra una tabla de las etiquetas HTML que puedes 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. Necesitarás cambiar las URL de la imagen por las tuyas.

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>

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>