نضيف الصور إلى صفحة الويب، وكذلك الفيديو والصوت! الصور بتنسيقات الصور الرسومية بتنسيق HTML

💖 هل يعجبك؟شارك الرابط مع أصدقائك
يقع جسم الطاولة. يتكون الجسم من صفوف وأعمدة. يتم ملء الجدول سطراً تلو الآخر.

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

كيفية عمل جدول بلغة html

إليك مثال، كود html:

جدول المثال
العمود 1 العمود 2

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

الآن دعونا نلقي نظرة فاحصة على جميع سمات العلامة

.

سمات العلامة والخصائص

لفتح العلامة

يمكنك تحديد سمات مختلفة.

1. الخاصية align="parameter" - تحدد محاذاة الجدول. يمكن أن تأخذ القيم التالية:

في المثال أعلاه، قمنا بمحاذاة الجدول إلى المنتصف align="center" .

يمكن تطبيق هذه السمة ليس فقط على الجدول، ولكن أيضًا على خلايا الجدول الفردية

. وبالتالي، فإن المحاذاة ستكون مختلفة في الخلايا المختلفة.

على سبيل المثال

, , , أو
  • cols - يتم عرض الخط بين الأعمدة
  • لا شيء - كل الحدود مخفية
  • الصفوف - يتم رسم حد بين صفوف الجدول التي تم إنشاؤها من خلال العلامة
  • 12. الخاصية width='number' - تحدد عرض الجدول: إما بالبكسل أو بالنسب المئوية.

    13. فئة الخاصية = "class_name" - يمكنك تحديد اسم الفئة التي ينتمي إليها الجدول.

    14. نمط الخاصية = "أنماط" - يمكن تعيين الأنماط بشكل فردي لكل جدول.

    حان الوقت الآن للغوص داخل الجدول وإلقاء نظرة على سمات خلايا الجدول. يجب كتابة هذه السمات في العلامة الافتتاحية

    و نفس الخيارات متاحة ل سيتم تطبيقها بشكل هرمي على الجميع
    أو خطوط
    ... ... ...

    2. خاصية الخلفية = "URL" - لتعيين صورة الخلفية. بدلاً من عنوان URL، يجب كتابة عنوان صورة الخلفية.

    مثال

    جدول المثال
    العمود 1 العمود 2

    يتحول إلى ما يلي على الصفحة:

    في المثال المذكور، لدينا الصورة الخلفيةيقع في مجلد img (الموجود في نفس الدليل مثل صفحة html)، وتسمى الصورة fon.gif . يرجى ملاحظة أننا أضفنا في العلامة style="color:white;" . نظرًا لأن الخلفية تكون سوداء تقريبًا، لمنع مزج النص في الخلفية، فقد جعلنا النص باللون الأبيض.

    3. الخاصية bgcolor = "color" - تحدد لون خلفية الجدول. يمكنك اختيار أي لون من اللوحة بأكملها (راجع رموز وأسماء ألوان html)

    4. حدود الخاصية = "الرقم" - تحدد سمك حدود الجدول. في الأمثلة السابقة، حددنا border="1" مما يعني أن سمك الحدود هو 1 بكسل.

    5. خاصية bordercolor = "color" - تحدد لون الحدود. إذا الحدود = "0" فلن يكون هناك حدود ولن يكون للون الحدود أي معنى.

    6. خاصية cellpadding='number' - مسافة بادئة من الإطار إلى محتويات الخلية بالبكسل.

    7. خاصية تباعد الخلايا = "الرقم" - المسافة بين الخلايا بالبكسل.

    8. الخاصية cols='number' - عدد الأعمدة. إذا لم تقم بتعيينه، فسيقوم المتصفح نفسه بتحديد عدد الأعمدة. والفرق الوحيد هو أن تحديد هذه المعلمة سيؤدي على الأرجح إلى تسريع عملية تحميل الجدول.

    9. إطار الخاصية = "المعلمة" - كيفية عرض الحدود حول الجدول. يمكن أن تأخذ القيم التالية:

    • باطلة - لا ترسم الحدود
    • الحدود - الحدود حول الطاولة
    • أعلاه - حد على طول الحافة العلوية للجدول
    • أدناه - الحدود في أسفل الجدول
    • hsides - إضافة حدود أفقية فقط (أعلى وأسفل الجدول)
    • vsides - رسم الحدود الرأسية فقط (على يسار ويمين الجدول)
    • RHS - الحدود فقط الجانب الأيمنالجداول
    • lhs - الحد الموجود على الجانب الأيسر من الجدول فقط

    10. الخاصية height='number' - تحدد ارتفاع الجدول: إما بالبكسل أو بالنسب المئوية.

    11. قواعد الخاصية = "المعلمة" - مكان عرض الحدود بين الخلايا. يمكن أن تأخذ القيم التالية:

    • الكل - يتم رسم خط حول كل خلية في الجدول
    • المجموعات - يتم عرض خط بين المجموعات التي شكلتها العلامات
    .

    السمات والخصائص

    1. الخاصية align="parameter" - تحدد محاذاة خلية جدول فردية. يمكن أن تأخذ القيم التالية:

    • اليسار - محاذاة اليسار
    • مركز - محاذاة المركز
    • اليمين - المحاذاة اليمنى

    2. خاصية الخلفية = "URL" - لتعيين صورة الخلفية للخلية. بدلاً من عنوان URL، يجب كتابة عنوان صورة الخلفية.

    3. الخاصية bgcolor = "color" - تحدد لون خلفية الخلية.

    4. خاصية bordercolor = "color" - تحدد لون حدود الخلية.

    5. الخاصية char="letter" - تحدد الحرف الذي يجب إجراء المحاذاة منه. يجب تعيين قيمة سمة المحاذاة على char.

    6. الخاصية colspan='number' - تحدد عدد الخلايا الأفقية المراد دمجها.

    7. الخاصية height='number' - تحدد ارتفاع الجدول: إما بالبكسل أو كنسبة مئوية.

    8. الخاصية width='number' - تحدد عرض الجدول: إما بالبكسل أو كنسبة مئوية.

    9. الخاصيةrowspan='number' - تحدد عدد الخلايا العمودية المراد دمجها.

    10. الخاصية valign="parameter" - المحاذاة الرأسية لمحتويات الخلية.

    • أعلى - محاذاة محتويات الخلية إلى الحافة العلوية للصف
    • وسط - محاذاة متوسطة
    • أسفل - محاذاة إلى الحافة السفلية
    • خط الأساس - التوافق مع خط الأساس
    ملاحظة 1

    للعلامة

    . المعلمات لعلامة واحدة
    بداخله

    كيفية منع حدود الخلايا في الجدول من الالتصاق ببعضها البعض

    إذا كنت تستخدم حدًا (حدود الخلية) ومساحة صفرية بين الخلايا، فستظل ملتصقة معًا وستحصل على حد مزدوج. لتجنب ذلك، تحتاج إلى تحديد Border-collapse: Collage في أنماط الجدول:

    ...

    عزيزي القارئ، لقد تعلمت الآن الكثير عن علامة جدول html. الآن أنصحك بالانتقال إلى الدرس التالي.

    في حياة كل مؤلف إعلانات، تأتي مرحلة للتعرف على علامات html. عادة ما يحدث هذا بشكل عفوي ويبدو وكأنه طلب من العميل "لإعداد النص للنشر". هذا يعني أنه في المقالة تحتاج إلى تسليط الضوء على العناوين والفقرات والأماكن والقوائم المهمة، ولكن ليس باستخدام إمكانيات Word، ولكن باستخدام إمكانيات خاصة كود أتش تي أم أللغة. سوف يساعد في هذا علامات لمؤلف الإعلانات. عادة ما تكون القائمة المطلوبة للعمل صغيرة، ولكنها كافية لتنسيق النص بالمتطلبات القياسية. ما الذي يتم تضمينه في علامات html اللازمة لمؤلف الإعلانات؟ (إذا كنت كسولًا جدًا في القراءة، فقم بالتمرير لأسفل - يوجد مخطط معلوماتي موضوعي بسيط وواضح حول علامات html!)

    يطرح مؤلف الإعلانات أسئلة تقليدية. وكلها تبدأ بالصيغة "ما هي العلامة المستخدمة لتحديد...":

    • عنوان؛
    • فقرة؛
    • ظفري؛
    • مائل.
    • القائمة ذات تعداد نقطي/غير مسمى/

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

    العلامات لإنشاء العناوين

    يتم تمثيل العلامات الخاصة بإنشاء العناوين بالعناصر h1-h6. لقد حصلوا على رسالتهم من العنوان الإنجليزي (العنوان). لتعيين نوع الرأس المطلوب والتأكيد على أهميته بالنسبة لـ PS، استخدم الكود التالي:

    العنوان ح1

    العنوان h2

    العنوان ح3

    العنوان h4

    العنوان h5
    العنوان ح6

    على الموقع سوف تبدو مثل هذا.

    العنوان ح1

    العنوان h2

    العنوان ح3

    العنوان h4

    العنوان h5
    العنوان ح6

    يتمتع عنوان h1 بالأهمية الأكبر - والرؤية -. يتم استخدامه كعنوان للنشر ويتم استخدامه مرة واحدة فقط. بالنسبة للعناوين الفرعية في النص، يوصى بـ h2 وh3. إنها تساعد في التأكيد على أهمية المادة قيد النظر وتقسيم المقالة إلى مستويات معلومات.

    لا يتم استخدام الرؤوس h4-h6 عمليًا، ولكنها مطلوبة لتسليط الضوء على الكتل المنطقية والأجزاء المهمة.

    بالنسبة للمقالات الكبيرة، من الأفضل استخدام العناوين h1-h3، وللمقالات الصغيرة - h1 وh2.

    القوائم: نقطية وغير مسماة

    يحتوي النص الجيد المنظم دائمًا على قائمة واحدة أو حتى عدة قوائم. بطريقتي الخاصة مظهرالقوائم هي:

    1. ملحوظ - لديهم ترقيم؛
    2. غير مميزة - يتم تمييز العناصر بالرموز.

    لكن كل تصميمات Word غير مناسبة للمنشورات على الموقع، لذا فإن الأمر يستحق تعلم كيفية تنسيق القوائم بشكل صحيح في علامات HTML.
    بطاقة شعار قائمة نقطية يبدو مثل هذا:

    علامة القائمة غير المنقطةلذا:

    علاوة على ذلك، كل عنصر في القائمة له إطار HTML خاص به:

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

    1. قائمة الاغراض
    2. قائمة الاغراض
    3. قائمة الاغراض
    4. قائمة الاغراض

    بالنسبة للقائمة غير المميزة فهي مشابهة:

    • قائمة الاغراض
    • قائمة الاغراض
    • قائمة الاغراض
    • قائمة الاغراض

    لقد قمنا بفرز القوائم. يمكننا المضي قدما.

    علامات التركيز على النص: غامق ومائل

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

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

    يتيح استخدام علامات html إرضاء محركات البحث وإبراز النص بصريًا للمستخدم. ما هو الأكثر أولوية، قرر بنفسك:

    تسليط الضوء على عبارة بالخط العريض لPS والمستخدمين عبارة جريئة للمستخدمين عبارات مائلة لـ PS والمستخدمين كتابة عبارة بخط مائل للمستخدمين

    لدي مقال كبير ومثير للجدل للغاية حول موضوع العلامات التفريغ الزيتي، وهو ما يسمى بذلك.

    إذا نظر أحد المبرمجين فجأة إلى الموضوع، فسأسارع إلى الإشارة مرة أخرى إلى أن المراجعة مخصصة لمؤلفي النصوص: كيفية وضع العلامات، وما هي وما هو المهم الذي يجب مراعاته عند الاختيار. وأخيرًا، هناك حاجة إلى كود HTML شائع آخر لتسليط الضوء على الفقرات. هذا

    يتم وضع علامة الافتتاح قبل بداية الفقرة، ويتم وضع علامة الإغلاق في النهاية. إذا انتهت الفقرة بقائمة، إذن
    يتم وضعها بعد كافة العلامات المستخدمة في القائمة.

    حسنًا، بعض الرسوم البيانية الموضوعية البسيطة في النهاية:

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

    اقرأ: 6,687

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

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

    كيفية إدراج صورة في HTML؟

    لإدراج صورة في صفحة HTML، استخدم علامة واحدة بسيطة:

    ,

    حيث xxx هو عنوان الصورة إذا كانت الصورة في نفس الدليل مثل الصفحة، فستبدو العلامة كما يلي:

    ومع ذلك، فإن الإنترنت عالي السرعة والمستقر لم يصل بعد إلى جميع أنحاء العالم، ويحدث أن الصورة الموجودة على موقع الويب لا يتم تحميلها ببساطة. وفي مثل هذه الحالات، هناك مفهوم النص البديل.

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

    مثال لإضافة نص بديل إلى ملف رسومي:

    نص بديل



    تعيين أحجام الصور في HTML

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

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

    يتم وضع الصورة في مستطيل بالأبعاد المحددة، وإذا كانت المعلمات أصغر أو أكبر من المعلمات الأصلية، يتم تمديد الصورة أو ضغطها.

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

    يمكن تحديد هذه المعلمات بالبكسل (حجم الصورة ثابت ولا يعتمد على دقة شاشة المستخدم) وبالنسب المئوية (يعتمد حجم الصورة على دقة الشاشة).

    على سبيل المثال:

    يجب أن نتذكر أنه في اللحظة التي تقوم فيها بتغيير الحجم الأصلي للصورة، فمن الضروري الحفاظ على نسبها.

    للقيام بذلك، يكفي تحديد قيمة واحدة فقط من المعلمات ( العرض أو الارتفاع)، وسيقوم المتصفح بحساب قيمة الثانية تلقائيًا.

    موقع الصورة في HTML

    كما هو الحال مع الكثير علامات HTML، ل قم بتطبيق سمة المحاذاة التي تقوم بمحاذاة الصورة:

    - الصورة تقع فوق النص؛

    - الصورة موجودة أسفل النص؛

    - الصورة تقع على يسار النص؛

    - الصورة تقع على يمين النص.

    رابط الصورة

    هذا يفعل كما يلي:

    كما ترون، إدراج الرسميمكن أن يكون رابطًا، وعند النقر عليه، يتم إعادة التوجيه إلى أي عنوان مكتوب بشكل كامل أو مختصر.

    كيف يمكنني جعل الصورة خلفية في HTML؟

    لا يمكن إدراج الصورة في الصفحة ككائن مرئي فحسب، بل يمكن أيضًا وضعها في الخلفية. لتعريف صورة كخلفية، تحتاج إلى تحديد سمة الخلفية=”xxx” في العلامة، حيث xxx هو عنوان الصورة، المحدد بنفس الطريقة كما في الأمثلة أعلاه.

    على سبيل المثال، لنقم بتعيين صورة النسيج التالية كصورة خلفية:

    احفظ الصورة في مجلد به صفحة معدة واكتب الأسطر التالية:

    الصفحة مع صورة الخلفية</head>

    الخلفية مع النص.



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

    لإدخال الصور في HTMLالتنسيقان الرئيسيان المستخدمان هما GIF وJPEG. يمكن تخزين تنسيق GIF رسوم متحركة بسيطة(اللافتات الديناميكية)، يعد JPEG رائعًا للصور التي تحتوي على الكثير من الألوان، مثل الصور الفوتوغرافية. التنسيق الثالث لرسومات الويب هو تنسيق PNGولكن لا يتم استخدامه على نطاق واسع في تصميم الويب. يتم إدراج أي صورة بتنسيق GIF أو JPEG في صفحة الويب باستخدام العلامة < img > ، لا توجد علامة إغلاق.

    سمة SRC

    عبر السمة srcيتم تحديد عنوان (URL) لملف الصورة، أي. يعثر المتصفح على الصورة المطلوبة في دليل الموقع باستخدام المسار (URL) المحدد في هذه السمة. للراحة، توجد جميع صور الموقع في مجلد منفصل، يسمى عادة صورة. على سبيل المثال، التقط أي صورة، ويفضل أن تكون ذات تنسيق صغير، واحفظها في صورة المجلد الذي تم إنشاؤه بالاسم primer.jpg. بعد ذلك سوف نشير إليه للتدريب.

    حسنا، دعونا نحاول إدراج صورة على الصفحة؟ نكتب الكود (المسار - URL، المكتوب حسب موقع المجلد الذي يحتوي على الصور):

    < img src="image/primer.jpg">

    نص بديل. سمة البديل

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

    لا يمكنك رؤية ذلك إلا عن طريق إيقاف تشغيل عرض الصور في المتصفح.

    اضبط الحجم. سمات العرض والارتفاع

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

    يتم ضبط أحجام الصور باستخدام العلامات عرض- العرض و ارتفاع— الارتفاع، يتم تعيين القيم بالبكسل وكنسبة مئوية من عرض الشاشة (مع النسب المئوية، كن حذرًا للغاية). دعونا نلقي نظرة على الكود:

    خاتمة

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

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

    تعد سمة ALT مهمة جدًا ويجب إضافتها إلى كل علامة IMG. يجب أن يصف محتوى الرسالة النصية الصورة بدقة وإيجاز شديدين.

    يجب أن تتوافق الصور الموجودة على صفحة الويب مع محتوى النص.

    بعد دراسة هذا القسم، يمكنك بالفعل تجربة نفسك كمشرف موقع وإنشاء صفحة HTML كاملة. ثم دعنا ننتقل إلى إدراج الوسائط المتعددة.

    مرحبا عزيزي القراء بلوق! في هذه المقالة سوف تتعلم كل شيء عنه كيفية إدراج صورة على صفحة أتش تي أم أل . هل لديك عدة صور تريد وضعها على صفحتك أو تريد وضع شعار على موقعك؟ كل هذا سهل. بعد قراءة هذه المقالة، ستتمكن من إدراج الصور في صفحات HTML الخاصة بك دون أي صعوبات. للقيام بذلك، سنتحدث بالتفصيل علامة imgوخصائصه، سنلقي نظرة سريعة على تنسيقات الملفات الرسومية مثل gif وjpeg وpng، كما سنلقي نظرة على ميزات HTML5 الجديدة التي تسهل إدراج الفيديو والصوت في موقعك.

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

    يتم استدعاء جميع الصور الرسومية، وبشكل عام، أي بيانات مخزنة في ملفات منفصلة عن صفحة الويب مُنفّذعناصر الصفحة.

    قبل إدراج الصور والنظر إلى علامة "img" بالتفصيل، من المفيد أن تتعلم القليل عن تنسيقات الرسوم.

    تنسيقات الصور الرسومية.

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

    1. تنسيق جبيغ(فريق خبراء التصوير المشترك). تنسيق شائع جدًا يستخدم لتخزين الصور. يدعم ألوان 24 بت ويحافظ على جميع الألوان النصفية في الصور دون تغيير. لكن صيغة jpeg لا تدعم الشفافية وتشوه التفاصيل الصغيرة والنصوص في الصور. يستخدم JPEG في المقام الأول لتخزين الصور الفوتوغرافية. الملفات بهذا التنسيق لها الامتدادات jpg، jpe، jpeg.

    2. تنسيق GIF(تنسيق تبادل الرسومات). الميزة الرئيسية لهذا التنسيق هي القدرة على تخزين عدة صور مرة واحدة في ملف واحد. يتيح لك هذا إنشاء مقاطع فيديو متحركة كاملة. ثانيا، يدعم الشفافية. العيب الرئيسي هو أنه يدعم 256 لونًا فقط، وهو غير مناسب لتخزين الصور. يستخدم GIF بشكل أساسي لتخزين الشعارات واللافتات والصور ذات المساحات الشفافة والتي تحتوي على نص. الملفات بهذا التنسيق لها الامتداد gif.

    3. تنسيق PNG(رسومات الشبكة المحمولة). تم تطوير هذا التنسيق كبديل لتنسيق GIF القديم، وإلى حد ما، JPEG. يدعم الشفافية ولكنه لا يسمح بالرسوم المتحركة. هذا التنسيقلديه امتداد png.

    عند إنشاء مواقع الويب، عادةً ما يستخدمون الصور بتنسيق JPEG أو GIF، ولكن في بعض الأحيان يستخدمون PNG. الشيء الرئيسي هو فهم الحالات التي يكون فيها التنسيق أفضل للاستخدام. باختصار:

      يتم استخدام JPEG بشكل أفضل لتخزين الصور الفوتوغرافية أو الصور ذات التدرج الرمادي التي لا تحتوي على نص؛

    • يستخدم GIF في المقام الأول للرسوم المتحركة؛
    • PNG هو التنسيق لكل شيء آخر (الرموز والأزرار وما إلى ذلك).

    إدراج الصور في صفحات html

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

    كود لإدراج الصور في HTMLالصفحة تبدو مثل هذا:

    سيضع كود html هذا على صفحة الويب صورة مخزنة في ملف image.jpg، الموجود في نفس المجلد مثل صفحة الويب. كما لاحظتم، عنوان الصورة موضح في سمة سرك. لقد أخبرتك بالفعل ما هو. لذا، فإن سمة src هي سمة مطلوبة تعمل على الإشارة إلى عنوان الملف بالصورة. بدون السمة src، العلامة img لا معنى لها.

    فيما يلي بعض الأمثلة الإضافية لتحديد عنوان ملف يحتوي على صورة:

    سيقوم رمز html هذا بإدراج صورة على الصفحة تسمى image.jpg، والتي يتم تخزينها في مجلد الصور الموجود في جذر موقع الويب.

    يمكن أن تحتوي سمة src ليس فقط الروابط النسبيةإلى الصور. نظرًا لأنه يتم تخزين الصور عبر الإنترنت مع صفحات html، فإن كل ملف صورة له عنوان url خاص به. لذلك، يمكنك إدراج عنوان URL للصورة في سمة src. على سبيل المثال:

    سيقوم هذا الرمز بإدراج صورة من موقع mysite.ru على الصفحة. يُستخدم عنوان URL عادةً عندما تشير إلى صورة على موقع آخر. بالنسبة للصور المخزنة على موقعك، فمن الأفضل استخدام الروابط النسبية.

    علامة img هي عنصر مضمّن، لذا من الأفضل وضعها داخل عنصر كتلة، على سبيل المثال داخل علامة "P" - الفقرة:

    دعونا نتدرب ونلصق في صفحتنا من المقالات السابقة حول صورة أتش تي أم أل. سأقوم بإنشاء مجلد "صور" بجوار ملف html الخاص بصفحتي وأضع ملف صورة "bmw.jpg" هناك، والذي يبدو كالتالي:

    بعد ذلك سيكون كود html للصفحة التي تحتوي على الصورة المدرجة كما يلي:

    وإلقاء نظرة على نتيجة العرض في المتصفح:

    كما نرى، لا يوجد شيء معقد في وضع الصور على صفحات الويب. بعد ذلك، دعونا نلقي نظرة على بعض السمات المهمة الأخرى للعلامة "img".

    السمة البديلة هي خيار احتياطي

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

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

    وهذا ما يبدو تقريبًا:

    ضبط أبعاد الصورة

    لا تزال هناك بعض سمات علامة img التي يجب أن تعرفها. هذه بضع سمات عرضو ارتفاع. يمكنك استخدام هذه لتحديد أبعاد الصورة:

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

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

    إدراج الفيديو والصوت باستخدام HTML 5

    تقدم مواصفات html5 الجديدة العديد من العلامات الجديدة التي تجعل من السهل جدًا تضمين ملفات الوسائط. وهذا ينطبق في المقام الأول على الفيديو والصوت.

    لإدخال صوتييوفر HTML5 علامة مقترنة صوتي. تتم الإشارة إلى عنوان الملف الذي تم تخزين مقطع الصوت فيه باستخدام السمة src المألوفة لنا بالفعل:

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

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



    أخبر الأصدقاء