HTML Nedir? Iyi mi Kullanılır?- HTML Kod Rehberi
Eğer bir internet sayfasına sahipseniz HTML kodları hakkında informasyon sahibi olmanız gerekir.Hazır Script, WordPress yada kendi statik HTML internet sayfaları olsun meydana getirilen değişimler için HTML kullanmanız gerekir. Bu yüzdende belli bir düzeyde HTML bilgisine haiz olmalısınız. HTML Kod Rehberi’ne geçmeden ilkin HTML hakkında detaylı detayları sizlerle paylaşacağız.
HTML Nedir? Iyi mi Kullanılır?
HTML (Hiper Metin İşaretleme Dili), web sitelere ilişkin sayfaların hazırlanması için kullanılır. Arama motorları, kullanılan HTML kodlarını anlayarak görsel web sayfasının oluşturulmasını sağlar. HTML ile ilgili bilinmesi ihtiyaç duyulan en mühim şeylerden biri de bir programlama dili olmadığıdır. HTML, web sitenizin sayfaları hakkında arama motorlarına lüzumlu detayları verir. Yazı ve görsel içeriklerin sayfa içindeki konumunu ve muntazam bir şekilde görüntülenmesini sağlar.
HTML ile web sayfa oluştururken herhangi bir programa ihtiyacınız olmayacak. Word, wordpad yada not defteri benzer biçimde metin editörleri kullanarak oluşturabilirsiniz. Kodları yazarken kolaylık sağlamak istiyorsanız Dreamweaver, Notepad++ yada Sublime Text benzer biçimde programlar kullanabilirsiniz. Ek olarak kod yazım hızını da artırabilirsiniz bu şekilde. Hazırlanan web sayfaları kaydederken tarayıcıların anlayacağı şekilde kaydetmeniz gerekir. Bunun için html yada xhtml benzer biçimde uzantılar kullanabilirsiniz.
HTML Kodlarını Yazarken Nelere Dikkat Edilmelidir?
- <html>, <body> ve <head> benzer biçimde “<…>” simgeleri içinde yazılan kodlara tag/etiket denir.
- Oluşturulan her tag kapatılmak zorundadır. Kapatmak için / imgesini kullanmanız gerekir. Bazı durumlarda bu geçersizdir. Ek olarak hiyerarşik bir seviye oluşturulmalıdır.
- Türkçe karakter yoktur.
- Tagları minik yada büyük harfle oluşturabilirsiniz. (Genel olarak minik harf kullanılır.)
- HTML sayfaları, için belli bir şablona bakılırsa oluşturulmalıdır:
<!DOCTYPE html><html> <head> <title>Başlık</title></head> <body> İçerik </body> </html> Yukarıda belirttiğimiz şablonda yer edinen kodların ne anlama geldiğini açıklayalım:
- <!DOCTYPE html>: Sayfa başlangıcında yer alır. HTML 5 sürümünün kullanıldığını gösterir. (En güncel olan olduğundan HTML 5 kullanılır.)
- <html>: Sayfa yer edinen kodların HTML kodu olarak yorumlandığını belirtir. Doctype dışındaki öteki tüm kodlar html içinde olmak zorundadır. <html> kodunu head be body olarak ikiye ayrılır.
- <title>Başlık</title>: tarayıcı sekme kısmında görünen başlık kısmıdır.
- <head>: Hazırlanan sayfalar ile ilgili bilgilerin ve tanımlamaların yer almış olduğu kısımdır. Bu bölümde yer edinen kodlar oluşturulan web sayfasında görüntülenmez.
- <body>: Oluşturulan sayfanın içinde ne olduğunun hepsini içeren kısımdır. Kullanılacak olan tagların büyük çoğunluğu body etiketi içinde yer alır.
HTML Kod Rehberi
- <!–…–>:Izahat Ekleme
- <!DOCTYPE>: Dosya Türü Yazma
- <a>: Site içi yada dışı bağlantı vermek için kullanılır.
- <abbr>: Müessese ve yer benzer biçimde adların kısaltılmasında kullanılır.
- <acronym>: Kısaltmanın açıklamasını eklemek için kullanılır.
- <address>: Adres eklemek için kullanılır.
- <area>: Fotoğraf üstünde alan belirtmek için kullanılır.
- <base>: Bağlantılar için ana yol bildirirken kullanılır.
- <blockquote>: Herhangi bir kaynaktan/siteden alıntı yapıldığında belirtmek için kullanılır.
- <br>: Alt satıra geçmek için kullanılır. <br /> şeklinde kullanılır.
- <button>: Buton oluşturmak için kullanılır. (Gönder, indir, yükle vb.)
- <caption>: Tablo başlığı belirtmek için kullanılır.
- <code>: Bilgisayar kodu şeklinde yazmak için kullanılır.
- <dd>: Izahat eklemek için kullanılır.
- <div>: Kodları gruplandırmak ve dosyada alan belirtmek için kullanılır. Bir sitede üst kısım, alt kısım, yorum ve içerik benzer biçimde birçok değişik alanın karışmaması için kullanılır.
- <fieldset>: Alan belirlemek için kullanılır. <div> etiketi ile benzer. Yazılan kodun çerçeve içine alınmasını sağlar.
- <biçim>: Biçim (İletişim formu benzer biçimde…) eklemek için kullanılır. İnput eiketleri ile beraber kullanılır.
- <frame>: Çerçeve oluşturmak için kullanılır.
- <frameset>: Çerçeve dizisi oluşturmak için kullanılır.
- <img>: Fotoğraf eklemek için kullanılır.
- <ul>,<li>, <ol>: Listeleme yaparken kullanılır. Oluşturulan her sıralama için <ul> tagı açılmalı ve içine <li> ve <ol> tagları eklenmeli. <li> ve <ol> için aynı kullanım söz mevzusu değildir. <li> nokta şeklinde sıralama yaparken <ol> numaralandırma ile sıralama yapar.
- <meta>: <head> ve </head> tagları içinde kullanılır. meta etiketlerinin doğrulanması ve sistemle ilgili informasyon vermek için kullanılır.
- <option>: <select> tagı ile beraber kullanılır. <select> tagı ile belirlediğiniz seçimin her seçeneğinde <option> kullanılır.
- <pre>:Kod paylaşımı yapılmak istendiğinde kullanılır. <pre>….</pre> tagları içinde yazdığınız kodlar çalışmayacak bir tek gösterilecektir. Doğrusu yazdığınız kodların emek harcamadan gösterilmesi için kullanılır.
- <select>: Seçim yapmak için kullanılır. Sayfada yer edinen herhangi bir seçim kutusu için kullanılır. Mesela; yaş, cinsiyet, kent, bölge vb.
- <script>: JavaScript kodlarını çağırırken kullanılır.
- <style>: CSS kodlarının çağrılmasında kullanılır.
- <table>: Tablo oluşturmak için kullanılır. Tablonun satırları için <tr>, sütunları için <th> tagları kullanılır. <tbody> ve <thead> etiketleri de tablo oluştururken kullanılır. Başlık ve içerik satırını belirtir.
- H1,…H2: Heading etiketlerine listenin en sonunda değinmek istedik. Heading etiketleri kesinlikle bilinmesi ihtiyaç duyulan HTML etiketleridir. Büyükten küçüğe doğru sıralanan başlık etiketleridir. Yazınız içinde hiyerarşik yapı oluşturmanızı sağlar. En büyük başlık H1 ve en minik olanda H6’dır.
HTML Kod Rehberi olarak sizlerle paylaştığımız bu yazımızda temel ve en fazlaca kullanılan HTML etiketlerini sizlerle paylaştık. HTML etiketlerini elbet yukarıda yer alanlar ile sınırlamıyoruz. Bunlar haricinde kullanılan başka HTML etiketleri de mevcut. HTML kodları ve taglar ile ilgili öteki sorunlarınız için bizlere ulaşmanız kafi.