HTML5

ما هو HTML؟

HTML هي اختصار لعبارة HyperText Markup Language، أي لغة ترميز النص التشعبي.

HTML ليست لغة برمجة، بل هي لغة ترميز، وهذا يعني أنها تستخدم وسومًا (Tags) تنظيم محتوى المستند ووصفه.

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

ملف HTML هو نوع خاص من الملفات ينتهي بالامتداد .html. عندما يتعرف الكمبيوتر على هذا الامتداد، فإنه يعرف أن الملف يجب فتحه باستخدام متصفح إنترنت مثل Chrome أو Firefox أو Safari أو Edge. يقوم المتصفح بقراءة كود HTML وعرض المحتوى بشكل صحيح على الشاشة.

ماذا حدث لـ HTML1؟ ولماذا نستخدم شيئًا يُسمّى HTML5؟

حسنًا، دعونا نتحدث عن السنوات الأولى. تم إنشاء HTML في عام 1990 كوسيلة لربط المستندات المختلفة إلكترونيًا عبر الروابط التشعبية. ومن هنا جاءت فكرة «شبكة من الروابط».

ما كان يحدث آنذاك هو أن العلماء كانوا يستخدمون الإنترنت لعرض أبحاثهم العلمية المختلفة، وكان لديك قائمة طويلة من الأوراق البحثية، كل ورقة مستقلة عن الأخرى. لكن HTML وفّرت لك طرقًا تمكّنك من قراءة بحثٍ ما، ومن داخل النص نفسه يمكنك الانتقال مباشرة إلى ورقة بحثية أخرى مثيرة في مجال الفيزياء.

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

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

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

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

وبعد ظهور Mosaic، انفجر استخدام الإنترنت بشكل هائل، وبدأ عدد متزايد من الناس في استخدامه لأغراض تجارية، وليس فقط لأغراض البحث العلمي.

من عام 1990 إلى 1994 كان كل شيء بسيطًا جدًا وقائمًا على النصوص فقط.

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

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

HTML5 هو نتاج تعاون بين W3C ومجموعة عمل Web Hypertext Application Technology Working Group (WHATWG)، وما قاموا به هو وضع أربعة مبادئ إرشادية لكيفية التعامل مع HTML5 مع انتقال المتصفحات لدعمها.

الفكرة الأولى هي أن الميزات الجديدة يجب أن تعتمد فقط على HTML و CSS (لغة التنسيق) و DOM وJavaScript، ولا شيء غير ذلك.

أما المبدأ الثاني فهو أن يكون HTML5 مستقلًا عن نوع الجهاز؛ فلا يهم إن كنت تستخدم هاتفًا، أو حاسوبًا محمولًا، أو حاسوبًا مكتبيًا، أو حتى قارئ شاشة. الهدف هو أن يحصل الجميع على نفس مستوى الوصول إلى المعلومات.

الشبكات: (LAN و WAN)

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

أما شبكات المنطقة الواسعة، فهي عندما تقوم بربط عدة شبكات محلية معًا.

وبسبب وجود هذه الشبكات، أصبح لدينا ما يُسمّى علاقات العميل والخادم (Client–Server Relationships).

علاقات العميل والخادم (Client–Server Relationships):

الخوادم هي أجهزة قوية تقوم بحفظ الموارد المشتركة، ويكون الخادم دائمًا متصلًا بالشبكة.

أما العملاء فهم الأجهزة التي يستخدمها الأشخاص للاستخدام الشخصي، مثل أجهزة الكمبيوتر المحمولة، والهواتف، وغيرها.

دورة الطلب والاستجابة (Request–Response Cycle):

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

وفي حالتنا، عندما نتحدث عن HTML5، يقوم الخادم بالاستجابة من خلال إرسال الملف أو الملفات المناسبة.

إذًا، كيف يمكننا جعل هذا يعمل؟

عندما نتحدث عن كتابة الأشياء في شريط العنوان، فإننا نتحدث عن كتابة عناوين URL، وكل عنوان URL يتكوّن من ثلاثة أجزاء:

البروتوكول (Protocol): وهو يوضح للحاسوب الطريقة التي تريد بها الاتصال.
النطاق (Domain): وهو يحدد للحاسوب مكان العثور على المستند الذي تريده.
المستند (Document): وهو الملف المحدد الذي ترغب في الوصول إليه.

وبالرغم من أن معظم صفحات الويب تتكون من ملفات متعددة، فإنك تقوم عادةً بطلب اسم الملف الرئيسي، ويتولى المتصفح الباقي تلقائيًا.

