HTML Nedir?
Html(Hyper Text Markup Language) bir programlama dili değildir. Bir etiket dilidir. Programlama dilleri bilgisayarla konuşmamızı sağlarken Html web tarayıcıyla konuşmamızı sağlar. Etiketlerin temel hiyerarşi kullanımı <></> şeklindedir. Basit bir şekilde notepad ile yazılabilir. Fakat genelde Web Developer/Web Designer 'lar Notepad++ uygulamasını tercih ederler.
●Html bir programlama değil, etiket dilidir.
●Html bir web sitesinin temel iskeletini oluşturur.
●Html ile birlikte CSS kullanılır. Yani Html olmadan CSS, CSS olmadan Html olmaz diyebiliriz. (Tabi sadece Html kullanarak website oluşturabiliriz. Fakat site çok yetersiz kalacaktır.)
Html İskeleti Oluşturma
Html dilinde temel şekilde iskelet kodlarımız aşağıda görüldüğü şekildedir;
Kod:
<!DOCTYPE HTML>
<html>
<head>
<title>cyberX</title>
</head>
<body>
İçerik kısmı burası...
</body>
</html>
<html> Etiketi
Html etiketi kullandığımız editörün Html olduğunu belirtmek amacıyla, zorunlu olarak kullanılan bir etikettir. Kapanan etiketlerden birisidir. İçine Head ve Body yazılır.
<head> Etiketi
Head etiketi sitemizin görünmeyen kısmını oluşturur. Title kısmı hariç. Headin içine title etiketi açtığımız zaman bu etiket başlığı belirtir. Tarayıcımızda sekme kısmında başlık Title etiketini temsil eder. Onun dışındakiler sitede görünmez. İçine Style etiketi açıp yazarsak CSS ile bağlantıyı head etiketi içinden sağlamış oluruz.
<body> Etiketi
Body etiketi sitemizin görünen kısmıdır. Yani arayüzüdür. İçine yazılarımızı, başlıklarımızı, fotoğraflarımızı vb. ekleyebiliriz. İçinde kullandığımız temel etiketlerden bahsedelim;
<p> Etiketi
Paragraf açmaya yarayan etikettir. Bu etiketi açmadan yazı yazarsak alt satıra geçiremeyiz. Bu etiket ile kullanırsak araya bir boşluk bırakıp alt satıra geçirecektir. Kapatılarak kullanılan etiketlerdendir. CSS ile özelleştirebiliriz.
Kullanımı;
Kod:
<body>
<p> İlk paragrafım.... </p>
</body>
<h1....6> Etiketleri
H etiketleri başlık anlamına gelmektedir. 1 den 6 ya kadar kullanımı mevcuttur. Fakat burada sayı ile punto ters orantılıdır. En büyük başlığı yapmak için <h1> , en küçük başlığı yapmak için <h2> kullanırız. Yine kapatılarak kullanılan bir etikettir. CSS ile özelleştirilebilir.
Kullanımı;
Kod:
<body>
<h1>cyberX</h1>
<h2>cyberX</h2>
<h3>cyberX</h3>
<h4>cyberX</h4>
<h5>cyberX</h5>
<h6>cyberX</h6>
</body><hr/> Etiketi
Horizontal etiketi bir başlık, paragraf veya herhangi bir yazının altına yatay,ince bir çizgi çekmek için kullanılır. Kendi içinde kapatılan bir etikettir. Kullanımı basittir.
Kullanımı;
Kod:
<body>
<h1> cyberX</h1>
<hr/>
</body><br/> Etiketi
Basit anlatmak gerekirse Br etiketi enter tuşu görevini görür. Cümlemizi bitirdikten sonra bu etiketi girerek bir satır atlayabiliriz. Konunun başında bunu <p> etiketi ile yapabileceğimizi söylemiştim. Aynı zamanda <br/> etiketi ile de yapabiliriz. Kendi içinde kapanan bir etikettir. Kullanımı basittir.
Kullanımı;
Kod:
<body>
TurkHackTeam'den saygılar. <br/>
CyberXhackk..
</body><ul> ve <ol> Etiketi
Ul ve Ol etiketi liste etiketleridir. Ul sırasız liste, Ol ise sıralı liste demektir. Etiketi açıp boşluk bıraktığımız zaman her liste elemanı için <li> etiketini kullanırız. Kapatılan bir etikettir.
Kullanımı; (ul etiketi)
Kod:
<body>
<ul>
<li>Html</li>
<li>Css</li>
<li>Php</li>
<li>JavaScript</li>
</ul>
</body>Kullanımı; (ol etiketi)
Kod:
<body>
<ol>
<li>Pardys</li>
<li>Parrot Os</li>
<li>Manjaro</li>
<li>Linux Mint</li>
</ol>
</body><!-- Yorum satırları
Her programlama dilinde olduğu gibi, Html etiket dilinde de yorum satırı mevcuttur. Yorum satırları kullanıcının nerde ne olduğunu unutmamak adına veya okuyan kişiye bilgi vermek adına yorum satırları oluşturur.
Kullanımı;
Kod:
<!-- Bu bölüm web sayfasında görünmeyecektir -->Metin Biçimlendirme Etiketleri
Yazılarımızı özelleştirebileceğimiz etiketler bulunmaktadır bunlardan bahsedelim biraz.
<b> Etiketi
Bolddan gelir. Yazıyı kalın yapmaya yarar. Biz zaten forumda bu etiketi.kullanıyoruz. Tek farkı < yerine [ kullanıyoruz. Kapatılan bir etikettir.
Kullanımı;
Kod:
<b>Kalın(Bold) Yazı</b><em> veya <i> Etiketleri
İtalik yazmaya yarayan etiketlerimizdir. Kapatılarak kullanılır.
Kullanımı;
Kod:
<i>İtalik yazı</i>
<em>İtalik yazı 2</em><ins> Etiketi
Altı çizili metindir. Kapatılarak kullanılır.
Kullanımı;
Kod:
<ins> Altı Çizili Metin</ins><del> Etiketi
Üstü çizili metindir. Kapatılarak kullanılır.
Kod:
<del> Üstü Çizili Metin</del>Konum burada son buluyor arkadaşlar. Burada temel Html taglarını görmüş olduk kısacası Htmlin mantığını öğrendik. Web site geliştirmek isteyenler konularımı yakından takip edebilirler. Bundan sonraki konumda Html'de link, resim, video,ses gibi özellikleri ele alıcam. Html başarıyla sonuçlanırsa CSS'e de geçiş yapabiliriz.
Son düzenleme:
