İnternet Programcılığı I

... konulu sunumlar: "İnternet Programcılığı I"— Sunum transkripti:

1 İnternet Programcılığı I
OĞUZ İNAL

2 İNTERNET İnternet, bir çok bilgisayar sisteminin birbirine bağlı olduğu, dünya çapında yaygın olan ve sürekli büyüyen bir iletişim ağıdır. Aynı zamanda, insanların her geçen gün gittikçe artan “üretilen bilgiyi saklama / paylaşma ve ona kolayca ulaşma” istekleri sonrasında ortaya çıkmış bir teknolojidir. Bu teknoloji yardımıyla pek çok alandaki bilgilere insanlar kolay, ucuz, hızlı ve güvenli bir şekilde erişebilmektedir.

3 IP (Internet Protocol) Numarası
IP (Internet Protocol), bilgisayarların iletişim kurmasını sağlayan standart bir protokoldür. Genel olarak her bilgisayarın kendine özel bir numarası vardır. İki bilgisayar iletişim kurduğu zaman birbirlerini bulmak için IP adresini kullanır. IP adresi her biri noktayla ayrılan ve 0 ile 255 arasındaki rakamlardan oluşmuş 4 adet numara setidir. Örneğin: Bilgisayarın networkte bir “adı” olsa bile (daha kolay hatırlamanız için ), diğer bilgisayarlarla iletişim kurduğunda IP adresini kullanır.

4 İnternet Alanı (Domain)
İnternete sürekli bağlı olan her bilgisayarın bir IP numarası vardır ( gibi). Bu numaraları akılda tutmak ve herhangi bir anda yazmak zor olduğundan, alan adı (domain name) sistemi adını verdiğimiz bir isimlendirme oluşturulmuştur. Herhangi bir bilgisayara (ve o bilgisayar üzerinde yayınlanan WEB sitelerine) bağlanmak için karmaşık IP numaralarını akılda tutmak yerine, hatırlanması ve yazılması kolay alan adlar kullanılmaktadır ( gibi). Siz tarayıcınızın adres çubuğuna yazdığınızda, tarayıcınız merkezi bir bilgisayarla iletişim kurarak adresinin yerini tuttuğu IP numarasını öğrenecek ve bu IP numaralı bilgisayara bağlanarak istediğiniz bilgilere erişmenizi sağlayacaktır.

5 İnternet adreslerinde görülen kısaltmalar
gov: Hükümet kurumları (government) edu: Eğitim kurumları (education) org: Ticari olmayan kuruluşlar (organization) com: Ticari kuruluşlar (company) mil: Askeri kurumlar (military) net: Servis sunucular (network) ac: Akademik kuruluşlar (academic) int: Uluslararası kuruluşlar (international) Bunun yanında kullanılan ülke kısaltmaları da vardır. Bazıları; tr:Türkiye, jp:Japonya, uk:İngiltere, it:İtalya, ch:Isviçre gibi.

6 WEB Tarayıcılar WEB tarayıcısı, internet üzerindeki tüm bilgilere bakabilme ve bu bilgilerle etkileşim halinde olabilme olanağı veren bir uygulama programıdır. Tarayıcı kelimesinin İngilizce karşılığı “browser”dır. Tarayıcı kullanıcısı adına İnternet üzerinde WEB sunucularından isteklerde bulunan bir istemci programdır.

7 WEB Tarayıcıların Çalışması
WEB istemci-sunucu (client-server) sistemi olarak bilinir. Sizin WEB tarayıcı yazılımınız istemci, uzaktaki sizin erişmek istediğiniz bilgileri saklayan bilgisayar ise sunucudur. Örneğin; Milli Eğitim Bakanlığının WEB sitesine bakıyorsanız sizin bilgisayarınız Ankara’daki bir sunucudan WEB sayfalarına erişmek istediği mesajını yollamıştır. Milli Eğitim Bakanlığının WEB sunucusu istediğiniz bilgileri internet üzerinden sizin bilgisayarınıza yollamaktadır. Sizin WEB tarayıcınız gelen bilgileri yorumlar ve sizin ekranınızda anlaşılır bir şekilde gösterir.

