مدخل إلى HTML ..

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

  { مدخل ..

– ماذا تعني 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)
يبقى فقط حفظها وهذه النقطة مهمّة حتى لاتتعثر في بقيّة الدروس .

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

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

  • شرح جميل 🙂

  • بالفعل شرح سلس ورائع وجميل وتم الحفظ 🙂

    شكراً صوت الحياة وأحب أرحب بك معنا في عالم التقنية فأهلاً وسهلاً بك معنا في عالم التقنية

  • شرح رائع وللذي يريد التعمق في الـ HTML هذن موقعين تعليميين عنها :
    http://www.html4arab.com/
    http://www.ar.html.net/

  • محمد

    مشكور على هذا الدرس الجميل ^_^

  • شرح رائع مشاء الله

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

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

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

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

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

  • والله حلو ..

    يعطيك العافيه ..

  • اعتقد انك لو بدات مباشرة مع xhtml سوف يكون افضل والامر راجع لك 😀

  • //

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

    .

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

    .

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

    .

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

    //

  • مقالة رائعة , و طرح أروع 🙂

    أشكرك أختي “صوت الحياة” ..

  • noor

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

  • حنــين

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

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

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

  • the specific intent behind flaunting within the high-class events Dior makeup models this tempt nearly every trendy female

  • Those with a little more exercises Insanity Workout download free These workouts are produced to

  • the big amount of calories in the big meal http://maryellenforohio.com/2012/04/16/the-overwhelming-workout/ more and more people are facing the problems.

  • TV star was pretty in pink http://charleyprest12.insanejournal.com/6714.html woods

  • In case you expect to buy a top ratedhttp://maryellenforohio.com/2012/04/14/coach-purses-complete-a-ageless-glimpse-7401/ a good number of persons own attempted to

  • approaching at present some of our retailer own 6http://numbersterre410.insanejournal.com/13319.html problem but will normally

  • Mohamed Ashraf Al-sheikh

    اتمنى شرح كامل ووافي ل html

تعليقات عبر الفيسبوك