ویب ڈیویلپمنٹ ویب سائٹ ٹمپلیٹ کے ذریعے اردو ویب سائٹ‌ بنائیں

[پردیسی]

السلام علیکم

نوٹ۔یہ مضمون صرف اردو ویب سائٹ بنانے کا ابتدایہ ہے اور زیادہ تر ان محترم دوستوں کے لئے ہے جو ویب کی زبان سے زیادہ واقفیت نہیں رکھتے اس لئے اس میں صرف چیدہ چیدہ چیزیں ہی بتائی جائیں گی۔زیادہ ٹیکنیکل باتوں پر بات نہیں کی جائے گی تاکہ آسانی سے سمجھ آسکے ۔

محترم بھائی اعجاز اختر صاحب اور عزیز دوستو!
میں کوشش کروں گا کہ اس مضمون میں آپ کو بتا سکوں کہ کسی بھی اردو سانچے ( ٹمپلیٹ ) میں ایک مکمل ویب سائٹ جس کے صفحات چاہے ہزاروں کی تعداد میں ہی کیوں نہ ہو، آسانی اور تیز رفتاری سے کیسے بنائے جا سکتے ہیں۔

سب سے پہلے ہم ایک اردو ویب سائٹ کا سانچہ لیتے ہیں جو کہ پہلے ہی سے بنایا ہوا ہے۔( یہ جو طریقہ بتایا جا رہا ہے آپ ہر سانچے میں اسی طرح ہی ویب سائٹ بنا سکتے ہیں)

میں نے جس سانچے کا انتخاب کیا ہے وہ یہاں موجود ہے آپ اسے یہاں ایک نظر دیکھ سکتے ہیں۔

اور نیچے دئے ہوئے ربط سے آپ اسے ڈاؤنلوڈ کر سکتے ہیں

ویب سائٹ بنانے کا چوتھا سانچہ یہاں سے ڈاؤنلوڈ کریں

یہ زپ zip فارمیٹ میں ہے آپ اسے unzip کر کے کھول لیں

اگر ہم اب دیکھیں تو ہمارے پاس دو عدد فائلیں index.html اور style.css نام کی دو فائلیں اور ایک عدد فولڈر imgs نامی موجود ہے۔آپ صرف index.html فائل کو کھولیں۔

جو کچھ ایسی دکھائی دے گی۔

آپ index.html فائل کو کسی بھی ایڈیٹر میں کھول لیں اور اگر آپ کے پاس کوئی بھی ویب ڈیزایننگ کا ایڈیٹر نہیں ہے تو کوئی بات نہیں آپ اسے نوٹ پیڈ میں کھول لیں۔نوٹ پیڈ میں کھولنے کے لئے آپ اوپر مینو بار میں جائیں۔

پھر View میں جائیں
پھر Source کو کلک کریں

اس کے بعد آپ کے پاس کچھ اس طرح سے نوٹ پیڈ میں فائل کھلے گی۔

سب سے پہلے جہاں جہاں اردو تحریر لکھی ہوئی ہے وہاں آپ اس میں اپنی ویب سائٹ کی مناسبت سے تبدیلیاں کر لیں۔مثلاً

<meta>

<meta>

<meta>

کی ورڈ ضرور لکھیں جو آپ لکھیں گے وہ سرچ میں آتا چلا جائے گا۔

<title>سمت جریدہ</title>

<div>
<div>
<h1>آپ کی ویب سائٹ کا نام</h1>
</div>

<div>
<div>
<h1>سمت</h1>
</div>

<h1> </h1>
<h2> </h2>
<h3> </h3>
<h4> </h4>
<h5> </h5>
<h6> </h6>
یہ ٹیگ بڑے الفاظ لکھنے کے لئے استمال کئے جاتے ہیں۔

اب ہم روابط کی طرف چلتے ہیں۔

