HTML5

Elzero Web School‫بحث وملخص كورس ال ـ‬

“HTML & HTML5”

A lot of thanks to Osama Mohamed

Created By: Ahmed Adel

 Contents
3 ............................................................................................................................................... ‫مقدمة‬

4 .............................................................................................. HTML‫شكل ومكونات صفحه وعنصر الـ‬

5 ............................................................................................................................ Comment ‫التعليق‬

6 ....................................................................................................................... Doctype ‫نوع المستند‬

7 ............................................................................................................................ Headings ‫العناوين‬

8 ......................................................................................................................... Syntax ‫طرقية الكتابة‬

9 ................................................................................................................ Paragraph ‫الفقرات النصية‬

10 ......................................................................................................................... Attributes ‫السمات‬

11 ............................................................................................ Formatting Elements ‫عناصر التنسيق‬

14 ............................................................................................................... Links Anchor Tag ‫الروابط‬

15 ................................................................................................................................... Image ‫الصور‬

16 .................................................................................................................................... Lists ‫القوائم‬

18 ................................................................................................................................. Table ‫الجدول‬

20 ....................................................................................................... Span, Break, Horizontal Rule

21 ....................................................................................................................................... Division‫ال ـ‬

22 .................................................................................................................. HTML Entities ‫الكيانات‬

23 ............................................................................................ Semantic Elements ‫العناصر المنطقية‬

24 .................................................................................................................................. HTML Audio

25 .................................................................................................................................. HTML Video
26 ................................................................................................................................. Form ‫النموذج‬

34 ............................................................................................................................ HTML Elements

37 .................................................................................................................................. Accessibility
38 ............................................................................... Accessible Rich Internet Applications ‘ARIA’
39 .............................................................................................................................. Important links
 ‫مقدمة‬

‫معلومات عن لغة ‪- :HTML‬‬

‫‪ HTML‬هي اختصار لــ ‪ Hyper Text Markup Language‬ومعناها لغة ترميز النص التشعبي‪,‬‬
‫وهي مسؤولة عن تصميم هيكل وبنية موقع الويب‪ ,‬وتم إصدارها من قبل المهندس والعالم‬
‫"‪ "Tim Berners-Lee‬في سنة ‪.1993‬‬

‫أدوات مهمة لتعلم ‪- :HTML‬‬

‫محرر النصوص ‪ VS Code :Text Editor‬أو ‪ Atom‬او اخر‪.‬‬

‫متصفح أنترنت‪ Google Chrome :‬أو ‪.“Internet Explorer please don’t… :)” ,Fire Fox‬‬

‫ملحوظة! عند انشاء ملف مشروع جديد تجنب التسمية العربية او وضع مسافات بين الكلمات‬
‫لعدم حدوث أخطاء في وقت استدعاء الملفات‪.‬‬

‫معلومات من المفضل معرفتها قبل تعلم ‪- :HTML‬‬

‫‪ - 1‬ما هو الــ‪ Internet‬وكيف يعمل‪.‬‬
‫‪ - 2‬ما هو الــ‪ Web‬والفرق بينة وبين الــ ‪.Internet‬‬
‫‪ - 3‬كيف يعمل الــ‪.Browser‬‬
‫‪ - 4‬ما هو الــ‪ DNS‬وكيف يعمل‪.‬‬
‫‪ - 5‬ما هو أسم النطاق الــ‪.Domain Name‬‬
‫‪ - 6‬ما هي االستضافة ‪.Hosting‬‬

‫‪3‬‬
 ‫شكل ومكونات صفحه وعنصر الـ‪HTML‬‬

‫مكونات الصفحة‪- :‬‬

‫‪ :Html‬يتم وضعه كأول وسم في الصفحة ألنه يعتبر الوسم األساسي الذي يجب وضع كل‬
‫وسوم الصفحة بداخله‪.‬‬

‫‪ :Head‬يحتوي علي اعدادات الموقع والملفات المسؤولة عن طريقة عرض الموقع‪.‬‬

‫‪ :Body‬جسم الصفحة يحتوي علي كل العناصر التي تظهر للمستخدم مثل النصوص الصور‬
‫وكل التنسيقات‪.‬‬

‫>‪<html‬‬
‫>‪<head></head><!-- Contains => website settings, meta data, files --‬‬
‫>‪<body></body><!-- Contains => Text, Media, image, form and more --‬‬
‫>‪</html‬‬

‫مكونات العنصر‪- :‬‬

