WTK204U-WEB YAYINCILIĞI ARAÇLARI
Ünite 3: Web Yayıncılığında HTML Editörleri
Giriş
Web siteleri insanların eğlence, eğitim, alışveriş, bankacılık gibi faaliyetlerine olanak veren ve herkes tarafından kullanılan yapılardır. Web siteleri farklı amaçlarla kullanılabileceği gibi geliştirilmesi aşamasında da statik ve dinamik web siteleri diye ikiye ayrılmaktadır. Statik web siteleri isminden de anlaşılabileceği gibi durağan, güncellemesi az olan olarak tanımlanabilir. Her kullanıcı için tarayıcıda aynı görünüme sahiptir ve kullanıcı ile web sayfası arasında etkileşim basit form yapıları dışında yok denebilir. Bu tür web siteleri genellikle HTML ve CSS ile oluşturulur. Dinamik web siteleri kullanıcıların web sayfasındaki bilgilerle etkileşim kurmasına olanak sağlayan sitelerdir. HTML ve CSS kodlarının yanı sıra sunucu taraflı kodlama dillerinden olan Javascript, PHP veya ASP gibi diller kullanılır. Bu tür web sitelerinde kullanıcı yönetim panelleri olur ve kullanıcılar kodlamaya ilişkin hiçbir bilgileri olmadan web sayfalarında güncelleme yapabilirler.
HTML ve HTML Etiketleri
Hypertext Markup Language kelimelerinin kısaltması olarak kullanılan HTML, dilimize Hiper Metin İşaretleme Dili olarak çevrilmiştir. Web sayfalarını oluşturmak için kullanılan standart bir metin işaretleme dilidir. HTML programlama dili değildir. HTML kodlarıyla yazılan bir içeriği ancak bu dili yorumlayan programlar aracılığıyla görüntülemek/çalıştırmak mümkündür. HTML kodlarını görüntülemek için web tarayıcıları kullanılmaktadır. HTML ile yazı, görüntü, video gibi içerikleri sayfalara eklemek ve eklenilen sayfaları da birbirlerine bağlamak mümkündür. Bu şekilde oluşturulan sayfalar web sayfalarını oluşturmaktadır.
HTML Etiketleri
HTML ile bir web sayfası oluşturulurken HTML kod yapısı aşağıda görüldüğü gibi olmaktadır.
<html>
<head>
Yukarıda görüldüğü gibi etiketler küçük “<” ve büyük “>” işaretlerinin arasına yazılmaktadır. Açılan her etiketin bölüm sonunda kapatılması gerekmektedir. Yani “<…>” arasında yazılan etiketlerin “</…>” şeklinde kapatılması gerekmektedir. Aksi takdirde yazılan kodlar web tarayıcıda derlenemez. Basit bir web sayfasında ilk etiket <html>etiketidir. Sonrasında web sayfasının bilgilerinin girilebileceği kısım <head> etiketleri arasında bulunmalıdır. Bu bölümde sayfanın başlık bilgisine, anahtar kelimelere, yazar bilgisine yer verilebilir. <body> etiketiyle başlayan bölüm kullanıcıların web sayfalarını görebildiği bölümdür.
HTML Editörleri
HTML editörleri, web sayfalarının tasarımı yapılırken kullanılan programlardır. HTML kodlarının oluşturulmasında, düzenlenmesinde ve hataların kontrolünde tasarımcılara kolaylık sağlayan araçlardır.
HTML editörlerinin en önemli özelliği kodların yazılmasına ya da düzenlenmesine olanak sağlaması değildir. Çünkü bu işlemleri Not Defteri’nde veya Apple Pages’te de yapmak mümkündür. Ancak hataların gösterilmesi ve bu hataların düzeltilmesi için HTML editörleri önemli bir rol oynamaktadır. Bunun yanı sıra bazı HTML editörleri menülerle, komutlarla veya fare yardımıyla tasarıma olanak sağlamakta ve bazı durumlarda kullanıcıların HTML kodu yazmasına gerek kalmamaktadır. Yazılan kodun aynı anda web sayfasında nasıl göründüğünün görüntülenebilmesi de önemli bir özelliktir. Gelişmiş HTML editörlerinin bir diğer özelliği de etiket tamamlamadır. Bazı HTML editörleri şunlardır:
• Atom HTML Editörü • Notepad++ • Visual Studio Code • Sublime Text • Bluefish Editör • Google Web Designer
Tasarım Editörleri ile Web Tasarımı
Notepad ++ ile Web Tasarımı
Notepad++, Windows işletim sistemli cihazlarda kullanılan bir uygulamadır. Arayüzü Not Defteri’nde olduğu gibi basittir ve Not Defteri’nde bulunmayan önemli işlevleri bulunmaktadır. C++ dili ile geliştirildiği için isminin sonunda ++ işaretleri bulunmaktadır. Notepad++ ile web tasarımı yapabilmek için HTML diline hâkim olmak gerekmektedir. Çünkü tasarımcılar bütün kodları adım adım kendileri yazmaktadır. Bazı editörlerde HTML’nin html, head, body gibi etiketleri sabit gelirken Notepad++’ta böyle bir durum söz konusu değildir. Bir web sayfasında bulunması gereken kodlar başlangıçtan itibaren adım adım yazılarak yapı oluşturulur.
Atom HTML Editörü ile Web Tasarımı
“Add folders” bağlantısına tıklandığında bilgisayarda istenilen konumda bir klasör oluşturulması ve bu klasörün oluşturulacak olan web sitesi projesi için kullanılması sağlanmaktadır. Atom’da HTML dosyası oluşturulduğunda kodların bulunmadığı boş bir yapı oluşmaktadır. “<” veya “>” işaretlerini kullanmadan html yazıldığında otomatik tamamlama için öneriler yazılan satırın altında mavi kutucuk ile belirmektedir. Burada Tab tuşuna basarak ya da fare ile öneriye çift tıklayarak Şekil 3.17’de alt kısımda görüldüğü gibi temel etiketlerin oluşturulması sağlanmış olur. Notepad++’ta yapılan web sayfaları burada da benzer şekilde yapılabilmektedir.
Web Sitelerini Yayınlama
Notepadd++’ta Hazırlanan Web Sitesini Yayınlama
Notepad++’ta hazırlanan web sitesini sunucuya aktarmak için program üzerinde FTP eklentisi hazır olarak gelmemektedir. FTP eklentisinin Notepad++’a eklenmesi gerekmektedir. Bunun için Notepad++ programı açıkken “Eklentiler” menüsüne gelinir ve burada “Eklentiler Yöneticisi”ne tıklanır. Notepad++’ta eklenti yöneticisine
tıklandığında açılan pencerede “Ara” bölümüne “ftp” kelimesi yazılıp arandığında Notepad++’a uygun NppFTP eklentisi çıkmaktadır. Yanında bulunan kutucuk işaretlendiğinde sağ üstte bulunan “Yükle” butonu aktif olmaktadır. Bu butona tıklanır. Tıklandığında ekrana çıkan uyarı “Evet” butonuna tıklanarak geçilir.
Şekil 3.24’te görüldüğü gibi NppFTP eklentisi yüklenmiştir. Eklentiler ®NppFTP®Show NppFTP Window adımları izlendiğinde kodlama ekranının sağ tarafından FTP bağlantı ekranı açılacaktır. Bu ekranda ayarlar bağlantısına (Çark) tıklandığında açılan menüden “Profile Settings”e tıklanır.
Profile Settings bağlantısına tıklandığında Şekil 3.25’te görülen ilk ekran açılacaktır. Burada “Add new” butonuna tıklanır. Profil ismi girilir ve Ok butonu ile bu ekran kapatılır. Bu bölümde AOF_Web_Yayinciligi isminde bir profil oluşturulmuştur. Profil oluşturulduğunda sağ bölümde yer alan bilgi girişi bölümleri aktif olacaktır. Aktif olan bölümde “Hostname” bölümüne web sitesinin alan adı (örneğin aofwebyayinciligi. com) girilmelidir. Ardından alt bölümde yer alan Port bilgisi değiştirilmemelidir. FTP için gerekli port numarası 21’dir. Port bilgisayarların birbirleriyle iletişim kurmalarını sağlayan bir tür kapıdır. Veri transferi için açık olması gereken kapı 21 no.lu kapıdır denebilir. “Username” (kullanıcı adı) ve “Password” (Parola) bilgileri ilgili alanlara girilmelidir. Bu bilgiler sunucu hizmetinin alındığı işletmeden alınması gerekmektedir. Bu bilgilerin girilmesinden sonra üst bölümde yer alan “Transfers” menüsüne tıklanır (Şekil 3.26).
Transfers menüsü açıldığında Connection Mode (Bağlantı modu) bölümünün pasif olduğu ve Transfer Mode (Transfer Modu) kısmında da Binary seçeneğinin seçili olduğu görülmektedir. Bu seçimleri Active ve ASCII şeklinde işaretlemek gerekmektedir. Bu ayarlar yapıldıktan sonra “Close” butonuna tıklanır. Bu işlemlerden sonra sunucuya bağlanabilmek için Notepad++’ta bulunan (Dis)connect bağlantısına tıklanır (Şekil 3.27).
(Dis)connect bağlantısına tıklandığında bir önceki aşamada oluşturulan profil görüntülenir. Bu profil seçildiğinde sunucuya bağlanma aşaması başlar. Bağlantı sağlandığında sağdaki ekranda görüldüğü gibi NppFTP panelinde sunucudaki klasörler görüntülenmektedir. Bu bölüme üzerinde çalışılan web sayfasının sunucuda hangi klasöre gönderileceği seçilmelidir. Klasör seçimi yapıldıktan sonra NppFTP panelinde yer alan “Upload file” bağlantısına tıklanır (Şekil 3.28).
Upload file bağlantısına tıklandığında alt bölümde üzerinde çalışılan web sayfasının sunucuya aktarılması süreci görülmektedir. Bu aşamada dersler.html dosyası sunucuya yüklenmektedir. Yükleme işlemi tamamlandığında sunucuda bu belge sağdaki ekranda olduğu gibi görülebilecektir. Bu şekilde web sitesinde yer alan bütün içerikler (web sayfaları, görseller, videolar vb.) sunucuya aktarılabilir.
Atom’da Hazırlanan Web Sitesini Yayınlama
Notepad++’a benzer şekilde Atom HTML editöründe de FTP eklentisi veya özelliği programda hazır şekilde bulunmamaktadır. FTP eklentisini veya diğer eklentileri Atom’a ekleyebilmek için Atom programında “Install a Package” bağlantısına tıklanır (Şekil 3.29).
“Install a Package” bağlantısına tıklandığında menü açılır. Burada “Open Installer” butonuna tıklanır. Bu butona tıklandığında hemen sol tarafında kurulum yapılabilecek eklentiler görülecektir. Arama kutucuğuna ftp kelimesi yazıldığında birden çok ftp eklentisinin olduğu görülecektir. Burada seçim yapılırken çok indirilen ve çok değerlendirilen FTP eklentisinin işlevsel olacağı düşüncesi ile remote-ftp eklentisi seçilir ve “Install” butonuna tıklanır. Kurulum tamamlandığında Atom’da menü çubuğunda bulunan Packages®Remote FTP®Toggle adımları izlenir (Şekil 3.30).
Toggle bağlantısına tıklandığında üzerinde çalışılan proje dosyalarına erişilen Project alanının yanına Remote isminde bir sekme gelecektir. Bu sekmeye tıklandığında Connect, Edit Configuration, Edit Ignore Configuration ve Close Panel butonları görünecektir. Bu butonlardan Edit Configuration butonuna tıklanır. Açılan pencerede Notepad++’ta olduğu gibi alan adının, kullanıcı adının ve parolanın girilebileceği basit bir ekran çıkmamaktadır. Web sayfası tasarlarken kullanılan pencere benzeri boş bir sayfa açılmaktadır (Şekil 3.31).
.ftpconfig dosyasına yazılması gereken kodlar, Remote FTP eklentisinin eklendiği ayarlar ekranında mevcuttur. Tek yapmak gereken ayarlar (Settings) sekmesine geçerek sayfa aşağı kaydırılır ve alt kısımda bulunan “FTP & FTPS Configuration Options” bölümünde yer alan kodlar kopyalanarak .ftpconfig sekmesine yapıştırılması gerekmektedir. Bu kodlar örnek yapıdadır. Tasarlanan web sitesinin bilgileri burada ilgili alanlara (host, user, pass) bilgiler girilir ve belge kaydedilir. Sol panelde bulunan “Connect” butonuna tıklanır (Şekil 3.32).
“Connect” butonuna tıklandığında sunucuya bağlanma gerçekleşir ve Remote sekmesindeyken sunucudaki klasörler görünür. Üzerinde çalışılan projenin sekmesine tıklandığında dosyaları görüntülenebilir. Bu dosyaları sunucuya göndermek için dosya üzerinde sağ tıklanır ve “Upload” bağlantısına tıklanır veya üzerinde çalışılan sayfadayken Win+Shift+U tuş bileşenlerine basılır. Bu şekilde dosyalar sunucuya iletişmiş olur.