مذكرة في لغة Html 2

‫انرؼهًٛٛح‬ ‫انضٚاخ‬ ‫كفش‬ ‫إداسج‬ ‫يشاد‬ ‫يحًذ‬ ‫خانذ‬ ًٗٛ‫انرؼه‬ ‫انكًثٕٛذش‬ ّٛ‫ذٕظ‬
1
‫لغة‬ ً‫ف‬ ‫مقدمة‬html
‫لـ‬ ‫إختصار‬ ‫(والكلمة‬ .‫اإلنترنت‬ ‫صفحات‬ ‫إلنشاء‬‫المستخدمة‬ ‫اللغة‬ ‫إنها‬yperHextTarkupManguageL.)ً‫وه‬
‫كلغة‬ ‫األخرى‬ ‫البرمجة‬ ‫للغات‬ ‫علٌه‬ ‫المتعارف‬ ‫والشكل‬ ‫بالمعنى‬ ‫برمجة‬ ‫لغة‬ ‫لٌست‬C‫مثال‬ً‫فه‬ .‫جمل‬ ‫على‬ ‫تحتوي‬ ‫ال‬
‫هذ‬ ‫الستخدام‬ ‫الحاجة‬ ‫وعند‬ ،‫والدوران‬ ‫التحكم‬‫كـ‬ ‫أخرى‬ ‫لغات‬ ‫من‬ ‫شٌفرات‬ ‫تضمٌن‬ ‫ٌجب‬ ‫الجمل‬ ‫ه‬Java, JavaScript,
CGI‫به‬ ‫خاص‬ ‫مترجم‬ ‫إلى‬ ‫تحتاج‬ ‫ال‬ ً‫فه‬ ‫كذلك‬ .Compiler‫ٌتم‬ ‫ألنه‬ ،‫معٌن‬ ‫تشغٌل‬ ‫بنظام‬ ‫مرتبطة‬ ‫غٌر‬ ً‫وه‬ .
‫بسٌطة‬ ‫لغة‬ ً‫فه‬ ‫لذلك‬ .‫المستخدم‬ ‫النظام‬ ‫عن‬ ‫النظر‬ ‫وبغض‬ ‫اإلنترنت‬ ‫متصفح‬ ‫قبل‬ ‫من‬ ‫مباشرة‬ ‫تعلٌماتها‬ ‫وتنفٌذ‬ ‫تفسٌرها‬
‫تحتاجه‬ ‫ما‬ ‫كل‬ ‫ربما‬ ‫بل‬ .‫فٌها‬ ‫المستخدمة‬ ‫والهٌكلٌة‬ ‫البرمجة‬ ‫بلغات‬ ‫مسبقة‬ ‫لمعرفة‬ ‫تحتاج‬ ‫وال‬ ‫والتعلم‬ ‫الفهم‬ ‫وسهلة‬ ،ً‫ا‬‫جد‬
.‫األفكار‬ ‫وترتٌب‬ ً‫المنطق‬ ‫التفكٌر‬ ‫من‬ ‫القلٌل‬ ‫هو‬
‫لغة‬ ‫مفردات‬ ‫تتكون‬Html‫تسمى‬ ‫شٌفرات‬ ‫من‬TAGS‫بالصٌغة‬ ‫وتكتب‬ ‫أزواج‬ ‫بشكل‬‫تستخدم‬ ً‫وه‬ .‫الوسوم‬ ‫أي‬
‫(م‬ ‫التالٌة‬: )‫الٌمٌن‬ ‫إلى‬ ‫الٌسار‬ ‫ن‬-
‫الوسم‬ ‫المثال‬ ‫سبٌل‬ ‫فعلى‬‫عرٌض‬ ‫أسود‬ ‫بخط‬ ‫الكلمات‬ ‫لكتابة‬ ‫ٌستخدم‬Bold:ً‫التال‬ ‫بالشكل‬ ‫وذلك‬
Text<‎B>
‫ت‬ ً‫الت‬ ‫الخاصة‬ ‫الوسوم‬ ‫بعض‬ ‫وهناك‬‫السطر‬ ‫نهاٌة‬ ‫وسم‬ ‫مثل‬ ‫مفردة‬ ‫بصورة‬‫ستخدم‬ ‫الحالتٌن‬ ‫بكلتا‬ ‫تستخدم‬ ‫قد‬ ‫أو‬
‫الفقرة‬ ‫وسم‬ ‫مثل‬<P.>‫هللا‬ ‫شاء‬ ‫إن‬ ‫حٌنه‬ ً‫ف‬ ‫بالتفصٌل‬ ‫وغٌرها‬ ‫الوسوم‬ ‫هذه‬ ‫نناقش‬ ‫وسوف‬
‫ملف‬ ‫كتابة‬ ‫ٌتطلب‬ ‫ال‬HTML‫إلى‬ ‫فقط‬ ‫نحتاج‬ ‫بل‬ .‫مترجم‬ ‫برنامج‬ ‫على‬ ‫تحتوي‬ ‫ال‬ ‫لغة‬ ‫قلنا‬ ‫كما‬ ً‫فه‬ ‫خاصة‬ ‫برامج‬ ‫أٌة‬
‫برن‬ً‫ف‬ ‫الموجود‬ ‫المفكرة‬ ‫وبرنامج‬ ،‫ومعالجتها‬ ‫البسٌطة‬ ‫النصوص‬ ‫لتحرٌر‬ ‫امج‬Windows‫وكذلك‬ .‫الغرض‬ ‫بهذا‬ ً‫ٌف‬
‫اإلنترنت‬ ‫متصفحات‬ ‫أحد‬ ‫إلى‬Internet Explorer‫ال‬ ‫الصفحات‬ ‫لمعاٌنة‬‫أن‬ ‫فقط‬ ‫وعلٌك‬ .‫بتصمٌمها‬ ‫نقوم‬ ً‫ت‬‫ت‬‫قوم‬
‫الممتد‬ ‫االسم‬ ‫ٌحمل‬ ‫بملف‬ ‫المكتوب‬ ‫النص‬ ‫بحفظ‬‎.html‫أو‬‎.htm
‫ص‬ ‫إنشاء‬‫بسٌطة‬ ‫وٌب‬ ‫فحة‬
‫سوف‬‫ن‬‫قوم‬‫هنا‬‫إنشاء‬ ‫إلى‬ ‫النهاٌة‬ ً‫ف‬ ‫لنصل‬ .‫اآلخر‬ ‫تلو‬ ً‫ا‬‫واحد‬ ‫معك‬ ‫ومناقشتها‬ ‫الوٌب‬ ‫لصفحة‬ ‫األساسٌة‬ ‫الوسوم‬ ‫بسرد‬
:‫التالٌة‬ ‫الوسوم‬ ‫لنأخذ‬ .‫بسٌطة‬ ‫وٌب‬ ‫صفحة‬
‫انثذاٚح‬ ‫ٔعى‬‫انُٓاٚح‬ ‫ٔعى‬
<HTML><‎/HTML>
<HEAD><‎/HEAD>
<TITLE><‎/TITLE>
<BODY><‎/BODY>
‫ماذا‬‫النهاٌة‬ ‫وسم‬ ‫وٌتمٌز‬ .‫النهاٌة‬ ‫وسم‬ ‫واآلخر‬ ،‫البداٌة‬ ‫وسم‬ ‫أحدهما‬ ‫الوسوم‬ ‫من‬ ‫زوج‬ ‫من‬ ‫ٌتألف‬ ‫منها‬ ‫كل‬ ‫أن‬ ‫تالحظ؟‬
‫ملف‬ ‫تركٌب‬ ‫عن‬ ‫فكرة‬ ً‫ٌعط‬ ‫فهو‬ ،ً‫التال‬ ‫الرسم‬ ‫تأمل‬ . / ‫الرمز‬ ‫بوجود‬Html

2
‫فملف‬ ‫إذن‬Html‫بالوسم‬ ً‫ا‬‫دائم‬ ‫ٌبدأ‬<HTML>‫بالوسم‬ ً‫وٌنته‬<‎/HTML.>!‫ذلك‬ ‫تنسى‬ ‫ال‬
‫الوسم‬ ‫أما‬<HEAD>‫الظاهر‬ ‫كالعنوان‬ .‫الصفحة‬ ‫بتعرٌف‬ ‫الخاصة‬ ‫المعلومات‬ ‫على‬ ‫ٌحتوي‬ ‫الذي‬ ‫المقطع‬ ‫بداٌة‬‫فٌحدد‬
:‫الوسمٌن‬ ‫بٌن‬ ‫ٌوضع‬ ‫ألن‬ ‫ٌحتاج‬ ‫بدوره‬ ‫العنوان‬ ‫وهذا‬ .‫المتصفح‬ ‫عنوان‬ ‫شرٌط‬ ‫على‬<TITLE< … >‎/TITLE>
‫الوسم‬ ‫كتابة‬ ‫ٌجب‬ ‫وبالطبع‬<‎/HEAD>.‫المقطع‬ ‫هذا‬ ً‫ننه‬ ً‫لك‬
‫الوسم‬ ‫إلى‬ ً‫نأت‬<BODY>‫والجداول‬ ‫الصور‬ ‫إدراج‬ ‫إلى‬ ‫باإلضافة‬ ،‫ضمنه‬ ‫الوٌب‬ ‫صفحة‬ ‫نصوص‬ ‫كتابة‬ ‫ٌتم‬ ‫والذي‬
‫اإلنهاء‬ ‫وسم‬ ‫إلى‬ ‫ٌحتاج‬ ً‫ا‬‫أٌض‬ ‫وهو‬ .‫الصفحة‬ ‫محتوٌات‬ ً‫وباق‬<‎/BODY>
‫هٌا‬…‫ال‬ ‫برنامج‬ ‫بفتح‬ ‫قم‬:ً‫ٌل‬ ‫ما‬ ‫واكتب‬ ‫مفكرة‬
<HTML>
<HEAD>
<TITLE>
This is a test Webpage
<‎/TITLE>
<‎/HEAD>
<BODY>
Wow, I'm writing my first webpage
<‎/BODY>
<‎/HTML>
‫ملفات‬ ‫أسماء‬ ً‫ف‬ ‫المستخدم‬ ‫االمتداد‬ ‫أن‬ ‫تنسى‬ ‫وال‬ .‫تختاره‬ ‫اسم‬ ‫وبأي‬ ‫ملف‬ ً‫ف‬ ‫كتبته‬ ‫ما‬ ‫بحفظ‬ ‫قم‬ ‫واآلن‬HTML‫هو‬
htm.‫أو‬html.‫االسم‬ ‫اخترت‬ ‫أنا‬ ً‫ال‬‫مث‬‎1st_file.htm‫القرص‬ ‫على‬ ‫مستقل‬ ‫مجلد‬ ‫بإنشاء‬ ‫تقوم‬ ‫أن‬ ‫األفضل‬ ‫ومن‬
‫باالسم‬ ً‫ال‬‫مث‬ ‫المجلد‬ ‫هذا‬ ‫ولٌكن‬ ‫التحدٌث‬ ‫أو‬ ‫للعرض‬ ‫استرجاعها‬ ‫عملٌة‬ ‫علٌك‬ ‫ٌسهل‬ ‫فهذا‬ ‫ملفاتك‬ ‫به‬ ‫تحفظ‬ ً‫لك‬ ‫الصلب‬
C:htmfiles‫و‬‫اإلنترن‬ ‫متصفح‬ ‫بتشغٌل‬ ‫قم‬ .‫كتبناه‬ ‫ما‬ ‫نتٌجة‬ ‫نشاهد‬ ً‫لك‬‫تستخدمه‬ ‫الذي‬ ‫ت‬Internet Explorer
‫األمر‬ ‫فاختر‬Open…‫قائمة‬ ‫من‬File..‫الملف‬ ‫به‬‫ٌوجد‬ ‫الذي‬ ‫المسار‬ ‫حدد‬ ‫ثم‬C:htmfiles1st_file.htm

3
:‫علٌه‬ ‫حصلت‬ ‫ما‬ ‫وهذا‬ .‫الملف‬ ‫تخزٌن‬ ‫عند‬ ‫اتبعتها‬ ً‫الت‬ ‫السابقة‬ ‫االفتراضات‬ ‫حسب‬ ً‫ا‬‫طبع‬ ‫وذلك‬
:‫الوٌب‬ ‫صفحات‬ ‫كتابة‬ ‫عند‬ ‫المالحظات‬ ‫بعض‬ ‫إلى‬ ‫أنبهك‬ ‫أن‬ ‫أرٌد‬ ‫نستمر‬ ‫أن‬ ‫وقبل‬
‫الكبٌرة‬ ‫اإلنجلٌزٌة‬ ‫باألحرف‬ ‫الوسوم‬ ‫كتابة‬ ‫بٌن‬ ‫فرق‬ ‫ٌوجد‬ ‫ال‬UPPERCASE‫الصغٌرة‬ ‫األحرف‬ ‫أو‬
lowercase.‫حت‬ ‫أو‬ ‫منهما‬ ‫شكل‬ ‫بأي‬ ‫الكتابة‬ ‫تستطٌع‬‫لذلك‬.‫بكلٌهما‬ ‫الكتابة‬ ‫ى‬
‫بضغط‬ ‫تقوم‬ ‫عندما‬ ‫(أي‬ ‫الفقرات‬ ‫نهاٌة‬ ‫إشارات‬ ‫أو‬ ‫الزائدة‬ ‫الفراغات‬ ‫االعتبار‬ ‫بعٌن‬ ‫تأخذ‬ ‫ال‬ ‫المتصفحات‬ ‫إن‬
‫مفتاح‬Enter)‫ملف‬ ً‫ف‬ ‫المتصفحات‬ ‫هذه‬ ‫تجدها‬ ً‫الت‬Html.‫السابق‬ ‫ملفك‬ ‫كتابة‬ ‫باستطاعتك‬ ‫فإن‬ ‫أخرى‬ ‫وبعبارة‬
:ً‫التال‬ ‫بالشكل‬
<HTML><HEAD><TITLE> This is a test Webpage </TITLE></HEAD><BODY>
Wow, I'm writing my first webpage </BODY></HTML>‎
:ً‫التال‬ ‫بالشكل‬ ‫أو‬
<HTML> <HEAD> <TITLE>
<‎/TITLE>
<‎/HEAD>
<BODY>
Wow, I'm writing my first webpage
<‎/BODY>
<‎/HTML>
‫ن‬ ‫على‬ ‫ستحصل‬ ‫الحاالت‬ ‫كل‬ ً‫وف‬.‫النتٌجة‬ ‫فس‬
‫وبداٌة‬ ‫الفقرة‬ ‫نهاٌة‬ ‫تحدٌد‬ ‫ٌمكن‬ ‫وكٌف‬ ‫سطر‬ ‫كل‬ ً‫ف‬ ‫المكتوب‬ ‫النص‬ ‫بمقدار‬ ‫التحكم‬ ‫ٌمكن‬ ‫كٌف‬ ‫إذن‬ ،‫تتساءل‬ ‫قد‬ ‫واآلن‬
‫تلٌها؟‬ ً‫الت‬ ‫الفقرة‬
‫الوسم‬ ‫نستخدم‬ ‫سوف‬ ‫وسم‬ ‫له‬ ‫لٌس‬ ‫أي‬ ،‫مفرد‬ ‫الوسم‬ ‫هذا‬ ‫أن‬ ‫(الحظ‬ ‫جدٌد‬ ‫بسطر‬ ‫والبدء‬ .‫للسطر‬ ‫النهاٌة‬ ‫لتحدٌد‬
.)‫نهاٌة‬

4
‫ونعود‬ً‫التال‬ ‫بالشكل‬ ‫ٌصبح‬ ً‫لك‬ ‫الملف‬ ‫بتعدٌل‬ ‫قم‬ ،‫السابق‬ ‫المثال‬ ‫إلى‬
<HTML>
<HEAD>
<TITLE>
<‎/TITLE>
<‎/HEAD>
<BODY>
Wow, I'm writing my ‎
first webpage
<‎/BODY>
<‎/HTML>
‫الوسم‬ ‫أٌضا‬ ‫وهناك‬‫جدٌد‬ ‫بسطر‬ ‫وٌبدأ‬ ‫الفقرة‬ ‫أو‬ ‫السطر‬ ً‫ٌنه‬ ‫أنه‬ ‫أي‬ ‫السابق‬ ‫الوسم‬ ‫عمل‬ ‫بنفس‬ ً‫ا‬‫تقرٌب‬ ‫ٌقوم‬ ‫الذي‬
.‫الفقرات‬ ‫بٌن‬ ‫فارغ‬ ً‫إضاف‬ ‫سطر‬ ‫إضافة‬ ‫مع‬ ‫لكن‬
<HTML>
<HEAD>
<TITLE>
<‎/TITLE>
<‎/HEAD>
<BODY>
Wow, I'm writing my ‎
first webpage
<‎/BODY>
<‎/HTML>

5
‫الوسم‬ ‫باستخدام‬ ‫إال‬ ‫وبعددها‬ ‫بها‬ ‫التحكم‬ ‫نستطٌع‬ ‫ال‬ ‫لذلك‬ ‫خاصة‬ ً‫ا‬‫رموز‬ ‫فتعتبر‬ ‫الفراغات‬ ‫أما‬‎ ‎‫(واأل‬ً‫ه‬ ‫حرف‬
‫للعبارة‬ ‫اختصار‬NonBreakable Space.)‫هذا‬ ‫كتابة‬ ‫إال‬ ‫علٌك‬ ‫ما‬ ‫وآخر‬ ‫نص‬ ‫بٌن‬ ‫فراغات‬ ‫عدة‬ ‫إدخال‬ ‫أردت‬ ‫وإذا‬
‫المطلوب‬ ‫الفراغات‬ ‫عدد‬ ‫بنفس‬ ‫الوسم‬‫ه‬.‫هنا‬ ‫الصغٌرة‬ ‫باألحرف‬ ‫التقٌد‬ ‫علٌك‬ ‫ٌجب‬ ‫كما‬ .
:ً‫التال‬ ‫بالشكل‬ ‫ملفنا‬ ‫ونكتب‬ ‫المفكرة‬ ‫إلى‬ ‫لنعد‬ ‫إذن‬
<HTML>
<HEAD>
<TITLE>
<‎/TITLE>
<‎/HEAD>
<BODY>
Wow,    ‎
I'm     writing   ‎
‎  my     first     webpage
<‎/BODY>
<‎/HTML>

6
‫والخلفٌات‬ ‫األلوان‬ ‫باستخدام‬ ‫الحٌوٌة‬ ‫بعض‬ ‫لصفحتك‬ ‫أضف‬ ،‫الصفحة‬ ‫تنسٌق‬
‫ال‬ ‫هذا‬ ً‫ف‬ ‫نقوم‬ ‫سوف‬‫جزء‬‫الوسم‬ ‫إلى‬ ‫إضافتها‬ ‫ٌمكن‬ ً‫الت‬ ‫الخصائص‬ ‫على‬ ‫بالتعرف‬<BODY>‫التحكم‬ ‫أجل‬ ‫من‬
‫باألل‬ ‫ٌتعلق‬ ‫فٌما‬ ‫وخصوصا‬ ،‫للصفحة‬ ‫العام‬ ‫بالشكل‬.‫وان‬‫الدرس‬ ً‫ف‬ ‫بكتابتها‬ ‫قمنا‬ ً‫الت‬ ‫الصفحة‬ ‫تذكر‬ ‫زلت‬ ‫ال‬ ‫أنت‬ ً‫ا‬‫طبع‬
‫ٌعتمدها‬ ً‫الت‬ ‫اإلفتراضٌة‬ ‫اإلعدادات‬ ً‫ه‬ ‫وهذه‬ .‫أسود‬ ‫لونه‬ ً‫ا‬ٌ‫نسب‬ ‫صغٌر‬ ‫وخط‬ ‫رمادٌة‬ ‫بخلفٌة‬ ‫بسٌطة‬ ‫صفحة‬ .‫األول‬
‫أخرى‬ ‫إعدادات‬ ‫بتحدٌد‬ ‫نحن‬ ‫نقوم‬ ‫ال‬ ‫عندما‬ ‫المتصفح‬‫هذ‬ ‫أمثلة‬ ‫لتوضٌح‬ ‫هذه‬ ‫صفحتنا‬ ‫باستخدام‬ ‫نستمر‬ ‫سوف‬‫الدرس‬ ‫ا‬
‫نفسها‬ ‫الصفحة‬ ‫لمحتوٌات‬ ‫المخصص‬ ‫الجزء‬ ً‫ف‬ ‫ٌتركز‬ ‫عملنا‬ ‫أن‬ ‫طالما‬ ‫البداٌة‬ ‫وسوم‬ ‫كتابة‬ ‫بتكرار‬ ‫أقوم‬ ‫لن‬ ‫لكن‬ ،ً‫ا‬‫أٌض‬
‫الوسمٌن‬ ‫ضمن‬ ‫أي‬<BODY< ... >‎/BODY.>
‫خاصٌة‬ ‫كلمة‬ ‫نطلق‬(Attribute)‫تعمل‬ ‫الذي‬ ‫الشكل‬ ‫أو‬ ‫الكٌفٌة‬ ‫تحدٌد‬ ‫أجل‬ ‫من‬ ،‫الوسوم‬ ‫إلى‬ ‫تضاف‬ ً‫الت‬ ‫التعابٌر‬ ‫على‬
‫فتحدد‬ ‫الخاصٌة‬ ‫أما‬ ‫به‬ ‫القٌام‬ ‫ٌجب‬ ‫الذي‬ ‫العمل‬ ‫عن‬ ‫المتصفح‬ ‫بإخبار‬ ‫ٌقوم‬ ‫الوسم‬ ‫فإن‬ ‫أخرى‬ ‫وبعبارة‬ .‫الوسوم‬ ‫هذه‬ ‫بها‬
.‫العمل‬ ‫هذا‬ ‫أداء‬ ‫بها‬ ‫سٌتم‬ ً‫الت‬ ‫الكٌفٌة‬:‫التالٌة‬ ‫الشٌفرة‬ ‫تأمل‬
‎<BODY BGCOLOR="FFFFFF">‎
...
<‎/BODY>
‫الخاصٌة‬ ‫بإضافة‬ ‫قمت‬ ‫لقد‬BGCOLOR‫الوسم‬ ‫إلى‬<BODY>‫أما‬ .‫للصفحة‬ ‫الخلفٌة‬ ‫لون‬ ‫بتحدٌد‬ ‫تقوم‬ ً‫وه‬ ،
FFFFFF‫ولو‬ ) " " ً‫إشارت‬ ‫بٌن‬ ‫مكتوبه‬ ‫أنها‬ ‫(الحظ‬ ،‫األبٌض‬ ‫اللون‬ ‫هنا‬ ‫وهو‬ ‫المختار‬ ‫اللون‬ ‫تمثل‬ ً‫الت‬ ‫القٌمة‬ ً‫فه‬
‫الرمز‬ ‫لكتبت‬‫األسود‬ ‫اللون‬ ‫تمثٌل‬ ‫أردت‬000000.‫الرمز‬ ‫أو‬9966CC......‫الفاتح‬ ‫األزرق‬ ‫للون‬
:‫يًٓح‬ ‫يالحظح‬
‫ت‬‫انًرظف‬ ‫ؼغ‬‫إشاسج‬ ‫تٕػغ‬ ‫إال‬ ٌ‫األنٕا‬ ‫سيٕص‬ ٗ‫ػه‬ ‫ذرؼشف‬ ‫ال‬ ‫حاخ‬#‫األفؼم‬ ٍ‫ي‬ ‫نزنك‬ ،‫انشيٕص‬ ِ‫ْز‬ ‫لثم‬
‫دائًا‬ ‫اعرخذايٓا‬‫انشكم‬ ‫تٓزا‬ ‫نرظثح‬.="#FFFFFF">‎
‫وبالنسب‬‫األساسٌة‬ ‫األلوان‬ ‫لبعض‬ ‫ة‬.‫عشرٌة‬ ‫السداس‬ ‫األرقام‬ ‫من‬ ً‫ال‬‫بد‬ ‫مباشرة‬ ‫األلوان‬ ‫هذه‬ ‫أسماء‬ ‫استخدام‬ ‫الممكن‬ ‫من‬ ،
‫هذ‬ ‫ٌوضح‬‫جدول‬ ‫وهذا‬:‫ومسمٌاتها‬ ‫األلوان‬ ‫ه‬
BlackWhite
RedGreen
MarronPurple
NavyBlue
TealLime
GraySilver
OliveAqua
FuchsiaYellow
... ‫خصائصها‬ ‫و‬ ‫الوسوم‬ ‫إلى‬ ‫ونعود‬

7
‎<BODY BGCOLOR="#FFFFFF" BACKGROUND="image.jpg">‎
...
<‎/BODY>
‫الخاصٌة‬ ‫تقوم‬BACKGROUND‫صو‬ ‫بتحدٌد‬‫التالٌة‬ ‫الصورة‬ ‫استخدمت‬ ‫وقد‬ ‫للصفحة‬ )‫جدران‬ ‫(ورق‬ ‫كخلفٌة‬ ‫رة‬
‫والمسماة‬image.jpg‫النتٌجة‬ ‫هذه‬ ‫وكانت‬ ً‫صفحت‬ ً‫ف‬
‫وأ‬ ‫التجانب‬ ‫بطرٌقة‬ ‫الصورة‬ ‫عرض‬ ‫بتكرار‬ ‫قام‬ ‫قد‬ ‫المتصفح‬ ‫أن‬ ‫تالحظ‬ً‫ا‬‫أٌض‬ ‫حجبت‬ ‫بحٌث‬ .‫الشاشة‬ ‫كل‬ ً‫تغط‬ ‫أصبحت‬ ‫نها‬
‫الخاصٌة‬ ‫خالل‬ ‫(من‬ ‫الخلفٌة‬ ‫كلون‬ ‫حددناه‬ ‫الذي‬ ‫األبٌض‬ ‫اللون‬BGCOLOR)‫ال‬ ‫عندما‬ ‫فقط‬ ‫ٌظهر‬ ‫اللون‬ ‫أن‬ ‫والحقٌقة‬
‫بأنها‬ ‫توصف‬ ‫القدٌمة‬ ‫المتصفحات‬ ‫بعض‬ ‫وأن‬ ‫خاصة‬ ً‫ا‬‫إحتٌاط‬ ‫تحدٌده‬ ‫ٌفضل‬ ‫ذلك‬ ‫ومع‬ .‫كخلفٌة‬ ‫ما‬ ‫صورة‬ ‫باستخدام‬ ‫نقوم‬
‫نصٌة‬ ‫متصفحات‬Text-BasedBrowsers‫المستخدمٌن‬ ‫بعض‬ ‫هناك‬ ‫ربما‬ ‫أو‬ .)‫الصور‬ ‫عرض‬ ‫بإمكانها‬ ‫لٌس‬ ‫(أي‬
‫ا‬ ‫عرض‬ ‫خٌار‬ ‫بإلغاء‬ ‫قاموا‬ ‫الذٌن‬.‫متصفحاتهم‬ ‫من‬ ً‫ا‬ٌ‫تلقائ‬ ‫لصور‬
‫وسم‬ ً‫ف‬ ‫الخصائص‬ ً‫باق‬ ‫مع‬ ‫ولنكمل‬<BODY:>‫الوصالت‬ ‫معظم‬ ‫أن‬ ‫لإلنترنت‬ ‫استخدامك‬ ‫خالل‬ ‫الحظت‬ ‫ربما‬
‫التشعبٌة‬(Links)‫ل‬ ‫علٌها‬ ‫تنقر‬ ً‫الت‬،‫األزرق‬ ‫باللون‬ ‫ممٌزة‬ ً‫ا‬‫دائم‬ ً‫ه‬ ‫الشبكة‬ ‫على‬ ‫أخرى‬ ‫مواقع‬ ‫أو‬ ‫صفحات‬ ‫إلى‬ ‫تنقلك‬
ً‫ال‬‫فع‬ ‫بزٌارتها‬ ‫قمت‬ ً‫الت‬ ‫الوصالت‬ ‫وأن‬‫القرمزي‬ ‫إلى‬ ‫لونها‬ ‫تحول‬ ‫قد‬‫تعتمدها‬ ً‫الت‬ ‫اإلفتراضٌة‬ ‫األلوان‬ ً‫ه‬ ‫هذه‬ ،
‫استخدام‬ ‫ترٌد‬ ‫ربما‬ ‫ببساطة‬ ‫أو‬ .‫النظام‬ ‫هذا‬ ‫تغٌٌر‬ ‫وترٌد‬ ‫ذلك‬ ‫ٌعجبك‬ ‫ال‬ ‫قد‬ ‫لكن‬ .‫المتصفحات‬‫لخلفٌة‬ ‫غامقة‬‫صورة‬ ‫أو‬ ‫لون‬
‫العمل؟‬ ‫فما‬ .‫نفسها‬ ‫الصفحة‬ ‫نص‬ ‫اختفاء‬ ‫حتى‬ ‫أو‬ ‫الوصالت‬ ‫هذه‬ ‫اختفاء‬ ‫إلى‬ ‫سٌؤدي‬ ‫بما‬ ‫الصفحة‬‫الخصائص‬ ‫هذه‬ ‫إلٌك‬
:‫النصوص‬ ‫ألوان‬ ً‫ف‬ ‫بالتحكم‬ ‫تقوم‬ ً‫الت‬
‎TEXT="#rrggbb"‎‫للصفحة‬ ً‫األساس‬ ‫النص‬ ‫لون‬ ‫تحدٌد‬
‎LINK="#rrggbb"‎‫التشعبٌة‬ ‫الوصالت‬ ‫لون‬ ‫تحدٌد‬
‎VLINK="#rrggbb"‎‫زٌارتها‬ ‫تمت‬ ً‫الت‬ ‫التشعبٌة‬ ‫الوصالت‬ ‫لون‬ ‫تحدٌد‬visited links
‎ALINK="#rrggbb"‎‫علٌها‬ ‫النقر‬ ‫ٌتم‬ ‫عندما‬ ‫أي‬ ‫الفعالة‬ ‫التشعبٌة‬ ‫الوصلة‬ ‫لون‬ ‫تحدٌد‬active links
‫باأللوان‬ ‫الخاصة‬ ‫الرموز‬ ‫أكتب‬ ‫وسوف‬ .‫واحدة‬ ‫عبارة‬ ً‫ف‬ ‫السابقة‬ ‫الخصائص‬ ‫نجمل‬ ‫دعنا‬ ،‫واآلن‬ً‫الت‬ ‫األلوان‬ ‫تلك‬ ‫بنفس‬
.‫العبارة‬ ‫داخل‬ ‫الخصائص‬ ‫هذه‬ ‫كتابة‬ ً‫ف‬ ‫للترتٌب‬ ‫أهمٌة‬ ‫ال‬ ‫أنه‬ ‫إلى‬ ‫نظرك‬ ‫وألفت‬ .‫تمثلها‬

8
‎<BODY BACKGROUND="backimag.jpg"‎
BGCOLOR="#ffff00"‎
TEXT="#000066"‎
LINK="#00ff00"‎
VLINK="#ff0000"‎
ALINK="#999999">‎
‫الص‬ ‫حددت‬ ‫قد‬ ً‫أنن‬ !‫تحللها‬ ‫أن‬ ‫حاول‬‫ورة‬backimag.jpg‫للصفحة‬ ‫كخلفٌة‬‫للخلفٌة‬ ‫األصفر‬ ‫اللون‬ ‫اخترت‬ ً‫وأنن‬ ‫؟‬
‫التشعبٌة‬ ‫الوصالت‬ ‫أما‬ ‫الغامق؟‬ ‫األزرق‬ ‫باللون‬ ‫سٌظهر‬ ‫النص‬ ‫وان‬ ‫كخلفٌة)؟‬ ‫السابقة‬ ‫الصورة‬ ‫عرض‬ ‫عدم‬ ‫حالة‬ ً‫(ف‬
‫ب‬ ‫فستظهر‬ ‫الفعالة‬ ‫الوصلة‬ ‫تلك‬ ‫أما‬ .‫األحمر‬ ‫باللون‬ ‫ستظهر‬ ‫زٌارتها‬ ‫تمت‬ ً‫الت‬ ‫والوصالت‬ ،‫أخضر‬ ‫فلونها‬‫الرمادي‬ ‫اللون‬
.‫بالفأرة‬ ‫علٌها‬ ‫النقر‬ ‫لحظة‬ ً‫ف‬
‫وتنسٌقاتها‬ ‫وأحجامها‬ ‫أنواعها‬ ‫إختٌار‬ ،‫الصفحة‬ ً‫ف‬ ‫بالخطوط‬ ‫التحكم‬
ٙ‫ف‬ٙ‫انر‬ ‫انثغٛطح‬ ‫طفحرُا‬‫فٛٓا‬ ‫ػًهُا‬‫تانرؼا‬ ‫َمى‬ ‫نى‬ ‫إَُا‬‫انخطٕؽ‬ ‫يغ‬ ‫يم‬ٗ‫ػه‬ ‫ذشكُاْا‬ ‫أَُا‬ ٘‫أ‬ .‫األشكال‬ ٍ‫ي‬ ‫شكم‬ ٘‫تأ‬‫ٔال‬
.‫االفرشاػٛح‬ ‫إػذاداذٓا‬ِ‫ْز‬ ٌ‫فئ‬ ‫ٔتانًُاعثح‬ّ‫َٕػ‬ ،٘‫ػاد‬ ‫خؾ‬ ْٙ ‫اإلػذاداخ‬Times New Romanًّ‫ٔحع‬3
.)‫اإلَرشَد‬ ‫يرظفحاخ‬ ‫(تًمٛاط‬< ْٕ ‫تانخطٕؽ‬ ‫انخاص‬ ‫األٔل‬ ‫انٕعى‬/FONT< ... >FONT>
‫ٔانٕعٕو‬ ‫انٕعى‬ ‫ْزا‬ ‫يغ‬ ‫َغرخذيٓا‬ ٙ‫انر‬ ‫انخظائض‬ ‫أيا‬ .‫ٔانحعى‬ ٌٕ‫ٔانه‬ ‫انُٕع‬ ‫حٛس‬ ٍ‫ي‬ ‫تانخطٕؽ‬ ‫تانرحكى‬ ‫ٚمٕو‬ْٕٔ
ٙ‫كانران‬ ٙٓ‫ف‬ ‫نهخطٕؽ‬ ٖ‫األخش‬:
Face‫هذه‬ ً‫وف‬ .ً‫ا‬‫مع‬ ‫نوع‬ ‫من‬ ‫أكثر‬ ‫بتحدٌد‬ ‫نقوم‬ ‫وقد‬ ،‫نرٌده‬ ‫الذي‬ ‫الخط‬ ‫نوع‬ ‫بتحدٌد‬ ‫الخاصٌة‬ ‫هذه‬ ‫تقوم‬
‫إعتماد‬ ‫ٌتم‬ ‫الموقع‬ ‫ٌتصفح‬ ‫الذي‬ ‫الشخص‬ ‫جهاز‬ ‫على‬ ً‫ال‬‫أو‬ ‫المحدد‬ ‫الخط‬ ‫ٌتواجد‬ ‫لم‬ ‫إذا‬ ‫الحالة‬
‫وهكذا‬ ... ً‫الثان‬ ‫الخط‬
‎‎
... Text...
<‎/FONT>
Colorٌ‫ف‬ ‫تحدثنا‬ ً‫الت‬ ‫األلوان‬ ‫تحدٌد‬ ‫مبادئ‬ ‫بنفس‬ ‫وذلك‬ ،‫الخط‬ ‫لون‬ ‫فتحدد‬ ‫الخاصٌة‬ ‫هذه‬ ‫أما‬‫ها‬
‎‎
... Text...
<‎/FONT>
Size.‫الخاصٌة‬ ‫هذه‬ ‫نستخدم‬ ‫الخط‬ ‫حجم‬ ‫ولتحدٌد‬‫و‬‫المت‬ ‫تستطٌع‬ ‫خط‬ ‫ألي‬ ‫أحجام‬ ‫سبعة‬ ‫هناك‬‫صفحات‬
.‫علٌها‬ ‫التعرف‬‫رقم‬ ‫كتابة‬ ‫ٌتم‬ ‫حٌث‬ .‫المباشر‬ ‫أولهما‬ :‫بأسلوبٌن‬ ‫المطلوب‬ ‫الحجم‬ ‫بتحدٌد‬ ‫ونقوم‬
‫بٌن‬ ‫ما‬ ‫ٌتراوح‬1-7.‫مباشرة‬ ‫نرٌده‬ ‫الذي‬ ‫الحجم‬ ‫نختار‬ ‫أننا‬ ‫أي‬ .
‎‎
... Text...
<‎/FONT>
‫من‬ ‫األرقام‬ ‫تكتب‬ ‫حٌث‬ :ً‫النسب‬ ‫فهو‬ ً‫الثان‬ ‫األسلوب‬ ‫أما‬1‫إلى‬6‫إ‬ ‫مرفقة‬‫أو‬ + ‫بإشارة‬ ‫ما‬

9
‫بإشارة‬-.
‎‎
... Text...
<‎/FONT>
‫األرقام‬ ‫فإن‬ ‫الطرٌقة‬ ‫هذه‬ ً‫وف‬1-6( ‫التصغٌر‬ ‫أو‬ )+( ‫التكبٌر‬ ‫درجات‬ ‫تمثل‬-ً‫نسبة‬ ‫وذلك‬ ‫للخط‬ )
+ ‫الرقم‬ ‫فمثال‬ .ً‫االفتراض‬ ‫الحجم‬ ‫إلى‬4ً‫االفتراض‬ ‫الحجم‬ ‫عن‬ ‫درجات‬ ‫أربع‬ ‫الخط‬ ‫تكبٌر‬ ً‫ٌعن‬
‫وهو‬3‫با‬ ‫ٌصبح‬ ‫أنه‬ ‫أي‬ ،‫لحجم‬7‫الرقم‬ ‫فأن‬ ‫بالمقابل‬ .-1‫أي‬ ‫واحدة‬ ‫درجة‬ ‫الخط‬ ‫تصغٌر‬ ً‫ٌعن‬
‫بالحجم‬ ‫ٌصبح‬2.
.‫للخطوط‬ ‫أحجام‬ ‫سبعة‬ ‫من‬ ‫أكثر‬ ‫على‬ ‫الحصول‬ ‫نستطٌع‬ ‫ال‬ ً‫النسب‬ ‫األسلوب‬ ً‫ف‬ ‫حتى‬ ‫أنه‬ ‫الحظ‬
‫أصغر‬ ‫أو‬ ‫أكبر‬ ‫أرقام‬ ‫كتابة‬ ‫حاولنا‬ ‫وإن‬ ‫حتى‬
،‫انٕعى‬ ‫ْزا‬ ‫اعرخذاو‬ ‫كٛفٛح‬ ‫نك‬‫نرٕػح‬ ‫األيصهح‬ ‫تؼغ‬ِ‫ْٔز‬ٔ‫فحا‬. ‫تُفغك‬ ‫انُرٛعح‬ ٖ‫نرش‬ ‫ذعشترٓا‬ ‫ل‬
‎‎‎
This font is Arial, Size is 6, Color is Red
<‎/FONT>
‎‎
This font is Arial, Size is +3, Color is Red
<‎/FONT>
‎‎‎
This font is Times New Roman,Size is 5, Color is Blue
<‎/FONT>
‎‎
This font is Courier,Size is 2, Color is Maroon
<‎/FONT>
 This <‎/FONT>
 is <‎/FONT>
 multi<‎/FONT>
 colors,<‎/FONT>
 multi <‎/FONT>
 faces,
<‎/FONT>
 and <‎/FONT>
 multi<‎/FONT>
 sizes <‎/FONT>
 text
<‎/FONT>

11
C<‎/FONT>
O<‎/FONT>
L<‎/FONT>
O<‎/FONT>
R<‎/FONT>
S<‎/FONT>
< ْٕٔ ‫تانخطٕؽ‬ ‫انخاطح‬ ‫انٕعٕو‬ ٍ‫ي‬ َٙ‫انصا‬ ‫انٕعى‬ ٗ‫إن‬ ٌٜ‫ا‬ ‫َُرمم‬BASEFONT.>
ٚ‫ذحذ‬ ْٕ ّ‫ٔػًه‬‫نهظفحح‬ ‫تانُغثح‬ّ‫ٔخظائظ‬ ‫انخؾ‬ ‫َٕع‬‫ذ‬‫كهٓا‬‫عٛغرخذو‬ ٘‫انز‬ ٙ‫األعاع‬ ‫انخؾ‬ ‫َٕع‬ ‫ترؼشٚف‬ ‫ٚمٕو‬ َّ‫أ‬ ٘‫أ‬ .
.ًّ‫ٔحع‬ َّٕ‫ن‬‫ٔٚحذد‬ ‫َٓاٚرٓا‬ ٗ‫إن‬ ‫تذاٚرٓا‬ ٍ‫ي‬ ‫انظفحح‬ ٙ‫ف‬
‫يغ‬ ‫ٚرؼايم‬ َّ‫أ‬ ‫ؽانًا‬ ‫انُٓاٚح‬ ‫ٔعى‬ ٗ‫إن‬ ‫انحاظح‬ ‫يا‬ ‫تانطثغ‬ ‫نهُٓاٚح؟‬‫ٔعى‬ ٗ‫ػه‬ ٕ٘‫ٚحر‬ ‫ٔال‬ ‫يفشد‬ ‫ٔعى‬ َّ‫ا‬ ‫الحظد‬ ‫ْم‬
‫ٔي‬ ‫ككم‬ ‫انظفحح‬ٙ‫ف‬ ‫ػادج‬ ‫ٚكرة‬ ‫انٕعى‬ ‫ْزا‬ ٌ‫فئ‬ ‫نزنك‬.‫تزاذٓا‬ ‫فمشج‬ ٔ‫أ‬ ‫عطش‬ ٔ‫أ‬ ‫كهًح‬ ‫يغ‬ ‫ٔنٛظ‬ ،‫نٓا‬ ‫األعاعٛح‬ ‫اإلػذاداخ‬ ‫غ‬
< ‫ٔعى‬ ‫تؼذ‬ ‫يثاششج‬ ‫ٔٚفؼم‬ ،‫انًهف‬ ‫أٔل‬BODY‫انزكش‬ ‫عانفح‬ ‫انخظائض‬ ‫َفظ‬ٙٓ‫ف‬ ّ‫يؼ‬ ‫انًغرخذيح‬ ‫انخظائض‬ ‫أيا‬ .>
< ‫يغ‬FONT‫انخاطٛح‬ ‫اعرخذاو‬ ‫(َغرطٛغ‬ ، >Nameٍ‫ي‬ ‫تذال‬ّ‫يؼ‬Face‫ا‬ ‫ٔتُفظ‬ .).‫اخرالفاخ‬ ٘‫أ‬ ٌٔ‫ٔتذ‬ ‫نطشٚمح‬
:‫كًصال‬ ‫انشٛفشج‬ ِ‫ْز‬ ‫ٔإنٛك‬
‎<BASEFONT Name="Arial" COLOR="#FF0000" SIZE="5">‎
ّ‫َٕػ‬‫ٚظثح‬ ‫تحٛس‬ ‫نهظفحح‬ ٙ‫االفرشاػ‬ ‫انخؾ‬ ‫ترؼذٚم‬ ‫ٚمٕو‬ َّ‫أ‬ ‫َغرُرط‬ ‫انًصال‬ ‫ْزا‬ ‫ٔتذساعح‬Arialًّ‫ٔحع‬5َّٕ‫ٔن‬
‫ع‬ ‫انظفحح‬ ‫ذهك‬ ٙ‫ف‬ ‫انًكرٕتح‬ ‫انُظٕص‬ ‫كم‬ ٌ‫فئ‬ ٙ‫ٔتانران‬ .‫أحًش‬‫تاعرخذاو‬ ‫ؽثؼا‬ ‫َمى‬ ‫نى‬ ‫يا‬ .‫انخؾ‬ ٍ‫ي‬ ‫انًُؾ‬ ‫ْزا‬ ‫ػهٛٓا‬ ‫ٛطثك‬
< ‫انٕعٕو‬Font< ... >‎Font/‫ٔأكصش‬ ‫ذحذٚذا‬ ‫أكصش‬ ٙٓ‫ف‬ ،‫انغاتمح‬ ‫األيصهح‬ ٙ‫ف‬ ‫فؼهُا‬ ‫كًا‬ ‫تًظٓشْا‬ ‫ٔانرحكى‬ ‫نرؼذٚهٓا‬ >
< ‫انٕعى‬ ٍ‫ي‬ ‫يشَٔح‬BASEFONT>
‫أ‬ ‫ذزكش‬ ‫أال‬ .‫انظفحح‬ ‫نُض‬ٙ‫األعاع‬ ٌٕ‫انه‬ ‫ٔذغٛٛش‬ ٌ‫األنٕا‬ ٍ‫ػ‬ ‫انحذٚس‬ ‫ٔتًُاعثح‬‫انخاطٛح‬ ٍ‫ػ‬ ‫ذكهًُا‬ ‫انغاتك‬ ‫انذسط‬ ٙ‫ف‬ ‫َُا‬
Text< ‫انٕعى‬ ‫يغ‬ ‫ذكرة‬ ٙ‫انر‬Bodyَ ٌٕ‫ن‬ ‫نرحذٚذ‬ ‫اعرخذيُاْا‬ ٙ‫ٔانر‬ >...‫انظفحح‬ ‫ض‬
‫ٔخاطٛح‬ ‫انخاطٛح‬ ِ‫ْز‬ ٍٛ‫ت‬ ‫ذؼاسع‬‫ٕٚظذ‬ ‫ال‬Color< ‫انٕعى‬ ٙ‫ف‬BASEFONT‫اعرخذاو‬ ‫ذغرطٛغ‬ ‫تغاؽح‬‫تكم‬ ‫فأَد‬ >
< ‫انٕعى‬ ‫يغ‬ ‫انًحذد‬ ٌٕ‫انه‬ ٌ‫فئ‬ ‫كالًْا‬ ‫ٔاعرخذيد‬ ‫حذز‬ ‫ٔإرا‬ .‫طفحرك‬ ٙ‫ف‬ ‫يًُٓا‬ ٘‫أ‬BASEFONT٘‫انز‬ ْٕ >
.ِ‫ٔٚؼرًذ‬ ‫انًرظفح‬ ّ‫عٛطثم‬
**ٍٚٔ‫انؼُا‬ ‫نرًٛٛض‬ ‫ذغرخذو‬ ‫خاطح‬ ‫ٔعٕو‬Headings:ْٙٔ ‫اإلَرشَد‬ ‫طفحاخ‬ ٙ‫ف‬
<Hn< ... >‎/Hn>
‫ٔحشف‬nٍٛ‫ت‬ ‫سلى‬ ْٕ1-9‫ًٚص‬.ٌ‫انؼُٕا‬ ٖٕ‫يغر‬ ‫م‬
<H1> Heading 1 <‎/H1>
‫انٕعٕو‬ ٙ‫ٚه‬ ‫ٔفًٛا‬ .‫انُظٕص‬ ٗ‫إن‬ ‫إػافرٓا‬ ٍ‫ًٚك‬ ٙ‫انر‬ ‫ٔانرأشٛشاخ‬ ‫انرُغٛماخ‬ ٗ‫إن‬ ٌٜ‫ا‬ ٙ‫َٔأذ‬‫تًصال‬ ‫يرثٕػح‬ ‫تٓا‬ ‫انخاطح‬:
:‫انرانٛح‬ ‫انٕعٕو‬ ّ‫ن‬‫َٔغرخذو‬ ،)‫انؼشٚغ‬ ‫(األعٕد‬ ‫انغايك‬ ‫انخؾ‬ *
 ... <‎/B>

11
 Bold Text <‎/B>This is Bold Text
‫انًائم‬ ‫انخؾ‬ *
 ... <‎/I>
 Italic Text <‎/I>This is Italic Text
‫انًغطش‬ ‫انخؾ‬ *
 ... <‎/U>
 Undelined Text <‎/U>elined TextUndThis is
‫انًشذفغ‬ ‫انخؾ‬ *
 ... <‎/SUP>
 Superscript Text <‎/SUP>This is Superscript Text
‫انًُخفغ‬ ‫انخؾ‬ *
 ... <‎/SUB>
 Subscript Text <‎/SUB>This is Subscript Text
‫خؾ‬ ّ‫ٚؼرشػ‬ ‫َض‬ *
<S> ... <‎/S>
<S> Striked Text <‎/S>This is Striked Text too
:‫يؼا‬ ‫ذُغٛماخ‬ ‫ػذج‬ ٍٛ‫ت‬ ‫ذعًغ‬ ‫أيصهح‬ ِ‫ْٔز‬

This is a Bold, Italic and Underlined Text
<‎/U> <‎/I> <‎/B>
This is a Bold, Italicand Underlined Text

This text is red,size +3, Italic, and Underlined
<‎/I> <‎/U> <‎/FONT>
This text is red, size +3, Italic, andUnderlined

12
‫انٕلد‬ ‫َفظ‬ ٙ‫ف‬ ‫يؼا‬ ‫ٔذُغٛماخ‬ ‫ٔعٕو‬ ‫ػذج‬‫اعرخذاو‬ ‫تئيكاَُا‬ ٌ‫أ‬ :‫أٔنٓا‬ ‫يؼُٛح‬ ‫يغائم‬ ‫ذٕػٛح‬ ‫األيصهح‬ ِ‫ْز‬ ٍ‫ي‬ ‫أسدخ‬ ‫ٔلذ‬
ٔ .)‫انخطٕؽ‬ ‫نٕعٕو‬ ‫فمؾ‬ ‫ٔنٛظ‬ ‫انٕعٕو‬ ‫نعًٛغ‬ ‫(ٔرنك‬ .‫انُض‬ ٍ‫ي‬ ‫انًمطغ‬ ‫ٔنُفظ‬ِ‫ْز‬ ‫نرشذٛة‬ ‫أًْٛح‬ ‫ال‬ ،‫عاتما‬ ‫ركشخ‬ ‫كًا‬
...‫أٔال‬ ‫ٔسد‬ ‫أٚٓا‬ ‫ٔال‬ ‫انٕعٕو‬ٍ‫نك‬
:ٙ‫انران‬ ‫انشعى‬ ٗ‫إن‬ ‫أَظش‬ ‫كٛف؟‬ ...!‫تُٛٓا‬‫انرذاخم‬ ‫ػذو‬ ‫يشاػاج‬ ‫ٚعة‬ ‫ٔاحذ‬ ‫يمطغ‬ ٙ‫ف‬ ‫انًرؼذدج‬ ‫انٕعٕو‬ ‫اعرخذاو‬ ‫ػُذ‬
:‫خطأ‬ ْٕ ‫انرانٛح‬ ‫تانطشق‬ ‫انغاتمح‬ ‫انٕعٕو‬ ‫فكراتح‬

<‎/B> <‎/I> <‎/U>

<‎/B> <‎/U> <‎/I>
‫بٌا‬ ‫لترتٌب‬ ‫القوائم‬ ‫واستخدم‬ ،‫صفحتك‬ ‫وتنظٌم‬ ‫بتنسٌق‬ ‫قم‬‫ناتك‬
‫فانرشذٛة‬ .‫ػاو‬‫تشكم‬ ‫ٔذُغٛمٓا‬ ‫انظفحاخ‬ ‫ٔذشذٛة‬ ‫خاص‬ ‫تشكم‬ ‫تانفمشاخ‬ ‫انخاطح‬ ‫انٕعٕو‬ ‫َُالش‬ ‫عٕف‬ ‫انذسط‬ ‫ْزا‬ ٙ‫ف‬
.‫نهظفحح‬ ‫انؼشٚؼح‬ ‫انخطٕؽ‬ ‫فٓى‬ ّٛ‫ػه‬‫ٔذغٓم‬ ‫نظفحرك‬ ‫انماسا‬ ٔ‫أ‬ ‫انضائش‬ ‫اْرًاو‬ ‫نعزب‬ ٗ‫األٔن‬ ‫انخطٕج‬ ْٕ< ‫فانٕعى‬P>
< ‫ٔانٕعى‬ .‫انفمشج‬ ‫تئَٓاء‬ ‫ٚمٕو‬BRٙ‫انحان‬ ‫انغطش‬ ُٙٓٚ>‫ٔانٕعى‬ .‫ظذٚذ‬ ‫عطش‬ ٗ‫إن‬ ‫انُض‬ ‫ُٔٚمم‬‎nbsp;‎&‫تئػافح‬ ‫ٚمٕو‬
‫انًطهٕت‬ ‫انفشاغاخ‬ ‫ػذد‬ ‫تُفظ‬ ّ‫كراتر‬ ‫ذكشاس‬ ‫ٔٚعة‬ ،‫انفشاغاخ‬ّ.
< ‫انٕعى‬ ٌ‫إ‬ ‫لهد‬ ‫نمذ‬P< ‫يضدٔض‬ ‫كٕعى‬ ‫أٚؼا‬ ‫ٚغرخذو‬ ُّ‫نك‬ ‫يفشد‬ ‫ٔعى‬ ْٕ >P< ... >‎/Pٍ‫ي‬ ‫ُُا‬ّ‫ك‬ًٚ ‫انحانح‬ ِ‫ْز‬ ٙ‫ٔف‬ >
‫ٚغرخذ‬ ‫حٛس‬ ‫فٛٓا‬ ‫انُض‬ ِ‫ٔإذعا‬ ‫انفمشج‬ ِ‫إذعا‬ ‫ذحذٚذ‬‫انخظائض‬ ّ‫يؼ‬ ‫و‬ALIGN, DIR.
‫فالخاصٌة‬ALIGN‫القٌم‬ ‫تأخذ‬ ً‫وه‬ ‫الفقرة‬ ‫محاذاة‬ ‫تحدد‬Left،Center, Right:‫التالٌة‬ ‫باألمثلة‬‫وأوضحها‬
 This is a left-aligned paragraph<‎/P>
This is left-aligned paragraph
 This is right-aligned paragraph
This is a right-aligned paragraph

13
 This is a centered paragraph
This is a centered paragraph
‫الوسوم‬ ‫استخدام‬ ‫نستطٌع‬ ‫الصفحة‬ ً‫ف‬ ‫عام‬ ‫بشكل‬ ‫الكائنات‬ ‫أو‬ ‫الفقرات‬ ‫لتوسٌط‬ ‫كذلك‬<CENTER... >
</CENTER>
<CENTER> This is a centered text</CENTER>
This is a centered text
‫الخاصٌة‬ ‫أما‬DIR‫مع‬ ً‫ا‬‫أٌض‬ ‫نستخدمها‬ ً‫والت‬‫القٌم‬ ‫وتأخذ‬ ‫النص‬ ‫قراءة‬ ‫إتجاه‬ ‫بتحدٌد‬ ‫فتقوم‬
LTR‫الٌمٌن‬ ‫إلى‬ ‫الٌسار‬ ‫من‬ ‫النص‬ ‫إتجاه‬(Left To Right)
RTL‫الٌسار‬ ‫إلى‬ ‫الٌمٌن‬ ‫من‬ ‫النص‬ ‫إتجاه‬(Right To Left)
‫الخاصٌة‬ ‫هذه‬ ‫(تذكر‬)‫العربٌة‬ ‫باللغة‬ ‫صفحات‬ ‫كتابة‬ ‫عند‬ ‫مهمة‬ ً‫فه‬ ً‫ا‬‫جٌد‬
‫بإعداده...!؟‬ ‫قمت‬ ‫كٌف‬ ‫تستنتج‬ ‫أن‬ ‫وحاول‬ ‫الشكل‬ ‫هذا‬ ‫تأمل‬ ‫واآلن‬
ABCD
EFGH
IJKL
MNOP
QRST
‫الفراغات‬ ‫وسوم‬ ‫من‬ ً‫ا‬‫كبٌر‬ ً‫ا‬‫عدد‬ ‫استخدمت‬ ً‫أن‬ ‫إلى‬ ‫توصلت‬ ‫ربما‬‎ ‎‫السطر‬ ‫ونهاٌة‬<BR.>،ً‫ا‬‫حسن‬‫إستنتاجك‬
‫وضعه‬ ‫هو‬ ‫الشكل‬ ‫هذا‬ ‫إعداد‬ ‫بعد‬ ‫فعلته‬ ‫ما‬ ‫كل‬ ‫بل‬ .‫هنا‬ ‫الوسوم‬ ‫هذه‬ ‫من‬ ً‫ا‬ٌ‫أ‬ ‫أستخدم‬ ‫لم‬ ‫فأنا‬ ً‫ا‬‫دقٌق‬ ‫لٌس‬ ‫ولكنه‬ ‫به‬ ‫بأس‬ ‫ال‬
:‫ضمن‬
<PRE> ... </PRE>
‫لكلمة‬ ‫اختصار‬ ‫وهما‬Preformated‫تم‬ ‫الذي‬ ‫المسبق‬ ‫بالتنسٌق‬ ‫الشكل‬ ‫هذا‬ ‫احتفظ‬ ‫فقد‬ ‫وبالفعل‬ .ً‫ا‬‫مسبق‬ ‫المنسق‬ ‫أي‬
‫لك‬ .‫به‬ ‫إعداده‬:ً‫كالتال‬ ‫النتٌجة‬ ‫لكانت‬ ‫الوسوم‬ ‫هذه‬ ‫ضمن‬ ‫بوضعه‬ ‫أقم‬ ‫لم‬ ‫ولو‬ ‫المسافات‬ ‫موحد‬ ‫خط‬ ‫إلى‬ ‫الخط‬ ‫تحوٌل‬ ‫تم‬ ‫ن‬
A B C D E F G H I J K L M N O P Q R S T
‫مع‬ ‫فقط‬ ‫بل‬ .‫األلوان‬ ‫أو‬ ‫للخطوط‬‫متعددة‬ ‫تنسٌقات‬ ‫إلى‬ ‫فٌها‬ ‫نحتاج‬ ‫ال‬ ً‫الت‬ ‫الفقرات‬ ‫مع‬ ‫ٌستخدم‬ ‫الوسم‬ ‫هذا‬ ‫أن‬ ‫الحظ‬
‫مو‬ ‫العادٌة‬ ‫الفقرات‬.‫والتنسٌقات‬ ‫الخط‬ ‫حدة‬

14
*‫القوائم‬
‫لغة‬ ‫تحتوي‬HTML‫وهناك‬ .‫خٌارات‬ ‫عدة‬‫وباستخدام‬ ‫قوائم‬ ً‫ف‬ ‫البٌانات‬ ‫بتنظٌم‬ ‫الخاصة‬ ‫الوسوم‬ ‫من‬ ‫مجموعة‬ ‫على‬
:‫القوائم‬ ‫من‬ ‫نوعٌن‬‫المتسلسلة‬ ‫أولهما‬Ordered Lists.ً‫رقم‬ ‫تعداد‬ ‫اٌضا‬ ‫علٌها‬ ‫وٌطلق‬: ‫مثل‬
‫بعض‬ ‫أسماء‬‫مدن‬‫الغربٌة‬ ‫محافظة‬
1.‫ال‬ ‫المحلة‬‫كبرى‬
2.‫طنطا‬
3.‫الزٌات‬ ‫كفر‬
4.‫بسٌون‬
5.‫السنطة‬
6.‫سمنود‬
‫المتسلسلة‬ ‫غٌر‬ ‫القوائم‬ ‫وثانٌهما‬Unordered Lists‫و‬‫التعدا‬ ‫اٌضا‬ ‫علٌها‬ ‫ٌطلق‬‫و‬ ً‫النقط‬ ‫د‬‫علٌها‬ ‫مثال‬ ‫هذا‬
‫ال‬ ‫الجامعات‬ ‫بعض‬ ‫أسماء‬‫مصرٌة‬
‫جامعة‬‫طنطا‬
‫ال‬ ‫جامعة‬‫منصورة‬
‫جامعة‬‫المنوفٌة‬
‫ال‬ ‫جامعة‬‫قاهرة‬
‫بنوعٌهما‬ ‫القوائم‬ ‫مع‬ ‫التعامل‬ ‫عند‬.‫القائمة‬ ‫هذه‬ ‫بنود‬ ‫تحدد‬ ‫ووسوم‬ ‫القائمة‬ ‫ونهاٌة‬ ‫بداٌة‬ ‫بتحدٌد‬ ‫خاصة‬ ‫وسوم‬ ‫إلى‬ ‫نحتاج‬
‫المتسلسلة‬ ‫للقوائم‬ ‫بالنسبة‬ً‫رقم‬ ‫تعداد‬ ()‫الوسوم‬ ‫نستخدم‬
<OL< ... >‎/OL>
‫المتسلسلة‬ ‫غٌر‬ ‫للقوائم‬ ‫بالنسبة‬ ‫أما‬) ً‫النقط‬ ‫التعداد‬ (‫فنستخدم‬‫الوسوم‬
<UL< ... >‎/UL>
‫كل‬ ‫ولتعٌٌن‬‫الوسم‬ ‫نستخدم‬ ‫القائمة‬ ‫بنود‬ ‫من‬ ‫بند‬<LI>‫بند‬ ‫بكل‬ ‫الخاص‬ ‫السطر‬ ‫بداٌة‬ ً‫ف‬ ‫ٌكتب‬ ‫مفرد‬ ‫وسم‬ ‫وهو‬List
Item.:‫التالٌة‬ ‫الشٌفرة‬ ‫استخدمت‬ ‫السابقة‬ ‫القوائم‬ ‫بإنشاء‬ ‫قمت‬ ‫عندما‬ ‫إذن‬
<OL>
<LI> ‫ال‬‫الكبرى‬ ‫محلة‬
<LI>‫طنطا‬
<LI>‫الزيات‬ ‫كفر‬
<LI>‫بسيون‬
<LI>‫السنطة‬
<LI>‫سمنود‬
<‎/OL>

15
<UL>
<LI>‫جامعة‬ ‫طنطا‬
<LI> ‫ال‬ ‫جامعة‬‫منصورة‬
<LI>‫جامعة‬ ‫المنوفية‬
<LI> ‫جامعة‬‫القاهرة‬
<‎/UL>
ً‫ه‬ ‫الوسوم‬ ‫هذه‬ ‫مع‬ ‫تستخدم‬ ً‫الت‬ ‫الوحٌدة‬ ‫والخاصٌة‬TYPE،‫القائمة‬ ‫بنود‬ ‫مع‬ ‫الظاهر‬ ‫الرمز‬ ‫شكل‬ ‫تحدٌد‬ ‫ووظٌفتها‬
‫القوائم‬ ‫بداٌة‬‫وسوم‬ ‫مع‬ ‫تستخدم‬ ‫وعادة‬<UL>‫أو‬<OL>‫ال‬ ‫لكل‬ ً‫ا‬‫واحد‬ ً‫ا‬‫رمز‬ ‫نحدد‬ ‫وبذلك‬‫نستطٌع‬ ‫ولكن‬ .‫قائمة‬
‫البنود‬ ‫وسم‬ ‫مع‬ ً‫ا‬‫أٌض‬ ‫استخدامها‬<LI>.‫بند‬ ‫لكل‬ ‫مختلف‬ ‫رمز‬ ‫تحدٌد‬ ‫خالل‬ ‫من‬ ‫القائمة‬ ‫مظهر‬ ً‫ف‬ ‫أكبر‬ ‫تحكم‬ ‫إلعطاء‬
:‫القٌم‬ ‫تأخذ‬ ‫المتسلسلة‬ ‫القوائم‬ ‫تعرٌف‬ ‫ضمن‬ ‫وضعها‬ ‫فعند‬A, a, I, i‫العادٌة‬ ‫األرقام‬ ‫من‬ ‫الترقٌم‬ ‫رموز‬ ‫تغٌر‬ ً‫الت‬
‫رمزها‬ ً‫(والت‬ ‫اإلفتراضٌة‬1‫إلى‬ )‫الرومانٌة‬ ‫األرقام‬ ‫باستخدام‬ ‫أو‬ ،‫الصغٌرة‬ ‫أو‬ ‫الكبٌرة‬ ‫الالتٌنٌة‬ ‫األحرف‬ ‫باستخدام‬ ‫ترقٌم‬
:ً‫التال‬ ‫الجدول‬ ً‫ف‬ ‫ترى‬ ‫كما‬
‎<OL TYPE="A">‎‎<OL TYPE="a">‎‎<OL TYPE="I">‎‎<OL TYPE="i">‎
A.
B.
C.
D.
E.
a.
b.
c.
d.
e.
I.
II.
III.
IV.
V.
i.
ii.
iii.
iv.
v.
‫ال‬ ‫من‬ ‫خاص‬ ‫نوع‬ ‫هناك‬‫التعرٌفات‬ ‫أو‬ ‫الشرح‬ ‫قوائم‬ ‫ٌدعى‬ ‫قوائم‬Definition Lists‫عندما‬ ‫تستخدم‬ ‫اإلسم‬ ‫ٌدل‬ ‫وكما‬
.‫تعلٌق‬ ‫أو‬ ‫شرح‬ ‫منها‬ ‫واحد‬ ‫كل‬ ‫ٌتبع‬ ‫المصطلحات‬ ‫من‬ ‫قائمة‬ ‫إدراج‬ ‫نرٌد‬
HTML
Hyper TextMarkupLanguage
WWW
World Wide Web
FTP
File TransferProtocol
GIF
GraphicalInterchangeFormat
JPG, JPEG
Joint PhotographicExperts Group
:‫وسوم‬ ‫ثالثة‬ ‫إلى‬ ‫القوائم‬ ‫هذه‬ ‫إلنشاء‬ ‫ونحتاج‬
‫األول‬<DL< ... >‎/DL>.‫القائمة‬ ‫ونهاٌة‬ ‫بداٌة‬ ‫لتعرٌف‬
ً‫والثان‬<DT>.‫مفرد‬ ‫وسم‬ ‫وهو‬ ،‫لتحدٌده‬ ‫مصطلح‬ ‫كل‬ ‫قبل‬ ‫وٌوضع‬
‫فهو‬ ‫الثالث‬ ‫أما‬<DD>‫م‬ ‫أٌضا‬ ‫وهو‬ ‫التعلٌق‬ ‫أو‬ ‫الشرح‬ ‫وسم‬ ‫وهو‬‫السابقة‬ ‫القائمة‬ ‫شٌفرة‬ ‫بكتابة‬ ‫اآلن‬ ‫ولنقم‬ .‫فرد‬
‎<DL>‎
‎<DT>HTML <DD>Hyper TextMarkup Language‎
‎<DT>WWW <DD>World Wide Web‎

16
‎<DT>FTP<DD>File TransportProtocol‎
‎<DT>GIF <DD>GraphicalInterchangeFormat‎
‎<DT>JPG,JPEG <DD>JointPhotographic ExpertsGroup‎
‎<‎/DL>
‫الصور‬‎(‫إدساظٓا‬ٔ‫ٔأتؼادْا‬ ‫تأحعايٓا‬ ‫انرحكى‬)
‫عٕف‬َ‫ٔيا‬ ‫ٔانشعٕياخ‬ ‫انظٕس‬ ٍ‫ػ‬ ‫تانحذٚس‬ ‫مٕو‬،‫يؼٓا‬ ‫تانرؼايم‬ ‫ٚرؼهك‬‫ػه‬ ٌٜ‫ا‬ ٗ‫حر‬ ‫انظٕس‬ ٍ‫ػ‬ ‫حذٚصُا‬ ‫الرظش‬ ‫نمذ‬ٗ
،‫نهظفحاخ‬ ‫خهفٛاخ‬ ‫إػافح‬‫حك‬ ّ‫فه‬ ‫َفغٓا‬ ‫انظفحاخ‬ ًٍ‫ػ‬ ‫انظٕس‬ ‫إدساض‬ ‫أيا‬،ٖ‫أخش‬ ‫اٚح‬‫المست‬ ً‫الرئٌس‬ ‫الوسم‬ ‫إن‬‫خدم‬
‫هو‬ ‫الصفحة‬ ‫داخل‬ ‫ما‬ ‫صورة‬ ‫لتعرٌف‬<IMG>‫ٌجب‬ ‫بالطبع‬ ،‫كال‬ ‫صورة؟‬ ‫إلدراج‬ ‫هذا‬ ً‫ٌكف‬ ‫هل‬ ‫لكن‬ .‫مفرد‬ ‫وسم‬ ‫وهو‬
‫له‬ ‫الخاصٌة‬ ‫نضٌف‬ ‫لذلك‬ .‫نرٌدها‬ ً‫الت‬ ‫الصورة‬ ‫نحدد‬ ‫أن‬SRC.‫الصورة‬ ‫واسم‬ ‫موقع‬ ‫لتحدٌد‬
‫أن‬ ‫نفترض‬‫إسمها‬ ‫الصورة‬thedome.jpg‫بذلك‬ ‫الخاصة‬ ‫الشٌفرة‬ ‫كانت‬ .‫بإدراجها‬ ‫قمت‬ ‫وعندما‬ً‫ه‬
‎<IMG SRC="thedome.jpg">‎
ً‫ف‬ ‫موجودة‬ ‫الصورة‬ ‫أن‬ ‫تفترض‬ ‫هذه‬ ‫والصٌغة‬‫المجلد‬ ‫أو‬ ً‫الفرع‬ ‫الدلٌل‬ ‫نفس‬‫ملف‬ ‫ٌتواجد‬ ‫حٌث‬HTML‫أعمل‬ ‫الذي‬
.‫خالله‬ ‫من‬ ‫الصورة‬ ‫باستدعاء‬ ‫وقمت‬ ،‫علٌه‬‫التحكم‬ ‫نستطٌع‬ ‫نحن‬‫الصورة‬ ‫أبعاد‬ ً‫ف‬ً‫ا‬‫أٌض‬‫بالحجم‬ ‫الصورة‬ ‫وإظهار‬
‫الذ‬‫الوسم‬ ‫هذا‬ ‫خالل‬ ‫من‬ ‫نرٌده‬ ‫ي‬.‫وذلك‬‫الخصائص‬ ‫بإضافة‬HEIGHT, WIDTH‫اإلرتفاع‬ ‫تمثل‬ ‫بأرقام‬ ‫متبوعة‬
.‫المطلوبٌن‬ ‫والعرض‬
‎<IMG SRC="thedome.jpg" HEIGHT="70" WIDTH="120">‎
‎<IMG SRC="thedome.jpg" HEIGHT="300" WIDTH="500">‎
‫مع‬ ‫تستخدم‬ ً‫الت‬ ‫التالٌة‬ ‫الخاصٌة‬<IMG>ً‫ه‬ALT‫ٌظه‬ ً‫ال‬ٌ‫بد‬ ً‫ا‬‫نص‬ ‫نحدد‬ ‫وفٌها‬‫ٌالحظ‬ ‫النص‬ ‫وهذا‬ .‫الصورة‬ ‫مكان‬ ‫ر‬
ً‫الت‬ ‫الفترة‬ ً‫ف‬ ‫مالحظته‬ ‫تستطٌع‬ ‫كما‬ .‫المتصفح‬ ً‫ف‬ ‫فعال‬ ‫غٌر‬ "ً‫ا‬ٌ‫تلقائ‬ ‫الصور‬ ‫"إظهار‬ ‫خٌار‬ ‫ٌكون‬ ‫عندما‬ً‫ا‬‫خصوص‬
.‫التحمٌل‬ ‫بطٌئة‬ ‫المواقع‬ ً‫ف‬ ‫وخاصة‬ ‫الصور‬ ‫تحمٌل‬ ‫تسبق‬
‎<IMG SRC="thedome.jpg" ALT="The Dome Of The Rock">‎
‫بإدراج‬ ‫نقوم‬ ‫عندما‬‫أي‬ ‫مثل‬ ‫مثلها‬ ،‫الفقرة‬ ً‫ف‬ ‫ورودها‬ ‫ترتٌب‬ ‫حسب‬ ‫بالطبع‬ ‫ٌتحدد‬ ‫ظهورها‬ ‫موقع‬ ‫فإن‬ ‫فقرة‬ ‫ضمن‬ ‫صورة‬
‫الخاصٌة‬ ‫ونستخدم‬ .‫أخرى‬ ‫عبارة‬ ‫أو‬ ‫كلمة‬ALIGN‫بعبارة‬ ‫لنقل‬ ‫أو‬ ‫لها‬ ‫المرافق‬ ‫النص‬ ‫مع‬ ‫الصورة‬ ‫محاذاة‬ ‫لتحدٌد‬
:‫أخرى‬‫لها‬ ‫بالنسبة‬ ‫ٌلٌها‬ ‫الذي‬ ‫النص‬ ‫موقع‬ ‫تحدٌد‬:‫القٌم‬ ‫تأخذ‬ ً‫وه‬BOTTOM, TOP،MIDDLE, LEFT,
RIGHT:ً‫ٌل‬ ‫كما‬ ‫قٌمة‬ ‫كل‬ ‫تأثٌر‬ ‫لك‬‫وأوضح‬

17
‫انؼادٚح‬ ‫انحانح‬ ٙ‫ف‬٘‫انز‬ ‫انُض‬ ٌ‫فئ‬ ‫يحاراج‬ ٘‫أ‬ ‫ترحذٚذ‬ ‫َمٕو‬ ‫ال‬‫ٔػُذيا‬ )ِ‫ْز‬ ‫(يصم‬
‫انغف‬ ‫انحافح‬ ‫تًحاراج‬ ‫ٚظٓش‬ ‫انظٕسج‬ ٙ‫ٚه‬‫نظٕٓس‬ ‫اإلفرشاػٛح‬ ‫انحانح‬ ْٙ ِ‫ْٔز‬ .‫نٓا‬ ٗ‫ه‬
‫انمًٛح‬ ‫ذًصهٓا‬ ٙ‫ٔانر‬ ‫انظٕس‬BOTTOM
‎<IMG SRC="image.jpg" ALIGN="BOTTOM">‎
TOP
‫ا‬ ‫انُض‬ ٍ‫ي‬ ‫األٔل‬ ‫انغطش‬ ٌ‫فئ‬ ‫انمًٛح‬ ِ‫ْز‬ ‫ذحذٚذ‬ ‫ٔػُذ‬‫ٚمغ‬‫انظٕسج‬ ٙ‫ٚه‬ ٘‫نز‬
.‫أعفهٓا‬ ‫فًٛرذ‬ ‫انُض‬ ٙ‫تال‬ ‫أيا‬ .‫نٓا‬ ‫انؼهٛا‬ ‫انحافح‬ ‫تًحاراج‬
‎<IMG SRC="image.jpg" ALIGN="TOP">‎
MIDDLE
ٍ‫ي‬ ‫األٔل‬ ‫انغطش‬ ٌ‫فئ‬ ‫انمًٛح‬ ِ‫ْز‬ ‫ذحذٚذ‬ ‫ػُذ‬ ‫أيا‬‫يُرظف‬ ‫تًحاراج‬ ‫ٚمغ‬ ‫انُض‬
.‫أعفهٓا‬ ‫ًٚرذ‬ ‫انُض‬ ٙ‫تال‬ ٌ‫فئ‬ ‫كزنك‬ .‫انظٕسج‬
‎<IMG SRC="image.jpg" ALIGN="MIDDLE">‎
LEFT
‫انُض‬ ‫انرفاف‬ ‫يغ‬ .‫انٛغاس‬ ٗ‫ألظ‬ ٗ‫إن‬ ‫انظٕسج‬ ‫يحاراج‬ ٗ‫إن‬ ٘‫ذؤد‬ ‫انمًٛح‬ ِ‫ْز‬
.‫انظٕسج‬ ‫اسذفاع‬ ‫حغة‬ ‫أعطش‬ ‫ٔنؼذج‬ ًُٗٛ‫ان‬ ‫انعٓح‬ ٗ‫ػه‬ ‫ٚهٛٓا‬ ٘‫انز‬
‎<IMG SRC="image.jpg" ALIGN="LEFT">‎
RIGHT
‫انُض‬ ‫انرفاف‬ ‫يغ‬ .ًٍٛٛ‫ان‬ ٗ‫ألظ‬ ٗ‫إن‬ ‫انظٕسج‬ ‫يحاراج‬ ٗ‫إن‬ ٘‫فرؤد‬ ‫انمًٛح‬ ِ‫ْز‬ ‫أيا‬
.‫انظٕسج‬ ‫اسذفاع‬ ‫حغة‬ ‫أعطش‬ ‫ٔنؼذج‬ ٖ‫انٛغش‬ ‫انعٓح‬ ٗ‫ػه‬ ‫ٚهٛٓا‬ ٘‫انز‬
‎<IMG SRC="image.jpg" ALIGN="RIGHT">‎
‫ا‬ ‫تحدٌد‬ ‫إلى‬ ‫نحتاج‬ ‫الصورة‬ ‫محاذاة‬ ‫بتحدٌد‬ ‫قمنا‬ ‫أن‬ ‫بعد‬ ‫واآلن‬.‫ٌجاورها‬ ‫الذي‬ ‫النص‬ ‫وبٌن‬ ‫بٌنها‬ ‫الفاصلة‬ ‫لمسافة‬
:‫التالٌة‬ ‫الخصائص‬ ‫لذلك‬‫ونستخدم‬
VSPACE:.‫للصورة‬ ‫والسفلى‬ ‫العلٌا‬ ‫والحافتٌن‬ ‫النص‬ ‫بٌن‬ ‫الفاصلة‬ ‫العمودٌة‬ ‫المسافة‬ ‫لتحدٌد‬

18
HSPACE:.‫للصورة‬ ‫والٌسرى‬ ‫الٌمنى‬ ‫والحافتٌن‬ ‫النص‬ ‫بٌن‬ ‫الفاصلة‬ ‫األفقٌة‬ ‫المسافة‬ ‫لتحدٌد‬
:‫مثال‬
‎<IMG SRC="image.jpg" ALIGN="RIGHT" VSPACE="20" HSPACE="20">‎
ِ‫انًغًا‬ ‫انظٕسج‬ ‫عرذسض‬ ‫انشٛفشج‬ ِ‫ْز‬ :‫انُرٛعح‬image.jpgًٍٛٛ‫ن‬ ‫يحاراذٓا‬ ‫يغ‬
‫يمذاسْا‬ ‫فاسغح‬ ‫يغافح‬ ‫ٔإػافح‬ ‫انظفحح‬20ٍٛ‫ت‬ ٌ‫(لاس‬ .‫األستؼح‬ ‫انعٓاخ‬ ٗ‫ػه‬‫تٛكغم‬
‫خاطٛح‬ ّٛ‫ف‬ ‫ٔػحد‬ ٘‫انز‬ ‫انغاتك‬ ‫ٔاإلؽاس‬ ‫اإلؽاس‬ ‫ْزا‬ALIGN‫انمًٛح‬ ‫يغ‬RIGHT.
).‫نٓا‬ ‫انًشافك‬ ‫ٔانُض‬ ‫انظٕسج‬ ٍٛ‫ت‬ ‫انًغافح‬ ‫ٔالحظ‬
‫الوسم‬ ‫مع‬ ‫تستخدم‬ ً‫والت‬ ‫األخٌرة‬ ‫الخاصٌة‬<IMG>ً‫ه‬BORDER‫والتحكم‬ ‫الصور‬ ‫حول‬ ‫إطار‬ ‫إضافة‬ ‫ووظٌفتها‬
‫إسناد‬ ‫خالل‬ ‫من‬ ‫مك‬ُ‫س‬‫بال‬ ‫التحكم‬ ‫وٌتم‬ .‫تشعبٌة‬‫كوصلة‬ ‫ما‬ ‫صورة‬ ‫تعٌٌن‬ ‫عند‬ ‫خاص‬ ‫بشكل‬ ‫تستخدم‬ ‫الخاصٌة‬ ‫وهذه‬ .‫ِه‬‫ك‬‫م‬ُ‫س‬‫ب‬
ٌ ‫رقم‬ً‫ه‬ ‫له‬ ‫اإلفتراضٌة‬ ‫والقٌمة‬ .‫بالبٌكسل‬ ‫مك‬ُ‫س‬‫ال‬ ‫مثل‬0.‫الصورة‬ ‫حول‬ ‫إطار‬ ‫ٌوجد‬ ‫ال‬ ‫أي‬
‫مكه‬ُ‫س‬ ‫إطار‬ ‫إلضافة‬ ٌ‫ال‬‫مث‬5:‫التالٌة‬ ‫الشٌفرة‬ ‫نكتب‬‫بٌكسل‬
‎<IMG SRC="image.jpg" BORDER="5">‎
‫التشعبٌة‬ ‫االرتباطات‬ **
Links...‫ب‬ ‫اإلنترنت‬ ‫كانت‬ ‫وإذا‬ .‫اإلنترنت‬ ‫روح‬ ً‫ه‬ ‫التشعبٌة‬ ‫الوصالت‬ ‫أو‬‫هذه‬ ‫فإن‬ ‫العنكبوت‬ ‫شبكة‬ ً‫ه‬ ‫مجملها‬
‫وتؤلف‬ ‫الشبكة‬ ‫هذه‬ ‫تشكل‬ ً‫الت‬ ‫الخٌوط‬ ً‫ه‬ ‫الوصالت‬‫موا‬ ‫من‬ ‫المالٌٌن‬ ‫بٌن‬ ‫الوصل‬ ‫حلقات‬‫ق‬‫ما‬ ‫وصلة‬ ‫على‬ ‫تنقر‬ .‫عها‬
‫من‬ ‫اآلخر‬ ‫الجانب‬ ً‫ف‬ ‫المواقع‬ ‫أحد‬ ‫إلى‬ ً‫ا‬ٌ‫كل‬ ‫لتنقلك‬ ‫أخرى‬ ‫وصلة‬ ‫على‬ ‫وتنقر‬ ...‫الموقع‬ ‫نفس‬ ً‫ف‬ ‫أخرى‬ ‫صفحة‬ ‫إلى‬ ‫فتنقلك‬
‫العالم‬
‫خٌا‬ ‫عدة‬ ‫هناك‬‫الموقع‬ ‫داخل‬ ‫أخرى‬ ‫لصفحة‬ ‫تكون‬ ‫أن‬ ‫أو‬ ،‫آخر‬ ‫لموقع‬ ‫الوصلة‬ ‫تكون‬ ‫أن‬ ‫منها‬ ،‫التشعبٌة‬ ‫للوصالت‬ ‫رات‬
‫لعنوان‬ ‫وصلة‬ ‫تكون‬ ‫أن‬ ‫أو‬ )‫المثال‬ ‫سبٌل‬ ‫على‬ ‫أسفل‬ ‫أو‬ ‫أعلى‬ ‫(إلى‬ ‫الصفحة‬ ‫نفس‬ ً‫ف‬ ‫آخر‬ ‫لمكان‬ ‫تكون‬ ‫أن‬ ‫ومنها‬ ،‫نفسه‬
ً‫إلكترون‬ ‫برٌد‬E-mail‫بعض‬ ‫تختلف‬ ‫لكن‬‫واحد‬ ‫المبدأ‬ ‫فإن‬ ‫الحاالت‬ ‫جمٌع‬ ً‫وف‬‫التفاصٌل‬
‫الوسوم‬ ‫نستخدم‬
<A< ... >‎/A>
‫لكلمة‬ ‫اختصار‬ ً‫وه‬ ،‫التشعبٌة‬ ‫الوصالت‬ ‫إلدراج‬ ‫أساسٌة‬ ‫كوسوم‬Anchor.‫إضافة‬ ‫تتطلب‬ ‫بل‬ ‫لوحدها‬ ‫تعمل‬ ‫ال‬ ً‫وه‬
‫الخاصٌة‬ ‫وأهمها‬ ‫أولها‬ ‫معٌنة‬ ‫خصائص‬
HREF
‫كا‬ ‫الموقع‬ ‫عنوان‬ ‫ٌكتب‬ ‫أن‬ ‫وٌجب‬ ،‫علٌه‬ ‫الداللة‬ ‫نرٌد‬ ‫الذي‬ ‫الموقع‬ ‫خاللها‬ ‫من‬ ‫نحدد‬ ً‫الت‬.ً‫ال‬‫م‬
**.ً‫خارج‬ ‫موقع‬ ‫إلى‬ ‫تشٌر‬ ‫تشعبٌة‬ ‫وصلة‬ ‫إدراج‬ :‫األولى‬ ‫الحالة‬
‫وعنوانه‬ .‫صخر‬ ‫شركة‬ ‫موقع‬ ‫وهو‬ ،‫والرائعة‬ ‫الرائدة‬ ‫العربٌة‬ ‫المواقع‬ ‫أحد‬ ‫إلى‬ ‫تشعبٌة‬ ‫وصلة‬ ‫بإدراج‬ ‫لنقم‬
http://www.sakhr.com:ً‫التال‬ ‫بالشكل‬ ‫الشٌفرة‬ ‫كتابة‬ ‫ٌتم‬ ‫الحالة‬ ‫هذه‬ ً‫ف‬

19
<A HREF="http://www.sakhr.com"> <‎/A>
‫الوسمٌن‬ ‫بٌن‬ ‫توضع‬ ‫أن‬ ‫ٌجب‬ ‫وهذه‬ ،‫الوصلة‬ ‫لتشغٌل‬ ‫علٌها‬ ‫النقر‬ ‫سٌتم‬ ً‫الت‬ ‫الكلمة‬ ‫أو‬ ‫العبارة‬ ‫وهو‬ ‫واحد‬ ‫شًء‬ ً‫بق‬ ‫لكن‬
<A< ... >‎/A.>‫فتنقله‬ ‫الزائر‬ ‫علٌها‬ ‫ٌنقر‬ ً‫لك‬ ،‫نرٌدها‬ ‫عبارة‬ ‫أي‬ ‫معها‬ ‫نكتب‬ ‫أن‬ ‫ٌجب‬ ‫السابقة‬ ‫الوصلة‬ ‫تكتمل‬ ً‫لك‬ ‫أي‬
‫بع‬ ‫رأٌك‬ ‫ما‬ .‫المطلوب‬ ‫العنوان‬ ‫إلى‬:‫بارة‬Go To SAKHR:ً‫التال‬ ‫بالشكل‬ ‫معها‬ ‫الشٌفرة‬ ‫تصبح‬ ً‫والت‬
<A HREF="http://www.sakhr.com">GoTo SAKHR<‎/A>
:ً‫ٌل‬ ‫كما‬ ‫الوصلة‬ ‫وتظهر‬
Go To SAKHR
‫الكلمات‬ ‫عن‬ ‫كبدٌل‬ )‫(زر‬ ‫أو‬ ‫صورة‬ ‫إدراج‬ ‫تستطٌع‬ ‫إنك‬ ‫بل‬-‫الم‬ ‫من‬ ‫الكثٌر‬ ً‫ف‬ ‫تشاهد‬ ‫كما‬‫واقع‬-ً‫ف‬ ‫فعله‬ ‫علٌك‬ ‫ما‬ ‫وكل‬
‫الوسمٌن‬ ‫بٌن‬ ‫الصورة‬ ‫بإدراج‬ ‫الخاص‬ ‫الوسم‬ ‫كتابة‬ ‫هو‬ ‫الحالة‬ ‫هذه‬<A< ... >‎/A>:ً‫التال‬ ‫بالشكل‬
<A HREF="http://www.sakhr.com"><IMGSRC="sakhrlgo.gif">‎<‎/A>
‫صخر‬ ‫لموقع‬ ‫تشعبٌة‬ ‫كوصلة‬ ‫التالٌة‬ ‫الصورة‬ ‫ظهور‬ ‫إلى‬ ‫ٌؤدي‬ ‫والذي‬
‫الوسمٌن‬ ‫بٌن‬ ‫ٌوضع‬ ‫شًء‬ ‫أي‬ ‫فإن‬ ‫عام‬‫وبشكل‬<A< ... >‎/A>‫إلى‬ ‫ٌنقلنا‬ ‫الذي‬ ‫العنوان‬ ‫أو‬ ‫الوسٌلة‬ ‫ٌكون‬ ‫سوف‬
‫كان‬ ً‫سواء‬ ،‫التشعبٌة‬ ‫الوصلة‬ ً‫ف‬ ‫إلٌه‬ ‫المشار‬ ‫الموقع‬.ً‫ا‬‫مع‬ ‫كالهما‬ ‫أو‬ ‫صورة‬ ‫أو‬ ً‫ا‬‫نص‬ ‫الشًء‬ ‫هذا‬
‫الصورة‬ ‫حول‬ ‫الظاهر‬ ‫اإلطار‬ ‫تالحظ‬ ‫هل‬ ‫واآلن‬‫سمكه‬ ‫إطار‬ ً‫ف‬2‫نستطٌع‬ ‫وبالطبع‬ .‫اإلفتراضٌة‬ ‫الحالة‬ ً‫ه‬ ‫وهذه‬ ‫بٌكسل‬
‫الخاصٌة‬ ‫بكتابة‬ ‫إزالته‬BORDER="0"‎.‫الصورة‬ ‫وسم‬ ‫ضمن‬
<A HREF="http://www.sakhr.com"><IMGSRC="sakhrlgo.gif"
BORDER="0"><‎/A>
.‫الخاصٌة‬ ‫هذه‬ ‫مع‬ ‫المطلوب‬ ‫السمك‬ ‫بكتابة‬ ‫تكبٌره‬ ‫حتى‬ ‫أو‬
<A HREF="http://www.sakhr.com"><IMGSRC="sakhrlgo.gif"
BORDER="6"><‎/A>
**‫كان‬ ً‫سواء‬ )ً‫محل‬ ‫ملف‬ ‫(أي‬ ‫الموقع‬ ‫نفس‬ ً‫ف‬ ‫موجود‬ ‫ملف‬ ‫إلى‬ ‫التشعبٌة‬ ‫الوصلة‬ ‫تشٌر‬ ‫أن‬ ً‫وه‬ ،‫الثانٌة‬ ‫الحالة‬
‫ملف‬HTML‫أ‬‫الخاصٌة‬ ‫مع‬ ‫ٌكتب‬ ‫ما‬ ‫فإن‬ ‫الحالة‬ ‫هذه‬ ً‫وف‬ .‫ذلك‬ ‫غٌر‬ ‫أو‬ ‫صورة‬ ‫و‬HREF‫الملف‬ ‫هذا‬ ‫اسم‬ ‫هو‬
.‫إلٌه‬ ‫الوصول‬ ‫المطلوب‬‫الملف‬ ‫فإن‬ ‫وبالمناسبة‬ ‫الموقع‬ ‫لهذا‬ ‫الرئٌسٌة‬ ‫الصفحة‬ ‫إلى‬ ‫تقودنا‬ ‫تشعبٌة‬ ‫وصلة‬ ‫بإنشاء‬ ‫لنقم‬
‫اسمه‬ ‫ٌحتوٌها‬ ‫الذي‬index.html:ً‫ه‬ ‫بذلك‬ ‫الخاصة‬ ‫والشٌفرة‬ ،
<A HREF="index.html">Main Page<‎/A>

21
Main Page

مذكرة في لغة Html 2

More Related Content

What's hot (18)

Viewers also liked (14)

Similar to مذكرة في لغة Html 2 (20)

Recently uploaded (14)

مذكرة في لغة Html 2