Een HTML handtekening maken doe je zo.

| | do it yourself, Gastblog | 139 reacties.

Gastblog door Noortje – In mijn vorige artikel over online tips, vroeg ik of jullie het leuk zouden vinden wanneer ik een speciaal artikel zou wijden aan het maken van een html handtekening. Een aantal van jullie reageerden positief en ook mensen uit mijn omgeving smeekten me om een tutorial. Okee, dat is misschien een beetje overdreven, maar een handleiding om je mailtjes professioneel de deur uit te kunnen doen was dus welkom.

Om deze handtekening te maken, gaan we HTML gebruiken. Dus daar wil ik eerst iets over vertellen, want, wat is dat nou eigenlijk? HTML staat voor HyperText Markup Language en is een opmaaktaal waarin je kan beschrijven waar bepaalde onderdelen op een pagina zich moeten bevinden. Het is als het ware een taal die wij begrijpen maar onze computer ook. Zodat hij tekst, links en plaatjes kan opmaken zoals wij dat willen. Het is werkelijk een beetje toveren. In deze tutorial leg ik stap voor stap uit wat je moet doen en ik weet zeker dat jij na het volgen van deze tutorial in staat bent om ook je eigen HTML handtekening te creëren.

Ik werk in deze tutorial met het standaard mailprogramma van apple en ook met apple software. Ik weet niet hoe je met windows een handtekening aan je mail kan toevoegen, sorry windows users! Gebruik je Gmail of een andere maildienst in je browser, dan kun je vaak in je instellingen ook een handtekening invoegen, hoe precies weet ik niet, maar Google weet dat vast!

bron uitleg HTML

STAP 1. VOORBEELDCODE AANPASSEN
Surf ten eerste naar w3schools.com en klik op try it yourself. Op deze website kan je heel veel leren over HTML en ook tutorials vinden. In het geopende venster ga je jouw persoonlijke code schrijven en testen. Je zou nu het volgende moeten zien:

1

Download hier de voorbeeldcode en plak deze in het linkerscherm. Het zou er nu zo uit moeten zien:

2

In onderstaande afbeelding leg ik de code uit en laat ik zien welke stukken je moet vervangen voor jouw persoonlijke informatie. Wanneer je meer wilt weten dan hieronder uitgelegd staat, kijk dan op w3schools. Hier kun je veel meer informatie vinden.

3

STAP 2. PLAATJES UPLOADEN VOOR HTML
Je kan niet zomaar een plaatje van je computer in je code plakken. Hiervoor moet je de plaatjes eerst uploaden en de link daarvan in je code gebruiken. Als je wordpress hebt, kun je de plaatjes toevoegen aan de map media. Wanneer je het plaatje geupload hebt en er op klikt, zie je rechts in beeld de url verschijnen die je nodig hebt.

4

Wanneer je geen wordpress hebt, is het handig om een website te gebruiken die jouw plaatjes HTML proof maakt. Je kunt bijvoorbeeld een account aanmaken bij Photobucket en hier je plaatjes uploaden. Wanneer je op het plaatje klikt, zie je aan de rechterkant de url verschijnen. Die kan je kopiëren en op de juiste plek in je code plakken. Het formaat van het plaatje maakt voor het uploaden niet uit. De grootte bepaal je namelijk pas later in je code. Het plaatje moet wel groter zijn dan 98 pixels anders rekt hij uit.

In de voorbeeldcode zie je ook plaatjes die linken naar facebook, instagram, en bellen. Die plaatjes staan echter online onder mijn beheer. Wanneer ik ze verwijder, zullen ze het ook bij jou niet meer doen. Daarom is het belangrijk om hiervoor ook je eigen plaatjes te uploaden. Je kunt heel veel verschillende iconen vinden op google of je kan ze zelf maken. Je mag echter ook die van mij overnemen, klik hier om de plaatjes te downloaden. Belangrijk is dat je het plaatje in ieder geval op je eigen computer opslaat en weer upload naar photobucket of wordpress. Zo staan ze onder jouw beheer. Wanneer je al je plaatjes geupload hebt, kun je de links in de voorbeeldcode vervangen voor de links van jouw plaatjes.

