HTML Temel Örnekleri
Bu bölümde bazı temel HTML örneklerini göstereceğiz.
Henüz öğrenmediğiniz etiketleri kullanırsak endişelenmeyin.
HTML Belgeleri
Tüm HTML belgeleri, bir belge türü bildirimi ile başlamalıdır: <!DOCTYPE html>
.
HTML belgesinin kendisi ile başlar <html>
ve ile biter </html>
.
HTML belgesinin görünen kısmı ve <body>
arasındadır </body>
.
Örnek
<!DOCTYPE html>
<html>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
<!DOCTYPE> Bildirimi
Bildirim , <!DOCTYPE>
belge türünü temsil eder ve tarayıcıların web sayfalarını doğru bir şekilde görüntülemesine yardımcı olur.
Sayfanın en üstünde (herhangi bir HTML etiketinden önce) yalnızca bir kez görünmelidir.
Bildirim büyük / <!DOCTYPE>
küçük harf duyarlı değildir.
<!DOCTYPE>
HTML5 için bildirim :
<!DOCTYPE html>
HTML Başlıkları
HTML başlıkları <h1>
to <h6>
etiketleriyle tanımlanır.
<h1>
en önemli başlığı tanımlar. <h6>
en az önemli başlığı tanımlar:
Örnek
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
HTML Paragrafları
HTML paragrafları şu <p>
etiketle tanımlanır:
Örnek
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
HTML Bağlantıları
HTML bağlantıları şu <a>
etiketle tanımlanır:
Örnek
<a href="https://www.w3schools.com">This is a link</a>
Bağlantının hedefi href
öznitelikte belirtilir.
Nitelikler, HTML öğeleri hakkında ek bilgi sağlamak için kullanılır.
Nitelikler hakkında daha sonraki bir bölümde daha fazla bilgi edineceksiniz.
HTML Görselleri
<img>
HTML resimleri etiketi ile tanımlanır .
Kaynak dosya ( src
), alternatif metin ( alt
),
width
ve height
nitelikler olarak sağlanır:
Örnek
<img src="w3schools.jpg" alt="W3Schools.com" width="104" height="142">
HTML Kaynağı Nasıl Görüntülenir?
Hiç bir Web sayfası gördünüz ve "Hey! Bunu nasıl yaptılar?" Diye merak ettiniz mi?
HTML Kaynak Kodunu Görüntüle:
Bir HTML sayfasına sağ tıklayın ve "Sayfa Kaynağını Görüntüle" (Chrome'da) veya "Kaynağı Görüntüle" (Edge'de) veya diğer tarayıcılarda benzerlerini seçin. Bu, sayfanın HTML kaynak kodunu içeren bir pencere açacaktır.
Bir HTML Öğesini İnceleyin:
Bir öğeye (veya boş bir alana) sağ tıklayın ve hangi öğelerden oluştuğunu görmek için "İncele" veya "Öğeyi İncele"yi seçin (hem HTML'yi hem de CSS'yi göreceksiniz). Ayrıca, açılan Öğeler veya Stiller panelinde HTML veya CSS'yi anında düzenleyebilirsiniz.