تعلم البرمجة بلغتي HTML - CSS :
HTML و CSS يشكلان أساس أي مشروع تطوير ويب. سواء إنشاء موقع للتجارة الإلكترونية أو مدونة أو تطبيق جوال أو أيًا كان ، فستضطر إلى تعلم لغتي HTML و CSS.
تعلم HTML و CSS يعني الدخول لعالم المبرمجين ، وبالتالي البدئ في فهمهم والتحدت متلهم.
HTML هو اختصار لـ HyperText Markup Language ، أو باللغة الفرنسية "langue hypertexte de balisage". تم إنشاء هذه اللغة في عام 1991 وتتمثل وظيفتها في هيكلة ، تصميم و بناء محتوى معين.
يرمز CSS إلى Cascading StyleSheets ، أو "أوراق الأنماط المتتالية". تم إنشاؤه في عام 1996 ويتمثل دوره في تنسيق وتنضيم المحتوى من خلال تطبيق ما يسمى بالأنماط.
• يتم استخدام HTML لترميز المحتوى ، أي لهيكته وإعطائه معنى. كما تستعمل HTML لأغراض اخرى متعدد ، كإخبار المتصفحات بالنص الذي يجب اعتباره فقرة ، والنص الذي يجب اعتباره عنوانا ، وما إذا كان هذا المحتوى عبارة عن صورة أو مقطع فيديو.
• يستخدم CSS لتطبيق الأنماط على المحتوى ، أي لتنسيقه. وبالتالي باستخدام CSS ، يمكننا تغيير لون أو حجم النص ، أو وضع مثل هذا المحتوى في مكان ما حسب شروط معينة على صفحة الويب الخاصة بنا ، أو إضافة حدود أو ظلال حول المحتوى.
الإصدارات الحالية للغتي HTML و CSS هي HTML5 و CSS3. يجب أن تعلم أنه ، على عكس الاعتقاد السائد ، لا تزال هذه الإصدارات غير مكتملة. هذا يعني أن هذه الإصدارات لا تزال قيد التطوير وأنها لا تزال من الناحية النظرية عرضة للتغيير والأخطاء.
الإصدار 5 من HTML ، تمامًا مثل الإصدار 3 من CSS ، يقدم العديد من الميزات الجديدة التي تخول استخدام مجموعة من الأدوات الجاهزة من قبل المطورين .
من بينها ، الإدراج المبسط لمقاطع الفيديو والمحتوى الصوتي والعلامات الجديدة التي تعمل على تحسين الدلالات ، لتحسين جودة هيكلة صفحاتنا بإستخدام لغة HTML .
من بين البرامج المستعملة للتكويد أو التشفير بإستخدام لغتي HTML و CSS حسب نضم التشغيل :
بالنسبة ل Windows نستخدم NotePad ++ .
بالنسبة لنظامي التتشغيل Linux أو Mac نستخدم Komodo .
نستخدم أيضا بالنسبة ل Linux : TextWrangler .
وهناك العديد من البرامج الاخرى .
هناك ثلات مصطلحات أساسية ومهمة يجب ان تفهمها في لغة HTML , وهي كالتالي : العنصر (élément) و الوسم (attribus)و العلامات (balise) :
1/ العنصر (élément) :
أولا يتم إستخدام العناصر لعريف الاشياء المستخدمة في صفحتنا ، فعلى سبيل المتال:
بإستخدام العنصر p سنتمكن من تحديد فقرة على صفحتنا :
<P> ...سنتحدت في هده الفقرة على </p>
كما سنكون قادرين على كتابة عناوين ذات أهمية مختلفة بإستخدام احد العناصر (h1,h1,h3...h6) ،أو إدراج رابط ما بإستخدام (العنصر a) .
2/علامات (attribus) :
تستعمل عادة للتعبير عن العناصر ، غالبا ما يتم التعبير عن العنصر بإستخدام زوج من العلامات ، متل :
<P> ...سنتحدت في هده الفقرة على </p>
فالعلامة الأولى في الزوج <p> تسمى علامة البداية او علامة إفتتاحية . والعلامة التانية </p> تسمى علامة النهاية أو الإغلاق . تتميز لكونها تأخد دائما نفس إسم العنصر في العلامة الافتتاحية مسبوقا بشرطة مائلة قبل إسم العنصر .
ومع ذلك ، فإن بعض العناصر تتكون فقط من علامة واحدة تسمى العلامة الوحيدة. على سبيل المثال نذكر العنصر br الذي يتم استخدامه للولوج لسطر جديد.
بالنسبة للعلامة الوحيدة نعبر عنها بإستخدام شرطة مائلة قبل إسم العنصر على سبيل المثال ،<br/> كما ان هذه الشرطة ليست إلزامية ، قد يتجاهلها بعض المطورين عمدا . ومع ذلك يفضل استخدامها لتكون الشيفرة أكثر دقة ومفهومة من قبل الاخرين .
3/ السمات أو الوسم (attribus) :
وأخيرا السمات تعطي للعناصر مؤشرات أو تعليمات إضافية .
على سبيل المثال في حالة الروابط ، نستخدم سمة للإشارة إلى الرابط ، أي إلى أي موقع يجب أن يؤدي الرابط .
يتم وضع السمات عادة داخل علامة البداية بعد إسم العنصر (أو داخل العلامة الوحيدة بعد إسم عنصرها إن امكن ) .
في البرمجة كما هو الحال في العديد من التخصصات الأخرى ، هناك قواعد. يجب إتباعها من أجل كتابة أي شيفرة .
وبالتالي ، فإن أي صفحة مكتوبة بلغة HTML يجب أن يكون لها هيكل معين ، والذي يبقى تابتا في جميع صفحات html5 . والذي يتكون من تلات عناصر رئيسية ولا غنى عنها في جميع مستندات html:
1/ العنصر <html> :
نبدأ المستند بكتابة العنصر الجدر (root element) الذي يدل على بدايته .
2/ عنصر <head >:
الذي يحتوي بشكل دائم على عنوان الصفحة <title> الذي يظهر في خانت المتصفح في الأعلى . والبيانات الوصفية (الغير مرئية للمستخدمين ولكنها ضرورية) التي تصف المستند متل العنصر <meta > الدي يستعمل لترميز محارف المستند ، والعنصر <linke> الذي يشير إلى مستند CSS المستعمل ، وعنصر <script> الدي يشير إلى شيفرة JavaScript.
بالنسبة للغات الاتينية سنختار بشكل عام القيمة "utf-8" لكي يكون محتوى الصفحة مقروء لجميع الزوار .
3/ عنصر <Body> :
الذي يضم محتوى الصفحة الضاهر للمستخدمين ، سواء صور (عنصر< img>) أو فقرات (عنصر <p>) أو جداول ...
وبالتالى ستكون الصفحة صالحة جاهزة للإستخدام ، كما أن هذه الهيكلة تبقى تابتة في جميع صفحات html5 ، بغض النظر عن الموقع المراد إنشاءه ،فالإختلاف الوحيد يبقى في المحتوى .
أول شيء يجب القيام به ، بمجرد فتح ملف جديد في محرر النصوص(éditeur de texte) الخاص بك ، هو تغيير نوعه لوضع المستند في "html" .
بعد ذلك ، لعرض ملفك في متصفح كجوجل وغيره ، لديك خياران. إما أن يكون المحرر الخاص بك لديه خيار يعرض لك معاينة المستند الخاص بك في المتصفح الذي تختاره (هذا هو الحال مع Komodo) أو سيتعين عليك حفظ المستند (على سطح المكتب ، على سبيل المثال) ، ثم انقر فوقه نقرا مزدوجا ، بكل بساطة ، حتى تفتح الصفحة في متصفحك الافتراضي.
تذكر حفظ المستند في المحرر الخاص بك في كل مرة تريد فتحه في المتصفح وتحديث الصفحة في المتصفح الخاص ، بك إذا كان المستند مفتوحا بالفعل و إلا فلن يظهر لك أي تغيير.
يبدو الأمر واضحا ولكن إذا كنت تعرف عدد الساعات التي فقدناها في محاولة معرفة سبب عدم ضهور التغييرات ... بينما نسينا ببساطة حفظ التغييرات التي تم إجراؤها مسبقا أو تحديث مستندنا .
تكمن قوة لغة html في إمكانية إدراج عناصره بين بعضها البعض ، أي إدراج عنصر وسط الآخر .
على سبيل المتال ؛ في المثال السابق قمنا بإدراج عنصر < title> ضمن عنصر < head> الدي بدوره مدرج ضمن عنصر الجدر <html> .
ومع ذلك ، إذا قمت بإدراج العناصر مع بعضها البعض ، فيجب أن تكون حريصا دائما على إغلاق العلامات بالترتيب الصحيح: العنصر الأخير الذي تم فتحه هو دائمًا أول عنصر يتم إغلاقه .
ملحوظة:
١/ لا توجد قاعدة صارمة حول المسافات في بداية الاسطر ، لكن يستحسن وضع مسافات في بداية سطور معينة ، لتحديد أولويات التعليمات البرمجية الخاصة بك ومعرفة العنصر المدرج ضمن الآخر مما يجعل الشيفرة أكثر قابلية للقراءة لك وللآخرين.
: ٢/ التعليق على الشيفرة
هذه التعليقات لن تكون مرئية للزائرين (إلا إذا دخلو للكود المصدري للصفحة)
لماذا التعليق على الشيفرة ؟
عندما تتعمق في برمجة وتطوير موقعك سيصبح الكود أطول و أكثر تعقيدا ، وبالتالي يكون التعليق ضروريا لتموقعك داخل الصفحة ولتذكيرك بسبب إستخدامك لبعض التعليمات البرمجية .
وأيضا ليكون الكود مفهوما وسهل الاستخدام للأشخاص الدين ستوزعه عنهم سواء بغرض تطويره أو التحقق منه .
بإختصار التعليق ليس جزءا لايستغنى عنه ، لكنه غالبا ما يفصل بين مبرمج عادي ومبرمج إحترافي .
تحدير :
احرص على عدم التعليق عن محتوي حساس متل كلمات المرور وغيرها ، فالجميع متاح له رئية الكود المصدري لصفحتك ، وبالتالي كود HTML .
لتكون مقتنعا إدهب لأي موقع ، ويكيبيديا على سبيل المتال ، تم نقرة على اليمين (clic droit) في الموقع وإختر "فحص العنصر " أو "عرض الكود المصدري " (afficher le code source) أو (inspecter l'élement) حسب متصفحك . وبالتالي سيكون لك الحق للولوج إلو كود html الخاص بالصفحة بغض النضر عن الموقع .
قد حان الوقت لكي نتعرف عن كيفية إنشاء فقرات ، عناوين ومعرفت كيف نقوم بالرجوع للسطر بإستخدام html .
لإنشاء فقرة نستخدم العنصر p ، يمكنك إنشاء العديد من الفقرات في نفس الصفحة فقط يجب إعادة فتح علامة <p> عند كل فقرة جديدة وإغلاقها ، كما يجب إغلاقها <p/> عند الإنتهاء من كل فقرة على حدة .
بالنسبة للرجوع إلى السطر أي للتفريق بين الأسطر نستعمل العنصر br الدي يتكون من علامة معزولة واحدة <br/> التي نضيفها في نهاية السطر المراد تفريقه عن السطر الموالي .
لكتابة عناوين مختلفة في الصفحة نستخدم العناصر h1,h2...h6 وذلك حسب أهمية العناوين .
<h1> عنوان مهم للغاية<h1/>
<h2>عنوان أقل أهمية من الأول<h2/>
...
<h6>عنوان غير مهم <h6/>
يمكن إستخدام هده العناصر إظهار العناوين بخط عريض و بأحجام مختلفة حسب درجة أهميتها.إلا أنه يفضل ألا تستخدم HTML لتنسيق المحتوى .
فما تراه هو مجرد تنسيق تلقائي فقط ، يقوم به متصفحك ، وهو تفسير مرئي لما قدمته لمتصفحك.في حين أن Css يمكن من تنضيم وتنسيق المحتوى بشكل عملي وحقيقي أكثر حسب رغبتك ، لذلك لا يجب أبدًا استخدام عنوان ذو مستوى h1 لجعل النص كبيرًا و عريض .
يتم استخدام العنصر القوي <strong>للإشارة لمحركات البحث إلى أن المحتوى له أهمية خاصة ، بحيث يتم التعامل معه بأهمية كبيرة. وبالتالي النتيجة المرئية في محركات البحت هي ذلك التنسيق التلقائي العريض اللذي يتيحه هذا العنصر .
يعتبر العنصر em قريب من العصر القوي ، له نفس الدور يستخدم للإشارة لمحتوى مهم ، لكنه أقل أهمية من المحتوى بين العلامات القوية . تتجلى أهمية إستخدام متل هده العناصر في الإشارة جيدا للكلمات الرئيسية المستهدفة في عمليات البحث .
اخيرا العنصر mark يستخدم لتسليط الضوء على محتوى ليس بالضرورة أن يكون مهما ، تكمن قوة هدا العنصر في مساعدتك على ضهور ذلك المحتوى المكتوب بين علاماته على نتائج البحث المرتبطة بأحد الزوار لموقعك .
إدراج قائمة في مستند HTML :
تُستخدم القوائم لترتيب المحتوى ، أي لمنحه ترتيبًا متماسكا . وبالتالي تقديم محتوى بشكل أفضل للمدونة على سبيل المثال .
هناك ثلاثة أنواع رئيسية من القوائم في HTML:
القوائم المرتبة ، والقوائم غير المرتبة ، والنوع الأخير الخاص نوعًا ما: قوائم التعريف. سنبدأ بقوائم مرتبة وغير مرتبة.
الفرق بين القوائم المرتبة وغير المرتبة هو أن القوائم المرتبة لها جانب من التبعية والترتيب المنطقي والتصنيف بينما القوائم الغير المرتبة عكس ذلك .
لإنشاء قائمة غير مرتبة ، سنحتاج إلى عنصرين جديدين: عنصر ul (اختصار ل unordered list ) ، والذي سيحتوي على القائمة بأكملها وعنصر li (list item ) الذي سنستخدمه لإنشاء كل عنصر في القائمة .
وفي حالة وجود علاقة تبعية ، نظام منطقي وطبيعي بين عناصر القائمة ؛ نستخدم قائمة مرتبة .
لإنشائها ، سنقوم فقط باستبدال العنصر ul بالعنصر ol (ordered list للقائمة المرتبة) .
آخر نوع من القوائم ، القائمة التعريفية ،التي تستخدم لغرض تعريف المسطلحات .
و لإنشاء قائمة تعريف ، سنحتاج إلى استخدام عنصر dl (definition list لقائمة التعريف) ، والعنصر dt (definitions term لمصطلح التعريف) والعنصر dd لتعبير عن التعريف نفسه .
هناك قاعدة واحدة فقط يجب احترامها عند إنشاء قائمة تعريف: يجب عليك دائما وضع عنصر dt قبل العنصر dd ، أي المصطلح الذي سيتم تعريفه قبل تعريفه. هذا أمر بديهي للغاية وبالتالي لا ينبغي أن يكون مشكلة بالنسبة لك.
من ناحية أخرى ، من الممكن تماما ربط العديد من المصطلحات بتعريف أو حتى عدة تعريفات بنفس المصطلح.
يمنحنا HTML إمكانية دمج القوائم داخل الأخرى بكل بساطة.
لإنشاء قوائم متداخلة ، كل ما عليك فعله هو بدء قائمة ، ثم فتح قائمة ثانية داخل عنصر (عنصر يقصد به هنا مكون من مكونات القائمة) من عناصر القائمة الأولى (من الواضح أنه يمكنك إدراج أكثر من قائمتين بتكرار نفس العملية).
فيما يلي توضيح ، على سبيل المثال إدراج أو تضمين قائمة غير مرتبة داخل قائمة مرتبة .
يتبع ...
تعليقات
إرسال تعليق