Barış Öztekin, 2011 ANKARA

Save this PDF as:
 WORD  PNG  TXT  JPG

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

Download "Barış Öztekin, 2011 ANKARA www.barisoztekin.com"

Transkript

1 Barış Öztekin, 2011 ANKARA H T M L 5 1

2 HTML5 HTML5 NEDİR? HTML5; HTML, XHTML ve HTML DOM(Document Object Model) için belirlenmiş standartlardır. 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 için çalışmalar halen (Kasım2011)sürmektedir ancak bir çok modern tarayıcı HTML5 in bazı özelliklerine bugünden destek vermektedir ve hergeçen gün bu destek artmaktadır. HTML5 in, XHTML de olduğu gibi katı kuralları olan bir işaretlemesi yoktur. HTML elemanlarınızı(tag), büyük harflerle kullanabilir, özellikleri(attributes) tırnak içinde veya tırnak içine almadan kullanabilirsiniz. XHTML2.0 çalışmalarının sona ermesinin en önemli nedenlerinden biri olan önceki versiyonlara destek verilmemesinin tam tersine HTML5, kendinen önce varolan versiyonların elemanlarının da birçoğunu desteklemektedir. HTML5 ÇALIŞMALARI NASIL BAŞLADI? 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. Bu yeni versiyonu çıkarmak için bazı önşartlar vardı: - yeni versiyon HTML, CSS, DOM ve Javascript tabanlı olmalı - dışardan eklenti ihtiyacını en aza indirgemeli (flash gibi) - daha iyi şekilde hata ayıklanabilmeli - daha çok etiket üretilmeli ve script'in yerini alabilmeli - HTML5 cihaz bağımsız çalışabilmeli - geliştirme aşamaları herkese açık olmalı H T M L 5 2

3 YENİ ÖZELLİKLER HTML5 içerisinde şu an için yer alan ilginç özelliklerden bazıları: çizim yapmaya imkan veren canvas elemanı geniş bant ve zengin medya içeriği için video ve audio elemanları çevirim-dışı içerik barındırma içeriği daha iyi tanımlayan özel elemanlar: article, footer, header, nav, section... yeni form kontrolleri. calendar, date, time, , url, search... HTML5 de karakter kodlaması, HTML4 ve XTML1.0 deki detaylı tanımlamaya nazaran son derece basit ve okunabilirdir. <meta charset= UTF-8 > Ayrıca, Javascript ve CSS dosyalarını kodlamamıza dahil ederken kullandığımız type ifadesi HTML5 de kullanılmamaktadır. ve <script src= jsfile.js ></script> <link rel= stylesheet href= style.css > Önceki versiyonlarda, aynı adrese bağlantı verdiği halde yapısı itibari ile iç içe kullanılamayan <a> elemanı da artık iç içe kullanabilmekteyiz. HTML5; <h2><a href= iletisim.html >İLETİŞİM</a></h2> <p><a href= iletisim.html >İletişim bilgilerimize bu adresten ulaşabilirsiniz.</a></p> <a href= iletisim.html > <h2>iletişim</h2> <p>iletişim bilgilerimize bu adresten ulaşabilirsiniz.</p> </a> TARAYICI DESTEĞİ HTML5 şu anda açıklanmış resmi bir standart olmadığından, birçok tarayıcı tam bir destek vermemektedir. Ancak en çok kullanılan (safari, chrome, firefox, opera, internet explorer) tarayıcılar, HTML5 in özelliklerini parça parça eklemeye devam etmektedir. H T M L 5 3

4 HTML5 in YENİ ELEMANLARI Semantik olarak doğru ve daha iyi bir yapı sağlamak için HTML5 e eklenen yeni elemanlar: <article> <aside> <bdi> <command> <details> <summary> <figure> <figcaption> <footer> <header> <hgroup> <mark> <meter> <nav> <progress> <ruby> <rt> <rp> <section> <time> <wbr> Kendi içinde bir içeriği olan, tüm sayfadan bağımsız içerikler için kullanılır. Blog anasayfalarında yer alan bağımsız her bir gönderi için kullanılır. içinde yer aldığı içerikten ayrı bir içeriği sunmak için kullanılır. Sahip olduğu içerik çevresel içerikle ilişkili olmalıdır. parent elementin metin doğrultusu yönününde olmayan metinler için kullanılır. button, radio button veya checkbox. bir dokümanın bir parçasının yada tamamımın detaylarını açıklamak için kullanılır. <details> elemanı içinde özet veya açıklama için kullanılır. özerk (stand-alone) bir içeriğin gruplanması için kullanılır (örn: video) <figure> bölümünün alt yazısı olarak kullanılır. sayfa altlığığ olarak kullanılır. Yazar hakkında bilgi, dokümanın tarihi, iletişim bilgisi ve telif hakları bilgilerini içermelidir. dokümanın veya bölümün tanıtım yazısı için kullanılır. Navigasyon da içerebilir. <h1> den <h6> ya kadar başlık bölümlerini içerir. En büyük değer bölüm başlığı olurken diğerleri alt başlık olarak görünür. özellikle belirtilmek istenilen metinler (highligt) için kullanılır. alt ve üst değerleri bilinen ölçümler için kullanılır. navigasyon bölümü için kullanılır. işin ilerleme durumunu göstermek için kullanılır. uzakdoğu alfabelerinde kullanılan harflerin veya notların okunuşunu, açıklamasını göstermek için kullanılır. <ruby> elemanın bilgi notunu açıklamak için kullanılır. <ruby> elemanını desteklemeyen tarayıcıların göstermesi istenien içerik için kullanılır. bir doküman içindeki bölüm için kullanılır. (bugüne kadar kullandığımız <div> etkiletinin semantik açıdan doğru olan biçimidir.) saat, tarih veya her ikisinin de gösterimi için kullanılır. (WORD BREAK). Satır boşluğu bırakmak için kullanılır. H T M L 5 4

