İNTERNET KULLANIMI WEB SİTESİ YAPIMI E

Transcript İNTERNET KULLANIMI WEB SİTESİ YAPIMI E

Öğr. Gör. Mustafa YAVAŞ
www.mustafayavas.org
TEMEL
İNTERNET
KAVRAMLARI
Öğr. Gör. Mustafa YAVAŞ
2
İnternet Nedir?
İnternet: Dünya üzerinde bulunan birbirinden farklı büyüklükteki yerel
bilgisayar ağlarını birbirine bağlayan bilgisayar ağıdır.
Kısaca ağların ağı olarak tanımlanmaktadır.
İnternet dünyadaki bilgisayarların telefon kabloları aracılığıyla birbirine
bağlandığı ağdır.
İşlevi, üretilen her türlü bilginin saklanması, paylaşılması ve kolay erişimidir.
İnternet teknolojisi yardımıyla bilgiler insanlara kolay, ucuz, hızlı ve güvenli bir
şekilde erişebilmektedir.
 Dünya çapında bir kütüphanedir.
 Büyük bir bilgisayar ve iletişim ağıdır.
 Fikirlerin paylaşıldığı bir demokrasi platformudur.
 İnsan hayatını kolaylaştırıcı (banka, alışveriş, dergi, gazete, TV hizmetleri)
 yönleri vardır.
 Çift yönlü bilgi aktarımı yapılabilmektedir.
 İnternet birbirinden çok farklı donanım (PC, Macintosh,…) ve yazılım (İşletim
Sistemleri: UNIX, LINUX, DOS, WINDOWS, MOS, OS/2… ) özelliklerine
sahip olan bilgisayarların birbiriyle iletişim içinde bulunmasını sağlamaktadır.
Öğr. Gör. Mustafa YAVAŞ
3
İnternetin Tarihçesi
 1970 yılında Amerikan Savunma Bakanlığı tarafından, araştırma kuruluşları ve
üniversiteler arasındaki bilgi alışverişlerini sağlamak amacıyla kuruldu. O
zamanki adı ile ARPANET kurumlar arasındaki haberleşmeyi ve dosya
transferlerini sağladı.
 1980 yılının başlarında Amerikan Ulusal Bilim Vakfı (NSF), beş üniversitenin
bünyesinde bulunan süper bilgisayarları birbirine bağlamak amacıyla, aralarında
56 Kbps hızında ve TCP/IP protokolüyle konuşacak bir ağı devreye soktu.
 1989 yılının başlarında, NSF giderek artan yükü kaldırmak amacıyla ağın 45
Mbps hızına yükseltilmesi gündeme geldi. (Bu bağlantıya ise T3 adı verildi)
 1991 yılının Kasım ayında omurga T1 'den T3 'e, merkez sayısı 16 'ya, merkeze
bağlı ağ sayısı ise 3500 'e çıkartıldı. İşte bu omurga bugün İnternet dediğimiz
yapıdır.
Öğr. Gör. Mustafa YAVAŞ
4
Türkiye’de İnternet
Türkiye İnternet’e Nisan 1993'ten beri bağlıdır. İlk bağlantı ODTÜ'den
gerçekleştirilmiştir. 64kbit/san hızında olan bu 2 hat, çok uzun bir süre, tüm
ülkenin tek çıkışı olmuştur; Ege Üniversitesi'nden olan bağlantı ise, 1994
başlarında, 64kbit/san. hızı ile gerçekleştirilmiştir. Ardından sırayla, Bilkent
Ün.(1995 Eylül), Boğaziçi Üniv. (1995 Kasım) ve İTÜ (1996 Şubat) bağlantıları
gerçekleşmiştir.
İnternet'in avantajları aşağıdaki biçimde sıralanabilir.
 Fiyat açısından uygundur.
 Yerel ya da uluslararası kullanıma açıktır.
 Özel yazılım veya donanıma fazla masraf yapılmasına gerek yoktur.
 Basit bir network olmamakta, buna karşın farklı network gruplarının birleşimi
olmaktadır.
 Sadece akademisyenler, işadamları veya askeri amaçlı değil, özel ya da ticari
amaçlarla da kullanılabilir.
Öğr. Gör. Mustafa YAVAŞ
5
Network (Ağ Bağlantıları)
NETWORK (Ağ)
Farklı mekanlardaki bilgisayarların özel hatlar ya da telefon şebekesi aracılığıyla
birbirlerine bağlanmaları. Network yapıları ikiye ayrılmaktadır :
 LAN (Local Area Network) :Yakın mesafelerde (en fazla bin metre) iletişim
sağlanan network türüdür.
 WAN (Wide Area Network) : LAN ‘ların birleşmesinden oluşan, yüzlerce veya
binlerce kilometre mesafeler arasındaki iletişimin sağlandığı networktür.
TCP/IP
Transmission Control Protocol/Internet Protocol kelimelerinin baş
harflerinden oluşmuştur. Bilgisayarlar arası iletişimi sağlayan, veri aktarımını
kontrol eden ve bilgisayarlar arası organizasyonu düzenleyen veri iletişim
protokollerine verilen genel addır. Örnek olarak FTP, E-Mail ve Telnet
verilebilir.
INTRANET
İnternet ortamına bağlı olmayan, şirket içi kurumsal haberleşme ve dosya yazıcı
paylaşımları için oluşturulmuş networklerdir. Temel olarak Intranet, dış ortama
kapalı bir LAN (ya da WAN) şebekesi olarak düşünülebilir.
Öğr. Gör. Mustafa YAVAŞ
6
IP, DOMAİN, HOST , DNS?
 IP (Internet Protocol) Numarası
IP (Internet Protocol), bilgisayarların iletişim kurmasını sağlayan
standart bir protokoldür. Bilgisayarın iletişim adresidir. Örn: 192.168.2.15
 İ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.adiyaman.edu.tr gibi).
 Host(Alan Yeri)
Site dosyalarının tutulduğu yerdir. Her domain adresinin bir host alanı vardır.
 DNS (Domain Name System; Çözümleyici)
İnternette bilgisayarları tanımlama amacıyla isimlerin organize edildiği ve
dağıtıldığı sistemdir. Gelen istekleri DNS IP olarak çözümleyip Domaine
ulaşmamızı sağlar.
Öğr. Gör. Mustafa YAVAŞ
7
WEB SAYFASI NASIL AÇILIR?
1. İstemci makinenin kullanıcısı Web tarayıcısında bir hyperlink ’e tıklar.
2. Browser DNS (Domain Name Server) a bağlanıp istemde bulunduğu
sayfanın server IP sini alır.
3. Ardından Aldığı IP ye bir çağrı gönderir ve sayfayı ister.
4. Web Server da bu isteğe cevap verir ve http üzerinden sayfayı Web
Browser a gönderir.
Öğr. Gör. Mustafa YAVAŞ
8
İnternette Kullanılan Protokoller
 TCP/IP




