TEMEL BODY TAGLARI
TEMEL BODY TAGLARI
Herkese merhaba! Temel HTML taglarından bahsetmiştik geçtiğimiz
yazımızda. Bu yazımızda ise biraz daha detaya inip, HTML iskeletimizin body(vücut)
bölümünü ele alacağız. Peki body nedir? Temel body etiketleri (tags) nelerdir? Gelin
bugünkü yazımızda bu sorularımızın cevabına birlikte göz atalım.
Body, internet
adresimizin içerik bölümünü oluşturduğumuz, header, paragraf, image gibi bir
internet sayfasının temel etiketlerini içerisinde barındıran HTML kod bloğudur.
Sitemizin genel içerik yapısını tanımlayacağımız kısım tam da burası. O zaman
ne bekliyoruz? İçerik tasarımımıza başlayalım.
Öncelikle sitemize “HOŞGELDİNİZ!” başlığını koyarak
başlayalım. Başlık için HTML header kod blog yapısını kullanacağız. Header
yapısı 6 temel boyuttan oluşuyor. Bu boyutlar sırasıyla; h1, h2, h3, h4, h5, h6.
Başlığımızı <h1></h1> etiketlerinin arasına yazıyoruz.
TEMEL HEADER
BOYUTLARI
HTML KODUMUZ:
<!DOCTYPE html>
<html>
<head>
<title>Furkanın web sitesi </title>
</head>
<body>
<h1>HOŞGELDİNİZ!</h1>
</body>
</html>
WEB GÖRÜNÜMÜ
HTML KODUMUZ:
<!DOCTYPE html>
<html>
<head>
<title>Furkanın web sitesi</title>
</head>
<body>
<h1>HOŞGELDİNİZ!</h1>
<p>Bu bir yazılım eğitimidir.</p>
</body>
</html>
WEB GÖRÜNÜMÜ:
Şuan için gayet iyi gidiyorsunuz! “Her şey güzel ama ben
cümlemdeki yazılım eğitimidir kısmındaki yazılım kelimesini vurgulamak
istiyorum.” diyelim. Bu sorumuzun çözümü için ise HTML bold kod blog yapısını
kullanarak, belirginleştirmek istediğimiz yazımızı <b></b> etiketlerinin
arasına alıyoruz.
HTML KODUMUZ:
<!DOCTYPE html>
<html>
<head>
<title>Furkanın web sitesi</title>
</head>
<body>
<h1>HOŞGELDİNİZ!</h1>
<p>Bu bir <b>yazılım</b> eğitimidir.</p>
</body>
</html>
WEB GÖRÜNÜMÜ:
Evet, yazımız istediğimiz gibi belirgin oldu. Belirgin oldu
ama estetik durmadı. Bu kelimemizi biraz daha estetik yapalım mı? Ne dersiniz? Kelimemizi
estetik yapmak için HTML italik kod blog yapısını kullanabiliriz. İtalik kod blog
yapısını kullanmak için kelimemizi bold etiketiyle birlikte <i></i>
etiketinin içerisine alıyoruz.
HTML KODUMUZ:
<!DOCTYPE html>
<html>
<head>
<title>Furkanın web sitesi</title>
</head>
<body>
<h1>HOŞGELDİNİZ!</h1>
<p>Bu bir <i><b>yazılım</b></i> eğitimidir.</p>
</body>
</html>
WEB GÖRÜNÜMÜ:
Son olarak sitemize bir de resim ekleyelim ve tamamlayalım. Sitemize resim eklemek için image kod blog yapısınu kullanmamız gerekiyor. İmage kod blog yapısının içerisindeki src, resmi getirmek için gidilecek hedefi belirttiğimiz kısım. Src’ nin içerisine, koyacağımız resmi, uzantısı ve hedefiyle beraber yazıyoruz.
HTML KODUMUZ:
<!DOCTYPE html>
<html>
<head>
<title>Furkanın web sitesi</title>
</head>
<body>
<h1>HOŞGELDİNİZ!</h1>
<p>Bu bir <i><b>yazılım</b></i> eğitimidir.</p>
<img src="./furkan.jpg">
</body>
</html>
WEB GÖRÜNÜMÜ:
Akıllarda soru işareti kalmaması adına açıklayalım. Src de
hedef olarak belirttiğimiz klasör ‘./’ yani yazdığımız furkan.html dosyamızın
içinde bulunduğu klasörün ta kendisi. Bir üst klasöre çıkmak istersek ‘../’
yazmamız gerekiyor hedef klasörü belirtmek için. Koyduğumuz resim ile birlikte bir
web sitesinin içeriklerinin temel yapısını oluşturmuş olduk. Tabi ki sizlerin hayal
gücü ile oluşturduğumuz bu temel yapı daha da zenginleştirilebilir ve/veya
yapılandırılabilir.
Genel olarak yazımızı toparlamak gerekirse, oluşturduğumuz temel
body yapımızın içerisinde header, paragraf, bold, italik ve image etiketlerini
kullandık. Bu etiketlerimiz her birini de çıktılarıyla beraber inceledik. Bir
sonraki yazımızda ise “Evet genel yapıyı oluşturduk. Peki ben bu yapıyı nasıl
biçimlendirebilirim?” sorusunun cevabı olan web biçimlendirme dilini yani CSS’i
inceleyeceğiz. Bir sonraki yazımızda görüşmek üzere. Web’le kalın. Hoşça kalın!
0 yorum