דוא"ל HTML אינטראקטיבי הוא כלי רב עוצמה. עסקים יכולים להשתמש בהם עבור עסקאות פרומו, פרילנסרים עשויים להשתמש בהם כדי להציע את השירותים שלהם לקוחות פוטנציאליים, ונכדים יכולים להעלות חיוך על פניהם של סבא וסבתא שלהם עם מנהג חמוד לְעַצֵב. שתי הטכנולוגיות היחידות שתצטרך כדי לבנות אימייל מותאם אישית מאפס הן HTML ו-CSS מוטבע. כל מה שאתה צריך לעשות הוא לחשוב על עיצוב, לנתח אותו בצורה של שורות ועמודות בטבלה, וכדאי להתחיל לבנות. במאמר זה, תלמדו שיטה שלב אחר שלב לבנייה ושליחה של אימייל HTML מותאם אישית.
בנו את תבנית הדוא"ל באמצעות HTML
תבנית האימייל מסתמכת על טכניקות HTML מסורתיות. אתה תעבוד עם טבלאות וערימת שורות טבלה ונתוני טבלה כל הזמן. תבנית הדוא"ל הבסיסית של HTML נראית כך:
MUO - טכנולוגיה, פשוטה
...
...
...
...
...
...
...
...
תְפוּקָה:
עדיף להכין עיצוב כך שתוכל למפות היכן ואיך אתה הולך לחתוך את העיצוב. בנוסף, אתה תהיה מוכן נפשית לנסח מבנה טבלה מתוכו.
הנה, אתה מתחיל עם DOCTYPE עבור המסמך. בשלב הבא, אתה מגדיר את ערכת התווים, סוג התוכן, המטא תגיות והכותרת בתוך תָג. החלק המהותי מתחיל ב- תייג היכן אתה מציב הורה והוסף מספר שורות בטבלה בתוך זה. לאחר חלוקת התוכן למספר מתאים של שורות, הגיע הזמן להזין את נתוני הטבלה בתוכם.
כאמור, אתה צריך לעבוד רק עם טבלאות. לכן, עבור הזנת נתונים שונים בתוך תג, עליך לעקוב אחר מסלול מוגדר. לדוגמה, בואו ניצור תבנית דוא"ל עם לוגו ותאריך בתוך a תָג.
לוגו ותאריך בתוך תג
5 בדצמבר, 2021
עכשיו אתה יודע איך למקם תגי HTML ולבנות מבנה טוב לתבנית האימייל שלך. בואו נתקדם כדי להבין טוב יותר את סגנון האימייל.
סגנון האימייל שלך ב-HTML
עיצוב דוא"ל HTML הוא משימה מסורבלת מכיוון שאתה יכול להשתמש רק ב-CSS מוטבע. כמו כן, תצטרך לחזור על הסגנון עבור כל אלמנט אם יש לו סגנון דומה. אם אינך מכיר את גיליונות סגנונות מדורגים, חקור תחילת העבודה עם CSS.
תצוגה מקדימה:
5 בדצמבר, 2021
היי פלוני אלמוני
תודה שביקרת באתר שלנו. אנו מקווים שלמדת משהו חדש היום.
דעתך חשובה לנו!
דרג את המאמרים שלנו כאן.
012345678910
תְפוּקָה:
אם אתה רוצה, אתה יכול גש לקוד המלא ב-GitHub ושבט את המאגר כדי להשתמש בו.
שליחת הדואר
כעת העתק-הדבק את כל הקוד מ-GitHub. אם אתה משתמש בקוד VS, פתח את קובץ ה-HTML באמצעות סיומת השרת החי והעתק את התוכן על ידי לחיצה על Ctrl + A>Ctrl + C. פתח את Gmail וצור אימייל חדש. הדבק את התוכן והזן את מזהה הדואר של המקבל. שלח את המייל ותקבל את התוצאות כפי שמוצג להלן:
בדוק את הקוד במכשירים שונים כדי לראות איך הוא נראה ומתנהג. התאם אישית את הדוא"ל שלך ב-HTML והפוך אותו לנקי, פשוט ומגיב.
שנה תבניות דואר אלקטרוני קיימות
יצירת דוא"ל HTML מאפס דורשת אחיזה יציבה ב-HTML וב-CSS המוטבע. אתה יכול גם לשנות תבנית דוא"ל קיימת ולהתאים אותה לפי הצרכים שלך. זכור שלטעינת הודעות אימייל HTML נוטות להימשך מספר שניות. תכנן, תכנן, קוד וערוך בדיקות יסודיות כדי למנוע חוסר עקביות של משתמש הקצה. אתה יכול ללמוד עוד על HTML ו-CSS סמנטי כדי לכתוב קוד טוב יותר ונגיש יותר.
בצע שיפורים עדינים ב-HTML ו-CSS כדי להשיג נגישות לאינטרנט. משך מבקרים לנווט וליצור אינטראקציה עם האתר שלך בקלות.
קרא הבא
- תִכנוּת
- HTML
- תִכנוּת
- CSS
Naincy מתמחה בבניית אתרים רספונסיביים במיוחד ואסטרטגיית תוכן יעילה יחד עם עותקי אינטרנט. היא סופרת טכנולוגית עצמאית ששומרת עין חדה על טכנולוגיות טרנדיות.
הירשם לניוזלטר שלנו
הצטרף לניוזלטר שלנו לקבלת טיפים טכניים, ביקורות, ספרים אלקטרוניים בחינם ומבצעים בלעדיים!
לחץ כאן כדי להירשם