Web Yayıncılığı Araçları Dersi 2. Ünite Özet

Giriş

E n basit ve alt düzey biçimlendirmede, yani temel Web tasarım sürecinde tasarımcılar tarafından kullanılan araç HTML (Hyper Text Markup Language – Hiper Metin İşaretleme Dili) adı verilen bir dilidir. Esasen HTML, yazılım geliştirme veya kodlamada kullanılan programlama dillerine yapısal ve söz dizimi olarak benzemeyen bir yapıdır. Bu çerçevede HTML için kullanılan tanımlama, onun programlama dili değil işaretleme dili olduğudur. Bir diğer deyişle bu işaretleme dili Web tasarım sürecinde belirli tasarım öğelerinin Web sayfası üzerine yerleşimi ve biçimsel bir yapının oluşturulmasını sağlayan bir araç olarak nitelendirilebilir. Bu nedenledir ki programlama dillerinin aksine, HTML ile Web tasarımında kullanılan ifadelere komut değil, “Etiket (Tag)” adı verilmektedir. Günümüz ileri düzey Web uygulamaları da yine HTML’yi temel alan bir yapı üzerine inşa edilmektedir.

Her düzeydeki kullanıcıların, HTML ile amatörce de olsa Web tasarımı yapabilmelerini sağlayacak ve bu amaçla kullanabilecekleri çok fazla tasarım editörü ve yardımcı araç bulunmaktadır

HTML Editörlerinin Temel Özellikleri

Notepad ile Web Tasarımı

Tasarımcıların profesyonel tasarım editörlerine sahip olamadıkları veya Web sayfaları üzerinde hızlı ve basit işlem yapmayı gerektiren durumlar için Notepad hali hazırda uygun bir çözüm olarak karşımıza çıkmaktadır.

Günümüzün gelişmiş, ileri düzey, programlama dilleri ile desteklenen Web uygulamalarının oluşturulmasında Notepad gibi kelime işlem yazılımlarının yeterli olamayacağı unutulmamalıdır. Bu tür yazılımlar Web tasarım için özelleştirilmiş işlevler ve araçlar içermemektedir. Kelime işlemcileri Web tasarım sürecinde basit ve temel işlemler için kullanmak daha doğru bir yaklaşım olabilir.

Notepad yazılımını başlatmak için [Başlat] [Tüm Programlar] [Donatılar] [Notepad] adımlarını takip ediniz. Notepad ile oluşturulan Web sayfasını kaydetmek için [Dosya_Adı.htm] veya [Dosya_Adı.html] ifadelerini kullanınız.

Kolay kullanımı ve Windows İşletim Sistemlerinin varsayılan yazılımlarından birisi olması nedeniyle ücretsiz ve erişilebilir bir yazılım olmasının yanında Notepad uygulaması ne yazık ki görsel arayüze sahip olmaması ve tasarımcı dostu araçlardan yoksun olması gibi nedenler ile Web tasarımcısının HTML bilgisi ve tasarım becerisi ile sınırlı bir çözüm olarak karşımıza çıkmaktadır.

Notepad gibi görsel bir arayüze ve kullanıcı dostu tasarım araçlarına sahip olmayan yazılımlar ile gerçekleştirilecek Web tasarım uygulamaları öncesinde tasarımcıların belirli bir düzeyde de olsa HTML bilgi ve deneyiminin olması yararlı olacaktır. Bu tur yazılımlarda HTML etiketleri doğrudan tasarımcı tarafından yazılmaktadır.

Birkaç Adım İleri, Notepad++ ile Web Tasarımı

Notepad++, kısıtlı genel kamu lisansına sahip (GPL – General Public License), açık kaynak kodlu, ücretsiz bir kod editörüdür. Yazılım, C++ dili ile geliştirildiğinden isminin sonunda aynı karakterler kullanılarak Notepad++ adını almıştır. Bir önceki başlık altında ele aldığımız Windows İşletim Sistemi ile birlikte gelen Notepad uygulamasının oldukça gelişmiş özelliklere sahip bir türevi olan Notepad++, C, Java, HTML gibi birbirinden farklı özelliklere sahip çeşitli dilleri tanıyabilme ve bu çerçevede kodlama sırasında kullanıcıya/tasarımcıya önemli ölçüde kolaylık ve destek sağlayabilen bir yazılımdır.

