الدرس العاشر : اقتباس HTML وعناصر الاقتباس

HTML Quotation and Citation Elements

في هذا الدرس سنتطرق إلى عناصر اتش تي ام ال : <blockquote> و <q> و <abbr> و <address> و <cite> و <bdo>.

العنصر <blockquote> للاقتباسات

يحدد العنصر <blockquote> قسمًا مقتبسًا من مصدر آخر.

عادة ما تقوم المتصفحات بوضع مسافة بادئة لعناصر <blockquote>.

مثال :

------------------------

<p> هنا اقتباس من موقع ص ع ط: </p>

لمدة 50 عامًا ، ظل الصندوق العالمي للطبيعة يحمي مستقبل الطبيعة.

منظمة الحفاظ على الطبيعة الرائدة في العالم ،

تعمل WWF في 100 دولة ويدعمها

1.2 مليون عضو في الولايات المتحدة و

ما يقرب من 5 ملايين على مستوى العالم.

</blockquote>

---------------------------------------------

يظهر هذا المثال في المتصفح بالشطل

هنا اقتباس من موقع ص ع ط:

لمدة 50 عامًا ، ظل الصندوق العالمي للطبيعة يحمي مستقبل الطبيعة. منظمة الحفاظ على الطبيعة الرائدة في العالم ، تعمل WWF في 100 دولة ويدعمها 1.2 مليون عضو في الولايات المتحدة و ما يقرب من 5 ملايين على مستوى العالم.

<q> للإقتباسات القصيرة

تحدد علامة <q> اقتباسًا قصيرًا.

تقوم المستعرضات عادةً بإدراج علامات الاقتباس حول الاقتباس.

مثال :

-------------------

<p> هدف الصندوق العالمي للطبيعة هو: <q> بناء مستقبل يعيش فيه الناس في وئام مع الطبيعة. </ q> </p>

-----------------------------------

يظهر هذا المثال في المتصفح بالشكل :

هدف الصندوق العالمي للطبيعة هو: بناء مستقبل يعيش فيه الناس في وئام مع الطبيعة.

<abbr> للاختصارات

تحدد علامة <abbr> اختصارًا ، مثل "HTML" و "CSS" و "Mr." و "Dr." و "ASAP" و "ATM".

يمكن أن توفر علامات الاختصارات معلومات مفيدة للمتصفحات وأنظمة الترجمة ومحركات البحث.

نصيحة: استخدم سمة العنوان العام لإظهار وصف الاختصار عند تحريك الماوس فوق العنصر.

مثال :

----------------------

<! DOCTYPE html>

<html>

<الجسم>

<p> تأسست <abbr title = "منظمة الصحة العالمية"> WHO </abbr> في عام 1948. </p>

<p> يمكن أن يوفر ترميز الاختصارات معلومات مفيدة للمتصفحات وأنظمة الترجمة ومحركات البحث. </ p>

</body>

</html>

-------------------------------------

يظهر المثال في المتصفح بالشكل :

تأسست WHO في عام 1948.

يمكن أن يوفر ترميز الاختصارات معلومات مفيدة للمتصفحات وأنظمة الترجمة ومحركات البحث.

<address> لعرض معلومات الاتصال

تحدد العلامة <address> معلومات الاتصال لمؤلف / مالك مستند أو مقالة.

يمكن أن تكون معلومات الاتصال عبارة عن عنوان بريد إلكتروني ، وعنوان URL ، وعنوان مكان، ورقم هاتف ، وما إلى ذلك.

عادةً ما يتم عرض النص الموجود في عنصر <address> بخط مائل ، وستضيف المتصفحات دائمًا فاصل أسطر قبل وبعد عنصر <address>.

مثال :

------------------------

<!DOCTYPE html>

<html>

<body>

<p> يحدد عنصر عنوان HTML معلومات الاتصال (المؤلف / المالك) لمستند أو مقالة. </ p>

</address>

بقلم فهد الدخيل. <br>

قم بزيارتنا على: <br>

example.com <br>

