1 تصميم برامج الحاسب اآللي د. مروه محمد الجمل
3 الفصل األول ما هي لغة HTML؟ تستخدم لوصف ما تحتويه صفحات الويب ) Pages Web ) و معنى في البداية HTML هي لغة بسيطة جداً ذلك أنها تستخدم لتحديد العناصر الموجودة في الصفحة مثل العناوين, الفقرات, األزرار, الصور, القوائم, الجداول و غيرها من األشياء التي يمكن إضافتها في صفحات الويب. نستخدم هذه اللغة لهدف واحد فقط و هو تحديد بنية صفحات الويب ً .) Pages Structure ( إذا اآلن عليك معرفة أن كلمة HTML هي إختصار لجملة Language Markup Text Hyper و هذا يعني أنها ال تعتبر لغة برمجة ) Language Programming) . مكونات صفحة الويب بشكل عام, لتبني صفحات ويب إحترافية عليك تعلم اللغات التالية و بنفس الترتيب: .1 لغة HTML من أجل تحديد العناصر التي نريد إضافتها في الصفحة. .2 لغة CSS من أجل تحسين تصميم العناصر الموجودة في الصفحة. .3 لغة JavaScript و نستخدمها إلضافة مؤثرات في صفحات الويب و لمعالجة البيانات التي يتم إدخالها و عرضها في الصفحات. يمكنك استخدام هذه اللغات الثالث فقط لبناء مواقع إلكترونية كاملة, تطبيقات للهاتف و تطبيقات للحاسوب و ليس فقط لتصميم الصفحات. إصدارات HTML من بداية ظهور المتصفحات و لغة HTML يتم تطويرها و إضافة المزيد من الميزات فيها مع كل إصدار جديد و الجميل في األمر أنه من يعرف إصدار واحد منها يمكنه بكل سهولة التعامل مع أي إصدار آخر ألن مبادئ اللغة هي نفسها. اإلصدار الذي يجب عليك تعلمه في الوقت الحالي هو اإلصدار الخامس من اللغة الذي يقال له 5HTML. هذا اإلصدار أضيف فيه العديد من الميزات المهمة التي لم يسبق إضافتها في اإلصدارات السابقة أهمها إمكانية عرض فيديوهات, أغاني و رسومات في الصفحات بكل سهولة و بشكل مباشر بدون الحاجة الستخدام خاصة لذلك, لهذا أصبح الجميع يستخدمه بدالً إضافات ) Plugins ) من باقي اإلصدارات. مراحل تطور اللغة • عام 1989 قام المهندس Lee-Berners Tim بابتكار أول مشروع برمجي هدفه مشاركة البيانات عبر شبكة النت ) Web Wide World ) و التي تختصر باألحرف WWW التي ال زلنا حتى يومنا نراها في روابط المواقع. في ذاك الوقت كان الدخول للنت صعباً ألنه لم يكن هناك متصفحات تعرض المحتوى بشكل جميل. • عام 2017 قامت شركة C3W بإضافة بعض التطويرات على على اإلصدار الخامس و قاموا بتسمية اإلصدار 5.2 HTML.
4 مفهوم المحرر المحرر ) Editor ) هو أي برنامج يمكن استخدامه للتعديل على محتوى الملفات النصية. نجد عليها محررات نصوص في العادة, أنظمة التشغيل دائما ) Editors Text ) جاهزة, فمثالً في نظام ً ويندوز يوجد محرر جاهز إسمه Notepad, و في نظام ماك يوجد محرر جاهز إسمه TextEdit, و في نظام لينكس يوجد محرر جاهز إسمه Gedit أو Leafpad أو غيرهما على حسب التوزيعة التي تستخدمها. المحررات اإلفتراضية التي نجدها جاهزة في الحاسوب ليست أفضل محررات يمكن استخدامها لكتابة كود HTML و CSS و JavaScript ألنها ال تساعدك في كتابة الكود و ال تظهر لك ألوان جميلة كما تفعل باقي المحررات المخصصة لذلك. باختيار محرر ألوانه جيدة و يكون بنفس الوقت يساعدك أثناء عند استخدام محرر بهدف كتابة كود, قم دائماً كتابة الكود. لتدرك ضرورة ذلك, الحظ كيف يظهر الكود في برنامج Notepad اإلفتراضي الموجود في ويندوز و كيف يظهر نفس الكود في برنامج جيد مثل VSCode الذي يمكنك تحميله و تثبيته بنفسك. الكود في برنامج Notepad يظهر بلون واحد كالتالي. يظهر بشكل جميل جداً نفس الكود السابق في برنامج VSCode و سهل القراءة كالتالي.
5 اآلن لكتابة كود HTML على الحاسوب يمكنك استخدام أي محرر تريده و لكننا ننصحك باستخدام VSCode على وجه الخصوص ألنه مجاني و يعتبر من أفضل و أقوى المحررات الموجودة و أسهلها في اإلستخدام. خطوات إنشاء ملف HTML هنا وضعنا خطوات إنشاء ملف HTML بواسطة برنامج VSCode و من ثم مشاهدة نتيجته بواسطة المتصفح. عليك إتباع هذه الخطوات في كل مرة تريد فيها تجربة الكود على الكمبيوتر. عند تجربة الكود على الحاسوب, في كل مرة تقوم بإجراء تعديل على ملف الـ HTML يجب أن تقوم بتحديث الصفحة المفتوحة في المتصفح مرة واحدة حتى يظهر لك نتيجة آخر تحديث للملف. عند كتابة أي كود في هذا المحرر يمكنك النقر على زر التشغيل حتى يعرض لك النتيجة بكل سهولة. مثال

My First Heading

My first paragraph