ایچ ٹی ایم ایل کورس (سبق اول)

بسم اللہ الرحمٰن الرحیم​

سبق کی آؤٹ لائن
پہلا سبق

1. ورلڈ وائڈ ویب (WWW-World Wide Web) کا موجد
2. ورلڈ وائڈ ویب کنسورشیم (W3C-World Wide Web Consortium)
3. ایچ ٹی ایم ایل کے ورژنز کا مختصر تعارف (Short Introduction to HTML Versions)
4. ٹیکسٹ ایڈیٹر(Text Editor)
5. ٹیگز کا استعمال (Use of Tags)
6. اوصاف و اقدار (attributes and values)
7. ویب پیج کا تعارف (Introduction to a Web Page)
8. ویب پیج بنانا (Create Web Page)
9. ہیڈنگ ٹیگز(Heading Tags)
10. پیراگراف ٹیگ(Paragraph Tag)
11. لائن بریکنگ(Line Break/Break Row)
12. بولڈ ٹیگ(Bold Tag)، سٹرانگ ٹیگ (Strong Tag)
13. اٹیلک ٹیگ(Italic Tag)، ایمفسائزڈٹیگ (Emphasized Tag)، ڈیفینیشن ٹیگ (Definition Tag)، ویری ایبل ٹیگ (Variable Tag)، سائٹ ٹیگ(Cite Tag)
14. انڈر لائن ٹیگ(Underline Tag)، انسرٹ ٹیگ (Insert Tag)
15. ڈیلیٹ ٹیگ(Delete Tag)، ایس ٹیگ (S Tag)،سٹرائک ٹیگ(Strike Tag)
16. ٹیلی ٹائپ ٹیگ(Tele Type Tag)، کوڈ سٹائل ٹیگ (Code Style Tag)، کی بورڈ ان پُٹ ٹیگ(Keyboard Iut Tag) ، سیمپل ٹیگ(Sample Tag)

آؤٹ لائن میں درج جلی سرخیاں نیلے رنگ میں فونٹ 6 سائز کے ساتھ جلی یعنی بولڈ ہوں گی
ان کے نیچے ذیلی سرخیاں نارنجی رنگ میں فونٹ 5 سائز کے ساتھ جلی یعنی بولڈ اور خط کشیدہ یعنی انڈر لائن ہوں گی
اور ان کے بھی تحت آنے والی ذیلی سرخیاں بنفشی رنگ میں فونٹ 5 سائز کے ساتھ جلی یعنی بولڈ ہوں گی

 

اب ہم باقاعدہ پہلے سبق کا آغاز آؤٹ لائن کے مطابق کرتے ہیں

ورلڈ وائڈ ویب (WWW-World Wide Web Consortium) کا موجد​

ورلڈ وائڈ ویب (WWW-World Wide Web Consortium) کا موجد برنرز لی ہے، ان کو ٹموتھی جون نام کی وجہ سے ٹم برنرز لی یا ٹمبل (TimBL) بھی کہا جاتا ہے،​

انہوں نے 1989 میں ورلڈ وائڈ ویب سے دنیا کو متعارف کروایا تھا​

اور اس وقت یہW3C کے ڈائریکٹر ہیں، اور اس کے بانی بھی یہی ہیں​

فہرست (index)پر جائیے​

 

ورلڈ وائڈ ویب کنسورشیم (W3C-World Wide Web Consortium)​

یہ ایک ایسا ادارہ ہے جو کہ ورلڈ وائڈ ویب (World Wide Web-WWW) کے سٹینڈرڈ کو پرکھنے اور نئے معیار بنانے کا کام کرتا ہے

اس کا قیام اکتوبر 1994 میں چار اداروں کے اشتراک سے عمل میں لایا گیا جو مندرجہ ذیل ہیں​

1۔ایم آئی ٹی (Massachusetts Institute of Technology)
2۔ سرن (European Organization for Nuclear Research)
3۔ڈارپا (Defense Advanced Research Project Agency)
4۔ یورپین کمیشن (European Commission)

فہرست (index)پر جائیے​

 

ایچ ٹی ایم ایل ورژنز (HTML Versions)
سب سے پہلے تو ہم ایچ ٹی ایم ایل کے ورژنز کے متعلق گفتگو کرتے ہیں کہ ایچ ٹی ایم ایل کے ورژن کون کون سے ہیں
ایچ ٹی ایم ایل کے ورژن بالترتیب اجراء اس طرح ہیں
ایچ ٹی ایم ایل (HTML)۔1.0 (1989)
یہ ایچ ٹی ایم ایل کا پہلا ورژن ہے جس میں ٹیبل، فارم، فریم، بیک گراؤنڈ اور فونٹس کا استعمال شامل نہیں تھا، صرف بنیادی فارمیٹنگ ہی ہوجاتی تھی اور اس وقت

W3C کے نہ ہونے کے سبب اس کے کوئی خاص سٹینڈڑڈ نہ تھے​

ایچ ٹی ایم ایل (HTML)۔2.0 (1995)
یہ دوسرا ورژن ہے جو 1995 میں جاری ہوا اور 1996میں اس کے پلیٹ فارم پر ایک گروپ بن گیا۔ اس ورژن میں فارم میں ٹیکسٹ باکس اور چند بٹن وغیرہ بنانے کی سہولت دی گئی ، اسی طرح ٹیبلز بنانے اور بیک گراؤنڈ لگانے کی سہولت بھی شامل کردی گئی، چونکہ 1994 میں

W3C کا قیام عمل میں لایا جاچکا تھا اس لئے یہ ایک سٹینڈرڈ ورژن تھا​

