Zeki Can - WordPress
HTML Sayfasına CSS Dosyası Tanımlama
Yeni başlayan arkadaşlar için HTML ile oluşturulmuş sayfaya CSS dosyasıyla oluşturduğumuz tasarımı entegre etmeden bahsedeceğiz bugün. HTML sayfalarımızda en önemli olaylardan biri CSS tasarımımızır. Çünkü tasarım ne kadar iyiyse içeriğimiz o planda kullanıcı tarafından ilgi görür. Yani style.css dosyamız sitemizin dışa vurmudur makyajıdır. O sebepten dolayı CSS dosyamızı html sayfamıza entegre etmek için hemen bir örnekle başlayalım konumuza.
İlk önce ben masa üstümde bir klasör oluşturuyorum. Tabi siz kendi oluşturmuş olduğunuzu kullanabilirsiniz. Adını Yeni Web Site olarak belirledim.
Kendimize 1 adet index.html 1 adet style.css isimli dosya oluşturuyoruz. Notepad açın ve farklı kaydet deyin. İsmini style.css olarak yazın ve kaydedin. Bir tane daha notepad dosyası açın ve aynı şekilde dosya adını index.html olarak yazın ve kaydedin.
Dosyalarımızın içi boş olarak kaydettik. Şimdi standart HTML başlangıç kodlarını ile dolduralım ve alttaki verdiğim kodları yapıştırıyoruz.
Bu standart kodlarımızı index.html dosyamıza ekliyoruz.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
</head>
<body>
</body>
</html>
Şimdi sıra geldi style.css dosyamızı entegre etmeye.Stil dosyaları header taglarına yani
<head>
<title></title>
</head>
entegre edilir.Entegre kodu da aşağıdaki gibidir.
<link rel="stylesheet" type="text/css" href="Buraya Dosya Yolu Gelicek" />
Kodumuz yukarıda olduğu gibidir.Hemen index.html dosyamızın içine style.css dosyamızı entegre ediyoruz ve kodumuz aşağıdaki gibi oluyor.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="Stil.css" />
</head>
<body>
</body>
</html>
Böylece CSS dosyamızı entegre etmiş bulunmaktayız.Test etmek için body tag’ına css yazarak HTML dosyanıza eklediğiniz yazıların değiştiğini görebilirsiniz.
style.css dosyamızı açalım aşağıdaki kodu ekleyelim.
body
{
font-family: Tahoma;
font-size: 12px;
color: Red;
}
Sonra html sayfamıza body tagının içine birşeyler yazalım.
Yani head etiketleri arasına yazıyoruz.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="Stil.css" />
</head>
<body>
Bu bir deneme yazısıdır. Umarım başarılıdır.
</body>
</html>
Yazının değiştiğini gördüğümüze göre CSS dosyamızı başarıyla entegre etmişiz anlamına gelmektedir bu.
Etiketler : Css, HTML, HTML Dosyasına Sitil Dosyası Ekleme, HTML Sayfasına Stil Dosyası Tanımlama, HTML Sitl Dosyası Tanımlama, HTML Stil Etiketleri
