From 41c76addc97200aa71105773397aa4edd2af6b4c Mon Sep 17 00:00:00 2001 From: Florian Merz Date: Thu, 11 Feb 2021 14:44:35 +0100 Subject: unslug ar: move --- .../how_does_the_internet_work/index.html | 116 +++++++ .../index.html" | 116 ------- .../first_steps/how_css_is_structured/index.html | 178 ++++++++++ .../css/styling_text/styling_lists/index.html | 384 +++++++++++++++++++++ files/ar/learn/forms/index.html | 114 ++++++ .../css_basics/index.html | 297 ++++++++++++++++ .../index.html" | 297 ---------------- files/ar/learn/how_to_contribute/index.html | 82 ----- files/ar/learn/html/forms/index.html | 114 ------ files/ar/learn/html/tables/index.html | 36 ++ .../index.html" | 36 -- .../index.html" | 305 ---------------- 12 files changed, 1125 insertions(+), 950 deletions(-) create mode 100644 files/ar/learn/common_questions/how_does_the_internet_work/index.html delete mode 100644 "files/ar/learn/common_questions/\331\203\331\212\331\201\331\212\330\251_\330\271\331\205\331\204/index.html" create mode 100644 files/ar/learn/css/first_steps/how_css_is_structured/index.html create mode 100644 files/ar/learn/css/styling_text/styling_lists/index.html create mode 100644 files/ar/learn/forms/index.html create mode 100644 files/ar/learn/getting_started_with_the_web/css_basics/index.html delete mode 100644 "files/ar/learn/getting_started_with_the_web/\330\243\330\263\330\247\330\263\331\212\330\247\330\252_\330\265\331\201\330\255\330\247\330\252_\330\247\331\204\330\267\330\261\330\262_\330\247\331\204\331\205\330\252\330\261\330\247\330\265\330\251/index.html" delete mode 100644 files/ar/learn/how_to_contribute/index.html delete mode 100644 files/ar/learn/html/forms/index.html create mode 100644 files/ar/learn/html/tables/index.html delete mode 100644 "files/ar/learn/html/\330\247\331\204\330\254\330\257\330\247\331\210\331\204/index.html" delete mode 100644 "files/ar/learn/html/\330\250\330\263\331\212\330\267\330\251_html_\330\245\331\206\330\264\330\247\330\241_\330\265\331\201\330\255\330\251/index.html" (limited to 'files/ar/learn') diff --git a/files/ar/learn/common_questions/how_does_the_internet_work/index.html b/files/ar/learn/common_questions/how_does_the_internet_work/index.html new file mode 100644 index 0000000000..2a3cd7e46f --- /dev/null +++ b/files/ar/learn/common_questions/how_does_the_internet_work/index.html @@ -0,0 +1,116 @@ +--- +title: كيف يعمل الإنترنت؟ +slug: Learn/Common_questions/كيفية_عمل +tags: + - الإنترنت + - درس + - دليل + - مبتدأ +translation_of: Learn/Common_questions/How_does_the_Internet_work +--- +
+
{{LearnSidebar}}
+
+ +
+

يتحدث هذا المقال عن اﻹنترنت وكيفية عملها.

+
+ + + + + + + + + + + + +
+

لا يوجد، لكن حبذا لو تقرأ المقال الآتي أولا: كيف أبدأ بتصميم موقعي.

+ 		+

متطلبات:

+
+

سوف تتعلم الأساسيات التقنية للبنية التحتية للويب والفرق بين الشابكة (الإنترنت) والويب.

+ 		+

الهدف:

+
+ +

+ +

ملخص

+ +

الشابكة (الإنترنت) هي عماد الويب. والبنية التحتية التي جعلته ممكنا. وفي الأساس الإنترنت هي شبكة واسعة من الحواسيب التي تتواصل فيما بينها.

+ +

تاريخ الإنترنت غير واضح تماما. فقد بدأت في ستينات القرن الماضي كمشروع بحث للجيش الأمريكي، وبدعم العديد من الجامعات العمومية والشركات الخاصة تطورت إلى بنية تحتية عامة. التقانات المختلفة التي تدعم الإنترنت تطورت عبر الزمن، لكن الطريقة التي تعمل بها لم تتغير كثيرا: فالإنترنت هي طريقة اتصال الحواسيب مع بعضها وضمان أنه مهما حدث تبقى تلك الحواسيب متصلة.

+ +

التعلم الفعال

+ + + +

نظرة أعمق

+ +

شبكة بسيطة

+ +

عندما نرغب بجعل حاسوبين يتصلان ببعضهما، سنربطهما إما فيزيائيا (عادة ما يكون بكابل إيثرنت) أو لاسلكيا (على سبيل المقال نظامي الوايفاي أو البلوتوث). جميع الحواسيب الحديثة تستطيع استعمال أي من هذه الارتباطات.

+ +
+

 فيما تبقى من المقال سنتحدث فقط عن الكابلات الفيزيائية، لكن الشبكات اللاسلكية تعمل بنفس المبدأ.

+
+ +

Two computers linked together

+ +

شبكة كهذه ليست محدودة بحاسوبين فحسب، يمكنك ربط حواسيب أخرى قدر ما تريد. لكن سرعان ما تصبح هذه الشبكة معقدة. مثلا لنقل أنك تريد ربط عشر حواسيب فستحتاج إلى 45 كابلا مع تسعة قوابس في كل حاسوب!

+ +

Ten computers all together

+ +

لحل هذه المشكلة، يجب أن نربط كل حاسوب في الشبكة بحاسوب مصغر خاص يسمى روتر. هذا الروتر كعامل الإشارة في السكك الحديدية، لديه مهمة واحدة وهي ضمان وصول رسالة ما من حاسوب إلى الحاسوب المقصود الصحيح. لإرسال رسالة إلى الحاسوب B، على الحاسوب A أن يُرسل الرسالة إلى الروتر، الذي سيُوجهها بدوره إلى الحاسوب B ويضمن أن لا تُرسل إلى الحاسوب C مثلا.

+ +

عند إضافة روتر إلى الشبكة من عشرة حواسيب، كل ما نحتاجه هو عشرة كابلات مع مقبس في كل حاسوب وروتر بعشرة مقابس.

+ +

Ten computers with a router

+ +

شبكة من الشبكات

+ + + +

Two routers linked together

+ + + +

Routers linked to routers

+ +

Such a network comes very close to what we call the Internet, but we're missing something. We built that network for our own purposes. There are other networks out there: your friends, your neighbors, anyone can have their own network of computers. But it's not really possible to set cables up between your house and the rest of the world, so how can you handle this? Well, there are already cables linked to your house, for example, electric power and telephone. The telephone infrastructure already connects your house with anyone in the world so it is the perfect wire we need. To connect our network to the telephone infrastructure, we need a special piece of equipment called a modem. This modem turns the information from our network into information manageable by the telephone infrastructure and vice versa.

+ +

A router linked to a modem

+ +

So we are connected to the telephone infrastructure. The next step is to send the messages from our network to the network we want to reach. To do that, we will connect our network to an Internet Service Provider (ISP). An ISP is a company that manages some special routers that are all linked together and can also access other ISPs' routers. So the message from our network is carried through the network of ISP networks to the destination network. The Internet consists of this whole infrastructure of networks.

+ +

Full Internet stack

+ +

Finding computers

+ +

If you want to send a message to a computer, you have to specify which one. Thus any computer linked to a network has a unique address that identifies it, called an "IP address" (where IP stands for Internet Protocol). It's an address made of a series of four numbers separated by dots, for example: 192.168.2.10.

+ +

That's perfectly fine for computers, but we human beings have a hard time remembering that sort of address. To make things easier, we can alias an IP address with a human readable name called a domain name. For example, google.com is the domain name used on top of the IP address 173.194.121.32. So using the domain name is the easiest way for us to reach a computer over the Internet.

+ +

Show how a domain name can alias an IP address

+ +

Internet and the web

+ +

As you might notice, when we browse the Web with a Web browser, we usually use the domain name to reach a website. Does that mean the Internet and the Web are the same thing? It's not that simple. As we saw, the Internet is a technical infrastructure which allows billions of computers to be connected all together. Among those computers, some computers (called Web servers) can send messages intelligible to web browsers. The Internet is an infrastructure, whereas the Web is a service built on top of the infrastructure. It is worth noting there are several other services built on top of the Internet, such as email and {{Glossary("IRC")}}.

+ +

Next steps

+ + diff --git "a/files/ar/learn/common_questions/\331\203\331\212\331\201\331\212\330\251_\330\271\331\205\331\204/index.html" "b/files/ar/learn/common_questions/\331\203\331\212\331\201\331\212\330\251_\330\271\331\205\331\204/index.html" deleted file mode 100644 index 2a3cd7e46f..0000000000 --- "a/files/ar/learn/common_questions/\331\203\331\212\331\201\331\212\330\251_\330\271\331\205\331\204/index.html" +++ /dev/null @@ -1,116 +0,0 @@ ---- -title: كيف يعمل الإنترنت؟ -slug: Learn/Common_questions/كيفية_عمل -tags: - - الإنترنت - - درس - - دليل - - مبتدأ -translation_of: Learn/Common_questions/How_does_the_Internet_work ---- -
-
{{LearnSidebar}}
-
- -
-

يتحدث هذا المقال عن اﻹنترنت وكيفية عملها.

-
- - - - - - - - - - - - -
-

لا يوجد، لكن حبذا لو تقرأ المقال الآتي أولا: كيف أبدأ بتصميم موقعي.

- 		-

متطلبات:

-
-

سوف تتعلم الأساسيات التقنية للبنية التحتية للويب والفرق بين الشابكة (الإنترنت) والويب.

- 		-

الهدف:

-
- -

- -

ملخص

- -

الشابكة (الإنترنت) هي عماد الويب. والبنية التحتية التي جعلته ممكنا. وفي الأساس الإنترنت هي شبكة واسعة من الحواسيب التي تتواصل فيما بينها.

- -

تاريخ الإنترنت غير واضح تماما. فقد بدأت في ستينات القرن الماضي كمشروع بحث للجيش الأمريكي، وبدعم العديد من الجامعات العمومية والشركات الخاصة تطورت إلى بنية تحتية عامة. التقانات المختلفة التي تدعم الإنترنت تطورت عبر الزمن، لكن الطريقة التي تعمل بها لم تتغير كثيرا: فالإنترنت هي طريقة اتصال الحواسيب مع بعضها وضمان أنه مهما حدث تبقى تلك الحواسيب متصلة.

- -

التعلم الفعال

- - - -

نظرة أعمق

- -

شبكة بسيطة

- -

عندما نرغب بجعل حاسوبين يتصلان ببعضهما، سنربطهما إما فيزيائيا (عادة ما يكون بكابل إيثرنت) أو لاسلكيا (على سبيل المقال نظامي الوايفاي أو البلوتوث). جميع الحواسيب الحديثة تستطيع استعمال أي من هذه الارتباطات.

- -
-

 فيما تبقى من المقال سنتحدث فقط عن الكابلات الفيزيائية، لكن الشبكات اللاسلكية تعمل بنفس المبدأ.

-
- -

Two computers linked together

- -

شبكة كهذه ليست محدودة بحاسوبين فحسب، يمكنك ربط حواسيب أخرى قدر ما تريد. لكن سرعان ما تصبح هذه الشبكة معقدة. مثلا لنقل أنك تريد ربط عشر حواسيب فستحتاج إلى 45 كابلا مع تسعة قوابس في كل حاسوب!

- -

Ten computers all together

- -

لحل هذه المشكلة، يجب أن نربط كل حاسوب في الشبكة بحاسوب مصغر خاص يسمى روتر. هذا الروتر كعامل الإشارة في السكك الحديدية، لديه مهمة واحدة وهي ضمان وصول رسالة ما من حاسوب إلى الحاسوب المقصود الصحيح. لإرسال رسالة إلى الحاسوب B، على الحاسوب A أن يُرسل الرسالة إلى الروتر، الذي سيُوجهها بدوره إلى الحاسوب B ويضمن أن لا تُرسل إلى الحاسوب C مثلا.

- -

عند إضافة روتر إلى الشبكة من عشرة حواسيب، كل ما نحتاجه هو عشرة كابلات مع مقبس في كل حاسوب وروتر بعشرة مقابس.

- -

Ten computers with a router

- -

شبكة من الشبكات

- - - -

Two routers linked together

- - - -

Routers linked to routers

- -

Such a network comes very close to what we call the Internet, but we're missing something. We built that network for our own purposes. There are other networks out there: your friends, your neighbors, anyone can have their own network of computers. But it's not really possible to set cables up between your house and the rest of the world, so how can you handle this? Well, there are already cables linked to your house, for example, electric power and telephone. The telephone infrastructure already connects your house with anyone in the world so it is the perfect wire we need. To connect our network to the telephone infrastructure, we need a special piece of equipment called a modem. This modem turns the information from our network into information manageable by the telephone infrastructure and vice versa.

- -

A router linked to a modem

- -

So we are connected to the telephone infrastructure. The next step is to send the messages from our network to the network we want to reach. To do that, we will connect our network to an Internet Service Provider (ISP). An ISP is a company that manages some special routers that are all linked together and can also access other ISPs' routers. So the message from our network is carried through the network of ISP networks to the destination network. The Internet consists of this whole infrastructure of networks.

- -

Full Internet stack

- -

Finding computers

- -

If you want to send a message to a computer, you have to specify which one. Thus any computer linked to a network has a unique address that identifies it, called an "IP address" (where IP stands for Internet Protocol). It's an address made of a series of four numbers separated by dots, for example: 192.168.2.10.

- -

That's perfectly fine for computers, but we human beings have a hard time remembering that sort of address. To make things easier, we can alias an IP address with a human readable name called a domain name. For example, google.com is the domain name used on top of the IP address 173.194.121.32. So using the domain name is the easiest way for us to reach a computer over the Internet.

- -

Show how a domain name can alias an IP address

- -