‫‪ :Element‬هو عنصر يكون له وظيفة واسم وسمات خاصة به‪.‬‬

‫‪ :Tag‬الوسم هو اسم او رمز‬

‫العنصر‪.‬‬

‫‪ :Attribute‬هي خصائص‬
‫وسمات تضاف الي العنصر‪.‬‬

‫>‪<div class="test"></div> <!-- opening and closing tag --‬‬

‫>‪<img src="./img/test.jpg"/> <!-- self closing tag --‬‬

‫‪4‬‬
 ‫التعليق ‪Comment‬‬

‫يستخدم لوضع تعليق داخل الكود‪ ،‬ويظهر في ملفات الموقع فقط وال يظهر اثناء عرض الموقع‪.‬‬

‫ملحوظة! يفضل استخدام التعليقات دائما لتوضيح وتسهيل فهم الكود او كتابة المالحظات‬
‫بشكل مختصر‪.‬‬

‫>‪<a href="http://brazil.com">Link</a><!-- You are going to Brazil XD --‬‬

‫‪5‬‬
 ‫نوع المستند ‪Doctype‬‬

‫‪ :Doctype‬يستخدم ألعالم المتصفح بإصدار لغة ‪ HTML‬المستخدمة في الكود‪ ,‬ويكتب قبل‬

‫وسم ‪ ,HTML‬حي ث يكون ‪ Doctype‬أول وسم في الكود‪ ,‬معلومات ا كثر‪.‬‬

‫‪ HTML5‬اإلصدار االحدث بسيط ويدعم جميع عناصر اللغة‪.‬‬

‫>‪<!DOCTYPE html‬‬

‫‪ HTML 4.01‬كان يستعمل في اإلصدارات القديمة من اللغة‪.‬‬

‫"‪<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN‬‬

‫>"‪"http://www.w3.org/TR/html4/loose.dtd‬‬

‫‪ XHTML 1.1‬احد اإلصدارات القديمة‪.‬‬

‫"‪<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN‬‬

‫>"‪"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd‬‬

‫‪6‬‬
 Headings ‫العناوين‬

.‫ عناصر مخصصه لعرض للعناوين‬:h1-h6

‫ملحوظة! استخدام العناوين بطريقة صحيحة يساعد في صداقة‬

. SEO‫محركات البحث الـ‬

<!-- h1 to h6, block elements, have font size and margin by default -->
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>

7
 Syntax ‫طرقية الكتابة‬

‫ اما إذا كانت أ كثر‬،‫يمكن كتابة السمات بدون عالمات التنصيص في حاله ان القيمة كلمه واحدة‬
.‫من كلمه فيجب استخدام عالمات التنصيص الحتوائهم‬

<!-- if attributes value is one word you can write without '' or "" -->
<meta name= description>

<!-- you can use '' or "" -->

<meta content="my first website">
<meta content='my first website'>

.‫ فيمكن الكتابة بهذا الشكل لتسهيل قراءة الكود‬،‫المتصفح يتجاهل المسافات والسطور الجديدة‬

<!-- browser ignores spaces between elements content -->

<h1
style="
color: red;">
Book
Store
</h1>

.‫و يفضل الكتابة بالمعايير األساسية‬

<h1 style="color: red;">Book Store</h1>

8
 Paragraph ‫الفقرات النصية‬

‫ من‬Margin‫ ويعطي تنسيقات افتراضية للعنصر مثل الـ‬،‫ يستخدم لكتابة الفقرات النصية‬:P
.‫اعلي وأسفل‬

<!-- block element, add margin top and bot -->

<p>Lorem ipsum dolor sit amet consectetur adipisicing elit perferendis. </p>
<P>Lorem, ipsum dolor.</P>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Consequatur, exercitationem eos! Excepturi,
ratione! Adipisci magni,
ipsa molestiae sint quos odio.
</p>

9
 ‫السمات ‪Attributes‬‬

‫‪ :Attributes‬هي سمات تضاف للعناصر ألضافه وظائف وخصائص للعنصر‪.‬‬

‫‪ :Global attributes‬سمات ممكن استخدمها علي جميع العناصر‪.‬‬

‫>‪<h1 class="" id="">Test</h1><!-- global attributes --‬‬

‫‪ :Element Attributes‬سمات مخصصة لعناصر محددة وليس كل العناصر‪ ,‬وال يمكن‬

‫استخدامهم علي كل العناصر‪.‬‬

‫>‪<!-- element attributes --‬‬

‫>""=‪<img src="" alt‬‬
‫>‪<video src=""></video‬‬