ایچ ٹی ایم ایل (HTML)۔3.2 (1997)
اس ورژن میں ٹیبل میں نئی پراپرٹیز شامل کی گئیں، اور فارم کے کافی ٹیگز کا استعمال کیا گیا
سی ایس ایس کو بھی اس کے سٹینڈرڈ میں شامل کرلیا گیا لیکن براؤزر سی ایس ایس کو ابھی قبول نہ کرسکے تھے، جبکہ براؤزرز میں فریمز کی سہولت تھی جس کے سٹینڈرڈ کو اس ورژن میں شامل نہیں کیا گیا تھا
ایچ ٹی ایم ایل (HTML)۔4.01 (1999)
اس میں سی ایس ایس کی بہتر سپورٹ کے ساتھ ساتھ ملٹی میڈیا کو شامل کرنے کی بھی سہولت فراہم کی گئی۔اور ایکسٹرنل سی ایس ایس کی سہولت کے سبب کافی حد تک کوڈ میں بھی کمی واقع ہوئی تھی،

W3C نے اس ورژن کے بعد اعلان کردیا تھا کہ یہ ایچ ٹی ایم ایل کا آخری ورژن ہے، اس کے بعد ایکس ایچ ٹی ایم ایل کے ورژن آیا کریں گے لیکن ایچ ٹی ایم ایل 5 نے آکر​

W3C کو یہ اصول توڑنے پر مجبور کردیا​

ایکس ایچ ٹی ایم ایل (xHTML)۔1.0 (2000)
اس ورژن کی منظوری کا عمل جنوری 2000 میں عمل پذیر ہوا۔لیکن یہ 2010 میں جاکر ریلیز ہوا یہ دراصل ایکسٹنسبل ہائپر ٹیکسٹ مارک اپ لینگوئج (eXtensible HyperText Markup Language) کا مخفف ہے جو کہ ایکس ایم ایل اور ایچ ٹی ایم ایل کا اشتراک ہے، یوں سمجھ لیں کہ ایچ ٹی ایم ایل پر ایکس ایم ایل کے سٹرکچر کا اطلاق کیا گیا ہے، ایکس ایم ایل دراصل ہمیں یہ سہولت دیتی ہے کہ اپنی مرضی کے نئے ٹیگ بنالئے جائیں ۔ اس کی تین کیٹگریز بھی ہیں
ایکس ایچ ٹی ایم ایل (xHTML)۔1.1 (2001)
یہ اکتوبر 2008 میں جاری ہوا اور اس میں ماڈیولرائزیشن کے زبردست فیچرز شامل کئے گئے
ایکس ایچ ٹی ایم ایل (xHTML)۔2.0 (2010)
اس ورژن میں سیمنٹک ویب (semantic web)کی جانب پیش رفت ہوئی،یہ ایک نئی اصطلاح ہے،اور اب بہت زیادہ ترقی پارہی ہے، اس کا مقصد ہے کہ جس طرح کمپیوٹر پروگرامنگ لینگوئج کو سمجھتا ہے اس طرح ایچ ٹی ایم ایل میں ایکسڑا کونٹنینٹ کی بجائے اس طرح لینگوئج کا استعمال کیا جائے، ایس وی جی اس کی زبردست مثال ہے، یعنی اب تصاویر لگانے کی بجائے ، ویب پر ہی بنائی جائیں
اس میں مزید نئے آبجیکٹس، ٹیگز اور پراپرٹیز کا اضافہ کیا گیا اور ڈوم یعنی ڈاکومنٹ آبجیکٹ ماڈل (Document Object Model-DOM) کے استعمال کے متعلق بھی بڑےزبردست اور پاور فل فیچرز شامل کئے گئے ہیں
ایچ ٹی ایم ایل (HTML)۔5.0 (2012)
ایچ ٹی ایم ایل 5 بہت ہی زیادہ خوبیوں کے ساتھ آئی اور انتہائی تیزی کے ساتھ مقبول ہوتی گئی، اس میں بے شمار نئے ٹیگز اور نئی پراپرٹیز کا استعمال کیا گیا ہے، بلکہ جاوا سکرپٹ کے کئی لائنوں کے کوڈز کو اس میں ایک پراپرٹیز میں ہی بیان کردیا گیا ہے، یہی وجہ ہے کہ یہ روز بروز قبولیت پاتی جارہی ہے، اس کا ڈرافٹ 2008 میں بناکر پبلش کردیا گیا اور اس کی ریکمنڈیشن 2012 میں پیش کردی گئی تھیں

فہرست (index)پر جائیے​

 

ٹیکسٹ ایڈیٹر(Text Editor)​

آپ نے اگر ویب سائٹ بنانی ہے تو آپ ویب پیج پر اپنے کونٹنٹ نہیں لکھ سکتے اس کے لئے آپ کو کسی ٹیکسٹ ایڈیٹرکو استعمال کرنا پڑے گا، اور اس کورس میں ہم جو ٹیکسٹ ایڈیٹر استعمال کررہے ہیں وہ پروگرامرز نوٹ پیڈ ہے، اس کو یہاں سے ڈاؤن لوڈ کیا جاسکتاہے
پروگرامرز نوٹ پیڈ
سکرین شاٹ میں پروگرامر نوٹ پیڈ کی مین ونڈو دیکھیں

فہرست (index)پر جائیے​

 

ٹیگز کا استعمال​

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

1۔پیئرڈ ٹیگز(paired tags):​

