INTERNET & INTRANETS DERSİ BAHAR YILI - 3. HAFTA HTML KOMUTLARI. KONU 12 Sıralı Liste

Ebat: px
Şu sayfadan göstermeyi başlat:

Download "INTERNET & INTRANETS DERSİ 2004-2005 BAHAR YILI - 3. HAFTA HTML KOMUTLARI. KONU 12 Sıralı Liste"

Transkript

1 INTERNET & INTRANETS DERSİ BAHAR YILI - 3. HAFTA HTML KOMUTLARI KONU 12 Sıralı Liste Sıralı Liste nasıl yapılır? Bazen sayfamız da listeler kullanmak zorunda kalırız. Mesela sevdiğimiz müzik türlerini düzene sokmamız gerekebilir. Şimdi sıralı listelere birkaç örnek verelim: Numaralı (ya da) başka tür listeler yapalım: Bilgilerimizi düzene sokmamıza yarayan sıralı listeler <OL> </OL> etiketlerinin arasına < LI> ekleyerek yapılır. En sevdiğim hayvanlar: <ol> <li>kediler <li>köpekler <li>balıklar <li>kuşlar </ol> Bu kodların oluşturduğu sıralı liste aşağıdaki gibidir: En sevdiğim Hayvanlar: 1. Kediler 2. Köpekler 3. Balıklar 4. Kuşlar Sıralı listemizin sıra numarasını Roma Rakamları ile göstermek istersek <OL> etiketimizin yanına "type" değerinin yanına Roma Rakamlarından birini yazarız. (Mesela I ): En sevdiğim hayvanlar: <ol type="i"> <li>kediler <li>köpekler <li>balıklar <li>kuşlar </ol> 1

2 Bu kodların oluşturduğu sıralı liste aşağıdaki gibidir: En sevdiğim Hayvanlar: I. Kediler II. Köpekler III. Balıklar IV. Kuşlar Listemizin Sıralamasında Harfler kullanalım (type) Listelerimizin sıralanmasında rakam değil de harf kullanmak istiyorsak <OL> etiketinin yanındaki "type" değerinin karşısına "a" yazmamız yeterli.. Belli bir harften başlamanız gerekiyorsa start etiketini kullanmanız gerekiyor... Hangi harften başlamasını istiyorsanız onun sıra numarasını yazmalısınız... En sevdiğim hayvanlar: <ol type="a"> <li>kediler <li>köpekler <li>balıklar <li>kuşlar </ol> En sevdiğim Hayvanlar: <ol type="a" start="3"> <li>kediler <li>köpekler <li>balıklar <li>kuşlar </ol> Bu kodların oluşturduğu sıralı liste aşağıdaki gibidir: En sevdiğim Hayvanlar: a. Kediler b. Köpekler c. Balıklar d. Kuşlar En sevdiğim Hayvanlar: c. Kediler d. Köpekler e. Balıklar f. Kuşlar Bugün sayılı listeleri öğrendik. Bir de sayısız listeler ve Tanımlama Listeleri var... Bunları da bir sonraki dersimizde öğreneceğiz. Ne kadar çok deneme yaparsak o kadar çok şey öğreniriz. Bunu unutmuyoruz değil mi? Denemekten bıkmayın.. Bir de gezdiğiniz web sitelerinin kaynak kodlarını incelerseniz nasıl yapıldığını anlayabilirsiniz. 2

3 KONU 13 Sırasız Liste Sırasız Liste nasıl yapılır? Şimdi de sırasız listeleri öğrenelim. Yani bir sıraya dizilmemiş, numaralandırılmamış listeler böyledir. Listemizin başında minicik noktalar olur:) Sırasız liste yapıyoruz: Sırasız liste <UL> etiketi ile başlar </UL> etiketi ile biter. Aynı sıralı listelerdeki gibi <li> etiketleri arasına yazılır: En sevdiğim müzik türleri: <ul> <li>pop <li>jazz <li>modern </ul> Bu kodların oluşturduğu sıralı liste aşağıdaki gibidir: En sevdiğim Müzik türleri: POP Jazz Modern İçi dolu, İçi Boş ve Kare noktacıklar: <UL> etiketin yandaki "type" değerinin karşısına "DISC" yazarsak içi dolu dairemiz, "CIRCLE" yazarsak, içi boş dairemiz ve "SQUARE" yazarsak köşeli bir noktamız olur. Şimdi bir örnek verelim: En sevdiğim müzik türleri: <ol type="disc"> <li>pop </ol> <ol type="circle"> <li>jazz </ol> <ol type="square"> <li>modern </ol> Bu kodların oluşturduğu sıralı liste aşağıdaki gibidir: En sevdiğim Müzik türleri: POP o Jazz Modern 3

4 Hem sayılı hem de sıralı listeler: Bazen de listemizin hem sayı ile listelemesini aynı zamanda da normal bir şekilde listelenmesini isteriz.. Bunun için: <ol> <li>en sevdiğim yaz meyveleri: <u> <li>kayısı <li>şeftali <li>erik <li>üzüm </ul> <br> <li>en sevdiğim kış meyveleri: <ul> <li>portakal <li>mandalina <li>nar <li>ayva </ul> </ol> Bu kodların oluşturduğu liste aşağıdaki gibidir: 1. En sevdiğim yaz meyveleri o Kayısı o Şeftali o Erik o Üzüm 2. En sevdiğim Kış meyveleri o Portakal o Mandalina o Nar o Ayva Tanımlama Listeleri nasıl yapılır? Tanımlama listeleri <dl> etikeli ile başlar </dl> etiketi ile biter. Listenin maddeleri <dd>, <dt> etiketleri arasına yazılır. <dl> <dt><font size="3" color="red"> En sevdiğim hayvanlar</font> <dd>kediler ve kaplumbağalardır. 2 kedim var. Biri beyaz biri sarman. İsimleri ipekpisi ve sütlü... Kaplumbağalarım suda yaşıyan cinsten ve onlar da iki tane... <dt>en Sevdiğim çiçekler <dd>papatyalara bayılırım. Her türlü kır çiçeğini severim. Tabii beyaz gülleri de... <dt>en sevdiğim yemekler <dd>köfte ve pilav başta gelir. Kurufasulye, karnıyarık ve biber dolmasını çok severek yerim </dl> 4

5 Bu kodların oluşturduğu liste aşağıdaki gibidir: En sevdiğim hayvanlar Kediler ve kaplumbağalardır. 2 kedim var. Biri beyaz biri sarman. İsimleri ipekpisi ve sütlü... Kaplumbağalarım suda yaşıyan cinsten ve onlar da iki tane... En Sevdiğim çiçekler Papatyalara bayılırım. Her türlü kır çiçeğini severim. Tabii beyaz gülleri de... En sevdiğim yemekler Köfte ve pilav başta gelir. Kurufasulye, karnıyarık ve biber dolmasını çok severek yerim 5

6 KONU 14 Çerçeveler (Frame) Çerçeve (frame) Bazı sayfalarda görmüş olmalısınız. Yanda yeni bir pencere içinde linkler diğer yanda ise yazılar.. Yani sayfa sanki 2 tane pencereden oluşuyor ama tek pencere içerisinde görüntüleniyor... Web tasarımcıları çerçeveyi pek sevmez. Yani hoş bir görüntü kazandırmaz sayfaya. Web tasarımcısı kadar ziyaretçi de bundan pek hoşlanmaz.. Ama bazı zamanlar da bir kolaylıktır Çerçeveler.. Ve ayrıca Çerçeve teknolojisi HTML' e sonradan dahil edilmiş.. Buna göre eski browserlar bunu anlamayacak! Bir kuralı daha hatırlayalım: Yaptığımız sayfalar bizim bilgisayarımızdaki gibi görünmez ziyaretçimize hiçbir zaman! Bu derste Çerçeve yani Frame etiketini göreceğiz.. Çerçeve içinde Çerçeve.. Her yer çerçeve.. Çerçeveleri oluşturan etiket <frameset> etiketidir. <frame> etiketi ile de her bir frame'in (çerçevenin) özelliklerini ve frame'de gösterilecek sayfayı belirtiyoruz... Şimdi örneklerimizi yapalım ve inceleyelim: Örnekler: cerceve1.htm dosyası: <html> <head> <title>sol çerçeve</title> </head> <body bgcolor="#ff0000"> <font size=7>sol Çerçeve</font> </body> </html> cerceve2.htm dosyası: <html> <head> <title>sağ Çerçeve</title> </head> <body bgcolor="#000099"> <font size=7>sağ Çerçeve</font> </body> </html> Şimdi de bu iki çerçeveyi içine koyacağımız Ana Çerçeveyi yapalım ve frame.htm adı ile kaydedelim: <html> <head> <title>çerçeveli bir sayfa</title> </head> <frameset cols="30%, 70%"> 6

