لديك حساب بالفعل؟ دخول
دخول  سجل الأن 
مدرسة تطوير المواقع
الموقع الآن فى الفترة التجريبية وهذا الجزء غير كامل وجارى العمل عليه، للراغبين في المساعدة برجاء التقدم
[تحسين] ما هي html؟

الق نظرة على هذا المثال البسيط.

المثال
<html>
<head>
    <title> Popular Websites: Google </title>
</head>
    <body>
        <h1> About Google </h1>
        <p> Google is best known for its search engine, although
        Google now offers a number of other services. </p>
        <p> Google’s mission is to organize the world’s
        information and make it universally accessible and
        useful. </p>
        <p> Its founders Larry Page and Sergey Brin started
        Google at Stanford University. </p>
    </body>
</html>

حاول بنفسك »اضغط على "حاول بنفسك" لكى ترى كيف تعمل فى الحقيقة

اعتقد أن الأمر يبدو بالنسبة لك محيراً,لكن لا تقلق ستضتح الأمور بعد قليل. كما ترى يوجد بعض الكلمات موضوعة بين أقواس زاويّة كهذه< html > , < head > , < /title > , <body> هذه الأقواس الزاوية و الكلمات الموجوده بداخلها تسمي tags

و الآن ما هي html؟

هي لغة يتم من خلالها وصف محتويات صفحة الإنترنت للمتصفح,فمثلا عندما يكون لديك نص معين مثلا "this is bold" وتريد أن يظهر هذا النص في صفحة الإنترنت بخط سميك ,كيف تعلم المتصفح بذلك؟؟ تعلمه بأن تضع النص بين علامتين مميزتين عندما سيجدهما المتصفح سيفهم طريقة العرض التي تريد عرض النص الموجود بين العلامتين بها و هذه العلامات هي ال tags التي تم الحديث عنها بالأعلى ,فنكتبها هكذا 

<b>this is bold</b>

و عندما يجد المتصفح هذه العلامة <b> سيعلم أنك تريد عرض النص بخط سميك و عندما يجد <b/> سيعلم أن هذه نهاية النص المطلوب عرضه بهذا التنسيق .و هكذا لكل "تاج" معنى خاص يفهمه المتصفح عندما يجده.
و توضع ملفات الhtml على سيرفرات النت بحيث يمكن أن يراها أي شخص من أي مكان من خلال الإنترنت


لكي تكتب ملفات الhtml يمكن ذلك من خلال أي محرر نصوص مثل notepad و حفظ الملفات بامتداد html ثم يمكنك استعراضها من خلال أي متصفح نت.

في هذه الصفحة ستتعلم كيف:

  • البداية بكتابة اسم الصفحه .
  • إضافة العناوين و الفقرات
  • تمييز نص معين و التأكيد عليه .
  • إضافة الصور
  • إضافة وصلات لصفحات أخرى
  • إضافة ثلاثة أنواع من القوائم

[تحسين] start with a title
كل صفحة تحتاج أن تسمي بإسم و هنا ما تحتاجه لتعين إسماً لصفحتك. :

<html>
<title>إسم الصفحه</title>
</html>

استبدل (اسم الصفحه) بالإسم الذي تريده ,حيث أنه كما ترى يسبق إسم الصفحه "التاج"<title> و يليه </title>
يجب أن يوضع إسم الصفحة في أول كود الصفحه .
و لكي تجرب إضافة اسم للصفحة بنفسك اكتب الكود الموجود بالأعلي في أي محرر نصوص مثل notepad و قم بحفظ الصفحه باسم test.html
ثم قم بفتح الملف بأي متصفح ,المفترض أن يظهر لك إسم الصفحه في شريط العنوان كما بالصورة الموجوده هنا بالأسفل,بينما الصفحة نفسها
ستكون خالية من أي محتوى لأننا لم نكتب فيها شيء بعد.

[تحسين] إضافة العناوين و الفقرات

إذا كنت قد تعاملت مع ميكروسوفت ورد من قبل فمن المفترض ان تكون معتاد على إستيلات العناوين الموجوده في الورد .في الhtml
يوجد ستة ستة مستويات للعناوين ,h1 العنوان الأكثر أهمية ,h2 أقل أهمية منه ,و هكذا إلى أن نصل إلى h6

