‫موضوعات خاصة‬

‫)‪(Selected Topics‬‬

‫إعداد‬
‫مهندس يحيى عبدالناصر العباسي‬
 ‫‪HTML‬‬
‫بنية مستندات ‪: HTML‬‬

‫‪ .1‬وسم البداية‪ :‬وهو يحتوي على اسم العنصر‪ ،‬موضوعًا ضمن قوسين على شكل زاوية‪ ،‬وقد يلي االسم‬
‫الخاصيات التي تؤثر عليه‪ً ,‬‬
‫مثل >‪. <p‬‬

‫‪ .2‬وسم النهاية‪ :‬وهو يحتوي على اسم العنصر أيضًا مسبوقًا بخ ٍط مائل قبله لإلشارة إلى نهاية العنصر‪,‬‬
‫الحظ أ َّن نسيان وسم النهاية قد يسبب أخطا ًء في بعض األحيان‪ ،‬لذا خذ حذرك وتذكره‪ً ,‬‬
‫مثل >‪. </ p‬‬

‫‪ .3‬المحتوى‪ :‬وهو موجودٌ بين وس َمي البداية والنهاية‪ ،‬ويُمثِّل في معظم األحيان محتوى العنصر‪.‬‬
‫‪ .4‬العنصر‪ :‬هو وسم البداية ووسم النهاية إضافةً إلى المحتوى ‪.‬‬

‫وسم البداية _____‬ ‫وسم النهاية _______‬

‫| |‬ ‫| |‬
‫>‪<p>paragraph content</p‬‬
‫|___محتوى العنصر__|‬

‫‪ o‬قد تحتوي العناصر على خاصيات‪.‬‬

‫وسم البداية _____‬ ‫وسم النهاية _______‬

‫| |‬ ‫| |‬
‫>‪<p class="light">paragraph content</p‬‬
‫|___محتوى العنصر__|__الخاصيات__|‬

‫‪1‬‬
 ‫العناصر‪:‬‬

‫الوصف‬ ‫العنصر‬
‫تمثل ستة مستويات من ترويسات األقسام لتكبير الخط‬ ‫>‪<h1-h6‬‬
‫هو حاوية عامة للمحتوى التي ال تُمثِّل شيئًا معيِّنًا‪ ،‬يمكن استخدامها لتجميع العناصر ألغراض مثل‬ ‫>‪<div‬‬
‫التنسيق‬
‫تمثيل فاصل موضوعي بين الفقرات‬ ‫>‪<hr‬‬

‫تمثيل عنصر في قائمة‬ ‫>‪<li‬‬

‫تمثيل قائمة مرتبة من العناصر‪ ،‬التي ت ُ َ‬

‫عرض على شكل قائمة مرقمة‬ ‫>‪<ol‬‬

‫تمثيل قائمة غير مرتبة من العناصر‪ ،‬التي ت ُ َ‬

‫عرض على شكل قائمة منقطة عادة ً‪.‬‬ ‫>‪<ul‬‬

‫يمثل العنصرفقرة ً نصيةً‪ ،‬وت ُ َ‬

‫عرض الفقرات عادة ً على شكل أقسام من النص يفصل بينها بمسافة فارفة‬ ‫>‪<p‬‬

‫يُنشئ العنصررابطًا لصفحات الويب األخرى أو لعنواين البريد اإللكتروني‬ ‫>‪<a‬‬

‫ُعرض بخ ٍط عريض‬
‫تمثيل نص‪ ،‬وي َ‬ ‫>‪<b‬‬

‫سطر جديد‬
‫ٍ‬ ‫يؤدي إلى االنتقال إلى‬ ‫>‪<br‬‬

‫عرض بخ ٍط مائل‬
‫ي تمثيل نص‪ ,‬وي َ‬ ‫>‪<i‬‬

‫يستعمل هذا العنصر لالقتباسات‬ ‫>‪<q‬‬

‫يؤدي العنصر إلى عرض النص ويتوسطه خط‬ ‫>‪<s‬‬

‫ُعرض النص عادة ً بخ ٍط عريض‬

‫تمثيل نص‪ ،‬وي َ‬ ‫>‪<strong‬‬

‫ُعرض في مستوى أدنى من المستوى الرئيسي للنص‬

‫تمثيل جزء من النص الذي يجب أن ي َ‬ ‫>‪<sub‬‬

‫ُعرض في مستوى أعلى من المستوى الرئيسي للنص‬

‫تمثيل جزء من النص الذي يجب أن ي َ‬ ‫>‪<sup‬‬

‫يستخدم العنصر لعرض النص مع وضع خط أفقي تحت خط األساس لمحتواه‬ ‫>‪<u‬‬

‫تمثيل صورة في المستند‬ ‫>‪<img‬‬

‫تضمين أو اإلشارة إلى سكربت قابل للتنفيذ‬ ‫>‪<script‬‬

‫ُعرض عادة ً ويتوسطه خط‬

‫ف من المستند‪ ،‬وهذا النص ي َ‬
‫تمثيل نص حُذ َ‬ ‫>‪<del‬‬

‫تمثيل البيانات المجدِّولة‬ ‫>‪<table‬‬

‫يعتبر كجسم للعنصر >‪<table‬‬ ‫>‪<tbody‬‬

‫تعريف خلية في الجدول الذي يحتويها‬ ‫>‪<td‬‬

‫‪2‬‬
 ‫تعريف خلية تُمثِّل ترويسةً في الجدول الذي يحتويها‬ ‫>‪<th‬‬

‫تعريف مجموعة من األسطر التي تُمثِّل ترويسةً ألعمدة العنصر >‪<table‬‬ ‫>‪<thead‬‬

‫تعريف سطر يحتوي على خاليا في جدول‪ ،‬وهذه الخاليا تُمثَّل عبر العنصرين >‪ <td‬و >‪<th‬‬ ‫>‪<tr‬‬

‫عنصر يستخدم خاصيات ‪ , CSS‬يكتب في >‪<head‬‬ ‫>‪<Style‬‬

‫أداة تعليق خاصة ‪HTML‬‬ ‫>‪<!-- --‬‬

‫أداة تعليق خاصة ‪CSS‬‬ ‫‪/* */‬‬

‫وسم يستخدم لوضع الخاصيات داخله‬ ‫> ‪<font‬‬

‫يستخدم لجعل الخط على مستوي واحد‬ ‫>‪<tt‬‬

‫يستخدم لجعل الخط بشكل مائل‬ ‫>‪<em‬‬

‫>‪<noshade‬‬

‫خاصيات ‪:HTML‬‬

‫الوصف‬ ‫خاصية‬
‫خاصية العنصر>‪ ,<img‬يحدد فيه مكان الصورة المضافة للصفحة‬ ‫‪Src‬‬

‫خاصية العنصر>‪ ,> table‬تحدد عرض إطار الجدول‬ ‫‪Border‬‬

‫خاصية العنصر>‪ ,> td‬تقوم بحذف عدد من األعمدة التي تمتد عليها الخلية‬ ‫‪Colspan‬‬

‫خاصية العنصر>‪ ,> td‬تقوم بحذف عدد من األسطر التي تمتد عليها الخلية‬ ‫‪Rowspan‬‬

‫خاصية العنصر>‪ ,<a‬تحدد موقع ويب‬ ‫‪Href‬‬

‫خاصية العنصر>‪ ,<img‬تحديد طول الصورة‬ ‫‪Height‬‬

‫خاصية العنصر>‪ ,<img‬تحديد عرض الصورة‬ ‫‪Width‬‬

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

‫قيمة هذه الخاصية ال يجوز أن تتكرر في أي عنصر آخر‪ ,‬تستخدم مع ‪ CSS‬و ‪Java‬‬
‫‪Scripts‬‬
‫‪Id‬‬

‫‪3‬‬
 ‫الغرض من هذه الخاصية هو السماح بتنسيق العناصر بسرعة‬ ‫‪Style‬‬

‫يستخدم لتحديد نوع الخط‬ ‫‪Face‬‬

‫يستخدم لتحديد حجم الخط‬ ‫‪Size‬‬

‫يستخدم لوضع خط عرض ومصمت وليس منحوتا ً كما في الحالة القياسية‬ ‫‪Noshade‬‬

‫رموز‪:‬‬

‫كود‬ ‫رمز‬
‫;‪&Copy‬‬ ‫©‬

‫;‪&Reg‬‬ ‫®‬

‫;‪&Amp‬‬ ‫&‬

‫;‪&It‬‬ ‫˃‬

‫;‪&Gt‬‬ ‫˂‬

‫;‪&Frac14‬‬ ‫¼‬

‫;‪&Frac12‬‬ ‫½‬

‫;‪&Frac34‬‬ ‫¾‬

‫;‪&Frac13‬‬ ‫⅓‬

‫‪4‬‬
 ‫• مثال‪:1‬‬

‫❖ تطبيق على مثال‪:‬‬

‫‪5‬‬
 ‫(‪.)H1-H6‬‬ ‫• مثال‪ :2‬أحجام الخط‬

‫❖ تطبيق على مثال‪:‬‬

‫‪6‬‬
 ‫• مثال‪:3‬‬

‫❖ تطبيق على مثال‪:‬‬

‫‪7‬‬
 ‫• مثال‪:4‬‬

‫❖ تطبيق على مثال‪:‬‬

‫‪8‬‬
 ‫• مثال‪:5‬جدول صور مع إدراج رابط لكل صورة‪.‬‬

‫‪9‬‬
 ‫❖ تطبيق مثال السابق‪:‬‬

‫‪10‬‬
 ‫• مثال‪:6‬‬

‫❖ تطبيق على مثال‪:‬‬

‫‪11‬‬
 ‫• مثال‪:7‬‬

‫❖ تطبيق على مثال السابق‪:‬‬

‫‪12‬‬
 ‫• مثال‪ :8‬كتابة فقرات‪.‬‬

‫‪13‬‬
 ‫❖ تطبيق على مثال السابق‪:‬‬

‫‪14‬‬
 ‫‪CSS‬‬

‫عند كتابة خاصيات ‪ ,CSS‬نكتبه في مكانين‪:‬‬

‫‪ )1‬في ‪ : head‬يستخدم العنصر< ‪ >style‬ثم نحدد جزء التغير (‪ body‬أو ‪ h1‬أو ‪ p‬أو ‪ ). . .‬و‬

‫نفتح قوس مجعد " { } " ونضيف خاصية ‪( CSS‬تلوين خلفية أو الخط أو ‪ ) . . .‬ثم ننهي بفاصلة‬

‫منقوطة " ; "‪.‬‬

‫>‪<head‬‬

‫>‪<title> CSS </title‬‬

‫>‪<style‬‬
‫‪body‬‬ ‫_____تعبير عن "="‬ ‫فاصلة منقوطة_____‬
‫{‬ ‫| |‬ ‫)نهاية خاصية( | |‬
‫; ‪ : ...‬الخاصية‬
‫}‬
‫>‪</style‬‬

‫>‪</head‬‬

‫‪15‬‬
 ‫‪ )2‬في بداية العنصر‪ :‬نستخدم تنسيق " ‪ ," Style‬نكتبه في بداية العنصر > " "=‪ <p style‬ثم‬
‫نضيف الخاصية وأخيرا ً نضيف فاصلة منقوطة " ; "‪.‬‬

‫وسم البداية _____‬ ‫_______وسم النهاية‬

‫| |‬ ‫| |‬
‫>‪<p style="color:blue; background:gerrn;"> CPU </p‬‬
‫|___________الخاصيات__________|‬

‫خاصيات ‪:CSS‬‬

‫الوصف‬ ‫الخاصية‬
‫تستخدم إلضافة لون للخلفية‬ ‫‪Background‬‬

‫تستخدم في تكبير الخط‬ ‫‪font-size‬‬

‫تحديد لون النص‬ ‫‪color‬‬

‫تحديد عرض‬ ‫‪width‬‬

‫تحديد طول‬ ‫‪height‬‬

‫في ‪ CSS‬النكتب " = " بل نكتب " ‪" :‬‬ ‫‪:‬‬

‫تحديد لون اإلطار ونوعه وحجمه‬ ‫‪border‬‬

‫‪16‬‬
 ‫• إضافة خاصيات إلى كود مثال‪:1‬‬

‫❖ تطبيق على مثال السابق‪:‬‬

‫‪17‬‬
 ‫• إضافة خاصيات إلى كود مثال‪:2‬‬

‫❖ تطبيق على مثال السابق‪:‬‬

‫‪18‬‬
 ‫• إضافة خاصيات إلى كود مثال ‪:3‬‬

‫❖ تطبيق على مثال السابق‪:‬‬

‫‪19‬‬
 ‫• إضافة خاصيات إلى كود مثال‪:5‬‬

‫❖ تطبيق على مثال السابق‪:‬‬

‫‪20‬‬
 ‫• مثال خارجي‪:‬‬

‫‪21‬‬
 ‫❖ تطبيق على مثال السابق‪:‬‬

‫‪22‬‬
 ‫‪Java Script‬‬
‫• مثال‪ :1‬مقارنة بين رقمين‪.‬‬

‫‪23‬‬