STAP 3. JE HTML HANDTEKENING TOEVOEGEN AAN JE EMAIL
1. Ga nu naar je mailprogramma, ik ga uit van het mailprogramma voor mac.
2. Kies Mail -> Preferences -> Signatures en klik op de + om een nieuwe handtekening aan te maken. Noem deze HTML handtekening (dit kan je later nog veranderen).
3. Sluit je mail af en open het moederbestand van je nieuwe handtekening.
4. Ga naar Finder -> Go -> (houd alt ingedrukt dan verschijnt) library -> mail -> V2 -> Maildata -> Signatures.
5. Klik op bestanden weergeven als lijst. Zo kun je makkelijk zien welk bestand je het laatst aangemaakt hebt. Open nu het bestand in een simpel tekstbewerking programma zoals notepad, of texteditor. Je zou dit moeten zien:

5

Plak nu je gemaakte code in het moederbestand en sla hem op. LET OP! Het bovenste stukje tekst moet je laten staan anders gaat je handtekening het never nooit doen.

6

Om je handtekening straks te kunnen gebruiken, moet je het bestand eerst ‘locken’. Kijk naar het voorbeeld hieronder om te zien hoe dat moet:

7

Open je mail en het handtekening menu. Sleep je html handtekening over het account waarvoor je het wilt gebruiken. Klik hier om te zien hoe dat moet. Maak nu een nieuw mailtje en voeg je handtekening toe. Tadaa daar staat je zelfgemaakte handtekening de show te stelen!

8

Tenslotte wil ik nog even zeggen dat ik in principe begrijp hoe HTML werkt, maar heb je straks toch nog vragen dan zal ik je misschien niet kunnen helpen. Ik ben geen whizzkid en met hulp van mijn vriend heb ik het vooral voor elkaar gekregen door trial and error. Natuurlijk zal ik proberen te helpen waar het kan, maar sommige dingen zal ik niet weten. Hier vind je trouwens het originele artikel waar ik deze tutorial op gebaseerd heb (anders lijkt het net of ik het hélemaal zelf bedacht heb, hihi).

♥♥♥

Heel veel succes!

♥♥♥

Noortje is een vrolijke illustrator uit Rotterdam met een passie voor papier en kleur. Hier op teamconfetti schrijft ze artikelen waar je iets van kan leren, maar waar je vooral vrolijk van wordt.

Dit vind je vast ook leuk:

Zo, en nu jij! DIY patroon maken #2: een naadloos patroon + sluitingsdatum! DIY vogelvoer feestje! Mooie dingen maken van papier met Noortje!