‫‪10‬‬
 Formatting Elements ‫عناصر التنسيق‬

‫ عناصر تقوم بإضافة تنسيقات علي النصوص‬:Formatting Elements

.CSS ‫بدون االحتياج الي لغة‬

.‫ نص سميك‬:Bold

<p>This Our <b>Book Store</b></p><!-- b => Blod -->

‫ نص سميك أيضا ً لكن يستخدم في حال‬:Strong

.ً‫كان النص مهم جدا‬

<p><strong>Book Store</strong></p><!-- strong => Blod + Important Text -->

.‫ نص مائل‬:Italic

<p>This Our <i>Book Store</i></p><!-- i => Italic -->

11
 italic‫ نص مائل والفرق بينه وبين الـ‬:Emphasized
‫هو انه ليس مجرد تنسيق ونص مائل انما يضيف‬
.‫أهمية للنص‬

<p>Created by: <em>Ahmed Adel</em></p><!-- em => Emphasized + Important -->

.‫ يقوم بتظليل النص‬:Mark

<p>This Our <mark>Book Store</mark></p><!-- mark => Highlighted Text -->

.‫ أضافة خط أسفل النص‬:Underline

<p>This Our <u>Book Store</u></p><!-- u => Underline -->

.‫ يقوم بتصغير النص‬:Small

<p>This Our <small>Book Store</small></p><!-- small => Smaller Text -->

.‫ يستخدم لعرض نص محذوف‬:Deleted

<p><del>100$</del> 80$</p><!-- d => Deleted Text -->

12
 ‫‪ :Inserted‬يستخدم ألضافه خط تحت النص‬
‫الجديد الذي تم إضافته على الصفحة بهدف لفت نظر‬
‫المستخدم لما تم إضافته‪.‬‬

‫>‪<p>This Our <ins>Book Store</ins></p><!-- ins => Inserted Text --‬‬

‫‪ :Subscript‬يستخدم لعرض النص بشكل منخفض قليال ً‬

‫عن باقي النص الموجود بجانبه‪ .‬ومثال الستخدامه يكتب به‬
‫رموز الجدول الدوري‪.‬‬

‫>‪<p>H₂O</p><!-- sub => Subscript --‬‬

‫‪ :Superscript‬يستخدم لعرض النص بشكل مرتفع قليال ً عن‬

‫باقي النص الموجود بجانبه وكمثال يستخدم لكتابة األرقام‬
‫والتواريخ‪.‬‬

‫‪<p>3⁴</p><!-- sup => Superscript‬‬ ‫>‪--‬‬

‫‪13‬‬
 ‫الروابط ‪Links Anchor Tag‬‬

‫‪ :a‬يستخدم ألضافه الروابط الي الصفحة او يستخدم لربط صفحات الموقع ببعض او بعناصر‬
‫وبعضها‪ ،‬ال يؤدي الكود وظيفته بدون السمات األساسية مثل "‪."href‬‬

‫قائمة سمات الــ‪Anchor Attributes‬‬

‫إضافة رابط موقع‪.‬‬

‫>‪<a href="http://google.com" target="_blank" title="Go To Google">Google</a‬‬

‫ربط العنصر بصفحة اخري من داخل الموقع‪.‬‬

‫>‪<a href="test.html" title="Test Page">Test</a‬‬

‫ربط العنصر بعنصر آخر بنفس الصفحة عن طريق اضافة ‪ id‬العنصر الثاني‪.‬‬

‫>‪<a href="#para" title="Go To Paragraph">Paragraph</a‬‬

‫>‪<p id="para">TEST Lorem ipsum dolor sit amet.</p‬‬

‫‪14‬‬
 ‫الصور ‪Image‬‬

‫‪ :img‬يستخدم لعرض الصور عن طريق ’‪ ’ URL‬يضاف فيه مسار الصورة‪ ,‬يمكن استدعاء صورة‬
‫من موقع او من‬

‫‪.More Info About Img‬‬

‫استدعاء صور‪.‬‬

‫>"‪<img src="/img/JujutsuKaisen.jpg" alt="Jujutsu Kaisen" title="img‬‬

‫استدعاء صورة خارج ملف المشروع‪.‬‬

‫>""=‪<img src="../JujutsuKaisen.jpg" alt‬‬

‫يمكن تغير طول وعرض الصورة باستخدام السمات‪ ,‬لكن يفضل استخدام الــ‪.CSS‬‬

