BTP208 İnternet Programcılığı II HTML5 ve Getirdiği Yenilikler (1. Kısım)
|
|
|
- Umut Sökmen
- 8 yıl önce
- İzleme sayısı:
Transkript
1 BTP208 İnternet Programcılığı II HTML5 ve Getirdiği Yenilikler (1. Kısım) Hazırlayan Öğr. Gör. Özgür ÖZŞEN HTML5 Nedir? HTML in bir önceki versiyonu olan HTML yılında çıkarılmış ve o tarihten bu yana WEB de çok fazla değişiklikler olmuştur. HTML5, HTML dilinin yayınlanan ve halen yapım sürecinde olan son sürümüdür. Standart haline gelmiş HTML4 ün yerini alan yeni standarttır. HTML5 için çalışmalar halen sürmektedir ancak bir çok modern tarayıcı HTML5 in bazı özelliklerine bugünden destek vermektedir ve her geçen gün bu destek artmaktadır. Günümüz teknolojisi, güncel HTML sürümü(4.01) nün çok üstünde olup yeni arayışlara girmemize neden olmuştur. Bu sayede 2008 yılından itibaren HTML5 geliştirilmeye başlanmıştır. 1
2 HTML5 Nedir? HTML5 in, XHTML de olduğu gibi katı kuralları olan bir işaretlemesi yoktur. HTML elemanlarını (tag), büyük harflerle kullanabilir, özellikleri (attributes) tırnak içinde veya tırnak içine almadan kullanabilirsiniz. XHTML 2.0 çalışmalarının sona ermesinin en önemli nedenlerinden biri olan önceki versiyonlara destek verilmemesidir. HTML5 ise, kendinden önce var olan versiyonların elemanlarının da birçoğunu desteklemektedir. HTML5 Oluşumu HTML5, World Wide Web Consortium (W3C) ve Web Hypertext Application Technology Working Group (WHATWG)'nin ortak bir çalışmasıdır. WHATWG web formlar ve uygulamalar üzerinde çalışırken, W3C XHTML2.0 üzerinde çalışmalarını sürdürmekteydi yılında, bu iki kuruluş çalışmalarını birleştirmeye ve yeni bir HTML versiyonu çıkarmaya karar verdi. 2
3 HTML5 ile Gelen Yeni Elementler Günümüzde, bazı HTML 4.01 elementlerinin kullanılmayanları ve modası geçen yapıları HTML5 te yeniden yazıldı gereksiz görülenleri kaldırıldı. Burada kullanılan element kelimesine dikkat. Bir kaç html imi veya tag i olarak isimlendirmiyoruz, artık html in üzerine eklenen şeyler birer element olmaktadır. Önceden bahsedilen im veya tag diye anlatılan yapıları W3C element olarak bahsediyordu. Html de gerçek elementlerini 5. sürümünde kazandı. Günümüzün internet kullanımının üstesinden daha iyi bir şekilde gelebilmesi, HTML5 in yapı için yeni elementlerin, çizim, medya içeriği, ve daha iyi form işleme ile mümkün olmaktadır. Kısaca HTML5 Sadeleştirilmiş, düzeltilmiş HTML4 ve XHTML dillerinin son sürümüdür. Daha fazla yapısal elemana, form elemanlarına ve yeni özelliklere sahiptir. Gelişmiş multimedya desteği sunmaktadır. İçerisinde yeni teknolojiler barındırır ya da önceden var olan teknolojilerin kullanımını sağlar. JavaScript ve CSS3 teknolojilerinin daha etkili bir şekilde kullanılmasını sağlar. 3
4 HTML5 Yapısı Bir HTML5 belgesi her zaman DOCTYPE etiketi ile başlar ve ardından <html>, <head>, <body> etiketleri tanımlanır. <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>sayfa Başlığı</title> </head> <body> </body> </html> HTML5 Yapısı <!DOCTYPE html> DOCTYPE tanımlaması yapmamış iseniz web sayfanız tarayıcının var olan eski kurallarına göre değerlendirilecek ve gösterilecektir. Sayfa görünümü ya da elemanların yerleşimi, kullanılan tarayıcıya bağlı olarak değişiklik gösterebilir. Önceki HTML 4.01 DOCTYPE(Strict) tanımlaması <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"" <meta charset="utf-8"> Önceki HTML sürümlerinde charset tanımlaması <meta http-equiv="content-type" content="text/html;charset=utf-8" /> 4
5 HTML5 Yapısı contenteditable:true false niteliği Eleman içeriğinin düzenlenebilir olup olmayacağını ayarlamak için kullanılır. Bu özelliğe true değeri atanmışsa eleman içeriği kullanıcı tarafından düzenlenebilir, false değeri atanmışsa eleman içeriği kullanıcı tarafından düzenlenemez. Bu özelliği, değeri ile beraber kullanmak şarttır. HTML5 Yapısı Örnek <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title> contenteditable özelliği</title> <style type="text/css"> </style> </head> <body> <div contenteditable="true"> Düzenlenebilir İçerik</div> <div contenteditable="true"> <img alt="düzenle" src="html5.png" /> </div> </body></html> 5
6 HTML5 Yapısı Sayfanın normal(varsayılan) ekran çıktısı: Birinci div içerisinde bulunan metnin kullanıcı tarafından değiştirilmesi ve resmin küçültülmesi. Ekran çıktısı: HTML5 Yapısal Elementler Web siteleri kodlanırken belli yapısal kısımlara ayrılır. Üst kısım, içerik kısmı, sol-sağ kolonlar, menü alanı, alt kısım ve içerik alanı. HTML5 geliştiricileri de bunları düşünerek bu alanların her biri için bir element tanımlamışlardır. Bu alanlar için genel <div> elementi kullanılmaktadır, yeni elementlerle bu tekil element (<div>) yerine her kısım için bir element kullanma imkanımız olmaktadır. 6
7 HTML5 Yapısal Elementler Semantik (anlamsal) olarak doğru ve daha iyi bir yapı sağlamak için HTML5 e eklenen yeni elemanlar: HTML5 Yapısal Elementler 7
8 HTML5 Yapısal Elementler <section>: Sayfa içerisinde genel bölümler (ana içerik bölümü ya da diğer bölümler) oluşturmak için kullanılır. section{ display: block; } <nav>: Navigasyon(yönlendirme, link) alanları oluşturmak için kullanılır. nav elemanı link oluşturmak için kullandığımız a elemanının ya da ul ile ol elemanlarının yerlerine kullanılmaz. Sadece bu elemanları kapsar (başka elemanları da kapsayabilir) ve içerdiği eleman gurubunu bir navigasyonalanı olarak tanımlar. nav{ display: block; } HTML5 Yapısal Elementler <div id="menu"> <ul> <li><a href="#">birinci Link</a></li> <li><a href="#">ikinci Link</a></li> <li><a href="#">üçüncü Link</a></li> <li><a href="#">dördüncü Link</a></li> </ul> </div> Şeklindeki bir kullanım yerine aşağıdaki kullanımı tercih edebilirsiniz. <nav> <ul> <li><a href="#">birinci Link</a></li> <li><a href="#">ikinci Link</a></li> <li><a href="#">üçüncü Link</a></li> <li><a href="#">dördüncü Link</a></li> </ul> </nav> 8
9 HTML5 Yapısal Elementler <!DOCTYPE html> <html> <head> <title>html 5</title> </head> <body> <header><nav></nav></header> <section> <article> <header></header> <figure></figure><footer></footer> </article><dialog><dialog> </section> <aside></aside> <footer></footer> </body> </html> HTML5 Yapısal Elementler <html> <head> <title>html 4</title> </head> <body> <div class="header"> <div class="nav"></div> </div> <div class="section"> <div class="article"> <div class="header"></div> <div class="figure"></div> <div class="footer"></div> <div class="dialog"></div> </div> </div> <div class="aside"></div> <div class="footer"></div> </body> </html> 9
10 HTML5 Yapısal Elementler <article>: Sayfanın ana içerik alanında anlamsal bir bütünlüğü olan, yani farklı konu başlıklarına ya da davranışlarına göre ayrılmış alt bölümler oluşturmak için kullanılır. Örneğin' bir blog sayfasında ana içerik bölümü içindeki farklı blogyazı alanları bu elemanla oluşturabilir. article{ display: block; } <footer>: Bu elemanı kullanarak sayfa ya da bölümler için alt bilgi alanları oluşturabilir. Alt bilgi alanları genelde içerik yazarı hakkında bilgi ve içeriğin oluşturulma tarihi yada sayfa sahibi ile ilgili iletişim bilgilerini içerir. footer{ display: block; } HTML5 Yapısal Elementler <hgroup>: Başlık elemanlarını (h1...h6) gruplandırarak belge yada bölüm başlığı oluşturmak için kullanılır. hgroup{ display: block; } <hgroup> <h1>web Developers</h1> <h2>html5</h2> </hgroup> <header>: Bu eleman kullanarak sayfa hakkında bilgiler içeren başlık alanları, bölüm veya alt bölüm başlığı, yönlendirme alanları için başlık alanları oluşturulabilir. Genelde h1, h2... h6 elemanlarını ya da hgroup elemanını içerir. 10
11 HTML5 Yapısal Elementler <!DOCTYPE html> <html> <head> <meta charset="utf-8,tr" /> <title>header elemanı</title> <style type="text/css"> header { font-family: Cavalero BT,serif; width:650px; height:54px; background-color:#f9f3f3; text-indent:5px; } header img { float:right;} header h1 {margin:0px;} </style> </head> <body> <header> <img alt="html5logo" src="html5logo.png" /> <h1>her Yönüyle HTML5</h1> </header> </body> </html> HTML5 Yapısal Elementler section, nav, article, aside, hgroup, header, footer elemanları için tarayıcı desteği aşağıdaki tabloda görülmektedir. section, nav, article, aside, hgroup, header, footer elemanları blok seviyesinden elemanlardır. Tarayıcı blok seviyesi elemanından önce ve sonra bir satır sonu oluşturur. 11
12 HTML5 Anlamlı Blok Elementler Yapısal elementlerden daha çok ayrıntıya inen elementlerde bulunmaktadır. HTML5 Yapısal Elementler 12
13 HTML5 Yapısal Elementler <aside>: İçerik bölümleri ile alakalı ek bilgi alanları oluşturmak için kullanabileceğiniz bir elemandır. Sayfanın ana bölümlerinin dışında sayfa kenarlarında reklam alanları, yan açıklama ve ek bilgi alanları oluşturmak için de kullanılabilir. article{ display: block; } <figure>, <figcaption> (<legend>): figure etiketi; resim, fotoğraf alanları ya da media alanları tanımlamak için kullanılır. figure elemanı ile oluşturulan alanlara bir metin iliştirmek için figcaption elemanı kullanılır. <dialog>: Diyalog elementi, karşıklıksohbet içeren sayfaları kodlamayı sağlar. Bu element <dd> ve <dt> elementlerini alt element olarak kullanır. HTML5 Yapısal Elementler <!DOCTYPE html> <html> <head> <meta charset="utf-8,tr" /> <title>figure ve figcaptionelemanı</title></head> <body> <figure> <imgalt="html5logo" src="html5.png" /> <figcaption> HTML5 resimbaşlığı</figcaption> </figure> </body> </html> 13
14 HTML5 Yeni İşaretleme Elementleri HTML5 Yeni İşaretleme Elementleri Ruby'hızlı ve kolay', nesneye yönelik yazılım geliştirmeye yarayan yorumlanan bir programlama dilidir. 14
15 HTML5 Yeni İşaretleme Elementleri <!DOCTYPE html> <html> <head> <meta charset="utf-8,tr" /> <title>meter</title> </head> <body> <form> <p> 1.Ölçüm <meter min="0" low="50" high="80" max="100" value="100"> </meter> </p> <p> 2.Ölçüm <meter min="0" low="50" high="80" max="100" value="70"> </meter> </p> <p> 3.Ölçüm <meter min="0" low="50" high="80" max="100" value="20"> </meter> </p> </form> </body> </html> 50 ile 80 arası yeşil diğer noktalarda sarı HTML5 Yeni İşaretleme Elementleri <!DOCTYPE html> <html> <head> <meta charset="utf-8,tr" /> <title>progess</title> <script type="text/javascript"> var prg= function() { var prg= document.queryselector('progress'); var num=document.queryselector('[type="number"]'); prg.value=num.value; } </script> </head> <body> <form> <progress max="100"></progress> <br/> <input type="number" min="10" max="100" step="10" onchange="prg();" /> </form> </body> </html> number elemanı içerisinde saklanan değeri progress elemanının value özelliğine atandı. Bu durumda number elemanı içerisindeki değer her değiştiğinde prg() fonksiyonu çağrılacak ve ilerleme pozisyonu değişecektir. 15
16 HTML5 Yeni Medya Elementleri HTML5 yeni medya standartları sunmaktadır: HTML5 ile Web te Audio Bugüne kadar web sayfalarında ses dosyası çalmak için bir standart bulunmuyordu ve genellikle ses oynatmak için flash gibi eklentiler kullanılıyordu. HTML5 ile gelen <audio> elemanı ile ses dosyası çalmak mümkün olmaktadır. <audio> Web sayfaları içerisine ses dosyaları eklemek için kullanılan elemandır. Ses parçalarının çalınmasını sağlar. 16
17 Audio Türleri Varsayılan olarak, audio elementine uygun 3 tür mevcuttur: Audio Elementinin Özellikleri 17
18 HTML5 ile Web te Audio src: Eleman tarafından çalınacak ses dosyasını tanımlamak için kullanılır. Bu özelliğe ses dosyasının saklandığı bir URL adresi de yazılabilmektedir. <!DOCTYPE html> <html> <head> <meta charset="utf-8,tr" /> <title>audio elemanı</title> <style type="text/css"> audio{ margin: 5px; } </style> </head> <body> <audiosrc="kalimba.ogg" controlsautoplay><p> Tarayıcınız HTML5 in eklentisiz ses dosyası çalma özelliğini desteklememektedir.</p> </audio> </body> </html> HTML5 ile Web te Audio controls: Denetim çubuğunun (video kontrol düğmelerinin) gösterilip gösterilmeyecek ayarlamak için kullanılan boolean tipi bir özelliktir. Kontrol düğmelerinin gösterilmemesi sağlanabilmekte ve oluşturulan kontrol düğmeleri kullanabilmekte veya autoplay özelliğini kullanılarak ses dosyasının sayfa yüklendiğinde otomatik olarak çalıştırılması sağlanabilmektedir. 18
19 HTML5 ile Web te Audio preload: Sayfa yüklendiğinde, medya içeriğinin çalışmaya hazır olması için ön belleğe alınmasını sağlar. Eğer autoplay özelliği kullanılmışsa, bu işlem zaten otomatik olarak yapılır, none, metadata, auto değerlerinden birini alabilir. none değeri atanırsa, medya içeriği için preload (ön yükleme) işlemi yapılmaz, metadata değeri atanırsa performans açısından önemli olan medya içeriği ile ilgili çeşitli bilgiler (boyutu, toplam süre, kaynak listesi) için ön yükleme yapılır, auto değeri atanırsa, ön yükleme işlemi otomatik olarak tüm medya içeriği için yapılacaktır. HTML5 ile Web te Video Günümüzde birçok web sayfası içinde, farklı yöntemlerle videoların oynatıldığı görülmektedir. Ancak web sayfalarında video gösterimi için, herhangi bir standart bulunmamaktadır. Günümüzde, flash gibi bir eklenti ile videolar gösterilmektedir. Bu arada, tarayıcıların hepsi aynı tür eklentilere sahip değildirler. HTML5, <video> elemanı ile bu gösterim için hem bir standart sunmakta, hem de dışa bağımlı eklentilerin kullanım ihtiyacını ortadan kaldırmaktadır. 19
20 HTML5 Video Formatları Bugün için, <video> elemanı 3 farklı formatı desteklemektedir. Ogg= Oggdosyaları Theoravideo codec ive Vorbisaudiocodec iile çalışmaktadır. MPEG4 = MPEG 4 dosyaları H.264 video codec ive AAC audiocodec i ile çalışmaktadır. WebM= WebMdosyaları VP8 video codec ive Vorbisaudiocodec iile çalışmaktadır. HTML5 ile Web te Video HTML5 te video göstermek için, gerekli olan şey: <video width="320" height="240" poster= movieposter.png controls> <source src="movie.mp4" type="video/mp4" /> <source src="movie.ogg" type="video/ogg" /> <p>tarayıcınız HTML5 in eklentisiz video oynatma özelliğini desteklememektedir.</p> </video> 20
21 HTML5 <video> Elementinin Özellikleri HTML5 <video> Elementinin Özellikleri 21
22 HTML5 <video> Elementinin Özellikleri <!DOCTYPE html> <html><head> <meta charset="utf-8,tr"/> <title>source</title> <style type="text/css"> body {font-family:calibri;font-size:16px;} </style> <script type="text/javascript"> var vd1=function () { document.getelementbyid("videoe1"). src = document.getelementsbytagname("source")[0].src; } var vd2=function () { document.getelementbyid("videoe1").src = document.getelementsbytagname("source")[1].src; }</script> </head> <body> <video id="videoe1" controls> <source src="cart1.ogg" /> <source src="cart2.ogg" /> </video> <br/> Seciminizi Yap.n.z: <select id="s1"> <option onclick="vd1();">video1-cizgi Film</option> <option onclick="vd2();">video2-belgesel</option> </select> </body> </html> HTML5 <video> Elementinin Özellikleri 22
23 HTML5 <canvas> Elementi Canvas elementi bir web sayfası üzerinde çizim yapmak için kullanılır. Çizimler web sayfasında Javascript ile beraber HTML5 içinde kullanılarak elde edilir. <canvas> elemanı, her bir pikselini kontrol edebileceğiniz dörtgen bir alandır. Çember, daire, çokgen ve karakter çizmek için farklı metotları bulunmaktadır. <canvas id= mycanvas width= 200 height= 100 ></canvas> HTML5 <canvas> Elementi <canvas id="cizimalani" width="200" height="100"></canvas> <script type="text/javascript"> var c=document.getelementbyid("cizimalani"); var cxt=c.getcontext("2d"); cxt.fillstyle="#ff0000"; cxt.fillrect(0,0,150,75); </script> Yukarıdaki kod örneğinde görüleceği üzere JavaScript canvas elementini bulmak için id attribute ü kullanılmaktadır. DOM kullanılarak aşağıdaki gibi bir JavaScriptdeğişkeni üzerinden kullanılabilmektedir. var c=document.getelementbyid("cizimalanim"); 23
24 <canvas> da Koordinatları Anlamak Önceki sayfadaki örnekte, fillrect metodunun parametreleri (0,0,150,75) olarak verilmektedir. Bu ifade, 150x75 boyutlarında bir dikdörtgenin canvas elamanının 0,0 noktasından başlayarak çizilmesi anlamına gelir. Bu şekilde canvas elemanının 2 boyutu koordinat sistemi gösterilmektedir. Örnek <canvas> Kullanımı <!DOCTYPE html> <html> <body> <canvas id="mycanvas" width="360" height="210" style="border:1px solid #c3c3c3;"> Tarayıcınız CANVAS özelliğini desteklememektedir. Lütfen tarayıcınızı güncelleyiniz. </canvas> <script type="text/javascript"> var c=document.getelementbyid("mycanvas"); var cxt=c.getcontext("2d"); cxt.moveto(0,0); cxt.lineto(150,50); cxt.moveto(0,0); cxt.lineto(10,50); cxt.moveto(360,210); cxt.lineto(14,54); cxt.stroke(); </script> </body></html> 24
25 Örnek <canvas> Kullanımı <!DOCTYPE html> <html> <body> <canvas id="mycanvas" width="360" height="210" style="border:1px solid #c3c3c3;"> Tarayıcınız CANVAS özelliğini desteklememektedir. Lütfen tarayıcınızı güncelleyiniz.</canvas> <script type="text/javascript"> var c=document.getelementbyid("mycanvas"); var cxt=c.getcontext("2d"); var grd=cxt.createlineargradient(0,0,360,210); grd.addcolorstop(0,"#ff0000"); grd.addcolorstop(1,"#ebd126"); cxt.fillstyle=grd; cxt.fillrect(0,0,360,210); var kutu=c.getcontext("2d"); kutu.fillstyle="rgba(255, 255, 200, 0.4)"; kutu.fillrect(50,50,250,110); var ciz=c.getcontext("2d"); ciz.moveto(50,50); ciz.lineto(300,160); ciz.moveto(300,50); ciz.lineto(50,160); ciz.stroke(); </script> </body> </html> Örnek <canvas> Kullanımı <!DOCTYPE html> <html> <body> <canvas id="mycanvas" width="360" height="210" style="border:1px solid #c3c3c3;"> Tarayıcınız CANVAS özelliğini desteklememektedir. Lütfen tarayıcınızı güncelleyiniz.</canvas> <script type="text/javascript"> var c=document.getelementbyid("mycanvas"); var cxt=c.getcontext("2d"); cxt.fillstyle="#ff0000"; cxt.beginpath(); cxt.arc(150,105,60,0,math.pi*2,true); cxt.closepath(); cxt.fill(); var cxt2=c.getcontext("2d"); cxt2.fillstyle="#fff"; cxt2.beginpath(); cxt2.arc(168,105,48,0,math.pi*2,true); cxt2.closepath(); cxt2.fill(); </script> </body> </html> 25
26 HTML5 <svg> Elementi SVG, ScalableVectorGraphics terimlerinin kısaltmasıdır. Türkçe karşılık olarak Ölçeklenebilir Vektör Grafikleri diyebiliriz. Telif hakkı bulunmadan sınırsızca yaygın olarak kullanılan vektör tabanlı bir grafik formatıdır. Kutular, daireler, metin ve grafik görüntüleri vs. gösterilebildiği birçok metodu vardır. Aşağıda, x ve y koordinatı 50 olan ve 40 birim yarıçaplı bir içerisi sarı olan yeşil çerçeveli bir dairenin örnek kodu görülmektedir. <svg width="100" height="100"> <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" /> </svg> <svg> ile <canvas> Arasındaki Farklar SVG, 2D grafiğin XML işaretleme dili kullanılarak yazılmış bir halidir. Canvas ise direk olarak 2D grafiği JavaScript ile direk olarak çizmektedir. SVG, XML tabanlıdır, yani her SVG elementi SVG DOM içerisinde kullanılabilir ve her element için JavaScript olay yakalayıcıları(evnet Handlers) kullanılmaktadır. SVG de her çizilmiş şekil bir nesne olarak hatırlanmaktadır ve SVG nesnenin özellikleri değiştirilirse tarayıcı otomatik olarak şekli yeniden işleyerek çizmektedir. Canvas ise piksel piksek oluşturulmaktadır. Bir kere çizilen şekil tarayıcı tarafından unutulmaktadır. Eğer şeklin konumu yeniden değiştirilecek olsa bile bütün şekil yeniden çizilmektedir. 26
27 <svg> ile <canvas> Arasındaki Farklar Canvas Çözünürlük bağımlılığı vardır Olay yakalayıcı desteği yoktur Metin oluşturma desteği ve yeteneği oldukça kısıtlıdır Çizilen şekil.pngveya.jpgformatında saklanabilmektedir. Grafik temelli oyunlarda vs. uygundur SVG Çözünürlük bağımlılığı yoktur Olay yakalayıcı desteği vardır Büyük yorumlama (rendering) alanları ile uygulamaları için uygundur (örn. GoogleMaps) Çizilecek şekil karmaşık olduğu zamanlarda yavaş yorumlama (rendering) yapılmaktadır (DOM kullanıldığı için bilhassa karmaşık şekillerde yavaşlama olmaktadır) Oyun uygulamalarına uygun değildir. Web Depolama (Storage) HTML5, ziyaretçilerin bilgisayarlarında bilgi depolamak için iki yeni nesne önermektedir. localstorage zaman sınırı olmaksızın bilgileri depolar sessionstorage bir oturumluk depolama yapar, sadece bir oturum süresince bilgi depolar HTML5 in bu iki yeni nesnesinden önce bu işlemler çerezler (cookies) kullanılarak yapılmaktaydı. Ancak çerezler, sunucuya her seferinde bir sorgu gittiğinde yeniden düzenlendiğinden verimliliği azaltarak sistemi yavaşlatmaları yüzünden fazla bilgi için kullanılamamaktaydı. HTML5, sunucuya her istek gittiğinde veri gönderilmediği için web sayfasının performansını olumsuz etkilemeden bilgilerin depolanmasına olanak sağlamaktadır. 27
28 Web Depolama (Storage) Bilgiler, farklı web sayfaları için farklı alanlarda depolanır ve her web sayfası yalnızca kendi depolanan bilgilerine ulaşabilmektedir. Bilgileri depolamak ve yeniden erişmek için Javascript kullanılmaktadır. Çerezler ile saklanacak maksimum veri büyüklüğü 4 KB iken, Web Storage ile MB'lar seviyesinde veri saklanabilir. Aynı web sitesini iki farklı sekmede ya da pencerede çalıştırıldığında kullanılacak çerez aynı olacağından, problemler yaşanabilmektedir. Bu sorun sessionstorage (oturum depolama) yapısı ile yaşanmamaktadır. Çünkü bu yapıda veriler oturum bazında saklanmaktadır. Web Depolama (Storage) localstorage Nesnesi: İstemci tarafında oturumdan bağımsız, kalıcı olarak veri saklamak için kullanılmaktadır. Yerel veri sadece kendisini oluşturan web sitesi tarafından kullanılabilmektedir. Saklanacak veriler için bir zaman sınırlaması yoktur. Bilgi depolamak ve o bilgiye erişmek için <scripttype="text/javascript"> localstorage.lastname="ozgur"; document.write(localstorage.lastname); </script> Yukarıda basit şekilde bir kullanım örneği görülmektedir. Bir sonraki örnekte ise, ziyaretçinin sayfaya geliş sayısını depolayan ve ekrana yazan basit bir örnek bulunmaktadır. 28
29 localstoragenesnesi: Web Depolama (Storage) <script type="text/javascript"> if (localstorage.pagecount) { localstorage.pagecount=number(localstorage.pagecount) +1; } else { localstorage.pagecount=1; } document.write("visits "+ localstorage.pagecount + " time(s)."); </script> Web Depolama (Storage) Örnek <!DOCTYPE html> <html><body> <div id="result"></div> <script> if(typeof(storage)!=="undefined") { localstorage.lastname="ozgur"; document.getelementbyid("result").innerhtml="last name: " + localstorage.lastname; } else { document.getelementbyid("result").innerhtml="sorry, your browser does not support web storage..."; } </script></body></html> 29
30 Web Depolama (Storage) Örnek <!DOCTYPE html> <html><body> <div id="result"></div> <script> if(typeof(storage)!=="undefined") { if (localstorage.pagecount){ localstorage.pagecount=number(localstorage.pagecount)+1; }else{ localstorage.pagecount=1; } document.getelementbyid("result").innerhtml="bu sayfayi " + localstorage.pagecount + " kere ziyaret ettiniz."; }else{ document.getelementbyid("result").innerhtml="ozur dileriz, kullandiginiz tarayici web storage destegini vermemektedir :("; } </script> <p>sayfa sayacinin arttigini gormek icin sayfayi yenileyiniz.</p> <p>tarayicinizi kapatin sonra tekrar deneyin, sayacin arttigini goreceksiniz.</p> </body> </html> sesssionstoragenesnesi: Web Depolama (Storage) Kullanım şekli localstorage nesnesi gibi olan bu nesne, bilgileri oturum süresince tutar ve ziyaretçi sayfayı kapattığı zaman bu bilgiler silinir. <script type="text/javascript"> sessionstorage.lastname="ozgur"; document.write(sessionstorage.lastname); </script> 30
31 Web Depolama (Storage) Örnek Örnek: Kullanıcının sayfa ziyaretini sayan scriptörneği <script type="text/javascript"> if (sessionstorage.pagecount) { sessionstorage.pagecount=number(sessionstorage.pagecount) +1; } else { sessionstorage.pagecount=1; } document.write("visits "+sessionstorage.pagecount+" time(s) this session."); </script> <!DOCTYPE html> <html> <head> Web Depolama (Storage) Örnek <script> function clickcounter() { if(typeof(storage)!== "undefined") { if (sessionstorage.clickcount) { sessionstorage.clickcount = Number(sessionStorage.clickcount)+1; } else { sessionstorage.clickcount = 1; } document.getelementbyid("result").innerhtml = "Butona tikladiniz ve bu session da " + sessionstorage.clickcount + " kere sayfayi ziyaret ettiniz."; } else { document.getelementbyid("result").innerhtml = "Ozur dileriz, kullandiginiz tarayici web storage destegini vermemektedir :("; } } </script> </head> <body> <p><button onclick="clickcounter()" type="button">tiklayiniz!</button></p> <div id="result"></div> <p>sayfa sayacinin arttigini gormek icin sayfayi yenileyiniz.</p> <p>tarayicinizi kapatin sonra tekrar deneyin, sayacin arttigini goreceksiniz.</p> </body> </html> 31
![HTML5 Yeni Input Type Özellikleri HTML5 daha zengin ve tarayıcı kontrollü formlar oluşturmak için yeni [input] tiplerine sahiptir.](/docs-images/24/3157192/images/32-0.png "Bu tipler henüz tüm tarayıcılar ve/veya versiyonları tarafından desteklenmemektedir.")
32 HTML5 Yeni Input Type Özellikleri HTML5 daha zengin ve tarayıcı kontrollü formlar oluşturmak için yeni [input] tiplerine sahiptir. Bu tipler henüz tüm tarayıcılar ve/veya versiyonları tarafından desteklenmemektedir. Tarayıcı desteği HTML5 Yeni Input Type Özellikleri 32
33 HTML5 Yeni Input Type Özellikleri Görüldüğü gibi Chromeve Opera en geniş desteği veren tarayıcılardır. Eğer tarayıcı desteklemiyorsa, kullanılılan bu [input] elemanını normal bir text inputolarak gösterilecektir. Ancak doğrulama (validation) için ayrıca kodlama yapılması gerekmektedir. , url, tel, numbergibi tanımlamaların doğrulama ve kontrol dışında en önemli özelliği mobil cihazların klavye diziliminin değişmesidir. InputType tel HTML5 Yeni Input Type Özellikleri Girdi değeri bir telefon numarası olduğu durumlarda kullanılır. InputType Girdi değeri eposta olduğu durumlarda kullanılır. Form onaylandığında Eposta alanının değeri otomatik olarak doğrulanır. Örnek: Anasayfa: <input type=" " name="user_ " /> InputType search Girdi alanı bir arama alanı olduğu durumlarda kullanılır. Destek veren tarayıcılarda kutunun sağ iç yanında, tüm metni silmek için (x) ikonu yer alacaktır. 33
34 InputType URL HTML5 Yeni Input Type Özellikleri Girdi değeri bir URL olduğu durumlarda kullanılır. Örneğin; Homepage: <input type="url" name="user_url"/> InputType Color Girdi değeri hexadecimal renk kodu olduğu durumlarda kullanılır. Opera colorpickerile renk seçmenizi sağlarken chromehexadecimal renk değerlerini kabul etmektedir. Örnek; Color: <input type="color" name="user_color" /> InputType Number HTML5 Yeni Input Type Özellikleri Sayısal değer girişlerini kolaylaştıran bir eleman oluşturur, min özelliği ile girilebilecek en düşük değer, max özelliği ile girilebilecek en yüksek sayısal değer ayarlanır. step özelliği; min, max değerleri arasında bu alana girilebilecek diğer sayıları tanımlamak için bir artış miktarı ayarlamaktadır. Elemana girilen değere value özelliği ile programatik olarak ulaşılabilmektedir. 34
35 HTML5 Yeni Input Type Özellikleri <!DOCTYPE html> <html> <head> <meta charset="utf-8,tr" /> <title>type="number"</title> </head> <body> <form action="kayit.aspx" method="post"> <input type="number" min="10" max="100" step="10" name="num" /> <input type="submit" /> </form> </body> </html> InputType Range HTML5 Yeni Input Type Özellikleri Girdi değeri sayı ile verilen bir aralık olduğu durumlarda kullanılır. Kaydırma çubuğuna sahip belirli sınırları olan numerik değer seçicisi oluşturur. Örneğin; <input type="range" name="points" min="1" max="10" /> 35
36 HTML5 Yeni Input Type Özellikleri Input Type Tarih Toplayıcıları date, month, week, time, datetime, datetime-localhepsi kendine ait bir sınırlama getirmekte. Örnek; Date(Tarih): <input type="date" name="user_date" /> Inputtype date :Görsel olarak tarih değeri girilebilecek form elemanı oluşturur. (Yıl/Ay/Gün) Inputtype month :Görsel olarak ay ve yıl değeri girilebilecek form elemanı oluşturur. (Yıl/Ay) Inputtype week :Görsel olarak hafta ve yıl değeri girilebilecek form elemanı oluşturur. (Yıl/Hafta) Inputtype time :Saat ve dakika değeri girilebilecek form elemanı oluşturur. Inputtype datetime :Tarih (Yıl/Ay/Gün) ve saat (saat:dakika) değerleri girilebilecek form elemanı oluşturur. (UTC zaman standardına göre). Inputtype datetime-local : Girdi değeri kullanıcı bilgisayarındaki Tarih (Yıl/Ay/Gün) ve saat (saat:dakika) değerleri girilebilecek form elemanı oluşturur. HTML5 Yeni Input Type Özellikleri <form action="datetest.html"> <label for="fromdate">tarih Gir:</label> <input type="date" id="fromdate" name="fromdate" value="05/07/2013" /> <hr /> <input type="submit" id="btnsubmit" name="btnsubmit" value="tarih Kaydet" /> </form> 36
37 Sorular? 37
GELİŞMİŞ İNTERNET UYGULAMALARI
Ünite 1: HTML5 HTML nin kısa tarihçesi: GELİŞMİŞ İNTERNET UYGULAMALARI 1991 World Wide Web ve HTML 1 ortaya çıktı 1995 HTML 2.0 1997 HTML 3.7 1998 Web Standarts Project 1999 HTML 4.0 2000 XHTML 1.0 2004
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
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
BTP208 İnternet Programcılığı II HTML5 ve Getirdiği Yenilikler (2. Kısım)
BTP208 İnternet Programcılığı II HTML5 ve Getirdiği Yenilikler (2. Kısım) Hazırlayan Öğr. Gör. Özgür ÖZŞEN HTML5 Yeni Form Elementleri HTML5 işlevi fazla olan ve daha fazla form elemanı sunmaktadır Tarayıcı
Barış Öztekin, 2011 ANKARA www.barisoztekin.com
Barış Öztekin, 2011 ANKARA www.barisoztekin.com H T M L 5 1 HTML5 HTML5 NEDİR? HTML5; HTML, XHTML ve HTML DOM(Document Object Model) için belirlenmiş standartlardır. HTML in bir önceki versiyonu olan HTML4
HTML5. Erek Göktürk. Özgür Yazılım A.Ş. www.ozguryazilim.com.tr
HTML5 Erek Göktürk Nedir? Yenir mi? Web içerik dili HTML'in yeni sürümü Daha iyi belirlenmiş işletim semantiği Yeni elemanlar (tags) ve özellikler (attributes), bazıları da çöpe Ümit: Tarayıcılar arası
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
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
CSS3, HTML 5 ve jquery ile Web Tasarımı. Umuthan Uyan
CSS3, HTML 5 ve jquery ile Web Tasarımı Umuthan Uyan JavaScript Kütüphanesi JavaScript ile yazılan özellikle AJAX ve diger web teknolojilerini kullanarak web yazılımlarını kolaylıkla gelistirmemizi saglayan
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
Öğ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
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
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
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
ÖĞ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ı
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ı
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
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
MOBILEPAX SOAP PRODUCT API KULLANIM ŞEKLİ
MOBILEPAX SOAP PRODUCT API KULLANIM ŞEKLİ Versiyon: 1.0.4 URL http://merchant.mobilepax.com/services/product.asmx Metot MobilePaxProduct fonksiyonu buton bilgisi oluşturulacak ürünün bilgilerinin Mobilepax
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ı
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
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
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
Kurulum 14 FTP ye Bağlanmak ve Dosyaları Atmak 14 Veritabanı Oluşturulması ve Bağlanıp Kurulumun Tamamlanması 15
vii 1 İçerik Yönetim Sistemi Nedir? 2 WordPress Nedir? 2 WordPress Kısa Tarihi 3 WordPress Gücünü Nereden Alıyor? 3 WordPress ile Neler Yapabiliriz? 4 Kişisel Blog 4 Kurumsal Blog 4 Kurumsal Site 4 Tanıtım
HTML (Hyper Text Markup Language)
HTML (Hyper Text Markup Language) Ele Alınacak Başlıklar HTML tarihçesi Bir HTML dökümanın genel görünümü HTML ve tarayıcı etkileşimi Tarihçe Internet The World Wide Web (www) HTML URI/URL HTTP Tim Berners-Lee
MOBILEPAX XML PRODUCT API KULLANIM ŞEKLİ
MOBILEPAX XML PRODUCT API KULLANIM ŞEKLİ Versiyon: 1.0.4 URL Adresi http://merchant.mobilepax.com/services/product.aspx Gönderilen XML Yapısı MobilePaxProduct fonksiyonu buton bilgisi oluşturulacak ürünün
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ı,
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
İNTERNET PROGRAMLAMA II. Tanımlar
İNTERNET PROGRAMLAMA II Tanımlar WWW( World Wide Web) Dünya üzerindeki bütün bilgisayarların bağlı olduğu bir ağdır. Çoğunlukla Web olarak adlandırılır. Web üzerindeki bilgisayarlar standart protokolleri
BİH 605 Bilgi Teknolojisi Bahar Dönemi 2015
BİH 605 Bilgi Teknolojisi Bahar Dönemi 2015 Ders- 13 World Wide Web (WWW) Yrd. Doç. Dr. Burcu Can Buğlalılar Bilgisayar Mühendisliği Bölümü Bilgisayar Katmanları İçerik World Wide Web (WWW) Anlık Mesajlaşma
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
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:
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
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
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
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
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
Programlama Yazılımı ile Web Sitesi Oluşturma
Hafta- 2 Programlama Yazılımı ile Web Sitesi Oluşturma Programlama yazılımı, bir web projesi oluşturmak için alternatif birkaç yol sunar. Buyollardan bir tanesi ihtiyaca uygun olarak seçilebilir. Programlama
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,
AMACSEO TEMASI KULLANIM KILAVUZU. AmacSeo temasının Amacdizayn.com tarafından hazırlanmış kullanım kılavuzudur. 1
AMACSEO TEMASI KULLANIM KILAVUZU AmacSeo temasının Amacdizayn.com tarafından hazırlanmış kullanım kılavuzudur. 1 TEMANIN ÖZELLİKLERİ - Wordpress 3.1.1 sürümü için hazırlanmıştır. - Basit kontrol paneli
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
Raptadmin 1.x.x Sürümleri için Kullanım Klavuzu
Raptadmin 1.x.x Sürümleri için Kullanım Klavuzu Ekim 2014 Ankara www.raptadmin.com info@raptadmin.com Giriş İşlemleri Raptadmin yönetim paneline www.alanadınız.com/admin adresini kullanarak gidebilirsiniz.
Kopya Hakkı 2005 The European Computer Driving Licence Foundation Ltd
Tüm haklar mahfuzdur. Bu yayının hiçbir kısmı ECDL Kuruluşundan izin almadan hiçbir şekilde çoğaltılamaz. Çoğaltım talepleri yayıncıya yapılmalıdır. The European Computer Driving Licence Foundation Ltd
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
1 JAVASCRIPT NEDİR? 1
İÇİNDEKİLER IX İÇİNDEKİLER 1 JAVASCRIPT NEDİR? 1 2 TEST ORTAMINI TANIMAK (FİREFOX VE FİREBUG) 5 Firefox 6 Firebug 8 CSS Sekmesi 10 DOM Sekmesi 11 Net ve Çerezler Sekmeleri 11 Script Sekmesi 11 Konsol Sekmesi
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
Zengin Metin İşaretleme Dili (HTML) BIM206 Web Programlama
Zengin Metin İşaretleme Dili (HTML) BIM206 Web Programlama Word Dokümanı - Yapılandırma Web Sayfası - Yapılandırma What You See Is What You Get (WYSIWYG) Zengin Metin İşaretleme Dili (HTML) HTML: Web sayfalarının
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
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
İ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
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.
Üst Düzey Programlama
Üst Düzey Programlama Servlet 1 Çerez (Cookie) Cookie'ler servletlerden kullanıcının bilgisayarında istekte bulunduğu web tarayıcısına ( anahtar=kelime ) şeklinde bilgi göndermemiz için kullanılan yapılardır.
PROGRAMLAMA DERSİ 1. İNTERNET
PROGRAMLAMA DERSİ 1. İNTERNET İnternet sunucu-istemci modeline göre çalışır. Fiziksel olarak bu sistem genelde isteği yapan bir bilgisayar (kullanıcı-client) ve bu isteği karşılayan özel bir bilgisayar
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
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?...
EKOM WEB DESIGNER PROGRMI KULLANMA KILAVUZ. 1 - Web Sayfası Tasarımı Oluşturma / Var Olan Tasarımı Açma:
EKOM WEB DESIGNER PROGRMI KULLANMA KILAVUZ 1 Web Sayfası Tasarımı Oluşturma / Var Olan Tasarımı Açma 2 Web Sayfasına Yeni Element Ekleme Ve Özelliklerini Belirleme Değişiklik Yapma 3 Web Sayfası Tasarımını
Javascript Geliştiricileri İçin Xaml Ve Microsoft Silverlight
Wpf tabanlı (windows presentation foundation) browser eklentisi hakkında bir sunum Nedir? Genel Bakış Uyumluluk Moonlight Lisans XAML Elementler Animasyon Scripting Sonuç 1 Nedir?, web (browser) uygulamaları
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 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
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
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
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;
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
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ı
FireBug eklentisini eklentiyi yazan sitesinden veya FireFox un eklentiler indirebilirsiniz.
Firebug Hakkında Firebug hakkında... Kod yazarken bir sorunla karşılaşırız ve sorunlarla uğraşmak her ne kadar güzel bir şey olmasa da bu işin olmazsa olmazıdır. Kod yazarken muhakkak bazı sorunlarla karşılaşacağız,
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
1 BOOTSTRAP NEDİR? 1 Bootstrap Nedir? 1 Bootstrap Dosyalarının Siteye Dahil Edilmesi 2 Bootstrap ın Sağladığı Kolaylıklar 3
İÇİNDEKİLER VII İÇİNDEKİLER 1 BOOTSTRAP NEDİR? 1 Bootstrap Nedir? 1 Bootstrap Dosyalarının Siteye Dahil Edilmesi 2 Bootstrap ın Sağladığı Kolaylıklar 3 2 BOOTSTRAP CSS DOSYASININ İNCELENMESİ 5 Bootstrap
İÇ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 Yönetim Paneli Kullanımı Sistemin yönetim paneline giriģ
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
jquery kütüphanesini sayfaya eklemek için iki yöntem vardır. 1. Direkt jquery nin sitesinden ekleme
az kod, çok iş! jquery bir JavaScript kütüphanesidir 2006 yılında, John Resig adlı bir JavaScript geliştiricisi tarafından yazılmaya başlanmıştır. Javascript ile yapmak istediğimiz bir uygulama için yazmamız
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.
Amaçlarımız. Powerpoint de slaytlara eklentiler yapmak. Asıl slayt kavramını tanımlamak. Asıl slayt üzerinde değişklikler yapmak.
Amaçlarımız 2 Powerpoint de slaytlara eklentiler yapmak. Asıl slayt kavramını tanımlamak. Asıl slayt üzerinde değişklikler yapmak. Slayt gösterilerini ayarlamak. 1 3 Slaytlara eklenti yapmak için Insert
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
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
KURULUM KILAVUZU MART 2014. Visilabs Target Kurulum Kılavuzu
KURULUM KILAVUZU MART 2014 1 İçindekiler 1 Suggest Methodu... 3 1.1 Banner Sıralamasının Ziyaretçilere özel değişmesi... 3 1.2 Site üzerindeki widget aracığıyla gösterilen öneriler... 4 1.2.1 RealTime
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,
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
<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
İ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
BAROLAR WEB SİTESİ EĞİTİMİ
BAROLAR WEB SİTESİ EĞİTİMİ HAZIRLAYAN HÜSEYİN SARI 23 MART 2011 ANKARA - İÇERİK YÖNETİM PANELİ - İÇERİK EKLEME İçerik eklerken öncelikle içeriği hangi kayıt tipinde ekleleyeceğimizi belirliyoruz. Tarih
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
JavaScript & DOM XML & JSON
JavaScript & DOM XML & JSON Ele alınacak başlıklar JavaScript Dili DOM (Document Object Model) JavaScript ve OO Programlama XML ve JSON JavaScript Kısım 1 Gelişim JavaScript, 1995 yılında Netscape tarafından
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
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
Yüzen Kutu (Float) ve Konumlandırma (Position) Özellikleri
Yüzen Kutu (Float) ve Konumlandırma (Position) Özellikleri 1. Yüzen kutu özellikleri FLOAT ve CLEAR, CSS ile web sitesi kodlamanın en önemli özelliklerinden iki tanesidir. Float, bir elemanı Normal Akışın
BTP208 İnternet Programcılığı II XML ve XML Uygulamaları. (2. Kısım)
BTP208 İnternet Programcılığı II XML ve XML Uygulamaları (2. Kısım) Hazırlayan Öğr. Gör. Özgür ÖZŞEN İçerik XML DTD Belge Tipi Tanımlamaları 1 Karakter Veri Bir elemanın başlangıç ve bitiş etiketi içindeki
HTML5'in Sunduğu Yenilikler ve Bir Örnek Uygulama Rafet Durgut 1, Doç. Dr. Abdülkadir Çakır 2
HTML5'in Sunduğu Yenilikler ve Bir Örnek Uygulama Rafet Durgut 1, Doç. Dr. Abdülkadir Çakır 2 1 Süleyman Demirel Üniversitesi, Bilgisayar Mühendisliği Bölümü, Isparta 2 Süleyman Demirel Üniversitesi, Elektrik-Elektronik
CSS ile yazıcı çıktı işlemleri
CSS ile yazıcı çıktı işlemleri Web sayfalarının çıktılarını almak her zaman sorunludur. Web sayfaları web tarayıcılarında güzel görünürler ancak çıktı almak için uygun değildirler. Web sayfalarında yazıların
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
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
Maltepe Üniversitesi Bilgisayar Mühendisliği Bölümü Internet ve Bilgi Teknolojileri (BİL 309) Dersi
Maltepe Üniversitesi Bilgisayar Mühendisliği Bölümü Internet ve Bilgi Teknolojileri (BİL 309) Dersi GENEL DERS BİLGİLERİ Öğretim Elemanı Ofis : MUH 312 : Öğr. Gör. Dr. T.Tugay BİLGİN Ofis Saatleri : Pazartesi:
Google Search API ile ajax arama
Google Search API ile ajax arama 14 Ağustos Salı 12 http://mfyz.com/google-search-api-ile-ajax-arama Eğer bir kaynak arıyorsanız, indexlerin güncelliği, genişliği gibi nedenlerden dolayı, diğer arama motorları
ILI9341 TFT Dokunmatik Ekranda Kalemle Çizim Yapmak için Visuino ile Arduino Programlama
ILI934 TFT Dokunmatik Ekranda Kalemle Çizim Yapmak için Visuino ile Arduino Programlama ILI934 merkezli TFT Dokunmatik Ekran Korunması Display Shields for Arduino için çok popüler düşük maliyetli Display
IPACK LADDER. Arayüz Dökümantasyonu
IPACK LADDER Arayüz Dökümantasyonu I. Giriş Bu dökümantasyon IPack Ladder yazılımının arayüz kullanımını, kullanılan model ile ilişkilerini ve işlevsel açıklamaları kapsamak üzere hazırlanmıştır. II. Dökümantasyon
9. HAFTA KBT204 İNTERNET PROGRAMCILIĞI II. Öğr.Gör. Hakan YILMAZ. hakanyilmaz@karabuk.edu.tr
9. 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 Request Nesnesinin Özellikleri
Animasyon Teknikleri, Ses ve Video İşlemleri 1 / 18
Animasyon Teknikleri, Ses ve Video İşlemleri 1 / 18 4. SEMBOLLER Animasyon yazılımı çizilen şekilleri veya çalışma içerisine aktarılan şekilleri sembollere dönüştürerek kütüphanede saklayabilir. Kütüphanede
Web 2.0 Güvenliği @2014 Örnek Eğitim Notu bilgi@bga.com.tr
Web 2.0 Güvenliği @2014 Örnek Eğitim Notu bilgi@bga.com.tr Javascript 1995 Netscape, Brendan Eich tarafından geliştirildi. Dinamik olmasının yanında en önemli iki özelliği; Lambda Closure Javascript -
Cambridge LMS e Başlama- Öğrenciler
Cambridge LMS e Başlama- Öğrenciler 1. Başlamadan önce LMS i kullanmaya başlamadan önce bilgisayarınızın minimum sistem gereksinimlerine sahip olup olmadığını ve internet bağlantınızın kabul edilebilir
Safirblog WP Teması - Kurulum ve Kullanım Kılavuzu
Safirblog WP Teması - Kurulum ve Kullanım Kılavuzu Öncelikle bizi tercih ettiğiniz için teşekkür ederiz. Bu kılavuzda Safirblog Wordpress temasını kullanırken karşılaşabileceğiniz muhtemel durumlara açıklık