تعرف على كيفية إنشاء موقع الويب الخاص بك باستخدام HTML5 و CSS3


الدرس: قم بإنشاء أول صفحة ويب HTML


الصفحة السابقة

هذا كل شيء ، هل قمت بتثبيت جميع البرامج؟ يجب أن يكون لديك الآن محرر نصوص لإنشاء موقعك (مثل VS CODE) والعديد من المتصفحات لاختباره (Mozilla Firefox، Google Chrome ...).

في هذا الفصل سوف نبدأ في التطبيق! سنكتشف أساسيات HTML ونحفظ صفحة الويب الأولى لدينا!

نعم ، بالطبع ، لا تتوقع أن تنشئ صفحة ويب استثنائية في هذا الفصل الثاني ، لكن قليلا من الصبر ... و سيأتي كل ما تريد !

إنشاء صفحة ويب باستعمال محرر النصوص


هيا ، بنا اذا! كما قلت لك ، سنقوم بإنشاء موقعنا في محرر نصوص. كان عليك تثبيت محرر نصوص استمرارا لنصيحتي في الفصل الأول:VS code ، sublime text ، Notepad ++ ، jEdit ، vim ، TextWrangler ... لا يهم. هذه البرامج لها هدف بسيط للغاية: السماح لك بكتابة النص!

في بقية هذا الفصل ، سأعمل مع VS Code. سأفتحه:

visual studio code

ثم ساختار New File

visual studio code

حسنًا ، ماذا نفعل الآن؟ ماذا نكتب على هذه الورقة البيضاء (أه ... السوداء)؟

سنقوم باختبار قصير. أدعوك لكتابة ما يدور في رأسك ، مثلي في الشكل التالي.

visual studio code

يمكنك كتابة نفس الجمل مثلي أو ما تريد ؛ الهدف هو كتابة شيء ما.

الآن ، دعونا نحفظ هذا الملف. الأمر بسيط للغاية: كما هو الحال في جميع البرامج ، لديك قائمة ملف> حفظ (File>save باللغة الإنجليزية) ثم يسألك عن مكان حفظ الملف وتحت أي اسم. احفظه أينما تريد. قم بتسمية الملف بالاسم الذي تريده ، بحيث تنتهي بـلاحقة .html ، على سبيل المثال ، test.html ، كما هو موضح في الشكل التالي.

save visual studio code

أنصحك بإنشاء مجلد جديد في مستنداتك يحتوي على ملفات موقعك. من جهتي ، قمت بإنشاء مجلد test أضع فيه test.html الخاص بي.

افتح الآن مستكشف الملفات في المجلد الذي قمت بحفظ صفحتك فيه (explorer Windows أو Mac Finder). سترى الملف الذي أنشأته للتو:

folder windows

يعتمد الرمز الذي يمثل الملف على متصفح الويب الافتراضي بشكل عام. يمكنك رؤية أيقونة Firefox أو Chrome او Edge... أو معاينة مثل هذه. لا تولي اهتماما. ما عليك سوى النقر نقرًا مزدوجًا فوق هذا الملف و ... يفتح المتصفح الخاص بك ويعرض النص الذي كتبته.

preview browser

أنها لا تعمل بشكل جيد ، كما يبدو! تظهر رموز غير مفهومة و كذلك يظهر كل النص في نفس السطر بينما كتبنا سطرين مختلفين من النص؟ في الواقع ، ملاحظاتك جيدة!

  • يظهر النص في شكل رموز عندما نطلب كتابته. ماذا يجري ؟
  • يظهر النص في نفس السطر عندما تطلب كتابته على سطرين مختلفين. ماذا يجري ؟

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

العلامات وسماتها


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

العلامات

تمتلئ صفحات HTML بما يسمى العلامات. هذه غير مرئية على الشاشة للزائرين ، لكنها تسمح للكمبيوتر لفهم ما يجب أن يعرض.

تحديد العلامات في النص سهل جدا. إنها محاطة بـرموز < و > ، مثل هذا:

فيما تصلح هذه العلامات ؟ هي تشير إلى طبيعة النص الذي يؤطرونه. يقصدون على سبيل المثال: "هذا هو عنوان الصفحة" ، "هذه صورة" ، "هذه فقرة نصية" ، إلخ.

هناك نوعان من العلامات: العلامات المقترنة والعلامات اليتيمة.

العلامات المقترنة

أنها تفتح ، تحتوي على نص ، وتغلق لاحقا. إليك ما تبدو عليه:


        <titre>النص هنا  </titre>
    

