@kelebek arkadaşımızın da dediği gibi , codepen de jquery kütüphanesi eklendiği için html bölümünde gösterilmesine gerek duyulmuyor.
Tüm kod aşağıda bölüm bölüm verilmiştir.

HTML

Resim Url

Site Url

Resim Genişlik

Resim Yükseklik

Alt

Seçenek


Yeni Sayfa


Aynı Sayfa

<script></script>
<script></script>



CSS
/*! normalize.css v2.1.3 | MIT License | git.io/normalize */article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary{display:block}audio,canvas,video{display:inline-block}audio:not([controls]){display:none;height:0}[hidden],template{display:none}html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}a{background:transparent}a:focus{outline:thin dotted}a:active,a:hover{outline:0}h1{font-size:2em;margin:.67em 0}abbr[title]{border-bottom:1px dotted}b,strong{font-weight:700}dfn{font-style:italic}hr{-moz-box-sizing:content-box;box-sizing:content-box;height:0}mark{background:#ff0;color:#000}code,kbd,pre,samp{font-family:monospace,serif;font-size:1em}pre{white-space:pre-wrap}q{quotes:"\201C" "\201D" "\2018" "\2019"}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-.5em}sub{bottom:-.25em}img{border:0}svg:not(:root){overflow:hidden}figure{margin:0}fieldset{border:1px solid silver;margin:0 2px;padding:.35em .625em .75em}legend{border:0;padding:0}button,input,select,textarea{font-family:inherit;font-size:100%;margin:0}button,input{line-height:normal}button,select{text-transform:none}button,html input[type=button],input[type=reset],input[type=submit]{-webkit-appearance:button;cursor:pointer}button[disabled],html input[disabled]{cursor:default}input[type=checkbox],input[type=radio]{box-sizing:border-box;padding:0}input[type=search]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box}input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration{-webkit-appearance:none}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}textarea{overflow:auto;vertical-align:top}table{border-collapse:collapse;border-spacing:0}
span{
font:13px "Arial";
}
#codeGenerate{
margin:5px;
width:330px;
}
.inputBox{
width:100%;
height:auto;
clear:both;
float:left;
margin-bottom:15px;
}
.inputBox>span{
float:left;
}
.inputBox>input,.inputBox>select{
float:right;
}
.inputBox>textarea{
display:none;
outline:none;
font-size:13px;
width:100%;
height:100px;
margin:0;
padding:0;
}

Javascript
$(document).ready(function(){
$("input[name=getCode]").click(function(){
var imgUrl = $("input[name=imgUrl]").val();
var siteUrl = $("input[name=siteUrl]").val();
var imgWidth = $("input[name=imgWidth]").val();
var imgHeight = $("input[name=imgHeight]").val();
var imgAlt = $("input[name=imgAlt]").val();
var choice = $("#selectOpt").find(":selected").val();
var httpAdd = "http://";
if(imgUrl.substr(0,4)!=httpAdd.substr(0,4))
imgUrl = httpAdd + imgUrl;
if(siteUrl.substr(0,4)!=httpAdd.substr(0,4))
siteUrl = httpAdd + siteUrl;
var getCode = "";
$txtArea = $(".inputBox>textarea");
$txtArea.show();
$txtArea.text(getCode);
});
});


Kodların tümünü indirmek için https://dl.dropboxusercontent.com/u/87601322/KodOlusturmaFormu.zip
Bir başka demo için
http://www.kilitbilgi.com/demos/KodOlusturmaFormu/
adresini ziyaret edebilirsiniz.

İyi çalışmalar.