WEB DEVELOPMENT DIPLOMA v1.pdf
•
1 like•90 views
كتاب مسار تطوير تطبيقات الويب من حوالي سنة تقريبا انهيت تدريب "دبلوب تطوير الويب" وعملت بعدها على تجميع محتوى الدبلوم في كتاب واحد هذا الكتاب يحوي معلومات جيدة عن لغات البرمجة المستخدمة في مجال بناء تطبيقات الويب مثل : PHP , JS بلاضافة الى MYSQL و لغات التصميم HTMLو CSS وايضا Bootstrap V4 و أخيراً JQuery #php #javascript #css #css3 #html #mysql #jquery #boostrap #webdevelopment
More Related Content
Featured
Featured (20)
WEB DEVELOPMENT DIPLOMA v1.pdf
- 1. WEB DEVELOPMENT DIPLOMA V1 WEB DEVELOPMENT DIPLOMA version 1 Eng. Anas Alpure أن .م س البيور WEB DEVELOPMENT DIPLOMA
- 2. +352681612038 أن .م س البيور 2 ا لفهرس الويب متصفحات ________________________________ _____________ 22 في مقدمة HTML5 : ________________________________ ____________ 23 عنصر هو ما HTML ؟ ________________________________ __________ 24 االكواد محرر ________________________________ ________________ 26 HTML بسيط كود ________________________________ _____________ 28 عناصر HTML ________________________________ _______________ 30 عناصر HTML ( المتداخلة Nested ) ________________________________ __ 30 خاصي المصدر ة src ________________________________ _______________ 32 واالرتفاع العرض خواص ________________________________ ___________ 33 (البديل النص خاصية alt Attribute ) ________________________________ ____ 33 ( الستايل خاصية style Attribute ) ________________________________ ___ 33 الخاصية lang ( lang Attribute ) ________________________________ ____ 33 (العنوان خاصية title ) ________________________________ __________ 34 في النصوص تنسيق HTML ________________________________ _______ 34 <b> and <strong> Elements ________________________________ ________ 35 <i> and <em> Elements ________________________________ ___________ 35 <small> Element ________________________________ _______________ 35 <mark> Element ________________________________ _______________ 35 <del> Element ________________________________ _________________ 35 <ins> Element ________________________________ _________________ 35 <sub> Element ________________________________ _________________ 36 <sup> Element ________________________________ _________________ 36 األلوان ________________________________ ____________________ 36 األلوان أسماء ________________________________ __________________ 36 (الخلفية لون Background Color ) ________________________________ ______ 36 (الخط لون Text Color ) ________________________________ _____________ 37 ( الحدود لون Border Color ) ________________________________ _________ 37
- 3. +352681612038 أن .م س البيور 3 اللون قيم ________________________________ _____________________ 38 صورة العنصر HTML ________________________________ __________ 38 خاصية (The src Attribute) src ________________________________ _______ 39 خاصية alt ( The alt Attribute ) ________________________________ _______ 39 كرابط الصورة ________________________________ _______________ 39 الجداول ________________________________ ___________________ 40 جدول تعريف HTML ________________________________ ______________ 40 جدول - ًادح أضف ________________________________ ________________ 41 جدول - خلية مساحة إضافة ________________________________ __________ 41 جدول - عنا اليسار إلى محاذاة وين ________________________________ ______ 41 جدول - أعمدة عدة على تمتد خلية ________________________________ ______ 42 جدول - صفوف عدة على تمتد خلية ________________________________ _____ 42 جدول - توضيحية تسمية أضف ________________________________ ________ 43 القوائم ________________________________ ____________________ 45 قائمة ( مرتبة غير Unordered List ) ________________________________ ____ 45 مرتبة قائمة ( Ordered List ) ________________________________ _________ 45 الوصف قوائم ________________________________ __________________ 46 ( السطرية العناصر inline الكتلة عناصر و ) (Block) ________________________ 47 (الكتلة عناصر Block-level Elements ) ________________________________ ___ 47 ()(المضمنة السطرية العناصر Inline Elements ) _____________________________ 47 عنصر <div> ________________________________ ___________________ 48 العنصر <span> ________________________________ _________________ 49 الفئة أو الصف خاصية class ________________________________ ______ 49 الصف كتابة قواعد Class ________________________________ ___________ 52 متعدة صفوف Classes ________________________________ _____________ 52 المعرف خاصية id ________________________________ _____________ 53 مرجعية إشارات HTML والروابط المعرف مع _______________________________ 54 خاصية استخدام id في JavaScript ________________________________ _____ 55 المضمنة األطر Iframes ________________________________ _________ 55 كتابة قواعد Iframe ________________________________ _______________ 55
- 4. +352681612038 أن .م س البيور 4 والعرض االرتفاع ضبط Iframe ________________________________ _______ 55 الحدود إزالة Iframe ________________________________ ______________ 56 الصفحة رأس Head ________________________________ _______________ 56 الكود عنصر Code ________________________________ ____________ 59 المتغير عنصر <var> ________________________________ ___________ 59 المتجاوب التصميم Responsive ________________________________ _____ 60 هو ما االستجابة؟ سريع الويب تصميم ________________________________ ___ 60 العرض منفذ إعداد ________________________________ _______________ 60 ( متجاوبة صور Responsive Images ) ________________________________ ___ 61 ال الداللية عناصر Semantic ________________________________ _______ 62 عنصر <section> ________________________________ ________________ 63 عنصر <article> ________________________________ ________________ 64 عنصر <header> ________________________________ ________________ 64 عنصر <footer> ________________________________ ________________ 65 عنصر <nav> ________________________________ __________________ 65 النماذج ________________________________ ___________________ 67 عنصر <form> ________________________________ _________________ 67 عنصر <input> ________________________________ _________________ 68 ( النص حقول Text Fields ) ________________________________ __________ 68 عنصر <label> ________________________________ _________________ 69 Radio Button ________________________________ __________________ 69 Checkboxes ________________________________ ___________________ 70 لـ االسم خاصية <input> ________________________________ ___________ 71 Action Attribute ________________________________ ________________ 71 Target Attribute ________________________________ ________________ 72 Canvas Graphics ________________________________ ____________ 73 هو ما HTML Canvas ؟ ________________________________ __________ 73 مستقيم خط رسم ________________________________ _________________ 74 دائرة رسم ________________________________ ____________________ 74 نص رسم ________________________________ _____________________ 75
- 5. +352681612038 أن .م س البيور 5 خطي تدرج رسم ________________________________ _________________ 75 هو ما SVG ؟ ________________________________ ________________ 76 دائرة رسم SVG ________________________________ _________________ 76 مستطيل رسم SVG ________________________________ ________________ 76 الزو ملتف مستطيل رسم ايا SVG ________________________________ _______ 77 المتعددة الوسائط ________________________________ _____________ 78 الفيديو Video ________________________________ __________________ 78 الصوت Audio ________________________________ _________________ 79 هو ما CSS ؟ ________________________________ _________________ 82 استخدام CSS ________________________________ ________________ 83 مضمنة (Inline CSS) CSS ________________________________ ____________ 83 CSS داخلي ( Internal CSS ) ________________________________ __________ 84 CSS خارج ي ( External CSS ) ________________________________ _________ 85 كتابة قواعد CSS ________________________________ ______________ 88 المحددات CSS ________________________________ _______________ 89 االسم محدد ________________________________ ____________________ 89 المعرف محدد id Selector ________________________________ __________ 89 الصف محدد class Selector ________________________________ _________ 89 العام المحدد CSS The CSS Universal Selector) ) ___________________________ 90 تجميع محدد CSS ( The CSS Grouping Selector ) ____________________________ 90 التعليقات CSS Comments ________________________________ ________ 91 ( الخط لون Text Color ) ________________________________ _________ 93 الخلفية ولون النص لون ________________________________ _________ 93 ( نص محاذاة CSS Text Alignment ) ________________________________ _ 93 النص اتجاه ________________________________ _________________ 94 (عمودي انحياز Vertical Alignment ) ________________________________ 94 نص زخرفة (CSS Text Decoration) ________________________________ _ 95 تح النص ويل ( CSS Text Transformation ) _____________________________ 95 ( نص تباعد CSS Text Spacing ) ________________________________ ____ 96
- 6. +352681612038 أن .م س البيور 6 ( األحرف تباعد Letter Spacing ) ________________________________ ___ 96 ارتف ( خط اع Line Height ) ________________________________ ________ 97 ( نص ظل CSS Text Shadow ) ________________________________ _____ 97 خط نمط (CSS Font Style) ________________________________ ________ 98 صندو نموذج ق CSS Box Model ________________________________ ___ 99 حدود CSS ( CSS border ) ________________________________ __________ 100 حشوة CSS ( CSS Padding ) ________________________________ ________ 101 هامش CSS ( CSS Margin ) ________________________________ _________ 101 إخفاء العناصر ________________________________ ______________ 102 أنواع عرض العناصر ________________________________ __________ 103 display: inline-block ________________________________ ___________ 103 التموضع خاصية position ________________________________ ______ 105 position: static ________________________________ _______________ 106 position: relative ________________________________ _____________ 106 position: absolute ________________________________ ____________ 107 position: fixed; ________________________________ ______________ 108 position: sticky ________________________________ ______________ 108 الطفو خاصية float and clear ________________________________ ____ 108 CSS ورأسية أفقية محاذاة ________________________________ _______ 111 النص توسيط ________________________________ _________________ 111 الصورة توسيط ________________________________ _______________ 111 ولليسار لليمين محاذاة - الموضع استخدام Using position ____________________ 112 The clearfix Hack ________________________________ _____________ 113 اًيعمود توسيط - (الحشو استخدام padding ) _____________________________ 113 اًيعمود توسيط - الخط ارتفاع استخدام Using line-height _____________________ 114 اًيعمود توسيط - استخدام position & transform __________________________ 115 اًيعمود توسيط - باستخدام Flexbox ________________________________ __ 115 العمودي التنقل شريط مثال ________________________________ ______ 116 االفقي التجوال شريط ________________________________ __________ 117
- 7. +352681612038 أن .م س البيور 7 )(النشط الحالي الرابط ________________________________ ___________ 118 الخلفيات ________________________________ __________________ 120 الخلفية لون (CSS background-color) ________________________________ _ 120 كخلفية صورة استخدم ________________________________ ___________ 120 خلفية تكرار CSS ________________________________ _______________ 121 الخلفية تموضع ________________________________ _______________ 122 ( المختصرة الخاصية background - Shorthand property ) ___________________ 122 الظل Box Shadow ________________________________ __________ 123 الحدود تدوير CSS3 border-radius ________________________________ _ 124 المرن الصندوق CSS3- Flexbox ________________________________ ___ 125 عناصر Flexbox ________________________________ _______________ 126 The flex-direction Property ________________________________ ______ 127 The flex-wrap Property ________________________________ _________ 128 The flex-flow Property ________________________________ _________ 129 The justify-content Property ________________________________ _____ 129 The align-items Property ________________________________ ________ 130 CSS Flex Responsive ________________________________ ___________ 130 مع ابدأ Bootstrap 4 : ________________________________ _________ 133 على تحصل أين من Bootstrap 4 ؟ ________________________________ _ 134 Bootstrap 4 CDN ________________________________ _____________ 134 تنزيل Bootstrap 4 ________________________________ _____________ 134 باستخدام ويب صفحة أول إنشاء Bootstrap 4 ____________________________ 134 Containers الحاويات ________________________________ _________ 136 ثابتة حاوية ________________________________ __________________ 136 : المرنة الحاوية ________________________________ _______________ 136 الحاوية حشو Padding ________________________________ __________ 136 حدود و الوان للحاوية ________________________________ ___________ 136 المتجاوبة الحاوية ________________________________ ______________ 137 في الشبكي النظام Bootstrap 4 ________________________________ ___ 138 صفوف الشبكة ________________________________ ________________ 138
- 8. +352681612038 أن .م س البيور 8 متساوية أعمدة ثالث عمل ________________________________ _________ 138 Bootstrap الفقرات/النصوص ________________________________ ____ 140 في األلوان Bootstrap ________________________________ _________ 141 النصوص الوان ________________________________ _______________ 141 الخلفية الوان ________________________________ _________________ 141 في الجداول Bootstrap ________________________________ ________ 142 الحدود ذات الجداول ________________________________ ____________ 142 بح االسطر تاثر المرور دث Hover ________________________________ ____ 143 المعتمة الجداول ________________________________ _______________ 143 المخططة الجداول ________________________________ ______________ 143 السيا ذات الصفوف ق ________________________________ ____________ 143 المتجاوبة الجداول ________________________________ ______________ 145 في الصور Bootstrap ________________________________ _________ 145 الزوايا منحنية ________________________________ ________________ 145 مستديرة زوايا ________________________________ ________________ 146 المصغرة الصورة Thumbnail ________________________________ ______ 146 ا الصورة لمتجاوبة ________________________________ ______________ 146 Bootstrap 4 Jumbotron ________________________________ _______ 147 التن رسائل بيه Alerts ________________________________ __________ 147 ازرار Bootstrap ________________________________ ____________ 149 حدود ذات أزرار ________________________________ _______________ 149 الزر حجم ________________________________ ___________________ 150 الزر تفعيل الغاء و تفعيل ________________________________ __________ 150 األزار مجموعات ________________________________ ______________ 151 العمودية األزرار مجموعة ________________________________ _________ 152 المنسدلة القائمة مع االزرار مجموعة تداخل _____________________________ 152 الشارات Bootstrap Badges ________________________________ _____ 153 السياقية الشارات ________________________________ ______________ 153 Pill Badges ________________________________ _________________ 154
- 9. +352681612038 أن .م س البيور 9 في التقدم شريط Bootstrap ________________________________ ______ 155 الصفحات ترقيم Pagination ________________________________ _____ 158 النشطة الصفحة ________________________________ _______________ 158 المعطلة الحالة ________________________________ ________________ 158 Pagination Sizing ________________________________ _____________ 159 القوائم مجموعات ________________________________ ____________ 160 روابط مع قائمة مجموعة ________________________________ _________ 161 عنصر تعطيل ________________________________ _________________ 161 االفقية القوائم مجموعات ________________________________ _______ 162 العالقة ذات الصفوف ________________________________ ____________ 162 م قوائم مجموعة اإلشارات ع Badges ________________________________ __ 163 او البطاقة الكارد Cards ________________________________ ________ 164 التذييل و الرأس ________________________________ _______________ 164 الممتد الرابط ________________________________ _________________ 166 وشاح عمل Overlays ________________________________ ___________ 166 االرتفاع المساوية البطاقات Card Deck ________________________________ 167 البطاقات مجموعة ________________________________ ______________ 168 المنسدلة القوائم Dropdowns ________________________________ ____ 169 المنسدل القائمة فاصل ________________________________ ___________ 169 القائمة رأس المنسدلة ________________________________ ___________ 170 العنصر تفعيل الغاء و تفعيل ________________________________ ________ 170 المنسدلة القائمة ضمن نص ________________________________ ________ 171 منسدلة قائمة مع االزرار مجموعة ________________________________ ___ 171 الطي Collapse ________________________________ _____________ 172 أكورديون Accordion ________________________________ ___________ 173 التجوال قائمة Navs ________________________________ __________ 174 التبويبات tabs ________________________________ ______________ 174 التجوال شريط Navigation ________________________________ ______ 175 Vertical Navbar ________________________________ ______________ 176
- 10. +352681612038 أن .م س البيور 10 Centered Navbar ________________________________ _____________ 176 Colored Navbar ________________________________ ______________ 177 Brand / Logo ________________________________ ________________ 178 Collapsing The Navigation Bar ________________________________ ____ 178 Navbar With Dropdown ________________________________ ________ 179 المثبت التجوال شريط ________________________________ ___________ 180 النماذج Forms ________________________________ _____________ 181 واحد سطر على النموذج ________________________________ __________ 182 النموذج تدقيق Validation ________________________________ ______ 183 االدخال حقول ________________________________ ________________ 185 االختيار أزرار Radio Buttons ________________________________ ______ 186 الحقول مجموعة Input Groups ________________________________ ___ 189 المجموعات حجم ________________________________ ______________ 189 Multiple Inputs and Helpers ________________________________ _____ 190 ضمن االزرار Input Group ________________________________ ________ 191 تسميات Input Group ________________________________ ___________ 191 مخصص اختيار حقل Checkbox ________________________________ _____ 192 مخصص تبديل مفتاح Switch ________________________________ ______ 192 مخصص وحيد اختيار حقل Radio buttons ______________________________ 192 المعرض Carousel ________________________________ ___________ 194 التلميح Tooltip ________________________________ _____________ 197 التلميح تموضع ________________________________ _______________ 197 المنبثقة نوافذ Modal ________________________________ _________ 198 انميشن إضافة animation ________________________________ ________ 199 حجم Modal ________________________________ _________________ 199 المنبثقة النافذة توسيط ________________________________ ___________ 199 Scrolling Modal ________________________________ ______________ 199 األدوات صفوف Utilities ________________________________ _______ 200 Borders ________________________________ ____________________ 200 Border Color ________________________________ ________________ 200
- 11. +352681612038 أن .م س البيور 11 Float and Clearfix ________________________________ _____________ 200 Shadows الظل ________________________________ ________________ 201 Vertical Align ________________________________ ________________ 201 Responsive Embeds ________________________________ ___________ 201 Visibility الرؤية ________________________________ _______________ 202 Position التموضع ________________________________ ______________ 202 Colors االلوان ________________________________ ________________ 203 Background Colors ________________________________ ____________ 203 Block Elements ________________________________ ______________ 204 Flex ________________________________ ______________________ 204 مقدمة ________________________________ ___________________ 206 لك سكربت جافا كود اول ________________________________ ________ 208 مل استخدام ف JavaScript خارجي ________________________________ __ 209 االحرف لحالة الحساسية Case Sensitive _____________________________ 210 التعليقات ________________________________ _________________ 210 المتغيرات ________________________________ _________________ 211 Variable hoisting ________________________________ ___________ 213 :البيانات انواع ________________________________ ______________ 214 المعامالت Operators ________________________________ _________ 215 الشرطية التعابير ________________________________ _____________ 217 القيم Falsy ________________________________ ________________ 219 المنبثقة الصناديق ________________________________ ____________ 220 الدوال functions ________________________________ ____________ 221 Function declarations ________________________________ __________ 221 Function expressions ________________________________ __________ 222 المعادة القيمة return ________________________________ ___________ 223 Arrow functions ________________________________ ______________ 223 rest parameter ________________________________ ______________ 223 التكرار حلقات ________________________________ ______________ 224
- 12. +352681612038 أن .م س البيور 12 الحلقة for ________________________________ ___________________ 224 الحلقة do...while ________________________________ ______________ 225 الحلقة while ________________________________ _________________ 225 الحلقة for...in ________________________________ ________________ 226 االستثناءات معالجة ________________________________ ___________ 227 String النصية السالسل ________________________________ ________ 228 Array المصفوفات ________________________________ ___________ 233 Math Object ________________________________ ______________ 235 DOM ________________________________ ___________________ 238 هو ما jQuery ؟ ________________________________ _____________ 247 تضمين jQuery ________________________________ _____________ 248 تنزيل jQuery ________________________________ ________________ 248 باستخدام تضمين CDN ________________________________ ___________ 248 الكتابة قواعد jQuery ________________________________ __________ 249 The Document Ready Event ________________________________ ____ 250 المحددات Selectors ________________________________ __________ 250 اسمه طريق عن عنصر تحديد ________________________________ ______ 251 المعرف طرق عن تحديد ________________________________ __________ 251 طرق عن تحديد الصف ________________________________ ___________ 252 الصف طرق عن تحديد ________________________________ ___________ 252 االحداث ________________________________ __________________ 254 بالحداث الخاصة المساعدة الدوال ________________________________ ____ 255 الطريقة on() ________________________________ _________________ 257 التاثيرات ________________________________ _________________ 258 االخفاء و االظهار ________________________________ ______________ 258 toggle() ________________________________ ____________________ 259 السحب Sliding ________________________________ _______________ 259 slideToggle ________________________________ _________________ 260 التالشي Fading ________________________________ ____________ 261
- 13. +352681612038 أن .م س البيور 13 Animation ________________________________ _______________ 261 نسبية قيم باستخدام التحريك ________________________________ _______ 262 التحريك او التأثير اقاف ________________________________ __________ 262 التسلسل Chaining ________________________________ __________ 263 مع التعامل classes ________________________________ ___________ 264 addClass() ________________________________ __________________ 264 removeClass() ________________________________ _______________ 265 toggleClass() ________________________________ ________________ 265 css() ________________________________ ______________________ 265 االجاكس AJAX ________________________________ _____________ 267 الطريقة load() ________________________________ ________________ 267 الدوال get() and post() ________________________________ __________ 268 الخصائص و بالمحتوى التحكم ________________________________ ____ 270 الوصول للمحتوى ________________________________ ______________ 270 الخصائص على الحصول ________________________________ _________ 270 عناصر إضافة ________________________________ ______________ 271 الطريقة append() ________________________________ ______________ 271 الطريقة prepend() ________________________________ _____________ 271 الطرائق after() and before() ________________________________ ______ 271 عنصر حذف ________________________________ _______________ 272 الطريقة remove() ________________________________ ______________ 272 الطريقة empty() ________________________________ ______________ 272 أو البيانات قاعدة Database ________________________________ _____ 274 ال لغة SQL ________________________________ ________________ 274 تثبيت MySQL ________________________________ ______________ 274 بيانات قاعدة إنشاء Database ________________________________ ____ 275 إنشا الجداول ء Tables ________________________________ _________ 276 ال داخل بيانات إضافة Tables ________________________________ ____ 277 االس الجداول داخل بيانات عن تعالم ________________________________ _ 278
- 14. +352681612038 أن .م س البيور 14 شروط وضع مع البيانات عن االستعالم ________________________________ _ 278 المنطقية العمليات ________________________________ ____________ 279 جملة order by ________________________________ _____________ 281 جملة Update ________________________________ ______________ 282 االجماليات دوال Aggregate ________________________________ _____ 283 جملة group by ________________________________ _______________ 285 الحسابية الدوال Mathematical ________________________________ ___ 286 مقدم ة ________________________________ ___________________ 289 مع ابدأ PHP ________________________________ _______________ 290 في كود اول PHP ________________________________ ____________ 290 التكو معلومات صفحة ين ________________________________ ________ 291 اللغة أساسيات ________________________________ ______________ 292 لحالة الحساسية األ حرف ________________________________ __________ 292 الجمل Statements ________________________________ _____________ 293 األسطر وفواصل البيضاء المسافة ________________________________ ____ 294 ال تعليقات ________________________________ ___________________ 294 المعرفات ________________________________ ___________________ 296 المتغيرات أسماء ________________________________ ______________ 296 الدوال أسماء ________________________________ _________________ 296 الفئات أسماء CLASS ________________________________ ____________ 297 Constants الثوابت ________________________________ _____________ 297 الرئيس الكلمات ية ________________________________ ______________ 297 الصحيحة االعداد ________________________________ ______________ 299 العشرية األرقام ________________________________ _______________ 299 النصية السالسل ________________________________ _______________ 300 منطقية قيمة ________________________________ _________________ 301 المصفوفات ________________________________ __________________ 302 . Objects ________________________________ ___________________ 303 الموارد أو المصادر ________________________________ _____________ 304
- 15. +352681612038 أن .م س البيور 15 االسترجاع Callbacks ________________________________ ___________ 305 NULL ________________________________ _____________________ 305 Variable Variables المتغيرة المتغيرات ________________________________ 308 المتغير نطاق ________________________________ _________________ 308 الدوال وسطاء ________________________________ ________________ 311 المعامل أسبقية ________________________________ ________________ 315 الضمني القصر Implicit Casting ________________________________ ____ 316 الحسابية العمليات ________________________________ ______________ 316 السلسلة دمج عامل ________________________________ _____________ 317 ال الزيادة عوامل تلقائية (++) التلقائي والتناقص (--) __________________________ 318 المقارنة عوامل ________________________________ _______________ 318 (??) Null coalescing operator ________________________________ _____ 320 ال المنطقية عمليات ________________________________ ______________ 321 Flow-Control Statements التدفق في التحكم جمل _______________________ 322 جملة if ________________________________ ____________________ 322 جملة elseif . ________________________________ _________________ 324 switch ________________________________ ____________________ 325 while ________________________________ _____________________ 326 :كمثال ________________________________ _____________________ 327 for ________________________________ _______________________ 328 foreach ________________________________ ____________________ 330 تضمين PHP الويب صفحات في ________________________________ ___ 334 الدوال ________________________________ ___________________ 335 الدالة استدعاء ________________________________ ________________ 335 الدالة تعريف ________________________________ _________________ 337 Variable Scope متغير نطاق ________________________________ _______ 339 العالمية او العامة المتغيرات ________________________________ _______ 340 الثابتة المتغيرات static ________________________________ __________ 341 الدالة وسطاء ________________________________ _______________ 342 الوسطاء تمرير بالقيمة ________________________________ ___________ 342
- 16. +352681612038 أن .م س البيور 16 المرجع حسب الوسطاء تمرير ________________________________ ______ 342 االفتراضية الوسطاء ________________________________ ____________ 343 المتغير وسطاء ________________________________ ________________ 345 تلميح كتابة ________________________________ __________________ 347 القيم إرجاع ________________________________ __________________ 347 مجهولة دوال ________________________________ _________________ 348 النصية السالسل ________________________________ _____________ 349 Variable Interpolation المتغير )(تفسير توسيع __________________________ 349 واحدة اقتباس عالمة ذات سالسل ________________________________ ____ 350 المزدوجة االقتباس بعالمة سالسل ________________________________ ____ 351 جم السالسل طباعة ل ________________________________ ____________ 352 echo ________________________________ ______________________ 352 print() ________________________________ _____________________ 353 printf() ________________________________ ____________________ 353 التنسيق معدالت FORMAT MODIFIERS ________________________________ 354 النوع محددات ________________________________ ________________ 355 var_dump() و print_r() ________________________________ _________ 358 البيضاء المسافة إزالة ________________________________ ___________ 360 : نصية سلسلة في االحرف الحالة تغيير ________________________________ 362 والهروب الترميز Encoding and Escaping ______________________________ 363 HTML ________________________________ _____________________ 363 بلغة محددة كيانات اقتباس HTML ________________________________ ____ 365 أوسمة إزالة ________________________________ _________________ 366 الوصفية األوسمة استخراج meta ________________________________ ____ 367 عناوين URL ________________________________ _________________ 368 SQL ________________________________ ____________________ 370 السالسل مقارنة ________________________________ _____________ 371 دقيقة مقارنات ________________________________ ________________ 371 التقريبية المساواة ________________________________ ______________ 372 والبحث التالعب السالسل في ________________________________ _____ 373
- 17. +352681612038 أن .م س البيور 17 Substrings الجزئية السالسل ________________________________ _______ 373 اخرى السالسل دوال ________________________________ ____________ 375 Decomposing a String سلسلة تحليل ________________________________ _ 377 EXPLODING AND IMPLODING ________________________________ ____ 377 السالسل في البحث دوال ________________________________ __________ 378 الب عمليات األماكن بإرجاع حث ________________________________ ______ 379 السلسلة بقية ترجع التي البحث عمليات ________________________________ 379 المواقع عناوين فك DECOMPOSING URLS ______________________________ 380 المصوفات ________________________________ ________________ 381 المترابطة المصفوفة و المفهرسة المصفوفات ____________________________ 381 المصفوفة عناصر تحديد ________________________________ __________ 382 المصفوفات في البيانات تخزين ________________________________ ______ 382 بمصفوفة القيم إلحاق ________________________________ ____________ 384 م نطاق تهيئة القيم ن ________________________________ ____________ 384 المصفوفة حجم على الحصول ________________________________ ______ 384 Padding an Array مصفوفة حشو ________________________________ ___ 385 األبعاد متعددة المصفوفات ________________________________ _______ 385 متعددة قيم استخراج ________________________________ ____________ 386 المصفوفة تشريح Slicing an Array ________________________________ ___ 387 أجزاء إلى المصفوفة تقسيم ________________________________ ________ 387 والقيم المفاتيح ________________________________ ________________ 388 عنصر وجود من التحقق ________________________________ __________ 389 وإدراج إزالة مصفوفة في العناصر ________________________________ ___ 389 والمتغيرات المصفوفات بين التحويل ________________________________ 391 مصفوفة من متغيرات تكوين ________________________________ _______ 391 الم عبور صفوفات ________________________________ ____________ 393 بناء جملة foreach ________________________________ _____________ 393 التكرار دوال ________________________________ _________________ 394 حلقة باستخدام for ________________________________ _____________ 395 المصفوفة اختزال ________________________________ ______________ 395
- 18. +352681612038 أن .م س البيور 18 القيم عن البحث ________________________________ _______________ 396 الفرز Sorting ________________________________ ________________ 398 المصفوفات عكس ________________________________ ______________ 398 العشوائية ترتيب ________________________________ _______________ 400 المصفوفة مجموع حساب ________________________________ _________ 400 أساسيات HTTP ________________________________ _____________ 402 المتغيرات ________________________________ ___________________ 404 النماذج معالجة ________________________________ ________________ 408 “Self-Processing Pages” الذاتية المعالجة صفحات _______________________ 410 “File Uploads” الملف تحميالت ________________________________ _____ 413 ” النموذج صحة من التحقق Form Validation “ _________________________ 416 االستجابة رؤوس تعيين ________________________________ ________ 420 Warning: Cannot add header information - headers already sent ____________ 421 المختلفة المحتويات أنواع Content Types ____________________________ 421 التوجيه إعادة عمليات Redirections ________________________________ 421 الصالحية انتهاء Expiration ________________________________ _____ 422 Authentication المصادقة ________________________________ ______ 423 الحالة على الحفاظ ________________________________ ____________ 424 ” اإلرتباط تعريف ملفات Cookies “ ________________________________ _ 426 “Sessions” الجلسات ________________________________ ____________ 430 “SESSION BASICS” الجلسة أساسيات ________________________________ _ 430 SSL ________________________________ _____________________ 434 البيانات قواعد ________________________________ ______________ 435 الع البيانات قواعد و الئقية SQL ________________________________ ____ 436 كائن واجهة MySQLi ________________________________ __________ 439 للعرض البيانات استرجاع ________________________________ _______ 440
- 19. +352681612038 أن .م س البيور 19 ِـه َّ الل ِ م ْ سِب ِ يم ِ حَّ الر ِ نٰـ َم ْ حَّ الر تكنولوجية طفرة العالم يعيش هائلة من نيت ر االنت شبكة تعد حيث أ عظم اال اعات ر خت ي ف تسهم ي ر الت الطفرة هذه حيث من إ و المعلومات تاحة سلس بشكل انتشارها مثل الخدمات من ر للكثت باإلضافة الناس تواصل البعض بعضهم مع بسهولة ر حت أ نقول صبحنا أ كوكبن الجميل األزرق نا أ صبح قري ة ة ر صغت . من الويب قطاع يعد أ بشكل تنمو ي ر الت الخدمات هم ع يرس وبشكل وتخلق فرص مستمر ة ر وممت ة ر كبتعمل . سيمدك الكتيب هذا عملية بمعلومات م وأكاديمية البدء من تمكنهم وع ر مش بناء بتجاه عملية بخطوات . ر ممت ويب من :أنا برمجيات هندسة تخصص معلوماتية هندسة ج خري البيور أنس من الويب واجهات تطوير ي ف دكريالنانو شهادة عىل حاصل Udacity ة ر خت 5 سنوات و مجيات ر الت مجال ي ف أ ويبتطوير فريق كقائدعمل Web Development Team Leader قمت وتحليل ببناء العديد الويب وتطبيقات ع مشاري من تدريب لدي كما عديدة ات مجال ي ف ال IT الصالحات تتم بنعمته الذي هلل الحمد
- 21. HTML أن .م س البيور 21 هو ما HTML ؟ HTML لاختصار Hyper Text Markup Language HTML الويب صفحات إلنشاء القياسية ر مت ر الت لغة ي ه يصف HTML الويب صفحة بنية بواسطة عناص HTML عناص ر تخت HTML المحتوى عرض بكيفية المتصفح عناص تقوم HTML "فقرة "هذه ، "عنوان "هذا مثل المحتوى من اءزأج بتسمية .إلخ ، "ارتباط "هذا ، مستند HTML بسيط مثال <!DOCTYPE html> <html> <head> <title>Page Title</title> </head> <body> <h1>My First Heading</h1> <p>My first paragraph.</p> </body> </html> المثال ح ر ش اإلعالن يحدد <!DOCTYPE html> مستند هو المستند هذا أن HTML5 عنرص < html> لصفحة الجذرالعنرصهو HTML العنرص يحتوي <head> صفحة حول وصفية معلومات عىل HTML العنرص يحدد < title> ل ا ً عنوان ل صفحة أو المتصفح عنوان يط ر رس ي فيظهر والذي ي ف وسم الصفحة تبويب
- 22. HTML أن .م س البيور 22 العنرص يحدد <body> المحتويات لجميع حاوية عن عبارة وهو ، المستند جسم ، والجداول ، التشعبية واالرتباطات ، والصور ، اتروالفق ، العناوين مثل ، المرئية .ذلك إىل وما ، والقوائم العنرص يحدد <h1> اً ر كبتا ً عنوان العنرص يحدد <p> فقرة متصفحات الويب من الغرض ( الويب متصفح Chrome و Edge و Firefox و ( Safari اءةرق هو مستندات HTML .صحيح بشكل وعرضها عالمات المستعرض يعرض ال HTML عرض كيفيةلتحديد يستخدمها ولكنه ، :المستند
- 23. HTML أن .م س البيور 23 في مقدمة HTML5 : HTML5 مع من واألحدث الخامس اإلصدارهو ا ي ر ت HTML يقدم ال جديدة ات ر مت ويب تطبيقات إلنشاء الدعم ا ً أيض تعزز بل ، فحسب الغنية للوسائط ا ًدعم توفر ر أكت وفعالية بسهولة والخوادم المحلية وبياناتهم ر المستخدمي مع التفاعل يمكنها .السابق ي ف ا ً ممكن كانمما HTML5 تدعم جديدة متعددة وسائط مثل والفيديو الصوت ي ف التحكم عناص باستخدام الوسوم <audio> و <video>. الرسومات ذلك ي ف بما جديدة رسومات عناص هناك الشعاعية لها ي ر الت الوسوم و معت ي دالىل <header> <footer> و <article> و <section> ( الشعاعية الرسوميات Vector ) الهندسية لألشكال وصف تستعمل رسومات ي ه مثل .الصور لتمثل للمنحنيات الرياضية والمعادالت والخطوط النقط إحداثيات ( النقطية الرسوميات عن تختلف بذلك ي وه bitmap ) البكسل عىل تعتمد ي ر الت المربعة النقط من بمصفوفة الصورة وتمثل ،الصورة ي ف عنرصكأصغر محتوى أن إىل لإلشارة HTML يستخدم بك الخاص HTML5 :استخدم ، <!DOCTYPE html>
- 24. HTML أن .م س البيور 24 باستخدام األحرف مجموعة عن ـحـــيالترص <meta charset> ي عنرص باستخدام ذلك تم <meta> <meta charset="UTF-8"> ضع ه بعد وسم <head> تحليل إعادة المتصفحات بعض تعيد حيث ، ً ة ر مبارس مستند HTML . اًحالي تستخدم ال كنتإذا ،ا ً أيض UTF-8 إليه بالتبديل تقوم أن المستحسن فمن ، المستندات ي ف األحرف مع التعامل يبسط ألنه ، بك الخاصة الويب صفحات ي ف .مختلفة نصية امجرب باستخدام عنصر هو ما HTML ؟ عنرص تعريف يتم HTML بواسطة وسم و المحتوى وبعض البداية وسم :النهاية <tagname> هنا يذهب المحتوى ... </tagname> عنرص HTML من ء ي ر ش كلهو وسم إىل البداية وسم :النهاية <h1> األول ي عنوان </ h1> <p> األوىل ي ر فقرن </ p> عناص بعض :مالحظة HTML عنرص (مثل محتوى لها ليس <br> هذه تسىم لها ليس الفارغة العناص .الفارغة بالعناص العناص وسم )!نهاية
- 25. HTML أن .م س البيور 25 صفحة هيكل HTML صفحة لهيكل تصور أدناه يوجد HTML: قسم داخل الموجود المحتوى عرض سيتم :مالحظة <body> البيضاء المنطقة عنرص داخل الموجود المحتوىسيظهر .المتصفح ي ف أعاله <title> يط ر رس ي ف ي ف أو المتصفح عنوان وسم .الصفحة تبويب
- 26. HTML أن .م س البيور 26 محرر االكواد كتابةيمكن HTML باستخدام Notepad أو TextEdit بسيط نصوص كمحرر تحرير امجرب باستخدام وتعديلها الويب صفحات إنشاء يمكن االكواد Code Editors . يمكنك استخدام أن أي محرر نصوص بسيط ننصح لكننا باستخدا م محرر االكواد Visual Studio Code الموقع ابطر وهذا المحرر هذا يللتت ي الرسىم https://code.visualstudio.com / باستخدام بك الخاصة األوىل الويب صفحة إلنشاء أدناه الخطوات اتبع • ملف انشأ جديد new file
- 27. HTML أن .م س البيور 27 الملف ضمن ي التاىل الكود اكتب <!DOCTYPE html> <html> <body> <h1>My First Heading</h1> <p>My first paragraph.</p> </body> </html> احفظ ملف صفحة HTML حدد .بك الخاصالكمبيوتر جهاز عىل الملف احفظ file > save قائمة ي ف المحرر . " الملف بتسمية قم index.html" . استخدام يمكنك htm . أو html .لك وك ر مت األمر ، فرق يوجد ال .للملف كملحق
- 28. HTML أن .م س البيور 28 ملف افتح HTML الملف عىل ا ً مزدوج اً نقر (انقر المفضل متصفحك ي ف المحفوظ األيمن الماوسبزر انقرأو ، - .)"باستخدام "فتح ر واخت ر كبتحد إىل هذا مثل النتيجةتبدو سوف HTML بسيط كود مستندات جميع تبدأ أن يجب HTML بإعال :المستند نوع ن <!DOCTYPE html>. مستند يبدأ HTML ب نفسه <html> ب ي وينته </html>. مستند من ي المرن الجزء يقع HTML ر بي < body> و </body> مثال <!DOCTYPE html> <html> <body> <h1>My First Heading</h1> <p>My first paragraph.</p> </body> </html>
- 29. HTML أن .م س البيور 29 إعالن <!DOCTYPE> إعالن يمثل <!DOCTYPE> عرض عىل المستعرضات ويساعد المستند ع نو صحيح بشكل الويب صفحات , الصفحة أعىل ي ف ، فقط واحدة مرة يظهر أن يجب عالمات أي قبل HTML وهو , ً حساسا ليس .األحرف لحالة إعالن <!DOCTYPE> ل HTML5 :هو <!DOCTYPE html> عناوين HTML عناوين تعريف يتم HTML بعالمات <h1> إىل <h6>. يحدد <h1> أهمية ر األكت العنوان يحدد <h6> :أهمية األقل العنوان <h1>This is heading 1</h1> <h2>This is heading 2</h2> <h3>This is heading 3</h3> اترفق HTML اترفق تعريف يتم HTML بال وسم < p> <p>This is a paragraph.</p> <p>This is another paragraph.</p> روابط HTML روابط تعريف يتم HTML ب وسم <a> <a href="https://www.example.com">This is a link</a> ي ف االرتباط وجهة تحديد يتم ال خاصية href ستخدم ُ ت الخواص عناص حول إضافية معلومات ر لتوفت HTML
- 30. HTML أن .م س البيور 30 صور HTML صور تعريف يتم HTML ب وسم <img> المصدر الملف ر توفت يتم (src) البديل والنص (alt) كواالرتفاع والعرض خواص <img src=" example.jpg" alt=" example.com" width="104" height="142"> عناصر HTML عنرص تعريف يتم HTML النهاية ووسم المحتوى وبعض البداية وسم بواسطة . عنرص HTML النهاية وسم إىل البداية وسم من ء ي ر ش كلهو : <tagname> هنا يذهب المحتوى ... </tagname> عناصر HTML ( المتداخلة Nested ) عناص تتداخل أن يمكن HTML عىل تحتوي أن يمكن العناص أن ي يعت وهذا .أخرى عناص مستندات جميع تتكون HTML عناص من HTML متداخلة . عناص أربعة عىل ي التاىل المثال يحتوي HTML <html> و <body> و <h1> و <p> : <!DOCTYPE html> <html> <body> <h1>My First Heading</h1> <p>My first paragraph.</p> </body> </html>
- 31. HTML أن .م س البيور 31 المثال ح ر ش عنرص <html> مستند ويحدد الجذرعنرص هو HTML بأكمله . بداية وسم عىل يحتوي <html> نهاية ووسم </ html>. عنرص داخل يوجد ثم <html> عنرص <body> العنرص يحدد <body> المستند جسم . بداية وسم عىل يحتوي <body> نهاية ووسم </ body>. عنرص داخل يوجد ثم <body> :انرآخ انرصعن <h1> و <p> العنرص يحدد <h1> العنوان . بداية وسم عىل يحتوي <h1> نهاية ووسم </h1>: العنرص يحدد <p> فقرة . البداية وسم عىل يحتوي <p> النهاية ووسم </p> ال تنىس النهاية وسم عناص بعض عرض سيتم HTML بشكل ،صحيح :النهاية وسم نسيت إذا ر حت عناص HTML فارغة عناص تسىم HTML الفارغة بالعناص محتوى عىل تحتوي ال ي ر الت . الوسم يحدد <br> إغالق وسم بدون غ فار عنرص ي وه ، أسطر فاصل <p>This is a <br> paragraph with a line break.</p>
- 32. HTML أن .م س البيور 32 عالمات HTML :األحرف لحالة حساسة ليست <P> وسم نفس ي تعت <p>. خواص HTML ( HTML Attributes ) خواصتوفر HTML عناص حول إضافية معلومات HTML. خواص HTML عناص جميع تحتوي أن يمكن HTML خواص عىل العناص حول إضافية معلومات الخواصتوفر البداية وسم ي ف ا ًدائم الخواص تحديد يتم "القيمة = االسم :مثل القيمة / االسم أزواج ي ف ً عادة الخواص ي ر تأن " الوسم يحدد <a> الخاصية تحدد .اًتشعبي ا ً ارتباط href عنوان URL ي ر الت للصفحة :االرتباط إليها ينتقل <a href="https://www.yazan mona.com">Visit yazan mona </a> خاصي المصدر ة src وسم ستخدم ُ ت <img> صفحة ي ف صورة ر لتضمي HTML الخاصية تحدد src :عرضها ادرالم الصورة إىلالمسار <img src="img_girl.jpg"> عنوان لتحديد طريقتان هناك URL خاصية ي ف src: 1 . URL مطلق - خارجية صورة إىل روابط مستضاف مثال .آخر ويب موقع عىل : src = "https://www.example.com/images/img_girl.jpg". 2 . عنوان URL ي ر النست - صورة إىل روابط مستضافة ال ، هنا .الموقع داخل عنوان يتضمن URL عنوان بدأ إذا .المجال اسم URL ، مائلة طة ر رس بدون مثال .الحالية بالصفحة ا ً مرتبط فسيكون : src = "img_girl.jpg". عنوان بدأ إذا URL مثال .بالمجال ا ً مرتبط فسيكون ، مائلة طة ر بش : src = "/ images / img_girl.jpg".
- 33. HTML أن .م س البيور 33 واالرتفاع العرض خواص يمكن أن ي وسم حتوي <img> تحدد ي ر والت ،واالرتفاع العرض خواص عىل ا ً أيض :)(بالبكسل وارتفاعها الصورة عرض <img src="img_girl.jpg" width="500" height="600"> خاصية البديل النص ( alt Attribute ) لوسم المطلوبة البديل النص خاصية تحدد <img> ، للصورة ً بديال ا ً نص تعذر إذا ي ف خطأ أو ، ء ي البط االتصال بسبب هذا يكون أن يمكن .ما لسبب الصورة عرض الخاصية src الشاشة قارئ يستخدم المستخدم كانإذاأو ، <img src="img_girl.jpg" alt="Girl with a jacket"> ( الستايل خاصية style Attribute ) عنرص إىل أنماط إلضافة النمط خاصية ستخدم ُ ت والحجم والخط اللون مثل ، .والمزيد <p style="color:red;">This is a red paragraph.</p> الخاصية lang ( lang Attribute ) خاصية ر تضمي ا ًدائم عليك يجب lang وسم داخل <html> لغة عن لإلعالن والمتصفحات البحث كات رمح مساعدة إىل يهدف هذا .الويب صفحة . المثال يحدد :كلغةية ر اإلنجلت اللغة ي التاىل <!DOCTYPE html> <html lang="en"> <body> ... </body> </html>
- 34. HTML أن .م س البيور 34 (العنوان خاصية title ) العنرص حول اإلضافية المعلومات بعض العنوان خاصية تحدد . :العنرص فوق الماوس تحريك عند أداة كتلميحالعنوان خاصية قيمة عرض سيتم <p title="I'm a tooltip">This is a paragraph.</p> في النصوص تنسيق HTML يحتوي HTML عناص عدة عىل إلعطاء خاص معت ل .لنص This text is bold This text is italic This issubscript and superscript تنسيق عناص HTML النص من خاصة أنواع لعرض التنسيق عناص تصميم تم : <b> - نص عريض <strong> - مهم نص <i> - مائل نص <em> - مؤكد نص <mark> - محدد نص <small> - أصغر نص <del> - محذوف نص <ins> - مدرج نص <sub> - منخفض نص <sup> - مرتفع نص
- 35. HTML أن .م س البيور 35 <b> and <strong> Elements عنرص يحدد <b> HTML .إضافية أهمية أي دون ، الغامق النص <b>This text is bold</b> <i> and <em> Elements عنرص يحدد HTML <i> مائل بخط ي الداخىل المحتوى عرض يتم النص من جزء . الوسم ستخدم ُ ت ما اًغالب <i> ، أخرى لغة من عبارة أو ، ي تقت مصطلح إىل لإلشارة ذلك إىل وما ، فكرة أو <i>This text is italic</i> <small> Element عنرص يحدد <small> :ا ًحجمأصغر ا ً نص <small>This is some smaller text.</small> <mark> Element عنرص يحدد <mark> HTML :ه ر تميت أو ه ر تميت يجب الذي النص <p>Do not forget to buy <mark>milk</mark> today.</p> <del> Element عنرص يحدد HTML <del> من حذفه تم الذي النص تضع ما عادة .المستند :المحذوف النص ر بي ا ً خط المتصفحات <p>My favorite color is <del>blue</del> red.</p> <ins> Element عنرص يحدد HTML <ins> تقوم ما عادة .المستند ي ف اجهرإد تم الذي النص :المدرج النص ر بتسطت المستعرضات <p>My favorite color is <del>blue</del> <ins>red</ins>.</p>
- 36. HTML أن .م س البيور 36 <sub> Element عنرص يحدد HTML <sub> بنصف المنخفض النصيظهر .المنخفض النص استخدام يمكن .أصغر بخط ا ً أحيان تقديمه ويتم ، العاديالسطر أسفل حرف مثل ، الكيميائية للصيغ المنخفض النص H2O: <p>This is <sub>subscripted</sub> text.</p> <sup> Element عنرص يحدد HTML <sup> حرف بنصف المرتفع النصيظهر .المرتفع النص النص استخدام يمكن .أصغر بخط ا ً أحيان تقديمه ويتم ، العاديالسطر فوق مثل ، السفلية ي ر للحواش المرتفع WWW [1]: <p>This is <sup>superscripted</sup> text.</p> األلوان تحديد يتم ألوان HTML بقيم أو ، ا ً مسبق محددة ألوان بأسماء RGB أو HEX أو HSL أو RGBA أو HSLA. األلوان أسماء ي ف HTML :اللون اسم باستخدام اللون تحديد يمكن ، (الخلفية لون Background Color ) لعناص الخلفية لون ضبط يمكنك HTML: <h1 style="background-color:DodgerBlue;">Hello World</h1> <p style="background-color:Tomato;">Lorem ipsum...</p>
- 37. HTML أن .م س البيور 37 (الخط لون Text Color ) :النص لون ضبط يمكنك <h1 style="color:Tomato;">Hello World</h1> <p style="color:DodgerBlue;">Lorem ipsum......................................</p> <p style="color:MediumSeaGreen;">Ut wisi enim...................................</p> ( الحدود لون Border Color ) الحدود لون ضبط يمكنك : <h1 style="border:2px solid Tomato;">Hello World</h1> <h1 style="border:2px solid DodgerBlue;">Hello World</h1> <h1 style="border:2px solid Violet;">Hello World</h1>
- 38. HTML أن .م س البيور 38 اللون قيم ي ف HTML قيم باستخدام األلوان تحديد ا ً أيض يمكن ، RGB وقيم HEX و قيم HSL وقيم RGBA وقيم HSLA. لعناص الخلفية لون ر تعيي تم <div> قيم مع التالية الثالثة RGB و HEX و HSL: <h1 style="background-color:rgb(255, 99, 71);">...</h1> <h1 style="background-color:#ff6347;">...</h1> <h1 style="background-color:hsl(9, 100%, 64%);">...</h1> <h1 style="background-color:rgba(255, 99, 71, 0.5);">...</h1> <h1 style="background-color:hsla(9, 100%, 64%, 0.5);">...</h1> صورة العنصر HTML وسم تستخدم HTML <img> ويب صفحة ي ف صورة ر لتضمي . <img src="pic_trulli.jpg" alt="Italian Trulli"> ر تنىس .الويب بصفحات مرتبطة الصور الويب صفحة ي ف اًتقني الصور اجرإد يتم ال وسم <img> إليها المشار للصورة تخزين مساحة . وسم <img> إغالق وسم عىل تحتوي وال ، فقط خواص عىل وتحتوي ، فارغة . الوسم تحتوي <img> ر مطلوبتي ر سمتي عىل : o src - الصورة إىل المسار تحدد o alt - ي للصورة ً بديًل ا ً نص حدد <img src="url" alt="alternatetext">
- 39. HTML أن .م س البيور 39 خاصية (The src Attribute) src خاصية تحدد src المسار المطلوبة (URL) للصورة . المتصفح ويب صفحة تحميل عند :مالحظة يحصل الذي هو ، اللحظة تلك ي ف ، الصورة بقاء من تأكد ، لذلك .الصفحة ي ف ويدرجها الويب خادم من الصورة عىل رمز عىل زوارك سيحصل وإال ، الويب صفحة إىل بالنسبة المكان نفس ي ف بالفعل المستعرض يتمكن لم إذا البديل والنص المعطل االرتباطرمز يظهر .معطل ارتباط العثور من .الصورة عىل <img src="img_chania.jpg" alt="Flowers in Chania"> خاصية alt ( The alt Attribute ) خاصيةتوفر alt ال ما لسبب المستخدم كانإذا ، للصورة ً بديال ا ً نص المطلوبة عرضها يمكنه الخاصية ي ف خطأ أو ، االتصال بطء بسبب src كانإذا أو ، ال قارئ يستخدم المستخدم شاشة . :الصورة البديل النص خاصية قيمة تصف أن يجب <img src="img_chania.jpg" alt="Flowers in Chania"> النص خاصية قيمة فسيعرض ، صورة عىل العثور من المستعرض يتمكن لم إذا :البديل الصورة حجم - (واالرتفاع العرض Image Size - Width and Height ) استخدام يمكنك .وارتفاعها الصورة عرض لتحديد النمط خاصية <img src="img_girl.jpg" alt="Girl in a jacket" style="width:500px;height:600px;" كرابط الصورة وسم ضع ، ابطركصورة الستخدام <img> وسم داخل <a> <a href="default.asp"> <img src="smiley.gif" alt="HTML tutorial" style="width:42px;height:42px;"> </a>
- 40. HTML أن .م س البيور 40 الجداول جداول تسمح HTML وأعمدة صفوف ي ف البيانات تيب ر بت الويب لمطوري . جدول تعريف HTML الوسم يحدد <table> جدول HTML. بوسم الجدول ي ف صف كلتعريف يتم <tr>. بوسم جدول أسر كلتعريف يتم <th>. يتم بوسم الجدول ي ف خلية / بيانات كلتعريف <td>. عناص ي ف الموجود النص يكون ، ي اض ر افت بشكل <th> ا ً ومتوسط ا ً غامق . < عناص ي ف الموجود النص يكون ، ي اض ر افت بشكل td> .اليسار إىل اًومحاذي اًعادي <table style="width:100%"> <tr> <th>Firstname</th> <th>Lastname</th> <th>Age</th> </tr> <tr> <td>Jill</td> <td>Smith</td> <td>50</td> </tr> <tr>
- 41. HTML أن .م س البيور 41 <td>Eve</td> <td>Jackson</td> <td>94</td> </tr> </table> جدول - ًادح أضف خاصية استخدم ، جدول إىل حد إلضافة CSS border table, th, td { border: 1px solid black; } جدول - خلية مساحة إضافة وحدودها الخلية محتوى ر بي المسافة الخلية مساحة تحدد . وكة ر مت مساحة بدون الجدول خاليا عرض فسيتم ،وكة ر مت مساحة تحدد لم إذا . خاصية استخدم ،وكة ر المت المساحة ر لتعيي CSS padding: th, td { padding: 15px; } جدول - اليسار إلى محاذاة عناوين وتتوسط غامقة الجدول عناوين تكون ، ي اض ر افت بشكل . خاصية استخدم ،اليسار إىل الجدول عناوين لمحاذاة text-align ي ف CSS: th { text-align: left; }
- 42. HTML أن .م س البيور 42 جدول - أعمدة عدة على تمتد خلية الخاصية استخدم ، واحد عمود من ر ألكت تمتد الخلية لجعل colspan: <table style="width:100%"> <tr> <th>Name</th> <th colspan="2">Telephone</th> </tr> <tr> <td>Bill Gates</td> <td>55577854</td> <td>55577855</td> </tr> </table> جدول - صفوف عدة على تمتد خلية الخاصية استخدم ، واحد صف من ر ألكت تمتد الخلية لجعل rowspan: <table style="width:100%"> <tr> <th>Name:</th> <td>Bill Gates</td> </tr> <tr> <th rowspan="2">Telephone:</th> <td>55577854</td> </tr> <tr> <td>55577855</td> </tr> </table>
- 43. HTML أن .م س البيور 43 جدول - توضيحية تسمية أضف وسم استخدم ، جدول إىل تعليق إلضافة <caption> : <table style="width:100%"> <caption>Monthly savings</caption> <tr> <th>Month</th> <th>Savings</th> </tr> <tr> <td>January</td> <td>$100</td> </tr> <tr> <td>February</td> <td>$50</td> </tr> </table> واحد لجدول خاص نمط خاصية أضف ، ر معي لجدول خاص نمط لتحديد id :الجدول إىل <table id="t01"> <tr> <th>Firstname</th> <th>Lastname</th> <th>Age</th> </tr> <tr> <td>Eve</td> <td>Jackson</td> <td>94</td> </tr> </table>
- 44. HTML أن .م س البيور 44 :الجدول لهذا خاص نمط تحديد اآلن يمكنك #t01 { width: 100%; background-color: #f1f1c1; } And add more styles: #t01 tr:nth-child(even) { background-color: #eee; } #t01 tr:nth-child(odd) { background-color: #fff; } #t01 th { color: white; background-color: black; }
- 45. HTML أن .م س البيور 45 القوائم قوائم تسمح HTML ي ف الصلة ذات العناص من مجموعة بتجميع الويب لمطوري .القوائم قائمة مرتبة غير ( Unordered List ) بوسم المرتبة ر غت القائمة تبدأ <ul>. بوسم بالقائمة عنرص كليبدأ <li>. :اًاضي ر افت )ة ر صغت سوداء (دوائر نقطية برموز القائمة عناص ر تميت سيتم <ul> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ul> مرتبة قائمة ( Ordered List ) بوسم المرتبة القائمة تبدأ <ol>. بوسم بالقائمة عنرص كليبدأ <li>. :اًاضي ر افت باألرقام القائمة عناص ر تميت سيتم <ol> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ol>
- 46. HTML أن .م س البيور 46 قوائم ال وصف يدعم HTML الوصف قوائم ا ً أيض . قائمة ي ه الوصف قائمة ،بالمصطلحات مصطلح لكل وصف مع . الوسم يحدد <dl> و ، الوصف قائمة الوسم يحدد <dt> ، )(االسم المصطلح الوسم وتصف <dd> :مصطلح كل <dl> <dt>Coffee</dt> <dd>- black hot drink</dd> <dt>Milk</dt> <dd>- white cold drink</dd> </dl>
- 47. HTML أن .م س البيور 47 ( السطرية العناصر inline الكتلة عناصر و ) (Block) عنرص يحتوي HTML العنرص نوع عىل ا ً اعتماد ، اضية ر افت عرض قيمة عىل ا ً جد . ومضمنة كتلة:العرض قيم من نوعان هناك . (الكتلة عناصر Block-level Elements ) مستوى عنرص يبدأ جديد سطر ي ف ا ًدائم الكتلة . ر واليمي اليسار إىل (يمتد المتاح الكامل العرض ا ًدائم الكتلة مستوى عنرص يشغل )اإلمكانبقدر . العنرص يحتوي ال بينما ، ي وسفىل علوي هامش عىل الكتلة مستوى عنرص يحتوي السطري inline .الهامش هذا عىل عنرص <div> هو .الكتلة مستوى عىلعنرص <div>Hello World</div> <nav> <noscript> <ol> <p> <pre> <section> <table> <tfoot> <ul> <video> <fieldset> <figcaption> <figure> <footer> <form> <h1>-<h6> <header> <hr> <li> <main> <address> <article> <aside> <blockquote> <canvas> <dd> <div> <dl> <dt> العناصر السطرية ( المضمنة ) ( Inline Elements ) العنرص يبدأ ال السطري inline جديدسطر ي ف . العنرص يأخذ السطري inline فقط ورةالرصبقدر ا ً عرض . عنرص هذا <span> .فقرة داخل <span>Hello World</span>
- 48. HTML أن .م س البيور 48 <script> <select> <small> <span> <strong> <sub> <sup> <textarea> <time> <tt> <var> <em> <i> <img> <input> <kbd> <label> <map> <object> <output> <q> <samp> <a> <abbr> <acronym> <b> <bdo> <big> <br> <button> <cite> <code> <dfn> العنرص يحتوي أن يمكن ال :مالحظة السطري inline مستوى عىلعنرص عىل !الكتلة عنصر <div> عنرص ستخدمُي ما اًغالب <div> لعناص كحاوية HTML األخرى . عنرص يحتوي ال <div> والمعرف والصف النمط لكن ، مطلوبة خواص عىل شائعان . مع استخدامه عند CSS ، عنرص استخدام يمكن <div> :المحتوى كتللتصميم <div style="background-color:black;color:white;padding:20px;"> <h2>London</h2> <p>London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.</p> </div>
- 49. HTML أن .م س البيور 49 العنصر <span> العنرص <span> من جزءأو نص من جزء ر مت ر لت ستخدم ُ ت مضمنة حاوية عن عبارة مستند . ال العنرص يحتوي <span> والمعرف والصف النمط ولكن ، مطلوبة خواص عىل شائعان . مع استخدامه عند CSS العنرص استخدام يمكن ، <span> من اءزأج لتصميم :النص <p>My mother has <span style="color:blue;font-weight:bold">blue</span> eyes and my father has <span style="color:darkolivegreen;font- weight:bold">dark green</span> eyes. </p> الصف خاصية أ الفئة و class لعناص يمكن HTML الصف نفس ي ف ك ر تشت أن المتعددة . ستخدم ُ ت ما اًغالب class Attribute إىل لإلشارة class name ي ف style sheet . بواسطة استخدامه ا ً أيض يمكن JavaScript ومعالجتها العناص إىل للوصول باستخدام class name ر معي .
- 50. HTML أن .م س البيور 50 عناص ثالثة لدينا ي التاىل المثال ي ف <div> بخاصية class بقيمة "city" سيتم عناص جميع تصميم <div> قسم ي ف المدينة نمط لتعريف ا ً وفق بالتساوي الثالثة ال :أسر <!DOCTYPE html> <html> <head> <style> .city { background-color: tomato; color: white; border: 2px solid black; margin: 20px; padding: 20px; } </style> </head> <body> <div class="city"> <h2>London</h2> <p>London is the capital of England.</p> </div> <div class="city"> <h2>Paris</h2> <p>Paris is the capital of France.</p> </div> <div class="city"> <h2>Tokyo</h2> <p>Tokyo is the capital of Japan.</p> </div> </body> </html>
- 51. HTML أن .م س البيور 51 ارصعن لدينا ي التاىل المثال ي ف <span> خاصية مع class بقيمة "note". سيتم ينرصالعن كالتصميم <span> قسم ي ف المالحظة نمط لتعريف ا ً وفق بالتساوي :أسرال <!DOCTYPE html> <html> <head> <style> .note { font-size: 120%; color: red; } </style> </head> <body> <h1>My <span class="note">Important</span> Heading</h1> <p>This is some <span class="note">important</span> text.</p> </body> </html> استخدام يمكن :مالحظة خاصية class عنرص أي ي ف HTML. ال اسم :مالحظة صف األحرف لحالة حساس !
- 52. HTML أن .م س البيور 52 الصف كتابة قواعد Class إلنشاء class , باسم ا ًمتبوع ، ).( نقطة حرف اكتب class حدد ، ذلك بعد . خصائص CSS :}{ المتعرجة األقواس داخل Create a class named "city": <!DOCTYPE html> <html> <head> <style> .city { background-color: tomato; color: white; padding: 10px; } </style> </head> <body> <h2 class="city">London</h2> <p>London is the capital of England.</p> <h2 class="city">Paris</h2> <p>Paris is the capital of France.</p> <h2 class="city">Tokyo</h2> <p>Tokyo is the capital of Japan.</p> </body> </html> متعدة صفوف Classes عناص ي تنتىم أن يمكن HTML من ر أكت إىل صف .واحدة المثال سبيل عىل ، بمسافة الفئات أسماء ر بي افصل ، متعددة فئات لتحديد <div class = "city main">. .المحددة الفئات لجميع ا ً وفق العنرص تصميم سيتم عنرص ي ينتىم ، ي التاىل المثال ي ف <h2> كإىل األول من ل صف إىل ا ً وأيض المدينة ال صف أنماط عىل وسيحصل ، الرئيسية CSS ر الفئتي كالمن