-
151.
+32. Gün / 1. DersTümünü Göster
Beyler bayanlar dün reset.css dosyasını oluşturmuştuk. Kısaca ne işe yaradığı falan bahsetmiştim. Artık bugün yavaştan ekranda birşeyler göstermeye başlayacağız. Öncelikle index. html sayfamızı oluşturuyoruz.
<!doctype html>
<html lang="tr-TR">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>Sitemizin Başlığı</title>
<meta name="description" content="Sitemizin Kısa Açıklaması">
<--- JS -->
<script src="assets/js/jquery-2.1.4.min.js"></script>
<--- CSS -->
<link rel="stylesheet" href="assets/css/reset.css">
<link rel="stylesheet" href="assets/css/style.css">
</head>
<body>
</body>
</html>
Şimdi çok kısa kodlar hakkında bilgi vermek istiyorum.
Öncelikle sitemizi <!doctype html> koduyla başlatarak HTML5 olarak giriş yapıyoruz.
Ardından alt satırındaki kodumuz ise sitenin tarayıcılar tarafından anlayacağı dili yazıyoruz. Bu tr-TR yazmazsak ne olur diyenler olacaktır. Bunu yazmamızdaki amacımız sitenin içindeki metinlerin dilinin ne olduğunu arama motorlarının anlamasını sağlamak. He yazmazsakta anlarlar orası ayrı ama şöyle bir durum olabilir. Birkaç alıntı yazarak ingilizce cümle yazdınız ama sitenin geneli türkçe. Şimdi biz bunu buraya yazmazsak google arama motoru sitemizi ziyaret ettiğinde sitede birden fazla dil olduğunu görür ve sitenin dilini çevirmeyi önerebilir. Bu da kullanıcılar açısından gereksiz olabilir. Aynı zamanda seo açısından da eksi puan almanıza sebep olur. Yani işin özü sitemiz Türkçe ise tr-TR yazmakta her daim fayda var.
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
Yukarıdaki kod ne işe mi yarıyor? Bu kodumuz responsive ile alakalı. Şöyle anlatayım. Telefondan bir siteye girdiğinizde parmak hareketlerinizle siteyi zoom in zoom out yapabiliyorsunuz. Ama bazı siteler buna izin vermiyor. Ne gibi yararı veya zararı var konusuna gelirsek. Ben şahsi fikrimi söyleyeyim bence kullanmak faydalı. Çünkü kullanıcılar sitede yukarı aşağı parmak hareketleriyle gezerken vs yanlışlıkla büyütüp küçültmelerine engel oluyor. Bunun yanında eğer sitede içerikler responsive olarak güzel ayarlanmadıysa zoom yapıldığında bozulma ihtimali doğuyor ve bu göz hoş görünmüyor. Kısacası kullanın.
<script src="assets/js/jquery-2.1.4.min.js"></script> kodu ile sayfamıza jquery kütüphanesini dahil ediyoruz. Etmezsekte olur. Site sorunsuz çalışır. E neden ekledin kardeşim o zaman derseniz. Tabi ki keyfimden eklemedim. ileride proje içerisinde jquery kodları kullanacağım. Bu kodların yorumlanabilmesi ve çalışması için bu kütüphaneyi sayfama dahil etmem gerekiyor. jQuery kullanmam ben diyenler bu satırı silebilirler.
<link rel="stylesheet" href="assets/css/reset.css">
<link rel="stylesheet" href="assets/css/style.css">
Burada ise reset.css ve style.css dosyalarımızı sayfamıza dahil ettik.
Tüm bunları yaptıktan sonra kodlarımızı <body> </body> arasına yazabiliriz.
// Sorularınızı alta yazabilirsiniz.
başlık yok! burası bom boş!