موسوعة صفحات الويب

موسوعة صفحات الويب

<blockquote class="postcontent restore " style="margin: 0px; padding: 0px; word-wrap: break-word;">

[size=5]ما هي لغة ال Html ؟؟ولماذا نتعلمها؟؟

بسم الله الرحمن الرحيم...
عشان اوضحلكم معني لغة ال HTML اسمحولي اقوللكم مثال بسيط ..
لو انا بكلم واحد من امريكا وعايز اقولله حاجة يعملها ....
لو قلتله الحاجة دي بالانجليزي هيفهمها وينفذها..
لو قلت نفس الحاجة بالعربي مش هيعبرني
وفي نفس الوقت ممكن يكون الشخص ده بيعرف اكتر من لغة "فرنساوي مثلا" يبقي لو قلتله نفس الكلمة بالفرنساوي هيفهمها....بس اساسه هو الانجليزي..
نفس الحال بالنسبة لل BROWSER..
اللي هو صفحة الانترنت اكسبلورر اللي فاتحة قدامك....هي في البداية بتقتح بيضة"فاضية"...
الكلام والمعلومات اللي فيها بتظهر ازاي؟؟؟
ذكرنا قبل كده ان السيرفر بيقوم بارسال المعلومات إلي جهازك فيستقبلها البراوزر...
فبما ان ال BROWSER هو اللي بيستقبل المعلومات يبقي السيرفر لازم يبعتله المعلومات دي باللغة اللي هو بيفهما عشان يظهلرها قدامنا...لو بعتله نفس الكلام باي اسلوب تاني مش هيعبره
فالBrowser زيه زي اي انسان ليه لغات بيفهمها ولو قلتله اي حاجة باللغات دي بينفذها فورا....بس هو احسن من الانسان في ان هو بيفهم لغات كتير...وكمان لو قلتله اي حاجة وفهمها بينفذها علطول
اول وابسط لغة من اللغات اللي بيفهمها البراوزر هي لغة ال HTML ...
وهناك لغات اخري كثيرة اكثر تطور من ال HTML بس الاساس هو ال HTML زي الإنجليزي بالنسبة للشخص الأمريكي...
ولا يوجد اي موقع يخلو من لغة ال HTML ..بالرغم من انها اقل اللغات تطورا...
وفي برامج حاليا بتغني عن لغة ال HTML وبتقوم بكل وظائفها بصورة اسهل ومنها " FRONT PAGE ,DREAMWEAVER"....ولكن...
اللي ناوي ياخد HTML ويقف علي كده يبقي احسنله يدرس البرامج دي لانها اسهل منه...انما اللي عايز يحترف ويبقي فاهم هو بيعمل ايه اولا...وكمان عايز يتقدم ويدرس لغات تانية بعد كده ويكمل في الطريق يبقي لازم يعرف HTML الاول......
طيب دلوقتي احنا قلنا ان السيرفر بيبعت المعلومات للاجهزة باللغة دي...طب واحنا مالنا احنا..
ماحنا بنشوف المعلومات جاهزة وخلاص هنتعب نفسنا ليه؟؟
وده لاننا عايزين نصمم مواقع ..يعني احنا اللي هنعمل الصفحة ونحطها علي السيرفر يبقي لازم نحطها باللغة دي لان السيرفر مش هيعمل اي حاجة غير انه هيبعتها ..فلازم نكون حاططينها عليه بلغة يفهما البراوزر لما يبعتهاله....
يارب يكون الاسلوب واضح..

--------------------------------------------------------------------------------------------------------------------

الدرس الثاني

اعذروني اذا طولت شوية المرة دي لانها اول مرة ندخل في اللغة..فممكن تحتاج تطويل شوية في الشرح لغاية منفهم اللغة دي ماشية ازاي….يعني كمية المعلومات المرة دي قليلة بس هتاخد شرح كتير..وان شاء الله هتلاقوه سهل مش صعب ابدا…وعشان العملية متسيحش .كل فترة هكتب خلاصة الكلام اللي اتقال وفي الاخر هكتب الخلاصة كلها ..وهتلاقوها قليلة جداا وبسيطة جداااا …حاجة بسيطة قبل متقروا أي حاجة...لو حسيت في النص انك سيحت اوعي تقلق وكمل للاخر اول متوصل للاخر هتلاقي كله وضح ان شاء الله وانا في الاخر خالص كاتب الخلاصة كلها في سطرين بس هتلم الموضوع كله ان شاء الله بس بعد متفهمه…كمل للاخر..
الاول نعرف ايه معني الكلمة دي وليه سموها كده..
مش معقول اول ماخترعوا اللغة دي قالوا نسميها html؟؟؟ …….أكيد في سبب
html اختصار لهذه الجملة:
hyper text markup language
يعني لغة تقدر بيها تحط علي الانترنت texts بكميات كبيرة (hyper) بس الاسم ده كان لانها في بداية ماخترعوها كانت بس لوضع texts مش اكتر ..انما دلوقتي تطورت كتير وممكن نحط texts وصور وفيديو واوديو وفلاشات وكل حاجة…
بس لما تطورت اللغة الاسم متغيرش فضل زي ماهو……
نبدأ بقي نعرف ازاي نعرف البراوزر المعلومات باللغة دي …
إحنا قلنا ان دي لغة البراوزر وده يترتب عليه إن أنا لو جيت علي أي فايل عندي علي الجهاز وعملت له rename وغيرت امتداده خليته .html يتحول البرنامج اللبيشغله الي الانترنت اكسبلورر…بمعني:
انا عندي فايل اسمه مثلا : mostafa.txt وعليه كلام مكتوب"بأي محرر كتابة زي ال notepad"
لو انا قلتله rename وخليت اسمه mostafa.html هتلاقي شكله اتحول الي صفحة انترنت اكسبلورر واللي هيفتحه هو الانترنت اكسبلورر..
لان انا كده قلتله ان الكلام اللي عندك هنا مكتوب بلغة html فالجهاز هيحوله تلقائيا الي البرنامج اللي بيفهم اللغة دي وهو يتعامل معاه..اذا لقاه فعلا باللغة دي هيفهمه ..اذا لقاه مش بيها مش هيفهم فيه حاجة …
اقصد اقول من الكلام اللي فات ان اللي احنا بنعمله عشان نكتب صفحة بالاتش تي ام ال بنفتح صفحة أي محرر كتابي زي النوتباد مثلا ونكتب فيها الكلام اللي احنا عاوزينه باللغة اللي هنتعلمها وبعدين نحول امتداده الي .html هيروح البراوزر فاتحه وقاريه….
ان شاء الله الكلام ده هيوضح اكتر بعدين…
الجملة الأخيرة دي ليا عليها تعليقين:
محررات الكتابة المتوفرة كتير وابسطها واسهلها هو ال notepad وهو ده اللي هنتسعمله..
التعليق التاني انهم عملولنا حاجة بسيطة للتلخيص ..بدل متخلي الامتداد .html ممكن تخليه .htm بس من غير حرف ال" l " هتقول ايه بقي... عالم فاضية ..ال يعني الحرف ده هو اللي فارق معاهم اوي… :smile:
خلاصة كل اللي فات..
اقف في أي حتة فاضية في الشاشة واضغط كليك يمين..
واختار new واختارمنها text doccument …
هيفتحلك صفحة تكتب فيها الموضوع بتاع سيادتك..
ازاي بقي بتكبتب الموضوع بتاع سيادتك.؟؟؟؟
ناخد دلوقتي نبذة بسيطة عن الشكل لعام اللي بتكون عليه اللغة دي…
اللغة دي عبارة عن عدة اوامر كل امر بينفذ حاجة…اوعي تقلق وتقول هو انا هقعد احفظ اوامر بقي..انت مش هتحفظ حاجة خالص..انت بس هتكتب الاوامر دي عندك في ورقة وكل متحب تعمل حاجة تبص في الورقة دي تشوف ايه الامر اللي بيعملها وتكتبه…
يعني مثلا لو انا بعمل موقع بسيط اوي فيه شوية كلام وصورة جنبه بس كده…
هقولله الامر اللي بيفهمه اني هحط صورة…وبعدين احطها ..
وعشان احط الكلام مش محتاج أي امر… يعني هو بيفهم أي حاجة مكتوبة علي انها كلام مالم يذكر غير ذلك..
يعني هو بيمشي يترجم الكلام المكتوب وينقله في صفحة الموقع زي ماهو مكتوب بالظبط كلام عادي…
لو لقي في طريقه امر بيقولله اعمل حاجة معينة خلاص بيبطل ينقل الكلام المكتوب ويدا ينفذ اللي الأمر ده …
طيب دلوقتي احنا هنكتبله الكلام وهنكتبله الاوامر…ازاي هيعرف ان ده كلام عادي عايزه يظهر ون ده امر بحطه لتنفيذ شئ معين؟؟؟
للتفريق بين الكلام والاوامر بنحط الامر بين علامة اكبر من واصغر من <…….>
هو اول ميشوف العلامتين دول بيعرف ان المكتوب في وسطهم امر هينفذه ….
..في حاجة عايز اقولها ولو موضحتش اوي دلوقتي مش مشكلة…إن شاء الله لما نعرف أوامر هتوضح اكتر إن شاء الله…
انا لما اقولله امر واكتبه مبين < > مثلا بقولله يغير لون الكلام ..يبقي لازم اقولله فين اخره…منا لو سبتهاله كده هيغير لون الكلام ف الصفحة كله لان انا مقلتلوش وقف ...
بقولله كده ازاي؟؟؟
بكتب نفس الامر بس بالمنظر ده
كود</ >
يعني بزود العلامة دي / بيفهم هو ان الكلام المكتوب بين الامر وإغلاقه علي انه صورة…
بكتب علامة اكبر من وبعدين العلامة دي / وبعدين اسم الامر وبعدين علامة اصغر من....
طيب المنظر العام للصفحة؟؟؟
احنا عرفنا ان في لغات كتير بيفهمها البراوزر يبقي اول حاجة لازم اعرفهاله ان انا بكتب بلغة ال html ..يبقي في عندنا أمر بيتكتب في اول الصفحة بيعرفه ان انا بكتب html
الامر ده صيغته :
<html>
طيب مش احنا قلنا أي امر لازم يتقفل بعد منخلص كل اللي هنعمله بيه؟؟؟؟
يبقي الامر ده بيتقفل فين؟؟؟؟؟؟
بيتقفل اخر حاجة خالص في الصفحة بعد منكتب كل للي احنا عاوزينه في النص بالمنظر ده:
كود<html>
</html>
طيب بعد معرفته اني هكتب html نعرف بقي شكل صفحة ال html عموما دلوقتي….
بتتقسم صفحة ال html الي جزاين
head و body
ال head بكتب فيه شوية كلام مش هيظهر في الصفحة زي عنوان الصفحة مثلا وشوية حاجات تانية كده هنعرفها في وقتها ان شاء الله
ال body بكتب فيه الكلام اللي هيظهر في الصفحة …فلازم اعرفها انا بكتب head ولا body ازاي؟؟
برده في امر بيفهمه الكلام ده…وكل واحد منهم امره بنفس اسمه….
يعني لما احب اعرفه اني هكتب head الامر شكله كده:
كود<head>…………………</head>
لما احب اعرفه اني هكتب body الامر شكله كده
كود<body>…………….</body>
بلاش نزود المرة دي عن كده…كده حلو اوي….
يلا اطلع اقرا الكلام ده مرة تانية بعد مخدت فكرة عنه..في المرة التانية ان شاء الله هتفهمه كويس اوي….
يبقي الملخص الشكل العام:
هتفتح صفحة notepad
وتكتب فيها
كود<html>
<head>……………………
</head>
<body>………………
</body>
</html>
ان شاء الله المرة الجاية هناخد الاوامر اللي موجودة بين الكلام ده….
عشان تجربوا الكلام ده اكتبوا نفس المنظر العام الللي انا كاتبه واكتبوا مبين ال body وإغلاقها أي كلام يعجبكم "بياناتك مثلا"
وبعدين اقفل الصفحة وقولله save واطلع قولله rename وغير امتدادها خليها .html وبعدين افتحها…
هتلاقي الكلام اللي أنت كتبته ظهر والأوامر طبعا مش ظاهرة..هو بس فهم منها هو هيعمل ايه…
وعلي فكرة هتقابلكم مشكلة هتجننكوا في الكلام اللي هيظهر مش هقوللكوا دلوقتي هيه ايه..هبقي اقوللكوا في وقتها…خليها تجننكوا شوية..
يلا ربنا معكم..
و أي استفسار أو مشكل أنا في الخدمة يا شباب…
هذا الدرس ورد تساؤل من الكثير انه لا يوجد عندهم امتداد للملف notebad وبالتالى عند قيامهم بتغير الامتداد يظل الملف notebad دون تغيير .....

والاحاجابة علي هذا السؤال .....
فى حاله مافيش امتداد يبقى فى خاصية فى الويندوز معمولة اسمها "hide the extension" يعني هو مش بيكتب امتداد اي برنامج خالص بس هو عارفه في نفسه...معني الكلام ده ان اي حاجة مكتوبة وظاهرة تععتبر من الاسم..حتي لو خليتيها .htm هيعتبرها برده جزء من الاسم انما الامتداد هو مخبيه زي ماهو .txt ...
ازاي نلغي الخاصية دي؟؟؟؟
اعمل الخطوات دي....
افتح my computer
واختار منها من فوق خالص علي الشمال view واختار منها اخر اختيار folder options
هيتفحلك نافذة تختار منها من فوق view
هيطلعلك اختيارات كتييييييييير...
بص فيهم كويس هتلاقي عندك منهم الاختيار ده:
hide file extention for known file types[/size

</blockquote>

رد: موسوعة صفحات الويب

<blockquote class="postcontent restore " style="margin: 0px; padding: 0px; word-wrap: break-word;">

الفقرات

الHTML يعتبر الفقرة كتلة نصية و المتصفحات تقوم بتوزيع الفقرات على الصفحة
وللدلالة على فقرة تستعمل الحقيبة التالية

اقتباس:
<P> و </P>
وتقوم هذه الحقيبة باضافة سطر فارغ في اخر النص للدلالة على الفقرة
يمكن إضافة وصف لهذه الحقيبة او بمعنى أصح ما سيكون داخل الحقيبة
بهذه الطريقة

كود:
<p align="القيمة">welcome</p>وهذه لائحة بالقيم التي يمكن إضافتها
-left لرصف الفقرة الى اليسار
-center لرصف الفقرة في الوسط
-right لرصف الفقرة الى اليمين
-justify لرصف الفقرة بحيث يملأ السطر"بأن يحسن توزيع الفسحات بين كلماته"

*عنوان الفقرة
في ال HTML نقوم بالدلالة على اهمية العنوان بهذه الحقيبة

كود:
<hx>welcome</hx>حيث تاخذ x قيمة من 1 (القيمة الاكبر) الى 6 (القيمة الاصغر)
وللزيادة في حجم العنوان نستعمل الحقيبة التالية

كود:
<big>welcome</big>

*لاضافة خط افقي نضيف الحقيبة التالية
كود:
<HR>لاحظ انه ليس هناك معاكسة (وسم النهاية)

*لاضافة سطر فارغ نستعمل هذه الحقيبة

كود:
<BR>

*لون الكتابة
نستعمل الحقيبة
كود:
<FONT Color="لون">و تعوض لون برمز اللون
مثلا
-الاسود=#000000
-الابيض=#FFFFFF
-الاخضر=#00FF00
-الاصفر=#00FFFF
-الاحمر=#FF0000
-الوردي= #FF7070
او باسمه باللغة الانجليزية
موسوعة صفحات الويب A52eed7aba

حجم الكتابة
نستعمل
كود:
<FONT Size="x">حيث X تاخذ قيما من 1(القيمة الصغرى)ال7(القيمة الكبرى) خلافا ل HX
ويمكن ايضا وضعها بالتناسب مع الحجم المحدد في المتصفح "par défaut" اسف لم اجد ترجمة ارجو المساعدة
هكذا "+x" اكبر من الخط المحدد"-x" اصغر من الخط المحدد

*خط الكتابة
نستعمل
كود:
<FONT Face="Police">وتعوض POLICE باسم الخط
مثلا
arial, times new roman, comic sans ms, book antiqua

* لتغيير لون الخلفية نستعمل الحقيبة التالية
كود:
<BODY bgcolor="لون">تعوض"لون"بنفس الطريقة بالنسبة للنص

</blockquote>

رد: موسوعة صفحات الويب

<blockquote class="postcontent restore " style="margin: 0px; padding: 0px; word-wrap: break-word;">

اضافة رابط انترنيت

الحقيبة المستعملة لاضافة رابط للانترنيت هي
هي <A>
هذه الحقيبة مهمة جدا حيث ان من دونها يستحيل التصفح في الانترنيت واولا هي لما كنت دخلت الى هذا الموضوع
و رابط الانترنيت هو مجموعة من الكلمات
الاستعمال
هذه الحقيبة تحتاج اضافات لتعمل جيدا او بمعنى اصح لتحقق وظيفتها

الوظائف المتاحة
بهذه الحقيبة يمكن فعل شيئين خلق رابط لمنبع معين صفحة انترنيت او مرسى او اي شيئ يمكن الوصول اليه عبر http او ftp .....

خلق مرسى ومعنى الكلمة في لغة html هي مكان من الصفحة المفتوحة نضع له اسما ثم نجعله متاحا عبر رابط
مثال
تفضلو هنا
عندما تضغط على
"page dawon"
في اسفل الصفحة ستعود الى اعلى الصفحة

نعود الى الروابط
كود:
<A href="object"></a>تسمح بانشاء رابط اسمه
object
كود:
<A name="ancrage"></a>تسمح بانشاء مرسى اسمه
ancrage

للدلالة على الرابط نكتب ما بين
<a>و</a>
النص الموجود ما بين

كود:
<a....>و</a>يصبح المنطقة العاملة بالنسبة للرابط
وبواسطة الاضافة
HREF
يمكن الضغط على الرابط

المرسى
المرسى هو الاستعمال الاكثر بساطة للحقيبة
<a>
لكن يجب ان يكون الاسم الذي يعطى للمرسى مميزا ولم يستعمل من قبل في الصفحة
و لانشاء مرسى نستعمل الحقيبة بالطريقة التالية
<a name="ancrage"></a>
و لانشاء رابط الى المرسى نكتب

الروابط
اضافة رابط معقد قليلا بالنسبة للمرسى ذلك اننا نستطيع صنع روابط على كل ما نريد
ولانشاء رابط نكتب

كود:
<a HREF="الرابط">عنوان الرابط</a>و هناك اضافة تستعمل لتحديد مكان الرابط وهي
TRAGET
وتستعمل بهذه الطريقة

_لفتح الرابط في نفس الصفحة
كود:
<A HREF="http://www.lifenet-sy.com" traget=_top> lifenet</A>لفتح الرابط في صفحة جديدة
كود:
<A HREF="http://www.lifenet-sy.com" traget=_blank> bramjnet</A>ملاحظة

يمكن استعمال الحقيبة <a> في الرسائل فنكتب
كود:
<A HREF="MaZeN:Mazen9111@lifenet-sy.com">Ecrire</A

</blockquote>

رد: موسوعة صفحات الويب

<blockquote class="postcontent restore " style="margin: 0px; padding: 0px; word-wrap: break-word;">

اضافة صور

الحقيبة المستعملة لاضافة الصور هي
كود:
<IMG SRC= "اسم الصورة.صيغتها">
كما لاحظتم لم نستعمل وسم نهاية ويفسر ذلك باننا سنضيف شيء الى الصفحة ولن نحاول تشخيص نص كتابي

وهنا مثال
كود:
<img src="calv01.gifوستكون النتيجة هكذا

لاحظة
عندما تضع الصورة في نفس الملف الذي توجد فيها الصفحة يتوجب عليك فقط ذكر اسم الصورة وصيغتها
اما اذا كان غير ذلك فيتوجب عليك ذكر مكان الصورة كما تفعل عندما تريد اضافة صورة في توقيعك
مثال

كود:
<img src="www.lifenet-sy.com/MaZeN/calv01.gif">الاضافات
الاضافة الدالة على مساحة الصورة
كود:
<IMG SRC="calv01.gif" HEIGHT=60 WIDTH=47>
تظهر
* HEIGHT تدل على علو الصورة او بمعنى اصح الطول
* WIDTH تدل على عرض الصورة
استعمات هذه الاضافات لتصغير الصورة ب 50% من مساحتها الاصلية

ويمكن ايضا التغيير في مكان الصورة بالنسبة للنص(اليمين اليسار الخ...) والاضافة المستعملة لهذا الغرض هي
كود:
ALIGNوهذه لائحة بالقيم التي ياخذها مرفقة بمثال اضغط على اسم القيمة لتجد صفحة استعملت فيها
left
right
absbottom
absmiddle
****line
bottom
texttop
والان استعمال صورة كأنها رابط يجب عليك إن تستعمل فقط ما تعلمته في الروابط
كود:
<A HREF="Mazen9111@lifenet-sy@lidenet.com"><IMG SRC="truc.gif"></A>
لتعطي
ولتضع الصورة كخلفية للصفحة نستعمل الاضافة BACKGROUND مرفقة الى الحقيبة <BODY>
مثال
كود:
<BODY BACKGROUND="الصورة.gif"></body>

</blockquote>

رد: موسوعة صفحات الويب

<blockquote class="postcontent restore " style="margin: 0px; padding: 0px; word-wrap: break-word;">

الحقيبة

كود:
<head></head>تتذكرون كنا قد تكلمنا عن جسم الصفحة لكننا تكامنا ايضا عن راس

الصفحة هذه الاحقيبة تمثل راس الصفحة وهي تصلح لاعطاء معلومات لمحركات البحث وللمتصفح و كذلك لاظهار عنوان الصفحة في اعلى نافذة الانترنيت
ويستعمل لهذا الغرض الحقيبة
كود:
<title></title>

بهذه الطريقة
كود:
<head>
<title>welcome</title>
</head>
<body>
<p>how are you</p>
</body>
الان استطيع ان اقول ان كل من قرء هذه الدروس و اكملها قادر على انشاء صفحة خاصة به بدون مساعد والتعرف على اخطاء ان وجدت بصفحة وهذا يعني انه من كان يريد ان يتعلم الاساسيات فقط فقد حقق مراده
لكن انا اقول هذا وانا اعلم انه بعيد عن الاحترافية ولذلك فالدروس مستمرة
ولان نصائح لابد منها
*جميع الحروف يجب ان تكون صغيرة لان العنوان في الانترنيت حساس جدا
*جميع الصور يجب ان تكون صغيرة او متوسطة ليكون التصفح سريعا
وهناك صيغ تخفض من حجم الصورة اهمها
jpg هذه الضيغة تخفض من حجم الصوره لكنها تضيع بعض التفاصيل فيها وتستعمل اذا كانت الصورة كثيرة الالوان الصور الشمسية او الرقمية
gif هذه الصيغة تكون دون ضياع لكنها لاتكون صلحة الا في 256 لون كحد اقصىوهي تمكن ايضا من ان تكون الصورة متحركة او شفافة
*لاتنسى الحقيبة
<title></title>
لكي يكون ما بداخل الصفحة مفهوما
*لا تنسى وضع رابط لتتواصل مع المتصفحين
لان هناك حروف غير في الة الرقن خاصتكclavier

وقد تكون محتاجا لبعضها في صفحتك الخاصة لذا وجد كود لهذه المسألة ¥ فمثلا لكتابة
نكتب
&yen

</blockquote>

رد: موسوعة صفحات الويب

<blockquote class="postcontent restore " style="margin: 0px; padding: 0px; word-wrap: break-word;">

اللوائح مع ايقونات

حقيبة الانشاء

كود:
<ul></ul> (Unordered List)تخبر المتصفح بوجود منطقة مخصصة للائحة ولكن اذابقيت الحقيبة على هذه الحالة فستكون دون اهمية
ولاعطائه محتوى صحيح يجب ان تدخل كل معطى في اللائحة داخل زوج من الحقيبة
كود:
<LI> </LI> (List Item)وهكذا ستكون لائحة بايقونات مكتوبة بهذه الطريقة

كود:
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
ب- الاضافات
لغة html لا تعطي الكثير من الامكانيات للتعامل مع النص بالنسبة للايقونات puce ولذلك فالايقونات مرتبطة اساسا بنوع المتصفح
ولكن هناك طرق تمكن من وضع ايقونات غير تلك التي يمنحها المتصفح في برمجته الاساسية وهذا يتم عن طريق الاضافة

كود:
typeوالتي تأخذ القيم التالية
كود:
(disk;circle;square)الترتيب الذي وضعت به هذه القيم هو الذي يعتمده المتصفح اذا لم تذكر النوع الذي يجب عليه استخدامه
اي عندما لا تستخدم الاضافة

كود:
typeمثال على ما ذكرت
عندما نكتب
كود:
<UL>
<LI> Livres </LI>
<UL>
<LI> Livre 1 </LI>
LI> Livre 2 </LI>
</UL>
<LI> CDs </LI>
<UL>
<LI> Genre 1 </LI>
<UL>
<LI> Interpète 1 </LI>
<LI> Interpète 2 </LI>
</UL>
<LI> Genre 2 </LI>
</UL>
<LI> Vidéos </LI>
<LI> DVDs </LI>
</UL>تكون النتيجة

واذا استعملنا الاضافة
كود:
typeوكتبنا
كود:
<UL type="circle">
<LI> Livres </LI>
<UL type="disk">
<LI> Livre 1 </LI>
<LI> Livre 2 </LI>
</UL>
<LI> CDs </LI>
<UL type="square">
<LI> Genre 1 </LI>
<UL type="circle">
<LI> Interpète 1 </LI>
<LI> Interpète 2 </LI>
</UL>
<LI> Genre 2 </LI>
</UL type="disk">
<LI> Vidéos </LI>
<LI> DVDs </LI>
</UL>تكون النتيجة

اللوائح المرتبة
أ-حقيبة الاضافة
نفس المبدا بالنسبة للوائح المرتبة تقريبا
كود:
<ol></ol> (Ordered List)تخبر المتصفح ببداية ونهاية اللائحة المرتبة

كود:
<LI> </LI>تمكن من ادخال كل عنصر الذين سيضاف اليها الارقامات اتوماتكيا من طرف المتصفح
مثال عن هذه الحقيبة

كود:
<OL>
<LI>العنصر1 </LI>
<LI>العنصر2 </LI>
<LI> العنصر3</LI>
</OL>ب-الاضافات

هنا ايضا نستعمل الاضافة
type
ولكن بالقيم التالية
A :لكي يكتب المتصفح الترتيب بحروف انجليزية كبيرة
a :لكي يكتب المتصفح الترتيب بحروف انجليزية صغيرة
i :لكي يكتب المتصفح الترتيب بحروف رومانية صغيرة
I :لكي يكتب المتصفح الترتيب بحروف رومانية كبيرة
ونستعمل ايضا الاضافة
start
وهي تتخذ الارقام كقيمة لتخبر المتصفح من اي مستوى يبدا الترقيم

مثال
كود:
<OL TYPE="A" START="8">
<LI>عنصر1</LI>
<LI>عنصر2</LI>
<LI>عنصر3</LI>
</OL>لتظهر
3 لوائح التعريف
استعملت في بادئ الامر لارشفت التعريفات و من هنا جاء اسمها
أ حقيبة الاضافة
كود:
<DL> </DL> (Definition List)تخبر المتصفح ببداية ونهاية لائحة التعريفات
كود:
<DT> (Definition Term)و<DD> (Definition Data)تصلح لادخال العناصر (مصطلح وتعريفه)
مثال
كود:
<DL>
<DT>عنصر 1
<DD>ملاحظة 1
<DD>ملاحظة 2
<DD>ملاحظة 3
<DT>عنصر 2
<DD>ملاحظة 1
<DT>عنصر 3
<DD>ملاحظة 1
<DD>ملاحظة 2
<DD>ملاحظة 3
<DD>ملاحظة 4
</DL>تعطي
ملاحظة
الحقيبة
كود:
<MENU> </MENU>تصلح ايضا لانشاء لوائح غير مرتبة لكن استعمالها قل و استبدلت ب
كود:
<UL> </UL>

</blockquote>

رد: موسوعة صفحات الويب

<blockquote class="postcontent restore " style="margin: 0px; padding: 0px; word-wrap: break-word;">

الجداول

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

حقيبة الاضافة
كود:
<TABLE> </TABLE>
تخبر المتصفح ببداية الجدول ونهايته وبعد ذلك يجب وصف الجدول سطرا بسطر بواسطة الحقيبة

كود:
<TR> </TR> (Table Row).لانشاء خانة يجب صنع عمود بداخل كل سطر وهنا يوجد حالتان
*يمكن انشاء خانة تصلح لتكون فصلا وهنا نستعمل الحقيبة

كود:
<TH> </TH> (Table Head)بعدد ما يوجد من خانات
*نريد انشاء مجموعة من الخانات الخاصة بالمعطيات-صور نص كتابي ...-نستعمل الحقيبة
كود:
<TD> </TD> (Table Data)داخل السطور بعدد ما يوجد من اعمدة
مثال لجدول به 4 سطور و 5 اعمدة-السطر الاول سيظهر عنوان الاعمدة الفصول كما قلنا في جدول التعريفات
كود:
<TABLE>
<TR>
<TH> </TH>
<TH> </TH>
<TH> </TH>
<TH> </TH>
<TH> </TH>
</TR>
<TR>
<TD> </TD>
<TD> </TD>
<TD> </TD>
<TD> </TD>
<TD> </TD>
</TR>

<TR>
<TD> </TD>
<TD> </TD>
<TD> </TD>
<TD> </TD>
<TD> </TD>
</TR>

<TR>
<TD> </TD>
<TD> </TD>
<TD> </TD>
<TD> </TD>
<TD> </TD>
</TR>
</TABLE>ولملا لجدول عليك فقط ملأ ما بدا خل الحقيبة
كود:
<TD> </TD>مع تشخيص االنص الذي تريد داخلهما

اضافات الحقيبة
<TABLE>
الحواشي والاضافات
يمكن ان تحتاج الى اظهار حواشي الجدول
وهنا تتدخل الحقائب

كود:
BORDER="x", CELLSPACING="x" و CELLPADDING="x"مع تعويض x بقيمة بالبكسل التي تريدها
¤ BORDER="x" تصلح لاظهار حواش للجدول وحجم هذه الحواشي يتعلق بالبرمجة الاساسي للمتصفحواذا كانت هذه الاضافة غير حاضرة تكون الحواش غير ظاهرة
اذا وضعت 0 مكان x يتم الغاء الاضافتين

كود:
CELLSPACING="x"وCELLPADDING="x"
¤CELLSPACING="x" تمكن من تشخيص المساحة التي تفصل بين الخانات
قيمتها في البرمجة الاساسية لمعظم برامج التصفح هي 2
¤CELLPADDING="x" تحدد المسافة الموجودة بيم حوافي الخانة و النص الموجود داخلها
قيمتها في البرمجة الاساسية لمعظم برامج التصفح هي 1
كما سيخمن الكثير الجدول الاكثر صغرا كود كتابته هو
كود:
TABLE BORDER="0" CELLSPACING="0" CELLPADDING="0"طول وعرض الجدول
في البرمجة الاساسية لبرامج التصفح تقوم بتحديد طول وعرض الجدول حسب حجم النافذة او حجم النص
ويمكن التحكم في الطول و العر ض بواسطة
كود:
WIDTH="x" و HEIGHT="x"
WIDTH="x" يمكن تعوض x بقيمة بالبكسل او بقيمة مئوية ولمرونة اكثر انصح بالقيم المئوية
مثال 50%
HEIGHT="x" التحكم فيها يكون كما سبق شرحه في الاعلى

اقتباس:
ملاحظة يمكن الجمع بين القيمة المئوية و قيم البكسل
اضافات الحقائب
<TR>, <TH> و<TD>
بالنسبة لاضافات هذه الحقائب القيم المكتوبة لا تكون سارية الا بالنسبة للخانة المعنية بالاضافات
ويمكن التخلي عن تشخيص جميع الخانات و الاكتفاء بتشخيص الاعمدة و السطور في الاماكن الاكثر تاثيرا من الجدول
الاضافات الموجودة و الاكثر اهمية

¤ALIGN="LEFT|CENTER|RIGHT"
وكما لاحظتم فهي تاخذ احدى هذه القيم الثلاثة
LEFT|CENTER|RIGHT
ومن البذيهي انها ستكون موجودة لتحدد مكان بداية الكتابة اليمين اليسار او الوسط
¤VALIGN="TOP|MIDDLE|BOTTOM"
تخبرالتصفح بمكان وضع النص في الخانة
الاعلى,الاسفل,في الوسط
¤HEIGHT="x"
كما في الحقيبة
<TABLE>.
الاضافة هنا تحدد طول الخانة,واذا حددنا طول خانة واحدة نحدد طول سطر كامل
¤WIDTH="x"
كما في الحقيبة
<TABLE>
الاضافة هنا تحدد عرض الخانة,واذا حددنا عرض خانة واحدة نحدد غرض عمود كامل
COLSPAN="x"
تمكن من ملاحمة
x اعمدة
ROWSPAN="x"
تمكن من ملاحمة
x سطور
ملاحظة لايجب ان يتخطى مجموع احجام الخانات الحجم الاجمالي للجدول المحدد
والا فلن يطبقها المتصفح وسيقوم بحساب حجم الخانات بالنسبة لحجم الجدول ليكون محتوى الخانات ظاهرا
وقد تحدث اخطاء في الصفحة ويكون قراءة ما بداخلها صعبا
اضافات لم يتم ذكرها في الاعلى للاهمية
كود:
BGCOLORتختص بتغيير لون خلفية الجدول
كود:
BORDERCOLORتختص بتشخيص لون حواشي الجدول
كود:
BORDERCOLORLIGHTتظهر لون الظل الذي سيظهر للجدول اذا قمت باستعمالها
هذه الاضافت تكون سارية ايضا بالنسبة للخانات لتحدد لونها لتكون مميزة عن الخانات الاخرى
كود:
CAPTIONمع تسطير ب القيم
TOP او BOTTOM
تمكن من اظها عنوان للجدول
كود:
ALIGN="left|right"تمكن من تشخيض تسطير الجدول يمين يسار
لا تنسى وضع
كود:
BR CLEAR=allبعد النص ليتوقف المتصفح عن تطبيق التسطير
كود:
<BACKGROUND="lifenet-sy.gif">

</blockquote>

رد: موسوعة صفحات الويب

<blockquote class="postcontent restore " style="margin: 0px; padding: 0px; word-wrap: break-word;">

الجداول

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

حقيبة الاضافة
كود:
<TABLE> </TABLE>
تخبر المتصفح ببداية الجدول ونهايته وبعد ذلك يجب وصف الجدول سطرا بسطر بواسطة الحقيبة

كود:
<TR> </TR> (Table Row).لانشاء خانة يجب صنع عمود بداخل كل سطر وهنا يوجد حالتان
*يمكن انشاء خانة تصلح لتكون فصلا وهنا نستعمل الحقيبة

كود:
<TH> </TH> (Table Head)بعدد ما يوجد من خانات
*نريد انشاء مجموعة من الخانات الخاصة بالمعطيات-صور نص كتابي ...-نستعمل الحقيبة
كود:
<TD> </TD> (Table Data)داخل السطور بعدد ما يوجد من اعمدة
مثال لجدول به 4 سطور و 5 اعمدة-السطر الاول سيظهر عنوان الاعمدة الفصول كما قلنا في جدول التعريفات
كود:
<TABLE>
<TR>
<TH> </TH>
<TH> </TH>
<TH> </TH>
<TH> </TH>
<TH> </TH>
</TR>
<TR>
<TD> </TD>
<TD> </TD>
<TD> </TD>
<TD> </TD>
<TD> </TD>
</TR>

<TR>
<TD> </TD>
<TD> </TD>
<TD> </TD>
<TD> </TD>
<TD> </TD>
</TR>

<TR>
<TD> </TD>
<TD> </TD>
<TD> </TD>
<TD> </TD>
<TD> </TD>
</TR>
</TABLE>ولملا لجدول عليك فقط ملأ ما بدا خل الحقيبة
كود:
<TD> </TD>مع تشخيص االنص الذي تريد داخلهما

اضافات الحقيبة
<TABLE>
الحواشي والاضافات
يمكن ان تحتاج الى اظهار حواشي الجدول
وهنا تتدخل الحقائب

كود:
BORDER="x", CELLSPACING="x" و CELLPADDING="x"مع تعويض x بقيمة بالبكسل التي تريدها
¤ BORDER="x" تصلح لاظهار حواش للجدول وحجم هذه الحواشي يتعلق بالبرمجة الاساسي للمتصفحواذا كانت هذه الاضافة غير حاضرة تكون الحواش غير ظاهرة
اذا وضعت 0 مكان x يتم الغاء الاضافتين

كود:
CELLSPACING="x"وCELLPADDING="x"
¤CELLSPACING="x" تمكن من تشخيص المساحة التي تفصل بين الخانات
قيمتها في البرمجة الاساسية لمعظم برامج التصفح هي 2
¤CELLPADDING="x" تحدد المسافة الموجودة بيم حوافي الخانة و النص الموجود داخلها
قيمتها في البرمجة الاساسية لمعظم برامج التصفح هي 1
كما سيخمن الكثير الجدول الاكثر صغرا كود كتابته هو
كود:
TABLE BORDER="0" CELLSPACING="0" CELLPADDING="0"طول وعرض الجدول
في البرمجة الاساسية لبرامج التصفح تقوم بتحديد طول وعرض الجدول حسب حجم النافذة او حجم النص
ويمكن التحكم في الطول و العر ض بواسطة
كود:
WIDTH="x" و HEIGHT="x"
WIDTH="x" يمكن تعوض x بقيمة بالبكسل او بقيمة مئوية ولمرونة اكثر انصح بالقيم المئوية
مثال 50%
HEIGHT="x" التحكم فيها يكون كما سبق شرحه في الاعلى

اقتباس:
ملاحظة يمكن الجمع بين القيمة المئوية و قيم البكسل
اضافات الحقائب
<TR>, <TH> و<TD>
بالنسبة لاضافات هذه الحقائب القيم المكتوبة لا تكون سارية الا بالنسبة للخانة المعنية بالاضافات
ويمكن التخلي عن تشخيص جميع الخانات و الاكتفاء بتشخيص الاعمدة و السطور في الاماكن الاكثر تاثيرا من الجدول
الاضافات الموجودة و الاكثر اهمية

¤ALIGN="LEFT|CENTER|RIGHT"
وكما لاحظتم فهي تاخذ احدى هذه القيم الثلاثة
LEFT|CENTER|RIGHT
ومن البذيهي انها ستكون موجودة لتحدد مكان بداية الكتابة اليمين اليسار او الوسط
¤VALIGN="TOP|MIDDLE|BOTTOM"
تخبرالتصفح بمكان وضع النص في الخانة
الاعلى,الاسفل,في الوسط
¤HEIGHT="x"
كما في الحقيبة
<TABLE>.
الاضافة هنا تحدد طول الخانة,واذا حددنا طول خانة واحدة نحدد طول سطر كامل
¤WIDTH="x"
كما في الحقيبة
<TABLE>
الاضافة هنا تحدد عرض الخانة,واذا حددنا عرض خانة واحدة نحدد غرض عمود كامل
COLSPAN="x"
تمكن من ملاحمة
x اعمدة
ROWSPAN="x"
تمكن من ملاحمة
x سطور
ملاحظة لايجب ان يتخطى مجموع احجام الخانات الحجم الاجمالي للجدول المحدد
والا فلن يطبقها المتصفح وسيقوم بحساب حجم الخانات بالنسبة لحجم الجدول ليكون محتوى الخانات ظاهرا
وقد تحدث اخطاء في الصفحة ويكون قراءة ما بداخلها صعبا
اضافات لم يتم ذكرها في الاعلى للاهمية
كود:
BGCOLORتختص بتغيير لون خلفية الجدول
كود:
BORDERCOLORتختص بتشخيص لون حواشي الجدول
كود:
BORDERCOLORLIGHTتظهر لون الظل الذي سيظهر للجدول اذا قمت باستعمالها
هذه الاضافت تكون سارية ايضا بالنسبة للخانات لتحدد لونها لتكون مميزة عن الخانات الاخرى
كود:
CAPTIONمع تسطير ب القيم
TOP او BOTTOM
تمكن من اظها عنوان للجدول
كود:
ALIGN="left|right"تمكن من تشخيض تسطير الجدول يمين يسار
لا تنسى وضع
كود:
BR CLEAR=allبعد النص ليتوقف المتصفح عن تطبيق التسطير
كود:
<BACKGROUND="lifenet-sy.gif">

</blockquote>

» عبدالله سعد الجنوبي يقلب صفحات الماضي 2_2