İNTERNET PROGRAMCILIĞI 1

... konulu sunumlar: "İNTERNET PROGRAMCILIĞI 1"— Sunum transkripti:

1 İNTERNET PROGRAMCILIĞI 1
Öğr. Gör. Canan ASLANYÜREK

2 Temel İnternet Kavramları
İnternet, bir çok bilgisayar sisteminin birbirine bağlı olduğu, dünya çapında yaygın olan ve sürekli olarak büyüyen bir iletişim ağıdır. İnternet, insanların her geçen gün gittikçe artan “üretilen bilgiyi paylaşma ve ona kolayca ulaşma” istekleri sonucunda ortaya çıkmış bir teknolojidir. Bu teknoloji sayesinde insanlar bir çok alandaki bilgilere kolay, hızlı, ucuz ve güvenli bir şekilde ulaşabilmektedirler

3 TCP/IP Nedir? Bilgi ağı üzerindeki veri iletimi ve paylaşımı bazı kurallara göre yapılmaktadır. Bu kurallar “İnternet protokolleri” ya da TCP/IP protokoller ailesi olarak adlandırılmaktadır. TCP – Transmission Control Protocol IP – Internet Protocol TCP/IP bilgisayarlar ile veri iletme ve alma birimleri arasında organizasyonu sağlayan, böylece bir yerden diğerine veri iletişimini mümkün kılan bir çok veri iletişim protokolüne verilen genel bir addır.

4 Sunucu Tarafından Kullanılan Web Tabanlı Servisler
HTTP(Hyper Text Transfer Protocol): İnternet üzerinde sunucu ve istemci arasında veri transferinin kurallarını ve yöntemlerini düzenler. Text ve grafik tabanlı bilgileri içerisinde barındıran, kullanıcı ile etkileşimde bulunan HTML dosyalarının transferinde kullanılır. SMTP(Simple Mail Transfer Protocol): E-posta göndermek için sunucu istemci arasındaki iletişim şeklini belirleyen protokoldür. HTTPS(Hyper Text Transfer Protocol Secure): İnternette sunucular ve istemci arasında veri transferinin başkaları tarafından okunamayacak şekilde nasıl aktarılacağına dair kurallar ve yöntemleri düzenler.

5 DNS(Domain Name System)
DNS, akılda kalması kolay olan ve kullanıcıyı çağrıştıran kelimelerden oluşan adreslerin, Ip karşılığını veren sistemlerdir. Bu şekilde karışık ve akılda kalması zor Ip adresleri yerine daha kolay alan isimleri kullanılır.

6 WWW(World Wide Web) Türkçe dünya çapında ağ anlamına gelmektedir. Hyper- media(metin +resim +ses + görüntü) tabanlı dosyalardan(HTML) oluşan siteleri taramak amacıyla kullanılır. Buradaki ağ kelimesi birbirine bağlı sitelerden oluşuyor demektir.

7 URL(Uniform Resource Locator)
Web siteleri aracılığı ile ziyaret edilen sitenin adresine URL denilir. URL’nin ilk bölümü transfer protokolünü(http,ftp…), ikinci bölümü alan adını (klu.edu.tr) ve diğer bölüm dizin ve sayfanın dosya adını gösterir.

8 Web Tasarımına Giriş Bir web sayfası hazırlarken dikkat edilecek noktalar: Hazırlanacak sitenin içeriği hakkında ön bilgi edinmek için aynı alanda hizmet veren siteler incelenerek bir plan hazırlanabilir. Sitenin hızlı açılması için kullanılan resimlerin optimizasyonu iyi yapılmalıdır. Standart yazı tipi dışında özel bir yazı tipi kullanmamaya dikkat edilmelidir. Hazırlanacak sitenin sonraki zamanlarda tekrar düzenlenmesini kolaylaştırmak için CSS dosyası kullanmak yararlı olacaktır. Oluşturulan sayfaların dosya isimlerinde, kullanılan resim ve animasyonların dosya isimlerinde Türkçe karakter kullanmamaya dikkat edilmelidir. Site oluşturulduktan sonra farklı web tarayıcılarda ve farklı çözünürlüklerde test edilmelidir.

