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

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

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

دوسرا سبق​

1. افقی خط کا ٹیگ (Horizontal Line Tag)
2. تاثرات/کمنٹس ٹیگ (Comments Tag)
3. مخففات کے ٹیگ (Acronym & Abbreviation Tags)
4. بِگ ٹیگ (Big Tag)
5. سمال ٹیگ (Small Tag)
6. سنٹر ٹیگ (Center Tag)
7. پری فارمیٹڈ ٹیکسٹ (Preformatted Text)
8. واوین ٹیگ(Short Quotation Tag)
9. اقتباس ٹیگ(Blockquote Tag)
10. ایڈریس ٹیگ (Address Tag)
11. رنگوں کا استعمال (Use of Colours)
12. پس منظر کا رنگ تبدیل کرنا (Changing the Background Color)
13. تصویر شامل کرنا (Inset an Image)
14. تصویر کی الائنمنٹ اور سائز تبدیل کرنا (Alignment and Change the Size of Image)
15. تصویر کے ماخذ کا ربط دینا (Source Link of Image)
16. پاتھ ڈائریکٹری کا استعمال (Use of Path Directory)
17. پس منظرمیں تصویرشامل کرنا (Inserting a Background Image)

 

افقی خط کا ٹیگ (Horizontal Rule Tag)
افقی خط کا ٹیگ سنگل ٹیگ ہے، اس کو </ hr> ٹیگ سے ظاہر کیا جاتاہے یعنی اس کو بریک لائن کے ٹیگ کی طرح ایک ہی ٹیگ میں بند کرنا ہے، </ br> کے ٹیگ سے جسطرح لائن کو توڑا جاتا ہے یعنی نئی لائن شروع کی جاتی ہے، اسی طرح افقی خط کے ٹیگ سے ایک افقی لائن ظاہر کی جاتی ہے، جیسا کہ مختلف موضوعات کے درمیان ایک خط/لائن کو استعمال کیا جاسکتاہے تاکہ ان کے درمیان فرق پتا چل سکے ویسے ہی اس کو استعمال کیا جاتاہے

عملی طریقہ​

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

<p>This is a pragraph, and cosists the ideas of Uncle Hroon Rashee, about our urdu</p>
<hr />
<p>This is a pragraph, and cosists the ideas of Malik Bilal Anwar, about our urdu</p>

ایچ ٹی ایم ایل 5 یا semantic web میں اس کو کسی تصور، آئیڈیا یا themeکے ختم ہونے کے طور پر لیا جاتا ہے، اس لئے ویب بناتے ہوئے اس بات کا خیال رکھنا چاہئے کہ کیا واقعی ہم اس کو معنوی اعتبار سے یا semantically درست استعمال کررہے ہیں
اوصاف(Attributes)
اس ٹیگ کے اوصاف یعنی attributes دراصل ایچ ٹی ایم ایل 3.20 تک بلا ردو قدح استعمال ہوتے رہے ہیں، لیکن ایچ ٹی ایم ایل 4.01 میں اس کو ناپسندیدہ (depricated) بنا دیا گیا، اور ایچ ٹی ایم ایل 5 اس کے اوصاف کو سپورٹ نہیں کرتی۔تو اس کے لئے ہمیں CSS کی مدد لینی پڑتی ہے اور فقط ٹیگ کا استعمال کیا جاتا ہے، اور گلوبل ایٹریبیوٹس کو استعمال کیا جاسکتاہے جن کی تفصیل بعد میں آئے گی
افقی خط کے ٹیگ کے چار خصوصی وصف/ایٹریبیوٹ ہیں جوکہ align, width, size اور noshade ہیں، آئیے ان کی تفصیل دیکھتے ہیں
align
اقدار (Values)
اس قدر سے مراد ہے کہ کس حاشیے کی طرف کو رُخ ہو۔اور اس ایٹریبیوٹ کی مندرجہ ذیل ویلیوز ہیں
left:یہ ڈیفالٹ ویلیو ہے، اورافقی خط کو بائیں طرف لے جاتا ہے
right: اس سے افقی خط صفحے کی دائیں طرف ہو جائے گی
center: اس سے افقی خط صفحے کے بالکل درمیان میں آجائے گی

width
اقدار (Values)
اس قدر سے مراد خط کی چوڑائی ہے اور اس ایٹریبیوٹ کی ویلیوز کو ہم دو طرح سے ظاہر کرسکتے ہیں
ایک تو pixels کی صورت میں دوسرا فیصد (percentage) کی صورت میں، یہ دونوں اس کی قدر یعنی valueکے یونٹ ہیں
pixels: اس سے مراد کسی لائن کی چوڑائی کو پکسلز کی صورت میں بیان کرنا ہے، پکسلز کے متعلق بنیادی اصطلاحات والے موضوع میں دیکھا جاسکتا ہے، اس کو لکھنے کےلئے عموما قدر کے بعد pxکا لاحقہ لگایا جاتا ہے اور یہ طے شدہ ہوتا ہے یعنی اگر قدر کے بعد px نہ بھی لگایا جائے تو اس کا مطلب ہوتا ہے کہ یہ پکسل ہی ہیں۔ pixels عموما ایک فکس قدر کو واضح کرتے ہیں، یعنی صفحہ کے سائز کو بڑھانے یا کم کرنے کا ان پر کوئی اثر نہیں ہوتا
percentage: اس سے مراد کسی صفحے کے اعتبار سے اس کی چوڑائی ہے، اور اس کو ظاہر کرنے کے لئے فیصد کا نشان (%) لاتے ہیں اس کا کام صفحے کے سائز کی نسبت سے ہے یعنی اگر صفحے کے سائز کو کم یا زیادہ کیا جائے تو پھر اس کی ویلیو اس صفحے کے اعتبار سے ہوگی، مثال کے طور پر اگر آپ نے 1024پکسل کی سکرین پر براؤزر کو میکسیمائز (maximize) کیا ہوا ہے اور 50 فیصد چوڑائی ہو تو پھر وہ 512پکسل کی جگہ لے گا، اور اگر براؤزر کی ونڈو آپ ری سٹور (restore) کرکے 800 پکسل کردیتے ہیں تو پھر خط کی چوڑائی صرف 400 پکسل رہ جائے گی، یعنی یہ کسی دوسری چیز پر منحصر ہوتاہے

