كيفية تنسيق المواقع

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

تنسيق HTML

1

قم بإنشاء جداول من أجل وضع العناصر المختلفة لصفحة الويب الخاصة بك. إستخدم

علامة لبدء الجدول نفسه. استخدم علامة لبدء صف الجدول ، و

Original text


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

2

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

سيؤدي ذلك إلى عرض محتويات الفقرة بخط Comic Sans.

3

أضف خلفية إلى موقع الويب بالكامل في العلامة باستخدام سمة bgcolor. فمثلا:

يؤدي هذا إلى عرض خلفية الصفحة بأكملها بلون وردي.

أوراق الأنماط الخارجية و CSS

1

افتح مستندًا نصيًا جديدًا في Notepad.

2

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

ص {

عائلة الخطوط: "comic sans ms"؛

لون الخلفية :: # CC3366 ؛

}

ستحتوي كل فقرة في مستند HTML على خط Comic Sans ولون خلفية وردي.

3

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

.comicrose {

عائلة الخطوط: "comic sans ms"؛

لون الخلفية :: # CC3366 ؛

}

تتيح لك هذه الفئة تصميم عنصر باستخدام Comic Sans وخلفية وردية أينما كنت تسمي فئتها. على سبيل المثال ، في كود HTML لصفحتك ،

أنماط فقرة كما هو موضح.

4

رابط إلى ورقة أنماط خارجية في قسم كود HTML الخاص بك. فمثلا:

.

يرتبط هذا بورقة أنماط خارجية تسمى pagestyles.css.

Copyright ar.booster-academy-grenoble.com 2021