البرمجةالدروس

مدخل إلى HTML ..

صوت الحياة أرسل بريدا إلكترونيا 19 سبتمبر 2008آخر تحديث: 23 مايو 2009
2 دقائق

بسم الله الرحمن الرحيم

  { مدخل ..

– ماذا تعني HTML  ؟
هو اختصار لـ ( Hyper Text Markup Language ) و تعني لغة ترابط النصوص التشعبية .

– هل تعتبر الـ HTML لغة برمجة ؟
لا . لاتعتبر لغة برمجة بالشكل المتعارف عليه كلغة ( C++, JAVA, Visual Basic ….. ect )
إنما لغة بسيطة جداً تستخدم في إنشاء صفحات الويب ، فهي لاتحتاج إلى مترجم خاص و نظام تشغيل معين .

– ماذا أستفيد من تعلّم لغة الـ (HTML) ؟
قد يقول أحدهم .. هناك كثير من البرامج تقوم بإنشاء المواقع دون الحاجة لكتابة أكواد الـ (HTML) كـ FrontPage

صحيح ، هذا الأمر ..

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

كما في اعتقادي تعلّم الـ (HTML) يساعد في فهم طريقة قراءة الأكواد ، و هو مدخل لتعلم اللغات الأخرى لأنها تعتبر لغة سلسلة وبسيطة .(بقية المقال بعد الفاصل )

– ماذا يجب علي توفيرة من برامج لأبدأ ؟

كل ماسنحتاجه هو

– برنامج " المفكرة – Notepad " وهو متوفر على كل جهاز .
– مستعرض نقوم من خلاله عرض مانكتبه من أكواد .

فقط :") ..

 البداية ..

 

سنتعرف على كيفية كتابة كود لـ (HTML) ..

قبل أن نعرف كيفية كتابة الكود .. ينبغي علينا أن نعرف مما يتكون :

تتكون مفردات لغة (HTML)  من شفرات تسمى [ TAGS ] أي الوسوم
وهي على نوعين :

1- وسم البداية ويكتب بالشكل التالي :<tag>
2- وسم النهاية ويكتب بالشكل التالي :<tag/>

نلاحظ انهما متشابهان غير أن وسم النهاية يسبقة هذه العلامة ( / )

نكتبها بالصيغة التالية (من اليسار إلى اليمين) :

http://life-voice.com/file/html/htm-tag.png

 

– مارأيكم .. أن نتعرّف على اهم الوسوم :") :

1- <html> : هو وسم تعريف للمتصفح بأننا نستخدم لغة (HTML) .
 1- <head>: الوسم الذي يحدد بداية المقطع الذي يحتوي على المعلومات الخاصة بتعريف الصفحة كـ عنوان الصفحة .
3- <title> : الوسم الذي نعرّف به عنوان الصفحة .
4- <body> : الوسم الذي يتم كتابة نصوص صفحة الويب ضمنه، بالإضافة إلى إدراج الصور والجداول وباقي محتويات الصفحة .

http://life-voice.com/file/html/htm-tags.png

امممم طيب ما رأيكم أن نقوم بتطبيق ذلك عملياً ؟! ..

1- نقوم بقتح برنامج " المفكرة – Notepad " ونكتب مايلي :

2- نقوم بحفظ الملف .. لكن لحظة ! ..
قبل حفظ الملف نحتاج لمعرفة الصيغة التي سنحفظ عليها الملف .. حتى نستطيع عرضها على " المستعرض "
* نختار " حفظ باسم – save as ".
* نكتب اسم الصفحة وليكن " first_bage.html "
نلاحظ أن الإمتداد (.html) لانه سيحفظه على هيئة ملف يستطيع المستعرض قراءته .
أما لو حفظنها بدون إضافة الإمتداد فإنه سوف يحفظه على هيئة ملف نصي (.txt ) لايستطيع المستعرض قراءته وسيعرضة كنص عادي .

3- الآن نقوم باستعراض ماكتبناه ^_^

وهذه هي النتيجة ..

 إذا وصلت إلى هذه النقطة فنكون قد تعلمنا أهم أساسيات الـ (HTML)
يبقى فقط حفظها وهذه النقطة مهمّة حتى لاتتعثر في بقيّة الدروس .

إلى ملتقى قريب .. :")

إلى ذلك الحين ..
رجاءاً..
إبقوا بخير ..

صوت الحياة أرسل بريدا إلكترونيا 19 سبتمبر 2008آخر تحديث: 23 مايو 2009
2 دقائق

‫21 تعليقات

  6. لماذا لاتوضع دروس php ومتطلبات تشغيلها مثل الوامب سيرفر وهكذا امور

    بالنسبه للشرح واضح اخوي الصغير فهمه :)

    جزاكم الله خير

  7. رائع فعلاً :)
    مع أن الأمر واضح وسهل, لكنني أعترف: لا زلت غير إيجابياً فيما يخص البرمجة والأكواد … أعترف بذلك.

    اكرر شكري للكاتب والموقع , الرائعين
    اخوكم / علي

  10. //

    الأفاضل ..
    اعتزازي وتشريفي ..
    لجميل كلامكم ..
    وطيّب ردودكم ..

    .

    الفاضل.. FAHAD
    بالنسبة للـ PHP
    خطوة خطوة وإن شاء الله نصل ..

    .

    الكريم .. ahmed-araby
    بالنسبة للـ XHTML قريبة جداً من HTML
    سواءاً بدأنا بأيهما المهم النتيجة ..
    ورأيكم .. في محل الاهتمام ..

    .

    شاكرة للجميع تواجدهم ..
    دمتم بخير ..

    //

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

  13. السلام عليكم ورحمة الله وبركاته
    اختي الفاضله اولا جزاك الله خيرا على الشرح الواضح انتي اعطيتينا خيط البدايه الذي لايستغني عنه كل مبتدأ
    ثانيا في عدة تساؤلات وااشكالات
    الامر الاول ماذا تقصدين بالمستعرض ؟؟؟؟؟ هل تقصدين به متصفح الانترنت ؟؟؟
    اذا كان كذلك فاانا طبقت مافعلتي خطوه بخطوه ولكن عندما جئت لاافتح ماطبقت طلعت لي صفحه بيضاء مافيها اي شيء !!!!!!!
    التساؤل الثاني
    انتي قلتي فبداية الدرس ان كل وسم لما نجي ننهيه نحط علامة /

    يعني قصدي مثلا الوسم body بعد ماانتهينا انهيناه ب
    طيب لماذا في الوسم تايتل او العنوان ماحطينا هذا الخط “/”

    ارجو الاجابة على تساؤلي جزاك الله خيرا

اترك تعليقاً

لن يتم نشر عنوان بريدك الإلكتروني. الحقول الإلزامية مشار إليها بـ *

زر الذهاب إلى الأعلى