HTML
HTML Video Altyazı Ekleme
HTML 5 ile gelen html video formatında < track > yapısı ile alt yazı eklememiz mümkün olmuştur. Bu şekilde altyazılı video versiyonlarını her alt yazı için değiştirmek zorunda kalmıyoruz. İnternet video sistemini kökünden değiştiren bu yapı için ; < track > . . . . . . . . . . . . < /track > yapılarını kullanıyoruz. Örnek: <video> <source src="https://www.cagrigungor.com/wp-content/uploads/2019/08/deniz.mp4" type="video/mp4"> <track src="altyazi-eng.vtt" kind="subtitles" srclang="en" label="English"> </video>
HTML HEX PNG ve CSS ile Türk Lirası TL Sembolü
Türk lirası para birimi için bir çok formatta hazırlanmış kodlar bulunmaktadır. Belirli bir süredir uluslararası sisteme de girmiştir. Bu yazı içerisinde TL ayni türk lirasının başta png ve jpg versiyonları olmak üzere svg hex html css gibi bir çok tarzda çıktısını bulabilirsiniz. HTML ile Türk Lirası TL Sembolü HTML kodları arasına türk lirası sembolünü göstermek için özel hazırlanmış kod parçacığını kullanabiliriz. Bu kod tüm web sitelerinde tüm dünyada bir harf gibi görünebilecektir. HTML Türk Lirası: ₺ Örnek: <span style="font-size:124px;"> ₺ </span> Önizleme: ₺ CSS ile Türk Lirası Sembolü CSS ile de Türk lirası sembolü oluşturabiliriz. Bunun için kullanacağımız kod ise; \20BA span { content: "\20BA"; } HEX ile Türk Lirası Sembolü Hex kodlar...
HTML 5 Video Ekleme
HTML 5 ile gelen en önemli özelliklerden birisi html içerisinde başka bir yazılıma gerek kalmadan video ekleyebilmekti. Bu web sayfalarının performansını arttırmakta büyük etki yarattı. Yeni nesil web sayfalarının büyük bir çoğunluğu html 5 video kullanımına geçtiler. HTML5 video eklemek için; < video > . .. . . . . . . . . < / video > kodlarını kullanırız. Örnek: <video> <source src="https://www.cagrigungor.com/wp-content/uploads/2019/08/deniz.mp4" type="video/mp4"> </video> Önizleme: HTML Hangi Video Formatlarını Destekler ? Şu an için html 5 sadece üç tip video formatını desteklemektedir. Bunlar; MP4 OGG WEBM HTML 5 Video Autoplay Otomatik Başlatma Özelliği HTML 5 ‘de video eklerken bu videonun otomatik olarak başlamasını istiyorsak R...
HTML Türkçeleştirme Türkçe Karakterleri Destekleme
HTML kodları yalın haliyle yazıldığı zaman Türkçe karakterlerde içerisinde olmak üzere bir çok yapıyı çalıştırmaz. Bu problemlerden kurtulmak için en geniş kapsama sahip olan karakter setlerinden biri olan UTF8 karakterlerini kullanabiliriz. HTML Türkçeleştirme Html türkçeleştirme için < head > kodları arasına < meta charset=”” > yapısı ekleriz. Örnek: <head> <meta charset="utf-8"> </head>
HTML ‘de ID Kullanımı
HTML’de class ve id yapıları birbirlerine çok benzerler ancak id yapıları ancak bir kez kullanılabilirler yani tekildir. Ayrıca id niteliğini Javascript kodları için de kullanabiliriz. Class hakkında yazımızı okuyabilirsiniz. HTML de Class Yazma ve Kullanımı Örnek: <h1 id="anasayfabaslik">Ana Sayfa Başlığı</h1> Class yapılarını css kodlarında yazarken başına nokta koyuyorduk. id yapılarıda ise hashtag ekleriz. <style> #anasayfabaslik { background-color:tomato; padding-top:30px; } </style>
HTML’de Class Yazma ve Kullanımı
HTML içerisinde html elentlerine daha önce belirli stiller vermiştik. Bu sitiller ile ilgili yazımızı HTML İçerisine CSS Yazma ( Stiller ) okuyabilirsiniz. HTML elementleri içerisine style yazmak yerine aynı özelliği gösteren elementlere tek bir kere bu stilleri vermek için class yapısını kullanırız. Yani belirli elementleri sınıflandırırız. Bu yapı için class= ” ” ek niteliğini kullanırız. Örnek: <h1 class="yazi-baslik" > Yazıların Başlığı Burada</h1> Yukarıdaki gibi bir class yapısını kullanarak artık her başlık oluşturduğumuzda tekrar html içerisinde nitelik olarak style yazmamıza gerek olmayacak en başta tasarladığımı şekilde kullanabilceğiz. Bunları yapabilmek için CSS kodları yazabilmeyiz. CSS kodlarını ise html içerisinde bulunan < head > ……...
HTML’de Block ve Satır Elemanları
HTML’de bazı elemanlar aynı satırda bulunma , eklendiği satırda kalma eğilimindedir. Bazı elemanlar ise kendine ait satırda yalnız kendisi kalmak ister. Bunları html dilinde Block Elements : kendine ait blok oluşturanlar Inline Elements: eklendiği satırda bulunmak isteyenler olarak ikiye ayırıyoruz. Örnek: <span style="color:blue;">Mavi</span> <span style="color:green;">Yeşil</span> <span style="color:yellow;">Sarı</span> Önizleme: MaviYeşilSarı Yukarıdaki örnekte span elemanını kullandığımız için her bir yazı yan yana geldi. Kod yazarken boşluk ve satır bırakmamız sonucu değiştirmeyecektir. Çünkü < span > bir inline elemandır. Örnek : <h3 style="color:blue;">Mavi</h3> <h3 style="color:green;">Yeşil</h3> <h3 ...
HTML Liste Oluşturma
HTML’de çeşitli biçimlerde listeler oluşturmamız mümkündür. Ayrıca html listelerini web sayfalarına menü yaparken de çok sık kullanırız. HTML’de liste yapımı için ; < ul > ………. < / ul> – Listeli Sıralama < ol > ………. < / ol> – Sayılı Sıralama etiketlerini kullanırız. listenin elemanları için ise; < li > ….. < / li> yapılarını kullanabiliriz. Örnek: <ul> <li>HTML</li> <li>CSS</li> <li>JS</li> <li>PHP</li> <ul> Önizleme: HTML CSS JS PHP HTML Liste <ul> ile <ol> Farkı HTML de listeler numaralandırılmış ve numaralandırılmamış olarak iki farklı şekilde listelenebilmektedir. ol ve ul yapılarıda isimlerini bu ingilizce...
HTML Tablo Oluşturma
HTML’de tablo oluşturmak ve tabloları iyi bir şekilde kullanmak oldukça önemlidir. Hatta eski tarz web sitelerinde div yapıları yerine tablolar kullanılıyordu. Ancak günümüzde tablolar sadece tablo yapmak amacıyla kullanılmaktadır. Tablo oluşturmak için ilk adım ; < table > ……… < /table > etiketlerini oluşturmaktır. Örnek: <table> </table> Tablolarda Satır Oluşturma Tablo oluşturma mantığında satır oluşturmak ilk sırada gelir daha sonra satırlar içerisine sütunlar oluşturmamız gerekmektedir. Tablolarda satır oluşturmak için Table Row (Tablo satırı) kısaltması olan < tr > yapıları kullanırız. <table> <tr> </tr> <tr> </tr> </table> Tablolarda Sütun Oluşturma Yukarıdaki örnekte tablomun iki satırı bulunm...
HTML Görsel ve Fotoğraf Ekleme (img)
Web sitelerinin tasarımlarının güzel olmasında en önemli etken kaliteli görsel kullanılması ve bu görsellerin doğru bir şekilde kullanılmasıdır. Web sayfalarının görünümleri ve kullanım kolaylığı hakkında olan eğitimlerimize de UX UI Eğitimi göz atabilirsiniz. HTML’de görsel eklemek için < img > etiketini kullanıyoruz. < img > etiketi diğer bir çok html etiketinden farklı olarak sadece açılış etiketine sahiptir. Kapanış etiketi kullanmayız. Ayrıca görseli kaynağından çekmesine yardımcı olan src=”resimadresi “ niteliği kullanılmalıdır. Örnek: <img src="shaman.jpg" > Önizleme: < img > etiketinin içerisinde width=”” ve height=”” gibi öz nitelikler bulunmaktadır. Bunlar sayesinde görsellerin genişliklerini ve yüksekliklerini aya...
HTML ile Link Oluşturma
HTML’de sayfalar arasında bağlantı kurmak çok önemlidir. Çünkü yeni nesil web siteleinin büyük çoğunluğu birden fazla sayfadan oluşmaktadır. Ayrıca web sitelerine dış link dediğimiz farklı web sayfalarına yönlendirmeler de yapmaları gerekmektedir. Bunlar için köprü yapıları oluşturan HTML Link Ekleme < a href = ” Web Sitesi adresi “ > Bağlantı Metni < / a > yapılarını kullanıyoruz. Örnek: <a href="https://www.cagrigungor.com"> Çağrı Güngör'ün Web Sitesi</a> Önizleme: Çağrı Güngör’ün Web Sitesi Yukarıdaki örnekte de gördüğünüz gibi web < a > yapısını kullanırken attribute yani ek özellikler kullandık bu ek özellik href =” ” özelliğiydi bu yapı yönlendirilecek bağlantıyı göstermektedir. Nofollow ve Dofollow Link Yapımı HTM...
HTML ile CSS Yazma
HTML ile oluşturabildiğimiz kodların her geçen gün işlevleri artıyor. Ancak hala profesyonel ve modern görünümlü yeni nesil bir web sitesi yapabilmemiz için ek yazılımlara ihtiyaç duyuyoruz. HTML’in web sitesi yapımında en büyük iki ortağı; CSS Javascript Kodlarıdır. Bu dersimizde CSS kodlarını kullanmanın ilk adımı olan HTML içerisinde CSS kodları nasıl yazılır konusunu işleyeceğiz. HTML içerisinde style ek niteliğini kullanmayı öğrenmiştik. Tekrar etmek isteyenler için; HTML İçerisine CSS Yazma ( Stiller ) Şimdi ise html etiketlerinin içerisinde değilde < head > kodları arasında sadece CSS yazmak için özel bir alan oluşturacağız. CSS kodlarını html’de < style > ……………. < / style > kodları arasına yazmaktayız. Örnek: <!DOCTYPE...
