Learn HTML In Arabic 2021

Learn HTML In Arabic 2021 ‫ملخص كورس‬

A lot of thanks to Osama Elzero

Created By: Fady Alamir

Facebook: fadyalamir77 | LinkedIn: fady-alamir77 | GitHub: fadyalamir

#01 - Introduction and What I Need To Learn
1. What Is HTML?
1- Hypertext Markup Language
2- The Language To Build The Web
3- Ship + Building + Skeleton
2. Versions Of HTML
1- HTML4
2- HTML5
3. Why I Need To Learn?
1- Front-End Developer
2- Back-End Developer
3- Mobile Developer
4- Reports
4. What I Need To Learn?
1- Text Editor (Visual Studio Code, Atom)
2- Internet Browser (Google Chrome, Firefox Developer)
3- Windows And Internet Knowledge
4- Always Search 5- Have A Target
6- Focus 7- Always Search
8- Start Any Idea 9- Always Search Before Asking
5. What I Need To Learn?
1- Watch Videos With Focus
2- Check Courses Code (https://elzero.org/html-course)
3- Do The Assignments (https://elzero.org/assignments)

Facebook: fadyalamir77 | LinkedIn: fady-alamir77 | GitHub: fadyalamir

‫‪#02 - Elements And Browser‬‬
‫ن‬ ‫ن ن‬
‫معي ثم نضغط‬ ‫يمي يف المتصفح داخل موقع‬ ‫‪ -1‬عندما نقوم بالضغط كليك‬
‫الت عن طريقها قمنا بأنشاء الصفحة‬
‫‪ View Page Source‬من خاللها نري األكواد ي‬
‫‪ -2‬ال ـ ‪ Developer Tools‬سوف نذكرها بالتفصيل ومن خاللها نستطيع فحص عنارص‬
‫صفحة الويب‬
‫ه هيكل الصفحة‪ ،‬ولكن لغة ال ـ ‪ CSS‬تنسق الصفحة‬
‫‪ -3‬لغة ال ـ ‪ HTML‬ي‬
‫‪#03 - First Project And First Page‬‬
‫‪ -1‬امتداد الملف للغة ‪ HTML‬هو "‪ ".html‬والتسمية الشائعة له "‪"index.html‬‬
‫نضع داخله‬ ‫‪ -2‬أول ‪ element‬نقوم بإنشاء الصفحة به هو >‪<html‬‬
‫عنارص الصفحة‬
‫تسم ‪ HTML Tag‬وعنارص الصفحة لها‬
‫ي‬ ‫‪ -3‬عنارص الصفحة ‪elements‬‬
‫‪ Opening Tag, Closing Tag‬ويوجد بعض العنارص ليس لها ‪Closing Tag‬‬
‫‪ -4‬بعد كل عنرص نضع ‪ Tab‬ال ـ ‪ Text Editor‬او ال ـ ‪ IDE‬يقوم بعملها ألننا سوف نقوم‬
‫بوضع ‪ elements‬داخل ‪ elements‬أخري لذا يجب تنسيقهم لمعرفة البداية والنهاية‬
‫حت يكون الكود منسق‪clean ،‬‬ ‫أي عمل ‪ formatting‬لل ـ ‪ code‬ي‬
‫ن‬
‫مهمي وهما عنرص ال ـ >‪ <head‬وعنرص ال ـ‬ ‫‪ -5‬داخل عنرص ال ـ >‪ <html‬يوجد عنرصين‬
‫>‪ <body‬وهو جسم الصفحة الذي يوجد بداخله جميع عنارص الصفحة بينما‬
‫وه عبارة عن معلومات او تعليمات للمتصفح‬‫ال ـ >‪ <head‬يوجد بداخله ال ـ ‪ Meta Data‬ي‬
‫لتحدد للمتصفح طريقة تعامله مع الصفحة مثل اسم الصفحة ومعلومات عن الصفحة‬
‫يستخدمها ‪ Google‬عندما يقوم بأرشفة الصفحة‬

‫‪#04 - Head And Nested Elements‬‬

‫ه معلومات عن المعلومات وهو عنرص من عنارص ال ـ ‪Self‬‬ ‫ي‬ ‫‪:Meta Data Tag -1‬‬
‫ن‬
‫‪ Closing Tag‬أي ليس لها ‪ Closing Tag‬ويوضع له ‪ slash‬يف نهايته لتدل عىل انها ‪self‬‬
‫‪closing tag‬‬
‫داخل ال ـ ‪ meta‬سوف نقوم بوضع ‪attributes‬‬
‫‪Facebook: fadyalamir77‬‬ ‫|‬ ‫‪LinkedIn: fady-alamir77‬‬ ‫|‬ ‫‪GitHub: fadyalamir‬‬
 ‫ن‬ ‫ن‬
‫وتمب عنرص عن‬ ‫تعب عن معلومات عنه‬ ‫‪ -2‬ال ـ ‪ :attributes‬ي‬
‫ه سمات إضافية يف العنرص ر‬
‫األخر‬
‫يسم ‪ charset‬اختصار لـ ‪ character set‬وهو أي‬ ‫ي‬ ‫‪ -3‬أول ‪ attribute‬داخل ال ـ ‪:meta‬‬
‫حرف أو رمز داخل ‪ content‬الصفحة واالسم الشائع لهذه ال ـ ‪" attribute‬نوع الب ن‬
‫مب"‬
‫ن‬ ‫ن‬
‫الماض كان "‪ "ISO-8859-1‬كان ال يدعم اللغة العربية‬
‫ي‬ ‫يف‬

‫ن‬ ‫‪ -‬األن نقوم باستخدام الب ن‬

‫العالم "‪ "UTF-8‬يستخدم يف معظم المواقع الحالية‬
‫ي‬ ‫مب‬

‫ن‬
‫ثان أنواع ال ـ ‪ meta‬داخل ال ـ ‪:head‬‬
‫‪ -4‬ي‬

‫وه عبارة عن‬

‫وه من معلومات ال ـ ‪ head‬عبارة عن وصف ل ـ ‪ content‬الصفحة ي‬
‫ي‬
‫‪ Instruction‬أو تعليمات نعطيها للمتصفح‬
‫وتستخدم كوصف للصفحة يستخدمها محرك البحث ألرشفة الصفحة‬
‫مثال‪ :‬عندما نري ال ـ ‪ page source‬لصفحة معينة مثل ‪amazon‬‬

‫ويوجد أنواع اخري من ‪ ،meta‬وبعض المواقع المشهورة لها ‪ meta‬خاصة بها مثل‬
‫‪..facebook, wordpress‬‬
‫‪Facebook: fadyalamir77‬‬ ‫|‬ ‫‪LinkedIn: fady-alamir77‬‬ ‫|‬ ‫‪GitHub: fadyalamir‬‬
 ‫‪ :style tag -5‬من عنارص ال ـ ‪ head‬وهو خاص بلغة ال ـ ‪ CSS‬هكذا‬

‫‪ :script tag -6‬من عنارص ال ـ ‪ head‬نضع بداخله أكواد ال ـ ‪Javascript‬‬

‫ن‬
‫ملحوظة‪ :‬ال ـ ‪ styling‬وال ـ ‪ script‬هما ليس ‪ content‬يظهر يف الصفحة ولكن معلومات‬
‫ً‬ ‫ن‬
‫نستخدمها يف تعريف ال ـ ‪ Browser‬مثال أن يقوم بتلوين ال ـ ‪ body‬أو حجم الخط أو تغب‬
‫ن‬
‫معي يقوم بوظيفة معينة‪ .‬إذن ال ـ ‪styling,‬‬ ‫الخلفية‪..‬ألخ‪ ،‬وال ـ ‪ script‬أن نجعل زرار‬
‫‪ script‬ليست ‪ content‬ن يف الصفحة ولكنها معلومات للمتصفح‪.‬‬
‫ن‬
‫اثني ‪ attribute‬وهما‪:‬‬ ‫‪ :link tag -7‬عنرص ‪ link‬له‬

‫• ‪ :rel‬ي‬
‫وه اختصار ل ـ ‪ relationship‬أي عالقة الملف بالصفحة‬
‫• ‪ :href‬مخصص ل ـ ‪ CSS‬نحدد من خالله مكان الصور‪ ،‬الفيديو‪..‬ألخ‬
‫‪#05 - Comments And Use Cases‬‬
‫مشوع واحد مثل‬ ‫‪ -1‬التعليق – ‪ :Comment‬يستخدم عندما نعمل مع ‪ Team‬عىل ر‬
‫ي‬
‫باف الفريق ال يعرف استخدامها‬‫عندما تقوم بإنشاء ‪ meta‬جديدة وتعرف استخدامها لكن ي‬
‫ن‬
‫تحسي الكود من الممكن ان ال تتذكر ماذا‬ ‫أو تعود بعد فبة لعمل ‪ refactor‬للكود او‬
‫ن‬
‫تفعل هذه ال ـ ‪ meta‬لذا يجب وصفها يف ‪.comment‬‬
‫طريقة كتابة ال ـ ‪comment‬‬

‫واختصار انشاء ال ـ ‪ comment‬داخل ال ـ ‪ vs code‬من الكيبورد "‪"CTRL + /‬‬

‫ن‬ ‫ن‬
‫ملحوظة‪ :‬ال ـ ‪ comment‬ال يظهر يف صفحة ال ـ ‪ web‬لكن يظهر يف ال ـ ‪ page source‬فقط‬
‫ً ن‬
‫‪ -2‬يستخدم ال ـ ‪ comment‬ايضا يف تهميش ‪ element‬تحت االنشاء والتجربة لصفحة ال ـ‬
‫‪web‬‬
‫ن‬
‫نوعي‪:‬‬ ‫‪ -3‬ينقسم ال ـ ‪ comment‬إىل‬
‫• ‪Single Line Comment‬‬
‫• ‪Multiple Line Comment‬‬

‫‪Facebook: fadyalamir77‬‬ ‫|‬ ‫‪LinkedIn: fady-alamir77‬‬ ‫|‬ ‫‪GitHub: fadyalamir‬‬

 ‫ملحوظة‪ :2‬ال ـ ‪ shortcut‬ي‬
‫الت تقوم بنسخ السطر "‪"ALT + Shift + Low Arrow‬‬
‫ن‬ ‫ً‬ ‫ر‬
‫يسم ‪ Documentation‬بديال لل ـ ‪ comment‬ولكن يف‬
‫ي‬ ‫ملحوظة‪ :3‬يوجد ي‬
‫شء اخر‬
‫المستقبل‬
‫‪#06 - Doctype And Standard And Quirks Mode‬‬
‫ن‬
‫‪ :DOCTYPE -1‬يجب أن يوضع يف جميع صفحات ال ـ ‪ web‬وليس عنرص من عنارص ال ـ‬
‫‪ HTML‬ولكن هو عبارة عن ‪ Instruction‬أي تعليمات نعطيها للمتصفح ألخبار المتصفح‬
‫الحاىل هو ‪HTML5‬‬
‫ي‬ ‫بإصدار ‪ HTML‬الذي تعمل به صفحة ال ـ ‪ web‬واالصدار‬
‫ولكن اصدار ‪ HTML4‬كانت ال ـ ‪ DOCTYPE‬تكتب هكذا‬

‫ملحوظة‪ :‬كود ال ـ ‪ DOCTYPE‬غب حساس لألحرف ‪Insensitive‬‬

‫ن‬
‫بطريقتي‪:‬‬ ‫‪ -2‬المتصفح يقوم بعمل ‪ Render‬لصفحة ال ـ ‪web‬‬
‫• ‪Quirks Mode‬‬
‫• ‪Standard Mode‬‬
‫ن‬
‫عندما ال نقوم بتحديد ال ـ ‪ doctype‬يف صفحة ال ـ ‪ web‬يقوم المتصفح بالعمل عىل وضع‬
‫ال ـ ‪Quirks Mode‬‬
‫ن‬
‫ملحوظة‪ :2‬وضع ال ـ ‪ Quirks Mode‬ال يدعم بعض ال ـ ‪ elements‬يف اللغة‬
‫عىل صفحة ال ـ‬ ‫ن‬
‫لك نري وضع ال ـ ‪ Render‬لصفحة ال ـ ‪ web‬نقوم بالضغط كليك يمي ي‬ ‫‪ -3‬ي‬
‫‪ web‬ثم ‪ view page info‬هكذا‬
‫‪#07 - Headings And Use Cases‬‬
‫ه العناوين وليس ال ـ ‪ Head Tag‬ويوجد منها ‪ 6‬مستويات من ‪ h1‬حت‬ ‫ي‬ ‫‪ -1‬ال ـ ‪:Heading‬‬
‫ن‬
‫أكب عنوان‪ ،‬ويستخدم كعنوان للفقرة‬
‫‪ ،h6‬ال ـ ‪ h1‬هو ال ـ ‪ Top Level‬يف ال ـ ‪ Heading‬أي ر‬
‫ن‬
‫أو أي جزء يف صفحة ال ـ ‪web‬‬

‫‪ :user agent stylesheet -2‬هو ال ـ ‪ Browser‬الذي نقوم بفتح صفحة ال ـ ‪ Web‬من‬

‫لتمب عنرص ال ـ ‪ h1‬وكل ‪ element‬له ن‬
‫تمب مختلف‬ ‫ن‬ ‫خالله حيث يقوم بوضع تنسيقات‬
‫ً‬ ‫ن‬
‫ويسم أيضا ال ـ ‪custom styling‬‬
‫ي‬ ‫موجود يف ال ـ ‪user agent stylesheet‬‬

‫‪Facebook: fadyalamir77‬‬ ‫|‬ ‫‪LinkedIn: fady-alamir77‬‬ ‫|‬ ‫‪GitHub: fadyalamir‬‬

 ‫ن‬
‫ملحوظة‪ :‬من خالل لغة ال ـ ‪ CSS‬سوف نستطيع التحكم يف التنسيقات وتغبها‬
‫‪ -‬مستويات ال ـ ‪Heading‬‬

‫وحت‬
‫ي‬ ‫المنطق أن نقوم بتكراره‬
‫ي‬ ‫ملحوظة‪ :2‬ال ـ >‪ <h1‬هو عنوان صفحة ال ـ ‪ web‬ومن غب‬
‫يكون صديق و ‪ valid‬لمحركات البحث‬
‫ملحوظة‪ :3‬نقوم ببتيب عنارص ال ـ ‪ Heading‬بالبتيب الشجري وكل ‪ title‬وال ـ ‪subtitle‬‬
‫بعده حت يكون البتيب الشجري سليم‬

‫‪#08 - Syntax And Tests‬‬

‫ن‬ ‫ن‬
‫ه مثل النحو يف اللغة العربية وال ـ ‪ Grammar‬يف اللغة‬ ‫‪ :Syntax -1‬ال ـ ‪ Syntax‬ي‬
‫البمجية‬ ‫ن‬
‫اإلنجلبية حيث يصف تكوين الجملة ر‬
‫ملحوظة‪ :‬ال ـ ‪ Browser‬يتجاهل أي مسافات نف الكود او ن‬
‫بي العنارص‬ ‫ي‬

‫ملحوظة‪ :2‬من الممكن ترتيب ال ـ ‪ attributes‬هكذا ولن يحدث ‪ error‬ومن الممكن كتابة‬
‫قيمة ال ـ ‪ attribute‬ب ـ ‪ single quote‬أو ‪ double quote‬دون حدوث ‪ error‬وإذا كانت‬
‫القيمة كلمة واحدة من الممكن ان نقوم بكتابتها دون ‪single or double quotes‬‬

‫عىل أنها القيمة‬

‫ولكن إذا لم تكن كلمة واحدة سوف يحدث ‪ error‬سوف يتعامل مع ‪ This‬ي‬
‫عىل أنه ‪attributes‬‬
‫والباف ي‬
‫ي‬
‫‪Facebook: fadyalamir77‬‬ ‫|‬ ‫‪LinkedIn: fady-alamir77‬‬ ‫|‬ ‫‪GitHub: fadyalamir‬‬
#09 - Paragraph Element
Block ‫ تستخدم لعمل فقرة نصية لوضعها داخل‬:Paragraph – ‫ الفقرة النصية‬-1
margin ‫ خاص بها محاط بمسافات‬Element

Inline Element ‫" هو‬We Have A Big Sale" ‫ مثل جملة‬Text ‫ولكن ال ـ‬
‫ وله‬display: block ‫ بجعله‬user agent ‫ يقوم ال ـ‬Paragraph Element ‫ ال ـ‬:‫ملحوظة‬
‫ أي هوامش قبله وبعده‬margin

#10 - Elements Attributes

‫ ه عبارة عن سمات للعنرص بها معلومات زيادة للعنرص أو ن‬:Attributes -1
‫تمب عنرص‬ ‫ي‬
‫ن‬
:‫ وهما‬Attributes ‫ ويوجد نوعي لل ـ‬،‫عن عنرص أخر‬
‫عىل أي‬
‫ يمكن استخدامها ي‬attributes globally ‫ه‬ ‫ ي‬:Global Attributes -1
element
‫ن‬
‫ عن‬paragraph ‫لتمب‬ Global Attributes ‫ وهو من ال ـ‬class ‫ نستخدم ال ـ‬:‫مثال‬
‫ فقط باستخدام ال ـ‬paragraph ‫لك نقوم بتنسيق هذا ال ـ‬
‫ ي‬paragraphs ‫باف ال ـ‬
‫ي‬
Global ‫ عىل أي عنرص ألنه‬class element ‫ ومن الممكن استخدام ال ـ‬CSS
Attribute

‫ يقوم‬Global Attribute ‫ وهو‬hidden ‫يسم‬ ‫ني‬ ‫ الذي‬Attribute ‫ ال ـ‬:2‫مثال‬

display:none; ‫ يكون‬Attribute Style ‫ويعط يف ال ـ‬
‫ي‬ ‫بإخفاء العنرص ومحتواه‬

Facebook: fadyalamir77 | LinkedIn: fady-alamir77 | GitHub: fadyalamir

 ‫ محدد فقط أي‬element ‫ الخاصة ب ـ‬Attribute ‫ ال ـ‬:Element Attribute -2
src, alt ‫ خاصة بها‬attributes ‫ بها‬img ‫ مثل‬custom attribute

)Hypertext Reference( href ‫ خاصة بها‬attributes ‫ لها‬Link ‫ومثل ال ـ‬

‫ خاصة بها‬attributes ‫ لها‬link element ‫ باستخدام‬style ‫وعند وضع ملف‬

)relationship( rel ‫مثل‬

)source( src ‫ خاصة بهم‬attributes ‫ لهم‬audio, video element ‫ومثل ال ـ‬

#11 - Formatting Elements

‫ ي‬:Formatting Elements -1
‫ بدون تدخل ال ـ‬elements ‫ه عنارص تستخدم لتنسيق ال ـ‬
CSS

b => Bold
strong => Bold => Important Text
i => Italic
em => Emphasized
mark => Marked Text Or Highlighted Text
u => Underline
small => Smaller Text
del => Deleted Text
ins => Inserted Text Or New Text
sub => Subscript
sup => Superscript

Facebook: fadyalamir77 | LinkedIn: fady-alamir77 | GitHub: fadyalamir

 ‫‪ :B Tag -1‬تستخدم لجعل الخط عريض‬
‫ً‬
‫‪ :Strong Tag -2‬تجعل الخط عريض أيضا ولكن ‪ Important Text‬كملحوظة مهمة‬
‫ً‬ ‫ن‬
‫يف صفحة ال ـ ‪ Web‬ومهم أيضا لمحركات البحث‬

‫‪ :Italic Tag -3‬تستخدم لجعل الخط مائل‬

‫ن‬ ‫ً‬
‫‪ :Emphasized Tag -4‬تجعل الخط مائل أيضا ولكن النص المهم يف صفحة ال ـ‬
‫‪Web‬‬

‫‪ :Mark Tag -5‬تستخدم لعمل تظليل ‪ highlight‬للكلمة‬

‫‪ :Underline Tag -6‬تستخدم لعمل خط تحت الكالم لكنها غب شائعة االستخدام‬

‫ألنها تستخدم مع ال ـ ‪ links‬ر‬
‫أكب أي ‪<a> Tag‬‬

‫ن‬ ‫ن‬
‫‪ :Small Tag -7‬لتصغب الكالم يف صفحة ال ـ ‪ Web‬أصغر من الكالم الموجود يف‬
‫‪ content‬الصفحة مثل الكالم الذي ليس من ضمن المحتوي أو ال ـ ‪copyright‬‬

‫‪ :Del Tag -8‬لمسح أو التعديل ي‬

‫عىل بعض من ال ـ ‪ text‬من ‪ content‬الصفحة دون‬
‫عىل أرشفة الصفحة أو صداقة ‪ Trust‬صفحة ال ـ ‪ Web‬مع محركات البحث‬
‫التأثب ي‬

‫‪Facebook: fadyalamir77‬‬ ‫|‬ ‫‪LinkedIn: fady-alamir77‬‬ ‫|‬ ‫‪GitHub: fadyalamir‬‬

 ‫لذا يوضع النص المحذوف داخل ‪ <del> tag‬ويبك هذا النص ‪ for reference‬كمرجع‬
‫للزوار عند قراءة المقال لرؤية التعديل‬

‫ملحوظة‪ :‬يوجد استخدام أخر مهم ل ـ ‪ <del> tag‬وهو عند عمل ‪ discount‬ي‬
‫عىل سعر‬
‫حت يعرف الزائر أن المنتج عليه ‪discount‬‬
‫المنتج ي‬

‫‪ :Inserted‬تقوم بوضع خط أسفل الكالم لتدل ي‬

‫عىل أن هذا ال ـ ‪ Text‬تم‬
‫ً‬
‫‪Text Tag -9‬‬
‫إضافته مؤخرا لصفحة ال ـ ‪ Web‬مثل إضافة ‪ content‬جديد لمقال داخل الصفحة‬
‫ً‬
‫عىل أن النص ُمضاف جديدا‬
‫لتدل ي‬

‫ن‬
‫‪ :Subscript -10‬تستخدم لجعل الرقم يف معادلة الكيمياء ألسفل جانب رمز العنرص‬
‫ن‬
‫‪ :Superscript -11‬تستخدم يف الرياضيات لجعل الرقم أس رقم أخر‬

‫هذه العنارص األساسية الذي نستطيع من خاللها التنسيق ‪ formatting‬بواسطة‬

‫ال ـ ‪ HTML‬بدون استخدام ال ـ ‪ CSS‬أو ال ـ ‪JavaScript‬‬

‫‪#12 - Links - Anchor Tag‬‬

‫ن‬
‫‪ :Link Element -1‬وهو يف ال ـ ‪ coding‬يكون ‪ <a> Tag‬وال ـ ‪ a‬اختصار ل ـ ‪Anchor Tag‬‬
‫تستخدم لربط الصفحات ببعضها‬
‫ن‬
‫الرئيس يف ال ـ ‪ <a> Tag‬هو ال ـ ‪)hypertext reference( href‬‬
‫ي‬ ‫ملحوظة‪ :‬ال ـ ‪attribute‬‬
‫‪:Syntax -‬‬
‫ملحوظة‪ :2‬يوضع تحت ال ـ ‪ Link‬خط أسفله ‪ underline‬سوف نستطيع ازالته بواسطة‬
‫ال ـ ‪CSS‬‬

‫‪Facebook: fadyalamir77‬‬ ‫|‬ ‫‪LinkedIn: fady-alamir77‬‬ ‫|‬ ‫‪GitHub: fadyalamir‬‬

 ‫ن‬
‫ملحوظة‪ :3‬ال ـ >‪ <a‬هو ‪ Inline Element‬عند انشاء ‪ 2 Links‬أسفل بعضهما يف الكود‬
‫ن‬
‫يكونوا بجانب بعض يف صفحة ال ـ ‪Web‬‬

‫‪Attributes Of Link -2‬‬

‫ه "‪ "_blank‬تجعل ال ـ ‪Link‬‬‫القيم‪ ،‬ولكن أهم قيمة ن ي‬ ‫‪ :target -1‬يوجد به العديد من‬
‫ن‬
‫عندنا نقوم بالضغط عليه يفتح يف ‪ window‬جديدة يف متصفح الويب‬

‫‪ :title -2‬هو عبارة عن وصف أو عنوان لل ـ ‪ Link‬يظهر عندما نقوم بوضع السهم عليه‬

‫‪ -3‬من خالل ال ـ ‪ <a> Tag‬نستطيع أن نقوم بربط صفحة اخري لدينا‬

‫‪ -4‬من خالل ال ـ ‪ <a> Tag‬نستطيع أن نقوم بربط ال ـ ‪ Link‬بفقرة معينة داخل الصفحة‬
‫عن طريق ال ـ ‪ id attribute‬داخل ال ـ ‪<p> Tag‬‬

‫عىل ال ـ ‪Link‬‬
‫‪ -5‬نستطيع أن نقوم بربط ال ـ ‪ Link‬بال ـ ‪ email‬للتوجه لل ـ ‪ email‬عند الضغط ي‬

‫‪Facebook: fadyalamir77‬‬ ‫|‬ ‫‪LinkedIn: fady-alamir77‬‬ ‫|‬ ‫‪GitHub: fadyalamir‬‬

#13 - Image And Deal With Paths
‫ن‬
)source( src ‫رئيسي وهما ال ـ‬ 2 Attributes ‫< له‬img> tag ‫ ال ـ‬:Image Element -1
‫) الكلمة البديلة للصورة إذا كانت غب موجودة‬alternate text( alt ‫أي مكان الصورة وال ـ‬
‫ن‬
‫ الصورة‬load ‫او حدث تأخب يف‬

‫ لتعديل مقاس الصورة باستخدام‬height ‫ وال ـ‬width ‫ هما ال ـ‬:image attributes -2

‫ أفضل‬CSS ‫ ولكن بال ـ‬HTML ‫لغة ال ـ‬

#14 - Lists - UL, OL, DL

‫ القوائم تنقسم إىل ثالثة انواع‬:Lists -1
dots ‫ أي قائمة غب مرتبة بأرقام ولكن مرتبة ب ـ‬:Unordered List (ul) -1
Block Element ‫وه‬ ‫ ي‬List Item ‫< أي‬li> ‫الرئيس داخلها‬
‫ي‬ ‫والعنرص‬
Nested <ul> ‫ قابلة لل ـ‬ul ‫وال ـ‬

<li> ‫الرئيس داخلها‬

‫ي‬ ‫ قائمة مرتبة بأرقام والعنرص‬:Ordered List (ol) -2

List Attributes -2

reversed => Reverse The Ordering

start => Start From Position
type => Type Of Ordering

Facebook: fadyalamir77 | LinkedIn: fady-alamir77 | GitHub: fadyalamir

 ‫‪ :reversed -1‬تقوم بعكس ترتيب ترقيم القائمة‬

‫ن‬
‫معي‬ ‫‪ :start -2‬لبداية ترتيب ترقيم القائمة من رقم‬

‫‪ :type -3‬هو نوع ترتيب القائمة (أرقام‪ ،‬حروف‪ ،‬حروف التينية ‪ )i‬ونستطيع‬
‫ن‬ ‫ً‬
‫معي‬ ‫تسم ‪ value‬للبدء بنوع ترتيب وترقيم‬
‫ي‬ ‫‪attribute‬‬ ‫ـ‬ ‫ب‬ ‫ايضا‬ ‫التحكم بها‬

‫وه ‪ <dl> Tag‬وداخلها يوجد‬

‫ه النوع الثالث من القوائم ي‬‫‪ :Description List -3‬ي‬
‫ال ـ ‪ <dt> Tag‬وال ـ ‪<dd> Tag‬‬

‫‪dl => Description List‬‬

‫‪dt => Term‬‬
‫‪dd => Description Of The Term‬‬

‫‪Facebook: fadyalamir77‬‬ ‫|‬ ‫‪LinkedIn: fady-alamir77‬‬ ‫|‬ ‫‪GitHub: fadyalamir‬‬

‫‪#15 – Table‬‬

‫‪thead‬‬
‫‪tbody‬‬
‫‪tfoot‬‬
‫‪tr => Table Row‬‬
‫‪td => Table Data Cell‬‬
‫‪th => Table Header Cell‬‬
‫ً‬
‫قديما كان يوضع ال ـ ‪ Header‬وال ـ ‪ Body‬وال ـ ‪ Footer‬وال ـ ‪ Side Bar‬داخل ال ـ ‪Table‬‬
‫بط ولكن األن يستخدم ال ـ ‪ Table‬لعرض البيانات فقط‬‫ئ‬ ‫‪ Element‬وكان الموقع يكون‬
‫‪ :Table Element -1‬الجدول مثل صفحة ال ـ ‪ Web‬له ‪ header, footer, body‬يوجد‬
‫به ‪ 3‬عنارص هما )‪(thead – tbody – tfoot‬‬

‫• ‪ :thead‬الجزء العلوي يحتوي ي‬

‫عىل معلومات لتعريف بيانات الجدول‬
‫• ‪ :tbody‬الجزء الذي يحتوي ي‬
‫عىل بيانات الجدول‬
‫السفىل من الجدول ومن الممكن وضعه او ال نضعه‬
‫ي‬ ‫• ‪ :tfoot‬هو الجزء‬
‫الت تكون داخل الجدول ‪<tr> tag‬‬ ‫‪ :Table Row -2‬ي‬
‫وه الصفوف ي‬

‫‪Facebook: fadyalamir77‬‬ ‫|‬ ‫‪LinkedIn: fady-alamir77‬‬ ‫|‬ ‫‪GitHub: fadyalamir‬‬

 ‫ن‬ ‫ر‬
‫شء يف الجدول قبل ‪ <thead> Tag‬لن‬ ‫ملحوظة‪ :‬إذا قمنا بوضع ال ـ ‪ <tfoot> Tag‬أول ي‬
‫الطبيع هكذا لذا نقوم باستخدام ال ـ ‪<tfoot> Tag‬‬
‫ي‬ ‫يتغب ترتيب الجدول عن البتيب‬

‫ن‬ ‫ن‬
‫‪ :<td> Tag -3‬يستخدم يف ال ـ ‪ body‬وال ـ ‪ footer‬وهو البيانات الموجودة يف ال ـ ‪Table‬‬

‫ن‬ ‫ن‬ ‫ن‬

‫ممب عن ال ـ >‪ <td‬ألنها جزء يف ال ـ ‪header‬‬ ‫‪ :<th> Tag -4‬يستخدم يف ال ـ ‪ head‬ويكون‬
‫ممبة بخاصية ";‪"font-weight: bold‬‬‫ن‬ ‫أي عنون‬

‫‪ :border attribute -5‬لعمل حدود للجدول باستخدام لغة ال ـ ‪ HTML‬ولكن باستخدام‬

‫لغة ال ـ ‪ CSS‬أفضل‬

‫‪ :cellpadding attribute -6‬للتحكم نف المسافة ن‬

‫بي الخاليا ولكن بلغة ال ـ ‪ CSS‬أفضل‬ ‫ي‬

‫‪Facebook: fadyalamir77‬‬ ‫|‬ ‫‪LinkedIn: fady-alamir77‬‬ ‫|‬ ‫‪GitHub: fadyalamir‬‬

 ‫‪ :caption tag -7‬هو ‪ Title‬الجدول‬

‫ً‬ ‫ن‬
‫خليتي من األعمدة معا‬ ‫‪ :colspan -8‬لدمج‬
‫ً‬ ‫ن‬
‫خليتي من الصفوف معا‬ ‫‪ :rowspan -9‬لدمج‬

‫‪#16 – Span And Break And Horizontal Rule‬‬

‫‪ :Span -1‬هو عنرص ‪ Inline element‬ليس له أي تنسيقات‬
‫ً‬
‫استخدامه‪ :‬نقوم باستخدامه عند كتابة ‪ Paragraph‬مثال ونريد ان نقوم بالتعامل‬
‫ً‬ ‫ن‬
‫مع كلمة واحدة بمفردها نضعها يف ‪ <span> Tag‬كتلوين كلمة مثال‬

‫‪ :break -2‬هو عنرص لعمل سطر جديد بال ـ ‪ HTML‬ولكن بال ـ ‪ CSS‬أفضل ‪<br> Tag‬‬

‫‪ :Horizontal Rule -3‬تستخدم لعمل خط ‪ <hr> tag‬ال ـ ‪user agent stylesheet‬‬

‫يعطيله ;‪disblay:block‬‬

‫‪Facebook: fadyalamir77‬‬ ‫|‬ ‫‪LinkedIn: fady-alamir77‬‬ ‫|‬ ‫‪GitHub: fadyalamir‬‬

‫‪#17 – Div And How To Use‬‬
‫ً ن‬ ‫‪ :Division "<div> Tag" -1‬هو ال ـ ‪ King of elements‬من ر‬
‫أكب العنارص استخداما يف‬
‫عىل سبيل المثال‬
‫تصميم صفحة ال ـ ‪ Web‬مثل صفحة ‪ Google‬ي‬

‫ملحوظة‪ :‬ال ـ ‪ div‬عبارة عن ‪ container‬للعنارص األخرى ‪ other elements‬وال يوجد‬

‫بداخله ‪text‬‬
‫مختلفي نف الصفحة يوجد فرق او مسافة ن‬
‫ن‬
‫ً‬
‫بي كل‬ ‫ي‬ ‫مثال‪ :‬عند التعديل ن ي‬
‫عىل عنرصين‬
‫عىل العنرصين معا‬
‫تصميم لكل عنرص يف الصفحة لذا يجب استخدام ال ـ ‪ div‬للتعديل ي‬

‫مثال‪ :2‬تقسيم أقسامً ال ـ ‪ Book Store‬بواسطة ال ـ ‪ div‬والتعديل ي‬

‫عىل تصميمهم‬
‫ن‬
‫وتمبهم باستخدام ال ـ ‪class attribute‬‬ ‫باستخدام ال ـ ‪ CSS‬معا‬

‫‪Facebook: fadyalamir77‬‬ ‫|‬ ‫‪LinkedIn: fady-alamir77‬‬ ‫|‬ ‫‪GitHub: fadyalamir‬‬

‫‪#18 – HTML Entities‬‬
‫ن‬ ‫‪:HTML Entities -1‬‬
‫ه الكيانات يف لغة ‪ HTML‬أي أن كل ‪ character‬ضمن لغة‬
‫ي ن‬
‫لك يظهر يف صفحة ال ـ ‪ Web‬داخل ال ـ ‪Browser‬‬
‫‪ HTML‬له كود ي‬
‫مثال‪ :1‬عندما نريد كتابة >‪ <p‬كا ‪ Text‬وليس ‪Tag of Paragraph Element‬‬

‫مثل عالمة "<" تكتب بواسطة كود ;‪ &lt‬أي ‪ less than‬وعالمة ">" تكتب بواسطة ;‪&gt‬‬
‫أي ‪greater than‬‬

‫وعالمة ال ـ "&" تكتب بواسطة ;‪ &amp‬هكذا‬

‫وعالمات أخري مثل ال ـ ‪ copyright‬وعالمات الرياضيات هكذا‬

‫وقائمة ال ـ ‪ html entities‬هنا ‪Complete list of HTML entities‬‬

‫‪#19 – Semantic Elements‬‬
‫ن‬
‫‪ -1‬العنارص المنطقية – ‪ :Semantic Elements‬ظهرت يف اإلصدار الخامس من لغة‬
‫ً‬ ‫‪ HTML‬وه عنارص ر‬
‫أكب منطقية تستخدم بدال من ال ـ ‪Div‬‬ ‫ي‬
‫‪Header Tag -1‬‬
‫‪ :navigation Tag -2‬بدل من انشاء ‪ div‬وبداخله ‪navigation class‬‬

‫ً‬
‫‪ :section Tag -3‬جزء من الموقع محتوي الصفحة بدال من استخدام ال ـ ‪Div‬‬
‫ن‬
‫يمي الصفحة‬ ‫‪ :section Tag -4‬تستخدم داخل ‪ section tag‬لمحتوي ي‬
‫عىل‬

‫‪ :aside Tag -5‬تستخدم داخل ‪ section tag‬الرئيسة لمحتوي ي‬

‫عىل يسار‬
‫الصفحة وهو ال ـ ‪ Sidebar‬بدل من انشاء ‪ div‬وعمل ‪co-sidebar class‬‬

‫‪Facebook: fadyalamir77‬‬ ‫|‬ ‫‪LinkedIn: fady-alamir77‬‬ ‫|‬ ‫‪GitHub: fadyalamir‬‬

 ‫ن‬
‫‪ :article Tag -6‬الجزء الخاص بالمقال يف الصفحة‬

‫ً‬ ‫ن‬
‫‪ :footer Tag -7‬تستخدم لعمل ال ـ ‪ footer‬يف صفحة ال ـ ‪ web‬بدال من انشاء ‪Div‬‬
‫‪footer class‬‬

‫ملحوظة‪ :‬جميع هذه العنارص ‪ Block Element‬داخل صفحة ال ـ ‪Web‬‬

‫وهذا الفرق ن‬
‫بي اصدار ‪ HTML4‬وإصدار ‪ HTML5‬بعد استخدام ال ـ ‪semantic elements‬‬

‫معب‬ ‫ملحوظة‪ :2‬عنارص ال ـ ‪ Semantic Elements‬مثل ال ـ ‪ Div‬أي ر‬

‫تعتب ‪ Div‬ولكن باسم ر‬
‫نستطيع أن نعطيها ال ـ ‪ class‬وال ـ ‪attributes‬‬
‫‪#20 – Layout With Div And Classes‬‬
‫ن‬
‫ونمبه بواسطة ‪class‬‬ ‫‪ :class header -1‬نقوم بإنشاء ال ـ ‪ Header‬عن طريق انشاء ‪div‬‬
‫لك نستطيع من خالل ال ـ ‪ CSS‬بتنسيقه والتعديل عليه‬
‫تسم ‪ header‬ي‬
‫ي‬

‫ن‬ ‫ً‬
‫ملحوظة‪ :‬ال ـ ‪ Links‬دائما توضع يف ‪ Unordered List‬ألنها مجموعة لينكات غب مرتبة‬
‫هذه بنية الصفحة ال ـ ‪ Layout‬ولكن سوف يتم تعديل الشكل بواسطة ال ـ ‪CSS‬‬

‫‪Facebook: fadyalamir77‬‬ ‫|‬ ‫‪LinkedIn: fady-alamir77‬‬ ‫|‬ ‫‪GitHub: fadyalamir‬‬

‫‪ :class navigation -2‬يكون بداخله مجموعة من اللينكات ونقوم بإنشائه بواسطة ‪div‬‬
‫لك نستطيع من خالل لغة ال ـ ‪CSS‬‬ ‫ن‬
‫تسم ‪ nav‬أو ‪ navigation‬ي‬
‫ي‬ ‫ونمبه بواسطة ‪class‬‬
‫بتنسيقه والتعديل عليه‬

‫ن‬
‫ونمبه بواسطة‬ ‫‪ :class content -2‬نقوم بإنشاء محتوي الصفحة عن طريق انشاء ‪div‬‬
‫لك نستطيع من خالل ال ـ ‪ CSS‬بتنسيقه والتعديل عليه‬
‫تسم ‪ content‬ي‬
‫ي‬ ‫‪class‬‬

‫ن‬
‫اليمي يضم األقسام‬ ‫‪ :class sidebar -3‬نقوم بإنشاء ال ـ ‪ sidebar‬الجزء الذي يكون ي‬
‫عىل‬
‫ن‬
‫ونمبه بواسطة ‪class‬‬ ‫ن‬
‫المنضمي وهكذا عن طريق انشاء ‪div‬‬ ‫والصور وأخر األعضاء‬
‫لك نستطيع من خالل ال ـ ‪ CSS‬بتنسيقه والتعديل عليه‬ ‫تسم ‪ sidebar‬ي‬
‫ي‬

‫ن‬
‫ونمبه بواسطة ‪class‬‬ ‫‪ :class footer -4‬نقوم بإنشاء ال ـ ‪ Footer‬عن طريق انشاء ‪div‬‬
‫لك نستطيع من خالل ال ـ ‪ CSS‬بتنسيقه والتعديل عليه‬‫تسم ‪ footer‬ي‬
‫ي‬

‫‪Facebook: fadyalamir77‬‬ ‫|‬ ‫‪LinkedIn: fady-alamir77‬‬ ‫|‬ ‫‪GitHub: fadyalamir‬‬

‫‪#21 – Layout With Semantic Elements‬‬
‫ن‬ ‫ن‬ ‫‪ :Header Tag -1‬يمكن استخدامها ر‬
‫بتمب كل ‪<header> Tag‬‬ ‫أكب من مرة يف الصفحة‬
‫ن ن‬
‫معي يف‬ ‫باستخدام ال ـ ‪ class‬ألن ممكن ان نقوم بوضع ‪ <header> Tag‬داخل ‪Section‬‬
‫الموقع‬

‫ن‬
‫‪ :nav Tag -2‬وهو ‪ navigator‬واحد يف الموقع لن يتكرر به جميع ال ـ ‪Links‬‬

‫‪ :section Tag -3‬يوجد بداخله ‪ content‬الصفحة‬

‫‪ :sidebar Tag -4‬ال ـ ‪ <aside> Tag‬يكون واحد نف الصفحة لذا ال نحتاج ن‬

‫تمبه ب ـ ‪class‬‬ ‫ي‬

‫ن‬
‫لتمبه ب ـ ‪ class‬ألن ممكن تكرار داخل‬ ‫‪ :footer Tag -5‬ال ـ ‪ <footer> Tag‬نحتاج‬
‫ن‬
‫معي‬ ‫‪section‬‬

‫ن‬
‫‪ :article Tag -6‬تستخدم مع المقاالت يف الصفحة‬

‫‪Facebook: fadyalamir77‬‬ ‫|‬ ‫‪LinkedIn: fady-alamir77‬‬ ‫|‬ ‫‪GitHub: fadyalamir‬‬

 ‫ً‬
‫ملحوظة‪ :‬عندما نريد ان نقوم بوضع صورة و ‪ caption‬للصورة معا لتنسيقهم بال ـ ‪CSS‬‬
‫من الممكن ان نقوم بوضعهم داخل ‪ <div> Tag‬ولكن بال ـ ‪ Semantic Elements‬نقوم‬
‫بوضعها داخل ‪<figure> Tag‬‬
‫وال ـ ‪ caption‬ال يوضع داخل ‪ <p> Tag‬ولكن يوضع داخل >‪<figcaption‬‬

‫‪#22 – Audio‬‬
‫ن‬
‫‪ :Audio Tag -1‬يستخدم لعرض الصوت يف صفحة ال ـ ‪ web‬ويوجد به ‪attributes‬‬
‫الصون‬
‫ي‬ ‫‪ :src -1‬كا ‪ attribute‬بداخل ال ـ ‪ audio tag‬لإلشارة لمسار الملف‬

‫الصون عن‬
‫ي‬ ‫‪ :source Tag -2‬داخل ال ـ ‪ <audio> Tag‬ونحدد بداخله مسار الملف‬
‫الصون عن طريق ال ـ ‪type attribute‬‬
‫ي‬ ‫طريق ال ـ ‪ src attribute‬ونحدد نوع الملف‬
‫ونحدد النوع عن طريق ال ـ ‪MIME Type‬‬

‫أكب من ‪ <source> Tag‬ر‬

‫بأكب من صيغة أو امتداد للملف‬ ‫ملحوظة‪ :‬نقوم بوضع ر‬
‫لك يقوم ال ـ ‪ Browser‬باختيار المناسب له‬
‫الصون داخل ال ـ ‪ <audio> Tag‬ي‬
‫ي‬
‫الصون تظهر له‬
‫ي‬ ‫لك إذا لم يظهر الملف‬
‫وتوضع رسالة ي‬

‫ن‬ ‫ن‬
‫‪ :controls -2‬ي‬
‫ثان ‪ attribute‬يف ال ـ ‪ <audio> Tag‬تستخدم لوضع أزرار التحكم‬
‫الصون (‪)play – stop – mute – skip steps‬‬
‫ي‬ ‫للملف‬

‫‪Facebook: fadyalamir77‬‬ ‫|‬ ‫‪LinkedIn: fady-alamir77‬‬ ‫|‬ ‫‪GitHub: fadyalamir‬‬

‫الصون‬
‫ي‬ ‫‪ :autoplay -3‬هو ‪ attribute‬يوضع داخل ‪ <audio> Tag‬يجعل الملف‬
‫ئ‬
‫تلقان عند فتح صفحة ال ـ ‪Web‬‬ ‫يعمل‬
‫ي‬
‫الصون‬
‫ي‬ ‫‪ :loop -4‬هو ‪ attribute‬يوضع داخل ‪ <audio> Tag‬يجعل الملف‬
‫عندما يصل للنهاية يتكرر مرة أخري‬
‫الصون‬
‫ي‬ ‫‪ :muted -5‬هو ‪ attribute‬يوضع داخل ‪ <audio> Tag‬يجعل الملف‬
‫عند فتح صفحة ال ـ ‪ Web‬يكون صامت‬

‫‪#23 – Video‬‬
‫ن‬
‫‪ :Video Tag -1‬تستخدم لعرض الفيديو يف صفحة ال ـ ‪ web‬ويوجد به ‪attributes‬‬
‫‪ :src -1‬كا ‪ attribute‬بداخل ال ـ ‪ video tag‬لإلشارة لملف الفديو‬

‫‪ :source Tag -2‬داخل ال ـ ‪ <video> Tag‬ونحدد بداخله مسار ملف الفيديو عن‬
‫طريق ال ـ ‪ src attribute‬ونحدد نوع الملف عن طريق ال ـ ‪type attribute‬‬
‫ونحدد النوع عن طريق ال ـ ‪MIME Type‬‬

‫أكب من ‪ <source> Tag‬ر‬

‫بأكب من صيغة أو امتداد لملف‬ ‫ملحوظة‪ :‬نقوم بوضع ر‬
‫لك يقوم ال ـ ‪ Browser‬باختيار المناسب له‬
‫الفيديو داخل ال ـ ‪ <audio> Tag‬ي‬
‫الصون تظهر له‬
‫ي‬ ‫لك إذا لم يظهر الملف‬
‫وتوضع رسالة ي‬

‫ن‬ ‫ن‬
‫‪ :controls -2‬ي‬
‫ثان ‪ attribute‬يف ال ـ ‪ <video> Tag‬تستخدم لوضع أزرار التحكم‬
‫لملف الفيديو (‪)play – stop – mute – skip steps‬‬

‫‪Facebook: fadyalamir77‬‬ ‫|‬ ‫‪LinkedIn: fady-alamir77‬‬ ‫|‬ ‫‪GitHub: fadyalamir‬‬

 ‫‪ :width -3‬هو ‪ attribute‬يوضع داخل ‪ <video> Tag‬من خالله نستطيع‬
‫ن‬ ‫ن‬
‫التحكم يف عرض ال ـ ‪ video player‬يف صفحة ال ـ ‪Web‬‬
‫‪ :height -4‬هو ‪ attribute‬يوضع داخل ‪ <video> Tag‬من خالله نستطيع‬
‫ن‬ ‫ن‬
‫التحكم يف ارتفاع ال ـ ‪ video player‬يف صفحة ال ـ ‪Web‬‬

‫‪ :autoplay -5‬هو ‪ attribute‬يوضع داخل ‪ <video> Tag‬يجعل الفيديو‬

‫ئ‬
‫تلقان عند فتح صفحة ال ـ ‪Web‬‬ ‫يعمل‬
‫ي‬
‫‪ :loop -6‬هو ‪ attribute‬يوضع داخل ‪ <video> Tag‬يجعل الفيديو‬
‫عندما يصل للنهاية يتكرر مرة أخري‬
‫الصون‬
‫ي‬ ‫‪ :muted -7‬هو ‪ attribute‬يوضع داخل ‪ <video> Tag‬يجعل الملف‬
‫عند فتح صفحة ال ـ ‪ Web‬يكون صامت‬

‫‪ :poster -8‬هو ‪ attribute‬يقوم بإظهار صورة داخل ال ـ ‪ video player‬عند فتح‬

‫صفحة ال ـ ‪ web‬حت نقوم بتشغيل الفيديو‬

‫‪ :track Tag -3‬داخل ال ـ ‪ <video> Tag‬يستخدم لوضع الملف الخاص ببجمة الفيديو‬
‫ونوعه من حيث لغة البجة ويوضع ر‬
‫أكب من ‪ <track> Tag‬ألختالف لغات‬
‫البجمة ويوجد به ‪attributes‬‬
‫‪ :src -1‬هو ‪ attribute‬بداخل ال ـ ‪ track tag‬لإلشارة لمسار ملف البجمة‬

‫‪ :kind -2‬نوع الملف ويوجد أنواع للشخص األصم أو الكفيف او ‪subtitle‬‬

‫ترجمة‬

‫‪Facebook: fadyalamir77‬‬ ‫|‬ ‫‪LinkedIn: fady-alamir77‬‬ ‫|‬ ‫‪GitHub: fadyalamir‬‬

 ‫‪ :srclang -3‬هو ‪ attribute‬يوضع داخل ال ـ ‪ <track> Tag‬لتحديد لغة‬
‫ملف البجمة‬

‫‪ :label -4‬هو ‪ attribute‬يوضع داخل ال ـ ‪ <track> Tag‬لتحديد تسمية‬

‫ملف البجمة داخل ال ـ ‪video player‬‬

‫ملحوظة‪ :2‬ال ـ ‪ preload‬ي‬

‫وه ‪ attribute‬داخل ال ـ ‪ <video> Tag‬تحدد كيفية تحميل‬
‫محتوى الفيديو عند تحميل الصفحة‪ .‬تسمح لك هذه السمة بالتحكم فيما إذا كان يجب‬
‫تحميل الفيديو قبل أن يتفاعل المستخدم معه وكم من الفيديو يجب تحميله‪ .‬ويوجد بها‬
‫‪ attributes‬هما‪:‬‬

‫ه القيمة االفباضية‪ .‬تشب إىل أنه يجب عدم تحميل الفيديو‪ .‬لن‬
‫‪ :none -1‬هذه ي‬
‫يقوم المتصفح بتحميل الفيديو حت يبدأ المستخدم تشغيله‪.‬‬
‫‪ :metadata -2‬تشب هذه القيمة إىل أنه يجب تحميل معلومات الفيديو فقط‪.‬‬
‫وتشمل هذه المعلومات مثل مدة الفيديو وأبعاده وال ـ ‪ tracks‬المتاحة‪ .‬لن يقوم‬
‫المتصفح بتحميل بيانات الفيديو الفعلية حت يبدأ المستخدم تشغيله‪.‬‬
‫‪ :auto -3‬تشب إىل أنه يجب تحميل الفيديو بالكامل‪ .‬سيحاول المتصفح تحميل‬
‫الملف بأكمله عند تحميل الصفحة‪ ،‬بغض النظر عما إذا كان المستخدم سيشغله‬
‫أم ال‪ .‬يمكن أن يؤدي ذلك إىل زيادة استخدام عرض النطاق البددي ووقت تحميل‬
‫الصفحة‪.‬‬
‫‪#24 – Form Part 1 - Input Types And Label‬‬
‫‪ -1‬نموذج – ‪ :form‬هو عنرص ‪ element‬من عنارص لغة ‪ HTML‬ويستخدم لعمل جزء‬
‫عىل حقول إلدخال اسم المستخدم‬
‫ال ـ ‪ Sign Up, Sign In‬حيث يحتوي ي‬
‫والباسورد وهكذا‬
‫ملحوظة‪ :‬ال ـ ‪ form‬عبارة عن ‪ element‬نستطيع أن نضع بداخله جميع العنارص مثل‬
‫لك عندما‬
‫ال ـ ‪ div, paragraph, heading‬وتوضع بداخله جميع حقول اإلدخال ي‬
‫عىل زر ‪ Submit‬أو ارسال يقوم بإرسال جميع البيانات الذي يقوم‬‫نقوم بالضغط ي‬
‫بجمعها من خالل ال ـ ‪form‬‬
‫‪Facebook: fadyalamir77‬‬ ‫|‬ ‫‪LinkedIn: fady-alamir77‬‬ ‫|‬ ‫‪GitHub: fadyalamir‬‬
 :Form ‫ عنارص ال ـ‬-2
‫ إذا قمنا بعمل‬inline element ‫ وهو‬Text ‫ هو حقل لل ـ‬:input filled -1
‫ن‬
Web ‫ يكونوا بجانب بعض يف صفحة ال ـ‬two <input> Tag

self-closing Tag ‫ هو‬input element ‫ ال ـ‬:‫ملحوظة‬

:<input> Tag ‫ داخل ال ـ‬attributes ‫ يوجد‬-2

‫ من خالله نحدد نوع المدخالت ي‬:type -1

‫الت سوف تكتب داخل الحقل‬
(Text – Password …etc) ‫مثل‬

input filled ‫ يظهر هكذا داخل ال ـ‬type="password" ‫عند تحديد ال ـ‬

‫ن‬
input filled ‫ يستخدم يف وصف ال ـ‬Form ‫ من عنارص ال ـ‬:label Tag -2

Type ‫< وال ـ‬input> Tag ‫ نقوم بإنشائه بواسطة‬:Submit Button -3

submit ‫ يساوي‬attribute

Facebook: fadyalamir77 | LinkedIn: fady-alamir77 | GitHub: fadyalamir

‫‪#25 – Form Part 2 - Required, Placeholder, Value‬‬
‫ن‬ ‫‪ :required attribute -2‬ه ن‬
‫ثان ‪ attribute‬يف ال ـ ‪ <input> Tag‬تجعل الحقل‬
‫ي‬ ‫ي‬
‫ن‬ ‫‪ required‬أي يجب ئ‬
‫مىل الحقل قبل ان نقوم بعمل ‪ submit‬يف صفحة ال ـ ‪Web‬‬

‫ن‬
‫ملحوظة‪ :‬يف إصدارات ‪ HTML‬الذي كانت قبل ‪ HTML5‬كان يجب كتابة ال ـ ‪required‬‬
‫هكذا‬

‫ن‬ ‫ن‬
‫‪ :placeholder attribute -2‬ي‬
‫ه ‪ attribute‬يف ال ـ ‪ <input> Tag‬تقوم بوضع يف‬
‫الحقل كلمة شفافة ‪ placeholder‬أي تحجز هذا الحقل وعندما يقوم المستخدم‬
‫ن‬ ‫ن‬
‫تختق‬
‫ي‬ ‫بالكتابة يف الحقل‬

‫ن‬ ‫ن‬
‫ه ‪ attribute‬يف ال ـ ‪ <input> Tag‬تقوم بوضع قيمة يف الحقل‬
‫ن‬ ‫‪ :value attribute -3‬ي‬
‫ومن ثم يقوم المستخدم بالكتابة يف الحقل وتعديلها‬

‫ملحوظة‪ :2‬يمكن تغب كلمة ‪ submit‬ي‬

‫عىل زر ‪ submit‬عن طريق ‪value attribute‬‬
‫هكذا‬

‫‪Facebook: fadyalamir77‬‬ ‫|‬ ‫‪LinkedIn: fady-alamir77‬‬ ‫|‬ ‫‪GitHub: fadyalamir‬‬

 ‫ُ‬
‫عىل كتابة ‪ valid email‬داخل‬
‫ي‬ ‫المستخدم‬ ‫جب‬
‫ر‬ ‫ت‬ ‫ملحوظة‪ :2‬يوجد ‪ email type‬ي‬
‫وه‬
‫الحقل‬

‫‪#26 – Form Part 3 - Action, Name, Method‬‬

‫‪ :action attribute -1‬هو ‪ attribute‬يوجد داخل ال ـ ‪ <form> Tag‬حيث يقوم‬
‫بتحديد ال ـ ‪ Link‬أو الصفحة أو الملف الذي سوف نقوم بإرسال بيانات ال ـ ‪ form‬له‬

‫ملحوظة‪ :‬عندما نقوم ببك ال ـ ‪ action‬فارغة يقوم بإرسال البيانات لنفس الصفحة‬
‫الموجود بها ال ـ ‪form‬‬

‫ن‬
‫لتمب كل‬ ‫‪ :name attribute -2‬هو ‪ attribute‬يوجد داخل ال ـ ‪ <input> Tag‬يستخدم‬
‫ن‬ ‫ن‬
‫معي ونقوم‬ ‫حقل يف ال ـ ‪ form‬عن األخر عن طريق إعطاء كل ‪ <input> Tag‬اسم‬
‫ن‬
‫باستدعاء ال ـ ‪ <input> Tag‬عن طريق االسم يف ال ـ ‪Server‬‬

‫‪Facebook: fadyalamir77‬‬ ‫|‬ ‫‪LinkedIn: fady-alamir77‬‬ ‫|‬ ‫‪GitHub: fadyalamir‬‬

 ‫ن‬
‫نعط لكل ‪ <input> Tag‬ال ـ ‪ name attribute‬يحدث يف ال ـ ‪ URL‬ما‬
‫ي‬ ‫ملحوظة‪ :2‬عندما‬
‫ً ن‬
‫عىل بيانات اإلدخال بالحقل وتوجد ايضا يف ال ـ‬
‫الت تحتوي ي‬
‫يسم بال ـ ‪ Query String‬ي‬‫ي‬
‫‪ Developer Tools‬داخل ‪ Tab‬ال ـ ‪ Network‬وهذا البيانات ترسل لل ـ ‪ Backend‬ليتعامل‬
‫معها أو ترسل ل ـ ‪email‬‬

‫‪ :method attribute -3‬هو ‪ attribute‬يوجد داخل ال ـ ‪ <form> Tag‬يقوم بتحديد‬

‫ن‬
‫طريقتي )‪(GET – POST‬‬ ‫طريقة إرسال البيانات وهما‬
‫ن‬
‫‪ :GET -1‬تكون البيانات ظاهرة يف ال ـ ‪ URL‬وال ـ ‪Query String Parameters‬‬

‫ن‬ ‫ن‬
‫‪ :POST -2‬لن تظهر البيانات يف ال ـ ‪ URL‬لكن تظهر يف ال ـ ‪Query String‬‬
‫‪Parameters‬‬

‫‪#27 – Form Part 4 - Hidden, Reset, Color, Range, Number‬‬

‫‪ :hidden -1‬هو قيمة لل ـ ‪ type attribute‬يوجد داخل ‪ <input> Tag‬له استخدامات‬
‫ن‬ ‫ن‬
‫كثبة ومن استخداماته وضع ال ـ ‪ ID‬أو المعرف يف ال ـ ‪ application‬واضافته يف ال ـ ‪value‬‬
‫وارساله مع البيانات وليس من المهم ان نظهره للمستخدم‬

‫‪Facebook: fadyalamir77‬‬ ‫|‬ ‫‪LinkedIn: fady-alamir77‬‬ ‫|‬ ‫‪GitHub: fadyalamir‬‬

 ‫ن‬ ‫ن‬
‫ملحوظة‪ :‬تظهر يف ال ـ ‪ developer tools‬ولكن ال تظهر يف صفحة ال ـ ‪Web‬‬

‫‪ :reset -2‬هو قيمة لل ـ ‪ type attribute‬يوجد داخل ‪ <input> Tag‬يقوم بعمل اسبداد‬
‫ن‬
‫أو ‪ reset‬لبيانات اإلدخال بال ـ ‪ form‬أي يقوم بحذف جميع البيانات المكتوبة يف الحقول‬
‫ن‬
‫إىل قيمة ال ـ ‪ value‬الخاصة به‬
‫ي‬ ‫يرجع‬ ‫‪value‬‬ ‫به‬ ‫الذي‬ ‫والحقل‬ ‫‪from‬‬ ‫ـ‬ ‫ل‬ ‫ا‬ ‫ف‬
‫الموجودة ي‬

‫‪ :color -3‬هو قيمة لل ـ ‪ type attribute‬يوجد داخل ‪ <input> Tag‬وهو حقل نستطيع‬
‫من خالله جعل المستخدم يختار لون داخل ال ـ ‪ form‬من حقل به األلوان هكذا ويرسل‬
‫عىل ‪submit‬‬‫مع بيانات ال ـ ‪ form‬عند الضغط ي‬

‫‪ :range -4‬هو قيمة لل ـ ‪ type attribute‬يوجد داخل ‪ <input> Tag‬ويوجد به‬

‫‪attributes‬‬
‫ن‬
‫األدن الذي يبدأ منه ال ـ ‪Range‬‬ ‫‪ :min -1‬أي ‪ minimum‬الحد‬
‫‪ :max -2‬أي ‪ maximum‬الحد األقىص الذي يقف عنده ال ـ ‪Range‬‬
‫ن‬
‫‪ :step -3‬من خاللها نستطيع التحكم يف خطوات ال ـ ‪Range‬‬
‫‪ :value -4‬تحديد بداية ال ـ ‪Range‬‬

‫‪Facebook: fadyalamir77‬‬ ‫|‬ ‫‪LinkedIn: fady-alamir77‬‬ ‫|‬ ‫‪GitHub: fadyalamir‬‬

 ‫ً ن‬
‫ملحوظة‪ :2‬ال ـ ‪ Range‬تستخدم كثبا يف صفحات ال ـ ‪ Web‬ولكن تعمل بطريقة أفضل‬
‫باستخدام ال ـ ‪JavaScript‬‬

‫‪ :number -5‬هو قيمة لل ـ ‪ type attribute‬يوجد داخل ‪ <input> Tag‬ويوجد به‬

‫‪attributes‬‬
‫ن‬
‫األدن الذي يبدأ منه الرقم‬ ‫‪ :min -1‬أي ‪ minimum‬الحد‬
‫‪ :max -2‬أي ‪ maximum‬الحد األقىص الذي تقف عنده األرقام‬
‫ن‬
‫‪ :step -3‬من خاللها نستطيع التحكم يف زيادة األرقام‬
‫‪ :value -4‬تحديد بداية األعداد‬

‫ملحوظة‪ :3‬عند محاول ادخال رقم خارج نطاق ال ـ ‪ min‬وال ـ ‪ max‬يعطيك رسالة بالنطاق‬
‫المحدد‬

‫‪#28 – Form Part 5 - ReadOnly, Disabled, Autofocus‬‬

‫ن‬ ‫ن‬
‫‪ :readonly -1‬هو ‪ attribute‬يف ال ـ ‪ <input> Tag‬يجعل ال ـ ‪ input‬يف الحقل قابل‬
‫ن‬
‫للقراءة والنسخ فقط‪ ،‬ولكن غب قابل للتعديل او الكتابة يف الحقل‬

‫‪Facebook: fadyalamir77‬‬ ‫|‬ ‫‪LinkedIn: fady-alamir77‬‬ ‫|‬ ‫‪GitHub: fadyalamir‬‬

 ‫ً‬
‫ملحوظة‪ :‬ال ـ ‪ <input> Tag‬الذي نضيف له ‪ readonly attribute‬ترسل بياناته ايضا‬
‫مع بيانات ال ـ ‪form‬‬

‫ن‬ ‫ن‬
‫معي عندما‬ ‫‪ :disabled -2‬هو ‪ attribute‬يف ال ـ ‪ <input> Tag‬يمنع ارسال بيانات حقل‬
‫ن‬
‫يقوم كل مستخدم بإرسال البيانات مثل ‪ mail‬ثابت يف موقع ال ـ ‪ ،web‬ويقوم بمنع‬
‫ً‬
‫عىل الحقل ايضا‬
‫التعديل ي‬

‫ن‬
‫‪ :autofocus -3‬هو ‪ attribute‬يف ال ـ ‪ <input> Tag‬عندما نقوم بفتح صفحة ال ـ ‪Web‬‬
‫ر ً‬ ‫ن‬ ‫يجعل ر‬
‫مباشة‬ ‫مؤش الكتابة يف هذا الحقل‬

‫ن‬ ‫ن‬
‫األدن من‬ ‫‪ :minlength -4‬هو ‪ attribute‬يف ال ـ ‪ <input> Tag‬يقوم بتحديد الحد‬
‫الحروف أو األرقام داخل الحقل‬

‫ن‬
‫‪ :maxlength -5‬هو ‪ attribute‬يف ال ـ ‪ <input> Tag‬يقوم بتحديد الحد األقىص من‬
‫الحروف أو األرقام داخل الحقل‪ ،‬وال يسمح بالكتابة نف الحقل ر‬
‫أكب من هذا الحد‬ ‫ي‬

‫‪Facebook: fadyalamir77‬‬ ‫|‬ ‫‪LinkedIn: fady-alamir77‬‬ ‫|‬ ‫‪GitHub: fadyalamir‬‬

 ‫ً‬
‫عىل ال ـ ‪ Syntax‬هكذا ليسهل قرأته‬
‫ي‬ ‫بالتعديل‬ ‫نقوم‬ ‫ان‬ ‫نحتاج‬ ‫سوف‬ ‫احيانا‬ ‫ملحوظة‪:2‬‬

‫‪#29 – Form Part 6 - Radio And Checkbox‬‬

‫‪ :radio -1‬هو قيمة لل ـ ‪ type attribute‬يوجد داخل ‪ <input> Tag‬يستخدم لعمل‬
‫شء من مجموعة اختيارات‬ ‫ر‬
‫اختيارات واختيار ي‬

‫‪ :checkbox -2‬هو قيمة لل ـ ‪ type attribute‬يوجد داخل ‪ <input> Tag‬يستخدم‬

‫ً‬ ‫ر‬ ‫ر‬
‫شء معا من مجموعة االختيارات ‪Multiple Check‬‬
‫لعمل اختيارات واختيار أكب من ي‬

‫‪Facebook: fadyalamir77‬‬ ‫|‬ ‫‪LinkedIn: fady-alamir77‬‬ ‫|‬ ‫‪GitHub: fadyalamir‬‬

 ‫ن‬
‫‪ :checked -3‬هو ‪ attribute‬يف ال ـ ‪ <input> Tag‬يستخدم مع ال ـ ‪radio, checkbox‬‬
‫لجعل اختيار من االختيارات "تم اختياره" عند فتح صفحة ال ـ ‪ Web‬ولكن يمكن اختيار‬
‫واحد من االختيارات األخرى‬

‫لك نستطيع ان نختار اختيار من االختيارات من خالل الكلمة يجب ان نربط‬ ‫ي‬ ‫ملحوظة‪:‬‬
‫ن‬
‫ال ـ ‪ label‬مع ال ـ ‪ input‬باستخدام ال ـ ‪ ID Attribute‬أي ‪ identifier‬يف ال ـ ‪<input> Tag‬‬
‫ن‬
‫وباستخدام ال ـ ‪ for attribute‬يف ال ـ ‪<label> Tag‬‬

‫ملحوظة‪ :2‬ال ـ ن‪ id, for‬يستخدمان مع جميع العنارص األخرى وعند الضغط ي‬

‫عىل ال ـ ‪label‬‬
‫ر‬
‫المؤش يف ال ـ ‪ input‬هكذا‬ ‫يظهر‬

‫ن‬
‫ملحوظة‪ :3‬ال ـ ‪ ID‬غب مسموح تكراره يف الصفحة‬
‫‪#30 – Form Part 7 - Select And Textarea‬‬
‫‪ :select -1‬هو ‪ element‬داخل ال ـ ‪ <form> Tag‬نستخدمه عند انشاء حقل به الكثب‬
‫من الخيارات الختار واحد منهم‪ ،‬وداخل ال ـ ‪ select‬يوجد ‪ <option> Tag‬إلضافة‬
‫االختيارات للحقل‬

‫‪Facebook: fadyalamir77‬‬ ‫|‬ ‫‪LinkedIn: fady-alamir77‬‬ ‫|‬ ‫‪GitHub: fadyalamir‬‬

 ‫ملحوظة‪ :‬يوجد ‪ value attribute‬داخل ال ـ ‪ < option> Tag‬تستخدم عند ارسال‬
‫الت ترسل‬‫ه ي‬‫بيانات ال ـ ‪ form‬إلن ال ـ ‪ value‬ي‬

‫‪ :optgroup -2‬هو ‪ element‬داخل ال ـ ‪ <select> Tag‬يستخدم لتقسيم ال ـ >‪<option‬‬

‫ن‬
‫‪ Tag‬وال نستطيع اختياره من ضمن اختيارات ال ـ ‪ <select> Tag‬يف صفحة ال ـ ‪Web‬‬

‫‪ :multiple -3‬ه ‪ attribute‬داخل ال ـ ‪ <select> Tag‬تسمح للمستخدم بأختيار ر‬

‫أكب‬ ‫ي‬
‫من اختيار من حقل ال ـ ‪ <select> Tag‬باستخدام ("االختيار" ‪)CTRL +‬‬

‫ه ‪ attribute‬داخل ال ـ ‪ <option> Tag‬تجعل ال ـ ‪ُ option‬مختار عند‬

‫‪ :selected -4‬ي‬
‫فتح صفحة ال ـ ‪Web‬‬

‫‪ :textarea -5‬هو ‪ element‬داخل ال ـ ‪ <form> Tag‬تستخدم كمنطقة لكتابة ال ـ ‪Text‬‬

‫باف ال ـ ‪ attributes‬معه مثل ‪placeholder‬‬
‫به ‪ attributes‬ونستطيع استخدام ي‬
‫‪ :cols -1‬عدد أعمدة ال ـ ‪ textarea‬أي العرض‬
‫‪ :rows -2‬عدد صفوف ال ـ ‪ textarea‬أي الطول‬

‫‪Facebook: fadyalamir77‬‬ ‫|‬ ‫‪LinkedIn: fady-alamir77‬‬ ‫|‬ ‫‪GitHub: fadyalamir‬‬

 ‫ن‬
‫نستطيع التحكم بمساحة ال ـ ‪ Textarea‬يف صفحة ال ـ ‪ Web‬عن طريق طرف ال ـ‬
‫ن‬
‫اليمي باألسفل‬ ‫‪ Textarea‬من‬

‫ً‬
‫ملحوظة‪ :2‬الطريقة السليمة لتنسيق ال ـ ‪ Textarea‬باستخدام لغة ال ـ ‪ CSS‬مستقبال‬
‫وليس باستخدام ال ـ ‪cols, rows‬‬
‫‪#31 – Form Part 8 - File, Search, URL, Time‬‬
‫‪ :file -1‬هو قيمة لل ـ ‪ value attribute‬داخل ال ـ ‪ <input> Tag‬تستخدم إلرسال ملفات‬
‫مثل صورة‪ ،‬فيديو‪ CV ،‬مع بيانات ال ـ ‪form‬‬

‫ن‬
‫ملحوظة‪ :‬يف صفحات ال ـ ‪ Web‬يقوم بالتعديل ي‬
‫عىل شكل ال ـ ‪ file type‬باستخدام ال ـ ‪CSS‬‬
‫‪ :search -2‬هو قيمة لل ـ ‪ value attribute‬داخل ال ـ ‪ <input> Tag‬تقوم بعمل حقل‬
‫ن‬
‫اليمي ألفراغ الحقل‬ ‫عىل‬
‫فارغ لل ـ ‪ search‬وبه ‪ x‬ي‬

‫‪ :url -3‬هو قيمة لل ـ ‪ value attribute‬داخل ال ـ ‪ <input> Tag‬يقوم بعمل حقل‬

‫إلستقبال رابط ‪ Link‬فقط وال يقبل ‪Text‬‬

‫‪Facebook: fadyalamir77‬‬ ‫|‬ ‫‪LinkedIn: fady-alamir77‬‬ ‫|‬ ‫‪GitHub: fadyalamir‬‬

 ‫ملحوظة‪ :2‬حقل ال ـ ‪ url‬ال يقبل إال رابط ‪Link‬‬

‫‪ :date -3‬هو قيمة لل ـ ‪ value attribute‬داخل ال ـ ‪ <input> Tag‬يقوم بعمل حقل‬

‫إلدخال التاريـ ــخ (يوم‪/‬شهر‪/‬سنة)‬

‫ن‬
‫ملحوظة‪ :3‬قبل وجود ال ـ ‪ date type‬يف ال ـ ‪ input‬كان ر‬
‫المبمج يقوم بعملها بال ـ‬
‫‪ JavaScript‬بواسطة مكتبات وهكذا‬
‫‪ :month -4‬هو قيمة لل ـ ‪ value attribute‬داخل ال ـ ‪ <input> Tag‬يقوم بعمل حقل‬
‫إلدخال التاريـ ــخ (شهر‪/‬سنة) فقط‬

‫‪ :Time -5‬هو قيمة لل ـ ‪ value attribute‬داخل ال ـ ‪ <input> Tag‬يقوم بعمل حقل‬

‫إلدخال التاريـ ــخ (يوم‪/‬شهر‪/‬سنة)‬

‫‪Facebook: fadyalamir77‬‬ ‫|‬ ‫‪LinkedIn: fady-alamir77‬‬ ‫|‬ ‫‪GitHub: fadyalamir‬‬

‫‪#32 – Form Part 9 - Data List, Novalidate, Target‬‬
‫‪ :novalidate -1‬هو ‪ attribute‬داخل ال ـ ‪ <form> Tag‬يقوم بإلغاء ال ـ ‪ validate‬من‬
‫ً‬
‫حقول اإلدخال الموجودة بال ـ ‪ form‬عندما نقوم بإرسال بيانات الحقول نحتاج إليها غالبا‬
‫ن‬
‫يف مرحلة ال ـ ‪ Testing‬للتأكد من عمل الصفحة والحقول‬

‫لك تقوم‬
‫‪ _blank‬ي‬ ‫‪ :target -2‬هو ‪ attribute‬داخل ال ـ ‪ <form> Tag‬نعطيها قيمة‬
‫ن‬ ‫ن‬
‫بإرسال البيانات يف صفحة جديدة وترك الصفحة القديمة بالبيانات يف حقول االدخال‬

‫ه قائمة بيانات نقوم بإنشائها عن طريق ‪ list attribute‬داخل‬‫‪ :Data List -3‬ي‬
‫ال ـ ‪ <input> Tag‬ومن ثم نقوم بإنشاء ال ـ ‪ List‬عن طريق ‪ <datalist> Tag‬داخل‬
‫ال ـ ‪ <form> Tag‬وربطهم بواسطة ال ـ ‪ id attribute‬وداخل ال ـ ‪ <datalist> Tag‬يوجد‬
‫نفس ال ـ ‪ <option> Tag‬الموجودة داخل ال ـ ‪ <select> Tag‬ولكن بدون ‪closing Tag‬‬
‫وال ـ ‪ choose‬يوضع كقيمة لل ـ ‪ value attribute‬الموجودة داخل ال ـ ‪<option> Tag‬‬

‫‪Facebook: fadyalamir77‬‬ ‫|‬ ‫‪LinkedIn: fady-alamir77‬‬ ‫|‬ ‫‪GitHub: fadyalamir‬‬

 ‫ملحوظة‪ :‬ما ن‬
‫يمب ال ـ ‪ Data List‬عن ال ـ ‪ select‬يمكن الكتابة بداخلها والبحث عن‬
‫محتوايات ال ـ ‪List‬‬

‫‪#33 – Q, BlockQuote, Wbr, Bdi, Button‬‬

‫ن‬
‫عالمتي ‪ quotes‬قبل وبعد ال ـ ‪Text‬‬ ‫‪ :q element -1‬أي ‪ quote‬او اقتباس تقوم بعمل‬
‫وهو ‪inline element‬‬

‫ن‬
‫عالمتي ‪ ،quotes‬ولكن ‪block element‬‬ ‫‪ :blockquote -2‬اقتباس بدون‬

‫ن‬
‫‪ :button -3‬هو زر نقوم انشاءه بواسطة لغة ‪ HTML‬ولكن نعطيه وظيفة يف صفحة‬
‫ال ـ ‪ Web‬بواسطة لغة ال ـ ‪JavaScipt‬‬

‫‪ :wbr -4‬أي ‪ Word Break Opportunity‬من خالله نستطيع أن نحدد ال ـ ‪ Text‬أو‬

‫ن‬
‫‪ Link‬يحدث له ‪ break‬من أي جزء يف السطر‬

‫‪Facebook: fadyalamir77‬‬ ‫|‬ ‫‪LinkedIn: fady-alamir77‬‬ ‫|‬ ‫‪GitHub: fadyalamir‬‬

 ‫ يقوم بعزل عنرص عن اتجاه محتوي الصفحة‬Bi-Directional Isolation ‫ أي‬:bdi -5
left to right, right to left

#34 – iFrame, Pre, Code

‫ داخله إلظهار الكود بشكله‬Computer Code ‫ نقوم بكتابة ال ـ‬element ‫ هو‬:code -1
ً
CSS ‫ ومستقبال نستطيع تنسيقه بواسطة ال ـ‬Syntax ‫المنظم وال ـ‬

‫ يحافظ ي‬element ‫ هو‬preformatted text ‫ أي‬:pre -2

‫عىل المسافات المكتوبة‬
‫شء داخله‬‫ر‬
‫بداخله أو أي ي‬

Facebook: fadyalamir77 | LinkedIn: fady-alamir77 | GitHub: fadyalamir

 ‫ن‬
‫‪ :iframe -3‬هو ‪ element‬من خالله نستطيع انشاء ‪ box‬يف صفحة ال ـ ‪ web‬من خالله‬
‫نستطيع تصفح صفحة ‪ web‬أخري‬

‫ن‬
‫ويوجد به ‪ attributes‬مثل ال ـ ‪ width, height‬للتحكم يف العرض واألرتفاع‬
‫ملحوظة‪ :‬يوجد بعض صفحات ال ـ ‪ web‬ال تستجيب للـ ‪iframe‬‬

‫‪#35 – Accessibility Intro‬‬

‫ن ن‬
‫القواني يف صفحة‬ ‫‪ :Accessibility -1‬أي إمكانية الوصول ي‬
‫وه عبارة عن مجموعة من‬
‫ال ـ ‪ Web‬لتحديد إمكانية الوصول للمحتوي مثل الشخص الخفيف كال ـ ‪voice over‬‬
‫تسم ‪ Lighthouse‬داخل ال ـ ‪ Developer Tools‬تظهر ‪ report‬عن كل‬
‫ي‬ ‫‪ -2‬يوجد ‪Tab‬‬
‫مشاكل الصفحة‬

‫‪Facebook: fadyalamir77‬‬ ‫|‬ ‫‪LinkedIn: fady-alamir77‬‬ ‫|‬ ‫‪GitHub: fadyalamir‬‬

‫‪#36 – ARIA And Screen Readers‬‬
‫‪ :Accessible Rich Internet Applications (ARIA) -1‬أي إمكانية لتطبيق انبنت‬
‫غت بالمحتوي‬ ‫ن‬
‫ي‬
‫‪ :Screen Reader -2‬مثل برنامج ‪JAWS‬‬
‫ملحوظة‪ :‬ال ـ ‪ Accessibility‬من ال ـ ‪ Developer Tools‬ال تقوم بعرض مشاكل ال ـ‬
‫ً‬ ‫ن‬
‫‪ Accessibility‬فقط‪ ،‬ولكن تقوم بعرض اخطاء التصميم يف الصفحة ايضا‬

‫ن‬
‫‪ -3‬ال ـ ‪ :Contrast Ratio‬أي مدي تباين ال ـ ‪ text‬يف صفحة ال ـ ‪ Web‬من مشاكل او اخطاء‬
‫ً‬
‫ال ـ ‪ Accessibility‬ايضا‬

‫ن‬
‫ملحوظة‪ :2‬يف بعض الحاالت نحتاج ان نقوم بعمل عنرص يؤدي سلوك عنرص أخر‬
‫باستخدام ال ـ ‪ JavaScript‬أو بعض ال ـ ‪attributes‬‬

‫ن‬
‫تعط ال ـ ‪Screen Reader‬‬
‫ي‬ ‫هذه ال ـ ‪ attributes‬تفيد يف ال ـ ‪ Screen Reader‬ألنها‬
‫المعلومات الناقصة عن ال ـ ‪ element‬مثل ال ـ ‪ <div> Tag‬لك يستطيع التنقل ن‬
‫بي‬ ‫ي‬
‫ال ـ ‪ elements‬داخل صفحة ال ـ ‪Web‬‬
‫‪#37 – The End And What To Do‬‬
‫‪View The Video‬‬

‫‪Facebook: fadyalamir77‬‬ ‫|‬ ‫‪LinkedIn: fady-alamir77‬‬ ‫|‬ ‫‪GitHub: fadyalamir‬‬