‫‪1‬‬

‫اوال لغة الـ ‪HTML‬‬

‫يمكن كتابة اكواد ال ‪ Html‬فى احدى تطبيقات ‪ Komodo‬او ‪ Notepad‬او ‪ Sublime‬او ‪ brackets‬وغيرها‬ ‫‪‬‬
‫النشاء صفحة ‪ html‬يتم فتح ال ‪ Komodo‬وكتابة وسم تعريفى للصفحة وهو <!‪ >DocType HTML‬وهنا نعرف الصفحة على انها‬ ‫‪‬‬
‫من نوع ‪ HTML5‬ثم نبدا بالوسم <‪ >HTML‬ويكون شكل الصفحة كالتالى‬

‫>‪<Html‬‬
‫>‪<Head‬‬
‫>‪</Head‬‬
‫>‪<Body‬‬
‫>‪</ Body‬‬
‫>‪</Html‬‬
‫أ ‪ -‬وسم الـ <‪>head‬‬
‫يمكن عرض معلومات حول الصفحة ومحتواها مثل العنوان الكاتب ‪ -‬وصف الصفحة وترميزها ‪Encoding‬‬ ‫‪‬‬
‫لتغيير عنوان الصفحة <‪>title>This is my frist page</title‬‬ ‫‪‬‬
‫لتحديد كاتب الصفحة < ‪>/"meta name="Auther" content ="amir‬‬ ‫‪‬‬
‫لعمل وصف للصفحة < ‪"/"mete name ="description" content ="maintenance Job Orders‬‬ ‫‪‬‬
‫لعمل ترميز للصفحة <‪>/"meta charset="utf-8‬‬ ‫‪‬‬
‫ترتيب اجراءات وسم ال <‪ >head‬هى كالتالى ‪ meta‬ثم ال ‪ title‬ثم ‪ style‬ثم ‪ Link‬ثم ‪ script‬و مثال على كل منهم‬ ‫‪‬‬
‫>‪<meta charset="utf-8"/‬‬
‫>‪<title> This is my frist page </title‬‬
‫>‪<style> p { color:red } </style‬‬
‫>‪<link rel="stylesheet" href="style.css"/‬‬
‫>‪<script> alert("welcome") </script‬‬
‫ونالحظ ان اغالق ال ‪ meta‬يكون ب ‪ >/‬حيث انها من االوسمة االحادية مثل ال <‪ >/br‬حيث ان القيم الخاصه بها هى عبارة عن‬ ‫‪‬‬
‫‪ Attributes‬اى خصائص وصفات مثل ال ‪ #void in c‬اي ان كل خاصيىة (‪ )name‬امامها قيمتها ("‪)"description‬‬
‫معلومات ال ‪ meta‬مهمه عند البحث عن مشروعى فى محركات البحث‬ ‫‪‬‬
‫ممكن نغير ايقونة الصفحة من خالل الوسم <‪ >link‬كالتالى‪:‬‬ ‫‪‬‬
‫>‪<link rel="icon" href="main.ico"/‬‬

‫ب ‪ -‬وسم الـ <‪>body‬‬

‫هو وسم يحتوى على محتوى الصفحة فهو جسم الصفحة ونضع داخلة كل شي مثل‬ ‫‪‬‬
‫‪ Headings‬او عنوان كالتالى <‪ >h1>heading 1</h1‬وتتدرج العناوين من ‪ h1‬الى ‪ h6‬تدرجا لالصغر فى الحجم‬ ‫‪‬‬
‫‪ Paragraphs‬او الفقرات كالتالى<‪>p> this is a pharagraph < /p‬‬ ‫‪‬‬
‫لعمل سطر جديد نستخدم الوسم االحادى <‪>/br‬‬ ‫‪‬‬
‫للكتابه بخط سميك <‪>b> bold font </b‬‬ ‫‪‬‬
‫للكتابة بخط تحت الكلمة <‪>u> underline word </u‬‬ ‫‪‬‬
‫للكتابة بخط مائل <‪>i> italic word </i‬‬ ‫‪‬‬
‫لرسم خط وهو وسم احادى <‪>/hr‬‬ ‫‪‬‬
‫النشاء كومنت <!‪ >-- this is comment--‬ولعمل كومنت داخل الكومودو نحدد الكلمات ثم نضغط ‪CTRL + 3‬‬ ‫‪‬‬
‫‪ Images‬وهى من االوسمة االحادية فهى تمثل داله جاهزة مثل ‪ #void in c‬ونعرفها كالتالى‬ ‫‪‬‬
‫>‪<img src="c://a.jpg" alt="amir logo" width ="100" height ="200"/‬‬
‫ال ‪ src‬هو مصدر الصورة و ال ‪ alt‬هو ‪ alternativeText‬او النص البديل فى حالة عدم تحميل الصورة‬ ‫‪‬‬
‫لو الصورة فى نفس مسار الصفحة الحالية المفتوحه تكون قيمة ال ‪ href‬كالتالى " ‪ "am.jpg‬واذا كانت فى فولدر بعد الصفحة الحالية‬ ‫‪‬‬
‫تكون قيمة ال ‪ SCR‬كالتالى " ‪ " images/am.jpg‬واما اذا كانت فى فولدر سابق للصفحة الحالية فتكون كالتالى "‪ "am.jpg/..‬حيث‬
‫النقطتين تعنى الرجوع خطوه للخلف وممكن بدل الصورة من عالجهاز ‪:‬نضع صورة من على موقع مثل صورة جوجل‬
 ‫‪2‬‬

