About Us
المقدمة: HTML - حجر الأساس لعالم الويب
لو فكرت يومًا إزاي المواقع اللي بتدخل عليها كل يوم شغالة، فالسر كله في HTML! 😎 دي اللغة اللي بتحدد هيكل أي صفحة ويب، ومن غيرها، الإنترنت كان هيبقى مجرد سطور نصية مملة. في الدليل ده، هنغوص في HTML بطريقة سهلة وممتعة، حتى لو عمرك ما كتبت سطر كود قبل كده!
HTML هي اختصار لـ HyperText Markup Language، ودي ببساطة اللغة اللي بتستخدمها المتصفحات عشان تفهم وتعرض صفحات الويب. مش لغة برمجة زي JavaScript، لكنها المسؤولة عن تنظيم المحتوى داخل الصفحة.
الفرق بين HTML, CSS, و JavaScript:
- HTML: مسؤولة عن الهيكل الأساسي للصفحة (العظام).
- CSS: مسؤولة عن الشكل والتصميم (الجلد والملابس).
- JavaScript: مسؤولة عن التفاعل والحركة (العقل والعضلات).
الهيكل الأساسي لصفحة HTML
أي صفحة HTML لازم يكون لها هيكل أساسي، تعالَ نشوف مثال:
<!DOCTYPE html>
<html lang="ar">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>صفحة HTML الأولى</title>
<style id="wpr-lazyload-bg-container"></style><style id="wpr-lazyload-bg-exclusion"></style>
<noscript>
<style id="wpr-lazyload-bg-nostyle">.elementor-7543 .elementor-element.elementor-element-19f619f4:not(.elementor-motion-effects-element-type-background), .elementor-7543 .elementor-element.elementor-element-19f619f4 > .elementor-motion-effects-container > .elementor-motion-effects-layer{--wpr-bg-09594bac-bd7f-4865-b0db-c599bbf7e930: url('https://mamdouh-ghaneemy.com/wp-content/uploads/2025/02/bg-2@2x-1.jpg');}.rll-youtube-player .play{--wpr-bg-d8de641f-d5a8-4785-8812-06f09a2392cd: url('https://mamdouh-ghaneemy.com/wp-content/plugins/wp-rocket/assets/img/youtube.png');}</style>
</noscript>
<script type="application/javascript">const rocket_pairs = [{"selector":".elementor-7543 .elementor-element.elementor-element-19f619f4:not(.elementor-motion-effects-element-type-background), .elementor-7543 .elementor-element.elementor-element-19f619f4 > .elementor-motion-effects-container > .elementor-motion-effects-layer","style":".elementor-7543 .elementor-element.elementor-element-19f619f4:not(.elementor-motion-effects-element-type-background), .elementor-7543 .elementor-element.elementor-element-19f619f4 > .elementor-motion-effects-container > .elementor-motion-effects-layer{--wpr-bg-09594bac-bd7f-4865-b0db-c599bbf7e930: url('https:\/\/mamdouh-ghaneemy.com\/wp-content\/uploads\/2025\/02\/bg-2@2x-1.jpg');}","hash":"09594bac-bd7f-4865-b0db-c599bbf7e930","url":"https:\/\/mamdouh-ghaneemy.com\/wp-content\/uploads\/2025\/02\/bg-2@2x-1.jpg"},{"selector":".rll-youtube-player .play","style":".rll-youtube-player .play{--wpr-bg-d8de641f-d5a8-4785-8812-06f09a2392cd: url('https:\/\/mamdouh-ghaneemy.com\/wp-content\/plugins\/wp-rocket\/assets\/img\/youtube.png');}","hash":"d8de641f-d5a8-4785-8812-06f09a2392cd","url":"https:\/\/mamdouh-ghaneemy.com\/wp-content\/plugins\/wp-rocket\/assets\/img\/youtube.png"}]; const rocket_excluded_pairs = [];</script></head>
<body>
<h1>مرحبًا بك في HTML</h1>
<p>هذه هي أول صفحة HTML لك!</p>
<script>var rocket_beacon_data = {"ajax_url":"https:\/\/mamdouh-ghaneemy.com\/wp-admin\/admin-ajax.php","nonce":"28fc363fbd","url":"https:\/\/mamdouh-ghaneemy.com\/article-temp","is_mobile":false,"width_threshold":1600,"height_threshold":700,"delay":500,"debug":null,"status":{"atf":true,"lrc":true},"elements":"img, video, picture, p, main, div, li, svg, section, header, span","lrc_threshold":1800}</script><script data-name="wpr-wpr-beacon" src='https://mamdouh-ghaneemy.com/wp-content/plugins/wp-rocket/assets/js/wpr-beacon.min.js' async></script></body>
</html>
📌 شرح سريع:
<head>: بيشمل المعلومات اللي مش بتظهر مباشرة، زي العنوان والترميز.
<html>: ده العنصر الرئيسي اللي بيحتوي كل عناصر الصفحة.
<body>: هنا بنكتب المحتوى الفعلي اللي هيظهر للمستخدم.
أهم الوسوم في HTML 🔥
عناوين النصوص :
<h1>العنوان الرئيسي</h1>
<h2>العنوان الفرعي</h2>
<h3>عنوان أصغر</h3>
الفقرات :
<p>هذه فقرة نصية داخل HTML.</p>
الروابط :
<a href="https://example.com" target="_blank" rel="noopener">اضغط هنا</a>
الصور:
<img decoding="async" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%200%200'%3E%3C/svg%3E" alt="وصف الصورة" data-lazy-src="image.jpg"><noscript><img decoding="async" src="image.jpg" alt="وصف الصورة"></noscript>
القوائم: الغير مرتبة
<ul>
<li>عنصر 1</li>
<li>عنصر 2</li>
</ul>
القوائم: مرتبة
<ol>
<li>الأول</li>
<li>الثاني</li>
</ol>
الجداول:
<table>
<tr><th>اسم</th><th>العمر</th></tr>
<tr><td>أحمد</td><td>25</td></tr>
</table>
النماذج:
<form>
<input type="text" placeholder="اسمك">
<button type="submit">إرسال</button>
</form>
HTML5 وأهم الميزات الجديدة 🚀
HTML5 جابت تطورات خطيرة، منها:
وسوم جديدة:
<section>, <article>, <nav>, <footer> لتنظيم المحتوى بشكل أفضل.
دعم الوسائط المتعددة:
<video controls>
<source src="video.mp4" type="video/mp4">
</video>
التخزين المحلي:
localStorage و sessionStorage بدل الكوكيز.
بناء صفحة ويب بسيطة 👨💻
يلا نعمل مشروع صغير! هننشئ صفحة سيرة ذاتية (CV):
<!DOCTYPE html>
<html lang="ar">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>سيرتي الذاتية</title>
<style id="wpr-lazyload-bg-container"></style><style id="wpr-lazyload-bg-exclusion"></style>
<noscript>
<style id="wpr-lazyload-bg-nostyle">.elementor-7543 .elementor-element.elementor-element-19f619f4:not(.elementor-motion-effects-element-type-background), .elementor-7543 .elementor-element.elementor-element-19f619f4 > .elementor-motion-effects-container > .elementor-motion-effects-layer{--wpr-bg-09594bac-bd7f-4865-b0db-c599bbf7e930: url('https://mamdouh-ghaneemy.com/wp-content/uploads/2025/02/bg-2@2x-1.jpg');}.rll-youtube-player .play{--wpr-bg-d8de641f-d5a8-4785-8812-06f09a2392cd: url('https://mamdouh-ghaneemy.com/wp-content/plugins/wp-rocket/assets/img/youtube.png');}</style>
</noscript>
<script type="application/javascript">const rocket_pairs = [{"selector":".elementor-7543 .elementor-element.elementor-element-19f619f4:not(.elementor-motion-effects-element-type-background), .elementor-7543 .elementor-element.elementor-element-19f619f4 > .elementor-motion-effects-container > .elementor-motion-effects-layer","style":".elementor-7543 .elementor-element.elementor-element-19f619f4:not(.elementor-motion-effects-element-type-background), .elementor-7543 .elementor-element.elementor-element-19f619f4 > .elementor-motion-effects-container > .elementor-motion-effects-layer{--wpr-bg-09594bac-bd7f-4865-b0db-c599bbf7e930: url('https:\/\/mamdouh-ghaneemy.com\/wp-content\/uploads\/2025\/02\/bg-2@2x-1.jpg');}","hash":"09594bac-bd7f-4865-b0db-c599bbf7e930","url":"https:\/\/mamdouh-ghaneemy.com\/wp-content\/uploads\/2025\/02\/bg-2@2x-1.jpg"},{"selector":".rll-youtube-player .play","style":".rll-youtube-player .play{--wpr-bg-d8de641f-d5a8-4785-8812-06f09a2392cd: url('https:\/\/mamdouh-ghaneemy.com\/wp-content\/plugins\/wp-rocket\/assets\/img\/youtube.png');}","hash":"d8de641f-d5a8-4785-8812-06f09a2392cd","url":"https:\/\/mamdouh-ghaneemy.com\/wp-content\/plugins\/wp-rocket\/assets\/img\/youtube.png"}]; const rocket_excluded_pairs = [];</script></head>
<body>
<header>
<h1>أحمد محمد</h1>
<p>مطور ويب ومصمم UI/UX</p>
</header>
<section>
<h2>المهارات</h2>
<ul>
<li>HTML, CSS, JavaScript</li>
<li>Vue.js, React</li>
<li>WordPress, SEO</li>
</ul>
</section>
<script>var rocket_beacon_data = {"ajax_url":"https:\/\/mamdouh-ghaneemy.com\/wp-admin\/admin-ajax.php","nonce":"28fc363fbd","url":"https:\/\/mamdouh-ghaneemy.com\/article-temp","is_mobile":false,"width_threshold":1600,"height_threshold":700,"delay":500,"debug":null,"status":{"atf":true,"lrc":true},"elements":"img, video, picture, p, main, div, li, svg, section, header, span","lrc_threshold":1800}</script><script data-name="wpr-wpr-beacon" src='https://mamdouh-ghaneemy.com/wp-content/plugins/wp-rocket/assets/js/wpr-beacon.min.js' async></script></body>
</html>
الأخطاء الشائعة في HTML 🚨
❌ عدم إغلاق الوسوم بشكل صحيح.
❌ استخدام وسوم قديمة مثل <font>.
❌ نسيان alt للصور، وده بيأثر على الـ SEO.
تحسين SEO باستخدام HTML 🏆
استخدم <title> و <meta description> كويس.
اهتم بالعناوين <h1>، <h2>.
أضف نص بديل للصور <img alt="">.
🚀 موارد إضافية
- 📌 MDN HTML Docs
- 📌 W3Schools HTML Tutorial
الخاتمة 🎉
مبروك، دلوقتي عندك أساس قوي في HTML! جرب تكتب أول صفحة بنفسك، وهتلاقي متعة رهيبة في بناء الويب! 😉🔥