لغة الترميز HTML في تصميم المواقع




ماهي لغة الترميز HTML؟






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

وتتكون صفحة الويب من مجموعة من العناصر (Tags) أو تعرف كــ الوسوم، يكتب كل وسم بين (angle brackets) أو كما تسمى علامة أصغر من > وعلامة أكبر من <. ولا يقوم المتصفح بعرض هذه الوسوم، ولكن يقوم بعرض محتوياتها، وهناك نوعين من الوسوم.

ما هي أنواع الوسوم Tags؟

النوع الأول:

وهو عبارة عن وسم يتم عرض محتواه مباشرة في صفحة الويب، مثال <img /> و <input />.

النوع الثاني:
وهو عبارة عن وسم يصف ما بداخله من نصوص مثال <p>نص بداخل الوسم</p>، وقد يحتوي هذا الوسم بداخله على وسم آخر كعنصر فرعي لهذا الوسم ومثال على ذلك <p>نص <i>مائل</i></p> وسوف تلاحظ في هذا النوع أن كل وسم يتكون من جزئين (وسم البداية) و (وسم النهاية) وبينهما المحتوى الذي يتم عرضه في المتصفح.

الشكل التالي يوضح شرح تفصيلي لمكونات عنصر من عناصر صفحة الويب (مثال لـ رابط تشعبي - Link)

مكونات وسم الرابط التشعبي Link Or (a) Tag

سوف تلاحظ من هذا المثال أن كل عنصر (من النوع الثاني) من عناصر لغة الـ HTML يتكون من وسم البداية و وسم النهاية ويجب أن يكون إسم وسم النهاية هو نفسه إسم وسم البداية ولكن مسبوق بعلامة ( / ) أو المعروفة بإسم forward slash، وبينهما محتويات العنصر والتي تظهر في متصفح الإنترنت، وسوف تلاحظ أيضا أننا إستخدمنا وصف (attribute) للوسم، وكل وصف يحتوي على جزئين إسم وقيمة وبينهما علامة (=) ومن المثال السابق فإسم الوصف هو href والقيمة عنوان موقع إلكتروني، وكل ما سبق من أوامر (بإستثناء محتوى الوسم) لا يظهر في متصفح الإنترنت ولكن هي أوامر لمتصفح الإنترنت بإنشاء رابط تشعبي (Link) بالقيمه الموجودة في محتوى الوسم، وعند الضغط عليه يقوم المتصفح بتحويل الصفحة إلى عنوان الموقع الموجود في قيمة الوصف (بين علامات التنصيص)، ويمكن إستبدال عنوان الموقع بإسم صفحة أخرى.

ملاحظة هامة، لا يمكن إستخدام برنامج محرر النصوص Microsoft Word أو WordPad لكتابة أكواد HTML ولكن يجب إستخدام برنامج يدعم كتابة النصوص بالطريقة العادية Plain Text أو إستخدام برنامج محرر النصوص البرمجية (برنامج مخصص لكتابة الأكواد البرمجية) Text Editor ويمكنك قراءة التدوينة محرر لـ النصوص و الأكواد البرمجية (Text Editor) يدعم اللغة العربية لإختيار برنامج مناسب، ولكن لتبسيط الأمر سوف نستخدم برنامج الـ notepad الموجود في نظام التشغيل ويندوز.





متطلبات كورس  لغة الترميز HTML في تصميم المواقع  : 

1. لاتحتاج إلى أي برامج خاصة للتصميم بل يكفيك برنامج المفكرة الذي يأتي ملحقاً مع برنامج Windows أو برنامج الدفتر.
 2. سهلة التعلم حيث أنه يمكنك بعد درسين أن تقوم بتصميم صفحتك مع هذه اللغة. 
3. إن تعلم هذه اللغة تمكنك من إجراء التعديلات التي تريدها على موقعك بكل يسر وسهولة. 
4. إمكانية الكتابة باللغة العربية بسهولة.
 5. إن معرفتك لوسوم لغة HTML تمكنك من إضافة أي نصوص برمجية بكل يسر إلى صفحتك. مثل نصوص الجافا JAVA البرمجية أو JAVA Script أو نصوص DHTML الهتمل الدنميكية . 
6. كذلك تمكنك معرفتك لوسوم هذه اللغة من ترجمة النصوص البرمجية إلى اللغة العربية لكي تستخدمها في صفحاتك بلغتك. 
7. تعطيك معرفتك لهذه اللغة تحكماً دقيقاً في خصائص وجزئيات صفحتك أكثر من أي برنامج تصميم صفحات آخر. 
8. جميع برامج التصميم الجاهزة مبنية على أساس لغة HTML وهذه اللغة هي القاعدة لمثل هذه البرامج مثل برنامج Front Page والذي هو مبني كلياً على لغة HTML



قسم : Arabic Programming Courses - كورسات برمجة بالعربي شرح بسيط

عدد الدروس : 24

يوجد شهادة مجانية بعد إنتهاءك من الدورة


للذهاب الي الكورس اضغط هنا .









جرب بنفسك 

Easy Learning with HTML "Try it Yourself"

With our "Try it Yourself" editor, you can edit the HTML code and view the result:

Example

<!DOCTYPE html>
<html><head>
<title>Page Title</title>
</head><body>

<h1>This is a Heading</h1>
<p>This is a paragraph.</p>

</body></html>
Try it Yourself »

Click on the "Try it Yourself" button to see how it works.


جميع الحقوق محفوظة للمواقع .








تعليقات