7 <frame name="solcerceve" src="cerceve1.htm"> <frame name="sagcerceve" src="cerceve2.htm"> <noframes>browser'ınız çerçeve teknolojisini desteklemiyor. Üzgünüm. Lütfen yenileyin!</noframes> </frameset> </html> Şimdi de yazdığımız kodlamayı inceleyelim: Yukarıdaki butona basarak örneği inceleyebilirsiniz. Örneği incelediyseniz şimdi de yapımında kullandığımız kodlamayı bir inceleyelim: Öncelikle normal olarak 2 tane HTML sayfası yazdık. Ve bunları cerceve1.htm ve cerceve2.htm adı ile kaydettik. Daha sonra bu yaptığımız sayfaları içine alacak olan frame.htm ' yi yazdık.. Burada diğer sayfalardan farklı olarak <frameset> etiketini kullandık.. <frameset cols="30%, 70%"> bu etiket ile sayfaların bir tanesini sayfanın yüzde 30'unu kaplayacak şekilde diğerini ise sayfanın yüzde 70'ini kaplayacak şekilde ayarladık.. Daha sonra da sayfamızın içine çerçeveleri yerleştirdik <frame name="solcerceve" src="cerceve1.htm"> ile sol çerçeveyi, <frame name="sagcerceve" src="cerceve2.htm"> ile de sağ çerçeveyi sayfamıza yerleştirdik. Burada dikkatinizi çekti mi bilmem? <noframes> etiketi ile tarayısıcı eski olan ziyaretçimizi uyarıyoruz ve çerçeve teknolojisini destekleyen bir browser yüklemesini söylüyoruz. (biz de çok oluyoruz:) ) Bir sayfaya 4 tane çerçeve sığar mı? Bu bir arabaya 4 filin sığması kadar olağan bir durum! :) Şimdi biraz önce yazdığımız çerçevelere 2 çerçeve daha ilave edelim. Ve cerceve3.htm ile cerceve4.htm isimleri ile kaydedelim. Oldu mu? O zaman bunları bir sayfada birleştirelim: <html> <head> <title>çerçeveli Sayfa</title> </head> <frameset cols="50%, 50%" rows="50%, 50%"> <frame name="bir" src="cerceve1.htm"> <frame name="iki" src="cerceve2.htm"> <frame name="uc" src="cerceve3.htm"> <frame name="dort" src="cerceve4.htm"> <noframes>browser'ınız çerçeve teknolojisini desteklemiyor. Üzgünüm. Lütfen yenileyin!</noframes> </frameset> </html> Bu sayfayı frame2.htm adı ile kaydedin.. Şimdii, bu sayfanın diğer sayfadan bir farkı var. Haydi şimdi bunu bulun. Demiyeceğim.. Bu sayfadaki fark <frameset rows=""> etiketidir. Bu etiket çerçevelerimizi yatay bir şekilde sayfaya yerleştirir.. (cols' da dikey öyle değil mi?) 7

8 Şimdi de bir başka örnek: <html> <head> <title>çerçeveli Sayfa</title> </head> <frameset rows="50%, 50%" frame border="yes" border="5" bordercolor="#000000"> <frame name="bir" src="cerceve1.htm" noresize > <frameset cols="*,*"> <frame name="iki" src="cerceve2.htm" scrolling="yes"> <frame name="uc" src="cerceve3.htm"> <noframes>browser'ınız çerçeve teknolojisini desteklemiyor. Üzgünüm. Lütfen yenileyin!</noframes> </frameset> </html> Şimdi de inceleyelim: Örneğimizi incelediyseniz eğer bu sayfanın diğer yaptığımız çerçeveli sayfalardan farklı var değil mi? Eveet, bayağı bir farklı :) Sayfamızın kodlamasına baktığımızda: frameborder="yes" border="5" bordercolor="#000000"> ilk dikkatimizi çeken etiket frameset etiketimize ekledğimiz bu etiket çerçevelerimizin kenarlarının ölçülerini belirlemeye yarar. "frameborder" etikenin iki şekli vardır. "Yes" çerçevenin kenarlıklı olmasını, "no" ise kenarlıksız olmasını sağlar. <frame name="bir" src="cerceve1.htm" noresize > etiketinin sonunda bulunan "noresize" etiketi çerçevelerin ölçülerinin değişmesini önlüyor. Yani alttaki çerçeve bakarsanız bunun ölçülerini mouse işaretçiniz ile değiştirebileceğinizi görüyorsunuz. Son olarak Çerçeve 2 de uyguladığım bir yöntem olan; scrolling="yes"> etiketi ile kaydırma çubuklarının olmasını istiyorum. Bunu 3 şekilde ayarlayabiliyoruz: "yes" kaydırma çubuğu olsun, "no" kayfırma çubuğu olmasın ve "auto" gerektiği zaman kaydırma çubuğu aktif olsun. Ayrıca; <frame name="uc" src="cerceve3.htm" marginwidth="0" marginheight="0"> marginwidth ve marginheight etiketleri ile çerçevenin içini de kontrol edebiliyoruz. marginwidth="50" yaparsak çerçevenin içine yazdığımız yazı kenarlardan bir hayli uzaklaşacaktır. Bu derste de çerçeveleri inceledik. Bir sonraki ders de çerçevelerin inceliklerini öğreneceğiz.. Çerçevelerde yapılan en sık hatalardan söz edeceğiz. Anlayamadığınız ya da öğrenmek istediğiniz konuları bana sorabilirsiniz.. Her zaman cevap alacağınızdan emin olun.. 8

9 KONU 15 Form 1 Form Yapalım 1 Sitemiz de ziyaretçi defteri olsun istiyoruz.. Ya da ziyaretçimizin doldurması için form alanı oluşturmamız lazım.. Şimdi de Form alanı oluşturmak için gereli araç ve gereçleri öğrenelim:) Form alanı nelerden oluşur? Okul da ya da günlük yaşantınızda eminim ki form doldurdunuz.. Hayatınıza internet geldi ve formlarla daha çok karşılaşmaya başladınız.. Gezdiğiniz sitelerde gördüğünüz ziyaretçi defterlerinin artık kendi sitenizde olmasını istiyorsunuz.. Ancakk Ziyaretçi Defterimizin sayfasını oluşturabiliriz ama Ziyaretçi Defterimizin işleyebilmesi için CGI denen programlama dilini bilmemiz gerekir.. Biz şimdilik sadece form alanı oluşturmak ile yetineceğiz.. İleri de belki Ziyaretçi Defterinin işleyişinden de söz edebiliriz :-) Bu kısa ziyaretçi defteri kursundan sonra gelelim form alanı oluşturmaya: Form'u yapı taşları Sayfamızda bulunan form, isteğe bağlı olarak değişik text alanlarından oluşabilir.. Ya da aşağı doğru açılan bir menü ile ziyaretçinin isteğini seçmesine izin verebiliriz.. Şimdi tek tek forum'u oluşturan temel yapı taşlarından söz edelim.. Bir de bunları örnekler ile gösterelim.. Sıvayın kolları Form Alanı yapıyoruz! FORM ALANI Text Area (metin alanı): Form alanının dışında da kullanılabilen text area yani metin alanı, isminden de anlaşıldığı gibi içine yazı yazabileceğimiz bir alandır.. Şimdi bir örnek: <form><textarea rows="5" cols="20">yazınızı buraya yazın!</textarea><form> Yazınızı buraya yazın! Yukarıda örneğini verdiğimiz metin alanı Form alanının bir parçasıdır.. Form alanı <form> ile başlar </form> ile biter.. Tekrar yukarıdaki örneğimize bakar isek <textarea> ile başlayan </textarea> ile biten metin alanı oluşturma etiketlerini görüyoruz.. textarea 9

10 etiketinin yanına yazdığımız "rows" alanımızın yüksekliğini, "cols" ise genişliğini belirlememize yarar.. Böylece metin alanımızın boyutlarını da ayarlıyabiliriz.. Renkli Metin alanı yapalım: <form><textarea rows="5" cols="20" style="background:#ff33ff" style="fontfamily:verdana" style="color:#ffccff" "style="border style:solid;" >Buraya yazınızı yazın!</textarea></form> Yukarıda örneğimiz ve örneğimizin altında da kaynak kodunu görüyoruz.. Bu seferki kaynak kodumuz diğerinden biraz daha uzun. Bu kodlara biraz daha yakından bakalım: Tekrar <form> etiketi ile başlayan </form> etiketi ile biten, alanımızın form' a ait olduğunu belirten kodlarımızı yazdıktan sonra, alanımızın metin alanı olduğunu belirten <textarea; etiketimizi yazdık. Yükseklik (rows) ve genişliği (cols) belirttik. Daha sonra, metin alanımızın zemin rengini belirten style="background:#ff33ff" etiketini tekrar <textarea> etiketimizin içine yazdık.. Aynı yere bu sefer yazı tipimizi ve rengini belirlemeye yarayan style="font-family:verdana" style="color:#ffccff" "style="border style:solid;" etiketimizi yazdık.. Sonuç: Şeker gibi bir metin alanımız oldu:) Dikkat! Örneklerimiz de sözünü ettiğimiz "style" etiketlerini daha sonra ayrıntılı şekilde göreceğiz.. Şimdi kafanızı karıştırmasını istemem... Bir de umarım renk kodlamalarını hatırladınız! Eğer hatırlamadı iseniz diğer derslerimize bir göz gezdirin! Bu açıklamadan sonra devam edelim:) Metin alanımıza arka plan resmi ekleyelim: 10

11 <form><textarea rows="5" cols="26" style="background-image: url('kablumbik.gif')" style="font-family:comic sans ms" style="color:#9900ff" style="border style:solid" >Yazınızı buraya yazın!</textarea></form> Bu seferki metin alanımızın zeminin de resimler var.. Bunu daha önceki derslerimizde de gördüğümüz "background" etiketi ile yaptık.. Normal "form" ve "textarea" etiketilerimizin yanına bu sefer: style="background-image: url('kablumbik.gif')" Etiketini ekledik. Böylece metin alanımızın arka planı resim ile doldu.. Ben elimde olan kaplumbikleri kullandım.. Siz de kendi zevkinize göre istediğiniz resmi kullanabilirsiniz.. Şimdilik form unsurlarından en dikkat çekeni olan Metin Alanı ' nın nasıl yapıldığını öğrendik.. Form alanımızı oluşturan bütün unsurları oluşturduktan sonra hepsini bir araya getirip bir form oluşturacağız.. Ama biraz sabredin.. Ve unutmayın hiçkimse mükemmel değildir... 11

