أساسيات HTML: خطوة أولى نحو البرمجة

في هذه الحلقة الأولى من كورس برمجة HTML، سأصحبك في رحلة للتعرف على لغة HTML، أو كما تُعرف بـ لغة الوصف، وهي اللغة الأساسية في برمجة وتصميم صفحات الويب، حيث تُعد الهيكل الأساسي لأي صفحة ويب.

HTML هي اختصار لـ HyperText Markup Language، وسأجيب هنا عن سؤال مهم: ما الفائدة من تعلم HTML؟ والسبب في أهمية هذا السؤال أن كلاً من مساري تطوير الويب Frontend و Backend يعتمدان بشكل أساسي على HTML.

كما سأجيب عن سؤال آخر: ماذا تحتاج لتعلم لغة HTML؟ في بداية رحلتك مع هذه اللغة، ستحتاج إلى:

برنامج محرر أكواد (Text Editor) لكتابة وصياغة وتنسيق الأكواد.
متصفح إنترنت، ويمكنك الاختيار بين Google Chrome، Firefox، أو أي متصفح آخر يناسبك.
معرفة سابقة باختصارات الويندوز وأساسيات الإنترنت لتسهيل عملية التعلم.
سأتحدث أيضًا عن أنواع برامج Text Editor التي يمكنك استخدامها لتحرير النصوص البرمجية، مع التركيز على برنامج Visual Studio Code كأحد أكثر البرامج استخدامًا في هذا المجال.

وفي نهاية الحلقة، سأشرح لك طريقة تنزيل وتثبيت برنامج Visual Studio Code على جهاز الكمبيوتر الخاص بك، لتكون جاهزًا للبدء في كتابة أول أكواد HTML الخاصة بك.

في هذه الحلقة، سنستكمل حديثنا عن كيفية إنشاء أول صفحة ويب باستخدام برنامج visual studio code، وسأشرح لك الخطوات الأساسية للقيام بذلك:

1) إنشاء ملف جديد أو مجلد جديد على جهازك.
2) فتح visual studio code والضغط على open folder لاختيار المجلد الذي أنشأته.
3) إنشاء ملف جديد داخل visual studio code مع التأكد من أن امتداد الملف هو html.
بعد ذلك، سنتعرف على الأكواد البرمجية الأساسية التي تُعرف باسم tags في لغة html، ثم سأشرح لك مكونات صفحة الويب، والتي تشمل:

- جزء body ويحتوي على جميع عناصر الصفحة.
- جزء head ويحتوي على عنوان الصفحة.

ثم سنتناول طريقة كتابة الأكواد الخاصة بـ head و body و meta، حيث يُستخدم الوسم meta لتحديد خصائص الصفحة مثل الترميز والكلمات المفتاحية.

في هذه الحلقة، سنكمل الحديث عن الفرق بين رأس الصفحة ومحتواها، وهما العنصران head و body في لغة html.

سنبدأ بشرح العناصر الخاصة بالـ head، والتي تحتوي على وسم meta، وهو الوسم الذي يضم معلومات عن الصفحة لكنها لا تظهر للمستخدم عند عرضها في المتصفح. هناك العديد من أنواع وسم meta، ومنها meta الخاصة بمواقع مثل فيسبوك، وسنوضح طريقة كتابة الكود البرمجي الخاص بها.

بعد ذلك، سنتعرف على وسم style، وهو المسؤول عن تنسيقات الصفحة وإعطاء العناصر ألوانًا مختلفة، وسأشرح لك كيفية استخدامه.

ثم سنتناول الوسوم المختلفة التي تُستخدم داخل head، وسنوضح دور كل منها وطريقة كتابته، قبل أن ننتقل إلى كيفية كتابة التعليقات أو comments، وهي النصوص التي تظهر فقط عند عرض الكود المصدري للصفحة دون أن تكون مرئية في المتصفح.

في هذه الحلقة، سنستكمل الحديث عن طريقة كتابة أكواد العناوين في صفحات الويب، وسنتعرف على كيفية تعامل المتصفح مع هذه الأكواد عند عرضها.

