ٹیوٹوریل: ایچ ٹی ایم ایل

مختلف سافٹ وئیرز کے ٹوٹیوریلز پر مبنی سیریل
User avatar
چاند بابو
منتظم اعلٰی
منتظم اعلٰی
Posts: 22224
Joined: Mon Feb 25, 2008 3:46 pm
جنس:: مرد
Location: بوریوالا
Contact:

ٹیوٹوریل: ایچ ٹی ایم ایل

Post by چاند بابو »

السلام علیکم

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

[center]ایچ ٹی ایم ایلHTMLایک تعارف[/center]

HTML یا Hyper Text Markup Language(ہائپر ٹیکسٹ مارک اپ لینگوئج) ایک ایسی زبان ہے۔جس میں ورلڈ وائڈ ویب کی ہائپر ٹیکسٹ ڈاکومنٹس لکھی جاتی ہیں۔


اس کی نمایاں خصوصیات

1۔ یہ آپ کو ہائپر ٹیکسٹ لنک دیتی ہے جن کی مدد سے اگر آپ روشن ٹیکسٹ کو کلک کرتے ہیں تو آپ ایک نئی ڈاکومنٹ میں رسائی حاصل کر لیتے ہیں۔جو آپ کو کسی اور سائٹ پر لے جاتی ہے۔نئی ڈاکومنٹ اپنے یو۔ایل۔آر کے ذریعے تلاش کی جاتی ہے اور یہ بھی ایچ۔ٹی۔ایم۔ایل کی کوئی دوسری ڈاکومنٹ،تصویریا ساؤنڈ فائل ہو سکتی ہے۔
2۔ ایچ۔ٹی۔ایم۔ایل اس طرح ڈیزائن کی گئی ہے یہ کسی مخصوص پلیٹ فارم پر بھروسہ نہیں کرتی اور نہ ہی اسے مخصوص ہارڈ وئیر یا سافٹ وئیر کی ضرورت ہوتی ہے۔
3۔ ـ ایچ۔ٹی۔ایم۔ایل کے پروگرام سادہ ASCII ٹیکسٹ فائل میں لکھے جاتے ہیں۔اس کا مطلب یہ ہے کہ یہ کسی بھی ٹیکسٹ ایڈیٹر مثلا نوٹ پیڈ وغیرہ میں لکھے جا سکتے ہیں۔


ایچ۔ٹی۔ایم۔ایل ایڈیٹر کیا ہوتا ہے؟


ایڈیٹر ایک ایپلی کیشن کا نام ہے جس میں آپ ایچ۔ٹی۔ایم۔ایل کا کوڈ لکھتے ہیں۔کوئی بھی ٹیکسٹ ایڈیٹر آپ کا ایچ۔ٹی۔ایم۔ایل ایڈیٹر بن سکتا ہے۔ونڈوز کا نوٹ پیڈ جو تمام ونڈوز آپریٹنگ سسٹمز میں پایا جاتا ہے ساری دنیا میں ایچ۔ٹی۔ایم۔ایل ایڈیٹر کے طور پر استعمال ہو رہا ہے۔لیکن وہ لوگ جو کچھ بہتر کی تلاش میں ہیں ان کے لئے ایچ۔ٹی۔ایم۔ایل کا ایک Enhanced ٹیکسٹ ایڈیٹر HotDog بہت کار آمد ثابت ہو سکتا ہے۔اس کے علاوہ بہت سے کمرشل ایچ۔ٹی۔ایم۔ایل ایڈیٹرز مارکیٹ میں دستیاب ہیں جن میں Adob pagemill یا مائیکروسافٹ کا فرنٹ پیج شامل ہیں۔جو Wysiwyg یعنی“What you see is what you get“ کا ماحول دیتے ہیں۔
یہ تھا کچھ تعارف ایچ۔ٹی۔ایم۔ایل کے ساتھ اب شروع کرتے ہیں ایچ ٹی ایم ایل پر تفصیلی گفتگو۔



ہر ایچ ٹی ایم ایل صحفہ کا بنیادی عنصر ایلیمنٹ (Element) کہلاتا ہے، جس کا اردو ترجمہ جز ہی کیاجا سکتا ہے؟ ایلیمنٹ ایچ ٹی ایم ایل صحفہ میں عبارت کی بناوٹ کے لئے استعمال کیا جاتا ہے، ہر ایلیمنٹ دو ٹیگز کے مجموعہ سے بنتا ہے، شروع والے ٹیگ کو ابتدائیہ یا اوپننگ ٹیگ کہا جاتا ہے اور ہر اوپنگ ٹیگ < سے شروع ہوتا ہے اور > پر ختم ہوتا ہے، اسی طرح ایلیمنٹ کے اختتام میں جو ٹیگ استعمال ہوتا ہے اسے اختتامیہ یا کلوزنگ ٹیگ کہا جاتا ہے ۔ اوپننگ اور کلوزنگ ٹیگ کی بناوٹ میں صرف / کا فرق ہوتا ہے ، مثلا