‫‪ Lists‬اللوائح او القوائم وهى نوعان مرقمة‪ >Ordered List <ol‬او مرمزه ‪ >UnOrdered List <ul‬و ‪>Decription List <dl‬‬ ‫‪‬‬
‫وتعريفهم كالتالى‬

‫>‪<p> This is Ordered Programming Books </p‬‬

‫>‪<ol‬‬
‫‪<li>C Sharp Book‬‬
‫>‪<ul‬‬
‫>‪<li>c Sharp 1</li‬‬
‫>‪<li>c Sharp 2</li‬‬
‫‪</ul‬‬
‫>‪</li‬‬
‫>‪<li> VB Book </li‬‬
‫>‪</ol‬‬
‫>‪<p> This is Unordered animal List </p‬‬
‫>‪<ul‬‬
‫>‪<li> Lion </li‬‬
‫>‪<li> dog </li‬‬
‫>‪</ul‬‬
‫>‪<p> This is Discription List </p‬‬
‫>‪<dl‬‬
‫>‪<dt> Html </dt‬‬
‫>‪<dd> fast </dd‬‬
‫>‪<dd> easy </dd‬‬
‫>‪<dt> css </dt‬‬
‫>‪<dd> very fast </dd‬‬
‫>‪<dd> veryeasy </dd‬‬

‫>‪</dl‬‬

‫حيث ال <‪ >li‬هى اختصار لـ ‪ List Item‬و <‪ >dt‬هى ‪ Descriped thing‬والـ ‪ dd‬هى ‪ Description Definition‬ويمكن‬
‫ايضا عمل ‪ List‬داخل ‪ List‬كما بالمثال‬
‫‪ Hyper Links‬االرتباطات التشعبية لفتح موقع معين مثل جوجل او للذهاب الى جزء اسفل الصفحة مثال وتعريفه كالتالى‬ ‫‪‬‬

‫>‪<a href="http:/www.google.com" target ="_blank">Google Website </a‬‬

‫الخاصية ‪ Target‬لها قيمتان مهمتان هما _‪ blank‬للفتح فى تبويب جديد و _‪ self‬للفتح فى نفس التبويب‬ ‫‪‬‬
‫وللذهاب الحد العناوين الداخلية للصفحة‬ ‫‪‬‬
‫نقوم باعطاء الخاصية ‪ id‬قيمة للوصول اليها لكل من ‪ >image - paragraph – Lists - <Div‬وغيرها مثل‬ ‫‪‬‬
‫>‪<p id ="headingsss">Headings</p‬‬
‫نقوم بعمل ربط على ال‪ headingsss‬حيث يمكن وضع مجموعه من العناوين فى < ‪ ol> list‬كالتالى‬ ‫‪‬‬
‫>‪<a href="#headingsss">Go To Headings </a‬‬
‫وسم <‪ >span‬نستخدمه لتنسيق كلمة واحدة داخل فقرة او ما شابه‬ ‫‪‬‬
‫وسم <‪ >b‬يجعل النص ‪ bold‬ونفس الوظيفة يؤديها الوسم <‪ >strong‬ولكن الفرق هو ان كلمة ‪ strong‬معبرة عن التأثير الذى سيحدث‬ ‫‪‬‬
‫وسم الـ <‪ >i‬لجعل النصوص ‪ italic‬او مائل و ونفس الوظيفة يؤديها الوسم <‪>em‬‬ ‫‪‬‬
‫وسم الـ ‪ BlockQuote‬وهو وسم يعطى تنسيق معين للنص حيث يجعله بمثابة اقتباس ويكون شكلة كالتالى ‪:‬‬ ‫‪‬‬
‫< ‪>blockQuote> This Is A Block Quote</BlockQuote‬‬ ‫‪‬‬
‫‪bla bla bla <q> amir </q> Bla ba bla‬‬ ‫وسم الـ <‪ >q‬يقوم بوضع النص الذى بداخلة بين عالمتى تنصيص‬ ‫‪‬‬
‫‪blab la<mark>amir</mark>bla blaa‬‬ ‫وسم الـ ‪ Mark‬يقوم بعمل ‪ HighLight‬على النص الذى بداخله‬ ‫‪‬‬
‫‪bla bla<del>this is wrong</del>bla‬‬ ‫وسم الـ ‪ del‬ويقوم بوض خط على النص بداخله اى الجمله خطا‬ ‫‪‬‬
‫‪bla<ins>this is write</ins> bla‬‬ ‫وسم الـ‪ ins‬وهو تصحيح للنص الموجود بالوسم ‪del‬‬ ‫‪‬‬
‫وسم الـ ‪ SuperScript‬ويقوم باعالء النص الذى بداخله عن سياق الكالم مث ‪ 2‬اس ‪ 2‬فتكون ‪>sup>2</sup<2‬‬ ‫‪‬‬
‫وسم الـ ‪ sub‬ويستخدم لخض النص الذى بداخلة مثل ‪ H2O‬ال ‪ 2‬يكون صغيرة باالسف فتكون ‪H₂O‬‬ ‫‪‬‬
 ‫‪3‬‬

