DERS-5) Metin Elementleri

yorumsuz
389 kez okundu

Merhaba arkadaşlar, bir önceki yazımızda Başlık Elementleri’ni öğrenmiştik. Bu yazımızda ise Metin Elementlerini öğreneceğiz.

Bir websitede başlıklar haricinde yazılar da bulunmaktadır. Bazı yazıların renkli, bazı yazıların italik, bazılarının ise dikkat çekmek için ya daha kalın ya da üstü belirli bir renkle çizilmiş bir şekilde olabildiğini başka sitelerden görebiliriz. Peki biz bu yazıları nasıl yapabiliriz? Bu yazıları yazabilmek için HTML’de metin elementleri bulunmaktadır. Bunlar: p, span, div, em, strong, mark, small, br olmak üzere 6 adettir.

“p” METİN ELEMENTİ: Paragraftan ismini almaktadır. Cümleyi daha altta paragrafmış gibi bir satır boşluk bırakarak yazabilmemizi sağlar. Bunu görmek için bir örnek yapalım.

p kod

Açılan kod sayfasının <body>…</body> kısmına yukarıdaki yazıyı yazalım ve ekranda nasıl görüldüğüne bakalım.

p çıktı

Görüldüğü gibi “p” metin elementi içine yazılan yazıyı alt satır yapıp yeni paragrafmış gibi yazdı.

“span” METİN ELEMENTİ: Bir container(kapsayıcı)dır.Bu element yardımıyla yazdığımız yazıların “style”rinde değişiklikler yapabiliriz. Alt satıra inmez. Yine bir örnekle pekiştirelim. Görmek istediğimiz yazıyı <body>…</body> tag’ları arasına yazalım.

span kod

Bu yazının ekran görüntüsü,

span çıktı

gibi olur. Görüldüğü gibi “span” elementi yardımıyla yazımıza kırmızı rengini verdik.

“div” METİN ELEMENTİ: Bir container(kapsayıcı)dır.Bu element yardımıyla yazdığımız
yazıların “style”rinde değişiklikler yapabiliriz. “div” ile yazılan yazılar alt satırdan başlar.

div kod

Kodu yazılırsa ekran görüntüsü,

div çıktı

şeklinde olacaktır.

“em” METİN ELEMENTİ: İtalik yazı yazabilmemizi sağlar. Websitemizde birinin bir
sözünü paylaşmak isteyebiliriz.

em kod

Bu kodun ekran çıktısı,

em çıktı

şeklinde olacaktır.

“strong” METİN ELEMENTİ: Yazılarımızın daha siyah ve belirgin yazılması için
kullanılır.

strong kod

Bu kodun ekran görüntüsü aşağıdaki gibi olacaktır.

strong çıktı

“mark” METİN ELEMENTİ: Önemli olduğunu düşündüğümüz yazıların göze çarpan bir
şekilde yazabilmemiz için kullanılır.

mark kod

Bu kodun ekran görüntüsü aşağıdaki gibi olacaktır.

mark çıktı

“small” METİN ELEMENTİ: Önem vermediğimiz ama websitesinde bulunmasını istediğimiz
yazıları yazmak için bu metin elementini kullanabiliriz.

small kod

Bu kodun ekran görüntüsü aşağıdaki gibi olacaktır.

small çıktı

“br” METİN ELEMENTİ: Alt satıra inmemizi sağlar.<br> ve <br /> kullanılabilir.

br kod

Bu kodun ekran görüntüsü aşağıdaki gibi olacaktır.

br çıktı

Bir sonraki yazımızda “Liste Elementleri” ni öğreneceğiz. Sonraki dersmizde görüşmek üzere,

İyi günler…:)


Sosyal Medyada Paylaş Facebook Twitter Google+
Etiketler: , , , ,
Eklenme Tarihi: 5 Ekim 2015

Facebook Yorumları

Konu hakkında yorumunuzu yazın


Time limit is exhausted. Please reload the CAPTCHA.