English
Listing Tags
There are many listing tags that come with HTML. With these tags you can create texts in materials.
Unordered Ranking
Unordered sorting is a sort of sort we are used to. This sequence places a bold dot marker next to the number instead of a number. Also, < ul > changes the format of the dot according to the < li > tag.
Türkçesi
Listeleme Etiketleri
HTML ile gelen bir çok listeleme etiketi vardır. Bu etiketler sayesinde maddeler halinde metinler oluşturabilirsiniz.
Numarasız Sıralama
Numarasız sıralama gayet alışık olduğumuz bir sıralama türüdür. Bu sıralama maddelerin yanına numara yerine kalın nokta işareti koyar. Ayrıca < ul >, < li > etiketine göre noktanın biçimi değişir.
Kodlarımız ise şöyledir:
<!DOCTYPE html>
<html lang="tr-TR">
<head>
<meta charset="UTF-8">
<title>Numarasız Etiketler</title>
(html comment removed: Bootstrap Dosyaları )
<link rel="stylesheet" href="bootstrap.min.css">
</head>
<body>
<ul>
Ana Sayfa
Hakkımızda
İletişim
</ul>
(html comment removed: )
<ul>
<li>Menü #1</li>
<li>Menü #2</li>
<li>Menü #3</li>
<li>Menü #4</li>
<li>Menü #5</li>
</ul>
</body>
</html>
Resimde belirttiğim gibi "ul" kısmı maddeleme yapmadan yan yana navigasyon menüsü oluşturmuştur,"li" kısmı ise maddeleme yapmıştır.
Numaralı Sıralama
Bu siralama ise "li" etiketlerinin siraladığı maddelerin yanına numaralar eklemektedir.
Kullanımı ise bu sefer
Kodlarımız ise aşağıdaki gibidir:
<!DOCTYPE html>
<html lang="tr-TR">
<head>
<meta charset="UTF-8">
<title>Numaralı Sıralama</title>
(html comment removed: Bootstrap Dosyaları )
<link rel="stylesheet" href="bootstrap.min.css">
</head>
<body>
<ol>
<li>Menü #1</li>
<li>Menü #2</li>
<li>Menü #3</li>
</ol>
</body>
</html>
Bu kısımda
Başlıksız Sıralama
Bu başlık altında ise maddelerin başına rakam veya yuvarlak madde işareti olmadan nasıl sıralarız bundan bahsedeceğiz.
Bu tarz sıralama yaparken "ul" etiketini kullanmanız gerekiyor. Fakat burada "ul" etiketine sınıf atayarak bu işlemi gerçekleştireceğiz.
Kodlarımız ise aşağıdaki gibidir:
<!DOCTYPE html>
<html lang="tr-TR">
<head>
<meta charset="UTF-8">
<title>Başlıksız Sıralama</title>
(html comment removed: Bootstrap Dosyaları )
<link rel="stylesheet" href="bootstrap.min.css">
</head>
<body>
<ul class="list-unstyled">
<li>Menü #1</li>
<li>Menü #2</li>
</ul>
</body>
</html>
Görüldüğü gibi sınıf vererek stilsiz olmasını sağladlk.
Çıktısı ise aşağıdaki gibidir:
inline Türünde Sıralama
Bir diğer sıralama türümüz ise "inline" türü sıralamadır. Bu sıralama aralara boşluk vererek maddeleri yan yana sıralamaktadır.
Kullanımı ise önceden bahsetmiş olduğumuz "Başlıksız Sıralama" gibi "ul" elementine sınıf atayarak gerçekleşmektedir.
<!DOCTYPE html>
<html lang="tr-TR">
<head>
<meta charset="UTF-8">
<title>Başlıksız Sıralama</title>
(html comment removed: Bootstrap Dosyaları )
<link rel="stylesheet" href="bootstrap.min.css">
</head>
<body>
<ul class="list-inline">
<li>Menü #1</li>
<li>Menü #2</li>
</ul>
</body>
</html>
Kategorili Şekilde Sıralama
Bu sefer ise sıralamayı ana bir başlık etrafında kategori altına alarak sıralamayı göreceğiz.
Bu kullanımda daha farklı bir kod kullanacağız.
Kodlarımız aşağıdaki gibidir.
<!DOCTYPE html>
<html lang="tr-TR">
<head>
<meta charset="UTF-8">
<title>Kategorili Şekilde Sıralama</title>
(html comment removed: Bootstrap Dosyaları )
<link rel="stylesheet" href="bootstrap.min.css">
</head>
<body>
<div class="container">
<dl>
Menü #1
<dt>Menü #2</dt>
<li>Menü #3</li>
<li>Menü #4</li>
</dl>
</div>
</body>
</html>
Anasayfa yazan kısım ekrana "Menü #1" alanda çıktı verir. Bilişim ise ana kategori başlığıdır ve "Menü #2" numaralı alanda olan çıktıyı verir. "li" etiketleri ise Menü #3 ve Menü #4 yazısını yazdırır.
İki Panelli Kategori Sıralama
Bu başlıkta ise ana kategori başlığını sol tarafa alıp madde içeriğini nasıl sağ tarafa ekleyebiliriz bundan bahsedeceğiz.
Kodumuz ise aşağıdaki gibidir;
<!DOCTYPE html>
<html lang="tr-TR">
<head>
<meta charset="UTF-8">
<title>İki Panelli Kategori Sıralama</title>
(html comment removed: Bootstrap Dosyaları )
<link rel="stylesheet" href="bootstrap.min.css">
</head>
<body>
<dl class="dl-horizontal">
<dt>Menü #1</dt>
<dd>Menü #2</dd>
</dl>
</body>
</html>
"dt" yazan kısım, yani kalınlaştırılmış başlık kısmı ana kategoridir. "dd" ise alt kategorinin içerdiği yazıdir.
Evet artık bu bölümü bitirmiş olduk, bu bölüm sayesinde artık sıralama işlemlerinizi her şekilde kolayca yapabileceksiniz.
Code Etiketi
Geliştiriciıer için önemli bir kod olan "code" etiketi sayesinde sitenizde paylaşmak istediğiniz kod öbeklerini, kolayca paylaşabilirsiniz.
Kullanımı ise aşağıdaki gibidir;
<!DOCTYPE html>
<html lang="tr-TR">
<head>
<meta charset="UTF-8">
<title>Code Etiketi</title>
(html comment removed: Bootstrap Dosyaları )
<link rel="stylesheet" href="bootstrap.min.css">
</head>
<body>
<div class="container-fluid">
<code><body></code>
</div>
</body>
</html>
Kodumuz yukarıda olduğu gibi basit bir kullanıma sahip "body" yazan kısım, ekrana yazdırmak istediğimiz kod öbeğidir. Başlarında bulunan kodlar ise "lt"
olan "<" işareti. "gt" olan ise ">" işaretidir. Aksi taktirde gireceğiniz sayısal işaretli etiket çakışma yapacaktır. Bu yüzden ekrana doğru çrktı vermeyecektir.
input Etiketi
"input" etiketi "code" etiketine benzer bir etikettir ve istediğiniz herhangi bir öğeyi vurgulayabilirsiniz.
Bu sefer ortaya çıkan görünüm ise yazıyı beyaz yapıp yazının arka planım siyah yapar.
Kuilanımı ise aşağıdaki gibidir
<!DOCTYPE html>
<html lang="tr-TR">
<head>
<meta charset="UTF-8">
<title>input Etiketi</title>
(html comment removed: Bootstrap Dosyaları )
<link rel="stylesheet" href="bootstrap.min.css">
</head>
<body>
<div class="container-fluid">
<kbd>Deneme Yazısı</kbd>
</div>
</body>
</html>
Kod Kutusu Oluşturma
Diğer kodlarımızda, kodları veya metin öbeklerini vurgulamayı göstermiştik. Bu kodumuz ile kodları kutu içinde göstererek daha başanlı bir ifade biçimi sağlayabilirsiniz ve özellikle uzun kodlarınız var ise, bu kullanım şekli daha başarılı olacaktır.
Kodlarımız ise aşağıdaki gibidir:
<!DOCTYPE html>
<html lang="tr-TR">
<head>
<meta charset="UTF-8">
<title>Kod Kutusu Oluşturma</title>
<link rel="stylesheet" href="bootstrap.min.css">
</head>
<body>
<div class="container">
<pre><Kodlarımız buraya gelecek></pre>
</div>
</body>
</html>
Bir iki ders önce "lt" ve "gt" nedir bundan bahsetmiştik. Eğer bu şekilde kodu belirtmezseniz kodunuz HTML kodları ile çakışma yapacaktrr. Ekrana
doğru sonuç vermeyecektir, hatta < pre > koduna zarar verecektir.
Variables Kodunun Kullanımı
Bu kod matematiksel yani sayısal işlemleri HTML belgenizde barındırmak istiyorsanız bu kodu kullanabilirsiniz.
<!DOCTYPE html>
<html lang="tr-TR">
<head>
<meta charset="UTF-8">
<title>Variables</title>
(html comment removed: Bootstrap Dosyaları )
<link rel="stylesheet" href="bootstrap.min.css">
</head>
<body>
<div class="container">
<var> 5 </var> + <var> 2 </var> = <var> 7 </var>
</div>
</body>
</html>
Gördüğünüz gibi her matematiksel kısım için sayıyı veya işareti var kodunun içine aldık. Eşittir tarzı olan ifadeleri ise ek "var" kodu kullanmadan aralara yazdık. Şunu belirtmek isterim ki bu kod işlemi otomatik yapmaz, zaten yukarıda sonucun 7 olduğunu yazdık.
PHP kodu gibi otomatik olarak toplama yapmamaktadır.
Sonraki eğitimde görüşmek üzere
Posted on Utopian.io - Rewarding Open Source Contributors
Thank you for the contribution. It has been approved.
You can contact us on Discord.
[utopian-moderator]
Hey @enderman I am @utopian-io. I have just upvoted you!
Achievements
Suggestions
Get Noticed!
Community-Driven Witness!
I am the first and only Steem Community-Driven Witness. Participate on Discord. Lets GROW TOGETHER!
Up-vote this comment to grow my power and help Open Source contributions like this one. Want to chat? Join me on Discord https://discord.gg/Pc8HG9x