تعلم كيفية انشاء و إدارة المواقع و التعامل مع الإستضافة وتسجيل أسماء النطاقات
المشاركات الموسومة لـ : HTML
الدرس 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 ملخص لعملية إنشاء موقع على شبكة الإنترنت
بناء صفحت أتش تي أم أل 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
الدرس 1 — الجزء 3: الخيار الارخص ثمن لموقعك على شبكة الانترنت
1منذ 1 من سنوات
بعض الناس قد لا ترغب في شراء اسم نطاق أو دفع معاليم الاستضافة فقط لأن لديهم موقع على شبكة الإنترنت للمتعة الشخصية أو بعض التدريب. يمكنك الحصول على موقع الويب الخاص بك على شبكة الإنترنت عن طريق استخدام خدمة الاستضافة المجانية بحيث تسمح لك بخلق ما يسمى النطاق الفرعي “sub-domain”. والنطاق الفرعي هو مجرد جزء من مجال آخر. مثلا بالنسبة لموقع ToHostMe.com فعنوان النطاق الفرعي لهذا الموقع سيكون مثل :
ToHostMe.com/mydomain
أو يمكن أن يكون مثل :
http:// mydomain.ToHostMe.com
بهذه الطريقة ، لا تحتاج لشراء اسم نطاق ، و لا تحتاج ايضا لدفع تكاليف الاستضافة.
نقل ملفات موقع الويب الخاص بك الى الخادم “server“
بعد أن تقوم بتسجيل اسم النطاق الخاص بك والاستضافة، فالخطوة الأخيرة هي تحميل الموقع على الخادم. يمكنك نقل موقع الويب الخاص بك إلى الخادم المضيف الخاص بك باستخدام برنامج بروتوكول نقل الملفات “FTP program”.
برنامج بروتوكول نقل الملفات “FTP program” هي نوع من البرمجيات التي تستخدم لنقل الملفات من جهاز كمبيوتر إلى آخر عبر الإنترنت.
وهناك العديد من البرامج المجانية لبروتوكول نقل الملفات التي يمكنك استخدامها لنقل الملفات. الكثير من محرري أتش تي أم أل “HTML editors” و وبرامج تصميم المواقع “web design programs” مثل دريمويفر “Dreamweaver” لديها القابلية لنقل الملفات الى الخادم.
لديك خيار اخر لبروتوكول نقل الملفات “FTP” لنقل الملفات إلى الخادم هو إنترنت إكسبلورر. إنترنت إكسبلورر 5 “Internet Explorer 5″ او اصدار اعلى من ذلك ، لديه برنامج بروتوكول نقل الملفات مدمج فيه و يمكنك استخدامه عن طريق كتابة عنوان بروتوكول نقل الملفات للخادم في شريط العنوان يسبقه الكلمة : FTP.
هنا مثال :
FTP://174.121.133.252/yourdomain/
المقالة التالية: الدرس 2 – بناء أول صفحة الويب خاصة بك – الجزء 1
الدرس 1 — الجزء 2: وضع موقع الويب الخاص بك على شبكة الإنترنت
1منذ 1 من سنوات
خطوتين لوضع موقع الويب الخاص بك على شبكة الإنترنت :
- سجل اسم النطاق الخاص بك.
- احصل على استضافة لموقعك.
1- تسجيل اسم النطاق الخاص بك
هناك العديد من الشركات التي تسمح لك بتسجيل اسم النطاق لموقع الويب الخاص بك. وتختلف أسعارها. في هذه الأيام ، سوف تجد أن كثيرا من الأسماء التي قد تكون مهمة بالنسبة لك قد تم تسجيلها. فأسماء النطاقات لا يجب أن تكون مشتركة، وقد يسبقك الكثير في الحصول عل اسم النطاق المناسب.
ما هو الفرق بين .com, .net, .org, ، وما إلى ذلك؟
ومن الناحية العملية ، في هذه الأيام لا يوجد فرق. فمحركات البحث لا تميز بين عنوان دوت كوم “.COM” وعنوان دوت نت “.NET”. الشيء الوحيد الذي يمكن أن تنظر اليه هو أن الناس يميلون إلى نوع دوت كوم “.COM” تلقائيا لأنه كان أول تمديد للمجالات “domain extension” عرف للعموم. حتى عند تسجيل اسم نطاق ، نذهب أولا الى دوت كوم “.COM” وإذا كان غير متوفر نحاول مع أي واحد من الآخرين. (net, .org, .tv ، الخ…)
عنوان دوت كوم “.COM” ليس هو نفس اسم المجال الذي يحمل نفس الاسم مع تمديد مختلف “domain extension”. على سبيل المثال :
www.killersites.com هو ليس نفس اسم المجال لـ: www.killersites.net
على هذا النحو ، يمكن تسجيل كل من العناوين بشكل منفصل.
2- تأجير مساحة على خادم الويب “web server” لاستضافة موقع الويب الخاص بك.
أنت في حاجة إلى استئجار مساحة على الخادم حتى تمكنك من نشر خدمة موقع الويب الخاص بك على شبكة الويب العالمية ، وهذا غالبا ما تسمى استضافة “hosting”. وتدعا الشركات التي تقدم هذه الخدمة في كثير من الأحيان المضيف أو شركات استضافة “host or hosting companies”.
بعد أن تقوم بتسجيل المجال او ما يسمى باسم النطاق او دومين “domain” الخاص بك ، كل ما عليك القيام به هو الاتصال بشركة استضافة و تعطيهم اسم النطاق الخاص بك. وسوف يكون موقعك جاهزا على شبكة الانترنات في اقل من أسبوع. بعض شركات الاستضافة توفر ايضا خدمت تسجيل او ما يسمى بحجز الدومين بحيث تكون العملية اسهل و اسرع بالنسبة لك.
