Vurgu ve ayrım
Önemli bölümleri vurgular ve yatay çizgiyle ayırırsın.
Vurgu ve ayrım: mark, hr, br
Tanıtım metni hazır. Şimdi önemli sözcükleri işaretleyip bölümleri ayıracaksın. Üç etiket işine yarayacak.
<mark> bir sözcüğü ışıklı olarak işaretler; ziyaretçinin gözü hemen oraya gider. <hr> konu değişimini işaretleyen yatay bir çizgi çizer. <br> ise aynı paragraf içinde satır kırma yapar; adres ya da şiir gibi durumlarda işe yarar.
mark ve br: işaretleme ve satır kırma
<mark> ve <br> farklı amaçlara hizmet eder. <mark> bir sözcüğü ya da ifadeyi işaretler; tarayıcı arka planı sarı yapar. Önemli noktayı vurgulamak için idealdir.
<br> ise satır kırma yapar; bir paragraf içinde yeni satıra geçmek için kullanılır. Boş etikettir, yani kapanış etiketi yoktur. Adres ya da şiir yazarken işine yarar.
Uygulama hr, mark ve br ile vurgu ve ayrım ekle
Önceki dersin tanıtım metni içeren body'sini al. İkinci paragraftan sonra bir <hr> ekle. Hr'den sonra bir <p> ekle ve içinde bir sözcüğü mark ile işaretle (örnek açık kaynak). Son olarak bir <p> daha ekle ve içinde br ile satır kır (örnek hobiler).
Örnek çözümü göster
<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Ayşe Yılmaz - Hakkımda</title>
</head>
<body>
<h1>Ayşe Yılmaz</h1>
<h2>Yazılım geliştirici</h2>
<p>Merhaba! Ben Ayşe. <strong>Web tabanlı uygulamalar</strong> geliştiriyorum ve açık kaynağa <em>katkıda</em> bulunmayı severim.</p>
<p>Bu sayfada kendimi kısaca tanıtıyorum.</p>
<hr>
<p>En sevdiğim alan <mark>açık kaynak</mark>.</p>
<p>Hobilerim:<br>kitap okumak ve doğa yürüyüşü.</p>
</body>
</html>Kendini test et
-
Bu projede <hr> etiketi nereye en uygun konur?
- Sayfanın en üstüne, h1'den önce
- Her paragraftan sonra
- Title etiketinin içine
- Tanıtım paragrafları ile vurgular arasında
Cevabı göster
Tanıtım paragrafları ile vurgular arasında — Doğru. hr konu değişimini işaretler; tanıtımdan vurgulara geçiş buna uyar.
-
Bölüm ayrımı için etiketi tamamla
<p>Birinci bölüm</p> <____> <p>İkinci bölüm</p>Cevabı göster
<p>Birinci bölüm</p> <hr> <p>İkinci bölüm</p> -
Etiketleri anlamlarıyla eşleştir
- mark
- İşaretli sözcük
- hr
- Konu ayrımı
- br
- Satır kırma
- strong
- Önemli metin
- em
- Vurgulu metin