5 YENİ ZENGİN MEDYA ELEMANLARI HTML5, zengin medya içeriklerini desteklemektedir. <audio> <video> <source> <embed> <track> multimedya içeriği, ses, muzik, yada diğer ses içeriğini göstermek için kullanılır. video içeriği için kullanılır. <audio> ve <video> elemanlarının içinde, kaynak adreslemek için kullanılır. flash ve java gibi eklentileri sayfa içine yerleştirmek için kullanılır. medya oynatıcılarında içerik metnini göstermek için kullanılır. CANVAS ELEMANI Bir web sayfası içinde kullanıcı yada kodlama yönlü vektörel çizim yapılmasına olanak sağlanmaktadır. Canvas elemanı bunun için Javascript kullanmaktadır. <canvas> javascript ile grafik çizimi için kullanılır. Yeni FORM ELEMANLARI HTML5 daha fazla yetileri olan form elemanları sağlamaktadır. Bunlar: <datalist> <keygen> <output> girdi değerleri seçenekleri için bir liste oluşturmakta kullanılır. kullanıcıyı yetkilendirmek için rumuzlar üretir. farklı çıktıları göstermek için kullanılır. Örneğin bir script kullanılılarak üretilen çıktı bu eleman ile gösterilir. YENİ INPUT TYPE ve ÖZELLİKLER (New Input Types and Attributes) HTML5 daha zengin ve tarayıcı kontrollü formlar oluşturmak için yeni [input] tiplerine sahiptir. Bunlardan bazıları; url number range H T M L 5 5

6 Tarih seçiciler (date, month, week, time, datetime, datetime-local) search color Bu tipler henüz tüm tarayıcılar ve/veya versiyonları tarafından desteklenmemektedir. Kasım 2011 tarihi itibariyle tarayıcı desteği Tablo 1 da gösterilmiştir. Input Type IE Firefox Opera Chrome Safari Hayır Hayır url Hayır Hayır number Hayır Hayır range Hayır Hayır Tarih seçiciler Hayır Hayır search Hayır Hayır color Hayır Hayır Hayır Tablo 1 - Yeni INPUT Type tarayıcı destekleri Tablo 6 da görüldüğü gibi Chrome ve Opera en geniş desteği veren tarayıcılar. Ancak bu yeni input type ları kullanmaya başlayabilirsiniz. Zira tarayıcı desteklemiyorsa, kullanıdığınız bu [input] elemanını normal bir text input olarak gösterecektir. Ancak doğrulama (validation) için ayrıca kodlama yapmanız gerekecektir. , url, tel, number gibi tanımlamaların doğrulama ve kontrol dışında en önemli özelliği mobil cihazların klavye diziliminin değişmesidir. tel search url datetime girdi değeri bir telefon numarası olduğu durumlarda kullanılır. 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. girdi değeri bir URL olduğu durumlarda kullanılır. girdi değeri eposta olduğu durumlarda kullanılır. girdi değeri tarih ve/ya saat olduğu durumlarda kullanılır. H T M L 5 6

7 date month week time girdi değeri tarih olduğu durumlarda kullanılır. girdi değeri ay olduğu durumlarda kullanılır. girdi değeri hafta olduğu durumlarda kullanılır. girdi değeri saat olduğu durumlarda kullanılır. datetime-local girdi değeri kullanıcı bilgisayarındaki tarih ve saat olduğu durumlarda kullanılır. number range color girdi değeri bir sayı olduğu durumlarda kullanılır. girdi değeri sayı ile verilen bir aralık olduğu durumlarda kullanılır. girdi değeri hexadecimal renk kodu olduğu durumlarda kullanılır. INPUT elemanı için yeni özellikler(attributes) ve kullanım şekilleri ise; autofocus required placeholder <input type= autofocus> Sayfa yüklendiği zaman otomatik olarak bu alan içinin aktif olmasını sağlar <input type= text required> Form gönderildiği zaman bu alanın tarayıcı tarafından boş olup olmadığı kontrol edilir. HTML5 den önce bu doğrulama için çeşitli scriptler kullanmak gerekirdi. <input type= text placeholder= Lütfen adınızı giriniz > Metin alanı içinde bu alanın hangi bilgi için kullanılacağı hakkında bilgi verir. Metin alanı içine tıklandığı zaman placeholder metni silinir ve kullanıcının kendi değerini yazması sağlanır. Kullanıcı metin alanını boş bırakarak alan dışına çıktığında, placeholder metni tekrar alan içinde ye alır. HTML den önce bu gibi bir kullanım için çeşitli scriptler kullanmak gerekirdi. Tarayıcının bu özelliğe destek vermemesi halinde, metin kutusunun içi boş olarak görünecektir. list metin alanına girilebilecek önceden tanımlı içerik var ise list özelliği kullanılır. Kullanıcı bu alanı doldururken girdiği her harf sonrasında listede yer alan uygun elemanlar metin alanın altında aşağı doğru açılır ve kelimenin tamamını yazmadan seçilerek metnin kutu içine yazılması sağlanır. Kullanım şekli; <input type="text" id="illistesi" list="iller" placeholder="lütfen bir il seçiniz" > <datalist id="iller"> <option value="istanbul"> <option value="ankara"> <option value="izmir"> <option value="eskişehir"> <option value="erzurum"> <option value="hakkari"> </datalist> H T M L 5 7

8 min/max pattern Proje <progress min="0" max="100" value="60">60%</progress> tamamlandı. <meter max="10">9 araba</meter> Posta Kodu: <input id="zip" name="postakodu" pattern="[\d]{5}(-[\d]{4})"> Girilecek olan alanın 5 haneli ve yalnızca rakam olduğunu göstermektedir. Okunaklılık konusunda HTML5 in yapısına biraz aykırı görünse de, programcılar için pattern tanıdık bir özelliktir. Tarayıcı tarafından bu kontrolün yapılması HTML5 in güzel bir özelliğidir. Özellik IE Firefox Opera Chrome Safari (Attribute) autocomplete autofocus Hayır form Hayır Hayır form overrides Hayır Hayır height / width List Hayır Hayır Hayır min / max / step Hayır Hayır Hayır multiple Hayır novalidate Hayır Hayır pattern Hayır Hayır placeholder Hayır required Hayır Hayır Tablo 2 - Tarayıcıların yeni özellikleri destekleme durumu HTML5 Video Günümüzde birçok web sayfası içinde, farklı yöntemlerle videoların oynatıldığını görmekteyiz. Ancak web sayfalarında video gösterimi için, herhangi bir standart bulunmamaktaydı. 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. VİDEO DOSYASI BİÇİMLERİ (Video Formats) Bugün için, <video> elemanı 3 farklı formatı desteklemektedir. Bu liste, Tablo 3 de verilmiştir. Biçim (Format) IE Firefox Opera Chrome Safari Ogg Hayır Hayır MPEG Hayır Hayır WebM Hayır Hayır Tablo 3 - Video Biçimleri H T M L 5 8