12 KONU 15 Form 2 Form Yapalım 2 Geçen haftalarda başladığımız Form'un temel yapı taşlarını öğrenmeye bu hafta da devam ediyoruz.. INPUT = minik metin alanı :) <form><input type="text" size="10" maxlenght="21"></form> Bir önceki dersimizde gördüğümüz form oluşturmakta işimize yarayacak olan Metin Alanının küçüğünü yaptık.. Bu minik metin alanını Form' un dışında da kullanabiliriz.. Mesela ana sayfamızda.. Şimdi bu minik metin alanımızı oluşturan kodlara bir göz atalım: İlk başta alanımızın Form' a ait olduğunu belirten <form>...</form> etiketlerimizi yazıyoruz.. Daha sonra (<input ) ile metin alanımızın başladığını belirtiyor, -size="10"- ile kutumuzun genişliğini, -maxlenght="20"- ile de ziyaretçimizin yazabileceği metin uzunluğunu ayarlayabiliriz.. Eğer -maxlenght- değerini vermezsek normal karakter olarak 21 karakter belirlenir.. Eğer minik metin alanımızın içinde açıklayıcı bir yazı olmasını istiyorsak: Buraya <form><input type="text" size="20" value="buraya Adınızı yazın" maxlength="10"></form> Yukarıdaki örnek de gördüğümüz gibi, (kalın harfler ile yazdığımız yere dikkatle bakın.) normal form etiketlerini ve minik metin alanımızı oluşturan input etiketlerini yazdık.. Metin alanımızın ölçülerini belirleyen ölçüleri verdik.. Artı olarak metin alanımızın içinde açıklayıcı bir yazı olmasını sağlayan value="buraya Adınızı yazın" etiketini ekledik.. Sonuç= Metin alanımızın içinde açıklayıcı yazı oldu. :) Bir açıklama yapmam gerekiyor :) Neden bu metin alanımıza minik metin alanı dedik? Çünkü bu metin alanımızın sadece enini ayarlıyabiliyoruz... Boyunu ayarlıyabilmek için büyük metin alanımızı yapmamız lazım.. Sanırım anladık :) Bu açıklamadan sonra devam edelim:) 12

13 Parola yazmak için metin alanı.. <form> <input type="password" size="10" maxlenght="21"> </form> Yukarıdaki metin alanının içine birşeyler yazmaya çalışın bakalım:) Yazdıklarınız yıldız şeklini aldı değil mi? Bu yüzden metin alanımızın ismi "Parola yazmak için metin alanı".. Buradaki yaptığımız tek değişiklik input (yani minik metin alanımızı oluşturan etiket) etiketinin yanındaki type (tip) etiketinin değerini password yapmak.. password daha çok kullanırken lazım olur.. Ya da üye olduğumuz bir sayfaya girebilmek için.. Yavaş yavaş form alanımız oluşuyor.. Az kaldı biraz daha beklersek çok güzel bir form alanımız olacak.. Bol bol denemeler yapıyor, araştırmalar yapıyoruz değil mi? Ee ne demişler çok yaşayan değil çok gezen bilirmiş:) Biz de çok araştırma yaparak bu gezi olanağımızı kullanmış oluruz:) 13

14 KONU 16 Form 3 Form Yapalım 3 Form alanının temel yapı taşlarını oluşturan malzemeleri öğrenmeye son sürat devam ediyoruz.. Sonunda çok güzel bir form alanımız olacak.. Hadi kolları sıvayın bakalım:) İşaret koyulan kutucuklar (Checkbox) Bunu severim bunu sevmem <form><input type="checkbox" name="isaret"> </form> Yukarıdaki örneklerimize bir bakın.. Yazıların yanındaki kutucuklara işaret koyun.. Bu yaptığımız kutuların ismi işaret Kutucukları yani "Checkbox".. Bunları da diğerleri gibi Form alanında kullanırız.. Gelin bu işeret kutucuklarını yakından inceleyelim. Artık alıştığımız ve form alanı oluştururken unutmamamız gereken etiket <form> etiketini hiç unutmuyoruz değil mi? Daha sonra da (bakınız diğer 2 dersimiz:) diğer 2 dersimizde de gördüğümüz "input" etiketini görüyoruz.. Burada değiştirdiğimiz tek kısım "input" etiketinin type' ini (tipini) "checkbox" yani işaret kutucuğu diye adlandırırız.. Radyo Düğmesi Bunu severim Bunu sevmem <form><input type="radio" name="isaret"> </form> Radyo düğmesi diyince aklınıza bildiğimiz Radyolar geldi değil mi:) Haklısınız ilk başta benim de aklıma öyle gelmişti. Diğer forum öğelerinden pek bir farkı yok.. Sadece Type (tip) ' ini "Radio" Yapmamız yeterli.. Form alanına bir adım daha yaklaştık.. Biraz sabır ve çalışma ile çok güzel bir form alanımız olacak. Bir dahaki dersimizde yine form alanımıza tanımaya devam edeceğiz.. 14

15 KONU 17 Form 4 Form Yapalım 4 Form alanımız yavaş yavaş oluşmaya başladı mı? Bir form alanım olsun diye sabırsızlanıyormusunuz? O zaman siz form alanı yapmaya hazırsınız. Bizi form alanına bir adım daha yaklaştıracak olan kodları öğrenmeye devam edelim.. Aşağı Doğru Açılan Seçme Kutucuğu (Select) En Sevdiğin Mevsim <select name="mevsimler" size="1"><option selected>en Sevdiğim Mevsim <option value="sonbahar">sonbahar <option value="kış">kış <option value="ilkbahar">ilkbahar <option value="yaz">yaz</select> Şimdi de yukarıdaki kutucuktan bir seçim yapmaya çalışın. En sevdiğiniz mevsimi seçin. Örnek de gördüğümüz kutucuğun adı: Aşağı Doğru Açılan Seçme Kutucuğu. Şimdi de kodlamamızı inceliyelim: Form alanımızın içerisin de "select" yani "aşağı doğru açılan seçme kutucuğu" nun ismini belirliyoruz = "name="mevsimler". Ben mevsimler ismini verdim. siz istediğiniz ismi verebilirsiniz. Bu daha sonra formu bulmanızı kolaylaştırır ve formunuzun içeriğine uygun olsa iyi olur. Daha sonra "option selected" ile açılan kutumuzun başlık yazısını yazıyoruz.. Yani kutumuzun konusunu belirliyoruz. Daha sonra aşağı doğru açılan menümüzün seçeneklerini belirliyoruz: "option value=sonbahar". (Tekrar söylüyorum burada ben örnek menümüzün içeriğine göre seçenekler yaptım!) Son olarak </select> diyor ve menümüzü bitiriyoruz... Bu Menümüz de sadece </select> etiketini bitiririz. Diğer etiketleri bitirmeyiz. Mesela "option value="isim" etiketi bitirilmez. Bu önemli noktayı da anladık değil mi? :) Gönder ve Sil Düğmeleri Gönder sil <input type="submit" name="gonder" value="gönder"> <input type="reset" name="sil" value="sil"> Bakın ne kadar tatlı iki butonumuz oldu değil mi? Şimdi onlara tıklayın. (Biliyorum ben demesen de tıklayacaktınız:) Ama hiçbirşey olmadı değil mi? Gelin bu butonlarımıza biraz daha yakından bakalım: 15

16 <input> etiketini hatırladınız değil mi? Bu sefer <input> etiketimizin Gönder botunundaki type (yani tip)' i "submit", Sil butonundaki değeri type' i ise "reset". Form' umuzun nasıl gönderileceğini daha sonra öğreneceğiz.. Yani formun bize nasıl bilgi ulaştırdığını.. Şimdi geçelim.. Gönder ve Sil düğmelerini biz yapalım! <button type="submit" name="gönder" value="gönder"><img src="gonder.jpg"></button> <button type="reset" name="sil" value="sil"><img src="sil.jpg"></button> Düğmelerimizi biz yapalım dememin sebebi, butonlarımızı bu sefer kodlar ile değil de bir grafik programı ile yapmamızdır.. Butonumuzun kodlamasını daha yakından inceleyelim. Öncelikle butonumuzun type (tip) ' ini belirledik.. Gönder düğmesinin ki "gönder" sil düğmemizin tipi ise "sil". Butonumuzun bitirmeden önce ise grafik öğemizi belirliyoruz. Ben elimde olan gönder ve sil grafiklerini kullandım. Siz de elinizde olan ama gönder ve sil düğmesi olduğu belli olan bir düğme kullanın. Vee mutlu son :) Form alamızın inşaatın da gerekli olan bütün malzemeleri öğrendik.. Sıra geldi başlı başına bir form yapmaya.. Sonra ki dersimizde öğrendiklerimizi birleştirerek çok güzel olacağına inandığım bir form yapacağız. Bekleyin :) 16

17 KONU 18 Form 5 Form Yapalım 5 İştee beklediğimiz an geldi. Bugüne kadar öğrendiklerimiz ile bir form alanı yapacağız. Umuyorum ki çok güzel olacak. Haydi kolları sıvayalım bakalım şöyle bir. Sıra ellerimiz de. Başlıyoruz kodlamayı yapmaya.. İşte Form Örneğimiz: <html> <head> <title>bize ulaşın</title> <meta http-equiv="content-type" content="text/html; charset=windows-1254"> </head> <body bgcolor="#ffffff"> <table width="75%" border="0" cellspacing="0" cellpadding="0"> <tr> <td width="35%"><img src="img-/cicek.jpg" width="230" height="252"> <td width="65%"> <div align="center"> <h1><font face="arial, Helvetica, sans-serif">bize Ulaşın</font></h1> </div> </tr> </table> <p> </p> <table width="75%" border="0" cellspacing="0" cellpadding="0" height="391"> <tr> <td width="37%" height="42"> <div align="right"> <p><font face="verdana, Arial, Helvetica, sans-serif" size="2" color="#000000">adınız Soyadınız: <br> <br> </font> <font face="verdana, Arial, Helvetica, sans-serif" size="2" color="#000000"> </font></p> </div> <td width="63%" height="42"> <form name="form2" > <input type="text" name="textfield2"> </form> </tr> <tr> <td width="37%" height="2"> <div align="right"> <p><font color="#000000" size="2" face="verdana, Arial, Helvetica, sansserif"> adresiniz: <br> </font> <font color="#000000" size="2" face="verdana, Arial, Helvetica, sans-serif"> </font></p> </div> <td width="63%" height="2"> <form name="form1" > <input type="text" name="textfield3"> </form> </tr> <tr> <td width="37%" height="2"> <div align="right"> <p> <font color="#000000" size="2" face="verdana, Arial, Helvetica, sans-serif">web Siteniz: <br> </font> <font color="#000000" size="2" face="verdana, Arial, Helvetica, sans-serif"><br> </font></p> </div> <td width="63%" height="2"> <form name="form1" > <input type="text" name="textfield32" value="http://"> </form> 17

