Bilgisayar ve Öğretim Teknolojileri Öğremeni: Ahmet ERDOĞDU

Bilgisayar ve Öğretim Teknolojileri Öğremeni: Ahmet ERDOĞDU
BİLP-203 İnternet Programcılığı Dersi (HTML, CSS, JavaScript, Dreamweaver) Öğr. Gör. Mustafa YAVAŞ

TEMEL İNTERNET KAVRAMLARI
bilgisayar öğretmeni: ahmet erdoğdu

İ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. bilgisayar öğretmeni: ahmet erdoğdu

İ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. bilgisayar öğretmeni: ahmet erdoğdu

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. bilgisayar öğretmeni: ahmet erdoğdu

Network (Ağ Bağlantıları)
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, 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. bilgisayar öğretmeni: ahmet erdoğdu

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: İnternet Alanı (Domain) İnternete sürekli bağlı olan her bilgisayarın bir IP numarası vardır ( 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 ( 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. bilgisayar öğretmeni: ahmet erdoğdu

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. bilgisayar öğretmeni: ahmet erdoğdu

İ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 ( ) alışverişi için SMTP ( Simple Mail Transfer Protocol ) ve POP ( Post Office Protocol ) protokolleri kullanılır. SMTP, 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. bilgisayar öğretmeni: ahmet erdoğdu

İ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. bilgisayar öğretmeni: ahmet erdoğdu

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: rize + yayla 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: Rize MYO] AND ve OR ile arama yapılabilir. bilgisayar öğretmeni: ahmet erdoğdu

İnternet Araçları Bilgisayar Güvenliği
Yeni 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. bilgisayar öğretmeni: ahmet erdoğdu

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. bilgisayar öğretmeni: ahmet erdoğdu

Şema olarak İnternet bilgisayar öğretmeni: ahmet erdoğdu

Dreamweaver Editörü ile HTML, CSS, JavaScript kullanarak Web Sayfası Oluşturma

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. bilgisayar öğretmeni: ahmet erdoğdu

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ış) bilgisayar öğretmeni: ahmet erdoğdu

HTML’de Yapısal Etiketler
Yapısal etiketler web sayfasında farklı bölümler tanımlamak için kullanılır. Bunlar; bilgisayar öğretmeni: ahmet erdoğdu

Ö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. bilgisayar öğretmeni: ahmet erdoğdu

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. bilgisayar öğretmeni: ahmet erdoğdu

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=" <BR> Karadeniz Teknik Üniversitesinin Sayfasına Gitmek İçin <A href=" </BODY> </HTML> Farklı kaydet ile deneme.html olarak kayıt edilir. bilgisayar öğretmeni: ahmet erdoğdu

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. bilgisayar öğretmeni: ahmet erdoğdu

Belge Biçim Etiketleri

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> bilgisayar öğretmeni: ahmet erdoğdu

META Etiketlerinin HEAD İçinde Kullanımı
<META http-EQUIV=”Content-Type” CONTENT=text/html; CHARSET=iso ”> 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. --> bilgisayar öğretmeni: ahmet erdoğdu

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> bilgisayar öğretmeni: ahmet erdoğdu

<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> </BODY> bilgisayar öğretmeni: ahmet erdoğdu

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 <LI>Sürmene</LI> <LI>Araklı</LI> <LI>Of</LI> </UL> </LI> <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> </BODY> bilgisayar öğretmeni: ahmet erdoğdu

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=“ 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 Gönder >></A><BR> </H3> </BODY> </HTML> bilgisayar öğretmeni: ahmet erdoğdu

<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> bilgisayar öğretmeni: ahmet erdoğdu

<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. bilgisayar öğretmeni: ahmet erdoğdu

<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. </BODY> </HTML> bilgisayar öğretmeni: ahmet erdoğdu

<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. <br clear="all">  </BODY> bilgisayar öğretmeni: ahmet erdoğdu

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="90"> <IMG src="dikkat.gif" width="200" height="45"> </BODY> </HTML> bilgisayar öğretmeni: ahmet erdoğdu

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=“ src="b1.gif" align="middle" border="0"></A> Resim 1 Örneği <br clear="left"><BR> <A href=" src="b2.gif" align="middle" Resmin 2 Align Özelliği <br clear="left"><BR> <A href=“resim3.html"><IMG src="b3.gif" align="middle" Resim 3 - BR etiketinin clear özelliği <br clear="left"><BR> <A href=“sayfa.html"><IMG src="b4.gif" align="middle" Sayfa 4 -- Width ve Height Özelliği <br clear="left"><BR> <A href=“index.html"><IMG src="b5.gif" align="middle" Anasayfa -- Sayfanın Kendisi </BODY> </HTML> bilgisayar öğretmeni: ahmet erdoğdu

Ö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 (©) bilgisayar öğretmeni: ahmet erdoğdu

Tablo Oluşturma Tablo oluşturmak için HTML de beş etiket vardır. Bu etiketler; bilgisayar öğretmeni: ahmet erdoğdu

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> <TD>17“ LG (Goldstar) Monitör</TD> <TD>Peşin Fiyatına 5 taksit</TD> <TD>$300</TD> <TD>HP Dijital Fotoğraf Makineleri</TD> <TD>Dijital sözlük hediyeli</TD> <TD>$200</TD> <TD>Sony Hi8 Kamera</TD> <TD>Kampanyada son 10 gün</TD> <TD>$700</TD> </TABLE> </BODY> bilgisayar öğretmeni: ahmet erdoğdu

<TABLE> Etiketi
<TABLE> etiketi kullanmak zorunda olmadığımız birkaç özelliğe sahiptir. bilgisayar öğretmeni: ahmet erdoğdu

<TR> Etiketi <TH> ve <TD> Etiketleri
<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 bilgisayar öğretmeni: ahmet erdoğdu

Ö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> <TH width="15%">Toptan</TH> <TH width="15%">Perakende</TH> <TD>HP Dijital Fotoğraf Makineleri</TD> <TD align="center"><I>$500</I></TD> <TD align="center">$600</TD> <TD>Goldstar (LG) 17" Monitör</TD> <TD align="center"><I>$250</I></TD> <TD><CENTER>$300</CENTER></TD> </TABLE> </BODY> bilgisayar öğretmeni: ahmet erdoğdu

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. bilgisayar öğretmeni: ahmet erdoğdu

<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. bilgisayar öğretmeni: ahmet erdoğdu

<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; bilgisayar öğretmeni: ahmet erdoğdu

FRAME Örnek! Örnek: 021_frame1.htm <HTML> <HEAD>
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> Ö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> 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> bilgisayar öğretmeni: ahmet erdoğdu

<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> bilgisayar öğretmeni: ahmet erdoğdu

HTML Formları <FORM> Etiketi
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. bilgisayar öğretmeni: ahmet erdoğdu

Kontrol Tipleri HTML nin form kontrolleri <INPUT>, <TEXTAREA> ve <SELECT> etiketleri ile oluşturulur. bilgisayar öğretmeni: ahmet erdoğdu

Kontrol Tipleri-1 bilgisayar öğretmeni: ahmet erdoğdu

<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ı: bilgisayar öğretmeni: ahmet erdoğdu

<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> bilgisayar öğretmeni: ahmet erdoğdu

<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: bilgisayar öğretmeni: ahmet erdoğdu

Örnek! bilgisayar öğretmeni: ahmet erdoğdu <TR>
<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> <TD><B>Soyadı : </B></TD> <TD><INPUT type="text" name="txtSoyadi" size="30"></TD> <TD><B> </B></TD> <TD><INPUT type="text" name="txt " size="30"></TD> <TD><B>Adres : </B></TD> <TD><INPUT type="text" name="txtAdres" size="43"></TD> <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> <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> <TD><B>Yaş : </B></TD> <TD><SELECT name="cboxYas" size="1"> <OPTION value="0"> </OPTION> <OPTION value="1"> </OPTION> <OPTION value="2"> </OPTION> <OPTION value="3"> </OPTION> <OPTION value="4">40 + </OPTION> </SELECT></TD> <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> <TD><INPUT type="submit" name="kaydet" value="Kaydet"></TD> <TD><INPUT type="reset" name="temizle" value="Temizle"></TD> </TABLE> </FORM></H3> </BODY> </HTML> bilgisayar öğretmeni: ahmet erdoğdu

CSS (Cascading Style Sheets) STİL ŞABLONLARININ HTML İLE KULLANIMI

CSS (STİL ŞABLON) STİL ŞABLON ÇEŞİTLERİ
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. bilgisayar öğretmeni: ahmet erdoğdu

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> bilgisayar öğretmeni: ahmet erdoğdu

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> bilgisayar öğretmeni: ahmet erdoğdu

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> </html> bilgisayar öğretmeni: ahmet erdoğdu

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), xx-small (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> bilgisayar öğretmeni: ahmet erdoğdu

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> bilgisayar öğretmeni: ahmet erdoğdu

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. bilgisayar öğretmeni: ahmet erdoğdu

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> <p>Web Teknikleri</p> </body> </html> bilgisayar öğretmeni: ahmet erdoğdu

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. bilgisayar öğretmeni: ahmet erdoğdu

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> bilgisayar öğretmeni: ahmet erdoğdu

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ı. bilgisayar öğretmeni: ahmet erdoğdu

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> </html> bilgisayar öğretmeni: ahmet erdoğdu

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> bilgisayar öğretmeni: ahmet erdoğdu

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> bilgisayar öğretmeni: ahmet erdoğdu

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; --> </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> bilgisayar öğretmeni: ahmet erdoğdu

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. bilgisayar öğretmeni: ahmet erdoğdu

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 color:maroon; font-weight:normal; A.aktif:active color:red; 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> bilgisayar öğretmeni: ahmet erdoğdu

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-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;} bilgisayar öğretmeni: ahmet erdoğdu

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"; 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> bilgisayar öğretmeni: ahmet erdoğdu

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> bilgisayar öğretmeni: ahmet erdoğdu

