Nternet programc l i
Download
1 / 56

İnternet Programcılığı I - PowerPoint PPT Presentation


  • 103 Views
  • Uploaded on

İnternet Programcılığı I. OĞUZ İNAL. İNTERNET.

loader
I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
capcha
Download Presentation

PowerPoint Slideshow about ' İnternet Programcılığı I' - ceallach-argue


An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript

Nternet
İ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.


Ip internet protocol numaras
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:

  • 192.168.123.254. 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.


Nternet alan domain
İnternet Alanı (Domain)

  • İnternete sürekli bağlı olan her bilgisayarın bir IP numarası vardır (162.178.111.24 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 (www.google.com gibi). Siz tarayıcınızın adres çubuğuna www.meb.gov.tr yazdığınızda, tarayıcınız merkezi bir bilgisayarla iletişim kurarak www.meb.gov.tr adresinin yerini tuttuğu IP numarasını öğrenecek ve bu IP numaralı bilgisayara bağlanarak istediğiniz bilgilere erişmenizi sağlayacaktır.


Nternet adreslerinde g r len k saltmalar
İ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.


Web taray c lar
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.


Web taray c lar n al mas
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.


Arama motorlar
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.


Arama yapmak
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).


Web sayfas haz rlarken dikkat edilecek noktalar
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.


Html hyper text markup language
HTML (HYPER TEXT MARKUP LANGUAGE)



Html komut yap s
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.


Yaz m kurallar
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>



<HTML> ş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.

  • <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.


<HEAD> ş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.

  • 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.


Title
<TITLE> ş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.

  • 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.


  • <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-1254 yazmakla) ile yapıldığını gösterir.


<BODY> motorlarında bulduracak siteniz ile ilgili kelimeleri buraya yazın.">


<BR> motorlarında bulduracak siteniz ile ilgili kelimeleri buraya yazın.">

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


  • <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.



Sayfalarda Resim ve parametresi ile çizgiye renk verilebilir.

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.


Sayfalara e mail linki yerle tirmek
Sayfalara E-mail linki Yerleştirmek parametresi ile çizgiye renk verilebilir.

Sayfalara E-mail linki yerleştirmek için;

<A Href=MAILTO:mailadresi>

Gözükecek metin

</A>


Ba ka web sayfalar na ba lant vermek
Başka Web Sayfalarına Bağlantı Vermek parametresi ile çizgiye renk verilebilir.


Resimlere ba lant zelli i vermek
Resimlere Bağlantı Özelliği Vermek parametresi ile çizgiye renk verilebilir.


Style sheet ve css kullan m
STYLE SHEET ve CSS kullanımı parametresi ile çizgiye renk verilebilir.

  • 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.


Css koduna bak
CSS koduna bakış parametresi ile çizgiye renk verilebilir.

  • 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; }


Stil belirlemek
Stil Belirlemek parametresi ile çizgiye renk verilebilir.

  • 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.


Stili ba ka bir dosyadan a rmak
Stili Başka Bir Dosyadan Çağırmak parametresi ile çizgiye renk verilebilir.

stildosyasi.css


Tablo hazirlamak
TABLO HAZIRLAMAK parametresi ile çizgiye renk verilebilir.

  • 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.


H creleri birle tirmek zemin rengini belirlemek
Hücreleri Birleştirmek Zemin Rengini Belirlemek parametresi ile çizgiye renk verilebilir.

  • 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.


Tablonun h crelerine resim giri i
Tablonun Hücrelerine Resim Girişi parametresi ile çizgiye renk verilebilir.


Form haz rlamak
Form Hazırlamak parametresi ile çizgiye renk verilebilir.

  • 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.


Forma onay kutusu checkbox eklemek
Forma Onay Kutusu(Checkbox)Eklemek parametresi ile çizgiye renk verilebilir.


Radyo d mesi haz rlamak
Radyo Düğmesi Hazırlamak parametresi ile çizgiye renk verilebilir.


Metin kutusu haz rlamak
Metin Kutusu Hazırlamak parametresi ile çizgiye renk verilebilir.

  • 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.


Textarea dey m
TEXTAREA DEYİMİ parametresi ile çizgiye renk verilebilir.

  • 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.


Liste kutusu haz rlamak
Liste Kutusu Hazırlamak parametresi ile çizgiye renk verilebilir.

  • 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.


D me buton haz rlamak
Düğme (Buton) Hazırlamak parametresi ile çizgiye renk verilebilir.

  • 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.


ad