‫>"‪<img src="/img/JujutsuKaisen.jpg" alt="" width="150px" height="150px‬‬

‫‪15‬‬
 Lists ‫القوائم‬

. “Unordered List”‫قائمة غير مرتبة قائمة غير مرتبة وليس لها ترتيب رقمي محدد‬

<!-- ul => Unordered list, li => List Item -->

<ul>
<li>HTML</li>
<li>CSS
<ul>
<li>Bootstrap</li>
</ul>
</li>
</ul>

."Ordered List"،‫قائمة مرتبة ترتيب رقمي من االصغر لألكبر‬

<!-- ol => Order List -->

<ol>
<li>Test</li>
<li>Test</li>
</ol>

."Description List" ،‫قائمة الوصف يستخدم لكتابة المصطلحات ووصفها بطريقة منظمة‬

<!-- dl => Description List / dt => Term / dd => Description Term -->
<dl>
<dt>HTML</dt>
<dd>Hyper Text Markup Language</dd>
<dd>Lorem ipsum dolor sit.</dd>
<dt>CSS</dt>
<dd>Cascading Style Sheets</dd>
</dl>

16
 .‫بدأ الترتيب من قيمة محددة‬

<!-- start => Start From Position -->

<ol start="5">
<li>Name</li>
<li>Email</li>
<li>Country</li>
</ol>

.‫بدأ الترتيب من عنصر معين في القائمة عن طريق تحديد قيمة رقم بداية العد‬

<!-- value => Cunt Will Start From This Value. -->
<ol>
<li value="20">Name</li>
<li>Email</li>
<li>Country</li>
</ol>

،‫ يمكن استخدام ال حروف او االرقام الالتينية‬،‫تغير طريقة الترتيب‬

. revers‫و يمكن عكس الترتيب باستخدام الـ‬

<!-- reversed => Reverse The Ordering / type => Type Of Ordering-->
<ol reversed type="A">
<li>Name</li>
<li>Email</li>
<li>Country</li>
</ol>

17
 ‫الجدول ‪Table‬‬

‫يستخدم ألضافه جدول‪ ،‬الجدول من أفضل الطرق التي تساعد على عرض البيانات وترتيبها في‬
‫أعمدة وصفوف "الجداول ‪."Tables‬‬

‫>‪<table></table‬‬

‫رأس الجدول ‪ :Table Hade‬يرمز الي رأس الجدول ويكون له تنسيقات تميزه عن باقي الجدول‪,‬‬
‫يتكون راس الجدول من >‪ <tr‬صف‪ ,‬و >‪ <th‬وهي خاليا خاصة وتستخدم فقط في رأس الجدول‪.‬‬

‫>‪--‬رأس الجدول ‪<thead><!-- Table Head‬‬

‫>‪--‬صف الجدول ‪<tr><!-- tr => Table Row‬‬
‫>‪--‬خاليا رأس الجدول ‪<!-- th => Table Head cells‬‬
‫>‪<th>First</th> <th>Last</th> <th>Mark</th‬‬
‫>‪</tr‬‬
‫>‪</thead‬‬

‫جسم الجدول ‪ :Table Body‬يحتوي علي صفوف واعمدة الجدول‪.‬‬

‫>‪--‬جسم الجدول ‪<tbody><!-- Table Body‬‬

‫>‪<tr‬‬
‫>‪--‬خاليا الجدول ‪<!-- td => Table Cells‬‬
‫>‪<td>Ahmed</td> <td>Adel</td> <td>40</td‬‬
‫>‪</tr‬‬
‫>‪</tbody‬‬

‫‪18‬‬
 .‫ الجزء السفلي من الجدول‬:Table Foot ‫أسفل الجدول‬

<tfoot><!-- Table Foot ‫الجزء السفلي للجدول‬-->

<tr>
<!-- colspan => merge table cells ‫دمج خاليا الجدول‬-->
<td colspan="2">Total</td> <td>100</td>
</tr>
</tfoot>

:‫مثال‬

<table>
<caption>Score This Month</caption><!-- Table Caption ‫ عنوان لوصف الجدول‬-->
<thead><!-- Table Head ‫رأس الجدول‬-->
<tr><!-- tr => Table Row ‫صف الجدول‬-->
<!-- th => Table Head cells ‫خاليا رأس الجدول‬-->
<th>First</th> <th>Last</th> <th>Mark</th>
</tr>
</thead>

<tbody><!-- Table Body ‫جسم الجدول‬-->

