ملخص البدء في لغة Html دليل مختصر في لغة Html ليساعدك على البدء في مسار تطوير المواقع
الفصل الأول ما هي لغة Html؟ تعرف على لغة Html وكيفية ربط اللغات الأخرى بها.
ما هي لغة Html؟ هي اللغة الأساسية في إنشاء صفحات الويب.
إنشاء الملف قم بإنشاء ملف مع اللاحقة html
قم بكتابة <DOCTYPE html!> لتحديد إصدار Html5
تتكون الصفحة من قسمين رئيسيين body & head
إن ال <body> هو العنصر الذي نكتب داخله العناصر التي تظهر للمستخدم في الصفحة.
أما ال <head> فيحتوي على بعض إعدادات الصفحة وسنتناول الحديث عنه في هذا الفصل.
أقسام الكود < " html lang=" en > عنصر / Element
خاصية / Attribute
قيمة / Value
* انتبه لاستخدام الألوان فهي ثابتة على مدار الكتاب
كتابة التعليقات تستخدم التعليقات لشرح موضوع ما أثناء كتابة الكود حتى
نبتعد عن الحيرة في سبب كتابة كل سطر.
لكتابة تعليق بلغة Html نقوم بكتابة <-- --!> ونكتب التعليق داخلهما كما في المثال :
<-- This is a comment --!>
عنصر <meta/> نبدأ الحديث عن عناصر ال head بعنصر meta تقوم ال meta tags بضبط الإعدادات التعريفية للصفحة ومن أهمها :
html auto — arduino bash c cpp csharp css diff go graphql ini java javascript json kotlin less lua makefile markdown objectivec perl php php-template plaintext python python-repl r ruby rust scss shell sql swift typescript vbnet wasm xml yaml 1c abnf accesslog actionscript ada angelscript apache applescript arcade armasm asciidoc aspectj autohotkey autoit avrasm awk axapta basic bnf brainfuck cal capnproto ceylon clean clojure clojure-repl cmake coffeescript coq cos crmsh crystal csp d dart delphi django dns dockerfile dos dsconfig dts dust ebnf elixir elm erb erlang erlang-repl excel fix flix fortran fsharp gams gauss gcode gherkin glsl gml golo gradle groovy haml handlebars haskell haxe hsp http hy inform7 irpf90 isbl jboss-cli julia julia-repl lasso latex ldif leaf lisp livecodeserver livescript llvm lsl mathematica matlab maxima mel mercury mipsasm mizar mojolicious monkey moonscript n1ql nestedtext nginx nim nix node-repl nsis ocaml openscad oxygene parser3 pf pgsql pony powershell processing profile prolog properties protobuf puppet purebasic q qml reasonml rib roboconf routeros rsl ruleslanguage sas scala scheme scilab smali smalltalk sml sqf stan stata step21 stylus subunit taggerscript tap tcl thrift tp twig vala vbscript vbscript-html verilog vhdl vim wren x86asm xl xquery zephir html js ts < meta charset = ”UTF-8”/ >
< meta name = ”description” content = ”my page ” />
< meta name = ”viewport” content = ”width = devicewidth, initial-scale = 1” >
<style></style> يستخدم هذا العنصر لتنسيق الصفحة بلغة css كما ويوجد طرق أخرى للتنسيق :
html auto — arduino bash c cpp csharp css diff go graphql ini java javascript json kotlin less lua makefile markdown objectivec perl php php-template plaintext python python-repl r ruby rust scss shell sql swift typescript vbnet wasm xml yaml 1c abnf accesslog actionscript ada angelscript apache applescript arcade armasm asciidoc aspectj autohotkey autoit avrasm awk axapta basic bnf brainfuck cal capnproto ceylon clean clojure clojure-repl cmake coffeescript coq cos crmsh crystal csp d dart delphi django dns dockerfile dos dsconfig dts dust ebnf elixir elm erb erlang erlang-repl excel fix flix fortran fsharp gams gauss gcode gherkin glsl gml golo gradle groovy haml handlebars haskell haxe hsp http hy inform7 irpf90 isbl jboss-cli julia julia-repl lasso latex ldif leaf lisp livecodeserver livescript llvm lsl mathematica matlab maxima mel mercury mipsasm mizar mojolicious monkey moonscript n1ql nestedtext nginx nim nix node-repl nsis ocaml openscad oxygene parser3 pf pgsql pony powershell processing profile prolog properties protobuf puppet purebasic q qml reasonml rib roboconf routeros rsl ruleslanguage sas scala scheme scilab smali smalltalk sml sqf stan stata step21 stylus subunit taggerscript tap tcl thrift tp twig vala vbscript vbscript-html verilog vhdl vim wren x86asm xl xquery zephir html js ts < style > p { color : red} </ style >
< link rel = ”stylesheet” href = ”./style.css” />
< p style = ”color: red ”> </ p >
<script></script> يستخدم هذا العنصر لكتابة برمجة الصفحة بلغة Javascript أو لاستدعاء ملف خارجي :
html auto — arduino bash c cpp csharp css diff go graphql ini java javascript json kotlin less lua makefile markdown objectivec perl php php-template plaintext python python-repl r ruby rust scss shell sql swift typescript vbnet wasm xml yaml 1c abnf accesslog actionscript ada angelscript apache applescript arcade armasm asciidoc aspectj autohotkey autoit avrasm awk axapta basic bnf brainfuck cal capnproto ceylon clean clojure clojure-repl cmake coffeescript coq cos crmsh crystal csp d dart delphi django dns dockerfile dos dsconfig dts dust ebnf elixir elm erb erlang erlang-repl excel fix flix fortran fsharp gams gauss gcode gherkin glsl gml golo gradle groovy haml handlebars haskell haxe hsp http hy inform7 irpf90 isbl jboss-cli julia julia-repl lasso latex ldif leaf lisp livecodeserver livescript llvm lsl mathematica matlab maxima mel mercury mipsasm mizar mojolicious monkey moonscript n1ql nestedtext nginx nim nix node-repl nsis ocaml openscad oxygene parser3 pf pgsql pony powershell processing profile prolog properties protobuf puppet purebasic q qml reasonml rib roboconf routeros rsl ruleslanguage sas scala scheme scilab smali smalltalk sml sqf stan stata step21 stylus subunit taggerscript tap tcl thrift tp twig vala vbscript vbscript-html verilog vhdl vim wren x86asm xl xquery zephir html js ts < script >
</ script >
< script src = ”./main.js” > </ script >
عناصر أخرى داخل ال head html auto — arduino bash c cpp csharp css diff go graphql ini java javascript json kotlin less lua makefile markdown objectivec perl php php-template plaintext python python-repl r ruby rust scss shell sql swift typescript vbnet wasm xml yaml 1c abnf accesslog actionscript ada angelscript apache applescript arcade armasm asciidoc aspectj autohotkey autoit avrasm awk axapta basic bnf brainfuck cal capnproto ceylon clean clojure clojure-repl cmake coffeescript coq cos crmsh crystal csp d dart delphi django dns dockerfile dos dsconfig dts dust ebnf elixir elm erb erlang erlang-repl excel fix flix fortran fsharp gams gauss gcode gherkin glsl gml golo gradle groovy haml handlebars haskell haxe hsp http hy inform7 irpf90 isbl jboss-cli julia julia-repl lasso latex ldif leaf lisp livecodeserver livescript llvm lsl mathematica matlab maxima mel mercury mipsasm mizar mojolicious monkey moonscript n1ql nestedtext nginx nim nix node-repl nsis ocaml openscad oxygene parser3 pf pgsql pony powershell processing profile prolog properties protobuf puppet purebasic q qml reasonml rib roboconf routeros rsl ruleslanguage sas scala scheme scilab smali smalltalk sml sqf stan stata step21 stylus subunit taggerscript tap tcl thrift tp twig vala vbscript vbscript-html verilog vhdl vim wren x86asm xl xquery zephir html js ts
< title > عنوان الصفحة </ title >
< link rel = ”icon” src = ”./icon.png” >
الفصل الثاني عناصر تشرح نفسها Html Semantics نتحدث في هذا الفصل عن ال Semantic Elements في لغة Html وكيف يجب عليك توظيفها
ما هي ال Semantic elements ؟ هي عناصر يكون اسمها معبراً عن معناها ووظيفتها.
أغلب هذه العناصر تظهر بنفس الشكل للمستخدم ومع هذا
فإن عليك استخدامها بالشكل الصحيح للأسباب التالية :
div & p يستخدم العنصر <div> كحاوي لعناصر أخرى وهو عنصر block أي أنه يأخذ كامل السطر. لا يعتبر من ال Semantic elements ولكنه مستخدم جداً وستجد لاحقاً فائدة استخدام ال Semantics عوضاً عنه.
يستخدم العنصر <p> لكتابة فقرة نصية وهو لا يمكن أن يحوي داخله أي عنصر block.
ال Semantics واستخداماتها يستخدم لرأس الصفحة
<header>
شريط التنقل
<nav>
المنطقة السفلية للصفحة
<footer>
مقال مستقل الفكرة
<article>
قسم جانبي مستقل المحتوى
<aside>
حاوية مجموعة عناوين
<hgroup>
لتحديد قسم من العنصر الأب
<section>
لتحديد القسم الرئيسي من
العنصر الأب
<main>
حاوي لصورة ووصفها
<figure>
وصف الصورة داخل العنصر
السابق
<figcaption>
محتوى مخفي يظهر عند
الضغط عليه
<details>
عنصر ابن يحدد عنوان
العنصر السابق
<summary>
الفرق الذي يحدثه استخدام ال Semantics، حيث أن استخدام عنصر يعبر عن مكانه ومحتواه يجعل موقعك مفهوماً لكل من المبرمجين ومحركات البحث.
مصدر الصورة
الفصل الثالث صياغة النصوص في Html تعرف على الطرق المختلفة لتشكيل وصياغة النصوص في لغة Html
الصيغ النصية تحوي لغة Html على عناصر مسؤولة عن إظهار نص ما بطريقة محددة حيث أن كل ما عليك هو كتابة النص المطلوب ضمن العنصر.
عناصر الصيغ النصية تستخدم لعناوين الصفحة
<h1> to <h6>
لفصل جزء من النص
(لتنسيق مختلف مثلاً)
<span>
خط عريض
<b>, <strong>
خط مائل
<i>, <em>
كلام تحته خط
<ins>, <u>
كلام مشطوب
<del>, <strike>
كلام صغير
<small>
كلام معلم
<mark>
للكتابة بالأس
<sup>
للكتابة الترميزية
<sub>
"اقتباس سطري"
<q>
اقتباس طويل من أكثر من سطر
<blockqoute>
يستخدم لكتابة كود
<code>
يحافظ هذا العنصر على
المسافات البيضاء
كالفراغات والأسطر
<pre>
يستخدم لإحاطة كلمة بلغة
مختلفة عن الفقرة التي تحويها
<bdi>
</wbr> استخدم هذا العنصر لإخبار المتصفح عن المكان الذي تفضل أن يتم كسر كلمة طويلة منه إلى السطر التالي (حيث أن الكلمة الواحدة هي كل سلسلة لا تحوي فراغات كالروابط).
بفرض أن لدينا رابط طويل جداً، عندئذ يمكننا أن نخبر المتصفح أن يقوم بكسر الرابط (بعد النطاق الرئيسي على سبيل المثال) عوضاً أن يتم كسره في مكان عشوائي.
الروابط من العناصر الأساسية في اللغة هو الرابط <a>
يستخدم كما نعرف لربط صفحات الانترنت ببعضها.
نكتب داخل العنصر نص الرابط ويجب أن يكون معبراً عن المكان الذي يذهب إليه، ثم نكتب عنوان الرابط في اللاحقة href كما في الشكل :
html auto — arduino bash c cpp csharp css diff go graphql ini java javascript json kotlin less lua makefile markdown objectivec perl php php-template plaintext python python-repl r ruby rust scss shell sql swift typescript vbnet wasm xml yaml 1c abnf accesslog actionscript ada angelscript apache applescript arcade armasm asciidoc aspectj autohotkey autoit avrasm awk axapta basic bnf brainfuck cal capnproto ceylon clean clojure clojure-repl cmake coffeescript coq cos crmsh crystal csp d dart delphi django dns dockerfile dos dsconfig dts dust ebnf elixir elm erb erlang erlang-repl excel fix flix fortran fsharp gams gauss gcode gherkin glsl gml golo gradle groovy haml handlebars haskell haxe hsp http hy inform7 irpf90 isbl jboss-cli julia julia-repl lasso latex ldif leaf lisp livecodeserver livescript llvm lsl mathematica matlab maxima mel mercury mipsasm mizar mojolicious monkey moonscript n1ql nestedtext nginx nim nix node-repl nsis ocaml openscad oxygene parser3 pf pgsql pony powershell processing profile prolog properties protobuf puppet purebasic q qml reasonml rib roboconf routeros rsl ruleslanguage sas scala scheme scilab smali smalltalk sml sqf stan stata step21 stylus subunit taggerscript tap tcl thrift tp twig vala vbscript vbscript-html verilog vhdl vim wren x86asm xl xquery zephir html js ts < a href = ”https://www.google.com” >
Link to google
</ a >
يملك العنصر <a> لاحقة أخرى وهي target التي تحدد مكان فتح الرابط المضغوط. وهذه هي القيم التي تأخذها :
لفتح الرابط في صفحة جديدة
blank_
لفتح الرابط في
الصفحة نفسها
self_
لفتح الرابط في النافذة الأم
parent_
لفتح الرابط في عنصر
<iframe> محدد
frameName
* سنلقي نظرة في المستقبل على عنصر <iframe>
الفصل الرابع الوسائط المتعددة في Html الصور، الفيديوهات والصوتيات. تعلم كيف تتعامل مع هذه العناصر في لغة Html
الوسائط المتعددة إن الوسائط المتعددة هي العناصر المسؤولة عن عرض الصور، مقاطع الفيديو والصوتيات في الصفحة.
الصور العنصر المسؤول عن عرض الصور في الصفحة هو العنصر </ img> يلحق به ال attributes التالية:
لتحديد مصدر الصورة
src
لعرض نص بديل في حال
فشل تحميل الصورة
alt
لتحديد متى يتم تحميل
الصورة. تأخذ القيمة eager
للتحميل مع تحميل الصفحة
أو lazy لتحميل الصورة
عند المرور بها
loading
الفيديو العنصر المسؤول عن عرض الصور في الصفحة هو العنصر <video></video> يلحق به ال attributes التالية:
تشغيل الفيديو تلقائياً
عند فتح الصفحة
autoplay
إضافة أزرار التحكم بالفيديو
controls
لتكرار المقطع عند انتهائه
loop
لتشغيل المقطع بدون صوت
muted
لتعيين صورة غلاف الفيديو
poster
الصوتيات العنصر المسؤول عن عرض الصور في الصفحة هو العنصر <audio></audio> يلحق به ال attributes التالية:
تشغيل المقطع تلقائياً
عند فتح الصفحة
autoplay
إضافة أزرار التحكم المقطع
controls
لتكرار المقطع عند انتهائه
loop
لتشغيل المقطع بدون صوت
muted
</source> في كل من عنصري الفيديو والصوت يمكن أن تستخدم src لتحديد المسار المطلوب للملف أو يمكنك استخدام هذا العنصر داخلهما لتحديد نوع ومصدر الفيديو أو الصوت المطلوب. يلحق به ال attributes التالية :
لتحديد مسار الفيديو أو الصوت
src
لتعيين نوع الملف ولاحقته
(video/mp4 )
type
ماذا تعلمت؟ html auto — arduino bash c cpp csharp css diff go graphql ini java javascript json kotlin less lua makefile markdown objectivec perl php php-template plaintext python python-repl r ruby rust scss shell sql swift typescript vbnet wasm xml yaml 1c abnf accesslog actionscript ada angelscript apache applescript arcade armasm asciidoc aspectj autohotkey autoit avrasm awk axapta basic bnf brainfuck cal capnproto ceylon clean clojure clojure-repl cmake coffeescript coq cos crmsh crystal csp d dart delphi django dns dockerfile dos dsconfig dts dust ebnf elixir elm erb erlang erlang-repl excel fix flix fortran fsharp gams gauss gcode gherkin glsl gml golo gradle groovy haml handlebars haskell haxe hsp http hy inform7 irpf90 isbl jboss-cli julia julia-repl lasso latex ldif leaf lisp livecodeserver livescript llvm lsl mathematica matlab maxima mel mercury mipsasm mizar mojolicious monkey moonscript n1ql nestedtext nginx nim nix node-repl nsis ocaml openscad oxygene parser3 pf pgsql pony powershell processing profile prolog properties protobuf puppet purebasic q qml reasonml rib roboconf routeros rsl ruleslanguage sas scala scheme scilab smali smalltalk sml sqf stan stata step21 stylus subunit taggerscript tap tcl thrift tp twig vala vbscript vbscript-html verilog vhdl vim wren x86asm xl xquery zephir html js ts < body >
< img src = ”./images/logo.png” alt = ”my logo ”>
< video controls loop muted poster = ”./poster.jpg” >
< source src = ”./vid1.mp4” type = ”video/mp4” />
</ video >
< audio controls loop >
< source src = ”./aud1.mp3” type = ”audio/mp3” />
</ audio >
</ body >
الفصل الخامس الجداول والقوائم تعلم كيف ترتيب المحتوى المكتوب من خلال الجداول والقوائم المرتبة وغير المرتبة
الجداول والقوائم من العناصر المهمة في ترتيب المحتوى والمعلومات بطريقة منظمة في الصفحة.
عناصر الجداول والقوائم هي عنوان هذه الحلقة.
<ul></ul> عنصر القوائم غير المرتبة، ويعني أن العناصر داخله ليست ذات ترتيب معين وتظهر بشكل بنود نقطية. يمثل العنصر <li> عنصر بند في القائمة. مثال على قائمة غير مرتبة :
html auto — arduino bash c cpp csharp css diff go graphql ini java javascript json kotlin less lua makefile markdown objectivec perl php php-template plaintext python python-repl r ruby rust scss shell sql swift typescript vbnet wasm xml yaml 1c abnf accesslog actionscript ada angelscript apache applescript arcade armasm asciidoc aspectj autohotkey autoit avrasm awk axapta basic bnf brainfuck cal capnproto ceylon clean clojure clojure-repl cmake coffeescript coq cos crmsh crystal csp d dart delphi django dns dockerfile dos dsconfig dts dust ebnf elixir elm erb erlang erlang-repl excel fix flix fortran fsharp gams gauss gcode gherkin glsl gml golo gradle groovy haml handlebars haskell haxe hsp http hy inform7 irpf90 isbl jboss-cli julia julia-repl lasso latex ldif leaf lisp livecodeserver livescript llvm lsl mathematica matlab maxima mel mercury mipsasm mizar mojolicious monkey moonscript n1ql nestedtext nginx nim nix node-repl nsis ocaml openscad oxygene parser3 pf pgsql pony powershell processing profile prolog properties protobuf puppet purebasic q qml reasonml rib roboconf routeros rsl ruleslanguage sas scala scheme scilab smali smalltalk sml sqf stan stata step21 stylus subunit taggerscript tap tcl thrift tp twig vala vbscript vbscript-html verilog vhdl vim wren x86asm xl xquery zephir html js ts < h3 >
Get from market
</ h3 >
< ul >
< li > Milk </ li >
< li > Eggs </ li >
< li > Cheese </ li >
</ ul >
<ol></ol> عنصر القوائم المرتبة، ويعني أن العناصر داخله ذات ترتيب معين وتظهر بشكل بنود مرقمة. يمثل العنصر <li> عنصر بند في القائمة. مثال على قائمة مرتبة :
html auto — arduino bash c cpp csharp css diff go graphql ini java javascript json kotlin less lua makefile markdown objectivec perl php php-template plaintext python python-repl r ruby rust scss shell sql swift typescript vbnet wasm xml yaml 1c abnf accesslog actionscript ada angelscript apache applescript arcade armasm asciidoc aspectj autohotkey autoit avrasm awk axapta basic bnf brainfuck cal capnproto ceylon clean clojure clojure-repl cmake coffeescript coq cos crmsh crystal csp d dart delphi django dns dockerfile dos dsconfig dts dust ebnf elixir elm erb erlang erlang-repl excel fix flix fortran fsharp gams gauss gcode gherkin glsl gml golo gradle groovy haml handlebars haskell haxe hsp http hy inform7 irpf90 isbl jboss-cli julia julia-repl lasso latex ldif leaf lisp livecodeserver livescript llvm lsl mathematica matlab maxima mel mercury mipsasm mizar mojolicious monkey moonscript n1ql nestedtext nginx nim nix node-repl nsis ocaml openscad oxygene parser3 pf pgsql pony powershell processing profile prolog properties protobuf puppet purebasic q qml reasonml rib roboconf routeros rsl ruleslanguage sas scala scheme scilab smali smalltalk sml sqf stan stata step21 stylus subunit taggerscript tap tcl thrift tp twig vala vbscript vbscript-html verilog vhdl vim wren x86asm xl xquery zephir html js ts < h3 >
Steps to create a google account
</ h3 >
< ol >
< li > Choose an email adress </ li >
< li > Choose a secure password </ li >
< li > Confirm your account </ li >
< ol >
<table></table> هو العنصر الذي يمثل الجدول، وهذا الجدول يحوي أسطر <tr> وكل سطر يحوي خانات <td> بحيث يحوي السطر الواحد خانة واحدة أو أكثر. مثال على جدول :
html auto — arduino bash c cpp csharp css diff go graphql ini java javascript json kotlin less lua makefile markdown objectivec perl php php-template plaintext python python-repl r ruby rust scss shell sql swift typescript vbnet wasm xml yaml 1c abnf accesslog actionscript ada angelscript apache applescript arcade armasm asciidoc aspectj autohotkey autoit avrasm awk axapta basic bnf brainfuck cal capnproto ceylon clean clojure clojure-repl cmake coffeescript coq cos crmsh crystal csp d dart delphi django dns dockerfile dos dsconfig dts dust ebnf elixir elm erb erlang erlang-repl excel fix flix fortran fsharp gams gauss gcode gherkin glsl gml golo gradle groovy haml handlebars haskell haxe hsp http hy inform7 irpf90 isbl jboss-cli julia julia-repl lasso latex ldif leaf lisp livecodeserver livescript llvm lsl mathematica matlab maxima mel mercury mipsasm mizar mojolicious monkey moonscript n1ql nestedtext nginx nim nix node-repl nsis ocaml openscad oxygene parser3 pf pgsql pony powershell processing profile prolog properties protobuf puppet purebasic q qml reasonml rib roboconf routeros rsl ruleslanguage sas scala scheme scilab smali smalltalk sml sqf stan stata step21 stylus subunit taggerscript tap tcl thrift tp twig vala vbscript vbscript-html verilog vhdl vim wren x86asm xl xquery zephir html js ts < table >
< tr >
< td > Hello </ td >
< td > مرحبا </ td >
</ tr >
< tr >
< td > Tea </ td >
< td > شاي </ td >
</ tr >
</ table >
يمكن أيضاً استخدام عناصر لتنظيم الجدول أكثر (شكلياً وكتابياً) ومنها:
للخلية الأولى من كل سطر
<th>
لوضع وصف للجدول
<caption>
لتوضيح الأقسام
المختلفة للجدول
<thead>
<tbody>
<tfoot>
لتمييز أعمدة الجدول
<col>, <colgroup>
الفصل السادس نماذج الإدخال في Html تعلم كل ما تحتاجه عن النماذج وعناصر الإدخال في لغة Html
الفورم عنصر <form> هو العنصر الذي يتعامل معه المستخدم لإدخال البيانات التي يتم معالجتها لأداء وظيفة معينة كتسجيل حساب جديد في الموقع حيث يتم إدخال المعلومات في حقول إدخال مخصصة تتبع للفورم.
يوضح المثال التالي طريقة كتابة عنصر الفورم وال attributes
الخاصة به:
html auto — arduino bash c cpp csharp css diff go graphql ini java javascript json kotlin less lua makefile markdown objectivec perl php php-template plaintext python python-repl r ruby rust scss shell sql swift typescript vbnet wasm xml yaml 1c abnf accesslog actionscript ada angelscript apache applescript arcade armasm asciidoc aspectj autohotkey autoit avrasm awk axapta basic bnf brainfuck cal capnproto ceylon clean clojure clojure-repl cmake coffeescript coq cos crmsh crystal csp d dart delphi django dns dockerfile dos dsconfig dts dust ebnf elixir elm erb erlang erlang-repl excel fix flix fortran fsharp gams gauss gcode gherkin glsl gml golo gradle groovy haml handlebars haskell haxe hsp http hy inform7 irpf90 isbl jboss-cli julia julia-repl lasso latex ldif leaf lisp livecodeserver livescript llvm lsl mathematica matlab maxima mel mercury mipsasm mizar mojolicious monkey moonscript n1ql nestedtext nginx nim nix node-repl nsis ocaml openscad oxygene parser3 pf pgsql pony powershell processing profile prolog properties protobuf puppet purebasic q qml reasonml rib roboconf routeros rsl ruleslanguage sas scala scheme scilab smali smalltalk sml sqf stan stata step21 stylus subunit taggerscript tap tcl thrift tp twig vala vbscript vbscript-html verilog vhdl vim wren x86asm xl xquery zephir html js ts < form name = ”myForm” method = ”post” action = ”./file.php” > </ form >
اسم الفورم والذي يستخدم
للإشارة إليه
name
يحدد نوع الطلب عند
التسجيل (الإرسال في المثال)
method
تحديد مسار لإرسال البيانات إليه
(ملف php محلي في المثال)
action
</ input> يشكل العنصر أغلب عمليات الإدخال في أي موقع وذلك لكثرة الأشكال والأنواع التي يمكن أن يتخذها والتي يمكنك الاختيار بينها عن طريق ال attribute type كما في المثال:
html auto — arduino bash c cpp csharp css diff go graphql ini java javascript json kotlin less lua makefile markdown objectivec perl php php-template plaintext python python-repl r ruby rust scss shell sql swift typescript vbnet wasm xml yaml 1c abnf accesslog actionscript ada angelscript apache applescript arcade armasm asciidoc aspectj autohotkey autoit avrasm awk axapta basic bnf brainfuck cal capnproto ceylon clean clojure clojure-repl cmake coffeescript coq cos crmsh crystal csp d dart delphi django dns dockerfile dos dsconfig dts dust ebnf elixir elm erb erlang erlang-repl excel fix flix fortran fsharp gams gauss gcode gherkin glsl gml golo gradle groovy haml handlebars haskell haxe hsp http hy inform7 irpf90 isbl jboss-cli julia julia-repl lasso latex ldif leaf lisp livecodeserver livescript llvm lsl mathematica matlab maxima mel mercury mipsasm mizar mojolicious monkey moonscript n1ql nestedtext nginx nim nix node-repl nsis ocaml openscad oxygene parser3 pf pgsql pony powershell processing profile prolog properties protobuf puppet purebasic q qml reasonml rib roboconf routeros rsl ruleslanguage sas scala scheme scilab smali smalltalk sml sqf stan stata step21 stylus subunit taggerscript tap tcl thrift tp twig vala vbscript vbscript-html verilog vhdl vim wren x86asm xl xquery zephir html js ts < input type = ”text” />
* عند عدم تحديد النوع فإن القيمة الافتراضية له هي text
أنواع العنصر input قيم ممكنة للخاصية type في العنصر </ input>:
يستخدم لكتابة النصوص
القصيرة كاسم المستخدم
text
يستخدم لكتابة الايميل
email
حقل كلمات السر
(يحجب ما يكتب فيه)
password
حقل يقبل الأرقام فقط
number
الحقل المخصص للبحث
search
حقل إدخال للروابط
url
يستخدم لاختيار لون من
عجلة الألوان
color
يستخدم لرفع الملفات
file
يستخدم لإضافة صورة
على صورة)
image
لتحديد مجال معين
range
حقل إدخال مخفي
hidden
زر لتحريض حدث التسجيل
في الفورم
submit
زر لإعادة جميع الحقول إلى
الوضع الافتراضي
reset
radio
checkbox
🔵🔘
✅☑️
يستخدم لاختيار واحد من
عدة خيارات
يستخدم لاختيار أكثر
من خيار واحد
لا يمكن اختيار أكثر من خيار
يمكن اختيار عدة خيارات
<textarea></textarea> هو مساحة نصية تستخدم للنصوص الكبيرة مثل تقديم الاقتراحات والشكاوي على سبيل المثال. كل ما يكتب داخل هذا العنصر يساوي ال value الخاصة بالعنصر.
<button></button> هذا العنصر هو الزر الذي يضغطه المستخدم لتنفيذ أمر ما، ويكون النص داخله هو نص الزر. يقوم بشكل افتراضي بحدث ال submit في الفورم الذي يوجدفيها، كما يمكن برمجته للقيام بأي أمر آخر عن طريق Javascript وال event attributes.
<select></select> يمثل هذا العنصر قائمة متعددة الاختيارات يختار منها المستخدم ما يناسبه، كالبلد الذي يعيش فيه أو نوع هاتفه.
يستخدم العنصر <option> من أجل تمثيل كل اختيار ضمن القائمة، ونستخدم العنصر <optgroup> لتصنيف الخيارات في مجموعات.
هنا بعض ال attributes الخاصة بالعنصر:
تسمح للمستخدم بأكثر
من اختيار واحد
multiple
لتحديد عدد الخيارات الظاهرة
في القائمة قبل فتحها
size
<label></label> يستخدم هذا العنصر لربط نص بحقل إدخال مرافق له (لشرحه).
يتم ذلك عن طريق إعطاء الحقل المطلوب id معين ثم كتابة ذلك ال id ضمن for كما في المثال:
html auto — arduino bash c cpp csharp css diff go graphql ini java javascript json kotlin less lua makefile markdown objectivec perl php php-template plaintext python python-repl r ruby rust scss shell sql swift typescript vbnet wasm xml yaml 1c abnf accesslog actionscript ada angelscript apache applescript arcade armasm asciidoc aspectj autohotkey autoit avrasm awk axapta basic bnf brainfuck cal capnproto ceylon clean clojure clojure-repl cmake coffeescript coq cos crmsh crystal csp d dart delphi django dns dockerfile dos dsconfig dts dust ebnf elixir elm erb erlang erlang-repl excel fix flix fortran fsharp gams gauss gcode gherkin glsl gml golo gradle groovy haml handlebars haskell haxe hsp http hy inform7 irpf90 isbl jboss-cli julia julia-repl lasso latex ldif leaf lisp livecodeserver livescript llvm lsl mathematica matlab maxima mel mercury mipsasm mizar mojolicious monkey moonscript n1ql nestedtext nginx nim nix node-repl nsis ocaml openscad oxygene parser3 pf pgsql pony powershell processing profile prolog properties protobuf puppet purebasic q qml reasonml rib roboconf routeros rsl ruleslanguage sas scala scheme scilab smali smalltalk sml sqf stan stata step21 stylus subunit taggerscript tap tcl thrift tp twig vala vbscript vbscript-html verilog vhdl vim wren x86asm xl xquery zephir html js ts < label for = ”username” > username label </ label >
< input type = ”text” id = ”username” />
<fieldset></fieldset> هو إطار يحيط بعناصر الفورم ويساعد في تنظيمها من خلال تقسيم حقول الإدخال إلى مجموعات معنونة.
يستخدم العنصر <legend> كعنوان للإطار.
attributes خاصة بعناصر الفورم هو النص البديل الذي يظهر
قبل كتابة شيء في الحقل
placeholder
تمثل القيم التي تدخل في
الحقل وتختلف حسب نوع الحقل
value
يعني أن العنصر لا يمكن
التعديل عليه
ويمكن قرائته فقط
readonly
تستخدم لتعطيل حقل ما
وتوقيفه عن العمل
disabled
الفصل السابع ال Global attributes في Html السمات العامة التي يمكن تطبيقها على جميع عناصر اللغة
Global Attributes هي خواص عامة يمكن إضافتها إلى عناصر مختلفة فتقوم بالوظيفة نفسها في هذه العناصر كلها.
class & id ال class وال id هما طريقتان للوصول إلى العناصر وتمييزها عن بعضها. ويكون ذلك إما لتنسيقها بشكل معين أو الوصول إليها برمجياً.
يمكن أن يكون ال class وال id أي كلمة أو حرف ولا يجوز أن يبدأ برقم، وتعتبر التسمية المعبرة عن وظيفة العنصر ممارسة برمجية أفضل.
إن العنصر الذي يملك id معين يكون فريداً من نوعه إذ أنه لا يمكن لعنصرين أن يحملا نفس ال id . وهذا ما يجعل ال id أنسب للوصول البرمجي.
أما ال class فهو ليس فريداً ويمكن لأكثر من عنصر امتلاك نفس ال class كما يمكن للعنصر الواحد امتلاك أكثر من class وهذا ما يجعله أنسب للتنسيق.
data-attribute تستخدم هذه الخاصية لتخزين بيانات معينة في عنصر دون التأثير على طريقة عرضه. يتم استخدامها عن طريق الكتابة كما في المثال (حيث أن الكلمة بعد الداش (-) اختيارية):
html auto — arduino bash c cpp csharp css diff go graphql ini java javascript json kotlin less lua makefile markdown objectivec perl php php-template plaintext python python-repl r ruby rust scss shell sql swift typescript vbnet wasm xml yaml 1c abnf accesslog actionscript ada angelscript apache applescript arcade armasm asciidoc aspectj autohotkey autoit avrasm awk axapta basic bnf brainfuck cal capnproto ceylon clean clojure clojure-repl cmake coffeescript coq cos crmsh crystal csp d dart delphi django dns dockerfile dos dsconfig dts dust ebnf elixir elm erb erlang erlang-repl excel fix flix fortran fsharp gams gauss gcode gherkin glsl gml golo gradle groovy haml handlebars haskell haxe hsp http hy inform7 irpf90 isbl jboss-cli julia julia-repl lasso latex ldif leaf lisp livecodeserver livescript llvm lsl mathematica matlab maxima mel mercury mipsasm mizar mojolicious monkey moonscript n1ql nestedtext nginx nim nix node-repl nsis ocaml openscad oxygene parser3 pf pgsql pony powershell processing profile prolog properties protobuf puppet purebasic q qml reasonml rib roboconf routeros rsl ruleslanguage sas scala scheme scilab smali smalltalk sml sqf stan stata step21 stylus subunit taggerscript tap tcl thrift tp twig vala vbscript vbscript-html verilog vhdl vim wren x86asm xl xquery zephir html js ts < div data-test = ”some-value” > </ div >
js auto — arduino bash c cpp csharp css diff go graphql ini java javascript json kotlin less lua makefile markdown objectivec perl php php-template plaintext python python-repl r ruby rust scss shell sql swift typescript vbnet wasm xml yaml 1c abnf accesslog actionscript ada angelscript apache applescript arcade armasm asciidoc aspectj autohotkey autoit avrasm awk axapta basic bnf brainfuck cal capnproto ceylon clean clojure clojure-repl cmake coffeescript coq cos crmsh crystal csp d dart delphi django dns dockerfile dos dsconfig dts dust ebnf elixir elm erb erlang erlang-repl excel fix flix fortran fsharp gams gauss gcode gherkin glsl gml golo gradle groovy haml handlebars haskell haxe hsp http hy inform7 irpf90 isbl jboss-cli julia julia-repl lasso latex ldif leaf lisp livecodeserver livescript llvm lsl mathematica matlab maxima mel mercury mipsasm mizar mojolicious monkey moonscript n1ql nestedtext nginx nim nix node-repl nsis ocaml openscad oxygene parser3 pf pgsql pony powershell processing profile prolog properties protobuf puppet purebasic q qml reasonml rib roboconf routeros rsl ruleslanguage sas scala scheme scilab smali smalltalk sml sqf stan stata step21 stylus subunit taggerscript tap tcl thrift tp twig vala vbscript vbscript-html verilog vhdl vim wren x86asm xl xquery zephir html js ts el.getAttribute ("data-test" )
css auto — arduino bash c cpp csharp css diff go graphql ini java javascript json kotlin less lua makefile markdown objectivec perl php php-template plaintext python python-repl r ruby rust scss shell sql swift typescript vbnet wasm xml yaml 1c abnf accesslog actionscript ada angelscript apache applescript arcade armasm asciidoc aspectj autohotkey autoit avrasm awk axapta basic bnf brainfuck cal capnproto ceylon clean clojure clojure-repl cmake coffeescript coq cos crmsh crystal csp d dart delphi django dns dockerfile dos dsconfig dts dust ebnf elixir elm erb erlang erlang-repl excel fix flix fortran fsharp gams gauss gcode gherkin glsl gml golo gradle groovy haml handlebars haskell haxe hsp http hy inform7 irpf90 isbl jboss-cli julia julia-repl lasso latex ldif leaf lisp livecodeserver livescript llvm lsl mathematica matlab maxima mel mercury mipsasm mizar mojolicious monkey moonscript n1ql nestedtext nginx nim nix node-repl nsis ocaml openscad oxygene parser3 pf pgsql pony powershell processing profile prolog properties protobuf puppet purebasic q qml reasonml rib roboconf routeros rsl ruleslanguage sas scala scheme scilab smali smalltalk sml sqf stan stata step21 stylus subunit taggerscript tap tcl thrift tp twig vala vbscript vbscript-html verilog vhdl vim wren x86asm xl xquery zephir html js ts
div ::before { content : attr (data-test) }
الخواص البوليانية تأخذ القيمة true بوجودها والقيمة false بغيابها.
إخفاء العنصر
hidden
تحديد السماح للمتصفح
بترجمة محتوى العنصر
translate
جعل العنصر قابل
للسحب والإفلات
draggable
تجعل العنصر قابل لتعديل
المحتوى من قبل المستخدم
contenteditable
تحديد السماح للمتصفح
بتتبع لفظ الكلمات
spellcheck
خواص عامة أخرى
عنوان للعنصر يظهر عند
التمرير فوق العنصر
title
لتحديد إتجاه العنصر
من اليمين لليسار rtl
أو من اليسار لليمين ltr
dir
لتحديد لغة العنصر
وتستخدم غالباً مع
العنصر الأساسي <html>
lang
الفصل الثامن معالجة الأحداث في Html السمات المعنية بالتقاط الأحداث في لغة Html
Event Attributes التقاط الأحداث ومعالجتها هو جزء أساسي في الكثير من التطبيقات البرمجية ومنها برمجة المواقع. وهو هنا عبارة عن تنفيذ لأمر أو دالة برمجية عند وقوع حدث نحدده كالضغط على زر أو التمرير بالفأرة أو اكتمال تحميل الصفحة.
كيف تستخدم؟ html auto — arduino bash c cpp csharp css diff go graphql ini java javascript json kotlin less lua makefile markdown objectivec perl php php-template plaintext python python-repl r ruby rust scss shell sql swift typescript vbnet wasm xml yaml 1c abnf accesslog actionscript ada angelscript apache applescript arcade armasm asciidoc aspectj autohotkey autoit avrasm awk axapta basic bnf brainfuck cal capnproto ceylon clean clojure clojure-repl cmake coffeescript coq cos crmsh crystal csp d dart delphi django dns dockerfile dos dsconfig dts dust ebnf elixir elm erb erlang erlang-repl excel fix flix fortran fsharp gams gauss gcode gherkin glsl gml golo gradle groovy haml handlebars haskell haxe hsp http hy inform7 irpf90 isbl jboss-cli julia julia-repl lasso latex ldif leaf lisp livecodeserver livescript llvm lsl mathematica matlab maxima mel mercury mipsasm mizar mojolicious monkey moonscript n1ql nestedtext nginx nim nix node-repl nsis ocaml openscad oxygene parser3 pf pgsql pony powershell processing profile prolog properties protobuf puppet purebasic q qml reasonml rib roboconf routeros rsl ruleslanguage sas scala scheme scilab smali smalltalk sml sqf stan stata step21 stylus subunit taggerscript tap tcl thrift tp twig vala vbscript vbscript-html verilog vhdl vim wren x86asm xl xquery zephir html js ts < button onclick = "doSomething()" >
بعض ال Event Attributes المهمة أحداث تتعلق بالفأرة:
تنفيذ الأمر عند النقر
على عنصر
onclick
تنفيذ الأمر عند النقر المزدوج
على عنصر
ondblclick
عند مرور الفأرة فوق العنصر
onmouseover
عند مغادرة الفأرة للعنصر
onmouseleave
عند ضغط الزر الأيمن للفأرة
oncontextmenu
أحداث تتعلق بالإدخال ولوحة المفاتيح:
تنفيذ الأمر عند الضغط على زر
onkeydown
تنفيذ الأمر عند زوال الضغط على زر
onkeyup
تنفيذ الأمر أثناء الضغط على زر
onkeypress
تنفيذ الأمر عند تغير قيمة العنصر
onchange
تنفيذ الأمر عند الإدخال في
حقل إدخال
oninput
يتنفذ الأمر في عنصر <form>
عند الضغط على زر submit
onsubmit
أحداث عامة وأحداث نافذة المتصفح (window):
تنفيذ الأمر عند اكتمال
تحميل الصفحة
onload
تنفيذ الأمر عند التمرير
داخل العنصر
onscroll
تنفيذ الأمر عند تغيير
حجم العنصر
onresize
عند التركيز على العنصر
onfocus
عند فقدان التركيز
على العنصر
onblur
ملخص البدء في لغة Html دليل مختصر في لغة Html ليساعدك على البدء في مسار تطوير المواقع
منير الدكاك
)