إذا أردت إنشاء موقع على شبكة الإنترنت، فأنت لست بحاجة إلى أي برامج خيالية فقط مجرد جهاز كمبيوتر واستعدادك. البرنامج الذي ستستخدمه موجود بالفعل على معظم أجهزة الكمبيوتر التي يتم بيعها اليوم. إذا ماذا تحتاج؟
سوف تحتاج إلى ما يلي:
محرر النصوص هو برنامج يتيح لك كتابة نص. في الواقع، نص ASCII. ما هو نص ASCII؟ في الأساس، الأحرف الموجودة على لوحة المفاتيح. على أجهزة الحاسوب التي تعمل بنظام Windows، يُطلق على برنامج محرر النصوص اسم Notepad. يمكنك فتحه عن طريق تحديد: أبدا> البرامج> الملحقات> المفكرة. لا تخلط بين محرر نصوص ومعالج النصوص. سيؤدي استخدام معالج النصوص، مثل Word Pad أو Word، إلى تعكير صفوك. تأكد من استخدام برنامج "المفكرة".
المتصفح هو برنامج يتيح لك عرض صفحة الويب. يأخذ ما هو مكتوب على المفكرة ويفسره. يظهر لك المستعرض التنسيقات كلها؛ إنه ما يجعل الصفحة تبدو جميلة أو قبيحة أو أي شيء آخر. هناك الكثير من المتصفحات. متصفحان شائعان هما Internet Explorer و Firefox. لفتح متصفح، انقر نقرًا مزدوجًا فوق رمز المتصفح على سطح المكتب، أو حدد أبدا> البرامج> Internet Explorer (أو Firefox).
دعونا نجري تجربة صغيرة. افتح صفحة ويب، اكتب http://www.amazon.com مثلا. الآن بعد أن أصبح موقع أمازون مفتوحًا، انقر بزر الماوس الأيمن على صفحة الويب واختر "عرض المصدر" أو "عرض مصدر الصفحة". ماذا ترى؟ الكثير من كود HTML. لا تقلق إذا بدا الأمر معقدًا بعض الشيء. إنه حقًا سهل جدًا. ستنشئ صفحة ويب في أقل من ساعة. فقط استمر في القراءة.
إذن ماذا تعلمنا حتى هذه اللحظة؟ تقوم بإنشاء صفحة ويب باستخدام المفكرة. تقوم بعرض صفحة ويب باستخدام متصفح. إذا دعونا نصنع صفحة ويب.
إنشاء أول صفحة ويب
أفضل طريقة لإنشاء صفحة ويب هي الخوض فيها مباشرة. افتح المفكرة. لفتح برنامج "المفكرة" في نظام التشغيل Windows 7 وقبله: أبدا> البرامج> البرامج الملحقة> المفكرة. لفتح المفكرة في Windows 8: حرك الماوس فوق زر البدء ثم إلى الزاوية اليسرى السفلية. يؤدي هذا إلى إظهار القائمة القصيرة الجديدة، انقر فوق زر التطبيقات في الجزء السفلي، وستحصل على قائمة بجميع التطبيقات المثبتة بترتيب أبجدي. في الجزء السفلي هو المفكرة. لفتح المفكرة في Windows 10: في خانة البحث اكتب المفكرة، وستظهر لك مباشرة. قم بالضغط عليها لفتحها.
بمجرد فتح المفكرة، أبدا في كتابة الكود التالي:
<html> <head> <title>Page Title</title> <head/> <body> <h1>This is The First Heading</h1> <p>This is The First Paragraph</p> <p>This is The Second Paragraph</p> <h2>This is The Second Heading</h2> <p>This is The Third Paragraph</p> </body> </html>
ماذا يعني كل هذا؟ الأشياء الموجودة بين الرمزين المظللين <> تسمي "العلامات" أو Tags. تأتي العلامات (في الغالب) في أزواج، وعلامة بداية وعلامة نهاية. تكرر علامة النهاية علامة البداية، بداخلها شرطة مائلة. على سبيل المثال، تبدأ صفحة الويب بـ <html> وتنتهي بـ <html/>.
تتكون كل صفحة ويب من جزأين:
1 - رأس الصفحة الذي يبدأ بـ <head> وينتهي بـ <head/>
2 - جسم الصفحة الذي يبدأ بـ <body> وينتهي بـ <body/>
إذن ماذا عن العنوان (title)؟ العنوان هو ما يظهر أعلى المتصفح، في "شريط العنوان" الأزرق. كل شيء آخر يذهب في الجسم (body)، أي بين علامات الجسم. يذهب معظم ما تريد قوله في فقرات، تمامًا كما هو الحال في الحياة الواقعية. تبدأ الفقرة بـ <p> وتنتهي بـ <p/>. يمكنك أيضًا وضع الأشياء بين علامات العناوين، والتي تأتي بأحجام مختلفة، من <h1>، <h2>،... حتى <h6>. تُستخدم العناوين عادةً للعناوين الرئيسية. سيجعل العنوان <h1> النص غامقًا وكبيرًا. <h2> أصغر قليلاً، وهكذا دواليك. <h6> عناوين صغيرة جدًا. الآن، قد يبدو أن علامة العنوان ستدخل في الرأس، لكنها ليست كذلك. يتم إدخال العناوين في النص، تمامًا مثل أي شيء آخر (باستثناء العنوان). بعد إنشاء صفحة الويب، يجب عليك تسميتها وحفظها. تسمية صفحة ويب بالطريقة الصحيحة أمر بالغ الأهمية، لذلك نخصص قسمًا كاملاً للتسمية. واصل القراءة.
تسمية صفحة الويب الخاصة بك
قبل تسمية صفحة الويب الخاصة بك، قم بإنشاء مجلد يحتوي على جميع صفحات الويب الخاصة بك. يمكن أن يكون المجلد في أي مكان (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 تك" مثلا 
، أو أي شيء آخر. أيضًا، قم بتغيير عنوان المستوى الأول (هذه هي الأشياء الموجودة بين علامة البداية <h1> وعلامة النهاية <h1/>) إلى شيء أفضل. ربما "طريقة إنشاء أول صفحة ويب" أو أيا كان.
لقد أجريت الآن التغييرات في برنامج "المفكرة". لكنك لا ترى "طريقة إنشاء أول صفحة ويب" في متصفحك. هناك شيئان عليك القيام بهما لإجراء التغييرات في برنامج "المفكرة" لتظهر في المتصفح.
1 - قم بعمل "ملف> حفظ" في المفكرة.
2 - اضغط على زر "تحديث" أو "إعادة تحميل" في متصفحك.
عندما تقوم بفعل ذلك فلقد صنعت صفحة الويب الأولى الخاصة بك.
التحقق من صفحة الويب (Validation)
قد تعتقد أنه إذا ظهرت صفحة الويب الخاصة بك في المتصفح، فإن الشفرة صحيحة. ليس كذلك. تم تصميم برنامج المتصفح لمحاولة تصحيح أخطاء الترميز. قد تظهر التعليمات البرمجية غير الصحيحة بالطريقة التي كنت تقصدها في أحد المستعرضات، وقد تظهر غريبة في متصفح آخر، وقد لا تظهر على الإطلاق في متصفح ثالث.
توجد طريقة سهلة لمعرفة ما إذا كانت شفرتك صحيحة أم لا. يقدم اتحاد شبكة الويب العالمية أداة تحقق أنيقة. إنه على http://validator.w3.org. الآن، هناك مشكلة صغيرة. يجب أن تخبر المدقق عن إصدار html الذي تستخدمه، حتى يعرف ما الذي يجب التحقق من صحته. هذا سهل، ما عليك سوى إضافة DOCTYPE في الجزء العلوي من صفحة الويب الخاصة بك. يجب عليك أيضًا إضافة معلومات اللغة إلى علامة html ، بالإضافة إلى علامة وصفية تشير إلى مجموعة الأحرف.
<!DOCTYPE html> <html lang="en"> <head> <title>Tito 4 Tech</title> <meta charset="utf-8"> </head> <body> <h1>This is The First Heading</h1> <p>This is The First Paragraph</p> <p>This is The Second Paragraph</p> <h2>This is The Second Heading</h2> <p>This is The Third Paragraph</p> </body> </html>
قم بكتابة هذا أعلى صفحة الويب التي تنشئها في برنامج "المفكرة". لا تنس حفظ الملف مرة أخرى.
يخبر DOCTYPE المدقق بإصدار HTML الذي تستخدمه. هناك عدة إصدارات مختلفة من لغة تأشير النص الفائق. نحن نتعلم HTML5. أنت الآن جاهز للتحقق. ها هو الرابط مرة أخرى: http://validator.w3.org. عندما تصل إلى صفحة التحقق من صحة W3C، انقر فوق علامة التبويب التي تقول "تحقق من خلال تحميل الملف". تصفح إلى الملف الصحيح، ثم انقر فوق الزر "فحص".
إذا تم التحقق من صحة الرمز، فسترى "تم التحقق بنجاح من هذا المستند كـ HTML5" على خلفية خضراء. اللون الأخضر جيد. إذا لم يتم التحقق من صحة الرمز، فسترى "تم العثور على خطأ أثناء التحقق من هذا المستند كـ HTML5" على خلفية حمراء. الأحمر سيئ بالطبع. إذا لم يتم التحقق من صحة الرمز الخاص بك، فسوف يخبرك المدقق بالخطأ. اقرأ التعليقات الواردة من المدقق، وقم بتغيير الرمز الخاص بك في Notepad، واحفظه، ثم تحقق من الصحة مجددا.
ينشئ المدقق رسائل خطأ تكون عادةً مفيدة جدًا، ولكن نظرًا للطريقة التي يوزع بها المستندات، تكون ملاحظاته أحيانًا مشفرة. ستعتاد على هذا، ولكن إليك بعض النصائح لمساعدتك على البدء:
- تتالى أخطاء التحقق من الصحة يجب أن لا تثبط عزيمتك إذا رأيت أن لديك 36 خطأ في المستند! أصلح الخيار الأول، ثم تحقق مجددا. سيؤدي هذا غالبًا إلى إصلاح العديد من الأخطاء التالية، خاصة تلك التي تتعلق بهيكل المستند.
- يمكنك الحصول على بيان html واحد فقط لكل مستند. إذا قمت بنسخ ولصق <"html lang = ”en> في مستندك، فقم بمسح <html> القديم.
- يمكنك فقط الحصول على علامة نصية واحدة في المستند الخاص بك. في وقت لاحق، عندما نصل إلى تصميم علامة body ، تأكد من عدم وجود علامتي نص body.
- قد يعترض المدقق على الكود الصحيح، لكنه في المكان الخطأ.
<!DOCTYPE html> <html lang="en"> <head> <title>Tito 4 Tech</title> <meta charset="utf-8"> </head> <body> <h1>This is The First Heading</h1> <p>This is The First Paragraph</p> <p>This is The Second Paragraph</p> <h2>This is The Second Heading</h2> </body> <p>This is The Third Paragraph</p> ======>>> Error Starts Here </html>
يُنشئ الرمز أعلاه خطأ التحقق التالي:
Line 19, Column 4: Stray start tag h2 <h2>This is The Third Paragraph</h2>
وكما ترى لا يوجد شيء خطأ في الكود الخاص بعلامة h2؛ المدقق يعترض على موقعه. ولكن كما نلاحظ، فإن علامة <body/>، في المكان الخطأ. يجب أن تأتي علامة النص الختامي بعد كل العبارات، وقبل علامة <html/> مباشرةً. وعند القيام بتعديلها يصبح الكود الخاص بك صحيحا 100%. وإلي هنا نكون قد انتهينا من إنشاء أول صفحة ويب خاصة بنا.