Skip To Content

Obsługiwany język HTML do konfigurowania witryny internetowej

Administratorzy portalu mogą utworzyć stronę internetową poprzez utworzenie niestandardowych banerów na stronie głównej oraz dodanie opisu instytucji za pomocą edytora tekstu formatowanego lub poprzez wpisanie kodu HTML.

Atrybuty i znaczniki HTML

Poniżej znajduje się tabela obsługiwanych znaczników języka HTML, których można użyć do skonfigurowania banera oraz opisu instytucji.

ZnacznikAtrybut

a

href, target, style

img

src, width, height, border, alt, style

video

autoplay, controls, height, loop, muted, poster, preload, src, width

audio

autoplay, controls, loop, muted, preload, src

span

style

table

width, height, cellpadding, cellspacing, border, style

div

style, class

font

size, color, style

tr

height, valign, align, style

td, th

height, width, valign, align, colspan, rowspan, nowrap, style

b, strong, i, em, br, p, li, ul, tbody

Uwagi dotyczące języka HTML

  • Znaczniki HTML, które nie zostały wymienione w powyższej tabeli, nie są obsługiwane i zostaną odfiltrowane.
  • Dozwolone protokoły dla href i src to https, http, tel i mailto.
  • Znaczniki są automatycznie zamykane, jeśli nie zostaną zamknięte.
  • Znaki <>&s służą do zmiany znaczenia poza poprawnymi znacznikami, o ile ich znaczenie nie zostanie zmienione za pomocą &lt;&gt;&amp;&quot.
  • Łącza UNC nie są obsługiwane.

Opis instytucji

Opis jest zamieszczony na stronie Moja instytucja oraz, opcjonalnie, na stronie głównej pod banerem. Opis ten można skonfigurować w ramach ogólnych ustawień witryny internetowej, za pomocą edytora tekstu sformatowanego (WYSIWIG). W celu zapewnienia jeszcze większej elastyczności kliknij w edytorze przycisk Wyświetl kod źródłowy HTML, który pozwala wprowadzić lub wkleić własny kod HTML.

Baner instytucji

Strona główna zawiera baner u góry strony mający szerokość 960 pikseli i wysokość 180 pikseli. Dla obszaru banera można wybrać obraz, wybierając wstępnie zdefiniowany obraz lub przesyłając plik z komputera, lub można utworzyć własny projekt za pomocą tekstu formatowanego lub HTML. Konfiguracja banera w ramach ustawień strony głównej.

W przypadku wyboru opcji Projekt niestandardowy pojawi się edytor tekstu, w którym można umieścić grafikę i tekst w formacie WYSIWYG. Usuń istniejącą treść baneru i zastąp ją własną. W celu zapewnienia jeszcze większej elastyczności kliknij w edytorze przycisk Wyświetl kod źródłowy HTML, który pozwala wprowadzić lub wkleić własny kod HTML.

W przypadku wybrania samego obrazka na obrazie banera pojawi się twoje logo. Jeżeli przy tworzeniu banera strony głównej korzystasz z projektu niestandardowego, logo nie zostanie wyświetlone (chyba że zostało uwzględnione w projekcie).

Wskazówka:

Jeśli instytucja używa tylko protokołu HTTPS, wszelkie odwołania w projekcie muszą się odbywać przez protokół HTTPS, aby obraz lub obrazy mogły się pojawić na banerze.

Przykłady

Poniżej zostały pokazane przykłady banerów utworzonych za pomocą języka HTML. Każdy przykład zawiera kod użyty do utworzenia banera. Musisz zastąpić adresy URL obrazu swoimi własnymi.

Baner utworzony w języku HTML
Przykład strony głównej zawierającej baner utworzony z wykorzystaniem języka HTML

Poniższy kod obejmuje język HTML i arkusze CSS użyte do utworzenia banera instytucji Generic Environment Organization:

<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>

Strona główna z banerem utworzonym w języku HTML
Przykład strony głównej zawierającej baner utworzony z wykorzystaniem języka HTML

Poniższy kod obejmuje język HTML i arkusz CSS użyte do utworzenia banera na rządowej stronie głównej:

<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>

Strona główna z banerem utworzonym w języku HTML
Przykład strony głównej zawierającej baner utworzony z wykorzystaniem języka HTML

Można użyć banera większego niż zalecany rozmiar 960 na 180 pikseli, ale należy pamiętać, że obraz może nakładać się na pewne obszary strony głównej, na przykład nazwę promowanych zasobów. Aby zwiększyć widoczność tekstu, spód banera powinien być w kolorze uzupełniającym dopasowanym do domyślnego niebieskiego albo należy użyć efektu wygaszania u dołu.

<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>