18 </tr> <tr> <td width="37%" height="2"> <div align="right"> <font color="#000000" size="2" face="verdana, Arial, Helvetica, sansserif">eğitim Durumunuz: <br> </font></div> <td width="63%" height="2"> <form name="form3" > İlk <input type="radio" name="radiobutton" value="radiobutton"> Orta <input type="radio" name="radiobutton" value="radiobutton"> Lise <input type="radio" name="radiobutton" value="radiobutton"> </form> </tr> <tr> <td width="37%" height="2"> <div align="right"> <font size="2" face="verdana, Arial, Helvetica, sans-serif" color="#000000">sitemizi Nasıl Buldunuz? <br> </font></div> <td width="63%" height="2"> <form name="form4"> <select name="temas" size="1"> <option selected>bir Seçim Yapın</option> <option>iyi</option> <option>kötü</option> <option>fena değil</option> </select> </form> </tr> <tr> <td width="37%" height="80"> <div align="right"> <font face="verdana, Arial, Helvetica, sans-serif" size="2" color="#000000">bize Söylemek İstedikleriniz <br> </font></div> <td width="63%" height="80"> <textarea name="textfield" cols="35" rows="5">buraya mesajınızı yazınız.</textarea> </tr> <tr> <td width="37%" height="32"> <td width="63%" height="32"> <form name="form5" > <input type="submit" name="gonder" value="gönder"> <input type="reset" name="sil" value="sil"> </form> </tr> <tr> <td width="37%"> <td width="63%"> </tr> </table> </body> </html> Yukarıdaki HTML kod kümesi size çok uzun geldi değil mi? Aslında hiç de korkulacak birşey değil.. Birazcık sabır bize yeterli olacaktır:) Bu form' a bakarak siz de kendi web siteniz için formlar yapabilirsiniz.. 18

19 KONU 19 Form 6 Form Yapalım 6 Form alanı yapmayı öğrendik. Peki şimdi ne eksik? Aklımıza geliyor değil mi? Eksik olan Formumuzu gönderme işlemidir. Form yaptık ama bu gönder butonuna bastığımız zaman bu form nereye gidecek? İşte bugün de bu sorulara cevap bulacağız.. Form nasıl gönderilir? Nereye gider? Form gönderme işlemi HTML gibi diller ile yazılan programlar vasıtası ile yapılır. Bu programlar CGI ve ASP ' dir. Biz burada o programları öğrenmeyeceğiz. Ama formumuz yolda mı kaldı? Hayır.. Bu formu göndermenin ikinci bir yolu daha var. "mailto:" mailto: ile form gönderme İsminden de anlaşılacağı gibi mail ile gönderme işlemi. Ama nasıl? Bir Form alanı oluşturduğumuz zaman bu alanı <form>..</form> etiketleri içinde yaparız. Buraya kadar doğru. Formu göndermek içi ise, <form> etiketinin içinde Action yüklemi ile formumuzun doldurulup gönderilemsi ile içindeki bilgilerin nereye, hangi adrese gideceğini belirleriz. Yine form etiketinin içirisin de olan Method yüklemine ise hangi yöntem ile göndereceğimizi bildiririz. Biraz karışık geldi değil mi? Korkmayın.. Şimdi daha derine inelim.. Şöyle bir Form etiketi düşünelim: <FORM METHOD=GET> Bu "mailto:" ile form gönderme işlemidir. Dikkat etmemiz gereken birşey var ki, bu yöntem ziyaretçinin bilgisayarın da bir uyarı mesajı çıkmasını sağlar. Bu yüzden çok tercih edilmez. Diğer Form Gönderme Teknikleri Mailto: bizim için en kolay form gönderme tekniğidir. Ancak örneklerde de gördüğümüz gibi uyarı mesajı verdiği için pek tercih edilmez. Bunun yerine programlama dilleri ile yazılmış form gönderme teknikleri kullanılır. Ama bizim için yapılmış olan ücretsiz servisler de var. Bu sayede hiçbir programlama diline ihtiyaç duymadan bir ziyaretçi defteri sahibi oluyoruz. Konular bitmiyor :) Form alanı yapmasını ve gönderme işlemini öğrendik.. Geriye ne kaldı?? Önümüzdeki haftalarda CSS ile dinamik, rengarenk sayfalar hazırlayacağız.. O zamana kadar form gönderme işlemini iyi okuyun iyi anlayın:) 19

20 KONU 19 HTML de Püf Noktaları - 1 Bu dersimizde işe yaramaz gibi görünen ama bazen çok ihtiyacımız olan HTML etiketlerinden bahsedeceğiz. <big> ve <small> etiketleri Yazı tipi ve font büyüklüklerinden daha önceki derslerimizde bahsetmiştik. Sayfamızdaki yazıların büyük olmasını istiyorsak: Yazı tipi ve font büyüklüklerinden daha önceki derslerimizde bahsetmiştik. Sayfamızdaki yazıların büyük olmasını istiyorsak: <big> Bu yazı büyük olmalı </big> <big><big> Bu yazı çok daha büyük olmalı </big></big> Bu <big> etiketi yazımızın büyüklüğünü bir ölçü büyütmeye yarıyor.. Ne kadar büyümesini istiyorsak o kadar <big> etiketi yazmalıyız. Küçük olmasını istiyorsak: <small> Bu yazı küçük olmalı </small> <small><small> Bu yazı daha küçük olmalı </small></small> <small> etiketi ise normal font boyundan bir ölçü küçük olmasını sağlar.. İstediğimiz kadar <small> etiketi yazabiliyoruz! Not: Bu etiketleri kullanacağımız zaman <font size=""> etiketini kullanmıyoruz. Eğer kullanırsak istediğimiz sonucu elde edemeyiz... <blockquote> etiketi Bu etiket paragraflarımızı bir satır içeriden başlatmamızı sağlar. Kullanımı: <p> Webdersleri </p> <blockquote> Photoshop için en iyi kaynak..<br> Tabii ki HTML için de :)) <blockquote> Bu kodlamanın sayfadaki görünümü: Webdersleri Photosop için en iyi kaynak.. Tabii ki HTML için de :)) <hr> (Horizontal Rule = Yatay Çizgi) Etiketi <hr> etiketi sayfamızda bir yatay çizgi çizmekte kullanılır.. Bunun bir bitirme etiketi yoktur. Yani <hr> yazdıktan sonra </hr> yazılmaz... 20

21 Kullanımı: Şimdi bir alt satırda bir çizgi olsa ne iyi olurdu.. <hr> aa zaten varmış:)) Sayfaki görünümü: Şimdi bir alt satırda bir çizgi olsa ne iyi olurdu... aaa zaten varmış:)) <hr> etiketinin ayarları şunlardır: "align" = left çizgiyi sola hizalar, center ortaya, right ise sağa hizalamamıza yardımcı olur.. "noshade" çizgimizin gölge efektini kaldırır. Koyu renkli bir çizgi olmasını sağlar.. "size" çizgimizin kalınlığını belirler. Mesela: size="2" "width" ise çizgimizin genişliğini belirler... Mesela: width="100" 21

22 KONU 20 HTML de Püf Noktaları - 2 Özel Karakterler Şimdi açın çok amaçlı not defteri programınız notepad'i. Ve şunları aynen yazın. Boşlukları da unutmayın.. Ardından deneme.htm adı ile kaydedin: <html> <head> </head> <body> <p> Bugün bir garip martı gördüm havada... <br> Bugün bir garip martı gördüm havada... </body> </html> Bu denemenin sayfada görünümü şöyle olmalıdır: Bugün bir garip martı gördüm havada... Bugün bir garip martı gördüm havada... Gördüğünüz gibi kodlamayı yaparken istediğiniz kadar boşluk bırakın, bu sayafada normal olarak görünecektir.. Peki ya bu boşluklara ihtiyacınız varsa.. İşte o zaman imdadımıza "Küçük ama işlevi büyük HTML kodları" giriyor :) Sadece boşluk bırakmak için değil "" (Tırnak işaretleri) "<" ">" (büyüktür ve küçüktür işaretleri) yani söylemek istediğim karakterlerin da bazı kodlamaları olduğu.. Ben burada Web sayfalarında en çok kullanılan özel karakterlerin kodlamalarından bahsedeceğim: (boşluk) " " & & < < > > Şimdi bunları sayfamızda deneyelim bakalım nasıl sonuçlar alacağız?? <p> Bugün hava nasıldı? </p> <p> < HTML > kodları böyle yazılmalı.. </p> <p> Kitap & Cd satan bir yer biliyor musun? </p> <p> Bu sözün lisansı benimdir:) 22

23 Bu kodlamanın sayfada görünümü: Bugün hava nasıldı? <HTML> kodları böyle yazılmalı. Kitap & Cd satan bir yer biliyor musun? Bu sözün lisansı & benimdir :) Nasıl küçük ama işlevi büyük HTML kodları işe yarıyor değil mi? 23

