HTML هي لغة ترميز النص التشعبي التي جعلت الإنترنت ما نعرفه ونحبه. وبفضل هذه الأداة الرائعة تبدو المواقع جميلة وحديثة، كما تضمن سهولة الاستخدام. يقوم HTML ببساطة بترتيب عناصر صفحة الويب في تنسيق سهل الاستخدام. عمله مشابه لما يفعله أشخاص مثل MS Word أو OpenOffice. إنهم يحولون مجموعة كبيرة من الحروف إلى مستند يحتوي على فقرات ونص غامق وأحرف مائلة وجداول وحتى صور. تفعل لغة HTML نفس الشيء تقريبًا، مع الاختلاف الوحيد وهو أن مستنداتها معروضة في المتصفح، وإمكانيات هذه الأداة أوسع بكثير من إمكانيات محرر النصوص. تُستخدم العلامات للترميز - وهي أوامر خاصة تصف بنية صفحة الويب. وهي محاطة بين قوسين زاوية -<тег>، حتى يتمكن المتصفح من تمييزها عن الجزء الأكبر من النص. بعد ذلك، سنغطي أساسيات HTML للمبتدئين.
المحررين المرئيين
غالبًا ما يبدأ المبتدئون الذين شرعوا للتو في طريق تعلم HTML عملهم باستخدام برامج تسمح لك بإنشاء مواقع ويب دون أي معرفة. يمكنك فيها ببساطة ترتيب العناصر على الشاشة بالطريقة التي سيتم عرضها بها في المتصفح. يبدو أن هذا هو مصدر النعمة الأبدية التي تسمح لك بالتخلص من غالبية مطوري الويب. ولكن ليس كل شيء بهذه البساطة، لأن المحررين المرئيين لديهم الكثير من أوجه القصور التي تجعل من المستحيل استخدامها في مشاريع جادة.
تقوم كل هذه البرامج بإنشاء الكثير من العلامات غير الضرورية التي تجعل الصفحة النهائية غير عملية ودون المستوى الأمثل. بالطبع، في عصر الإنترنت عالي السرعة الذي نعيشه، أصبح هذا أقل أهمية من ذي قبل، ولكن هناك عددًا من الأسباب التي تجعل موقع الويب الموجز والمكتوب جيدًا أكثر عملية من نظيره الذي تم إنشاؤه في محرر مرئي. ستتم معالجة صفحة الويب التي تم إنشاؤها في مثل هذا البرنامج بشكل سيئ بواسطة روبوتات البحث، نظرًا لأن كل كيلو بايت من التعليمات البرمجية مهم بالنسبة لهم، ومن غير المرجح أن تناسب الأكواد الضخمة وغير المنطقية مع مجموعة ذوقهم. بالإضافة إلى ذلك، غالبًا ما يتخلف المحررون عن الزمن، ويصبحون غير ذي صلة، وإنفاق الموارد على تطويرهم أمر غير عملي، حيث لا يستخدم أي محترف هذه المنتجات. لذلك، يجب على أي شخص يريد العمل في مجال تطوير مواقع الويب أن يعرف أساسيات HTML.
العلامات
كما ذكرنا سابقًا، تصف العلامات بنية صفحة الويب للمتصفح. تحتوي معظمها على علامة فتح وإغلاق، ولكن ليس كلها. على سبيل المثال،
هناك أيضًا علامات فردية لا تحتاج إلى إغلاقها. فيها، يوجد المحتوى بالداخل، تمامًا كما يمكن كتابته لمعظم علامات HTML، ويقوم بتعيين خصائص العنصر. تتم الإشارة إليه في العلامة الافتتاحية ويبدو كما يلي: السمة = "..."، حيث توجد قيمة السمة بدلاً من النقاط. إن معرفة العلامات هي الخطوة الأولى والأكثر أهمية لإتقان لغة HTML. تتضمن أساسيات هذا الفن أيضًا فهم بنية صفحة الويب.
هيكل الوثيقة
يحتوي كل مستند HTML على امتداد مطابق، على سبيل المثال Index.html. بهذه الطريقة يستطيع المتصفح فهم ما يتعامل معه وعرض الصفحة بشكل صحيح. يُنصح بتخزين جميع الملفات المستخدمة لإنشاء موقع ويب في دليل واحد، مما سيجعل حياتك أسهل بكثير في المستقبل. تتطلب أساسيات لغة ترميز النص التشعبي HTML فهمًا واضحًا لبنية المستند. يبدأ بالعلامة، والذي يخبر المتصفح بإصدار HTML المستخدم في هذا المستند. في الوقت الحالي، الإصدار الخامس من اللغة مناسب، لذلك ليست هناك حاجة لاختراع أي شيء، يمكنك إدراج العلامة أعلاه بأمان في بداية أي صفحة.
ثم هناك الهياكل المزدوجة الرئيسية التي تشكل "الهيكل العظمي" للموقع. العلامة الأولى التي تتداخل فيها جميع العلامات الأخرى هي .... وأي شيء خارجها لا يتعرف عليه المتصفح كصفحة ويب، فيقوم بفتح المستند وإغلاقه. هذه العلامة مطلوبة لأي مستند. كما أنه يحتوي على العديد من العلامات المطلوبة، والتي سيتم مناقشتها أدناه.
رأس
داخل علامة
...يحتوي على معلومات فنية لن تظهر على الصفحة ولكنها مع ذلك جزء مهم من مستند HTML. يتم وضع أسس الموقع في هذا المكان؛ وهنا يتم تحديد الترميز وإدخال اسم الصفحة. وهو موجود ضمن العلامة المطلوبةوصلة
تتضمن معرفة أساسيات HTML أيضًا استخدام التصميم المتتالي أو CSS. يقومون بتعيين خصائص العناصر التي سيتم عرضها على الصفحة. يتضمن النهج الحديث لهذه المهمة نقل خصائص مثل اللون والارتفاع وموقع العنصر إلى ملف خارجي لمزيد من الراحة. لتضمين ملف CSS، استخدم العلامة . عند الانتهاء يبدو مثل هذا: حيث يشير href إلى موقع الملف، ويشير النوع إلى نوعه.
جسم
في هذا الجزء من مستند HTML يتم إنشاء الجزء المرئي من الصفحة. سيتم عرض كل ما يتم القيام به داخل "الجسم" بواسطة المتصفح. في
يتم استخدام عدد كبير من علامات HTML. الأساسيات هي تنسيق النص، والعمل مع الروابط، والأدوات الأساسية لتنظيم صفحة الويب. للبدء في العمل بلغة HTML، كل ما عليك فعله هو معرفة العلامات الأساسية والقدرة على استخدامها. وفيما يلي الأكثر شعبية:- - يستخدم لتسليط الضوء على سلسلة فرعية ستخضع لنمط خاص موصوف في CSS؛
- - إنشاء رابط على صفحة ويب؛ يتم تحديد عنوان النقل بواسطة السمة href؛
- - واحدة من العلامات الأكثر شعبية في عصرنا؛ يجب على أي شخص يقرر تعلم أساسيات لغة HTMLl أن يولي اهتمامًا خاصًا لها، نظرًا لأن هذا عنصر كتلة يتم على أساسه نصيب الأسد من المواقع الحديثة (معلمات الكتلمحددة في CSS، ويمكن وضع كتل أخرى داخل هذه العلامة)؛
تحديد فقرة من النص؛ محتوى الفقرة بين علامتي الافتتاح والختام؛
- - قائمة مرقمة عناصرها محاطة بعلامة مقترنة
- - قائمة ذات تعداد نقطي، يتم فيها تحديد العناصر بعلامة، كما هو الحال في القائمة المرقمة
-
- عناوين الوثيقة (يشير الرقم إلى مستوى العنوان، أي
- العنوان الرئيسي، والخيارات اللاحقة هي عناوينه الفرعية، بالمناسبة، عناوين المستوى
,
يكاد يكون من المستحيل العثور عليه على الإنترنت)، ومن المهم أيضًا أن تتذكر أنه لا يمكن أن يكون هناك سوى عنوان واحد لكل صفحة
;
- - نص غامق؛
- - مائل؛
- إدراج صورة على موقع ويب (هذه علامة واحدة، ولا تتطلب علامة إغلاق، ولكن يجب أن تحتوي على السمة alt، التي تحدد نص الصورة)؛
هذه ليست كل العلامات التي تحتاجها لإنشاء صفحة الويب الخاصة بك، ولكنها كافية لوضع أساسيات HTML للمبتدئين.
CSS
أدى تطوير لغة HTML إلى حقيقة أن كل علامة اكتسبت الكثير من السمات، وزادت متطلبات ظهور صفحات الويب بشكل كبير. أصبح الكود مرهقًا وغير مريح، وكان من الصعب قراءته، ناهيك عن تعديله أو تغييره. بالإضافة إلى ذلك، إذا كان موقعك يحتوي على عشر صفحات بها الكثير من العناوين المميزة باللون الأخضر، وتريد فجأة جعلها حمراء، فسيتعين عليك العمل بجد، وتغيير كل واحدة يدويًا. مع ظهور أوراق الأنماط المتتالية، أصبحت هذه العملية بسيطة ومنطقية، وأصبح كود HTML أكثر قابلية للقراءة.
تطبيق CSS
لإنشاء صفحات ويب، تحتاج إلى معرفة أساسيات HTML وCSS، لأنه الآن لا يوجد شيء يمكنك القيام به في هذا المجال دون معرفة أوراق الأنماط المتتالية. يقومون بتعيين سمات لأي عنصر ينطبق على المستند بأكمله. بهذه الطريقة يمكنك ضبط اللون لجميع العناصر مرة واحدة
من أجل ربط ملف CSS بمستند، توجد علامة ارتباط. تم وصف مبدأ استخدامه أعلى قليلاً، لكنه ليس الخيار الوحيد للجمع بين جميع الأنماط في مكان واحد. هناك علامة أخرى