كيفية إنشاء موقع باستخدام HTML و CSS
نشرت: 2023-07-13هل تريد أن تتعلم كيفية تصميم موقع على شبكة الإنترنت باستخدام HTML و CSS؟
إذا كانت الإجابة بنعم ، فقد أتيت إلى الموقع الصحيح ، إذن. سيعلمك هذا الدرس كيفية إنشاء موقع ويب باستخدام HTML و CSS والأساسيات في تطوير الويب. بالإضافة إلى ذلك ، ستتعلم كل ما تحتاجه لتحويل موقع الويب الخاص بك من صفحة فارغة إلى تحفة فنية تعمل بشكل كامل وملفتة للنظر.
لنبدأ بتقديم مراجعة موجزة لـ HTML و CSS.
- HTML: يحدد معيار لغة ترميز النص التشعبي (HTML) مكونات موقع الويب ومحتوياته وهيكله التنظيمي.
- CSS : عند إنشاء أوراق أنماط تحدد كيفية ظهور عناصر موقع الويب بشكل جمالي ، يستخدم مصممو الويب CSS (أوراق الأنماط المتتالية) ، وهي لغة كمبيوتر.
نظرًا لأن تصميم موقع الويب وشكله يعتمدان في النهاية على الكود الذي ينشئ الصفحة ، فلا يمكنك الحصول على أحدهما دون الآخر.
إستعد
لذلك ، حتى قبل استخدام HTML و CSS لإنشاء موقع ويب ، ستحتاج إلى خادم ويب (استضافة). يمكنك شراء خدمة استضافة مباشرة على خوادم العديد من شركات استضافة الويب.
ما عليك سوى كتابة "أفضل مزود استضافة ويب" في Google واختيار خيار بسعر معقول ، ويمكنك العثور على "WebSpaceKit" والتحقق من التقييمات من مختلف العملاء. يمكنك ربط اسم المجال والخادم معًا بعد أن يكون لديك كلاهما.
خطوات إنشاء موقع باستخدام HTML و CSS
فيما يلي عملية خطوة بخطوة ستوجهك خلال عملية إنشاء موقع ويب باستخدام HTML و CSS.
الخطوة الأولى: تعرف على أساسيات HTML
علامة HTML هي لبنة البناء الأساسية لمستند HTML.
هذا مثال على علامة:
هذه علامة <b> نتعامل معها الآن. سيتم كتابة أي نص بين علامة البداية (<b>) وعلامة النهاية (</b>) بالخط العريض. هذا النص ، في هذه الحالة ، هو Hello، World!
مع ذلك ، فيما يلي بعض الأمثلة على التصنيفات الإضافية:
| علامات HTML | الأوصاف |
| <p>… </p> | المحتوى بين هذه العلامات هو فقرة. |
| <i> ... </i> | سيظهر النص بين علامتي <i> .. </i> بخط مائل. |
| <u>… </u> | سيتم وضع خط تحت النص الموجود بين <u> .. </u>. |
| <h1>… </h1> | يتم تمييز الرأس الأساسي للصفحة بعلامة <h1>… </h1>. |
بدلاً من ذلك ، إذا كنت تريد توفير رابط لصفحة مختلفة ، مثل هذه:
هنا رابط لصفحة التسعير لدينا.
إليك مقتطف من التعليمات البرمجية التي ستتيح لك القيام بذلك:
الخطوة الثانية: تعلم بنية مستند HTML
هيكل مستند HTML الأساسي هو كما يلي:
الكود أعلاه هو HTML صالح ، لذا انسخه والصقه في ملف جديد واحفظه كملف index.html.
دعنا ننتقل إلى كل مكون من مكونات هذا الكود بمزيد من التفصيل:
| <! Dictype html> | التصريح الأول للوثيقة |
| <html lang = ”en”> | إعلان آخر يحدد صفحة HTML التالية سيتم كتابته باللغة الإنجليزية. |
| <head> | يشير إلى بداية قسم العنوان |
| <meta charset = ”utf-8 ″> | يحدد مجموعة الأحرف المستخدمة في إنشاء الوثيقة |
| <title> مرحبًا بكم! </ title> | سيظهر عنوان الصفحة في شريط عنوان المتصفح. |
| <الجسم> | يجب تضمين النص المخطط للظهور على الصفحة في هذا المجال ، |
| <h1> مرحبًا بكم! </ h1> | رأس الصفحة الأساسي |
| <p> صفحتي الأولى على الويب </ p> | نص عادي في الفقرة |
| </html> | علامة ختامية لمستند HTML |
يمكنك نسخ ملف index.html الجديد إلى الدليل الجذر لخادم الويب ومشاهدته في المستعرض. لا تتحمس كثيرًا - هذه الصفحة ستكون سيئة (انظر أدناه).
ملاحظة: العمل على ملف HTML باستخدام برنامج نصي بسيط مثل MS Word أمر غير سار. قم بتثبيت Sublime Text لتبسيط تحرير HTML. إصدارات Mac و PC مجانية.
الخطوة الثالثة: تعلم أساسيات محددات CSS
المحددات في CSS تشبه إلى حد كبير العلامات في HTML. يمكن تحديد السلوك المرئي لعنصر ما عبر محدد. ضع في اعتبارك هذه الحالة لمحدد CSS:
يحدد هذا الخيار حجم خط يبلغ 18 بكسل لجميع عناصر <p> داخل محتوى مستند HTML.
في حين أن هذه طريقة واحدة لاستخدام محددات CSS ، فإن الخيار الأكثر عملية هو إنشاء عدة "فئات" ثم تطبيقها على وجه التحديد على العلامات.
في CSS ، يبدو محدد الفئة كما يلي:
الخطوة 4: قم بإنشاء ورقة أنماط CSS
كل عنصر في مستند HTML له موقع ، ويؤثر ترتيبها على بنية صفحة الويب وشكلها. مستندات CSS ليست كذلك.
أوراق الأنماط هي ملفات CSS. تسرد ورقة أنماط CSS جميع تعريفات الفئات في نص HTML. عادة لا يكون ترتيب تعريف الفئة مهمًا للتصميمات الأساسية. تحدد كيفية إنشاء ورقة أنماط CSS كل فئة وتقييم تصميم موقع الويب.
إنه ممل ... أليس كذلك؟ سنقوم بتبسيط تصميم HTML و CSS من أجلك. بدلًا من البدء من الصفر ، سنفحص شيئًا حيًا.
Bootstrap يساعد هنا ...
الخطوة 5: تثبيت Bootstrap
Bootstrap عبارة عن مجموعة أدوات HTML / CSS مجانية. يعمل Bootstrap على تبسيط بنية مستندات HTML و CSS. يوفر إطارًا يعمل على تحسين الهيكل الأساسي لموقع الويب الخاص بك من أجل التطوير.
يتيح لك Bootstrap الوصول مباشرة إلى الجزء المثير. يتخطى خطوات HTML و CSS المملة لإنشاء موقع الويب.
هناك خياران:
- الخيار (أ) : دراسة Bootstrap عن طريق تنزيل الحزمة الأساسية من صفحة ويب Bootstrap وتطويرها فوقها.
- الاختيار (ب) : وفر الوقت عن طريق شراء حزمة Bootstrap Starter بتصميم جميل وموقع ويب نموذجي.
الخيار (ب) هو توصيتنا لأسباب عديدة:
بدء استخدام قالب يسهل فهم أساسيات مستند HTML. يتيح لك ذلك التركيز على الأشياء الممتعة مثل تخطيط المحتوى والتصميم.
بهذه الطريقة ، ستتعلم بشكل أسرع وتحصل على نتيجة أفضل.
الخطوة 6: حدد التصميم
قد يستخدم موقع الويب الذي يستخدم HTML و CSS أي قالب Bootstrap. يجب أن يعملوا بشكل مشابه. يستخدم هذا الدليل قالب Start Bootstrap. إنها توفر قوالب مجانية مصممة جيدًا ومحسّنة وخالية من المشاكل.
قد يؤدي تحديد الزر "تنزيل مجاني" على اليمين إلى حفظ الملف المضغوط على سطح المكتب. انقل محتويات الحزمة إلى الدليل الجذر لخادم الويب المحلي أو حساب استضافة الويب بعد فك ضغطها.
قم بتشغيل الموقع في متصفحك. هذا هو النموذج الافتراضي للقالب:
على الرغم من أنها جذابة بالفعل ، يمكنك تغييرها إذا كنت تعرف HTML و CSS.
الخطوة 7: تخصيص موقع الويب بتنسيق HTML و CSS
أولاً ، صمم الصفحة الرئيسية. سيعلمنا هذا كيفية تغيير الصور والكلمات ، وضبط كل شيء.
ناقشنا بإيجاز رؤوس مستندات HTML أعلاه. دعونا نحفر أعمق.
في Sublime Text ، يحتوي ملف index.html الخاص بموقع Bootstrap على قسم رأس مثل هذا (قمنا بحذف العناصر غير الأساسية من أجل الوضوح *):
بعض هذه التصريحات جديدة:
| <! -… -> | تعليقات HTML بين قوسين. لا يظهر في آخر صفحة. |
| <meta name = ”viewport” content = ”width = device-width، initial-scale = 1، shrink-to-fit = no”> | علامة إعلان Bootstrap. يحدد حجم إطار عرض صفحة الويب. |
| <link href = ”css / creative.min.css” rel = ”stylesheet”> | يقوم بتحميل ورقة أنماط CSS الخاصة بالقالب الإبداعي وورقة أنماط Bootstrap الافتراضية. |
دعونا نبسط تلك العبارة النهائية ، والتي تقوم بتحميل CSS. استبدل هذا الخط:
سيتم تحميل ورقة CSS غير المختصرة. تغيير هذا الإصدار هو مجرد أبسط.
قم بالتمرير إلى أسفل index.html. تسبق الأسطر التالية علامة نص الإغلاق:
يقومون بتحميل ملفات JavaScript لتصميم التفاعلات المرئية. تسمح JavaScript للرابط "حول" في القائمة العلوية بنقلك بسهولة إلى كتلة "حول" في نفس الصفحة. يمكننا تجاهل هذا الرمز في الوقت الحالي. دعنا ننتظر.
بدلاً من ذلك ، دعنا نضيف محتوى:
الخطوة 8: أدخل النص والصور
1. تغيير عنوان الصفحة: استبدل النص الموجود بين علامة العنوان في قسم الرأس بالنص الخاص بك:
2. تخصيص قسم البطل: الجزء البطل هو هذه الكتلة:
الاشياء الخاصة بنا ستكون رائعة ارجع إلى index.html وحدد موقع هذا القسم لتحرير هذه الكتلة:
يتحكم هذا الرمز في محتوى البطل.
بعض العلامات الأخرى ، التي نعرفها بالفعل ، بها العديد من فئات CSS. تعلم كل هذه المواضيع أبسط مما يبدو. يعد تعديل النصوص الافتراضية index.html أمرًا سهلاً. ابحث عن العلامة التي ترغب في تغييرها وتحديثها بين علامتي الفتح والختام.
يمكنك إضافة فقرات بحرية. يمكننا نسخ المحتوى على الموقع ونشره أدناه.
3. تخصيص كتل الصفحات الأخرى: يتكون ملف index.html من عدة أجزاء. كل من التنقل والخدمات والمحفظة وعبارة الحث على اتخاذ إجراء وحظر جهات الاتصال والتذييل في قالب.
تحتوي الأقسام على مادة مميزة ولكنها منظمة بشكل مشابه. يتشاركون علامات HTML ولكن لديهم فئات CSS منفصلة. انتقل من خلال كل كتلة واستكشف لتخصيص الصفحة.
يمكنك تغيير النصوص وإعادة ترتيب الأقسام (الأجزاء بين علامات <section>). على الرغم من أنه يجب عليك قص ولصق القطع يدويًا ، إلا أنها سهلة. ومع ذلك ، لم نقم بتغطية تغييرين بسيطين. بعد ذلك ، هذه:
الخطوة 9: ضبط الخطوط والألوان
في HTML و CSS ، يعد تغيير الألوان والخطوط أمرًا بسيطًا. أسهل طريقة هي تعيين نمط مضمّن لعنصر HTML. على سبيل المثال:
يستخدم HTML قيمًا سداسية عشرية لتمثيل الألوان. "# FF0000" يمثل اللون الأحمر.
من الأفضل تعيين الألوان باستخدام أوراق أنماط CSS. يمكننا إضافة هذا في ورقة أنماط CSS الخاصة بنا للحصول على نفس تأثير الكود أعلاه:
لتغيير لون أي نص على موقع الويب ، أولاً ، حدد العنصر الذي يصممه ، ثم انتقل إلى ورقة الأنماط واضبط أو أنشئ فئة المطابقة.
أولاً ، تحقق من كود CSS للفئات التي قد تقدم بالفعل أحجامًا أو ألوانًا بديلة قبل تغيير ألوان أو خطوط قالب Bootstrap. إذا كان متاحًا ، استخدم هؤلاء.
الخطوة 10: أضف المزيد من الصفحات
بعد تخصيص الصفحة الرئيسية ، ابدأ في إضافة الصفحات وربطها بها. يتيح لك HTML و CSS توصيل أي عدد من الصفحات الفرعية.
غالبًا ما تتطلب مواقع الويب صفحات مثل صفحة الاتصال والصفحة وصفحات سياسة الخصوصية والمحفظة والمزيد ...
شيء آخر سنفعله هو تضمين صورة هنا على الصفحة.
تبدو علامات صور HTML كما يلي:
الحق سهلة؟ مسار الصورة هو معلمة واحدة فقط. أضف صورتك إلى دليل الصور لتنظيمها.
بعد إنشاء الصفحات ، قم بتوصيلها من الصفحة الرئيسية (index.html). هذا الارتباط ينتمي إلى قائمة التنقل (أدناه <! - التنقل ->).
ابحث عن هذا الخط:
سنقوم بتعديله:
عنصر <a> HTML هو علامة ارتباط. يرتبط بأي صفحة ويب عن طريق تحديد عنوانها في وسيطة href. يقع نص الارتباط القابل للنقر بين عناصر <a> </a>.
سيظهر رابط "حول" الجديد الخاص بك عند إعادة تحميل الصفحة الرئيسية.
كله تمام! موقع الويب الخاص بك رائع الآن ...
إذا كنت تعتقد أن إكمال هذه المهمة سيكون صعبًا للغاية بالنسبة لك ، فإن فريقنا يقترح عليك إما تصميم موقع ويب باستخدام WordPress أو استخدام أحد مواقع الويب الجاهزة من منصات مثل MakeYourWP!
لمزيد من التحديثات ، ترقبوا موقع Learn Learners!
الأسئلة المتداولة حول كيفية إنشاء موقع ويب باستخدام HTML و CSS
ما هي بعض علامات HTML المهمة لموقع الويب؟
يحتوي HTML على أربع علامات أساسية:
<html> </html>
<head> </head>
<title> </title>
<body> </body>
كيف يمكن تنسيق CSS وتصميم صفحة ويب؟
CSS (أوراق الأنماط المتتالية) وتخطيطات صفحات الويب وتغيير الخط واللون والحجم والتباعد وتقسيم النص إلى أعمدة وإضافة الرسوم المتحركة والعناصر الجمالية الأخرى.
اشرح دور HTML و CSS في تطوير الويب؟
تعمل CSS ، أو Cascading Style Sheets ، على تجميل موقع الويب الخاص بك بالخطوط والألوان والتخطيطات. يقوم HTML ببناء إطار عمل موقع الويب الخاص بك ، بينما تعمل CSS على إضفاء الحيوية عليه.
كيف يجب أن يتعلم المبتدئين HTML و CSS؟
من الأفضل تعلم HTML و CSS من خلال الممارسة الخاضعة للإشراف. تعتبر المعسكرات التمهيدية الشخصية أو عبر الإنترنت أو الدورات التدريبية الموجهة من الخيارات. يشتمل الفيديو والمحاضرات والممارسة الموجهة على دورة. البعض لديه اختبارات بعد كل فصل.
ما الأداة المثالية لـ HTML؟
تعد Notepad ++ و Atom و Sublime Text و Adobe Dreamweaver CC وما إلى ذلك من أفضل برامج تحرير HTML المجانية.