24 KONU 21 Meta Etiketleri Meta etiketleri, HTML sayfalarının başından ayrılmayan bekçileridir:) Bunu bir HTML öz sözü olarak kabul edin ve iyi dinleyin; Meta etiketlerinin fonksiyonunu kısaca açıklamak gerekirse, Meta Etiketlerinin görevi Web Sayfası hakkındaki bilgileri tutmaktır.. Şunu hatırlayın, Web sayfalarımızın başına koymayı alışkanlık haline getirdiğimiz: <meta http-equiv="content-type" content-text/html; charset=windows-1254"> etiketleri hatırlayın.. Şimdi Meta etiketlerinin işleyiş şekillerini ve bu şekillerin ne işe yaradığına bir göz atalım.. Meta etiketleri ve onların işlevleri.. Türkçe Font Meta etikeketleri bir çok bakımdan işimize yarar.. (Bize çay, kahve pişirmese de biz yine de severiz onları..) Sayfalarımız da Türkçe font kullanmış isek bunu ziyaretçinin browserında Türkçe olarak gösteren <meta http-equiv="content-type" content="text/html; charset=iso "> <meta http-equiv="content-type" content-text/html; charset=windows-1254"> etiketi.. Eğer bu etiketi kullanmaz isek kullandığımız türkçe harfler ziyaretçimizin bilgisayarında düzgün görünmyecek ve ne yazdığımızı anlamayacaktır.. Bunu istemeyiz değil mi?? Siteniz arama motorlarında görüntülensin... Web sayfanızın bir takım yerler de görülmelidir ki siz amacınıza ulaşın. Bu da ya Arama Motorlarına ve bazı listelere üye olmak ile ya da sayfanız ile aynı amacı paylaşan sayfalara link vermek ile mümkün olabilir. Bunun bir yolu daha var.. Sayfamızdaki meta etiketi ile bazı arama motorlarında görüntülenmesini sağlayabiliriz.. <meta name="keywords" content="kelime1, kelime2, kelime3.."> Meta etiketimizin adı "keywords" yani Anahtar Kelimeler. Meta etiketimizin content bölümüne sayfamız ile ilgili bazı anahtar kelimeler yazmalıyız.. Mesela sayfamız Fotoğraf Sanatçılığı ile ilgili bir sayfa ise kullandığımız meta etiketi şöyle olmalıdır: <meta name="keywords" content="fotograf, Fotograf, fotoğraf, fotoğraf, film"> Bu listeyi genişletmek mümkündür. Ama unutmayın, sayfanız ile ilgili olmayan kelimeleri lütfen kullanmayın! Böylece isteyen istediği bilgiye hemen ulaşabilsin. 24

25 Tanıtım Metni: Sayfamızın Arama Motorlarında görüntülenmesini sağladık.. Ama bir de sayfamızın içeriği hakkında daha geniş bilgi vermeliyiz. Bu sayede ziyaretçi hiç tereddüt etmeden aradığının bizim sayfamızda olduğunu anlayacak ve ziyaret edecektir: <meta name="description" content="fotoğraf Sanatları Hakkında Herşey.. İyi bir fotoğrafrafçı olmak istiyorsanız, size en iyi hizmeti vermeyi bir görev biliriz..."> Böylece sitemizin tanımı da yapmış oluyoruz... Kendinizi de tanıtın:) Eveet, bu sayfanın yapımcısı sizsiniz.. Siz yazdınız bütün kodları.. Siz koydunuz sayfanın adını.. Bu kadar motive yeter.. Sayfamız arama motorlarında görüntülendiğinde bu sayfanın yapımcısının da adının bulunması gerekir değil mi? Bunun için: <meta name="author" content="serenity"> Bazı arama motorları arama yapalara sonucu gösterirken site yapımcısının adını "author" ifadesini okumak sureti ile yapar. Bu bir nevi sizin imzanız da sayılabilir. Her arama motorunun indeksleme yöntemi farklıdır.. Bazen istediğimiz sonucu elde edemeyebiliriz. Birçok arama motoru da bir süre geçtikten sonra sayfamızı kaydedebilir.. Hiçbir zaman umudumuzu yitirmeyelim, bekleyelim de arama motorlarının keyfi yerine gelsin:) Diğer Meta Tagleri.. <META http-equiv=expires content="wed, 04 Apr :59:59 GMT"> Bu meta tag'i sayfanın 4 Nisan 2001'de Griniç saatiyle 23:59:59'dda tüm arama motorlarından ve Browser'ların geçici internet dosyaları klasöründen silinmesini sağlar... <meta http-equiv="refresh" content="5; url=http://www.webdersleri.com"> Bu tag ise, sayfanın 5 saniye sonunda belirtilen adrese yönlendirilmesini sağlar.. Sık güncellenen sayfalar bakımından kullanışlıdır... Hayatımızı kolaylaştıran Meta Tag'lerini öğrendik bu dersimizde de. Her zamanki gibi unutmuyoruz: Çalışacak, başarılı olacağız.. 25

BİLGİSAYAR II 2008-2009 BAHAR YARIYILI - NOT 3 - HTML KOMUTLARI. KONU 12 Sıralı Liste

BİLGİSAYAR II 2008-2009 BAHAR YARIYILI - NOT 3 - HTML KOMUTLARI. KONU 12 Sıralı Liste BİLGİSAYAR II 2008-2009 BAHAR YARIYILI - NOT 3 - HTML KOMUTLARI KONU 12 Sıralı Liste Sıralı Liste nasıl yapılır? Bazen sayfamız da listeler kullanmak zorunda kalırız. Mesela sevdiğimiz müzik türlerini

Detaylı

İNTERNET PROGRAMCILIĞI I

İ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,

Detaylı

İNTERNET PROGRAMCILIĞI I

İ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

Detaylı

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 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

Detaylı

Web Programlama Kursu

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

Detaylı

2-Hafta Temel İşlemler

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

Detaylı

Karabük Üniversitesi, Mühendislik Fakültesi...www.ibrahimcayiroglu.com

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

Detaylı

BTP 207 İNTERNET PROGRAMCILIĞI I. Ders 4

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ı

Detaylı

Frame Çerçeveler Web sayfasını birden fazla html sayfa ile oluşturmaya imkan tanır. html örnekler\örnek17.html. örnek17.html

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

Detaylı

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ı 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ı

Detaylı

7. Çerçeveler. Bu bölümü bitirdiğinizde,

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

Detaylı

2. HTML Temel Etiketleri

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,

Detaylı

İ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. 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

Detaylı

Doç.Dr. Yaşar SARI, Web Tasarımı Ders Notları 1

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

Detaylı

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Ü 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.

Detaylı

12. Tanımlama Listeleri
,
,

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ı

Detaylı

4 Front Page Sayfası Özellikleri

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

Detaylı

TEMEL HTML DERS NOTLARI - Table-Form

TEMEL HTML DERS NOTLARI - Table-Form Tablolar ... Tablolar, sayfalari satirlara/sütunlara bölmek ya da metin veya grafiklerin sayfada istedigimiz yerde durmasini saglamak amaçlariyla kullanabilecegimiz HTML'nin en önemli yapitaslarindandir.

Detaylı

www.elektrikogretmenleri.com

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

Detaylı

WEB TASARIM. CSS, IFRAME, TEMPLATE, SLICE, INCLUDE(php komutu) Tarık ÖZEL

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

Detaylı

5. Tablo İşlemleri. Bu bölümü bitirdiğinizde,

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

Detaylı

http://www.microsoft.com/visualstudio/eng/downloads

http://www.microsoft.com/visualstudio/eng/downloads Visual Studio 2012'nin kurulumunu, Visual Studio'nun kullanımını ve Windows Store'da basit bir proje hazırlanmasını anlatacağım. Hepsinden önce Visual Studio ortamından biraz bahsedelim. Visual Studio

Detaylı

İNTERNET PROGRAMCILIĞI I

İNTERNET PROGRAMCILIĞI I BÖLÜM 10 10- TABLOLAR(TABLE) Metinleri listelerin yanısıra tablolar yardımıyla da düzenleyebiliriz. Sörf yaparken rastladığınız sayfalar çoğunlukla iç içe geçmiş tablolardan oluşur. Bu nedenle iyi bir

Detaylı

sayfa Başlığı Bu benim ilk sayfam bu metin koyu

<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

Detaylı

HTML (Hyper Text Markum Language)

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

Detaylı

h a k a n b a b a c. n e t HTML Web Tasarımı ve Programlama

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

Detaylı

görüntüleyebilirsiniz. HTML, programlama dilleri bir programlama mantığı taşımadığından öğrenilmesi gayet kolay bir dildir.

görüntüleyebilirsiniz. HTML, programlama dilleri bir programlama mantığı taşımadığından öğrenilmesi gayet kolay bir dildir. 1. HTML NEDİR? HTML (HyperText Markup Language / Hareketli-Metin İşaretleme Dili)basitçe, browserlarla görebileceğimiz, internet dökümanları oluşturmaya yarayan bir çeşit dildir. Örneğin okuduğunuz bu

Detaylı

Upgrading Internet Technology skills of Information and Communication Technologies (ICT) Professionals

Upgrading Internet Technology skills of Information and Communication Technologies (ICT) Professionals The European Union s Making the Labour Market more Inclusive III programme For North Cyprus Upgrading Internet Technology skills of Information and Communication Technologies (ICT) Professionals Module

Detaylı

3. Metin ve Görünüm Etiketleri

3. Metin ve Görünüm Etiketleri 3. Metin ve Görünüm Etiketleri Bu bölümü bitirdiğinizde, Metin biçimlendirme etiketlerinin neler olduğunu ve nasıl kullanıldığını, Yatay çizginin nasıl çizildiğini ve özelliklerinin neler olduğunu, Satır

Detaylı

HTML & CSS. Öğr.Gör. M.Ersin AKAY

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

Detaylı

