القائمة الرئيسية

الصفحات

Template website Responsive Using Html5 and Bootstrap

في هذه التدوينه توضيح بسيط عن اهمية الhtml5 ولماذا نستخدمه بالاضافة الى تزويدك بنموذج جميل جدا عنه فان عرض المتصفحات المرئي للعناوين المتداخلة داخل عناصر <section> يجعلها تبدو كما لو كانت تقوم بتعيين تسلسل هرمي منطقي لتلك العناوين. ومع ذلك ، هذا مرئي بحت ولا يتم توصيله للتقنيات المساعدة. ما فائدة <section> ، وكيف يجب على المؤلفين ترميز العناوين ذات الأهمية الكبيرة لمستخدمي AT؟
قبل أيام قليلة ، كنت أجري محادثة مع بعض الأصدقاء ، سألني أحدهم عن الفرق بين <article> و <section> في HTML. هذا هو أحد الألغاز الأبدية لتطوير الويب ، هناك في الأعلى "لماذا هي مساحة بيضاء: الآنراب ، وليس مساحة بيضاء: لا التفاف؟" و "لماذا يكون لون CSS" الرمادي "أغمق من اللون" الرمادي الداكن "؟".أعطيت إجابتي المعتادة: فكر في <article> ليس فقط كمقال في صحيفة ، أو مشاركة مدونة ، ولكن كمقال عن الملابس - كيان منفصل يمكن إعادة استخدامه في سياق آخر. لذا فإن بنطالك مقال ، ويمكنك ارتدائه بمظهر مختلف ؛ قميصك مقال ويمكن ارتداؤه مع بنطال مختلف ؛ حذاء بكعب عالٍ بطول الركبة مصنوع من الجلد اللامع هو مقال (لن ترتدي واحدة منه فقط ، أليس كذلك؟).
"يمثل عنصر المقالة تكوينًا كاملاً أو قائمًا بذاته في مستند أو صفحة أو تطبيق أو موقع وهذا ، من حيث المبدأ ، قابل للتوزيع أو إعادة الاستخدام بشكل مستقل ، على سبيل المثال في النقابة. قد يكون هذا منشورًا في منتدى ، أو مجلة أو مقالة في صحيفة ، أو إدخال مدونة ، أو تعليق أرسله المستخدم ، أو أداة تفاعلية أو أداة ، أو أي عنصر محتوى مستقل آخر ".

 Html 5

لذا فإن الصفحة الرئيسية التي تحتوي على قائمة من منشورات المدونة ستكون عنصرًا <main> يضم سلسلة من عناصر <article> ، عنصرًا لكل منشور في المدونة. يمكنك استخدام نفس البنية لقائمة مقاطع الفيديو (فكر في YouTube) مع تغليف كل مقطع فيديو في <article> ، وقائمة المنتجات (فكر في Amazon) وما إلى ذلك. أي من هذه <المقالة> قابلة للتجميع من الناحية المفاهيمية - يمكن لكل منها أن يقف بمفرده في صفحته المخصصة ، في إعلان على صفحة أخرى ، كإدخال في موجز RSS ، وما إلى ذلك.يحتوي WatchOS من Apple على Reader الذي يستخدم عنصر <article> لمعرفة المحتوى الأساسي لصفحتك
"لقد جلبنا Reader إلى watchOS 5 حيث يتم تنشيطه تلقائيًا عند اتباع الروابط المؤدية إلى صفحات الويب المليئة بالنصوص. من المهم التأكد من أن Reader يستخرج الأجزاء الرئيسية من صفحة الويب الخاصة بك باستخدام الترميز الدلالي لتعزيز معنى وهدف العناصر في المستند. دعونا نلقي نظرة على مثال. أولاً ، نشير إلى أجزاء الصفحة الأكثر أهمية عن طريق تغليفها في علامة مقالة ".تستمر نصيحتي المعتادة: لا تهتم بـ <section> أو تقلق بشأن اختلافه عن <article>. تم اختراعه كغلاف عام للعناوين بحيث يمكن للمتصفح تحديد مخطط مستند HTML5.ماذا؟ تعد خوارزمية مخطط المستند طريقة لاستخدام علامة عنوان واحدة فقط - <h1> - وجعلها بطريقة سحرية "تصبح" المستوى الصحيح للعنوان (على سبيل المثال ، تحول إلى <h2> ، <h3> ، وما إلى ذلك) ، اعتمادًا على كيفية إنها متداخلة بعمق في عناصر تقسيم HTML5: <article> ، <section> ، وما إلى ذلك.يعمل هذا ببراعة عند عرضه كمقال مستقل. ولكن ماذا عن صفحتك الرئيسية ، وهي قائمة بأحدث مقالاتك؟

لماذا تصميم Html5

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

فيديو توضيحي عن تصميم متجاوب Html5



كما ترى من لقطة الشاشة ، فإن المقالات المحطمة مسبوقة بملخص سريع ، متبوعًا بخط أفقي يفصل الملخص عن المقالة المناسبة.
كما هو الحال دائمًا ، قبل مشاركة أكواد . دعنا نتحدث قليلاً عن العلامات والرموز الرئيسية لهذا البرنامج. في البداية ، في ملف HTML ، قمت بإنشاء علامة <container>. كما تعلم ، يتم استخدام علامة <container> بشكل كبير لإنشاء التقسيم الاول. ,وذلك من دون bootstrap ثم أنشأت <ul > باسم الفئة ".menu". بعد ذلك ، أنشأت <li> وبعد ذلك انشات "a"  ويكون لكل اب عدة ابناء بداخله وذلك تمهيد لتمرير مؤشر الماوس ليظهر الابناء مع التمرير الجميل اذا احببت قم بذلك بوضع نفس التصميم الذي قمنا به سابقا في التدويناتلإنشاء هذا البرنامج أولاً ، تحتاج إلى إنشاء ملفين ، أحدهما ملف HTML والآخر هو ملف CSS. بعد إنشاء هذه الملفات ، قم فقط بلصق هذه الرموز التالية في ملفك. يمكنك أيضًا تنزيل ملفات التعليمات البرمجية المصدر من خلال الرابط المحدد. انقر هنا لتنزيل ملفات التعليمات البرمجية المصدر.وكما تلاحظ التصميم كم هو رائع وسهل الاستخدام بالاضافة الى انه مفهوم للزائر بشكل جدا لطيف اذا احببت هذا التصميم وتود تنزيله الامر جدا بسيط كل ماعليك فعله هو الضغط على اللنك الذي سأقوم بوضعه بأسم github ثم الانتقال الى الموقع وتحميلهمن هنا .
Github



هل اعجبك الموضوع :

تعليقات