İNTERNET PROGRAMCILIĞI-I
|
|
|
- Bilge Türker
- 8 yıl önce
- İzleme sayısı:
Transkript
1 SDÜ ULUBORLU SELAHATTİN KARASOY MYO İNTERNET PROGRAMCILIĞI-I
2 2 İÇİNDEKİLER Sayfa 1. HTML DİLİ Html Nedir? Bir Html (Web) Sayfasının Bölümleri <HEAD> </HEAD> Arasında Yapılacak Tanımlamalar <BODY> </BODY> ARASI Linkler Html de Form Kullanımı Duyuru Panosu Oluşturmak Html İle Visual Basic Script Kullanımı Html İle JavaScript Kullanımı Web de Multimedya (Ses,Video) İşlemleri Stiller Ve Css Dosyaları Dahili Stiller Harici Stiller <FRAMESET> Tagı İle Bölüntülü Sayfa Tasarımı Düşey Bölüntü Oluşturmak (Cols) Yatay Bölüntü Oluşturmak (Rows) Karışık (hem düşey hem de yatay) Bölüntü Oluşturmak FLASH ANİMASYONLARI Bir Movie Clip Nesnesinin Kod ile Hareketlendirilmesi Maskeleme (Mask) Kullanımı Web Menü Yapımı Harici Dosya Kullanımı Div tagının Php ile kullanımı Örnek Div tagının Php ile kullanımı Örnek-2 34
3 3 1. HTML DİLİ 1.1. HTML Nedir? HTML (Hyper Text Markup Language) Hareketli Metin İşaretleme Dili dir. Html komutları (tagları) < ve > işaretleri arasında kullanılırlar. Tagları sonlandırmak için / işareti kullanılır. Büyük-küçük harf ayrımı yoktur. Yalnız İngilizce dil yapısından kaynaklanan durumlara dikkat edilmelidir. Örneğin ALIGN kelimesinin küçük yazımı alıgn değil align dir. Herhangi bir text editör programı ile yazılabilirler. Kayıt yapılırken uzantı olarak htm veya html verilmelidir Bir HTML (Web) Sayfasının Bölümleri <html> <head> </head> <body> </body> </html> <HEAD> </HEAD> Arasında Yapılacak Tanımlamalar Bu bölümde, 1. Browser dil seti tanımlaması, 2. Browser başlık tanımlaması, 3. Arama motorları için meta tanımlamaları, 4. Standart dışı işlemler için stil tanımlamaları yapılır. a) Browser Dil Seti Tanımlaması Web sayfamızı ziyaret edecek farklı dillerdeki browserlar için, sitemizde kullandığımız karakterlerin aynen korunması için dil seti tanımlaması yapılmalıdır. Türkçe karakter setine(iso) ayarlamak için, <META Equiv= content-type CONTENT= text/html ; charset=iso >, Windows Türkçe için <META Equiv= content-type CONTENT= text/html ; charset=windows-1254 > kodları yazılmalıdır. b) Browser Başlık Tanımlaması Browserin en üst (caption) bölümüne bir metin çıkartmak için <title> Browserin üst bölümüne çıkartılacak metin </title> tanımlaması yapılabilir (Şekil-1).
4 4 Şekil-1 Browser Başlık Alanı c) Arama Motorları İçin Meta Tanımlamaları Arama motorlarının (Google, Yahoo,.) yaptığınız web sitenizi bulabilmesi için aşağıdaki meta taglarının tanımlanması gerekmektedir. <META NAME= Keywords CONTENT= Uluborlu, Isparta, myo,.. > böylece bu tanımlanan anahtar kelimeler (Uluborlu,Isparta,myo,..), arama sitelerinden aratıldığında sitemiz bulunabilecektir. Webmaster ın tanımlanması için, <META NAME= Author CONTENT= Webmaster ın Adı Soyadı > yazılmalıdır. Site içerik bilgisi için ise, <META NAME= Description CONTENT= Site İçeriğine ilişkin ifadeler > şeklinde tanımlanmalıdır. d) Standart Dışı İşlemler İçin Stil Tanımlamaları Bazı tagların normal davranışını (akışını) değiştirmek için stil tanımlamaları yapılabilir. Örneğin link tagı a normalde linklendirilmiş kelimenin altını çizer. Bunu, ilk etapta altı çizgisiz olsun, mouse üzerine gelince alt çizgi çıksın şeklinde düzenleyebiliriz. <style> a{text-decoration:none; a:hover{text-decoration:underline; <style> bütün bu tanımlamalar <head </head> arasında yapılmalıdır. <html> <head> <title> Uluborlu Selahattin Karasoy Meslek Yüksekokulu</title> <meta equiv= content-type content= text/html; charset=iso > <meta name= keywords content= Uluborlu, Isparta, myo, uskmyo, sdü, kiraz > <meta name= author content= > <meta name= description content= Her türlü program arşivi, mp3 köşesi, mizah, e- eğitim >
5 5 <style> a{text-decoration:none; a:hover{text-decoration:underline; body{background-attachment:fixed; </style> </head> <body> </body> </html>
6 <BODY> </BODY> ARASI Şimdiye kadar olan bölümlerde ön tanımlamalar yapılmaktadır. Esas web sayfamızın dizayn kısmı burada başlamaktadır. Zaten body kelimesi de gövde esas anlamındadır. <body> tagını bu şekilde kullandığımızda sayfamızın zemin (fon) rengi beyaz kabul edilmektedir. Zeminini renklendirmek için <body bgcolor= renk adı veya kodu > şeklinde yazmamız gerekmektedir. Örneğin zemini kırmızıya boyamak için kod, <body bgcolor= red > veya <body bgcolor= #ff0000 > şeklinde olmalıdır. Renk kodlarının mantığı RGB (Red Green Blue) formatındadır. Renkler kırmızı, yeşil ve mavi karıştırılarak elde edilmektedir. Her ana renk için arası bir değer kullanılabilir. kkyymm şeklinde altı basamaklı yer ayrıldığından hexodecimal (16 lık sistem) yazılmalıdır. Mesela Turquaz rengi için 40e0d0 yazılmalıdır (Şekil-2). Şekil-2 Turquaz Renginin Hex Kodu Fon a renk değil de grafik koymak içinse <body background= grafik dosyasının yeri adı ve uzantısı > şeklinde yazmak gerekir. Örneğin, <body background= c:\windows\kur.bmp > gibi. Grafiğin zeminde çakılı kalması için <body {background-attachment:fixed; background= c:\windows\kur.bmp > olarak düzenlenmelidir.
7 Linkler (<a>) Sayfalar arası veya internet adresleri arasında kullanılan bağlantılardır. Linkleri iki grupta inceleyebiliriz. 1. Sayfa içi linklendirme 2. Sayfalar arası veya internet adreslerine linklendirme 1. Sayfa içi linklendirme Aynı web sayfası içerisinde bir noktadan başka bir noktaya harekettir. Tek ekrana sığmayan uzun boylu web sayfalarında kullanılır. Gidilecek yer tanımlaması için <a name= yer adı > şeklinde tanımlama yapılır. Tanımlanan yere götüren linkin koduna ise, <a href= #yer adı >Link ifadesi </a> şeklinde tanımlama yapılır. Burada # karakterinin yazılması önemlidir. Bu karakter, gidilecek hedefin başka bir web sayfası olmadığını, sayfa içerisinde bir yer adı olduğunu anlatır. 2. Sayfalar arası veya internet adreslerine linklendirme Linke tıklandığında başka bir web sayfası çağrılacaksa, kod <a href= çağrılacak web sayfası > Link ifadesi </a> şeklinde olacaktır. Eğer çağrılacak web sayfası internet üzerinde bir adres ise, kod <a href= > Link ifadesi </a> şeklinde olacaktır.
8 8 Linklerde target (hedef konumu) kullanımı Link tıklandığında, hedefin yeni browser penceresinde, bir çerçevede (frame) yada bir iç çerçevede (iframe) açtırılabilmesi için kodda target kullanarak konum belirtmek gerekir. Konum belirtmek için kullanılabilecek dört standart deyim vardır. Bunlar _blank, _parent, _self ve _top dır. _blank, hedefin yeni browser penceresinde açtırılması için, _parent, çerçeve(frame) yada iç çerçeve (iframe) de ana sayfada açtırmak için, _self, bulunulan çerçeve (frame) yada iç çerçevede (iframe) açtırmak için, _top, Frame li sayfalarda, hedefi aynı browser ekranında frame den çıkarak açtırır Çerçeve (frame) yada iç çerçeve (iframe) kullanan sayfalarda ise, açtırılacak frame/iframe ismi target a yazılmalıdır. Örneğin, hedef orta isimli iframe de açılacaksa kod, <a href= açılacak sayfa target= orta >Link </a> şeklinde olmalıdır. Linklerle ile ilgili bazı uygulamalar Link üzerine gelinince arka plan rengi değişsin; <a href="#" onmouseover=document.bgcolor="#345678">link1</a> <a href="#" onmouseover=document.bgcolor="#9012ac">link2</a> <a href="#" onmouseover=document.bgcolor="#13dc67">link3</a> Linklere title (açıklama etiketi) atanması <a href="#" title= Açıklama Metni1 Açıklama Metni2>Link</a> ( 
) yeni satır başı için kullanılmıştır.
9 9 Tablolar (<table>) ÖRNEK-1: <table border=1> <tr onmouseover=bgcolor="white" onmouseout=bgcolor="333366"><td>merhaba</td></tr> </table> ÖRNEK-2: <TR onmouseover="this.bgcolor='yellow'" onmouseout="this.bgcolor='white'"> Statusbar da sabit mesaj <body onload= window.defaultstatus= mesajınız > Resimlere transparanlık vermek (<img>) <img src= resim.jpg style= fitler:alpha(opacity=70) > <IMG style="filter:alpha(opacity=50,style=0)" src="resim buraya"> efect 2. <IMG style="filter:alpha(opacity=80,style=1)" src="resim buraya"> <marquee> transparanlık uygulamak <marquee style="filter:alpha(opacity=100,finishopacity=0,style=1,startx=200,starty=0,finishx=0,f inishy=0) >
10 HTML de FORM KULLANIMI Web Sayfalarında, ziyaretçiden bilgi alınması gereken durumlarda formlar kullanılır.<form> ve </form> tagları arasında bilgi giriş dizaynı yapılır. <form> tagı içerisinde method ve action tanımlamaları yapılmalıdır. method ile, hazırlanan formdan verilerin hedef sayfaya ne şekilde gönderileceği tanımlanır. Buraya Get yada Post yazılabilir. Get metodu, verileri browserin adres satırında tek bir string de toplayarak açıkta gönderir (yani girilen bilgiler adres satırında görülebilir!!), Post metodu ise verileri adres satırında görüntülemeden hedef sayfaya gönderir. Gizlilik gerektiren bilgi alımlarında (şifre gibi) Post metodunun kullanılması daha doğru olacaktır. Şekil-3 Form Görüntüsü
11 DUYURU PANOSU OLUŞTURMAK 3. Photo impact programı ile 250x200 ebatlarında yeni bir sayfa açılır. Şekil-4 deki gibi bir tasarım hazırlanır. Şekil 4 Duyuru Panosu 2. Slice aracı ile Şekil-5 deki gibi, tasarım bölüntülere ayrılır ve File menüsündeki Save For Web seçeneği ile sayfa HTML olarak kaydedilir. Photo impact, kaydedilen ortama images klasörü oluşturur, kesilen parçaları bu klasöre depolar. Şekil 5 Slice Aracı İle Kesim 3. Sayfanın kaynak kodları açılır. Duyurularımızın kayarak geçeceği beyaz çerçevenin kodlardaki yeri bulunarak; <TD WIDTH=250 HEIGHT=200><Marquee height=200 direction= up onmouseover= this.stop() onmouseout= this.start() scrolldelay=100 scrollamount=2> Duyuru1 <br> Duyuru2 <br> Duyuru3 </marquee> </TD> olacak şekilde düzenlenir. Eğer duyurular linklendirilecekse, duyuru metinleri <a href=#> Duyuru1 </a> gibi <a href> </a> blokları arasına alınır.
12 HTML İLE VISUAL BASIC SCRIPT KULLANIMI HTML kodlarımız içerisinde Visual Basic Script (vbscript) veya Java Script (javascript) kullanabiliriz. <html> <body> <script language= vbscript/javascript>... </script> </body> </html> Örnek: Şekil-6 daki gibi bir form a veriler girilip Kaydet butonuna basılınca Kaydınız İşleme Alınmıştır. Teşekkür ederiz mesajını vbscript ile yazdıralım. <html> <body> <form name="uye" method="post" action=""> <pre> Şekil 6 Kayıt İşlemi Adınız<input type="text" size=20 name="ad"> <input type="text" size=20 name=" "> Şifre <input type="password" size=20 name="sifre1"> Şifre Tekrar <input type="password" size=20 name="sifre2"> Mesaj <textarea rows=5 cols=17 name="mesaj"></textarea> <input type="submit" value="kaydet" name="kaydetbutonu"> <input type="reset" value="temizle"> </form> <script language="vbscript" event="onclick" for="kaydetbutonu"> msgbox "Kaydınız İşleme Alınmıştır.Teşekkür Ederiz...",48 </script> </body> </html> Örnek: Form a girilen verilerin doğruluk kontrolünün yapılması <html> <body> <form name="uye" method="post" action=""> <pre> Adınız <input type="text" size=20 name="ad"> <input type="text" size=20 name=" "> Şifre <input type="password" size=20 name="sifre1">
13 13 Şifre Tekrar <input type="password" size=20 name="sifre2"> Mesaj <textarea rows=5 cols=17 name="mesaj"></textarea> <input type="submit" value="kaydet" name="kaydetbutonu"> <input type="reset" value="temizle"> </form> <script language="vbscript" EVENT="onclick" FOR="Kaydet"> hata=0 if form1.uyead.value="" then msgbox "Lütfen Üye adi belirleyiniz!" hata=1 end if if form1.sifre1.value="" then msgbox "Lütfen Sifre1'i belirleyiniz!" hata=1 end if if form1.sifre2.value="" then msgbox "Lütfen Sifre2' belirleyiniz!" hata=1 end if if form1. .value="" then msgbox "Lütfen adresinizi belirleyiniz!" hata=1 end if Şekil 7 Doğruluk Kontrolü if form1.sifre1.value>< form1.sifre2.value then msgbox "Sifrelerinizi Kontrol Ediniz" hata=1 end if if instr(form1. .value,"@") =0 then msgbox "Lütfen adresinizi kontrol ediniz" hata=1 end if if instr(form1. .value,".com") =0 and instr(form1. .value,".net") =0 and instr(form1. .value,".org") =0 and instr(form1. .value,".gov") =0 and instr(form1. .value,".mil") =0 then msgbox " adresinizi kontrol ediniz!(.com,.net..)" hata=1 end if if hata=0 then form1.submit </script></body> </html> Örnek: Web sitemizin ziyaret saatine göre gece ve gündüzü algılamasını sağlayalım. <html>
14 14 <body> <script language="vbscript"> saat=hour(now) if saat>6 and saat<19 then document.bgcolor="white" document.fgcolor="black" document.write "İyi Günler. Web Siteme Hoşgeldiniz" else document.bgcolor="black" document.fgcolor="white" document.write "İyi Akşamlar. Web Siteme Hoşgeldiniz" end if </script> </body> </html> Örnek: Vize-Final-Ortalama hesabı <html> <body> <pre> Şekil 8 Not Hesap <form name="hesap_form" method="post" action=""> Vize <input type="text" size=5 name="vize"> Final <input type="text" size=5 name="final"> <input type="button" name="hesapla" value="hesapla"> <hr> Ortalama<input type="text" size=5 name="ort"> Durum<input type="text" size="10" name="durum"> </form> <script language="vbscript" EVENT="onclick" FOR="hesapla"> ortalama=(document.hesap_form.vize.value) * * (document.hesap_form.final.value) document.hesap_form.ort.value=ortalama if ortalama<69.5 then document.hesap_form.durum.value="kaldiniz" else document.hesap_form.durum.value="geçtiniz" end if </script> </body> </html>
15 15 HTML İLE JAVASCRIPT KULLANIMI JavaScript ile açılır kapanır menü yapımı için, ana seçenekler ve alt seçenekler aşağıdaki şekilde hazırlanır. Alt seçenekler div tagı içerisine alınır. Alt seçeneklerin ilk etapta kapalı olmaları için, Div taglarına style="display:none;" ifadesi ile stil tanımı yapılır. <div id= 1 style= display:none; > Ana seçeneklerin önüne yerleştirilen grafikler linklendirilerek, javascript çağırılır. <a href="javascript:goster(1)"><img src="images/ana_simge.png" width="15" height="15" border="0" /></a> goster isimli javascript fonksiyonuna div taglarının id si parametre olarak verilmektedir. Böylece hangi menünün alt seçeneklerinin açılacağı veya açıksa kapatılacağı tanımlanmış olur. Fonksiyonun kodları ise şu şekilde olacaktır; <head> <script language="javascript" type="text/jscript"> function goster(id) { menu=document.getelementbyid(id); if(menu.style.display = ="block") menu.style.display = "none";
16 16 else menu.style.display="block"; </script> </head> Fonksiyon içerisinde getelementbyid methodu ile, fonksiyona gönderilen id değerinin, web sayfasındaki bu id ye sahip tag olarak algılanması sağlanmaktadır. menu=document.getelementbyid(id); alt menülerin açıksa kapatılması, kapalıysa açılması için if(menu.style.display = ="block") menu.style.display = "none"; else menu.style.display="block"; kodları kullanılır. menu.style.display = "none"; ifadesi ile menu divinin kapatılması, menu.style.display = "block"; ifadesi ile de gösterilmesi sağlanır.
17 WEB DE MULTİMEDYA (SES,VİDEO) İŞLEMLERİ Web ortamında multimedya işlemleri için kullanılan iki tag bulunmaktadır. Bunlar 1. <img dynsrc=.. > ve 2. <embed src= > taglarıdır. Web sayfamızın arka planında bir fon müziği çalsın istiyorsak; <embed src= fon.mp3 autostart= true loop= true > şeklinde kod yazılmalıdır. Buradaki autostart özelliği müziğin otomatik olarak çalmaya başlamasını sağlamak için ve loop işlemi de müzik bittiğinde otomatik olarak tekrar başlatmak için konulmuştur. Embed tagının kontrolorü (play,pause,stop,ileri,geri,ses seviye butonları) vardır. Tagın çalışırken görünmemesi için hidden= true eklenebilir. Embed tagıyla Flash swf dosyalarıda çalıştırılabilir. Şekil 9 <embed> tagı
18 STİLLER ve CSS DOSYALARI (CSS-Cascading Style Sheets- Kategorize edilmiş Stil Şablonları) Stiller, en basit tanımıyla tagların standart davranışlarını değiştirmektir. Şekil 10 Stiller Şekil-10 daki gibi kategorize edilebilirler. Şimdi bunları detaylıca inceleyelim DAHİLİ STİLLER a) Yerel (local) Stiller: Yerel stiller bir html tagı için özel olarak kullanılırlar. <h1 style= font-size:20pt; color:blue; >Web Dersleri</h1> Yukarıda <h1> tagı için özel olarak bir stil tanımlaması yapılmıştır. Bu stilde, font büyüklüğü 20pt. ve yazı rengi mavi olarak ayarlanmıştır. Görüldüğü gibi, yerel stiller o tagın içerisinde style= ifadesi ile tanımlanmaktadır. Doğal olarak sadece o tagın özelliğini değiştirir. b) Genel (global) Stiller: Genel stiller yerel stillerden farklı olarak, tanımlandıkları tagın o sayfada her kullanılışında etkili olurlar. Tanımlama yerleri de <head> </head> blokları arasında <style> </style> blokları açılarak yazılır. Şimdi yukarıda yerel olarak tanımlaması yapılan <h1> tagını genel olarak tanımlayalım. <html> <head> <style >
19 19 h1{font-size:20pt; color=red; </style> </head> <body> <h1> Web Dersleri</h1> <h1> Bu da 2. Başlık </h1> </body> </html> Görüldüğü gibi, genel stiller bir sefer tanımlanmakta ve sayfa içerisinde o tag her kullanıldığında stil özelliği çalışmaktadır HARİCİ STİLLER Bu tür stil kullanımında stiller, uzantısı css olan ayrı bir dosyaya yazılır. Sonra, bu stilleri kullanacak her sayfanın <head> </head> bloğu arasına <Link href="dosya_ismi.css rel="stylesheet" type="text/css"> kodu yazılarak stiller çağırılır. Örnek olarak deneme.css dosyasını oluşturalım. deneme.css içerisindeki kodlar; Şimdi, deneme.css stil şablonunu kullanacak olan web sayfasında bu dosyayı çağıralım. <html> <head> <Link href="deneme.css rel="stylesheet" type="text/css"> </head> <body> <a href= # > Bu bir Linktir </a> </body> </html> Artık bu web sayfasındaki linkler, deneme.css dosyasındaki stil tanımlamalarına göre davranacaktır.
20 <FRAMESET> TAGI İLE BÖLÜNTÜLÜ SAYFA TASARIMI <FRAMESET> Tagı, birden fazla web sayfasını, tek bir sayfada toplamak için kullanılır. Sayfa, yatay (Rows), düşey (Cols) ve karışık (hem yatay hem de düşey) şekilde bölünebilir Düşey Bölüntü Oluşturmak (Cols) Şekil-11 de, a.htm ve b.htm sayfaları düşey bölüntülü index.htm sayfasında birleştirilmiştir. index.htm sayfasının kodu şu şekilde olacaktır; <FRAMESET COLS= 100,400 > <FRAME NAME= sol SRC= a.htm > <FRAME NAME= sag SRC= b.htm > </FRAMESET> Buradaki 100 ve 400 değerleri piksel cinsinden sayfaların genişlik ölçüleridir. Ziyaretçinin, bölüntü çizgilerini genişletip daraltamamasını sağlamak için kod içerisine noresize ifadesi eklenir. O zaman kod aşağıdaki gibi olacaktır; <FRAMESET COLS= 100,400 > <FRAME NAME= sol SRC= a.htm noresize> <FRAME NAME= sag SRC= b.htm noresize> </FRAMESET> Şekil 11 Düşey Bölüntü Ara bölüntü çizgisinin tamamen ortadan kaldırılması için ise frameborder= no ve framespacing= 0 kodları eklenmelidir. Kodun son hali aşağıdaki gibi olacaktır; <FRAMESET frameborder= no framespacing= 0 COLS= 100,400 > <FRAME NAME= sol SRC= a.htm noresize> <FRAME NAME= sag SRC= b.htm noresize> </FRAMESET> Yatay Bölüntü Oluşturmak (Rows) Düşey bölüntüden tek farkı Cols yerine Rows yazılmasıdır. O halde kod aşağıdaki gibi olacaktır. <FRAMESET frameborder= no framespacing= 0 ROWS= 100,400 > <FRAME NAME= sol SRC= a.htm noresize> <FRAME NAME= sag SRC= b.htm noresize> </FRAMESET> Şekil-12 Yatay Bölüntü
21 Karışık (hem düşey hem de yatay) Bölüntü Oluşturmak Şekil 13 Karışık Bölüntü Bu durumda sayfayı tam bölen taraftan başlanır. Kod aşağıdaki gibi olacaktır; <FRAMESET COLS= 100,* > <FRAME NAME= sol SRC= c.htm > <FRAMESET ROWS= 100,* > <FRAME NAME= ust SRC= a.htm > <FRAME NAME= orta SRC= b.htm > </FRAMESET> </FRAMESET> Burada kullanılan * karakteri, ekran çözünürlüğünden geri kalanı kullan anlamındadır. Bölüntü ölçüleri için pikselden başka % şeklinde ölçülendirme de kullanılabilir. % li kullanılırsa kod aşağıdaki gibi olacaktır; <FRAMESET COLS= 20%, * > <FRAME NAME= sol SRC= c.htm > <FRAMESET ROWS= 20%, * > <FRAME NAME= ust SRC= a.htm > <FRAME NAME= orta SRC= b.htm > </FRAMESET> </FRAMESET>
22 22 Dreamweaver programı ile Frameset oluşturulacaksa Şekil-14 deki gibi, File New Framesets menüsünden hazır bölüntüler seçilebilir. Şekil-14 Dreamweaver İle Frameset Oluşturmak
23 23 2. FLASH ANİMASYONLARI Flash, vektör tabanlı grafik ve animasyon hazırlama programıdır. Bu program ile Şekil-15 de gösterilen formatlarda grafik ve animasyon oluşturulabilir. Web siteleri için bileşen hazırlanabilir. Ya da başlı başına web sitesinin tamamı flash ile hazırlanabilir. Flash animasyonları içerisinde kod da kullanılabilmesi (action script) programı oldukça güçlü kılmaktadır. Şekil 15 Flash Formatları 2.1. Bir Movie Clip Nesnesinin Kod ile Hareketlendirilmesi Örnekte, iki layer kullanılarak, bulut movie clip inin kodla manzara üzerinde hareketlendirilmesi sağlanmıştır. Bulut movie clip inin Actions ına şu kodlar yazılmalıdır; Şekil-16 Katmanlar (Layer) onclipevent(enterframe) { _x+=10; Bu kod ile, flash çalıştığı sürece (onclipevent(enterframe) bulut nesnesi, x ekseninde (_x) sağa doğru 10 ar artarak ilerler. Bu şekilde nesne sürekli ilerleyeceği için, sahneden çıktıktan sonra geri dönüş sağlanmalıdır. Geri dönüş için, sahne dışına bulut nesnesinin doğrultusuna bir engel nesnesi (movie clip i)
24 24 çizilir. Örneğimizde bu nesne bir dikdörtgendir ve adı duvar olarak verilmiştir. Bulut nesnesi duvara çarptıktan sonra geri dönüşün sağlanabilmesi için hittest komutundan yararlanılacaktır. Bu komut iki nesnenin çarpışmasını yakalamaktadır. Kodumuzun yeni hali şu şekilde olacaktır; onclipevent(enterframe) { _x+=10; if(hittest(_root.duvar)) _x=-100; 2.2. Maskeleme (Mask) Kullanımı Maskeleme iki katman(layer) arasında oluşmaktadır. Üstteki katman maskeleyen, alttaki katman ise maskelenen nesnedir. Maskeleyen katmanda sağ klik yapılarak mask seçilir. Maske nesnesine (create motion tween) ile maskelenmesini istediğimiz nesne üzerinden geçecek şekilde düzgün doğrusal hareket verilir. Örnekte, çizgiler üzerinde beyaz ışıklı bir alanın yürütülmesi animasyonu mask ile yapılmıştır. Şekil-17 Ekran Görüntüsü Şekil-18 Mask İşlemi
25 25 Şekil-19 Katmanlar Şekil-20 Ekran Görüntüsü Son Hali 2.3. Web Menü Yapımı Flash ile web sitelerimizde kullanabileceğimiz her türlü bileşeni yapmak mümkündür. Basit bir menü tasarımını şu şekilde gerçekleştirebiliriz; Menü çalıştırıldığında ilk etapta kapalı hali ekrana gelecektir (Şekil-21). Üçgen butona tıklandığında menü sağa doru açılarak seçenekler görüntülenecektir (Şekil-22). Tasarımın katmanları (layer) ise Şekil-23 de gösterilmiştir. Şekil-21 Menü Kapalı
26 26 Şekil 23 Katmanlar Kodlar ise şu şekilde olacaktır; Fon katmanının actions ına stop( );, layer4 ün 20. Zamanına stop( );, sağa butonun kodu; On(press) { gotoandplay(5); Sola butonun kodu; On(press) { gotoandplay(1); Resimler, Mp3, Videolar ve Linkler şeklinde butonlar oluşturulup, bunların actions ına on(pres) { geturl( resimler.htm, sag ); Şeklinde kod yazılmalıdır. Not: Flash linklerinin ilgili frame de açılmama problemi ile karşılaşırsanız a.html internet adresinden çalıştığınız swf klasörünü eklemeniz gerekmektedir.
27 Harici Dosya Kullanımı Bu uygulamada, harici bir dosyada tutulan fatura bedelinin flash içerisine okutularak, kullanıcının ödeme yaptığı tutarla karşılaştırılıp sonuç raporu (Eksik, Tam veya Fazla Ödeme) verilmesi sağlanmaktadır. Uygulama ara yüzü PhotoImpact programıyla Jpeg dosya formatında hazırlanmış ve Flash içerisindeki arka_plan katmanına import edilmiştir (Şekil- 24). Tasarımın katmanları (layer) ise Şekil-25 de gösterilmiştir. Şekil-24 Arayüz Şekil-25 Katmanlar
28 28 Kodlar ise şu şekilde olacaktır; Kod katmanının actions ına dosya=new LoadVars(); dosya.load("elektrik.txt"); dosya.onload=function(){ tutar_nesnesi.text=dosya.bedel; Ödeme Yap butonunun kodu; on(press) { tutar=number(tutar_nesnesi.text); odenen=number(odenen_nesnesi.text); fark=number(odenen-tutar); if(fark==0) {mesaj_nesnesi.text="tam Ödeme Yaptınız.Teşekkürler."; damga_klip.gotoandstop("tam"); else if(fark>0) {mesaj_nesnesi.text=fark + " YTL Fazla Ödeme Yaptınız.Emin misiniz?" damga_klip.gotoandstop("fazla"); else {mesaj_nesnesi.text=fark + " YTL Eksik Ödeme Yaptınız!!!!" damga_klip.gotoandstop("eksik"); damga_klip isimli MovieClip bilgileri ise şöyledir; Şekil-26 damga_klip Katmanları Damgalar katmanının tasarımları
29 29 BEKLE katmanında ise kod olarak sadece stop(); kodu bulunmaktadır.
30 30 Div Kullanımı (Php ile) Örnek-1: Div yapısı aşağıdaki gibi olan web sayfasını oluşturalım. Sayfanın div stil kodları şu şekildedir #ana_div { background-color: #333; height: 600px; width: 800px; margin-right: auto; margin-left: auto; padding: 10px; #banner { background-color: #CFC; height: 150px; width: 780px; margin-right: auto; margin-left: auto; body { margin-top: 0px; background-image: url(images/fon_urun.jpg);
31 31 #alt { background-color: #333; height: 425px; width: 780px; margin-right: auto; margin-left: auto; margin-top: 5px; #firsat { background-color: #4A0F00; height: 200px; width: 200px; background-image: url(images/urun_firsat.png); background-repeat: no-repeat; #ana_div #alt #sol #firsat #firsat_icerik { height: 141px; width: 166px; padding-left: 20px; padding-top: 44px; #sol { float: left; height: 425px; width: 200px; background-color: #F30; #sag { background-color: #FFB9A8; float: right; height: 425px; width: 575px; Günün Fırsatı bölümü için FireWorks programında yandaki grafik hazırlanır ve urun_firsat.png olarak sitenin images klasörüne kaydedilir. background-image: url(images/urun_firsat.png); Stil kodu ile firsat divinin arkaplanı olarak belirlenir.
32 32 Sayfanın internet explorerdaki görüntüsü İndex.php ana sayfasındaki firsat divi içerisine yerleştirilen firsat_icerik divine gunun_firsati.php sayfası çağırılır (include edilir). <div id="firsat"> <div id="firsat_icerik"><?php include("gunun_firsati.php");?></div> </div> Günün fırsatı bölümü içerisindeki Ürün resmi, ürün adı ve fiyat bilgileri, Php yardımıyla firsat.txt dosyasından günün tarihine göre getirilir.
33 33 Firsat.txt dosyasının yapısı aşağıdaki gibidir. gunun_firsati.php sayfasının kodları: <?php $dosya="firsat/firsat.txt"; $dd=fopen($dosya,'r'); $bugun=date("j"); while(!feof($dd)) { $veri=fgets($dd,1024); $dizi=explode(":",$veri); if($dizi[0]==$bugun) { echo " &n bsp; <img src='firsat/$bugun.jpg'><br>"; echo $dizi[1]; echo " <font class='yazi' >".$dizi[2]. "</font> TL.<br>"; echo " &n bsp; <font class='yazi2' >".$dizi[3]. " TL."; fclose($dd);?>
34 34 Div Kullanımı (Php ile) Örnek-2: Goldaş kuyumculuk web sitesi Günün Fırsatı bölümü Php kodları: <?php $gun=date("j"); echo "<center><a href='satis.php?id=$gun'><img src='firsat/$gun.jpg'></a></center>"; $dosya=fopen("firsat/firsat.txt","r"); while(!feof($dosya)) { $veri=fgets($dosya,1024); $dizi=explode(":",$veri); if($dizi[0]==$gun) { echo $dizi[1]."<br>"; echo "<font class='cizik'>".$dizi[2]." TL</font><br><br>"; echo "<font class='fiyat'><center>".$dizi[3]. " TL</center></font>";?>
35 35 En çok satılan Popüler Ürün Php kodları: <?php //en çok satılan ürün $dosya=fopen("firsat/firsat.txt","r"); $enbuyuk=1; while(!feof($dosya)) { $veri=fgets($dosya,1024); $dizi=explode(":",$veri); $dizi[4]=(integer) $dizi[4]; if($enbuyuk<$dizi[4]) { $enbuyuk=$dizi[4]; $coksatan=$veri; fclose($dosya); $dizi=explode(":",$coksatan); echo "<center><img src='firsat/$dizi[0].jpg'></center><br>"; echo $dizi[1];?> Firsat.txt dosyasının içeriği: 1:HP DeskJet 2400 Series Yazıcı:280:140:0 2:SONY HDMI Kamera:2000:1000:0 3:Nokia N100 Cep Telefonu:200:100:0 4:3.5" HD Disket:10:5:0 5:Seagate 520 GB HDD :260:130:0 6:Acer Aspava PC:1120:560:0 7:JVC Mp3 Player:480:240:10 8:Dec Telefon + 17" LCD Monitör:680:340:0 9:Mustek Scanner:80:40:0 10:HP LaserJet 1100 Series Yazıcı:440:170:0 11:Seagate 520 GB HDD :260:130:0 12:Acer Aspava PC:1120:560:0 13:JVC Mp3 Player:480:240:0 14:Dec Telefon + 17" LCD Monitör:680:340:0 15:Mustek Scanner:80:40:5 16:HP LaserJet 1100 Series Yazıcı:340:170:0 17:HP DeskJet 2400 Series Yazıcı:280:140:0 18:SONY HDMI Kamera:1000:500:0 19:Nokia N100 Cep Telefonu:400:200:0 20:3.5" HD Disket:15:5:0 21:HP DeskJet 2400 Series Yazıcı:280:140:2
36 36 22:SONY HDMI Kamera:2000:1000:0 23:Nokia N100 Cep Telefonu:200:100:0 24:3.5" HD Disket:10:5:0 25:Seagate 520 GB HDD :260:130:0 26:Acer Aspava PC:1120:560:0 27:JVC Mp3 Player:480:240:0 28:Dec Telefon + 17" LCD Monitör:640:340:0 29:Mustek Scanner:80:40:0 30:HP LaserJet 1100 Series Yazıcı:340:170:0 31:Seagate 520 GB HDD :260:130:0
37 37 Ürün Satış (satis.php) Php Kodları: Günün firsatı bölümündeki ürün resmine tıklandığında, o ürünün dosyadaki satış adedini 1 artıracak şekilde kodlar düzenlenir. Bunun için, satılacak ürün hariç diğer ürün bilgileri yedek dosyaya (firsat_yedek.txt) yazdırılır. Satılacak ürün ise, dosyadaki satış rakamına 1 ilave edilerek yedek dosyaya yazdırılır. 1 ilave için, $satir[4]=(integer) $satir[4] ; $satir[4]++; kodları kullanılır. satis.php sayfasının toplam kodları aşağıdaki gibi olacaktır. <?php $dosya="firsat/firsat.txt"; $dosya2="firsat/firsat_yedek.txt"; $dd=fopen($dosya,'r'); $dd2=fopen($dosya2,'w'); while(!feof($dd)) { $veri=fgets($dd,1024); $satir=explode(":",$veri); if($satir[0]==$urun_no) { $satir[4]=(integer) $satir[4] ; $satir[4]++; $tum_bilgi=$satir[0].":".$satir[1].":".$satir[2].":".$satir[3].":".$satir[4]; fwrite($dd2,$tum_bilgi); // satılan ürün bilgisini güncelleyip yazdırıyoruz else fwrite($dd2,$veri); fclose($dd); fclose($dd2); unlink("firsat/firsat.txt"); //firsat.txt dosyasını siler! Yedeğini oluşturduk rename("firsat/firsat_yedek.txt","firsat/firsat.txt"); // yedek dosyanın ismini firsat.txt yapıyoruz include("index2.php");?>
Web Site Tasarımı (Html-Css) (SD0139) Murat KARA 2017
Web Site Tasarımı (Html-Css) (SD0139) Murat KARA 2017 1. Hafta TANIŞMA, İNTERNET, HTML İçerik (Hafta/Konu) 1. Tanışma, İnternet Nedir, Html Nedir, Temel Terim ve Kavramlar 2. İnternete erişim ve İnternet
7. Çerçeveler. Bu bölümü bitirdiğinizde,
7. Çerçeveler Bu bölümü bitirdiğinizde, Çerçevelerden oluşan bir WEB sayfası tasarlamayı, İç içe çerçeveler oluşturmayı ve Çerçeveleri isimlendirmeyi, Bağ kurulan dosyaları belirtilen çerçeve içerisinde
www.elektrikogretmenleri.com
DREAMWEAVER DA TABLOLAR KULLANARAK İNDEX SAYFASI HAZIRLAMAK Günümüzde web siteleri Frameset yapısı ve Tablo yapısı kullanarak yapılmaktadır. Frameset (Çerçeve) yapılı web sitelerinde index sayfaları oluşturulduğunda
İNTERNET PROGRAMCILIĞI I
BÖLÜM 11 11- ÇERÇEVELER (FRAME) Çerçeve tekniği, bir web sayfasını istenilen miktarda parçaya bölüp, bu sayfa üzerinde birkaç sayfa birden görüntülenmesine olanak verir. Bu tekniğin en çok kullanılan varyasyonu,
12 TBT / WEB TASARIM ve PROGRAMLAMA ( Not 3 )
12 TBT / WEB TASARIM ve PROGRAMLAMA ( Not 3 ) 25.09.2017 METİN VE GÖRÜNÜM DÜZENLEME ETİKETLERİ : etiketleri dökümana başlık eklemek için kullanılır. etiketinde ki x ifadesi 1 den 6 ya kadar
Web Programlama Kursu
Web Programlama Kursu Bu kurs ne değildir? Neyi amaç edinmiştir? Bilgisayar Programcısı? Web Tasarımcısı? Web Programcısı? Neler öğreneceğiz? Kurs sonunda neler yapılabileceğiz? Örnek siteler Örnek Projeler
HTML Etiketleri Genel Özellikler (Global Attributes)
HTML Yorum Eklemek HTML kodunun içine tarayıcı tarafından gösterilmeyecek yorumlar şu şekilde eklenir. Hatırlatıcı notlar eklemek için de kullanılabilir. HTML Etiketleri Genel
BTP 207 İNTERNET PROGRAMCILIĞI I. Ders 2
BTP 207 İNTERNET PROGRAMCILIĞI I Ders 2 HTML 2 Hyper Text Markup Language = Yüksek/İleri Metin İşaretleme Dili Web sayfaları oluşturmak için kullanılan içerik biçimlendirme dilidir. Yüksek/ileri metin
Web Tasarımının Temelleri
1. Hafta Web Tasarımının Temelleri Öğr. Gör. Murat YAZICI www.muratyazici.com Artvin Çoruh Üniversitesi, Artvin Meslek Yüksekokulu www.artvin.edu.tr HTML (HyperText Markup Language) Web sayfaları hazırlamak
Web Tasarımının Temelleri
1. Hafta Web Tasarımının Temelleri Öğr. Gör. Murat YAZICI www.muratyazici.com Artvin Çoruh Üniversitesi, Artvin Meslek Yüksekokulu www.artvin.edu.tr Formlar Kullanıcının da aktif olacağı dinamik web sayfaları
Web Teknolojileri ve Programla
12.05.2010 Dersi Özeti Kursun içeriğini özeti Alt başlıkları Proje Kurs esnasında kullanmayı planladığımı editörler HTMLe giriş Temel etiketler Notepad+ da örnekler Web Teknolojileri ve Programla Bölüm
DIV KAVRAMI <style> position: absolute
DIV KAVRAMI Div tag i katman oluşturmak için kullanılır. Div ler sayfanın komple bir satırını kaplarlar, bu yüzden tag i içerisinde şekillendirilip, boyutlandırılmaları gerekir. Aşağıdaki şekilde
HTML Sayfaları. Bütün html sayfaları
HTML VİZE NOTLARI HTML Sayfaları Bütün html sayfaları tagıyla başlar ve tagıyla biter. tagları arasında ve tagları vardır. Örnek bir html boş sayfası kodları şu şekilde
BMT 202 Web Tasarımı Bahar Dönemi. Yük. Müh. Köksal GÜNDOĞDU 1
BMT 202 Web Tasarımı 2016 2017 Bahar Dönemi Yük. Müh. Köksal GÜNDOĞDU 1 HTML Yük. Müh. Köksal GÜNDOĞDU 2 HTML Editörleri Web sayfası oluşturmak için not defteri gibi basit bir metin düzenleme yazılımı
Web Formlar ve Sayfalar Arasında Bilgi Gönderme. BATML İnternet Programcılığı 1
Web Formlar ve Sayfalar Arasında Bilgi Gönderme BATML İnternet Programcılığı 1 Bazı web sitelerinde sayfalar arasında bilgi veya değişken göndermek gerekebilir. Gönderilen bu bilgi kullanıcı adı ve şifre
BİLGİSAYAR 4 MOLEKÜLER BİYOLOJİ VE GENETİK BÖLÜMÜ YARD. DOÇ. DR. MEHTAP YALÇINKAYA 08.04.2011
BİLGİSAYAR 4 MOLEKÜLER BİYOLOJİ VE GENETİK BÖLÜMÜ HTML DERS NOTLARI 6. DERS YARD. DOÇ. DR. MEHTAP YALÇINKAYA 08.04.2011 HYPERLINKS - KÖPRÜ Sayfalara link (bağlantılar) oluşturmak için kullanılır.
Site Temizlik Projesi Kodları
Site Temizlik Projesi Kodları Site Temizlik Projesi -2 nin kodları aşağıdadır. (İlgili site sayfasını önceki yazılarda bulabilirsiniz.) [crayon-5c2acf77c2a0b746634170/] İndir (DOCX, 15KB) İlk Hafta Sunumu
Arayüz Geliştirme Dokümantasyonu
Arayüz Geliştirme Dokümantasyonu Proje: İş: Müşteri: Nosab Web Sitesi Arayüz Geliştirme Aeronorm Index 1. Sayfalar 2. Renk Paleti 3. Tipografi 4. Kutu Modeli 5. Bileşenler 6. Kod ve Sayfa Yapısı 7. Responsive
Site Tasarım Çalışması -3
Site Tasarım Çalışması -3 Aşağıda adresini verdiğim çalışmayı table kullanarak yapmaya çalışınız., Örnek site div ile yapıldığından bölümler tablo aynı hizada değildir. Sizler eşit bölmeli table kullanacaksınız;
İnternet,artık hayatımızın önemli bir parçası. Her gün interneti programlar aracılığı ile ya da internet siteleri aracılığı ile kullanıyoruz.
Mahmut BORA KARAKUŞ İnternet,artık hayatımızın önemli bir parçası. Her gün interneti programlar aracılığı ile ya da internet siteleri aracılığı ile kullanıyoruz. Peki internet nasıl çalışıyor ve internet
BMT 202 Web Tasarımı Bahar Dönemi. Yük. Müh. Köksal GÜNDOĞDU 1
BMT 202 Web Tasarımı 2016 2017 Bahar Dönemi Yük. Müh. Köksal GÜNDOĞDU 1 HTML 5 Yük. Müh. Köksal GÜNDOĞDU 2 HTML 5 Günümüzde kullanılan HTML 4.1 sürümü, CSS desteğiyle ne kadar düzenli ve sağlam bir yapıda
Frame Çerçeveler Web sayfasını birden fazla html sayfa ile oluşturmaya imkan tanır. html örnekler\örnek17.html. örnek17.html
HTML Ders 7 Frame Çerçeveler Web sayfasını birden fazla html sayfa ile oluşturmaya imkan tanır. html örnekler\örnek17.html örnek17.html htm1.html htm1.html ... Çerçeve oluşturmada
CSS (Stil Şablon) (Cascading Style Sheets) YRD. DOÇ. DR. ENGİN CEMAL MENGÜÇ
CSS (Stil Şablon) (Cascading Style Sheets) YRD. DOÇ. DR. ENGİN CEMAL MENGÜÇ 2 CSS, açılımı Cascading Style Sheet olan ve dilimize Stil şablonları olarak yerleşen basit ve kullanışlı bir işaretleme dilidir.
Css Stillerinin Nesneyi Etkileme Yolları Ve Sırası, Diez, Nokta, Yıldız, Class Css De Neyi İfade Eder.
Ve Sırası, Diez, Nokta, Yıldız, Class Css Css stillerinin nesneyi etkileme yolları ve sıraları: (#), (.), (*), (class) CSS de nasıl kullanılır bu başlık altında bulabilirsiniz. Css Nedir? HTML bize metin
4. Bağlantı (Köprü) Oluşturma
4. Bağlantı (Köprü) Oluşturma Bu bölümü bitirdiğinizde, HTML dosyalarında nasıl bağlantı oluşturulduğunu, Bağ etiketinin ne olduğunu, Yerel dosyalara nasıl bağlantı kurulduğunu, İnternet üzerindeki dosyalara
JavaScript Örnekleri PDF
5 JavaScript örneği ve bu örneklerin çalışan uygulamaları JavaScript Örnekleri PDF www.yazilimbilisim.net.. İçindekiler Tablosu Javascript Text Kutusuna Sadece Sayı Girdirme... 2 PROGRAM KODU... 3 Javascript
Temel Bilgisayar Terimleri Yrd. Doç. Dr. Devkan Kaleci
1 2 HTML, Hyper Text Markup Language kelimelerinin kısaltılmışıdır. HTML (Hareketli-Metin İşaretleme Dili) basitçe, browserlarla görebilen, internet dokümanları oluşturmaya yarayan bir çeşit dildir. HTML
HTML - 8 Hypertext takıları iki ana değişik şekilde karşımıza çıkar: Anchors ve Images. Anchors, resim veya yazıya bir olay eklemek için kullanılır.
HTML Ders 5 HTML - 8 Hypertext takıları iki ana değişik şekilde karşımıza çıkar: Anchors ve Images. Anchors, resim veya yazıya bir olay eklemek için kullanılır. Kullanıcı ilgili resim veya yazı üzerine
WEB TASARIM. CSS, IFRAME, TEMPLATE, SLICE, INCLUDE(php komutu) Tarık ÖZEL
WEB TASARIM CSS, IFRAME, TEMPLATE, SLICE, INCLUDE(php komutu) Tarık ÖZEL İçindekiler Konular Sayfa Slice 2 Iframe 12 CSS 16 Include (php komutu) 20 1 Slice Fireworks te yapacağımız sitenin boyutuna göre
Internet Programming II. Elbistan Meslek Yüksek Okulu 2014 2015 Bahar Yarıyılı
Internet Programming II Elbistan Meslek Yüksek Okulu 2014 2015 Bahar Yarıyılı Öğr. Gör. Murat KEÇECĠOĞLU 11-14 May. 2014 Form Form İşlemleri Tarayıcıdan bilgi alarak işlem gerçekleştirme FORM elemanları
2. HTML Temel Etiketleri
2. HTML Temel Etiketleri Bu bölümü bitirdiğinizde, HTML ve etiket kavramlarının ne olduğunu, HTML komut yapısını, Örnek bir HTML dosyasının nasıl oluşturulduğunu, Temel HTML etiketlerinin neler olduğunu,
Basamaklı Stil Şablonları (CSS) BIM206 Web Programlama
Basamaklı Stil Şablonları (CSS) BIM206 Web Programlama Basamaklı Stil Şablonları (CSS) CSS, bir HTML elemanının nasıl görüneceğini belirleyen kurallar tanımlamamızı sağlayar. Örneğin: Sayfanın arka planının
ÖĞRENME FAALİYETİ 1 ÖĞRENME FAALİYETİ 1 1. FORMLAR
ÖĞRENME FAALİYETİ 1 AMAÇ ÖĞRENME FAALİYETİ 1 Uygun ortam sağlandığında web sayfaları için formlar oluşturabileceksiniz. ARAŞTIRMA Web sayfalarında formların kullanım amaçlarını ve nasıl kullanıldığını
2-Hafta Temel İşlemler
2-Hafta Temel İşlemler * Html Komutlarının Yapısı * Açıklamalar * Htm Sayfasının Oluşturulması * Temel Html Komutları * Html Sayfalarının Düzenlenmesi * Html Sayfalarının İncelenmesi Html Komutlarının
MIS213T İNTERNET VE WEB PROGRAMLAMA GÜZ 2016 LAB DOKÜMANI #2. 1. Bölüm: Temel HTML Etiketleri - Resimler
MIS213T İNTERNET VE WEB PROGRAMLAMA GÜZ 2016 LAB DOKÜMANI #2 Konular - Temel HTML etiketleri kullanma, - Resim, arkaplan rengi, arkaplan resmi ekleme, - Link oluşturma ve ekleme, - Maddeleme, numaralandırma,
BTP 207 İNTERNET PROGRAMCILIĞI I. Ders 5
BTP 207 İNTERNET PROGRAMCILIĞI I Ders 5 Stil Oluşturmak/CSS 2 CSS, Cascading Style Sheets = Katmanlı Biçim Sayfaları HTML nesnelerini biçimlendirmek için kullanılır. CSS Bileşenleri CSS yapısı 3 ana bileşenden
Karabük Üniversitesi, Mühendislik Fakültesi...www.ibrahimcayiroglu.com
HTML-2 Tablolar Tablolar sayfaları satırlara ve sütunlara bölmek yada metin veya grafiklerin sayfada istediğimiz yerde durmasını sağlamak için kullanabileceğimiz en önemli elemanlardır. Tablolar satır
HTML & CSS. Öğr.Gör. M.Ersin AKAY
HTML & CSS Öğr.Gör. M.Ersin AKAY Neler Öğreneceğiz? HTML işaretleme dili CSS stil şablonları HTML Hyper Text Markup Language HTML de Neler Öğreneceğiz? Html işaretleme dili temel yapısı ve kavramları Html
İNTERNET PROGRAMLAMA 2 A S P. N E T. Marmara Teknik Bilimler MYO / Hafta 4 MasterPage
İNTERNET PROGRAMLAMA 2 A S P. N E T Marmara Teknik Bilimler MYO / Hafta 4 MasterPage Bir web sitesi birden fazla sayfadan oluşur. Bu sayfalarda içerik değişirken her sayfada tekrarlanan ögeler ve özellikler
HTML 5 ve CSS 3. Yrd. Doç. Dr. Murat Olcay ÖZCAN
HTML 5 ve CSS 3 Yrd. Doç. Dr. Murat Olcay ÖZCAN HTML HTML web sayfalarını tanımlayan bir işaretleme dilidir. HTML (Hyper Text Markup Language) açılımı Hiper Metin İşaretleme Dili HTML dosyaları HTML etiketleri
Web Tasarımının Bugünü ve Geleceği
Efe ÇİFTCİ Çankaya Üniversitesi Bilgisayar Mühendisliği Bölümü Ocak 2011 www.efeciftci.com Dünya tarihinde yayınlanan ilk web sayfaları, olabildiğince basit tasarımlara sahipti ve ağırlıklı olarak metin
BTP 207 İNTERNET PROGRAMCILIĞI I. Ders 4
BTP 207 İNTERNET PROGRAMCILIĞI I Ders 4 Sayfalara Resim Eklemek 2 Etiketi Sayfaya resim eklemek için kullanılır. JPG, BMP, GIF, PCX, PNG, TIFF, WMF gibi resim formatlarını destekler. Sonlandırmalı
İNTERNET PROGRAMCILIĞI I
BÖLÜM 12 12- FORMLAR HTML'in bir metin şekillendirme aracı olduğunu söylemiştik. Form'lar bu tanımın istisnasıdır, HTML kullanarak sayfanızı ziyaret edenlerle temas kurmanızı sağlarlar. Formlar yoluyla
HTML (Hyper Text Markum Language)
HTML (Hyper Text Markum Language) HTML nedir? Hyper Text Markup Language'in kısaltması olan HTML; anlamı hiper metin işaretleme dilidir, bir programlama dili değildir. Metin, resim ve diğer nesnelerin
HTML Bloklar. CSS Display özelliği
HTML Bloklar Tüm HTML etiketleri için varsayılan bir görünüm değeri vardır ve blok yada satıriçi olarak belirtilir. Blok tipindeki etiketler her zaman yeni bir satırda başlar ve tüm satır boyunca mümkün
h a k a n b a b a c. n e t HTML Web Tasarımı ve Programlama
HTML Web Tasarımı ve Programlama İ Ç E R İ K // HTML Internet Ortamı ve Web Tasarımı Temel HTML Etiketleri Listeleme Etiketleri Metin Düzenleme Etiketleri Bağlantı (Köprü) Oluşturma Tablolarla Çalışma
FRONT PAGE EĞİTİM NOTLARI BAŞLANGIÇ. 1- Open araç çubuğu düğmesinin yanındaki aşağı oku tıklayarak, web seçeneğini işaretleyin
FRONT PAGE EĞİTİM NOTLARI BAŞLANGIÇ 1- Open araç çubuğu düğmesinin yanındaki aşağı oku tıklayarak, web seçeneğini işaretleyin 2- Açılan sayfadan, oluşturulmak istenen sitenin içeriğine göre hazır şablon
Internet Programming II. Elbistan Meslek Yüksek Okulu Bahar Yarıyılı
Internet Programming II Elbistan Meslek Yüksek Okulu 2015 2016 Bahar Yarıyılı Öğr. Gör. Murat KEÇECĠOĞLU 23 May. 2016 Form Form İşlemleri Tarayıcıdan bilgi alarak işlem gerçekleştirme FORM elemanları yardımıyla
İNTERNET PROGRAMCILIĞI
İNTERNET PROGRAMCILIĞI Konular Vize Hazırlık 1 İnternet Programcılığı 1. TEMEL HTML ETİKETLERİ 1.1. HTML etiketi HTML etiketi, tarayıcınıza, dosyanın HTML kodu ile yüklenmiş bilgi içerdiğini bildirir.
12. Tanımlama Listeleri <dl> </dl>, <dt> </dt>, <dd> </dd>
12. Tanımlama Listeleri , , Terimler ve açıklamalarını içeren listeler oluşturmakta kullanılırlar. Bir uygulamanın komut satırı seçeneklerini listelemek ve altlarında açıklamalarını
Doç.Dr. Yaşar SARI, Web Tasarımı Ders Notları 1
Doç.Dr. Yaşar SARI, Web Tasarımı Ders Notları 1 HTML ( Hyper Text Markup Language ) Html Nedir - Nasıl Hazırlanır? Html (Hypertext Markup Language) web sayfalarının yapımında kullanılan bir dildir. Diğer
4 Front Page Sayfası Özellikleri
4 Front Page Sayfası Özellikleri İsterseniz Frontpage penceresinin sağ tarafından, isterseniz araç çubuklarından faydalanarak yeni bir sayfa açın. Frontpage te çeşitli sayfa şablonları bulunmaktadır. Ancak
Flash ile Etkileşimli Öğretim Materyali Hazırlama Semineri
Öğretim Teknolojileri Destek Ofisi Instructional Technologies Support Office Flash ile Etkileşimli Öğretim Materyali Hazırlama Semineri Semboller, Ses Ekleme, Video Ekleme Orta Doğu Teknik Üniversitesi
HTML içerik oluşturmak için düşünülen bir işaret dilidir. Örnek
STİLLER CSS NEDİR? CSS (Cascading Style Sheet) Stiller, HTML elemanlarının nasıl gösterileceğini tanımlar. Stiller HTML de karşılaşılan bazı problemleri çözmek için HTML 4.0 a eklenmiştir. HTML, web
2. Belgeye Metin Ekleme
METİN İŞLEMLERİ Flashta 2 çeşit metin vardır:1)tlf metni 2)Klasik metin 1)TLF Metni : CS5 ile başlayan metin türü. TLF metni FLA dosyanızın yayınlama ayarlarında ActionScript 3.0 ve Flash Player 10 veya
Javascript. 1) Notepad++ aşağıdaki kodları yazıp deneme.html olarak kaydedelim. 2) Biraz önceki sayfa sadece html kodların içeriyordu.
Javascript Html sayfalarının içine yazılarak, sayfayı daha etkileşimli hale getirir. click olayları, uyarı mesajları gibi hareketlerle sayfayı daha dinamik hale getirir. Javascript olmadan yazılan html
WEB TASARIMI. c) Çeviriciler: Kullanıcının değişik biçimlerde hazırladığı belgeleri HTML biçimine dönüştürmeye sağlayan programlardır.
WEB TASARIMI 1) HTML (Hyper Text Markup Language-Hiper Metin işaretleme Dili): HTML bitr metin işaretleme dilidir. HTML kodları < ve > işaretleri arasına yazılır. Ör: : Açılış belirteci :
CSS(CASCADING STYLE SHEETS)
CSS(CASCADING STYLE SHEETS) CSS NEDİR NE İŞE YARAR? Sıralı Sitil Şablonları olarak bilinen CSS Web sayfalarının biçimsel özelliklerini düzenlediğimiz ve yönettiğimiz kodlar bütünüdür. CSS kodları ile sayfamızdaki
WEB TASARIMI. Đnternet Nedir?
ĐÇĐNDEKĐLER İÇİNDEKİLER... 1 WEB TASARIMI... 2 İnternet Nedir?... 2 HTML (Hypertext Markup Language)... 4 (Hareketli Metin İşaretleme Dili)... 4 KLASÖR VE DOSYA İSİMLERİNDE... 5 STANDART TAKILAR... 5
WEB TASARIM I. Öğr. Gör. M. Mutlu YAPICI. Ankara Üniversitesi Elmadağ Meslek Yüksekokulu
WEB TASARIM I Öğr. Gör. M. Mutlu YAPICI Ankara Üniversitesi Elmadağ Meslek Yüksekokulu Ders İzlencesi Hafta Modüller/İçerik/Konular 1. Hafta PHP Tanımı ve Sunucu Kurulumları 2. Hafta PHP Yazım Notasyonu
Atatürk Üniversitesi Mühendislik Fakültesi Bilgisayar Mühendisliği Bölümü BM 206 - Web Programlama ÖDEV 1
Atatürk Üniversitesi Mühendislik Fakültesi Bilgisayar Mühendisliği Bölümü BM 206 - Web Programlama ÖDEV 1 Son Teslim Tarihi: 5 Mayıs 2014-09:00 (ÖRGÜN) - 19:00 (İKİNCİ) Ödevi Teslim Alacak Olan Asistan:
Internet Programming II. Elbistan Meslek Yüksek Okulu Bahar Yarıyılı
Internet Programming II Elbistan Meslek Yüksek Okulu 2013 2014 Bahar Yarıyılı Öğr. Gör. Murat KEÇECĠOĞLU 26 May. 2014 Form Form İşlemleri Tarayıcıdan bilgi alarak işlem gerçekleştirme FORM elemanları yardımıyla
Öğr. Gör. Serkan AKSU http://www.serkanaksu.net. http://www.serkanaksu.net/ 1
Öğr. Gör. Serkan AKSU http://www.serkanaksu.net http://www.serkanaksu.net/ 1 JavaScript JavaScript Nedir? Nestcape firması tarafından C dilinden esinlenerek yazılmış, Netscape Navigator 2.0 ile birlikte
MUĞLA SITKI KOÇMAN ÜNİVERSİTESİ MUWİS. Web İçerik Sistemi. Bilgi İşlem Daire Başkanlığı-WEB GRUBU
MUĞLA SITKI KOÇMAN ÜNİVERSİTESİ MUWİS Web İçerik Sistemi -WEB GRUBU 2013 B i l g i İ ş l e m D a i r e B a ş k a n l ı ğ ı MUĞLA SITKI KOÇMAN ÜNİVERSİTESİ BİLGİ İŞLEM DAİRE BAŞKANLIĞI BİRİM BÖLÜM DAİRE
Web Teknolojileri ve Programla
Web Teknolojileri ve Programla Bu kurs ne değildir? Neyi amaç edinmiştir? Bilgisayar Mühendisi? Bilgisayar Programcısı? Web Tasarımcısı? Web Programcısı? Neler öğreneceğiz? Kurs sonunda neler yapılabileceğiz?
11. STIL ŞABLONU (CSS) MENÜ İŞLEMLERİ
11. STIL ŞABLONU (CSS) MENÜ İŞLEMLERİ Bu bölümü bitirdiğinizde, Sekmeli menünün nasıl yapıldığını, Dikey menünün nasıl yapıldığını, Yatay menünün nasıl yapıldığını, Dikey açılır menünün nasıl yapıldığını,
ASP.NET ile Bir Web Sitesi Oluşturma
29,30 Eylül 2011 ASP.NET ile Bir Web Sitesi Oluşturma ASP.NET sitesi oluşturmak için File menüsündeki, New açılır listesindeki, Web Site komutuna tıklıyoruz Açılan pencereden C# içindeki ASP.NET Web Site
<html> <head> <title>sayfa Başlığı</title> </head> <body> Bu benim ilk sayfam <b>bu metin koyu</b> </body> </html>
HTML'e Giriş 1. HTML dosyası nedir? HTML'in açılımı Hyper Text Markup Language (Bunun tam Türkçe'si bulunmamakla beraber "çok yere açılan metin" denebilir. Bir HTML dosyası bir text dosyası olmakla beraber
Temel HTML Eğitimi. Erman Yükseltürk
Temel HTML Eğitimi Erman Yükseltürk HTML Nedir? 1980 yılında CERN'de görevli olan Tim Berners-Lee, CERN araştırmacılarının bilgilerini ve dökümanlarını birbirleriyle paylaşabilmeleri için bir sistem olması
Web Tasarımı - Yrd. Doç. Devkan Kaleci 1
. onclick 2. onmouseover ve OnMouseOut 3. onload ve onunload 4. onsubmit 5. onreset 6. onfocus ve onblur 7. onchange 8. onabort, onerror 2 Bir olayın oluşması, mevcut durumda bir değişiklik olması anlamına
İnternet Programcılığı Form İşlemleri ve Oturum Yönetimi Örnekleri
1 İnternet Programcılığı Form İşlemleri ve Oturum Yönetimi Örnekleri Örnek 1 : Aşağıda ekran görüntüleri verilen HTML formunu ve oluşturduğunuz bu formdaki bilgileri elde edecek PHP sayfasını hazırlayınız.(formdan
BİLİŞİM TEKNOLOJİLERİ
T.C. MİLLÎ EĞİTİM BAKANLIĞI BİLİŞİM TEKNOLOJİLERİ HTML İLE GELİŞMİŞ WEB İŞLEMLERİ 482BK0153 Ankara, 2012 Bu modül, mesleki ve teknik eğitim okul/kurumlarında uygulanan Çerçeve Öğretim Programlarında yer
Web Tasarımının Temelleri
1. Hafta Web Tasarımının Temelleri Öğr. Gör. Murat YAZICI www.muratyazici.com Artvin Çoruh Üniversitesi, Artvin Meslek Yüksekokulu www.artvin.edu.tr Listeleme Etiketleri Sıralı liste oluşturmak için
Doç. Dr. İsmail Rakıp Karaş www.ismailkaras.com irkaras@gmail.com. Hazırlayan: İdris Kahraman
7. Doç. Dr. İsmail Rakıp Karaş www.ismailkaras.com irkaras@gmail.com Hazırlayan: İdris Kahraman Dreamweaver Dreamweaver en iyi web editör yazılımlarından biridir. Biz tasarım modunda çalışırken,dreamweaver
WEB TASARIMININ TEMELLERİ
WEB TASARIMININ TEMELLERİ Ankara Üniversitesi Elmadağ Meslek Yüksekokulu Ders İzlencesi Hafta Modüller/İçerik/Konular 1. Hafta İnternet ve WEB Tanımları Html Temel Etiketleri 2. Hafta Html Temel Etiketleri
Sevdiğiniz editörü açın, Notepad, vi, pico vb. Daha sonra da aşağıdaki kodu yazın:
HTML nedir? HTML e GİRİŞ E. Fatih Yetkin HTML Hyper Text Markup Language kısaltmasıdır. Bir HTML dosyası, çeşitli işaretleme etiketleri içeren bir metin dosyasıdır. Bu işaretleme etiketleri (markup tags)
www.elektrikogretmenleri.com
DREAMWEAVERDA NESNELERE DAVRANIŞ EKLEME Dreamweaver da fare hareket olaylı, animasyonlu görüntüler oluşturmak istenildiğinde hazır scriptler anlamına gelen Davranışlar(behaviors) kullanılmaktadır. Yukarıdaki
JAVASCRIPT JAVASCRIPT DİLİ
JAVASCRIPT JAVASCRIPT DİLİ Netscape Navigator 2.0 ile birlikte geliştirilen JavaScript dili istemci taraflı (client-side) script dilidir. Web sayfalarında dinamik içerik sağlamak ya da kullanıcıyla iletişim
Javascript Ders Örnekleri -2. Tarayıcı Görüntüsü
Javascript Ders Örnekleri -2 Örnek 1 : Aşağıdaki Javascript kodları çalıştığında tarayıcı görüntüsü nasıl olur? JS Kodu var puan=85; if(puan>70) document.write( Notunuz iyi ); else document.write( Notunuz
5. Tablo İşlemleri. Bu bölümü bitirdiğinizde,
5. Tablo İşlemleri Bu bölümü bitirdiğinizde, Tablonun nasıl oluşturulduğunu, Satır ve hücrelerin ne olduğunu ve nasıl oluşturulduğunu, Tablonun ve hücrelerin nasıl hizalandığını, Satır veya sütunların
Site Temizlik Projesi Kodları. Site Tasarım Çalışması -3
Site Temizlik Projesi Kodları Site Temizlik Projesi -2 nin kodları aşağıdadır. (İlgili site sayfasını önceki yazılarda bulabilirsiniz.) [crayon-5cacfb4a355c5785238607/] İndir (DOCX, 15KB) Site Tasarım
Okul Web Sitesi Yönetim Paneli Kullanımı
Millî Eğitim Bakanlığı Bilgi İşlem Grup Başkanlığı tarafından ortak web sitesi tasarım çalışması yapılmıştır. Çalışmanın amacı tüm kurumlarımızın standart bir web sayfasına sahip olmalarını sağlamaktır.
WEB KULLANICI KONTROLLERİ ve ANASAYFA KULLANMA(Master Page)
WEB KULLANICI KONTROLLERİ ve ANASAYFA KULLANMA(Master Page) WEB KULLANICI KONTROLLERİ Kullanıcı kontrolleri bir içeriğin birden fazla sayfada kullanılmasına olanak sağlar. Bir web sayfasına eklenerek içerik
İNTERNET PROGRAMCILIĞI - II
0 İÇİNDEKİLER Bölüm 1 PHP İle Web Programlamaya Giriş 1 Bölüm 2 PHP Kodlama Standartları 5 Bölüm 3 PHP Değişken Kullanımı 17 Bölüm 4 IF Yapısı 32 Bölüm 5 Döngüler ve Diziler 64 1 BÖLÜM 1 PHP İLE WEB PROGRAMLAMAYA
Elbistan MYO Güz Dönemi Öğr.Gör. Murat KEÇECİOĞLU
Elbistan MYO 2016-2017 Güz Dönemi Öğr.Gör. Murat KEÇECİOĞLU HTML Nedir? HTML, Hyper Text Markup Language sözcüklerinin baş harflerinden oluşan bir kısaltmadır ve Web in temel dilidir. Html dökümanları
Flash ile Etkileşimli Öğretim Materyali Hazırlama Semineri
Öğretim Teknolojileri Destek Ofisi Instructional Technologies Support Office Flash ile Etkileşimli Öğretim Materyali Hazırlama Semineri III. Oturum Orta Doğu Teknik Üniversitesi Middle East Technical University
PHP ile İnternet Programlama
PHP ile İnternet Programlama Doç.Dr. Gazi Üniversitesi Gazi Eğitim Fakültesi Bilgisayar ve Öğretim Teknolojileri Eğitimi Bölümü 5. BÖLÜM: Oturum Yönetimi ve Güvenlik Sayfaya Yönlendirme PHP sayfamızdan
Kullanım Kılavuzu Milli Eğitim Bakanlığı 2010
Kullanım Kılavuzu Milli Eğitim Bakanlığı 2010 Bu belge BT Sınıfı Etkinliklerinde Kullanılmak Üzere Hazırlanmıştır İÇİNDEKİLER GİRİŞ... 3 ÜYE (KAYIT) OLMA... 3 YÖNETİM PANELİ İŞLEMLERİ... 5 ŞABLON AYARLARI...
WEB TASARIMIN TEMELLERİ
WEB TASARIMIN TEMELLERİ ~ Sunu 2 ~ Öğr. Gör. Mehmet Fatih TAN http://blog.kmu.edu.tr/mftan mftan@kmu.edu.tr Bilgi paylaşıldıkça kıymetlenir.. Kaynak göstermek şartıyla sunu içeriğini çalışmalarınızda kullanabilirsiniz.
WEB TASARIMININ TEMELLERİ
WEB TASARIMININ TEMELLERİ Öğr. Gör. M. Mutlu YAPICI Ankara Üniversitesi Elmadağ Meslek Yüksekokulu Ders İzlencesi Hafta Modüller/İçerik/Konular 1. Hafta İnternet ve WEB Tanımları Html Temel Etiketleri
İNTERNET PROGRAMCILIĞI 2 14. HAFTA. PHP ile FORM İŞLEMLERİ. Hazırlayan Fatih BALAMAN. İçindekiler. Hedefler. Form Elemanları Kullanımı
İNTERNET PROGRAMCILIĞI 2 14. HAFTA İçindekiler PHP ile FORM İŞLEMLERİ Form Elemanları Kullanımı GET ve POST Metodu Hedefler Php komutları kullanarak form elemanlarını etkileşimli hale getirebilir Hazırlayan
8. HAFTA KBT204 İNTERNET PROGRAMCILIĞI II. Öğr.Gör. Hakan YILMAZ. hakanyilmaz@karabuk.edu.tr
8. HAFTA KBT204 İNTERNET PROGRAMCILIĞI II Öğr.Gör. Hakan YILMAZ hakanyilmaz@karabuk.edu.tr Karabük Üniversitesi Uzaktan Eğitim Uygulama ve Araştırma Merkezi 2 İçindekiler QUERYSTRING KOLEKSIYONU... 3 FORM
Note: If you want to validate a page containing frames, be sure the DTD is set to "Frameset DTD". Read more about XHTML Validation.
FRAME Tagı Aynı pencere içinde birden fazla sayfa görünmesini istediğimiz zaman çerçeve (frame) kullanırız. Çerçeve tekniği, bir web sayfasını istenilen miktarda parçaya bölüp, bu sayfa üzerinde birkaç
Örnek Ölçülü Site Kodları. Site Temizlik Projesi Kodları. İlk Hafta Sunumu ve Ön Test
Örnek Ölçülü Site Kodları [crayon-5c079862dff41089602577/] Site Temizlik Projesi Kodları Site Temizlik Projesi -2 nin kodları aşağıdadır. [crayon-5c079862e05c5626962251/] İndir (DOCX, 12KB) İlk Hafta Sunumu
Dinamik Kodlama. [X] Fusion@6. [X] Yeni Fonksiyon
![Dinamik Kodlama. [X] Fusion@6. [X] Yeni Fonksiyon](/thumbs/24/3157023.jpg "Dinamik Kodlama. [X] Fusion@6. [X] Yeni Fonksiyon")
Dinamik Kodlama Ürün Grubu Kategori Versiyon Önkoşulu [X] Fusion@6 [X] Yeni Fonksiyon @6 Uygulama @6 Serisi ürünlerde, kullanıcı arabirimlerinin her yerine eklenen dinamik kodlama özelliği ile, programın
MODÜL 3 HTML İLE STİL ŞABLONLARI
MODÜL 3 HTML İLE STİL ŞABLONLARI Bu modülü bitirdiğinizde; CSS kodlama standartlarına uyarak işlevselliği ve verimliliği artırmak için HTML kodları ile Stil şablonu (CSS) yapılandırmasını gerçekleştireceksiniz.
HTTP & HTML BİRİNCİ BÖLÜM. HTTP Nedir? HTTP Safhaları Nelerdir? Protokol ve Eklentiler. HTTP Servisleri. HTTP Nedir? HTML Nedir?
HTTP & HTML Seval ÖZBALCI Bilgisayar Programcılığı Bölümü Ders 3 HTTP ve HTML Kullanarak İlk Web Sayfasının Oluşturulması BİRİNCİ BÖLÜM HTTP Nedir? HTML Nedir? Temel Unsurlar Editör Türleri İlk Sayfanın
www.wikispaces.com Kullanım Kılavuzu
www.wikispaces.com Kullanım Kılavuzu İnternet tarayıcınıza(internet Explorer vb.) www.wikispaces.com adresini yazıp enter tuşuna bastığınızda yukarıdaki ekranla karşılaşacaksınız. Önceden oluşturmuş olduğunuz