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
لا يوجد أي أخطاء بعد الأن فألف مبروك لك 
على كل حال الموقع لا يعرض أي شيء ماعدا صفحة بيضاء وهذا لأن القالب فارغ ولا يحتوي على أي شيء أيضا ، إذن نحن بحاجة إلى إصلاح هذا .
قم بإضافة الأكواد التالي إلى ملف القالب
<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 .
الجزء الأول يحتوي على عنوان المدونة — العنوان والرابط
الجزء الثاني بحتوي على مواضيع المدونة مع تاريخ النشر وكانت النتيجة :
ولكن لحد الساعة نحن نملك قالب ميت أي أنه معلوماته غير محدثة و لا تحدث تلقائيا في حالة نشر مواضيع جديدة، ما الذي اريد أن أصل إليه هو بمجرد نشر مواضيع جديدة على لوحة التحكم يتم عرضها مباشرة على الصفحة الرئيسية وهذا ما سنقوم به .
رفع الموقع مرة أخرى
من المهم أن نرى جميع الأعمال التي قمنا بها على شبكة الأنترنيت حتى يطلع عليها الجميع فدعونا نقوم برفع التحديثات على منصة 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 [...]
الان سيتم تحميل الكود الخاص بك وللتأكد من نجاح العملية يمكنك فتح تبويب الملفات وستجدها هناك .
بعد ذلك توجه إلى تبويب تطبيق الويب وقم بعداة تشغيله وسيكون موقع على شبكة الأنترنيت .