HTML5 Tanıtımı, DOCTYPE Bildirimi çok Basitleştirildi Karakter ...

Có thể bạn quan tâm

ANASAYFA

HTML
- HTML'e Giriş

HTML5
- HTML5 Tanıtımı
- HTML5 Web Depolama

JAVASCRIPT
- javascript nedir

JQUERY
- jQuery Giriş

PHP
- PHP'ye başlangıç
- PHP ve Değişkenler
- Echo ve Print komutları
- Php Veri Türleri
- PHP ile dosya yükleme upload
- PHP dosya listeleme sayfalara bölme

ASP
- ASP'ye giriş başlangıç
- ASP'de Değişkenler
- ASP de Function ve Sub kullanımı
- ASP Koşullu ifadeler If Else Select

BOOTSTRAP

CLASS
- php PDO türü veritabanı sınıfı
- PDO ile Mysql veritabanı içe ve dışa aktarmak

ARAÇ-GEREÇ
- JS ve CSS dosyalarını küçültme aracı Minify

DERSLER
- Youtube canlı yayını çekmek
- İnternet Information Services IIS kurulumu
- XAMPP Apache server Mysql kurulumu
- Apache dağıtımı WampServer Kurulumu
- Youtube arama verilerini çekmek
- PHP ve Upload progress bar ilerleme çubuğu

VİDEOLAR
- Google'dan YouTube Data API v3 kimliği almak

HTML5 Tanıtımı 30 Kasım 2016, 19:25

HTML5 Tanıtımı

HTML5 'le bazı yeni etiketler hayata girdi bazı etiketler ise kısaltılıp daha anlaşılır ve kolaylaştırıldı evet ama dikkat etmemiz gerek bazıları da geçersiz oldu eski bildiğimiz bazı etiketler bu sürümde artık kullanılmayacak bu yüzden eğer HTML5 ile uyumlu sayfalar tasarlıyorsak bunlardan kaçınmamız gerekli.HTML5 için DOCTYPE bildirimi çok basitleştirildi.<!DOCTYPE html>Karakter kodlaması (charset) bildirimi de çok basit oldu.<meta charset="UTF-8">Basit bir HTML5 örneği<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Sayfa başlığı</title> </head> <body> diğer kodlarımız </body> </html>KopyalaYeni HTML5 etiketleri arasında en ilgi çeken yeni HTML5 etiketleri şunlardır.Body içerisinde kullanacağımız en faydalı olanları <header>, <footer>, <article>, ve <section>.Form tagına eklenen en faydalı olanları number, date, time, calendar, ve rangeGrafik işlelerinde hatta grafikler çizebileceğimiz <svg> ve <canvas>Multimedya işlelerinde çok faydasını göreceğimiz <audio> ve <video> HTML4'te kullandığımız ancak HTML5'te desteklenmeyen Etiketler var bazılarına CSS veya başka yöntemlerle eskiden yaptığımız işlemi yinede yaptırabiliyoruz bunlar aşağıdaki tabloda belirtilmiştir.

Kaldırılan Etiket	Alternatif kullanım
<acronym>	<abbr>
<applet>	<object>
<basefont>	CSS kullanın
<big>	CSS kullanın
<center>	CSS kullanın
<dir>	<ul>
<font>	CSS kullanın
<strike>	CSS, <s>, veya <del>
<tt>	CSS kullanın
<frame>	Kaldırıldı
<frameset>	Kaldırıldı
<noframes>	Kaldırıldı

Tablodaki bu etiketler IE 9 öncesi sürümlerde desteklenmez eğer sitenizi kullanan ziyaretçiler arasında eski tarayıcı kullananlar varsa bir alternatif olması için HTML5Shiv adında script geliştirilmiş IE9'dan önceki Internet Explorer sürümlerinde HTML5 öğelerinin stilini etkinleştirmek için bir JavaScript çözümü olan bu dosyayı <head> etiketi içine dahil etmeniz yeterli https://github.com/aFarkas/html5shiv adresinden son sürümü indirebilirsiniz veya dosyayı kendi sitenizde depolamak istemiyorsanız bir CDN (içerik dağıtım ağı) sitesinde bulunan sürüme başvurabilirsiniz adresihttp://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.jsKopyalaHead etiketinde şu şekilde kullanılır ve sadece IE9 öncesi tarayıcılar tarafından okunur.<head>  </head>Kopyaladikkat ettiyseniz burda <!--[if lt IE 9]> ile if else gibi işlemleri html içinde yapmış oluyoruz ve tarayıcı sürümüne göre dosyayı dahil ediyoruz veya etmiyoruz

HTML5 ile gelen tüm yeni etiketler

Aşağıdaki tabloda yeni HTML5 etiketlerin listesini ve bunların kullanım açıklamaları yer almaktadır.

