-
egypt-code ايجيبت كود
2024/05/04
تصميم مواقع الويب باستخدام html
تصميم مواقع الويب باستخدام html
ما هو HTML؟
HTML هو لغة توصيف تُستخدم لإنشاء صفحات الويب وعرض المحتوى عليها. تعمل HTML على تعريف الهيكل الأساسي للصفحة، وتُستخدم مع لغات أخرى مثل CSS (Cascading Style Sheets) و JavaScript لإضفاء الجمال والتفاعل على الموقع. تُعتبر HTML بمثابة العمود الفقري لأي صفحة ويب.
عناصر HTML الأساسية
في HTML، تُعرف العلامات أو العناصر (Tags) بأنها اللبنات الأساسية لبناء هيكل الصفحة. يُكتب كل عنصر باستخدام علامتين، علامة افتتاحية وعلامة إغلاق، وبينهما يوجد المحتوى. المثال الكلاسيكي لعناصر HTML هو كالتالي:
html
Copy code
<tagname> المحتوى </tagname>
هناك العديد من العناصر المستخدمة في HTML، مثل:
العنصر <html>: يُعتبر الجذر لأي مستند HTML. يحتوي على جميع العناصر الأخرى.
العنصر <head>: يحتوي على معلومات حول الصفحة، مثل العنوان والروابط إلى الملفات الخارجية.
العنصر <title>: يُحدد عنوان الصفحة الذي يظهر في علامة التبويب.
العنصر <body>: يحتوي على محتوى الصفحة الذي يُعرض للمستخدم.
الهيكل الأساسي لمستند HTML
الهيكل الأساسي لأي مستند HTML يشمل عادةً العناصر التالية:
html
Copy code
<!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>.
html
Copy code
<h1>Heading 1</h1>
<h2>Heading 2</h2>
الفقرات: تُستخدم لعرض نصوص الفقرات.
html
Copy code
<p>This is a paragraph.</p>
الروابط: تُستخدم للربط بصفحات أخرى أو بأجزاء مختلفة من الصفحة نفسها.
html
Copy code
<a href="https://example.com">This is a link</a>
القوائم: تُستخدم لعرض العناصر بشكل قائمة. يمكن أن تكون القوائم مرتبة أو غير مرتبة.
html
Copy code
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>
<ol>
<li>First item</li>
<li>Second item</li>
</ol>
الصور: تُستخدم لإضافة صور إلى الصفحة.
html
Copy code
<img src="image.jpg" alt="Description">
تنسيق الصفحة باستخدام CSS
بينما تحدد HTML الهيكل والمحتوى، تُستخدم CSS (Cascading Style Sheets) لتنسيق مظهر الصفحة. يمكن تضمين CSS داخل مستند HTML مباشرة أو الربط به كملف خارجي.
التعليقات