9 Ogg = Theora Video Codec ve Vorbis Ses Codec MPEG4 = H.264 Video Codec ve AAC Ses Codec WebM = VP8 Video Codec ve Vorbis Ses Codec Nasıl Kullanılır? HTML5 dokümanı içerisinde bir video oynatmak istiyorsanız; <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> controls bu özellik play, pause, volume (oynat, durdur, ses) gibi kontrolleri video oynatıcıya eklemek için kullanılır. her tarayıcının kendine özgü kontrolleri bulunmaktır. Tasarımcılar, javascript kütüphaneleri kullanarak kendi video oynatıcılarını tasarlayabilirler ancak unutulmamalıdır ki, kullanıcı alışkanlıkları açısından algıyı karıştırmamak önemlidir. Çünkü kullanıcılar, video oynatıcınızın görüntüsünden çok, videonun içeriği ile ilgilenmektedir. poster video yükleninceye/oynatılıncaya kadar video alanında gösterilmesi istenilen vekil görselin adresidir. width, height videoları sayfa içine eklerken genişlik ve yükseklik boyutunu girmemiz, video yükleyince kadar gerekli alanın tarayıcı tarafından rezerve edilmesi ve video yüklendikten sonra sayfasının görsel olarak değişikliğe uğramaması açısıdan tavsiye edilmektedir. p source <Video> elementini desteklemeyen tarayıcılar otomatik olarak bu elemanı ve <source> elemanını yok sayacaktır. Bu da videoyu göstermeyeceği anlamına gelir. Kullanıcının bu durumda bilgilendirilmesi <p> etiketi kullanılabilir. Böylece <video> elemanını destekleyen tarayılar video oynatırken, desteklemeyen tarayıcılar <p> elemanı içinde verdiğiniz uyarı mesajını göreceklerdir. yukarıdaki örnek de iki kez kullanılan <source> elamanı ise <video> elemanını destekleyen tarayıcının format desteğine göre video adreslerini göstermektedir. Tarayıcı yalnızca desteklediği formattaki videoyu gösterecektir. H T M L 5 9

10 Bugün için Firefox ve Opera, Ogg formatını; Internet Explorer ve Safari, MPEG 4 formatını, Google Chrome ise her iki formatı da desteklemektedir. Yukarıda verilen örnekte, <video> elemanın tüm özellikleri kullanılmamıştır. Tüm özellikler ve açıklamaları Tablo 4 de verilmiştir. Özellik (Attribute) Değer Açıklama autoplay autoplay Video yüklenir yüklenmez oynatılmasını sağlar controls controls Video kontrollerinin gösterilmesini sağlar height pixel Videonun yüksekliğini pixel cinsinden gösterir loop loop Videonun sonsuz sayıda tekrar tekrar oynatılmasını sağlar muted muted Videonun sesini kapatır poster URL Video yükleninceye kadar gösterilmesi istenilen görselin adresidir preload auto metadata none Sayfa yüklendiği zaman videonun nasıl yüklenmesi gerektiğini belirtir src URL Videonun adres bilgisidir width pixel Videonun genişliğini pixel cinsinden gösterir Tablo 4 - Video Elemanı Özellikleri HTML5 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. SES DOSYASI BİÇİMLERİ (Audio Formats) Bugün, <audio> elemanını destekleyen 3 temel biçim bulunmaktadır. Tarayıcı destek bilgileri Tablo 5 de verilmiştir. Biçim (Format) IE 9.0 Firefox 3.5 Opera 10.5 Chrome 3.0 Safari 3.0 Ogg Vorbis Hayır Evet Evet Evet Hayır MP3 Evet Hayır Hayır Evet Evet Wav Hayır Evet Evet Evet Evet Tablo 5 - AUDIO elemanı için tarayıcı biçim desteği Nasıl Kullanılır? HTML5 dokümanı içerisinde bir ses dosyasını oynatmak istiyorsanız; H T M L 5 10

11 <audio controls="controls"> <source src="song.ogg" type="audio/ogg" /> <source src="song.mp3" type="audio/mpeg" /> <p> Tarayıcınız HTML5 in eklentisiz ses dosyası çalma özelliğini desteklememektedir.</p> </audio> <audio> elemanının kullanımı <video> elemanının kullanımı ile neredeyse aynıdır. <audio> elemanının özellikleri Tablo 6 - Audio elemanının özellikleri de verilmiştir. Özellik (Attribute) Değer Açıklama autoplay autoplay ses dosyası yüklenir yüklenmez çalınmasını sağlar controls controls Ses dosyası oynatıcısı kontrollerinin gösterilmesini sağlar loop loop Ses dosyasının sonsuz sayıda tekrar tekrar oynatılmasını sağlar preload auto metadata none Sayfa yüklendiği zaman ses dosyasının nasıl yüklenmesi gerektiğini belirtir src URL Ses dosyasının adres bilgisidir width Pixel Ses oynatıcısının genişliğini pixel cinsinden gösterir height Pixel Ses oynatıcısının yüksekliğini pixel cinsinden gösterir Tablo 6 - Audio elemanının özellikleri HTML5 Canvas Nasıl Kullanılır? <canvas> elemanı web sayfasına, javascript kullanarak, grafik çizimlerin yapılmasını sağlar. <canvas> elemanı, her bir pixelini kontrol edebileceğiniz dörtgen bir alandır. Çember, daire, çokgen ve karakter çizmek için farklı metodları bulunmaktadır. HTML5 dokümanı içerisine bir <canvas> ekleyin. ID, genişlik ve yükseklik değerlerini belirleyin. <canvas id= mycanvas width= 200 height= 100 ></canvas> <canvas> elemanının kendi kendine çizim yapma yeteneği yoktur. Tüm çizim işleminin Javascript ile yapılması gerekir. H T M L 5 11

12 <script type="text/javascript"> var c=document.getelementbyid("mycanvas"); var cxt=c.getcontext("2d"); cxt.fillstyle="#ff0000"; cxt.fillrect(0,0,150,75); </script> Javascript, çizim yapacağımız <canvas> elemanını ID si ile bulur. var c=document.getelementbyid("mycanvas"); ve 2 boyutlu bir context nesnesi oluşturur. var cxt=c.getcontext("2d"); getcontect( 2d ) nesnesi, HTML5 içerisinde tanımlı bir nesnedir ve kontur, kutu, daire..vb birçok şekil için çizim metodlarına sahiptir. Devam eden satırlarda, içi kırmızı renkle boyanmış bir dikdörtgen çizilmektedir. Canvas da koordinatları anlamak Yukarıdaki örnekte, fillrect metodunun parametreleri (0,0,150,75) olarak verilmektedir. Bu; 150x75 boyutlarında bir dikdörtgenin canvas elamanının 0,0 noktasından başlayarak çizilmesi anlamına gelir. Şekil 1 de canvas elemanının 2 boyutu koordinat sistemi gösterilmektedir. Şekil 1 - Canvas 2 Boyut Koordinat Sistemi Canvas elemanı içinde örnek çizimler Aşağıda kod örnekleri ve çıktıları ile canvas elemanı içerisinde yapılan çizim örnekleri bulunmkatdır. <!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> H T M L 5 12

