HTML Kullanımı
HTML NEDİR
HTML (Hyper Text Markup Language) Hiper Metin İşaretleme Dilidir. HTML istemcinin (son kullanıcının) gördüğü kısımdır.
Web sitelerin son aşamasının oluştuğu, kullanıcıya sunulan kısmıdır.
HTML ETİKET TANIMLAMALARI
HTML de etiketler işaretleri arasında yazılır. Örneğin <etiket></etiket> “/” işareti ile etiket kapatılmaktadır.
2 çeşit etiket vardır birincisi açılıp kapanan ikincisi ise kendi kendine kapanan etiketlerdir.
1- Açılıp kapanan etiket : <etiket></etiket>
2- Kendi kendine kapanan etiket : <etiket/>
TEMEL HTML ETİKETLERİ
1- <html></html>etiketi diğer tüm etiketleri kapsayan etikettir.
2- Html etiketi altında iki farklı etiket vardır <head></head>ve<body></body>
3- <head> etiketleri arasında kullanıcının görmeyeceği kısımlar yazılır.
4- <body> etiketi arasına ise tamamen kullanıcının göreceği kodlar yazılır.
5- head içerisine yazılan etikettir ve sayfanın başlığını oluşturur.
6- Etiketler içeriğine nitelikler yazılmaktadır örneğin : <etiket nitelik =”abc” nitelikli =”def” >
7- En üst kısma yazılan bir tanımlama mevcuttur <!DOCTYPE html> bununla tarayıcıya html version kaç ile çalışacağını söylüyoruz.
W3C NEDİR?
World Wide Web Consortium (Dünya Çapında Ağ Konsorsiyumu). Bu örgüt html standartlarının dünya çapında ortak olmasını belirleyen tarayıcılarda ve mobilde düzgün bir şekilde çalışmasını amaçlayan bir topluluktur.Ayrıca bu örgüt web sitelerin html diline uygun yazılıp yazılamadığının kontrolünü’de yapmaktadır.( https://validator.w3.org/)
HTML GÖRÜNTÜ SEVİYESİ
Html de iki adet görüntü seviyesi vardır. Bunlardan biri block diğeri inline ‘dir.
<div> block seviyesinde etiket iken <span> inline seviyesinde bir etikettir.
Blok etiketi yüzde yüz genişlik kapsamaktadır. İnline etiket ise uzunlugu kadar yer kaplamaktadır.
HTML PARAGRAF VE BAŞLIK ETİKETİ
Html’de paragraf etiketi olarak <p></p> etiketleri kullanılmaktadır.
<p> etiketleri block yapısına sahiptir yani genişlik olarak yüzde yüz alan kapsamaktadır.
Başlık olarakta <h1></h1>,<h2></h2> <h3></h3> <h4></h4>, <h5></h5>, <h6></h6>etiketleri kullanılmaktadır buradaki sıralama önem sırasına göredir h1 etiketi ile yazdığınız başlık en büyük şekilde yer kaplayandır.
<p> ve <hx> etiketleri default CSS’ler almaktadır.
Görselde de görüldüğü üzere hiç bir css yazmama rağmen <p> etiketi ve <hx> etiketleri default stiller almaktadır.
METİN BİÇİMLENDİRME ETİKETLERİ
Kalın şekilde yazılmak istenirse <b> </b> etiketleri arasına yazılması gerekmektedir.
Hem kalın hemde önemli olduğu vurgulanmak isterse <strong> </strong> etiketleri arasına yazılması gerekmektedir.
İtalik şekilde yazılması istenirse <i></i> etiketleri kullanılması gerekmektedir.
Hem italik hemde önemli olduğun vurgulanmak istenirse <em></em> etiketleri kullanılması gerekmektedir.
Önemli bir sözcük vurgulanmak istenirse <mark></mark> etiketleri kullanılması gerekmektedir.
Normal yazıdan daha küçük sözcük vurgulanmak istenir <small></small> etiketi kullanılmaktadır.
Üstü çizili yazı yazmak istenirse <s></s> etiketleri kullanılmaktadır.
Altı çizili yazı yazmak istenilirse <u></u> etiketleri kullanılmaktadır.
Alt kısma yazı yazmak için <sub></sub> etiketleri kullanılmaktadır.
Üst kısma yazı yazmak için <sup></sup> etiketleri kullanılmaktadır.
Bir alt satıra geçmek için <br> etiketi kullanılır.
NOT: HTML de açıklama satırları şeklinde yazılabilir. Açıklama satırları ekranda görünmez iken sayfa kaynağında görülebilmektedir.
HTML ALINTI ETİKETLERİ
Alıntılar <abbr> </abbr> etiketleri arasında kullanılabilir. <abbr> etiketi title niteliği alabilmektedir. Tittle etiketi kısaltma kullanılan sözcüğün tam halini göstermektedir.
Kısa alıntılar için <q></q> etiketleri kullanılmaktadır.
Uzun alıntılar için <blockquote></blockquote> etiketleri kullanılmaktadır. Cite niteliği ile hangi siteden alıntı yapıldığı aktarılabilir.
HTML LİNK ETİKETİ
Html de link etiketi <a></a> etiketleri arasına yazılır.
<a> etiketine href niteliği ile gidilmesi istenilen sayfanın linki verilir.
<a> etiketine target niteliği ile yeni pencerede açılması gibi nitelikler verilebilir. Default olarak target=”_self” kullanılmaktadır. Yeni pencere için target=”_blank” kullanılması gerekmektedir.
<a> etiketine tittle verilerek üzerine geldiğimizde istenilen yazının açılması sağlanabilir.
<a> etiketine download verilerek resminde uzantısı verilirse eğer indirme imkanı sağlamaktadır.
<a> etiketine rel verilerek arama motorlarına linklediğimiz sayfanın da linklenmesi gerekti ifadesi verilebilir . Örneğin rel=”unfollow”.
<a> etiketine href kullanarak #id verilerek istenilen id ye gitmemizi sağlar.
HTML RESİM ETİKETİ
<img> etiketi ile görselleri tarayıcımızda gösterebiliriz.
<img> etiketi src niteliği ile resmin ismi veya linki verilebilir.
<img> etiketi alt etiketi ile resim yüklenmez ise resmin yerine gösterilecek açıklama metnini tarayıcıyıda görünmesini sağlar.
<img> width height ölçüleri ile görsellere yükseklik veya genişlik verilebilmektedir.
<img> srcset ile ekran çözünürlüğüne göre görsellerin boyutu otomatik ayarlanmaktadır.
HTML TABLO ETİKETİ
Html de tablo için <table> etiketi kullanılır.
<table> etiketi içerisinde header kısmı için <thead> kullanılır. Body kısmı icin<tbody> ,footer için <tfoot> kullanılır.
Satırlar <tr> etiketi ile oluşturulur.
Sütunlar <td>etiketi ile oluşturulur.
Başlık sütunları <th> arasına yazılır.
Tablo başlığı <caption> etiketleri arasına yazılır.
Satırları veya sütunları colspan veya rowspan ile birleştirebiliriz.
HTML LİSTE YAPISI
Html de listeler genel yapıları ile 2 ye ayrılır. Sıralı ve sırasız listeler.
Sırasız listeler <ul></ul> etiketleri arasına yazılır.
Sıralı etiketler <ol></ol> etiketleri arasına yazılır.
İç içe de liste oluşturulabilmektedir.
<ol>sıralaması type niteliği değiştirilerek sayısal,alfabetik ve roma rakamları ile sıralanabilmektedir.
Ayrıca ol etiketleri start etiketi ile başlanabileceği sayı veya roma rakamıda belirlenebilmektedir.
HTML MEDYA ETİKETLERİ
Html de genel olarak kullanılan medya etiketleri <audio> ve <video> kullanılmaktadır.
<audio> ses dosyalarının kullanılabilmesi için gerekli bir etikettir.
<video> video dosyalarının kullanılabilmesi için gerekli bir etikettir.
Örnekte görüldüğü üzere <audio> ,<video> ve <source>etiketleri almaktadır.
<source> etiketleri ile göstermek istediğimiz dosyanın linki veya ismi verilir type olarak da oynatılması istenen dosyanın tipini belirtiriz.
Alt kısma yazılan yazı ise eğer tarayıcı eski bir tarayıcı ve medya etiketlerini desteklemiyorsa bu uyarı mesajını görecektir.
HTML IFRAME
Html de istediğimiz bir web sayfasını kendi web sayfamızda gösterebiliyoruz.
<iframe> etiketi kullanılarak src kısmına link verilmektedir.
Örnekte görüldüğü üzere <iframe> içerisinde sercanozbek.com sitesini açıyoruz. Buradaki sandbox niteliği ile iframe de açtığımız siteye kısıtlamalar verebiliyor. Örneğin JavaScript çalışmasın gibi. Ayrıca yukarıdaki etiketi ile target kısmına iframe name i verilerek iframe içerisindeki link değiştirilebiliyor.
Sonuç olarak…
Günümüzde ister client side , ister server side projeler geliştirelim son kullanıcıya yönelik geliştirdiğimiz bir proje ise yolumuz bir şekilde HTML’e çıkmaktadır. HTML’de ki temel etiketleri ve niteliklerini öğrenmek geliştirme yaparken bizlere zaman kazandıracaktır.
Daha detaylı HTML etiketlerine ulaşmak için Github linkime gidebilirsiniz :
https://github.com/sercan46/HTML-htmlTags
Bir sonraki yazımda görüşmek üzere :)
