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

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

سيوفر لك مفاهيم أساسية حول هذه اللغة وخصائصها. HTML ليست لغة برمجة ولكنها لغة ترميز وصفية تصف بنية محتويات المواقع. يتكون HTML من مجموعة من العناصر (العناصر) التي لن تحتوي

 

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

لغة توصيف النص الفائق

مقتطف من ويكيبيديا

لغة ترميز النص الفائق (بالإنجليزية: HyperText Markup Language)‏ (إختصار إتش تي إم إل HTML)، هي لغة ترميز تستخدم في إنشاء وتصميم صفحات ومواقع الويب، وتعتبر هذه اللّغة من أقدم اللّغات وأوسعها استخداما في تصميم صفحات الويب. HTML هيكل صفحة الويب وتعطي

لغة توصيف النص الفائق

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

لغة توصيف النص الفائق

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

لغة توصيف النص الفائق

يمكن للغة HTML أن تُضمِّن برامجَ مكتوبةٍ بلغات مثل جافا سكريبت لتعديل سلوك ومحتوى صفحات الويب؛ وإضافة شيفرات أوراق الأنماط المتتالية CSS تؤدي إلى تعريف شكل وتخطيط المحتوى.

تتألف صفحات HTML من عناصر، والتي تتألف عادةً من وسم بداية ووسم نهاية، ويكون بينهما محتوى نصي عادةً؛ ويمكن أن نضع في وسم البداية بعض الخاصيات التي تُغيّر من سلوك العنصر أو تؤدي إلى ضبطه. لاحظ أنَّ بعض العناصر يمكن أن تتشعب داخل بعضها بعضًا. الأقسام الأساسية للعناصر هي:

لغة توصيف النص الفائق html

  • وسم البداية: وهو يحتوي على اسم العنصر، موضوعًا ضمن قوسين على شكل زاوية، وقد يلي الاسم الخاصيات التي تؤثر عليه. مثلًا <p>.
  • وسم النهاية: وهو يحتوي على اسم العنصر أيضًا مسبوقًا بخطٍ مائل قبله للإشارة إلى نهاية العنصر؛ لاحظ أنَّ نسيان وسم النهاية قد يسبب أخطاءً في بعض الأحيان، لذا خذ حذرك وتذكره. مثلًا: <p/>.
  • المحتوى: وهو موجودٌ بين وسمَي البداية والنهاية، ويُمثِّل في معظم الأحيان محتوى العنصر.
  • العنصر: هو وسم البداية ووسم النهاية إضافةً إلى المحتوى.
_____ وسم النهاية _____   وسم البداية
| |                 |  |
<p>paragraph content</p>
  |__محتوى العنصر___|

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

_____ وسم النهاية _____                 وسم البداية
| |                               |  |
<p class="light">paragraph content</p>
   |__محتوى العنصر__|__الخاصيات___|

يبدأ المثال الآتي بالتصريح عن نوع المستند (DOCTYPE) الخاص بإصدار HTML5، ثم يُعرِّف العنصر الجذر <html> الذي يُشير إلى بدء مستند HTML. يحتوي العنصر <html> على عنصرين هما العنصر <head> و <body>؛ أما العنصر <head> فيحتوي على البيانات الوصفية التي تصف المستند مثل العنصر <title> الذي ضبط عنوان الصفحة والعنصر <meta> الذي ضبط هنا ترميز محارف

لغة توصيف النص الفائق

المستند والعنصر <link> الذي أشار إلى مستند CSS والعنصر <script> الذي أشار إلى شيفرة JavaScript. وأما العنصر <body> فيمثِّل محتوى الصفحة نفسها، كالصور (العنصر <img>) والفقرات (العنصر <p>) وغير ذلك. لاحظ كيف ينتهي كل قسم من أقسام المستند بوسوم الإغلاق المناسبة.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Page Title</title>
    <link href="style.css" rel="stylesheet">
    <script src="javascript.js"></script>
  </head>
  <body>
    <img src="images/logo.png" alt="My Logo">
    <p>Hello World!</p>
  </body>
</html>