13 <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> Sonuç: <!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(); H T M L 5 13

14 cxt2.fill(); </script> </body> </html> Sonuç: <!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> H T M L 5 14

15 Sonuç: Canvas elemanının diğer HTML özellikleri ise Tablo 7 de gösterilmektedir. Özellik (Attribute) Değer Açıklama width Pixel Canvas genişliğini pixel cinsinden gösterir height Pixel Canvas yüksekliğini pixel cinsinden gösterir Tablo 7 - Canvas elemanının özellikleri HTML5 Web Storage HTML5, ziyaretçilerin bilgisayarlarında bilgi depolamak için iki yeni nesne önermektedir. Bunlar; localstorage : zaman sınırı olmaksızın bilgileri depolar sessionstorage: 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ılamıyorlardı. 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. Bilgiler, farklı websayfaları 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. localstorage nesnesi localsorage nesnesi, bigileri herhangi bir zaman sınırlaması olmaksızın depolar. Bilgi depolamak ve o bilgiye erişmek için; H T M L 5 15

16 <script type= text/javascript > localstorage.lastname= Smith ; document.write(localstorage.lastname); </script> Yukarıda basit şekilde bir kullanım örneği verilmiştir. Aşağıdaki örnekte ise, ziyaretçinin sayfaya geliş sayısını depolayan ve ekrana yazan basit bir örnek bulunmaktadır. <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> sessionstorage nesnesi Kullanım şekli localstorage nesnesi gibi olan sessionstorage nesnesi, bilgileri oturum süresince tutar ve ziyaretçi sayfayı kapattığı zaman bu bilgiler silinir. HTML5 Elemanlar Listesi (Tag Reference) HTML5 de audio, video, canvas gibi daha önce 3.parti yazılımlara duyulan ihtiyacı ortadan kaldıran özellikler öne çıkmış olsa da, anlambilimsel (semantik) olarak daha doğru, arama motoru dostu (SE friendly), sunucu yükünü azaltan, kullanıcı taraflı işlemleri kolaylaştıran <nav>, <header>, <footer>, <figure>, <article> gibi bir çok yeni elemanlar da eklenmiştir (Tablo 8 de mavi renk ile işaretlenerek, tarayıcı desteği renkli ikonlar ile gösterilmiştir.) Bu elemanlara, açıklamaları ile birlikte, Tablo 8 de yer verilmiştir. Eleman (HTML Tag) Açıklama <!-- içerik --> Yorum satırı <!DOCTYPE> Doküman tipini gösterir <a> Bağlantı için kullanılır <abbr> Bir kısaltamadan söz ederken kullanılır. (WWW yada NATO gibi) <anconym> <address> Doküman / Makale sahibinin iletişim bilgileri için kullanılır <applet> <area> İmajlar üzerinde verilen bağlantılar için tıklama alanı belirlemede kullanılır <article> Makale için kullanılır <aside> Sayfa içeriğinde bahsedilen bir bölüm ile ilgili bilgi vermek için kullanılır H T M L 5 16

17 <audio> <b> <base> <basefont> <bdi> <bdo> <big> <blockquote> <body> <br> <button> <canvas> <caption> <center> <cite> <code> <col> <colgroup> <command> <datalist> <dd> <del> <details> <dfn> <dir> <div> <dl> <dt> <em> <embed> <fieldset> <figcaption> <figure> Sesli içerik oynatmak için kullanılır Metni kalın yazmak için kullanılır Doküman içinde yer alan tüm relatif adreslemelere referans baz adres belirtmek için kullanılır. <head> etiketleri arasında kullanılmalıdır.. (Bi-directional Isolation) Bulunduğu metin içerisinde farklı bir yönde yazılan metinleri göstermek için kullanılır. (Bi-directional Override) içerisindeki elemanın metin yönünü değiştirmek için kullanılır. Başka bir kaynaktan alıntı yapılan bölüm için kullanılır. HTML dokümanının ana yapısıdır. Tek satırlık boşluk için kullanılır. Tıklanabilir bir buton tanımlamak için kullanılır. Genellikle javascript kullanılarak, kullanıcı taraflı çizim yapmak için kullanılır. Bir tablonun altyazısı için kullanılır. Bir çalışmanın başlığı için kullanılır. Kod satırlarını göstermek için kullanılır. <colgroup> elemanı içindeki kolon tanımlamaları için kullanılır. Tabloda yer alan herbir kolonu ayrı ayrı biçimlendirmek için kullanılır. Kullanıcı taraflı kullanılacak bir komut için kullanılır. Kullanıcı tarafındaın yapılacak olan girdi alanları için ön tanımlı liste oluşturmak için kullanılır. Açıklama lisesinde bir elemanın açıklması için kullanılır. Bir doküman içerisinden çıkarılmış metin alanları için kullanılır. Kullanıcı tarafından isteğe bağlı olarak görüntülenebilen açıklama alanları oluşturmak için kullanılır. Açıklama alanları için kullanılır. Dokümanda bir bölüm belirlemek için kullanılır. Açıklama listesi oluşturmak için kullanılır. Açıklama listesindeki her bir açıklama için kullanılır. Vurugu yapılması istenen metin alanları için kullanılır. Dışardan yüklenecek olan interaktif bir uygulama veya eklentiyi sayfaya dahil etmek kullanılır. Bir form içindeki ilişkili elemanları gruplamak için kullanılır. Bir şeklin başlık tanımlaması için kullanılır. İllustrasyonlar, diagramlar, fotoğraflar, kod listeleri gibi kendine has bir içeriği olan alanlar için kullanılır. H T M L 5 17