size
اقدار (Values)
اس قدر سے مراد خط کی اونچائی یا لمبائی ہےاور اس ایٹریبیوٹ کی ویلیو کا ایک ہی یونٹ ہے، وہ ہے pixel
pixels: اس سے مراد کسی لائن کی چوڑائی کو پکسلز کی صورت میں بیان کرنا ہے، پکسلز کے متعلق بنیادی اصطلاحات والے موضوع میں دیکھا جاسکتا ہے، اس کو لکھنے کےلئے عموما قدر کے بعد pxکا لاحقہ لگایا جاتا ہے اور یہ طے شدہ ہوتا ہے یعنی اگر قدر کے بعد px نہ بھی لگایا جائے تو اس کا مطلب ہوتا ہے کہ یہ پکسل ہی ہیں۔ pixels عموما ایک فکس قدر کو واضح کرتے ہیں، یعنی صفحہ کے سائز کو بڑھانے یا کم کرنے کا ان پر کوئی اثر نہیں ہوتا

noshade
اقدار (Values)
اس قدر سے مراد خط کو ایک سادے رنگ کی صورت میں ہونا چاہئے یا اس پر کسی قسم کے سایے پڑنے کے سٹائل کا گمان ہو، اس کی طے شدہ (default) طریقہ یہ ہے کہ اگر اس کو نہ لکھا جائے تو خط سایہ نما سا بنتا ہے، اور اگر اس کو لکھا جائے تو پھر خط کا سایہ نہیں بنتا، اس کو لکھنے کے دو انداز ہیں ایک تو یہ کہ عام انداز میں جس طرح وصف لکھنے کے بعد = کا نشان ڈالا جاتاہے اور کوٹس میں قدر لکھی جاتی ہے تو اس کو اس طرح بھی لکھ سکتے ہیں، اور دوسرا انداز ہےکہ فقط وصف کا نام لکھ دیں تو اس کا مطلب یہ ہوگا، کہ اس کی ویلیو بھی یہی ہے، اس طرح کے کافی اوصاف آئیں گے اور ان کو ہم بولین boolean اوصاف بھی کہہ لیتے ہیں

کوڈ کو ٹیسٹ کریں

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

<hr align="left" width="50%" noshade>
<hr align="cente" width="600px" size="30px">
<hr align="right" width="400" size="30">

اوپر انڈیکس (INDEX) پر جائیں​

 

تاثرات/کمنٹس ٹیگ (Comments Tag)​

اس ٹیگ کا کام یہ ہے کہ یہ ایسے الفاظ کو لکھنے کے لئے مدد دیتا ہے جن کا تعلق ڈیویلپر سے ہوتا ہے، لیکن وہ ویب پیج پر نظر نہیں آتے، مثلا اگر کسی نے بہت بڑی ویب سائٹ بنائی ہو اور وہ اس میں کچھ چیزیں نشانی کی طور پر نوٹ رکھنا چاہے تاکہ تدوین میں سمجھنا آسان ہو کہ کس مقام پر تبدیلی لانی ہے تو اس کوآسانی ہو، لیکن ایسے نوٹس چونکہ سائٹ پر ظاہر نہیں کیے جاسکتے اس لئے یہ ٹیگ استعمال کیا جاتا ہے اس کے علاوہ یہ ٹیگ بعد میں کسی دوسرے ڈیویلپر کی بھی مدد کرسکتا ہے، لیکن بنیادی کام اس کا متعلقہ ڈیٹا کو چھپا دینا ہے
یہ ایک سنگل ٹیگ ہی ہے لیکن اس کا انداز باقی ٹیگز سے تھوڑا مختلف ہے
یعنی اس میں فارورڈ سلیش وغیرہ کا معاملہ نہیں ہے بلکہ ڈیش/ہائفن (hyphen) اور استعجابیہ کی علامت (sign of exclamation) کے ذریعے اس ٹیگ کو بنایا جاتا ہے، یعنی سب سے پہلے اوپننگ اینگل بریکٹ (opening angle bracket) ، پھر دو عدد ڈیش کی علامات ڈالیں، اس کے بعد وہ ٹیکسٹ درج کریں جس کو آپ پیج پر ظاہر نہیں کرنا چاہتے، اور جب متعلقہ ٹیکسٹ ختم ہوجائے تو پھر دوبارہ دو ڈیش ڈال کر کلوزنگ اینگل بریکٹ (closing angle bracket) ڈال دیں، اس طرح آپکا ٹیگ مکمل ہوجائے گا

عملی طریقہ

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

<!--Some text that i dont want to see by user-->

اوصاف(Attributes)​

اس ٹیگ کا کوئی خصوصی وصف/ایٹریبیوٹ نہیں ہے​

اوپر انڈیکس (INDEX) پر جائیں​

 

مخففات کے ٹیگ (Acronym & Abbreviation Tags)​

آپ نے عموما ویکیپیڈیا کی ویب سائٹ پر دیکھا ہوگا کہ بعض مخففات (abbreviations) کے اوپر ماؤس کا پوائنٹر لے جانے سے اس کے اوپر ٹول ٹپ نظر آتا ہے جس میں اُس مخفف کی تفصیل آجاتی ہے، اس کام کے لئے مخففات کا ٹیگ استعمال کیا جاتا ہے۔​

