<!doctype html> <html lang="ar"> <head> <meta charset="utf-8"> <title>الفريق العربي للبرمجه</title> <meta name="description" content="arab team"> <meta name="author" content="ahmad"> <link rel="stylesheet" href="css/styles.css?v=1.0"> </head> <body> </body> </html>
في كثير من الشروحات تدخل مباشره أو تستعجل إتمام الشروحات دون أن يستفيد المبتدأ من أمثالي في فهم أساسيات تصميم صفحات الويب أو ثيمات سكريبتات المحتوى كالوردبريس
لهذا سأبدأ هنا بإعطائك تلميحات لتتركب في عقليتك فهم أفضل الطرق وأبسطها لتركيب أكواد html5 , css3 ..!
طلبت منك بحفظ الكود السابق وتسميته index هذا الملف مهم جدااا دعنا نقول الزائر لموقعك حين يكتب في متصفحه اسم موقعك ويطلبه أول عمل به يقوم المتصفح طلب هذا الملف ليتعرف على موقعك
دعنا نصفه بمخطط العماره قبل البناء فقبل البدء بعملية البناء نخطط للبناء على ورق هذا مكان المجلس وهذا مكان المطبخ وهذه غرفة المعيشه وهنا المدخل الأمامي هذا التخطيط نعمله بأكواد html5
ومن ثم نحدد مساحتها أو ألوان الجدران والديكور الخاص بكل غرفه نقوم به بأكواد css3 ونتحكم بها في الغالب عن طريق ملف مستقل نضع فيه الاكواد style.css ، هنا حصلنا على ملفين index لتخطيط العمل والثاني style.css لضبط المساحات والألوان والتنسيق بشكل عام .
عندما نبدأ بإنشاء الملف index المخطط نقوم أولا ودائما بوضع المعايير المطلوبه للتصميم والمتصفحات كما في بناء المنازل تحصل على المعايير والشروط المطلوبه والمسموح بها من قبل البلديه لقبول منزل شرعي
كذلك في صفحات الويب هناك معايير قياسية مطلوبة ليتعرف المتصفح عليها ويقوم بعملية البناء لتظهر بشكل منسق للزائر الكريم .
سنقوم هنا في هذه الشروحات بعمل بناء صفحة ويب بسيطه ومن ثم نقوم بتطويرها حتى يكتمل العمل ثم نقول بتعلم كيف نقلها لتكون ثيم ووردبريس هذه مراحل العمل من خلالها نتعلم المعايير القياسية - أكواد المعايير ثابته لاتطلب منك حفظها أو الإستغراق في فهمها - ولغة html5 وكذلك css3 .
دعنا مباشره نتعلم كتابة أكواد html5 ليس هناك وقت لنضيعه في المقدمات هذا المنتدى يحتوي على الكثير من المواضيع الهادفه التي تشرح لك الكثير لكن سنبدأ مباشره في التلاعب بأكواد برمجيه
لهذا نعود إلى الكود السابق يمكنك نسخه ووضعه في ملف text ونطلق عليه اسم index وتجربته على استضافتك المحلية او المحجوزة !
ماذا نتعلم من الكود السابق :
<!doctype html>
هذا أحد المعايير القياسية المطلوبة يجب يكون في بداية كل ملف html5 ببساطه هذا الكود يخبر المتصفح عن نوع النسخه المحدده لملف html
كان في الماضي يكتب بهذة الطريقة :
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
طريقه بشعة وغريبه لكن مع html5 كود بسيط ونظيف ليسهل علينا التعلم .
<html lang="ar">
هذا أول عناصر html5 نتعلمها هنا نخبر المتصفح بأن من هنا تبدأ كتابة أكواد html بواسطة
<html>
وأول ماندخل دائما تحته كود يخبر المتصفح بأن اللغه المعتمده تحمل قيمة " ar " تعني اللغه العربية وهي أحد المعايير القياسية ، تعتمد النسخه الخامسة من html على تبسيط الأوامر ليسهل تذكرها وكتابتها حقا أصبحت أكثر متعه .
" سأطلق مصطلح ( عنصر ) لنبين بأن هذا الرمز يدل على معنى معين في لغة html5 "
<head>
ثاني عنصر نتعلمه يعني قسم الرأس " head " وليس رأس الصفحه " header " التي تظهر في التصميم هذا رأس الكود يفتح به ويغلق بكتابة
</head>
توضع فيه أكواد تصف به نوع البناء وإذا كان هناك ملفات أخرى نطلبه لإكمال عملية البناء كملف style.css لاتظهر في التصميم تجد بعض منها في الكود السابق سنتعلمها الآن :
<meta charset="utf-8">
نعود إلى البساطه في كتابة الأكواد هنا العتصر وسم " meta " بداخله نخبر المتصفح بأن الترميز الذي يعمل به الملف هو " utf-8 " وهو أحد المعايير القياسية
<title>The HTML5 Herald</title>
هذا العنصر العنوان " title " يضع عنوان للملف في المتصفح كالذي تجده في أعلى برنامج المتصفح لديك وانت تشاهد صفحة المنتدى " منتديات الفريق العربي للبرمجه "
<meta name="description" content=arab team "> <meta name="author" content="ahmad">
هنا عدة أوسمه تم تسميتها " description , author " وتحمل محتوى تعرف به الموقع واسم الناشر تستفيد منه محركات البحث للتعرف على صفحتك أكثر
<link rel="stylesheet" href="css/styles.css?v=1.0">
هذا الكود بمجمله رائع وجميل ويجب أن يحتويه أي عمل تفضل أن تقوم بتنسيقه بكود css3 هذا العنصر " link " هنا نطلب ملف آخر سنقوم بإنشائه يحتوي على أكواد css3 لتقوم تنسيق عملنا في هذا الملف سنتعلم ذلك لاحقا
<body>
هنا عنصر " body " وهو ينشئ قسم آخر في الملف ونطلق عليه الجسم وكل مايحتويه هذا القسم سيظهر على الصفحه مباشره أي هنا نبدأ في تصميم الصفحه ..!
</body> </html>
هنا أحد التلميحات البرمجيه في الغالب حين تفتتح كل عنصر وتضع له المطلوب يجب إغلاقه لينتهي المتصفح من تنفيذ العنصر وينتقل إلى الآخر وعند كتابة الأكواد البرمجيه أتمنى أن تكون بحروف صغيره وكذلك يمكنك الاستغناء عن علامات التنصيص لكن أفضل كتابتها للتمييز ويكون طريقة كتابة للأكواد منظمه .
هنا تعلمنا وضع المعايير القاياسيه والشروط المطلوبه لفتح ملف index صحيح ونظيف وقابل للتنفيذ من المتصفحات وسنتعلم في يوم قادم كيف نعمل مخطط لصفحة ويب بإستخدام أكواد html5 يجب التنبيه بأن هناك من العناصر في النسخه الخامسه لاتدعمها بعض المتصفحات لذلك سنتطرق فقط إلي الخيارات المعتمده في غالبها ليظهر العمل بدون مشاكل .
أنا هنا لأتعلم منكم وحقيقة من قبل أسبوع فقط بدأت في تعلم هذه اللغه لكن تهت في الكثير من الطرق والمصادر إلى أن استقرينا على كتاب جميل ورائع وما أكتبه لكم هو ترجمه بتصرف لمحتوى الكتاب
شكرا لكم