18 <font> <footer> <form> <frame> <frameset> <h1> den <h6> ya <head> <header> <hgroup> <hr> <html> <i> <iframe> <img> <input> <ins> <keygen> <kbd> <label> <legend> <li> <link> <map> <mark> <menu> <meta> <meter> <nav> <noframes> <noscript> <object> <ol> <optgroup> <option> Doküman veya dokümanın bir bölümünün alt açıklama kısmı için kullanılır. Kullanıcı tarafından giriş yapılması beklenen formların oluşturulmasında kullanılır. Başlıklar için kullanılır. (1 en büyük/önemli/üst) Doküman bilgisinin yer aldığı bölümdür. Doküman ile ilgili bilginin ve sayfa navigasyonunun yer aldığı bölümdür. Çoklu seviyede <h1><h2><h3>... başlık grupları olması durumda kullanılır. İçerikte tematik bir değişiklik olduğunda kullanılır. HTML dokümanının kök elemanıdır. Metin alanın bir bölümünün okunuş tonlamasını veya vurgusunu değiştirmek için italik yapmak amacıyla kullanılır. Satıriçi dış içerikli çerçeveler oluşturmak için kullanılır. Görsel tanımlamak için kullanılır. Bir girdi alanı tanımlamak için kullanılır. Dokümana sonradan eklenen alanları göstermek için kullanılır. Formlar için sunucu taraflı kontrol referansları oluşturur. Klavye giriş alanları için kullanılır. Girdi alanlarını etiketlemek için kullanılır. <fieldset>, <figure> veya <details> elemanılarının başlıkları için kullanılır. Liste içinde yer alan her bir elemanı için kullanılır. Stil dosyalarının dışardan yüklenmesinde bulunduları yerin tanımlanması için kullanılır. Görseller üzerinde alanlar oluşturmak için kullanılır. Metinlerin bir bölümünü işaretlemek için kullanılır. Komut listesi oluşturmak için kullanılır. HTML dokümanın içeriği ile ilgili meta bilgisi tanımlamak için kullanılır. Belirli bir aralıkta(en üst ve en alt değerleri bilinen) ölçülebilir değerler için kullanılır. Site içi/dışı navigasyon bağlantılarını tanımlamak için kullanılır. Kullanıcı taraflı scriptlerin engellenmiş olması durumda gösterilmesi gereken alternatif içerik için kullanılır. Sayfanın içine gömülen nesneler için kullanılır. Sıralı bir liste için kullanılır. Dropdown listelerde ilişkili elemanları gruplamak için kullanılır. Dropdown listelerde liste elemanı tanımlamak için kullanılır. H T M L 5 18

19 <ouput> <p> <param> <pre> <progress> <q> <rp> <rt> <ruby> <s> <samp> <script> <section> <select> <small> <source> <span> <strike> <strong> <style> <sub> <summary> <sup> <table> <tbody> <td> <textarea> <tfoot> <th> <thead> <time> <title> <tr> <track> Bir hesaplama sonucunu göstermek için kullanılır. Paragraflar için kullanılır. Bir objenin parametreleri için kullanılır. Tarayıcılar tarafından ön biçimlendirilmiş metin alanları için kullanılır. Kod bloğunda yer alan boşlukların olduğu gibi ekrana yansıtılacağı durumlarda kullanılır. Bir işin ilerleme durumunu gösterir. Kısa alıntı için kullanılır. Ruby kısaltmalarını desteklemeyen tarayıcılarda gösterilmesi istenen içerik için kullanılır. Uzakdoğu ve asya alfabeleri ile yazılmış yazıların okunuşlarını göstermek için kullanılır. Ruby açıklamaları için kullanılır. Artık doğru olmayan bir metin için kullanılır. Bir bilgisayar programı için örnek çıktısı için kullanılır. Kullanıcı taraflı scriptleri tanımlamak için kullanılır. Dokümanda bir bölüm belirlemek için kullanılır. Drop-down listesi tanımlamak için kullanılır. Tanımlanmış stile göre daha küçük metin yazmak için kullanılır. Zengin medya elemanlarının kaynaklarını göstermede kullanılır. Dokümanda bir bölüm belirlemek için kullanılır. Önemli bir metin için kullanılır. Bir dokümanın stil tanımlaması için kullanılır. Alt simge metinleri için kullanılır. <details> elemanı için görünür bir başlık atamak için kullanılır. Üst simge metinleri için kullanılır. Tablo tanımlamak için kullanılır. Tablonun içerik kısmını gruplar. Tablodaki bir hücre için kullanılır. Çok satırlı metin giriş alanı için kullanılılır. Tablo için alt bilgi alanındaki elemanlrı gruplar. Tabloda bir başlık hücresi tanımlamak için kullanılır. Tabloda başlık hücrelerini gruplamak için kullanılır. Tarih ve sat bilgisi için kullanılır. Dokümanın başlığı için kullanılır. Tabloda bir satır için kullanılır. Zengin medya içeriğinin metinleri için kullanılır. H T M L 5 19

20 <tt> <u> <ul> <var> <video> <wbr> Sırasız listeler için kullanılır. Değişken tanımlamak için kullanılır. Video tanımlamak için kullanılır. Bir metinde, içine aldığı kelime/kelimeleri blok bir satır halinde gösterir. Tablo 8 - HTML5 Elemanları Sonuç HTML5 konusunda çalışmalar hala devam etmektedir. HTML5 in tüm teknoloji dünyasında standartlaşıp, yaygın olarak kullanılması zaman alacağa benziyor. Ayrca günümüz ihtiyaçlarının ve önümüzdeki süreçte ortaya çıkacak ihtiyaçların ne kadarına cevap veriyor olduğunu da önemli bir soru olabilir. Ancak bana kalırsa HTML5 ile ilgili en önemli konu AOL, Apple, Google, IBM, Microsoft, Mozilla, Nokia, Opera gibi teknoloji alanında dünya devi firmaların HTML5 çalışmalarına destek vermesi, standartlaşma ve geliştirme konusunda çalışıyor olmalarıdır. Kimsenin tekelinde olmayan ve herkesin olan bir HTML standartı, gerek mobil, gerekse masaüstü internet ve web deneyimine çok önemli katkılarda bulunacağına inanıyorum. Bu açıdan bakınca, HTML5 in bugün için en büyük katkısı bence birlikteliktir. ADOBE nin, Kasım 2011 tarihinde mobil cihazlar için FLASH OYNATICI projesini sonlandırarak HTML5 e destek vereceğini açıklaması; Microsoft un, Silverlight yaşayacak ama asıl önemli konu HTML5 olacak demesi, bu birlikteliğin en bariz göstergesidir. HTML5 hakkında derlediğim bu küçük notların az da olsa fikir vermesi ümidiyle. Barış Öztekin Ankara, 2011 H T M L 5 20

