Làm cách nào để tạo chữ ký email HTML?

Bạn có muốn tạo chữ ký email HTML chuyên nghiệp tương thích với Outlook, Apple Mail, Gmail và nhiều ứng dụng email khác không? . Trong hướng dẫn này, bạn sẽ tìm hiểu cách tạo một chữ ký email đẹp trông bắt mắt và siêu chức năng

Trước khi chúng tôi bắt đầu, bạn nên biết rằng việc tạo chữ ký email theo cách thủ công đôi khi có thể là một công việc tốn thời gian và tẻ nhạt. Chúng tôi luôn khuyên bạn nên sử dụng trình tạo chữ ký email vì đó là cách nhanh nhất và dễ dàng nhất để có một chữ ký email tuyệt vời. Tuy nhiên, nếu bạn muốn tự tạo chữ ký email, hãy tiếp tục đọc

1. Tải xuống mẫu chữ ký email

Cách tốt nhất để tạo chữ ký email HTML là bắt đầu với một mẫu và sau đó sửa đổi nó cho phù hợp với nhu cầu của bạn

Chúng tôi có một danh sách lớn các mẫu chữ ký email miễn phí mà bạn có thể tải xuống và sử dụng vì lý do chính xác này

MẪU CHỮ KÝ EMAIL

Chọn mẫu chữ ký email phù hợp

Khi duyệt qua các mẫu của chúng tôi, điều quan trọng là phải xem xét một số điều

• Nhìn vào bố cục của mẫu – Tương đối dễ dàng để thay đổi những thứ như hình ảnh, màu sắc, phông chữ, v.v. Tuy nhiên, thường khó thay đổi vị trí của các phần tử hơn. Khi chọn một mẫu chữ ký email phù hợp, bạn phải luôn kiểm tra xem bố cục có đúng (đại khái) không. Điều này có nghĩa là kiểm tra vị trí của hình ảnh, biểu tượng xã hội, văn bản, khoảng cách và đường viền
• Bố cục ngang hoặc dọc – Có chữ ký email tương thích với thiết bị di động là rất quan trọng trong thời đại ngày nay. Bố cục dọc hoạt động tốt hơn cho thiết bị di động. Tuy nhiên, nếu bạn không có quá nhiều thông tin trong chữ ký email của mình và có thể giữ nó hẹp hơn khoảng 400 pixel, bạn có thể sử dụng bố cục ngang.
• Kích thước bố cục tổng thể – Mặc dù việc chỉnh sửa những thứ góp phần vào kích thước tổng thể của bố cục là tương đối dễ dàng, nhưng sẽ dễ dàng hơn nếu bạn sử dụng một mẫu đã có phông chữ, cỡ chữ, độ rộng đường viền, khoảng cách chính xác, v.v. Mẫu đã chọn càng gần với chữ ký email cuối cùng của bạn thì bạn càng ít phải chỉnh sửa

Các thành phần của tệp mẫu đã tải xuống

Dưới đây là các thành phần của tệp ZIP mẫu chữ ký email đã tải xuống

• mẫu. html – Đây là tệp chính chúng tôi sẽ sử dụng để tạo chữ ký email HTML của bạn trong hướng dẫn này. Nó chứa mã HTML rút gọn cần thiết để chữ ký email của bạn hiển thị chính xác
• hướng dẫn. txt – Đây là một tệp văn bản có một số thông tin về mẫu đã tải xuống bên trong nó

2. Cài đặt một số chương trình và thiết lập một số thứ

Bạn sẽ cần một vài ứng dụng để có thể tạo chữ ký email của mình một cách chính xác. Ngay cả khi bạn có một số ứng dụng thay thế, để đảm bảo tính nhất quán, chúng tôi khuyên bạn nên sử dụng các ứng dụng sau vì chúng phù hợp với các bước trong hướng dẫn này

Google Chrome

Định dạng thay đổi một chút giữa các trình duyệt cho chữ ký email, vì vậy chúng tôi sẽ gắn bó với Chrome

TẢI GOOGLE CHROME

Trình soạn thảo văn bản tuyệt vời

Nó giúp chỉnh sửa mã dễ dàng thông qua nhiều phím tắt và định dạng

TẢI SUBLIME TEXT EDITOR

Hiển thị phần mở rộng tệp

Hầu hết các tệp trên máy tính đều có phần mở rộng trong tên tệp, nhưng chúng bị tắt theo mặc định trong Windows. Máy tính của bạn liên kết các loại tệp với các ứng dụng khác nhau trên máy tính của bạn. Ví dụ, mở một tệp có tên là tệp. html có thể mở nó trong Internet Explorer, Chrome, trình soạn thảo Sublime Text hoặc có thể là Notepad. Chúng tôi sẽ cần có thể xem phần mở rộng tệp vì nhiều lý do

Chỉ cần mở File Explorer > View > Đánh dấu vào “Phần mở rộng tên tệp”

3. Giới thiệu cần thiết về HTML

Mục tiêu của phần này là giúp bạn làm quen với HTML, CSS, tất cả các thuật ngữ khác nhau và cả các bảng HTML. Với kiến ​​thức này, bạn sẽ có thể tạo chữ ký email chỉ trong vài phút