Code: Select all

<p> This is paragraph </p>.
اب اوپر کی بحث کو ہم یوں سمیٹ سکتے ہیں، کہ مختلف ایلیمنٹ کے مجموعہ کو ہم ایچ ٹی ایم ایل کہہ سکتے ہیں، اور ایچ ٹی ایم ایل سیکھنے کے لئے ایلیمنٹس کو سیکھنے کی ضرورت ہے ۔ مثال کے طور پر عنوان کے لئے چھ ایلمنٹ کا استعمال ہوتا ہے جو کہ درج ذیل ہیں، ان ایلیمنٹ کوڈز کی وضاحت اردونامہ پر پہلے سے کی جا چکی ہے جس کا اقتباس ذیل میں پیش ہے۔
Html زبان کی بنیاد Html Tags ہی ہوتے ہیں۔ یہ ٹیگز وہ اشارے ہوتے ہیں تو آپ کے ٹیکسٹ کی فارمیٹنگ کے بارے میں بتاتے ہیں کہ اسے کیسا ظاہر ہونا ہے۔ مثال کے طور پر آپ کے الفاظ کا سائز کیا ہو گا ان کا سٹائل کیا ہوگا ان کی فونٹ کونسی ہو گی۔ دوسرے الفاظ میں ٹیگز ایسے مختصر الفاظ ہیں جو آپ کے کمپیوٹر کو بتاتے ہیں کہ لکھے گئے الفاظ کو سکرین پر کیسے ظاہر کرنا ہے۔
Html Tags ہمیشہ <> میں لکھے جاتے ہیں اور جتنے ٹیکسٹ کو آپ نے ٹیگز لگانے ہوتے ہیں یا یوں کہئے کہ جتنے ٹیکسٹ کو آپ نے مطلوبہ انداز دینا ہوتا ہے اس کے بعد انہیں انہیں بریکٹس سے بند بھی کیا جاتا ہے لیکن بند کرتے ہوئے ان میں / کا اضافہ کیا جاتا ہے۔یعنی </>۔
اب مثال کے طور پر آپ نے اپنے ویب صفحہ پر موجود ایک لائن کو بولڈ انداز میں پیش کرنا ہے تو اس کے لئے آپ یوں لکھیں گے۔

Code: Select all

<b> Your Text Area</b>
اوپر والی لائن میں ہم نے Html Tags استعمال کرتے ہوئے کمپیوٹر کو یہ سمجھایا ہے کہ Your Text Area کے الفاظ کو بولڈ انداز میں ظاہر کیا جائے یعنی نمایاں کر کے دکھایا جائے۔

ویب صفحہ کے شروع میں <html> کوڈ کمپیوٹر کو بتاتا ہے کہ اس صفحہ کو Html زبان میں لکھا گیا ہے اور اسے ظاہر کرتے ہوئے Html زبان کو ڈی کوڈ کرے۔
اسی طرح ویب صفحہ کے آخر میں <html/> کوڈ ظاہر کرتا ہے کہ Html زبان میں لکھا گیا مواد ختم ہو چکا ہے اس لئے صفحہ کو اس سے آگے ظاہر کرنا بند کر دے۔

اسی طرح اپنے صفحہ پر موجود مواد کو ہیڈنگز دینے کے لئے بھی Html Tags کا استعمال کیا جاتا ہے۔ مندرجہ ذیل ہیڈنگز ٹیگز اپنے مواد پر ہیڈنگز دینے کے کام آتے ہیں[/size]

Code: Select all

<h1>This is a heading</h1>
<h2>This is a heading</h2>
<h3>This is a heading</h3> 
<h4>This is a heading</h4>
<h5>This is a heading</h5>
یہ ٹیگز آپ کی عبارت کو بالکل اس انداز میں ظاہر کریں گے۔

ہیڈنگ نمبر ایک ایسے ظاہر ہو گی۔
ہیڈنگ نمبر دو ایسے ظاہر ہو گی۔
ہیڈنگ نمبر تین ایسے ظاہر ہو گی۔
ہیڈنگ نمبر چار ایسے ظاہر ہو گی۔
ہیڈنگ نمبر پانچ ایسے ظاہر ہو گی۔

اسی طرح پیراگراف کو بھی Html Tags سے ظاہر کرتے ہیں۔جو ایسے ظاہر کیا جاتا ہے۔

[code]<p>This is a paragraph</p>
<p>This is another paragraph</p> [/code]

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

[code]<a href="http://infopioneer.blogspot.com">Info Pioneer Blog</a> [/code]

جب آپ اس کوڈ کو اپنے ویب صفحہ پر دیکھیں گے تو کچھ ایسا نظر آگے گا۔
Info Pioneer Blog

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