21 Kaynakça HTML5 For Web Designers / Jeremy Keith H T M L 5 21

22 H T M L 5 22

GELİŞMİŞ İNTERNET UYGULAMALARI

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

Detaylı

BMT 202 Web Tasarımı Bahar Dönemi. Yük. Müh. Köksal GÜNDOĞDU 1

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

Detaylı

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

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ı

HTML5. Erek Göktürk. Özgür Yazılım A.Ş. www.ozguryazilim.com.tr

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ı

Detaylı

Zengin Metin İşaretleme Dili (HTML) BIM206 Web Programlama

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

Detaylı

BTP208 İnternet Programcılığı II HTML5 ve Getirdiği Yenilikler (1. Kısım)

BTP208 İnternet Programcılığı II HTML5 ve Getirdiği Yenilikler (1. Kısım) 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 4.0.1 1999 yılında çıkarılmış ve o tarihten

Detaylı

CSS3, HTML 5 ve jquery ile Web Tasarımı. Umuthan Uyan

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

Detaylı

HTML (Hyper Text Markup Language)

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

Detaylı

12 TBT / WEB TASARIM ve PROGRAMLAMA ( Not 3 )

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

Detaylı

WEB TASARIMININ TEMELLERİ

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

Detaylı

2 HTML5 DİLİ ETİKETLERİ

2 HTML5 DİLİ ETİKETLERİ İÇİNDEKİLER IX İÇİNDEKİLER 1 HTML5 E GİRİŞ 1 Genel Bakış 1 HTML5 in Temel Yapısı 3 DOCTYPE Bildirimi 4 Character Set Bildirimi 5 HTML5 Söz Dizimi Kuralları 6 Tarayıcı Görüntüleme Motoru (Layout Engine)

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ı

ÖĞRENME FAALİYETİ 1 ÖĞRENME FAALİYETİ 1 1. FORMLAR

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

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ı

HTML 5 ve CSS 3. Yrd. Doç. Dr. Murat Olcay ÖZCAN

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

Detaylı

BİH 605 Bilgi Teknolojisi Bahar Dönemi 2015

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

Detaylı

Arayüz Geliştirme Dokümantasyonu

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

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ı

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ı

HTML 5 ve CSS 3. Yrd. Doç. Dr. Murat Olcay ÖZCAN

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

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ı

DIV KAVRAMI <style> position: absolute

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

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ı

HTML içerik oluşturmak için düşünülen bir işaret dilidir. Örnek

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

Detaylı

1 BOOTSTRAP NEDİR? 1 Bootstrap Nedir? 1 Bootstrap Dosyalarının Siteye Dahil Edilmesi 2 Bootstrap ın Sağladığı Kolaylıklar 3

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

Detaylı

Basamaklı Stil Şablonları (CSS) BIM206 Web Programlama

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

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 TASARIMININ TEMELLERİ

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

Detaylı

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

Detaylı

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

Detaylı

5-Hafta Genel Sayfa Yapısı

5-Hafta Genel Sayfa Yapısı 5-Hafta Genel Sayfa Yapısı Paragraf Oluşturma Metin Biçimlendirme Referans ve Alıntıların Belirlenmesi Metinlerin Vurgulanması Kısaltma ve Terimlerin Belirtilmesi Alt ve Üst Simge Kullanımı Uİ-UX NEDİR?

Detaylı

Internet Programming II. Elbistan Meslek Yüksek Okulu Bahar Yarıyılı

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

Detaylı

4. Bağlantı (Köprü) Oluşturma

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

Detaylı

HTML Etiketleri Genel Özellikler (Global Attributes)

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

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ı

HTML Bloklar. CSS Display özelliği

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

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ı

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

Detaylı

Elbistan MYO Güz Dönemi Öğr.Gör. Murat KEÇECİOĞLU

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ı

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ı

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

Kurulum 14 FTP ye Bağlanmak ve Dosyaları Atmak 14 Veritabanı Oluşturulması ve Bağlanıp Kurulumun Tamamlanması 15

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

Detaylı

1 JAVASCRIPT NEDİR? 1

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

Detaylı

İNTERNET PROGRAMLAMA II. Tanımlar

İ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

Detaylı

<html> <head> <title>sayfa Başlığı</title> </head> <body> Bu benim ilk sayfam <b>bu metin koyu</b> </body> </html>

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

BMT 202 Web Tasarımı Bahar Dönemi. Yük. Müh. Köksal GÜNDOĞDU 1

BMT 202 Web Tasarımı Bahar Dönemi. Yük. Müh. Köksal GÜNDOĞDU 1 BMT 202 Web Tasarımı 2016 2017 Bahar Dönemi Yük. Müh. Köksal GÜNDOĞDU 1 HTML Yük. Müh. Köksal GÜNDOĞDU 2 HTML Editörleri Web sayfası oluşturmak için not defteri gibi basit bir metin düzenleme yazılımı

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ı

WEB TASARIMI. Đnternet Nedir?

WEB TASARIMI. Đnternet Nedir? ĐÇĐNDEKĐLER İÇİNDEKİLER... 1 WEB TASARIMI... 2 İnternet Nedir?... 2 HTML (Hypertext Markup Language)... 4 (Hareketli Metin İşaretleme Dili)... 4 KLASÖR VE DOSYA İSİMLERİNDE... 5 STANDART TAKILAR... 5

Detaylı

MOBILEPAX XML PRODUCT API KULLANIM ŞEKLİ

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

Detaylı

Cite While You Write özelliği

Cite While You Write özelliği ResearchSoftware.com 1 Cite While You Write özelliği Atıflar & Şekiller Ekleme EndNote, makalelerinizi yayımcılara elektronik olarak sunmanızı kolaylaştıran daha önceden tanımlanmış birçok Microsoft Word

Detaylı

HTML 5 ve CSS 3. Yrd. Doç. Dr. Murat Olcay ÖZCAN

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

Detaylı

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

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ı

12. Tanımlama Listeleri <dl> </dl>, <dt> </dt>, <dd> </dd>

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ı

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

Detaylı

PROGRAMLAMA DERSİ 1. İNTERNET

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

Detaylı

K12NET Öğrenci Bilgi Sistemi Kullanım Kılavuzu. denge.k12.tr