اس کام کے لئے دو ٹیگ استعمال کئے جاتے ہیں، جن میں سے ایک acronym کا ٹیگ ہے اور دوسرا abbreviation کا۔ یہ دونوں پیئرڈ ٹیگ ہیں یعنی اوپننگ اور کلوزنگ دونوں ٹیگ آتے ہیں​

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

• acronymکا ٹیگ پہلے متعارف کروادیا گیا تھا، جبکہ abbreviation کا ٹیگ بعد میں متعارف کروایا گیا
• acronym کےٹیگ کو HTML5 سپورٹ نہیں کرتا، اور جبکہ abbreviation کے ٹیگ کے ساتھ ایسا مسئلہ نہیں ہے
• acronym کا ٹیگ انٹر نیٹ ایکسپلورر کے ورژن 5.5 یا اس سے پہلے کے ورژنز میں استعمال نہیں ہوسکتا، جبکہ abbreviation کا ٹیگ انٹر نیٹ ایکسپلورر ورژن 6 یا اس سے پہلے کے ورژنز میں استعمال نہیں ہوسکتا

عملی طریقہ​

abbreviation کے ٹیگ کو abbr سے ظاہر کیا جاتا ہے، جبکہ acronym کے ٹیگ میں acronym ہی لکھا جاتا ہے​

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

<abbr title="Pakistan">PK</abbr>
<acronym title="Pakistan">PK</acronym>

اوصاف (Attributes)
ان دونوں ٹیگز کا ایک ہی خصوصی ایٹریبیوٹ ہے جو کہ title ہے

اقدار (Values)
title کے وصف کی قدر ویب سائٹ بنانے والا خود لکھتا ہے،
اس کی قدر میں وہ الفاظ لکھے جانے چاہئیں جو کہ ٹول ٹپ کے طور پر ظاہر کروانا مقصود ہوں، جبکہ دونوں ٹیگز کے درمیان وہ مخفف لکھنا ہوتا ہے جوکہ ویب پیج پر نظر آئے گا
مثال کے طور پر اوپر کوڈ کی صورت میں دی گئی مثال میں ویب پیج پر PK لکھا نظر آئے گا، لیکن جب ماؤس کا پوائنٹر اس کے اوپر لے جائیں گے تو وہ Pakistan کی ٹول ٹپ ظاہر کرے گا

​

اوپر انڈیکس (INDEX) پر جائیں​

 

بِگ ٹیگ (Big Tag)​

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

عملی طریقہ

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

<big>BIG TEXT</big>
<big><big>MORE BIG TEXT</big></big>

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

​

​

اوپر انڈیکس (INDEX) پر جائیں​

 

سمال ٹیگ (Small Tag)​

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

عملی طریقہ

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

<small>small text</small>
<small><small>more small text</small></small>

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

اوپر انڈیکس (INDEX) پر جائیں​

 

سنٹر ٹیگ (Center Tag)​

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

عملی طریقہ

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

<center>Traditional databases are organized by fields, records, and files. A field is a single piece of information;
a record is one complete set of fields; and a file is a collection of records.
For example, a telephone book is analogous to a file. It contains a list of records, each of which consists of three fields:
name, address, and telephone number.</center>

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

اوپر انڈیکس (INDEX) پر جائیں​

 

پری فارمیٹڈ ٹیکسٹ (Preformatted Text)​

سب سے ابتدائی سبق میں ہم نے دیکھا تھا کہ ٹیکسٹ ایڈیٹر میں جتنی مرضی لائنیں چھوڑ دی جائیں یا جتنی مرضی زیادہ خالی جگہیں (blank spaces) چھوڑیں ، ویب پیج صرف ایک ہی سپیس کو درست مانے گا اور لائن بھی اس وقت تک نہیں چھوڑے گا جب تک کہ </ br> کا ٹیگ استعمال نہ کرلیا جائے ، لیکن اگر ہم چاہیں کہ جیسا ہم ٹیکسٹ ایڈیٹر میں لکھیں بعینہ ویسا ہی ویب پیج پر بھی لکھا ہوا نظر آئے، تو اس کے لئے ہمیں ایچ ٹی ایم ایل پری فارمیٹڈ کا ٹیگ مہیا کرتا ہے
یہ ایک پیئرڈ ٹیگ ہے اور اس ٹیگ کو pre کے نام سے استعمال کیا جاتا ہے

عملی طریقہ

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

<pre>
ID        Name              City   
01        Haroon Rasheed    Okara 
02        Malik Bilal      Malakwal
03        Abdul Jabbar      Faisalabad
</pre>

اوصاف (Attributes)
اس ٹیگ کا صرف ایک خصوصی ایٹریبیوٹ ہے وہ ہے width کا وصف، لیکن یہ ایٹریبیوٹ HTML 3.20تک بلا ردو قدح استعمال ہوتا تھا، HTML 4.01 میں اس کا استعمال نا پسندیدہ قرار پایا اور اب HTML5 اس ایٹریبیوٹ کو سپورٹ نہیں کرتا بلکہ اس کو CSS کے ذریعے بڑے زبردست انداز میں مرتب کیا جاسکتا ہے

اقدار (Values)
اگر width کی قدر کو استعمال کیا جائے تو اس میں ویلیو کے طور پر یہ واضح کرنا پڑتا ہے کہ ایک لائن میں کتنے کریکٹرز آسکیں گے

اوپر انڈیکس (INDEX) پر جائیں​

 

واوین ٹیگ(Short Quotation Tag)​