[code]<img src="/images/avatars/gallery/old_avatars/
8115857084a2fe5a7085c6.jpg" width="104" height="142" /> [/code]

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

Image
گزشتہ سے پیوستہ :

Code: Select all

h1,h2,h3,h4,h5,h6
یہاں h ہینڈنگ کو ظاہر کرتا ہے اور 1,2,3 درجہ کو ظاہر کرتے ہیں، مختلف عنوان اس طرح لکھے جائیں گے

Code: Select all

۔
<h1>This is biggest heading.</h1>
<h6>This is smallest heading.</h6>
اوپر والی مثالوں سے ظاہر ہے، کہ ایچ ٹی ایم ایل صحفہ میں ہر ایلمنٹ میں ابتدائیہ اور اختتامیہ یا اوپنگ اور کلوزنگ ٹیگز کا موجود ہونا لازمی ہے، لیکن کچھ ٹیگز اس پابندی سے مستثنیٰ ہیں، جیسے لائن بریک اور ہوریزنٹل لائن کے ٹیگز کو یوں استعمال کیا جاتا ہے ،

Code: Select all

<br />
<hr />
آسانی کی خاطر اسے یوں بیان کیا جا سکتا ہے کہ ایسا کوئی بھی ٹیگ جس کے درمیان عبارت موجود ہو، اُس میں ابتدائیہ اور اختتامیہ ٹیگز کا ہونا لازمی ہے، اور ایسے ٹیگز جن کے درمیان میں عبارت موجود نہ ہو اُن کا ابتدائیہ اور اختتامیہ ایک ہی ٹیگ کے اندر لکھا جاتا ہے ۔
علاوہ ازیں آپ نے مشاہدہ کیا ہوگا کہ جہاں جہاں ٹیگز کا استعمال کیا ہے، وہ انگریزی کے چھوٹے حروف پر مشتمل ہیں، ٹیگز کو انگریزی کے بڑے حروف میں بھی لکھا جا سکتا ہے، لیکن بڑے حروف پر مشتمل ٹیگز معیاری نہیں کہلا سکتے۔ اس لئے جہاں ٹیگز کا استعمال ہو وہاں انگریزی کے چھوٹے حروف کا استعمال ہی مناسب ہے۔
قصور ہو تو ہمارے حساب میں لکھ جائے
محبتوں میں جو احسان ہو ، تمھارا ہو
میں اپنے حصے کے سُکھ جس کے نام کر ڈالوں
کوئی تو ہو جو مجھے اس طرح کا پیارا ہو
User avatar
چاند بابو
منتظم اعلٰی
منتظم اعلٰی
Posts: 22224
Joined: Mon Feb 25, 2008 3:46 pm
جنس:: مرد
Location: بوریوالا
Contact:

Re: ٹیوٹوریل: ایچ ٹی ایم ایل

Post by چاند بابو »

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

Code: Select all

<html>
اسے اپنے نوٹ پیڈ میں لکھ لیں، ہم نے اوپر یہ بھی پڑھا ہے کہ ٹیگ دو اقسام کے ہوتے ہیں ایک ابتدائی اور دوسرے اختتامی، درج بالا ایچ ٹی ایم ایل ابتدائی یا اوپننگ ٹیگ ہے، اور ایک ایلمنٹ میں اختتامی ٹیگ لازمی ہونا چاہیے۔ اس لئے اس ٹیگ کے نیچے والی سطر میں ہم اس کا اختتامی ٹیگ لکھ لیں گے، جو کہ درج ذیل ہے ۔

Code: Select all

</html>
انٹرنیٹ پر موجود ہر صحفہ ان دو ٹیگز کے درمیان لکھا جاتا ہے، اور ہر ویب صحفہ کی اساس یہی ٹیگ ہے، جسے ان دو ٹیگز کے بیچ میں موجود ہونا چاہیے ۔
ایچ ٹی ایم ایل ٹیگز کے درمیان، بنیادی ٹیگز جو ہونا لازمی ہیں وہ درج ذیل ہیں ۔

Code: Select all

<head>
اس ٹیگ کے بیچ میں صحفہ کے بارے میں معلوماتی درج کی جاتی ہیں، اگر آپ کسی بھی سائیٹ کا سورس کوڈ دیکھیں تو اس ٹیگ کے بیچ میں مختلف ٹیگز نظر آتے ہیں، یہ سب ٹیگز براؤزر کو صحفہ کے متعلق معلومات فراہم کرتے ہیں، جو کہ پڑھنے والے سے مخفی ہوتی ہیں ۔ویب کا یہ حصہ بے حد اہمیت کا حامل ہوتا ہے اور نہ صرف آپ کے براؤزر کو معلومات فراہم کرتا ہے کہ اس سائیٹ کو کس طرح کھولنا ہے بلکہ سرچ انجن بھی بنیادی معلومات اسی حصہ سے حاصل ہوتی ہیں اور سرچ انجن اپنی Indexing میں اس حصہ سے ہی بنیادی معلومات حاصل کرتا ہے۔ اس ٹیگ کے بعد جو دوسرا ٹیگ ہونا لازمی ہے وہ درج ذیل ہے ۔

