PROGRAMLAMA - Web tasarımı dünyasına yeni girenler için... Black_Rose - 26 Arl Cum, 2008 2:56 am Mesaj konusu: Web tasarımı dünyasına yeni girenler için...Bu kısa makaleyi, web tasarım konusunda hiçbir şey bilmeyenler için hazırladım.
Web’in doğasını anlamak aslında gayet basittir. Web birbirine bağlı bilgisayarlardan oluşmuş devasa bir yapıdır. Her gün gezdiğimiz, pek çok amaca hizmet eden web siteleri işte bu devasa yapıdaki birbirine bağlı sunucu (server) bilgisayarlarda tutulurlar (host edilirler). Bizlerde web tarayıcılarımız (örneğin Internet Explorer, Netscape Navigator, Opera, vs) aracılığı ile bu siteleri izleriz. Kimi zaman bu sitelerden bilgi alırız, kimi zamanda bilgi girişi yaparak web sitelerine bilgiyi bizzat biz göndeririz. Neticede bizim monitörlerimizden gördüğümüz, web tasarım işlemlerinin nihai ürünü olan bir web sitesidir. Tıpkı şuanda izlediğiniz sayfa gibi!
Web tasarımı bir web sitesini oluşturmak için gereken işlemlerin tümünü kapsar. Bu aşamaları kısaca özetleyelim:
• Web site yapısının oluşturulması
• Uygun grafik ve arabirimin tasarlanması
• Gerekiyorsa programlama alt yapısının hazırlanması
• Veritabanının hazırlanması ve test edilmesi
• Web sitenin bir web sunucusunda konumlandırılması
Bu işlemler sonucu bir web sitesi hayata geçmektedir. Bu makalede ilk web sayfamızı oluşturacağız. Web tasarım için genellikle bir HTML editörü kullanılır ama aslında bu şart değildir. Ancak karmaşık ve çok büyük web sayfaları (örneğin 1000 satırlık kod içeren) hazırlayacaksanız, HTML editörleri, hata yapma ihtimalinizi azaltır ve işinizi bir hayli hızlandırır. Ama söylediğim gibi bir editör kullanmanız şart değil. Elimizde Notepad gibi bir metin editörünün bulunması bir web sayfası hazırlamak için, en azından şimdilik yeterlidir.
O zaman ilk sayfamızı hazırlamaya başlayalım!
Öncelikle metin editörümüzü açalım. Bunun için Start > All Programs > Accessories > Notepad (Başlat > Programlar > Donatılar > Notepad) tıklayarak metin editörümüzü açalım. Aşağıdaki satırları yazalım:
01: <HTML>
02: <HEAD>
03: <TITLE>İlk Web Sayfam</TITLE>
04: </HEAD>
05: <BODY>
06: Merhaba! Bu benim ilk web sayfam
07: </BODY>
08: </HTML>
File > Save komutu ile dosyamızı kaydedelim, fakat Save As Type açılır kutusundan All Files seçeneğini tercih edelim, File Name kutusuna da ilksayfa.htm yazalım ve save butonuna basalım. İlk web sayfamız tamamlandı bile! Dosyayı kaydettiğimiz klasörü açalım. Dosyamızı işaret eden simge Notepad simgesi değil, bir Explorer işareti olmalıdır. Çünkü o artık bir düz metin dosyası değil bir web sayfasıdır. Çift tıklayark ilk web sayfanızı görebilirsiniz
İlk bakışta biraz garip gelebilir. Evet, tarayıcımızda görülen bir web sayfası aslında en basit olarak bu şekildeki bir kod bloğundan oluşur. Bu kodlama diline HTML adı verilir. Yani Hyper Text Markup Language (Hiper metin işaretleme dili). Web sayfalarının görsel kısımları HTML ile hazırlanır. Web tasarımı öğrenmenin, ama gerçekten öğrenmenin, birinci şartı HTML’yi kavramaktır. HTML kodları açılış ve kapanış imlerinden oluşur. <HTML>…</HTML> gibi. Büyüktür ve küçüktür işaretleri arasında yer alan özellikler biçimlendirme işlevini görürler. Dikkat ederseniz ikinci etikette fazladan bir bölü (/) işareti vardır. Bu o etiketin kapatıldığı anlamına gelir. Her etiket mutlaka kapatılmalıdır.
Şimdi gelin birlikte bu kodları inceleyelim.
Birinci satır <HTML> etiketiyle başlıyor. Yani bu doküman bir HTML içeriğine sahiptir. İkinci satır da ise doküman başlık bilgilerini içeren <HEAD> etiketi mevcuttur. Ve bunun altında da sayfa başlığının yer aldığı <TITLE></TITLE> etiketlerini görüyoruz. Sayfa başlığı bu iki etiketin arasına yazılmıştır. Beşinci satırda ise sayfamızın gövdesini oluşturacak etiketi, yani <BODY> etiketini açıyoruz. İçeriğimiz altıncı satırda ve gövde etiketimiz sonraki satırda kapanıyor. Son satırda ise sayfamızın son etiketi olan </HTML> yer alıyor.
Dikkat ederseniz bütün etiketler birbirinin içinde açılıp kapanmıştır (nested tags):
<HTML><HEAD><TITLE></TITLE></HEAD><BODY></BODY></HTML>
Böylece ilk sayfa kodumuzu kısaca gözden geçirmiş olduk.
Bir sayfanın kodunu görmek için tarayıcınızda View > Source (Görünüm > Kaynak) komutunu kullanabilirsiniz.