...
لقد قرأت صفحاتها عبر الإنترنت في كل مكان!

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

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


ماهي لغة او تقنية HTML

ترمز HTML إلى HyperText Markup Language ، والتي يمكن أن تكون مصطلحًا محيرًا للعديد من المبتدئين. أفضل طريقة لشرح HTML هي بفحص معنى كل كلمة. يشير HyperText الى النص التشعبي وهو نص يحتوي على روابط لنصوص أخرى. في كل مرة تنقر فوق رابط مظلل أو تحته خط ينقلك إلى صفحة أخرى ، فأنت تستخدم نصًا تشعبيًا. ونظرًا لأن المزيد والمزيد من الصفحات تستخدم النص التشعبي للارتباط ببعضها البعض ،هنا تبدأ "شبكة" من الصفحات العنكبوتية في التكون. هذا هو المكان الذي نحصل فيه على مصطلح شبكة الويب العالمية والتي تبدأ بـ WWW

إختصار الى World Wide Web

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


لئام طخ   
<em>
    
 Zaid Alhulaiba 
HTML5, CSS 3, JavaScript - ﻦﻴﺋﺪﺘﺒﻤﻠﻟ ﺖﺒﻳﺮﻜﺳ ﺎﻓﺎﺟ ﺔﻐﻟ ةرود

</em>
 

 اسحب -->

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



لماذا يجب أن تتعلم HTML؟

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

ولكن ماذا لو لم تكن مهتمًا بامتلاك موقع ويب يشبه تمامًا جميع الموقع الاخرى؟ ماذا يحدث عندما تريد إجراء تغييرات على موقعك تتجاوز ما هو متاح باستخدام أداة إنشاء السحب والإفلات؟ من خلال المعرفة الأساسية بـ HTML (بالإضافة إلى القليل من CSS)

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

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


هل هناك إصدارات مختلفة من HTML؟

تم تطوير الإصدار الأول من HTML بواسطة الفيزيائي Tim Berners-Lee في عام 1990 ، وتم إصدار أول نسخة متاحة للجمهور في عام 1991. ومنذ ذلك الحين، تم تحديث HTML عدة مرات لمعالجة التطورات في التكنولوجيا. الإصدار القياسي الحالي هو HTML5 ، والذي تم استخدامه منذ عام 2014. توصيات التغيير هي HTML يتم تقديمها من قبل World Wide Web Consortium (W3C) ، وهي منظمة معيارية تم إنشاؤها بغرض تطوير إرشادات وبروتوكولات لضمان نمو وتطوير الويب على المدى الطويل.


كيف ترتبط HTML بلغات البرمجة الأخرى؟

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

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

يتم استخدام CSS (Cascading Style Sheets) (أوراق الأنماط المتتالية) لتحديد تصميم الصفحة ، بما في ذلك أشياء مثل حجم كل عنصر وكيف يبدو. باستخدام CSS ، يمكنك تعيين أشياء مثل نمط الخط الذي تستخدمه ولون خلفية الصفحة وعرض الحد حول العناصر الموجودة على الصفحة.

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

موقع امازون مع CSS و JavaScript وفي الصورة المجاروة بدون
... ولكن لاحظ مازالة HTML تظهر النصوص


بعض عناصر HTML؟


   <!DOCTYPE html>  

      <head>  

        <title>العنوان اعلى الصفحة </title> 
                
 </head> 

           <body>  <----  بنية الصفحة 

 <h1>  عنوان بأحجام مختلفة من ١ الى ٦ </h1> 
        
         <p>  قطعة خاصة بالنصوص  </p> 
             
         </body>        
         
         </html>        
                    
                
  بسحإ-->

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

...

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


ما هي البرامج التي يمكنني استخدامها لكتابة وتحرير كود HTML؟

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

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

Atom هو محرر نصوص قوي آخر يتميز بتصميم سهل الوصول إليه ، مما يجعله سهل الاستخدام للمبتدئين. تم تطويره بواسطة مستخدمي GitHub ، وهذا هو السبب الرئيسي في أنه قابل للتخصيص بدرجة كبيرة. يسمح لك مدير الحزم المدمجة بتنزيل الملحقات وتثبيتها بسهولة ، ويمكن استخدام التطبيق على أنظمة Linux و Windows و MacOS. Atom مجاني للتنزيل والاستخدام.

