Você pode usar HTML no portal ArcGIS Enterprise quando um editor de texto estiver incluído, como páginas de itens, descrições de grupos, pop-ups de mapas e aplicativos configuráveis.
Tags e atributos da HTML
Abaixo está uma tabela de tags de HTML e atributos suportados que você pode utilizar.
| Tag | 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 |
Considerações da HTML
Tenha em mente o seguinte:
- As tags da HTML que não estão listadas na tabela acima não são suportadas e serão filtradas.
- Os protocolos permitidos para href e src são https, http, tel e mailto.
- As tags são automaticamente fechadas caso não fechadas.
- <>&"ssão saídas de tags legais se não forem saídas utilizando <>&".
- Links de UNC não são suportados.
- Quando uma tag a é utilizada, a URL de destino href sempre abre em uma nova guia do navegador.
Propriedades CSS
As tabelas abaixo mostram as propriedades CSS suportadas.
Anotação:
O ArcGIS Enterprise suporta somente CSS embutido. O CSS deve ser definido dentro do atributo de estilo.
Propriedades da cópia de segurança
Abaixo está uma tabela das propriedades da cópia de segurança suportadas.
| Propriedades | ||
|---|---|---|
background | background-color | background-position |
background-attachment | background-image | background-repeat |
background-clip | background-origin | background-size |
Propriedades de borda
Abaixo está uma tabela das propriedades de borda suportadas.
| Propriedades | ||
|---|---|---|
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 |
Propriedades da caixa
Abaixo está uma tabela das propriedades da caixa suportadas.
| Propriedades | ||
|---|---|---|
box-decoration-break | box-sizing | box-suppress |
box-shadow | box-snap | |
Propriedades de quebra
Abaixo está uma tabela das propriedades de quebra suportadas.
| Propriedades | ||
|---|---|---|
break-after | break-before | break-inside |
Propriedades de visualização
Abaixo está uma tabela das propriedades de quebra suportadas.
| Propriedades | |||
|---|---|---|---|
display | display-inside | display-list | display-outside |
Propriedades flexíveis
Abaixo está uma tabela das propriedades flexíveis suportadas.
| Propriedades | |||
|---|---|---|---|
flex | flex-direction | flex-grow | flex-wrap |
flex-basis | flex-flow | flex-shrink | |
Propriedades de fonte
Abaixo está uma tabela das propriedades de fonte suportadas.
| Propriedades | ||
|---|---|---|
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 |
Propriedades de grade
Abaixo está uma tabela das propriedades de grade suportadas.
| Propriedades | ||
|---|---|---|
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 |
Propriedades de justificar
Abaixo está uma tabela das propriedades de justificar suportadas.
| Propriedades | ||
|---|---|---|
justify-content | justify-items | justify-self |
Propriedades de lista
Abaixo está uma tabela das propriedades de lista suportadas.
| Propriedades | |||
|---|---|---|---|
list-style | list-style-image | list-style-position | list-style-type |
Propriedades de margem
Abaixo está uma tabela das propriedades de margem suportadas.
| Propriedades | ||
|---|---|---|
margin | margin-left | margin-top |
margin-bottom | margin-right | |
Propriedades de preenchimento
Abaixo está uma tabela das propriedades de preenchimento suportadas.
| Propriedades | ||
|---|---|---|
padding | padding-left | padding-top |
padding-bottom | padding-right | |
Propriedades de texto
Abaixo está uma tabela das propriedades de texto suportadas.
| Propriedades | |
|---|---|
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 |
Propriedades mundiais
Abaixo está uma tabela das propriedades mundiais suportadas.
| Propriedades | ||
|---|---|---|
word-break | word-spacing | word-wrap |
Outras propriedades
Abaixo está uma tabela de outras propriedades CSS suportadas.
| Propriedades | ||
|---|---|---|
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 | |
Banner de legado
Por padrão, as organizações do ArcGIS Enterprise que foram atualizadas para 10.9 a partir de uma versão anterior apresentam uma configuração de página inicial antiga.
Anotação:
O suporte das configurações da página inicial antiga será descontinuado em atualizações futuras. Portanto, é recomendável que as organizações existentes façam a transição para a nova experiência na página inicial o mais rápido possível.
A página inicial de legado inclui um banner na parte superior da página com 960 pixels de largura por 180 pixels de altura. Você pode selecionar uma imagem da área do banner, escolhendo uma imagem pré-definida ou transferindo um arquivo do seu desktop, ou você pode criar um projeto personalizado utilizando um texto ou HTML. Configure o banner como parte das configurações da página inicial de legado.
Se você escolher a opção Projeto personalizado, você visualizará um editor de texto onde você pode posicionar gráficos e texto em um formato - O que você vê é o que você obtém (WYSIWYG). Exclua o conteúdo do banner existente e o substitua com seu próprio. Para flexibilidade adicional, clique no botão Visualizar Fonte HTML no editor, que permite a você digitar ou colar seu próprio código de HTML.
Se você seleciona sosmente uma imagem para seu banner, seu logotipo aparece dentro da imagem do banner. Se você utilizar o projeto personalizado para o banner da página inicial, o logotipo não aparece (a menos que você o inclua no seu projeto).
Dica:
Se a sua organização estiver configurada somente para HTTPS, você deverá acessar quaisquer referências de imagem em seu design por meio de HTTPS para que a imagem ou imagens apareçam em seu banner.
Exemplos
Abaixo estão exemplos de banners criados com HTML. Cada exemplo inclui o código que foi utilizado para criar o banner. Você pode substituir as URLs da imagem por sua própria.
O código abaixo inclui linguagem HTML e CSS utilizados para criar o banner do site Generic Environment Organization.
<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>
O código abaixo inclui linguagem HTML e CSS utilizados para criar o banner do site Government.
<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>
Você pode utilizar um banner maior que a área do banner de 960 pixels por 180 pixels, mas esteja ciente que a imagem pode sobrepor determinadas áreas da Página Incial, tal como, o nome do seu conteúdo apresentado. Para ajudar a tornar o texto visível, defina a parte inferior do banner com uma cor complementar para combinar com o azul padrão ou adicione um efeito de esmaecimento na 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>