تعرف على وسوم لغة HTML كاملة ووظائفها
وسوم لغة HTML
 |
نقدم لكم مجموعة كبيرة من الوسوم الخاصة بلغة الاتش تى ام ال وكل وسم امامه وظيفته الخاصة به الى جانب امثلة على بعض الوسوم التى تحتاج لامثلة يمكنك تجربتها كما تعلمت فى الدرس الخاص باساسيات html
يمكنك التجربة السريعة للاكواد من خلال هذا الموقع
لا تنسى كتابة وسم البداية والنهاية
<html> ...... </html>
وتضع الكود الذى تريد تجربته بينهما
| الوسم | وظيفة الوسم | |||
|---|---|---|---|---|
| مجموعة من اهم وسوم لغة الاتش تى ام ال www.ra3dnet.com | ||||
| <-! ... -> | هذا الوسم عبارة تعليق وليس له اى نتيجة على المستعرض ولكن يمكنك كتابة ارشادات به لمن يريد التعديل على الكود | |||
| <! DOCTYPE> | هذا الوسم يحدد نوع المستند | |||
| <html> | وسم بداية ملف الاتش تى ام ال لابد ان تبدا به اى صفحة اتش تى ام ال | |||
| <head> | هو وسم خاص برأس الصفحة ويحتوى على عنوان الموقع الذى يظهر فى تبويب الموقع | |||
| <body> | هذا الوسم يحتوى على جميع محتويات الموقع لديك كما ذكرنا ان الموقع يتكون من راس وجسم لذا فهذا الوسم هو جسم الموقع وبه كل محتوياته | |||
| <title> | <head> هذا الوسم خاص بعنوان الموقع والذى يظهر فى التبويب بالمتصفح ويوضع هذا الوسم داخل الوسم |
|||
| <A> | وسم اضافة ارتباط تشعبى <a href="http://www.ra3dnet.com">تفضل بزيارة رعد نت !</a> |
|||
| <article> | وسم خاص بالمقالات | |||
| <b> | وسم لجعل الكتابة سمكية <b> ra3dnet.com </b> |
|||
| <br> | وسم بداية سطر جديد | |||
| <u> | وسم لوضع خط تحت الكتابة | |||
| <i> | وسم لجعل الكتابة مائلة <i>Ra3dNet.com</i> |
|||
| <button> | وسم اضافة زر <button type="button" onclick="alert('اهلا وسهلا!')">اضغط هنا!</button> |
|||
| <h1> to <h6> | هو وسم العنوان الرئيسى<h1></h1>اى ان الوسم هو وسم العنوان الفرعى الاول وهكذا <h2></h2> والوسم |
|||
| <img> | وسم وضع صورة ويمكن استخدامه بهذا الشكل
<img src="ra3dnet.gif" alt="ra3dnet"
height="34" width="32">
|
|||
| <input> | من الوسوم الهامة جدا وهو لعمل استمارات التسجيل مثل مثلا الاسم الاول وتجد مربع لكتابة الاسم الاول وهكذا وله عدة انواع نوع تكست وهو للكتابة ونوع سبميت وهو زر الموافقة او الانهاء <form action="database.asp"> First name: <input type="text" name="FirstName" value="your first name"><br> Last name: <input type="text" name="LastName" value="your last name"><br> <input type="submit" value="Submit"> </form> قم بتجربة هذا الكود مع العلم ان استخدام هذا الوسم يحتاج تطبيقات من لغات بى اتش بى و ايه اس بى |
|||
| <iframe> | هذا الوسم يقوم بعمل فريم او اطار حول صورة او موقع كما تحدد انت من خلال الرابط الذى تضعه فى الكود <iframe src="http://www.ra3dnet.com"> <p>Your browser does not support iframes.</p> </iframe> |
|||
| <center> | وسم لجعل النص فى وسط الصفحة او المحاذاة فى الوسط <center> Ra3dNet.com </center> |
|||
| <base> | هذا الوسم يكتب فى الهيد فى كود الاتش تى ام ال وهو يحدد رابط ثابت لجميع الروابط فى الصفحة بمعنى اننا كتبنا هذا الكود على سبيل المثال فى الهيد <head> <base href="http://www.ra3dnet.com" target="_blank"> </head> body ثم اذا اردنا ان نضع اى رابط فى يكون مثلا بهذا الشكل <body> <a href="2012/11/htmltags.html">html tags</a> </body> فنحن لم نكتب الرابط كامل اى اننا كتبنا بقية الرابط بعد دومين الموقع |
|||
| <abbr> | هذا الوسم يمكنك من اظهار تعليق عند الوقوع بالماوس على كلمة او صورة معينة <p>موقع <abbr title="اهلا وسهلا بك فى موقع رعد نت">رعد نت</abbr> لتطوير المواقع والمنديات</p> <abbr title="www.ra3dnet.com">my website</abbr> |
|||
| <bdo> | هذا الوسم يقوم بعملية قلب الحروف من اليمين الى اليسار او العكس <p><bdo dir="rtl">ra3dnet right-to-left.</bdo></p> يقرأ النص من اليمين الى الشمال <p><bdo dir="ltr">ra3dnet right-to-left.</bdo></p> يقرأ النص من الشمال الى اليمين |
|||
| <table> | وسم عمل جدول <table border="1"> <tr> <th>اسم الموقع</th> <th>اللينك</th> </tr> <tr> <td>رعد نت</td> <td>www.ra3dnet.com</td> </tr> </table> |
|||
| <tr> | وسم الصفوف فى الجدول | |||
| <th> | وسم الخلايا الرئيسية فى الجدول الموجودة فى راس الجدول | |||
| <td> | وسم الخلايا فى الجدول | |||
| <tbody> | cssيستخدم لتنسيق جسم الجدول ( لا يعمل الا مع tbody {color:blue;} |
|||
| <thead> | cssيستخدم لتنسيق رأس الجدول( لا يعمل الا مع thead {color:green;} |
|||
| <tfoot> | cssيستخدم لتنسيق اسفل الجدول( لا يعمل الا مع <html> <head> <style type="text/css"> thead {color:green;} tbody {color:blue;} tfoot {color:red;} </style> </head> <body> <table border="1"> <tr> <th>اسم الموقع</th> <th>اللينك</th> </tr> <tr> <td>رعد نت</td> <td>www.ra3dnet.com</td> </tr> </table> </body> </html> |
|||
| <caption> | وسم عمل عنوان للجدول <table border="1"> <caption>عنوان الجدول</caption> <tr> <th>اسم الموقع</th> <th>اللينك</th> </tr> <tr> <td>رعد نت</td> <td>www.ra3dnet.com</td> </tr> </table> |
|||
| <blockquote> | هذا الوسم يستخدم لازاحة النص او عمل اقتباس |
|||
| <dl> | <dt>هذا الوسم لعمل مجموعة عناوين ولكل عنوان وصف ويستخدم للعنوان الوسم <dd>ويستخدم للوصف الوسم مثال <dl> <dt>html</dt> <dd>لغة هيكلة وتصميم المواقع</dd> <dt>php</dt> <dd>لغة تمكنك من برمجة السكربتات</dd> </dl> |
|||
| <del> | وسم لشطب كلمة <del>ra3dnet</del> |
|||
| <ins> | <del>وسم ادراج كلمة وغالبا ما يستخدم بعد الوسم اى تشطب كلمة وتدرج مكانها اخرى بهذا الشكل my website name is <del>radnet</del><ins>ra3dnet</ins> my website name is |
|||
| <em> <strong> <dfn> <code> <samp> <kbd> <var> |
كل هذه الوسوم تمثل انماط من خطوط الكتابو المختلفة وكل وسم يعتبر اختصار لنوع الخط وهى بالترتيب والشكل Emphasized text Strong text Definition term A piece of computer codeSample output from a computer program Keyboard input Variable |
|||
| <div> | هذا الوسم يحدد نمط عام لكل ما يكتب فيه ، على سبيل المثال اذا اردنا ان نجعل كل الكتابة الموجودة فى منطقة معينة باللون الاحمر فنضعها داخل الوسم بهذا الشكل <div style="color:#FF0000"> <h3>www.ra3dnet.com</h3> <p>معهد رعد نت لتطوير المواقع والمنتديات والمدونات</p> </div> css وهو يستخدم بشكل اشمل من ذلك مع اكواد |
|||
| <fieldset> | هذا الوسم لعمل حقل او استمارة كاستمارات التسجيل ، سيكون رائع عند تجربته ، قم بتجربة هذا الكود <fieldset> <legend>التسجيل:</legend> الاسم: <input type="text"><br> الايميل: <input type="text"><br> تاريخ الميلاد: <input type="text"> </fieldset> يكتب به اسم الحقل<legend> والوسم |
|||
| <form> | هذا الوسم يستخدم عند عمل حقول ادخل البيانات مثل السابقة ووظيفته ادخل اسم ملف قاعدة البيانات الذى ستتم تخزين البيانات المدخلة به <form action="database.asp" method="get"> الاسم الاول: <input type="text" name="الاسم الاول"><br> الاسم الاخير : <input type="text" name="الاسم الاخير"><br> <input type="submit" value="Submit"> </form> حيث يكون الملف على سبيل المثال هو قاعدة البيانات الموجودة على موقعك والتى سيتم تسجيل بيانات المسجلين بهاdatabase <center> Ra3dNet.com </center> |
|||
| <hr> | وسم لوضع فاصل بين الفقرات والموضوعات فى موقعك | |||
| <label> | هذا الوسم لعمل خيارات ويمكنك تجربته بهذا الكود <form action="database.asp"> <label for="male">Male</label> <input type="radio" name="sex" id="male" value="male"><br> <label for="female">Female</label> <input type="radio" name="sex" id="female" value="female"><br><br> <input type="submit" value="Submit"> </form> |
|||
| <legend> | ويستخدم لتسميته كما ذكرنا سابقا <filedset> هذا الوسم يستخدم مع وسم الحقل | |||
| <ol> | وسم عمل قائمة تعداد رقمى | |||
| <ul> | وسم عمل قائمة ذات تعداد نقطى | |||
| <li> | وسم يستخدم مع الوسمين السابقين للفصل بين النقاط ونأخذ مثال للوسوم معا <ol> <li>first</li> <li>second</li> <li>third</li> </ol> <ul> <li>first</li> <li>second</li> <li>third</li> </ul> |
|||
| <link> | هذا الوسم يستخدم لربط ملف الاتش تى ام ال بملف اخر سى اس اس او لغة اخرى | |||
| <meta> | <head> هذا الوسم خاص بمعلومات موقعك ويوضع داخل الجزء ولا يظهر فى تنسيق الموقع ولكن يفيد محركات البحث ومثال الكود المستخدم مع الميتا <head> me="author" content="ra3dnet"> <meta cha<meta name="description" content="Free Web tutorials"> <meta name="keywords" content="HTML,CSS,XML,JavaScript"> <meta narset="UTF-8"> </head> |
|||
| <script> | لاضافة كود جافا سكربت | |||
| <noscript> | لتحديد جملة ما تظهر اذا لم يتم عرض السكربت او اذا كان متصفح المستخدم لا يعمل به اسكربتات الجافا مثال <noscript>Your browser does not support JavaScript!</noscript> |
|||
| <optgroup> | هذا الوسم يستخدم لعمل قائمة خيارات وهو يعنى مجموعة الخيارات ويستخدم مع الوسمين التاليين وسنعرض لهم مثالا معا |
|||
| <option> | هذا الوسم يحدد كل خيار من خيارات القائمة | |||
| <select> | هذا الوسم يوضع ليجعل قائمة الخيارات عبارة عن قائمة منسدلة وهذا مثال <select> <optgroup label="لغات البرمجة"> <option value="html">html</option> <option value="java">java script</option> </optgroup> <optgroup label="التصميم"> <option value="Photoshop">photoshop</option> <option value="flash">Flash</option> </optgroup> </select> |
|||
| <pre> | هذا الوسم عند كتابة نص بداخله ستجده يظهر بحجم ثانبت ومسافات ثابته كما انه يفبل عمل المسافات باستخدام المسطرة وعمل الفواصل ( حيث انك لا تستطيع عمل مسافات فى الكتابة العادية )ومثال <pre> Ra3d net </pre> |
|||
| <q> | هذا الوسم يستخدم لعمل علامات تنصيص حول الفقرة | |||
| <s> | يستخدم هذا الوسم لشطب جملة او كلمة ما |
|||
| <small> | وسم لكتابة نص بحجم صغير | |||
| <span> | يستخدم هذا الوسم لتنسيق كلمات فقط داخل فقرة كاملة مثل تغيير اللون او نوع الخط <span style="color:blue;font-weight:bold">ra3dnet</span> وذلك اذا كان هناك تنسيق عام للفقرة كلها وتريد استثناء مقطع صغير او كلمة معينة |
|||
| <sub> | يستخدم لجعل الكلمة اسفل السطر this word is subscript text |
|||
| <sup> | لجعل الكلمة اعلى السطر This word is superscript text. |
|||
| <textarea> | هو وسم لعمل منطقة كتابة نص مع تحديد المساحة <textarea rows="4" cols="50"> ra3dnet here </textarea> |
|||
تسلم ياباشا على الشرح ده
ردحذفأزال المؤلف هذا التعليق.
ردحذفأزال المؤلف هذا التعليق.
ردحذفأزال أحد مشرفي المدونة هذا التعليق.
ردحذفالله يعطيك الف عافية و عافية
ردحذفأزال أحد مشرفي المدونة هذا التعليق.
ردحذفأزال أحد مشرفي المدونة هذا التعليق.
ردحذفأزال أحد مشرفي المدونة هذا التعليق.
ردحذفأزال أحد مشرفي المدونة هذا التعليق.
ردحذفأزال أحد مشرفي المدونة هذا التعليق.
ردحذفجزاك الله خيرا
ردحذفشكرا كثييييييييييييييييييييييييير
جزاكم الله خيرا
ردحذفالف شكر
ردحذفشكراً جزيلاً لك على المجهود الرائع
ردحذفشكرا
ردحذفقوووووة
ردحذف