-->

تحميل

تحميل

تحميل

لغة HTML

    ما هو ملف الـ HTML؟




           هي اختصار لمجموعة كلمات Hyper Text Markup Language
           وهى تعنى لغة النصوص الفائقة ذات العلامة او الوسم ، وقد سميت تلك النصوص بهذا الأسم لإختلافها عن النصوص العادية فهى تمتاز عادة بأن تحتها خط و دائما ما تقودنا الى مكان ما على الانترنت و ما أن تقترب من هذه النصوص بالفأرة حتى نجد شكل المشيرة قد تغير ، و إذا قمنا بالضغط على الزر الأيمن للفأرة يتم نقلنا إلى موقع أخر على الإنترنت .

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

               و هناك بعض الخصائص التي تميز ملفات الـ HTML نذكر منها.

    * ملفات الـ HTML هي ملفات نصية تحتوى على رموز الوسوم الصغيرة.
    * رموز الوسوم تخبر المتصفح بكيفية عرض صفحة الويب.
    * ملفات الـ HTML يجب أن تأخذ الامتداد HTM أو HTML.
    * يمكن تحرير ملفات الـ HTML باستخدام أي محرر نصوص بسيط مثل الـ Notepad.


    تحرير أول ملفاتك بلغة الـ HTML

    إذا كنت تستخدم نظام Windows فابدأ بتشغيل الـ Notepad ، إما إذا كنت تستخدم نظام Mac فيمكنك أن تبدأ SimpleText الآن.

    في أي نظام تشغيل أخر، ابدأ TextEdit وغير التفضيلات التالية: حدد (في نافذة التفضيلات) "Plaintext" بدلاً من "Rich text" ثم حدد "Ignore rich text commands in HTML files". وهذا الأمر هام للغاية، إذا لم تفعل ذلك، فلن يعمل كود الـ HTML.

    قم بنسخ النص التالي في محرر النصوص الذي تستخدمه.

    <html>
    <head>
    <title> عنوان الصفحة </title>
    </head>
    <body>
    <b>مرحبا بكم ميعا </b>
    </body>
    </html>


    الآن قم بحفظ هذا الملف باسم " index.html " ، ثم قم بتشغيل متصفحك ، و من قائمة ملف أختر الأمر " فتح " و من مربع الحوار أختر الأمر "Browse" أو استعرض و ابحث عن الملف index.html الذي قمت بتحريره الآن قم باختياره ثم قم بالضغط على زر فتح أو " Open " ... الآن يمكنك مشاهدة عنوان الملف في مربع الحوار اضغط ok سوف يقوم المتصفح بعرض الصفحة الآن ... ماذا ترى ؟

    شرح المثال

    من خلال المثال السابق نجد مجموعة من وسوم HTML سوف نقوم بشرحها الآن حيث نجد أن ملف HTML يجب أن يبدأ بالوسم <html> فهذا الوسم يخبر المتصفح هذا هو بداية ملف HTML ، كما يجب أن ينتهي الملف بالوسم </html> و هذا الوسم يخبر المتصفح بأن هذه هي نهاية ملف HTML.
    أي أن جميع ملفات HTML يجب أن يكون لها بداية و نهاية ، البداية تكون من خلال الوسم <html> و النهاية تكون من خلال الوسم </html>.
    و ملفات الـ HTML يمكن تقسيمها إلى جزئين رئيسيين هما الـ head أو ما يسمي برأس الملف و جزء الـ body أو ما يسمى بجسم الملف.

    رأس الملف الـ head

    الجزء المحصور بين الوسمين <head> و </head> يسمى رأس الصفحة ، و النص الموجود بين هذين الوسمين هو عبارة عن معلومات رأس الصفحة ، و تلك المعلومات لا يتم عرضها داخل نافذة المتصفح.
    أما النص الموجود بين الوسمين <title> و </title> هو عبارة عن عنوان الصفحة ، هذا العنوان يتم عرضه عنوان المتصفح " هو الشريط الافقي الموجود أعلى شاشة المتصفح ".

    جسم الملف الـ body

    الجزء الموجود بين الوسمين <body> و </body> هو ما يسمى بجسم الملف ، و النص الموجود بين هذين الوسمين هو ما يعرض داخل نافذة المتصفح .
    أما النص الموجود بين الوسم <b> و </b> فسوف يعرض من خلال المتصفح كخط عريض ، و هو ما سوف نتعرف عليه قريباً عند شرح الجزء المتعلق بالخطوط.

    امتداد ملفات الـ HTML

    عند حفظ ملفات HTML يجب أن تقوم باستخدام الامتداد .htm أو الامتداد .html ، في الماضي كنا مضطرين لاستخدام الامتداد .htm فقط نظراً لأن البرامج كانت لا تسمح إلا بثلاث حروف فقط كامتداد للملفات.
    و لكن مع الإصدارات الحديثة للبرمجيات فمن الأفضل أن نستخدم الامتداد .html

    ملاحظات على محررات لغة الـHTML:

    يمكنك تحرير ملفات HTML باستخدام محرر WYSIWYG (ما تراه هو ما تحصل عليه) مثل FrontPage، أو Claris Home Page أو Adobe PageMill بدلاً من كتابة وسوم التمييز في ملف نص عادي.
    لكن إذا كنت تريد أن تصبح مطور ويب محترف، ننصحك بشدة أن تستخدم محرر نص عادي لتتعلم بدايات الـ HTML.

    وسوم HTML الأساسية

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

    العناوين

    يتم تحديد العناوين من خلال الوسوم من <h1> إلى <h6> ، حيث يعد الوسم <h1> هو أكبر مقاس للعنوان بينما نجد أن الوسم <h6> هو أصغر مقاس للعناوين ، كما يتضح من الكود التالي:

    <h1>عنوان 1</h1>
    <h2>عنوان 2</h2>
    <h3>عنوان 3</h3>
    <h4>عنوان 4</h4>
    <h5>عنوان 5</h5>
    <h6>عنوان 6</h6>

    و من خلال الوسم <h> نجد أن العناوين في الـ HTML تقوم بطريقة آلية بإضافة سطر فارغ قبل و بعد العنوان.

    الفقرات

    يتم تحديد الفقرات من خلال الوسم <p> ، كما يتضح من خلال الكود التالي:

    <p>بسم الله الرحمن الرحيم</p>
    <p>الحمد لله رب العالمين</p>

    و من خلال الوسم <p> نجد أن الـ HTML تقوم بطريقة آلية بإضافة سطر فارغ قبل و بعد الفقرة.

    من أول السطر

    يستخدم الوسم <br> في حالة الرغبة في إنهاء السطر الحالي ، و بالبدء من أول السطر و لكن دون بداية فقرة جديدة ،

    <p>This <br> is a para<br>graph with line breaks</p>

    لاحظ أن:

    الوسم <br> لا يحتاج إلى وسم إغلاق <br/>مثل الوسوم الأخرى.

    الملاحظات والتعليقات داخل ملفات HTML

    يستخدم وسم التعليقات <-- --!> لإدارج تعليقات داخل أكواد HTML ، تلك الملاحظات سوف يتم تجاهلها من قبل المتصفح بمعنى أنها لن تظهر أثناء عرض الصفحات.
    يمكنك استخدام التعليقات أو الملاحظات لشرح الكود إذا كان هناك من يساعدك في تحرير صفحات الـ HTML ، أو لتذكرك بعمل الكود إذا أردت العودة إليه بعد فترة.

    <!--هذا مجرد تعليق أو ملاحظة -->

    لاحظ أن:

    لا تنسى وضع علامة التعجب في بداية الكود ، كما أنه لا يجب وضعها في نهاية الكود .

    لا حظ أن " معلومات مفيدة "

    عندما تقوم بكتابة نص HTML ، فلن تكون متأكداً من الكيفية التي سيتم عرض النص بها في المتصفح.
    يجب عليك دائما التأكد من أن النص سوف يتم عرضه من خلال المتصفحات المختلفة بصورة جيدة ... بعض المستخدمين لديهم شاشات كبيرة و البعض الأخر لديه شاشات صغيرة كما أن يمكن للمستخدم أن يتحكم في درجة وضوح الشاشة وفقاً لاحتياجاته ... سيتم إعادة تنسيق النص في كل مرة يقوم المستخدم فيها بتغيير حجم النافذة ... لا تقم مطلقاً بتنسيق النص في المحرر لديك بإضافة أسطر فارغة و مسافات إلى النص.
    يقوم الـ HTML باقتطاع المسافات الموجودة في النص ... أي عدد للمسافات سوف يعد مسافة واحدة ... و كذلك سوف يتم اعتبار السطر الجديد مسافة واحدة.
    من العادات السيئة استخدام فقرات فارغة <p> لإدراج أسطر فارغة ... استخدم الوسم <br> ( لكن لا تستخدمه لإنشاء قوائم انتظر حتى تتعلم " القوائم في HTML " ) قد تكون لاحظت أنه يمكن كتابة الفقرات دون وسم النهاية " وسم الإقفال " </p>.
    الإصدار القادم من HTML لن يسمح لك بترك وسم الإقفال ... يضيف الـ HTML تلقائياً سطراً فارغاً إضافياً قبل و بعد بعض العناصر مثل قبل و بعد الفقرة و العنوان ... نحن نستخدم المسطرة الأفقية ( من خلال الوسم <hr> ) لفصل الأقسام في المثال المذكور.


    تنسيق النص في الـ HTML

    لغة الـ HTML تحدد العديد من العناصر لعرض تنسيقات مختلفة للنص مثل نص عريض أو نص مائل إلي أخر الأشكال المعروفة و من خلال الأمثلة التالية يمكنك التعرف على تلك العناصر.

    هل شاهدت صفحة ويب وأعجبتك و تساءلت " كيف فعلوا ذلك ؟ ".

    هل تريد أن تعرف كيف تم تصميم تلك الصفحة الأمر بغاية البساطة إختر القائمة " VIEW " من شريط الأدوات في متصفحك ثم إختار الأمر "SOURCE " أو " PAGE SOURCE " ، سوف يتم فتح نافذة تعرض لك أكواد الـ HTML لهذه الصفحة .

    وسوم تنسيق النص

    Tag
    Description
    <b>
    		 لتحديد نص عريض
    <big>
    		 لتحديد نص كبير
    <em>
    		 Defines emphasized text
    <i>
    		 اتحديد نص مائل
    <small>
    		 لتحديد نص صغير
    <strong>
    		 تحديد نص قوى " بارز "
    <sub>
    		 تحديد نص منخفض.
    <sup>
    		 تحديد نص مرتفع.
    <ins>
    		 لتحديد نص مضاف
    <del>
    		 لتحديد نص مشطوب
    <s>
    		 تم استبعاده، استخدم <del> بدلاً منه.
    <strike>
    		 تم استبعاده، استخدم <del> بدلاً منه.
    <u>
    		 تم استبعاده، استخدم <del> بدلاً منه.

    وسوم الإخراج في الحاسب الآلي

    Tag
    Description
    <code>
    		 تحديد نص كود الحاسب الآلي.
    <kbd>
    		 تحديد نص لوحة المفاتيح.
    <samp>
    		 تحديد كود للحاسب الآلي عينة.
    <tt>
    		 تحديد نص الآلة الكاتبة.
    <var>
    		 تحديد متغير.
    <pre>
    		 Defines preformatted text
    <listing>
    		 تم استبعاده، استخدم <pre> بدلاً منه.
    <plaintext>
    		 تم استبعاده، استخدم <pre> بدلاً منه.
    <xmp>
    		 تم استبعاده، استخدم <pre> بدلاً منه.

    وسوم الإقتباس والتوضيح والتنويه

    Tag
    Description
    <abbr>
    		 تحديد اختصار.
    <acronym>
    		 Defines an acronym
    <address>
    		 تحديد عنصر عنوان.
    <bdo>
    		 تحديد اتجاه النص.
    <blockquote>
    		 تحديد اقتباس طويل.
    <q>
    		 تحديد اقتباس قصير.
    <cite>
    		 تحديد تنويه.
    <dfn>
    		 تحديد مصطلح تعريف.



    لمزيد من المعلومات ادخل الرابط اسفله :

    شارك المقال
    Sami
    كاتب ومحرر اخبار اعمل في موقع مدونة ياســـــــر .

    مقالات متعلقة