Bölüm II: HTML’in Temel Unsurları

Etiketler (Tag)

Siz, Web sayfasının mimarı olarak, Server’a koyacağınız HTML metninin içinde, bir anlamda, “Netscape veya Internet Explorer: Buraya bir etiket koyuyorum. Bu etiket, büyük başlık etiketidir. Ben sana bu etiketin kapsadığı kelimelerin bittiğini söyleyinceye kadar, vereceğim bütün kelimeleri büyük başlık olarak sun!” demiş oluyorsunuz. Dolayısyla, HTML’de ilke, önünde etiketi olmayan herhangi metne yer vermemektir. Önünde etiketi olmayan herhangi bir metin parçası, tarayıcı tarafından temel paragraf olarak nitelenir.

HTML, içinde kontrol kodu olmayan metin dosyasıdır. Bu, söz gelimi WordPerfect veya Microsoft Word ile yazdığınız ve uzatması “.wp” veya “.doc” olan bir isimle ve WordPerfect veya Word biçiminde kaydettirdiğiniz bir belge, HTML etiketleri içerse bile, HTML dosyası sayılamaz. Çünkü kelime-işlem programınız, bu dosyanın içinde kendi kontrol kodlarını koymuştur. Böyle bir dosyanın adındaki uzantıyı silerek, yerine “.htm” uzantısını verin ve tarayıcınıza açtırmaya kalkın!

/////////////KUTU///////////////////////

Düz Yazı Dosyası ve HTML

Düz yazı biçiminde kaydedilmemiş bir metni tarayıcıya açtırma denemesini, burada birlikte yapalım. Yandaki paragrafı içeren bir metni, örneğin HTML.DOC adıyla, Word dosyası olarak kaydedelim ve sabit diskte bu dosyayı bulup, adını “HTML.HTM” olarak değiştirilim. Bilgisayarlarımızda, “.htm” uzatması ile bağlantılı tarayıcı Netscape Navigator veya Internet Explorer olarak. Adını değiştirdiğimiz bu dosyayı iki kere tıkladığımızda, sistemin varsaydığı tarayıcı açılacak ve karşımıza şuna benzer bir tablo çıkacaktır:

[reh000.tif]

Bu kargaşanın nedeni, tarayıcı programın, uzantısı “.htm” veya “.html” olan bir dosyayı, içinde kontrol kodu olmayan, düz yazı dosyası sanması ve Word belgesindeki kontrol kodlarını da metin olarak ekranda göstermesidir. Belgemizin içinde hiç bir HTML etiketi yer almadığı için de, tarayıcımız bu yazıyı, düz paragram olarak gösteriyor. Aynı yazıyı, bu kez Word programına düz yazı olarak kaydettirelim. Word bu dosyaya, “HTML.txt” adını verecektir. Şimdi de bu dosyanın adını “HTML.htm” olarak değiştirelim ve iki kere tıklayalım. Tarayıcıda karşımıza şöyle bir görüntü çıkacaktır:

[reh001.tif]

Bu dosyanın içinde kelime işlemcinin kontrol kodları bulunmadığı ve dosyada metnin dışında başka bir unsur olmadığı için, tarayıcı metni yorumlamakta güçlük çekmeyecektir. Ne var ki, kelime-işlemci metni ASCII olarak kaydederken, metnin Türkçe karakterlerini en yakın ASCII koduna çevirdiği için, yazıdaki Türkçe harfleri kaybetmiş olduk.

Aynı paragrafı HTML dosyası olarak (ilerde değineceğimiz bir programın yardımıyla) ve sayfanın kodlama dili olarak Türkçe’yi seçerek kaydettiğimiz zaman, tarayıcımız, sayfayı hem kolayca açıp ekranda gösterebiliyor; hem de Türkçe karakterlerin kodları, tarayıcı tarafından tanınabiliyor:

[html rehberi003.tif]

////////////////////////////////////////////////////////

HTML düz yazı olduğuna göre, bir HTML dosyası oluşturmak için, tabii HTML kodlarını kendiniz yazacaksanız, herhangi bir kelime-işlem yazılımını kullanabilirsiniz, ama kaydettirirken “Sadece metin olarak,” “Text only,” “ASCII dosyası,” “ANSI Dosyası” gibi, programın kendi kontrol kodlarını koymayacağı bir biçim seçmek zorundasınız.

///////////////NOT/////////////////////////////

HTML mi, HTM mi?

Windows ortamında HTML etiketlerini kendiniz vererek HTML dosyası oluşturmak ya da bir HTML dosyasında değişiklikler ve düzeltmeler yapmak istiyorsanız, kullanabileceğiniz en uygun program Not Defteri‘dir (NotePad). DOS ortamında Edlin veya Edit, Macintosh’da ise SimpleText’i kullanabilirsiniz. HTML kodunuzu Microsoft Word, Corel WordPerfect veya beğendiğiniz herhangi bir kelime işlemcisi ile oluşturduğunuz taktirde, Dosya menüsünden Adıyla Kaydet maddesini seçin ve Biçim olarak Düz Yazı Olarak, ASCII Metin gibi bir biçimi seçin. HTML dosyalarının adlarının uzantısı, “.htm” veya “.html” olabilir. İşletme sisteminiz üç harften fazla uzatmaya izin vermiyorsa (DOS veya Windows 3.x gibi) “.htm”i tercih edin.

//////////////////////////////////////////////

İlerde, yaygın kelime işlem programlarının HTML yeteneklerinden ve yapacağınız sayfaların HTML kodunu otomatik olarak oluşturacak programlardan sözedeceğiz. Ama şimdi, herhangi bir kelime işlem programını açın ve aşağıdaki örneği birlikte yapalım:

HTML için markup (işaretleme) dili dediğimizi hatırlıyor olmalısınız. Yani, bir HTML dosyasında, Internet alanımızı ziyaret edecek kişinin bilgisayar ekranında belirlemesini istediğimiz metinlerimiz, grafik unsurlarımız ve diğerleri ile bunların nasıl belirmesini istiyorsak onu belirten işaretlerimiz. Bu işaretlere, HTML etiketi dediğimizi de hatırlıyor olmalısınız. HTML dosyası oluştururken, aslında yaptığımız iş, belirli metnin önüne, o metnin tarayıcı tarafından tanınacak ve gereği yapılacak bir etiket koymaktan ibaret. Tarayıcıya, etiketle, gerçek metni birbirinden ayırt etmesi için etiketlerimizi ‘küçüktür’ (<) ve ‘büyüktür’ (>) dediğimiz iki işaretin arasına alırız. Bu işaretlere, kimi İngilizce kaynaklardan doğrudan çevirerek ‘köşeli parantez’ dendiğine de tanık oluyoruz. Oysa köşeli parantez adını ‘[‘ ve ‘]’ işaretleri için kullanmak daha doğrudur. Sadece Web tarayıcınız değil, HTML dilini anlayan her program, bu işaretlerin arasındaki kelime veya kelimelerin ekranda gösterilmek üzere değil, gereği icra edilmek üzere verildiğini anlayacaktır. HTML’i geliştiren uzmanların etiket olarak üzerinde anlaştıkları kelimelerin büyük harfle veya küçük harfle yazılması arasında fark yoktur. Bir etiket kelimeyi büyük harfle de yazsanız, küçük harfle de yazsanız, hatta büyük harflerle küçük harfleri gelişi-güzel bile kullansanız, tarayıcı tarafından anlaşılacaktır. Bir başka deyişle, tarayıcı için “OKU” ile “Oku,” “oKu,” “okU” ve “oku” aynı emirlerdir.

