الجزء الثاني من دورة php من الصفر حتي الإحتراف html

MrLs · 05-15-2009, 05:08 مساءً

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

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

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

الثاني, الجزء, الجزء الثاني من دورة php من الصفر حتي الإحتراف html, السفر, الإحتراف, html, يبي, دورة, php

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

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

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

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

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

الشيء التالي الذي تحتاجه صفحتك هو أمر رأس الصفحة "head" والذي يقدم معلومات حول الصفحة للمتصفح، وكذلك تحتاج إلى أمر "body" والذي سيحوي المحتويات التي تريد ان تضعها في الصفحة، أمر head أو رأس الصفحة (<head> و</head>) يوضع فوق أمر body أو "متن الصفحة" (<body> و</body>).

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

كود:

<html>

  <head>
  </head>

  <body>
  </body>

</html>

لاحظ كيف نسقنا الصفحة بطريقة منطقية حيث وضعنا كل وسم في سطر جديد ووضعنا مسافات فارغة قبل بعضها، كقاعدة، لا يهم كيف تقوم بتنسيق الأوامر في صفحة HTML، لكن لكي تجعل الصفحة سهلة القراءة لك وللآخرين ينصح بأن تنسق الصفحة بطريقة هيكلية منطقية سهلة الفهم كما ترى في المثال أعلاه.

إذا كانت صفحتك تشبه المثال أعلاه فقد قمت بإنشاء موقعك الأول، عملياً الموقع ممل ولا يحوي شيئاً وغالباً لن يكون الموقع الذي تحلم به عندما بدأت في قراءة هذا الدرس، مع ذلك هو موقع وما قمت بإنجازه الآن سيكون قالباً لبقية صفحات HTML التي ستكتبها في المستقبل.

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

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

كود:

<title>موقعي الأول مع إبن الخليج</title>

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

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

كود:

<p>مرحى! هذا هو موقعي الأول مع إبن الخليج.</p>

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

صفحة 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".

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

تحياتي

MrLs · 05-15-2009, 05:11 مساءً

الدرس الخامس: ماذا تعلمنا حتى الآن؟
إبدأ دائماً بالقالب الذي قمنا بإنشاءه في الدرس السابق:

كود:

<html>
  <head>
  <title></title>
  </head>

  <body>
  </body>

</html>

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

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

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

كود:

<p>Is used for paragraphs.</p>
<em>Emphasis text.</b>
<h1>Heading</h1>
<h2>Subhead</h2>
<h3>Sub-subhead</h3>

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

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

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

تحياتي

MrLs · 05-15-2009, 07:35 مساءً

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

كود:

<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>

ما التالي؟
حان الوقت الآن لتعلم سبعة عناصر جديدة.

بنفس الطريقة التي تؤكد فيها على نص معين عندما تضعه بين وسم البداية ووسم الإغلاق , يمكنك أن تضيف تأكيداً أقوى باستخدام وسم البداية ووسم الإغلاق .

مثال 1:

كود:

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

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

This should be stronger emphasis.

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

مثال 2:

كود:

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

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

This should be in small.

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

مثال 3:

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

كود:

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

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

كود:

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

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

المزيد من العناصر!
كما ذكرنا في الدرس الثالث هناك عناصر تستخدم وسم البداية ووسم الإغلاق في نفس الوقت. هذه يسمونها العناصر الفارغة وهي عناصر غير مرتبطة بالنص بأي طريقة، بل هي معزولة، كمثال لمثل هذه العناصر هناك الوسم الذي يجبر النص على الظهور في سطر جديد:

مثال 4:

كود:

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

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

Some text
and some more text in a new line

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

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

مثال 5:

كود:

<hr />

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

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

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

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

مثال 7:

كود:

<ul>
  <li>A list item</li>
  <li>Another list item</li>
</ul>

* A list item
* Another list item

مثال 8:

كود:

<ol>
  <li>First list item</li>
  <li>Second list item</li>
</ol>

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

1.First list item
Second list item .2

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

كود:

<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>

MrLs · 05-15-2009, 07:38 مساءً

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

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

مثال 1:

كود:

<h2 style="background-color:#ff0000;">My friendship with HTML</h2>

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

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

مثال 2:

كود:

<html>
  
  <head>
  </head>

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

</html>

