GS401 Internet Programming

Lecture Week 1

In this lecture, you will learn the following

things
Course Details and Rules
Course Overview & Introduction to HTML
 Course Details & Rules

Course Coordinator (lecturer)

Dr. Ibrahim Nnass.
Email: Ibra.nnass@sebhau.edu.ly

Problems/Consultancy
If you have a problem, contact
lecturer/ tutor.
 ‫وبرة عه شبكت االوخروج‬

‫ذُ اسرخذاَ اإلٔرشٔد سسّ‪١‬ا ف‪ ٟ‬ػاَ ‪٠ٚ ،1969‬شجغ رٌه الػرثاس اإلٔرشٔد أحذ سثً دػُ اٌج‪١‬ش‬
‫األِش‪٠‬ى‪ٚ ،ٟ‬ف‪ِ ٟ‬طٍغ اٌصّأ‪ٕ١‬اخ ذُ ذغط‪١‬ح ِؼظُ اٌجاِؼاخ األِش‪٠‬ى‪١‬ح تخذِاخ اإلٔرشٔد‪.‬‬
‫‪ٚ‬ف‪ ٟ‬ػاَ ‪ 1989‬لاَ ت‪١‬شٔش ٌ‪١‬ضٌ‪ ٟ‬تأشاء شثىح اٌ‪٠ٛ‬ة ‪ٚ world wide web‬اٌّؼش‪ٚ‬فح تاالخرظاس ‪،www‬‬
‫‪ٚ‬ذُ اسرخذاِٗ ف‪ ٟ‬اٌر‪ٛ‬اطً ت‪ ٓ١‬اٌؼذ‪٠‬ذ ِٓ إٌّظّاخ ف‪ ٟ‬أ‪ٚ‬س‪ٚ‬تا‪ٚ ،‬ذُ اإلػالْ تؼذ رٌه ػٓ ذمٕ‪١‬ح ‪Html‬‬
‫وفي عام ‪ 1993‬تم تفعيل أول متصفح لشبكة اإلنترنت والذي أعقبه ظهور نظام التشغيل ماك ونظام‬
‫ويندوز للتصفح عبر شبكة اإلنترنت‪.‬‬
 ‫وبرة عه شبكت االوخروج‬
‫انعىاصر انخي ححخىي عهيها شبكت االوخروج انعانميت ‪:‬‬
‫هىاك مجمىعت مه انعىاصر انخي مه خالنها وسخطيع انعمم عهً شبكت االوخروج وهً ‪:‬‬
‫انمكىواث انماديت ‪ :‬ذشًّ ٘زٖ اٌّى‪ٔٛ‬اخ اٌىاتالخ ‪ٚ‬اٌر‪ ٟ‬ذس‪ ًٙ‬ػٍّ‪١‬ح ٔمً اٌّؼٍ‪ِٛ‬اخ ت‪ ٓ١‬االج‪ٙ‬ضج اٌّخرٍفح ألٔ‪ٙ‬ا ٘‪ ٟ‬اٌر‪ٟ‬‬
‫ذم‪ َٛ‬تؼٍّ‪١‬ح حًّ اٌّؼٍ‪ِٛ‬اخ ِٓ ‪ٚ‬اٌ‪ ٝ‬االج‪ٙ‬ضج‪.‬‬
‫انمىجهاث ‪ :‬ذؼٕ‪ ٝ‬اٌخ‪ٛ‬ادَ ‪ ٝ٘ٚ‬اٌر‪ ٟ‬ذم‪ َٛ‬تؼٍّ‪١‬ح ذخض‪ ٓ٠‬اٌّؼٍ‪ِٛ‬اخ اٌر‪ ٟ‬ذظً ت‪ ٓ١‬االشخاص اٌّسرخذِ‪ٚ ٓ١‬اٌّؼٕ‪ٓ١‬‬
‫تاألِش ‪ِٕٙٚ‬ا ا‪٠‬ؼا االلّاس اٌظٕاػ‪١‬ح ‪ٚ‬اتشاض اٌ‪ٛٙ‬اذف اٌخٍ‪٠ٛ‬ح‪.‬‬
‫انبروحىكىالث ‪ ٟ٘ :‬اٌم‪ٛ‬اػذ االساس‪١‬ح اٌر‪ ٟ‬ذسرخذِ‪ٙ‬ا االج‪ٙ‬ضج ال ذّاَ ِ‪ٙ‬اَ ػٍّ‪ٙ‬ا ػٍ‪ ٝ‬اوًّ ‪ٚ‬جٗ ‪ٚ‬تذ‪ٙٔٚ‬ا ‪٠‬ظؼة‬
‫اٌر‪ٛ‬اطً ت‪ ٓ١‬االج‪ٙ‬ضج‪.‬‬
 ‫وبرة عه شبكت االوخروج‬
