HTML – Semantic
Semantic: Anlamsal Elemanlar. Sayfada bir h1 elemanı gördüğümüz zaman bunun bir header olduğunu anlarız ya da p etiketi gördüysek bunun içinde yazı olacağını anlarız <div> ya da <span> kendi başına bir anlam ifade etmezler buna bir id,class özelliği verilmesi lazım Arama motoru h1 gördüğü zaman bunun başlık olduğunu anlar fakat class ya da id verilmemiş bir id etiketini anlayamaz. Sayfamızda <div id=”footer”> gördüğümüzde bunun bir footer olduğunu anlayabilliriz fakat bu eksi bir kullanımdır HTML5 ile birlikte header,nav,footer vb. alanlar için <header> <nav> <footer> özel etiketler oluşturulmuştur Bu etiketlerin kullanılması arama motoru ve kullanıcıların siteyi anlamasını sağlar websiteleri header,navbar,siderbar,section,footer gibi alanlardan oluşur.
HTML – Forms & Inputs
HTML’ form etiketleri kullanıcıdan veri almak için kullanılır, bu veriler Back-End’te işlenerek gerekli CRUD (Create, Reading, Update, Delete) işlemleri yapılır.
HTML – Bookmarks
Sayfada bir linke bastığımız zaman bizi aynı sayfanın başka bir kısmına götürebilir. Yukarı aşağı vs belirli bir bölgeye…) Bunu bookmarks (işaretleme) özelliği ile yaparız link’e href=#gidilecek_yerin_idsi şekl yönlendirme yaparız. Gitmek istediğimiz yerin id’sini de buna göre veririz. Aynı şekilde sayfa_linki/#sayfada_bulunan_elemanin_idsi şekl tarayıcı çubuğuna yazarak da gidebiliriz.
HTML – Id & Class
HTML’de etiketlere id ve class’larla kimlik ya da sınıf verebilir, sınıf verilen etiketlerde toplu tasarım değişiklikleri yapabiliriz.
HTML – Div & Span
Div ve span etiketleri HTML’de bir bölümü, bir alanı karşılar. Bu etiketler içerisine elemanlar konularak tasarım yapılır. Div, block level bir elementtir, dolayısıyla değiştirilmedikçe sayfa genişliği kadar alan kaplar. Span ise inline tip bir elementtir, içeriği kadar yer kapsar.
HTML – Block Level & In Line Elements
HTML elemanları varsayılan görüntülenme değerleri bakımından block ve in-line olmak üzere ikiye ayrılır. Block level tipindeki etiketler sayfada ekranın genişiliği kadar yer kaplar örneğin <h1> block level elementtir. In-line etiketler ise sayfada içeriği kadar yer kaplar. Width, height gibi özellikler verilemez örneğin <a> etiketi, in-line tipinde bir elementtir ve sadece içeriği kadar yer kaplar
HTML – Videos & Audios
HTML’de videolar <video> etiketinde src ile uzantısı belirtilerek yazılır Sesler ise aynı şekilde <audio> etiketinde yazılır.
HTML – Lists
HTML listeler <ul> ve <ol> etiketleri ile yapılır. Unordered Lists (Sırasız Listeler), Ordered Lists (Sıralı Listeler) olarak ikiye ayrılır, bunlar ul ve ol’nin de kısaltmasıdır. Elemanlar <li> etiketkleri ile eklenir.
HTML – Tables
HTML’de tablolar <table> etiketleri içerisine yazılır. <tr> etiketleri ile table row yani tablo satırları oluşturulur bu <tr> etiketleri içerisine de <th> (table head) ya da <td> (table data) elemanları yazılır.
HTML – Links
HTML’de <a href=hedef_link></a> etiketi ile elemanlara link verilebilir. Bu a etiketi içerisine yazı,resim,ikon vs. herhangi bir eleman konulabilir. Yani bir yazıya link verildiği gibi bir resime de verilebilir. <a href=”gidilecek_adres” target=”_blank”>link<a> target etiketi sayfayı yeni sekmede açar. <a href=”example.html” target=”_blank” title=”Linkin üzerine gelince gösterilecek yazı”> title etiketi ile de link yazısı gösterilebilir
HTML – Formatting
HTMLde bir yazıyı vurgulayabilir,italik yapabilir, küçültebilir, yukarı ya da aşağı çıkarabiliriz. Bunları <strong>, <em>, <small>, <sub>, <mark> gibi etiketlerin içerisine yazarak yapabiliriz. Htmlde her açılan etiket kapatılmak zorundadır.(<strong>Vurgulu Yazı</strong>) Ayrıca yazımızı <pre> etiketleri içerisine yazarak, kodda yazdığımız biçimde stilinin (boşlukların vs.) değişmeden görünmesini de sağlayabiliriz.
HTML – Styling
HTML’de elemanlara stil özellikleri verebildiğimiz gibi body gibi ana yapılara da stil özellikleri verebiliriz
HTML – Headings & Paragraphs
HTML’de başlıklar <h> etiketlerinde (<h1>,<h2> … <h6>) Paragraflar ise <p> etiketinde tutulur
HTML – Layouts
Bir HTML Sayfasının temel iskelet yapısı bu şekildedir. Meta Etiketlerini, arama motorlarına bilgi vermek istiyorsak, indexlemeye çalışıyorsak veya sayfalarımızı nitelendirmek istiyorsak kullanırız. Örneğin anahtar kelimelerimiz, Ruby, Csharp, JavaScript olsun Tanımlamlarımız, programlama dersleri olsun vs. gibi bilgileri <meta> etiketi içerisine yazarız
Mehmet İçme 