HTML Codes
In previous chapters we talked about bootstrap and many of the HTML code is defined and set to style. In this section we will talk about how they are used.
With these definitions, you can use Bootstrap in the visualization and shaping of your site, except for mobile and browser compatibility. You will see Bootstrap's own stylized items are really successful. Bootstrap is very suitable for today's design conditions. You see that you are writing HTML code in the title. Thanks to this title, you will not only be aware of the extensive Bootstrap library, but you will also be able to easily learn the HTML language.
Typography and Title Codes
When we first enter a site, we see a lot of fonts, and their fonts, typography, are a very important place. Especially in some places we are faced with unsightly writing styles. These moments can move us away from the site or make it difficult to read them.
I can say that your designs are very suitable because the font named "Semibold" which comes with Bootstrap looks nice and supports the letters of Turkish like "ş, i, ü, ö, ö, ç". Since Semibold is a global font, you can use it on your work in many languages because it is compatible with special characters and letters in the linguistic context.
You can easily create your titles using the "h" tags, and as you enlarge the number, the size of the font on the screen becomes smaller, ie it is inversely proportional.
HTML Kodları
Önceki bölümlerde Bootstrap ile birçok HTML kodunun tanımlanmış halde ve stil olarak ayarlanmış olduğundan bahsetmiştik. Bu bölümde bunların nasıl kullanıldığından bahsedeceğiz.
Bu tanımlamalar sayesinde Bootstrap'ın mobil ve tarayıcı uyumluluğundan hariç, görsellik ve sitenizin şekillendirilmesi içinde kullanabileceksiniz. Bootstrap'in kendi stilize etmiş olduğu öğelerin gerçekten başarılı olduğunu göreceksiniz. Bootstrap günümüzün tasarım şartlarına oldukça uygundur. Başlıkta HTML kodları yazdığını görmüşsünüzdür. Bu başlık sayesinde sadece geniş Bootstrap kütüphanesini kavramakla kalmayıp HTML dilini de kolayca öğrenebileceksiniz.
Tipografi ve Başlık Kodları
Bir siteye ilk girdiğimizde birçok yazı görüyoruz ve bunların yazı tipi yani tipografisi oldukça önemli bir yer tutmaktadır. Özellikle bazı sitelerde göze hiç hoş gelmeyen yazı tipleri ile karşı karşıya kalabiliyoruz. İşte bu anlar bizi siteden uzaklaştırabiliyor veya yazıları okurken zorluk çıkartabiliyor.
Bootstrap ile gelen "Semibold" isimli yazı tipi göze hoş gözüken ve "ş, i, ü, ğ, ö, ç" gibi Türkçe'mize ait harfleri de desteklediği için tasarımlarınıza oldukça uygun olduğunu söyleyebilirim. Semibold global bir yazı tipi olduğundan özel karakterlere ve dilsel bağlamda olan harflere uyumlu olduğu için birçok dilde olan çalışmalarınızda kullanabilirsiniz.
"h" etiketlerini kullanarak kolayca başlıklarınızı oluşturabilirsiniz ve rakamı büyüttükçe ekrana gelen yazı boyutu küçülmektedir, yani ters orantılıdır.
Etiketlerin çıktıları ise aşağıdaki gibidir:
<!DOCTYPE html>
<html lang="tr-TR">
<head>
<meta charset="UTF-8">
<title>H Etiketleri</title>
(html comment removed: Bootstrap Dosyaları )
<link rel="stylesheet" href="bootstrap.min.css">
</head>
<body>
<h1>H Etiketleri</h1>
<h2>H Etiketleri</h2>
<h3>H Etiketleri</h3>
<h4>H Etiketleri</h4>
<h5>H Etiketleri</h5>
<h6>H Etiketleri</h6>
</body>
</html>
Gördüğünüz gibi çıktısı ekrandaki gibidir ve kodların üstten aşağı sıralanması "hl, h2, h3, h4, h5, h6" şeklindedir.
Başlık Yanına Açıklama Yapmak
Bir diğer sayfada "h" ile isimlendirilen başlık etiketlerinin kullanımından bahsetmiştik, bu sayfada ise bu başlıkların yanlarına nasıl daha grimsi bir renkte olan açıklamalar yapabiliriz bundan göreceğiz.
Bu açıklamayı kodu ile yapıyoruz ve isterseniz bu kodu "h" kodları arasında veya tek başına kullanabilirsiniz. Fakat tek başına kullanımda oldukça küçük bir yazı ortaya çıkıyor, ama uzun bir footer kısmınız var ise ve burada uzun bir metin varsa bu etiketi rahatılkla kullanabilirsiniz.
Örnek olarak kodu şu şekiıde kullanabiliriz:
<h1>H Etiketleri<small>small</small></hl>
H Etiketleri yazan kısım normal "h" etiketinin olduğu kısımdır ve ekranda siyah renkte bir çıktı verecektir. small kelimesi ise "small" kodunun etki alanına giren kısımdır. Ekrana gri renk çıktı verecektir.
<!DOCTYPE html>
<html lang="tr-TR">
<head>
<meta charset="UTF-8">
<title>Başlık Yanına Açıklama Yapmak</title>
(html comment removed: Bootstrap Dosyaları )
<link rel="stylesheet" href="bootstrap.min.css">
</head>
<body>
<h1>H1 Etiketleri<small>small</small></hl>
<h2>H2 Etiketleri<small>small</small></h2>
<small>small etiketi örnek yazısı</small>
</body>
</html>
P ve Lead Etiketleri
Bir web sayfasında mutlaka yazılar vardır, bunları başlıklar ve içerikler olmak üzere iki ana kategoriye ayırabiliriz, şimdi temel metin kodu olan "p" kodundan bahsedeceğiz. Ayrıca Bootstrap tarafından özelleştirilmiş bir kod olan "lead" kodundan bahsedeceğiz.
"p" kodunu her HTML belgesinde kullandığımızı rahatlıkla söyleyebiliriz fakat, Bootstrap ile gelen "P· etiketi özelleştirilmiş, yani yazı tipi değiştirilmiş bir şekilde geliyor. Ayrıca diğer öğeler ile etkileşimi ve mobil uyumluluk gibi ayarlamaları yapılarak bize sunuluyor.
Yazı tipi "h" etiketinde olduğu gibi Türkçe karakterlere uyumlu olarak gelmektedir.
Kullanımı ise standart
şeklindedir. Örnek çıktısı ise aşağıdaki gibidir:<!DOCTYPE html>
<html lang="tr-TR">
<head>
<meta charset="UTF-8">
<title>P ve Lead Etiketleri</title>
(html comment removed: Bootstrap Dosyaları )
<link rel="stylesheet" href="bootstrap.min.css">
</head>
<body>
<p>P ve Lead Etiketleri</p>
<p class="lead">Örnek içerik</p>
</body>
</html>
lead etiketinin kullanımı ise "P" etiketine "class" atayarak yani sınıf atayarak kullanmaktır ve aşağıdaki gibi kullanabilirsiniz.
Lead Etiketi
HTML kodlarında "lead" olmadığı için "class" atayarak kullanılmaktadır.
<!DOCTYPE html>
<html lang="tr-TR">
<head>
<meta charset="UTF-8">
<title>P ve Lead Etiketleri</title>
(html comment removed: Bootstrap Dosyaları )
<link rel="stylesheet" href="bootstrap.min.css">
</head>
<body>
<p class="lead">Örnek içerik</p>
</body>
</html>
Samp Etiketi
Samp etiketi aslında vurgulama yaptığını söyleyebilirim. Bu kod'da öğeyi vurgular, fakat fontu yani yazı tipi ve boyutlarını "p" etiketine göre daha küçüktür ve farklıdır.
<!DOCTYPE html>
<html lang="tr-TR">
<head>
<meta charset="UTF-8">
<title>Sample Etiketi</title>
<link rel="stylesheet" href="bootstrap.min.css">
</head>
<body>
<div class="container">
<samp>Sample Etiketi</samp>
<p>Sample Etiketi</p>
</div>
</body>
</html>
Görüldüğü gibi üst kısım "samp", alt kısım ise "p" etiketinin çıktısıdır.
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]
Your contribution cannot be approved because it does not follow the Utopian Rules.
Sorry to change the decision. This tutorial is seen as simple because all the information can be found on the official site. Bootstrap has well-written documentation for the classes and CSS files.
You can contact us on Discord.
[utopian-moderator]