كيف تصمم موقعك بلغة Html

alzamaan · 08-09-2004, 03:30 PM

صمم موقعك بنفسك بابسط لغات تصميم صفحات الانترنت وهى Html
وهذه سلسة دروس لمحبي تصميم المواقع ساقوم بكتابتها باذن الله بشكل تسلسلي

العسيب · 08-09-2004, 05:12 PM

[motr1]][®][^][®][ونحن جاهزون للدروس ونرجو التقاعل ][®][^][®][[/motr1]

alzamaan · 09-09-2004, 01:30 PM

[align=center]الدرس الأول[/align]
مقدمة
ماهية لغة الHTML وماذا تعني واين يتم كتابة الكود الخاص بها واين يتم تنفيذها؟
لغة HTML هي اختصار لجملة (Hyper Text Markup Langauge ) وهي إحدى الطرق في تصميم صفحات الانترنت ويتم كتابة الكود الخاص بها في المفكرة Notpad ويتم تنفيذها في متصفح للإنترنت Internet Explorer .

--------------------------------------------------------------------------------
تكتب لغة HTML برموز غريبة وكثيرة اسمها باللغة الانجليزية الـTags وتسمى باللغة العربية الوسوم .
و لكل وسم من وسوم لغة الـHTML وسم بداية ووسم نهاية وسوف امثله لك من خلال الرسم التالي :

<الوسم > الكلام الذي يتمتع بخاصية الوسم
< الوسم السابق/ >
أهم وسوم لغة الـHTML

[gdwl]وسم البداية وسم النهاية
< HTML > < / HTML >
< HEAD > < /HEAD >
< TITLE > < /TITLE >
< BODY > < /BODY > [/gdwl]

شرح كل وسم على حدى :
والوسم الأول هو الوسم < HTML > الذي كما ذكرت سابقاً أنه أهم الوسوم المستخدمة في بناء الصفحات المستخدم فيها لغة الـHTML ، لأنه يقوم بتعريف للمتصفح أن هذه الصفحة مصنوعة بلغة الـHTML ويوضع هذا الوسم في أول المستند المصنوع بلغة الـHTML ولولا هذا الوسم لظهرت محتويات الصفحة بصورة باهتة وغير مفهومة ، وسم النهاية هو < HTML/ > الذي يوضع أخر المستند المصنوع بلغة الـHTML .

--------------------------------------------------------------------------------

فلنأتي الآن للوسم < HEAD > الذي يستخدم لتعريف صاحب الصفحة واللغة والعديد من الأشياء التي سوف نشرحها في دروس قادمة إنشاء الله . وأذكرك أن وسم النهاية الخاص به هو < HEAD/ >

--------------------------------------------------------------------------------

نأتي الآن إلى الوسم < TITLE > الذي يمثل الكلام الذي يوضع أعلى الشاشة على اليسار ، ووسم النهاية الخاص به هو < TITLE/ > ، ملاحظة يوضع هذا الوسم بين الوسمين < HEAD > و < HEAD/ >

--------------------------------------------------------------------------------

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

الوسم < HTML >يوضع أول الملف المستخدم فيه لغة الـHTML والوسم < HTML/ > يوضع أخر الملف .
الوسم < HEAD > يوضع تحت الوسم < HTML > مباشرة ووظيفته هو تعريف بلغة الصفحة وكاتبها وتلخيص صغير عن محتويات الصفحة ووسم النهاية الخاص به هو < HEAD/ > .
الوسم < TITLE > هو الوسم الذي يوضع فيه عنوان الصفحة الذي سوف يظهر أعلى المتصفح على اليسار . ووسم النهاية الخاص به هو < TITLE/ >
الوسم < BODY > ويوضع هذا الوسم بعد نهاية الوسم < HEAD > ووظيفته هي إظهار محتويات الصفحة على المتصفح ، ووسم النهاية الخاص به هو < BODY/ >

مثال على هذا الكلام
لنقم بفتح المفكرة Notpad

بعد ذلك نقوم بكتابة الكود ولنجعل عنوان title الصفحة المجلس اليمني
ولنجعل alzamaan هو الاسم المراد ظهورة في الصفحة

بعد ذلك نقوم بحفظ المستند بأى اسم وليكن A يحفظ مع مراعاة حفظة مع امتدادة وامتداد صفحات html تكون بهذا الشكل
A.html
وهذة الصورة توضح ذلك

وهذة الصفحة المنفذة

نسراليمن · 11-09-2004, 02:27 PM

بارك الله فيك اخي علي هذا الدرس الممتع والشرح الواضح

alzamaan · 24-09-2004, 02:33 PM

[align=center]الدرس الثاني [/align]
التحكم بالنص
الان نريد ان نجعل النص او الكلمة في منتصف الصفحة ماعلينا سوى ان نجعل الكلمة بين
الوسم </center>الكلمة<center>
نستخدم الوسم <BR> لتحديد النهاية للسطر. والبدء بسطر جديد (لاحظ أن هذا الوسم مفرد، أي ليس له وسم نهاية).
وهناك أيضا الوسم <P> الذي يقوم تقريباً بنفس عمل الوسم السابق أي أنه ينهي السطر أو الفقرة ويبدأ بسطر جديد لكن مع إضافة سطر إضافي فارغ بين الفقرات.
أما الفراغات فتعتبر رموزاً خاصة لذلك لا نستطيع التحكم بها وبعددها إلا باستخدام الوسم ‎ ‎ (والأحرف هي اختصار للعبارة Non Breakable Space). وإذا أردت إدخال عدة فراغات بين نص وآخر ما عليك إلا كتابة هذا الوسم بنفس عدد الفراغات المطلوب. كما يجب عليك التقيد بالأحرف الصغيرة هنا.

واذا اردنا التحكم بعرض الخط نستعمل الوسم </h1><h1> بحيث انه كلما زدت الرقم الذى مع ال h كلما صغيرة الكلمة
والمثال التالى يبين ذلك
[align=left]<html>
<head>
<title>المجلس اليمني</title>
</head>
<body>
<center><h1>alzamaan</h1></center>
<center><h2>alzamaan</h2></center>
<center><h3>alzamaan</h3></center>
<center><h4>alzamaan</h4></center>
<center><h5>alzamaan</h5></center>
<center><h6>alzamaan</h6></center>

</body>
</html>[/align]

ملاحظة اذا اردت الرجوع الى الكود والتعديل فيه ماعليك سوى الذهاب الى صفحتك واختيار عرض view
ومن ثم المصدر .

مُجَاهِد · 06-10-2004, 05:52 PM

منتظرين البقية والدروس الجديدة..

alzamaan · 10-10-2004, 11:44 AM

[align=center]الدرس الثالث[/align]
[align=center]الخطوط والألوان والصور[/align]
سوف نقوم في هذا الدرس بالتعرف على الخصائص التي يمكن إضافتها إلى الوسم <BODY> من أجل التحكم بالشكل العام للصفحة، وخصوصا فيما يتعلق بالألوان.
سنقوم بإضافة الخاصية BGCOLOR إلى الوسم <BODY> ، وهي تقوم بتحديد لون الخلفية للصفحة.
حيث تكتب بالشكل التالى
<BODY bgcolor="وهنا نضع اللون ">
حيث تمثل الالوان بالأرقام بستة خانات
فمثلاً يمثل اللون الابيض = "FFFFFF"
واللون الأسود = "000000"
وكلما قمت بتغير احد الخانات الستة بعدد او بحرف سيظهر لك لون جديد جرب ذلك بنفسك
لماذا ستة خانات سنقوم بشرح الالوان بشكل سريع :
تلاحظ أن القيم السابقة مكونة من ستة خانات ، وهي مكتوبة بالصيغة التالية:-

هناك ثلاثة ألوان أساسية هي الأحمر والأخضر والأزرق، ولكل منها يوجد 256 درجة لونية ويعبر عن هذه الدرجات بالأرقام من 000 وحتى 255. ومن خلال مزج هذه الألوان بدرجاتها اللونية المختلفة نحصل على الألوان الأخرى.
حسنا، لكن من أي جاءت الرموز FFFFFF والتي عبرت عن اللون الأبيض بها. إنها ببساطة أرقام… مكتوبة بالنظام السداس عشري (نظام عددي أساسه الرقم 16 ويعبر عنه باستخدام الأرقام العادية من 0 إلى 9 والرموز A,B,C,D,E,F ). فالرقم 255 بالنظام العشري العادي يكافئه الرقم FF بالنظام السداس عشري.
إذن فالرقم السداس عشري FF على اليسار يمثل الدرجة 255 للون الأحمر. والرقم FF في الوسط يمثل الدرجة 255 من اللون الأخضر. والرقم FF على اليمين يمثل الدرجة 255 من اللون الأزرق.
وعلى هذا المنوال يعبر عن اللون الأزرق الفاتح بالرقم السداس عشري: 6699CC أما اللون الأسود فرقمه هو 000000.
وهذا جدول ببعض الألوان ورموزها المكافئة بالنظام السداس عشري.

ملاحظة مهمة:
بعض المتصفحات لا تتعرف على رموز الألوان إلا بوضع إشارة # قبل هذه الرموز، لذلك من الأفضل استخدامها دائماً.
وبالنسبة لبعض الألوان الأساسية والدارجة، من الممكن استخدام أسماء هذه الألوان مباشرة بدلاً من الأرقام السداس عشرية. وهذا جدول يوضح هذه الألوان ومسمياتها:

ولنفرض أننا لا نريد تلوين خلفية الصفحة بل نريد أن نجعل خلفية الصفحة صورة
نستخدم BACKGROUND
ويكتب بهذا الشكل
[align=left]<BODY BACKGROUND="yemen6X.jpg">‎[/align]
ولنكمل مع باقي الخصائص في وسم <BODY>: ربما لاحظت خلال استخدامك للإنترنت أن معظم الوصلات التشعبية (Links) التي تنقر عليها لتنقلك إلى صفحات أو مواقع أخرى على الشبكة هي دائماً مميزة باللون الأزرق، وأن الوصلات التي قمت بزيارتها فعلاً قد تحول لونها إلى القرمزي. حسناً، هذه هي الألوان الإفتراضية التي تعتمدها المتصفحات. لكن قد لا يعجبك ذلك وتريد تغيير هذا النظام. أو ببساطة ربما تريد استخدام لون أو صورة غامقة لخلفية الصفحة بما سيؤدي إلى اختفاء هذه الوصلات أو حتى اختفاء نص الصفحة نفسها. فما العمل؟
إليك هذه الخصائص التي تقوم بالتحكم في ألوان النصوص:

[gdwl]‎TEXT="#rrggbb"‎ تحديد لون النص الأساسي للصفحة
‎LINK="#rrggbb"‎ تحديد لون الوصلات التشعبية
‎VLINK="#rrggbb"‎ تحديد لون الوصلات التشعبية التي تمت زيارتها visited links
‎ALINK="#rrggbb"‎ تحديد لون الوصلة التشعبية الفعالة أي عندما يتم النقر عليها active links [/gdwl]

وهذا التطبيق :
[align=left]
<html>
<head>
<title>alzamaan</title>
</head>
‎<BODY BACKGROUND="Nature.jpg"‎ text="#ffffff">
<center><h1>alzamaan</h1></center>
</body>
</html>[/align]
هذة الصفحة

أدوات الموضوع
مشاهدة صفحة طباعة الموضوع أرسل هذا الموضوع إلى صديق