İnternet üzerinde data iletişimi TCP/IP protokolüyle sağlanır. Bu protokolün
temel mantığı kullanıcının network ortamından bağımsız haberleşme yapması
ve iletişim kurmasına dayanmaktadır.
HTTP
HTTP sunucusu ile haberleşmenin, veri akışının sağlanmasında kullanılan HTTP
(Hyper Text TWWW (Web) sayfalarının görüntülenmesinde kullanılan bir
protokoldür. WWW ise HyperText tabanlı bilgi sistemidir, ve siteleri görmemizi
sağlar.
FTP
FTP (File Transfer Protocol) İnternete bağlı bir bilgisayardan diğerine (her iki
yönde de) dosya aktarımı yapmak için geliştirilen bir İnternet protokolü ve bu
işi yapan uygulama programlarına verilen genel addır. (Cute FTP, Filezilla gibi )
SMTP/POP
Elektronik Posta (e-mail) alışverişi için SMTP ( Simple Mail Transfer Protocol )
ve POP ( Post Office Protocol ) protokolleri kullanılır. SMTP, e-mail
gönderilmesinde, POP ise gelen maillerin alınmasında kullanılır.
TELNET/SSH
Telnet, İnternet ağı üzerinde uzak bilgisayara bağlanmak için geliştirilmiş bir
TCP/IP protokolü olup, aynı zamanda bu işi yapan programlara verilen genel
addır.
Öğr. Gör. Mustafa YAVAŞ
9
İnternet Araçları
Web Browserler; İnternette gezinmemizi sitelere giriş yapmamızı ve siteler arası
gezintileri sağlar.
Örn; İnternet Explorer, Firefox, Opera, Google Chrome, Netscape vs…
İnternet adres grupları;
 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.
Öğr. Gör. Mustafa YAVAŞ
10
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 Motorlar;
 Google.com, Yahoo.com, Hotmail.com, Astalavista.com,Hemenbul.com,
Arama.com, AdanZeye.com
Arama Teknikleri
 "..." : Tırnak içine yazdığınız değerlerin aynı sayfada olduğu sonuçları gösterir.
Örn: "araba kiralamak istiyorum“
 ….. + ….. : yazılan kelimelerin 2 sininde listelenen sitelerde yer almasını sağlar.
Örn: adıyaman + nemrut
 allintitle: bu kullanım ile site başlıklarında arama yapabilirsiniz.
Örn: allintitle: araba kirala
 site: Bu operatörü kullanarak, herhangi bir web sitesi içerisinde arama
yapabilirsiniz.
Örn: [site:www.adiyaman.edu.tr.com Teknik Bilimler MYO]
 AND ve OR ile arama yapılabilir.
Öğr. Gör. Mustafa YAVAŞ
11
İnternet Araçları
 Yeni E-Mail Hesabı Açma(hotmail, yahoo, gmail)
 Hesap Kullanımı
 Outlook Express kurulumu
 MSN kurulumu ve kullanımı
 Yahoo Messenger
 Facebook kullanımı
 Forum sitlerine üyelik
 Upload/Download yapma
 İnternet Explorer Kullanımı
Bilgisayar Güvenliği

İnternette çıkış yapan yada yapmayan her Pc de güvenlik sorunu
mevcuttur. Güvenli olarak internette gezinmek için mutlaka PC ye
anti-virüs programları yüklenmesi gerekmektedir. Bunlar, Nod32,
Avira, Kaspersky, Norton gibi anti virüs ve anti spam yazılımlarıdır.
Unutmayınki anti-virüs programları 100% güvenlik sağlamaz, bu yüzden
kullanıcıların internette bilinçli gezinmeleri gerekir.
Öğr. Gör. Mustafa YAVAŞ
12
Bilgisayar Ağ Bağlantı Ayarları
1. Ağ bağlantılarım kısmından, ağ
bağlatıları görüntüle simgesine sağ
tıklanıp Özellikler sekmesine tıklanarak
verilen sayfa açılır burada bilgisayarın
internet durumu görüntülenir. Burada
gelen ve gönderilen paketlerin istatistiği
mevcuttur.
2. Ayrıntılara tıklanarak IP adreslerini
görebiliriz.
3. Özelliklere tıklanarak IP değerleri
atanabilir ve değiştirilebilir.
Öğr. Gör. Mustafa YAVAŞ
13
Şema olarak İnternet
Öğr. Gör. Mustafa YAVAŞ
14
Dreamweaver Editörü ile HTML,
CSS, JavaScript kullanarak Web
Sayfası Oluşturma
Öğr. Gör. Mustafa YAVAŞ
15
Kavramların Tanımı
HTML = Hypertext Markup Language
(Hareketli Metin İşaretleme Dili)
CSS = Cascading Style Sheets (Geçişli Stil Kağıtları)
JavaScript : Dinamik ve kaliteli Web sayfası yapmayı
sağlayan HTML ile entegreli çalışabilen script dilidir.
Dreamweaver : Web Sayfası kodlama ve tasarım yapmayı
sağlayan editör programıdır.
Öğr. Gör. Mustafa YAVAŞ
16
Kavramların Tanımı
HTML = Hypertext Markup Language
(Hareketli Metin İşaretleme Dili)
CSS = Cascading Style Sheets (Geçişli Stil Kağıtları)
JavaScript : Dinamik ve kaliteli Web sayfası yapmayı
sağlayan HTML ile entegreli çalışabilen script dilidir.
Dreamweaver : Web Sayfası kodlama ve tasarım yapmayı
sağlayan editör programıdır.
Öğr. Gör. Mustafa YAVAŞ
17
HTML ?
HTML = Hypertext Markup Language (Hareketli Metin
İşaretleme Dili)
 HTML dokümanları metin ve etiketlerden meydana gelir.
HTML etiketleri açılır parantez içerisinde yazılır. HTML
etiketlerinin çoğu slash / karakteri ile biten etiket ile
kapatılarak bloklar halinde kullanılır.
<HTML> (açılış)
……
</HTML> (kapanış)
Öğr. Gör. Mustafa YAVAŞ
18
HTML’de Yapısal Etiketler
Yapısal etiketler web sayfasında farklı bölümler tanımlamak
için kullanılır. Bunlar;
Öğr. Gör. Mustafa YAVAŞ
19
Örnek HTML Sayfası!
<HTML>
<HEAD>
<TITLE>İlk Web Sayfamın Başlığı</TITLE>
</HEAD>
<BODY>
<!—Bu örnek bir açıklama-->
Buraya Sayfada görünecek metinler,resimler,
şekiller, kodlamalar gelecek
</BODY>
</HTML>
Farklı kaydet ile ilk_sayfa.html olarak kayıt edilir.
Öğr. Gör. Mustafa YAVAŞ
20
Etiket Özellikleri(Tag Attributes)
<HEAD> Etiketi
Bu etiket içerisinde yazılanlar sayfada gözükmezler. Bu etikette ;
<TITLE> …. </TITLE> , <META> , (CSS) <STYLE> (JavaScript, VBScript)
<SCRIPT> mevcuttur.
<BODY> Etiketi
<BODY> etiketleri ile tanımlanan <BODY> bölümüne sayfamızda görünmesini
istediğimiz bilgileri yazarız. <BODY> etiketi birçok özelliğe sahiptir. Bunların çok sık
kullanılanları;
• BACKGROUND (Arka plana resim ve renk yerleştirme)
• BGCOLOR (Arka planı renklendirir)
• TEXT: Metin rengi
• LINK: Ziyaret edilmemiş link rengi
• VLINK: Ziyaret edilen link rengi (vizited link)
• ALINK: Kullanıcı Mouse ile linke tıkladığında Mouse basılı iken gözükür.
olan renktir.
• BGPROPERTIES: Bu özelliğe Fixed değeri atandığında arka plan resmi sabit
olup kaydırma çubuğu ile arka plan resmi hareket etmeyecektir.
Öğr. Gör. Mustafa YAVAŞ
21
Etiket Özellikleri(Tag Attributes)
<HTML>
<HEAD>
<TITLE>WEB SAYFAMA HOŞGELDİNİZ</TITLE>
</HEAD>
<BODY background="bg.jpg" bgcolor="gray" text="white"
link="yellow" vlink="aqua" alink="olive"
bgproperties="fixed">
<H1 align="center">WEB SAYFAMA HOŞGELDİNİZ</H1>
<H2>RÜ Web Sayfası</H2>
Rize Üniversitesinin Sayfasına Gitmek İçin
<A href="http://www.rize.edu.tr">Tıklayınız</A>
<BR>
Karadeniz Teknik Üniversitesinin Sayfasına Gitmek İçin
<A href="www.ktu.edu.tr">Tıklayınız</A>
</BODY>
</HTML>
Farklı kaydet ile deneme.html olarak kayıt edilir.
Öğr. Gör. Mustafa YAVAŞ
22
Belge
Biçim
Etiketleri
HTML çok sayıda biçimlendirme etiketi sunar. Bu etiketlerle belgede başlık
oluşturur, metni kalın, italik, altçizgili yapar, madde imlerini oluşturur ve
yatay çizgiler oluşturabilirsiniz. Bunlardan bazıları aşağıdaki tablodadır.
Öğr. Gör. Mustafa YAVAŞ
23
Belge Biçim Etiketleri
Öğr. Gör. Mustafa YAVAŞ
24
Başlık Etiketlerinin (Header Tags) Kullanımı
Bu etiketin başında ve sonunda Web Browser otomatik olarak satır
kırma karakteri kullanır.
Örnek: header.html
<HTML>
<HEAD>
<TITLE>Header Etiketleri</TITLE>
</HEAD>
<BODY>
<H1>Header 1</H1>
<H2>Header 2</H2>
<H3>Header 3</H3>
<H4>Header 4</H4>
<H5>Header 5</H5>
<H6>Header 6</H6>
</BODY>
</HTML>
Öğr. Gör. Mustafa YAVAŞ
25
META Etiketlerinin HEAD İçinde Kullanımı
<META http-EQUIV=”Content-Type”
CONTENT=text/html; CHARSET=iso-8859-9”>
Yada
<META http-equiv="Content-Type"
content="text/html; charset=windows-1254“>
<!–-Sitenin dilini belirtir ve Türkçe karakter
sorununu giderir-->
<META NAME=”GENERATOR” Content=”Homesite 4.5”>
<META NAME=”Author”content=”Mustafa YAVAŞ”>
<!–-Sitenin tasarımcısı ve kodlayanı-->
<META NAME=”Keywords” Content=”HTML,CSS, HTML
Dersleri, ders notları vs… “>
<!–-Arama Motorlarında(Google gibi) sitenin
içeriğine ulaşılması, üst sayfalarda çıkması
için, ilgili meta’ların yazılması ile olur.
-->
Öğr. Gör. Mustafa YAVAŞ
26
Metin
Biçimlendirme
Etiketlerinin
Kullanımı
Farklı metin biçimleri kullanmak için bu etiketleri kullanırız.
HTML satır kırmalarını, sekme karakterlerini, sıralı duran boşluk karakterlerini
tek bir boşluk karakteri olarak algılar. Bu yüzden satır kırma(alt satır) için <P> ve
<BR> etiketlerini kullanırız.
<BODY>
<H1>Metin Biçimleri </H1>
<STRONG>Güçlü Vurgu STRONG (Strong Emphasis) Metni</STRONG>
<BR>
<B>Kalın B (Bolt) Gibi Gözüküyor.</B>

<EM>Vurgu EM (Emphasis) Metni</EM>
<BR><I>İtalik I (Italic) Gibi Gözüküyor.</I>
<PRE>
Bu Metin PRE (Preformatted) Etiketi Kullanılarak Yazılan
Metindir.
Başka Bir Satır ve biraz boşluk<BR>
</PRE>
<HR>
Birkaç Metin Yazalım.
12
<BR>Bu Satırdan Önce Bir BR etiketi Var.
<P>Bu Satırdan Önce P Etiketi Var.</P>
Birkaç Metin Daha
<DIV>Bu Satırdan Önce DIV Etiketi Var.</DIV>
Bu Kadar Metin Yeter.
</BODY>
Öğr. Gör. Mustafa YAVAŞ
27
<FONT> Etiketi Kullanımı
Bu etiketler arasında bulunan metnin font ayarlarının yapıldığı
etiketidir. Bu etiketin bazı özellikleri;
• Size: Yazı boyutunu temsil eder.
• Color: Yazı rengi
Örnek: font1.html
<BODY bgcolor="#000000" text="#FFFFFF">
<H1>Kaptanın Seyir Defteri</H1>
<BR clear="all">
<SMALL>Bu metin SMALL etiketi ile yazılmıştır.</SMALL>
<BIG>Bu metin iki tane BIG etiketi ile
yazılmıştır.</BIG>
<P>
<FONT size="3" color="#FF0000">
Buradaki metin özellikleri size="3" ve color="#FF0000"
dir.
</FONT>
</P>
Öğr. Gör. Mustafa YAVAŞ
28
</BODY>
Listeler Oluşturmak
Listeler oluşturmak için aşağıdaki iki seçenekten birini kullanabilirsiniz.
• <UL>: Unordered (Madde İmli) Listeler
• <OL>: Ordered (Otomatik Numaralı) Listeler ; <OL> etiketinin TYPE özelliğine 1, a, A, I ya da i
değerlerini atayarak numaranın stilini değiştirebilirsiniz. Varsayılan değeri “1” dir.
Kullandığınız stil hangisi olursa olsun. Maddelere <LI> ile işaret ederiz.
Aşağıdaki örnekte olduğu gibi bir liste içinde alt listeler de oluşturabiliriz.
<BODY bgcolor="aqua">
<H2>Karadeniz Bölgesi</H2>
<H3>
<UL>
<LI>Rize</LI>
<LI>
Trabzon
<UL>
<LI>Sürmene</LI>
<LI>Araklı</LI>
<LI>Of</LI>
</UL>
</LI>
Öğr. Gör. Mustafa YAVAŞ
<LI>Samsun</LI>
<LI>Sinop</LI>
<LI>Artvin</LI>
</UL>
</H3>
<H2>Güney Doğu Bölgesi</H2>
<H3>
<OL>
<LI>Gaziantep</LI>
<LI>Şanlıurfa</LI>
<LI>Diyarbakır</LI>
<LI>Adıyaman</LI>
</OL>
</H3>
</BODY>
29
Hyperlink (Köprü veya link atama)
Sayfalara link (bağlantılar) oluşturmak için <A> Anchor etiketi kullanılır.
<A> etiketini kullanarak;
• Kendi Web Sitenizde başka bir Web Sayfasına http hyperlinki,
• Başka bir Web Sitesinin bir sayfasına http hyperlinki,
• Dosya download etmek için bir ftp linki,
• Mail mesajı oluşturmak için bir mailto linki oluşturabilirsiniz.
• <A> etiketinin TARGET özelliğine “_blank” değerini atayarak linkin yeni
bir Web Tarayıcısı penceresinde açılmasını sağlayabiliriz ve “_self” , “_parent” kullanınız.
<HTML>
<HEAD>
<TITLE>RMYO Lİnk Sayfası </TITLE>
<META http-equiv="Content-Type" content="text/html;
charset=windows-1254">
</HEAD>
<BODY bgcolor="yellow" text="blue" link="green" vlink="red"
alink="fuchsia">
<H1>Bazı Sık Kullanılan Linkler</H1>
<H3>
<A href=“index.html“>Anasayfa</A><BR>
<A href=“iletisim.html“>İletişim Sayfası</A><BR>
<A href=“http://www.mustafayavas.com">Web Sayfam</A><BR>
<A href=“../images/resim.jpg">Resim Görüntüle  </A><BR>
<A href=“ftp://rapid.com/dersnotu.zip">Ders Notu İndir!</A><BR>
<A href=“mailto:[email protected]">Mail Gönder >></A><BR>
</H3>
</BODY>
Öğr. Gör. Mustafa YAVAŞ
</HTML>
30
<IMG> Etiketinin Kullanımı
Sayfaya ekleyeceğimiz resmin kaynağını <IMG src> özelliği ile, resim
göstermeyi desteklemeyen tarayıcılarda resim yerine gösterilecek olan metin
de <IMG alt> özelliği ile belirtilir
Resim Formatları
Web de kullanılan iki resim formatı vardır. Bunlar;
GIF, JPEG/JPG, PNG vs…
<HTML>
<HEAD>
<TITLE>Rize MYO </TITLE>
<META http-equiv="Content-Type" content="text/html;
charset=windows-1254">
</HEAD>
<BODY text="#0000CC">
<DIV align="center"><IMG src=“/logo.jpg" alt=“Rize
Üniversitesi Logosu"></DIV>
<H1 align="center">Rize Üniversitesi<BR>
Rize Meslek Yüksekokulu</H1>
</BODY>
</HTML>
Öğr. Gör. Mustafa YAVAŞ
31
<IMG> Etiketinin Özellikleri
HTML ’nin çoğu taglarından farklı olarak <IMG> etiketinin kapama etiketi yoktur. Bazı özellikleri
şunlardır;
src: Resmin bulunduğu dosya ve yol ismi
alt: Resim göstermeyi desteklemeyen tarayıcılar ya da resim yüklenirken resmin yerinde gözükecek
olan metindir.
align: Resmin sayfada farklı hizalamada kullanılır. Left, right, top, middle veya bottom olabilir.
hspace: Resmin etrafındaki yatay boşluk
vspace: Resmin etrafındaki dikey boşluk
height: Pixel olarak resmin yüksekliği
width: Pixel olarak resmin genişliği
border: Resmin etrafındaki çerçeve kalınlığıdır. “0” değeri verilerek çerçeve kaldırılabilir.
Align Özellikleri
Sayfadaki diğer elemanlarla resmin nasıl hizalanacağını kontrol etmek için bu özelliği kullanırız.
Varsayılan olarak tarayıcı resmi sola hizalar ve resimden sonra gelen eleman resmin yanına yerleşir.
Top: Resimden sonra gelen metinlerin üst satırı resmin üstü ile hizalanır.
Middle: Resimden sonra gelen metinlerin üst satırı resmin ortası ile hizalanır.
Bottom: Resimden sonra gelen metinlerin üst satırı resmin altı ile hizalanır.
Left: Resim sayfanın soluna hizalanır. Resimden sonra gelen metnin tümü
üstten itibaren resmin sağına yerleşir.
Right: Resim sayfanın sağına hizalanır. Resimden sonra gelen metnin tümü
üstten itibaren resmin soluna yerleşir.
Öğr. Gör. Mustafa YAVAŞ
32
<IMG> Etiketinin Özellikleri Örneği
<HTML>
<HEAD>
<TITLE>Rize MYO</TITLE>
<META http-equiv="Content-Type" content="text/html;
charset=windows-1254">
</HEAD>
<BODY text="#0000CC">
<IMG src=“logo.jpg" align="left">

<H1>Resmin Align Özelliği</H1>
Bakalım resimden sonra yazmış olduğumuz metinler nereye
yerleştiriliyor.
Bakalım resimden sonra yazmış olduğumuz metinler nereye
yerleştiriliyor.
Bakalım resimden sonra yazmış olduğumuz metinler nereye
yerleştiriliyor.
Bakalım resimden sonra yazmış olduğumuz metinler nereye
yerleştiriliyor.
Bakalım resimden sonra yazmış olduğumuz metinler nereye
yerleştiriliyor.
</BODY>
</HTML>
Öğr. Gör. Mustafa YAVAŞ
33
<BR clear=”all”> Etiketinin Kullanımı
Bazen align özelliğine verdiğimiz değere göre metin resmin etrafını çevreler.
Align özelliğini kaybetmesini istediğimiz yerde <br clear=”all”> etiketini kullanırız.
<BODY text="#0000CC">
<IMG src=“logo.jpg" align="left">

<H1>Resmin Align Özelliği</H1>
Bakalım resimden sonra yazmış olduğumuz metinler nereye
yerleştiriliyor.
Bakalım resimden sonra yazmış olduğumuz metinler nereye
yerleştiriliyor.
<br clear="all"> 
Bakalım resimden sonra yazmış olduğumuz metinler nereye
yerleştiriliyor.
Bakalım resimden sonra yazmış olduğumuz metinler nereye
yerleştiriliyor.
Bakalım resimden sonra yazmış olduğumuz metinler nereye
yerleştiriliyor.
</BODY>
Öğr. Gör. Mustafa YAVAŞ
34
Height ve Width Özellikleri
Resmin boyutlarını pixel olarak biçimlendirmede kullanılır.
<HTML>
<HEAD>
<TITLE>Rize MYO</TITLE>
<META http-equiv="Content-Type" content="text/html;
charset=windows-1254">
</HEAD>
<BODY>
<H2>Orantılı Olarak Küçültülürse</H2>
<IMG src="dikkat.gif" width="200" height="180">
<IMG src="dikkat.gif" width="100" height="90">
<IMG src="dikkat.gif" width="50" height="45">
<H2>Orantısız Olarak Küçültülürse</H2>
<IMG src="dikkat.gif" width="200" height="180">
<IMG src="dikkat.gif" width="200" height="90">
<IMG src="dikkat.gif" width="200" height="45">
</BODY>
</HTML>
Öğr. Gör. Mustafa YAVAŞ
35
Resim ve Hyperlink’ler
Bir resme hyperlink eklemek için <IMG> ve <A> etiketlerini birlikte kullanırız.
<HTML>
<HEAD>
<TITLE>Karasu MYO (015_images.htm)</TITLE>
<META http-equiv="Content-Type" content="text/html;
charset=windows-1254">
</HEAD>
<BODY>
<A href=“http://www.mustafayavas.com"><IMG src="b1.gif" align="middle"
border="0"></A>
Resim 1 Örneği <br clear="left"><BR>
<A href=" http://www.rize.edu.tr"><IMG src="b2.gif" align="middle"
border="0"></A>
Resmin 2 Align Özelliği <br clear="left"><BR>
<A href=“resim3.html"><IMG src="b3.gif" align="middle"
border="0"></A>
Resim 3 - BR etiketinin clear özelliği <br
clear="left"><BR>
<A href=“sayfa.html"><IMG src="b4.gif" align="middle"
border="0"></A>
Sayfa 4 -- Width ve Height Özelliği <br clear="left"><BR>
<A href=“index.html"><IMG src="b5.gif" align="middle"
border="0"></A>
Anasayfa -- Sayfanın Kendisi
</BODY>
</HTML>
Öğr. Gör. Mustafa YAVAŞ
36
Özel Karakterler
HTML metin içerisine özel karakterleri yazmak için aşağıdaki format kullanılır.
xxx ISO karakter kodu olmak üzere;
&#xxx;
şeklindedir. Örneğin copyright sembolü için “©” yazılır.
Buna ilaveten HTML çok sık kullanılan bazı özel karakterler için aşağıdaki gibi
kısa yola sahiptir.
 
"
<
>
&
©
non-breaking space(boşluk) ( )
quote character (“)
less-then charakter (<)
greater-then charakter (>)
ampersand charakter (&)
copyright symbold charakter (©)
Öğr. Gör. Mustafa YAVAŞ
37
Tablo Oluşturma
Tablo oluşturmak için HTML de beş etiket vardır. Bu etiketler;
Öğr. Gör. Mustafa YAVAŞ
38
Tablo Örnek!
<TITLE>Ürünler Sayfası</TITLE>
<META http-equiv="Content-Type" content="text/html;
charset=windows-1254">
</HEAD>
<BODY text="#FFFFFF">
<TABLE border="2">
<CAPTION>
<B>Kampanya Ürünlerimiz</B>
</CAPTION>
<TR>
<TH>Ürünler</TH>
<TH>Açıklama</TH>
24
<TH>Fiyatı</TH>
</TR>
<TR>
<TD>17“ LG (Goldstar) Monitör</TD>
<TD>Peşin Fiyatına 5 taksit</TD>
<TD>$300</TD>
</TR>
<TR>
<TD>HP Dijital Fotoğraf Makineleri</TD>
<TD>Dijital sözlük hediyeli</TD>
<TD>$200</TD>
</TR>
<TR>
<TD>Sony Hi8 Kamera</TD>
<TD>Kampanyada son 10 gün</TD>
<TD>$700</TD>
</TR>
</TABLE>
Öğr. Gör. Mustafa YAVAŞ
</BODY>
39
<TABLE> Etiketi
<TABLE> etiketi kullanmak zorunda olmadığımız birkaç özelliğe sahiptir.
Öğr. Gör. Mustafa YAVAŞ
40
<TR> Etiketi
<TR> etiketi iki tane özelliğe sahiptir. Bunlar;
ALIGN : Satırdaki hücrelerin içeriğinin yatay hizalamasını kontrol eder.
left, right, center olabilir.
VALIGN : Satırdaki hücrelerin içeriğinin dikey hizalamasını kontrol eder. top,
middle, bottom olabilir.
<TH> ve <TD> Etiketleri
ALIGN : Hücre içeriğinin yatay hizalamasını kontrol eder.
VALIGN : Hücre içeriğinin dikey hizalamasını kontrol eder.
NOWRAP : Kelime aralarında satır sonu kırmalarını pasif yapar. (Word Wrapping)
ROWSPAN : Bir hücrenin genişletileceği satır sayısını belirtir. Varsayılanı 1 dir.
COLSPAN : Bir hücrenin genişletileceği sütun sayısını belirtir. Varsayılanı 1dir.
WIDTH : Hücrenin pixel olarak genişliği
HEIGHT : Hücrenin pixel olarak yüksekliği
Öğr. Gör. Mustafa YAVAŞ
41
Örnek!
<BODY text="#FFFFFF">
<TABLE align="center" border="2" width="80%">
<CAPTION>
<B>Fiyat Listesi</B>
</CAPTION>
<TR>
<TH rowspan="2" width="50%">Ürünler</TH>
<TH colspan="2">Fiyat</TH>
</TR>
<TR>
<TH width="15%">Toptan</TH>
<TH width="15%">Perakende</TH>
</TR>
<TR>
<TD>HP Dijital Fotoğraf Makineleri</TD>
<TD align="center"><I>$500</I></TD>
<TD align="center">$600</TD>
</TR>
<TR>
<TD>Goldstar (LG) 17" Monitör</TD>
<TD align="center"><I>$250</I></TD>
<TD><CENTER>$300</CENTER></TD>
</TR>
</TABLE>
</BODY>
Öğr. Gör. Mustafa YAVAŞ
42
Frame (Çerçeve) Kullanımı
HTML çerçevelerini (frame) kullanarak çok pencereli sayfalar oluşturabiliriz.
Çerçeveler HTML 3.2 nin bir standardı değildir. Fakat web tarayıcılarının hemen
hemen hepsi destekler.
Aşağıdaki etiketleri kullanarak ana frame penceresini oluştururuz.
Öğr. Gör. Mustafa YAVAŞ
43
<FRAMESET> Etiketi
Çerçeveli belge oluşturacağımız zaman, çerçevenin yapısını belirtmek için <FRAMESET>
ve <FRAME> etiketlerini kullanırız. <FRAMESET> i kullanarak çerçeveleri satırlar ve
sütunlar olarak ya da her ikisini kullanacak şekilde tanımlayabilirsiniz.
<FRAMESET> etiketi iki tane özelliğe sahiptir;
• COLS: Sütun çerçevenin sayısını ve büyüklüğünü belirler
• ROWS: Satır çerçevenin sayısını ve büyüklüğünü belirler.
Aşağıdaki tabloda bir web sayfasının çerçevesinin nasıl tanımlanacağının
birkaç örneği vardır.
<FRAMESET COLS=“100,100,*”>
Üç sütunlu çerçeve; ilk ikisi 100 piksel genişliğinde, üçüncüsü ise kalan
boşluğun tamamı büyüklüğünde.
<FRAMESET COLS=“100,30%,*”>
Üç sütunlu çerçeve; birincisi 100 piksel, ikincisi browserın %30 u ve üçüncüsü
de kalan boşluğun tamamı büyüklüğünde.
<FRAMESET ROWS=“20%,*,30%”>
Dört satırlı çerçeve; birincisi web tarayıcısının %20 si yüksekliğinde, ikincisi
kullanılabilecek alanın tamamı, üçüncüsü ise tarayıcının %30 u
yüksekliğindedir.
Öğr. Gör. Mustafa YAVAŞ
44
<FRAME> Etiketi
<FRAMESET> ile çerçeve sayfası tanımlandıktan sonra her bir çerçeve penceresinin kaynağını
belirtmeliyiz. Bunu da <FRAME> etiketi ile yaparız.
Özellikleri;
Öğr. Gör. Mustafa YAVAŞ
45
FRAME Örnek!
Örnek: 021_frame1.htm
<HTML>
<HEAD>
<TITLE>Frameset Örneği</TITLE>
</HEAD>

<FRAMESET cols="33.33%,33.33%,*">

<FRAME src="021_left.htm"
name="leftFrame" >
<FRAME src="021_main.htm"
name="mainFrame">
<FRAME src="021_right.htm"
name="rightFrame">
</FRAMESET>
<NOFRAMES>
<BODY>
Web Tarayıcınız Frame i
Desteklemiyor...
</BODY>
</NOFRAMES>
</HTML>
Öğr. Gör. Mustafa YAVAŞ
021_page1.htm
<HTML>
<HEAD>
<TITLE>Sol Çerçeve</TITLE>
</HEAD>
<BODY bgcolor="#FFFF00">
<DIV align="center">
<H1>Sarı Çerçeve</H1>
</DIV>
</BODY>
</HTML>
021_page2.htm
<HTML>
<HEAD>
<TITLE>Kırmızı Çerçeve</TITLE>
</HEAD>
<BODY bgcolor="#FF0000">
<DIV align="center">
<H1>Kırmızı Çerçeve</H1>
</DIV>
29
</BODY>
</HTML>
021_page3.htm
<HTML>
<HEAD>
<TITLE>Untitled Çerçeve</TITLE>
</HEAD>
<BODY bgcolor="#0000FF">
<DIV align="center">
<H1>Mavi Çerçeve</H1>
</DIV>
</BODY>
</HTML>
46
<IFRAME> Etiketi
Bu ağ ile HTM kodları arasına bir çerçeve açılıp bu çerçevede başka bir sayfa
gösterilebilir.
Özellikleri ;
Örnek:
<BODY>
<IFRAME src="021_frame1.htm" align="center" height="400"
width="500" frameborder="1" scrolling="yes">
</IFRAME>
</BODY>
Öğr. Gör. Mustafa YAVAŞ
47
HTML Formları
HTML nin en önemli araçlarından biri de bilgi girişinde kullanılan form
kontrolleridir. Formları bilgi girişinin haricinde bilgi gösterme maksadı ile de
kullanabiliriz.
<FORM> Etiketi
HTML belgemizde formlar <FORM> ve </FORM> etiketleri arasında
oluşturulur. Özellikleri:
ACTION : Formun onay buttonuna basıldığında form bilgilerinin
gönderileceği URL yi belirtir.
METHOD : Formun bilgilerinin hangi metotla Server’a gönderileceğini tutar.
Get ya da Post olabilir. Varsayılan Get tir. Çok fazla veri gönderileceği zaman
çoğunlukla Post metodunu kullanırız. Get metodunda form ile gönderilen
veriler URL nin sonuna eklenir.
Öğr. Gör. Mustafa YAVAŞ
48
Kontrol Tipleri
HTML nin form kontrolleri <INPUT>, <TEXTAREA> ve <SELECT> etiketleri
ile oluşturulur.
Öğr. Gör. Mustafa YAVAŞ
49
Kontrol Tipleri-1
Öğr. Gör. Mustafa YAVAŞ
50
<INPUT>
Etiketi
Bu HTML etiketi ile birden fazla kontrol çeşidi oluşturuyoruz. Her bir çeşidin hangi
özelliklere sahip olduğu be bu özelliklerinin anlamları:
Öğr. Gör. Mustafa YAVAŞ
51
<TEXTAREA> Etiketi
Çok satırlı metin kutusu oluşturmada kullanılır.
Kullanımı:
<TEXTAREA name=”adi” rows=”m” cols=”n”>
Sayfa yüklendiğinde kontrolde gözükecek olan metin
</TEXTAREA>
<SELECT> ve <OPTION> Etiketleri
Kontrolü oluşturmak için <SELECT> ve </SELECT> etiketi kullanılır. Bu kontrollerde gözükecek
her bir seçenek <OPTION> etiketi ile oluşturulur.
Kullanımı:
<SELECT name=”adı” size=”n”>
<OPTION value=”değer1”> Gözüken Metin1</OPTION>
<OPTION value=”değer2”> Gözüken Metin2</OPTION>
</SELECT>
Öğr. Gör. Mustafa YAVAŞ
52
<SELECT> Özellikleri:
Eğer size>1 ise kontrol ListBox stilinde gözükür. Size=1 ise (varsayılan budur) ComboBox
(Drop-Down Menu) stilinde gözükecektir.
<OPTION> Özellikleri:
Öğr. Gör. Mustafa YAVAŞ
53
Örnek!
<HTML>
<HEAD>
<TITLE>Müşteri Kayıt Formu</TITLE>
</HEAD>
<BODY background="bg.jpg" text="#FFFF00">
<H2><FONT color="#FF0001">Müşteri Kayıt
Formu</FONT></H2>
<H3>
<FORM action="hedefdosya.htm" method="post"
name="frmMusteri">
<TABLE>
<TR>
<TD> <B>Adı : </B></TD>
<TD><INPUT type="text" name="txtAdi" size="30"></TD>
</TR>
<TR>
<TD><B>Soyadı : </B></TD>
<TD><INPUT type="text" name="txtSoyadi" size="30"></TD>
</TR>
<TR>
<TD><B>E-Mail : </B></TD>
<TD><INPUT type="text" name="txtEmail" size="30"></TD>
</TR>
<TR>
<TD><B>Adres : </B></TD>
<TD><INPUT type="text" name="txtAdres" size="43"></TD>
</TR>
<TR>
<TD><B>Şehir, Ülke, Posta Kodu : </B></TD>
<TD><INPUT type="text" name="txtSehir" size="20">
 
<INPUT type="text" name="txtUlke" size="20">
  <INPUT type="text" name="txtPostaKodu"
size="10"> </TD>
</TR>
Öğr. Gör. Mustafa YAVAŞ
<TR>
<TD><B>Açıklama : </B></TD>
<TD><TEXTAREA name="textareaAciklama" rows="2"
cols="30">Buraya Herhangi Bir Açıklama
Yazınız.</TEXTAREA></TD>
</TR>
<TR>
<TD><B>Yaş : </B></TD>
<TD><SELECT name="cboxYas" size="1">
<OPTION value="0"> 0 - 11</OPTION>
<OPTION value="1">12 - 19</OPTION>
<OPTION value="2">20 - 29</OPTION>
<OPTION value="3">30 - 39</OPTION>
<OPTION value="4">40 + </OPTION>
</SELECT></TD>
</TR>
<TR>
<TD><B>Çalışmalarımızı Başarılı Buluyor Musunuz?
</B></TD>
<TD><INPUT type="radio" name="radMailListesi"
checked
value="evet"> Evet
<INPUT type="radio" name="radMailListesi"
value="hayir"> Hayır </TD>
</TR>
<TR>
<TD><INPUT type="submit" name="kaydet"
value="Kaydet"></TD>
<TD><INPUT type="reset" name="temizle"
value="Temizle"></TD>
</TR>
</TABLE>
</FORM></H3>
</BODY>
</HTML>
54
CSS (Cascading Style Sheets)
STİL ŞABLONLARININ HTML İLE
KULLANIMI
Öğr. Gör. Mustafa YAVAŞ
55
CSS (STİL ŞABLON)
CSS (Cascading Style Sheets) diğer deyimiyle Stil Şablon HTML yazım şekli olarak
etiket türünde bir yazım dilidir. Sahip olduğu özelliklerin kısıtlı olması nedeniyle
sayfanın dizaynında bize tam esneklik veremese de büyük kolaylıklar
sağlamaktadır.
STİL ŞABLON ÇEŞİTLERİ
Css’in (Stil Şablon) 3 farklı kullanım alanı vardır.
Bu alanlar;
1. Yerel, yani sayfada sadece bir kez, Yerel stil şablonlar bir html etiketi için özel
olarak kullanılırlar.
2. Global, yani tüm sayfa için, Global stil şablonlar sayfadaki tüm html
etiketlerinin belirlenen özellikte olması istendiğinde kullanılırlar.
3. Bağlantılı, yani birden çok sayfa için, Bağlantılı stil şablonlar birçok sayfada
aynı biçimde olması istendiğinde kullanılırlar.
Öğr. Gör. Mustafa YAVAŞ
56
Yerel Stil Şablonu
Yerel Stil Şablonlar, uygulanacak etiketi sadece bir kez bulunduğu yerde (yerel) etkiler.
Örnek:
<html>
<head>
<title>Css</title>
</head>
<body>
<h2>CSS Kullanımı</h2><br>
<h2 style=font-size:20pt; color:blue>CSS Kullanımı</h2>
</body>
</html>
Öğr. Gör. Mustafa YAVAŞ
57
Global Stil Şablonu
Global Stil Şablonları bir önceki örnekte yaptığımız h2 etiketinin tüm sayfada
aynı özellikte olması istendiğinde kullanılır. Bunu için Stil Şablon özellikleri sayfanın
başlangıcında (<head></head> etiketleri arasında) tanımlanır.
Örnek:
<html>
<head>
<title>Css</title>
<style type="text/css">

</style>
</head>
<body>
<h2>Web Teknikleri</h2>
</body>
</html>
Öğr. Gör. Mustafa YAVAŞ
58
Bağlantılı Stil Şablon
Global stil şablonu, sitemiz içerisindeki tüm sayfalarda aynı stil özelliklerini kullanmak
istediğimizde kullanırız. Bu stil listesini html dosyamızın içerisinde değil de boş bir sayfaya
yazarız ve css uzantılı bir şekilde kaydederiz. Ardından da html dosyamızın içerisine yine
<head> </head> etiketleri arasına <link rel="stylesheet“ type="text/css"
href="dosya_ismi.css"> şeklinde ekleriz.
Örnek : Stil.css
h1 {font-size:13pt; color:green}
h2 {font:20pt; color:blue}
h3 {font-size:15pt; color:red}
Örnek : Stilkullan.html
<html>
<head>
<title>Css</title>
<link rel="stylesheet" type="text/css" href="stil.css">
</head>
<body>
<h1>Web Teknikleri</h2>
<h2>Web Teknikleri</h2>
<h3>Web Teknikleri</h2>
</body>
Öğr. Gör. Mustafa YAVAŞ
</html>
59
HTML ETİKETLERİ İLE CSS
Font Özellikleri
Font özelliklerini değiştirmeye yarayan bir stil şablon özelliğidir. Özellikler;
xx-large (en büyük ) , x-large (biraz büyük) , large (büyük), medium (orta), small(küçük) , x-small (biraz küçük), xxsmall (en küçük),
Alt Özellikler:
• font-family : Font tipini belirler. Arial, Courier, Verdana gibi font
isimlerini alabilir.
• font-weight : Fontun kalınlı incelik durumunu belirler.
• bold : Fontu kalın yapar.
• normal : Fontun normal halde olmasını sağlar. Bu özellik yazılmadığında
normal özellik alınır.
• font-style : Fontun yatık olup olmamasını sağlar.
• italic : Yazının sağa doğru yatık olmasını sağlar.
• color : Fontun rengini belirler. Blue, red,green gibi renklerin ingilizce
karşılıklarını alabilir.
Örnek:
<html><body><head>
<title>Css</title>
<style type="text/css">
p {font-size : 12pt;font-family : Arial;font-weight : bold;font-style
:italic;color : #00FFFF;}
</style>
<body>
<p>Web Teknikleri</p>
</body></html>
Öğr. Gör. Mustafa YAVAŞ
60
Text Özellikleri
Text özelliği ile de font özelliğinin sahip olmadığı bazı özellikleri etiketimize ekleriz.
Örnek :
<html><body><head>
<title>Css</title>
<style type="text/css">
<!—
p {
text-transform : lowercase;
text-decoration : underline;
text-align : left;
line-height : 20px;
text-indent : 15px;
}
-->
</style>
<body>
<p>Web Teknikleri</p>
</body></html>
Öğr. Gör. Mustafa YAVAŞ
61
Alt özellikleri tanıyalım
text-transform :
• lowercase : Yazının tümünün küçük harf olmasını sağlar.
• uppercase : Yazının tümünün büyük harf olmasını sağlar.
• capitalize : Yazının istenilen şekilde kalmasını sağlar.
text-decoration :
• underline : Yazının altının çizili olmasını sağlar.
• overline : Yazının üstünün çizili olmasının sağlar.
• line-through : Yazının üstünün çizili olmasını sağlar.
• none : Yazının herhangi bir yerine çizgi çekilmemesini sağlar.
text-align:
• left: Yazının sola bitişik olmasını sağlar.
• center : Yazının ortada olmasının sağlar.
• right : Yazının sağa bitişik olmasını sağlar.
• line-height :Yazının normal satırdan çizgi yüksekliğini belirler. 3px, 5px
gibi değerler alır.
• text-ident : Yazının soldan ne kadar boşlukla içeriden başlayacağını
belirler. 5px, 10px gibi değerler alır.
Öğr. Gör. Mustafa YAVAŞ
62
Background Özellikleri
Background ile html sayfamızın arka fonlarının özelliklerini değiştirmemizi sağlar.
<html>
<body>
<head>
<title>Css</title>
<style type="text/css">
<!—
p {
background-color :#00ff00;
background-image : url ("resim_adi.gif");
background-position : center;
background-repeat : repeat-y;
}
-->
</style>
<body>
<p>Web Teknikleri</p>
</body>
</html>
Öğr. Gör. Mustafa YAVAŞ
63
Background Özellikleri
background-color :
Arka fonun rengini belirler. Css’te renkleri blue, red gibi tanımlayabileceğimiz
gibi Html kodunu vererekte tanımlayabiliriz.
background-image :
Arka fonu bir resim dosyası yapmak için kullanılır. url etiketinin içine resim
dosyasının yolu ve ismi tam olarak yazılmalıdır.
background-position :
• left : Arka fondaki resmin sadece sol tarafta olmasını sağlar.
• center : Arka fondaki resmin sadece sol tarafta olmasını sağlar.
• right : Arka fondaki resmin sadece sol tarafta olmasını sağlar.
background-repeat :
Arkafondaki resmin tekrarlanması istendiğinde kullanılır.
• repeat : Tüm yönlerde tekrar edilmesini sağlar.
• repeat-x : X (yatay) yönünde tekrar edilmesini sağlar.
• repeat-y : Y (dikey) yönünde tekrar edilmesini sağlar.
• no-repeat : Resmin tekrar edilmeyerek bir kere gösterilmesini sağlar.
Öğr. Gör. Mustafa YAVAŞ
64
List Özellikleri
Bu Css özelliği <UL> ve <LI> html etiketleri ile oluşturduğumuz listelerin
özelliklerini belirlemek için kullanılır.
list-style-type :
• disk : Liste biçiminin disk (içi dolu yuvarlak) şeklinde olmasını sağlar.
• circle : Liste biçiminin çember şeklinde olmasını sağlar.
• square : Liste biçiminin kare olmasını sağlar.
• decimal : Liste biçiminin rakamlardan oluşmasını sağlar.
• lower-roman : Liste biçiminin i,ii,iii, gibi roma rakamlarının küçük harfi olmasını sağlar.
<html><body><head>
<title>Css</title>
<style type="text/css">
li {
list-style-type : circle;
list-style-position : inside;
list-style : decimal;
list-style-image : url ("resim.gif");
}
</style>
<body>
<ul>
<li>Web Teknikleri
<li>Html
<li>Javascript
<li>Css
<li>Web Grafik
</ul>
</body></html>
Öğr. Gör. Mustafa YAVAŞ
65
Position Özelliği
Html’de kullandığımız Layer (katman) etiketlerinin html üzerindeki yerleştirme
işlemi için kullanılır. Hemen bir örnek ile görelim.
position :
• absolute : Katmanın yerinin kesin olarak belirlenmek istendiğinde kullanılır.
• relative : Katmanın yerinin göreli(diğer öğelere göre değişebilen) olarak belirlenmek
istendiğinde kullanılır.
• static : Katmanın yerinin sabit olarak belirlenmek istendiğinde kullanılır.
• top : Katmanın üst kısımdan kaç piksel aşağıda olması gerektiğini belirler.
• left : Katmanın sol kısımdan kaç piksel aşağıda olması gerektiğini belirler.
• width : Katmanın genişliğinin kaç piksel olacağını belirler.
• height : Katmanın boyunun kaç piksel olacağını belirler.
• clip : Katmanın görünmesi istenen bölgeyi içeren kutucuk.
• overflow : Katmanın belirtilen yükseklik ve genişliğe sığmayan kısmına ne olacağını belirler.
• auto : Otomatik olarak belirlenir.
• scroll : Kaydırma çubukları ekler.
• visibility : Katmanın görünebilirlik ayarı yapar
• visible : Görünür hale getirir.
• hidden : Gizler.
• z-index : Katmanın sayfa üzerindeki sıra sayısı.
Öğr. Gör. Mustafa YAVAŞ
66
Position Örnek!
<html>
<head>
<title>Css</title>
<STYLE type="text/css">
<!—
div {
position:absolute;
top:20px;
left:10px;
width:200px;
height:200px;
clip:auto;
overflow:scroll;
z-index:auto;
visibility:visible;
}
-->
</style>
<body>
<div>
Web Teknikleri<br>
Html<br>
Javascript<br>
Css<br>
Grafik<br>
</div>
<p> Web Teknikleri </body>
Öğr. Gör. Mustafa YAVAŞ
</html>
67
SEÇİCİLER (SELECTORS)
Class Selector (Sınıf Seçicisi)
Bu seçiciyi sayfanızdaki h1 gibi etiketlerin tümünün aynı olmasını istemediğiniz
durumlarda kullanırız. Böylelikle genel bazı özellikleri koruyarak farklı özellikleri
özelleştirebilirsiniz. Sınıf seçicisinin iki türü vardır. İlk önce birinci şeklini görelim.
Hemen bir örnekle bu seçiciyi tanıyalım.
<html>
<head>
<title>Css</title>
<style type="text/css">
<!h1.mavi {color:blue}
h1.kirmizi {color:red}
-->
</style>
</head>
<body>
<h1 class=mavi>Mavi sınıf seçicisi ile </h1><br>
<h1 class=kirmizi>Kırmızı sınıf seçicisi ile </h1>
</body>
</html>
Öğr. Gör. Mustafa YAVAŞ
68
Class Selector (Sınıf Seçicisi)
Burada sınıf seçicisini sadece h1 için tanımladık. Sınıf seçicisinin ikinci türünde genel bir sınıf
seçicisi tanımlamaktır. Bunu da bir örnekle görelim.
<html>
<head>
<title>Css</title>
<style type="text/css">
<!.mavi {color:blue}
.kirmizi {color:red}
-->
</style>
</head>
<body>
<h3 class=mavi>Mavi sınıf seçicisi ile </h1><br>
<h4 class=kirmizi>Kırmızı sınıf seçicisi ile </h1>
</body>
</html>
Öğr. Gör. Mustafa YAVAŞ
69
id selector (id seçicisi)
Id Selector’lerini tanımlayıcı adlarının önündeki # işaretinden tanırız. Html
belgesinde kendi tanımlayıcı adlarına gönderme yaparak herhangi bir Html etiketine
stil vermekte kullanılırlar. Bu etiketler span’dan tutunda paragraf(p)’a kadar olabilir.
Bir örnekle açıklayalım.
<html><head>
<title>Css</title>
<style type="text/css">

#mavi
{
background:blue;
color:white;
}
#yesil
{
background:green;
color:white;
}
-->
</style>
</head>
<body>
<span id=mavi>Bu yazının arkafon rengi mavi font rengi beyaz</span><br><br>
<span id=yesil>Bu yazının arkafon rengi yeşil font rengi beyaz</span>
</body></html>
Öğr. Gör. Mustafa YAVAŞ
70
CSS GENEL KULLANIM ŞEKİLLERİ
A Etiketinin CSS İle Kullanımı
Bildiğiniz üzere A etiketi Html’e çok büyük bir özellik katan link etiketidir.
• İlk pozisyon linke herhangi bir tıklama olmadığındadır. Bu değer linkin
sayfada görülecek ilk halidir.
• Visited : Bu pozisyon link tıklandığından sonra etiketin aldığı değerdir.
• Active : Bu pozisyon linkin aktif olduğu durumdur. Yani imleç linkin tıklandığı
andaki durumdur.
• Hover : Bu pozisyon Linkin üzerine gelindiği durumdur. Yani linkin üzerine
gelindiğinde nasıl bir biçimde olması isteniyorsa stil o şekilde verilir.
Öğr. Gör. Mustafa YAVAŞ
71
A Etiketinin CSS İle Kullanımı
Örnek:
<html>
<head>
<title>Css</title>
<style type="text/css">
<!A.normal
{
background-color:white;
color:blue;
}
A.ziyaret:visited
{
background-color:white;
color:maroon;
font-weight:normal;
}
A.aktif:active
{
background-color:white;
color:red;
font-weight:normal;
}
Öğr. Gör. Mustafa YAVAŞ
A.degisken:hover
{
background-color:blue;
color:white;
font-weight:bold;
}
-->
</style>
</head>
<body>
<a href="#" class="normal">Linkin
normal durumu</a><br>
<a href="#" class="ziyaret">Linki
tıklayın ve değiştiğini
görün</a><br>
<a href="#" class="aktif">Linkin
aktif durumu</a><br>
<a href="#"
class="degisken">Linkin üzerine
geldiğinde stil
değişecek</a><br>
</body>
</html>
72
Bağlantılı CSS Dosyalarının Hazırlanması
Hatırlayacağınız üzere bu dosyanın uzantısı css olmalı. Bu css dosyasını Html
dosyamızın içerisinde çağıracağız. Aşağıdaki kodları stil.css adıyla kaydedelim.
A {font-style : normal;
color : navy;
font-family : Times New Roman ! important;
text-decoration : none; }
A:Visited {font-family : Times New Roman ! important;
font-style : italic;
color : olive; }
A:Active { font-family : Times New Roman;
color : red;}
A:Hover {text-decoration : underline;
font-family : Times New Roman ! important;
font-weight : bold;
font-style : normal;
color : maroon;}
BODY { background: white url("fon.gif");
background-repeat: repeat-y;
background-position: left; }
p#sol {position : relative;
visibility : visible;
left : 30pt;
width : 450pt;
font-family:"Verdana,Arial,Helvetica" ! important;
font:15pt;}
Öğr. Gör. Mustafa YAVAŞ
73
Bağlantılı CSS Dosyalarının Hazırlanması
Aşağıdaki kodları da css.html adıyla kaydedelim. (Dikkat! mutlaka html uzantılı kaydedilmeli)
<html>
<head>
<title>Css</title>
<style type="text/css">
<!—
.onemli {font-weight:bold;}
h4 {color:blue;
position : relative;
visibility : visible;
left : 25pt;
font-size:large;
.solic { color:brown;
font-family:"Verdana,Arial,Helvetica";
position : relative;
visibility : visible;
left : 20pt;
font-weight:bold; }
li { list-style-type : circle;
list-style-position : inside;
list-style : decimal;}
; -->
</style>
<link rel=stylesheet href="stil.css" type="text/css">
</head>
<body>
<table width="500" align="center">
<tr><td> 
<h4>Bilgisayar;<a name="bsl">  </a></h4>


<p id="sol">
Aldığı komutlar uyarınca, veri işleyerek problem çözen otomatik elektronik
aygıtların ortak adı. Bu tür aygıtlar, çalışma ilkeleri,donanım tasarımları
ve uygulama alanları bakımından örneksel, sayısal ve karma bilgisayarlar
olarak <font class="onemli">üçe</font> ayrılır.</p>
<p id="sol">
Öğr. Gör. Mustafa YAVAŞ
74
Bağlantılı CSS Dosyalarının Hazırlanması-1
<ul>
<li><a href="css.html#orneksel">Örneksel (analog) bilgisayarlar</a>
<li><a href="css.html#sayisal">Sayısal bilgisayarlar</a>
<li><a href="css.html#karma">Karma bilgisayarlar</a>
</ul>
</p> <p class="solic">
Örneksel (analog) bilgisayarlar<a name="örneksel">  </a></p>
<p id="sol">Açısal konum ya da gerilim gibi değişken nicelikleri temsil eden
veriler üzerinde işlem yapar ve çözülmesi istenen matematiksel problemin
fiziksel bir örneğini oluştururlar. Sıradan diferensiyel denklemleri
çözebilen örneksel bilgisayarlar, sistem mühendisliğinde, özellikle bazı
süre ve donatımların gerçek zamanlı benzetim modellerinin oluşturulmasına
çok elverişlidirler. Bu bilgisayarların bir başka yaygın kullanım alanı da
elektrik dağıtım sistemi gibi şebekelerin analizidir.<br>
<a href="css.html#bsl">Başa Dön</a>
</p>
<p class="solic">Sayısal bilgisayarlar,
<a name="sayisal">  </a></p>
<p id="sol">Çeşitli üretim süreçlerine, takım tezgahlarına , karmaşık
laboratuvar ve hastane aygıtlarına kumanda etmekte kullanılırlar. Aynı
özellikten, uçakların ve uzay araçlarının karmaşık iletişim sistemlerinin
otomatizasyonunda da yararlanılır. Sayısal bilgisayarlar ayrıca, eğitimde
yardımcı olarak (örn. temel dil ve matematik becerilerinin
kazandırılmasında) , bilimsel araştırmalarda ise verilerin analizi ve
matematiksel modellerin geliştirilmesi amacıyla kullanılır.
<br> <a href="css.html#bsl">Başa Dön</a> </p>
<p class="solic">Karma bilgisayarlar,
<a name="karma">  </a></p>
<p id="sol">Örneksel ve sayısal bilgisayarların özelliklerine ve yararlarını
birleştirirler; örneksel bilgisayarlara oranla daha fazla kesinlik, sayısal
bilgisayarlara oranla daha fazla deneteleme sağlarlar.
<br><a href="css.html#bsl">Başa Dön</a>
</p> </td> </tr> </table>
</body>
</html>
Öğr. Gör. Mustafa YAVAŞ
75
JavaScript
Öğr. Gör. Mustafa YAVAŞ
76
JAVASCRIPT ?
• Yorumlanması için bir tarayıcıya ihtiyaç duyar. Bir script dilidir. Html dosyasını içine
gömülüdür.
• Javascript, Netscape firması tarafından C dilinden esinlenilerek yazılmıştır. Yazılma
amacı Html'in sahip olmadığı bazı özelliklerin web sayfalarında kullanılmak
istenmesidir.
<script> (ile başlar)
<!—
JavaScript kodları
-->
</script> (kapanır)
• İyi bir programcı kod satırlarında açıklama yapar. Bu satır şu işlemi
gerçekleştiriyor gibi açıklayıcı bilgiler yazar kodlarının yanına.
Örnek:
// bu satır kullanılacak değişkenlerin tanımlanması
/* açıklama satırı 1
açıklama satırı 2
açıklama satırı 3 */
Öğr. Gör. Mustafa YAVAŞ
77
DEĞİŞKENLER
Değişkenler Javascript'te ve diğer programlama dillerinde olduğu gibi bilgi
depolamak bu bilgiyi kullanmak amacıyla kullanılırlar. Değişkenler "var" komutu
ile oluşturulurlar.
Örnek:
var sayi;
var sayi1=10;
var yazi1="10";
var
var
var
var
Örnek:
var sayi1=10;
var sayi2=20;
var sayi3=sayi1+sayi2;
url="webteknikleri"; doğru
_rakam=12; doğru
a1=123; doğru
3uzler="üçüzler" yanlış
Öğr. Gör. Mustafa YAVAŞ
78
Değişkenlerin İşlem Operatörleri İle Kullanımı
ARİTMETİK OPERATÖRLER
Her zaman kullandığımız bu operatörler + , - , * , / , % 'dir.
Örnek:
var i=10;
var j=11;
var k=12;
var m,n;
m=i*j+k;
n=i*(j+k);
MANTIKSAL OPERATÖRLER
İki değişkene bağlı karşılaştırılmaların yapılmak istendiği durumlarda kullanılır.
Operatörler && , || , ! operatörleridir. && And (ve) operatörü iki değişkenin de
değeri doğru olması istendiğinde kullanılır. || Or (veya) operatörü iki
değişkenden en az birinin doğru olması durumu istediğinde kullanılır. ! Not
(değil) operatörü değişkenin değeri doğru ise yanlış , yanlış ise doğru olması
istendiği durumlarda kullanılır.
Öğr. Gör. Mustafa YAVAŞ
79
Değişkenlerin İşlem Operatörleri İle Kullanımı
KARŞILAŞTIRMA OPERATÖRLERİ
Değişkenlerin birbirleri ile karşılaştırılmak istendiğinde kullanılan operatörlerdir.
Bu operatörler ise;
== operatörü iki değişkenin birbirine eşitliğini kontrol eder.
!= operatörü iki değişkenin birbirine eşit olmadığı durumlarda kullanılır.
< operatörü bilindiği üzere küçüktür operatörüdür. Soldaki değişkenin sağdakinde
küçüklüğünü kontrol eder.
<= soldaki değişkenin sağdaki değişkene küçük eşitliğini kontrol eder.
> soldaki değişkenin sağdaki değişkene göre büyük olup olmadığını kontrol eder.
>= soldaki değişkenin sağdaki değişkene büyük eşitliğini kontrol eder.
ÖZEL KARŞILAŞTIRMA OPERATÖRÜ
Bu operatör iki değişken arasında karşılaştırma yapmanın en sade ve kısa
yoludur. Operatörün kullanım biçimi :
a < b ? c : d
Öğr. Gör. Mustafa YAVAŞ
80
Ekrana Çıktı Ve Klavyeden Bilgi Giriş
PROMPT ()
Ziyaretçiden bilgi alma bu JavaScript komutuyla gerçekleşir.
prompt ("Sorulan soru" , "Cevap örneği")
-----------------------------------prompt ("Tarayıcınızın türünü
giriniz ?" ,"lütfen cevabı ie
veya nn olarak
veriniz");
-------------------------------var tara=prompt ("Tarayıcınızın
türünü giriniz ?" ,"lütfen
cevabı ie veya nn
olarak veriniz");
--------------------------------
Öğr. Gör. Mustafa YAVAŞ
81
Ekrana Çıktı Ve Klavyeden Bilgi Giriş
WRİTE()
Html dosyasına yazı yazdırma komutu ise write dır. Bu kodun yazım kurallarını
inceleyecek olursak ;
document.write ("görüntülenmek istenenler" ,
değişken_ismi );
Örnek :
<html><head><title>Prompt , write örneği
</title></head>
<body>
<script>
var isim = prompt ("İsminizi Giriniz " , "Küçük
harf veya büyük harf kullanabilirsiniz" );
document.write ("Merhaba " , isim , " !" );
</script>
</body>
</html>
Öğr. Gör. Mustafa YAVAŞ
82
FONKSİYON KAVRAMI
Çoğu zaman Javascript kodunuzda bir işlemin birden fazla yapılması gerekebilir.
Hatta kimi zaman Javascript'e bir işlem yaptırmadan önce başka bir işlemi
yaptırmak
istenebilir. İşte bu tür tekrarlanan işin yapılması için gerekli işlem ve komut
gruplarına
Fonksiyon adı verilir.
function fonksiyon_ismi (parametre1 ,
parametre2 , .... )
{ yapılması istenen işlemler }
Öğr. Gör. Mustafa YAVAŞ
83
Fonksiyona Değer Gönderme ve Değer Alma
<html>
<head>
<script language="JavaScript">
function veri1(ilkveri)
{ var ilktoplam = (ilkveri * 30 )/100 ;
return ilktoplam ; }
function veri2 (ikinciveri)
{ var ikincitoplam = (ikinciveri * 45 )/100;
return ikincitoplam; }
</script>
</head>
<body>
<script language="JavaScript">
Öğr.Gör.Mustafa YAVAŞ - Internet Programlama Ders Notu - Rize
MYO
var data1 = prompt ("Birinci miktarı giriniz" ,"rakam gir");
var data2 = prompt ("İkinci miktarı giriniz" , "rakam gir");
document.write ("İlk işleminizin sonucu = " , veri1(data1) );
document.write ("İkinci işlemin sonucu = " , veri2(data2) );
</script>
</body>
</html>
Öğr. Gör. Mustafa YAVAŞ
84
NESNELER VE ÖZELLİKLERİ
Günümüzde bilişim Teknolojileri ile ilgilenen hemen herkesin duyduğu bir terim
var: Nesneye Yönelik Programlama (OOP). Nedir bu Nesneye Yönelik Programlama?
Bu tip programlamada kullanılan her öğe bir nesne olarak kabul edilir. Bu nesnelerin
özelliklerini kullanarak onları değiştirerek program yazılır.
Pencere açmak için :
window.open("Url_adı" , "pencere_adı" ,
"pencere_özellikleri");
Pencere kapatmak için :
window.close();
Url_adı :
Buraya yazılacak dosya ismi açılacak pencerenin içerisinde olacaktır.
window.open("http://webteknikleri/owp/index.htm")
Veya
window.open("index.html")
Öğr. Gör. Mustafa YAVAŞ
85
NESNELER VE ÖZELLİKLERİ
Pencere_adı :
Bu açılacak pencerenin adını belirtir. Birden çok pencere ile işlemler
yapıyorsanız hangi pencereye bir komut gönderdiğinizin belli olması için
gereklidir.
Örnek :
Window.open("index.html" , "ana");
Pencere_özellikleri :
o menubar : Tarayıcıların en üst kısmında bulunan File(Dosya) , Edit(Düzen) vb. menülerin
bulunduğu satırdır.
o toolbar : Tarayıcılarda üst kısımda Back(Geri) , Forward(İleri) vb. tuşların bulunduğu
kısımdır.
o location : Tarayıcılarda ziyaret etmek istediğiniz web adresini yazdığınız kısım.
o status : Tarayıcıların en alt kısmında hangi dosyanın yüklendiği ile ilgili bilgi veren kısımdır.
o scrollbars : Sağ tarafta bulunan sürgü çubuklarıdır.
o resizable : Pencerenin boyutlarının kullanıcıya bırakılması veya kesin değerler almasıyla
ilgilidir.
o width : Açılacak olan pencerenin piksel cinsinden genişliğidir.
o height : Açılacak olan pencerenin piksel cinsinden boyudur.
o left : Açılacak olan pencerenin ekranın sol tarafından kaç piksel uzaklıkta olacağını belirler.
o Top : Açılacak olan pencerenin
ekranın
Öğr. Gör. Mustafa
YAVAŞüstünden kaç piksel aşağıda olacağını belirler. 86
WINDOW.HISTORY.GO
Window'un histrory özelliği ile bir önceki sayfaya erişim sağlanabilir.
Window.history.go(-1)
Bir önceki sayfaya -1 ile ulaşabilirsiniz. Bu değeri arttırarak daha önceki
sayfalara da ulaşabilirsiniz.
STATUS BAR KULLANIMI
Status bar window nesnesinde belirttiğimiz gibi tarayıcıların en alt kısmında yer
alan hangi dosyaya gidileceği veya yüklendiği ile ilgili bilgi veren kısımdır.
Status barı değiştirmek için şu kodları yazmalıyız.
window.status="Webteknikleri'nden Merhaba !";
Öğr. Gör. Mustafa YAVAŞ
87
Tarayıcı Nesnesi
Tarayıcılar Javascript tarafından bir nesne olarak algılanır. Bu nesnenin
özelliklerini şöyle sıralayabilir.
o appname Tarayıcı adı
o appVersion Tarayıcının Versionu
o appCodeName Tarayıcının kod adı
o userAgent Tarayıcının anamakinaya(server) kendini tanıtırken verdiği isim
<html>
<head><title>Tarayıcı Özellikleri</title></head>
<body>
<script language="javascript1.2">
document.write("Şu anda kullandığınız tarayıcının özellikleri
:" , "<br>");
document.write(navigator.appname + navigator.appVersion +
navigator.appCodeName + navigator.useAgent ) ;
</script>
</body>
</html>
Öğr. Gör. Mustafa YAVAŞ
88
FROMLAR-RADYO (RADİO) DÜĞMELERİ
Bu tür düğmelerin en büyük özelliği radyo düğmeleri gibi olmasıdır. Yani herhangi bir
menü üzerinde sadece bir seçim yaptırmak istiyorsanız bu tür form öğelerini kullanırsınız.
<HTML>
<HEAD>
<TITLE>Radio</TITLE>
<SCRIPT LANGUAGE = "JavaScript1.2">
function sorgu (secim)
{var deger = null
for (var i=0; i<secim.length; i++)
{if (secim[i].checked)
{ deger = secim[i].value
break } }
return deger }
</SCRIPT>
</HEAD>
<BODY>
<FORM name="form1"> <p>
<input type=radio name="firma" value="Bilemediniz Yazilim">Microsoft</p>
<p><input type=radio name="firma" value="Bilemediniz Yazilim">Borland</p>
<p><input type=radio name="firma" value="BilemedinizYazilim">Adobe</p>
<p><input type=radio name="firma" value="Tebrikler Bildiniz">Copmaq</p>
<input type=button value="Bunlardan hangisi bilgisayar ureticisidir"
onClick="alert(sorgu(this.form.firma))">
</FORM>
</BODY>
</HTML>
Öğr. Gör. Mustafa YAVAŞ
89
SELECT UNSURU
Select öğesi form nesnelerimizden menü yoluyla ziyaretçi ile etkileşme
yollarından bir tanesidir. Bu bir tür seçme kutusudur.
<HTML>
<HEAD>
<title>Select</title>
<SCRIPT LANGUAGE = "JavaScript1.2">
function secim(secilen)
{ return secilen.options[secilen.selectedIndex].value }
</SCRIPT>
</HEAD>
<BODY>
<FORM name="soru">
<p><SELECT NAME="firma">
<OPTION value="Bilemediniz Yazilim">Microsoft</OPTION>
<OPTION value="Bilemediniz Yazilim">Borland</OPTION>
<OPTION value="Bilemediniz Yazilim">Adobe</OPTION></P>
<OPTION value="Tebrikler Bildiniz">Compaq</OPTION></P><br>
<input type=button value="Bunlardan hangisi bilgisayar
ureticisidir"
onClick="alert(secim(this.form.firma))">
</FORM>
</BODY>
</HTML>
Öğr. Gör. Mustafa YAVAŞ
90
OLAYLAR
Ziyaretçiye sunulan bir web sayfası üzerinde ziyaretçinin yaptığı her tür hareket
bir bağlantıyı tıklaması , bir resmin üzerine gelmesi , resmin üzerinde ayrılması , bir
formu yanlış doldurup hataya yol açması hep bir olaydır.
onClick
Web sayfası üzerinde bir nesnenin mosue ile üzerine tıklanması sonucu onClick
olayı gerçekleşir.
Örnek:
<html><head><title>onClick</title>
<script language="javascript1.2">
function merhaba()
{alert ("beni tikladiniz"); }
</script></head>
<body>
<input type="button" name="tikla" value="tikla"
onClick=merhaba()>
</body>
</html>
Öğr. Gör. Mustafa YAVAŞ
91
onMouseOver , onMouseOut
Bu tür nesne olayları ingilizce adı (onMouseOver = mouse işaretçisi/imleç
üzerindeyken , onMouseOut = mouse işaretçisi üzerinden ayrıldığında) üzerinde
olmakla birlikte mouse-un nesnenin üzerinde olup olmadığı ile ilgilenir.
Örnek:
<html>
<head><title>onMouseOver ve onMouseOut </title>
<script language="javascript1.2">
function uzerinde()
{window.status="Tıklayın ve Webteknikleri.com adresine
gidin" }
function disinda()
{window.status="Webteknikleri.com baglantisina tıklayın" }
</script></head>
<body>
<a href="http://www.webteknikleri/index.htm" onMouseOver =
uzerinde()
onMouseOut =disinda()> Webteknikleri.com </a>
</body>
</html>
Öğr. Gör. Mustafa YAVAŞ
92
onMouseOver ve onMouseOut metodu ile ilgili bir diğer örnek:
<html>
<head><title>OnMouseOver</title>
<script language="javascript1.2">
function altavista()
{document.web.mesaj.value="En unlu web motorlarindan biri" }
function altavistasil()
{ document.web.mesaj.value="" }
function yahoo()
{ document.web.mesaj.value="En unlulerden bir tane daha" }
function yahoosil()
{document.web.mesaj.value="" }
function hotbot()
{document.web.mesaj.value="Ve bir tanesi daha" }
function hotbotsil()
{document.web.mesaj.value="" }
</script></head>
<body>
<a href="www.altavista.com" onMouseOver="altavista()" onMouseOut =
"altavistasil()">
Altavista</a><br>
<a href="www.yahoo.com" onMouseOver="yahoo()"
onMouseOut="yahoosil()">Yahoo</a><br>
<a href="www.hotbot.com" onMouseOver="hotbot()"
onMouseOut="hotbotsil()">Hotbot</a><p>
<form name="web">
<input type="text" name="mesaj" size="50">
</form>
</body>
Öğr. Gör. Mustafa YAVAŞ
</html>
93
onSubmit
Web üzerinde sörf yaparken çoğunlukla karşımıza çıkan formlar biz doldurduktan sonra
sayfanın bağlı bulunduğu server (ana makine) ya gönderilir. Fakat biz bu onSubmit olayı ile
form gönderilmeden önce formun düzgün doldurulup doldurulmadığını kontrol edebiliriz.
Bunu örnek bir kod ile açıklayalım. Html sayfamızda body etiketleri arasında
doldurulmasını istediğimiz bir form var ve ilgili kodun başlangıcı şöyle :
<form action="mail.pl" method="post" onSubmit="dogrula()">
Bu satır ile formun gönderilmesiyle (onSubmit) dogrula fonksiyonunu
çağırıyoruz. dogrula fonksiyonu da şu şekilde olabilir (Bu fonksiyon head etiketleri
arasında olan script etiketleri arasında olmalıdır).
function dogrula()
{ confirm ("Formu düzgün doldurduysanız OK'i tıklayınız');
}
Bu fonksiyonda kullandığımız confirm nesnesi ile kullanıcıya OK ve Cancel
tuşları ile “Emin misin ? Form Gönderiliyor!” denilmektedir.
Öğr. Gör. Mustafa YAVAŞ
94
onReset
Bu olay ile web sayfanızda bulunan formdaki yazdıklarınızın tamamen silinir.
Yani yazdığınızın yanlış olduğunu farkettiniz bu durumda Sil (Reset) tuşunu tıklarsınız
ve size boş bir form gelir. Yalnız burada birşeyi belirtmek isterim. Reset(Sil) tuşuna
tıkladıktan sonra tarayıcının back(geri) düğmesini tıkladığınızda formunuzda
yazdıklarınız tekrar geri gelmez. Fakat siz onReset olayı ile bu durum için son bir
ziyaretçiye seçenek sunabilirsiniz.
<html>
<head><title>onReset</title>
<script language="javascript1.2">
function sil()
{ return confirm('Silmek istediginize emin
misiniz?'); }
</script>
</head>
<body>
<form onReset="return sil()">
<input type="text" name="mail">
<input type="reset" value="sil">
</form>
</body>
</html>
Öğr. Gör. Mustafa YAVAŞ
95
onChange
Web sayfası üzerinde ziyaretçinin değiştirebileceği üç tür alan vardır. Bunlar
text (metin) textarea (geniş metin alanı) select (seçim alanı) dır. Mouse u bu alanlar
üzerine getirip tıkladığınızda onChange(değişti) olayını gerçekleştirmiş olursunuz.
Şimdi bunu select yöntemi ile nasıl olduğunu görelim. Örneğimizde aşağı düşmeli bir
menü tasarlayacağız ve şeçili durumda olan web sayfasına gönderme yapacağız.
<html>
<head><title>OnChange</title>
<script language="javascript1.2">
function degisti()
{ window.open("www.mustafayavas.com"); }
</script>
</head>
<body>
<form method="post">
<p><select name="degistir" size="1" onChange="degisti()">
<option>Adresi tikla
<option>Mustafa YAVAŞ
</select>
</form>
</body>
</html>
Öğr. Gör. Mustafa YAVAŞ
96
onLoad, onUnLoad
Bu olaylar bize sayfanın yüklenmeye başlamasında (onLoad) sayfadan ayrılıncaya
(onUnLoad) kadar olan yapılacak işlemler için gereklidir. Bir Javascript fonksiyonun web
sayfası yüklenmeye başladığında otomatik olarak çalışmasını istiyorsak onLoad olayını
kullanırız.
Örnek:
<html><head><title>onLoad onUnLoad</title>
<script language="javascript1.2">
function hosgeldiniz()
{
alert("Web Sitemize Hosgeldiniz")
}
function gulegule()
{
alert("Iyi sorfler..")
}
</script>
</head>
<body onLoad="hosgeldiniz()" onUnload="gulegule()">
</body>
</html>
Öğr. Gör. Mustafa YAVAŞ
97
onError, onAbort
Ziyaretçi sayfayı herhangi bir neden yüzünden tam haliyle yükleyememiş
olabilir. Bu nedenler aktarım hızı veya tarayıcının Javascript kodunu tam manasıyla
yorumlayamamış olmasıdır. İşte bu durumda Error(hata) oluşur.
Örnek:
<img src="resim.gif" onError="alert("Resim dosyası tam
olarak yüklenemedi')">
Ziyaretçi resimlerin yüklenmesi çok uzun sürüp yüklemeyi stop(dur) tuşu ile
kestiyse bu durumda onAbort olayı gerçekleşir. Bunun sonucu olarak ziyaretçiye bir
hata mesajı verebilirsiniz. Bu durum daha önce bahsettiğimiz image-map ler içindir.
<img src="resim.gif" onAbort="alert("Resim harita
dosyası tam olarak yüklenemedi. İlgili resim bir harita
olduğu için yüklenmesini tavsiye ederiz.')">
Öğr. Gör. Mustafa YAVAŞ
98
Formlarda textbox kontrolleri
Formlarda textbox, textarea, radio, list nesnlerin kontrollerini yapar.
<html>
<head>
<script language="JavaScript">
function test1(form) {
if (form.text1.value == "")
alert("Lütfen bir değer girin!")
else {
alert("Selam "+form.text1.value+"! Form Girişi Tamam!");
}
}
function test2(form) {
if (form.text2.value == "" ||
form.text2.value.indexOf('@', 0) == -1)
alert("Geçersiz e-mail adresi!");
else alert("Tamam!");
}
</script>
</head>
<body>
<form name="birinci">
Adınız:<br>
<input type="text" name="text1">
<input type="button" name="button1" value="Test Input" onClick="test1(this.form)">
<P>
e-mail adresiniz:<br>
<input type="text" name="text2">
<input type="button" name="button2" value="Test" onClick="test2(this.form)">
</body>
</html>
Öğr. Gör. Mustafa YAVAŞ
99
TEŞEKKÜRLER…
Öğr. Gör. Mustafa YAVAŞ
100

İNTERNET KULLANIMI WEB SİTESİ YAPIMI E

Transcript İNTERNET KULLANIMI WEB SİTESİ YAPIMI E

Directory