HTML Sayfasının Temel İçerik Tagları
Aşağıda bir html sayfası hazırlarken, kullanılan temel elemanları göreceğiz. Bu elemanlar <body> başlama ve </body> bitiş taglarının arasına yazılır ve sayfamızın yapısını oluşturur.
Önemli bir tavsiye:
Bu ve bundan sonraki derslerin verimli olması için bir html editörü ile pratik yapmak doğru bir tercih olacaktır.
Editörde boş bir sayfa açıp, bu sayfayı kapatmadan, html uzantısı ile kaydetmelisiniz. Daha sonra, bu boş sayfaya öğreneceğimiz kodları yazmalısınız. Hemen ardından, sayfanızdaki değişiklikleri kaydetmelisiniz.
Editörünüzü kapatmadan, html dosyanızı kaydettiğiniz yerde bulup, bir web tarayıcısında açmalı ve sayfanızın tarayıcı çıktısını görmelisiniz. Bunun için dosyanın üzerine çift tıklamanız yeterli olacaktır.
Başlıklar
İnsanlar bir metni okumaya karar vermeden önce genellikle başlığına bakarlar. Sayfamızda yer alacak bir metine başlık eklemek oldukça kolaydır.
Bir başlık <h1> ve </h1> tagları arasında ilan edilen bir html elemanıdır. Bu taglardaki "h" header=başlık kelimesinden gelir. "1" ise başlığın font büyüklüğünü ifade eden bir saydır. Başlıkların font büyüklüğü <h1> den <h6> ya doğru azalır. Html 6 farklı büyüklükte başlık yazabilmemize izin verir.
Aşağıdaki örneği inceleyelim:
Aşağıdaki örneği inceleyelim:
<html>
<body>
<h1>bu h1 başlığıdır</h1>
<h2>bu h2 başlığıdır</h2>
<h3>bu h3 başlığıdır</h3>
<h4>bu h4 başlığıdır</h4>
<h5>bu h5 başlığıdır</h5>
</body>
</html>
<body>
<h1>bu h1 başlığıdır</h1>
<h2>bu h2 başlığıdır</h2>
<h3>bu h3 başlığıdır</h3>
<h4>bu h4 başlığıdır</h4>
<h5>bu h5 başlığıdır</h5>
</body>
</html>
Bu html dökümanın tarayıcıdaki görünümü aşağıdaki gibi olacaktır:
bu h1 başlığıdır
bu h2 başlığıdır
bu h3 başlığıdır
bu h4 başlığıdır
bu h5 başlığıdır
Paragraflar
Paragraflar, satır başı ile başlayan metin parçalarıdır. Bir paragraf elemanı, <p> tagı ile başlar ve </p> tagı ile biter.
Aşağıdaki örneği inceleyelim:
<html>
<body>
<p>bu bir paragraftır</p>
<p>bu başka bir paragraftır</p>
</body>
</html>
<body>
<p>bu bir paragraftır</p>
<p>bu başka bir paragraftır</p>
</body>
</html>
HTML Linkleri
Bir kelimeye, bir başlığa, veya bir resme link verilebilir. Link elemanı <a> tagı ile başlar ve </a> tagı ile biter. Vereceğimiz linkin adersi ise href özelliği (attribute) ile belirtilir. Bir link elementinin genel yapısı şöyledir.
<a href="link adresi">Linke sahip olacak metin</a>
Aşagıda bir örnek verilmiştir.
<html>
<body>
<a href="http://www.google.com.tr">google için tıklayınız</a>
</body>
</html>
<body>
<a href="http://www.google.com.tr">google için tıklayınız</a>
</body>
</html>
yukarıdaki kod söyle görünecektir:
Tagların içine bir takım html özellikleri (attribute) yerleştirerek, html elemanına farklı özellikler katmak mümkündür.
HTML Sayfasına Bir Görüntü (Fotoğraf-Resim) Eklemek
Html görüntü dosyaları, <img> tagı içerisinde tanımlanır ve çağırılır. Bu tagın bitiş tagı yoktur.
<img> tagının genel yapısı şöyledir:
<img src="resmim.jpg" alt="resim" width="104"
height="142">
Bu yapıda;
src özelliği resmin yoludur.
alt özelliği, fareyi resmin üzerinde beklettiğimizde sarı bir kutucuk içerisinde ortaya çıkacak yazıdır.
width resmin genişliğidir.
height ise resmin yüksekliğidir.
Yukarıdaki örnekte, resmin genişliği 104 piksel, yüksekliği 142 piksel olarak ayarlanmıştır.
Resim dosyası, html doyası ile aynı klasör içinde değilse yolu da değişir. Örneğin resim dosyası, html dosyasının bulunduğu yerde ama "resimler" adlı bir klasörün içinde olsaydı, o zaman src özelliği:
src="resimler/resmim.jpg"
şeklinde yazılmalıydı.
src="resimler/resmim.jpg"
şeklinde yazılmalıydı.
Hiç yorum yok:
Yorum Gönder