HTML Etiketler 4

01.01.2019

30.000

Web sayfaalarında kullanılan HTML dili etiketleri konu anlatımı. Metin düzenleme etiketleri konu anlatımı.

Metin Düzenleme Etiketleri

A.Başlık Etiketleri (<h?>….</h?>)

Web sayfasında istenilen büyüklükte başlıklar oluşturmak için <h?>…</h?> etiketi kullanılır. ? yerine 1-6 arası bir sayı gelir.<h1> en büyük başlık, <h6> en küçük başlıktır. Bu etiket ile yazı hem kalın olur hem de alt satıra kendisi geçer.

Paremetre	Değer	Açıklama
align	Left (sola yaslı) center (ortala) right (sağa yaslı) justify (her iki yana yaslı)	align, yazının yataydaki yerini belirler.

Sayfa Görünümü

HTML kodları

Başlık Etiketleri

<h1>Başlık Etiketleri</h1>

<h2>Başlık Etiketleri</h2>

<h3>Başlık Etiketleri</h3>

<h4>Başlık Etiketleri</h4>

<h5>Başlık Etiketleri</h5>

<h6>Başlık Etiketleri</h6>

Örnek 1: Aşağıdaki başlıkları oluşturalım.

<html>
   <head>
      <title>Başlık Etiketleri</title
   </head>
   <body>
      <h1 align="right">Başlık Sağda</h1>
      <h2 align="center">Başlık Ortada</h2>
      <h3 align="left">Başlık Solda</h3>
      <h4 align="justify">Başlık İki Yana Yaslı</h4>
      <h5>Başlık Varsayılan Olarak Solda</h5>
      <h6>Başlık Varsayılan Olarak Solda</h6>
   Bu satır normal yazı başlık olmayan bir yazı
   </body>
</html>

Kodlar çalıştırıldığında web sayfamız aşağıdaki gibi görüntülenecektir.

B.Kalın Yazı Etiketi (<b>……</b>)

Arasındaki metinleri kalın (bold) yazar.

Sayfa Görünümü	HTML kodları
Şimdi kalın yazı etiketlerini işliyoruz. Devamında diğer HTML Etiketlerini işlemeye devam edeceğiz.	Şimdi <b>kalın yazı</b> etiketlerini işliyoruz. Devamında diğer <b>HTML Etiketlerini</b> işlemeye devam edeceğiz.

C.Eğik Yazı Etiketi (<i>……</i>)

Arasındaki metinleri eğik (italik) yazar.

Sayfa Görünümü	HTML kodları
Şimdi eğik yazı etiketlerini işliyoruz. Devamında diğer HTML Etiketlerini işlemeye devam edeceğiz.	Şimdi <i>eğik yazı</i> etiketlerini işliyoruz. Devamında diğer <i>HTML Etiketlerini</i> işlemeye devam edeceğiz.

D.Altı Çizili Etiketi (<u>……</u>)

Arasındaki metinleri altı çizili (underline) yazar.

Sayfa Görünümü	HTML kodları
Şimdi altı çizili yazı etiketlerini işliyoruz. Devamında diğer HTML Etiketlerini işlemeye devam edeceğiz.	Şimdi <u>altı çizili yazı</u> etiketlerini işliyoruz. Devamında diğer <u>HTML Etiketlerini</u> işlemeye devam edeceğiz.

E.Paragraf Etiketi (<p>……</p>)

Arasındaki metne paragraf özelliği kazandırır. Kapanışından sonra bir alt satıra geçerek boşluk bırakır. Başlık etiketlerinde olduğu gibi hizlamak için align parametresine sahiptir.

Paremetre	Değer	Açıklama
align	Left (sola yaslı) center (ortala) right (sağa yaslı) justify (her iki yana yaslı)	align, yazının yataydaki yerini belirler.

Örnek 2: Aşağıdaki paragraf etiketlerine ait kodları yazalım.

<html>
	<head>
		<title>Başlık Etiketleri</title>
	</head>
	<body>
		<p>Bilişim Teknolojileri gün geçtikçe hemen her alanda karşımıza çıkmaktadır. Bu nededenle BT'nin önemi artmaktadır. </p>
		
		<p align="justify">Bilgisayarı oluşturan parçaların başında <b>Anakart, İşlemci, RAM Bellek, Ekran Kartı</b> gelmektedir.</p>
		
		<p align="center"><u>İşlemci</u>, bilgisayarın beyni gibidir.</p>
	</body>
</html>

Kodlar çalıştırıldığında web sayfamız aşağıdaki gibi görüntülenecektir.

F.Font Etiketi (<font>……</font>)

Font etiketi sahip olduğu parametreler sayesinde metinlerin renk, yazı tipi, boyut gibi özelliklerini değiştirmenize olanak sağlar. Parametreleri ile beraber kullanım şekli aşağıdaki gibidir.

<font face=“yazıtipi” size=“boyut” color=“renk”>………</font>

Paremetre	Değer	Açıklama
face	arial, times new roman, tahoma, verdana, …	Yazı tipini ifade eder. Sistemdeki yazı tiplerinden birinin adı yazılır.
size	1-7 arası bir sayı alır	Metnin büyüklüğünü ayarlar. Bu değişkene -1, +2 gibi değerler verilerek metnin büyüklüğünün bir eksiltilmesini veya iki artırılmasını sağlayabilir.
color	red, green, blue, … #FFFFFF, #000000, #C0C0C0, #FFFF00, #FF0000, …	Yazını rengini ayarlar. Renklerin İngilizce adları yada rengin hexadecimal kodu kullanılır.

Bazı HTML Color (Renkler) ve İngilizce isimleri şöyledir.

Eğer renk Hexadecimal olarak yazılacaksa renk kodunun önüne # işareti konulur sonra da 6 haneden oluşan renk kodu yazılır. Her hane 0,1,2,3,4,5,6,7,8,9,A,B,C,D,E,F değerlerinden birini alabilir. Örnek verecek olursak #DB823E, #000000, #EFAAA7, #FFFFFF…

Örnek 3: Aşağıdaki font etiketine ait kodları yazalım.

<html>
	<head>
		<title>Font Etiketi</title>
	</head>
	<body>
		<font face="comic sans ms" size="8" color="red">Bilişim Teknolojileri</font><br>
	    <font face="arial">WEB</font><br>
	    <font size="6">Tasarımı</font><br>
	    <font color="#AAA000">ve Programlama</font><br>
	</body>
</html>

Kodlar çalıştırıldığında web sayfamız aşağıdaki gibi görüntülenecektir.

G.Diğer HTML Etiketleri

Etiket	Tanımlama
<s>, <strike>	İçerdiği metnin ortası çizili gösterileceğini belirtir.
<center>	İçerdiği metini ortalar. Yanına yazı yazıldığında yazılar alt satıra geçer.
<br>	Düz metin içeriğinde bir satır alta geçilmesini sağlar. Kapanışı yoktur.
<big>	İçerdiği metnin yazı tipini değiştirmeden biraz daha büyük gösterilmesini sağlar. Bir kereden fazla kullanıldığında ilgili metnin daha da büyümesini sağlar.
<small>	İçerdiği metnin ufak boyutlu gösterileceğini belirtir. İçiçe bir kereden fazla kullanıldığında metnin daha da küçülmesini sağlar.
<strong>	İçerdiği metnin kalın (bold) gösterilerek vurgulanmasını sağlar.
<em>	İçerdiği metnin yatık (italik) gösterilerek öneminin vurgulanmasını sağlar.
<tt>	İçerdiği metnin sabit genişliğe sahip yazı tipi (font) ile gösterilmesini sağlar.
<sub>	Subscript(alt simge)
<sup>	Superscript(üst simge)
<hr>	Sayfanın eklendiği yerinde yatay çizgi oluşturulmasını sağlar.
<blockquote>	İçerdiği metnin geniş bir alıntı içeriği olduğunu belirtir. BLOCKQUOTE etiketinin içeriği blok olarak gösterilir.
<marquee>	Kayan yazı

Örnek 4: Aşağıdaki diğer HTML etiketlerine ait kodları yazalım.

<html>
	<head>
		<title>Diğer HTML Etiketleri</title>
	</head>
	<body>
		<center><big><i>Bilişim Teknolojileri WEB Sitesi</i></big></center>
		<hr>
		<u>Ders Notları</u>: 
		<b>Deneme Sınavları</b>, <i><s>Konu Anlatımları</s></i>, <b><s>Videolu Dersler</s></b><br><br>
		<marquee><center><small>www.bilisimizle.com</small></center></marquee><br>
		<tt>İpuçları <strong>sayfasında </strong>pratik bilgilerin çözümleri yer alacaktır.</tt><br>
		Teknoloji sayfasında <em>teknolojiyle alakalı bilgilere </em>yer verilcektir.
		<hr><br><br>
		B<sub>ilişim</sub> İzle<br>
		x<sup>2</sup> = 81 <br>
		x<sup>2</sup> + y<sup>3</sup> = 29 <br>
		<sup>a</sup>X<sub>3</sub><sup>2</sup>
	</body>
</html>

Kodlar çalıştırıldığında web sayfamız aşağıdaki gibi görüntülenecektir.