Ne var ki, SGML ve ondan türetilen HTML ve XMLin bir uygulama programı tarafından anlaşılabilmesi için, bu yöntemle kendisine verilecek bilgileri nasıl işleyeceğine ilişkin bilgilerin önceden, programın içine işlenmiş olması gerekir. Yani, bir programın HTMLi anlayabilmesi için, içinde HTMLi anlama ve yorumlama komutlarının olması gerekir. Bu anlamda, işin program tarafı başka birisi tarafından yapılmış sayılabilir; bizim HTML ile yaptığımız sadece veri oluşturmak şeklinde yorumlanabilir. Bu açıdan SGML ve türevleri dil sayılamazlar.
Gerçek bilgisayar programcıları, HTML gibi, bilgisayara hem bilgileri, hem de bu bilgilerin nasıl işleneceğini gösteren metinleri dil saymazlar. İster dil sayılsın, ister sayılmasın, HTML, kısaca tanımlarsak, Netscape Navigator, Internet Explorer, Mosaic, Spry gibi, bilgisayar kullanıcısı, bilgisayar ve Internet arasında arabirim görevi yapan programların anladığı bir veri ve komut ulaştırma yöntemidir; diğer bilgisayar programlarından farklı olarak sabit disk veya disket gibi bilgisayar kayıt ortamlarına kaydedilirken, düz yazı olarak kaydedilir; herhangi bir düz yazı programı ile oluşturulabilir, okunabilir ve değiştirilebilir. Diğer bilgisayar programlarından farklı olarak, disk ve disketlere yazılırken Binary-İkili sistemle yazılmaz; içinde 16 Tabanlı-Hexadecimal komutlar yoktur; herşey standart düz yazı olarak yer alır. Buna karşılık herhangi bir düz yazı dosyasından farklı olarak metnin içinde <> işaretleri arasında yeralan Ingilizce bazı komut-kelimeleri vardır.
HTML, önceleri Macintosh ardından IBM uyumlu bilgisayarlarının yardım dosyalarının oluşturulmasında kullanılan bir yöntem olarak yaygın bir kullanım alanı buldu. Ancak, HTML kısaltmasının açık şekli olan Hypertext Markup Languagede geçen Hypertext terimi, 1950 yılında Ted Nelson adlı bir bilgisayar uzmanı tarafından içinde hot, yani başka bir metinle veya resimle ilintilendirilmiş noktalar bulunan metin anlamına kullanılmıştı. Apple firması, bu yöntemi ekranda gösterilen yardım metinlerinin içinde bir kelimeyi veya simgeyi tıklayarak ilgili başka bir başka metne veya simgeye gitme yöntemi olarak kullandı. Metinler böylece hyper hareketli hale geliyordu.
1989 yılında, Avrupa Parçacık Fiziği [Atom] Laboratuvarı CERN uzmanlarından Tim Berners-Lee, laboratuvar yönetimini ortak bir yazı biçimlendirme sistemine ikna edebilmek için, Enformason Yönetimi: Bir Öneri başlıklı bir rapor hazırladı. Bu raporda, daha sonra bugünkü Internetin temeli olacak bilgisayar şebekeleri arası ağda bilgi alış verişi için Hypertextin ortak yöntem olmasını önerdi. Ve bu öneri bugün dördüncü sürümüne ulaşmış olan HTML dilinin temeli oldu.
Bugünkü Interneti Internet yapan iki unsur var. Birincisi bilgisayar arası iletişimi gerçek zamanlı olmaktan çıkartan bağlantı protokolünün (HTTP) geliştirilmesi; diğeri ise HTML dilinin ortak dil olarak benimsenmesini mümkün kılacak basitlikte olmasına karşın, bir metnin biçimlendirilmesi ve resim, ses, video gibi diğer unsurlarla bütünleştirilmesini sağlayabilecek yeterlikte olması. Bunu biraz açalım:
Bugünkü Internetin temeli olan üniversiteler ve araştırma kurumlarının bilgisayar ağlarını birbirine bağlayan ağlar 1980lerin başlarında bağlantının gerçek zamanlı olmasını gerektiriyordu. Internetin adı da ağlar-arası ağ anlamına gelen İngilizce Inter-networks-network: Inter-net kısaltmasından doğuyor. Bir bilimadamı bir başka bilimadamının bilgisayarının bulunduğu ağa bağlandığı zaman, bu bağlantı, gerekli dosyanın bir bilgisayardan diğerine aktarılması süresince devam etmek zorunda idi. İki bilgisayar aralarında gidip-gelen bilginin hata kontrolünü ancak gerçek-zamanlı bağlantı olursa yapabiliyorlardı. HTTP (Hypertext Transmission Protocol-Hypertext Iletim Kuralları) ise iki bilgisayarın alış-verişin hatasız olduğunu denetlemek için, bilginin tümü alınıp-verilinceye kadar birbirine bağlı kalmaları zorunluğunu ortadan kaldırıyor. Bu zorunluğun ortadan kalkmasının önerimini bir örnekle anlatalım. Otomobille bir yerden diğerine gideceksiniz. Takip edeceğiniz yolda inşaat var, ve yol kapalı. Yolun kapalı kesimini atlamanız için gerekli servis yolunu da yok. Bu durumda yolculuğunuz ilk engelde sona ermiş demektir. Oysa daha dolambaçlı da olsa bir servis yolu olsaydı, yolunuza devam edebilirdiniz. Sözünü ettiğimiz kurallar demetini size sürekli bir servis yolu sağlamayı öngörüyor ve bu yolun hem gidişte, hem de gelişte izlenecek levhaları gibi, kıtalar arası telefon bağlantılarının kesilmesi halinde, bilgisayarlararası iletişimin devamını sağlıyor.
HTTPnin resmen standart olarak tanınması, 1990 yılında World Wide Web Konsorsiyomunun (W3C) kurulmasıyla mümkün olduğu için, bugünkü Internetin de doğum tarihi 1990 yılı sayılabilir. Doğumundan bu güne 10 yıl bile geçmemiş olduğu halde, Internetin hem HTTP, hem de HTML ilkeleri ihtiyaca yetmemeye başladı.
W3C, şu anda HTTPNG (Gelecek Kuşak) adını verdiği, standart üzerinde çalışıyor. Bu yeni kurallar demeti, HTTPnin özellikle ses ve video gibi henüz ortak standarta kavuşturulmamış çoklu-ortam malzemelerinin alınıp-verilmesini kolaylaştırmayı öngörüyor. HTMlin önceden tanımlanmış komutlarını, Internet sayfası hazırlayanların kendi ihtiyaçlarına göre değiştirmesi sağlayan olan XML (Extensible Markup Language-Genişletilebilir İşaretleme Dili) ise bugün-yarın Netscape ve IE tarafından kabul edilir hale gelecek. Bu arada duragan bilgi kümesi alıp-verebilen HTMLe, dinamik-değişken özellikler kazandırmayı öngören ekler ortaya DHTML ilkelerini çıkarttı. Ne var ki DHTML diye adlandırıbalicek ortak bir standart olmaması, bunun, hiç değilse şimdilik, Internet ile bağlantı sağlayan programların sürümüne göre değişik anlamlar taşıması, Internet alanları için veri hazırlayanların (Web sayfası yapanların) çektiği sıkıntıyı artırıyor. XML ise ortak bir dinamik Web sayfası standardı getirmekten çok, ihtiyaca göre değiştirilebilir HTML oluşturmayı öngörüyor.
HTMLin belki Internetteki pabucu tümüyle olmasa bile kısmen dama atılabilir. Ama firmaların kendi yerel ağ ortamlarında haberleşme ve bilgi alış-verişinde giderek daha sık uygulamaya başladıkları Intranet, Web gibi, giderek daha geniş kitlelerin ilgisini çekebilmesi için televizyon özelliklerine sahip olmak zorunda değil; HTMLin bugünkü haliyle izin verdiği çoklu-ortam uygulamaları, herhangi bir firmanın en ilgi çekici ve en etkili tarzda iç-iletişim yapmasına yeter. Başka bir deyişle, HTML, Internette ve intranetlerde daha uzun süre yaşayacaktır.
Biz bu kitapçıkta daha çok Internet ve Internette yer alan sanal ortamlardan biri olan World Wide Web (Dünya Çapında Ağ) ortamından söz edeceğiz. Ancak bir çok yerde Internet sözünü kaldırıp, yerine intranet kelimesini koyarsanız, o bilgilerin Web kadar, bir firmanın yerel ağında oluşturacağı dahilî internete de uygulanabilir olduğunu göreceksiniz.
Klasik HTMLin temel ilkelerini biraraya getirmeyi öngören bu kitapçık, bugün olduğu gibi, ilerde de, Internet için olduğu kadar intranet için de Web sayfası hazırlamak isteyenlerin başvurabileceği bir kaynak olmak üzere kaleme alındı. Bu kitapçığın Internet protokolleri (iletim kuralları) ve Web tasarım ilkelerine ayrılan ilk iki bölümü, konuya aşina olmayanların temel bilgileri edinmeleri, konuya yabancı olmayanların ise bir çok yerde parça-parça duyduklarını bir arada görerek, bilgilerini tazelemelerini amaçlıyor. Daha sonraki bölümler ise ilerde, HTML kullanarak Web tasarımı yaptığınız zaman, örneğin bir komutun, bir etiketin kolay hatırlanmayan yüklemlyerini (parametrelerini) hatırlamak üzere başvurabileceğiniz bir rehber niteliğinde.
Konuya aşina olanların tümüyle atlayabilecekleri birinci bölümde, WWW, HTTP, TCP/IP ve HTML kısaltmalarının anlamını ve ne işe yaradığını en az birer paragrafta anlatabilecek kadar bu konunun içinde olmayanların yararlanabilecekleri bilgiler yer alıyor. Bir Web alanında, ya da daha teknik terimle HTML sayfasında, başlıca unsur metin olduğu için, kitapçığımızın ikinci bölümünü, HTML kodunun ana araçlarını tanıttıktan sonra metin girme ve metni biçimlendirme konusuna ayırdık. Ancak HTMLin metinle ilgili araçları, görsel açıdan etkili ve bir iskeleti olan sayfa inşasına izin vermediği için, bir anlamda metin sunma araçları olan tablo, çerçeve ve katman unsurlarından sayfa iskeleti oluşturmak için yararlanmak zorunda kalıyoruz. Bu üç unsura, üçüncü bölümde ayrıntılı olarak yer veriyoruz. Bu noktaya kadar değinmediğimiz fakat bugünkü Interneti Internet yapan unsura, yani bir sayfadan diğerine, bir grafikten bir diğerine, bir kelimeden bir başka paragrafa, kısaca bir bağlantı noktasını tıklayarak, dünyanın öbür ucuna gitme imkanı veren bağlantı konusunu dördüncü bölümde ele alacağız. Bu noktada, duragan yani bağlantıları konulmuş ama kendiliğinden hiç bir şey yapmayan bir Web alanı oluşturmayı öğrenmiş olacaksınız. Fakat günümüzde Web alanları, ziyaretçinin kullandığı tarayıcının türünü ve hatta sürümünü belirleyip, ona göre içerik sunan, ziyaretçinin önceki ziyaretinde neler yaptığı, hangi sayfalarla ilgilendiğini hatırlayıp, bu kez ona uygun bağlantılar veren dinamik alanlar haline geldi. Bunu sağlayan Dinamik HTML (DHTML), beşinci bölümün konusunu oluşturacak. Altıncı bölüm ise, belli başlı HTML kodlarının (etiketlerin) tanımları, kullanıldığı yerler, alabilecekleri yüklemler (parametreler) ve örneklerine yer verdiğimiz Başvuru bölümü olacaktır.
HTMLe hayat veren, kişisel bilgisayarları Internete ve intranetlere bağlayan tarama programlarının bu dili nasıl ve ne ölçüde yorumladıklarıdır. Şu anda dördüncü sürümü yavaş yavaş uygulama bulan bir formüller topluluğu, gelişen bir organizma gibi. Bir süre sonra bu kitapçıkta yer almayan HTML etiketleri karşınıza çıkabilir, ve Web tasarımcısı olarak bu yeni komutları, kullanıldıkları yerleri ve işlevlerini, bu kitaptaki bilgilere eklemek zorunda kalabilirsiniz.
Hayat, zaten, baştan sona bir öğrenme süreci değil mi?
Dil Deyince:
HTML kısaltmasını bile Türkçeye çevirmediğimize bakarak, bu kitapçığın yarı İngilizce olduğunu düşünebilirsiniz. Fakat bu kitapçık bir dilin, geçmişi ile geleceği ile, bilim ve kültürün her alanında ifade imkanına sahip olması gerektiği inancıyla kaleme alındı. Türkçeye bu imkan, başka dillerden alınan kavramların öncelikle Türkçe ifade edilmesi ile kazandırılabilir. Bunu yaparken, bazı kelimelere yeni anlamlar yükleyerek görev alanlarını biraz uzatmak ve bunu önce ilgili topluluğun, sonra tüm toplumun onayına sunup beklemek gerekir. Ama Türkçenin kendi türetme kurallarını hiçe sayarak, ilgisiz fiillere hiç olmayacak ekler ekleyip, ortaya yeni isimler çıkartmak asla kabul edilebilir bir uygulama olamaz. Anlamını karşılayamadığımız, ya da mevcut kelimeleri biraz çekiştirerek uyduramadığımız İngilizce kelimeleri çevirmek için yeni kelime uydurmadık, öylece kullandık ve açıklamaya çalıştık. Elbette dil ve toplum bu kavramları karşılayacak kelimeler üzerinde anlaşacaktır.
Bölüm I: Webe Giriş
Temel Bilgiler
Bu bölümde, HTML ile neler yapılabileceği ve neler yapılamayacağına bakacağız. Yine bu bölümde, tasarlayacağınız Web alanlarının, sizin (ya da sayfalarınıza ev sahipliği yapacak firmanın) bilgisayarlarından, ziyaretçinin bilgisayarına ulaştırılma yollarına değineceğiz. Sonuç itibariyle, Web alanı tasarlayan kişi, bu ulaşımın ucunda, ortasında ve sonunda da yer alan programlara, onların imkan ve sınırlamalarına bağımlı demektir. HTMLi kullanarak Web sayfası tasarlayacak kişinin bunu bir şekilde başkalarının hizmetine sunacağı varsayılır. Bu nedenle, HTML öğrenen kişinin sonunda bir Web alanına sahip olacağını düşünebiliriz. Dolayısıyla bu bölümde, kısaca, Web hizmeti sunmakta kullanılacak bilgisayarların sahip olmaları gereken donanım ve yazılım özelliklerinden de kısaca söz edeceğiz. Web Servera koyacağınız HTML sayfaları ne kadar fiyakalı olsa da, HTMLin imkan ve yetenekleri, onu alan ve yorumlayan tarayıcı (browser) programının yetenekleri ile sınırlıdır. Bu nedenle Web tasarımcının, tarayıcı programları çok iyi tanıması gerekir. Bir tarayıcıda adeta televizyon filmi gibi gösterilebilen bir unsurun yerini, başka bir tarayıcıda gri zeminli boş bir kutu alabilir. Ya da aynı tarayıcıya sahip olan iki ziyaretçiden biri, sayfanıza girdiği anda en sıcak ve candan sesli hoşgeldiniz mesajınızı dinlerken, diğeri hiç bir şey duymayabilir. Tarayıcılar kadar, tarayıcıların özelleştirme yeteneklerini tanımak ve kullanıcıların genellikle ne gibi özelleştirmeler yapabildikleri hakkında fikriniz olması gerekir. Bu nedenle, bu bölümün sonunda mevcut en yaygın tarayıcıların ortak ve farklı önemli özelliklerine de bakacağız.
HTMLe Genel Bakış
Programlama dili gibi görülse de, görülmese de, bugün Internetin de intranetlerin de ortak dili, HTMLdir. Bir Web sayfasında yer alan belgenin içindeki bazı kelimeler, simgeler, fotoğraflar, grafik unsurlar veya bunların parçaları bir başka sayfa ile hiper-link kurularak, ilentilendirilmiştir. Kullanıcı, hiç bir komut öğrenmek zorunda kalmadan, hiç bir bağlantının Internetteki adresini bilmek zorunluğu olmadan bu sayfalardaki bağlantıları tıklayarak, yazıdan yazıya, şekilden şekilde, gidebilir. Ta ki, arzu ettiği bilgiyi bulup, okuyuncaya, kendi diskine veya disketine kopya edinceye veya yazıcısında basıncaya kadar. Aslında kullanıcı ya da ziyaretçinin bir HTML sayfasıyla ilişkisi burada da bitmemektedir. Çoğumuz ulaştığımız bir alanın adresini Web tarayıcı programında sık sık ziyaret etmek istediği yerlerin arasına koyabilir (bookmark) ve arzu ettiği zaman doğruca işaretlenmiş olan bu adreslere gidebilir.
HTMLin başlıca özelliklerini şöyle sıralayabiliriz:
1. Belge biçimlendirme: HTML, Wes tasarımcısına, belgelerini ziyaretçinin ekranında nasıl oluşmasını istiyorsa öyle şekillendirme imkanı verir. Bununla birlikte tarayıcı programlarının (Netscape Navigator veya Internet Explorer) HTML komutlarını yorumlayışlarında az da olsa fark vardır ve bu fark sayfalarınızın bir ziyaretçinin bilgisayarında başta, diğerinin bilgisayarında başka gösterilmesine yol açabilir. Ayrıca ziyaretçileriniz, tarayıcı programlara verdikleri komutlarla, aldıkları sayfalarda genel değişiklik veya kısıtlamalar yapabilirler. Siz sayfanızda ne tür harf türü (font) kullanmış olursanız olun, ziyaretçiniz tarayıcı programa Sadece Times fontları kullan demiş ise, sayfanız bu ziyaretçinin ekranında sizin istediğinizden farklı biçimde görülecektir. Ziyaretçi tarayıcı programına Grafik unsurları gösterme! demiş ise, sayfalarınız ve tabiî vermek istediğiniz görsel mesaj tamamen farklı bir nitelik kazanacaktır. Bu duruma rağmen, bugünkü şekliyle HTML, Web tasarımcısına adeta bir gazete ya da dergi sayfası tasarlarcasına, oluşturmak istediği görsel etkiyi sağlamasına yeterli tasarım araçları sunmaktadır.
2. Bugünkü imkanlarıyla HTML, Web sayfası terimine yeni bir anlam kazandırmış bulunuyor. Web sayfası terimi bile, eski, yani dört-beş yıl öncesinin Web sayfaları, içi bir örnek harflerden oluşan yazılarla dolu, duragan belgelerden ibaret bulunduğu için ortaya atılmıştı. Bugünkükü Web sayfalarının sayfa kavramı ile dahi ilgisi kalmadı. Bugün sadece HTML ögeleri kullanılarak, ziyaretçinin ekranında adeta bir televizyon programının grafik etkisini sağlamak mümkün. Bununla birlikte HTML, bir kelime işlem ya da masaüstü yayıncılık programının oluşturabileceği görsel özelliklere sahip sayfalar oluşturamaz. Bu kısıtlamalara, Interneti tasarlayan uzmanların, platformlar (Windows 3.x, Windows 95/98, Windows NT, Unix, MacOS), donanımlar (Macintosh, PC, Sun) ve tarayıcı programlar arasındaki farkların, sunulacak malzemenin tasarımcının kastettiğinden tamamen farklı bir şekilde sunulmasına yol açmasını önleme arzusu neden oluyor. HTML, örneğin bir masaüstü yayın programı kadar hassas ölçmelere ve biçimlendirmelere izin verse idi, bu ancak belirli bir platformda, belirli bir program kullanmayı gerektirirdi. Oysa Interneti Internet yapan unsurların başında, hemen herşeyin ekranda ve kağıt üzerinde, ortak denilebilecek şekilde oluşturulması geliyor.
3. HTML ile oluşturulacak statik alanların içine dinamik sonuçlar doğuracak programlar konulabilir. Bu programların oluşturulması için, ziyaretçinin Interne PC veya Macintosh ile bağlanmış olması, ya da bağlantı programının şu ya da bu firmaya ait bulunması gibi farklılıklardan etkilenmeyen, her türlü ortamda aynı sonucu veren ortak bir dil geliştirme çabası, ortaya Java adlı programlama dilini çıkartmış bulunuyor. Microsoftun Visual Basic programlama dilinin bir türevi olan VBScript ve çeşitli firmaların ortaklaşa ürünü Javascript de bu tür çabaların sonuçlarıdır. Adı benzemekle birlikte, Javascriptin Java ile, VBScriptin de Visual Basic ile ilgileri yoktur. Internet tarayıcı programlarından Internet Explorer hem Javascript, hem de VBScript dillerini anlayabilir ve yorumlayabilir. Buna karşılık Netscape tarayıcı programı VBScript diliyle yazılmış bölümler içeren bir HTML metnini yorumlayarak, ekrana getiremez. Bugünkü şekliyle Java dili de, Javascript ve VBScript de, tarayıcı programların imkan ve kabiliyetleri ile sınırlıdır. Ancak her üç dili kullanarak, HTML sayfalarını duraganlıktan çıkartmak ve ziyaretçi ile etkileşen, ziyaretçinin arzu, beğeni ve özelliklerine göre içeriğini değiştirebilen Web alanları tasarlamak mümkündür
HTTP ve TCP/IP
Web sayfası tasarlarken, dikkat edeceğiniz en önemli unsur, sayfalarınızın içeriğinin sunuluş biçiminin önemli ölçüde ziyaretçinin bilgisayarının türü (Mac, PC, Sun), ziyaretçinin işletme sistemi (Windows 3.x, 95/98, NT, MacOS, Unix) ve kullandığı tarayıcı yazılımı (IE, Netscape, Mosaic, vs.) tarafından belirleneceği olmalıdır.
Bir Web sayfasının ziyaretçinin ekranına kadar katettiği yolda çeşitli protokoller (kurallar) var. Bunların başında bir bilgisayar ağı olan Internetin iletim kuralları (HTTP) geliyor. Hypertext dosyalarını olduğu kadar çoklu ortam unsurlarını (ses, video ve diğer grafik ögelerden oluşan Multimedia dosyalarını) ve bilgisayar programlarını ağ içindeki bilgisayarlar arasında alıp-vermeye yarayan başka protokoller de vardır: FTP (File Transfer Protocol-Dosya Aktarma Kuralları) bunlardan biridir.
Internet bağlantısı, bir telin iki ucunda bulunan iki bilgisayar arasındaki ilişki olarak görebilirsiniz. Sizin Web sayfalarınızın durduğu bilgisayar Web ilişkisinde Server (Hizmet eden) diye adlandırılır. Ziyaretçinin Internete telefon bağlantısı ile bağlı bilgisayarı, ise sizin için Client-Müşteri sayılır. Hizmet veren bilgisayarla, bu hizmetin müşterisi olan bilgisayar (Server ile Client) arasındaki ilişkiyi düzenleyen kurallara TCP/IP adı verilir (Transmission Control Protocol/Internet Protocol-İletim Denetim Kuralları/Internet Kuralları). Gerek HTTP, gerekse FTP, müşterinin, sizin bilgisayarınızdan, yani Web Server olarak adlandırdığımız HTML sayfaların ve bu sayfaların içinde yer alan resimlerin, grafiklerin, ses ve video dosyalarının durduğu bilgisayardan bilgi isteme ve bu istediğine karşılık verildiğinde verilen karşılığın doğru gelip gelmediğini anlamasını sağlar. İki bilgisayarın üzerinde anlaştıkları bir tür konuşma adabı diyebileceğimiz bu kurallara uygun mesajlarını, kıtadan kıtaya, ülkeden ülkeye, kentten kente, yeraltı ve sualtı kabloları ile, uydularla iletirler. Tahmin edilebileceği gibi, müşteri bilgisayar ile servis sunan Web Server arasında oluşan bu bağlantı, bazen kesilebilir. Fizikî bağlantının kesilmesi, iletimin kesilmesi anlamına gelmemesi için, Internet Kurallarının IP bölümü, iki bilgisayar arasındaki bağlantının doğru kanallardan kurulmasını, kesildiğinde yeniden kurulmasını sağlar. Bunu yaparken, evrensel bir adres sisteminden yararlanır. Internette servis sunan bilgisayarlar, başka bir deyişle Web Serverlar kaynak sayıldığı için, IP, aradığı kaynağı Universal Resource Locator (URL) sistemini kullanarak bulur. Aynı kurallar demetinin TCP bölümü ise kurulan bağlantı sayesinde gelen bilginin doğru anlaşılmasını sağlar.
Aslında her bilgisayar, CPU ile ekran, CPU ile klavye, CPU ile CD-ROM sürücü arasında bir ağ demektir. Bir büro ortamında bir bilgisayar ile merkezdeki Server, bir ağın parçalarıdır. Bu ağların Internet denen dev ağdan farkı, sizin bilgisayarın CPUsu ile klavyesi, ekranı ve yazıcısı arasındaki bağ, yine bir büro ortamındaki bilgisayar ile merkez bilgisayar arasındaki ilişki, sabit durum ilişkisidir. Yani, bu ağlarda iki taraf birbirinin durumuna her an vakıftır; birbirlerinin ne durumda olduklarını her an bilirler. Oysa, iki kıta arasında kurulmuş bir Internet ilişkisinde, müşteri hizmet verenin, hizmet veren müşterinin durumunu, bağlantıdaki kesilmeler nedeniyle, bilemeyebilir. Bu nedenle TCP/IP, durumun bilinmediği ilişki esasına dayanır. Müşteri bilgisayar, servis sunucudan istediğini HTTP veya FTP kurallarına göre talep eder. Bunun için Web Serverın kendisini bulup, bu talebi doğruca ona iletmesine gerek yoktur; bu talebini kendisine Internet bağlantısı sağlayan (ISP) firmanın bilgisayarına iletmesi yeterlidir. Bunu yaparken talep ettiği şeyin adını-sanını bildirdiği gibi bulunacağı kaynağı belirlemek için gerekli, adresi de (URL) bildirmek zorundadır. Internet hizmeti sağlayan firmanın bilgisayarı, bu talebi ve talebi karşılayacak kaynağın adresini, Internetin omurgası olarak adlandırılan ana bağlantıyı kuran bakımını yapan ve ISPlere hizmet sunan firmanın bilgisayarına iletir. Ana omurga firmasının bilgisayarlarında dünyadaki tüm Internet kaynaklarının listesi ve onlara ulaşmak için hangi omurgadan kime yol açılması gerektiğini gösteren bir liste bulunur. Ana omurga şirketinin bilgisayarı bu listeye göre, müşterinin talebini diğer bir ana omurga firmasına, o firma da bunu hedef Web Servera ev sahipliği yapan (host) bilgisayara iletir. Bu talep, hedef Web Servera talebin konusu ve talep edenin adresi ile birlikte bildirilir. Sizin müşteri olarak o sırada sadece kendi Internet hizmet sunucunuzla bağlantınız sürmektedir; yoksa sizin bilgisayarla hedef Web Server arasında doğrudan, bire-bir ilişki yoktur. Hedef Web Server, müşteri olarak sizin kim olduğunu ve size nasıl ulaşabileceğini, ancak kendisine gelen talebin altındaki adresten bilmektedir. Web Server, sizin o anda kendi Internet Hizmet Sunucunuzla arasındaki bağlantının devam edip etmediği ile hiç mi hiç ilgilenmez. Onun için önemli olan kendisine iletilen talebin karşılığını, talebin altındaki adrese iletmekten ibarettir. Aynı yol bu kez tersine katedilir; arzu ettiğiniz bilgi (sayfa, belge, video, ses, resim, fotoğraf, vs.) sizin ekranınıza ulaşır. Kısaca, ne talep sahibi müşteri bilgisayar, ne talebi karşılayan Server bilgisayar, bir diğerinin o anda nerede ve ne durumda olduğu ile ilgilenmez. Bu durumdan haberdar olmama hali ve etkilerine, ilerde Internette ticaret bahsinde geri döneceğiz.
Web Server
HTTP ve FTP, müşteri bilgisayarla, servis sunan bilgisayarın üzerinde anlaştıkları bir dille (HTML) birbirine ilettikleri talep ve talebin karşılığı olan malzemenin alınıp verilmesinde TCP/IP denilen kurallardan yararlanılarak yapılan iletimi düzenleyen ilkelerdir. Bu ilkelere uygun olarak çıkartılan bir talep Web hizmeti sunan bilgisayar tarafından karşılanır ve karşılık olarak belirli bir bilgi kümesi müşteri bilgisayara iletilir.
Web server olarak tayin edilmiş bilgisayarda, kendisine gelecek HTTP ve FTP taleplerini anlamasına ve bu talepleri yerine getirmesine yarayan programlar (örneğin Apache Web Server, MS Internet Information Server veya Netscape Web Server) sürekli çalışır vaziyette olur. Bu programların, bilgi alıp-vermenin yanı sıra, elektronik posta alıp verme ve yönlendirme, veritabanlarına erişme ve içinden seçme yapma (Querry, SQL, vb. gibi), kendi sabit diskinde duran bir dosyayı alıp karşı tarafa aktarma (FTP, Gopher, WAIS) veya karşı tarafın vereceği dosyayı alıp kendi sabit diskine kaydetme yeteneği olur.
İlk Web Server programı, yukarıda, HTML dilinin geliştirilmesindeki öncü konumu nedeniyle sözünü ettiğimiz, İsviçredeki CERN kurumu tarafından geliştirildi; ama kısa zamanda UNIX platformunda, anonim bir tarzda ve ücret ödemeden kullanılabilen bir şekil aldı. NCSA Server, National Center for Supercomputing Applications-Superbilgiişlem Uygulamaları Ulusal Merkezi adlı, şimdi kapanmış olan kurum tarafından UNIX işletme sistemi için geliştirilmişti. NCSA Serverın geliştirilmiş şekli olan Apache Server ise uzun süre ücretsiz dağıtıldıktan sonra günümüzde ticarî olarak geliştiriliyor ve satılıyor. Bugün halâ NCSA Server veya Apachenin ücretsiz sürümlerine dayalı Web alanları bulunmakla birlikte, Sun Solaris, IBM AIX ve diğer UNIX sistemleri için geliştirilmiş çok sayıda Web Server hizmete girmiş durumda. Kişisel bilgisayarların UNIX gerektiren bilgisayarlara oranla daha ucuz olması, Microsoftun NT, IBMin OS/2 işletme sistemlerinin UNIXe ciddî rakip haline gelmiş bulunmaları nedeniyle, bu sistemlere dayalı Web Server programları da hızla artıyor. Apache Web Serverın bile NT sürümü piyasaya çıktı.
NT Workstation ve Windows 95/98, aslında Kişisel Web Server adı verilen, Internete 24 saat bağlı olmadan, başka bir firmanın ev sahipliği yaptığı Web alanlarına hizmet sağlayabilir. Hatta NT Workstation, aynı anda 10u geçmemek üzere, 24 saat süreyle ınternete bağlanabilecek ve müşteri taleplerini karşılayabilecek yetenektedir. Aynı anda daha fazla Internet bağlantısını kaldırmak istiyorsanız, NTnin Server sürümünü edinmeniz gerekli. IBMin OS/2 işletim sistemi ise, Internet Connection Server adlı paket kurulduğu zaman, bir PCnin fiziksel olarak kaldırabileceği kadar Internet bağlantısına cevap vermesini sağlamaktadır. Macintosh bilgisayarları için Starnine firmasının MacHTTPd programı gibi, ücretsiz edinilebilecek http4Mac ve EasyServe adlı programlarla, Internet servisi sağlamak mümkün.
Ayrıca, bugün Plerde de UNIX işletme sistemi kurmak hem kolay, hem ucuz hale gelmiş bulunuyor. Solaris, BSDI, Esix, SCO UNIX bu alandaki ticarî programlar. Ayrıca Linux ve FreeBSD adlı, ücretsiz dağıtılan UNIX işletme sistemleri de, ticarî olanları aratmayacak niteliklere sahip. Ayrıca bu tür ücretsiz programlar, Apache Web Serverın ücretsiz sürümünü de içeriyorlar.
Bir PC ile Web Server hizmeti yapacaksanız, önünüzdeki bir çok seçeneğe rağmen, başarınızın PCnin gerçekten sabit disk alanı ve belleği bol olmasına bağlı bulunduğunu hatırlamalısınız. PClerin, Internetin gerektirdiği en önemli özellik olan aynı anda birden çok iş yapabilme becerisi, işletim sistemi kadar, donanım kaynaklarının genişliğine bağlı olduğunu unutmamalısınız.
Bir Web Server yazılım paketi seçerken dikkat edilmesi gereken bir kaç ilkeyi sıralayalım:
1. Yazılım paketi yeterli güvenliği sağlayacak özelliklere sahip olmalıdır. Binalarda bir odadaki yangının yandaki odaya sıçramasını önleyen ateşe dayanıklı duvarlardan (Firewall) esinlenerek adlandırılan bir dizi program, Web Server yazılımının bulunduğu bilgisayarın, kötü niyetli kişiler tarafından bozulmasına engel oluyor. Ancak Web Serverın kendi içinde mevcut güvenlik önlemlerinin neler olduğunu dikkatle araştırmanız gerekir. UNIX işletme sistemi ve ona bağlı çalışan Web Server programlarının daha güvenli olduğuna ilişkin, kimi zaman Web tasarımcısını ve Internet hizmet sunucusunu rahatlatan, yaygın bir söylenti vardır. Bu doğru değil. Ne türü olursa olsun, UNIX de bir işletme sistemidir ve el elden üstündür. Kötü niyetli bir kişi Windows NT sistemine verebileceği zararı, aynı rahatlıkla UNIXe de verebilir. Bir diğer yaygın ve aynı ölçüde yanlış inanç ise NTnin güvenli olmadığıdır. Microsoft firmasının NTnin 4ncü sürümünü güncelleştirmek için dağıttığı SP3 adlı tamir programının yerleştirilmesinden sonra, NT sistemleri güvenlik açısından herhangi bir başka işletme sistemiyle boy ölçüşebilir hale geldi. Burada önemli olan, Internete açılmanın, iyi niyetli-kötü niyetli herkese açılmak olduğunu unutmamaktır. Özellikle form denilen, HTMLin ziyaretçi bilgisayarın evsahibi bilgisayara talepten başka şeyler göndermesine imkan veren etiketlerini ve ona bağlı CGI (Common Gateway Interface-Ortak Geçit Arabirimi) adı verilen ziyaretçinin ev sahibi bilgisayardaki programları harekete geçirebildiği buluşma noktasında yer alacak programları tasarlarken, daima kötüniyetli kişileri dikkate alarak hareket etmek gerekir. Internette güvenliğin ne kadar kolay sarsılabildiğine ve ne kadar kolay önlem alınabileceğini bir örnek verelim. Sayfanızda, ziyaretçinin doldurması gereken Elektronik Posta Adresiniz: diye bir metin kutusu bulunduğunu düşünün. Bu kutuya bütün ziyaretçilerin elektronik posta adreslerini yazacaklarını düşünüyor ve bu bilgiyi işleyecek CGI programında, ziyaretçinin bu kutuya yazacağı bilgiyi, alıp doğruca Web Serverın Mail programına veriyorsunuz. Peki, ya kullanıcı adres yerine herkimse@herneredeyse.com; mail haydut@soygun.com<) 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. HTMLi 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
/////////////////////////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
HTML dosyasının bir tarayıcı tarafından tanınması, yorumlanması ve gereğinin ekranda yapılabilmesi için, belgenin bir HTML belgesi olduğunun bildirilmesi şarttır. Bu bildirimi dosyanın tümünün etiketi anlamına gelen etiketi, bir HTML belgesinin ilk kelimesi olarak yazılır. Tarayıcıya, HTML dosyasının bittiği de etiketiyle bildirilir.
/////////////////////////////////////////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 durmadanbir genel etiket koyacağız. Şimdi herhangi bir kelime işlemcisinde, örneğin Windows ortamında Not Defterinde, Macintoshta SimpleTextte şu örneği aynen yazın ve dosyayı düz yazı dosyası olarak kaydedin.
Web Tasarım Rehberine Hoş Geldiniz!
Gördüğünüz gibi ilk HTML sayfamız, tarayıcıya bu dosyanın bir HTML dosyası olduğu beyanıyla başlıyor. İlerde anlamını öğrenmek üzere baş taraf etiketlerinin arasına sayfamızın Türkçe olduğunu belirten genel etiketi koyuyoruz; ve gövde bölümünde, ziyaretçilerimize hoşgeldiniz, diyoruz. Bu dosyayı, örneğin hosgeld.htm adıyla kaydedin. Kelime işlemcinizi kapatmayın; bir kenarda dursun. Kaydettiğiniz dosyanın simgesini bulunduğu yerde iki kere tıklayın; .htm uzantısı ile bağlantılı tarayıcınız hangisi ise, o açılarak, sayfayı yükleyecektir.
reh004.tif
//////////////////////NOT////////////////////
Open mı, Browse mı?
Internet Explorerın ncü sürümünde programı başlattıktan sonra, Dosya (File) menüsünden Aç (Open) maddesini seçerek, ve açılacak diyalog kutusunda Araştır (Browse) düğmesine basarak oluşturduğunuz dosyayı bulabilirsiniz. Netscape Navigatorda ise yine File (Dosya) menüsünden Open Page (Sayfa Aç) maddesini seçerek, ve gelecek dilayog kutusunda Choose File (Dosya Seç) kutusunu tıklayarak oluşturduğunuz dosyayı arayabilir ve yükleyebilirsiniz. İşini kolaylaştırmak için, .htm ve .html uzantılarını en beğendiğiniz tarayıcı ile ilişkilendirirseniz, herhangi bir HTML dosyasını iki kere (Internet Explorer 4.xün masaüstü unsurlarını koymuş iseniz, bir kere) tıklayınca, tercih ettiğiniz tarayıcı dosyayı otomatik olarak açacaktır.
//////////////////////////////////////////////////////////
İlk HTML sayfanız şimdi karşınızda. HTML etiketleri arasına yazdığınız mesaj ekranda, tarayıcının varsayılan fontu ile ve yine varsayılan büyüklükte, gösteriliyor.
Şimdi, tarayıcının program adının yazılı olduğu üst çerçeveye dikkat edin: F:\hosgeld.htm Microsoft Internet Explorer ya da sadeceNetscape kelimelerini göreceksiniz.
Şimdi, hala açıksa, hosgeld.htm dosyasını yazdığınız kelime işlemcisini ön plana getirin ve üçüncü satıra
Web Tasarım Rehberine Hoş Geldiniz!
Burada yaptığımız, sayfamıza bir başlık vermekten ibarettir. Title/Başlık etiketi, tarayıcıya, bu etiketin, programın adıyla birlikte, çerçevede gösterilmesi talimatını verecektir.
Şimdi bu sayfayı aynı isimle bir kere daha kaydedin; ve oluşan dosyayı iki kere tıklayın. Açılan tarayıcıya, en üstteki çerçevenin üzerindeki başlığı okuyun:
reh005.tif
Title/Başlık komutu, IEde, dosya adı yerine sayfanıza verdiğiniz Benim Sayfam başlığının tarıyıcı programının adıyla birlikte, programın çerçevesinde gösterilmesini sağladı. Netscape de şimdi program başlığında sadece kendi adını değil, bizim sayfamızın başlığını da göstermektedir. Yani, Title komutu ile, HTML sayfamızın içinde bir iş yapmış olmuyoruz, sadece tarayıcıya, kendi başlık alanında sayfamızı bilgisayar kullanıcısına hangi başlıkla sunmasını istediğimi söylemiş oluyoruz.
////////////////////////////////////////NOT//////////
HTML Editörleri
HTML kodunu kendisi oluşturan ve tasarımcıya görsel araçlar kullanma imkanı veren bir çok program çıktı. Kısaca HTML editörü denen bu programların bir özelliği WYSIWYG imkanına sahip olmalarıdır. İngilizce Ne Görüyorsan, Onu Alırsın kelimelerinin başharflerinden oluşan bu terim, yaptığınız tasarımın ekranda nasıl görülüyorsa aynen o şekilde HTML dosyasına haline dönüştürüleceğini ifade ediyor. Bu tür programların bir özelliği, oluşturduğunuz sayfaya hemen Untitled (Başlıksız) başlığını vermektir. Sayfalarınızı böyle bir program yardımıyla oluşturuyorsanız, ilk işiniz sayfa özellikleri (Page Properties) kutusunu açıp, sayfanın başlığını vermek olmalıdır.
//////////////////////////////////////////////////////////
İlk HTML sayfamızı yazmış ve incelemiş olduk. Bundan sonrası, sayfalarımıza daha çok içerik koymak ve onları biçimlendirmekten ibaret. Bunun için ilk adım olarak Style Sheet (Stil Sayfaları) denilen, tarayıcıya toplu biçimlendirme komutları veren etiketleri inceleyeceğiz.
Web Sayfasının Biçimlendirilmesi
Bir anlamda, HTML etiketlerinin yarısından fazlası metin biçimlerdirme komutlarıdır. Ama bu komutlar, HTML etiketlerini geliştirenlerle, ürettikleri tarayıcı programların bunları nasıl yorumlayacağına karar veren uzmanların belirlediği biçimlerden ibarettir. Örneğin, HTML, temel metin unsuru oharak paragraf (
..
) ve altı ayrı büyüklükte başlık (Heading) kodu içerir (H1, H2, H3, H4, H5, ve H6). Ne var ki, temel metin harfleri ile başlıkların gerçekten ne kadar büyük olacağına, tarayıcı program karar verir. Bir programda H1, 16 punto olabilir; bir diğerinde 14. Ayrıca kullanıcı, kendi tarayıcısında bazı seçenekleri değiştirmiş, varsayılan metin yazısı ölçüsünü azaltmış ya da arttırmış olabilir. Bu durumda, ölçüsünü göreceli olarak normal paragraf harfi büyüklüğünden alan diğer bütün başlıkların da ölçüsü değişecektir. Bu değişiklik, sizin sayfalarınızın kullanıcının ekranında arzu ettiğiniz görsel etkiyi oluşturacak şekilde canlandırılmasını önleyebilir. Ayrıca HTML etiketlerini benimseyip, kullanmak, tarayıcı programlarını üreten firmalara kalmış bir tutum olduğuna göre, bütün HTML etiketlerinden yazı biçimlendirmede yararlanamayabilirsiniz. Örneğin, metin biçimlendirmede kullanılan bir diğer, alıntıları belirten Q (quotation) etiketidir. Netscape, bu etiketi taşıyan metni sabit genişlikteki fonta çevirirken, Internet Explorer, bu etiketin sonucu olarak metinde hiç bir biçim değişikliği yapmayacaktır.////////////////////////////////NOT///////////////////////// ///
Harf Genişliği
Eski daktilolarda, kağıdı hareket ettiren mekanizma, her harfin genişliğine göre farklı hareket edemediği için i harfi gibi sadece bir çizgiden olan harf de, içine üç adet i harfi alabilecek olan m harfi de aynı genişlikte bir alana yazılırdı. Zamanla dizgi makinalarının akıllı hale gelmeleri ile, her harf, m harfinin kaçta kaçı kadar bir alan kapladığına bakarak, farklı yere yazılır hale geldi. Harfleri büyüklüklerine göre göreli genişlikte olan fontlarla bütün harfleri aynı genişlikte olan fontların farkı buradan kaynaklanır. Günümüzde, eski daktilo metinlerin sağladığı görsel etkiyi sağlamak üzere, bilgisayar fontları arasında da her harfinin alanı eşit, fontlar var.
/////////////////////////////////////////////////////////
Ne var ki, HTML 4 ile, etkisi duragan ve niteliği bir anlamda kullanıyıca bağlı olan bu etiketleri kullanma yerine, artık her paragrafı, hen cümleyi, hatta her harfi arzu ettiğiniz gibi biçimlendirebilirsiniz. Artık duragan etiketleri de, tarayıcının değil, kendi ettiğiniz biçimde kullanma imkanınız var. Dahası, bir tek dosyada bir tek kelimeyi değiştirerek, yüzlerce sayfadan oluşan bir Internet alanınında söz gelimi bütün başlıkları maviden turuncuya çevirebilir; bütün alıntıları italikten siyah harfe, Timesdan Ariala çevirebilirsiniz.
HTML sayfada metin stili dediğimiz zaman, metnin Internet alanımızı ziyaret eden kişinin bilgisayar ekranında hangi tür harfle (Arial, Times, Verdana, Helvetica, vd.), bu harfin normal türüyle mi, ya da siyah (bold) veya italik tarzıyla mı, hangi büyüklükte (12 punto, 18 punto, 24 punto), ve ne renk gösterileceğini, sayfanın ya da içinde bulunduğu tablo hücresinin sağına mı, soluna mı, ortasına mı bloklanacağını kasdediyoruz. HTML 4de, metin stil unsurları arasında, geri plan rengi gibi, daha başka unsurlar da vardır. Bunları, daha sonra ele alacağız. Şimdi sadece sayfa tasarımında kullanabileceğimiz unsurlardan biri olarak, stillerin HTML sayfasında nasıl yer aldığına bakalım.
HTML 4, üç ayrı stil imkanına sahiptir. Bir paragrafın (paragraf, bir kelime, hatta bir harf bile olabilir), ya da bir paragrafın bir bölümünün stili, hemen önüne konulacak bir stil komutu ile belirlenebilir. Buna in-line (aynı satırda) biçimlendirme komutları denilir. Burada bu tür biçimlendirmeyi biraz ayrıntılı ele alacağız ve bir iki örnekle nasıl kullanıldığına değineceğiz. Diğer iki biçimlendirme yöntemi olan HTML sayfasının başlangıç bölümüne gömülmüş ve gövde bölümünden buraya atıf yapılan Embedded stil etiketleri ile HTML dosyasının tamamen dışında, dosya adı uzantısı .css, içeriği düz yazı dosyası biçiminde olan Cascading Style Sheets (Yığılma Stil Sayfaları) tarzındaki stil olanaklarını Dinamik HTML bölümünde ayrıntılı ele alacağız. Burada kısaca söz etmek gerekirse, Gömülmüş (Embedded) stil bölümü, biraz sonra ayrıntılı olarak ele alacağımız yerel biçimlerdirme kodlarını HTML dosyasının başlangıç bölümüne toplu halde koymaktan ibarettir. Böylece dosyanın gövde bölümünden toplu stil kodlarıyla tanımlanmış etiketleri kullanarak her seferinde yerel biçimlendirme kodları girmekten kurtulmuş oluruz, Ancak bu yöntemi uygulamak için, Internet alanınızdaki her sayfanın baş tarafına bu kodları girmek zorundasınız. Oysa toplu biçimlendirme kodlarınızı ayrı bir düz yazı dosyası halinde saklamanız ve Internet alanınızda yer vereceğiniz bütün sayfaları bu stil dosyası ile bağlantılandırmanız mümkündür. Buna bağlı (linked) stil dosyası denir. Bu yöntem, tasarımcıya bu dosyada yapacağı değişiklikle, bütün sayfalarda değişiklik yapma imkanı verir.
HTML 4ün tanıdığı bu üç stil yöntemini kullanarak Web alanındaki bütün sayfalar baştan sona tutarlı bir görünüme kavuşabilir. Web tasarımcıları, stil belgeleri sayesinde, adeta gazete, dergi ve diğer basılı yayınları hazırlamakta kullanılar masaüstü yayıncılık programlarını kullananlara yakın bir tasarım esnekliği ve kalite düzeyine ulaşmış bulunuyorlar. HTML ile henüz herhangi bir masaüstü yayıncılık programında yapılan bütün tasarım incelikleri uygulanamaz; ama stil belgelerinin dikkatli ve titiz şekilde kullanan ve bu alandaki gelişmeleri takip eden bir tasarımcı, herhangi bir gazete sayfası tasarımcısını bile kıskandıracak sayfalar hazırlayabilir.
Stil etiketlerini yorumlama ve özellikle yukarıda değindiğimiz son iki yöntemin kullanılma açısından bütün tarayıcıların eşit düzeyde olmadığını söylememiz gerekir. Internet Explorerın 4ncü sürümü HTML ün bütün etiketlerini tanırken, Netscapein 4cü sürümü HTML 3.2nin etiketlerinin tümünü, HTML 4ün de bir kısmını tanıyor. Web sayfasını tasarımcısı olarak, tarayıcıların hangi stil etiketlerini tanıdıklarını, hangisini tanımadıklarını izlemeniz ve sayfalarınızın bütün kullanıcıların bilgisayarında hemen hemen aynı tarzda gösterilmesini sağlamak için bunlardan hangisini kullanacağınıza, hangisini kullanmayacağınıza karar vermeniz gerekir. Başvuru bölümünde bazı etiketlerin tarayıcıların hangi sürümü tarafından tanındığına bakabilirsiniz.
Şimdi yerel biçimlendirme yöntemine ayrıntılı olarak bakalım.
Yerel Biçimlendirme
Diyelim ki, Webde sayfa tasarımı konularını bir araya getiren, karşınıza çıktığında beğendiğiniz sayfaların adreslerini, bir yerlerde okuduğunuz bir makalenin ana mesajını aktaran ve Web tasarımcılarının birbirleriyle fikir alışverişi yaptıkları bir Internet alanı oluşturmak istiyorsunuz. Sayfanıza şu metni koymak istiyorsunuz:
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
Dikkat ederseniz, metinde bir cümle siyah harflerle dizilmiş ve kaynak italik harflerle gösterilmiş bulunuyor. Şimdi bu paragrafı, biraz önce oluşturduğumuz Hoşgeldiniz sayfasına alalım ve siyah harflerle italikleri oluşturmaya çalışalım. Yukarıdaki örnekte kaydettiğiniz HTML dosyasını açın ve Benim Web Sayfama hoş geldiniz! kelimelerini silip, yerine yukarıdaki paragrafı yazın:
Bitirdiğinizde ekranınızdaki HTML kodu şöyle olmalıdır:
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
Burada paragraf etiketini kullandığımıza dikkat edin.
..
etiketleri, tarayıcıya, ana metin unsurunu verir. Tarayıcı bu etiketi gördüğü anda, takibeden unsuru (bu bir başka metin olabileceği gibi, bir grafik öge, veya tablo da olabilir) bir satır aşağıya ve yeni satırın en başına alır./////////////////////////////////NOT///////////////
Yeni Paragraf ile Yeni Satırın farkı.
etiketi, tarayıcıya, yeni bir paragraf başlatmasını söyler. Buna karşılık, bir metinde bir satır, nerede bitiyorsa orada bitsin, takibeden satır yeni bir paragraf yapmadan, alttaki satırın başına gitsin isteyebilirsiniz. Bu iki durumun, yani yeni paragraf ile paragraf başlatmadan yeni satıra gitmenin farkı da mekanik daktilodan geliyor. Daktilo yazma kurallarından biri, yeni paragraf başlatırken, iki paragrafın arasında normal satır aralarına verdiğiniz boşluktan daha fazla boşluk vermekti. Diyelim satırlarınız tek aralıkla yazılıyorsa, paragraflarınızın arasında en az bir buçuk aralık olması gerekirdi. Ayrıca her yeni paragraf bir miktar içerden başlardı. Elektrikli daktiloların icadıyla, yazana kolaylık olması için mühendisler, yeni paragraf yapmayı ve sadece satır atlatmayı ayrı ayrı tuşlarla yapılır hale getirdiler. Bugün ENTER veya RETURN tuşu, kelime işlem programınızın varsayılan ayarlarına bağlı olarak, iki parafraf arasında arzu ettiğini bir miktar boşluk bırakır ve yeni paragrafı biraz içerden başlatır. Yeni paragrafın normal satır aralığından daha fazla boşluk bırakmadan ve birinci satırı içeri girmeden yazılmasını istiyorsanız, yine programına bağlı olarak, örneğin ENTER veya RETURN tuşuna basarken, CONTROL tuşunu da tutmanız gerekir. Internetin ilk günlerinde, yazıların ekranda mümkün olduğunca kelime işlem programlarına benzer şekilde oluşturulması amacıyla etiketine yeni paragraf başlatma, buna karşılık
(line break) etiketine de sadece satır atlatma görevi verilmişti.
/////////////////////////////////////////
Paragraf etiketinin nasıl bloklanacağını ALIGN yüklemi belirlersiniz. Örneğin paragraf etiketini
şeklinde kullanırsanız,
etiketine kadar gireceğiniz bütün metin, bulunduğu yerde ortalanacaktır. Paragraf etiketinin çeşitli kullanım özelliklerine aşağıda döneceğiz, Ama şimdi bu HTML sayfasını farklı bir isimle kaydedin ve kaydettiğiniz dosyayı tarayıcınızda açın. Bu paragraf, herhangi bir tarayıcının ekranında, şöyle gösterilecektir:reh007.tif
Bu görünümü sağlayan HTML komutları, koyu renkli (matbaacılıktan kalma deyimle siyah harfler) için (ve tabiî, bu etiketin etki alanının bittiğini belirten eşi ), italik için (ve ) etiketleridir.
Aynı şekilde istersek. bir paragrafın veya bir bölümünün harf ailesini (fontunu) da değiştirebiliriz. Yukarıdaki örnekte, metnimizin tarayıcının ekranında nasıl gösterileceğini bilgisayar kullanıcısının seçtiği varsayılan fonta bırakıyoruz. Başka bir deyişle, sayfamızın tarayıcıda hangi temel harfle gösterileceğini biz tayin etmiyoruz, işi bir bakıma şansa bırakıyoruz. Oysa oluşturduğumuz Internet alanı edebiyatla ilgili olduğuna göre, harf ailesini, sanata biraz daha önem verecek şekilde biz seçebiliriz.
/////////////////////////////NOT////////////////////////
Internette Font meselesi
HTML sayfanızı tasarlarken, kendi bilgisayarınızda mevcut fontların, Internet alanınızı ziyaret edecek herhangi bir kişinin bilgisayarında mevcut olacağını varsaymanız hata olur. Bunun için hemen hemen bütün Windows ve Macintosh ortamlarında mevcut harf ailelelerinden ayrılmamanız gerekir. Netscape ve Internet Explorer programlarının yeni sürümleri, kurulurken, kullanıcının bilgisayarına Internetin klasik fontları olmaya başlayan bazı harf ailelerini yüklüyorlar. İşletme sistemlerinin temel harfleri ile tarayıcıların eklediği harfler arasında seçim yaparak da görsel etkisi arzu ettiğinize yakın sayfalar tasarlamanız mümkün. Bir başlıkta, ya da bütün sayfalarınızda ortak bir logoda mutlaka arzu ettiğiniz bir fontu kullanmak istiyorsanız, bu başlık ya da logoyu, grafik haline getirebileceğinizi unutmayın. Ama grafiklerin de sayfanızın ziyaretçinin bilgisayarına aktarılması süresini uzatacağını akıldan çıkartmayın. Metinlerinizi, sırf görsel etki için grafik halinde sunarsanız, bir süre sonra ziyaretçilerinizin beklemekten bıkıp, başka sayfalara gidebileceğini hatırlayın.
////////////////////////////////////////////////////////
/////////////////////NOT/////////////////////////
SERIF-SANS SERIF Harfler:
Latin alfabesine bugünkü biçimini veren eski Romalılardır. Harflerin kol ve bacaklarının ucunda, ana çizgiye dik gelecek kısa sonlardırma çizgisi olan serifin ilk kez kağıt üzerinde mi, yoksa harfleri anıtlara oyan yontma ustalarının keskilerinden mi doğduğu bugün bile tartışmalıdır. Serif, daha sonra matbaacılıkta da çok iyşe yaramıştır. İlk yıllarda kağıt üzerinde harf şeklinde iz bırakan harf kalıpları çoğu zaman şimşir tahtasından oyularak yapılırdı. Bu kalıplara mürekkep sürülür ve üzerine konan kağıda basılırdı. Tıpkı lastik damga gibi! Ama tahta harf kalıplarının uçları çok çabuk aşınırdı. Aşınmanın uzun zaman alması için, zamanla harflerin kol ve bacaklarının çıkıntılı, yani serif yapılması gelenek oldu. Daha sonra, kurşun ve tunç gibi dayanıklı malzemeden harf kalıpları üretildiği zaman, çıkıntıları olmayan, sans-serif (serifsiz) harfler yaygınlaştı. Günümüzde de bilgisayar fontları, serif, sans serif ve dekoratif diye üçe ayrılıyor. Basılı eserlerde görsel etki, zıtlıklardan yararlanrak sağlanır. Bir sayfada yer alacak iki yazı unsuruna gerekli dikkati çekebilmek için bunlardan birinin serif, diğerinin sans serif harfle verilmesi yaygın bir uygulamadır. Ekranda zıtlıklar yoluyla dikkat çekebilmek için harf türünden başka şeyler, örneğin renk ve hareket unsuru da kullanabiliriz. Fakat matbaacılıktan kalma bir gelenekle, HTML tasarımcıları arasında başlıkla metni birbirinden serif-sans serif harflerle ayırmak giderek yaygınlaşıyor. Ekranda okuma kolaylığı açısından sans serif harfleri tercih edin. Özellikle küçük puntolu serif harflerin okunması çok zor olabilir.
//////////////////////////////////////////////////////////
Sayfamızda metinlerimizi Arial veya Helvetica; başlık ve kaynakları kaynağı da Times veya Times Roman ile gösterelim. Bunun için, HTML kodumuzda bir değişiklik yapmak zorundayız. Dosyamızın baş tarafına dokunmadan, paragrafın başladığı yere FONT etiketi koyalım. Bu etiketin parametreleri, başka bir ifadeyle, bu etikete niteliğini veren yüklemler, face, (font ailesinin adı), size (harfin büyüklüğü) ve color(harfin rengi) olarak sıralanır. Bu yüklemlerin nasıl kullanıldığını daha yakından görmek için, Başvuru bölümüne bakabilirsiniz. Biz burada sadece harfin türünü belirlemek istiyoruz; onun için sadece face yüklemini kullanacağız. HTML sayfasında paragraf etiketinden sonra yazınız. Tabiî, bu etiketi sonlandıran, bitiren eşini ihmal etmeden! Kaynak cümlesi için aynı ifadeyi bu kez fontun adını değiştirerek yazacağız. Bitirdiğinizde, HTML kodunuzun paragraf bölümü şöyle olmalıdır:
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
Bu sayfayı kaydedin ve kaydettiğiniz dosyayı, tarayıcınıza açtırın. Herşeyi doğru girdi iseniz, sayfanız şu sayfaya benzeyecektir:
reh008.tif
Metin Düzenleme Etiketleri
Bu örneklerde HTMLin temel unsuru olan paragraf (
..
) etiketini kullandık ve çeşitli şekillerde biçimlendirdik. Ancak HTML paragraftan başka metin unsurlarını da tanır. Bu bölümde bu etiketleri ele alacağız.HTMLin paragraftan sonra metne ilişkin en önemli yapı taşı, başlık etiketleridir. nitekim bizim yaptığımız örnek sayfanın da eksiği başlığının olmaması. Sayfamıza başlık koyşmadan önce HTMLin başlık etiketlerini daha yakından tanıyalım.
HTML bize H1, birinci yani en büyük, H6 sonuncu, yani en küçük olmak üzere altı ayrı büyüklükte başlık kullanma imkanı veriyor. Farklı başlık büyüklüklerini daha yakından tanımak için, şu sayfayı yazarak, örneğin baslik.htm adıyla kaydedin:
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
Bu dosyayı tarayıcınızda açın. Tarayıcınızın temel font ölçüsünü ortalamada tutuyorsanız, şuna benzer büyüklükler verir:
reh009.tif
Şimdi bu bilgiyle, örnek sayfamıza başlık verebiliriz. Bunun için, paragrafın hemen üstüne,
Tasarımcı kimdir?
Tasarım nedir?
satırlarını yazın ve sayfanızı kaydedin. Tarayıcıda açtığınız zaman sayfamızda iki başlık göreceksiniz.
reh010.tif
Paragraf etiketi gibi, başlık etiketinin de arkasına koyabileceğiniz tek özellik ALIGNdır ve bununla başlığın sola, sağa, ortaya bloklanmasını veya sağ sol marjların aynı anda bloklanmasını sağlayabilirsiniz.
Yerel biçimlendirmede kullanabileceğimiz stil unsurları paragraf, başlık ve bunların , ve FONT etiketleri ile biçimlenmesinden ibaret değildir. Diğer temel biçimlendirme etiketlerini kısaca sıralayalım:
...: İşaretlediği metnin temel fonttan bir ölçü büyük olmasını sağlar. Bu etiketi, aynı etiketin içinde tekrar kullanırsanız, en içerdeki font, temel fonttan iki ölçü büyük olacaktır.
Örnek:
Rudolf Koch - Alman harf dökümcüsü, kaligraf
...: İşaretlediği metnin temel fonttan bir ölçü küçük olmasını sağlar. Bu etiketi, aynı etiketin içinde tekrar kullanırsanız, en içerdeki font, temel fonttan iki ölçü küçük olacaktır.Örnek:
Rudolf Koch - Alman harf dökümcüsü, kaligraf
reh013.tif
Örnek:
reh014.tif
Örnek:
reh015.tif
..: Teleks Metni (Teletype Text) etiketi, işaretlediği metnin eşit genişlikte fontlarla (Courier gibi) gösterilmesini sağlar. Bu etkiyi, bir metinde örneğin bilgisayar kullanıcısının kendi yazması gereken bölümleri göstermekte kullanabilirsiniz.
Örnek:
Programın kullanıcının adını soran diyalog kutusuna adınızı yazınız
reh016.tif
..: Altını Çiz (Underline) etiketi, işaretlediği metnin altına çizgi çekilmesini sağlar. Bu etkiyi, bir metinde vurgulamak istediğiniz bölümü göstermekte kullanabilirsiniz.
Örnek: Biz inanıyoruz ki, en yüksek düzeyde beceri gerektiren şey, bizim sanatımıza en yakın olanıdır..
reh017.tif
: Yatay Çizgi (horizontal rule) etiketi, bulunduğu yerde, vereceğiniz yüklemlere göre yatay bir çizgi çizilmesini sağlar. Bu etiketin etkisinin bittiği yeri belirten eşi yoktur. Yatay çizginin yüklemleri arasında sağa, sola veya ortaya bloklanacağını gösteren ALIGN, gölgesiz olmasını sağlayan NOSHADE, pixel veya yüzde olarak kalınlığını belirleyen WIDTH vardır. Doğrudan betin biçimlendirmeye yaramamakla birlikte bu etiket, metnin bölümlerini ayırmakta kullanılabilir.
Örnek: <
Rudolf Koch - Alman harf dökümcüsü, kaligraf
reh018.tif
HTMLin metin biçimlendirmekten çok metnin bölümlerini tanımlamakta kullanılan ve özellikle Internetin metin ağırlıklı olduğu ilk dönemlerinden kalma, ACRONYM, BLOCKQUOTE, CITE, CODE, DEL, DFN, EM, INS, KBD, PRE, Q, SAMP, STRONG, SUB, SUP, VAR etiketlerini ve kullanıldıkları yerleri Başvuru bölümünde bulabilirsiniz.
Fakat burada kısaca da olsa, Internet giderek daha çok bilgi sunma ve bu bilgilerin bulunduğu yerleri gösteren bağlantıların listesi haline döndüğüne göre, listelerden söz etmek yerinde olacaktır. HTML bize birçok liste türü kullanma imkanı veriyor. Bunları sırayla inceleyelim ve uygulayalım.
Sıralı Listeler
- ..
Örnek sayfamıza, Webde hemen herkesin tarayıcısının gösterebileceği güvenli renklere ilişkin bir sayfa koyalım. Akılda kolay kalması için kaç adet renk olduğunu belirtmek üzere, listemizde yer alacak unsurların rakamla veya harfle sıralanması uygun olur. Web Tasarım Rehberi sayfasının HTML kodunu açın ve mevcut paragrafı şöyle değiştirin:
HTML Sayfada Güvenli Renkler
- #000000=black (Siyah)
- #000080=navy (Lacivert)
- #0000FF=blue (Mavi)
- #008000=green (Yeşil)
- #008080=teal (Koyu Yeşil)
- #00FF00=lime (Parlak Yeşil)
- #00FFFF=aqua (Turkuaz)
- #800000=maroon (Vişne çürüğü)
- #800080=purple (mor)
- #808000=olive (Zeytunî yeşil)
- #808080=gray (Gri)
- #C0C0C0=silver (Gümüşî gri)
- #FF0000=red (kırmızı)
- #FF00FF=fuchsia (Parlak pembe)
- #FFFF00=yellow (Sarı)
- #FFFFFF=white (Beyaz)
Herşeyi yolunda gitti ise, tarayıcınızda şu sayfa karşınıza çıkacaktır:
reh019.tif
Denemiş olmak için, liste etiketinde, TYPE yüklemini 1 değil, a olarak verin. Sayfadaki listeniz, bu kez rakamla değil, küçük harflerle sıralanmış olacaktır:
reh020.tif
(Bu liste ç veı gibi Türkçe harflerin olmadığını görüyorsunuz. Peki, listemiz çok unsur içerse, z harfinden sonra ne olur? İşte size güzel bir ev ödevi konusu!)
Sırasız Listeler
Sayfamızı tarayıcıda inceledikten sonra, aslında bu listenin rakam veya harfle sıralanmış olmasının istediğimiz görsel etkiyi yapmadığına karar verdik, diyelim. İstiyoruz ki listemizde, unsurların başına siyah, yuvarlak bir nokta gelsin. Bunun için, HTMLin sağladığı sıralanmamış liste etiketini kullanmak zorundayız.
- ..
Şimdi HTML kodumuzda gerekli değişikliği yapalım. Yani liste etiketini olarak değiştirelim, TYPE yüklemini de DISC yapalım:
- ), tanımlama terimlerine (
- ) veya her ikisine birden yer verilir. DL etiketine sadece COMPACT yüklemi verilebilir. DD ve DTnin sonlandıran eşi yoktur. Bu etiketlerle oluşturulacak listeleri de birer örnekle inceleyelim:
Diyelim ki Web tasarımını ciddî bir şekilde meslek olarak edinmek isteyenler için Web Tasarım rehberi sayfamızda bazı HTML işlemcilerin ve grafik programlarının tanıtımını yapalım. Tabiî önce bu programları gruplara ayıracağız. Dolayısıyla önce sayfamızı ziyaret edenlere, bu gruplarda ne tür programların yer aldığını anlatmak zorundayız. Başka bir deyişle tanımlama listemiz üç tanı
Listemiz, tarayıcıda değişik bir görünüm alacaktır:
reh021.tif
Liste türünü diğer iki unsuru deneyerek, değiştirebilirsiniz.
Tanımlama Listeleri
HTMLin, Internetin daha çok bilimadamlarının bilimsel rapor alışveriş alanı olduğu günlerde, sayfa tasarımcılarına kolaylık sağlamak üzere geliştirilmiş tanımlama listeleri üç gruba ayrılabilir.
- ..
butonuna tıklayarak aynı işlevi yerine getirebilirsiniz.
butonu ile de aynı sonuca ulaşabilirsiniz.
"Photoshop'u Tanıyalım" bölümümüz de en popüler resim işleme programı olan 
" işareti bulunan ikonların üzerinde mouse nuzu basılı tutup bir süre bekleterek açılacak olan yeni ikon penceresinden erişebilirsiniz.
'a tıklayarak da default ayarlara geçilebilir. 
'a tıklayarak alttaki ve üstteki renkleri yer değiştirebilirsiniz(X). Ancak alttaki daima Background, üstteki daima Foreground olacaktır.
'a tıklayarakda açabiliriz.
Burada bir hatırlatma yapalım, eğer Photoshop'a çok yabancıysanız, bu anlattıklarımız size çok tuhaf gelebilir. Bu nedenle öncelikle Photoshop Programını edinip, makinanıza kurmanız ve bir süre sağını solunu iyice kurcalayıp, aşina olmanız gereklidir. Penceresi karşımıza geliyor. Ayarlarımızı yapalım, Name bölümüne bir isim yazabilirniz veya boş bırakabilirsiniz. Nasılsa kayıt sırasında bir isim vereceksiniz! Biz yine "Photoshop-Layers" yazıyoruz. 
seçerek "Daire" Layer ımızın içine istediğimiz boyutta bir daire çizelim. Düzgün bir daire çizmek için bir elimiz de mause ile daireyi çizerken diğer elimizi de klavyemizde shift tuşuna basılı tutalım (Çizim Bitene Kadar!). Eğer Shift tuşunu basılı tutmazsak çizimimizin elips olacağını, tam daire yapmak için çok uğraşacağımızı hatırlatırız. Şimdi çizdiğimiz bu daireyi boyamak için Swatches penceresinden bir renk seçelim. 
(Window > Show Swatches) Biz burada Kırmızı'yı seçtik (RGD Red). Renk Değişim Aracında (Palet'te) üstteki renk "Foreground" Kırmızı oldu. Tekrar Tool Box dan bu defa Paint Bucket Tool'u 
seçerek dairemizi seçtiğimiz kırmızıya boyamak için seçili alanın üzerine bir kere tıklıyoruz. İşte bu kadar. Artık "Daire" isimli Layer ımız da Kırmızı renkte bir Dairemiz var.
Göz ve Fırça açık - görünür olacak), tekrar Tool Box dan Marquee Tool aracına gidip bu defa Rectangular Marquee Tool u 
seçerek yine Shift tuşunu basılı tutarak istediğimiz büyüklükte bir kare çizelim. Eğer Shift tuşunu basılı tutmazsak çizimimizin dikdörtgen olacağını, tam kare yapmak için çok uğraşacağımızı bir kez daha hatırlatırız. Karemizi boyamak için tekrar Swatches penceresinden bir renk seçelim. 
, Karenin üzerine basılı tutarak Dairenin üzerine sürükleyerek taşıyoruz. Layer Penceresine dikkat ederek, gördüğünüz gibi İmajımızda, Layer sırasına göre Layer Penceresindeki alttaki "Daire" Layer'ında olan daire altta, üstteki "Kare" Layer'ında olan kare üstte duruyor.
noktasından tutup çekerek -yandaki şekildeki gibi- büyültüp, küçültebiliriz.
'un özelliklerini de biraz daha inceleyelim.
(Paletlerin) büyüklük ve küçüklüklerini ayarlamamızı sağlar veya pencereleri yok edip Layer Penceresinde sadece Layer adlarını gösterir.
ile bir yazı (Text) yazdığımızda bu yazıya direkt olarak filitreleri uygulayamayız. Bunun gibi Photoshop'un Türkçe karakterleri tanımama özelliği olduğundan yazılarımızda Türkçe karakter kullanamıyoruz. Örneğin küçük harf ile " ı " yazamıyoruz. Bu nedenle önce küçük harf ile " i " yazıyoruz. Daha sonra Layeri "Rasterize Layer" ile rasterize ederek, yazımızı "Text - yazı" özelliğinden çıkarıp, " i " harfini üzerindeki "nokta (.)" işaretini 
) tıklayarak açılan "Layer Style Penceresi" nden ulaşabiliriz. Diğeri ise hem Layer Penceremizin üst tarafında bulunan 
(M) ile seçmimizi yapmamız gerekiyor.]
aracını kullanırken, Tool Options Bar'da ki Brush listesinden hafızaya aldığımız deseni seçebiliriz. Bu taktirde Paletin boya-üst rengini kullanarak fırça etkisi ile boyar.
simgesi, bölgenin merkez noktasını belirler. Photoshop'ta bir çok araçta karşımıza çıkacak olan merkez noktası simgesinin yeri değiştirilirse imajın ağırlık merkezi de değişmiş olur ve yapılacak açı değişikliklerinde yeni merkez noktası dikkate alınarak etki sağlanır. Burada konumuz olan transform işlemleri de bu yeni değişen merkez noktası esas alınarak yapılır. Bu özellik, Photoshop'un merkez noktasına 
Bunu gibi daha bir çok özellik tüm transformlar için Tool Options Bar da mevcuttur.
ikonundan da ulaşabiliriz.