هناك علامة فتح (<title>) وعلامة إغلاق (<title/>) تشير إلى أن العنوان ينتهي. هذا يعني بالنسبة للكمبيوتر أن أي شيء غير موجود بين هاتين العلامتين ... ليس عنوانًا.

العلامات اليتيمة

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

يتم كتابة لعلامة اليتيمة مثل هذا:

<image />

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

السمات

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

<balise attribut="value" >

فيما تصلح السمات هذه؟ فلنأخذ العلامة

<image /> التي شاهدناها للتو. هي لا تفعل أي شيء لانها لا تعطي اسم الصورة التي نريد عرضها لذا يجب إضافة سمة تشير إلى اسم الصورة المراد عرضها:

<image name="photo.jpg" />

هكذا يفهم الكمبيوتر أنه يجب أن يعرض الصورة الموجودة في الملف photo. jpg.

في حالة استعمال علامات مقترنة ، فإننا نضع السمات في علامة الفتح فقط وليس في علامة الإغلاق. على سبيل المثال ، يشير هذا الرمز إلى أن الاقتباس مأخوذ من نيل أرمسترونغ ومؤرخ في 21 يوليو 1969:

<citation author="Neil Armstrong" date="21/07/1969">
    It's a small step for man, but a giant leap for humanity.
</citation>

جميع العلامات التي رأيناها للتو وهمية. العلامات الحقيقية لها أسماء باللغة الإنجليزية (نعم!) ، وسوف نكتشفها لاحقًا في هذه الدورة

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


خذ محرر النص الخاص بنا (في حالتي VS Code). أدعوك إلى كتابة التعليمات البرمجية التالية أو نسخها ولصقها في محرر النصوص. يتوافق هذا الرمز مع قاعدة صفحة الويب في HTML5:


<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>Titre</title>
    </head>

    <body>
    
    </body>
</html>

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

انسخه في VS Code و سترى هذا

code html

ستلاحظ أن العلامات تفتح وتغلق بترتيب معين. على سبيل المثال ، تعد العلامة

<html> أول علامة يتم فتحها ، كما أنها العلامة الأخيرة التي أغلقناها (في نهاية الرمز ، مع <html/>). يجب إغلاق العلامات في الاتجاه المعاكس لافتتاحها. مثال :

<html><body></body></html>

هذه صحيحةلانه اذا فتحت علامة داخل علامة أخرى يجب إغلاقها داخلها ايضا.

<html><body></html></body>

غير صحيح ، والعلامات هنا تختلط.

أه ، يمكن أن يكون لدينا تفسيرات على جميع العلامات التي نسختها للتو في المحرر ، يا سيدي؟

بالطبع ، لقد طلب ذلك بشكل جيد.

لا تخف عندما ترى كل هذه العلامات دفعة واحدة ، سأشرح دورها!

DOCTYPE

    <!DOCTYPE html>

ويسمى السطر الأول doctype. إنه ضروري لأنه يشير إلى أنها بالفعل صفحة ويب HTML.

إنها ليست في الحقيقة علامة مثل الآخرين (إنها تبدأ بنقطة تعجب). قد تعتبر استثناءا بسيطا يؤكد القاعدة.

هذا السطر كان معقدا جدا في الإصدارات الأولى و كان من الصعب جدا حفظه مثلا في الإصدار XHTML 1.0 كان يكتب هكذا


    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

كجزء من HTML5 ، تقرر تبسيطه ، مما أسعد مشرفي المواقع. عندما ترى علامة نصية قصيرة () ، فهذا يعني أن الصفحة مكتوبة بلغة HTML5.

العلامة

    <html>
    <html/>

هذه هي العلامة الرئيسية للكود. ويشمل جميع محتويات صفحتك. كما ترون ، علامة الإغلاق في نهاية الكود!

رأس <HEAD> والجسم <BODY>

تتكون صفحة الويب من جزأين:

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

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

الترميز CHARSET

    <meta charset="utf-8" />

تشير هذه العلامة إلى الترميز المستخدم في ملف .html الخاص بك.

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

هناك العديد من تقنيات الترميز بأسماء غريبة وقائمة على اللغة: ISO-8859-1 ، و OEM 775 ، و Windows-1253 ... ومع ذلك ، ينبغي استخدام واحد فقط اليوم قدر الإمكان: UTF-8. تتيح طريقة الترميز هذه عرض جميع رموز جميع لغات كوكبنا دون أي مشكلة عملياً. لهذا السبب أشرت في هذه العلامة.

لا يكفي أن نقول أن الملف الخاص بك في UTF-8. من الضروري أيضًا تسجيل ملفك جيدًا في UTF-8. هذه هي الحالة لحسن الحظ الآن افتراضيًا في معظم برامج تحرير النصوص.

إذا تم عرض الحروف بشكل سيئ لاحقًا ، فهناك مشكلة في الترميز. تحقق من أن علامة التعريف تشير إلى UTF-8 وأنه تم حفظ الملف الخاص بك في UTF-8 (في الشريط السفلي من VSCode ، سترى تسمية UTF-8. انقر فوقها. يفتح نافذة منبثقة. انقر فوق حفظ مع الترميز. يمكنك الآن اختيار ترميز جديد لهذا الملف).

page web
العنوان الرئيسي للصفحة

    <title>

هذا هو عنوان صفحتك ، وربما العنصر الأكثر أهمية! يجب أن يكون لكل صفحة عنوان يصف ما تحتويه. يُنصح بإبقاء العنوان قصيرًا (أقل من 100 حرف بشكل عام).

لا يظهر العنوان في صفحتك ولكن في الجزء العلوي منه (غالبًا في علامة تبويب المتصفح). احفظ صفحة الويب الخاصة بك وافتحها في متصفحك. سترى أن العنوان يظهر في علامة التبويب ، كما هو موضح في الشكل التالي.

title page web

التعليقات


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

تعليق في HTML هو النص الذي يعمل ببساطة بمثابة مذكرة. لا يتم عرضه ، ولا يقرأه الكمبيوتر ، ولا يغير عرض الصفحة.

باختصار ، أنها غير صالحة لاي شيء؟

حسنا ، إذا!

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

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

إدراج تعليق

التعليق عبارة عن علامة HTML مع نموذج خاص جدًا:


    <!--هنا نضع التعليق  -->

يمكنك وضعه في المكان الذي تريده في الكود: هو لا يؤثر على صفحتك ، ولكن يمكنك استخدامه لمساعدتك في العثور على كود معين داخل الصفحة (خاصة إذا كانت طويلة).


<!DOCTYPE html>
<html>
    <head>
        <!-- رأس الصفحة -->
        <meta charset="utf-8" />
        <title>Titre</title>
    </head>

    <body>
        <!-- جسم  الصفحة -->
    </body>
</html>

يمكن لأي شخص أن يرى تعليقاتك ... وكل كود HTML الخاص بك!

دعنا ننتهي من ملاحظة مهمة: يمكن للجميع رؤية كود HTML لصفحتك بمجرد نشرها على الويب. فقط انقر بزر الماوس الأيمن على الصفحة وحدد "عرض الكود المصدر للصفحة" (قد يتغير العنوان اعتمادًا على متصفحك) ، كما هو موضح في الشكل التالي.

source code page web

يتم عرض الكود المصدر (كما على الشكل التالي).

source code page web

يمكنك اختبار هذا على أي موقع ، إنه يعمل! مضمون 100 ٪. يمكن تفسير ذلك بسهولة تامة: يجب أن يحصل المستعرض على كود HTML لمعرفة ما يجب عرضه. كود HTML لجميع المواقع هو كود عام (public).

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

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

الخلاصة


  • نحن نستخدم محرر النصوص (Sublime Text و Notepad ++ و jEdit و vim ...) لإنشاء ملف بلاحقةhtml (على سبيل المثال: test.html). ستكون هذه صفحة الويب الخاصة بنا.
  • يمكن فتح هذا الملف في متصفح الويب ببساطة عن طريق النقر المزدوج فوقه.
  • داخل الملف ، نكتب محتوى صفحتنا ، مصحوبة بعلامات HTML.
  • يمكن أن يكون للعلامات عدة أشكال:
    • <tag> : يتم فتحها وإغلاقها لتحديد المحتويات (بداية ونهاية العنوان ، على سبيل المثال).
    • <tag />: العلامات اليتيمة (ندرجها فقط في نسخة واحدة) ، فهي تسمح بإدراج عنصر في مكان محدد (على سبيل المثال ، صورة).
  • تكون العلامات أحيانًا مصحوبة بسمات لإعطاء مؤشرات إضافية (على سبيل المثال: <image name = "photo.jpg" />).
  • تتكون صفحة الويب من قسمين رئيسيين: رأس (<head>) وجسم (<body>).
  • يمكنك عرض الكود المصدري لأي صفحة ويب عن طريق النقر بزر الماوس الأيمن واختيار View Source Code من الصفحة.