İNTERNET TABANLI PROGRAMLAMA Bu ders ne değildir? Neyi amaç edinmiştir? Bilgisayar Programcısı? Web Tasarımcısı? Web Programcısı? Neler öğreneceğiz? Ders sonunda neler yapılabileceğiz? Örnek siteler

İnternetin Temelleri İnternet Nedir? Bilgisayar Ağı İnternet Uygulamaları İnternet Protokolleri

İnternet Nedir? Interconnected Networks, kelimelerinin kısaltmasıdır ve kendi aralarında bağlantılı ağlar anlamına gelir. Dünya üzerindeki birbiriyle bağlantılı milyonlarca bilgisayardan herhangi birisiyle veri, ileti ve dosya alış verişini sağlayan ve sürekli olarak büyüyen bir iletişim aracıdır. Internetin çatısını üniversiteler, kamu kurumları ve ticari kuruluşların bilgisayarları oluşturmaktadır. Kullanıcılar internete bu kurumlardan aldıkları hizmet aracılığıyla erişirler. Bu kurum ve kuruluşlar, sunucu denilen bilgisayarlarını hiç kapatmazlar.

İstemci (client): İnternet’e bağlanmak için kullanılan kişisel bilgisayarlardır. Bilgisayar ağlarında, diğer ağ bileşenlerinin paylaşıma açık kaynaklarını kullanabilen birimdir. Sunucu (server): İnternet üzerinde bilgi içeren bilgisayarlardır. Sunucu, bilgisayar ağlarında, diğer ağ bileşenlerinin kullanımına (paylaşımına) açık kaynakları bulunduran birimdir. Bir ağda birden fazla sunucu birimi bulunabilir. Internet servis sağlayıcısı, kişilere ve şirketlere Internet bağlantısı sağlayan kurumdur. Kısaca ISS ya da İngilizce'de ISP (Internet service provider) olarak bilinir.

İnternetin Tarihi 1960'lı yıllarda US Savunma Bakanlığının isteği üzerine olası felaket senaryolarının (doğal afet, nükleer saldırı) ardından dahi işlevselliğini koruyabilecek bir iletişim sistemi yaratmak amacı ile ARPANET (Advanced Research Project Administration – Yüksek Araştırma Proje İdaresi) adı altında başlatılan askeri bir projedir. 1970'li yılların başında Amerikan üniversitelerinde bu projeden yararlanma imkanı verilmesinin ardından e-posta (SMTP) ve NNTP (Network News Transfer Protocol) uygulamaları yaygınlık kazanmaya başlamıştır. Bunları FTP ve HTTP izlemiştir.

Bilgisayar Ağı Bilgisayar ağı (network), bilgisayarların bilgi ve kaynaklarını paylaşabilmeleri için oluşturulan yapıdır. En az iki bilgisayarı birbirine bağlayarak bir ağ oluşturulur. Bu ağ vasıtası ile bilgisayarlar aralarında birbiri ile haberleşebilirler. 1980'li yıllarla birlikte, Ethernet ve LAN teknolojisinin gelişmesiyle, kişisel bilgisayarlar ve ofisler bilgisayar ağlarına kavuşmuştur. En bilinen bilgisayar ağı, İnternettir.

İnternet Uygulamaları World Wide Web (www) e-posta (e-mail) Tartışma Listeleri Forum Peer to peer Sohbet Sesli ve Videolu Konferans FTP (File Transfer Protocol) Gerçek zamanlı uygulamalar

World Wide Web (www) Dünya çapında ağ (World Wide Web - www – web –w3), örümcek ağları gibi birbiriyle bağlantılı sayfalardan, İnternet üzerinde çalışan ve "www" ile başlayan adreslerdeki sayfaların görüntülenmesini sağlayan servistir. İnternet ve web terimleri aynı olguyu tanımlamaz. Zira web sadece internet üzerinde çalışan bir servistir. Web kavramı, CERN'de bir bilgisayar programcısı olan Tim Berners-Lee'nin HTML adlı bilgisayar dilini bulup geliştirmesiyle oluşmuştur.

Web’de bilgi, web sayfaları üzerinde bulunur. Bu Web sayfalarına erişmek için web tarayıcıları (Web Browser) kullanılır. Firefox Internet Explorer Opera Netscape Lynx gibi.

Internet Explorer, Firefox, Safari

Web Adresi Uzantıları .edu: educational (eğitim kuruluşları-üniversiteler) .com: commercial (ticari kuruluşlar) .gov: governmental (kamu kuruluşları) .net: Internet'le ilgili kurumlar .org: nonprofit organizations (kâr amacı gütmeyen vakıflar, dernekler, sivil toplum örgütleri vb.) .mil: military (askeri kuruluşlar) .k12: Kindergarten-12th Grade (İlköğretim okulları ve liseler)

http://www.yildiz.edu.tr http://www.meb.gov.tr http://www.google.com