Kayan Çerçeveler. Web sayfası içerisine kaydırılabilir çerçeveler yerleştirmek için

Kayan Çerçeveler. Web sayfası içerisine kaydırılabilir çerçeveler yerleştirmek için HTML Ders 8 Kayan Çerçeveler Web sayfası içerisine kaydırılabilir çerçeveler yerleştirmek için Web sayfasının bu kısmında kayan çerçeve

Detaylı

2) Sayfa başlık bölümüdür. Javascript vs. burda tanımlanır.

2) <head></head> Sayfa başlık bölümüdür. Javascript vs. burda tanımlanır. > 1) Tüm kodlar bunun arasında çalışır. 2) Sayfa başlık bölümüdür. Javascript vs. burda tanımlanır. 3) Sayfa gövde kısmıdır. Renkler, yazılar

Detaylı

Temel Bilgisayar Terimleri Yrd. Doç. Dr. Devkan Kaleci

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

Detaylı

Toplu Kayıt Kullanıcı Kitapçığı

Toplu Kayıt Kullanıcı Kitapçığı OnSync Web Toplantı, Sanal Sınıf, Web ve Video Toplantı Servisi Toplu Kayıt Kullanıcı Kitapçığı 1 Öncelikle Etgi Grup u tercih ettiğiniz için teşekkür ederiz. OnSync sistemine giriş yapmadan önce toplu

Detaylı

www.elektrikogretmenleri.com

www.elektrikogretmenleri.com FIREWORKS (MENU OLUŞ TURMA) 1 Önce Başlat menüsü Programlar Adobe Web Premium CS3 Adobe Fireworks CS3 kısayol simgesi ile Fireworks programı açılır. 2 Fireworks programı açıldığında Karşımıza gelen Yeni

Detaylı

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. 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 :

Detaylı

PHP ile İnternet Programlama

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ü 3. BÖLÜM: Formlarla Çalışmak HTML Formlarının Temelleri Dinamik etkileşim

Detaylı

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 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:

Detaylı

Kodlama Paneli. Nazmiye Demirel Ortaokulu SCRATCH 2014-2015. Scratch bir grafik programlama dilidir.

Kodlama Paneli. Nazmiye Demirel Ortaokulu SCRATCH 2014-2015. Scratch bir grafik programlama dilidir. Scratch bir grafik programlama dilidir. Scracth ile resim, ses, müzik gibi çeşitli medya araçlarını bir araya getirebilir, kendi animasyonlarımızı, bilgisayar oyunlarımızı tasarlayabilir ya da interaktif

Detaylı

Vsp Teknoloji Son sistem güvenlik duvarlarıyla korunmaktadır, Kullanıcı bilgilerini doğru girdiğinde giriş sayfasına bağlanacaktır.

Vsp Teknoloji Son sistem güvenlik duvarlarıyla korunmaktadır, Kullanıcı bilgilerini doğru girdiğinde giriş sayfasına bağlanacaktır. Üye Girişi Vsp Teknoloji Son sistem güvenlik duvarlarıyla korunmaktadır, Kullanıcı bilgilerini doğru girdiğinde giriş sayfasına bağlanacaktır. Giriş Sayfası Sayfa ayarlarını buradan yapabilirsiniz. Anahtar

Detaylı

İ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.

İ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

Detaylı

ASSAM YÖNERGESİNE EK-T ASSAM WEB SİTESİ YÖNERGESİNE LAHİKA-2 WEB SİTESİ MAKALE EKLEME KILAVUZU 8.4.2014. www.assam.org.tr ASSAM

ASSAM YÖNERGESİNE EK-T ASSAM WEB SİTESİ YÖNERGESİNE LAHİKA-2 WEB SİTESİ MAKALE EKLEME KILAVUZU 8.4.2014. www.assam.org.tr ASSAM YÖNERGESİNE EK-T ASSAM WEB SİTESİ YÖNERGESİNE LAHİKA-2 WEB SİTESİ MAKALE EKLEME KILAVUZU 8.4.2014 ASSAM İçindekiler Önsöz... 3 ASSAM Web Sitesinde Makale Yayınlamak... 4 ASSAM Web Sitesine Nasıl Girerim?...

Detaylı

1.1 Web Kavramlar. 1.1.1.3 URL terimini tanımlayınız ve anlayınız.

1.1 Web Kavramlar. 1.1.1.3 URL terimini tanımlayınız ve anlayınız. 1.1 Web Kavramlar 117 Anahtar 7erim/er 1.1.1.1 Web ve Internet terimlerini tanımlayınız. Her birinin anahtar özelliklerini tanımlayınız. Web bir Internet hizmetidir. Web Internet üzerinde bağlantılı html

Detaylı

MODÜL 2 HTML İLE GELİŞMİŞ ÖZELLİKLER

MODÜL 2 HTML İLE GELİŞMİŞ ÖZELLİKLER MODÜL 2 HTML İLE GELİŞMİŞ ÖZELLİKLER Bu modülü bitirdiğinizde; HTML kodları ile WEB sayfaları için gelişmiş özellikleri kullanabileceksiniz. Ayrıca, 1. WEB sayfaları içi formlar oluşturabilecek, 2. WEB

Detaylı

Samsun Çocuk Hizmetleri İ l Koordinasyon Sekretarya Birimi

Samsun Çocuk Hizmetleri İ l Koordinasyon Sekretarya Birimi Samsun Çocuk Hizmetleri İ l Koordinasyon Sekretarya Birimi Veri Giriş Sistemi Klavuzu Amaç Veri Giriş Sistemi, koruyucu ve destekleyici tedbir kararlarının takibinde ve uygulamasında ilgili kurumları daha

Detaylı

Microsoft PowerPoint

Microsoft PowerPoint Microsoft PowerPoint GİRİŞ Microsoft Powerpoint bir sunum hazırlama programıdır. Microsoft Powerpoint sayesinde sunumlarınıza içerisinde ses,video,animasyon,grafik,resim,köprüler,web içerikleri ve çeşitli

Detaylı

İÇERİK YÖNETİM SİSTEMİ KULLANMA KILAVUZU

İÇERİK YÖNETİM SİSTEMİ KULLANMA KILAVUZU T.C. SÜLEYMAN DEMİREL ÜNİVERSİTESİ BİLGİ İŞLEM DAİRE BAŞKANLIĞI İÇERİK YÖNETİM SİSTEMİ KULLANMA KILAVUZU Hazırlayanlar Mahmut ÖZDEMİR Sezgin SERPEN Büşra TUNCER Yönetim Paneli Kullanımı Sistemin yönetim

Detaylı

Note: If you want to validate a page containing frames, be sure the DTD is set to "Frameset DTD". Read more about XHTML Validation.

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ç

Detaylı

Doküman Versiyon : 1.01.02 Tarih : 06.02.2013

Doküman Versiyon : 1.01.02 Tarih : 06.02.2013 Yardım Dosyası Doküman Versiyon : 1.01.02 Tarih : 06.02.2013 1 1 - Çalışma Şekli Hakkında Kısa Bilgi AKINSOFT WOLVOX ve OctoPlus programları içerisinde Argox marka etiket yazıcı kullanarak stoklarınız

Detaylı

2- Kontrol Sil... 17. 3-En Öne Getir... 13 4-En Arkaya Gönder... 13 4.5.8.2 Resim... 14. 1-Özellikler:... 18 Genel Özellikler...

2- Kontrol Sil... 17. 3-En Öne Getir... 13 4-En Arkaya Gönder... 13 4.5.8.2 Resim... 14. 1-Özellikler:... 18 Genel Özellikler... i İçindekiler Kullanıcı Giriş Ekranı... 1 Ana Sayfa... 2 1-Projeler... 3 1.1 Yeni Proje... 3 1.2 Proje Düzenle... 3 1.3 Proje Sil... 3 1.4 Listeyi Güncelle.... 3 2-Gruplar... 4 2.1.1 Grup Adı.... 5 2.1.2

Detaylı

Html temelleri. Ders 4

Html temelleri. Ders 4 Html temelleri Ders 4 1 Giriş World Wide Web (Kısaca web) uygun protokoller kullanarak haberleşen yazılımların çalıştırıldığı internet üzerindeki sistemlerin bir koleksiyonudur. Çoğu sistem gününüzde en

Detaylı

Doktor Web Tasarım ile sıfır hatada Dünya standartlarında web kalite politikasına uygun web sitesi oluşturabileceksiniz

Doktor Web Tasarım ile sıfır hatada Dünya standartlarında web kalite politikasına uygun web sitesi oluşturabileceksiniz KULLANIM KILAVUZU Doktor Web Tasarım ile sıfır hatada Dünya standartlarında web kalite politikasına uygun web sitesi oluşturabileceksiniz Her doktorun ihtiyacı olan doktor web sitesi, hasta ve doktor arasındaki

Detaylı

ÇANKAYA ÜNİVERSİTESİ WEBMAIL KULLANIM KLAVUZU

ÇANKAYA ÜNİVERSİTESİ WEBMAIL KULLANIM KLAVUZU ÇANKAYA ÜNİVERSİTESİ WEBMAIL KULLANIM KLAVUZU Üniversitemiz Webmail servisi yenilenmiş olup Roundcube webmail üzerinden servis vermeye başlamıştır. Daha önce kullanılan SquirrelMail servisi https://oldwebmail.cankaya.edu.tr/

Detaylı

MS WORD 5. BÖLÜM. Şekil 3. 100. Sayfa Düzeni Sekmesi. Şekil 3. 101. Temalar Grubu

MS WORD 5. BÖLÜM. Şekil 3. 100. Sayfa Düzeni Sekmesi. Şekil 3. 101. Temalar Grubu MS WORD 5. BÖLÜM Bölüm Adı: SAYFA DÜZENİ Bölümün Amacı: Sayfa yapısı ve düzenini değiştirmek. Neler Öğreneceksiniz? Bu bölümü bitiren kişi: 1. Ofis temalarını bilir. 2. Kenar boşluklarını, sayfa yönlendirmesini,