<tr>
<!-- td => Table Cells ‫ خاليا الجدول‬-->
<td>Ahmed</td>
<td>Adel</td>
<td>40</td>
</tr>
<tr>
<td>Ahmed</td>
<td>Adel</td>
<td>60</td>
</tr>
</tbody>

<tfoot><!-- Table Foot ‫الجزء السفلي للجدول‬-->

<tr>
<!-- colspan => merge table cells ‫ دمج خاليا الجدول‬-->
<td colspan="2">Total</td> <td>100</td>
</tr>
</tfoot>
</table>

19
 Span, Break, Horizontal Rule

‫ ليس له أي تأثير على المحتوى الذي يتم وضعه فيه و الهدف األساسي من استخدامه‬:Span
‫هو تعديل طريقة ظهور بعض المحتوى الموضوع‬
,CSS ‫في الفقرات بواسطة كود‬
.Span‫معلومات ا كثر عن الـ‬

<!-- inline element, have no format -->

<p>Lorem <span style="color: red;">ipsum</span> dolor sit amet.</p>

‫ يستخدم إلعالن نهاية الفصل الحالي والمحتوي‬:Break

‫الذي يليه يوضع بعده علي سطر منفرد‬
.Break‫معلومات ا كثر عن الـ‬

<!-- br => Break , Start New Line -->

<p>Lorem ipsum dolor sit amet.<br/>adipisicing elit<br/>Quisquam quod.</p>

.HR‫ يستخدم ألضافه خط أفقي في الصفحة معلومات ا كتر عن الـ‬:Horizontal Rule

<p>First Paragraph</p>
<hr><!-- hr => Horizontal Rule, Block Element -->
<p>Second Paragraph</p>

20
 ‫ال ـ‪Division‬‬

‫يعبر عن القسم واستخدامه األساسي هو تقسيم المحتوي واستدعاءه واجراء التعديالت علية‬
‫وعلي العناصر التي بداخلة‪ .‬تفاصيل ا كثر عن الــ‪.Div‬‬

‫باستخدام الـ‪ Div‬يمكن استدعاء وأجراء تنسيقات‬

‫على العنصر بسهوله‪،‬‬
‫معلومات ا كثر في ‪.W3Schoole‬‬

‫‪<!--‬‬
‫‪- div => Division or a Section, Block Element‬‬
‫‪- Add Formats By Calling 'Test' Class in CSS‬‬
‫>‪--‬‬
‫>"‪<div class="test‬‬
‫>‪<h1>Host Plan</h1‬‬
‫>‪<P>Host Description</P‬‬
‫>‪<span><del>100$</del> 80$</span‬‬
‫>‪</div‬‬

‫‪21‬‬
 ‫الكيانات ‪HTML Entities‬‬

‫طريقة تستخدم لكتابة وتحويل الرموز الي نصوص باستخدام الكيانات المعبرة عن الرمز وهذا في‬
‫حاله إرادة كتابة نصوص تحتوي علي الرموز فيجب استخدام الكيانات التي ترمز اليها‪,‬‬
‫‪.HTML Entities List‬‬

‫< = ;‪<p>Paragraph &lt;p&gt;</p><!-- &lt‬‬ ‫>‪&gt; = > --‬‬

‫ويوجد قائمة خاصة بالرموز التعبيرية ‪. Emojis‬‬

‫>‪<!-- Using Emojis in HTML --‬‬

‫>‪<p>&#128512; &#128516; &#128525; &#128151;</p‬‬

‫‪22‬‬
 Semantic Elements ‫العناصر المنطقية‬

,"<header> <table>" ‫ مثال‬،‫هي عناصر ذات معني منطقي تدل على وظيفتها‬
.Semantic Element ‫<" ال تدل عن معني واضح‬div> <span>"‫وهذا بعكس عناصر مثل‬

“Semantic elements = elements with a meaning”

<figure>
<img src="img/JujutsuKaisen.jpg" alt="">
<figcaption>Img Caption 'semantic'</figcaption>
</figure>

23
 HTML Audio

, src‫يستخدم ألضافه ملف صوتي في الصفحة بعد تحديد مسار الملف عن طريق الـ‬
.More About Audio

,‫ من المهم تحديد نوع امتداد الملف لضمان عملها في مختلف المتصفحات‬:Mime Type
.‫انواع االمتدادات‬

<!--
controls => add play & volume controls and other.
autoplay => autoplay the audio when reloading the website.
loop => repeat the audio.
muted => default mute to the audio.
-->
<audio controls autoplay loop muted>
<source src="audio/XXXTENTACION-Changes.mp3" type="audio/mpeg">
<source src="audio/XXXTENTACION-Changes.ogg" type="audio/ogg">
<!-- will appear if the browser does not support audio -->
Your Browser Dose Not Support Audio Tags
</audio>

24
 HTML Video

.‫يستخدم ألضافه ملف فيديو في الصفحة‬

.‫ يستخدم في وضع صوره غالف للفيديو تكون موجوده لحين تشغيل الفيديو‬Poster

.‫ يستخدم إلضافة ملفات الترجمة للفيديو‬Track

<video controls width="500px" height="300px" poster="img/JujutsuKaisen.jpg">

<source src="video/jujutsu kaisen - beggin.mp4">

<!-- track => used to add different types of translation files -->
<track src="en_file.vtt" kind="subtitles" srclang="en" label="English">
<track src="ar_file.vtt" kind="subtitles" srclang="ar" label="Arabic">
Your Browser Dose Not Support Video Tags
</video>

25
 ‫النموذج ‪Form‬‬

‫النموذج ‪ :Form‬يستخدم لعرض نموذج بهدف استقبال البينات من المستخدم‪.‬‬

‫سمات النموذج ‪Form Attributes‬‬

‫• ‪ :Action‬مسؤوله عن تحديد الرابط الذي سيتم إرسال البينات المدخلة في النموذج إلية‪.‬‬
‫• ‪ :Method‬تحدد نوع طريقه األرسال "‪ Post‬مشفرة" أو "‪ Get‬غير مشفرة"‪.‬‬
‫• ‪ :Target‬ارسال النموذج واظهار النتيجة في صفحة جديدة‪.‬‬
‫• ‪ :No validate‬ارسال البينات دون التحقق من الشروط يستخدم في حالة اختبار النموذج‪.‬‬

‫المزيد عن سمات النموذج‬

‫>‪<form action="test.php" method="get" target="blanck_" novalidate‬‬

‫عناصر أساسية في النموذج‬

‫• ‪ :Input‬حقل االدخال وله أنواع مختلفة يتم تحديدها بتحديد قيمة الـ‪.type‬‬
‫• ‪ :Label‬يستخدم لوضع اسم لعنصر في‬
‫النموذج‪.‬‬

‫>‪<form action="test.php" method="post" target="blanck_" novalidate‬‬

‫>‪<label for="user">Full Name:</label‬‬
‫>‪<input type="text" placeholder="Name" id="user" required‬‬
‫>"‪<input type="submit‬‬
‫>‪</form‬‬

‫‪26‬‬
 ‫سمات عنصر اإلدخال ‪Input Attributes‬‬

‫‪ :Type‬يستخدم لتحديد نوع حقل االدخال‪ ,‬أنواع حقول االدخال‪.‬‬

‫‪ :Required‬تجبر المستخدم علي ادخال بينات الحقل او‬

‫النموذج‪.‬‬

‫>‪<input type="email" placeholder="Email" required‬‬

‫‪ :Placeholder‬يقوم بإظهار نص مساعد بداخل حقل‬

‫االدخال حينما يكون فارغاً‪.‬‬

‫>"‪<input type="text" placeholder="UserName‬‬

‫‪ :Value‬يتم اضفتها بهدف إعطاء قيمة للحقل ويتم ارسالها مع البيانات في النموذج‪.‬‬

‫ملحوظة! عند استخدام الخاصية ‪ value‬يجب استخدام‬

‫الخاصية ‪ name‬معها حتى يتم إرسال القيمة مع اسمها‪.‬‬

‫>"‪<input type="text" value="Ahmed_921" name="username‬‬

‫‪27‬‬
 ‫‪ :Name‬تستخدم بهدف إعطاء اسم للحقل وأرساله مع النموذج‪ ,‬ومن المفضل استخدامها‬
‫دئما ً للحقول‪.‬‬

‫‪ :ReadOnly‬تجعل قيمة الحقل غير قابلة للتغيير ‪ ,‬وبيتم ارسال قيمة الحقل في النموذج‪.‬‬

‫‪ :Disabled‬حقل للقراءة فقط ليس قابل للتعديل‪ ,‬وال يتم‬

‫إرساله في النموذج‪.‬‬

‫‪ :Autofocus‬يمكن إضافتها للوسم إلعالم المتصفح أنه عند فتح الصفحة سيتم اعتبار أن‬
‫المستخدم يقف عنده‪.‬‬

‫‪ :Maxlength - Minlength‬تحديد الحد األدنى‬

‫واألقصى للعدد الذي يتم ادخله في الحقل‪.‬‬

‫>‪<input type="password" minlength="8" maxlength="16" required‬‬

‫المزيد من سمات حقول االدخال‪.‬‬

‫‪28‬‬
 ‫أنواع حقول االدخال ‪Input Type‬‬

‫‪ :Text‬حقل مخصص إلدخال النص العادي‪ ,‬هو القيمة االفتراضية لنوع الحقل اذا لم يتم تحديد‬
‫نوع له‪.‬‬

‫‪ :Hidden‬حقل مخفي ال يظهر للمستخدم لكن يتم ارسال قيمة الحقل مع النموذج‪.‬‬

‫‪ :Password‬حقل مخصص لكتابة الباسورد‪.‬‬

‫>"‪<input type="password" minlength="6" maxlength="10‬‬

‫‪ :Email‬حقل خاص بكتابة بريد إلكتروني‪.‬‬

‫>"‪<input type="email‬‬

‫‪ :Submit - Reset‬زر مخصص ألرسال بينات النموذج‪,‬‬

‫وزر مخصص ألعاده كتابة النموذج‪.‬‬

‫>"‪<input type="submit‬‬
‫>"‪<input type="reset‬‬

‫‪29‬‬
 .‫ حقل مخصص إلدخال األلوان‬:Color

<input type="color">

.‫ حقل تحديد القيمة عن طريق شريط أفقي‬:Range

<input type="range" step="20" min="0" max="100" value="60">

‫ يتيح للمستخدم تحديد اختيار بين عده‬,‫ عنصر ألضافه االختيارات‬:Radio

.‫اختيارات‬

،‫ نفسها الي باقي الحقول من نفس النوع‬name‫ملحوظة! يجيب إضافة قيمة الــ‬
.‫لتمكين المستخدم من تحديد اختيار واحد بين عدة اختيارات‬

<!-- Radio => Only one option can be chosen -->

<input type="radio" name="os" value="android" id="android-os" checked>
<label for="android-os">Android</label>
<input type="radio" name="os" value="ios" id="iphone-os">
<label for="iphone-os">IOS</label>

30
 .‫ يستخدم إلضافة ازرار اختيارات‬:CheckBox
‫ على الحقل في حالة أردت يكون االختيار‬checked ‫ملحوظة! يمكن إضافة‬
.‫االفتراضي‬

<!-- CheckBox => One or more options can be chosen at the same time -->
<input type="checkbox" name="os" value="android" id="android-os" checked>
<label for="android-os">Android</label>
<input type="checkbox" name="os" value="ios" id="iphone-os">
<label for="iphone-os">IOS</label>

.‫ يمكن تحديد اختيار او ا كتر‬,‫ مخصص ألضافه اختيارات‬:Select

Select ‫تفاصيل أ كثر عن‬

<label for="device">Choose your device:</label>

<select name="device" id="device">
<!-- add "multiple" to select for multiple selections -->

<optgroup label="PC">
<option value="win">Windos</option>
<option value="mac">Mac</option>
</optgroup>
<optgroup label="Mobile">
<!-- selected=> this option selected by default -->
<option value="android">Android</option>
<option value="ios" selected>IOS</option><!-- Selected -->
</optgroup>
</select>

31
 ‫‪ :Textarea‬حقل ادخال مخصص لكتابة النصوص‪ ,‬يمكن المستخدم من كتابة سطر او ا كثر‪,‬‬
‫يمكن تحديد العرض باستخدام ‪ , cols‬والطول باستخدام ‪ , rows‬لكن األفضل استخدام الــ‪ CSS‬في‬
‫التنسيقات‪ ,‬معلومات ا كثر عن ‪.Textarea‬‬

‫ملحوظة! يمكن الغاء خاصية تغير الحجم من جهة المستخدم‬

‫باستخدام الـ‪ CSS‬بتحديد "‪.”resize: none‬‬

‫>‪<textarea cols="30" rows="5" placeholder="Comment"></textarea‬‬

‫‪ :File‬يسمح بإدخال الملفات وارسالها مع النموذج‪.‬‬

‫>"‪<input type="file‬‬

‫‪ :Search‬حقل مخصص للبحث‪.‬‬

‫>"‪<input type="search‬‬

‫‪ :URL‬حقل مخصص ألداخل الروابط فقط‪.‬‬

‫>"‪<input type="url‬‬