K12NET Öğrenci Bilgi Sistemi Kullanım Kılavuzu. denge.k12.tr K12NET Öğrenci Bilgi Sistemi Kullanım Kılavuzu denge.k12.tr INTERNET SİTEMİZİNİN ADRESİ www.denge.k12.tr K12NET ÖĞRENCİ BİLGİ SERVİSİ ADRESİ www.denge.k12net.com İçindekiler K12NET Sistemine Giriş... 2

Detaylı

2. Belgeye Metin Ekleme

2. Belgeye Metin Ekleme METİN İŞLEMLERİ Flashta 2 çeşit metin vardır:1)tlf metni 2)Klasik metin 1)TLF Metni : CS5 ile başlayan metin türü. TLF metni FLA dosyanızın yayınlama ayarlarında ActionScript 3.0 ve Flash Player 10 veya

Detaylı

WEB TASARIMININ TEMELLERİ

WEB TASARIMININ TEMELLERİ WEB TASARIMININ TEMELLERİ Ankara Üniversitesi Elmadağ Meslek Yüksekokulu Ders İzlencesi Hafta Modüller/İçerik/Konular 1. Hafta İnternet ve WEB Tanımları Html Temel Etiketleri 2. Hafta Html Temel Etiketleri

Detaylı

Javascript Geliştiricileri İçin Xaml Ve Microsoft Silverlight

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ı

Detaylı

Dış Veri Alma ÜNİTE 6. Bu üniteyi çalıştıktan sonra; Veri Menüsü Dış Veri Al Bağlantılar Sırala ve Filtre Uygula Veri Araçları Anahat

Dış Veri Alma ÜNİTE 6. Bu üniteyi çalıştıktan sonra; Veri Menüsü Dış Veri Al Bağlantılar Sırala ve Filtre Uygula Veri Araçları Anahat Dış Veri Alma ÜNİTE 6 Veri Menüsü Dış Veri Al Bağlantılar Sırala ve Filtre Uygula Veri Araçları Anahat Bu üniteyi çalıştıktan sonra; Microsoft Excel hakkında temel işlemler öğrenildikten sonra veri alma

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ı

MOBILEPAX SOAP PRODUCT API KULLANIM ŞEKLİ

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

Detaylı

Öğr.Gör. Ruhsar KAVASOĞLU

Öğr.Gör. Ruhsar KAVASOĞLU Öğr.Gör. Ruhsar KAVASOĞLU 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 markup

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ı

JSON Korsanlığı. Mesut Timur, Şubat 2010, WGT E-Dergi 4. Sayı

JSON Korsanlığı. Mesut Timur, Şubat 2010, WGT E-Dergi 4. Sayı JSON Korsanlığı Mesut Timur, Şubat 2010, WGT E-Dergi 4. Sayı İnternetin gün geçtikçe hayatımızdaki önemi arttı ve web siteleri milyonlarca insan tarafından girilen yerler haline geldi. Artık çevremizden

Detaylı

Css Stillerinin Nesneyi Etkileme Yolları Ve Sırası, Diez, Nokta, Yıldız, Class Css De Neyi İfade Eder.

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

Detaylı

Çerezleri (Cookie) ve Önbelleği (Cache) Temizleme

Çerezleri (Cookie) ve Önbelleği (Cache) Temizleme Çerezleri (Cookie) ve Önbelleği (Cache) Temizleme Kullandığınız tarayıcıda veya görüntülediğiniz sayfada sorun varsa, öncelikle tarayıcının önbelleğini temizlemeyi deneyin. Önbelleği temizledikten sonra

Detaylı

Flash ile Etkileşimli Öğretim Materyali Hazırlama Semineri

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

Detaylı

Kopya Hakkı 2005 The European Computer Driving Licence Foundation Ltd

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

Detaylı

HTML - 8 Hypertext takıları iki ana değişik şekilde karşımıza çıkar: Anchors ve Images. Anchors, resim veya yazıya bir olay eklemek için kullanılır.

HTML - 8 Hypertext takıları iki ana değişik şekilde karşımıza çıkar: Anchors ve Images. Anchors, resim veya yazıya bir olay eklemek için kullanılır. HTML Ders 5 HTML - 8 Hypertext takıları iki ana değişik şekilde karşımıza çıkar: Anchors ve Images. Anchors, resim veya yazıya bir olay eklemek için kullanılır. Kullanıcı ilgili resim veya yazı üzerine

Detaylı

İ ZMİ R KÂ Tİ P ÇELEBİ Ü Nİ VERSİ TESİ ÜZÂKTÂN EĞ İ Tİ M Sİ STEMİ Ö Ğ RENCİ KÜLLÂNİM KİLÂVÜZÜ

İ ZMİ R KÂ Tİ P ÇELEBİ Ü Nİ VERSİ TESİ ÜZÂKTÂN EĞ İ Tİ M Sİ STEMİ Ö Ğ RENCİ KÜLLÂNİM KİLÂVÜZÜ İ ZMİ R KÂ Tİ P ÇELEBİ Ü Nİ VERSİ TESİ ÜZÂKTÂN EĞ İ Tİ M Sİ STEMİ Ö Ğ RENCİ KÜLLÂNİM KİLÂVÜZÜ İçindekiler 1. Giriş... 3 2. Portal / Ana sayfa... 3 2.1 Sisteme Giriş Yapılması... 3 2.2 Sisteme Giriş Yapılamaması...

Detaylı

Metin Text Kutuları. Metin kutusu oluşturmak için <input> 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ı

PEDVA Kullanıcı Kılavuzu

PEDVA Kullanıcı Kılavuzu PEDVA Kullanıcı Kılavuzu 1. Tarayıcınızı (Browser) açın, http://www.pedva.net/ yazın Bu işlemden sonra PEDVA.net sitesinin ana sayfasına erişeceksiniz: Siteyi tanımak için menüler arasında sörf yapın.

Detaylı

MODÜL 3 HTML İLE STİL ŞABLONLARI

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.

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ı

İSTANBUL KEMERBURGAZ ÜNİVERSİTESİ İÇERİK YÖNETİM SİSTEMİ KULLANIM KLAVUZU KEMERBURGAZ ÜNİVERSİTESİ İÇERİK YÖNETİM SİSTEMİ

