Merhaba arkadaşlar! Bilindiği gibi XML dokümanlarında biçimlendirme yoktur ve biçimlendirmek istediğimizde CSS veya XSL ile biçimlendirebiliriz. CSS aslında HTML dokümanları biçimlendirmek için kullanılsa da basit XML dökümanlarını da biçimlendirilebilir. XML için XSL ile geniş çaplı biçimlendirmeler yapılabilir. Şimdilik CSS ile biçimlendirme nasıl yapılır ona bakalım.
İlk olarak visual studio programını çalıştırıp File / New / Web Site diyerek yeni proje oluşturuyoruz. Projemizi oluşturduktan sonra WebSite /Add New Item diyoruz. Açılan pencereden XML Filedosyasını seçip Ogrenciler.xml ismini veriyoruz.
Açılan sayfada <?xml version="1.0" encoding="utf-8" ?> satırı otomatik olarak gelecektir. Bu satır XML dosyasının tüm web tarayıcılarında çalışmasını sağlar.
Biz öğrenciler tablomuzu elle yukarıdaki satırın altına aşağıdaki gibi kodlarımızı ve verilerimizi giriyoruz.
<SakaryaUniversitesi>
<Ogrenciler>
<adsoyad>Samet GÖNEZ</adsoyad>
<bolum>Bilgisayar Sistemleri Öğretmenliği</bolum>
<sinif>3. Sınıf</sinif>
</Ogrenciler>
<Ogrenciler>
<adsoyad>Mustafa Erkan ÇAM</adsoyad>
<bolum>Bilgisayar Sistemleri Öğretmenliği</bolum>
<sinif>3. Sınıf</sinif>
</Ogrenciler>
<Ogrenciler>
<adsoyad>Furkan DURAK</adsoyad>
<bolum>İktisat</bolum>
<sinif>4. Sınıf</sinif>
</Ogrenciler>
<Ogrenciler>
<adsoyad>Muhammet TAŞ</adsoyad>
<bolum>Turizm İşletmeciliği</bolum>
<sinif>2. Sınıf</sinif>
</Ogrenciler>
</SakaryaUniversitesi>
XML dosyasını ben yukarıdaki gibi oluşturdum siz farklı hücreler veya bilgiler girebilirsiniz.
Sıra geldi biçimlendirmemizi yapacak dosyamızı oluşturmaya. Biçimlendirme için gene Website / Add New Item diyoruz. Açılan pencereden bu sefer StyleSheet dosyasını seçip Style.css ismini veriyoruz. Ve aşağıdaki gibi kodlarımızı yazıyoruz.
Ogrenciler
{
padding: 10px;
margin: 0px 0px 20px 0px;
border: 1px solid #666666;
display: block;
background-color: #E9E9E9;
margin: 5px 0px 5px 0px;
}
adsoyad
{
margin: 5px 0px 5px 0px;
font-weight: bold;
font-family: 'trebuchet MS';
font-size: 20px;
color: #4F0000;
display: block;
}
bolum
{
margin: 5px 0px 5px 0px;
font-family: verdana;
font-size: 12px;
font-weight: bold;
display: block;
}
sinif
{
font-family: tahoma;
font-size: 11px;
font-style: italic;
display: block;
margin: 5px 0px 5px 0px;
}
Biçimlendirme kodlarımızda yazdıktan sonra sıra geldi XML dosyası ile CSS dosyamızı ilişkilendirmeye. Bunun için XML Dosyamızda üst kısma aşağıdaki kodu yazıyoruz.
<?xml-stylesheet type="text/css" href="Style.css"?>
XML ile CSS dosyamızı da ilişkilendirdikten sonra aşağıdaki görüntüyü elde ederiz.
Bu makalemizde bu kadar, umarım faydalı olmuştur!
Hiç yorum yok:
Yorum Gönder
Yorumunuz için teşekkür ederim.