|
|
|
|
 |
 |
|
 |
||||||||
|
|||||||||||
 |
 |
 |
 |
||||||||
| ســاحـة تطوير المواقع والمنتديات برامج مواقع (سكربتات) .. هاكات .. ستايلات..اخر الاخبار الامنيه للمواقع وحمايتها .. .الخ |
 |
|
|
أدوات الموضوع | انواع عرض الموضوع |
|
#1
15-Jan-2008, 09:19 AM
|
||||
|
||||
دروس برمجة اتش تى ام
برمجة المواقع باستخدام HTML الدرس الأول قبل ان نبدأ فى التعرف على هذا النوع من لغات البرمجة قد يتبادر الى اذهان حضراتكم عن البرنامج الذى نستخدمه للتعامل مع هذه اللغة وللاجابة على هذا السؤال ببساطة فاننا لا نحتاج سوى لبرنامج محرر نصوص عادى مثل برنامج Notepad بالاضافة الى مستعرض او Browser مثل الانترنت اكسبلورر internet explorer . سوف أقوم في هذا الدرس بسرد الاوامر الأساسية للغة الـ HTML وهى من اللغات السهلة والتى يمكن ان تصل من خلالها إلى إنشاء صفحة ويب بسيطة. اولا يجب ان نعرف ان الاوامر فى لغة HTML لها بداية ونهاية - لاحظ الاوامر التالية وهى الاوامر الاساسية : امر النهاية امر البداية <HTML> </HTML> <HEAD> </HEAD> <TITLE> </TITLE> <BODY> </BODY> نلاحظ ان الامر يكتب بنفس الشكل مرتين في البدايه و فى النهاية والاختلاف الوحيد هو وجود الرمز / الى جانب الامر عند النهاية ملف ال HTML اولا : نجد ان الملف يبدأ بالامر <html> فى اول سطر وكذلك ينتهى بالامر </html> ونلاحظ ان جميع الاوامر تكتب بين علامات <> ثانيا : ما يكتب بين الامر <title> ، </title> هو ما سييظهر في شريط العنوان الخاص بصفحة الويب والتى نستعرضها من خلال الانترنت اكسبلورر او اى متصفح اخر . ثالثا : ما يكتب بين الامر <body> ، </body> هو ما يسمى بجسم الصفحة اى ان كل ما يكتب هنا سيظهر لنا فى داخل الصفحة بما فى ذلك الصور والنصوص والرسوم والجداول .......... الخ مثال : المطلوب منك الان تجربة انشاء اول صفحة ويب لك وفيما يليى الاوامر التى يجب عليك كتابتها كما قلنا من قبل فى اى برنامج محرر نصوص وارشح لك برنامج notepad فهيا ابدا بفتح البرنامج واكتب الاوامر التالية مع ملاحظة ان حالة الاحرف (كبيرة او صغيرة) لا تهمنا هنا حيث ان لغة html ليست حساسة لحالة الاحرف ولكن لاحظ اننا لابد ان نكتب الاوامر بالحروف الصحيحة : <HTML> <HEAD> <TITLE> This is my first web page </TITLE> </HEAD> <BODY> welcome to my future website </BODY> </HTML> حفظ ملف html بعد كتابة الاوامر السابقة قم بحفظ الملف باسم تعرفه واجعل امتداد الملف htm. أو html. وبعد حفظ الملف فى المجلد الخاص بك قم بفتح الملف من داخل المجلد بالنقر المزدوج عليه او من خلال فتح متصفح الإنترنت الذي تستخدمه. ثم فتح الملف باستخدام الامر open ثم حدد المسار الذي يوجد به الملف. ----------------------------------------- الدرس الثانى التعامل مع الخطوط نأتى الان الى الدرس الثانىوهو تنسيق الخط حيث ان لغة ال html لها خط افتراضى هو Times New Roman وحجمه 3 (بمقياس متصفحات الإنترنت). ولتغيير هذه الاعدادات الافتراضية اى لتنسيق الخط نتعرف على الاوامر التالية : · FONT> ... </FONT> : يستخدم هذا الامر فى التحكم بالخطوط من حيث النوع ويسمى face واللون ويسمى color والحجم ويسمى size . والجدول التالى يوضح خصائص هذا الامر :- · Face : لتحديد نوع الخط الذي نريده ولابد من ان تتأكد من كتابة أسماء الخطوط بالصورة الصحيحة هجائياً مثال : <FONT FACE="Traditional Arabic ">welcome to my website </FONT> · Color : لتحديد لون الخط مثال : <FONT COLOR="red"> hello my friends </FONT> · Size : لتحديد حجم الخط وهناك 7 أحجام للخط حيث نحدد الحجم المطلوب بكتابة رقم يتراوح ما بين 1-7. مثال : <FONT FACE="Arial" SIZE="6" COLOR="red"> This font is Arial, Size is 6, Color is Red </FONT> This font is Arial, Size is 6, Color is Red التنسيقات والتأثيرات التي يمكن إضافتها إلى النصوص * لتطبيق تنسيق الخط الأسود العريض: <B> ... </B> <STRONG> ... </STRONG> <B> Bold Text </B> This is Bold Text <STRONG> Strong Text </STRONG> This is Strong Text * لتطبيق تنسيق الخط المائل : <I> ... </I> <EM> ... </EM> <I> Italic Text </I> This is Italic Text <EM> Emphasized Text </EM> This is Emphasized Text * تسطير الخط : <U> ... </U> <U> Underlined Text </U> This is Underlined Text * خط كبير : <BIG> ... </BIG> <BIG> Big Text </BIG> This is Big Text * خط صغير : <SMALL> ... </SMALL> <SMALL> Small Text </SMALL> This is Small Text * نص يعترضه خط : <STRIKE> ... </STRIKE> <STRIKE> Strike Text </SRTIKE> This is Strike Text مثال : <B><I><U> This is a Bold, Italic and Underlined Text </U> </I> </B> This is a Bold, Italic and Underlined Text كتابة العناوين فى صفحة الويب Headings هناك اوامر خاصة لكتابة العناوين Headings في صفحات الويب وهي كما يلي: <Hn> ... </Hn> وحرف n هو رقم بين 1-6 يمثل مستوى العنوان. <H1> Heading 1 </H1> <H2> Heading 2 </H2> <H3> Heading 3 </H3> <H4> Heading 4 </H4> <H5> Heading 5 </H5> <H6> Heading 6 </H6> ------------------------------------------------------------------------------------- الدرس الثالث التعامل مع الفقرات والقوائم الامر <P> الامر <P> هو امر مفرد لكنه يستخدم أيضاً كامر مزدوج <P> ... </P> وفي هذه الحالة يمكّننا من تحديد إتجاه الفقرة وإتجاه النص فيها حيث يستخدم معه الخصائص ALIGN, DIR. الخاصية ALIGN :- وهى تحدد محاذاة الفقرة و تأخذ القيم Left- Center- Right وأوضحها بالأمثلة التالية: · فقرة بمحاذاة الى اليسار : LEFT <P Align="left"> This is a left-aligned paragraph </P> This is left-aligned paragraph · فقرة بمحاذاة الى اليمين : RIGHT <P Align="right"> This is right-aligned paragraph</P> This is a right-aligned paragraph · فقرة بمحاذاة الى الوسط : CENTER <P Align="center"> This is a centered paragraph</P> This is a centered paragraph ملحوظة :- لتوسيط الفقرات أو النصوص او الكائنات بشكل عام في الصفحة نستطيع استخدام الامر <CENTER> ... </CENTER> <CENTER> This is a centered text </CENTER> This is a centered text الخاصية DIR:- و نستخدمها أيضاً مع <P> لتحديد إتجاه قراءة النص وتأخذ القيم LTR او RTL LTRإتجاه النص من اليسار إلى اليمين(Left To Right) RTLإتجاه النص من اليمين إلى اليسار(Right To Left) تنسيق القوائم تحتوي لغة HTML على مجموعة من الاوامر الخاصة بتنظيم البيانات في قوائم وباستخدام عدة خيارات. وهناك نوعين من القوائم: 1. القوائم المتسلسلة Ordered Lists:- مثال : أسماء الدارسين بدورات الحاسب الالى 1. محمد على 2. علا سيد 3. تامر محسن 4. فاطمة مجدى 2. القوائم غير المتسلسلة Unordered Lists :- مثال : أسماء الدارسين بدورات الحاسب الالى · محمد على · علا سيد · تامر محسن · فاطمة مجدى و للتعامل مع القوائم بنوعيهما نحتاج إلى: - اوامر خاصة بتحديد بداية ونهاية القائمة - اوامر تحدد بنود هذه القائمة. النسبة للقوائم المتسلسلة نستخدم الاوامر <OL> ........ </OL> أما بالنسبة للقوائم غير المتسلسلة فنستخدم <UL> .........</UL> ولتعيين كل بند من بنود القائمة نستخدم الامر <LI> وهو امر مفرد يكتب في بداية السطر الخاص بكل بند List Item. إذن عندما قمنا بإنشاء القوائم فى الامثلة السابقة كتبنا الأوامر التالية :- <OL> <LI>محمد على <LI>علا سيد <LI>تامر محسن <LI>فاطمة مجدى </OL> <UL> <LI>محمد على <LI>علا سيد <LI>تامر محسن <LI>فاطمة مجدى </UL> الخاصية TYPE :- ووظيفتها تحديد شكل الرمز الظاهر مع بنود القائمة، وعادة تستخدم مع وسوم بداية القوائم <UL> أو <OL> وبذلك نحدد رمزاً واحداً لكل القائمة. فعند وضعها ضمن تعريف القوائم المتسلسلة تأخذ القيم: A, a, I, i التي تغير رموز الترقيم من الترقيم العادي (1) إلى ترقيم باستخدام الأحرف اللاتينية الكبيرة أو الصغيرة، أو باستخدام الأرقام الرومانية كما يلى : <OL TYPE="A"> OL TYPE="a"> <OL TYPE="I"> <OL TYPE="i"> لا تنسونا بالدعاء 
|
|
#2
03-Apr-2008, 02:46 AM
|
||||
|
||||
|
يعطيك الف عافيه
ولاعدمناك
|
|
| مواقع النشر (المفضلة) |
| أدوات الموضوع | |
| انواع عرض الموضوع | |
|
|
المواضيع المتشابهه
|
||||
| الموضوع | كاتب الموضوع | المنتدى | مشاركات | آخر مشاركة |
| برنامج Windows Live Messenger Khalid Edition برنامج رائع من برامج ماسنجر مميزات اضافية برمجة عربية | سعيد بن عبدالعزيز | سـاحة البرامج والانترنت | 5 | 29-Dec-2008 01:58 AM |
| [ Product ] هاك المعاقب - عاقب أعضائك السيئين بهذا الهاك - من برمجة العذاب | ملكه بأخلاقي | ســاحـة تطوير المواقع والمنتديات | 21 | 20-Oct-2008 09:38 PM |
| دروس في الأوركل | سلمان العلياني | ســاحـة تطوير المواقع والمنتديات | 2 | 15-May-2008 06:57 PM |
| دروس مفيدة | tiger | سـاحة العقـار والبورصة | 5 | 08-Apr-2008 07:03 PM |
| دروس وعبر | faza2007 | الســاحة العامة | 4 | 17-Apr-2007 06:19 PM |
 |
 |
 |
العرض العادي
