Jak vytvořit a odeslat vlastní HTML e-mail

Interaktivní HTML e-mail je mocný nástroj. Firmy je mohou využít pro promo nabídky, nezávislí pracovníci je mohou využít k prezentaci svých služeb potenciální klienti a vnoučata mohou vykouzlit úsměv na tváři svých prarodičů pomocí roztomilého zvyku design. Jediné dvě technologie, které budete potřebovat k vytvoření vlastního e-mailu od začátku, jsou HTML a inline CSS. Vše, co musíte udělat, je vzít v úvahu návrh, analyzovat jej ve formě řádků a sloupců tabulky a můžete začít stavět. V tomto článku se naučíte krok za krokem vytvořit a odeslat vlastní HTML e-mail.

Vytvořte šablonu e-mailu pomocí HTML

Šablona e-mailu se opírá o tradiční techniky HTML. Budete pracovat s tabulkami a skládat řádky tabulky a tabulkové údaje celou dobu. Základní HTML šablona e-mailu vypadá takto:

...
...
...
...
...
...
...




...

Výstup:

Nejlepší by bylo připravit si design, abyste si mohli zmapovat, kde a jak budete design rozřezávat. Navíc budete duševně připraveni z toho navrhnout strukturu tabulky.

Zde začínáte s DOCTYPE pro dokument. Dále nastavíte znakovou sadu, typ obsahu, meta tagy a název uvnitř štítek. Podstatná část začíná tím tag, kam umístíte rodiče a přidat více řádků tabulky uvnitř toho. Po rozdělení obsahu do správného počtu řádků je čas zadat data tabulky uvnitř nich.

Jak již bylo řečeno, musíte pracovat pouze s tabulkami. Proto pro zadávání různých údajů uvnitř musíte sledovat definovanou trasu. Vytvořme si například e-mailovou šablonu s logem a datem uvnitř a štítek.

 Logo a datum uvnitř značky 
 

















5. prosince 2021

Nyní víte, jak umístit HTML tagy a vytvořit dobrou strukturu pro vaši e-mailovou šablonu. Pojďme vpřed, abychom lépe porozuměli stylům e-mailů.

Upravte svůj HTML e-mail

Stylování HTML e-mailu je těžkopádný úkol, protože můžete používat pouze inline CSS. Také budete muset opakovat styl každého prvku, pokud má podobný styl. Pokud neznáte kaskádové styly, prozkoumejte je jak začít s CSS.

Náhled:

 5. prosince 2021 






































Ahoj John Doe



Děkujeme, že jste navštívili naše stránky. Doufáme, že jste se dnes dozvěděli něco nového.





 Váš názor je pro nás důležitý! 

 Zde ohodnoťte naše články. 


012345678910

Výstup:

Jestli chceš, můžeš přístup ke kompletnímu kódu na GitHubu a naklonujte úložiště, abyste jej mohli používat.

Odeslání pošty

Nyní zkopírujte a vložte celý kód z GitHubu. Pokud používáte VS Code, otevřete soubor HTML pomocí živé serverové přípony a zkopírujte obsah kliknutím na Ctrl + A>Ctrl + C. Otevřete Gmail a napište nový e-mail. Vložte obsah a zadejte e-mailové ID příjemce. Pošlete e-mail a dostanete výsledky, jak je uvedeno níže:

Otestujte kód na různých zařízeních, abyste viděli, jak vypadá a chová se. Přizpůsobte si svůj HTML e-mail a udělejte jej čistý, jednoduchý a citlivý.

Upravit existující e-mailové šablony

Vytvoření HTML e-mailu od začátku vyžaduje solidní ovládání HTML a vložených CSS. Můžete také upravit existující šablonu e-mailu a upravit ji podle svých potřeb. Mějte na paměti, že načítání HTML e-mailů obvykle trvá několik sekund. Plánujte, navrhujte, kódujte a provádějte důkladné testování, abyste se vyhnuli případným nesrovnalostem u koncových uživatelů. Můžete se dozvědět více o sémantickém HTML a CSS, abyste mohli psát lepší a dostupnější kód.

Naincy Mouryaová (17 zveřejněných článků)

Naincy se specializuje na vytváření vysoce responzivních webových stránek a efektivní obsahové strategie spolu s webovými kopiemi. Je to nezávislá tech spisovatelka, která ostře sleduje trendy technologií.

Více od Naincy Mouryaové