عموما جملے کے درمیان کسی گفتگو کو اسی کے الفاظ میں لکھنے، رعایتِ لفظی برتنے یا عبارت میں مخصوص الفاظ کی اہمیت کو اجاگر کرنےکے لئےواوین کا سہارا لیتے ہیں، جن کو انگریزی میں inverted commasبھی کہتے ہیں، اگر ویب سائٹ پر اس طرح واوین کا استعمال کرنا ہو تو پھر یہ ٹیگ استعمال کرتے ہیں
یہ ایک پیئرڈ ٹیگ ہے یعنی اس کے اوپننگ ٹیگ اور کلوزنگ ٹیگ دونوں ہوتے ہیں
اس کا ٹیگ انگریزی حرفِ تہجی (alphabet) کیو (q) سے لکھا جاتا ہے، جس ٹیکسٹ کو واوین کے مابین لکھنا ہو تو اس کے شروع میں اوپننگ ٹیگ (opening tag) اور آخرمیں کلوزنگ ٹیگ (closing tag)لگاتے ہیں

عملی طریقہ

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

Haroon Rasheed:<q>Malik bilal! when are you becoming married</q>

اوصاف (Attributes)
اس ٹیگ کا صرف ایک خصوصی ایٹریبیوٹ cite ہے

cite:​

اقدار (Values)​

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

اوپر انڈیکس (INDEX) پر جائیں​

 

اقتباس ٹیگ(Blockquote Tag)​

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

عملی طریقہ

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

<blockquote cite="www.sql.com">Software design is the process by which an agent creates a specification of a software
artifact, intended to accomplish goals, using a set of primitive components and subject to
constraints[disambiguation needed]. Software design may refer to either &quot; all the activities
involved in conceptualizing, framing, implementing, commissioning, and ultimately modifying
complex systems&quot; or &quot;the activity following requirements specification and before programming,
as ... [in] a stylized software engineering process&quot;.</blockquote>
 
<blockquote><blockquote align="justify">Software design is the process by which an agent creates a specification of a software
artifact, intended to accomplish goals, using a set of primitive components and subject to
constraints[disambiguation needed]. Software design may refer to either &quot; all the activities
involved in conceptualizing, framing, implementing, commissioning, and ultimately modifying
complex systems&quot; or &quot;the activity following requirements specification and before programming,
as ... [in] a stylized software engineering process&quot;.</blockquote></blockquote>

اوصاف (Attributes)​

اس ٹیگ کے دو خصوصی ایٹریبیوٹز cite اور align ہیں​

cite:
اقدار (Values)
اس میں کسی ویب سائٹ یا اسی ویب سائٹ کا کوئی ویب پیج درج کردیا جاتاہے جہاں سے اس ٹیکسٹ کو بطور اقتباس لیاگیا ہے، یعنی یہ اقتباس کے ریفرنس یا حوالے کے طور پر کام کرتا ہے

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

اوپر انڈیکس (INDEX) پر جائیں​

 

ایڈریس ٹیگ (Address Tag)​

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

عملی طریقہ​

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

<address>
House # 3,
Street # 1,
Rahmat Colony,
Faisalabad
</address>

اوصاف(Attributes)

اس ٹیگ کا کوئی خصوصی وصف/ایٹریبیوٹ نہیں ہے​

اوپر انڈیکس (INDEX) پر جائیں​

 

رنگوں کا استعمال (Use of Colours)​

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

ویب پیج میں بھی ہم مختلف رنگ استعمال کرسکتے ہیں اور اس کے لئے ہمیں علیحدہ ٹیگ نہیں استعمال کرنا بلکہ یہ پہلے سےموجود ٹیگز میں سے مخصوص ٹیگز میں بطور ایٹریبیوٹ استعمال کیے جاسکتے ہیں، اور ان کی قدر/ویلیو رنگوں کو بیان کرنے کا کام کرے گی​

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

رنگ (colour)کی ویلیو کو دینے کے 3 طریقے ہیں​

1. رنگ کا نام (Colour Name)
2. بنیادی رنگوں کے امتزاج کی تفصیل (Primary Colour Combination)
3. اساس سولہ کے نظام کے ساتھ (Hexadecimal Digits)

رنگ کا نام (Colour Name)
رنگ کے نام کو ویلیو کے طور پر دینے سے کسی رنگ کا استعمال کیا جاسکتاہے، مثلا red, green, blue, yellow, orange وغیرہ
لیکن رنگوں کے نام دینے میں کچھ مسائل ہیں جن میں سب سے بڑا مسئلہ یہ ہے کہ ان کو اتنا بہتر طریقے پر براؤزر سمجھ نہیں پاتا کیونکہ ان میں براؤزر کمپیٹبلٹی (compatibility) کے مسائل آتے ہیں، یعنی براؤزرز ورژنز کا بھی مسئلہ بنتا ہے، اور دوسرا یہ کہ ناموں کےساتھ تمام کلرزکواستعمال نہیں کیا جاسکتا بلکہ صرف چند مخصوص اور مشہور رنگ ہی استعمال کئے جاسکتےہیں
بنیادی رنگوں کے امتزاج کی تفصیل (Primary Colour Combination)
ہم بنیادی رنگوں یعنی نیلا، سبز اور سرخ کی مقدار کی وضاحت کے ساتھ بھی ویلیو دے سکتےہیں، اس طرح لکھنے کے لئے پہلے rgb لکھنا پڑتا ہے اور بریکٹس میں تینوں رنگوں کی مقدار کا تناسب لکھ دیتے ہیں، ہر رنگ کی مقدار کے 256 درجات ہوتے ہیں کیونکہ ہم عموما 8 بٹ چینل ہی استعمال کرتے ہیں، 0 سے 255 تک، اور چونکہ 3 رنگ ہوتے ہیں اس لئے کل ممکنہ رنگ 256×256×256=16777216 ہوئے
اس کو اس طرح لکھتے ہیں، کوڈ کی صورت میں نظر آرہا ہوگا

کوڈ:

rgb(0,0,0)
rgb(255,255,255)

اس میں جو پہلا نمبر ہے وہ سرخ رنگ کے درجہ کے لیے ہے، دوسرا سبز اور تیسرا نیلے کے لئے

اساس سولہ کے نظام کے ساتھ (Hexadecimal Digits)
اس طرح رنگ کو ظاہر کرنے سے قبل ہیش کا نشان # ڈالتےہیں اس کو شیل بھی کہتے ہیں، یونیکس کے پس منظر میں
اس میں عموما 6 اعداد ہوتے ہیں، جو 0 سے 9 اور A سے F تک ہوتے ہیں، اور پہلے دو اعداد سرخ، درمیان کے دو اعداد سبز اور آخری دو اعداد نیلے کو ظاہر کرتے ہیں، یہ سب سے بہترین طریقہ سمجھا جاتا ہے، کیونکہ اس کو سمجھنا کمپیوٹر کے لئے آسان ہے،
اساس سولہ کے نظام اور بنیادی رنگوں کے امتزاج کے طریقہ کار میں کچھ فرق نہیں ہے سوائے اساس دس اور اساس سولہ کے اور یہ چونکہ ہمارا متعلقہ موضوع نہیں ہے اسلئے اس کو ہم نہیں بیان کریں گے، بقیہ اس میں ممکنہ رنگ اتنے ہی ہوں کے جنتے کہ رنگوں والے امتزاج میں بنتے ہیں، اس کا کوڈ اس طرح ہوگا

کوڈ:

#000000
#FFFFFF

​

​

اوپر انڈیکس (INDEX) پر جائیں​

 

پس منظر کا رنگ تبدیل کرنا (Changing the Background Color)​

​

سب سے پہلے ہم رنگ کو ویب پیج کے پس منظر پر اپلائی کرتے ہیں ،کہ کسی ویب پیج کے پس منظر کے رنگ یعنی بیک گراؤنڈ کلر کو کس طرح بدلا یا لگا یا جاسکتا ہے
تو یہ ساری تبدیلیاں جو کہ مکمل ویب پیج کے پس منظر سے متعلق ہیں یہ باڈی کے ٹیگ (body tag) میں بطور ایٹریبیوٹ شامل ہیں
پس منظر کا رنگ تبدیل کرنے کے لئے باڈی کے ٹیگ میں جو ایٹریبیوٹ استعمال کیا جائے گا یا پھر جو ویلیوز دی جائینگی وہ درج ذیل ہیں

وصف (Attribute)
پس منظر کا رنگ تبدیل کرنے کے لئے bgcolor کا ایٹریبیوٹ استعمال کیا جاتا ہے

قدر(Value)
اس کی قدر اوپر بیان کئے گئے تینوں طریقوں میں جو مرضی اپنا لیں، اور اس کے مطابق ویلیو درج کردیں

عملی طریقہ

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

<body bgcolor="red">
 
</body>
 
================================
 
<body bgcolor="#FC00C6">
 
</body>
 
=================================
 
<body bgcolor="rgb(200,92,0)">
 
</body>

اوپر انڈیکس (INDEX) پر جائیں​

 

تصویر شامل کرنا (Inset an Image)​

کہا جاتا ہے کہ ایک تصویر بسا اوقات ہزار سطروں سے زیادہ لکھے پیغام کو سمجھا دیتی ہے، اور تصویر کا دخل ہر شخص کی زندگی میں ہے،
ویب پیجز پر بھی آپ نے تصاویر ضرور دیکھی ہوں گی، تو آئیے دیکھتے ہیں کہ تصویر کی کوڈنگ کس طرح کرتے ہیں
تصویر کو ویب پیج میں لگانے کےلئے image کا ٹیگ استعمال کرتے ہیں، جس کو img کے نام سے لکھا جاتا ہے

عملی طریقہ

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

<img src="car.jpg" />

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

اوصاف (Attributes)
اس ٹیگ کے خصوصی ایٹریبیوٹز درج ذیل ہیں
align, alt,border, height,width, hspace,vspace,src
ان کے علاوہ کچھ ایسے ایٹریبیوٹز ہیں جن کا تعلق امیج میپنگ سے سے اس لئے ہم اس کا جائزہ نہیں لیں گے
کیونکہ اس کے لئے امیج میپ کرنے کی ٹیکنیکس بھی بتانی پڑیں گی جو کہ ایک طویل ترین موضوع ہے
اس کےعلاوہ lonesc کا ایٹریبیوٹ بھی یہاں ڈسکس نہیں کریں گے کیونکہ اس کو کوئی بھی بڑا براؤزر سپورٹ نہیں کرتا

آئیے اب باری باری ان اوصاف کی اقدار کا جائزہ لیتےہیں

border:
اقدار (Values)
بارڈرمیں قدرکے طور کوئی نمبر لکھا جاتا ہے جو کہ اس بات کو ظاہر کرتا ہے کہ تصویر کا بارڈر کتنے پکسلز (pixels)کا ہوگا
HTML4.01میں اس ایٹریبیوٹ ناپسندیدہ قراردیا گیا ہے جبکہ اس کو HTML5 کی سپورٹ حاصل نہیں ہے، بلکہ وہاں اس کام کے لیے CSSکو استعمال کیا جاتا ہے

alt:
اقدار (Values)
اس ٹیگ کو اس لئے استعمال کیا جاتا ہے کہ اگر کہیں تصویر کا سورس/پاتھ/ایڈریس وغیرہ تبدیل ہوجائے یا تصویر نہ مل سکے تو پھرجو ٹیکسٹ آپ تصویر کی جگہ دکھانا چاہیں وہ اس ویلیو میں لکھ دیں گے

