الفريق العربي للبرمجةأرشيف المنتديات · 2000 – 2023
نسخة أرشيفية للقراءة فقط — التسجيل والمشاركة مغلقان، والمحتوى محفوظ كما كان.

بدايتك من الصفر فى تصميم صفحات الويب 4

بدأه ahmedkamel في 5 سبتمبر 2011 · 1 رد · 1,028 مشاهدة · في منتدى تصميم صفحات الويب
مشاركة: واتساب X فيسبوك تيليجرام
#1 صاحب الموضوع

بسم الله الرحمن الرحيم

الحمد لله والصلاه والسلام على أشرف رسول بعث الى يوم الدين وبعد:

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

نتعرف اليوم بمشيئه الله على بعض الامور المهمه

الدرس الرابع:

ما هو الكود لعمل رابط نضغط عليه نوصل لصفحه أخرى؟؟؟

ده الكود

<a href='هنا هتكتب مسار الصفحه اللى انت عايز المستخدم يروح لها لما يضغط على الرابط'>

حمل المرفق التالىالرابط.rar

بعد ماحملته نبدأبشرحه وهو بسيط وسهل

المواقع عباره عن مجموعه من الصفحات متصله ببعضها البعض ففى المثال التالى قمت بعمل ملفين باسماء index.html و index0.html حتى يختلفا فى المسميات وقمت بوضع الكود التالى فى index.html


<html>
<head>
<title>
عنوانك
</title>
</head>
<body>

<center>
<font color='red' size='15' face='traditional arabic , verdana'>أضغط على الرابط أدناه</font><br>
<a href='index0.html'>أضغط هنا </a>
</center>




</body>
</html>

وكله تعرفه من الدروس السابقه عدا الكود الذى يخص الروابط فكود

<a></a>

يختص بالروابط وياخد href

يعنى المسار الذى يخص الصفحه المراد الذهاب لها

وانا كتبت

<a href='index0'></a>

فقط لاغير وقدد حددت مسار الصفحه المراد فتحها وفى الصفحه الاخرى كتبت الكود التالى


<html>
<head>
<title>
عنوانك
</title>
</head>
<body>

<center>
<font color='red' size='15' face='traditional arabic , verdana'>تم بنجاح الموصول للصفحه المطلوبه</font>
</center>





</body>
</html>

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

خلصنا الجزء بتاع الروابط

كده مش هنعرف نكمل تانى حاجه من غير ال css مبدئيا عشان هى هتوفر جهد كبير

نبدأ بشىء بسيط وهو تعريف الملف

الملف الخاص بcss هو المسئول بشكل كامل وأساسى عن الstyle او التنسيقات الخاصه بصفحة ال html

الملف أمتداه مش html او htm لا ده امتداده css

فمثلا ملف الاستايل هنسميه style.css

نبدأ بسرعه عشان ما نطولش

لما أجى اعمل ملف إستايل لصفحتى لازم كود يربط بين الصفحتين ال html و ال css الا وهو

<link rel='stylesheet' type='text/css' href='style/style.css'>

طيب الكود مش مفهوم نفككه حته حته

link :يعنى رابط

rel : حقيقته

type :نوعه

href: مساره

بس خلص كده ومتركزش فى المعانى لان السطر ده محفوظ يعنى مش هتغير غير فى المسار فقط لاغير

نعمل ملف بسرعه ونسميه style.css

نكتب جوه إيه؟

خد راحه وأعمل حاجه تشربها وكمل

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

عندنا لما نيجى نحب ننسق بملف السى اس اس بندى لاى حاجه فى ملف ال html حاجه من اتنين

id ,class

والاتنين كل واحده ليها نظام

id :بتاخد علامة (#)

class :بتاخد علامة(.)

طيب نطبق بقى

نفس الملف اللى فات بس هنضيف عليه ملف الاستايل الجديد وشوف الفرق

ملف تجريبى.rar

انا لم أفعل شىء سوى أننى بدلا من أن أكتب فى

< body bgcolor='lime'>

وسيكون على كتابتها فى الصفحتين او أكتر لو كان لدى ومن هنا تظهر مشكله التكرار فماذا على ان أفعل حيال ذلك قمت بربط الصفحتين index.html و index0.html عن طريق الكود التالى

<link rel='stylesheet' type='text/css' href='style.css'>

ويكتب بين


<title>
عنوانك
</title>
<link rel='stylesheet' type='text/css' href='style.css'>
</head>
<head>

وبالطريقه دى تكون ظبط الملفات عشان تستقبل على طول

دخلت فى ملف ال css

وكتبت الكود التالى:


body {background-color:lime;}

ونفسره واحده واحده

body :جسم الصفحه العادى ولأن مفيش غيره لم أعطه class or id

فتحنا قوسين {}

كتبنا جواهم background-color: يعنى لون الخلفيه

فى كمان background-image:ودى لو عايز الخلفيه صوره

حاول تغير وتجرب بنفسك

عندنا بدل علامه (=) كتبنا":"ودى ثابته فى ال css

وكمان بعد ما كتبنا اللون lime

عملنا علامه ";"

دى ببساطه كيفية كتابة كود فى ملف استايل css وكيفيه ربطلها ب html

الدرس القادم أن شاء الله ناخد مشروع كامل ونشرحه أشياء أخرى ونتعمق فى الcss

إذا أعجبك الموضوع برجاء التقييم

وصلى اللهم وسلم على سيدنا محمد وعلى اله وصحبه وسلم

تم تعديل هذه المشاركة بواسطة ahmedkamel في 6 سبتمبر 2011 في 06:08

أذكر الله أخى المسلم

#2

شـــــــــكراً جزيلاً باركـ الله فيكـ

مواضيع مشابهة