Ke zpřístupnění funkcí návrháře v e-mailech, stránkách a formulářích se používají vlastní atributy

  • Článek

Návrháři obsahu nabízejí jak grafický editor, tak i editor kódu HTML. Kód HTML, který generují, je kompatibilní s každým softwarem umožňujícím vykreslování kódu HTML. Navíc ale také podporují několik vlastních atributů, které umožňují přetahování prvků návrhu a obecná nastavení stylů poskytovaná grafickým editorem. Výchozí šablony zpráv a stránek poskytované aplikací Dynamics 365 Customer Insights - Journeys tyto vlastní atributy využívají, a usnadňují tak své specifické přizpůsobení. Tyto vlastní atributy můžete také využívat při vytváření vlastních šablon.

Tip

Microsoft neposkytuje podporu pro vlastní HTML v e-mailech.

Shrnutí značek a atributů

Následující tabulka obsahuje stručný přehled vlastních atributů a značek meta popisovaných v tomto tématu.

Vlastní atribut Popis
<meta type="xrm/designer/setting" name="type" value="marketing-designer-content-editor-document"> Jestliže je tato značka obsažena v části <head> vašeho dokumentu, karta Návrhář bude obsahovat funkce pro přetahování. Není-li tato značka přítomna, karta Návrhář poskytuje zjednodušený celostránkový editor. Další informace: Zobrazení sady nástrojů a umožnění úprav prostřednictvím přetahování
<meta type="xrm/designer/setting" name="additional-fonts" datatype="font" value="<font-list>"> Jestliže je tato značka obsažena v části <head> vašeho dokumentu, fonty uvedené v <seznamu fontů> (oddělených středníkem) budou přidány do nabídky fontů na formátovacím panelu nástrojů pro prvky textu. Další informace: Přidání nových fontů do panelu nástrojů prvků textu
<div data-container="true"> … </div> Označuje začátek a konec kontejneru, do kterého uživatelé mohou přetahovat prvky návrhu. Další informace: Vytvoření kontejneru, do kterého uživatelé mohou přidávat prvky návrhů
<div data-editorblocktype="<element-type>"> … </div> Označuje začátek a konec prvků návrhů. Hodnota atributu určuje, jakého typu daný prvek je (text, obrázek, tlačítko atd.). Některé prvky návrhu zde podporují dodatečné atributy. Další informace: Identifikace prvků návrhu a Uzamčení prvků v zobrazení návrháře
<meta type="xrm/designer/setting" name="<name>" value="<initial-value>" datatype="<data-type>" label="<label>"> Tato značka definuje pro celý dokument nastavení stylu, které uživatelé mohou měnit na kartě Návrhář>Styly. Další informace: Přidání nastavení na kartu Styly
/* @<tag-name> */ … /* @<tag-name> */ Pomocí komentářů CSS ohraničte hodnotu CSS, kterou má určovat nastavení stylu, kde <tag-name> je hodnota atributu name značky meta, která vytvořila dané nastavení. Další informace: Přidání komentářů CSS za účelem implementace nastavení stylu v hlavičce
property-reference= "<attr>:@< tag-name >;<attr>:@< tag-name >; …" Vložením tohoto atributu do libovolné značky HTML vložíte atribut s hodnotou určenou nastavením stylu, kde <attr> je název vytvářeného atributu a <tag-name> je hodnota atributu name značky meta, která vytvořila dané nastavení. Další informace: Přidání atributů odkazujících na vlastnost za účelem implementace nastavení stylu v těle

Zbývající části tohoto tématu obsahují další informace o používání jednotlivých funkcí shrnutých v této tabulce.

Zobrazení sady nástrojů a umožnění úprav prostřednictvím přetahování

Na kartu HTML v návrháři můžete vložit kód HTML vytvořený v libovolném jiném nástroji, a rychle tak začít s vytvářením návrhu. Pokud tak ale učiníte, karta Návrhář se zobrazí jako samostatný richtextový editor, který poskytuje panel s nástroji pro formátování textu a zobrazuje všechny obrázky, odkazy a styly obsažené ve vašem kódu HTML, ale nenabízí karty Sada nástrojů, Vlastnosti a Styly ani funkce pro přetahování (toto zjednodušené zobrazení Návrhář se někdy označuje jako celostránkový editor). Přidáním následující značky meta do sekce <head> vašeho dokumentu můžete ale povolit funkce přetahování pro jakýkoli vložený návrh:

<meta type="xrm/designer/setting" name="type" value="marketing-designer-content-editor-document">

Následující obrázek ukazuje stejný návrh v režimu celostránkového editoru (vlevo) a režimu přetahování (vpravo). Jediný rozdíl je v tom, že návrh vpravo obsahuje tuto značku meta, takže je povolené přetahování, a je zobrazený postranní panel.

Celostránkový editor vs. editor umožňující přetahování.

Poznámka:

I při používání celostránkového editoru můžete vybírat a upravovat text a nastavovat jeho styly pomocí panelu nástrojů pro formátování textu (viz obrázek) a dvojitým kliknutím na obrázky, odkazy a další prvky můžete otevřít dialogové okno s nastaveními jejich vlastností. Panel nástrojů také obsahuje tlačítko pomoci s úpravamiTlačítko přizpůsobení. pro přidávání dynamického obsahu, jako jsou hodnoty polí načítané ze záznamu kontaktu jednotlivých příjemců.

Vytvoření kontejneru, do kterého uživatelé mohou přidávat prvky návrhů

Na kartě Návrhář mohou uživatelé upravovat pouze obsah dostupný v rámci prvku návrhu a mohou přetahovat pouze nové prvky návrhu do těch částí dokumentu, které jsou nastavené jako datové kontejnery. Můžete tedy vytvářet šablony, které mají některé oblasti (mimo kontejnery) uzamčené proti úpravám na kartě Návrh, zatímco jiné oblasti (uvnitř odemčených kontejnerů) úpravy i přetahování obsahu umožňují.

Pomocí značek <div>, které obsahují atribut data-container="true", můžete vytvářet datové kontejnery, jako například:

<table aria-role="presentation">
    <tbody><tr>
        <td>
            LOCKED
        </td>
        <td>
            <div data-container="true">
                <!-- DRAG HERE -->
            </div>
        </td>
    </tr>
</tbody></table>

Jakýkoli text nebo značky HTML, které se nacházejí uvnitř párových značek div s atributem data-container a které nejsou součástí prvku návrhu, utvoří nepřetahovatelnou neupravovatelnou oblast mezi dvěma přetahovatelnými oblastmi. Příklad: 

<div data-container="true">
    <!-- DRAG HERE --> <p> LOCKED </p> <!-- DRAG HERE -->
</div>

Poznámka:

Jestliže je aktivní celostránkový editor, jsou zakázány všechny funkce přetahování a veškerý obsah můžete upravovat na kartě Návrhář, včetně obsahu mimo značky div s atributem data-container (které nemají v celostránkovém editoru žádný význam).

Uzamčení kontejneru v zobrazení návrháře

Můžete uzamknout kontejner a udělat celý jeho obsah pouze pro čtení na kartě Návrhář. Pokud uzamčený kontejner obsahuje prvky návrhu, zůstanou poté celý obsah a všechna nastavení těchto prvků uzamčena a nikdy se u nich nezobrazí karta Vlastnosti, i když je vyberete.

Funkci uzamčení kontejneru můžete použít k uzamčení kontejneru poté, co ukončíte přidání a konfiguraci komponent návrhu.

Chcete-li uzamknout kontejner, přidejte atribut data-locked="hard" ke značce kontejneru tímto způsobem:

<div data-container="true" data-locked="hard">
    <!-- All elements and content here are locked, with no properties shown -->
</div>

Poznámka:

Kontejner můžete rovněž uzamknout na úrovni prvku návrhu. Pokud je obsah uzamčen na úrovni kontejneru, má toto nastavení prioritu nad uzamčeným nebo odemčeným stavem všech prvků návrhu uvnitř tohoto kontejneru. Další informace: Uzamčení prvků v zobrazení návrháře

Chcete-li dále vynutit uzamčení kontejneru, můžete omezit přístup na kartu HTML, což zabrání vybraným uživatelům v přístupu k tomuto kódu (kde by jinak mohli toto nastavení přepsat). Další informace: Řízení přístupu k funkcím návrháře

Identifikace prvků návrhu

