تصميم صفحة ويب بلغة html جاهزة

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

ما يجب أن تتعلمه قبل إنشاء الصفحة

قبل تصميم صفحة ويب بلغة html جاهزة بالنسبة للمبتدئين، يعد الإلمام بكل محتويات الويندوز أمرًا مهمًا للغاية، لأن المعرفة العملية بـ ويندوز تجعل من السهل تعلم استخدام لغة HTML وJavaScript، لهذا السبب يجب أن تكون على دراية بما يلي:

• تعرف على كيفية عمل مجلد، والتخزين الخاص به وكيفية استخدام المستعرض ومستكشف ويندوز والمعرفة الأساسية ببرنامج الوورد.
• تأكد من أنك تعرف كيفية القيام بما يلي:

1. إن تنشئ مستند على القرص الصلب الخاص بك.
2. إنشاء مجلد داخل مجلد آخر.
3. كيفية نسخ جزءًا من مستند وضعه في مستند آخر.

• تحتاج إلى التدرب على استخدام وظائف القص والنسخ واللصق في برامج Word العادية، بمجرد الانتهاء، يمكنك تعلم HTML وJavaScript.

إذا وجدت صعوبة في تنفيذ هذه المهام، فاستغرق بضع ساعات لتعلم أساسيات ويندوز أو اطلب من صديق أو زميل على جهاز الكمبيوتر لمساعدتك في تعلم كيفية استخدام Windows Explorer.

كما يمكنك الآن التعرف على كيفية عمل تطبيق اندرويد من أجل الربح من خلاله بدون الحاجة إلى تعلم البرمجة من خلال مقال: عمل تطبيق اندرويد والربح منه بدون تعلم البرمجة

ماهي لغة HTML

• هي لغة برمجة، أو HTML باختصار، هي اللغة المسؤولة عن تصميم صفحة ويب بلغة html جاهزة على سبيل المثال، يمكنك تحديد العناوين والفقرات والنصوص والصور في الويب بتنسيق HTML وسنعرض أكثر عن هذه اللغة ووظائفها في إنشاء المواقع، حيث أنه يمكننا إنشاء مواقع ويب معقدة للغاية باستخدام HTML وعدة لغات أخرى فقط ومع ذلك، ستكون هذه المواقع ثابتة، مما يعني أن زوار الموقع يمكنهم تصفح الصفحات، لكن لا يمكنهم أن يضيفوا أي تفاعل معها (ما لم ينقروا على الروابط الموجودة على الصفحات).
• لكن لبرمجة موقع إلكتروني متاح ويمكن التفاعل معه، سنحتاج إلى لغات برمجة أخرى، مثل JavaScript أو Dart باستخدامهم.
• يمكننا تطوير العديد من التطبيقات كاملة عبر الإنترنت، على سبيل المثال، التطبيقات المهتمة بتنفيذ حسابات متنوعة وتطبيقات ألعاب وتطبيقات دردشة وما إلى ذلك، ويمكن تشغيل هذه التطبيقات بالفعل في متصفحك.
• هناك لغات وتقنيات برمجية أخرى، مثل PHP وRuby و NET، والتي تتيح لك  إنشاء تطبيقات ويب يمكن التفاعل معها، ولكن هذه التطبيقات تعمل داخل موفر مستضاف (على الخادم).

ما تحتاجه لإنشاء صفحة ويب

نحتاج إلى شيئين في منتهي الأهمية وذلك من أجل الدخول إلى عالم برمجة وإنشاء صفح الويب، وكل هذا من أجل تصميم صفحة ويب بلغة html جاهزة، حيث تحتاج إلى:

المحرر

