HTML CSS Dosyası Nasıl Oluşturulur, Nasıl Kullanılır

  Aralık 28, 2017      Serkan YILDIZ
HTML dosyaların görsel olarak yapılandırılması için style tag'leri kullanılmaktadır. Bu tag içinde çok fazla tanım yapılacak ise her html dosyanın yüklenme süresi ve kapladığı alan artacaktır. Bunun yerine tüm html dosyaları için tek bir CSS hazırlanması ve html içinden çağrılarak kullanılması daha efektif olacaktır.

 HTML dosyası içinde CSS kullanmak için aşağıdaki link kodu kullanılır. Link tag'i her zaman Head başlığı altına yazılır.

  <link rel="stylesheet" href="style.css">

Bu kod style.css dosyası içindeki tanımlarım bu HTML dosyasına aktarılmasını sağlar. style.css dosyası bir text dosyadır ve notepad gibi uygulamalar ile hazırlanabilir.

İlk olarak bir HTML dosyası hazırlayın;

<!DOCTYPE html>
<html>
<head>
  <title>Css Örneği</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
<h1>
  :: <em>CSS Örnek Uygulama</em> ::
</h1>
</body>
</html>

Yukarıdaki kodlamayı bir dosyaya yazarak cssTest.html olarak kaydedin. Aynı dizine style.css isimli bir dosya daha oluşturun ve aşağıdaki içeriği bu dosyaya yazın.

body {
    background-color: #e3e3e8;
}
h1 {
  background-color: #ff9900;
  position: fixed;
  text-align: center;
}

Html dosyasını açtığınızda arka plan renginin ve h1 tag'i içinde bulunan metnin arka plan renginin css dosyasında tanımlandığı gibi olacağını göreceksiniz. Html tag'lerinin tamamı Css dosyası içinde görsel olarak şekillendirilebilir. Bilinen Html tag'leri için değilde spesifik bir değişiklik yapılacak ise class kodu kullanılır. Ör;

<div class=test>Deneme Mesajı</div>

Burada tanımlanan class'ın Css dosyası içinde özellikleri yazılır. Class'lar başına nokta konularak css dosyası içinde tanımlanırlar.

.test {
   text-align: center;
   color: red;
}

Bu kodlar Html dosyasına eklendiğinde "Deneme Mesajı" sayfa ortasında kırmızı renkte görüntülenir.




HTML içinde Style oluşturma

  Aralık 22, 2017      Serkan YILDIZ
HTML dosya içerisinde bazı özellikleri belirtmek için sytle kodu kullanılır. Bu kod html içinde direk yazılarak kullanılabildiği gibi bir css dosyası referans gösterilerekte kullanılabilir.

Bu kodun üç şekilde kullanımı mevcuttur ve sonuç bu üç kullanım içinde aynıdır. Tekrarlanan kodlar için kullanım kolaylığına göre seçim yapmak gerekir.

1.<head> içinde kullanılan style

Aşağıdaki kodda style kodu head içinde yer almaktadır. Bu kod body içinde bulunan tüm div seçimlerinin yükseklik ve genişliği belirlenmiştir. .stop class'ı kullanılıyorsa arka plan renginin kırmızı olması sağlanmıştır.

<head>
<style>
  div {
    height : 50px;
    width : 50px;
    border-radius: 25px;
  }
  .stop {
    background-color: red;
  }
</style>
</head>
<body>
<div class="stop"></div>
  <div>
    This will have a red background.
  </div>
</body>

2. div kodu içinde style kullanımı.

style kodu div içinde aşağıdaki gibi kullanılır ve sadece yazıldığı div içeriğini etkiler. Sadece bir kez kullanılacak olan özelliklerde tercih edilebilir.

<body>
  <div style="background-color: red">
    Test text.
  </div>
  <div style="background-color: red">
    Test text.
  </div>
</body>

3. Css dosyası içinde style kullanımı.

Html dosyasına bir referans css dosyası eklenerek bu css dosyası içinde style komutlarını kullanarak genel style kullanımları listelenebilir ve bu dosya referans gösterilerek tekrar tekrar yazmadan class'lar ile gösterilebilir.

<head>
   <link rel="stylesheet" href="main.css">
</head>
<body>
  <div>
    This text.
  </div>
</body>

Bu örnekte main.css dosyasına aşağıdaki div içeriği yazıldığında div kullanıldığı durumda arka lanın kırmızı olması sağlanır.

div {
  background-color : red;
}

Arka plana sabit resim koymak isterseniz aşağıdaki kodu kullanabilirsiniz.

<head>
<style>
body {
  background-image: url('1.jpg');
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
}
</style>
</head>

HTML Programlama

  Aralık 14, 2017      Serkan YILDIZ
HTML dosya hazırlamada kullanılan bazı kodelardan bahsedeceğiz. İlk olarak bir HTML dosyanın sahip olması gereken kodlardan bahsedelim.

HTML dosya uzantısı .html veya .htm olmalıdır. Bu dosyaların sahip olması gereken kodlar aşağıdaki gibidir.

<!DOCTYPE HTML>  - Doküman tipini tanımlar. ör: Html  5
<html> - Html  dosya başlangıç kodudur.
<head> - Meta, title, link, java script, css gibi bilgilerin bulunduğu alandır.
<title>Title</title> - Html başlık bölümüdür.
</head> - Head bölümü sonu
<body> - Websayfasının gösterilecek tüm içeriği bu bölümde yer alır.
<b>Content</b>
</body> - Body bölümü sonu
</html> - Html bölümü sonu

Yazı karekterlerinin kalın harflerle yazmak için; <b> kodu kullanılır.

<b>Yazı</b> Çıktısı Yazı şeklindedir.

 İtalik yazı karekteri için <em> kodu kullanılır.

<em>Yazı</em> Çıktısı Yazı şeklindedir.

Alt satıra geçmek için <br> kodu kullanılır.
Paragraf için <p> kodu kullanılır. Kullanımı;

<p>Yazı</p> Şeklindedir.

HTML içinde birçok kod aşağıdaki formatta yazılır.

<tag işlem="değer"> içerik </tag>

Anchor = a = link komutlarına bakalım

<a href="www.serkan.net">Serkan Web Page</a>

HTML dosyaya resim eklemek için 

<img src="url" alt="Açıklayıcı Yazı"> komutu kullanılır.

HTML dosyası web sayfası içindeki genel kuralları belirliyor. Css dosyası ise HTML içeriğinin hasıl görüntüleneceğini belirliyor ve görsel özellikleri yönetiyor. Css dosyası ile yazı tipleri, kalınlıkları, renk, resim boyutları gibi özellikler yönetiliyor. Css dosyası içeriğin istediğiniz formatta görüntülenmesini sağladığı gibi web sayfanıza bir standart getiriyor. Bu dosyadaki tanımları defalarca kullanarak aynı kodları sürekli html içerisinde yazmak zorunda kalmıyorsunuz.






Google