ڪلاس پهريون 1.1 تعارف هن گروپ ۾ پاڻ جيڪو ڪورس شروع ڪنداسين ان جو مقصد آهي، ويب سائيد پروگرامينگ (Web page/site programming) سکڻ. هن ڪورس کي مڪمل سمجھڻ لاءِ ٽن شئين جو اچڻ ضروري آهي. HTML CSS JavaScript تنهن ڪري سڀ کان پهرين پاڻ HTML کي سکڻ شروع ڪنداسين. 1.2 نظريو سڀ کان پهرين HTML کي سمجھڻ ضروري آهي. هي HTML ڇا آهي؟هي اصل ۾ Hyper text markup language جو شارٽ فارم آهي ۽ internet تي موجود هر webpage جو بنياد آهي.ويب پيج ڇا آهن؟توهان جيڪي ڪجھ Web browsers جي مدد سان ڏسو ٿا، اهي سڀ ويب pages آهن.اسان HTML ۾ مختلف قسم جو مواد رکڻ لاءِ جيڪي بنيادي عنصر استعمال ڪريون ٿا، انهن کي ٽيگ (tag) چئبو آهي. ٽيگ سدائين هنن ڏنگين<> ۾ لکبا آهن. ٽيگ تقريبن جوڙي جي صورت ۾ هوندا آهنStart ۽ end ٽيگ.جئين <HTML></HTML>هي HTML جا ٽيگ case-sensitive نه آهن. مطلب ننڍي abc ۾ لکو يا وڏي ABC ۾ لکو هنن تي ڪو فرق نه پوندو آهي.مثال طور: هن <HTML></HTML> ۽ هن <html></html> ۾ ڪو به فرق نه آهي. هيٺ ڏنل HTML جو ڪوڊ، جيڪو توهان کي سندس بنيادي جوڙجڪ سمجھڻ ۾ مدد ڏيندو. <html> <head> <title> HTML Basic </title> </head> <body> <p>Hello World!!!!</p> </body> </html> 1.3 نظريو توهان کي هن ڳالهه جي خبر هجڻ گھرجي ته HTML جو فائيل (File) هڪ text فائيل هوندو آهي. تنهن ڪري ڪنهن به text editor ۾ هن جو فائيل لکي سگھجي ٿو، يا ان کي edit ڪري سگھجي ٿو.نوٽ: ونڊوز جو نوٽ پيڊ (Notepad) هڪ سادو text editor آهي. ان ڪري ڪوڊنگ (coding) لاءِ هڪ سٺي قسم جو ايڊوانس ايڊيٽر استمال ڪرڻ بهتر رهندو. جهڙو ڪرAtom, Notepad++ يا ٻيا کوڙ سارا موجود آهن.وڌيڪ معلومات لاءِ توهان Google search تي هي سٽ لکي text editor for html معلوم ڪري سگھو ٿا. 1.4 نظريو اصل ڪورس شروع ڪرڻ کان پهرين توهان کي ڪجھ بنيادي ڳالهين جي خبر هجڻ گھرجي يا گھٽ ۾ گھٽ هنن سوالن جا جواب توهان کي اچڻ گھرجن. 1. فائيل ڇا آهي؟ 2. فائيل اڪسٽينشن (file extension) ڇا آهي؟ ۽ ڇو ضروري آهي؟ 3. ٽيڪس ايڊيٽر (Text Editor) ڇا آهي ۽ انهن جا ڪجھ نالا ٻڌايو؟4. آئي ڊي اي (IDE) Integrated Development Environment ڇا هوندو آهي ۽ انهن جا ڪجھ نالا ٻڌايو؟5. ويب پيج webpage ڇا آهي؟ ويب پيج ۽ ويب سائيڊ website ۾ فرق ٻڌايو؟6. توهان کي HTML ۽ CSS بابت اها ڄاڻ هجڻ گھرجي تي اهي ڇالائي استعمال ٿيندا آهن.7. توهان کي case-sensitive جي خبر آهي؟ هنن بنيادي سوالن جي جوابن کان پوءِ اسان اصل ڪورس جي طرف وينداسين.(جيڪڏهن توهان مان ڪنهن کي به هنن سوالن جو جواب اچي ٿو ته ٻڌايو!) 1.5 نظريو توهان پنهنجي ڪمپيوٽر ۾ (data يا information) جيڪي ڪجھ اسٽور ڪيو ٿا، اهو ڪنهن نه ڪنهن فائيل ۾ اسٽور ٿئي ٿو. هر فائيل کي سندس نالي سان گڏ اڪسٽينشن جو هجڻ به لازمي آهي. جيڪا نڪتي (dot) کان پوءِ ڏني ويندي آهي. سندس file extension مان خبر پوندي آهي ته هي فائيل ڪهڙي قسم جو آهي ۽ ڪهڙي پروگرم لاءِ آهي. مثلن جئين.txt.pdf.doc ۽ ٻيا کوڙ سارا. PDF file extension is .pdf Text file extension is .txt MS Word file extension is .doc or .docx HTML file extension is .htm or .html CSS file extension is .css And so on. ڪمپيوٽر کي فائيل اڪسٽينشن مان خبر پوندي آهي ته هي فائيل ڪهڙي قسم جو آهي ۽ ان کي ڪهڙي پروگرام جي مدد سان کلڻ گھرجي. 1.6 نظريو پريڪٽيڪل ويب پروگرامينگ Practical Web Programming شروع ڪرڻ کان پهرين ڪجھ بنيادي Theoretical ڳالهين جو سمجھ ۾ اچڻ ضروري آهي. تنهن ڪري هر پوسٽ ۾ هڪڙي ننڍڙي theoretical ڳالهه بيان ڪيل آهي. ائين سمجھو هر هڪ پوسٽ ۾ هڪ يا ٻن سوالن جواب موجود آهن. انهن کي غور سان پڙهو، جي ڳالهه سمجھ ۾ نه اچي ته توهان سوال به پڇي سگھو ٿا. نوٽ: آخر ۾ توهان کان هنن پوسٽن ۾ ڏنل معلومات بابت سوال پُڇا ويندا. 1.7 نظريو آئي ڊي اي (IDE) هڪ اهڙو software يا tool آهي، جيڪو ڪمپيوٽر programmersلاءِ coding ۾ آساني پيدا ڪري ٿو. ان سان گڏ ٻيا اهم tools هڪ جائي تي مهيا ڪري ڏي ٿو، جيڪي پروگرامر لاءِ ضروري هجن ٿا. An integrated development environment (IDE) is a software application that provides comprehensive facilities to computer programmers for software development. An IDE normally consists of a source code editor, build automation tools and a debugger. Most of the modern IDEs have intelligent code completion.Such as NetBeans, Eclipse, Visual Studio Code and so on. سوال: توهان جي خيال ۾ IDE ۽ Editor ۾ ڪهڙو فرق آهي؟ 1.8 نظريو Web page A document which can be displayed in a web browser such as Firefox, Google Chrome, Opera, Microsoft Internet Explorer or Edge, or Apple's Safari. These are also often called just "pages." Website A collection of web pages which are grouped together and usually connected together in various ways. Often called a "web site" or simply a "site." Home page The entry page for a website, which can link to additional pages on the same website or pages on other sites. سوال: ڇا توهان کيweb page ۽website۾ فرق سمجھ ۾ اچي ٿو؟ 1.9 نظريو HTML Hypertext Markup Language (HTML) is the standard markup language for creating web pages, with Cascading Style Sheets (CSS) and JavaScript. Web browsers receive HTML documents from a web server or from local storage and render the documents into web pages. HTML describes the structure of a web page, inclusion of CSS defines the look and layout of content and JavaScript affects the behavior and content of web page. HTML elements are the building blocks of HTML pages and are delineated by tags, written using angle brackets <>. Browsers do not display the HTML tags, but use them to interpret the content of the page. The World Wide Web Consortium (W3C), maintainer of both the HTML and the CSS standards, has encouraged the use of CSS over explicit presentational HTML since 1997. مطلب HTML يا html ڪنهن به webpage جو بنيادي ڍانچو ٺاهڻ ۾ مدد ڏئي ٿو. ۽ CSS ان کي سينگھارڻ ۽ سوارڻ لاءِ ڪم ۾ اچي ٿو. ۽ توهان جيڪڏهن ان پيج ۾ جان وجھڻ يا active ڪرڻ چاهيو ٿا ته پوءِ JavaScript توهان جي ان ڪم ۾ تمام گھڻي مدد ڪري سگھي ٿو. پر اهو سڀ ڪجھ تڏهن ممڪن ٿيندو، جڏهن توهان انهن کي استعمال ڪرڻ سکي وٺندو. 1.10 نظريو What is HTML? HTML is the standard markup language for creating Web pages. HTML stands for Hyper Text Markup Language HTML describes the structure of Web pages using markup HTML elements are the building blocks of HTML pages HTML elements are represented by tags HTML tags label pieces of content such as "heading", "paragraph", "table", and so on Browsers do not display the HTML tags, but use them to render the content of the page 1.11 مشق ڪمپيوٽر پروگرامينگ ComputerProgramming ۾ سڀ کان پهرين جيڪو پروگرام لکيو ويندو آهي، اهو آهي HelloWorld جو پيغام پنهنجي اسڪرين تي ڏيکارڻ يا لکڻ. ان روايت کي قائم رکندي پاڻ به سڀ کان پهرين هڪ اهڙو ويب پيج ٺاهينداسين جيڪو ڪمپيوٽر اسڪرين تي Hello World! جو پيغام ڏيکاريندو. Texteditor ۽WebBrowser اهي ٻئي تقريبن هر ڪمپيوٽر تي موجود هوندا آهن. اچو ته پيج ٺاهڻ شروع ڪيون. سڀ کان پهرين Notepad کي پنهنجي اسڪرين تي open ڪريو ۽ پوءِ هيٺ ڏنل ڪوڊ کي ان ۾ لکو. نوٽ: توهان جڏهن پنهنجي لکيل ڪوڊ کي File ۾ Save ڪندا ته Notepad ان کي سندس format ۾ Save ڪندو، جيڪو .txt آهي. پر اسان کي webpage لاءِ نوٽ پيڊ وارو format نه پر سندس فارميٽ .htm يا .html جي ضرورت آهي. تنهنڪري اسان Notepad ۾ Save جي پاران SavaAs کي استعمال ڪنداسين ۽ فائيل جو نالو File Name لکڻ وقت quotationmarks جو استعمال ڪنداسين جئين فائيل .txt ۾ نه پر اسان جي ڏنل extension ۾ Save ٿئي. جئين مثال طور: هي ڪوڊ لکي، Save As ڪريو ۽ نالو ڏيو “hello.html” توهان جو ويب پيج تيار ٺهي ويو. <html> <head> <title>My First program</title> </head> <body> <h1>Hello World!</h1> </body> </html> 1.12 مشق ويب پيج يا html پيج ٺاهڻ يا لکڻ جو طريقو. (ياد رهي tag جوڙي جي صورت ۾ هوندا آهنStart <>۽End </>tag) سڀ کان پهرين html جو tag لکنداسين <html> </html> ان کان پوءِ html جي tag ۾ اندر صرف 2 ٽيگ لکي سگھجن ٿا، هڪ <head>۽ٻيو <body> هاڻ ڪوڊ ڪجھ هن طرح سان ٿيندو <html> <head> </head> <body> </body> </html> هن کان پوءِ جيڪي به tag آهن، اهي head يا body ٽيگ جي اندر لکيا ويندا. جئين هيڊ جي اندر سڀ کان ضروري ٽيگ<title> جو آهي. جنهن ۾ پيج جو نالو لکبو آهي. هاڻ ڪوڊ ڪجھ هن طرح سان نظر ايندو. <html> <head> <title>My First program</title> </head> <body> </body> </html> اسان جي پيغام“Hello World!” پيججيbodyٽيگ ۾ ايندو. اهو اسانheadingطور وڏن اکرن ۾ يا paragraph طور ننڍن اکرن ۾ لکي سگھون ٿا. هيڊنگ وارا ٽيگ <h1> کان وٺي <h6> تائين ٿين ٿا ۽ پيراگرف لاءِ <p> جو ٽيگ استعمال ٿيندو آهي. مثال طور جئين <h1>Hello World!</h1> <h2>Hello World!</h2> …. <h6>Hello World!</h6> or <p>Hello World!</p> هاڻ اسان جو ڪوڊ ڪجھ هن طرح سان ٿيندو. <html> <head> <title>My First program</title> </head> <body> <h1>Hello World!</h1> <p>Hello World!</p> </body> </html> 1.13 مشق Basic structure of HTML document (or webpage basic template) <html> <head> <title>TODO supply a title</title> </head> <body> <div>TODO write content</div> </body> </html> 1.14 نظريو HTML Versions Since the early days of the web, there have been many versions of HTML: Version Year HTML 1991 HTML 2.0 1995 HTML 3.2 1997 HTML 4.01 1999 XHTML 2000 HTML5 2014 Note: The <!DOCTYPE> declaration for HTML5 is: <!DOCTYPE html> The <!DOCTYPE> declaration represents the document type and helps browsers to display web pages correctly. It must only appear once, at the top of the page (before any HTML tags). The document type declaration is not case sensitive, so you may type <!DOCTYPE> or <!doctype>. Example <!DOCTYPE html> <html> <head> <title>Page Title</title> </head> <body> <h1>My First Heading</h1> <p>My first paragraph.</p> </body> </html> هاڻ هن کان پوءِ توهان پنهنجي هر پيج ۾ سڀ کان پهرين هي declaration ايڊ ڪجو، جيڪا HTML5 لاءِ ضروري آهي. <!DOCTYPE html> or <!doctype html> 1.15 مشق Write HTML Using Notepad Web pages can be created and modified by using professional HTML editors. However, for learning HTML we recommend a simple text editor like Notepad (PC). We believe using a simple text editor is a good way to learn HTML. Follow the four steps below to create your first web page with Notepad. Step 1: Open Notepad (PC) Open Start > Programs > Accessories > Notepad Step 2: Write Some HTML Write or copy some HTML into Notepad. <!DOCTYPE html><html><body><h1>My First Heading</h1><p>My first paragraph.</p></body></html> Step 3: Save the HTML Page Save the file on your computer. Select File > Save as in the Notepad menu. Name the file "index.htm" and set the encoding to UTF-8 (which is the preferred encoding for HTML files). Note: You can use either .htm or .html as file extension. There is no difference, it is up to you. Step 4: View the HTML Page in Your Browser Open the saved HTML file in your favorite browser. (Double click on the file, or right-click - and choose "Open with"). The result will look much like this: 1.16 مشق Step 1: اچو ته سنڌي ۾ ويب پيج ٺاهيون. مون هي ڪوڊ NetBeans ۾ لکي ويب پيج کي view ڪيو ۽ نتيجو ڏنل تصوير ۾ موجود آهي. <!DOCTYPE html> <html> <head> <title>Sindhi Web page</title> </head> <body> <h1>سنڌيپيج</h1> <p>هيهڪسنڌي۾لکيلويبپيجآهي.</p> </body> </html> Step 2: هي ڇا! ويب پيج ۾ سنڌي ته آهي ئي ڪون. هن ۾ اهڙي ڪهڙي غلطي ٿي آهي جو سنڌي لکيل نظر نه پئي اچي؟ هن پيج ۾ سنڌي لاءِ character codingصحيح نه آهي. جنهن لاءِ اسان کي UTF-8واري codingاستعمال ڪرڻي پوندي. هن پيج کي اهو ٻڌائڻون پوندو ته هو ڪهڙي ڪوڊينگ کي استعمال ڪري. هن ڪم لاءِ اسان کي<meta> جو ٽيگ<head>جي ٽيگ ۾ استعمال ڪرڻون پوندو. <meta charset="UTF-8"> After adding meta tag, code looks like: <!DOCTYPE html> <html> <head> <title>Sindhi Web page</title> <meta charset="UTF-8"> </head> <body> <h1>سنڌي پيج</h1> <p>هي هڪ سنڌي ۾ لکيل ويب پيج آهي.</p> </body> </html> Step 3: اسان جي ويب پيج ۾ سنڌي ته اچي وئي پر اها انگريزي واري پاسي کان لکيل آهي. سنڌي ته ساڄي پاسي کان لکبي آهي. پوءِ ان لاءِ ڇا ڪريون؟ ان لاءِ اسان کي<HTML> جي ٽيگ ۾ پيج کي سندس Directionٻڌائڻ ضروري آهي. There are two directions one is left to right in short (ltr) And other one is right to left in short (rtl) ٽيگ tag جي ڏنگين <> اندر سندس نالي کان پوءِ جيڪا شئي اچي ٿي، ان کي ٽيگ جو Attributeچئبو آهي. جيئن dir=ltr or dir=rtl۽برابر جي نشان کان پوءِ جيڪا شئي اچي ٿي، اها Value of attributeهوندي آهي. پيج جي ڊائيريڪشن سيٽ ڪرڻ لاءِ ٽيگ هئين لکبو: <html dir="rtl">هاڻ ڪوڊ هن طرح سان نظر ايندو: <!DOCTYPE html> <html dir="rtl"> <head> <title>Sindhi Web page</title> <meta charset="UTF-8"> </head> <body> <h1>سنڌي پيج</h1> <p>هي هڪ سنڌي ۾ لکيل ويب پيج آهي.</p> </body> </html> 1.17 جائزو Review 1.1 1. Create html file and open it in browser. 2. HTML is not a case sensitive. 3. Define document type declaration a. <!DOCTYPE html> 4. Tags a. <html></html> b. Inside <html> : two tags are <head></head> and <body></body> c. Inside <head> : <title></title> and <meta> (note: meta has no end tag) d. Inside <body> : <h1></h1> and <p></p> 5. Tags Attributes and its values a. charset=”UTF-8” b. dir=”rtl” or dir=”ltr” Tag Explained The <!DOCTYPE html> declaration defines this document to be HTML5 The <html> element is the root element of an HTML page The <head> element contains meta information about the document The <title> element specifies a title for the document The <body> element contains the visible page content The <h1> element defines a large heading The <p> element defines a paragraph HTML Tags general format HTML tags are element names surrounded by angle brackets: <tagname>content goes here...</tagname> Note: Only the content inside the <body> section (the white area above) is displayed in a browser. 1.18 جائزو هيستائين پاڻ جيڪي ڪجھ پڙهيو آهي، انهي ڪم جو جائيزو ٿا وٺون. پاڻ هنن بنيادي ڳالهين تي غور ڪري چڪا آهيون: 1. عام texteditor ۽ codeeditor ۾ ڪهڙو فرق آهي. 2. فائيل يا HTMLdocument جي اڪسٽينشن (html or .htm.) ڪهڙي هوندي آهي. 3. ويب يا HTMLجي پيج جو بنيادي ڍانجو (BasicStructure) ڪئين هوندو آهي. 4. ويب پيج ۾ سنڌي کي ڪئين لکجي.
