Opera 29 [Mobil-Masaüstü] kararlı sürüm yayınlandı..

HTML ile Çalışmak – HTML5 Eğitimi

Yazan: Çağlar Yeşilyurt | 15 Eylül 2011 | eğitim html HTML5 web teknolojileri

HTML5 logo - bölüm 2Bu yazımızda HTML oluşturmaya başlamak için size nelerin gerekli olduğundan bahsedeceğiz. İlk HTML belgenizi bu belge sonunda kendiniz hazırlamış olacaksınız.

HTML Oluşturmak

Düzenleme Araçları

HTML oluşturmak için özel bir programa ihtiyacınız yoktur. Windows üzerinde Not Defteri yada MacOS üzerinde TextEdit kullanarak elle HTML yazabilirsiniz. Buna rağmen size UTF-8 kodlama (detaylar için aşağı bakın) ile dosyaları kaydetmenizi sağlayan bir editör seçmelisiniz.
Web geliştiricilerinin genelde seçtiği görsel düzenleyiciler:

benzerleri…

UTF-8 ve karakter kodlama nedir?

Bildiğiniz gibi bilgisayardaki bütün bilgiler 0 ve 1’lerden oluşur. Bilgisayar 0 ve 1’lerin sırasına ve sayısına göre onlara anlam verir. İkilik düzende 8 tane 0-1’den oluşan bir grubu düşünelim. 00000111. Bu sekiz sayıdan oluşan grup ikilik sayı düzeninden 10’luk tabana dönüştürüldüğünde 11 sayısına karşılık gelmekte. Bilgisayar eğer bu sırayı 10’luk sayı sistemine dönüştürürse 11 olarak algılar ve işlemleri ona göre yapar. Peki sayı yerine harfe dönüştürmek isteseydik? A harfini 1 sayısına, B harfini 2 sayısına eşleştirdiğimizde, 11. sayı ise I harfine karşılık gelecektir. Bizim belirlediğimiz bu harf-sayı eşleştirmesi bir karakter kodlamasıdır. Bizim belirlediğimiz bu yol dışında dünyada binlerce karakter kodlaması mevcuttur. Bunlardan en çok tercih edileni UTF-8’dir. Tercih edilmesindeki sebep ise dünyadaki tüm harflerin, karakterlerin UTF-8’e göre bir sayı karşılığının olması.

UTF-8 kodlamayı kullanmadığınız takdirde, Türkçe karakter içeren belgeleriniz çalışmayabilir, eksik çalışabilir.

HTML herhangi bir yazı düzenleyicisiyle hazırlansa bile özel HTML düzenleyici programlar size ek özellikler sunarlar ve daha tatminkardır. Ben yalın bir yazı editörü kullanmanızı öneriyorum çünkü en iyi bu şekilde HTML alışkanlığını öğrenebilirsiniz.

HTML olan el beceriniz arttıktan sonra yazıdğınız kodu tamamlayan editörlere geçiş yapabilirsiniz. Bu konuda benim tercihim Aptana Studio. Bunun haricinde Komodo Edit‘te gayet başarılı bir editör. Ayrıca bazı temel kodları daha hızlı yazmak istiyorsanız Zen Coding adlı editör eklentisini inceleyebilirsiniz.
Kodları kendiniz yazarken biraz daha gelişmiş bir metin editörü arıyorsanız Notepad2 ve Notepad++‘ı deneyebilirsiniz. İlerleyen yazılarımızda Notepad++ kullanacağız, kullanımını anlatacağız.

Deneyin

Gelin şimdi bir HTML belgesi hazırlayalım.
Not Defterini (Windows kullanıcıları) ya da TextEdit’i (MacOS kullanıcıları) açın.
Aşağıdaki örneği yazın.

[codesyntax lang=”html4strict”]




 
 Örnek Web sayfası


 
Merhaba!

[/codesyntax]

Burada yazanların ne işe yaradığını bir sonraki bölümde öğrenmeye başlayacaksınız.

Not Defterinde örnek bir HTML kodu

Dosyayı kaydetmek

Bir HTML belgesini kaydederken aşağıdaki iki aşamayı takip etmelisiniz.

Dosya isimleri

Dosya isimleri aşağıdaki kurala uymalıdır:

  1. Kaydedeceğiniz dosyanın uzantısı “.htm” ya da “.html” olmalıdır. htm veya html arasında bir fark yoktur. .htm uzantısı dört harfli uzantıları desteklemeyen işletim sistemleri için kullanılıyordu. Günümüzde böyle bir sorun yok.
  2. Dosyaya bir isim verin ama bu isim sadece alfabedeki karakterleri sayıları “-(tire)” ve “_(alt çizgi)” karakterleri içerebilir.
Dosyayı doğru uzantıda kaydettiğinizden emin olun. Diğer türlü istediğiniz sonucu alamayabilirsiniz.

Karakter kodlama

Karakter kodlamada yapmanız gereken iki iş var.

  1. Belgedeki işaretleme kodlamaya uygun tasarlanmalıdır.
  2. Dosyanın kendisi uygun kodlama türünde kaydedilmelidir.

İlk maddedeki konuyu ilerleyen bölümlerde öğreneceksiniz. Bu bölümde ikinci maddeyi öğreneceksiniz. Yapacağınız işlem html belgesinin karakter kodlama ayarlamasıdır.

 

Not defterinde karakter kodlaması değiştirme

  1. “Dosya” menüsüne gelin ve “Farklı kaydet”i seçin.
  2. Kodlama seçeneklerinden “UTF-8“i seçin.
  3. Dosya ismini girin. Örnekteki isim “index.html“.

TextEdit’te karakter kodlaması değiştirme

  1. Menüden “TextEdit“e tıklayın sonra “Tercihler“i seçin.
  2. “Aç ve Kaydet” sekmesine tıklayın.
  3. Kodlama seçeneklerinden “UTF-8“i seçin.
  4. “Dosya” menüsüne tıklayın ve “Kaydet“i seçin.
  5. Dosya ismini girin. Örnekteki isim “index.html“.

Web tarayıcıları

Web tarayıcıları, web sayfasını gösteren yazılımlardır. Pek çok web tarayıcısı vardır. Bunlar en önemli 5 tanesi aşağıda listelidir. Bu web tarayıcılarının tamamı, pazarın %99’una hakimdir. Bu nedenle web sitelerimizi kodlarken 5 büyük tarayıcıda en iyi görünmesini hedef alarak kodlayacağız.

Web sayfanızı doğru hazırladığınızı iki yada daha fazla tarayıcıda kontrol etmelisiniz.

İlk web sayfanız

Kaydettiğiniz bu HTML belgesini web tarayıcısında açalım.

  1. Sevdiğiniz web tarayıcını açın. (Mesela Opera :)
  2. HTML belgesini bu tarayıcının üzerine sürükleyip bırakın, ya da menüsünden Aç komutunu takip edin.

HTML belgenizi görebildiniz mi?

 

« 1. bölüm: HTML ve HTML5 Nedir?
3. bölüm: HTML Etiket Sistemi »

Vivaldi Türkiye sitesi

  • Anonim

    Vay be çok güzel çağlar bu tarz yazıların devamı gelmesi dileğimle eline sağlık.

    • Çağlar YEŞİLYURT

      Bu yazıların devamı gelecek. :) 

  • Burak

    visual stutyo c# proğramında yazabilirmiyim 

    • http://my.opera.com/greench greench

      Yazılabilir ancak o program bu amaç için üretilmemiş.