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

المفكرة (Notepad) تعتبر محرر نصوص عادي  شائع يأتي مع الويندوز. وشخصيا أنصح باستخدام محرر نصوص أفضل يدعى (Notepad++) وهو محرر نصوص مجاني به الكثير من المميزات تساعدك على تنظيم الشفرات البرمجية وسهولة ملاحظة الأخطاء وتلافيها، كما أن لديه أيضا واجهة باللغة العربية. يمكن تحميل هذا البرنامج من هنا.

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

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

قم بفتح برنامج المفكرة أو برنامج Notepad++ ثم قم بكتابة النص التالي:

هذه صفحة الويب الأولى الخاصة بي
إذا كنت تستخدم Notepad++ فقم بتحديد اللغة من القائمة Language أو اللغة ثم تحت الحرف H قم باختيار HTML، وسيتم اعتبار هذا الملف على أنه ملف HTML.

قم بحفظ هذا الملف باسم “myfirstpage.html”.

من المهم جدا أن يتم حفظ الملف بصيغة “.html” وذلك حتى يتم التعامل مع الملف على أنه ملف HTML  وليس مجرد ملف نصوص عادي.

لعرض ملفات الـ HTML لا تحتاج لأن تكون على الويب. قم بفتح أي متصفح ويب مثل فايرفوكس (Firefox) أو إنترنت إكسبلورر (Internet Explorer). وفي صندوق العنوان حيث تقوم عادة بطباعة عنوان أي موقع، قم بطباعة مكان ملف الـ HTML المراد عرضه بالإضافة إلى اسم الملف على سبيل المثال: (c:\html\myfirstpage.html)، ثم اضغط Enter. أو بدلا عن ذلك قم بالذهاب إلى قائمة ملف في متصفح الإنترنت ، اختر فتح، ثم قم بالذهاب إلى مجلد html الذي يحتوي الملف المراد عرضه، ثم قم بتحديد الملف ثم اضغط على OK.

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

لقد ذكرت سابقا أنه بالإمكان استخدام أي محرر نصوص بسيط والإكتفاء به لكتابة لغة HTML مثل المفكرة (Notepad)، لكن بالإمكان استخدام أي برامج  أو محررات أخرى متطورة مثل Dreamweaver أو Frontpage.
يجب أن تكون حذرا عند استخدام مثل هذه البرامج، خاصة إذا كنت مبتدئا، لأنها عادة تقوم بإدراج أكواد غير ضرورية وغير معيارة (بهدف مساعدتك).
إن كنت جادا في تعلم لغة HTML فعليك أن تبدأ بقراءة الدروس مقل هذا أولا حتى تتكون لديك المفاهيم الأساسية عن هذه اللغة وطريقة عملها.
البرامج مثل Dreamweaver و Frontpage لن تعطيك التحكم والسيطرة على صفحات الويب نفسه الذي تحصل عليه من كتابة الكود بنفسك باستخدام أي برنامج تحرير نصوص بسيط مثل المفكرة أو Notepad++. لذا فإن أفضل طريقة لتعلم هذه اللغة هي أن تستخدم أي محرر نصوص عادي وبسيط.

ملفات (أو مستندات) الـ HTML = صفحات الويب

  • ملفات الـ HTML تصف وتنسق صفحات الويب
  • ملفات الـ HTML تحتوي على وسوم HTML بالإضافة إلى نص أو نصوص عادية
  • ملفات الـ HTML تدعى أيضا صفحات ويب
الغرض من استخدام متصفح الويب (مثل Enternet Explorer أو Chrome أو Firefox) هو قراءة ملفات الـ HTML وعرضها كصفحات ويب. المتصفح لا يقوم بعرض وسوم الـ HTML، إنما يستخدم هذه الوسوم لترجمة محتويات الصفحة:
<html>
<body>
 
<h1>My First Heading</h1>
 
<p>My first paragraph.</p>
 
</body>
</html>

شرح المثال

  • النص بين <html> و </html> يصف ويمثل صفحة الويب
  • النص بين <body> و </body> هو محتوى الصفحة الذي يظهر والذي يتم عرضه
  • النص بين <h1> و </h1> يتم عرضه كعنوان
  • النص بين <p> و </p> يتم عرضه كفقرة
صيغة .html أو .html؟
عند حفظ ملف HTML، تستطيع أن تستخدم إحد الصيغتين (.htm أو .html). لا يوجد فرق بينهما، ويعود القرار لك في اختيار أحدهما.
لا تقلق إذا رأيت أي وسوم لا تعرفها أو لا تفهم الغرض منها، سنقوم بشرح جميع الوسوم المستخدمة، وإن شاء الله سنتمكن من تغطية كل الوسوم الموجودة في الـ HTML.
مشاركة هذا الموضوع في:
Digg Google Bookmarks reddit Mixx StumbleUpon Technorati Yahoo! Buzz DesignFloat Delicious BlinkList Furl

لا يوجد أي تعليقات على ”HTML – الشروع في العمل“

ضع رداً

الاسم (مطلوب):
البريد الإلكتروني (لن يتم إظهاره أو نشره) (مطلوب):
الموقع:
التعليق (مطلوب):
XHTML: تستطيع أن تستخدم الأكواد التالية في تعليقك: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre lang="" line="" escaped="" highlight="">