Email HTML interaktif adalah alat yang ampuh. Bisnis dapat menggunakannya untuk penawaran promo, pekerja lepas mungkin menggunakannya untuk menawarkan layanan mereka ke calon klien, dan cucu dapat membawa senyum ke wajah kakek-nenek mereka dengan kebiasaan yang lucu desain. Hanya dua teknologi yang Anda perlukan untuk membuat email khusus dari awal adalah HTML dan CSS sebaris. Yang perlu Anda lakukan hanyalah memikirkan desain, menganalisisnya dalam bentuk baris dan kolom tabel, dan Anda siap untuk mulai membangun. Dalam artikel ini, Anda akan mempelajari metode langkah demi langkah untuk membuat dan mengirim email HTML khusus.
Buat Template Email Menggunakan HTML
Template email bergantung pada teknik HTML tradisional. Anda akan bekerja dengan tabel dan menumpuk baris tabel dan data tabel selama ini. Template email HTML dasar terlihat seperti ini:
MUO - Teknologi, Sederhana
...
...
...
...
...
...
...
...
Keluaran:
Akan lebih baik untuk menyiapkan desain sehingga Anda dapat memetakan di mana dan bagaimana Anda akan memotong desain. Selain itu, Anda akan siap secara mental untuk menyusun struktur tabel darinya.
Di sini, Anda mulai dengan DOCTYPE untuk dokumen. Selanjutnya, Anda mengatur charset, tipe konten, tag meta, dan judul di dalam menandai. Bagian penting dimulai dengan tag dimana kamu menempatkan orang tua dan tambahkan beberapa baris tabel Didalam itu. Setelah membagi konten menjadi jumlah baris yang tepat, saatnya memasukkan data tabel di dalam mereka.
Seperti yang dikatakan, Anda harus bekerja hanya dengan tabel. Oleh karena itu, untuk memasukkan data yang berbeda di dalam tag, Anda harus mengikuti rute yang ditentukan. Misalnya, mari kita buat template email dengan logo dan tanggal di dalam a menandai.
Logo dan tanggal di dalam tag
05 Des, 2021
Sekarang Anda tahu cara menempatkan tag HTML dan membangun struktur yang baik untuk template email Anda. Mari bergerak maju untuk lebih memahami gaya email.
Gaya Email HTML Anda
Menata email HTML adalah tugas yang rumit karena Anda hanya dapat menggunakan CSS sebaris. Selain itu, Anda harus mengulangi gaya untuk setiap elemen jika memiliki gaya yang serupa. Jika Anda tidak terbiasa dengan Cascading Style Sheets, jelajahi memulai dengan CSS.
Pratinjau:
05 Des, 2021
Hai John Doe
Terima kasih telah mengunjungi situs kami. Kami harap Anda belajar sesuatu yang baru hari ini.
Pendapat Anda penting bagi kami!
Nilai artikel kami di sini.
012345678910
Keluaran:
Jika Anda mau, Anda bisa akses kode lengkapnya di GitHub dan mengkloning repositori untuk menggunakannya.
Mengirim Surat
Sekarang copy-paste seluruh kode dari GitHub. Jika Anda menggunakan Kode VS, buka file HTML menggunakan ekstensi server langsung dan salin kontennya dengan mengklik Ctrl + A>Ctrl + C. Buka Gmail dan buat email baru. Tempel konten dan masukkan id email penerima. Kirim email dan Anda akan mendapatkan hasil seperti yang ditunjukkan di bawah ini:
Uji kode pada perangkat yang berbeda untuk melihat tampilan dan perilakunya. Sesuaikan email HTML Anda dan buat bersih, sederhana, dan responsif.
Ubah Template Email yang Ada
Membuat email HTML dari awal membutuhkan pegangan yang kuat pada HTML dan CSS sebaris. Anda juga dapat memodifikasi template email yang ada dan menyesuaikannya sesuai dengan kebutuhan Anda. Ingatlah bahwa email HTML cenderung membutuhkan waktu beberapa detik untuk dimuat. Rencanakan, desain, kode, dan lakukan pengujian menyeluruh untuk menghindari inkonsistensi pengguna akhir. Anda dapat mempelajari lebih lanjut tentang HTML dan CSS semantik untuk menulis kode yang lebih baik dan lebih mudah diakses.
Buat peningkatan halus dalam HTML dan CSS untuk mencapai aksesibilitas web. Pikat pengunjung untuk bernavigasi dan berinteraksi dengan situs web Anda dengan mudah.
Baca Selanjutnya
- Pemrograman
- HTML
- Pemrograman
- CSS
Naincy mengkhususkan diri dalam membangun situs web yang sangat responsif dan strategi konten yang efisien bersama dengan salinan web. Dia adalah seorang penulis teknologi lepas yang mengawasi dengan tajam teknologi yang sedang tren.
Berlangganan newsletter kami
Bergabunglah dengan buletin kami untuk kiat teknologi, ulasan, ebook gratis, dan penawaran eksklusif!
Klik di sini untuk berlangganan