‫‪4‬‬

‫الف‬

‫مدخل الى تعلم تطوير وتصميم الويب بلغة‬

‫‪HTML‬‬

‫‪1‬‬
 ‫الفهرس‬

‫الفهرس ‪02 ...................................................... ......‬‬

‫عن الكتب ‪03 ..........................................................‬‬
‫‪04 ..............................‬‬ ‫مدخل الى لغة االتش تي ام ال )‪(HTML‬‬

‫مذا يلزمني النشاء صفحة ويب ‪04 ........................................‬‬

‫‪05 ....................................‬‬ ‫بنية ملف االتش تي ام ال )‪(HTML‬‬

‫الوسوم الرئيسيية في لغة االتش تي ام ال ‪06 .................................‬‬

‫وسم العنوان ‪07 ........................................................‬‬
‫من استخدامات وسم الرااس ‪08 ............................................‬‬
‫الوسم >‪ <h‬للتحكم في حجم الخط ‪09 ..................................... 1‬‬
‫الوسمين >‪<big‬و >‪ <small‬للتحكم في حجم الخط ‪09 ...................... 2‬‬
‫الوسم >‪<br‬لتحديد مهايات االسطر ‪12 ......................................‬‬
‫الوسم >‪ <p‬لتحديد الفقرات ‪13 ............................................‬‬
‫الخاصية ‪ Align‬لتحديد محاذات الكتابة ‪14 ...................................‬‬
‫الوسم >‪ <b‬لجعل الخط غليظ ‪15...........................................‬‬
‫الوسم >‪ <em‬و>‪ <i‬المالة الخط‪15.........................................‬‬
‫الوسم >‪ <u‬الضافة خط تحت النص ‪16 ..................................... .‬‬
‫الوسم ‪17 ......................................................... Font‬‬
‫الخاصية ‪ Size‬لتحديد حجم الخط ‪17 ........................................‬‬

‫‪2‬‬
 ‫الخاصية ‪ Color‬لتحديد لون الخط ‪18 ......................................‬‬
‫الخاصية ‪ Face‬لتحديد نوع الخط ‪21 .......................................‬‬
‫الخلفية ( لون ) ‪24 .....................................................‬‬
‫الخلفية ( صورة ) ‪25 ...................................................‬‬
‫الصورة كمحتوى ‪28.....................................................‬‬
‫الروابط ‪31.............................................................‬‬
‫الجداول ‪33 ............................................................‬‬
‫القوائم ‪37..............................................................‬‬
‫نصائح حول انشاء موقعك ‪40 .............................................‬‬

‫‪3‬‬
 ‫عن الكتاب‬
‫بسم هللا والصالة والسالم على رسول هللا اما بعد‬
‫نحن نعلم ان كثير منا يريد يطور نفسه من جهة البرمجة والتصميم وخاصتا بناء المواقع هذا‬
‫الكتاب الذي بين يدينا يحتاجه كل شخص يفكر او يريد تعلم تصميم وتطوير وبناء موقع ويب‬
‫حيث اذا اخذناه كقاعدة اساسية لالنطالق في هذا المشوار والذي هو بناء موقع الكتروني بمشئة‬
‫هللا له نفع كبير ‪ .‬وبالتالي هذه الكتاب يعالج اللغة االساسية في بناء و موقع ويب والتي ال تستطيع‬
‫بناء اي موقع ويب بدو نها وهي لغة تهتم بتوصيف مواقع والويب والخلل الحيد في هذه اللغة انها‬
‫ال نستطيع التحكم بسالسة من جهة التحكم في خصائص اجزاء الموقع بانفراد ولكن ال ولم ولن‬
‫تستطيع انشاء موقع ويب بدونها مهما كان ولكن يجب ادخالها في موقعك بصفة سائدة او قليلة‬

‫‪4‬‬
‫لغة االتش تي ام ال هي من اللغات المميزة في البرمجة الخاصة بصفحات الويب معا انها ليسة‬
‫لغة برمجة تطبيقات او برامج وال توجد صفحة ويب ال تحتوي على لغة االتش تي ام ال النها‬
‫هي اللغة الرئيسية في برمجة صفحات الويب وال تخلو منها اي صفحة منذ تاسيسها في ‪1990‬‬
‫من طرف تيم بيرنرزيلي ولق د حققة االتش تي ام ال نجاحا لم يكن يتوقعه تيم بيرنرزيلي‬
‫مميزاتها‬
‫لغة سهلة التعلم‬
‫ال تتعدا انها لغة انجليزية‬
‫ال فرق فيها بين الحروف الكبيرة والصغيرة في كتابة االكود‬
‫يمكن ادراج داخلها لغات اخرى في برمجة صفحات الويب‬
‫‪Javascript‬‬
‫‪Php‬‬
‫‪Css‬‬

‫مذا يلزمني النشاء صفحة ويب‬

‫ال تستلزم اي برنامج لصنع اكوادها‬
‫تحتاج فقط الى محرر نصوص كالمفكرة نوت باد التي تكون في اي نسخة من نسخ الويندوز‬
‫وان اردت برنامج مساعد فعليك‬
‫تحميل برنامج المفكرة ‪ ++‬نوت باد ‪++‬‬
‫او الفيجوال ستوديو كود‬
‫ويقدمون لك مساعدة تتمثل في محاولة تنبئ الكود الذي ستكتبة و تحديد اللغة‬
‫والكثير من االمتيازات‬
‫لترجمتها كمعضم اللغات البرمجية فال تحتاج اال الى متصفح وال تحتاج اي برنامج‬
‫مثل الفيرفوكس‬
‫الكروم‬
‫او انترنت اكسبلور‬
‫او االوبرا‬

‫‪5‬‬
 ‫او اي متصفح اخر‬
‫وتكتب لغة االتش تي ام ال على شكل اكواد من اللغة االنجليزية بين><‬
‫>يكتب الكود هنا<‬
‫ويشكالن معا وسم في لغة االتش تي ام ال واغلب االوسوم في لغة االتش تي ام ال لها وسم‬
‫اغالق وقد يكون لكل وسم خواص تخصه حيث تكتب الخاصية داخل وسم البدية ثم نتبعها ب =‬
‫وبعده مباشرة نضع عالمتي التنصيص " " وتكون على هذا الشكل في االلسفل‬

‫اما وسم االغالق فيكون كوسم البداية والكن يضاف له العالمة ‪ /‬في يسار الكود داخل الوسم‬
‫مثل‬

‫بنية ملف االتش تي ام ال‬

‫هو ملف نصي ولكن يكون بامتداد لغة االتش تي ام ال والذي هو‬
‫‪.html‬‬
‫وهي يحوي الكثير من والوسوم و االكواد اذا اردنا ان نبني ملف اتش تي ام ال فيجب علينا ان‬
‫نفتح طر مستند نصي في المفكرة باتباع هذه الطريقة نظغط يمين على الفارة في مكان فارغ ثم‬
‫نختار التقسيم جديد وبعدها نختار المفكرة ثم نفتح المفكرة ثم نذهب الى ملف‬
‫ثم نضغط حفض كـ او‬
‫) ‪( Save As‬‬
‫بعدها تظهر لنا مثل هذه العلبة الحوارية‬

‫‪6‬‬
 ‫الوسوم الرئيسية في لغة االتش تي ام ال‬
‫هو الوسم‬
‫>‪<html‬‬
‫وهو الوسم الرئيسي فلواله لن تكون صفحة الويب‬
‫وهو من الوسوم التي تحتوي وسم اغالق‬
‫ويكون هكذا‬
‫>‪</html‬هنا تكون كل مكونا صفحة الويب >‪<html‬‬
‫اما الوسم الثاني فهو وسم الذي يخص راس الصفحة و الذي يخص الشريط االعلوي للمتصفح اين‬
‫يضهر عنوان الصفحة‬
‫وهو الوسم‬
‫>‪<head‬‬
‫ووسم اغالقه هو‬
‫>‪</head‬‬
‫اما الوسم الثالث فهو الذي يخص الصفحة وما سيراه المتابع لصفحتك‬
‫>‪<body‬‬
‫ووسم اغالقه هو‬
‫>‪</body‬‬
‫في االسفل صورة توضح كيفية كتابة الوسوم االساسية في لغة االتش تي ام ال‬

‫‪7‬‬
‫ولكن اذا كتبنا ما هو موضح في هذه الصورة ولم نكتب اوسمة المحتوى فال نعتبر اننا فعلنا اي‬
‫شئ‬
‫وسم عنوان الصفحة‬
‫اول شيء نحدد اسم الصفحة وهذا يكون عبر وضع الوسم‬
‫>‪<title‬‬
‫ووسم اغالقه‬
‫>‪</title‬‬
‫بين الوسمين‬
‫>‪<head> </head‬‬
‫والذان يمثالن وسم الراس كما قلن سابقا‬
‫ولكن قد تتسائلون اي نضع عنوان الصفحة‬
‫نضع عنوان الصفحة بين الوسمين‬
‫>‪</title‬هنا يوضع العنوان >‪<title‬‬
‫كما هو موضح في االسفل‬

‫‪8‬‬
 ‫انظرو في االسفل مذا نتج لما حفضنا الملف بصيغة ‪ Html‬وفتحناه على المتصف‬

‫نتج لنا صفحة اتش تي ام ال فارغة بعنوان‬

‫منصف تك – ‪moncef tech‬‬
‫مالحظة بعد كل عملية تعديدل في ملف االتش تي ام ال يجب علينا حفض الملف‬
‫من استخدامات وسم الراس‬
‫من استخدامات الوسمين‬
‫>‪<head> </head‬‬
‫هو ارشفة صفحتك او موقعك وايجادها عند البحث في المتصفحات بمحركات البحث مثل‬
‫‪Google‬‬
‫‪Yahoo‬‬

‫‪9‬‬
 ‫او حجز واالحتفاض بالكلمات المفتاحية للموقع والتي تستخدم في البحث عن الموقع‬
‫وهناك استخدام شائع مكان وضع روابط الملفات التي تستحق استضافة كملفات الجافاسكربت‬
‫والستايالت والجكوري‬
‫وضع شعار الموقع‬
‫االن انتهينا من اوسمة الراس‬
‫اما االن سنتطرق الى اوسمة الجسم او الصفحة او ما سيراه االزائر على صفحنك من نصنوص‬
‫وصور وجداول‬
‫من اوسمة المحتوى والتي تكون محصورة بين الوسمين‬
‫>‪</body‬هنا توضع اوسمة المحتوى >‪<body‬‬
‫من اوسمة المحتوى ما يلي‬
‫الوسم >‪<h‬‬
‫اولها الوسم >‪<h‬‬
‫وهو وسم تحديد حجم الخط عند الكتابة وهو من الخاصيات االساسية في تحديد سمك الخط وله‬
‫خصائص اخرى سنتطرث فلها في الجزئ الثاني من هذا الكتاب‬
‫>*‪<h‬‬
‫ووسم اغالقه‬
‫>*‪</h‬‬
‫مالحظ ة يجب تبديل الرمز * برقم من ال ‪ 1‬الى الرقم ‪ 6‬صعودا لتحديد مستوى سمك خط الكتابة‬
‫وكلما صعدنا من ‪ 1‬الى ‪ 6‬انخفض مستوى سمك الخط كما هو موضح في المثال التالي‬

‫‪10‬‬
‫عندما ترجمنا االوسمة التي في االعلى على متصفح بايدو براوزر نتج لنا الصورة في االسفل‬

‫الوسمين >‪ <big‬و >‪<small‬‬

‫وهناك وسم اخر لتحكم في حجم الخط بالتصغير او التكبير اال وهو وضع العبارة المراد التحكم‬
‫في حجمها بين الوسم‬
‫>‪</big‬‬ ‫>‪ <big‬ووسم اغالقه‬

‫‪11‬‬
‫لتكبير العبارة ما علينا اال وضع الوسم ووسم اغالقه اكثر من مرة على حسب ما نريد ان يكون‬
‫حجم العبارة كما حيث تكون العبارة المراد التحكم فيها بين وسم البداية واالفالقهو موضح في‬
‫الصورة في االسفل‬

‫اما الوسم االخر هو وسم يعمل عكس الوسم االول وهو تصغير العبارة‬
‫وهناك وسم اخر اخر للتحكم في حجم الخط بالتصغير وهو الوسم‬
‫>‪ <small‬ووسم اغالقه >‪</small‬‬
‫وهو يعمل بنفس طريقة عمل وسم تكبير الحجم ومعناه باالنجليزية هو صغير‬
‫انضر الى هذا الكود في االسفل‬

‫‪12‬‬
 ‫هذا الك ود حددنا فيه عبارة وحصرناها بوسم التصغير مرتين واغلقماه بوسم االغالق مرتين‬

‫الوسم >‪<br‬‬
‫وهذا الوسم وسم بدون وسم اغالق وعمله هو تحديد نهاية االسطر او الفقرات اي كل نص اين‬
‫ينتهي حيث في مكان وضعه ننتقل لسطر جديد في صفحة االتش تي ام ال‬
‫وكما سترون الصورة القادمة الثالث سطور تحت بعضها البعض وعندما سنترجمها على‬
‫المتصفح فهل يا ترى ستظهر لنا كل سطر على حدى ام مذا سنرى‬
‫هذه الصورة لنصوص دون وسم تحديد االسطر‬

‫عندما قمنا بترجمتها على المتصفح ظهرت لنا كما ترون في االسفل‬

‫‪13‬‬
 ‫كما ترون فاالسطر كلها مع بعضها البعض االن سنطبق الوسم‬
‫>‪<br‬‬
‫لتحديد نهايات االسطر كما ترون في االسفل‬

‫انظرو الى النتيجة في االسفل‬

‫وكما ترون في االعلى فان االكود يعمل على تحديد نهاية كل سطر في المكان الذي تم وضعه فيه‬
‫داخل كود االتش تي ام ال‬
‫الوسم >‪<p‬‬
‫اما االن فسنعرف وسم تحديد الفقرات‬
‫>‪<p‬ووسم اغالقه >‪</p‬‬

‫‪14‬‬
 ‫هو وسم شبيه بالوسم السابق ولكنه فيه خواص نستطيع تحديدها داخل وسم البداية‬
‫هو لديه خاصية واحدة معتمدة كثيرا وهي تحديد مكان الفقرة اي في االعلى ي االسفل او اليسار‬
‫او اليمين‪.....‬‬
‫الخاصية ‪Align‬‬
‫فلتحديد مكان العبارة يجب وضعع الخاصية‬
‫‪Align‬‬
‫وبعدها تحديد القيمة والتي هي مكان تواجد الفرة في‬
‫وقيم االماكن طبعا باللغة االنجليزية‬
‫لليمين ‪Right :‬‬
‫اليسار ‪Left :‬‬
‫للوسط ( المنتصف ) ‪Conter :‬‬
‫اما االن بعد تعرفنا على القيم سنطبقها على عبارات نصية‬
‫انضر الى الكود التالي‬

‫بعد ترجمتنا للكود على التصفح ضهرة لنا النتيجة التالية‬

‫اما الوسم الذي سنتطرق له هو وسم جعل الخط غليظ اي حجمه واضح وهو الوسم‬

‫‪15‬‬
 ‫الوسم >‪<b‬‬
‫>‪ </b‬ووسم اغالقه >‪<b‬‬
‫حيث يعمل الوسم وياثر على ما يكون بين الوسم ووسم االغالق‬
‫ما ترون في الصورة التالية والتي توضح عبارات طبقنا عليها الكود‬
‫هكذا يكون الكود‬

‫وبعد تطبيقها في المتصفح ضهرة لنا النتيجة هذه‬

‫اما الوسم التلي والذي سيعطينا خاصية امالة الخط غبر الوسم‬
‫الوسم >‪<em‬و >‪<i‬‬
‫>‪ <i‬ووسم اغالقه >‪</i‬‬
‫او الوسم‬
‫>‪ <em‬ووسم اغالقه >‪</em‬‬
‫حيث نضع العبارة التي نريد امالتها بين الوسم ووسم اغالقه ولك االختيا الوسم االول ام الثاني‬
‫بعد كتابتنا للكود مثل هذا سنطبق ونرى النتيجة‬

‫‪16‬‬
 ‫وهاهي النتيجة في االسفل‬

‫وكما ترون ان كلمة الجزائر التي احطنا بها بالوسم‬

‫>‪ <em‬ووسم اغالقه >‪</em‬‬
‫تمت امالة الخط الذي تمت كتابته بها وبما انا قلنا ان الوسم‬
‫>‪<i‬‬
‫فان الكلمة ارض التي احطنا ها به وبوسم اغالقه قد تم تطبيق نفس الخاصية امالة الخط‬
‫الوسم >‪<u‬‬
‫اما االن فسنستعرض الوسم‬
‫>‪ <u‬ووسم اغالقه >‪</u‬‬
‫وهذا الوسم هو لجعل خط تحت العبارة المحصورة بين هذا الوسم وسم اغالقه‬
‫انظر الى هذا الكود كتبنا فيه انه سيترجم لنا على المتصفح العبارة وتحتها خط‬

‫‪17‬‬
 ‫فنتج لنا ماهو موضح في االسفل‬

‫الوسم ‪Font‬‬
‫الوسم فونت هو وسم يمكنك به التحكم في خصائص الخط بوسم واحد مع وسم اغالقه حيث‬
‫تتحكم في الكثير من خصائص الخط بادراجها داخله اي بين الوسم الرئيسي ووسم االغالق‬
‫ويتحكم هذا الوسم في الكثير من الخصائص منها الون والحجم و نوع خط الكتابة ( شكل خط‬
‫الكتابة )‬
‫ويكون الوسم على هذه الناحية‬

‫وكما رايتم في الصورة في االعللى فان العبار التي نريد التحكم في خصائصها تكون بين الوسم‬
‫االغلق وسم البداية‬
‫اي ان الوسمين‬
‫>‪</font‬هنا تكون العبارة > ‪<font‬‬
‫توضع الخصائص داخل الوسم االو ل وسم البداية متبوعة تاثير الخاصية او مدى عملها كا هو‬
‫موضح في الصورة‬

‫حيث ان الرقم ‪ 1‬هو الخاصية و الرقم ‪ 2‬هو قيمة الخاصية‬

‫من بين خصائص الوسم فونت >‪<font‬‬

‫الخاصية ‪Size‬‬
‫االن سنطبق خاصية الحجم على احد العبارات وكما قلنا فان الحجم قد سبق وشرحنا كيفية التحم‬
‫فيه وهذه طريقة ثالثة‬

‫‪18‬‬
 ‫نطبق ما قلنا نكتب العبارة ثم نحصرها بوسم‬
‫>‪ <font‬ووسم اغالقه > ‪</font‬‬
‫انظرو الى الصورة في االسفل‬
‫سنوضح فيها ‪ 7‬قيم‬

‫انظرو االن ماذا نتج لنا عند ترجمة الكود في االعلى على المتصفح‬

‫الخاصية ‪Color‬‬
‫اما الخاصية التالية فهي خاصية تحكم في لون الخط ‪Color‬‬
‫هو يوضع كما يوضع وسن الحجم ولكن نبدل وسم الحجم ‪size‬‬
‫بالوسم ‪Color‬‬
‫وتغيير القيمة من االرقام الى اسماء االوان باالنجليزية‬
‫مثل‬
‫االسود ‪Black :‬‬
‫االخضر ‪Green :‬‬

‫‪19‬‬
 ‫االحمر ‪Red :‬‬
‫او كما هو موضح في الجدول التالي‬
‫مثال اذا اردنا تغيير لو ن عبارة ما نطبق كما هو موضح في الصورة وكما قلنا سابقا‬

‫كما ترون قد اخت رنا الخاصية الى اللون وبدلنا القيم بااللون فالعبارة االولى وضعنا لها القيمة‬
‫للون االحمر ‪Red :‬‬
‫العبارةالثانية وضعنا لها القيمة للون االخضر‪green :‬‬
‫والعبارة الثالثة وضعنا لها القيم للون االصفر ‪Yellow :‬‬
‫والعبارة الرابعة الرابع وضعنا لها القيمة للون االسود ‪Black :‬‬
‫وعند ترجمتنا لصفحة الويب تج لنا كا و موضح في االلسفل‬

‫وكما ترو ن فكل عبارة اتخذة اللون الذي حددنا في الخاصية‬

‫ونستطيع تغيير اي لون من االوان مكان االلوان التي كتبتها سابقا‬
‫ونستطيع تغيير اسماء االلوان شيفرات ( رموز اللوان ) تعبر عن تدرجاتا وهي تتيح النها‬
‫عشرات أالف االلون من التدرجات اللونية و للعلم هي الطريقة االمستخدمة بنسبة‪ 99‬بالمائة النها‬
‫هناك متصفحات ال تترجم االوان المكتوبة حرفيا والدراج الون في الصفحة في هذه‬

‫‪20‬‬
 ‫ثم يكتب شيفرة اللون او اي يكون الرمز ‪ #‬يسار الشيفرة او رمز اللون كما هو موضح‬
‫الطريقة يجب ان يكتب الرمز ‪#‬رمزه‬
‫في االسفل‬

‫كما ترون فيان الرقم ‪ 1‬و الرمز ‪ #‬والرقم ‪ 2‬هو شيفيرة‬

‫حيث يجب ان يكونا متالسقين‬
‫والشيفرة اللونية كما قلنا هي مزج لثالث الوان و هي تكون على النحو التالي‬

‫حيث ان الرقمين المحاطين باالحمر المميزين بالرقم ‪ 1‬هما حدة اللون االحمر في الشيفرة اللونية‬
‫و الرقمين المحاطين باالخضر المميزين بالرقم ‪ 2‬هما حدة اللون االخضر في الشيفرة والرقمين‬
‫المحاطين باالزرق المميزين بالرقم ‪ 3‬هما حدة اللون االزرق في الشيفرة‬
‫ومن الميزات التي جعلتها اكثر استخداما انك تستطيع دمج الثالث الوان االساسية االحمر‬
‫واالخضر واالزرق لتشكيل لون جديد وهذه االلوان ال يستطيع كتاب مثل هذا احتوائها كلها النها‬
‫تتشكل ن قائمة كبيرة جدا سنذكر االساسية منها فقط‬
‫االسود ‪#000 :‬‬
‫االبيض ‪#fff :‬‬
‫االحمر ‪#ff0000 :‬‬
‫االخضر الفاتح ‪#1ef01e :‬‬
‫االزرق الفاتح ‪#20ffff :‬‬
‫وهناك الكثير من المواقع تتيح تشكيل شيفرات االلوان بنفسك‬
‫او يمكنكم االستعانة بهذا البرنامج النشاء اللوان حسب ماتريدون وحجمه ال يتعدى ‪ 100‬كيلوبايت‬
‫اعني صغير جدا‬

‫‪21‬‬
 ‫اسم البرنامج هو ‪)color cop ( :‬‬
‫االن سنجرب شيفرات لونية لكية نراها كيف تعمل‬
‫انظرو الى الك ود التالي هوي يعطينا ثالث جمل كل حملة بلون محدد‬

‫وعندما ترجمناه على المتصفح نتج لنا كما في االسفل‬

‫اما الخاصية الثالثة التي سنتطرق له هو وسم تحديد نوع الخطوط الخطوط العربية واالنجليزية‬
‫او مظهر الخط‬
‫الخاصية ‪Face‬‬

‫‪22‬‬
 ‫و هي الخاصية ‪ Face‬في الوسم ‪Font‬‬
‫تكتب خاصية مظهر الخط بكلمة ‪ Face‬وتاخذ القيمة التي نريد ان يكون نوع الخط مكتوب‬
‫بها‬
‫للحصول على انواع الخطوط تسطيعون الحصول عليها ببالبحث في شبكة االنترنت او بطريقة‬
‫سهلة تجدونها في محررات النصوص مثل المايكروسوف ورد او البريوينت او الناوتباد ‪.... ++‬‬
‫مثال هذه الصورة توضح كيفية الحصول على خطوط للغة العربية او االنجليزية او اسي لغة‬
‫اخرى من مرر النصوص مايكروسوفت ورد للصحول على مظاهر الخطوط نتبع الترقيم ما هو‬
‫موضح في السفل‬

‫من هنا نستطيع اختيار نوع الخطوط حسب الحاجة‬

‫ما علينا الى ان نختار الخط ثم ننسخه‬

‫واذا اردنا تحديد خط عربي او انجليزي في صفحة‬

‫االتش تش ام ال بعد حصولنا على الخط ما علينا اال‬
‫ان نطبق ماهو موضح في االسفل‬
‫في صفحة االتش تي ام ال توضع خاصية الخط‬
‫كم هو موضح في االسفل‬

‫‪23‬‬
 ‫اما‬
‫االن سنطبقها على صفحة االتش تي ام ال‬
‫انظر الى هذا الكود وكيف ستكون النتيجة بعد الترجمة على المتصفح‬

‫بعد ترجمتها على المتصفح انظر مذا تج لنا‬

‫كما ترون فان السطر اال ول في الصفحة هو الخط الشبيه باالفتراضي حيث اعطيناه القيمة‬
‫‪Arial‬‬
‫والسطر الثاني هو خط عربي مزخرف حيث اعطيناه القيمة ‪Aldhabi‬‬
‫اما عن السطر الثالث فهو خط انجليزي جميل اعطيناه القيمة‪Bauhaus 93‬‬
‫و كما ترون في الصورة فهناك فرق بين الخط الشبيه باالفتراضي والخط الذي قد اعطيناه قيمة‬
‫جديدة‬
‫على عبارة واحدة‬
‫ام االن فسنطبق كل ما تعلمناه من خواص الوسم ‪Font‬‬
‫انضرو الى الكود‬

‫‪24‬‬
‫حيث كتبناه ليترجم لنا عبارة " الجزائر بلدي ارض المليون ونصف المليون شهيد" و اعطيناه في‬
‫الحجم القيمة رقم ‪ 5‬وفي اللون القيمة‬
‫‪ #00b0f0‬للون االزرق الفاتح‬
‫للخط العربي الجميل المزخرف‬
‫ومضهر الخط اعطينا القيمة ‪Aldhabi‬‬
‫فنتج لنا في صفحة الويب كما هو موضح في االسفل‬

‫الخلفية ( لون )‬
‫اما االن فسنعرف كيفية تحديد خلفية لصفحة الويب‬
‫هناك طريقتان لتحديد الخلفية الطريقة االولى عبر تحديد لون كخلفية للصفحة او صورة تريد‬
‫تحديدها كخلفية‬
‫الطريقةاالولى تحديد لون كخلفية‬
‫هي عبر كتابة الخاصية ‪ bgcolor‬ثم نتبعها بقيمة الخاصية اياللون او الشيفرة اللونية‬
‫التي سبق وشرحناها‬
‫االن سنطبق الخاصية حيث سنجعل خلفية الصفحة ملوة باللون االزرق السماوي الموضح في‬
‫االسفل‬

‫‪#00b0f0‬‬

‫‪25‬‬
 ‫هذا هو الكود الذي سنترجمه في المتصفح لكي نرى لون الخلفية‬

‫وهذا ما نتج لنا بعد ترجمته على المتصفح‬

‫الخلفية ( صورة )‬
‫اما االن سنتعرف على الطرية الثانية لظبط الخلفية باضافة صورة كخلفية للصفحة‬
‫اوال يجب ان يكون لدينا الصورة ولتسهيل اض افتها نضعها في نفس الملف منع الملف‬
‫‪Html‬‬
‫مثل مهو موضح في االسفل‬

‫‪26‬‬
 ‫وهذا هو ملف‬ ‫هذه هي الصورة‬
‫االتش تي ام‬
‫ال الذي نعمل‬
‫عليه‬

‫اما االن بعد تجهيزنا لصورة وملف االتش تي ام ال وضع الصورة مع الملف اتش تي ام ال‬
‫نذهب نكتب لكود لنجعلها كخلفية لصفحة الويب خاصتنا‬
‫حيث نحدد الخلفية بالوسم ‪ Background‬ونعطيه القيمة التي هي اسم الصورة متبوعة‬
‫باالمتداد كماهو موضح ي الكود التالي‬

‫يوضح الكود الخاصية ‪ Background‬بالقيمة التي هي اسم الصورة الشار اليه‬

‫بالرقم ‪ 1‬واالمتداد ‪.png‬المشار اليه بالرقم ‪2‬‬
‫ولمن ال يعرف استخراح امتداد الملفات الو الصور فستوضح الطريقة بالصورة‬
‫كما في االسفل نضغط باليمين على الملف ثم نفعل ماهو في االسفل‬

‫‪27‬‬
 ‫اما االن سنترجم الكود على المتصفح ونرى النتيجة‬

‫وكما ترون فان اصورة اصبحت خلفية لصفحتي في االش تي ام ال‬

‫وبنفس الطريقة تستطيعون تغيير الصورة‬

‫‪28‬‬
‫مالحظة ( الصورة ادا كانت صغيرة قد يتم اضافتها كخلفية اكثر من مرة النها ال تستطيع تغطية‬
‫المساحة الالزمة اي انها ستتكرر لتغطية الفراغ )‬
‫الوسم ‪img‬‬
‫الصور‬
‫اما الن سنعرف طريقة اضافة صورة الى صفحة الويب محتوى وليس كخلفية‬
‫‪img‬‬ ‫يكون هذا عبر الوسم‬
‫واعطائه الخاصية ‪ Src‬وهذه الخاصية هي من الخصاص االساسية في استدعاء اللملفات‬
‫حيث تكون القيمة في هذه الخاصية هي الصورة متبوعة بامتدادها‬
‫انظر للكود التالي‬

‫اذا اردنا شرح الكود فاننا كتبنا الوسم ‪ Img‬واعطيناه الخاصية ‪ Src‬التي نحدد بها‬
‫الصورة التي سنستدعيها للظهور في صفحة االتش تي ام ال حيث ستكون قيمة الخاصية هي اسم‬
‫وامتداد الصورة بين الرمزين " "=‬
‫وذا ما نتجل لنا بعد ترجمة الكود في االعلى‬

‫مالحظة يجب ان تكون الصورة التي سنستدعيها مع ملف االتش تي ام ال في نفس الملف لكي‬
‫نستطيع استدعائها او اضافة مسار توجدها في الحاسوب قبل اسمها وامتدادها اذا اردنا استدعائه‬

‫‪29‬‬
‫من ملف اخر والطرية الصحيحة هي ان يكون في ملف واحد او تخصيص ملف واحد واضافة‬
‫ملف داخله خاص بالصور واخر خاص بالجافا سربت واخر بالستايل واخر لملف االتش تي ام‬
‫ال النك اذا اردت رفع الملفات على استضافة مجانية او مدفوعة يجب ان تكون جميع الملفات‬
‫مرفوعة حسب التنسيق والملفات التي استدعيتها منها اي ان ملزم ان تضها في نفس الملف‬
‫وكما رايتم في الصورة السابقة فان الصورة في نها في المكان االفتراضي لضهور محتوي‬
‫‪Css‬صفحة االتش تي ام ال اال و هو اليسار اذا اردنا ان نغير من مكانها تخصيص كودات‬
‫النها احسن في التنيسق وهذا ما سنشرحه في الجزء الثاني من هذا الكتاب كالطول والعرض‬
‫والحواف والهوامش ‪....‬‬
‫ومن احد اوسمة الصورة هو وسم تحديد مكان الكتابة بالنسبة للصورة وهو الوسم‬
‫‪Align‬‬
‫حيث له ‪ 4‬قيم هي كما شرحناه سابق ولكن الوسط نبدله بالقيمة‬
‫لليمين ‪Right :‬‬
‫اليسار ‪Left :‬‬
‫وهناك قيمتان اخريتان هيما‬
‫لالعلى نحدد القيمة ‪Bottom‬‬
‫واالسفل نحدد القيمة ‪Top‬‬
‫حيث يوضح هذا الكود التالي صورتنا السابقة حيث سيضهر النص في اليسار منها‬

‫اما االن سنترجمه على المتصفح لنعرف النتيجة‬

‫‪30‬‬
‫وكما ترون هذا ما نتج لنا بعد ترجمت الكود على المتصفح وكما ترون في العبارة التيى حددتها‬
‫باالزرق هي في اليسار واالصورة في المين‬
‫ام االن سنشرح خاصية ارتفاع وعرض الصورو التي هي‬
‫‪ Height‬لالرتفاع‬
‫للعرض ‪width‬‬

‫االن سنطبقهما‬
‫انظر الى هذا الكود في االسفل‬

‫حيث يقوم الكود الذي وضعنا فيه خاصية الرتفاع والعرض عيث حددنا لهما القيمة ‪500‬‬
‫بيكسل‬
‫وهذا مانتج لنا كما و موضح في االسفل‬

‫‪31‬‬
 ‫وكما ترون فان قياسات الصورة ارتفعت عن القيم االفتراضية‬
‫مالحضة بامكاننا ان نترك الصورة بدون هذه الخاصية الخذ المقاسات االفتراصية والتي هي‬
‫غالبا هي المقاسات الجيد واذا اردنا الزيادة او االنقاص في المقاسات فيجب ان تكون العملية‬
‫متناسقة لي ال نفسد الصورة مثال اذا اردنا الخفض من الطول اذا كانت الصورة مربعة الشكل‬
‫يجب الخفض بنفس القيمة للمحافضة على جودة الصورة فمثالن اذا انقصنا من االرتفا ‪ 10‬بيكسل‬
‫والعرض ‪ 50‬بيكسل هاكذا قد ننقص جودة الصورة بشدة ولن تصبح واضحة لزوار الموقع‬
‫الروابط‬
‫اما االن فسنتطرق الى اهم شئ في صفحات والويب اال وهو االرتباطات التشعبية و الروابط‬
‫قبل هذا ان لغة االتش تي ام ال في تعريفها او في اختصارها بعبارة ‪html‬‬
‫فهي تني اال نتقال من نقطة الى اخرى دون مسارد محدد مسبق مثال انت االن في محرك البحث‬
‫جوجل وتريد الذهاب الى حسابك في الفيس بوك ال تقول بانه هناك طريقة واحدة للوصول الى‬
‫حسابك وهي البحث على موقع فيسبوك ثم الدخول‬
‫فهاك طرق عدديدة كاخولك لحسابك مباشرة بكتابة الراب في االعلى او الذهاب الى موقع ويطلب‬
‫منك االعجاب بصفحته في الفيس بوك فيطلب من تسجيل الدخول او حتى انك تحتفض باختصار‬
‫على متصفحك او ما شابه ‪.....‬وهذا هو ما جعل االنترنت بحر شاسع النك تستطيع الدخول الى‬
‫موقع باالف الطرق دون اتباع مسار او رابط واحد‬
‫اما االن فسندخل في صلب الموضوع وهو عن انشاء اختصار او رابط وووضعه في صفحة‬
‫الويب وربطه بنفسه اي نضغط عن فنذهب الى الرابط او بكلمة اينضغط على كلمة للذهاب الى‬
‫الرابط او صور اي نضغط على صورة للذهاب الى الرابط‬
‫مثال انا ساعتمد على رابط موقعي للذهاب اليه و هو‬

‫‪32‬‬
 ‫‪https://wev-web.blogspot.com‬‬
‫ووالوسم الرئيسي الضافة رابط داخل صفحة الويب هو الوسم‬
‫>‪</a‬ووسم اغالقه >‪<a‬‬
‫ولكن هذا الوسم ال يعمل النه كاغلب االوسمة في لغة االتش تي ام ال النه يجب ان يكون له‬
‫خاصية لتكون قيمتها هي الرا بط الذي نريد الذهاب الليه والخاصيية التي يجب ان نضعها هي‬
‫الخاصية‬
‫‪Href‬‬
‫حيث قيمتها هي الرابط الذي نريد الذهاب اليه حيث كما نعلم ان قيم خاصيات االوسمة تكون ما‬
‫بين الرمزين " "‬
‫ويجب ا ن تكون الصورة او الكلمة التي نريد ربط الرابط بها حيث اذا ضغطنا عليها نذهالى‬
‫الرابط المحدد في قمية الخاصية مسبقا بين الوسم>‪ <a‬ووسم اغالقه >‪</a‬‬
‫اما االن فسنذهب للتطبيق وكما قلما سنقوم بوضع رابط موقعي والذي هو‬
‫‪https://wev-web.blogspot.com‬‬
‫انظر الى هذا الكود في االسفل‬

‫اذا اردنا ان نشرح الكود في االعلى في االول نحدد الوسم >‪<a‬مع اعطائه الخاصية ‪Href‬‬
‫حيث سنعطيها قيمة والتي ستكون بين الرمزين " قيمة الخاصية" والتي هي رابط الموقع او‬
‫مسار صفحة او ماشابه وكما ترون قد حددنا في الحالة االول الرابط بحد عينه لكي نضغط‬
‫عنه وفي الحالة الثانية حددنا الكلمة هنا حيث وضعنها بين الوسم >‪ <a‬ووسم اغالقه‬
‫>‪ </a‬بعد ترجمت نا للكود في االعلى على المتصفح نتج لنا ما هو موضح في االسفل‬

‫‪33‬‬
‫وكما رايتم في االعلى فن العبارتان تم تغيير لونها االساسي الى اللون االرجواني وووضع سطر‬
‫تح ت العبارة التي حددنها لكي تكون مرتبطة برابط موقعنا لكي تذهب الى موقعي اذا ضغطنا‬
‫عنه‬
‫و وهناك طريقة ثانية لوضع الروابط والطريقة التالية هي عبر وضع بريد الكتروني في مكان‬
‫الرابط حيث اذا ضغط الزائر على العبارة المحدد بالبريد االلكتروني فانه سيذهب مباشرة الى‬
‫نموذج االتصال‬
‫ولكن نسبق االميل الذي وضعنا مكان الرابط بالعبارة ‪mailto:‬‬
‫الجداول‬
‫اما الن فسننتقل الى الجداول والتي هي عنصر مهم في صفحات الويب‬
‫وهذا يكون عبر الوسم >‪<table‬ووسم اغالقه >‪</table‬‬
‫حيث ان الوسم ال يعمل لوحده حتى ان حددنا له وسم االغالق ولكن اليجب االستغناء عنه‬
‫ولكن يلزمنا تحديد الوسم >‪ <tr‬ووسم غالقه >‪ </tr‬داخل الوسم السابق‬

‫‪34‬‬
 ‫هذا الوسم يحدد لنا طبقات الجدول فقط وال يعطينا اي فراغات للجدول ولتحديد الجدول يجب‬
‫علينا تحديد الوسم >‪<td‬ووسم اغالقه >‪</td‬‬
‫االن سنذهب لتطبيق‬
‫االن سنرسم جدول فيه ‪ 3‬طبقات في كل طبقة فراغين انظرو الى الكود التالي والي يترجم كالمنا‬
‫الى اوسمت اتش تي ام ال‬

‫اذا اردنا شرح الكود فهو سينتج لنا جدول فيه ‪ 3‬طبقات في كل طبقة فراغين‬
‫وبعد ترجمتان للكود الذي في االعلى نتج لنا م هو موضح ي االسفل‬

‫قد تقولون من الوهلة االولى ان الشكل الناتج معنا ال يمت للجدول بصلة وال يمثله‬
‫نعم هو كما تضنون ولكن في الحقيقة هو جدول ولكن سيظهر كجدول في الخصائص القادمة التي‬
‫ستحد لنا شكل وحجم ولون الجدول ‪....‬‬
‫واول خاصية هي خاصية الحدود ‪Border‬‬
‫نعني بخاصية الحدود سمك الحدود التي تحيط بالجدول وتكتب خاصية الحدود بالخاصية‬
‫‪ Border‬وتاخذ قيمة تكون بعد العالمة=وبين عالمتي التنصيص " " اي توضع‬
‫كل قيم الخصائص وكل هذ يكون داخل الوسم >‪ <table‬الذي سنحدد له الحدود‬
‫وبعد تحديدنا لوسم الحدود واعطائه القيمة ‪ 2‬مثل هذا الكود في االسفل‬

‫‪35‬‬
 ‫كما ترون قدد حددناخاصية الحدود في السطر‪ 6‬وحدد نا لها القيمة ‪ 2‬التي هي بين عالمة‬
‫التنصيص‬
‫وهذا ما سينتج لنا‬

‫وكما ترون فقد ضهلر لنا الجدول بوضوح بحواف وحدو‬

‫سمكها ‪ 2‬بكسل‬
‫ونستطيع اضافة خصائص اخرى تعلمناها مثل خاصية االرتفاع والعرض كما سنوضحه في‬
‫الشكل التالي‬

‫وكما ترون في السطر ‪ 6‬حددما الخاصية التي سبق وعرفنا عليها وهي خاصية االرتفاع حددنا له‬
‫القيمة ‪ 70‬والخاصية الثانية وهي العرض ووالتي اعطيناها القيمة ‪ 90‬وهناك طريقة استطيع بها‬
‫تقديم الطول والعرض لمكون في صفحات االتش تي ا ال اال وهي بالنسب المئوية مكان القيمة‬

‫‪36‬‬
‫ال عددية وهذا احسن لننا نحصل على تنسيق افضل اذا كان موقعنا قد يعرض على شاشات رض‬
‫مختلفة كالهاتف والحاسوب و االب توب ‪...‬‬
‫وبعد ترجمتنا للكود في االعلى على المتصفح اعطانا هذا الشكل في االسفل‬

‫وكما ترون فان عرض وارتفاع الجدول ازدادا نسبيا وهذا راجع لتحديدما لقيم جديدة وتخلينا على‬
‫القيم االفتراضية‬
‫مالحظة ( انا اذا جددنا قيم جديدة لخاصيتي االرتفاع والعرض وكانت اقل من اقيم االفتراضية‬
‫فانها ال تعمل وهذا يرجع لسمك الكائن او الخط المكتوب به ما هو في داخل الجدول )‬
‫مالحظة ‪ ( 2‬نستطيع التحكم في خصائص كل طبقة او فراغ من الجدول بوضع الخصائص‬
‫داخل وسم البداية الخاص بكل طبقة او فراغ )‬
‫من الخصائص التي نستطيع اضافتها ايض هي خاصية‬
‫الخلفية كلون التي قد سبق وقمنا بشرحها عبر الوسم ‪ Bgcolor‬او تحديد صورة كخلفية بالوسم‬
‫‪background‬‬
‫وهذا الكود كتبناه لتجديد خلفيات لونية مختلفة لكل جزر ( فراغ ‪ .‬طبقة ‪ .‬الجدول ككل )‬

‫اذا اردنا شرج الكود فنحن كتبنا وسم انشاء جدول و حددما له اللون االزرق الداكم كلون للخلفية‬
‫كما هو موضح في السطر ‪ 6‬من الكود‬

‫‪37‬‬
 ‫>"‪<table bgcolor="#0000ff" border="2" height="30px" width="30px‬‬
‫اما في السطر ‪ 7‬فقد قمنا بجعل الفراغ االول في الطبقة االولى ذا لون بنفسجي في وسم بداية‬
‫الفراغ االول‬
‫>‪<tr><td bgcolor="#cc00cc">1/1</td><td>1/2</td></tr‬‬
‫والسطر ‪ 8‬فقد كتبنا فيه في وسم بداية الطبقة الثانية وحددنا له خاصية الخلفية اللونية وحددما له‬
‫اللون االحمر‬
‫>‪<tr bgcolor="#ff0000"><td>2/1</td><td>2/2</td></tr‬‬
‫وهذا ما سيكون عليه الجدول الذ حددنا له خاصيى لون الخلفية‬
‫لكل جزئ على حدى‬

‫يمكن تح يدي خاصية الخلفية كصورة بنفس الطريقة ايضا ولكن يجب وكما دائما نقول يجب ان‬
‫تكون الصورة في نفس ملف االتش تي ام ال او نسخ مسارها بالكامل ان كانت في ملف اخر بعيد‬
‫عن ملف االتش تي ام ال‬
‫القوائم‬
‫اما االن سننتقل الى اخر عنصر في مشوارنا وهو القوائمة في لغة االتش تي ام ال‬
‫اين تكمن االهمية هي تستطيع ان تشببها باختصاؤ روابط الموقع في مكان غير‬
‫وتكمن اهميتها للمتصفح ان يعرف محتولى الموقع وتقسيماته ومذا يبحث عنه دون تصفح الموقع‬
‫صفحة بعد صفحة‬
‫ال نحتاج النشاء قائمة في لغة االتش تي ام ال اال الى وسمين اساسيايين فقط واولها وسم القائمة‬
‫ككل والذي يكون في داخله الوسم الثاني والذي هو تقسيمات القائمة‬
‫الوسم االول االساسي والذي نبدء به كل قائمة هو الوسم >‪<ul‬‬
‫حيث يجب علينا ان نغلق بوسم اغالقه والذي هو>‪</ul‬‬

‫‪38‬‬
 ‫ولكن ان وضعنا هذين الوسمين داخل صفحة االتش تي ام ال فانها ال تظهر لنا اي‬
‫قائمة ولهذا فنحن‬
‫نحتاج الى الوسم الثاني والذي هو>‪ <li‬ووسم اغالقه >‪</li‬‬
‫حي ث نضع العنصر الذي سنضعه في القائمة داخلهما وبدورهما يوضعان داخل الوسم‬
‫االول لكي يضهر تاثيرهما وهذا ما سيضهران عليه اذا كتبنا قائمة بسيطة‬

‫اذا اردنا شرح الكود في االعلى فانا نريد انشاء قائمة وهذا بالوسم االساسي في السطر ‪ 6‬ووسم‬
‫اغالقه في الشطر ‪ 10‬ووضعنا بداخله الوسم الثاني في القوائم والذي وضعناه في اول كل من‬
‫السطر ‪ 9. 8 . 7‬واغلقناه بوسم اغالقه في نهاية كل سطر‬
‫وبعد تطبيقنا للكود على المتصفح ضهر لنا ماهو موضح في االسفل‬

‫قد تتسائلون هي ال تشبه للقوائم التي نجدها عفي المواقع نعم انتم على حق ولكن هي نفسها ولك‬
‫تم ادخال لغة السيتايالت فقط على قوئم المواقع وهذا ابسط مثال يوضح مدى االهمية الكبيرة‬
‫للغة الستايالت‬
‫‪Css‬‬
‫انظر الى هذه القائمة ي االسفل هي ابسط شسكل تستطيع عمل بلغة الستايالت ان لم تكن مبدعا‬
‫وان كنت مبدعا فستنشئها بخصائص مميزة وتجعلهاةمنسدلة تضيف خاصية اللون االساسي‬
‫واللون عند مرير مؤشر الفارة ‪.......‬‬

‫‪39‬‬
 ‫نصائح حول انشاء موقعك‬
‫اول نصيحة هي انك ال تقول ان لغة االتش تي ام ال ملة وال تعطينا موقع متناسق وجميل‬
‫وساتخلى عنها النك ال تتستطيع مهما حدث ولكن تستطبيع ادخال لغات مثل الستايالت والتي‬
‫سنتطرق لها في الجزئ الثاني من هذا الكتاب وسترون كيفية انشاء المواقع العمالقة ان شاء هللا‬
‫شئ تفرغ له وعدم الياس لكي تبدع فيه‬
‫ال تكثر من الكواد الفارغة من محتواها‬
‫تاكد من صحة االكواد‬
‫ال تكثر من الصور في موقعك النها نبطئ استدعاء موقعك من السيرفر الى المتصفح‬
‫اكتب محتوى ميز وقدم خدما مميزة‬
‫اعطه عنوانا مميز النه السبيل االكثر جذبا للزوار لوقعك‬

‫‪40‬‬
‫تم بحمد هللا وفضله االنتاء من هذا الكتاب او تستطيعون ان تقولون هذا الفص والذي تطرقنا فيه‬
‫الى لغة بناء وتوصيف صفحات الويب وهي )‪(HTML‬‬
‫والتي ال يستطي اي مطور ويب كل قدراته البرمجية في اغلب اللغات ان يبني موقع من دونها‬
‫ولكن هذه اللغة وكما راينا وما تطرقنا له فانها ال تعطيك تحكم تام وسلس في صفحات الويب‬
‫ولكن النستطيع ان نقول انا محرومون من االبداع في صفحات الويب وهذا ما سنتطرق له في‬
‫الفصل التالي من هذا الكتاب جيث سنتحكم في ملف االتش تي ام ال او صفحة الويب بارادتنا‬
‫حي ث نعطيها تناسق تام وهذا ما تتيجحه لغة الستايالت )‪(Css‬‬
‫واذا اردنا ان نشرح الفرق بينها وين لغة االتش تي ام ا ل فاننا سنقول ان لغة االتش تي ام ال هي‬
‫لتوصيف وبناء الصفحة حيث كانها هي قواعد البناء واساساته ام الستايالت في الخطوات التي‬
‫تلي البناء وهي االعتناء بالمضهر الخاص بالبناء والذي سيكون في حلتنا صفحة الويب‬
‫حيث وصفها احد االخوة المبرمجين اليمنيين بانها الماكياج او الزينة التي تخص صفحة الويب‬
‫اما ان كفان كالما وسنتطق الى عنوان الكتاب وما سيتطرق له‬
‫اوال الكتبا ان شاء هللا سيحمل االسم‬
‫تصميم وتطوير الويب‬
‫‪Designer & developer web site by HTML end Css‬‬
‫وهكذا سيكون ام شاء هللا شكل الكتاب‬

‫‪41‬‬
‫واذا اردت ان تحصل على هذا الكتاب والذي هو الفصل الثاني من مجموعة تطوير الويب اتصل‬
‫بنا عبر‬
‫صفحتنا في الفيس بو ك‬
‫‪https://www.facebook.com/wev.web.dz‬‬
‫او عبر البريد االلكتروني‬
‫‪[email protected]‬‬
‫او‬
‫‪[email protected]‬‬

‫صاحب الكتاب‬
‫منصف قحة‬ ‫صاحب الكتاب‬
‫الجزائر ‪ .‬بسكرة‬ ‫الدولة‬
‫التدوين على منصة بلوجر وتطوير الويب العربي‬ ‫الهواية‬
‫‪[email protected]‬‬ ‫لتواصل بنا‬
‫‪www.facebook.com/moncefplastin07‬‬ ‫حسابي في الفيس بوك‬
‫‪wev-web.blogspot.com‬‬ ‫موقعنا‬
‫‪www.facebook.com/wev.web.dz‬‬ ‫صفحتنا على الفيس بوك‬

‫وفي االخير اريد منكم الدعاء لي الني العام المقبل ساجتاز امتحان الباكالوريا‬
‫في الجزائر‬
‫‪2018‬‬
‫مالحظة نحن لم نتطرق في هذا الكتاب الذي بين ايديكم اال كل ما يخص االتش تي ام ال الننا‬
‫سنتطرق لكل شئ في وقته اي اانا ما لم نذكره من خصائص نحتاجها في الستايالت سنتطرق لها‬
‫في ال جزء الثاني من هذا الكتاب اما الفورة و اشكال االخال فسنتطرق لها في كتاب البي اتش بي‬
‫اي في الجزء الثالث من هذا الكتاب‬

‫‪42‬‬
‫والسالم عليكم ورحمة هللا تعلى‬
‫وبركاته‬

‫‪43‬‬