Detaylı

Doç. Dr. İsmail Rakıp Karaş www.ismailkaras.com irkaras@gmail.com. Hazırlayan: İdris Kahraman

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

Detaylı

www.wikispaces.com Kullanım Kılavuzu

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

Detaylı

1) İlk olarak oluşturduğumuz filtre adı yazılır. (örneğin tatil mesajı, taşı vb gibi.) 2) Sonra filtre için kural belirlenir.

1) İlk olarak oluşturduğumuz filtre adı yazılır. (örneğin tatil mesajı, taşı vb gibi.) 2) Sonra filtre için kural belirlenir. ROUNDCUBE FİLTRELER Roundcube e-posta sisteminde tatil mesajı, otomatik cevaplama ayarlamalarını yapabileceğiniz, gönderici / alıcı / konu ve postalara dayalı seçenekler ile filtre oluşturabileceğiniz

Detaylı

Metin Text Kutuları. Metin kutusu oluşturmak için tagı kullanılır.

Metin Text Kutuları. Metin kutusu oluşturmak için <input> tagı kullanılır. Form İşlemleri Form Nedir? Şu ana kadar öğrendiğimiz konularda hep ziyaretçilere veri göstermeye veya bilgi vermeye çalıştık. Gerek metinlerle, gerekse liste veya resimlerle ziyaretçilere bilgi sunmayı

Detaylı

Web Tasarımının Bugünü ve Geleceği

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

Detaylı

TSOFT FACEBOOK STORE UYGULAMASI

TSOFT FACEBOOK STORE UYGULAMASI TSOFT FACEBOOK STORE UYGULAMASI GEREKSİNİMLER VE KURULUM YARDIMI GİRİŞ Facebook, insanların arkadaşlarıyla iletişim kurmasını ve bilgi alış verişi yapmasını amaçlayan bir sosyal paylaşım web sitesidir,

Detaylı

KELİME İŞLEMCİLERE GİRİŞ 5.SINIF BİLİŞİM TEKNOLOJİLERİ VE YAZILIM DERSİ ÇALIŞMA KÂĞIDI

KELİME İŞLEMCİLERE GİRİŞ 5.SINIF BİLİŞİM TEKNOLOJİLERİ VE YAZILIM DERSİ ÇALIŞMA KÂĞIDI KELİME İŞLEMCİLERE GİRİŞ 5.SINIF BİLİŞİM TEKNOLOJİLERİ VE YAZILIM DERSİ ÇALIŞMA KÂĞIDI Microsoft Office Word programı, Amerika da bulunan ve Bill Gates in sahibi olduğu yazılım firması Microsoft tarafından

Detaylı

E-postalarınıza HTML imza ile daha ilgi çekici olun

E-postalarınıza HTML imza ile daha ilgi çekici olun E-postalarınıza HTML imza ile daha ilgi çekici olun 3 Temmuz Cuma 09 Diğer Dökümanlar http://mfyz.com/e-postalariniza-html-imza-ile-daha-ilgi-cekici-olun E-Postalarda imza kullanımı Günümüzde eposta ile

Detaylı

KULLANIM KILAVUZU. VSP Teknoloji ile sıfır hatada Dünya standartlarında web kalite politikasına uygun web sitesi oluşturabileceksiniz

KULLANIM KILAVUZU. VSP Teknoloji ile sıfır hatada Dünya standartlarında web kalite politikasına uygun web sitesi oluşturabileceksiniz KULLANIM KILAVUZU VSP Teknoloji ile sıfır hatada Dünya standartlarında web kalite politikasına uygun web sitesi oluşturabileceksiniz Kullanıcı dostu kontrol panelli dünya standartlarında web tasarım uygulaması.

Detaylı

Kullanım Kılavuzu Milli Eğitim Bakanlığı 2010

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...

Detaylı

3- http://www.google.com/sites/help/intl/tr/overview.html

3- http://www.google.com/sites/help/intl/tr/overview.html Merhaba değerli öğrencilerim, Son ödevin konusu : Kişisel web sitesi oluşturmak, siteyi düzenlemek, yayınlamak ve UKEY üzerinden bir dosya içerisinde kişisel web sitesinin adresini göndermek. Bunun için

Detaylı

SM 100 Terazi Ayarları. Digi SM 100. SM 100 Terazi Ayarları

SM 100 Terazi Ayarları. Digi SM 100. SM 100 Terazi Ayarları Digi SM 100 SM 100 Terazi Ayarları Digi SM 100 Terazi Ayarları Teraziyi ayarlamaya başlamak için öncelikle X S Z ENTER Raporlar Program Ayarlar FONKSIYON Bölümlerine geçiş yapabilmemiz gerekmektedir. Bunun

Detaylı

İNTERNET TABANLI PROGRAMLAMA- 5.ders

İNTERNET TABANLI PROGRAMLAMA- 5.ders Html nedir? İNTERNET TABANLI PROGRAMLAMA- 5.ders Hareketli metin işleme dili basitce browser larda görebileceğimiz (internet exp.) internet dökümanları olusturmaya yarayan bir cesit dildir html ile oluşturduğumuz

Detaylı

AUTODESK PORTALI İÇİN AKADEMİK HESAP OLUŞTURULMASI

AUTODESK PORTALI İÇİN AKADEMİK HESAP OLUŞTURULMASI AUTODESK ACADEMIC RESOURCE CENTER (ARC) İÇİN - Adım adım AutoDesk ürünleri indirme ve lisanslama rehberi Eğitim amaçlı olarak öğrenci laboratuvarlarındaki bilgisayarlara kurmak için, AutoDesk ürünlerinin

Detaylı

BİLGİSAYARDA OFİS PROGRAMLARI BİÇİMLENDİRME

BİLGİSAYARDA OFİS PROGRAMLARI BİÇİMLENDİRME BİLGİSAYARDA OFİS PROGRAMLARI BİÇİMLENDİRME Büro Yönetimi Öğretmeni Fatma GEZ BİÇİMLENDİRME Yazmış olduğumuz metinleri farklı boyut, renk, yazı tipi vb. özelliklerde yazabilmek için biçimlendirme işlemi

Detaylı

CSS(CASCADING STYLE SHEETS)

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

Detaylı

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 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

Detaylı

2016 Bahar Dönemi. İşveren ve İşveren Vekili için. İş Sağlığı ve Güvenliği Hizmetleri. e-sertifika Programı. Başvuru Kılavuzu

2016 Bahar Dönemi. İşveren ve İşveren Vekili için. İş Sağlığı ve Güvenliği Hizmetleri. e-sertifika Programı. Başvuru Kılavuzu 2016 Bahar Dönemi İşveren ve İşveren Vekili için İş Sağlığı ve Güvenliği Hizmetleri e-sertifika Programı Başvuru Kılavuzu 1. Genel Bilgi 2. Yeni Üyelik Giriş İşlemleri 3. Başvuru İşlemleri 4. Şifre Hatırlatma

Detaylı

Microsoft FrontPage 2003. Web Sitesi Hazırlama. Ögr.Gör.N.Nilgün Çokça

Microsoft FrontPage 2003. Web Sitesi Hazırlama. Ögr.Gör.N.Nilgün Çokça Microsoft FrontPage 2003 Web Sitesi Hazırlama Ögr.Gör.N.Nilgün Çokça Microsoft FrontPage 2003 Web Sitesi Hazırlama Ikinci Bölüm İçindekiler İçindekiler i Microsoft FrontPage 2003 2 Atlama Menüsü Eklemek:

Detaylı

İÇEL OSGB ORTAK SAĞLIK VE GÜVENLİK BİRİMİ. www.icelosgb.com info@icelosgb.com Telefon 0324 327 08 01 Faks 0324 327 08 02

İÇEL OSGB ORTAK SAĞLIK VE GÜVENLİK BİRİMİ. www.icelosgb.com info@icelosgb.com Telefon 0324 327 08 01 Faks 0324 327 08 02 İÇEL OSGB OFİS SİSTEMİ SİSTEME GİRİŞ SİSTEME GİRİŞ SİSTEME GİRİŞ bölümünde, İÇEL OSGB OFİS SİSTEMİNE nasıl giriş yapabeleceğinizi öğrenebilirsiniz. Basit görünse bile, bazı püf noktaları yeni olabilir.

Detaylı

HESAP MAKİNASI YAPIMI

HESAP MAKİNASI YAPIMI HESAP MAKİNASI YAPIMI 1..Aşağıdakine benzer görünüm ve butonları hazırlayın. 2. 24. Butonun içerisine aşağıdaki kodları yazın. 3. Yeni bir layer ekleyip Frame1 F9 na aşağıdaki kodları ekleyelim. 4. Butonlardan

Detaylı

1. HAFTA KBT204 İNTERNET PROGRAMCILIĞI II. Öğr.Gör. Hakan YILMAZ. hakanyilmaz@karabuk.edu.tr

1. HAFTA KBT204 İNTERNET PROGRAMCILIĞI II. Öğr.Gör. Hakan YILMAZ. hakanyilmaz@karabuk.edu.tr 1. 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ırmaMerkezi 2 İçindekiler 1. GİRİŞ... 3 1.1 ASP NEDİR?...

Detaylı

Microsoft FrontPage 2003. Web Sitesi Hazırlama. Ögr.Gör.N.Nilgün Çokça

Microsoft FrontPage 2003. Web Sitesi Hazırlama. Ögr.Gör.N.Nilgün Çokça Microsoft FrontPage 2003 Web Sitesi Hazırlama Ögr.Gör.N.Nilgün Çokça Microsoft FrontPage 2003 Web Sitesi Hazırlama Birinci Bölüm Microsoft FrontPage 2003 i Yeni Web Sitesi Oluşturmak 2 Dosyanın Kaydedilmesi