‫مميزاث شبكت االوخروج انعانميت‬
‫• ذ‪ٛ‬فش ذمٕ‪١‬ح ػاٌ‪١‬ح ‪ٚ‬سش‪٠‬ؼح ِٓ االذظاالخ ت‪ ٓ١‬اٌّسرخذِ‪ِ ٓ١‬غ تؼؼ‪ ُٙ‬اٌثؼغ‬
‫• ذ‪ٛ‬فش ا‪٠‬ؼا ذمٕ‪١‬ح ‪ٚ‬تشِجٗ ج‪١‬ذج ‪ِٚ‬رمذِح ٌٍح‪ٛ‬اس‪١‬ة االٌ‪١‬ح‬
‫• ذؼذد ٍِح‪ٛ‬ظ ٌٍغاخ اٌّسرخذِح ػثش شثىاذ‪ٙ‬ا اٌّخرٍفح‬
‫• ذ‪ٛ‬ف‪١‬ش س‪ٌٛٙ‬ح اٌرؼشف ػٍ‪ ٝ‬وافح األخثاس اٌر‪ ٟ‬ذحذز ف‪ ٟ‬جّ‪١‬غ أٔحاء اٌؼاٌُ ف‪ٛ‬س حذ‪ٚ‬ش‪ٙ‬ا‪ِ ،‬غ ئدساض اٌظ‪ٛ‬س اٌخاطح‬
‫تاٌخثش تً ‪ٚ‬اٌرؼشف ػٍ‪ٙ١‬ا تاٌثس اٌح‪ ٟ‬اٌّثاشش‪.‬‬
‫• ذ‪١‬س‪١‬ش ػٍّ‪١‬ح اٌر‪ٛ‬اطً ت‪ ٓ١‬وافح األشخاص ِٓ جّ‪١‬غ د‪ٚ‬ي اٌؼاٌُ‪.‬‬
‫• ئذاحح اٌم‪١‬اَ تاألتحاز اٌؼٍّ‪١‬ح ‪ٚ‬األواد‪١ّ٠‬ح ‪ٚ‬االسرؼأح تىافح اٌّشاجغ اٌّطٍ‪ٛ‬تح ِٓ ِخرٍف جاِؼاخ اٌؼاٌُ‪ٚ ،‬ئِىأ‪١‬ح‬
‫ذحّ‪ ً١‬أ‪ِ ٞ‬شجغ ػٍّ‪ ٟ‬خالي ش‪ٛ‬أ‪ ٟ‬لٍ‪ٍ١‬ح‪.‬‬
 ‫وبرة عه شبكت االوخروج‬
