HTML5 Nedir? Nasıl Kulllanılır? HTML5 ile Gelen Yenilikler

HTML5 Nedir?

HTML internet ortamındaki yazılım dillerinden biri olup HTML yazı dilinin en son sürümüdür. Sizler için nasıl HTML5 nedir ve nasıl kullanılır onları derledik.

HTML dili web sitesinin temelini oluşturur. HTML yazı dilinin en sürümüdür HTML5. HTML dilini geliştirip ortaya çıkaran kişi CERN mühendisi Timothy John Berners Lee dir. HTML in genel görevi web sitelerde video, görüntü ve yazı verilerin bulunmasını sağlamaktır. HTML kodları yazıldıktan sonra tarayıcı tarafından okunarak web sitenize aktarılır.

HTML5 de bir web sitesi oluşturmak için kullanılan hiper-metin işaretleme dilinin sonuncusudur. Önceki sürümlerle aynı gibi gözüksede aralarında farklar vardır. HTML5’de dahili ses oynatma, Yeni gelen form eklentileri, Çoklu Ortam Etiketleri ve Semantik Elementler gibi birçok yenilikler HTML5 ile getirildi.

HTML5 Nasıl Kullanılır?

HTML5 önceki sürümlerle neredeyse aynıdır sadece yeni taglar,eklentiler vs gelmiştir kodu yazmadan önce kafanızda akışı kurup gerekli kodlarla akışı sağlamaktır. HTML5 ile gelmiş olan yeniliklerde video oynatabilme, daha düzenli ve anlaşılabilir kodlama ve çevrimdışı önbellek özelliği vardır. Bu özellik sayesinde internetiniz olmasa bile HTML çalışabilirsiniz. Ücretli veya Ücretsiz birçok eğitim verilen platformlarda HTML  bilginizi daha çok öğrenebilirsiniz. İlk bölümde her detayı öğrenmek mümkün değildir. Ancak CSS3 ile basit siteler oluşturabilirsiniz.

Web sitesi yaparken 3 ana bölüm vardır bu kısımlar ; Header, Body, Footer kısmıdır.

Header: Header kısmı sitenin en üst kısmıdır ve bu alanda genellikle menü olur.
Body: Sitenin ortasıdır asıl tasarımın videoların fotoğrafların eklendiği yerdir.
Footer: Sitenin en alt bölümünü ifade eder bu alanda genellikle sayfalara ulaşmak için likler ufak bir hakkımızda kısmı ve ulaşmak için telefon numaraları veya E-postalar koyulur.

HTML’de açılan her tag kapatılmak zorundadır. Aksi halde eklenilen diğer taglar asla çalışmaz. Günümüzde HTML kullanılırken artık Visual Studio Code, Visual Studio, Notepad++ gibi uygulamalarda günümüz teknolojisinde güncellenen programlardır. Ve bu programlarda eğer kodunuzda bir hata varsa eğer içlerinde bulunan yapay zeka bunu anlayıp sizlere gösterip kolayca çözmenizde yardımcı oluyorlar. Sadece hata tespit deyil kodu “<” ile başlayıp yazmaya başlarken yazmak istediğiniz Tag’ın veya Kodun baş harfini yazıyorsunuz yapay zeka otomatik tamamlamaya yardımcı oluyor. Bitirirken “>” kapatmanız gerekiyor yoksa eklediğiniz diğer kodlar çalışmaz.

HTML5 ile birlikte gelen html kodları;

YENİ HTML5 TAGLARI

< article >	Herhangi bir Belgedeki makaladeki çekmek için kullanılır.
< aside >	Sayfadan ayrı olan bir bağımsız içeriği tanımlar.
< command >	İçinde bulunan sayfanın komutunu temsil eder.
< details >	Belge içinde gizli bilgiyi açıp kapatmak için kullanılır.
< dialog >	Sayfanıza İletişim kutusu tanımlamak için kullanılır.
< figacaption >	< figure > tagı içindeki resmin yazısını tanımlar.
< figure >	Bağımsız olan içeriği tanımlar.
< footer >	Sitenizdeki en alt bölümü ifade eder.( footer ve alt bilgi)
< header >	Sitenizdeki en üst bölümü ifade eder.( header ve üst bilgi)
< main >	Sayfaya ait ana içeriği tanımlar.
< mark >	Yazdığınız yazıyının arkasını sarı yapar vurgular.
< nav >	Sayfadaki navigasyonve menü linklerini belirtir.
< progress >	Bir belgede bir işlemin yüzde ne kadar tamamlandığını gösterir.
< section >	Sayfada bulunan bağımsız bölümü tanımlamak için kullanılır.
< summary >	Belge içinde görünür başlık yapmak için kullanılır.
< time >	tarih ve saati ayarlamak veya tanımlamak için kullanılır.

