ایچ ٹی ایم ایل کے بنیادی اسباق

عفراء نے 'ویب ڈیزائننگ' میں ‏اگست 17, 2013 کو نیا موضوع شروع کیا

  1. عفراء

    عفراء webmaster

    شمولیت:
    ‏ستمبر 30, 2012
    پیغامات:
    3,918
    السلام علیکم ورحمۃ اللہ
    اردو مجلس پر اردو زبان میں ویب سکرپٹنگ لینگویجز کے اسباق شروع کرنے کی سعی کی گئی ہے۔ اس سلسلے میں پہلے ایچ ٹی ایم ایل Html کے بنیادی اسباق پیش کیے جائیں گے۔ بعد ازاں سی ایس ایس CSS، جاوا سکرپٹ **********، اورپی ایچ پیphp بھی بتدریج پیش کرنے کا ارادہ ہے ان شاء اللہ۔
    یاد رہے کہ اس سے پہلے مجلس پر ویب کے بہت ہی مفید تعارفی اسباق موجود ہیں۔ ایچ ٹی ایم ایل کا تعارف بھی انہیں میں کروا دیا گیا ہے۔ لہذا پہلے ان کو پڑھ لیا جائے تو بہت مفید ہو گا۔
    ویب ڈیزائننگ کورس : کلاس نمبر1 : انٹرنیٹ - URDU MAJLIS FORUM
    ویب ڈیزائننگ کورس : کلاس نمبر2 : مختلف ویب براؤزر - URDU MAJLIS FORUM
    ویب ڈیزائننگ کورس : کلاس نمبر3 : ویب ڈیزائننگ - URDU MAJLIS FORUM

    جو اراکین سیکھنا چاہیں وہ شروع سے سبقاً سبقاً پڑھتے جائیں اور جو پریکٹکل کام ہو وہ کرتے جائیں تو ان شاء اللہ بنیادی باتیں سمجھ میں آجائیں گی۔ جہاں تک مہارت کی بات ہے تو وہ کام کرتے رہنے سے آتی ہے۔

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

    وما توفیقی الا باللہ

    [​IMG]
    [​IMG]
    [​IMG]
     
    • پسندیدہ پسندیدہ x 4
  2. عفراء

    عفراء webmaster

    شمولیت:
    ‏ستمبر 30, 2012
    پیغامات:
    3,918
    وایاک
    علیحدہ تھریڈ یہاں کھول لیا ہے۔
    ویب سکرپٹنگ اسباق: تجاویز، آراء، سوال جواب - URDU MAJLIS FORUM
    انتظامیہ سے گزارش ہے کہ اسباق کے علاوہ تمام گفتگو دوسرے تھریڈ میں منتقل کر دیجیے۔
     
  3. عفراء

    عفراء webmaster

    شمولیت:
    ‏ستمبر 30, 2012
    پیغامات:
    3,918
    دوسرا سبق: پہلا حصہ

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

    [​IMG]
    [​IMG]
     
  4. عفراء

    عفراء webmaster

    شمولیت:
    ‏ستمبر 30, 2012
    پیغامات:
    3,918
    دوسرا سبق: دوسرا حصہ


    دوسرا سبق: دوسرا حصہ

    [​IMG]
    [​IMG]
     
    • پسندیدہ پسندیدہ x 2
  5. عفراء

    عفراء webmaster

    شمولیت:
    ‏ستمبر 30, 2012
    پیغامات:
    3,918
    السلام علیکم
    تیسرا سبق پیش خدمت ہے۔
    سوالات اور تجاویز کا انتظار رہے گا۔

    [​IMG]

    [​IMG]
    [​IMG]
     
    • پسندیدہ پسندیدہ x 3
  6. عفراء

    عفراء webmaster

    شمولیت:
    ‏ستمبر 30, 2012
    پیغامات:
    3,918
    السلام علیکم
    چوتھا سبق پیش خدمت ہے۔
    تجاویز کا انتظار ہے۔ اور اگر کوئی سیکھ رہا ہے تو نتائج بھی شریک کیجیے۔۔۔ اگر بالکل سمجھ نہیں آرہی تو بھی آگاہ کیجیے۔
    ورنہ امتحان کے لیے تیار رہیے!

    [​IMG]
    [​IMG]
    [​IMG]
    [​IMG]
     
    • پسندیدہ پسندیدہ x 3
  7. عفراء

    عفراء webmaster

    شمولیت:
    ‏ستمبر 30, 2012
    پیغامات:
    3,918
    السلام علیکم
    پانچواں سبق ملاحظہ کیجیے۔
    مجھے تو لگ رہا ہے کسی کی دلچسپی نہیں ہے اس میں کوئی فیڈ بیک نہیں ملا ابھی تک۔۔۔

    [​IMG]
    [​IMG]
    [​IMG]
    اور یہ لیجیے یونیکوڈ میں کوڈ:
    Code:
    <!DOCTYPE html>
    <html>
    	<head>
    		<title>Changing font</title>
    	</head>
    	<!--This is first comment-->
    	<!--changing body color-->
    	<body style="background-color:indianred">
    		<!-- Heading is center aligned-->
    		<h1 style="text-align:center">Heading one</h1>
    
    		<!--This is a list with khaki color-->
    		 <ol style="background-color:khaki">
    		 	<!-- We have changed font size, type and color of text-->
    		 	<li style="font-size:16px;font-family:Garamond; color:black">This font is big Garamond.</li>
    		 	<li style="font-size:12px;font-family:Verdana; color:black">This font is medium Verdana.</li>
    		 	<li style="font-size:10px;font-family:Impact; color:black">This font is small Impact.</li>
    		 </ol>
    		 <p style="color:black">
    		 	This is <strong>bold</strong>
    		 </p>
    		 <p>
    		 	This is <em>italic</em>
    		 </p>
    	</body>
    </html>
    
     
    • پسندیدہ پسندیدہ x 1
  8. عفراء

    عفراء webmaster

    شمولیت:
    ‏ستمبر 30, 2012
    پیغامات:
    3,918
    السلام علیکم
    آج ایک چھوٹا سا پراجیکٹ لے کر حاضر ہوئی ہوں۔
    جن لوگوں نے تمام اسباق پڑھ لیے ہیں وہ یہ کام با آسانی کر سکیں گے۔
    کرنا یوں ہے کہ
    1-اپنا ایک ویب پیج بنائیے: کوئی بھی موضوع لے لیں یا پھر اپنی ویب پروفائل بنالیں (مدد کے لیے ساتھ اشارات دیے گئے ہیں کہ کونسا ٹیگ استعمال کرنا ہے)
    2-اس میں پہلے ایک امیج لگائیں
    Code:
    <img>
    3- ہیڈنگ ڈال لیں
    Code:
    <h1>
    4- پھر ایک پیراگراف لکھیں
    Code:
    <p>
    5- اس کے بعد ایک unordered لسٹ بنائیں: موضوع سے متعلق ہونی چاہیے، اگر پروفائل بنا رہے ہیں تو اپنے تعلیمی ادارے کا نام، جگہ ، مشاغل وغیرہ اس لسٹ میں لکھ سکتے ہیں
    Code:
    <ul><li></ul>
    6- اب لسٹ کے اندر سب لسٹ (ordered + unordered) بنائیں جس میں مزید تفصیلات شامل کی جا سکیں
    7- یہ تمام کام کرنے کے بعد ٹیکسٹ کو اپنی مرضی کے رنگ اور فانٹ سٹائل دے دیں
    Code:
    style="font-family:Times New Roman; font-size:12px; color:black"
    8- بولڈ اور اٹالک کا استعمال بھی کیجیے
    Code:
    <strong>
    Code:
    <em>
    یہ سب چیزیں ایک بار لازمی شامل کرنی ہیں، البتہ زیادہ کی کوئی قید نہیں۔ جو چیزیں آپشنل ہیں ان میں بیک گراؤنڈ کلر، الائنمنٹ وغیرہ شامل ہیں۔ یہ آپ اپنی ضرورت کے مطابق استعمال کیجیے۔
    کوئی سوال ہو تو پوچھ سکتے ہیں۔
     
    • پسندیدہ پسندیدہ x 1
  9. عفراء

    عفراء webmaster

    شمولیت:
    ‏ستمبر 30, 2012
    پیغامات:
    3,918
    السلام علیکم
    نیا سبق ملاحظہ کیجیے۔
    [​IMG]
    [​IMG]
    [​IMG]

    کوڈ:
    Code:
    <table>
    	<thead>
    		<tr>
    			<th colspan="2" >My Table</th>
    		</tr>
    		<tr>
    			<th>Column one Title</th>
    			<th>Column two Title</th>
    		</tr>
    	</thead>
    	<tbody>
    			<tr>
    				<td>Data one</td>
    				<td>Data two</td>
    			</tr>
    			<tr>
    				<td>Data three</td>
    				<td>Data four</td>
    			</tr>
    	</tbody>
    	
    </table>
     
    • پسندیدہ پسندیدہ x 1
  10. عفراء

    عفراء webmaster

    شمولیت:
    ‏ستمبر 30, 2012
    پیغامات:
    3,918
    السلام علیکم
    ایک چھوٹا سا سبق حاضر خدمت ہے۔ امید ہے آپ لوگ مستفید ہوں گے۔
    اب ایچ ٹی ایم ایل پر مزید ایک سبق رہ گیا ہے اس کے بعد سی ایس ایس CSS شروع کی جائے گی ان شاء اللہ۔

    [​IMG]
    [​IMG]
    کوڈ:
    Code:
     <!DOCTYPE html>
    <html>
    <head><title>my Form</title></head>
    <body>
    
    <h1>Div and Span tags</h1>
    
    <p>This is created using <strong>div</strong> tags</p>
    <!--Here We have used nested div tags to make two equal blocks, the one with ywllow color is of double measurement to that of blue-->
    <div align="right" style="background-color:yellow; width:100px; height:50px">
    	<div  style="background-color:blue; width:50px; height:50px"></div>
    </div>
    <div style="background-color:red; width:50px; height:50px"></div>
    
    <p>This is written using <strong>span</strong> tags</p>
    <!-- here we made font family of word"Times New Roman" to Times New Roman and color of word"blue" to blue color using span tag--> 
    		<p style="font-family:Lucida calligraphy ;color:green">The font <span style="font-family:Times New Roman; font-size:20px">Times New Roman</span> with <span style="color:blue">blue</span> color gives a formal acedamic look. </p>
    	</body>
    </html>
    
     
    • پسندیدہ پسندیدہ x 2
  11. عفراء

    عفراء webmaster

    شمولیت:
    ‏ستمبر 30, 2012
    پیغامات:
    3,918
    السلام علیکم ورحمۃ اللہ
    ایچ ٹی ایم ایل کا آخری سبق جو کہ فارمز سے متعلق ہے ، پیش خدمت ہے۔
    بنیادی ایچ ٹی ایم ایل مکمل ہو چکی ہے۔ اللہ نے توفیق دی تو اگلا سبق سی ایس ایس پر ہو گا۔ ان شاء اللہ۔

    [​IMG]
    [​IMG]
    [​IMG]
    [​IMG]
     
    • پسندیدہ پسندیدہ x 2
Loading...

اردو مجلس کو دوسروں تک پہنچائیں