تعلم كيفية انشاء و إدارة المواقع و التعامل مع الإستضافة وتسجيل أسماء النطاقات
تصميم المواقع
الدرس 3— الجزء 3 ملخص لعملية إنشاء موقع على شبكة الإنترنت
3منذ 9 شهرا
الآن بعد أن حصلنا على بعض النظريات الأولية حان الوقت لإتخاذ بعض الخطوات لبناء موقع على شبكة الانترنات.
1. تحديد الهدف من موقع الويب
عندما تبدأ مشروع موقع على شبكة الإنترنت، يجب عليك أولا توضيح ماهي أهداف الموقع. مع العلم أهدافك ستأثر على الخيارات التي ستقوم بها عند وضع الموقع على شبكة الإنترنت، و التي ستساهم في نجاحه أو فشله.
2. رسم تخطيطي لبنية الموقع.
رسم تخطيطي بسيط يساعد على تصور موقعك على شبكة الإنترنات. وهنا تحتاج فقط لوضع مجرد سلسلة من المربعات تمثل كل صفحة في الموقع مع خطوط الاتصال بينهم تبين استراتيجية الترابط. وعادة ما يستخدم نظام هرمي لإظهار التسلسل الهرمي للموقع على شبكة الإنترنت من صفحة البداية نزولا الى الصفحات الاخرى.
3. كتابة النص الخاص بموقعك على شبكة الإنترنت
قبل البدء في كتابة كود HTML ، يجب عليك كتابة كافة النص الذي ستحتاج إلى ان تدرجه في الموقع. شيء آخر يجب عليك القيام به هو التأكد من وضع اللمسات الأخيرة على النص قبل أن يوضع على موقعك على شبكة الإنترنت، فتصحيح الامور في معالج النصوص اسهل بكثير من ان تقوم بذلك في صفحة HTML.
4. اختيار التصميم الأساسي “basic layout” الذي سيتم استخدامه على كافة صفحات
قم باختيار التصميم الأساسي لصفحاتك. معظم الوقت يجب استخدام تخطيطات قياسية التي يستخدمها الناس مثل:
شريط تصفح للجانب الأيسر “Left side navigation”.
شريط تصفح للأعلى”Top navigation”.
شريط صفح للجانب الأيمن “Right side navigation”.
5. اختيار الألوان والخطوط الأساسية للموقع
مهمتك التالية هي بدء النظر في الألوان الأساسية والخطوط التي كنت تنوي استخدامها. عليك اختيار النمط الذي يناسب موضوع الموقع الخاص بك.
6. إنشاء الموقع
مع انتهاء ما ذكرناه سابقا، فانت الان مستعد للبدء في إنشاء صفحات الويب الخاصة بك. لذلك ما عليك القيام به هو :
خذ الهيكل الذي كنت وضعته في الخطوات من 1 إلى 5 لإنشاء صفحات الويب الخاصة بك و قم بربط صفحات الويب معا.
7. اختر اسم نطاق
بمجرد انتهائك من إنشاء موقع الويب الخاص بك، فإنك تحتاج إلى وضعه على شبكة الإنترنت — وهذا يعني انك تحتاج الى اسم المجال.
جميع المواقع في حاجة الى اسم المجال ، واختيارك لاسم نطاق يمكن أن يؤثر على عدد الناس الذين سيعثورن على موقع الويب الخاص بك، لذلك قم بإختياره بعناية! وهنا بعض النقاط التي ستساعدك على اختيار اسم المجال :
إسم النطاق يجب ان يصف لك شيئا عن موضوع الموقع على شبكة الإنترنت مما يسهل على محركات البحث نشره وتساعد الناس على اخذ فكرة على محتوى الموقع أيضا.
ستقوم محركات البحث مثل جوجل بنظرة على عدة عناصر من موقع الويب الخاص بك في محاولة لتحديد عن ماذا يتحدث موقعك. واحد من هذه العناصر الأساسية هو اسم المجال؛ غوغل سوف نبحث عن الكلمات الرئيسية في اسم المجال التي تساعد “جوجل بوت” (برنامج غوغل الآلي) لتصنيف موقع الويب الخاص بك.
8. قم بتسجيل اسم النطاق الخاص بك
هذا يمكن ان يكون اصعب مما كنت تعتقد، بما أن معظم أسماء النطاقات تم حجزها. فسوف تحتاج إلى القيام بتركيب مجموعة من الكلمات مثل “how-to-build-websites.com”.
اليوم لديك العديد من الخيارات لاسماء المجالات؛ ففي الماضي ، يمكن تسجيل فقط نقطة كوم “.com”. تلك القيود القديمة ذهبت، وهناك طائفة واسعة من الملحقات التي يمكن الاختيار من بينها : “.com, .net, .org, .tv, .biz …”
9. البحث على شركة استضافة
تكلفة استضافة المواقع على شبكة الإنترنت أقل بكثير من قبل سنوات قليلة مضت، وهذا شيء جيد. يمكنك الانتقال من استضافة مجانية إلى استضافة ذات تكلفة باهظة جدا، اعتمادا على احتياجات موقع الويب الخاص بك.
ما الذي يمكن أن يؤثر على تكلفة استضافة الموقع؟
عدد الزوار — المزيد من الزوار يكلفك اكثر في الشهر.
ميزات و خدمات اضافية — قد تحتاج إلى استخدام قاعدة البيانات (للتجارة الإلكترونية) ، أو تحتاج إلى حسابات البريد الإلكتروني و المزيد من المساحة الإضافية على القرص لتخزين كل ما تحتاجه من الملفات على المواقع . و ستقدم لك شركة الاستضافة قائمة من الخطط التي يمكنك الاختيار من بينها تبعا للاحتياجات الخاصة بك.
10. تحميل موقع الويب الخاص بك إلى خادم شركة الاستضافة
لتحميل موقع الويب يمكنك استخدام ما يسمى ببروتوكول نقل الملفات “FTP” للقيام بذلك؛ ستقدم لك شركة الاستضافة التفاصيل اللازمة عند إعداد حسابك.
الدرس 4 — الجزء 1: في طور الانجاز 
الدرس 3 — الجزء 2 عنوان URL النسبي مقابل عنوان URL المطلق
3منذ 9 شهرا
لربط صفحات موقعك من صفحة إلى أخرى لديك خيار استخدام واحد من نوعين من عناوين URL : عناوين مطلقة (كاملة) أو عناوين نسبية (الجزئي).
عنوان URL مطلق هو العنوان الكامل للصفحة التي يمكن العثور عليها من أي موقع آخر على الانترنت. لذلك دعونا نقول ان لديك صفحة تسمى contact.html على جذر موقع الويب “root” الخاص بك الذي يسمى www.mywebsite.com. في هذه الحالة، سيكون عنوان URL المطلق للصفحة contact.html هو :
<a href="contact.html">Contact us</a>
عندما نتحدث عن جذر موقع على شبكة الإنترنت “root”، فإننا نتحدث عن قاعدة الموقع على شبكة الإنترنت، والمستوى الاول.
ويتم تنظيم الملفات (صفحات وصور، الخ) التي تشكل موقع الويب الخاص بك في مجلدات تماما مثل أي الملفات الأخرى التي قمت بتخزينها على الكمبيوتر المنزلي. شركة الاستضافة تعطيك مساحة / الدليل “space/directory” على الخادم الخاص بهم بالنسبة لك لوضع كل الملفات على موقع الويب الخاص بك.
وهذا الفضاء / المجلد “space/folder” المخصص يعتبر “الجذر root” للموقع الويب الخاص بك. هذا يعني أن كل شيء (ملفات HTML والصور والمجلدات الأخرى، الخ) في هذا المجلد يتم الوصول إليها مباشرة من قبل اسم المجال الخاص بك بالإضافة إلى اسم العنصر. لعل هذه الأمثلة ستشرح لنا هذا بشكل أفضل :
دعونا نقول ان على مستوى الجذر لموقع الويب الخاص بك يوجد هذه الملفات HTML :
index.html و contact.html
وفي مجلد يسمى ‘products’، وضعت مجموعة كاملة من صفحات أخرى واحد منها يسمى “bookcases.html”. لجعل موقعك على شبكة الإنترنت أكثر تنظيما
يمكنك تخمين ما سيكون عنوان URL المطلق لصفحة الويب ‘bookcases.html’ ؟ على اسم المجال : ‘www.mywebsite.com” :
http://www.mywebsite.com/products/bookcases.html
عنوان URL النسبي
عنوان URL النسبي هو العنوان الجزئي الذي هو نسبة إلى الصفحة التي كنت قد وضعت الرابط الخاص بك فيها. إذا كان الرابط موجود في صفحة index.html و الذي سيحملك إلى صفحة bookcases.html فسيكون عنوان URL النسبي على النحو التالي :
products/bookcases.html
وستكون علامة الارتباط “link tag” مثل هذا :
<a href="products/bookcases.html">Check out our bookcases!</a>
فأنت تقول للمتصفح أن صفحة HTML التي نريد تحميلها موجودة في المجلد “products”.
هذا هو مثال آخر لمساعدتك: دعونا نقوم بربط الصفحة “contact.html’ بالصفحة “index.html’ :
<a href="contact.html">Contact us</a>
بما أن الصفحة ‘contact.html’ على نفس مستوى “index.html” ، فنحن بحاجة فقط الى اضافة اسم ملف في عنوان الارتباط.
المقالة التالية: الدرس 3— الجزء 3 ملخص لعملية إنشاء موقع على شبكة الإنترنت
الدرس 3– الجزء 1 بناء موقع على شبكة الإنترنت
3منذ 9 شهرا
الآن بعد أن كنا قد أنشأنا صفحة أتش تي أم أل HTML Page الأولى وبعض من الأساسيات سابقا، يمكننا الانتقال إلى بناء موقع على شبكة الإنترنت.
مقدمة : ماذا يعني موقع على الانترنت؟
موقع على الانترنت هو مجرد مجموعة من صفحات الويب متصلة ببعضها من خلال ما يسمى الروابط. في HTML هناك ما يسمى علامات او ما يسمى بطاج أتش تي أم أل ” link الارتباط”، و هذا أبسط أشكاله:
<a href="”…”"></a>
وهنا مثال لعلامة الربط “link tag” مع الوجهة المحدد لها :
<a href=" http://www.google.com ">Go to google.com</a>
نستطيع أن نقول إننا نستخدم دائما الروابط عند تصفح الويب. كلما ننقر على رابط يقوم بنقلنا إلى صفحة أخرى، وبذلك فإننا نستخدم في كل مرة علامة الارتباط ”link tag”. علامة الارتباط هي العلامة الأكثر أهمية في HTML ؛ فهي تجعل الإنترنت مترابطة!
في المثال أعلاه ، نرى أن علامة الارتباط “link tag” تصلنا بالموقع www.google.com والنص الذي يتم عرضه على صفحة الويب هو : ‘Go to google.com’. على سبيل المثال، إذا كنت تريد إنشاء الارتباط الذي يوصل شخص لwww.yahoo.com، يمكنك استبدال www.google.com بعنوان ياهو www.yahoo.com.
مثل كل العلامات الأخرى، علامة الارتباط “link tag” لها علامة فتح (<a href=” http://www.killersites.com “>) وعلامة إغلاق (</a>). علامة الارتباط “link tag” اقل تعقيدا من العلامات الأخرى التي شهدناها حتى الآن، ولكن أعتقد أنك قادر على التعامل معها!
ربما نلاحظ وجود نصوص في علامة الارتباط تأتي قبل عنوان الموقع على شبكة الإنترنت، والنص الذي أتحدث عنه هو :
http://
هذا النص يخبر المتصفح أن هذا العنوان هو إشارة إلى صفحة الويب. أحيانا يمكن أن تشير الوصلات إلى اشياء اخرى غير صفحات الويب؛ أشياء مثل الأفلام، وملفات PDF ، وهلم جرا
المقالة التالية: الدرس 3 — الجزء 2: عنوان URL النسبي مقابل عنوان URL المطلق
بناء صفحت أتش تي أم أل HTML Page الأولى
4منذ 1 من سنوات
الخطوة 1 : لكتابة كود أتش تي أم أل “HTML code“
افتح محررالنصوص مثل المفكرة “Notepad” على ويندوز و اكتب هذا :
<html> <head> <title>Your first hand coded page!</title> </head> <body> <h2>Hand coding web pages is easy! </h2> <p>I would like to thank everyone who helped me type this page.</p> </body> </html>
الخطوة 2 : أحفظ الملف على اساس وثيقة أتش تي أم أل “HTML document“
احفظ ملف أتش تي أم أل “HTML file” الخاص بك (احفظه على سطح المكتب الخاص بك حتى تكون على يقين من العثور عليه!) باستخدام محرر النص إحفظه باسم webPage.html
إحفظه باسم webPage.html
يمكنك اختيار أي اسم تريد ، طالما أنك تتبع هذه القواعد الأربع :
- أسماء صفحة الويب لا يمكن أن يكون فيها مسافات مثل : “web page.html” و لكن webPage.html جيد.
- الاسم يجب أن ينتهي بـ: “.html” أو “.htm” . و بعملية إنهاء اسم الملف بهذه الطريقة فأنت تقول للكمبيوتر أن هذه هي صفحة على شبكة الإنترنت ، وأنه ينبغي استخدام قارئ صفحة ويب أو متصفح لمشاهدتها.
- لا تستخدم رموز مثل : $ ، ٪ ، ^ ، في أسماء صفحاتك. إستخدم الحروف والأرقام القياسية.
- في المفكرة “Notepad” ، الرجاء حفظ الملف على اساس “UTF-8″.
الخطوة 3 : عمل وعرض صفحتك الخاص
أصبحت صفحتك جاهزة الان ، فقط انقر مرتين على الصفحة أو إفتحها عن طريق متصفح الويب الخاص بك بالذهاب الى “ملف” بالنقر على القائمة “menu” ، ثم حدد فتح الملف “Open file” ثم حدد صفحتك.
حدد صفحتك
و بهذا يجب أن تكون قادرا على رؤية صفحتك.
إذا اردت التأكد فان الصفحة ستظهر بهذا الشكل:
استنتاج
الآن بعد أن قمنا ببناء صفحة الويب الأولى ، يمكننا أن نتحرك الآن لبناء أول موقع لنا على الشبكة.
الدرس 2 — الجزء 2: علامات أتش تي أم أل HTML tags
2منذ 1 من سنوات
ربما لاحظتم أن علامات او ما يسمى بطاج أتش تي أم أل “HTML tags” تأتي في شكل أزواج ، على حد سواء أتش تي أم أل لديه علامة الفتح (<اسم العلامة>) ، وعلامة الإغلاق (<اسم العلامة />). والفرق الوحيد بين الفتح و إغلاق هو أن علامة إغلاق تحتوي على خط مائل إضافية “/“.
هذه بعض الأمثلة لعلامات أتش تي أم أل “HTML tag” التي قد تجعل الأمور أكثر وضوحا :
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
<i> Makes text italic </i>
<table> Creates an HTML table </table>
يتم تعريف عناوين أتش تي أم أل “HTML heading” باستعمال العلامات من <h1> إلى <h6>.
وتحدد فقرات أتش تي أم أل “HTML paragraphs” بالعلامة <p>.
علامات أتش تي أم أل “HTML tags” ليست لمجرد وضع وتنسيق النص فقط ، فيمكن استخدام علامات أتش تي أم أل “HTML tags” ليشمل أشياء أخرى مثل : الرسوم المتحركة ، والفيديو ، فلاش “Flash”، والصوت ، وحتى برامج الوسائط المتعددة “multimedia programs”.
مقارنة بين كود الأتش تي أم أل “HTML code” لصفحة الويب و مضهرها على المتصفح
دعونا نبدأ مع صفحة ويب بسيطة جدا لنجعل من السهل بالنسبة لك أن تفهم. أولا أنظر في مظهر الصفحة النهائية : نموذج صفحة الويب من هنا
والآن بعد أن رأينا مظهر الصفحة ، دعونا ننظر في الكود المستخدم لإنشاء هذه الصفحة من هنا.
ما يجب أن نفعله الآن هو أن نقضي بعض الوقت في مقارنة مظهر صفحة أتش تي أم أل مع الرموز التي تستخدم لإنشاء هذه الصفحة. حيث لاحظ اين توجد العلامات و ماهي وضيفتها.
هيكل صفحة أتش تي أم أل “HTML page“
صفحة أتش تي أم أل “HTML page” تنقسم إلى قسمين رئيسيين هما :
الرأسية The head
قسم الرأسية (<head>) يحتوي على المعلومات الأساسية حول الصفحة و هذه المعلومات لا يتم عرضها على صفحة الويب (باستثناء عنوان الصفحة). رغم ذلك ، فان لها تأثير على كيفية عرض صفحة ويب.
الجسم The body
قسم الجسم (<body>) : هذا القسم يحتوي على جميع الاشياء التي تظهر على صفحة الويب الفعلية عندما يقوم شخص ما بفتحها على المتصفح الخاص به. نحن نتحدث عن النص الفعلي ، وصور ، وأفلام الفلاش ، وهلم جرا التي سوف يراها الناس . هذا ، يعني بأن العلامات “tags” تستخدم لتنسيق كل هذه الأشياء.
ستلاحظ أن كلى القسمين الرأسية “head” و الجسم “body” لصفحة أتش تي أم أل يتم ترميزها بهذه العلامات لكل منهما : (<head> </head>) للرأسية و(<body> </body>) للجسم.
هذه العلامة (<html></html>) خاصة بكامل صفحة أتش تي أم أل بحيث تحتوي على الرأسية “head” و الجسم “body”:
<html> </html>
مثل كل العلامات يجب أن يكون لديها علامة الفتح (<html>) ، وعلامة الإغلاق (<html/>).والفرق الوحيد بين الفتح و الإغلاق هو أن علامة الإغلاق تحتوي على خط مائل إضافية “/“.
لكل صفحة ويب على شبكة الإنترنت علامة أتش تي أم أل “HTML tag” للبدء والنهاية ، وإلا فإن متصفح الويب (برنامج انترنت اكسبلورر مثلا) لن يكون قادر على عرض الصفحة. لديك أيضا كلى القسمين الرأسية “head” و الجسم “body” ضروري لعرض الصفحة . و جميع العلامات الأخرى هي اختيارية.
صفحة أتش تي أم أل “HTML page” يجب أن يكون لديها هذه العلامات وبالترتيب التالي :
<html>
<head>
<title>Title of your page</title>
</head>
<body>
</body>
</html>
الدرس 2 — الجزء 1: بناء أول صفحة ويب خاصة بك
3منذ 1 من سنوات
يوجد ثلاث الطرق لإنشاء صفحة على شبكة الإنترنت:
- 1. استخدام قالب “template” جاهز قبل الصنع : ماذا يعني تصميم قالب الموقع “WEB DESIGN TEMPLATE” ؟
تصميم قالب الموقع على شبكة الإنترنت هو قالب جاهز تم تصميمه لموقع على الانترنت حيث صمم خصيصا ليعكس العلامة التجارية الخاصة بالشركة. قوالب التصميم للموقع “Website design templates” يمكن العثور عليها في أشكال مختلفة مثل فوتوشوب “Photoshop” وأتش تي أم أل “HTML”. وفي كثير من الأحيان ، هذه القوالب متوافقة مع محررأتش تي أم أل “HTML editors” مثل جو لايف “GoLive”، فرونت بيج “FrontPage”، ودريمويفر “Dreamweaver”.
قوالب التصميم للموقع “Website design templates” يمكن أن تكون مفيدة جدا ، ويمكن استخدامها من قبل مصممي الويب من ذوي الخبرة للقيام بإنشاء موقع على شبكة الانترنت. وهي أيضا وسيلة لوضع المواقع على شبكة الإنترنت ذو مظهر رائع و بسرعة مع القليل من المعرفة بـ أتش تي أم أل “HTML” وتصميم مواقع على الإنترنت “web design”.
- 2. استخدام محرر أتش تي أم أل “HTML editor” مثل فرونت بيج “FrontPage” أو دريمويفر “Dreamweaver” :
استخدام محرر أتش تي أم أل “HTML editor” يجعل من عملية بناء صفحات الويب وكأنك (إلى حد ما) تقوم بإنشاء وثيقة على مايكروسوفت وورد… فهي عملية سهلة جدا. ولكن الجانب السلبي هو أن تخسر قدرا معينا من السيطرة على ما تقوم به ، وفي بعض الحالات تصبح لا تستطيع العمل من دون هذا البرنامج.
- 3. كتابة كود أتش تي أم أل “HTML“الخاص يدويا في محرر نصوص “text editor” مثل المفكرة “Notepad” :
وهذا يعني كتابة الكود بنفسك. هذا هو النهج الذي سوف نستخدمه هنا ، لأنه أسرع طريقة لتعلم كيفية بناء صفحات الويب ، ويمكن القول إن أفضل وسيلة لأنه لديك أكثر سيطرة على ما تفعله.
نحن نعلم الآن أن مزايا الترميز او ما يسمى كتابة الكود يدويا “hand-coding” لصفحات الويب ، ودعونا نبني صفحة الويب الأولى!
ما هي علامات او ما يسمى بطاج أتش تي أم أل “HTML tags”؟
علامات او ما يسمى بطاج أتش تي أم أل “HTML tags” هو نص تم تنسيقه على وجه التحديد لخلق علامات “markers” يمكن قراءتها و تفسيرها من طرف متصفح الإنترنت . هذه علامات تقول لمتصفح الويب ماذا وكيف يكون عرض الأشياء على صفحة الويب. وتوضع العلامات “Tags” حول و في النص والصور التي تريد أن تظهرها على صفحات الويب الخاصة بك.
أتش تي أم أل “HTML” لديها مجموعة كاملة من العلامات “tags” (تماما مثل الأبجدية لديها مجموعة كاملة من الحروف) و التي يستخدمها المصمم لبناء صفحات الويب على شبكة الإنترنت. العلامات “tags” تمتلك بنية محددة بحيث عندما يقوم المتصفح بقراءة صفحة أتش تي أم أل “HTML page” ، فإنه يستطيع ان يميّز العلامات “tags” من النص العادي.
العلامات “Tags” عادة ما تكون كلمات أو الاختصارات للكلمات وضعت بين علامتي أصغر و اكبر “<>“. فعلى سبيل المثال : لجعل النص غليض “bold”، أتش تي أم أل لديها العلامة “bold” التي تبدو مثل هذا :
<b> This text will be bolded </b>
علامة أخرة شائعة الاستخدام و هي علامة الفقرة “paragraph” :
<p> This is a paragraph of text. </p>
المقالة التالية: الدرس 2 — الجزء 2: علامات أتش تي أم أل HTML tags
