منتدي ستوديو بلاتوه
** اهلا بكم في منتديات .. ســوديو بـلاتــPlAt0ــوه ..**

بص يا برنـس انت كده مش هتعرف تــشوف ولا موضوع في الـمنـتدي الا لمــا تســجل معــانا ..

فيلا سجل وشارك ومستنيين رايك ..

التسـجـيل مش هياخد دقيقه واحده ..

منتدي ستوديو بلاتوه

صـور ♥♥ فـضايح ♥♥ اخــبــار ♥♥ اغــاني ♥♥ افلام ♥♥ برامــــج ♥♥ اللعاب
 
الرئيسيةبحـثدخولالتسجيلس .و .ج








شاطر | 
 

 درس شامل فى لغة Html

استعرض الموضوع السابق استعرض الموضوع التالي اذهب الى الأسفل 
كاتب الموضوعرسالة
sikon4ever
**مشرف منتدي تطوير المواقع**
**مشرف منتدي تطوير المواقع**
avatar

السرطان عدد المساهمات : 21
تبادل إعلاني تبادل إعلاني : نقاط : 53
تاريخ التسجيل : 21/04/2009
العمر : 38

اول جدول افقى TABLE ROW
اول معلومه فى الجدول على اليسار
ثانى معلومه على اليمين

ثانى جدول افقى TABLE ROW
اول معلومه فى السطر الثانى على اليسار
ثانى معلومه فى السطر الثانى على اليمين
مع ضرورة اغلاق جميع الاوامر بعد الانتهاء منها


مُساهمةموضوع: درس شامل فى لغة Html   الجمعة مايو 22, 2009 9:08 pm

بكل بساطة لغة ال 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




علما بان هذه الاوامر لايحتاج الى اغلاق حسب الدروس السابقه ماعدا امر واحد وقد تم ايضاحه
[center]الروابط

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

ولكى تفتح الموقع بصفحه جديده تستعمل هذا الامر Target
مثال
Cnn Link

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

ويوجد امر ل Target
ولكن مفعوله يختلف عن الامر السابق
وهو ان توجه مستخدم الصفحه الى موضوع معين فى الصفحه قد يكون اولها او بالنص او بالاخر
مثال
Target Link
Target Link
Target Link


وتضع فى الصفحه
Car
وتضع معلومات هنا

House
وتضع معلومات هنا

Office
وتضع معلومات هنا

وهكذا


[center]الصور

للتعامل مع الصور فى صفحة ال Html يوجد اكثر من طريقه اهمها


تضبيط الصورة باستعمال ALIGN
يمكنك بهذا الامر من تضبيط الصوره لليمين واليسار هكذا


ووضع ارشادات او شرح بمجرد مرور الماوس عليها بهذا الامر ALT
Hello damas_gate!

ويمكنك تحديد حجم الصوره عرضها وطولها بهذا الامر WIDTH و height


ووضع برواز او اطار لها بهذا الامر BORDER


ووضع اطار خفى ليتم تضبيط الصوره بحيث لايؤثر على تنسيقها الكلام الموضوع فى الصفحه استعمل هذا الامر VSPACE و HSPACE



واخيرا يمكن استعمال اكثر من امر فى سطر واحد هكذا
TEXT

ملاحظه
حاول تقليل حجم الصوره قدر الامكان حتى لاتكون ثقيله على من يحملها فانت لاتعرف سرعة اتصال الاخرون بالنت
[center]القوائم

عندما تريد وضع جدوله فى صفحتك عليك باستخدام هذه الاوامر

    و


  • هكذا

    • محمد
    • عبدالله
    • يوسف


    ونلاحظ هنا انه يجب اغلاق هذا الامر بعد الانتهاء من وضع اخر اسم

    للترقيم التسلسلى استعمل هذا الامر
      و


      1. محمد
      2. عبدالله
      3. يوسف

      الجدوله

      موضوع معقد نوعا ما وسوف احاول ان اسهله قدر المستطاع










      First CellSecond Cell
      Third CellFourth Cell

      الشرح المبسط لهذا الجدول
      BORDER=1 اطار حجمه صغير
First CellSecond Cell
Third CellFourth Cell

الان سوف اتكلم عن مقومات الجدول

BORDER=#
اضافة اطار بحجم البرواز

WIDTH=# or %
عرض الجدول بالحجم او بالنسبه المئويه

CELLSPACING=#
CELLPADDING=#
ويستخدم هذان الامران لسماكة الخلايا الذى يكتب بها المعلومات

BGCOLOR=colour
لتلوين خلفية كل خليه من خلايا الجدول

BACKGROUND=image name
لوضع صوره فى خلفية الخليه بدلا من تلوينها


وهذا مثال لاستعمال جميع الاوامر السابقه فى جدول متقدم











fruits
applesoranges
redgreensweetsour




[center]الان ندخل المرحله الفعليه فى تصميم موقع ونرفعه على النت ونضع رابط له

سوف استخدم اوامر FRAME فى تصميم الموقع

مثال
موقع قرقيعان












ونحفظه تحت اسم index.html

لدينا هنا فى هذا المثال عمودان
الاول وهو على اليسار واسمه العمود اليسار leftframe
والثانى وهو على اليمين واسمه العمود اليمين rightframe
وسوف نضع القائمه على اليسار لكى يختار منها من يشاهد الموقع
ونضع على اليمين المعلومات التى يختارها من يشاهد الصفحة

سوف نعمل صفحه جديدة اسمها leftframe.html وبها القوائم
وصفحه جديدة اسمها rightframe.html وبها المعلومات

لكى تشاهد ما عملناه فى هذا المثال اذهب للموقع هذا
http://www5.domaindlx.com/qarqeaan/index.html

[center]وسوف نرفع 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/

[center]واخيرا سوف اضع لكم روابط للمواقع التى استشفيت منها واقتبست
لعل وعسى ان تنفعكم وتساعدكم فى تصميم موقع

A Beginner's Guide to HTML
Part One

Part Two

Part Three


The Bare Bones Guide to HTML
Bare Bones Guide

الالاف من الصور والايكون لموقعك

الالاف من الصور لعمل خلفيه لموقعك

وتحياتى لكم جميعا







[/center]

[/center]
[/center]

[/center]
[/center]
[/center]

_________________

الرجوع الى أعلى الصفحة اذهب الى الأسفل
معاينة صفحة البيانات الشخصي للعضو
فله لك علي طول
** مــــديرة الـــمــنــتــدي **
** مــــديرة الـــمــنــتــدي **
avatar

العذراء عدد المساهمات : 2411
نقاط : 6445
تاريخ التسجيل : 04/04/2009
العمر : 30
الموقع : ELMANSOURA

مُساهمةموضوع: رد: درس شامل فى لغة Html   السبت مايو 23, 2009 4:29 pm

تسلم

_________________

لاظهار الموضوع يجب الرد اولا


 



 


 


 

الرجوع الى أعلى الصفحة اذهب الى الأسفل
معاينة صفحة البيانات الشخصي للعضو
 
درس شامل فى لغة Html
استعرض الموضوع السابق استعرض الموضوع التالي الرجوع الى أعلى الصفحة 
صفحة 1 من اصل 1
 مواضيع مماثلة
-
» بعض النباتات الضاره بالكوكاتيل
» تابع html مستوى متقدم
» أنشاء سجل زوار لموقعك شرح بالخطوات
» اكواد ساعات للمنتديات
» برنامج لتنظيم صورك المفضلة في ألبوم فلاشي مع مؤثر التلاشي الجميل بصيغة SWF أو HTML

صلاحيات هذا المنتدى:لاتستطيع الرد على المواضيع في هذا المنتدى
منتدي ستوديو بلاتوه :: ♥♥ منتدي البرامج وشروحات الفوتوشوب وتطوير المواقع من بـلاتــPlAt0ــوه ♥♥ :: ♥ قسم ستوديو بـلاتــPlAt0ــوه لتطـويـر المـواقع والسرفرات ♥-
انتقل الى: