BMT 202 Web Tasarımı Bahar Dönemi. Yük. Müh. Köksal GÜNDOĞDU 1

Ebat: px

Şu sayfadan göstermeyi başlat:

Download "BMT 202 Web Tasarımı Bahar Dönemi. Yük. Müh. Köksal GÜNDOĞDU 1"

Altan Saylan
6 yıl önce
İzleme sayısı:

1 BMT 202 Web Tasarımı Bahar Dönemi Yük. Müh. Köksal GÜNDOĞDU 1

2 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.

3 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

4 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

5 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

6 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

7 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

8 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

9 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

10 Örnek Sayfa Yapısı Örnek 1 Yük. Müh. Köksal GÜNDOĞDU 10

11 Ö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

12 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

13 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 » (tek dil) olmalıdır. Yük. Müh. Köksal GÜNDOĞDU 13

14 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

15 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

16 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

17 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= /> Yük. Müh. Köksal GÜNDOĞDU 17

18 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

19 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

20 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.

21 Head (Başlık) Bölümü Örnek 2 1. content-type: text/html, türkçe olarak belirleyiniz 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

22 Head (Başlık) Bölümü Örnek 2 Yük. Müh. Köksal GÜNDOĞDU 22

Benzer belgeler

Arama Sonuçlarında Üst Sıralarda Olmak. Temel SEO Çalışması

Arama Sonuçlarında Üst Sıralarda Olmak Temel SEO Çalışması 2 SEO (Search engine optimization), kısaltmasıdır. Arama motorları SEO işlemleri ile web sitelerini daha kolay bir şekilde taraması için yapılan