DNS (Domain Name Server) DNS (İnternet Alan Adı Sistemi - Domain Name System): İnternet uzayını bölümlemeye ve bölümleri adlandırmaya yarayan bir sistemdir. İnternet ağını oluşturan her birim sadece kendine ait bir IP adresine sahiptir. Bu IP adresleri kullanıcıların kullanımı için www.site_adı.com gibi kolay hatırlanır adreslere karşılık düşürülür. DNS sunucuları, internet adreslerinin IP adresi karşılığını kayıtlı tutmaktadır.

HTTP HTTP (Hyper Text Transfer Protocol - Hiper Metin Transferi Protokolü) kelimelerinin baş harflerinden oluşan bir kısaltmadır. İnternette sunucular ve son kullanıcılar arasında bilgilerin nasıl aktarılacağına dair kurallar ve yöntemleri düzenleyen protokoldür.

HTML HTML (Hyper Text Markup Language), ana hatları SGML (Standard Generalized Markup Language) ile belirlenmiş bir döküman formatlama dilidir. Bu dil, daha çok, yazılı bir dokümanı formatlamak ve bir objeden başka bir objeye linkler sağlamak ile ilgili komutları içerir. HTML, HTTP ve ilgili diğer protokolleri kullanabilmek için renkli ve güzel kullanıcı arayüzleri hazırlamamızı olanaklı kılar.

Internette kullanilan diller HTML ASP PHP Javascript

Ogrenecegimiz diller HTML PHP SQL : Veritabani sorgulama dili MySQL: Veritabani yonetim sistemi

Örnek Projeler E-ticaret siteleri Eğitim içerikli siteler CD-DVD Satış ve Paylaşım Sitesi Grafik ve Web Tasarım Çalışmaları Satış Sistemi Eğitim içerikli siteler Öğrenci Bilgi Sistemi KPDS Sınav ve Çalışma Sistemi Turizm içerikli siteler Turist Rehber Portallar Araba Portalı Kitap Portalı

Öğrenci Bilgi Sistemi

TURİZM REHBERİ

Emlak Portalı

Bölüm I: HTML Bölüm II: PHP ve MySql Web Teknolojileri Bölüm I: HTML Bölüm II: PHP ve MySql

Editör Notepad++ Kisisel bilgisayariniza bu programi indirin. http://notepad-plus-plus.org/ Kisisel bilgisayariniza bu programi indirin.

Editörler Notepad++ Notepad++, notepad yazılımına alternatif olan, çok gelişmiş bir metin editörüdür. Onlarca programlama dilini tanır ve renklendirme desteği verir. Özellikler: Dil tanıma ve renklendirme WYSIWYG editörü Kullanıcı tanımlamalı dil renklendirme Otomatik tag tamamlama Çoklu döküman açma ve görüntüleme Arama&Değiştirme desteği Sürükle&Bırak desteği Desteklediği Diller: C, C++, Java, C#, XML, HTML, PHP, CSS, makefile, ASCII art (.nfo), doxygen, ini file, batch file, Javascript, ASP, VB/VBS, SQL, Objective-C, RC resource file, Pascal, Perl, Python, Lua, TeX, TCL, Assembler Türkçe 3.18 MB Freeware/Ücretsiz

Notepad++

Editörler: Adobe Dreamweaver CS5 Adobe® Dreamweaver® CS5 yazılımı, tasarımcı ve geliştiricilere standartları temel alan web sitelerini güvenle oluşturma gücü verir. Özellikler: Sitenizi görsel olarak tasarlayın- Programlama tabanlı sayfalar Tarayıcılar arasında uyumluluğu sağlayın FLV video entegre edin ADOBE http://www.adobe.com/products/dreamweaver/ İngilizce (dil desteği) Shareware/Deneme

Editörler Adobe Dreamweaver CS5

Web Sayfalarını Yayınlamak? Sadece kendi bilgisayarımızda kalabilir yada, Web sayfanızı yayınlamak için sayfanızı bir web sunucuya kopyalamalısınız. Alan adı almak (Domain name) Örnek: www.namecheap.com Hosting alınan DNS’e ayarları yaparak yönlendirmek yeterli Alan kiralamak (Hosting) Web Hosting (Ücretli) 500 MB Web Alanı 5 GB Trafik 1 Alan Adı Barındırma 15 E-Posta http://www.turkiyewebalani.com http://www.turkwebhosting.com http://www.sadecehosting.com FTP Adresi Kullanıcı Adı Parola

HTML HTML'in açılımı Hyper Text Markup Language Bir HTML dosyasının uzantısı htm veya html olmak zorundadır. Bir HTML kodu tag(işaretlenmiş etiketler)’lardan oluşmaktadır HTML dosyalarınızı kolay bir şekilde FrontPage veya Dreamweaver ile de hazırlayabilirsiniz. HTML çalışmak istiyorsanız not defteri (notepad) başlamayı tavsiye ediyorum İlk örnek

