Başlangıç

En Basit Haliyle Katmanlar (div) ve CSS ile Web Sayfası Şablonu Oluşturma

Kasım 25, 2013

irtengunica Genel , , , , , 6 Yorum


Html dilinde katmanlar ile bir web şablonu oluşturmak için  CSS kullanmak gerekir. Bunun için bir adet html dosyası ve bir adette  css dosyası oluşturalım. Bu dosyaları herhangi bir metin editörü (notepad.exe) veya Dreamweaver Programı ile oluşturabilirsiniz.

  • Şu şekilde en basit tasarımlardan birini yapalım;

csswebsablon2

  • indexsablon.html sayfasının içeriği;

<html>
<head>
<title>arama sayfamıza hoşgeldiniz</title>
<link href=”stil.css” rel=”stylesheet” type=”text/css” /> <!–Css dosyasını sayfaya ekleme–>
</head>
<body>
<div id=”container”><!–tüm şablona ana sağlayıcı içinde hazırlanıyor.–>

<div id=”banner”>Banner olacak</div>
<div id=”header”>ustmenü </div>
<div id=”left”>sol bölum </div>
<div id=”content”>içerik</div>
<div id=”right”>sağ</div>
<div id=”footer”>alt</div>

</div>

</body>
</html>

  • stil.css dosyasının içeriği;

body /*Sayfa genel ayarları*/
{
margin: 0px;
font-family: verdana;
font-size: 12px;
}

#container /*web şablonu ana sğlayıcı */
{
width:980px;
height:700px;
margin:0px;
padding:0px;
}
#banner
{
padding: 0px;
margin: 0px;
width: 980px;
height: 100px;
background-color: #99FFCC;
}

#header
{
padding: 0px;
margin: 0px;
width: 980px;
height: 30px;
background-color: #66FF66;
text-align: center;
vertical-align: middle;
}

#left
{
margin: 0px;
padding: 0px;
float: left;/*katman yerleşimini soldan doğru yapmaya başlıyor*/
height: 500px;
width: 200px;
background-color: #FC9;
}
#content{
margin: 0px;
padding: 0px;
float: left;/*bir önceki katmanın sol yanında yer varsa yeni katman onun yanına yerleşir.*/
height: 500px;
width: 580px;
background-color: #aCf;
}
#right{
margin: 0px;
padding: 0px;
float: left; /*bir önceki katmanın sol yanında yer varsa yeni katman onun yanına yerleşir.*/
height: 500px;
width: 200px;
background-color: #0C9;
}
#footer{
margin: 0px;
padding: 0px;
clear: both; /*soldan doğru yerleşim  iptal edilir*/
height: 70px;
width: 980px;
background-color:#996;
}

CSS ve Liste etiketleri ile En Basit Yatay Menü Yapımı

Kasım 25, 2013

irtengunica Genel, Web , , , , , , , Yorum bırakın


En basit haliyle css ve html ile Yatay menü yapmak için bir adet html dosyası ve bir adette  css dosyası oluşturalım. Bu dosyaları herhangi bir metin editörü (notepad.exe) veya Dreamweaver Programı ile oluşturabilirsiniz.

  • yataymenuolustur.html dosyasının içeriği;

<html>
<head>
<title>Yatay Menü Oluşturma</title>
<link rel=”stylesheet” type=”text/css” href=”yataymenustilleri.css”/>
<!–css dosyasının eklenmesi–>
</head>
<body>
<ul class=”yataymenu”> <!–dosyadaki sınıfın etikete uygulanması–>
<li><a href=”#” target=”_self”>ANASAYFA</a></li>
<li><a href=”#” target=”_self”>RESİMLER</a></li>
<li><a href=”#” target=”_self”>İLETİŞİM</a></li>
</ul></body></html>

  • yataymenustilleri.css dosyasının içeriği;

.yataymenu{ /*yataymenu sınıfı css ayarları*/
list-style-type:none; /*listedeki madde işaretlerini kaldır */
margin:0;
padding:0;
}
.yataymenu a{ /*yataymenu sınıfına link verildiğinde css ayarları*/
text-decoration:none;/*altı çizili özelliğini kaldır*/
background-color:#336;
color:#CF0;
width:100px;
}
.yataymenu a:hover{/*yataymenu sınıfına link üzerine gelindiğinde css ayarları*/
background-color:#C30;
color:#00F;
}
.yataymenu li{
display:inline;/*liste elemanlarını yanyana yerleştirir.*/
}

CSS ve Liste etiketleri ile En Basit Dikey Menü Yapımı

Kasım 25, 2013

irtengunica Genel, Web , , , , , , Yorum bırakın


En basit haliyle css ve html ile Dikey menü yapmak için bir adet html dosyası ve bir adette  css dosyası oluşturalım. Bu dosyaları herhangi bir metin editörü (notepad.exe) veya Dreamweaver Programı ile oluşturabilirsiniz.

  • dikeymenuolustur.html dosyasının içeriği;

<html>
<head>
<title>Dikey Menü Oluşturma</title>
<link rel=”stylesheet” type=”text/css” href=”dikeymenustilleri.css”/>
<!–css dosyasının eklenmesi–>
</head>
<body>
<ul class=”dikeymenu”> <!–dosyadaki sınıfın etikete uygulanması–>
<li><a href=”#” target=”_self”>ANASAYFA</a></li>
<li><a href=”#” target=”_self”>RESİMLER</a></li>
<li><a href=”#” target=”_self”>İLETİŞİM</a></li>
</ul></body></html>

  • dikeymenustilleri.css dosyasının içeriği;

