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