Puede utilizar HTML en el portal de ArcGIS Enterprise cuando se incluye un editor de texto enriquecido, por ejemplo, en las páginas de elementos, las descripciones de grupos, los mapas emergentes y las aplicaciones configurables.
Etiquetas y atributos HTML
A continuación se muestra una tabla de las etiquetas y los atributos HTML compatibles que puede utilizar.
| Etiqueta | Atributo |
|---|---|
a | href, style |
abbr | title |
article | style |
aside | style |
audio | autoplay, controls, loop, muted, preload |
b, strong, i, em, u, ul, ol, li, tbody, br, hr | |
blockquote | style |
code | style |
dd, dl, dt | style |
del | style |
details | style, open |
div | style, align, aria-label, aria-hidden |
figcaption | style |
figure | style |
font | size, color, style |
footer | style |
h1, h2, h3, h4, h5, h6 | style |
header | style |
img | src, width, height, border, alt, style |
main | style |
mark | style |
nav | style |
p | style |
pre | style |
section | style |
source | media, src, type |
span | style, aria-label, aria-hidden |
sub | style |
summary | style |
sup | style |
table | width, height, cellpadding, cellspacing, border, style |
| td, th | height, width, valign, align, colspan, rowspan, nowrap, style |
time | style |
tr | height, valign, align, style |
video | autoplay, controls, height, loop, muted, poster, preload, width |
Consideraciones sobre HTML
Tenga en cuenta lo siguiente:
- Las etiquetas HTML no enumeradas en la tabla anterior no son compatibles y se filtrarán.
- Los protocolos admitidos para href y src son https, http, tel y mailto.
- Las etiquetas se cierran de forma automática si no están cerradas.
- <>&"s usan símbolos de escape fuera de las etiquetas de escape si no lo han hecho con <>&".
- Los vínculos UNC no son compatibles.
- Cuando se usa una etiqueta a, la dirección URL de destino href se abre siempre en una nueva pestaña del navegador.
Propiedades de CSS
En las tablas siguientes se muestran las propiedades de CSS admitidas.
Nota:
ArcGIS Enterprise solo admite CSS en línea. La hoja CSS debe estar definida dentro del atributo de estilo.
Propiedades de fondo
A continuación se incluye una tabla de las propiedades de fondo admitidas.
| Propiedades | ||
|---|---|---|
background | background-color | background-position |
background-attachment | background-image | background-repeat |
background-clip | background-origin | background-size |
Propiedades de borde
A continuación se incluye una tabla de las propiedades de borde admitidas.
| Propiedades | ||
|---|---|---|
border | border-image-repeat | border-right-style |
border-bottom | border-image-slice | border-right-width |
border-bottom-color | border-image-source | border-spacing |
border-bottom-left-radius | border-image-width | border-style |
border-bottom-right-radius | border-left | border-top |
border-bottom-style | border-left-color | border-top-color |
border-bottom-width | border-left-style | border-top-left-radius |
border-collapse | border-left-width | border-top-right-radius |
border-color | border-radius | border-top-style |
border-image | border-right | border-top-width |
border-image-outset | border-right-color | border-width |
Propiedades de cuadro
A continuación se incluye una tabla de las propiedades de cuadro admitidas.
| Propiedades | ||
|---|---|---|
box-decoration-break | box-sizing | box-suppress |
box-shadow | box-snap | |
Propiedades de cortes
A continuación se incluye una tabla de las propiedades de corte admitidas.
| Propiedades | ||
|---|---|---|
break-after | break-before | break-inside |
Propiedades de visualización
A continuación se incluye una tabla de las propiedades de visualización admitidas.
| Propiedades | |||
|---|---|---|---|
display | display-inside | display-list | display-outside |
Propiedades flex
A continuación se incluye una tabla de las propiedades flex admitidas.
| Propiedades | |||
|---|---|---|---|
flex | flex-direction | flex-grow | flex-wrap |
flex-basis | flex-flow | flex-shrink | |
Propiedades de fuente
A continuación se incluye una tabla de las propiedades de fuente admitidas.
| Propiedades | ||
|---|---|---|
font | font-size-adjust | font-variant-caps |
font-family | font-stretch | font-variant-east-asian |
font-feature-settings | font-style | font-variant-ligatures |
font-kerning | font-synthesis | font-variant-numeric |
font-language-override | font-variant | font-variant-position |
font-size | font-variant-alternates | font-weight |
Propiedades de cuadrícula
A continuación se incluye una tabla de las propiedades de cuadrícula admitidas.
| Propiedades | ||
|---|---|---|
grid | grid-column | grid-row-start |
grid-area | grid-column-end | grid-template |
grid-auto-columns | grid-column-start | grid-template-areas |
grid-auto-flow | grid-row | grid-template-columns |
grid-auto-rows | grid-row-end | grid-template-rows |
Propiedades de justificación
A continuación se incluye una tabla de las propiedades de justificación admitidas.
| Propiedades | ||
|---|---|---|
justify-content | justify-items | justify-self |
Propiedades de lista
A continuación se incluye una tabla de las propiedades de lista admitidas.
| Propiedades | |||
|---|---|---|---|
list-style | list-style-image | list-style-position | list-style-type |
Propiedades de margen
A continuación se incluye una tabla de las propiedades de margen admitidas.
| Propiedades | ||
|---|---|---|
margin | margin-left | margin-top |
margin-bottom | margin-right | |
Propiedades de relleno
A continuación se incluye una tabla de las propiedades de relleno admitidas.
| Propiedades | ||
|---|---|---|
padding | padding-left | padding-top |
padding-bottom | padding-right | |
Propiedades de texto
A continuación se incluye una tabla de las propiedades de texto admitidas.
| Propiedades | |
|---|---|
text-align | text-emphasis-style |
text-align-last | text-height |
text-combine-upright | text-indent |
text-decoration | text-justify |
text-decoration-color | text-orientation |
text-decoration-line | text-overflow |
text-decoration-skip | text-shadow |
text-decoration-style | text-space-collapse |
text-emphasis | text-transform |
text-emphasis-color | text-underline-position |
text-emphasis-position | text-wrap |
Propiedades de palabra
A continuación se incluye una tabla de las propiedades de palabra admitidas.
| Propiedades | ||
|---|---|---|
word-break | word-spacing | word-wrap |
Otras propiedades
A continuación se incluye una tabla de otras propiedades de CSS admitidas.
| Propiedades | ||
|---|---|---|
align-items | gap | max-width |
align-self | height | min-height |
clear | letter-spacing | min-width |
color | lighting-color | overflow |
color-interpolation-filters | line-height | width |
float | max-height | |
Encabezado heredado
De forma predeterminada, las organizaciones de ArcGIS Enterprise que se actualizaron a 10.9 desde una versión anterior presentan una configuración de página de inicio heredada.
Nota:
El soporte para la configuración de la página de inicio heredada cesará en actualizaciones futuras. Por lo tanto, se recomienda que las organizaciones existentes realicen la transición a la nueva página de inicio tan pronto como sea posible.
La página de inicio heredada incluye un encabezado de 960 píxeles de ancho por 180 píxeles de alto en la parte superior de la página. Puede seleccionar una imagen para el área del encabezado eligiendo una imagen predefinida o cargando un archivo desde el escritorio, o puede crear un diseño personalizado utilizando texto enriquecido o HTML. Configure el encabezado como parte de los ajustes de la página de inicio.
Si elige la opción Diseño personalizado, verá un editor de texto enriquecido en el que puede colocar gráficos y texto en formato WYSIWYG (lo que ve es lo que obtiene). Elimine el contenido del encabezado existente y reemplácelo por el suyo. Para una mayor flexibilidad, haga clic en el botón Ver fuente HTML en el editor, que le permite escribir o pegar su propio código HTML.
Si solo selecciona una imagen para el encabezado, su logotipo aparecerá en la imagen del encabezado. Si utiliza el diseño personalizado para el encabezado de la página de inicio, el logotipo no aparece (a menos que se incluya en el diseño).
Sugerencia:
Si su organización está definida como solo HTTPS, debe acceder a cualquier referencia de imágenes de su diseño a través de HTTPS para que las imágenes aparezcan en el encabezado.
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. Puede reemplazar las direcciones URL de las imágenes por las suyas.
El siguiente código incluye el HTML y la hoja CSS que se utiliza para crear el encabezado de una organización medioambiental genérica.
<div style="width: 960px; font-family: futura, helvetica, arial;
background: url(https://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 la hoja CSS que se utiliza para crear el encabezado de una página gubernamental.
<div style="width: 960px; font-family: futura;
background: url(https://imagesite/generic_gov.png); height: 180px">
<div style="margin-top: 120px; float: right; margin-right: 80px">
<a href="https://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>
Es posible usar un encabezado mayor que el área de encabezado de 960 píxeles de ancho por 180 píxeles de alto, pero tenga en cuenta que la imagen puede solaparse con determinadas áreas de la página de inicio, como el nombre del contenido destacado. Para ayudar a que el texto sea visible, defina la parte inferior del encabezado en un color complementario del azul predeterminado o agregue un efecto de degradado en la parte inferior.
<div id="banner-html" style="left: 0px; top: 0px; position: absolute;"><div>
<img src="https://downloads.esri.com/Blogs/learn-arcgis/ago-banner/cartography-banner.png?"
style="-webkit-border-radius:0 0 10px 10px; -moz-border-radius:0 0 10px 10px; -o-border-radius:0 0 10px 10px;
border-radius:0 0 10px 10px; margin-top:0; width:960px; height:470px;"></div></div>