الدرس العاشر : اقتباس 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>.}

أنتهى الدرس.

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

كيف يحاول Zoom حماية مؤتمرات الفيديو من التسريبات

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

تُعقد العديد من اجتماعات العمل الآن على Zoom ، وقد يكون لدى بعض الحاضرين بالفعل فكرة تسريب لقطات ، مثل المبلغين عن المخالفات. في الواقع ، يمكننا أن نشعر بالأمان سريعًا خلف شاشتنا ، حيث نلتقط الصور و / أو الأصوات دون علم الآخرين. ولكن ، كما يوضح Intercept ، هناك الكثير من المزالق.

وبالتالي ، يمكن أن تكشف تفاصيل معينة لواجهة المستخدم عن الأصل ، مثل ترتيب ظهور المشاركين. بشكل افتراضي ، يظهر الشخص الذي يقوم بالمشاهدة أولاً على برامجه. من الأفضل تفعيل الترتيب العشوائي لإرباك المشكلة.

ولكن بعيدًا عن هذه الأخطاء المبتدئة ، يجب أن تعلم أيضًا أن Zoom يسمح لك بإدراج "وشم" وعلامات مائية في الصورة والصوت.

في الحالة الأولى ، يتم تمييز كل محتوى مشترك بعنوان البريد الإلكتروني لكل مشارك كعلامة مائية. وهو بالتالي من المستحيل على المبلغين استغلاله.

الحالة الثانية أخطر لأنها غير محسوسة. يتم بعد ذلك دمج بيانات التعريف في الموجة الصوتية على شكل الموجات فوق الصوتية. ومع ذلك ، يتم تنبيه المشاركين من خلال رمز وجود هذه "العلامة المائية".

باختصار ، إذا كنت تريد الكشف عن فضيحة ، فاحذر.

المصدر: The Intercept

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

D-Link تكشف النقاب عن سلسلة واي فاي 6 الجديدة للمنزل

نطاق كامل ومتنوع لا يشمل حاليًا شبكة Wi-Fi 6E الحديثة جدًا.

CES في لاس فيجاس هي فرصة لـ D-Link لتقييم نطاقاتها اللاسلكية. لذلك ركزت الشركة المصنعة على المنتجات الجديدة المخصصة في المقام الأول للاستخدام المنزلي: المنتجات التي يسهل الوصول إليها و "محدودة" لشبكة Wi-Fi 6.

أول محول Wi-Fi 6 USB 3.0

منحت ، لم نتحقق من تأكيد D-Link ، ولكن على حد علمنا ، لا يوجد فعليًا محول Wi-Fi 6 آخر يناسب USB 3.0. هذا هو بيت القصيد من DWA-X1850 المقدم في لاس فيغاس بواسطة D-Link.

من الواضح أن الفكرة هي جعل التبديل إلى Wi-Fi 6 سهلاً قدر الإمكان باستخدام محول يمكن توصيله بمنفذ USB واحد. يجب أن نكون قادرين بعد ذلك على الاستفادة من السرعات العالية جدًا ، والتي تصل إلى 574 ميجابت في الثانية على نطاق 2.4 جيجاهرتز و 1.2 جيجابت في الثانية على النطاق 5 جيجاهرتز.

تشير D-Link إلى أن محرك أقراص USB الخاص به يتضمن ميزات مثل تشفير WPA3. من ناحية أخرى ، لم تعلن الشركة المصنعة عن أي تاريخ إطلاق ، ولا سعر.

AI M32: تغطية تصل إلى 275 مترًا مربعًا

إلى جانب هذا الإعلان الأول ، كشفت D-Link النقاب عن AI M32 ، وهو موجه Wi-Fi 6 شبكي أو "شبكة" لاستخدام المصطلحات الإنجليزية. إنه في النهاية جهاز توجيه كلاسيكي ، ولكن بسرعات مثيرة للاهتمام. الفكرة هي الاستفادة من Wi-Fi 6 لتحسين تغطية الشبكة اللاسلكية المنزلية وتوافرها وأدائها.

لذلك يجب أن يكون D-Link AI M32 قادرًا على الجمع بين النطاقات المختلفة لتحقيق إنتاجية نظرية تبلغ 3.2 جيجابت في الثانية. تؤكد الشركة المصنعة أيضًا على نطاق منتجاتها: حتى 275 مترًا مربعًا من القاعدة. لا يزال دعم WPA3 ساريًا وتؤكد D-Link على ميزات مثل QoS و Quick VPN