و المثال هنا يوضح ما هي العناوين و كيف تظهر

heading
<h1>An important heading</h1>
  
<h2>A slightly less important heading</h2>

حاول بنفسك »اضغط على "حاول بنفسك" لكى ترى كيف تعمل فى الحقيقة

كل فقرة تكتبها يجب أن تبدأ بـ <P> تاج و تنتهي ب<p/> كمثال:
paragraph
<p>This is the first paragraph.</p>

<p>This is the second paragraph.</p>

حاول بنفسك »اضغط على "حاول بنفسك" لكى ترى كيف تعمل فى الحقيقة


[تحسين] تمييز نص معين و التأكيد عليه
Adding a bit of emphasis

يمكنك تمييز كلمة معينه أو عدد من الكلمات بجعلها مائلة باستخدام <em> تاج

و أيضا يمكنك تميز الكلمة او الجملة بجعل الخط أكثر سمكا باستخدام <b>تاج
<html>
  <em>interesting</em> topic!<br/>
  
  <b> bold </b>text
</html>

حاول بنفسك »اضغط على "حاول بنفسك" لكى ترى كيف تعمل فى الحقيقة


[تحسين] إضافة الصور

الصور شيء مهم لصفحات الأنترنت حيث تمنحها تميز كما تمكن الكاتب من إيصال ما يريد بسهولة ووضوح .
أبسط طريقة لإضافة الصور هي إستخدام <img>تاج ,لنفترض أن لدينا صورة في نفس فولدر ملف الhtml اسمها "peter.jpg"
و نريد عرضها بإرتفاع 150بكسل و عرض 200 بكسل فإن الكود يكون كالتالي .

<img src="peter.jpg" width="200" height="150">
و الآن يظهر لنا مفهوم جديد و هو attributes أي الصفات مثل srcو هذه الصفات من خلال تحديد قيمتها بعد علامة ال يساوي(=) يتم تحديد صفات الشيء الموجوده فيه. فمثلا الصفه src يجب ان نضع قيمتها الصورة التي نريد عرضها و الصفةwidth نضع بعدها عرض الصورة الذي نريده وكذلك الصفة height يكون بعدها الإرتفاع الذي نريده و هناك أيضا الصفة alt و التي يوضحها المثال التالي و القيمة التي تحدد لها هي الكلمات التي نريد ان يعرضها المتصفح بدلا من الصورة إن لم يجد الصورة في مكانها المحدد 
<img src="peter.jpg" width="200" height="150"
alt="My friend Peter">


يجب أن لا تستخدم صورة كبيرة الحجم حتى لا تتأخر في التحميل ,و يفضل إستخدام صور بامتدادJPEG للصور الفوتوغرافية و GIF لصور الرسوم
.
[تحسين] إضافة وصلات للصفحات الأخرى

تحتاج لوضع وصلات من صفحتك تنقل المستخدم عند الضغط عليها إلى صفحات أخرى و هذ ممكن في ال HTML من خلال التاج <a>,
و لنفترض الآن ان لدينا صفحة بإسم "peter.html" موجودة في نفس الملف و نريد أن نضع لها وصلة او ارتباط تشعبي
في الصفحة التي نعمل بها فإن ذلك يكون كالتالي 

This a link to <a href="peter.html">Peter's page</a>.
النص الذي يكتب بين <a> و <a/> و الذي هو في حالتنا هذهPeter's page هو النص الذي سيظهر للمستخدم و الذي سيقوم بالضغط عليه ليفتح له الصفحه peter.html و التي يجيب ان يوضع إسمها إن كانت في نفس الفولدر بعد الصفه href مباشرة كما بالمثال الأول أما في حالة كون الملف و ليكن هذه المرةmary.html موجود في الفولدر الأب أي الفولدر الذي يحتوى الفولدر الذي فيه الملف الذي نكتب فيه نكتبه هكذا: 
<a href="../mary.html">Mary's page</a>
و في حالة وجود الملف الذي نريد أن نصنع وصلة له في مسار فرعي أي أنه موضوع في فولدر و ليكن مثلا friends و هذا الفولدر موضوع بجوار ملف ال html الذي نعمل به أي له نفس مساره فإننا نكتب إسم المسار الفرعي و في حالتنا هو friends متبوعا ً بـ "/" كما هو موضح بالمثال 
<a href="friends/sue.html">Sue's page</a>
يمكن المزج بين الطريقتين السابقتين فنصعد للفولدر الأب و ندخل منه إلى فولدر آخر غير الذي نعمل فيهcollege و منه إلى فولدر آخر مُحتَوى فيه friends إلى أن نصل إلى الملف الذي نريد و الذي هو في المثال john.html 
<a href="../college/friends/john.html">John's page</a>
لكي تقوم بعمل وصلة لصفحة إنترنت اخرى موجودة على الإنترنت من موقع آخر غير موقعك فأنت تحتاج أن تضع عنوان الصفحة كاملا المسمى بال URL فمثلا إذا كنت تريد أن تقوم بعمل وصلة لwww.w3.org تكتب التالي:
links
This is a link to <a href="http://www.w3.org/">W3C</a>
.

