1. تصميم بنية الصفحة - HTML: هذه العملية هي استخدام عناصر HTML المختلفة لإنشاء بنية صفحة الويب.
2. تصميم ظهور الصفحة - CSS: هذه العملية هي استخدام CSS لتحسين مظهر صفحة الويب.
3. سلوك صفحة التصميم - JavaScript: هذه العملية هي إعطاء سلوك معين لعناصر صفحة الويب.
بالإضافة إلى CSS ، تم توسيع HTML5 إلى درجات متفاوتة في جانبين آخرين. وتركز هذه السلسلة على الجانب الأول. في القسم السابق ، تعلمنا عناصر القماش المعقدة وعناصر SVG ، وستلخص الفصول التالية عناصر HTML5 المضافة الأخرى.
العناصر الهيكلية أضافت HTML5 عناصر هيكلية جديدة ، مثل الرأس ، التذييل ، NAV التنقل ، مقالة المحتوى ، قسم الفصل ، إلخ. يظهر المعنى في الشكل أدناه:بالإضافة إلى العناصر الهيكلية للصفحة بأكملها ، يضيف HTML5 أيضًا عناصر دلالية على مستوى الكتلة ، مثل العناصر الإضافية جانباً ، وعناصر الصورة ، وتفاصيل عناصر الوصف التفصيلية ، وما إلى ذلك ، بالإضافة إلى عرض المعنى بشكل أفضل للصفحة. هنا مثال موجز:
<html>
<head>
<title> مدونة dxy </title>
</head>
<body>
<header>
<h1> <a href = "http://www.vevb.com/dxy1982/٪22٪3EDXY1982 Blog </a> </h1>
</header>
<section>
<article>
<h2> <a href = "http://www.vevb.com/dxy1982/"> المادة 1 </a> </h2>
<p> مقدمة </p>
</article>
<article>
<h2> <a href = "http://www.vevb.com/dxy1982/"> المادة 2 </a> </h2>
<p> مقدمة </p>
</article>
<v>
<a href = "http://www.vevb.com/dxy1982/"> Blog </a>
</nav>
</القسم>
<v>
<ul>
<li> <h2> المعلومات </h2>
<ul>
<li> <a href = "http://www.vevb.com/dxy1982/"> السياسة </a> </li>
<li> <a href = "http://www.vevb.com/dxy1982/"> قائمة </a> </li>
</ul> </li>
<li> <h2> المقالة </h2>
<ul>
<li> <a href = '/blog/2007/04/'> يناير </a> </li>
<li> <a href = '/blog/2007/03/'> February </a> </li>
</ul>
</li>
</ul>
</nav>
<Tower>
<p> حقوق الطبع والنشر 2012 DXY1982 </p>
</tower>
</body>
</html>
على الرغم من أن هذه العناصر بسيطة نسبيًا ، إلا أنه لا يزال هناك بعض النقاط التي يجب ملاحظة :1. لا تستخدم القسم كبديل عن DIV
القسم ليس حاوية نمط. يمثل عنصر القسم الجزء الدلالي من المحتوى المستخدم للمساعدة في إنشاء ملخص مستند. يجب أن تحتوي على رأس. عادة ما يكون ذلك أكثر المقالات (بالطبع ، من الممكن أيضًا أن يكون المقال كجزء لها). إذا كنت ترغب في العثور على عنصر يستخدم كحاوية صفحة أو تحتاج إلى حاوية نمط إضافية ، فيرجى متابعة استخدام Div.
2. فقط استخدم الرأس ومجموعة HGROUP عند الحاجة
لا معنى لها أن تكتب ملصقات لا تحتاج إلى كتابة. عادة ما يلي سيناريوهات استخدام الرأس والمجموعة على النحو التالي:
• يمثل عنصر الرأس مجموعة من النص المساعد التمهيدي أو الملاقي ، وغالبًا ما يستخدم كرأس القسم.
• عندما يكون للرأس بنية متعددة الطبقات ، مثل العناصر الفرعية ، والترجمات ، ونصوص الشعار المختلفة ، وما إلى ذلك ، استخدم HGROUP لدمج عناصر H1-H6 كرئيس للقسم.
هنا ، إذا كان للرأس أو HGROUP فقط عدد قليل من عناصر الرأس ، فمن الأفضل إزالة هاتين العلامة عديمة الفائدة ، على سبيل المثال:
<article>
<header>
<h1> أفضل منشور مدونة لي </h1>
</header>
<!-محتوى المقالة->
</article>
تعديل مباشرة إلى:
<article>
<h1> أفضل منشور مدونة لي </h1>
<!-محتوى المقالة->
</article>
الشيء نفسه ينطبق على:
<header>
<hgroup>
<h1> أفضل منشور مدونة لي </h1>
</hgroup>
<p> بقلم ريتش كلارك </p>
</header>
قم بتغييره مباشرة إلى:
<header>
<h1> أفضل منشور مدونة لي </h1>
<p> بقلم ريتش كلارك </p>
</header>
3. لا تسيء استخدام NAV
يمثل عنصر NAV كتلة في الصفحة التي ترتبط بصفحات أخرى أو أجزاء أخرى من هذه الصفحة ؛ كتلة تحتوي على روابط التنقل.
ولكن لا يجب وضع جميع الروابط الموجودة في الصفحة في عنصر NAV - يهدف هذا العنصر إلى استخدامه ككتلة التنقل الرئيسية. لإعطاء مثال محدد ، غالبًا ما يكون هناك العديد من الروابط في تذييل ، مثل شروط الخدمة ، والصفحة الرئيسية ، وصفحة إشعار حقوق الطبع والنشر ، وما إلى ذلك. عنصر التذييل نفسه يكفي للتعامل مع هذه الحالات. على الرغم من أنه يمكن أيضًا استخدام عنصر NAV هنا ، إلا أنه يعتبر عادةً غير ضروري.
4. لا تسيء إلى الرقم
يجب أن يكون الشكل بعض محتوى السوائل ، وأحيانًا سيكون هناك وصف عنوان موجود فيه. بشكل عام ، سيتم الرجوع إليها كوحدة مستقلة في دفق المستندات. هذا هو أفضل سيناريو للشكل - يمكن نقله من صفحة المحتوى الرئيسية إلى الشريط الجانبي دون التأثير على تدفق المستند. يجب الرجوع إلى الشكل فقط في المستند ، أو محاط بعناصر القسم.
إذا كنت محضًا لتقديم الصورة (مثل الشعار) ، ولم يتم الاستشهاد بها في مكان آخر في المستند ، وليس هناك حاجة لتحريك الموقع ، فلا تستخدم الشكل.
5. لا تستخدم سمات النوع غير الضروري
في HTML5 ، لم تعد العناصر النصية والأناقة تتطلب سمات النوع. بالطبع لا توجد مشكلة في الكتابة ، ولكن من منظور أفضل الممارسات ، ليست هناك حاجة للكتابة.
عناصر الصوت يتم استخدام عناصر الصوت لتحديد محتوى الصوت ، مثل الموسيقى أو أي دفق صوتي آخر. يتم عرض التنسيقات التي يدعمها هذا العنصر في الجدول التالي:| أي 9 | Firefox 3.5 | أوبرا 10.5 | Chrome 3.0 | Safari 3.0 | |
|---|---|---|---|---|---|
| Ogg Vorbis | √ | √ | √ | ||
| MP3 | √ | √ | √ | ||
| واف | √ | √ | √ |
تحتوي علامة الصوت على بعض السمات المستخدمة للتحكم في المحتوى ، ومتى يتم تشغيل الصوت ، وما إلى ذلك. في المثال التالي ، سيتم تشغيل الصفحة بمجرد تحميل الصوت ، وسوف تستمر في اللعب. يمكن أن تسمح عناصر التحكم المقدمة للمستخدم بإيقاف أو إعادة تشغيل الصوت:
<audio src = "myfirstmusic.ogg" controls = "controls" autoplay = "autoplay" loop = "loop">
لا يدعم متصفحك عناصر الصوت.
</audio>
إذا لم يدعم المتصفح العنصر ، فسيتم عرض معلومات النص للعنصر.
إذا تم تعيين عنصر اللعب التلقائي ، يتم تجاهل خاصية التحميل المسبق تلقائيًا. إذا تم تعيين Preload = Auto ، فسيتم تحميل الصوت بعد تحميل الصفحة.
يتيح عنصر الصوت تحديد عناصر مصدر متعددة لتكون متوافقة مع المتصفح. يمكن لعنصر المصدر ربط ملفات الصوت المختلفة. سيستخدم المستعرض أول تنسيق يمكن التعرف عليه:
<Oudio>
<source src = "song.ogg" type = "audio/ogg">
<source src = "song.wma" type = "audio/x-ms-wma">
<source src = "song.mp3" type = "audio/mpeg">
لا يدعم متصفحك عناصر الصوت.
</audio>
عناصر الفيديو يتيح لك عنصر الفيديو تشغيل مقاطع الفيديو أو دفق الوسائط المرئية. يتم عرض التنسيقات التي يدعمها هذا العنصر في الجدول التالي:| شكل | أي | Firefox | الأوبرا | الكروم | سفاري |
|---|---|---|---|---|---|
| ogg | لا | 3.5+ | 10.5+ | 5.0+ | لا |
| MPEG 4 | 9.0+ | لا | لا | 5.0+ | 3.0+ |
| WebM | لا | 4.0+ | 10.6+ | 6.0+ | لا |
إنه يحتوي على جميع سمات عنصر الصوت ، بالإضافة إلى: ملصق صامت ، (في انتظار الصورة) ، والعرض والارتفاع. وغني عن القول ، المعاني الأخيرة. عندما يتم تحميل الفيديو أو يكون الفيديو في حالة عدم تحميل ، تتيح لك سمة الملصق (تحديد عنوان URL المطلق أو النسبي) العثور على صورة للتعامل معها أولاً ؛ صامت يعني كتم.
يدعم الفيديو أيضًا استخدام عناصر المصدر لحل مشكلات التوافق. انظر مثال صغير:
<controls = "Controls" Poster = "/Images/Screen.gif">
<المصدر src = "movie.mp4" type = "video /mp4" />
<المصدر src = "movie.ogg" type = "video /ogg" />
لا يدعم متصفحك عناصر الفيديو.
</video>
إذا كنت ترغب في عدم تشغيل صوت الفيديو ، فقم بتعيين muted = muted.
بالإضافة إلى ذلك ، يوفر عنصر الفيديو أيضًا بعض الأساليب والخصائص والأحداث لدعم عملية التحكم في التشغيل في عمليات DOM. على سبيل المثال ، استدعاء عناصر للعب ، وقفة ، تحميل وطرق أخرى. هناك أيضًا خصائص مثل وحدة التخزين ووقت التشغيل الذي يمكن قراءته مباشرة أو تعيينه. بالإضافة إلى ذلك ، هناك أحداث تبدأ التشغيل ، وقفة ، نهاية ، وما إلى ذلك يمكن استخدامها. انظر المثال التالي:
<! doctype html>
<html>
<body>
<div style = "text-align: center">
<button onClick = "PlayPause ()"> تشغيل/إيقاف مؤقت </button>
<button onClick = "Makebig ()"> Big </utton>
<button onClick = "MakeMall ()"> صغير </button>
<button onClick = "makenormal ()"> Normal </utton>
<video id = "video1">
<المصدر src = "mov_bbb.mp4" type = "video /mp4" />
<المصدر src = "mov_bbb.ogg" type = "video /ogg" />
لا يدعم متصفحك عناصر الفيديو.
</video>
</div>
<script type = "text/javaScript">
var myvideo = document.getElementById ("video1") ؛
وظيفة playpause ()
{
إذا (myVideo.paused)
myvideo.play () ؛
آخر
myvideo.pause () ؛
}
وظيفة makebig ()
{
myvideo.width = 560 ؛
}
الدالة تجعل () ()
{
myvideo.width = 320 ؛
}
وظيفة makenormal ()
{
myvideo.width = 420 ؛
}
</script>
</body>
</html>
في الواقع ، نحتاج إلى الانتباه إلى طريقة جديدة للكتابة: في المثال أعلاه ، نكتب عناصر صوتية مثل هذا:
<audio src = "myfirstmusic.ogg" controls = "controls" autoplay = "autoplay" loop = "loop">
لا يدعم متصفحك عناصر الصوت.
</audio>
في الواقع ، يتم تقديم العديد من عناصر التحكم في العناصر ، والطبقة التلقائية ، والحلقة في HTML5. هذه الخصائص جيدة لك لكي تكتبها مثل ما سبق ، ولكن الطريقة الموصى بها هي كتابتها على النحو التالي:
<audio src = "myfirstmusic.ogg" يتحكم في حلقة اللعب التلقائي>
لا يدعم متصفحك عناصر الصوت.
</audio>
نظرًا لأن المتصفح يواجه هذه الخصائص ، فهذا يعني أنه يتم تمكين هذه الخصائص. وهذا يعني ، إذا كتبت هذه الخصائص وقامت بتعيين بقوة على خطأ ، فإن التأثير لا يزال يعادل صحيحًا ، لذلك يوصى عمومًا بكتابة اسم السمة فقط.
هذه المشكلة كتابة موجودة أيضا في الشكل. العديد من الخصائص الجديدة للشكل والإدخال هي خصائص منطقية ، ويجب استخدام طريقة الكتابة الموصى بها.
العناصر التي تشير إلى المقياس لا يدعم كل متصفح العناصر التالية ، ولكن يمكنك رؤية التأثيرات على الكروم بشكل أساسي. عنصر شريط التقدم استخدم هذا العنصر لعرض شريط التقدم الذي تم تنزيله ، مع سمتين فقط: Value و Max ، وهو أمر بسيط للغاية. يتم دعم Chrome و Firefox.<p> تنزيل التقدم:
<progress value = "1534602" max = "4603807"> 33 ٪ </progress>
</p>
العناصر المترية استخدم هذا العنصر لعرض القيمة المحددة في فئة النطاق القياسية التي تشير إلى مخطط الإشارة ، وستظهر القيم داخل النطاقات المختلفة ألوانًا مختلفة. تستخدم بعض مواقع الويب هذا الشيء لعرض قيمة الخبرة الحالية للمستخدم. عندما لا يدعم المتصفح هذا العنصر ، سيتم عرض النص في منتصف العنصر مباشرة. يتم دعم Chrome حاليًا.<p> درجاتك هي:
<meter value = "88.7" min = "0" max = "100" low = "65" high = "96" Optimum = "100"> b+</meter>.
</p>
قم بتشغيله وسترى شيئًا يشبه شريط التمرير الأصفر ؛ إذا قمت بتغيير القيمة إلى 50 ، فستجد أن لون شريط المؤشرات مبرمج باللون الأحمر.
هناك العديد من مقدمات العناصر الجديدة. لمزيد من وصف العناصر ، يرجى الرجوع إلى قائمة العلامات الكاملة في W3C.
المرجع العملي: W3C البرنامج التعليمي: http://www.w3schools.com/html5/default.aspإرشادات HTML5 الرسمية: http://dev.w3.org/html5/html-author/
موقع دليل جيد جدًا: http://html5doctor.com/
html5 التعليمي الصيني: http://www.html5china.com/
مدونة واجهة أمامية جيدة: http://www.pjhome.net/default.asp؟cateid=1