E-postalarınıza HTML imza ile daha ilgi çekici olun

E-Postalarda imza kullanımı

Günümüzde eposta ile yazışmak artık günlük bir parçamız. Yazışmalarınızda imza kullanarak kişisel tanımınızı yapmanın yanı sıra, statünüzü (iş ve pozisyon gibi) yansıtmak, portfolyo veya blog gibi internetteki kaynaklarınızı insanlara yaymak için vereceğiniz kısa linkler ile yazışmalarınızdan daha çok verim alabilirsiniz. Hatta şu anda oldukça verimli işleyen bir reklam tekniği olarak algılanabilir bu konu.

Bu dökümanda imza kullanımınızı daha iyi, etkileşimli hale getirmek için birkaç numara yapmayı göstereceğim.

Etik

İmza ile link paylaşmak, kendiniz hakkında bilgi vermek bu işin güzel yanı fakat burada belirteceğiniz bilgiler konusunda dürüst olmanız, abartıdan kaçmanız gerekiyor. Yani imza’daki amaç aynen bir kartvizit’de verilmek istenen bilgiler gibidir. Yani insanlara sohbetiniz arasında verirsiniz, o anda baktıklarında sizin bir çeşit kimliğinizi, yaptığınız işi, yetkinlik durumunuzu bunun yanı sıra sizinle iletişime geçebilecekleri bilgileri verirsiniz.
Yani etik olarak kartvizitinizde naısl abartı bilgi, yanlış bilgi vermezseniz imzanıda da vermemelisiniz.

İşin bir diğer tarafı da burada vereceğiniz bilginin kalabalık olmaması, öz olmasıdır. Yani 10 tane link ve 2 paragraf yazı yazmamalısınız. En fazla 2 veya 3 tane bağlantı belirtip siteniz, blogunuz veya portfolyonuzu belirtin. Bunun dışında kullandığınız diğer eposta hesapları ve telefonunuzu da belirtebilirsiniz. Ama adres gibi uzun ve her zaman işe yaramayacak bilgileri her espotanızda yaymayın. Çünkü farkında olmadan insanlara spam yapıyor olursunuz. Rahatsız etmeyecek, göz yormayacak bir içerik hazırlamaya özen gösterin.

İçerik, Resimler İkonlar

Hazırlayacağınız imzada az sayıda ikon ve kullandığınız bir sembol, şirketinizin logosu veya hiçbiri yoksa kişisel olur belki ama küçük bir fotografınızı ekleyebilirsiniz. Ekleyeceğiniz materyallerin hem dosya boyutlarının büyük olmamasına hem de görünür boyutlarının çok büyük olmamasına dikkat edin. Daha önce de bahsettiğim giib insanları rahatsız etmeden kendi reklamınızı yapmaya çalışıyor olacaksınız. Okumaya devam et “E-postalarınıza HTML imza ile daha ilgi çekici olun”

MacOSX’de Mail.app (Apple Mail) istemcisinde html imza ayarlamak

Neden HTML İmza Kullanmalısınız

HTML imza kullanarak gönderdiğiniz mesajlardaki imzalarınıza etkileşim ve referans katabilirsiniz. Ünvanınız ve insanları yönlendirebileceğiniz blog, portfolyo gibi sayfalarınıza bağlantı verebilir, ikonlar veya logonuzu kullanarak daha görsel bir imza oluşturabilirsiniz. Bu dökümana başlamadan önce bu konuda daha önce neden ve nasıl yapacağınızı anlattığım “E-postalarınıza HTML imza ile daha ilgi çekici olun” dökümanını okuyun. Okumaya devam et “MacOSX’de Mail.app (Apple Mail) istemcisinde html imza ayarlamak”

Web İkonları

v0.7’de sitenin alt kısmına yerleştirmek üzere tasarladığım, web 2.0 button görünümüne sahip ikonları Dosyalar bölümünde Grafik dizininde “rss_xhtml_icons.psd” ve “valid_css_xhtml_icons.psd” dosyaları olarak bulabilirsiniz. (Her ne kadar sayfalar valid olmasa da 🙂 )

http://www.mfyz.com/Files/Grafik

Kullanımı Creative Commons 4.0 lisansına uygun olmalıdır. Lisans hakkında bilgi almak için de http://www.mfyz.com/lisans/ adresini ziyaret edebilirsiniz.