حاول بنفسك »اضغط على "حاول بنفسك" لكى ترى كيف تعمل فى الحقيقة

يمكنك أن تجعل من صورة ما وصلة عندما يضغط المستخدم على الصورة توصله للموقع المحدد فمثلا يمكنك أن تجعل الصورة وصلة للصفحة الرئيسية بهذه الطريقة : 
<a href="/"><img src="logo.gif" alt="home page"></a>

حاول بنفسك »اضغط على "حاول بنفسك" لكى ترى كيف تعمل فى الحقيقة


[تحسين] Three kinds of lists

لغة الHTML تدعم ثلاثة أنواع من القوائم .أولها الغير مرقمه و التي يستخدم فيها التاج<ul>و التاج <li> كالتالي:
Example
<ul>
  <li>the first list item</li>

  <li>the second list item</li>

  <li>the third list item</li>
</ul>

حاول بنفسك »اضغط على "حاول بنفسك" لكى ترى كيف تعمل فى الحقيقة

النوع التاني من القوائم القائمة المرقمة و يستخدم فيها التاج <ol> و التاج <li> كالتالي:
Example
<ol>
  <li>the first list item</li>

  <li>the second list item</li>

  <li>the third list item</li>
</ol>

حاول بنفسك »اضغط على "حاول بنفسك" لكى ترى كيف تعمل فى الحقيقة

ثالث نوع من القوائم هو قائمة التعريفات و التي تسمح لك بأن تضيف مصطلحات بتعريفتها ,هذا النوع من القوائم يبدأ بالتاج <dl> و ينتهي بالتاج </dl> و يستخدم التاج <dt> لكل مصطلح و التاج <dd> لكل تعريف كالتالي :instance:
Example 
<dl>
  <dt>the first term</dt>
  <dd>its definition</dd>

  <dt>the second term</dt>
  <dd>its definition</dd>

  <dt>the third term</dt>
  <dd>its definition</dd>
</dl>

حاول بنفسك »اضغط على "حاول بنفسك" لكى ترى كيف تعمل فى الحقيقة

يمكنك أن تضع انواع مختلفة من القوائم داخل بعضها كما بالمثالي التالي:
Example
<ol>
  <li>the first list item</li>

  <li>
    the second list item
    <ul>
      <li>first nested item</li>
      <li>second nested item</li>
    </ul>
  </li>

  <li>the third list item</li>
</ol>

حاول بنفسك »اضغط على "حاول بنفسك" لكى ترى كيف تعمل فى الحقيقة


[تحسين] html لها رأس و جسم

يمكنك بالضغط على ذر الفأرة الأيمن داخل أي صفحة إنترنت و إختيار view page source أن تظهر كود ال html الخاص بالصفحة ,
بشكل عام تبدأ الصفحه بتعريف إصدار ال html المستخدم ثم تاج <html> ثم <head> وفي النهاية تجد</html>.
ما بين الـ<html> ... </html> يشبه الإناء الذي يحتوى الصفحه .
ما بين <head> ... </head> يوجد اسم الصفحة الإستايلات , و الإسكريبتات
ما بين <body> ... </body> توجد المحتويات التي ستظهر في الصحفه
و بالأسفل مثال لصفحة بسيطه:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <title> replace with your document's title </title>
</head>
<body>

replace with your document's content

</body>
</html>

حاول بنفسك »اضغط على "حاول بنفسك" لكى ترى كيف تعمل فى الحقيقة

العودة الى القائمة