Web Development CYS
Photo
HTML5 (Hypertext Markup Language)
هي أحدث إصدار من لغة ترميز النص التشعبي (HTML)، وهي اللغة الأساسية المستخدمة لإنشاء صفحات الويب وتنسيق محتواها. تم تطوير HTML5 لتحسين تجربة الويب من خلال توفير ميزات متقدمة مثل دعم الوسائط المتعددة (الفيديو والصوت)، الرسومات التفاعلية، وأفضلية الأداء على الأجهزة المحمولة.
هي أحدث إصدار من لغة ترميز النص التشعبي (HTML)، وهي اللغة الأساسية المستخدمة لإنشاء صفحات الويب وتنسيق محتواها. تم تطوير HTML5 لتحسين تجربة الويب من خلال توفير ميزات متقدمة مثل دعم الوسائط المتعددة (الفيديو والصوت)، الرسومات التفاعلية، وأفضلية الأداء على الأجهزة المحمولة.
Web Development CYS
Photo
تاريخ HTML والإصدارات السابقة
1. HTML 1.0 (1993)
أول إصدار رسمي للغة HTML، وكان بسيطًا جدًا، حيث يدعم فقط النصوص والصور والروابط.
2. HTML 2.0 (1995)
أضاف تحسينات طفيفة، مثل دعم الجداول والنماذج، لكنه ظل محدودًا مقارنة بالإصدارات اللاحقة.
3. HTML 3.2 (1997)
أُدخلت تحسينات كبيرة، مثل دعم الجداول المتقدمة، النصوص المنسقة، واستخدام JavaScript.
4. HTML 4.01 (1999)
أضاف دعمًا أفضل للنماذج (Forms)، وتحسين التعامل مع الأنماط عبر CSS، بالإضافة إلى دعم الإطارات (Frames).
5. XHTML 1.0 (2000)
كان محاولة لتحسين HTML بجعلها أكثر تنظيمًا وفقًا لمعايير XML، لكنها لم تحظَ بانتشار واسع.
6. HTML5 (2014 - رسميًا)
أحدث إصدار يتم تطويره بواسطة W3C وWHATWG، مع ميزات متطورة تناسب الويب الحديث.
1. HTML 1.0 (1993)
أول إصدار رسمي للغة HTML، وكان بسيطًا جدًا، حيث يدعم فقط النصوص والصور والروابط.
2. HTML 2.0 (1995)
أضاف تحسينات طفيفة، مثل دعم الجداول والنماذج، لكنه ظل محدودًا مقارنة بالإصدارات اللاحقة.
3. HTML 3.2 (1997)
أُدخلت تحسينات كبيرة، مثل دعم الجداول المتقدمة، النصوص المنسقة، واستخدام JavaScript.
4. HTML 4.01 (1999)
أضاف دعمًا أفضل للنماذج (Forms)، وتحسين التعامل مع الأنماط عبر CSS، بالإضافة إلى دعم الإطارات (Frames).
5. XHTML 1.0 (2000)
كان محاولة لتحسين HTML بجعلها أكثر تنظيمًا وفقًا لمعايير XML، لكنها لم تحظَ بانتشار واسع.
6. HTML5 (2014 - رسميًا)
أحدث إصدار يتم تطويره بواسطة W3C وWHATWG، مع ميزات متطورة تناسب الويب الحديث.
لماذا HTML5 مهمة؟
تسهّل تطوير مواقع ويب تفاعلية وحديثة.
تقلل الاعتماد على الإضافات مثل Flash وSilverlight.
تدعم المعايير الحديثة مثل الاستجابة (Responsive Design).
تجعل تجربة المستخدم أفضل وأسرع، خاصة على الهواتف المحمولة.
تسهّل تطوير مواقع ويب تفاعلية وحديثة.
تقلل الاعتماد على الإضافات مثل Flash وSilverlight.
تدعم المعايير الحديثة مثل الاستجابة (Responsive Design).
تجعل تجربة المستخدم أفضل وأسرع، خاصة على الهواتف المحمولة.
قائمة بجميع عناصر HTML5 مع شرح مفصل لوظيفتها واستخدامها وأهم خصائصها 👇
1. العناصر الهيكلية (Structural Elements)
تُستخدم لتنظيم الصفحة وتحديد أقسامها الأساسية
<html>: الجذر الرئيسي للصفحة، يحتوي على كل عناصر HTML.
<head>: يحتوي على بيانات وصفية مثل <title>, <meta>, <link>, <style>, <script>.
<body>: يحتوي على جميع المحتويات المرئية للمستخدم.
<header>: يستخدم لرأس الصفحة أو جزء من الصفحة، يحتوي عادةً على العنوان والشعارات والقوائم.
<nav>: يحدد قسمًا خاصًا بروابط التنقل في الموقع.
<main>: يمثل المحتوى الرئيسي للصفحة، يجب ألا يتكرر في نفس الصفحة.
<section>: يحدد قسماً من المحتوى يركز على موضوع معين.
<article>: يُستخدم للمقالات والمحتويات المستقلة مثل التدوينات أو الأخبار.
<aside>: يستخدم لإضافة معلومات جانبية مثل الإعلانات أو الروابط ذات الصلة.
<footer>: يحتوي على معلومات تذييل الصفحة مثل حقوق النشر وروابط الاتصال.
<address>: يستخدم لعرض معلومات الاتصال الخاصة بالموقع أو الكاتب.
<div>: عنصر عام لإنشاء أقسام بدون معنى دلالي محدد، يستخدم مع CSS لتنسيق المحتوى.
تُستخدم لتنظيم الصفحة وتحديد أقسامها الأساسية
<html>: الجذر الرئيسي للصفحة، يحتوي على كل عناصر HTML.
<head>: يحتوي على بيانات وصفية مثل <title>, <meta>, <link>, <style>, <script>.
<body>: يحتوي على جميع المحتويات المرئية للمستخدم.
<header>: يستخدم لرأس الصفحة أو جزء من الصفحة، يحتوي عادةً على العنوان والشعارات والقوائم.
<nav>: يحدد قسمًا خاصًا بروابط التنقل في الموقع.
<main>: يمثل المحتوى الرئيسي للصفحة، يجب ألا يتكرر في نفس الصفحة.
<section>: يحدد قسماً من المحتوى يركز على موضوع معين.
<article>: يُستخدم للمقالات والمحتويات المستقلة مثل التدوينات أو الأخبار.
<aside>: يستخدم لإضافة معلومات جانبية مثل الإعلانات أو الروابط ذات الصلة.
<footer>: يحتوي على معلومات تذييل الصفحة مثل حقوق النشر وروابط الاتصال.
<address>: يستخدم لعرض معلومات الاتصال الخاصة بالموقع أو الكاتب.
<div>: عنصر عام لإنشاء أقسام بدون معنى دلالي محدد، يستخدم مع CSS لتنسيق المحتوى.
2. عناصر النصوص (Text Content Elements)
تستخدم لعرض النصوص وتنسيقها
<h1> إلى <h6>: عناوين ذات مستويات مختلفة، <h1> هو الأهم و <h6> هو الأقل أهمية.
<p>: يستخدم لإنشاء فقرة نصية.
<span>: عنصر عام يستخدم لتنسيق النصوص داخل العناصر الأخرى بدون تأثير هيكلي.
<strong>: يجعل النص عريضًا (Bold) ويضيف معنى دلالي بأنه مهم.
<em>: يجعل النص مائلًا (Italic) مع دلالة على التأكيد.
<blockquote>: يُستخدم لاقتباس نص طويل من مصدر آخر.
<q>: يُستخدم لاقتباس قصير داخل النص.
<code>: يعرض النص بتنسيق كود برمجي.
<pre>: يُستخدم لعرض النصوص كما هي دون تأثير HTML، مع الحفاظ على المسافات والتنسيق.
<mark>: يحدد النصوص المهمة بوضع خلفية مميزة.
<cite>: يُستخدم لذكر مصادر الأعمال مثل الكتب والمقالات.
<abbr>: يعرض الاختصارات مع توفير وصف لها عند تمرير الفأرة.
تستخدم لعرض النصوص وتنسيقها
<h1> إلى <h6>: عناوين ذات مستويات مختلفة، <h1> هو الأهم و <h6> هو الأقل أهمية.
<p>: يستخدم لإنشاء فقرة نصية.
<span>: عنصر عام يستخدم لتنسيق النصوص داخل العناصر الأخرى بدون تأثير هيكلي.
<strong>: يجعل النص عريضًا (Bold) ويضيف معنى دلالي بأنه مهم.
<em>: يجعل النص مائلًا (Italic) مع دلالة على التأكيد.
<blockquote>: يُستخدم لاقتباس نص طويل من مصدر آخر.
<q>: يُستخدم لاقتباس قصير داخل النص.
<code>: يعرض النص بتنسيق كود برمجي.
<pre>: يُستخدم لعرض النصوص كما هي دون تأثير HTML، مع الحفاظ على المسافات والتنسيق.
<mark>: يحدد النصوص المهمة بوضع خلفية مميزة.
<cite>: يُستخدم لذكر مصادر الأعمال مثل الكتب والمقالات.
<abbr>: يعرض الاختصارات مع توفير وصف لها عند تمرير الفأرة.
❤2
3. عناصر الوسائط المتعددة (Multimedia Elements)
تستخدم لإضافة الصور والصوت والفيديو
<img>: لعرض الصور، يتطلب src لتحديد مصدر الصورة.
<audio>: لتشغيل الملفات الصوتية، يدعم صيغ مثل MP3 و OGG.
<video>: لتشغيل مقاطع الفيديو، يدعم صيغ مثل MP4 و WebM.
<source>: يُستخدم داخل <audio> و <video> لتوفير مصادر متعددة.
<track>: يُستخدم مع <video> لإضافة ترجمة أو تعليقات.
<figure>: يُستخدم لاحتواء الصور أو الرسوم مع وصف توضيحي.
<figcaption>: يُستخدم لوصف محتوى <figure>.
<canvas>: يُستخدم لرسم الرسوميات باستخدام JavaScript.
<svg>: يُستخدم لإنشاء رسومات متجهة قابلة للتحجيم.
تستخدم لإضافة الصور والصوت والفيديو
<img>: لعرض الصور، يتطلب src لتحديد مصدر الصورة.
<audio>: لتشغيل الملفات الصوتية، يدعم صيغ مثل MP3 و OGG.
<video>: لتشغيل مقاطع الفيديو، يدعم صيغ مثل MP4 و WebM.
<source>: يُستخدم داخل <audio> و <video> لتوفير مصادر متعددة.
<track>: يُستخدم مع <video> لإضافة ترجمة أو تعليقات.
<figure>: يُستخدم لاحتواء الصور أو الرسوم مع وصف توضيحي.
<figcaption>: يُستخدم لوصف محتوى <figure>.
<canvas>: يُستخدم لرسم الرسوميات باستخدام JavaScript.
<svg>: يُستخدم لإنشاء رسومات متجهة قابلة للتحجيم.
4. عناصر النماذج (Form Elements)
تُستخدم لجمع بيانات المستخدم
<form>: يُحدد نموذجًا لإدخال البيانات.
<input>: حقل إدخال، له أنواع متعددة مثل text, password, email, number, checkbox, radio, file, submit.
<label>: يُستخدم لربط وصف مع حقل إدخال.
<textarea>: لإنشاء مربع نص متعدد الأسطر.
<select>: قائمة منسدلة تحتوي على خيارات.
<option>: عنصر داخل <select> يُمثل خيارًا واحدًا.
<button>: يُستخدم لإنشاء أزرار قابلة للتفاعل.
<fieldset>: يُستخدم لتجميع مجموعة من عناصر الإدخال.
<legend>: يُستخدم لوصف محتوى <fieldset>.
<datalist>: يُوفر قائمة مقترحة للقيم داخل <input>.
<output>: يُستخدم لعرض نتائج العمليات الحسابية داخل النماذج.
تُستخدم لجمع بيانات المستخدم
<form>: يُحدد نموذجًا لإدخال البيانات.
<input>: حقل إدخال، له أنواع متعددة مثل text, password, email, number, checkbox, radio, file, submit.
<label>: يُستخدم لربط وصف مع حقل إدخال.
<textarea>: لإنشاء مربع نص متعدد الأسطر.
<select>: قائمة منسدلة تحتوي على خيارات.
<option>: عنصر داخل <select> يُمثل خيارًا واحدًا.
<button>: يُستخدم لإنشاء أزرار قابلة للتفاعل.
<fieldset>: يُستخدم لتجميع مجموعة من عناصر الإدخال.
<legend>: يُستخدم لوصف محتوى <fieldset>.
<datalist>: يُوفر قائمة مقترحة للقيم داخل <input>.
<output>: يُستخدم لعرض نتائج العمليات الحسابية داخل النماذج.
5. عناصر الربط والتفاعل (Interactive Elements)
تُستخدم لإنشاء روابط وأزرار تفاعلية
<a>: يُستخدم لإنشاء الروابط التشعبية.
<details>: يُستخدم لإنشاء قسم قابل للتوسع والانهيار.
<summary>: يُحدد العنوان القابل للنقر داخل <details>.
<dialog>: يُستخدم لإنشاء مربعات حوار قابلة للإغلاق.
<menu>: يُستخدم لإنشاء قائمة من الأوامر.
تُستخدم لإنشاء روابط وأزرار تفاعلية
<a>: يُستخدم لإنشاء الروابط التشعبية.
<details>: يُستخدم لإنشاء قسم قابل للتوسع والانهيار.
<summary>: يُحدد العنوان القابل للنقر داخل <details>.
<dialog>: يُستخدم لإنشاء مربعات حوار قابلة للإغلاق.
<menu>: يُستخدم لإنشاء قائمة من الأوامر.
6. عناصر الجدول (Table Elements)
تُستخدم لإنشاء الجداول وتنظيم البيانات
<table>: يُحدد بداية الجدول.
<tr>: يُحدد صفًا داخل الجدول.
<td>: يُمثل خلية بيانات داخل الصف.
<th>: يُمثل خلية عنوان للجدول.
<thead>: يُحدد رأس الجدول.
<tbody>: يُحدد جسم الجدول.
<tfoot>: يُحدد تذييل الجدول.
<caption>: يُستخدم لإضافة عنوان توضيحي للجدول.
تُستخدم لإنشاء الجداول وتنظيم البيانات
<table>: يُحدد بداية الجدول.
<tr>: يُحدد صفًا داخل الجدول.
<td>: يُمثل خلية بيانات داخل الصف.
<th>: يُمثل خلية عنوان للجدول.
<thead>: يُحدد رأس الجدول.
<tbody>: يُحدد جسم الجدول.
<tfoot>: يُحدد تذييل الجدول.
<caption>: يُستخدم لإضافة عنوان توضيحي للجدول.
7. عناصر البرمجة والتفاعل (Scripting Elements)
تُستخدم لإضافة الأكواد البرمجية والتفاعل الديناميكي
<script>: يُستخدم لإضافة أكواد JavaScript إلى الصفحة.
<noscript>: يُعرض محتوى بديل في حال تعطيل JavaScript.
<template>: يُستخدم لإنشاء قوالب HTML يمكن تكرارها باستخدام JavaScript.
<slot>: يُستخدم داخل Web Components لتحديد أماكن المحتوى القابل للتخصيص.
تُستخدم لإضافة الأكواد البرمجية والتفاعل الديناميكي
<script>: يُستخدم لإضافة أكواد JavaScript إلى الصفحة.
<noscript>: يُعرض محتوى بديل في حال تعطيل JavaScript.
<template>: يُستخدم لإنشاء قوالب HTML يمكن تكرارها باستخدام JavaScript.
<slot>: يُستخدم داخل Web Components لتحديد أماكن المحتوى القابل للتخصيص.
Web Development CYS
Photo
CSS3 هي الإصدار الثالث من أوراق الأنماط المتتالية (Cascading Style Sheets - CSS)، وهي لغة تُستخدم لتنسيق صفحات الويب وتحسين مظهرها. جاءت CSS3 بتحديثات وتحسينات كبيرة مقارنة بالإصدارات السابقة (CSS1 وCSS2)، حيث أصبحت أكثر قوة ومرونة في التصميم.
Web Development CYS
Photo
الفرق بين CSS3 والإصدارات السابقة (CSS1 وCSS2):
1. التقسيم إلى وحدات (Modules):
تم تقسيم CSS3 إلى وحدات مستقلة، مما يسمح بتطوير الميزات الجديدة دون الحاجة إلى تحديث اللغة بالكامل.
2. التحكم المتقدم في التخطيط والتنسيق:
Flexbox وGrid: ميزات قوية لإنشاء تصاميم مرنة وسهلة التكيف مع الشاشات المختلفة.
Media Queries: لدعم التصميم المتجاوب (Responsive Design) بناءً على حجم الشاشة أو نوع الجهاز.
3. التأثيرات والأنيميشن:
Transitions: لإنشاء تأثيرات انتقالية سلسة بين حالات العناصر.
Animations: لإنشاء حركات مخصصة دون الحاجة إلى JavaScript.
Transforms: لتدوير وتحريك العناصر (مثل rotate(), scale(), translate()).
4. دعم أكبر للألوان والتدرجات:
دعم الألوان بنظام RGBA وHSLA، مما يسمح بتحديد الشفافية بسهولة.
دعم التدرجات اللونية (linear-gradient, radial-gradient) بدون الحاجة لاستخدام صور.
5. إضافة تأثيرات الظلال:
box-shadow: لإضافة ظل للعناصر.
text-shadow: لإضافة ظل للنصوص.
6. تحسينات على الخطوط والطباعة:
دعم @font-face لاستخدام خطوط مخصصة على الويب.
خصائص جديدة مثل text-overflow وword-wrap.
7. دعم أفضل للنماذج (Forms):
تحسينات على حقول الإدخال، مثل placeholder, required, وvalidity للتحقق من صحة البيانات بدون JavaScript.
لماذا CSS3 مهمة؟
تجعل تصميم المواقع أكثر احترافية وجاذبية.
تقلل من الاعتماد على JavaScript لتحقيق التأثيرات.
تساعد في تحسين تجربة المستخدم على الأجهزة المختلفة.
توفر وقت المطورين بفضل الأدوات المتقدمة.
1. التقسيم إلى وحدات (Modules):
تم تقسيم CSS3 إلى وحدات مستقلة، مما يسمح بتطوير الميزات الجديدة دون الحاجة إلى تحديث اللغة بالكامل.
2. التحكم المتقدم في التخطيط والتنسيق:
Flexbox وGrid: ميزات قوية لإنشاء تصاميم مرنة وسهلة التكيف مع الشاشات المختلفة.
Media Queries: لدعم التصميم المتجاوب (Responsive Design) بناءً على حجم الشاشة أو نوع الجهاز.
3. التأثيرات والأنيميشن:
Transitions: لإنشاء تأثيرات انتقالية سلسة بين حالات العناصر.
Animations: لإنشاء حركات مخصصة دون الحاجة إلى JavaScript.
Transforms: لتدوير وتحريك العناصر (مثل rotate(), scale(), translate()).
4. دعم أكبر للألوان والتدرجات:
دعم الألوان بنظام RGBA وHSLA، مما يسمح بتحديد الشفافية بسهولة.
دعم التدرجات اللونية (linear-gradient, radial-gradient) بدون الحاجة لاستخدام صور.
5. إضافة تأثيرات الظلال:
box-shadow: لإضافة ظل للعناصر.
text-shadow: لإضافة ظل للنصوص.
6. تحسينات على الخطوط والطباعة:
دعم @font-face لاستخدام خطوط مخصصة على الويب.
خصائص جديدة مثل text-overflow وword-wrap.
7. دعم أفضل للنماذج (Forms):
تحسينات على حقول الإدخال، مثل placeholder, required, وvalidity للتحقق من صحة البيانات بدون JavaScript.
لماذا CSS3 مهمة؟
تجعل تصميم المواقع أكثر احترافية وجاذبية.
تقلل من الاعتماد على JavaScript لتحقيق التأثيرات.
تساعد في تحسين تجربة المستخدم على الأجهزة المختلفة.
توفر وقت المطورين بفضل الأدوات المتقدمة.
❤1