Original subtitles

الآن دعونا نبدأ بالتعرف أكثر قليلاً على HTML، ما هي بالضبط؟ وكيف نستخدمها

لإنشاء المواقع الإلكترونية؟

الآن، بغض النظر عن المتصفح الذي تفضل استخدامه، سواء كان Chrome أو Safari أو Brave، فإن كل هذه التطبيقات

تفعل الشيء نفسه.

فهي تأخذ ملفات مختلفة مثل HTML و CSS و JavaScript، وتقوم بمعالجتها وتحويلها إلى موقع إلكتروني.

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

إلا أنه لا يمكنك إنشاء موقع إلكتروني باستخدام ملف CSS فقط أو ملف JavaScript فقط.

ومع ذلك، يمكنك الحصول على موقع باستخدام ملف HTML فقط.

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

الآن، تحدد الـ HTML محتوى وبنية الموقع الإلكتروني.

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

وعندما يفتح المتصفح هذا الملف، سيعرض هذا العنوان الذي يقول "موقعي الإلكتروني".

الآن، ما هي HTML بالضبط؟

دعونا نقوم بتفكيكها.

ترمز HTML إلى "Hypertext Markup Language" (لغة توصيف النص التشعبي).

إذا نظرنا إلى الجزء الأول، "النص التشعبي" (Hypertext)، فماذا يعني ذلك؟

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

هذه النصوص هي نصوص تشعبية أو روابط تشعبية، وهي الأساس الذي يقوم عليه عمل موقع الـ HTML.

يعمل.

الآن، إذا ألقينا نظرة على أول موقع إلكتروني في العالم والذي أنشأه السير تيم بيرنرز لي، وهو أيضاً

مخترع الإنترنت، ستلاحظ أنه مليء بهذه الروابط التشعبية المميزة باللون الأزرق.

وتماماً كما تتوقع،

إذا قمت بالنقر فوق أي من هذه الروابط التشعبية، فسينقلك ذلك إلى مستند آخر، ملف HTML آخر.

لذا إذا عدنا إلى الوراء، يمكنك أن ترى أننا كنا في Project.html.

وإذا نقرت على أحد الروابط التشعبية مثل "كيف يمكنني المساعدة؟" (How can I help?) فسينقلي إلى ملف HTML آخر،

وهذه هي طريقة عمل النص التشعبي.

وهناك رابط على هذا الموقع يشرح بالضبط ما هو النص التشعبي.

الآن بعد أن عرفنا ما هو النص التشعبي، ماذا عن الجزء الآخر، لغة التوصيف (Markup Language)؟

ما هي لغة التوصيف؟

الآن، إذا نظرت إلى اللغة الإنجليزية (أو أي لغة)، فغالباً ما نرى أجزاءً صغيرة تعمل بشكل مشابه جداً للتوصيف،

مثل علامات الاقتباس المزدوجة هذه.

إن وجود علامات الاقتباس هذه هو ما يخبر القارئ بأن هذا الجزء عبارة عن اقتباس.

وكما ستلاحظ، فإن هذا سيكون مشابهاً جداً لما تراه في مراجعة المحرر للمخطوطات والكتب.

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

عن طريق إضافة خط متموج تحتها، وأي الأجزاء يجب وضع خط تحتها بإضافة خط مستقيم

عبرها.

إذن كيف تقوم بالتوصيف باستخدام HTML؟

حسنًا، يتم ذلك من خلال ما يسمى وسوم الـ HTML (HTML tags).

الآن، في الأيام الأولى للإنترنت، لم يكن هناك سوى عدد قليل جداً من وسوم HTML.

في هذه الأيام هناك الكثير والكثير، ولكن واقعياً، ستستخدم فقط بعضاً من الوسوم الأكثر

أهمية مثل العناوين الرئيسية، من H1 إلى H6، أو وسم الفقرة، وهو الوسم P.

هنا يمكنك رؤية جميع وسوم الـ HTML، ولكن عندما نحصرها في تلك التي تحتاج إلى معرفتها بالفعل،

فإن ذلك يجعل الأمر أسهل بكثير وفهمها متاحاً بشكل أكبر.

وفي بقية هذه الدورة التعليمية، سنقوم بتغطية بعض من أهم هذه الوسوم الأساسية،

لذا لا تقلق بشأن تعلمها [كلها مرة واحدة].

لذا لا تقلق بشأن حفظها جميعاً أو تعلمها [دفعة واحدة].

سوف نقوم بتغطيتها كلما احتجنا إليها في مشاريعنا وتماريننا.

لذا في الدرس القادم، سوف نبدأ بالتعرف على وسم العنوان الرئيسي (heading tag)، وهو واحد من أعرق

وسوم الـ HTML الأصلية (OG) التي وجدت على الإطلاق.

لكل هذا وأكثر، أراكم في الدرس القادم.