للتسجيل اضغط هـنـا
أنظمة الموقع تداول في الإعلام للإعلان لديـنا راسلنا التسجيل طلب كود تنشيط العضوية   تنشيط العضوية استعادة كلمة المرور
تداول مواقع الشركات مركز البرامج
مؤشرات السوق اسعار النفط مؤشرات العالم اعلانات الشركات الاكثر نشاط تحميل
 



العودة   منتديات تداول > تداول التقنية > تداول برامج الحاسب و الانتــــــرنت



إضافة رد
 
أدوات الموضوع
قديم 01-05-2009, 10:21 PM   #1
زيــنــه
مشرفة
 
تاريخ التسجيل: Oct 2008
المشاركات: 5,130

 

افتراضي سلسلة دروس Html ..




مقدمة - درس HTML

يظن الناس أن إنشاء المواقع عملية صعبة معقدة، هذا ليس صحيحاً! يمكن للجميع تعلم كيفية إنشاء المواقع.

وإذا أكملت قراءة هذا الدرس ستتمكن من إنشاء واحد خلال ساعة واحدة فقط.

آخرون يظنون أن إنشاء المواقع يحتاج إلى برامج غالية ومتقدمة وهذا أيضاً غير صحيح، صحيح أن

هناك الكثير من البرامج التي تدعي أنها تستطيع إنشاء مواقع لك، بعضها يفعل ذلك بشكل أفضل من

البرامج الأخرى، لكن إن أردت إنشاء المواقع بشكل صحيح فعليك أن تفعل ذلك بنفسك، لحسن الحظ

عملية تطوير المواقع بسيطة والأدوات التي تحتاجها متوفرة لديك ومجانية.

الهدف من هذا الدرس هو نعطيك مقدمة سهلة وصحيحة وشاملة إلى كيفية إنشاء المواقع، هذا الدرس

يبدأ من نقطة الصفر ولا يتطلب أي معرفة مسبقة منك عن البرمجة أو تطوير المواقع.

لا يمكن لهذا الدرس أن يعلمك كل شيء، لذلك لا بد أن تجرب بنفسك وتثابر على التعلم، لكن لا تقلق،

تعلم تطوير المواقع ممتع ويعطيك شعوراً بالرضى عندما تتعلمه بشكل صحيح.

كيف ستسخدم هذا الدرس؟ هذا أمر يعود لك، لكننا نقترح عليك أن تقرأ جزئين أو ثلاثة من هذا الدرس

في اليوم وتخصص وقتاً للتجارب مع الأشياء الجديدة التي تعلمتها في كل جزء.



حسناً، لنبدأ في التعلم!

الدرس الأول: لنبدأ

في الدرس لأول سنتحدث بشكل مختصر عن الأدوات التي تحتاجها لإنشاء موقعك.

ما الذي تحتاجه؟

في الغالب أنت تملك كل الأدوات التي تحتاجها.

لديك "متصفح"، وهو البرنامج الذي يمكنك من تصفح المواقع والتجول فيها، الآن أنت تنظر إلى هذه

الصفحة من خلال متصفحك.

ليس مهماً أي متصفح تستخدم، المتصفح الأكثر انتشاراً هو مايكروسوفت إنترنت إكسبلورر، لكن هناك

متصفحات أخرى مثل أوبيرا وموزيلا فايرفوكس وكلها قابلة للاستخدام.

ربما سمعت أو حتى استخدمت برامج مثل مايكروسوفت فرونت بيج أو ماكروميديا دريمويفر أو حتى

مايكروسوفت وورد، هذه البرامج تستطيع - أو تدعي أنها تستطيع - إنشاء المواقع لك، انسى هذه

البرامج الآن! لأنها لن تساعدك على تعلم كيفية كتابة صفحات موقعك.

بدلاً من ذلك ستحتاج إلى محرر نصي بسيط، إذا كنت تستخدم نظام ويندوز يمكنك أن تستخدم المفكرة

"Notepad" والذي يمكنك أن تجده في قائمة إبدأ "start" ثم قائمة البرامج "Program" ثم

في قائمة الأدوات "Accessories":






إذا لم تكن تستخدم ويندوز يمكنك أن تجد برامج مماثلة في أنظمة التشغيل الأخرى، فمثلاً لينكس يحوي

برنامج بيكو "Pico" ونظام ماك يحوي برنامج SimpleText.

برنامج المفكرة هو محرر نصي بسيط جداً وهو مناسب جداً لكتابة الصفحات لأنه لا يتدخل عند كتابتك

لأي شيء ويعطيك تحكماً كاملاً، المشكلة في العديد من البرامج التي تدعي أنها تقوم بإنشاء المواقع

هو أنه تحوي العديد من الخصائص القياسية التي يمكنك أن تختار من بينها، المشكلة في هذا الأسلوب