یہ ایسے ٹیگ ہوتے ہیں جو جوڑے کی صورت میں ہوتے ہیں یعنی دو ٹیگ ہوتے ہیں ان میں سے ایک اوپننگ (opening) ہوتا ہے اور دوسرا کلوزنگ (closing) ہوتا ہے اور دراصل ٹیکسٹ پر کام بھی یہی کرتے ہیں ، ان دونوں جوڑوں (pairs) کے درمیان وہ ٹیکسٹ لکھ دیا جات ہے جس پر ٹیگ اپلائی (apply)کرنا ہے، اور اس میں اچھا طریقہ یہ ہے کہ جیسے ہی اوپننگ ٹیگ لکھیں ، کلوزنگ ٹیگ بھی ساتھ ہی لکھ لیں اور ٹیکسٹ بعد میں انٹر کریں​

اوپننگٹیگ(opening tag) میں متعلقہ ٹیگ کا نام اینگل بریکٹس< >کے اندر لکھا جاتا ہے مثلا پیراگراف کے لئےp کا ٹیگ استعمال کیا جاتا ہے تو اس کو اس طرح لکھیں گے​

<p>​

جبکہ کلوزنگٹیگ(closing tag)میں اینگل بریکٹس کے اندر ٹیگ کا نام لکھنے سے قبل فارورڈ سلیش/ ڈالتے ہیں، یعنی اگر پیراگراف کے ٹیگ کو بند کرنا ہے تو پھر اس طرح لکھیں گے​

</p>
اور ان دونوں ٹیگز کے درمیان وہ ٹیکسٹ لکھا جائےگا جو کہ پیرا گراف ہوگا،تو اب ویب پیج پر آپ کو یہ ٹیگ وغیرہ نظر نہیں آئیں گے بلکہ درمیانی ٹیکسٹ ایک پیراگراف کی صورت میں لکھا نظر آئے گا

2سنگل یا اَن پیئرڈ ٹیگز (single or uaired tags):​

یہ ایسے ٹیگ ہوتے ہیں جن کو کسی ٹیکسٹ پر اپلائی نہیں کیا جاتا بلکہ لائن ختم کرنے ، تصویر لگانے جیسا کاموں کے لئے استعمال ہوتے ہیں، یہ تنہا ہوتے ہیں ،ا ن کا جوڑا نہیں ہوتا، مثلا لائن کو ختم کرنا تو اس کے لئے کسی ابتدائی یا اختتامی ٹیگ کی حاجت نہیں ہے​

ویسے تو یہ اوپننگ ٹیگ کی طرح لکھے جاسکتے ہیں مثلا اگر لائن بریک کرنی ہے تو اس کے لئےbr کا ٹیگ استعمال ہوگا تو اس کو ہم اس طرح لکھ سکتےہیں​

<br>
لیکن ایکس ایچ ٹی ایم ایل کےاصولوں کے مطابق سنگل ٹیگز کو بھی بند کیا جانا چاہئے ، یعنی ایک ہی ٹیگ میں اوپننگ اور کلوزنگ ہو اور ہمیں پتا ہے کہ کلوزنگ ٹیگ کے لئے

فارورڈ سلیش​

/

کو استعمال کیا جاتاہے تو ہم نے اسی ٹیگ میں فارورڈ سلیش لگا نی ہے لیکن کلوزنگ ٹیگ میں یہ​

فارورڈ سلیش​

/

اختتامی ٹیگ یعنی کلوزنگ ٹیگ کے نام سے قبل آتی تھی لیکن سنگل ٹیگ میں یہ​

فارورڈ سلیش​

/ ٹیگ کے نام اوراسکی پراپرٹیزکے بعد استعمال ہوگی مثلا ہم بریک لائن کے لئے اسطرح لکھیں گے
</ br>
اس طرح ایک سنگل ٹیگ کا فرق بھی کلوزنگ ٹیگ سے رہے گا اور ساتھ ہی ساتھ ایکس ایچ ٹی ایم ایل کی طلب پوری ہوجائیگی

فہرست (index)پر جائیے​

 

اوصاف و اقدار(attributes and values)​

ہم نے اگر کوئی ٹیگ استعمال کرنا ہے تو اس کی کوئی اضافی خصوصیات بھی اس میں شامل کرنے کی حاجت ہوسکتی ہے، مثلا ہم اگر انگریزی میں کوئی پیراگراف لکھتے ہیں تو اس کو بائیں طرف الائن کرنا ہوگا، اور اردو کی صورت میں دائیں طرف یا پھر عموما پیراگراف کو جسٹیفائی کرنا پڑتا ہے تو یہ تمام خصوصیات چونکہ ایک پیراگراف کی ہیں اس لئے اس کو علیحدہ ٹیگ کے ذریعے اپلائی نہیں کیا جائے گا بلکہ اس کو اسی ٹیگ میں اضافی الفاظ استعمال کرکے اپلائی کیا جائے گا، ان اضافی الفاظ کو وصف یا ایٹریبیوٹ () کہتےہیں، جس طرح درج بالا مثال میں ’الائن‘ ایک وصف یا ایٹریبیوٹ () ہے اور قدر یا ویلیو () سے مراداس وصف کی مقدار یا ویلیو ہے مثلا درج بالا مثال میں الائن کو ہم دائیں ، بائیں ، درمیان یا جسٹفائی کی ویلیو یا قدر دے سکتے ہیں

​

اوصاف و اقدار کا استعمال

اوصاف و اقدار کا استعمال اوپننگ ٹیگ میں ہوتا ہے، پہلے ٹیگ کا نام پھر وصف یعنی ایٹریبیوٹ کانام پھر = کے بعد قدر یعنی ویلیو لکھی جاتی ہے، بہتر یہ کہ ویلیو کے گرد ڈبل کوٹس استعمال کریں اور تمام اقدار کو سپیس کے ذریعے جدا کیا جاتا ہے، یعنی اگر ایک سے زیادہ ایٹریبیوٹ درج کرنے ہوں تو پہلے ایٹریبیوٹ کی ویلیو کے بعد سپیس کا استعمال کریں ،لیکن ویلیو اور ایٹریبیوٹ کے درمیان کہیں بھی سپیس نہ ڈالیں​

