From 4b1a9203c547c019fc5398082ae19a3f3d4c3efe Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:41:15 -0500 Subject: initial commit --- files/ar/learn/html/forms/index.html | 114 ++++ files/ar/learn/html/index.html | 60 ++ .../getting_started/index.html | 760 +++++++++++++++++++++ .../html_text_fundamentals/index.html | 657 ++++++++++++++++++ .../ar/learn/html/introduction_to_html/index.html | 61 ++ .../learn/html/multimedia_and_embedding/index.html | 79 +++ .../index.html" | 36 + .../index.html" | 304 +++++++++ 8 files changed, 2071 insertions(+) create mode 100644 files/ar/learn/html/forms/index.html create mode 100644 files/ar/learn/html/index.html create mode 100644 files/ar/learn/html/introduction_to_html/getting_started/index.html create mode 100644 files/ar/learn/html/introduction_to_html/html_text_fundamentals/index.html create mode 100644 files/ar/learn/html/introduction_to_html/index.html create mode 100644 files/ar/learn/html/multimedia_and_embedding/index.html create mode 100644 "files/ar/learn/html/\330\247\331\204\330\254\330\257\330\247\331\210\331\204/index.html" create 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/html') diff --git a/files/ar/learn/html/forms/index.html b/files/ar/learn/html/forms/index.html new file mode 100644 index 0000000000..3c8f449476 --- /dev/null +++ b/files/ar/learn/html/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/html/index.html b/files/ar/learn/html/index.html new file mode 100644 index 0000000000..c9a9e88aa2 --- /dev/null +++ b/files/ar/learn/html/index.html @@ -0,0 +1,60 @@ +--- +title: 'تعلم HTML: أدلة ودروس' +slug: Learn/HTML +tags: + - Beginner + - CodingScripting + - HTML + - NeedsContent + - NeedsTranslation + - TopicStub +translation_of: Learn/HTML +--- +

 

+ +

لبناء المواقع، يجب أن نعرف عن {{معجم ( 'HTML')}} - التكنولوجيا الأساسية المستخدمة لتحديد هيكل صفحة ويب. يستخدم HTML لتحديد ما إذا كان ينبغي الاعتراف محتوى الويب الخاص بك كفقرة، القائمة، العنوان، وصلة، صورة، لاعب الوسائط المتعددة، شكل، أو واحد من العديد من العناصر الأخرى المتاحة أو حتى عنصر الجديد الذي قمت بتحديده.

+ +

مسار التعلم

+ +

من الناحية المثالية يجب أن تبدأ رحلة التعلم عن طريق تعلم HTML. ابدأ القراءة مقدمة إلى HTML . ثم تستطيع الانتقال إلى تعلم حول مواضيع أكثر تقدما مثل:

+ + + +

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

+ +

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

+ +

وحدات

+ +

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

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

حل المشاكل المشتركة HTML

+ +

استخدام HTML لحل المشاكل المشتركة يوفر روابط لأقسام المحتوى شرح كيفية استخدام HTML لحل مشاكل شائعة جدا عند إنشاء صفحة ويب: التعامل مع العناوين، وإضافة الصور ومقاطع الفيديو، مؤكدا المحتوى، وخلق شكل أساسي، الخ

+ +

أنظر أيضا

+ +
+
HTML (لغة توصيف النص التشعبي) على MDN
+
نقطة الدخول الرئيسية للثائق HTML على MDN، بما في ذلك عنصر مفصلة والسمة المراجع - إذا كنت تريد أن تعرف ما سمات عنصر ديه أو ما تقدر سمة لها، على سبيل المثال، وهذا هو مكان عظيم للبدء.
+
+ +

 

+ +

 

+ +
 
diff --git a/files/ar/learn/html/introduction_to_html/getting_started/index.html b/files/ar/learn/html/introduction_to_html/getting_started/index.html new file mode 100644 index 0000000000..35213057e3 --- /dev/null +++ b/files/ar/learn/html/introduction_to_html/getting_started/index.html @@ -0,0 +1,760 @@ +--- +title: ابدء مع HTML +slug: Learn/HTML/Introduction_to_HTML/Getting_started +translation_of: Learn/HTML/Introduction_to_HTML/Getting_started +--- +
{{LearnSidebar}}
+ +
{{NextMenu("Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML", "Learn/HTML/Introduction_to_HTML")}}
+ +

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

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

ما هي HTML؟

+ +

لغة ترميز النص الفائق ليس لغة برمجة؛ وإنما لغة ترميزيّة (markup language) تُستخدم لإخبار المتصفح بكيفيّة تنظيم صفحات الويب التي تزورها. يُمكن أن تكون هذه اللغة معقدة أو بسيطة كما يرغبها أن تكون مطور الويب. تتألف هذه اللغة من مجموعة من العناصر، والتي تحيط أو تُرَمِز أجزاء من المحتوى لتجعلها تظهر أو تتصرف بطريقة معينة. الوسوم المغلقة يُمكن أن تحوِّل جزء من النص إلى رابط يشير لموقع آخر، أو يمكن أن تجعل الكلمات مائلة، وهلم جرا. على سبيل المثال، انظر للسطر التالي:

+ +
قطتي شديدة الجمال
+ +

إذا أردنا جعل هذا النص فقرة، يمكننا القيام بهذا عن طريق توصيفه على أنه فقرة عن طريق إحاطته بعنصر الفقرة ({{htmlelement("p")}}):

+ +
<p>قطتي شديدة الجمال</p>
+ +
+

