(حصريا) لغة HTML عادت مرة اخرى بقوة مع HTML 5.1 و HTML 5.2

[Black foxer]

السلام عليكم اخواني في عرب هاردوير تحية طيبة وبعد :



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


وصدر منها HTML 5 واهم ما يميزه انه يقدم عدد من العناصر الجديدة والتي تسهل من فكرة تكوين الصفحات، حسب ما نقوم به يدوياً في XHTML 1.0 بالإضافة إلى تسهيل الأمور على محركات البحث في قراءة الصفحات ومعرفة ما هي أجزاء الصفحة الفعلية (الجزء العلوي (Header)، القائمة (Navigation)، المحتوى (Sections) والجزء السفلي (Footer).
كما توفر HTML5 عدد من بيئات العمل المختلفة لتكوين الرسوميات والفيديو والعديد من المميزات التي تسهل الكثير مما يتم القيام به حالياً.

ولكن لم تتوقف W3C (World Wide Web Consortium(الى هذا الحد مؤخرا (من شهر تقريبا) اطلقت رسميا الاصدار HTML 5.1

والمميزات التي تم اضافتها لها هي :



الاضافات التي تم حذفها هي :



الاضافات التي تم تحديثها هي :



عرض سريع لبعض الاضافات الجديدة

شكل القائمة :



الكود المستخدم من html

<p contextmenu="popup-menu">
  Right click here to see the context menu.
</p>


<menu type="context" id="popup-menu">
  <menuitem type="checkbox" checked="true">Checkbox</menuitem>
  <menuitem type="command" label="Command" onclick="alert('Hey!')">Checkbox</menuitem>
  <menuitem type="radio" name="group1" checked="true">Radio button 1</menuitem>
  <menuitem type="radio" name="group1">Radio button 2</menuitem>
  <menuitem type="checkbox" disabled>Disabled menu item</menuitem>
</menu>

كود Css

body {
  font-family: 'Roboto';
  font-size: 18px;
  color: #333;
  text-align: center;
}


p {
  width: 160px;
  background: #744D8B;
  padding: 10px 30px;
  color: white;
  display: inline-block;
}


p:hover {
  background: #8456a0;
}

عرض التفاصيل والموجز



كود HTML

<section>
  <h2>Red panda</h2>
  <p>
    The red panda's local names differ from place to place. The Lepcha people call it sak nam. In Nepal, the species is called bhalu biralo (bear-cat) and habre.
  </p>
  <details>
    <summary>
      Distribution and habitat
    </summary>
    <p>
    The red panda is endemic to the temperate forests of the Himalayas, and ranges from the foothills of western Nepal to China in the east. Its easternmost limit is the Qinling Mountains of the Shaanxi Province in China. Its range includes southern Tibet, Sikkim and Assam in India, Bhutan, the northern mountains of Burma, and in south-western China, in the Hengduan Mountains of Sichuan and the Gongshan Mountains in Yunnan.
    </p>
  </details>
  <details>
    <summary>
      Curious facts
    </summary>
    <p>
    The red panda's local names differ from place to place. The Lepcha people call it sak nam. In Nepal, the species is called bhalu biralo (bear-cat) and habre.
    </p>
    <p>
  The red panda was recognized as the state animal of Sikkim in the early 1990s, and was the mascot of the Darjeeling Tea Festival.
    </p>
  </details>
</section>

كود Css

body {
  font-family: 'Roboto';
  color: #333;
  font-size: 1.1em;
}


section {
  max-width: 500px;
}


details {
  background: #f0f0f0;
  padding: 20px;
  margin-bottom: 5px;
}


summary {
  cursor: pointer;
  font-weight: bold;
  font-size: 1.1em;
}

اضافة 3 مدخلات جديدة !! :



كود html

<h2>Week, month and datetime-local inputs</h2>


<p>Select a value to see how it appears in JavaScript.</p>


<section>
  <div>
    <label>Week</label>
    <input type="week" onchange="showValue('week', event.target.value)">
    <span id="week"></span>
  </div>


  <div>
    <label>Month</label>
    <input type="month" onchange="showValue('month', event.target.value)"> 
    <span id="month"></span>
  </div>


  <div>
    <label>Datetime local</label>
    <input type="datetime-local" onchange="showValue('datetime-local', event.target.value)">
    <span id="datetime-local"></span>
  </div>
</section>

كود Css

body {
  font-family: 'Roboto';
  color: #333;
}


section {
  font-size: 1.2em;
}


div {
  margin-bottom: 10px;
  padding: 15px 6px;
  width: 400px;
  background: #f3f3f3;
}


label {
  width: 120px;
  display: inline-block;
  text-align: right;
}


input {
  width: 180px;
  vertical-align: text-top;
}

كود الجافا

function showValue(id, value) {
  document.getElementById(id).innerHTML = value;
}

عرض الصور بدون استخدام Css :

1/عرض الصور على حسب دقة الشاشة تلقائيا

<img src="images/low-res.jpg" srcset="
  images/low-res.jpg 1x, 
  images/high-res.jpg 2x, 
  images/ultra-high-res.jpg 3x"
>

لو دقة الشاشة قليلة سيعرض الصورة المخصصة لها low res ولو الدقة عالية سيعرض high res وهكذا

2/امكانية تخصيص عرض الصور السابقة بابعاد محددة

<img src="images/low-res.jpg" srcset="
  images/low-res.jpg 600w, 
  images/high-res.jpg 1000w, 
  images/ultra-high-res.jpg 1400w"
>

3/امكانية عرض الصور على حسب حجم الشاشة (مختلفة عن الابعاد)

<img src="images/low-res.jpg" sizes="(max-width: 40em) 100vw, 50vw" 
  srcset="images/low-res.jpg 600w, 
  images/high-res.jpg 1000w, 
  images/ultra-high-res.jpg 1400w"
>

الكود الكامل للصورة

<picture>
  <source media="(max-width: 20em)" srcset="
    images/small/low-res.jpg 1x,
    images/small/high-res.jpg 2x, 
    images/small/ultra-high-res.jpg 3x
  ">
  <source media="(max-width: 40em)" srcset="
    images/large/low-res.jpg 1x,
    images/large/high-res.jpg 2x, 
    images/large/ultra-high-res.jpg 3x
  ">


  <img src="images/large/low-res.jpg">
</picture>

4/امكانية عرض الصور بملىء الشاشة (شاشة كاملة)

التحقق من صحة المدخلات في النماذج :



كود html

<h2>Form validation</h2>
<p>A validation error should immediately appear when you open this CodePen.</p>


<form>
  <label>
    Mandatory input <input type="text" name="first-name" required />
  </label>
  <button type="submit">Submit</button>
</form>

كود Css :

body {
  font-family: 'Roboto';
  color: #333;
}


form {
  margin-bottom: 10px;
  padding: 6px;
  width: 380px;
  background: #f3f3f3;
}


input {
  width: 180px;
  vertical-align: middle;
}

كود الجافا

document.querySelector('form').reportValidity()

والجدير بالذكر ان W3C قد اعلنت عن صدور HTML 5.2 في اخر 2017

[farstorrent]

تسلم على الموضوع ياغالى