İNTERNET PROGRAMCILIĞI 1
Dr. Özkan KAFADAR
TEMEL İNTERNET KAVRAMLARI
İnternet ve TCP/IP
İnternet: Tüm dünya çapında, TCP/IP protokolünü kullanarak, birçok bilgisayarın birbiri ile bağlı
olduğu, bilgisayar veya bilgisayar ağlarının meydana getirdiği, sürekli büyüyen iletişim ağıdır.
İntranet: Çoğunlukla TCP/IP protokolü kullanılarak bir şirket veya kuruma ait tüm LAN veya WAN
yapılarını içine alan geniş ağdır.
TCP/IP: İnternet üzerinde bilgisayarların haberleşmesini, veri iletimini ve paylaşımını belirleyen
kurallardır.
Web Tabanlı Servisler
HTTP: Hyper Text Transfer Protocol
HTTPS: Hyper Text Transfer Protocol Secure
SMTP: Simple Mail Transfer Protocol
kullanici_adi@domain_adi, From, To, CC, BCC, Signature, Attachment, Reply, Forward
DNS: Domain Name System
FTP: File Transfer Protocol
TELNET
POP3: Post Office Protocol Version 3 [Link]
IMAP: Internet Message Access Protocol
PROXY SERVER: Vekil Sunucu
WWW: World Wide Web
URL: Uniform Resource Locator [Link]
İstemci DNS Sunucu
TEMEL İNTERNET KAVRAMLARI
İntranet TCP/IP
CLIENT SERVER
HTTP HTTP
TCP TCP
IP IP
INTERNET
TEMEL İNTERNET KAVRAMLARI
Client-Server Mimarisi
Windows NT Server
Windows 2000 Server
Windows 2003 Server
Windows 2008 Server
…
Linux
Novell Netware
Windows
İNTERNET
Unix
Linux Mac-OS
TEMEL İNTERNET KAVRAMLARI
İSTEMCİ-SUNUCU MİMARİSİ
CLIENT WEB
WEB BROWSER SERVER
CLIENT WEB APPLICATION DATABASE
WEB BROWSER SERVER SERVER SERVER
TEMEL İNTERNET KAVRAMLARI
CLIENT
(BROWSER) URL
HTML
INTERNET EXPLORER
NETSCAPE NAVIGATOR
OPERA
SERVER TALEP BELİRTMEK
ÜZERE PORTU DİNLER
TALEP ALINCA İKİ YÖNLÜ
BAĞLANTI KURULUR
ADIM 1 E GERİ DÖN ve
PORTU DINLE
TALEP ANALİZ EDİLİR
AĞ DAN DİĞER BİLGİLER
OKUNUR
TALEP YERİNE GETİRİLİR
DOSYA KAPATILIR
ve
BAĞLANTI KESİLİR
BROWSER 1
2 3
ASP DATABASE
6 SCRIPTI SERVER
4
5
IIS
TEMEL İNTERNET KAVRAMLARI
İnternet ve Güvenlik
Spam İstenmeyen e-postalardır
Backdoor Bir bilgisayara önlem alınmayan başka bir yoldan girilmesidir
Rootkit İz kaybetmek ve yakalanmamak için kullanılan programladır
Sniffer Ağ ve kullanıcılar ile ilgili bilgiler toplayan programlardır
Daemon Arka planda çalışan bir hizmet programıdır
Spayware Bilgileri 3. kişilere gönderen casus programlardır
Hijacking Tarayıcı ayarlarını değiştiren kodlara sahip programlardır
Trojan Uzak bir bilgisayarı kontrol etmek için kullanılan programlardır
Firewall Güvenlik duvarı
Adware İstenmeyen reklam pencereleridir
Hoax Sahte virüs uyarısı içeren e-postalardır
HYPERTEXT MARKUP
LANGUAGE
Hazırlayan: Öğr. Gör. Özkan Kafadar
GİRİŞ
<html>...</html>
HTML kodları bu iki kodun arasında kodlanır.
<title>...</title>
Tarayıcının başlık çubuğuna yazılacak başlık yazısı bu iki komut arasında kodlanır.
<head>...</head>
<title> komutunun haricinde bu kısımda JavaScript (veya VBScript) ile oluşturulan
fonksiyonlar kodlanır.
<body>...</body>
Web sayfasının gövde kısmıdır ve görmek istediğimiz yapı buraya (gövdeye) kodlanır.
<html>
<head>
<title>Kocaeli Üniversitesi</title>
</head>
<body>
…
</body>
</html>
<BASE />
<img src=‘’C:\Dosyalar\Resimler\[Link]’’ />
<head>
<base href=‘’C:\Dosyalar\Resimler’’ />
</head>
<img src=‘’[Link]’’>
<META>
1. Sistem değişkenleri kullanılarak yapılan tanımlamalar.
<Meta HTTP-EQUIV=‘’refresh’’ CONTENT=‘’10; URL=[Link]
<Meta HTTP-EQUIV=‘’expires’’ CONTENT=‘’Thu, 8 Jun 2009 23:59:59 GMT’’>
<Meta HTTP-EQUIV=‘’content-language’’ CONTENT=‘’TR’’>
2. Kullanıcı tanımlı değişkenler
<Meta NAME=‘’keywords’’ CONTENT=‘’HTML,JAVASCRIPT,CSS,ASP’’>
<Meta NAME=‘’author’’ CONTENT=‘’’Özkan Kafadar’>
<Meta NAME=‘’generator’’ CONTENT=‘’Visual Studio’’>
<STYLE>..</STYLE>
<STYLE>
p{Color:#006060};
H1{Color:#005050};
Text-Align:Center;
</STYLE>
<LINK>
<Link Rel=‘’Stylesheet’’ Type=‘’text/css’’ Ref=‘’[Link]’’>
<SCRIPT>..</SCRIPT>
<Script Language=‘’JavaScript’’>
[Link](‘Merhaba’);
</Script>
METİN DÜZENİ
<pre>...</pre>
Arasına yazılan yazılar, paragraflar ve yapılan fazladan boşluklar dikkate alınarak web
sayfasına yazdırılır. Metin editöründeki formatı, web formatına taşır.
<html>
<head>
<title>Kocaeli Üniversitesi</title>
</head>
<body>
<pre>
Fen bilimleri Enstitüsü
Sosyal Bilimler Enstitüsü
Sağlık Bilimleri Enstitüsü
</pre>
</body>
</html>
<br>... veya <br/>
"break" satır atlatır.
<b>...</b>
"bold" arasındaki ifadeyi kalın (bold) harflerle gösterir.
<i>...</i>
"italic " arasındaki ifadeyi eğik (italic) harflerle gösterir.
<u></u>
Arasındaki ifadeyi altı çizili (underlined) harflerle gösterir.
<p>...</p>
Arasına yazılan ifadeleri paragraf halinde gösterir.
<p align="right">...</p>
Ortalamak için: <p align="center">...</p>
Sola yaslamak için: <p align="left"> ...</p>
Sağa yaslamak için: <p align=“right"> ...</p>
İki yana yaslamak için: <p align=“justify"> ...</p>
<p title="tanıtıcı mesaj" >...</p>
Arasına yazılan bir paragrafın üzerine mouse getirildiğinde, yazılan mesaj görüntülenir.
Karakter Kodları
Boşluk için
"<" karakteri yerine <
">" karakteri yerine de >
Yazı Komutları
<address></address>
Arasına yazılan metinsel ifadeyi, adres formatına çevirir.
<bdo dir="rtl"></bdo>
Arasına yazılan metinsel ifadeyi tersine çevirir.
<sample></sample>
Arasına yazılan metni "sample" (örnekleme) moduna çevirir.
<code></code>
Arasına yazılan metni "code" (kod) moduna çevirir.
<kbd></kbd>
Arasına yazılan metni "keyboard" (klavye/daktilo) moduna çevirir.
<tt></tt>
Arasına yazılan metni "teletip metin" moduna çevirir.
<var></var>
Arasına yazılan metni "variable" (var) moduna çevirir.
<acronym></acronym>
Arasına yazılan metni kısaltma moduna çevirir.
<abbr></abbr>
Arasına yazılan metni yine kısaltma moduna çevirir.
<q></q>
Arasına yazılan metni "quotation" (alıntı) moduna çevirir.
YAZI BİÇİMİ
<b></b>
Harfleri koyulaştırır.(bold)
<strong></strong>
Harfleri koyulaştırır.
<big></big>
Harflerin boyutunu büyütür.
<small></small>
Harflerin boyutunu küçültür.
<em></em>
Harfleri eğik hale getirir.(emphasized)
<i></i>
Harfleri eğik hale getirir.(italic)
<sub></sub>
Harfleri alt simge haline getirir. (subscript)
<sup></sup>
Harfleri üst simge haline getirir. (superscript)
<del></del>
Harfleri üstü çizili hale getirir. (deleted)
<ins></ins>
Harfleri altı çizili hale getirir. (inserted)
<u></u>
Harfleri altı çizili hale getirir.(underlined)
<font>...</font>
HTML'de fontların rengini, büyüklüğünü ve karakterini belirlemek için kullanılır.
"size=" (ölçü) parametresi
<font size="2">Bir insanın gözleri ancak beyninin bildiklerini görebilir</font>
"color" (renk) kodudur.
<font color="black“>Fikirler yüksek tepelere benzer, alışkın olmayanları ürkütür</font>
" face" fontların cinsini belirlemek için kullanılır.
<font face="Arial">Gerçek bilgi, insanın ne kadar cahil olduğunu bilmesidir</font>
LİNKLER
<a>…</a>
" href (hyperlink reference) " Link oluşturmak için kullanılır
<a href="[Link]">Türkçe</a>
<a href=“[Link]">English</a>
" name=" Sayfa içi link oluşturmak için kullanılır.
<a href="#Bolum1“>Bölüm-1</a>
…
<a name="Bolum1">Bölüm-1</a>
" target= "
<a href="[Link]" target="_blank">Güncel Haberler</a>
" title= "
<a href="[Link]" target="_blank" title= " Güncel Haberler" >Haberler sayfasına
gitmek için tıklayınız</a>
TABLOLAR
<table> </table>
<tr> (table row) <html>
<head>
<td> (table data)
<title><Ünlü Matematikçiler</title>
"border =" (sınır/çerçeve) parametresidir. </head>
<table border="1"> <body>
<table>
" above " hücre üstlerindeki sınır çizgileri <tr>
" below " hücre altlarındaki sınır çizgileri <td>Ad</td>
" vsides " düşey sınır çizgileri <td>Soyad</td>
" hsides " yatay sınır çizgileri <td>Doğum Yeri</td>
</tr>
" rhs " sağ düşey sınır çizgileri
<tr>
" lhs " sol düşey sınır çizgileri <td>Isaac</td>
" box " tüm sınır çizgileri <td>Newton</td>
" void " sınır çizgilerini görünmez <td>Woolsthrope</td>
" rows " satır çizgileri </tr>
" cols" sütun çizgileri <tr>
" all" tüm çizgiler <td>Jean Babtiste Joseph</td>
" groups" tablonun etrafındaki çizgiler <td>Fourier</td>
<td>Auxerre</td>
" none " sınır çizgileri görünmez.
</tr>
</table>
</body>
</html>
"width= " (genişlik) <table border="1" width="90%">
"height= " (yükseklik) <tr>
"cellpadding= " <td width="200">Ad</td>
<td width="20%">Soyad</td>
"cellspacing= "
<td>Doğum Yeri</td>
hücre içindekilerle hücre çizgisi arasındaki boşluğu </tr>
ayarlamak için kullanılır. <tr>
" align= " <td>Leonardo</td>
" valign= " <td>Fibonacci</td>
" bgcolor= " <td>Pisa</td>
<td width="200" bgcolor=yellow>Yazar</td> </tr>
<tr>
<td>Brook</td>
" bordercolor= "
<td>Taylor</td>
" bordercolorlight= “ <td>Norton</td>
<table border="4" cellspacing="0" cellpadding="1" </tr>
width="90%“ bordercolorlight="#aacccc" </table>
bordercolordark="#459999“>
TABLO TASARIMI
" rowspan = "
" colspan = "
<html>
<head>
<title>Web Tasarım</title>
</head>
<body>
<table border="0" cellspacing="0" cellpadding="0" width="100%" height="100%">
<tr>
<td width="180" bgcolor="#FAF0E6" valign="top">Bu renkli bölüme genellikle logolar,
yönlendiriciler, hiperlinkler, reklamlar vb. konulur.</td>
<td valign="top"> Buraya metinsel dokümanları, resimleri, anlatı araçlarını ve donatıları
koyabilirsiniz.</td>
</tr>
</table>
</body>
</html>
RESİMLER
<img>
" src= "
" width= "
" height= "
" border= “
" usemap= "
<img src="[Link]" usemap="#harita">
<map name="..."> </map>
<area></area> <html>
" shape= " <head><title>Cameron Diaz</title> </head>
" coords= " <body>
" usemap= " <IMG SRC=“[Link]” USEMAP=“#sekil”>
<MAP NAME=“sekil”>
<AREA HREF=“[Link]”
SHAPE=“rect”
COORDS=“X1,Y1,X2,Y2”
ALT=“BAŞLIK”
>
....
</MAP>
</body>
</html>
align="left"
Resmi metinin sol tarafına yerleştirir.
align="right"
Resmi metnin sağ tarafına yerleştirir.
align="top"
Satırdaki en yüksek donatının (yazı, resim vb.) üst seviyesini hizalayacak şekilde resmi
yerleştirir.
align="texttop"
Satırdaki en yüksek yazının üst seviyesini hizalayacak şekilde resmi yerleştirir. (genellikle top
ile aynı işlevi görür, ama her zaman değil)
align="middle"
Satırın taban seviyesini, resmin orta yükseklik seviyesine getirir.
align="absmiddle"
Satırın orta seviyesini, resmin orta yükseklik seviyesine getirir.
align="baselign"
Satırın taban seviyesini, resmin taban seviyesine getirir.
align="bottom"
baselign ile aynı işlevi görür.
align="absbottom"
Resmin alt seviyesini, satırın alt seviyesine getirir.
LİSTELEME
<ul>...</ul>
"unordered list" (sırasız liste)
<ul>
<li>Gauss</li>
<li>Laplace</li>
<li>Hilbert</li>
<li>Euler</li>
</ul> <ul>
<li>Hereke MYO</li>
<ul type="disc"> <li>Kocaeli MYO</li>
<ul type="circle"> <li>Köseköy MYO</li>
<ul>
<ul type="square"> <li>Bilgisayar Programcılığı</li>
<li>Biyomedikal Cihaz Tek.</li>
<li>Kimya Tek.</li>
<li>Gıda Teknolojisi</li>
</ul>
<li>İzmit MYO</li>
</ul>
<ol>...</ol> (ordered list)
<ol type="A">
<ol> <li>Hereke MYO</li>
<li>Hereke MYO</li> <li>Kocaeli MYO</li>
<li>Kocaeli MYO</li> <li>Köseköy MYO</li>
<li>Köseköy MYO</li> </ol>
</ol> <ol type="a">
<li>Hereke MYO</li>
<li>Kocaeli MYO</li>
<li>Köseköy MYO</li>
</ol>
<ol type="I">
<li>Hereke MYO</li>
<li>Kocaeli MYO</li>
<li>Köseköy MYO</li>
</ol>
<ol type="i">
<li>Hereke MYO</li>
<li>Kocaeli MYO</li>
<li>Köseköy MYO</li>
</ol>
<dl>...</dl> (definition list; tanım listesi)
<dd>...</dd> (definition description; tanım açıklaması)
<dt>...</dt> (definition term; tanım terimi)
Yazarlar ve kitapları:
<dl>
<dt>Fakülteler</dt>
<dd>Diş Hekimliği Fakültesi</dd>
<dd>Eğitim Fakültesi</dd>
<dd>Mühendislik Fakültesi</dd>
<dt>Enstitüler</dt>
<dd>Fen Bilimleri</dd>
<dd>Sosyal Bilimler</dd>
<dd>Sağlık Bilimleri</dd>
<dt>Yüksekokullar</dt>
<dd>Beden Eğitimi ve Spor</dd>
<dd>Kocaeli Sağlık</dd>
<dd>Sivil Havacılık</dd>
</dl>
<ol>...</ol> (ordered list; sıralı listeler)
" start= " Gezegenler:
<ol type="A" start="3">
<li>Merkür</li>
<li>Venüs</li>
<li>Dünya</li>
<li>Mars</li>
<li>Jüpiter</li>
<li>Satürn</li>
<li>Uranüs</li>
<li>Neptün</li>
</ol>
ÇERÇEVELER
<frameset>...</frameset>
cols="...“
rows="...“
<frame src="...">
Name=
scrolling="no"
<noframe>...</noframe>
noresize
<iframe></iframe>
<iframe src="[Link]" width="300" height="200"></iframe>
<html>
<head>
<title>Satırsal Çerçeveler</title>
</head>
<frameset rows="100,*,60" border="0" frameborder="0" framespacing="0">
<frame src="[Link]">
<frame src="[Link]">
<frame src="[Link]">
</frameset>
</html>
MULTİMEDYA
<embed src="...">...</embed>
<center>
Bu bir wav ses dosyasıdır:<br>
<embed src=“[Link]" width="450" border="0"></embed>
</center>
<bgsound src="...">
loop="...“
<bgsound src=“[Link]" loop="-1">
<bgsound src=“[Link]" loop="infinite">
<marquee>...</marquee>
direction="...“
<marquee direction="right“>Küçük beyinler insanları, orta beyinler olayları, büyük
beyinler ise fikirleri tartışır</marquee>
behavior="...“
scroll, slide veya alternate
<marquee behavior="scroll" bgcolor="#fff8dc“>Zirvede yılana da kartala da
rastlarsınız. Birisi oraya uçarak çıkmıştır diğeri ise sürünerek </marquee>
Loop
scrollamount="...“
yazının rotası üzerinde kaç yazı karakteri kullanılacağını belirler
scrolldelay="..."
marquee metninin karakterler arasındaki kayma süresini milisaniye cinsinden tayin
eder
FORM ARAÇLARI
<form>...</form>
<input type="text">
size="...“
value="...“
maxlength="...“
Readonly
"password“
<input type="button">
<button>...</button>
<input type="image" src="...">
type="radio" ve type="checkbox"
<label for="...">...</label>
<input id="...">
<select>..</select>
<option></option>
selected
BLOKLAR
<center>...</center>
<div></div>
<div align="center">...</div>
<span>
div koduyla aynı işlevi görür ama span kodunun align parametresi yoktur.
Not: <span> kodunu Netscape Navigator 5 desteklemiyor.
<style>...</style>
style="text-align:justify"
<blockquote>...</blockquote> (alıntı bloku). Bu kod arasına yazılan yazıların solunda
ve sağında bir miktar boşluk bırakır.
<h1>...</h1>
<h1>Silgi kullanmadan resim yapma sanatına hayat diyoruz</h1>
<h2> Silgi kullanmadan resim yapma sanatına hayat diyoruz </h2>
<h3> Silgi kullanmadan resim yapma sanatına hayat diyoruz </h3>
<h4> Silgi kullanmadan resim yapma sanatına hayat diyoruz </h4>
<h5> Silgi kullanmadan resim yapma sanatına hayat diyoruz </h5>
<h6> Silgi kullanmadan resim yapma sanatına hayat diyoruz </h6>
SAYFA
ALT YAPISI
bgcolor="... "
background="... "
bgproperties="fixed" Not: Bu parametreyi Netscape gözatıcıları desteklemiyor.
link, vlink ve alink
link Hiperlinkin rengini belirler.
<body link="blue">
vlink Ziyaret edilmiş hiperlinklerin rengini belirler.
<body vlink="purple">
alink Hiperlinklerin tıklandığı andaki rengini belirler.
<body alink="red">
leftmargin Sayfanın sol kenar boşluğunu (piksel cinsinden) belirler.
<body leftmargin="0">
topmargin Sayfanın üst kenar boşluğunu belirler.
<body topmargin="40">
rightmargin Sayfanın sağ kenar boşluğunu belirler.
<body rightmargin="20">
bottommargin Sayfanın alt kenar boşluğunu belirler.
<body bottommargin="10">