مقدمة عن HTML
ما هي HTML؟
HTML (HyperText Markup Language) هي لغة ترميز تستخدم لبناء هيكل صفحات الويب. تم تطويرها في أوائل التسعينيات من قبل Tim Berners-Lee.
تاريخ HTML:
HTML 1.0 ظهرت في عام 1991، ثم HTML 2.0 في 1995، HTML 3.2 في 1997، HTML 4.01 في 1999، و HTML5 في 2014.
مميزات HTML:
- سهلة التعلم: لغة بسيطة وواضحة
- معيارية: معايير W3C
- متوافقة: تعمل على جميع المتصفحات
- قابلة للتوسع: يمكن دمجها مع CSS و JavaScript
مثال بسيط:
<!DOCTYPE html>
<html lang="ar">
<head>
<title>صفحتي الأولى</title>
</head>
<body>
<h1>مرحباً بالعالم!</h1>
<p>هذه أول صفحة HTML</p>
</body>
</html>بنية صفحة HTML
البنية الأساسية:
<!DOCTYPE html>
<html lang="ar" dir="rtl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>عنوان الصفحة</title>
</head>
<body>
<!-- المحتوى هنا -->
</body>
</html>شرح العناصر:
<!DOCTYPE html>: يحدد نوع المستند<html>: العنصر الجذر<head>: معلومات الصفحة<body>: محتوى الصفحة
الوسوم الأساسية
عناوين:
<h1>عنوان رئيسي</h1>
<h2>عنوان فرعي</h2>
<h3>عنوان أصغر</h3>
<h4>عنوان صغير</h4>
<h5>عنوان أصغر</h5>
<h6>أصغر عنوان</h6>فقرة:
<p>هذه فقرة نصية</p>
<p>فقرة أخرى</p>سطر جديد:
<p>سطر أول<br>سطر ثاني</p>تنسيق النصوص
تنسيقات النص:
<strong>نص عريض</strong>
<em>نص مائل</em>
<mark>نص مميز</mark>
<small>نص صغير</small>
<del>نص محذوف</del>
<ins>نص مضاف</ins>
<sub>نص منخفض</sub>
<sup>نص مرتفع</sup>القوائم
قائمة غير مرتبة:
<ul>
<li>عنصر 1</li>
<li>عنصر 2</li>
<li>عنصر 3</li>
</ul>قائمة مرتبة:
<ol>
<li>الخطوة الأولى</li>
<li>الخطوة الثانية</li>
<li>الخطوة الثالثة</li>
</ol>قائمة وصفية:
<dl>
<dt>HTML</dt>
<dd>لغة ترميز</dd>
<dt>CSS</dt>
<dd>لغة تنسيق</dd>
</dl>الروابط
رابط بسيط:
<a href="https://example.com">زيارة الموقع</a>رابط في نافذة جديدة:
<a href="https://example.com" target="_blank">فتح في نافذة جديدة</a>رابط بريد إلكتروني:
<a href="mailto:example@email.com">إرسال بريد</a>رابط داخلي:
<a href="#section1">انتقل للقسم</a>
<section id="section1">القسم الأول</section>الصور
إضافة صورة:
<img src="image.jpg" alt="وصف الصورة">صورة بحجم محدد:
<img src="image.jpg" alt="وصف" width="300" height="200">صورة مع رابط:
<a href="page.html">
<img src="image.jpg" alt="صورة">
</a>الجداول
جدول بسيط:
<table>
<tr>
<th>الاسم</th>
<th>العمر</th>
<th>المدينة</th>
</tr>
<tr>
<td>أحمد</td>
<td>25</td>
<td>القاهرة</td>
</tr>
<tr>
<td>محمد</td>
<td>30</td>
<td>الإسكندرية</td>
</tr>
</table>جدول مع caption:
<table>
<caption>قائمة الطلاب</caption>
<tr>
<th>الاسم</th>
<th>الدرجة</th>
</tr>
<tr>
<td>أحمد</td>
<td>95</td>
</tr>
</table>النماذج - المقدمة
ما هي النماذج؟
النماذج (Forms) تستخدم لجمع البيانات من المستخدمين وإرسالها للخادم.
<form action="/submit" method="POST">
<!-- عناصر النموذج هنا -->
</form>عناصر النماذج
Input و Textarea و Select:
<form>
<label for="name">الاسم:</label>
<input type="text" id="name" name="name">
<label for="message">الرسالة:</label>
<textarea id="message" name="message" rows="4"></textarea>
<label for="country">البلد:</label>
<select id="country" name="country">
<option value="eg">مصر</option>
<option value="sa">السعودية</option>
</select>
<button type="submit">إرسال</button>
</form>أنواع Input
أنواع Input المختلفة:
<input type="text" placeholder="نص">
<input type="email" placeholder="بريد إلكتروني">
<input type="password" placeholder="كلمة مرور">
<input type="number" min="0" max="100">
<input type="date">
<input type="time">
<input type="color">
<input type="range" min="0" max="100">
<input type="url" placeholder="رابط">
<input type="tel" placeholder="هاتف">النماذج المتقدمة
Radio و Checkbox:
<form>
<p>اختر الجنس:</p>
<input type="radio" id="male" name="gender" value="male">
<label for="male">ذكر</label>
<input type="radio" id="female" name="gender" value="female">
<label for="female">أنثى</label>
<p>اختر الاهتمامات:</p>
<input type="checkbox" id="sports" name="interests" value="sports">
<label for="sports">رياضة</label>
<input type="checkbox" id="music" name="interests" value="music">
<label for="music">موسيقى</label>
<input type="file" name="file">
</form>العناصر الدلالية
HTML5 Semantic Elements:
<header>
<h1>رأس الصفحة</h1>
</header>
<nav>
<a href="#">الرئيسية</a>
<a href="#">عن الموقع</a>
</nav>
<main>
<article>
<h2>مقال</h2>
<p>محتوى المقال</p>
</article>
</main>
<aside>
<h3>محتوى جانبي</h3>
</aside>
<footer>
<p>حقوق النشر</p>
</footer>Footer و Aside
Footer:
<footer>
<p>© 2024 جميع الحقوق محفوظة</p>
<address>
البريد: example@email.com
</address>
</footer>Aside:
<aside>
<h3>روابط مفيدة</h3>
<ul>
<li><a href="#">رابط 1</a></li>
<li><a href="#">رابط 2</a></li>
</ul>
</aside>Div و Span
Div (Block Element):
<div class="container">
<h2>عنوان</h2>
<p>محتوى</p>
</div>Span (Inline Element):
<p>هذا نص عادي <span class="highlight">نص مميز</span> ونص آخر</p>الخصائص (Attributes)
الخصائص الشائعة:
<div id="unique-id" class="my-class" data-custom="value">
محتوى
</div>
<img src="image.jpg" alt="وصف" title="نص عند التمرير">
<input type="text" required placeholder="أدخل النص" disabled>Meta Tags
Meta Tags الأساسية:
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="وصف الصفحة">
<meta name="keywords" content="كلمات مفتاحية">
<meta name="author" content="اسم المؤلف">
</head>إضافة Media
Video:
<video width="320" height="240" controls>
<source src="video.mp4" type="video/mp4">
المتصفح لا يدعم الفيديو
</video>Audio:
<audio controls>
<source src="audio.mp3" type="audio/mpeg">
المتصفح لا يدعم الصوت
</audio>iframes
إدراج محتوى خارجي:
<iframe src="https://example.com" width="800" height="600"></iframe>
<iframe src="video.html" frameborder="0" allowfullscreen></iframe>SVG و Canvas
SVG:
<svg width="100" height="100">
<circle cx="50" cy="50" r="40" fill="blue"></circle>
</svg>Canvas:
<canvas id="myCanvas" width="200" height="100"></canvas>
<script>
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.fillStyle = "red";
ctx.fillRect(0, 0, 200, 100);
</script>HTML5 APIs
Geolocation:
<button onclick="getLocation()">احصل على الموقع</button>
<script>
function getLocation() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(showPosition);
}
}
</script>LocalStorage:
localStorage.setItem("name", "أحمد");
var name = localStorage.getItem("name");
localStorage.removeItem("name");Accessibility
ARIA Attributes:
<button aria-label="إغلاق">X</button>
<div role="alert" aria-live="polite">رسالة</div>
<nav aria-label="القائمة الرئيسية">
<ul>
<li><a href="#">الرئيسية</a></li>
</ul>
</nav>SEO Basics
Meta Tags للـ SEO:
<head>
<title>عنوان الصفحة</title>
<meta name="description" content="وصف مفصل للصفحة">
<meta name="keywords" content="كلمة1, كلمة2, كلمة3">
<link rel="canonical" href="https://example.com/page">
</head>Web Workers
استخدام Web Workers:
// worker.js
self.onmessage = function(e) {
var result = e.data * 2;
self.postMessage(result);
};
// main.js
var worker = new Worker("worker.js");
worker.postMessage(10);
worker.onmessage = function(e) {
console.log(e.data); // 20
};Web Storage
LocalStorage و SessionStorage:
// LocalStorage (يبقى حتى بعد إغلاق المتصفح)
localStorage.setItem("username", "أحمد");
var user = localStorage.getItem("username");
localStorage.removeItem("username");
localStorage.clear();
// SessionStorage (يُحذف عند إغلاق التبويب)
sessionStorage.setItem("temp", "قيمة مؤقتة");
var temp = sessionStorage.getItem("temp");Responsive Images
صور متجاوبة:
<img src="image.jpg"
srcset="small.jpg 300w, medium.jpg 600w, large.jpg 1200w"
sizes="(max-width: 600px) 300px, (max-width: 1200px) 600px, 1200px"
alt="صورة متجاوبة">
<picture>
<source media="(max-width: 600px)" srcset="small.jpg">
<source media="(max-width: 1200px)" srcset="medium.jpg">
<img src="large.jpg" alt="صورة">
</picture>Best Practices
أفضل الممارسات:
- استخدم HTML5 semantic elements
- أضف alt للصور دائماً
- استخدم headings بشكل هرمي (h1 ثم h2...)
- استخدم labels مع inputs
- تحقق من صحة HTML (Validation)
- استخدم indentation واضح
- أضف comments للكود المعقد
مشروع متوسط
صفحة شخصية بسيطة:
<!DOCTYPE html>
<html lang="ar" dir="rtl">
<head>
<meta charset="UTF-8">
<title>صفحتي الشخصية</title>
</head>
<body>
<header>
<h1>أحمد محمد</h1>
<nav>
<a href="#about">عنّي</a>
<a href="#skills">المهارات</a>
<a href="#contact">اتصل بي</a>
</nav>
</header>
<main>
<section id="about">
<h2>عنّي</h2>
<p>مطور ويب متحمس</p>
</section>
<section id="skills">
<h2>المهارات</h2>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
</section>
<section id="contact">
<h2>اتصل بي</h2>
<form>
<input type="email" placeholder="بريدك الإلكتروني">
<textarea placeholder="رسالتك"></textarea>
<button type="submit">إرسال</button>
</form>
</section>
</main>
<footer>
<p>© 2024 جميع الحقوق محفوظة</p>
</footer>
</body>
</html>Validation
التحقق من صحة HTML:
استخدم أدوات التحقق للتأكد من صحة كود HTML.
- W3C Validator: https://validator.w3.org/
- HTMLHint: أداة للتحقق من الأخطاء
- VS Code Extensions: إضافات للتحقق التلقائي
أخطاء شائعة:
- نسيان إغلاق الوسوم
- استخدام attributes غير صحيحة
- عدم استخدام semantic elements
- نسيان alt للصور
مشروع تطبيقي كامل
موقع مدونة كامل:
<!DOCTYPE html>
<html lang="ar" dir="rtl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>مدونتي</title>
</head>
<body>
<header>
<h1>مدونتي الشخصية</h1>
<nav>
<ul>
<li><a href="index.html">الرئيسية</a></li>
<li><a href="about.html">عنّي</a></li>
<li><a href="contact.html">اتصل بي</a></li>
</ul>
</nav>
</header>
<main>
<article>
<header>
<h2>عنوان المقال</h2>
<time datetime="2024-01-15">15 يناير 2024</time>
</header>
<section>
<p>محتوى المقال...</p>
<img src="article-image.jpg" alt="صورة المقال">
</section>
<footer>
<p>كاتب: أحمد محمد</p>
</footer>
</article>
<aside>
<h3>مقالات ذات صلة</h3>
<ul>
<li><a href="#">مقال 1</a></li>
<li><a href="#">مقال 2</a></li>
</ul>
</aside>
</main>
<footer>
<p>© 2024 جميع الحقوق محفوظة</p>
<address>
البريد: blog@example.com
</address>
</footer>
</body>
</html>