Bir kaç istisnası dışında, bütün HTML etiketlerinin kapsadığı alanın bittiği aynı kelimenin önüne bölü işareti (/) konularak oluşturulan ikinci etiketle belirtilir. Yani, diyelim ki komutuyla başlattığınız işi, komutuyla bitirirsiniz.

/////////////////////////NOT////////////////////

Büyük Harf, Küçük Harf?

Oluşturacağınız Web sayfaları, ilerde bu görevi devralacak başkaları tarafından düzeltilebilir, değiştirilebilir, kısmen kullanılabilir. İyi bir mimarın planlarının başka bütün mimarlar tarafından hiç tereddütsüz anlaşılabileceği gibi, sizin sayfalarınızın da başka Web alan yöneticileri ya da sayfa tasarımcıları tarafından kolaylıkla okunabilmesi şarttır. Nasıl bir yöntem izlerseniz izleyin; ama bir alanda yer alan bütün sayfalarınızda aynı yöntemi izleyin: kodlarınız ya tümüyle büyük harf olsun, ya da tümüyle küçük harf. HTML tarayıcıların okuduğu ama gereğini yerine getirmediği yorum/açıklama tarzındaki etiketleri kullanarak, sayfalarınızın bölümlerinin insan gözüyle okunulup anlaşılabilmesini sağlayın.

/////////////////////////////////////////////////////////

HTML Dosyasının Bölümleri

/////////////////////////////////////////NOT//////////

Açtığınızı Kapatmayı Unutmamak İçin

İyi bir tasarımcı olarak, HTML belgesini oluştururken, yazdığınız her etiketi bitiş etiketi ile birlikte yazın: gibi. Sonra, iki etiketin arasına ilgili komutları ya da metinleri koyun.

//////////////////////////////////////////////////////////////

HTML belgesi, iki bölüme ayrılır: Baş taraf (başlangıç) () ve gövde () bölümleri. Web tarayıcılar, bir belgeyi sizin arzu ettiğiniz tarzda yorumlayabilmek için, HTML etiketini gördükten sonra derhal HEAD ve BODY etiketlerini arar ve ekrandaki sayfayı buna göre biçimlendirirler. Sayfanın “baş tarafı” sayfanın en üstünde, örneğin bir gazetenin başlığı gibi gösterilen bir metin olmayıp, ilerde ele alacağımız belge hakkında genel bilgileri kapsayan bölümdür. Burada yer alabilecek genel etiketleri (meta tag) ayrıntıları ile inceleyinceye ve ne işe yaradıklarını görünceye kadar, şimdilik örnek sayfalarımızda baş tarafı başlatan ve bitiren etiketleri koyup, aralarına, HTML sayfalarının İngilizce metinlerden oluştuğunu varsayan tarayıcıya, sayfamızın Türkçe olduğunu bildirmek için—şimdilik anlamının üzerinde durmadan—bir genel etiket koyacağız. Şimdi herhangi bir kelime işlemcisinde, örneğin Windows ortamında Not Defteri’nde, Macintosh’ta SimpleText’te şu örneği aynen yazın ve dosyayı düz yazı dosyası olarak kaydedin.

Web Tasarım Rehberi’ne Hoş Geldiniz!

Web Tasarım Rehberi’ne Hoş Geldiniz!
“Bizler, inandığımız için ve bilinçli olarak harf tasarımcısıyız, harf dökümcüsüyüz, sayfa dizgicisiyiz.. Yoksa, yeteneğimiz daha yüksek şeyler için elverişsiz olduğu için değil. Biz inanıyoruz ki, en yüksek düzeyde beceri gerektiren şey, bizim sanatımıza en yakın olanıdır.

Rudolf Koch - Alman harf dökümcüsü, kaligraf

H1: Bir numaralı başlık

H2: İki numaralı başlık

H3: Üç numaralı başlık

H4: Dört numaralı başlık

H5: Beş numaralı başlık

H6: Altı numaralı başlık

Normal Metin