سأوضح لك بنية الكود البرمجي الخاصة بالعناوين، وكيف يستجيب المتصفح لكل كود يتم كتابته، مما يساعدك على فهم تأثير كل عنصر عند استخدامه في الصفحة.

ثم سنتناول جزءًا مهمًا في العناوين، وهو الـ syntax، أي بنية الكود البرمجي والترتيب الصحيح للعناصر، والذي يشبه إلى حد كبير قواعد النحو في اللغة العربية، حيث يتحكم في كيفية كتابة الأكواد البرمجية بطريقة صحيحة ومنظمة.

في هذه الحلقة، سنتحدث عن عنصر مهم في صفحات الويب، وهو عنصر paragraph الذي يُستخدم لكتابة الفقرات النصية داخل الصفحة.

سأوضح لك طريقة كتابة الوسم الخاص بكتابة النصوص، وهو الوسم p، وذلك من خلال مثال عملي يوضح كيفية استخدامه بالشكل الصحيح.

كما سنتعرف على أن عنصر paragraph يُصنّف ضمن عناصر block element، أي أنه يأخذ حيزًا كاملًا في الصفحة، مما يعني أنه لا يمكن وضع عناصر أخرى بجانبه في نفس السطر. وهذا يجعله من أهم العناصر المستخدمة في تصميم صفحات الويب، وسنستمر في استخدامه في الحلقات القادمة من الكورس.

في هذه الحلقة، سنتحدث عن الـ attributes أو الخصائص، وهي التي تُستخدم للتحكم في تنسيق العناصر من حيث الشكل أو اللون أو الحجم.

تنقسم الخصائص في HTML إلى نوعين:

1) global attributes: وهي الخصائص التي يمكن إضافتها لأكثر من عنصر.
2) element attributes: وهي الخصائص التي تُستخدم مع عنصر واحد فقط.

سأشرح لك طريقة كتابة الكود البرمجي لكل نوع من هذه الخصائص، وكيفية استخدام global attributes مع جميع العناصر. كما سنتعرف على السمة class، التي تُستخدم لتحديد مجموعة من العناصر تشترك في نفس الصفات، بينما تُستخدم السمة id لتحديد عنصر واحد فقط بصفة خاصة.

وسنستعرض بعض السمات الخاصة بعناصر معينة، مثل audio و video و img، والتي تُستخدم للتحكم في تشغيل الملفات الصوتية والفيديوهات وعرض الصور داخل صفحات الويب.

في هذه الحلقة، سنتعرف على طرق تنسيق النصوص داخل صفحات الويب، سواء من حيث شكل الخط أو حجمه، وسنقوم بتطبيق ذلك عمليًا باستخدام برنامج visual studio code.

سأوضح لك كيفية استخدام بعض الوسوم الخاصة بتنسيق النصوص، ومنها:

- الوسم b والوسم strong، وكلاهما يستخدم لعرض النص بخط عريض.
- الوسم i، والذي يُظهر النص بخط مائل، ويمكن أيضًا استخدام الوسم em لنفس الغرض.
- الوسم mark، والذي يُستخدم لتظليل خلفية النصوص باللون الأصفر، مما يساعد على لفت انتباه المستخدم إلى أجزاء معينة من النص.

في هذه الحلقة، سنستكمل الحديث عن تنسيقات الفقرة النصية داخل صفحات الويب، وسنقوم بتجربة ذلك عمليًا باستخدام برنامج visual studio code.

سنتعرف على بعض الوسوم الإضافية التي تُستخدم في تنسيق النصوص، ومنها:

# الوسم u، والذي يُستخدم لوضع خط أسفل النص.
# الوسم small، والذي يُستخدم لتصغير حجم النص درجة واحدة.
# الوسم del، وهو اختصار لكلمة delete، ويُستخدم لوضع خط على النص لإظهاره كنص محذوف.
# الوسم ins، وهو اختصار لكلمة insert، ويُستخدم لوضع خط أسفل النص الجديد المُضاف، مما يساعد على لفت انتباه المستخدم إلى التعديلات التي تم إدخالها على النصوص في الصفحة.

في هذه الحلقة، سنتعرف على الروابط وكيفية إضافتها لصفحة الويب، حيث تُستخدم الروابط للتنقل بين الصفحات أو لتحميل مستندات عبر المتصفح.