الطلب (Request): بعد تحديد عنوان الـ IP، يقوم المتصفح بإنشاء طلب HTTP.
الاستجابة (Response): يقوم الخادم بإرجاع الملفات وليس صفحات الويب الكاملة، ويتوقف على المتصفح تحديد كيفية التعامل مع هذه الملفات وعرضها.

إنشاء وتحرير ملفاتك:

قرر كيفية تنظيم ملفاتك.
قرر قاعدة التسمية التي ستتبعها للملفات.
اختر المحرر الذي ستستخدمه:

إذا كنت تستخدم جهاز ويندوز، فإن المفكرة (Notepad) مدمجة بالفعل. ويمكنك أيضًا استخدام Notepad++ أو Sublime Text.
إذا كنت تستخدم جهاز ماك، فإن TextEdit هو المحرر الافتراضي، على الرغم من أن العديد من الأشخاص يستخدمون أيضًا TextWrangler.

لبدء العمل، افتح محررك، ثم احفظ ملفك، أضف بعض المحتوى، احفظ الملف مرة أخرى، وافتحه بعد ذلك في متصفحك.

استكشاف الأخطاء وإصلاحها (Trouble-shooting):

فتح الملف في المتصفح بدلًا من المحرر:
واحدة من أكثر المشاكل شيوعًا هي أنه عند النقر بزر الماوس الأيمن على الملف، بدلاً من أن يفتح بشكل صحيح في المتصفح، يفتح في المحرر. لإصلاح ذلك، ما عليك سوى النقر بزر الماوس الأيمن على الملف واختيار Open With ثم اختيار المتصفح.
ظهور الاكواد بدل الصفحة المنسقة:
مشكلة شائعة أخرى هي أنه عند فتح الملف، بدلًا من رؤية صفحة ويب منسقة بشكل جميل، ترى جميع العلامات (tags) الخاصة بك. عندما يحدث ذلك، يجب التحقق من امتداد الملف والتأكد من أنه .html وليس شيء مثل .txt أو .rtf.
عدم ظهور التغييرات بعد تعديل الكود:
يحدث أحيانًا أن تغيّر الكود، ولكن الصفحة تبدو كما هي بدون أي تغيير. هناك سببان رئيسيان لهذه المشكلة:

يجب القيام بما يُسمى تحديث المتصفح (Refresh).

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

نموذج كائن المستند (Document Object Model - DOM):

الـ DOM هو حقًا واحدة من الميزات الرئيسية التي بُني عليها HTML5.

يوفّر الـ DOM هيكلًا مشتركًا يشبه الشجرة، من المفترض أن تتبعه جميع الصفحات.
ويحب علماء الحاسوب الأشجار، النوع الرياضي منها، لأنها سهلة جدًا للاختبار والتحليل

المستند المكوَّن بشكل صحيح (Well-formed Document) يتكون من ثلاثة أجزاء:

الجزء الأول: ما نُسمّيه DOCTYPE، وهو إصدار HTML الذي ستستخدمه. بالنسبة لنا، سيكون دائمًا HTML5.
الجزء الثاني: الرأس (Head) أو البيانات الوصفية (Metadata).
الجزء الثالث: الجسم (Body) أو المحتوى القابل للعرض، والذي سيشكّل الجزء الأكبر من صفحاتك.

ماذا نقصد بـ DOCTYPE؟

أحد الأمور الرائعة في HTML5 هو أننا لدينا DOCTYPE واحد فقط، ويتم الإشارة إليه بكتابة:
!DOCTYPE html.

الإصدارات السابقة من HTML كانت تتطلب مراعاة التوافق مع الإصدارات القديمة (backwards compatibility).

الرأس (Head):

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

البيانات الوصفية (Meta Data): مثل اللغة والعنوان (title).
الملفات الداعمة: مثل JavaScript، ملفات التنسيق (Styling)، والإضافات (Add-ons).

باستثناء البيانات الوصفية، فإن العنوان (title) لا يُعرض على الصفحة نفسها.

الجسم (Body):

يشكّل الجسم الجزء الأكبر من صفحتك.
من المهم التأكد من كتابة كود منسّق جيدًا يشبه الشجرة (well-formatted/tree-like code).
يتم عرض معظم محتوى الجسم بواسطة المتصفح، وقد يحتوي أيضًا على بعض البيانات الوصفية.

علامات HTML5 (Tags) والتركيب (Syntax):

لكل علامة بداية (opening tag) ونهاية (closing tag).
بعض العلامات تحتوي على سمات (Attributes) مثل src، href، وغيرها.