HTML Sayfada Güvenli Renkler

1. #000000=black (Siyah)
   
   
2. #000080=navy (Lacivert)
   
   
3. #0000FF=blue (Mavi)
   
   
4. #008000=green (Yeşil)
   
   
5. #008080=teal (Koyu Yeşil)
   
   
6. #00FF00=lime (Parlak Yeşil)
   
   
7. #00FFFF=aqua (Turkuaz)
   
   
8. #800000=maroon (Vişne çürüğü)
   
   
9. #800080=purple (mor)
   
   
10. #808000=olive (Zeytunî yeşil)
    
    
11. #808080=gray (Gri)
    
    
12. #C0C0C0=silver (Gümüşî gri)
    
    
13. #FF0000=red (kırmızı)
    
    
14. #FF00FF=fuchsia (Parlak pembe)
    
    
15. #FFFF00=yellow (Sarı)
    
    
16. #FFFFFF=white (Beyaz)
    
    

HTML'de Tablo

Bu tablomuzun Başlığı (thead)

Bu tablomuzun Alt-yazısı (caption)

Birinci sütun başlığı (th)	İkinci sütun başlığı(th)	Üçüncü sütun başlığı(th)	Dördüncü sütun başlığı(th)
Satır 1 Sütun 1	Satır 1 Sütun 2	Satır 1 Sütun 3	Satır 1 Sütun 4
Satır 2 Sütun 1	Satır 2 Sütun 2	Satır 2 Sütun 3	Satır 2 Sütun 4
Satır 3 Sütun 1	Satır 3 Sütun 2	Satır 3 Sütun 3	Satır 3 Sütun 4
Satır 4 Sütun 1	Satır 4 Sütun 2	Satır 4 Sütun 3	Satır 4 Sütun 4

	height="180">
Web Tasarımında Gözetilecek İlkeler: Grafikle İlgili İlkeler, İçerikle İlgili İlkeler Davranış Kuralları		Güzel Web Örnekleri Web Tasarımcıları Derneği, Tasarımcı Gençler Birliği Gönüllü Web UstalarıGönüllü Web Ustaları

Çerçeve: 1
Sonra iki üç paragraf metin alın ve sonuna şu kodları koyun:
Lorem ipsum,

Dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

Ut wisi enim,

Ad Minim Veniam

Sevgili Web tasarımcısı kardeş:

Yan tarafta size sunacağımız öğütlerimizin bir listesini görüyorsunuz. Bu listede arzu ettiğiniz bir maddeyi tıklarsanız, bu kutunun içinde o konudaki öğütlerimizi bulacaksınız. İşlerinizde başarılar dileriz.

Kolay gelsin..

Web Tasarımında Gözetilecek İlkeler:

Grafikle İlgili İlkeler

İçerikle İlgili İlkeler

Davranışla İlgili Kurallar

Maalesef sizin Web Browser programınız biraz antika! Bu sayfayı çerçeveli olarak göremiyorsunuz. Onun için size düz bir liste veriyoruz:

Grafikle İlgili İlkeler

İçerikle İlgili İlkeler

Davranışla İlgili Kurallar

...

Dinamik HTML--Katman Örneği

Web Tasarımında Gözetilecek İlkeler:

Grafikle İlgili İlkeler

İçerikle İlgili İlkeler

Davranış Kuralları

	Sizinle nasıl temas kuralım?
	Adınız maxlength="25"> Adresiniz Posta Kodu maxlength="5"> E Posta Sizi tanıyabilir mıyız? Eğitim düzeyim: Ilktype="checkbox" name="Orta" value="ON" tabindex="6">Orta value="ON" tabindex="6">Yüksek Merak Alanım Bir alan seçiniz Polisiye Şiir Tarih Siyaset Bize iletmek istediğiniz bir mesaj var mı? Mesajınınızı buraya yazınız tabindex="10" >   > Geri dön     İlk Sayfaya git