یعنی اوپر والی مثال کے تحت اگر ہم کوئی پیرا لکھنا چاہتےہیں اور اس کو دائیں الائن کرنا چاہیں تو اس کا طریقہ کار یہ ہوگا​

ایچ ٹی ایم ایل:

<p dir="rtl" align="right">ہماری اردو پیاری اردو میں ویب ڈیویلپمنٹ کورس میں خوش آمدید</p>
 
 
 
<p>ہماری اردو پیاری اردو میں ویب ڈیویلپمنٹ کورس میں خوش آمدید</p>

اس میں پہلی مثال میں دائیں طرف الائن کیا گیا ہے جبکہ دوسرے کوڈ میں کوئی ایٹریبیوٹ نہیں دیا گیا تو ایسی صورت میں کیا ہوگا، تواس کاجواب ہے کہ ایسی صورتوں میں ڈیفالٹ ایٹریبیوٹ لاگو ہوجاتا ہے
طے شدہ قدر یا ڈیفالٹ ویلیو (default value)
اس سے مراد وہ ویلیوز ہیں جو بغیر دئیے پہلے سے طے شدہ ہیں یعنی ان کا ڈیفائن کرنا نہ کرنا برابر ہے، مثلا اوپر والی مثال میں ہی بائی ڈیفالٹ کوئی بھی پیرا گراف بائیں طرف ہی الائن ہوتا ہے، کیونکہ اس کے بنانے والے انگریز تھے چنانچہ انہوں نے اپنی زبان کو ہی فوقیت دی ہے، ہمیں اردو میں کرنے کے لئے اس کو تبدیل کرنا پڑتا ہے،ڈیفالٹ ویلیو کا فائدہ یہ ہوتا ہے کہ اگر وہی ویلیو دینی ہے تو پھر لکھنے کا فائدہ نہیں ہے

فہرست (index)پر جائیے​

 

ویب پیج کا تعارف(Introduction to a Web Page)
سب سے پہلے تو یہ دیکھیں کہ ایک ویب پیج کے کتنے حصے ہوتے ہیں
کوئی بھی ویب پیج بنیادی طور پر دو حصوں پر مشتمل ہوتا ہے
1۔ڈاکومنٹ ٹائپ ڈیفینیشن (Document Type Definition-DTD):
یہ حصہ ٹیکسٹ ایڈیٹر کی ابتدائی لائن میں ہی درج کیا جاتا ہے جو کہ ایچ ٹی ایم ایل کے ورژن کی نشاندہی کرتاہے تاکہ اگرW3C

سے اس کا سٹینڈرڈ وغیرہ چیک کروانا ہو تو وہ کس سٹینڈرڈ کے مطابق چیک کیا جائے ، ہم چونکہ ایچ ٹی ایم ایل 5 میں ویب پیج بنائیں گے تو اس میں ڈاکومنٹ ٹائپ ڈیفائن کرنا بہت آسان ہے​

مثلا اس طرح پہلی سطر میں لکھ دیں​

<DOCTYPE html!>
بقیہ ورژنز کی لائنیں لکھ کر سمجھانے کا کام کیا جائے تو وہ بہت لمبا عمل ہو جاتا ہے
2۔ایچ ٹی ایم ایل (HTML):
ٹیکسٹ ایڈیٹرمیں یہ ویب پیج کا دوسرا حصہ ہوتا ہے جو کہ ویب پیج کے ان مندرجات پر مشتمل ہوتا ہے جن کا تعلق ویب سائٹ کے وزیٹر (visiter) سے ہوسکتا ہے
اس کو مزید دو حصوں میں تقسیم کیا جاتا ہے
i.ہیڈ(Head):
اس میں شامل ٹیگز میں میٹا (Meta) ٹیگ آتا ہے جو سرچ انجن کے لئے کافی مدد فراہم کرتا ہے اور اس کے علاوہ کریکٹر سیٹ کو ڈیفائن کرنے میں مدد دیتا ہے ۔
ہیڈ میں ٹائٹل (Title) کا ٹیگ سب سے زیادہ مستعمل ہے
یہ ایک پیئرڈ ٹیگ ہے یعنی اوپننگ اور کلوزنگ ٹیگ پر مشتمل ہے جن کے مابین ٹیکسٹ لکھا جاتا اور یہ ٹیکسٹ ٹائٹل بار میں ظاہر ہوتا ہے، یا پھر اگر ماڈرن براوزر ہےتو اس کے ٹیب میں ظاہر ہوتا ہے، اس ٹیگ کو اس طرح لکھیں گے

ایچ ٹی ایم ایل:

<head>
      <title>
            Our Urdu: Beloved Urdu
      </title>
</head>

خلاصہ کلام یہ کہ ہیڈ ٹیگ میں Title، Meta اور Stylesheet یا Scripting Language کے ٹیگز ہوتےہیں
ii.باڈی (Body):
اس ٹیگ کے اندر بقیہ تمام ٹیگ استعمال کرتے ہیں جن کا تعلق براوزر سے ہوتا ہے اور ہر کسی کو براوزر کی باڈی میں نظر آتے ہیں، باڈی کے اندر وہ تمام ٹیگز ہو سکتےہیں جن کا تعلق فارمیٹنگ، سڑکچر، ٹیبلز ، لنکز، فارمز، فریمز ، لسٹنگ وغیرہ سے ہو، یعنی چند ایک کے علاوہ بقیہ تمام ٹیگ باڈی کے ٹیگ کے اندر ہی آتے ہیں
آئیے اب باڈی کے ٹیگ کا ذرا انداز دیکھتےہیں

