بسم الله الرحمن الرحيم
السلام عليكم ورحمه الله
فى هذا الجزء من سلسله شرح اساسيات html و css سوف نقوم بملئ الصفحه البسيطه التى قمنا بإنشائها فى الشرح السابق
حيث فى الشرح السابق لأساسيات html و css قمنا بكتابه كود صفحه انترنت بسيطه تحتوى على جمله واحده كانت : " لا اله الا الله . والحمد لله"
والان سوف نتعلم كيفيه اضافه المزيد من فقرات النصوص وكيفيه كتابه العناوين ...
وهناك شئ مهم اريد ان اوضحه قبل ان اكمل...
لا تخف من التجربه او افساد الكود او تخريب الصفحه
بدايه من الآن اذا اردت أن تجرب شيئا جديدا او خطرت لك فكره تريد تجربتها قم بذلك على الفور ثم اضغط على الأزرار CTRL و S فتكون قد حفظت ما قمت بعمله ..ثم توجه الى فولدر www واضغط على الملف الذى تعمل عليه وهو فى حالتنا هذه ملف first.html وقم بفتحه فى المتصفح لترى نتيجه التغيير او الإضافه التى قمت بها وفى حاله اذا كان الملف مفتوحا بالفعل ببرنامج متصفح الإنترن لديك يكفى لكى ترى التغييرات ان تقوم بالضغط على زر F5 فى اعلى الكيبورد .
فقط تأكد من انك قد قمت بأخذ نسخه من الملف الذى تعمل عليه فى مكان اخر آمن حتى اذا فسد الملف الحالى او أردت لاى سبب الرجوع الى الكود الأصلى قبل تنفيذ التغييرات الخاصه بك يمكنك الإستعانه بملف النسخه الإحتياطيه .
الان هيا بنا نقوم بالتعديل واضافه المزيد من النصوص الى صفحتنا :
توجه الى فولدر First_website وبداخله فولدر www كما انشأناه سويا فى الجزء الأول من الشرح وبداخل فولدر www تجد الملف first.html
هذا الملف الآن هو عباره عن صفحه ويب تعمل بشكل تلقائى على المتصفح اذا ضغطت عليها مرتين متتاليتين
ولكن نحن نريد التعديل عليها وليس عرضها وبالتالى قم بالضغط على الملف بالزر الأيسر للفأره واختار من القائمه open with ثم اختار برنامج النوت باد notepad
وسوف يظهر الكود الذى كتبناه فى الشرح رقم 2
إضافه عنوان
هناك مستويات مختلفه من حجم العناوين تتدرج من 1 الى 6
حيث رقم 1هو اكبرها فى حجم الخط وعرضه اما رقم 6 هو الأصغر فى حجم الخط
ولكى نضيف عنوان من النوع 1 نضع العنوان بين الوسمين التاليين :
<h1> </h1>
ولكى نضيف عنوان من النوع 4 مثلا نضع العنوان بين الوسمين التاليين :
<h4> </h4>
فإذا استخدمنا الكود التالى :
<h1> مرحبا بك فى صفحتى </h1>
نكون قد اضفنا عنوان ذو خط كبير وعريض الى صفحتنا ولكن..
هل تذكر اين سنضع هذا الكود فى الصفحه ؟
اذا كنت قرأت الشرح السابق جيدا فسوف تتذكر ان جميع محتويات الصفحه والتى تظهر للزائر توضع ما بين وسمي تاج جسم الصفحه <body> </body>
وبالتالى اى شئ نضعه فى الصفحه فى هذه المقاله سوف يكون ما بين هذين الوسمين بعد وسم البدايه <body> وقبل وسم النهايه <body/> اليس كذلك ؟
سؤال اخر
هل اضع كود العنوان :" <h1> مرحبا بك فى صفحتى </h1> " قبل ام بعد الكود: " <p>لا اله الا الله . والحمد لله</p> "
الإجابه بسيطه قم بنفسك كما اوضحنا فى بدايه الشرح بالتجربه ..
ضع كود العنوان قبل كود الجمله هكذا :
ثم اضغط على CTRL و S واعرض ملف first.html فى متصفح الإنترنت كما اوضحنا وشاهد النتيجه..<body>
<h1>مرحبا بك فى صفحتى الشخصيه</h1>
<p>لا اله الا الله . والحمد لله</p>
</body>
</html>
ثم ارجع الى برنامج النوت باد فى صفحه الكود قم بعكس الترتيب ليصبح الكود :
ثم اعد الكره واحفظ ثم شاهد النتيجه .. هل وجت اختلاف ؟<body>
<p>لا اله الا الله . والحمد لله</p><h1>مرحبا بك فى صفحتى الشخصيه</h1>
</body>
</html>
الفكره ان متصفح الإنترنت يقوم بقراءه الكود بالترتيب وبالتالى يعرض صفحه الإنترنت بنفس ترتيب الكود .
ولهذا يجب ان تكون الأكواد ما بين وسمي جسم الصفحه <body> </body> والتى تظهر للزوار مرتبه جيدا من اعلى الصفحه الى اسفلها ..
بينما لا يشترط الترتيب فى الاكواد التى تكون بين وسمى رأس الصفحه
<head> </head> لانها لا تكون ظاهره للزائر.
طيب .. الآن تعلمنا كيف نضيف عنوان كبير.. واين نضيف أكواد عناصر الصفحه التى تظهر للزائرين .. وكيف يكون ترتيب هذه الأكواد .
فى نهايه هذا الشرح اطرح عليك تمرين بسيط ..
الق نظره على الكود التالى :
<body>
<h1>لو كان ده جنان أتجـــــــــــــــــــــــنن </h1>
<p>
قـــــــــــرر أنك تخلص القران كله ف 3 أيام بس
فى غير رمضان حتى لو كنت من اللى مش بيقدروا
يختمـــــــوا القرأن أصلا فـ رمضان
.</p>
<p>
كل ما تكون مــروح البيت في عز الضهـر أشـــتري قزايز ميه معدنيه
أو أي حاجه ساقعه ووزعهـا على كل حـــــــد تصادفه شقيان في عز الضهر
( بذات عمال النظافه ) وقولـهم يديكــــــــم العافيه
.</p>
<h3>لو كان ده جنان أتجـــــــنن</h3>
<p> أشحــــــــن كرتيـــــــن تلاتــه وسميهم كروت صلة الرحم
وخلي 4 ساعات في الأسبوع تكلم فيهم كل قرايبك اللي مش
بتسأل عنهـم غير من السنة للسنة
ولو أستغربوا بتتصل ليه
قلهـم أنا بتصـل بربنـا
( أنا الرحمن الرحيم ، و إني شققت للرحم من أسمي ، فمن وصلها وصلته ) # حديـث قدسي
.</p>
<p> روح بوس رجل أمـــــــك بدون أي سبب
ولو أستغربت
وسألتك بتعمل أيـــــه ؟
قولها ببوس الجنـــــــــــه</p>
</body>
ثم قم بإضافه الكود الى اى صفحه من صفحات الـ html ( بالطبع بين وسمى جسم الصفحه <body> </body> ) ثم احفظ الصفحه وشاهدها فى المتصفح ..
هل كان توقعك لشكل الكود فى المتصفح صحيحا ؟ اذا كان توقعك للكود صحيحا فدعنى اهنئك ونلتقى معا فى الشرح التالى ان شاء الله
اذا لم تكن توقعت ما شاهدته على المتصفح ..شارك معى واطرح ماذا وجدت لنتناقش فيه سويا ..
والسلام عليكم ورحمه الله وبركاته
ليست هناك تعليقات:
إرسال تعليق