أن كل شيء يجب أن يتناسب مع هذه الخصائص، لذلك هذه البرامج لا يمكنها أن تقوم بإنشاء المواقع

تماماً كما تدري، أو أنها تغير الأوامر التي كتبتها بنفسك، مع برنامج المفكرة أو أي محرر نصي بسيط

يمكنك أن توجه الشكر لنفسك على أي نجاح أو أية أخطاء.

متصفح وبرنامج المفكرة أو أي محرر نصي بسيط، هذا كل ما تحتاجه لكي تكمل الدرس وتقوم بإنشاء

موقعك



هل أحتاج بأن أكون على اتصال بالشبكة؟

لا تحتاج إلى اتصال بالشبكة سواء عند قراءتك لهذا الدرس أو عند إنشاء موقعك.

إذا أردت أن تتجنب الاتصال بالشبكة عند قرائتك للدرس قم بطباعته أو ببساطة قم بقطع الاتصال واقرأ

الدرس من الشاشة، يمكنك أن تقوم بإنشاء موقعك على حاسوبك ثم ترفعه إلى الشبكة عندما تنتهي

منه



ماذا بعد ذلك؟
زيــنــه غير متواجد حالياً   رد مع اقتباس
قديم 01-05-2009, 10:27 PM   #2
زيــنــه
مشرفة
 
تاريخ التسجيل: Oct 2008
المشاركات: 5,130

 
افتراضي الدرس الثاني: ما هي Html؟

الدرس الثاني: ما هي HTML؟

هذا الدرس سيعطيك مقدمة قصيرة عن صديقك الجديد، HTML.

ما هي HTML

HTML هي اللغة الأم لمتصفحك.

لكي نختصر القصة، HTML اخترعت في عام 1990م من قبل عالم يسمى تيم بيرنرز لي، الهدف من

هذه اللغة هو تبسيط عملية وصول العلماء في جامعات مختلفة إلى البحوث التي ينشرونها، المشروع

نجح بشكل لم يتصوره تيم بيرنرز لي، باختراعه HTML قام تيم بوضع أساس شبكة الويب كما نعرفها

اليوم.

HTML هي لغة تسمح بعرض المعلومات (مثال: البحوث العلمية) على شبكة إنترنت، ما تراه عند

زيارتك لأي صفحة في الشبكة هو ترجمة المتصفح لأوامر HTML، لكي ترى HTML لأي صفحة

تزورها عليك أن تضغط على قائمة عرض "View" ثم المصدر "Source".




لمن لم يعتد على رؤية هذه الأوامر، HTML تبدو معقدة لكن هذا الدرس سيساعدك على أن تفهمها.

ما فائدة HTML؟

إذا أردت إنشاء موقع فلا توجد طريقة أخرى غير استخدام لغة HTML، حتى لو استخدمت برنامجاً

لإنشاء المواقع مثل دريمويفر، معرفتك للغة HTML ولو بشكل بسيط ستساعدك على إنشاء مواقع

أفضل، الجميل أن هذه اللغة سهلة التعلم، في درسين فقط ستتعلم كيفية إنشاء موقعك الأول.


HTML تستخدم لإنشاء المواقع، هذا كل شيء ببساطة!


حسناً، ماذا تعني H-T-M-L؟

HTML هي اختصار "HyperText Mark-up Language"، أنت لا تحتاج في هذه المرحلة

لمعرفة ماذا تعني هذه المصطلحات، مع ذلك لنشرحها بتفصيل أكبر.

Hyper هي عكس "خطي" وهي تعني في هذه الحالة أن تنتقل من أي نقطة إلى أي نقطة بدون أن

تسير في خط سير محدد، في الماضي - عندما كانت الفأرة شيء يلحقه القط - كانت الحواسيب تعمل

بشكل خطي، تقوم بتنفيذ أمر ما ثم تذهب لما بعده، لكن HTML مختلفة، يمكنك أن تذهب إلى أي مكان

في أي وقت، ليس بالضرورة مثلاً أن تزور موقع MSN.com قبل أن تزور HTML.net.

Text تعني النص، وهذه تشرح نفسها.


Mark-up هو ما تفعله بالنص، فهذه الكلمة تعني توصيف النص، فأنت تقوم بتوصيف النص تماماً

كما تفعل مع معالجات الكلمات فتضيف العناوين والنقاط والنص السميك وغيرها.


Language تعني اللغة، فتقنية HTML هي لغة توصيف وهي أيضاً تستخدم العديد من كلمات اللغة الإنجليزية.

في هذا الدرس ستتعلم أيضاً XHTML والتي تعني "Extensible HyperText Mark-up Language" وهي باختصار طريقة أحدث وأكثر تنظيماً لكتابة HTML.

الآن أنت تعرف ماذا تعني HTML وXHTML، لنبدأ مع ما يهمنا هنا: إنشاء المواقع.
زيــنــه غير متواجد حالياً   رد مع اقتباس
قديم 01-05-2009, 10:35 PM   #3
زيــنــه
مشرفة
 