هذه الخاصية ستجعل لون الصفحة أحمرا، انظر بنفسك، سنشرح أكثر عن الألوان في وقت لاحق.

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

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

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

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

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

مثال 3:

كود:

<body style="background-color: red;">

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

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

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

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

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

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

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

تحياتي

نسمة الروح · 05-16-2009, 06:13 مساءً

جارى التطبيق ... وجارى القراءة بجديه للمرة الثانيه

حتى لا تغيب عنى معلومه مما ذكرت

تقبل تحيه معطرة لجهدك هناا يا اخى

تحيتى لك

أبو حفص عيد · 01-07-2010, 07:25 صباحاً

حياك الله أيها الحبيب وجعل ذلك في ميزان الحسنات

الرائع جديد · 01-21-2010, 09:27 صباحاً

شكرا لكــ

الله يعيطك العافية

05-15-2009, 05:08 مساءً	#1 (permalink)
MrLs عضــو تاريخ التسجيل: Dec 2007 المشاركات: 30 معدل تقييم المستوى: 22	الجزء الثاني من دورة php من الصفر حتي الإحتراف html الدرس الرابع: إنشاء موقعك الأول مع كل ما تعلمته في الدروس السابقة أصبحت الآن على بعد دقائق من إنشاء أول موقع لك. كيف؟ في الدرس الأول ألقينا نظرة على الأدوات التي نحتاجها لإنشاء موقع: متصفح وبرنامج المفكرة أو أي محرر نصي مماثل، وبما أنك تقرأ هذه الصفحة فأنت تستخدم الآن متصفحاً، ما تحتاجه الآن هو أن تفتح نافذة جديدة من المتصفح لكي تستطيع قراءة هذا الدرس بينما تستخدم النافذة الأخرى لترى فيها موقعك. أيضاً عليك أن تفتح برنامج المفكرة "Notepad" والذي ستجده في قائمة إبدأ ثم برامج ثم أدوات: أنت جاهز الآن! ماذا أفعل؟ لنبدأ بشيء بسيط، سنقوم بإنشاء صفحة تقول "مرحى! هذا هو موقعي الأول." أكمل القراءة وستعرف كم هو بسيط فعل ذلك. لغة HTML بسيطة ومنطقية، المتصفح يقرأ HTML كما تقرأ أنت اللغة الإنجليزية: من الأعلى إلى الأسفل ومن اليسار إلى اليمين، لذلك صفحة HTML بسيطة تبدأ بما يجب أن تبدأ به أي صفحة HTML وتنتهي بما يجب أن يأتي في نهاية الصفحة. أول شيء عليك فعله هو أن تخبر المتصفح بأنك "ستتحدث" معه بلغة HTML، يمكنك فعل ذلك عن طريق وسم <html> لا توجد أي مفاجئة هنا، لذلك قبل أن تبدأ أي شيء أكتب "<html>" في أول سطر في برنامج المفكرة. كما تتذكر من الدروس الماضية، <html> هو وسم البداية ويحتاج إلى وسم إغلاق لذلك لا تنسى كتابة وسم الإغلاق بعد سطرين فارغين، وبقية الوثيقة ستكتبها بين <html> و</html>. الشيء التالي الذي تحتاجه صفحتك هو أمر رأس الصفحة "head" والذي يقدم معلومات حول الصفحة للمتصفح، وكذلك تحتاج إلى أمر "body" والذي سيحوي المحتويات التي تريد ان تضعها في الصفحة، أمر head أو رأس الصفحة (<head> و</head>) يوضع فوق أمر body أو "متن الصفحة" (<body> و</body>). صفحتك يجب أن تكون بهذا الشكل: كود: <html> <head> </head> <body> </body> </html> لاحظ كيف نسقنا الصفحة بطريقة منطقية حيث وضعنا كل وسم في سطر جديد ووضعنا مسافات فارغة قبل بعضها، كقاعدة، لا يهم كيف تقوم بتنسيق الأوامر في صفحة HTML، لكن لكي تجعل الصفحة سهلة القراءة لك وللآخرين ينصح بأن تنسق الصفحة بطريقة هيكلية منطقية سهلة الفهم كما ترى في المثال أعلاه. إذا كانت صفحتك تشبه المثال أعلاه فقد قمت بإنشاء موقعك الأول، عملياً الموقع ممل ولا يحوي شيئاً وغالباً لن يكون الموقع الذي تحلم به عندما بدأت في قراءة هذا الدرس، مع ذلك هو موقع وما قمت بإنجازه الآن سيكون قالباً لبقية صفحات HTML التي ستكتبها في المستقبل. جميل, لكن كيف أضيف المحتويات للموقع؟ كما تعلمت سابقاً، صفحة HTML تحوي جزئياً، رأس الصفحة ومتن الصفحة، في رأس الصفحة تكتب معلومات عن الصفحة نفسها، أما المتن فيضم المحتويات التي تشكل الصفحة.. مثلاً، إذا أردت أن تضع عنواناً للصفحة يظهر في الشريط العلوي للمتصفح فيجب أن تفعل ذلك في رأس الصفحة، العنصر المستخدم لفعل ذلك هو title. اكتب عنواناً للصفحة بين وسم البداية <title> ووسم الإغلاق </title>: كود: <title>موقعي الأول مع إبن الخليج</title> لاحظ أن العنوان لن يظهر في الصفحة نفسها، أي شيء تريده أن يظهر في الصفحة يجب أن يضاف بين وسمي متن الصفحة كما قلنا سابقاً، نريد للصفحة أن تقول "مرحى! هذا هو موقعي الأول"، هذا النص الذي نريد وضعه في الصفحة، لذلك علينا أن نكتب في متن الصفحة ما يلي:: كود: <p>مرحى! هذا هو موقعي الأول مع إبن الخليج.</p> الحرف p في <p> هو اختصار "paragraph" أو فقرة، وهو أمر بسيط لإنشاء فقرات نصية. صفحة 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". الآن يجب أن تحوي الصفحة جملة "مرحى! هذا هو موقعي الأول." تهانينا! تحياتي من مواضيع MrLs في المنتدى الجزء الثالث من دورة php من الصفر حتي الإحتراف html الجزء الخامس من دورة php من الصفر حتي الإحتراف CSS دورة php من الصفر حتي الإحتراف الجزء الرابع من دورة php من الصفر حتي الإحتراف html الجزء الثاني من دورة php من الصفر حتي الإحتراف html