İSTANBUL KEMERBURGAZ ÜNİVERSİTESİ İÇERİK YÖNETİM SİSTEMİ KULLANIM KLAVUZU KEMERBURGAZ ÜNİVERSİTESİ İÇERİK YÖNETİM SİSTEMİ TC İSTANBUL KEMERBURGAZ ÜNİVERSİTESİ İÇERİK YÖNETİM SİSTEMİ KULLANIM KLAVUZU İçindekiler WEB İçerik Sistemine Giriş Bilgileri... 3 Sunucu, Şifre, SQL, yedekleme, Debug... Hata! Yer işareti tanımlanmamış.

Detaylı

Web sayfalarında yapılan her çalışma ve düzenleme tablolar aracılığı ile yapılır. Dolayısıyla çoğu web sayfalarında tablo kullanmak zorunluluktur.

Web sayfalarında yapılan her çalışma ve düzenleme tablolar aracılığı ile yapılır. Dolayısıyla çoğu web sayfalarında tablo kullanmak zorunluluktur. Yazı Tipi Stili HTML kodları 47 Kalın İtalik Altı Çizili 9.2.6 Metin yükseltme veya alçaltma 1. Sayfa görünümünde, belge penceresinin altındaki Tasarla düğmesini tıklatın. 2.

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ı

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ı

jquery kütüphanesini sayfaya eklemek için iki yöntem vardır. 1. Direkt jquery nin sitesinden ekleme

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

Detaylı

Seçenekler Menüsünden Genel Sekmesi

Seçenekler Menüsünden Genel Sekmesi Seçenekler Menüsünden Genel Sekmesi Word 2003 açtıktan sonra ARAÇLAR>SEÇENEKLER tıklanır. Karşımıza bu tür ekran çıkar. İlk komut Arka planda yeniden sayfalandır ; Siz çalışırken belgeleri otomatik olarak

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ı

Temel Bilgi Teknolojileri - I Ayrıntılı Ders İçerikleri

Temel Bilgi Teknolojileri - I Ayrıntılı Ders İçerikleri Temel Bilgi Teknolojileri - I Ayrıntılı Ders İçerikleri Bilgi Teknolojileri (IT) Kavramları, Bilgisayar Kullanımı ve Dosyaların Yönetimi, Bilgi ve İletişim HAFTA 1 1. Genel Kavramlar(Bilgisayarın tanımı,bilgi

Detaylı

Programlama Yazılımı ile Web Sitesi Oluşturma

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

Detaylı

Zeki Gülen Marmara Üniversitesi Sosyal Bilimler Enstitüsü, Gazetecilik Ana Bilim Dalı, Bilişim

Zeki Gülen Marmara Üniversitesi Sosyal Bilimler Enstitüsü, Gazetecilik Ana Bilim Dalı, Bilişim Zeki Gülen Marmara Üniversitesi Sosyal Bilimler Enstitüsü, Gazetecilik Ana Bilim Dalı, Bilişim Görme Engelli Görme engelli kime denir? Demografik yapıdaki yerleri ve veriler Dünyadaki durum Türkiye deki

Detaylı

Detaylarıyla Site İçi SEO

Detaylarıyla Site İçi SEO Detaylarıyla Site İçi SEO Merhabalar, Bu E-Kitap ta Google ve ziyaretçiler tarafından üst düzey bir öneme sahip olan, bir web sitesi için kurgulanması gereken tasarımsal, içeriksel ve kodsal site içi SEO

Detaylı

Uzaktan Eğitim Kullanma Klavuzu

Uzaktan Eğitim Kullanma Klavuzu Uzaktan Eğitim Kullanma Klavuzu Uzaktan Eğitim Kullanma Klavuzu uzem.rumeli.edu.tr 1 Uzaktan Eğitim Kullanma Klavuzu uzem.rumeli.edu.tr İçindekiler 1.1. SIKÇA SORULAN SORULAR... 3 1.1.1. Sisteme giriş

Detaylı

JavaScript Örnekleri PDF

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

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ı

Uzaktan Eğitim Uygulama ve Araştırma Merkezi

Uzaktan Eğitim Uygulama ve Araştırma Merkezi JAVA PROGRAMLAMA Öğr. Gör. Utku SOBUTAY İÇERİK 2 Java Kodlarına Yorum Satırı Eklemek Java Paket Kavramı Java Kütüphane Kavramı Konsoldan Veri Çıkışı ve JOPtionPane Kütüphanesi JOptionPane Kütüphanesi Kullanarak

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ı

HTML 5 ve CSS 3. Yrd. Doç. Dr. Murat Olcay ÖZCAN

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

Detaylı

WEB SİTESİ YÖNETİM PANELİ KULLANMA YÖNERGESİ

WEB SİTESİ YÖNETİM PANELİ KULLANMA YÖNERGESİ WEB SİTESİ YÖNETİM PANELİ KULLANMA YÖNERGESİ Web Sitesi Yönetim Paneli, Üniversitemiz web sitesinde, birimlerimize ait web sitelerindeki içerikler üzerinde ekleme, silme, değiştirme gibi güncelleme işlemlerini,

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ı

WEB SİTESİ YÖNETİM PANELİ KULLANMA YÖNERGESİ

WEB SİTESİ YÖNETİM PANELİ KULLANMA YÖNERGESİ WEB SİTESİ YÖNETİM PANELİ KULLANMA YÖNERGESİ Web Sitesi Yönetim Paneli, Üniversitemiz web sitesinde, birimlerimize ait web sitelerindeki içerikler üzerinde ekleme, silme, değiştirme gibi güncelleme işlemlerini,

Detaylı

PHP'ye Giriş Türkiye PHP Grubu - Linux Şenlikleri PHP Eğitim / Tanıtım Seminerleri Ankara, 11 Mayıs 2006 Hidayet Doğan <hdogan@hido.

PHP'ye Giriş Türkiye PHP Grubu - Linux Şenlikleri PHP Eğitim / Tanıtım Seminerleri Ankara, 11 Mayıs 2006 Hidayet Doğan <hdogan@hido. PHP'ye Giriş Türkiye PHP Grubu - Linux Şenlikleri PHP Eğitim / Tanıtım Seminerleri Ankara, 11 Mayıs 2006 Hidayet Doğan PHP Nedir? Genel kullanım amaçlı bir betik/programlama dilidir.

Detaylı

BÖLÜM 5. HTML Biçimleme Belirteçleri

BÖLÜM 5. HTML Biçimleme Belirteçleri BÖLÜM 5 HTML Biçimleme Belirteçleri 12. Genel Bakış 12.1 Giriş Paragraflar, başlıklar, veya listeler için bir HTML belirtecini kullandığınızda, o belirteç sadece kullanıldığı alandaki yazıları belirlenen

Detaylı