Code: Select all

<body>
اس ٹیگ کے اندر جو کچھ بھی لکھا جاتا ہے، وہی دیگر پڑھنے والوں کو نظر آتا ہے، آسان لفظوں میں جس متن کو دکھانا درکار ہو، وہ اس ٹیگ کے بیچ میں ظاہر کیا جاتا ہے ۔ دوبارہ سے یہ بتانے کی شاید ضرورت نہیں کہ جو ٹیگ ہم شروع کریں، اُسے بند کرنا بھی لازمی ہے ۔ اوپر بیان کردہ تینوں ٹیگز کو آپ نوٹ پیڈ میں اگر درست لکھیں گے تو درج ذیل فائل آپ کے پاس موجود ہونا چاہیے ۔

Code: Select all

<html>

  <head>
  </head>

  <body>
  </body>

</html>
اگر آپ کے پاس یہ والی فائل موجود ہے، تو مبارک ہو آپ نے اپنی زندگی کی پہلی ویب سائٹ بنا لی ہے، اگر یہ آپ کے خواب میں آنے والی ویب سائٹ جیسی نہیں تو پریشان مت ہوں، کیونکہ کسی بھی ویب سائٹ بنانے کے لئے جس فائل کی ضرورت آپ کو پڑے گی، وہ یہی فائل ہے ۔
اب جیسا کہ اس سبق سے ظاہر ہوتا ہے ایچ ٹی ایم ایل صحفہ کے دو بنیادی جز ہوتے ہیں، ایک ہیڈ اور دوسرا باڈی ۔ ہیڈ ٹیگ کے اندر صحفہ کی معلومات لکھی جاتی ہیں، جیسے کہ صحفہ کا عنوان، اور باڈی ٹیگ کے اندر صحفہ کا متن لکھا جاتا ہے ۔ اب آپ ہیڈ ٹیگ کے اندر صحفہ کا عنوان لکھ لیں، جو کہ درج ذیل طریقہ سے لکھا جائے گا ۔

Code: Select all

<title>My first page</title>
لیکن یہ تحریر آپ کے ویب صحفہ پر ظاہر نہیں ہو گی، ویب صحفہ پر صرف وہی تحریر ظاہر ہو گی جو باڈی ٹیگ کے اندر لکھی جائے گی ۔ اس لئے ہم باڈی ٹیگ کے اندر مندرجہ ذیل تحریر لکھ لیتے ہیں ۔

Code: Select all

<p>This is my first web page, i'm a web designer now.</p>
اوپر بالا مثال میں p کا ٹیگ پیراگراف کو ظاہر کرتا ہے، اور یہی اس کا مقصد ہے، ہر پیراگراف کے آغاز میں اس ٹیگ کو استعمال کیا جاتا ہے ۔
ان تبدیلیوں کے بعد آپ کے پاس نوٹ پیڈ میں درج ذیل فائل ہو گی۔

Code: Select all

<html>

  <head>
   <title>My first page</title>
  </head>

  <body>
  <p>This is my first web page, i'm a web designer now.</p>
  </body>

</html>
اب اس کے بعد ہم اس فائل کو اپنے کمپیوٹر پر مخفوظ کرلیں گے، اگر آپ نوٹ پیڈ کا استعمال کر رہے ہیں تب آپ فائل مینو میں Save As پر جائیں گے، نئی کھلنے والی ونڈو میں نیچے جا کر Save As Type میں All Files کو منتخب کریں، اور یہ کرنا بہت ضروری ہے نہیں تو نوٹ پیڈ اس کو ایک سادہ عبارت میں مخفوظ کر لے گا۔ اس کے بعد فائل کا نام mypage.html لکھ کر مخفوظ کرلیں ۔ لینکس والے صرف فائل کے نام لکھ کر مخفوظ کر لیں تو کافی ہے ۔
ہر ایچ ٹی ایم ایل صحفہ کو مخفوظ کرتے وقت .htm یا .html پر ختم کرتے ہیں ۔بہتر ہے کہ آپ اس فائل کو ڈیسکٹاپ پر مخفوظ کریں ۔
فائل مخفوظ کرنے کے بعد، ڈیسکٹاپ یا جہاں بھی آپ نے فائل مخفوظ کی ہو، اُس پر ڈبل کلک کر کے اسے کھولیں، تو آپ کا صحفہ آپ کے سامنے موجود ہو گا ۔
قصور ہو تو ہمارے حساب میں لکھ جائے
محبتوں میں جو احسان ہو ، تمھارا ہو
میں اپنے حصے کے سُکھ جس کے نام کر ڈالوں
کوئی تو ہو جو مجھے اس طرح کا پیارا ہو
User avatar
چاند بابو
منتظم اعلٰی
منتظم اعلٰی
Posts: 22224
Joined: Mon Feb 25, 2008 3:46 pm
جنس:: مرد
Location: بوریوالا
Contact:

Re: ٹیوٹوریل: ایچ ٹی ایم ایل

Post by چاند بابو »

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

Attributes

ایچ ٹی ایم ایل میں مختلف ایلیمنٹ کے ساتھ مختلف خصوصیات کا استعمال کیا جاتا ہے، جنہیں Attributes کہتے ہیں، ان کے استعمال سے عبارت کی شکل وغیرہ بدلی جاتی ہے۔
اوپر بنائی گئی فائل میں ہم نے پیراگراف کے لئے ٹیگ استعمال کئے تھے ۔ اب اس میں ہم Attributes کو ذیل کی طرح لکھ سکتے ہیں ۔

Code: Select all

<p align="center">This is my first web page, i'm a web designer now.</p>
اس طرح فائل کو مخفوظ کرنے کے بعد جب آپ اسے براؤزر میں دیکھیں گے تو عبارت صحفہ کے درمیان میں نظر آئے گی ۔یہاں Alighٹیگ استعمال کیا گیا ہے براوزر کو بتانے کے لئے کہ اس تحریر کی Alignment کیا ہو گی۔

بنیادی ٹیگز اور عبارت کی تدوین ۔

ایلیمنٹ اور Attributes کا استعمال کر کے، ہم ایک مکمل لیکن سادہ ویب صحفہ ترتیب دے سکتے ہیں ۔ایچ ٹی ایم ایل میں استعمال ہونے والے تمام ایلیمنٹس کا احاطہ کرنا اس ایک مضمون میں ممکن نہیں ہے، لیکن تمام اہم ایلمنٹس اور ٹیگز اور ان کے ساتھ استعمال ہونے والے Attributes کا ایک مختصر جائزہ ہم یہاں ضرور لیں گے ۔
ہم دوبارہ سے اپنی پہلی بنائی ہوئی فائل پر توجہ دیتے ہیں ۔جو کہ درج ذیل ہے۔

Code: Select all

<html>

  <head>
   <title>My first page</title>
  </head>

  <body>
  <p>This is my first web page, i'm a web designer now.</p>
  </body>

</html>
اس فائل میں اب ہم کچھ اضافہ کرتے ہیں ۔

Code: Select all

<html>
<head>
<title>Basic text formatting.</title>
</head>
<body>
<h1>The king.</h1>
<p>Once upon a time,
 in mountains of northern india,
 a child was born.</p>
Once upon a time, <p>in mountains of northern india, a child was born.</p>
<p>Once upon a time, in mountains of northern india, a child was born.</p>
<p>Once upon a time, <br /> in mountains of northern india, a child was born.</p>
<p> Once upon a time, <hr />in mountains of northern india, a child was born.</p>
<h3>His name was king.</h3>
<p>He conqured whole india, when he was only 10.</p>
<hr />
<p align="center">That is why i called him, The king.</p>
</body>
</html>
اس فائل کو بنانے کے بعدآپ اس کا مشاہدہ براؤزر میں کریں، تو ایک ہی جملہ آپ کو مختلف انداز میں لکھا ہوا نظر آئے گا۔ یہاں پر دو قابلِ غور باتیں ہیں ۔
کہ جب آپ کسی عبارت کو پیراگراف ایلیمنٹ دیتے ہیں، تو چاہیں آپ نوٹ پیڈ میں ہر سطر کو نئی سطر سے شروع کریں، براؤزر میں یہ ویسے نظر نہیں آئے گا۔
دوسری بات یہ ہے کہ جب آپ ایک سطر لکھتے ہوئے اُس میں پیراگراف کا استعمال کرتے ہیں تو ٹیگ کے استعمال کے بعد والا حصہ نئی سطر سے شروع ہو گا ۔
کسی بھی پیراگراف میں نئی سطر شروع کرنے کے لئے یا پیراگراف میں دو پیراگراف کو ایک دوسرے سے الگ کرنے کے لئے لائن بریک <br /> کا استعمال کیا جاتا ہے ۔ اسی طرح <hr /> کے استعمال سے بھی یہی کیا جا سکتا ہے، لیکن ان دونوں میں ایک فرق یہ ہے کہ hr کے استعمال کے بعد ایک قطار ظاہر ہو جاتی ہے ۔جو Horizental Line کہلاتی ہے۔

اس کے علاوہ مندرجہ ذیل Attributes ایچ ٹی ایم ایل سادہ ویب صفحہ بنانے میں استعمال ہوتے ہیں۔

<body bgcolor=> آپ کے ویب صفحہ کے پس منظر کا رنگ تجویز کرنے کے لئے استعمال ہوتا ہے۔

