Web tasarım konusunda araştırma yapan hemen herkesin karşına çıkan temel kavram HTMLdir. Web sayfalarını oluşturma aşamasında kullanılan standart bir metin işaret dili olan HTML açılımı “Hyper Text Markup Language” olarak bilinir. Genel bilinen yanlış kanının aksine HTML bir programlama dili değildir. Daha açık anlatmak gerekirse, Chrome, Firefox, Yandex gibi tarayıcıların okuyup anlamlandırdığı dil HTML dilidir.
HTML Ne İşe Yarar?
HTML, web tasarımcılarına sayfalar ve uygulamalar için yapı profilleri, bağlantılar, blok alıntılar, paragraflar ve başlıklar oluşturmalarında yardımcıdır. Bu konuda basit kod yapıları olan etiketler ve nitelikler kullanılarak web sayfaları şekillendirilebilir. HTML için aslında bir web sitesinin iskeleti denilebilir. Yani HTML kodları olmadan web sitesi kodlanamaz.
Web sitesi ve sayfaları oluşturulurken mutlaka kullanılması gereken HTML, yeni başlayanlar için öğrenmesi en kolay biçimleme dillerinden biridir. HTML dersleri alarak sistemli bir çalışma için kendinizi geliştirebilir, öğrendiğiniz bilgileri web sayfası tasarlama aşamasında deneyebilirsiniz. Zamanla sahip olduklarınızdan fazlasını öğrenebilir ve web sitesi tasarlama konusunda söz sahibi olabilirsiniz.
En Çok Kullanılan HTML Kodları
HTML kodları, bir web sayfasının yapısını oluşturan parçacıklardır. Kullanılan kod ne olursa olsun tümü “<” ile başlar ve “>” ile bitmek zorundadır. Bazı basit HTML kodlarını daima bilmeniz gerekir. Hazırladığınız web sayfalarında bu kodları birden fazla yerde kullanmanız gerekecektir. Ancak öncesinde temel bir HTML belge yapısının nasıl olması gerektiğini bilmeniz gerekir. Buna göre;
<!DOCTYPE html>: Tüm HTML belgeleri bu kod ile başlamak zorundadır. Bu kod aslında sayfanın HTML5 formatına göre kodlandığını gösterir.
<html>: Kök etiket olarak da bilinen bu temel kullanımda tüm HTML kodları, bu iki etiket arasında tanımlanmak zorundadır.
<body>: Görünebilir tüm HTML kod parçalarının eklendiği etiket alanıdır.
<head>: Web sayfasının dili, başlığı ve diğer düzenlemelerinin yer aldığı etikettir.
<title>: Web sitesinin başlık alanını tanımlamak için kullanılır. <title> etiketi, <head> etiketleri arasında olmak zorundadır.
<meta charset=”utf-8″>: HTML kodunun Türkçe karakter desteği dahil olmak üzere pek çok dil seti içerdiğini belirtir.
- Başlık Kodu (Hx)
Web sayfanızdaki içeriği okunabilir parçalara bölmenizi sağlayan unsur başlıklardır. HTML temelde 6 başlık ögesini destekler. Bunlar H1, H2, H3, H4, H5 ve H6‘dan oluşur. Örnek kullanım şekli şu şekilde gösterilir:
- <h1>Birinci başlık</h1>
- <h2>İkinci başlık</h2>
- <h3>Üçüncü başlık</h3>
- <h4>Dördüncü başlık</h4>
- <h5>Beşinci başlık</h5>
- <h6>Altıncı başlık</h6>
- Paragraf Kodu (<p>)
Metin içerisindeki paragrafları oluşturmanızı sağlayan koddur. İçerik bölümlerini ayırırken aralarında <br> kodu eklenerek metin paragrafları oluşturulabilse de <p> kodunun kullanılması tavsiye edilir. Arama motorlarını ve tarayıcıları sayfa yapısı hakkında bilgilendirir.
- Satır Sonu Kodu (<br>)
Web sayfasındaki metni yatay olarak bölmeye yarayan HTML kodudur. Kullanıldığı yerde metin bir alt satırdan devam eder. Diğer bir deyişle <br/> kullanıldığında, takip eden tüm kelimeler alt satırdan devam eder.
- Resim Kodu (<img>)
<img> kodu, görüntüleri web sayfasına eklemek için kullanılır. Web sayfasına resim eklemek istediğinizde önce web sunucusuna yükleyin. Daha sonra yüklenen resmin dosya adına başvuru yapmak için bir <img> etiketi kullanabilirsiniz.
- Buton Kodu (<button>)
HTML buton kodu, sayfalarınızı ilgi çekici yapmak ve etkileşimli içerikler oluşturmak için kullanılır. JavaScript ve HTML renk kodları ile daha güçlü hale gelen bu kod, içeriklerinizde kullanıcılarla etkileşime girmenizi sağlar.
- Bağlantı Kodu (<a>)
Önemli HTML link verme kodlarından biri olan <a> kodu ile diğer içerikleriniz arasında da bağlantılar oluşturabilirsiniz. Bağlantı oluşturmak için, bağlantı kurmak istediğiniz içeriğin çevresine <a> ve </a> etiketleri sarmanız gerekir.
- Yatay Çizgi Kodu (<hr>)
Sayfa bölümlerini görsel olarak ayırmada yatay çizgi kodları kullanılır. Bu kod, sayfadaki geçerli konum üzerinden sağ kenar boşluğu arasında bir çizgi oluşturur. Böylece kelime veya cümle grupları yatay çizgiyle ayrılır.
HTML ile CSS ve JS Arasındaki Bağlantı Nedir?
HTML site tasarlama konusunda gerçekten güçlü bir dil olsa da, profesyonel ve güçlü sonuçlar almada tek başına yeterli değildir. Belirli kodlar kullanılarak yalnızca metin parçaları eklenebilir ve içerik yapısı değiştirilebilir. Fakat HTML ile birlikte CSS ve JavaScript gibi iki frontend dil kullanılırsa, muhteşem bir uyum yakalanır.
HTML ile birlikte CSS ve JS kullanılması demek, sağlam bir temel üzerine eklenecek gelişmiş işlevler ve zengin bir kullanıcı deneyimi oluşturma anlamına gelir. HTML arka plan, renk, tasarım, boşluk ve animasyon için CSS’den yardım alırken; slider, fotoğraf galerileri ve açılır pencereler gibi dinamik işlevsellikler için JavaScript ile birlikte uyum içinde çalışır.
HTML5 Nedir?
Çıktığı günden bu yana sürekli geliştirilen yeni özellik ve eklentiler eklenen HTML sürümleri sürekli yeni güncellemeler ile tarihsel olarak kendi özel isimleri ile anılmıştır. Günümüzde HTML olarak bilinen HTML 4, 1999 yılında yayınlanmış ve oldukça beğeni toplamıştı. Ancak daha sonra HTML 5 güncellemesi geldiğinde, beraberinde pek çok yenilik getirdiği görüldü.
0 Yorumlar