‫وسم الـ <‪ >table‬النشاء جدول ويكون الشكل العام له كالتالى ‪:‬‬ ‫‪‬‬

‫>‪<table‬‬
‫>‪<caption>table address</caption‬‬
‫>‪<tr‬‬
‫>‪<td>JobNo</td‬‬
‫>‪<td>Job Location</td‬‬
‫>‪</tr‬‬
‫>‪<tr‬‬
‫>‪<td>1112</td‬‬
‫>‪<td>clinics</td‬‬
‫>‪</tr‬‬
‫>‪</table‬‬
‫مالحظات على وسم الـ ‪Table‬‬
‫بشكل افتراضى اول صف هو يعبر عن عناوين االعمده اال اذا استخدمنا وسم <‪ >thead‬او وسم <‪ >th‬وهما يؤديان نفس‬ ‫‪‬‬
‫الوظيفة‬
‫يمكن عمل جدول بعمل عناوين لالعمدة بشكل افقى وعناوين للصفوف بشكل رأسي‬ ‫‪‬‬
‫الهيكل ال صحيح النشاء جدول كالتالى‬
‫>‪<table‬‬
‫>‪<thead‬‬
‫>‪<tr‬‬ ‫طالمـــا تم عمـــل وســـم خـــاص بـــراس الجـــدول وهو<‬
‫>‪<td> jobno </td‬‬ ‫‪ >thead‬فعند وضعه فى اى مكان داخــل ال <‪>body‬‬
‫>‪<td>job location</td‬‬ ‫فأن المحرر يفهم ان هذا هو عناوين الجدول وكــذلك مــع‬
‫>‪</tr‬‬
‫الـ<‪ >tbody‬و الـ <‪>tfoot‬‬
‫>‪</thead‬‬
‫>‪<tbody‬‬
‫>‪<tr> <td> 123 </td> <td>clinic 1 </td> </tr‬‬
‫>‪<tr> <td> 124 </td> <td>clinic 2 </td> </tr‬‬
‫>‪</tbody‬‬
‫>‪<tfoot‬‬
‫>‪<tr> <td> 124 </td> <td>clinic 3 </td> </tr‬‬
‫>‪</tfoot‬‬
‫>‪</table‬‬
‫وهنا يمكن عمل تنسيق للجدول بتنسيق الـ ‪ thead‬و ‪ tbody‬و ‪ tfoot‬بوضع تنسيقاتهم فى الوسم العام للتنسيق <‪ >style‬كالتالى‬
‫>‪<style‬‬
‫}‪Thead td {font-weight : bold ; text-align : center‬‬
‫}‪Tbody td {font-weight : bold ; text-align : center‬‬
‫}‪Thead td {font-weight : bold ; text-align : center‬‬
‫>‪</style‬‬
‫وسم الـ ‪ colspan‬وكلمة ‪ span‬تعنى مدي او امتداد وهنا نقوم بدمج خليتى عمودين ومثال عليه‬ ‫‪‬‬
‫>‪<tr‬‬
‫>‪<td colspan="2">descktop develop</td‬‬ ‫الـ ‪ colspan= 2‬تعنى ان الخليه ‪desktop develop‬‬
‫>‪<td>web develop</td‬‬ ‫سوف تأخذ مكان اول خليتين الول عمودين لذلك تم عمل‬
‫>‪</tr‬‬ ‫عدد‪ 2‬من الـ ‪ td‬فى الـ ‪ tr‬االول وعــدد ‪ 3‬من الـ ‪ td‬فى‬
‫>‪<tr‬‬ ‫الـ ‪ tr‬الثانى حيث شكل الجدول هيكون كالتالى‬
‫>‪<td>C# Lang</td‬‬
‫>‪<td>VB Lang</td‬‬
‫>‪<td>Asp.Net</td‬‬ ‫‪descktop develop‬‬ ‫‪web develop‬‬
‫>‪</tr‬‬ ‫‪C# Lang‬‬ ‫‪VB Lang‬‬ ‫‪Asp.Net‬‬

‫وسم الـ ‪ rowspan‬اى عمل دمج لخليتى صفين متتاليين فمثال عند تسجيل بيانات شخص وله رقمى هاتف‬ ‫‪‬‬
‫>‪<tr‬‬
‫>‪<td>Cust Name</td‬‬
‫>‪<td>Cust Mob</td‬‬
 ‫‪4‬‬ ‫الـ ‪ rowspan = 2‬تعنى ان الخليه ‪ Amir‬سوف تأخذ مكان اول‬
‫خليتين الول عمود (اى الول خلتى اول صفين) لذلك تم عمل عــدد‬
‫>‪</tr‬‬ ‫‪ 2‬من الـ ‪ td‬فى الـ ‪ tr‬االول وعــــــدد ‪ 1‬من الـ ‪ td‬فى الـ ‪ tr‬الن‬
‫>‪<tr‬‬ ‫اول ‪ td‬موجــــوده بالفعــــل ومكتــــوب فيهــــا ‪amir‬لوجــــود الـ‬
‫>‪<td rowspan="2">Amir</td‬‬
‫‪ rowspan‬حيث شكل الجدول هيكون كالتالى‬
‫>‪<td>01003184831</td‬‬
‫>‪</tr‬‬ ‫‪Cust name‬‬ ‫‪Cust mob‬‬
‫>‪<tr‬‬ ‫‪01003184831‬‬
‫‪Amir‬‬
‫>‪<td>01004936349</td‬‬ ‫‪01004936349‬‬
‫>‪</tr‬‬ ‫ولو هنسجل ‪ 3‬ارقام موبايل هنعمل ‪rowspan=3‬‬

‫الخاصية ‪ class‬ونقوم باعطائها قيمه مثال ‪ test‬الكثر من ‪ div‬مثال وذلك لتنسيقهم مره واحده حيث نتعامل مع الكالس ‪ test‬فى‬ ‫‪‬‬
‫وسم <‪>style‬‬
‫>‪<div class="test">this amir div</div‬‬
‫>‪<div class="test">this ahmed dev</div‬‬
‫>‪<div class="test2">this zohier div</div‬‬ ‫بالمناسبه الفرق بين الخواص ‪ class‬و ‪id‬‬
‫>‪<div class="test2">this adam div</div‬‬ ‫‪ : Class‬هو اسم ُيعطى لمجموعة اوسمه إدخالية‬ ‫‪‬‬
‫‪----And In <style> Tag Write----‬‬ ‫لتنسيقها مره واحده كما بالمثال‬
‫>‪<style‬‬ ‫‪ : Id‬هو اسم يعطى لالوسمه من اجل عمل ‪ href‬او‬ ‫‪‬‬
‫}‪.test{color : white ; background :red‬‬ ‫االرتباطات التشعبية الداخليه‬
‫}‪.test2{color : blue ; background :red‬‬
‫>‪</style‬‬
‫انشاء ‪ form‬وتكون داخل وسم الـ <‪ > body‬يوجد بها نماذج ادخال مثل الليبول والبوتون والتيكست بوكس والكومبو وهكذا‬ ‫‪‬‬

‫>"‪<form name ="LogInFrm‬‬

‫الوسم ‪ input‬يقوم بانشاء ادوات إدخالية وهو وسم احادى‬
‫>‪<label>Enter Username</label‬‬ ‫الوسم ‪ label‬يستخدم النشاء ملصق او ليبول‬
‫>"‪<input type="text" name="text1‬‬ ‫انشاء ‪textbox‬‬
‫>‪<br‬‬
‫>‪<label>Enter Pasword</label‬‬
‫>"‪<input type="password" name="text2‬‬ ‫انشاء ‪ textbox‬ولكن االدخال على هيئه نجوم النها كلمة مرور‬
‫>‪<br‬‬
‫>"‪<input type="checkbox‬‬ ‫انشاء ‪checkbox‬‬
‫>‪<label>Remember Me</label‬‬
‫>‪<br‬‬
‫>"‪<input type="submit" value="signIn‬‬ ‫‪ُ Submit‬ي رسل بيانات الصفحة الحاليه الى الصفحة التالية‬
‫"‪<input type="button" value="hello" name="btn1‬‬ ‫‪ Button‬يقوم بعمليات تفاعليه مع الصفحة بالتعامل مع االحداث‬
‫>"‪<input type="reset‬‬ ‫يقوم بتفريغ جميع ادوات الفورم‬
‫>‪<label>Upload Your File</label‬‬
‫>"‪<input type="file‬‬ ‫يقوم بانشاء ‪ file dialog‬الختيار ملف‬
‫>"‪<input type="image" src="/image path‬‬
‫>"‪<input type="radio" name="Type" value="type1‬‬ ‫عند وجود قيمة واحده لخاصية الـ ‪ name‬فهذا يعنى انها تشكله يتم‬
‫>"‪<input type="radio" name="Type" value="type2‬‬ ‫االختيار من بينها فهذه تشكيلة انواع المستخدمين‬
‫>"‪<input type="radio" name="Jobs" value="Job1‬‬ ‫هذه تشكيله الوظائف لالختيار من بينها‬
‫>"‪<input type="radio" name=" Jobs" value="Job2‬‬
‫>‪</form‬‬
‫وسم لرسم مستطيل حول مجموعه ادوات اى مثل ال ‪ groubBox‬فى السي شارب ويكون داخل وسم ال <‪ >form‬كالتالى‬ ‫‪‬‬

‫>‪<fieldset‬‬
‫>‪<legend>Enter Your Name</legend‬‬
‫>‪<label>Eneter Your Name</label‬‬
‫>"‪<input type="text" name="text1‬‬ ‫الـ ‪ legend‬تعنى عنوان ال‪fieldset‬‬
‫>‪</fieldset‬‬

‫الـ ‪ SelectBox‬او ما يعرف سابقا بالـ ‪ Combobox‬والهيكل العام له كالتالى ‪:‬‬ ‫‪‬‬

‫>‪<select name=combo1‬‬
 ‫‪5‬‬

‫>‪<option>item1</option‬‬
‫>‪<option>item2</option‬‬
‫>‪<option>item3</option‬‬
‫>‪</select‬‬
‫بعض المالحظات على الـ ‪ select‬او الكومبو ‪:‬‬

‫لو كتبت الخاصية ‪ disabled‬هتكون االداء غير مفعله لحين تفعيلها‬ ‫‪‬‬
‫خاصية ال ‪ " size="2‬يعنى عدد العناصر التى يتم عرضعها للشاشة للمره االولى يعنى ممكن اخليها ‪listbox‬‬ ‫‪‬‬
‫لو كتبت الخاصيه ‪ multiple‬هنا نستطيع اختيار اكثر من عنصر بالضغط على مفتاح الكي بورد ‪ctrl‬‬ ‫‪‬‬
‫يمكن عمل ايضا الخواص ‪ disabled‬للوسم <‪ >option‬بحيث نجعل الـعنصر غير مفعل وال يمكن اختيارة‬ ‫‪‬‬
‫الخاصياه ‪ selected‬للوسم <‪ >option‬تعنى عمل اختيار افتراضى للعنصر‬ ‫‪‬‬
‫يمكن عمل ‪ group‬لمجموعة ‪ options‬كالتالى‬ ‫‪‬‬

‫>"‪<optgroup label="item 1 and 2‬‬

‫>‪<option>item1</option‬‬
‫>‪<option>item2</option‬‬
‫>‪</optgroup‬‬
‫>"‪<optgroup label="item3‬‬
‫>‪<option>item3</option‬‬
‫>‪</optgroup‬‬
‫كما يمكن عمل الخاصيه ‪ disabled‬لـ ‪Optgroup‬‬ ‫‪‬‬

‫‪ Iframe‬هو عرض موقع خارجى داخلى صفحتى ويكون الشكل العام له كالتالى‬ ‫‪‬‬
‫>‪<iframe name="google" src=www.google.com></iframe‬‬

‫الـ ‪ Entities‬وهى االختصارات المحجوزه للغه نفسها فلتفادى حزء محجوز للغة نستخدم عالمة ال &‬ ‫‪‬‬

‫;‪&lt‬‬ ‫‪Result‬‬ ‫< === ‪Less Than Mark‬‬

‫;‪&gt‬‬ ‫‪Result‬‬ ‫> =‪Greater Than Mark‬‬
‫‪&lt;div name="amir"&gt;&lt/div&gt‬‬ ‫‪Result‬‬ ‫>‪<div name="amir"></div‬‬
‫‪&amp‬‬ ‫‪Result‬‬ ‫&‬
‫‪&pound‬‬ ‫‪Result‬‬ ‫‪£‬‬
‫‪&yen‬‬ ‫‪Result‬‬ ‫‪¥‬‬
‫‪&Euro‬‬ ‫‪Result‬‬ ‫‪€‬‬
‫‪&copy‬‬ ‫‪Result‬‬ ‫©‬
‫‪&re‬‬ ‫‪Result‬‬ ‫®‬

‫ثانيا ‪ :‬لغة الـ ‪Html5‬‬

 ‫‪6‬‬

‫بعص العناصر التى سوف تقف فى التحديثات الجديدة ل ‪ html5‬اى العناصر الـ ‪ Deprecated‬والبدائل الخاصة بها‬ ‫‪‬‬
‫‪Deprecated Element‬‬ ‫‪Usage‬‬ ‫البديل‬
‫‪<acronym title="Am-Z">amir‬‬ ‫تستخدم النشاء اختصار معين‬ ‫‪<abbr> from abbreviation‬‬
‫>‪zohier</acronym‬‬
‫>‪<applet‬‬ ‫يستخدم لوضع صورة او ملف صوت او فيديو‬ ‫>‪<object‬‬
‫>‪<basefont‬‬ ‫ويوضع فى وسم ‪ head‬لتعريف الخط المستخدم‬ ‫‪CSS‬‬
‫>‪<big‬‬ ‫وسم لتكبير كلمة معينة‬ ‫>‪<span> - <strong‬‬
‫>‪<center‬‬ ‫لتوسيط العناصر والنصوص‬ ‫‪CSS Fontalign‬‬
‫>‪<dir‬‬ ‫النشاء ‪list box‬‬ ‫>‪<ul> or <ol‬‬
‫>‪<font color="red">a</font‬‬ ‫التحكم فى تنسيق الخطوط‬ ‫‪CSS‬‬
‫>‪<frameset‬‬ ‫الستقطاب موقع خارجى وايضا‬ ‫>‪<Iframe‬‬
‫>‪<strike‬‬ ‫وضع خط وسط الكالم فيما يعنى انه خطأ‬ ‫‪<del> or text-decoration‬‬
‫>‪<tt‬‬ ‫ويعنى نوع الخط ‪TeleTypeText‬‬ ‫‪Css : Font-Family‬‬
‫ولمعرفة باقى العناصر اللى معمول لها ‪ deprecated‬نبحث فى جوجل عن ‪mdn html elements‬‬
‫الـ ‪ Semantics‬وهى العناصر المعرفه من اسمها مثل وسم ال<‪ >img‬فبالتاكيد بداخله صورة ومعروف ان محتواه صورة انما وسم الـ <‬ ‫‪‬‬
‫‪ > div‬هو من مجرد رؤيته فهو غير مفهوم لذلك قامو بتطوير بيئة العمل لكى تكون معبرة من اسمها مثل الوسومات الجديدة مثل‬
‫>‪<header> - <nav> - <article> - <section> - <footer‬‬
‫الـ ‪ Syntax‬اى البنية التحتية للكود او الطرق التى يمكن بها كتابة الكود‬ ‫‪‬‬
‫>‪<img class='cat' src="cat.jpg" title=cat/‬‬
‫يعنى اثناء كتابة الكود ممكن استخدم ‪ single quotation‬او ‪ double quotation‬وممكن ماستخدمش اصال اى ‪quotation‬‬ ‫‪‬‬
‫بس لو في خاصية هتاخد قيمتين او اسم فيه مسافات البد من كتابتهم داخل ‪ single‬او ‪double quotation‬‬ ‫‪‬‬
‫الـ ‪ html5‬تدعم كتابة التاجات بدون غلقها ولكنها طريقة غير محببه نظرا للتنسيق العام ‪ 0‬كالتالى‬ ‫‪‬‬
‫>‪<div‬‬
‫‪<p>hi‬‬
‫‪<p>Amir Zohier Elhendy‬‬
‫تكتب كلمة ‪ doctype‬بهذا الشكل اى حروف صغيرة اذا كنت متأكد ان الصفحة لن يدخل بها كود ‪ xml‬اما اذا كان سيدخل بها كود ‪xml‬‬ ‫‪‬‬
‫فتكتب بحروف كبيره كابيتال كالتالى ‪>DOCTYPE html<:‬‬
‫ممكن انا اللى انشأ الوسومات اللى هستخدمها فمثال ممكن اعمل وسم اسمه <‪ >paydiv‬وانسقة باسمه فى ملف ال‪css‬‬ ‫‪‬‬
‫عشان صفحة ال‪ html‬تشتغل على كل المتصفحات القديمة انك تنشأ العناصر اللى هتستخدمها ففى جزء ‪ script‬هنكتب‬ ‫‪‬‬
‫;)"‪<script>document.createelement("customerpay‬‬
‫وهنا هيقرا فى المتصفحات القديمة النى انشأت العنصر وعرفته عليه‬
‫عشان اعرف المتصفحات القديمة على عناصر الـ ‪ html5‬يوجد ملف اسمه ‪ html5shiv.min.js‬ثم نستدعيه فى وسم ‪script‬‬
‫>‪<script src="html5shiv.min.js"></script‬‬
‫وممكن اعطيه الخاصية ‪ target‬عشان يتحمل لمتصفحات معينه وعنا هنعملة على هيئة كومنت بداخلها جمله ‪if‬‬
‫>]‪<!—[if lt IE9‬‬
‫>‪<script src="html5shiv.min.js"></script‬‬
‫>‪<![endif]--‬‬
‫وسم الـ <‪ >header‬ممكن يكون رأس للـ <‪ >body‬او <‪ >div‬او <‪ >article‬ممكن يكون رأس الى تاج‬ ‫‪‬‬
‫يوجد تاج او وسم اسمه <‪ > main‬ويتم فتحه مره واحده فقط داخل الصفحةويمكن وضع بداخله اى شئ نريده مثل ‪ p – div‬وهكذا وال‬ ‫‪‬‬
‫يمكن وضعه اال داخل وسم ال<‪ >body‬مباشرة‬
‫وسم الـ ‪ aside‬وده ممكن استخدمه لعمل ‪ widget‬للموقع احط فيه لنكات او اى حاجه انا عاوزها وزيه زى ‪ article‬وهكذا‬ ‫‪‬‬
‫الـ ‪ progress bar‬وهو من اسمه شريط التقدم فهو ال يرجع للخلف عكس ال ‪meter‬‬ ‫‪‬‬
‫>‪<progress value="7" max="10"></progress‬‬
‫>"‪<div>cpu is<meter min="0" max"="1" value=".6" low=".4" high=".8 optimum=".5‬‬
‫>‪</meter></div‬‬
‫والخاصية ‪ optimum‬تعنى الوضع االمثل او القيمة المثلي‬

‫وسم ال <‪ > details‬ويستخدم عند الوقوف على كلمة فيظهر مجموعه معلومات وستخدم كالتالى‬ ‫‪‬‬
‫>‪<details‬‬
‫>‪<summary>My Refrences</summary‬‬
‫>‪<ul‬‬
‫>‪<li>Ref 1</li‬‬
‫>‪<li>Ref 2</li‬‬
‫>‪<li>Ref 3</li‬‬
‫>‪</ul‬‬
 ‫‪7‬‬

‫>‪</details‬‬
‫واالفتراضى انها تكون مغلقة ولكن فى حال الرغبة فى فتحها بكود نكتب<‪ >details open‬اثناء تعريفها‬ ‫‪‬‬
‫وسم ال <‪ >mark‬ويقوم بعمل ‪ highlight‬على الجزء من الكالم اللى بداخله كالتالى‬ ‫‪‬‬
‫>‪<div>I love <mark>Html</mark> and Css</div‬‬
‫وممكن اعملها فى ملف ال ‪ css‬تنسيق خاص بها كتغير لون الخلفية والخط واى تنسيق اخر‬ ‫‪‬‬
‫وسم ال <‪ >wbr‬وهى اختصار لـ ‪Word Break Opportunity‬‬ ‫‪‬‬
‫>‪<p>I love<wbr>Html And Css</wbr> Very Much</p‬‬
‫هنا سيقوم بوضع الجمله ‪ html and css‬فى سطر لواحدهم يعنى ‪ wbr‬تفصل الكالم بسطر جديد‬
‫وسم <‪ > figure‬ويتم وضع محتوى بداخله ويستخدم مثال لعمل صور ووضعها بداخله واعطاء ‪ caption‬لها‬ ‫‪‬‬
‫>‪<figure‬‬
‫>‪<img src="car.jpg"/‬‬
‫>‪<figcaption>cat Fig 1</figcaption‬‬
‫>‪</figure‬‬
‫ويجب مالحظة انه لو تم وضع ‪ figcaption‬فوق وسم ‪ img‬سيظهر الكابشن فوق الصورة لو ‪ figcaption‬تحت تعرف ‪ img‬هيبقى تحت‬
‫وسم ال<‪ >time‬وهو عنصر ‪ inline‬يتم كتابتة على نفس السطر ويتم تعريفه كالتالى‬ ‫‪‬‬
‫>‪<time datetime="2014-10-25">oct,25th,2014</time‬‬
‫كتابة تعريف عنصر ال‪ datetime‬بهذه الطريقه يفيد كثيرا فى محركات البحث‬
‫وسم ال<‪ > dialog‬وهو نادؤ االستخدام النه يتم عمله بالجافا سكريبت اسهل واحسن وهو ال يدعم ال ‪ firefox‬وال ‪IE‬‬ ‫‪‬‬
‫وسم ال <‪ > bdi‬وغالبا يستخدم مع اللغه العربية اذا كانت نفس الجمله بها كالمت عربى وانجليزي واتجاه الكالم من الشمال الى اليمين‬ ‫‪‬‬
‫فتظبط مسار الكالم‬
‫>‪</bdi> :50points </div‬على>‪<div> the name<bdi‬‬
‫فال ‪ bdi‬تعزل ما بداخلها عن االتجاه االصلى للجمله وهو غير مدعوم من ‪ opera‬و ‪ safari‬و ‪I-E‬‬

‫عناصر جديده لل<‪>form‬‬ ‫‪‬‬

‫وسم <‪ >datalist‬هو يشبه الكومبو بوكس ولكنه يوفر خاصية ال‪ suggestion‬كالتالى‬ ‫‪‬‬
‫>‪<form‬‬
‫>"‪<input list="browsers‬‬
‫>"‪<datalist id="browsers‬‬
‫>"‪<option value="chrome‬‬
‫>"‪<option value="safari‬‬
‫>"‪<option value="opera‬‬
‫>‪</datalist‬‬
‫>‪</form‬‬
‫وسم ال <‪ >output‬ويستخدم الظهار ناتج لعملية حسابية داخل الفورم‬ ‫‪‬‬
‫>"'‪<form OnInput="result.value=parseInt<age.value* parseInt(days.value) +' days‬‬
‫>"‪< input type=text name="age‬‬
‫>"‪< input type="hidden" name="days" value="365‬‬
‫>‪< output name="result"></output‬‬
‫>‪</form‬‬

‫وسم الـ <‪>audio‬‬ ‫‪‬‬

‫>"‪<audio controls autoplay loop muted preload="none‬‬
‫"‪<source src="12.mp3" type="audio/mpeg‬‬
‫"‪<source src="12.ogg" type="audio/ogg‬‬
‫‪Your brouser doesnot support this type‬‬
‫>‪</audio‬‬
‫فى وسم ال ‪ source‬بنكتب اكتر من نوع عشان يتوافق مع جميع المتصفحات والرساله(‪ )your browser‬تظهر فى‬ ‫‪‬‬
‫حالة عدم تحميل الملف‬
‫وال‪ Preload‬تعنى عاوز المشغل يعمل ايه يحمل الملف عند العميل وال يستعنى على ما العميل يشغله وال يعمل ايه‬ ‫‪‬‬
‫وسم الـ <‪>video‬‬ ‫‪‬‬
‫>"‪<video controls width="320" height="300" loop muted poseter="cat.jpg‬‬
 ‫‪8‬‬

‫"‪<source src="12.mp4" type="video/mp4‬‬

‫"‪<source src="12.ogg" type="video/ogg‬‬
‫"‪<source src="12.webm" type="video/webm‬‬
‫‪Your brouser doesnot support this type‬‬
‫>‪</video‬‬
‫وسم ال<‪ >color‬الظهار باليته االلوان وهو غير مدعوم من ‪ I=E‬وسفاري‬ ‫‪‬‬
‫>‪<input type="color" name"choosecolor" value="#0000ff‬‬
‫لعمل ‪ range‬او خط مسطر الختيار قيمة بتاخله مث ال اللى بيعلى ويوطى الصوت‬ ‫‪‬‬
‫>"‪<input type="range" name="choserange" min="0" max="10" step="1" value="2‬‬
‫لعمل مدى رقمى لالختيار منه‬ ‫‪‬‬
‫>"‪<input type="number" name="chosno" min="0" max="10" step="1" value="2‬‬
‫عمل تكست ادخال على شكل ايميل وتتحقق منه لواحدها اثناء الضغط على مفتاح ‪submit‬‬ ‫‪‬‬
‫>"‪<input type="email" name ="mail‬‬
‫عمل تيكست كصندوق بحث‬ ‫‪‬‬
‫>"‪<input type="search" name ="txtsearch‬‬
‫عمل تيكست الدخال ويب سايت وهو ال يدعم سفاري‬ ‫‪‬‬
‫>"‪<input type="url" name="txturl‬‬
‫النشاء ادخال من نوع وقت‬ ‫‪‬‬
‫>"‪<input type="time" name="timing‬‬
‫الدخال حقل من نوع تاريخ‬ ‫‪‬‬
‫>"‪<input type="date" name="dating‬‬
‫النهاء حقل من نوع شهر‬ ‫‪‬‬
‫>"‪<input type="month" name="monthing‬‬
‫النشاء حقل من نوع اسبوع وهى بتحدد انه مثال االسبوع ال‪ 39‬لسنة ‪ 2018‬مثال‬ ‫‪‬‬
‫>"‪<input type="week" name="weeking‬‬

‫بعض اال ‪attributes‬‬ ‫‪‬‬

‫لتحديد خاصية ال ‪ disable‬بنكتب‬ ‫‪‬‬
‫>‪<input type="text disabled/‬‬
‫>‪<input type="text disabled="disabled"/‬‬
‫ممكن اعمل حقل من نوع ‪ required‬اى حقل مطلوب عند الضغط على مفتاح ‪submit‬‬ ‫‪‬‬
‫>‪<input type="text required/‬‬
‫>‪<input type="text required="required"/‬‬
‫وممكن الغى موضوع ال ‪ validation‬من على الفورم اثناء تعريفها بحيث عند الضغط على مفتاح ‪ submit‬ال يقوم بعمل ‪validing‬‬ ‫‪‬‬
‫على االدوات كالتالى <‪>form novalidate‬‬
‫ال ‪ action‬ومعناها انها هتاخد البيانات من الفورم الحالية الى الصفحة المحدد فى ال ‪ action‬كالتالى‬ ‫‪‬‬
‫>"‪<form action="joborders.php‬‬
‫ال ‪ method‬وهى طريقة ارسال البيانات الى الصفحات على السيرفرولها قيمتان‬ ‫‪‬‬
‫‪ "Method="get‬وهنا بتنقل البيانات مع وضعها فى لينك الصفحى‬ ‫‪‬‬
‫‪ " Method="post‬وهنا هتنقب البيانات فى جسم الصفحة مع عد اظهارها اثناء نقل البيانات‬ ‫‪‬‬
‫وممكن اثناء انشاء العناصر على الفورم نحدد للفورم من خالل العنصر طريقة ارسال البيانات والصفحة الموجه لها البيانات كالتالى‬ ‫‪‬‬
‫>‪<input type="submit" formaction=others.php" formmethod="get"/‬‬
‫عشان انقل مجموعه بيانات معينه من صفحة الى صفحة اخري بضعهم داخل فورم ومعاهم مفتاح ال ‪ submit‬واى عنصر خارج هذه‬ ‫‪‬‬
‫الفورم لن يتم ارسالها‬
‫وعشان ابعت بيانات اداه خارج الفورم بعمل للفورم ‪ id‬وبعرف االداه على الفروم عشان اخليها من عناصر الفورم كالتالى‬ ‫‪‬‬
‫>"‪<form id="MainForm‬‬
‫>"‪<Input type="text name="text1‬‬
‫>"‪<input type="submit" name="submit1‬‬
‫>‪</form‬‬
‫>"‪<input type="text" name ="text2" form="MainForm‬‬
‫ممكن اخلى مفتاح ال ‪ submit‬يعمل ‪ novalidate‬كالتالى‬ ‫‪‬‬
‫>‪<input type="submit" name="submit1" formnovalidate/‬‬
‫وممكن اخلى مفتاح ال ‪ submit‬يفتح الصفحة المراد فتحها فى تبويب جديد كالتالى‬ ‫‪‬‬
‫>‪<input type="submit" name="submit1" formtarget="_blank"/‬‬
‫‪ PlaceHolder‬يقوم بوضع توضيح على االداه لتسهيل عمليه االدخال من جانب المستخدم وتستخدم مع الحقوم النصية اى من نوع‬ ‫‪‬‬
‫‪text‬‬
‫>‪<input type=”text” name=”text1” placeholder=”enter your name”/‬‬
 ‫‪9‬‬

‫‪ Multiple‬ودى خاصيه تجعل االداه تقبل اكثر من قيمة وبنفصل بين القيم بكومه ( ‪ ) ,‬وتكون فعاله مع الحقول النصية من نوع‬ ‫‪‬‬
‫‪ email‬وبتنفع كمان مع الحقل من نوع ‪ file‬عشان نختار اكثر من ملف ومثال عليها‬
‫>‪<input type=”email” name=”email1” multiple/‬‬
‫>‪<input type=”file” name=”file1” multiple/‬‬
‫‪ Required‬وهى تعنى ان االدخال فى الحقل مطلوب اى لن يتم الحفظ بدونه اى قبل الضغط على مفتاح ‪submit‬‬ ‫‪‬‬
‫>‪<input type=”text” name=”text1” required/‬‬
‫‪ Readonly‬وهى تجعل العنصر للقراءه فقط اى غير مسموح باالدخال فيه‬ ‫‪‬‬
‫>‪<input type=”text” name=”text1” value=”amir-zohier” readonly/‬‬
‫العنصر اللى معمول له ‪ disabled‬ال يتم ارسال بياناته عند الضغط على مفتاح ‪ submit‬ولكن العنصر اللى معمول له ‪readonly‬‬ ‫‪‬‬
‫يتم اظهار وارسال بياناته بالضغط على مفتاح ‪submit‬‬