YENİ HTML5 MEDYA ÖĞELERİ

< audio >	Sayfada ses içeriğini tanımlar.
< embed >	Web dışı harici bir uygulamayı web sayfasına eklemek için bir çerçeve tanımlar.
< source >	Medya dosyalarının farklı alternatiflerini belirtmek için kullanılır.
< track >	Vidyo veya ses dosyalrı için metin içeriklerini belirtmek için kullanılır.
< video >	Video içeriğini göstermek için kullanılan bir tagtır.

YENİ HTML5 GRAFİK ÖĞELERİ

< canvas >	Dinamik grafikler, göreseller ve diğer çizimler olturmak için kullanılır.
< svg >	Scalable Vector Graphics(SVG) web sayfalarında çeşitli grafikler ve interaktif grafiksel öğeleri oluşturmak için kullanılır.

HTML5 ile gelen bir diğer konular Mikro Veri Özelliği ve Gelişmiş CSS3 Desteği;

Mikro Veri(Mikro Data) nedir?

Mikro Data dilimizdeki adıyla Mikro veri olan özellik öne çıkarmak istediğiniz metni diğer metinler arasından daha kolay bir şekilde tarayıcı botları tarafından anlaşılıp önçe çıkarılmaya yarayan html kodlama sisteminin bir parçasıdır.

Mikro Veri(Mikro Data) Ne İşe Yarar?

Temel olan Mikro Veri web sitenize gizli bir şekilde eklene bilen bir HTML kodudur. Mikro veri arama motorları tarafından web site içeriklerinizi daha iyi, daha kolay, iyi anlaşılmasını ve daha iyi bir sınıflandırma sağlamak için kullanılır. Mikro veriler Web sitenizin SEO(Search Engine Optimization) kullanılmaya başlamıştır. Kullanılmasındaki amacı Mikro Verinin amacı kullanıcılara daha iyi anlayabilme, güzel bir sınıflandırma ve daha iyi bir deneyim sunmaktadır.

Mikro veri (Microdata) Nasıl Yapılır?

Arama yaparken arama motorları, kullanıcının aradığı kelimelere göre bize sonuçlar buldurur. Bu arama yapılırken kullanıcının ne arattığını ifade eden cümlelerde anahtar kelimeler bulunur. Kullanıcının aradığı anahtar kelimeler ile eşleştiği haraketiyle ilerler. Ancak kelimelerin türünü ne olduğunu anlayamazlar, bu durumda sınıflandırma yapamazlar. Kelimelerin anlamı ve kategorisine göre gruplanabilmesi için mikro veri HTML kolaması kullanılır. JSON, RDFa vb. gibi yöntemlerle yer alır.

Bir Excel dosyası oluşturduğunuzu düşünün, bir hücre oluşturduğunuz zaman özelliğe göre tarih, sayı, para birimi gibi değerlere dönüştüğünü görürsünüz. Burada nasıl sınıflandırıldığını görebiliriz. Web’de bunu yapabilmek için Mikro veri kodu kullanılır ve sınıflandırmada yardımcı olur.

Gelişmiş CSS3 Desteği;

HTML5 ile gelen bir diğer özelliklerden bir taneside Gelişmiş CSS3 Desteğidir ve CSS3, CSS’in en son sürümüdür. CSS(Cascading Style Sheets) web sitelerinde görsel şölenlik katmayı sağlayan format biçimidir. HTML’e kıyasla daha cezbedici tasarımları ortaya koyar ve daha fazla cezbedici tasarımlar yapmak için tek engel siteyi tasarlayan kişidir. HTML ile CSS’i sadece tek bir sayfada kullanılması zorunlu deyildir. Ayrı bir CSS dosyası açıp işlem yapılabilir. Ancak bu artık dünyamızda bir eseçek haline gelmiştir. CSS’leri ayrı dosyalar halinde saklamak bizi tekrar tekrar HTML yazma yükünden kolayca arındırır.

CSS’de web belgelendirme stilleri yazı tipi, renkler, yazı boyutları, boşluklar v.b. eklemek için kolay bir makinadır.

CSS3 Bazı Avantajları:

CSS3 web geliştirmede çözümü tek olmasada çeşitli avantajlar sunuyor.

– Kolay bir şekilde özelleştirme sunuluyor.

– Video ve ses ler siteyi daha çekiçi hale getirmektedir.

– Öğelerin doğru yerlere konumlandırmasını sağlamak siteyi daha güzel cezbedici tasarım çıkarır ve kullanıcı tarafından güzel karşılanır.

– Kullanıcı tarafınfan görsel şölenlik ve ayarlamalar yapmaya yardımcı olur.