8 Arama Motorları İnternet büyük miktarda bilgi içerir, ancak en büyük sorun ihtiyacınız olan bilginin yerini tespit etmektir. Arama motoru, WEB sitelerini dolaşarak içeriklerini inceleyen ve bu içerikleri sizin arama yapabilmeniz için uygun şekilde indeksleyen programlara verilen isimdir.

9 Arama Yapmak Mantıksal bağlaç terimleri WEB üzerinde istediğiniz bilgilere ulaşmanızı sağlayacak güçlü filtrelerdir. Mevcut arama servislerinin birçoğu mantıksal bağlaçları destekler. Örneğin, “İzmir AND Otel” yazarsanız, hem İzmir hem de otel kelimelerinin geçtiği alanlar listelenecektir. Bazı arama servislerine “izmir otel” yazarak aynı aramayı yaptırabilirsiniz. Eğer şimdi vereceğimiz örnekte olduğu gibi arama yaptırırsanız ayrı ayrı iki kelimeyi dikkate alır. Örneğin, “Microsoft OR Netscape” derseniz, hem Microsoft hem de Netscape’i içeren alanlar listelenecektir. Mantıksal bağlaçların yanında detaylı arama seçeneklerini de kullanabiliriz. Dosya biçimi, tarih, arama yapılacak yer (sayfa başlığı, sayfanın herhangi bir yeri, sayfaya yapılan bağlantılar…) gibi seçenekler ile detaylı arama da yapılabilir. Kelime parçalarını aramak için soru (?) ve yıldız (*) işaretleri kullanılır. Soru işareti (?) tek bir harfin yerini tutarken (?ence-bence, sence), yıldız işareti (*) birden fazla harfin yerini tutar (tele*-telefon, televizyon).

10 Web Sayfası Hazırlarken Dikkat Edilecek Noktalar
Sayfa adında ya da sayfada yer alan herhangi bir resim ya da animasyonlar kaydedilirken asla Türkçe ve özel karakterler (ğ,ü,ş,İ ,?,\ vs.) kullanılmaz. Sabit diskinizde öncelikle WEB sayfanıza ait dokümanları kaydedeceğiniz bir dizin ve bu dizin içerisinde resimleri ya da animasyonlarınızı kaydedeceğiniz bir alt dizin oluşturunuz. Sunucu bilgisayarına bu bilgiler atılırken (upload) aynı dizinleri bu alanda oluşturmak gerektiği asla unutulmamalıdır. WEB sitenizi yaptığınızda, mutlaka ana sayfanızı index.html olarak adlandırınız. Birçok WEB sunucu için varsayılan sayfa index.html'dir. Bazı sunucular da varsayılan sayfanın default.html olarak adlandırılmasını ister.

11 HTML (HYPER TEXT MARKUP LANGUAGE)

12 HTML Sayfası Oluşturma

13 HTML Komut Yapısı HTML diğer programlama dillerinden farklı olarak sadece görsel düzenleme için kullanılmaktadır. HTML herhangi bir text editörle (Notepad, Word,...) hazırlanabilir. Fakat bunun yerine WEB sayfası tasarımı için Dreamweaver, FrontPage, Netscape Composer gibi gelişmiş araçlar da kullanılabilir. Örnek uygulamalar için Notepad kullanılmıştır. Bir html dokümanı hazırlandıktan sonra kaydedilirken “dosya_adi.htm” veya “dosya_adi.html” olarak kaydedilmelidir.

14 Yazım Kuralları Komutlar büyük ya da küçük harfle yazılabilir.
Komutlar Türkçe karakterler (ş,ç,ı,ü,ğ,ö) içermez. Komutlar “<” ve “>” işaretleri arasında yazılır ve “etiket (tag)” adını alır. Örnek : <HTML>,<BODY>,<TITLE>

15 WEB sayfasında standart olarak bulunması gereken kodlar şunlardır
WEB sayfasında standart olarak bulunması gereken kodlar şunlardır. Bunlar sayfada mutlaka vardır. Bu kodlarla tarayıcı bunun bir WEB sayfası olduğunu anlar ve ona göre görüntüler.

