Web Tasarım Formu
HTML Nedir?
İngilizce Hyper Text Markup Language (HTML) kelimelerinin baş harflerinden oluşmaktadır. HTML işaretleme dilidir. Web sitelerinin oluşturulmasında kullanılmaktadır. Bu dilin çalışabilmesi için Chrome, Firefox, Safari, Edge, Opera gibi tarayıcılar tarafından derlenmesi gerekir. Tarayıcılar bu kodları işleyerek web sitesi oluşmasını sağlamaktadır.
HTML ile Neler Yapılabilir?
HTML tam anlamıyla bir programlama dili değildir. JavaScript, C#, Pyhton programlama dillerinde olduğu gibi If/Else, For/While döngü yapıları bulunmamaktadır. Bu nedenlerden dolayı da programlama dili değil metin işaretleme dili demek daha doğru olacaktır. Gördüğümüz web siteleri HTML kodları ile oluşturulmaktadır.
- Görsel, yazı ve video gibi içeriklerin web sitesine konumlandırılmasını sağlamaktadır.
- Oluşturulan bu içeriklerin doğru şekilde internet sitelerinde görüntülenmesini sağlar.
- Arama motorlarına web siteleri hakkında bilgi vermektedir.
HTML kodu yazmak için bilgisayara herhangi bir program yüklemeye ihtiyaç yoktur. Wordpad gibi metin editörlüğü yapan programlarda yazılabilir. Ancak isteğe bağlı olarak ve kod yazımının kolaylaşması için Dreamwear, Sublime Text, Notepad++ gibi araçlar kullanılabilir. Kodlar kaydedilirken htm, xhtml, html tarayıcılarının anlayacağı şekilde kaydedilmesi gerekmektedir.
Sadece HTML ile Web Sitesi Oluşturulabilir Mi?
Sadece HTML kodları kullanılarak web sitesi oluşturmak mümkündür. Ancak günümüzde web sitelerinin birçoğu yalnızca HTML ile oluşturulmazlar. Renklendirme için CSS, animasyon eklemek ve verileri işlemek için JavaScript, web sitelerine dinamiklik katmak için PHP, ASP.NET, Pyhton programlama dilleri kullanılmaktadır.
HTML Yazarken Dikkat Edilmesi Gerekenler
- <html>, <body> ve <head> gibi <…> içerisinde yazılan kodlara tag/ etiket denir.
- Açılan her tag kapatılmak zorundadır. Kapatmak için / simgesi kullanılmalıdır. Bu durum her zaman geçerli değildir.
- Türkçe karakterlere yer verilmez.
- Tag yazmak için büyük veya küçük harfler kullanılmaktadır. Ancak sıklıkla küçük harf tercih edilir.
- HTML sayfaları için belirli şablonlar vardır. Bu şablona göre oluşturulmalıdır.
HTML Etiketleri ve Anlamları
- Html: Tüm etiketleri saran, html kodu ile kodlama işleminin yapılması gerektiğini belirten sayfaların başında açılıp sonunda kapatılan etiketin adıdır.
- Head: Web sitesinin içeriğinin ve tanımlamalarının yer aldığı bölümdür. Bu alanda yer alan kodlar sitede görünmez.
- Body: Kullanılan etiketlerin birçoğu body alanı üzerinde bulunur. Bu alan, siteye giren herkesin görebildiği ve tüm sitenin görüntülendiği alandır.
Temel ve En Çok Kullanılan HTML Kod Rehberi
- <!-...->: Açıklama ekleme
- <!DOCTYPE>: Dosya türü yazma
- <a>: Site içi veya dışı bağlantı verme
- <abbr>: Kuruluş ve yer gibi isimlerin kısaltmaları
- <acronym>: Kısaltma açıklamalarının eklenmesi
- <address>: Adres ekleme
- <area>: Resim üzerinde alan belirtme
- <base>: Bağlantılar için anayol bildirme
- <blockquote>: Kaynaklardan alıntı yapıldığını belirtmek
- <br>: Alt satıra geçmek için kullanılır
- <button>: Gönder, indir, yükle gibi butonları oluşturmak için kullanılır
- <caption>: Tablo başlığı belirtme
- <code>: Bilgisayar kodu gibi yazmak için kullanılır
- <dd>: Açıklama ekleme
- <div>: Kodları gruplandırma veya dosyada alan belirtmek amacıyla kullanılır. Ayrıca üst kısım, alt kısım, yorum ve içerik gibi alanların karışmaması için kullanılır.
- <fieldset>: <div> etiketi ile benzerdir ve alan belirtmek için kullanılır. Yazılan kodun çerçeve içerisine alınmasını sağlar.
- <form>: input etiketleri ile form eklemek için kullanılır.
- <frame>: Çerçeve oluşturma
- <frameset>: Çerçeve seti oluşturma
- <img>: Resim ekleme
- <ul>, <li>, <ol>: Listeleme yaparken kullanılır. Oluşturulan her liste <ul> tagı ile açılmalıdır. İçerisine <li>, <ol> tagları eklenmelidir. <li> nokta ile listelendirme yapar. <ol> numaralar ile listelendirme yapar.
- <meta>: <head>, </head> tagları arasında kullanılır. Meta etiketlerinin doğrulanması ve sistemle ilgili bilgi vermek için kullanılır.
- <option>: <select> tagı ile birlikte kullanılır. <select> tagı ile belirlenen her seçeneğin arasına konulur.
- <pre>: Kod paylaşımı için kullanılır. Yazılan kodların çalıştırmayıp yalnızca göstermek için kullanılır.
- <select>: Yaş, cinsiyet, şehir, bölge gibi web sitesinde seçim yapılması gereken yerlerde seçim kutusu için kullanılır.
- <script>: JavaScript kodlarını çağırmak için kullanılır.
- <style>: CSS kodlarını çağırmak için kullanılır.
- <table>: Tablo oluşturmak için kullanılır. Satırlar için <tr>, sütunlar için <th> tagları kullanılır.
- H1…H2: Heading etiketleridir. Büyükten küçüğe doğru sıralanan başlık etiketleridir. En büyük başlık H1, en küçük olan H2’dir.