HTML ilk örnek HTML programlama dili değil, işaretleme dilidir <html> <head> <title>Sayfa Başlığı</title> </head> <body> Bu benim ilk sayfam <br> <b>Bu metin koyu</b> </body> </html> HTML programlama dili değil, işaretleme dilidir HTML etiketleri 2 karakter ile sınırlanır. < ve > HTML etiketleri çift olarak kullanılır. Örn: <b> Bu metin koyu fonttadır. </b> HTML etiketleri büyük/küçük harfe duyarlı değildir

HTML ilk örnek Başlıklar <h1> ve <h6> dahil olmak üzere aradaki tüm rakamlar kullanılarak tanımlanabilir Örnek: <h1>Bu bir başlık</h1> Paragraflar <p> etiketi ile belirtilir. Örnek: <p>Bu bir paragraf</p> Satır atlamak için <br> etiketi kullanılır. HTML içinde açıklama (yorum) satırları yaratmak Örnek: <!-- Bu bir açıklama -->

HTML ilk örnek - Parametreler Parametreler, HTML öğelerine, ek özellikler eklenmesini sağlar. Parametreler daima başlangıç etiketi içerisinde belirtilir. Örnek 1: <h1 align="center"> metinin ortalanacağını da belirtir. Örnek 2: <body bgcolor=“yellow”> arkaplan renginin sarı olacağını belirtir.

HTML ilk örnek – özel karakterler HTML içinde bazı karakterler ("<" gibi) kaynak kodlarda yazılarak ekranda görüntülenmesi sağlanamaz.Bu tip karakterleri görüntüleyebilmek için bazı özel karakterler kullanılır. Örnek 1: Fazladan boşluk, Özel karakteri:   Örnek 2: Küçüktür, <, Özel karakteri: < Örnek 3: Büyüktür, >, Özel karakteri: > Örnek 4: Ve, &, Özel karakteri: & Örnek 5: Alıntı, “, Özel karakteri: "

HTML ilk örnek – link ve çerçeve Link vermek Örnek 1: <a href="http://www.sem.metu.edu.tr“ target="_blank">...SEM web sayfası tıklayın...</a> Çerçeve oluşturmak Örnek: <frameset cols="25%,75%"> <frame src="frame_a.htm"> <frame src="frame_b.htm"> </frameset> <frameset> : Frame ayarlarını belirtir. <frame> : Alt pencere (çerçeve) belirtir. <noframes> : Frame desteğinin kullanılmamasını sağlar. <iframe> : İç frame belirtir.

HTML ilk örnek – tablo Tablo oluşturmak Örnek 1: <table border="1"> <tr> <th>Başlık</th> <th>Başka Başlık</th> </tr> <td>Satır 1, Hücre 1</td> <td>Satır 1, Hücre 2</td> <td>Satır 2, Hücre 1</td> <td>Satır 2, Hücre 2</td> </table>

HTML ilk örnek – liste Arka Plan Liste oluşturmak Örnek 1- Sırasız: <ul> <li>Hakkımda</li> <li>Spor</li> </ul> Örnek 2- Sırali: <ol> </ol> Arka Plan <body bgcolor="#000000"> <body background=“arkaplan.jpg"> Font <font size="2" face="Verdana"> Bu bir paragraf. </font> Resim eklemek <img src="home.gif" alt="Ana Sayfa“>

HTML ilk örnek – Form Örnek -1 Örnek-2 Örnek-3 <form> Adınız: <input type="text" name="isim"> <br> Soyadınız: <input type="text" name="soyad"> </form> Örnek-2 <input type="radio" name="Cinsiyet" value="Erkek"> Erkek <br> <input type="radio" name="Cinsiyet" value="Kadın"> Kadın Örnek-3 <form name="input" action="gonder.php“ method="get" target="_blank"> Kullanıcı Adı: <input type="text" name="kullanici"> <input type="submit" value="Gönder">

HTML ilk örnek – Başlık - Head öğesi genel bilgiler ve ayrıca meta-bilgilerini içerir. - HTML standartlarına göre sadece bir kaç etiket head etiketi içerisinde kullanılabilir, Bunlar: <base>, <link>, <meta>, <title>, <style> ve <script>. Örnek -1 <head> Başlık <title> Sayfa başlığı <base> Temel URL hedef çerçevelerini belirlemek için kullanılır. <link> Kaynak dosyası belirtilir <meta> META bilgileri girilir.

HTML ilk örnek – Meta - Meta öğesi daha çok arama motorlarının site içerisinde neler bulunduğuna dair bilgi edinmesi için koyulur. Arama motorlarının sitenizi ziyaret ettiğinde Meta keywords içine bakar ve ona göre sitenizi kendi veritabanında indeksler. Örnek <meta name="keywords" content="HTML, ders, online, SEM">

Tesekkurler Sorulariniz