REACTIES:

  1. Iris

    Thanks Noortje! Het is me gelukt!

    Tip voor de hotmail-gebruikers! Als je op het instellingen icoon rechtsboven klinkt en dan op ‘opties’ en vervolgens Opmaak, lettertypes en handtekening, kun je in het onderste venster kiezen voor bewerken in HTML. Daar kun je de code plakken die je aan de handvan dit artikel hebt gemaakt en dan wordt ‘ie standaard onder je mails gezet!

    Reageren ↓
  3. Linda

    Wooop! Super handy! Ben nu klaar met alles overzetten (op mn to do list staat eigen instagram en fb icoontjes maken ;)) maar nu ben ik vooral aan het knoeien om mijn instagram link te laten werken. Hij stuur mij door naar.. niet bestaand/404 error/kan niks vinden links. :/ Dat wordt een lange zoektocht nu want de html code klopt verder precies zoals jij het laat zien…

    Commence big search! :’D

    Reageren ↓
    1. Noortje

      Staat je instagram op openbaar of op gesloten? In het laatste geval zou dat de reden kunnen zijn misschien.
      Check goed dat je echt alleen de link hebt van je instagram pagina en niet naar een plaatje op je instagram pagina.
      De url in je browser zou het eigenlijk gewoon moeten doen. Fijn dat het verder lukt! Heel veel succes nog :)!

      Reageren ↓
      1. Linda

        Nope allemaal niet het probleem. Klinkt als een gevalletje html coderen-cliche: doet’ie tt of doeti’ie ’t niet!
        Tevens loop ik nu tegen t probleem op dat de link naar mn portfolio site mij stuurt naar _blank in de webbrowser. En als ik daar dingen in een pas (de target) dan doet dat niks of verdwijnt het uit mn signature helemaal.. oh man :’) Toch bedankt, Noortje! Ik weet nu waar ik naar moet zoeken op google dus dan kom ik er denk ik wel uit. (Met de nodige rage-quits!)

        Reageren ↓
          1. Linda

            Dank voor je hulp alsnog! Mn vriend (handig zulke vriendjes!) is gisteren gaan kijken en nu werkte het! Maar wat er precies gek was.. weet ik niet maar ook hij vond het raar dat het niet werkte.

            Maar nu! Heb ik een super mooie HTML signature! ^^

  6. Marlous

    Heel fijn zo’n tutorial! Heb ‘m net gehanteerd om een handtekening te maken. Goeie tip is trouwens wel om de pictogrammen/iconen of andere plaatjes meteen zo klein mogelijk op te slaan, ik had ze namelijk in normale grootte gebruikt en via mijn Apple mail zie je gewoon kleine pictogrammen, maar ik had een mailtje gestuurd naar iemand die Outlook gebruikte en die zag de pictogrammen dus heel groot.

    Reageren ↓
    1. Raquelle

      Dit heb ik dus ook gehad. Ziet er netjes uit, maar als ik een reactie kreeg werden de icoontjes enorm opgeblazen. Heb het nu inderdaad naar de daadwerkelijke grootte aangepast. Thanks voor de tip.

      Reageren ↓
  7. TomsDiner

    Aan de tag kun je beter nosend=”1″ toevoegen tussen de . Dat voorkomt dat het plaatje verdwijnt bij een reply, omdat het als een bijlage gezien zou worden.

    En de reden dat ik hier langs surf, is dat het zo simpel lijkt, een mail-handtekening. Tot je ziet hoe hij er bij andere gebruikers uit komt te zien. De HTML wordt door veel mailprogramma’s anders behandeld, en als je net iets meer wil loop je echt tegen een muur van problemen op. Veel inline CSS – de code die gebruikt wordt met STYLE=”…..”, wordt verschillend geïnterpreteerd door bijvoorbeeld Apple Mail, Outlook, Gmail, Hotmail, enzovoort. Test je handtekening door mail te sturen naar zoveel mogelijk van deze mail applicaties, en controleer hoe ze er bij een forward mail uit komen te zien.

    Reageren ↓
  8. TomsDiner

    Op de eerste regel hierboven verdwijnen de “groter dan” en “kleiner dan”- tekens na “toevoegen tussen de”…

    Reageren ↓
    1. Noortje

      Hoi Tom,

      Bedankt voor je reacties, super interessant!
      Ik merk inderdaad af en toe dat de handtekening soms weg is of er anders uitziet bij verschillende mensen met wie ik mail contact heb. Ik ga je tips zeker toepassen.

      Groetjes,
      Noortje

      Reageren ↓
  9. Jabbar

    Hallo, bedankt voor de uitleg, was al een tijd opzoek naar een dergelijke tutorial. Wat mij wel opvalt is dat de tekst aan de rechterkant verspringt in Outlook.com. Als ik hem daar heb toegevoegd. Denk dat het een bugje in de code is. Weet jij hier toevallig een oplossing voor?

    Reageren ↓

  10. Pingback: 21 e-mail handtekening weetjes | _ _ _ Art & Design @ ROCvA

  12. Pingback: Webdesign | Pearltrees

  15. Lydia

    Hallo,
    Dat hebben jullie mooi uitgelegd.
    Hier is het ook gelukt, wel na heel veel pogingen! Ik vergat blijkbaar mail eerst nog even helemaal af te sluiten vooraleer ik mijn nieuwe handtekening zag. Het lijkt nu wel zo dat mijn testmails in mijn spam terecht komen ipv netjes in mijn mail. Iemand hier nog tips / ervaring mee?

    Liefs!

    Reageren ↓
  16. Babs geurts

    Hoi, handige tutorial. Ik zoek eigenlijk ook een linkedin icoon, maar het lukt mij niet om dit in het voorbeeld te krijgen. Heb je hiervoor een tip? Of een link naar een icoon die past bij jouw voorbeeld instagram icoon?

    Dank je wel alvast
    Babs

    Reageren ↓
    1. Daan Keizer

      Hoi Noortje, ik heb net ook 2 HTML signatures gemaakt m.b.v. deze tutoral, geweldige uitleg!
      M.b.t. jouw vraag Babs Geurts, als je kijkt op https://www.iconsdb.com dan kan je enorm veel icons vinden en zelfs wijzigen in de kleur die je wilt. Dan de afbeelding opslaan en ergens online zetten, bijvoorbeeld photobucket en je hebt precies wat je wilt.

      Andere vraag: Kan ik dit ook toepassen op een iPad of iPhone? Geen idee hoe dit te doen, als iemand tips heeft, graag!

      Reageren ↓
  17. Esmee

    Ik wil dit graag toepassen! Helaas gebeurt er vrij weinig wanneer ik de voorbeeldtekst kopier. Hoe kan dit? Er staan allemaal rode woordjes tussen

    Reageren ↓
  19. Belle

    De handtekening is bij mij ook gelukt alleen ontvangers met Outlook zien kruisjes waar de afbeelding horen te staan en krijgen de melding dat ze de afbeeldingen moeten downloaden. Als ze dan op downloaden klikken worden de logo’s en de icoontjes heel groot weergeven en is de hele handtekening lelijk.
    Hoe los ik dit op? Heb zelf al wat geprobeerd maar ik kom er niet uit.

    Reageren ↓
    1. Janine

      Dit probleem heb ik inderdaad ook! Ik heb de afbeeldingen verkleind en opnieuw geupload in mijn wordpress website maar nog steeds gebeurd dit. Als iemand tips heeft, graag! :)

      Reageren ↓
      1. Janine

        Solved! Je moet de afbeeldingen even gelijk op de goede grootte zetten. (Met Photoshop bijvoorbeeld)
        Even de afbeeldingen op de juiste pixel grootte en dan overnieuw uploaden en in de handtekening zetten. :)

        Reageren ↓
  20. Sylvie

    Top zo een tutorial!
    Alleen kan ik het mapje “Signatures” niet vinden.
    Ik heb geen “V2” maar een “V3” en vind daar geen Signatures in terug.

    Reageren ↓
  24. Jeanine

    Hi!

    Het is me gelukt. Alleen nu heb ik drie verschillende icoontjes. Ik zelf zie ze alle drie maar als ik een mail ga versturen wordt er maar één weergegeven. Iemand een idee hoe dit kan??

    THANKS A LOTTTT

    Reageren ↓
  25. Benno

    Als ik mijn mail stuur naar een iPhone, worden de logo’s en plaatjes helemaal langgerekt weergegeven.
    Heb je hier een oplossing voor? Staat erg slordig zo.

    Reageren ↓
    1. ElkeS

      @Benno,
      Daar is zeker een oplossing voor geef aan img tag ook een max-width mee.
      Bijvoorbeeld zo:
      <img style="float: left; padding: 0 20px 0 0;max-height: 160px; max-width: 160px;" src="…

      Mijn logo is vierkant als dat van jou niet vierkant is moet je even puzzelen welke maten je moet gebruiken…

      Reageren ↓
  26. maruska

    Fijne tutorial, alleen kom ik er niet uit op het laatst. Ik krijg uiteindelijk automatisch een hele lange code te zien met mijn toevoegingen bij Finder signaturen dus ik hoef hem niet handmatig te plakken. Maar als ik deze plak bij mijn mail handtekening maken krijg ik geen plaatje en korte adresgegevens maar de heeeele lange html code. enig idee hoe ik dit kan oplossen?

    Reageren ↓
    1. Noortje

      Hoi Maruska,

      Ik kan je helaas niet verder helpen want ik ben geen expert.
      ZIe dit artikel echt als een op weg helper met het maken van je eigen html-handtekening.
      Veel succes!

      Groetjes,
      Noortje

      Reageren ↓
  27. Miriam

    Heerlijke fijne tutorial, helaas wordt mijn logo goed overgenomen op desktop maar via iphone is het logo uitgerekt. Wat kan ik hieraan doen?

    Reageren ↓
    1. Noortje

      Hoi Mirjam,

      Ik kan je helaas niet verder helpen want ik ben geen expert.
      ZIe dit artikel echt als een op weg helper met het maken van je eigen html-handtekening.
      Veel succes!

      Groetjes,
      Noortje

      Reageren ↓
    1. Noortje

      Hoi Sandra,

      Ik kan je helaas niet verder helpen want ik ben geen expert.
      ZIe dit artikel echt als een op weg helper met het maken van je eigen html-handtekening.
      Veel succes!

      Groetjes,
      Noortje

      Reageren ↓
  29. Carlijne

    Een tijd terug kreeg ik de taak voor iedereen binnen ons bedrijf een nieuwe emailhandtekening op te stellen inclusief nieuw bedrijfslogo, maar deze afbeelding verdween op de IPhone en IPad steeds weer… Wat een ergernis. Dankzij jouw info is het eindelijk gelukt! Hartstikke bedankt!

    Reageren ↓
  30. Charlotte

    Het hele opmaken is me gelukt dmv jouw tutorial, helemaal te gek!
    Echter bij het uploaden lukte het me niet helemaal. Dat kwam vooral doordat jouw artikel in 2016 geschreven is en ik nu met iOS Mojave werk. Ik heb daarom voor het uploaden van de handtekening de volgende tutorial gebruikt: http://matt.coneybeare.me/how-to-make-an-html-signature-in-apple-mail-for-mojave-os-x-10-dot-14/

    Deze twee tutorials gecombineerd; works like a charm. TNXaLOT! ;-)

    Groeten,
    Charlotte
    TNXaLOT

    Reageren ↓
  32. Bas

    Hi!
    Een hele fijne tutorial. Ik heb met heel veel pijn en moeite eindelijk de juiste handtekening in w3schools.com gemaakt. Maar nu zit ik vast. Hoe krijg ik die afbeelding nu in een html bestand? Moet ik gewoon die link kopieren die je krijgt? Maar dat werkt niet. Ik ben er bijna, maar het laatste deel snap ik niet.
    Bedankt voor de uitleg!

    Bas

    Reageren ↓
    1. Noortje

      Hoi Bas,

      Ik kan je helaas niet verder helpen want ik ben geen expert.
      ZIe dit artikel echt als een op weg helper met het maken van je eigen html-handtekening.
      Veel succes!

      Groetjes,
      Noortje

      Reageren ↓
  33. eva

    YES! Zo blij met dit artikel! EINDELIJK is het me gelukt. Ik heb al veel zitten pielen met van die gratis generators maar die geven je weinig opties en er ging altijd iets mis. Zelf in eigen hand hebben is veel fijner!

    Bedankt!

    Reageren ↓

Geef een antwoord

Het e-mailadres wordt niet gepubliceerd. Vereiste velden zijn gemarkeerd met *