15 سمة احترافية عند استخدامك لغة HTML
تستخدم لغة HTML في بناء وهيكلة محتوى صفحات الويب وعرض النصوص والصور والأشكال الأخرى للوسائط المتعددة. في هذه المقالة سنشارك معك مجموعة من النصائح والحيل التى ستساعدك على احتراف لغة HTML.
أهم 15 سمة احترافية في HTML
سمة “start”
تسمح لك سمة “start” بتحديد رقم البداية لعناصر القائمة الخاصة بك.
<ol start="20">
<li>Pineapple🍍</li>
<li>Apple🍎</li>
<li>Greenapple 🍏</li>
</ol>
سمة “contenteditable”
عند استخدام هذه السمة مع إعطائها قيمة “true” يصبح العنصر قابل للتعديل.
<p>It Can be something about you.</p>
سمة “required”
يتم وضع هذه السمة لحقول المدخلات التي يجب ملؤها.
وسم “Mark”
يستخدم لتسليط الضوء على نص معين.
<p>This is <mark>important</mark> </p>
سمة “loading”
إضافة سمة “loading=lazy” مع عناصر مثل الصور يساعد على تعزيز أداء الصفحة عن طريق تأجيل تحميل عناصر الوسائط حتى يقوم المستخدم بتمريرها.
<img src='image.jpg' loading='lazy' alt='Alternative text'>
وسم “kbd”
يستخدم لتعريف مدخلات لوحة المفاتيح.
<p>Press <kbd>alt</kbd> & <kbd>tab</kbd> to change window</p>
وسم “details” + “summary”
يمكنك صياغة أكورديون جميل المظهر باستخدام هذه الوسوم.
<details>
<summary>Can i save and love ❤️ this article?</summary>
<p>Follow on twitter for more stuff.</p>
<p>Save for updates.</p>
</details>
سمة “accept”
تستخدم لتحديد أنواع الملفات التي يمكن للمستخدم تحميلها.
وسم “picture”
يتيح لك وسم “picture” عرض صور معينة بناءً على حجم الشاشة، وهو وسم رائع لتنفيذ تصميم الويب المتجاوب (Responsive web design).
<img decoding="async" src="regular.jpg" />
سمة “dir”
يمكنك وسم “dir” من ضبط اتجاه النص من اليمين إلى اليسار أو اليسار إلى اليمين باستخدام ضبط الاتجاه إلى تلقائي، هذا سوف يغير اتجاه النص تلقائيًا بناءً على اللغة المستخدمة في كتابة النص.
<p dir="rtl">Awesome!</p>
سمة “spellcheck”
تستخدم سمة “spellcheck” للتحقق من أخطاء الإملاء.
وسم “abbr”
اختصر المحتوى الخاص بك باستخدام وسم “abbr”.
<abbr title="National Aeronautics and Space Administration">NASA</abbr>
سمة “disabled”
عندما تستخدم هذه السمة مع عنصر، فإنها تحدد أنه يجب تعطيل خاصية اختيار وتحديد هذا العنصر.
HTML
CSS
REACT
سمة “poster”
تستخدم لتحديد صورة يتم عرضها أثناء تنزيل الفيديو أو حتى يضغط المستخدم على زر التشغيل.
<video src="video.mp4" poster="flowers.jpg"></video>
سمة “reversed”
باستخدام هذه السمة يمكنك عكس ترتيب عناصر القائمة.
<ol reversed>
<li>Pineapple🍍</li>
<li>Apple🍎</li>
<li>Greenapple 🍏</li>
</ol>
نشجعك على استخدام هذه الحيل والنصائح عندما تقوم بكتابة كود HTML. ونتمنى أن تكون قد استفدت واستمتعت بقراءة هذه المقالة.
هل تبحث عن مسار لتعلم تطوير مواقع الويب عن طريق HTML وبطريقة احترافية؟ ننصحك بهذا المسار والذي يأخد بيدك من الصفر وحتى الاحتراف لتتعلم تصميم وبناء مواقع ويب احترافية وعالية الجودة عن طريق HTML و CSS وكل هذا باللغة العربية وعلى يد خبراء يعملون في شركات عالمية كجوجل وغيرها.
إذا أردت أن تبنى منزلًا، فإنك تخطط له جيدًا لمعرفة أساس هذا المنزل وجدرانه وغرفه، وهكذا. يمكنك اعتبار HTML نفس الشيء بالنسبة لأساس المنزل، فـ HTML هي أساس صفحات الويب والمواقع، وعن طريقها يفهم المتصفح المحتوى الرئيس للموقع، ثم يقوم بترجمته وتحويله إلى ما تراه من نصوص وقوائم وعناوين وأي شيء آخر يعتبر من أساسيات صفحة الويب؛ لذلك يمكننا القول إن HTML هي مجموعة من التعليمات البرمجية التي تُستخدم في هيكلة الموقع وصفحات الويب.
يمكنك البدء في تعلم HTML باتباع الخطوات التالية:
1- دراسة المفاهيم الأساسية: يجب أن تبدأ بفهم المفاهيم الأساسية لـ HTML مثل العناصر Elements والعلامات Tags والسمات Attributes وكيفية استخدامها في تصميم صفحات الويب.
2- التدرب على كتابة الكود: إن أفضل طريقة لتعلم HTML هي من خلال التدرب على البرمجة وكتابة الكود. يُمكنك البدء بإنشاء صفحات ويب بسيطة والانتقال تدريجيًا إلى مشاريع أكثر تعقيدًا.
3- بناء المشاريع: بينما تتعلم HTML، حاول بناء مشاريع مثل المواقع الشخصية أو صفحات الويب لتطبيق مهاراتك بطريقة عملية.
يختلف وقت تعلم أساسيات HTML من شخص لآخر نتيجةً لاختلاف الظروف والوقت المتاح لكل شخص، ولكن في المتوسط، فإن تعلم أساسيات HTML يستغرق أسبوعين تقريبًا وبواقع 5 إلى 10 ساعات في الأسبوع الواحد.
