Más contenido relacionado La actualidad más candente (20) Similar a HTML 5 - CSS 3 Arabic Book (20) Más de iTawy Community (9) HTML 5 - CSS 3 Arabic Book9. ٜ
تنويه
ُغتفرتأليؼ مففي الكتاب ىذااألولى األشيرمفعاـٕٓٔٔ,ُعقدت قد كنت وعمى َالعزـ
ًامطبوع هرإصداَّكأوبيرع كتاب ؿموضوعو في,ًاحاذيبذلؾحذوو أخيوـّم(تع سابقوjQuery
فئٕٓ)دقيقة,َّلكفمشيئةاهللقضتّأّلبعد المحظة ىذه ىّحت لذلؾ المالئمة الظروؼ أّتتيي
مرور مع تتضاءؿ كيذا ٍعمؿ قيمة َّأف أؤمف نيَّألن و , إتمامو عمى ًارشي يفرعش و خمسة انقضاء
الوقتأيتر فقد-تفكير بعد-هرأنش أفًامخمصانيّمج ٍبشكؿ( ِّاإللكتروني الكتاب بصيغةPDF)
.األسطر ىذه كتابة مف أكثر يّمن بّميتط ّل يغةّالص بيذه هرنش كاف اّلم بو ينتفع ارسيفّالد أحد َّلعؿ
مختار
البوكماؿٔٓ/ٙ/ٕٖٓٔ
11. ٔٔ
الكتاب يدي بين
حيـّالر حمفّالر اهلل بسـَّالس و َّالةالص و ,و ِآلو عمى و ٍدَّمحم ِّنانبي عمى الـأجمعيف ِأصحابو,و
:بعد
ػلا دُعَي لـWebبسيط يِّنص بشكؿ المعمومة تقديـ عمى ًارمقتص اليوـ,تقديـ الميـ مف أصبح حيث
المحتوىأسموب و بشكؿاإلعالمي إلى يكوف ما أقرب,ف ,ًالفع كذلؾ ىو َّمابر بؿأصبح قدمف
النادر-أييرب-ػلا اقعوم في تجد أفWebاليوـ-منيا الجيدة اقعوالم أعني و-يقدـ ّل ما
الشكؿ إلى إضافة ئيرم و عمسمو بشكؿ المعموماتالتقميديالمقروءوناحية مف ىذا,مف أما
الناحيةاألػلا رَّتطو فقد ىخرWebػلػاب يعرؼ لما التنظير بدء مع كفيوـ ذاتوWeb 2.0عاـ
ٕٓٓٙظيور إلى بالنتيجة ىّأد ما ىذا و ,كانت التي البرمجية المغات و اتواألد لتطوير الحاجة
ػلا اقعوم مصممي و يمطور يدي بيفWebالعمالء متطمبات تحقيؽ عف ًةرقاص أصبحت التي و
يةرعص ويب اقعوم بامتالؾ الطموحيفالتي وب التقنية أمر ييمو مف قاـ ما عافسرىاتطويرتقديـ و
تأقم أكثر و أقوى منيا جديدة اترإصدامع ًامWebاليوـّألف ذلؾ ,"في النجاح أساس يعتبر التأقمـ
ػلا عالـWeb".
يالكتاب ىذا ناقشمف لكؿ إصدار أحدثلغتيHTMLوCSSاألولى الخطوة افرتعتب المتاف
ُم أليَطرِّوWebإذحبشر يقوـلغةHTML5حشر خالؿ مف لذلؾ التمييد بعدHTMLالتقميدية
الصفر مفومعايير َّثـ مفXHTMLًاأيض الصفر مف,كماػل ًالَّمفص ًاشرح الكتاب ىذا ـِّيقد
CSS3حشر خالؿ مف لذلؾ التمييد بعدCSSالتقميديةًاأيض الصفر مفالكتاب ىذا فإف بيذا و ,
يتألؼمففصميف:
ٔ-HTML5الفصؿ ىذا يناقش :( الخامس اإلصدارومف )األحدثَّةالنصي البرمجة لغة
التَّةشعبيHTMLكتابة عمى ًارقاد يكوف أف ئورلقا يضمف و جَّمتدر و َّؿمفص بشكؿ
.اهلل بإذف يدهري الذي بالشكؿ و غبوير الذي بالمحتوى ويب صفحات
12. ٕٔ
ٕ-CSS3ا ىذا يناقش :( الثالث اإلصدار يقدميا التي ايازالم كامؿ لفصؿومف )األحدث
َّةاّلنسيابي األنماط اؽرأوCSSمف و بسيط بشكؿيوـ,عمى ًارقاد يكوف أف ئورقا يعد و
تجميؿفي موَّقد الذي المحتوىالويب صفحات.ؿَّاألو الفصؿ في كتابتيا ـَّتعم التي
ٖ-عف الحديث يكتمؿ كيلمويب البرمجةالعميؿ طرؼ مفClient Sideأف يجب كاف
فصؿ ىناؾ يكوفثالثلغة عف يتحدثJava Scriptالحداثة أنصار مف ألنني و لكف و
)السيولة (وكتابي اءةربق يززالع ئالقار فأنصح البرمجية بالتقنيات يتعمؽ فيما"ـَّتعم
jQueryفئٕٓدقيقة"لغة عف يتحدث جعمر أي أوjQueryَّطمبس و اضحو بشكؿ
ًّلوأ الكتاب ىذا اءةرق بعدألف ,jQueryلمغة يالعصر البديؿ ىيJava Scriptأييرب.
ف الكتاب ىذا في األفكار عرض يقةرط عف اّأمأجعم كي اجتيدت و حاولت قدياغيرّل و ةَّممم
و دةَّقمعّلًاركثي الذي المتعب بالمحتوى شبييةعانيت مامنوالبرمجة لغات تناقش التي الكتب في
لألسؼأف أقوؿ أف يمكنني وىالكتاب ذاَّالبرمجي األسطر اترعش رِّيفج ّلًةدفع المفيومة غير ة
,ةرالفك عرض في المطموب مف أكثر يطيؿ ّل وَّأن كما ,ليا توضيح دوف ئورقا وجو في ًاحدةولكنو
باختصار.فتيارمع تتوجب التي انبوالج مف جانب أي يغفؿ أف دوف فقط قولو يجب ما يقوؿ
ًاختامو العمؿ ىذا َّؿيتقب أف اهلل أسأؿأفيكتبو و فيو يبارؾًةصدقًةيرجامفبابينتفع الذي العمـ
.ـُّالتعم عمى الصبر و الحفظ و الفيـ ئورقا يميـ أف و بو
صالح ِّدسي ـ.مختار
البوكماؿٕٛ/ٛ/ٕٓٔٔ
15. ٔ٘
مقدمة
لغة الفصؿ ىذا يناقشHTML5ّل ناّألن و ,الويب اقعوم إنشاء في األساس حجر تعتبر التي
عف نتحدث أف يمكفHTML5لغتي الفصؿ ىذا فسيناقش ًةرمباشHTMLوXHTMLًّلوأ,و
مع البدايةلغةHTML.
هي ماHTML؟
َّإفHTMLاختصار ىيabbreviationالجممة مف األولى الحروؼHyper Text Markup
Languageوصؼ (لغة فيةرح غير بترجمة تعني التي والويب صفحات)ٔ
,لغة ليست ىي و
َّةوصفي لغة ىي بؿ ,ّل ,َّةبرمجيMarkup Language,َّألفHTMLتستخدـمف مجموعة
الوسوـTagsلوصؼالويب صفحة.
الوسوـ اَّأمTagsًامسبق محددة أحرؼ أو كممات فييKeywordsتكوف و ,َّةخاص معاني تحمؿ
الشكؿ مف قوسيف بيف ةرمحصو< >مثؿ<b>و<html>شكؿ عمى الغالب في الوسوـ تأتي ,
مثؿ اجوأز<b>و</b>ؿَّاألو الوسـ يدعى ,<b>البداية بوسـBegin Tagالفتح وسـ أو
Opening Tagالثا الوسـ يدعى و ,ني</b>النياية بوسـEnd Tagاإلغالؽ وسـ أو
Closing Tag.
مستندات كتابة يتـHTML(مثؿ بسيط نصي محرر أي باستخداـnotepadـِّمتقد أو )(مثؿ
DreamWaverأوVisual Studioًاامتداد تحمؿ ممفات في ينيازتخ يتـ و ,)extensionمف
: التالييف اّلمتداديف.htmlأو.htm,وبالطبعّليوجدأيفرؽبينيما.
ٔ
قبمي أحد قاـ إف أعرؼ ّل.األنسب الترجمة أنيا أشعر نيّلكن يقةرالط بيذه بترجمتيا
16. ٔٙ
تتكوفمستنداتHTMLإلى باإلضافة عادي نصي محتوى مف أساسي بشكؿوسوـ مف مجموعة
HTML,مستندات فإف الحقيقة في وHTML)الويب ػ(صفحاتب تدعىWeb Pages,ويتـ
استخداـالويب مستعرض باسـ نامجرالب ىذا يعرؼ المستندات ىذه اءةرلق خاص نامجربWeb
Browserأمثمتو مف وInternet ExplorerوFirefoxوGoogle chrome..إلخ.
مستندات اءةرق ىو الويب مستعرض مف اليدؼHTMLبمعنى ,ويب صفحات بشكؿ عرضيا و
وسوـ يعرض ّل الويب مستعرض أفHTMLإلنتاج يستخدميا وَّلكن و مباشر بشكؿ كنصوص
المو المحتوى و بالشكؿ ويب صفحةمستند في صوفيفHTML.
في أبدأ كيفتعمممستندات كتابةHTML؟
في تبدأ لكي تحتاجو ما كؿتعمـمستندات كتابةHTML(مثؿ نصوص محرر ىوNotepadو )
(مثؿ ويب مستعرضInternet Explorer)خطوة التعمـ و التالية اترالفق اءةرق يمكنؾ ذلؾ بعد ,
ل يقةرط أفضؿ َّأف لؾ أؤكد و بخطوةمتعمـ–أييرب-ستصادفؾ التي األمثمة كتابة ىيًاّلحقبشكؿ
مباشر.الويب مستعرض باستخداـ ىااختبار َّثـ مف و النصوص محرر باستخداـ
لغة في ل َّاألو المثالHTML
صفحة أوؿ بكتابة اآلف سنقوـHTML:التالية اتوالخط باتباع ًامع
نقوـًّلوأةرالمفك ليكف و النصوص اترمحر أحد بفتحNotepadنكتب و المثاؿ سبيؿ عمى
:التالية ةرالشيف
<html>
<head>
<title>
My first HTML page
17. ٔٚ
</title>
</head>
<body>
<p>
Welcome to my first HTML page!
</p>
</body>
</html>
باسـ الممؼ بحفظ نقوـ َّثـfirstPage.html
الشكل1:ةشيفر أول كتابةHTMLالممف حفظ و ةالمفكر برنامج في
الالحقة عف مختمفة بالحقة الممؼ لحفظ : ممحوظة.txt,يقتافرط ىناؾالممفات جميع الخيار نختار أف األولى
*.*ػك حفظ المنسدلة القائمة مفSave as typeنك ثـ الممؼ اسـ أسفؿ ةرالصو في ةرالظاىو الممؼ اسـ تب
,عادي بشكؿ ّلحقتوأف فيي ًاَّشخصي مياِّأفض التي و الثانية اَّأمعالمتي بيف المطموبة ّلحقتو مع الممؼ اسـ نضع
اقتباسمزدوجتيفأع ةرالصو في حَّموض ىو كما حفظ نختار و.اله
18. ٔٛ
اآلفوباّلسـ الممؼ بحفظ قمنا أف بعدfirstPage.htmlأحد باستخداـ اضورباستع نقوـ
مستعرضاتالويبليكف وInternet Explorer 8النيائي الشكؿ لنشاىد المثاؿ سبيؿ عمى
:كمايمي لمصفحة
الشكل2:النهائي الشكلالمستعرض فيباستخدام مكتوبة صفحة ل َّألوHTML
لغة باستخداـ األولى صفحتنا بكتابة قمنا فقد ىتر كماHTMLنص عمى تحتوي الصفحة ىذه و
النص ىو بسيط ترحيبWelcome to my first HTML page!,باستخداـ النص ىذا توليد تـ
الخاص الوسـpالبا ستكوف بساطتيا عمى الصفحة ىذه َّفإف يرّبتصو ولغة إلى لمدخوؿ اسعوال ب
HTMLْإف.التركيز مف بقميؿ التالية اترالفق أترق
عناصرHTML
صفحات مف صفحة كؿ تتكوفHTMLالعناصر مف مجموعة مفElementsإنشاؤىا يتـ
الوسوـ باستخداـTagsالوسوـ وًاسابق قمنا كماأحرؼ عف ةرعباأكممات وخاصة معاني تحمؿ
ال لمستعرض بالنسبةَّةيزإنجمي لكممات اتراختصا عف ةرعبا الوسوـ أسماء تكوف ما ًاغالب و ويب
فالوسـ<p>النصوص مقاطع عرض عف المسؤوؿ العنصر إلنشاء يستخدـ ًالمثParagraphs
صفحات ضمفHTMLوالذيسيتـعممو مناقشةمععمؿفي تفصيمي بشكؿ الوسوـ باقي
التالية الصفحات.
الشكؿ مف اسوأق بيف الوسوـ تحصر< >الوسـ أمثمتيا مف و<html>الوسـ و<head>و
الوسـ<title>الوسـ و<body>الوسـ و<p>.
19. ٜٔ
عناصر مف عنصر لكؿHTMLبداية وسـBegin Tagنياية وسـ وEnd Tagوسوـ تكوف
القوسيف بيف ةرمحصو البداية< >ةرمحصو فتكوف النياية وسوـ اَّأمًامضاف السابقيف القوسيف بيف
المائؿ الخط رمز إلييما/ػب المعروؼSlashبالشكؿ</ >الوسـ النياية وسوـ أمثمة مف و
</html>الوسـ و</head>الوسـ و</title>الوسـ و</body>الوسـ و</p>كؿ يحوي و
عناصر مف عنصرHTMLلعرض ًاَّعادي ًاَّنص نيايتو و بدايتو وسمي بيفوالعنصر فعؿ (كماp
)السابؽ مثالنا فيعناصر مف آخر عدد أي يحوي أف يمكف وHTMLتيبربت اـزاّللت شرط
متناظرلوسـ كتابة فيتـ تيبرالت اعىرُي أف يجب النياية وسوـ كتابة فعند ,البداية و النياية وسوـ
األ )نياية وسـ لو ليس (الذي المنتيي غير البداية بوسـ الخاص النيايةأف حيف ففي ,فاألقرب قرب
:ًاصحيحي يعتبر التالي تيبرالت
<html>
<body>
<p>
!اٌّسزؼشع ٟف ٗػشػ ُس١ز ٞػبد ٔض
</p>
</body>
</html>
ؿَّاألو النياية وسـ َّألف</p>ىو و منتيي غير بداية وسـ أقرب إلنياء جاء<p>َّثـ ,مثالنا في
النياية وسـ جاء</body>ىو و منتيي غير بداية وسـ أقرب إلنياء<body>وسـ جاء َّثـ ,
النياية</html>ىو و منتيي غير بداية وسـ أقرب إلنياء<html>.
:ًاخاطئ يعتبر التالي تيبرالت َّفإف
<html>
<body>
20. ٕٓ
<p>
!اٌّسزؼشع ٟف ٗػشػ ُس١ز ٞػبد ٔض
</body>
</html>
</p>
النياية وسـ ألف</body>الوسـ إلنياء جاء<body>المنتيي غير األقرب الوسـ يكف لـ الذي
النياية وسمي مع تكررت نفسيا الحالة و لألسؼ</html>و</p>.
الخالصةت ّل :َنسكتابةتيبرت ِعار و اإلغالؽ وسـ.اإلغالؽ وسوـ
اغاترالفWhite Spaces
لغة فيHTML(مثؿ اغاترالف لمحارؼ قيمة أي يوجد ّلSpaceوTabاضراستع عند )إلخ ..
مستعرض باستخداـ الصفحاتالويبو ةرالشيف تيبرت لغرض اغاترالف محارؼ تستخدـ ماَّإن و
ةرشيف اءةرفق ,فقط أوضح بشكؿ مقروءة جعمياHTML:المثاؿ سبيؿ عمى التالية
<html>
<body>
<h1>
Hi!
</h1>
</body>
</html>
ةرشيف اءةرق مف بكثير أسيؿHTML:التالية
<html><body><h1>Hi!</h1></body></html>
21. ٕٔ
يماَّأن معمتماثمتاف.الويب مستعرض باستخداـ اضيماراستع عند ًاتمام
ضغطة بمقدار متماثميف نياية و بداية وسمي بيف الموجود المحتوى كؿ احةزإ الجيدة َّةالبرمجي العادات مف : فائدة
Tabاغاترف ثالث بمقدار احتيازإ ؿِّيفض البعض ومفتاح عمى ضغطات (ثالثSpace).
لعناصر العام الشكلHTML
وصؼ يتـعناصرHTMLلعنصر العاـ الشكؿ نعرض فيمايمي و ,الوسوـ باستخداـHTML:
عنصر يبدأHTMLالبداية بوسـBegin Tag.
عنصر ينتييHTMLالنياية بوسـEnd Tag.
عنصر محتوى يدعى النياية و البداية وسمي بيف كتابتو يتـ ما كؿHTMLىناؾ أف ًاعمم
العناصر بعضالتيمحتوى أي تحوي ّلالمحتوى عديمة تسمى التي و.
يندمجوسماالنياية و البدايةاحدو وسـ فيفيحالة.المحتوى عديمة العناصر
عناصر ألغمب الخصائص مف مجموعة يررتم يتـHTMLيؽرط عف البداية وسـ في
اصفاتوالAttributes.
:ممحوظة,ًاأبد و ًادائمب قـعناصر كتابةHTMLةرالصغي بحالتيا َّةيزاإلنجمي باألحرؼLower Case.
:التالية األمثمة لنشاىد
النهاية وسمالعنصر محتوىالبداية وسم
</p>Welcome to my website.<p>
</a>Go to index<a href="index.htm">
<hr />
سطر كؿ ؿِّثيمالسابؽ الجدوؿ فيعناصر مف ًارعنصHTMLالصفحة فيُّميتخي بشكؿ,
بالوسـ يبدأ ؿَّاألو فالعنصر<p>بالوسـ ينتيي و</p>ويحويالنصي المحتوىWelcome to
22. ٕٕ
my websiteبالوسـ الثاني العنصر يبدأ بينما<a href="index.htm">بالوسـ ينتيي و</a>
ويحويالنصي المحتوىGo to indexالقيمة إسناد معindex.htmاصفتوو إلىhrefفي ,
عديـ الثالث العنصر َّأف حيفاحدو وسـ في النياية و البداية وسمي اتحاد مف يتكوف المحتوى
بالشكؿ<hr />.
لصفحات العام الشكلHTML
صفحة كؿ تتكوفHTML:مناطؽ ثالث مف
الصفحة جسد منطقةBody Section:
وسمي بيف ةرالمحصو المنطقة ىي و<body>و</body>التي ىي المنطقة ىذه و
لمصفحة الظاىر المحتوى ؿِّثتم التي العناصر جميع تضـ و لمصفحة النيائي الشكؿ تنتج
مستعرض في سيظير الذي والويببالطبع و الصفحة ىذه اضراستع عندءالجز فإف
عناصر مف األكبرHTML.المنطقة ىذه في سيكوف
الصفحة أسر منطقةHead Section:
وسمي بيف ةرالمحصو المنطقة ىي و<head>و</head>تحوي المنطقة ىذه و
عناصر مف مجموعةHTMLاضراستع عند الويب مستعرض في يظير ّل أغمبيا
ا لكف و الصفحةليذه ئيسيةرال لميمةىي المنطقةالمحتوى َّةماىي عف معمومات إعطاء
تستخدميا التي و ىاألخر ةرالظاى غير المعمومات لبعض إضافة بالصفحة الموجود
.الغالب في البحث و األرشفة أجؿ مف البحث محركات
األـ المنطقةٕ
:
ٕ
المطروحة ةرالفك لتبسيط شخصي اجتياد ىو َّماإن و أتيارق التي اجعرالم مف أي في المصطمح ىذا يرد لـ)أيير(ب.
23. ٕٖ
وسمي بيف ةرالمحصو المنطقة ىي و<html>و</html>المنطقة ىي المنطقة ىذه و
التيفيي بيذا و الجسد و أسرال منطقتي تضـ التي ىي و الصفحة نياية و بداية تحدد
)(صفحة مستند كامؿ تضـHTML.
مستند ألي العاـ الشكؿ يكوف بيذا وHTML:كمايمي
<html>
<head>
ٕ٘ب ْٛس١ى اٌظب٘ش غ١ش اٌشأط ِٕـمخ ِٜٛحز
</head>
<body>
ٟإٌٙبئ اٌظفحخ ِٜٛحزاٌظ ٚب٘شٕ٘ب ْٛس١ى ًبَّ١ٍفؼ
</body>
</html>
الوسوم اصفاتوAttributes
لغة َّبأف ًاسابق قمناه ما كؿ صّيتمخHTMLمف مجموعة إنشاء عبر المحتوى تقديـ لؾ تتيح
عناصر مف عنصر كؿ ميمة ,العناصرHTMLفيناؾ صفحتؾ في ًاجد محدد شيء عرض
ابطوالر لعرض عناصر ىناؾ و الصور لعرض عناصر ىناؾ و النصوص لعرض عناصر
َّةالتشعبيLinksوسوـ مف خاص وسـ اسطةوب العناصر ىذه مف عنصر كؿ إنشاء يتـ ,إلخ ..
HTMLبي الظاىر العنصر محتوى افريحص نياية وسـ و بداية وسـ عنصر لكؿ يكوف و ,.نيما
عرض سموؾ صّتخص التي و َّةاإلضافي الخصائص مف بمجموعة البداية وسوـ بعض تزويد يمكف
اصفاتوبال يعرؼ ما عبر ىذا يتـ و اهولمحت العنصرAttributesسبيؿ عمى التالية ةرلمشيف انظر ,
:المثاؿ
24. ٕٗ
<p align="center">
إٌظٛص ػشع ٌؼٕظش ٟإٌظ ٜٛاٌّحز
</p>
فقد تالحظ كمابالعنصر الخاص البداية وسـ إلى ةرالشيف ىذه في جديد شيء بإضافة قمناpو أّل
اصفةوال ىوalignالعنصر سيعرضو الذي النص محاذاة تحدد التيpالقيمة أعطيناىا وcenter
:كمايمي النص سيظير اضياراستع عند و الصفحة منتصؼ في النص لعرض
الشكل3النصوص عرض عنصر :<p>المحاذاة اصفةو إضافة عندalign
وسوـ مف بداية وسـ لكؿ يوجد ,ًاحسنHTMLاصفاتوال مف ًاسمف معروفة مجموعةAttributesو
اصفةوفال ,اصفةوال إلى إسنادىا يتـ أف يمكف التي القيـ مف ًاسمف معروفة مجموعة اصفةو لكؿ يوجد
alignالبداية لوسـ ًاسمف المعروفة اصفاتوال إحدى ىي<p>يمكف التي القيـ و المثاؿ سبيؿ عمى
ىي إلييا تسند أفleftأو اليسار إلى النص لمحاذاةrightأو اليميف إلى النص لمحاذاةcenter
و عنو الحديث عند بالتفصيؿ وسـ كؿ اصفاتو عرض بالطبع سيتـ و ,الوسط إلى النص لمحاذاة
أىو اصفةولم العاـ الشكؿ أف لمقوؿ داعي ّل أنو ظفname="value"َّأف حيثnameاسـ ىو
و اصفةوالvalueاقتباس عالمتي بيف توضع أف يجب التي و اصفةوال لتمؾ دةَسنُالم القيمة ىي
مزدوجتيف""مفردتيف اقتباس عالمتي أو‘ ‘.
اصفاتو و وسوـ كتابة تتـ أف يجب : ممحوظةHTMLبةرصغي َّةيزإنجمي حروؼLower Case.
25. ٕ٘
عناصر عف بالحديث نبدأ أف اآلف نستطيع ناَّأن أظفHTMLمع البداية و بالتفصيؿ و ًةكاف
عناصرالعناويفHeadingsالمشتركة اصفاتوال مف بمجموعة ًّلوجد سنعرض ذلؾ قبؿ لكف و ,
وسوـ أغمب بيفHTMLا تمؾ مف وسـ كؿ مع ىااررتك مف ًّلبد ىنا,لوسوـو:الجدوؿ فيمايمي
اصفةوال اسمالممكنة القيمالشرح
id)مكرر يد(غيررف اسـ اي
لممستند بالنسبة
ًاَّبرمجي العنصر مع لمتعامؿ اّلسـ ىذا استخداـ يتـ
لغة باستخداـJava ScriptأوjQueryليا و ,
استخدامس ىأخر اتعرض يتـأحدىاةرفق في
ًاّلحق الداخمية ابطوالر
dirltr
rtl
,اءةرالق اتجاه لتحديدltrمف اءةرالق اتجاه أف تعني
اَّأم اليميف إلى اليسارrtlمف اءةرالق اتجاه أف فتعني
اليسار إلى اليميف
alignleft
right
center
justify
النص محاذاة لتحديد
classفئة اسـ أيCSSصالحسيتـ و العنصر إلى الفئة خصائص كافة لمنح
الفصؿ في بالتفصيؿ ىذا مناقشةػب الخاصCSS3
nameيدرف اسـ أيًاّبرمجي العنصر لتمييز تستخدـ
الجدول1عناصر أغمب بين المشتركة اصفاتوال جدول :HTML
26. ٕٙ
العناوين عناصرHeadings
لغة توفرHTML:تيبرالت عمى ىي و العناويف لعرض عناصر ةَّتسh1وh2وh3وh4و
h5وh6العنصر َّأف حيثh1العنصر و ًاحجم ىاأكبر ىوh6جيتدر بينيما ما و األصغر ىو
ػلا حرؼ ًاطبع و ,الحجـ فيhلكممة اختصار ىناHeadingعمى التالية ةرالشيف نجرب دعنا ,
:المثاؿ سبيؿ
<html>
<head>
<title>
ٓ٠ٚاٌؼٕب ٌؼٕبطش اخزجبس طفحخ
</title>
</head>
<body dir='rtl'>
<h1>لَّاألو انمضرىي مه عىىان عىصر</h1>
<h2>انثاوي انمضرىي مه عىىان عىصر</h2>
<h3>انثانث انمضرىي مه عىىان عىصر</h3>
<h4> انمضرىي مه عىىان عىصرانراتع </h4>
<h5>انخامش انمضرىي مه عىىان عىصر</h5>
<h6>انضادس انمضرىي مه عىىان عىصر</h6>
</body>
</html>
:التالية النتيجة سنشاىد الويب مستعرض في السابقة الصفحة اضراستع عند
27. ٕٚ
الشكل4:العناوين عناصر اختبار صفحةh1إلىh6
الوسـ بتزويد قمنا فقد تالحظ كما<body>اصفةوبالdirو المستند جسد اءةرق اتجاه تحدد التي و
القيمة بإسناد قمناrtlو ليالنجعؿ ذلؾاليسار إلى اليميف مف اءةرالق اتجاهright to leftما ىو و
أية َطْعُت لـ اصفةوال ىذه أف حاؿ في و ,بالطبع بيةرالع المغة مع يتناسبالقيمة فإف قيمة
ىي ليا اضيةراّلفتltr.اليميف إلى اليسار مف اضيراّلفت اءةرالق اتجاه أف أي
استخدـ :ممحوظةالعناويف عناصر<h1>إلى<h6>أجؿ مفتستخدميا ّل و ,فقط اترالفق عناويفالنص لجعؿ
ًايضرع.الغرضيف ليذيف خاصة وسوـ فيناؾ الحجـ كبير أو
األفقي الخط عنصرHorizontal Line
لغة ـِّتقدHTMLالخاص الوسـ<hr />:التالي لممثاؿ انظر ,الصفحة في َّةاألفقي الخطوط إلنشاء
<html>
<head>
28. ٕٛ
<title>
ٟاألفم اٌخؾ ٌؼٕظش اخزجبس طفحخ
</title>
</head>
<body dir='rtl'>
<p>فمؾ ٌٍزجشثخ ٌٝٚاأل اٌفمشح ِٜٛحز</p>
<hr />
<p>فمؾ ٌٍزجشثخ اٌثبٔ١خ اٌفمشح ِٜٛحز</p>
<hr />
<p>فمؾ ٌٍزجشثخ اٌثبٌثخ اٌفمشح ِٜٛحز</p>
</body>
</html>
:كمايمي الويب مستعرض في السابقة ةرالشيف تبدو
الشكل5:العنصر تجربة صفحة<hr />
29. ٕٜ
التعميقاتComments
في المبرمجوف اعتادجَلعاُت ّل َّةتوضيحي أسطر كتابة عمى َّةالتقميدي البرمجة لغاتتعتبر ّل أنيا إذ
ةرالشيف مف ًاءجز,ةرفت بعد لتعديميا يعود عندما ةرالشيف اءزبأج المبرمج لتذكير فقط تستخدـ ماَّإن و
بالتعميقات تعرؼ األسطر ىذه و ,الزمف مفCommentsَّأف مع و ,HTMLكما وصفية لغة
قمتلكتابة التالية العامة الصيغة ـِّفتقد ,المستندات ضمف التعميقات لكتابة آلية توفر أنيا ّإّل ًاسابق
:التعميؽ
<!-- comment -->
مستند ضمف التعميقات استخداـ عمى التالي المثاؿ لنشاىدHTML:
<html>
<head>
<title> إٌ١ٙب ًبِؼبف ٟاألفم اٌخؾ ٌؼٕظش اخزجبس طفحخ
ِجّٛػخخَّ١اٌجشِج اٌزؼٍ١مبد ِٓ </title>
</head>
<body dir='rtl'>
<!-- انرانييه انضطريهًاألون نهفقرج -->
<p>فمؾ ٌٍزجشثخ ٌٝٚاأل اٌفمشح ِٜٛحز</p> <hr />
<!-- انثاويح نهفقرج انرانييه انضطريه -->
<p>فمؾ ٌٍزجشثخ اٌثبٔ١خ اٌفمشح ِٜٛحز</p> <hr />
<!-- انثانثح نهفقرج انراني انضطر -->
<p>فمؾ ٌٍزجشثخ اٌثبٌثخ اٌفمشح ِٜٛحز</p>
</body>
</html>
30. ٖٓ
كمايمي السابقة ةرالشيف تبدوتظي ّل التعميقات أف دّكيؤ مما الويب مستعرض فيأثناء (المستند في ر
األمر اختيار بِّجر الصفحة اضراستع"عرض-<المصدر"أو"View->source"):
الشكل6الصفحة في تظهر ال و المصدر عرض نافذة في األخضر بالمون تظهر التعميقات :
.التعميؽ وسـ بداية في ؿّاألو القوس بعد ُّبالتعج ةرإشا َتنس ّل :ممحوظة
النصوص عناصرParagraphs
ىذه إنشاء يتـ ,الغالب في النصية اترالفق مف مجموعة مف اقعوال في الويب صفحة تتكوفاترالفق
الوسـ باستخداـ<p>الوسـ يستخدـ و ,السابقة األمثمة في استخدامو معنا مر الذي و<br />
فييا بما اغاترالف محارؼ ألف ذلؾ و التالي السطر إلى لمنزوؿمحرؼالمفتاحEnterلي ليسا
لغة في قيمةHTML.ًاسابق نارذك كما
النصوص تنسيق عناصرText Formatting
لغة توفرHTMLًايضرع النص فمجعؿ ,النصوص لتنسيؽ العناصر مف مجموعةBoldتوفر
العنصر<b>العنصر (أو<strong>ًالمائ النص لجعؿ و ,)Italicالعنصر توفر<i>(أو
31. ٖٔ
العنصر<em>العنصر توفر النص أسفؿ خط لوضع و ,)<u>النص لشطب و ,Deleteتوفر
العنصر<del>:المثاؿ سبيؿ عمى التالية ةرالشيف لنشاىد ,
<html>
<head>
<title>إٌظٛص رٕس١ك ٌؼٕبطش اخزجبس طفحخ</title>
</head>
<body>
<p>
This is a sample text to demonstrate
<b>bold</b>,
<i>italic</i>,
<u>underline</u> and
<del>delete</del> tags.
<!-- ًاسـش ٌٍٕضٚيًاٚاحذ <br/> اسزخذِٕب -->
<br/>
You may use other tags to generate the same output:
<br/>
This is a sample text to demonstrate
<strong>bold</strong>,
<em>italic</em>,
<u>underline</u> and
<del>delete</del> tags.
</p>
</body>
32. ٖٕ
</html>
:كمايمي المستعرض في أعاله ةرالشيف تبدو
الشكل7النصوص تنسيق عناصر اختبار صفحة :
وسوـ جعمر في ىاذكر سيتـ النصوص تنسيؽ عناصر مف يدزالم ىناؾ بالطبع :ممحوظةHTMLىذا نياية في
.الفصؿ
ةَّالخاص الرموز و المحارفSpecial Characters
كتابتيا يؽرط عف الصفحة في عرضيا يمكف ّل التي الرموز و المحارؼ بعض ىناؾمباشر بشكؿ
ياضياترال في المستخدمة الرموز مثؿاغاترالف محارؼ ولغة توفر ,ىاغير وHTMLخاصة آلية
التالية العامة الصيغة باتباع ذلؾ و الرموز ىذه لعرض&value;القيمة باستبدؿvalueبقيمة
المطموب المحرؼأففي عرضو يتـالويب مستعرضىذه مف نماذج التالي الجدوؿ في و
:المحارؼٖ
ٖ
:التالي ابطرال اتباع يمكف الكامؿ الجدوؿ عمى لمحصوؿ
http://www.w3schools.com/tags/ref_symbols.asp
34. ٖٗ
:كمايمي المستعرض في عرضو عند يبدو الذي و
الشكل8ب الستخدام مثال :الصفحة في الخاصة المحارف عض
ابطوالر عناصرHyper Links
لغة توفرHTMLابطوالر عناصر عبر المختمفة الصفحات بيف لالنتقاؿ آليةHyper Linksو ,
عمييا النقر عند تنقمؾ صور أو نصوص عف ةرعبا ابطوالرإلى الحالية الصفحة مفصفحة إلى
بعرض ابطوالر بتمييز الويب مستعرضات تقوـ ,ىأخر ويب"ةرصغي يد"ةراإلشا عند ةرلمفأ كمؤشر
,ابطوالر أحد إلىوابطوالر إنشاء يتـالوسـ اسطةوب<a>ػلا و ,aػل اختصار ىذهAnchorيتـ ,
اّل سيتـ (الذي اليدؼ الموقع اَّأم لو كمحتوى عرضُي بنص ابطرال عنصر تزويدالنقر عند إليو نتقاؿ
اصفةولم تزويده فيتـ )ابطرال عمىhrefػل اختصار ىي التي وHyper Referenceفممنظر ,
:التالي لممثاؿ
<html>
<head>
<title>
اٌشٚاثؾ ٌؼٕبطش اخزجبس طفحخ
</title>
</head>
35. ٖ٘
<body>
<a href="http://www.microsoft.com"> مايكروصىفد </a><br />
<a href="http://www.google.com">جىجم</a><br />
<a href="http://www.msn.com" target="_blank" >MSN</a>
<br />
<a href="firstPage.html" target="_self">مثال أول</a>
</body>
</html>
:كمايمي الويب بمستعرض اضوراستع عند يبدو الذي
الشكل9:اختبار صفحةعنصرابطوالر
قد و ةرالشيي اقعوالم بعض إلى تشير التي ابطوالر عناصر مف بمجموعة صفحتنا بتزويد قمنا لقد
و الفصؿ ىذا بداية في ًامع بإنشائو قمنا الذي ؿّاألو المثاؿ ممؼ اسـ ذكر األخير ابطرال في تعمدت
مطمقة تكوف أف يمكف ابطوالر أف لتوضيح ذلؾAbsoluteنسبية أو )األولى (كالثالثةRelative
36. ٖٙ
مسار عف ةرعبا يكوف المذكور ابطرال أف بالنسبية يقصد و )األخير ابطر(كالPathالصفحة ممؼ
اليدؼ الصفحة كانت فقد حالتنا في و الحالية لمصفحة بالنسبة اليدؼfirstPage.htmlنفس في
الحالية الصفحة مجمدٗ
.
ارال إلى اّلنتقاؿ سيتـ ابطوالر ىذه أحد عمى النقر عندبطURLاصفةوال في المذكورhrefافقةرالم
اصفةوبال ابطوالر بعض بتزويد قمنا ناَّأن بالذكر الجدير مف ,عميو النقر تـ الذي ابطرال لعنصر
targetاألسئمة عمى تجيب ياّأن بمعنى المستعرض في اليدؼ الصفحة عرض مكاف تحدد التي و
:التالية
الص نفس في اليدؼ الصفحة عرض سيتـ ىؿىي اصفةوال قيمة فإف الحالة ىذه (في الحالية؟ فحة
القيمة_selfفإف الحالة ىذه في ( جديدة؟ مستعرض نافذة في اليدؼ الصفحة عرض سيتـ ىؿ ,)
اصفةوال قيمة_blankفإف الحالة ىذه (في محدد؟ إطار في اليدؼ الصفحة عرض سيتـ ىؿ ,)
اإلطا تناوؿ سيتـ و اإلطار اسـ ىي اصفةوال قيمة.)ًاّلحق ؿّمفص بشكؿ اتر
مورد أي إلى يشير أف ابطرلم يمكف وَّأن ًاحالي ابطوالر عف هرذك يجب ما آخرResourceمتوفر
إلكتروني يدرب إلى ابطرال يشير أف يمكف كما ,الصفحات فقط ليس و الويب عمىE-Mailذلؾ و
القيمة نضع بأفmailto::التالي المثاؿ انظر ,لو ًاابطر نضع أف يدرن الذي اإللكتروني يدرالب قبؿ
<html>
<head>
<title>
خبطخ سٚاثؾ
</title>
ٗ
اترالمسا عف يدزالم تعمـ يمكنؾPaths:الموقع ةرياز خالؿ مف
http://msdn.microsoft.com/en-us/library/aa365247(VS.85).aspx
37. ٖٚ
</head>
<body>
<a href="http://www.somesite.com/files/file1.zip"> ٕ٘ب أمش
اٌٍّف ً١ٌّزح</a>
<br />
<a href ="mailto:mokhtar_ss@hotmail.com">ٍٟٕساس</a>
</body>
</html>
الممؼ تحميؿ عّبرم ظيور ىو ؿَّاألو ابطرال عمى النقر عند سيحدث ماSave File Dialogما و
(مثؿ اإللكتروني يدرالب مدير نامجرب ظيور ىو الثاني الممؼ عمى النقر عند سيحدثOutlook
Expressرسال إرساؿ وضع في ).ابطرال في المذكور اإللكتروني يدرالب إلى جديدة ة
الصور عناصرImages
لغة توفرHTMLالعنصر ىو العنصر ىذا الصفحة ضمف الصور لعرض ًاخاص ًارعنص
<img/>ػل ًار(اختصاImageىامسار عمى ًااعتماد الصفحة ضمف ةرالصو بعرض يقوـ الذي )
اصفةوال عبر لمعنصر يمرر الذيsrcػل ًار(اختصاSourceلمعنصر بالنسبة الحاؿ ىو كما و ,)
الخاص<br/>العنصر ّفإف<img/>الغالب في العاـ شكمو ّفإف لذلؾ و نياية وسـ أي يمتمؾ ّل
يكوف<img src="path" />:التالي المثاؿ لنشاىد ,
<html>
<head>
<title>
اٌظٛس ػٕبطش ٌؼشع طفحخ
</title>
</head>
38. ٖٛ
<body>
<img src="myPic.jpg" />
<img src="myPic2.gif" alt="انثاويح انصىرج" />
<img src="myPic.jpg" alt="اٌثبٌثخ اٌظٛسح" width="100px"
height="50px" />
<img src="خبؿئ ِسبس" alt="اٌخبؿئ اٌّسبس راد ٟطٛسر" />
</body>
</html>
عند يبدو الذي و:كمايمي المستعرض في عرضو
الشكل11:الصور لعنصر اختبار صفحة
وسـ كؿ في ةرالمذكو اترالمسا ذات الصور بعرض الصور عرض عنصر قاـ فقد تالحظ كما
<img/>اصفةوال العنصر ىذا اصفاتو مف و ,altفي عرضيا يتـ ةّنصي قيمة إلييا تسند التي
ال تعذر حاؿاصفةوال في ةرالمذكو ةرالصو إلى وصوؿsrcةرالصو في معنا حدثت الحالة ىذه و
ةرالصو عرض يمكف كما ,الحالة ىذه لعرض قصد عف خاطئ بمسار زودناىا التي و ابعةرال
العنصر تزويد عبر ذلؾ و محدد بمقاسimgتفاعراّل اصفتيوبheightالعرض وwidthالتي و
39. ٖٜ
َّقمير قيـ إلييما تسندتعنيو ما بالبكسؿ(ىذا المعروضة ةرالصو تفاعرا و عرض تحدد ةpxالقيـ في
.)اصفتيفوال لياتيف المسندة
تحتوي صفحتنا أف فرض عمى :ممحوظة٘لتحميؿ سيحتاج صحيح و تاـ بشكؿ الصفحة عرض َّفإف صورٙ
عم ًاائدز ًالحم يسبب قد ما ىذا و الخمسة الصور ممفات و الصفحة ممؼ ىي ممفاتحاؿ في ًالمستقب موقعؾ ى
.الصور استخداـ في اطراإلف
ابطوالر نصوص من ًالبد الصور
ابطوالر عناصر محتوى نصوص استبداؿ يتـ أف الويب اقعوم في الشائع مف<a>ذلؾ و بالصور
مف ًّلبد ةرالصو عمى النقر عند ابطرلم اليدؼ لمصفحة اّلنتقاؿ يتـ بحيث الموقع محتوى لتجميؿ
عم النقرالعنصر بتضميف ذلؾ يتـ و النص ى<img/>لمعنصر كمحتوى<a>نعرض فيمايمي و
:لذلؾ ًابسيط ًّلمثا
<html>
<head>
<title>
ٌشاثؾ ٜٛوّحز طٛسح ػشع
</title>
</head>
<body>
<a href = "mailto:mokhtar_ss@hotmail.com">
<img src="myPic.jpg" alt="راصهىي" />
</a>
</body>
</html>
40. ٗٓ
:كمايمي المستعرض في يبدو ما ىذا و
الشكل11:ابطولمر كمحتوى النصوص عن ًالبد الصور استخدام
َّةالصوري ائطرالخImage Maps
ابطور ما ةرصو مف دةّمحد اءزأج جعؿ تعني َّةيرالصو ائطرالخًا,و,احؿرم ثالث عمى ىذا يتـ
األولىيتـ أف ىيالوسـ يؽرط عف تقميدي بشكؿ الصفحة في ةرالصو وضع<img/>الثانية أما ,
يطةرالخ عنصر إنشاء فيي<map>اصفةوال قيمة إسناد معnameو يطةرلمخ كاسـ بو الخاصة
عناصر مف مجموعة إنشاء َّثـ مف<area>ستتحوؿ التي المناطؽ بإحداثياتفي ابطور إلى
يطةرالخ اسـ بإسناد ذلؾ و ةرالصو عنصر و يطةرالخ عنصر بطرب تتـ الثالثة المرحمة و ,ةرالصو
اصفةوال إلىusemap:التالي المثاؿ لنشاىد ,ةرالصو بعنصر الخاصة
<html>
<body>
<p>ٕٗػ ِؼٍِٛبد ٌؼشع اٌىٛاوت أحذ ٍٝػ أمش</p>
<img src="planets.gif" width="145" height="126"
alt="اٌىٛاوت" usemap="#planetmap" />
<map name="planetmap">
41. ٗٔ
<area shape="rect" coords="0,0,82,126" alt="انشمش"
href="sun.htm" />
<area shape="circle" coords="90,58,3" alt="انمريخ"
href="mercur.htm" />
<area shape="circle" coords="124,58,8" alt="انزهرج"
href="venus.htm" />
</map>
</body>
</html>
:كمايمي المستعرض في التالي المثاؿ يبدو
الشكل12صورية خريطة صنع عمى مثال :
أعيطناىا و يطةرالخ بإنشاء بدأنا َّثـ ,ًّلوأ طبيعي بشكؿ ةرالصو إضافة تمت فقد تالحظ كماًااسم
:بالسطر
<map name="planetmap">
42. ٕٗ
الوسـ عبر اكبوالك مف كوكب لكؿ منطقة بإنشاء قمنا ذلؾ بعدareaاألولى اصفتافو لو الذي و
shapeاإلحداثيات اصفةو فيي الثانية اَّأم ,)إلخ .. يةردائ ,(مستطيمة المنطقة شكؿ لتحديد
coordsيمثؿ المستطيؿ أبعاد لتحديد المستطيؿ حالة في إحداثيات بعةرأ يررتم تـ حيث
اإلحداثيافالمستطيؿ مف العموي األيسر الركف الثاني و األوؿابعرال و الثالث اإلحداثياف يمثؿ بينما
ىذا تـ بالطبع و ,لتحديده ٍكاؼ ىذا و المستطيؿ مف السفمي األيمف الركفأف اعتبار عمىمركز
ةرلمصو َّةتيرالديكا الجممةاأليسر الركف ىو
النقطة فإف بيذا و ,ةرالصو مف العموي
(ٓ,ٓ( النقطة و )82,126تحدداف )
المرسوـ بالمستطيؿ الشمس كوكب منطقة
ال حالة في اَّأم ,بينيمافيتـ يةرالدائ منطقة
الثاني و األوؿ يعبر إحداثيات ثالثة يررتم
نقط عفعف الثالث يعبر و ةرالدائ مركز ة
.ىاقطر نصؼ
اصفةوال إلى يطةرالخ اسـ يرربتم قمنا النياية في وusemap.ةربالصو الخاصة
اصفةوال إلى يطةرالخ اسـ يررتم يتـ :ممحوظةusemapبالرمز ًامسبوق#
َّةالداخمي ابطوالرInternal Linking
يصبح ىذه مثؿ حالة في و ما حد إلى ًاركبي نةّمعي صفحة ضمف الموجود المحتوى يكوف ًاأحيان
لغة رِّفتو ,الوقت و الجيد بعض تستغرؽ عممية الصفحة ضمف محددة ةرفق إلى اّلنتقاؿHTML
الداخمية ابطوبالر يعرؼ ما عبر ةرمباش الصفحة مف محدد ءجز إلى لالنتقاؿ َّةآليInternal Links
الشكل13المناطق رسم في الهندسي المبدأ لتوضيح تخيمي شكل :
43. ٖٗ
ابطرال وسـ استخداـ عبر تحقيقيا يتـ التي و<a>اّلنتقاؿ ادرالم العنصر ؼَّمعر يررتم وإليو
اصفةولم كقيمةhref:التالي بالشكؿ
<a href="#id"> id ٌّا ٚر اٌؼٕظش ٌٝإ ًأزمؼشف </a>
ّأف حيثidالصفحة ضمف إليو اّلنتقاؿ ادرالم العنصر معرؼ يمثؿوالمثاؿالتاليىذه حِّيوض
:ةرالفك
<html>
<head>
<title>
اٌذاخٍ١خ اٌشٚاثؾ ٍٝػ ِثبي
</title>
</head>
<body>
<a href="#Para4">اٌشاثؼخ اٌفمشح ٌٝإ</a>
<h1>ٌٝٚاأل اٌفمشح</h1>
<p>ٌٝٚاأل اٌفمشح ِٜٛحز ٕ٘ب</p>
<h1>اٌثبٔ١خ اٌفمشح</h1>
<p>اٌثبٔ١خ اٌفمشح ِٜٛحز ٕ٘ب</p>
<h1>اٌثبٌثخ اٌفمشح</h1>
<p>اٌثبٌثخ اٌفمشح ِٜٛحز ٕ٘ب</p>
<h1 id="Para4">اٌشاثؼخ اٌفمشح</h1>
<p>اٌشاثؼخ اٌفمشح ِٜٛحز ٕ٘ب</p>
</body>
</html>
44. ٗٗ
ائموالقLists
لغة توفرHTML:ائـوالق عناصر مف نوعيف
ٔ-تبةرالم غير ائـوالقUnordered Listالوسـ عبر<ul>.
ٕ-تبةرالم ائـوالقOrdered Listالوسـ عبر<ol>.
عناصر مف كمجموعة اىاومحت نضيؼ بإنشائيا غبنر التي القائمة عنو بتحديد نقوـ أف بعد<li>و
تعني التيList Itemو التالي المثاؿ لنشاىد ,:بسيطة تبةرم غير قائمة إنشاء َّةكيفي يعرض الذي
<html>
<head>
<title>ِشرجخ غ١ش لبئّخ ٍٝػ ِثبي</title>
</head>
<body dir="rtl">
<p>اٌىزبة ٘زا ٟف ٍُسٕزؼ</p>
<ul>
<li>HTML</li>
<li>HTML5</li>
<li>XHTML</li>
<li>CSS</li>
<li>CSS3</li>
</ul>
</body>
</html>
:كمايمي المستعرض في عرضو عند يبدو الذي و
45. ٗ٘
الشكل14:بسيطة مرتبة غير لقائمة مثال
مف القائمة لعنصر النياية و البداية وسمي بتغيير<ul>و</ul>إلى<ol>و</ol>ستصبح
:التالي بالشكؿ تبةرم القائمة
الشكل15بسيطة مرتبة قائمة عمى مثال :
46. ٗٙ
الفصؿ ىذا بداية منذ ذكرت كما و بالطبعفإفعناصر مف عنصر أيHTMLيحوي أف يمكف
نيايتو و بدايتو وسمي بيفأيةم ىأخر مجموعةنستطيع أننا يعني ىذا و العناصر فقائمة إنشاء
تحوييوض التالي المثاؿ و ,ليا كعناصر َّةعيفر ائـوق:ةرالفك ىذه ح
<html>
<head>
<title>ِؼمذح لبئّخ ٍٝػ ِثبي</title>
</head>
<body dir="rtl">
<p>اٌىزبة ٘زا ٟف ٍُسٕزؼ</p>
<ol>
<li>
HTML
<ul>
<li>انرواتط</li>
<li>انصىر</li>
<li>انقىائم
<ul>
<li>انمرذثح</li>
<li>انمرذثح غير</li>
</ul>
</li>
</ul>
</li>
<li>HTML 5</li>
47. ٗٚ
<li>XHTML</li>
<li>CSS</li>
<li>CSS 3</li>
</ol>
</body>
</html>
:كمايمي المستعرض في أعاله المثاؿ يبدو
الشكل16:عمى مثالمعقدة قائمة
اصفةوال استخداـ يمكف وّأن ائـوالق عف هرذك يجب ما آخرtypeحالة ففي القائمة شكؿ لتغيير
:إلييا التالية القيـ إحدى إسناد يمكف تبةرالم غير ائـوالقsquareأوdiscأوcircleرمز لوضع
تيرالت عمى عنصر كؿ أماـ ةرالدائ أو القرص أو بعرالم,بإسناد يمكف تبةرالم القائمة حالة في و
48. ٗٛ
القيـ إحدىٔأوAأوaأوIأوiاصفةوال إلىtypeقيـرت ,بيةرع قاـربأ قيـرت إلى قيـرالت لتحويؿ
ّلتينية قاـربأ قيـرت ,ةركبي ّلتينية قاـربأ قيـرت ,ةرصغي يةزإنجمي بأحرؼ قيـرت ,ةركبي يةزإنجمي بأحرؼ
.تيبرالت عمى ةرصغي
يوجالوسـ باستخداـ إنشاؤه يتـ المصطمحات ائـوبق يعرؼ ائـوالق مف خاص عنو د<dl>لعنصر
الوسـ و القائمة<dt>الوسـ و المصطمح لعنصر<dd>المثاؿ لنشاىد ,المصطمح يؼرتع لعنصر
:التالي
<html>
<head>
<title>ِظـٍحبد لبئّخ ٍٝػ ِثبي</title>
</head>
<body dir="rtl">
<dl>
<dt>HTML</dt>
<dd>Hyper Text Markup Language</dd>
<dt>XHTML</dt>
<dd>eXtensible Hyper Text Markup Language</dd>
<dt>CSS</dt>
<dd>Cascading Style Sheet</dd>
</dl>
</body>
</html>
:كمايمي المستعرض في المصطمحات قائمة تبدو
49. ٜٗ
الشكل17المستعرض في المصطمحات قائمة تبدو هكذا :
الجداولTables
لغة توفرHTMLالعنصر عبر الجداوؿ إلنشاء آلية<table>العنصر إنشاء عبر ذلؾ يتـ و
<table>العرض اصفتيو يررتم و ًّلّأوwidthالحدود عرض وborderَّثـ مف و ,بالبكسؿ
الجدوؿ أسطر عنصر عبر الجدوؿ محتويات إنشاءtable rowsباستخداـ تحقيقو يتـ الذي و
الوسـ<tr>خاليا محتويات ذكر يتـ َّثـ ,table dataو حدى عمى الجدوؿ أسطر مف سطر كؿ
الوسـ عبر ذلؾ<td>,:كمايمي ئيرم بشكؿ تمثيميا يمكف الوسوـ حفظ لتسييؿ و
الشكل18الجدول إلنشاء المستعممة الوسوم لتوضيح تخيمي شكل :
جدوؿ بإنشاء تقوـ التي التالية ةرالشيف نشاىد دعنا أكثر توضيحو بغية ًاعممي المفيوـ ىذا لتطبيؽ و
:بسيط
50. ٘ٓ
<html>
<head>
<title>ثس١ؾ جذٚي إٔشبء ٍٝػ ِثبي</title>
</head>
<body dir="rtl">
<table border="1" width="50%">
<tr>
<td>انكراب اصم</td>
<td>انضعر</td>
</tr>
<tr>
<td>انىية ترمجح</td>
<td>051</td>
</tr>
<tr>
<td>انجىال ترمجح</td>
<td>011</td>
</tr>
<tr>
<td>األنعاب ترمجح</td>
<td>051</td>
</tr>
<tr>
<td>انطثخ ذعهم</td>
<td>51</td>
51. ٘ٔ
</tr>
</table>
</body>
</html>
:كمايمي الويب مستعرض في عرضو عند الجدوؿ ىذا يبدو
الشكل19:بسيط جدول إنشاء عمى مثال
الجدوؿ عنصر بإنشاء ًّلوأ قمنا فقد أينار كما<table>بعرضwidth٘ٓالكمي العرض مف %
حدود بعرض !),وًاصحيح يبقى ذلؾ أف لتالحظ المستعرض نافذة حجـ تغيير (حاوؿ لمصفحة
borderٔالوسميف باستخداـ جديد سطر بإنشاء قمنا َّثـ ,بكسؿ<tr></tr>السطر ىذا يحوي ,
خميتيف عمى<td></td>القيمة األولى تحوي"الكتاب اسـ"القيمة الثانية تحوي و"السعر"قمنا َّثـ ,
أصبح عالموضو أف أظف ,الكتب بيانات تحوي التي ىاألخر األسطر مع األسموب نفس ارربتك
.اآلف ًااضحو
قياس احدةو بأي أو ًاأيض بالبكسؿ الجدوؿ عرض قيمة إعطاء يمكف :ممحوظةاحداتوال مفالمدعومةلغة في
HTMLًاّلحق ىاذكر سيتـ التي و.
52. ٕ٘
جداوؿ مف جدوؿ كؿ يقسـHTML:مناطؽ بعرأ إلى
ٔ-الجدوؿ أسر منطقةTable Headالوسميف باستخداـ القسـ ىذا نشأُي :<thead>و
</thead>سطر عنصر عمى الغالب في يحوي و<tr></tr>و بدايتو وسمي بيف يحوي
عالنو مف خاليا في الجدوؿ أعمدة عناويف نيايتو<th>مف ًّلبد<td>تـ حيث ,
أف اّلصطالح<td>بيانات خمية تعنيtable dataأف حيف في<th>خمية تعني
افوعنtable heading.
ٕ-الجدوؿ جسـ منطقةTable Bodyالوسميف باستخداـ القسـ ىذا نشأُي :<tbody>و
</tbody>باستخداـ تنشأ التي و البيانات سطور عمى يحوي و<tr>خالياىا أف بما و
الوسوـ باستخداـ تنشأ الخاليا فإف معمومات تحوي<td>.
ٖ-الجدوؿ ذيؿ منطقةTable Footالوسميف باستخداـ القسـ ىذا نشأُي :<tfoot>و
</tfoot>سطر عنصر عمى الغالب في يحوي و<tr></tr>يحوو بدايتو وسمي بيف ي
عالنو مف خاليا في الجدوؿ أعمدة عف ممخصات نيايتو<th>.
ٗ-الجدوؿ افوعنCaptionوسمي بيف افوالعن نص بكتابة الجدوؿ افوعن ضاؼُي :
<caption>و</caption>:المختمفة الجدوؿ مناطؽ التالي الشكؿ حِّيوض ,
الشكل21:توضيحي رسمألفي الجدول قسامHTML
53. ٖ٘
ةرشيف سنكتب صفحتنا في المذكور الجدوؿ لتحقيؽHTML:التالية
<html>
<head>
<title>ٌِٟثب جذٚي إٔشبء ٍٝػ ِثبي</title>
</head>
<body dir="rtl">
<table border="1" width="50%">
<caption>انكرة شراء فاذىرج</caption>
<thead>
<tr>
<th>انكراب اصم</th>
<th>انضعر</th>
</tr>
</thead>
<tbody>
<tr>
<td>اٌٛ٠ت ثشِجخ</td>
<td>150</td>
</tr>
<tr>
<td>اٌجٛاي ثشِجخ</td>
55. ٘٘
الشكل21جدول إلنشاء مثال :HTMLمثالي
الذيؿ و أسرال منطقتي في الموجودة األسطر أف كما ,الجدوؿ أعمى يظير افوالعن َّفإف تالحظ كما
يضرع بخط تظيرbold.
البسيطة غير الجداول
حالة مثؿ لحالة فبالنسبة ًاأيض ًابسيط و ًالجمي كاف الماضية ةرالفق في اضوراستع تـ ما الحقيقة في
الحاّلت عف ماذا لكف و بسيط أمر األسطر مف بمجموعة و بعموديف ًّلوجد فإف اءرالش ةرفاتو
األس ّل و ,األحجاـ؟ متساوية الخاليا فييا تكوف ّل التي الحاّلت عف ماذا ,األعقد؟متساوية طر
تجيب ,الخاليا؟ عددHTMLاصفتيفوال تقديـ عبر ةّقالمح ّلتؤالتسا ىذه عمىrowspanو
colspan.
اصفتافوال تستخدـrowspanوcolspanالخمية بداية وسـ مع<td>أو<th>إلييما تسند و
( صحيحة قميةر قيمةٔأوٕأوٖخميت بحجـ فتجعميا الخمية حجـ مف تغير )إلخ ..ثالث أو يف
أف حيث ,إلخ .. بعرأ أوrowspanأما ,الخمية بعرض تتحكـcolspan.الخمية تفاعربا فتتحكـ
:المثاؿ سبيؿ عمى التالية ةرالشيف لنشاىد
56. ٘ٙ
<html>
<head>
<title>ثس١ؾ غ١ش جذٚي إٔشبء ٍٝػ ِثبي</title>
</head>
<body dir="rtl">
<table border="1" width="100%">
<tbody>
<tr>
<td>اٌىزبة ُاس</td>
<td>ٍُرؼ jQuery ٟف021دل١مخ </td>
<td rowspan="3">
<img src="jQuery120.png">
</td>
</tr>
<tr>
<td>اٌّؤٌف</td>
<td>طبٌح س١ذ ِخزبس</td>
</tr>
<tr>
<td>اإلطذاس سٕخ</td>
<td>2010</td>
</tr>
<tr>
<td colspan="3">
ِىزجخ ٓػ ِؼٍِٛبد اٌىزبة ٘زا َ٠مذjQuery
57. ٘ٚ
ًثشىإٌخ ..... ٚاػح ٚ ِجسؾ.
</td>
</tr>
</tbody>
</table>
</body>
</html>
السابقة ةرالشيف تبدو:كمايمي المستعرض في عرضيا عند
الشكل22اصفتينوال باستخدام بسيط غير جدول إنشاء عمى مثال :rowspanوcolspan
منيا احدةو خاليا ثالث عمى ؿَّاألو السطر يحوي سطور بعةرأ مف يتكوف الجدوؿ ّفإف ىتر كما
تعنيو ما (ىذا ًةمجتمع أسطر ثالثة تفاعرا يعادؿ تفاعرباrowspan="3"مف األخير السطر اَّأم ,)
تعنيو ما ىذا (و ًةمجتمع الثالثة الجدوؿ أعمدة بعرض احدةو خمية عمى فيحوي الجدوؿ
58. ٘ٛ
colspan="3"اصفتيفوال استخداـ أف أظف ,)rowspanوcolspanو ,اآلف ًااضحو أصبح
بتغيير اويقوم أف أنصحيـ و منيـ فأعتذر ليـ بالنسبة ةرالصو تتضح لـ الذيف ألصدقائي بالنسبة
اصفتيفوال في ةرالمذكو القيـrowspanوcolspanالحاصؿ الفرؽ اويالحظ و السابؽ المثاؿ في
أحجاـ في.أظف كما لدييـ أفضؿ رّتصو تشكيؿ في ًاركثي يساعد فيذا الخاليا
:ممحوظةقمبي ليطمئفعناصر مف أي وضع بإمكانؾ أنو أذكرؾ أف أحبHTML.الجدوؿ خاليا في كمحتوى
النماذجForms
النماذج تستخدـFormsلغة فيHTMLالمدخالت ّلستقباؿInputsعرضيا بغية المستخدـ مف
ينيزتخ أوالوسميف باستخداـ النماذج إنشاء يتـ ,عمييا معينة معالجة بعمميات القياـ أو ا<form>
و</form>اإلدخاؿ عناصر مف مجموعة بينيما سيحوياف الذاف<input>بعاترم مثؿ
النصوصtext boxesاّلختيار عناصر وcheck boxesارراألز وbuttonsائـوالق و
المنسدلةselect lists...إلخ
النموذج عنصر بداية وسـ تزويد يتـ<form>اصفةوال ىي األولى أساسيتيف اصفتيفوبactionو
الممؼ يكوف و النموذج في المدخمة البيانات بمعالجة سيقوـ الذي البرمجي الممؼ اسـ تحدد التي
فررالسي طرؼ مف البرمجة لغات بإحدى ًامكتوب البرمجيServer SideمثؿPHPأو
ASP.NETأوJSP( إلخ .. أووفررالسي طرؼ مف البرمجةنطاؽ جخار عموضو,)الكتاب ىذا
اصفةوال فيي الثانية اصفةوال اّأمmethodالبرمجي الممؼ إلى البيانات إرساؿ يقةرط تحدد التي و
:يقتيفرط بإحدى ًاسابق المذكور
ٔ-يقةرالط ىي األولى يقةرالطgetفي البيانات إرساؿ يتـ حيثفي افوالعن يطرش
عمى التالي ابطرلم انظر ,مفتاح/قيمة اجوأز بشكؿ البرمجي الممؼ اسـ بعد المستعرض
:المثاؿ سبيؿ