Vždy, když pomocí karty Návrhář přidáte prvek návrhu, vloží editor párové značky <div> označující začátek a konec prvku a vytvoří kód HTML potřebný k zobrazení daného prvku na základě nastavení na kartě Vlastnosti.

Prvky návrhů jsou označeny značkami <div>, které obsahují atribut data-editorblocktype="<element-type>", kde hodnota tohoto atributu určuje typ daného prvku. Například následující značka <div> vytvoří prvek textu:

<div data-editorblocktype="Text">
    ...
    <!-- Don't edit the element content here -->
    ...
</div>

Následující tabulka obsahuje možné hodnoty atributu data-editorblocktype.

Název prvků návrhu Typ prvku Hodnota atributu data-editorblocktype
Prvek textu Společný prvek návrhu Text
Prvek obrázků Společný prvek návrhu Image
Prvek rozdělovače Společný prvek návrhu Rozdělovač
Prvek tlačítek Společný prvek návrhu Tlačítko
Prvek bloku obsahu Společný prvek návrhu Obsah
(Tento typ prvku návrhu též obsahuje atribut data-block-datatype="<block-type>", který identifikuje, o jaký typ bloku obsahu se jedná, kde <block-type> má hodnotu buď text nebo image.)
Prvek marketingové stránky E-mail Marketingová stránka
Prvek akce E-mail Akce
Prvek průzkumu E-mail Dotazník
Prvek formuláře Formulář FormBlock
Prvek pole Obsah formuláře Field-<field-name>, například: Field-email
Prvek seznamu odběrů Obsah formuláře SubscriptionListBlock
Prvek přeposlání příteli Obsah formuláře ForwardToFriendBlock
Prvek e-mailu se zakázaným odesíláním a prvek zapamatování Obsah formuláře Zaškrtávací políčko
(Tyto prvky vytvářejí zaškrtávací políčka a dále se odlišují podle svých interních nastavení.)
Prvek tlačítek odeslání Obsah formuláře SubmitButtonBlock
Prvek tlačítek obnovení Obsah formuláře ResetButtonBlock
Prvek testu Captcha Obsah formuláře CaptchaBlock

Další informace o jednotlivých prvcích návrhu najdete v tématu Referenční informace k prvkům návrhu.

Důležité

Když pracujete na kartě HTML, měli byste se vyvarovat úpravám jakéhokoli obsahu mezi značkami <div> vašich prvků návrhu, protože výsledky takových úprav mohou být nepředvídatelné a návrhář vaše úpravy stejně pravděpodobně přepíše. Namísto toho pro práci s prvky návrhu a vlastnostmi používejte kartu Návrhář.

Uzamčení prvků v zobrazení návrháře

Můžete uzamknout obsah a vlastnosti jakéhokoliv prvku návrhu přidáním následujícího atributu do jeho otevírací značky <div>:

data-protected="true"

Například:

<div data-editorblocktype="Divider" data-protected="true">
    …
        <!-- Don't edit the element content here -->
    …
</div>

Když je prvek návrhu označen jako chráněný, uživatelé pracující na kartě Návrhář stránky nebo e-mailu nebudou moct upravovat vlastnosti nebo obsah prvku. Tento atribut je vždy pro prvek bloku obsahu obsažený, ale můžete ho přidat k jakémukoliv typu prvku návrhu, abyste ho ochránili. Všechny prvky návrhu obsahující tento atribut se zobrazí na kartě HTML stínovaně, což označuje, že jsou chráněné. Ale pokud na tom trváte, můžete je zde stále upravovat. Nastavte tento tribut na „false“ (nebo ho odeberte), čímž odstraníte ochranu z prvku návrhu.

Poznámka:

Můžete též zamknout obsah na úrovni kontejneru, což má větší prioritu než uzamčený nebo odemčený stav všech prvků návrhu uvnitř tohoto kontejneru. Další informace: Uzamčení kontejneru v zobrazení návrháře

Chcete-li dále vynutit uzamčení obsahu, můžete omezit přístup na kartu HTML, což zabrání vybraným uživatelům v přístupu k tomuto kódu (kde by jinak mohli toto nastavení přepsat). Další informace: Řízení přístupu k funkcím návrháře

Import externě vytvořeného HTML do návrháře

