استثمر للحياة

برمجة و تصميم و تطوير المواقع

تخطيط الصفحة و الكتابة في HTML5

حجم الخط

ht 1كيفية تخطيط و تنسيق الصفحة

فى   HTML5

HTML5  هي الإصدار الجديد من لغة ترميز صفحات المواقع (HyperText Markup Language).
لماذا نستخدمها 

 

  1. هذه اللغة تقدم عدد من الوسوم و السمات  الجديدة والتي تسهل علينا تكوين الصفحات .

  2. تُسهل على محركات البحث  قراءة الصفحات ومعرفة ما هي أجزاء الصفحة الفعلية , مثل الجزء العلوي(Header)  القائمة (Navigation)   المحتوى(Sections)  و المقال article))  والجزء السفلي (Footer)  . 

  3. التواصل مع الخادم بطرق جديدة ومبتكرة لعدم إعتمادها على ملحقات خارجية plugin    مما ييُسر للمتصفح  تحميل الصفحات بدون مشاكل.

  4. كما توفرعدد من بيئات العمل المختلفة مثل <canava> و < SVG>  لتكوين الرسومات  عن طريق البرمجة .

  5. توفر وظائف جديدة مثل عناصر <audio>  و<video>  لتضمين ملفات الصوت والفيديو .

  6. السماح لصفحات الويب بتخزين البيانات العميل .

  7. توفير قدر أكبر من التحسين السرعة واستخدام أفضل لأجهزة الكمبيوتر.

راجع مقدمة HTLM

الشكل الاساسي لكود HTML5

 

 

يكتب الكود على notepad العادي و يفضل  notepad++ و يحفظ بامتداد  htlm.

و هو لا يختلف عن الكود المعروف إلا فى :

  1. العبارة <!DOCTYPE html>  و التي تخبر المتصفح أن الاكواد التالية تكون بصيغة 5 HTLM.

  2. السمة  <html lang=”ar”> و التي تعلن عن لغة الصفحة , و يهتم بها محركات البحث و قارئات الشاشة .

  3. هذا و لعرض صفحة HTML5  بشكل صحيح ، يجب على المتصفح أن يعرف مجموعة المحارف المستخدمة في الصفح

 

  <meta charset="utf-8">

 

راجع أيضاً تنسيق الصفحة فى HTML

 

تخطيط  الصفحات

لن نتعب في تصميم صفحات , انظر ماذا قدمت لنا   HTLM5

html5

شاهد المثال و الكود

وسوم HTLM5 Tags

 

<aside>

لتعريف الشريط الجانبي SIDEBAR

<meta>

لتحديد وصف الصفحة ، والكلمات الرئيسية و مجموعة المحارف و غيرها من البيانات الوصفية. و التي لا تظهرعلى الصفحة و لكنها فقط لاستخدام المتصفح .

<summary>

وسم لتخصيص عنوان للتفاصيل الإضافية

<details>

لتحديد منطقة كتابة تفاصيل إضافية

<footer>

لتعريف منطقة تذيل الصفحة   footer

<header>

لتعريف منطقةرأس الصفحة او القسم   header

<main>

لتعريف القطاع الرئيسي من الصفحة

<section>

لتعريف منطقة  القسم

<article>

لتعريف منطقة  المقال

<nav>

لتعريف منطقة  النافبار و روابطه

<time>

لتعريف الوقت و التاريخ . مثل

 

<p><time datetime=”2008-02-14 20:00”></time>.</p>

<!--…-->

يكتب بينها أي تعليق على الكود البرمجي

<!DOCTYPE>

تخبر المتصفح بأنه الصفحة بها أكود htlm5  و هو وسم لا يقفل

<em>

لتحديد نص مائل Emphasized text بين النص العادي

<pre>

لكتابة نص سبق إعداده " نص يكتب كما هو"

<mark>

لتظليل النص

<abbr>

لإظهارعبارة ما عند وقوف الماوس عند كلمة ما

html5-abbr

<address>

لكتابة عنوان و بيانات المؤلف أو  المرسل  فى رسالة ما

<s>

لوضع علامة نص انتهت الحاجة له

<ins>

لوضع علامة نص مُدخل inserted

<sub>

لكتابة خط منخفض   O2

<sup>

لكتابة خط مرتفع   X3

<code>

لتعريف أكواد البرمجة

<var>

لتعريف متغيرات رياضية

<del>

لوضع علامة نص محذوف

<s>

لتحديد نص أصبح لا داعي له ... و هو يختلف عن سابقه delفى انه لا يشير لحذف النص

<dfn>

اتعريف مصطلح و تميزه

<kbd>

لكتابة نص ينبه لاستخدام مفاتيح لوحة المفاتيح

html5-kdb

<small>

لكتابة نص بخط صغير فى نفس السطر

<q>

لكتابة نص " مقتبس "

<blockquote>

لكتابة نص  مقتبس

<meter>

لاضافة مقياس ثابت له مدى معين حتى لو كسور . مثل ما يظهر لنا للدلالة على ما تبقى من مساحة القرص الصلب .

<progress>

يستخدم مع جافا سكريبت لعرض تقدم المهمة

.<progress value=”22” max=”100”></progress>

<bdi>

لكتابة نص من اليمين لليسار أو العكس معاً .  هذا يفيد عندما نسمح للمستخدمب الكتابة  و يكون  اتجاهها غير معروف.

<bdo>

لتغير اتجاه النص الحالي اليمين لليسار أو العكس

<wbr>

لتحديد نقطة نهاية السطر في حالة ما كان السطر طويل .

 

راجع أيضاً تنسيق الصفحة فى HTML HTLM

 

سمات   Attributes   HTLM5

   بعض الوسوم فى html  تمتلك صفات " سمات " مكملة لها و تضفى عليها قدر من التخصصية . و تكون السمات على الصورة الاسم = " القيمة "

السمة

الشرح

accesskey

توفر مفاتيح اختصار لتنفيذ العنصر . فمثلاً عند تنفيذ الكود التالي اذا كان متصفحك فيرفوكس اضغط على alt+shift+i ليتم  تنفيذ الرابط مباشرة

<a href="http://www.investolife.com" accesskey="i">invest for life</a>

class

لتحديد خصائص مميزة لعدة عناصر

contenteditable

يسمح للمستخدم بتغير نص مكتوب داخل الصفحة

dir

لتحديد اتجاه كتابة النص من اليمين لليسار أم العكس مثلاً dir=”rtl”

draggable

لتحديد عنصر يمكن سحبه و إفلاته

dropzone

لتحديد كفية السحب و الإفلات و لها ثلاث قيم copy / move / link

id

لتحديد خصائص مميزة لعنصر واحد فقط

lang

لتحديد لغة كتابة الصفحة مثلاً <" <htmllang=”ar

spellcheck

لفحص نص ما كتابتاً و نحواً يستعمل مع contenteditable

style

لتحديد خصائص CSS

tabindex

لتحديد زر من لوحة المفاتيح لتنفيذ أمر معين يشبه accesskeyو لكن هنا نستخدم زر واحد فقط

title

لكتابة عنوان لعنصر ما

translate

يحدد ما اذا كان محتوى العنصر قابل للترجمة أم لا , و له القيم translate="yes|no"

charset

لتحديد مجموعة المحارف مثل utf-8 المستخدمة فى الصفحة .

    

 

الموضوع  :  *تخطيط الصفحة و الكتابة في HTML5* المرجع : استثمر للحياة  investolife 

اعلان تجاري
اعلان 468