Veri Tabanı Yönetim Sistemleri
advertisement
İnternet Programcılığı I Öğr.Gör.Kenan KILIÇASLAN [email protected] Web: http://www.kilicaslan.nom.tr Ders içeriği (1. Dönem) Kullanıcı tarafında çalışan web sayfalarının tasarımı Statik web sayfası tasarımı, Dinamik web sayfaları, Html komutları Javascript komutları ve javascript yazma Css Zaman kalırsa temel xml Ders içeriği (2. Dönem) Sunucu tarafında çalışan web sayfalarının tasarımı Ne zaman sunucu tarafında çalışacağız, ne zaman kullanıcı tarafında çalışacağız. Diğer sunucu tarafında çalışan (asp, aspx, jsp vs.) programların karşılaştırması PHP dili AJAX En Yaygın Web sunucuları IIS Apache Web Sayfalarının Çalışma Şekline Göre Gruplanması Web sayfaları iki gruba ayrılır. Statik yani içeriği değişmeyen web sayfaları Sunucu tarafında çalışan web sayfaları Statik Web Sayfalarının Görüntülenme Tekniği Kullanıcı bilgisayar (istemci) server’dan bir istekte bulunur. Server (sunucu) istekte bulunulan sayfayı transfer eder (yani sayfa kullanıcının bilgisayarına iner.) Kullanıcının bilgisayarına inmiş olan sayfa kullanılan tarayıcı tarafından yorumlanır ve görüntülenir. Sunucu Tarafı Web Sayfalarının Görüntülenme Tekniği Kullanıcı bilgisayar (istemci) server’dan bir istekte bulunur. Sunucu yapılan isteği html koduna dönüştürür. Server (sunucu) istekte bulunulan sayfayı transfer eder (yani sayfa kullanıcının bilgisayarına iner.) Kullanıcının bilgisayarına inmiş olan sayfa kullanılan tarayıcı tarafından yorumlanır ve görüntülenir. Sunucu Tarafı Web Sayfalarının Görüntülenme Tekniği Sayfa içinde en küçük bir değişiklikte aynı işlem uygulanır. Her yeni istekte sayfa tamamen yeniden oluşturulur yani yenilenir. Sunucu Tarafı Web Sayfalarının Görüntülenme Tekniği Sunucu tarafı sayfalar sunucuda bulunan program tarafından çalıştırılır. Ne zaman sunucu tarafında çalışan sayfayı, ne zaman statik sayfayı tercih edeceğiz. Veritabanı bağlantısı varsa sunucu tarafında çalışmak gerekir (üyelik, forum, alışveriş vs.) Veritabanı bağlantısı yoksa statik yani içeriği değişmeyen sayfalar tercih edilebilir. Scriptler de iki çeşit Kullanıcı bilgisayarda çalışan scriptler (örneğin, javascript, vbscript vs.) Sunucu bilgisayarda çalışan script (örneğin, PHP, JSP, Servlet,vs) Web sayfaları uzantısı Statik web sayfası (Kullanıcı tarafında çalışan) .htm .html Değişken Web sayfası (Sunucu tarafında çalışan) .asp, .aspx (yalnız iis serverda çalışır) .php (iis, apache ve pekçok) .jsp , servlet (apache tomcat) Web sayfalarında her şey etiketler ile belirtilir. Etiketler <etiket> arasına yazılır. Bütün etiketler </ … > ile kapatılmalıdır. <br> gibi bazı etiketler kapatılmaz Son açılan etiket en ilk kapanmalıdır. Etiket kapanışları birbirini kesmemelidir. Yaygın kullanılan html etiketleri <html> .. </html> : Belgeyi bir html belgesi olarak tanımlar <head> .. </head> : Html belgesinin başını tanımlar <body> .. </body> : Html belgesinin gövdesini tanımlar <title> .. </title> : html belgesinin başlığını belirler Yaygın kullanılan html etiketleri <h1></h1> .. <h6></h6> : Metnin boyutunu önceden tanımlı büyüklüğe ayarlar. <p> .. </p> : Belgedeki paragrafı belirtir. <b> .. </b> : Metni koyulaştırır <i> .. </i> : metin italik hale gelir. <img> : sayfaya bir resim yerleştirir. <a> .. </a> : Bir köprü (link) oluşturur. <br> : Bir satır sonu oluştur. Yaygın kullanılan html etiketleri <ul> .. </ul> : Madde işaretli öğelerin sırasız bir listesini belirtir. <ol> .. </ol> : Maddeli öğelerin sıralı bir listesini belirtir. <LI> .. </LI> : liste içindeki bir öğeyi tanımlar. Etiketlerin ayrıca öznitelikleri vardır. <img> etiketinin src öz niteliği vardır. Bu özniteliğe resim adı yazılır. <img src=“kenan.jpg”> 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.) 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. Basit bir HTML oluşturalım <HTML> <HEAD> <TITLE>İlk Sayfam</TITLE> </HEAD <BODY> <H1>Bu benim ilk sayfam</H1> </BODY> </HTML> Örnek ( a.html adıyla kaydedin ) <HTML> <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 ) <HTML> <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 D1 sayfasına git D2 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
