تعلم html الأصدار الأول

المقدمة
ماهو html ؟
html اختصار ل (hyper text markup language) وهو عبارة عن مجموعة من الشفرات المنطقية(markup)موجودة بين علامتى (اكبر وأصغر من) تحدد مظهر الوثائق والمعلومات التى تحتويها
ماهو الhypertext?هى عبارة عن الحصول على النص بمجرد الضغط ،فهناك طريقتان فى البحث عن المعلومة


linear
hyper

مثال على linear شريط التسجيل فلسماع أغنية يجب تقديم وتأخير الشريط حتى نحصل على الأغنية المطلوبة
ومثال على hyper أسطوانة الصوت فلاختيار أغنية معينة فبمجرد الضغط على أسم الاغنية ننتقل أليهافي الحال فعند تطبيق هذا الكلام على ال(hypertext)
يمكننا أن نقول أنه بمجرد النقر على الوصلة ننتقل حالا ألى موقع جديد فى نفس الصفحة او فى صفحة جديدة وهذا هو مفهوم
(hypertext)

الدرس الاول">
ففى (html) نبدأ بتعريف الصفحة ثم رأس الصفحة ثم عنوان الصفحة ثم جسم الصفحة


مثال:1






السلام عليكم




فى هذا المثال قمنا بتعريف الصفحة بأنها من النوع هتمل
ثم عرفنا رأس الصفحة ثم عنوان الصفحة وهو العنوان الذي يظهر فى محركات البحث أو عندما تضيف موقع ألى قائمتك المفضلة فان الاسم الذى تراه هوالعنوان الذي نكتبه فى ال title لذا يجب أن يكون العنوان هنا دقيق في تعريف محتويات موقعك ليسهل أيجاده فى محركات البحث.ودائما يجب أن يكتب الأمر بين علامتى أكبر واصغر من <> وبعدما كتبنا العنوان ننهى الان الامرين head&title
ثم نفتح الامر body
وفيه نكتب كل مانريد فى الموقع وهنا كتبنا جملة السلام عليكم ثم نغلق الامر body ثم الامر html
ولاحظ أننا نغلق الامر بكتابته هو ذاته مع وضع slash والان لنكتب البرنامج السابق
لنفتح الnotepad
الان أحفظ الملف بالامتداد html او htm
اغلق الملف الان ثم أفتحه ولاحظ عند فتحه ظهور علامة الاكسبلور علي الملف مما يعنى أنه صفحة نت
والنتيجه هى ظهور كلمة السلام عليكم على خلفية بيضاء
الان يمكنك القول انك انشات صفحة ويب ولكننا سنناقش كيفية ترتيب موقعنا وتقسيمه واختيار نوع الخط ولونه وحجمه ولون الخلفيه ...ألخ


(مثال 2:)








مرحبا بك في درسك الاول





لاحظ اننا بعد الامر body كتبنا أوامر أخرى سنتعرض لها فى حينه ثم قفلنا أخر أمر كتبناه ثم الذى قبله حتى الامر body &html والآن أحفظ الملف بلامتداد html أو htm
ان الشفرات الموجودة بين علامتى <> لاتفرق بين الحروف الكبيرة والصغيرة (UPPERCASE &lowercase)فسواء كتبت الاوامر بالحروف الصغيرة أو الكبيرةفان الامر سينفذ ولكن يجب ان يكون بين علامتى <>ويسمى tagوهذه العلامةتوضح للمتصفح أن هذا أمر يجب تنفيذه وليس نص ولكتابة هذه العلامات فى المتصفح تكتب كلآتى & l t ; لعلامة <
& g t ; لعلامة >وينقسم ال tag (وسم) الى تاك فتح <> وتاك نهاية الشفرة < / >
والعناصر المكونة لشفرة html تسمى عناصر (element)
ولكل عنصر مجموعة من الصفات له (attributes)


العنصر font له مجموعة من الصفات مثل السمك(bold) الميل (italic) الحجم (size) وغيره
والصفة غالبا تأخذ قيما رقمية -كحجم الخط وغيره- أوقيما وصفية كدرجة اللون احمر او أصفر ألخ

مثال :3

< html >
< head >
< title >
تعلم هتمل
< /title >
< /head >
< body >
< font color="blue" size="4" >السلام عليكم
مرحبا بك فى درسك الاول
< /font >
< /body >
< /html >


الدرس الثانى

شفرات الالوان
ان الوان الرسم الاساسية ثلاثة أصفر وأزرق وأحمر ومن هذه الالوان يمكن أن نكون جميع الالوان المعروفة
أما ألوان الاضاءة وهو المهم لنا فهم ثلاث الوان رئيسية الاحمر والخضر والازرق
وكل لون من هذه الالوان له 256 درجة لونية فى الهتمل وعلى هذا فلدينا 256*256 *256=16777216 أو24 بت علما بان العين تميز 6 مليون لون فقط

red green blue
RR GG BB
ونلاحظ ان كل لون ياخذ حرفين فما معنى هذا؟


حيث أن الالوان تحسب بالنظام الhexadecimalلذا لنعد من 1 الى 256 ياخذ الشكل

00 01 02 03 04 05 06 07 08 09 0A 0B 0C 0D 0E OF 10 11 12 13 14 15 16 17 18 19 1A 1B 1C 1D 1E 1F 20 21 22 23 ............ FF


,,على هذا فيمكننا التعبير عن اللون المراد بدرجات الالوان الثلاثة ويجب أن نكتب العدد ستة ارقام فمثلا
W(FFFFFF)يمثل اللون الابيض بينما العدد B(00000)يمثل اللون الاسود

المتصفح يقرا اول رقمين على انهما للون الاحمر ثم الرقمين المتوسطين على انهما للون الاخضر ثم اللونين الاخيرين للون الازرق
وعلى هذا يمكن تحديد اللون بطريقتين
الاولى:بالارقام السداسية عشر
الثانية:بكتابة اللون كما بالجدول التالى


RGB COLOR HEXADECIMAL VALUE
WHITE FFFFFF
BLACK 000000
RED FF0000
GREEN 00FF00
BLUE 0000FF
MAGENTA FF00FF
CYAN 00FFFF
YELLOW FFFF00
AQUAMARINE 70DB93
BAKER'S CHOCALATE 5C3317
VIOLET 9F5F9F
BRASS B5A642
COPPER B87333
PINK FF6EC7
ORANGE FF7F00