@charset “iso-8859-9”;
/* CSS Document */
body{ /*body etiketi css ayarları*/
margin:0;
padding:0;
background-color:#9C9;
}
.dikeymenu{ /*dikeymenu sınıfı css ayarları*/
list-style-type:none; /*listedeki madde işaretlerini kaldır */
margin:0;
padding:0;
}
.dikeymenu a{ /*dikeymenu sınıfına link verildiğinde css ayarları*/
text-decoration:none;/*altı çizili özelliğini kaldır*/
background-color:#336;
color:#CF0;
width:100px;
display:block; /* listedeki tüm liste elemanlarının genişliği*/
}
.dikeymenu a:hover{/*dikeymenu sınıfına link üzerine gelindiğinde css ayarları*/
background-color:#C30;
color:#00F;
}

Asp.Net ile XML Dosyası Oluşturma -1

Mayıs 17, 2013

irtengunica Genel, Programlama, Web , , , , , 3 Yorum


XML genel amaçlı etiket tabanlı dildir. XML ile uygulamalar arasında veri aktarmak ve saklamak için çok kolaydır. HTML dilinin, bir alt kümesidir SGML (Standard Generalized Markup Language). XML platformdan bağımsız bir dildir. XML biçimlendirilmiş bilgileri herhangi bir platformda (İşletim Sistemleri) kullanılabilir. XML kendini tanımlayan bir dildir ve içerdiği bilgileri belirlemek için verilerin yanı sıra kuralları verir.

XML bünyesindeki veriyi biçimlendirmek için XSL ve CSS gibi çeşitli biçimlendiriciler kullanılır ve bunlar servera gelmeden dönüşüm sağlayarak serverın üzerine düşen yükü azaltırlar.

XML dosyaları veri içeren etiketlerden oluşur. Genellikle başlangıç ​​etiketi ve bitiş etiketi verileri tutmak için kullanılır. Bir XML etiket adı “Başlık” oluşturmak istiyorsanız Örneğin, başlangıç ​​etiketi gibi <Baslik> ve bitiş etiketi gibi </ Baslik> . Siz bu etiketler arasına bilgi doldurabilirsiniz.

 <Baslik> Başlık İçerik </ Baslik>

Bir XML dosyası oluştururken, bazı önemli noktaları hatırlamak zorundayız:

* XML küçük harfe duyarlıdır

 <Baslik> <baslik> olarak aynı değildir .

* Etiketler açıldıkları bu ters sırada kapatılmalıdır

 Burada <birinci etiket> <ikinci etiket> Veri </ ikinci etiket> </ birinci etiket>

Örnek XML Dosya

<?xml version=”1.0″?>
<!–Kullanıcı Bilgileri Detayları Raporu–>

<uyeler>

  <uye id="1">
      <ad>A</ad>
      <soyad>B</soyad>
  </uye>
  <uye id="2">
      <ad>C</ad>
      <soyad>D</soyad>
  </uye>
  <uye id="5">
      <ad>E</ad>
      <soyad>F</soyad>
  </uye>
  <uye id="8">
      <ad>G</ad>
      <soyad>H</soyad>
  </uye>
</uyeler>

Sonuç olarak Bir Asp.Net Web Site oluşturunuz. Ve xmlolustur.aspx isimli bir sayfa oluşturdum. Sayfa içine bir adet buton ve bir adet label yerleştirdim. Ana dosyaların bulunduğu klasörde xml adında bir klasör oluşturdum. Butona tıklayarak aşağıdaki kodu yazdım.

xmlresim1

using System.Xml;
using System.IO;//Bu namespaceleri mutlaka ekleyin.

protected void Button1_Click(object sender, EventArgs e)
{
if (!File.Exists(Server.MapPath(“xml/KullaniciBilgirapor.xml”)))//dosya yoksa
{
try
{
XmlTextWriter xmlolustur = new XmlTextWriter(Server.MapPath(“xml/KullaniciBilgirapor.xml”), null);//ilk parametre dosyanın oluşturulacağı yol, ikinci parametre encoding dil kodlama

xmlolustur.WriteStartDocument();//xml içinde element oluşturma işlemine başlandı

xmlolustur.WriteComment(“Kullanıcı Bilgileri Detayları Raporu”);//dosya içine bir açıklama satırı eklendi

xmlolustur.WriteStartElement(“Rapor”);//bir etiket oluşturduk

xmlolustur.WriteEndDocument();//element oluşturma işlemi bitti
Label1.Text = “Dosya Oluşturuldu”;
xmlolustur.Close();//dosya oluşturuldu ve işlemler tamamlandı
}
catch {
Label1.Text = “Dosyada Hata oldu. Lütfen Tekrar Deneyin”;
}
}
}

Böylece Xml Dosyası Oluşmuş oldu. Bir Sonraki Konuda Dosyaya yazma ve Listleme İşlemlerini yapacağız.

PCI Guru

A common sense approach to achieving PCI compliance and retaining your sanity

Penetration Testing Lab

Offensive Techniques & Methodologies

Milenyum Haber Web/Mobil

#mhaber

Bana Python Anlat

meslek lisesi ders notları