Email Html Là Gì

 - 

I> Giới thiệu:

Mấy hôm nay mình xem mấy template email (email có nội dung được hiển thị như trang web) mẫu thấy đẹp quá nên muốn tìm hiểu thử, như email này khá quen với mọi người:

*

Mình cứ nghĩ sẽ viết giống như y như cách viết trang web bình thường, ai ngờ khi tìm hiểu mới thấy nó khác. Nào cùng mình tìm hiểu nào:

II > Cùng tìm hiểu nào:

1. Các rule cơn bản:

Nội dung gửi chỉ gồm các đoạn text ( trong mail làm gì có chia thư mục có chứa các file để import vào như html web).Điều này áp dụng khi bạn muốn nhúng link ảnh bạn phải nhúng link từ hệ thống ngoài, hay như style bạn phải viết dụng inlinePhải dễ dàng áp dụng khi content thay đổi

2. Email sẽ SẼ không hoạt động với:

FlashJavascriptCác style phức tạp đặc biệt là của css3 như: grid, flex, animation, ...html: các thẻ html5, button, form,...

Bạn đang xem: Email html là gì

3. Nên áp dụng table để chia layout:

Vì các trình đọc mail khác với web rất khó control, nó chỉ ăn được cách chia layout tôt nhất là với dạng table. Các dạng style float, flex, grid đa số sẽ không hoạt động được!

Ví dụ mình có 1 đoạn làm thẻ header:

*

để chia align cho hình hay text, mình đều chia align với thẻ td.Để chia padding hay width của dòng, mình đều dùng các thuộc tính của thẻ tableKhai báo thêm style="table-layout: fixed;" với table

Có 1 format khác bạn có thể tham khảo


4> Thẻ image và thẻ button:

Với thẻ image, ta thường phải khai báo thuộc tính:

src: phải là 1 link dạng internal từ bên ngoàialt: load không thành công, hoặc lúc load không đượcborder: 0Nếu chia thêm các thuộc tính khác, ta nên khai báo thêm style: display:block

Với button, ta sẽ khai báo đó là thẻ a (để liên kết ra ngoài)

Ví dụ như bên dưới đây, mình muốn hiển thị 1 item product:

*

5> style:

Chỉ có thể viết dưới 2 dạng: viết ở thẻ style ở head hoặc viết style inline. Với cách style inline sẽ tốt hơn.Ví dụ như để style 1 button mình đã viết:

a border="0" href="#" style="text-decoration:none;display:inline-block;color:#000000;background-color:#f6d16c;border-radius:0px;-webkit-border-radius:0px;-moz-border-radius:0px;width:auto; width:auto;;border-top:1px solid #f6d16c;border-right:1px solid #f6d16c;border-bottom:1px solid #f6d16c;border-left:1px solid #f6d16c;padding-top:1px;padding-bottom:2px;font-family:Merriwheater, Georgia, serif;text-align:center;mso-border-alt:none;word-break:keep-all;"> span style="padding-left:10px;padding-right:10px;font-size:12px;display:inline-block;"> Chi tiết span>a>Và để style common cho các td:

html lang="en">head> title>Template emailtitle> meta charset="utf-8"> meta name="viewport" content="width=device-width"> style type="text/css"> td { font-size: 14px; } style>head>Để có thể dễ dàng thiết kế teamplate email thường có thể áp dụng nhanh hơn.

Xem thêm: Làm Thế Nào Để Loại Bỏ Trotux Pada Browser, Cara Menghapus Trotux ▷ ➡️ Creative Stop ▷ ➡️

IV> Tổng kết:

Có được 1 temple đẹp và chạy được trên nhiều thiết bị thì bạn cần phải chú ý những điều như mình đã note. Để tạo ra nhanh và chính xác bạn có thể sử dụng các tool hay website có sẵn. Mình vẫn đang tìm hiểu các nội dung khác: responsive,...

Xem thêm: 7 Loại Thuốc Maxman: 6800Mg, 3800Mg, Loại 24 Viên, Gel Và Cách Sử Dụng & Giá Bán

Cảm ơn người anh đã viết bài này: https://hawacorp.vn/p/giai-phap-cho-html-email-responsive-4P856a6BlY3 để mình hiểu hơn.