أساسيات HTML
في هذه المقالة، نشرح أساسيات HTML.۔
يشرح هذا العلامات الرئيسية مثل إعلان DOCTYPE، وعلامات <html>، <head>، و <body>۔ كما يصف العلامات، السمات، والشخصيات الخاصة۔
YouTube Video
أساسيات HTML
1<!DOCTYPE html>
2<html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <title>Basics of HTML</title>
7 </head>
8 <body>
9 <!-- Main content wrapped in the main tag -->
10 <main>
11 <!-- Main heading -->
12 <h1>What is HTML?</h1>
13 <!-- Example of a paragraph -->
14 <p>HTML is the language used to create the basic structure of web pages.</p>
15 </main>
16 </body>
17</html>-
<!DOCTYPE html>في بداية الملف، نعلن أن هذا مستند HTML5، مما يشير إلى أنه يتبع قواعد HTML5.۔
-
<html>وسم
<html>هو العنصر الخارجي في مستند HTML الذي يغلف المحتوى بالكامل.۔ يحتوي كل ملف HTML على وسم<html>واحد فقط، وتكون جميع الوسوم الأخرى متداخلة داخل هذا الوسم.۔ السمةlang="en"داخل وسم<html>الافتتاحي تُسمى سمة وهي تُعلم المتصفح بأن المستند مكتوب باللغة الإنجليزية.۔ يساعد هذا في إبلاغ قارئات الشاشة ومحركات البحث بلغة المستند.۔ -
<head>وسم
<head>يُعرف البيانات الوصفية (المعلومات) للصفحة.۔ يشمل ذلك عنوان الصفحة، وترميز الأحرف، وإعدادات التصميم المستجيب.۔ يشير التصميم المتجاوب إلى طريقة مصممة لكي تتكيف المواقع أو التطبيقات وتُعرض بشكل جيد على مختلف الأجهزة وأحجام الشاشات.۔ يتيح هذا للمستخدمين عرض المحتوى بشكل مريح على أجهزة مختلفة مثل الهواتف الذكية والأجهزة اللوحية وأجهزة الكمبيوتر المكتبية.۔<meta charset="UTF-8">يقوم بتعيين ترميز أحرف المستند إلى UTF-8.۔<meta name="viewport" content="width=device-width, initial-scale=1.0">هي إعداد يحسن العرض للأجهزة المحمولة.۔ تتأقلم الصفحة مع عرض شاشة الجهاز.۔<title>يمثل عنوان الصفحة كما يظهر في علامة تبويب المتصفح۔ في هذا المثال، تم تعيين العنوان 'أساسيات HTML'۔ -
<body>تحتوي علامة
<body>على الجزء الذي يعرض المحتوى للمستخدمين۔ داخل هذه العلامة، يتم كتابة النصوص والصور والروابط وما إلى ذلك۔ -
<main>تمثل علامة
<main>المحتوى الرئيسي للصفحة۔ يتضمن ذلك العناوين والفقرات۔ -
<h1>تمثل علامة
<h1>العنوان الأهم في الصفحة۔ من الشائع استخدام علامتي<main>و<h1>مرة واحدة فقط في المستند۔ -
<p>تمثل علامة
<p>فقرة۔ -
<!-- Comment -->يمكنك كتابة التعليقات في HTML بهذا التنسيق۔ نظرًا لأن إتش تي إم إل من جهة العميل يمكن مشاهدته من قبل أي شخص، لا تُدرج معلومات حساسة مثل كلمات المرور أو مفاتيح API في التعليقات.۔
يحتوي HTML على العديد من العلامات، ولكن انتبه للنقاط التالية هنا.۔ يتكون ملف HTML من إعلان DOCTYPE وعلامة <html> واحدة۔ تحتوي علامة <html> على علامة <head> واحدة وعلامة <body> واحدة۔ في HTML، تحتوي جميع العلامات داخل علامة <html>، معبّرة عن هيكل النص من خلال علاقات الأصل والفرع والشقيق، مثل هيكل الشجرة۔ عند كتابة HTML، ركز أيضًا على هيكل المستند.۔
العلامات والسمات
بعد ذلك، دعونا نلقي نظرة على علامات HTML والسمات.۔
1<!-- Opening tag and closing tag -->
2<div>Content</div>
3
4<!-- Self-closing tag -->
5<br>
6
7<!-- Nested tag -->
8<div>
9 <div>Nested Content</div>
10</div>
11
12<!-- Attribute -->
13<div id="main">
14 <div>Nested Content</div>
15</div>
16
17<!-- Tag : <div> -->
18<!-- Element : <div>Content</div> -->تُحاط العلامات بأقواس زاوية (<, >) وتتكون عادةً من زوج من علامات الفتح والإغلاق۔ ومع ذلك، هناك أيضًا علامات منفردة، مثل علامة <meta> وعلامة <img>، التي لا تحتوي على محتوى۔ العلامات المنفردة لا تتطلب علامة إغلاق۔
يمكن أن تحتوي العلامات على سمات توفر معلومات إضافية للعلامة۔ تكتب السمات داخل علامة الفتح بتنسيق attributeName="value"۔
هنا، يُشار إلى <div> كعلامة، و <div>Content</div> كعنصر.۔
1<div id="header">
2 <ul class="menu">
3 <li>Home</li>
4 <li style="display: hidden;">Unvisible Menu Item</li>
5 </ul>
6</div>تشمل السمات الشائعة في HTML id و class و style۔ تُستخدم سمة id لإعطاء عنصر معرفًا فريدًا، ولا يمكن أن يكون هناك سوى عنصر واحد يحمل نفس المعرف على الصفحة۔ يكون ذلك مفيدًا عند التلاعب بعناصر معينة باستخدام JavaScript أو CSS۔ تسمح لك سمة class بتجميع عناصر متعددة مع CSS أو JavaScript من خلال تعيين اسم الفئة۔ يمكنك تعيين نفس الفئة لعناصر متعددة، مما يسمح بمشاركة الأنماط۔ تحدد سمة style أنماط CSS مضمنة لعنصر ما۔ عادةً ما تُحدد الأنماط في ورقة أنماط خارجية أو ضمن علامة <style>، ولكن تُستخدم هذه السمة عندما تريد تحديد الأنماط مباشرةً لعناصر فردية۔
الأحرف الخاصة في HTML
بعد ذلك، دعونا نتعمق في الأحرف الخاصة في HTML.۔
في HTML، هناك أحرف خاصة تُستخدم لعرض رموز وحروف معينة.۔ تُسمى هذه الأحرف الخاصة بالكائنات.۔ تبدأ الأحرف الخاصة بـ & (أمبيرساند)، تليها اسم أو رقم، وتنتهي بـ ; (فاصلة منقوطة)۔
الأحرف الخاصة التمثيلية في HTML
إليك بعض الأحرف الخاصة الشائعة.۔
| Display | Entity Name | Entity Number | Description |
|---|---|---|---|
& |
& |
& |
Ampersand (&) |
< |
< |
< |
Less-than sign (<) |
> |
> |
> |
Greater-than sign (>) |
" |
" |
" |
Double quotation mark (") |
' |
' |
' |
Apostrophe (') |
| © | © |
© |
Copyright symbol (©) |
| € | € |
€ |
Euro symbol (€) |
| ¥ | ¥ |
¥ |
Japanese Yen symbol (¥) |
| ¢ | ¢ |
¢ |
Cent symbol (¢) |
| £ | £ |
£ |
Pound symbol (£) |
|
|
  |
Non-breaking space (space) |
أمثلة على استخدام الأحرف الخاصة في HTML
يجب استخدام الأقواس الزاوية (<, >) وعلامات الاقتباس المزدوجة بشكل صحيح في HTML بشكل خاص۔
يجب تمثيل الأقواس الزاوية (<، >) وعلامات الاقتباس المزدوجة كأحرف خاصة في HTML، كما هو موضح أدناه.۔
1<!DOCTYPE html>
2<html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <title>Basics of HTML</title>
7 </head>
8 <body>
9 <!-- Main content wrapped in the main tag -->
10 <main>
11 <!-- Main heading -->
12 <h1>What is HTML?</h1>
13 <!-- Example of a paragraph -->
14 <p>
15 HTML is the language used to create the basic structure of web pages.<br>
16 It defines the content and layout of a webpage using various elements such as headings, paragraphs, and lists.
17 </p>
18 <hr>
19 <h2>Basic Elements of HTML</h2>
20 <div>
21 HTML elements are used to organize and display content on a web page.
22 They include tags for text, images, links, and more.
23 </div>
24 <hr>
25 <ul>
26 <li>Headings (e.g., <h1>, <h2>)</li>
27 <li>Paragraphs (<p>)</li>
28 <li>Links (<a>)</li>
29 <li>Lists (<ul>, <ol>)</li>
30 <li>Images (<img>)</li>
31 </ul>
32 <hr>
33- <h3>About '<h1>' tag and '<h2>' tag</h3>
34+ <h3>About '<h1>' tag and '<h2>' tag</h3>
35 <img src="image.png"
36- alt="This is an example of "image"">
37+ alt="This is an example of "image"">
38 </main>
39 </body>
40</html>
إصدارات HTML
دعونا نلقي نظرة على إصدارات HTML هنا.۔
تطورت إصدارات HTML لتحديد هيكلية ووظائف صفحات الويب.۔ فيما يلي الإصدارات الرئيسية:۔
-
HTML 1.0 (1993)
أول إصدار من HTML كان يحتوي على ميزات ترميز أساسية جداً فقط.۔ وعرّف عناصر مثل الروابط والعناوين والفقرات والقوائم.۔
-
HTML 2.0 (1995)
أول إصدار قياسي، مع إضافة المزيد من العناصر، بما في ذلك دعم النماذج والجداول.۔
-
HTML 3.2 (1997)
تمت إضافة المزيد من ميزات التخطيط، مما سمح بتضمين عناصر الأنماط والبرمجيات النصية.۔ بالإضافة إلى ذلك، أصبح التخطيط باستخدام عنصر
<table>شائعًا.۔ -
HTML 4.01 (1999)
تم التقدم في فصل الهيكلية عن العرض، وتم تقديم CSS.۔ أصبح من المستحب إنشاء مواقع متوافقة مع المعايير.۔ علاوة على ذلك، تم تحسين التدويل وإمكانية الوصول للوثائق.۔
-
إتش تي إم إل 5 (2014)
أحدث إصدار رئيسي، يُقدِّم دعمًا للفيديو والصوت، والكانفس، والتخزين المحلي، وتحديد المواقع الجغرافية، وواجهات برمجة التطبيقات الجديدة الأخرى.۔ إنّه متوافق مع الأجهزة المحمولة، مما يُمكّن من تطوير تطبيقات ويب أكثر تفاعلية.۔
إتش تي إم إل 5.2 هو إصدار من إتش تي إم إل أُوصي به في عام 2017، وهو عبارة عن تحسين لإصدار إتش تي إم إل 5.۔ منذ إتش تي إم إل 5.2، يتم تحديثه باستمرار كـ المعيار الحي لإتش تي إم إل بدلاً من أن يكون له رقم إصدار ثابت.۔
تطورت إتش تي إم إل عبر هذه الإصدارات، لتصبح تكنولوجيا ويب أكثر مرونة وقوة.۔
يمكنك متابعة المقالة أعلاه باستخدام Visual Studio Code على قناتنا على YouTube.۔ يرجى التحقق من القناة على YouTube أيضًا.۔