يعتبر تعلم لغة HTML من الصفر حتى الاحتراف من القرارات الرائعة واول خطوة في دخولك وبدءك في المجال الشيق تطوير الويب والمواقع. إذا كانت تريد تعلم html مجانا من مصادر مجانية تماما كما تعلمتها انا، فأنت في المكان الصحيح!
لانني ساطلعك على مفهوم html بالعربي وكيفية تعلمها خطوة بخطوة بطريقة بسيطة وممتعة.
سوف اخبرك طريقة تعلم ال html من الصفر وافضل المصادر للتعلم منها وكيفية كتابة وتنسيق كود html. سوف نتعرف على العناصر والسمات والتعليقات والمحتوى والروابط والصور والجداول والقوائم والنماذج في html ولكن سنختصر كلامنا عنها لاننا سنقدم لكم سلسلة كاملة لتعلم اللغة بكل حذافيرها. لذا اتمنى منك متابعتنا.
بعد قراءة هذا المقال، ستكون قادرًا على إنشاء صفحة الويب الاولة لك باستخدام html وستعلم البرمجة html. هل أنت مستعد لبدء رحلتك في تعلم HTML ؟ هيا بنا!
ما هي HTML
HTML هي اختصار لـ HyperText Markup Language أو لغة الترميز التشعبي. هي لغة بسيطة وسهلة وبمقارنتك لها بباقي لغات البرمجة، فستجد ان لغة html لا تعتبر لغة برمجة حرفياً، بل هي لغة توصيفية تستخدم علامات أو أوسمة لتحديد ما يجب عرضه على المتصفح. وهي واحدة من اللغات الاساسية لتصميم وبرمجة المواقع وتعمل مع تلك اللغات لإنشاء مواقع ويب جذابة ووظيفية.
اكواد html عبارة عن اوامر يتلقاها المتصفح والتي تخبره بمكان النصوص والصور وعلى اي اساس يتعامل مع العناصر، ايضا اللغة مسؤلة عن إضافة النصوص والعناوين والروابط والصور وغيرها من العناصر التي تجعل الموقع مليئًا بالمعلومات والإبداع.
لست بحاجة إلى أي خبرة سابقة في البرمجة لكي تتعلم لغة html للمبتدئين. كل ما تحتاجه هو محرر نصوص عادي مثل Notepad أو Sublime Text أو Visual Studio Code يمكنك الاطلاع على مقالة افضل 7 خيارات رائعة لمحررات النصوص لكي تعرف اكثر عن محررات النصوص وايضا تحتاج الى متصفح ويب مثل Chrome أو Firefox أو Edge.
ظهرت html لاول مرة في عام 1990 وهذا عندما ابتكر تيم بيرنرز لي Tim Berners-Lee أول صفحة ويب في التاريخ وهو عالم فيزياء بريطاني، وقام ايضاً باختراع شبكة الويب العالمية World Wide Web. ذكرنا هذا في جزء مفصل من مقال ما هو http.
فوائد تعلم لغة html
تعلم HTML هو أمر ضروري لأي شخص يريد أن يعمل كمطور ويب او في انشاء المواقع بصورة عامة، فهي تعد احد اهم اساسيات في مجال تطوير المواقع وهي من اول خطوات تعلم البرمجة، وكل موقع تعرفه حتى الان يستخدم لغة html في تصميم صفحاته بالكامل، اي ان اللغة منذ ان ابتكرت كان الهدف الرئيسي من اللغة هو عملية تصميم وتطوير المواقع الالكترونية.
إليك بعض الأسباب التي تجعل تعلم HTML مهمًا:
- ستتمكن من تطوير مواقع الكترونية عن طريق البرمجة
- ستتمكن من تطوير مهاراتك ومعرفتك في البرمجة. هي بوابة الدخول إلى عالم البرمجة. ومن اول خطوات تعلم البرمجة.
- ستكون قادرًا على تعلم لغات أخرى مثل CSS وJavaScript وPHP وغيرها التي تزيد من قدراتك وإمكانياتك في إنشاء مواقع ويب متطورة ومتكاملة.
- تسمح لنا بإنشاء صفحات ويب تحتوي على نصوص وصور وفيديوهات وأشكال وجداول وقوائم وغيرها من المكونات.
- لغة html لغة سهلة التعلم ومؤكد انك ستتعلمها بسرعة دون اي تعقيد وتوجد العديد من المصادر المجانية التي تشرح هذه اللغة.
كتابة اول صفحة ويب html
هذه ستكون لحظاتك الاولى في تعليم html بالعربي والتي ستبدأ بكتابة وتصميم اولى صفحاتك بلغة HTML، بالاضافة الى انه لا يوجد موقع مبرمج بلغة html لا يستخدم الكود، والان عليك اتباع بعض الخطوات البسيطة لتصنع ملف html:
افتح محرر النصوص الذي تفضله وأنشئ ملف جديد بامتداد .html
- اكتب العلامة الأساسية للصفحة وهي <!DOCTYPE html> في السطر الأول. هذه العلامة تخبر المتصفح أن الصفحة تستخدم HTML5 وهي أحدث إصدار من HTML.
- اكتب العلامة <html> في السطر التالي. هذه العلامة تفتح عنصر html الذي يحتوي على جميع عناصر الصفحة.
- اكتب العلامة <head> في السطر التالي. هذه العلامة تفتح عنصر head الذي يحتوي على معلومات عن الصفحة مثل العنوان والترميز والأنماط والبرامج النصية.
- اكتب العلامة <title> في السطر التالي. هذه العلامة تفتح عنصر title الذي يحتوي على عنوان الصفحة الذي يظهر في شريط العنوان للمتصفح. اكتب عنوان مناسب لصفحتك بين العلامتين <title> و </title>.
- اكتب العلامة </head> في السطر التالي. هذه العلامة تغلق عنصر head وتنهي معلومات الصفحة.
- اكتب العلامة <body> في السطر التالي. هذه العلامة يجب ان تحتوي على محتوى الصفحة الذي يظهر للمستخدم. هنا يمكنك كتابة النصوص والصور والروابط وغيرها من العناصر التي تريد عرضها على الصفحة.
- اكتب العلامة </body> في السطر الأخير. هذه العلامة تغلق عنصر body وتنهي محتوى الصفحة.
- اكتب العلامة </html> في السطر الأخير أيضا. هذه العلامة تغلق عنصر html وتنهي الصفحة بأكملها.
بعد تنفيذك للخطوات السابقة بتحصل على هذا الكود كنتيجة.
<DOCTYPE html!>
<html>
<head>
<title>عنوان الصفحة</title>
</head>
<body>محتوى الصفحة الذي يظهر في المتصفح</body>
</html>
هذا هو الشكل العام لأي صفحة HTML.
الشيء الوحيد الذي يجب الانتباه إليه هو أن نحفظ الملف بامتداد .html أو .htm. على سبيل المثال، يمكننا تسمية الملف بـ index.html أو page1.htm أو mysite.html أو أي اسم آخر نريده.
نحدد مسار الملف الذي نريد فتحه. على سبيل المثال، إذا كان الملف موجود على سطح المكتب، يمكننا كتابة file:///C:/Users/username/Desktop/index.html في شريط العنوان. أو يمكننا النقر بزر الماوس الأيمن على الملف واختيار فتح بواسطة المتصفح المفضل لدينا.
 |
