multi kill Admin
عدد المساهمات : 52 تاريخ التسجيل : 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 ونصيحة للحميع لكي تتعلم عليك ان تطبق وتتابع غير هذا لن تنجح الامر ليس سهلا وفي الوقت نفسه ليس صعبا اذا استمريت عممارسة العمل الى اللقاء
| |
|