16 <HTML> <html>, bir WEB sayfasında bulunan ilk etikettir. Bu etiket tarayıcıya HTML belgesinin başladığı ve bittiği yeri bildirir. Bütün HTML kodları bu etiketin içinde yer almalıdır. Bu etiketin hiçbir parametresi yoktur.

17 <HEAD> HTML belgesinin ilk bölümüdür. WEB sayfası ile ilgili temel özellikler, sayfa başlığı, yazı karakterler kümesi, link özellikleri burada tanımlanır. Head etiketinin yorum aralığında <meta> etiketi yer alır. Bu etiket siteyi tarayıcıya ve arama motorlarına tanıtır. Meta etiketinde kullanılan parametreler aşağıdaki tabloda verilmiştir. Kullanılacak parametreler Görevi name Author, description ve keywords özellikleri tanımlanır. http-equiv Refresh, expires, content ve content-style-type özellikleri tanımlanır. Size Yazının boyu belirlenir.

18 <TITLE> Head bölümü içine yazılan title bölümüne sayfanın başlığı yazılır, tarayıcının sol üst bölümünde bulunan başlık çubuğunda görüntülenir.

19 <META NAME="keywords“ CONTENT="Sitenizi
<META NAME="keywords“ CONTENT="Sitenizi arama motorlarında bulduracak siteniz ile ilgili kelimeleri buraya yazın."> <META http-equiv="Content-Type" CONTENT="text/html; charset=windows-1254"> Kodu sayfanızda ne tür bir metnin olduğunu (text/html yazmakla metnin düz yazı ve html belgesi olduğunu) ve karakterlerinin hangi kodlama (windows yazmakla) ile yapıldığını gösterir.

20 <BODY>

21 <BR> Yazdığımız yeri istediğimiz yerden bölmek veya satır başı yapmak için <BR> deyimini kullanabiliriz.

22 <CENTER>: Sayfayı yatay olarak ortalamak için kullanılır.
<H1>,<H2>,…<H6>: Yazı büyüklüğünü belirlemek için kullanılır.H harfinin yanındaki rakam büyüdükçe yazı büyüklüğü küçülür. <B>: Yazıyı kalın yazmak için kullanılır. <I>: Yazıyı italik yazmak için kullanılır. <U>: Yazıyı altı çizili yazmak için kullanılır. <Font Size=Rakam>: Yazı büyüklüğünü belirlemek için Font deyimi de kullanılır. <Font Color=“Renk”> : Yazı rengini belirlemek için kullanılır. <Font FACE=“Yazı tipi”>: Yazı tipini belirlemek için kullanılır.

23

24 <HR>: Sayfaya yatay çizgi eklemek için kullanılır
<HR>: Sayfaya yatay çizgi eklemek için kullanılır. Color parametresi ile çizgiye renk verilebilir. <P>: Paragraf yapmak için kullanılır. Align parametresi kullanarak paragrafın hangi yöne hizalanacağı seçilebilinir.

25 Metni Birlikte Kullanmak
Sayfalarda Resim ve Metni Birlikte Kullanmak <IMG SRC> tagı html sayfasına resim eklemek için kullanılıyor. Html dosyasına göre resmin yolunu gösteriyoruz. <IMG SRC='resim/mehmetakif.jpg' border=2 Align='Left'> Width parametresi ile resmin genişliğini, Height ile de yüksekliğini ayarlayabiliriz. Border ile kalınlığını, Align ile de resmin hangi yöne hizalanacağını belirtiyoruz.

26

27 Sayfalara E-mail linki Yerleştirmek
Sayfalara linki yerleştirmek için; <A Href=MAILTO:mailadresi> Gözükecek metin </A>

28 Başka Web Sayfalarına Bağlantı Vermek

29 Resimlere Bağlantı Özelliği Vermek

30

31 STYLE SHEET ve CSS kullanımı
Style kullanımı sayesinde metinlerin biçim özellikleri otomatik olarak kısa sürede değiştirilebilinir. Style’ler daha çok aynı sayfada aynı biçimleme işlemi birden fazla tekrar edildiği zaman işlevsel olmaktadır. Html kodlarımızın içerisinde bir style tanımlayabileceğimiz gibi oluşturduğumuz stil özelliklerini farklı bir css uzantılı dosyadan da çağırabiliriz.

