YAZI İÇERİSİNDE HTML/CSS KODLARI YAYINLAMAK

Geçtiğimiz günlerde net te gezinirken bir kardeşimizin blog 'unda bir uygulama tarifi gördüm. Orda kodları yazarken açıklama ihtiyacı hissetmiş. Kodları yer yer eksik yazmak zorunda kalmış. Bende bir zamanlar bu işin nasıl yapıldığını epeyce araştırdığımı hatırlıyorum. Bende bu konuyla ilgili bir yazı yazmadığımı gördüm. İşte ordan burdan derken bu konuyu da anlatmaya karar verdim. Evet, bazen yazılarımız içerisinde zaman zaman web tasarımı ile ilgili birşeyler anlatırken html/css kod yayınlama ihtiyacı duyarız. Bunu yapabilmemiz için bir kaç yol var ben bunlardan en kullanışlı olanlardan kendi kullandığım iki yöntemi anlatacağım.

1.YÖNTEM :

Aşağıda ki gibi kodları yazmanız halinde Yayınlamak istediğimiz kodları aynen yayınlarız.

UGULAMA BİÇİMİ :

<pre>buraya aşağıdaki gibi dilediğiniz kodu yazabilirsiniz<br /> <br /><style type="text/css"><br /><br />.thinborder{<br /> float:left;<br /> border:solid 1px yellowgreen;<br /> padding:5px;<br /> margin-right:5px;<br />}<br /><br />.pullout{<br /> width:30%;<br /> padding:10px;<br /> background-color:yellowgreen;<br /> color:#F5F5F5;<br /> float:right;<br /> font: bold 14pt/1em Arial, <br /> Helvetica, sans-serif;<br /> text-align:left;<br /> letter-spacing: 0.05em;<br /> margin:5px;<br /> clear: both;<br />}<br /></style><br /> <br /></pre>

UYGULAMA BU ŞEKİLDE YAYINLANACAK :

buraya aşağıdaki gibi dilediğiniz kodu yazabilirsiniz
 
<style type="text/css">

.thinborder{
  float:left;
  border:solid 1px yellowgreen;
  padding:5px;
  margin-right:5px;
}

.pullout{
  width:30%;
  padding:10px;
  background-color:yellowgreen;
  color:#F5F5F5;
  float:right;
  font: bold 14pt/1em Arial, 
  Helvetica, sans-serif;
  text-align:left;
  letter-spacing: 0.05em;
  margin:5px;
  clear: both;
}
</style> 

2.YÖNTEM :

<div align="center">
<form><textarea rows="15" cols="40"><p style="text-align:justify;">

.thinborder{
  float:left;
  border:solid 1px yellowgreen;
  padding:5px;
  margin-right:5px;
}

.pullout{
  width:30%;
  padding:10px;
  background-color:yellowgreen;
  color:#F5F5F5;
  float:right;
  font: bold 14pt/1em Arial, 
  Helvetica, sans-serif;
  text-align:left;
  letter-spacing: 0.05em;
  margin:5px;
  clear: both;
}
</style> 

</p></textarea></form></div>

UYGULAMANIN SONRAKİ YAYINLANMIŞ BİÇİMİ :

<p style="text-align:justify;"><br /><br />.thinborder{<br /> float:left;<br /> border:solid 1px yellowgreen;<br /> padding:5px;<br /> margin-right:5px;<br />}<br /><br />.pullout{<br /> width:30%;<br /> padding:10px;<br /> background-color:yellowgreen;<br /> color:#F5F5F5;<br /> float:right;<br /> font: bold 14pt/1em Arial, <br /> Helvetica, sans-serif;<br /> text-align:left;<br /> letter-spacing: 0.05em;<br /> margin:5px;<br /> clear: both;<br />}<br /></style> <br /><br /></p>

Gördüğünüz gibi her iki yöntemde gayet basit. Hepinize kolay gelsin.