Text

Kategori: HTML , 25 Ekim 2019 , JanFranco


Bir önceki yazımda genel web sayfası yapısından bahsetmiştim. Bu yazımda ise sayfalardaki yazılardan bahsedeceğim.

Hemen hemen girdiğimiz her websitesinde bir paragraf mevcutsa, bir başlık da mevcuttur. HTML'de başlıklar için h yani heading etiketini kullanırız. 6 farklı başlık seviyesi mevcuttur. h1, h2 ... şeklinde gider. h1 ile tanımlanan başlıklar en büyük başlıklardır yani main heading diyebiliriz. h2 ile tanımladığımız başlıklar, ana başlıkların alt başlıkları olarak düşünülebilir. Daha küçük başlıklar için 3, 4, 5, 6 değerlerini de kullanabiliriz. Bir örnek görelim:


<h1>This is a Main Heading</h1>
<h2>This is a Level 2 Heading</h2>
<h3>This is a Level 3 Heading</h3>
<h4>This is a Level 4 Heading</h4>
<h5>This is a Level 5 Heading</h5>
<h6>This is a Level 6 Heading</h6>
html-texts

Paragraflar için p yani paragraph etiketini kullanabiliriz. Birden çok paragraf yazdığımız durumlarda her bir paragraf için ayrı bir p etiketi kullanmalıyız. Böyle bir kullanımda her paragraf arasında boşluk da bırakmış oluruz:


<p>A paragraph consists of one or more sentences that form a self-contained unit of discourse. The start of a paragraph is indicated by a new line.</p>
<p>Text is easier to understand when it is split up into units of text. For example, a book may have chapters. Chapters can have subheadings. Under each heading there will be one or more paragraphs.</p>
html-texts

Yazdığımız yazıları kalın ve italik hale getirmek için b ve i etiketlerini kullanabiliriz. Bu etiketler sadece yapısal değişiklik sağlar. Anlamda bir değişiklik olmaz. Örneğin b/a word/b şeklinde bir kullanım yaptığımızda, "a word" metninin kalınlaştırmış oluruz. Bu yapısal bir değişikliktir. Kelimenin, yazının anlamında bir değişiklik olmaz. Bu dediğimiz birazdan daha iyi anlayacağız, b ve i etiketleri ile bir örnek yapalım:


<p>This is <b>how</b> we make a word appear <i>italic</i>.</p>
<p>It's a potato <i>Solanum teberosum</i>.</p>
<p><b>Captain Cook</b> sailed to Australia on the<i>Endeavour</i>.</p>
html-texts

sup ve sub etiketleri ile üst ve alt karakter tanımlayabiliriz. Bir sayının üslü ifadesini veya bir elementi belirtirken kullanabiliriz:


<p>On the 4<sup>th</sup> of September you will learn
about E=MC<sup>2</sup>.</p>
<p>The amount of CO<sub>2</sub> in the atmosphere
grew by 2ppm in 2009<sub>1</sub>.</p>
html-texts

Bir alt satıra geçmek için br etiketini, bir alt satıra geçip arada uzun düz bir çizgi bırakmak için hr etiketini kullanabiliriz:


<html>
    <body>
	    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
	    <br>
	    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
		<hr>
		Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </body>
</html>
html-texts

Yukarıda bahsettiğim tüm özellikler yapısal değişikliklerdi. Bir metni kalınlaştırmak, italikleştirmek, yeni satıra geçmek, paragraf belirtmek gibi. Şimdi göreceğimiz özellikler anlamsal değişiklikler sağlayacak. Bir metnin önemini vurgulamak için strong etiketini, bir metinde vurgulanması gereken kısmı belirtmek için em etiketini kullanırız:


<p><strong>Beware:</strong> Pickpockets operate in
this area.</p>
<p>This toy has many small pieces and is <strong>not
suitable for children under five years old.
</strong></p>

<p>I <em>think</em> Ivy was the first.</p>
<p>I think <em>Ivy</em> was the first.</p>
<p>I think Ivy was the <em>first</em>.</p>
html-texts

Uzun alıntılar için blockquote etiketini, cümle içindeki alıntılar için q etiketini kullanabiliriz:


<blockquote>
<p>Did you ever stop to think, and forget to start
again?</p>
</blockquote>
<p>As A.A. Milne said, <q>Some people talk to
animals. Not many listen though. That's the
problem.</q></p>
html-texts

Eğer kısaltma kullanıyorsak, bu kısaltmanın açılımını, mouse ile kısaltmanın üzerine gelindiğinde çıkan pencerede belirtebiliriz. Bunun için abbr etiketini kullanırız:


<p><abbr title="Professor">Prof</abbr> Stephen
Hawking is a theoretical physicist and
cosmologist.</p>
<p><acronym title="National Aeronautics and Space
Administration">NASA</acronym> do some crazy
space stuff.</p>
html-texts

Bir kitabı, filmi vs. referans gösteriyorsak cite etiketini kullanabiliriz. Ayrıca metinde yeni bir terim kullanıyorsak dfn etiketleri içerisinde belirtebiliriz. Tekrar hatırlatayım, anlamsal değişiklik yaratan özellikleri inceliyoruz. Tarayıcılar genellikle cite etiketleri arasında yazılan metinleri italik gösterir, dfn etiketleri içerisindeki yazılarda ise gözle görülür herhangi bir değişiklik olmaz.


<p><cite>A Brief History of Time</cite> by Stephen
Hawking has sold over ten million copies
worldwide.</p>
<p>A <dfn>black hole</dfn> is a region of space from
which nothing, not even light, can escape.</p>
Adres belirtirken address etiketini kullanabiliriz:


<address>
<p><a href="mailto:homer@example.org">
homer@example.org</a></p>
<p>742 Evergreen Terrace, Springfield.</p>
</address>
Metne yeni bir kelime eklediğimizi vurgulamak için ins, sildiğimizi vurgulamak için del etiketlerini kullanabiliriz. Kullandığımız bir ifadening artık gerçek olmadığını vurgulamak için ise s etiketini kullanabiliriz. Örnek görelim:


<p>It was the <del>worst</del> <ins>best</ins> idea
she had ever had.</p>
<p>Laptop computer:</p>
<p><s>Was $995</s></p>
<p>Now only $375</p>
html-texts


Sonraki Yazı: Creating Lists
Yorumlar

Henüz bir yorum bulunmuyor.
Yorum bırakın