Můžete použít libovolný nástroj, pro vytvoření počátečního rozložení HTML a obsahu pro marketingový e-mail, stránku nebo formulář. Když je vaše HTML připraveno, vložte ho do příslušného návrháře a přidejte všechny funkce Dynamics 365 Customer Insights - Journeys, které potřebujete, jak je popsáno v následujících podsekcích.

Import vašeho kódu HTML

Pro přenesení externě vytvořeného HTML do návrháře, začněte následujícím způsobem:

  1. Vytvořte nový marketingový email, stránku nebo formulář v Dynamics 365 Customer Insights - Journeys.
  2. Přejděte na kartu Návrh>HTML návrháře.
  3. Vymažte veškerý obsah z karty HTML a vložte jej do HTML vytvořeného externě.
  4. Přejděte na kartu Návrh>Návrhář návrháře a zkontrolujte svůj návrh.
  5. Pokud pracujete s marketingovým e-mailem, nezapomeňte použít pomoc s úpravami pro umístění veškerého požadovaného obsahu a odkazů (včetně odkazu na centrum předplatného a fyzickou adresu odesílatele).

Tip

Protože jste právě vložili do externího HTML, váš návrh pravděpodobně neobsahuje žádný kód, který je specifický pro Dynamics 365 Customer Insights - Journeys, takže Návrhář ukazuje celostránkový editor, který poskytuje funkce pro základní formátování textu, formátování obrázků a (pro e-maily) pomoc s úpravami pro přidání dynamického obsahu. Další informace o práci s celostránkovým editorem naleznete v tématu obrazení sady nástrojů a umožnění úprav prostřednictvím přetahování. Pokud celostránkový editor poskytuje všechny funkce, které potřebujete, použijte jej k doladění vašeho návrhu a pak s ním přejděte do ostrého nasazení jako obvykle. Pokud dáváte přednost použití editoru umožňujícímu přetahování pro doladění svého návrhu, přečtěte si v další části informace o způsobu jeho povolení.

Povolení editoru umožňujícího přetahování po importu

Pokud chcete povolit plně funkční editor umožňující přetahování, anebo přidávat pokročilé prvky návrhu při práci v zobrazení Návrháře, můžete tak snadno provést dalším upravením importovaného kódu HTML následujícím způsobem:

  1. Přejděte zpět na kartu Návrh>HTML návrháře.

  2. Editor přetahování aktivujte přidáním požadované metaznačky do části vašeho dokumentu, jak je popsáno v části Zobrazení panelu nástrojů a aktivace úprav přetažením.

  3. Pode potřeby proveďte následující kroky při práci na kartě Návrh>HTML:

    • V každé části svého návrhu, kde byste chtěli přetáhnout jeden nebo více prvků návrhu, přidejte kód a vytvořte datový kontejner, jak je popsáno v části Vytvoření kontejneru, do kterého uživatelé mohou přidávat prvky návrhů.
    • Pokud dáváte přednost umístění prvků návrhu přímo do kódu bez použití přetažení, můžete požadovaný kód zadat přímo na kartě Návrh>HTML. Prvky, které přidáte tímto způsobem, nepodporují přetažení, ale poskytují nastavení na panelu Vlastnosti karty Návrh>Návrhář. Pomocí této techniky můžete umístit pouze prvky textu, obrázku, rozdělovače a tlačítka (vytvořit kontejnery a použít přetažení pro jiné typy prvků návrhu). Nahlédněte do tabulky po tomto postupu pro struktury HTML potřebné k vytvoření každého z těchto prvků; zkopírujte/vložte tento kód přímo z tabulky podle potřeby.

  4. Nyní můžete jít na kartu Návrh>Návrhář a přetáhněte prvky návrhu do každého kontejneru, který jste nastavili, a pak použijte panel Vlastnosti pro konfiguraci každého prvku návrhu, který jste přetáhli nebo vložili přímo do kódu.

Typ prvků návrhu Vložení tohoto kódu Poznámky                                                     
Text <div data-editorblocktype="Text"><p> Enter your text here</p></div> Mezi značky <p> můžete zadávat obsah HTML přímo zde, nebo přejděte na Návrháře a použijte k tomu editor formátovaného textu.
Image <div data-editorblocktype="Image"><div align="Center" class="imageWrapper"><a href="example.com" title="example.com"><img alt="Some alt text" height="50" src="about:blank" width="50"></a></div></div> Nejjednodušší způsob, jak změnit zdroj obrázku anebo odkaz na obrázek, je přejít na Návrháře a použít panel Vlastnosti. Následující atributy můžete také upravit přímo v kódu HTML:
  • Nastavte odkaz na obrázek anebo název úpravou atributů href anebo názvu prvku <a>.
  • Chcete-li odstranit odkaz z obrázku, vymažte obsah atributů href a title prvku <a> (ale zachovejte atributy a uvozovky, jako je href="").
  • Nastavte zdroj obrázku úpravou atributu src <img>.
