Advanced Search

المحرر موضوع: أساسيات في لغة html  (زيارة 10014 مرات)

0 الأعضاء و 1 ضيف يشاهدون هذا الموضوع.

ديسمبر 09, 2004, 09:57:28 مساءاً
رد #60

السفير

  • عضو خبير

  • *****

  • 7214
    مشاركة

    • مشاهدة الملف الشخصي
أساسيات في لغة html
« رد #60 في: ديسمبر 09, 2004, 09:57:28 مساءاً »
=== مثال 5 ===

صنع زر في مستند html وهو بسيط جدا :

الكود :

نموذج كود
<html>
<body>

<form>
<input type="button" value="تفضل بالدخول هنا">
</form>
 
</body>
</html>


ويظهر في المتصفح كما هو مبين بالصورة المرفقة ..

للتطبيق :

صنع زر

ديسمبر 09, 2004, 10:05:09 مساءاً
رد #61

السفير

  • عضو خبير

  • *****

  • 7214
    مشاركة

    • مشاهدة الملف الشخصي
أساسيات في لغة html
« رد #61 في: ديسمبر 09, 2004, 10:05:09 مساءاً »
السلام عليكم

وأترك لكم أعزائي المزيد من الأمثلة لتطبقوها :

1.  نموذج لارسال بريد الكتروني

2. مثال لصنع نموذج مع زر الادخال submit

3. نموذج اختيار خيار من قائمة

4. نموذج لمعطيات مع اطار


تحياتي وبالتوفيق .

في الردود القادمة نتعلم , ان شاء الله , الصور في ال html ..

'<img'> '<img'>

ديسمبر 10, 2004, 01:59:20 صباحاً
رد #62

السفير

  • عضو خبير

  • *****

  • 7214
    مشاركة

    • مشاهدة الملف الشخصي
أساسيات في لغة html
« رد #62 في: ديسمبر 10, 2004, 01:59:20 صباحاً »
السلام عليكم

ننتقل الى الموضوع التالي :

الصور images

في الردود السابقة رأينا ما هو وسم اضافة صورة وأيضا كيف نضيف صورة بحيث

تؤدي لرابط .. هنا سنتعلم المزيد من الأمثلة بحيث نتعرف على الصور أكثر :

=== مثال 1 ===

اضافة صورة عادية وأخرى متحركة :

الكود :

نموذج كود
<html>
<body>

<p>
صورة
<img src="http://www.w3schools.com/html/constr4.gif"
width="144" height="50">
</p>

<p>
صورة متحركة
<img src="http://www.w3schools.com/html/hackanm.gif"
width="48" height="48">
</p>

<p>
لا يوجد فرق بين وسم الصورة المتحركة وبين الصورة غير المتحركة
</p>

</body>
</html>



النتيجة تظهر في الصورة المرفقة ..

وللتطبيق :

هنا




ديسمبر 10, 2004, 02:11:54 صباحاً
رد #63

السفير

  • عضو خبير

  • *****

  • 7214
    مشاركة

    • مشاهدة الملف الشخصي
أساسيات في لغة html
« رد #63 في: ديسمبر 10, 2004, 02:11:54 صباحاً »
=== مثال 2 ===

في هذا المثال نضع صورة كخلفية للصفحة كلها :

الكود :

نموذج كود

<html>
<body background="http://www.moveed.com/data/media/113/__2.jpg">

<h3>استخدمنا صورة كخلفية للصفحة</h3>

<p>jpg,gif يمكن استخدام كلا الامتدادين</p>

<p>اذا كانت الصورة أصغر من الصفحة , فإنها ستعيد على نفسها <p>
</body>
</html>



النتيجة تظهر في الصورة المرفقة ..

وللتطبيق :

هنا

ديسمبر 10, 2004, 02:18:25 صباحاً
رد #64

السفير

  • عضو خبير

  • *****

  • 7214
    مشاركة

    • مشاهدة الملف الشخصي
أساسيات في لغة html
« رد #64 في: ديسمبر 10, 2004, 02:18:25 صباحاً »
السلام عليكم

وإليكم هذه الأمثلة للتطبيق :

1. وضع الصورة في أماكن مختلفة من الصفحة

2. أحجام مختلفة للصورة



بالتوفيق

تبقى لنا موضوع واحد كي ننهي الأساسيات ألا وهو الخلفيات .

وبعد أن ننهي الأساسيات إن شاء الله , هنالك اختبار بسيط  '<img'> , لنختبر مدى فهمنا للمادة .. سأضعه بعد الانتهاء

من الموضوع بإذن الله .

تحياتي

يتبع ..

ديسمبر 14, 2004, 03:24:06 مساءاً
رد #65

السفير

  • عضو خبير

  • *****

  • 7214
    مشاركة

    • مشاهدة الملف الشخصي
أساسيات في لغة html
« رد #65 في: ديسمبر 14, 2004, 03:24:06 مساءاً »
السلام عليكم ورحمة الله وبركاته

ومع الفصل الأخير من أساسيات html :

الخلفيات backgrounds

في كثير من أمثلتنا السابقة , غيرنا خلفية الصفحة لألوان أخرى ..

وسم الخلفية :

نموذج كود
<body bgcolor="#000000">
<body bgcolor="rgb(0,0,0)">
<body bgcolor="black">


كي ندخل لون الخلفية نستخدم 3 وسائل للتعبير كما نرى في المثال أعلاه :

1. أرقام من نظام العد ال 16  أي المكون من الأرقام  من 1-9 والحروف a ,b,c,d,e,f

2. قيمة rgb أي  red,green,blue وهي الألوان التي تتكون منها الألوان الأخرى .

3. اسم اللون .

* من الممكن أن تكون الخلفية عبارة عن صورة , كما رأينا في الفصل السابق :


نموذج كود
<body background="clouds.gif">


* حين إضافة صورة كخلفية , أو لون للخلفية علينا مراعاة تلائم الألوان مع النص , وتوافقها مع

بعضها البعض .

وهنا 3 قوائم بأنواع الألوان الثلاثة والتي سنختار منها ألوان خلفيات صفحات

الانترنت أثناء تصميمها :

الألوان حسب الإسم

حسب نظام ال 16

حسب نظام rgb


أمثلة :


=== مثال 1 ===

خلفية رمادية اللون :

نموذج كود
<html>
<body bgcolor="#d0d0d0">

<p>
لون الخلفية رمادي
<P>
<p> لون النص أسود <P>

</body>
</html>


وتظهر في المتصفح كما هو مبين بالصورة المرفقة ..

للتطبيق :

إضغط هنا


مثالان آخران للخلفيات :

خلفية 1

خلفية 2

ديسمبر 14, 2004, 03:27:06 مساءاً
رد #66

السفير

  • عضو خبير

  • *****

  • 7214
    مشاركة

    • مشاهدة الملف الشخصي
أساسيات في لغة html
« رد #66 في: ديسمبر 14, 2004, 03:27:06 مساءاً »
بهذا اخوتي الأعزاء ننتهي من أساسيات html  بحمد الله تعالى .

وهنا صفحة تحوي أمثلة للتطبيق في جميع الفصول التي تعلمناها :

تفضلوا

ولمن  يرغب بالدخول لهذه اللغة أكثر , والتمكن منها أكثر , فها هو الموقع الذي تعلمنا منه :

http://www.w3schools.com/html/html_www.asp

ونختتم هذا الموضوع بالإختبار من نفس الموقع , وهو مكون من 20 سؤالاً , إعتبروا

أن لكل سؤال منها 5 درجات , وبعد أن تنتهوا من الاجابات , قيّموا أنفسكم من 100 :

الإختـــــبار

ديسمبر 14, 2004, 03:30:46 مساءاً
رد #67

السفير

  • عضو خبير

  • *****

  • 7214
    مشاركة

    • مشاهدة الملف الشخصي
أساسيات في لغة html
« رد #67 في: ديسمبر 14, 2004, 03:30:46 مساءاً »
السلام عليكم

أذكر - أعزائي - بالبرنامج الموجود في هذا الموضوع :

http://olom.f2web.net/ib3....t=17117

وهو يساعد على بناء المواقع بواسطة ال html خطوة خطوة .

ديسمبر 14, 2004, 03:34:16 مساءاً
رد #68

السفير

  • عضو خبير

  • *****

  • 7214
    مشاركة

    • مشاهدة الملف الشخصي
أساسيات في لغة html
« رد #68 في: ديسمبر 14, 2004, 03:34:16 مساءاً »
السلام عليكم

قمتُ بتلخيص هذا الموضوع على صفحة في الانترنت , أرجو أن تفيد :




تحيااااتي للجميع


ديسمبر 14, 2004, 08:57:18 مساءاً
رد #69

الأحيائي الصغير

  • عضو خبير

  • *****

  • 6258
    مشاركة

  • مشرف علوم الأرض

    • مشاهدة الملف الشخصي
أساسيات في لغة html
« رد #69 في: ديسمبر 14, 2004, 08:57:18 مساءاً »
بارك الله فيك أخي العزيز "" السفير ""

و دمت بألف ألف عافية أخي الحبيب


 '<img'>
اللهم أنت الله الذي لا إله إلا أنت الأول فليس قبلك شيء و الآخر فليس بعدك شيء و الظاهر فليس فوقك شيء و الباطن فليس دونك شيء أسألك اللهم بأسمائك الحسنى و صفاتك العليا و باسمك الأعظم الذي إذا دعيت به أجبت و إذا سئلت به أعطيت أن تنتقم لنبينا و حبيبنا محمد عليه أفضل الصلاة و أتم التسليم من كل من أرد به و بدينه و بالمسلمين السوء إنك يا مولنا على كل شيء قدير

ديسمبر 14, 2004, 11:15:56 مساءاً
رد #70

السفير

  • عضو خبير

  • *****

  • 7214
    مشاركة

    • مشاهدة الملف الشخصي
أساسيات في لغة html
« رد #70 في: ديسمبر 14, 2004, 11:15:56 مساءاً »
السلام عليكم

الله يعافيك ويبارك فيك أخي العزيز

تحياتي

ديسمبر 14, 2004, 11:53:08 مساءاً
رد #71

ابو يوسف

  • عضو خبير

  • *****

  • 10867
    مشاركة

  • مشرف اداري

    • مشاهدة الملف الشخصي
أساسيات في لغة html
« رد #71 في: ديسمبر 14, 2004, 11:53:08 مساءاً »
السلام عليكم

اخي الكريم السفير

جزاك الله كل خير

شكرا جزيلا لك

'<img'>

ديسمبر 15, 2004, 06:51:11 صباحاً
رد #72

السفير

  • عضو خبير

  • *****

  • 7214
    مشاركة

    • مشاهدة الملف الشخصي
أساسيات في لغة html
« رد #72 في: ديسمبر 15, 2004, 06:51:11 صباحاً »
السلام عليكم

مشكور عزيزي أبو يوسف

تحياتي

ديسمبر 15, 2004, 07:22:20 صباحاً
رد #73

التواق للمعرفة

  • عضو خبير

  • *****

  • 2342
    مشاركة

    • مشاهدة الملف الشخصي
أساسيات في لغة html
« رد #73 في: ديسمبر 15, 2004, 07:22:20 صباحاً »
السلام عليكم ورحمة الله وبركاته
الأخ العزيز السفير
شكرا جزيلا لك على الدروس القيّمة وعلى الموقع الممتاز
جهد مبارك ان شاء الله
جزاك الله كل خير



يناير 27, 2005, 03:17:22 صباحاً
رد #74

السفير

  • عضو خبير

  • *****

  • 7214
    مشاركة

    • مشاهدة الملف الشخصي
أساسيات في لغة html
« رد #74 في: يناير 27, 2005, 03:17:22 صباحاً »
السلام عليكم

شكرا لك أخي التواق للمعرفة