İnstagramı Takip Et
@tasarimcibatu
HTML ve CSS güçlerini kullanarak sıfırdan web sitesi nasıl yapılır göstereceğim. Sabit bir web sitesi erişen kullanıcıya göre hiçbir değişiklik göstermez ve hep belirli bir içeriği gösterir. Avantajları ve dezavantajları bulunur. Hadi bazılarına göz atalım:
Ek olarak kod düzenleyicisine de ihtiyacınız olacaktır. En iyi kod düzenleyicilerinden bazıları:
-Hypertext Markup Language (HTML) site kurulumunda kullanılan dildir.
Kullandığınız kod düzenleyicisini açın ve aşağıdakini boş bir sayfaya yapıştırın.
<html> <head> <title>Your website’s title here</title> </head> <body> <p> This is where the content comes. </p> </body> </html>
Şimdi kod düzenleyicinizde sayfayı .html uzantısı (ör: site.html) ile kaydedin.
Tarayıcınızda kaydettiğiniz sayfayı açın. Sayfa çirkin görünecektir ve belki aklınızdaki web sitesi tasarımının kıyısından geçmiyordur ancak basit bir web sitesi nasıl yapılır öğrenmek için buradan başlayacağız.
CSS, cascading style sheets için kısaltmadır ve web sitenize tutarlı bir şekilde stil eklemek için kullanılır. CSS ile sitenizn belirli yerlerinde yazı tipini, rengi belirleyebilir veya web sitenizin arka plan rengini değiştirebilirsiniz.
Stil dosyası oluşturmak için yeni bir metin dosyası açın ve adını style.css olarak değiştirin. Ana sayfanızın HTML dosyasıyla aynı dizine kaydedin. HTML dosyasının CSS dosyasından tasarım kodlarını okuması için aralarında bağlantı kurulmalıdır. Bağlantıyı aşağıdaki satırı HTML dosyasındaki <head> etiketlerinin arasına ekleyerek kurabilirsiniz.
<link rel="stylesheet" type="text/css" href="style.css">
Şu anda kadar tek yaptığımız CSS ile HTML dosyalarını birbirine bağlamak. Hadi şimdi web sitemizi CSS ile 5 farklı kısma ve iki sütuna bölelim. Aşağıdaki kodu CSS dosyanıza ekleyin.
body {background: #F6E7E7; margin: 0 auto; padding: 0;text-align: center;}
a {color: #310909;} #container {width: 1000px; margin: 0 auto; padding: 0; background;}
#header {width: 1000px; height: 180px; margin: 0 auto; padding: 0; border: 0; background: #f346e1;}
#sidebar {width: 300px; height: 410px; margin: 0; padding: 0; border: 0; float: left; background: #E83535;}
#content {width: 700px; height: 410px; margin: 0; padding: 0; border: 0; float: left; background: #8be0ef;}
#footer {width: 1000px; height: 70px; margin: 0; padding: 0; border: 0; float: left; background: #000000; color:#eee; clear:both;}
Arka plan (background) değerleri farklı kısımların rengini belirler ve kendi istekleriniz doğrultusunda değiştirebilirsiniz. Böylece sitemizde 5 farklı kısım bulunur: container, header, sidebar, body ve footer. Bu kısımların isimleri onların fonksiyonunu temsil eder. Container kısmı web sitesinin tamamını içerir ve genişliği 1000px olarak belirlenmiştir. Dilendiğinde farklı bir değer ile değiştirilebilir ancak diğer kısımların değerlerinin de ilgili bir şekilde değiştirilmesi gerekeceğini not ediniz. Kendi tercihlerinize göre kısımların genişliğini, yüksekliğini ve rengini değiştirebilirsiniz. Değişiklikleri tamamladığınızda kaydedin ve ana sayfanızı şu şekilde güncelleyin:
<html> <head> <title>Your website’s title here</title> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <div id="container"> <div id="header"><p>Header Goes Here</p></div> <div id="sidebar"><p>Left Navigation Goes Here</p></div> <div id="content"><p>Content Goes Here</p></div> <div id="footer"><p>Footer Goes Here</p></div> </div> </body> </html> Burada görebildiğiniz gibi web sitemizi farklı kısımlara bölmek için <div> etiketlerini kullandık. CSS kurallarını uygulamak için id özelliğini tanımladık.
CSS ve HTML kullanarak değiştirebileceğiniz daha nice seçenekler bulunur.
Eğer CSS veya HTML dosyasında herhangi bir yazı tipi belirlemezseniz, genellikle Times New Roman olan bilgisayarınızın varsayılan yazı tipinde metinler gösterilecektir. CSS kullanarak, varsayılan istekleriniz ve ihtiyaçlarınız doğrultusunda yazı tipini değiştirebilirsiniz.
#content p {font-family: Open Sans; font-size: 18px}
Yukarıdaki kod satırını stil dosyanıza (#content kısmından sonra) eklediğinizde paragraf metinlerinin Open-Sans yazı tipini kullanmasını sağlayacaktır ve yazı boyutu da 18px olacaktır.
Web sitesi yaparken bazen dış bir web sitesine veya kendi web sitenizin başka bir yerine bağlantı vermeniz gerekebilir. Üzerine tıkladığınızda sizi başka bir yere götüren bu bağlantılara hyperlink adı verilir. “href” bağlantının hedefini belirler ve <a> etiketi bağlantıyı temsil eder.
Mesela:
Web sitenizin body kısmına bunu <a href=”https://www.google.com”>Google'a Git</a> ekleyin. Google’a Git olarak görünecektir ve ziyaretçi üzerine tıkladığında Google’ın ana sayfasına ulaşacaklardır.
HTML ile resim eklemek, etiket ekleyip resmin yolunu belirtmek kadar kolaydır. <img> etiketi resim eklemenize olanak tanır. İşte nasıl kullanıldığı:
<img src="kedi.jpg" alt="Tatlı Kedi">
src’den sonra gelen tırnak işaretlerinin arasına resmin yolunu girmelisiniz. Bu durumda, resim HTML dosyanızla aynı dizinde olmalıdır. alt’tan sonra gelen tırnak işaretleri içerisindeki metin yalnızca resim yüklenemezse gösterilecektir.
HTML ve CSS ile çalışırken, web sitenizi estetik olarak daha göze uygun hale getirmek için seçenekler sonsuzdur.
Sizlere mantığından bahsettim, umarım
Yardım almak için Udemy gibi eğitim dolu yerlerden ders alarak çok daha iyi şeyler yapabilirisiniz.
@tasarimcibatu
