إنشاء موقع إلكتروني بلغة HTML | الوحدة الرابعة | الدرس الأول
إنشاء موقع إلكتروني بلغة HTML هو عنوان الدرس الأول من الوحدة الثالثة التي تحمل اسم “البرمجة باستخدام لغة ترميز النص التشعبي” في الفصل الدراسي الأول من مقرر “تقنية رقمية 1 – 1”.
ستتعرف في هذا الموضوع على وسوم HTML الأساسية، وعلى كيفية استخدام محرر فيجوال ستوديو كود (Visual Studio Code)، وكتابة التعليمات البرمجية بلغة ترميز النص التشعبي (HTML) لإنشاء موقع إلكتروني.
لذا قم بقراءة نواتج التعلُّم بعناية، ثم أعد قراءتها بعد انتهائك من دراسة الموضوع وتأكَّد من تحصيل كافة محتوياتها.
نواتج التعلُّم
- معرفة ماهية لغة ترميز النص التشعبي HTML.
- التعرُّف على البنية الأساسية للصفحة الإلكترونية في HTML.
- كيفية استخدام محرر فيجوال ستوديو كود لإنشاء صفحة إلكترونية في HTML.
- استخدام وسوم HTML لإضافة عنوان الصفحة الإلكترونية.
- استخدام وسوم HTML لإضافة فقرات وعناوين في الصفحة.
هيا لنبدأ!
مقدمة – إنشاء موقع إلكتروني بلغة HTML
عرفت سابقًا البرمجة وأنواعها، وطبّقت على عدد من لغات البرمجة بالكائنات مثل سكراتش.
هناك لغات برمجة أخرى لا تتم البرمجة فيها من خلال السحب والإفلات للبنات البرمجية، بل من خلال كتابة التعليمات البرمجية. وستتعرَّف على أحدها في هذه الوحدة.
في هذه الوحدة ستكتب التعليمات البرمجية بلغة ترميز النص التشعبي (HTML)، والمخصصة لتصميم صفحات والمواقع الإلكترونية.
لمعرفة المزيد من المعلومات عن لغة HTML، قم بالاطّلاع على الرابط التالي:
لغة تأشير النص الترابطي – ويكيبيديا
الصفحة الإلكترونية
الصفحة الإلكترونية هي ملف منظَّم يحتوي على نصوص وصور ووسائط متعددة أخرى، وكذلك الارتباطات التشعبية، تُعرض جميعها باستخدام متصفح المواقع الإلكترونية.
الموقع الإلكتروني
يتكوَّن الموقع الإلكتروني من مجموعة من الصفحات المترابطة التي يمكِن العثور عليها في نفس المجال (domain).
يحتوي الموقع الإلكتروني عادةً على صفحة بداية تسمى الصفحة الرئيسة التي يمكِن للزائر من خلالها الانتقال إلى جميع الصفحات الأخرى.
يمكِن أن تحتوي الصفحة الإلكترونية على روابط لصفحات إلكترونية في نفس الموقع أو إلى صفحات في مواقع أخرى.
يحتوي المظهر الخاص بالموقع الإلكتروني على 3 أجزاء مختلفة:
- العنوان (Header): يتضمن ترويسة رسومية وشريط التنقُّل.
- محتوى الصفحة (Content): يشمل محتوى النص والصور وما إلى ذلك.
- التذييل (Footer): يحتوي على روابط مفيدة.
لمعرفة المزيد من المعلومات عن ماهية الموقع الإلكتروني، قم بالاطّلاع على الرابط التالي:
لغة ترميز النص التشعبي HTML
لغة ترميز النص التشعبي (HTML) هي لغة برمجة يتم استخدامها لوصف مكوِّنات صفحات إلكترونية لبرامج التصفُّح من خلال استخدام مجموعة وسوم وتعليمات برمجية.
يُمكِن من خلال هذه الوسوم والتعليمات البرمجية تحديد طريقة عرض النصوص والصور والروابط وغير ذلك من مكوِّنات الصفحة الإلكترونية بشكلٍ صحيح في متصفح المواقع الإلكترونية.
سلبيات HTML
- يقتصر استخدامها على الصفحات الإلكترونية غير التفاعلية.
- يجب كتابة مقطع برمجي طويل لإنشاء صفحة إلكترونية يسيرة.
- يصعُب صيانة وتصحيح مقطع برمجي بتنسيق HTML.
إيجابيات HTML
- شائعة الاستخدام.
- مدعومة من معظم المتصفحات.
- يمكِن تعلمها واستخدامها بسهولة.
النص التشعبي (Hypertext)
النص التشعبي هو نص يتم عرضه على شاشة جهاز الحاسب أو أي جهاز إلكتروني آخر يحتوي على مرجعيات (ارتباطات تشعبية) لنصوص أخرى يمكِن للقارئ الوصول إليها بصورة فورية.
العلامات (Markup)
يشير مصطلح العلامات إلى سلسلة الأحرف أو الرموز الأخرى التي يمكِنك إدراجها في مواقع محددة داخل نص أو داخل ملف معالجة نصوص. يتم هذا الأمر لتحديد التنسيقات الخاصة بمظهر الملف (غامق، مائل، مُسطر…) عند طباعته أو عرضه أو لوصف البنية المنطقية للمستند.
لمحة تاريخية
اقترح الفيزيائي تيم بيرنرز لي الذي عمل في المنظمة الأوروبية للأبحاث النووية (CERN) عام 1989 نظامًا على الشبكة العنكبوتية قائمًا على مبدأ “طفو السوائل”، وهكذا طور صفات HTML وكتب برمجيات التصفُّح والخادم في أواخر التسعينات.
بنية الصفحة الإلكترونية
يُطلق اسم الوسوم (Tags) على أحد أجزاء المقطع البرمجي المكتوب بلغة HTML. في العادة تأتي وسوم HTMLبصورة أزواج مثل وسم الفتح <p> ووسم الإغلاق </p>، حيث يوقف الرمز “/” الموجود في الوسم الثاني تشغيل الأمر.
يجب أن تتبع الصفحة الإلكترونية المصممة بتنسيق HTML بنية معينة لكي يتم ترجمتها بصورة صحيحة من قِبل المتصفح.
فالمقطع البرمجي المصدري للصفحة ونص الصفحة الإلكترونية يجب وضعه بين وسمي <html> و</html>.
بإمكانك مراجعة محتوى موضوع “إنشاء موقع إلكتروني بلغة HTML” من بدايته وحتى نهاية هذا القسم، من خلال الرابط التالي:
محرر HTML
محرر HTML هو برنامج يتم استخدامه لكتابة المقاطع البرمجية بلغة HTML. على الرغم من إمكانية التحكُّم في برمجة HTML في أي صفحة إلكترونية باستخدام أي محرر نصوص، إلا أن برامج تحرير HTML المتخصصة توفر إمكانات تحرير وأدوات برمجة إضافية.
على سبيل المثال، لا تتعامل محررات HTML مع تعليمات HTML البرمجية فقط؛ بل تمتد وظائفها لتشمل تقنيات أخرى خاصة بإنشاء صفحات إلكترونية مثل صفحات التنسيق النمطية (CSS) وجافا سكريبت (JavaScript)، من هذه المحررات على سبيل المثال فيجوال ستوديو كود (Visual Studio Code).
افتح فيجوال ستوديو كود لبدء الترميز.
لفتح محرر فيجوال ستوديو كود:
- اضغط زر البحث.
- في شريط البحث اكتب Visual Studio Code (فيجوال ستوديو كود).
- اضغط على Visual Studio Code (فيجوال ستوديو كود) لفتح البرنامج.
لتتعرَّف كيف يمكِنك فتح مجلد أنشأته على جهاز حاسبك وداخل هذا المجلد توجد مجلدات فرعية، على سبيل المثال مجلد باسم “images” حيث يتم حفظ الصور التي ستستخدمها ومجلد باسم “Pages” حيث سيتم حفظ الصفحات الإلكترونية التي ستقوم بإنشائها.
لاحظ أن
يفضل أن يكون اسم المجلد الرئيس والمجلدات الفرعية باللغة الإنجليزية، تماشيًا مع اللغة المُستخدَمة في البرمجة.
لفتح المجلد:
- من علامة التبويب File (ملف)، اضغط على Open Folder (فتح مجلد).
- من نافذة فتح المجلد اختر المجلد الذي تريده.
- ثم اضغط على Select Folder (اختر المجلد).
- سيظهر مجلد العمل الخاص بك والمجلدات الفرعية في الشريط الجانبي.
قبل البدء في إنشاء مستند HTML، يجب عليك إنشاء ملف HTML.
شاهد كيف يمكِن القيام بذلك في Visual Studio Code.
إنشاء ملف جديد:
- من قسم Explorer (المستكشف)، وفي المجلد الذي تم فتحه.
- اختر New File (ملف جديد).
- اكتب الاسم بالامتداد html.
- اضغط المفتاح “Shift + 1” واختار الخيار الأول.
- اضبط مقطع برمجي HTML ليطابق المقطع البرمجي الموضح أدناه.
نصيحة ذكية
لا تنسَ أن تحفظ مستندك بعد كل عملية تعديل تقوم بها. يمكِنك أيضًا استخدام اختصارات لوحة المفاتيح “Ctrl + S”.
لمعرفة المزيد من المعلومات عن فيجوال ستوديو كود، قم بالاطّلاع على الرابط التالي:
وسوم HTML الأساسية
هناك قسمان بين وسمي <HTML> و</HTML> في الصفحة الإلكترونية، أولهما هو قسم ترويسة المستند، والآخر هو قسم المحتوى.
اكتب المقطع البرمجي السابق في فيجوال ستوديو كود ثم شاهد النتيجة.
لعرض الصفحة الإلكترونية ستفتح ملف HTML الذي أنشأته باستخدام المتصفح.
لفتح ملف HTML في المتصفح:
- افتح المجلد الذي أنشأته مسبقًا على جهاز الحاسب الخاص بك والمحتوى على ملف html.
- اضغط ضغطًا مزدوجًا على الملف.
- سيفتح الملف وستظهر نتيجة تنفيذه.
هناك طريقة أخرى لفتح الصفحة الإلكترونية من خلال فيجوال ستوديو كود.
لفتح ملف HTML في المتصفح:
- من قسم Explorer (المستكشف) في Visual Studio Code (فيجوال ستوديو كود) اضغط بزر الفأرة الأيمن على ملف html.
- اضغط على Open in Default Browser (فتح في المتصفح الافتراضي).
- سيفتح الملف وستظهر نتيجة تنفيذه.
بإمكانك مراجعة محتوى موضوع “إنشاء موقع إلكتروني بلغة HTML” بدايةً من عنوان “محرر HTML” وحتى نهاية هذا القسم، من خلال الرابط التالي:
العناوين
يتم تعريف عناوين HTML بالوسوم <h1> إلى <h6>. إن الوسم <h1> هو أعلى مستوى في القسم والوسم <h6> هو أدناه. شاهد المثال التالي:
نصيحة ذكية
استخدم وسم <h1> للإشارة إلى العنوان الأكثر أهمية الذي يكون عادةً أعلى الصفحة.
إضافة فقرة
ستستخدم ما تعلمته حول البرمجة بلغة HTML لإنشاء موقع إلكتروني مشجعي فريق كرة القدم. ستؤدي العمل خطوة بخطوة، وستبدأ أولًا بإضافة العنوان والفقرات في المستند.
المسافة الفارغة
يتم دمج المسافات الفارغة معًا في HTML لتظهر كمسافة فارغة واحدة. يستفيد مطورو الصفحات الإلكترونية من المساحة الفارغة لتسهيل قراءة النص.
لا يؤثر هذا على مظهر الفقرة بأي حال من الأحوال.
على سبيل المثال، لاحظ الفقرة التالية:
بإمكانك مراجعة محتوى موضوع “إنشاء موقع إلكتروني بلغة HTML” بدايةً من عنوان “العناوين” وحتى نهاية الموضوع، من خلال الرابط التالي:
اختبر تحصيلك لمحتوى الموضوع من خلال الرابط التالي:
الواجب الإلكتروني
إلى هنا يكون قد انتهى موضوع “إنشاء موقع إلكتروني بلغة HTML“، لا تنسوا مراجعة نواتج التعلُّم أعلى المقال، وانتظرونا في الموضوع القادم!