Internet and the web

- -

As you might notice, when we browse the Web with a Web browser, we usually use the domain name to reach a website. Does that mean the Internet and the Web are the same thing? It's not that simple. As we saw, the Internet is a technical infrastructure which allows billions of computers to be connected all together. Among those computers, some computers (called Web servers) can send messages intelligible to web browsers. The Internet is an infrastructure, whereas the Web is a service built on top of the infrastructure. It is worth noting there are several other services built on top of the Internet, such as email and {{Glossary("IRC")}}.

- -

Next steps

- - diff --git a/files/ar/learn/css/first_steps/how_css_is_structured/index.html b/files/ar/learn/css/first_steps/how_css_is_structured/index.html new file mode 100644 index 0000000000..f65331a2bd --- /dev/null +++ b/files/ar/learn/css/first_steps/how_css_is_structured/index.html @@ -0,0 +1,178 @@ +--- +title: Readable CSS +slug: Web/Guide/CSS/Getting_started/Readable_CSS +translation_of: Learn/CSS/Introduction_to_CSS/Syntax#Beyond_syntax_make_CSS_readable +translation_of_original: Web/Guide/CSS/Getting_started/Readable_CSS +--- +

{{ CSSTutorialTOC() }}

+ +

{{ previousPage("/en-US/docs/Web/Guide/CSS/Getting_Started/Selectors", "Selectors")}}This is the 6th section of the CSS Getting Started tutorial; it discusses the style and grammar of the CSS language itself. You change the way your sample CSS file looks, to make it more readable.

+ +

معلومة: CSS مقروء (قابل للقراءة = سهل القراءة)

+ +

يمكنك إضافة مساحات فارغة وأيضا تعليقات داخل ملف النمط لجعل الشيفرة البرمجية (code) أكثر قابلية وسهولة للقراءة. أيضا يمكنك تجميع العناصر المختلفة معا عندما تتطابق الخصائص بينهم.

+ +

المساحة الفارغة

+ +

المساحة الفارغة أوالبيضاء هي عبارة عن مسافات قد تكون مسافة من خطوة واحدة أو من عدة خطوات وقد تكون عبارة عن سطر جديد. يمكنك إضافة المساحات البيضاء إلى ملف النمط الخاص بك لجعله أكثر قابلية وسهولة للقراءة.

+ +

في سياق تخطيط وتكوين الصفحة، المساحات الفارغة تكون جزءًا من الصفحة كمسافات بين الأعمدة والسطور أو كهوامش.

+ +

يحتوي ملف النمط الخاص بك حاليا على قاعدة واحدة لكل سطر، وعدد أدنى من المساحات الفارغة أو البيضاء. في الأنماط المعقدة سيكون من الصعب قراءة ملف النمط، مما يجعل من الصعب الحفاظ عليها.

+ +

التخطيط دائما ما يكون شَخْصِـيًّا، ولكن إذا كان ملف النمط بين مجموعة من الأفراد بصفته جزءً من مشاريع مشتركة، من المحتمل أن تلك المشاريع تحمل اتفاقيات خاصة بها يتم الأعتماد عليها والعمل بها.

+ +

 

+ +
+
Examples
+ +

بعض الأشخاص يفضلون دمج الخصائص مع بعضها، فقط يقومون بتقسيم الخط عندما يصبح طويلا جدا:

+ +

.carrot {color: orange; text-decoration: underline; font-style: italic;}

+ +


+ بعض الناس يفضلون خاصية واحدة لكل سطر:

+ +
.carrot
+{
+color: orange;
+text-decoration: underline;
+font-style: italic;
+}
+
+ +

بعض الأشخاص يستخدمون مسافتين أو أربع أو علامة التبويب الشائعة:

+ +
.carrot {
+  color: orange;
+  text-decoration: underline;
+  font-style: italic;
+}
+
+ +