9 Tasarım ve İçerik Verilmek istenen bilginin kısa özeti verilerek ayrıntısı alt sayfalar oluşturularak verilebilir. Hazırlanacak site gerek renk olarak gerekse tasarım olarak uyumlu olmalıdır. Ziyaretçilerin görsel dikkati soldan sağa doğru gitmektedir. Bu nedenle web sayfalarında ekranın üst yarısı görsel odak noktası olmalıdır. Yumuşak ve pastel renklerle oluşturulmalıdır. Sayfaya konulacak yazılar kolaylıkla okunacak renkte ve yazı tipinde olmalıdır. Tasarımda görsel uyum şart.

10 Hazırlanan Sitenin Sunucuya Yüklenmesi
Hazırlanan web sayfalarını isteyen herkesin görebilmesi için sunucular üzerinde yayınlanması gerekir. Sunucu hizmetini ücretsiz veren kuruluşlar olduğu gibi belirli bir miktar ödeyerek istenilen bir isim üzerinden hazırlanan web sayfaları yayınlanabilir Web sayfalarının yayınlanabilmesi için domain adı yani hazırlanan sitenin internet üzerinde kullanacağı isim ve dosyaların tutulması için hosting gerekmektedir. Web sitesi için kullanılacak ismin daha önce başka site tarafından alınmamış olması gerekir. Domain isimleri belirli bir süre için kiralanır ve süre dolduğunda tekrar kiralanması gerekir.

11 FTP Nedir? FTP(File transfer protocol) internete bağlı iki bilgisayar arasında dosya gönderme veya dosya alma işlemi için kullanılan bir internet protokolüdür. Bir bilgisayara FTP protokolüyle bağlanabilmek için bağlanılacak bilgisayarın adresi, bağlanılacak hesaba ait kullanıcı adı ve şifre ve bağlanılacak bilgisayarda FTP sunucusu olması gerekiyor.

12 HTML(HyperText Markup Language)
Web sayfalarını oluşturmak için kullanılan içerik biçimlendirme dilidir. HyperText Markup Language = Yüksek/İleri metin işaretleme dili anlamındadır. Bu işaretleme dili sadece metin değil bunun yanında resim, ses, video, tablo, madde işaretleri ve diğer nesnelerin de bir arada olduğu yapıyı kapsar. Bütün web sayfalarında en temel yapıyı HTML kodları oluşturmaktadır.

13 HTML HTML kodlarına etiket(tag) adı verilir.
Bu etiketler < > işaretleri arasında yer alır. HTML etiketleri sayfa içeriğini biçimlendirmekle görevlidir. HTML kodları ile sayfa oluşturmak için herhangi bir editör programı kullanılabilir. HTML kodlarını otomatik oluşturan birçok program mevcuttur. Bunlar arasında Microsoft FrontPage, Dreamweaver, Corel Web Suite… programları sayılabilir. Html dosyaları, sunucu bilgisayarda .html ya da .htm uzantılı olarak saklanır

14 HTML Kodları Yazarken Dikkat Edilecek Kurallar
Bütün HTML kodları <html>…</html> arasına yazılır. Onun dışına yazdıklarınızın bir etkisi yoktur. Html etiketlerinde Türkçe karakterler yer almaz. Etiketler büyük veya küçük harfle yazılabilir. Fakat genel kabul görmüş yazım biçimi küçük harftir.

15 UYGULAMA Aşağıdaki kodları not defterine yazarak merhaba.htm olarak istenilen klasöre farklı kaydet komutu ile kaydediniz. <html> <head> <title> Çağan’ın Sayfası</title> </head> <body> <p> Merhaba Dünya </p> </body> </html>

16 ETİKETLER(TAGS) HTML de kodlar etiket denilen nesneler tarafından yapılır. Tarayıcılarda bu etiketleri yorumlarlar. İçerikle etiketleri ayıran en önemli ve tek fark, etiket isimlerinin (< >) işaretleri arasında ifade edilmeleridir.

17 Özel Karakterler HTML yapısı içerisinde özel karakterler ve birden fazla boşluk için aşağıdaki kodlamalar kullanılır.   Boşluk karakteri < < karakteri > > karakteri & & karakteri " " karakteri

18 Özel Karakterler Html etiketleri arasına yazılan metin içerisindeki boşluklardan birden fazlası tarayıcılar tarafından yorumlanmazlar. İki kelime arasına veya iki nesne arasına birden fazla boşluk karakteri koymak için   kodu kullanılmalıdır. Ayrıca enter tuşu ile kodları ve içeriği alt satırlara indirmekte Html açısından bir etkisi olmaz. Alt satıra geçmek için etiket (<BR>) kullanılmadıkça istenildiğinde alt satıra geçilemez.

19 UYGULAMA Klavyeden boşluk ve enter tuşlarının Html yapısına olan etkisini anlamaya çalışalım. Aşağıdaki kodları not defterine yazarak bosluk.htm olarak istenilen klasöre farklı kaydet komutu ile kaydediniz. Oluşan dosyaya çift tıklayarak browser penceresinde görüntüleyiniz. <html> <head> </head> <body> Merhaba Dünya Burası Türkiye <BR> Merhaba         Dünya <BR> burası Türkiye </body> </html>

20 Nesnelerin Rengini Belirlemek
Bilgisayarda tüm renkler üç ana renkten oluşmaktadır. Bunlar kırmızı (R), yeşil (G) ve mavi (B) renkleridir. Html sayfalarında yazı, sayfa, link gibi yapıların rengini belirlemek için üç yöntem vardır. Rengin ingilizce karşılığı ile. <font color = " green " >Merhaba Dünya</font> Bu yöntemde renk RGB olarak 16’lı sayı sisteminde ifade edilir. Renk 6 sayısal değerin ikişerli gruplandırılması ile oluşturulur. FF0000= Kırmızı, 00FF00= Yeşil, 0000FF=Mavi Bu renkler Html sayfalarında # işareti başa getirilerek kullanılır.

21 UYGULAMA <html> <head> </head> <body>
<font color= " red ">Merhaba Dünya</font><BR> <font color= " # ">Merhaba Dünya</font><BR> <font color= " rgb(125,0,55 ">Merhaba Dünya</font><BR> </body> </html>

22 HTML Sayfalarının Ana Yapısı
<head> …………. Birinci kısım </head> <body> ………….. İkinci kısım </body> </html> <html>….</html> = Html kodlarının başladığı ve bittiği yeri gösterir. Tüm etiketler bu etiketin altındadır.

23 HTML Sayfalarının Ana Yapısı
<head>….</head> = Genelde görüntülenmeyen bilgi ve farklı işlevlere sahip kodlamalar ve parametrelerin tanımlandığı kısımdır. Bu veriler belgenin konusu, başlığı, url si gibi bilgilerdir. <body>…..</body> = İçerik ve biçim etiketlerini kapsayan ana etikettir. Sayfada görüntülenen tüm yazı, tablo, madde işaretleri, resim… gibi materyaller bu bölümde yer alır.

24 <HEAD> Etiketinin Alt Etiketleri
<BASE> Etiketi = Html dokümanlarının temel adresini tanımlar. Örneğin; belgenize resim eklerken aşağıdaki yolları izleyebilirsiniz. <img src= "C:\Documents\Canan\Desktop\kus.jpg "/> <base> etiketi tanımlandıktan sonra aynı klasördeki daha fazla resim daha hızlı ve kolay adreslenebilir. <head> <base href= "C\Documents\Canan\Desktop\ "/> </head> Resim bu klasörde olduğu için sadece resmin adı yeterli olmaktadır. <img src= "kus.jpg "/>

25 <HEAD> Etiketinin Alt Etiketleri
<Base> etiketi özellikle sayfanın adresini değiştirirken, sayfadaki bağlantılar komple kaldırılmak istendiğinde büyük kolaylık sağlar. Href: Bağlantılara temel URL olacak adresi belirlemek için kullanılır. <base href= " "/> Target: Sayfadaki tüm bağlantıların nerede açılacağını belirlemek için kullanılır. Aldığı değerler aşağıdadır.

26 <HEAD> Etiketinin Alt Etiketleri
_blank: Yeni bir sayfa açılır. _self: Aynı sayfada veya çerçevede açılır. _parent: Tüm bağlantılar kendi çerçevelerinde açılır. _top: Sayfa tüm pencereyi kapsayarak açılır.

27 UYGULAMA Aşağıdaki kodları not defterine yazıp base.htm olarak kaydediniz. Kus adındaki bir dosyayı masaüstünde oluşturduğunuz bir klasöre kaydediniz. Belgeyi çalıştırınız. <html> <head> <base href= " C:\Users\PC\Desktop\Canan\ "/> </head> <body> <img src= "kus.png "/> </body> </html >

28 <META> Etiketi Web sayfasına ait çeşitli bilgilendirme ve ayarlamaların yapıldığı etikettir. Dokümanın yazarı, konusu, anahtar kelimeleri… gibi bilgiler yer alır. Sayfanın HEAD alanında kullanılır. Expires(Geçerli): Sayfanın son aktif tarihini GMT formatında arama motorlarına bildirmemizi sağlar. Sayfayı daimi olarak geçersiz kılmak için “0”değerini vermemiz gerekir <meta name="expires" content="Thu, 31 Dec :59:59 GMT" />

29 <META> Etiketleri
Refresh: Sayfanın belirli süre(saniye) içerisinde istenilen sayfaya yönlendirilmesini sağlar. Aşağıdaki kod sayfa yüklendikten 60 saniye sonra adresinin yüklenmesini gösterir. <meta name="refresh" content="60; /> Content-language: Sayfanın düzenlendiği dili belirlemek için kullanılır. Aşağıdaki kod sayfanın içeriğinin türkçe olduğunu göstermektedir. <meta name="content-language" content="tr" />

30 <META> Etiketleri
Kullanıcı değişkenleri Name özelliği ile tanımlanır ve Content ile değeri verilir. Author: Sayfayı hazırlayan kişiyi belirtmek için kullanılır. <meta name="author" content= " Canan ASLANYÜREK" /> Generator: Sayfayı hazırladığımız programı belirlemek için kullanılır. <Meta content= "Microsoft FrontPage 5.0 " Name=Generator> Description: Güncel sayfanın açıklamasının belirtilmesini sağlar <meta name="description" content="Bu sayfada HTML meta etiketinin içerebileceği değerlerin isimleri açıklanmaktadır." />

31 UYGULAMA Aşağıdaki kodları yazıp çalıştırınız. <html>
<head> <META HTTP-EQUIV="refresh" content="5; URL= <META HTTP-EQUIV= " content-language" content="TR"> </head> <body> 5 saniye sonra ayrılıyoruz </body> </html>

32 <TITLE> ETİKETİ
Sayfanın başlığını belirler. Tarayıcı penceresinde başlık çubuğunda yazılan başlık görüntülenir.

33 <TITLE> ETİKETİ
Aşağıdaki kodları not defterine yazarak baslik.htm olarak kaydedip çalıştırınız. <html> <head> <META NAME="keywords" content=" internet,asp,network"> <title> Canan’s Web Page</title> </head> <body> Başlığa bak </body> </html>

34 <STYLE> ETİKETİ
Stiller sayfadaki çeşitli nesneleri topluca biçimlendiren yapılardır. Bu etiket sayfa içi stil belirlemede kullanılır. <style> kullanımına yönelik bir sayfa hazırlayalım.

35 UYGULAMA Aşağıdaki kodları not defterine yazarak stil.htm olarak kaydedip çalıştırınız. <html> <head> <style> P{ Color:#008080; } H1{ Color:#800080; Text-align:center; </style> </head> <body> <H1> Merhaba</h1> <p>Web Tasarim</p> </body> </html>

36 <LINK> ETİKETİ Sayfaya ait stil sayfalarını bağlamak için kullanılır. Bu stil sayfaları harici sayfalardır. Aşağıda link etiketinin kullanımı gösterilmiştir. İlkstil.css isimli stil dosyasının yerini belirten ifade yer almaktadır. <LINK REL=stylesheet TYPE="text/css" REF="ilkstil.css">

37 <SCRIPT> ETİKETİ
Vbscript, Jscript veya JavaScript kodlarının yazıldığı alandır. <script language=" JavaScript"> Document.write("Merhaba.\n"); Document.write("Dünya.\n");

38 KAYNAK Ebubekir Yaşar, Turgut Özseven, İnternet Programcılığı 1