Sunum yükleniyor. Lütfen bekleyiniz

Sunum yükleniyor. Lütfen bekleyiniz

İnternet Programcılığı I A-Şubesi 2-1.Ders 02.10.06 Öğr.Gör.Kenan KILIÇASLAN Web:

Benzer bir sunumlar


... konulu sunumlar: "İnternet Programcılığı I A-Şubesi 2-1.Ders 02.10.06 Öğr.Gör.Kenan KILIÇASLAN Web:"— Sunum transkripti:

1 İnternet Programcılığı I A-Şubesi 2-1.Ders Öğr.Gör.Kenan KILIÇASLAN Web:

2 Dosya isimleri Web sayfasına konan dosya isimleri,  Asla büyük harf olmamalı  Asla boşluk karakteri içermemeli  Türkçe karakter olmamalı  İsterseniz boşluk yerine eksi (-) veya alt çizgi( _ ) koyabilirsiniz.  Bu kural hem html sayfasının adı için geçerli, hem de resim gibi dosyalar için geçerli.  Aksi takdirde web sayfanız çalışmayacaktır. (Local bilgisayarınızda çalışabilir.)

3 Dosya isimleri  Dosyanın uzantısı ya tümü.htm yada.html olmalı  Aynı site içinde farklı uzantılar kullanılmamalı

4 Ana Sayfa yazıldığında hangi dosya açılır veya çağrılır. Dosya adı belirtilmediği zaman sunucu index.htm, index.html, index.php, index.asp, Default.htm vs gibi dosyaları arar. Bulamaz ise sayfa bulunamadı der.

5 Ana Sayfa Bu nedenle her sitede, sitenin kök’ünde index.htm veya index.html gibi dosya olmalıdır. Dosya aynı zamanda, ana sayfadır.

6 Etiketler HTML etiketleri hakkında genel ve özel kurallar vardır. İlk kural, tüm standart etiketlerin bir büyüktür, bir küçüktür işaretinin arasına yazıldığıdır. 

7 Etiketler Sonraki kural biraz daha az tutarlı. Bu, etiketlerin bir açma bir kapama bileşeninin olduğunu belirtir. Kapama bileşeni, etiketi çevreleyen aynı küçüktür “ ” sembollerini içerir, ancak etiketin kapama olduğunu belirtmek için etiketten önce bölü işareti (/) ekler. ,

8 Etiketler Bu, standart etiketlerin çoğunda, açtığınız şeyi kodunuzda uygun yerde kapamanız gerektiği anlamına gelir. Bu kurala uygun şekilde davranmayan çok sayıda etiketlerin varlığı bu kuralı belirsiz hale getirmiştir. … kapatılırken, etiketi hiçbir zaman kapatılmaz yani yanlıştır.

9 Nitelikler Nitelikler (attributes), bir etiketin eylemini değiştirir. Pek çok etiketin bu niteliklere ihtiyacı yoktur. Nitelikler sembolleri arasına adından sonra gelir.   Burada src niteliktir ve resimin kaynağını belirtir.  Height ve width niteliktir. Resmin ekrandaki yüksekliğidir.

10 Örnek ( a.html adıyla kaydedin ) Bu bir HTML örneğidir Bu yazıyı ortalanmış göreceksiniz Bu yazıyı sağa dayalı göreceksiniz b sayfasına bağlanmak için buraya tıklayınız.

11 Örnek ( b.html adıyla kaydedin ) Bu bir HTML örneğidir Bu yazıyı ortalanmış göreceksiniz Bu yazıyı sağa dayalı göreceksiniz. Buraya Tıkla

12 Etiket açma kapama için doğru şekil Etiket açma kapama için yanlış şekil

13 Baş kısmının yapısı (HEAD) Web sayfasının koduna baktığınızda etiketinden hemen sonra etiketi başlar ve birkaç satır sonra ‘e rastlarsınız. Bu dökümanın baş kısmıdır.

14 Baş kısmında neler vardır. Sayfanın başlığı: açma etiketi ve Kapama etiketi arasına yazılan yazı sayfanın başlığıdır ve tarayıcının başlığında görülür Scriptler: Bir javascript gibi scriptler sayfanın baş kısmına gömülür. Buna ileride değineceğiz.

15 Baş kısmında neler vardır. Stil: Stiller’de (CSS) sayfanın baş kısmına gömülebir. Bunada ileride değineceğiz. Meta Bilgileri: META etiketi farklı ve güçlü bir etikettir.  Sayfanın yazarı  Arama kelimeleri  Dil  Diğer birçok özellik

16 Gövde (BODY) Bir HTML dökümanının gövdesi, izleyiciye görsel olarak sunduğumuz içerik bilgilerin tümünü içerir.  Metin: Sitenizin metinsel içeriği gövdede bulunur.  Resimler : Bütün resimler gövdede bulunur.  Bağlar: Web’in kalbidir ve ruhudur. Bağlar, ziyaretçinin sitenizde dolaşmasını sağlar.  Multimedya veya özel programlanmış olaylar: Flash, java appletleri vs. ‘de gövdede bulunur.

17 Örnek (c.html) Egzersizin Faydaları Egzersizin Sağlık Açısından Faydaları Egzersiz, sağlığınızı iyileştirmek için mükemmel bir yoldur. Tıbbi araştırmalar egzersizin kalbinizi ve akciğerinizi güçlendireceğini, tansiyonu düşürebileceğini ve sağlıklı bir kiloda kalmanızı sağlayabileceğini gösteriyor

18 Örnek (c.html) Egzersiz, ruh halinizi iyileştirmesine de yardımcı olabilir. Egzersiz yapanlar daha özgüven sahibidir, karar verirken daha güçlüdür ve genel olarak yaşama bakışları daha pozitiftir.

19 Kesme (BREAK) etiketi ile çalışmak Bazen bir satır atlamak istersiniz, bunu etiketi ile yapabilirsiniz. Önceki yaptığımız c.html dosyasına şunu ekleyelim. (d.html olarak kaydedelim.) Kenan KILIÇASLAN Beykent Üniversitesi Meslek Yüksek Okulu

20 Biçimlendirme yapalım. d.html deki Kenan KILIÇASLAN yazısını kalınlaştıralım. Bunun için bu yazının başına etiketi sonuna da kapatmak için koymalıyız. Kenan KILIÇASLAN d1.html olarak kaydedelim

21 Biçimlendirme yapalım. d1.html deki egzersiz yazısının tümünü italik yapalım. Bunun için bu yazının başına etiketi sonuna da kapatmak için koymalıyız. egzersiz d2.html olarak kaydedelim.

22 Biçimlendirme yapalım. d2.html deki egzersiz yazısının tümünü bold yapalım. Daha önce italik olan egzersiz yazısının başına ve sonuna koyalım egzersiz d3.html olarak kaydedelim.

23 Link ekleyelim Gövde kısmının en altına D sayfasına git D1 sayfasına git D2 sayfasına git Linklerini ekleyelim alt alta gelsin

24 Link ekleyelim Gövde kısmının en altına D sayfasına git D1 sayfasına git D2 sayfasına git Linklerini ekleyelim d4.html olarak kaydedin

25 Anchor (A) Etiketi (Linkler) etiketi webin özüdür. Web sayfasında dolaşmayı sağlar. Düzgün çalışması için niteliklere ve değerlere sahip olmalıdır. Örnek: Buraya tıklayarak Beykent Üniversitesi sayfasına girebilirsiniz.

26 Link çeşitleri Mutlak linkler İzafi linkler

27 Mutlak link kurma href değeri olarak URL az önceki gibi tam olarak yazılırsa buna mutlak link adı veriliyor. Tam olarak yazılan URL ile başlar Mutlak URL’ye örnek VTYS Dersi index.p Bu link türü aynı site içinde kullanılmaz, başka bir siteye bağlanmak için kullanılır. Aynı site içinde izafi link kullanılır.

28 İzafi link kurma Aynı adreste, aynı sunucu üzerinde duran dosyaların bağlanmasını sağlar. Bu dosyalar aynı klasörde veya farklı klasörde bulunabilir. Her durumda bu dosyalara mutlak link yerine izafi link kullanılır.

29 İzafi link kurma Bir sitenin içindeki bir sayfadan, aynı site içinde olan başka bir sayfaya bağ kurulacaksanız ve her iki dosya da aynı klasörde ise tüm yapmanız gereken, href referansı olarak dosyanın adını yazmak olacaktır. VTYS dersi Farklı klasörde ise durum biraz karmaşıktır.

30 İzafi link kurma alıştırması Bilgisayarınızda root adında bir klasör oluşturun Root klasörünü açın ve içinde yazilar adında klasör oluşturun. Yine root klasörü içinde bilgiler adında bir klasör oluşturun. Bilgiler klasörü içinde vtys klaörü oluşturun.

31 İzafi link kurma alıştırması Bilgisayarınızda root adında bir klasör oluşturun Root klasörünü açın ve içinde yazilar adında klasör oluşturun. Yine root klasörü içinde bilgiler adında bir klasör oluşturun. Bilgiler klasörü içinde vtys klasörü oluşturun.

32 Örnek dosyalar Dosya adı : index.html (root klasöründe) Ana Sayfa Ana Sayfa Bu sayfa root dizininde diğer sayfalara bağ kuracağım

33 Örnek dosyalar Dosya adı : yazilar1.html (yazilar klasöründe) Yazılar 1 YAZILAR 1 Bu sayfa yazılar klasöründedir ve diğer sayfalara bağ kuracağım

34 Örnek dosyalar Dosya adı : yazilar2.html (yazilar klasöründe) Yazılar 2 YAZILAR 2 Bu sayfa yazılar klasöründedir ve diğer sayfalara bağ kuracağım

35 Örnek dosyalar Dosya adı : bilgiler1.html (bilgiler klasöründe) Bilgiler 1 Bilgiler 1 Bu sayfa bilgiler klasöründedir ve diğer sayfalara bağ kuracağım

36 Örnek dosyalar Dosya adı : bilgiler2.html (bilgiler klasöründe) Bilgiler 2 Bilgiler 2 Bu sayfa bilgiler klasöründedir ve diğer sayfalara bağ kuracağım

37 Örnek dosyalar Dosya adı : vtys.html (bilgiler klasöründe) VTYS VTYS Bu sayfa vtys klasöründedir ve diğer sayfalara bağ kuracağım

38 Örnek dosyalar index.html sayfasından diğer sayfalara link Yazılar 1 Yazılar 2 Bilgiler 1 Bilgiler 2 VTYS

39 Örnek dosyalar yazilar1.html sayfasından diğer sayfalara link Ana Sayfa Yazılar 2 Bilgiler 1 Bilgiler 2 VTYS

40 Örnek dosyalar yazilar2.html sayfasından diğer sayfalara link Ana Sayfa Yazılar 1 Bilgiler 1 Bilgiler 2 VTYS

41 Örnek dosyalar bilgiler1.html sayfasından diğer sayfalara link Ana Sayfa Yazılar 1 Yazılar 2 Bilgiler 2 VTYS

42 Örnek dosyalar bilgiler2.html sayfasından diğer sayfalara link Ana Sayfa Yazılar 1 Yazılar 2 Bilgiler 2 VTYS

43 Örnek dosyalar vtys.html sayfasından diğer sayfalara link Ana Sayfa Yazılar 1 Yazılar 2 Bilgiler 2 VTYS

44 bağlantısı href değeri aşağıdaki gibidir. Kenan’a mail için tıklayınız

45 Resimlerin bağlanması Resimler’de izafi bağ veya mutlak bağ ile sayfaya bağlanır. (Bilgisayarınızda bir resim bulunuz) Örnek Bu resme tıklandığında aynı klasörde bulunan bilgisayar.html sayfası açılır.


"İnternet Programcılığı I A-Şubesi 2-1.Ders 02.10.06 Öğr.Gör.Kenan KILIÇASLAN Web:" indir ppt

Benzer bir sunumlar


Google Reklamları