423 ، جدة <br>

المملكة العربية السعودية

</address>

</body>

</html>

----------------------------------------

يظهر هذا المثال في المتصفح بالشكل :

يحدد عنصر عنوان HTML معلومات الاتصال (المؤلف / المالك) لمستند أو مقالة.
بقلم فهد الدخيل.
قم بزيارتنا على:
example.com
423 ، جدة
المملكة العربية السعودية

<cite> لعنوان العمل :

تحدد العلامة <cite> عنوان العمل الإبداعي (على سبيل المثال ، كتاب ، قصيدة ، أغنية ، فيلم ، لوحة ، تمثال ، إلخ).

ملاحظة: اسم الشخص ليس عنوان عمل.

عادةً ما يتم عرض النص الموجود في العنصر <cite> بخط مائل.

مثال :

--------------------

<!DOCTYPE html>

<html>

<body>

<p> يحدد عنصر الاقتباس في HTML عنوان العمل. </ p>

<p> تعرض المتصفحات عادةً العناصر المقتطفة بخط مائل </ p>

<p> <cite> The Scream </cite> بواسطة Edvard Munch. رسمت عام 1893. </p>

</body>

</html>

------------------------------------------------

يظهر المثال في المتصفح بالشكل :

يحدد عنصر الاقتباس في HTML عنوان العمل.

تعرض المتصفحات عادةً العناصر المقتطفة بخط مائل </ p> الصرخة

The Scream بواسطة Edvard Munch. رسمت عام 1893.

<bdo> لتجاوز ثنائي الاتجاه

BDO أختصار ل Bi-Directional Override.

تُستخدم علامة <bdo> لتجاوز اتجاه النص الحالي:

مثال :

--------------------

<!DOCTYPE html>

<html>

<body>

<p> إذا كان متصفحك يدعم التجاوز ثنائي الاتجاه (bdo) ، فسيتم كتابة السطر التالي من اليسارإلى اليمين (ltr): </p>

<bdo dir = "ltr"> سيُكتب هذا السطر من اليسار إلى اليمين </ bdo>

</body>

</html>

----------------------------------------------

يظهر المثال في المتصفح بالشكل :

إذا كان متصفحك يدعم التجاوز ثنائي الاتجاه (bdo) ، فسيتم كتابة السطر التالي من اليسار إلى اليمين (ltr):

سيُكتب هذا السطر من اليسار إلى اليمين

نهاية درس اليوم .

إقرأ المزيد.. ليست هناك تعليقات:

الدرس التاسع : تنسيق نص HTML

HTML Text Formatting

يحتوي HTML على عدة عناصر لتعريف النص بمعنى خاص.

تم تصميم عناصر التنسيق لعرض أنواع خاصة من النص:

<b> - نص عريض
<strong> -نص مهم
<i> - نص مائل
<em> - كتابة بارزة
<mark> - نص مميز
<small> - نص أصغر
<del> - نص محذوف
<ins> - نص مدرج
<sub> - نص منخفض
<sup> - نص مرتفع

عناصر اتش تي ام ال <b> و <strong>

مثال :

-----------------------

---------------------------------------

يظهر هذا المثال في المتصفح بالشكل :

هذا النص عريض

يحدد عنصر اتش تي ام ال <strong> نصًا ذا أهمية كبيرة. عادة ما يتم عرض المحتوى الداخلي بخط عريض.

مثال :

-----------------

---------------------------------------------

يظهر المثال في المتصفح بالشكل :

هذا النص مهم !

عناصر اتش تي ام ال <i> و <em>

بإستخدام العنصر <i> يتم عرض المحتوى الدخلي بخط مائل

نصيحة: غالبًا ما تُستخدم العلامة <i> للإشارة إلى مصطلح تقني ، أو عبارة من لغة أخرى ، أو فكرة ، أو اسم ، إلخ.

مثال :

--------------------

----------------------------------------

يظهر المثال في المتصفح بالشكل :

هذا النص مائل

