مشاهدة النسخة كاملة : كل ما يختص عن الإتش أم أل HTML
alsultan
10 Jul 2002, 06:35 PM
مقدمة
يا هلا ومرحبا بكل من أراد تعلم لغة الهتمل
يا ترى ما هو السؤال الذي يراودك الآن؟؟؟؟
وبأي نقطة تود أن أبدأ بالشرح؟؟
مهلا قبل أن تطرح أي سؤال ، وقبل أن تمر على كل الدروس ، ما هو معنى كلمة HTML؟
من الطبيعي أن تعرف معناها ما دمت نويت تعلم هذه اللغة الرائعة السهلة .
إن كلمة HTML هي اختصار لـ Hyper Text Markup Language
ولغة الهتمل ليست كما تراها الآن أمام الشاشة ، بل هي عبارة عن رموزTags<> ، ويوجد لكل رمز عمل معين يقوم به ليؤدي وظيفة ما .
فمثلا تخيل معي ، بيت يتكون من عشرين غرفة ، ولكل غرفة باب خاص به ، وهذا الباب بالطبع له مفتاح لا يشابه اي مفتاح في أي غرفة أخرى ، لذلك فمثلا المفتاح رقم واحد يقوم بفتح غرفة الطعام ومفتاح رقم اثنين يقوم بفتح غرفة الجلوس وهكذا ......
وهذه هي لغة الهتمل كل رمز بها يقوم بعمل خاص به ، فهذا رمز للتلوين وهذا رمز آخر لوضع خط تحت العبارة ، ورمز يقوم بإضافة موسيقى .
هل تحتاج لغة الهتمل إلى برنامج معين لكي اكتب فيه الرموز؟
لا تحتاج لغة الهتمل إلى برنامج معين بل كل ما تحتاجه هو في متناول اليد ، والذي هو عبارة عن محرر لكتابة النصوص مثل برنامج المفكرة notepad ومتصفح لكي تظهر عليه النتيجة وترى ثمار تعبك والمتصفحات كثيرة ولكن انصحك بانترنت اكسبلورر أو نتسكايب نفيجيتور.
هل هناك ملاحظة معينة قبل أن ابدأ بتعلم الدروس ؟
نعم هنالك ملاحظة صغيرة ومهمة جدا جدا ، ألا وهي عند تخزين ملف الهتمل في المفكرة مثلا بإسم lesson لاتنسى أن تخزنها بإمتدادhtml أو htm>
وهكذا اذهب بعدها للمتصفح وافتحه هناك لكي ترى النتيجة وبالطبع ليس شرطا ان تكون متصلا بالانترنت لكي ترى النتيجة.
والآن هيا بنا ننطلق إلى الدرس التالي لكي ترى أساسيات الهتمل المهمة:).
alsultan
10 Jul 2002, 06:37 PM
في هذه المرحلة من الدروس سوف نتعلم درس مهم جدا وممتع ألا وهو كيفية إضافة وإدراج أنواع من الخطوط وبأحجام مختلفة.
والآن سوف تجد كل نوع من الخطوط مع الأمر الذي يجب ان تكتبه له .
وإذا حاز أي نوع من الخطوط على إعجابك فكل ما عليك هو حفظ الامر أو نسخه لتستعمله في موقعك الخاص بك.
--------------------------------------------------------------------------------
لكي تظهر لك العبارة في الوسط
كما في المثال التالي
هنا سوف اتعلم كيفية إدراج الخطوط
اكتب الأمر التالي
<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>
--------------------------------------------------------------------------------
والآن ارجوا منك أن لا تنتقل من درس إلى آخر إلا عندما تنتهي من تطبيق كل درس عمليا ، وأنا بانتظار اي استفسار منك.
alsultan
10 Jul 2002, 06:38 PM
يا ترى ما هي الفكرة التي أخذتها من الدرس السابق التي كانت عبارة عن دردشة خفيفة في الهتمل؟
اتمنى بالفعل أن تكون قد نويت استكمال تعلم الهتمل ، والآن هيا بنا الآن لنشرح بطريقة عملية في الهتمل.
ما هو التركيب الأساسي لأي ملف في الهتمل؟
حينما تفتح المفكرة لكي تكتب فيها ، لا بد من أساس تطبق عليه كل الرموز، الأساس هو كالتالي:
<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>
--------------------------------------------------------------------------------
والان ما رأيك ان تطبق المثال السابق وترى بنفسك كيف سوف يظهر في متصفحك .
alsultan
10 Jul 2002, 06:39 PM
يا ترى ما الذي تريد تعلمه من هذا الدرس؟
بالطبع عرفت ماذا سوف تتعلم من عنوان الدرس .
إنها الألوان وكيفية إدراجها كخلفية او كلون للعبارات أو العناوين في صفحات الانترنت .
في البداية هيا نتعلم كيفية إضافة لون كخلفية
وهذا يأتي من خلال الأمر التالي :
<body bgcolor=#ffffff>
-------
-------
</body>
ولقد استخدمت أنا اللون الأبيض وذلك من خلال الرمز ffffff كخلفية وهذا يأتي من الأمر السابق.
وهكذا تستطيع اختيار لون الخلفية الذي يناسبك وتستبدله بذلك اللون الذي انا اخترته مسبقا.
ولكن تذكر دائما بأن تضع إشارة # قبل الرمز الذي اخترته لكي يتعرف المتصفح على اللون.
إذن الآن تعلمت لون الخلفية فيا ترى ماذا عن لون العبارات والفقرات .
انظر معي إلى هذا الأمر:
<font color=#123123>
------
------
</font>
لقد تعاملنا مسبقا مع الرمز font ولكن هذه المرة أدخلنا كلمة color وهكذا اختر اللون الذي يعجبك وسوف ترى النتيجة بنفسك عند استخدامك لها .
وبالطبع لك الحق في أن تتسائل عن هذه الرموز ومن أين تأتي بها...، وأعدك خلال هذه الأيام سوف أقوم بوضع جدول يحتوي على ألوان متعددة ورموزها...لايفوتني أن أذكر أنه يمكن الإتعاض عن وضع هذه الأرقام بالنسبة للألوان المشهورة كالأبيض أو الأسود أو حتى الأزرق بمجرد وضع إسم اللون باللغة الإنجليزية بدل هذه الأرقام .
alsultan
10 Jul 2002, 06:40 PM
في هذا الدرس سوف نتعلم معا كيفية تنسيق الفقرات والقوائم
وهنالك عدة أنواع للقوائم وسوف تتعلمها الآن معنا لتختار ما يناسبك .
أولا: القوائم غير المتسلسلة
Unordered Lists
نفترض بأنك تريد أن تعدد المواد العلمية المقررة على القسم العلمي .
القسم العلمي
<ul>
<li>الفيزياء
<li>الكيمياء
<li>الأحياء
<li>الجيولوجيا
</ul>
وهكذا سوف يظهر لنا بهذه الطريقة .
القسم العلمي
الفيزياء
الكيمياء
الأحياء
الجيولوجيا
--------------------------------------------------------------------------------
ثانيا: القوائم المتسلسلة
Ordered Lists
والآن في هذا النوع من القوائم سوف تتعلم كيفية كتابة قائمة متسلسلة كما في هذا المثال .
المواد العلمية في القسم العلمي
<ol>
<li>الفيزياء
<li>الكيمياء
<li>الأحياء
<li>الجيولوجيا
</ol>
سوف يظهر بهذه الطريقة.
المواد العلمية في القسم العلمي
الفيزياء
الكيمياء
الأحياء
الجيولوجيا
--------------------------------------------------------------------------------
ثالثا: قوائم التعريفات
Definition Lists
في هذا النوع من القوائم نتعلم كيفية كتابة قائمة للكلمة وتعريفها .
كما في هذا المثال :
<dl>
<dt>المواد العلمية في القسم العلمي
<dd>الفيزياء
<dd>الكيمياء
<dd>الأحياء
<dd>الجيولوجيا
<dl>
وسيكون بهذه الطريقة :
المواد العلمية في القسم العلمي
الفيزياء
الكيمياء
الأحياء
الجيولوجيا
--------------------------------------------------------------------------------
والآن هيا معا نتعلم كيفية وضع حد فاصل بين الفقرات والجمل.
ونستخدم لهذا الشيء الوسم
<hr>
ونستطيع التحكم في حجمه بعدة طرق.
فهنالك خصائص نستطيع استعمالها مع ذلك الوسم لكي نزيد او نقلل من حجمه وهذه الخصائص هي :
width="رقم%"
نستطيع ذكر رقم مئوي ليحدد حجم الحدود .
width="رقم"
نستطيع ذكر رقم ليحدد حجم الحدود.
size="رقم"
نستطيع ذكر رقم بالبيكسل ليحدد حجم الحدود.
وأيضا تستطيع التحكم في اتجاه الحد سواء في الوسط او اليمين او اليسار بهذه الطريقة :
align="center/right/left"
وسوف أذكر لك عدة أمثلة لتتضح لك تلك الخصائص
--------------------------------------------------------------------------------
<hr width="40%">
--------------------------------------------------------------------------------
<hr width="41">
--------------------------------------------------------------------------------
<hr size="4">
--------------------------------------------------------------------------------
<hr width="50%" align="right">
لقد تعلمت مسبقا في درس الجداول كيفية تنسيق الكلمة في خلايا الجدول لتكون في الوسط أو اليمين أو اليسار
وسوف نستعمل معا نفس الوسم لكي ننسق الفقرات
والوسم هو :
<p>
مع الخاصية
Align
وهي تحدد اتجاه الفقرة وسوف اذكر لك أمثلة لكي تتضح لك كل تلك الأمور:
<p align="right">هنا موقع موسوعة الكمبيوتر والانترنت العربية</p>
هنا موقع موسوعة الكمبيوتر والانترنت العربية
<p align="center">هنا موقع موسوعة الكمبيوتر والانترنت العربية</p>
هنا موقع موسوعة الكمبيوتر والانترنت العربية
<p align="left">هنا موقع موسوعة الكمبيوتر والانترنت العربية</p>
هنا موقع موسوعة الكمبيوتر والانترنت العربية
alsultan
10 Jul 2002, 06:43 PM
أولا : إضافة الصورة
والآن وصلنا معا إلى هذا الدرس المفيد جدا .....فهنا سوف تتعلم معنا كيفية إضافة الصور الى موقعك
وهنالك وسم معين لإضافة الصور ألا وهو
<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">
alsultan
10 Jul 2002, 06:44 PM
والآن وصلنا لدرس مهم وسهل للغاية ،بالطبع عندما تبني لك موقعا خاصا ، فإنك ترغب بإضافة بريدك للموقع لكي يتمكن الزوار من مراسلتك، وأيضا ربما خطر على بالك ان تضع رابطا لموقع آخر ، وكذلك لصفحة أخرى من صفحات موقعك فيا ترى كيف ستتمكن من فعل كل ذلك..؟؟؟
كل ما عليك فعله هو قراءة الدرس هذا باتقان والتركيز على الأمثلة لانها ستساعدك على فهم كيفية صنع روابط.
--------------------------------------------------------------------------------
!+أحمر!أولا : لإضافة وصلة تشعبية لصفحة أخرى او موقع آخر!-أحمر!
هنالك رمز معين يجب ان تكتبه وهو التالي :
!+أحمر! !-أحمر!
والآن ضع عنوان الموقع بين العلامتين" " المبين باللون الازرق واكتب في الفراغ بين الرمزين اسم الرابط الذي تود من الزائر الضغط عليه المبين في اللون الأخضر .
كما في المثال التالي
!+أخضر!موسوعة الكمبيوتر والانترنت العربية!-أحمر!
عفوا لايمكنك رؤية الروابط الا بعد التسجيل والرد على الموضوع وذلك للحفاظ على حقوق الكاتب .
و ترغب أن يظهر هذا الإرتباط على الصفحة بإسم ... راسلني ... كما هو في المثال التالي
راسلني
إذن فكل ما عليك القيام به هو كتابة الرمز التالي :
!+أحمر!راسلني!-أحمر!
وحتى الآن عرفت كيفية إضافة الرابط سواء لموقع او صفحة او بريد إلكتروني .
--------------------------------------------------------------------------------
!+أحمر!ثالثا: لإضافة وصلة تشعبية لصفحة او موقع او بريد إلكتروني وذلك عن طريق الضغط أو النقر على صورة !-أحمر!
بالطبع ربما لاحظت انه في بعض المواقع حينما تضغط على صورة فإنها تذهب بك الى موقع آخر او يظهر لك البريد لصاحب الموقع .
وربما أردت في موقعك أن تضيف صورة لتكون مثل إشارة المرور التي تخبر الزائر بالضغط عليها لترسله لموقع آخر،وهكذا سوف تتعلم الان كيفية فعل ذلك .
كل ما عليك فعله هو كتابة العنوان الذي تريد من الزائر الانتقال إليه في المكان المخصص للعنوان ، وتكتب الملف الذي توجد فيه الصورة في نفس المكان الذي كتبته سابقا المخصص للعبارة التي سوف يضغط وينقر عليها الزائر .
ربما لم تقتنع بكلامي كثيرا ، لذلك إليك هذا المثال التالي الذي يسهل عليك فهم الأمر :
وهكذا سوف تظهر لك بهذه الطريقة
!+وسط!!-وسط!
وتستطيع التحكم في عرض وطول الصورة كما بينت لك في الدروس السابقة .
--------------------------------------------------------------------------------
!+أحمر!رابعا:إضافة وصلة تشعبية تنقلك إلى بداية او نهاية الصفحة او أي فقرة تختارها !-أحمر!
ربما تكون الصفحة التي صممتها طويلة ، لذلك من الأفضل أن تضيف إليها وصلات تسهل على الزائر الانتقال مباشرة الى نهاية الصفحة أو الرجوع إلى بداية الصفحة او حتى للتذكير بإحدى الفقرات لكي يقرأها مرة أخرى.
لذلك هنالك وسم خاص لهذا الأمر ألا وهو
!+أحمر!......!-أحمر!
مضافا إليه الخاصية
!+أحمر!NAME!-أحمر!
والآن هيا لنبدأ العمل معا ، فلنختار معا فقرة لكي نصل إليها عند كتابة وصلة خاصة لها ، ما رأيك في بداية الصفحة ، إذن فسوف نعمل معا الان وصلة لكي تنقلنا مباشرة الى بداية الصفحة.
إذن نختار أول كلمة من بداية الفقرة الأولى ونضعها بين الوسمين التاليين بهذه الطريقة.
!+أحمر!!-أحمر!والآن!+أحمر!!-أحمر!
هل هذا هو كل شيء؟؟ لا..بقي شيء آخر ، ألا وهو تسمية هذه الفقرة لكي نتمكن من الوصول إليها ، فما رأيك أن نسميها begain
وهكذا يكتب الامر ليكون بهذه الطريقة لنضعه في بداية الفقرة الاولى
!+أحمر!!-أحمر!والآن !+أحمر!!-أحمر!
وبقيت الان الخطوة الأخيرة ، ونكتب الوصلة الخاصة التي تنقلنا مباشرة الى بداية الصفحة اي بداية الفقرة الاولى.
في البداية نكتب الوسم الخاص بالوصلات ثم نكتب عنوان الصفحة ، بعدها تأتي إشارة # وهي مهمة كثيرا وأخيرا نكتب اسم الفقرة التي نحن قمنا بتسميتها begain
وأخيرا تمكنا من كتابة الوصلة بهذه الطريقة بداية الصفحة
alsultan
10 Jul 2002, 06:47 PM
مرحبا بكم في هذا الدرس الرائع .....الذي به الكثير من المتعة لأنكم سوف تتعلمون هنا كيفية كتابة النصوص المتحركة والتحكم بحركتها!!
--------------------------------------------------------------------------------
فللننطلق مباشرة الى موضوع الدرس.
ما رأيك بهذا المثال؟
أعجبتني دروس الهتمل
إذن هو عبارةعن نص متحرك...والنص المتحرك ...له رمز معين في الهتمل الا وهو:
<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>
أمي هي نبع حنان...أمي هبة الرحمن
--------------------------------------------------------------------------------
واعذرني على إطالة الدرس...فلقد فضلت كتابة جميع الأمثلة المتعلقة برمز النصوص المتحركة في درس واحد دون تجزأة لكي يسهل عليك المقارنة بينها جميعا.:))
وها قد انتهينا من هذا الدرس الممتع.....اتمنى أن تقوم مباشرة بتطبيقه وذلك لكي تتعود التعامل مع رموز الهتمل الرائعة.....إذا واجهت أي صعوبة فأنا بانتظار أي تساؤل منك.
هذه المعلومات مستمده من الموسوعة العربية للكمبيوتر والانترنت
[Dynamic]
02 Aug 2002, 05:45 PM
السلام عليكم ...
اشكرك اخي على الدرس الجميل ....
لكن للاسف النسخه من html لتي تشرحها قديمة ... جداً .....
يعني قبل حوالي خمس سنين ... حاليا نصفها الغي ... طبعا ما زالت المتصفحات تعرضها .. لكن في طريقها الى الزوال .... والحل ...
طوروا ما يسمى ب css .. يقوم بالتحكم بكل tag في الصفحة ... كما يسهل تغييره بعد تحميل الصفحة بواسطة لجافا سكربت .. لينتج لنا اجمل ما في الانترنت ((بنظري)) DHTML ... واجمل ما في css انك تستطيع التحكم بشكل الصفحة من ملف خارجي .. وبالتالي وصل الملف الخارجي بكل صفحات موقعك .. و بمجرد تغيير الملف تتغير الصفحة ... شرحه بسيط جدا ... لكن انا مشغول اليومين هذي ... ما اوعدكم لكن انشا الله احاول اشرحه لكم .. ولو اعطيك خط البداية ...
اتمنى ان تكون اول مشاركة لي مفيدة وشكرا
النسخة الماسية الإصدار vBulletin 3.6.8
nabdh-alm3ani.net bdr130.net