أخيرًا ، لاحظ أنه ، كما هو الحال دائمًا ، تظل الخيارات السلكية في حالة وجود جزء WAN ومنفذي LAN. للأسف ، الثلاثة يقتصرون على جيجابت. لم تبلغ D-Link حتى الآن عن أي سعر أو تاريخ إصدار.

المصدر: TechPowerUp

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

شرح بالصور طريقة تحميل فيديو يوتيوب بدون برامج

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

ثم بعد ذلك نذهب الى الموقع التالي :

https://downloadmp4.cc/en/

ثم نلصق الرابط ونضغط على DOWNLOAD حيث يشير السهم :

اذكان الفيديو حلقة من سلسلة او مسلسل يعطينا الموقع خيارات تحميله نضغط على DOWNLOAD بجانب الفيديو المراد تحميله حيث يشير السهم في الصورة التالية :

تظهر لنا خيارات تحميل الفيديو بجودات مختلفة نضغط على افضلهم وهي في هذه الحالة HD :

اذا كانت سرعة الانترنت لديك بطيئة يمكن ان تختار تحميل جودة اقل

ثم بعد ذلك يتم تحميل الفيدو الى جهازك

انتهى .

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

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

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 لمحاذاة النص

انتهى الدرس .

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

حرب Google على القرصنة تؤتي ثمارها

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

كما يذكرنا موقع Torrent Freak ، فإن منصات التنزيل والبث غير القانوني كانت مقتصرة منذ 20 عامًا على تطبيقات مثل Napster أو Limewire ، قبل أن تنتشر بسرعة إلى مواقع الويب المخصصة. وبالتالي فإن غالبية عمليات البحث المتعلقة بهذه المواقع غير القانونية تمر عبر محرك بحث Google ، الرائد بلا منازع في القطاع. هذا هو السبب في أن مالكي المحتوى المشترك بشكل غير قانوني يطلبون بانتظام من الشركة الأمريكية عدم الرجوع إلى هذه المواقع.

لتلبية هذا الطلب ، تجري Google تغييرات على خوارزمياتها. في عام 2020 ، كانت الضربة التي تعرضت لها مواقع القرصنة قوية بشكل خاص ، وذلك بفضل تغييرين في الخوارزميات ، حدثا في 13 يناير ، ثم في 4 مايو. أدى التحديث الأول إلى تغيير طريقة الإحالة إلى جميع المواقع بشكل عميق ، مما تسبب في فقدان سرعة الأنظمة الأساسية غير القانونية ، كما يوضح موقع PhonAndroid. لكن التحديث الربيعي الثاني هو الذي ألحق أضرارًا جسيمة بهذه المواقع.

20٪ انخفاض في حركة المرور لشهر مايو 2020 وحده

في الواقع ، في شهر مايو 2020 وحده ، أظهرت شركة أبحاث ومراقبة مكافحة القرصنة MUSO أن حركة مرور محركات البحث إلى مواقع القرصنة انخفضت بنسبة 20٪. دفعت الشركة للمقارنة بين شهري ديسمبر 2019 و 2020 ، والنتيجة واضحة: مواقع المشاركة غير القانونية التي حددها MUSO شوهدت من قبل 350 مليون شخص قبل عام ، مقابل أقل من 250 مليون الشهر الماضي ، على الرغم من وباء Covid-19 ، الذي ربما شجع العديد من مستخدمي الإنترنت على زيادة استهلاكهم لمحتوى الوسائط المتعددة.

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

يعيش Adobe Flash آخر يوم في عمره

2020 سيأخذ معه برنامجًا عمره عشرين عامًا. سيكون الحادي والثلاثين من كانون الأول (ديسمبر) هذا هو آخر يوم له في الدعم الفني.

آخر خط مستقيم للبرنامج باللون الأبيض F على خلفية حمراء. اعتبارًا من 1 يناير ، ستتوقف Adobe عن توزيع برنامج Flash Player وتحديثه. بعد أسبوعين ، اعتبارًا من 12 يناير ، ستذهب الشركة الأمريكية إلى أبعد من ذلك: سيتم حظر كل المحتوى الذي يستخدم هذه التكنولوجيا.

الإعلان لم يكن مفاجأة. أعلنت Adobe عن نهاية برنامج تشغيل الفيديو الشهير الخاص بها في عام 2017. في مقال نُشر على مدونتها ، أوضحت الشركة في ذلك الوقت أن الفلاش اصبح يستخدم بشكل أقل وأقل ، لأنه تم تجاوزه تدريجياً من قبل الآخرين. خاصة في تنسيقات القراءة ، مثل HTML5.

12 يناير ، آخر موعد نهائي

قبل ذلك بثلاث سنوات ، قام ثمانية من كل عشرة مستخدمين لمتصفح الويب Google Chrome بزيارة مواقع باستخدام Flash Player. كانوا واحدًا من كل ستة في عام 2017. لطالما كانت هذه الأداة هي الطريقة الأكثر فعالية لعرض الفيديو أو الرسوم المتحركة على المواقع. استخدمه YouTube حتى عندما تم إنشاؤه في عام 2005 لعرض مقاطع الفيديو لمستخدميه.

شائعًا جدًا ، شكل Adobe Flash أيضًا مجموعة من الثغرات الأمنية. في الواقع تم احتساب أكثر من 1100 في هذا البرنامج وحده منذ عام 2002. كل هذا ، دون مراعاة عمليات الاحتيال عبر الإنترنت باستخدام برنامج Flash Player الإضافي المزيف ، لإعادة توجيه مستخدمي الإنترنت بشكل أفضل إلى روابط زائفة.

بالنسبة إلى أحدث مستخدمي هذا البرنامج المتقادم ، هناك توصية واحدة تتمثل في إلغاء تثبيته. في الآونة الأخيرة ، كررت Adobe من تلقاء نفسها هذه الحاجة ، وعرضت بانتظام نافذة منبثقة لهذا الغرض. سيختفي Adobe Flash Player من تلقاء نفسه في 12 يناير.

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

الدرس السابع : فقرات 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>

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

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

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

نهاية الدرس .

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

اصبح بإمكانك حذف حسابك غير النشط على نتفليكس

هل أنت أحد عملاء Netflix ، لكن ليس لديك الشجاعة لقضاء 4 سنوات في البحث في الكتالوج بالكامل وتفضل إلغاء اشتراكك؟ لقد فكرت المنصة فيك وتوفر خيارًا عمليًا للغاية للعملاء المحبطين.

اشتراكات غير ضرورية

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

سواء كان الأمر يتعلق بالاشتراك في صالة الألعاب الرياضية أو التأمين على الهاتف أو في منصة البث المباشر ، يمكن أن تتحول سعادة البدايات بسرعة إلى متاعب. تعرف منصة البث الأمريكية Netflix ذلك ، وقد قررت كسر هذه السلسلة الوحشية ، من خلال تسهيل إلغاء اشتراك عملائها الأقل نشاطًا.

تسهل Netflix إلغاء الاشتراك

إذا كنت قد اشتركت في Netflix واصبحت ترغب في انهاء الإشتراك مفضلاً البث على الإنترنت ، كن مطمئنًا ، لن تضطر إلى التغلب على اثني عشر عملاً من Hercules لإنهاء هذا الاشتراك بنجاح. في الواقع ، اتخذت Netflix خطوات يجب أن توفر أكثر من خطوة.

وبناءً على ذلك ، سترسل Netflix إشعارًا يعرض إلغاء الاشتراك إلى جميع العملاء الذين لم يشاهدوا Netflix لمدة عام. علق إيدي وو ، مدير الابتكار في Netflix ، على الموضوع:

"أنت تعرف هذا الشعور عندما تدرك أنك اشتركت في شيء لم تستخدمه منذ زمن طويل؟ في Netflix ، آخر شيء نريده هو أن يدفع الأشخاص مقابل شيء لا يفعلونه. " نأمل أن هذا النهج الجديد سيوفر للناس بعض الأموال التي حصلوا عليها بشق الأنفس".

يرجى ملاحظة أن هذه الخدمة لن تعمل بالضرورة إذا كنت تستخدم Netflix على SFR أو جهاز استقبال إنترنت آخر. في غضون ذلك ، تحقق من الأفلام والمسلسلات التي ستعرض على Netflix في يناير 2021.

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

يمكنك العثور على معلومات الصورة باستخدام Google

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

تسمح لك Google بالعثور على المعلومات من الصورة

يعد البحث عن الصور بالنص أمرًا جيدًا ، ولكن هل تعلم أنه باستخدام محرك بحث Google ، يمكنك أيضًا البحث عن معلومات من صورة. بشكل سهل جدا :

اذهب الى رابط صور جوجل

انقر على أيقونة الكاميرا في مربع البحث حيث يشير السهم :

بعد ذلك ، لديك خياران: البحث عن صورة عبر عنوان URL الخاص بها ، أو البحث عن صورة موجودة محليًا على جهازك (لاحظ أنه بالنسبة لهذا الخيارالأخير ، يمكنك أيضًا سحب وإفلات الصورة التي تريد معلومات عنها من جهاز الكمبيوتر الخاص بك الى الصفحة الرئيسية لصور Google) ؛

إذا لم تكن صورتك غامضة للغاية ، فستمنحك Google بعد ذلك معلومات مختلفة (صور ، مصادر ، اسم ، إلخ.)

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

الدرس السادس : عناوين 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

نهاية الدرس .

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

شركة اتصالات في المانيا تقطع الأنترنت عن شاب لأنه يشاهد الكثير من الأفلام

في ألمانيا ، تمت معاقبة طالب من قبل شركة اتصالات بسبب استهلاكه الذي يعتبر مبالغ فيه.

مع ظهور خطط الانترنت غير المحدودة أو غير المحدودة تقريبًا في فرنسا ، لم نعد بالضرورة نفكر في الوقت المناسب لمشاهدة فيلم أو الاستماع إلى الموسيقى أو مشاهدة مسلسل. لكن هذا الحادث الذي وقع في ألمانيا وأخبرنا به موقع 20minuti قد يجعلك تفكر جيدًا.

حُرم طالب سويسري يبلغ من العمر 25 عامًا من الوصول إلى الإنترنت بسبب استهلاكه الذي اعتبره مشغل الشبكة مفرطًا. في غضون 18 يومًا ، استهلك بالفعل ما لا يقل عن 211 غيغابايت من البيانات.

على الورق ، عرضت عليه الشركة المسماة Salt Mobile ، خطة غير محدودة. لكن استهلاكها يمثل ما يعادل ، في الشهر ، 2400 ساعة من الموسيقى أو 100 ساعة من الفيديو. في مواجهة مثل هذه الأرقام ، قررت شركة Salt Mobile قطع الاتصال.

في الواقع ، بعيدًا عن الاستهلاك البحت ، اتصل الطالب السويسري من خلال التجوال ، عبر شبكة هاتف محمول أخرى ، في ألمانيا. "عقودنا واضحة في هذا الصدد. يجب على العملاء غير المحدودين احترام الاستخدام العادي للخدمة ، ولا سيما أثناء التجوال. وإذا لم نتصرف ، فسيتعين علينا زيادة الأسعار لجميع العملاء ، وهو ما نريد بالطبع تجنبه" أوضحت فيولا ليبل المتحدثة باسم الشركة. \وبحسب صحيفة ويست فرانس ، قال الطالب إنه "ذهل" من القرار. ويوضح أنه يستخدم اتصاله بالإنترنت للتواصل مع أقاربه والعمل ومشاهدة الأفلام.

هل يمكن أن تحدث مثل هذه المغامرة في فرنسا؟ كما يشير موقع Ariase ، في فرنسا أيضًا ، غالبًا ما يتم التعامل مع مفهوم الحزم غير المحدودة بشيء من الحذر. بعد حد معين ، يميل العديد من المشغلين إلى تقييد سرعة اتصالك. تشير شركة Orange إلى أنها ليست على علم بحالة مماثلة في فرنسا. "معنا ، إذا كان غير محدود ، فهو حقًا غير محدود طالما أنه يظل للاستخدام الخاص وغير المهني. الاستهلاك المحلي غير محدود. من ناحية أخرى ، بحدود 100 جيجا- بايت ".

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

الدرس الخامس : سمات 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

كيف يحاول Zoom حماية مؤتمرات الفيديو من التسريبات

D-Link تكشف النقاب عن سلسلة واي فاي 6 الجديدة للمنزل

شرح بالصور طريقة تحميل فيديو يوتيوب بدون برامج

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

هذا عنوان

هذا عنوان

هذا عنوان

هذا عنوان

هذا عنوان

حرب Google على القرصنة تؤتي ثمارها

يعيش Adobe Flash آخر يوم في عمره

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

هذا عنوان أول

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

اصبح بإمكانك حذف حسابك غير النشط على نتفليكس

يمكنك العثور على معلومات الصورة باستخدام Google

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

عنوان 1

عنوان 2

عنوان 3

عنوان 4

عنوان 5

عنوان 6

عنوان 1

شركة اتصالات في المانيا تقطع الأنترنت عن شاب لأنه يشاهد الكثير من الأفلام

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

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

هذا عنوان 1

هذا عنوان 2

هذا عنوان 3

Translate

تابعنا على

إغلان

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

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