‫بروحىكىالث اإلوخروج‬
‫ٕ٘ان اٌؼذ‪٠‬ذ ِٓ تش‪ٚ‬ذ‪ٛ‬و‪ٛ‬الخ اٌر‪ٛ‬اطً ػٍ‪ ٝ‬اإلٔرشٔد ‪ِٕٙٚ‬اال اٌحظش واٌراٌ‪:ٟ‬‬
‫• تش‪ٚ‬ذ‪ٛ‬ووو‪ٛ‬ي اإلٔرشٔوود ‪ IP‬اٌّسوول‪ٛ‬ي ػووٓ اذظوواالخ وافووح األج‪ٙ‬ووضج ػٍوو‪ ٝ‬شووثىح اإلٔرشٔوود‪٠ٚ ،‬حروو‪ ٞٛ‬وووً ج‪ٙ‬وواص ػٍوو‪ٝ‬‬
‫تش‪ٚ‬ذ‪ٛ‬و‪ٛ‬ي خاص تٗ‪.‬‬
‫• تش‪ٚ‬ذ‪ٛ‬و‪ٛ‬ي إٌمً اٌفائك ‪ HTTP‬اٌّسول‪ٛ‬ي ػوٓ ٔموً وافوح اٌٍّفواخ ػثوش شوثىح اإلٔرشٔود ِصوً اٌظو‪ٛ‬س ‪ِٚ‬مواؽغ اٌف‪١‬وذ‪ٛ٠‬‬
‫‪ٚ‬اٌّسرٕذاخ‪.‬‬
 ‫وبرة عه شبكت االوخروج‬