العرض (Display):

أكثر نوعين شيوعًا للعرض هما Block و Inline.

علامات Block: هي العلامات التي تشغل مساحة معينة من العرض والارتفاع. أي أنه عند استخدام علامة Block، يشبه الأمر أنك ضغطت على Enter لإنشاء سطر جديد.
علامات Inline: هي العلامات التي تشغل فقط المساحة المطلوبة لعرض المحتوى.

العلامات الشائعة:

العناوين (Heading) [Block]:

<h1>, <h2>, <h3>, <h4>, <h5>, <h6>
تحتوي هذه العلامات على التركيب (Syntax) والمعنى الدلالي (Semantics).

الفقرات (Paragraphs) [Block]

ينبغي أن تحتوي الفقرة على عناصر Inline فقط.

الـ Divs [Block]

قسم عام (Generic Section) يميل لأن يكون أكبر من الفقرة.

المزيد من العلامات:

القوائم المرتبة (Ordered lists):

القوائم غير المرتبة (Unordered lists):

فواصل الأسطر (Line breaks):

<br />

السمات (Attributes):

السمات دائمًا، دائمًا تُكتب في علامة البداية (Start Tag)، وتكون دائمًا على شكل زوج اسم وقيمة (Name–Value Pair).

علامة الصور (Images Tag):

علامة الصور تحتاج إلى سمات لتعمل بشكل صحيح، والصور هي Inline.

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

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

الكيانات الخاصة (Special Entities):

جميع العلامات تبدأ بقوس <. فماذا تفعل إذا أردت أن يعرض المتصفح القوس نفسه بدل اعتباره بداية علامة؟
هنا تستخدم الكيانات الخاصة (Special Entities).

إذا أردت عرض < استخدم: <

لاحظ أن lt تعني less than، وهي حرف L وليست الرقم واحد.

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

الحل: استخدم   لإضافة مسافة غير قابلة للكسر.

كيفية التصميم (How to Design):

أهم خطوة في تصميم موقعك هي المرحلة التصميمية.
تحتاج إلى صورة واضحة جدًا عما تريد إنشاؤه قبل أن تبدأ بالترميز (Coding).

العلامات الدلالية (Semantic Tags):

في البداية (ضع موسيقى درامية حسب اختيارك 😉) كان هناك Div.

<div>

كانت طريقة لتجميع المحتوى المرتبط معًا.

وغالبًا ما كان الـ Div يرتبط بـ Class أو ID خاصة لتحديد وظيفته:

<header>
مجموعة من العناصر التمهيدية أو المساعدة في التنقل مثل: العنوان، روابط التنقل، إلخ.
ولا يجب الخلط بينها وبين <head> أو العناوين المختلفة مثل <h1>، <h2>...

<nav>
قسم من الصفحة يحتوي على روابط لصفحات أخرى أو لأقسام داخل نفس الصفحة، وغالبًا ما يُوجد داخل علامة <header>.

<footer>
قسم يحتوي على معلومات مثل حقوق الطبع والنشر، المستندات ذات الصلة، وروابط وسائل التواصل الاجتماعي. عادةً يكون في أسفل الصفحة، لكنه ليس إلزاميًا.

<figure>
يوفر معنى دلالي أكبر من <img>. يمكن أن يشمل: تعليق (caption)، ومصادر متعددة للوسائط المتعددة.

الصور (Images):

الصور أكثر من مجرد علامة <img>.
العديد من أنواع الملفات مدعومة على نطاق واسع:

JPEG (.jpg و .jpeg)
SVG للرسوميات المتجهية (Vector Graphics)
WebP و PNG كخيارات أفضل للصور النقطية (Raster Images)

يجب تضمين امتداد الملف.
يجب تنزيل كل صورة، لذلك قد يكون الحجم عاملاً مهمًا.
كل صورة تتطلب طلب HTTP (HTTP Request).

حجم الصورة (Image Size):

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

الحلول السريعة:

تغيير الملف نفسه.
استخدام سمات العرض والارتفاع (width/height attributes) في علامة <img>.

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

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

البرامج المساعدة حسب النظام:

على Mac: يوجد برنامج مدمج يسمى Preview يمكنك استخدامه لتغيير حجم الصور.
على Windows: يوجد برنامج مدمج يسمى Paint يمكنه تغيير حجم الصور أيضًا.

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

تتضمن علامة <img> أيضًا سمتي العرض والارتفاع (width و height) لتحديد حجم الصورة مباشرة في الكود.

النص البديل (Alternative Text):

يوفر بديلاً نصيًا للمحتوى غير النصي.

يُقرأ بواسطة قوارئ الشاشة (Screen Readers).
يُعرض في مكان الصورة إذا لم تتمكن من تحميلها.

الروابط (Links):

تسمى الروابط الروابط المرساة (Anchor Links)، ومن هنا جاء الحرف a في علامة <a>.

عند استخدام علامة المِرسى (Anchor Tag)، يجب التأكد من وجود جزئين أساسيين:

المرجع التشعبي (Hyper-reference - href): يشير إلى موقع المحتوى الجديد.
المحتوى (Content): الجزء القابل للنقر، سواء كان نصًا أو صورة.

مثال:

<a href="https://www.example.com">اضغط هنا للانتقال للموقع</a>

أنواع الروابط (Types of Link):

Absolute (مطلق)
Relative (نسبي)
Internal (داخلي)
Graphical (رسومي)

وسائط HTML5 المتعددة (HTML5 Multimedia):

تم تصميم HTML5 لتجنب الحاجة إلى برامج إضافية لتشغيل الصوت والفيديو، لكنها لم تُطبق بشكل كامل بعد.

عنصر الفيديو (Video Element):

تبدأ بعنصر <video>.
يستخدم السمة src لتحديد مكان الملف، وهي مشابهة جدًا لسمة الصور.
يمكنك أيضًا استخدام ما يُسمّى العلامات المدمجة (Embedded Tags).
النص الموجود داخل <video>...</video> يُعرض فقط إذا لم يدعم المتصفح هذه العلامة.

عنصر الصوت (Audio Element):

مشابه جدًا للفيديو.
نستخدم أيضًا سمة src لربط الملف الصوتي.
عادةً يُستخدم MP3 لضمان التوافق، لكن يمكن استخدام OGG لدعم أوسع للمتصفحات.
السمات المتشابهة: autoplay، controls، loop
السمات الإضافية: buffered، muted، volume للتحكم بما يستمع إليه المستخدم وشدة الصوت.

تشغيل المقاطع (Setting Clips):

يمكن ضبط كلا من عناصر الفيديو والصوت لتشغيل مقاطع محددة عن طريق إضافة القيم إلى سمة src.

الإضافات (Plugins):

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

الجداول (Tables):

ابدأ برسم تخطيط الجدول الذي تريد إنشاءه.
حدد عدد الصفوف (Rows) والأعمدة (Columns).
قرر ما إذا كانت هناك أي صفوف أو أعمدة ستشغل عدة خلايا.

العلامات الأساسية للجدول:

<table>: العلامة الحاوية للجدول.
<tr>...</tr>: تمثل الصفوف.
<td>...</td>: تمثل الخلايا العادية (الأعمدة).
<th>...</th>: تمثل رؤوس الأعمدة (Table Headings).

دمج الخلايا (Spanning Multiple Cells):

قد لا يكون جدولك شبكة مثالية دائمًا، لذا يمكنك دمج عدة صفوف و/أو أعمدة باستخدام السمات:

rowspan لدمج الصفوف
colspan لدمج الأعمدة

سمة الحدود (Border Attribute):

هناك سمات تنسيق مثل border يمكن أن تُستخدم على الجداول، لكن يُفضل استخدام CSS لتنسيق الجداول بدلًا من السمات التقليدية.

العناوين التوضيحية (Captions):

كيف تربط نصًا بالجدول؟
استخدام عنوان مثل <h2> أو <h3> قد يبدو جيدًا بصريًا، لكنه لا يوفر معنى دلالي (Semantics).
الأفضل استخدام <caption> لإضافة عنوان توضيحي للجدول.

لماذا نتحقق من صحة الكود؟ (Why Validate?)

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

ثلاث طرق للتحقق من صحة الكود (Three Approaches):

التحقق عن طريق URI أو URL.
التحقق عن طريق اسم الملف، أي رفع الملف مباشرة للتحقق بدلاً من استخدام الرابط.
التحقق عن طريق الإدخال المباشر (Direct Input).

يمكنك استخدام موقع wave.webaim.org للتحقق من قابلية الوصول (Accessibility) لموقعك والتأكد من صحة الكود.

استضافة موقعك (Hosting Your Site):

اسم النطاق (Domain Name):

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

الاستضافة (Hosting):

أسماء النطاقات لا قيمة لها بمفردها، بل تحتاج إلى عنوان IP مسجّل لربط اسم النطاق بالإنترنت.
خدمات الاستضافة تختلف من حيث النوع والجودة:

خدمات مجانية
خدمات متوسطة المستوى
خدمات كاملة (Full-service)

الخدمات المجانية (Free Services):

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

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

الجانب الإيجابي للخدمات المجانية هو أن لها مظهر وإحساس مألوف عبر جميع الخدمات.

إذا سجلت في خدمة مجانية وتعلمت كيفية إدارة الاستضافة فيها، يمكنك أن تكون مطمئنًا إلى أنه يمكنك إدارة ملفاتك على أي خدمة مجانية أخرى بنفس الطريقة تقريبًا.

الخدمات المدفوعة (Paid Services):

لننتقل للحديث عن الخدمات المدفوعة، سواء كانت متوسطة المستوى (Mid-range) أو كاملة (Full-service).
مع الخدمات المدفوعة، ستحصل عادةً على أدوات أفضل بكثير لإدارة كودك.
الأمر لا يقتصر على مجرد رفع ملفاتك على الإنترنت، بل يمكنك القيام بأشياء مثل:

وجود مرشحات للبريد الإلكتروني (Email Filters)
إرسال مهام خاصة تُسمّى Cron Jobs.

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

Cpanel:

لنفترض أنك حصلت على وظيفة أو لديك واجب منزلي، وقال لك أحدهم: "أريد منك رفع موقعك على الإنترنت."

رد فعل الكثير من الناس الأول يكون: رائع، كيف أفعل ذلك؟

إحدى أكثر الطرق شيوعًا هي استخدام واجهة CPanel.

لاستخدامها، تحتاج إلى عنوان URL لحساب CPanel الخاص بك، أو لحساب استضافة موقعك.

إذا كان لديك اسم نطاق، مثل introwebdesign.com أو yourname.com، عند إنشاء حسابك والحصول على اسم النطاق وخدمة الاستضافة، يجب أن يرسلو لك بريدًا إلكترونيًا يوضح عنوان URL الخاص بك.
عادةً ما يكون اسم النطاق متبوعًا بـ /cPanel هو المكان الذي تحتاج للذهاب إليه.

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

مدير الملفات (File Manager):

بغض النظر عن إعدادات cPanel، يجب أن يحتوي كل نظام على مدير ملفات.

من خلال File Manager، ستبحث عن مجلد خاص يُسمّى public_html، أو في بعض الحالات فقط public.

public_html:

يحتوي مجلد public_html على العديد من الملفات المختلفة، بعضها تريد أن يراه الناس، وبعضها لا.
رفع الملفات إلى مجلد public_html يجعلها مرئية للعامة.

العمل محليًا (Working Locally):

العمل محليًا يعني أنني أقوم بتعديل ملفاتي فقط عندما تكون على اللابتوب أو الكمبيوتر المكتبي الخاص بي.
السبب في عدم رغبتي بإجراء التغييرات مباشرة على cPanel:

التغييرات تصبح متاحة للعامة على الفور. إذا ارتكبت خطأً مطبعيًا أو وضعت شيئًا لم تكن تقصده، فإنه يظهر مباشرة ولا يمكن إصلاحه بسهولة.
هناك فرص أقل للاختبار وتصحيح الأخطاء (Debug) قبل نشر التغييرات.

نقل الملفات بشكل آمن (Secure File Transfer):

إحدى الطرق الشائعة لنقل الملفات هي استخدام FTP / SFTP.
من الأمور الرائعة في معظم برامج FTP / SFTP أنها تتيح لك سحب الملفات و إفلاتها (Drag & Drop) بدلًا من رفعها ملفًا ملفًا.
ما ستحتاجه أولًا هو ما يُسمّى عميل FTP (FTP Client):

هذا برنامج تستخدمه للاتصال بين الأجهزة المختلفة.
إذا كنت تستخدم جهاز PC، أحد البرامج الشائعة هو WinSCP.
إذا كنت تستخدم جهاز Mac، يستخدم الكثيرون Fugu أو Cyberduck.
بغض النظر عن أي من هذه البرامج الثلاثة تختار، فهي متاحة للتحميل مجانًا.

بعد ذلك، تحتاج إلى معرفة عنوان FTP الخاص بمضيفك (FTP Address) للاتصال به.

الخاتمة (Closing):

تقييم إمكانية الوصول (Evaluate Accessibility):

استخدم "View Source" لمراجعة كود أي موقع.
موقع validator.w3.org يتحقق من أن الكود مبني بشكل جيد (Well-structured Code).
موقع wave.webaim.org يتحقق من الهيكلية الدلالية (Semantic Structure) للموقع.

coursera: المصدر