الرئيسية
بكل بساطة لغة ال Html تتكون من اوامر الاساسيه مثل
تبدأ بها الصفحة
وتسمى الهدنج وهى راس الصفحه
وهذه لاغلاق الهدنج
ونلاحظ هنا باننا نبدا بالامر وننهيه بنفس الامر بزياده السلاش /
والامر Body يعنى جسم الصفحه من الكلام ولون الكلام ولون الروابط ولون الروابط التى تم زيارتها
مثال
وتغلق امر Body بهذا
وهذه لاغلاق امر Html
هذه صفحة Html بسيطة وبها الاوامر الاساسيه التى لاتستغنى عنها بكل صفحة
فى الدروس الاخرى سوف نتوسع فى الشرح لكل امر لوحدة
ملاحظه الرجاء عدم المشاركة حتى الانتهاء من الدروس جميعها وشكرا
الحروف
يمكننا من تنويع الحروف فى الصفحه كالاتى
الحروف الميلانه
sample text
الحروف الغامقه
sample text
الحروف التى تحتها خط
sample text
الحروف المشطوبه
sample text
لترفيع او تنزيل حرف ولاحظ حرف pb العصا لاعلى ولاسفل
sample text
sample text
وعادة تستعمل هذه الميزه فى الاس التربيعى فى المعادله الرياضيه
ولتلوين الحروف
sample text
لتوسيط الحروف فى نصف الصفحه
sample text
ولاختيار نوع الحرف
sample text
وفى هذا المثال قمنا باختيار نوع الحرف Arial
مع ملاحظة ان الحروف التى تشاهدها على شاشة كمبيوترك قد لايشاهدها اخرون اذا لم يكن لديهم نفس الحروف
ولذلك عندما تختار خط غير متوفر مع الوندوز عليك بوضعه للتحميل مع اخبار الذى يشاهد صفحتك بهذه الامور
والا لن يشاهد الحروف بالشكل الذى وضعته انت وانما الكمبيوتر سوف يختار الحروف الافتراضيه
حجم الحرف
sample text
ويمكن لصق اكثر من احر للحروف فى امر واحد كهذا
وكما ذكرنا فى الدرس الاول عند وضع الامر يجب اغلاقه والا تشوهت الصفحه بسبب خطأ عدم اغلاق الامر
تقسيم الصفحه
عادة يستعمل هذا الامر Hair Line
وتعنى السطر الشعره لتشابة السطر بالشعرة وهو سطر خفيف جدا كالشعره
ولكن يمكننا زيادة حجم هذه الشعرة بهذا الامر وسوف يضع ظلا بهذا السطر
او زيادة طول السطر بهذا الامر
وهذا الامر بدون ظلا
وبامكانك الاستغناء عن هذا الامر بوضع فواصل اخرى كالزهور وخلافه
لفصل الكلام ووضع البقيه فى السطر اللى تحته نستعمل هذا الامر Line Break
وهذا الامر كأنك ضغطت على Enter Key فى النوتباد مثلا
وفى حالة ان تود بوضع سطر كلام ولاتريد الوندوز ان يكسره ويضع البقيه فى السطر اللى تحت تستعمل هذا الامر No Break
text
وهذا يجعل السطر كاملا فى الصفحة
لاحظ هذا الامر يحتاج الى اغلاق
هذا الامر تنهى به الجمله او السطر ويعطيك سطرا اضافيا Paragraph
علما بان هذه الاوامر لايحتاج الى اغلاق حسب الدروس السابقه ماعدا امر واحد وقد تم ايضاحه
الروابط
عند وضع روابط فى الصفحه يجب وضعها بهذا الامر
مثال
Cnn Link
وتذكر دائما اغلاق الامر به
هذا الامر سوف يفتح لك الموقع بنفس الصفحه التى انت بها
ولكى تفتح الموقع بصفحه جديده تستعمل هذا الامر Target
مثال
Cnn Link
ولفتح موقع او بالاحرى لانستطيع تسمية موقع وانما نسميه صفحه موجوده بجهازك
فلامر سوف يكون مباشر بدون لنك كهذا
Sample Link
ويوجد امر ل Target
ولكن مفعوله يختلف عن الامر السابق
وهو ان توجه مستخدم الصفحه الى موضوع معين فى الصفحه قد يكون اولها او بالنص او بالاخر
مثال
Target Link
Target Link
Target Link
وتضع فى الصفحه
Car
وتضع معلومات هنا
House
وتضع معلومات هنا
Office
وتضع معلومات هنا
وهكذا
الصور
للتعامل مع الصور فى صفحة ال Html يوجد اكثر من طريقه اهمها
تضبيط الصورة باستعمال ALIGN
يمكنك بهذا الامر من تضبيط الصوره لليمين واليسار هكذا
ووضع ارشادات او شرح بمجرد مرور الماوس عليها بهذا الامر ALT
ويمكنك تحديد حجم الصوره عرضها وطولها بهذا الامر WIDTH و height
ووضع برواز او اطار لها بهذا الامر BORDER
ووضع اطار خفى ليتم تضبيط الصوره بحيث لايؤثر على تنسيقها الكلام الموضوع فى الصفحه استعمل هذا الامر VSPACE و HSPACE
واخيرا يمكن استعمال اكثر من امر فى سطر واحد هكذا
ملاحظه
حاول تقليل حجم الصوره قدر الامكان حتى لاتكون ثقيله على من يحملها فانت لاتعرف سرعة اتصال الاخرون بالنت
القوائم
عندما تريد وضع جدوله فى صفحتك عليك باستخدام هذه الاوامر
ونلاحظ هنا انه يجب اغلاق هذا الامر بعد الانتهاء من وضع اخر اسم
للترقيم التسلسلى استعمل هذا الامر
</LI>
</LI>
للتعامل مع الصور فى صفحة ال Html يوجد اكثر من طريقه اهمها
تضبيط الصورة باستعمال ALIGN
يمكنك بهذا الامر من تضبيط الصوره لليمين واليسار هكذا
ووضع ارشادات او شرح بمجرد مرور الماوس عليها بهذا الامر ALT
ويمكنك تحديد حجم الصوره عرضها وطولها بهذا الامر WIDTH و height
ووضع برواز او اطار لها بهذا الامر BORDER
ووضع اطار خفى ليتم تضبيط الصوره بحيث لايؤثر على تنسيقها الكلام الموضوع فى الصفحه استعمل هذا الامر VSPACE و HSPACE
واخيرا يمكن استعمال اكثر من امر فى سطر واحد هكذا
ملاحظه
حاول تقليل حجم الصوره قدر الامكان حتى لاتكون ثقيله على من يحملها فانت لاتعرف سرعة اتصال الاخرون بالنت
القوائم
عندما تريد وضع جدوله فى صفحتك عليك باستخدام هذه الاوامر
- و
هكذا- محمد
- عبدالله
- يوسف
ونلاحظ هنا انه يجب اغلاق هذا الامر بعد الانتهاء من وضع اخر اسم
للترقيم التسلسلى استعمل هذا الامر
- و
- محمد
- عبدالله
- يوسف
</LI>
</LI>
الجدوله
موضوع معقد نوعا ما وسوف احاول ان اسهله قدر المستطاع
| First Cell | Second Cell |
| Third Cell | Fourth Cell |
الشرح المبسط لهذا الجدول
BORDER=1 اطار حجمه صغير
<TR>اول جدول افقى TABLE ROW
اول معلومه فى الجدول على اليسار [td]First Cell[/td]
ثانى معلومه على اليمين [td]Second Cell[/td]
[tr]ثانى جدول افقى TABLE ROW
اول معلومه فى السطر الثانى على اليسار [td]Third Cell[/td]
ثانى معلومه فى السطر الثانى على اليمين [td]Fourth Cell[/td]
مع ضرورة اغلاق جميع الاوامر بعد الانتهاء منها
</TD>
[/tr]
</TABLE>
وهذا شكل الجدول السابق
الان سوف اتكلم عن مقومات الجدول
BORDER=#
اضافة اطار بحجم البرواز
WIDTH=# or %
عرض الجدول بالحجم او بالنسبه المئويه
CELLSPACING=#
CELLPADDING=#
ويستخدم هذان الامران لسماكة الخلايا الذى يكتب بها المعلومات
BGCOLOR=colour
لتلوين خلفية كل خليه من خلايا الجدول
BACKGROUND=image name
لوضع صوره فى خلفية الخليه بدلا من تلوينها
وهذا مثال لاستعمال جميع الاوامر السابقه فى جدول متقدم
| fruits | |||
| apples | oranges | ||
| red | green | sweet | sour |
الان ندخل المرحله الفعليه فى تصميم موقع ونرفعه على النت ونضع رابط له
سوف استخدم اوامر FRAME فى تصميم الموقع
مثال
سوف استخدم اوامر FRAME فى تصميم الموقع
مثال
ونحفظه تحت اسم index.html
لدينا هنا فى هذا المثال عمودان
الاول وهو على اليسار واسمه العمود اليسار leftframe
والثانى وهو على اليمين واسمه العمود اليمين rightframe
وسوف نضع القائمه على اليسار لكى يختار منها من يشاهد الموقع
ونضع على اليمين المعلومات التى يختارها من يشاهد الصفحة
سوف نعمل صفحه جديدة اسمها leftframe.html وبها القوائم
وصفحه جديدة اسمها rightframe.html وبها المعلومات
لكى تشاهد ما عملناه فى هذا المثال اذهب للموقع هذا
http://www5.domaindlx.com/qarqeaan/index.html
وسوف نرفع 3 ملفات html لموقع فى النت قمنا بالتسجيل فيه
والملفات الثلاثه هم
index.html
rightframe.html
leftframe.html
وسوف نقوم ببرمجة كل من
rightframe.html
leftframe.html
الاول وهو على اليسار واسمه العمود اليسار leftframe
والثانى وهو على اليمين واسمه العمود اليمين rightframe
وسوف نضع القائمه على اليسار لكى يختار منها من يشاهد الموقع
ونضع على اليمين المعلومات التى يختارها من يشاهد الصفحة
سوف نعمل صفحه جديدة اسمها leftframe.html وبها القوائم
وصفحه جديدة اسمها rightframe.html وبها المعلومات
لكى تشاهد ما عملناه فى هذا المثال اذهب للموقع هذا
http://www5.domaindlx.com/qarqeaan/index.html
وسوف نرفع 3 ملفات html لموقع فى النت قمنا بالتسجيل فيه
والملفات الثلاثه هم
index.html
rightframe.html
leftframe.html
وسوف نقوم ببرمجة كل من
rightframe.html
leftframe.html
سوف نبدأ بعمل صفحة leftframe
leftframe
Main
123
456
789
وهذه صفحة rightframe
rightframe
نهاية الدروس
ارجو ان اكون قد وفقت بعمل شرح سريع وبسيط لانشاء موقع
وسوف اكون على استعداد لشرح اى جزء او الاجابه على اى استفسار ان وجد
لاحظت اثناء كتابة كود html بالانجليزى وجود بعض الاخطاء وذلك بسبب لغة المنتدى وطريقته للتعامل مع اللغات الانجليزى والعربى
ولذا سوف اقوم بارفاق جميع الامثله لعمل موقع
http://www5.domaindlx.com/qarqeaan/index.html
موقع المثال
وبهذه الطريقة قمت بتصميم موقع قرقيعان قبل 4 سنوات
ويقوم صديق لى بتحديثه
http://www.geocities.com/qarqeaan2/
http://www.geocities.com/qarqeaan2/
ارجو ان اكون قد وفقت بعمل شرح سريع وبسيط لانشاء موقع
وسوف اكون على استعداد لشرح اى جزء او الاجابه على اى استفسار ان وجد
لاحظت اثناء كتابة كود html بالانجليزى وجود بعض الاخطاء وذلك بسبب لغة المنتدى وطريقته للتعامل مع اللغات الانجليزى والعربى
ولذا سوف اقوم بارفاق جميع الامثله لعمل موقع
http://www5.domaindlx.com/qarqeaan/index.html
موقع المثال
وبهذه الطريقة قمت بتصميم موقع قرقيعان قبل 4 سنوات
ويقوم صديق لى بتحديثه
http://www.geocities.com/qarqeaan2/
http://www.geocities.com/qarqeaan2/