<body text=> صفحہ میں موجود متن کا رنگ تجویز کرنے کے کام آتا ہے۔

<body link=> آپ کے صفحہ پر موجود لنک کے رنگ کے انتخاب کےلئے استعمال ہوتا ہے۔

<body alink=> ویب صفحہ پر موجود ایکٹو لنک کے رنگ تجویز کرنے کے کام آتا ہے۔

<body vlink=> ویب صفحہ پر موجود وہ لنک جن پر کلک کیا جا چکا ہوتا ہے ان کا رنگ تجویز کرتا ہے۔

<font> آپ کے ویب صفحہ پر موجود متن کی فونٹ کے بارے میں معلومات تجویز کرنے کے کام آتا ہے۔

<a> آپ کے ویب صفحہ پر موجود متن کےکسی بھی حصہ کو لنک دینے کے کام آتا ہے۔

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

ایچ ٹی ایم ایل کی بنیادی سے لے کر ایڈونسڈ لیول تک کی معلومات بے حد آسان الفاظ اور مثالوں کے ساتھ یہاں موجود ہے۔

اگر میں کہیں کوئی غلطی کر گیا ہوں جو یقیننا ہو گی تو معافی کا طلب گار ہوں۔
قصور ہو تو ہمارے حساب میں لکھ جائے
محبتوں میں جو احسان ہو ، تمھارا ہو
میں اپنے حصے کے سُکھ جس کے نام کر ڈالوں
کوئی تو ہو جو مجھے اس طرح کا پیارا ہو
انصاری آفاق احمد
مشاق
مشاق
Posts: 1263
Joined: Sun Oct 25, 2009 6:48 am
جنس:: مرد
Location: India maharastra nasik malegaon
Contact:

Re: ٹیوٹوریل: ایچ ٹی ایم ایل

Post by انصاری آفاق احمد »

اسلام علیکم
گو یہ موضوع ابھی میرے لئیے بہت ہی نیا ہے. مگر پھر بھی اسکو پڑھ کر بہت ہی آسانی سے سمجھ میں آرہا ہے. جزاک اللہ ، احباب آپ کی بتّی کو مزید اونچا فرماتے رہیں تاکہ آپ اسمیں مزید اضافہ کرتے رہیں
ویسے باقاعدہ کلاس وائیز اگر اسپر لکھتے رہیں تو کیا ہی بہتر ہو.چند سوالات اکٹھا ہوجائیں مربوط فرما کر ایک کلاس پریڈ کی شکل دے دیں اور جگہوں پر بھی اس موضوع کو یوں ہی دیکھنے کی کوشش کی چکّر آجانے پر بند کردیا یہ تو بہت اچھّا ہے کہ آپ اچھے استاد نہیں ورنہ طالب علموں کی بجائے آپ ہی سمجھ رہے ہوتے. :mrgreen: :mrgreen: :mrgreen:
ہمارے ادھر نویں(9)--دسویں (10) درجہ سے اسکولوں میں اسکے اسباق داخل ہوچکے ہیں اب کل گھر کے بچّوں کو بتاوں گا اور پھر انکو کیسا سمجھ میں آیا. اسکو درج کروں گا.
یا اللہ تعالٰی بدگمانی سے بد اعمالی سےغیبت سےعافیت کے ساتھ بچا.
Image
شازل
مشاق
مشاق
Posts: 4490
Joined: Sun Apr 12, 2009 8:48 pm
جنس:: مرد
Contact:

Re: ٹیوٹوریل: ایچ ٹی ایم ایل

Post by شازل »

بہت زبردست کاوش ہے
اللہ آپ کی صلاحیتوں کو مزید جلا دے
اعجازالحسینی
مدیر
مدیر
Posts: 10960
Joined: Sat Oct 17, 2009 12:17 pm
جنس:: مرد
Location: اللہ کی زمین
Contact:

Re: ٹیوٹوریل: ایچ ٹی ایم ایل

Post by اعجازالحسینی »

بہت خوب ناکام استاد جی آپ نے تو کمال کردیا اگر آپ ایسے ہی ناکام ہیں تو یہ بہت خوشی کی بات ہے کیونکہ کامیاب استادوں کی اکثر سمجھ نہیں آتی
[center]ہوا کے رخ پے چلتا ہے چراغِ آرزو اب تک
دلِ برباد میں اب بھی کسی کی یاد باقی ہے
[/center]

روابط: بلاگ|ویب سائیٹ|سکرائبڈ |ٹویٹر
User avatar
چاند بابو
منتظم اعلٰی
منتظم اعلٰی
Posts: 22224
Joined: Mon Feb 25, 2008 3:46 pm
جنس:: مرد
Location: بوریوالا
Contact:

Re: ٹیوٹوریل: ایچ ٹی ایم ایل

Post by چاند بابو »

السلام علیکم

احباب کا بہت بہت شکریہ جنہوں نے میرے اس ناقص سبق کو اتنی اہمیت دی اور میری بتی مزید اونچی کر دی۔
ویسے جس کے لئے یہ لکھا گیا ہے وہ کہاں ہیں؟؟؟؟؟؟

ارے کوئی انہیں بتائے گا پلیز کہ ہم نے معرکہ مار لیا ہے۔ :mrgreen:
قصور ہو تو ہمارے حساب میں لکھ جائے
محبتوں میں جو احسان ہو ، تمھارا ہو
میں اپنے حصے کے سُکھ جس کے نام کر ڈالوں
کوئی تو ہو جو مجھے اس طرح کا پیارا ہو
شازل
مشاق
مشاق
Posts: 4490
Joined: Sun Apr 12, 2009 8:48 pm
جنس:: مرد
Contact:

Re: ٹیوٹوریل: ایچ ٹی ایم ایل

Post by شازل »

بے فکر رہیں مدعی کہیں‌نہیں‌جاسکتا
ہم ہیں‌ناں 8)
User avatar
چاند بابو
منتظم اعلٰی
منتظم اعلٰی
Posts: 22224
Joined: Mon Feb 25, 2008 3:46 pm
جنس:: مرد
Location: بوریوالا
Contact:

Re: ٹیوٹوریل: ایچ ٹی ایم ایل

Post by چاند بابو »

حوصلہ بڑھانے کا بہت بہت شکریہ۔
قصور ہو تو ہمارے حساب میں لکھ جائے
محبتوں میں جو احسان ہو ، تمھارا ہو
میں اپنے حصے کے سُکھ جس کے نام کر ڈالوں
کوئی تو ہو جو مجھے اس طرح کا پیارا ہو
حافی
کارکن
کارکن
Posts: 14
Joined: Thu May 13, 2010 10:33 pm

Re: ٹیوٹوریل: ایچ ٹی ایم ایل

Post by حافی »

بہت خوب استاد جی بڑھیا کام ہے۔
اس سبق کی وجہ سے مجھے html سیکھنے میں بہت مدد ملی ہے۔
]
User avatar
چاند بابو
منتظم اعلٰی
منتظم اعلٰی
Posts: 22224
Joined: Mon Feb 25, 2008 3:46 pm
جنس:: مرد
Location: بوریوالا
Contact:

Re: ٹیوٹوریل: ایچ ٹی ایم ایل

Post by چاند بابو »

شکر ہے کسی کو تو مدد ملی۔
قصور ہو تو ہمارے حساب میں لکھ جائے
محبتوں میں جو احسان ہو ، تمھارا ہو
میں اپنے حصے کے سُکھ جس کے نام کر ڈالوں
کوئی تو ہو جو مجھے اس طرح کا پیارا ہو
فہیم
دوست
Posts: 216
Joined: Tue Aug 11, 2009 10:54 am

Re: ٹیوٹوریل: ایچ ٹی ایم ایل

Post by فہیم »

بہت خوب چاند بھائی. اچھے انداز میں سمجھایا ہے .
میں تو پروگرامنگ لینگوئج کو بہت مشکل سمجھتا تھا.
اگر آپ اسی طرح سمجھائیں تو بہت کچھ سیکھا جا سکتا ہے .
عتیق
مشاق
مشاق
Posts: 3184
Joined: Sun Jul 18, 2010 6:52 pm
جنس:: مرد
Contact:

Re: ٹیوٹوریل: ایچ ٹی ایم ایل

Post by عتیق »

بہت خوب مجھے تو اس سے کافی فائدہ ہوگا
چاند بھیا کافی اچھا کارنامہ دیا ہے آپ نے بہت خوب تعریف کے لائق



اللہ آپ کو اس میں مزید اس میں اضافے کی فوفیق نصیب کریں





آمین تو کہیں
[center]لاعزۃ الابالجھاد[/center]
User avatar
چاند بابو
منتظم اعلٰی
منتظم اعلٰی
Posts: 22224
Joined: Mon Feb 25, 2008 3:46 pm
جنس:: مرد
Location: بوریوالا
Contact:

Re: ٹیوٹوریل: ایچ ٹی ایم ایل

Post by چاند بابو »

آمین بہت بہت شکریہ عتیق بھیا۔
قصور ہو تو ہمارے حساب میں لکھ جائے
محبتوں میں جو احسان ہو ، تمھارا ہو
میں اپنے حصے کے سُکھ جس کے نام کر ڈالوں
کوئی تو ہو جو مجھے اس طرح کا پیارا ہو
یاسر عمران مرزا
مشاق
مشاق
Posts: 1625
Joined: Wed Mar 18, 2009 3:29 pm
جنس:: مرد
Location: جدہ سعودی عرب
Contact:

Re: ٹیوٹوریل: ایچ ٹی ایم ایل

Post by یاسر عمران مرزا »

ایک خوبصورت ٹیوٹوریل شئر کرنے کا شکریہ