05-15-2009, 05:11 مساءً	#2 (permalink)
MrLs عضــو تاريخ التسجيل: Dec 2007 المشاركات: 30 معدل تقييم المستوى: 22	رد: الجزء الثاني من دورة php من الصفر حتي الإحتراف html الدرس الخامس: ماذا تعلمنا حتى الآن؟ إبدأ دائماً بالقالب الذي قمنا بإنشاءه في الدرس السابق: كود: <html> <head> <title></title> </head> <body> </body> </html> في قسم رأس الصفحة اكتب دائماً العنوان: <title>عنوان صفحتك</title>. لاحظ كيف سيظهر العنوان في أعلى يسار نافذة المتصفح: العنوان بشكل خاص مهم لأنه يستخدم في محركات البحث - مثل غوغل - لأرشفة موقعك وإظهاره في نتائج البحث. في جسم الصفحة اكتب محتويات صفحتك، وأنت تعرف الآن بعض أهم العناصر: كود: <p>Is used for paragraphs.</p> <em>Emphasis text.</b> <h1>Heading</h1> <h2>Subhead</h2> <h3>Sub-subhead</h3> تذكر أن الطريقة الوحيد لتعلم HTML هي بالتجربة والخطأ، لكن لا تقلق، لا يمكنك بأي طريقة أن تدمر حاسوبك أو الإنترنت! لذلك استمر في التجربة، هذه هي أفضل طريقة لاكتساب الخبرة. ماذا يعني هذا؟ لا أحد يتقن تطوير المواقع بتعلم الأمثلة فقط في هذا الدرس، فهذا الدرس هو مجرد بداية بسيطة لفهم مكونات المواقع، ولكي تقوم بإنشاء موقع جيد عليك أن تستخدم المكونات بأسلوب جديد وإبداعي. لذلك قم بتجربة ما تعلمته حتى الآن. تحياتي من مواضيع MrLs في المنتدى الجزء الثاني من دورة php من الصفر حتي الإحتراف html الجزء الثالث من دورة php من الصفر حتي الإحتراف html دورة php من الصفر حتي الإحتراف الجزء الرابع من دورة php من الصفر حتي الإحتراف html أفضل وأقوي لغة في العالم ؟؟