نُظِّم هذا الدليل بتخصيص صفحة لكل عنصر من عناصر HTML، أي يمكن زيارة الصفحة HTML/tagname للحصول على معلومات حول العنصر <tagname>. فللحصول على معلومات عن العنصر <img> نزور الصفحة HTML/img، ولمعرفة تفاصيل العنصر <table> نزور الصفحة HTML/table. أما حقول النماذج فهي موجودة ضمن صفحات فرعية في صفحة HTML/input(مثلًا: الصفحة HTML/input/email للحقل <input type="email">).

تحتوي هذه الصفحة على قائمة بعناصر HTML، منظمةً حسب وظيفتها ليسهل عليك الوصول إلى مبتغاك.

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

لغة توصيف النص الفائق

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

لغة توصيف النص الفائق

واللغات الهيكلية المستخدمة فيها. بدلاً من ذلك ، ربما يكون كل ما تريده هو القليل من التفكير المنطقي وترتيب الأفكار … تتكون مفردات Html من أكواد تسمى TAGS ، والتي تعني العلامات 

لغة توصيف النص الفائق

والتي تُستخدم في أزواج وتُكتب من اليسار إلى اليمين. قد تكون مصطلحات النص التشعبي (HTML) لغة موجهة للكمبيوتر يتم استخدامها. في صناعة مواقع الإنترنت. تسأل الحروف الموجودة في اسم

لغة توصيف النص الفائق

اللغة عبارة إنجليزية: مصطلحات Hyper Text ومعناها (Hypertext Markup Language). يتكون HTML من علامات كلغة كاملة. كل من هذه العلامات تحمل معنى خاصًا للمتصفح.

لغة توصيف النص الفائق

وكما أن للإنسان رأس وجسد أيضاً لصفحة الويب رأس وجسد وأيضاً هي من الوسوم التي تفتح وتغلق :

<head>  فتح 
<head/> إغلاق
<body>  فتح 
<body/> إغلاق

الترويسات لغة توصيف النص الفائق

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

<h1/>ترويسة 1<h1>
<h2/>ترويسة 2<h2>
<h3/>ترويسة 3<h3>
<h4/>ترويسة 4<h4>
<h5/>ترويسة 5<h5>
<h6/>ترويسة 6<h6>

إليك أيضا مقتطف من جوجل ويب ماستر يوضح لك كيفية إنشاء ترمز لغة توصيف النص الفائق

 

html

إنشاء بيانات منظَّمة باستخدام JavaScript

تستخدم المواقع الإلكترونية الحديثة JavaScript لعرض الكثير من المحتوى الديناميكي. عليك مراعاة بعض النقاط عند استخدام JavaScript لإنشاء بيانات منظَّمة على مواقعك الإلكترونية، ويتناول هذا

لغة توصيف النص الفائق

الدليل أفضل الممارسات واستراتيجيات التنفيذ. وإذا كنت لا تزال مبتدئًا في مجال البيانات المنظَّمة يمكنك الاطّلاع على المزيد من المعلومات حول آلية عمل البيانات المنظَّمة.

لغة توصيف النص الفائق

ثمة طرق مختلفة لإنشاء بيانات منظَّمة باستخدام JavaScript، ولكن أكثرها شيوعًا هي:

أداة “إدارة العلامات من Google” هي منصّة تتيح لك إدارة العلامات على موقعك الإلكتروني بدون تعديل الرمز. لإنشاء بيانات منظَّمة باستخدام أداة “إدارة العلامات من Google”، اتّبِع الخطوات التالية:

لغة توصيف النص الفائق
  1. إعداد وتثبيت أداة “إدارة العلامات من Google” على موقعك الإلكتروني
  2. إضافة علامة HTML مخصّصة جديدة إلى الحاوية
  3. لصق كتلة البيانات المنظَّمة المطلوبة في محتوى العلامة
  4. تثبيت الحاوية كما هو موضّح في القسم تثبيت أداة “إدارة العلامات من Google” ضمن قائمة مدير الحاوية.
  5. نشر الحاوية في واجهة أداة “إدارة العلامات من Google” لإضافة العلامة إلى موقعك الإلكتروني
  6. التحقق من نجاح العملية

