Herkese merhabalar, serinin 4. bölümüne hoşgeldiniz. Bu seri oldukça hoşuma gitmeye başladı çünkü hem tekrar etmiş oluyorum hem de sizlerin yorumlarıyla daha da motive oluyorum. Destekleyen herkese teşekkür ederim. Serinin sonunda benimle neler yaptığınızı paylaşabilirsiniz.
İsterseniz çok beklemeden başlayalım.
Html dosyaları çok sayıda farklı etiket ve türden oluşuyor. Bu öğelerden bazıları satır içi öğe olarak bazıları ise blok halinde bilinir. Şimdi bu ikisi arasındaki farkları inceleyelim.
Satır içi öğeler tarayıcıda yan yana sıralanır ve içeriğin ihtiyacında daha fazla yer kaplamazlar. Bu nedenle satır içi öğelere birkaç örnek verelim. Resim etiketi , bağlantı etiketi, güçlü metin etiketi (Storng) eğer bunları bir html dosyası içerisine yerleştirirseniz sayfada yer kalmayana kadar yan yana duracaklardır.
`<span> <a> <stong> <img>`
-Blok düzeyindeki öğeler ise sayfanın tüm genişliğini kaplar ve yan yana oturmazlar, her zaman yeni satır üzerinde başlarlar. Blok düzeyinde bazı örnekler verecek olursak; bir div , bir blok, h1 h2 h3 vb. oluşturmak için bir paragraftan alıntılar alır. Bir Html dosyasının içine bir dizi blog düzeyinde öğe yazıp bunu tarayıcıda açmış olsaydık;
<p>
<div>
<p> etiketi bir paragraf etiketi ve bunu tarayıcıda gördüğümüzde tüm alanı kaplayacak şekilde görürdük. Ayrıca her biri yeni bir satırda gözükecektir.
Şimdi bu iki farklı türde öğeyi satır ve blok düzeyinde bulundurmanın arasındaki mantığı anlatacağım:
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, **<a href=”hakanbudak.com”>** **hakan </a>** quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
Tam burada bir paragrafımızın olduğunu hayal edelim. Paragrafı açıp kapatıyoruz. <p> </p>. İçeride bir bağlantı etiketimiz var. Buradaki eleman satır içi bir eleman böylece yeni bir satırda başlamaz ve sadece içerik için alan kaplar. Yeni bir satırda görünmesini istemediğimiz için kullanırız. Buraya yeni bir paragraf ekleyecek olsaydık bunun yeni bir satırda görünmesini isterdik. Çünkü blog düzeyinde bir öğedir. Bu nedenle tipik olarak bunun gibi satır içi öğeleri blok düzeyindeki öğelerin iç içe geçmiş olarak görürsünüz. Ancak blok düzeyindeki öğeleri başka bir blog düzeyinde de görebilirsiniz. Şimdi hep beraber bunun kodda nasıl görüneceğine bir göz atalım.
Yaptığımız tüm içerikleri burada silip farklı bir içerikle çalışalım:
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="styles.css">
<title>Css Learning</title>
</head>
<body>
<h2>Incline Elements</h2>
<span>span tag</span>
<em>em tag </em>
<a href="">anchor tag</a>
<span>span tag</span>
</body>
</html>
Burada gördükleriniz o kadar basit ki
Satır içi öğelerin başlığına sahip h2 ye sahibiz. İronik olacak çünkü bu bir satır içi öğe değil 🙂
Onun hemen altında bir span, bir em , bir bağlantı etiketi ve tekrardan bir span etiketimiz var.
Bunu kaydedecek olsaydık aşağıdaki şekilde ki gibi gözükmüş olurdu.