يحدد العنصر <em> النص المميز. عادةً ما يتم عرض المحتوى الداخلي بخط مائل.

مثال :

---------------------

<em> تم التأكيد على هذا النص </ em>

--------------------------------------------

يظهر هذا المثال في المتصفح بالشكل :

تم التأكيد على هذا النص </ em>

العنصر <small>

يحدد العنصر <small> نصًا أصغر:

مثال :

هذا نص أصغر. </ small>

العنصر <mark>

يحدد عنصر <mark> النص الذي يجب تمييزه أوالمراد تمييزه:

مثال:

--------------------

<p> لا تنس شراء <mark>حليب </mark> اليوم </ p>

-----------------------------------

يظهر المثال في المتصفح بالشكل التالي :

لاتنسى شراء حليب اليوم.

العنصر <del>

يحدد عنصر <del> النص الذي تم حذفه من المستند. عادة ما تضع المتصفحات خطًا بين النص المحذوف :

مثال :

--------------------

<p> لوني المفضل هو <del> الأحمر</ del> الأزرق</ p>

--------------------------------------

يظهر المثال في المتصفح بالشكل :

لوني المفضل هو ~~الأحمر~~ الأخضر

العنصر <ins>

يحدد العنصر <ins> النص الذي تم إدراجه في المستند. عادة ما تقوم المستعرضات بتسطير النص المدرج:

مثال :

--------------------

<P>لوني المفضل هو <del>الأحمر <ins> الأخضر</ins></del></p>

-----------------------------------

يظهر المثال في المتصفح بالشكل :

لوني المفضل هو ~~الأحمر~~ الأخضر

العنصر <sub>

يحدد العنصر <sub> النص المنخفض. يظهر النص المنخفض بنصف حرف أسفل السطر العادي ، ويتم تقديمه أحيانًا بخط أصغر. يمكن استخدام النص المنخفض للصيغ الكيميائية ، مثل H₂O:

مثال :

---------------------

<p>هذا نص <sub>منخفض</sub></p>

---------------------------------------

يظهر المثال السابق في المتصفح بالشكل :

هذا نص _منخفض

العنصر <sup>

يحدد العنصر <sup> النص المرتفع. يظهر النص المرتفع بنصف حرف فوق السطر العادي ، ويتم تقديمه أحيانًا بخط أصغر. يمكن استخدام النص المرتفع للحواشي السفلية ، مثل WWW1:

مثال :

---------------------

<p> هذا نص <sup> مرتفع </ sup>. </p>

-------------------------------------------

يظهر هذا المثال في المتصفح بالشكل :

هذا نص ^{مرتفع </ sup>.}

أنتهى الدرس.

إقرأ المزيد.. ليست هناك تعليقات:

الدرس الثامن : أنماط اتش تي ام ال

HTML Styles

تُستخدم سمة نمط HTML لإضافة أنماط إلى عنصر ، مثل اللون والخط والحجم والمزيد.

سمة نمط HTML

يمكن تحديد نمط (style)عنصر HTML باستخدام سمة النمط.

تحتوي سمة نمط HTML على بناء الجملة التالي:

حيث property هي خاصية سي اس اس و value قيمة سي اس اس

سوف تتعلم المزيد عن CSS لاحقًا في دروس سي اس اس ان شاء الله.

لون الخلفية : Background Color

تحدد خاصية لون الخلفية Background Color في CSS لون الخلفية لعنصر HTML.

مثال

-------------------

<h1>هذا عنزان</h1>

</body>

------------------------------------------------

في المثال السابق يتم وضع خلفية للمستند باللون الازرق الفاتح يظهر المثال في المتصفح بالشكل :

هذا عنوان

هذه فقرة.

مثال آخر:

-------------------

<body>

<h1 style="background-color:powderblue;">هذا عنوان</h1>

</body>

---------------------------------------------

في هذا المثال لوننا كل من خلفية العنوان والفقرة بلونين مختلفين يظهر المثال في المتصفح بالشكل :

هذا عنوان

هذه فقرة.