Chúng tôi không giả định bất kỳ kiến ​​thức nào trước đó ở đây vì vậy có một chút công bằng để trình bày, nhưng hướng dẫn này khá ngắn gọn. Cách tốt nhất để bắt đầu viết/chỉnh sửa mã HTML là tiến hành chậm rãi và cẩn thận. Sai lầm tỷ lệ thuận với các giả định

Vui lòng xem qua Tài liệu tham khảo HTML này nếu bạn không chắc chắn về cách thức hoạt động của một thẻ cụ thể hoặc tác dụng của nó

Thuật ngữ

• Tag – the component name that is inside the angle brackets (<>). For example, this is the table tag:
  Element – the content within the opening and closing tags, including the tags themselves. For example, This is some text
  Attribute – the attribute is inside the tag brackets (<>). For example, this is the border attribute inside the table element:
  Attribute Value – the value assigned to the attribute. For example, the border attribute value in this case is set to zero:
  Phần tử gốc– phần tử bên ngoài chứa phần tử hiện tại
  Phần tử con – phần tử bên trong là hậu duệ trực tiếp của phần tử hiện tại
  Phần tử anh chị em– bất kỳ phần tử nào có cùng phần tử cha với phần tử hiện tại
  CSS Property – the first part (before the colon) of the attribute value inside the style attribute. For example, the property in this case is padding-bottom:

  CSS Property Value – the second part (after the colon) of the attribute value inside the style attribute. For example, the property value in this case is 4px:

  Cấu trúc HTML – Thành phần dạng cây In the context of HTML email signatures, all tags come in pairs, except for Các thẻ cũng có thể có các thuộc tính gắn liền với chúng làm thay đổi hành vi của thẻ theo một cách nào đó. Khi tạo chữ ký email HTML của bạn, chúng tôi sẽ thêm các thuộc tính để kiểm soát kiểu chữ ký và khả năng tương thích với nhiều ứng dụng email Trong ngữ cảnh chữ ký email (không phải tất cả HTML), thuộc tính thẻ luôn được viết sau tên thẻ trong thẻ mở, luôn có tên thuộc tính, theo sau là dấu bằng và sau đó là dấu ngoặc kép, với một số thông tin nằm giữa dấu ngoặc kép This is a sentence which will be shown using the Verdana size 12 font. Trong mã ví dụ trên, bạn có thể thấy cấu trúc dạng cây của HTML, trong đó các thẻ được lồng bên trong các thẻ khác. Bạn cũng sẽ nhận thấy rằng một số thẻ có thuộc tính và giá trị, trong khi những thẻ khác thì không Bảng HTML – Cơ sở của bố cục chữ ký email Firstly, it’s important to understand that around 95% of the HTML code in an email signature is related to tables. So, when you create an HTML email signature, you’re mostly going to be dealing with , , , and … – This is the table body and always sits directly inside the table element. Easy! … – Stands for Table Row. – Stands for Table Data. This is the equivalent of a column and can be used to hold a single image, some text, or even another table – yes, tables can be nested. Bạn sẽ cần làm quen với một số đặc điểm của bảng để biết cách sắp xếp mã HTML cho chữ ký email mới của mình. Một số điều có vẻ tầm thường, nhưng nếu bạn thấy mình đang xem HTML của mình và mọi thứ không xuất hiện như bạn mong đợi, chỉ cần tự hỏi bản thân xem liệu tất cả các điểm được nêu bên dưới đã được tuân thủ hay chưa và bạn sẽ thấy rõ mình đã sai ở đâu Một số hướng dẫn liên quan đến cấu trúc bảng HTML Bàn luôn là hình vuông hoặc hình chữ nhật nhưng không thể có hình chữ L Mọi cột bên trong bất kỳ hàng cụ thể nào đều có cùng chiều cao với mọi cột khác bên trong hàng đó Mỗi cột bên trong bất kỳ cột cụ thể nào có cùng chiều rộng với mọi cột khác bên trong cột đó Các cột phải được đặt trực tiếp bên trong các hàng Các hàng phải được đặt trực tiếp bên trong thân bảng Thân bàn phải được đặt trực tiếp bên trong bàn elements. These are the “core scaffolding” elements required to make a fully functioning email signature. Giải thích ngắn gọn về các phần tử liên quan đến bảng HTML … – This is the table. … MEGHAN DUNLOP Project Manager Flame Tree Creative Trong mã ví dụ trên, có một phần tử bảng, có 3 hàng và mỗi hàng có một cột bên trong và mỗi cột có một khoảng bên trong nó. Một số thẻ có các thành phần kiểu dáng xác định kiểu dáng của dữ liệu bên trong chúng CSS – Tạo kiểu chữ ký email CSS là viết tắt của Cascading Style Sheets và mặc dù chữ ký email HTML không sử dụng CSS theo nghĩa truyền thống nơi các kiểu được xác định bằng các lớp, chúng vẫn sử dụng các thuộc tính CSS. Nếu bạn không chắc chắn về cách một thuộc tính CSS cụ thể hoạt động hoặc tác dụng của nó, hãy xem Tài liệu tham khảo CSS này Since most email clients don’t support the use of