دورة HTML - الدرس الأول ( المحررات + مبادىء أساسية )



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


دعونا نبدأ أولا بتعريف بسيط بأهم المحررات (editors ) التي يمكننا استخدامها لكتابة كود HTML ...

يمكننا كتابة كود HTML عن طريق المحررات الخاصة بالمبرمجين التالية :


  • برنامج Adobe Dreamweaver و هو أشهر برنامج لتحرير لغات برمجة الويب
  • Microsoft Expression Web
  • CoffeeCup HTML Editor

لكننا اذا أردنا أن نتعلم جيدا البرمجة فمن الأفضل استعمال المفكرة الخاصة بالويندوز ( notepad , bloc note) , أو TextEdit على ماك
استعمال محرر بسيط هو طريقة جيدة للتعلم ..
الآن فلنتبع هذه الخطوات البسيطة لكتابة أول صفحة ويب لنا :
الخطوة الأولى :
نفتح المفكرة ( notpad بالانجليزية bloc-notes بالفرنسية ) 

نذهب إلى Start
All Programs
Accessories
Notepad

الخطوة الثانية :كتابة الكود
الخطوة الثالثة : حفظ صفحة HTML 
نختار (save as  (enregister sous
عندما نريد حفظ ملف HTML فننا نختار الامتداد .html أو .htm
نحفظ الملف بهذا الشكل كمثال dzlearning.html
الخطوة الرابعة : تشغيل صفحة HTML على المتصفح
نضغط مرتين على صفحة HTML الخاصة بنا

النتيجة ستظهر بهذا الشكل



شرح بسيط للكود :

لا تقلق ان لم تكن لحد الآن قد فهمت كل الأمور سنتحدث بالتفصيل عن كل شيء خلال الدروس القادمة :)

كما رأينا في الدرس السابق
  • <!DOCTYPE html> لتعريف لغة البرمجة و الاصدار
  • صفحة HTML تبدأ ب <html> و تنتهي ب </html>
  • صفحة HTML فيها head ( رأس الصفحة ) و body جسم الصفحة
  • من خلال الوسم <head> يمكننا كتابة title أي العنوان الذي يظهر على الصفحة في الأعلى


  • الوسم <title> يكتب دائما داخل الوسم <head >
  • <h1> و <h2> و <h3> و غيرهم هم وسوم خاصة بالعناوين من الأكبر إلى الأصغر
  • <p> خاص بالفقرة عندما نريد كتابة فقرة نبدأ ب <p> و ننهي ب </p>
  • كل وسم لديه علامة بداية و نهاية( نفس وسم البداية زائد خط مائل قبله )  و محتوى يكون بين العلامتين <وسم > محتوى </ نفس  >

في الأخير قمنا ببرمجة صفحة لتشغيل أكواد HTML على المباشر دون الحاجة إلى كتابة الكود كل مرة
سنشرح الصفحة الآن
أولا ندخل الصفحة من هنا موقع تعلم

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

لمن لم يشاهد الدرس الخاص بالمدخل مدخل إلى لغة HTML 

تحياتي لاتنسونا من صالح الدعاء :)

تعليقات

إرسال تعليق

المشاركات الشائعة من هذه المدونة

دليلك الى فحص الشبكات والسيرفرات عن طريق أداة Nmap

صورة
من المحتمل أن يكون Nmap أحد أشهر أدوات الفحص الأمني. Nmap عبارة عن أداة مسح مجانية ومفتوحة المصدر للشبكات تم إنشاؤها بواسطة Gordon Lyon. يتم استخدامه لفحص السيرفرات للمنافذ المفتوحة والخدمات قيد التشغيل. في هذا المقال، سيكون لديك فهم كبير لأوامر المسح المفيدة للغاية التي تنفذها Nmap. دعنا نغوص🙂 قبل أن نبدأ، يجب أن أذكر أنه لفهم كامل، تحتاج إلى بعض الأساسيات حول الشبكات، TCP / IP ونموذج OSI. سأستخدم Kali Linux على الجهاز المستهدف Metasploitable. التنصيب: من الواضح أنه قبل استخدام Nmap ، يجب عليك تثبيته أولاً. Centos yum install nmap Debian  apt-get install nmap Ubuntu sudo apt-get install nmap Windows  بالنسبة إلى Windows، ما عليك سوى الانتقال إلى موقع الويب وتنزيله وتثبيته مثل برنامج windows المعتاد. على الرابط: https://nmap.org/book/inst-windows.html الأوامر الأساسية: nmap 10.0.0.5 الأمر الأساسي هو أمر مباشر باستخدام الاداة. فقط اكتب nmap متبوعًا بعنوان IP الذي تريد مسحه. مسح بينغ nmap 10.0.2.0/24 استخدام ال...
قراءة المزيد

دورة HTML - الدرس الخامس ( الصور و الجداول )

صورة
<!DOCTYPE html> <html> <body><p> صورة<img src=" https://www.w3schools.com/html/smiley.gif " alt="Smiley face" width="32" height="32"></p><p> صورة متحركة : <img src=" https://www.w3schools.com/html/hackanm.gif " alt="Computer man" width="48" height="48"></p><p> كود وضع صورة متحركة هو نفسه كود وضع صورة ثابتة</p></body> </html> هنا كيفية ظهور الكود :صورة: صورة متحركة :  كود وضع صورة متحركة هو نفسه كود وضع صورة ثابتة صور HTML - وسم <img> :  في لغة ال HTML نعرف الصور عن طريق الوسم <img> هذا الوسم ليس لديه محتوى و ليس لديه وسم اغلاق كما في الوسوم الاخرى من أجل اظهار الصورة داخل الوسم نستعمل src و هي اختصار ل source و يكون داخلها رابط الصورة الصيغة الخاصة بالصور في لغة html :    <img src=" رابط الصورة " alt=" نص "> في رابط الصورة ممكن ...
قراءة المزيد

تعلم برمجة Pascal الدرس الاول - مقدمه

صورة
السلام عليكم ورحمة الله وبركاته سأقدم لكم دروس فعلاً مفيده و سهله و تشرح الاساسيات بالتفصيل بإذن الله , سوف اقوم بإضافة كل درس على حدة برمجه موفقه مع باسكال بإذن الله . تعلم برمجة Pascal الدرس الاول - مقدمه عن باسكال : باسكال لغة برمجه انشئت بواسطة Niklaus Wirth في عام 1970 . كان اسمها سابقاً Blaise Pascal , عالم الرياضيات الفرنسي المشهور . لقد صنعت هذه اللغه لتعليم البرمجه ولكي تكون محل ثقه لدى المبرمجين . منذ ذلك الوقت قد اصبحت لغة البرمجه باسكال اكثر من انها فقط لغه اكاديميه و لكنّها استخدمت تجارياً ايضا . ما الذي احتاجه لأبدأ مع باسكال : قبل بداية تعلم برمجة الباسكال , تحتاج إلى مترجم باسكال (compiler) . هذا الدرس يستخدم (مترجم باسكال المجاني) : https://www.freepascal.org/ .  يمكنك الحصول على قائمه من مترجمات باسكال في https://www.freebyte....ascal_compilers . أو حمل تطبيق turbo pascal من الموقع إليكم الرابط  www.commentcamarche.net/.../telecharger-34096272- turbo - pascal برنامجك الاول : اول شئ يجب ان تفعله ان تفتح مترج...
قراءة المزيد