ملاحظة: عناصر لغة ترميز النص الفائق غير حساسة لحالة الحرف، أي يُمكِن كتابتها باستخدام حروف صغيرة أو كبيرة. على سبيل المثال يمكن كتابة العنصر {{htmlelement("title")}} بالشكل <title>، أو <TITLE>، أو <Title>، أو <TiTlE>، إلخ. جميع تلك الأشكال ستعمل بدون مشاكل. الأفضل هو كتابة جميع العنصار بحروف صغيرة لأسباب تنسيقيّة، ومقروئيّة، وغيرها من الأسباب الأخرى.

+
+ +

تشريح عنصر لغة ترميز النص الفائق

+ +

دعنا نستكشف عنصر الفقرة ذاك أكثر قليلاً:

+ +

+ +

الأجزاء الرئيسية من عنصرنا هي:

+ +
    +
  1. وسم الفتح (أو وسم البداية أو الوسم الإفتتاحي): يتألف من اسم العنصر (في حالتنا p)، محاطاً بقوس مفتوح وآخر مُغلَق. هذا المكوِّن يحدد بداية العنصر، أو بداية تأثيره (في حالتنا يحدد أين تبدأ الفقرة).
    2. +
  2. وسم الإغلاق (أو وسم النهاية أو الوسم الختامي): مشابه لوسم البداية، ماعدا أنه يتضمن شرطة مائلة (/) قبل اسم العنصر. هذا المكوِّن يحدد نهاية (في حالتنا نهاية الفقرة). يُعَد نسيان وضع وسم الإغلاق أحد الأخطاء الشائعة التي يقع بها المبتدئون والتي تؤدي إلى مشاكل تنظيميّة في الصفحة (خروج النص من مكان مثلاً).
    3. +
  3. المحتوى: هذا المكوِّن يمثل محتوى الذي يُرمِزُهُ العنصر، والذي هو في حالتنا النص.
    4. +
  4. العنصر: يتألف من وسم البداية، ووسم الإغلاق، والمحتوى (جميع المحتويات السابقة).
    5. +
+ +

التعلم النشط: إنشاء أول عنصر لك في لغة ترميز النص الفائق

+ +

قم بتعديل السطر أدناه في منطقة الإدخال عن طريق إحاطته باستخدام الوسمين <em> و </em> (ضع <em> قبله لفتح العنصر، و </em> بعده لإغلاق العنصر)، هذا ينبغي أن يحوِّل النص إلى مائل. يمكنك رؤية التغييرات في منطقة الخرج.

+ +

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

+ + + +

{{ EmbedLiveSample('Playable_code', 700, 400, "", "", "hide-codepen-jsfiddle") }}

+ +

العناصر المتداخلة

+ +

يمكنك وضع عنصر بداخل عنصر أخر أيضاً، وهذا ما يدعى بالتداخل (nesting). إذا أردنا تحديد أن قطتنا جميلة جداً، يمكننا إحاطة الكلمة "جداً" بالعنصر <strong>، الذي يدل على تأكيد الكلمة بشدّة:

+ +
<p>قطتي جميلة <strong>جداً</strong>.</p>
+ +

عليك أن تتأكد من أن عناصرك متداخلة بشكل صحيح. في المثال أعلاه قمنا بفتح العنصر <p> أولاً، وبعده العنصر <strong>، وبالتالي علينا إغلاق العنصر <strong> ويليه الآخر. فالشكل التالي ليس صحيحاً:

+ +
<p>قطتي جميلة <strong>جداً.</p></strong>
+ +

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

+ +

العناصر المستحوذة والمُضمَنِة

+ +

يوجد تصنيفين مهمين للعناصر في لغة الترميز النص الفائق، والذين ينبغي عليك معرفتهم، وهم العناصر المستحوذة (أو الكتلية block elements) والعناصر المُضمَنِة (inline elements).

+ + + +

خذ المثال التالي:

+ +
<em>first</em><em>second</em><em>third</em>
+
+<p>fourth</p><p>fifth</p><p>sixth</p>
+
+ +

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

+ +

{{ EmbedLiveSample('Block_versus_inline_elements', 700, 200, "", "", "hide-codepen-jsfiddle") }}

+ +
+

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

+
+ +
+

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

+
+ +
+

ملاحظة: يمكنك إيجاد صفحات مرجعية مفيدة تتضمن قوائم تحوي العناصر الكتلية والمضمنة، انظر إلى العناصر الكتلية و العناصر المضمنة.

+
+ +

العناصر الفارغة

+ +

لا تتبع جميع العناصر النمط المشروح أعلاه، والذي هو عبارة عن وضع وسم الفتح، وبعده المحتوى، وبعده وسم الإغلاق. فبعض العناصر تتألف من وسم مُفرَد، والذي يستخدم عادةً لإدخال/تضمين شيء في الوثيقة. على سبيل المثال، يُضمِن العنصر {{htmlelement("img")}} صورة في الصفحة في الموضع الذي عُرِفَ فيه:

+ +
<img src="https://raw.githubusercontent.com/mdn/beginner-html-site/gh-pages/images/firefox-icon.png">
+ +

ينبغي أن يُخرِج ذلك السطر الشكل التالي في صفحتك:

+ +

{{ EmbedLiveSample('Empty_elements', 700, 300, "", "", "hide-codepen-jsfiddle") }}

+ +
+

ملاحظة: تسمى العناصر الفارغة أحياناً بالعناصر الخاوية (void elements).

+
+ +

السمات

+ +

يمكن للعناصر أيضاً أنت تحتوي على سمات، والتي تبدو كشيء من هذا القبيل:

+ +

&amp;amp;lt;p class="editor-note">قطتي شديدة الجمال&amp;amp;lt;/p>

+ +

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

+ +

السمة يجب أن تملك دائماً:

+ +
    +
  1. مسافة بينها وبين اسم العنصر (أو السمة التي تسبقها، إذا كان العنصر يملك بالفعل سمةً أو أكثر).
    2. +
  2. اسم السمة، متبوعاً بإشارة يساوي.
    3. +
  3. علامتي تنصيص تحيط بقيمة السمة.
    4. +
