Ders 1

İNTERNET
PROGRAMCILIĞI 1
Öğr. Gör. Canan ASLANYÜREK
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
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.

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.
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.
WWW(World Wide Web)

Türkçe dünya çapında ağ anlamına gelmektedir. Hypermedia(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.
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.

http://pınarhisarmyo.edu.tr./bilgisayar/default.asp
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.
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.
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.
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.
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.
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
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.
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>
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.
Ö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
Ö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.
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

Burası Türkiye <BR>

Merhaba         Dünya <BR>

burası Türkiye

</body> </html>
Dünya
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.
1.
Rengin ingilizce karşılığı ile.
<font color = " green " >Merhaba Dünya</font>
2.
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.
UYGULAMA

<html>

<head> </head>

<body>

<font color= " red ">Merhaba Dünya</font><BR>

<font color= " #005599 ">Merhaba Dünya</font><BR>

<font color= " rgb(125,0,55 ">Merhaba Dünya</font><BR>

</body>

</html>
HTML Sayfalarının Ana Yapısı

<html>

<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.
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.
<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 "/>
<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= "http://www.mynet.com/images/ "/>

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.
<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.
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 >
<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 2018 23:59:59 GMT" />
<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 http://www.mynotlar.com adresinin
yüklenmesini gösterir.
<meta name="refresh" content="60;http://www.mynotlar.com" />

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" />
<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." />
UYGULAMA

Aşağıdaki kodları yazıp çalıştırınız.

<html>

<head>

<META HTTP-EQUIV="refresh" content="5;
URL=http://www.google.com/">

<META HTTP-EQUIV= " content-language" content="TR">

</head>

<body>

5 saniye sonra ayrılıyoruz

</body>

</html>
<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.
<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>
<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.
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>
<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">
<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");
KAYNAK

Ebubekir Yaşar, Turgut Özseven, İnternet Programcılığı 1