Navigation path

Library

Table of content


1. Library

When you start designing a website, you do not have to start from scratch. There is a significant amount of existing material that you can use or that you are obliged to use, like:

Top

1.1. Standard templates

The standard presentation provides the following advantages to both users and information providers:

  • A "corporate image" for the Commission which confirms the coherent look of the service;
  • Ease of use through:
    • standard facilities recognised by consistent appearance and position on every page providing the same functions throughout the site at all levels
    • navigational aids both "vertically" and "horizontally" (for example, between languages)

The standard template must be used for all new development and can also be introduced on existing pages to replace a previous template, but this should be done on a site basis, not page by page.

The pages using this template must contain at least all the elements shown in the mandatory version. Possible additional standard elements are shown in the complete version.

There are two templates:

The "europa.eu" address space is interinstitutional and brings together information from all the European institutions. Even though each institution manages its own site, EUROPA is designed as the starting point for all information concerning the European Union. The interinstitutional pages are administered by the Commission (DG COMM) on behalf of and in close collaboration with the other institutions.

Sites that have an interinstitutional mission and content or which are not linked to a particular institution or DG can be hosted at EU level and must use the Interinstituional template.

For the Commission's Directorates-General, the default address space is "ec.europa.eu".

Sites with which the Commission's departments would be associated without having adequate control of the information disseminated must use addresses outside the "ec.europa.eu" domain.

You can download templates in 24 languages on their respective pages.

The templates are now available in a responsive design.

Top

1.2. Images

A number of standard images are used in most of (ec.)europa.eu websites: languages icons, EUROPA and WAI logos. All webmasters should use the same images in other to have coherence among all EUROPA sites.

The languages icons have a standardised size and are used in web pages to indicate the change of language or available linguistic versions for the target link.

The WAI logo indicates that pages, as well as (some of) their subpages, were designed with accessibility in mind. It also links to the central EUROPA page describing its "Web accessibility policy".

The EUROPA logo can be used on external sites for linking to the EUROPA site. Its use is submitted to prior notification, including the detailed description of the project, in writing to the EUROPA web coordination team. Reproduction for personal use is also authorized. Its redissemination (for educational purposes, research, private study, or internal circulation within an organisation) in whatever form is subject to prior permission issued by the Office of Publications.

Top

1.2.1. Document icons

Links to binary documents should be indicated by the appropriate document icon that is placed directly inside the link to the document improving accessibility of the text. The document icons are inserted into the text automatically on pages created by Documentum. On all other platforms use the html codes from the following table notwithstanding the language of the page.

Example: Templatezip(487 kB)

Note: Sites not using Template 2011 must include the following lines in their local.css to assure correct display of the document icons:

html body a.link-ico{border:0;text-decoration:none;}
html body a.link-ico span{text-decoration:underline;}
html body a.link-ico img{border:0;vertical-align:middle;padding:0 0 0 4px;}
html body a.link-ico span.link-size{color:#333;text-decoration:none;padding:0 0 0 4px;}

Available icons for binary documents. Replace the bold text as necessary.

File type Icon HTML code to insert
Open Document Format
Text documents .odt

<a class="link-ico" href="URL of the document"><span>Link text</span><img alt="OPD-Document" src="/wel/images/doc_icons/f_odt_16.gif" width="16" height="16"><span class="link-size">(Size in Kb)</span></a>

Open Document Format
Spreadsheet .ods

<a class="link-ico" href="URL of the document"><span>Link text</span><img alt="OPD-Spreadsheet" src="/wel/images/doc_icons/f_ods_16.gif" width="16" height="16"><span class="link-size">(Size in Kb)</span></a>

Open Document Format
Presentation .odp

<a class="link-ico" href="URL of the document"><span>Link text</span><img alt="OPD-Presentation" src="/wel/images/doc_icons/f_odp_16.gif" width="16" height="16"><span class="link-size">(Size in Kb)</span></a>

MS Word .doc Windows Media Video 

<a class="link-ico" href="URL of the document"><span>Link text</span><img alt="Word" src="/wel/images/doc_icons/f_word_16.gif" width="16" height="16"><span class="link-size">(Size in Kb)</span></a>

MS Windows Media Video .avi, Windows Media Video 

<a class="link-ico" href="URL of the document"><span>Link text</span><img alt="Windows Media Video" src="/wel/images/doc_icons/f_avi_16.gif" width="16" height="16"><span class="link-size">(Size in Kb)</span></a>

MS Excel .xls Excel 

<a class="link-ico" href="URL of the document"><span>Link text</span><img alt="Excel" src="/wel/images/doc_icons/f_excel4book_16.gif" width="16" height="16"><span class="link-size">(Size in Kb)</span></a>

MS Power Point .ppt PowerPoint 

<a class="link-ico" href="URL of the document"><span>Link text</span><img alt="Presentation" src="/wel/images/doc_icons/f_ppt8_16.gif" width="16" height="16"><span class="link-size">(Size in Kb)</span></a>

Real Audio .ram, .ra, .rm, .rmm, .rnx, .rv Real Audio 

<a class="link-ico" href="URL of the document"><span>Link text</span><img alt="Real Audio" src="/wel/images/doc_icons/f_ram_16.gif" width="16" height="16"><span class="link-size">(Size in Kb)</span></a>

PDF
(Portable document Format)
PDF 

<a class="link-ico" href="URL of the document"><span>Link text</span><img alt="PDF" src="/wel/images/doc_icons/f_pdf_16.gif" width="16" height="16"><span class="link-size">(Size in Kb)</span></a>

Text .txt Text 

<a class="link-ico" href="URL of the document"><span>Link text</span><img alt="Text" src="/wel/images/doc_icons/f_crtext_16.gif" width="16" height="16"><span class="link-size">(Size in Kb)</span></a>

ZIP ZIP 

<a class="link-ico" href="URL of the document"><span>Link text</span><img alt="ZIP" src="/wel/images/doc_icons/f_zip_16.gif" width="16" height="16"><span class="link-size">(Size in Kb)</span></a>

Adobe Illustrator - .ai

<a class="link-ico" href="URL of the document"><span>Link text</span><img alt="AI" src="/wel/images/doc_icons/f_illustrator5_16.gif" width="16" height="16"><span class="link-size">(Size in Kb)</span></a>

Configuration file (text) .cfg

<a class="link-ico" href="URL of the document"><span>Link text</span><img alt="CFG" src="/wel/images/doc_icons/f_cfg_16.gif" width="16" height="16"><span class="link-size">(Size in Kb)</span></a>

Cascading Style Sheet Document .css

<a class="link-ico" href="URL of the document"><span>Link text</span><img alt="CSS" src="/wel/images/doc_icons/f_css_16.gif" width="16" height="16"><span class="link-size">(Size in Kb)</span></a>

Encapsulated PostScript .eps

<a class="link-ico" href="URL of the document"><span>Link text</span><img alt="EPS" src="/wel/images/doc_icons/f_eps_16.gif" width="16" height="16"><span class="link-size">(Size in Kb)</span></a>

Flash File .fla

<a class="link-ico" href="URL of the document"><span>Link text</span><img alt="Flash File" src="/wel/images/doc_icons/f_flash_16.gif" width="16" height="16"><span class="link-size">(Size in Kb)</span></a>

Flash Video File .flv

<a class="link-ico" href="URL of the document"><span>Link text</span><img alt="FLV" src="/wel/images/doc_icons/f_flv_16.gif" width="16" height="16"><span class="link-size">(Size in Kb)</span></a>

GIF image

<a class="link-ico" href="URL of the document"><span>Link text</span><img alt="GIF" src="/wel/images/doc_icons/f_gif_16.gif" width="16" height="16"><span class="link-size">(Size in Kb)</span></a>

HTML document

<a class="link-ico" href="URL of the document"><span>Link text</span><img alt="HTML" src="/wel/images/doc_icons/f_html_16.gif" width="16" height="16"><span class="link-size">(Size in Kb)</span></a>

Icon image .ico

<a class="link-ico" href="URL of the document"><span>Link text</span><img alt="Icon" src="/wel/images/doc_icons/f_icon_16.gif" width="16" height="16"><span class="link-size">(Size in Kb)</span></a>

JPEG image .jpg

<a class="link-ico" href="URL of the document"><span>Link text</span><img alt="jpg" src="/wel/images/doc_icons/f_jpg_16.gif" width="16" height="16"><span class="link-size">(Size in Kb)</span></a>

JavaScript file .js

<a class="link-ico" href="URL of the document"><span>Link text</span><img alt="js" src="/wel/images/doc_icons/f_js_16.gif" width="16" height="16"><span class="link-size">(Size in Kb)</span></a>

QuickTime Movie .mov

<a class="link-ico" href="URL of the document"><span>Link text</span><img alt="mov" src="/wel/images/doc_icons/f_quicktime_16.gif" width="16" height="16"><span class="link-size">(Size in Kb)</span></a>

MP3 File .mp3

<a class="link-ico" href="URL of the document"><span>Link text</span><img alt="mp3" src="/wel/images/doc_icons/f_mp3_16.gif" width="16" height="16"><span class="link-size">(Size in Kb)</span></a>

MPEG-4 Video File .mp4

<a class="link-ico" href="URL of the document"><span>Link text</span><img alt="mpeg-4" src="/wel/images/doc_icons/f_mpeg-4v_16.gif" width="16" height="16"><span class="link-size">(Size in Kb)</span></a>

MPEG Video File .mpg

<a class="link-ico" href="URL of the document"><span>Link text</span><img alt="mpeg" src="/wel/images/doc_icons/f_mpeg_16.gif" width="16" height="16"><span class="link-size">(Size in Kb)</span></a>

Portable Network Graphics .png

<a class="link-ico" href="URL of the document"><span>Link text</span><img alt="png" src="/wel/images/doc_icons/f_png_16.gif" width="16" height="16"><span class="link-size">(Size in Kb)</span></a>

PowerPoint SlideShow .pps

<a class="link-ico" href="URL of the document"><span>Link text</span><img alt="pps" src="/wel/images/doc_icons/f_pps_win7_16.gif" width="16" height="16"><span class="link-size">(Size in Kb)</span></a>

Rich Text Format .rtf

<a class="link-ico" href="URL of the document"><span>Link text</span><img alt="rtf" src="/wel/images/doc_icons/f_rtf_16.gif" width="16" height="16"><span class="link-size">(Size in Kb)</span></a>

Shockwave Flash File .swf

<a class="link-ico" href="URL of the document"><span>Link text</span><img alt="swf" src="/wel/images/doc_icons/f_swf_16.gif" width="16" height="16"><span class="link-size">(Size in Kb)</span></a>

TIFF Image .tif

<a class="link-ico" href="URL of the document"><span>Link text</span><img alt="tif" src="/wel/images/doc_icons/f_tif_16.gif" width="16" height="16"><span class="link-size">(Size in Kb)</span></a>

Windows Sound .wav

<a class="link-ico" href="URL of the document"><span>Link text</span><img alt="wav" src="/wel/images/doc_icons/f_wave_16.gif" width="16" height="16"><span class="link-size">(Size in Kb)</span></a>

Windows Media Audio Metafile .wax

<a class="link-ico" href="URL of the document"><span>Link text</span><img alt="wax" src="/wel/images/doc_icons/f_wax_16.gif" width="16" height="16"><span class="link-size">(Size in Kb)</span></a>

Windows Metafile .wmf

<a class="link-ico" href="URL of the document"><span>Link text</span><img alt="wmf" src="/wel/images/doc_icons/f_wmf_16.gif" width="16" height="16"><span class="link-size">(Size in Kb)</span></a>

Windows Media Video .wmv

<a class="link-ico" href="URL of the document"><span>Link text</span><img alt="wmv" src="/wel/images/doc_icons/f_wmv_16.gif" width="16" height="16"><span class="link-size">(Size in Kb)</span></a>

VRML File .wrl

<a class="link-ico" href="URL of the document"><span>Link text</span><img alt="wrl" src="/wel/images/doc_icons/f_wrl_16.gif" width="16" height="16"><span class="link-size">(Size in Kb)</span></a>

Windows Media Video Metafile .wvx

<a class="link-ico" href="URL of the document"><span>Link text</span><img alt="wvx" src="/wel/images/doc_icons/f_wvx_16.gif" width="16" height="16"><span class="link-size">(Size in Kb)</span></a>

Published Pure XML Document

<a class="link-ico" href="URL of the document"><span>Link text</span><img alt="xml" src="/wel/images/doc_icons/f_xml_16.gif" width="16" height="16"><span class="link-size">(Size in Kb)</span></a>

XSL File

<a class="link-ico" href="URL of the document"><span>Link text</span><img alt="xsl" src="/wel/images/doc_icons/f_xsl_16.gif" width="16" height="16"><span class="link-size">(Size in Kb)</span></a>

Top

1.2.2. Language icons

The Template version 2011 and above introduces a new approach to displaying multilingual links. It uses a single language icon that upon clicking expands to open a pop-up window displaying available languages of the link. This icon is automatically generated on webpages managed by Documentum. To create the language icon on other platforms use the following html code for appropriate language versions of the page.

Example: European Commission template  Choose translations of the previous link  

Code for Template 2011 and above

Language of the page

Code to be used for a link with multiple language versions

BG

<a href="URL of the document">Link text</a> <a class="ws-ico" href="javascript:void(0)" onclick="return webservice.popup(this)" title="Избор на превод за предходната връзка"><img alt="Избор на превод за предходната връзка" src="/wel/images/languages/ws.gif" width="16" height="13"><span class="s">&nbsp;</span></a>

CS

<a href="URL of the document">Link text</a> <a class="ws-ico" href="javascript:void(0)" onclick="return webservice.popup(this)" title="Vybrat překlad k předcházejícímu odkazu"><img alt="Vybrat překlad k předcházejícímu odkazu" src="/wel/images/languages/ws.gif" width="16" height="13"><span class="s">&nbsp;</span></a>

DA

<a href="URL of the document">Link text</a> <a class="ws-ico" href="javascript:void(0)" onclick="return webservice.popup(this)" title="Vælg oversættelse af det forrige link"><img alt="Vælg oversættelse af det forrige link" src="/wel/images/languages/ws.gif" width="16" height="13"><span class="s">&nbsp;</span></a>

DE

<a href="URL of the document">Link text</a> <a class="ws-ico" href="javascript:void(0)" onclick="return webservice.popup(this)" title="Übersetzung für diesen Link wählen"><img alt="Übersetzung für diesen Link wählen" src="/wel/images/languages/ws.gif" width="16" height="13"><span class="s">&nbsp;</span></a>

EL

<a href="URL of the document">Link text</a> <a class="ws-ico" href="javascript:void(0)" onclick="return webservice.popup(this)" title="Επιλέξτε μεταφράσεις του προηγούμενου συνδέσμου"><img alt="Επιλέξτε μεταφράσεις του προηγούμενου συνδέσμου" src="/wel/images/languages/ws.gif" width="16" height="13"><span class="s">&nbsp;</span></a>

EN

<a href="URL of the document">Link text</a> <a class="ws-ico" href="javascript:void(0)" onclick="return webservice.popup(this)" title="Choose translations of the previous link"><img alt="Choose translations of the previous link" src="/wel/images/languages/ws.gif" width="16" height="13"><span class="s">&nbsp;</span></a>

ES

<a href="URL of the document">Link text</a> <a class="ws-ico" href="javascript:void(0)" onclick="return webservice.popup(this)" title="Elija traducciones del enlace precedente"><img alt="Elija traducciones del enlace precedente" src="/wel/images/languages/ws.gif" width="16" height="13"><span class="s">&nbsp;</span></a>

ET

<a href="URL of the document">Link text</a> <a class="ws-ico" href="javascript:void(0)" onclick="return webservice.popup(this)" title="Valige lingiga seotud tõlked"><img alt="Valige lingiga seotud tõlked" src="/wel/images/languages/ws.gif" width="16" height="13"><span class="s">&nbsp;</span></a>

FI

<a href="URL of the document">Link text</a> <a class="ws-ico" href="javascript:void(0)" onclick="return webservice.popup(this)" title="Näytä edellisen linkin kieliversiot"><img alt="Näytä edellisen linkin kieliversiot" src="/wel/images/languages/ws.gif" width="16" height="13"><span class="s">&nbsp;</span></a>

FR

<a href="URL of the document">Link text</a> <a class="ws-ico" href="javascript:void(0)" onclick="return webservice.popup(this)" title="Choisir les traductions du lien précédent"><img alt="Choisir les traductions du lien précédent" src="/wel/images/languages/ws.gif" width="16" height="13"><span class="s">&nbsp;</span></a>

GA

<a href="URL of the document">Link text</a> <a class="ws-ico" href="javascript:void(0)" onclick="return webservice.popup(this)" title="Roghnaigh aistriúcháin an naisc roimhe seo. "><img alt="Roghnaigh aistriúcháin an naisc roimhe seo. " src="/wel/images/languages/ws.gif" width="16" height="13"><span class="s">&nbsp;</span></a>

HU

<a href="URL of the document">Link text</a> <a class="ws-ico" href="javascript:void(0)" onclick="return webservice.popup(this)" title="Az előző linken elérhető szöveg fordításai"><img alt="Az előző linken elérhető szöveg fordításai" src="/wel/images/languages/ws.gif" width="16" height="13"><span class="s">&nbsp;</span></a>

HR

<a href="URL of the document">Link text</a> <a class="ws-ico" href="javascript:void(0)" onclick="return webservice.popup(this)" title="Odabrati prijevode prethodne poveznice"><img alt=" Odabrati prijevode prethodne poveznice" src="/wel/images/languages/ws.gif" width="16" height="13"><span class="s">&nbsp;</span></a>

IT

<a href="URL of the document">Link text</a> <a class="ws-ico" href="javascript:void(0)" onclick="return webservice.popup(this)" title="Scegli le traduzioni del link precedente"><img alt="Scegli le traduzioni del link precedente" src="/wel/images/languages/ws.gif" width="16" height="13"><span class="s">&nbsp;</span></a>

LT

<a href="URL of the document">Link text</a> <a class="ws-ico" href="javascript:void(0)" onclick="return webservice.popup(this)" title="Pasirinkti šios nuorodos vertimus"><img alt="Pasirinkti šios nuorodos vertimus" src="/wel/images/languages/ws.gif" width="16" height="13"><span class="s">&nbsp;</span></a>

LV

<a href="URL of the document">Link text</a> <a class="ws-ico" href="javascript:void(0)" onclick="return webservice.popup(this)" title="Izvēlieties saites tulkojumu"><img alt="Izvēlieties saites tulkojumu" src="/wel/images/languages/ws.gif" width="16" height="13"><span class="s">&nbsp;</span></a>

MT

<a href="URL of the document">Link text</a> <a class="ws-ico" href="javascript:void(0)" onclick="return webservice.popup(this)" title="Agħżel it-traduzzjonijiet mil-link ta' qabel"><img alt="Agħżel it-traduzzjonijiet mil-link ta' qabel" src="/wel/images/languages/ws.gif" width="16" height="13"><span class="s">&nbsp;</span></a>

NL

<a href="URL of the document">Link text</a> <a class="ws-ico" href="javascript:void(0)" onclick="return webservice.popup(this)" title="Bekijk deze link in een andere taal"><img alt="Bekijk deze link in een andere taal" src="/wel/images/languages/ws.gif" width="16" height="13"><span class="s">&nbsp;</span></a>

PL

<a href="URL of the document">Link text</a> <a class="ws-ico" href="javascript:void(0)" onclick="return webservice.popup(this)" title="Wybierz wersję językową tego linka"><img alt="Wybierz wersję językową tego linka" src="/wel/images/languages/ws.gif" width="16" height="13"><span class="s">&nbsp;</span></a>

PT

<a href="URL of the document">Link text</a> <a class="ws-ico" href="javascript:void(0)" onclick="return webservice.popup(this)" title="Traduções da ligação anterior"><img alt="Traduções da ligação anterior" src="/wel/images/languages/ws.gif" width="16" height="13"><span class="s">&nbsp;</span></a>

RO

<a href="URL of the document">Link text</a> <a class="ws-ico" href="javascript:void(0)" onclick="return webservice.popup(this)" title="Traducerile linkului anterior"><img alt="Traducerile linkului anterior" src="/wel/images/languages/ws.gif" width="16" height="13"><span class="s">&nbsp;</span></a>

SK

<a href="URL of the document">Link text</a> <a class="ws-ico" href="javascript:void(0)" onclick="return webservice.popup(this)" title="Vybrať preklady k predchádzajúcemu odkazu"><img alt="Vybrať preklady k predchádzajúcemu odkazu" src="/wel/images/languages/ws.gif" width="16" height="13"><span class="s">&nbsp;</span></a>

SL

<a href="URL of the document">Link text</a> <a class="ws-ico" href="javascript:void(0)" onclick="return webservice.popup(this)" title="Seznam prevodov predhodne povezave"><img alt="Seznam prevodov predhodne povezave" src="/wel/images/languages/ws.gif" width="16" height="13"><span class="s">&nbsp;</span></a>

SV

<a href="URL of the document">Link text</a> <a class="ws-ico" href="javascript:void(0)" onclick="return webservice.popup(this)" title="Visa översättning av föregående länk"><img alt="Visa översättning av föregående länk" src="/wel/images/languages/ws.gif" width="16" height="13"><span class="s">&nbsp;</span></a>

 Note: Replace the bold text as necessary. 

 

Old template language icons

The pages not using Template version 2011 and above should continue to use the image language icons.

Language HTML code to insert
български
lang_bg.gif
<img src="/wel/images/languages/lang_bg.gif" width="18" height="13" align="bottom" lang="bg" alt="български" border="0" />
български
lang_cs.gif
<img src="/wel/images/languages/lang_cs.gif" width="18" height="13" align="bottom" lang="cs" alt="čeština" border="0" />
български
lang_da.gif
<img src="/wel/images/languages/lang_da.gif" width="18" height="13" align="bottom" lang="da" alt="dansk" border="0" />
български
lang_de.gif
<img src="/wel/images/languages/lang_de.gif" width="18" height="13" align="bottom" lang="de" alt="Deutsch" border="0" />
български
lang_et.gif
<img src="/wel/images/languages/lang_et.gif" width="18" height="13" align="bottom" lang="et" alt="eesti keel" border="0" />
български
lang_el.gif
<img src="/wel/images/languages/lang_el.gif" width="18" height="13" align="bottom" lang="el" alt="ελληνικά" border="0" />
български
lang_en.gif
<img src="/wel/images/languages/lang_en.gif" width="18" height="13" align="bottom" lang="en" alt="English" border="0" />
български
lang_es.gif
<img src="/wel/images/languages/lang_es.gif" width="18" height="13" align="bottom" lang="es" alt="español" border="0" />
български
lang_fr.gif
<img src="/wel/images/languages/lang_fr.gif" width="18" height="13"  align="bottom" lang="fr" alt="français" border="0" />
български
lang_ga.gif
<img src="/wel/images/languages/lang_ga.gif" width="18" height="13"  align="bottom" lang="ga" alt="Gaeilge" border="0" />
български
lang_it.gif
<img src="/wel/images/languages/lang_it.gif" width="18" height="13"  align="bottom" lang="it" alt="italiano" border="0" />
български
lang_lv.gif
<img src="/wel/images/languages/lang_lv.gif" width="18" height="13" align="bottom" lang="lv" alt="latviešu valoda" border="0" />
български
lang_lt.gif
<img src="/wel/images/languages/lang_lt.gif" width="18" height="13"  align="bottom" lang="lt" alt="lietuvių kalba" border="0" />
български
lang_hu.gif
<img src="/wel/images/languages/lang_hu.gif" width="18" height="13" align="bottom" lang="hu" alt="magyar" border="0" />
hrvatski
lang_hr.gif

<img src="/wel/images/languages/lang_hr.gif" width="18" height="13" align="bottom" lang="bg" alt=" hrvatski" border="0" />

български
lang_mt.gif
<img src="/wel/images/languages/lang_mt.gif" width="18" height="13" align="bottom" lang="mt" alt="Malti" border="0" />
български
lang_nl.gif
<img src="/wel/images/languages/lang_nl.gif" width="18" height="13" align="bottom" lang="nl" alt="Nederlands" border="0" />
български
lang_pl.gif
<img src="/wel/images/languages/lang_pl.gif" width="18" height="13" align="bottom" lang="pl" alt="polski" border="0" />
български
lang_pt.gif
<img src="/wel/images/languages/lang_pt.gif" width="18" height="13" align="bottom" lang="pt" alt="português" border="0" />
български
lang_ro.gif
<img src="/wel/images/languages/lang_ro.gif" width="18" height="13" align="bottom" lang="ro" alt="română" border="0" />
български
lang_sk.gif
<img src="/wel/images/languages/lang_sk.gif" width="18" height="13" align="bottom" lang="sk" alt="slovenčina" border="0" />
български
lang_sl.gif
<img src="/wel/images/languages/lang_sl.gif" width="18" height="13" align="bottom" lang="sl" alt="slovenščina" border="0" />
български
lang_fi.gif
<img src="/wel/images/languages/lang_fi.gif" width="18" height="13" align="bottom" lang="fi" alt="suomi" border="0" />
български
lang_sv.gif
<img src="/wel/images/languages/lang_sv.gif" width="18" height="13" align="bottom" lang="sv" alt="svenska" border="0" />

Icons are available for all languages that have a 2-letter ISO 639-1 code. They can be addressed in the same way as shown in the examples above. As alt-text, one has the choice between using the name of the language in English or in its native language. The official list of ISO 639-2 codes with their English translation is available on the site of the Library of Congress. Wikipedia also contains a list of the codes with the native name of the languages.

Examples
български
lang_tr.gif
<img src="/wel/images/languages/lang_tr.gif" width="18" height="13" align="bottom" lang="tr" alt="Türkçe" border="0">
български
lang_ja.gif
<img src="/wel/images/languages/lang_ja.gif" width="18" height="13" align="bottom" lang="ja" alt="Japanese" border="0">
Top

1.2.3. How to insert the EUROPA logo at your site

Please make use of the EUROPA logo in your pages by inserting a link to the logo at its original location, as indicated in the table below, and NOT by making a private copy of the logo.

Logo with text

Please use the ALT (alternate) text in the appropriate language, as indicated in the table below.

With text Linguistic version Alternative text HTLM code to insert
Официален уебсайт на ЕС bg Официален уебсайт на ЕС <img border="0" src="http://www.europa.eu/images/europa-logo/europa-logo_lg_bg.jpg" width="150" height="56" alt="Официален уебсайт на ЕС">
Oficiální internetové stránky EU cs Oficiální internetové stránky EU <img border="0" src="http://www.europa.eu/images/europa-logo/europa-logo_lg_cs.jpg" width="150" height="56" alt="Oficiální internetové stránky EU">
EU's officielle websted da EU's officielle websted <img border="0" src="http://www.europa.eu/images/europa-logo/europa-logo_lg_da.jpg" width="150" height="56" alt="EU's officielle websted">
Offizielle Website der EU de Offizielle Website der EU <img border="0" src="http://www.europa.eu/images/europa-logo/europa-logo_lg_de.jpg" width="150" height="56" alt="Offizielle Website der EU">
ELi ametlik veebisait et ELi ametlik veebisait <img border="0" src="http://www.europa.eu/images/europa-logo/europa-logo_lg_et.jpg" width="150" height="56" alt="ELi ametlik veebisait">
Επίσημος δικτυακός τόπος της ΕΕ el Επίσημος δικτυακός τόπος της ΕΕ <img border="0" src="http://www.europa.eu/images/europa-logo/europa-logo_lg_el.jpg" width="150" height="56" alt="Επίσημος δικτυακός τόπος της ΕΕ">
EUROPA - Official website of the EU en Official website of the EU <img border="0" src="http://www.europa.eu/images/europa-logo/europa-logo_lg_en.jpg" width="150" height="56" alt="Official website of the EU">
Web oficial de la UE es Web oficial de la UE <img border="0" src="http://www.europa.eu/images/europa-logo/europa-logo_lg_es.jpg" width="150" height="56" alt="Web oficial de la UE">
Site web officiel de l'UE fr Site web officiel de l'UE <img border="0" src="http://www.europa.eu/images/europa-logo/europa-logo_lg_fr.jpg" width="150" height="56" alt="Site web officiel de l'UE">
Suíomh gréasáin oifigiúil an AE ga Suíomh gréasáin oifigiúil an AE <img border="0" src="http://www.europa.eu/images/europa-logo/europa-logo_lg_ga.jpg" width="150" height="56" alt="Suíomh gréasáin oifigiúil an AE">
Sito ufficiale dell'UE it Sito ufficiale dell'UE <img border="0" src="http://www.europa.eu/images/europa-logo/europa-logo_lg_it.jpg" width="150" height="56" alt="Sito ufficiale dell'UE">
Oficiālā ES tīmekļa vietne lv Oficiālā ES tīmekļa vietne <img border="0" src="http://www.europa.eu/images/europa-logo/europa-logo_lg_lv.jpg" width="150" height="56" alt="Oficiālā ES tīmekļa vietne">
Oficiali ES interneto svetainė lt Oficiali ES interneto svetainė <img border="0" src="http://www.europa.eu/images/europa-logo/europa-logo_lg_it.jpg" width="150" height="56" alt="Oficiali ES interneto svetainė"
Az EU hivatalos honlapja hu Az EU hivatalos honlapja <img border="0" src="http://www.europa.eu/images/europa-logo/europa-logo_lg_hu.jpg" width="150" height="56" alt="Az EU hivatalos honlapja">
Is-sit uffiċjali tal-UE mt Is-sit uffiċjali tal-UE <img border="0" src="http://www.europa.eu/images/europa-logo/europa-logo_lg_mt.jpg" width="150" height="56" alt="Is-sit uffiċjali tal-UE">
Officiële website van de EU nl Officiële website van de EU <img border="0" src="http://www.europa.eu/images/europa-logo/europa-logo_lg_nl.jpg" width="150" height="56" alt="Officiële website van de EU">
Oficjalna strona internetowa EU pl Oficjalna strona internetowa EU <img border="0" src="http://www.europa.eu/images/europa-logo/europa-logo_lg_pl.jpg" width="150" height="56" alt="Oficjalna strona internetowa EU">
Portal oficial da UE na Internet pt Portal oficial da UE na Internet <img border="0" src="http://www.europa.eu/images/europa-logo/europa-logo_lg_pt.jpg" width="150" height="56" alt="Portal oficial da UE na Internet">
Site-ul oficial al UE ro Site-ul oficial al UE <img border="0" src="http://www.europa.eu/images/europa-logo/europa-logo_lg_ro.jpg" width="150" height="56" alt="Site-ul oficial al UE">
Oficiálne webové stránky EÚ sk Oficiálne webové stránky EÚ <img border="0" src="http://www.europa.eu/images/europa-logo/europa-logo_lg_sk.jpg" width="150" height="56" alt="Oficiálne webové stránky EÚ">
Uradno spletišče EU sl Uradno spletišče EU <img border="0" src="http://www.europa.eu/images/europa-logo/europa-logo_lg_sl.jpg" width="150" height="56" alt="Uradno spletišče EU">
EU:n virallinen verkkosivusto fi EU:n virallinen verkkosivusto <img border="0" src="http://www.europa.eu/images/europa-logo/europa-logo_lg_fi.jpg" width="150" height="56" alt="EU:n virallinen verkkosivusto">
Officiell EU-webbplats sv Officiell EU-webbplats <img border="0" src="http://www.europa.eu/images/europa-logo/europa-logo_lg_sv.jpg" width="150" height="56" alt="Officiell EU-webbplats">

Logo without additional text

Please use the ALT (alternate) text in the appropriate language, as indicated in the table below.

Without text

Description Alternative text HTML code to insert
europa.eu - insert the alternative text in its appropriate language Transparent background europa.eu -
insert the alternative text
in its appropriate language
<img border="0" src="http://www.europa.eu/images/europa-logo/europa-logo_lg_trans.png" width="150" height="56" alt="europa.eu - insert the alternative text in its appropriate language">
europa.eu - insert the alternative text in its appropriate language White background europa.eu -
insert the alternative text
in its appropriate language
<img border="0" src="http://www.europa.eu/images/europa-logo/europa-logo_lg_white.jpg" width="150" height="56" alt="europa.eu - insert the alternative text in its appropriate language">

Button

Button Description Alternative text HTML code to insert
EUROPA - insert the alternative text in its appropriate language Original background europa.eu - insert the alternative text in its appropriate language <img border="0" src="http://www.europa.eu/images/europa-logo/europa-logo_sh_orig.jpg" width="56" height="56" alt="europa.eu - insert the alternative text in its appropriate language">
EUROPA - insert the alternative text in its appropriate language Transparent background europa.eu - insert the alternative text in its appropriate language <img border="0" src="http://www.europa.eu/images/europa-logo/europa-logo_sh_trans.png" width="56" height="56" alt="europa.eu - insert the alternative text in its appropriate language">
Top

1.2.4. Home screen icons

These icons are used by some operating systems to display shortcuts or bookmarks to websites.

Home screen icons are in place for europa.eu and ec.europa.eu websites. The icon is an integral part of the visual identity and should not be changed.

iOS

When iOS users add a page that is hosted on either domains to their home screen, the action will create one of the icons illustrated below. For iOS, this is done automatically - the action retrieves the icon from the root of the domain.

Windows 8 and Internet Explorer 10

It is possible to pin your page to the start screen as a new tile. This tile is a bookmark to your page. To add this functionality, the following meta tag must be in the head section: <meta name="msapplication-TileImage" content="/metro-tile.png"/>

Home screen icons

Top

1.2.5. WAI logo

The WAI logo indicates that these pages, as well as (some of) their subpages, were designed with accessibility in mind. It also links to the central EUROPA page describing its "Web Accessibility Policy".
EUROPA pages could conform to different WCAG guidelines and therefore there are two logos available:
  •   for WCAG 1.0, level A

and

  • for WCAG 2.0, level AA
Top

1.3. Standard redirection page

File redirection.zipzip(17 kB) contains 20 HTML pages.

 

In order to automatically redirect the user to a new address, the head section must contain the following meta element:

<meta http-equiv="refresh" content="5; url=http://xxx/xxx/xxx">

The "5" indicates the number of seconds before the specified URL is loaded. Replace "http://xxx/xxx/xxx/xxx" with the absolute URL of the new page.

Top

1.4. Legal notices and copyright

Mandatory requirement

Appropriate disclaimers and notices must be inserted in precise terms and wherever relevant.  

 

View all IPG Rules

In general terms, all works such as publications or documents issued by the European Union institutions and bodies, irrespective of the medium, are subject to copyright, whether or not this is explicitly stated, except for works excluded from copyright protection by the relevant applicable law because they do not meet the legal requirements for protection or even if they do, they are subject to legal exceptions. The Internet increasing the potential audience of works displayed online and disseminated through the European Union’s official website ‘Europa’, it is essential to ensure the protection of the European Union's intellectual property rights.

In the same way, the rights of third-party literary or artistic works incorporated in EU websites and electronic documents shall be protected.

Therefore, appropriate disclaimers and notices must be inserted in precise terms and wherever relevant.

Copyright / Ownership

For literary (articles/studies/reports/etc. or excerpts thereof) or artistic (photos/graphs/drawings/etc.) works prepared by EU statutory personnel within the context of their work for the EU institutions or bodies, the copyright vests with the European Union, in accordance with Article 18 of the Staff Regulations of officials of the European Communitiespdf(2 MB) Choose translations of the previous link :

  1. All rights in any writings or other work done by any official in the performance of his duties shall be the property of the Community to whose activities such writings or works relate. The Communities shall have the right to acquire compulsorily the copyright in such works.
  2. Any invention made by an official in the course of or in connection with the performance of his duties shall be the undisputed property of the Communities. The institution may, at its own expense and on behalf of the Communities, apply for and obtain patents therefore in all countries. Any invention relating to the work of the Communities made by an official during the year following the expiration of his term of duty shall, unless proved otherwise, be deemed to have been made in the course of or in connection with the performance of his duties. Where inventions are the subject of patents, the name of the inventor or inventors shall be stated. 
  3. The institution may in appropriate cases award a bonus, the amount of which shall be determined by the institution, to an official who is the author of a patented invention.

For contributions/articles/studies/reports/etc. prepared by external companies/contractors on commission for EU institutions or bodies, and subject to standard EU service/study contracts, the general terms and conditions stipulate that any results or rights, including copyright and other intellectual or industrial property rights obtained in performance of the contract, shall be owned exclusively by the European Union, except where copyright or any other right of ownership already exists prior to the entering into force of the contract. In this latter case,  the company/contractor shall specify the works subject to these pre-existing rights, which are included in the contribution/article/study/report/etc, and shall warrant that it is the owner of these rights or, as the case may be, that it has obtained permission from the copyright holder(s) or from its or their legal representatives to use the works. Furthermore, it shall communicate any terms and conditions linked to the rights it has been granted.

The use by an EU institution or body of contributions/articles/studies/reports/etc. submitted by third-party experts or groups of experts is subject to a ‘publication/translation rights agreement’.

The Commission has a reuse policy regarding its works that is implemented by Commission Decision of 12 December 2011 on the reuse of Commission documentspdf. According to Article 2(1), this Decision only applies to public documents produced by the Commission or by public and private entities on its behalf:

  • which have been published by the Commission or by the Publications Office on its behalf through publications, websites or dissemination tools; or
  • which have not been published for economic or other practical reasons, such as studies, reports and other data.

This means that this reuse policy does not apply to works created by other EU Institutions or bodies. This difference is reflected in the general copyright notice of EUROPA and in the specific copyright notice of the Commission which are different.

Whenever third-party literary (articles/studies/reports/etc. or excerpts thereof) or artistic (photos/graphs/drawings/etc.) work is included within an EU website or electronic document, whatever the medium, the institution or body shall be responsible for obtaining the author’s or, as the case may be, right-holder's permission in writing and shall pay any fees required for the rights granted and ensure that appropriate acknowledgement is given in the publication.

The so called 'royalty free' images or photos found on the Internet or purchased on CD-ROM are not public domain! They are copyright protected. Therefore it is essential to respect all terms of use specified.

For this purpose, an agreement setting out basic formal conditions shall be concluded between the DG or other originating department and the author/copyright holder of this material. Whereas the ownership remains with the author/copyright holder, a ‘Publication/translation rights agreement’ not only authorises the EU to use/publish/translate the material, but also authorises the EU to permit further use/reproduction/translation thereof. It also states, if relevant, that the author/copyright holder has obtained unfettered rights for the reuse in his work of materials on which copyright or any other right of ownership already exists. A duly signed original of such agreements shall be kept within the relevant files. For further information, please contact op-info-copyright@publications.europa.eu.

Moreover, when using third-party material, whether textual or artistic, appropriate acknowledgement must be given to the author/copyright holder thereof (for photos, for example, a concise caption can be inserted). An additional courtesy acknowledgement may be mentioned as follows: ‘Reproduced with kind permission of the author(s)’.

Should, however, an author/copyright holder or his/her legal representative object to any use of his/her textual or artistic works other than dissemination by the EU institutions or bodies within their publication, the originating department shall respect this condition by displaying a relevant notice.

The latter may be printed directly under the third-party copyright acknowledgement as follows: ‘Reproduction is not authorised’, or inserted at a suitably prominent place at the beginning of a publication, as shown below.

  • Reproduction of the texts of this [report/study/article/etc.] is authorised provided the source is acknowledged. Reproduction of the artistic material contained therein is prohibited.
  • [Title of the material] (texts, drawings, photos, audio, video, etc.)
    © [name of copyright holder], [year of publication/creation]

For reproduction or use of this work, permission must be sought directly from the copyright holder.

In any case, the originating department is responsible for ensuring that no discrepancy may occur between the rights granted by the copyright holder and the copyright notice covering its publication.

For textual works, it is advisable to add to the copyright notice and qualification a disclaimer regarding responsibility, the form and wording of which is at the originating department’s discretion and adapted to the specific case, as shown in the following examples (for the EU).

  • Responsibility for the information and views set out in this [report/study/article/publication/etc.] lies entirely with the author(s).
  • The content of this [report/study/article/publication/etc.] does not reflect the official opinion of the European Union. Responsibility for the information and views expressed in the [...]/[therein] lies entirely with the author(s).
  • The information and views set out in this [report/study/article/publication/etc.] are those of the author(s) and do not necessarily reflect the official opinion of the European Union. Neither the European Union institutions and bodies nor any person acting on their behalf may be held responsible for the use which may be made of the information contained therein.

Links to external non-EU websites

Any EU institution or body wishing to create a link to a third-party website shall make prior enquiries about the terms and conditions set out on the website concerned, and it shall keep thereto. Furthermore, notifying the webmaster of a third-party website of the creation of a link from the EU ‘EUROPA’ website is considered a matter of ‘netiquette’ and legal caution.

Read more about links to external site.

Copyright issues of websites

For more in-depth information on copyright and other intellectual property rights, related to web sites, please consult the Intranet Copyright website.

For any additional information about Copyright and other Intellectual Property Rights please contact the helpdesk on Copyright in DG COMM at the address COMM-COPYRIGHT@ec.europa.eu.

Copyright issues of publications

For further questions regarding copyright issues related to publications, please contact the Publications Office at the address op-info-copyright@publications.europa.eu.

Top

1.5. Archive stamp

How to put an archive stamp on your page

Sample

Sample of the archive site: Europa chats

Download version

File archive_banner.zipzip(159 kB) contains: 22 htms, central style sheet, and images.

Instructions

In order to include a "stamp" on your banner which says that the site is archived, ensure that:

  • the head section contains link to the archives.css: <link type="text/css" href="archives.css" rel="stylesheet"></link>

and

  • the body section contains the following div element: <div id="archive"> <img height="124" width="250" border="0" alt="This site has been archived on (yyyy/mm/dd)" src="/wel/images/archiving/banner_archive_en.gif"> <div>DD/MM/YY</div> </div>


where DD/MM/YY is a date date of archiving. Example for english version.

Top