تحدثنا فى تدوينه سابقه عن البرمجه بصفه عامه وعن برمجه الوب بصفه خاصه و البدايه بتعلم لغات برمجه الوب وهى تشمل لغات عده من اهمها بل لا بد من الالمام بها على الاقل مستوى متوسط وهى :

HTML CSS JavaScript jQuery

وقد قدمنا نصحيه لاخواننا الراغبين فى تعلم البرمجه وتطوير انفسهم فى هذا المجال وهى اهميه الاعتماد على المواقع باللغه الانجليزيه......

..... اليك مثال هو اختصار لما وجدته فى بعض المواقع العربيه .....

يبدا بتعريف عام باللغه ثم يتم ذكر الادوات التى نحتاجها و هى موجوده فى جميع اجهزه الكمبيوتر و هى ...... ـــ محرر اكواد مثل نوتباد notepad الموجود فى جميع الاجهزه وندوز . ـــ برنامج تصفح . ......... ويتم كتابه اول برنامج " اهلا ايها العالم " وهذا هو الكود الخاص به او يكون قريب من هذا

.. افتح هذا الملف بأى متصفح .... لترى النتيجه ..........

واليك شرح مختصر لبعض الاوامر التى وردت فى المثال البرمجى ....

"< DOCTYPE>" هذا الوسم يحدد نوع المستند

ثم وسم "html" بداية ملف الاتش تى ام ال لابد انتبدا به اى صفحة"html"وهو وسم له نهايه اى فتح و غلق html > .... < html/ >

" head "هو وسم خاص برأس الصفحة ويحتوى على عنوان الموقع الذى يظهر فى تبويب الموقع هذا الوسم خاص بعنوان الموقع والذى يظهر فى التبويب بالمتصفح ويوضع هذا الوسم داخل الوسم" title ... /title" وهذا الوسم له بدايه و نهايه وهو مستودع للروابط الخارجيه و كذلك لرموز css وكذلك اى اعلانات و تعريفات و ينتهى مثل اى وسم اخر بالشرطه المائله head > .... head/

وسم body هذا الوسم يحتوى على جميع محتويات الموقع لديك كما ذكرنا ان الموقع يتكون من راس وجسم لذ فهذاالوسم هو جسم الموقع وبه كل محتوياته كذلك وسم body له بدايه و نهايه........ نهايه الوسم"/body" ونهايه الصفحه هو وسم "/html"

ولكن هذا مثال مستهلك لا يفيد المتعلم فى شئ

ولكنى فى هذه التدوينه قمت بشئ ارى انه اكثر افاده ....

...الدرس الاول

HTML & CSS Tutorial - Part 1: Your First Website

رابط الدرسPart 1: Your First Website

دعونا نبدا لانشاء اول صفحه على النت

الادوات المطلوبه ..

اولا : محرر نصوص Editor

لإنشاء صفحات الويب، فإن محرر النص العادي مثل نوتباد  notepad  لنظام ويندوز يكون كافيا جدا و انا شخصيا افضله على اى محرر نصوص اخر . . نعم توجد مشاكل خاصه للكتابه باللغه العربيه ولكن هذه فى اغلب البرامج ومع كثره الاستخدام تتعود على هذه المشاكل وتتغلب عليها.

ولكن هناك برامج متطوره يمكن أن تبسط عملك بشكل كبير منها

 brackets    notepad ++    Visual Studio Code

وينصح كاتب الدرس باستخدام محرر نصوص حديث و يقترح كاتب الدروس محرر نصوص    Visual Studio Code    و سا شير اليه خلال الشرح ب    VS Code    وهو محرر مجانى ىمكن تنزيله من   هنا  

بعد ان تقوم بتزيل هذا المحرر تحتاج لتثبيت اضافه   Live Server   تعطيه قوه سوبر باور ويمكن تنزيلها من   هنا  

يمكنك أن تستخدم أي محرّر نصوص تريده، ولكنّني في هذه الدرس سأُشير أحيانًا إلى بعض وظائف تطبيق VS Code

   ثانيا :المتصفح   browser

يتوجّب على موقعنا أن يعمل على جميع المتصفحات الرئيسية مثل Internet  Explorer,    Firefox,   Chrome   and   Safari

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

إذا لم يكن لديك  Chrome  على جهاز الكمبيوتر الخاص بك ، فيمكنك تنزيله من  هنا 

بدايه العمل ...... انشاء مستند اتش تى ام ال
Creating an HTML Document

معنا محرر نصوص و مستعرض ....   نبدا الان بأنشاء اول صفحه لنا لموقعنا على النت

1- انشئ مجلد فى جهازك للمشروع و سمه بأى اسم وقد تم تسميته فى هذا المشروع  Portfolio

2ـ افتح محرر النصوص  VS Code  او اى محرر نصوص اخر

3- اخترالامر open Folder من القائمه File... ثم ... open لفتح المجلد الذى انشأناه سابقا ثم نفتحه

4- كليك يمين تحت الفولدر ثم اختار ملف جديد و سميه أى اسم و تم تسميته index.html

5- الان لدينا ملف نصى فارغ اسمه index.html

العرض والتحديث

الان نملاء المستند بالمحتوى .. اكتب الاسطر الاتيه فى مستند

HTML الخاص بك

لعرض الصفحة ، سنستخدم إضافة Live Server التي ثبّتها سابقًا. انقر بزر الماوس الأيمن فوق index.html الخاص بك (الملف الموجود أسفل مجلد Portfolio وليس الموجود أعلاه ضمن "Open Editors"). ثم انقر فوق Open with Live Server. يجب فتح نافذة المتصفح وعرض موقع الويب الأول. الآن ، كلما قمت بحفظ أي تغييرات يتم تحديثها تلقائيًا بواسطة الخادم المباشر.

تهانينا   لقد   أنشأت   موقعك   الأوّل

عنا صر HTML

الوسوم Tags

فى المثال السابق رأينا رموز وكلمات مكتوبه ضمن رمزى > < هذه الرموز تسمى وسوم

عادةً ولكن ليس دائما تتألف عناصر من وسمين، وسم للفتح ووسم للاغلاق ... فى مثالنا السابق نجد ان< html > هو وسم للفتح، أمّا< html > هو وسم للإغلاق فى وسم للإغلاق حيث نلاحظ وجود <html/> سلاش شرطه مائله قبل اسم الوسم

أي نص موجود بين وسمي الفتح   والإغلاق   يُعتبر محتوى لعنصرهذا. فمثلاً بالنسبة للوسمين < html> و < html/ > نُخبر متصفّح الويب عن بداية ونهاية مستند صفحة الويب الخاصة بنا

أمّا الوسم الثاني الذي صادفناه هو الوسم < body > يُحدّد هذا الوسم أنّ جميع المحتوى الواقع بين وسم الفتح <body> والإغلاق <body/> سيظهر بشكل مرئي للمستخدم في المنطقة الرئيسيةمن نافذة المتصفّح

السمات Attributes

تعرّف السمات معلومات إضافية لعنصر والسمات هى جزء من وسم الفتح ويكون لها دائما اسم name و قيمه value
و كمثال على السمات، دعنا ننظر إلى عنصر <  a   > الخاص بالروابط. link وهو ربما من أهم العناصر على الإطلاق يحتوى على اسم ولها قيمه والمتصفح يعرف ذلك ويعرض الرابط <  a > العنصر

يتضمن العنصر <  a > أعلاه سمة href (اختصارًا لـ "مرجع النص التشعبي") بالقيمة https://modountiy.netlify.com/ يعرف المتصفح أنه يجب عليه عرض الرابط كموقع الويب الخاص بي

الهيكل الأساسي لصفحة HTML

لقد رأينا عنصرين من عناصر وهما <html>   <body> ولكن بنية صفحة html تتكوّن عادةً من على المزيد من العناصر.... استبدل محتويات الملف بالكود الاتى

الشرح

ـــ دائما ضع الوسم <DOCTYPE html> فهذا يخبر المتصفح عن نوع المستند ــ يشير الوسم <html> الى بدايه المستند والوسم < html/> الى نهايته ـــ يحتوي العنصر <head> على معلومات إضافية حول الصفحة. وعلى النقيض من العنصر < body> لا تظهر هذه المعلومات في الصفحه الرئيسية من المتصفح ـ ضمن العنصر <meta> يجب أن يكون هناك مؤشرا حول الترميز إذا لم تقم بتحديد الترميز بعض الأحرف الخاصة قد لا يتم عرضها بشكل صحيح. و قد تبين أن هذا العنصر لا يوجد لديه علامة إغلاق. هناك عدد قليل من العناصر من دون علامات إغلاق،و هي استثناء ــ العنصر التالي <title>.....</title> يتم عرض العنوان في شريط العنوان في أعلى نافذة المتصفح

ــ يتم عرض كل شيء داخل العنصر <body > في المنطقة الرئيسية من المتصفح تحدد < h1 > العنوان الرئيسي. يمكن إنشاء العناوين الفرعية مع
<  ;h2  >..<  h3  >..<  h4  >..<  h5  >..<  h6  >.. ...
ــ النص بين <  p  > و <  / p  > هو فقرة.

أضافه صوره

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

أضافه صوره او إدراج صورة نستخدم عنصر <  IMG  > والمثال التالي إدراج صورة
<img src="mypicture.jpg" alt="Picture of me">

عنصر .. <  IMG  > .. لديها وسم افتتاح فقط و بدون وسم الإغلاق .
وهو يحتوي على سمه ..Src. وسمة ....alt. تحدد سمة .src.. عنوان .URLs...، وهذا هو الموقع واسم الملف للصورة.
السمة ...alt. هو "نص بديل"، الذي يصف مضمون الصورة. ويستخدم هذا النص عن طريق محركات البحث، وذلك فى حاله لسبب ما لم تعرض الصورة،

اخير ا ... ىجب ان نتاكد من العنوان عند اضافه الصور حيث ان العنوان يحدد مكان تواجد الصوره او الرابط .....

هذا هو الكود للملف قد اكتمل

لاحظ رابط الصوره حيث اننا استخد منا الصوره بعد رفعها على احد مراكز رفع الصور حتى ىمكن استخدامها فى اى مكان ...... وهذه هى الصوره النهائيه التى ستظهر لنا عند فتح الملف بأى مستعرض .....

في الجزء التالي سوف تتعلم كيفية نشر موقع الويب الخاص بك على شبكة الانترنت.

الجزء الثانى ...... هنا

هذاالمقال مترجم عن مقال

Marco Jakob     code.makery

نرجو الرجوع الى المقاله السابقه للاطلاع على بعض المعلومات المهمه لتعلم برمجه الوب

المصادر

code.makery

w3schools

codecademy

نرجو ان تترك لنا تعليق او اذا كان لديك استفسار او ملحوظه – لا تتردد اترك تعليق واعلم اننى ساكون ممتن بذلك