• يُستخدم فقط في محرر نص عادي (مثل Notepad في ويندوز) لكن من الأفضل استخدام محرر متميز، مما يجعل عملنا أسهل بكثير للقيام بذلك.
• أوصي باستخدام محرر نصوص حديث مخصص لتحرير HTMLK ومحرر الوسائط، ومحرر النصوص الذي أوصي به حاليًا هو Brackets (متاح مجانًا من Adobe).
• لكن يمكنك استخدام أي محرر تريده، يوجد  محرر نصوص عالي الجودة يمكنك استخدامه، وهو Atom، ومحرر نصوص آخر، على الرغم من أنه قديم بعض الشيء، إلا أنه عبارة عن مفكرة جيدة ++.

المتصفح

• يجب أن يكون موقعنا الإلكتروني متاحًا في جميع المتصفحات الرئيسية ومع ذلك، أوصي باستخدام متصفح Chrome للتطوير والبرمجة، حيث أنه يوفر Chrome أدوات مفيدة جدًا لمطوري الويب، والتي يتم استخدامها بشكل متكرر، محرر الأقواس متوافق مع Chrome، لذلك سيتم عرض التغييرات على النص مباشرة في Chrome (من خلال الميزة التي تسمى “Live Reload”).

خطوات تصميم صفحة ويب

لنبدأ الآن تصميم صفحة ويب بلغة html جاهزة لموقع الويب كل ما عليك أن تقوم بالخطوات الخاصة بإنشاء الموقع وهي كالتالي:

• قم بإنشاء مجلد للمشروع، ولا بد أن تقوم بتسمية مجلد الحافظة.
• قم بفتح برنامج الدعم.
• من القائمة الخاصة بكلمة “ملف”، حدد الأمر فتح مجلد لتحديد وفتح المجلد الذي تم عمله للتو.
• انقر بزر الماوس الأيمن على اسم المجلد وحدد “ملف جديد” لإنشاء ملف جديد، وقم بتسميته html.
• لديك الآن ملف نصي فارغ يسمى html.

لماذا يسمى بـ index.html

• في الواقع ملف html له معنى خاص في عملية تصميم صفحة ويب لذلك عندما نطلب من المتصفح عنوان موقع الويب (مثل http://code.makery.ch)، سيظهر ملف index.html تلقائيًا أولاً، وستزداد بهذه الطريقة عملية ظهوره، كما لو كان علينا ذلك أدخل العنوان http://code.makery.ch/index.html. بالنسبة لنا، سيكون index.html هو الصفحة الرئيسية.

السمات الخاصة بلغة Html

• تحدد السمات المعلومات الخاصة لعنصر HTML ولها دور في تصميم صفحة ويب بلغة html جاهزة، وتوجد هذه السمات في العلامة المفتوحة لعنصر HTML ولها دائمًا اسم وقيمة.
• كمثال على السمات، دعنا نلقي نظرة على عنصر ارتباط HTML ربما يكون هذا أحد أهم العناصر، وهذا هو المثال (يشتمل ارتباط عنصر <a> على سمة) اختصار لأصل النص التشعبي، والتي تحتوي في هذا المثال على القيمة لأنه كما قلنا إنها تحتوي على اسم وقيمة.

كما يمكنك التعرف على طريقة تحديث ويندوز 10 بواسطة الإعدادات أو أداة إنشاء الوسائط عبر مقال: طريقة تحديث ويندوز 10 بواسطة الإعدادات أو أداة إنشاء الوسائط

معلومات تخص لغة Html

تعتبر هذه اللغة هي اللغة المستخدمة في تصميم صفحة ويب بلغة html جاهزة، ومن المعلومات الخاصة بها أو السمات والتي يجب أن تكون على دراية بها ومعرفة عن ماذا تعبر:

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

يرشح لك موقع زيادة التعرف على خطوات عمل بحث جامعي قصير بالمراجع: كيفية عمل البحث الجامعي بالمراجع وقصير بالخطوات

وأخيرا بإمكانك الآن تصميم الصفحة التي تريدها بعد معرفتك أغلب ما يخص لغة HTML التي تستخدم في تصميم صفحة ويب بلغة html جاهزة.