<div>
    <ul>
      [*]<a>سرورق</a>
      [*]<a>ربط نمبر ١</a>
      [*]<a>ربط نمبر ٢</a>
      [*]<a>ربط نمبر ٣</a>
      [*]<a>ربط نمبر ٤</a>
      [*]<a>ربط نمبر ٥</a>
      [*]<a>ہمارا رابطہ</a>
    [/list]
  </div>

[*]<a>سرورق</a>

یہاں آپ اپنی اسی فائل index.html کا ربط دیں گے۔یعنی جہاں # کا نشان ہے اس جگہ index.html لکھ دیں۔مثلاً

[*]<a>سرورق</a>

اب باقی روابط جو آپ نے رکھنے ہیں ان کے نام کا پہلے آپ ایک عدد فولڈر بنا کر اسی ویب سائٹ کے فولڈر کے اندر رکھ دیں جہاں آپ کی index.html اور style.css فائل موجود ہیں۔ مثلاً

ربط نمبر 1 پر آپ چاہتے ہیں کہ شاعری کا ربط ہو۔ جس میں تمام شعراء کا کلام ہو۔

آپ ایک عدد فولڈر poetry کے نام کا بنائیں اور اسے ویب سائٹ کے فولڈر کے اندر رکھ دیں اور ربط نمبر 1 پر اس طرح ربط دیں۔

[*]<a>ربط نمبر ١</a>

اور ربط نمبر 1 پر اس طرح ربط دیں۔ poetry/index.html

[*]<a>شاعری</a>

آپ سوچتے ہوں گے فولڈر تو خالی ہے پھر ربط کس کا دیا گیا۔یہ آپ کو بعد میں بتایا جائے گا۔


اسی طرح جس جس کے ربط آپ نے دینے ہوں خالی فولڈر اسی نام کا بنا کر ربط دیتے جائیں۔

آخر میں جملہ حقوق کی جگہ اپنی ویب سائٹ کا نام لکھ لیں۔

آپ سوچتے یہ بھی ہوں گے کہ فولڈر بنانے کی کیا ضرورت ہے خالی فائل بنا کر اس کے نام کے روابط بھی دئے جا سکتے تھے۔
بھائی جی ایک اچھی ویب کے لئے ترتیب بے حد ضروری ہے اور پھر اس سے آپ کو بعد میں بہت آسانی محسوس ہوگی۔


اب فائل کو save کر کے یا save as کر کے index.html کا ہی نام دیں یعنی پہلی فائل کو اس کے ساتھ تبدیل کر لیں۔اب یہ آپ کی اصلی فائل ہو گی۔
اسی فائل کی ایک عدد کاپی بنا کر اسی فولڈر میں کوئی سا بھی نام دے کر احتیاطً محفوظ کر لیں۔

اب جو فائل آپ نے بنائی ہے یعنی index.html اس کو اسی کو اسی طرح بند حالت میں کاپی کریں اور ہر فولڈر ( جو آپ نے بنائے تھے) اس میں پیسٹ کرتے جائیں۔

نوٹ۔ یہاں ایک چیز کو خصوصی طور پر دیکھ لیجئے گا۔جب آپ فولڈر میں فائل پیسٹ کریں تو اس کو کھول کر دیکھیں کہ آیا وہ سہی کھلتی ہے یا نہیں،یعنی اس میں آپ کی سٹائل شیٹ اپلائی بھی ہوئی ہے یا نہیں۔اگر آپ بند فائل کو کاپی کر کے فولڈر میں پیسٹ کریں گے تو سٹائل شیٹ ضرور اپلائی ہو گی یعنی وہ فائل سٹائل شیٹ کا ربط خود اُٹھائے گی۔مثلاً

اصلی index.html میں آپ کی سٹائل شیٹ کا ربط اس طرح ہوگا۔

<link>

style.css

جب کہ روابط والے فولڈر میں آپکی سٹائل شیٹ کا ربط اس طرح ہوگا۔

<link>

../style.css

اگر آپ نے کسی اور طریقے سے کاپی پیسٹ کیا ہے تو ہر فولڈر کے اند پڑی فائل میں سٹائل شیٹ کے ربط کو درست کر لیں۔

