Eğer bir web sitesine sahipseniz HTML kodları hakkında bilgi sahibi olmanız gerekir.Hazır Script, WordPress veya kendi statik HTML web siteleri olsun yapılan değişiklikler için HTML kullanmanız gerekir. Bu yüzdende belli bir düzeyde HTML bilgisine sahip olmalısınız. HTML Kod Rehberi’ne geçmeden önce HTML hakkında detaylı bilgileri sizlerle paylaşacağız.
HTML Nedir? Nasıl Kullanılır?
HTML (Hiper Metin İşaretleme Dili), web sitelere ait 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 gereken en önemli şeylerden biri de bir programlama dili olmadığıdır. HTML, web sitenizin sayfaları hakkında arama motorlarına gerekli bilgileri verir. Yazı ve görsel içeriklerin sayfa içerisindeki konumunu ve düzgün bir biçimde görüntülenmesini sağlar.
HTML ile web sayfa oluştururken herhangi bir programa ihtiyacınız olmayacak. Word, wordpad veya not defteri gibi metin editörleri kullanarak oluşturabilirsiniz. Kodları yazarken kolaylık sağlamak istiyorsanız Dreamweaver, Notepad++ veya Sublime Text gibi programlar kullanabilirsiniz. Ayrıca 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 veya xhtml gibi uzantılar kullanabilirsiniz.
HTML Kodlarını Yazarken Nelere Dikkat Edilmelidir?
1.<html>, <body> ve <head> gibi “<…>” simgeleri içerisinde yazılan kodlara tag/etiket denir.
2.Açılan her tag kapatılmak zorundadır. Kapatmak için / imgesini kullanmanız gerekir. Bazı durumlarda bu geçersizdir. Ayrıca hiyerarşik bir düzen oluşturulmalıdır.
3.Türkçe karakter yoktur.
4.Tagları küçük veya büyük harfle oluşturabilirsiniz. (Genel olarak küçük harf kullanılır.)
5.HTML sayfaları, için belli bir şablona göre oluşturulmalıdır:
<!DOCTYPE html>
<html>
<head>
<title>Başlık</title>
</head>
<body>
İçerik
</body> </html>
Yukarıda belirttiğimiz şablonda yer alan kodların ne anlama geldiğini açıklayalım:
1.<!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ğu için HTML 5 kullanılır.)
2.<html>: Sayfa yer alan kodların HTML kodu olarak yorumlandığını belirtir. Doctype dışındaki diğer tüm kodlar html içinde olmak zorundadır. <html> kodunu head be body olarak ikiye ayrılır.
3.<title>Başlık</title>: tarayıcı sekme kısmında görünen başlık kısmıdır.
4.<head>: Hazırlanan sayfalar ile ilgili bilgilerin ve tanımlamaların yer aldığı kısımdır. Bu kısımda yer alan kodlar oluşturulan web sayfasında görüntülenmez.
5.<body>: Oluşturulan sayfanın içeriğinin hepsini içeren kısımdır. Kullanılacak olan tagların büyük çoğunluğu body etiketi içerisinde yer alır.
HTML Kod Rehberi
1.<!–…–>: Açıklama Ekleme
2.<!DOCTYPE>: Dosya Türü Yazma
3.<a>: Site içi veya dışı bağlantı vermek için kullanılır.
4.<abbr>: Kuruluş ve yer gibi isimlerin kısaltılmasında kullanılır.
5.<acronym>: Kısaltmanın açıklamasını eklemek için kullanılır.
6.<address>: Adres eklemek için kullanılır.
7.<area>: Resim üzerinde alan belirtmek için kullanılır.
8. <base>: Bağlantılar için ana yol bildirirken kullanılır.
9.<blockquote>: Herhangi bir kaynaktan/siteden alıntı yapıldığında belirtmek için kullanılır.
10.<br>: Alt satıra geçmek için kullanılır. <br /> şeklinde kullanılır.
11.<button>: Buton oluşturmak için kullanılır. (Gönder, indir, yükle vb.)
12. <caption>: Tablo başlığı belirtmek için kullanılır.
13.<code>: Bilgisayar kodu şeklinde yazmak için kullanılır.
14. <dd>: Açıklama eklemek için kullanılır.
15.<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 gibi birçok farklı alanın karışmaması için kullanılır.
16. <fieldset>: Alan belirlemek için kullanılır. <div> etiketi ile benzer. Yazılan kodun çerçeve içine alınmasını sağlar.
17.<form>: Form (İletişim formu gibi…) eklemek için kullanılır. İnput eiketleri ile birlikte kullanılır.
18.<frame>: Çerçeve oluşturmak için kullanılır.
19.<frameset>: Çerçeve dizisi oluşturmak için kullanılır.
20.<img>: Resim eklemek için kullanılır.
21.<ul>,<li>, <ol>: Listeleme yaparken kullanılır. Oluşturulan her liste için <ul> tagı açılmalı ve içerisine <li> ve <ol> tagları eklenmeli. <li> ve <ol> için aynı kullanım söz konusu değildir. <li> nokta şeklinde liste yaparken <ol> numaralandırma ile liste yapar.
22.<meta>: <head> ve </head> tagları arasında kullanılır. meta etiketlerinin doğrulanması ve sistemle ilgili bilgi vermek için kullanılır.
23.<option>: <select> tagı ile birlikte kullanılır. <select> tagı ile belirlediğiniz seçimin her seçeneğinde <option> kullanılır.
24.<pre>: Kod paylaşımı yapılmak istendiğinde kullanılır. <pre>….</pre> tagları arasında yazdığınız kodlar çalışmayacak sadece gösterilecektir. Yani yazdığınız kodların çalışmadan gösterilmesi için kullanılır.
25.<select>: Seçim yapmak için kullanılır. Sayfada yer alan herhangi bir seçim kutusu için kullanılır. Örneğin; yaş, cinsiyet, şehir, bölge vb.
26.<script>: JavaScript kodlarını çağırırken kullanılır.
27.<style>: CSS kodlarının çağrılmasında kullanılır.
28.<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.
29.H1,…H2: Heading etiketlerine listenin en sonunda değinmek istedik. Heading etiketleri mutlaka bilinmesi gereken HTML etiketleridir. Büyükten küçüğe doğru sıralanan başlık etiketleridir. Yazınız içerisinde hiyerarşik yapı oluşturmanızı sağlar. En büyük başlık H1 ve en küçük olanda H6’dır.
HTML Kod Rehberi olarak sizlerle paylaştığımız bu yazımızda temel ve en çok kullanılan HTML etiketlerini sizlerle paylaştık. HTML etiketlerini elbette yukarıda yer alanlar ile sınırlamıyoruz. Bunlar dışında kullanılan başka HTML etiketleri de mevcut. HTML kodları ve taglar ile ilgili diğer sorunlarınız için bizlere ulaşmanız yeterli.
