بسم الله الرحمان الرحيم
شاهد أيضاً: تعلم تصميم المواقع – تعلم HTML, HTML5, CSS, CSS3: المقدمة
شاهد أيضاً: تركيب مواقع ووردبريس
شاهد أيضاً: تصميم صفحة ويب HTML5, CSS3, JavaScript
احتياجات قبل البدء:
نظام التشغيل:
Windows أو Linux أو MAC OS …
متصفح ويب:
Chrome أو Firefox أو Opera …
محرر الأكواد:
Notepad++ أو Komodo Edit أو Netbeans أو Sublime Text …
أيقونات: https://www.iconfinder.com
ألوان: https://html-color-codes.info
ما هي HTML؟
HTML هي اختصار لـHyper Text Markup Language وهي ببساطة لغة توصيفية تستخدم في تصميم صفحات ويب، تم الإصدار الاول من ”HTML” و”XHTML“ في 1991، وآخر إصدار ”HTML 5“ في 2015، والفرق بين هذه الإصدارات هو حذف بعض الوسوم واضافة وسوم جديدة وتطويرات وخواص جديدة.
إعدادات الصفحة – Settings:
نوع الصفحة:
<html> </html>
نوع الصفحة الذي اعتمدته منظمة W3 لإصدار HTML 5:
<DOCTYPE html>
التعليقاتComments:
هو ملاحظة او نص توضيحي مكتوب يراه المبرمج فقط ولا يظهر في الصفحة.
رأس الصفحة:
هو الجزء الذي لا يظهر في المتصفح.
<head></head>
تحديد خصائص الصفحة:
<meta>
ترميز الصفحة:
charset=”utf-8″
الوصف:
name=”description” content=”text”
تصميم الصفحة بلغة CSS:
<style> </style>
رابط خارجي له علاقة بالصفحة:
<link> </link>
وسم خاص بالجافا سكربت:
<script> </script>
جسم الصفحة:
هو الجزء الذي يظهر في المتصفح.
<body> </body>
العناصر الإضافية – Attributes مثل:
name=””
ملاحظات:
* meta keyword : انتهت ولم تعد تستخدم
* الترتيب مهم لهذه الوسوم.
* rel اختصار لـrelationship
* charset اختصار لـ character set
* كل صفحة HTML لها تنسيق افتراضي ويمكن تنسيقها وتقسيمها بطرق مختلفة.
مثال:
شاهد أيضاً: تركيب مواقع ووردبريس
شاهد أيضاً: تصميم صفحة ويب HTML5, CSS3, JavaScript
الروابط – Anchor Links:
وضع رابط في الصفحة:
<a> </a>
a اختصار لـ anchor وتعني مرساة السفينة.
href=””
href اختصار لـ hyper reference
تحديد كيفية فتح الرابط:
target=””
فتح الرابط في صفحة جديدة تلقائياً:
target=”_blank”
فتح الرابط في نفس الصفحة:
target=”_self”
الإنتقال إلى عنصر آخر في نفس الصفحة باستخدام علامة #:
href=”#id”
مثال:
الشكل على المتصفح:
شاهد أيضاً: تركيب مواقع ووردبريس
شاهد أيضاً: تصميم صفحة ويب HTML5, CSS3, JavaScript
العناوين – Heading:
كتابة عنوان في الصفحة:
<h1><h2><h3><h4><h5><h6><h7>
<h1> أكبر عنوان و <h7> أصغر عنوان.
العناوين تكتب في سطر لوحدها وهي عامل مهم من عوامل السيو.
مثال:
الشكل على المتصفح:
شاهد أيضاً: تركيب مواقع ووردبريس
شاهد أيضاً: تصميم صفحة ويب HTML5, CSS3, JavaScript
الصور – Images:
وضع صورة في الصفحة:
<img>
رابط الصورة:
src=””
src اختصار لـ source
جلب الصورة من خارج المجلد:
src=”../”
نص بديل للصورة / تعريف الصورة:
alt=”text”
مثال:
الشكل على المتصفح:
شاهد أيضاً: تركيب مواقع ووردبريس
شاهد أيضاً: تصميم صفحة ويب HTML5, CSS3, JavaScript
عنصر بجانب الآخر – Display Inline:
أمثلة للعناصر التي يتم تنسيقها بشكل افتراضي على مستوى خطي عنصر بجانب الاخر:
<a> <img> <span>
Span: يمكن استخدامها لتنسيق خط لوحده بCSS
مثال:
الشكل على المتصفح:
شاهد أيضاً: تركيب مواقع ووردبريس
شاهد أيضاً: تصميم صفحة ويب HTML5, CSS3, JavaScript
عنصر تحت عنصر – Display Block:
أمثلة للعناصر التي يتم تنسيقها بشكل افتراضي عنصر تحت عنصر:
<p> <h1> <h2> <div>
<br>: وضع عنصر تحت عنصر وهو موجود تلقائيا قبل / بعد عناصر Block.
Div: يمكن وضع جميع عناصر HTML بداخله.
Inline-Block: جمع عناصر مختلفة.
مثال:
الشكل على المتصفح:
شاهد أيضاً: تركيب مواقع ووردبريس
شاهد أيضاً: تصميم صفحة ويب HTML5, CSS3, JavaScript
القوائم – Lists:
قائمة غير مرتبةUnordored list:
<ul> <li> </li> </ul>
قائمة مرتبة بالأرقامOrder list:
<ol> <li> </li> </ol>
عناصر القائمةAttributes:
ترتيب مختلف / تغيير الارقام:
type=” “
تغيير الترتيب / اختيار الرقم الذي ستبدأ به:
start=” ”
عكس الترتيب من الاخر الى الأول:
reversed=” “
ملاحظة: يمكن وضع قائمة بداخل قائمة أخرى من نوع مختلف.
قائمة وصفيةDescription List:
<dl> <dt> </dt> <dd> <dd> </dl>
مثال:
الشكل على المتصفح:
تنسيق النصوص – Text Format:
ملاحظة: استخدام تنسيقات CSS أفضل وأسهل لتنسيق كل النصوص والتحكم بشكلها.
نص عريضBold:
<b> </b>
نص مائل Italic:
<i> </i>
تصغير النصSmall:
<small> </small>
نص قوي Strong:
<strong> </strong>
strong يعني نص قوي ومهم ويجب الانتباه له وهو مختلف عن bold.
اقتباس كبيرBlockquote:
<blockquote> </blockquote>
اقتباس صغير بين “”:
<q> </q>
علامة ملونة لتمييز النص:
<mark> </mark>
نص عليه خط:
<del> </del>
نص تحته خط لتصحيح الكلمة السابقة:
<ins> </ins>
وضع حرف في الأعلى مثل الأس:
<sup> </sup>
تستعمل في التواريخ والرياضيات وماشابه…
وضع حرف في الأسفل:
<sub> </sub>
مثال:
الشكل على المتصفح:
شاهد أيضاً: تركيب مواقع ووردبريس
شاهد أيضاً: تصميم صفحة ويب HTML5, CSS3, JavaScript
الجداول – Tables:
إنشاء جدول:
<table> </table>
إنشاء صف table row:
<tr> </tr>
إنشاء خليةtable data:
<td> </td>
وصف الصف:
<caption> </caption>
يتم وضعه بعد <table>
عناوين الجدول table heading:
<th> </th>
يتم تنسيقها تلقائياً على شكل عنوان ونص عريض بالوسط
تقسيم الجدول:
يتكون الجدول من head و body و footer.
رأس الجدول:
<thead> </thead>
أسفل الجدول:
<tfoot> </tfoot>
جسم الجدول:
<tbody> </tbody>
tfoot و thead يتم ترتيبهم في أعلى أو أسفل الجدول تلقائياً.
خواص خلايا الجدول:
دمج خلايا الجدول (عمود بالعرض):
colspan =”size”
دمج خلايا الجدول (عمود بالطول):
rowspan=”size”
مجموع الاعمدة (بالعرض):
<colgroup> </colgroup>
ملاحظات:
* خاصية التوسيط align=”center” تم إلغاؤها واصبحت تستخدم في CSS.
* خاصية <table> أصبحت لا تستخدم في التصميم وأصبح بدلها <div> وكل التنسيقات يتم عملها فيCSS بطريقة أسهل.
مثال:
الشكل على المتصفح:
شاهد أيضاً: تركيب مواقع ووردبريس
شاهد أيضاً: تصميم صفحة ويب HTML5, CSS3, JavaScript
تصنيف العناصر – Elements Class:
تصنيف العناصر:
class=””
هذه الخاصية تستخدم لتمييز العناصر وإضافة تنسيقات لعناصر مختلفة والتحكم فيها بشكل أسهل.
مثال:
الشكل على المتصفح:
شاهد أيضاً: تركيب مواقع ووردبريس
شاهد أيضاً: تصميم صفحة ويب HTML5, CSS3, JavaScript
النماذج – Forms:
إنشاء نموذج:
<form> </form>
تعريف النموذج:
name=””
تسمية حقل الادخال:
<label> </label>
حقل ادخال البيانات:
<input> /input>
قيمة الادخال (نص مكتوب):
value=””
إظهار نص في حقل الإدخال:
placeholder=””
تحديد عدد الحروف:
maxlength=””
أنواع حقل البيانات:
ادخال نص عادي:
type=”text”
ادخال نص مخفي:
type=”password”
علامة تحديد خيارات متعددة:
type=”checkbox”
زر:
type=”button”
*يستخدم غالبا في جافا سكربت
زر الارسال (الى صفحة اخرى):
type=”submit”
افراغ النموذج واعادته الى الشكل الافتراضي:
type=”reset”
رفع ملف الى النموذج:
type=”file”
زر الارسال على شكل صورة:
type=”image”
حقول مخفية (إرسال متغيرات او قيم مع الصفحة بشكل خفي):
type=”hidden”
علامة تحديد خيار واحد:
type=”radio”
كتابة نص او رسالة طويلة:
<textarea> </textarea>
تحديد مساحة الصفوف بالطول:
rows=””
تحديد مساحة الصفوف بالعرض:
cols=””
تعيين للقراءة فقط ولا يمكن الكتابة:
<textarea readonly>
* يمكن استخدامه مع جافا سكربت بحيث يتم كتابة النص في حقل آخر.
تنسيق النماذج:
<fieldset> >/fieldset>
قائمة الاختيارات:
<select> </select>
الغاء امكانية الاختيار:
<select disabled>
* يمكن استخدامها لربط بيانات اخرى بالقائمة بحيث يمكن الاختيار بعد ملئ القائمة.
حجم القائمة:
size=””
اختيار متعدد (يمكن تحديد اكثر من خيار واحد):
<select multiple>
إضافة عنوان لكل اختيار:
<optgroup> </optgroup>
مثال:
الشكل على المتصفح:
شاهد أيضاً: تركيب مواقع ووردبريس
شاهد أيضاً: تصميم صفحة ويب HTML5, CSS3, JavaScript
عرض صفحة في إطار Iframe:
عرض الصفحة في إطار داخل صفحة أخرى:
<iframe> </iframe>
خواص الهبوط والصعود والأبعاد في الإطار (scrolling width height) أصبحت ملغية في HTML وتُستخدم في CSS.
أكواد CSS:
الهبوط والصعود:
overflow:scrolling
الغاء scrolling في متصفح فيرفوكس فقط:
overflow:hidden
اضافة scroll تلقائيا:
overflow:auto
الغاء scroll في كل المتصفحات:
overflow:no
مثال:
الشكل على المتصفح:
شاهد أيضاً: تركيب مواقع ووردبريس
شاهد أيضاً: تصميم صفحة ويب HTML5, CSS3, JavaScript
علامات وعناصر محجوزةEntities:
علامات وعناصر محجوزة مع اللغة.
اضافة مسافة بين الكلماتnon breaking space:
علامة اصغر من:
<
علامة اكبر من:
>
علامة العطف:
&
علامات النقود:
¢ £ ¥ €
علامة الحقوق:
©
علامة تجارية:
®
مثال:
الشكل على المتصفح:
شاهد أيضاً: تركيب مواقع ووردبريس
شاهد أيضاً: تصميم صفحة ويب HTML5, CSS3, JavaScript
1/ إنشاء تصميم الصفحة.
تطبيق إنشاء تصميم صفحة باستخدام HTML.
الكود:
الشكل على المتصفح:
شاهد أيضاً: تركيب مواقع ووردبريس
شاهد أيضاً: تصميم صفحة ويب HTML5, CSS3, JavaScript
2/ إنشاء نموذج.
تطبيق إنشاء نموذج باستخدام HTML.
الكود:
الشكل على المتصفح:
