أوامر HTML ووظائفها .. وجميع أكوادها الهامة
جميع أوامر وأكوادHTML للمبتدئين | أكثر من 100 كود جاهز
وظائف لغة html (Hyper text Markup Language)
إن الوظيفة الأساسية للغة html هي إنشاء صفحة ويب والتي تصبح من خلال أوامر وأكواد خاصة وتسمى أيضاً بالوسوم، حيث أن هذه الصفحة تعمل بواسطة برنامج مستعرض الإنترنت التي تقوم بتنفيذ هذه الأكواد ولإظهار آثارها على صفحة المستعرض، وإن وظائف لغة البرمجة html هي:
هي التي تعمل على وصف بنية صفحات الويب هيكلياً.
تحتوي لغة html على عناصر نستطيع عن طريقها إضافة الصور والكائنات التفاعلية.
تعمل على إنشاء مستندات عن طريق الوسوم التي تشير إلى الفقرات والعناوين بالإضافة إلى أنها تشير إلى الاقتباسات والجداول والروابط.
من خلال هذه اللغة البرمجية نستطيع تنسيق الصفحة واستخدام الألوان والخلفيات.
تسمح بإدراج الصور والرسومات بالإضافة إلى التحكم بأحجام وأبعاد هذه الصور.
تسمح بإدراج روابط ووصلات تشعبية.[3]
جميع خصائص HTML
إن هناك مميزات وعيوب لغة HTML حيث أن من سلبيات استخدام html في برمجة صفحات الويب هو أنها لا تسمح للمستخدم بأن ينفذ المنطق، ولكن هناك خصائص ومميزات للغة البرمجة html تتجلى في:
إن هذه اللغة البرمجية لا تحتاج إلى برامج حتى يتم تصميمها، فهي تحتاج فقط إلى مفكرة أو إلى برنامج الدفتر.
تتميز بسهولة تعلمها فهي سهلة وبسيطة.
من خلالها يمكن إضافة أي تعديل للموقع بكل سهولة.
تسمح بالكتابة باللغة العربية.
تتميز بالقدرة على إضافة نصوص برمجية مثل نصوص الجافا أو نصوص DHTML.
من خلال HTML نستطيع التحكم في خصائص صفحة الويب.
تعمل على ترجمة النصوص البرمجية إلى اللغة العربية.
المراجع
- العناصر التقسيمية للصفحة
- رأس الصفحة <header>
- جسم الصفحة <body>
- ذيل الصفحة <footer>
- قائمة التنقل <nav>
- حاوية كتلية <div>
- الترويسات <h1-h6>
- قسم منفصل <section>
أوامر HTML ووظائفها , شرح جميع أوامر html باللغة العربية pdf, جميع أوامر HTML, أكواد html للمبتدئين, جميع أوامر HTML لها بداية ولها نهاية, خصائص HTML, HTML شرح, اكواد html جاهزة للنسخ, أوامر HTML ووظائفها .. وجميع أكوادها الهامة, اكواد html جاهزة و احترافية, جميع وسوم html مع الشرح, أكواد html جاهزة للمبتدئين أكثر من 100 كود جاهز, شرح HTML و CSS وكيفية استخدامهما وتعديل أكوادهما بشكل كامل, إلى ماذا يرمز الاختصار HTML وما هو معناه, مقدمة الى اتش تي ام ال , ما هي لغة HTML؟, أوامر HTML ووظائفها, شرح جميع أوامر html باللغة العربية pdf, جميع أوامر HTML, أكواد html للمبتدئين, جميع أوامر HTML لها بداية ولها نهاية, خصائص.
HTML, Load Metrics (uses 29 credits), KEYWORD, 100 html tags, 100 html projects, 100 html interview questions, 100 html tags and uses, 100 html code, 100 html tags and their functions, 100 html colors, 100 html, 100 html website, width 100 html, drop down list 1 to 100 html, table width 100 html, top 100 html interview questions, height 100 html, image width 100 html, w-100 html, image 100 html, img width 100 html, div width 100 html, 1000 projects in html, ✔ html, ❮ means in html, 100vh html, ❮ html, 100 days of code html, ❯ html, 100 days of code html css, ✖ html, 100vw html.
الجدول التالي يوضح أهم الأوامر ووظيفة كل منها
| مسلسل | الوسم | الوظيفة |
|---|---|---|
| 1 | <a> | هذا الوسم يُستخدم لعمل الروابط |
| 2 | <abbr> | هذا الوسم يُستخدم عندما نريد كتابة اختصار |
| 3 | <address> | هذا الوسم يُستخدم عندما نريد إضافة معلومات التواصل مع صاحب المقالة او الموقع |
| 4 | <area> | يستخدم هذا الوسم مع وسم <map> ووسم <img > وذلك لتحديد مساحة داخل صورة و عند الضغط على هذه المساحة فكأننا ضغطنا على لينك |
| 5 | <article> | يستخدم هذا الوسم عند عمل مقالة ويكون بداخلة العديد من الوسوم |
| 6 | <aside> | يستخدم هذا الوسم لعمل محتوى جانبي للموقع مثل الإعلانات او فهرس لمقالات |
| 7 | <audio> | يستخدم هذا الوسم عندما نريد اضافة مقطع صوتي الى الصفحة |
| 8 | <b> | يستخدم هذا الوسم عند عمل خط سميك للعنصر bold text |
| 9 | <base> | هذا الوسم يحتوى على لينك أساسي وهذا اللينك الأساسي يكون اللينك الافتراضي للعنصر <a> |
| 10 | <bdi> | هذا الوسم يقوم ب تغيير اتجاه المحتوى الذي بداخله |
| 11 | <bdo> | هذا الوسم يُستخدم عندما نريد تغيير اتجاه المحتوى الذي بداخله |
| 12 | <blockquote> | يستخدم هذا الوسم عندما نريد إضافة اقتباس من مصدر اخر |
| 13 | <body> | يكون بداخلة المحتوى الذي يظهر لزائر الصفحة |
| 14 | <br> | يستخدم عندما نريد الكتابة من سطر جديد |
| 15 | <button> | يستخدم عند عمل زر |
| 16 | <canvas> | يستخدم لعمل الرسومات وغالبا بال JavaScript |
| 17 | <caption> | دائما يستخدم مع وسم <table> لعمل شرح اعلى الجدول |
| 18 | <cite> | يستخدم عند إضافة عمل قام به شخص |
| 19 | <code> | يستخدم عندما نريد اظهار الاكواد البرمجية ك اكواد في صفحة الويب |
| 20 | <col> | يكون دائما داخل عنصر <colgroup> وذلك لتنسيق الاعمدة |
| 21 | <colgroup> | يكون بداخله وسم <col> ويستخدم لتنسيق الاعمدة |
| 22 | <data> | يُستخدم هذا الوسم لإضافة بيانات للعنصر وهذه البيانات تكون غير مرئية للمُستخدم العادي |
| 23 | <datalist> | يستخدم مع وسم <option> وذلك ل وضع قيم مُعينة فقط داخل حقل ادخال <input> |
| 24 | <dd> | تستخدم مع وسم <dl> ووسم <dt> وهذه العناصر الثلاثة تُستخدم معا عندما يكون لدينا قائمة من العناصر نُريد وصفها. |
| 25 | <del> | يستخدم عندما يكون المُحتوى بداخل هذا الوسم تم حذفة مسبقا |
| 26 | <details> | هذا الوسم دائما يكون بداخله وسم <summary> يُستخدم لإظهار او إخفاء المُحتوى |
| 27 | <dfn> | والمُحتوى بداخل هذا الوسم يكون تقريبا كلمة او كلمتين يتم شرحهم بعد ذلك في الجملة القادمة. |
| 28 | <dialog> | يُستخدم هذا الوسم لعمل dialog box وترجمتها نافذة فرعية |
| 29 | <div> | نستخدم هذا الوسم عندما نريد وضع بداخله عناصر سوف نقوم بتنسيقهم بواسطة لغة CSS |
| 30 | <dl> | تستخدم مع وسم <dd> ووسم <dt> وهذه العناصر الثلاثة تُستخدم معا عندما يكون لدينا قائمة من العناصر نُريد وصفها. |
| 31 | <dt> | تستخدم مع وسم <dl> ووسم <dd> وهذه العناصر الثلاثة تُستخدم معا عندما يكون لدينا قائمة من العناصر نُريد وصفها. |
| 32 | <em> | المحتوى بداخل هذا الوسم يكون محتوى مهم عن باقي النص بالإضافة انه يكون ذو خط مائل |
| 33 | <fieldset> | يستخدم هذا الوسم دائما داخل وسم < form> لوضع مجموعة من العناصر ذات الصلة بداخله. |
| 34 | <figcaption> | هذا الوسم دائما يكون داخل وسم <figure> وذلك لوضع جملة توضيحية اسفل الصورة |
| 35 | <figure> | هذا الوسم يكون بداخلة وسم <figcaption> ووسم <img> وذلك لوضع صورة في الموقع وتريد ان تَكتب جُملة توضيحية أسفل هذه الصورة |
| 36 | <footer> | هذا الوسم يستخدم لعمل الجزء السفلى من الصفحة او الموقع |
| 37 | <form> | يستخدم هذا الوسم لعمل نموذج لحقول الادخال |
| 38 | <h1 : h6> | يستخدم هذا الوسم لتحديد عناوين الصفحة |
| 39 | <head> | هذا الوسم يحتوي على معلومات خاصة بالصفحة ولكن لا تظهر بشكل مباشر للمُستخدم العادي |
| 40 | <header> | يستخدم هذا الوسم لعمل عنوان للصفحة او عنوان لمقال |
| 41 | <hr> | هذا الوسم يستخدم للفصل بين فقرتين بخط أفقي |
| 42 | <html> | هذا الوسم يحتوي على جميع وسوم لغة html ماعدا طبعا <!DOCTYPE html> |
| 43 | <i> | المحتوى بداخل هذا الوسم يكون بخط مائل italic |
| 44 | <iframe> | يستخدم لعمل إطار في الصفحة |
| 45 | <img> | يستخدم هذا الوسم عندما نُريد ادراج صورة في الموقع |
| 46 | <input> | يستخدم هذا الوسم داخل عنصر ال <form> لعمل حقل ادخال لبيانات المُستخدم |
| 47 | <ins> | المُحتوى بداخل هذا العنصر تم إضافته وذلك بوضع خط أسفل المُحتوى الذي بداخل هذا العنصر |
| 48 | <kbd> | ونستخدم هذا الوسم عندما نريد كتابة امر من اومر الكيبورد |
| 49 | <label> | يستخدم هذا الوسم مع عنصر <input> لوضع شرح توضيحي لحقل الادخال |
| 50 | <legend> | يستخدم هذا الوسم داخل وسم <fieldset> وذلك لإضافة عنوان توضيحي لهذه المجموعة |
| 51 | <li> | يستخدم هذا الوسم داخل وسم <ol> او <ul> لإضافة قائمة من الاشياء |
| 52 | <link> | يستخدم هذا الوسم لربط ملف اكواد لغة html بملف لغة CSS |
| 53 | <main> | هذا الوسم يكون بداخلة العديد من العناصر التي تُحدد المحتوى الأساسي للصفحة. |
| 54 | <map> | يستخدم هذا الوسم مع وسم <area> ووسم <img> وذلك لتحديد مساحة داخل صورة و عند الضغط على هذه المساحة فكأننا ضغطنا على لينك |
| 55 | <mark> | المحتوى بداخل هذا الوسم يكون ذو خلفية بلون مميز |
| 56 | <meta> | هذا الوسم هو المسئول عن إضافة معلومات للصفحة وهذه المعلومات لا تظهر لزائر الصفحة |
| 57 | <meter> | يستخدم هذا الوسم لعرض بيانات قابلة للقياس في نطاق معين (range) |
| 58 | <nav> | هذا الوسم يحتوي على العديد من الروابط |
| 59 | <noscript> | المحتوى بهذا الوسم يظهر فقط عندما يكون المتصفح لا يدعم اكواد لغة JavaScript |
| 60 | <ol> | تستخدم مع وسم <li> وذلك لعمل قائمة مرقمة او مرتبة |
| 61 | <optgroup> | هذا الوسم يكون بداخله وسم <option> وهو يُعتبر عنوان لمجموعة من الاختيارات |
| 62 | <option> | هذا الوسم غالبا ما يُستخدم داخل عنصر <datalist> وعنصر <select> وذلك لعمل drop-down list |
| 63 | <output> | يستخدم هذا الوسم لإظهار نتائج عملية حسابية. |
| 64 | <p> | يُستخدم هذا الوسم لعمل فقرة داخل مقال. |
| 65 | <picture> | يُستخدم هذا الوسم إذا كان لدينا صورتان او أكثر؛ مثلا إذا كان لدينا صورتان وأردنا ظهور الصورة الأولى في حالة الشاشات الصغيرة مثل الموبايل ولكن في حالة الشاشات الكبيرة لا نريد اظهار الصورة الأولى ولكن اظهار الصورة الثانية بدلا منها |
| 66 | <pre> | المحتوى الذي بداخل هذا الوسم يكون تم تنسيقة مسبقا |
| 67 | <progress> | يستخدم هذا الوسم لعمل ال progress bar |
| 68 | <q> | يستخدم لعمل اقتباس قصير |
| 69 | <s> | المُحتوى بداخل هذا الوسم كان صحيحا ولكن في الماضي |
| 70 | <samp> | تُستخدم هذا الوسم لعرض عينه من مُخرجات برنامج كمبيوتر |
| 71 | <script> | هذا الوسم يكون بداخله اكواد لغة JavaScript |
| 72 | <section> | يستخدم هذا الوسم لتقسيم الصفحة الى اقسام |
| 73 | <select> | هذا الوسم يكون بداخله وسم <option> وذلك لعمل قائمة منسدلة drop-down list |
| 74 | <small> | المُحتوى داخل هذا العنصر يكون بخط أصغر عن بقية النص |
| 75 | <source> | دائما يُستخدم هذا الوسم داخل وسم ال <video> او وسم ال <audio> إذا كان لدينا امتدادين او أكثر مختلفين لنفس الملف الصوتي او الفيديو |
| 76 | <span> | نستخدم هذا الوسم عندما نريد وضع بداخله عناصر سوف نقوم بتنسيقهم بواسطة لغة CSS |
| 77 | <strong> | يستخدم عندما يكون لدينا سطر او جملة مهمه |
| 78 | <style> | يكون بداخلة اكواد لغة CSS وذلك لتنسيق الوسوم |
| 79 | <sub> | المُحتوى داخل هذا العنصر يكون بخط منخفض عن بقية النص |
| 80 | <summary> | هذا الوسم دائما يكون داخل وسم <details> لإظهار واخفاء المحتوى الذي بداخله |
| 81 | <sup> | المُحتوى داخل هذا العنصر يكون مرتفع عن بقية النص |
| 82 | <svg> | هذا الوسم يمكننا من عمل الرسومات داخل الموقع |
| 83 | <table> | هذا الوسم يستخدم لعمل الجدول |
| 84 | <tbody> | هذا الوسم يكون بداخلة الجزء الأساسي من الجدول وبالتالي يكون داخل وسم ال <table> |
| 85 | <td> | هذا الوسم هو المسؤول عن إضافة خلية جديدة داخل الجدول وبالتالي يكون داخل وسم ال <table> |
| 86 | <template> | جميع محتويات هذا الوسم تكون مخفيه ولا تظهر لزائر الموقع مباشرة |
| 87 | <textarea> | يُستخدم هذا الوسم عندما تريد من زائر الموقع ادخال نص طويل متعدد الاسطر. |
| 88 | <tfoot> | هذا الوسم يكون بداخلة الجزء السفلى من الجدول وبالتالي يكون داخل وسم ال <table> |
| 89 | <th> | هذا الوسم هو المسؤول عن إضافة العنوان (الجزء العلوي) داخل الجدول وبالتالي يكون داخل وسم ال <table> |
| 90 | <thead> | هذا الوسم يكون بداخلة الجزء العلوي من الجدول وبالتالي يكون داخل وسم ال <table> |
| 91 | <time> | هذا الوسم يُستخدم عندما نريد اظهار وقت |
| 92 | <title> | هذا الوسم يُستخدم لتحدد عنوان الصفحة |
| 93 | <tr> | هذا الوسم هو المسؤول عن إضافة صف جديد داخل الجدول وبالتالي يكون داخل وسم ال <table> |
| 94 | <track> | يُستخدم هذا الوسم عند عمل ترجمة لمقطع فيديو وتظهر اثناء تشغيل الفيديو مثل فيديوهات اليوتيوب كده. |
| 95 | <u> | نستخدم هذا الوسم لوضع خط تحت المُحتوى الذي بداخله. |
| 96 | <ul> | تستخدم مع وسم <li> وذلك لعمل قائمة غير مرتبة من الاشياء |
| 97 | <var> | نستخدم هذا الوسم عندما يكون لدينا معادلة رياضية |
| 98 | <video> | يُستخدم هذا الوسم عندما نريد إضافة فيديو داخل الموقع. |
| 99 | <wbr> | يُستخدم هذا الوسم عندما تكون الكلمة طويلة جدا ونخشى ان هذه الكلمة تخترق المساحة التي بداخلها |
| 100 | <--...--!> | هذا الوسم يستخدم لكتابة شرح للكود داخل الملف ولكن لا يظهر لزائر الصفحة |
| 101 | <!DOCTYPE html> | هذا ليس وسم html وانما هو معلومة للمتصفح عندما يقوم بقراءة الاكواد لكي يَعلم ان الاكواد التالية هي اكواد خاصة بلغة html |
و لتحميل الملف كاملاً في صورة ملف PDF يرجي الضغط هنااااااا
أكواد باللغة الإنجليزية
تبدأ أكواد HTML بالوسم <html>، وتنتهى بالوسم</html>
يقوم متصفح الوب بترجمة السطور البرمجيّة بلغة HTML إلى محتوى مرئي سهل القراءة لزوار الموقع.
| Tag | Description |
|---|---|
| <!–…–> | Defines a comment |
| <!DOCTYPE> | Defines the document type |
| <a> | Defines a hyperlink |
| <abbr> | Defines an abbreviation or an acronym |
| <acronym> | Not supported in HTML5. Use <abbr> instead. Defines an acronym |
| <address> | Defines contact information for the author/owner of a document |
| <applet> | Not supported in HTML5. Use <embed> or <object> instead. Defines an embedded applet |
| <area> | Defines an area inside an image-map |
| <article> | Defines an article |
| <aside> | Defines content aside from the page content |
| <audio> | Defines sound content |
| <b> | Defines bold text |
| <base> | Specifies the base URL/target for all relative URLs in a document |
| <basefont> | Not supported in HTML5. Use CSS instead. Specifies a default color, size, and font for all text in a document |
| <bdi> | Isolates a part of text that might be formatted in a different direction from other text outside it |
| <bdo> | Overrides the current text direction |
| <big> | Not supported in HTML5. Use CSS instead. Defines big text |
| <blockquote> | Defines a section that is quoted from another source |
| <body> | Defines the document’s body |
| <br> | Defines a single line break |
| <button> | Defines a clickable button |
| <canvas> | Used to draw graphics, on the fly, via scripting (usually JavaScript) |
| <caption> | Defines a table caption |
| <center> | Not supported in HTML5. Use CSS instead. Defines centered text |
| <cite> | Defines the title of a work |
| <code> | Defines a piece of computer code |
| <col> | Specifies column properties for each column within a <colgroup> element |
| <colgroup> | Specifies a group of one or more columns in a table for formatting |
| <data> | Links the given content with a machine-readable translation |
| <datalist> | Specifies a list of pre-defined options for input controls |
| <dd> | Defines a description/value of a term in a description list |
| <del> | Defines text that has been deleted from a document |
| <details> | Defines additional details that the user can view or hide |
| <dfn> | Represents the defining instance of a term |
| <dialog> | Defines a dialog box or window |
| <dir> | Not supported in HTML5. Use <ul> instead. Defines a directory list |
| <div> | Defines a section in a document |
| <dl> | Defines a description list |
| <dt> | Defines a term/name in a description list |
| <em> | Defines emphasized text |
| <embed> | Defines a container for an external (non-HTML) application |
| <fieldset> | Groups related elements in a form |
| <figcaption> | Defines a caption for a <figure> element |
| <figure> | Specifies self-contained content |
| <font> | Not supported in HTML5. Use CSS instead. Defines font, color, and size for text |
| <footer> | Defines a footer for a document or section |
| <form> | Defines an HTML form for user input |
| <frame> | Not supported in HTML5. Defines a window (a frame) in a frameset |
| <frameset> | Not supported in HTML5. Defines a set of frames |
| <h1> to <h6> | Defines HTML headings |
| <head> | Defines information about the document |
| <header> | Defines a header for a document or section |
| <hr> | Defines a thematic change in the content |
| <html> | Defines the root of an HTML document |
| <i> | Defines a part of text in an alternate voice or mood |
| <iframe> | Defines an inline frame |
| <img> | Defines an image |
| <input> | Defines an input control |
| <ins> | Defines a text that has been inserted into a document |
| <kbd> | Defines keyboard input |
| <label> | Defines a label for an <input> element |
| <legend> | Defines a caption for a <fieldset> element |
| <li> | Defines a list item |
| <link> | Defines the relationship between a document and an external resource (most used to link to style sheets) |
| <main> | Specifies the main content of a document |
| <map> | Defines a client-side image-map |
| <mark> | Defines marked/highlighted text |
| <meta> | Defines metadata about an HTML document |
| <meter> | Defines a scalar measurement within a known range (a gauge) |
| <nav> | Defines navigation links |
| <noframes> | Not supported in HTML5. Defines an alternate content for users that do not support frames |
| <noscript> | Defines an alternate content for users that do not support client-side scripts |
| <object> | Defines an embedded object |
| <ol> | Defines an ordered list |
| <optgroup> | Defines a group of related options in a drop-down list |
| <option> | Defines an option in a drop-down list |
| <output> | Defines the result of a calculation |
| <p> | Defines a paragraph |
| <param> | Defines a parameter for an object |
| <picture> | Defines a container for multiple image resources |
| <pre> | Defines preformatted text |
| <progress> | Represents the progress of a task |
| <q> | Defines a short quotation |
| <rp> | Defines what to show in browsers that do not support ruby annotations |
| <rt> | Defines an explanation/pronunciation of characters (for East Asian typography) |
| <ruby> | Defines a ruby annotation (for East Asian typography) |
| <s> | Defines text that is no longer correct |
| <samp> | Defines sample output from a computer program |
| <script> | Defines a client-side script |
| <section> | Defines a section in a document |
| <select> | Defines a drop-down list |
| <small> | Defines smaller text |
| <source> | Defines multiple media resources for media elements (<video> and <audio>) |
| <span> | Defines a section in a document |
| <strike> | Not supported in HTML5. Use <del> or <s> instead. Defines strikethrough text |
| <strong> | Defines important text |
| <style> | Defines style information for a document |
| <sub> | Defines subscripted text |
| <summary> | Defines a visible heading for a <details> element |
| <sup> | Defines superscripted text |
| <svg> | Defines a container for SVG graphics |
| <table> | Defines a table |
| <tbody> | Groups the body content in a table |
| <td> | Defines a cell in a table |
| <template> | Defines a template |
| <textarea> | Defines a multiline input control (text area) |
| <tfoot> | Groups the footer content in a table |
| <th> | Defines a header cell in a table |
| <thead> | Groups the header content in a table |
| <time> | Defines a date/time |
| <title> | Defines a title for the document |
| <tr> | Defines a row in a table |
| <track> | Defines text tracks for media elements (<video> and <audio>) |
| <tt> | Not supported in HTML5. Use CSS instead. Defines teletype text |
| <u> | Defines text that should be stylistically different from normal text |
| <ul> | Defines an unordered list |
| <var> | Defines a variable |
| <video> | Defines a video or movie |
| <wbr> | Defines a possible line-break |
html الوسوم وشرحها
| العنصر | وصف العنصر |
|---|---|
| <!–…–> | تعريف للتعليقات |
| <!DOCTYPE> | تعريف نوع الوثيقه |
| <a> | تعريف رابط |
| <abbr> | Defines an abbreviation or an acronym |
| <address> | Defines contact information for the author/owner of a document |
| <area> | Defines an area inside an image-map |
| <article> | تعريف مقال |
| <aside> | Defines content aside from the page content |
| <audio> | تعريف صوت |
| <b> | تعريف نص سميك |
| <base> | Specifies the base URL/target for all relative URLs in a document |
| <bdi> | Isolates a part of text that might be formatted in a different direction from other text outside it |
| <bdo> | Overrides the current text direction |
| <blockquote> | Defines a section that is quoted from another source |
| <body> | تعريف محتوي ال html الذي يظهر للمتصفحين |
| <br> | تعريف سطر جديد |
| <button> | تعريف زر |
| <canvas> | Used to draw graphics, on the fly, via scripting (usually JavaScript) |
| <caption> | Defines a table caption |
| <cite> | Defines the title of a work |
| <code> | Defines a piece of computer code |
| <col> | Specifies column properties for each column within a <colgroup> element |
| <colgroup> | Specifies a group of one or more columns in a table for formatting |
| <datalist> | Specifies a list of pre-defined options for input controls |
| <dd> | Defines a description/value of a term in a description list |
| <del> | Defines text that has been deleted from a document |
| <details> | Defines additional details that the user can view or hide |
| <dfn> | Represents the defining instance of a term |
| <dialog> | Defines a dialog box or window |
| <div> | تعريف جزء من وثيقه |
| <dl> | تعريف وصف للقائمه |
| <dt> | Defines a term/name in a description list |
| <em> | Defines emphasized text |
| <embed> | Defines a container for an external (non-HTML) application |
| <fieldset> | Groups related elements in a form |
| <figcaption> | Defines a caption for a <figure> element |
| <figure> | Specifies self-contained content |
| <footer> | تعريف نهاية الموقع |
| <form> | تعريف فورم لادخال بيانات من المستخدمين |
| <h1> to <h6> | تعريف العنواين |
| <head> | تعريف معلومات عن الوثيقه وتضمين ملفات |
| <header> | Defines a header for a document or section |
| <hr> | تعريف فاصل بين السطور |
| <html> | تعريف العنصر الاساسي للوثيقه |
| <i> | Defines a part of text in an alternate voice or mood |
| <iframe> | Defines an inline frame |
| <img> | تعريف صوره |
| <input> | تعريف صندوق ادخال بيانات |
| <ins> | Defines a text that has been inserted into a document |
| <kbd> | Defines keyboard input |
| <label> | تعريف وصف لعنصر <input> |
| <legend> | Defines a caption for a <fieldset> element |
| <li> | Defines a list item |
| <link> | Defines the relationship between a document and an external resource (most used to link to style sheets) |
| <main> | Specifies the main content of a document |
| <map> | Defines a client-side image-map |
| <mark> | Defines marked/highlighted text |
| <menu> | Defines a list/menu of commands |
| <menuitem> | Defines a command/menu item that the user can invoke from a popup menu |
| <meta> | Defines metadata about an HTML document |
| <meter> | Defines a scalar measurement within a known range (a gauge) |
| <nav> | Defines navigation links |
| <noscript> | Defines an alternate content for users that do not support client-side scripts |
| <object> | Defines an embedded object |
| <ol> | Defines an ordered list |
| <optgroup> | Defines a group of related options in a drop-down list |
| <option> | Defines an option in a drop-down list |
| <output> | Defines the result of a calculation |
| <p> | Defines a paragraph |
| <param> | Defines a parameter for an object |
| <picture> | Defines a container for multiple image resources |
| <pre> | Defines preformatted text |
| <progress> | Represents the progress of a task |
| <q> | Defines a short quotation |
| <rp> | Defines what to show in browsers that do not support ruby annotations |
| <rt> | Defines an explanation/pronunciation of characters (for East Asian typography) |
| <ruby> | Defines a ruby annotation (for East Asian typography) |
| <s> | Defines text that is no longer correct |
| <samp> | Defines sample output from a computer program |
| <script> | Defines a client-side script |
| <section> | Defines a section in a document |
| <select> | Defines a drop-down list |
| <small> | تعريف خط صغير |
| <source> | Defines multiple media resources for media elements (<video> and <audio>) |
| <span> | تعريف قسم في العنصر |
| <strong> | Defines important text |
| <style> | Defines style information for a document |
| <sub> | Defines subscripted text |
| <summary> | Defines a visible heading for a <details> element |
| <sup> | Defines superscripted text |
| <table> | Defines a table |
| <tbody> | Groups the body content in a table |
| <td> | Defines a cell in a table |
| <textarea> | Defines a multiline input control (text area) |
| <tfoot> | Groups the footer content in a table |
| <th> | Defines a header cell in a table |
| <thead> | Groups the header content in a table |
| <time> | تعريف تاريخ او وقت |
| <title> | تعريف عنوان الصفحه |
| <tr> | Defines a row in a table |
| <track> | Defines text tracks for media elements (<video> and <audio>) |
| <u> | Defines text that should be stylistically different from normal text |
| <ul> | Defines an unordered list |
| <var> | Defines a variable |
| <video> | تعريف فيديو او فيلم |
| <wbr> | Defines a possible line-break |
HTML commands and their functions, Explain all html commands in Arabic pdf, all html commands, html codes for beginners, All HTML commands have a beginning and an end. html properties, html explanation, html code ready to copy, HTML commands and their functions .. and all their important codes, ready and professional html codes, all html tags with explanation, html code ready for beginners more than 100 code ready, Explain HTML and CSS and how to use them and modify their code completely, What does the acronym HTML stand for and what does it mean, Introduction to HTML , What is HTML?, html commands and their functions, Explain all html commands in Arabic pdf, all html commands, html codes for beginners, All HTML commands have a beginning and an end. html properties, Load Metrics (uses 29 credits), keyword, 100 html tags, 100 html projects, 100 html interview questions, 100 html tags and uses, 100 html code, 100 html tags and their functions, 100 html colors, 100 html, 100 html website, width 100 html, drop down list 1 to 100 html, table width 100 html, top 100 html interview questions, height 100 html, image width 100 html, w-100 html, image 100 html, img width 100 html, div width 100 html, 1000 projects in html, ✔ html, ❮ means in html, 100vh html, ❮ html, 100 days of code html, ❯ html, 100 days of code html css, ✖ html, 100vw html.
تعريف HTML
إن html هي لغة من لغات البرمجة حيث أنها تستخدم لإنشاء صفحات مواقع الإنترنت والتي تُعرض عن طريق أحد برامج مستعرضات الإنترنت، ولكن يجدر بنا التنويه أنها ليست لغة برمجية بالمعنى والشكل المتعارفين عليه في لغات البرمجة الأخرى مثل لغة C، فلها نمطها الخاص حيث أنها لا تحتوي على جمل الدوران وجمل التحكم، ويجب وضعها في حال اضطرارية استخدام هذه الجمل في شيفرات من لغات أخرى مثل java ،javaScript ،C.
تتميز لغة HTML بأنها لا تحتاج إلى مترجم خاص يتضمن Compiler، لهذا فهي تعتبر لغة برمجية سهلة الفهم والتنفيذ، ولأنها لا تتطلب معرفة سابقة بلغات البرمجة، فمن متطلباتها فقط التفكير المنطقي بالإضافة إلى ترتيب الأفكار، وإن كلمة HTML هي اختصار لــ Language Markup Text Hyper.[1]
أوامر وأكواد HTML مع الشرح
إن الأمر <html> يكتب في بداية الكود حتى يشير إلى أن المستند مكتوباً بلغة html وإن كود هذه اللغة البرمجية يقسم إلى قسمين هما:
head : وهو المنطقة المخصصة لكتابة معلومات المتصفح حول الصفحة مثل عنوان الصفحة.
body : وهو المنقطة المخصصة لكتابة المحتوى الذي سيكون داخل الصفحة.
وإن أكواد لغة HTML هي:
<DOCTYPE!> يحدد هذا الوسم نوع المستند.
<html> ويتم وضعه في بداية الملف لأنه يدل على اللغة البرمجية المستخدمة.
<head> وهو كود خاص برأس الصفحة حيث أنه يتضمن عنوان الموقع الذي سيظهر في تبويب الموقع، بالإضافة إلى أنه يحتوي على المعلومات الإضافة للصفحة مثل الكلمات المفتاحية وغيرها من الأمور التي لا تكون متضمنة ضمن المحتوى.
<title> وهو الكود المستخدم لتنسيق وكتابة عنوان نافذة الصحفة.
<body> وهو الوسم الذي يحتوي على كل مكونات الموقع، فيعتبر جسم الموقع، ويكتب فيه ما يلي:
bhcolor=”ffff00″ أو bgcolor=yellow ويستخدم لتحديد لون الصفحة لهذا يجب كتابته بالشكل التالي: <“body bgcolor=”ffff00>.
background=”نكتب اسم الصور ة أو امتداد لها”، ويعمل في تحديد صورة خلفية للصفحة ويجب كتابته بالشكل التالي مع العلم أن ما بين قوسين يتغير حسب اسم الصورة<body background=”image.jpg”.
<A> وسم خاص بالارتباط التشعبي النصي مثل <a href=”https://pythagorasngm.blogspot.com”>تفضل بزيارة موقع فيثاغورس في الرياضيات</a>.
<abbr> يعمل على تعريف الاختصار.
قد يعجبك ايضا
<address> هذا الوسم وظيفته تعريف العنوان.
<area> يعمل على تحديد منطقة محددة في الصورة.
<article> وهو وسم خاص بالمقالات.
<base> وظيفته تثبيت رابط نصي لجميع العناصر الموجودة في الصفحة.
<b> وسم لتغيير الخط وجعله سميكاً.
<br> وسم بداية سطر جديد.
<u> وهو الوسم الذي يختص بالكتابة ويضع خط تحتها.
<i> وهو الوسم الذي يجعل الخط مائلاً.
<button> وهو الوسم الخاص لإضافة زر.
<h1> وهو الوسم الخاص بترويسة العنوان الرئيسي.
<h6> وهو الوسم الخاص بترويسة العنوان الفرعي.
<bdo> يعمل على تحديد اتجاه النص.
<big> يعمل على التحكم في حجم النص وجعله أكبر.
<blockquote> يقوم هذا الوسم بتحديد اقتباس.
<caption> يعمل على شرح مجموعة من العناصر في نموذج مخصص ويتم كتابته بعد <table> ويختص بإضافة عنوان رئيسي للصفحة. .
<center> يقوم هذا الوسم بتوسيط العناصر.
<textarea> وهو الوسم الذي يقوم بعمل منطقة كتابة نص مع تحديد المسافة والمساحة.
<sub>يستخدم لجعل الكلمة أسفل السطر.
<sup> يستخدم لجعل الكلمة أعلى السطر.
<span> يعمل هذا الوسم على تنسيق كلمات داخل فقرة كاملة كتغيير اللون أو تغيير نوع الخط، بالإضافة إلى العمل على تنسيق الفقرة بأكملها ولكن تريد أن تستثني مقطع أو كلمة معينة.
<small> يعمل على كتابة النص بحجم صغير.
<s> يعمل هذا الوسم عندما نريد أن نشطب كلمة.
<q> يعمل هذا الوسم على وضع وتحديد علامات تنصيص حول الفقرة.
<pre> يعمل على وضع النص المكتوب بحجم ومسافات ثابتة، بالإضافة إلى أنه يعمل المسافات بواسطة استخدام المسطرة وعمل الفواصل.
<font> يستخدم مع النصوص ويتحكم في خصائص الخط بالإضافة إلى أنه يقوم بتلوينه.
<center> يعمل على توسيط الفقرات بشكل عام في الصفحة.
<Hn> يستخدم هذا الوسم لتمييز العناوين، بالإضافة إلى العمل على تصغير النص المتواجد بداخله.
<ol> يعمل على إضافة قوائم متسلسلة تعداد رقمي أو تعداد حرفي.
<UL> يعمل على إضافة قوائم غير متسلسلة أي تعداد نقطي.
<marquee> يعمل على تحريك النص أو الصور ونستطيع أن نضيف داخل هذا الوسم مايلي:
bgcolor=red لتحديد لون خلفية النص أو لون خلفية الصورة المتحركة.
width=”180″ يعمل على تحديد عرض مجال تحريك الصورة أو تحريك النص.
Height=”180″ يعمل على تحديد طول مجال تحريك لصورة أو النص.
align=”left” لتحديد المحاذاة العامودية للنص وممكن أن تكون لليسار أو لليمين أو في الوسط.
“vspace=”20 تحدد المسافة العامودية التي تفصل بين النص والحافة العليا والسفلى.
“Hspace=”20 يعمل على تحديد المسافة الأفقية التي ت فصل بين النص والحافة العليا والحافة السفلى.
“bahavior= “slide يحدد سلوك النص أو الصورة من جانب إلى آخر.
<table> وهو وسم أو كود تعريف الجداول وفيه نستطيع أن نكتب بعض التعليمات التي تتحكم في الإطار وعرض الجدول بالإضافة إلى طوله وتحديد المسافات ما بين خلاياه.
<td> وهذا الوسم وظيفته تعريف الخلية في الجدول.
<th> تكتب بعد <table> وهو مختص بإضافة عنوان رئيسي للصفحة.
<FORM> وهو وسم رئيسي وأساسي لأنه يعمل على إضافة النماذج.[2]