آپ بھی اردو نامہ پر شئر ہونے والے تمام ٹیوٹوریلز کو ایک ہی فائل میں‌اکٹھا کر کے اردو نامہ کا کتابچہ یا میگزین شائع کر سکتے ہیں. پی ڈی ایف میگزین. میرے خیال سے یہ ایک اچھی کاوش ہو گی ، پر اس پر محنت بھی کافی لگے گی،
User avatar
چاند بابو
منتظم اعلٰی
منتظم اعلٰی
Posts: 22224
Joined: Mon Feb 25, 2008 3:46 pm
جنس:: مرد
Location: بوریوالا
Contact:

Re: ٹیوٹوریل: ایچ ٹی ایم ایل

Post by چاند بابو »

بہت شکریہ یاسر عمران بھیا آپ کی پسندیدگی کا۔

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

اردو بلاگز کی واپسی مبارک ہو۔
چیک کیجئے کیا اب وہاں اردونامہ کی کوئی جگہ بن سکتی ہے کہ ابھی بھی نہیں؟
قصور ہو تو ہمارے حساب میں لکھ جائے
محبتوں میں جو احسان ہو ، تمھارا ہو
میں اپنے حصے کے سُکھ جس کے نام کر ڈالوں
کوئی تو ہو جو مجھے اس طرح کا پیارا ہو
یاسر عمران مرزا
مشاق
مشاق
Posts: 1625
Joined: Wed Mar 18, 2009 3:29 pm
جنس:: مرد
Location: جدہ سعودی عرب
Contact:

Re: ٹیوٹوریل: ایچ ٹی ایم ایل

Post by یاسر عمران مرزا »

ڈئزائننگ کے لیے میری خدمات حاضر ہیں، مگر اب میں‌چھٹی جا رہا ہوں‌پاکستان. واپسی کے بعد موجود ہوؤں گا. اگر آپکا ارادہ ہو تو تب تک کوئی ہوم ورک کیجیے.

اردو بلاگز تو میں نے کافی عرصے سے ریکور کر رکھی ہے ،آپ نے شاید ابھی چیک کیا. ویسے میں نے اردو نامہ کو کافی عرصے سے لنک دے رکھا ہے. آپ اگر گوگل ویب ماسٹر ٹولز سے چیک کریں تو آپ کو اردو بلاگز کی طرف سے اردو نامہ کو ہزاروں لنک پوائنٹ کر رہے ہوں گے، کیوں کہ اردو نامہ کا لنک فوٹر میں ہے جو ہر صفحہ میں موجود ہے.

میں دیکھتا ہوں، آزمائشی طور پر دوبارہ اردو نامہ کو شامل کر کے ، کہ کیا نتیجہ رہتا ہے، ان شا ء اللہ بہت جلد.
User avatar
چاند بابو
منتظم اعلٰی
منتظم اعلٰی
Posts: 22224
Joined: Mon Feb 25, 2008 3:46 pm
جنس:: مرد
Location: بوریوالا
Contact:

Re: ٹیوٹوریل: ایچ ٹی ایم ایل

Post by چاند بابو »

جی فٹر لنک کا تو مجھے پہلے دن سے پتہ ہے میں تو ایگری گیٹر کی بات کر رہا تھا۔
قصور ہو تو ہمارے حساب میں لکھ جائے
محبتوں میں جو احسان ہو ، تمھارا ہو
میں اپنے حصے کے سُکھ جس کے نام کر ڈالوں
کوئی تو ہو جو مجھے اس طرح کا پیارا ہو
یاسر عمران مرزا
مشاق
مشاق
Posts: 1625
Joined: Wed Mar 18, 2009 3:29 pm
جنس:: مرد
Location: جدہ سعودی عرب
Contact:

Re: ٹیوٹوریل: ایچ ٹی ایم ایل

Post by یاسر عمران مرزا »

پورٹل صفحہ رائٹ الائن ہے، اسے سینٹر الائن نہیں کیا جا سکتا ؟

میں نے سینڈی کیشن دوبارہ سے ایکٹیویٹ کر دی ہے. دیکھتے ہیں‌کیا ہوتا ہے. آپ کے علم میں‌شاید پہلے بھی ہو گا. جب بھی آپ مرکزی صفحہ اپ ڈیٹ کریں ، ایک تحریر روزانہ کر لیں یا 2،3 دن بعد 2،3 تحاریر....

شکریہ
یاسر عمران مرزا
مشاق
مشاق
Posts: 1625
Joined: Wed Mar 18, 2009 3:29 pm
جنس:: مرد
Location: جدہ سعودی عرب
Contact:

Re: ٹیوٹوریل: ایچ ٹی ایم ایل

Post by یاسر عمران مرزا »

ویسے آپ نے اردو بلاگز کو کہیں سے بھی لنک نہیں کیا n;a;n;a
Post Reply

Return to “ٹوٹیوریل”