Kod Kutusu (CodeBox) Oluşturma Kodu (HTML)

Kod veya Metin Kutusu (CodeBox) Yapma Kodu

Web Sitelerde yazı içerisinde ayrı bir alanda kod, yazı veya görsel paylaşmak için HTML CodeBox oluşturma özelliklerinden faydalanabiliriz. Bu çok basit ve sorunsuz bir şekilde kod penceresi oluşturup içeriği burada yayınlamamıza olanak verir.

Yazıları Çerçeve İçine Almak

HTML ve CSS kullanarak yazılar nasıl çerçeve içine alınır ?

Border (Kenar Çizgisi) Kullanarak Kod Kutusu Yapmak

<p style="border:solid"> YAZI</p>

<p style="border:solid green"> YAZI </p>

... gibi CSS özellikleri atanarak özelleştirebilirsiniz.

Div (Bölüm) Kullanarak Kod Kutusu Yapmak

<div style="border:solid green">YAZI </div>

... gibi CSS özellikleri atanarak özelleştirebilirsiniz.

Table (Tablo) Kullanarak Kod Kutusu Yapmak

<table border="1" cellspacing="0"><tr><td> YAZI </td></tr></table>

... gibi CSS özellikleri atanarak özelleştirebilirsiniz.

Textrea (Çerçeve) Kullanarak Kod Kutusu Yapmak

<textarea class="input" style="width: 100%; height: 200px;"> YAZI </textarea>

... gibi CSS özellikleri atanarak özelleştirebilirsiniz.

Background (Arka Fon) Kullanarak Kod Kutusu Yapmak

<p style="background-color:#CD0000"> YAZI </p>

... gibi CSS özellikleri atanarak özelleştirebilirsiniz.

Fieldset (Alan) Kullanarak Kod Kutusu Yapmak

<fieldset><legend><b>BAŞLIK</b></legend> YAZI </fieldset>

... gibi CSS özellikleri atanarak özelleştirebilirsiniz.

Code (Kod Alanı) Kullanarak Kod Kutusu Yapmak

<pre style="border: solid ;padding: 5px; overflow: auto; width: 95%"><code> YAZI </code></pre>

... gibi CSS özellikleri atanarak özelleştirebilirsiniz.

HTML / JAVASCRİPT EKLEMEK

Widget (gadget) olarak eklemek için :
Blogger > Düzen > Gadget ekle > HTML/JavaScript yolunu izleyerek istediğiniz yere ekleyebilirsiniz

Sayfa içinde kullanmak için :
Blogger > Yeni yayın oluştur > HTML yolunu izleyerek istediğiniz yere ekleyebilirsiniz.


* Canlı Demo için
https://www.w3schools.com/html/tryit.asp?filename=tryhtml_intro
Editörünü kullanabilirsiniz.