الدرس الرابع: إنشاء موقعك الأول
مع كل ما تعلمته في الدروس السابقة أصبحت الآن على بعد دقائق من إنشاء أول موقع لك.
كيف؟
في الدرس الأول ألقينا نظرة على الأدوات التي نحتاجها لإنشاء موقع: متصفح وبرنامج المفكرة أو أي محرر نصي مماثل، وبما أنك تقرأ هذه الصفحة فأنت تستخدم الآن متصفحاً، ما تحتاجه الآن هو أن تفتح نافذة جديدة من المتصفح لكي تستطيع قراءة هذا الدرس بينما تستخدم النافذة الأخرى لترى فيها موقعك.
أيضاً عليك أن تفتح برنامج المفكرة "Notepad" والذي ستجده في قائمة إبدأ ثم برامج ثم أدوات:
أنت جاهز الآن!
ماذا أفعل؟
لنبدأ بشيء بسيط، سنقوم بإنشاء صفحة تقول "مرحى! هذا هو موقعي الأول." أكمل القراءة وستعرف كم هو بسيط فعل ذلك.
لغة HTML بسيطة ومنطقية، المتصفح يقرأ HTML كما تقرأ أنت اللغة الإنجليزية: من الأعلى إلى الأسفل ومن اليسار إلى اليمين، لذلك صفحة HTML بسيطة تبدأ بما يجب أن تبدأ به أي صفحة HTML وتنتهي بما يجب أن يأتي في نهاية الصفحة.
أول شيء عليك فعله هو أن تخبر المتصفح بأنك "ستتحدث" معه بلغة HTML، يمكنك فعل ذلك عن طريق وسم <html> لا توجد أي مفاجئة هنا، لذلك قبل أن تبدأ أي شيء أكتب "<html>" في أول سطر في برنامج المفكرة.
كما تتذكر من الدروس الماضية، <html> هو وسم البداية ويحتاج إلى وسم إغلاق لذلك لا تنسى كتابة وسم الإغلاق بعد سطرين فارغين، وبقية الوثيقة ستكتبها بين <html> و</html>.
الشيء التالي الذي تحتاجه صفحتك هو أمر رأس الصفحة "head" والذي يقدم معلومات حول الصفحة للمتصفح، وكذلك تحتاج إلى أمر "body" والذي سيحوي المحتويات التي تريد ان تضعها في الصفحة، أمر head أو رأس الصفحة (<head>و</head>) يوضع فوق أمر body أو "متن الصفحة" (<body> و</body>).
صفحتك يجب أن تكون بهذا الشكل:
<html>
<head>
</head>
<body>
</body>
</html>
لاحظ كيف نسقنا الصفحة بطريقة منطقية حيث وضعنا كل وسم في سطر جديد ووضعنا مسافات فارغة قبل بعضها، كقاعدة، لا يهم كيف تقوم بتنسيق الأوامر في صفحة HTML، لكن لكي تجعل الصفحة سهلة القراءة لك وللآخرين ينصح بأن تنسق الصفحة بطريقة هيكلية منطقية سهلة الفهم كما ترى في المثال أعلاه.
إذا كانت صفحتك تشبه المثال أعلاه فقد قمت بإنشاء موقعك الأول، عملياً الموقع ممل ولا يحوي شيئاً وغالباً لن يكون الموقع الذي تحلم به عندما بدأت في قراءة هذا الدرس، مع ذلك هو موقع وما قمت بإنجازه الآن سيكون قالباً لبقية صفحات HTML التي ستكتبها في المستقبل.
جميل, لكن كيف أضيف المحتويات للموقع؟
كما تعلمت سابقاً، صفحة HTML تحوي جزئياً، رأس الصفحة ومتن الصفحة، في رأس الصفحة تكتب معلومات عن الصفحة نفسها، أما المتن فيضم المحتويات التي تشكل الصفحة..
مثلاً، إذا أردت أن تضع عنواناً للصفحة يظهر في الشريط العلوي للمتصفح فيجب أن تفعل ذلك في رأس الصفحة، العنصر المستخدم لفعل ذلك هو title. اكتب عنواناً للصفحة بين وسم البداية <title> ووسم الإغلاق </title>:
<title>موقعي الأول</title>
لاحظ أن العنوان لن يظهر في الصفحة نفسها، أي شيء تريده أن يظهر في الصفحة يجب أن يضاف بين وسمي متن الصفحة
كما قلنا سابقاً، نريد للصفحة أن تقول "مرحى! هذا هو موقعي الأول"، هذا النص الذي نريد وضعه في الصفحة، لذلك علينا أن نكتب في متن الصفحة ما يلي::
<p>مرحى! هذا هو موقعي الأول.</p>
الحرف p في <p> هو اختصار "paragraph" أو فقرة، وهو أمر بسيط لإنشاء فقرات نصية.
صفحة HTML يجب أن تكون لديك بالشكل التالي:
<html>
<head>
<title>موقعي الأول</title>
</head>
<body>
<p>مرحى! هذا هو موقعي الأول.</p>
</body>
</html>
انتهينا! لديك الآن أول موقع حقيقي!
كل ما عليك فعله الآن هو حفظ الصفحة على القرص الصلب ثم عليك أن تستعرضها في متصفحك:
- في برنامج المفكرة اختر "Save as..." من قائمة "File" في القائمة العلوية.
- اختر "All Files" في نافذة "Save as type". هذا مهم جداً، لأنك إن لم تفعل ذلك ستقوم بحفظه كملف نصي وليس كملف HTML.
- احفظ الصفحة باسم "page1.htm" الأحرف الثلاثة الأخيرة .htm تشير إلى أن الملف هو من نوع HTML، بإمكانك أن تحفظ تضع بدلاً منها ".html" وستكون النتيجة متماثلة، شخصياً أستخدم ".htm" دائماً، لكن بإمكانك أن تختار بينهما ما تشاء، فلا فرق بينهما، ولا يهم أين تحفظ الملف في القرص الصلب، ما دمت تتذكر أين حفظته لكي تستطيع إيجاده مرة أخرى.
الآن إذهب إلى متصفحك:
- في القائمة العلوية اختر "Open" من قائمة "File" (CTRL+O).
- إضغط على "Browse" في النافذة التي ستظهر لك.
- إبحث عن الملف الذي قمت بإنشاءه واضغط على "Open".
الآن يجب أن تحوي الصفحة جملة "مرحى! هذا هو موقعي الأول." تهانينا!
إذا أردت أن يعرف العالم كله عن هذه الصفحة بإمكانك أن تقفز للدرس الثالث عشر وتتعلم كيفية وضع هذه الصفحة على شبكة إنترنت، خلافاً لذلك اصبر وأكمل قراءة الدروس
الدرس الثاني عشر: التصميم (CSS)
أليس من الجميل أن تتمكن من إعطاء صفحتك التصميم الذي تستحق؟
بالتأكيد، لكن كيف؟
لكي تعطي صفحتك تصميماً يجب أن تستخدم تقنية (CSS)، في هذا الدرس ستجد مقدمة قصيرة إلى CSS، لكن بعد ذلك يمكنك تعلم كل شيء حول CSS بتفاصيلها في درس CSS. لذلك اعتبر هذا الدرس مجرد فاتحة شهية.
هي النصف الآخر للغة HTML، ففي كتابة الصفحات، كل واحدة لها وظيفة محددة: تهتم بالجوانب الصعبة "هيكلية الصفحة ومحتوياتها" بينما CSS تعطي لمسة أنيقة (التصميم).
مثال 1:
<p style="font-size:20px;">This is typed in size 20</p>
<p style="font-family:courier;">This is typed in Courier</p>
<p style="font-size:20px; font-family:courier;">This is typed in Courier size 20</p>
سيظهر بهذا الشكل في متصفحك
This is typed in size 20
This is typed in Courier
This is typed in Courier size 20
في المثال أعلاه اسخدمنا خاصية style لتحديد نوع الخط الذي نريد استخدامه من خلال أمر font-family) وحددنا حجم الخط من خلال أمر font-size)، لاحظ كيف أن الفقرة الأخيرة استخدامنا الأمرين معاً وقمنا بالفصل بينمها من خلال فاصلة منقوطة.
يبدو أن هذا يحتاج إلى الكثير من العمل؟
إحدى أذكى خصائص CSS أنها تمكنك من إدارة التصميم من خلال مكان واحد، فبدلاً من اسخدام خاصية style لكل وسم، يمكن أن تخبر المتصفح مرة واحدة كيف يجب أن يعرض التصميم لكل النصوص في الصفحة:
مثال 2:
<html>
<head>
<title>My first CSS page</title>
<style type="text/css">
h1 {font-size: 30px; font-family: arial;}
h2 {font-size: 15px; font-family: courier;}
p {font-size: 8px; font-family: "times new roman";}
</style>
</head>
<body>
<h1>My first CSS page</h1>
<h2>Welcome to my first CSS page</h2>
<p>Here you can see how CSS works </p>
</body>
</html>
في المثال أعلاه وضعت في رأس الصفحة، ولذلك يمكن تطبيقها على كل الصفحة، لفعل ذلك عليك فقط أن تضع الوسم<style type="text/css"> الذي يخبر المتصفح بأنك تستخدم CSS.
في المثال كل العناوين في الصفحة ستستخدم خطاً من نوع Arial بحجم 30 بكسل، وكل العناوين الجانبية ستستخدم خطاً من نوع Courier بحجم 15 بكسل، وبقية النصوص في الفقرات ستستخدم خطاً من نوع "Times New Roman" بحجم 8 بكسل.
هناك خيار آخر يتمثل في كتابة CSS في ملف منفصل، لأنك تستطيع من خلال ملف منفصل أن تتحكم بتصميم صفحات عدة مرة واحدة، هذا أسلوب ذكي إذا أردت أن تغير حجم الخط ونوعه في موقع كبير يحوي مئات أو آلاف الصفحات، لكننا لن نشرح ذلك الآن، يمكنك أن تتعلم هذا في درس CSS.
ماذا يمكن أن أفعل أيضاً في CSS؟
يمكن أن تستخدم لأكثر من مجرد تحديد نوع وحجم الخط، فمثلاً يمكنك أن تحدد ألوان عناصر الصفحة ولون الخلفية، هنا بعض الأمثلة لتجرب عليها::
<p style="color:green;">Green text</p>
<h1 style="background-color: blue;">Heading on blue background</h1>
<body style="background-image: url('http://www.html.net/logo.png');">
جرب أن تدخل في المثال في بعض الصفحات التي قمت بإنشاءها، وجرب ذلك بالطريقتين، كما ترى في المثال أو بوضع CSS في رأس الصفحة
هل CSS مجرد ألوان وخطوط؟
بجانب التصميم وتفاصيله مثل الألوان والخطوط، يمكنها أن تتحكم بتنسيق الصفحة وطريقة عرض البيانات فيها (الهوامش، المحاذاة، العرض والطول ... إلخ)، بتنظيم مخلف العناصر باستخدام CSS، يمكنك أن تصمم صفحتك بأسلوب أنيق دقيق.
مثال 3:
<p style="padding:25px;border:1px solid red;">I love CSS</p>
سيظهر بهذا الشكل في متصفحك
I love CSS
بستخدام أمر float يمكن للعنصر أن يوضع إلى يسار أو يمين الصفحة في المثال التالي سنعرض هذا المبدأ:
مثال 4:
<img src="bill.jpg" alt="Bill Gates" style= "float:left;" />
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit,
sed diam nonummy nibh euismod tincidunt ut laoreet dolore
magna aliquam erat volutpat. Ut wisi enim ad minim veniam,
quis nostrud exerci tation ullamcorper suscipit
lobortis nisl ut aliquip ex ea commodo consequat...</p>
سيظهر بهذا الشكل في متصفحك
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat...
في المثال عنصر واحد "الصورة" قمنا بوضعها إلى اليسار والعنصر الآخر "النص" قم بتغطية المساحة الفارغة حولها.
باستخدام الأمر position، يمكنك أن تضع العنصر في مكان محدد حيث تريد له أن يكون في الصفحة:
مثال 5:
<img src="bill.jpg" alt="Bill Gates" style="position:absolute;bottom:50px;right:10px;" />
في المثال الصور وضعت على بعد 50 بكسل من الأسفل و10 بكسل من يمين المتصفح، لكن يمكنك أن تضعها بالضبط حيث تشاء، جرب، ستجد أن الأمر سهل ومثير.
جميل، لكن هل هي سهلة؟
لا يمكنك تعلم CSS في عشر دقائق، وكما ذكرنا أعلاه، هذا الدرس هو مجرد مقدمة قصيرة، لاحقاً يمكنك أن تتعلم المزيد بنفسك في درس CSS.
الآن لنركز على HTML، ولنذهب إلى الدرس التالي حيث ستتعلم كيف تقوم بوضع موقعك على الشبكة لكي يستطيع كل الناس في العالم مشاهدته.
الدرس الثالث عشر: رفع الصفحات إلى الشبكة
حتى الآن أنت الوحيد الذي تستطيع أن ترى صفحاتك، حان الوقت لكي يرى بقية العالم ما قمت بإنجازه.
هل العالم مستعد لهذا؟
العالم مستعد كما ستكون أنت مستعداً، لكي تضع صفحتك على الإنترنت فأنت بحاجة إلى مساحة في مزود موقع وبرنامج مجاني لنقل الملفات.
إذا كنت تملك اتصالاً بالشبكة فربما تملك مساحة مجانية في مزود لموقعك، مزود الموقع سيكون عنوانه مثلاً http://home.provider.com/~usernumber، لكن ربما تحتاج إلى تفعيله أولاً، إقرأ حول هذا في صفحات موقع مقدم خدمة الإنترنت في بلدك.
هناك خيار آخر هو أن تحصل على مزود يقدم مساحة مجانية على الإنترنت، بنفس الطريقة التي قمت فيها بالحصول على بريد إلكتروني مثل هوتميل، يمكنك أن تسجل لمساحة مجانية على الإنترنت، هناك عدة شركات تقدم خدمات مثل هذه منهم000webhost.com (إضغط على "Order" واختر العضوية المجانية) - التسجيل يتطلب فقط بضع دقائق.
لكي تحصل على صلاحية الدخول للمزود، فأنت تحتاج إلى معرفة ما يسمى "Host Name" مثلاً: ftp.htmlnet.site50.net وأن تملك اسم مستخدم وكلمة سرية للمستخدم.
هل هذا كل ما أحتاج؟
للدخول إلى مزود ورفع صفحاتك له فأنت تحتاج أيضاً إلى برنامج نقل ملفات، ربما لا تملك واحداً في حاسوبك الآن، لكن لحسن الحظ يمكنك الحصول على واحد مجاناً.
هناك العديد من برامج نقل الملفات، من أفضلها هو FileZilla ولا يكلف شيئاً.، يمكنك إنزال FileZilla من موقعfilezilla.sourceforge.net.
كيف أقوم برفع الصفحات؟
في الأسفل ستجد شرحاً لكيفية نقل صفحاتك إلى حساب مجاني 000webhost.com باستخدام FileZilla، لكن الطريقة نفسها لا تتغير كثيراً لكل مقدمي خدمة استضافة المواقع وبرامج نقل الملفت.
قم بتشغيل برنامج نفل الملفات وأنت متصل بالشبكة، أدخل معلومة "host name" مثال: ftp.htmlnet.site50.net تحت خانة "Address"، ثم اسم المستخدم وكلمة السر ثم إضغط على Connect، يجب أن يكون لديك الآن اتصال بالمزود، في الجهة اليسرى من البرنامج يمكنك أن ترى محتويات حاسوبك "Local site" والجهة الأخرى سترى فيها محتويات المزود "Remote Site":
إبحث عن ملفات HTML والصور التي قمت بإنشاءها في حاسوبك وانقلها إلى المزود بالنقر عليها مرتين، سيقوم البرنامج بنقل الملفات بين حاسوبك والمزود، وسيتمكن العالم من رؤية ما قمت بإنشاءه، مثال: عنوان صفحة موقعك قد تكون بهذا الشكل http://htmlnet.site50.net/page1.htm>
قم بتسمية إحدى الصفحات "index.htm" أو "index.html" وستصبح تلقائياً صفحة البداية الرئيسية في موقعك، إذا كتبت http://htmlnet.site50.net بدون اسم الملف فالمتصفح في الحقيقة سيعرض http://htmlnet.site50.net/index.htm.
لاحقاً، من الأفضل أن تشتري عنواناً خاصاً بك (www.your-name.com) وتجنب العناوين الطويلة والمعقدة التي تستخدمها خدمات الاستضافة المجانية، يمكنك أن تشتري عناوين المواقع من خدمات كثيرة مثل Speednames أوNetworkSolutions
.
رس 2: كيف تعمل تقنية CSS؟
القواعد
الأساسية لكتابة
CSS
تفعيل CSS في صفحة HTML
الطريقة
1: ضمن وسوم HTML باستخدام خاصية style
الطريقة
2: ضمت ملف HTML باستخدام وسم style
الطريقة
3: ملف خارجي
جرب بنفسك
default.htm
style.css
دروس
الجدول أدناه يوضح بالمزيد من الأمثلة
هدية مني قالب محترف ورائع
تحميل 1
تحميل 2
رس 2: كيف تعمل تقنية CSS؟
في هذا الدرس ستتعلم كيف تقوم بإنشاء ملف التصميم الأول، ستتعلم
أساسيات CSS وما هي الوسوم
اللازمة لتستخدم CSS في وثيقة
HTML.
الكثير من خصائص CSS تشبه تلك المستخدمة في
HTML، لذلك
إذا تعلمت HTML واستخدامتها لإنشاء التصاميم فأنت في الغالب ستتمكن من تعلم CSS بسهولة، لنلقي
نظرة على هذا المثال الأساسي.
القواعد
الأساسية لكتابة
CSS
لنقل أننا نريد اللون الأحمر ليكون خلفية للصفحة:
باستخدام HTML يمكننا أن ننجز ذلك بهذه الطريقة:
<body bgcolor="#FF0000">
مع CSS يمكن تحقيق نفس النتيجة بكتابة هذه الأوامر:
body {background-color: #FF0000;}
كما تلاحظ، أوامر CSS تتشابه كثيراً مع
HTML،
والمثال أعلاه يوضح لك الأسلوب الأساسي لكتابة CSS:
لكن أين نضع أوامر CSS؟ هذا هو ما
سنتعلمه الآن.
تفعيل CSS في صفحة HTML
هناك ثلاث طرق يمكن أن تستخدمها لتفعيل CSS في صفحة
HTML، هذه
الطرق مشروحة أدناه، ونحن ننصح بأن تركز وتستخدم الطريقة الثالثة، وهي أن تضع CSS في ملف منفصل.
الطريقة
1: ضمن وسوم HTML باستخدام خاصية style
إحدى الطرق لتفعيل CSS في HTML هي باستخدام خاصية
style، لنأخذ مثالاً على أساس المثال أعلاه الذي أردنا فيه استخدام
اللون الأحمر كلخفية للصفحة، يمكن تطبيق هذا الأمر بهذا الشكل<html>
<head>
<title>Example<title>
</head>
<body style="background-color: #FF0000;">
<p>This is a red page</p>
</body>
</html>
الطريقة
2: ضمت ملف HTML باستخدام وسم style
هذه طريقة مختلفة بأنها تستخدم وسم
<style>، وهذا مثال لكيفية تطبيق هذه الطريقة:<html>
<head>
<title>Example<title>
<style type="text/css">
body {background-color: #FF0000;}
</style>
</head>
<body>
<p>This is a red page</p>
</body>
</html>
الطريقة
3: ملف خارجي
هذه هي الطريقة الأفضل، وهي أن تقوم بوضع رابط لملف خارجي يحوي أوامر CSS،
خلال هذا الدرس سنقوم باستخدام هذه الطريقة لجميع الأمثلة.
الملف الخارجي هو ببساطة ملف نصي يستخدم اللاحقة .css، ومثل الملفات الأخرى يمكنك أن تضعه في مزود
موقعك أو على القرص الصلب.
مثلاً، لنقل أن ملف التصميم لديك اسمه style.css وهو موجود في مجلد اسمه style، هذه الحالة يمكن توضيحها أكثر من خلال هذا
الرسم
المهم هنا هو إنشاء رابط بين ملف HTML
وملف التصميم
(style.css)،
مثل هذا الرابط يمكن إنشاءه من خلال سطر واحد في HTML:
<link rel="stylesheet" type="text/css"href="style/style.css"/>
لاحظ كيف أن مسار الملف حددناه باستخدام خاصية
href.
هذا الأمر يجب أن يوضع في قسم رأس الصفحة، أي بين وسمي
<head> و</head> كما في المثال الآتي:<html>
<head>
<title>My document</title>
<link rel="stylesheet" type="text/css" href="style/style.css" />
</head>
<body>
...
هذا الرابط يخبر المتصفح بأن عليه استخدام التصميم من ملف CSS عندما يقوم بعرض ملف HTML.
الجميل هنا أنك تستطيع ربط العديد من ملفات HTML بملف تصميم واحد، بمعنى آخر يمكن لملف تصميم واحد أن يستخدم للتحكم بتصميم العديد من ملفات HTML.
الجميل هنا أنك تستطيع ربط العديد من ملفات HTML بملف تصميم واحد، بمعنى آخر يمكن لملف تصميم واحد أن يستخدم للتحكم بتصميم العديد من ملفات HTML.
هذه الفكرة يمكنها أن توفر عليك الكثير من الوقت والجهد، إذا أردت
مثلاً أن تغير لون خلفية موقع يحوي 100 صفحة فملف التصميم يمكنه أن يوفر عليك
الوقت فلا تحتاج إلى تعديل 100 ملف بنفسك، باستخدام CSS يمكن تغيير ما تريد خلال ثواني بتغيير سطر واحد في ملف التصميم.
لنتدرب على ما تعلمناه حتى الآن.
جرب بنفسك
قم بتشغيل برنامج المفكرة
(Notepad) أو أي محرر نصي، وقم بإنشاء ملفين، أحدهما HTML والآخر CSS وضع فيهما هذه
المحتويات:
default.htm
<html>
<head>
<title>My document</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<h1>My first stylesheet</h1>
</body>
</html>
style.css
body {
background-color: #FF0000;
}
الآن قم بوضع الملفين في نفس المجلد، تذكر أن تحفظ الملفين باستخدام
اللاحقة الصحيحة لكل ملف.
قم بفتح ملف default.htm في متصفحك وانظر إلى الصفحة وهي تحوي اللون
الأحمر كخلفية، تهانينا! لقد قمت بإنشاء ملف التصميم الأول!
دروس
الدرس 3: الألوان والخلفيات
في هذا الدرس سنتعلم كيفية تفعيل الألوان
والخلفيات لموقعك، سنقوم أيضاً بتعلم طرق متقدمة لتحديد موقع صورة الخلفية، نشرح
هذه الخصائص في CSS:
- color
- background-color
- background-image
- background-repeat
- background-attachment
- background-position
- background
لون المقدمة: خاصية 'color'
خاصية color تصف لون عنصر HTML.
فمثلاً تصور أنك تريد أن تكون كل العناوين
في الصفحة ملونة بلون أحمر داكن، كل العناوين رمزت باستخدام وسم <h1>، المثال أدناه سيقوم بتوضيح كيفية تحويل كل <h1> إلى اللون
الأحمر:
h1 {
color: #ff0000;
}
الألوان يمكن أن تحدد باستخدام نظام الأرقام
الست عشري كما في المثال أعلاه، أو بأن تختار اسم اللون
"red"،
أو من خلال قيمة RGB والتي تعني
Red وGreen وBlue، مثال: (rgb(255,0,0)).
خاصية 'background-color'
خاصية background-color تحدد لون خلفية أي عنصر.
العنصر <body> يضم كل محتويات وثيقة HTML، لذلك لتغيير خلفية الصفحة بأكملها يجب أن نفعل خاصية background-color على
العنصر <body>.
يمكنك أيضاً تفعيل خاصية لون الخلفية على
عناصر أخرى مثل العناوين والنصوص، في المثال أدناه قمنا باختيار ألوان خلفية
لعنصري <body> و<h1>.
body {
background-color:
#FFCC66;
}
h1 {
color: #990000;
background-color: #FC9804;
}
لاحظ أننا قمنا بتفعيل خاصيتين للعنصر <h1> وقمنا
بالفصل بين الخاصيتين باستخدام فاصلة منقوطة.
الصورة كخلفية "background-image"
خاصية background-image تستخدم لوضع صورة كخلفية لأي عنصر.
فمثلاً قمنا باستخدم صورة فراشة في المثال
أدناه، يمكنك إنزال الصورة لتجرب بنفسك على حاسوبك، قم بالضغط على الصورة بالزر
الأيمن واحفظها في جهازك، أو يمكنك استخدام أي صورة تناسبك.
لإدخال صورة الفراشة كخلفية للصفحة قم
بتفعيل خاصية background-image للعنصر <body> وحدد مسار الصورة:
body {
background-color: #FFCC66;
background-image:
url("butterfly.gif");
}
h1 {
color: #990000;
background-color: #FC9804;
}
انتبه: لاحظ كيف حددنا مسار الصورة بهذا
الشكل url("butterfly.gif")، هذا يعني أن
الصورة وضعت في نفس المجلد مع ملف التصميم، يمكنك أن تحدد مسار الصور في مجلدات
أخرى باستخدام url("../images/butterfly.gif") أو حتى العنوان الكامل للملف: url("http://www.html.net/butterfly.gif").
تكرار صورة الخلفية "background-repeat"
هل لاحظت في المثال أعلاه أن صورة الفراشة
تتكرر رأسياً وأفقياً لتغطي كامل الصفحة؟ الخاصية background-repeat تتحكم بتكرار الصورة.
في الجدول أدناه ملخص لأربع قيم يمكن أن
تضعها للخاصية background-repeat.
القيمة
|
الوصف
|
مثال
|
Background-repeat:
repeat-x
|
الصورة ستتكرر أفقياً
|
|
background-repeat:
repeat-y
|
الصورة ستتكرر عمودياً
|
|
background-repeat:
repeat
|
الصورة ستتكرر أفقياً وعمودياً
|
|
background-repeat:
no-repeat
|
لن تتكرر بأي شكل
|
مثلاً لتجنب تكرار صورة الخلفية يجب أن تكتب
الأوامر بهذا الشكل::
body {
background-color: #FFCC66;
background-image: url("butterfly.gif");
background-repeat:
no-repeat;
}
h1 {
color: #990000;
background-color:
#FC9804;
}
تثبيت صورة الخلفية "background-attachment"
الخاصية background-attachment تحدد ما إذا كانت صورة الخلفية ثابتة أو
متحركة مع محتويات العنصر.
الصورة الثابتة لن تتحرك مع النص عندما يقوم
القارئ بتحريك الصفحة، بينما الصورة المتحركة ستتحرك مع الصفحة بمحتوياتها.
في الجدول أدناه ملخص للقيم التي يمكنك
وضعها لخاصية background-attachment،
شاهد الأمثلة ولاحظ الاختلاف بين الصورة الثابتة والمتحركة.
القيمة
|
الوصف
|
مثال
|
Background-attachment:
scroll
|
الصورة ستتحرك مع الصفحة
|
|
Background-attachment:
fixed
|
الصورة ستبقى ثابتة
|
المثال ادناه يبين كيفية اختيار القيمة
المناسبة لتثبيت صورة الخلفية:
body {
background-color: #FFCC66;
background-image:
url("butterfly.gif");
background-repeat:
no-repeat;
background-attachment: fixed;
}
h1 {
color:
#990000;
background-color:
#FC9804;
}
مكان صورة الخلفية "background-position"
تلقائياً توضع صورة الخلفية في أعلى يسار
الصفحة، الخاصية background-position تسمح لك بتغيير هذه القيمة التلقائية ووضع
الصورة في أي مكان تريده من الشاشة.
هناك طرق مختلفة لتحديد قيمة background-position، لكن كلها تنظم على نسق واحد، فمثلاً القيمة '100px 200px' تضع
الصورة الخلفية على بعد 100 بكسل من يسار نافذة المتصفح و200 بكسل من أعلى نافذة
المتصفح.
هذا النسق يمكن تحديده أيضاً بالنسبة المؤية
من عرض الشاشة وكذلك مقاييس محددة مثل البكسل والسنتيميتر، أو من خلال استخدام
كلمات مثل top وbottom
وcenter وleft وright.
الجدول أدناه يوضح بالمزيد من الأمثلة
القيمة
|
الوصف
|
مثال
|
background-position:
2cm 2cm
|
هذه الصورة وضعت على بعد 2 سنتم من يسار
الشاشة و2 سنتم من أعلى الشاشة
|
|
background-position:
50% 25%
|
هذه الصورة وضعت في منتصف المسافة من يسار
الشاشة وربع المسافة من أعلى الشاشة
|
|
background-position:
top right
|
هذه الصورة وضعت في أعلى يمين الصفحة
|
المثال أدناه يوضح كيفية وضع صورة الخلفية
في أعلى يمين الشاشة:
body {
background-color:
#FFCC66;
background-image:
url("butterfly.gif");
background-repeat:
no-repeat;
background-attachment:
fixed;
background-position: right bottom;
}
h1 {
color:
#990000;
background-color:
#FC9804;
}
جمع كل الخصائص "background"
الخاصية background هي اختصار لكل خصائص خلفية العناصر التي
قرأتها في هذا الدرس.
باستخدام background يمكنك جمع عدة خصائص وبالتالي تقليل عدد
الأسطر التي تكتبها في ملف التصميم وهذا يجعل الملف أسهل للقراءة.
فمثلاً يمكن اختصار هذه الأسطر:
background-color:
#FFCC66;
background-image:
url("butterfly.gif");
background-repeat:
no-repeat;
background-attachment:
fixed;
background-position:
right bottom;
باستخدام background يمكن تحقيق نفس النتيجة باستخدام سطر واحد فقط:
background:
#FFCC66 url("butterfly.gif") no-repeat fixed right bottom;
القائمة ترتب بهذا الشكل - من اليسار إلى
اليمين:
background-color | background-image | background-repeat | background-attachment |background-position
إذا لم تكتب خاصية ما سيقوم المتصفح بوضع
القيمة التلقائية لهذه الخاصية، فمثلاً لم نضع الخاصية background-attachment وbackground-position في المثال:
background: #FFCC66 url("butterfly.gif")
no-repeat;
الخاصيتين لم تحددا وسيقوم المتصفح بوضع
القيمة التلقائية لهما والقيم هي كما تعرف
scroll وtop left.
ملخص
في هذ الدرس تعلمت طرقاً جديدة لا يمكنك
تطبيقها باستخدام HTML فقط، المتعة تستمر في الدرس القادم والذي سنختبر فيه طيفاً
واسعاً من الإمكانيات عندما نستخدم
CSS لتحديد الخط
هدية مني قالب محترف ورائع
تحميل 1
تحميل 2
ليست هناك تعليقات :
إرسال تعليق