هيا إلى عالم ال HTML
ــــــــــــــــــــــــــــــــــ
HTML = اختصار ل ( Hayper Text Markup Language ) و هي تعني بالعربية = لغة تركيز النصوص التشعبية .
في جوهره , مستند HTML هو مجرد ملف نصي عادي يحتوي على شيفرات خاصة تسمى " الوسوم " (TAGS) في معظم الأحيان يملك كل عنصر وسم فتح و و وسم إغلاق (< ,> ) .
الوسوم
ـــــــــــ:
1- HTML
وسم أساسي يشير للمستعرض أن المواد التي تليه يجب معالجتها باستعمال قواعد التركيب النحوي و البنيوي الذي تفرضه اللغة HTML
وسم إغلاق . لا يجب أن تضع أي شئ خارج هذين الوسمين .
2- HEAD
, وسوم الترويسه أو الرأس : تحتوي على بنود لا تظهر بالعادة على الصفحة بشكل مباشر .
من أهم عناصر في هذا الوسم هو و ما بداخله سيظهر في شريط عنوان المستعرض . ( إنظر أعلى الصفحة )
3- BODY
, وسوم الجسم ـ كل ما يقع ما بين هذين الوسمين , سيكون من المواد المرئية على الصفحة .
إلى هنا تستطيع أن تبني أول صفحة لك :
مثال :
لقد قمنا ببناء أول صفحة .
لكي ترى المثال إضغط هنا :
www.angelfire.com/al/abgari/1.html 4- وسوم تنسيق الأحرف :
, يحيط الوسمان بالكلمات لجعل النص أسود عريضاً
, لجعل الكلمات مائلاً
, لجعل الكلمات مسطراً ( للتسطير )
, و ذلك للشطب
, لرفع الأحرف
يمكن إستخدام الوسم لإعداد تنسيق نصي أكثر تعقيداً . يدعم هذا الوسم سمات (Attributes) متعددة :
COLOR لتغيير لون الخط
SIZE لتغيير قياس الخط و يمكن ضبط مقياس الخط من 1 إلى 7 حيث 7 هو الأكبر .
FACE لتغيير نوع الخط
دعونا نجرب ما تعلمناه :
هذا نص
عريض.
هذا نص
مائل.
هذا نص
تحته خط .
هذا نص مكتوب بلون أزرق.هذا نص مكتوب بقياس كبير.لإلقاء النظر إكبس هنا
www.angelfire.com/al/abgari/2.html 5- وسوم تنسيق الأسطر :
قد تتفاجأ عندما تعلم بأن ال HTML يعاج الأسطر المستقلة في السرد كأنها سطر متواصل . وكي نفصل سطر عن سطر آخر نستخدم :
, يقومان بتعريف كتلة من النص بإنهما فقرة . وسم
إختياري
ينشاً خط أفقي على عرض الصفحة . هناك سمتان يتم إستخدامهما مع هذا الوسم :
ا- SIZE لتحديد ثخانة الخط و يمكن ضيطه بالبكسلات أو نسبة المئوية .
ب- Width لتحديد عرض الخط و يمكن تحديده بالبكسلات
من إحدى أهم الوسومات . و يستخدم لتحديد الفاصل بين الأسطر و لست بحاجة لأن تضيف
.
, لوضع القائمة ما بينها . و تستطيع ترقيمه من -7 إلى 0 و إلى 7 .
هذه كتلة من النص.
هذه كتلة أخرى .
هذا عنوان رقم 1.هذا عنوان رقم 2.هذا النص لم يقطع.
نهاية هذا
النص سيتم قطع النص .
هنا النص سيبقى متواصلاً . إذا لم يقطع النص .
لإلقاء النظر على المثال إضغط هنا
www.angelfire.com/al/abgari/3.html 6- سمات المحاذاة و وسومها
تتيح لك HTML التحكم بالموضع الأفقي للعناصر على الصفحة .
سمة : ALIGN . هناك عدة وسوم تدعم السمة ALIGN للتحكم بالسطر أفقياً بما في ذلك ال
و أيضاً :
,
مثال :
هذا النص سيكون على اليسار.
هذا النص في الوسط.هذا النص سيكون في الأيمن.هذا النص أيضاً في الوسط.
لإلقاء النظر على المثال إضغط هنا :
www.angelfire.com/al/abgari/4.html وسوم الصور و الإرتباطات التشعبية :
تزود الصور و الإرتباطات التشعبية بعض الفوائد الكبرى للغة HTML . تتيح لك HTML إظهار عدة أنواع مختلفة من الرسوم , أكثرها شيوعاً GIF , JPEG .
![]()
, يتم إستعمالهم لوضع الصورة في النص . وسم الإغلاق إختياري و نادراً ما يتم إستخدامه .
هناك عدة سمات تعرف كيفية إظهار الصورة .
SRC التي تعنون مكان الصورة المراد إظهارها .
WIDTH , HEIGHT و كلاهما بالبكسلات ز و هما يحددان عرض و إرتفاع الصورة .
[url=], [/url]يستعمل لإرتباطات التشعبية . و عادة العنوان في الصفحة يظهر بلون أزرق مسطر و عند الضغط عليه ستنتقل من مكان إلى مكان آخر .
و يستخدم معه سمة HREF و تعرف السمة HREF مكان الذي يجب أن ينتقل إليه الإكسبلورر .( المتصفح)
مثال :
هنا صورة
.
هنا إشارة إلى موقع
الساحة.
النص المقبل يحوي صورة و عنوان .
الحلم العربيإكبس هنا من أجل المثال :
www.angelfire.com/al/abgari/5.html هنا نكون قد وصلنا لنهاية الحلقة الأولى . أتمنى إن إسلوب التعليم قد أعجبكم .
أتمنى أن تعطوني آرائكم عن الموضوع أو أي خطء لم أنتبه إليه .
إذا هناك إي إستفسار يمكنكم إرساله إلى [url=mailto=nooraleken@walla.com]send Mail[/url]
أو كتابته هنا مباشرة .
هل كنت تعلم :
ـــــــــــــــــــ:
بأنك تستطيع إستخدام أمر [url=],
![]()
هنا في الساحة و ذلك بكتابة :
[url] ,هنا تكتب العنوان بدون فاصلة [/url]
[img] ,هنا تعطي عنوان الصورة في الإنترنت أيضاً بدون فاصلة [img]
في الختام أتمنى من الله أن يوفقنا حتى أعطي أكثر من هذا و أخدم أمة الإسلامية بأجمعه .
الثلاثاء سبتمبر 04, 2007 8:40 pm
