Test Footer 2

عنوان التميز

This is default featured post 1 title

Go to Blogger edit html and find these sentences.Now replace these sentences with your own descriptions.This theme is Bloggerized by Lasantha Bandara - Premiumbloggertemplates.com.

This is default featured post 2 title

Go to Blogger edit html and find these sentences.Now replace these sentences with your own descriptions.This theme is Bloggerized by Lasantha Bandara - Premiumbloggertemplates.com.

This is default featured post 3 title

Go to Blogger edit html and find these sentences.Now replace these sentences with your own descriptions.This theme is Bloggerized by Lasantha Bandara - Premiumbloggertemplates.com.

This is default featured post 4 title

Go to Blogger edit html and find these sentences.Now replace these sentences with your own descriptions.This theme is Bloggerized by Lasantha Bandara - Premiumbloggertemplates.com.

This is default featured post 5 title

Go to Blogger edit html and find these sentences.Now replace these sentences with your own descriptions.This theme is Bloggerized by Lasantha Bandara - Premiumbloggertemplates.com.

الأحد، 12 فبراير، 2012

الدرس الخامس:وسوم Html

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

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

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

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

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

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

جميع الوسم التي نقمها حاليا توضع بين الوسم
     <body>
و
     </body>

فى الدرس القادم المزيد من المتعة عن لغة Html 
سنشرح كل مايخص النصوص وامكانية اضافة التأثيرات المختلفى على نصوص الصفحة


الدررس الرابع : ماذا تعلمت 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 هي بالتجربة والخطأ، لكن لا تقلق، لا يمكنك بأي طريقة أن تدمر حاسوبك أو الإنترنت! لذلك استمر في التجربة، هذه هي أفضل طريقة لاكتساب الخبرة.


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

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

التالي:

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


الدرس الخامس:وسوم Html

الدرس الثالث : انشاء موقعك الأول Html

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


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

http://2.bp.blogspot.com/-jLjoQ7YhCbM/TzbXTV-bFXI/AAAAAAAACZE/iFvUGNGUwto/s1600/Notepad-%25D9%2582%25D8%25A7%25D8%25A6%25D9%2585%25D8%25A9+%25D8%25A7%25D9%2584%25D8%25A3%25D8%25AF%25D9%2588%25D8%25A7%25D8%25AA.png

أنت جاهز الآن!
ماذا أفعل؟

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

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

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

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

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

حسنا لنبدأ سويا التطبيق العملي على برنامج المفكرة
"Notepad"
نقم بكتابة رأس الصفحة
      <html>

      <head>
     </head>

     <body>

     </body>

     </html>

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

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


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

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

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


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

      <head>
      <title>موقعي الأول</title>
      </head>

      <body>
      <p>موقعي الأول.</p>
      </body>

    </html>
الوسم
<title>عنوان صفحتك</title>
هو عنوان الصفحة الظاهر أعلى المتصفح ويوضع أسفل الوسم : <head>


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

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

في برنامج المفكرة اختر "Save as..." من قائمة "File" في القائمة العلوية.
اختر "All Files" في نافذة "Save as type". هذا مهم جداً، لأنك إن لم تفعل ذلك ستقوم بحفظه كملف نصي وليس كملف HTML.
احفظ الصفحة باسم "page1.htm" الأحرف الثلاثة الأخيرة .htm تشير إلى أن الملف هو من نوع HTML، بإمكانك أن تحفظ تضع بدلاً منها ".html" وستكون النتيجة متماثلة، شخصياً أستخدم ".htm" دائماً، لكن بإمكانك أن تختار بينهما ما تشاء، فلا فرق بينهما، ولا يهم أين تحفظ الملف في القرص الصلب، ما دمت تتذكر أين حفظته لكي تستطيع إيجاده مرة أخرى.
http://ar.html.net/tutorials/html/saveas.png

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

في القائمة العلوية اختر "Open" من قائمة "File" (CTRL+O).
إضغط على "Browse" في النافذة التي ستظهر لك.
إبحث عن الملف الذي قمت بإنشاءه واضغط على "Open".
http://ar.html.net/tutorials/html/open.png

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

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

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



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

العناصر تعطي لوثائق HTML هيكلية محددة وتخبر المتصفح عن كيفية عرض الصفحة، بشكل عام العناصر عبارة عن وسم "tag" للبداية ثم بعض المحتويات ثم وسم الإغلاق.
"وسوم"؟

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

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

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

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

حسناً، العنصر em يشدد النص "يجعله مائلاً" وكل النصوص بين وسم البداية <em> ووسم الإغلاق </em> ستظهر بشكل مائل في المتصفح. ("em" هي اختصار "emphasis".)

المثال 1:
<em>نص مائل.</em>   
 سيظهر بهذا الشكل في المتصفح:
نص مائل.

العناصر h1، h2، h3، h4، h5 وh6 تستخدم للعناوين (حرف h هو اختصار "heading"), حيث h1 هو المستوى الأول من العناوين وبالتالي الأكبر حجماً، h2 يستخدم للمستوى الثاني من العناوين وهو أصغر حجماً بقليل، وh6 هو المستوى السادس والأخير من هيكلية العناوين وهو الأصغر.

مثال 2:   
    <h1>هذا عنوان</h1>
<h2>هذا عنوان فرعي</h2>
ستظهر بهذا الشكل في المتصفح:
هذا عنوان
هذا عنوان فرعي

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

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

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

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

إذا انتقلت إلى الدرس الثالث ستتمكن من إنشاء موقعك خلال عشر دقائق.

شارك

Twitter Delicious Facebook Digg Stumbleupon Favorites More