تاريخ التسجيل: Oct 2008
المشاركات: 5,130

 
افتراضي الدرس الثالث: العناصر والوسوم

الدرس الثالث: العناصر والوسوم

الآن أنت جاهز لتعلم جوهر لغة HTML وهي العناصر.

العناصر تعطي لوثائق HTML هيكلية محددة وتخبر المتصفح عن كيفية عرض الصفحة، بشكل عام

العناصر عبارة عن وسم "tag" للبداية ثم بعض المحتويات ثم وسم الإغلاق.


"وسوم"؟

الوسوم هي توصيفات تستخدمها لكي تضعها في بداية العنصر وعند نهايته.

كل الوسوم لها نفس نفس الشكل، تبدأ مع علامة أصغر من "<" وتنتهي مع علامة أكبر من ">".

بشكل عام هناك نوعان من الوسوم، وسم البداية: <html> ثم وسم الإغلاق </html>. الفرق بين

الإثنين هي علامة "/"، توصيف المحتويات يكون بوضعها بين وسم البداية ووسم الإغلاق.

لغة HTML تتكون من هذه العناصر، لكي تتعلم HTML عليك أن تتعلم وتستخدم وسوماً مختلفة.


هل يمكنك أن تريني بعض الأمثلة؟

حسناً، العنصر em يشدد النص "يجعله مائلاً" وكل النصوص بين وسم البداية <em> ووسم

الإغلاق </em> ستظهر بشكل مائل في المتصفح. ("em" هي اختصار "emphasis".)


المثال 1:





سيظهر بهذا الشكل في المتصفح:



العناصر h1، h2، h3، h4، h5 وh6 تستخدم للعناوين (حرف h هو اختصار "heading"),

حيث h1 هو المستوى الأول من العناوين وبالتالي الأكبر حجماً، h2 يستخدم للمستوى الثاني من

العناوين وهو أصغر حجماً بقليل، وh6 هو المستوى السادس والأخير من هيكلية العناوين وهو الأصغر.


مثال 2:







ستظهر بهذا الشكل في المتصفح:




هل أنا بحاجة دائماً إلى استخدام وسم بداية ووسم إغلاق؟

كما يقولون، هناك استثناء من كل قاعدة، والاستثناء في HTML هو وجود عناصر تعتبر هي وسم

البداية ووسم الإغلاق في نفس الوقت، وهي تسمى العناصر الفارغة لأنها غير مرتبطة بنص معين

لكنها عناصر مستقلة تماماً، فمثلاً هناك وسم لكي لكسر النص وإجباره على الظهور في سطر جديد،

هذا الوسم يظهر بهذا الشكل: <br />.


هل تكتب الوسوم بأحرف كبيرة أم صغيرة؟

معظم المتصفحات لن تهتم إذا كتبت الوسوم بأحرف كبيرة أو صغيرة أو خليط بين الإثنين، <HTML>،

<html> أو <HtMl> كلها ستعطي نفس النتائج، مع ذلك الأسلوب الصحيح هو كتابة الوسوم

بالأحرف الصغيرة، لذلك عليك أن تعتاد على كتابة الوسوم بالأحرف الصغيرة.


أين أضع كل هذه الوسوم؟

أكتب الوسوم في وثيقة HTML، المواقع تحوي وثيقة HTML أو أكثر، عندما تتصفح شبكة الويب

أنت فقط تقوم بفتح وثائق HTML مختلفة.


إذا انتقلت إلى الدرس اللاحق ستتمكن من إنشاء موقعك خلال عشر دقائق
زيــنــه غير متواجد حالياً   رد مع اقتباس
قديم 01-05-2009, 10:53 PM   #4
زيــنــه
مشرفة
 
تاريخ التسجيل: Oct 2008
المشاركات: 5,130

 
افتراضي الدرس الرابع: إنشاء موقعك الأول

الدرس الرابع: إنشاء موقعك الأول

مع كل ما تعلمته في الدروس السابقة أصبحت الآن على بعد دقائق من إنشاء أول موقع لك.

كيف؟

في الدرس الأول ألقينا نظرة على الأدوات التي نحتاجها لإنشاء موقع: متصفح وبرنامج المفكرة أو أي

محرر نصي مماثل، وبما أنك تقرأ هذه الصفحة فأنت تستخدم الآن متصفحاً، ما تحتاجه الآن هو أن

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

أيضاً عليك أن تفتح برنامج المفكرة "Notepad" والذي ستجده في قائمة إبدأ ثم برامج ثم أدوات
:





أنت جاهز الآن!

ماذا أفعل؟

لنبدأ بشيء بسيط، سنقوم بإنشاء صفحة تقول "مرحى! هذا هو موقعي الأول." أكمل القراءة وستعرف

كم هو بسيط فعل ذلك.

