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 |
img | src, width, height, border, alt, style |
video | autoplay, controls, height, loop, muted, poster, preload, width |
audio | autoplay, controls, loop, muted, preload |
source | media, src, type |
span | style |
table | width, height, cellpadding, cellspacing, border, style |
div | style, align |
font | size, color, style |
tr | height, valign, align, style |
| td, th | height, width, valign, align, colspan, rowspan, nowrap, style |
p | style |
b, strong, i, em, u, ul, ol, li, tbody, br, hr | |
abbr | title |
Considerações da HTML
- 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.
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 para as 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 definida para HTTPS somente, quaisquer referências de imagem em seu projeto precisarão ser acessadas através 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ê precisará substituir as URLs da imagem com 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 o texto estar mais visível, a parte inferior do banner deve ser uma cor complementar que corresponda ao azul padrão ou adicione um efeito de desbotamento 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>