‫‪32‬‬
 .‫ حقول ادخال الوقت الشهر والتاريخ‬:Date, Month, Time

<input type="date"> <input type="month"> <input type="time">

‫ تقوم بعرض اختيارات وتمكن المستخدم من‬:Data List

.‫البحث بين االختيارات‬

‫ملحوظة! يمكن كتابة قيمة ليست من ضمن االختيارات‬

.‫وأرسالها في النموذج‬

<input list="mobile">

<datalist id="mobile">
<option value="OnePlus">
<option value="Xiaomi">
<option value="Iphone">
<option value="Oppo">
</datalist>

33
 HTML Elements

,‫ يضيف عالمات تنصيص في بداية ونهاية النص‬:Quote

.‫ويستخدم أحيانا ً في كتابة االقتباسات‬

<q>Lorem ipsum dolor sit amet.</q>

‫ لكن يختلف انه‬Quote‫ شبيه بالـ‬:Block Quote

.‫ وال يضيف عالمات تنصيص‬block ‫عنصر‬

<blockquote>Lorem ipsum dolor sit amet.</blockquote>

.‫ يستخدم لعرض زر‬:Button

<button>Button</button>

‫ يتحكم في طريقة فصل النصوص في حالة تخطي السطر‬:Wbr

.‫حجم الشاشة‬

<p>https://www.testlink.com/<wbr>Loremipsumdolorsit</p>

<p>https://www.testlink.com/Loremipsumdolorsit</p><!-- with out <wbr> -->

34
 .‫ يقوم بعزل النص عن اتجاه كتابة الصفحة‬:Bdi

<p>2 ‫ السالم‬test</p>

<p><bdi>‫<السالم‬/bdi> 2 test</p>

.‫ يقوم بعرض المسافات بين الكلمات واالسطر‬:Pre

<p>two paths cross one condemned to end</p>

<pre>
two paths cross
one
condemned to ends
</pre>

.‫ يستخدم لكتابة وعرض االكواد البرمجية‬:Code

<code>
var x = 10, y = 5;
console.log(x + y);
</code>

.‫ لعرض المسافات بين االكواد‬code ‫ مع‬pre ‫ملحوظة! يمكن استخدام‬

<pre>
<code>
var x = 10, y = 5;
console.log(x + y);
</code>
</pre>

35
 ‫ يستخدم ألضافه إطار يعرض فيه محتوي صفحة او‬:iFrame
.‫اخري‬

<iframe width="350" height="200" src="https://elzero.org"></iframe>

36
 ‫‪Accessibility‬‬

‫هي معا يير يتم أتبعها أثناء كتابة كود الموقع و توفر للمستخدم إمكانية التنقل بسهولة بين‬
‫محتوي الموقع‪ ،‬و يجب ان يكون الكود ‪ Semantic‬بقدر اإلمكان‪.‬‬

‫ملحوظة! في متصفح ‪ Google‬يمكن أختبر كفاءة‬

‫إمكانية الموصول للموقع باستخدام الـ‪.Lighthouse‬‬

‫>‪<html><!-- With out lang attribute 'non Semantic' --‬‬

‫‪<html lang="en"><!--‬‬ ‫‪Semantic Code‬‬ ‫>‪--‬‬

‫‪37‬‬
 ‫’‪Accessible Rich Internet Applications ‘ARIA‬‬

‫أمكانية الوصول لتطبيق غني بالمحتوي‪ ،‬هي تمكين العناصر من دعم إمكانيات الوصول‬
‫ومميزتها‪ ،‬معلومات أ كثر في هذا الدرس ‪.ARIA HTML Tutorial‬‬

‫‪38‬‬
 ‫‪Important links‬‬

‫أبحث أوال قبل ان تسأل شخص‪.‬‬ ‫"‪:“Google :D‬‬

‫"أ كاديمية الزيرو"‪ :‬موقع عربي يحتوي على العديد من المسارات التعليمية في الــ‪.Web‬‬

‫"‪ :"W3 Schools‬موقع ومرجع مهم لتعلم الـــ‪.Web‬‬

‫موقع مميز يقدم تفاصيل دقيقة جدا عن االكواد ومفيد جدا للتعلم‪.‬‬ ‫"‪:"MDN‬‬

‫"‪ :"Solo Learn‬موقع للتعلم الذاتي في العديد من المسارات البرمجية‪ ،‬ويحتوي على‬
‫مسائل واختبارات لتحديد مستوي تقدمك‪.‬‬

‫‪39‬‬