سلسة دروس html- الدرس الأول

#111 أغسطس 2003 في 21:15 صاحب الموضوع

سلسلة دروس html- الدرس الأول :

نبدأ باذن الله الدرس الأول من لغة تأشيرالنص التشعبي و اسف جدا على التاخير

و هذا رابط للدرس الصفر لمن يحب قرائته:D:

http://www.arabteam2000.com/vb/showthread....&threadid=32081

============================

العمل مع النصوص :

*النص :

لا يتطلب النص البسيط وسوم محددة لان المتصفحات ستقوم بترجمته و ذلك مهما تكن اعدادات النص الافتراضية لها(عادة يكون نوع الخط times new romanو حجمه 12 نقطة).

و كما ذكرنا سايقاً فان المتصفح عندما يصادف اي من الفراغات البيضاء بين الكلمات يقوم بتحويلها الى فراغ وحيد على شاشاة العرض على سبيل المثال:

one

tow        three

four  five    six

seven     eight     nine

يتم عرضها كالتالي(اذا لم يتم استخدام وسوم تنسيق النص):

one tow three four five six seven eight nine

* وسم انهاء السطر

:

يمكنك استخدام الوسم

لأي نص تال له أو صورة يبدأ من سطر جديد و يعتبر هذا الوسم من ابسط الوسوم لاحظ انه لا يملك وسم اغلاق و هذا مثال عليه :

هنا نقطة البداية


 و هذا هو السطر التالي

* وسم الفقرة :

الفقرة

:

يمكنك استخدام الوسم

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

- يمكنك اهمال وسم الاغلاق

فيما اذا كان النص التالي يبدأ بأحد الوسوم

أو

و من الشائع اهماله عندما يكون ليك عدد من الفقرات المتتالية.

مثال :

<p> الفقرة الأولى

<p>الفقرة الثانية

--------

<p>  الفقرة الاخيرة

* وسوم الترويسة :

يوجد 6 وسوم ترويسة تتراوح بين

..

و

..

يمكن استخامها لعرض النص بنوع times new roman عريض bold مع تباعد بمقدار سطر واحد فوقه و تحته.

يوجد ستة مستويات للترويسة ذات أحجام تتراوح عادة بين بشكل تنازلي من 24 نقطة حتى 8 نقاط.

لا يمكن ان تضمن بان من يشاهد صفحتك سيتمكن من رؤية النص المكتوب ضمن الوسم

بحجم 24 نقطة لان ذلك يتعلق باعدادات المتصفح.

مثال :

<h1>الحجم الاول24 نقطة </h1>

<h2>الحجم الثاني 16 نقطة </h2>

<h3>الحجم الثالث 14 نقطة </h3>

<h4>الحجم الرابع12 نقطة (نفس تنسيق النص العادي)</h4>

<h5>الحجم 10 نقاط قرائته صعبة </h5>

<h6> الحجم 8 نقاط </h6>

* الأسطر الأفقية :

يمكن استخدام الوسم

لرسم سطر بلون الحالي و هي عادة بعمق 6 بيكسل مع مؤثرات ثلاثية الابعاد عبر عرض النافذة بأكملها كما يمكن تنسيقه عبر الاخيارات التالية :

size = يقوم باعداد العمق مقدراً بالبيكسل

width= يتم اعداد العرض بعدد من البيكسل اة بالنسبة المئوية من عرض النافذة

noshade= يقوم باغاء تفعيل الاثر الثلاثي الابعاد معطياً سطراً مصمتاً

مثال :

<hr size=12 width=80%>




<hr size=8 width=50% noshade>

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

و هذا مثال عن كل ما اخذناه حتى الان:

<html>

<head>

<title>تنسيق النص </title>

</head>

<body>



<h1>منتديات الفريق العربي للبرمجة</h1>

<hr size=12 width=80%>

عنوان المنتدى على الشيكة العالمية الانترنت هو :www.arabteam2000.com/vb

<p>لا تنسى ان هذا الوسم يترك فراغ فوقه </p>



<h2>دروس لغة الhtml</h2>

هنا سلسلة دروس لغة تاشير النص التشعبي


 أي (html)

</body>

</html>

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

* المحاذاة :

يتم عادة عرض النص البسيط و الترويسات مرصوفة الى الطرف اليسار من حافة المتصفح و لكن يمكننا عبر وسوم خاصة ان نضعها في الوسط اة لليمين.

يمكن اعداد المحاذاة عبر عدة طرق و لكن أسهلها هو استخدام الخيار align في الوسوم <..h> و

حيث أن الكلمات المفتاحية هي center للوسط و left لليسار و right لليمين

و هذه امثلة:

<h1 align = center>منتديات الفريق العربي للبرمجة</h1>

<p align = right>لغة ال html</p>

* الوسم

و

يقوم هذا الزوج من الوسوم باعداد المحاذة في وسط الصفحة (توسيط)من أجل كل الصور و النصوص ....التي تتم احاطتهم بها

* مظهر النص :

يمكنك استخدام الوسوم التالية لتعديل مظهر النص و الترويسات:

.. عريض

.. مائل

.. مثل خط الالة الكاتبة

.. أكبر بنقطتين من الحجم الطبيعي

.. أصغر بنقطتين من الحجم العادي

_{.. حرف منخفض}

^..^{حرف مرتفع}

^{و يمكن ان تكون الوسوم متداخلة مع بعضها و هذا يعني ان الوسم الذي يجب اغلاقه اولاً هو الوسم الاخير الذي تم فتحه و اليك هذا المثال:}

<B>ARABTEAM2000HTML

^{* الوسم}

^و

^{يستخدم هذا الوسم بشكل تقليدي للاحاطة بتفاصيل الاتصال بالمؤلف و تاريخ اخر تحديث و يظهر عادة في اسفل الصفحة الرئيسية للموقع.}

^{* الوسم}

^{يتحكم هذا الوسم بكيفية معالجة المساحة البيضاء حيث يتم عرض النص المكتوب ضمن هذان الوسمان}

و

^{مع الحتفظ بالفراغات القفزات و السطور الجديدة بنفس الطريقة التي تمت كتابة الشيفرة بها.}

^{يفيد هذا الوسم لكتابة القصائد ذات الشطرين المتناظرين كثيراًُ.}

^{و هذا مثال للوسوم الفائتة:}

<html>

<head> <title>امثلة عن النص </title>

</head>

<body>

<h2>منتدى تصميم صفحات الوب </h2>

<pre>

      <b>  dark blood

            html

             لغة تأشير النص التشعبي

         </pre>


 منتديات الفريق العربي للبرمجة

<address> dark <sup>b[/sup]lood


اخر تحديث   y/m/d

</address>

</body>

</html>

^{* الحجم :}

^{استخدام الزوج}^...

^{يتم استخدام الوسم <...font>}

^{من اجل اعداد الحجم و اللون و النوع و يمكن اعداد الحجم عن طريق الخيار size=n}

^{حيث n هو الرقم يتراوح بين 1 و 7 حيث}

^{1 هو 8 نقاط}

^{2 هو 10 نقاط و هكذا ......}

^أمثلة:

<font size = 4>منتدى التصميم بالhtml</font>

^{* اللون و النوع :}

^{يمكن اعداد لون الخلفية و الالوان الافتراضية للنص ضمن الوسم}

^{كما يمكن اختيار الالوان في خيارات الوسم}^{يمكن اختيار الالوان باستخدام اسمائها او ارقامها و هذه لاتحة بارقام و بالنسبة للنوع فنقوم بنفس الطريقة .بعض الالوان :}

^{008000# أخضر}

^{00ff00# ليموني}

^{808000# زيتوني}

^{ffff00# أصفر}

^{000080# أزرق داكن}

^{0000ff# ازرق}

^{008080# عفني}

^{00ffff# مائي}

^{000000# أسود}

^{c0c0c0# فضي}

^{808080# رمادي}

^{ffffff# ابيض}

^{800000# احمر داكن}

^{ff0000# احمر}

^{800080# ارجواني}

^{ff00ff# ارجواني محمر}

^{و هذا مثال يبين ذلك:}

<html>

<head> <title>الالوان </title> </head>

<body text=#800080  bgcolor=black>

<center>

منتديات الفريق الغربي للبرمجة

</center>

</body>

</html>

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

أو بمككنا استخدام :

<font color=red size=6 face=arial>

^{هنا سوف يظهر الخط باللون الاحمر و بحجم 6 و نوعه arial}

^{مما سبق نلاحظ ان :}

^{تعليمة لون الخلفية}

^{تعليمة لون الخط}

^{لحجم الخط}

^{لون الخط}

^{نوع الخط}

^{* الخلاصة :}

^{1- يتم تقسيم النص لفقرات و أسطر باستخدام الوسمين}

^و

^{أما الوسوم فتعطيك مجالا من الترويسات}

^{2- اذا اردت تقسيم الصفحة الى اجزاء يمكننا رسم خطوط افقية بواسطة}

^{3- يمكن محاذاة النص لليمين و اليسار و الوسط بواسطة algin}

^{4- اذا اردنا تخصيص مظهر النص نستخدم الوسم}^{و خياراته}

^{---------------------------------}

^{و بهذا و بعون الله يكون الدرس الاول قد اكتمل}

^{و في الدرس الثاني سوف يتم شرح التعامل مع الارتباطات}

^{أرجوا ان اكون وفقت في الدرس}

^{ارجوا من كل اخ ان يسأل عن اي امر لا يفهمه كي اجاوبه .}

^{و الله ولي التوفيق}

#211 أغسطس 2003 في 22:33

كم أنت رائع يا أخ dark blood

ننتظر الدرس الثالي فلا تتأخر

#312 أغسطس 2003 في 18:41

هذا واجبنا يا أخي و سأحاول ان اكتب الدرس الثاني في أقصر وقت;)

#412 أغسطس 2003 في 18:59

عساك عالقوة

#513 أغسطس 2003 في 18:32

الله يخليك يا أخ alyafei2000:D

سلسة دروس html- الدرس الأول

..

..

بحجم 24 نقطة لان ذلك يتعلق باعدادات المتصفح.

مواضيع مشابهة