Metadata - Section 1: HTML Basics

محاضرات عملية لمقرر الميتاداتا – سكشن 1: أساسيات HTML.
قسم المكتبات والوثائق والمعلومات – كلية الآداب – جامعة القاهرة.

Transcript

1. ‫جامعة القاهرة‬ ‫كلية اآلداب‬ ‫قسم المكتبات والوثائق والمعلومات‬ ‫مقرر الميتاداتا‬ ‫المحاضرات العملية لمقرر الميتاداتا‬ ‫مقدمة يف لغة ‪: HTML‬‬ ‫التقن لبناء الميتاداتا عىل ال ويب‬ ‫األساس‬ ‫ي‬ ‫المحاضة ( ‪)1‬‬
2. ‫المحتويـ ـ ــات‬ ‫‪01‬‬ ‫المقدمة والمفهوم‬ ‫والمتطلبات‬ ‫لماذا نبدأ ب ‪ HTML‬وما هي لغات الترميز‬ ‫وما الفارق بينها وبين لغات البرمجة وماذا‬ ‫نحتاج لكتابة أول صفحة‬ ‫‪02‬‬ ‫‪03‬‬ ‫الوسوم األساسية‬ ‫ومكونات ملف ‪HTML‬‬ ‫التنسيق البسيط بإستخدام‬ ‫‪ HTML‬وسوم وخصائص‬ ‫ما هي الوسوم الاساسية وما هي خصائص‬ ‫‪ HTML‬وما العناصر المكونة للصفحة‬ ‫تنسيق الخطوط والفقرات والخلفية والالوان‬ ‫وإدراج الروابط والصور‬
3. ‫‪01‬‬ ‫المقدمة‬ ‫والمفهوم‬ ‫والمتطلبات‬
4. ‫قسم المكتبات والوثائق والمعلومات‬ ‫جامعة القاهرة ‪ -‬كلية اآلداب ‪-‬‬ ‫لماذا ندرس‬ ‫أساسيات ‪HTML‬‬ ‫ّ‬ ‫سنتعرف بإيجاز عىل‬ ‫قبل أن نبدأ دراسة الميتاداتا‪،‬‬ ‫ز‬ ‫ترميها ‪ .‬ولهذا سنبدأ بلغة ‪ HTML‬؛‬ ‫الصفحة نفسها‪ ،‬مثل عنوانها أو‬ ‫كيفية تنظيم صفحات الويب‪ ،‬وأين‬ ‫إضافة بعض‬ ‫▪‬ ‫▪‬ ‫فه تساعدنا عىل‬ ‫ي‬ ‫يمكن أن نجد‬ ‫معلومات تصف‬ ‫فهم بنية الصفحة‪،‬‬ ‫كما تتيح‬ ‫المعلومات الوصفية عنها‪.‬‬ ‫‪HTML‬‬ ‫ز‬ ‫ترمي النص‬ ‫ه اختصار ‪ ،HyperText Markup Language‬أي لغة‬ ‫ي‬ ‫التشعب ‪.‬‬ ‫ي‬ ‫ز‬ ‫ز‬ ‫ز‬ ‫يف بدايات الويب يف مركز ‪ CERN‬بسويرسا‪ ،‬وارتبط تطويرها بعمل تيم برنرز ‪ -‬يل يف أوائل‬ ‫ظهرت‬ ‫َّ‬ ‫ز‬ ‫ترمي وليست لغة برمجة؛ إذ‬ ‫وه لغة‬ ‫التسعينيات ‪ .‬تطورت ‪ HTML‬عي الزمن‪ ،‬وما زال معيارها ُيحدث ‪.‬‬ ‫ي‬ ‫ُ‬ ‫تستخدم لوصف بنية محتوى صفحات الويب‪ ،‬ال لكتابة األوامر والخوارزميات‪.‬‬
5. ‫قسم المكتبات والوثائق والمعلومات‬ ‫جامعة القاهرة ‪ -‬كلية اآلداب ‪-‬‬ ‫البمجة‬ ‫لغات ر‬ ‫ر‬ ‫والب ز‬ ‫مب‬ ‫ُ‬ ‫البمجة ‪ (Programming Languages) :‬لغات تستخدم لكتابة تعليمات وبرامج تحدد للحاسوب العمليات أو‬ ‫لغات‬ ‫ر‬ ‫ُ َّ‬ ‫الب ينفذها‪ ،‬مثل إنشاء مجلد أو حذف ملف أو إجراء عملية حسابية ‪ .‬وتنفذ اليامج بوسائل مختلفة‪ ،‬وقد‬ ‫المهام‬ ‫ي‬ ‫ُ‬ ‫َّ‬ ‫ّ‬ ‫ُتيجم بعضها إل تعليمات يستطيع الحاسوب تنفيذها‪ ،‬بينما تشغل لغات أخرى بوساطة مفرس أو ئ‬ ‫بب ة تشغيل ‪ .‬ومن‬ ‫أمثلتها ‪ ،: C++‬و ‪ ،C#‬و ‪Java‬‬ ‫ُ‬ ‫البمجة النصية ‪ (Scripting Languages) :‬نوع من لغات اليمجة‪ ،‬تستخدم لكتابة نصوص برمجية تنفذ‬ ‫لغات‬ ‫ر‬ ‫محددة‪ ،‬مثل أتمتة األعمال أو إضافة التفاعل إل صفحات الويب ‪ .‬ومن أمثلتها ‪ JavaScript‬و ‪ PHP‬و‪Python .‬‬ ‫ً‬ ‫مهاما‬ ‫ُ‬ ‫ر‬ ‫الب ز‬ ‫ز‬ ‫معب أجزائه‪ ،‬مثل العنوان‬ ‫مب ‪ (Markup Languages) :‬تستخدم إلضافة عالمات توضح بنية المحتوى أو‬ ‫لغات‬ ‫ُ‬ ‫ُ ّ‬ ‫فه لغة تنسيق تستخدم لتحديد‬ ‫وه ال تعد لغات برمجة ‪ .‬ومن أمثلتها ‪ HTML‬و ‪ XML.‬أما ‪CSS‬‬ ‫والفقرة والرابط‪،‬‬ ‫ي‬ ‫ي‬ ‫مظهر المحتوى‪ ،‬وليست لغة ترمي‪.‬ز‬ ‫ُ‬ ‫ز‬ ‫وتستخدم ً‬ ‫ز‬ ‫ترمي‪ ،‬و ‪ CSS‬لغة تنسيق ‪.‬‬ ‫الخالصة ‪ :‬اللغات النصية نوع من لغات اليمجة‪ ،‬بينما ‪ HTML‬و ‪ XML‬لغتا‬ ‫معا يف‬ ‫صفحات الويب ‪ : HTML‬لبنية المحتوى‪ ،‬و ‪ CSS‬لمظهره‪ ،‬و ‪ JavaScript‬إلضافة السلوك والتفاعل‪.‬‬
6. ‫قسم المكتبات والوثائق والمعلومات‬ ‫جامعة القاهرة ‪ -‬كلية اآلداب ‪-‬‬ ‫متطلبات‬ ‫العمل بلغة ‪HTML‬‬ ‫✓ محرر نصوص لكتابة الكود وحفظه بامتداد ‪ ، .html‬مثل ‪ : Notepad‬أو ‪Visual Studio Code.‬‬ ‫✓‬ ‫متصفح ر‬ ‫إنبنت لفتح الملف وعرض الصفحة‪ ،‬مثل ‪ : Google Chrome‬أو ‪ Microsoft Edge‬أو ‪Mozilla Firefox.‬‬ ‫‪+‬‬
7. ‫‪02‬‬ ‫الوسوم‬ ‫األساسية‬ ‫ومكونات ملف‬ ‫‪HTML‬‬
8. ‫قسم المكتبات والوثائق والمعلومات‬ ‫جامعة القاهرة ‪ -‬كلية اآلداب ‪-‬‬ ‫تتكون صفحة ‪ HTML‬من‬ ‫>‪ <tag‬المحتوى >‪</tag‬‬ ‫خصائص‬ ‫ُ‬ ‫ً ز‬ ‫غالبا يف شكل أزواج ‪ :‬وسم للبداية ووسم للنهاية‪.‬‬ ‫وسوم )‪ (Tags‬تكتب‬ ‫الوسوم‬ ‫▪‬ ‫ز‬ ‫ز‬ ‫بي الحروف الكبية والصغية يف‬ ‫ال تفرق ‪HTML‬‬ ‫ز‬ ‫ال تؤثر المسافات أو الضغط عىل مفتاح ‪ Enter‬يف بنية الصفحة‪.‬‬ ‫لكل وسم بداية ونهاية‪ ،‬مثل >‪ <p‬و >‪</p‬؛ باستثناء بعض الوسوم الفردية‪ ،‬مثل ‪<br>.‬‬ ‫▪‬ ‫يجب حفظ الملف بامتداد ‪ .html‬أو ‪.htm.‬‬ ‫▪‬ ‫▪‬ ‫أسماء‬ ‫الوسوم‪ ،‬مثل >‪ <HTML‬و ‪<html>.‬‬ ‫مثال‬ ‫ّ‬ ‫مالحظة ‪ُ :‬يفضل كتابة أسماء الوسوم بالحروف الصغ يرة‪،‬‬ ‫ز‬ ‫ألنها الصيغة الشائعة يف ‪ HTML‬الحديثة‪.‬‬ ‫>‪<html‬‬ ‫>‪<head‬‬ ‫>‪<title>This is a test Webpage</ title‬‬ ‫>‪</head‬‬ ‫>‪<body‬‬ ‫‪Wow, I'm writing my first webpage‬‬ ‫>‪</body‬‬ ‫>‪</html‬‬
9. ‫قسم المكتبات والوثائق والمعلومات‬ ‫جامعة القاهرة ‪ -‬كلية اآلداب ‪-‬‬ ‫الوسوم‬ ‫األساسية‬ ‫ز‬ ‫يف ‪HTML‬‬ ‫ئيس الذي يحيط بجميع محتويات صفحة الويب‪.‬‬ ‫>‪ : <html‬الوسم الر ي‬ ‫ز‬ ‫وترميها‪.‬‬ ‫>‪ : <head‬يحتوي عىل معلومات عن الصفحة‪ ،‬مثل عنوانها‬ ‫ز‬ ‫>‪ : <title‬يحدد عنوان الصفحة الذي يظهر يف رشيط تبويب المتصفح‪.‬‬ ‫>‪ : <body‬يحتوي عىل المحتوى الظاهر للمستخدم‪ ،‬مثل النصوص والصور والروابط‪.‬‬ ‫بنية ملف ‪HTML‬‬ ‫>‪<head‬‬ ‫يحتوي عىل معلومات خاصة بالصفحة‪ ،‬مثل‬ ‫عنوانها ووصفها واسم الكاتب واللغة‬ ‫>‪<body‬‬ ‫يحتوي عىل محتوى الصفحة الظاهر للمستخدم‪،‬‬ ‫مثل النصوص والجداول والروابط التشعبية والصور‬ ‫والرسوم‪.‬‬
10. ‫قسم المكتبات والوثائق والمعلومات‬ ‫جامعة القاهرة ‪ -‬كلية اآلداب ‪-‬‬ ‫نحو إنشاء أول صفحة ويب‬ ‫وسم >‪<html‬‬ ‫ُ‬ ‫ز‬ ‫يوضح أن الملف ليس ملف نص عادي‪ ،‬بل صفحة ويب‪ ،‬ويجب أن تحرص جميع محتويات الصفحة بي و سم البداية‬ ‫ووسم النهاية‪:‬‬ ‫>‪<html‬‬ ‫>‪</html‬‬ ‫وسم >‪<head‬‬ ‫ُيستخدم لتحديد‬ ‫المقطع الذي يحتوي عىل‬ ‫المعلومات الب ّ‬ ‫تعرف الصفحة‬ ‫ي‬ ‫وتصفها‪ ،‬مثل عنوانها وم واصفاتها‪:‬‬ ‫>‪<head‬‬ ‫>‪</head‬‬ ‫وسم >‪<title‬‬ ‫ز‬ ‫ر‬ ‫ُيستخدم لتسمية الصفحة‪ ،‬ويظهر هذا العنوان يف شيط تبويب المتصفح‪:‬‬ ‫>‪ <title‬عنوان الصفحة >‪</title‬‬ ‫وسم >‪<body‬‬ ‫نضع ز‬ ‫بي هذين‬ ‫ز‬ ‫الب نريد‬ ‫الوسمي النصوص والصور والجداول وغيها من المحتويات‬ ‫ي‬ ‫>‪<body‬‬ ‫>‪</body‬‬ ‫ز‬ ‫ظهورها يف صف حة الويب‪:‬‬
11. ‫قسم المكتبات والوثائق والمعلومات‬ ‫جامعة القاهرة ‪ -‬كلية اآلداب ‪-‬‬ ‫تطبيق ‪ :‬إنشاء صفحة ويب بسيطة‬ ‫ر ئ‬ ‫لننس صفحة ويب بسيطة تحتوي عىل عبارة ‪"your name" .‬‬ ‫يىل‪:‬‬ ‫افتح ملف نص جديد‪ ،‬واكتب فيه ما ي‬ ‫>‪<!DOCTYPE html‬‬ ‫>‪<html‬‬ ‫>‪<head‬‬ ‫>‪<title>your name</ title‬‬ ‫>‪</head‬‬ ‫>‪<body‬‬ ‫مادة الميتاداتا‬ ‫>‪</body‬‬ ‫>‪</html‬‬ ‫ثم احفظ الملف بامتداد ‪ ،.html‬مثل ‪ ،: index.html‬وافتحه باستخدام متصفح اإلنينت لعرض‬ ‫الصفحة‪.‬‬
12. ‫‪03‬‬ ‫التنسيق‬ ‫البس ط‬ ‫ي‬ ‫بإستخدام وسوم‬ ‫وخصائص ‪HTML‬‬
13. ‫قسم المكتبات والوثائق والمعلومات‬ ‫جامعة القاهرة ‪ -‬كلية اآلداب ‪-‬‬ ‫تنسيق لون الخلفية والنص‬ ‫مثال‬ ‫وسم ‪bgcolor‬‬ ‫ُيستخدم مع وسم >‪ <body‬لتحديد لون خلفية الصفحة‪:‬‬ ‫>"‪<body bgcolor=" color name‬‬ ‫أو باستخدام كود اللون‪:‬‬ ‫>"‪<body bgcolor=" color code‬‬ ‫وسم ‪text‬‬ ‫ز‬ ‫ُيستخدم مع وسم >‪ <body‬لتحديد لون النص يف الصفحة‪:‬‬ ‫>"‪<body text=" color code‬‬ ‫>‪<!DOCTYPE html‬‬ ‫>‪<html‬‬ ‫>‪<head‬‬ ‫>‪<title>your name</title‬‬ ‫>‪</head‬‬ ‫>"‪<body bgcolor="336fff" text="33ffd1‬‬ ‫‪web site‬‬ ‫>‪</body‬‬ ‫>‪</html‬‬ ‫ز‬ ‫مالحظة ‪ :‬يجب كتابة خصائص اللون داخل وسم >‪ <body‬نفسه‪ ،‬وليس يف‬ ‫وسوم >‪<body‬‬ ‫متعددة‪.‬‬
14. ‫قسم المكتبات والوثائق والمعلومات‬ ‫جامعة القاهرة ‪ -‬كلية اآلداب ‪-‬‬ ‫مثال‬ ‫>‪<!DOCTYPE html‬‬ ‫>‪<html‬‬ ‫>‪<head‬‬ ‫>‪<title>your name</title‬‬ ‫>‪</head‬‬ ‫>"‪<body bgcolor="336fff" text="33ffd1‬‬ ‫>‪<sup><mark>web site</mark></sup‬‬ ‫>‪</body‬‬ ‫>‪</html‬‬ ‫الوسم‬ ‫الوظيفة‬ ‫>‪ <h1‬إل >‪<h6‬‬ ‫العناوين الرئيسية وتكبيال نص‬ ‫>‪<big‬‬ ‫تكبي النص‬ ‫>‪<small‬‬ ‫تصغي النص‬ ‫>‪<p‬‬ ‫كتابة فقرة‬ ‫>‪<u‬‬ ‫خط أسفل النص‬ ‫>‪ <s‬أو >‪<del‬‬ ‫خط يتوسط النص‬ ‫>‪ <b‬أو >‪<strong‬‬ ‫خط ثقيل‬ ‫>‪<tt‬‬ ‫خط يشبه اآللة الكاتبة‬ ‫>‪ <i‬أو >‪<em‬‬ ‫خط مائل‬ ‫>‪<sup‬‬ ‫كلمة فوق السطر‬ ‫>‪<sub‬‬ ‫كلمة أسفل السطر‬ ‫>‪<mark‬‬ ‫تظليل الكالم‬ ‫>‪<br‬‬ ‫االنتقال إل سطر جديد‬ ‫>‪<hr‬‬ ‫أفق‬ ‫رسم خط‬ ‫ي‬ ‫األفق‬ ‫تحديد لون الخط‬ ‫ي‬ ‫>"‪<hr color="color‬‬
15. ‫قسم المكتبات والوثائق والمعلومات‬ ‫جامعة القاهرة ‪ -‬كلية اآلداب ‪-‬‬ ‫أساسيات‬ ‫تنسيق النصوص‬ ‫وسم >‪<font‬‬ ‫ز‬ ‫الفرع ة‪:‬‬ ‫ُيستخدم للتحكم يف نوع الخط ولونه وحجمه‪ ،‬ويعمل معه عدد من الخصائص‬ ‫ي‬ ‫>‪ <font‬النص >‪</font‬‬ ‫خاصية ‪face‬‬ ‫ُتستخدم لتحديد نوع الخط‪ ،‬ويمكن تحديد ر‬ ‫أكي‬ ‫التال‬ ‫الخط‬ ‫إل‬ ‫المتصفح‬ ‫ينتقل‬ ‫بحيث‬ ‫خط‬ ‫من‬ ‫ي‬ ‫إذا لم يتعرف عىل األول‪ :<font face=" andalus "> :‬ر‬ ‫مرسوعات تخرج الفرقة الرابعة >‪</font‬‬ ‫خاصية ‪color‬‬ ‫ُ‬ ‫تستخدم لتحديد لون الخط‪:‬‬ ‫>‪<font color=" red">hello my friend</ font‬‬ ‫خاصية ‪size‬‬ ‫ُ‬ ‫تستخدم لتحديد حجم الخط‪ ،‬والحجم‬ ‫ز‬ ‫اض هو ‪3:‬‬ ‫االفي ي‬ ‫>‪<font size="+ 2">hello my friend</ font‬‬
16. ‫قسم المكتبات والوثائق والمعلومات‬ ‫جامعة القاهرة ‪ -‬كلية اآلداب ‪-‬‬ ‫تنسيقات النص‬ ‫▪‬ ‫الوسم <‪ > b‬خط سميك >‪ : <b>Text</ b‬أو >‪<strong> Text</ strong‬‬ ‫▪‬ ‫▪‬ ‫الوسم <‪ > i‬خط مائل >‪ : <i>Text</ i‬أو >‪<em>Text</ em‬‬ ‫▪‬ ‫▪‬ ‫الوسم <‪ > u‬خط أسفل النص >‪: <u>Text</ u‬‬ ‫ز‬ ‫الوسم < ‪ > sup‬أس يف المعادالت >‪ : 5<sup> 8</sup‬لعرض ‪5⁸‬‬ ‫كيميائ >‪ : CO<sub> 2</sub‬لعرض ‪CO₂‬‬ ‫رمز‬ ‫ي‬ ‫اتجاه النص‬ ‫"‪ : align="center‬توسيط النص‬ ‫"‪: align="right‬‬ ‫ز‬ ‫لليمي‬ ‫محاذاة النص‬ ‫"‪: align="left‬‬ ‫محاذاة النص لليسار‬ ‫"‪ : dir="rtl‬اتجاه النص من‬ ‫>"‪<body align ="center‬‬ ‫ز‬ ‫اليمي إىل اليسار‬ ‫"‪ : dir="ltr‬اتجاه النص من اليسار إىل‬ ‫ز‬ ‫اليمي‬ ‫>"‪<body align=" center" dir="rtl‬‬ ‫مثال‬ ‫>‪<html‬‬ ‫>‪<head‬‬ ‫>‪<title>my first webpage</title‬‬ ‫>‪</head‬‬ ‫>‪<body‬‬ ‫"‪<font face="andalus" color="red‬‬ ‫>"‪size="10‬‬ ‫>‪<b><i><u>hello my friend</u></i></b‬‬ ‫>‪</font‬‬ ‫>‪</body‬‬ ‫>‪</html‬‬
17. ‫قسم المكتبات والوثائق والمعلومات‬ ‫جامعة القاهرة ‪ -‬كلية اآلداب ‪-‬‬ ‫الوسم أو الخاصية‬ ‫الوظيفة‬ ‫‪face‬‬ ‫تحديد نوع الخط‬ ‫‪color‬‬ ‫تحديد لون الخط‬ ‫‪size‬‬ ‫تحديد حجم الخط‬ ‫>‪<b‬‬ ‫كتابة نص عريض‬ ‫>‪<big‬‬ ‫كتابة نص كبي‬ ‫>‪<i‬‬ ‫كتابة نص مائل‬ ‫>‪<small‬‬ ‫كتابة نص صغي‬ ‫>‪<strong‬‬ ‫ً‬ ‫دالليا‬ ‫إبراز النص‬ ‫>‪<sub‬‬ ‫كتابة نص منخفض‬ ‫>‪<sup‬‬ ‫كتابة نص مرتفع‬ ‫>‪<tt‬‬ ‫عرض النص بخط يشبه اآللة الكاتب ة‬ ‫>‪<s‬‬ ‫وضع خط يتوسط النص‬
18. ‫التكليف ‪ :‬إنشاء صفحة ويب‬ ‫ر ئ‬ ‫أنس صفحة ويب بسيطة تتضمن‪:‬‬ ‫ً‬ ‫عنوانا ر ً‬ ‫ئيسيا ‪ ،: My Favorite Book‬واجعل لونه ز‬ ‫أخرص‪.‬‬ ‫ً‬ ‫ً‬ ‫أفقيا أسفل العنوان‪ ،‬ولونه أزرق‪.‬‬ ‫خطا‬ ‫ً‬ ‫ً‬ ‫فرعيا‪: About the Book .‬‬ ‫عنوانا‬ ‫المفضل‪.‬‬ ‫فقرة من ثالثة أسطر تتحدث فيها عن كتابك‬ ‫ز‬ ‫أضف يف نهاية الفقرة الصيغة ‪ H₂O‬باستخدام النص المنخفض‪.‬‬ ‫اجعل حجم الخط ‪ ٥‬ونوعه ‪Tahoma .‬‬
19. ‫قسم المكتبات والوثائق والمعلومات‬ ‫جامعة القاهرة ‪ -‬كلية اآلداب ‪-‬‬ ‫التعامل مع‬ ‫الخط‬ ‫الفقرات وترتيب محتوى الصفح ة‬ ‫ُ‬ ‫األفق >‪ : <hr‬ي ستخدم للداللة عىل فاصل ز‬ ‫بي‬ ‫ر يُ‬ ‫ز‬ ‫موضوعي أو‬ ‫ز‬ ‫مقطعي‪ ،‬وال يحتاج إل وسم إغالق‬ ‫العناوين >‪ : <h1‬إىل >‪<h6‬‬ ‫ُ‬ ‫الفرع‪،‬‬ ‫تستخدم لتنظيم العناوين بحسب مستوياتها >‪ : <h1‬للعنوان الرئيس‪ ،‬ثم >‪ <h2‬للعنوان‬ ‫ي‬ ‫المنطق للعناوين‪ ،‬مع عدم اختيار مستوى العنوان لمجرد حجمه؛ فالتنسيق البرصي ُيضبط باستخدام ‪CSS.‬‬ ‫ي‬ ‫وهكذا ‪ُ .‬يراع التسلسل‬ ‫>‪ </h 1‬العنوان الرئيس >‪<h1‬‬ ‫فرع >‪<h2‬‬ ‫>‪ </h 2‬عنوان‬ ‫ي‬ ‫ز‬ ‫أدن >‪<h3‬‬ ‫>‪ </h 3‬عنوان‬ ‫الفقرة ‪<p> :‬‬ ‫ُ‬ ‫تستخدم لكتابة فقرة‬ ‫ز‬ ‫مستقلة ‪ <p> :‬هذه فقرة يف صفحة الويب >‪.</p‬‬
20. ‫قسم المكتبات والوثائق والمعلومات‬ ‫جامعة القاهرة ‪ -‬كلية اآلداب ‪-‬‬ ‫اتجاه النص‪: dir‬‬ ‫ُ َّ‬ ‫تحدد جهة كتابة النص باستخدام الخاصية ‪،dir‬‬ ‫يمكن تطبيقها عىل‬ ‫ز‬ ‫ز‬ ‫اليمي ‪.‬‬ ‫اليمي إل اليسار‪ ،‬و ‪ ltr‬من اليسار إل‬ ‫وقيمتاها ‪ rtl‬من‬ ‫الفقرة أو الصفحة‪:‬‬ ‫>"‪ <p dir="rtl‬فقرة باللغة العربية >‪</p‬‬ ‫>‪<p dir="ltr">A paragraph in English.</ p‬‬ ‫الوسم >‪ <dir‬ليس الوسم المخصص لتحديد اتجاه النص؛ استخدم الخاصية ‪dir.‬‬ ‫االنتقال إىل سطر جديد >‪: <br‬‬ ‫ُيستخدم لالنتقال إل سطر جديد داخل النص‪ ،‬وال يحتاج إل وسم إغالق‬ ‫‪ .‬ال ُيستخدم إلضافة فراغ ز‬ ‫بي الفقرات؛ لذلك نستخدم >‪ <p‬للفقرات المستقلة‪.‬‬ ‫‪I am<br>a student in Cairo University‬‬
21. ‫قسم المكتبات والوثائق والمعلومات‬ ‫جامعة القاهرة ‪ -‬كلية اآلداب ‪-‬‬ ‫الروابط >‪: <a‬‬ ‫ز‬ ‫إدراج الروابط والصور يف ‪HTML‬‬ ‫ُيستخدم الوسم >‪ <a‬إلنشاء رابط‪ُ ،‬‬ ‫ويكتب النص القابل للنقر ز‬ ‫بي‬ ‫الرابط‪:‬‬ ‫َ‬ ‫وسم البداية‬ ‫ي‬ ‫والنهاية ‪ .‬تحدد الخاصية ‪ href‬وجهة‬ ‫>‪ Google</a‬افتح >"‪<a href="https://www.google.com‬‬ ‫وإلنشاء رابط إلرسال بريد‬ ‫ز‬ ‫ون‪ ،‬نستخدم ‪mailto::‬‬ ‫إلكي ي‬ ‫>‪ a‬اتصل بنا < ‪<a href="mailto:name@example.com"> /‬‬ ‫أنواع الروابط بحسب حالتها‬ ‫يمكن أن يظهر الرابط بألوان مختلفة بحسب تفاعل المستخدم معه‪:‬‬ ‫ز‬ ‫اض األزرق ‪#0000 FF.‬‬ ‫— ‪LINK‬‬ ‫الرابط العادي ‪ :‬رابط لم يزره المستخدم من قبل ‪ .‬لونه االفي ي‬ ‫ز‬ ‫اض‬ ‫البنفسج ‪#800080 .‬‬ ‫— ‪ VLINK‬الرابط الذي تمت زيارته ‪ :‬رابط سبق‬ ‫ي‬ ‫للمستخدم فتحه ‪ .‬لونه االفي ي‬ ‫ز‬ ‫ز‬ ‫اض األحمر ‪#FF 0000‬‬ ‫— ‪ ALINK‬الرابط النشط ‪ :‬رابط يكون المستخدم يف أثناء الضغط عليه ‪ .‬لونه االفي ي‬ ‫‪.‬‬ ‫ُ َّ‬ ‫ز‬ ‫يف الصيغة القديمة‪ ،‬تحدد هذه األلوان من خالل خصائص وسم ‪<body>:‬‬ ‫>"‪<body link="blue" vlink="purple" alink="red‬‬
22. ‫يمكن تغيب لون رابط بعينه هكذا‪:‬‬ ‫>"‪<a href="https://www.google.com‬‬ ‫>‪<font color="#FF 00 CC">here</font‬‬ ‫>‪</a‬‬ ‫الصور >‪: <img‬‬ ‫ُيستخدم الوسم >‪ <img‬إلضافة صورة‪ ،‬وهو وسم مفرد ال يحتاج إل وسم إغالق ‪ .‬تحدد الخاصية ‪ src‬مسار‬ ‫ً‬ ‫ً‬ ‫نصيا لها‪:‬‬ ‫الصورة‪ ،‬وتقدم ‪ alt‬وصفا‬ ‫>" ‪ " width="400 " height="200‬وصف الصورة "=‪<img src="pic.jpg" alt‬‬ ‫ُ‬ ‫تكتب قيمتا ‪ width‬و ‪ height‬بالبكسل‪ ،‬من دون كتابة وحدة القياس‬
23. ‫ُ‬ ‫ز‬ ‫الب كانت تستخدم لتنسيق صفحات‬ ‫المحاضة بعض الوسوم والخصائص القديمة‬ ‫تتضمن أمثلة هذ ه‬ ‫ي‬ ‫ُ‬ ‫ّ‬ ‫ّ‬ ‫وفهم أمثلة ومواد تعليمية قديمة‪ ،‬لكن ال ينصح ‪ HTML‬ندرسها للتعرف إىل تطور ‪ .‬الويب‬ ‫‪ .‬باستخدامها عند إنشاء صفحات ويب حديثة‬ ‫الب تناولناها‪:‬‬ ‫من أبرز األمثلة‬ ‫ي‬ ‫▪ خصائص األلوان والتنسيق داخل الوسوم‪ ،‬مثل ‪ bgcolor‬و ‪ text‬و ‪ link‬و ‪ vlink‬و ‪ alink‬و ‪ align‬و‪color.‬‬ ‫الوسم >‪ <font‬وخصائصه‪ ،‬مثل ‪ face‬و ‪ size‬و‪color.‬‬ ‫▪‬ ‫وسوم العرض القديمة‪ ،‬مثل >‪ <big‬و >‪ <tt‬و ‪<strike>.‬‬ ‫▪‬ ‫األفق‪.‬‬ ‫استخدام >"‪ <hr color="...‬لتغيي لون الخط‬ ‫▪‬ ‫ي‬ ‫ز‬ ‫يف ‪ HTML‬الحديثة‪ ،‬نستخدم ‪ CSS‬لتنسيق األلوان والخطوط واألحجام والمحاذاة‪ ،‬مثل ‪ color‬و ‪background -‬‬ ‫ُ‬ ‫فت َّ‬ ‫نسق باستخدام حاالت ‪ CSS‬مثل ‪ link‬و ‪visited‬‬ ‫‪ color‬و ‪ font- family‬و ‪ font- size‬و ‪ّ text- align.‬أما الروابط‬ ‫تنبيه ‪ :‬ليست كل الوسوم المذكورة قديمة؛ فوسوم مثل >‪ <html‬و >‪ <head‬و >‪ <title‬و >‪ <body‬و >‪<a‬‬ ‫ً‬ ‫غالبا هو طريقة التنسيق‬ ‫و >‪ <img‬و >‪ <p‬و >‪ <h1‬إل >‪ <h6‬و >‪ <br‬و >‪ <hr‬ما زالت مستخدمة ‪ .‬الذي ُيستبدل‬ ‫القديمة‪ ،‬ال الوسم نفسه‪.‬‬
24. ‫ل‬ ً ‫ش‬ ‫ح‬ ‫ت‬ ‫س‬ ‫شكرا ن ا ماعكم‬ mohab.soliman@cu.edu.eg