طريقة إنشاء أول صفحة ويب



26 أكتوبر، 2021 | تيتو 4 تك


  • إذا أردت إنشاء موقع على شبكة الإنترنت. من السهل. لست بحاجة إلى أي برامج خيالية. مجرد جهاز كمبيوتر و استعدادك. البرنامج الذي ستستخدمه موجود بالفعل على معظم أجهزة الكمبيوتر التي يتم بيعها اليوم. إذا ماذا نحتاج؟
    سوف نحتاج إلي ما يلي :
     
    1  -  محرر نصوص (text editor)
     
    محرر النصوص هو برنامج يتيح لك كتابة نص. في الواقع ، نص ASCII. ما هو نص ASCII؟ في الأساس ، الأحرف الموجودة على لوحة المفاتيح. على أجهزة الكمبيوتر التي تعمل بنظام Windows ، يُطلق على برنامج محرر النصوص اسم Notepad. يمكنك فتحه عن طريق تحديد: ابدأ> البرامج> الملحقات> المفكرة. لا تخلط بين محرر نصوص ومعالج النصوص. سيؤدي استخدام معالج النصوص ، مثل Word Pad أو Word ، إلى تعكير صفوك. تأكد من استخدام برنامج "المفكرة".
     
    2  -  متصفح ويب (web browser)
     
    المتصفح هو برنامج يتيح لك عرض صفحة الويب. يأخذ ما هو مكتوب على المفكرة ويفسره. يظهر لك المستعرض كل التنسيقات ؛ إنه ما يجعل الصفحة تبدو جميلة أو قبيحة أو أي شيء آخر. هناك الكثير من المتصفحات. متصفحان شائعان هما Internet Explorer و Firefox. لفتح متصفح ، انقر نقرًا مزدوجًا فوق رمز المتصفح على سطح المكتب ، أو حدد ابدأ> البرامج> Internet Explorer (أو Firefox).
     
    دعونا نجري تجربة صغيرة. افتح صفحة ويب ، اكتب http://www.amazon.com. الآن بعد أن أصبح موقع أمازون مفتوحًا ، انقر بزر الماوس الأيمن على صفحة الويب واختر "عرض المصدر" أو "عرض مصدر الصفحة". ماذا ترى؟ الكثير من كود HTML. لا تقلق إذا بدا الأمر معقدًا بعض الشيء. إنه حقًا سهل جدًا. ستنشئ صفحة ويب في أقل من ساعة. فقط استمر في القراءة.
    إذن ماذا تعلمنا؟ تقوم بإنشاء صفحة ويب باستخدام المفكرة. تقوم بعرض صفحة ويب باستخدام متصفح. إذا دعونا نصنع صفحة ويب.
     
     

    enlightened  إنشاء أول صفحة ويب

     

    أفضل طريقة لإنشاء صفحة ويب هي الخوض فيها مباشرة. افتح المفكرة. لفتح برنامج "المفكرة" في نظام التشغيل Windows 7 وقبله: ابدأ> البرامج> البرامج الملحقة> المفكرة. لفتح المفكرة في Windows 8: حرك الماوس فوق زر البدء ثم إلى الزاوية اليسرى السفلية. يؤدي هذا إلى إظهار القائمة القصيرة الجديدة ، انقر فوق زر التطبيقات في الجزء السفلي وستحصل على قائمة بجميع التطبيقات المثبتة بترتيب أبجدي. في الجزء السفلي هو المفكرة.لفتح المفكرة في Windows 10: في خانة البحث اكتب المفكرة وستظهر لك مباشرة . قم بالضغط عليها لفتحها.
    بمجرد فتح المفكرة ، ابدأ في كتابة الكود التالي :
     
     
    <head>
    
    <title/> أكتب عنوان الصفحة هنا <title>
    
    </head>
    
    <body>
    
    <h1/> هذا هو أول عنوان <h1>
    
    <p/> هذه هي أول فقرة <p>
    
    <p/> هذه هي ثاني فقرة <p>
    
    <h2/> هذا هو ثاني عنوان <h2>
    
    <p/> هذه هي ثالث فقرة <p>
    
    </body>
    
    </html>

     

     

     

    ماذا يعني كل هذا؟ الأشياء الموجودة بين الرمزين المظللان <> تسمي "العلامات" أو tags. تأتي العلامات (في الغالب) في أزواج ، وعلامة بداية وعلامة نهاية. تكرر علامة النهاية علامة البداية ، بداخلها شرطة مائلة. على سبيل المثال ، تبدأ صفحة الويب بـ <html> وتنتهي بـ </html>.

     

    تتكون كل صفحة ويب من جزأين:
     
    1  -  رأس الصفحة الذي يبدأ بـ <head> وينتهي بـ </head>
    2  -  جسم الصفحة  الذي يبدأ بـ <body> وينتهي بـ </ body>
     
     
    إذن ماذا عن العنوان (title)؟ العنوان هو ما يظهر أعلى المتصفح ، في "شريط العنوان" الأزرق. كل شيء آخر يذهب في الجسم (body) ، أي بين علامات الجسم. يذهب معظم ما تريد قوله في فقرات ، تمامًا كما هو الحال في الحياة الواقعية. تبدأ الفقرة بـ <p> وتنتهي بـ </p>. يمكنك أيضًا وضع الأشياء بين علامات العناوين ، والتي تأتي بأحجام مختلفة ، من <h1> ، <h2> ، ... حتى <h6>. تُستخدم العناوين عادةً للعناوين الرئيسية. سيجعل العنوان <h1> النص غامقًا وكبيرًا. <h2> أصغر قليلاً ، وهكذا دواليك. <h6> عناوين صغيرة جدًا. الآن ، قد يبدو أن علامة العنوان ستدخل في الرأس ، لكنها ليست كذلك. يتم إدخال العناوين في النص ، تمامًا مثل أي شيء آخر (باستثناء العنوان). بعد إنشاء صفحة الويب ، يجب عليك تسميتها وحفظها. تسمية صفحة ويب بالطريقة الصحيحة أمر بالغ الأهمية ، لذلك نخصص قسمًا كاملاً للتسمية. واصل القراءة.
     
     

    enlightened  تسمية صفحة الويب الخاصة بك

     

    قبل تسمية صفحة الويب الخاصة بك ، قم بإنشاء مجلد يحتوي على جميع صفحات الويب الخاصة بك. يمكن أن يكون المجلد في أي مكان (a: drive ، c: drive ، محرك أقراص فلاش) ، فهو ليس مهمًا. فقط تأكد من أنك تعرف مكانه حتى تتمكن من العثور عليه مرة أخرى. اسم المجلد "موقع الويب". يمكنك الآن حفظ الملف النصي الذي أنشأته للتو باستخدام برنامج "المفكرة" في المجلد المسمى "موقع الويب". أثناء حفظ الملف النصي ، قم بتسميته "first.html".
     
    تكون تسمية صفحة الويب بشكل صحيح أمرًا سهلاً إذا اتبعت القواعد الثلاثة التالية:
     
    1  -  بدون مسافات
     
    يمكن أن تؤدي المسافات في أسماء الملفات إلى إرباك المتصفحات وبرامج البريد الإلكتروني. عادة ما تستبدل المستعرضات "٪ 20" بمسافة. تقوم برامج البريد الإلكتروني أحيانًا بقطع عناوين URL بعد مسافة. إذا كنت تريد استخدام مسافة للوضوح ، فاستخدم شرطة سفلية بدلاً من ذلك. على سبيل المثال ، يتحول "onion recipe.html" إلى "onion_recipe.html".
     
    2 - بدون أحرف كبيرة (capital letters)
     
     من المحتمل أنك تنشئ أول صفحة ويب لك في بيئة نظام تشغيل Windows. إذا كان الأمر كذلك ، فإن Windows متساهل جدًا بشأن أسماء الملفات. ولكن بمجرد الانتهاء من إنشاء صفحتك وتحميلها على خادم ، قد يستخدم الخادم نظام تشغيل مختلفًا تمامًا ، مثل Unix أو Linux. يهتم يونكس ولينكس بالاحرف الكبيرة. يعد MyFile.html ملفًا مختلفًا تمامًا عن myfile.html في بيئة Unix أو Linux. يمكنك استخدام الأحرف الكبيرة في أسماء الملفات الخاصة بك ، ولكن عند إنشاء الروابط الخاصة بك (والتي سنصل إليها قريبًا) ، فإنها لن تعمل إذا كان اسم ملف الارتباط الخاص بك لا يتطابق مع اسم ملفك الفعلي. إذا استخدمت كل الأحرف الصغيرة ، فلن تضطر إلى محاولة تذكر "هل استخدمت حرفًا كبيرًا أم لا؟".
     
    3 - امتداد الملف هو .html (نقطة html)
     
    امتداد الملفات هي ملحقات مهمة. يجب أن يكون امتداد صفحة الويب الخاص بك إما .htm أو .html. لا يهم أيهما ، ولكن عليك أن تكون متسقًا. إذا أنشأت رابطًا إلى myfile.html وسميت الصفحة myfile.htm ، فلن يعمل الرابط.
     
    حسنًا ، بعد أن حفظنا أول صفحة ويب لدينا باسم "first.html" ، فلنلقِ نظرة عليها في المتصفح.
     
    يقول شريط العنوان "أكتب عنوان الصفحة هنا" دعونا نضع عنوانًا أفضل. ارجع إلى المفكرة. لا تزال صفحة الويب الخاصة بك مفتوحة في Notepad ، فقط افتح صفحة الويب في المفكرة لرؤية كود html. أسهل طريقة لفتح صفحة الويب في المفكرة هي النقر بزر الماوس الأيمن على اسم الملف في "مستكشف Windows" أو "جهاز الكمبيوتر" ، ثم اختيار فتح باستخدام> المفكرة.
    الآن غيّر العنوان إلى شيء جيد ، مثل "تيتو 4 تك" مثلا laugh  ، أو أي شيء آخر. أيضًا ، قم بتغيير عنوان المستوى الأول (هذه هي الأشياء الموجودة بين علامة البداية <h1> وعلامة النهاية </ h1>) إلى شيء أفضل. ربما "طريقة إنشاء أول صفحة ويب" أو أيا كان.
    لقد أجريت الآن التغييرات في برنامج "المفكرة". لكنك لا ترى "طريقة إنشاء أول صفحة ويب" في متصفحك. هناك شيئان عليك القيام بهما لإجراء التغييرات في برنامج "المفكرة" لتظهر في المتصفح.

     

    1  -  قم بعمل "ملف> حفظ" في المفكرة
    2  -  اضغط على زر "تحديث" أو "إعادة تحميل" في متصفحك
     
    عندما تقوم بفعل ذلك فلقد صنعت صفحة الويب الأولى الخاصة بك.
     
     

    enlightened  التحقق (Validation)

     

    قد تعتقد أنه إذا ظهرت صفحة الويب الخاصة بك في المتصفح ، فإن الشفرة صحيحة. ليس كذلك. تم تصميم برنامج المتصفح لمحاولة تصحيح أخطاء الترميز. قد تظهر التعليمات البرمجية غير الصحيحة بالطريقة التي كنت تقصدها في أحد المستعرضات ، وقد تظهر غريبة في متصفح آخر ، وقد لا تظهر على الإطلاق في متصفح ثالث.
    توجد طريقة سهلة لمعرفة ما إذا كانت شفرتك صحيحة أم لا.  يقدم اتحاد شبكة الويب العالمية أداة تحقق أنيقة. إنه على http://validator.w3.org/. الآن ، هناك مشكلة صغيرة. يجب أن تخبر المدقق عن إصدار html الذي تستخدمه ، حتى يعرف ما الذي يجب التحقق من صحته. هذا سهل ، ما عليك سوى إضافة DOCTYPE في الجزء العلوي من صفحة الويب الخاصة بك. يجب عليك أيضًا إضافة معلومات اللغة إلى علامة html ، بالإضافة إلى علامة وصفية تشير إلى مجموعة الأحرف. 

     

     

    <!DOCTYPE html>
    
    
    <html lang=”ar”>
    
    
    <head>
    
    
    <title/> تيتو 4 تك <title>
    
    
       <meta charset=”utf-8″>
    
    
    </head>
    
    <body>
    
    <h1/> طريقة إنشاء أول صفحة ويب_العنوان الاول <h1>
    
    <p/> هذا نص تجريبي للفقرة.هذا نص تجريبي للفقرة.هذا نص تجريبي للفقرة.هذا نص تجريبي للفقرة. <p>
    
    <p/> هذا نص تجريبي للفقرة.هذا نص تجريبي للفقرة.هذا نص تجريبي للفقرة.هذا نص تجريبي للفقرة. <p>
    
    <h2/> طريقة إنشاء أول صفحة ويب _العنوان الثاني <h2>
    
    <p/> هذا نص تجريبي للفقرة.هذا نص تجريبي للفقرة.هذا نص تجريبي للفقرة.هذا نص تجريبي للفقرة.<p>
    
    </body>
    
    </html>

     

     

    قم بكتابة هذا أعلى صفحة الويب التي تنشئها في برنامج "المفكرة". تأكد من إزالة علامة <html> القديمة التي كانت لديك ، حتى لا يكون لديك علامتا html. لا تنس حفظ الملف مرة أخرى.
    يخبر DOCTYPE المدقق بإصدار HTML الذي تستخدمه. هناك عدة إصدارات مختلفة من لغة تأشير النص الفائق. نحن نتعلم HTML5.أنت الآن جاهز للتحقق. ها هو الرابط مرة أخرى: http://validator.w3.org/. عندما تصل إلى صفحة التحقق من صحة W3C ، انقر فوق علامة التبويب التي تقول "تحقق من خلال تحميل الملف". تصفح إلى الملف الصحيح ، ثم انقر فوق الزر "فحص".
    إذا تم التحقق من صحة الرمز ، فسترى "تم التحقق بنجاح من هذا المستند كـ HTML5!" على خلفية خضراء. اللون الأخضر جيد. إذا لم يتم التحقق من صحة الرمز ، فسترى "تم العثور على خطأ أثناء التحقق من هذا المستند كـ HTML5! "على خلفية حمراء. الأحمر سيء. إذا لم يتم التحقق من صحة الرمز الخاص بك ، فسوف يخبرك المدقق بالخطأ. اقرأ التعليقات الواردة من المدقق ، وقم بتغيير الرمز الخاص بك في Notepad ، واحفظه ، ثم تحقق من الصحة مرة أخرى.

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

     

    yes  تتالي أخطاء التحقق من الصحة يجب ان  لا تثبط عزيمتك إذا رأيت أن لديك 36 خطأ في المستند! أصلح الخيار الأول ، ثم تحقق مرة أخرى. سيؤدي هذا غالبًا إلى إصلاح العديد من الأخطاء التالية ، خاصة تلك التي تتعلق بهيكل المستند.
    yes  يمكنك الحصول على بيان html واحد فقط لكل مستند. إذا قمت بنسخ ولصق <html lang = ”ar”> في مستندك ، فقم بمسح <html> القديم.
    yes  يمكنك فقط الحصول على علامة نصية واحدة في المستند الخاص بك. في وقت لاحق ، عندما نصل إلى تصميم علامة body ، تأكد من عدم وجود علامتي نص body.
    yes  قد يعترض المدقق على الكود الصحيح ، لكنه في المكان الخطأ.
     
     
    <!DOCTYPE html>
    
    <html lang=”ar”>
    
    <head>
    
    <title/> تيتو 4 تك <title>
    
    <meta charset=”utf-8″>
    
    </head>
    
    <body>
    
    <h1/> طريقة إنشاء أول صفحة ويب_العنوان الاول <h1>
    
    <p/> هذا نص تجريبي للفقرة.هذا نص تجريبي للفقرة.هذا نص تجريبي للفقرة.هذا نص تجريبي للفقرة. <p>
    
    <p/> هذا نص تجريبي للفقرة.هذا نص تجريبي للفقرة.هذا نص تجريبي للفقرة.هذا نص تجريبي للفقرة. <p>
    
     </body>
    
     ======>>> الخطأ موجود بداية من هنا       <h2/> طريقة إنشاء أول صفحة ويب _العنوان الثاني <h2>
    
    <p/> هذا نص تجريبي للفقرة.هذا نص تجريبي للفقرة.هذا نص تجريبي للفقرة.هذا نص تجريبي للفقرة. <p>
    
    </html>

     

     

    يُنشئ الرمز أعلاه خطأ التحقق التالي:
     
     
    Error Line 19, Column 4: Stray start tag h2
    
     <h2/> طريقة إنشاء أول صفحة ويب _العنوان الثاني <h2>

     

     

     

    وكما تري لا يوجد شئ خطأ في الكود الخاص بعلامة h2 ؛ المدقق يعترض على موقعه.ولكن كما نلاحظ فإن علامة </body> ، في المكان الخطأ. يجب أن تأتي علامة النص الختامي بعد كل العبارات وقبل علامة </html> مباشرةً.وعند القيام بتعديلها يصبح الكود الخاص بك صحيحا 100%.وإلي هنا نكون قد انتهينا من إنشاء أول صفحة ويب خاصة بنا.