Žádný jiný kód neupravujte.
Divider <div data-editorblocktype="Divider"><div align="center" class="dividerWrapper"><table aria-role="presentation" style="padding: 0px; margin: 0px; width: 100%"><tbody><tr style="padding: 0px;"> <td style="margin:0px; padding-left: 0px; padding-right: 0px; padding-top: 5px; padding-bottom: 5px; vertical-align:top;"> <p style="margin: 0px; padding: 0px; border-bottom-width: 3px; border-bottom-style: solid; border-bottom-color: rgb(0, 0, 0); line-height: 0px; width: 100%;"><span>&nbsp;</span></p></td></tr></tbody></table></div></div> Žádný z těchto kódů neupravujte přímo v editoru HTML. Místo toho přejděte na Návrháře a použijte panel Vlastnosti.
Button <div data-editorblocktype="Button"><!--[if mso]><div align="center"><v:rect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" Žádný z těchto kódů neupravujte přímo v editoru HTML. Místo toho přejděte na Návrháře a použijte panel Vlastnosti.

Další informace o tom, jak se prvky návrhu zobrazují v kódu, naleznete v tématu Identifikace prvků návrhu.

Přidání nových fontů do panelu nástrojů prvků textu

Prvky textu poskytují automaticky otevíraný panel nástrojů formátování v návrháři, který obsahuje nabídku pro použití fontu na zvolený text.

Výběr písma pro textové prvky.

Chcete-li přidat nové fonty do tohoto výběru fontů, přidejte značku <meta>, která používá následující formulář na <head> dokumentu:

<meta type="xrm/designer/setting" name="additional-fonts" datatype="font" value="<font-list>">

Kde <seznam fontů> je středníkem oddělený seznam názvů fontů.

Přidání nastavení na kartu Styly

Jednou z užitečných funkcí standardních šablon jsou globální nastavení stylů na kartě Styly, která uživatelům umožňují rychle měnit rodinu písem, barevnou paletu a další globální nastavení dané šablony. Každá šablona obsahuje pouze ta nastavení stylů, která v daném návrhu dávají smysl. Stejně tak můžete navrhovat šablony, které poskytují jen styly potřebné pro vás a vaše uživatele.

Karta Návrhář > styly.

Chcete-li na kartu Styly přidat nastavení, postupujte následovně:

  • Přidáním značky <meta> do oddílu <head> vašeho dokumentu vytvořte dané nastavení.
  • Vytvořte styly anebo značky HTML, které aplikují nastavení vytvořené danou značkou meta.

Následující podčásti vysvětlují, jak tyto jednotlivé kroky provést.

Přidání značky meta za účelem vytvoření nastavení

Požadovaná značka <meta> vypadá následovně:

<meta type="xrm/designer/setting" name="<name>" value="<initial-value>" datatype="<data-type>" label="<label>">

Kde:

  • <název> identifikuje značku meta, na kterou se musíte také odkazovat ve stylech a značkách HTML, kde bude dané nastavení aplikováno.
  • <initial-value> je vhodná výchozí hodnota daného stylu.
  • <data-type> určuje typ hodnoty, kterou budou uživatelé zadávat. Toto nastavení ovlivňuje typ ovládacího prvku, který se bude zobrazovat na kartě Styly. Je nutné použít jednu z hodnot uvedených v následující tabulce.
  • <label> určuje text, který se bude zobrazovat na kartě Styly pro dané nastavení.