اب آپ کی خالی ویب سائٹ مکمل ہو گئی ہے۔اب آپ پہلے فائل یعنی index.html کو مکمل کریں۔

عنوان کی جگہ <h1> </h1> کا ٹیگ استمال کریں

مضمون کی جگہ p کا ٹیگ استمال کریں ایک پیراگراف ختم ہونے پر دوبارہ p کا ٹیگ استمال کریں اس سے آپ کی تحریر خود بخود اگلی لائین میں چلی جائے گی۔

جب آپ کی فائل آپ کی مرضی کے مطابق مضمون کی مناسبت سے مکمل ہوجائے تو اسے آن لائن لے آئیں۔

آپکے مین فولڈر کے اندر رکھی دو فائیلوں index.html اور style.css اور تمام فولڈر کو اپنی روٹ ڈائیریکٹری کے اندر اپلوڈ کردیں۔

اگلی فائل ، مثلاً شاعری والی کو کھولیں۔اضافی عنوانات کی جگہ شعراء کا نام لکھ کر اس کی بھی ایک ایک فائل بنا کر شاعری والے فولڈر میں رکھ کر روابط دیتے جائیں۔

index.html کی محفوظ کی ہوئی اصلی فائل سے کاپی پیسٹ کر کے نئی فائل بناتے چلے جائیں۔
اب آپ کو صرف مواد دینے یا اس مواد کی مناسبت سے اسی صفحے پر نئے روابط دینے کی ضرورت پیش آئے گی جو کہ زیادہ وقت کا کام نہیں ہوگا۔

دعاؤں میں یاد رکھئے گا۔

 

[الف عین]

یہ کوڈ وغیرہ تو زیادہ سمجھ میں نہیں آئے۔ لیکن بھئ طویل مضامین کا ایک ایک پیرا کاپی اور پیسٹ کرنا نوٹ پیڈ وغیرہ میں تو ممکن نہیں۔ اس لئے یہ تو میرے بس کے باہر بھی ہے اور نہ اتنا وقت ہے میرے پاس۔
دوسری بات یہ کہ جب ایک انڈیکس فائل کاپی اور پیسٹ کرنا ہی ہے تو سی ایس ایس کا کیا فائدہ؟؟ اگر آپ فانٹ کا نام بھی دے دیں تو ہر فائل میں دہا جا سکتا ہے۔ سی ایس ایس میں ہی کیا سرخاب کے پر لگے ہیں؟؟
اور تیسری بات یہ کہ اب تک کوئی مجھے مطمئن نہیں کرسکا کہ فریم میں کیا خرابی ہے جب کہ اس میں وہی سب ممکن ہے جو میں چاہتا ہوں، سائڈ پینلس یا کالم وغیرہ بھی اپنی جگہ قائم اور نیا ربط بھی درمیانی ونڈو میں کھلے۔ یہ تو سی ایس ایس سے کافی کھیل کر بھی (بشمول کوڈنگ اور نوٹ پیڈ یا این ویو میں سورس ایچ ٹی ایم ایل کی ونڈو کھول کر) کرتا رہا ہوں لیکن سائڈ کالم کبھی قائم نہیں رہتے۔ مواد کی ضخامت پر منحصر ہوتے ہیں۔
اور چوتھی بات یہ بھی کہ جب کاپی پیسٹ کرنی ہی ہے ہر فائل تو ٹیبل میں بھی کیا حرج ہے؟

 

[جیسبادی]

اعجاز،
گوگل سے پتہ کیا جا سکتا ہے کہ فریم کیوں برے ہیں
http://www.html-faq.com/htmlframes/?framesareevil

سٹئال CSS فائل علیحدہ ہی ہوتی ہے۔ ہر ویب صفحے پر صرف اس کا لنک دیا جاتا ہے۔

ٹیبل کا تو اس بحث سے کوئی تعلق نہیں۔ یہ تو آپ استعمال کر ہی سکتے ہو۔

