عضو مميز
طلب:ممكن دروس html ???????????
هاي يا شباب انا بدأت اتعلم لغه html عندي كتاب منها بس لما خلصته حسيت انه بدائي شويه فلو ممكن
حد يكون عنده كتاب شديد يكون نفعني كتير
وكان عندي سؤال تاني ...
طيب لما اخلص اموقع في البيت واكتب كل الاوامر في النوت باد
ازاي ارفعه لموقعي الشخصي علي النت
؟؟؟؟؟؟؟
شكرا للاستماع
مستني ردكم
أحمد محمد
سمسمة
متهيئلى ابن البلد فاتح منتدى للبتاع اللى انت بتقول عليه دة
بس مش عارفة فين
>>>>>
عضو مميز
ماانا عارفه
www.html4arab.com
بس في الاعاده افاده
وكتر الكوم ولا شماته الاعدي
شكرا علي الاهتمام
أحمد محمد
عضو مميز
[frame="7 80"]بص الدرس ده
في هذه المرحلة من الدروس سوف نتعلم درس مهم جدا وممتع ألا وهو كيفية إضافة وإدراج أنواع من الخطوط وبأحجام مختلفة.
والآن سوف تجد كل نوع من الخطوط مع الأمر الذي يجب ان تكتبه له .
وإذا حاز أي نوع من الخطوط على إعجابك فكل ما عليك هو حفظ الامر أو نسخه لتستعمله في موقعك الخاص بك.
--------------------------------------------------------------------------------
لكي تظهر لك العبارة في الوسط
كما في المثال التالي
هنا سوف اتعلم كيفية إدراج الخطوط
اكتب الأمر التالي
<center>هنا سوف اتعلم كيفية إدراج الخطوط</center>
--------------------------------------------------------------------------------
ولكي يظهر لك ذلك
هنا سوف اتعلم كيفية إدراج الخطوط
اكتب الامر التالي
<i>هنا سوف اتعلم كيفية إدراج الخطوط</i>
وهكذا سوف تجد كل مثال مع الأمر المطلوب له
هنا سوف اتعلم كيفية إدراج الخطوط
<b>هنا سوف اتعلم كيفية إدراج الخطوط</b>
هنا سوف اتعلم كيفية إدراج الخطوط
<strike>هنا سوف اتعلم كيفية إدراج الخطوط</strike>
هنا سوف اتعلم كيفية إدراج الخطوط
<u> هنا سوف اتعلم كيفية إدراج الخطوط</u>
--------------------------------------------------------------------------------
والآن ماذا عن حجم خط العناوين.....؟؟؟الأمر بغاية السهولة ستجد الآن أنواع الأحجام مع الأمر الذي تكتبه له...واختر الذي يعجبك
<h1>هذا الحجم رقم واحد</h1>
<h2>هذا الحجم رقم اثنين</h2>
<h3>هذا الحجم رقم ثلاثة</h3>
<h4>هذا الحجم رقم أربعة</h4>
<h5>هذا الحجم رقم خمسة</h5>
<h6>هذا الحجم رقم ستة</h6>
--------------------------------------------------------------------------------
وتوجد أيضا طريقة للتحكم في حجم الخط
فأنت تستطيع كتابة حجم الخط ما بين رقم واحد إلى الرقم سبعة
بهذا الأمر
<font size=5>
------
------
العبارة
-----
</font>
وسوف ترى بنفسك ماذا اقصد بهذه الأرقام ، من خلال الأمثلة التالية
<font size=1>موسوعة الكمبيوتر والانترنت العربية</font>
<font size=2>موسوعة الكمبيوتر والانترنت العربية</font>
<font size=3>موسوعة الكمبيوتر والانترنت العربية</font>
<font size=4>موسوعة الكمبيوتر والانترنت العربية</font>
<font size=5>موسوعة الكمبيوتر والانترنت العربية</font>
تركت لك الحجم رقم ستة وسبعة لكي تجربهما بنفسك
وهنالك طريقة أخرى وهي باستخدام اشارة الجمع أو الطرح بهذه الطريقة
وهي تصغير او تكبير الخط عدة درجات بحسب الدرجة التي تريدها، وطبعا اختيار الدرجات يتم ما بين الرقم واحد إلى الرقم سته
كما في المثال التالي
<font size="+2"> كبرت الحجم بمقدار درجتين</font>
<font size="-2">صغرت الحجم بمقدار درجتين</font>
وهكذا حاول أن تجرب جميع الدرجات لتكتشف بنفسك كيفية عملها.
وبعد أن تعلمت كيفية التحكم بحجم الخط ، لا بد منك أن تتعلم كيفية تعيين نمط الخط الذي يعجبك، ومن الأفضل دائما ان تعين ثلاثة خطوط على الأقل ، وذلك لكي إذا وجد المتصفح صعوبة في إيجاد الخط الأول فهو ينتقل الى الخط الثاني وهكذا
ويتم ذلك من خلال هذا الأمر .
<font face="Traditional Arabic, Arabic Transparent, Simplified Arabic">
--------
-------
العبارات
-------
------
</font>
--------------------------------------------------------------------------------
يا ترى ما هي الفكرة التي أخذتها من الدرس السابق التي كانت عبارة عن دردشة خفيفة في الهتمل؟
اتمنى بالفعل أن تكون قد نويت استكمال تعلم الهتمل ، والآن هيا بنا الآن لنشرح بطريقة عملية في الهتمل.
ما هو التركيب الأساسي لأي ملف في الهتمل؟
حينما تفتح المفكرة لكي تكتب فيها ، لا بد من أساس تطبق عليه كل الرموز، الأساس هو كالتالي:
<html>
<head>
<title>
هنا يكتب العنوان الذي سوف يظهر في شريط المتصفح
</title>
</head>
<body>
--------
--------
هنا نكتب كل ما نريد ادراجه في صفحات الموقع من صور ومواضيع
--------
--------
</body>
</html>
--------------------------------------------------------------------------------
والان إليك هذا المثال البسيط :
<html>
<head>
<title>
صفحتي الأولى
</title>
</head>
<body>
ما زلت حتى الان اتعلم الدرس الأول
</body>
</html>
--------------------------------------------------------------------------------
وهكذا اصبحت الآن قادرا على كتابة أساسيات الهتمل ...فما رأيك لو تطبق هذا المثال وشاهد بنفسك كيف يتكون كصفحة بسيطة تكون بداية لتعلمك تصميم المواقع
والان ما هو الشيء الذي لم تتعلمه في الاساسيات؟؟؟
إنها الفراغات وترك الاسطر، فلغة الهتمل لا تهتم بعدد الاسطر الفارغة التي تركتها ولا بعدد المسافات بين الكلمات ، فإذا كنت ترغب بترك سطر فهنالك وسم معين له ، وكذلك للفراغات .
--------------------------------------------------------------------------------
<br>
يستخدم هذا الوسم لنهاية السطر والبدء بسطر جديد
<p>
يقوم هذا الوسم بنفس عمل الوسم السابق الا انه يترك سطر فارغ بين الفقرات
يقوم هذا الوسم بترك فراغ بين الكلمات ، وهو يمثل فراغ واحد وهكذا كلما كتبت هذا الوسم يترك فراغ واحد ولكن بالطبع فإنه ليس من الضروري كتابته بين كل كلمة وكلمة ، فتلقائيا سوف يترك فراغ بين الكلمات للتفريق بينها..ولكن هذا الوسم يستخدم اذا كنا نريد اكثر من فراغ واحد بين الكلمات
--------------------------------------------------------------------------------
والان إليك هذا المثال الذي سوف يوضح تلك الوسوم الثلاث التي تعلمتها الآن
<html>
<head>
<title>
صفحتي الأولى
</title>
</head>
<body>
تعملت الان كيفية ترك فراغات وسوف اترك اربعة فراغات باستخدام الامر التالي
والان سوف انتقل الى سطر جديد مع ترك سطر فارغ بهذا الامر
<p>
والان سوف انتقل الى سطر جديد بدون ترك سطر فارغ
وهكذا تعلمت تلك الوسوم الثلاث بكل سهولة
</body>
</html>
--------------------------------------------------------------------------------
والان ما رأيك ان تطبق المثال السابق وترى بنفسك كيف سوف يظهر في متصفحك .
يا ترى ما الذي تريد تعلمه من هذا الدرس؟
بالطبع عرفت ماذا سوف تتعلم من عنوان الدرس .
إنها الألوان وكيفية إدراجها كخلفية او كلون للعبارات أو العناوين في صفحات الانترنت .
في البداية هيا نتعلم كيفية إضافة لون كخلفية
وهذا يأتي من خلال الأمر التالي :
<body bgcolor=#ffffff>
-------
-------
</body>
ولقد استخدمت أنا اللون الأبيض وذلك من خلال الرمز ffffff كخلفية وهذا يأتي من الأمر السابق.
وهكذا تستطيع اختيار لون الخلفية الذي يناسبك وتستبدله بذلك اللون الذي انا اخترته مسبقا.
ولكن تذكر دائما بأن تضع إشارة # قبل الرمز الذي اخترته لكي يتعرف المتصفح على اللون.
إذن الآن تعلمت لون الخلفية فيا ترى ماذا عن لون العبارات والفقرات .
انظر معي إلى هذا الأمر:
<font color=#123123>
------
------
</font>
لقد تعاملنا مسبقا مع الرمز font ولكن هذه المرة أدخلنا كلمة color وهكذا اختر اللون الذي يعجبك وسوف ترى النتيجة بنفسك عند استخدامك لها .
وبالطبع لك الحق في أن تتسائل عن هذه الرموز ومن أين تأتي بها...، وأعدك خلال هذه الأيام سوف أقوم بوضع جدول يحتوي على ألوان متعددة ورموزها...لايفوتني أن أذكر أنه يمكن الإتعاض عن وضع هذه الأرقام بالنسبة للألوان المشهورة كالأبيض أو الأسود أو حتى الأزرق بمجرد وضع إسم اللون باللغة الإنجليزية بدل هذه الأرقام .
الصورة
والآن وصلنا معا إلى هذا الدرس المفيد جدا .....فهنا سوف تتعلم معنا كيفية إضافة الصور الى موقعك
وهنالك وسم معين لإضافة الصور ألا وهو
<IMG>
مع الخاصية
SRC
والآن هيا معا إلى التطبيق........نفترض بأن لديك صورة قد اسميتها
image1
فكيف تستطيع إدراجها في موقعك؟؟؟
حسنا فلنكتب الأمر معا
سيكون بهذه الطريقة
<IMG SRC="image1.jpg">
--------------------------------------------------------------------------------
ثانيا: التحكم في عرض وطول الصورة
وهكذا استطعت معرفة كيفية إضافة الصور....ولكن بعد إضافتها ربما لم يعجبك عرض وطول الصورة
لذلك سوف نتعلم الان كيفية تغيير عرض وطول الصورة ولن يكلفنا هذا تعلم وسم جديد....بل سوف نستخدم الوسم الذي تعلمته منذ قليل مع خصائص جديدة وهذه الخصائص هي
HEIGHT , WIDTH
سوف اذكر لك مثالا الآن لتتعلم كيفية استخدام تلك الخصائص
<IMG SRC="image1.jpg" HEIGHT="200" WIDTH="300">
--------------------------------------------------------------------------------
ثالثا: كتابة نص بديل عن الصورة
ربما قد تلاحظ حينما تتصفح موقعا بأن تحميل الصور بعض الاحيان يكون بطيئا وقبل ظهور الصورة يكون هنالك نصا مكتوبا في مكان الصورة
فيا ترى كيف ظهر ذلك النص؟؟
الأمر في غاية السهولة ، فقط يلزمك استخدام خاصية جديدة في نفس الوسم السابق
وهذه الخاصية تسمى
ALT
نفترض انك تريد اضافة الجملة التالية لتكون خلف الصورة ليراها كل من تحميله للصور بطيء او ان اتصاله يكون بدون صور
وهذه الجملة هي: صورة للموسوعة العربية للكمبيوتر والانترنت
لذلك كل ما علينا فعله هو كتابة التالي
<IMG SRC="image1.jpg" ALT="صورة للموسوعة العربية للكمبيوتر والانترنت ">
--------------------------------------------------------------------------------
رابعا: إضافة إطار للصورة
في بعض الأحيان تحتاج إلى إضافة إطار للصور التي تضيفها للموقع.....ربما لكي تكون كوصلة تشعبية لصفحة أخرى....أو لكي يستدل الزائر على بريدك...أو حتى لمجرد تحسين مظهر الصورة
وهكذا سوف نتعلم معا خاصية جديدة تستعملها أيضا مع نفس الوسم السابق ألا وهي
BORDER
وتستطيع تحديد سمك الإطار حسب رغبتك
وسوف أذكر لك مثالا يوضح كلامي والقيم التي تضيفها هي قيم بالبيكسل
<IMG SRC="image1.jpg" BORDER="4">
مرحبا بكم في هذا الدرس الرائع .....الذي به الكثير من المتعة لأنكم سوف تتعلمون هنا كيفية كتابة النصوص المتحركة والتحكم بحركتها!!
--------------------------------------------------------------------------------
فللننطلق مباشرة الى موضوع الدرس.
ما رأيك بهذا المثال؟
أعجبتني دروس الهتمل
إذن هو عبارةعن نص متحرك...والنص المتحرك ...له رمز معين في الهتمل الا وهو:
<marquee>...النص...</marquee>
الآن بعد أن عرفت القاعدة الأساسية لتحريك أي نص ، ننتقل الآن الى معرفة خصائص هذا الرمز وذلك لكي نستطيع اضافة المزيد من التحكم به مثلا اتجاهه او لونه وغير ذلك.
اتجاه الحركة:
<marquee direction=#> #=right , left
والآن سوف لن أطيل الحديث كثيرا ...لأني وضعت لك عدة أمثلة مع الرمز المستخدم لعملها.....لذلك كل ما عليك هو رؤية الرمز والتدقيق فيه والمقارنة بينه وبين الأمثلة الأخرى لكي تعرف الفرق بينها.
لا تهجروا القرآن
<marquee direction=right>لا تهجروا القرآن</marquee>
خيركم من تعلم القرآن وعلمه
<marquee direction=left>خيركم من تعلم القرآن وعلمه</marquee>
--------------------------------------------------------------------------------
<marquee behavior=#> #scrol,slide,alternate.
وتزودوا فإن خير الزاد التقوى
<marquee behavior=scrol>وتزودوا فإن خير الزاد التقوى</marquee>
الحرص على طاعة الوالدين
<marquee behavior=slide>الحرص على طاعة الوالدين</marquee>
رحمة الحيوان تثمر لك المغفرة والرحمة
<marquee behavior=alternate>رحمة الحيوان تثمر لك المغفرة والرحمة</marquee>
--------------------------------------------------------------------------------
عليك الوفاء بالعهد وإنجاز الوعد
<marquee loop=2 width=50% behavior=scroll>عليك الوفاء بالعهد وإنجاز الوعد</marquee>
لا تغضب ولك الجنة
<marquee loop=9 width=50% behavior=slide>لا تغضب ولك الجنة</marquee>
لا تنسى شكر الله على نعمه
<marquee loop=1 width=50% behavior=alternate>لا تنسى شكر الله على نعمه</marquee>
--------------------------------------------------------------------------------
أكثر من الدعاء في الرخاء
<marquee scrollamount=50>أكثر من الدعاء في الرخاء</marquee>
والآن بعد أن تعلمت تلك الرموز للتحكم في النصوص المتحرك ، ألا تود إضافة المزيد من التنسيق في النص المتحركة .....إذا كنت تود معرفة المزيد...
فهنالك أمرين أود أن تتعلمهما هنا في الدرس ، الا وهما كيفية تنسيق خلفية للنص المتحرك مع التحكم في حجم الخلفية التي سوف تعرض فيها النص المتحرك...وهما:
<marquee bgcolor=lime>لا تنسى مساعدة أخوانك وأخواتك</marquee>
وهنا أضفنا خاصية تعيين لون للخلفية وهذا الأمر تعلمناه سابقا في درس اضافة الألوان .....ونستطيع تطبيقه هنا وبالطبع تستطيع وضع أي لون تريده والأمر السابق سوف يظهر لك بالشكل التالي:
لا تنسى مساعدة أخوانك وأخواتك
والأن نود التحكم في ارتفاع وعرض الخلفية التي سوف نعرض فيها النص المتحرك ...سوف اكتب لك المثال التالي ولقد اخترت قياسات محددة وتستطيع وضع قياسات أخرى .....فقط جرب دائما لتعرف الفرق.
<marquee height=70 width=50% bgcolor=aaaeea>أمي هي نبع حنان...أمي هبة الرحمن</marquee>
أمي هي نبع حنان...أمي هبة الرحمن[/frame]
وحشتوووووووووووووووووووووووني
عضو مميز
الاخ الغالي سناك
شكرا علي الدرس الرائع ده
بس المشكله ان بحر اللغه دي لا ينضب
علشان كده لازم المتابعه والاستمرار
شكرا علي الاهتمام بس كنت افضل يكون كتاب كانل يكون احسن
بس ده لا يؤثر علي خالص شكري لك
أحمد محمد
ضوابط المشاركة
رد مع اقتباس
المفضلات