Σίγουρα έχετε δεχτεί στο παρελθόν emails που μοιάζουν με ολόκληρες ιστοσελίδες. Ένα τέτοιο email περιέχει εικόνες με κείμενο το οποίο είναι μορφοποιημένο με html ετικέτες, όπως δηλαδή γίνεται στις ιστοσελίδες. Πλέον όλο και περισσότερες εταιρίες, όπως το eshop.gr και οργανισμοί, όπως το Φεστιβάλ Κινηματογράφου Θεσσαλονίκης, στέλνουν html emails σε αυτούς που εγγράφονται στην email list τους
Παρακάτω βλέπετε ένα html email:
Πλεονέκτημα για τον αποστολέα αποτελεί η ευελιξία που του δίνει η χρήση HTML για να διαμορφώσει το κείμενο μαζί με τις εικόνες και να δώσει έτσι το δικό του στυλ στα email που αποστέλλει. Όπως είναι φυσικό, μειονέκτημα αποτελεί το γεγονός ότι πρέπει κάποιος να γνωρίζει HTML για να συντάξει εντυπωσιακά html emails. Μπορείτε πάντως να μάθετε εύκολα και γρήγορα την γλώσσα HTML στην Σειρά Μαθημάτων HTML του WLearn
Ένα άλλο σημαντικό μειονέκτημα είναι το γεγονός ότι μπορεί να περιέχει κακόβουλο κώδικα ο οποίος θα εμφυτέψει στον υπολογιστή μας κάποιον ιό ή spyware, γι’ αυτό γενικά είναι προτιμότερο να μην ανοίγεται emails αν δεν γνωρίζεται τον αποστολέα. Τα περισσότερα antivirus διενεργούν έλεγχο για ύπαρξη ιών στα emails που κατεβαίνουν στον υπολογιστή μας, αλλά ποτέ δεν μπορούμε να το εμπιστευόμαστε τυφλά
Παρακάτω βλέπετε ένα html email:
Πλεονέκτημα για τον αποστολέα αποτελεί η ευελιξία που του δίνει η χρήση HTML για να διαμορφώσει το κείμενο μαζί με τις εικόνες και να δώσει έτσι το δικό του στυλ στα email που αποστέλλει. Όπως είναι φυσικό, μειονέκτημα αποτελεί το γεγονός ότι πρέπει κάποιος να γνωρίζει HTML για να συντάξει εντυπωσιακά html emails. Μπορείτε πάντως να μάθετε εύκολα και γρήγορα την γλώσσα HTML στην Σειρά Μαθημάτων HTML του WLearn
Ένα άλλο σημαντικό μειονέκτημα είναι το γεγονός ότι μπορεί να περιέχει κακόβουλο κώδικα ο οποίος θα εμφυτέψει στον υπολογιστή μας κάποιον ιό ή spyware, γι’ αυτό γενικά είναι προτιμότερο να μην ανοίγεται emails αν δεν γνωρίζεται τον αποστολέα. Τα περισσότερα antivirus διενεργούν έλεγχο για ύπαρξη ιών στα emails που κατεβαίνουν στον υπολογιστή μας, αλλά ποτέ δεν μπορούμε να το εμπιστευόμαστε τυφλά
Πως στέλνω ένα html email
Υπάρχουν δύο τρόποι να συντάξουμε ένα html email, ανάλογα με τις γνώσεις που έχουμε στην γλώσσα HTML και γενικά στο web designing.
Πρώτος τρόπος – για αυτούς που γνωρίζουν HTML
Ο πιο ενδεδειγμένος τρόπος σύνταξης ενός html email, ειδικά για αυτούς που γνωρίζουν html, είναι η σύνταξη του σε έναν WYSIWYG editor, όπως το Dreamweaver. Έπειτα, αφού αντιγράψουμε (copy) όλο τον πηγαίο κώδικα html, ανοίγουμε το παράθυρο Σύνταξης email και από το μενού
Εισαγωγή > HTML
όπου ανοίγει ένα μικρό παράθυρο (όπως φαίνεται στην παρακάτω εικόνα) στο οποίο επικολλάμε (πατάμε δεξί κλικ στο πεδίο κειμένου και έπειτα επιλέγουμε επικόλληση απο το μενού που αναδύεται) τον κώδικα HTML και πατάμε το κουμπί Εισαγωγή. Τέλος, αφού γράψουμε το Θέμα του mail και την ηλεκτρονική διεύθυνση του παραλήπτη πατάμε το κουμπί Αποστολή και το HTML email θα σταλεί
.
Δεύτερος τρόπος – για αυτούς που δεν έχουν την παραμικρή ιδέα για την HTML
Αν δεν έχετε γνώσεις html μην φοβάστε. Υπάρχει δυνατότητα να συντάσσετε εντυπωσιακά html email με την χρήση της εργαλειοθήκης μορφοποίησης του παραθύρου Σύνταξης email.
Γενικά η μορφοποίηση του κειμένου λειτουργεί όπως και στο Word, δηλαδή πρώτα επιλέγουμε (κοινώς μαυρίσουμε) την λέξη ή το κείμενο που θέλουμε να μορφοποιήσουμε και έπειτα πατάμε το κουμπί για να εφαρμοστεί η μορφοποίηση. Σε αυτό το σημείο θα αναλύσουμε την λειτουργία του κάθε κουμπιού
η Πρώτη λίστα:
Με τη χρήση της λίστας αυτής μπορούμε να μορφοποιήσουμε μια ή περισσότερες λέξεις σαν:
Σώμα κειμένου – το κείμενο που επιλέξαμε σαν Σώμα κειμένου θα είναι απλό κείμενο και δεν θα ανήκει σε καμία από τις επόμενες επιλογές
Παράγραφος – το κείμενο που επιλέξαμε σαν Παράγραφο θα αποτελεί μια ενιαία παράγραφος αφήνοντας μια γραμμή κενή πάνω και κάτω από αυτή
Κεφαλίδα 1 έως 6 – το κείμενο θα εμφανίζετε με μεγάλα και έντονα γράμματα. Με την Κεφαλίδα 1 ορίζουμε την μεγαλύτερη ετικέτα ενώ με την Κεφαλίδα 6 την μικρότερη.
Διεύθυνση – το κείμενο θα εμφανίζεται με πλάγιους χαρακτήρες
Προμορφοποίηση – το κείμενο θα εμφανίζεται με γραμματοσειρά γραφομηχανής
η Δεύτερη λίστα:
με την χρήση της δεύτερης λίστας ορίζουμε την γραμματοσειρά του κειμένου
Επιλογή χρώματος κειμένου:
Ορίζουμε το χρώμα του κειμένου
Μικρότερο Μέγεθος / Μεγαλύτερο Μέγεθος:
Με τα δύο αυτά κουμπιά μπορούμε να αυξομειώσουμε το μέγεθος της γραμματοσειράς του κειμένου
Έντονα / Πλάγια / Υπογράμμιση:
Με τα κουμπιά αυτά μπορούμε να εφαρμόσουμε στο κείμενο, έντονη, πλάγια ή υπογραμμισμένη γραφή.
Λίστα με κουκίδες / Αριθμημένη Λίστα:
Με αυτά τα δύο κουμπιά μπορούμε να προσθέσουμε Λίστες με κουκίδες ή Αριθμημένες Λίστες. Περισσότερα για τις HTML Λίστες
Εξοχή κειμένου / Εσοχή κειμένου:
Με αυτά τα κουμπιά μπορούμε να εμφανίσουμε το κείμενο αρχίζοντας από δεξιότερη εσοχή ή από αριστερότερη εξοχή απ' ότι το υπόλοιπο κείμενο
Στοίχιση κειμένου:
Με το κουμπί αυτό ορίζουμε την στοίχιση του κειμένου.
Εισαγωγή δεσμού, άγκυρας, εικόνας, οριζόντιας γραμμής, πίνακα, φατσούλας:
Με το κουμπί αυτό εισάγουμε 5 διαφορετικά στοιχεία μέσα στο email. Κάθε ένα από αυτά πρέπει να το δούμε ξεχωριστά.
Εισαγωγή Δεσμού:
Μπορούμε να εισάγουμε δεσμό (link) ο οποίος να οδηγεί σε μια ιστοσελίδα ή σε ένα άλλο αρχείο στον τοπικό μας δίσκο. Αφού επιλέξουμε (κοινώς μαυρίσουμε) την λέξη ή το κείμενο ή την εικόνα που θέλουμε να κάνουμε link, πατάμε το κουμπί για την εισαγωγή δεσμού και εμφανίζεται ένα μικρό παραθυράκι (όπως φαίνεται στην παρακάτω εικόνα) στο οποίο πληκτρολογούμε είτε την διεύθυνση της ιστοσελίδας που θέλουμε να οδηγεί (πχ. http://www.wlearn.gr), είτε επιλέγουμε το αρχείο στον υπολογιστή μας που θέλουμε να ανοίγει από το κουμπί Επιλογή αρχείου. Στην δεύτερη περίπτωση το αρχείο στέλνεται στον παραλήπτη μαζί με το html email. Επίσης μας δίνετε η δυνατότητα, επιλέγοντας το checkbox, το αρχείο αυτό να εμφανίζεται σαν συνημμένο αρχείο στο email, ώστε να δίνουμε την ευκολία στον παραλήπτη, αν θέλει, να το αποθηκεύει στον υπολογιστή του.
Εισαγωγή Αγκυρας:
Η άγκυρα (anchor) ορίζει ένα σημείο στο email στο οποίο ο παραλήπτης μπορεί να επιστρέψει με το πάτημα ενός δεσμού που αναφέρεται στην άγκυρα. Αυτό χρησιμοποιείται όταν έχουμε μακροσκελές σελίδες όπου θέλουμε να δίνουμε την δυνατότητα στον αναγνώστη, πατώντας ένα link, να οδηγείται σε συγκεκριμένα σημεία. Δεν θα αναλύσουμε περαιτέρω καθώς χρησιμοποιείται σπάνια στα html emails.
Εισαγωγή Εικόνας:
Διαβάστε την ενότητα Αποστολή Εικόνων (παράγραφος: Αποστολή εικόνας σαν μέρος του περιεχομένου ενός email)
Εισαγωγή Οριζόντιας Γραμμής:
Μπορούμε να εισάγουμε στο email μας οριζόντιες γραμμές
Εισαγωγή Πίνακα:
Οι πίνακες είναι μια δομή της HTML η οποία μας επιτρέπει να εμφανίσουμε κείμενα και γραφικά στοιχισμένα μέσα σε γραμμές και στήλες. Περισσότερα για τους Πίνακες.
Πατώντας την επιλογή Πίνακας από τη λίστα εμφανίζεται ένα μικρό παραθυράκι (όπως φαίνεται στην παρακάτω εικόνα) στο οποίο ορίζουμε τον αριθμό στηλών και γραμμών του πίνακα, καθώς και το συνολικό πλάτος (width) και το μέγεθος του περιγράμματος του πίνακα.
Εισαγωγή Φατσούλας:
Με το κουμπί αυτό μπορούμε να εισάγουμε φατσούλες στο email μας
Πρώτος τρόπος – για αυτούς που γνωρίζουν HTML
Ο πιο ενδεδειγμένος τρόπος σύνταξης ενός html email, ειδικά για αυτούς που γνωρίζουν html, είναι η σύνταξη του σε έναν WYSIWYG editor, όπως το Dreamweaver. Έπειτα, αφού αντιγράψουμε (copy) όλο τον πηγαίο κώδικα html, ανοίγουμε το παράθυρο Σύνταξης email και από το μενού
Εισαγωγή > HTML
όπου ανοίγει ένα μικρό παράθυρο (όπως φαίνεται στην παρακάτω εικόνα) στο οποίο επικολλάμε (πατάμε δεξί κλικ στο πεδίο κειμένου και έπειτα επιλέγουμε επικόλληση απο το μενού που αναδύεται) τον κώδικα HTML και πατάμε το κουμπί Εισαγωγή. Τέλος, αφού γράψουμε το Θέμα του mail και την ηλεκτρονική διεύθυνση του παραλήπτη πατάμε το κουμπί Αποστολή και το HTML email θα σταλεί
.
Δεύτερος τρόπος – για αυτούς που δεν έχουν την παραμικρή ιδέα για την HTML
Αν δεν έχετε γνώσεις html μην φοβάστε. Υπάρχει δυνατότητα να συντάσσετε εντυπωσιακά html email με την χρήση της εργαλειοθήκης μορφοποίησης του παραθύρου Σύνταξης email.
Γενικά η μορφοποίηση του κειμένου λειτουργεί όπως και στο Word, δηλαδή πρώτα επιλέγουμε (κοινώς μαυρίσουμε) την λέξη ή το κείμενο που θέλουμε να μορφοποιήσουμε και έπειτα πατάμε το κουμπί για να εφαρμοστεί η μορφοποίηση. Σε αυτό το σημείο θα αναλύσουμε την λειτουργία του κάθε κουμπιού
η Πρώτη λίστα:
Με τη χρήση της λίστας αυτής μπορούμε να μορφοποιήσουμε μια ή περισσότερες λέξεις σαν:
Σώμα κειμένου – το κείμενο που επιλέξαμε σαν Σώμα κειμένου θα είναι απλό κείμενο και δεν θα ανήκει σε καμία από τις επόμενες επιλογές
Παράγραφος – το κείμενο που επιλέξαμε σαν Παράγραφο θα αποτελεί μια ενιαία παράγραφος αφήνοντας μια γραμμή κενή πάνω και κάτω από αυτή
Κεφαλίδα 1 έως 6 – το κείμενο θα εμφανίζετε με μεγάλα και έντονα γράμματα. Με την Κεφαλίδα 1 ορίζουμε την μεγαλύτερη ετικέτα ενώ με την Κεφαλίδα 6 την μικρότερη.
Διεύθυνση – το κείμενο θα εμφανίζεται με πλάγιους χαρακτήρες
Προμορφοποίηση – το κείμενο θα εμφανίζεται με γραμματοσειρά γραφομηχανής
η Δεύτερη λίστα:
με την χρήση της δεύτερης λίστας ορίζουμε την γραμματοσειρά του κειμένου
Επιλογή χρώματος κειμένου:
Ορίζουμε το χρώμα του κειμένου
Μικρότερο Μέγεθος / Μεγαλύτερο Μέγεθος:
Με τα δύο αυτά κουμπιά μπορούμε να αυξομειώσουμε το μέγεθος της γραμματοσειράς του κειμένου
Έντονα / Πλάγια / Υπογράμμιση:
Με τα κουμπιά αυτά μπορούμε να εφαρμόσουμε στο κείμενο, έντονη, πλάγια ή υπογραμμισμένη γραφή.
Λίστα με κουκίδες / Αριθμημένη Λίστα:
Με αυτά τα δύο κουμπιά μπορούμε να προσθέσουμε Λίστες με κουκίδες ή Αριθμημένες Λίστες. Περισσότερα για τις HTML Λίστες
Εξοχή κειμένου / Εσοχή κειμένου:
Με αυτά τα κουμπιά μπορούμε να εμφανίσουμε το κείμενο αρχίζοντας από δεξιότερη εσοχή ή από αριστερότερη εξοχή απ' ότι το υπόλοιπο κείμενο
Στοίχιση κειμένου:
Με το κουμπί αυτό ορίζουμε την στοίχιση του κειμένου.
Εισαγωγή δεσμού, άγκυρας, εικόνας, οριζόντιας γραμμής, πίνακα, φατσούλας:
Με το κουμπί αυτό εισάγουμε 5 διαφορετικά στοιχεία μέσα στο email. Κάθε ένα από αυτά πρέπει να το δούμε ξεχωριστά.
Εισαγωγή Δεσμού:
Μπορούμε να εισάγουμε δεσμό (link) ο οποίος να οδηγεί σε μια ιστοσελίδα ή σε ένα άλλο αρχείο στον τοπικό μας δίσκο. Αφού επιλέξουμε (κοινώς μαυρίσουμε) την λέξη ή το κείμενο ή την εικόνα που θέλουμε να κάνουμε link, πατάμε το κουμπί για την εισαγωγή δεσμού και εμφανίζεται ένα μικρό παραθυράκι (όπως φαίνεται στην παρακάτω εικόνα) στο οποίο πληκτρολογούμε είτε την διεύθυνση της ιστοσελίδας που θέλουμε να οδηγεί (πχ. http://www.wlearn.gr), είτε επιλέγουμε το αρχείο στον υπολογιστή μας που θέλουμε να ανοίγει από το κουμπί Επιλογή αρχείου. Στην δεύτερη περίπτωση το αρχείο στέλνεται στον παραλήπτη μαζί με το html email. Επίσης μας δίνετε η δυνατότητα, επιλέγοντας το checkbox, το αρχείο αυτό να εμφανίζεται σαν συνημμένο αρχείο στο email, ώστε να δίνουμε την ευκολία στον παραλήπτη, αν θέλει, να το αποθηκεύει στον υπολογιστή του.
Εισαγωγή Αγκυρας:
Η άγκυρα (anchor) ορίζει ένα σημείο στο email στο οποίο ο παραλήπτης μπορεί να επιστρέψει με το πάτημα ενός δεσμού που αναφέρεται στην άγκυρα. Αυτό χρησιμοποιείται όταν έχουμε μακροσκελές σελίδες όπου θέλουμε να δίνουμε την δυνατότητα στον αναγνώστη, πατώντας ένα link, να οδηγείται σε συγκεκριμένα σημεία. Δεν θα αναλύσουμε περαιτέρω καθώς χρησιμοποιείται σπάνια στα html emails.
Εισαγωγή Εικόνας:
Διαβάστε την ενότητα Αποστολή Εικόνων (παράγραφος: Αποστολή εικόνας σαν μέρος του περιεχομένου ενός email)
Εισαγωγή Οριζόντιας Γραμμής:
Μπορούμε να εισάγουμε στο email μας οριζόντιες γραμμές
Εισαγωγή Πίνακα:
Οι πίνακες είναι μια δομή της HTML η οποία μας επιτρέπει να εμφανίσουμε κείμενα και γραφικά στοιχισμένα μέσα σε γραμμές και στήλες. Περισσότερα για τους Πίνακες.
Πατώντας την επιλογή Πίνακας από τη λίστα εμφανίζεται ένα μικρό παραθυράκι (όπως φαίνεται στην παρακάτω εικόνα) στο οποίο ορίζουμε τον αριθμό στηλών και γραμμών του πίνακα, καθώς και το συνολικό πλάτος (width) και το μέγεθος του περιγράμματος του πίνακα.
Εισαγωγή Φατσούλας:
Με το κουμπί αυτό μπορούμε να εισάγουμε φατσούλες στο email μας
Οι εικόνες ενός html email
Οι εικόνες (ή άλλα αρχεία) που τυχόν εμπεριέχονται στο html email θα σταλούν και αυτές μαζί με τον html κώδικα. Έτσι όταν ο παραλήπτης λάβει το email, όλες οι εικόνες θα αποθηκευτούν κάπου στον υπολογιστή του όπου θα παραμείνουν μέχρι να σβήσει το email. Ο φάκελος που αποθηκεύονται οι εικόνες δεν είναι άμεσα προσβάσημος με την έννοια ότι αυτός βρίσκεται κάπου βαθιά στην δομή των αρχείων του υπολογιστή. Άλλωστε δεν ενδιαφέρει τον παραλήπτη που ακριβώς αποθηκεύονται. Αν όμως για κάποιο λόγο θέλουμε να αποθηκεύσουμε κάποιες από τις εικόνες που περιέχει κάποιο html email που λάβαμε σε συγκεκριμένο φάκελο για μελλοντική χρήση, τότε μπορούμε να το κάνουμε αυτό με τις εξής κινήσεις:
- πατάμε δεξί κλικ επάνω στην εικόνα που μας ενδιαφέρει
- επιλέγουμε ‘Αποθήκευση εικόνας ως’ από το μενού που αναδύεται
- και τέλος επιλέγουμε τον φάκελο που επιθυμούμε να αποθηκεύσουμε την εικόνα
- πατάμε δεξί κλικ επάνω στην εικόνα που μας ενδιαφέρει
- επιλέγουμε ‘Αποθήκευση εικόνας ως’ από το μενού που αναδύεται
- και τέλος επιλέγουμε τον φάκελο που επιθυμούμε να αποθηκεύσουμε την εικόνα