تصميم مواقع اون لاين

egypt-code ايجيبت كود
2024/10/01

تصميم مواقع اون لاين

ما هو 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>.

<h1>Heading 1</h1>
<h2>Heading 2</h2>

الفقرات

تُستخدم لعرض نصوص الفقرات.

<p>This is a paragraph.</p>

الروابط

تُستخدم للربط بصفحات أخرى أو بأجزاء مختلفة من الصفحة نفسها.

<a href="https://example.com">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="image.jpg" alt="Description">

تنسيق الصفحة باستخدام CSS

بينما تحدد HTML الهيكل والمحتوى، تُستخدم CSS (Cascading Style Sheets) لتنسيق مظهر الصفحة. يمكن تضمين CSS داخل مستند HTML مباشرة أو الربط به كملف خارجي.

تضمين CSS داخل مستند HTML

<style>
    body {
        background-color: lightblue;
    }

    h1 {
        color: navy;
        margin-left: 20px;
    }
</style>

الربط بملف CSS خارجي

<head>
    <link rel="stylesheet" href="styles.css">
</head>

التفاعل باستخدام JavaScript

JavaScript هي لغة برمجة تُستخدم لإضافة التفاعل والوظائف المتقدمة إلى مواقع الويب. يمكن تضمين JavaScript داخل مستند HTML أو الربط به كملف خارجي.

تصميم مواقع اون لاين

egypt-code ايجيبت كود