قبل ما تعتمد على أداة جاهزة، افهم دور لغات الويب في بناء الصفحة وتنسيقها وإضافة التفاعل عليها، وكيف تنعكس هذه الأساسيات على شكل موقعك وسرعته لاحقًا.
ما هو HTML؟
HTML هو لغة توصيف تُستخدم لإنشاء صفحات الويب وعرض المحتوى عليها تعمل HTML على تعريف الهيكل الأساسي للصفحة وتُستخدم مع لغات أخرى مثل CSS (Cascading Style Sheets) و JavaScript لإضفاء الجمال والتفاعل على الموقع تُعتبر HTML بمثابة العمود الفقري لأي صفحة ويب.
عناصر HTML الأساسية
في HTML تُعرف العلامات أو العناصر (Tags) بأنها اللبنات الأساسية لبناء هيكل الصفحة يُكتب كل عنصر باستخدام علامتين علامة افتتاحية وعلامة إغلاق وبينهما يوجد المحتوى المثال الكلاسيكي لعناصر HTML هو كالتالي.
<tagname> المحتوى </tagname>هناك العديد من العناصر المستخدمة في HTML مثل.
العنصر
يُعتبر الجذر لأي مستند HTML يحتوي على جميع العناصر الأخرى.<html>العنصر
يحتوي على معلومات حول الصفحة مثل العنوان والروابط إلى الملفات الخارجية.<head>العنصر
يُحدد عنوان الصفحة الذي يظهر في علامة التبويب.<title>العنصر
يحتوي على محتوى الصفحة الذي يُعرض للمستخدم.<body>
الهيكل الأساسي لمستند HTML
الهيكل الأساسي لأي مستند HTML يشمل عادةً العناصر التالية.
<!DOCTYPE html>
<html>
<head>
- <title>Title of the document</title>
</head>
<body>
- <! Content goes here >
</body>
</html>
<!DOCTYPE html>
يُشير إلى أن المستند هو مستند HTML5.<html>
الجذر لجميع عناصر HTML<head>
يحتوي على بيانات التعريف (metadata) للصفحة.<title>
يُحدد عنوان الصفحة<body>
يحتوي على محتوى الصفحة
إنشاء محتوى الصفحة
بعد تعريف الهيكل الأساسي يمكننا إضافة المحتوى إلى الصفحة يمكن استخدام العديد من العناصر لإنشاء المحتوى مثل.
العناوين
تُستخدم لإبراز النص يمكن أن تكون العناوين من <h1> إلى <h6>
Heading 1
Heading 2
الفقرات
تُستخدم لعرض نصوص الفقرات
<p>This is a paragraph</p>الروابط
تُستخدم للربط بصفحات أخرى أو بأجزاء مختلفة من الصفحة نفسها.
<a href=https//examplecom>This is a link</a>القوائم
تُستخدم لعرض العناصر بشكل قائمة يمكن أن تكون القوائم مرتبة أو غير مرتبة.
<ul>
- <li>Item 1</li>
- <li>Item 2</li>
</ul>
<ol>
- <li>First item</li>
- <li>Second item</li>
</ol>
الصور
تُستخدم لإضافة صور إلى الصفحة
<img src=imagejpg alt=Description>تنسيق الصفحة باستخدام CSS
بينما تحدد HTML الهيكل والمحتوى تُستخدم CSS (Cascading Style Sheets) لتنسيق مظهر الصفحة يمكن تضمين CSS داخل مستند HTML مباشرة أو الربط به كملف خارجي.
تضمين CSS داخل مستند HTML
<style>
- body {
- backgroundcolor lightblue;
- }
- h1 {
- color navy;
- marginleft 20px;
- }
</style>
الربط بملف CSS خارجي
<head>
- <link rel=stylesheet href=stylescss>
</head>
التفاعل باستخدام JavaScript
JavaScript هي لغة برمجة تُستخدم لإضافة التفاعل والوظائف المتقدمة إلى مواقع الويب يمكن تضمين JavaScript داخل مستند HTML أو الربط به كملف خارجي.