لغة تأشير النص الفائق HyperText Markup Language

[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]

لغة تأشير النص الفائق أو لغة رقْم النص الفائق (بالإنجليزية: HyperText Markup Language) أو لغة النصوص التشعبية اختصاراً إتش.تي.إم.إل HTML: لغة برمجة و تستخدم في تصميم صفحات الويب و مواقع إنترنت، و تعتبر هذه اللغة من أقدم اللغات و أوسعها إستخداماً في تصميم صفحات الويب. ولغة HTML ليست لغة برمجة، بل هي لغة للوصف وتعطي برنامج تصفح الانترنت وصفاً ليكفية عرضه للمحتويات، فهي تصف له أبعاد الصور و تنسيقات الخطوط وغيرها. وتستخدم لغة ال HTML مايعرف بالوسوم tags لإصدار التعليمات إلى المتصفح، هذه الوسوم توضع بين علامتى أكبر من > و أصغر من <. و تبدأ أكواد HTML بالوسم ، و تنتهى بالوسم . يقوم متصفح ويب بتحويل السطور البرمجية بلغة HTML إلى صفحات مفهومة و سهلة القراءة لزوار المواقع.

لغة الـ HTML هي اللغة التي تستخدم في عملية تصميم المواقع، حيث أن هذه اللغة تتميز بعدم حساسيتها لحالة الأحرف أو لترتيب بعض الخصائص، و هذا ما تتطلبه فعلياً عملية تصميم مواقع الويب، وذلك لكي تكون عملية تصميم المواقع عملية سهلة وليِّنَة وبدون أي تعقيدات .لغة HTML تعتبر أيضاً من اللغات المدعومة بمعايير قياسية محدده يفضل الالتزام به. الالتزام بمعايير الـ HTML أثناء تصميم المواقع يمنح الصفحة قابلية أكثر للعرض و الإستخدام على أنواع و إصدارات مختلفة من المتصفحات. من ناحية أخرى فإن HTML مركبة بشكل نحوي يدعى DOM، عملية تصميم المواقع مع DOM تجعل صفحة الموقع تظهر و كأنها شجرة من وسم (Tags) التي تدل على تصميم الموقع. تعتبر اللغة غير ديناميكية في حالة المواقع الكبيرة لذا فإن كثيراً من المواقع تضطر إلى إدخالها ضمن لغة دينامكية مثل php.

تعرف على اللغة

ما هي HTML ؟

HTML هي اللغة الأم لمتصفحك.

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

HTML هي لغة تسمح بعرض المعلومات (مثال: البحوث العلمية) على شبكة إنترنت، ما تراه عند زيارتك لأي صفحة في الشبكة هو ترجمة المتصفح لأوامر HTML، لكي ترى HTML لأي صفحة تزورها عليك أن تضغط على قائمة عرض "View" ثم المصدر "Source".

لمن لم يعتد على رؤية هذه الأوامر، HTML تبدو معقدة لكن هذا الدرس سيساعدك على أن تفهمها.

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

HTML تستخدم لإنشاء المواقع، هذا كل شيء ببساطة!

حسناً، ماذا تعني H-T-M-L؟ HTML هي اختصار "HyperText Mark-up Language"، أنت لا تحتاج في هذه المرحلة لمعرفة ماذا تعني هذه المصطلحات، مع ذلك لنشرحها بتفصيل أكبر.

Hyper هي عكس "خطي" وهي تعني في هذه الحالة أن تنتقل من أي نقطة إلى أي نقطة بدون أن تسير في خط سير محدد، في الماضي - عندما كانت الفأرة شيء يلحقه القط - كانت الحواسيب تعمل بشكل خطي، تقوم بتنفيذ أمر ما ثم تذهب لما بعده، لكن HTML مختلفة، يمكنك أن تذهب إلى أي مكان في أي وقت، ليس بالضرورة مثلاً أن تزور موقع MSN.com قبل أن تزور HTML.net. Text تعني النص، وهذه تشرح نفسها. Mark-up هو ما تفعله بالنص، فهذه الكلمة تعني توصيف النص، فأنت تقوم بتوصيف النص تماماً كما تفعل مع معالجات الكلمات فتضيف العناوين والنقاط والنص السميك وغيرها. Language تعني اللغة، فتقنية HTML هي لغة توصيف وهي أيضاً تستخدم العديد من كلمات اللغة الإنجليزية. في هذا الدرس ستتعلم أيضاً XHTML والتي تعني "Extensible HyperText Mark-up Language" وهي باختصار طريقة أحدث وأكثر تنظيماً لكتابة HTML

العناصر والرسوم

الآن أنت جاهز لتعلم جوهر لغة HTML وهي العناصر.

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

"وسوم"؟ الوسوم هي توصيفات تستخدمها لكي تضعها في بداية العنصر وعند نهايته.

كل الوسوم لها نفس نفس الشكل، تبدأ مع علامة أصغر من "<" وتنتهي مع علامة أكبر من ">".

بشكل عام هناك نوعان من الوسوم، وسم البداية: ثم وسم الإغلاق . الفرق بين الإثنين هي علامة "/"، توصيف المحتويات يكون بوضعها بين وسم البداية ووسم الإغلاق.

لغة HTML تتكون من هذه العناصر، لكي تتعلم HTML عليك أن تتعلم وتستخدم وسوماً مختلفة.

هل يمكنك أن تريني بعض الأمثلة؟ حسناً، العنصر em يشدد النص "يجعله مائلاً" وكل النصوص بين وسم البداية ووسم الإغلاق ستظهر بشكل مائل في المتصفح. ("em" هي اختصار "emphasis".)

المثال 1:

< em > نص مائل.

سيظهر بهذا الشكل في المتصفح:

نص مائل. العناصر h1، h2، h3، h4، h5 وh6 تستخدم للعناوين (حرف h هو اختصار "heading"), حيث h1 هو المستوى الأول من العناوين وبالتالي الأكبر حجماً، h2 يستخدم للمستوى الثاني من العناوين وهو أصغر حجماً بقليل، وh6 هو المستوى السادس والأخير من هيكلية العناوين وهو الأصغر.

مثال 2:

< h1 > هذا عنوان < h2 > هذا عنوان فرعي

ستظهر بهذا الشكل في المتصفح:

هذا عنوان

هل أنا بحاجة دائماً إلى استخدام وسم بداية ووسم إغلاق؟ كما يقولون، هناك استثناء من كل قاعدة، والاستثناء في HTML هو وجود عناصر تعتبر هي وسم البداية ووسم الإغلاق في نفس الوقت، وهي تسمى العناصر الفارغة لأنها غير مرتبطة بنص معين لكنها عناصر مستقلة تماماً، فمثلاً هناك وسم لكي لكسر النص وإجباره على الظهور في سطر جديد، هذا الوسم يظهر بهذا الشكل:
.

هل تكتب الوسوم بأحرف كبيرة أم صغيرة؟ معظم المتصفحات لن تهتم إذا كتبت الوسوم بأحرف كبيرة أو صغيرة أو خليط بين الإثنين، ، أو كلها ستعطي نفس النتائج، مع ذلك الأسلوب الصحيح هو كتابة الوسوم بالأحرف الصغيرة، لذلك عليك أن تعتاد على كتابة الوسوم بالأحرف الصغيرة.

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

موضوع رائع

مرورك الاروع