HTML

Temel HTML Dersleri İle HTML Kodlarının Ne İşe Yaradığını Ve Nasıl Kullanıldığının Temel Mantığını Öğreneceğiz.

HTML5 Canvas Etiketi ( 18.Ders Canvas İle Metin Oluşturma )

Canvas Etiketimizle metin yazdırmak için 2 seçeneğe bakacağız biri dolgulu yazım biçimi FillText metodu diğeri içi boş strokeText metotlarıyla canvas alanımıza metin ekleyeceğiz. İlk Olarak Canvas alanımızı belirliyoruz. <canvas id="resimalani6" width="500" height="500" style="border:1px solid #000000"></canvas> Oluşturduğumuz canvas alanına id=”” ile mutlaka tanımlayıcı bir isim oluşturmamız gerekiyor JavaScrip ile kodlarımızı bu alanda göstermek …

Daha fazla oku & raquo;

HTML5 Canvas Etiketi ( 17.Ders Canvas İle Renklendirmeler)

<canvas> Etiketimizle Renklendirmeler Yapacağız Bunun İçin 2 Metot Kullanacağız biri Düz Renk Geçişleri Sağlayacağımız createLinearGradient diğeri oval geçiş sağlayabileceğimiz createRadialGradient metotlarımızla renklendirmeler yapacağız. Fazla Uzatmadan hemen örneğimize bakarak nasıl renk geçişleri sağlayacağımıza bakalım.. Gradient Kullanımları createLinearGradient(x,y,x1,y1) createRadialGradient(x,y,r,x1,y1,r1) İlk Olarak Canvas alanımızda düz geçişleri sağlayacağımız createLinearGradient metodumuzu kullanalım bunun için Canvas İle Bir Çalışma Alanı …

Daha fazla oku & raquo;

HTML5 Canvas Etiketi ( 16.Ders Canvas İle Çember ve Oval Cizimler )

<canvas> Etiketimizle Çember ve Oval Çizimler İçin arc Metodumuzu Kullanıyoruz Bu Metotları JavaScript Derslerimizde Tekrar Ederek ve Çeşitli Metotları Öğrenerek Daha Güzel Tasarımlar Oluşturabiliriz. arc(x,y,r,start,stop) metodunda tanımlamamız bu şekilde olacak İlk Olarak Canvas İle Bir Çalışma Alanı oluşturalım <canvas id="resimalani3" width="500" height="500" style="border:1px solid #000000"></canvas> Oluşturduğumuz canvas alanına id=”” ile mutlaka tanımlayıcı …

Daha fazla oku & raquo;

HTML5 Canvas Etiketi ( 15.Ders Canvas Yol Belirleme )

<canvas> Etiketimiz İçinde Çizim Yollarını Belirlemek için Hemen Örneğimize Geçelim İlk Olarak Canvas İle Bir Çalışma Alanı oluşturalım. <canvas id="resimalani2" width="500" height="500" style="border:1px solid #000000"></canvas> Oluşturduğumuz canvas alanına id=”” ile mutlaka tanımlayıcı bir isim oluşturmamız gerekiyor. JavaScrip ile kodlarımızı bu alanda göstermek için bu isimi kullanacağız. width=”” height=”” style=”” ile …

Daha fazla oku & raquo;

HTML5 Canvas Etiketi ( 14.Ders Canvas İle Çalışma Alanı Oluşturma)

Canvas İle Çalışma Alanı Oluşturma

<canvas> Etiketimiz web sayfalarında çeşitli grafikler oluşturmamıza ve geometrik çalışmalar yapabilmemiz için div gibi çalışma alanını belirleyen tutucudur . Canvas etiketimizi resim yapmak için kullandığımız boş bir sayfa olarak düşünebilirsiniz bunun üzerine resimi yapabilmek için bir ressama ihtiyacımız var buda javascript veya buna benzer kodlama dilleri olabilir. Javascrip Bildiğinizi varsayarak …

Daha fazla oku & raquo;

HTML5 Embed Etiketi ( 12.Ders İçerik Çekme )

bilgebank logo

<embed> Etiketimizle Sayfanız Dışında Başka Bir Sayfadan veya Alandan Kaynak, İçerik, Eklenti Gibi Birçok Özelliği Sayfamıza Dahil Etmemize Yarayan Etiketimizdir. Diyelim ki Bilgebank Sitemizin Logosunu Sayfanıza dahil etmek istiyorsun <embed> etiketimiz içinde src=” ile çekmek istediğiniz alanın url adresini belirliyorsunuz  height=”” width=”” Değerleri ile de boyutunu ayarlayabilirsiniz.

Daha fazla oku & raquo;

HTML5 Progress Etiketi ( 11.Ders Bar Göstergesi )

html gösterge alanı

<progress> Etiketimiz Bir görevin, işlemin ilerleme veya tamamlanma sürecini görsel olarak göstermemizi sağlayan çok kullanışlı bir etiketimizdir. Etiketimizde 2 Özellik Tanımlamamız Yeterlidir max=”” belitgecimizle Son Durum Değerini value=”” Değerinde İse Mevcut Değerini Belirtebilirsiniz.

Daha fazla oku & raquo;

HTML5 Video Etiketi ( 10.Ders Video Oynatıcısı )

html video oynatıcısı

<video></video> etiketimiz bir HTML belgesinde video elementini oynatmak için kullanılır.  Kullanımı Çok Basit ve Kullanışlıdır. src=”” İle İçeriğimizin Dosya Yolunu Belirtiriz. type=”” İle de Dosya Formatımızı Belirleriz controls=”controls” Komutumuz İle video Özelliğimizin Başlat, Durdur, Ses, İndirme, Tam Ekran Gibi Özelliklerinin Görünmesini Sağlar. autoplay=”autoplay” Komutumuz İle video Özelliğimizin Tarayıcı Açıldıktan Sonra Otomatik Olarak Başlamasını Sağlar. …

Daha fazla oku & raquo;

HTML5 Audio Etiketi(9.Ders Ses Dosyası Oynatıcısı)

mp3 Oynatıcı

Audio etiketimiz isminden de anlaşıldığı gibi ses dosyalarını web sayfalarımızda çalıştırmamıza yarar 3 ses formatını destekler. Ancak tarayıcılarda farklılık gösterebilir desteklediği ses formatları mp3, wav, ogg formatlarıdır mp3 formatı tüm tarayıcılarda sorunsuz çalışır. <audio > <source src="http://www.bilgebank.com/wp-content/uploads/2017/10/Ed-Sheeran-Shape-of-You.mp3" type="audio/mp3"> <p style="color:red;">Tarayıcınız Audio Etiketini Desteklememektedir.</p> </audio> src=”” İle Dosya Yolumuzu Belirtiriz. type=”” İle de Dosya …

Daha fazla oku & raquo;

HTML5 Figure ve Figcaption Etiketleri(8.Ders figure ve figcaption Kullanımı)

Gece uykusu önemlidir

Figure Etiketimiz Article Etiketimizin Tam Tersi Olarak Bu Alanın Resim Alanı Olduğunu Belirtmemiz İçin Kullanılır.. Article Alanımız da İçerik Olarak Yazı Kullandığımızı Tarayıcılara Belirtirken figure Etiketimizle Bu Alanda Resim Alanı Olduğunu Tarayıcılara Belirtiyoruz.. figcaption Etiketimiz İse figure Alanında Oluşturduğumuz Görsele Açıklama Eklememiz İçin Oluşturduğumuz Tanımlama Etiketidir. figcaption İle resim alanlarımızı …

Daha fazla oku & raquo;

HTML5 mark Etiketi (7.Ders Mark Etiketi Kullanımı)

mark Etiketi Yazı Renkelndirme

Mark Etiketi Yazılarınızda ki Dikkat Çekmeniz Gereken Alanları Renklendirmenize ve Önem Kazandırmanıza yarar.. Bu Etiketin Yapmış Olduğu İşlemi Css Kullanarak da yapabilirsiniz .Ancak Bu Özeliği Etiket İçinde Hazırlamanız Hem Sizin İçin Kolaylık Hemde Arama Motorlarının Dikkatini Çekmek İçin Extra Bir Önem, Detay Olduğunu Vurgulamanıza Yarayacak Bir Etiket Olarak Kullanabilirsiniz. <p> Mark Etiketini Yazı içinde Kullanmak İstediğiniz Kelimelerin Başında …

Daha fazla oku & raquo;

HTML5 Datalist Ve Option Etiketleri(6.Ders Seçenek Listesi)

Liste oluşturma

Htm5 ile Gelen Datalist Etiketimiz Bize Açılır Menü Şeklinde Şeçenek Alanı Oluşturmamıza Yarıyor Kullanımı Çok Basit ve Çok Kullanışlıdır. Hemen Örneğimizi Yaparak Daha İyi Anlayalım.. <input list="dersler" placeholder="Lütfen Bir Ders Seçin"> <datalist id="dersler"> <option value="Web Tasarımı"> <option value="Programlama"> <option value="Veritabanı"> <option value="Veritabanı Organizasyonu"> <option value="Nesne Tabanlı Programlama"> <option value="Bilişim Teknolojileri"> <option …

Daha fazla oku & raquo;

HTML5 Details Ve Summary Etiketleri(5.Ders Açılır Kapanır İçerik)

HTML5 Details Ve Summary Etiketleri(5.Ders Açılır Kapanır İçerik)

HTML5 ile gelen Details ve Summary etiketleri çok güzel ancak sadece bu özelliği Google Chrome desteklemektedir. Details Ve Summary Etiketleri sayesinde sayfa içindeki uzun yazılarımızı kategorize ve açılır kapanır şekilde hazırlamamıza yarar. Details : Ayrıntılar başlığı altında etiketimizin içindeki içeriği kapalı bir şekilde ekrana yazdırır mause ile üzerine tıklanıldığında açılır ve içindeki içerik ortaya çıkar. …

Daha fazla oku & raquo;