Notepad++’ ın öne çıkan özelliklerinden bazıları şu şekilde sıralanabilir (https://notepad-plus-plus.org; https:// tr.wikipedia.org/wiki/Notepad++):

• Kullanılan kelimeleri, komutları otomatik tamamlamayabilme ve ilgili komutun kullanımına ilişkin ipucu sağlama
• Çoklu dil desteğine sahip olma
• Yazım kurallarını vurgulama
• Aynı anda çoklu belgeler ile çalışabilme
• Blok veya normal parantezler için renklendirme
• Kullanıcı tanımlı söz dizimi renklendirme
• Makro kaydedebilme ve oynatma

Notepad++ yazılımını başlatmak için [Baslat] [Tüm Programlar] [Notepad++] [Notepad++] adımlarını takip ediniz.

HTML dili ile gerçekleştirilen Web tasarımları farklı tarayıcılarda farklı biçimlerde görüntülenebilmektedir. Bu nedenle Notepad++ ile yapılan tasarımlarda farklı tarayıcılardaki görünümlerin test edilmesinde yarar vardır.

NotePad++ Web Tasarımı Eklentileri

NotePad++ çalıştırılarak [Eklentiler] menüsü ve ardından [Plugin Manager] ve [Show Plugin Manager] (Eklenti Yöneticisini göster) komutları seçilir. Bu pencerede kullanıcıların karşısına şu sekmeler gelecektir:

1. Yüklemeye hazır eklentiler (Available)
2. Plugin güncellemeleri (Update)
3. Halen Notepad++’da yüklü olan eklentiler

(Installed) Web tasarım amacıyla özelleştirilmiş temel bazı eklentiler bu aşamada artık Noteapad++ menüleri arasına eklenebilir.

CoffeeCup ile Web Tasarımı

CoffeeCup, basit HTML etiketleri ile Web siteleri yaratmanın çok daha ötesinde, gelişmiş düzeyde dinamik HTML içerik geliştirmeye, stil sayfaları oluşturmaya, Javascript kodları yazmaya ve daha birçok Web tasarım işlemini ortaya koymaya yardımcı araç ve şablonlar içeren görsel tasarım editörüdür.

CofeeCup yazılımını başlatmak için [Başlat] [Tüm Programlar] [CofeeCup Software] [CofeeCup HTML Editor] adımlarını takip ediniz.

HTML-Kit ile Web Tasarımı

HTML-Kit, görece olarak basit ancak menü ve araç çubuklarının yerleşim düzeni ve kullanım kolaylığı açısından farklı bir alternatif olarak karşımıza çıkmaktadır.

HTML-Kit yazılımını başlatmak için [Başlat] [Tüm Programlar] [HTMLKit] [HTML-Kit292] adımlarını takip ediniz.

Tasarım Editörleri ile Web Tasarımı

CoffeeCup ile Yeni Bir Web Sayfası Oluşturma

CoffeeCup ile yeni bir Web sayfası/sitesi tasarlamaya başlamak için öncelikle “File” menüsünden “New HTML File” komutu seçilebilir.

Bir Web sitesi hazırlanmasında hazır tasarım şablonlarından (Theme) yararlanmak tasarımcılara büyük kolaylık sağlamaktadır. Hazır tasarım şablonları ile sayfa renk düzeni, site mimarisi, menüler, bağlantılar, metin ve çoklu ortam öğelerinin sayfa üzerindeki yerleşimi gibi birçok tasarım öğesi hazır olarak sunulmaktadır. Tasarımcı bunları en baştan hazırlamak yerine, şablon ile sunulan öğeler üzerinde değişiklik ve düzenlemeler yapabilir. CoffeeCup yazılımı tasarımcılara hazır tasarım şablonları sunmaktadır.

CoffeeCup ile Gelişmiş Sayfa Ayarları

CoffeeCup hızlı başlangıç penceresinde temel sayfa ayarlarının gerçekleştirilmesine ilişkin HTML etiketlerinin görsel olarak gruplandığı 3 ayrı bölüm yer almaktadır. Görsel bir tasarım editörü olması nedeniyle her bir ayar teker teker yazmak yerine kolaylıkla fare tıklamaları ile gerçekleştirilmektedir.

1. Page Style (Sayfa Stili): Bu başlık altında yer alan etiketler ve bu etiketlere ait parametreler yardımı ile sayfanın özellikle renk düzeni ve dolaşım (navigasyon) sırasındaki ayarları belirlenmektedir.
2. Page Background (Sayfa Arkaplanı): Bu başlık altında yer alan etiketlere ait parametrelerin yardımı ile sayfanın arkaplan rengi ayarlanabilir.
3. Advanced (Gelişmiş Ayarlar): Gelişmiş ayarlar başlığı altında yer alan parametreler yardımı ile Web sayfasında kullanılacak HTML dilinin versiyonu, gerekli görülürse arama motorlarında sayfayı temsil edecek bilgi ve anahtar kelimelerin yer aldığı META etiketler ayarlanabilir.

CoffeeCup Menülerini ve Araç Çubuklarını Kullanmak

1. Menü çubuğu: CofeeCup menü çubuğu altında kurulum ile birlikte varsayılan 11 adet menü yer almaktadır. Bu menülerin her birinin işlevleri kısaca şu şekilde özetlenebilir:
   1. [File]: Yeni Web sayfası oluşturma, oluşturulan sayfayı kaydetme, var olan dosyayı yeniden açma gibi yazdırma ve oluşturulan Web sayfalarını bir Web alanına yükleme gibi işlevlere sahiptir.
   2. [Edit]: HTML ile çalışma esnasında kesme, kopyalama gibi metne dayalı işlemlerin gerçekleştirilmesi gibi işlevlere sahiptir.
   3. [View]: CoffeeCup arayüzü üzerinde yer alan öğelerin yerleşim düzenini ayarlama işlevine sahiptir. Örneğin bu menü altında yer alan “Split Screen Preview” komutu ile Web sayfası tasarımının harici bir Web tarayıcıya gereksinim duyulmadan CofeeCup editörünün altında yer alan ön izleme bölmesinin görüntülenmesi bu menü ile sağlanabilir.
   4. [My Websites]: Bir Web sitesi projesi oluşturma veya var olan bir projeyi açma gibi işlevlere sahiptir. Bu menü altında oluşturulan Web sitesinin İnternet üzerinde yer alan bir Web alanına yüklenmesi (FTP upload) işlemi yine bu menü yardımı ile gerçekleştirilebilir.
   5. [Document]: Oluşturulan Web sayfasının başlık, Meta etiketleri, arama motorları için anahtar kelimeleri vb. işlemleri tasarımcılar bu menü altında yer alan komutlar ile gerçekleştirebilir.
   6. [Insert]: CofeeCup Web tasarım editörünün belki de en kritik menüsüdür. Bu menü altında tasarımcıların gereksinim duyacakları birçok HTML etiketi komut halinde yer almaktadır.
   7. [Format]: Bu menü altında Web sayfasında kullanılabilecek metinsel öğelerin özellikleri belirlenebilir.
   8. [Tools]: Bu menü CofeeCup ile tasarım sırasında gereksinim duyulabilecek farklı bir çok işlemi ve aracı içermektedir.
   9. [Window]: Bu menü, tasarım sırasında açık olan sayfaların görüntülenmesi ve ekrana yerleşimi gibi amaçlarla kullanılabilir.
   10. [Help]: Yazılım ile ilgili çevrimiçi ve lokal yardım seçeneklerini ekrana getirir.
2. [HTML] etiketleri araç çubuğu: Bu araç çubuğu üzerinde yer alan simgeler yardımı ile [Insert] menüsü işlevlerine benzer biçimde bir çok HTML etiketi Web tasarım sırasında kullanılabilir.
3. [Search] araç çubuğu: Tasarım esnasında metinsel öğeler arasında arama işlemleri gerçekleştirilebilir.
4. [Main Toolbar] araç çubuğu: Yeni sayfa yaratma, mevcut sayfayı açma, kaydetme vb. dosya işlemleri bu araç çubuğu yardımı ile gerçekleştirilebilir.
5. [Document] araç çubuğu: Web sayfasını ön izleme, FTP ile bir Web alanına yükleme vb. işlemler bu araç çubuğu yardımı ile gerçekleştirilebilir.

CofeeCup ile amatör düzeyde Web tasarımda en sık ihtiyaç duyulan komut ve etiketler genellikle [Insert] menüsü altında yer almaktadır. Bu temel etiketlerin bazılarına [HTML] araç çubuğu ile de erişilebilir.

CoffeeCup Ortamında Sık Kullanılan HTML Etiketleri ile Çalışmak

1. Sayfaya metin ekleme
   1. < body >< /body > etiketlerinin arasına doğrudan istenen metin yazılır.
   2. Metne istenilen biçimsel özellikleri uygulayabilmek için öncelikle metin fare ile seçili hale getirilir. Ardından CoffeeCup ekranında sol tarafta yer alan sütunda [Code] sekmesi (Tab) seçilerek tüm HTML etiketleri görüntülenir.
   3. Girilen metni biçimlendirmek üzere istenen HTML etiketleri bulunarak far ile çift tıklanır.
2. Sayfaya resim ekleme
   1. [Insert] menüsü altında yer alan [Image] komutu seçilir.
   2. [General] sekmesi altında yer alan parametreler yardımı ile resmin başlığı [Title], resmin herhangi bir bağlantı probleminden dolayı görüntülenememesi veya yükleme sırasında kullanılmak üzere [Alt] ifadesi, resmin gerekiyorsa boyutlarının piksel cinsinden yeniden ayarlanması gibi işlemler için parametre ayarları gerçekleştirilir. [Ok] düğmesine tıklanarak son aşamada resim web sayfasına eklenir.
3. Sayfaya Web bağlantısı (link) ekleme
   1. CoffeCup editörü ile çalışırken Web sayfasına bağlantı (link) eklenmesi işleminde öncelikle imleç sayfa üzerinde istenen yere konumlandırılır.
   2. Bağlantı eklerken yine iki farklı yol kullanılabilir. Bunlardan birincisi [Insert] menüsü altında yer alan [Link] ifadesinin seçilmesi; bir diğeri ise [HTML] araç çubuğu üzerinde yer alan (Links] simgesine tıklanmasıdır. Her iki teknik bağlantı ekleme amacıyla aynı sonucu verecektir. Bu işlem sonrasında ekrana bağlantı ekleme penceresi gelecektir. III. [Link Text:] alanına bağlantıda kullanılacak olan metin girilir.
   3. [URL:] alanına kullanıcı metne fare ile tıkladığında bağlanılacak Web adresi yazılır.
   4. [Target:] alanına bağlantıya tıklandığında görüntülenecek yeni Web sayfasının (Örneğin, http://www.google.com ) yeni bir tarayıcı penceresinde mi yoksa aynı pencerede mi açılacağı bilgisi seçilir. [Ok] düğmesine tıklanarak son aşamada bağlantı Web sayfasına eklenir.

HTLM-Kit ile Yeni Bir Web Sayfası Oluşturmak

“Create a new file” diyerek yeni boş bir web sayfası oluşturabiliriz. Ya da “Don’t display this screen again” diyerek bu sayfanın program başlangıcında bir daha hiçbir zaman çıkmamasını sağlayabiliriz. Bu sayfayı bir daha görmez isek bu defa HTML-Kit ile yeni bir Web sayfası veya sitesi tasarlamaya başlamak için program çalıştıktan sonra menü çubuğunda yer alan “File” menüsünden “New Document” seçilip yeni bir boş sayfa oluşturulabilir.

HTLM-Kit ile Gelişmiş Sayfa Ayarları:

• [Tools]: Bu alan tasarımcının işini kolaylaştırmak için web sayfasının tasarımına ilişkin HTML TagsWizard, HTML Tags, HTML Attributes, sıklıkla kullanılan metin araçları, tarih/saat eklemeleri, yazı, kenarlık, arkaplan gibi her türlü renklendirme ve sayfaya kolayca dosya ekleme gibi birçok işlevi içermektedir.
• [Batch Action]: HTML Tidy kullanarak HTML, XHTML ve XML dili ile yazılan kodları kontrol eder.
• [Objects]: Resim ekleme, bağlantı yapma, hazır html kod ekleme, javascript bağlantısı gibi birçok alanı içerir.
• [Document]: Bu alanda dokümana ilişkin başlıkların boyutu, yazı düzeni, kod düzeni ve ASP kod bloğunu yer almaktadır.
• [Style]: CSS nesneleri ve özelliklerini içermektedir.
• [Text]: Yazılan metin ile ilgili genel işlevleri içeren bu alanda yazının boyu, yazının italik ya da kalın olması, yazı rengi, madde imleri gibi stile yönelik birçok özelliği içermektedir.
• [Tables]: Bu alanda tablolara, satır ve sütunlara ilişkin genel ayarlamalar yapılabilmektedir.
• [Forms]: Genel form yapısını düzenlemeye ilişkin işlemler yapılabilmektedir.
• [Navigate]: Sayfa içindeki herhangi bir tag ya da yazıya erişim için bu menü kullanılabilmektedir.
• [Online]: Web adreslerine kolayca bağlantı kurabilmek için bu menü yer almaktır.

HTLM-Kit Menülerini ve Araç Çubuklarını Kullanmak

Menü Çubuğu: HTML-Kit menü çubuğu altında dosyalama, düzenleme, görünüm, araçlar, işlevler gibi birçok işleme hizmet için alt menüler bulunmaktadır. Bu menülerin her birinin işlevleri kısaca şu şekilde özetlenebilir:

1. [File]: Yeni Web sayfası oluşturma, oluşturulan sayfayı kaydetme, var olan dosyayı yeniden açma, yeni bir bağlantı linki açma, yazdırma, baskı ön izleme, sayfa ve yazıcı ayarlamaları ile ilgili gibi işlevlere sahiptir.
2. [Edit]: HTML ile çalışma esnasında kesme, kopyalama, yapıştırma, yapılan işlemi geri alma veya tekrarlama gibi metne dayalı işlemlerin gerçekleştirilmesi gibi işlevlere sahiptir.
3. [View]: Menü üzerinde hangi araç çubuklarının açılır halde görünmesi isteniyorsa bu kısımdan gerekli işaretlemeler yapılabilir.
4. [Tools]: Bu menü yazım denetimi, yazılan kodun denetimi, tarayıcı tercihleri, diğer programlarla bağlantı, HTML-Kit editörüne yeni kurulumlar ekleme gibi birçok işleve sahiptir.
5. [Tags]: Kullanıcı bu alan sayesinde istediği tag alanına erişmek, herhangi bir tag eklemek, bir dosyaya yada bir adrese bağlantı yapmak, resim eklemek, bağlantılı resim dosyasını düzenlemek, mevcut script dosyasına erişmek gibi birçok imkana sahip olmaktadır.
6. [Actions]: Renk, yazı, html kodu, tarih/ zaman, tablo, form, tag çeşitleri, unicode çeşitleri gibi her türlü işleme ilişkin araç çubuğuna erişmek için bu alan kullanılabilir.
7. [Workspace]: Herhangi bir dosya yüklemek için FTP server bağlantısının yapılabileceği kısımdır. Eğer bağlı bir FTP server yoksa öncelikle bir server ile bağlantı kurmayı sağlar. Ayrıca mevcut bilgisayardaki klasörlere de bağlantı sağlar.
8. [Window]: Bu menü, tasarım sırasında açık olan sayfaların görüntülenmesi, boyutlandırılması, ekrana yerleşimi gibi genel olarak sayfalamaya ilişkin amaçlar için kullanılabilir.
9. [Help]: Yazılım ile ilgili çevrimiçi ve lokal yardım seçeneklerini ekrana getirir.

HTLM-Kit Ortamında Sık Kullanılan HTLM Etiketleri ile Çalışmak

1. Sayfaya metin ekleme
   1. < body >< /body > etiketlerinin arasına doğrudan istenen metin yazılır.
   2. Yazılan metnin fontu, kalın ya da italik oluşu gibi özellikleri etkinleştirmek için “Editör” sayfasında Kısayol Menüsü’nden “Text” alanından istenilen değişiklikler yapılabilir.
   3. Yazılan metne biçimsel olarak istenilen değişikliği yapabilmek için öncelikle metin “Editör” ekranında seçilir ve büyük harf, kalın, italik, renkli olması için “Text” menüsünde gerekli alanlar işaretlenir. “Editör” ekranında yazılan değişikliklerin html kodları görüntülenir.
2. Sayfaya resim ekleme
   1. Mevcut diskimiz üzerinde yer alan kayıtlı olan bir resmin hazırlayacağımız tasarım sayfasına eklenmesi için kısayol menüsünde yer alan “Objects” menüsü içirişinde bulunan (insert image) butonu seçilir ve açılır ekranda resmin yeri gösterilerek sayfaya eklenir.
3. Sayfaya Web bağlantısı (link) ekleme
   1. HTML editörü ile çalışırken hazırlanmakta olan Web sayfasına bağlantı (link) eklenmesi işleminde öncelikle imleç sayfa üzerinde istenen yere konulmalıdır.
   2. Bağlantı eklemek için kısayol menüsünde yer alan “Objects” menüsü içerisinde bulunan (anchor) butonu seçilir ve tasarım sayfasına yazılan html kodlarının yanına bağlantı yapmak istediğimiz sitenin web adresi yazılıp, daha sonra adrese erişim için gerekli açıklama yazısı yapılmaktadır.

Web Sitelerini Yayımlama

CoffeeCup ile Web Sitesini İnternette Yayımlamak

1. Ana ekran üzerinde yer alan [File] menüsünü ve sırasıyla bu menü altında yer alan [Upload a Server], [FTP Account ] ve ardından [Add or Edit Servers…] komutları seçilir.
2. Ekrana “Server Configuration” başlığında bir pencere gelecektir. Bu pencere yardımı ile Yeni bir FTP sunucusu ekleme, daha önceden eklenmiş bir Web sunucusunun ayarlarını değiştirme ve daha önceden eklenmiş bir Web sunucusunu silme işlemleri yapılabilir.
3. “Server Configuration” penceresindeki [Add] (Ekle) düğmesine fare ile tıklanır.
4. Ekrana gelecek olan “Server Configuration – Add” penceresi (Resim 2.21) yardımı ile ilgili bilgiler girilerek [Ok] (Tamam) düğmesine basılarak işlem tamamlanır.
5. Tasarımın tamamlanmasının ardından 1.adımda verilen tüm menü ve komutlar seçilir. Son olarak ekrana gelecek olan kullanıcı tarafından eklenmiş Web sunucusu seçilerek hazırlanan sayfalar İnternet ortamına yüklenir.

HTLM-Kit ile Web Sitesini İnternette Yayımlamak

Hazırlanan sayfanın internet ortamında yayımlanması için internet hizmeti veren bir Web sunucusuna (Web server) üzerine aktarılması (Upload) gerekmektedir. Dosya aktarımı yapabilmek için öncelikle bu sunucuya FTP (File Transfer Protocol) hizmeti için bağlanılmalıdır. Yerel bilgisayarımız ile internet erişimimiz vasıtasıyla sunucuya bağlandıktan sonra bize tanımlanan kullanıcı adı ve şifremiz ile giriş yaparak aktif olan hedefteki sunucuya dosyalarımızı aktarabiliriz. HTML-Kit ile hazırladığımız web sayfalarını yayımcı sunucuya aktarmak için menü çubuğu içerisinde yer alan “Workspace” alt menüsü içerisinde bulunan “Upload” alanını tıklayarak dosya aktarım işlemini gerçekleştirebiliriz. İlk defa bir sunucuya dosya aktarımı yapacak isek FTP sunucuna ilişkin bilgileri HTML-Kit içerisine girmemiz gerekecektir. Bunun içinde yine “Workspace” menüsü içerisinde yer alan [Add Folder/FTP Server] alanına girip hedef sunucunun ip numarasını, bize tahsis edilen kullanıcı adı ve şifreyi ilgili alanlara girerek dosya aktarımını için sunucuya bağlantı yapabiliriz.

Temel amaç, kullanıcı adı ve parola gibi temel bilgilere sahip Web tasarımcıların, yerel bir bilgisayarda çalışmaya benzer olarak farklı bir bilgisayar/sunucu üzerindeki alanlara kolay bir biçimde dosya transferi yapabilmeleridir. HTML-Kit Web editörü, hazırlanan Web sayfalarının tanımlanan bir Web sunucusuna yüklenmesini sağlayan FTP aracına sahiptir. Bu şekliyle tasarımın sonunda veya herhangi bir ara değerlendirme/deneme aşamasında sayfalar İnternet üzerindeki sunucuya yüklenerek, kullanıcı gözüyle gerçek çalışma ortamında pilot denemesi yapılabilir.