Detaylı

Sevdiğiniz editörü açın, Notepad, vi, pico vb. Daha sonra da aşağıdaki kodu yazın:

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)

Detaylı

Temel HTML Eğitimi. Erman Yükseltürk

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ı

Detaylı

BİLİŞİM TEKNOLOJİLERİ

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

Detaylı

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 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

Detaylı

KAMPÜS KART KULLANIM KILAVUZU

KAMPÜS KART KULLANIM KILAVUZU KAMPÜS KART KULLANIM KILAVUZU Kampüs Kart, Kampüs araç giriş-çıkışlarında, kantinler ve yemekhane gibi ödeme ve kontrol noktalarında ihtiyaçların karşılanmasına yönelik hem kimlik kartı, hem de temassız

Detaylı

BTP 207 İNTERNET PROGRAMCILIĞI I. Ders 2

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

Detaylı

MICROSOFT OFFİCE WORD PROGRAMI DOSYA İŞLEMLERİ

MICROSOFT OFFİCE WORD PROGRAMI DOSYA İŞLEMLERİ MICROSOFT OFFİCE WORD PROGRAMI Ms Word bir kelime işlemci programıdır. İçinde bulunan detaylı metin biçimlendirme seçenekleri, ayrıntılı tablo, şekil ve grafik oluşturma başarıları nedeniyle, kendi türünde

Detaylı

Daha önce bu işlemin iki tane dosya oluşturduğunu gördük. GecDenTest.aspx dosyasının source kısmında içeriğini inceleyecek olursanız en başta

Daha önce bu işlemin iki tane dosya oluşturduğunu gördük. GecDenTest.aspx dosyasının source kısmında içeriğini inceleyecek olursanız en başta Bu gün dersimizde Validation Geçerlik Dentimi Kontrollerine değineceğiz. Önce adı GecerlikDeneme isimli bir yeni site oluşturalım. Burada programın otomatik olarak oluşturacağı Default.aspx dosyasını ve

Detaylı

Turgut Özal Üniversitesi WEB Sitesi Kullanım Kılavuzu

Turgut Özal Üniversitesi WEB Sitesi Kullanım Kılavuzu Turgut Özal Üniversitesi WEB Sitesi Kullanım Kılavuzu Temmuz 2012 Turgut Özal Üniversitesi web sitesi yönetim paneline aşağıdaki link yardımıyla ulaşabiliriz. http://www.turgutozal.edu.tr/webmin/ Karşımıza

Detaylı

E-Posta Hesabı Oluşturma

E-Posta Hesabı Oluşturma E-Posta Hesabı Oluşturma Elektronik Posta (E-posta) Nedir? Elektronik posta (e-posta) internet ortamından gönderilen dijital (elektronik) mektuptur. Bir başkasına e-posta gönderebilmemiz için öncelikle

Detaylı

VERİ TABANI NEDİR A. TABLO OLUŞTURMA

VERİ TABANI NEDİR A. TABLO OLUŞTURMA VERİ TABANI NEDİR Belli bir amaca dayalı ortak alanlara (ad soyad, ürün adı, fiyatı gibi) sahip kişilerin ve nesnelerin bilgilerinin tutulduğu, istendiğinde bu bilgiler için arama, düzeltme, silme, kayıt

Detaylı

TESTOSİS KULLANIM KLAVUZU Sisteme Giriş: http://testosmart.com/testosis.asp adresinden yapılmaktadır.

TESTOSİS KULLANIM KLAVUZU Sisteme Giriş: http://testosmart.com/testosis.asp adresinden yapılmaktadır. TESTOSİS KULLANIM KLAVUZU Sisteme Giriş: http://testosmart.com/testosis.asp adresinden yapılmaktadır. Bu ekranda görüldüğü gibi butonlara basarak işlem yapabilirsiniz. Yeni Kayıt Ekleme Yeni Servis-Kalibrasyon

Detaylı

ASP.NET ile Bir Web Sitesi Oluşturma

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

Detaylı

HTML' e Giriş. Windows kullanıyorsanız Notepad'i, Macintosh kullanıyorsanız SimpleText'i çalıştırın.

HTML' e Giriş. Windows kullanıyorsanız Notepad'i, Macintosh kullanıyorsanız SimpleText'i çalıştırın. HTML Dersleri HTML' e Giriş Html Nedir? HTML (Hyper Text Markup Language) internet üzerinde web sayfası oluşturmak için kullanılan bir dilidir. HTML dosyalarının aktarımı için HTTP (Hyper Text Transfer

Detaylı

AKINSOFT NetFoto. Yardım Dosyası. Doküman Versiyon : 1.01.01 Tarih : 27.12.2010. Sayfa-1. Copyright 2010 AKINSOFT

AKINSOFT NetFoto. Yardım Dosyası. Doküman Versiyon : 1.01.01 Tarih : 27.12.2010. Sayfa-1. Copyright 2010 AKINSOFT AKINSOFT Yardım Dosyası Doküman Versiyon : 1.01.01 Tarih : 27.12.2010 Sayfa-1 1- ÇALIŞMA ŞEKLİ HAKKINDA KISA BİLGİ AKINSOFT programı tüm fotoğraf sütüdyolarına hitap etmektedir. A-) Güvenli hızlı ve çok

Detaylı

Balıkesir Özel Serper Bilgisayar Kursu Ders Notları WEB TASARIMI

Balıkesir Özel Serper Bilgisayar Kursu Ders Notları WEB TASARIMI Ders Notları WEB TASARIMI Đçerik: HTML, Frontpage 2000, Dreamweaver MX, Photoshop 6.0, Flash MX, Paint Shop Pro, Swish, Javascript, Javaapplet, FTP, Đsim Registeri, Server Kiralama Đnternet Nedir? Đnternet,

Detaylı

OKUL HABER EKLEME MODÜLÜ TANITIM DOSYASI. Okul haberlerinizi ilçemiz web sitesinde yayınlayabilmek için aşağıdaki adımları uygulamanız gerekmektedir.

OKUL HABER EKLEME MODÜLÜ TANITIM DOSYASI. Okul haberlerinizi ilçemiz web sitesinde yayınlayabilmek için aşağıdaki adımları uygulamanız gerekmektedir. OKUL HABER EKLEME MODÜLÜ TANITIM DOSYASI Okul haberlerinizi ilçemiz web sitesinde yayınlayabilmek için aşağıdaki adımları uygulamanız gerekmektedir. http://maltepe.meb.gov.tr/mebpanel adresine giriniz.

Detaylı

YILDIZ TEKNİK ÜNİVERSİTESİ

YILDIZ TEKNİK ÜNİVERSİTESİ YILDIZ TEKNİK ÜNİVERSİTESİ ÖĞRENCİ E - POSTA KULLANIM KILAVUZU Kullanıcı Adı ve Şifrenin Öğrenilmesi E-Posta Hesabına Giriş Ad ve Soyad E-posta Hesaplarını Öğrenme ve Geçiş Hesabına Kolay Erişmek İçin

Detaylı

HTML. HTML tagleri bir çok farklı şekilde sınıflandırıalabilir. Bir sınıflandırma şu şekildedir:

HTML. HTML tagleri bir çok farklı şekilde sınıflandırıalabilir. Bir sınıflandırma şu şekildedir: HTML HTML nedir? Herşeyden önce bazen yanlış anlaşıldığı gibi HTML bir programlama dili değildir. HTML bir mark-up (~işaretleme) dilidir, yani tag denen özel işaretlerle bir yazının tümünü ya da sadece

Detaylı

HTML. Doç. Dr. İsmail Rakıp Karaş www.ismailkaras.com irkaras@gmail.com. Dersin Course Page: www.ismailkaras.com/228. 2. Bölüm

HTML. Doç. Dr. İsmail Rakıp Karaş www.ismailkaras.com irkaras@gmail.com. Dersin Course Page: www.ismailkaras.com/228. 2. Bölüm HTML 2. Bölüm Doç. Dr. İsmail Rakıp Karaş www.ismailkaras.com irkaras@gmail.com (Son Güncelleme: 18.02.2015) Dersin Course Page: www.ismailkaras.com/228 HTML ile Metin Biçimlendirme / Styles - Formatting

Detaylı

Html'e Giriş. HyperText Markup Language (hypertext işaret dili) Nedir?

Html'e Giriş. HyperText Markup Language (hypertext işaret dili) Nedir? Html'e Giriş HyperText Markup Language (hypertext işaret dili) Nedir? Hypertext terimi bir text'en başka bir text'e zıplamanızı(jump) sağlayan linklerin bulunduğu text'ler için kullanılır. Normal bir yazıda

Detaylı

GOOGLE DRİVE KULLANARAK FORM OLUŞTURMA

GOOGLE DRİVE KULLANARAK FORM OLUŞTURMA GOOGLE DRİVE KULLANARAK FORM OLUŞTURMA Google Docs yani Google Dokümanlar hizmeti bir süre önce Google Drive adlı bulut depolama hizmetinin içerisine alındı ve çok daha gelişerek yoluna devam etti. Google

Detaylı

Önce Access açıp,masaüstü ne, vt.mdb adlı veri tabanı dosyasını oluşturuyoruz. Kayıt türünü 2002-2003 seçiyoruz

Önce Access açıp,masaüstü ne, vt.mdb adlı veri tabanı dosyasını oluşturuyoruz. Kayıt türünü 2002-2003 seçiyoruz 9 Şubat 2012 / Perşembe Önce Access açıp,masaüstü ne, vt.mdb adlı veri tabanı dosyasını oluşturuyoruz. Kayıt türünü 2002-2003 seçiyoruz 1) emlakkategorisi adlı tabloyu oluşturuyoruz 1 2) ilanlar adlı tabloyu

Detaylı