+ +

التعلم النشط: إضافة سمات إلى عنصر

+ +

يمكننا أخذ العنصر {{htmlelement("a")}} كمثال آخر. يعد الحرف "a" إختصاراً لكلمة "مرساة (anchor)"، يحول هذا العنصر النص الذي يحيط به إلى رابط تشعبي. يُمكن أن يأخذ هذا العنصر عدداً من السمات، منها:

+ + + +

قم بتعديل السطر أدناه في منطقة الإدخال لتحويله إلى رابط يشير لموقعك المفضل. أولاً، أضف العنصر <a>. ثانياً، أضف السمتين href و title. وأخيراً، عَرِف السمة target لفتح الرابط في نافذة جديدة. ستكون قادراً على رؤية التغييرات بشكل حي في منطقة الإخراج. ينبغي أن ترى أنه عند التحويم على الرابط سيُعرض محتوى السمة title، وعند الضغط عليه سيتم الإنتقال إلى عنوان الويب الموجود في السمة href. تذكر أنه ينبغي عليك وضع مسافة بين اسم العنصر وكل سمة يملكها.

+ +

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

+ + + +

{{ EmbedLiveSample('Playable_code2', 700, 400, "", "", "hide-codepen-jsfiddle") }}

+ +

السمات البوليانية (المنطقية)

+ +

سترى أحياناً سمات تُكتَب من دون قيمة. تدعى هذه السمات بالسمات المنطقية، ويمكن أن تأخذ هذه السمات قيمة واحدة، والتي هي عادةً اسم السمة نفسها. على سبيل المثال، السمة {{htmlattrxref("disabled", "input")}}، والتي يُمكن أن تُسندها لعناصر الإدخال إذا أردت تعطيلها حتى لا يستطيع المستخدم إدخال أية بيانات فيها.

+ +
<input type="text" disabled="disabled">
+ +

كاختصار، يمكنك كتابة السمة أيضاً بالشكل التالي (قمنا أيضاً بإضافة عنصر إدخال غير مُعطَل لتوضيح الفكرة أكثر):

+ +
<input type="text" disabled>
+
+<input type="text">
+
+ +

المثالين سيعطيانك نفس النتيجة:

+ +

{{ EmbedLiveSample('Boolean_attributes', 700, 100, "", "", "hide-codepen-jsfiddle") }}

+ +

حذف علامات الإقتباس من حول قيم السمات

+ +

When you look around the World Wide Web, you'll come across all kind of strange markup styles, including attribute values without quotes. This is allowable in certain circumstances, but will break your markup in others. For example, if we revisit our link example from earlier, we could write a basic version with only the href attribute, like this:

+ +
<a href=https://www.mozilla.org/>favourite website</a>
+ +

However, as soon as we add the title attribute in this style, things will go wrong:

+ +
<a href=https://www.mozilla.org/ title=The Mozilla homepage>favourite website</a>
+ +

At this point the browser will misinterpret your markup, thinking that the title attribute is actually three attributes — a title attribute with the value "The", and two boolean attributes, Mozilla and homepage. This is obviously not what was intended, and will cause errors or unexpected behavior in the code, as seen in the live example below. Try hovering over the link to see what the title text is!

+ +

{{ EmbedLiveSample('Omitting_quotes_around_attribute_values', 700, 100, "", "", "hide-codepen-jsfiddle") }}

+ +

Our advice is to always include the attribute quotes — it avoids such problems, and results in more readable code too.

+ +

هل استخدم علامة تنصيص مزدوجة أم مفردة؟

+ +

In this article you'll notice that the attributes are all wrapped in double quotes. You might however see single quotes in some people's HTML. This is purely a matter of style, and you can feel free to choose which one you prefer. Both the following lines are equivalent:

+ +
<a href="http://www.example.com">A link to my example.</a>
+
+<a href='http://www.example.com'>A link to my example.</a>
+ +

You should however make sure you don't mix them together. The following will go wrong!

+ +
<a href="http://www.example.com'>A link to my example.</a>
+ +

If you've used one type of quote in your HTML, you can include the other type of quote without causing any problems:

+ +
<a href="http://www.example.com" title="Isn't this fun?">A link to my example.</a>
+ +

However if you want to include a quote within the quotes where both the quotes are of the same type(single quote or double quote), you'll have to use HTML entities for the quotes.

+ +

تشريح وثيقة لغة ترميز النص الفائق

+ +

That wraps up the basics of individual HTML elements, but they aren't very useful on their own. Now we'll look at how individual elements are combined to form an entire HTML page:

+ +
<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>My test page</title>
+  </head>
+  <body>
+    <p>This is my page</p>
+  </body>
+</html>
+ +

Here we have:

+ +
    +
  1. <!DOCTYPE html>: The doctype. In the mists of time, when HTML was young (about 1991/2), doctypes were meant to act as links to a set of rules that the HTML page had to follow to be considered good HTML, which could mean automatic error checking and other useful things. They used to look something like this: + + 
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
+"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    + However, these days no one really cares about them, and they are really just a historical artifact that needs to be included for everything to work right. <!DOCTYPE html> is the shortest string of characters that counts as a valid doctype; that's all you really need to know.
    2. +
  2. <html></html>: The {{htmlelement("html")}} element. This element wraps all the content on the entire page, and is sometimes known as the root element.
    3. +
  3. <head></head>: The {{htmlelement("head")}} element. This element acts as a container for all the stuff you want to include on the HTML page that isn't the content you are showing to your page's viewers. This includes things like keywords and a page description that you want to appear in search results, CSS to style our content, character set declarations, and more. You'll learn more about this in the next article in the series.
    4. +
  4. <meta charset="utf-8">: This element sets the character set your document should use to UTF-8, which includes most characters from the vast majority of human written languages. Essentially it can now handle any textual content you might put on it. There is no reason not to set this, and it can help avoid some problems later.
    5. +
  5. <title></title>: The {{htmlelement("title")}} element. This sets the title of your page, which is the title that appears in the browser tab the page is loaded in, and is used to describe the page when you bookmark/favorite it.
    6. +
  6. <body></body>: The {{htmlelement("body")}} element. This contains all the content that you want to show to web users when they visit your page, whether that's text, images, videos, games, playable audio tracks, or whatever else.
    7. +