میرا مشورہ ہے کہ پردیسی اگر آپ کے ایک دو صفحے لے کر اپنے سانچوں میں ڈھال کر دکھایں۔ ان صفحوں کو دیکھ کر آپ کو پھر اندازہ ہو جائے گا کہ آگے کیسے چلنا ہے۔

 

[پردیسی]

السلام علیکم
محترم بھائی صاحب

ہمارے ایک استاد تھے ، وہ کہا کرتے تھے کہ جس کو جو چیز آتی ہے یا سمجھ آ جاتی ہے وہی اُس کے لئے آسان ہوتی ہے اور جس کو جو نہیں آتا چاہے وہ الف ، ب ، پ ہی کیوں نہ ہو وہ مشکل ہی ہوتا ہے۔
بھائی جی جب سے فورم کو اپ گریڈ کیا گیا ہے غالباً code موڈ html لینگویج کو سہی نہیں دکھاتا ۔جس کی وجہ سے جو جو میں نے html لینگویج کے ذریعہ سے سمجھانے کی کوشش کی وہ سہی دکھائی نہیں دے رہا اور شائد اسی وجہ سے میرے اس مضمون میں خامی بھی پائی جاتی ہے۔

بھائی جی رہی بات نوٹ پیڈ کی تو میں نے پہلے بھی عرض کیا تھا کہ نوٹ پیڈ کا حوالہ اس لئے دیا گیا ہے کہ تقریباً یہ سب کے پاس موجود ہوتا ہے۔باقی آپ اسے کسی بھی ویب ڈیزائینگ کے سوفٹ ویر کے ذریعہ سے اس کو نیا رنگ دے سکتے ہیں۔

فریم ویب سائٹ کے سلسلہ میں جسپادی بھائی نے ربط دے دیا ہے اس لئے اس پر کچھ بھی کہنا بے معنی ہے۔

جسپادی بھائی آپ کا بے حد شکریہ۔

بھائی جی جہاں تک css ( سٹائل شیٹ) کی بات ہے اس کا کمال آپ یہ فورم کی صورت میں دیکھ ہی رہے ہیں۔بس اتنا کہوں گا کہ اگر css کو استمال نہ کیا جاتا تو ویب کی دنیا میں اتنی جلدی اردو کا رنگ نہ چڑھتا۔اور یہ css کا ایک ادنیٰ سا کمال ہے۔باقی آپ بھی کمال کریں گے تو جمال کے درجہ پر پہنچیں گے ( یہ آخری بات مذاق کے طور پر کہی ہے بس ذہن میں شرارت آ گئی تھی۔اس لئے برا مت منائے گا)

ٹیبل کا کوئی اتنا بڑا مسئلہ نہیں ہے وہ آپ css اور اس کے علاوہ بھی بنا سکتے ہیں وہ آپ کی مرضی پر منحصر ہے کہ جہاں آپ چاہیں بنا ڈالیں۔

ویسے میں کوشش کروں گا کہ بلاگ پر یا اپنی ویب کے صفحات پر اس مضمون کو دوبارہ لکھوں او انشااللہ اس دفعہ میں اسے اور زیادہ آسان بنا کر پیش کرنا چاہتا ہوں۔

جزاک اللہ

 

[پردیسی]

السلام علیکم

جسپادی بھائی آپکا شکریہ۔
فارغ وقت ملتے ہی کوشش کروں گا کہ اعجاز بھائی کی ویب کے صفحات بنا کر دکھا پاؤں۔

جزاک اللہ

 

[الف عین]

