المقدمة

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

linear
hyper

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

الدرس الاول">

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

مثال:1

<html>
<head >
<title >
تعلم هتمل

</title>
</head>
<body>
السلام عليكم
</body>
</html>

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

(مثال 2:)

<head>
<title>
مثال 2
</title>
</head>
<body bgcolor="blue">
<font="arial size="4">
مرحبا بك في درسك الاول
</font>
</body>
</html>

لاحظ اننا بعد الامر 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

الدرس السادس

الصور 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 src="1.jpg" alt="السلام عليكم aignement="center" width="250" height="250" border="5" hspace="30" vspace="50">

الدرس السابع

الوصلات

وصلة تنقلك لفقرة فى نفس الصفحة.
وصلة تنقلك لصفحة أخرىفى نفس الموقع.
وصلة تنقلك لموقع آخر.

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

ماهو ال(url)?

http: hyper text transport protocol
e.g: http://www.tripod.com/members
نوع الخدمة 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

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

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

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

clint-side
server-side

< 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 row(tr)صف الجدول
< tr >.....< /tr >
table data(td) بيانات الجدول
< td >......< /td >
table header(th) رأس الجدول
< th >.....< /th >
caption
< caption >...... < /caption >

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 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

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

الفصل التاسع

frames الاطارات

< 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"
وفيه يمكن تقسيم الصفحة ألى صفوف وهناك ثلاث طرق لتحديد مساحة كل صف ,
1. يمكن أن نقسم الصفوف بالنسبة المئوية
  < frameset rows="75%,25%" >
2. يمكن أن نستخدم العنصر * فى حالة تحديد العناصر التى قبلها
  
  < frameset rows= "360,*" >
الأعمدة cols=coloumn
يمكننا تقسيم الصفحة الى ثلاث صفحات رأسية (عمودية) وهناك ثلاث طرق كسابقه
1. < frameset col="360,120" >
2. < frameset col="75%,25%" >
3. < frameset col="360,*" >
1. FRAMESPACING هذه الخاصية تحدد بالبكسل وهى تستخدم مع الصفة FRAMEBORDER حتى تحدد سمك الحد الخارجى للحدود .
2. BORDER COLOR وهو يسمح لك بأختيار لون الحدود وهو نادرا مايستخدم
frame العنصر أطار
ان العنصر frame يعرف بأنه اطار واحد من مجموعة الأطارات frameset وعلى هذا فانه يجب أن يكون هناك عنصر أطار frame واحد على الأقل عند أستخدام العنصر frameset صفات أستخدام العنصر frameset >
صفات الأمر frame
1. src سبق مناقشته
2. name : الذى يحدد أسم الهدف الذى سيتم فتحه element
3. margin width :الهوامش العرضية
  وهو يحدد الهامش بين النص والحدود ويكتب بالبكسل
4. margin height:
  ;كسابقه ولكن أعلى وأسفل
5. scrolling :عصا الانزلاق ويأخذ ثلاث قيم
  1. yes=يظهر العصا فى جميع الأحوال
  2. no=لايظهر العصا فى جميع الأحوال
  3. auto=يظهر أو لا يظهر العصا تبعا لحجم الصفحة والقيمة الأفتراضية auto
  4. 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

تعريف الأشكال:
ان النموذج له الخصائص التالية
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 >

وهذا الأمر له الخصائص :
NAME-SIZE-MULTIPLE
E.G < SELECT NAME="BROWSER" SIZE="2" MULTIPLE > < OPTION >EXPLORER4
< OPTION >EXPLORER5
< OPTION >EXPLORER6
< /SELECT >
ويكون الناتج

مالفرق بين هذا الشكل والذى قبله ؟الفرق هو الأمر 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:تعنى أن النص سيصلك كما كتب

< 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: أصنع النموذج التالي
ان فشلت فى أستنتاج الكودات فاليك هى
< 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 >

الفصل الحادى عشر

متنوعات

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 right©2002 mamhay all right reserved" >
< /head >

sound effect

ان اضافة الصوت فى نتسكيب تختلف عنها فى اكسبلور
,

ففى نتسكيب نستخدم الأمر< embed >....< /embed > ولها الصفات الآتية:
1. src:تعرف مسار ملف الصوت
2. controls:للتحكم بالصوت
3. autostart:للعرض بمجرد التحميل
4. hidden:ولها قيمتين true وهى تخفى لوحة التحكم بالصوت ولها قيمتين false وهى الأفتراضية وtrue
5. loop:لتكرار القطعة الموسيقية
6. volume:وهى درجة علو الصوت الأفتراضية عند بدأ التشغيل
7. height:أرتفاع لوحة التحكم
8. 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 >....
وله الخواص :
1. src
2. loop
3. delay:وهو يحدد زمن التأخير بين التكرار
4. 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" >ويكون الناتج الصوت الذى سمعته عند فتح هذه الصفحة وان لم تتذكره فاضغط على مفتاح تجديد

عناصر التحريك marquee

وهو يقوم بتحريك نص كتابى فى مساحة محددة وصفاته:

width
height
loop
bgcolor
behavior:يحددكيف يتحرك النص ويأخذ القيم scroll;slide;altrnate
align:ويأخذ القيم top;middle;bottom
direction:ويأخذ القيم left & right
margin:ويأخذ القيم hspace(horizonal margin) & vspace(vertical margin)
e.g< marquee hspace="20" >
scrolldelay :وهو يحددالزمن بالمللى ثانية لتجديد النص
speed:وهو يحدد سرعة النص

e.g: < marquee align="middle" behviour="altrnate" direction="right" height="30" width="500" hspace="10" loop="100" scrolldelay="4" scrollamount="5" bgcolor="yellow" >السلام عليكم ورحمة الله وبركاته نرجو أن نكون قد أفدناكم بهذه الدروس< /marquee > ويكون الناتج

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