+ +

التعلم النشط: إضافة بعض الميزات لوثيقة ترميز النص الفائق

+ +

If you want to experiment with writing some HTML on your local computer, you can:

+ +
    +
  1. Copy the HTML page example listed above.
    2. +
  2. Create a new file in your text editor.
    3. +
  3. Paste the code into the new text file.
    4. +
  4. Save the file as index.html.
    5. +
+ +
+

Note: You can also find this basic HTML template on the MDN Learning Area Github repo.

+
+ +

You can now open this file in a web browser to see what the rendered code looks like, and then edit the code and refresh the browser to see what the result is. Initially it will look like this:

+ +

A simple HTML page that says This is my pageSo in this exercise, you can edit the code locally on your computer, as outlined above, or you can edit it in the editable sample window below (the editable sample window represents just the contents of the {{htmlelement("body")}} element, in this case.) We'd like you to have a go at implementing the following steps:

+ + + +

If you make a mistake, you can always reset it using the Reset button. If you get really stuck, press the Show solution button to see the answer.

+ + + +

{{ EmbedLiveSample('Playable_code3', 700, 600, "", "", "hide-codepen-jsfiddle") }}

+ +

المساحات الفارغة في لغة ترميز النص الفائق

+ +

In the above examples you may have noticed that a lot of whitespace is included in the code listings — this is not necessary at all; the two following code snippets are equivalent:

+ +
<p>Dogs are silly.</p>
+
+<p>Dogs        are
+         silly.</p>
+ +

No matter how much whitespace you use (which can include space characters, but also line breaks), the HTML parser reduces each one down to a single space when rendering the code. So why use so much whitespace? The answer is readability — it is so much easier to understand what is going on in your code if you have it nicely formatted, and not just bunched up together in a big mess. In our HTML we've got each nested element indented by two spaces more than the one it is sitting inside. It is up to you what style of formatting you use (how many spaces for each level of indentation, for example), but you should consider formatting it.

+ +

Entity references: Including special characters in HTML

+ +

In HTML, the characters <, >,",' and & are special characters. They are parts of the HTML syntax itself, so how do you include one of these characters in your text, for example if you really want to use an ampersand or less than sign, and not have it interpreted as code as some browsers may do?

+ +

We have to use character references — special codes that represent characters, and can be used in these exact circumstances. Each character reference is started with an ampersand (&), and ended by a semicolon (;).

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Literal characterCharacter reference equivalent
<&lt;
>&gt;
"&quot;
'&apos;
&&amp;
+ +

In the below example, you can see two paragraphs, which are talking about web technologies:

+ +
<p>In HTML, you define a paragraph using the <p> element.</p>
+
+<p>In HTML, you define a paragraph using the &lt;p&gt; element.</p>
+ +

In the live output below, you can see that the first paragraph has gone wrong, because the browser thinks that the second instance of <p> is starting a new paragraph. The second paragraph looks fine, because we have replaced the angle brackets with character references.

+ +

{{ EmbedLiveSample('Entity_references_Including_special_characters_in_HTML', 700, 200, "", "", "hide-codepen-jsfiddle") }}

+ +
+

Note: A chart of all the available HTML character entity references can be found on Wikipedia: List of XML and HTML character entity references.

+
+ +

التعليقات في لغة ترميز النص الفائق

+ +

In HTML, as with most programming languages, there is a mechanism available to write comments in the code — comments are ignored by the browser and invisible to the user, and their purpose is to allow you to include comments in the code to say how your code works, what the different parts of the code do, etc. This can be very useful if you return to a code base that you've not worked on for six months, and can't remember what you did — or if you hand your code over to someone else to work on.

+ +

To turn a section of content inside your HTML file into a comment, you need to wrap it in the special markers <!-- and -->, for example:

+ +
<p>I'm not inside a comment</p>
+
+<!-- <p>I am!</p> -->
+ +

As you can see below, the first paragraph appears in the live output, but the second one doesn't.

+ +

{{ EmbedLiveSample('HTML_comments', 700, 100, "", "", "hide-codepen-jsfiddle") }}

+ +

الملخص

+ +

You've reached the end of the article — we hope you enjoyed your tour of the very basics of HTML! At this point you should understand what the language looks like, how it works at a basic level, and be able to write a few elements and attributes. This is a perfect place to be right now, as in subsequent articles in the module we will go into some of the things you have already looked at in a lot more detail, and introduce some new features of the language. Stay tuned!

+ +
+

Note: At this point, as you start to learn more about HTML, you might also want to start to explore the basics of Cascading Style Sheets, or CSS. CSS is the language you use to style your web pages (whether e.g. changing the font or colors, or altering the page layout). HTML and CSS go very well together, as you'll soon discover.

+
+ +

انظر أيضاً