ایچ ٹی ایم ایل:

<body>
      <p align="center">OUR URDU</p>
      <b><i>OUR URDU</i></b>
</body>

فہرست (index)پر جائیے​

 

ویب پیج بنانا (Create Web Page)​

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

ایچ ٹی ایم ایل:

<html>
    <head>
        <title>
            First Web Page
        </title>
    </head>
 
    <body>
        This is My First Web Page
    </body>
</html>

اور سکرین شاٹس کے مطابق عمل کریں

​

فہرست (index)پر جائیے​

 

اب Ctrl+S دبا کر سیو کریں یا پھر فائل میں جاکر Save پر کلک کریں

​

فہرست (index)پر جائیے​

 

اب ایک ڈائیلاگ باکس کھل جائے گا

​

فہرست (index)پر جائیے​

 

اس ڈائیلاگ باکس میں وہ جگہ منتخب کریں جہاں آپ نے فائل محفوظ کرنی ہو مثلا ڈیسک ٹاپ پر ہی کرلیں پھر فائل کا کوئی سانام دیں، نام کے بعد html. لازمی لگائیں، سکرین شاٹ دیکھیں

​

فہرست (index)پر جائیے​

 

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

​

فہرست (index)پر جائیے​

 

اس کو ڈیفالٹ براوزر میں کھولیں یا اوپن وِد (open with) کے ذریعے کسی دوسرے براوزر میں کھول لیں، مثلا انٹر نیٹ ایکسپلورر 10 میں سکرین شاٹ

​

اب آپ کامیابی سے پہلا پیج بنانے میں کامیاب ہوچکے ہیں

فہرست (index)پر جائیے​

 

ہیڈنگ ٹیگز(Heading Tags)
ہیڈنگ ٹیگز پیئرڈ ٹیگز ہیں ۔ہیڈنگ ٹیگ عموما جلی الفاظ کو لکھنے کے لئے استعمال کیے جاتے ہیں، اور ایچ ٹی ایم ایل میں بنیادی طور پر اس کے 6 درجات ہیں یعنی 6 قسم کی ہیڈنگ ہوتی ہیں،
ہیڈنگ 1 کا سائز سب سے بڑا ہوتا ہے
اور ہیڈنگ 6 تک بتدریج کم ہوتا رہتا ہے

عملی طریقہ​

ایچ ٹی ایم ایل:

<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>

ہیڈنگ ٹیگز سائز کے علاوہ سرچ انجن کو سرچ کی سہولت مہیا کرنے کا بھی کام سرانجام دیتے ہیں
ہیڈنگ ٹیگ جب لکھا جاتا ہے تو

یہ ہیڈنگ کے ٹیکسٹ سے قبل ایک لائن چھوڑ دیتا ہے​

اوصاف(Attributes)
ہیڈنگ کے ٹیگ کا صرف ایک ہی خصوصی وصف/ایٹریبیوٹ ہے وہ ہے
align
اقدار (Values)
اور اس ایٹریبیوٹ کی مندرجہ ذیل ویلیوز ہیں
left:یہ ڈیفالٹ ویلیو ہے، اور ہیڈنگ کو بائیں طرف لے جاتا ہے
right: اس سے ہیڈنگ صفحے کی دائیں طرف ہو جائے گی
center: اس سے ہیڈنگ صفحے کے بالکل درمیان میں آجائے گی
justify: اس سے دونوں اطراف برابر ہوجائیں گی، جس طرح کہ کاپی کے حاشیے لگائے ہوتے ہیں، یہ صرف اسی صورت میں ٹھیک نظر آئے گی جب ہیڈنگ ایک سے زیادہ سطور پر مشتمل ہو

فہرست (index)پر جائیے​

 

پیراگراف ٹیگ(Paragraph Tag)​

یہ بھی ایک پیئرڈ ٹیگ ہے،اگرچہ اس کا کلوزنگ ٹیگ بند کرنا اتنی اہمیت نہیں رکھتا لیکن بہتر پریکٹس کے لئے ہمیں لازمی طور پر بند کرنے کی عادت بنانی چاہئے​

پیراگراف کا ٹیگ جیسا کہ نام سے ظاہر ہوتا ہے کہ یہ پیراگراف لکھنے کے کام آتاہے​

ہیڈنگ کی طرح یہ بھی ٹیکسٹ سے قبل ایک لائن چھوڑ دیتا ہے​

عملی طریقہ​

ایچ ٹی ایم ایل:

<p>This is My First Web Page</p>

اوصاف(Attributes)
پیراگراف کے ٹیگ کا بھی صرف ایک ہی خصوصی وصف/ایٹریبیوٹ ہے وہ ہے
align
اقدار (Values)
اور اس ایٹریبیوٹ کی مندرجہ ذیل ویلیوز ہیں
left:یہ ڈیفالٹ ویلیو ہے، اورپیراگراف کو بائیں طرف لے جاتا ہے
right: اس سےپیراگراف صفحے کی دائیں طرف ہو جائے گا
center: اس سے پیراگراف صفحے کے بالکل درمیان میں آجائے گا
justify: اس سے دونوں اطراف برابر ہوجائیں گی، جس طرح کہ کاپی کے حاشیے لگائے ہوتے ہیں، یہ صرف اسی صورت میں ٹھیک نظر آئے گی جب پیراگراف ایک سے زیادہ سطور پر مشتمل ہو

فہرست (index)پر جائیے​

 

