الدرس الثاني
BACKGROUND
: تقوم هذه
الخلفية
بتحديد صورة كخلفية أساسية للصفحة كما يلي :
< /BODY >
....... >
" اسم الصورة " =BODY
BACKGROUND <
لنضع صورة كخلفية نلاحظ أن المتصفح قد قام بتكرار عرض الصورة
بطريقة التجانب وأنها أصبحت تغطي كل الشاشة بحيث حجبت اللون الأبيض الذي
وضعناه كخلفية بيضاء من خلال الخاصية
BG COLOR
والحقيقة أن اللون الأبيض يظهر فقط عندما لانقوم باستخدام صورة ما كخلفية ,
ومع ذلك يفضل تحديده احتياطياً , واٍن بعض المتصفحات القديمة توصف بأنها
متصفحات نصية Text-Based
Browser أي ليس باٍمكانها
عرض الصور . أو ربما هناك بعض المستخدمين الذين قاموا باٍلغاء خيار عرض الصور
تلقائياً من متصفحاتهم.www.tartoos.com
< HI >
: وهو
Tag
مسؤول عن زيادة حجم النص بمقدار محدد مسبقاً ضمنه
HEADING
وهو ينقسم الى
6
مؤثرات
من H1 ← H7
حيث : H1 >h2 >h3 >h4 >h
5>h6
و
heading
يتضمن المؤثر
< BR >
.
ومن خصائص المؤثر
< BODY >
خصائص التحكم بألوان النصوص :
TEXT =" #RRGGBB "
تحديد لون النص الأساسي للصفحة .
LINK =" #RRGGBB "
تحديد لون الوصلات التشعبية .
VLINK = " #RRGGBB "
تحديد لون الوصلات التشعبية
التي تمت زيارتها (visited
links ) .
ALINK = " #RRGGBB "
تحديد لون الوصلة التشعبية الفعالة أي عندما يتم النقر عليها
(active links
)
- المؤثرات
الخاصة بالخطوط ( تابع )
المؤثر الأول الخاص بالخطوط هو :
< Font > ……< /Font >
وهو يقوم بالتحكم بالخطوط من حيث النوع واللون والحجم
وأما الخصائص التي نستخدمها مع هذا المؤثر فهي:
Face
:
تقوم هذه الخاصية بتحديد نوع الخط الذي نريده , وقد نقوم بتحديد أكثر من نوع
معاً . وفي هذه الحالة اذا لم يتواجد الخط المحدد اولاً على جهاز الشخص الذي
يتصفح الموقع يتم اعتماد الثاني وهكذا ......
< Font Face =" Traditional Arabic , Arabic Transparent .
Simplified Arabic " >
….. Text ……< /Font
>
Color
:
تحديد لون الخط وذلك حسب مبادئ تحديد الألوان السابق ذكرها .
< Font Color = " #fff0000 " >….Text….< /Font >
Size
: هذه
الخاصية تستخدم لتحديد حجم الخط , ويوجد سبعة أحجام فقط تستطيع المتصفحات
التعرف عليها .
وتقوم بتحديد حجم بأسلوبين : أولهما مباشر حيث يتم كتابة أحد
الأرقام من 1
←
7
< Font Size = " 4 " > ……Text …..< /font >
اما الأسلوب الثاني فهو النسبي : حيث تكتب الأرقام من
6← 1
مرفقة اٍما باٍشارة + أو باٍشارة - .
< Font Size = " +4 " > …. Text…. < /font >
وفي هذه الطريقة فاٍن الأرقام من
6-1
تمثل
درجات التكبير ( + ) أو التصغير ( - ) للخط وذلك نسبة الىالحجم
الافتراضي . فمثلاً الرقم4
+ يعني تكبير الخط أربع مرات عن الحجم الإفتراضي وهو
3
, أي يصبح الحجم
7 . وكذلك
فاٍن الرقم -1
يعني تصغير
الخط درجة واحدة أي يصبح الحجم
2
.
لاحظ
: أنه في الأسلوب النسبي أيضاً لا نستطيع
الحصول على أكثر من سبعة أحجام للخطوط .
< BASE FONT > -
:
وهذا المؤثر يقوم بتحديد نوع الخط
وخصائصه بالنسبة للصفحة كلها . أي أنه يقوم بتعريف نوع الخط الأساسي الذي
سيستخدم في الصفحة من بدايتها الى نهايتها ويحدد لونه وحجمه . وهو مفرد لا
يحتوي على مؤثر لنهايته . وذلك لأنه يتعامل مع الصفحة كلها ولذلك لا حاجة له
لمؤثر نهاية .
اٍذاً هذا المؤثر يكتب في أول الملف ويفضل مباشرة بعد مؤثر
< BODY >
أما البارامترات
المستخدمة معه فهي نفسها المستخدمة مع
< Font >
بالإضافة لذلك نستطيع استخدام البارامتر
Name
بدلاً
من Face
:
< BASE FONT Name = " Arial " Color = " #FF0000 " Size
= " 5 " >
أي أنه يجعل الخط الافتراضي للصفحة نوع
Arial
وحجمه
5
ولونه أحمر .
وبالتالي كل النصوص سيطبق عليها هذا الخط مالم نستخدم المؤثر
< Font > ……< /Font >
لتعديلها والتحكم بمظهرها .
يمكنك استخدام البارامتر
Text
الذي
يكتب مع المؤثر < Body >
والذي يستخدم لتحديد لون
نص الصفحة , وهو لا يتعارض مع
Color في المؤثر
< BASEFONT >
< Hm >……< /Hm > -
:
وهو مؤثر خاص لتمييز العناوين في صفحات
الانترنت وهي :
6-1 = n
ويمثل مستوى العنوان :
< H1 > Heading 1 < /H1 >
< H2 > Heading 2 < / H2 >
< H3 > Heading 3 < /H3 >
< H4 > Heading 4 < /H4 >
< H5 > Heading 5 < /H5 >
< H6> Heading 6 < /H6 >
ولنتحدث الآن عن بعض التنسيقات والتأثيرات التي يمكن
اضافتها للنصوص :
This is Bold Text
< B > text < /B >
This is Strong Text
< STRONG > text < /STRONG >
وتستخدمان لجعل الخط غامق ( أسود عريض )
This is Italic text
< I > text </I >
This is Emphasized text <
EM > text < / EM >
تستخدمان لجعل الخط مائلاً
This is undelined text
< U> text < /U >
تستخدم لوضع خط تحت النص ( نص مسطر ) .
This is subscript text
< SUB > text < /SUB >
تستخدم لجعل النص منخفض عن السطر
This is Big text
< BIG > text < /BIG >
يزيد
من حجم الخط .
This is small text
< Small > text < /Small
>
This is striked
text <STRIKE
> text < /STRIKE >
< S > text < /S >
يجعل النص معترضاً
بواسطة خط .
< TT > text < /TT >
This is Tele type text
ويجعل النص كنص الآلة الطابعة
Tele Type
وهذا النص يعرف أيضاّ بالنص موحد المسافات
Monos paced text
أي اذا أخذنا الحرفينI
أو
mوكتبنا
كل منها عدة مرات متساوية . نلاحظ أن المساحة التي أخذها الحرف
m
هي أضعاف المساحة التي شغلها الحرفi
.
iiiiiiiiiiiiii
mmmmmmmm
أما عند استخدام المؤثر
< TT > ….. < / TT >
فاٍن المساحة التي يشغلها الحرفين متساوية
I I I I I
m m m m m
---------------------------------------------------------
الفقـرات
والقـوائم
www.tartoos.com
اٍن الترتيب هو الخطوة الأولى لجذ ب اهتمام الزائر أو القارئ
لصفحتك وتسّهل عليه فهم الخطوط العريضة للصفحة. لنتابع مع بعض المؤثرات :
< P > ….< /P >-
: وهو مؤثر مفرد يقوم
باٍنهاء الفقرة , ولكنه يستخدم أيضاً كمؤثر مزدوج
< P > ….< /P >
وفي هذه الحالة يمكننا من تحديد اتجاه
الفقرة واتجاه النص فيها حيث نستخدم معه البارامتر
DIR
و
ALIGN
حيث الأخيرة تحدد محاذاة
الفقرة وتأخذ القيم :
Left ,
Center , Right .
< P Align = " left " > This is a lef-aligned paragraph < R
>
الشكل العام :
< P Align = " left , center , right " > < /P >
< Center >
……</Center > -
:
يستخدم
لتوسيط الفقرات أو الكائنات بشكل عام في الصفحة .
DIR
:
عبارة عن بارامتر يستخدم مع
< P >
فيقوم بتحديد اتجاه قراءة النص ويأخذ القيم التالية :
Left to right
اتجاه النص من اليسار الى اليمين
LTR
Right to left
اتجاه النص من اليمين الى اليسار
RTl
< BLOCKQUOTE >
…..< / BLOCKQUOTE > -
وتسمى مؤثر الفقرات المقتبسة , ووظيفتها تمييز الفقرة من
خلال اٍدراج مسافة اٍضافية على الهامشين الأيمن والأيسر لها . وبتكرار المؤثر
تزداد الهوامش . وليس من الضروري ( كشرط ) أن نستخدم مع الفقرات المقتبسة فقط
.
< PRE > …< /PRE > -
:
وهذ المؤثر اختصار
لكلمة Preformated
أي المنسّق مسبقاً
هذا باستخدام المؤثر
< PRE >
D
C B A
H G
F E
L K
J I
P O
N M
أما بدون استخدام
< PRE >
تكون النتيجة كما يلي :
A B C D E F G H I J K L M N O P
وهذا المؤثر يستخدم مع الفقرات التي لا تحتاج الى
تنسيقات متعددة للخطوط أوالألوان بل فقط مع الفقرات العادية موحدة الخط
والتنسيقات .
www.tartoos.com
القـوائم :
تحتوي
HTML
على مجموعة من المؤثرات
المسؤولة عن تنظيم البيانات في قوائم مع استخدام خيارات متعددة ويوجد نوعين
من القوائم :
قوائم متسلسلة مثل :
قوائم غير متسلسلة مثل :
Ordered
Lists
Unordered
lists
1-
دمشق
1- حلب
2-
حلب
2- طرطوس
3-
حمص
3- دمشق
4-
اللاذقية
4- اللاذقية
5-
طرطوس
5- حمص
عند التعامل مع كلا النوعين من القوائم نحتاج الى مؤثرات
خاصة . بتحديد بداية ونهاية القائمة , ومؤثرات تحدد بنود هذه القائمة .
بالنسبة للقوائم المتسلسلة نستخدم المؤثر :
< OL >……< /OL >
بالنسبة للقوائم غير المتسلسلة نستخدم :
< UL > …..< /UL >
ولتعيين كل بند من بنود القائمة نستخدم المؤثر
< LT >
وهو
مفرد يكتب في بداية السطر الخاص لكل بند
List Item
. القوائم السابقة أنشأت
كما يلي :
< UL >
< OL >
دمشق
< LI >
دمشق <
LI >
حلب
< LI
>
حلب
<
LI >
طرطوس
< LI >
حمص
< LI >
اللاذقية
< LI >
اللاذقية <
LI >
حمص
< LI >
طرطوس
< LI >
< /UL >
< /OL >
والبارامتر الوحيد الذي يستخدم مع هذ المؤثرات هو
TYPE
ووظيفته تحديد شكل الرمز الظاهر مع بنود القائمة وعادة تستخدم في البداية .
ويمكننا اعطاء رمز مختلف لكل بند وذلك باستخدام
TYPE
مع < LI >
. أمثلة :
< OL TYPE = " I " > < OL TYPE = " a " >
a
.
A.
i.
b.
B.
ii.
c.
C.
iii.
d.
D.
iv.
e.
E.
V.
اٍن الرمز الموجود عند كل بند من القائمة هو عبارة عن نقطة
سوداء تسمى Disc
وهي معروفة ضمناً في البارامتر
Type
, ولكن هناك رموز أخرى يمكن استخدامها مثل
المربع square
والدائرة المفرغة
circle
وتعرّف بالشكل التالي :
< UL TYPE = "
square " >
< UL TYPE = "
circle " >
ولكن هذا البارامتر لا يعمل اٍلا مع المتصفح
Netscape navigator
ولا
يعمل
معIE
الذي يتعامل فقط مع القيمة
الافتراضية للبارامتر .
هناك نوع خاص من القوائم يدعى قوائم الشرح أوالتعريفات
Definition Lists
وهي تستخدم عندما نريد ادراج قائمة من
المصطلحات يتبع كل واحد منها شرح أو تعليق . مثل :
HTML
Hyper Text Markup Language
WWW
Word Wide Web
ونحتاج لانشاء هذه القوائم ثلاثة مؤثرات :
< DL > ….< /DL >
لتعريف بداية ونهاية القائمة .
< DT >
يوضع قبل كل مصطلح لتحديده
وهو مفرد .
<
DD > وهو مؤثر الشرح
أو التعليق وهو أيضاً مفرد .
< DL
>
< DT >HTML < DD > Hyper Text Markup Language
< DT > www < DD > Word Wide Web
< /DL
>
www.tartoos.com
|