+ + + +
{{NextMenu("Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML", "Learn/HTML/Introduction_to_HTML")}}
diff --git a/files/ar/learn/html/introduction_to_html/html_text_fundamentals/index.html b/files/ar/learn/html/introduction_to_html/html_text_fundamentals/index.html new file mode 100644 index 0000000000..fba39b360c --- /dev/null +++ b/files/ar/learn/html/introduction_to_html/html_text_fundamentals/index.html @@ -0,0 +1,657 @@ +--- +title: أساسيات النصوص في لغة ترميز النص الفائق +slug: Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals +tags: + - العنونة + - الفقرات + - النصوص + - دليل + - مبدئين + - مقدمة إلى لغة ترميز النص الفائق +translation_of: Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML", "Learn/HTML/Introduction_to_HTML/Creating_hyperlinks", "Learn/HTML/Introduction_to_HTML")}}
+ +

أحد الأهداف الرئيسية للغة ترميز النص الفائق هي هيكلة النصوص وإعطائها هدف ووظيفة (كما تُعرف هذه الوظيفة ب {{glossary("semantics")}}) حتّى يتمكن المتصفح بعرض النصوص بطريقة مناسبة. تشرح هذه المقالة الطريقة التي يُمكن استخدام هذه اللغة لهيكلة صفحة تتكون من نصوص، عن طريق إضافة عناوين وفقرات، ومؤكدات على الكلمات (حروف غامقة ومائلة، على سبيل المثال)، وإنشاء قوائم، وغيرها.

+ + + + + + + + + + + + +
المتطلبات:معرف بسيطة بلغة ترميز النص الفائقة، كما هو مشروح في مقالة البدء مع اللغة.
الهدف:تعلم كيفية ترميز صفحة بسيطة مؤلفة من نصوص لإعطائها هيكلية ووظيفة.
+ +

الأساسيات: العناوين والفقرات

+ +

تتألف معظم النصوص المُنظمة من عناوين وفقرات، بغض النظر عما إذا كنت تقرأ قصة، أو جريدة، أو كتاب جامعي، أو مجلة ... إلخ.

+ +

An example of a newspaper front cover, showing use of a top level heading, subheadings and paragraphs.

+ +

بحيث يجعل المحتوى المنظم القراءة أكثر سهولة ومتعة.

+ +

في لغة ترميز النص الفائق، تحاط الفقرات بالعنصر {{htmlelement("p")}}، كالتالي:

+ +
<p>I am a paragraph, oh yes I am.</p>
+ +

وتحاط العناوين بوسوم العنونة المخصصة:

+ +
<h1>I am the title of the story.</h1>
+ +

يوجد ست عناوين متدرجة المستويات، وهي {{htmlelement("h1")}}، و {{htmlelement("h2")}}، و {{htmlelement("h3")}}، و {{htmlelement("h4")}}، و {{htmlelement("h5")}}، و {{htmlelement("h6")}}. يمثل الوسم <h1> العنوان الرئيسي، بينما يمثل الوسم <h2> عنوان فرعي، والوسم <h3> عنوان فرعي للعنوان الفرعي الأول، وهكذا.

+ +

تنفيذ التسلسل الهيكلي

+ +

على سبيل المثال، في قصة ما، سيمثل الوسم <h1> عنوان القصة، والوسم <h2> سيمثل عنوان كل فصل، بينما سيمثل الوسم <h3> القسم الفرعي لكل فصل،وهلم جرا.

+ +
<h1>The Crushing Bore</h1>
+
+<p>By Chris Mills</p>
+
+<h2>Chapter 1: The dark night</h2>
+
+<p>It was a dark night. Somewhere, an owl hooted. The rain lashed down on the ...</p>
+
+<h2>Chapter 2: The eternal silence</h2>
+
+<p>Our protagonist could not so much as a whisper out of the shadowy figure ...</p>
+
+<h3>The specter speaks</h3>
+
+<p>Several more hours had passed, when all of a sudden the specter sat bolt upright and exclaimed, "Please have mercy on my soul!"</p>
+ +

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

+ + + +

لماذا نحتاج الهيكلة (التنظيم)؟

+ +

للإجابة على هذا السؤال، دعنا نأخذ على الملف text-start.html، يعتبر هذا الملف نقطة البداية لمثالنا في هذه المقالة (وهي وصفحة حمص جميلة). يجب عليك حفظ نسخة من هذا الملف على جهازك، فستحتاجه في تمارين لاحقة. تحتوي جسم الوثيقة على عدة أجزاء من المحتوى، وهي غير مُرمَزِة بأي شكل، ولكنهم مفصولين بسطور.

+ +

بكل الأحوال، عندما ستفتح هذه الوثيقة في متصفحك، سترى أنَّ النص سيظهر كقطعة كبيرة!

+ +

A webpage that shows a wall of unformatted text, because there are no elements on the page to structure it.

+ +

يرجع هذا لعدم وجود عناصر لتنظم المحتوى، ولذلك لم يتمكن المتصفح بمعرفة أي جزء هو عنوان وأي جزء هو فقرة. المزيد:

+ + + +

We therefore need to give our content structural markup.

+ +

Active learning: Giving our content structure

+ +

Let's jump straight in with a live example. In the example below, add elements to the raw text in the Input field so that it appears as a heading and two paragraphs in the Output field.

+ +

If you make a mistake, you can always reset it using the Reset button. If you get stuck, press the Show solution button to see the answer.

+ + + +

{{ EmbedLiveSample('Playable_code', 700, 500) }}

+ +

Why do we need semantics?

+ +

Semantics are relied on everywhere around us — we rely on previous experience to tell us what the function of everyday objects is; when we see something, we know what its function will be. So, for example, we expect a red traffic light to mean "stop", and a green traffic light to mean "go". Things can get tricky very quickly if the wrong semantics are applied (do any countries use red to mean "go"? I hope not.)

+ +

In a similar vein, we need to make sure we are using the correct elements, giving our content the correct meaning, function, or appearance. In this context the {{htmlelement("h1")}} element is also a semantic element, which gives the text it wraps around the role (or meaning) of "a top level heading on your page."