HTML Dersleri Tekrar dökümanlar bölümünde

Eski dökümanları yeniden düzenleyerek ekliyorum biliyorsunuz. Yeni sitenin stilleri, tablosuz arayüz, daha okunabilir ve etkileşimli dökümanlara dönüştürüyorum.

Diğer kategorisinde “temel html bilgisi” üzerine 7 dökümanlık bir seri yazmıştım hatırlarsanız. O seriyi güncelledim.
https://www.mfyz.com/tr/html-dersleri–giris/
adresinden giriş dökümanına erişebilir, seriyi oradan takip ederek okuyabilirsiniz.

Çok yakında “temel javascript bilgisi” ile ilgili olan seriyi de güncelleyerek ekleyeceğim.

HTML Dersleri : Giriş

Programcılar için temel web sayfası bilgisi az çok gerekli olan birşeydir. Web sayfası dediğimiz şey resim, flash, java üzerinde barındıracak, gösterim ve yerleşim kurallarını saklayan html dosyalarından oluşur. HTML dosyaları basit olarak etiketlerden oluşan düz metin dosyalarıdır. Yazmak ve düzenlemek için en basit text editörlerinden tutun, dreamweaver gibi gelişmiş programlara kadar çok çeşitli yeteneklere sahip araçlar kullanabilirsiniz. Önerim ham html’i elle kodlayabilir şekilde öğrenmeniz. Zira ben bütün kodlama işlerimi vi veya textmate ile yapıyorum.

HTML etiketleri genellikle açılış ve kapanış etiketleri olarak yazılır. bir işaretleme yaparken işaretlenecek kısmın başlangıcını ve bitişini bu etiketlerle belirleriz. Mesela düz bir metin girerken, koyu stildede yazı yazmak istediğimizde koyu metin etiketini kullanarak koyu yapmak istediğimiz alanı belirleriz. Mesela “normal normal <b>koyu</b> normal” şeklinde koyu olacak alanın başına başlangıç, bitimine de kapatma etiketi ekleyerek koyu olacak alanı işaretlemiş/belirtmiş oluyoruz. Bazı istisna etiketler hariç genelde bütün etiketler kapanış etiketleri ile kullanılması gerekir.

Bu döküman serisinde özetle html dilinin genel hatlarını anlatacağım. Aşağıdaki dökümanları takip ederek html konusunda genel bilgiye sahip olacaksınız.

İçerik

  1. Yapı ve sayfa üstbilgi etiketleri
  2. Başlıklar, paragraflar, metin biçimlendirme ve köprüler
  3. Web objeleri ve resimler
  4. Tablolar ve çerçeveler
  5. Form ve form öğeleri
  6. Sonsöz ve öneriler

 

HTML Dersleri (1) : Yapı ve sayfa üstbilgi etiketleri

Doctype (Döküman kodlama türü)

Döküman türü, tarayıcıların, kodladığınız sayfanın ne olduğunu anlamasına yardımcı olur. Doctype, web standartlarına göre (w3c) zorunludur. Yani bir sayfanın türü belirtilmek zorundadır. Bu derslerde HTML kodlama üzerine yoğunlaştığımızdan “Geleneksel html türü” bizim işimizi görecektir. İleride doctype hakkında başka bir makalede bahsedeceğim.

html etiketi

Tüm html kodlarının bulunması gereken blok bu bloktur.

head etiketi

HTML açılış etiketinden sonra sayfa bilgi etiketlerinin bulunması gereken bloktur. title, meta, style etiketlerini bu blok içerisinde yazmalıyız.

title etiketi (Başlık)

Tarayıcı penceresinin başlığında görüntülenen sayfa başlığını belirlemenizi sağlar.

meta etiketi

Sayfa bilgi değişkenlerini belirler. Sayfa hakkında birçok bilgiyi bu etiketle ayarlarız. Sayfa oluşturan programın adı, sitenin yazarı, sayfa hakkında anahtar kelimeler, sayfanın kısa tanımı, tarayıcı için özel ayarlar (sayfanın son kullanım tarihi vs) gibi çok fazla özellik ayarlanabilir. Bu ayarlamalardan bazıları;

Sayfanın karakter kodlamasını Türkçe olarak ayarlamamızı sağlar. UTF-8 kullanmanızı öneririm, tüm yazı karakteri ailelerini içerir.

Bulunulan sayfayı yönlendirir. Eğer URL=”…” kısmı girilmezse bulunduğu sayfayı, yüklendikten X saniye sonra yeniden yükler. Eğer girilirse sayfa yüklendikten X saniye sonra belirtilen adrese yönlenir.

Sayfanın içeriğine ait anahtar kelimeleri belirler. Arama motorlarında bu anahtr kelimelere göre sayfa incelenir.

body etiketi (Sayfa kodları)

Bütün sayfa içeriğini bu blok içerisine yazın. Sayfa hakkında bazı görünüm ayarlarını da bu etiketin özniteliklerini ayarlayarak belirleyebiliriz. Bunlar;

bgcolor=”RENK_KODU” : Sayfanın artalan rengini belirler.
background=”RESIM_DOSYASI_ADRESI” : Artalan resmini belirler.
text=”RENK_KODU” : Geçerli metin rengini belirler.
link=”RENK_KODU” : Geçerli link rengini belirler.
(NOT : alink, aktif linkler. vlink, ziyaret edilmiş linkler)
topmargin=”X” : Üstten kaç piksel boşluk bırakılıp sayfa içeriğinin başlayacağını belirler.
(NOT : left, right, bottom ile diğerleri de belirlenebilir.)

Bunların hepsi sayfanın stilleri ile ilgili özelliklerdir. Onun için bu öznitelikleri CSS ile ayarlamaya çalışın/alışın.

base etiketi

Sayfadaki linklerle ilgili geçerli çalışma tabanını belirler.
href=”http://” parametresi eklenerek sayfadaki bütün linklerin o site üzerinde çalıştığını belirleyebilirsiniz.
target=”main” parametresi ile sayfadaki bütün linklerin “main” çerçevesi içerisinde açılmasını sağlayabilirsiniz.

link etiketi

Dış bir dosya ile ilişki yaratır. Genel 2 özellik için kullanılır. Bunlar;

şeklinde kullanıldığında stil.css stil dosyası ile sayfayı ilişkilendirir. Yani stil.css’deki stilleri sayfaya uygular.

Favori (bookmark) listenizde, masaüstü kısayolları gibi dosyalanmış sayfa kısayollarında sayfa hakkında simge belirlemenizi sağlar.

style, script ve noscript etiketleri

Sayfa için javascript kodu çalıştırabilmemizi sağlar. Günümzde javascript desteklemeyen browser programı neredeyse bulunmuyor. Ancak desteklemeyen veya desteği kapalı olan programlar için noscript etiketi kullanarak anlanılmayan kısımları geçmiş olursunuz.

Bu sayfanın kodlarını incelemenizi öneririm. Kaynak kodu açıp sayfa yapısı etiketlerinde verdiğim değerleri gözden geçirin, Stil ve javascript tanımlarıma bakmaya çalışın. Çok daha fazla fikir verecektir.

HTML Dersleri (2) : Başlıklar, paragraflar, metin biçimlendirme ve köprüler

Başlıklar

p Paragraf Etiketi
Seçilen metini paragrafa dönüştürür, biraz içeri, alt ve üste de biraz boşluk ekler. Kapanış etiketi zorunludur.

h* (Headings : Başlıklar)
H etiketi başlıkları belirler. h1, h2, … h6 başlıklarından sayı büyüdükçe yazı küçülür.

div ve span
Stil uygulamak için kullandığımız metin bloğudur. class, id, style parametrelerini kullanarak stil tanımlayabilirsiniz.

br ve nobr
Yeni satırla ilgili etiketler; br etiketi yeni etikete geçişi sağlar. HTML yazarken yazdığınız metinde satır sonlarında br etiketi yoksa, yeni satırlar kelime ayracı yani boşluk olarak algılanır. Eğer yazdığınız metin bloğunu tek bir satırda görüntülemek istiyorsanız nobr kullanırsınız. Normalde metinler tarayıcı penceresine sığdırılır. nobr etiketini kullanarak bunu engelleyebilirsiniz.

Örnekler:

Metin biçimlendirmek