‫ماذا وعىي ب ‪ HTTP‬و ‪HTTPS‬؟‬
‫‪ِ HTTP ٛ٘ HTTPS‬غ اٌرشف‪١‬ش‪ .‬االخرالف اٌ‪ٛ‬ح‪١‬ذ ت‪ ٓ١‬اٌثش‪ٚ‬ذ‪ٛ‬و‪ ٛ٘ ٓ١ٌٛ‬أْ ‪٠ HTTPS‬سرخذَ )‪TLS (SSL‬‬
‫ٌٍرشف‪١‬ش‪ٌ ٚ .‬زٌه ‪٠‬ؼذ ‪ HTTPS‬أوصش أِأا ِٓ ‪ HTTP‬و‪ ٟ‬ذرأوذ ِٓ أْ اٌّ‪ٛ‬لغ اٌز‪ ٞ‬ذرظفحٗ ‪٠‬ؼًّ تثش‪ٚ‬ذ‪ٛ‬و‪ٛ‬ي‬
‫‪ HTTPS‬وً ِا ػٍ‪١‬ه فؼٍٗ ٘‪ ٛ‬إٌظش اٌ‪ ٝ‬اٌشاتؾ (ػٕ‪ٛ‬اْ ‪ٌٍ )URL‬ر‪ٛ‬ػ‪١‬ح‪ ,‬اٌ‪١‬ه اٌّصاٌ‪ ٓ١‬اٌراٌ‪:ٓ١١‬‬
‫‪https://example.com‬‬
‫‪http://example.com‬‬
‫وّا ٘‪ٚ ٛ‬اػح ف‪ ٟ‬ػٕا‪ URL ٓ٠ٚ‬اٌساتمح‪ ,‬ف‪ ٟ‬حاي ‪ٚ‬ج‪ٛ‬د ‪ https‬ف‪ ٟ‬اٌشاتؾ ف‪ٙ‬زا ‪٠‬ؼٕ‪ ٟ‬اْ اٌّ‪ٛ‬لغ ‪٠‬سرخذَ اٌثش‪ٚ‬ذ‪ٛ‬و‪ٛ‬ي‬
‫ا‪ ,ِٓ٢‬اِا اٌّ‪ٛ‬لغ اٌز‪٠ ٞ‬ثذأ ػٕ‪ٛ‬اْ ‪ URL‬ب ‪ http‬ف‪ِٛ ٛٙ‬لغ ‪٠‬سرخذَ تش‪ٚ‬ذ‪ٛ‬و‪ٛ‬ي ‪ http‬تذ‪ ْٚ‬ذشف‪١‬ش ‪٠ ٚ‬فؼً اٌحزس ِٕٗ‬
‫‪ ٚ‬ػذَ ادخاي ت‪١‬أاخ ٘اِح ا‪ ٚ‬شخظ‪١‬ح‪.‬‬
‫ما هى بروحىكىل ‪HTTP‬؟‬
‫سِض ‪ HTTP‬اٌ‪ ٝ‬ػثاسج ‪ Hyper Text Transfer Protocol‬ا‪ ٚ‬تاٌؼشت‪١‬ح‪ :‬تش‪ٚ‬ذ‪ٛ‬و‪ٛ‬ي ٔمً إٌض اٌرشؼث‪ٛ٘ٚ ,ٟ‬‬
‫اٌثش‪ٚ‬ذ‪ٛ‬و‪ٛ‬ي اٌّسإ‪ٚ‬ي ػٓ ٔمً اٌث‪١‬أاخ ػٍ‪ ٝ‬شثىح االٔرشٔد‪٠ ,‬م‪٘ َٛ‬زا اٌثش‪ٚ‬ذ‪ٛ‬و‪ٛ‬ي تٕمً جّ‪١‬غ أٔ‪ٛ‬اع اٌث‪١‬أاخ ػٍ‪ ٝ‬اٌشثىح‬
‫(ٍِفاخ نغت ‪ Html‬ط‪ٛ‬س ‪ ٚ‬ف‪١‬ذ‪٘ٛ٠‬اخ‪.....‬اٌخ) ‪.‬‬
‫وبرة عه شبكت االوخروج‬
‫أوىاع مىاقع االوخروج‬
‫أوىاع مىاقع االوخروج‬
 ‫ما هي نغت ‪HTML‬‬

‫ما هي ‪HTML‬؟‬
‫ذشِض ‪ HTML‬ئٌ‪Hyper Text Markup Language ٝ‬‬
‫‪ٌ ٟ٘HTML‬غح اٌرشِ‪١‬ض اٌم‪١‬اس‪١‬ح إلٔشاء طفحاخ اٌ‪٠ٛ‬ة‬
‫‪٠‬ظف ‪ HTML‬تٕ‪١‬ح طفحح اٌ‪٠ٛ‬ة‬
‫‪٠‬رى‪ ِٓ HTML ْٛ‬سٍسٍح ِٓ اٌؼٕاطش‬
‫ذخثش ػٕاطش ‪ HTML‬اٌّرظفح تى‪١‬ف‪١‬ح ػشع اٌّحر‪ٜٛ‬‬
‫ذم‪ َٛ‬ػٕاطش ‪ HTML‬ترسّ‪١‬ح أجضاء ِٓ اٌّحر‪ِ ٜٛ‬صً "٘زا ػٕ‪ٛ‬اْ" ‪٘" ،‬زٖ فمشج" ‪٘" ،‬زا اسذثاؽ" ‪ ،‬ئٌخ‪.‬‬
 HTML ‫ما هي نغت‬
Year Version
1989 Tim Berners-Lee invented www
1991 Tim Berners-Lee invented HTML
1993 Dave Raggett drafted HTML+
1995 HTML Working Group defined HTML 2.0
1997 W3C Recommendation: HTML 3.2
1999 W3C Recommendation: HTML 4.01
2000 W3C Recommendation: XHTML 1.0
2008 WHATWG HTML5 First Public Draft
2012 WHATWG HTML5 Living Standard
2014 W3C Recommendation: HTML5
2016 W3C Candidate Recommendation: HTML 5.1
2017 W3C Recommendation: HTML5.1 2nd Edition
2017 W3C Recommendation: HTML5.2
‫‪HTML‬ما هي نغت‬
‫ما هي نغت ‪HTML‬‬
‫ما هي نغت ‪HTML‬‬
‫ما هي نغت ‪HTML‬‬
 ‫ما هي حقىيت ‪CSS‬؟‬
‫ما هي حقىيت ‪CSS‬؟‬
‫‪ ٟ٘ CSS‬اخرظاس ٌ‪Cascading Style Sheets ٟ‬‬
‫ماذا يمكه أن أفعم بخقىيت ‪CSS‬؟‬
‫‪ ٟ٘CSS‬أداج ذظّ‪ ُ١‬ذحذد شىً ‪ٚ‬ش‪١‬مح ‪ ،HTML‬ف‪ ٟٙ‬ذ‪ٙ‬رُ تاٌخط‪ٛ‬ؽ‪ ،‬األٌ‪ٛ‬اْ‪ ،‬اٌ‪ٙ‬اِش‪ٚ ،‬اٌؼشع ‪ٚ‬االسذفاع‪ ،‬ط‪ٛ‬سج‬
‫خٍف‪١‬ح اٌّ‪ٛ‬لغ‪ٚ ،‬و‪١‬ف‪١‬ح ذ‪ٛ‬ص‪٠‬غ اٌّساحاخ ‪ٚ‬أش‪١‬اء أخش‪ ٜ‬وص‪١‬شج‪.‬‬
‫‪ّ٠ HTML‬ىٓ أْ ذسرخذَ تشىً خاؽئ إلػافح ذظّ‪ٌٍّٛ ُ١‬الغ‪ٌ ،‬ىٓ ‪ CSS‬ذ‪ٛ‬فش اٌّض‪٠‬ذ ِٓ اٌخ‪١‬اساخ ‪ ٟ٘ٚ‬أوصش دلح‬
‫‪ٚ‬ػٍّ‪١‬ح‪ِ ٟ٘ٚ ،‬ذػ‪ِٛ‬ح ِٓ لثً اٌّرظفحاخ اٌشئ‪١‬س‪١‬ح‪.‬‬

‫ما انفرق بيه ‪ CSS‬و ‪HTML‬؟‬

‫ذسرخذَ ٌ‪ٛ‬ػغ ٘‪١‬ىٍ‪١‬ح ‪ٔٚ‬ظاَ ِٕطم‪ٌٍّ ٟ‬حر‪٠ٛ‬اخ‪ ،‬أِا ‪ CSS‬ف‪ ٟٙ‬ذسرخذَ إلػافح ذظّ‪ٌٙ ُ١‬زٖ اٌّحر‪٠ٛ‬اخ‪.‬‬

‫ف‪ ٟ‬اٌّاػ‪ ٟ‬وأد ‪ HTML‬ذسرخذَ فمؾ إلػافح ٘‪١‬ىٍ‪١‬ح ٌٍٕض‪ ،‬اٌىاذة ‪ّ٠‬ىٕٗ أْ ‪٠‬م‪ َٛ‬تاػافح ِؼٕ‪ٌٍٕ ٝ‬ض تأْ ‪٠‬م‪ٛ‬ي ِصال‬
‫"٘زا ػٕ‪ٛ‬اْ" أ‪٘" ٚ‬زٖ فمشج" ‪٠ٚ‬سرخذَ ‪ٚ‬س‪ِ HTML َٛ‬صً >‪ <h1‬و>‪< p‬‬
 ‫ما هي حقىيت ‪CSS‬؟‬
‫ِغ اصد‪٠‬اد ش‪ٙ‬شج شثىح اٌ‪٠ٛ‬ة تذأ اٌّظّّ‪ ْٛ‬ف‪ ٟ‬اٌثحس ػٓ ؽشق إلػافح ذظّ‪ٌٍٛ ُ١‬شائك‪ٌٚ ،‬رٍث‪١‬ح سغثاذ‪ ُٙ‬لاَ‬
‫ِثشِج‪ٛ‬ا اٌّرظفحاخ ‪١ٔ -‬رىس‪١‬ة ‪ِٚ‬ا‪٠‬ىش‪ٚ‬س‪ٛ‬فد ‪ -‬تاخرشاع ‪ٚ‬س‪ HTML َٛ‬جذ‪٠‬ذج ِصً < ‪ <font‬اٌز‪٠ ٞ‬خرٍف ػٓ‬
‫‪ٚ‬س‪ HTML َٛ‬األطٍ‪١‬ح تأٔٗ ‪ٙ٠‬رُ تاٌشىً ال تاٌ‪١ٙ‬ىٍ‪١‬ح‪.‬‬

‫أد‪ ٜ‬رٌه ئٌ‪ ٝ‬أْ ذسرخذَ ‪ٚ‬س‪١٘ َٛ‬ىٍ‪١‬ح ِصً >‪ < table‬تشىً خاؽئ‪ ،‬ح‪١‬س اسرخذاَ ٘زا اٌ‪ٛ‬سُ ٌرحذ‪٠‬ذ ذظّ‪ُ١‬‬
‫اٌظفحح تذال ِٓ ئػافح ِؼٕ‪ٌٍٕ ٝ‬ض‪ٚ ،‬اٌىص‪١‬ش ِٓ اٌ‪ٛ‬س‪ َٛ‬اٌر‪ ٟ‬اخرشػد ِصً >‪ <blink‬وأد فمؾ ِذػ‪ِٛ‬ح ِٓ لثً‬
‫ِرظفح ‪ٚ‬احذ‪ ،‬أطثحد جٍّح "سرحراض ئٌ‪ ٝ‬اٌّرظفح اٌفالٔ‪ٌ ٟ‬شؤ‪٠‬ح ٘زٖ اٌظفحح" ِأٌ‪ٛ‬فح ف‪ِٛ ٟ‬الغ اٌشثىح‪.‬‬

‫اترىشخ ‪ٌ CSS‬ؼالض ٘زٖ اٌّشىٍح ألٔ‪ٙ‬ا ذ‪ٛ‬فش ٌٍّظّّ‪ ٓ١‬ؽشلا فؼاٌح ‪ٚ‬ػٍّ‪١‬ح إلٔشاء اٌرظاِ‪٘ٚ ُ١‬زٖ اٌرظاِ‪ُ١‬‬
‫سرى‪ِ ْٛ‬ذػ‪ِٛ‬ح ِٓ لثً جّ‪١‬غ اٌّرظفحاخ ف‪ٔ ٟ‬فس اٌ‪ٛ‬لد‪ٚ ،‬اٌفظً ت‪ ٓ١‬شىً اٌظفحح ‪ِٚ‬حر‪٠ٛ‬اذ‪ٙ‬ا ‪٠‬ثسؾ ػٍّ‪١‬ح‬
‫ئداسج اٌّ‪ٛ‬لغ تشىً وث‪١‬ش‪.‬‬
 ‫ما هي حقىيت ‪CSS‬؟‬
‫كيف سخفيدوي ‪CSS‬؟‬
‫ذؼرثش ‪ CSS‬ش‪ٛ‬سج ف‪ ٟ‬ػاٌُ ذظّ‪ ُ١‬اٌّ‪ٛ‬الغ‪ٚ ،‬ف‪ٛ‬ائذ٘ا األساس‪١‬ح ٘‪:ٟ‬‬

‫اٌرحىُ تاٌرظّ‪ ِٓ ُ١‬خالي ٍِف ‪ٚ‬احذ‪.‬‬ ‫•‬

‫ئِىأ‪١‬ح أوثش ‪ٚ‬أدق ٌٍرحىُ ترفاط‪ ً١‬اٌرظّ‪.ُ١‬‬ ‫•‬
‫ئٔشاء ذظاِ‪ ُ١‬خاطح ٌّخرٍف ‪ٚ‬سائً ػشع اٌّ‪ٛ‬لغ ِصً اٌشاشاخ ‪ٚ‬اٌطاتؼاخ ‪ٚ‬اٌ‪ٛٙ‬اذف إٌماٌح ‪ ..‬ئٌخ‬ ‫•‬
‫اٌؼذ‪٠‬ذ ِٓ اٌرمٕ‪١‬اخ ‪ٚ‬األساٌ‪١‬ة اٌّرمذِح ف‪ ٟ‬اٌرحىُ تاٌرظّ‪.ُ١‬‬ ‫•‬

‫كيف حعمم حقىيت ‪CSS‬؟‬

‫اٌىص‪١‬ش ِٓ خظائض ‪ CSS‬ذشثٗ ذٍه اٌّسرخذِح ف‪ٌ ،HTML ٟ‬زٌه ئرا ذؼٍّد ‪ٚ HTML‬اسرخذاِر‪ٙ‬ا إلٔشاء اٌرظاِ‪ُ١‬‬
‫فأٔد ف‪ ٟ‬اٌغاٌة سررّىٓ ِٓ ذؼٍُ ‪ CSS‬تس‪ٌٛٙ‬ح‬