Visual Studio Code وهو يعتبر الاشهر على مستوى العالم وهو مجاني مفتوح المصدر من الشركة العملاقة مايكروسوفت ، وهو مجاني للتنزيل والاستخدام. يوجد أيضًا عدد من برامج تحرير التعليمات البرمجية عبر الإنترنت التي تتيح لك كتابة واختبار التعليمات البرمجية باستخدام متصفحك فقط. يسمح لك بعض هؤلاء المحررين بحفظ التعليمات البرمجية الخاصة بك ونشرها حتى تتمكن من مشاركتها مع أشخاص آخرين. ثلاثة محررين مشهورين عبر الإنترنت هم Replit و Codepen و JSFidde.



أساسيات اكواد وعناصر - HTML

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

العلامات - HTML Tags

لقد ذكرت سابقا أن الميزة الأكثر بروزًا في كود HTML كانت استخدام الأقواس السهمية او تسمى أقواس الزاوية هذه <والرمز الموجود بداخلها> علامات. تُستخدم العلامات لفصل كود HTML عن النص العادي. لن يتم عرض أي نص مكتوب داخل أقواس الزاوية في المتصفح. يتم استخدام النص الموجود داخل أقواس الزاوية فقط لإخبار المتصفح بكيفية عرض أو تحويل النص العادي الموجود بين علامة الفتح وتسمى أيضًا علامة البداية <head/> <head> وعلامة الإغلاق . عادةً ما تأتي العلامات في أزواج ، والفرق بين علامة الفتح وعلامة الإغلاق هو أن الرمز الأول داخل أقواس علامة الإغلاق هو رمز "/" مائل. على سبيل المثال إليك زوج من علامات ، مع بعض المحتوى بينهما:

<h1/> تُستخدم لتحديد نص العنوان<h1>



عناصر - HTML

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

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

                      

<!DOCTYPE html>  
                    
<head>  
                         
<title>العنوان اعلى الصفحة </title> 
                           
</head> 
                    
<body>  <----  بنية الصفحة 
                                                
<h1>  عنوان بأحجام مختلفة من ١ الى ٦ </h1> 
                                      
<p>  قطعة خاصة بالنصوص  </p> 
   
</body>        
                                    
</html>        
    

 إسحب -->

ربما يمكنك التعرف على عنصري h1 و p إذا نظرت بعناية ، فقد تلاحظ أن هذين العنصرين متداخلان بالفعل في عنصر آخر ، عنصر الجسم او البنية وهو العنصر الأساسي خاص يحتوي على كل المحتوى الرئيسي للمستند الذي نريد عرضه في المتصفح. يوجد فوق عنصر الجسم عنصر آخر ، عنصر الرأس.<head> هذا هو المكان الذي نضيف فيه معلومات خاصة حول المستند الذي لا نريد عرضه في المتصفح ، مثل عنوان المستند واصدار المستند او نوعه <!DOCTYPE html>
عنصر الجسم والعنصر الرئيسي عنصران منفصلان ، لكن ربما لاحظت أن هذين العنصرين متداخلان بالفعل داخل عنصر آخر ، عنصر </html> يعد عنصر <!DOCTYPE html> هو العنصر الأساسي على الإطلاق ، ويحتوي على جميع العناصر الأخرى المضمنة في المستند. لذلك إذا عدنا إلى الوراء ونظرنا إلى عنصر h1 ، يمكننا أن نرى أنه في الواقع عنصر (h1) داخل عنصر (جسم) داخل عنصر (html). عندما تبدأ في كتابة كود معقد للغاية ، قد تجد نفسك تعمل مع عناصر متداخلة على عمق عشرة أو عشرين أو حتى مائة التداخلات العميقة




سمات - HTML Attributes

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

<a/>الموقع<"a href="https://blog.zaidalhulaiba.com>
تُستخدم علامة الارتساء لإنشاء ارتباط تشعبي ، وتتمثل سمة href في تحديد عنوان الارتباط. بدون سمة href ، لا يزال بإمكانك النقر فوق الارتباط ولكن لن يحدث شيء.

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


  1. على الرغم من أنه يمكنك كتابة السمات بأحرف كبيرة ، إلا أنه من الجيد كتابة السمات بأحرف صغيرة فقط.
  2. على الرغم من أنه ليس ضروريًا تمامًا ، إلا أنه من الجيد وضع علامات اقتباس حول القيمة لتسهيل التعرف عليها.
  3. على الرغم من أنه يمكنك استخدام علامات اقتباس مفردة ("القيمة") ، فمن الأفضل وضع القيم بين علامات اقتباس مزدوجة ("value").

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


  <tag/>نص<"tag attribute="value>

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


ليصلك الجديد

Share This Post