إنّ أداة “إدارة العلامات من Google” (أي GTM) تتيح استعمال المتغيّرات من أجل استخدام المعلومات المتوفّرة على الصفحة كجزء من بياناتك المنظَّمة. عليك استخدام المتغيّرات لاستخراج البيانات المنظَّمة من الصفحة بدلاً من إنشاء نسخة طبق الأصل من المعلومات في GTM. يؤدي إنشاء نسخة طبق الأصل من المعلومات في GTM إلى زيادة احتمال عدم تطابق محتوى الصفحة مع البيانات المنظَّمة التي يتم إدراجها من خلال GTM.

html

على سبيل المثال، يمكنك بشكل ديناميكي إنشاء كتلة JSON-LD لوصفة طعام تستخدم عنوان الصفحة كاسم للوصفة، وذلك من خلال إنشاء المتغيّر المخصَّص التالي والمُسمّى recipe_name:

function() { return document.title; }

يمكنك بعد ذلك استخدام {{recipe_name}} في علامة HTML المخصّصة.

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

إليك مثال لمحتوى علامة HTML المخصّصة:

html
<script type="application/ld+json">
  {
    "@context": "https://schema.org/",
    "@type": "Recipe",
    "name": "{{recipe_name}}",
    "image": [ "{{recipe_image}}" ],
    "author": {
      "@type": "Person",
      "name": "{{recipe_author}}"
    }
  }
</script>

يمكنك أيضًا إنشاء البيانات المنظَّمة باستخدام JavaScript إما لإنشاء جميع بياناتك المنظَّمة أو لإضافة مزيد من المعلومات إلى البيانات المنظَّمة المعروضة على جهة الخادم. وفي كلتا الحالتَين، بإمكان “بحث Google” فهم ومعالجة البيانات المنظَّمة المتوفّرة في نموذج كائن المستند (DOM) عند عرض الصفحة. للاطّلاع على مزيد من المعلومات حول كيفية معالجة JavaScript في “بحث Google”، يمكنك مراجعة دليل القواعد الأساسية في JavaScript.

html

في ما يلي مثال على بيانات منظَّمة تم إنشاؤها باستخدام JavaScript:

  1. ابحث عن نوع البيانات المنظَّمة الذي يهمّك.
  2. عدِّل HTML الخاص بموقعك الإلكتروني لتضمين مقتطف JavaScript كما هو وارد في المثال أدناه (راجِع المستندات التي يقدّمها موفّر “نظام إدارة المحتوى” (CMS) أو المستضيف، أو اطلب المعلومات من مطوّري البرامج).
  3. html
    fetch('https://api.example.com/recipes/123')
.then(response => response.text())
.then(structuredDataText => {
  const script = document.createElement('script');
  script.setAttribute('type', 'application/ld+json');
  script.textContent = structuredDataText;
  document.head.appendChild(script);
});
  4. تحقق من نجاح العملية باستخدام اختبار النتائج المنسّقة.

إذا كنت تستخدم العرض على جهة الخادم، يمكنك أيضًا تضمين البيانات المنظَّمة المطلوبة في الإخراج المعروض. راجِع مستندات إطار العمل الخاص بك لمعرفة كيفية إنشاء JSON-LDلنوع البيانات المنظَّمة الذي يهمّك.

html

للتأكد من أنّ “بحث Google” يمكنه الزحف إلى بياناتك المنظَّمة وفهرستها، تحقق من نجاح العملية:

  1. افتح اختبار النتائج المنسّقة.
  2. أدخِل عنوان URL الذي تريد اختباره.
  1. انقر على اختبار عنوان URL.تم التنفيذ بنجاح: في حال تنفيذ جميع الإجراءات بشكل صحيح وكان نوع البيانات المنظَّمة متوافقًا مع الأداة، سترى الرسالة “الصفحة مؤهّلة للنتائج المنسّقة”.
    إذا كنت تختبر نوع بيانات منظَّمة غير متوافق مع اختبار النتائج المنسّقة، تحقق من محتوى HTML المعروض. إذا تضمّن محتوى HTML المعروض البيانات المنظَّمة، سيتمكن “بحث Google” من معالجتها.

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

إليك شرح مقدم من قناة “Hassouna Academy“

بعنوان “اسهل طريقة في تعلم لغة HTML من البداية للنهاية بسهولة و احتراف بكل تفصيل في فيديو واحد فقط الان”

 

PcEgy

تابعنا على جوجل

خبير منتجات جوجل
لتقديم اى تعليق يرجي التواصل عبر البريد التالي
[email protected]