یہ کوڈ وغیرہ تو زیادہ سمجھ میں نہیں آئے۔ لیکن بھئ طویل مضامین کا ایک ایک پیرا کاپی اور پیسٹ کرنا نوٹ پیڈ وغیرہ میں تو ممکن نہیں۔ اس لئے یہ تو میرے بس کے باہر بھی ہے اور نہ اتنا وقت ہے میرے پاس۔
دوسری بات یہ کہ جب ایک انڈیکس فائل کاپی اور پیسٹ کرنا ہی ہے تو سی ایس ایس کا کیا فائدہ؟؟ اگر آپ فانٹ کا نام بھی دے دیں تو ہر فائل میں دہا جا سکتا ہے۔ سی ایس ایس میں ہی کیا سرخاب کے پر لگے ہیں؟؟
اور تیسری بات یہ کہ اب تک کوئی مجھے مطمئن نہیں کرسکا کہ فریم میں کیا خرابی ہے جب کہ اس میں وہی سب ممکن ہے جو میں چاہتا ہوں، سائڈ پینلس یا کالم وغیرہ بھی اپنی جگہ قائم اور نیا ربط بھی درمیانی ونڈو میں کھلے۔ یہ تو سی ایس ایس سے کافی کھیل کر بھی (بشمول کوڈنگ اور نوٹ پیڈ یا این ویو میں سورس ایچ ٹی ایم ایل کی ونڈو کھول کر) کرتا رہا ہوں لیکن سائڈ کالم کبھی قائم نہیں رہتے۔ مواد کی ضخامت پر منحصر ہوتے ہیں۔
اور چوتھی بات یہ بھی کہ جب کاپی پیسٹ کرنی ہی ہے ہر فائل تو ٹیبل میں بھی کیا حرج ہے؟

شکریہ جیس۔ اب یہ بات تو سمجھ میں آئ۔
پردیسی، کیا میں کچھ صفحات ذ پ کر دوں؟

 

[نبیل]

میں صرف پردیسی بھائی سے یہ کہنا چاہ رہا تھا کہ کوڈ ٹیگ میں تو بظاہر کوئی مسئل نہیں نظر آ رہا۔ ذیل میں میں کچھ html کوڈ ٹیگ کے ذریعے پوسٹ کر رہا ہوں:

<html>
	<head>
		<title>Editor</title>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<script language="JavaScript" type="text/javascript">
var expanded=1;
pic1= new Image(21, 18);
pic2= new Image(21, 18);
pic1.src="collapsed.bmp";
pic2.src="expanded.bmp";

function expandIt(whichEl)
{
		if (whichEl.style.display == "block")
		{
			whichEl.style.display = "none";
			tool.src=pic1.src;
		}
		else
		{
			whichEl.style.display = "block";
			tool.src=pic2.src;
			UpdateKeypad(1);
		}		
}

