Öğretim Görevlisi Emel ALTINTAŞ WEB TASARIM TEMELLERİ 1. Hafta Öğretim Görevlisi Emel ALTINTAŞ emelaltintas@kastamonu.edu.tr KASTAMONU 2017 T.C. Kastamonu ÜNİVERSİTESİ TAŞKÖPRÜ Meslek yüksekokulu bilgisayar programcılığı bölümü
Web tarayıcılar Web tarayıcısı, internet üzerindeki tüm bilgilere bakabilme ve bu bilgilerle etkileşim halinde olabilme olanağı veren bir uygulama programıdır. Tarayıcı kelimesinin İngilizce anlamı “browser” dır.
Web tasarımı Sayfa Hazırlarken Dikkat Etmemiz Gereken Noktalar Sayfa adında ya da sayfada yer alan herhangi bir resim ya da animasyon kaydedilirken asla Türkçe ve özel karakter kullanmayacağız Sabit diskimizde öncelikle WEB sayfamıza ait dokümanları kaydedeceğimiz bir dizin ve bu dizin içerisinde resimleri ya da animasyonlarımızı kaydedeceğimiz bir alt dizin oluşturacağız. Web sitemizin ana sayfasını mutlaka index.html olarak adlandıralım. Bazı sunucular varsayılan sayfanın default.html olarak adlandırılmasını ister.
Görsel tasarımı Web sayfamız bütünü itibariyle mükemmel bir grafik dengesine sahip olmalıdır. Yale Tip Fakültesi'nin ekrana bakan kişinin göz hareketlerini belirleyen cihazlarla donattığı bilgisayarların başına oturttuğu 12 bin kişiyle yaptığı araştırma sonucunda, sayfa ziyaretçisi önce büyük şekillere ve renklere odaklanıyor. Yazıyı soldan sağa doğru okumaya alışmış toplumlarda, görsel dikkatin ekranda da soldan sağa doğru gitmesi doğaldır. Bu nedenle de WEB sayfalarında da ekranın üst yarısı, görsel odak noktası olmalıdır.
HTML Komut Yapısı HTML sadece görsel düzenleme için kullanılır. Herhangi bir text editörle hazırlanabilir (Notepad, Word) Detaylı web sayfası tasarımı yapmak istersek de gelişmiş araçlar kullanabiliriz (Dreamweaver, Frontpage) Bir html dokümanı hazırlandıktan sonra kaydedilirken “dosya_adi.html” olarak kaydedilmelidir.
HTML Yazım kuralları Komutlar büyük ya da küçük harfle yazılabilir. Komutlar Türkçe karakterler içermez. Komutlar “<” ve “>” işaretleri arasında yazılır ve etiket (tag) adını alır.
Kullanim Bicimi <etiket_adi> Bir etiket <etiket_adi> seklinde baslar ve bazı etiketler </etiket_adi> seklinde biter. Etiketler iç içe yer alır ve en içteki etiketten başlatılarak kapatılır. Kod okunabilirliği için etiket bitmeden tekrar etiket açılacak olursa yeni açılan etiket biraz daha içeriden yazılır.
Kullanim Bicimi <html> <body> … <form> </body> </html>
Kullanim Bicimi Bir etiket parametreler kullanilarak bicimlendirilir ve bu parametrelere tirnak (“”) isaretleri arasinda deger atanir. Degerle parametre adi arasinda esittir (=) isareti kullanilir. <body bgcolor=“white”>
Bir web sayfasında standart olarak bulunması gereken kodlar <html> <head> <title> Sayfamızın Başlığı </title> </head> <body> Sayfamızın tüm içeriği; resim, yazı, video gibi </body> </html>
TEMEL ETIKETLER html body title head Web sayfasının başladığını ve bittiğini gösterir (ilk etikettir) Bütün html etiketleri içinde yer almalıdır. Bu etiketin hiçbir parametresi yoktur. body html belgesinin bütün içeriği burada yer alır. Metinler, resimler, listeler head Web sayfasının temel özellikleri (sayfa başlığı, yazı karakterler kümesi, link özellikleri) burada tanımlanır. Web sayfamızı tarayıcıya ve arama motorlarına tanıtacak <meta> etiketi <head> etiketi içinde yer alır. title head bolumu içinde yazılan title bölümüne sayfanın başlığı yazılır. (sayfanın başlığı, tarayıcının sol üst bölümünde bulunan başlık çubuğunda görüntülenir)
head head etiketinin yorum aralığında meta etiketi yer alır. Bu etiket siteyi tarayıcıya ve arama motorlarına tanıtır. meta etiketinde kullanılan parametrelerde birkaçı : <!-- Tasarımcının kimliği --> <meta name="author" content="EMEL ALTINTAŞ"> <!-- Sayfa tanıtımı --> <meta name="description" content="Bu web sayfasında Kastamonu Üniversitesi tanıtımı yapılacaktır"> <!-- Arama motorlarında öne çıkmak için, web sitemizin içeriğindeki kelimelerden bahsedeceğiz --> <meta name="keywords" content="Kastamonu Üniversitesi Taşköprü Meslek Yüksekokulu"> <!-- Yönlendirme yapmak istersek kullanacağımız parametre --> <meta http-equiv="refresh" content="5; URL=http://www.taskopru.kastamonu.edu.tr">
BODY <body bgcolor="#E6E6FA"> <h1>Hello World !</h1> </body>
Kelebeğin sırtının üzerindeki pullar müthiş bir düzenle çizilmiştir Kelebeğin sırtının üzerindeki pullar müthiş bir düzenle çizilmiştir. İki kanattaki desenler birbirinin tamamen aynısıdır. “Hayatın adaletsizliği“ diye bağırıyoruz. Yakalayıp incittiğimiz kelebekler sessizce şöyle diyor; “Doğa adil, adaletsiz olan insan.“ El Yapımı Sihirli Değnek