سنقوم بتطبيق ذلك عمليًا باستخدام الوسم a، وسنتعرف على بعض السمات المهمة المرتبطة به، مثل:

السمة target، والتي تُستخدم لفتح الرابط في علامة تبويب جديدة عند النقر عليه.
السمة title، والتي تُظهر معلومات عند تحريك مؤشر الفأرة فوق الرابط.
وفي نهاية الحلقة، سنتناول بعض الاستخدامات الإضافية للروابط، مثل إرسال بريد إلكتروني عند الضغط على الرابط، مما يتيح طرقًا أكثر تفاعلية للتعامل مع المستخدمين داخل صفحات الويب.

في هذه الحلقة، سنتعرف على القوائم في صفحات الويب، والتي تُستخدم لتنظيم المحتوى وعرض المعلومات بطريقة أكثر وضوحًا. سنستعرض أنواع القوائم في HTML والوسوم الخاصة بكل نوع.

تنقسم القوائم في HTML إلى ثلاثة أنواع رئيسية:

1) القائمة المرتبة Ordered list: تُكتب بالوسم ol، وتُستخدم لإنشاء قائمة مرقمة، حيث يظهر رقم أو حرف بجوار كل عنصر بدءًا من 1 أو أي ترتيب مخصص.
2) القائمة غير المرتبة Unordered list: تُكتب بالوسم ul، حيث يظهر بجوار كل عنصر رمز أو علامة بدلاً من الأرقام.
3) قائمة الوصف Description list: تُكتب بالوسم dl، وتُستخدم لإنشاء قائمة تحتوي على مصطلحات مع وصف لكل مصطلح.

سأشرح لك كيفية كتابة كل نوع من هذه القوائم عمليًا، حتى تتمكن من استخدامها بسهولة داخل صفحات الويب الخاصة بك.

في هذه الحلقة، سنتعرف على كيفية تغيير لون وحجم الفقرة في صفحة الويب باستخدام وسوم التنسيق الخاصة بـ HTML، مع شرح مفصل وأمثلة عملية لكل وسم.

سنبدأ بالوسم span، الذي يُستخدم لتلوين النصوص وإعطائها تنسيقًا مختلفًا عن باقي النصوص داخل الصفحة.

ثم سنتناول الوسم br، والذي يُستخدم لنقل النص إلى سطر جديد داخل الفقرة.

بعد ذلك، سننتقل إلى horizontal rule، والذي يُكتب بالوسم hr، ويُستخدم لإنشاء خط أفقي يفصل بين الفقرات النصية. وسأوضح لك أيضًا كيفية تغيير لون وحجم هذا الخط الأفقي لتخصيصه حسب تصميم الصفحة.

في هذه الحلقة، سنتعرف على كيفية إدراج الصور داخل صفحات الويب باستخدام الوسم الخاص بالصور img، والذي يُستخدم لعرض الصور داخل الصفحة.

سنبدأ بشرح الكود البرمجي للوسم img، مع التعرف على طريقة التعامل مع مسار الصور لضمان عرضها بشكل صحيح في المتصفح.

ثم سنتناول السمات الخاصة بوسم الصور، وأهمها alt text، وهو النص البديل الذي يظهر عند تعذر تحميل الصورة، سواء بسبب خطأ في المسار أو ضعف سرعة الإنترنت. وسنتعرف على أهمية هذه السمة في تحسين تجربة المستخدم وتحسين محركات البحث SEO.

في هذه الحلقة، سنتعرف على كيفية إنشاء الجداول داخل صفحات الويب باستخدام الوسوم الخاصة بـ HTML، وسنشرح طريقة تنسيقها وتنظيم بياناتها بشكل صحيح.

سنتعرف على مكونات الجدول الأساسية، حيث يتكون الجدول من صفوف rows، وكل صف يحتوي على خلايا cells.

سأوضح لك كيفية إنشاء جدول باستخدام الوسم table، وكيفية إضافة عناصره الأساسية، مثل:

# thead: لإنشاء رأس الجدول.
# tr: لإضافة صف جديد داخل الجدول.
# td: لإنشاء خلية داخل كل صف.
# tfoot: لإضافة الصف الأخير في الجدول.

