إذا كنت مبتدء في تصميم مواقع الويب يمكنك من خلال موقع الإستضافة تعلم تصميم المواقع خطوة بخطوة وتحسين مهارتك بها لتتمكن من العلم بشكل مستقل في تصميم المواقع ، يوفر موقع إستضافة البرامج التعليمية المخصصة لكافة إحتياجات تصميم مواقع الويب .
ذلك البرنامج التعليمي يمكنك التعرف علي :
أساسيات HTML
التعرف علي طرق بناء موقع الويب
التعرف علي كيفية التخطيط الجيد لصفحات الـHTML
إضافة النصوص والصور
التحكم بالعناويين والتنسيقات النصية
طرق إستخدام الجداول
نتمي في نهاية ذلك البرنامج التعليمي إن يكون لديك الدارية الكاملة لإنشاء المواقع الإلكترونية والتمكن من إنشاء صفحتك الأولي علي الويب .
ماذا يعني HTML؟
إن لغة HTML تعد من أهم لغات البرمجة والتي يهتم بها كافة المصممين والمطورين علي الويب حيث ان معظم مواقع الويب تتم إستخدامها لإنشاء الصفحات ويتم التعاون مع CSS لتحويل تلك الصفحات إلي صفحات جذابة تلفت أنظار زوار موقعك ، يمكنك متابعة البرامجنا التعليمية الأخري للتعرف علي كيفية إستخدام CSS .
إن HTML يرمز إلي Hyper Text Markup Language و تم إنشاءها لأول مرة في عام 1989 علي يد Tim Berners-Lee و Robert Cailliau وآخرون ، كلمة Hyper Text ( النص الشعبي ) يدل علي أن المستندات تتضمن علي الروابط تتيح للقارئين بإمكانية الإنتقال إلي كافة الأماكن داخل المستند أو الإنتقال إلي مستند أخر ، Markup Language ( لغة الترميز ) والتي تساهم في معالجة النصوص وتقديمها حيث أنها تعد الطريقة التي تتعامل بها أجهزة الكمبيوتر مع بعضها لذلك يعمل HTML علي إستخدام العلامات والسمات .
العلامات والسمات Tags and Attributes :
إن العلامات والسمات تعد أساس الـHTML وتعمل العلامات والسمات سوياً ولكن لكل منهما وظائفه المنفردة .
Tags (العلامات )
تساهم في الترميز لبداية عناصر الـHTML وتكون محاطة باقواس مثل : <h1>
يتم فتح الأقواس في البداية ثم إغلاقها عند الإنتهاء حتي تعمل بشكل صحيح هكذا : <h1> وإغلاقها </ h1>
Attributes ( السمات )
تتضمن السمات علي المعلومات الإضافية يمكنك إضافتها داخل الأقواس هكذا : <img src="mydog.jpg" alt="A photo of my dog.">
(src) >> هي مصدر الصورة ، (alt) >> النص البديل ، <img> سمات العلامة
وبذلك لابد أن تتدرك بأن العلامات والسمات لابد من فتحها باقواس وإغلاقها هكذا <tag> ليتم إغلاقها هكذا </tag> وإذا تم إضافة العديد من العلامات لابد من إغلاق العلامات بالترتيب هكذا
<strong><em>This is really Wonderful!</em></strong>
محرر HTML
الأن بعد أن تعرفت علي بعض المعلومات حول HTML يأتي الأن دور تعلم الخطوات الأولي في بناء موقع الويب ولكن في البداية ولكن نتمكن من ذلك لابد أن نمتلك محرر HTML وهناك العديد من البرامج التي يمكنك إستخدامها وسوف نوضح لكم أهم تلك البرامج التي يمكنك الإستعانة بها
Sublime Text 3 :
يعد ذلك البرنامج من البرامج المميزة حيث انه برنامج مجاني بالكامل ومتوافق مع كافة أجهزة الكمبيوتر ، يمكنك تحرير الأكواد بسهولة فالبرنامج يتميز بالمرونة ، يحتوي علي مخططات الألوان متعددة وممتعة ، يمتلك البرنامج علي بعض المساوئ حيث أنها لا تحتوي علي شريط أدوات أو لوحة معلومات ، لا يمكنك طباعة المستندات أو التعليمات البرمجية .
Notepad (المفكرة ) ++
ذلك البرنامج هو برنامج صغير الحجم ويعمل علي تنفيذ الوظائف التي تتم كتابتها ، يحتوي البرنامج علي مجموعة من الخيارات التي تمكنك من إتمام الوظائف الموسعة ، يعمل علي الإكمال التلقائي، البرنامج لا يدعم كافة أنظمة التشغيل لأجهزة الكمبيوتر مثل Mac .
Komodo Edit كومودو :
هو برنامج مفتوح المصدر ويعد من برامج تحرير أكواد HTML المبسطة كما أنه برنامج مجاني ويمتلك واجهة بسيطة سهلة التعامل معها ويدعم كافة أنظمة تشغيل أجهزة الكمبيوتر ويحتوي علي دعم للغة ولكنه لا يتضمن الإكمال التلقائي ومن الصعب التوجه إلي الإعدادت المرئية للتغير
- يجب أن تتجنب إستخدام Microsoft Word عند كتابة التعليمات البرمجية لـHTML ، فقط قم بإستعمال برامج محرر HTML
- تأكد قبل البدء من تحميل عدد من المتصفحات علي جهازك الكمبيوتر ومن أفضل المتصفحات التي ينصح بتحميلها ( متصفح كروم ، متصفح فايرفوكس ) .
الخطوة الأولي لإنشاء صفحة ويب HTML :
فتح برنامج محرر HTML الذي قمنا بتحميله وبالتأكيد فإن البرنامج لايحتوي علي إي أكواد بل أن الصفحة تكون بيضاء تماماً خالية من كافة التعليمات البرمجية .
- التخطيط الجيد لصفحتك بإستخدام تلك العلامات والتي تعد البناء الأساسي لصفحات HTML :
كافة تلك العلامات يتم كتابتها كما هو موضح ( أسفل بعضها البعض ) مخصصة للجزء العلوي لكل صفحةHTML يتم إنشائها .
أولاً : <! DOCTYPE html> --- إن تلك العلامة تساهم في تحديد اللغة التي سيتم الكتابة بها علي الصفحات وفي تلك الحالة سوف نقوم بالكتابة بلغة HTML 5.
ثانياُ : <html> --- رمز html يرمز بأننا سوف نقوم بكتابة رموز HTML .
ثالثا: <head> --- نعمل هنا علي كتابة كافة البيانات الوصفية للصفحة وتكون في الغالب تلك البيانات هي خاصة بمحركات البحث
رابعاً : <body> --- ومن هنا بنبدء بكتابة محتويات الصفحة .
سنبدء الأن بشرح كل علامة بالتفصيل :
في البداية نقوم بحفظ كل عمل نقوم به في الملف ويتم الحفظ بعد كل خطوة يتم إنشائها
من بداية العلامة <head> نبدء بإنشاء الصفحات ، تتضمن تلك العلامة بعض العلامات الأخري مثل :
<title> --- <عنوان> وذلك هو المكان المخصص لكتابة إسم الصفحة التي نقوم بإنشاءها والتي سوف تظهر في الخانة العلوية للصفحة أو داخل علامة التبويب
<meta> --- هنا يتم كتابة كافة البيانات والمعلومات حول الصفحة مثل، ترميز الأحرف ثم الوصف ثم المحتوي الخاص بالصفحة ثم المؤلف
|
<head> <title>My First Webpage</title> <meta charset="UTF-8"> <meta name="description" content="This field contains information about your page. It is usually around two sentences long.">. <meta name="author" content="Conor Sheils"> </header> |
إضافة محتوى علامة <body>:
قد ذكرنا أن علامة <body> هو المكان المخصص لكتابة المحتويات للصفحة قد تتضمن في ذلك " النصوص ، الصور ، الجداول ، الأشكال " .
إنشاء العناويين :
العناويين داخل صفحة الويب يتم إنشاءها عبر العناصر التالية :
<H1>
<H2>
<H3>
<H4>
<H5>
<H6>
حيث أن <H1> والتي تستخدم في العناويين الأكثر أهمية كذلك <H2> أما باقي العناووين يتم إستخدامها في العناويين الأخري الفرعية ، يجب الإهتمام بالعناويين بشكل خاص حيث أن محركات البحث تعمل علي إستخدام تلك العناويين كمعلومات تساعد في التعرف علي المعلومات الأكثر أهمية بالصفحة .
هنا يمكنك كتابة أول سطر بإستخدام برنامج محرر أكواد HTML ويتم مثلاً كتابة : <h1> مرحبًا بكم أصدقائي </ h1>
أي عمل نقوم به الأن يتم حفظه داخل ملف "index.html"ويحفظ داخل مجلد علي جهازك الكمبيوتر
توجه الأن إلي صفحة الويب الخاصة بك علي المتصفح الإفتراضي لتري أول إنشاءتك عليها .
إضافة النصوص داخل HTML
من أجل البدء في كتابة النصوص فإننا سوف نحتاج إلي التعرف علي بعض العلامات الأخري مثل : <p> والتي تساهم في إنشاء فقرات جديدة ويتم إدخال كافة النصوص العادي بها ، يمكنك التعرف علي كافة الناصر الهامة التي لا غني عنها عند إستعمال HTML .
| الغرض | المعني | العناصر | |
| تميز المعلومات الهامة | الخط العريض | <b> | |
| تميز النص الأساسي بالخط العريض | قوي | <strong> | |
| لجعل النصوص مائلة | مائل | <i> | |
| تستخدم للتعلقات علي الصور | نص مشدد | <em> | |
| تستخدم لتمييز خلفية النص | نص محدد | <mark> | |
| تساعد في تقليل حجم النص | نص صغير | <small> | |
| لإضافة خط أفقي مع الخط | خط مع النص | <strike> | |
| يستخدم للروابط و إضاءات النص | نص مسطر | <u> | |
|
يستخدم لإظهار نص مدرج |
نص مدرج |
<ins> |
|
|
تستحدم لإظهار الأسلوب المطبعي |
نص منخفض |
<sub> |
|
|
نمط عرض تقديمي |
نص مرتفع للغاية |
<sup> |
مع كل تلك العناصر لابد من فتحها ثم كتابة المعاني والنصوص المراد إدخالها ومن ثم إغلاقها مرة أخري .
مثلاً يتم تجريب أول العناصر:
<p> مرحبًا بكم داخل<em> الموقع الإلكتروني الخاص بي </em> الجديد. سيكون هذا الموقع <strong>جديدًا <strong> على الويب. </ p>
وبعد الإنتهاء يتم الضغط علي حفظ ثم التوجه إلي صفحتم لمشاهدة أخر نتائج التي توصلت إليها .
إضافة الروابط داخل HTML
المواقع الإلكترونية تحتوي علي كجموعة هائلة من الروابط فكلما تجولت داخل المواقع الإلكترونية فإنك تقوم بالضغط علي روابط متعددة وهذه الروابط هي التي تنقلك من صفحة إلي أخري
الروابط يتم إدخالها عبر علامة <a> ويتم إستخدامه هكذا :
<a href="https://astdafa.com/how-to-start-a-blog/">Your Link Text Here </a>
تنقسم تلك العلامة إلي جزئين فالجزء الأول يحتوي علي اللينك الخاص بالصفحة المراد الوصول إليها والقسم الأخر هو النص الخاص بالصفحة التي يراد الزائر التواجه إليها ، سيتم إضافة كافة الروابط الخاصة بموقع الويب الخاص بك بهذا الشكل
<a href=”mylinkedpage.html”>Linktle Here</a>.
إنشاء مرساة العلامة :
من الصفحة التي تم إنشاءها من index.html يتم نسخها ولصقها داخل صفحة جديدة من محرر أكواد HTML ثم يتم حفظ الصفحة الجديدة كـ"page2.html" ويتم حفظها أيضاً داخل المجلد مثل صفحة index.html.
في الصفحة الثانية يمكنك إضافة أي من الروابط كتجربة مثل رابط ينقلنا إلي متصفح وليكن متصفح جوجل كروم :
<a href="http://www.google.com"> Google </a>
ثم التوجه مرة أخري إلي الصفحة الرئيسية في محرر الأكواد وهي index.html وكتابة سطر جديد من التعليمات البرمجية
<a href="*folder(s)*/page2.html"> Page2 </a>
ولابد من التاكد من أن المسار الخاص بالصفحة الثانية يتم كتابته بشكل سليم ثم الضغط علي حفظ والتوجخ إلي المتصفح والدخول إلي موقعك وسيظهر لك رابط يمكنك من الإنتقال إلي الصفحة الثانية بموقعك وداخل الصفحة الثانية يمكنك مشاهدة رابط أخر يمكنك من الإنتقال إلي متصفح جوجل .
إضافة الصور في HTML :
يمكنك إضافة العديد من الصور داخل موقعك الإلكتروني عبر إستخدام علامة <img> وتتضمن تلك العلامة علي كافة التفاصيل حول الصور مثل العرض والإرتفاع ومصدر الصورة .
داخل تلك العلامة تحديد كافة الأنماط الخاصة بالصور ويتم إستخدام أنواع الملفات للصور مثل .jpg ، png ، gif ، وإستخدام النص البديل ويعد ذلك النص مهم جداً لترتيب موقعك علي مواع البحث وهام للزوار ضعافي البصر ، يمكنك إدخال الصور هكذا :
<img src = "yourimage.jpg" alt = "وصف الصورة" height = "X" width = "X">
إنشاء صورة مع نص بديل :
يمكنك إضافة نص بديل مع الصور ليتم التجربة أمامكم ولتشاهد بنفسك كيفية إدخال الصور .
يتم حفظ الصورة داخل المجلد الذي تم حفظ به index.html و page2.html ونقوم بتسمة تلك الصورة "testpic.jpg."
داخل محررHTML يتم كتابة الكود الخاص بإدخال الصور
<img src = "testpic.jpg" alt = " صورة اختبار" height = "40" width = "40">
اضغط على حفظ ثم التوجه إلي المتصفح ومعاينة صفحة index.html .
إنشاء قوائم HTML :
تتضمن تصمميات الويب علي ثلاث أنواع من قوائم الويب يمكنك أولاً التعرف عليها ثم تحديد أي من الأنواع التي تفضل إضافتها علي موقع الويب الخاص بك .
القائمة المرتبة :
تعد تلك القائمة هي مرتبة بالمحتويات وتسمي بقائمة <ol> وتظهر هكذا :
عنصر
عنصر آخر
آخر يذهب هنا.
نستخدم علامة <ol> لإدراج كل العناصر داخل القائمة عبر إستخدام علامات <li> </li>.
ويتم كتبابتها هكذا :
|
<ol> <li> عنصر </li> <li> عنصر آخر </ li> <li> آخر يذهب هنا </ li> </ OL> |
القائمة الغير مرتبة :
تتدعي تلك القائمة بالقائمة النقطية فهي لا تحتوي علي أرقام وتستخدم علامة <ul>
|
<UL> <li> هذا </ li> <li> An Unordered </li> <li> قائمة </ li> </ UL> |
قائمة التعريف
قائمة التعريف والتي تستخدم علامة <dl>
|
<dl> <dt>Item</dt> <dd>The definition goes here</dd> </dl> |
نقف هنا ونبدء بتحربة بعض المعلومات التي ذكرناها في السطور السابقة .
نبدء بالدخول إلي صفحة index.html في محرر HTML ونكتب السطور التالية :
|
<p>This website will have the following benefits:</p> <ul> <li>Increased traffic </li> <li>Global Reach</li> <li>Promotional Opportunities</li> </ul> |
بعد الإنتهاء يتم الضغط علي حفظ ثم التوجه إلي المتصفح وتشغيل موقعك الإلكتروني .
كيفية إضافة الجداول في HTML :
إضافة الجداول داخل HTML أمر يحتاج إلي بعض التركيز فهو يساعد علي جعل موقع الويب الخاص بك أنيقاً ومنظماً
إنشاء الجداول :
لكي يتم إنشاء الجداول فإننا في حاجة إلي إستخدام علامة <table> ويتم إستخدام الصفوف والأعمدة داخل الجداول بإستخدام <tr> و <td>
مثال :
|
<table> <tr> <td>Row 1 - Column 1</td> <td>Row 1 - Colunm 2 </td> <td>Row 1 - Column 3 </td> </tr> <tr> <td>Row 2 - Column 1</td> <td>Row 2 - Column 2</td> <td>Row 2 - Column 3</td> </tr> </table>
|
تلك الأكواد تمكنك من إنتاج صفين يتضمن كل صف علي 3 خلايا
العلامات الخاصة بالجداول :
يمكنك هنا التعرف علي كافة العلامات الخاصة بالجداول حتي إذا لم تكن تحتاجها الأن وذلك لتساعدك علي تطوير مهاراتك .
| الموقع | المعني | علامات الجداول |
| تتواجد في أعلي الجدول | رأس الجدول | <thead> |
| تتواجد داخل الجدول | محتوي النص | <tbody> |
| تتواجد في نهاية الجدول | قدم الجدول | <tfoot> |
| تتواجد ضمن الجدول | مجموعة الأعمدة | <colgroup> |
| رأس الخلية لخانة رأس الجدول | جدول البيانات | <th> |
في الأفضل يتم إستخدام الجداول والمسافات عبر إستخدام CSS
بذلك نكون قد إنتهينا من البرنامج التعليمي الخاص بالمبتدئين لإنشاء صفحات HTML ولكن في النهاية قد نحتاج إلي غلق علامتي <body>و <html> هكذا
</body>
</html>
إستكشاف الأخطاء وإصلاحها :
يمكنك إستخدام تلك الأكواد للتحقق من أن كافة أكواد HTML تعمل بشكل صحيح وسليم
|
<!DOCTYPE html> <html> <head> <title>My First Webpage</title> <meta charset="UTF-8"> <meta name="description" content="This is my first website. It includes lots of information about the health."> </head> <body> <h1>Welcome to my webpage</h1> <p>Welcome to <em>my</em> brand new website.</p> <p>This site will be my <strong>new</strong> home on the web.</p> <a href="/page2.html">Page2</a> <img src="testpic.jpg" alt="This is a test image" height="42" width="42"> <p>This website will have the following benefits for my business:</p> <ul> <li>Increased traffic </li> <li>Global Reach</li> <li>Promotional Opportunities</li> </ul> <table> <tr> <td>Row 1 - Column 1</td> <td>Row 1 - Column 2 </td> </tr> <tr> <td>Row 2 - Column 1</td> <td>Row 2 - Column 2</td> </tr> </table> </body> </html> |
رمز الإستكشاف للأخطاء وإصلاحها في الصفحة الثانية :
|
<!DOCTYPE html> <html> <head> <title>My First Webpage</title> <meta charset="UTF-8"> <meta name="description" content="This is my first website. It includes lots of information about my life."> </head> <body> <h1>Welcome to my webpage</h1> <p>Welcome to <em>my</em> brand new website.</p> <p>This site will be my <strong>new<strong> home on the web.</p> <a href="http://www.google.com">Google</a> </body> </html> |
