الرئيسية › منتديات › مجلس تقنية المعلومات › هيا بنا نتعلم HTML
- This topic has 10 ردود, 5 مشاركون, and was last updated قبل 23 سنة، شهر by
PaCo De LuCiA.
-
الكاتبالمشاركات
-
14 أبريل، 2001 الساعة 3:08 م #318240
mrpolite
مشاركشكراً للأخ نحول على هذا الموضوع الرائع و اللي كنت أدور أي نبذه مفيده عنه لأني بصراحة حاب أعرف الكثير عن هاللغة … بس أنا اتمنى انك تعطيني أسماء بعض الكتب و المواقع اللي تتطرق لهذه اللغة ………
وهل تطيق وداعاً أيها الرجل ……
14 أبريل، 2001 الساعة 8:33 م #318252المسالم
مشاركانا عندي ومخلنهن في ملف مضغوط وان شاء الله ساقوم ببعض التعديلات التاثير بريال
امزح انتضروني
وان شاء الله قريبا
14 أبريل، 2001 الساعة 9:02 م #318259بدور
مشاركبسم الله الرحمن الرحيم
شكرا نحــــــــــول دومك ما تقصر
تمنياتي بالاستفادة للجميع
سبحان الله و الحمد لله و لا اله الا الله و الله أكبر
يوم أنا ضحيت ما أقصد جحود***للأسف كان السبب زود الوفا
جيتني بالغدر و أنا جيتك عهود***صادق الاحساس وشلون أختفى14 أبريل، 2001 الساعة 9:05 م #318260بدور
مشاركبسم الله الرحمن الرحيم
و نحن ننتظر يا المسالم
سبحان الله و الحمد لله و لا اله الا الله و الله أكبر
يوم أنا ضحيت ما أقصد جحود***للأسف كان السبب زود الوفا
جيتني بالغدر و أنا جيتك عهود***صادق الاحساس وشلون أختفى15 أبريل، 2001 الساعة 5:27 ص #318304طـــلال
مشاركالأخ الكريم ..mrpolite
كتاب ( الدليل العربي الشامل لشبكة الأنترنيت ) يعتبر من اهم الكتب التي تقدم فكرة مبسطة ومفهومة عن لغة HTML بل وعالم الأنترنيت وهو من تأليف الكاتبان المبدعان صلاح خليفة جاسم و نزار معروف عمر.
ويمكنك زيارة موقع المصــــــــــــــــــمم للحصول على المزيد من المعلومات..
وسأقوم لاحقا بتوفير عنواين اخر لمواقع تهتم بهذه اللغةالعزيز المسالم ..
هلا و ألف مرحبا بك وبكل مساعدة منكم أرجو أنكم تكونوا خير معين ليالأ خت الكريمة بدور ..
العفو ..واجب على كل عضو أنه يفيد أخوانه بكل حاجة في إستطاعتهالحياة مليئة بالحجارة ، فلا تتعثر بها ….بل أجمعها وابني بها سلما تصعد به نحو النجاح
تم تعديلة بواسطة نحول في 15-04-2001 19:56 م
15 أبريل، 2001 الساعة 3:23 م #318324طـــلال
مشاركالسلام عليكم ورحمة الله وبركاته
هذا الجزء الثاني وأرجو من الإخوان أن ينبهونني في حال أكتشافهم لأي زلة..فجل من لا يزل..كيف أستطيع أن أقوم بحفظ ملف بلغة HTML?
إذا اردت حفظ ملف في لغة الـHTML احفظه بأي اسم تريده ولكن
يجب عليك أن يكون امتداد هذا الاسم هو htm أو html ولا يوجد فرق في أي هذين الامتدادين ولكن يجب عليك أن تختار أحدهما وترفقه خلف الاسم الذي اخترته
ملاحظة:
من الأفضل أن تقوم بإنشاء مجلد على القرص الصلب لكي تحفظ به ملفاتك لتسهل عملية استرجاعها أو تحديثها .
مثال للتوضيح :
قم بإنشاء مجلد باسم C:oman وسميت الملف بـ
Muscat.htm وكتبت هذه الشفرة :
<HTML>
<HEAD>
<TITLE>
الله اكبر
<TITLE/>
<HEAD/>
<BODY>
سبحانك الله
<BODY/>
<HTML/>إذا اردت رؤية النتيجة وكان متصفحك MS intrernet explorer اختر الأمر Open من القائمة FILE
ثم حدد مسار الملف وهذا يتم بطريقتين ، الطريقة الأولى هي كتابة المسار والطريقة الثانية هي بالضغط على
زر browse ثم تحديد الملف والضغط على Open .أما إذا كان متصفحك Netscape Navigator اختر الأمر Opaen File من القائمة FILE ثم حدد المسار الذي
يوجد به الملف ، أنا شخصياً حددت المسار التالي :
C:my documents&_temp1.htm
ملا حظات مهمة:
1- لافرق إذا كتبت الوسوم بالأحرف الكبيرة أو الأحرف الصغيرة .
2-لافرق إذا كتبت الوسوم متباعدة أو متقاربة ، يعني : تستطيع كتابة الملف السابق هكذا :
<HTML> <HEAD> <TITLE> الله اكبر ولا إله لإ الله<TITLE/> <HEAD/> <BODY>
الحمد لله لقد أستطعت اليوم أن اتعلم شئ جديد <BODY/> <HTML/>او كذا :
<HTML>
<HEAD>
<TITLE>
الله أكبر ولا إله لإ الله
<TITLE/><HEAD/>
<BODY>
الحمد لله لقد أستطعت اليوم أن اتعلم شئ جديد<BODY/>
<HTML/>
والسبب أن المتصفحات لا تأخذ بعين الاعتبار المسافات ولاالفراغات الزائدة ، فإذا اردت أن تبدأ سطر جديد عليك وضع
الوسم
وإذا اردت ادراج فراغ عليك وضع الوسم ;nbsp&وسنكمل إن شاء الله في مرة قادمة
الحياة مليئة بالحجارة ، فلا تتعثر بها ….بل أجمعها وابني بها سلما تصعد به نحو النجاح
16 أبريل، 2001 الساعة 1:41 ص #318364طـــلال
مشاركالسلام عليكم ورحمة الله وبركاته.
الدرس الثالث
كيف يمكننا إضافة الخطوط وبأحجام مختلفة ؟
كما هو معلوم فإن الخطوط تعتبر مهمة جدا حيث أنها هي الأساس في كل موقع لأنها وعبرها يتمكن صاحب الموقع من توصيل أفكاره الى زوار موقعه.طبعا لكل نوع من الخطوط امر خاص.
———————————————————————
حسنا سنتعلم الأن كيفية كتابة عنوان ما بحيث يكون في وسط الصفحةلكي تظهر لك العبارة في الوسط
اكتب الأمر التالي
<center>هذه العبارة ستظهر في الوسط</center>
تذكر أنه يمكنك أن تكتب هذه الأمر على الشكل التالي
<center>
هذه العبارة ستظهر في الوسط
</center>
——————————————————————–
بالنسبة للخط المائل
ولكي يظهر لك ذلك اكتب الامر التالي
<i>الخط المائل</i>
——————————————————————–
وهذه انواع اخرى من الخطوط مع اوامرهاهذا المر يمكنك من أدراج خط بشكل عادي( يمكنك أن تكتب من خلاله مقالة)
<b>خط عادي</b>بإستخدام الأمر التالي ستظهر العبارة وكأنها مشطوبة بخط<strike>عبارة مشطوبة بخط</strike>
بإستخدام المر التالي ستظهر العبارة وتحتها خط
<u> هنا سوف اتعلم كيفية إدراج الخطوط</u>——————————————————————–
ماذا عن احجام هذه الخطوط؟!
أنه أسهل مما تتصورون
فقط كل ما عليك أن تستخدم هذا الأمر<h2>هذا الحجم رقم اثنين</h2>
<h3>هذا الحجم رقم ثلاثة</h3>
<h4>هذا الحجم رقم أربعة</h4>
وسنكمل لاحقا إن شاء الله وأرجو من المولى عزوجل أن يوفقني في تكملة الدروس بالشكل الصحيح والمفهوم
الحياة مليئة بالحجارة ، فلا تتعثر بها ….بل أجمعها وابني بها سلما تصعد به نحو النجاح
19 أبريل، 2001 الساعة 7:03 ص #318823طـــلال
مشاركالدرس الرابع
سيكون درس اليوم بأذن الله تعالى عن أستخدام الألوان في تصميم الصفحات.نطلق كلمة خاصية (Attribute) على التعابير التي تضاف إلى الوسوم، من أجل تحديد الكيفية أو الشكل الذي تعمل بها هذه الوسوم. وبعبارة أخرى فإن الوسم يقوم بإخبار المتصفح عن العمل الذي يجب القيام به أما الخاصية فتحدد الكيفية التي سيتم بها أداء هذا العمل.
تأمل الشيفرة التالية:
<BODY BGCOLOR=FFFFFF>
…
</BODY>لقد قمت بإضافة الخاصية BGCOLOR إلى الوسم <BODY> ، وهي تقوم بتحديد لون الخلفية للصفحة. أما FFFFFF فهي القيمة التي تمثل اللون المختار وهو هنا اللون الأبيض، (لاحظ أنها مكتوبه بين إشارتي ) ولو أردت تمثيل اللون الأسود لكتبت الرمز 000000. أو الرمز 6699CC للون الأزرق الفاتح……
فمن أين جاءت هذه القيم، وكيف؟… تابع القراءة وسوف تعرفالقليل عن الألوان…
كما هو معروف هناك ثلاثة ألوان أساسية هي الأحمر والأخضر والأزرق، ولكل منها يوجد 256 درجة لونية ويعبر عن هذه الدرجات بالأرقام من 000 وحتى 255. ومن خلال مزج هذه الألوان بدرجاتها اللونية المختلفة نحصل على الألوان الأخرى.
وبشكل أخر فأن إن أي لون هو مزيج -وبنسبة معينة من الدرجات- من هذه الألوان الثلاثة *
فمثلا اللون الأسود مكون من الدرجة 000 من كل من اللون الأحمر والأخضر والأزرق. واللون الأبيض مكون من الدرجة 255 من هذه الألوان. أما اللون الأصفر فهو مكون من الدرجة 255 للون الأحمر، والدرجة 255 للون الأخضر، والدرجة 000 من اللون الأزرق… وهكذا بنفس الطريقة يتم تكوين باقي الألوان.
وبعملية حسابية بسيطة 256×256×256 ينتج لدينا أن عدد الألوان التي يمكن الحصول عليها بمزج الألوان الثلاثة السابقة هو 16777216 بالضبط ( هذه المعلومات كي تفهمون وتستطيعون تحليل وفهم أي شفرة مكتوبة بلغة HTML).
حسنا، لكن من أي جاءت الرموز FFFFFF والتي عبرت عن اللون الأبيض بها. إنها ببساطة أرقام… مكتوبة بالنظام السداس عشري (نظام عددي أساسه الرقم 16 ويعبر عنه باستخدام الأرقام العادية من 0 إلى 9 والرموز A,B,C,D,E,F ). فالرقم 255 بالنظام العشري العادي يكافئه الرقم FF بالنظام السداس عشري.
إذن فالرقم السداس عشري FF على اليسار يمثل الدرجة 255 للون الأحمر. والرقم FF في الوسط يمثل الدرجة 255 من اللون الأخضر. والرقم FF على اليمين يمثل الدرجة 255 من اللون الأزرق.
وعلى هذا المنوال يعبر عن اللون الأزرق الفاتح بالرقم السداس عشري: 6699CC أما اللون الأسود فرقمه هو 000000.وهذا جدول ببعض الألوان ورموزها المكافئة بالنظام السداس عشري.
ABCDEF FFFF00
FEDCBA 336699
773466 112233
FF1122 666666
0033FF 663333
AABBAA 00FF00
800800 FF6600
008008 993366
020769 123456
111111 654321أما كيف تعرف الرمز الخاص باللون الذي تريد اختياره، فيوجد برامج خاصة تستطيع من خلالها دمج الألوان الثلاثة بنسب مختلفة، ومن ثم يقوم البرنامج بتوليد الرمز السداس عشري المكافئ للون الناتج.
ملاحظة مهمة:
بعض المتصفحات لا تتعرف على رموز الألوان إلا بوضع إشارة # قبل هذه الرموز، لذلك من الأفضل استخدامها دائماً ( وهذا السبب في أن بعض مستخدمي الشبكة يلاحضون أنهم يعانون من عدم القدرة على معرفة بعض الألوان التي توجد في بعض المواقع المصممة بهذه اللغة في حين ان البعض الأخر لا يعانون من هذه الأشكالية على الأطلاقوبالنسبة لبعض الألوان الأساسية والدارجة، من الممكن استخدام أسماء هذه الألوان مباشرة بدلاً من الأرقام السداس عشرية. وهذا جدول يوضح هذه الألوان ومسمياتها:
Black White
Red Green
Marron Purple
Navy Blue
Teal Lime
Gray Silver
Olive Aqua
Fuchsia Yellow( ولهذا فكثير من المواقع تجدها لا تحتوي على أكثر من هذه الألوانوذلك بسبب أن مصمم الموقع لا يعرف شئ عن الأرقام العشرية للألوان ولهذا ففي حالة الرغبة في أستخدام ألوان اخرى لا بدمن معرفة الأرقام العشرية )
وعموما لنعود إلى الوسوم و خصائصها …
<BODY BGCOLOR=#FFFFFF BACKGROUND=image.jpg>
…
</BODY>تقوم الخاصية BACKGROUND بتحديد صورة كخلفية للصفحة .
إننا نستطيع استخدام الصور بأحجام مختلفة طولياً أو عرضياً كخلفيات للصفحة، والمتصفح نفسه هو الذي يقوم تلقائياً بعرضها في وضع يسمى التجانب ( أي يجعل من الصورة الصغيرة تبدو في حجم كبير ).
ربما لاحظت خلال استخدامك للإنترنت أن معظم الوصلات التشعبية (Links) التي تنقر عليها لتنقلك إلى صفحات أو مواقع أخرى على الشبكة هي دائماً مميزة باللون الأحمرأو الأزرق، وأن الوصلات التي قمت بزيارتها فعلاً قد تحول لونها إلى القرمزي. حسناً، هذه هي الألوان الإفتراضية التي تعتمدها المتصفحات. لكن قد لا يعجبك ذلك وتريد تغيير هذا النظام. أو ببساطة ربما تريد استخدام لون أو صورة غامقة لخلفية الصفحة بما سيؤدي إلى اختفاء هذه الوصلات أو حتى اختفاء نص الصفحة نفسها. فما العمل؟
إليك هذه الخصائص التي تقوم بالتحكم في ألوان النصوص:TEXT=#rrggbb تحديد لون النص الأساسي للصفحة
LINK=#rrggbb تحديد لون الوصلات التشعبية
VLINK=#rrggbb تحديد لون الوصلات التشعبية التي تمت زيارتها visited links
ALINK=#rrggbb تحديد لون الوصلة التشعبية الفعالة أي عندما يتم النقر عليها active links
ربما من المفيدلكم يا اعزائي أن اكون بها شفرة حتى تفهمونها بشكل أسهل:
<BODY BACKGROUND=backimag.jpg
BGCOLOR=#ffff00
TEXT=#000066
LINK=#00ff00
VLINK=#ff0000
ALINK=#999999>قد حددت الصورة backimag.jpg كخلفية للصفحة؟ وأنني اخترت اللون الأصفر للخلفية (في حالة عدم عرض الصورة السابقة كخلفية)؟ وان النص سيظهر باللون الأزرق الغامق؟ أما الوصلات التشعبية فلونها أخضر، والوصلات التي تمت زيارتها ستظهر باللون الأحمر. أما تلك الوصلة الفعالة فستظهر باللون الرمادي في لحظة النقر عليها بالفأرة.
أرجو أن اكون قد وفقت في شرح خاصية أستخدام الألوان
الحياة مليئة بالحجارة ، فلا تتعثر بها ….بل أجمعها وابني بها سلما تصعد به نحو النجاح
27 أبريل، 2001 الساعة 6:00 ص #320003طـــلال
مشاركالدرس الخامس : الوصلات Links
الوصلات ..هي جمل أو صور بعد النقر عليها يتم الأنتقال الى
صفحة اخرى او من جهة الى أخرى في نفس الصفحة..
أذا فأن الوصلات هي ما يربط شبكةالأنترنيت ببعضها ولذا صار من السهل التنقل بين المواقع بمختلف تصنيفاتها وهذا ما يبرز اهمية الوصلات في تصميم الصفحات بإختلاف الهدف من هذه الوصلات
لنبدا الشرح
كقاعدة ..يستخدم الوسوم
<A> … </A>
كوسوم أساسية لإدراج الوصلات التشعبية، وهي اختصار لكلمة Anchor. وهي لا تعمل لوحدها بل تتطلب إضافة خصائص معينة أولها وأهمها الخاصية
HREF
التي نحدد من خلالها الموقع الذي نريد الدلالة عليه، ويجب أن يكتب عنوان الموقع كاملاً.
الحالة الأولى: إدراج وصلة تشعبية تشير إلى موقع خارجي
( أي موقع اخر ليس في نطاق الموقع الذي أنت فيه
مثال:
لنقم بإدراج وصلة تشعبية إلى أحد المواقع العربية الرائدة والرائعة، وهو موقع مجاالسنا
. وعنوانه
في هذه الحالة يتم كتابة الشيفرة بالشكل التالي:
<A HREF=
>
</A>
أيضا يمكن وكشئ تجميلي أن نضع عبارة مغايرة لعنوان الموقع التقليدي ..فنجعل مثلا الوصلة على شكل أضغط هنا ..او أذهب الى موقع مجالسنا ..الخ
ففي هذه الحالة يجب ان تكون الشفرة على الشكل التالي
<A HREF=http://www.majalisna.com>أذهب الى موقع مجالسنا</A>
وسوف تظهر الوصلة بهذا الشكل :
هل تتطلع الى اكثر من ذلك<img src=http://www.majalisna.com/images/icons/doh.gif border=0 >!!?
أذن يمكنك ادراج صورة او زر كبديل للكلمات ..ولكن كيف ؟
تابع معي ..
ببساطو كل ما عليك هو أن تكتب الوسم الخاص بإدراج الصورة بين الوسمين <A> … </A> بالشكل التالي:
<A HREF=http://www.majalisna.com><IMG SRC=http://www.majalisna.com/majalisna_log.gif></A>
وستكون الوصلة على الشكل التالي
<IMG SRC=http://www.majalisna.com/majalisna_log.gif>
ولكن كيف يمكننا ان ننتقل بين صفحات الموقع نفسه؟؟!!
سؤال جميل ولكن الأجابة عليه ليست صعبة على الإطلاق
كل ما عليك هو كتابة هذه الشيفرة وبين نكتب أسم الملف الذي يحتوي على الصفحة الأولى..لنفرض أنه index.html
( في العادة يكون لكل صفحة ملف لذا فالصفحة الاولى يكون ملفها بذلك الأسم والصفحات الأخرى تباعا ترقم على هذا المنوال index1.html- index2.html)
<A HREF=index.html>Main Page</A>
..هيا بنا نتعلم كيف نضع وصلة لبريد إليكتروني بخيث وبعد النقر على هذه الوصلة ينفتح برنامج البريد الإليكتروني للزائر
فالإختلاف الوحيد الذي يطرأ هنا هو كتابة كلمة MAILTO بعد خاصية HREF لكي تدل على أن العنوان الذي يلي هو عنوان EMAIL وليس أي عنوان آخر
<A HREF=MAILTO:nhoool@hotmail.com> راسل نحول</A>
وسوف يكون على الشكل التالي
<font color=008080>شكرا لكم واتمنى أن يكون الشرح سلس ولم اخطئ في شئ ..وإن كان فأرجو منكم المعذرة والتنبيه</font color=008080>
30 يوليو، 2002 الساعة 2:50 م #374155PaCo De LuCiA
مشاركموضوع حلو و جميل
مشكورين
-
الكاتبالمشاركات
- يجب تسجيل الدخول للرد على هذا الموضوع.