05-15-2009, 07:35 مساءً	#3 (permalink)
MrLs عضــو تاريخ التسجيل: Dec 2007 المشاركات: 30 معدل تقييم المستوى: 22	رد: الجزء الثاني من دورة php من الصفر حتي الإحتراف 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: كود: <strong>This should be stronger emphasis.</strong> سيظهر بهذا الشكل في المتصفح: This should be stronger emphasis. بطريقة مماثلة يمكنك تصغير النص باستخدام العنصر small: مثال 2: كود: <small>This should be in small.</small> سيظهر بهذا الشكل في متصفحك This should be in small. هل أستطيع استخدام عدة عناصر في نفس الوقت؟ بإمكانك استخدام عدة عناصرة بسهولة في نفس الوقت، لكن تجنب تداخل العناصر. يمكن توضيح ذلك بهذا المثال: مثال 3: إذا أردت التأكيد على نص صغير الحجم يجب أن تفعل ذلك بهذه الطريقة: كود: <em><small>Emphasised small text</small></em> وليس بهذه الطريقة: كود: <em><small>Emphasise small text</em></small> وجه الاختلاف في المثال الأول يكمن في أننا أغلقنا أولاً الوسم الذي قمنا بافتتاحه آخراً، بمعنى آخر وسم البداية الأول يغلق آخراً، هكذا لا نربك أنفسنا أو المتصفح. المزيد من العناصر! كما ذكرنا في الدرس الثالث هناك عناصر تستخدم وسم البداية ووسم الإغلاق في نفس الوقت. هذه يسمونها العناصر الفارغة وهي عناصر غير مرتبطة بالنص بأي طريقة، بل هي معزولة، كمثال لمثل هذه العناصر هناك الوسم <br /> الذي يجبر النص على الظهور في سطر جديد: مثال 4: كود: Some text<br /> and some more text in a new line سيظهر بهذا الشكل في متصفحك Some text and some more text in a new line لاحظ أن الوسم كتب بطريقة يختصر فيها وسم البداية ووسم الإغلاق بوضع مسافة وشرطة أمامية في نهايته: <br />. عنصر آخر مشابه يحوي وسم البداية والإغلاق في نفس الوقت هو <hr /> الذي يستخدم في رسم خط أفقي، حرفي "hr" يعنيان "horizontal rule": مثال 5: كود: <hr /> :سيظهر بهذا الشكل في متصفحك -------------------------------------------------------------------------------- هناك عناصر أخرى تحتاج إلى وسمي البداية والإغلاق - كما هو حال معظم العناصر - مثل ul وol وli. هذه العناصر تستخدم عندما تريد إنشاء القوائم. ul هي اختصار "unordered list" وهو عنصر يقوم بوضع نقاط لكل بند في القائمة، أما ol فهي اختصار "ordered list" أو قائمة مرتبة فهو يضع رقماً لكل بند في القائمة، ولكي نضع البنود في القائمة علينا أن نستخدم الوسم li أو "list item"، هل أصبحت بالحيرة، شاهد هذا المثال: مثال 7: كود: <ul> <li>A list item</li> <li>Another list item</li> </ul> * A list item * Another list item مثال 8: كود: <ol> <li>First list item</li> <li>Second list item</li> </ol> سيظهر بهذا الشكل في متصفحك 1.First list item Second list item .2 هل هذا كل شيء؟ نعم هذا كل شيء، ومرة أخرى، قم بعمل تجارب بنفسك وجرب العناصر السبعة التي تعلمتها في هذا الدرس: كود: <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> من مواضيع MrLs في المنتدى الجزء الثالث من دورة php من الصفر حتي الإحتراف html أفضل وأقوي لغة في العالم ؟؟ الجزء الخامس من دورة php من الصفر حتي الإحتراف CSS الجزء الرابع من دورة php من الصفر حتي الإحتراف html الجزء الثاني من دورة php من الصفر حتي الإحتراف html

05-15-2009, 07:38 مساءً	#4 (permalink)
MrLs عضــو تاريخ التسجيل: Dec 2007 المشاركات: 30 معدل تقييم المستوى: 22	رد: الجزء الثاني من دورة php من الصفر حتي الإحتراف html الدرس السابع: الخصائص هناك خصائص يمكنك أن تستخدمها لمعظم العناصر ما هي الخاصية؟ أنت تتذكر أن العناصر تعطي هيكلية لصفحة HTML وتخبر المتصفح كيف تريد لموقعك أن يظهر، كمثال <br /> تخبر المتصفح أن يقوم بنقل ما بعدها من نص إلى سطر جديد، في بعض العناصر يمكنك أن تضيف المزيد من المعلومات، هذه المعلومات تسمى خصائص. مثال 1: كود: <h2 style="background-color:#ff0000;">My friendship with HTML</h2> الخصائص تكتب دائماً بنفس الطريقة، فهي تبدأ باسم الخاصية ثم يتبعها علامة يساوي "=" ثم قيمة الخاصية، الفاصلة المنقوطة في المثال تستخدم فقط في خاصية "style" ووظيفتها الفصل بين أوامر مختلفة، سنتحدث عن ذلك في وقت لاحق. هناك خصائص كثيرة ومختلفة، سنتعلم أولاً واحدة منها وهي style، والتي يمكن استخدامها لإضافة تصميم لموقعك. فمثلاً يمكن إضافة لون خلفي للصفحة: مثال 2: كود: <html> <head> </head> <body style="background-color:#ff0000;"> </body> </html> هذه الخاصية ستجعل لون الصفحة أحمرا، انظر بنفسك، سنشرح أكثر عن الألوان في وقت لاحق. لاحظ أن كتابة الوسوم والخصائص يجب أن تكون بالتهجأة الأمريكية، (مثال: color بدلاً من colour)، من المهم أن تكون منتبهاً عند كتابتك للأوامر وتستخدم نفس التهجأة التي تراها في الأمثلة وإلا فلن يعرض المتصفح صفحاتك بطريقة صحيحة. كيف أصبحت الصفحة حمراء؟ في المثال أعلاه وضعنا قيمة "#ff0000" للون خلفية الصفحة، هذا الرقم يشير إلى اللون الأحمر، وهو يعتمد نظام عد سداسي عشر، ويسمى بالإنجليزية HEX، كل لون له رقم خاص وهذه بعض الأمثلة: أبيض: #ffffff أسود: #000000 أحمر: #ff0000 أزرق: #0000ff أخضر: #00ff00 أصفر: #ffff00 نظام أرقام الألوان يأتي بشكل واحد، فهو يبدأ بعلامة # ثم ستة أرقام أو أحرف، هناك أكثر من ألف رقم للألوان وليس من السهل تذكر إلى أي لون يشير أي رقم، ولكي نبسط الأمر عليك، قمنا بعمل ملف يحوي 216 لون وهي من أكثر الألوان استعمالاً: 216 لون. بإمكانك أيضاً استخدام أسماء الألوان باللغة الإنجليزية للألوان المعروفة مثل الأبيض والأسود والأحمر والأزرق والأصفر. مثال 3: كود: <body style="background-color: red;"> نكتفي بهذا القدر حول الألوان لنعد إلى الخصائص. أي العناصر تستطيع استخدام الخصائص؟ مجموعة مختلفة من الخصائص يمكن استخدامها لمعظم العناصر. الخصائص تستخدم غالباً في الوسوم مثل body لكن ليس في وسوم أخرى مثل br، لأن وضع النص في سطر جديد لا يتطلب خصائص إضافية. وكما هناك الكثير من العناصر فهناك أيضاً الكثير من الخصائص، بعض الخصائص صممت لتستخدم لعنصر محدد وبعضها الآخر يمكن استخدامها لعناصر مختلفة، وبعض العناصر يمكنه أن يحوي خصائص كثيرة بينما بعضها الآخر لا يمكنه سوى أن يحوي خاصية واحدة. قد يبدو الأمر مثيراً للحيرة الآن، لكن ما أن تعتاد على التعامل مع الخصائص المختلفة لتجد أنها منطقية وسترى كم هي سهلة عند استخدامها. هذا الدرس سيعرض عليك أهم الخصائص. ما هي مكونات العناصر؟ بشكل عام العناصر تتكون من وسم بداية تحوي خاصية أو أكثر أو قد لا تحوي أي خاصية، ثم هناك بعض المحتويات ثم وسم الإغلاق، هذه ببساطة هي مكونات العناصر، انظر إلى الشكل التوضيحي. تحياتي من مواضيع MrLs في المنتدى الجزء الثالث من دورة php من الصفر حتي الإحتراف html أفضل وأقوي لغة في العالم ؟؟ دورة php من الصفر حتي الإحتراف الجزء الثاني من دورة php من الصفر حتي الإحتراف html الجزء الخامس من دورة php من الصفر حتي الإحتراف CSS