font : Metin bloğunu ifade eder. size parametresine, web font boyutu standartlarında verilen boyuta göre metin bloğundaki yazıların boyutunu, face ile de metin bloğundaki yazıların yazı karakterini ayarlar. size geçerli olarak 3’tür ve 1 ile 7 arasında değerler alır.

b ve strong : İçindeki metni kalın yazı stilinde görüntüler.
i ve em : İçindeki metni yatık stilde görüntüler.
u : İçindeki metni altı çizgili stilde görüntüler.

pre (preformatted : formatlanmamış) : Eşaralıklı (daktilo) metin biçimini ifade eder. Genellikle kod çıktılarını verirken, konsol, komut çıktısı veya ascii çalışmaları görüntülerken kullanırız. Bu etiketler arasına yazılan metinlerde, boşluk sayıları, yeni satırlar olduğu gibi korunur.

Örnekler:

 

Köprüler

Başka bir sayfa, sayfa konumu veya dosyaya köprü kurmak için a etiketi kullanılır.

Sayfa konumu belirlemek için sadece name parametresi belirleyin. Çağırırken href=”#konum_adi” şeklinde kullanın.

Dosya veya başka bir sayfaya köprü için href=”sayfa_dosyasi_adresi” şeklindeki parametreyi belirleyin. Başka sitedeki linkler için kesin protokolü belirlemeniz gerekir.
(“www…” yerine “http://www…” şeklinde)

Köprülerin farklı çerçevelerde veya yeni bir pencerede açılmasını sağlamak için target=”cerceve_adi” parametresini ayarlayın. Eğer belirtilen çerçeve mevcut değilse sayfa, yeni pencerede açılır. Yeni pencere de açmanın bir diğer (ve en genel) yolu parametreye _blank değeri vermektir.

Epostalara doğrudan köprü vermek için href parametresine “mailto:[email protected]” şeklinde değer verin. İşletim sisteminizin geçerli eposta programına, belirtilen eposta adresine yeni ileti açmasını emreder.

Örnekler:

HTML Dersleri (3) : Web nesneleri ve resimler

img (Resim)

Gif, jpeg veya png resmi görüntülemek için kullanılır.

src argümanı ile resmin adresi belirtilir.
border argümanı ile köprü etiketleri içerisinde kalan resimlerde, belirtilen piksel boyutunda, geçerli köprü renginde çerçeve oluşturur.
alt argümanı ile resim yüklenirken kapladığı alanın arkasında burada belirttiğiniz metin görüntülenir. Resim yüklenirken resim hakkında bilgi verir. Resim yüklendikten sonra yazı resmin arkasınsda kalır, yani görünmez. Web standartlarına göre img etiketi için alt argümanı zorunludur. İçi boş olsa bile kullanın.

Örneğin;

Çıktı :

hr (Horizontal Rule : Çizgi)

Sayfa boyunca yatay bir çizgi belirler. Geçerli olarak 2 değerine sahip, size parametresi ile yüksekliğini belirleyebilirsiniz.

embed

Ortam yüklemek ya da bilgi görüntülemek için eklenti nesnesi kullanır. src özelliği kullanarak nesne ekleyebilirsiniz. Mesela quicktime filmi eklemek, flash animasyonu eklemek için bu öğeyi kullanırız.

Örnek ;

Sayfa açıldığında otomatik olarak baslangic.wav dosyasını 1 kerelik 50% ses düzeyinde çalar.

veya

intro.mov adlı quicktime filmini kontroller olmadan 500×300 boyutunda otomarik olarak oynatır. Eğer quicktime yoksa yeni pencerede belirtilen eklenti sayfasını açar.

HTML Dersleri (4) : Tablolar ve çerçeveler

Tablolar

Ana tablo etiketleri 3 tanedir, tablo tanımı, tablo satırı ve tablo hücresi.

table

Boş bir tabloyu ifade eder. içerisine girilen satır, sütun kuralları ile tabloyu oluşturur. Tablo hakkında genel bilgileri, ayarları içerir. Argümanları şöyle

bgcolor artalan rengini,
cellpadding tablo hücrelerindeki kenar boşluklarını,
cellspacing tablo hücrelerinin birbirleri arasındaki boşluğu,
border tablo ve hücrelerini belirleyen çerçeveyi ayarlar.

tr (Table Row : Tablo Satırı)

Tabloda satırlar eklemeden sütun ekleyemezsiniz. Her sütun bulunması gereken satırın içerisinde yer alamalıdır. Satırdaki ortak özellikleri tr etiketinin parametreleri ile düzenleyebilirsiniz (örneğin, artalan rengini).

td (Table Data : Tablo Hücresi)

Tablodaki hücreler için tanımlanması gereken son etikettir. İçinde bulunduğu satırda bir sütunu ifade eder.

Örnek tablo yapısı;

Öncelikle çerçevesi geçerli renk ve stilde 1 piksellik boş tablo tanımlanıyor. 1 satır, artalan gri olarak tanımlanıyor. 1. Sütunda artalan sadece o hücre için beyaz belirleniyor. Diğer sütunlarda ise tr etiketinde tanımlanan gri renk artalan olarak belirlenmiş oluyor. Yukarıdaki kodun çıktısı ;

1.Sütun 2.Sütun 3.Sütun

Önemli NOT : Her satırdaki sütun sayısı eşit olmalıdır. Eşit olmayan tabloların yapısı bozuktur.

Bir hücre kendi dengindeki hücrelerden kapsaması gereken kadar hücreyi td etiketinde cospan ve rowspan parametreleri belirtilerek ayarlanabilir.

Çerçeveler

Çerçeveler konusunda tek önerim, iç çerçeveler dışında çerçeve tekniği kullanmamanız doğrultusunda olacaktır. İç çerçeveler sayfalarda resim gibi belirli bir alan kaplayan ve o alan içerisinde sanki tarayıcı penceresi oraya sığdırılmış gibi görüntülenir. Eğer çok kolonlu veya çok satırlı sayfalar yapmak istiyorsanız tablo yapısını kullanarak öncelikle iç çerçeveleri sığdıracağımız alanı belirler, stillerle destekli iç çerçeve ekleyerek o çerçeveler içerisinde sayfalarımızı görüntüleriz. Bu işin normal methodunda ise neredeyse aynı mantığa sahip bir yapıyla, birden çok sayfa kullanırız. kod olarak aynı hatta daha fazla alan kaplayan dosyalar hazırlamış oluruz. Bana güvenin ve sadece bunu öğrenin. Örnek kod vermek gerekirse;

HTML Dersleri (5) : Form ve form öğeleri

form

Form öğerleri kullanabilmek için öncelikle bir form belirlemeniz gerekir. Form öğerlerini bu etiketler arasına yazmalısınız. name ile formun adını, method ile gönderi metodunu (get veya post), action ile formun belirtilen metodla gönderileceği sayfayı belirleriz.

name formun ismidir, javascript ile dom ağaç yapısından forma ve form elemanlarına ulaşmırken kullanırız. method formun postalama metodudur. GET ile url’den verileri açıkca gönderir, POST ile göstermeden postalar. Genelde POST metodunu kullanırız. action ise formun postalanacağı adrestir ve genellikle bir sunucu tabanlı dilin betik dosyası olur.

input

Her türlü bilgiyi input’lar sayesinde girdi aldırırız. name ile, formun action parametresinde belirtilen sayfaya postalanırken değişken adlarını, girilen değer belirler. value parametresi ise o öğe için geçerli değeri taşır. Bu geçerli değerler çıktısı verilecek input türüne göre değişkenlik gösterir. type parametresi ile de çıktısı verilecek form öğesinin türünü belirleriz. Bu öğeleri, türlerine göre ayrı ayrı inceleyelim ;

button : Çıktı olarak bir buton basılır. value değeri butonun üzerinde görüntülecek yazıyı belirler. Butonun geçerli olarak hiçbir fonksiyonu yoktur. onClick olayına atanan javascript ile bir fonksiyon kazandırılır.

Çıktı:

submit : Çıktı olarak buton basılır. Ancak bu buton formu gönderme işine yarar. Geçerli olarak tarayıcının diline göre formu göndermeyi ifade eden bir kelime ile görüntülenir. value parametresi ile bunu Gönder, Devam gibi bir anlatım belirleyebilirsiniz.

reset : Çıktı olarak yine buton basılır. Buton formdaki bütün öğelerin değerlerini, ilk değerlerine döndürür. Yani geçerli value değerlerine döner.

text : Tek satırlık bilgi giriş alanı basar.

Çıktı:

password : text ile aynıdır. Tek farkı yazılan bütün karakterlerin değerleri korunurken, gösterimde işletim sistemine göre bir şifreleme gösterimi basılır. Windows’da büyük nokta, bazı tarayıcılarda hala *, bazılarında ise hiçbirşey görüntülenmez.

Çıktı:

checkbox : Seçim kutusu basılır. Eğer seçilmişse gönderilen sayfaya değeri on olarak, seçili değilse off olarak gider.

Çıktı: Bisikletin var mı?

Eğer “checked” argümanı verilirse ekrana varsayılan olarak seçili basılır. Örneğin:

<input checked="checked" name="onay" type="checkbox" /> Bisikletin var mı?
Çıktı: Bisikletin var mı?

radio : Seçim butonları koyar. Kullanıcıya birden çok seçenek ve bunlardan birinin seçilmesi istenirse bunları kullanırız. Bir seçim gurubunda her seçenek için bir tane radio türünde input öğesi eklenir, name yani isim parametrelerine aynı değer verilir ve value parametresine verilen değerlerden, form gönderilirken seçilmiş olanının değeri o isim yani değişken ile gönderilecek sayfaya gönderilir.

Çıktı: Kaç tane bilgisayarın var?
1 tane
2 tane
3 tane
3’den fazla

Mesela “2 tane” seçeneğinin inputunda “checked” argümanı var. Onun için form ilk yüklendiğinde 2 seçeneği seçili oluyor.

label

label’dan hemen bahsetmek istiyorum çünkü genellikle checkbox ve radiobuttonlar için kullanılırlar. label adı üzerinde etikettir. Yani bir inputun aslında başlığıdır. Yani siz formda bir text input veya başka bir input basarken onun hemen öncesine bir açıklama ile o bilginin ne olduğunu girersiniz. Mesela;

E-Posta Adresiniz:

Buarda başlığa tıklamaya ihtiyaç yoktur. Yani kimse “E-Posta Adresiniz : ” yazısına tıklayıp birşey yapmak istemez. Fakat checkbox ve radiobutton’larda böyle bir ihtiyaç hissedilir. Mesela:

Web standartlarını seviyor musun?

Burada ise çıkan ufacık tik atma kutusuna tıklamaktansa yazıya tıklamayı tercih eder çoğu kullanıcı. Ve doğal olarak yazıya tıklanınca hiçbirşey olmaz 🙂 label aslında burada işimize yarıyor.

Gördüğünüz gibi yazıya tıklayınca da input tıklanmış oluyor. Unutmamanız gereken şey şu: label’a for argümanı ile hangi input’un label’i olduğunu belirtmek. Tabiki bunu da input’a verdiğiniz id ile yapıyoruz.

Aynı durum radiobuttonlarda da söz konusudur, “Kaç bilgisayarın var?” sorusuna cevap verirken yazılara tıklayarak seçim yaptırmak için her radiobutton’a bir id verilir, yazılar label ile işaretlenip for ile de her label’a kendi inputunun id’si verilir.

label etiketi aynı zamanda bir formu css ile şekillendirirken de işinize yarayacaktır.

textarea

Çok satırlık yazı alanı basar. rows parametresi ile kaç satırlık bir alan görüntüleneceği, cols parametresi ile de kaç satır genişliğinde görüntüleneceği ayarlanabilir. Ancak bu ayarlar sadece görünümü ayarlar. içine girilebilecek metin teorik olarak sonsuzdur. Metnin uzunluğu makinenizin limitlerine göre belirlenir. Geçerli değer açılış ve kapanış etiketleri arasına girilir.

select ve option

Seçim listesi basar. Geçerli olarak boş liste basılır. Açılış ve kapanış etiketleri arasındaki option etiketleri bu listeyi oluşturur. option etiketleri arasına yazılan şekilde görüntülenir ve seçilen seçenek, select’in name parametresinde belirlenen değişkene seçilen option etiketindeki value parametresinin değerini atar. option etiketleri selectsiz kullanıldığında bir işe yaramazlar.

Hangi ildesiniz?: