İnternet Programcılığı I A-Şubesi 2-1.Ders 02.10.06 Öğr.Gör.Kenan KILIÇASLAN kenank@beykent.edu.tr kenankilicaslan@gmail.com Web: http://kenank.beykent.edu.tr
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.)
Dosya isimleri Dosyanın uzantısı ya tümü .htm yada .html olmalı Aynı site içinde farklı uzantılar kullanılmamalı
Ana Sayfa http://www.beykent.edu.tr http://www.sabah.com.tr 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.
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.
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. <HTML> <HEAD>
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 “<“ ve büyüktür “>” sembollerini içerir, ancak etiketin kapama olduğunu belirtmek için etiketten önce bölü işareti (/) ekler. </HTML> , </HEAD>
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. <P> … </P> kapatılırken, <IMG> etiketi hiçbir zaman kapatılmaz yani </IMG> yanlıştır.
Nitelikler Nitelikler (attributes), bir etiketin eylemini değiştirir. Pek çok etiketin bu niteliklere ihtiyacı yoktur. Nitelikler < ve > sembolleri arasına adından sonra gelir. <IMG src=“resim_adı.jpg”> <IMG src=“resim_adı.jpg” height=100 width=120> Burada src niteliktir ve resimin kaynağını belirtir. Height ve width niteliktir. Resmin ekrandaki yüksekliğidir.
Örnek ( a.html adıyla kaydedin ) <HEAD> <TITLE>Bu bir HTML örneğidir</TITLE> </HEAD> <BODY bgcolor=“red” > <P align=“center”>Bu yazıyı ortalanmış göreceksiniz</P> <P align=“right”>Bu yazıyı sağa dayalı göreceksiniz</P> <P>b sayfasına bağlanmak için <A href=“b.html”>buraya tıklayınız.</A></P> </BODY> </HTML>
Örnek ( b.html adıyla kaydedin ) <HEAD> <TITLE>Bu bir HTML örneğidir</TITLE> </HEAD> <BODY bgcolor=“blue” text=“white”> <P align=“center”>Bu yazıyı ortalanmış göreceksiniz</P> <P align=“right”>Bu yazıyı sağa dayalı göreceksiniz. <A href=“a.html”>Buraya Tıkla</A></P> </BODY> </HTML>
Etiket açma kapama için doğru şekil Etiket açma kapama için yanlış şekil
Baş kısmının yapısı (HEAD) Web sayfasının koduna baktığınızda <HTML> etiketinden hemen sonra <HEAD> etiketi başlar ve birkaç satır sonra </HEAD> ‘e rastlarsınız. Bu dökümanın baş kısmıdır.
Baş kısmında neler vardır. Sayfanın başlığı: <TITLE> açma etiketi ve </TITLE> 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.
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
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.
Örnek (c.html) <HTML> <HEAD> <TITLE>Egzersizin Faydaları</TITLE> </HEAD> <BODY> <H1>Egzersizin Sağlık Açısından Faydaları</H1> <P>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</P>
Örnek (c.html) <P>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. </BODY> </HTML>
Kesme (BREAK) etiketi ile çalışmak Bazen bir satır atlamak istersiniz, bunu <BR> etiketi ile yapabilirsiniz. Önceki yaptığımız c.html dosyasına şunu ekleyelim. (d.html olarak kaydedelim.) <P>Kenan KILIÇASLAN<BR> Beykent Üniversitesi<BR> Meslek Yüksek Okulu<BR>
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 <B> etiketi sonuna da kapatmak için </B> koymalıyız. <B>Kenan KILIÇASLAN</B> d1.html olarak kaydedelim
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 <I> etiketi sonuna da kapatmak için </I> koymalıyız. <I>egzersiz</I> d2.html olarak kaydedelim.
Biçimlendirme yapalım. d2.html deki egzersiz yazısının tümünü bold yapalım. Daha önce italik olan <I>egzersiz</I> yazısının başına <B>ve sonuna </B> koyalım <B><I>egzersiz</I></B> d3.html olarak kaydedelim.
Link ekleyelim Gövde kısmının en altına D sayfasına git Linklerini ekleyelim alt alta gelsin
Link ekleyelim Gövde kısmının en altına <P> <A href=“d.html”>D sayfasına git</A><BR> <A href=“d1.html”>D1 sayfasına git </A><BR> <A href=“d2.html”>D2 sayfasına git </A> </P> Linklerini ekleyelim d4.html olarak kaydedin
Anchor (A) Etiketi (Linkler) <A> 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: <A href=http://www.beykent.edu.tr>Buraya tıklayarak Beykent Üniversitesi sayfasına girebilirsiniz.</A>
Link çeşitleri Mutlak linkler İzafi linkler
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 http:// ile başlar Mutlak URL’ye örnek <A href=“http://kenank.beykent.edu.tr/vtys/ index.php”>VTYS Dersi</A> 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.
İ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.
İ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. <A href=“index.php”>VTYS dersi</A> Farklı klasörde ise durum biraz karmaşıktır.
İ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.
İ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.
Örnek dosyalar Dosya adı : index.html (root klasöründe) <HTML><HEAD> <TITLE>Ana Sayfa</TITLE></HEAD> <BODY> <H1>Ana Sayfa</H2> <P> Bu sayfa root dizininde diğer sayfalara bağ kuracağım</P> </BODY> </HTML>
Örnek dosyalar Dosya adı : yazilar1.html (yazilar klasöründe) <HTML><HEAD> <TITLE>Yazılar 1</TITLE></HEAD> <BODY> <H1>YAZILAR 1</H1> <P> Bu sayfa yazılar klasöründedir ve diğer sayfalara bağ kuracağım</P> </BODY> </HTML>
Örnek dosyalar Dosya adı : yazilar2.html (yazilar klasöründe) <HTML><HEAD> <TITLE>Yazılar 2</TITLE></HEAD> <BODY> <H1>YAZILAR 2</H1> <P> Bu sayfa yazılar klasöründedir ve diğer sayfalara bağ kuracağım</P> </BODY> </HTML>
Örnek dosyalar Dosya adı : bilgiler1.html (bilgiler klasöründe) <HTML><HEAD> <TITLE>Bilgiler 1</TITLE></HEAD> <BODY> <H1>Bilgiler 1</H1> <P> Bu sayfa bilgiler klasöründedir ve diğer sayfalara bağ kuracağım</P> </BODY> </HTML>
Örnek dosyalar Dosya adı : bilgiler2.html (bilgiler klasöründe) <HTML><HEAD> <TITLE>Bilgiler 2</TITLE></HEAD> <BODY> <H1>Bilgiler 2</H1> <P> Bu sayfa bilgiler klasöründedir ve diğer sayfalara bağ kuracağım</P> </BODY> </HTML>
Örnek dosyalar Dosya adı : vtys.html (bilgiler klasöründe) <HTML><HEAD> <TITLE>VTYS</TITLE></HEAD> <BODY> <H1>VTYS</H1> <P> Bu sayfa vtys klasöründedir ve diğer sayfalara bağ kuracağım</P> </BODY> </HTML>
Örnek dosyalar index.html sayfasından diğer sayfalara link <P> <A href=“yazilar/yazilar1.html”>Yazılar 1</A><BR> <A href=“yazilar/yazilar2.html”>Yazılar 2</A><BR> <A href=“bilgiler/bilgiler1.html”>Bilgiler 1</A><BR> <A href=“bilgiler/bilgiler2.html”>Bilgiler 2</A><BR> <A href=“bilgiler/vtys/vtys.html”>VTYS</A><BR>
Örnek dosyalar yazilar1.html sayfasından diğer sayfalara link <P> <A href=“../index.html”>Ana Sayfa</A><BR> <A href=“yazilar2.html”>Yazılar 2</A><BR> <A href=“../bilgiler/bilgiler1.html”>Bilgiler 1</A><BR> <A href=“../bilgiler/bilgiler2.html”>Bilgiler 2</A><BR> <A href=“../bilgiler/vtys/vtys.html”>VTYS</A>
Örnek dosyalar yazilar2.html sayfasından diğer sayfalara link <P> <A href=“../index.html”>Ana Sayfa</A><BR> <A href=“yazilar1.html”>Yazılar 1</A><BR> <A href=“../bilgiler/bilgiler1.html”>Bilgiler 1</A><BR> <A href=“../bilgiler/bilgiler2.html”>Bilgiler 2</A><BR> <A href=“../bilgiler/vtys/vtys.html”>VTYS</A>
Örnek dosyalar bilgiler1.html sayfasından diğer sayfalara link <p> <A href=“../index.html”>Ana Sayfa</A><BR> <A href=“../yazilar/yazilar1.html”>Yazılar 1</A><BR> <A href=“../yazilar/yazilar2.html”>Yazılar 2</A><BR> <A href=“bilgiler2.html”>Bilgiler 2</A><BR> <A href=“vtys/vtys.html”>VTYS</A><BR>
Örnek dosyalar bilgiler2.html sayfasından diğer sayfalara link <P> <A href=“../index.html”>Ana Sayfa</A><BR> <A href=“../yazilar/yazilar1.html”>Yazılar 1</A><BR> <A href=“../yazilar/yazilar2.html”>Yazılar 2</A><BR> <A href=“bilgiler1.html”>Bilgiler 2</A><BR> <A href=“vtys/vtys.html”>VTYS</A>
Örnek dosyalar vtys.html sayfasından diğer sayfalara link <P> <A href=“../../index.html”>Ana Sayfa</A><BR> <A href=“../../yazilar/yazilar1.html”>Yazılar 1</A><BR> <A href=“../../yazilar/yazilar2.html”>Yazılar 2</A><BR> <A href=“../bilgiler1.html”>Bilgiler 2</A><BR> <A href=“../bilgiler1.html”>VTYS</A>
E-mail bağlantısı href değeri aşağıdaki gibidir. <A href=“mailto:kenank@beykent.edu.tr”> Kenan’a mail için tıklayınız</A>
Resimlerin bağlanması Resimler’de izafi bağ veya mutlak bağ ile sayfaya bağlanır. (Bilgisayarınızda bir resim bulunuz) Örnek <A href=“bilgisayar.html”> <IMG src=“bilgisayar_resmi.gif”></A> Bu resme tıklandığında aynı klasörde bulunan bilgisayar.html sayfası açılır.