Temel HTML Kodları – Web Tasarım & Programlama
HTML DERSLERİ

Temel HTML Kodları

HTML kodlamaya mı başlıyorsunuz. Bu basit HTML kodlarını bilmeniz de fayda olduğunu belirtmek isterim. Hazırladığınız web sayfalarında bu etiketleri bir yada bir kaç sefer sayfanızda kullanırsınız. Bir sonraki bölümlerde onlar hakkında bilgi edineceksiniz.

Buradaki kodlarla HTML kodları ile web sayfaları için basit işlemler yapmak hedeflenmiştir. Aşağıdaki temel HTML kodları ve devamındaki kodları kullanarak web sayfası geliştirmek için basit bir çözüm sunar.

Temel HTML Belgesi Yapısı

<!DOCTYPE html>:Bütün HTML belgesi bu etiket ile başlamak zorundadır. BU sayfanın HTML5 formatında kodlandığını gösterir.

<html>:Tüm HTML etiketleri bu etiket arasında tanımlanır. Ayrıca KÖK etiket olarak da bilinir.

<head> :Sayfa dili, başlığı ve gerekli düzenlemelere ait etiketlerin yer aldığı etikettir.

<body> : Görülebilir tüm parçaların eklendiği etikettir.

<title> : Sitenin başlığını tanımak için kullanılır. <head> etiketleri arasında kullanılır.

<meta charset="utf-8"> :Türkçe karakter seti dahil bir çok dil setini içerdiğini belirtmek için kullanılır.

Standart bir HTML belgesi Türkçe karakter desteğini içeren en basit şekli ile aşağıdaki gibi tanımlanır:

Başlık Etiketleri (Hx)

Başlıklar, sayfa içeriğinizi okunabilir parçalara bölmenize izin verir. Bir kitap veya rapordaki başlıklar ve alt başlıklar gibi çalışırlar.

HTML aslında 6 başlık öğesini destekler: h1, h2, h3, h4, h5 ve h6. h1 en önemli başlıklar içindir, h2 daha az önemli alt başlıklar içindir. Genellikle, sayfanız çok uzun ve karmaşık olmadıkça h1, h2 ve h3’ten daha fazlasını kullanmanız gerekmez.

Paragraf Etiketi (<p>)

P öğesi, metin paragrafları oluşturmanıza olanak sağlar. Çoğu tarayıcı, her paragraf arasında dikey bir boşluk bırakarak paragrafları görüntüler ve metni güzelce ayırır.

Metin parçaları arasına boş satırlar eklemek için <br> etiketlerini kullanarak yalnızca metin paragrafları oluşturabilirsiniz, bunun yerine p öğelerini kullanmak daha iyidir. Yalnızca düzenli değil, tarayıcılara, arama motorlarına ve diğer insanlara sayfanızın nasıl yapılandırıldığı konusunda daha iyi bir fikir verir.

İşte bir paragraf örneği:

Satır Sonu (<br>)

Bir metni yatay olarak bölmek için kullanılır. Kullanıldığı yerde metni bir alt satırdan devam etmek için kullanılır. <br/> öğesini ne zaman kullanırsanız, takip eden her şey bir sonraki satırdan başlar. Bu etiket, aralarında girilecek hiçbir şey olmadığından, etiketleri açıp kapatmanıza gerek olmayan boş bir öğe örneğidir.

 

Bağlantı Etiketi (<a>)

Bir web sayfasındaki en önemli öğelerden biri olan< a>, diğer içeriğe bağlantılar oluşturmanıza olanak sağlayan etikettir. İçerik, kendi sitenizde veya başka bir sitede olabilir.

Bir bağlantı oluşturmak için, bağlantı için kullanmak istediğiniz içeriğin etrafına <a> ve </a> etiketleri sarın ve bağlantı yapılacak URL’yi <a> etiketinin href özniteliğine sağlayın.

www.yazilimkodlama.com’a bağlanan bir metni nasıl oluşturacağınız:

 

Resim Etiketi (<img>)

<img> öğesi görüntüleri web sayfalarınıza eklemenizi sağlar. Bir resim eklemek için önce resmi web sunucunuza yükleyin, sonra yüklenen resim dosya adına başvurmak için bir <img> etiketi kullanın.

İşte bir örnek:

 

Buton Etiketi (<button>)

Web sitelerinizde etileşimli içerikler oluşturmak, sitenizin daha ilgi çekici olmasını sağlar. JavaScript ile birlikte güç bulan bu etiket sayfanızda kullanıcılarla etileşime girmek için kullanılır.

İşte basit bir buton örneği:

Yatay çizgi (<hr>)

Yatay çizgiler, belgenin bölümlerini görsel olarak ayırmak için kullanılır. <hr> etiketi, belgedeki geçerli konumdan sağ kenar boşluğuna bir çizgi oluşturur ve çizgiyi buna göre keser.

Örneğin, aşağıda verilen örnekteki gibi iki paragraf arasında bir satır vermek isteyebilirsiniz

Bu etiketleri HTML başlangıç etiketleri olarak belirledik ancak bu etiketler ve daha fazlası için sitemizde HTML Kodları yazısına ve diğer web başlıkları için WEB tasarım sekmesi altındaki HTML , CSS ve JavaScript konularına göz atabilirsiniz.

Yorum yap