HTML
HTML مقدمة إلى
HTML هي لغة ترميز تستخدم لبناء وتنظيم محتوى صفحات الويب. يُعتبر HTML أحد أركان تطوير الويب ويتمثل دوره الرئيسي في وصف الهيكل الأساسي لصفحة الويب. لفهم HTML بشكل أفضل، يمكن تقسيمه إلى عناصر (أو علامات) تشير إلى أقسام مختلفة داخل صفحة الويب.
: البداية والنهاية
كل عنصر في HTML يتكون من علامة بداية وعلامة نهاية. على سبيل المثال، لتحديد فقرة نصية، يمكن استخدام العلامات `<p>` و `</p>` كما يلي:
```html
<p>هذا هو نص الفقرة.</p>
```
في هذا المثال، `<p>` تشير إلى بداية الفقرة، و `</p>` تشير إلى نهايتها.
: العناصر الرئيسية
: 1. `<html>` و `<body>` و `<head>`
```html
<!DOCTYPE html>
<html>
<head>
<title>عنوان الصفحة</title>
</head>
<body>
<h1>عنوان رئيسي</h1>
<p>هذا هو محتوى الصفحة.</p>
</body>
</html>
```
- `<html>`: تعريف بداية ونهاية مستند HTML.
- `<head>`: يحتوي على المعلومات الرئيسية حول المستند مثل عنوان الصفحة.
- `<body>`: يحتوي على محتوى الصفحة مثل النصوص والصور.
:2. العناصر النصية
```html
<p>هذا هو فقرة نصية.</p>
<h1>عنوان رئيسي</h1>
```
- `<p>`: تعريف فقرة نصية.
- `<h1>` إلى `<h6>`: تعريف عناوين رئيسية بأحجام مختلفة.
: 3. `<a>` (الروابط)
```html
<a href="https://www.example.com">زيارة مثال</a>
```
- `<a>`: تعريف رابط وتحديد عنوان الوجهة باستخدام `href`.
:4. `<img>` (الصور)
```html
<img src="صورة.jpg" alt="وصف الصورة">
```
- `<img>`: تعريف صورة وتحديد مصدر الصورة باستخدام `src` ووصف الصورة باستخدام `alt`.
: مثال بسيط
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>صفحة HTML بسيطة</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
color: #333;
margin: 20px;
}
header {
text-align: center;
padding: 10px;
background-color: #333;
color: #fff;
}
main {
padding: 20px;
}
footer {
text-align: center;
padding: 10px;
background-color: #333;
color: #fff;
position: fixed;
bottom: 0;
width: 100%;
}
</style>
</head>
<body>
<header>
<h1>مرحبًا بك في صفحة HTML البسيطة</h1>
</header>
<main>
<p>هذه صفحة HTML توضح بعض العناصر الأساسية.</p>
<h2>ما هي HTML؟</h2>
<p>HTML هي لغة توصيف النص الفائقة وتستخدم لبناء صفحات الويب.</p>
<h2>لماذا تعلم HTML؟</h2>
<p>تعلم HTML يعد خطوة أساسية لفهم كيفية بناء وتصميم صفحات الويب. إنه أحد أساسيات تطوير الويب.</p>
</main>
<footer>
<p>© 2024 صفحة HTML بسيطة - تعلم HTML بسهولة</p>
</footer>
</body>
</html>