hspace:
اقدار (Values)
hspace سے مراد horizontal space یعنی افقی خالی جگہ۔ اس ایٹریبیوٹ سے مراد ہے کہ افقی طور پر (horizontally) تصویر کے ساتھ کتنے پکسلز (pixels)کی خالی جگہ چھوڑی جائے گی، یعنی دوسرے لفظوں میں تصویر کےدائیں اور بائیں طرف کتنی جگہ خالی ہو،جہاں کوئی ٹیکسٹ نہ ہو
HTML4.01میں اس ایٹریبیوٹ ناپسندیدہ قراردیا گیا ہے جبکہ اس کو HTML5 کی سپورٹ حاصل نہیں ہے، بلکہ وہاں اس کام کے لیے CSSکو استعمال کیا جاتا ہے

vspace:
اقدار (Values)
vspace سے مراد vertical space یعنی عمودی خالی جگہ۔ اس ایٹریبیوٹ سے مراد ہے کہ افقی طور پر (vertically) تصویر کے ساتھ کتنے پکسلز (pixels)کی خالی جگہ چھوڑی جائے گی، یعنی دوسرے لفظوں میں تصویر کےاوپر اور نیچے کی طرف کتنی جگہ خالی ہو،جہاں کوئی ٹیکسٹ نہ ہو
HTML4.01میں اس ایٹریبیوٹ ناپسندیدہ قراردیا گیا ہے جبکہ اس کو HTML5 کی سپورٹ حاصل نہیں ہے، بلکہ وہاں اس کام کے لیے CSSکو استعمال کیا جاتا ہے
بقیہ ایٹریبیوٹز اگلے پیغامات میں ہیں

اوپر انڈیکس (INDEX) پر جائیں​

 

تصویر کی الائنمنٹ اور سائز تبدیل کرنا (Alignment and Change the Size of Image)​

امیج کے ٹیگ کے ایٹریبیوٹس میں سے ایک alignہے جو کہ تصویر کو حاشیے کے اعتبار سے سیدھ میں لاتا ہے، آئیے اس کو تفصیلا دیکھتے ہیں

align:
اقدار (Values)
اور اس ایٹریبیوٹ کی مندرجہ ذیل ویلیوز ہیں

right: اس کے ذریعے تصویر کو صفحے کی دائیں طرف منتقل کیا جاسکتا ہے، اگر تصویر کے ساتھ اسی لائن میں ٹیکسٹ نہ لکھا ہو تو پھر اس ویلیو سے تصویر ویب پیج کے داہنی طرف نظر آتی ہے، اور اگر اسی لائن میں تصویر کے ساتھ ٹیکسٹ بھی ہو جس کو ان لائن امیج بھی کہتے ہیں تو پھر ایسی صورت میں تصویر ٹیکسٹ کی دائیں جانب ہی رہے گا

​

left:اس کے ذریعے تصویر کو صفحے کی بائیں طرف منتقل کیا جاسکتا ہے، اگر تصویر کے ساتھ اسی لائن میں ٹیکسٹ نہ لکھا ہو تو پھر یہ بائی ڈیفالٹ ہوجاتی ہے، اور اگر اسی لائن میں تصویر کے ساتھ ٹیکسٹ بھی ہو جس کو ان لائن امیج بھی کہتے ہیں تو پھر ایسی صورت میں تصویر ٹیکسٹ کی بائیں جانب ہی رہے گا

​

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

​

middle: اس سے تصویر اور ٹیکسٹ اس طرح لکھے نظر آتے ہیں کہ ٹیکسٹ تصویر کے عمودی طور پر درمیان کے مقام پر بننے والے خط میں لکھا جارہو۔ اس کو بھی سکرین شاٹ سے سمجھا جا سکتا ہے

​

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

​

HTML4.01میں اس ایٹریبیوٹ ناپسندیدہ قراردیا گیا ہے جبکہ اس کو HTML5 کی سپورٹ حاصل نہیں ہے، بلکہ وہاں اس کام کے لیے CSSکو استعمال کیا جاتا ہے

-----------------------------------------------------------------------​

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

height:
اقدار (Values)
اس میں ویلیو کے طور پر تصویر کی اونچائی کو پکسلز (pixels) میں دکھایا جاتا ہے، یعنی تصویر کی اونچائی (height) اگر 800 پکسلز ہے تو آپ اس کو کم کرکے یہاں 400 بھی کرسکتے ہیں، اسی طرح بڑھایا بھی جاسکتا ہے

width:
اقدار (Values)
اس میں ویلیو کے طور پر تصویر کی چوڑائی کو پکسلز (pixels) میں دکھایا جاتا ہے، یعنی تصویر کی چوڑائی (width) اگر 200 پکسلز ہے تو آپ اس کو کم کرکے یہاں 240 بھی کرسکتے ہیں، اسی طرح کم بھی کیا جاسکتا ہے

اوپر انڈیکس (INDEX) پر جائیں​

 

تصویر کے ماخذ کا ربط دینا (Source Link of Image)​

جب ہم نے کسی تصویر کو ویب پیج میں شامل کرنا ہے تو اس تک پہنچنے کا راستہ بھی ہمیں ٹیکسٹ ایڈیٹر میں بتانا پڑے گا کیونکہ ٹیکسٹ ایڈیٹر میں کسی ٹیکسٹ کو تو کاپی کر کے پیسٹ کیا جاسکتا ہے لیکن کسی تصویر کو کاپی،پیسٹ نہیں کیا جاسکتا۔ اس کے لئے ہمیں اس تصویر تک پہنچنے کا راستہ (path) پتہ ہونا چاہئیے جو کہ ہمیں اس کے ماخذ یعنی سورس (source) تک پہنچا دے ، چنانچہ اس کام کے لئے ہمارے پاس سورس کا ایک ایٹریبیوٹ موجود ہے جس کو src لکھا جاتا ہے
ویب پیج میں تصویر کا سورس مہیا کرنے کی دو صورتیں ہوسکتی ہیں

