مقدمة إلى HTML

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

تعني كلمة HTML لغة ترميز النص الفائق هي لغة ترميز تستخدم في إنشاء وتصميم صفحات ومواقع الويب،

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

إنشاء أول قالب 

عندما نقول إنشاء قالب فهذا يعني إنشاء ملف يحتوي على خصائص القالب ولربما تعلم أن كل شيء في عالم البرمجة عبارة عن ملف أليس كذلك ؟

القوالب يتم حفظها في المسار التالي blog/templates/blog وهذا ما سنقوم بفعله الأن ، قم بإنشاء مسار جديد تحت إسم templates داخل مجلد blog ثم قم بإنشاء مجلد أخر داخل مجلد  templates تحت إسم blog

blog
└───templates
    └───blog

بعد ذلك قم بإنشاء ملف جديد تحت إسم post_list.html داخل المسار التالي blog/templates/blog ولا تقم بكتابة أي شيء عليه .

الأن سنقوم بفتح الموقع حتى نرى كيف يبدو http://127.0.0.1:8000/

ملاحظة : إذا كنت مازلت تعاني من خطأ TemplateDoesNotExist حاول أن تعيد تشغيل السيرفر، إفتح الطرفية قم بإيقاف السيرفر بالضغط على الزريين CTRL + C ثم إعد تشغيله من جديد بكتابة الأمر python manage.py runserver

step1

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

قم بإضافة الأكواد التالي إلى ملف القالب


<html dir='rtl'>


مرحبا بك 



إنه يعمل 

</html>

دعونا نقوم بتحديث الموقع من جديد لنرى كيف يبدو الأن

أنه يعمل أحسنت صنعا 🙂

من أهم الوسوم في HTml هو وسم <html> وهو وسم نبدأ به أي صفحة من صفحات الويب أما الوسم </html> هو ما تنتهي به هذه الأخيرة وكما تلاحظ أن جميع الأكواد موجودة داخل هاذين الوسمين .

الوسم <p> هو وسم مخصص للفقرات و </p> هو وسم لإعلان عن نهاية الفقرة .

Head و body 

كل صفحة من صفحات الويب تحتوي على العنصرين التاليين : head و body

  • Head : عنصر يحتوي على جميع المعلومات حول الصفحة والتي لا تتم عرضها .
  • Body : عنصر يحتوي على كل الأشياء التي تظهر في صفحة الويب .

نقوم بإستخدام الوسم <head> لنخبر المتصفح عن إعدادات الصفحة ونقوم بإستخدام وسم <body> لنخبره عن محتوى الصفحة .

على سبيل المثال يمكننا وضع عنصر إسم الصفحة داخل وسم <head>


<html dir='rtl'>
<head>
<title>مدونة</title>
</head>
<body>


مرحبا



إنه يعمل

</body>
</html>

قم بحفظ الملف وحدث الصفحة

 

لاحظ كيف أن المتصفح فهم أن كلمة “مدونة” عبارة عن عنوان الصفحة حيث قام بترجمة السطر التالي  <title>مدونة</title> وقام بإضافة الكلمة الموجودة بين الوسمين في عنوان الصفحة .

تخصيص القالب 

يمكننا الأن تخصيص القالب بما يناسبنا و في مايلي بعض الوسوم التي من الممكن أن تساعدنا

  • <h1>العناوين الرئيسية </h1> وسم مخصص للعناوين
  • <h2>العناوين الفرعية </h2> وسم مخصص للعناوين الفرعية
  • <em>نص ما </em> جعل من النص الموجود بين هذا الوسم مائل
  • <<br /> التوجه إلى السطر التالي
  • <a href=”http://pyarab.com”>link</a> إنشاء الروابط
  • <ul><li>العنصر الأول </li><li>العنصر الثاني</li></ul> إنشاء القوائم تماما مثل هذه القائمة
  • <div></div> تعريف جزء الصفحة

والأن إليك مثال عن الكود الكامل للقالب :


<html dir='rtl'>
<head>
<title>مدونة بايثون العربي </title>
</head>
<body>
<div> 
 <h1><a href="">مدونة بايثون العربي</a></h1> 
</div>
<div>
 
 <h2><a href="">الموضوع الأول </a></h2>
 <h5><p>نشر يوم: 14.03.2015</p></h5> 
 <p>ملخص الموضوع الأول</p> 
</div>
 
 
 
<div>
 <h2><a href="">الموضوع الثاني </a></h2>
 <h5><p>نشر يوم: 14.06.2014</p></h5>
 <p> ملخص الموضوع الثاني</p> 
</div>
 
</body>
</html>

لقد قمنا بإنشاء 3 أجزاء div .

الجزء الأول يحتوي على عنوان المدونة — العنوان والرابط

الجزء الثاني بحتوي على مواضيع المدونة مع تاريخ النشر وكانت النتيجة :

Screenshot from 2016-03-18 17:26:14

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

رفع الموقع مرة أخرى 

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

رفع الكود على موقع Github

قبل كل سيء دعونا نرى ماهي الملفات التي تم التعديل عليها منذ أخر عملية الرفع (قم بتشغيل هذه الأوامر محليا وليس على موقع PythonAnywhere)

$ git status

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


$ git add -A .

تعقيب : -A تعني الكل وهذا سيمح ل GIT بالتعرف على الملفات المحذوفة لأنه إفتراضيا يقوم فقط بالتعرف على الملفات المعدلة أو الجديدة أما النقطة في أخر السطر فهي تعني أننا بصدد تحديث .

وقبل أن نرفع جميع الملفات دعونا نرى ما عي الملفات التي سيقوم git برفعها (جميع الملفات التي سيقوم git برفها تجدها باللون الأخضر )


$ git status

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


$ git commit -m "Changed the HTML for the site."

والان جاء وقت الرفع على موقع Github


git push

سحب الكود الجديد إلى موقع pythonanywhere و إعادة تشغيل تطبيق الويب 

قم بفتح لوحة التحكم ثم توجه إلى bash console وإبدأ واحدة جديدة ثم قم بتشغيل الأوامر التالية


$ cd ~/my-first-blog
(myvenv)$ git pull
[...]

الان سيتم تحميل الكود الخاص بك وللتأكد من نجاح العملية يمكنك فتح تبويب الملفات وستجدها هناك .

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

 

أرجوا أن تقوم بدعمنا عبر نشرك والاعجاب بالموقع

اترك تعليقاً

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

Post Navigation