الدرس الأول
تصميم صفحات
Web
خدمات
الأنترنت متعددة منها :
Mail server
: يخزن رسائل البريد الالكتروني .
Chatting
: خدمة محادثة مباشرة ( on line
) بين طرفين (P C
) .
Video conferencing
: تطوير ل chatting
واضافة الصوت والصورة .
Chat server
: مخدم محادثة مسؤول عن محادثات الزبائن مع بعضهم البعض
online .
Web
: وهي خدمة قلبت معايير الأنترنت رأساً على عقب صممها
Tim-Lee Berner سنة
1990 .
News groups
: مجموعات أخبارية والمسؤول عنها مخدم الأخبار
news server وعليه توجد مجموعات
الأخبار . وكل مجموعة مختصة بمجال معين من الأخبار ( سياسية – اقتصادية –
اجتماعية – فنية – ثقافية – تجارية – موضة – طبخ ..............) .
ويدور حوار بين هذه المجموعات
مع بعضها وكذلك يستطيع الزبون المشاركة في الحوار مع وبين مجموعات الأخبار .
Voice over IP
: أي تحميل
الصوت على IP .
كل الخدمات على شبكة
الانترنت تعمل بتقنية client / server
. وتحتاج الى مستعرض .
Web
: وهذه الخدمة مسؤول عنها مخدمها الخاص وهو
web server وهذا المخدم يحوي عدد
من المواقع تدعى sites
ويتم الاتصال مع الsite
على العنوان المخصص لهذا الموقع . ( كل موقع هو
وحيد وكذلك عنوانه وحيد أيضاً web address
) .
كل
site يتألف من عدة صفحات تدعى
web pages .
Server address \ path \
file = عنوان الصفحة .
اٍن البروتوكول الأساسي
المسؤول عن الاتصالات على الانترنت هو TCP/IP
.
ويوجد بروتوكولات أخرى مسؤولة
عن مهام أخرى .
اٍن البروتوكول المسؤول
عن الاتصال ب Web هو :
HTTP
http//server address/path
file .
الملفات على
web مكتوبة
بلغة HTML ويفهمها ال
Browser الذي يفسر لغة
HTML .
Browser = HTML
Interpreter مترجم
Compiler
( المفسر ) : يحول اللغة الى لغة أخرى وهذا هو الفرق
بين المفسر والمترجم .
Interpreter
: ينفذ الملف مباشرة دون التحويل الى لغة أخرى .
اٍن
صفحات Web
تحوي عدة عناصر منها
:
-
نصوص
Texts : يمكن أن تكون منسقة
Formated . ومن هذه
النصوص ما يسمى Hyper Text
وهو عبارة عن نصوص موجودة في صفحة
HTML والهدف منه ربط هذه
الصفحة مع صفحة أخرى موجودة على هذا الموقع أو آخر . و
Hyper Text يحوي بداخله
Hyper Link .
-
صور
Images : يمكن أن تكون ثابتة
أو متحركة animated .
ويمكن أن تحوي الصور Hyper Link
أيضاً .
-
النماذج
Forms : شكل يحوي مجموعة من
الحقول يمكن أن يتفاعل معها المستثمر .
-
اٍطارات
Frames : ضمن كل
Frame يمكن أن أعرض صفحة
Web مختلفة .
-
مقاطع صوتية : اي ملف صوتي
.
-
مقاطع فيديوية : اي ملف
فيديوي .
HTML
اٍنّ
أي صفحة مصممة لتعرض على
Web يجب ان تكون مكتوبة ( مصممة ) بلغة
HTML مباشرة باستخدام منقحات
النصوص مثل ( المفكرة – الدفتر – word
........) .
أو نستخدم
مساعدات للغة
HTML والتي تسمى
HTML Editors ومنها
Front Page وتدعى عادة :
WYSIWYG =
What you see IS what you get
ولغة
HTML عبارة عن مؤثرات ندعوها
( Tags ) وكل منها يؤدي عمل ما
وعمل أي مؤثر متعلق ويؤثر على ال objects االذي
يليه , وشكله هو :
< Tag > ……..< / Tag >
حيث
< Tag > يعلن عن بداية
المؤثر ( أي بداية تأثير المؤثر ) .
< / Tag
> يعلن عن نهاية المؤثر ( أي نهاية
تأثير المؤثر ) .
يتألف ملف
HTML من جزئين :
ترويسية Header
جسم
Body
الأوامر
المكتوبة ضمن ال Header
لا تظهر ضمن نافذة المستعرض .www.tartoos.com
الذي يظهر
فقط الأوامر المكتوبة في الجزء Body
.
اٍن ملف
HTML يبدأ دائماً بالجزء
< HTML > وينتهي بالجزء
< /HTML > .
أما الجزء
< HEAD > فيحدد بداية
المقطع الذي يحوي على المعلومات الخاصة بتعريف
الصفحة كالعنوان الظاهر على شريط عنوان المتصفح , وهذا العنوان بدوره يحتاج
الى أن يوضع بين جزئين :
< TITLE >
...... < /TITLE > وبالطبع يجب كتابة الوسم
< / HEAD > لإنهاء
المقطع .
ثم يأتي
الجزء < Body > والذي تتم
كتابة نصوص صفحة Web ضمنه
. بالإضافة الى ادراج الصور والجداول وباقي محتويات الصفحة , وهو أيضاَ يحتاج
الى جزء الإنهاء </ Body >
.
اذاً ملف
HTML يأخذ الشكل التالي :
< HTML >
< HEAD
>
< TITLE
>
This is a
first web page
< / TITLE
>
< / HEAD
>
< Body
>
......محتويات الصفحة ........
< /
Body >
< / HTML >
تلاحظ أن
كل جزء تبدأ به يجب أن تنهيه .
يجب أن
تحفظ جميع ملفات الموقع الواحد ضمن نفس المجلد لسهولة الحصول عليها ( يفضل
ذلك ) , ولا تنسى ان الامتداد المستخدم في أسماء ملفات
HTML هو
htm . أو html
.
-
بعض
الملاحظات عند كتابة صفحة Web
:
1.
لا
يوجد فرق بين كتابة المؤشرات بالأحرف الانكليزية الكبيرة
UPPER CASE أو بالأحرف الصغيرة
lower case . لذلك نستطيع
الكتابة بأي شكل منها أي كليهما معاً .
-
اٍن المتصفحات لا تأخذ بعين
الاعتبار الفراغات الزائدة أو ٍاشارة نهاية الفقرات ( أي عندما تقوم بضغط
مفتاح ( Enter
التي تجدها هذه المتصفحات في
ملف HTML
.
أي
يمكنك كتابة ملف بالشكل التالي :
< HTML >
<HEAD > <TITLE>…. text…. </TITLE > </HEAD > < Body >
….Text….</Body
> </HTML >
أو بالشكل
التالي :
< HTML >
< HEAD >
< TITLE >
…..Text….
…..Text….
وفي كلا
الحالتين ستحصل على نفس
النتيجة .
لكن هذا لا
يعني أن الفقرة المكونة من عشرة أسطر ستمتد الى عدة أمتار بعرض الشاشة ,
بالطبع لا , لأن المتصفح سيقوم بعمل التفاف تلقائي لها بحسب عرض الشاشة ,
مهما كان مقدار هذا العرض .
ولكن كيف
يمكن التحكم بمقدار النص المكتوب في كل سطر وكيف يمكن تحديد نهاية الفقرة
وبداية الفقرة التي تليها ؟
الجواب
: نستخدم المؤثر < BR
> لتحديد نهاية السطر والبدء بسطر جديد ( اي كأنك
تضغط Enter في أي منقح
نصوص ) . وهذا المؤثر مفرد أي ليس له مؤثر نهاية ,
و BR تعني
Break .
3- اٍن ضغط
المفتاح Enter تفهمه
HTML كفراغ
Space وليس انتقال الى سطر جديد.
4- اٍن
ملفك يحفظ محلياً وليس على مخدمات الانترنت .
5- اٍن
المؤثر يمكن أن يأخذ أكثر من بارامتر
( محدد ) كما يلي :
< Tag
param1= value1 param2=value2….>…..</Tag > .
مثل
المؤثر < font > والمؤثر
< Color > .
وبعضها لا
تأخذ بارامتر مثل < Center >
و < Bold > و
<Italic > و ........
-لنأخذ
بعض المؤثرات التي سنستخدمها في هذا الدرس :
< B >
تجعل الخط Bold
أسود عريض .
< U >
تجعل النص مسطر ( تضع تحته سطر )
.
<
I > تجعل النص مائلاً
( Italic ) .
< BR >
تعني
Break اي انتقال الى سطر جديد .
< Center >
يضع النص في نصف السطر , وهذا ال
Tag يتضمن المؤثر
< BR > .
ملاحظة : عدد من الفراغات
المتتالية باستخدام المشيرة cursor
يفهمها HTML
كفراغ واحد .
< BIG >
: لتكبير حجم النص والذي يتحدد بعدد مرات كتابة
< BIG > .
:
< SMALL >
لتصغير حجم النص والذي يتحدد بعدد
مرات كتابة < SMALL > .
< &mbsp; >
: يعطي فراغات بعدد مرات كتابته
وهي فراغات صغيرة جداً .
اٍن
الفراغات تعتبر رموزاً خاصة ( كأي حرف ) لذلك لا نستطيع التحكم بها وبعددها
اٍلاّ باستخدام المؤثر &mbsp;
( Non Breakable space
) .
واٍذا
أردت ادخال عدة فراغات بين نص وآخر فما عليك اٍلاّ كتابة هذا المؤثر بنفس عدد
الفراغات المطلوبة , كما يجب عليك هنا التقيد بالأحرف الصغيرة .
< FONT >
: هذا المؤثر يتحكم بالخط وله عدة
بارامترات وشكله :
< Font Size
= Value Face =Value Color = Value > ….< / Font >
-
البارامتر Size ويأخذ
الأرقام من1…….7
حيث 7
أكبر حجم .
< Font Size
= 5 > …Text …< / Font > .
البارامتر Face وهو يحدد
شكل الخط بالاعتماد على الإسم
المتداول .
< Font Face
=" ANDALUS" > ….Text….< / Font >
-
البارامتر Color : يحدد
لون النص ويوجد عشرات الملايين من الألوان ( سيشرح بالتفصيل لاحقاً ) .
< Font Face
=" Red " > ….Text ….< /Font >
< SUP >
: اختصار ل Superscript
ويكتب الحرف أو الرقم بشكل يعلو السطر .
< SUB >
: اختصار ل Subscript
ويكتب الحرف أو الرقم تحت السطر .
مثلاً
لكتابة المعادلة التالية : X2 +3yj = 0
نكتبها كما يلي :
X < SUP > 2 <
/SUP > + 3y < SUB > J < /SUB > = 0
ملاحظة
:
هناك العديد من الرموز الخاصة التي يجب أن تكتب بصورة
معينة باستخدام المؤثرات وليس مباشرة بصورتها العادية , مثل ( اٍشارتي أكبر
وأصغر واٍشارة الاقتباس ) كل هذه الإشارات تستخدم أصلاً مع المؤثرات فهي
محجوزة ضمن مفردات HTML
ومن الخطأ أن نستخدمها بصورتها الصحيحة بدون مؤثرات , فذلك يؤدي الى أخطاء
في عرض Web وهناك رموز
غير موجودة على لوحة
المفاتيح مثل رمز حقوق الطبع © Copy
right ورمز العلامة المسجلة
® ل Trad
mark فهي تحتاج مؤثرات لإظهارها في صفحة
Web .
والجدول
التالي يبين بعض هذه الرموز ومؤثراتها المكافئة :www.tartoos.com
|
<
|
& lt ;
|
1/2
|
½
|
£
|
& povnd
;
|
|
>
|
& gt ;
|
3/4
|
¾
|
¥
|
& yen ;
|
|
&
|
& amp ;
|
R
|
®
|
¿
|
& iquest
;
|
|
"
|
& qvot :
|
±
|
±
|
°
|
& deg ;
|
|
C
|
& copy ;
|
µ
|
µ
|
¦
|
& brvbar
;
|
|
TM
|
& # 153 ;
|
¶
|
¶
|
§
|
& sect ;
|
|
1/4
|
& frac 14
;
|
|
¢
|
¹
|
& supi ;
|
الألوان
نطلق كلمة
خاصية ( Attribute ) على
التعابير التي تضاف الى
المؤثرات Tags من أجل
تحديد الكيفية أو الشكل الذي تعمل به هذه المؤثرات , أي أن المؤثر يقوم
باٍخبار المتصفح ( Browser
) عن العمل الذي
يجب القيام به , أما الخاصية
فتحدد الكيفية التي سيتم بها أداء هذا العمل .
وكمثال على
ذلك تأمّل الشيفرة التالية :
< BODY BG
COLOR ='' FFFFFF '' >
....................
....................
< / BODY
>
ففي هذه
الشيفرة أضفناالخاصية BG COLOR
الى المؤثر < BODY >
والتي تقوم بتحديد لون خلفية الصفحة التي تقوم بتصميمها . أما القيمة
FFFFFF فهي تمثل اللون
المختار وهنا هو اللون الأبيض . ( لاحظ أنها تكتب بين اٍشارتي تنصيص " "
) .
اللون
الأسود يمثل القيمة " 000000 "
.
اللون
الأزرق يمثل القيمة " 6699cc "
......... الخ
فمن أين
جاءت هذه القيم ؟
هناك ثلاثة
ألوان رئيسية هي الأحمر R
والأخضر
G والأزرق
B والتي تمثل نظام لوني معروف
باسم RGB
Red = R ,
Blue = B , Green = G
ولكل منها
يوجد 256 درجة لونية
ويعبر عن هذه الدرجات بالأرقام من 000 وحتى
255 . ومن خلال مزج هذه
الألوان بدرجاتها المختلفة نحصل على ألوان جديدة .
حيث تعطى
نسبة مئوية لكل لون حتى نحصل على لون جديد :
أبيض =
color →
255 ( 100
) = B 255
( 100
) = G (
255 )
100 = R
أسود =
color →
000( 0
) = B
000
( 0
) = G (
000 )
0 R =
وهكذا
وبنفس الطريقة باٍعطاء( نسبة لكل لون ) يتم تكوين ألوان جديدة .
ومن الحساب
التالي 256 ×256 ×256
ينتج لدينا أن عدد
الألوان التي يمكن الحصول عليها بمزج هذه الألوان الثلاث ( أي النظام
RGB فقط ) هو :16777216
لون بالضبط .
لكن من أين
جاءت الرموز FFFFFF والتي
عبرت عن اللون الأبيض ؟
اٍنها
أرقام مكتوبة بالنظام الست عشري ( وهو نظام عددي أساسه الرقم
16 ويعبر عنه باستخدام الأرقام
العادية من 9------0
والرموز ( A , B , C , D , E , F
)
( 10, 11, 12, 13, 14, 15 )
فمثلاً
الرقم FF بالنظام الست
عشري يكافئه الرقم 255
بالنظام العشري .
اذاً
FF على اليسار يمثل
الدرجة 255 للون الأحمر و
FF في الوسط يمثل الدرجة
255 للون الأخضر و
FF في اليمين يمثل الدرجة
255 للون الأزرق .
اٍذاً الألوان تمثل في لغة
HTML
بالنظام الست عشري .
وهناك
برامج خاصة تستطيع من خلالها دمج الألوان الثلاثية بنسب مختلفة ومن ثم يقوم
البرنامج بتوليد الرمز السداسي عشري المكافئ للون الناتج . من هذه البرامج (
Corel – Photoshop -
الرسام - ......الخ )
وهناك عدة
أنظمة الألوان بالإضافة للنظام RGB
منها : HSB , CMYK ,
LAB
ملاحظة هامة : بعض
المتصفحات لا تتعرف على رموز الألوان اٍلاّ بوضع اشارة # قبل هذه الرموز ,
لذلك يفضل استخدامها دائماً .www.tartoos.com
وبالنسبة لبعض الألوان الأساسية
والدارجة فيمكن استخدام أسمائها مباشرة بدلاً من الأرقام ومنها :
|
Black
|
أسود
|
White
|
أبيض
|
|
Red
|
أحمر
|
Green
|
أخضر
|
|
Marron
|
بني
|
Purple
|
بنفسجي
|
|
Navy
|
أزرق غامق
|
Blue
|
أزرق فاتح
|
|
Teal
|
|
Line
|
فوسفوري
|
|
Gray
|
|
Silver
|
فضي
|
|
Olive
|
زيتي
|
Aqua
|
أزرق سماوي
|
|
Fuschia
|
|
Yellow
|
أصفر
|
يمكن تسمية
Magenta ل
" fuschia "
و
Cyan ل
" aqua "
|