وأخيرًا، سنتحدث عن كيفية تنسيق الجداول باستخدام CSS، مع الإشارة إلى الكورس الخاص بـ CSS على منصة تعلم، والذي يشرح كيفية تحسين مظهر الجداول وإضافة أنماط متقدمة لها.

في هذه الحلقة، سنتعرف على العنصر div، وهو من أهم العناصر في HTML، حيث يُستخدم كحاوية لتقسيم محتوى الصفحة وتنظيم العناصر داخل أقسام، مما يسمح بإعطاء كل قسم تنسيقًا مخصصًا.

سنقوم بشرح العنصر div بشكل مفصل، مع تقديم أمثلة عملية على برنامج visual studio code توضح كيفية استخدامه في تصميم الصفحات.

بعد ذلك، سنتعرف على خصائص العنصر div، مثل تغيير لون الخلفية، وحجم الخط، وغيرها من التنسيقات.

وأخيرًا، سنتناول كيفية تخصيص مظهر العنصر div باستخدام CSS، مع الإشارة إلى الكورس الخاص بـ CSS المتوفر على منصة تعلم، والذي يشرح بالتفصيل كيفية تحسين تصميم صفحات الويب.

في هذه الحلقة، سنتعرف على العناصر الدلالية أو العناصر المنطقية في HTML، والتي تُستخدم لإعطاء معنى واضح للعناصر داخل الصفحة، مما يساعد في تحسين بنية الموقع وتجربة المستخدم.

العناصر الدلالية لا تؤثر على شكل الصفحة أو ترتيبها، لكنها تُستخدم كبديل للعناصر غير الدلالية مثل div، مما يجعل الكود أكثر وضوحًا وسهولة في الفهم.

من أمثلة هذه العناصر:

# header: يحتوي على اسم وشعار الموقع.
# nav: يُستخدم لإنشاء قوائم التنقل في صفحة الويب.
# section: يُستخدم لتنظيم الأقسام داخل الصفحة.
# article: يُستخدم لعرض المقالات أو الفقرات النصية.
# footer: يحتوي على المعلومات الخاصة بالموقع.

سنتعرف على كيفية استخدام هذه العناصر عمليًا، ولماذا تُعد أفضل من div في بعض الحالات، مما يساعد في تحسين قراءة الكود وتوافقه مع معايير الويب الحديثة.

في هذه الحلقة، سنتعرف على كيفية إدراج وتشغيل الملفات الصوتية داخل صفحات الويب باستخدام الوسم audio، والذي يدعم تشغيل مختلف صيغ الصوت مثل mp3 و mp4.

سنقوم بشرح طريقة كتابة الوسم audio داخل الكود البرمجي، مع التعرف على السمات الخاصة به، والتي تشمل:

1) controls: لإظهار عناصر التحكم الخاصة بتشغيل الملف الصوتي.
2) autoplay: لتشغيل الملف الصوتي تلقائيًا بمجرد تحميل الصفحة.
3) loop: لإعادة تشغيل الملف الصوتي تلقائيًا عند انتهائه.
4) muted: لكتم الصوت تلقائيًا عند تحميل الصفحة.

سنتناول أمثلة عملية توضح كيفية إضافة ملف صوتي إلى موقعك والتحكم في تشغيله من خلال هذه السمات، مما يتيح لك تقديم تجربة صوتية تفاعلية للمستخدمين.

في هذه الحلقة، سنتعرف على كيفية إدراج وتشغيل الفيديوهات داخل صفحات الويب باستخدام العنصر video، وسنوضح طريقة التعامل مع مسار الفيديو وإعداد الخصائص المختلفة التي تتحكم في عرضه.

سنبدأ بشرح كيفية كتابة وسم video داخل الكود البرمجي، ثم ننتقل إلى السمات الخاصة به، والتي تشمل:

1) controls: لإظهار عناصر التحكم مثل التشغيل والإيقاف.
2) width: لتحديد عرض الفيديو داخل الصفحة.
3) height: لتحديد ارتفاع الفيديو.
4) poster: لإضافة صورة يتم عرضها أثناء تحميل الفيديو.
5) muted: لكتم صوت الفيديو تلقائيًا عند تحميل الصفحة.

سنتناول أمثلة عملية توضح كيفية إضافة فيديو إلى موقعك والتحكم في تشغيله، مما يتيح لك تقديم محتوى مرئي أكثر تفاعلية للمستخدمين.

في هذه الحلقة، سنتعرف على كيفية إنشاء النماذج Forms في HTML، والتي تُستخدم لجمع بيانات المستخدم، مثل نموذج تسجيل الدخول أو تسجيل البيانات داخل صفحة الويب.

سنبدأ بشرح العنصر form، الذي يُستخدم لتجميع البيانات المُدخلة من المستخدم وإرسالها إلى الخادم لحفظها داخل قواعد البيانات. ثم سنتعرف على طريقة كتابة وسم form في HTML.

بعد ذلك، سنتناول وسم الإدخال input، وهو العنصر الأساسي الذي يُستخدم لإدخال البيانات داخل النموذج. كما سنتعرف على الخاصية type الخاصة به، والتي تُحدد نوع الحقل، مثل:

## text: لحقل إدخال نصوص عادية.
## password: لحقل إدخال كلمات المرور المخفية.

وأخيرًا، سنتعرف على الوسم label، الذي يُستخدم لإنشاء تسمية لعنصر الإدخال، مما يساعد في تحسين تجربة المستخدم وجعل النماذج أكثر وضوحًا وسهولة في الاستخدام.

في هذه الحلقة، سنستكمل الحديث عن خصائص نموذج form في HTML، وسنتعرف على العناصر المختلفة المستخدمة داخل النماذج، مع شرح الخصائص الأساسية لكل منها.

سنتناول بعض خصائص العنصر input، والتي تشمل:

1) required: تُستخدم لإجبار المستخدم على ملء الحقل قبل إرسال النموذج.
2) placeholder: تُستخدم لإظهار وصف داخل الحقل لمساعدة المستخدم على فهم نوع البيانات المطلوبة.
3) value: تُحدد القيمة الافتراضية داخل الحقل، والتي يمكن للمستخدم تعديلها أو تركها كما هي.

بعد ذلك، سنتعرف على خاصية مهمة من خصائص form، وهي action، والتي تُستخدم لتحديد صفحة الويب على الخادم التي سيتم إرسال البيانات إليها بعد إدخالها في النموذج.

سنتناول أمثلة عملية توضح كيفية استخدام هذه الخصائص لجعل النماذج أكثر كفاءة وسهولة في الاستخدام داخل صفحات الويب.

وصلنا إلى الحلقة الأخيرة من كورس برمجة HTML! 🎉 في هذه الحلقة، سنتعرف على الخصائص المتقدمة في نموذج form، والتي تمنحك مزيدًا من التحكم في حقول الإدخال داخل صفحات الويب.

سأوضح لك بعض الخصائص المتقدمة للعنصر input، ومنها:

# readonly: لجعل الحقل للقراءة فقط دون إمكانية التعديل عليه.
# disabled: لتعطيل الحقل وجعله غير قابل للتفاعل.
# autofocus: لتحديد حقل معين عند تحميل الصفحة، ويمكن استخدامها في حقل واحد فقط.
# minlength: لتحديد الحد الأدنى من الحروف المطلوبة داخل الحقل.
# maxlength: لتحديد الحد الأقصى لعدد الحروف التي يمكن إدخالها.

بعد ذلك، سنتعرف على العنصر blockquote، والذي يُستخدم لإضافة نص مقتبس من مصدر آخر داخل الصفحة.

💡 وهكذا نكون قد أنهينا رحلتنا مع كورس HTML! أتمنى أن تكون قد استفدت واستمتعت بكل حلقة. لا تتوقف هنا، فهذه مجرد البداية في عالم تطوير الويب! 🔥 تابعني في كورس CSS، حيث سنبدأ في تعلم كيفية تنسيق صفحات الويب بأسلوب احترافي.

شكرًا لانضمامك إليّ في هذا الكورس، وأراك قريبًا في رحلة جديدة! 🚀💙