تم إصدار مسودة HTML 5 جديدة (مسودة العمل) في 10 يونيو. قرأ المحرر بإيجاز وثائق الإصدار الجديد التي قدمها وقدم بعض الملاحظات: 
لا تصبح مسودة HTML 5 معيارًا رسميًا
النشر كمسودة عمل لا يعني موافقة عضوية W3C.
النشر "كمسودة" لا يعني تأييد (دعم) أعضاء W3C.
لن يتم اعتبار مواصفات HTML 5 منتهية قبل أن يكون هناك تطبيقان كاملان على الأقل للمواصفات.
لن يتم الانتهاء من مواصفات HTML 5 إلا بعد أن يقوم برنامجان على الأقل بتنفيذها.
تم إطلاق XHTML 1 في عام 1999. واستغرق الأمر عامين أو ثلاثة أعوام قبل أن يتم دعمه بالكامل، ولم يتم الترويج له بالكامل إلا مؤخرًا، بعد مرور ما يقرب من عشر سنوات. لذلك سوف يستغرق الأمر بعض الوقت حتى يتم دعم HTML 5 (خاصة بواسطة المتصفحات "غير السائدة"). وفقا للجدول الزمني لمجموعة عمل HTML التابعة لـ W3C، لن يكون هناك وضع نهائي رسمي حتى عام 2010.
تم إطلاق XHTML 1 في عام 1999. واستغرق الأمر عامين أو ثلاثة أعوام قبل أن يتم دعمه بالكامل، ولم يتم الترويج له بالكامل إلا مؤخرًا، بعد مرور ما يقرب من عشر سنوات. لذلك سوف يستغرق الأمر بعض الوقت حتى يتم دعم HTML 5 (خاصة بواسطة المتصفحات "غير السائدة"). وفقا للجدول الزمني لمجموعة عمل HTML التابعة لـ W3C، لن يكون هناك وضع نهائي رسمي حتى عام 2010.
بيان DOCTYPE بسيط بشكل مدهش
الأمر بهذه البساطة، ها. كما أنه لا يوجد فرق بين الأحرف الكبيرة والصغيرة. ومن الجدير بالذكر أن المواصفات تتطلب أنه في حالة الإعلان عن DOCTYPE هذا، يمكن استخدام ما يسمى "بناء جملة HTML المخصص (بناء جملة HTML مخصص، لا أعرف سبب تسميته بهذا)"، وهو ما سبق نوع لا يتطلب علامات HTML مغلقة. في الوقت نفسه، لا يزال يسمح ببناء جملة تنسيق XML مثل XHTML، لذلك يجب الإعلان عن DOCTYPE لمستند XML بدلاً من ما سبق.
التوافق إلى الأمام
لا تحتوي مواصفات HTML 5 على عناصر "مهملة" والسبب هو أنها تتطلب من المصممين عدم تجربة عناصر معينة، ولكنها تتطلب من ناحية أخرى أن تدعم المتصفحات هذه العناصر. في هذه الحالة، حسب حدسي، المقصود هو دعم جميع صفحات الويب السابقة المكتوبة بلغة HTML أو XHTML. هذه نعمة للمصممين، وأخيرًا، لم يعد عليهم التقيد بقواعد XHTML الصارمة.
العنصر المحذوف
بالطبع، هذه العناصر مرتبطة بـ HTML 4، ولكن يمكن أيضًا ملاحظة أن HTML 5 ليس تراجعًا بسيطًا إلى HTML 4. فهو لا يزال ملتزمًا ببعض العناصر المهمة لـ XHTML، مثل التخلي عن عناصر عرض الواجهة النقية، بينما باستخدام CSS، الخ.
يتم تجاهل العناصر التالية "لأن تأثيرها عرضي بحت وبالتالي يتم التعامل معها بشكل أفضل بواسطة CSS" لأنها عناصر عرضية بحتة ويجب استبدالها بـ CSS:
basefont/كبير/مركز/font/s/strike/tt/u
|
تم تجاهل العناصر التالية "لأن استخدامها أثر على سهولة الاستخدام وإمكانية الوصول للمستخدم النهائي بطريقة سلبية":
| الإطار/مجموعة الإطارات/noframes |
تم تجاهل العناصر التالية "لأنها لم يتم استخدامها كثيرًا، أو سببت ارتباكًا أو يمكن معالجتها بواسطة عناصر أخرى":
| اختصار/التطبيق الصغير/isindex/dir |
مستند اختبار HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<الرأس>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>مستند اختبار HTML</title>
<link href="default.css" rel="stylesheet" type="text/css" />
</الرأس>
<الجسم>
<h1>مستند اختبار HTML</h1>
<ul>
<li>الإصدار: 1.1 </li>
<li>DTD: XHTML 1.0 انتقالي</li>
<li>التشفير: UTF-8</li>
<li>تم التحديث: 12-6-2008</li>
</ul>
<ساعة />
<h1><h1> يمثل العنوان رقم واحد</h1>
<h2><h2> يمثل العنوان رقم اثنين</h2>
<h3><h3> يمثل العنوان الثالث</h3>
<h4><h4> يمثل العنوان رقم أربعة</h4>
<h5><h5> يمثل العنوان رقم 5</h5>
<h6><h6> يمثل العنوان رقم 6</h6>
<p>هذه الفقرة محاطة بـ <p>. يمثل <p> فقرة وهو تنسيق تدفق النص الأكثر استخدامًا. يمكننا استخدام العديد من العلامات النصية المضمنة في تدفقات النص. الأكثر استخدامًا هي:
<strong> <strong>مشدد</strong>،
<em><em>
<ins><ins>
<del><del> حذف</del>,
<sub><sub>
<sup><sup>
<cite><cite> cite</cite>, <big><big>زيادة</big>, <small><small>تقليل</small>. </ص>
<pre> هذا عبارة عن تدفق نصي يحتوي عليه <pre>.
يمكن عرض المسافات وعلامات التبويب وأحرف الإرجاع وما إلى ذلك مباشرةً على صفحة الويب، ولن يتم تغليفها تلقائيًا بواسطة المتصفح. يمكنك استخدامه لعرض رمز البرنامج.
الإعداد الافتراضي المنسق مسبقًا هو استخدام خط ذو عرض ثابت. </قبل>
<p>يمكننا أيضًا استخدام هذه العلامات المضمنة لعرض مقتطفات التعليمات البرمجية في تدفق النص:
<code><code>كود</code>,
<kbd><kbd>إدخال لوحة المفاتيح</kbd>,
<var><var>متغير</var>,
<samp><samp>مثال</samp>.
</ص>
<p>بالإضافة إلى ذلك، هناك علامتان مهمتان أيضًا:</p>
<ul>
<li><abbr>: على سبيل المثال، <abbr title="Mister">السيد</abbr> هو اختصار لكلمة Mister. ولكن يبدو أن هذه العلامة غير صالحة في IE. </لي>
<li><acronym><acronym title=""></acronym>: على سبيل المثال، <acronym title="Hyper Text Markup Language">HTML</acronym> هو اختصار للغة Hyper Text Markup Language (يمكن للصينيين أيضًا استخدم هذه العلامة، مثل: "<acronym title="جمهورية الصين الشعبية">الصين</acronym>" هو اختصار لـ "جمهورية الصين الشعبية"). </لي>
</ul>
<blockquote cite="#">
هذه الفقرة هي <blockquote>. تذكر استخدام خاصية الاستشهاد في <blockquote>.
</blockquote>
<العنوان>
هذا القسم موجود في <address>، والذي يمكن استخدامه لعرض عنوان بريد إلكتروني أو عنوان حقيقي. لاحظ أنه عنصر على مستوى الكتلة، ولكن ليس له هامش أو مساحة حشو افتراضيًا.
</العنوان>
يتم تضمين القسم <div> بواسطة <div>. <div> هو عنصر على مستوى الكتلة ولا يحتوي على أي نمط افتراضيًا. هناك عنصر آخر له حالته المكافئة وهو <span><span>inline field</span>، والذي ليس له أيضًا نمط افتراضيًا. <br />
يوجد <br> أمام هذه الجملة، والذي يستخدم لفواصل الأسطر داخل الفقرة. </div> <ساعة />
<p>الخط الأفقي أعلاه هو العلامة <hr> </ص>
<p><a id="a"></a>هذه الجملة مسبوقة بعلامة ربط يتم تنفيذها بواسطة العلامة <a> </ص>
<p><a href="http:///"><a>يعني أيضًا الرابط</a>. لاحظ أنه يحتوي على أربع فئات زائفة: :link هو <a href="http:///">رابط غير مرغوب فيه</a>، :visited هو <a href="#">رابط تمت زيارته</a>، : يعد التمرير <a href="http:///">رابطًا عند تمرير الماوس</a>، و:active<a href="http:///">رابطًا عند تنشيط النقر بالماوس</a> . </ص>
<p><img width="100" height="100" alt="<img> tag" /> الصورة مضمنة بشكل افتراضي، ولكن يمكننا أيضًا تعريفها ككتلة. وحدد فئة .inline خصيصًا لـ img <img width="100" height="30" alt="img.inline" class="inline" />. بالإضافة إلى ذلك، يختلف نمط <img> في الرابط <a href="#"><img width="60" height="60" alt="<img>" في <a> </أ>. </ص>
<p><عرض الكائن = "200" الارتفاع = "150"><param name = "قيمة الفيلم" = ""></param></object>
يوجد أيضًا علامة <object> لإدراج الوسائط وعلامة <param> </ص>
<ساعة />
<ul>
<li>الطبقة الخارجية للقائمة غير المرتبة هي <ul></li>
<li>يتكون كل عنصر في القائمة من <li></li>
<li>لاحظ أن العلامة <ul> يمكن أن تحتوي فقط على العلامة <li>
<ul>
<li>هذه قائمة متداخلة من المستوى الثاني ويجب وضعها في <li></li>
<li>لاحظ أن أنماط عناصر قائمة المستوى الثاني المتداخلة قد تختلف عن أنماط قائمة المستوى الأول
<ul>
<li>هذا هو المستوى الثالث، وأسلوبه يختلف عن المستوى الثاني</li>
</ul>
</لي>
</ul>
</لي>
</ul>
<ol>
<li>الطبقة الخارجية للقائمة المرتبة هي <ol></li>
<li>يتكون كل عنصر في القائمة من <li></li>
<li>لاحظ أن العلامة <ol> يمكن أن تحتوي فقط على العلامة <li>
<ol>
<li>هذه قائمة متداخلة من المستوى الثاني ويجب وضعها في <li></li>
<li>لاحظ أن أنماط عناصر قائمة المستوى الثاني المتداخلة قد تختلف عن أنماط قائمة المستوى الأول
<ol>
<li>هذا هو المستوى الثالث، وأسلوبه يختلف عن المستوى الثاني</li>
</ol>
</لي>
</ol>
</لي>
</ol>
<دل>
<dt>هذا السطر هو<dt></dt>
السطر <dd> هو <dd>. قائمة التعريفات الخارجية هي <dl>. </دد>
<dt>ملاحظة<dt>لا يمكن أن تحتوي إلا على عناصر المستوى المضمنة</dt>
<dd>و يمكن أن يحتوي <dd> على عناصر مضمنة أو على مستوى الكتلة</dd>
</دل> <ساعة />
<p>نموذج الجدول القياسي. يتم التحكم في عرض العمود بواسطة <colgroup> </ص>
<الجدول>
<تسمية توضيحية>
هذا <caption>
</caption>
<كولجروب>
<col width="30%" />
<col width="50%" />
<col width="20%" />
</colgroup>
<الرأس>
<تر>
<th>هذا السطر هو<thead></th>
<th>يمكن استخدام <thead> مع <th>
<th>هنا نستخدم <th></th>
</tr>
</الرأس>
<قدم>
<تر>
<td>السطر الأخير هو <tfoot></td>
<td><tfoot>بغض النظر عن مكان وضعه، سيتم عرضه دائمًا في النهاية</td>
<td></td>
</tr>
</تفوت>
<الجسم>
<تر>
<td>الأسطر الثلاثة التالية هي<tbody>
<td>يمكنك وضع أي عدد من<tr></td>
<td>المستخدم هنا هو<td></td>
</tr>
<تر>
<td>استخدم <col> لتمثيل الأعمدة</td>
<td>الخلية الموجودة في أقصى اليمين في هذا الصف هي خلية جدول فارغة بدون محتوى</td>
<td></td>
</tr>
<تر>
<td>استخدم <tr> لتمثيل الصفوف</td>
<td>تحتوي الخلية الموجودة في أقصى يمين الصف على &nbsp;</td>
<td> </td>
</tr>
</tbody>
</الجدول>
<ساعة />
<إجراء النموذج = "">
<p><form> لا يمكن أن تحتوي تسميات النموذج بشكل مباشر على تسميات تحكم مختلفة. يمكنك استخدام <label><label></label> لاحتواء مكونات النموذج،</p>
<مجموعة الحقول>
<legend>يمكنك أيضًا استخدام العلامتين <fieldset> و<legend> لتجميع النماذج. </أسطورة>
<p>بالنسبة لطريقة تعريف CSS لعلامة الإدخال: استخدم قيمة سمة النوع كاسم فئة، بحيث يمكن تمييز عناصر التحكم المختلفة في الإدخال. </ص>
<ص>
<نوع الإدخال = "نص" فئة = "نص" حجم = "20" معرف = "نص" قيمة = "مربع نص ذو سطر واحد في حقل النص" />
<input type = "text" class = "text" size = "20" id = "text_d" value = "مربع نص ذو سطر واحد لحقل النص معطل" معطل = "معطل" />
<label for="text"> input.text </label>
</ص>
<ص>
<نوع الإدخال = "كلمة المرور" class = "نص" الحجم = "20" معرف = "كلمة المرور" القيمة = "مربع كلمة المرور" />
<input type = "password" class = "text" size = "20" id = "password_d" value = "مربع كلمة المرور المعطلة" معطل = "معطل" />
<label for="password"> input.text </label>
</ص>
<ص>
<input type="submit" class="submit" id="submit" value="إرسال زر الإرسال" />
<input type = "submit" class = "submit" id = "submit_d" value = "زر الإرسال معطل" معطل = "معطل" />
<label for="submit"> input.submit </label>
</ص>
<ص>
<نوع الإدخال = "إعادة تعيين" فئة = "زر" معرف = "إعادة تعيين" قيمة = "زر إعادة تعيين إعادة التعيين" />
<input type = "reset" class = "button" id = "reset_d" value = "زر إعادة تعيين معطل" معطل = "معطل" />
<label for="reset"> input.button </label>
</ص>
<ص>
<نوع الإدخال = "زر" فئة = "زر" معرف = "زر" قيمة = "زر زر عادي" />
<input type = "button" class = "button" id = "button_d" value = "زر معطل الزر العادي" معطل = "معطل" />
<label for="button"> input.button </label>
</ص>
<ص>
<نوع الإدخال = "صورة" فئة = "صورة" حجم = "20" معرف = "صورة" />
<label for="image"> input.image </label>
</ص>
<ص>
<نوع الإدخال = "صورة" فئة = "صورة" حجم = "20" معرف = "image_d" معطل = "معطل" />
<label for="image_d"> تم تعطيل input.image</label>
</ص>
<ص>
<اسم الإدخال = "راديو" نوع = "راديو" فئة = "راديو" معرف = "راديو1" محدد = "محدد" />
<input name = "radio" type = "radio" class = "radio" id = "radio2" />
<label>input.radio </label>
</ص>
<ص>
<اسم الإدخال = "راديو" نوع = "راديو" فئة = "راديو" معرف = "radio1_d" محدد = "تم التحقق" معطل = "معطل" />
<اسم الإدخال = "راديو" نوع = "راديو" فئة = "راديو" معرف = "radio2_d" معطل = "معطل" />
<label> معطّل input.radio </label>
</ص>
<ص>
<input type = "checkbox" class = "checkbox" id = "checkbox1" محدد = "محدد" />
<input type = "checkbox" class = "checkbox" id = "checkbox2" />
<label for="checkbox"> input.checkbox </label>
</ص>
<ص>
<input type = "checkbox" class = "checkbox" id = "checkbox1_d" محدد = "محدد" معطل = "معطل" />
<نوع الإدخال = "مربع الاختيار" فئة = "مربع الاختيار" معرف = "اختيار مربع 2_d" معطل = "معطل" />
<label for="checkbox_d"> تم تعطيل input.checkbox </label>
</ص>
<ص>
<نوع الإدخال = "ملف" فئة = "ملف" معرف = "ملف" حجم = "20" قيمة = "محدد الملف محدد الملف" />
<label for="file"> input.file </label>
</ص>
<ص>
<نوع الإدخال = "ملف" فئة = "ملف" id = "file_d" حجم = "20" قيمة = "محدد الملف محدد الملف" معطل = "معطل" />
<label for="file_d"> تم تعطيل ملف input.file </label>
</ص>
<ص>
<button><img /><button> العلامة</button>
<buttonDisabled="disabled"><img />علامة<button> معطلة</button>
</ص>
<ص>
<label for="textarea"><textarea>الافتراضي هو المحاذاة السفلية</label>
<textarea name = "textarea" cols = "60"rows = "5" id = "textarea">مربع نص متعدد الأسطر في منطقة النص.
وهو أيضًا مشابه للتنسيق المسبق داخليًا، ويمكنه عرض جميع أحرف الإرجاع وأحرف الجدولة</textarea>
<textarea name = "textarea" cols = "20"rows = "5" id = "textarea_b" Disabled = "disabled">مربع نص متعدد الأسطر لمنطقة النص معطل</textarea>
</ص>
<ص>
<اختر اسم = "منطقة النص">
<option>محدد القائمة المنسدلة محدد القائمة المنسدلة</option>
<optgroup label="هذه هي المجموعة الأولى">
<option>يمكن تجميع الخيارات باستخدام <optgroup></option>
<option>وحدد اسم المجموعة من خلال سمة التسمية الخاصة بها</option>
</optgroup>
<optgroup label="هذه هي المجموعة الثانية">
<option>اسم المجموعة هو مجرد نص مطالبة، وليس خيارًا</option>
</optgroup>
</حدد>
<حدد عدة = "متعددة" اسم = "منطقة النص">
<option>عندما تكون سمة الحجم <select> أكبر من 1 أو يتم تحديد السمة المتعددة</option>
<option>سيصبح مربع اختيار متعدد الأسطر مثل هذا</option>
</حدد>
<حدد اسم = "منطقة النص" معطل = "معطل">
<option>مربع القائمة المنسدلة معطل</option>
<option>سيصبح مربع اختيار متعدد الأسطر مثل هذا</option>
</حدد>
</ص>
</فيلدسيت>
</النموذج> </الجسم>
</html>
|