لائن بریکنگ(Line Break/Break Row)​

یہ ایک سنگل ٹیگ ہے ۔یہ ٹیگ ٹیکسٹ کو اس طرح لائن میں منتقل کرتا ہے کہ پیراگراف یا ہیڈنگ کی طرح کوئی لائن ٹیکسٹ سے قبل چھوڑے بغیر ٹیکسٹ نئی لائن میں چلا جاتا ہے​

عملی طریقہ​

ایچ ٹی ایم ایل:

<p>This is <br />My First Web Page</p>

یا پھر بغیر پیراگراف کے سادہ ٹیکسٹ پر بھی اپلائی ہوجاتا ہے
مثلا

ایچ ٹی ایم ایل:

This is <br />My First Web Page

نوٹ: یہاں یہ بات ذہن میں رکھیے کہ ٹیکسٹ ایڈیٹر میں آپ کے اینٹر کے بٹن دبانے سے بننے والی نئی لائن کا ویب پیج پر کوئی اثر نہیں ہوتا ۔ بلکہ ہر اینٹر (یعنی ٹیکسٹ ایڈیٹر کی نئی لائن) صرف ایک سپیس کا اضافہ کرے گی
مثلا اگر آپ ٹیکسٹ ایڈیٹر میں اس طرح لکھیں

ایچ ٹی ایم ایل:

<p>
This            is
 
My
First
Web
Page
</p>

تو اس کا رزلٹ ویب پیج پر اس طرح آئے گا

This is My First Web Page​

یعنی اس ٹیکسٹ ایڈیٹر میں جتنی مرضی لائنیں چھوڑیں ویب پیج میں صرف ایک سپیس کا اضافہ ہوگا، یا جتنی مرضی سپیس چھوڑیں تو بھی صرف ایک سپیس کا اضافہ ہوگا
اس لئے ہم نئی لائن میں ٹیکسٹ کو لانے کے لئے لائن بریکنگ والے ٹیگ کا استعمال کرتے ہیں اور زیادہ سپیسز کے لئے ہمارے پاس pre-formatted اور special character کی آپشن ہے جوکہ اپنے وقت پر بتائی جائے گی
اوصاف(Attributes)
اس ٹیگ کا کوئی خصوصی وصف/ایٹریبیوٹ نہیں ہے

فہرست (index)پر جائیے​

 

بولڈ ٹیگ(Bold Tag)، سٹرانگ ٹیگ (Strong Tag)​

یہ پیئرڈ ٹیگز ہے، یعنی ان میں اوپننگ اور کلوزنگ ٹیگ استعمال ہوتے ہیں اور ٹیگز کے مابین ٹیکسٹ موٹا دکھائی دیتا ہے، یہی کام سٹرانگ بھی کرتا ہے، سٹرانگ ٹیگ بھی بالکل اسی طرح کا رزلٹ ظاہر کرواتا ہے لیکن دونوں کا فرق Semantic Web کے حوالے سے ہے جوکہ ایک طویل موضوع ہے ،اس لئے اس پر زیادہ توجہ نہیں دی جاسکتی ، مختصرا یہ کہ سرچ انجن ان دونوں کو علیحدہ تصور کرتا ہے اور سٹرانگ والے ٹیگ کے ٹیکسٹ کو اہم تصور کرتا ہے، یہ ایچ ٹی ایم ایل 5 کی تفصیلات (specifications) ہیں

عملی طریقہ​

ایچ ٹی ایم ایل:

<b>Bold Text</b>
<strong>Strong Text</strong>

اوصاف(Attributes)
ان ٹیگز کا کوئی خصوصی وصف/ایٹریبیوٹ نہیں ہے

فہرست (index)پر جائیے​

 

اٹیلک ٹیگ(Italic Tag)، ایمفسائزڈ ٹیگ (Emphasized Tag)، ڈیفینیشن ٹیگ(Definition Tag)، ویری ایبل ٹیگ (Variable Tag), سائٹ ٹیگ (Cite Tag)​

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

عملی طریقہ​

ایچ ٹی ایم ایل:

<i>Italic Text</i>
<em>Emphasized Text</em>
<dfn>Definition Term</dfn>
<var>Variable</var>
<cite>Cite Name</cite>

اوصاف(Attributes)
ان ٹیگز کا کوئی خصوصی وصف/ایٹریبیوٹ نہیں ہے

 

انڈر لائن ٹیگ(Underline Tag)، انسرٹ ٹیگ (Insert Tag)​

یہ دونوں بھی پیئرڈ ٹیگز ہیں ، اور یہ ٹیکسٹ کے نیچے لائن لگا دیتے ہیں، جبکہ Semantic Web کے حوالے سے انسرٹ کا ٹیگ اپ ڈیٹس کو ظاہر کرتا ہے

عملی طریقہ​

ایچ ٹی ایم ایل:

<u>Underlined Text</u>
<ins>Inserted Text</ins>

اوصاف(Attributes)
ان ٹیگز کا کوئی خصوصی وصف/ایٹریبیوٹ نہیں ہے

فہرست (index)پر جائیے​

 

ڈیلیٹ ٹیگ(Delete Tag)، ایس ٹیگ (S Tag) ،سٹرائک ٹیگ(Strike Tag)​

یہ تینوں پیئرڈ ٹیگ ہیں اور تینوں کا ایک ہی کام ہے جبکہ Semantic Web کے حوالے سے ڈیلیٹ بھی انسرٹ کی طرح اپ ڈیٹ کے لئے استعمال کیا جاتا ہے، اور HTML5 سٹرائک کے ٹیگ کو سپورٹ نہیں کرتا ، یہ صرف HTML4.01 تک کارآمد تھا، اور ایس ٹیگ جس کو ری ڈیفائنڈ کرلیا گیا ہے صرف سادہ سٹرائک کو ظاہر کرتا ہے کہ اب یہ ٹیکسٹ قابلِ قبول نہیں رہا

عملی طریقہ​

ایچ ٹی ایم ایل:

<del>Deleted Text</del>
<s>No Longer Text</s>
<strike>Strike Text</strike>

اوصاف(Attributes)
ایس اور سٹرائک ٹیگز کا کوئی خصوصی وصف/ایٹریبیوٹ نہیں ہے، جبکہ ڈیلیٹ ٹیگ کے دو خصوصی ایٹریبیوٹ ہیں
cite:
اقدار (Values)
اس میں ڈیلیٹ کرنے کی وجہ بتانے کے لئے کوئی ویب سائٹ یا اسی ویب سائٹ کا کوئی ویب پیج درج کردیا جاتاہے جہاں سے اس ٹیکسٹ کو ڈیلیٹ کرنے کی وجہ کا پتا لگا یا جاسکتا ہے
datetime:
اقدار (Values)
اس کی ویلیو میں وہ دن اور تاریخ درج کردی جاتی ہے جب وہ ٹیکسٹ ڈیلیٹ کرنا مقصود ہو
سبق کی طوالت کے پیش نظر میں اس کی تفصیل چھوڑ رہا ہوں

فہرست (index)پر جائیے​

 

ٹیلی ٹائپ ٹیگ (Tele Type Tag)، کوڈ سٹائل ٹیگ (Code Style Tag)، کی بورڈ ان پٹ ٹیگ (Keyboard Iut Tag)، سیمپل ٹیگ (Sample Tag)​

یہ چاروں پیئرڈ ٹیگ ہیں اور یہ سب منتخب ٹیکسٹ کو بالکل اسی انداز کی طرح ویب براوزر پر ظاہر کرتے ہیں جس طرح کہ کسی ٹائپ رائٹر سے لکھا گیا ہو، چونکہ عام طور پر کمپیوٹر لینگوئج کوڈ اسی طرح لکھے جاتے ہیں اس لئے کوڈ سٹائل ٹیگ استعمال ہوتا ہے، سیمپل ٹیگ کسی پروگرام کے سیمپل یعنی نمونے کے طور پر ٹیکسٹ کو ظاہر کرواتا ہے اور کی بورڈ ان پٹ ٹیگ بھی ٹائپ رائٹرکی طرح لکھائی کو ویب پیج پر ظاہر کرواتا ہے، جبکہ ٹیلی ٹائپ ٹیگ جسکا کام ان کی طرح ہی ہے لیکن اس کو HTML5 سپورٹ نہیں کرتا، وہ صرف HTML4.01 تک محدود ہے

عملی طریقہ​

ایچ ٹی ایم ایل:

<tt>Tele Type Text</tt>
<code>Computer Language Code Style</code>
<kbd>Keyboard Input Text</kbd>
<samp>Sample Text</samp>

اوصاف(Attributes)
ان ٹیگز کا کوئی خصوصی وصف/ایٹریبیوٹ نہیں ہے

پہلا سبق اتمام پذیر ہوا​

فہرست (index)پر جائیے​

 

اب تک پڑھے گئے تمام ٹیگز اور ان کے اوصاف و اقدار کے استعمال سے متعلق کوڈنگ درج ذیل ہے

ایچ ٹی ایم ایل:

<!DOCTYPE html>
<html>
    <head>
        <title>
            First Web Page
        </title>
    </head>
   
    <body>
        <h2><u>Hedings</u></h2>
        <h1 align="center">Heading 1</h1>
        <h2 align="left">Heading 2</h2>
        <h3>Heading 3</h3>
        <h4 align="right">Heading 4</h4>
        <h5>Heading 5</h5>
        <h6>Heading 6</h6>
       
        <h2><u>Paragraphs</u></h2>
        <p>This is My First Paragraph in My First Web Page of Web Designing and Development Course at www.oururdu.com</p>
        <p align="center">This is My First Paragraph in My First Web Page of Web Designing and Development Course at www.oururdu.com</p>
        <p dir="rtl">This is My First Paragraph in My First Web Page of Web Designing and Development Course at www.oururdu.com</p>
        <p>This is My First Paragraph in My First Web Page of Web Designing and Development Course at www.oururdu.com. This is My First Paragraph in My First Web Page of Web Designing and Development Course at www.oururdu.com. This is My First Paragraph in My First Web Page of Web Designing and Development Course at www.oururdu.com. This is My First Paragraph in My First Web Page of Web Designing and Development Course at www.oururdu.com</p>
        <p align="justify">This is My First Paragraph in My First Web Page of Web Designing and Development Course at www.oururdu.com. This is My First Paragraph in My First Web Page of Web Designing and Development Course at www.oururdu.com. This is My First Paragraph in My First Web Page of Web Designing and Development Course at www.oururdu.com. This is My First Paragraph in My First Web Page of Web Designing and Development Course at www.oururdu.com</p>
       
        <h2><u>Line Break/ Break Rows</u></h2>
        <p>This is My First Paragraph in
 