32 CSS koduna bakış Bir css ifadesi her zaman noktalı virgül (;) ile biter. İfadeler bir kıvrımlı parantez içinde yer alır. p { color: red; text-align: center; }

33

34 Stil Belirlemek Stil belirlemek için formatımız " .stiladı { stiller; } " şeklindedir. Stil adından önce kullandığımız nokta ilgili tüm class tanımlamaları için geçerli olduğunu anlatır. Başına HTML kodunu alarak sadece o nesneye özel yapabilme şansımız var.

35

36 Stili Başka Bir Dosyadan Çağırmak
stildosyasi.css

37

38 TABLO HAZIRLAMAK Tablo hazırlamak için <TABLE> etiketi kullanılır. Border parametresi ile tabloya kenarlık ekleyebiliriz.Border değeri ne kadar büyük olursa tablonun kenarlığı o kadar kalın olur. Width parametresi ile tablonun genişliği belirlenir. Table deyimi ile tablo hazırlama özelliği başlatıldıktan sonra <TR> deyimi ile tabloya satır, <TD> deyimi ile tabloya sütün eklenir. <TH> ile de satır eklenir fakat bu kez o satırdaki yazılar Bold olur.

39

40 Hücreleri Birleştirmek Zemin Rengini Belirlemek
Table deyimi ile birlikte BGCOLOR parametresini kullanırsanız tablonun zemin rengi değişir, TR ile kullanırsanız satırın, TD ile kullanırsanız sütunun rengi değiştirilir. COLSPAN ve ROLSPAN deyimi hücreyi birleştirmek için kullanılıyor.

41

42

43 Tablonun Hücrelerine Resim Girişi

44

45 Form Hazırlamak Form hazırlamak için HTML kodu içinde <FORM> deyimi kullanılır. Kullanıcının Form yardımıyla bilgi girebilmesi için INPUT deyiminden faydalanılmaktadır. Bilgi girilecek nesnenin tipi TYPE parametresi ile belirlenmektedir. Eklenen nesnenin seçili olması için INPUT ile birlikte checked parametresi kullanılır. Eklenen her nesnenin bir adı ve bir tipi olmalıdır.

46 Forma Onay Kutusu(Checkbox)Eklemek

47 Radyo Düğmesi Hazırlamak

48 Metin Kutusu Hazırlamak
Metin kutusu hazırlamak için Type parametresine text değerini aktarmak gerekir. Html sayfama boşluk karakteri eklemek için “&nbsp” kullanılır. Size parametresi ile metin kutusunun genişliği ayarlanabilir. Metin kutusuna girilecek metne sınırlama getirmek için MaxLength parametresinden yararlanılır. Value parametresi ile metin kutusuna değer aktarılabilinir. Type parametresine text yerine password değeri aktarılırsa metin kutusuna şifre girişi yapılır. Girilen bilgilerin ekranda okunması engellenir.

49

50 TEXTAREA DEYİMİ Web sayfası aracılığı ile dışarıdan girilecek bilginin birden fazla satırdan meydana gelmesini istiyorsanız TEXTAREA deyiminden yararlanabilirsiniz. Parametre olarak satır sayısı ve sütun genişliği verilebilir.

51

52 Liste Kutusu Hazırlamak
Liste kutusu hazırlamak için SELECT deyimi kullanılır. Name parametresi ile liste kutusunun adı, Size parametresi ile liste kutusunun yüksekliği belirlenmektedir. Liste kutusuna eklemek istenen her bir seçenek <OPTION> İLE </OPTION> arasına yazılmalıdır. Select deyimi ile Selected parametresini kullanmak gerekir.

53

54 Düğme (Buton) Hazırlamak
Input deyiminin Type parametresine “button” değerini aktardığımızda forma bir düğme yerleştirilir. Düğmenin başlığı value parametresi ile belirlenir. Type parametresine “button” yerine “reset” parametresi aktarılırsa o düğmeye tıklandığında formdaki bilgiler temizlenir.

55

56