bölüm 7 - WordPress.com
Transkript
bölüm 7 - WordPress.com
HTML Editörleri-ODTÜ-2000 BÖLÜM 7 HTML Editörleri 19. Giriş HTML, bir dokümanın gözgezdiricilerin düzgün bir biçimde görüntüleyebilmesi için kodlanmasında kullanılır. Etkileşimli çoklu ortam Internet uygulamalarının yaratılabilmesi için basit ama güçlü bir araçtır. Kullanımı için basit bir metin veya kelime işlemci, ve bir kaç basit komut yeterlidir. HTML, ilk olarak CERN tarafından geliştirilmiş ve daha sonra Avrupa Parçacık Fiziği Laboratuarında (the European Particle Physics Laboratory) geliştirilmiştir. Buguün bir kaç HTML sürümü (1.0 – 3.0) bulunmaktadır. Farklı sürümdeki gözgezdiriciler, farklı HTML sürümlerini desteklemektedir. Bazı gözgezdiriciler ise, örneğin Netscape, sadece endi gözgezdiricisinde desteklediği kendine ait bazı özellikler eklemektedir. Daha detaylı bilgi WWW Konsorsiyumun sayfasından edinilebilir. WWW sayfanızı yeni hazırlamaya başlıyorsanız, bu işlem için izlenecek bir kaç yol vardır. Her yöntemin kendine göre avantajları vardır, bu nedenle kendi ihtiyaçlarınıza en iyi yanıt veren yolu seçmeniz gerekmektedir (Tablo 7.1). Tablo 7.1 HTML Editör Türleri Araç Metin Editörleri (Edit, Notepad, Wordpad, pico, vi) Belirteçe dayalı HTML editörleri (Arachnophilia, HTML Assistant Pro, HTML EditPro) “Ne ekersen onu biçersin” (WYSIWYG-what you see is what you get) HTML editörleri (AOLPress, Microsoft FrontPage, Netscape Navigator Gold) Avantajlar • HTML dosyası üzerinde tam kontrol sağlanır HTML Çeviricileri (Kelime İşlemciler) (Corel WordPerfect 7 Suite, Microsoft Office 97) • Kesme, yapıştırma ve yazma konusunda çok zaman kazandırır 86 • Zaman kazandırır • Çok detaylı HTML bilgisi gerektirmez • Çok zaman kazandırır • HTML hakkında hiç bilgi gerektirmez Dezavantajlar • Detaylı HTML bilgisi gerektirir • Zaman gerektirir • HTML kontrolünü azaltır • Bazı konularda limitleri vardır • Gerçekte her ektiğinizi biçemeyebilirsiniz • Çok fazla konuda limitleri vardır • Çevirilen dosyalar her zaman düzeltme gerektirir • Farklı dosya tipleri için farklı çeviriciler gerekir Bilgisayar ve Öğretim Teknolojileri Eğitimi Bölümü HTML Editörleri-ODTÜ-2000 19.1 Grafik Tabanlı Editörler (Graphical Editors) Bir WWW sayfası hazırlamanın olası en kolay yolu bir grafik editör kullanmaktır. Grafik tabanlı editör olarak Microsoft Front Page ve Sausage Software's Hot Dog gibi pek çok editör bulunmaktadır. Bu editörleri kullanmak başta çok kolay olmasına rağmen, ilerleyen sürede bazı sınırlamalarla karşılaşabilirsiniz. Hazırladığınız dokümanlar üzerinde daha fazla kontrolünüz olmasını istiyorsanız, grafik tabanlı editörleri kullanmanız tavsiye edilmez. 19.2 Grafik Tabanlı Olmayan Editörler (Non-Graphical Editors) Grafik tabanlı editörlerin ne ekersen onu biçersin özelliğini sunmayan (WYSIWYG), ancak ortak bazı özellikleri bulunduran editörler bulunmaktadır. Örneğin, sayfanın kodunda değişiklik yapmadan sayfayı düzenleyememenize rağmen, bu editörlerin büyük bir bölümü değiştirdiğiniz kodu anında görüntülemek için ön izleme olanağına sahiptir. Grafik tabanlı olmayan editörler HTML kodu üzerinde tam kontrol sağlanabilmesi ve yeni başlayan kullanıcılar tarafından kullanılabilmesi nedeni ile olası en uyumlu editörlerdir. Bu editörler genellikle bir tıklama ile koda belirteç eklemeyi sağlayan tuşlar içerirler. Bir çoğu çerçeve sihirbazı, WWW sunucu yönetimi gibi özelliklerde içermektedir. Bu uyumlu kullanımları nedeni ile pek çok kullanıcı tarafından tercih edilmektedirler. 19.3 Metin Editörleri (Text-Based Editors) Grafik tabanlı olmayan editörler ile metin editörleri arasında çok fazla fark olmamasına rağmen metin tabanlı editörler hala kullanılmaktadır. Metin tabanlı editörler kod üzerinde tamamen kontrol sağlamak isteyen, yardımcı özelliklere ihtiyaç duymayan ileri düzeyde bilgili kullanıcılar tarafından tercih edilir. Windows ile gelen “Notepad” gibi gerçek metin editörleri HTML yazarları tarafından artık pek kullanılmamaktadır. Ancak, kodu tamamen kendi oluşturmak isteyen kullanıcılar için bir yöntem olabilir. 20. Mevcut Editörlerden Örnekler 20.1 Bir Grafik Tabanlı Editör Örneği - Claris Home Page 3.0 Home Page 3.0 kullanarak, HTML bilmenize gerek olmadan, çok kısa bir sürede zengin içerikli sayfalar hazırlayıp tasarlayabilirsiniz. Home Page 3.0 aradığınız araçları ve özellikleri, kolay kullanım avantajı ile birlikte sunar. Başlıca Yararlar Kullanım Kolaylığı: - Yaratıcı Arayüz: WWW sayfalarını alışık olunan araç ve işlemler ile oluşturma ve tasarlama. Sayfa üzerinde yer alan metin, grafik ve bağları kolayca yerleştirme. Bilgisayar ve Öğretim Teknolojileri Eğitimi Bölümü (Özden, Yiğit, Çengel, Allı) 87 HTML Editörleri-ODTÜ-2000 - Yardımcılar: WWW sayfalarını hazırlarken veritabanı bağlarından çerçeve oluşturmaya kadar, işlemleri adım adım yapmaya olanak sağlayan yardımcılar ile hız kazanma. - Otomatik Programlama: Home Page ile arka planda yapılması gereken tüm karışık işlemleri yaparken, sayfa düzenlemesi için kodun görüntülenebilmesi. - Varolan Resim ve Şablonlar: Yaklaşık 2500 adet resim ve 45 şablon içerisinden istenilen kadar kullanarak hızlı bir biçimde etkili sayfalar oluşturma. Etkili Araçlar: - FileMaker Pro 4.0 veritabanına erişim sağlayan interaktif formlar oluşturmak için FileMaker Bağlantı Asistanını kullanma. - Form Oluşturma Elemanları: Önceden tanımlanmış form elemanlarını (metin kutuları, aşağı doğru açılan menüler, radyo tuşları, şifre kutuları, Gönder ve Temizle tuşları) kullanarak kolayca etkileşimli form oluşturma. - Çerçeveler: Bir WWW sayfasını istenilen boyutta, birbirinden bağımsız hareket eden pencerelere bölme. Çerçeve boyutlarını ve yerlerini fare ile istenilen şekilde ayarlarken ön izleme yapabilme olanağı. 88 Bilgisayar ve Öğretim Teknolojileri Eğitimi Bölümü HTML Editörleri-ODTÜ-2000 - Tablolar: Fare ile bir kaç tıklama sonucunda birçok satır ve sütundan oluşan, zemin deseni veya rengi kullanılabilen tablolar hazırlama. Tablolar Home Page programına bilgisi girildiği zaman otomatik olarak hazırlanır. - Bul ve Değiştir: Herhangi bir kelimeyi veya metin bloğunu bulmak ve değiştirmek için tüm sitenin hızlı bir biçimde taranması. - Kütüphaneler: Sıkça kullanılan resim, film, animasyon, metin ve HTML kodlarını, kolay kullanım için saklama. Gelişmiş Özellikler: - Apletler ve Programlar: Java apletleri ve Java programları kullanarak etkileşimli sayfalar tasarlama. - Multimedya Desteği: İletişimi artırmak için multimedya desteği sağlanması (QuickTime filmleri vb.). - Resim Haritaları: Sunucu veya İstemci için kolayca resim haritası oluşturma, resim üzerinde farklı alanların diğer resim veya dokümanlara bağlanması. - Doküman İstatistiği: WWW sayfasının tamamı veya bir bölümü için tahmini yüklenme süresini belirleme. - Renkli kodlanmış HTML: Başlıkları, bağları ve programları belirginleştirmek ve kolay düzenleme için renklendirilmiş belirteç özelliğinin kullanımı. - Birden fazla Yazı Tipi Desteği: WWW sayfa tasarımını geliştirmek için birden fazla yazı tipi kullanılması desteği. - Metin Yerleştirme: Tablo ve resimlerin çevresine otomatik metin yerleştirme. Bilgisayar ve Öğretim Teknolojileri Eğitimi Bölümü (Özden, Yiğit, Çengel, Allı) 89 HTML Editörleri-ODTÜ-2000 Otomatik Özellikler: - Yaratıcı Site Yönetimi: Sitede yer alan tüm sayfa ve elemanların dökümünü almak için Site Editörü kullanma. - Bağ Kontrolü: Sitede yer alan bağların geçerliliğinin kontrolü ve düzeltilmesi. - Sitenin Yüklenmesi: Sitenin FTP kullanmadan uzaktaki bir WWW sunucusuna yüklenmesi. Dosyaların otomatik taranması, resim, animasyon ve diğer içeriğin doğru yerleştirilmesini sağlar. - Otomatik Bağlar: Sayfa içerisinde bağların otomatik olarak kopyalanması, oluşturulması ve taşınması işlemleri. - Otomatik Grafik Çevirimi: Diğer uygulamalardan kopyalanıp getirilen PIC ve BMP tipindeki resim dosyalarını otomatik olarak GIF formatına çevirme. - Zemin Ön İzleme: görüntüleme. - Yazım Kontrolü: Yanlış yazılmış kelimelerin otomatik olarak kontrolü. 90 Zeminde yer alan resimleri Home Page içerisinde Bilgisayar ve Öğretim Teknolojileri Eğitimi Bölümü HTML Editörleri-ODTÜ-2000 Sistem Gereksinimleri: Windows 95/NT için 486 veya daha iyi işlemcili bir Windows uyumlu bilgisayar Windows 95 veya NT 4.0 (veya yüksek versiyonlar) 12 MB hafıza (NT için 16 MB) CD ROM sürücü Mac OS için 68020 veya daha iyi işlemcili bir Mac OS uyumlu bilgisayar 7.1 veya daha yüksek sistem 12 MB hafıza CD ROM sürücü 20.2 Bir Grafik Olmayan Editör Örneği - Simple HTML Editor (SHE) "SHE, tüm Mac tabanlı HTML editörlerinin büyükannesi." Editör Hakkında: Simple HTML Editor (SHE) HTML dokümanlarını basit bir biçimde hazırlamak için kullanılan bir editördür. HyperCard stack (hiperkart yığıtı) biçiminde olduğu için, bir Mac bilgisayar kadar, HyperCard veya HyperCard katmanı gerektirir. Bilgisayar ve Öğretim Teknolojileri Eğitimi Bölümü (Özden, Yiğit, Çengel, Allı) 91 HTML Editörleri-ODTÜ-2000 Özellikler: SHE supports: • • • • • • • • • • • • • • Geliştirilmiş-Netscape HTML Özel karakterlerin hedefle ve tıkla yolu ile eklenmesi Akıllı form oluşturma Önizleme yeteneği (MacWeb veya Netscape gözgezdirici gerektirmektedir) URL açma yeteneği (MacWeb gerektirmektedir) Aktif hiperbağlar Üst ve alt başlıklar Sık kullanılan komutlar için kullanıcı paleti Birçok komut anahtar opsiyonu Bul, Tekrar Bul ve Bul/Değiştir fonksiyonarı Yeni bir doküman oluştururken varolan HTML şablonu kullanma Yardım Balonları(TM) Basit kullanıcı arayüzü Sürükle ve bırak yöntemi ile metin dosyalarının açılmasını sağlayan bir Apple Programı (SHE droplet - AppleScript uzantıları gerektirir) Editör Kullanımı Dosyanızı öncelikle HyperCard dışında bir editör ile hazırlamak ve daha sonra dosyayı SHE kullanarak açmak ve işaretleme yapmak isteyebilirsiniz. Bu işlemi dosyanızı oluşturmak için kullandığınız editörün yazım kontrolü ve geniş yazım alanı gibi özellikleri olduğu durumlarda tavsiye edilir. SHE editöründe bu gibi özellikler şu anda bulunmamaktadır. Ayrıca bu metod, metnin içeriği hakkında daha fazla, biçimi hakkında daha az düşünmenizi sağlar. Böylece daha etkili dokümanlar oluşturulur. İkinci olarak, eğer dokümanı SHE dışında bir editör kullanarak oluşturmadı iseniz, yeni bir doküman oluşturmak için “New…” komutunu, önceden oluşturduğunuz dokümanı SHE editöründe açmak için “Open…” komutunu kullanın. Üçüncü adımda, metninizi işaretlendirin. Çoğu durumda işaretlemek istenen metin seçilir ve HTML menüsünden bir işaretleme opsiyonu seçilir. SHE editörü, sık kullanılan işaretleme opsiyonlarına kolay ulaşım sağlayan bir kullanıcı paleti içermektedir. Palet üzerinde opsiyonların grafik gösterimleri bulunur. 92 Bilgisayar ve Öğretim Teknolojileri Eğitimi Bölümü HTML Editörleri-ODTÜ-2000 Dördüncü adım olarak, dokümanınızı “Save…” komutunu kullanarak kaydediniz. Bu noktada “Open Local…” komutunu kullanarak Mac için Mosaic gözgezdiricisinde önizleme yapabilirsiniz. Son olarak, SHE editörünün büyük bir bölümü yardım balonları içermektedir. SHE Sisteminin Bileşenleri: • • • • • • • Temel opsiyonları içeren menü çubuğu: File, Edit, HTML, Styles, Lists Kullanıcı Mesaj Alanı HTML dokümanının başlığı Metin Alanı HTML Gözgezdirici Alanı Dokümanın adı Sık kullanılan komutlar için tuşlar Bilinen Eksikler: • • • • Editör “selection” isimli bir fonksiyon kullandığı için, Undo (Geri Al) fonksiyonu her zaman doğru çalışmamaktadır. Editör hala “ne ekersen onu biçersin” biçiminde değildir. Editör, 30000 karakterden fazla karakter içeren dosyaları açamamaktadır. Bu, HyperCard alanlarının limitidir. HyperCard Audio Home Stack kullanıcılarının, Edit menülerini biçimlendirmeleri gerekir. Sonuç: • • • Kullanım kolaylığı Tüm HTML özelliklerini içermiyor HTML+ için hazır Bilgisayar ve Öğretim Teknolojileri Eğitimi Bölümü (Özden, Yiğit, Çengel, Allı) 93