لون الخط : Text Color

تحدد خاصية لون CSS لون النص لعنصر HTML:

مثال :

-------------------

<h1 style = "color: blue؛"> هذا عنوان </ h1>

----------------------------------

يظهر المثال السابق في المتصفح بالشكل :

هذا عنوان

هذه فقرة.

الخطوط : Fonts

تحدد خاصية عائلة الخطوط (font-family)في CSS الخط الذي سيتم استخدامه لعنصر HTML:

مثال :

-----------------------

<h1 style="font-family:verdana;">هذا عنوان</h1>

----------------------------------------

يظهر المثال بالشكل :

هذا عنوان

هذه فقرة.

حجم الخط : Text Size

تحدد خاصية حجم font-size الخط في CSS حجم النص لعنصر HTML:

مثال :

-----------------

<h1 style="font-size:300%;">هذا عنوان</h1>

-------------------------------------

يظهر المثال السابق في المتصفح بالشكل :

هذا عنوان

هذه فقرة.

محاذاة النص : Text Alignment

تحدد خاصية محاذاة النص text-align في CSS محاذاة النص الأفقية لعنصر HTML:

مثال :

-------------------

<h1 style="text-align:right;">عنوان في اليمين</h1>

<p style="text-align:right;">فقرة في اليمين.</p>

-------------------------------------

يظهر هذا المثال بالشكل :

هذا عنوان

هذه فقرة.

ملخص الدرس :

استخدم سمة النمط style لتصميم عناصر HTML
استخدم لون الخلفية background-color لتلوين الخلفية
استخدم اللونcolor لتلوين النص
استخدم مجموعة الخطوط font-family لخطوط النص
استخدم حجم الخط font-size لتغيير حجم النص
استخدم محاذاة النص text-align لمحاذاة النص

انتهى الدرس .

إقرأ المزيد.. ليست هناك تعليقات:

الدرس السابع : فقرات HTML

HTML Paragraphs

تبدأ الفقرة دائمًا بسطر جديد ، وعادةً ما تكون كتلة نصية.

يحدد العنصر <p> فقرة في HTML.

تبدأ الفقرة دائمًا بسطر جديد ، وتضيف المستعرضات تلقائيًا بعض المسافات البيضاء (هامش) قبل الفقرة وبعدها.

مثال

------------

-------------------------------------

يظهر المثال السابق في المتصفح بالشكل :

هذه فقرة.

هذه فقرة اخرى.

عرض HTML

لا يمكنك التأكد من كيفية عرض HTML.

ستؤدي الشاشات الكبيرة أو الصغيرة والنوافذ التي تم تغيير حجمها إلى نتائج مختلفة.

باستخدام HTML ، لا يمكنك تغيير العرض عن طريق إضافة مسافات إضافية أو سطور إضافية في كود HTML الخاص بك.

سيقوم المتصفح تلقائيًا بإزالة أي مسافات وأسطر إضافية عند عرض الصفحة:

مثال :

---------------------

<p>هذه الفقرة

تحتوي على الكثير من الخطوط

في شفرة المصدر ،

لكن المتصفح

يتجاهلها.</p>

<p>هذه الفقرة

تحتوي على الكثير من الخطوط

في شفرة المصدر ،

لكن المتصفح

يتجاهلها.</p>

------------------------------------------------

يظهر المثال السابق في المتصفح بالشكل :

هذه الفقرة تحتوي على الكثير من الخطوط في شفرة المصدر ، لكن المتصفح يتجاهلها.

فواصل html الأفقية : HTML Horizontal Rules

تحدد العلامة <hr> فاصلًا موضوعيًا في صفحة HTML ، وغالبًا ما يتم عرضه بشكل أفقي.

يُستخدم عنصر <hr> لفصل المحتوى (أو تحديد تغيير) في صفحة HTML:

مثال:

-----------------

<h1>هذا عنوان أول</h1>

<hr>

<h2>هذا عنوان ثاني</h2>

<hr>

---------------------------------------------

يظهر المثال السابق في المتصفح بالشكل التالي :

هذا عنوان أول

هذا مجرد نص بسيط.

هذا عنوان ثاني

هذا مجرد نص بسيط.

فواصل أسطر اتش تي ام ال : HTML Line Breaks

يحدد عنصر <br> HTML فاصل الأسطر.

استخدم <br> إذا كنت تريد فاصل أسطر (سطر جديد) بدون بدء فقرة جديدة:

مثال :

--------------

<p> هذه <br> فقرة <br> بها فواصل أسطر. </ p>

-----------------------------

يظهر المثال السابق بالشكل :

هذه
فقرة
بها فواصل أسطر. </ p>

مشكلة كتابة القصيدة

مثال :

-------------

<p> إِنَّ العُيونَ الَّتي في طَرفِها حَوَرٌ

قَتَلنَنا ثُمَّ لَم يُحيِينَ قَتلانا

يَصرَعنَ ذا اللُبَّ حَتّى لا حِراكَ بِهِ

وَهُنَّ أَضعَفُ خَلقِ اللَهِ أَركانا </p>

---------------------------------------------

يطهر هذا المثال في المتصفح بالشكل :

إِنَّ العُيونَ الَّتي في طَرفِها حَوَرٌ قَتَلنَنا ثُمَّ لَم يُحيِينَ قَتلانا يَصرَعنَ ذا اللُبَّ حَتّى لا حِراكَ بِهِ وَهُنَّ أَضعَفُ خَلقِ اللَهِ أَركانا

حل المشكلة:

توفر HTML العنصر <pre> لكتابة القصيدة

مثال :

---------------

<pre> إِنَّ العُيونَ الَّتي في طَرفِها حَوَرٌ

قَتَلنَنا ثُمَّ لَم يُحيِينَ قَتلانا

يَصرَعنَ ذا اللُبَّ حَتّى لا حِراكَ بِهِ

وَهُنَّ أَضعَفُ خَلقِ اللَهِ أَركانا </pre>

---------------------------------------------

وهذا المثال يظهر في المتصفح بالشكل :

 إِنَّ العُيونَ الَّتي في طَرفِها حَوَرٌ
قَتَلنَنا ثُمَّ لَم يُحيِينَ قَتلانا
يَصرَعنَ ذا اللُبَّ حَتّى لا حِراكَ بِهِ
وَهُنَّ أَضعَفُ خَلقِ اللَهِ أَركانا

نهاية الدرس .

إقرأ المزيد.. ليست هناك تعليقات:

الدرس السادس : عناوين HTML

HTML Headings

عناوين HTML هي عناوين أو عناوين فرعية تريد عرضها على صفحة ويب.

يتم تعريف عناوين HTML بعلامات <h1> إلى <h6>.

يحدد <h1> العنوان الأكثر أهمية. يحدد <h6> العنوان الأقل أهمية.

مثال

--------------------------

<h1> عنوان 1 </h1>

<h2> عنوان 2 </h2>

<h3> عنوان 3 </h3>

<h4> عنوان 4 </h4>

<h5> عنوان 5 </h5>

<h6> عنوان 1 </h6>

------------------------------------------

المثال السابق يظهر في المتصفح بالشكل :

عنوان 1

عنوان 2

عنوان 3

عنوان 4

عنوان 5

عنوان 6

ملاحظة: تضيف المستعرضات تلقائيًا بعض المسافات البيضاء (هامش) قبل العنوان وبعده.

اهمية العناوين

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

غالبًا ما يتصفح المستخدمون الصفحة حسب عناوينها. من المهم استخدام العناوين لإظهار بنية المستند.

يجب استخدام عناوين <h1> للعناوين الرئيسية ، متبوعة بالعناوين <h2> ، ثم الأقل أهمية <h3> ، وهكذا.

ملاحظة: استخدم عناوين HTML للعناوين فقط. لا تستخدم العناوين لجعل النص كبير أو عريض.

عناوين أكبر

كل عنوان HTML له حجم افتراضي. ومع ذلك ، يمكنك تحديد حجم أي عنوان باستخدام سمة النمط style ، باستخدام خاصية حجم الخط في السي اس اس font-size :

مثال :

-------------------

<h1 style="font-size:60px;">عنوان 1</h1>

--------------------------------------------

يظهر المثال السابق بالشكل :

عنوان 1

نهاية الدرس .

إقرأ المزيد.. ليست هناك تعليقات:

الدرس الخامس : سمات HTML

سمات HTML

HTML Attributes

توفر سمات HTML معلومات إضافية حول عناصر HTML.

يمكن أن تحتوي جميع عناصر HTML على سمات
توفر السمات معلومات إضافية حول العناصر
يتم تحديد السمات دائمًا في وسم البداية
تأتي السمات عادةً في أزواج الاسم / القيمة مثل: الاسم = "القيمة"

السمة href

The href Attribute

يحدد الوسم <a> الارتباط التشعبي. تحدد السمة href عنوان URL للصفحة التي ينتقل إليها الارتباط:

مثال

--------

<a href="https://hijaz-ar.blogspot.com">قم بزيارة مدونة الحجازالتقنية</a>

---------------------

يظهر الكود السابق بالشكل :

قم بزيارة مدونة الحجاز التقنية

سوف تتعلم المزيد عن الروابط في فصل روابط HTML ان شاء الله

السمة src

The src Attribute

يستخدم وسم <img> لتضمين صورة في صفحة HTML. تحدد السمة src مسار الصورة المراد عرضها:

تظهر الصورة بالشكل :

هناك طريقتان لتحديد عنوان URL في سمة src:

1. URL مطلق - روابط إلى صورة خارجية مستضافة على موقع ويب آخر. مثال: src = "https://www.w3schools.com/images/img_girl.jpg".

ملاحظات: قد تكون الصور الخارجية محمية بحقوق النشر. إذا لم تحصل على إذن لاستخدامها ، فقد تكون قد انتهكت قوانين حقوق النشر. بالإضافة إلى ذلك ، لا يمكنك التحكم في الصور الخارجية ؛ يمكن إزالتها أو تغييرها فجأة.

2. URL النسبي - روابط لصورة مستضافة داخل الموقع. هنا ، لا يتضمن عنوان URL اسم المجال. إذا بدأ عنوان URL بدون شرطة مائلة ، فسيكون متعلقًا بالصفحة الحالية. مثال: src = "img_girl.jpg". إذا بدأ عنوان URL بشرطة مائلة ، فسيكون مرتبطًا بالدومين (اسم لبنطاق). مثال: src = "/ images / img_girl.jpg".

نصيحة: من الأفضل دائمًا استخدام عناوين URL النسبية. لن تفقدها إذا قمت بتغيير المجال.

سمات العرض (width) والارتفاع (height )

The width and height Attributes

يجب أن يحتوي وسم <img> أيضًا على سمات العرض والارتفاع ، والتي تحدد عرض الصورة وارتفاعها (بالبكسل):

مثال

---------

------------------

تظهر الصورة بالشكل

--------------

--------------------------

انظر ماذا يحدث إذا حاولنا عرض صورة غير موجودة:

الكود

--------

---------------------------

يظهر كالتالي

سوف تتعلم المزيد عن الصور في درس صور HTML ان شاء الله .

سمة النمط او استايل style

The style Attribute

تُستخدم سمة النمط لإضافة أنماط إلى عنصر ، مثل اللون والخط والحجم ...الخ.

مثال :

-----------

<p style="color:red;">هذه فقرة باللون الأحمر</p>

--------------------------

يظهر الكود بالشكل :

هذه فقرة باللون الأحمر

سوف تتعلم المزيد عن الأنماط في درس أنماط HTML ان شاء الله .

سمة اللغة lang

The lang Attribute

يجب عليك دائمًا تضمين سمة lang داخل علامة <html> للإعلان عن لغة صفحة الويب. هذا يهدف إلى مساعدة محركات البحث والمتصفحات.

يحدد المثال التالي اللغة الإنجليزية كلغة:

-----------------

<!DOCTYPE html>
<html lang="en">
<body>
...
</body>
</html>

-------------------------------

يمكن أيضًا إضافة رموز البلدان إلى رمز اللغة في سمة lang. لذا ، فإن أول حرفين يحددان لغة صفحة HTML ، ويحدد الحرفان الأخيران البلد.

يحدد المثال التالي اللغة الإنجليزية كلغة والولايات المتحدة هي الدولة:

----------------

<!DOCTYPE html>
<html lang="en-US">
<body>
...
</body>
</html>

-----------------------------

السمة title (العنوان)

The title Attribute

تحدد سمة title بعض المعلومات الإضافية حول العنصر.

سيتم عرض قيمة سمة العنوان كأداة تلميح tooltip عند تحريك الماوس فوق العنصر:

الكود

-------------

--------------------------

هذه فقرة.

نقترح: كتابة السمات بأحرف انكليزية صغيرة دومًا (lowercase)

لا يتطلب معيار HTML كتابة السمات بأحرف صغيرة.

يمكن كتابة سمة العنوان title (وجميع السمات الأخرى) بأحرف كبيرة أو صغيرة مثل title أو TITLE.

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

هنا في مدونة الحجاز التقنية نكتب دوما اكواج HTML بأحرف انجليزية صغيرة

نقترح وضع قيم السمات بين اشارتي اقتباس ("") دوما

لا يتطلب معيار HTML علامات اقتباس حول قيم السمات.

ومع ذلك ، توصي W3C بعلامات اقتباس بتنسيق HTML ، ويجب استخدام الأقتباس في بعض أنواع المستندات ا مثل XHTML.

الكود التالي جيد :

------------------

<a href="https://hijaz-ar.blogspot.com/">تفضل بزيارة الحجاز التقنية </a>

------------------------------------

الكود التالي سيئ

--------------------

<a href=https://hijaz-ar.blogspot.com/>تفضل بزيارة مدونة الحجاز التقنية</a>

-----------------------------------------

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

---------------

-------------------------------

هنا في مدونة الحجاز التقنية ، نستخدم دائمًا علامات الاقتباس حول قيم السمات.

اقتباسات مفردة أو مزدوجة؟

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

في بعض الحالات ، عندما تحتوي قيمة السمة نفسها على علامات اقتباس مزدوجة ، من الضروري استخدام علامات الاقتباس المفردة:

--------------

--------------------------------

او العكس

-----------------

-----------------------------

ملخص الدرس :

يمكن أن تحتوي جميع عناصر HTML على سمات
تحدد سمة href لـ <a> عنوان URL للصفحة التي ينتقل إليها الارتباط
تحدد السمة src الخاصة بـ <img> المسار إلى الصورة المراد عرضها
توفر سمات العرض width والارتفاع height الخاصة بـ <img> معلومات عن حجم الصور
توفر سمة alt لـ <img> نصًا بديلاً للصورة
تُستخدم سمة النمط style لإضافة أنماط إلى عنصر ، مثل اللون والخط والحجم والمزيد
تحدد سمة lang لوسم <html> لغة صفحة الويب
تحدد سمة العنوان title بعض المعلومات الإضافية حول العنصر

انتهى الدرس.

إقرأ المزيد.. ليست هناك تعليقات:

الدرس الرابع : HTML الأساسي

HTML Basic

أمثلة HTML الأساسية

في هذا الفصل سوف نعرض بعض أمثلة HTML الأساسية.

لا تقلق إذا استخدمنا وسوم لم تتعلمها بعد.

مستندات HTML

يجب أن تبدأ جميع مستندات HTML بالتصريح عن نوع المستند: <! DOCTYPE html>.

يبدأ مستند HTML بـ <html> وينتهي بـ </html>.

يقع الجزء المرئي من مستند HTML بين <body> و </ body>.

مثال :

--------------------

<!DOCTYPE html>
<html>
<body>

<h1>عنوان رئيسي اول</h1>
<p>فقرة.</p>

</body>
</html>

---------------------------------

يظهر المثال السابق في المتصفح بالشكل :

التصريح <! DOCTYPE>

يمثل التصريح <! DOCTYPE> نوع المستند ، ويساعد المتصفحات على عرض صفحات الويب بشكل صحيح.

يجب أن يظهر مرة واحدة فقط ، في أعلى الصفحة (قبل أي علامات HTML).

التصريح <! DOCTYPE> غير حساس لحالة الأحرف.

التصريح <! DOCTYPE> ظهر في HTML

شكل كود التصريح : <!DOCTYPE html>

العناوين في HTML

HTML Headings

يتم تعريف عناوين HTML بعلامات <h1> إلى <h6>

يحدد <h1> العنوان الأكثر أهمية. يحدد <h6> العنوان الأقل أهمية:

مثال

------------

<h1>هذا عنوان 1</h1>

<h2>هذا عنوان 2</h2>

<h3>هذا عنوان 3</h3>

-------------------------------

يظهر المثال السابق في المتصفح بالشكل :

هذا عنوان 1

هذا عنوان 2

هذا عنوان 3

الففقرات في HTML

HTML Paragraphs

يتم تعريف فقرات HTML بالوسم <p>

مثال :

-------------

-------------------

يظهر المثال السابق في المتصفح بالشكل :

هذه فقرة.

هذه فقرة أخرى.

الروابط في HTML

HTML Links

يتم تعريف الروابط في HTML بعلامة <a> :

مثال

----------

------------------

يطهر المثال السابق في المتصفح بالشكل :

هذا رابط

يتم تحديد وجهة الارتباط في السمة href.

تُستخدم السمات لتوفير معلومات إضافية حول عناصر HTML.

سوف تتعلم المزيد عن السمات في فصل لاحق إن شاء الله.

الصور في HTML

HTML Images

يتم تعريف صور HTML بوسم <img>.

يتم توفير مصدر الملف (src) والنص البديل (alt) والعرض (width) والارتفاع (height) كسمات:

مثال :

--------

-------------------

يظهر المثال السابق بالشكل :

........

كيفية اطهار مصدر HTM لإي صفحة

هل سبق لك أن شاهدت صفحة ويب وتساءلت "عجبا! كيف فعلوا ذلك؟"

عرض كود مصدر HTML:

انقر بزر الماوس الأيمن في صفحة HTML وحدد "عرض مصدر الصفحة" (في Chrome) أو "عرض المصدر" (في Edge) ، أو ما شابه ذلك في المتصفحات الأخرى. سيؤدي هذا إلى فتح نافذة تحتوي على شفرة مصدر HTML للصفحة.

افحص عنصر HTML:

انقر بزر الماوس الأيمن على عنصر (أو منطقة فارغة) ، واختر "فحص" أو "فحص العنصر" لمعرفة العناصر المكونة (سترى كل من HTML و CSS). يمكنك أيضًا تحرير HTML أو CSS أثناء التنقل في لوحة العناصر أو الأنماط التي تفتح.

انتهى الدرس.

إقرأ المزيد.. ليست هناك تعليقات:

الدرس العاشر : اقتباس HTML وعناصر الاقتباس

الدرس التاسع : تنسيق نص HTML

الدرس الثامن : أنماط اتش تي ام ال

هذا عنوان

هذا عنوان

هذا عنوان

هذا عنوان

هذا عنوان

الدرس السابع : فقرات HTML

هذا عنوان أول

هذا عنوان ثاني

الدرس السادس : عناوين HTML

عنوان 1

عنوان 2

عنوان 3

عنوان 4

عنوان 5

عنوان 6

عنوان 1

الدرس الخامس : سمات HTML

الدرس الرابع : HTML الأساسي

هذا عنوان 1

هذا عنوان 2

هذا عنوان 3

Translate

تابعنا على

إغلان

المشاركات الشائعة

القائمة البريدية