BMT 202 Web Tasarımı 2016 2017 Bahar Dönemi Yük. Müh. Köksal GÜNDOĞDU 1
HTML Yük. Müh. Köksal GÜNDOĞDU 2
HTML Editörleri Web sayfası oluşturmak için not defteri gibi basit bir metin düzenleme yazılımı yeterlidir. Fakat çok gelişmiş editörler de mevcuttur. bunlar Dreamweaver, Expressıon Web gibi yazılımlardır. Bu Tür Yazılımlarla Html Kodlarını Kullanmadan, Grafiksel Olarak, Oldukça Kolay Ve Profesyonel Web Sayfaları Hazırlanabilir. Yük. Müh. Köksal GÜNDOĞDU 3
HTML Editörleri Html kodları bu yazılımlar tarafından otomatik olarak üretilirler. Amatör bir web tasarımcısı html bilmese de olur: dreamweaver/frontpage ile her işini görür. Bizim amacımız internet programcılığı, yani html kodlarının arasına program yazmak olduğu için html bilmek zorundayız. Yük. Müh. Köksal GÜNDOĞDU 4
HTML Tag Html tagları, html sayfalarını oluşturmak ve düzenlemek için kullanılırlar. <tag>...</tag> şeklinde kullanılırlar. Tagların arasında kalan metne tag içeriği denir. Tag ler büyük harfle veya küçük harfle yazılabilirler. XHTML standardı küçük harf kullanılmasını önerir. Yük. Müh. Köksal GÜNDOĞDU 5
HTML Temel Sayfa Her html belgesi belirli sayıda standart html tagları içermelidir. Bir html belgesinde olması gereken kısımlar şunlardır; Temel <Html> Metni Baş <Head> Metni Gövde <Body> Metni İyi bir html belgesinde bu üç kısımda olmalıdır. Yük. Müh. Köksal GÜNDOĞDU 6
HTML Temel Sayfa <html> <head> başlık kısmı <title>.</title> </head> <body> Gövde kısmı.. </body> </html> Yük. Müh. Köksal GÜNDOĞDU 7
HTML Temel Sayfa <html> </html> Tarayıcıya HTML dosyasının başladığını ve bittiğini belirtiyor. Diğer tüm kodlar bu iki etiket arasına yazılır. <head> </head> Etiketleri arasına sayfa hakkında bilgiler yazıyoruz. meta ve title gibi etiketler burada yeralıyor. Head kısmındaki bilgiler, belgenin içeriğini tanımlama ve ilave bilgiler eklemek için kullanılır. Yani sayfanın başlık kısmıdır. Yük. Müh. Köksal GÜNDOĞDU 8
HTML Temel Sayfa <body> </body> Arası ise sayfamızın gövde bölümü. Ekranda gösterilecek kısımlar bu tagler arasında yeralıyor. <title> </title> Title tagı sayfanın başlığını belirtmek için kullanılır. Yük. Müh. Köksal GÜNDOĞDU 9
Örnek Sayfa Yapısı Örnek 1 Yük. Müh. Köksal GÜNDOĞDU 10
Örnek Sayfa Yapısı Örnek 1 <html> <head> <title>bilgisayar Mühendisliği</title> </head> <body> İlk Web Sitemi Tasarlıyorum. </body> </html> Yük. Müh. Köksal GÜNDOĞDU 11
Head (Başlık) Bölümü Hazırlayacağımız sayfa ile ilgili bilgilerin bulunduğu sayfa başlığı (title), link özellikleri, siteyi tarayıcıya ve arama motorlarına tanıtmak amacıyla kullanılan Meta etiketleri bölümdür. Head tag ı içerisine title, meta gibi tanıtıcı tag lar ekleyebiliyoruz. Title Önceki slaytlarda bahsedildiği üzere sayfanın başlığını belirtmek için kullanılır.. Yük. Müh. Köksal GÜNDOĞDU 12
Head (Başlık) Bölümü Meta Meta tag ı birden çok paremetre ile kullanılabilir. Şimdi bunları inceleyelim. 1. Content-type: Güncel sayfanın içerik tipini ve karakter setini belirtir. Örnek: Sayfa içerik tipinin «text/htm»l ve karakter setinin «UTF-8» (çok dili destekliyor) olarak belirtilmesini gösterir. Türkçe için karakter seti: «ISO-8859-9» (tek dil) olmalıdır. Yük. Müh. Köksal GÜNDOĞDU 13
2. author: Head (Başlık) Bölümü Meta Güncel sayfanın yazarının ve/veya iletişim bilgilerinin belirtilmesini sağlar Örnek: Yük. Müh. Köksal GÜNDOĞDU 14
Head (Başlık) Bölümü Meta 3. description: Güncel sayfanın açıklamasının belirtilmesini sağlar Örnek: Yük. Müh. Köksal GÜNDOĞDU 15
4. keywords: Head (Başlık) Bölümü Meta Güncel sayfanın içeriğini tanımlayacak vigül ile ayrılmış anahtar kelimeleri belirtir. Örnek: Yük. Müh. Köksal GÜNDOĞDU 16
5. refresh: Head (Başlık) Bölümü Meta Belirtilen süre sonunda belirtilen URL adresinin yüklenmesini sağlar. URL adresi belirtmezsek güncel sayfa adresi tekrar yüklenir. Örnek: <meta http equiv= refresh content= 10; url=http://www.google.com /> Yük. Müh. Köksal GÜNDOĞDU 17
6. robots: Head (Başlık) Bölümü Meta Arama motorlarında sayfanın görüntülenip görüntülenmeyeceğini belirtmek için kullanılır. Bazen googlebot olarakta kullanılabilir Örnek: Yük. Müh. Köksal GÜNDOĞDU 18
6. robots: Noindex Head (Başlık) Bölümü Meta Basit bir şekilde açıklamak gerekirse sayfanın dizine eklenmesini önler. Örnek: <meta name= robots content= noindex /> <meta name= googlebot content= noindex /> şeklinde kullanılır. Yük. Müh. Köksal GÜNDOĞDU 19
6. robots: Nofollow Head (Başlık) Bölümü Meta Basit bir şekilde açıklamak, arama motoruna bu sayfadaki bağlantıları izlememesini söyler. Ama dikkat edilmedir ki bundan sayfadaki tüm bağlantılar eklenir. Sadece isteğe bağlı bir bağlantının izlenmemesini istiyorsak, sadece o bağlantıya uygulamamız gerekir. Örnek: <meta name= robots content= nofollow /> <a href= alanadi.com/asd.html rel= nofollow >Bağlantı</a> Yük. Müh. Köksal GÜNDOĞDU 20
Head (Başlık) Bölümü Örnek 2 1. content-type: text/html, türkçe olarak belirleyiniz. 2. 10 sn sonra istediğiniz bir sayfaya gitmesini sağlayınız. 3. Yazar ismi ekleyiniz. 4. Sayfanızın açıklamasını belirleyiniz. 5. Sayfanızın bulunabilmesi için 3 anahtar kelime giriniz. 6. Arama motorlarının sayfanızdaki bütün bağlantıları izlemesini sağlayınız. 7. Sayfanızın görüntüsü aşağıdaki gibi olmalıdır. Yük. Müh. Köksal GÜNDOĞDU 21
Head (Başlık) Bölümü Örnek 2 Yük. Müh. Köksal GÜNDOĞDU 22