+ (بعض الأشخاص يفضلون جعل كل شيء عموديا  (ولكن تخطيط مثل هذا من الصعب الحفاظ عليه.

+ +
.carrot
+    {
+    color           : orange;
+    text-decoration : underline;
+    font-style      : italic;
+    }
+
+ +

بعض الأشخاص يستخدمون مزيج من المسافات الفارغة أو البيضاء لتعزيز سهولة القراءة.

+ +
.vegetable         { color: green; min-height:  5px; min-width:  5px }
+.vegetable.carrot  { color: orange;    height: 90px;     width: 10px }
+.vegetable.spinach { color: darkgreen; height: 30px;     width: 30px }
+
+
+ +

بعض الأشخاص يستخدمون علامة التبويب والبعض الآخر يستخدم فقط المسافات البيضاء.

+ +

التعليقات
+  

+ +

التعليقات في ملف النمط تبدأ بـ «*/» وتنتهي بـ«/*».
+
+ يمكنك استخدام التعليقات في ملف النمط الخاص بك لكتابة تعليقات وتعليمات، وأيضا لكتابة تعليمات مؤقتة قد يكون الغرض منها هو اختبار العملية.
+
+ التعليق في جزء من النمط، ضع هذا الجزء في تعليق بحيث يتجاهله المتصفح عند قراءة الملف، وكن حذرا في بداية ونهاية التعليق. بقية الأنماط والخصائص يجب أن يكون لها البنية الصحيحة.

+ +
+
Example
+ +
/* style for initial letter C in first paragraph */
+.carrot {
+  color:            orange;
+  text-decoration:  underline;
+  font-style:       italic;
+  }
+
+
+ +

تجميع العناصر
+
+ عندما يكون لمجموعة من العناصر عدد من الخصائص المتشابهة في النمط، يمكنك تجميع العناصر مع الفصل بينهم بعلامة فاصلة. وتـنطبق هذة الخصائص على جميع العناصر المجمعة.
+  

+ +

في أماكن أخرى من ملف النمط يمكنك أيضا تجميع عدد من العناصر ولكن فرديا، وتطبيق خصائص فردية عليهم.

+ +
+
Example
+ +

This rule makes {{ HTMLElement("h1") }}, {{ HTMLElement("h2") }}, and {{ HTMLElement("h3") }} elements the same color.

+ +

إنها مناسبة لتحديد اللون لمجموعة من العناصر في مكان واحد، في حالة لابد من تغييرها.

+ +
/* color for headings */
+h1, h2, h3 {color: navy;}
+
+
+ +

العمل: إضافة تعليقات و تحسين التخطيط

+ +
    +
  1. قم بتعديل ملف النمط الخاص بك، وقم بالتأكد أن لديها هذه القواعد في ذلك (في أي أمر): + 
    strong {color: red;}
+.carrot {color: orange;}
+.spinach {color: green;}
+#first {font-style: italic;}
+p {color: blue;}
+
    +
    2. +
  2. جعلها أكثر قابلية للقراءة من خلال إعادة ترتيبها بطريقة منطقية، وذلك من خلال إضافة مساحات بيضاء أو فارغة وأيضا تعليقات مناسبة.
    3. +
  3. قم بحفظ التعديلات واذهب إلى المتصفح لتشاهد الصفحة للتَّـأكد أنه لا يوجد أي تأثير على ملف النمط من خلال عمله. + + + + + + + + + +
    Cascading Style Sheets
    Cascading Style Sheets
    +
    4. +
+ +
+
تحدي
+ +
 
+ +

ضع تعليقا يوجد به جزء من ملف النمط الخاص بك، بدون  تغيير أي شيء آخر ، لعمل أول حرف من الوثيقة أحمر اللون.

+ + + + + + + + + + +
Cascading Style Sheets
Cascading Style Sheets
+ +

(هناك العديد من الطرق لفعل ذلك)

+ +
+
Possible solution
+ +

One way to do this is to put comment delimiters around the rule for .carrot:

+ +
/*.carrot {
+  color: orange;
+}*/
+ +

Hide solution

+
+ +

See a solution for the challenge.

+
+ +

ما التالي؟

+ +

{{ nextPage("/en-US/docs/Web/Guide/CSS/Getting_Started/Text_styles", "Text styles") }}Your sample stylesheet has used italic text and underlined text. The next page describes more ways to specify the appearance of text in your document.

diff --git a/files/ar/learn/css/styling_text/styling_lists/index.html b/files/ar/learn/css/styling_text/styling_lists/index.html new file mode 100644 index 0000000000..2b7fdeb726 --- /dev/null +++ b/files/ar/learn/css/styling_text/styling_lists/index.html @@ -0,0 +1,384 @@ +--- +title: القوائم +slug: Web/Guide/CSS/Getting_started/القوائم +translation_of: Learn/CSS/Styling_text/Styling_lists +translation_of_original: Web/Guide/CSS/Getting_started/Lists +--- +

{{ CSSTutorialTOC() }}

+ +

 الصفحة السابقة هي ("/en-US/docs/Web/Guide/CSS/Getting_Started/Content", "Content") أما هذا الجزء فهو العاشِر في سلسلة  تعليم لغة CSS على هذا الموقع  CSS Getting Started، وهو يصف كيف يُمكن استخدام لغة الـCSS لتحديد مظهر القائمة. ستقوم بإنشاء مثال مستند يحتوي على قائمة بالـHTML  وملف تنسيق بلغة الـCSS والذي من خلاله سوف نقوم بتنسيق القائمة التي قمنا بإنشَائها. 

+ +

معلومات عن القوائم 

+ +

لو نظرت إلى الجزء السابق، سوف يتضح لك  كيف يمكن إضافة محتـوًى قبل أي عنصر بحيث يظهر وكأنّه عنصرٌ في قائمة.

+ +

تقدم لغة الـCSS بعض الخواص المُصَمَّـمَـة للقائمة، والتي يجب استخدامها دائما مع القوائم.

+ +

لتحديد نمط القائمة، عليك استخدام هذه الخاصية «list-style» وذلك لتحديد نوع  العلامة الموجودة قبل كل عنصر في القائمة. 

+ +
+

من الممكن أن يتم اختيار القائمة ككل بهذا الوسم «ul» أو اختيار عنصر بداخل القائمة من خلال هذا الوسم «li».  

+ +

وعند اختيار القائمة ككل فإنَّ هذا الوسم يسمى الأب للقائمة وهو«ul»، ويورث الخواص التى تٌطبق عليه لكُـلِّ عنصر في القائمة. 

+
+ +

القوائم غير المرتبة

+ +

 في القوائم غير المُرَتَّـبة، يكون كل عنصر من القائمة معَلَّــمًا بنفس الطريقة. 

+ +

 يوجد ثلاثة أنواع من العلامات، وأدناه هي كيفية عرض المتصفح لهذه العلامات:

+ +

• disc  قرص 

+ +

○ circle دائرة

+ +

◘ square مربع

+ +

بدلا من ذلك، يمكن تحديد رابط صورة لاستخدامها كعلامة للعناصر بدل من العلامات السابقة.

+ +
+

مثال 

+ +

 هذه القواعد تُـوَضِّح علامات مختلفة لأصناف (classes) مختلفة من عناصر القائمة:

+ +
li.open {
+    list-style: circle;
+}
+li.closed {
+    list-style: disc;
+}
+
+ +

عندما يتم استعمال هذه الأصناف (classes) في قائمة، تقوم بالتمييز بين العناصر المفتوحة والمغلقة (مثلًا في قائمة مهامّ).

+ +
<ul>
+  <li class="open">Lorem ipsum</li>
+  <li class="closed">Dolor sit</li>
+  <li class="closed">Amet consectetuer</li>
+  <li class="open">Magna aliquam</li>
+  <li class="closed">Autem veleum</li>
+</ul>
+
+ +

وهكذا تبدو النتيجة: 

+ +
  ○ Lorem ipsum
+ +
  •  Dolor sit
+ +
  •  Amet consectetuer
+ +
  ○ Magna aliquam
+ +
  • Autem veleum
+ +
 
+
+ +

القوائم المُـرَتَّـبة 

+ +

في القوائم المُرتّبة، يكون لكل عنصر علامة مختلفة تُميّز موضعه في القائمة.

+ +

استخدم الخاصية «list-style» لتعيين نمط القائمة، لتحديد نوع العلامة التي تظهر قبل كل عنصرفي القائمة.

+ + + +
+
 
+ +

مثال                                                                                                                                              

+ +
القاعدة التّالية تجعل العناصر في القائمة المرتّبة <ol> والتي تٌميز بصنف .«info» مُرتبة بحروف لاتينية كبيرة.  
+ +
 
+ +
<ol class="info">
+  <li>Lorem ipsum</li>
+  <li>Dolor sit</li>
+  <li>Amet consectetuer</li>
+  <li>Magna aliquam</li>
+  <li>Autem veleum</li>
+</ol>
+ +
ol.info {
+    list-style: upper-latin;
+}
+
+ +
+

عند تطبيق خاصية النمط على الـ «ol»  يُوَرِّثُ هذه الخاصية إلى الأبناء وهم عناصر القائمة المرتبة وهي العناصر المسبوقة بوسم «li».

+
+ +

فتكون النتيجة كالتالي:

+ +
ِA. Lorem ipsum
+ +
B. Dolor sit
+ +
C. Amet consectetuer
+ +
D. Magna aliquam
+ +
E. Autem veleum
+
+ +
+
+

تفاصيل أكثر                                                                             

+ +
الخاصية «list-style» هي خاصية مختصرة أي أنه من الممكن استخدامها إذا أردت أن يكون نمط القائمة سواء كان 
+ +
 (صورة أو رقم أو شكل أو حرف )
+ +
       ولكن يمكن أن تستخدم خواص منفردة لكل شكل على حدة وليكن للصورة لها  خاصية محددة مثل «list-style-image»    
+ +

يمكنك مراجعة هذه الخاصية وما بها من تفاصيل من خلال هذه الصفحة  list style 

+ +
إن كنت تستخدم لغة HTML فإنها تُـوفر وسوما مُختلفة، فعلى سبيل المثال  للقوائم المرتبة يُستخدم هذا الوسم «ol»
+ +
والقوائم  الغير مرتبة «ul»
+ +
  فيفضّل استخدام هذه القوائم بحسب دلالتها ولكن من الممكن إذا أردت أن تجعل القوائم المرتبة كغير المرتبة شكلا 
+ +
والعكس، فذلك يتم من خلال الـCSS أيضا يتم كل هذا باستخدام الخواص المختلفة لتحصل على ما تريد من نتائج 
+ +
ولكن يُفَضَّـل أن تُسْتَخدم كل قائمة حسب وضعها والاستخدام الخاص بها. 
+ +
 
+ +

قد تختلف المتصفّحات في طرق عرضها لتنسيق القوائم، لا يُمكن أن تحصُل على نفس النتيجة في كل المتصفحات. 

+
+
+ +

العَـدَّادَات

+ +
+

ملاحظة هامّة:

+ +
  بعض المتصفحات لا تدعم العدّادات، تقدّم هذه الصّفحة CSS contents and browser comptability على موقع QuirksMode معلومات تفصيلية عن دعم  المتصفحات لهذه الميزة وميزات أخرى.
+ +
كما توفّر الصّفحات الفرديّة في CSS مرجعا للمعلومات عن دعم  المتصفحات أيضا لهذه الخاصية وغيرها.
+
+ +

 

+ +
يُمكن استخدام العدّادات لعدّ أيّة عناصر، وليس فقط عناصر القوائم، فمثلًا يمكن عدّ العناوين والفقرات في المستند.
+ +
تحتاج إلى إنشاء عدّاد counter باسم خاص بك لتستخدمه فى العّد.
+ +
 
+ +
 يمكن تهيئة العدّاد قبل البدء بالعدّ باستخدام الخاصية «counter-reset» واسم العدادَ الخاص بك الذي أنشأته. 
+ +
وعليك أن تعلم أن الأب للعنصر الذي تقوم بِعده هو المكان الأنسب لتهيئة العّداد، ولكن يمكن استخدام أي عنصر يأتي قبل العناصر المطلوب عدّها.
+ +
 
+ +
 في كلّ عنصر ترغب بعدّه، استخدم الخاصية «counter-increment» مع اسم العّداد الذي تٌريده.
+ +
 استخدم «befor» ،«:after:» لعرض العدّاد، مع استخدام هذه الخاصية «content» مع العنصر المٌحدد المُراد عّده (سيتم شرح ذلك لاحقاَ).
+ +
يمكنك معرفة معلومات أكثر عن هذه الخاصية في هذه الصفحة Content. 
+ +
 
+ +

استخدام ()counter مع اسم العّداد كقيمة لـcontent   

+ +
ويمكن كذلك استخدام نوع للعلامة فى العد. الأنواع المُتاحة هي التي تم عرضها في فقرة القوائم المرتّبة.
+ +

عادةً يزيد العنصر الّذي يعرض العدّاد من قيمته. 

+ +
+
          مثال                                                                                                                                            
+ +
 
+ +
    هذه القاعدة تُنشئ عدّادًا لكلّ عنصر<h3> له تصنيف (كلاس) «numbered»:                                          
+ +
h3.numbered {
+    counter-reset: mynum;
+}
+
+ +

 أما هذه القاعدة فهى تعرض عّداد الـ <p>  والتي لها تصنيف «numbered»

+ +
<p class="numbered">Lorem ipsum</p>
+<p class="numbered">Dolor sit</p>
+<p class="numbered">Amet consectetuer</p>
+<p class="numbered">Magna aliquam</p>
+<p class="numbered">Autem veleum</p>
+
+ +
body {
+   counter-reset: mynum;
+}
+p.numbered:before {
+  content: counter(mynum) ": ";
+  counter-increment: mynum;
+  font-weight: bold;
+}
+
+ +

والنتيجة ستبدُو هكذا:

+ +
1: Lorem ipsum
+ +
2: Dolor sit
+ +
3: Amet consectetuer
+ +
4: Magna aliquam
+ +
5:  Autem veleum
+ +
 
+
+ +
+
تفاصِيل أكثر                                                                                                                                 
+ +
 
+ +
   لا تستطيع استخدام العَدادات إلا إذا تيقنت من أنَ كل شخص يستخدم العدادات يستعمل  متصفحاً يُدعمها.  
+ +
  العًدادات بها مِيزات ويمكن تنسيقها منفصلة عن عنصر القَائمة المرافِقة لها كما في المثال السابق 
+ +
ترى أن العًدادات لها تنسيق خاص فهي بِخط عريض غير عناصر القّائمة.  
+ +
 
+ +
يمكن أيضًا استخدام العدّادات بطرق أكثر تعقيدًا؛ مثلًا: لعدّ الفقرات والعناوين والعناوين الفرعيّة والفقرات في المستندات الرسمية.
+ +
 ولتفاصِيل أكثر عليك الرجوع إلى هذِه الصفحة  Automatic counters and numbering.
+
+ +

تمرين: قوائم مُنسقة

+ +

   قم بإنشاء ملف  HTML  باسم doc2.html، انسخ والصق هذا المحتوى إلى الملف الخاص بك:

+ +
<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="UTF-8">
+    <title>Sample document 2</title>
+    <link rel="stylesheet" href="style2.css">
+  </head>
+  <body>
+
+    <h3 id="oceans">The oceans</h3>
+    <ul>
+      <li>Arctic</li>
+      <li>Atlantic</li>
+      <li>Pacific</li>
+      <li>Indian</li>
+      <li>Southern</li>
+    </ul>
+
+    <h3 class="numbered">Numbered paragraphs</h3>
+    <p class="numbered">Lorem ipsum</p>
+    <p class="numbered">Dolor sit</p>
+    <p class="numbered">Amet consectetuer</p>
+    <p class="numbered">Magna aliquam</p>
+    <p class="numbered">Autem veleum</p>
+
+  </body>
+</html>
+
+ +

  قم بإنشاء ملف CSS وقُم بتسميته  style2.css، انسخ والصق هذه الشيفرة البرمجية إلى صفحتك:

+ +
/* numbered paragraphs */
+h3.numbered {counter-reset: mynum;}
+
+p.numbered:before {
+  content: counter(mynum) ": ";
+  counter-increment: mynum;
+  font-weight: bold;
+}
+
+ +

قم بتغيير أسلوب  التعليقات كما تحبّ إن لم يعجبك هذا.

+ +

افتح الملف على المٌتصفح الخاص بِك. إذا كان متصفحط يَدعم العّدادات سوف ترى النتيجة كما هي موضحة أدناه، وإن لم يكُن يُدعمها فلن ترى إلاَّ الأرقام والنُقتطان قبل القائمة التي هي بعنوان «Numbered paragraphs» :

+ +

The oceans

+ +
Arctic
+ +
Atlantic
+ +
Pacific
+ +
Indian
+ +
Southern
+ +

Numbered paragraphs

+ +
1:Lorem ipsum
+ +
2:Dolor sit
+ +
3:Amet consectetuer
+ +
4:Magna aliquam
+ +
5:Autem veleum
+ +
+
 تمرين إضافي                                                                                                                                          
+ +
 أضِف قاعدة لملف التنسيق الخاص بك بحيث تجعل النمط قبل عناصِر القائِمة بحروف رومانية من i إلى v، بحيث تحصل على هذه النتيجة: 
+ +
 
+ + + + + + + +
+

The oceans

+ +
    +
  • Arctic
    • +
  • Atlantic
    • +
  • Pacific
    • +
  • Indian
    • +
  • Southern
    • +
+
+ +

وقم بتغييرها مرة أُخرى إلى حروف لاتينية كبيرة قبل عناصرالقائمة، وستكون النتيجة هكذا: 

+ + + + + + + +
+

(A) The oceans

+ +

. . .

+ +

(B) Numbered paragraphs

+ +

. . .

+
+
+ +

See solutions to these challenges.

+ +

ما هو القادم ؟

+ +

الصفحة القادمو هي ("/en-US/docs/Web/Guide/CSS/Getting_Started/Boxes", "Boxes")

+ +

عندما يعرض المتصفّح مستند الخاص بك، فإِنه يُنشئ مساحات حول العناصر عندما يضعها في مواضعها في الصّفحة. الصفّحة القادِمة تصف كيف يُمكن استخدام لغة الـCSS لتَّعامل مع  هذه الأشكال من خلال الـboxes.

diff --git a/files/ar/learn/forms/index.html b/files/ar/learn/forms/index.html new file mode 100644 index 0000000000..3c8f449476 --- /dev/null +++ b/files/ar/learn/forms/index.html @@ -0,0 +1,114 @@ +--- +title: نماذج HTML +slug: Learn/HTML/Forms +tags: + - Beginner + - Featured + - Forms + - Guide + - HTML + - Landing + - Learn + - NeedsTranslation + - TopicStub + - Web +translation_of: Learn/Forms +--- +
{{LearnSidebar}}
+ +

توفر هذه الوحدة سلسلة من المقالات التي ستساعدك على إتقان نماذج HTML. تعد نماذج HTML أداة قوية جدًا للتفاعل مع المستخدمين ؛ ومع ذلك ، لأسباب تاريخية وتقنية ، ليس من الواضح دائمًا كيفية استخدامها بكامل طاقتها. في هذا الدليل ، سنغطي جميع جوانب نماذج HTML ، من البنية إلى التصميم ، من معالجة البيانات إلى الأدوات المخصصة.

+ +

المتطلبات الأساسية

+ +

قبل البدء في هذه الوحدة ، يجب أن تعمل على الأقل من خلال مقدمة إلى HTML. في هذه المرحلة ، يجب أن تجد {{anch ("Basic Guides")}} سهل الفهم ، كما يمكنك الاستفادة من دليل أدوات النماذج الأصلية.

+ +

ومع ذلك ، تعد بقية الوحدة أكثر تقدمًا - فمن السهل وضع أدوات النموذج على صفحة ، ولكن لا يمكنك فعل الكثير معها دون استخدام بعض ميزات النموذج المتقدمة و CSS و JavaScript. لذلك ، قبل إلقاء نظرة على الأقسام الأخرى ، نوصيك بالابتعاد وتعلم بعض CSS و JavaScript أولاً.

+ +
+

ملاحظة: إذا كنت تعمل على جهاز كمبيوتر / جهاز لوحي / جهاز آخر حيث لا يمكنك إنشاء ملفاتك الخاصة ، فيمكنك تجربة (معظم) أمثلة التعليمات البرمجية في برنامج تشفير عبر الإنترنت مثل JSBin أو Glitch.

+
+ +

أدلة أساسية

+ + + +
أول نموذج HTML خاص بك
+ +
تقدم المقالة الأولى في سلسلتنا تجربتك الأولى في إنشاء نموذج HTML ، بما في ذلك تصميم نموذج بسيط وتنفيذه باستخدام عناصر HTML الصحيحة وإضافة بعض الأنماط البسيطة جدًا عبر CSS وكيفية إرسال البيانات إلى الخادم.
+ +
كيفية بناء نموذج HTML
+ +
مع استبعاد الأساسيات ، ننظر الآن بمزيد من التفصيل في العناصر المستخدمة لتوفير البنية والمعنى للأجزاء المختلفة من النموذج.
+ +

ما هو شكل الحاجيات المتاحة؟

+ + + +
حاجيات النموذج الأصلي
+ +
نحن الآن نلقي نظرة على وظائف أدوات النماذج المختلفة بالتفصيل ، وننظر في الخيارات المتاحة لجمع أنواع مختلفة من البيانات.
+ +

التحقق من صحة بيانات النموذج وإرسالها

+ + + +
إرسال بيانات النموذج
+ +
تتناول هذه المقالة ما يحدث عندما يرسل المستخدم نموذجًا - إلى أين تذهب البيانات ، وكيف نتعامل معها عندما تصل إلى هناك؟ نحن ننظر أيضًا في بعض المخاوف الأمنية المرتبطة بإرسال بيانات النموذج.
+ +
+ +
التحقق من صحة بيانات النموذج
+ +
لا يعد إرسال البيانات كافيًا - نحتاج أيضًا إلى التأكد من أن البيانات التي يملأها المستخدمون في النماذج بالتنسيق الصحيح الذي نحتاجه لمعالجتها بنجاح ، وأن ذلك لن يفسد تطبيقاتنا. نريد أيضًا مساعدة مستخدمينا على ملء نماذجنا بشكل صحيح وعدم الشعور بالإحباط عند محاولة استخدام تطبيقاتنا. يساعدنا التحقق من صحة النموذج في تحقيق هذه الأهداف - تخبرك هذه المقالة بما تحتاج إلى معرفته.
+ +

أدلة متقدمة

+ + + +
كيفية بناء الحاجيات النموذجية المخصصة
+ +
ستصادف بعض الحالات التي لا توفر فيها أدوات النموذج الأصلية ما تحتاجه ، على سبيل المثال بسبب التصميم أو الوظيفة. في مثل هذه الحالات ، قد تحتاج إلى إنشاء عنصر واجهة مستخدم للنموذج من HTML خام. تشرح هذه المقالة كيفية القيام بذلك والاعتبارات التي يجب أن تكون على دراية بها عند القيام بذلك ، مع دراسة حالة عملية.
+ +
+ +
إرسال النماذج من خلال JavaScript
+ +
تبحث هذه المقالة في طرق استخدام نموذج لتجميع طلب HTTP وإرساله عبر JavaScript مخصص ، بدلاً من إرسال النموذج القياسي. يبحث أيضًا في سبب رغبتك في القيام بذلك ، والآثار المترتبة على القيام بذلك. (راجع أيضًا استخدام كائنات FormData.)
+ +
+ +
نماذج HTML في المتصفحات القديمة
+ +
اكتشاف ميزة تغطية المقالة ، وما إلى ذلك ، يجب إعادة توجيه هذا إلى وحدة اختبار عبر المتصفح ، حيث تتم تغطية نفس الأشياء بشكل أفضل هناك.
+ +

أدلة تصميم النموذج

+ + + +
تصميم نماذج HTML
+ +
توفر هذه المقالة مقدمة لنماذج التصميم باستخدام CSS ، بما في ذلك جميع الأساسيات التي قد تحتاج إلى معرفتها لمهام التصميم الأساسية.
+ +
+ +
التصميم المتقدم لنماذج HTML
+ +
هنا نلقي نظرة على بعض تقنيات تصميم النماذج الأكثر تقدمًا والتي يجب استخدامها عند محاولة التعامل مع بعض العناصر الأكثر صعوبة في التصميم.
+ +
+ +
جدول توافق الخاصية لعناصر واجهة المستخدم للنموذج
+ +
توفر هذه المقالة الأخيرة مرجعًا مفيدًا يسمح لك بالبحث عن خصائص CSS المتوافقة مع عناصر النموذج.
+ +
+ +
مقدمة إلى HTML | تعلم HTML | HTML5 | دليل المطور | مرجع العنصر | المرجع
+ +

إقرأ أيضا

+ + diff --git a/files/ar/learn/getting_started_with_the_web/css_basics/index.html b/files/ar/learn/getting_started_with_the_web/css_basics/index.html new file mode 100644 index 0000000000..70be221b32 --- /dev/null +++ b/files/ar/learn/getting_started_with_the_web/css_basics/index.html @@ -0,0 +1,297 @@ +--- +title: أساسيات الـ CSS +slug: Learn/Getting_started_with_the_web/أساسيات_صفحات_الطرز_المتراصة +tags: + - CSS + - تصميم + - تعلم + - مبتدأ + - ويب +translation_of: Learn/Getting_started_with_the_web/CSS_basics +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/Getting_started_with_the_web/HTML_basics", "Learn/Getting_started_with_the_web/JavaScript_basics", "Learn/Getting_started_with_the_web")}}
+ +
+

السي إس إس CSS (صفحات الطرز المتراصة) هي التعليمات البرمجية التي تستخدم لتنسيق صفحتك. ستناقش مقالة  أساسياتCSS ما تحتاجه لتبدأ باستخدام هذه التقنية. سنجيب عن أسئلة مثل: كيف أجعل النصّ ذا لون أسود أو أحمر؟ كيف أجعل محتويات الصفحة في أماكن محددة على الشاشة؟ كيف أزين الصفحة بصور و بألوان خلفية؟

+
+ +

إذاً ماهي CSS عملياً؟

+ +

لاتعد السي إس إس لغة برمجة (كما الأتش تي أم إل لا تعد كذلك). وهي ليست لغة ترميزية حتى — فهي لغة أنماط (تصميم). هذا يعني أنها تسمح لك بتطبيق تنسيقات على عناصر منتقاة من وثيقة لغة ترميز النص الفائق. على سبيل المثال، لاختيار جميع عناصر الفقرة في صفحة الويب وجعل لون النص بداخلها أحمر، تستطيع استخدام هذه التعليمة:

+ +
p {
+  color: red;
+}
+ +

دعنا ننسخ الثلاث سطور السابقة ونضعها في ملف جديد وبعدها نقوم بحفظ الملف باسم style.css داخل المجلد styles.

+ +

ولكننا مازلنا بحاجة لربط الملف مع وثيقة لغة ترميز النص الفائق. وإلا لن يعمل التنسيق الذي أضافه ملف styls.css على صفحتك. (إذا لم تكن قد تابعت معنا الوحدة من بدايتها قم بقراءة مقالة التعامل مع الملفات و مقالة أساسيات لغة ترميز النص الفائق لمعرفة ما أنت بحاجة إليه لتبدأ).

+ +
    +
  1. افتح الملف index.html والصق السطر أدناه في وسم head: + + 
    <link href="styles/style.css" rel="stylesheet" type="text/css">
    +
    2. +
  2. احفظ الملف وقم بفتح الصفحة في متصفحك. يجب أن ترى شيئاً من هذا القبيل:
    3. +
+ +

A mozilla logo and some paragraphs. The paragraph text has been styled red by our css.

+ +

تهانينا! إذا أصبح نص فقرتك باللون الأحمر، فقد قمت بكتابة أول ملف سي إس إس ناجح.

+ +

تشريح أمر السي إس إس

+ +

دعنا نأخذ نظرة مفصلة حول الثلاث سطور السابقة:

+ +

+ +

تدعى الثلاث سطور السابقة بمجموعة الأمر (rule set). لاحظ أيضاً أسماء كل جزئ من مجموعة الأوامر تلك:

+ +
+
المحدد (المنتقي)
+
هو اسم عنصر الأتش تي أم إل ويوضع في بداية مجموعة الأوامر. يقوم بتحديد العنصر/العناصر التي يراد تنسيقها (في حالتنا العناصر ذات الوسم p). لتقوم بتنسيق عنصر أخر ما عليك سوى تغيير المحدد.
+
الإعلان
+
هو أمر مفرد مثل color: red والذي يحدد الخاصية التي تريد استخدامها لتنسيق العنصر.
+
الخاصية
+
هي الطريقة التي تريد تنسيق العنصر فيها. (في حالتنا الخاصية color هي خاصية للعنصر {{htmlelement("p")}}). في السي إس إس أنت تقوم باختيار الخواص التي تريدها أن تأثر على عنصرك.
+
قيمة الخاصية
+
توضع على يمين اسم الخاصية بعد النقطتين، والتي تحدد واحدة من  العديد من الخيارات المتاحة (يوجد العديد من القيم الأخرى إلى جانب القيمة red للخاصية color).
+
+ +

انتبه للأجزاء المهمة الأخرى من البنية الكتابية لمجموعة الأمر:

+ + + +

إذا لكتابة عدة خواص في مجموعة أمر واحدة ما عليك سوى كتابتهم والفصل بينهم باستخدام فاصلة منقوطة، كالتالي:

+ +
p {
+  color: red;
+  width: 500px;
+  border: 1px solid black;
+}
+ +

اختيار عدة عناصر

+ +

يمكنك أيضاً اختيار عدة أنواع من العناصر وتطبيق عليهم مجموعة أمر واحدة. قم بإضافة عدة محددات مفصولين بفاصلة. على سبيل المثال:

+ +
p,li,h1 {
+  color: red;
+}
+ +

أنواع مختلفة من المحدد

+ +

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

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
اسم المحددماذا يحددمثال
محدد العناصر (يسمى أحيانا بمحدد النوع أو الوسم)جميع العناصر التي من نفس النوعp
+ تحدد العناصر ذات الوسم <p>
محدد الهويةالعنصر الموجود في الصفحة والذي يملك تلك الهوية (في صفحة الأتش تي أم إل يُسمح لك بإعطاء هوية واحدة مميزة لكل عنصر)#my-id
+ تحدد العناصر ذات الهوية <p id="my-id"> أو <a id="my-id">
محدد الصنفالعنصر/العناصر الموجودة على الصفحة والتي تملك ذلك الصنف (يمكن استخدام الصنف نفسه على عدة عناصر).my-class
+ Selects <p class="my-class"> and <a class="my-class">
محدد السمةالعناصر في الصفحة والتي تملك السمة المحددةimg[src]
+ تحدد الصور ذات السمة <img src="myimage.png"> ولكن لا تحدد عنصر الصورة بدون السمة المذكورة <img>
محدد فئة الشبهعنصر/عناصر محدد ولكن عندما يكون بحالة معينة، مثال عندما يتم التحويم فوقه +

a:hover
+ تحدد العناصر <a>

+ +

ولكن فقط عندما يتم تحويم مؤشر الفأرة فوق الرابط

+
+ +

يوجد العديد من المحددات الأخرى لاكتشافها، يمكنك إيجاد قائمة مفصلة أكثر في مقالة دليل المحددات.

+ +

الخطوط والنصوص

+ +

والآن بعد أن تعرفنا على بعض أساسيات السي إس إس، دعنا نبدأ بإضافة بعد الأوامر والمعلومات لملف style.css لنجعل مثالنا يبدو أجمل. دعنا نبدأ بجعل الخطوط والنصوص التي نستخدمها تبدو أفضل.

+ +
    +
  1. بدايةً، قم بالحصول على مسار الخط الذي جلبته من موقع خطوط جوجل. أضف العنصر {{htmlelement("link")}} في الوسم <head>. كالتالي: + + 
    <link href='https://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
    +
    2. +
  2. بعدها، قم بحذف التعليمة السابقة التي كتبناها في ملف style.css. لقد كانت تجربة جيدة، ولكن اللون الأحمر ليس ملائماً بما فيه الكفاية.
    3. +
  3. ضع السطور التالية في الملف، استبدل سطر placeholder بسطر عائلة الخط font-family التي حصلت عليها من موقع خطوط جوجل Google Fonts. (تعني font-family بالخطوط التي تريد استخدامها في النص.) تقوم هذه التعليمة بتعيين خط أساسي شامل و قياس للخط من أجل كامل الصفحة (طالما أن <html> يمثل العنصر الأب لكامل الصفحة, و جميع العناصر داخله ترث نفس ال font-size و الـ font-family): + 
    html {
+  font-size: 10px; /* px means 'pixels': the base font size is now 10 pixels high  */
+  font-family: placeholder: this should be the rest of the output you got from Google fonts
+}
    + +
    +

    ملاحظة: أي شيء يكتب في ملف الـ CSS بين */ و /* عبارة عن تعليق CSS, حيث أن المتصفح يقوم بتجاهله عندما يعالج التعليمات البرمجية. يمكنك الاستفادة من تعليقات الـ CSS لكتابة ملاحظات مفيدة عمّا تحاول فعله.

    +
    +
    4. +
  4. الآن سنقوم بتعيين قياسات الخطوط للعناصر التي تتضمن نصوص داخل جسد الـ HTML ({{htmlelement("h1")}}, {{htmlelement("li")}}, {{htmlelement("p")}}). بالإضافة إلى ذلك سنجعل النص الخاص بعنوان الصفحة في المركز, و سنغير ارتفاع الخط (line height) بالإَافة إلى المسافة بين الحروف (letter spacing) لمحتويات الـ body لجعلها أسهل للقراءة: + 
    h1 {
+  font-size: 60px;
+  text-align: center;
+}
+
+p, li {
+  font-size: 16px;
+  line-height: 2;
+  letter-spacing: 1px;
+}
    +
    5. +
+ +

يمكنك تعديل قيم الـ px هذه إلى أي شيء تحبه لتحصل على التصميم الذي تريده, لكن بشكل عام يجب أن يبدو التصميم كالتالي:

+ +

a mozilla logo and some paragraphs. a sans-serif font has been set, the font sizes, line height and letter spacing are adjusted, and the main page heading has been centered

+ +

صناديق الـ CSS

+ +

إحدى الأشياء التي تلاحظها عندما تكتب الـ CSS هي أن الكثير من خصائصها يتعلق بالصناديق — ضبط قياسها, لونها, موضعها, الخ. أغلب عناصر الـ HTML في صفحتك يمكن اعتبارها على أنها صناديق موضوعة فوق بعضها البعض

+ +

a big stack of boxes or crates sat on top of one another

+ +

Not surprisingly, CSS layout is based principally on the box model. Each of the blocks taking up space on your page has properties like this:

+ + + +

three boxes sat inside one another. From outside to in they are labelled margin, border and padding

+ +

In this section we also use:

+ + + +

So, let's get started and add some more CSS to our page! Keep adding these new rules to the bottom of the page, and don't be afraid to experiment with changing values to see how it turns out.

+ +

Changing the page color

+ +
html {
+  background-color: #00539F;
+}
+ +

This rule sets a background color for the whole page. Change the color code above to whatever color you chose when planning your site.

+ +

Sorting the body out

+ +
body {
+  width: 600px;
+  margin: 0 auto;
+  background-color: #FF9500;
+  padding: 0 20px 20px 20px;
+  border: 5px solid black;
+}
+ +

Now for the {{htmlelement("body")}} element. There are quite a few declarations here, so let's go through them all one by one:

+ + + +

Positioning and styling our main page title

+ +
h1 {
+  margin: 0;
+  padding: 20px 0;
+  color: #00539F;
+  text-shadow: 3px 3px 1px black;
+}
+ +

You may have noticed there's a horrible gap at the top of the body. That happens because browsers apply some default styling to the {{htmlelement("h1")}} element (among others), even when you haven't applied any CSS at all! That might sound like a bad idea, but we want even an unstyled webpage to have basic readability. To get rid of the gap we overrode the default styling by setting margin: 0;.

+ +

Next up, we've set the heading's top and bottom padding to 20 pixels, and made the heading text the same color as the html background color.

+ +

One rather interesting property we've used here is text-shadow, which applies a text shadow to the text content of the element. Its four values are as follows:

+ + + +

Again, try experimenting with different values to see what you can come up with!

+ +

Centering the image

+ +
img {
+  display: block;
+  margin: 0 auto;
+}
+ +

Finally, we'll center the image to make it look better. We could use the margin: 0 auto trick again as we did earlier for the body, but we also need to do something else. The {{htmlelement("body")}} element is block level, meaning it takes up space on the page and can have margin and other spacing values applied to it. Images, on the other hand, are inline elements, meaning they can't. So to apply margins to the image, we have to give the image block-level behavior using display: block;.

+ +
+

Note: Don't worry if you don't yet understand display: block; and the block-level/inline distinction. You will as you study CSS in more depth. You can find out more about the different available display values at our display reference page.

+
+ +

Conclusion

+ +

If you have followed all the instructions in this article, you should end up with a page that looks something like this (you can also view our version here):

+ +

a mozilla logo, centered, and a header and paragraphs. It now looks nicely styled, with a blue background for the whole page and orange background for the centered main content strip.

+ +

If you get stuck, you can always compare your work with our finished example code on GitHub.

+ +

Here, we have only really scratched the surface of CSS. To find out more, go to our CSS Learning topic.

+ +

{{PreviousMenuNext("Learn/Getting_started_with_the_web/HTML_basics", "Learn/Getting_started_with_the_web/JavaScript_basics", "Learn/Getting_started_with_the_web")}}

+ +

 

+ +

In this module

+ + + +

 

diff --git "a/files/ar/learn/getting_started_with_the_web/\330\243\330\263\330\247\330\263\331\212\330\247\330\252_\330\265\331\201\330\255\330\247\330\252_\330\247\331\204\330\267\330\261\330\262_\330\247\331\204\331\205\330\252\330\261\330\247\330\265\330\251/index.html" "b/files/ar/learn/getting_started_with_the_web/\330\243\330\263\330\247\330\263\331\212\330\247\330\252_\330\265\331\201\330\255\330\247\330\252_\330\247\331\204\330\267\330\261\330\262_\330\247\331\204\331\205\330\252\330\261\330\247\330\265\330\251/index.html" deleted file mode 100644 index 70be221b32..0000000000 --- "a/files/ar/learn/getting_started_with_the_web/\330\243\330\263\330\247\330\263\331\212\330\247\330\252_\330\265\331\201\330\255\330\247\330\252_\330\247\331\204\330\267\330\261\330\262_\330\247\331\204\331\205\330\252\330\261\330\247\330\265\330\251/index.html" +++ /dev/null @@ -1,297 +0,0 @@ ---- -title: أساسيات الـ CSS -slug: Learn/Getting_started_with_the_web/أساسيات_صفحات_الطرز_المتراصة -tags: - - CSS - - تصميم - - تعلم - - مبتدأ - - ويب -translation_of: Learn/Getting_started_with_the_web/CSS_basics ---- -
{{LearnSidebar}}
- -
{{PreviousMenuNext("Learn/Getting_started_with_the_web/HTML_basics", "Learn/Getting_started_with_the_web/JavaScript_basics", "Learn/Getting_started_with_the_web")}}
- -
-

السي إس إس CSS (صفحات الطرز المتراصة) هي التعليمات البرمجية التي تستخدم لتنسيق صفحتك. ستناقش مقالة  أساسياتCSS ما تحتاجه لتبدأ باستخدام هذه التقنية. سنجيب عن أسئلة مثل: كيف أجعل النصّ ذا لون أسود أو أحمر؟ كيف أجعل محتويات الصفحة في أماكن محددة على الشاشة؟ كيف أزين الصفحة بصور و بألوان خلفية؟

-
- -

إذاً ماهي CSS عملياً؟

- -

لاتعد السي إس إس لغة برمجة (كما الأتش تي أم إل لا تعد كذلك). وهي ليست لغة ترميزية حتى — فهي لغة أنماط (تصميم). هذا يعني أنها تسمح لك بتطبيق تنسيقات على عناصر منتقاة من وثيقة لغة ترميز النص الفائق. على سبيل المثال، لاختيار جميع عناصر الفقرة في صفحة الويب وجعل لون النص بداخلها أحمر، تستطيع استخدام هذه التعليمة:

- -
p {
-  color: red;
-}
- -

دعنا ننسخ الثلاث سطور السابقة ونضعها في ملف جديد وبعدها نقوم بحفظ الملف باسم style.css داخل المجلد styles.

- -

ولكننا مازلنا بحاجة لربط الملف مع وثيقة لغة ترميز النص الفائق. وإلا لن يعمل التنسيق الذي أضافه ملف styls.css على صفحتك. (إذا لم تكن قد تابعت معنا الوحدة من بدايتها قم بقراءة مقالة التعامل مع الملفات و مقالة أساسيات لغة ترميز النص الفائق لمعرفة ما أنت بحاجة إليه لتبدأ).

- -
    -
  1. افتح الملف index.html والصق السطر أدناه في وسم head: - - 
    <link href="styles/style.css" rel="stylesheet" type="text/css">
    -
    2. -
  2. احفظ الملف وقم بفتح الصفحة في متصفحك. يجب أن ترى شيئاً من هذا القبيل:
    3. -
- -

A mozilla logo and some paragraphs. The paragraph text has been styled red by our css.

- -

تهانينا! إذا أصبح نص فقرتك باللون الأحمر، فقد قمت بكتابة أول ملف سي إس إس ناجح.

- -

تشريح أمر السي إس إس

- -

دعنا نأخذ نظرة مفصلة حول الثلاث سطور السابقة:

- -

- -

تدعى الثلاث سطور السابقة بمجموعة الأمر (rule set). لاحظ أيضاً أسماء كل جزئ من مجموعة الأوامر تلك:

- -
-
المحدد (المنتقي)
-
هو اسم عنصر الأتش تي أم إل ويوضع في بداية مجموعة الأوامر. يقوم بتحديد العنصر/العناصر التي يراد تنسيقها (في حالتنا العناصر ذات الوسم p). لتقوم بتنسيق عنصر أخر ما عليك سوى تغيير المحدد.
-
الإعلان
-
هو أمر مفرد مثل color: red والذي يحدد الخاصية التي تريد استخدامها لتنسيق العنصر.
-
الخاصية
-
هي الطريقة التي تريد تنسيق العنصر فيها. (في حالتنا الخاصية color هي خاصية للعنصر {{htmlelement("p")}}). في السي إس إس أنت تقوم باختيار الخواص التي تريدها أن تأثر على عنصرك.
-
قيمة الخاصية
-
توضع على يمين اسم الخاصية بعد النقطتين، والتي تحدد واحدة من  العديد من الخيارات المتاحة (يوجد العديد من القيم الأخرى إلى جانب القيمة red للخاصية color).
-
- -

انتبه للأجزاء المهمة الأخرى من البنية الكتابية لمجموعة الأمر:

- - - -

إذا لكتابة عدة خواص في مجموعة أمر واحدة ما عليك سوى كتابتهم والفصل بينهم باستخدام فاصلة منقوطة، كالتالي:

- -
p {
-  color: red;
-  width: 500px;
-  border: 1px solid black;
-}
- -

اختيار عدة عناصر

- -

يمكنك أيضاً اختيار عدة أنواع من العناصر وتطبيق عليهم مجموعة أمر واحدة. قم بإضافة عدة محددات مفصولين بفاصلة. على سبيل المثال:

- -
p,li,h1 {
-  color: red;
-}
- -

أنواع مختلفة من المحدد

- -

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

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
اسم المحددماذا يحددمثال
محدد العناصر (يسمى أحيانا بمحدد النوع أو الوسم)جميع العناصر التي من نفس النوعp
- تحدد العناصر ذات الوسم <p>
محدد الهويةالعنصر الموجود في الصفحة والذي يملك تلك الهوية (في صفحة الأتش تي أم إل يُسمح لك بإعطاء هوية واحدة مميزة لكل عنصر)#my-id
- تحدد العناصر ذات الهوية <p id="my-id"> أو <a id="my-id">
محدد الصنفالعنصر/العناصر الموجودة على الصفحة والتي تملك ذلك الصنف (يمكن استخدام الصنف نفسه على عدة عناصر).my-class
- Selects <p class="my-class"> and <a class="my-class">
محدد السمةالعناصر في الصفحة والتي تملك السمة المحددةimg[src]
- تحدد الصور ذات السمة <img src="myimage.png"> ولكن لا تحدد عنصر الصورة بدون السمة المذكورة <img>
محدد فئة الشبهعنصر/عناصر محدد ولكن عندما يكون بحالة معينة، مثال عندما يتم التحويم فوقه -

a:hover
- تحدد العناصر <a>

- -

ولكن فقط عندما يتم تحويم مؤشر الفأرة فوق الرابط

-
- -

يوجد العديد من المحددات الأخرى لاكتشافها، يمكنك إيجاد قائمة مفصلة أكثر في مقالة دليل المحددات.

- -

الخطوط والنصوص

- -

والآن بعد أن تعرفنا على بعض أساسيات السي إس إس، دعنا نبدأ بإضافة بعد الأوامر والمعلومات لملف style.css لنجعل مثالنا يبدو أجمل. دعنا نبدأ بجعل الخطوط والنصوص التي نستخدمها تبدو أفضل.

- -
    -
  1. بدايةً، قم بالحصول على مسار الخط الذي جلبته من موقع خطوط جوجل. أضف العنصر {{htmlelement("link")}} في الوسم <head>. كالتالي: - - 
    <link href='https://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
    -
    2. -
  2. بعدها، قم بحذف التعليمة السابقة التي كتبناها في ملف style.css. لقد كانت تجربة جيدة، ولكن اللون الأحمر ليس ملائماً بما فيه الكفاية.
    3. -
  3. ضع السطور التالية في الملف، استبدل سطر placeholder بسطر عائلة الخط font-family التي حصلت عليها من موقع خطوط جوجل Google Fonts. (تعني font-family بالخطوط التي تريد استخدامها في النص.) تقوم هذه التعليمة بتعيين خط أساسي شامل و قياس للخط من أجل كامل الصفحة (طالما أن <html> يمثل العنصر الأب لكامل الصفحة, و جميع العناصر داخله ترث نفس ال font-size و الـ font-family): - 
    html {
-  font-size: 10px; /* px means 'pixels': the base font size is now 10 pixels high  */
-  font-family: placeholder: this should be the rest of the output you got from Google fonts
-}
    - -
    -

    ملاحظة: أي شيء يكتب في ملف الـ CSS بين */ و /* عبارة عن تعليق CSS, حيث أن المتصفح يقوم بتجاهله عندما يعالج التعليمات البرمجية. يمكنك الاستفادة من تعليقات الـ CSS لكتابة ملاحظات مفيدة عمّا تحاول فعله.

    -
    -
    4. -
  4. الآن سنقوم بتعيين قياسات الخطوط للعناصر التي تتضمن نصوص داخل جسد الـ HTML ({{htmlelement("h1")}}, {{htmlelement("li")}}, {{htmlelement("p")}}). بالإضافة إلى ذلك سنجعل النص الخاص بعنوان الصفحة في المركز, و سنغير ارتفاع الخط (line height) بالإَافة إلى المسافة بين الحروف (letter spacing) لمحتويات الـ body لجعلها أسهل للقراءة: - 
    h1 {
-  font-size: 60px;
-  text-align: center;
-}
-
-p, li {
-  font-size: 16px;
-  line-height: 2;
-  letter-spacing: 1px;
-}
    -
    5. -
- -

يمكنك تعديل قيم الـ px هذه إلى أي شيء تحبه لتحصل على التصميم الذي تريده, لكن بشكل عام يجب أن يبدو التصميم كالتالي:

- -

a mozilla logo and some paragraphs. a sans-serif font has been set, the font sizes, line height and letter spacing are adjusted, and the main page heading has been centered

- -

صناديق الـ CSS

- -

إحدى الأشياء التي تلاحظها عندما تكتب الـ CSS هي أن الكثير من خصائصها يتعلق بالصناديق — ضبط قياسها, لونها, موضعها, الخ. أغلب عناصر الـ HTML في صفحتك يمكن اعتبارها على أنها صناديق موضوعة فوق بعضها البعض

- -

a big stack of boxes or crates sat on top of one another

- -

Not surprisingly, CSS layout is based principally on the box model. Each of the blocks taking up space on your page has properties like this:

- - - -

three boxes sat inside one another. From outside to in they are labelled margin, border and padding

- -

In this section we also use:

- - - -

So, let's get started and add some more CSS to our page! Keep adding these new rules to the bottom of the page, and don't be afraid to experiment with changing values to see how it turns out.

- -

Changing the page color

- -
html {
-  background-color: #00539F;
-}
- -

This rule sets a background color for the whole page. Change the color code above to whatever color you chose when planning your site.

- -

Sorting the body out

- -
body {
-  width: 600px;
-  margin: 0 auto;
-  background-color: #FF9500;
-  padding: 0 20px 20px 20px;
-  border: 5px solid black;
-}
- -

Now for the {{htmlelement("body")}} element. There are quite a few declarations here, so let's go through them all one by one:

- - - -

Positioning and styling our main page title

- -
h1 {
-  margin: 0;
-  padding: 20px 0;
-  color: #00539F;
-  text-shadow: 3px 3px 1px black;
-}
- -

You may have noticed there's a horrible gap at the top of the body. That happens because browsers apply some default styling to the {{htmlelement("h1")}} element (among others), even when you haven't applied any CSS at all! That might sound like a bad idea, but we want even an unstyled webpage to have basic readability. To get rid of the gap we overrode the default styling by setting margin: 0;.

- -

Next up, we've set the heading's top and bottom padding to 20 pixels, and made the heading text the same color as the html background color.

- -

One rather interesting property we've used here is text-shadow, which applies a text shadow to the text content of the element. Its four values are as follows:

- - - -

Again, try experimenting with different values to see what you can come up with!

- -

Centering the image

- -
img {
-  display: block;
-  margin: 0 auto;
-}
- -

Finally, we'll center the image to make it look better. We could use the margin: 0 auto trick again as we did earlier for the body, but we also need to do something else. The {{htmlelement("body")}} element is block level, meaning it takes up space on the page and can have margin and other spacing values applied to it. Images, on the other hand, are inline elements, meaning they can't. So to apply margins to the image, we have to give the image block-level behavior using display: block;.

- -
-

Note: Don't worry if you don't yet understand display: block; and the block-level/inline distinction. You will as you study CSS in more depth. You can find out more about the different available display values at our display reference page.

-
- -

Conclusion

- -

If you have followed all the instructions in this article, you should end up with a page that looks something like this (you can also view our version here):

- -

a mozilla logo, centered, and a header and paragraphs. It now looks nicely styled, with a blue background for the whole page and orange background for the centered main content strip.

- -

If you get stuck, you can always compare your work with our finished example code on GitHub.

- -

Here, we have only really scratched the surface of CSS. To find out more, go to our CSS Learning topic.

- -

{{PreviousMenuNext("Learn/Getting_started_with_the_web/HTML_basics", "Learn/Getting_started_with_the_web/JavaScript_basics", "Learn/Getting_started_with_the_web")}}

- -

 

- -

In this module

- - - -

 

diff --git a/files/ar/learn/how_to_contribute/index.html b/files/ar/learn/how_to_contribute/index.html deleted file mode 100644 index e53fb8f34f..0000000000 --- a/files/ar/learn/how_to_contribute/index.html +++ /dev/null @@ -1,82 +0,0 @@ ---- -title: كيف تساهم في قسم التعلم في الشبكة -slug: Learn/How_to_contribute -tags: - - توثيق - - دليل - - ساهم - - مبتدئين -translation_of: Learn/How_to_contribute ---- -
{{LearnSidebar}}
- -

إن كنت هنا لأوَّل مرَّة أو بعد بحثٍ طويل، فمن المُرجَح أنَّ هذا يرجع لكونك مُهتماً في المساهمة في قسم شبكة مطوري موزيلا للتعلم. إنَّ هذا لنبؤٌ سعيد!

- -

ستجد في هذه الصفحة كل شيء ستحتاج إليه لتحسين محتوى قسم التعلم. يوجد العديد من الأشياء التي يمكنك القيام بها، بناءً على وقتك، وما إذا كنت مُبتدِئاً، مطوراً، أو مُدرِساً.

- -
-

ملاحظة: يمكنك إيجاد دليل إرشادي حول كتابة مقالة جديدة في قسم التعلم في مقالة "كيفيّة كتابة مقالة لمساعدة الناس على التعلُّم حول الويب".

-
- -

جِد مهمة محددة

- -

الطرق الشائعة للمساهمة في قسم التعلم هي قراءة المقالات، إصلاح الأخطاء المطبعيّة، واقتراح التحسينات. نُرحِب أيضاً بإضافة أمثلة إلى مستودعنا على جيتهاب، والتواصل معنا إن رغبت بطرح سؤال ما.

- -

المساهمة هي طريقة رائعة لاكتساب المتعة في حين تعلم أشياء جديدة. إن شعرت يوماً بالضياع أو كان لديك سؤالاً ما، فلا تتردد أبداً بالتواصل معنا على موضوع قسم التعلُّم في منصة ديسكورس، أو على قناة IRC (اطّلع على نهاية هذه الصفحة للمزيد من التفاصيل). كريس ميلز (Chris Mills) هو مدير المواضيع لهذا القسم، يمكنك أيضاً محاولة التواصل معه مباشرةً.

- -

توفِر الأقسام التاليّة بعض الأفكار العامة حول أنواع المهام التي يمكنك القيام بها.

- -

أنا مُبتدِئ

- -

هذا مُذهِل! المبتدئون هم عامل مُهم وقيّم جداً في تقديم التعليقات حول المواد الدراسيّة. لديك - بالتأكيد - وجهة نظر فريدة حول مقالتنا كعضو من جمهورنا المُستهدف، مما يجعلك عضواً لا يقدر بثمن في فريقنا. إن كنت تستخدم مقالاتنا لتتعلم شيئاً ما ووقعت في المشاكل، أو وجدت مقالة تحوي معلومات مُشتتة، يمكنك إما إصلاحها أو إعلامنا بذلك حتى نتحقق من المشكلة ونحلُها.

- -

إليك بعض الاقتراحات حول الطرق التي يمكنك المساهمة فيها:

- -
-
إضافات الوسوم إلى المقالات (تستغرق العمليّة قرابة الخمس دقائق)
-
وسِم (tagging) محتوى الشبكة هو أحد أسهل الطرق التي يمكنك المساهمة فيها. في حين أنَّ العديد من المزايا لدينا تستخدم الوسوم (tags) لتساعدها في تقديم المعلومات بسياقها الصحيح، فيُعَد الوسِم مساهمة قيّمة جداً. ألقي نظرة على قائمة المصطلحات في المسرد والمقالات التعليميّة التي لا تحتوي على وسوم لتبدأ بالمساهمة.
-
قراءة ومراجعة المصطلحات في المسرد (تستغرق العمليّة قرابة الخمس دقائق)
-
كمبتدئ، نحتاج إلى أعين يقظة لمراجعة محتوانا. إذا وجدت مصطلحاً صعب الفهم، فهذا يعني أنَّ المسرد بحاجة ليُحسَن. لا تتردد بإجراء أي تغييرات تظنها ضروريّة. إذا كنت تظن أنَّك لا تملك المهارة الكافيّة لتعديل مصطلح بنفسك، يمكنك على الأقل إعلامنا بذلك على قائمتنا البريديّة.
-
كتابة مصطلح جديد في المسرد (تستغرق العمليّة قرابة العشرين دقيقة)
-
هذه أكثر الطرق فعاليّة لتتعلم شيئاً جديداً. اختر مفهوماً جديداً تريد فهمه، أقرأ عنه، واكتب شرحاً له في المسرد. الشرح للآخرين هي إحدى الطرق الرائعة "لتثبيت" المعرفة في ذهنك، وتساعدك على فهم الأشياء بنفسك، كل هذا في حين أنَّك تساعد الآخرين أيضاً. الجميع رابِح!
-
قراءة ومراجعة المقالات التعليميّة (تستغرق العمليّة قرابة الساعتين)
-
تشبه هذه المهمة كثيراً مراجعة المصطلحات في المسرد (انظر أعلاه). ولكن هذه المهمة تحتاج لوقتٍ أطول؛ بسبب أنَّ هذه المقالات عادةً ما تكون أطول قليلاً.
-
- -

أنا مُطوِّر

- -

عظيم! مهاراتك التقنيّة هي ما نحتاجه لتوفير محتوى تقني دقيق للمتبدئين. بما أنَّ هذا القسم من الشبكة مُخصص لتعليم الويب، كُن حريصاً على جعل توضيحاتك بسيطة قدر الإمكان، مع الحرص على كونها مفيدة. من الأكثر أهميّة أن تكون مفهومة على أن تكون دقيقة للغاية.

- -
-
قراءة ومراجعة المصطلحات في المسرد (تستغرق العمليّة قرابة الخمس دقائق)
-
كمطوِّر، نحتاج لتتأكد أنَّ محتوانا دقيق تقنياً بدون أن يكون مُتحذلق بشكل مبالغ. لا تتردد عن إجراء أي تغييرات تظن أنَّها ضروريّة. إذا أردت مناقشة المحتوى قبل إجراء أيّة تغييرات، تواصل معنا على قائمتنا البريديّة أو على قناة IRC.
-
كتابة مصطلح جديد في المسرد (تستغرق العمليّة قرابة العشرين دقيقة)
-
توضيح المصطلحات التقنيّة هي طريقة جيدة جداً للتعلم ولتصبح دقيق تقنياً وبسيطاً في شرحك. سيشكرك المبتدئون على ذلك. لدينا العديد من المصطلحات الغير معرفة والتي تحتاج لاهتمامك. اختر واحداً وابدأ بشرحه.
-
قراءة ومراجعة المقالات التعليميّة (تستغرق العمليّة قرابة الساعتين)
-
هذه المهمة مماثلة لمراجعة المصطلحات في المسرد (انظر أعلاه). الفرق هو أنَّ هذه المقالات أطول قليلاً مما سيتطلب وقتاً أطول.
-
كتابة مقالة تعليميّة جديدة (تستغرق العمليّة قرابة الأربع ساعات أو أكثر)
-
تفتقر شبكة مطوري موزيلا إلى المقالات البسيطة حول استخدام تقنيات الويب (مثل لغة ترميز النص الفائق، صفحات الأنماط الانسيابية، الجافاسكربت ...إلخ). لدينا في الشبكة محتوى قديم يتطلب إعادة المراجعة والنشر. ادفع بمهاراتك إلى أقصى حد لتجعل تقنيات الويب قابلة للاستخدام من قبل المبتدئين.
-
إنشاء تمرينات، عينات برمجيّة، أو أدوات تعليم تفاعليّة (تستغرق العمليّة وقتاً غير محدد)
-
تحتاج جميع مقالاتنا التعليميّة إلى ما ندعوه بمواد "التعليم النشطة"، ﻷنَّ الناس يتعلمون الشيء بشكل أفضل عندما يقومون به بأنفسهم. هذه المواد هي تمرينات أو محتويات تفاعليّة تساعد المُستخدمين على تطبيق والتلاعب بالمفاهيم المشروحة في المقالة. يوجد العديد من الطرق الممكنة لصنع محتوى تفاعلي، من إنشاء عينات برمجيّة باستخدام JSFiddle أو أشباهه، إلى بناء محتوى تفاعلي مُتكامل بواسطة Thimble. أطلق العنان لإبداعك!
-
- -

أنا مُدرِس

- -

تملك شبكة مطوري موزيلا تاريخ طويل من النجاح التقني، ولكننا نفتقر للفهم العميق حول الطرق الفُضلى لتعليم المفاهيم للجدد. هنا حيث نحتاج إليك بصفتك مُدرِس. يمكنك مساعدتنا على الحرص على أنَّ موادنا التعليميّة توفِر مسار تعليمي جيد وعملي لقرائِنا.

- -
-
قراءة ومراجعة المصطلحات في المسرد (تستغرق العمليّة قرابة الخمس عشرة دقيقة)
-
تَفَقَد المصطلحات في المسرد ولا تتردد عن إجراء أيّة تغييرات تراها ضروريّة. إذا أردت مناقشة المحتوى قبل تعديله، تواصل معنا على قائمتنا البريديّة أو على قناة IRC.
-
كتابة مصطلح جديد في المسرد (تستغرق العمليّة قرابة الساعة)
-
تعريفات المصطلحات البسيطة والواضحة، واللمحات البسيطة عن المفاهيم في المسرد هو قطعاً ما يلبي احتياجات المبتدئِين. يمكن أن تساعد خبرتك كمُدرِس على إنشاء تعريفات ممتازة للمصطلحات. لدينا العديد من المصطلحات الغير معرفة والتي تحتاج لاهتمامك. اختر واحداً وابدأ بشرحه.
-
إضافة رسوم توضيحيّة ومخططات للمقالات (تستغرق العمليّة قرابة الساعة)
-
كما تعلم، الرسوم التوضيحيّة (illustrations) هي جزء لا يقدر بثمن في أي محتوى تعليمي. تلك هي إحدى الأمور التي نفتقدها في الشبكة ومهاراتك يمكن أن تُحدِث فرقاً. تفقد المقالات التي تحوي نقصاً في المحتوى التوضيحي واختر مقالة ترغَب بإنشاء رسماً توضيحياً يشرحها.
-
قراءة ومراجعة المقالات التعليميّة (تستغرق العمليّة قرابة الساعتين)
-
هذه المهمة مشابهة لمراجعة المصطلحات في المسرد (انظر أعلاه)، ولكنها تتطلب وقتاً أطول لكون المقالات بالعادة أطول قليلاً.
-
كتابة مقالات تعليميّة جديدة (تستغرق العمليّة قرابة الأربع ساعات)
-
نحتاج إلى مقالات بسيطة وواضحة حول النظام الشابكي (Web ecosystem) والمواضيع الأخرى المتعلقة به. في حين أنَّ المقالات التعليميّة من الضروري أن تكون تدريسيّة بدلاً من أن تقوم بتغطيّة كل شيء حرفياً، فخبرتك بمعرفة الأشياء التي يجب شرحها وكيفيّة القيام بذلك ستكون مساعدة رائعة!
-
إنشاء تمرينات، اختبارات، أو أدوات تعليم تفاعليّة (يستغرق الأمر وقتاً غير محدد)
-
تحتاج جميع مقالاتنا التعليميّة إلى مواد "التعليم النشط". هذه المواد هي تمرينات أو محتويات تفاعليّة تساعد المُستخدمين على تعلم استخدام والتوسع في المفاهيم المشروحة في المقالة. يوجد العديد من الأمور التي يمكنك القيام بها هنا، من إنشاء اختبارات (quizzes)، إلى بناء محتوى تفاعلي مُتكامل بواسطة Thimble. أطلق العنان لإبداعك!
-
إنشاء مسارات تعليميّة (تستغرق العمليّة وقتاً غير محدد)
-
بغرض توفير دورات شاملة وتدريجيّة، نحتاج إلى تهيئة محتوانا في مسارات. هذه طريقة لجمع المحتوى الحالي وإيجاد المفقود لإنشاء مقالات تعليميّة عنه.
-
diff --git a/files/ar/learn/html/forms/index.html b/files/ar/learn/html/forms/index.html deleted file mode 100644 index 3c8f449476..0000000000 --- a/files/ar/learn/html/forms/index.html +++ /dev/null @@ -1,114 +0,0 @@ ---- -title: نماذج HTML -slug: Learn/HTML/Forms -tags: - - Beginner - - Featured - - Forms - - Guide - - HTML - - Landing - - Learn - - NeedsTranslation - - TopicStub - - Web -translation_of: Learn/Forms ---- -
{{LearnSidebar}}
- -

توفر هذه الوحدة سلسلة من المقالات التي ستساعدك على إتقان نماذج HTML. تعد نماذج HTML أداة قوية جدًا للتفاعل مع المستخدمين ؛ ومع ذلك ، لأسباب تاريخية وتقنية ، ليس من الواضح دائمًا كيفية استخدامها بكامل طاقتها. في هذا الدليل ، سنغطي جميع جوانب نماذج HTML ، من البنية إلى التصميم ، من معالجة البيانات إلى الأدوات المخصصة.

- -

المتطلبات الأساسية

- -

قبل البدء في هذه الوحدة ، يجب أن تعمل على الأقل من خلال مقدمة إلى HTML. في هذه المرحلة ، يجب أن تجد {{anch ("Basic Guides")}} سهل الفهم ، كما يمكنك الاستفادة من دليل أدوات النماذج الأصلية.

- -

ومع ذلك ، تعد بقية الوحدة أكثر تقدمًا - فمن السهل وضع أدوات النموذج على صفحة ، ولكن لا يمكنك فعل الكثير معها دون استخدام بعض ميزات النموذج المتقدمة و CSS و JavaScript. لذلك ، قبل إلقاء نظرة على الأقسام الأخرى ، نوصيك بالابتعاد وتعلم بعض CSS و JavaScript أولاً.

- -
-

ملاحظة: إذا كنت تعمل على جهاز كمبيوتر / جهاز لوحي / جهاز آخر حيث لا يمكنك إنشاء ملفاتك الخاصة ، فيمكنك تجربة (معظم) أمثلة التعليمات البرمجية في برنامج تشفير عبر الإنترنت مثل JSBin أو Glitch.

-
- -

أدلة أساسية

- - - -
أول نموذج HTML خاص بك
- -
تقدم المقالة الأولى في سلسلتنا تجربتك الأولى في إنشاء نموذج HTML ، بما في ذلك تصميم نموذج بسيط وتنفيذه باستخدام عناصر HTML الصحيحة وإضافة بعض الأنماط البسيطة جدًا عبر CSS وكيفية إرسال البيانات إلى الخادم.
- -
كيفية بناء نموذج HTML
- -
مع استبعاد الأساسيات ، ننظر الآن بمزيد من التفصيل في العناصر المستخدمة لتوفير البنية والمعنى للأجزاء المختلفة من النموذج.
- -

ما هو شكل الحاجيات المتاحة؟

- - - -
حاجيات النموذج الأصلي
- -
نحن الآن نلقي نظرة على وظائف أدوات النماذج المختلفة بالتفصيل ، وننظر في الخيارات المتاحة لجمع أنواع مختلفة من البيانات.
- -

التحقق من صحة بيانات النموذج وإرسالها

- - - -
إرسال بيانات النموذج
- -
تتناول هذه المقالة ما يحدث عندما يرسل المستخدم نموذجًا - إلى أين تذهب البيانات ، وكيف نتعامل معها عندما تصل إلى هناك؟ نحن ننظر أيضًا في بعض المخاوف الأمنية المرتبطة بإرسال بيانات النموذج.
- -
- -
التحقق من صحة بيانات النموذج
- -
لا يعد إرسال البيانات كافيًا - نحتاج أيضًا إلى التأكد من أن البيانات التي يملأها المستخدمون في النماذج بالتنسيق الصحيح الذي نحتاجه لمعالجتها بنجاح ، وأن ذلك لن يفسد تطبيقاتنا. نريد أيضًا مساعدة مستخدمينا على ملء نماذجنا بشكل صحيح وعدم الشعور بالإحباط عند محاولة استخدام تطبيقاتنا. يساعدنا التحقق من صحة النموذج في تحقيق هذه الأهداف - تخبرك هذه المقالة بما تحتاج إلى معرفته.
- -

أدلة متقدمة

- - - -
كيفية بناء الحاجيات النموذجية المخصصة
- -
ستصادف بعض الحالات التي لا توفر فيها أدوات النموذج الأصلية ما تحتاجه ، على سبيل المثال بسبب التصميم أو الوظيفة. في مثل هذه الحالات ، قد تحتاج إلى إنشاء عنصر واجهة مستخدم للنموذج من HTML خام. تشرح هذه المقالة كيفية القيام بذلك والاعتبارات التي يجب أن تكون على دراية بها عند القيام بذلك ، مع دراسة حالة عملية.
- -
- -
إرسال النماذج من خلال JavaScript
- -
تبحث هذه المقالة في طرق استخدام نموذج لتجميع طلب HTTP وإرساله عبر JavaScript مخصص ، بدلاً من إرسال النموذج القياسي. يبحث أيضًا في سبب رغبتك في القيام بذلك ، والآثار المترتبة على القيام بذلك. (راجع أيضًا استخدام كائنات FormData.)
- -
- -
نماذج HTML في المتصفحات القديمة
- -
اكتشاف ميزة تغطية المقالة ، وما إلى ذلك ، يجب إعادة توجيه هذا إلى وحدة اختبار عبر المتصفح ، حيث تتم تغطية نفس الأشياء بشكل أفضل هناك.
- -

أدلة تصميم النموذج

- - - -
تصميم نماذج HTML
- -
توفر هذه المقالة مقدمة لنماذج التصميم باستخدام CSS ، بما في ذلك جميع الأساسيات التي قد تحتاج إلى معرفتها لمهام التصميم الأساسية.
- -
- -
التصميم المتقدم لنماذج HTML
- -
هنا نلقي نظرة على بعض تقنيات تصميم النماذج الأكثر تقدمًا والتي يجب استخدامها عند محاولة التعامل مع بعض العناصر الأكثر صعوبة في التصميم.
- -
- -
جدول توافق الخاصية لعناصر واجهة المستخدم للنموذج
- -
توفر هذه المقالة الأخيرة مرجعًا مفيدًا يسمح لك بالبحث عن خصائص CSS المتوافقة مع عناصر النموذج.
- -
- -
مقدمة إلى HTML | تعلم HTML | HTML5 | دليل المطور | مرجع العنصر | المرجع
- -

إقرأ أيضا

- - diff --git a/files/ar/learn/html/tables/index.html b/files/ar/learn/html/tables/index.html new file mode 100644 index 0000000000..380e837a80 --- /dev/null +++ b/files/ar/learn/html/tables/index.html @@ -0,0 +1,36 @@ +--- +title: جداول HTML +slug: Learn/HTML/الجداول +translation_of: Learn/HTML/Tables +--- +
{{LearnSidebar}}
+ +

تتمثل مهمة شائعة جدًا في HTML في هيكلة البيانات الجدولية ، ولديها عدد من العناصر والسمات لهذا الغرض فقط. إلى جانب القليل من CSS للتصميم ، يجعل HTML من السهل عرض جداول المعلومات على شبكة الإنترنت مثل خطة درس مدرستك أو الجدول الزمني في حمام السباحة المحلي الخاص بك أو إحصائيات حول الديناصورات المفضلة لديك أو فريق كرة القدم. تنقلك هذه الوحدة إلى كل ما تحتاج إلى معرفته حول هيكلة بيانات الجداول باستخدام HTML.

+ +

المتطلبات الأساسية

+ +

قبل بدء هذه الوحدة ، يجب أن تكون قد قمت بالفعل بتغطية أساسيات HTML - راجع مقدمة إلى HTML.

+ +
+

ملاحظة: إذا كنت تعمل على جهاز كمبيوتر / جهاز لوحي / جهاز آخر حيث لا تملك القدرة على إنشاء ملفاتك الخاصة ، فيمكنك تجربة (أكثر من) أمثلة التعليمات البرمجية في برنامج الترميز عبر الإنترنت مثل JSBin أو Thimble.

+
+ +

خطوط إرشاد

+ +

تحتوي هذه الوحدة على المقالات التالية:

+ +
+
أساسيات جدول  HTML
+
تبدأ هذه المقالة في البدء بجداول HTML ، والتي تغطي الأساسيات ذاتها ، مثل الصفوف والخلايا ، والعناوين ، وخلايا تجعل الأعمدة والصفوف متعددة ، وكيفية تجميع كل الخلايا في عمود معًا لأغراض التصميم.
+
الميزات المتقدمة لجداول HTML وسهولة الوصول إليها
+
في المقالة الثانية في هذه الوحدة ، نلقي نظرة على بعض الميزات المتقدمة لجداول HTML - مثل التسميات التوضيحية / الملخصات وتجميع صفوفك في أقسام رأس الجدول والجسم والتذييل - وكذلك النظر في إمكانية الوصول إلى الجداول للمستخدمين ذوي الإعاقات البصرية .
+
+ +

تقييم

+ +
+
هيكلة بيانات الكوكب
+
في تقييم الجدول الخاص بنا ، نوفر لك بعض البيانات حول الكواكب في نظامنا الشمسي ، ونجعلك تنظّمها في جدول HTML.
+
+ +
diff --git "a/files/ar/learn/html/\330\247\331\204\330\254\330\257\330\247\331\210\331\204/index.html" "b/files/ar/learn/html/\330\247\331\204\330\254\330\257\330\247\331\210\331\204/index.html" deleted file mode 100644 index 380e837a80..0000000000 --- "a/files/ar/learn/html/\330\247\331\204\330\254\330\257\330\247\331\210\331\204/index.html" +++ /dev/null @@ -1,36 +0,0 @@ ---- -title: جداول HTML -slug: Learn/HTML/الجداول -translation_of: Learn/HTML/Tables ---- -
{{LearnSidebar}}
- -

تتمثل مهمة شائعة جدًا في HTML في هيكلة البيانات الجدولية ، ولديها عدد من العناصر والسمات لهذا الغرض فقط. إلى جانب القليل من CSS للتصميم ، يجعل HTML من السهل عرض جداول المعلومات على شبكة الإنترنت مثل خطة درس مدرستك أو الجدول الزمني في حمام السباحة المحلي الخاص بك أو إحصائيات حول الديناصورات المفضلة لديك أو فريق كرة القدم. تنقلك هذه الوحدة إلى كل ما تحتاج إلى معرفته حول هيكلة بيانات الجداول باستخدام HTML.

- -

المتطلبات الأساسية

- -

قبل بدء هذه الوحدة ، يجب أن تكون قد قمت بالفعل بتغطية أساسيات HTML - راجع مقدمة إلى HTML.

- -
-

ملاحظة: إذا كنت تعمل على جهاز كمبيوتر / جهاز لوحي / جهاز آخر حيث لا تملك القدرة على إنشاء ملفاتك الخاصة ، فيمكنك تجربة (أكثر من) أمثلة التعليمات البرمجية في برنامج الترميز عبر الإنترنت مثل JSBin أو Thimble.

-
- -

خطوط إرشاد

- -

تحتوي هذه الوحدة على المقالات التالية:

- -
-
أساسيات جدول  HTML
-
تبدأ هذه المقالة في البدء بجداول HTML ، والتي تغطي الأساسيات ذاتها ، مثل الصفوف والخلايا ، والعناوين ، وخلايا تجعل الأعمدة والصفوف متعددة ، وكيفية تجميع كل الخلايا في عمود معًا لأغراض التصميم.
-
الميزات المتقدمة لجداول HTML وسهولة الوصول إليها
-
في المقالة الثانية في هذه الوحدة ، نلقي نظرة على بعض الميزات المتقدمة لجداول HTML - مثل التسميات التوضيحية / الملخصات وتجميع صفوفك في أقسام رأس الجدول والجسم والتذييل - وكذلك النظر في إمكانية الوصول إلى الجداول للمستخدمين ذوي الإعاقات البصرية .
-
- -

تقييم

- -
-
هيكلة بيانات الكوكب
-
في تقييم الجدول الخاص بنا ، نوفر لك بعض البيانات حول الكواكب في نظامنا الشمسي ، ونجعلك تنظّمها في جدول HTML.
-
- -
diff --git "a/files/ar/learn/html/\330\250\330\263\331\212\330\267\330\251_html_\330\245\331\206\330\264\330\247\330\241_\330\265\331\201\330\255\330\251/index.html" "b/files/ar/learn/html/\330\250\330\263\331\212\330\267\330\251_html_\330\245\331\206\330\264\330\247\330\241_\330\265\331\201\330\255\330\251/index.html" deleted file mode 100644 index a6cdfdf6cf..0000000000 --- "a/files/ar/learn/html/\330\250\330\263\331\212\330\267\330\251_html_\330\245\331\206\330\264\330\247\330\241_\330\265\331\201\330\255\330\251/index.html" +++ /dev/null @@ -1,305 +0,0 @@ ---- -title: إنشاء صفحة HTML بسيطة -slug: Learn/HTML/بسيطة_HTML_إنشاء_صفحة -tags: - - البداية -translation_of: Learn/Getting_started_with_the_web -translation_of_original: Learn/HTML/Write_a_simple_page_in_HTML ---- -
-

فى هذا المقال سوف تتعلم كيق تنشئ صفحة ويب بسيطة باستخدام {{Glossary("HTML")}}

-
- - - - - - - - - - - - -
المتطلبات الأساسية:يجب ان يكون لديك محرر نصوص و أن تعلم كيف  كيف تفتح ملف فى متصفح.
الهدف:إنشاء صفحة ويب يمكنك عرضها باستخدام متصفحك.
- -

الملخص

- -

أن أبسط صفحة ويب هى فقط ملف {{Glossary("HTML")}} . فقط ملف HTML صحيح واحد موجود على حاسبك و متصفح ويب هى كل ما تحتاجه. سوف نرى كبف كيف يمكن استخدام HTML {{Glossary("Tag","tags")}} و سوف تكون فادر على عرض الصفحة التى أنشأتها فى متصفحك.

- -

التعلم النشط

- -

أول شئ؛ تأكد أنه يوجد لديك محرر نصوص تجيد استخدامه و متصفح ويب. على الأغلب أى محرر نصوص سوف يكون كافى؛ على سبيل المثال Notepad فى Windows أو TextEdit فى Mac ؛ ولكن تأكد أنك ستنشئ ملفات نصوص بسيطة (حروف فقط بدون تنسيق). إذا كنت تستخدم TextEdit فى Mac يمكنك اختيار "Make Plain Text" من قائمة "Format".

- -

الخطوة الأولى: ملف

- -

صفحة الويب الواحدة تتكون (على الأقل) من ملف HTML ؛ لذلك سنبدأ بإنشاء واحد. قم بفتح محرر النصوص و قم بإنشاء ملف نصى ؛ ثم اكتب شئ مثل هذا:

- -
<!DOCTYPE html>
-<html>
-<head>
-  <title>Hi there</title>
-</head>
-<body>
-  This is a page
-  a simple page
-</body>
-</html>
- -

يمكنك تعديل هذا كما تشاء؛ أنت حر فى أن تضيف أو تغير النص بين وسمى <title></title> و <body></body>. تأكد أن تعطى الملف اسم ينتهى بالإضافة ".html" . على سبيل المثال يمكنك تسميتها "my_page.html".

- -

الآن لديك ملف على حاسبك ؛ من الممكن أن يكون شكله يشبه هذا (هذا يتوقف على نظام التشغيل الذى تستخدمه) :

- -

Screenshot of a file explorer with a html file for local test

- -

إذا قمت فقط بالضغط مرتين على هذا الملف سوف يُفتح فى متصفحك. إذا أردت فتحه فى محرر النصوص لتعديله قم بالضغط عليه بزر الفأرة الأيمن و اختر فتح الملف فى محرر النصوص. (أو قم بسحبه و إفلاته فى المحرر؛ أو قم بفتح الملف باختيار "open" من قائمة "File" فى المحرر.) ,حسب محررك الملف سوف يبدو مثل هذا:

- -

Screenshot of a file explorer with a html file for local test

- -

الخطوة الثانية: متصفح ويب

- -

داخل متصفح الملفات الخاص بك(مثل Explorer فى Windows؛ أو Finder فى Mac أو Files فى Ubuntu)، اعثر على الملف الذى أنشأته و قم بفتحه فى متصفحك (بالضغط عليه مرتين؛ أو سحبه و إفلاته على أيقونة المتصفح) الآن المتصفح يعرض النص من ملف HTML الذى أنشأته والتبويب يعرض عنوان الصفحة. هذا يجب أن يشبه هذا؛ حسب نظام تشغيلك و متصفحك:

- -

Screenshot of a file explorer with a html file for local test

- -

يمكنك أن ترى محتوى جسم الصفحة (بين وسمى <body></body>)؛ و العنوان الذى اخترته (بين وسمى <title></title>) يظهر فى التبويب ولكن لا يوجد فاصل بين سطرى النص. شئ مثير للاهتمام.

- -

الخطوة الثالثة: التجربة والتعلم

- -

جرب أن تحذف بعض أجزاء ملف HTML وشاهد ما يحدث. بعض الأخطاء لن تؤثر كثيرًا والصفحة ستظل قابلة للعرض فى المتصفح، البعض الاَخر سوف يسبب مشاكل واضحة للنتائج. هذا يحدث لأن المتصفحات تحاول أن تعوض عن بعض الأخطاء الشائعة.

- -

 

- -

لشيء الذي يجب أن تلاحظه هو أن الشيء الوحيد الذي تراه معروضًا على الشاشة هو النص الذي ليس داخل أقواس الزاوية (والمعروف باسم الرموز الأكبر من وأقل من الرموز ، ولكننا نسميها أقواس معقوفة عند الحديث عن HTML). كل شيء داخل الأقواس الزاوية هو {{Glossary ("tag")}} ، والذي يمثل البنية أو الهيكل العظمي لصفحة الويب الخاصة بك. يظهر كل المحتوى المعروض بين العلامات.

- -

تحتوي صفحة HTML الخاصة بنا كمثال على قسمين رئيسيين: رأس ، ومضمون في كتلة {{HTMLElement ("head")}} ، وهيئة ، موجودة داخل {{HTMLElement ("body")}}. يحتوي النص على النص المعروض داخل الصفحة.

- -

لكل علامة معنى محدد ويجب استخدامها وفقًا لذلك ؛ على سبيل المثال ، يتم استخدام {{HTMLElement ("title")}} للإشارة إلى عنوان الصفحة ، والذي قد يختلف عن اسم الملف. لاحظ أيضًا أن العلامات يمكن أن تحدث داخل محتوى علامات أخرى. يتم تضمين {{HTMLElement ("title")}} داخل {@ HTMLElement ("head")}} ، على سبيل المثال.

- -

إذا كنت تريد إضافة شيء ما مثل صورة إلى صفحتك ، فستحتاج إلى إضافة علامة للصورة والصورة نفسها. فمثلا:

- -

 

- -
<!DOCTYPE html>
-<html>
-<head>
-  <title>Hi there</title>
-</head>
-<body>
-  This is a page
-  a simple page
-  <img src="unicorn_pic.png" alt="Unicorn picture :)" />
-  now with a unicorn
-</body>
-</html>
- -

عدّل ملفك ليتضمن علامة {{HTMLElement ("img")}} ، على النحو التالي:

- -
<img src="unicorn_pic.png" alt="Unicorn picture :)" />
- -

 

- -

يمكن أن تذهب إلى أي مكان داخل {{HTMLElement ("body")}}. لا تنس حفظ الصفحة التي تم تغييرها!

- -

ثم ضع ملفًا باسم "unicorn_pic.png" في المجلد نفسه كملف HTML. عند تحديث نافذة المتصفح (أو إعادة فتح ملف HTML في متصفحك) ، يجب أن تشاهد المحتوى الذي تم تغييره ، مع استكمال يونيكورن! (لا تنس حفظ صفحتك).

- -

 

- -

Original file for the unicorn image

- -
-

ملاحظة: يمكنك الحصول على نسخة من صورة يونيكورن لاستخدامها في تجاربك عن طريق النقر بزر الماوس الأيمن فوق الصورة واختيار خيار "حفظ الصورة باسم ..." من القائمة التي تظهر.

-
- -

The files needed for this page to work now look something like this in your desktop:

- -

Screenshot of the explorer with 2 files : a html file and a picture file

- -

تبدو الملفات المطلوبة لهذه الصفحة الآن تبدو كشيء من هذا القبيل في سطح المكتب الخاص بك:

- -

Screenshot for the example with a picture

- -

 

- -

ربما لاحظت أن علامة {{HTMLElement ("img")}} تحتوي على {{Glossary ("attribute"، "attributes")}} التي توفر معلومات إضافية مطلوبة لبناء الكائن المطلوب ، وفي هذه الحالة ، اسم الملف الصورة التي سيتم عرضها والنص البديل الذي سيتم عرضه عندما يتعذر تحميل الصورة.

- -

هذا مثال على كيفية إضافة صورة إلى صفحتك ، ولكن يمكنك استخدام تقنيات مشابهة لإضافة الموسيقى ومقاطع الفيديو والمزيد ، وكل ذلك باستخدام لا شيء أكثر من HTML.
-  

- -

 

- -

الغوص أعمق
- هذه ليست صفحة ويب جميلة جدا
- كما قد تكون لاحظت ، هذه الصفحة ليست معجزة بالتصميم والجمال. وذلك لأن HTML تدور حول المحتوى وما يعنيه المحتوى (من حيث السياق والعلاقات بين كتل المحتوى) ، بدلاً من التصميم.

- -

يمكّنك {{Glossary ("CSS")}} من جعل المحتوى يتألق ، وذلك بإضافة التخطيط واللون والخطوط وما إلى ذلك. إن HTML الخالص جيد بما يكفي لصنع صفحات ويب بسيطة ، لكن الصفحات الأكثر تعقيدًا (أو حتى الصفحات البسيطة ذات التصميمات الجذابة) تحتاج عادة إلى CSS وربما {{Glossary ("JavaScript")}}. ينشئ HTML المحتوى وأنماط CSS للمحتوى وجافا سكريبت يجعل المحتوى ديناميكيًا.

- -

دعونا نجرب قليلا مع CSS بجعل النص الأساسي للصفحة باللون الأزرق:
- alghaws 'aemaq
-  

- -

 

- -
<!DOCTYPE html>
-<html>
-<head>
-  <title>Hi there</title>
-  <style>
-    body {
-      color: blue;
-    }
-  </style>
-</head>
-  <body>
-    <p>This is a some blue text</p>
-    <img src="unicorn_pic.png" alt="Unicorn picture :)" />
-  </body>
-</html>
- -

 

- -

لاحظ إضافة عنصر {{HTMLElement ("style")}} إلى الصفحة {{HTMLElement ("head")}}. هذا يحدد CSS لتطبيقه على النص الأساسي.

- -

تريد أن يتم تسطير النص؟ حاول إضافة "زخرفة النص: تسطير ؛" حكم على أسلوبك:

- -

 

- -
body {
-  color: blue;
-  text-decoration: underline;
-}
- -

تريد أن يكون النص بحجم محدد؟ جرب إضافة "font-size: 42px؛" مثله:

- -
body {
-  color: blue;
-  text-decoration: underline;
-  font-size: 42px;
-}
- -

والنهاية ستكون هكذا:

- -
<html>
-<head>
-  <title>Hi there</title>
-  <style>
-  body {
-    color: blue;
-    text-decoration: underline;
-    font-size: 42px;
-  }
-  </style>
-</head>
-<body>
-  <p>This is a blue underlined big text</p>
-  <img src="unicorn_pic.png" alt="Unicorn picture :)" />
-</body>
-</html>
- -

وإذا قمت بحفظ الصفحة في المحرر الخاص بك ، ثم قم بتحديث المتصفح ، فيجب أن تبدو الصفحة كما يلي:

- -

Screenshot of the browser with the page with some CSS

- -

ينمو إلى صفحتين
- عندما تتصفح الويب ، غالبًا ما تصادفك {{Glossary ("hyperlink" ، "links")}} ، وهي الطريقة الأكثر فائدة للانتقال من صفحة إلى أخرى. نظرًا لأن HTML عبارة عن محتوى وتعتبر الروابط نوعًا من المحتوى ، يمكنك إنشاء روابط بين الصفحات باستخدام HTML فقط.

- -

الربط بين صفحتين محليتين
- في هذا التمرين ، ستحتاج إلى إنشاء ملف HTML ثاني على جهاز الكمبيوتر الخاص بك. سنضيف رابطًا إلى كل صفحة حتى يمكنك التبديل سريعًا ذهابًا وإيابًا فيما بينها.

- -

في الملف الأول يمكنك الاحتفاظ بنفس البنية العامة كما كان من قبل. المهم هو إضافة علامة جديدة ، {{HTMLElement ("a")}} ، على النحو التالي:

- -

 

- -
<!DOCTYPE html>
-<html>
-<head>
-  <title>Page 1 to ground control</title>
-</head>
-<body>
-  This is page 1.
-  <a href="page2.html" title="to page 2">What is going on on page 2?</a>
-</body>
-</html>
- -

يجب أن ترتبط الصفحة الثانية بالصفحة الأولى:

- -
<!DOCTYPE html>
-<html>
-<head>
-  <title>Page 2 :)</title>
-</head>
-<body>
-  This is a page 2.
-  <a href="page1.html" title="to page 1">Want to go back to page 1? Click here</a>
-</body>
-</html>
- -
-

ملاحظة: تأكد من تطابق أسماء الملفات المحددة في سمة href للعلامة {{HTMLElement ("a")} مع أسماء الملفات التي أنشأتها على جهاز الكمبيوتر.

-
- -

 

- -

يمكنك الآن التنقل بين اثنين من مستندات HTML. افتح الصفحة 1 في المستعرض الخاص بك وانقر فوق الارتباط لفتح الصفحة 2 ، والعكس. يمكنك أيضًا اختبار الزر "السابق" في متصفحك. ستعيدك إلى الصفحة الأخيرة التي كنت تبحث عنها.

- -

يجب أن يكون لمدير الملفات ملفي HTML في نفس المجلد ، على النحو التالي:

- -

Screenshot of the file explorer with two HTML documents in one directory/folder

- -

الصفحة الاولي تشبه هذه:

- -

Screenshot of a file explorer with a html file for local test

- -

والصفحة الثانية تشبهه هذه بعد الضغط علي link:

- -

Screenshot of the 2nd page of the 2 pages example in the browser

- -
-

- -

- -

- -

113/5000

- -

ملاحظة: يعتبر الارتباط مرة أخرى إلى الصفحة رقم 1 هو البنفسجي لأن المتصفح "يعلم" بأننا سبق أن زرنا الصفحة الأولى.

- -

 

-
- -

 

- -

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

- -

الربط بموقع آخر
- في هذا التمرين ، سنقوم بإضافة ارتباط إلى ملف HTML بحيث يمكن للقارئ الوصول بسرعة إلى بعض الصفحات المفيدة على الويب. يمكنك الربط بأي شيء متوفر على الويب العام. دعونا نحاول ربط ويكيبيديا:

- -

 

- -
<!DOCTYPE html>
-<html>
-<head>
-  <title>My page</title>
-</head>
-<body>
-  One day,...Unicorns are great...See you.
-  <a href="https://en.wikipedia.org/wiki/Unicorn" title="Unicorn page on Wikipedia">Want to go know more about unicorns? Wikipedia is right here</a>
-</body>
-</html>
- -

يجب أن يبدو هذا أكثر أو أقل مثل هذا في المتصفح:

- -

Screenshot of the example page with a link to Wikipedia in the browser

- -

قم بتحريك مؤشر الماوس فوق الرابط ؛ سترى السمة {{htmlattrxref ("title")}} المعروضة في تلميح أداة تحويم. يمكن استخدام هذا لتوفير مزيد من المعلومات حول الارتباط ، بحيث يمكن للمستخدم اتخاذ قرار مستنير حول ما إذا كان سيتم النقر عليه أم لا.

- -
-

تذكير: عندما تقوم بتحرير الصفحة ، لا تنس حفظ الملف على المحرر وتحديث الصفحة على متصفحك حتى تتمكن من رؤية التغييرات التي قمت بها.

-
- -

الخطوات التالية
- كيفية استخدام علامات HTML: هناك الكثير من العلامات في HTML ؛ لقد نظرنا فقط في الأساسيات هنا! ستجد المزيد من الموارد حول ما هو ممكن هنا.
- تشريح صفحة الويب: تحتوي HTML على بعض القواعد وقد تحتوي الصفحة على الكثير من المحتوى ؛ يمكن أن يساعدك ذلك في فهم صفحات أكثر تعقيدًا ، مثل تلك المستخدمة في بعض المواقع الأكثر شيوعًا على الويب!
- فهم الروابط: استخدمنا بعض الأمثلة البسيطة جدًا مع الروابط ؛ هذه المقالة لك إذا كنت تريد أن تعرف فهم لماذا "الروابط" هي أصل اسم "ويب".
- يفيد استخدام الصور وإضافة الصوت والفيديو لإضافة محتوى متعدد الوسائط باستخدام HTML بسيط.

-- cgit v1.2.3-54-g00ecf