16-11-2008 ercani html notları, püf noktaları, wordpress
Aslında bu konuyla ilgili bir çok yazı bulabilirsiniz. Ama iletişimden bir kaç kere sorulduğu için genel olarak bir yazıda bazı türkçe karakter sorunlarını toplayım istedim. Daha önce “wordpress tema türkçeleştirmek” yazımda bundan biraz bahsetmiştim.
Öncelikle bir web sitesi hazırlanırken sitede kullanılacak dile göre karakter kümesi kodlanır. Bu kodlama web sitemizde kullanılacak karakterlerin tanınmasını sağlar. Eğer biraz HTML bilgisine sahipseniz META taglarını duymuşsunuzdur. İşte bu karakter kümesi meta tagları içinde tanımlanır. Aşağıdaki kod satırından herhangibirisi türkçe karakterli siteler için kullanılabilir.
<META http-equiv=content-type content=text/html;charset=iso-8859-9>
<META http-equiv=content-type content=text/html;charset=windows-1254>
Bir örnek gösterelim;
<html>
<head>
<title>Karakter Kodlaması Örneği</title> Title tarayıcımızın en üstünde mavi yerde çıkacak sayfa başlığıdır
<META http-equiv=content-type content=text/html;charset=iso-8859-9>
</head>
<body>
Burası sayfamızın görüntülendiği gövde kısmıdır.
</body>
</html>
Bu şekilde sayfamızın türkçe karakterlere uygun olmasını sağlamış olduk.
Şimdi biraz UTF-8 den bahsedelim.
UTF-8 : 8 bitlik bir Unicode karakter seti formatıdır. “Unicode Transformation Format”‘ın kısaltması olarak kullanılır. UTF kullanarak 1 milyondan fazla karakter kodlanılabilinmektedir.
Yani anlıcağımız yukarıdaki META etiketleri arasına tanımladığımız türkçe karakter kümeleri ( iso-8859-9 ,windows-1254 ) yerine evrensel bir karakter kümesi tanımlayabiliriz “UTF-8 “. O zaman meta tagları içindeki kodumuz değişecektir ve şöyle olacaktır;
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″/>
Bu şekilde sayfamızı kodladığımızda sayfamızdaki türkçe karakterler tarayıcılar tarafından düzgün yorumlanacaktır.
Bu kodlamaya karşı yinede , türkçe karakter sorunları yaşayabiliriz. Bu bazen sunucudan, bazen kullandığımız web sisteminin kodlanmasından veya sayfayı editlerken kullandığımız editörden kaynaklı olabilir. Böyle bir durumda türkçe karakterler, “?” veya absürt karakterler ile değiştirilir (yani yorumlanamaz). Bunun için yapmamız gereken türkçe karakterler yerine html deki karşılıkları yada ascii kodlamadaki karşılığını yazmak.
Türkçe Karakterler İçin HTML karşılığı; YAZININ TAMAMINA BAK »
03-10-2008 ercani css notları, html notları
Formlar herkesin hayatının bir parçası aslında. Çünkü interneti artık herkes kullanıyor. Tabi kullanırken sitelere yorum yapıp, üye oluyoruz. Bunlar içinde form etiketleri kullanılıyor. Hem kullanıcı hemde tasarımcı için olmazsa olmaz bir araçtır. O yüzden burda dilimin döndüğünce form etiketlerini anlatmaya çalışacağım. Daha sonrada form hazırlayan çevirimiçi bir kaç siteden bahsedeceğim.
Hazır formlar çok kullanılıyor artık, ama bu formları kendi ihtiyacınıza göre düzenlemek içinde bu anlatacağım etiketleri bilmeniz gerekiyor. Evet başlayalım;
Form Etiketleri
Formlar set halindedir. Yani bir bilgisayar kasasının içindeki elemanlar gibi. Eğer elemanı kasanın içene yerleştirmezseniz çalışmaz. Aynen bunun gibi form etiketlerini işeren bir kasa vardır. Tüm form etiketlerini;
<form></form>
yapısı içine yerleştiririz. Böylece hepsi birbiriyle ilişkili olacaktır.
Biraz bilgi vermeye devam edelim. Formu gönderdiğinizde formdaki herbir bilgi tanımlanmış bir değişkene yazdırılır. Yani isminizi yazdığınızda , isminiz gidecek dosyada bir değişkene yazdırılır. Daha sonra ordan istenilen yere yollanır yada çıktı verilir. Bilgilerin doğru değişkene gitmesi için name=”" parametresi kullanılır. Her etikette olmak zorundadır.
Bir form oluşturulurken, bilgilerin gideceği dosya ve gönderilme metodu belirtilmelidir.
action=”Dosya ismi” Burada formdan gidecek bilgilerin değerlendirildiği dosya adının uzantısı yazılır.
method=”get/post” Buradada form gönderilme metodu belirlenir. Get yada Post kullanırsınız. Güvenlik açısından en çok post kullanılır.
Bu iki yöntemin çeşitli farklılıkları vardır. Fakat en belirgin ve temel farkları ise GET metoduyla gönderilen veriler ilgili betik sayfasında tarayıcının adres çubuğunda belirtilirken POST yöntemiyle gönderilen veriler belirtilmezler. POST yöntemi bu özelliğiyle daha gizli bir yöntemdir ve şifre verilerini göndermede kullanılan yöntemdir diyebiliriz. Ayrıca eğer çok uzun bir metni gönderiyorsak tarayıcının adres çubuğunda gereksiz yer kaplaması hem hız hem de görünüm bakımından hoş değildir. Bu yüzden POST kullanmanızı tavsiye ederim. YAZININ TAMAMINA BAK »
02-08-2008 ercani css notları
Evet yazımıza devam ediyoruz. Önceki yazıda bir elemanın nasıl kutu ürettiğini ve kutuların kendi arasında nasıl davrandığını gördük. Şimdiki konu css için oldukça önemli bir konudur. çünkü kutuların kendi aralarında nasıl dizildiğini hangisinin öncelik kazanacağını bu konumuzda öğreneceğiz.
FLOAT: float özelliği kutuların kendi aralarındaki konumlamasını belirler.
genel değerleri;
left | right | none | inherit tir.
örnek bir kod yazalım ve görelim; YAZININ TAMAMINA BAK »
31-07-2008 ercani html notları
Evet yazımıza devam ediyoruz. Şimdi anlatacağım konu (TABLOLAR) html de elemanların sıralanması ve düzgün yerleştirilmesi için kullanılan bir metotdur. O yüzden html için çok önemlidir.Web tasarım aslında css sayesinde tablosuz sayfa modeline doğru gitmektedir. Ama bildiğimiz kadarıyla google bile hala sayfalarında tablo kullanıyor.
Evet tablolara şöyle bir giriş yapalım; Tablo <table></table> taglarıyla başlayıp biter. Bu taglar tek başına işe yaramaz. Yani bu tagların yazılmasının nedeni web tarayıcısının “tablo yaratılıyor öyle yorumla “ diye yorumlamasıdır. Bir tablo şüphesizki satır ve sütünlardan oluşur. Oyüzdenden <table> etiketine satır ve sütun tanımlamamız gerekir. Bunu yapmak için satırın başladığını ifade eden <tr></tr> tagları kullanılır. Satırın devamını sağlayan ve aslında içeriği taşıyan bloglar <td></td> taglarıdır. Bunu bir örnekle gösterelim.
- <table border=”1″>
- <tr>
- <td>burası birinci sutundur.</td>
- <td>burası ikinci sutundur.</td>
- <td>burası üçüncü sutundur</td>
- </tr>
- </table>
Bu kodları htmlin gövdesi olan <body></body> taglarının arasına yazdığımızda şu sonucu elde ederiz.
| burası birinci sutundur. | burası ikinci sutundur. | burası üçüncü sutundu |
Yani anlıcağımız <tr> ler satır oluşturur <td> ler ise sutun. Bu çok karıştırılan bir meseledir. En iyi olarak şöyle bir resimle anlaya biliriz;
Burada <td> yerine en üst sütun olarak yani başlık için <th></th> kullananlarda var. YAZININ TAMAMINA BAK »
30-07-2008 ercani html notları
Bu yazımda html işaretleme dilini en kestirme yönden ve işimize yarıcak yönlerini anlatmaya çalışacam. Çünkü css ile birlikte html içindeki biçimlendirme taglarının(<font><b><i>…) yerini stil tanımlamalar almıştır. Bunun yanı sıra htmlde geçen ve artık pek kullanılmayan FRAME yani çerçeveler tagınında üstünde durmucam. Çünkü artık web tasarımcıları görsellik ve teknik olarak bu tekniği kullanmak istemiyorlar.
Öncelikle HTML( Hyper Text Markup Language) işaretleme dili anlamına gelir. İşaretleme dili denmesinin nedeni, sunmak istediğimiz dökümanın, resimlerin yani içeriğin taglar içinde işaretlenip tarayıcı tarafından okunmasını sağlamasındandır. HTML bir programlama dili değildir. Çünkü html ile tek başına çalışabilecek bir program yazamazsınız.HTML W3C(World Wide Web Consortium ) tarafından standartlaştırılmaktadır.
Html’lin asıl görevini anlamak için bir örnek vermek istiyorum.Örneğin bir tarayıcıda ( firefox,internet explorer,nescape,opera,safari…) hazırladığımız bir metnin görüntülenmesini istiyoruz. Metnimiz şu şekilde olsun
“Yeryüzünde barışı sağlayacak sihirli değnek analarla öğretmenlerin elindedir. Eğitim demek, vücutta ve ruhtaki güzelliği ve mükemmelliği son mertebesine kadar geliştirmek demektir.EFLATUN”.
Bu metnimizi tarayıcının tanıması ve istediğimiz şekilde yorumlaması için taglar(< >) kullanırız. Tag kullanılmasının nedeni vereceğimiz komutlarla düz metinimizin ayrılmak istenmesidir. Yukarıdaki metnimizi taglara dökersek;
<p><font color=”blue”>Yeryüzünde barışı sağlayacak sihirli değnek analarla öğretmenlerin elindedir. Eğitim demek, vücutta ve ruhtaki güzelliği ve mükemmelliği son mertebesine kadar geliştirmek demektir.</font><i>EFLATUN</i></p>
Biz burda tarayıcıya şunu demiş olduk;”bak kardeşim <p> ile başlayan ve </p> diye kapan yerler bir paragrafır. <i></i> arasındakiler italiktir.<font></font> arasındakilerde belirttiğim gibi mavi yazıdır. İşte web tarayıcısı bu dilden anlar ve verdiğimiz tagları yorumlar. Yukarıdaki örneğin görüntüsü şu şekildedir.
Yeryüzünde barışı sağlayacak sihirli değnek analarla öğretmenlerin elindedir. Eğitim demek, vücutta ve ruhtaki güzelliği ve mükemmelliği son mertebesine kadar geliştirmek demektir.EFLATUN YAZININ TAMAMINA BAK »
27-07-2008 ercani css notları
CSS i anlamak ve ona hakim olmak için bilinmesi gereken bir konudur. Tablosuz bir web tasarımı, daha temiz kod, daha az sorun ve daha kullanışlı bir web sitesi demektir. Bunu anlamak içinde çerçeve modelini bilmemiz gerekir. Her eleman aksi belirtilmediği sürece (display:none) bir çerçeve üretir.
Örneğin <p> elemanı aşağıdaki şekilde çerçeve üretir. Ve bu çerçeve modeline istersek müdahale edebiliriz.
Örnekte görüldüğü gibi bir eleman belirtilen değerlere göre bir çerçeve üretir. İşte bu çerçevenin bir içerikte yüzdürülmesi, konumlandırılması veya çerçeve türünü belirliyen nitelikler vardır.Onlara değinecez ama önce çerçevenin oyutları hakkında bilgi verelim.
Çerçevenin boyutlarını şunlar belirler;
width:Çerçevenin genişliği bu nitelik ile tanımlanır.. Eğer niteliğin değeri auto ise kullanıcı arayüzü bu genişliği kendisi belirler.
height:Çerçevenin yüksekliği bu nitelik ile tanımlanır. Eğer niteliğin değeri auto ise taşıyıcı bloğun yüksekliği belgenin içeriğine uygun olarak büyüyecektir.
Bir elemanın bu şekilde çerçeve (blok) üretmesinin nedeni display niteliğidir. Yani blok seviyesinde olmayan bir elemanı blok seviyesine getirmek için veya tam zıtdı olarak blok seviyesinden bir elemanın seviyesinin indirgemek için kullanılır.Örnek verecek olursak; YAZININ TAMAMINA BAK »
22-07-2008 ercani Bunlarıda Bilin, html notları, püf noktaları, virüs
Dünya Çapında Ağ Birliği (World Wide Web Consortium ya da kısaca W3C) Ekim 1994′te Ağ’ın mucidi Sir Tim Berners-Lee tarafınan MIT ve CERN bünyesinde kurulmuş uluslarası Dünya Çapında Ağ (WWW) standartlarını belirleyen örgüttür.(vikipedia)
İşte bu örgütçe tanımlanan CSS ve HTML gidi diller tarayıcılar tarafından yorumlanır. Tarayıcılar bir web sayfasını yorumlarken iki çeşit yorumlama modu kullanır. standart mod(standards mode) ve garip mod(Quirks mode) .
Standart modda taraycı maksimum verime ulaşır. Kodlar en iyi şekilde ve ayrınlı olarak yorumlanır.
Garip modda ise rastgele yorumlanır ve css te bazı özellikleri desteklemez bunun sonucunda sayfada sorunlar ortaya çıkar.O yüzden bir web sayfası hazırlarken bunu dikkate alak hazırlamamız gerekir.
Peki web sayfamızın standart modda yorumlanmasını nasıl sağlayabiliriz derseniz anlatayım.
DTD(document type definition) döküman tipi tanımlamasıdır. Eğerki sayfamızda bu tanımlamayı yaparsak web tarayıcısı tanımladığımız şekilde web sayfasını yorumlar. örneğin;
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
Bu tanımlama sayfanın sadece XHTML1.0 kurallarının geçerli oldugu bir XHTML sayfası oldugunu gösterir.
bu kodu sayfamızın başında kullanabiliriz genel kullanımı şu şekildedir;
- <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=iso-8859-1″ />
<title>doctype gösterimit</title>
</head> - <body>
</body>
</html>
şimdide bir web sayfasının kodlama diline göre hangi tanımları yapacağımızı gösterelim;
| Document Type | DOCTYPE |
|---|---|
| HTML 3.2 | <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN"> |
| HTML 4.0 Transitional | <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> |
| HTML 4.0 Frameset | <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Frameset//EN" "http://www.w3.org/TR/REC-html40/frameset.dtd"> |
| HTML 4.0 Strict | <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN" "http://www.w3.org/TR/REC-html40/strict.dtd"> |
| HTML 4.01 Transitional | <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> |
| HTML 4.01 Strict | <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/REC-html40/strict.dtd"> |
| XHTML 1.0 Strict | <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/xhtml1-strict.dtd"> |
kaynak :http://www.ericmeyeroncss.com/bonus/render-mode.html
Bu tanımlamaları mutlaka yapmalıyız çünkü hala IE6 kullanan kullanıcılar var ve zaten css 3 tanımlamalarında oldukça düşük kalitede yorumlanıyor.Daha fazla hata olmaması için gerekli bir tanımlama.
Bunun dışında (X)HTML dökümanlarımızı onaylatmamız gerekir. Bu şu demektir; kod yazarı olarak yaptığınız çalışmayı birde onaylatmış ve sorunları varsa görüp gidermiş olursunuz.Bunu yapmak için http://validator.w3.org/
adresi hizmet veriyor. Bunun dışında zaten çoğu web sayfası editörü bu hizmeti veriyor.