| نتيجة كود html على المتصفح |
سترى صفحة فارغة ما عدا العنوان الذي كتبته في العلامة <title> والجملة في body. لإضافة المزيد من العناصر إلى الصفحة، يمكنك استخدام علامات HTML المختلفة بين العلامتين <body> و </body>. سنتعرف على بعض هذه العلامات في الأقسام التالية.
بعض اساسيات html المهمة
ما هي السمات في HTML؟
السمات في html هي الخصائص الإضافية التي تمنح العناصر معلومات أو خصائص أكثر. كل سمة تتكون من اسم وقيمة. الاسم يحدد نوع السمة والقيمة تحدد محتوى السمة. يمكنك إضافة السمات إلى العلامة الافتتاحية للعنصر بعد اسمه وبين علامتي الاقتباس. كما يمكنك إضافة أكثر من سمة لنفس العنصر بفصلها بمسافة.
هذا هو الشكل العام لأي سمة في HTML:
<img src=“logo.png” alt=“النص البديل” width=“100” height=“100”>
في هذا المثال، العنصر <img> يحتوي على أربع سمات هي src و alt و width و height. كل سمة تحمل معنى مختلف:
- السمة src تحدد مصدر الصورة أو عنوانها على الإنترنت أو على جهازك. القيمة logo.png تعني أن الصورة موجودة في نفس المجلد الذي يحتوي على الملف الحالي.
- السمة alt تحدد النص البديل للصورة في حالة عدم ظهورها أو عدم قدرة المستخدم على رؤيتها.
- السمة width تحدد عرض الصورة بالبكسل. القيمة 100 تعني أن الصورة ستظهر بعرض 100 بكسل على الصفحة.
- السمة height تحدد ارتفاع الصورة بالبكسل. القيمة 100 تعني أن الصورة ستظهر بارتفاع 100 بكسل على الصفحة.
بعض العناصر الشائعة في html
في هذا القسم، سنتعرف على بعض العناصر الشائعة في html والتي تعتبر اساسية لاي احد يريد تعلم html وكيفية استخدامها لإنشاء محتوى متنوع ومنظم على صفحتك. هذه العناصر ليست كل العناصر الموجودة في html، بل هي مجرد مجموعة من العناصر الأساسية والمفيدة التي يمكنك البدء بها.
توضع بعض العناصر في وسم فتح <p> ووسم اغلاق </p> مثل p , h1-h6 , a, b وغيرها والبعض الاخر يوضع في وسم اغلاق مباشرة <img/> هذا لعدم وجود اهمية لوضع المحتوى بداخل هذه الوسوم مثل عناصر br, hr وغيرها.
العنصر p
العنصر <p> يمثل فقرة نصية على الصفحة. يمكنك استخدامه لكتابة أي نص تريده بين العلامتين <p> و </p>. المتصفح سيفصل كل فقرة عن الأخرى بمسافة فارغة. يمكنك استخدام السمة align لضبط محاذاة النص إلى اليسار أو اليمين أو الوسط أو الضبط.
اليك مثال:
<p align=“right”>فقرة نصية محاذاة إلى اليمين</p>
<p align=“center”>فقرة نصية محاذاة إلى الوسط</p>
<p align=“left”>فقرة نصية محاذاة إلى اليسار</p>
<p align=“justify”>فقرة نصية مضبوطة بحيث تملأ كل السطر</p>
العنصر h1 إلى h6
العناصر <h1> إلى <h6> تمثل عناوين وعناوين فرعية على الصفحة. يمكنك استخدامها لتنظيم محتواك إلى أقسام ومواضيع مختلفة. العنصر <h1> يمثل العنوان الرئيسي للصفحة ويجب أن يكون واحدا فقط. العناصر <h2> إلى <h6> تمثل العناوين الفرعية للأقسام الداخلية ويمكنك استخدامها بترتيب تنازلي حسب الأهمية. المتصفح سيعرض العناوين بحجم وسمك مختلف حسب المستوى. يمكنك أيضا استخدام السمة align لضبط محاذاة العناوين.
اليك مثال:
<h1 align=“center”>تعلم HTML دليل شامل للمبتدئين</h1>
<h2 align=“left”>عنصر h2</h2>
نستخدم هذا العنصر لادراج صورة في صفحة الويب باستخدام سمة src التي تحدد رابط الصورة غلى الانترنت او موقعها على الجهاز ويعتبر من الوسوم الاكثر استخداما في html. ونستخدم السمتين width و height لتحديد حجم الصورة.
مثال :
<img src="الرابط" width="300" hieght="400"/>
عنصر الرابط a
هذا ايضا من اهم الوسوم التي ستقابلها في رحلة تعلمك ل html وهو يستخدم في ادراج روابط لصفحات اخرى في موقعك قد تكون صفحة داخلية او موقع خارجي نستخدم سمة href لتحديد عنوان الويب الموجه اليه. اليك مثالا.
<a href="https://codebelaraby.blogspot.com/">كودات بالعربي</a>
عنصر b و i و u
وسم <b> يستخدم لكي تجعل النص غامق ووسم <i> يجعل الخط مائل ووسم <u> يجعل النص مشطوب عليه . اليك مثالا.
<b>عريض</b> <i>مائل</> <u>مشطوب</u>
العنصر br
العنصر <br> يمثل انتقال إلى سطر جديد على الصفحة. يمكنك استخدامه لإدخال فراغ بين النصوص أو العناصر دون الحاجة إلى بدء فقرة جديدة. العنصر <br> لا يحتوي على محتوى أو علامة ختامية. يمكنك وضعه في أي مكان تريده بين العلامتين <body> و </body>.
اليك مثال:
<p>هذه فقرة تحتوي على نص متصل</p> <p>هذه فقرة تحتوي على نص<br>منقسم إلى سطرين</p>
العنصر hr
العنصر <hr> يمثل خط أفقي على الصفحة. يمكنك استخدامه لإدخال فاصل بين الأقسام أو العناوين أو الفقرات. العنصر <hr> لا يحتوي على محتوى أو علامة ختامية. يمكنك وضعه في أي مكان تريده بين العلامتين <body> و </body>. يمكنك أيضا استخدام السمات width و height و color لتخصيص شكل وحجم ولون الخط.
االيك مثال:
<hr width=“50%” height=“5” color=“blue”> <p>هذه فقرة تحت الخط الأزرق</p>
كانت هذه بعض العناصر المهمة في html فقط لكي تتعرف عليها يمكنك التعمق فيها عند بدا تعلمك للغة html.
مصادر تعلم HTML بالعربية والانجليزية
هناك العديد من المصادر المتاحة عبر الإنترنت تقدم دروسا وشروحات وتمارين وأمثلة عن HTML باللغة العربية والانجليزية. ساخبرك كيفية تعلم لغة html عبر هذه المصادر مجانية تماما وستعلمك html سواء فيديو او نصوص. موجه للمبتدئين و للمتقدمين.
في هذا الجزء من المقالة، سنستعرض بعض من أفضل المصادر لتعلم html، سواء كانت عربية أو أجنبية مترجمة.
موقع كود بالعربي
في موقعنا قريبا سنضع لكم سلسة متكاملة لتعلم لغة html للمبتدئين من البداية للاحتراف، وسنوضح لك تعلم اكواد البرمجة الخاصة بلغة html، وسنعمل على تجهيز المقالات التعليمية من اجلكم وسنضع لكم بعض الشروحات للغات الاخرى لتصميم الويب.
نحن الان نعمل على انشاء الدروس من قسم html
أكاديمية حسوب
قناة Elzero web school
هذه افضل قنوات اليوتيوب لتعلم الويب صاحبها المهندس اسامة الزيرو ولقد استفدت كثيرا من هذه القناة في بداية تعلمي لتطوير الويب ويوفر كورس كامل لشرح html.
مواقع بالانجليزية
W3Schools
W3Schools هي منصة إنجليزي تقدم دروسا وشروحات وتمارين وأمثلة عن لغات البرمجة والتصميم المستخدمة في تطوير المواقع والتطبيقات الإلكترونية. من بين هذه اللغات، توجد دورة متكاملة فيها محتوى قيم عن تعلم لغة html من الصفر تشمل الأساسيات والمتقدمة والجديدة للغة. هذه الدورة تتكون من نصوص شرح، بالإضافة إلى تمارين وأمثلة تفاعلية. هذه الدورة تأتي باللغة الإنجليزية، ولكن يمكن ترجمتها بسهولة باستخدام أدوات الترجمة المتاحة عبر الإنترنت.
Codecademy
Codecademy هي منصة تعليمية أجنبية تقدم دروسا وشروحات وتمارين ومشاريع عن لغات البرمجة والتصميم المستخدمة في تطوير الويب. من بين هذه اللغات، توفر Codecademy دورة مبسطة عن html تشرح المفاهيم الأساسية والمهمة للغة. هذه الدورة تأتي باللغة الإنجليزية وبشكل تفاعلي ومحفز. كما توفر Codecademy بيئة تطوير متكاملة تسمح بكتابة وتنفيذ وتعديل الأكواد بسهولة وسرعة. ولديهم قناة على اليوتيوب توفر شروحات ايضا.
رابط Codecademy
هذه بعض من أفضل المصادر لتعلم html بالعربية والانجليزية، ولكن هناك المزيد من المصادر التي يمكنك استكشافها واستخدامها. الأهم من ذلك، هو أن تمارس وتطبق ما تعلمته بانتظام.
كيف تبدأ في تعلم HTML
الآن بعد أن عرفت ما هو html وما هي أهميته، وتعرفت على المصادر التي يمكنك التعلم منها .قد تتساءل كيف تبدأ في تعلمه. لا تقلق، فتعلمها ليس صعبًا أو معقدًا.
إليك بعض النصائح والخطوات التي تساعدك على بدء رحلتك في تعلم لغة الـ html:
اختر محرر نصوص مناسب ومتصفح ويب حديث.
يوجد العديد من المحررات والمتصفحات المختلفة التي توفر لك ميزات وخيارات متنوعة. يمكنك اختيار ما يناسبك منها بحسب ذوقك وراحتك. بعض الأمثلة على المحررات الشهيرة هي Notepad وSublime Text وVisual Studio Code وAtom وغيرها. وانصحك بالاطلاع على مقال قارنا فيه أفضل 7 محررات نصوص مميزة.
انا انصح باستخدام notepad في اول خطوات تعلمك او اذا كنت تريد الافضل فهو Visual Studio Code وهذه بعض الأمثلة على المتصفحات الشهيرة هي Chrome وFirefox وEdge وSafari.
مارس وتدرب وتحدى نفسك.
لا تكتفي ومشاهدة ونسخ الشيفرات البرمجية بل عليك أن تمارس الكود بشكل افضل من اجل تعلم البرمجة بلغة html بشكل أفضل وأسرع. وحاول دائما أن تكتب كود html بنفسك من الصفر.
ماذا تحتاج لتعلم HTML؟
لا تحتاج إلى أي معرفة مسبقة بالبرمجة أو التصميم لتعلم اللغة. كل ما تحتاجه هو محرر نصوص بسيط مثل Notepad أو Visual Studio Code ومتصفح ويب مثل Chrome أو Firefox.
يمكنك كتابة اكواد HTML في أي ملف نصي بامتداد .html وفتحه في متصفحك لترى النتيجة. يمكنك أيضا استخدام بعض المواقع الإلكترونية مثل CodePen أو JSFiddle لتجربتها على الإنترنت ومشاركتها مع الآخرين.
هل يمكنني تعلم HTML بدون خبرة سابقة في البرمجة؟
نعم، يمكنك تعلم HTML بدون خبرة سابقة في البرمجة. لانها لغة توصيفية ولا تحتاج إلى معرفة أي لغة برمجة أخرى لتعلم HTML. فاللغة تعد من اول اللغات التي يجب تعلمها اذا كنت تريد ان تصبح مطور ويب، وبما انها اول لغة عليك بدء اتقانها سيكون الشرح مبسط في اغلب الدروس وسيوفرون شرحاً لكل مفهوم تمر عليه.
يمكنك تعلم HTML بكل سهولة إذا اتبعت الطرق التي ذكرناها في هذا المقال.
هل لغة HTML مجانًية؟
بالطبع لغة HTML مجانية تماما. لا تحتاج إلى دفع أي تكلفة نظير استخدام اللغة. فهي لغة مفتوحة المصدر ومتاحة في جميع المتصفحات.
يمكنك الوصول إلى العديد من المصادر والأدوات على الويب التي تساعدك في تعلم اللغة.
هل يمكن تعلم لغة HTML بسرعة؟
ممكن ان تتعلم HTML بسرعة اذا انتظمت في التعلم يوميا. فهي لا تحتاج إلى كتابة الكثير من الكود أو القواعد في HTML وهذا لبساطة اكوادها، ستتعلمها بسرعة حرفيا اذا كنت ماهر في اللغة الإنجليزية.
يمكنك التعلم بسهولة إذا اتبعت الخطوات التي توجد في المصادر الموثوقة. وأيضًا إذا مارست ما تعلمته بانتظام وبشكل عملي يمكنك تعلم HTML في أيام أو أسابيع حسب مستواك ووقتك.
هل يمكن تعلم HTML بدون اتصال بالإنترنت؟
بالطبع لغة HTML لغة مدمجة بالمتصفح نفسه. لا تحتاج إلى اتصال بالإنترنت لكتابة اكوادها. لذا يمكنك تعلمها بدون اتصال بالإنترنت.
يمكنك استخدام محرر نصوص ومتصفح ويب مثبتين على جهازك للتعامل مع ملفات HTML. يمكنك أيضًا تنزيل الدروس والكتب عن HTML واستخدامها بدون اتصال بالإنترنت.
نأمل أن يكون هذا المقال مفيدا وممتعا لك، وأن يساعدك في بدء رحلتك في تعلم html بالعربية. لا تنسى أن تمارس وتطبق ما تعلمته بانتظام وبإبداع. ويمكنك متابعتنا وانتظار السلسلة الخاصة بتعلم لغة html. ولا تنسى ان تضع تعليق لاي استفسارات. شكرا لك على قراءة هذا المقال، ونتمنى لك التوفيق والنجاح.