Etiketler	Açıklama
<article>	Belgede bir makaleyi tanımlar
<aside>	İçeriği sayfa içeriğinden ayırır
<bdi>	Başka bir metinden farklı bir yönde biçimlendirilebilen bir metin parçasını tanımlar
<details>	Kullanıcının görüntüleyebileceği veya gizleyebileceği ek ayrıntıları tanımlar
<dialog>	Bir iletişim kutusu veya pencere tanımlar
<figcaption>	<figure> öğesinin başlığını tanımlar
<figure>	Resim, diyagram, fotoğraf, kod listeleri vb. Gibi kendine yeten içeriği tanımlar.
<footer>	Belge veya bölüm için altbilgi tanımlar
<header>	Belgenin veya bölümün üstbilgisini tanımlar
<main>	Belgenin ana içeriğini tanımlar
<mark>	İşaretli veya vurgulanmış metni tanımlar
<menuitem>	Kullanıcının bir açılır menüden başlatabileceği bir komut / menü öğesi tanımlar
<meter>	Bilinen bir aralıkta bir ölçümü tanımlar (bir gösterge)
<nav>	Belgedeki gezinme bağlantılarını tanımlar
<progress>	Görevin ilerleme durumunu tanımlar
<rp>	Ruby ek açıklamalarını desteklemeyen tarayıcılarda neyin gösterileceğini tanımlar
<rt>	Karakterlerin açıklaması / telaffuzunu tanımlar (Doğu Asya tipografisi için)
<ruby>	Yakut açıklaması tanımlar (Doğu Asya tipografisi için)
<section>	Belgede bir bölüm tanımlar
<summary>	<details> öğesi için görünür bir başlığı tanımlar
<time>	Bir tarih / saat tanımlar
<wbr>	Olası bir satır sonunu tanımlar
Form Etiketleri	Açıklama
<datalist>	Giriş kontrolleri için önceden tanımlanmış seçenekleri tanımlar
<keygen>	Bir anahtar / çift jeneratör alanı tanımlar (formlar için)
<output>	Bir hesaplamanın sonucunu tanımlar
Yeni Form inputları	Yeni input Öznitelikleri
color	autocomplete
date	autofocus
datetime	form
datetime-local	formaction
email	formenctype
month	formmethod
number	formnovalidate
range	formtarget
search	height ve width
tel	list
time	min ve max
url	multiple
week	pattern (regexp)
placeholder
required
step
Grafik Etiketleri	Açıklama
<canvas>	Komut dosyası (genellikle JavaScript) vasıtasıyla grafik çizme
<svg>	Ölçeklenebilir vektör grafikleri çizme
Medya Etiketleri	Açıklama
<audio>	Ses içeriğini tanımlar
<embed>	Harici uygulamalar için kontörleri (eklentiler gibi) tanımlar
<source>	<audio> ve <video> için kaynakları tanımlar
<track>	<audio> ve <video> için parçaları tanımlar
<video>	Video veya film içeriğini tanımlar

Üstteki tabloda Yeni Form inputları ve Yeni input Öznitelikleri olan yerdeki açıklamalar biraz karmaşık gelebilir diye bu konuda kısacık bir açıklama yapayım.Yeni Form inputları icinden number kullanım şu şekildedir <input type="number"> bu sayede input elemanımız sadece sayılar girilebilir olur ve yukarı aşağı ok işaretleri belirerek arttırılabilir veya azaltılabilir bir hale dönüşecektir.Yeni input Özniteliklerinden autocomplete şu şekilde kullanırız <input type="email" name="email" autocomplete="off"> böylelikle bu inputa asla tarayıcı tarafından daha önce kaydedilmiş bir veri otomatik tamamlanmaz.Diğer yazılarımda bu etiketlerin teker teker detaylı açıklamalarına yer vereceğim şimdilik yeniliklerin neler olduğunu anlamak adına bu makale yeterlidir diye düşünüyorum etiketlerin daha detaylı anlatımları tabi ki yeni makaleler gerektiren bir durum yoksa bu sayfanın sonu gelmeyeceğini siz de anladınız sanıyorum.Başka bir yazıda görüşmek dileği ile kalın sağlıcakla... PDF dosyası olarak kaydet

Paylaş Tweetle

HTML5 Tanıtımı Yorumları:

Bu yazıya toplam 1 yorum yapılmış.Toplam 1 sayfa yorum var, Gösterimde olan yorum sayfası 1

11 Mart 2019, 10:33Nihat beyi yazdı:Cevapla emegizine saglık cok guzel anlatım olmus..

Yorum yaz. Bağlan Bağlan Bağlan Yorumunuza cevap yazilmasi durumunda bildiri almak istiyor musunuz? Hayır. Evet. [Mail adresiniz gizli tutulacaktır].

Son Renkler
- PHP ve Upload progress bar ilerleme çubuğu
- PHP ile dosya yükleme upload
- Php Veri Türleri
- HTML5 Web Depolama
- PDO ile Mysql veritabanı içe ve dışa aktarmak
- PHP dosya listeleme sayfalara bölme
- Google'dan YouTube Data API v3 kimliği almak
- JS ve CSS dosyalarını küçültme aracı Minify
- Youtube arama verilerini çekmek
- Apache dağıtımı WampServer Kurulumu

Son Yorumlar
- PHP ve Upload progress bar osman 16 Şubat 2024, 10:45Teşekkürler....
- PHP ile dosya yükleme uploosman 16 Şubat 2024, 10:44gayet açıklayıcı bilgilendirme.teşekkürler....
- Youtube canlı yayını çeFREDDY9 25 Ocak 2024, 10:17....
- Php Veri Türlerivzxvczxv 04 Aralık 2023, 02:20[em25x0....
- Youtube canlı yayını çeOğuzhan 14 Temmuz 2023, 06:35Kodları denetiğimde hata alıyorum kod güncelde çalışıyor mu acaba?[em50x....
- PHP ve Upload progress bar [emoj100x75] 22 Kasım 2022, 11:59[....
- Echo ve Print komutlarımeku 24 Ekim 2022, 03:43MAGİ....