لغة HTML بسيطة ومنطقية، المتصفح يقرأ HTML كما تقرأ أنت اللغة الإنجليزية: من الأعلى إلى

الأسفل ومن اليسار إلى اليمين، لذلك صفحة HTML بسيطة تبدأ بما يجب أن تبدأ به أي صفحة HTML وتنتهي بما يجب أن يأتي في نهاية الصفحة.


أول شيء عليك فعله هو أن تخبر المتصفح بأنك "ستتحدث" معه بلغة HTML، يمكنك فعل ذلك عن

طريق وسم <html> لا توجد أي مفاجئة هنا، لذلك قبل أن تبدأ أي شيء أكتب "<html>" في أول سطر في برنامج المفكرة.

كما تتذكر من الدروس الماضية، <html> هو وسم البداية ويحتاج إلى وسم إغلاق لذلك لا تنسى

كتابة وسم الإغلاق بعد سطرين فارغين، وبقية الوثيقة ستكتبها بين <html> و</html>.

الشيء التالي الذي تحتاجه صفحتك هو أمر رأس الصفحة "head" والذي يقدم معلومات حول

الصفحة للمتصفح، وكذلك تحتاج إلى أمر "body" والذي سيحوي المحتويات التي تريد ان تضعها في

الصفحة، أمر head أو رأس الصفحة (<head> و</head>) يوضع فوق أمر body أو "متن الصفحة" (<body> و</body>).


صفحتك يجب أن تكون بهذا الشكل:


كود بلغة HTML:
<html>
<head>
</head>
<body>
</body>
</html>




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

قبل بعضها، كقاعدة، لا يهم كيف تقوم بتنسيق الأوامر في صفحة HTML، لكن لكي تجعل الصفحة

سهلة القراءة لك وللآخرين ينصح بأن تنسق الصفحة بطريقة هيكلية منطقية سهلة الفهم كما ترى في

المثال أعلاه.

إذا كانت صفحتك تشبه المثال أعلاه فقد قمت بإنشاء موقعك الأول، عملياً الموقع ممل ولا يحوي شيئاً

وغالباً لن يكون الموقع الذي تحلم به عندما بدأت في قراءة هذا الدرس، مع ذلك هو موقع وما قمت

بإنجازه الآن سيكون قالباً لبقية صفحات HTML التي ستكتبها في المستقبل.

جميل, لكن كيف أضيف المحتويات للموقع؟

كما تعلمت سابقاً، صفحة HTML تحوي جزئياً، رأس الصفحة ومتن الصفحة، في رأس الصفحة تكتب

معلومات عن الصفحة نفسها، أما المتن فيضم المحتويات التي تشكل الصفحة..

مثلاً، إذا أردت أن تضع عنواناً للصفحة يظهر في الشريط العلوي للمتصفح فيجب أن تفعل ذلك في رأس

الصفحة، العنصر المستخدم لفعل ذلك هو title. اكتب عنواناً للصفحة بين وسم البداية <title> ووسم الإغلاق </title>:



كود بلغة HTML:
<title>موقعي الأول</title>



لاحظ أن العنوان لن يظهر في الصفحة نفسها، أي شيء تريده أن يظهر

في الصفحة يجب أن يضاف بين وسمي متن الصفحة

كما قلنا سابقاً، نريد للصفحة أن تقول "مرحى! هذا هو موقعي الأول"، هذا النص الذي نريد وضعه في

الصفحة،


لذلك علينا أن نكتب في متن الصفحة ما يلي::

كود بلغة HTML:
<p>مرحى! هذا هو موقعي الأول.</p>الحرف p في <p>



هو اختصار "paragraph" أو فقرة، وهو أمر بسيط لإنشاء فقرات نصية.
صفحة HTML يجب أن تكون لديك بالشكل التالي:

كود بلغة HTML:
<html>
<head>
<title>موقعي الأول</title>
</head>
<body>
<p>مرحى! هذا هو موقعي الأول.</p>
</body>
</html>


انتهينا! لديك الآن أول موقع حقيقي!

كل ما عليك فعله الآن هو حفظ الصفحة على القرص الصلب ثم عليك أن تستعرضها في متصفحك:

في برنامج المفكرة اختر "Save as..." من قائمة "File" في القائمة العلوية.

اختر "All Files" في نافذة "Save as type". هذا مهم جداً، لأنك إن لم تفعل ذلك ستقوم بحفظه كملف نصي وليس كملف HTML.

احفظ الصفحة باسم "page1.htm" الأحرف الثلاثة الأخيرة .htm تشير إلى أن الملف هو من نوع HTML، بإمكانك أن تحفظ تضع بدلاً منها ".html" وستكون النتيجة متماثلة، شخصياً أستخدم ".htm" دائماً، لكن بإمكانك أن تختار بينهما ما تشاء، فلا فرق بينهما، ولا يهم أين تحفظ الملف في القرص الصلب، ما دمت تتذكر أين حفظته لكي تستطيع إيجاده مرة أخرى.




الآن إذهب إلى متصفحك:

في القائمة العلوية اختر "Open" من قائمة "File".

إضغط على "Browse" في النافذة التي ستظهر لك.

إبحث عن الملف الذي قمت بإنشاءه واضغط على "Open".




الآن يجب أن تحوي الصفحة جملة "مرحى! هذا هو موقعي الأول." تهانينا!

إذا أردت أن يعرف العالم كله عن هذه الصفحة بإمكانك أن تقفز للدرس الثالث عشر وتتعلم كيفية وضع

هذه الصفحة على شبكة إنترنت، خلافاً لذلك اصبر وأكمل قراءة الدروس
زيــنــه غير متواجد حالياً   رد مع اقتباس
قديم 01-05-2009, 10:59 PM   #5
زيــنــه
مشرفة
 
تاريخ التسجيل: Oct 2008
المشاركات: 5,130

 
افتراضي الدرس الخامس: ماذا تعلمنا حتى الآن؟

الدرس الخامس: ماذا تعلمنا حتى الآن؟

إبدأ دائماً بالقالب الذي قمنا بإنشاءه في الدرس السابق:


كود بلغة HTML:
<html>
<head>
<title></title>
</head>

<body>
</body>

</html>


في قسم رأس الصفحة اكتب دائماً العنوان: <title>عنوان صفحتك</title>.

لاحظ كيف سيظهر العنوان في أعلى يسار نافذة المتصفح:



العنوان بشكل خاص مهم لأنه يستخدم في محركات البحث - مثل غوغل - لأرشفة موقعك وإظهاره في نتائج البحث.




في جسم الصفحة اكتب محتويات صفحتك، وأنت تعرف الآن بعض أهم العناصر:

كود بلغة HTML:
<p>Is used for paragraphs.</p>
<em>Emphasis text.</b>
<h1>Heading</h1>
<h2>Subhead</h2>
<h3>Sub-subhead</h3>


تذكر أن الطريقة الوحيد لتعلم HTML هي بالتجربة والخطأ، لكن لا تقلق، لا يمكنك بأي طريقة أن

تدمر حاسوبك أو الإنترنت! لذلك استمر في التجربة، هذه هي أفضل طريقة لاكتساب الخبرة.


ماذا يعني هذا؟

لا أحد يتقن تطوير المواقع بتعلم الأمثلة فقط في هذا الدرس، فهذا الدرس هو مجرد بداية بسيطة لفهم

مكونات المواقع، ولكي تقوم بإنشاء موقع جيد عليك أن تستخدم المكونات بأسلوب جديد وإبداعي.

لذلك قم بتجربة ما تعلمته حتى الآن.


ما التالي؟

جرب إنشاء صفحات أخرى بنفسك، قم بإنشاء صفحة تحوي عنواناً للصفحة وعناوين فرعية مع بعض

النصوص، جرب أن تفعل ذلك بدون الرجوع إلى هذ االدرس.
زيــنــه غير متواجد حالياً   رد مع اقتباس
قديم 01-05-2009, 11:18 PM   #6
زيــنــه
مشرفة
 
تاريخ التسجيل: Oct 2008
المشاركات: 5,130

 
افتراضي الدرس السادس: المزيد من العناصر

الدرس السادس: المزيد من العناصر

هل قمت بإنشا المزيد من الصفحات بنفسك؟ إن لم تفعل فإليك هذا المثال:


كود بلغة HTML:
<html>

<head>
<title>My website</title>
</head>

<body>
<h1>A Heading</h1>
<p>text, text text, text</p>
<h2>Subhead</h2>
<p>text, text text, text</p>
</body>

</html>



ما التالي؟

حان الوقت الآن لتعلم سبعة عناصر جديدة.
بنفس الطريقة التي تؤكد فيها على نص معين عندما تضعه بين وسم البداية <em> ووسم الإغلاق </em>, يمكنك أن تضيف تأكيداً أقوى باستخدام وسم البداية <strong> ووسم الإغلاق </strong>.

مثال 1:


كود بلغة HTML:

<strong>This should be stronger emphasis.</strong>






سيظهر بهذا الشكل في المتصفح:






بطريقة مماثلة يمكنك تصغير النص باستخدام العنصر small:


مثال 2:


كود بلغة HTML:

<small>This should be in small.</small>



سيظهر بهذا الشكل في متصفحك





هل أستطيع استخدام عدة عناصر في نفس الوقت؟


بإمكانك استخدام عدة عناصرة بسهولة في نفس الوقت، لكن تجنب تداخل العناصر. يمكن توضيح ذلك بهذا المثال:

مثال 3:

إذا أردت التأكيد على نص صغير الحجم يجب أن تفعل ذلك بهذه الطريقة:

كود بلغة HTML:

<em><small>Emphasised small text</small></em>


وليس بهذه الطريقة:



كود بلغة HTML:

<em><small>Emphasise small text</em></small>



وجه الاختلاف في المثال الأول يكمن في أننا أغلقنا أولاً الوسم الذي قمنا بافتتاحه آخراً، بمعنى آخر

وسم البداية الأول يغلق آخراً، هكذا لا نربك أنفسنا أو المتصفح.

المزيد من العناصر!

كما ذكرنا في الدرس الثالث هناك عناصر تستخدم وسم البداية ووسم الإغلاق في نفس الوقت. هذه

يسمونها العناصر الفارغة وهي عناصر غير مرتبطة بالنص بأي طريقة، بل هي معزولة، كمثال لمثل

هذه العناصر هناك الوسم <br /> الذي يجبر النص على الظهور في سطر جديد:


مثال 4:




كود بلغة HTML:

Some text<br /> and some more text in a new line




سيظهر بهذا الشكل في متصفحك




لاحظ أن الوسم كتب بطريقة يختصر فيها وسم البداية ووسم الإغلاق بوضع مسافة وشرطة أمامية في

نهايته: <br />.

عنصر آخر مشابه يحوي وسم البداية والإغلاق في نفس الوقت هو <hr /> الذي يستخدم في رسم خط

أفقي، حرفي "hr" يعنيان "horizontal rule":


مثال 5:

كود بلغة HTML:
<hr />


سيظهر بهذا الشكل في متصفحك





هناك عناصر أخرى تحتاج إلى وسمي البداية والإغلاق - كما هو حال معظم العناصر - مثل ul وol وli. هذه العناصر تستخدم عندما تريد إنشاء القوائم.
ul هي اختصار "unordered list" وهو عنصر يقوم بوضع نقاط لكل بند في القائمة، أما ol فهي اختصار "ordered list" أو قائمة مرتبة فهو يضع رقماً لكل بند في القائمة، ولكي نضع البنود في القائمة علينا أن نستخدم الوسم li أو "list item"، هل أصبحت بالحيرة، شاهد هذا المثال:


مثال 7:



كود بلغة HTML:
<ul>
<li>A list item</li>
<li>Another list item</li>
</ul>


سيظهر بهذا الشكل في متصفحك





مثال 8:



كود بلغة HTML:
<ol>
<li>First list item</li>
<li>Second list item</li>
</ol>



سيظهر بهذا الشكل في متصفحك




هل هذا كل شيء؟

نعم هذا كل شيء، ومرة أخرى، قم بعمل تجارب بنفسك وجرب العناصر السبعة التي تعلمتها في هذا الدرس:




كود بلغة HTML:
<strong>Stronger emphasis</strong>
<small>Small text</small>
<br /> Line shift
<hr /> Horizontal line
<ul>List<ul>
<ol>Ordered list<ol>
<li>List item</li>
زيــنــه غير متواجد حالياً   رد مع اقتباس
قديم 01-05-2009, 11:25 PM   #7
زيــنــه
مشرفة
 
تاريخ التسجيل: Oct 2008
المشاركات: 5,130

 
افتراضي الدرس السابع: الخصائص

الدرس السابع: الخصائص

هناك خصائص يمكنك أن تستخدمها لمعظم العناصر

ما هي الخاصية؟
أنت تتذكر أن العناصر تعطي هيكلية لصفحة HTML وتخبر المتصفح كيف تريد لموقعك أن يظهر، كمثال <br /> تخبر المتصفح أن يقوم بنقل ما بعدها من نص إلى سطر جديد، في بعض العناصر يمكنك أن تضيف المزيد من المعلومات، هذه المعلومات تسمى خصائص.

مثال 1:



كود بلغة HTML:
<h2 style="background-color:#ff0000;">My friendship with HTML</h2>


الخصائص تكتب دائماً بنفس الطريقة، فهي تبدأ باسم الخاصية ثم يتبعها علامة يساوي "=" ثم قيمة الخاصية، الفاصلة المنقوطة في المثال تستخدم فقط في خاصية "style" ووظيفتها الفصل بين أوامر مختلفة، سنتحدث عن ذلك في وقت لاحق.
هناك خصائص كثيرة ومختلفة، سنتعلم أولاً واحدة منها وهي style، والتي يمكن استخدامها لإضافة تصميم لموقعك. فمثلاً يمكن إضافة لون خلفي للصفحة:


مثال 2:



كود بلغة HTML:
<html>

<head>
</head>

<body style="background-color:#ff0000;">
</body>

</html>




هذه الخاصية ستجعل لون الصفحة أحمرا، انظر بنفسك، سنشرح أكثر عن الألوان في وقت لاحق.
لاحظ أن كتابة الوسوم والخصائص يجب أن تكون بالتهجأة الأمريكية، (مثال: color بدلاً من colour)، من المهم أن تكون منتبهاً عند كتابتك للأوامر وتستخدم نفس التهجأة التي تراها في الأمثلة وإلا فلن يعرض المتصفح صفحاتك بطريقة صحيحة.


كيف أصبحت الصفحة حمراء؟

في المثال أعلاه وضعنا قيمة "#ff0000" للون خلفية الصفحة، هذا الرقم يشير إلى اللون الأحمر، وهو يعتمد نظام عد سداسي عشر، ويسمى بالإنجليزية HEX، كل لون له رقم خاص وهذه بعض الأمثلة:




كود:
أبيض: #ffffff
أسود: #000000
أحمر: #ff0000
أزرق: #0000ff
أخضر: #00ff00
أصفر: #ffff00


نظام أرقام الألوان يأتي بشكل واحد، فهو يبدأ بعلامة # ثم ستة أرقام أو أحرف، هناك أكثر من ألف رقم للألوان وليس من السهل تذكر إلى أي لون يشير أي رقم




بإمكانك أيضاً استخدام أسماء الألوان باللغة الإنجليزية للألوان المعروفة مثل الأبيض والأسود والأحمر والأزرق والأصفر.

مثال 3:


كود بلغة HTML:
<body style="background-color: red;">


نكتفي بهذا القدر حول الألوان لنعد إلى الخصائص.
أي العناصر تستطيع استخدام الخصائص؟

مجموعة مختلفة من الخصائص يمكن استخدامها لمعظم العناصر.

الخصائص تستخدم غالباً في الوسوم مثل body لكن ليس في وسوم أخرى مثل br، لأن وضع النص

في سطر جديد لا يتطلب خصائص إضافية.

وكما هناك الكثير من العناصر فهناك أيضاً الكثير من الخصائص، بعض الخصائص صممت لتستخدم

لعنصر محدد وبعضها الآخر يمكن استخدامها لعناصر مختلفة، وبعض العناصر يمكنه أن يحوي

خصائص كثيرة بينما بعضها الآخر لا يمكنه سوى أن يحوي خاصية واحدة.

قد يبدو الأمر مثيراً للحيرة الآن، لكن ما أن تعتاد على التعامل مع الخصائص المختلفة لتجد أنها منطقية

وسترى كم هي سهلة عند استخدامها.

هذا الدرس سيعرض عليك أهم الخصائص
.

ما هي مكونات العناصر؟

بشكل عام العناصر تتكون من وسم بداية تحوي خاصية أو أكثر أو قد لا

تحوي أي خاصية، ثم هناك بعض المحتويات ثم وسم الإغلاق، هذه ببساطة هي مكونات العناصر، انظر

إلى الشكل التوضيحي.


زيــنــه غير متواجد حالياً   رد مع اقتباس
قديم 01-05-2009, 11:37 PM   #8
زيــنــه
مشرفة
 
تاريخ التسجيل: Oct 2008
المشاركات: 5,130

 
افتراضي الدرس الثامن: الروابط

الدرس الثامن: الروابط

في هذا الدرس ستتعلم كيف تقوم بإنشاء رابط بين صفحتين.

ما الذي أحتاجه لإنشاء رابط؟
لإنشاء رابط ستستخدم ما تستخدمه دائماً عندم كتابة HTML: عنصر، عنصر بسيط مع خاصية واحدة وستتمكن من إنشاء رابط لأي شيء وكل شيء، إليك هذا المثال لرابط لموقع HTML.net وكيف سيكون شكله:

مثال 1:



كود بلغة HTML:
<a href="http://www.html.net/">Here is a link to HTML.net</a>


سيظهر في المتصفح بهذا الشكل:
http://www.html.net/

العنصر a هو اختصار "anchor" والخاصية href هي اختصار "hypertext reference"، وهي التي تحدد إلى أين سيذهب الرابط، غالباً عنوان في الإنترنت أو اسم ملف ما.
في المثال أعلاه الخاصية href تحوي القيمة "http://www.html.net"، وهي العنوان الكامل لموقع HTML.net ويسمى العنوان URL وهي اختصار "Uniform Resource Locator"، لاحظ أن "http://" يجب أن تضاف في أي عنوان، أما الجملة "Here is a link to HTML.net" فهي النص الذي سيظهر في المتصفح على شكل رابط، تذكر أن تقوم بإغلاق العنصر بوسم الإعلاق </a>.


ماذا عن الروابط بين الصفحات في موقعي؟

إذا أردت إنشاء رابط بين صفحتين في نفس الموقع فلا تحتاج إلى أن تضع كامل العنوان للصفحة، فمثلاً إذا قمت بإنشاء صفحتين ولنسمهما page1.htm وpage2.htm وقمت بحفظهما في نفس المجلد فيمكنك أن تربط من صفحة إلى أخرى بكتابة اسم الملف في الرابط، فمثلاً رابط من صفحة page1.htm يشير إلى page2.htm سيظهر بهذا الشكل:

مثال 2:



كود بلغة HTML:
<a href="page2.htm">Click here to go to page 2</a>



إذا كانت الصفحة 2 وضعت في مجلد فرعي ولنسمه "subfolder" فالرابط سيظهر بهذا الشكل:

مثال 3:




كود بلغة HTML:
<a href="subfolder/page2.htm">Click here to go to page 2</a>


لو أردنا أن نضع رابطاً معاكساً من الصفحة 2 في المجلد الفرعي إلى الصفحة 1 سيكون شكل الرابط هكذا:

مثال 4:



كود بلغة HTML:
<a href="../page1.htm">A link to page 1</a>


"../../".
هل فهمت هذا النظام؟ بإمكانك دائماً أن تكتب العنوان الكامل للملف إذا وجدت هذا النظام معقداً.


ماذا عن الروابط الداخلية في نفس الصفحة؟

بإمكانك إنشاء روابط داخلية ضمن الصفحة، فمثلاً يمكنك إنشاء جدول بالمحتويات اعلى الصفحة ويحوي روابط تشير إلى كل فصل في الصفحة، كل ما تحتاجه هي خاصية تسمى id أو "identification" والعلامة "#".
استخدم خاصية id لتضع إشارة للعنصر الذي تريد وضع رابط له،


مثال:



كود بلغة HTML:
<h1 id="heading1">heading 1</h1>


بإمكانك الآن إنشاء رابط لهذا العنصر باستخدام علامة "#" في خاصية الرابط، العلامة "#" يجب أن تتبع بقيمة id للعنصر الذي تريد الربط له،

مثال:



كود بلغة HTML:
<a href="#heading1">Link to heading 1</a>


كل هذا سيتضح مع هذا المثال:

مثال 5:




كود بلغة HTML:
<html>

<head>
</head>

<body>

<p><a href="#heading1">Link to heading 1</a></p>
<p><a href="#heading2">Link to heading 2</a></p>

<h1 id="heading1">heading 1</h1>
<p>Text text text text</p>

<h1 id="heading2">heading 2</h1>
<p>Text text text text</p>

</body>

</html>


سيظهر بهذا الشكل في المتصفح (جرب أن تضغط على الرابطين):




ملاحظة: قيمة الخاصية id يجب أن تبدأ بحرف وليس برقم.

هل يمكن أن أضع رابطاً لأي شيء آخر؟
بإمكانك أيضاً أن تضع روابط لعناوين بريد إلكتروني، يمكنك فعل ذلك بطريقة مشابهة لطريقة وضع رابط لصفحة أخرى:

مثال 6:



كود بلغة HTML:
<a href="mailto:nobody@html.net">Send an e-mail to nobody at HTML.net</a>


سيظهر بهذا الشكل في متصفحك


لإنشاء رابط استخدام دائماً الخاصية href بالإضافة إلى ذلك بإمكانك أن تضع خاصية title للرابط:

مثال 7:




كود بلغة HTML:
<a href="http://www.html.net/" title="Visit HTML.net and learn HTML">HTML.net</a>



سيظهر بهذا الشكل في المتصفح:





خاصية title تستخدم لوضع شرح قصير عن الرابط، إذا وضعت مؤشر الفأرة على الرابط دون أن تضغط عليه سترى النص الذي كتبته في خاصية title يظهر لك.
زيــنــه غير متواجد حالياً   رد مع اقتباس
قديم 02-05-2009, 09:08 PM   #9
ehtmam
ابو تركي
 
تاريخ التسجيل: Jan 2005
المشاركات: 11,098

 
افتراضي

السلام عليكم
رائع اختي زينة
الى الامام ربي يحفظك
ehtmam غير متواجد حالياً   رد مع اقتباس
قديم 02-05-2009, 11:10 PM   #10
زيــنــه
مشرفة
 
تاريخ التسجيل: Oct 2008
المشاركات: 5,130

 
افتراضي

اقتباس:
المشاركة الأصلية كتبت بواسطة ehtmam
السلام عليكم
رائع اختي زينة
الى الامام ربي يحفظك

وعليكم السلام ورحمة الله وبركاته

أخي ehtmam

شكرا لك ..وفقك الله ..
زيــنــه غير متواجد حالياً   رد مع اقتباس
إضافة رد

مواقع النشر (المفضلة)

أدوات الموضوع

تعليمات المشاركة
لا تستطيع إضافة مواضيع جديدة
لا تستطيع الرد على المواضيع
لا تستطيع إرفاق ملفات
لا تستطيع تعديل مشاركاتك

BB code is متاحة
كود [IMG] متاحة
كود HTML معطلة

الانتقال السريع


الساعة الآن 03:46 PM. حسب توقيت مدينه الرياض

Powered by vBulletin® Version 3.8.3
Copyright ©2000 - 2024, Jelsoft Enterprises Ltd.