الهـرَم الـرّآبـع
مرحبا بك في منتدى الهـرَم الـرّآبـع Smile
ان كآن سبب دخولك هنا تافه كالبحث عن طرق اختراق فيسبوك أو تطيير حسابات ف ننصحك ان تبقى ك زآئر Smile
ما يوجد هنآ أكبر بكثير Smile وان كنت صاحب طموح كبير وهوس كبير بالهاكينغ Smile ف زر التسجيل ينتظرك !
ومرحبا بك كعضو هنآ Smile

#سيف_مخآرزة >> الهـرَم الـرّآبـع

الهـرَم الـرّآبـع

المنتدى الرسمي ل منظمة الهدف الصعب the official Forum forTarget hard Organization
 
الرئيسيةاليوميةس .و .جبحـثالأعضاءالمجموعاتالتسجيلدخول

شاطر | 
 

 تعلم لغة HTMLفي شرح واحد 2016

استعرض الموضوع السابق استعرض الموضوع التالي اذهب الى الأسفل 
كاتب الموضوعرسالة
multi kill
Admin


عدد المساهمات : 48
تاريخ التسجيل : 29/10/2016

مُساهمةموضوع: تعلم لغة HTMLفي شرح واحد 2016   الجمعة ديسمبر 02, 2016 3:04 pm

الكود:
السلام عليكم ورحمة وبركاته
اليوم ان شاء الله سوف اشرح لكم لغة من لغات البرمجة وهي المكون لاساسي لصفحات الانترنت
وهي لغة HTML
ماهي لغة html

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

Hyper هي عكس "خطي" وهي تعني في هذه الحالة أن تنتقل من أي نقطة إلى أي نقطة بدون أن تسير في خط سير محدد، في الماضي - عندما كانت الفأرة شيء يلحقه القط - كانت الحواسيب تعمل بشكل خطي، تقوم بتنفيذ أمر ما ثم تذهب لما بعده، لكن HTML مختلفة، يمكنك أن تذهب إلى أي مكان في أي وقت، ليس بالضرورة مثلاً أن تزور موقع MSN.com قبل أن تزور HTML.net.
Text تعني النص، وهذه تشرح نفسها.
Mark-up هو ما تفعله بالنص، فهذه الكلمة تعني توصيف النص، فأنت تقوم بتوصيف النص تماماً كما تفعل مع معالجات الكلمات فتضيف العناوين والنقاط والنص السميك وغيرها.
Language تعني اللغة، فتقنية HTML هي لغة توصيف وهي أيضاً تستخدم العديد من كلمات اللغة الإنجليزية.
في هذا الدرس ستتعلم أيضاً XHTML والتي تعني "Extensible HyperText Mark-up Language" وهي باختصار طريقة أحدث وأكثر تنظيماً لكتابة HTML.
حسنا الان نتعرف للعناصر التي تعطي هيكيلة وهي الرموز او الوسوم التي تخبر المتصفح ب اوامر كيف عرض هيكلية الصفحة بوسوم الي هي تسمى tag وكل وسم له بداية ونهاية
تمام الان نفتح ايnotpad لنبدأ بتعلم لغة html
تمام نفتح المفكرة ونكتب
<html>
</html>
تمام نأتي للشرح هسا
هاي العلامة
< هذه العلامة هي تستخدم دائما لبداية الوسم وهذه لنهاية الوسم>
تمام مكان ماانا واضع الكلام فوق بكون الكلام
تمام كيف نغلق هذا الوسم
</هنا نوضع الكلام>
تمام هيك تعرفنا كيف نبدأ بوسم وكيف ننهي وسم
هسا نيجي نجرب مثلا
هسا نشرح خاصية وهيem
<em> الكلام </em>
 
 تمام هاي خاصية اسمها ال("em" هي اختصار "emphasis".
سيظهر الكلام في المتصفح مائلا
هسا الخاصية الثانية وهي العنوانين وتأتي الكلام الاكبر وحيث الاصغر فالاصغر
وهي اختصار ل heading

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

هذا عنوان

هذا عنوان فرعي
الان نأتي لخطةو انشاء موقع او صفحة html
تمام
نفتح النوتباد
نعمل وسم بداية ونهاية ل html
بحيث تكون هكذا ونضع بداخل وسم الhtml الامر head
وداخل الhead الامر title وهو يدل على عنوان الصفحة او اسم الصفحة
ونغلق ىالوسم ومن ثم نضع بلوسم boody وسم  <p>مرحى! هذا هو موقعي الأول.</p>


 <html>

  <head>
  </head>

  <body>
  </body>

 </html>
 بحيث تكون هكذا
 
 <html>

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

  <body>
  <p>مرحبا هذا هو موقعي الأول.</p>
  </body>

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

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

  <body>
  </body>

 </html>
 
في قسم رأس الصفحة الي هو head وهو العنوان الوسم title طبعا بنبدأ بلوسم وبنغلقو بمكانوا
اي وسم بنبلش فيه اول شي بنغلقو اخر شي تمام
اما بلنسبة للbody وهو جسم الصفحة نكتب هذا

 <p>Is used for paragraphs.</p> وهنا نكتب p وهو parhraphs وهو الفقرة
 <em>Emphasis text.</b>
 <h1>Heading</h1>وهنا نقصد فيه وهو يبدأ بالاكبر ومن ثم اصغر فالاصغر والارقام هي التي تحدد

 <h2>Subhead</h2>
 <h3>Sub-subhead</h3>  
تمام الان سأشرح لكم بعض الوسوم مثلا تغميق الكلام
وهو strong
<strong>hard target </strong>
ستظهر بخط غامق
اما اذا اردنا تصغير الحجم نكتب الامر small
<smal>hard target </smal>
السؤال هل يمكن استخدام امر استمالة الخط والتصغر نعم ولكن نحرص على اي وسم بدينا فيه بنغلقو اخر شي
 <em><small> hard target</small></em>
الان كيف يمكننا ان نجعل هناك الكلام يكتمل للأسفل يعني سطر ثاني
هذه الخاصية تحتاج لوسم كما ذكرنا سابقا ان هناك وسوم تستخدم وسم البداية ووسم الاغلاق في نفس الوقت
hard target <br /> I love you
ستظهر هكذا
hard target
I love you
تمام الان نشرح خاصية كما لها وسم البداية والنهاية في نفس الوقت وهي الخط ومايسمى  hr
وهو معنا الخط الافقي
وسيظهر هناك خط يفصل بين الكلام الذي فوق الذي ستكتبه تحت الكلام الذي في الاسفل
<hr />
هناك عناصر أخرى تحتاج إلى وسمي البداية والإغلاق - كما هو حال معظم العناصر - مثل ul وol وli. هذه العناصر تستخدم عندما تريد إنشاء القوائم.



 <ul>
  <li>hard target</li>
  <li>love hard target</li>
 </ul>
 
اما بلنسبة ل ol

 <ol>
  <li>Fhard target</li>
  <li>hard target</li>
 </ol>
لتكون هكذا

 <strong>hard target</strong>
 <small>hard target</small>
 <br /> hard target
 <hr /> hard target
 <ul>List</ul>
 <ol>hard target</ol>
 <li>i love you hard target</li>
 
 
 تما نأتي الان للخصائص
ومنها خاصية لون الصفحة وتكتب هكذا
 
<h2 style="background-color:#ff0000;">hard target</h2>

وتوضع في الوسم body
لتكون هكذا

 <html>
  
  <head>
  </head>

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

 </html>
 
 ويمكنك بدل وضع الموز بعد كلمة كلر يمكن وضع اللون ولكن هذه الرموز عبارة عن الوان بدرجات او الوان
ومن هذه الالوان
يض: #ffffff
أسود: #000000
أحمر: #ff0000
أزرق: #0000ff
أخضر: #00ff00
أصفر: #ffff00
الان نأتي لخاصية وضع رابط الصفحة
<a href="http://alharamalrabe3.3rab.pro/f3-montada"here is alinke to hard target http://alharamalrabe3.3rab.pro/f3-montada</a>
وستظهر لك كلمة مظللة بكلمة here is a link وستقوم بتحويلك للرابط الي وضعته
اما بلنسبة للروابط بين الصفحات في موقعي
نقوم بكتابة الامر او الوسم هذا
 <a href="page2.htm">Click here to go to page 2</a>

اذا كنت واضعا المجلد في صفحة رقم 2 واسم الملف Hard target
 <a href="hard target/page2.htm">Click here to go to page 2</a>
الان ماذا لو اردنا العكس من صفحة من2 ال1
سيكون هكذا
 <a href="../page1.htm">A link to page 1</a>


"../" تشير إلى مجلد واحد في مستوى أعلى من الملف الذي يحوي الرابط، بنفس النظام يمكن الإشارة إلى مستويين أو أكثر من المجلدات بكتابة "../../".

points to the folder one level up from position of the file from which the link is made. Following the same system, you can also point two (or more) folders up by writing
هل فهمت هذا النظام؟ بإمكانك دائماً أن تكتب العنوان الكامل للملف إذا وجدت هذا النظام معقداً.


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

 <h1 id="heading1">heading 1</h1>
بإمكانك الآن إنشاء رابط لهذا العنصر باستخدام علامة "#" في خاصية الرابط، العلامة "#" يجب أن تتبع بقيمة id للعنصر الذي تريد الربط له، مثال:

 
 <a href="#heading1">Link to heading 1</a>
 
كل هذا في مثال سيتضح
 <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>
 
يمكنك وضع عنوان ايميلك بدلا من الرابط ليكون هكذا
 <a href="mailto:nobody@html.net">Send an e-mail to nobody at HTML.net</a>

يمكنك ان تضع عنوان للرابط دائما لأضافة رابط نستخدم خاصية href
 <a href="http://alharamalrabe3.3rab.pro/f3-montada" title="Visit http://alharamalrabe3.3rab.pro/f3-montada and learn HTML">http://alharamalrabe3.3rab.pro/f3-montada</a>
الان نأتي لخاصية اضافة الصور وهي

<img src="hard.jp />
طبعا الsrcمكان الوصرة يعني انت وين حاط الصورة
هسا مكان الhard
نضع مكان اسم الصورة.امتدادها الي هو صيغتها jpg
يمكننا وضع رابط بدلا من وضع اسم الصورة وامتدادها

 <a href="http://http://alharamalrabe3.3rab.pro/f3-montada">
 <img src="logo.png" /></a>
وهناك خاصيتنان اخرى للصور وهما العرض والطول
ويكتبان بهكذا وبأمكانك ان تغير الطول فقط او العرض فقط او الاثنين معا وعادة مايكون العرض ضعف الطول حتى تعطي مظهر جذاب
 <img src="logo.png" width="141" height="32" />

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

مثال 1:

 
 <table>
  <tr>
 <td>خلية 1</td>
 <td>خلية 2</td>
  </tr>
  <tr>
 <td>خلية 3</td>
 <td>خلية 4</td>
  </tr>
 </table>
 
 هناك ثلاث عناصر تستخدم لبناء الجداول وهي:
وسم البداية <table> ووسم الإغلاق </table> يبدأ من بينهما الجدول وينتهي، منطقي.
<tr> تعني "table row" وهي العنصر الذي تبدأ من خلاله الصفوف وتنتهي، لا زال الأمر منطقياً.
<td> هي اختصار "table data". هذا الوسم يبدأ وينهي كل خلية في صفوف الجدول، كل هذا بسيط ومنطقي.

في المثال السابق يحوي فقط عمودين وصفين ويمكن للجدول ان يحوي عدد لانهائي للصفوف والاعمدة
 مثال

 <table>
  <tr>
 <td>خلية 1</td>
 <td>خلية 2</td>
 <td>خلية 3</td>
 <td>خلية 4</td>
  </tr>
  <tr>
 <td>خلية 5</td>
 <td>خلية 6</td>
 <td>خلية 7</td>
 <td>خلية 8</td>
  </tr>
  <tr>
 <td>خلية 9</td>
 <td>خلية 10</td>
 <td>خلية 11</td>
 <td>خلية 12</td>
  </tr>
 </table>
 

الخاصية من خصائص الجدول وهو الاطار لتحديد سمك الاطار

 <table border="1">
  <tr>
 <td>خلية 1</td>
 <td>خلية 2</td>
  </tr>
  <tr>
 <td>خلية 3</td>
 <td>خلية 4</td>
  </tr>
 </table>
 
 
وطبعا سمك الاطار يتحدد بالبكسل
ويمكن من عرض الجدول بمتصفح بعرض 30%
 <table border="1" width="30%">

align: يحدد المحاذاة لمحتويات الجدول، أو الصف أو في الخلية، فمثلاً يمكن محاذاة النص إلى اليمين أو اليسار أو في المنتصف.
يحدد المحاذاة الرأسية لمحتويات الخلية، فيمكن محاذاة النص في الأعلى أو الأسفل أو المنتصف.
مثال

 
 <td align="right" valign="top">Cell 1</td>
خاصيتان هما colspan وrowspan تستخدمان لإنشاء جداول رائعة ومتقنة

Colspan هي اختصار "column span"، Colspan تستخدم في الوسم <td> لتحدد عدد الأعمدة التي ستتمدد لها الخلية:

مثال

 
 <table border="1">
  <tr>
 <td colspan="3">Cell 1</td>
  </tr>
  <tr>
 <td>خلية 2</td>
 <td>خلية 3</td>
 <td>خلية 4</td>
  </tr>
 </table>
كما ربما خمنت، rowspan تحدد عدد الصفوف التي ستقوم الخلية بالتمدد فوقها:


 <table border="1">
  <tr>
 <td rowspan="3">خلية 1</td>
 <td>خلية 2</td>
  </tr>
  <tr>
 <td>خلية 3</td>
  </tr>
  <tr>
 <td>خلية 4</td>
  </tr>
 </table>
هكذا بكون خلص درسنا لليوم وهو كيفية بناء صفحات الاساسية لصفحات الانترنت وهي
 html
اتمنى تكونوا استفدتو بلشرح اي حد مافهم اشي او في اشي صعب عليه يترك كومنت
وبتمنى دعم للمنظمة كان معكم
multi kill
ونصيحة للحميع لكي تتعلم عليك ان تطبق وتتابع غير هذا لن تنجح الامر ليس سهلا وفي الوقت نفسه ليس صعبا اذا استمريت عممارسة العمل
الى اللقاء
 


 
 

 
 
الرجوع الى أعلى الصفحة اذهب الى الأسفل
معاينة صفحة البيانات الشخصي للعضو
 
تعلم لغة HTMLفي شرح واحد 2016
استعرض الموضوع السابق استعرض الموضوع التالي الرجوع الى أعلى الصفحة 
صفحة 1 من اصل 1
 مواضيع مماثلة
-
» مفتاحavast حتى 2016

صلاحيات هذا المنتدى:لاتستطيع الرد على المواضيع في هذا المنتدى
الهـرَم الـرّآبـع :: الفئة الأولى :: تعلم lern-
انتقل الى: