Css في رمضان - اليوم 2

**م أمين** · 02-08-2011, 10:24 PM

اليوم الثاني

السلام عليكم ورحمة الله وبركاته،

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

قبل الإنطلاق في الدروس أردت أن أخصص اليوم لمراجعة بسيطة لأساسيات لغة HTML فهي ضرورية جدا و سنحتاجها في الدروس المقبلة بإذن الله

هذا شكل صفحة HTML بأبسط ما يمكن أن تكون عليه

كود PHP: .: أنقر هنا لتحديد الكل :.


 <html>

  <head>
  <title>الصفحة الأولى</title>
  </head>
  <body>
  مرحبا
</body>
  </html>

سنفسر الكود السابق بعد قليل

أهم ما في الأمر أنّ هناك وسوم او نسميها tags أفضل، و تبدأ بهذا الشكل <tag> و تنتهي بهذا الشكل </tag>، واضح؟

كل وسم نفتحه يجب أن يغلق فيما بعد.

أقسام صفحة HTML

Head او الرأس

: و به نضع الكود الخاص بإستيراد الاشياء الخارجية مثلا ملفات CSS أو جافاسكريبت، و الأشياء التي يحتويها لا تظهر على المتصفح بإستثناء العنوان Title و أيقونة favicon لو كانت مستعملة.
القسم Body و هو جسم الصفحة و كل ما في داخله يأتي يظهر على المتصفح.
الشكل التالي يوضح الفكرة جيدا :

الاســـم: fig2.png
المشاهدات: 570
الحجـــم: 17.7 كيلوبايت

نعود الآن لنشرح الكود الذي كتبناه في الأعلى

بما أنها صفحة HTML فنضع الوسم <html> في البداية و نغلقه بـ </html> في النهاية ليعرف المتصفح ان ما بداخل الصفحة هو كود HTML.

الآن بداخل الوسم html فتحنا وسم head و وضعنا داخله وسم title لإعطاء عنوان للصفحة، العنوان هو ما يكتب داخل الوسم title، في هذه الحالة العنوان هو الصفحة الاولى.

بعدها أغلقنا وسم title بواسطة </title> ثم أغلفنا وسم head بواسطة </head>.

ملاحظة الوسم title يجب ان يكون في قسم head من الصفحة.

الآن وصلنا للقسم body، كالعادة نفتحه بـ <body> و نغلقه ب </body> و محتوى الصفحة يجب أن يكون بداخل هذا الوسم، في هذه الحالة المحتوى هو كلمة مرحبا.

أعتقد أن اساس HTML واضح الآن، نفتح وسم و نضع محتوى بداخله ثم نغلقه.
هذه مجموعة وسوم تستعمل للمحتوى، أي نضعها في جسم الصفحة Body، و إستعمالها يكون بهذه الطريقة :<tag>أي نص تريده</tag>

كود PHP: .: أنقر هنا لتحديد الكل :.


<p>عندما تكتب فقرة فعليك وضعها داخل وسم مثل هذا،</p>

 <b>نض عريض</b>

 <i>نص مائل</i>
 <h1>عنوان كبير</h1>
 <h2>عنوان كبير لكن أقل من الاول</h2>

...إلى غاية <h6>، و نستعمل عادة h1 للعناوين الكبيرة في الصفحة و h2,h3,h4... لعناوين الاصغر فالاصغر...

وقفة قصيرة: أدنى أهلِ الجنةِ مَنزِلةً!عد سريعا

الروابط:

كود PHP: .: أنقر هنا لتحديد الكل :.


<a href='http://www.linuxac.org'>هذا وسم لوصلة أو رابط كما يسميه البعض</a>

و نتيجته هي هذه
هذا وسم لوصلة أو رابط كما يسميه البعض

لاحظ انه يحتاج لخاصية إسمها href و بها نضع الرابط، في هذه الحالة كان الرابط موقعنا هذا.

الصور:

كود PHP: .: أنقر هنا لتحديد الكل :.


<img src= 'logo.png'>

هذا الوسم لوضع صورة حيث نضع رابط الصورة في الخاصية src ،و هو لا يحتاج لغلق.

كما أن هناك وسوم أخرى تكتب بجزء واحد فقط و لا تحتاج لجزء ثاني حتى نغلقها، مثل وسم <br/> و هو يستعمل للعودة للسطر الجديد.

مثلا الكود

كود PHP: .: أنقر هنا لتحديد الكل :.


سبحان الله و بحمده<br/>سبحان الله العظيم

يعطي هذه النتيجة :

سبحان الله و بحمده

سبحان الله العظيم

وسم ul لعمل القوائم
ويستعمل هكذا :

كود PHP: .: أنقر هنا لتحديد الكل :.


<ul>

 <li>سبحان الله</li>

 <li>الحمد لله</li>

 <li>الله أكبر</li>

 <li>لا إله إلا الله</li>

 </ul>

هذا الوسم هو ul و معناه فائمة غير مرقّمة أو unordered list.

وتكون نتيجته هكذا

سبحان الله
الحمد لله
الله أكبر
لا إله إلا الله

لاحظ انه يحتوي وسم آخر بداخله و هو وسم li (معناه عنصر من القائمة أو list item)

كما يوجد وسم ol يستعمل بنقس الطريقة و تكون القائمة به مرقمة بالأرقام هكذا