والامر COLOR يتداخل مع عديد من الوامر الاخري كلامر FONT والامر TEXT
E.G
< BODY TEXT="#FFFF00" TEXT="#FF000" >
السلام عليكم ورحمة الله وبركاته
< /BODY >
وهناك كثير من البرامج يمكن ان تحول الرقم الكودى الى لون البرنامج
تطبيقات:


لننفذ الامر bgcolor وهو الخاص بلون الخلفية

< body bgcolor="ffff00" >
< dir=rtl>السلام عليكم ورحمة الله وبركاته


ولتنفيذ الامر مع النص
< body text="#ff0000" >
< /body >

لاحظ علامة# التى وضعناها قبل الترقيم اللونى وذلك لان بعض المتصفحات لتعرف الالوان الا اذا كان قبلهاذلك الرمز

استخدام الامر colorمع العناصرlink ,vlink and alink
link="وهى مظهر الوصلة العادى"
vlink="مظهر الوصلة المزارة"
alink="مظهر الوصلة النشطة"
يمكن وضع صورة كخلفية بدلا من اللون كلاتى
< body back ground="logo.gif" bgcolor=#"ffff00" > ويجب تحديد المسار لملف الصورة
ولقد كتبنا اسم الصورة والامتداد فقط لاننا فرضنا انها تقع فى نفس المجلد الموجود به موقعنا ولقد كتبنا #ffff00 كخلفية وذلك لسببين
الاول ان الصورة تاخذ وقتا فى التحميل لذا جعلنا الخلفية لون حتى تحمل
الثانى لولم تحمل الصورة يكون لنا خلفية خاصة بنا حيث أنه فى بعض المواقع فى حالة عدم تحميل الخلفية أو اثناء تحميله فانه يحمل خلفية خاصة به وغالبا اعلانية ولاتتوافق مع لون النص ويجب ان نستخدم صورة من النوع المضغوط gif أو jpg


الدرس الثالث
heading
فى هذا الفصل سنعمل ترويسة "عنوان" بخط متميز عن النص ونقوم بانهاء السطر عند كلمة معينة وضبط عرض السطور مع عرض الصفحة وانشاء مسطرة أفقية

أولا الترويسة: heading ويكون الأمر < H x > < /Hx >
حيث H أختصار HEAD وX رقم يأخذ القيم من 1 الى 6 ويحدد حجم الخط والرقم 1أكبر الخطوط و6 أصغرها
< BODY >
< H1 >
السلام عليكم ورحمة الله وبركاته

< /H1 >
< /BODY >


ثانيا: اضافة فقرة
يكون الغرض منها هو ضبط نهاية السطور مع عرض الصفحةللمتصفح ويكون الامر < P > ....< /P >
حيثP أختصار لPRAGRAPH حيث < P >تكون أول السطر و< /P > آخر السطر ويكون الامر
< BODY >
< P >
السلام عليكم ورحمة الله وبركاته أن الحمد لله نحمده ونستعينه ونستغفره ونستهديه ونعوذ بالله من شرور أنفسنا وسيئات أعمالنا من يهده الله فلا مضل له ومن يضلل فلا هادي له
< /P >

تنويه"- اذا أردنا أن نفصل بين كلمتين بأكثر من مسافة واحدة فاصلة ولتكن (5) فان المتصفح سيعتبرها واحدة ولكى نجعلها (5) مسافات نستخدم الأمر NBSP لكل مسافة واحدة فاصلة وهى أختصار (NON-BREAKING SPACE) وهى مصطلح يأخذ القيمة مسافة فى المتصفحات ويكتب هكذا &NBSP < BODY >
السلام عليكم &NBSP ورحمة الله &NBSP وبركاته < /BODY >
لاحظ اننا لم نضع &NBS بين <>
واليك جدول بالرموز التى تستخدم لبعض العلامات < & L T ;
> & G T ;
& & A M P;
" & Q U O T ;
& S H Y ;
& C O P Y
¼ & F R A C 1 4;
¾ & F R A C 3 4
& R E G ;

± &PLUSMN;
µ &MICRO;
¶ &PARA;
· &MIDDOT;
¢ &CENT;
£ &POUND;
¥ &YEN;
¿ &IQUEST;
° &DEG;

¦ & b r v b a r ;
§ & s e c t ;
¹ & s u p 1 ;
² & s u p 2 ;
³ & s u p 3 ;
« & l a q u o ;
» & r a q u o ;

ثالثا: الامر BREAK ويستخدم كنهاية فقرة ويكتب فى نهاية الجملة فقط
...... < BR >
< BODY > السلام عليكم< BR > ورحمة الله < BR > وبركاته < BR > < /BODY >
ويكون الناتج
السلام عليكم
ورحمة الله
وبركاته
لاحظ أن الامر
أمر منتهى لذا لم نستخدم < /BR >
للعنصر
صفة واحدة وهى CLEAR وهى تأخذ القيم RIGHT, LEFT,ALL
رابعا:الأمر
< HR >.....< /HR >HORIZONTAL RULEالخط الأفقى


وهو يستخدم لاظهار خط أفقى فى متصفحك كلآتى



--------------------------------------------------------------------------------
صفات العنصر < HR >
القيمة الافتراضية الوصف الصفة
2 بكسل أرتفاع المسطرة بالبكسل الحجم
100% عرض المسطرة بالنسبة للمتصفح الصفة
notset (3dlook) مسطرة مسطحة وليس ثلاثية الابعاد noshade
notset (3dlook) وضع لون المسطرة color
مثال:
< body >
< hr size="4" width="70%" align="center" color=#"0000ff" >
ويكون الناتج الخط الازرق التالى
--------------------------------------------------------------------------------

الدرس الرابع


الخط FONT

< FONT > .... < /FONT >

صفات الخط هى

مقاس< SIZE > : وتأخذ القيمة من±1 الى ±7
(bold) < b > سميك< /b >

< strong > سميك< /strong >وهو كلامر السابق وهو قليل الاستخدام

(italic) < i >مائل< /i >

(emphasis)< em > مائل < /em >وهو كلأمر السابق وهو قليل الأستخدام

(underline) < u > مسطر < /u >

لون الخط (color)وهو يأخذ القيمة (#rrggbb)

أعادة التشكيل (preformatted)< pr > وهويحجز نفس المساحة للحرف كلآلة الكاتبة < pr >

(teletype)< tt > وهو كلأمر السابق < /tt >

(citation) < cite >لتغيير نوع الخط للتنويه مثلا < /city >

< strike >وهو خط يمر خلال النص < /strike >

< big >وهولتكبير الحروف< /big >

< small >لتصغير الحروف < /small >

< sub > لوضع الكلام صغير أسفل الخط < /sub >

< sup > لوضع الكلام أعلى الخط < /sup >

متنوعات:

< dfn > defining instance of the enclosed term < /dfn >
< code > used for extracts of program code < /code >
< samp > used for sample output from programs,scripts,... < /samp >
< kbd > used for text to be typed by the user< /kbd >
< var > used for variables or argument to commands < /var >
< base font > ويستخدم ليكون الخط الرئيسى هو الغالب على النص
ترقيم العناصر


list element

اذا اردنا أن نكتب فى الهتمل كقائمة نستخدم الأمر (list element)وتنقسم الى اثنين
unorderd list
orderd list
أولا :القائمة الغير مرتبة(unorderd list)
< ul >
< li > list item ...< /li >
< li > list item ...< /li >
< li > list item ...< /li >
< /ul >
ويكون الشكل الناتج هو.

list item...
list item ...
list item ...
وهناك ثلاث أختيارات للكرة الصغيرة :(bullet)

disc
circle
square
list item...
list item ...
list item ...
list item...
list item ...
list item ...
list item...
list item ...
list item ...
ويكتب الأمر كلآتى:
< ul type="square >
< li > list item ...< /li >
< li > list item ...< /li >
< li > list item ...< /li >
< /ul >
ثانيا :orderd list
وفيها يتم ترقيم القائمة
< ol >
< li > list item < /li >
< li > list item < /li >
< li > list item < /li >
< /ol >


والناتج هو

list item
list item
list item
وهناك خمسة طرق للترقيم
الأرقام العربية أبجدية الحروف الصغيرة أبجدية الحروف الكبيرة الأرقام الرومانية الصغيرة الأرقام الرومانية الكبيرة





















والترقيم الرقمى هو الأفتراضى
< ol type="i" > < li > list item < /li >
< li > list item < /li >
< li > list item < /li >
< li > list item < /li >
< /ol >
ويكون الناتج

list item
list item
list item
list item
أنظر الى هذا المثال
< ol type="i" start="5" > < li > list item < /li >
< li > list item < /li >
< li > list item < /li >
< li > list item < /li >
< /ol >
ويكون الناتج

list item
list item
list item
list item
ثالثا:قائمة التعريف
difination list < dl >
هذا النوع من ترتيب القوائم يختلف عن سابقيه كما ترى فى هذا المثال < < dl >
< dt >السلام عليكم < /td >
< dd > السلام عليكم ورحمة الله وبركاته< /dd >
< dt > السلام عليكم < /dt >
< dd > السلام عليكم ورحمة الله < /dd >
< /dl >
ويكون الناتج

السلام عليكم

السلام عليكم ورحمة الله وبركاته
السلام عليكم
السلام عليكم ورحمة الله وبركاته
لاحظ أن الجملة الموضوعة بين < dt(definition term) > ...< /dt >
هى الكلمة الأساسية
بينما الجملة الموضوعة بين < dd (definition description) > ..... < /dd > هى الجملة الوصفية للجملة الرئيسية
رابعا :nesting list
أذاتم تفريع أكثر من قائمة يسمى الشكل nesting list كلآتى

list item ...
list item
list item....
list item....
list item....
list item....
list item....
list item....
list item....
list item....


item list....
item list....
item list....
كيف أمكننا فعل ذلك تركتها لك


الدرس السادس


الصور images

فى هذا الفصل سيتم التعرف على كيفية وضع الصور فى صفحتك
وفى نهاية الكورس يجب أن تعلم:
التمييز بين الصور التى تدعم والتى لاتدعم المتصفحات
تحديد أى هيئة من الصور تناسب موقعك
أضافة صورة للصفحة أشكال الصور المدعمة للصفحات

gif وهى أختصار ل(graphic interchange format)
صفات الصورة
أفضل التشكيلات لعرض الصور والتى تستخدم فى تصميم البرامج الرسومية مثل اللوجووالأيقونات والأزرار فىصفحتك
أذا تم حفظ gif 89a ك interlace فان المتصفح سيعرضها بالتدريج قطعة قطعة ولكن حفظها interlaced يأخذ مساحة أكبر
مع gif يمكنك أستخدام لون كشفيفة والذى يسمح لخلفية اللون أو الصورة يعمل كعلامة مائية
أخف الصور فى عمل الحركات على الويب
ثانيا: jpg or jpeg وهى أختصار ل(joint photographic export group)

يحتوى على ملايين من الألوان
لايعطى خاصية الشفيفة أو خاصية interlace
حجم معقول للصورة لذا يمكنك أن توازن بين حجم الصورة وجودتها
ثالثا : هذه الأنواع تدعمها بعض المتصفحات دون الأخرى
png portable network group
bmp ms windows bitmap
tiff tagged image file format
pcx ولتوليف الصورة انظر
وأمر تعريف الصور الرسومية < img > .... < /img >
والصورة يجب تحديد مسارها تحديد كامل ويجب تحدبد حجمها والاطار الخارجى لها وحجمه والهوامش المحيطة بالصورة مثال:

< img src="1.jpg" alt="السلام عليكم aignement="center" width="250" height="250" border="5" hspace="30" vspace="50">



التحليل :نحن قمنا بوضع صورة فى صفحتنا تسمى 1.gif وهذه الصورة فى المجلد mوالمجلد نفسه موجود مع ملف الصفحة فى نفس المجلد
ويجب أن نعرف المسار كاملا لملف الصورة
لقد عرفنا المسار بلأمر (src)
ثم قمنا بكتابة تعليق على الصورة بلأمر altيظهر عند مرور المؤشر عليها.
وطول الصورة(height)=250 وعرضها (width)=250 ثم عرفنا الحد الخارجى للصورة (البرواز)بأنه 5 بكسل بلأمرborder ثم كان الفراغ الرأس vspace والأفقى hspace حول الصورة.

الدرس السابع


الوصلات

الوصلات ثلاثة أنواع

وصلة تنقلك لفقرة فى نفس الصفحة.
وصلة تنقلك لصفحة أخرىفى نفس الموقع.
وصلة تنقلك لموقع آخر.
والوصلات هذه تكون متاحة بواسطة url's(uniform resource locator's)
والامر هو

< ahref="url" >......< /a > a(anchor)
hrefصفة للعنصر anchor الموصف لurl . لو أن لهذه الصفة قيمة فان المحتويات بين < a >......< /a >سوف تتحول ليد عند وقف المؤشر عليها وبالضغط عليها ستؤدى الى فتح الملف الموصف بurl
e.g:
< a href=http://www.xnu.com>موقع تعليمى < /a >
والناتج هو
موقع تعليمى


ماهو ال(url)?


هو عبارة عن طريقة قياسية تحدد الخدمة (service)والمضيف (hostname) والميناء(port)والمسار (path).


أمثلة على أنواع الخدمات:

http: hyper text transport protocol
e.g:
نوع الخدمة httpوهى بروتوكول قياسى لوصل محتويات صفحات الشبكة بالوسائط المتعددة واسم المضيف هو wwwفى النطاق tripodفى المنطقة com (commercial)بينما الصفحة المرادة هى members
ftp:file transfer porotocol
e.g: ftp//ftp.tripod.com/members
نوع الخدمة ftp وهذه الخدمة لخلق وتحميل الصفحة من والى السيرفرات كتحميل موقعك باذن الله.
news:north-east-west-south أخبارى
ونوع الخدمة هنا أخبارية
gopher://owl.trc.purdue.edu
email: electronic mail
mailto:mamhay@msn.com
نوع الخدمة mail to الوكيل msn المستقبل mamhay
telnet//media.mit.edu
والآن نناقش كيفية انشاء وصلة
أولا الوصلات الداخلية:
وهى وصلات الصفحة الواحدة
لنفترض أنك كتبت كتاب على النت كما هو الحال فى هذه الدورة التعليمية وتريد أن تنتقل ألى فصل ما بمجرد الضغط على عنوانه فى الفهرس فكيف تقوم بعمل ذلك ؟
أختار جزء من النص المراد أن تؤدى الوصلة اليه ثم ضعه بين أمر anchorكلآتى.

< a name="الفصل الأول"> الفصل الأول < /a >
الصفة name للعنصر anchor تحدد الموقع فى الوثيقة المراد
والآن أختر النص المراد أن يكون هو الوصلة وضعه بين anchor
< a href="#الفصل الأول"< الفصل الأول< a > فيكون الناتج
الدرس الاول
الدرس الثانى
الدرس الثالث
فلنفترض أننا كتبنا الفهرس كلآتى :

محمد
محمود
أحمد
خالد
وأن الموضوع كلآتى
محمد.................
...............................
................................
أحمد............................
.................................
...................................
محمود..........................
................................
.................................
خالد...............................
...................................
....................................
ونريد بمجرد النقل على أحمد فى الفهرس ننتقل الى الموضوع
أولا: نأتى عند أحمد الذى فى الموضوع ونكتب الأمر كلآتى

< a name="أحمد" ><حمد < /a >


لاحظ أننا كتبنا أحمد مرتين مرة داخل علامتى >< ومرة خارجها
والفرق أن أحمد داخل علامتى أكبر وأصغر من هو الذى تذهب اليه الوصلة بينما أحمد الذى بين أمر التنفيذ والنهاية هو الذى يظهر على المتصفح (الفهرس)
الآن نذهب الى أحمد الذى فى الفهرس ونضعه كلآتى
< a href="#أحمد">أحمد حيث أحمد مابين أمر التنفيذ وأمر النهاية ÷ هو الذى يظهر فى الفهرس
لنفترض أننا نريد أن يكون الجزءالذى نضغط عليه صورة تؤدى لموقع ما فكيف ذلك؟
ان الصور التى لهاهذه الخاصية(الاتصال بالضغط) تسمى الخرائط الصورية (image map)وعلى هذا فان تعريف الخرائط الصورية :هو شكل رسومى يخلق وصلة بين الصفحات.
وينقسم الى:


clint-side
server-side وكلا النوعين يجب أن يحدد مساحة الصورة ومكان الموقع المراد فتحه ..............ألخ
1-server-side image maps(ismap)
e.g
< a href="http://www.tripod.com">
< img ismap src="2.jpg" border="1" > < /a >
والناتج هو

2-clint-side imge map(usemap)
e.g
< img src="1.jpg" usemap="#map1">

< area shape="rect"coords="100,200,156,249" href="whatever.htm" >
< area shape="rect" coords="100,200,156,249"href="whatever.htm" >
< /map >
الاشكال: مستطيل rect or rectangle
الدائرة: circ or circle
وتحتاج الى ثلاث نقط مركز ونصف قطر
المضلع polygon يحتاج ثلاث أوأكثر من أزواج الاحداثيات
الدرس الثامن
الجداول tables
وأمرها < table > ...........< /table >
لانشاء جدول فان العنصر table لديه أربعة عناصر متفرعة منه......لاحظ عناصر وليس صفات فما الفرق؟

table row(tr)صف الجدول
< tr >.....< /tr >
table data(td) بيانات الجدول
< td >......< /td >

table header(th) رأس الجدول
< th >.....< /th >
caption
< caption >...... < /caption >
والعنصران td,th يحتويان على عددكبير من العناصر الأخرى كالخط ولون الخلفية والمحاذاه.....ألخ

e.g
< table border="1" >
< tr >
< th >column 1 header < /h >
< th >column 2 header < /h >
< /tr >
< tr >
< td >< br > row1-col1< /td >
< td > row1-col2< td >
< /tr >
< tr >
< td >< br > row2-col1< /td >
< td > row2-col2< td >
< /tr >
< tr >
< td > row3-col1< /td >
< td > row3-col2< td >
< /tr >
< /table >



ويكون الناتج كلآتى
column 1 header column 2 header
row1-col1 row1-col2
row2-col1 row2-col2
row3-col1 row3-col2

table header:ان البيانات الموجودة فى الجداول تكتب بلأمر < td >........< /td >كما رأينا فى المثال السابق كما يمكن كتابتها بلأمر < th > ....< /th >فما الفرق؟
الفرق هو أنه اذا كتبنا البيانات بلأمر < th >فا فان الخط سيكون سميك وموضوع فى مركز الخلية
وعلى هذا فان هذا الأمر يستخدم قليلا حيث أننا فى الغالب نستخدم الخاصية bold or strong من صفات الخطوط لكى ننفذ هذا الشكل.
لقد ناقشنا فى المثال السابق ثلاث خصائص للجداول ويبقى عنصر واحد هو table captionفمافائدته؟
ان هذا العنصر يسمح لنابتخصيص نص ما أعلى أو أسفل النص

< table border="1" cellpading="2" >

< caption align="top">جدول تدريب كتابة نص< /caption > < tr >
< th >column 1 header < /h >
< th >column 2 header < /h >
< /tr >
< tr >
< td >< br > row1-col1< /td >
< td > row1-col2< td >
< /tr >
< tr >
< td >< br > row2-col1< /td >
< td > row2-col2< td >
< /tr >
< tr >
< td > row3-col1< /td >
< td > row3-col2< td >
< /tr >
< /table >
والناتج
جدول تدريب كتابة نص column 1 header column 2 header
row1-col1 row1-col2
row2-col1 row2-col2
row3-col1 row3-col2




صفات الجدول

bgcolor لون الخلفية
width يمكن تحديد عرض الجدول بالبكسل أو بالنسبة المئوية
borderالحدود الخارجية
cell spacing وهى المسافة الفاصلة بين الخلايا وبعضها
cell padingوهى المسافةالفاصلة بين حدود الخلية ومحتوياتها وتقدر بالبكسل
align (left,right,center)وهناك بعض المتصفحات التى لا تدعم خاصية align لذا يفضل أستخدام الأمر < div >أو< center >
background لاضافة خلفية (صورة)
border color light وهو لون خافت يلون الحدين الخارجين الجدول ليعطى أنطباع ثلاث الأبعاد
border color dark كلأعلى
صفات بيانات الجدول وترويسة الجدول
colspan تحدد عدد الأعمدة
rowpan
align (reight,left,center)
valign(top,middle,bottom)
background
bgcplor
width
height
e.g
< table border="1" cellpadding="2" >
< caption align="bottom" >
lable for my table < /caption >
< tr >
< th > column 1header< /th >
< /tr >
< tr > < td colspan="2" >
row1-col1< /td >
< /tr >
< tr >
< td rowspan="2" >
row2-col1< /td > < td > row2-col2 < /td >
< /tr >
< tr >
< td >
row3-col2 < /td >

< /table >

lable for my table column1 header
row1-col1
row2-col1< /td> row2-col2
row3-col2

الفصل التاسع
frames الاطارات
فالنفترض أننا قمنا بكتابة صفحة باسمm2.htm وصفحة أخرى باسم m3.htm ونريد أن نفتح الصفحتين معا على صفحة واحدة كما يلى

كيف يمكننا فعل ذلك
أولا يجب أن ننشىء صفحتين ولتكن m2.htm,m3.htm
والآن ننشىء الصفحة التى ستفتح الصفحتين معا
e.g

< html > < head > < title >
frame page
< /title >
< /head >
< frameset cols="50%,50%" >
< frame src="m2.htm" name="left pane" scrolling="no" >
< frame src="m3.htm" name="right pane" scrolling="yes" >
< no frames >
< body >
هذه الصفحة تدعم تعدد الفرامات
< /body >
< /no frames >
< /frameset >
< /html >
فيكون الشكل السابق


تحليل المثال :
عندما كتبنا framset فاننا قمنا بتقسيم الصفحة المعروضة لدينا لعمودين 2column وحددنا النسبة المئوية لكل صفحة بلأمر frame الذى سيجلب الصفحة الينا وفى حالة ان الصفحة موجودة داخل مجلد آخر يجب كتابة المسار كاملا
ثم جعلنا فى الصفحة اليمنى عصا منزلقة scrolling لتحريك الصفحة بينما لم نجعل ذلك فى الأخرى
ثم كتبنا no frame وبين الأمرين body كتبنا هذه العبارة (هذه الصفحة تدعم تعدد الأطارات) لأنه فى حالة وجود مستخدم يتعامل مع متصفح قديم ننبه بأن هذه الصفحة بها أطارات لأنه بدون هذا الأمر فلن يرى شىء
صفات العنصر (framset)


rows"
وفيه يمكن تقسيم الصفحة ألى صفوف وهناك ثلاث طرق لتحديد مساحة كل صف ,
بالبكسل فلو أنالصفحة مصممة على 480x640 بكسل مثلا
فاننا نكتب الأمر كلآتى < frameset rows=" 360,120" >
ولاحظ أن مجموع الرقمين هو 480 وهو الكثافة الفقية للصفحة
يمكن أن نقسم الصفوف بالنسبة المئوية
< frameset rows="75%,25%" >
يمكن أن نستخدم العنصر * فى حالة تحديد العناصر التى قبلها


< frameset rows= "360,*" >

الأعمدة cols=coloumn
يمكننا تقسيم الصفحة الى ثلاث صفحات رأسية (عمودية) وهناك ثلاث طرق كسابقه

< frameset col="360,120" >
< frameset col="75%,25%" >
< frameset col="360,*" >


FRAME BORDER حدود الأطارات:
هل تريد أن تجعل للاطارات حدود خارجية ام لا وعلى ّلك فان الأمر FRAMEBORDER يأخذ القيمتين 1و0

FRAMESPACING هذه الخاصية تحدد بالبكسل وهى تستخدم مع الصفة FRAMEBORDER حتى تحدد سمك الحد الخارجى للحدود .
BORDER COLOR وهو يسمح لك بأختيار لون الحدود وهو نادرا مايستخدم
frame العنصر أطار
ان العنصر frame يعرف بأنه اطار واحد من مجموعة الأطارات frameset وعلى هذا فانه يجب أن يكون هناك عنصر أطار frame واحد على الأقل عند أستخدام العنصر frameset صفات أستخدام العنصر frameset >
صفات الأمر frame

src سبق مناقشته
name : الذى يحدد أسم الهدف الذى سيتم فتحه element
margin width :الهوامش العرضية
وهو يحدد الهامش بين النص والحدود ويكتب بالبكسل
margin height:
;كسابقه ولكن أعلى وأسفل
scrolling :عصا الانزلاق ويأخذ ثلاث قيم

yes=يظهر العصا فى جميع الأحوال
no=لايظهر العصا فى جميع الأحوال
auto=يظهر أو لا يظهر العصا تبعا لحجم الصفحة والقيمة الأفتراضية auto
nore size تثبيت الحجم
وهذا الأمر له أهمية خاصة حيث أنه اذا لم يكن مكتوب يمكننا تكبير أو تصغير أحد الأطارات الموجودة على نفس الصفحة ولكن أذا كتبناه لت تكون المساحة المحجوزة ثابتة لاتتغير .
noframes العنصر :
لقد كتبنا هذا العنصر كنوع أحتياط لأنه فى حالة عدم تدعيم المتصفح للامر frameset فانه سيرى العنصر noframes فيعرض الكلام الموجود فى body والذى سيكون جملة نحن نضعها توضح ان المتصفح يدعم الأطارات المتعددة
e.g
< html >
< head >
< title >compound frames page < /title >
< /head >
< frameset rows="120,*" >
< frame src=" m2.htm" >
< frameset cols="120,*" >
< frame src="m3.htm" >
< frame src="content m4.htm" name="content" >
< noframes > < body >
defult messege < /body >
< /noframes >
< /frameset >
< /frameset >
< /html >


targets :فى حالة وجود وصلات فى صفحتك المنشأة على frames وأردت أن تفتح الوصلة فأنت تحتاج للأمر target لماذا؟
e.g
لو اننا وضعنا وصلةفى فى الصفحة m2.htm ونريد أن نفتح الصفحة M3.htm فى النافذة اليمنى لصفحتنا بدلا من الوثيقة m2.htm فاننا نكتب
< a href="m3.htm' target="right" >
link to m3
ولاحظ أننا اذا لم نكتب الأمر target فانه سيتم الفتح فى نفس نافذة M1.htm
target صفات الهدف

< a >
e.g< a href="file.htm" >target="frame windows name" >
< area >< area shape="rect" coards="5.6.2.4" href="file.htm" target="frame window name" >
< base >< base target="frame windows name" >
< form > < form action="cgi-bin/script" target="frame window name >
special targets:الأهداف
هناك أربع أهداف خاصة والتى تلحق بالصفة name للأمر frame

target="top"
="blank"
target="self"
target="parent"
مالفرق ؟أدرس المثال الآتى
e.g

< html >
< head >
< title > documeent1
< /title >
< /head >
< body >
< p >< links < br >< a href=" m3.htm" target="right pane" >
m3 in the right pane
< /a > < br >< a href="m4.htm" target="top" >
m4 in top
< /a >
< a href="m4.htm" target="blank" >
m4 in blank
< /a >
< a href="m4.htm" target =self >
m4 in self
< /a >
< /p >
< /body >
< /html >


النماذج
ان النماذج تعطى قابلية لصفحات الويب ليس فقط لعرض الوثيقة بمعلومات ديناميكية ولكن أيضا تحصل على معلومات من الشخص المستعرض للصفحة
والامر هو
< form >...........< /form > وله ثلاث خصائص


ACTION:
وهى تحدد العنوان الذى سيتم ارسال بيانات النموذج اليه لتتم معالجتها بالصورة المطلوبة
وعادة يكون
بريد الكترونى < FORM ACTION="MAILTO:SOMEONE@DOMAIN.COM">..............
عنوان لبرنامج CGI(COMMON GETEWAY INTERFACE) موجود على الكمبيوتر الخادم SERVER التى تتواجد عليه صفحة الويب حيث يستقبل البيانات ويعالجها حسب التعليمات الموجودة فيه كأن يضيفها مثلا الى احدى الصفحات (كما يحدث عادة فى صفحة الزوار) أو يتحقق من صحة بعض الحقول المدخلة ومطابقتها لمعايير معينة او أن يقوم بالبحث عن كلمة أوعبارة ضمن صفحات الموقع كما فى نماذج البحث الموجودة فى موقع الويبز
< FORM ACTION="NAME AND ADDRESS OF CGI SCRIPT" >
METHOD:وتحدد الطريقة التى سيتم التعامل بهامع العنوان المحددفى الخاصية السابقة ACTION
وهناك قيمتين لهذه الخاصية هما
GET:
التى تستخدم فى حالة كون عملية المعالجة داخلية أى تتم داخل الخادم SERVER نفسه .
كالبحث عن كلمة فى الموقع أو موضوع
POST:
وتستخدم عندما تكون عملية المعالجة خارجية كأن يتم ارسال البيانات الى عنوان البريد الألكترونىز

ENCTYPE:هذه الخاصية تحدد طريقة الترميز التى سيتم أرسال البيانات وفقا لها
وهى تأخذ القيمتين التاليتين )يجب أن تكتب نصا وحرفا)
APPLICATION/X-WWW-FORM-URLENCODED.
TEXT/PLAIN والدافع لاستخدام أى من القيمتين هو طبيعة عملية المعالجة التى ستجرى على البيانات أو طبيعة برنامج البريد الألكترونى الذى ستستقبل هذه البيانات من خلاله اذا كان يدعم MIME(MULTI-PURPOSE INTERNET MAIL EXTEND)
وهى من المعايير السائدة فى الانترنت والتى تتعلق بنقل جميع أنواع البيانات من صوت وصورة وليس فقط النصوص من خلال البريد الألكترونى.
وعلى هذا فان هذه الخاصية تحدد الميكانيكية التى تفك بها الشفرةلمحتويات النموذج
ويمكنك ترك هذه الصفة غير محددة الا أذا كان هناك ملف upload
تعريف الأشكال:
ان النموذج له الخصائص التالية
text box;password box;check box; option(radio)button;submit;reset;file;hiddenand imgeوالخصائص التى تحدد فى الصفة type للعنصر < input >......< /input > < input >خصائص العنصر عمله
type نوع الحقل المدخل وتأخذ القيم
< input type="text" >
< input type="password" >
< input type="hidden" >
< input type="radio" >
< input type="checkbox" >
< input type="submit" >
< input type="reset" >
< input type="button" >

name وهو متغير ويمرر الى مستقبل البيانات
value البيانات المرتبطة بالاسم المتغير والذى يمرر للcgi
checked وهى تعطى اختيار أولى فرضى
size وهو يعطى عدد الحروف التى تظهر فى النموذج
maxlength أكثر عدد للحروف يمكن كتابته فى الحقل

text boxes
يستخدم كحقل ادخال للنص ويكتب
< input type="text" >وسيعرضها المتصفح كلآتى

ولها الخصائص : type-size-maxsize-name-value
e.g:< input type="text" name="visitor" size="30" maxlength="6" value="welcome" >وسيكون الشكل هو
password:
يستخدم لأدخال كلمة السرويكتب
< input type="password" >
وسيعرضها المتصفح كلآتى

ولها الخصائص التالية:
type"password"-size-maxlength-name-value
e.g: < input type="password" size="40" maxlength="6" name="mam" value="welcome" >

hidden:
وتستخدم لأرسال البيانات للبريد الألكترونى أو لبرنامج الcgi والتى لاتريد أن يراها الويب سيرفر وهذا النموذج لن يظهر فى الصفحة .فما أهميتها؟
أن اهمية هذا الامر لهو للمصمم أكثر منه للمتصفح حيث أن المتصفح لن يراه وهو يستخدم كدليل على سبيل المثال
لنفترض أن لديك ثلاث صفحات مليئة بالنماذج المتشابهة فكيف نفرق بين الصفحات ؟
الأجابة واضحة عن طريق الأمر hiddenفمنه يمكن كتابة أسم كل صفحة على حدا فى النموذج hidden والذى لن يظهر ألا للمرسل اليه البيانات وخصائصه :TYPE-NAME-VALUE
E.G: < INPUT TYPE="HIDDEN" NAME="" VALUE="MYFORMS"NAME="FORM1" >
ويكون الناتج :? لن ترى شىء بالقطع لأن الذى سيراه هو المرسل اليه البيانات
FILE UPLOAD:يستخدم للسماح للخادم لتحميل الملفات لخادم الويب
< INPUT TYPE="FILE" NAME="MAM" SIZE="30" MAXLENGTH="50" ENCTYPE >
ويكون الشكل كالتالى


RADIOوهى لأختيار عنصر واحد من عددة أختيارات E.G:
ماهو المتصفح الذى تستخدمه:
EXPLORER4
EXPLORER5
EXPLORER6
الشرح:
< INPUT TYPE="RADIO" NAME="BROWSER" VALUE="EXPLORER4" > EXPLORER4
< INPUT TYPE="RADIO" NAME="BROWSER" VALUE="EXPLORER5" > EXPLORER5
< INPUT TYPE="RADIO" NAME="BROWSER" VALUE="EXPLORER6" > EXPLORER6

CHECKBOX:
الرياضة
القراءة
الموسيقى
الشرح:
< INPUT TYPE="CHECKBOX" NAME="الرياضة"> الرياضة
< INPUT TYPE="CHECKBOX" NAME="القراءة" VALUE="YES" CHECKED>القراءة
< INPUT TYPE="CHECKBOX" NAME="الموسيقى">الموسيقى
نلاحظ أنه بأستطاعتك أختيار أكثر من أختيار ونلاحظ ظهور علامة صح فى احد المربعات عن طريق الأمر CHECKED
ونلاحظ أن فى RADIO تكون أسماء الحقول موحدة والقيم مختلفة أما فى CHECKBOX فتكون الأسماء مختلفة والقيم موحدة

SELECT:قوائم الأختيار من متعدد
< SELECT NAME="BROWSER" SIZE="2" > < OPTION >EXPLORER4
< OPTION >EXPLORER5
< OPTION >EXPLORER6
< /SELECT >
EXPLORER4EXPLORER5EXPLORER6
وهذا الأمر له الخصائص :
NAME-SIZE-MULTIPLE
E.G < SELECT NAME="BROWSER" SIZE="2" MULTIPLE > < OPTION >EXPLORER4
< OPTION >EXPLORER5
< OPTION >EXPLORER6
< /SELECT >
ويكون الناتج
EXPLORER4EXPLORER5EXPLORER6
مالفرق بين هذا الشكل والذى قبله ؟الفرق هو الأمر MULTIPLE حيث أنه يسمح بأختيار أكثر من أختيار
ولا يتحقق ذلك الا باضغط على الأختيارات المرادة مع تعليق CTRL
TEXTAREA:
وهوعنصر يسمح بعرض وثيقة للكتابة فيها أومكتوبة أفتراضيا
وخصائصه:NAME-ROWS-COLS-WRAP
E.G < TEXTAREA NAME="COMMENT" COLS="20" ROWS="4" WRAP="VIRTUAL" >.....< /TEXT AREA >
ويكون الناتج
..................
ونلاحظ أن الخاصية VALUE غير موجودةوبالمقابل فأن أى نص يكتب بين الوسم سيعرض بصورة تلقائيةاما الأمرين COLS & ROWS فلتحديد المساحة اما الأمر WRAPفلتحديد طريقة التفاف النص المكتوب داخل الحقل وهى تأخذ القيمVIRTUAL-PHYSICAL-OFF

VIRTUAL تعنى أن النص سيقسم على عدة اسطر ولكن عندما يصلك سيصلك كسطر واحد متصل
PHYSICAL:تعنى أن النص سيقسم على عدة أسطر وسيصلك كذلك
OFF:تعنى أن النص سيصلك كما كتب
E.G2:
< TEXTAREA NAME="COMMENT" ROWS="3"COLS="10" WRAPE="OFF" >السلام عليكم ورحمة الله وبركاته < /TEXTAREA > ويكون الناتج:
السلام عليكم ورحمة الله وبركاته


الآن أنتهينا من كتابة الشفرة الخاصة بالنموذج وتم عرضها علىصفحتك وجاء زائر وملاء البيانات .
والسؤال الآن كيف سيرسل اليك البيانات؟
الأجابة سيتم أرسال البيانات عن طريق انشاء زر submitوالذى بالنقر عليه سيتم ارسال البيانات للجهه التى تم تحديدها فى أول أمر < form ... >

< input type="submit" >
وسيكون الناتج

لاحظ أن submit هى العبارة الأفتراضية ويمكن تغييرها باستخدام الخاصية value
< input type="submit" value="أضغط هنا لأرسال البيانات" >
ويكون الناتج


image submit button:وهو زر يسمح لنا بوضع صورة بدلا من مفتاحsubmit


rest:ويستخدم لمسح كل البيانات المدخلة عن طريق الزائر اذا شك فىشىء من بياناته عند أدخالها
< input type="reset" value="تجديد" >ويكون الناتج هو

push button:وهذا العنصر يستخدم مع الجافاأو البيسك المرئى لكى يجعل الحركة تحدث والى ماذلك من البرمجة وسنتعرض لذلك بالتفصيل لاحقا:
< input type="button" name="زر برمجة للجافا" value="زر برمجة" > ويكون الناتج:
ويكون الناتج:

examples: أصنع النموذج التالي

greeting Mr. Mrs. Ms. Dr.
FIRST NAME
last NAME
E-mail Adress:

what type of response do you prefer?
phone
fax
E-mail

iwould like the following options:
leather interior
cd player
sunroof





ان فشلت فى أستنتاج الكودات فاليك هى
< form >< p >< input type="hidden" name="secretpassword" value="open sesame" >
greeting
< select name="greeting" size="1" >
< option value="Mr" >Mr.< /option >
< option value="Mrs" >Mrs.< /option >
< option value="Ms" >Ms.< /option >
< option value="Dr" >Dr.< /option >
< /SELECT >
FIRST NAME
< INPUT TYPE="TEXT" NAME="FIRST NAME" SIZE="20" MAXLENGTH="25" >
last NAME< INPUT TYPE="TEXT" NAME="last NAME" SIZE="20" MAXLENGTH="25" >
E-mail Adress:
< input type="text" nme="E-mail" size="30" maxlength="50" >

what type of response do you prefer?
< input type="radio" name="response" value="phone"checked="checked" >
phone
< input type="radio" name="response" value="fax" >
fax
< input type="radio" name="response" value="Email" >
E-mail

iwould like the following options:
leather interior
< input type="checkbox"name="leather" >
cd player< input type="checkbox" name="cd" >
sunroof
< input type="checkbox" name="sunroof" >

< textarea name="comment" rows="4" cols="30" wrap="virtual" >
< /textarea>
< input type="submit" name="submit request" >
< input type="reset" >

< /form >
الفصل الحادى عشر
متنوعات


META:

الآن قمت بتصميم موقعك فكيف تجعل الناس يأتون اليك وأن يجدوا طريقهم اليك بكل سهولة؟
اولا يجب أن نفرق بين محركات البحث (search engines)والفهارس أو أدلة البحث من حيث المفهوم وخصائص العمل؟

فمحركات البحث altavistaمن أوضح الأمثلة على محركات البحث وهى تسمى أيضا بالزواحف crawlersأوالعناكب spiders وتقوم فكرتها بالزحف على الشبكة لأكتشاف أى موقع جديد ثم فهرسته وتصنيف كل كلمة من الكلمات الموجودة فى صفحات هذا الموقع
ضمن قاعدة البيانات لديه وتزوره كل حين لآخر لرصد أى تحديثات فى الموقع

الفهارس أو أدلة البحث وأشهرها YAHOO:
وفيه يتم تصنيف المواقع ضمن قوائم متدرجة ومتشعبة عن بعضها البعض بحيث يبدأ بالمفتاح الأساسى العام ثم يتدرج الى الأكثر تحديدا وهكذا.
ويقوم بهذا التصنيف طاقم بشرى بخلاف محرك البحث
والآن لنشهر موقعنا فكيف؟
يشهر الموقع بأستخدام الوسم < meta >ضمن المقطع< head >...< /head >

name
نقوم من خلال هذه الخاصية بتحديد اسم (أو لنقل عنوان) وحدة البيانات التي نريد تعيين قيمها
وله الخصائص التالية
HTTP-EQUIV تعتبر هذه الخاصية مكافئةً للوسم الذي يعرف الصفحة ككل. (والحقيقة أن اسمها يدل على ذلك) وبدون الدخول في تفاصيل جانبية، نستطيع أن نقول أنها تحدد خصائص الصفحة ككل.
ويأخذمع الخاصية HTTP-EQUIV... القيمة Content-Type والتي تعني نوعية المحتويات. والقيمة refresh
CONTENT
تحدد المحتويات أو البيانات التي نريد إسنادها للخاصيتين السابقتين

وللخاصية name الصفات التالية

description"وهذا العنصر يوصف موقعك ليسهل ايجادمحركات البحث لهاويلخص محتوياتها
e.g"< meta name="description"content="تعليم هتمل العربى">
keywords :وهى لتحديد الكلمات المفتاحية للصفحة ثم نستخدم content لتحديد هذه الكلمات
e.g:< meta name="keywords" content="html,flash,jafa" >

author:ويستخدم لألحاق أسم المؤلف < meta name="auther" content="mamhay" >
company:يمكنك ألحاق أسم شركتك
< meta name="company" content="lect" >
copy right:حقوق النشر < meta name="copy right"content="copy right mamhay-all right reserve >


example:

< html >
< head >
< title > my html document < /title >
< meta name ="description" content="this is my own web site it's for learn html" >
< meta name="keywords" content="html,flash,jafa,photoshop" >
< meta name="author"content="mamhay" >
< meta name="company" content="lect" >
< meta name="copy right"content="copy right2002 mamhay all right reserved" >
< /head >

sound effect

ان اضافة الصوت فى نتسكيب تختلف عنها فى اكسبلور
,
ففى نتسكيب نستخدم الأمر< embed >....< /embed > ولها الصفات الآتية:
src:تعرف مسار ملف الصوت
controls:للتحكم بالصوت
autostart:للعرض بمجرد التحميل
hidden:ولها قيمتين true وهى تخفى لوحة التحكم بالصوت ولها قيمتين false وهى الأفتراضية وtrue
loop:لتكرار القطعة الموسيقية
volume:وهى درجة علو الصوت الأفتراضية عند بدأ التشغيل
height:أرتفاع لوحة التحكم
width:عرض لوحة التحكم

e.g < embed src="file://c:/windows/media/jungel/exit.wav width ="145" height="60" autostart="true" volume="100" controls="console" hidden="true" >
ولاحظ أنه لن يعمل الأ فى النتسكيب
أما فى اكسبلور يكون الأمر < bgsound >....
وله الخواص :

src
loop
delay:وهو يحدد زمن التأخير بين التكرار
titleالنص الذى يصف الصوت
e.g:< bgsound src="file://c:windoes/media/jungle/start.wav loop="2" title="jungle theme" delay="5" >
وهذه الاوامر تدعم الامتدادات wav;avi &midi
e.g < bgsound src="C:\WINDOWS\MEDIA\utopia windows start.wav" loop="2" title="utopia" delay="5" >ويكون الناتج الصوت الذى سمعته عند فتح هذه الصفحة وان لم تتذكره فاضغط على مفتاح تجديد

دعواتكم الصادقة

السلام عليكم
ارجو ان تكونو بخير
ماقدرتش احطلكم الصور
هل السبب في جهازي ولا في الموقع ؟