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.
100’den fazla HTML kodu anlamı için buradaki bağlantıya tıklayın.
HTML kod örnekleri için buradaki bağlantıya tıklayın.
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:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <title>Yazılım Kodlama</title> </head> <body> </body> </html> |
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.
|
1 2 3 4 5 6 7 8 |
<h1>Başlık 1</h1> <h2>Başlık 2</h2> <h3>Başlık 3</h3> <h4>Başlık 4/h4> <h5>Başlık 5</h5> <h6>Başlık 6</h6> |
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:
|
1 2 3 |
<p> Kedim Şanslı'nın birçok maceraları var. Dün bir fare yakaladı ve bu sabah iki tane yakaladı! </p> |
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.
|
1 2 3 |
<p>Örnek bir içerik <br> Burası yazının devamı</p> |
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:
|
1 2 3 |
<a href="http://www.yazilimkodlama.com/">Sitemi ziyaret edin!</a> |
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:
|
1 2 3 |
<img src="benimfotom.jpg" alt="Benim Fotom"> |
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:
|
1 2 3 |
<button>Buraya Tıkla</button> |
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
|
1 2 3 4 5 6 7 |
<p>Örnek bir içerik</p> <hr> <p>Örnek bir içerik</p> <hr> <p>Örnek bir içerik</p> |
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.
saoglun
saoglun hocadan daha iyi
bu bilgiler için çok teşekkür ederim gerçekten çok faydalı ve basit,temel kullanımlı.