هل توجد علامة حجم HTML؟

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

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

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

أحجام الخطوط

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

لتعيين فقرتك ليكون لها حجم خط 12 نقطة ، استخدم خاصية نمط حجم الخط:

h3 {font-size = 24px؛ }

سيقوم هذا النمط بتعيين حجم الخط لعناصر headiing3 24 بكسل. يمكنك إضافة هذا إلى ورقة أنماط خارجية وستستخدم جميع H3s في موقعك هذا النمط.

إذا كنت ترغب في إضافة أنماط طباعية إضافية إلى النص الخاص بك ، فيمكنك إضافتها إلى قاعدة CSS هذه:

h3 {font-size: 24px؛ اللون: # 000؛ الخط الوزن: عادي؛ }

لن يؤدي ذلك إلى تعيين حجم الخط فقط لـ H3s ، بل سيؤدي أيضًا إلى تعيين اللون إلى اللون الأسود (وهو ما يعني رمز الـ hex عشري لـ 000 يعني) وسيحدد الوزن إلى "طبيعي". بشكل افتراضي ، تعرض المتصفحات العناوين من 1 إلى 6 كنص غامق ، لذا فإن هذا النمط سيتجاوز هذا الإعداد الافتراضي ويصبح النص "غير جريء" بشكل أساسي.

أحجام الصور

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

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

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

height = "400" width = "400" alt = "image" />

لتحديد حجم الصورة باستخدام CSS ، استخدم خصائص نمط الطول والعرض. في ما يلي نفس الصورة ، باستخدام CSS لتحديد الحجم:

style = "height: 400px؛ width: 400px؛" alt = "image" />

مقاسات التصميم

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

عرض ثابت:

على غرار = "العرض: 600px ل؛">

عرض السائل:

على غرار = "العرض: 80٪؛">

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