My First Web Page of                                Web Designing and Development Course
 
 
 
 
at www.oururdu.com</p>
        <p>This is My First Paragraph in <br /> My First Web Page of <br /> Web Designing and Development Course <br /> at www.oururdu.com</p>
       
        <h2><u>Bold and Strong Tags</u></h2>
        <b>Bold Text</b><br />
        <strong>Strong Text</strong><br />
       
       
        <h2><u>Italic, Emphasized, Definition, Variable and Cite Tags</u></h2>
        <i>Italic Text</i>
        <em>Emphasized Text</em><br />
        <dfn>Definition Term</dfn><br />
        <var>Variable</var><br />
        <cite>Cite Name</cite><br />
       
       
       
        <h2><u>Underline and Insert Tags</u></h2>
        <u>Underline Text</u><br />
        <ins>Inserted Text</ins><br />
       
       
       
        <h2><u>Delete, S and Strike Tags</u></h2>
        <del>Deleted Text</del><br />
        <del cite="http://www.oururdu.com/" datetime="2013-07-01T23:00:00T+05:00">Deleted Text</del><br />
        <s>Strike Text</s><br />
        <strike>Strike Text</strike><br />
       
       
       
        <h2><u>Tele Type, Code Style, Keyboard Input and Sample Tags</u></h2>
        <tt>Tele Type Text</tt><br />
        <code>Code Style Text</code><br />
        <kbd>Keyboard Input Text</kbd><br />
        <samp>Sample Text</samp><br />
       
    </body>
</html>

 

کوڈنگ کیا ہوا سبق درج ذیل ہے، ڈائریکٹ کھولنے کے لئے نیچے دئیے گئے ربط پر کلک کریں
ایچ ٹی ایم ایل کورس (پہلا سبق)
اگر ڈاؤن لوڈ کرنا ہوتو Ctrl+S دبائیں اور ڈائیلاگ باکس میں سیو کے بٹن پر کلک کرکے ڈاؤن لوڈ کریں
اب فائل کو ڈاؤن لوڈ کرکے ڈبل کلک کریں گے تو یہ براؤزر میں کُھلے گی اور اگر اس کو ایڈیٹر میں کھولنا چاہیں تو
1۔فائل پر رائٹ کلک کریں
2۔open with والی آپشن پر ماؤس پوائنٹر لے جائیں،
3۔اگر پل ڈاؤن مینو ظاہر ہو تو پروگرامر نوٹ پیڈ یا نوٹ پیڈ کو منتخب کرلیں

دوسرا طریقہ یہ ہے کہ
1۔پروگرامر نوٹ پیڈ کھولیں
2۔فائل مینو میں سے جا کر اوپن پر کلک کریں تو ایک ڈائیلاگ باکس کھل جائےگا
3۔متعلقہ فائل والی جگہ پر جائیں
4۔ ڈبل کلک کرکے یا سنگل کلک کرکے اوپن والا بٹن دبائیں

 

یہ سبق کی لڑی ہے اس میں صرف سوالات و جوابات کی اجازت ہے​

تبصرہ جات، مشوروں اور تجاویز و آراء کے لئے اس ربط پر جائیں​

تبصرہ جات برائے ویب ڈیزائننگ کورس (ایچ ٹی ایم ایل)​

 

مکمل سبق کو پی ڈی ایف فارمیٹ کی شکل میں حاصل کرنے کے لئے نیچے دیئے ربط پر کلک کریں

ایچ ٹی ایم ایل کورس (سبق اول) پی ڈی ایف بُک میں یہاں سے ڈاؤن لوڈ کریں​

 

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

 

ملک بلال:​

کلائنٹ سائڈ لینگوئیج یا سرور سائڈ لینگوئیج کون کون سی ہیں​

مناپہلوان:​

سرور سائڈ لینگوئیج کی مثالیں پی ایچ پی، اے ایس پی یا جے ایس پی ہیں اور کلائنٹ سائڈ سکرپٹ کی مشہور مثال جاوا سکرپٹ ہے​

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

 

dir="ltr" اور align کی پراپرٹریز میں کیا فرق ہے نیز کیا اردو مواد کو بھی جسٹفائی کیا جا سکتا ہے؟

 

ڈائریکشن (dir)سے مراد ہے کہ کوئی زبان کدھر سے کدھر کو لکھی جاتی ہے (یعنی یہ دائیں سے بائیں مثلا اردو ، عربی یا بائیں سے دائیں مثلا انگریزی وغیرہ ہوسکتی ہے)
اور
الائنمنٹ (align)سے مراد ہے کہ آپ کس حاشیے کی طرف ٹیکسٹ کو لکھنا چاہتے ہیں یعنی داہنے حاشیے کی طرف(رائٹ) ، بائیں حاشیے کی طرف (لیفٹ)، یا درمیان میں (سنٹر)یا دونوں سروں سے ٹیکسٹ حاشیوں سے ملا ہوا ہو(جسٹفائی)
آپ نے کئی مرتبہ دیکھا ہوگا کہ آپ اردو لکھ رہے ہوتے ہیں تو اردو ایڈیٹرمیں کرسر ہمیشہ ٹیکسٹ کے آگے ہی رہتا ہے، لیکن بعض دفعہ ٹیکسٹ تو اردو کی طرز پر لکھا جارہا ہوتا ہے لیکن کرسر عموما لائن کے شروع میں گھوم رہا ہوتا ہے،وہ ڈائریکشن کامسئلہ ہوتا ہے
اور اگر آپ کسی زبان کے سپیشل کریکٹرز استعمال کرتے ہیں جسطرح بریکٹس وغیرہ یا قرآن پاک میں آیت کی نشانی وغیرہ اگر ڈائریکشن نہیں ہوگی تو وہ گڑ بڑ کرجاتے ہیں اگرچہ وہ رائٹ الائن ہی ہوں
ان دونوں کو اکٹھا نہیں کیا جاسکتا کیونکہ rtl ایک ویلیو ہے جو کہ dir ایٹریبیوٹ میں آتی ہے جبکہ جسٹفائی بھی ایک ویلیو ہے جو الائن ایٹریبیوٹ میں آتی ہے