+ +
<h1>This is a top level heading</h1>
+ +

By default, the browser will give it a large font size to make it look like a heading (although you could style it to look like anything you wanted using CSS). More importantly, its semantic value will be used in multiple ways, for example by search engines and screen readers (as mentioned above.)

+ +

On the other hand, you could make any element look like a top level heading. Consider the following:

+ +
<span style="font-size: 32px; margin: 21px 0;">Is this a top level heading?</span>
+ +

This is a {{htmlelement("span")}} element. It has no semantics. You use it to wrap content when you want to apply CSS to it (or do something to it with JavaScript) without giving it any extra meaning (You'll find out more about these later on in the course.) We've applied some CSS to it to make it look like a top level heading, but since it has no semantic value, it will not get any of the extra benefits described above. It is a good idea to use the relevant HTML element for the job.

+ +

Lists

+ +

Now let's turn our attention to lists. Lists are everywhere in life — from your shopping list to the list of directions you subconsciously follow to get to your house every day, to the lists of instructions you are following in these tutorials! Lists are everywhere on the Web too, and we've got three different types to worry about.

+ +

Unordered

+ +

Unordered lists are used to mark up lists of items for which the order of the items doesn't matter — let's take a shopping list as an example.

+ +
milk
+eggs
+bread
+hummus
+ +

Every unordered list starts off with a {{htmlelement("ul")}} element — this wraps around all the list items:

+ +
<ul>
+milk
+eggs
+bread
+hummus
+</ul>
+ +

The last step is to wrap each list item in a {{htmlelement("li")}} (list item) element:

+ +
<ul>
+  <li>milk</li>
+  <li>eggs</li>
+  <li>bread</li>
+  <li>hummus</li>
+</ul>
+ +

Active learning: Marking up an unordered list

+ +

Try editing the live sample below to create your very own HTML unordered list.

+ + + +

{{ EmbedLiveSample('Playable_code_2', 700, 400) }}

+ +

Ordered

+ +

Ordered lists are lists in which the order of the items does matter — let's take a set of directions as an example:

+ +
Drive to the end of the road
+Turn right
+Go straight across the first two roundabouts
+Turn left at the third roundabout
+The school is on your right, 300 meters up the road
+ +

The markup structure is the same as for unordered lists, except that you have to wrap the list items in an {{htmlelement("ol")}} element, rather than <ul>:

+ +
<ol>
+  <li>Drive to the end of the road</li>
+  <li>Turn right</li>
+  <li>Go straight across the first two roundabouts</li>
+  <li>Turn left at the third roundabout</li>
+  <li>The school is on your right, 300 meters up the road</li>
+</ol>
+ +

Active learning: Marking up an ordered list

+ +

Try editing the live sample below to create your very own HTML ordered list.

+ + + +

{{ EmbedLiveSample('Playable_code_3', 700, 500) }}

+ +

Active learning: Marking up our recipe page

+ +

So at this point in the article, you have all the information you need to mark up our recipe page example. You can choose to either save a local copy of our text-start.html starting file and do the work there, or do it in the editable example below. Doing it locally will probably be better, as then you'll get to save the work you are doing, whereas if you fill it in to the editable example, it will be lost the next time you open the page. Both have pros and cons.

+ + + +

{{ EmbedLiveSample('Playable_code_4', 700, 500) }}

+ +

If you get stuck, you can always press the Show solution button, or check out our text-complete.html example on our github repo.

+ +

Nesting lists

+ +

It is perfectly ok to nest one list inside another one. You might want to have some sub-bullets sitting below a top level bullet. Let's take the second list from our recipe example:

+ +
<ol>
+  <li>Remove the skin from the garlic, and chop coarsely.</li>
+  <li>Remove all the seeds and stalk from the pepper, and chop coarsely.</li>
+  <li>Add all the ingredients into a food processor.</li>
+  <li>Process all the ingredients into a paste.</li>
+  <li>If you want a coarse "chunky" hummus, process it for a short time.</li>
+  <li>If you want a smooth hummus, process it for a longer time.</li>
+</ol>
+ +

Since the last two bullets are very closely related to the one before them (they read like sub-instructions or choices that fit below that bullet), it might make sense to nest them inside their own unordered list, and put that list inside the current fourth bullet. This would look like so:

+ +
<ol>
+  <li>Remove the skin from the garlic, and chop coarsely.</li>
+  <li>Remove all the seeds and stalk from the pepper, and chop coarsely.</li>
+  <li>Add all the ingredients into a food processor.</li>
+  <li>Process all the ingredients into a paste.
+    <ul>
+      <li>If you want a coarse "chunky" hummus, process it for a short time.</li>
+      <li>If you want a smooth hummus, process it for a longer time.</li>
+    </ul>
+  </li>
+</ol>
+ +

Try going back to the previous active learning example and updating the second list like this.

+ +

Emphasis and importance

+ +

In human language, we often emphasise certain words to alter the meaning of a sentence, and we often want to mark certain words as important or different in some way. HTML provides various semantic elements to allow us to mark up textual content with such effects, and in this section, we'll look at a few of the most common ones.

+ +

Emphasis

+ +

When we want to add emphasis in spoken language, we stress certain words, subtly altering the meaning of what we are saying. Similarly, in written language we tend to stress words by putting them in italics. For example, the following two sentences have different meanings.

+ +

I am glad you weren't late.

+ +

I am glad you weren't late.

+ +

The first sentence sounds genuinely relieved that the person wasn't late. In contrast, the second one sounds sarcastic or passive-aggressive, expressing annoyance that the person arrived a bit late.

+ +

In HTML we use the {{htmlelement("em")}} (emphasis) element to mark up such instances. As well as making the document more interesting to read, these are recognised by screen readers and spoken out in a different tone of voice. Browsers style this as italic by default, but you shouldn't use this tag purely to get italic styling. To do that, you'd use a {{htmlelement("span")}} element and some CSS, or perhaps an {{htmlelement("i")}} element (see below.)

+ +
<p>I am <em>glad</em> you weren't <em>late</em>.</p>
+ +

Strong importance

+ +

To emphasize important words, we tend to stress them in spoken language and bold them in written language. For example:

+ +

This liquid is highly toxic.

+ +

I am counting on you. Do not be late!

+ +

In HTML we use the {{htmlelement("strong")}} (strong importance) element to mark up such instances. As well as making the document more useful, again these are recognized by screen readers and spoken in a different tone of voice. Browsers style this as bold text by default, but you shouldn't use this tag purely to get bold styling. To do that, you'd use a {{htmlelement("span")}} element and some CSS, or perhaps a {{htmlelement("b")}} element (see below.)

+ +
<p>This liquid is <strong>highly toxic</strong>.</p>
+
+<p>I am counting on you. <strong>Do not</strong> be late!</p>
+ +

You can nest strong and emphasis inside one another if desired:

+ +
<p>This liquid is <strong>highly toxic</strong> —
+if you drink it, <strong>you may <em>die</em></strong>.</p>
+ +

Active learning: Let's be important!

+ +

In this active learning section, we have provided an editable example. Inside it, we'd like you to try adding emphasis and strong importance to the words you think need them, just to have some practice.

+ + + +

{{ EmbedLiveSample('Playable_code_5', 700, 500) }}

+ +

Italic, bold, underline...

+ +

The elements we've discussed so far have clearcut associated semantics. The situation with {{htmlelement("b")}}, {{htmlelement("i")}}, and {{htmlelement("u")}} is somewhat more complicated. They came about so people could write bold, italics, or underlined text in an era when CSS was still supported poorly or not at all. Elements like this, which only affect presentation and not semantics, are known as presentational elements and should no longer be used, because as we've seen before, semantics is so important to accessibility, SEO, etc.

+ +

HTML5 redefined <b>, <i> and <u> with new, somewhat confusing, semantic roles.

+ +

Here's the best rule of thumb: it's likely appropriate to use <b>, <i>, or <u> to convey a meaning traditionally conveyed with bold, italics, or underline, provided there is no more suitable element. However, it always remains critical to keep an accessibility mindset. The concept of italics isn't very helpful to people using screen readers, or to people using a writing system other than the Latin alphabet.

+ + + +
+

A kind warning about underline: People strongly associate underlining with hyperlinks. Therefore, on the Web, it's best to underline only links. Use the <u> element when it's semantically appropriate, but consider using CSS to change the default underline to something more appropriate on the Web. The example below illustrates how it can be done.

+
+ +
<!-- scientific names -->
+<p>
+  The Ruby-throated Hummingbird (<i>Archilochus colubris</i>)
+  is the most common hummingbird in Eastern North America.
+</p>
+
+<!-- foreign words -->
+<p>
+  The menu was a sea of exotic words like <i lang="uk-latn">vatrushka</i>,
+  <i lang="id">nasi goreng</i> and <i lang="fr">soupe à l'oignon</i>.
+</p>
+
+<!-- a known misspelling -->
+<p>
+  Someday I'll learn how to <u>spel</u> better.
+</p>
+
+<!-- Highlight keywords in a set of instructions -->
+<ol>
+  <li>
+    <b>Slice</b> two pieces of bread off the loaf.
+  </li>
+  <li>
+    <b>Insert</b> a tomato slice and a leaf of
+    lettuce between the slices of bread.
+  </li>
+</ol>
+ +

Summary

+ +

That's it for now! This article should have given you a good idea of how to start marking up text in HTML, and introduced you to some of the most important elements in this area. There are a lot more semantic elements to cover in this area, and we'll look at a lot more in our 'More Semantic Elements' article, later on in the course. In the next article, we'll be looking in detail at how to create hyperlinks, possibly the most important element on the Web.

+ +

{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML", "Learn/HTML/Introduction_to_HTML/Creating_hyperlinks", "Learn/HTML/Introduction_to_HTML")}}

+ +

 

+ +

In this module

+ + + +

 

diff --git a/files/ar/learn/html/introduction_to_html/index.html b/files/ar/learn/html/introduction_to_html/index.html new file mode 100644 index 0000000000..f237220f27 --- /dev/null +++ b/files/ar/learn/html/introduction_to_html/index.html @@ -0,0 +1,61 @@ +--- +title: مقدمة إلى HTML +slug: Learn/HTML/Introduction_to_HTML +tags: + - HTML + - صفحة هبوط + - لغة ترميز النص الفائق +translation_of: Learn/HTML/Introduction_to_HTML +--- +
{{LearnSidebar}}
+ +

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

+ +

المتطلبات

+ +

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

+ +
+

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

+
+ +

مقالات تعليميّة

+ +

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

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

اختبارات

+ +

الاختبارات (التقييمات) التالية ستختبر فهمك لأساسيات اللغة المُغطاة في المقالات أعلاه.

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

طالِع أيضاً

+ +
+
أساسيات محو أمية ويب
+
درس ممتاز من شركة موزيلا يقوم باستكشاف واختبار الكثير من المهارات التي تحدثنا عنها في وحدة مقدمة إلى HTML. المتعلمون سيحصلون على دراية في قراءة، كتابة، والمشاركة في الويب من خلال هذه الوحدة التي تتألف من ست أجزاء. اكتشف أساسيات الويب من خلال التعلم بطريقة إنتاجيّة وتعاونيّة.
+
+ +
 
diff --git a/files/ar/learn/html/multimedia_and_embedding/index.html b/files/ar/learn/html/multimedia_and_embedding/index.html new file mode 100644 index 0000000000..d66696d111 --- /dev/null +++ b/files/ar/learn/html/multimedia_and_embedding/index.html @@ -0,0 +1,79 @@ +--- +title: الوسائط المتعددة والتضمين +slug: Learn/HTML/Multimedia_and_embedding +tags: + - Assessment + - Audio + - Beginner + - CodingScripting + - Embedding + - Flash + - Guide + - HTML + - Images + - Landing + - Learn + - Multimedia + - NeedsTranslation + - SVG + - TopicStub + - Video + - Web + - iframes + - imagemaps + - img + - responsive +translation_of: Learn/HTML/Multimedia_and_embedding +--- +

{{LearnSidebar}}

+ +

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

+ +

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

+ +

قبل بدء هذه الوحدة ، يجب أن يكون لديك معرفة معقولة بأساسيات HTML ، كما هو موضح سابقًا في مقدمة عن HTML . إذا لم تعمل من خلال هذه الوحدة (أو شيء مماثل) ، فقم بالعمل عليها أولاً ، ثم ارجع!

+ +
+

Note: If you are working on a computer/tablet/other device where you don't have the ability to create your own files, you could try out (most of) the code examples in an online coding program such as JSBin or Thimble.

+
+ +

ادله

+ +

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

+ +
+
Images in HTML
+
+

هناك أنواع أخرى من الوسائط المتعددة للنظر، ولكن من المنطقي أن تبدأ مع المتواضع {{htmlelement ("img"}} عنصر يستخدم لتضمين صورة بسيطة في صفحة ويب. في هذه المقالة سننظر في كيفية استخدامه بمزيد من العمق ، بما في ذلك الأساسيات ، والتعليق عليه مع التسميات التوضيحية باستخدام {{htmlelement ("figure"}}، وكيفية ارتباطه بصور خلفية CSS.

+
+
Video and audio content
+
+

بعد ذلك، سننظر في كيفية استخدام عناصر {{(HTML5 {{htmlelement ("video"}}} و{{(htmlelement ("audio"}} لتضمين الفيديو والصوت على صفحاتنا، بما في ذلك الأساسيات، وتوفير الوصول إلى تنسيقات ملفات مختلفة إلى متصفحات مختلفة، وإضافة التسميات التوضيحية والترجمة، وكيفية إضافة نسخ احتياطية للمتصفحات القديمة.

+
+
From <object> to <iframe> — other embedding technologies
+
عند هذه النقطة نود أن تأخذ إلى حد ما من خطوة جانبية، والنظر في اثنين من العناصر التي تسمح لك لتضمين مجموعة واسعة من أنواع المحتوى في صفحات الويب الخاصة بك: {{htmlelement ("iframe"}}، {{htmlelement ("embed"}} و {{htmlelement ("object"}}. <iframe> هي لتضمين صفحات ويب أخرى ، والاثنان الآخران يسمحان لك بتضمين ملفات PDF و SVG وحتى Flash - وهي تقنية في طريقها للخروج ، ولكن قد لا تزال تراها بشكل شبه منتظم.
+
Adding vector graphics to the web
+
يمكن أن تكون الرسومات المتجهة مفيدة للغاية في بعض الحالات. على عكس التنسيقات العادية مثل PNG /JPG ، فإنها لا تشوه / أو  تتبكسل عند التكبير - يمكن أن تظل سلسة عند تحجيمها. تعرّفك هذه المقالة على تنسيق {{glossary ("SVG"}} في صفحات الويب.
+
Responsive images
+
مع هذا العدد الكبير من أنواع الأجهزة المختلفة القادرة الآن على تصفح الويب - من الهواتف المحمولة إلى أجهزة الكمبيوتر المكتبية - فإن المفهوم الأساسي للإتقان في عالم الويب الحديث هو التصميم المتجاوب. يشير هذا إلى إنشاء صفحات ويب يمكنها تغيير ميزاتها تلقائيًا لتناسب أحجام الشاشة المختلفة والدقة وما إلى ذلك. سيتم النظر في هذا بمزيد من التفصيل في وحدة CSS في وقت لاحق ، ولكن في الوقت الحالي ، سننظر في الأدوات التي يتوفر HTML لإنشاء صور سريعة الاستجابة ، بما في ذلك عنصر {{htmlelement ("picture"}}} .
+
+ +

Assessments

+ +

The following assessments will test your understanding of the HTML basics covered in the guides above:

+ +
+
Mozilla splash page
+
In this assessment, we'll test your knowledge of some of the techniques discussed in this module's articles, getting you to add some images and video to a funky splash page all about Mozilla!
+
+ +

See also

+ +
+
Add a hitmap on top of an image
+
Image maps provide a mechanism to make different parts of an image link to different places. (Think of a map linking through to further information about each different country you click on.) This technique can sometimes be useful.
+
Web literacy basics 2
+
+

An excellent Mozilla foundation course that explores and tests some of the skills talked about in this Multimedia and embedding module. Dive deeper into the basics of composing webpages, designing for accessibility, sharing resources, using online media, and working open (meaning that your content is freely available and shareable by others).

+
+
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" new file mode 100644 index 0000000000..380e837a80 --- /dev/null +++ "b/files/ar/learn/html/\330\247\331\204\330\254\330\257\330\247\331\210\331\204/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\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" new file mode 100644 index 0000000000..72d8216f43 --- /dev/null +++ "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" @@ -0,0 +1,304 @@ +--- +title: إنشاء صفحة HTML بسيطة +slug: Learn/HTML/بسيطة_HTML_إنشاء_صفحة +tags: + - البداية +translation_of: Learn/Getting_started_with_the_web +--- +
+

فى هذا المقال سوف تتعلم كيق تنشئ صفحة ويب بسيطة باستخدام {{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