bilgisayar öğretmeni: ahmet erdoğdu
JavaScript bilgisayar öğretmeni: ahmet erdoğdu

JAVASCRIPT ? <script> (ile başlar) <!— JavaScript kodları
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 */ bilgisayar öğretmeni: ahmet erdoğdu

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"; Örnek: var sayi1=10; var sayi2=20; var sayi3=sayi1+sayi2; var url="webteknikleri"; doğru var _rakam=12; doğru var a1=123; doğru var 3uzler="üçüzler" yanlış bilgisayar öğretmeni: ahmet erdoğdu

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. bilgisayar öğretmeni: ahmet erdoğdu

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 bilgisayar öğretmeni: ahmet erdoğdu

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"); bilgisayar öğretmeni: ahmet erdoğdu

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> bilgisayar öğretmeni: ahmet erdoğdu

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 } bilgisayar öğretmeni: ahmet erdoğdu

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> Öğ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) ); </body> </html> bilgisayar öğretmeni: ahmet erdoğdu

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(" Veya window.open("index.html") bilgisayar öğretmeni: ahmet erdoğdu

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 üstünden kaç piksel aşağıda olacağını belirler. bilgisayar öğretmeni: ahmet erdoğdu

WINDOW.HISTORY.GO STATUS BAR KULLANIMI
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 !"; bilgisayar öğretmeni: ahmet erdoğdu

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> bilgisayar öğretmeni: ahmet erdoğdu

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> bilgisayar öğretmeni: ahmet erdoğdu

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> bilgisayar öğretmeni: ahmet erdoğdu

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> bilgisayar öğretmeni: ahmet erdoğdu

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=" onMouseOver = uzerinde() onMouseOut =disinda()> Webteknikleri.com </a> </body> </html> bilgisayar öğretmeni: ahmet erdoğdu

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() </script></head> <body> <a href=" onMouseOver="altavista()" onMouseOut = "altavistasil()"> Altavista</a><br> <a href=" onMouseOver="yahoo()" onMouseOut="yahoosil()">Yahoo</a><br> <a href=" onMouseOver="hotbot()" onMouseOut="hotbotsil()">Hotbot</a><p> <form name="web"> <input type="text" name="mesaj" size="50"> </form> </body> </html> bilgisayar öğretmeni: ahmet erdoğdu

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. bilgisayar öğretmeni: ahmet erdoğdu

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> bilgisayar öğretmeni: ahmet erdoğdu

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(" } </script> </head> <body> <form method="post"> <p><select name="degistir" size="1" onChange="degisti()"> <option>Adresi tikla <option>Mustafa YAVAŞ </select> </form> </body> </html> bilgisayar öğretmeni: ahmet erdoğdu

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> bilgisayar öğretmeni: ahmet erdoğdu

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.')"> bilgisayar öğretmeni: ahmet erdoğdu

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 == "" || 0) == -1) alert("Geçersiz 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> adresiniz:<br> <input type="text" name="text2"> <input type="button" name="button2" value="Test" onClick="test2(this.form)"> </body> </html> bilgisayar öğretmeni: ahmet erdoğdu

bilgisayar öğretmeni: ahmet erdoğdu
TEŞEKKÜRLER… bilgisayar öğretmeni: ahmet erdoğdu

Bilgisayar ve Öğretim Teknolojileri Öğremeni: Ahmet ERDOĞDU

Benzer bir sunumlar

... konulu sunumlar: "Bilgisayar ve Öğretim Teknolojileri Öğremeni: Ahmet ERDOĞDU"— Sunum transkripti:

Benzer bir sunumlar

Proje hakkında

Geri bildirim

Giriş

Sosyal ağ üzerinden giriş yapmak:

Bilgisayar ve Öğretim Teknolojileri Öğremeni: Ahmet ERDOĞDU

Benzer bir sunumlar

... konulu sunumlar: "Bilgisayar ve Öğretim Teknolojileri Öğremeni: Ahmet ERDOĞDU"— Sunum transkripti:

Benzer bir sunumlar

Proje hakkında

Geri bildirim