Hodnota datového typu Popis
color Nastavuje barvu pomocí hashtagových hodnot, například #000 nebo #1a32bf. Vytvoří na kartě Styly ovládací prvek pro výběr barvy.
font Nastavuje název rodiny písem. Můžete také nastavit sady písem pomocí seznamu názvů písem oddělených čárkou v preferovaném pořadí. Vytvoří na kartě Styly jednoduché vstupní pole.
number Nastavuje číselnou hodnotu bez jednotky (chcete-li spolu s hodnotou určit jednotku, použijte text jako px či em). Vytvoří na kartě Styly vstupní pole s tlačítky nahoru a dolů, pomocí kterých je možné zvyšovat a snižovat aktuální hodnotu.
picture Nastaví zdroj obrázku (jako adresu URL). Vytvoří na kartě Styly jednoduché vstupní pole.
text Nastaví hodnotu, která může obsahovat text i čísla. Tento datový typ použijte také pro číselné hodnoty, které mohou obsahovat jednotku (jako například px či em). Vytvoří na kartě Styly jednoduché vstupní pole.

Poznámka:

Nadpis na kartě Styly se může zobrazit v hranatých závorkách, například [Můj styl]. Hranaté závorky určují, že pro zobrazený text není k dispozici překlad. Pokud zvolíte hodnotu podporovanou některou ze standardních šablon (například Barva 1), pak bude překlad k dispozici a hranaté závorky se nezobrazí.

Poznámka:

Nastavení stylu vytvořené značkou <meta>, jak je zde popsáno, se na kartě Styly zobrazuje pouze tehdy, pokud se na něj odkazuje alespoň jedním skutečně použitým stylem nebo značkou HTML, jak je vysvětleno v dalších částech.

Přidání komentářů CSS za účelem implementace nastavení stylu v hlavičce

Nastavení provedená na kartě Styly je možné aplikovat na styly CSS vytvořené v oddílu <head> vašeho HTML dokumentu tak, že hodnotu CSS uzavřete mezi dva komentáře CSS, které obsahují hodnotu atributu name odpovídající meta značky xrm/designer/setting. Párové komentáře CSS vypadají následovně:

/* @<tag-name> */ <value> /* @<tag-name> */

Kde:

  • <tag-name> je název atributu meta značky xrm/designer/setting, která vytváří příslušné nastavení na kartě Styly.
  • <value> je hodnota, kterou uživatel změní úpravou příslušného nastavení na kartě Styly.

Důležité

Tyto párové komentáře CSS je možné používat pouze ve stylech a třídách definovaných v rámci značek <style> v oddílu <head>. Navíc může být použita jen jedna sada značek <style>, která definuje všechny styly CSS.

Zde je příklad značky meta xrm/designer/setting, která na kartě Styly vytváří ovládací prvek pro výběr barvy nazvaný Barva 1. Styl CSS následně aplikuje toto nastavení na barvu textu elementů <h1>.

<head>
    <meta type="xrm/designer/setting" name="color1" value="#ff0000" datatype="color" label="Color 1">
    <style>
        h1 {color: /* @color1 */ #ff0000 /* @color1 */;}
    </style>
</head>

Přidání atributů odkazujících na vlastnost za účelem implementace nastavení stylu v těle

Nastavení provedená na kartě Styly je možné aplikovat jako hodnoty atributů na libovolnou značku HTML v oddílu <body> vašeho dokumentu tak, že do každé příslušné značky přidáte následující atribut:

property-reference= "<attr>:@< tag-name >;<attr>:@< tag-name >; …"

Kde:

  • <attr> je název atributu, který chcete vytvořit.
  • <tag-name> je hodnota atributu name meta značky, která vytváří příslušné nastavení.
  • Pokud je v rámci jednoho atributu odkazujícího na vlastnost nutné použít více atributů, musí být odděleny středníkem.

Zde je příklad značek meta xrm/designer/setting, které na kartě Styly vytvářejí dvě nastavení pro určení hlavního obrázku (banneru) v dokumentu, s ovládacími prvky Hlavní obrázek a Výška hlavního obrázku. K implementaci těchto nastavení je následně použita vlastnost property-reference ve značce <img>.

<head>
    <meta type="xrm/designer/setting" name="hero-image" value="picture.jpg" datatype="picture" label="Hero image">
    <meta type="xrm/designer/setting" name="hero-image-height" value="100px" datatype="text" label="Hero image height">
</head>
<body>
    <img property-reference="src:@hero-image;height:@hero-image-height;">
</body>

Značka <img> v tomto příkladu bude následně vypadat takto:

<img src="picture.jpg" height="100px">