05-16-2009, 06:13 مساءً	#5 (permalink)
نسمة الروح عضــو تاريخ التسجيل: Jun 2008 الدولة: مصــــر المشاركات: 18 معدل تقييم المستوى: 14	رد: الجزء الثاني من دورة php من الصفر حتي الإحتراف html جارى التطبيق ... وجارى القراءة بجديه للمرة الثانيه حتى لا تغيب عنى معلومه مما ذكرت تقبل تحيه معطرة لجهدك هناا يا اخى تحيتى لك من مواضيع نسمة الروح في المنتدى تبادل أعلانى أو نصى .. لا تفوت الفرصه __________________ منتديــــات مـعــزوفــــات www.7ooo8.com/vb ..// .. لراغبى التبادل الاعلانى أو النصى . مراسلتنا على الإيميل الخاص بالمنتدى

01-07-2010, 07:25 صباحاً	#6 (permalink)
أبو حفص عيد عضو جديد تاريخ التسجيل: Oct 2009 المشاركات: 1 معدل تقييم المستوى: 10	رد: الجزء الثاني من دورة php من الصفر حتي الإحتراف html حياك الله أيها الحبيب وجعل ذلك في ميزان الحسنات من مواضيع أبو حفص عيد في المنتدى

01-21-2010, 09:27 صباحاً	#7 (permalink)
الرائع جديد اسرة ابن الخليج تاريخ التسجيل: Oct 2007 المشاركات: 817 معدل تقييم المستوى: 95	رد: الجزء الثاني من دورة php من الصفر حتي الإحتراف html شكرا لكــ الله يعيطك العافية من مواضيع الرائع جديد في المنتدى تبادل اعلاني..سكون الروح قصيده ام لابنها عندما ادخلها... حاليًا تبادل إعلاني مع منتديات سكون الروح مشكلتين..اواجهها عرض خاص جدا ..تصميم استايل لرمضان (فلاشي أو عادي) 100 ريال فقط.. المصممه سجايا __________________ ●~منتديات سكون الروح~ ● ثقافية اجتماعية ترفيهية رومنسية تهتم بكل جديد ومفيد وحصري..لجميع الفئات العمرية وتضم العديد من المواضيع المهمة.. للدخول على الرابط التالي:http://www.so5on.com/ تصميم إستايلات (- جاهزة -أو - حسب الطلب) وعروض خاصة جدًا ..وقابلة للتفاهم : المصممه سجايا ..للطلب عن طريق الرابط التالي: http://www.so5on.com/forumdisplay.php?f=90 طريقة التعاون : المصداقية .. الشفافية - سرعة الرد ..ان شاء الله للتواصل لأي استفسار:saaeed2005@hotmail.com

أدوات الموضوع
عرض نسخة صالحة للطباعة أرسل هذا الموضوع إلى صديق
طرق مشاهدة الموضوع
العرض العادي الانتقال إلى العرض المتطور الانتقال إلى العرض الشجري

المواضيع المتشابهه
الموضوع	كاتب الموضوع	المنتدى	مشاركات	آخر مشاركة
الجزء الثالث من دورة php من الصفر حتي الإحتراف html	MrLs	دروس برمجة مواقع	2	05-17-2009 04:27 صباحاً
دورة php من الصفر حتي الإحتراف	MrLs	دروس برمجة مواقع	9	05-17-2009 04:11 صباحاً
دورة شرح قطع اجزاء الكمبيوتر الجزء الثانى	ahmedbloger	دروس انظمة تشغيل و هاردوير و شبكات	5	01-08-2009 12:51 مساءً
حصريا دورة كاملة لكيفية تصميم ستايل منتدى من البداية إلى الإحتراف	nassim mohamed	قسم ستايلات vBulletin	5	12-23-2008 03:45 مساءً
دورة Xml [الدرس الرابع-الجزء الثاني]: تابع منهجية عمل مستندات Xml وتكوينها الهرمي	الهوى ماهو كلام	دروس برمجة مواقع	2	03-05-2007 09:03 مساءً

الجزء الثاني من دورة php من الصفر حتي الإحتراف html

منتديات شبكة ابن الخليج