شرح الدرس السابع html بعنوان تنسيق النصوص
ادلة التنسيق:-
1-<b> وهو جعل النص عريض
2-<strong> وهو جعل النص عريض(يوجد اختلاف بينهما)
3-<i> وهو جعل النص مائل
4-<em>وهو جعل الخط مائل
5-<mark>وهو عمل علامة علي النص
6-<small>وهو جعل النص صغير
7-<del>وهو عمل خط في نصف النص
8-<ins>وهو عمل خط تحت النص
9-<sub> وهو عمل نص منخفض
10-<sup> وهو عمل نص مرتفع
-----------------------------------
نأتي لأول تنسيق
<b>
وهو مجرد عمل الخط عريض دون أي اهمية لمحركات البحث.
وله وسم نهاية <b/>
مثال:-
انسخ الكود وضعه في نوباد وافحظ بامتداد.html:-
============================
هتظهرلك كدا:-
شرح الكود
ادلة التنسيق:-
1-<b> وهو جعل النص عريض
2-<strong> وهو جعل النص عريض(يوجد اختلاف بينهما)
3-<i> وهو جعل النص مائل
4-<em>وهو جعل الخط مائل
5-<mark>وهو عمل علامة علي النص
6-<small>وهو جعل النص صغير
7-<del>وهو عمل خط في نصف النص
8-<ins>وهو عمل خط تحت النص
9-<sub> وهو عمل نص منخفض
10-<sup> وهو عمل نص مرتفع
-----------------------------------
نأتي لأول تنسيق
<b>
وهو مجرد عمل الخط عريض دون أي اهمية لمحركات البحث.
وله وسم نهاية <b/>
مثال:-
انسخ الكود وضعه في نوباد وافحظ بامتداد.html:-
============================
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<p>this is <b>text</b></p>
<p><b>This is Text</b><p>
</body>
</html>
============================هتظهرلك كدا:-
<!DOCTYPE html>
تعريف ان هذا المستند مكتوب بـ HTML5
<head></head>
رأس الصفحة وتحتوي علي معلومات عن الصفحة غير مرئية ولكن هنا لا يوجد بها أي شئ في الكود السابق
<body></body>
جسم الصفحة وتحتوي علي عناصر المرئية
<p></p>
عنصر يحول الكلام اللي بين الوسوم لنص عادي وصغير
<b></b>
يحول النص اللي بينهم اللي نص عريض ولكن بدون أدني أهمية لمحركات البحث ولفعل ذلك بتبقي في عناصر النصوص وتوضع بينهما الكلام الذي تريد أن يكون عريض
<strong>
شرح الكود
ملاحظة:-يمكن تحديد جزء من كلام كما حدث في البروجراف الثاني في المثال
واكيد ممكن كل الكلام كما حدث في البروجراف الأول في المثال
--------------------------------------------------------------------------------------------
نأتي لثاني تنسيق <strong>
وهو عمل الخط عريض ولكن له اهمية لمحركات البحث
وله وسم نهاية <strong/>
مثال
انسخ الكود وضعه في نوباد وافحظ بامتداد.html:-
============================
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<p>this is <strong>text</strong></p>
<p><strong>This is Text</strong><p>
</body>
</html>
============================
هتظهرلك كدا:-
<!DOCTYPE html>
تعريف ان هذا المستند مكتوب بـ HTML5
<head></head>
رأس الصفحة وتحتوي علي معلومات عن الصفحة غير مرئية ولكن هنا لا يوجد بها أي شئ في الكود السابق
<body></body>
جسم الصفحة وتحتوي علي عناصر المرئية
<p></p>
عنصر يحول الكلام اللي بنهم لنص عادي وصغير
<strong></strong>
يحول النص اللي بين الوسوم اللي نص عريض ولكن لها اهمية في محركات البحث ولفعل ذلك بتبقي في عناصر النصوص وتوضع بينهما الكلام الذي تريد أن يكون عريض
<i>
وهو عمل الخط مائل وليس له اهمية لمحركات البحث
شرح الكود
ملاحظة:-يمكن تحديد جزء من كلام كما حدث في البروجراف الثاني في المثال
واكيد ممكن كل الكلام كما حدث في البروجراف الأول في المثال
--------------------------------------------------------------------------------------------
نأتي لثالث تنسيق <i>
وهو عمل الخط مائل وليس له اهمية لمحركات البحث
وله وسم نهاية <i/>
مثال
انسخ الكود وضعه في نوباد وافحظ بامتداد.html:-
============================
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<p>this is <i>text</i></p>
<p><i>This is Text</i><p>
</body>
</html>
============================
هتظهرلك كدا:-
<!DOCTYPE html>
تعريف ان هذا المستند مكتوب بـ HTML5
<head></head>
رأس الصفحة وتحتوي علي معلومات عن الصفحة غير مرئية ولكن هنا لا يوجد بها أي شئ في الكود السابق
<body></body>
جسم الصفحة وتحتوي علي عناصر المرئية
<p></p>
عنصر يحول الكلام اللي بنهم لنص عادي وصغير
<i></i>
يحول النص اللي بين الوسوم اللي نص عريض ولكن ليس لها اهمي وتوضع بينهما الكلام الذي تريد أن يكون مائل
ملاحظة:-يمكن تحديد جزء من كلام كما حدث في البروجرة في محركات البحث ولفعل ذلك بتبقي في عناصر النصوصاف الثاني في المثال
ملاحظة:-يمكن تحديد جزء من كلام كما حدث في البروجرة في محركات البحث ولفعل ذلك بتبقي في عناصر النصوصاف الثاني في المثال
واكيد ممكن كل الكلام كما حدث في البروجراف الأول في المثال
----------------------------------------------------------------------------------------------------------------
نأتي لرابع تنسيق
<em>
وهو عمل الخط مائل ولكن له اهمية لمحركات البحث
شرح الكود
<em>
وهو عمل الخط مائل ولكن له اهمية لمحركات البحث
وله وسم نهاية <em/>
مثال
انسخ الكود وضعه في نوباد وافحظ بامتداد.html:-
============================
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<p>this is <em>text</em></p>
<p><em>This is Text</em><p>
</body>
</html>
============================
هتظهرلك كدا:-
<!DOCTYPE html>
تعريف ان هذا المستند مكتوب بـ HTML5
<head></head>
رأس الصفحة وتحتوي علي معلومات عن الصفحة غير مرئية ولكن هنا لا يوجد بها أي شئ في الكود السابق
<body></body>
جسم الصفحة وتحتوي علي عناصر المرئية
<p></p>
عنصر يحول الكلام اللي بنهم لنص عادي وصغير
<em></em>
يحول النص اللي بين الوسوم اللي نص عريض ولكن لها اهمية في محركات البحث ولفعل ذلك بتبقي في عناصر النصوص وتوضع بينهما الكلام الذي تريد أن يكون مائل
ملاحظة:-يمكن تحديد جزء من كلام كما حدث في البروجراف الثاني في المثال
واكيد ممكن كل الكلام كما حدث في البروجراف الأول في المثال
--------------------------------------------------------------------------------
نأتي لخامس تنسيق
<mark>
وهو تعليم الكلام أو النص باللون الأصفر
شرح الكود
وهو تعليم الكلام أو النص باللون الأصفر
وله وسم نهاية <mark/>
مثال
انسخ الكود وضعه في نوباد وافحظ بامتداد.html:-
============================
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<p>this is <mark>text</mark></p>
<p><mark>This is Text</mark><p>
</body>
</html>
============================
هتظهرلك كدا:-
<!DOCTYPE html>
تعريف ان هذا المستند مكتوب بـ HTML5
<head></head>
رأس الصفحة وتحتوي علي معلومات عن الصفحة غير مرئية ولكن هنا لا يوجد بها أي شئ في الكود السابق
<body></body>
جسم الصفحة وتحتوي علي عناصر المرئية
<p></p>
عنصر يحول الكلام اللي بنهم لنص عادي وصغير
<mark></mark>
يحول النص اللي بين الوسوم اللي نص معلم باللون الأصفر ولفعل ذلك بتبقي في عناصر النصوص وتوضع بينهما الكلام الذي تريد أن معلم أو تكون خلفيتها صفراء
ملاحظة:-يمكن تحديد جزء من كلام كما حدث في البروجراف الثاني في المثال
واكيد ممكن كل الكلام كما حدث في البروجراف الأول في المثال
----------------------------------------------------------------------
نأتي لسادس تنسيق
<small>
وهو جعل الكلام اصغر من عنصر النص
شرح الكود
وهو جعل الكلام اصغر من عنصر النص
وله وسم نهاية <small/>
مثال
انسخ الكود وضعه في نوباد وافحظ بامتداد.html:-
============================
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h1>THIS <small>is</small> TEXT</h1>
</body>
</html>
============================
هتظهرلك كدا:-
<!DOCTYPE html>
تعريف ان هذا المستند مكتوب بـ HTML5
<head></head>
رأس الصفحة وتحتوي علي معلومات عن الصفحة غير مرئية ولكن هنا لا يوجد بها أي شئ في الكود السابق
<body></body>
جسم الصفحة وتحتوي علي عناصر المرئية
<p></p>
عنصر يحول الكلام اللي بنهم لنص عادي وصغير
<small></small>
يحول النص اللي بين الوسوم اللي نص أصغر مما يفترض عليه ولفعل ذلك بتبقي في عناصر النصوص وتوضع بينهما الكلام الذي تريد أن يكون أصغر من الباقي
ملاحظة:-يمكن تحديد جزء من كلام كما حدث فعلنا في المثال السابق
واكيد ممكن كل الكلام
---------------------------------------------------------------------------------------
نأتي لسابع تنسيق
<del>
وهو جعل النص المكتوب داخلها في وسطه خط ومعناها نص محذوف
شرح الكود
وهو جعل النص المكتوب داخلها في وسطه خط ومعناها نص محذوف
وله وسم نهاية <del/>
مثال
انسخ الكود وضعه في نوباد وافحظ بامتداد.html:-
============================
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h1>this <del>is</del> text</del>
<h1><del>this is text</del></h1>
<h1><del>this is text</del></h1>
</body>
</html>
============================
هتظهرلك كدا:-
<!DOCTYPE html>
تعريف ان هذا المستند مكتوب بـ HTML5
<head></head>
رأس الصفحة وتحتوي علي معلومات عن الصفحة غير مرئية ولكن هنا لا يوجد بها أي شئ في الكود السابق
<body></body>
جسم الصفحة وتحتوي علي عناصر المرئية
<p></p>
عنصر يحول الكلام اللي بنهم لنص عادي وصغير
<del></del>
عمل خط في وسط الكلام ولفعل ذلك بتبقي في عناصر النصوص وتوضع بينهما الكلام الذي تريد أن يكون فيه خط في النص
ملاحظة:-يمكن تحديد جزء من كلام كما حدث فعلنا في المثال السابق
واكيد ممكن كل الكلام كما فعلنا في المثال السابق
------------------------------------------------------------------------------------------------
نأتي لثامن تنسيق
<ins>
وهو جعل النص المكتوب داخلها تحته خط ومعناها نص مضاف
============================
شرح الكود
وهو جعل النص المكتوب داخلها تحته خط ومعناها نص مضاف
وله وسم نهاية <ins/>
مثال
انسخ الكود وضعه في نوباد وافحظ بامتداد.html:-
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h1>this <ins>is</ins> text</del>
<h1><ins>this is text</ins></h1>
<h1><ins>this is text</ins></h1>
</body>
</html>
============================
هتظهرلك كدا:-
<!DOCTYPE html>
تعريف ان هذا المستند مكتوب بـ HTML5
<head></head>
رأس الصفحة وتحتوي علي معلومات عن الصفحة غير مرئية ولكن هنا لا يوجد بها أي شئ في الكود السابق
<body></body>
جسم الصفحة وتحتوي علي عناصر المرئية
<p></p>
عنصر يحول الكلام اللي بنهم لنص عادي وصغير
<ins></ins>
عمل خط تحت الكلام ولفعل ذلك بتبقي في عناصر النصوص وتوضع بينهما الكلام الذي تريد أن يكون تحته خط
ملاحظة:-يمكن تحديد جزء من كلام كما حدث فعلنا في المثال السابق
واكيد ممكن كل الكلام كما فعلنا في المثال السابق
------------------------------------------------------------------------------------------------
نأتي لتاسع تنسيق
<sub>
وهو جعل النص المكتوب داخلها نص منخفض عن النص الباقي
============================
شرح الكود
وهو جعل النص المكتوب داخلها نص منخفض عن النص الباقي
وله وسم نهاية <sub/>
مثال
انسخ الكود وضعه في نوباد وافحظ بامتداد.html:-
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h1>this <sub>is</sub> text</del>
<h1>2Na + Cl<sub>2</sub> ===> 2NaCl</h1>
<h1>2Na + Cl<sub>2</sub> ===> 2NaCl</h1>
</body>
</html>
============================
هتظهرلك كدا:-
<!DOCTYPE html>
تعريف ان هذا المستند مكتوب بـ HTML5
<head></head>
رأس الصفحة وتحتوي علي معلومات عن الصفحة غير مرئية ولكن هنا لا يوجد بها أي شئ في الكود السابق
<body></body>
جسم الصفحة وتحتوي علي عناصر المرئية
<p></p>
عنصر يحول الكلام اللي بنهم لنص عادي وصغير
<sub></sub>
فجعل الكلام اللي بينهما وسم البداية والنهاية منخفض عن الباقئ وتوضع بينهما الكلام الذي تريد أن يكون مرتفع من الباقي في عناصر النصوص
ملاحظة:ممكن هذا التنسيق يستخدم في المعادلات الكيميائية كما أنا فعلت
ملاحظة:ممكن هذا التنسيق يستخدم في المعادلات الكيميائية كما أنا فعلت
ملاحظة:-يمكن تحديد جزء من كلام كما حدث فعلنا في المثال السابق
واكيد ممكن كل الكلام
------------------------------------------------------------------------------------------------
نأتي لأخر تنسيق
<sup>
وهو جعل النص المكتوب داخلها نص مرتفع عن النص الباقي في عناصر النصوص
============================
شرح الكود
وهو جعل النص المكتوب داخلها نص مرتفع عن النص الباقي في عناصر النصوص
وله وسم نهاية <sup/>
مثال
انسخ الكود وضعه في نوباد وافحظ بامتداد.html:-
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h1>this <sup>is</sup> text</del>
<h1>3<sup>1</sup> = 3</h1>
<h1>3<sup>1</sup> = 3</h1>
</body>
</html>
============================
هتظهرلك كدا:-
<!DOCTYPE html>
تعريف ان هذا المستند مكتوب بـ HTML5
<head></head>
رأس الصفحة وتحتوي علي معلومات عن الصفحة غير مرئية ولكن هنا لا يوجد بها أي شئ في الكود السابق
<body></body>
جسم الصفحة وتحتوي علي عناصر المرئية
<p></p>
عنصر يحول الكلام اللي بنهم لنص عادي وصغير
<sub></sub>
جعل الكلام اللي بينهما وسم البداية والنهاية منخفض عن الباقئ وتوضع بينهما الكلام الذي تريد أن يكون منخفض من الباقي في عناصر النصوص
ملاحظة:ممكن هذا التنسيق يستخدم في المعادلات الرياضية كما أنا فعلت
ملاحظة:ممكن هذا التنسيق يستخدم في المعادلات الرياضية كما أنا فعلت
ملاحظة:-يمكن تحديد جزء من كلام كما حدث فعلنا في المثال السابق
واكيد ممكن كل الكلام
---------------------------------------------------------------------------------------
الملخص:-
الملخص:-
<tagname><formatting>here</fortmatting></tagname>
tagname
النصوص
formatting
تنسيق النصوص
كتابة الكلمات المراد تنسيقها محل here
والتي لا تريد تنسيقها قبل
<formatting>
أو بعد
</formatting>
تنسيق النصوص
|
أهمتيه
|
b
|
مجرد خط عريض دون أدني اهمية
لمحركات البحث
|
strong
|
خط عريض ولكن له اهمية عند محركات
البحث
|
i
|
خط مائل دون أدني اهمية لمحركات
البحث
|
em
|
خط مائل ولكن له أهمية عند محركات
البحث
|
sub
|
جعل الكلام منخفض عن الباقي
|
sup
|
جعل الكلام مرتفع عن الباقي
|
mark
|
تلوين النصوص باللون الأصفر(كعلامة)
|
small
|
جعل النص أصغر مما مفترض عليه (اصغر
من حجم عناصر النصوص)
|
عمل خط في وسط النص ومعناها ان
النص ده محذوف أو خاطئ
|
|
ins
|
عمل خط تحت النص ومعناها ان النص
ده مضاف
|
وسم النهاية نصوص
|
كلام قبل التنسيق(ممكن تركها فارغة)غير منسق
|
وسم النهاية للتنسيق
|
كلام المنسق
|
التنسيق
|
كلام قبل التنسيق(ممكن تركها فارغة)غير منسق
|
وسم البداية نصوص
|
</h1
|
</b>
|
<b>
مثلاً
|
<h1>
مثلاً
|
فيكون الكود :-
<h1>Word1<b>Word2</b>Word3</h1>
Word1 ,Word3 غير منسقين(ممكن تتركهم فارغين)
Word2 منسقة
Word2 منسقة
انتهي درسنا
قائمة شرح html
ليست هناك تعليقات:
إرسال تعليق