Scribd Logo
Upload

Welcome to Scribd!

  • الإقتباسات في HTML

    Uploaded by

    Randa Ahmed
    5 views8 pages

    Copyright

    © © All Rights Reserved

    Available Formats

    PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    5 views8 pages

    الإقتباسات في HTML

    Uploaded by

    Randa Ahmed

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    of 8

    ‫مقاالت‬ ‫المكتبة ▾‬

    ‫»‬ ‫الدرس التالي‬ ‫الدرس السابق‬ ‫»‬

    ‫إعالن‬

    ‫دورة تطوير واجهات المستخدم‬

    ‫لمزيد من التفاصيل »‬

    ‫‪HTML‬‬
    ‫اإلقتباسات‬

    ‫› مفهوم اإلقتباس‬

    ‫› عرض النص المقتبس بداخل بلوك‬

    ‫" "‬ ‫› عرض النص المقتبس بين‬

    ‫› وضع إسم مختصر بدل اإلسم الكامل‬


    ‫مقاالت‬ ‫التواصل‬ ‫› عرض معلومات الوصول و‬
    ‫المكتبة ▾‬
    ‫› إبراز عنوان العمل‬

    ‫مفهوم اإلقتباس‬

    ‫النص المقتبس ( ‪ ) Quoted text‬يقصد به أن النص الموضوع في الصفحة تم نقله عن أحد ما و وضعه كما هو في الصفحة‪
    .‬‬

    ‫النص المقتبس في العادة يتم عرضه بشكل مختلف قليًال عن باقي النص الموجود في الصفحة بهدف إظهاره بشكل أفضل‪.‬‬

    ‫في ‪ HTML‬يوجد العديد من الوسوم الجاهزة التي يمكن استخدامها لعرض اإلقتباسات و هي ما سنتعرف عليها في هذا الدرس‪.‬‬

    ‫عرض النص المقتبس بداخل بلوك‬

    ‫إذا أردت العرض النص مقتبس على سطر منفرد مع عرض هامش حوله من كل الجهات‪ ,‬يمكنك وضع النص بداخل‬

    ‫>‪. <blockquote> </blockquote‬‬

    ‫معلومة تقنية‬

    ‫إذا كان اإلقتباس الموضوع في الصفحة مأخوذ من موقع آخر‪ ,‬قم بذكر رابط الموقع الذي نسخت اإلقتباس منه بداخل الخاصية‬

    ‫‪ cite‬التي يملكها الوسم >‪ <blockquote‬ألن هذا األمر سيجعل الموقع المقتبس منه ذو أهمية أكثر بالنسبة لمحركات‬

    ‫البحث و بالتالي تكون تفيد الموقع الذي نسخت اإلقتباس منه‪.‬‬

    ‫في المثال التالي قمنا بعرض إقتباس باستخدام >‪ <blockquote‬بدون ذكر الموقع الذي جلبنا اإلقتباس منه‪.‬‬

    ‫المثال األول‬

    ‫>‪<blockquote‬‬
    ‫‪In 1980, physicist Tim Berners-Lee, a contractor at CERN, proposed and prototyped‬‬
    ‫‪ENQUIRE, a system for CERN researchers to use and share documents. In 1989, Berners-Lee‬‬
    ‫‪wrote a memo proposing an Internet-based hypertext system.‬‬
    ‫>‪</blockquote‬‬
    ‫جرب الكود‬
    ‫مقاالت‬ ‫المكتبة ▾‬

    ‫في المثال التالي قمنا بعرض إقتباس باستخدام >‪ <blockquote‬مع ذكر الموقع الذي جلبنا اإلقتباس منه‪.‬‬

    ‫المثال الثاني‬

    ‫>"‪<blockquote cite="https://en.wikipedia.org/wiki/HTML‬‬
    ‫‪In 1980, physicist Tim Berners-Lee, a contractor at CERN, proposed and prototyped‬‬
    ‫‪ENQUIRE, a system for CERN researchers to use and share documents. In 1989, Berners-Lee‬‬
    ‫‪wrote a memo proposing an Internet-based hypertext system.‬‬
    ‫>‪</blockquote‬‬

    ‫جرب الكود‬

    ‫عرض النص المقتبس بين " "‬

    ‫إذا أردت عرض النص المقتبس بين " " يمكنك وضعه بداخل >‪. <q> </q‬‬

    ‫معلومة تقنية‬

    ‫سبب إستخدام الوسم >‪ <q> </q‬بدل كتابة " " بشكل مباشر هو أنه يمكن تخصيص طريقة عرض الوسم بواسطة كود‬

    ‫‪
    . CSS‬‬

    ‫عندها سيتم تطبيق التصميم الذي نريد على كل نص مقتبس موضوع بين >‪. <q> </q‬‬

    ‫في المثال التالي قمنا بعرض النص المقتبس باستخدام >‪ <q‬حتى يتم عرضه بين " " ‪.‬‬

    ‫المثال األول‬

    ‫>‪<p>My teacher said: <q>HTML is not a programming language</q></p‬‬


    ‫جرب الكود‬
    ‫مقاالت‬ ‫المكتبة ▾‬

    ‫في المثال التالي قمنا بتخصيص طريقة ظهور النص المقتبس باستخدام >‪ <q‬بواسطة كود ‪ CSS‬حتى يظهر دائمًا بلون أحمر‪
    .‬‬

    ‫مالحظة‪ :‬ال تشغل بالك بالكود المكتوب بلغة ‪ CSS‬ألنك ستفهمه بكل سهولة حين تتعلم ‪. CSS‬‬

    ‫المثال الثاني‬

    ‫>‪<!DOCTYPE html‬‬
    ‫>‪<html‬‬
    ‫>‪<head‬‬
    ‫>‪ --‬هذا كود ‪ CSS‬يقوم بجعل لون النص الموضوع بداخل أي وسم ‪ q‬أحمر ‪<!--‬‬
    ‫>‪<style‬‬
    ‫} ‪q { color: red‬‬
    ‫>‪</style‬‬
    ‫>‪</head‬‬
    ‫>‪<body‬‬
    ‫>‪ --‬أي كالم موضوع بداخل الوسم >‪ <q‬سيتم عرضه بين " " و باللون األحمر ‪<!--‬‬
    ‫>‪<p>My teacher said: <q>HTML is not a programming language</q‬‬
    ‫>‪and he also said that <q>It's very easy to learn</q></p‬‬
    ‫>‪</body‬‬
    ‫>‪</html‬‬

    ‫جرب الكود‬

    ‫وضع إسم مختصر بدل اإلسم الكامل‬

    ‫في البداية ما نقصده بإسم مختصر ( ‪ ) Abbreviation‬هو أنك على سبيل المثال تستطيع عرض كلمة واحدة مثل ‪ HTML‬و عند‬

    ‫تمرير الفأرة فوقها يقوم المتصفح بإظهار اإلسم الكامل ‪ Hyper Text Markup Language‬الذي هو اختصار لهذه الكلمة‪.‬‬

    ‫اآلن‪ ,‬إذا أردت وضع إسم مختصر فيمكنك وضعه بداخل >‪. <abbr> </abbr‬‬

    ‫في المثال التالي قمنا بعرض إسم مختصر مع إظهار الجملة التي هو اختصار لها باستخدام >""=‪. <abbr title‬‬
    ‫مقاالت‬ ‫المكتبة ▾‬ ‫مثال‬

    ‫>‪<p><abbr title="Hyper Text Markup Language">HTML</abbr> is used to create web pages.</p‬‬

    ‫جرب الكود‬

    ‫عرض معلومات الوصول و التواصل‬

    ‫إذا أردت عرض معلومات الوصول أو التواصل فيمكنك وضع النص بداخل >‪ <address> </address‬و عندها سيعرضها‬

    ‫المتصفح على سطر جديد و بشكل مائل‪.‬‬

    ‫معلومة‬

    ‫معلومات الوصول كأن يضع الشخص موقعه الجغرافي مثال‪" :‬مكتب سالم المصري‪ ,‬شارع اإلصالح‪ ,‬مبنى السالم‪ ,‬الطابق‬

    ‫الثاني"‪.‬‬

    ‫معلومات التواصل كأن يضع الشخص رقم هاتفه‪ ,‬بريده اإللكتروني‪ ,‬صندوق البريد إلخ‪ ..‬مثال‪" :‬هاتف‪   061584984 :‬إيميل‪:‬‬

    ‫‪."info@harmash.com‬‬

    ‫في المثال التالي قمنا بعرض معلومات الوصول لمكان صاحب الموقع باستخدام >‪. <address‬‬

    ‫مثال‬

    ‫>‪<address>9645 Al-islah street, Tripoli, 1300 - Lebanon</address‬‬

    ‫جرب الكود‬

    ‫إبراز عنوان العمل‬


    ‫في حال أردت إبراز عنوان الشيء المهم الذي يتم عرضه يمكنك وضعه بداخل >‪
    . <cite> </cite‬‬
    ‫مقاالت‬ ‫المكتبة ▾‬
    ‫عند وضع النص بداخل >‪ <cite> </cite‬فإن المتصفح في العادة يعرضه بشكل مائل‪.‬‬

    ‫في المثال التالي قمنا بإبراز عنوان الكتاب الذي تم ذكر الحديث منه باستخدام >‪. <cite‬‬

    ‫مثال‬

    ‫>‪<p><cite>Riyadh-as-Saliheen</cite> by Imam Al-Nawawi, volume 1, hadith number 134</p‬‬

    ‫جرب الكود‬

    ‫»‬ ‫الدرس التالي‬ ‫الدرس السابق‬ ‫»‬


    ‫مقاالت‬ ‫المكتبة ▾‬

    ‫
    ‬ ‫
    ‬ ‫
    ‬

    ‫هرمش هو موقع تعليمي مجاني يهتم بعلوم الكمبيوتر و يقدم إليك المعرفة بشكل مبّس ط و مفّص ل‪ ,‬و هو المكان‬

    ‫المناسب ألي شخص يطمح بأن يصبح مبرمجًا محترفًا و مبدعًا في العالم الرقمي‪.‬‬

    ‫●‪  ‬األسئلة الشائعة ‪  ●  ‬أعلن في الموقع ‪ ‬‬

    ‫تم تطوير الموقع و كتابة جميع الدروس من قبل المبرمج


    ‬

    ‫● ‪  ‬محمد هرموش ‪●  ‬‬

    ‫في حال كنت ترغب بتقديم دعم مادي للموقع‪ ,‬يمكنك التبرع عبر ‪ Paypal‬أو ‪ Patreon‬بالمبلغ الذي تريده‬

    ‫تبرع عبر ‪Patreon‬‬ ‫


    ‬ ‫تبرع عبر ‪Paypal‬‬

    ‫جميع الحقوق محفوظة للموقع ‪


    © ٢٠١٤ - ٢٠٢٠  ‬‬

    ‫محتوى الموقع يخضع لرخصة (‪ )CC BY-NC-ND 4.0‬التي ال تسمح باستخدام الشروحات ألغراض تجارية‪,‬‬

    ‫إجراء تعديل عليها و نشرها في موقع آخر‪ ,‬وضع الشروحات في تطبيق أو في كتاب إال في حال أخذ موافقة‬

    ‫صريحة من إدارة الموقع‪.‬‬


    ‫مقاالت‬ ▾ ‫المكتبة‬
    © 2020 Harmash. All Content is licensed under CC BY-NC-ND 4.0 unless mentioned otherwise.

    You might also like