Merhaba,
Bildiğiniz üzere Hyper Text Markup Language kelimelerinin baş harflerinin bir araya gelmesiyle oluşan HTML, bugün dünyanın her yerinde kabul görmüş web tasarım arayüz dilidir.
Bu kelimenin açıklaması "Zengin Metin İşaretleme Dili” anlamına gelir. Metin dediysek aslında, bugün HTML aracılığıyla üç boyutlu çizimlerden video’lara, hareketli resimlerden etkileşimli web elementlerine kadar birçok şeyi muhtevasında barındıran geniş bir yazılım dilini kastediyoruz.
HTML5 ve CSS3’ün
Kadim Dostluğu
Html ile css’in gelişimi paraleldir. Ancak son 5-7 senede css’in daha hızlı gelişim göstermesi, html dizininde hatalar çıkmasına sebep oluyordu. İşte bu hataları bertaraf etmek üzere 2013 yılı başlarında HTML5 piyasaya sürüldü.
HTML de css, php, java gibi açık kaynak kodlu bir dildir. Ve bu özelliği sayesinde hızla bir gelişim gösterip kısa zamanda internet dünyasına yayıldığını söyleyebiliriz.
HTML5 Size Neler
Kazandırır?
HTML5’in en göze çarpan özelliği, şüphesiz kod dizimi hatalarını kendi içinde yorumlayıp siteyi çöktürmemesidir. Bu bağlamda daha esnek ve yorumlayıcı bir dil olduğundan bahsedebiliriz.
Bununla birlikte HTML5 ile hem daha zengin içerik, daha estetik bir tasarım ve arama motoru bot’larını daha çabuk yakalayabilen web siteleri hazırlanabilir oldu.
İsterseniz sizleri teorik bilgiyle daha fazla sıkmadan HTML5 ile internet dünyasının kazandığı yeniliklere kısaca bir göz atalım.
***
<u>: underline(altı çizili) özelliğidir. HTML5 olmasaydı bu tek harflik tag yerine şu kodu yazmak zorunda kalacaktık:
<element style=” text-decoration: underline;”>
<strong>: yazıya bold(kalın) özelliği veren tagdır.
<i>: yazıya italik özelliği kazandırır.
<audio>: Sayfaya ses oynatıcı bir modül eklememizi sağlar.
<aside>: Ana içerikten ayrı yazılan kısmı belirtmek için kullanabileceğimiz tagdır.
<buton>: nesnenin bir buton olduğunu bildirir.
<svg>: SVG “Scalable Vector Graphics” Ölçeklenebilir Vektör Grafikleri anlamına gelir. Bundan da anlaşılabileceği gibi, vektörel çizimlerde kullanabileceğimiz bir elementtir.
<code>: html kodlarından harici kod metni yazmamızı sağlar. Böylelikle yazılan harici kod’un html kodlarıyla karışması önlenmiş olur.
<input>: Kullanıcıdan bir veri girişi (textbox, texarea gibi) olacağı zaman kullanılan objedir.
<output>: Kullanıcıya bir veri çıkışı(label, alert gibi) olacağı zaman bunu tarayıcıya bildirmemizi sağlar.
<article>: Makale anlamına gelen bu tag, uzun metin girdilerinde kullanılır.
<section>: Sitelerin ana içerik kısmını içine alır. Content’lerin içerisini section’larla doldururuz.
<details>: bir elementin ayrıntıları belirtileceği zaman kullanabileceğimiz HTML5 objesidir.
<figure> : Çeşitli medya içeriği gruplarını belirler. Genelde görsel içerikleri tarayıcıya tanıtırken kullanılır.
<figcaption> : Figure elementinin başlığını/açıklama satırını belirler.
<progress>: İlerleme çubuğu anlamına gelen bu tag, bir işlemin ne kadar ilerlediği/ ne kadarı kaldığını belirtir.
<meter>: Bu tagı progress bar gibi düşünebiliriz. Sayısal ya da yüzdelik bir değer belirteceksek kullanabileceğimiz objedir. Aşağıda örnek bir kullanımı görülmektedir.
<p>Sıcaklık şu an;
<meter min="0" max="100"
value="35"> </meter>
35 derecedir.</p>
<canvas>: Sayfada bir tuval alanı oluşturur. Tuvale çizim javascript ile yapılabilir. Bu özelliğin, jquery diline de bir alternatif olduğunu söyleyebiliriz. Çünkü canvas özelliği ile jquery ile yapabileceğimiz tüm hareketli resimleri tek satır jquery kullanmadan HTML5 ile yapmamız mümkün hâle gelmektedir.
<video>:
Video oynatıcı bir modül eklerken kullanabileceğimiz tagdır.
<caption>:
Başlık olarak düşünülen metinleri düzenlememizi sağlayan tagdır.
<header>:
Sitenin başlık ve açıklama içeriğini yazabileceğimiz tagdır.
<nav>: Menüleri ve bir takım zaruri işlevleri içine alır. Sitenin olmazsa olmazlarındandır.
<head>: Site içeriğinin başlangıcı olan “header” kısmının başladığını belirtir.
<footer>: Sitenin en alt kısmını içine alabileceğimiz alanı belirtir.
<embed>: Dışarıdan eklenen
componentler(bileşenler) ve genellikle harici videolarda kullanılır. (Örn :
.swf uzantılı dosyalar)
<details>: Detay bilgisi
içerir.
<summary>: Yazının kısa bir özetini belirtebileceğimiz
HTML5 nesnesidir.
<span>: Türkçede kiriş anlamına gelen bu kelime, bir div içinde divin tamamının etkilenmesini istemediğimiz zamanlarda, sadece küçük bir kelime/resim gibi objelere müdahale edebilmek için kullanılır.
<time>: Tarih, saat verilerini
gösterebileceğimiz objedir.
<mark>: Yazı içerisinde özellikle üstünde durulan
kelimeleri belirler.
<hgroup>: Başlık grubunu
belirtir. H1, H2 gibi başlık elementleri burada tanımlanabilir.
<datalist>: Düzenlenebilir
elementlere otomatik tamamlama özelliği verilmesini sağlar.
<pre>: preview kelimesi(önizleme)‘nin kısaltmasıdır. Bu tag içine yazacağımız her kod, sitenin ana şablonuna dâhil olmayıp, sadece önizlemeden ibaret kalır. Pre tagını kaldırdığımızda kodlar sitenin gerçek arayüzüne dahil olur.
Arama Motorlarının
Tercihi: HTML5
HTML5 taglarının en popüler birkaçını kısaca açıklamaya çalıştık. Unutmayın ki web tasarımınızda bu elementleri(tag) kullanmanız kodlamayı kolaylaştıracağı gibi, arama motoru optimizasyonuna da büyük ölçüde katkı sağlayacaktır.
Çünkü arama motoru bot’ları her zaman için daha sadelik ve
anlaşılırlıktan yanadır. Sayfaları index’lerken önceliği karmaşık bir metin/kod
dizimi yerine daha minimal-homojen yapılara verir. İşte HTML5 ile gelen yeni
özelliklerle de site tasarımcılarının başını ağrıtan bu sorun büyük ölçüde
çözülmüş sayılmaktadır.
Kullanacak arkadaşlarıma şimdiden kolaylıklar diliyorum.
Sonraki yazılarımızda görüşmek üzere, hoşça kalınız J
Rukiye Eğlence
(..) İşte HTML5 ile gelen yeni özelliklerle de site tasarımcılarının başını ağrıtan bu sorun büyük ölçüde çözülmüş sayılmaktadır.
--
#html5 #css3 #2017webTrends #cssTricks #canvas #footer #header #optimization #webDesign #html #SEO #AramaMotoruOptimizasyonu #Content #web #kodlama #optimizasyon #webtrends
http://sosyalith.com/2017/08/15/html5-ile-gelen-yenilikler/
0 comments:
Yorum Gönder