1. تصویر آپ کے سسٹم میں ہو
2. تصویر کسی ویب سائٹ پر موجود ہو

اگر تصویر سسٹم میں ہو تو اس کے لئے ہم پاتھ ڈائریکٹری (path directory) کا استعمال کرتے ہیں جس کا تفصیلی طریقہ نیچے آرہا ہے
اور اگر ویب سائٹ پر ہو توفقط اس کا ربط srcکی ویلیو کے طور پر لکھ دیتے ہیں

عملی طریقہ

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

فائل کے سسٹم میں ہونے کی صورت میں
 
 
<img src="first.png" />
 
<img src="C:/User/pictures/far.jpg" />
 
 
================================
 
ویب سائٹ پر تصویر ہونے کی صورت میں
 
 
<img src="http://www.oururdu.com/838932423.jpg" />

اوپر انڈیکس (INDEX) پر جائیں​

 

پاتھ ڈائریکٹری کا استعمال (Use of Path Directory)​

جب ہم نے کسی سسٹم میں موجود تصویر کا ربط یعنی لنک ویب پیج پر دینا ہوتا ہے تو اس کے دو طریقے ہوتے ہیں
1.تصویر کا مکمل ایڈریس (complete path of picture)
اس میں سہولت تو ہے، کہ ایڈریس بار سے ایڈریس کاپی کرکےپیسٹ کردیا،لیکن اگر آپ اپنے پراجیکٹ کے فولڈر کو کہیں اور لے جانا چاہتےہوں تو تمام ربط بے کار ہوجائیں گے
2.ڈائریکٹری کے ذریعے (Using Directory)
اگرآپ نے ایک ویب پیج index.html کے نام سے بنایا ہوا ہو اور اس میں کسی امیج کا سورس دینا ہو تو اس کے لئے جوصورتیں ہوسکتی ہیں وہ نیچے تصویر سے دیکھی جاسکتی ہیں
یعنی آپimageسے لیکر image6 تک کی تصاویر کو استعمال کرنا چاہتے ہوں
ان کو ڈائریکٹری کے درجات (levels) کہہ سکتے ہیں جو کہ درجہ بندی (hierarchy) کی صورت میں ہوتی ہے

​

اس کی صورتیں درج ذیل ہوسکتی ہیں،
1۔ آپ ویب پیج والے فولڈر میں ہی موجود کسی تصویر کو لگانا چاہتے ہیں، جیسے کہ image1
اس کے لئے آپ امیج کے ٹیگ میں سورس کی ویلیو میں صرف image1.jpg لکھ دیں، کوڈ دیکھیں

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

<img src="image1.jpg" />

2۔اگر ویب پیج والے فولڈر میں موجود کسی دوسرے فولڈر کے اندر کوئی تصویر ہو تو اس کے لئے پہلے متعلقہ فولڈر کانام لکھیں پھر فارورڈسلیش / ڈال کر متعلقہ امیج کا نام لکھ دیں، جیسا کہ اس میں image2 ہے، عملی طریقہ سمجھنے کے لئے کوڈ دیکھیں

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

<img src="images/image2.jpg" />

3۔ اگر ویب پیج والے فولڈر کے اندر ایک فولڈر ہو پھر اس کے اندر فولڈر ہو جس میں پڑی تصویر کو شامل کرنا ہو تو اس صورت میں یا اگر اس کے بھی اندر تک فولڈر ہو تو پھر اس کو فارورڈ سلیش / ڈال کر فولڈر لکھتے جائیں گے تاوقتیکہ متعلقہ امیج تک رسائی نہ ہوجائے، جیسا کہ اس تصویر میں image3ہےاس کے لئے کوڈ دیکھیں

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

<img src="images/images/image3.jpg" />

4۔ اگر مطلوبہ تصویر کسی نچلے فولڈر کی بجائے اوپر کے فولڈر میں ہو تو اس تک رسائی کس طریقے سے کی جائے گی، جیسا کہ اس تصویر میں image.jpg ہے، یہ بات یادرکھیے کہ اگر ڈائریکٹری کو اوپر کی طرف موو (move) کروانا ہو تو اس کے لئے دو ڈاٹس کے بعد ایک فارورڈ سلیش (/..) ڈالتے ہیں، اس طرح ڈائریکٹری کا پوائنٹر ایک لیول اوپر چلاجائے گا، مثلا image کے لئے کوڈ دیکھیں

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

<img src="../image.jpg" />

5۔ اگر ایک سے زیادہ درجے اوپر کسی فولڈرمیں تصویر ہو تو اس کے لئے ڈائریکٹری کا پاتھ کیا ہوگا۔ تو اس کے لئے یہ اصول یادرکھئے کہ جتنے درجے (levels) بھی اوپر جانا ہو تو اس کے لئے اتنے ہی (/..) سورس کی ویلیو میں لکھتے جائیں، تو ہر /.. پر درجہ (level) اوپر ہوتا جائے گا، مثلا اوپر کی تصویر میں اگر image6کو لگانا ہو تو ابھی ڈائریکٹری کا پوائنٹر ابھی first والے فولڈر میں ہے، سورس میں یہ علامت /.. ڈالنے سے پوائنٹر web structure والے فولڈر میں چلا جائے گا۔ جب دوبار /.. یہ لکھیں گے تو پوائنٹر project والے فولڈرمیں پہنچ جائے گا، اور چونکہ ہماری متعلقہ تصویر اسی فولڈر میں ہے لہٰذا اس کے بعد تصویر کانام یعنی image6.jpgدے دیں گے،مزید کوڈ دیکھیں

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

<img src="../../image6.jpg" />

6۔ اگر صرف اوپر کے درجات میں سے تصویر نہ ہو بلکہ اوپر کے کسی درجے (level) میں سے کسی اور فولڈر کے اندر مطلوبہ تصویر ہو جیسا کہ اس میں image4 ہے، تو اس کے لئے ہمیں ڈائریکٹری میں سب سے پہلےپوائنٹر کووہاں تک لے جانا ہوگا، جہاں ویب پیج اور مطلوبہ تصویر کے درجات آپس میں ملتےہیں،جیسا کہ اس تصویر میں وہ فولڈر web structure ہے جہاں ان دونوں یعنی ماخذ اور مقصود (source & destination) کی ڈومین ایک ہوجاتی ہے، اس لئے ہم web structure والے فولڈر تک پہنچیں گےاور وہاں سے پھر نچلے لیول تک آئیں گے، مثلا اوپر کی تصویر میں اگر image4کو لگانا ہو تو ابھی ڈائریکٹری کا پوائنٹر ابھی first والے فولڈر میں ہے، سورس میں یہ علامت /.. ڈالنے سے پوائنٹر web structure والے فولڈر میں چلا جائے گا۔ پھر ہم نے نیچے آنا ہے تو جس فولڈر میں جانا ہو یعنی second اس کا نام لکھ دیں گے اور فارورڈ سلیش / ڈالیں گے، اب پوائنٹر second کے فولڈر میں چلا گیا اور ہماری مطلوبہ تصویر بھی اسی فولڈر میں ہے لہٰذا ہم image4.jpg لکھ دیں گے، مزید راہنمائی کے لیے کوڈ دیکھیں

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

<img src="../second/image4.jpg" />

7۔ اگر کسی اوپر کی ڈائریکٹری سے مزید نیچے کی طرف جانا ہو تو اس فولڈر کانام دے دیں گے ، جیسا کہ اس مثال میں image5تک رسائی کے لئے پہلے index.html اور image5.jpg کی مشترک ڈومین دیکھیں گے جو کہ web structure ہے، /.. کے ذریعے ہم اس تک پہنچیں گے، پھر ہم نے نیچے آنا ہے تو جس فولڈر میں جانا ہو یعنی second اس کا نام لکھ دیں گے اور فارورڈ سلیش / ڈالیں گے، اب پوائنٹر second کے فولڈر میں چلا گیا، اب مزید نیچے جانے کے لئے متعلقہ فولڈر کانام دیں گے، چونکہ ہماری مطلوبہ تصویر image5 اس secondفولڈر کے اندر imageکے فولڈرمیں ہے اس لئے ایک اور فارورڈ سلیش / ڈالیں گے، اب پوائنٹر image کے فولڈر میں چلا گیااور ہماری مطلوبہ تصویر بھی اسی فولڈر میں ہے لہٰذا ہم image5.jpg لکھ دیں گے، مزید راہنمائی کے لیے کوڈ دیکھیں

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

<img src="../second/images/image5.jpg" />

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

نوٹ: مندرجہ بالا تمام توجیہات سے یہ بات سامنے آتی ہے کہ اگر ہم نے اوپ کے لیول کی طرف جانا (move کرنا) ہے تو ہمیں دوڈاٹس اور ایک فارورڈ سلیش یعنی /.. کا استعمال کرنا پڑے گا اور اگر نیچے کی طرف آنا ہے تو جس فولڈرمیں جانا ہواس فولڈر کا نام لکھ کر فارورڈ سلیش / کی علامت ڈال دیں گے

اوپر انڈیکس (INDEX) پر جائیں​

 

پس منظرمیں تصویرشامل کرنا (Inserting a Background Image)​

اب تک ہم نے جہاں تصویر کو ویب پیج میں لگا نے کا پڑا وہیں پر ہم نے ڈائریکٹری کے اصولوں پر بھی گفت وشنید کی ، یعنی اگر اب ہمیں کسی بھی جگہ سے تصویر شامل کرنی پڑے تو ہم باآسانی اس کو کرسکتے ہیں، تو آئیے پھر اب ویب پیج کے پس منظر (background) میں تصویر شامل کرتے ہیں​

پہلی بات تو یہ کہ یہ تمام تبدیلیاں جو کہ مکمل ویب پیج کے پس منظر سے متعلق ہیں یہ باڈی کے ٹیگ (body tag) میں بطور ایٹریبیوٹ شامل ہیں
پس منظر میں تصویر شامل کرنے کے لئے باڈی کے ٹیگ میں جو ایٹریبیوٹ استعمال کیا جائے گا یا پھر جو ویلیوز دی جائینگی وہ درج ذیل ہیں

وصف (Attribute)
پس منظر میں تصویر شامل کرنے کے لئے background کا ایٹریبیوٹ استعمال کیا جاتا ہے

قدر(Value)
اس کی قدر میں بالکل اُسی طرح آپ نے تصویر کا ایڈریس دینا ہے جس طرح کہ img کے ٹیگ میں src کے ایٹریبیوٹ میں پاتھ دیا جاتاتھا، یہ بھی سسٹم امیج یعنی سسٹم میں موجود تصویر یا کسی ویب سائٹ پر موجود تصویر ہوسکتی ہے

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

​

اوپر انڈیکس (INDEX) پر جائیں​

 

جلد ہی یہاں پر مکمل بیان کئے گئے ٹیگز کی کوڈنگ کردی جائےگی​

 

کوڈنگ کے سبق کی فائل یہاں منسلک کردی جائیگی​

 

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

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

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

 

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

ایک دو دن تک فائل اٹیچ کردی جائے گی​