function ChangeFont()
{
	el=document.getElementByID("FontCombo");
	alert(el.options.value);
}

		</script>
		<style> .Urdu { font-family:'Urdu Naskh Asiatype', Tahoma; font-size:16; unicode-bidi: embed; }
	    </style>
	</head>
	<body topMargin="0" bottomMargin="0" LeftMargin="0" RightMargin="0" scroll="no">
		<script language="javascript1.2" type="text/javascript" src="UrduEditor.js"></script>
		<script language="JavaScript" type="text/javascript">
			initUrduEditor();
		</script>
		<table width="100%" height="100%" style="BORDER-COLLAPSE: collapse" bordercolor="#111111"
			cellpadding="0" cellspacing="0">
			<tr width="100%" height="100%">
				<td>
					<textarea rows="2" name="Editor" id="Editor" cols="20" lang="ur" dir="rtl" style="background:#FFFF99; FONT-SIZE:20px; LEFT:0px; WIDTH:100%; FONT-FAMILY:Urdu Naskh Asiatype; POSITION:relative; TOP:0px; HEIGHT:100%"
						wrap="soft" onkeypress="processKeypresses()" onclick="storeCaret(this)" onkeyup="storeCaret(this)"
						onkeydown="processKeydown()" onFocus="setEditor(this)"></textarea>
						<script language="JavaScript" type="text/javascript">
							if(!document.all && document.getElementById)
							{
								var textEL= document.getElementById("Editor");
								addEvent(textEL , "keypress",  processKeypresses);								
							}
							setUrdu("Editor");
						</script>
				</td>
			</tr>
			<tr>
				<td bgcolor="#6699cc">
					[img]collapsed.bmp[/img]
					English<input type="radio" value="English" name="toggle" onclick='setEnglish("Editor")'><font face="Urdu Naskh Asiatype">اردو</font><input type="radio" value="Urdu" checked name="toggle" onclick='setUrdu("Editor")'>					
					<SELECT id="FontCombo" name="FontCombo" onChange='setFont("Editor", this.value)'>
						<OPTION selected value="Urdu Naskh Asiatype">Urdu Naskh Asiatype</OPTION>
						<OPTION value="Tahoma">Tahoma</OPTION>
						<OPTION value="Nafees Web Naskh">Nafees Web Naskh</OPTION>
						<OPTION value="Nafees Nastaleeq">Nafees Nastaleeq</OPTION>
					</SELECT>
					[img]fontUp.png[/img]
					[img]fontDown.png[/img]
					<SELECT id="KeymapCombo" name="KeymapCombo" onChange='setKeymap(this.value)'>		
						<OPTION selected value="UrduPhonetic">Urdu Phonetic</OPTION>
						<OPTION value="Sindhi">Sindhi</OPTION>				
						<OPTION value="Pashto">Pashto</OPTION>
					</SELECT>
				</td>
			</tr>
			<tr>
				<td>
					<div ID="el1" class="hiddentext">
						<script language="JavaScript" type="text/javascript">
		 					writeKeyboard();
						</script>
					</div>
				</td>
			</tr>
		</table>
	</body>
</html>

 

[پردیسی]

شکریہ جیس۔ اب یہ بات تو سمجھ میں آئ۔
پردیسی، کیا میں کچھ صفحات ذ پ کر دوں؟

السلام علیکم
بھائی جی ابھی میں فارغ نہیں ہوں اس لئے وعدہ نہیں کرتا جب فارغ ہوا آپ سے کہہ دوں گا۔

 

[پردیسی]

السلام علیکم
نبیل بھائی آپ کی بات درست ہے مگر یہ کوڈ موڈ سارے html tag کو سہی نہیں دکھاتا مثلاً میں اردو محفل لے ہی کچھ کوڈ یہاں پیش کر رہا ہوں جو کہ head ٹیگ کے اندر ہیں۔

<DOCTYPE>
<html>
<head>
<meta>
<meta>

<link>
<link>
<link>
<link>
<link>
<link>
<title>پہلا یونیکوڈ اردو فورم - اردو محفل First Unicode Urdu Forum Urdu Mehfil :: فہرست - اُردو محفل</title>
<meta>
<link>
<link>

 

[زیک]

پردیسی آپ صحیح کہہ رہے ہیں۔ دیکھتا ہوں کہ ایسا کیوں ہو رہا ہے۔

 

[الف عین]

آسکی ٹیکسٹ تو محض کاپی پیسٹ سے کام چل سکتا ہے پھر س سب کی کیا ضرورت ہے۔ معلوم نہیں۔
ویسے میں نے انٹر نیٹ اکسپلورر میں بھی بغیر اردو کی بورڈ اور سپورٹ کے اردو ویب اڈیٹر استعمال کر کے دیکھا۔ لیکن تب بھی نہ میں سنٹرل الائن کر سکا نہ رنگین۔نصرف ایک یا دو بار میں الائنمنٹ کرنے میں کامیاب ہوا ہوں ورنہ اس کے بھی ٹیگس ہی یہاں نظر آتے ہیں۔ اور آئ ای میں اپنے سسٹم پر نہیں دفتر کے ایک اور ڈیویژن میں براڈ بینڈ والے سسٹم کی بات کر رہا ہوں جہاں صرف آئ ای تھا جسے میں اپنے سسٹم یا لیپ ٹاپ پر استعمال نہیں کرتا۔

 

[عماردین]

السلام علیکم ورحمتہ اللہ وبرکاتہ
شکریہ