التحضير : بالنسبة لهذا المحتوى، يجب أن يكون لدى الطالب جهاز كمبيوتر متصل بالإنترنت، ومتصفح ويب يدعم HTML 5 (Google Chrome، وMozilla Firefox، وMicrosoft Edge، وSafari، وOpera، وما إلى ذلك)، ومحرر نصوص (VSCode، وما إلى ذلك) .) ومنصة استضافة (مجانية أو مدفوعة).
عندما نتحدث عن موقع الويب، يمكننا أن نلاحظ أن هذا المصطلح هو مزيج من كلمتين باللغة الإنجليزية: "web" وتعني شبكة وتشير إلى شبكة الويب العالمية، و"site" وتعني مكان. وبهذا المعنى، فإن موقع الويب أو الموقع هو مكان يمكن الوصول إليه عبر الإنترنت، من خلال عنوان URL، ويحتوي على مجموعة من الصفحات المبرمجة بلغة ما.
لفهم هذا الموضوع بشكل أفضل، دعنا نلقي نظرة على مثال: عندما تكتب العنوان blog.betrybe.com في متصفح الإنترنت الخاص بك للوصول إلى مدونة Trybe، سيبحث المتصفح عن مكان وجود موقع الويب هذا على الإنترنت. ثم سيتم تقديم طلب إلى الخادم.
يتم تخزين جميع ملفات النصوص والصور والأنماط التي تتكون منها صفحة الويب على هذا الخادم. بعد ذلك، سيعيد الخادم هذه المجموعة من المستندات إلى المتصفح حتى يتمكن من عرض المحتوى كما تراه على شاشتك.
يمكن لمواقع الويب تقديم أشكال ومحتويات مختلفة. تتضمن بعض الخيارات ما يلي: المتاجر الافتراضية، مثل Mercado Livre وAmazon، حيث يمكن شراء المنتجات وبيعها؛ المواقع الإلكترونية والمحافظ المؤسسية، التي تستخدمها الشركات والأشخاص لتقديم أنفسهم والعثور عليهم من قبل العملاء؛ والمدونات، مثل تلك التي تقرأها.
علاوة على ذلك، يمكن أيضًا تصنيف مواقع الويب على أنها ثابتة أو ديناميكية. يتم تطوير مواقع الويب الثابتة عمومًا باستخدام HTML وCSS وJavaScript. محتواه أبسط ولا يوجد تفاعل مع قاعدة البيانات.
تستخدم مواقع الويب الديناميكية، بالإضافة إلى الاستفادة من HTML وCSS وJavaScript، لغات برمجة أكثر قوة، مثل PHP. تحتوي هذه المواقع على وظائف متصلة بقاعدة بيانات. بهذه الطريقة، يمكن لكل صفحة يتم الوصول إليها جلب بيانات محددة.
مع تصميم الويب، تحتاج إلى ملاحظة أهمية الواجهة لتطوير مواقع الويب، وتطور التقنيات المستخدمة في إنشاء صفحات الويب الغنية (web 1.0، web 2.0، web 3.0 وweb 4.0)، وتطور الواجهات (الجمالية والوظيفية والهيكلية) ).
لذلك، عليك أن تفهم أهمية إنشاء واجهات غنية لبناء موقع ويب، بهدف الحصول على أفضل تجربة تصفح وسهولة استخدام للمستخدم النهائي، ومعرفة بعض التقنيات المستخدمة في الماضي لبناء المواقع على الإنترنت. ومن هذه الرؤية، مراقبة اتجاهات السوق القديمة، وكذلك رؤية الاتجاهات الجديدة في تطوير الواجهات.
لوحة الألوان:
التدرجات:
في الأساس، تطوير الويب يعني ترميز الصفحات للإنترنت. ومع ذلك، فإن هذه المهمة تتجاوز استخدام HTML وCSS، وهما الأدوات الأساسية لإنشاء صفحة ثابتة - والتي تقدم معلومات لا يمكن تعديلها إلا عن طريق تحرير التعليمات البرمجية المصدر.
وعلى العكس من ذلك، يمكن أن تكون الصفحات الموجودة على موقع الويب ديناميكية. وهذا يعني أنه يمكن تغيير المحتوى المعروض دون التدخل في كود المصدر. ولجعل ذلك ممكنًا، يتم تخزين الأجزاء الديناميكية للموقع في قاعدة بيانات، والتي يمكن الوصول إليها عندما يكون ذلك ضروريًا لاسترداد هذا المحتوى.
تتيح هذه الميزة تطوير التطبيقات المعقدة، التي تستخدم قواعد العمل وواجهات برمجة التطبيقات (APIs) — واجهة برمجة التطبيقات — وغير ذلك الكثير. لذلك، هناك تقسيم للأنشطة التي تركز على تطوير الويب، والتشفير من جانب العميل (الواجهة الأمامية)، والتشفير من جانب الخادم (الواجهة الخلفية).
مثال على واجهة برمجة التطبيقات (API)، وهي البنية الأكثر استخدامًا حاليًا لتطبيقات الويب والهاتف المحمول، وهي REST API والتي تسمى أيضًا RESTful API .
تطبيقات الويب هي عدد متزايد من المواقع على الويب، أي أنها تحاكي تطبيقات سطح المكتب بدلاً من المستندات التقليدية والروابط الثابتة للنصوص والصور التي تشكل غالبية الويب. على سبيل المثال، لدينا معالجات النصوص عبر الإنترنت، وأدوات تحرير الصور، ومواقع رسم الخرائط، وما إلى ذلك. بدعم كبير من جافا سكريبت، دفعوا HTML4 إلى حافة قدراته. يحدد HTML5 واجهات برمجة التطبيقات (API) الجديدة (واجهة برمجة التطبيقات) لـ DOM (نموذج كائن المستند)، وهو عبارة عن اتفاقية مشتركة بين الأنظمة الأساسية ومستقلة عن اللغة لتمثيل كائنات ومستندات HTML وXHTML وXML والتفاعل معها.
تساعدك واجهات برمجة التطبيقات الجديدة هذه على سحب وإسقاط الكائنات التي يرسلها الخادم، مثل الرسومات ومقاطع الفيديو وما شابه.
هذه الواجهات الجديدة التي تعرضها صفحات HTML لجافا سكريبت عبر كائنات في DOM تجعل من السهل كتابة التطبيقات باستخدام أنماط محددة للغاية، بدلاً من مجرد حيل سيئة التوثيق.
والأهم من ذلك هو الحاجة إلى معيار مفتوح مجاني (للاستخدام والتنفيذ) وقادر على التنافس مع المعايير الخاصة مثل Adobe Flash أو Microsoft Silverlight. وبغض النظر عن رأيك في هذه التقنيات أو الشركات، فإننا نؤمن بأن الويب يمثل منصة حيوية للمجتمع والتجارة والاتصالات لتكون في أيدي الشركة المصنعة.
هناك الملايين من صفحات الويب المستخدمة بالفعل، ومن الضروري أن يستمر إعادة إنتاجها. لذلك، HTML5 هو في الغالب مشتق من HTML4 الذي يستمر في تحديد كيفية تعامل المتصفحات مع العلامات القديمة مثل <font>
و <center>
وغيرها من العلامات الجديدة حيث تستخدمها ملايين صفحات الويب.
يمكن أن يكون لمصطلح الواجهة عدة معانٍ حسب المنطقة التي تتم دراستها فيها. وفي مجال تكنولوجيا المعلومات تعني الواجهة إمكانية الاتصال بين نظامين لا يمكنهما التواصل بشكل طبيعي دون بعض المساعدة الخارجية .
HCI هي دراسة التفاعل بين الأشخاص وأجهزة الكمبيوتر. وهو موضوع متعدد التخصصات يتعلق بعلوم الكمبيوتر والفنون والتصميم وبيئة العمل وعلم النفس وعلم الاجتماع والسيميائية واللغويات والمجالات ذات الصلة. يتم التفاعل بين البشر والآلات من خلال واجهة المستخدم، المكونة من البرامج والأجهزة.
التفاعل بين الإنسان والحاسوب هو مجال يهتم بتصميم وتقييم وتنفيذ أنظمة الحوسبة التفاعلية للاستخدام البشري ودراسة الظواهر الرئيسية المحيطة بها.
<a href="mailto:[email protected]">إرسال بريد إلكتروني</a>
مصطلح الوسائط الرقمية هو عكس الوسائط التناظرية، التي تم تكوينها بواسطة قاعدة مادية: تم تسجيل الصوت في أخاديد صغيرة، على سطح الفينيل، وعندما تمر إبرة عبر هذه الأخاديد، يتم إعادة إنتاج الصوت. في الوسائط الرقمية، يختفي الدعم المادي عمليا، ويتم تحويل البيانات إلى تسلسلات رقمية أو رقمية - ومن هنا يأتي استخدام المصطلح رقمي. بهذه الطريقة، الأصوات والصور والنصوص هي في الواقع تسلسلات من الأرقام، مما يسمح بمشاركة البيانات وتخزينها وتحويلها. بالمعنى الأوسع، يمكن تعريف الوسائط الرقمية على أنها مجموعة من وسائل وأجهزة الاتصال القائمة على التكنولوجيا الرقمية، مما يسمح بالتوزيع الرقمي أو التواصل للأعمال الفكرية المكتوبة أو الصوتية أو المرئية. وسائل ذات أصل إلكتروني تستخدم في استراتيجيات تواصل العلامات التجارية مع عملائها، وتسمى عمومًا بالوسائط الرقمية.
لقد كان Flash دائمًا البديل الأكثر قابلية للتطبيق لأولئك الذين يحتاجون إلى إضافة مقاطع فيديو وموسيقى إلى صفحات الويب. لقد كان ولا يزال موجودًا في جميع المتصفحات تقريبًا وكان لدينا تنسيق يمكن استخدامه دون أي مشاكل كبيرة.
فقط أضف مكالمة إلى البرنامج المساعد وسيعمل.
<object width="426" height="240">
<param name="movie" value=" https://youtu.be/S2Vty9srpFw">
</param>
<param name="allowFullScreen" value="true"></param>
<param name="allowscriptaccess" value="always"></param>
<param name="allowscriptaccess" value="always"></param> <embed src= https://www.youtube.com/embed/S2Vty9srpFw type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="426" height="240">
</embed>
</object>
بسبب عدم تناسق المتصفح، كان من الضروري إضافة كل من <object>
; أما بالنسبة للأمر <embed>
؛ فهو عبارة عن أوامر محددة لاستخدام المكون الإضافي، مما يؤدي إلى تكرار العديد من السمات. ناهيك عن أن المكونات الإضافية مثل Flash تسبب الكثير من عدم الاستقرار، مما يسبب أخطاء تؤدي حتى إلى إغلاق المتصفح.
ونتيجة لكل هذا، يأتي HTML 5 بدعم جديد، أصلي للغة، لتجنب استخدام المكونات الإضافية والأوامر غير الضرورية. حاليًا، ما عليك سوى إجراء مكالمة بسيطة، كما لو كانت صورة وسيتم تشغيل الملف.
<عناصر التحكم في الفيديو src="video.mp4" width="426" height="240"></video>
المشكلة التي يطرحها الأمر الجديد هي استخدام السمة src
التي لا تعمل بشكل جيد في بعض المتصفحات. وإذا أردنا أن يتمكن الجميع من فتح الصفحة باستخدام أي متصفح، فمن الضروري استخدام نوع آخر من السمات. لذلك، من الشائع استخدام السمة <source>
في علامة <video>
.
يمكن استخدام العنصر <source>
عدة مرات ويسمح لك بتحديد تنسيق فيديو لكل متصفح، مما يمنحك وصولاً أكبر.
< video width =" 426 " height =" 240 " controls >
< source src =" video.mp4 " type =" video/mp4 " >
< source src =" video.webm " type =" video/webm " >
< source src =" video.ogg " type =" video/ogg " >
</ video >
< audio controls >
< source src =" audio.mp3 " type =" audio/mpeg " >
< source src =" audio.ogg " type =" audio/ogg " >
< source src =" audio.wav " type =" audio/wav " >
</ audio >
هناك العديد من برامج الترميز المحتملة وستحتاج إلى تصدير نسختين على الأقل للوصول إلى نطاق أكبر.
ملاحظة : برامج الترميز هي برامج تُستخدم لتشفير ملفات الوسائط وفك تشفيرها. إنهم يضغطون التنسيق الأصلي، ويفضلون التخزين، ويفكون ضغطه أثناء إعادة الإنتاج، ويحولونه مرة أخرى إلى صورة أو صوت.
يتم استيراد جميع أمثلة الصوت والفيديو المذكورة عبر المستند الموجود في الدليل. والسؤال هو، كيف يمكنني استيراد مقطع فيديو مستضاف بالفعل على موقع مثل YouTube أو Vimeo؟ وأي من الحلين (عبر المستند أو عبر الخادم) هو الأكثر فائدة؟
دعونا نرى كيفية استيراد مقاطع الفيديو من YouTube وVimeo، خطوة بخطوة!
حتى ظهور HTML5، تم استخدام الجداول كمورد لتصميم تخطيطات الصفحة. استخدم المصممون الجداول كشبكة لعرض الصور والنصوص، وتم استخدامها على نطاق واسع، لتصبح الشكل السائد لتصميم مواقع الويب، وبالتالي خلق مظهر غني.
ومع ذلك، فإن استخدام الجداول اليوم يتداخل في الواقع مع إنشاء مواقع ويب أفضل وأكثر سهولة ومرونة وعملية، خاصة بالنسبة للوسائط الجديدة، مثل الهواتف المحمولة والأجهزة اللوحية وما إلى ذلك.
لا تزال هذه الجداول موجودة في HTML 5 كمورد لعرض البيانات الجدولية، والمعلومات الواردة من قاعدة البيانات. مع الإصدار الجديد من HTML، يمكننا إنشاء مواقع ويب مصممة بالكامل بدون جداول، وبالتالي إنشاء تخطيطات ديناميكية تظهر على شاشات كبيرة مثل الكمبيوتر وتتكيف بشكل جيد مع شاشة هاتف ذكي صغيرة. ستشاهد لاحقًا كيفية إنشاء تخطيطات سريعة الاستجابة باستخدام HTML5 وCSS3.
لم تتم إزالة أمر الجدول من اللغة، ولكن تم تقييد استخدامه. ومن ناحية أخرى، لا يزال لدينا العديد من مواقع الويب التي تستخدم هذا المورد، لذا من المهم أن نفهم كيفية عمله حتى نتمكن، إذا لزم الأمر، من الحفاظ على هذا النوع من الصفحات.
الأمر لإدراج جدول هو <table>
. لبدء سطر ، يجب علينا إدخال العلامة <tr>
وللخلية <td>
التي تقسم صف الجدول. يقوم <th>
بتقسيم صف الجدول عن طريق وضع المحتوى بالخط العريض. يتم إنهاء كل هذه الأوامر كـ </table>
و </tr>
و </td>
على التوالي.
< table >
< tr >
< td > </ td >
< td > </ td >
</ tr >
</ table >
يحتوي الأمر <table>
على سلسلة من السمات التي تساعد في تنسيق الجدول. أهمها هي:
align="" | يقوم بمحاذاة الجدول في ثلاثة مواضع: center ، left ، right ، justify |
bgcolor="" | يحدد لون الجدول |
border="" | يحدد حجم الحد، إذا كان صفراً لا يظهر الحد |
cellspacing="" | يحدد المسافة بين الخلايا |
colspan="" | تحديد التجميع بين عمودين أو أكثر من أعمدة الجدول (جانبيًا) |
rowspan="" | تحديد التجميع بين صفين أو أكثر في الجدول. (اتجاه صعودا وهبوطا) |
cellpadding="" | تحديد التباعد بين النص وحدود الخلية |
<caption>
يعرض النص في وسط الجدول، كما لو كان تعليقًا.
لاختيار الصفوف الداخلية التي ستظهر ضمن الجدول، نستخدم خاصية RULES
، ضمن العلامة. مكملات هذه السمة هي:
none | لا يوجد خط كامل. |
all | لإظهار كافة الصفوف بين كل عمود وصف في الجدول (افتراضي) |
rows | للخطوط الأفقية بين كل صف في الجدول. |
cols | للخطوط الرأسية بين كل عمود من الجدول. |
groups | للصفوف بين مجموعات الأعمدة والأقسام الأفقية، المحددة بواسطة علامات خاصة مثل <colgroup> و <thead> |
انظر بعض الأمثلة:
< table border rules =" all " 6 >
<table border rules="none"6>
<table border rules="cols"6>
<table border rules="groups"6>
<table border rules="rows"6>
يعد جزء نماذج HTML مهمًا جدًا لملء البيانات التي يدخلها المستخدمون في صفحة HTML. يتم جمع هذه البيانات بواسطة الواجهة الخلفية باستخدام لغة برمجة خلفية (PHP، وJavaScript، وPython، وJava، وما إلى ذلك) تقوم بتخزين هذه البيانات والاستعلام عنها في قاعدة بيانات (MySQL، وPostgreSQL، وMongoDB، وOracleDB، وما إلى ذلك). ). دعونا نلقي نظرة على علامات النموذج:
نموذج تسجيل الدخول (النموذجي) :
< html >
< body >
< h2 > Login </ h2 >
< form >
Login: < br >
< input type =" email " name =" email " > < br >
Senha: < br >
< input type =" password " name =" senha " > < br >
< input type =" submit " value =" Logar " >
</ form >
</ body >
</ html >
من خلال سمة type
يمكننا تحديد نوع input
المستخدمة لدينا، ومن خلال سمة name=''
يمكننا معالجة البيانات المرسلة عبر لغة برمجة.
نموذج تسجيل الدخول (نموذجي) - باستخدام PHP :
< html >
< body >
< h2 > Login </ h2 >
< form action =" processa.php " >
Login: < br >
< input type =" email " name =" email " required > < br >
Senha: < br >
< input type =" password " name =" senha " required > < br >
< input type =" submit " value =" Logar " >
</ form >
</ body >
</ html >
نموذج التسجيل (النموذجي) :
< html >
< head >
< title > Cadastro </ title >
</ head >
< body >
< h2 > Cadastre-se </ h2 >
< form action =" processa.php " >
Nome Completo: < br >
< input type =" text " name =" nome " required > < br >
<!-- <label for="email">Email:</label> -->
Email: < br >
< input type =" email " name =" email " required > < br >
Senha: < br >
< input type =" password " name =" password " required > < br >
Repita a senha: < br >
< input type =" password " name =" password " required > < br >
Sexo: < br >
< input type =" radio " name =" sexo " value =" masculino " > Masculino < br >
< input type =" radio " name =" sexo " value =" feminino " > Feminino < br >
Interesses: < br >
< input type =" checkbox " name =" interesse " value =" futebol " > Futebol < br >
< input type =" checkbox " name =" interesse " value =" video-games " > Video-games < br >
< input type =" checkbox " name =" interesse " value =" academia " > Academia < br >
Estado < br >
< select name =" estado " >
< option value =" RJ " > RJ </ option >
< option value =" SP " > SP </ option >
< option value =" MG " > MG </ option >
< option value =" ES " > ES </ option >
</ select > < br >
Comente! < br >
< textarea name =" comentario " > </ textarea > < br >
< input type =" submit " value =" Cadastrar " >
</ form >
</ body >
</ html >
لن نكون قادرين على input
بين أجهزة الراديو إلا إذا كان name
هو نفسه، وبهذه الطريقة يمكننا تجميع هذه المعلومات وسيتم وضع علامة على واحدة منها فقط.
مع checkbox
يمكننا اختيار أكثر من خيار لتحديده.
مع
يمكننا تحديد أنواع <input>
وسماتها:
button
password
text
يتم استخدام العناصر <a>
و <input>
و <button>
لإنشاء أزرار على صفحة HTML، ولكن لكل منها أغراض مختلفة قليلاً ويتم استخدامها في سياقات مختلفة.
يتم استخدام الرابط <a>
لإنشاء روابط بتنسيق HTML. يتم استخدامه بشكل أساسي للتنقل بين صفحات الويب المختلفة أو الربط بأقسام مختلفة من الصفحة. عندما ينقر المستخدم على عنصر <a>
، يتم توجيهه إلى عنوان URL المحدد في سمة href
. غالبًا ما يتم تصميم عناصر <a>
باستخدام CSS لتبدو وكأنها أزرار، ولكن لها سلوك ارتباط قياسي.
< a href =" pagina.html " > Link </ a >
يتم استخدام <input>
لإنشاء عناصر الإدخال في نموذج HTML. على الرغم من استخدامه غالبًا لإنشاء حقول إدخال النص، إلا أنه يمكن استخدامه أيضًا لإنشاء الأزرار. يتم تحديد نوع الزر بواسطة سمة type
. بعض القيم الشائعة لسمة type
هي "button"
و "submit"
و "reset"
. تكون أزرار <input>
مفيدة عندما تحتاج إلى إرسال بيانات من نموذج إلى خادم أو تنفيذ إجراءات محددة عند النقر فوق الزر.
< input type =" button " value =" Clique Aqui " >
يتم استخدام <button>
لإنشاء أزرار في HTML. يمكن أن يحتوي على نص أو عناصر صور أو عناصر HTML أخرى. تمامًا مثل أزرار <input>
، يمكن أن تحتوي أزرار <button>
على نوع معين محدد بواسطة سمة type
، مثل "button"
أو "submit"
أو "reset"
. توفر أزرار <button>
مرونة أكبر من حيث المحتوى والسلوك مقارنة بأزرار <input>
، خاصة عندما يتعلق الأمر بالتصميم والتعامل مع الأحداث باستخدام JavaScript.
< button type =" button " > Clique Aqui </ button >
باختصار، إذا كنت تقوم بإنشاء زر للتنقل، فاستخدم <a>
. إذا كنت تقوم بإنشاء زر لإرسال البيانات من نموذج، فاستخدم <input type="submit">
أو <button type="submit">
. إذا كنت تقوم بإنشاء زر لتنفيذ إجراء معين على الصفحة (مثل إظهار المحتوى أو إخفائه)، فاستخدم <button type="button">
.
يعمل HTML الدلالي على تنظيم عناصر المستند وتنظيمها في أجزاء محددة بحيث لا تنتشر في جميع أنحاء الجسم بطريقة غير منظمة وغير قابلة للقراءة.
حتى الإصدار 4 من HTML، كانت div هي دلالات الهيكلة الرئيسية للصفحة، ومع وصول HTML5 ظهرت علامات جديدة مع وظائف div التي تم إنشاؤها لتنظيم العناصر الموجودة في المستند، مما جعل هيكلة الصفحة أسهل بكثير. لاحظ أنه يمكنك مقارنة بنية صفحة الويب مع تخطيط صفحة الصحيفة ، حيث يحتوي كلاهما على رؤوس وتذييلات ومقالات وأقسام.
<section>
قسمًا عامًا داخل المستند. يمكن أن يحتوي هذا العنصر على مجموعة من النصوص تحتوي على عدة فصول وأقسام مرقمة وما إلى ذلك. في المثال التالي، يتم عرض مقال يحتوي على موضوع رئيسي، وضمن هذا الموضوع عدة أقسام بمواضيع مختلفة. <header>
، المستخدم أيضًا لتحديد عنوان القسم، جنبًا إلى جنب مع العناصر السابقة، ولكنه ليس إلزاميًا. <nav>
(التنقل) هذا العنصر هو القسم الذي توجد به معلومات الصفحة. بشكل عام، يتم وضع الروابط (الروابط الداخلية) للصفحة نفسها أو الروابط الخارجية لصفحات أخرى على مواقع خارجية في هذا القسم. <article>
(مقال) هذا العنصر هو مقال مستقل داخل النص، وقد يكون أو لا يكون هذا العنصر ضمن عنصر <section>
. تخيل صحيفة تحتوي على أقسام رياضية ونميمة وما إلى ذلك. يوجد داخل كل قسم عدة مقالات عن نصوص محددة، على سبيل المثال، في قسم الرياضة قد يكون هناك مقال يتحدث عن الفريق أ وآخر عن الفريق ب وآخر عن الفريق ج. يمكن أن تحتوي المقالة على عنصر <header>
وهو العنصر العنوان وعنصر <footer>
وهو تذييل العنصر. <footer>
(تذييل الصفحة) هذا العنصر هو العنصر الذي يحتوي بشكل أساسي على معلومات حول محتوى القسم، مثل المؤلف والروابط ذات الصلة وما إلى ذلك. <aside>
يحتوي هذا العنصر على معلومات لا تتعلق مباشرة بالنص. على سبيل المثال: الإعلانات التجارية المدفوعة، والروابط الترويجية، وما إلى ذلك. ويتميز بكتابة كود CSS، باستخدام أمر HTML <style> . تتفوق هذه الطريقة على الطريقة السابقة، حيث أن جميع قواعد CSS موجودة في بداية كود HTML5. ومع ذلك، لا يمكن استخدام هذه القواعد إلا ضمن هذا المستند، مما يمنع مشاركة القواعد وإعادة استخدامها.
مثال الاستخدام:
< head >
< style >
* {margin: 0; padding: 0; box-sizing: border-box;}
body {width: 100%; height: 100vh;}
</ style >
</ head >
تمت كتابة القواعد في ملف بامتداد .css ويمكن تحميلها في مستند HTML5 بطريقتين:
< head >
< link rel =" stylesheet " href =" default.css " >
< link rel =" stylesheet " href =" green.css " title =" Green styles " >
< link rel =" alternate stylesheet " href =" contrast.css " title =" High contrast " >
< link rel =" alternate stylesheet " href =" big.css " title =" Big fonts " >
< link rel =" alternate stylesheet " href =" wide.css " title =" Wide screen " >
</ head >
@import
في CSSيسمح لك باستيراد قواعد النمط ضمن قواعد النمط الأخرى. تسمح لك هذه الطريقة بتطبيق القواعد العامة على كافة مستندات HTML.
مثال الاستخدام :
ضمن مستند .css
، يمكننا تطبيق الاستدعاء على الملفات الخارجية في الأسطر الأولى لاستخدام الأوامر الموجودة.
@import "mystyle.css" ;
@import url ( "mystyle.css" );
@import url ( "fineprint.css" ) print; /* mídia específica para impressão */
@import url ( "bluish.css" ) projection , tv; /* mídia específica grandes mídias*/
@import url ( "narrow.css" ) handheld and ( max-width : 400 px ); /* mídia específica mídias portáteis*/
قام المستوى 3 من CSS بتنفيذ مفهوم الوحدات، حيث يتم تطوير كل وحدة بشكل مستقل، وفقًا لجدولها الزمني الخاص. الميزة الرئيسية هي الاستقلال في بناء ميزات جديدة.
بعد إنشاء HTML، أصبحت الحاجة إلى تنسيق الصفحات واضحة، لذلك في عام 1996، تم إنشاء لغة النمط التي نعرفها باسم CSS .
بناء الجملة بسيط للغاية ويمكن تفسيره بعبارة "تقوم بإنشاء قواعد نمط لعناصر أو مجموعات من العناصر".
دعونا نستخدم عنصر HTML الذي رأيناه سابقًا، وهو المرساة، كمثال.
يتم تمثيل قاعدة CSS بواسطة محدد أو مجموعة محددات ، في حالتنا هي ، لذلك ضمن زوج من الأقواس نضيف الإعلانات ، في المثال أدناه نقوم بتغيير لون وحجم الخط لهذا العنوان، الإعلانات تتشكل من خاصية وقيمة.
يتم تمثيل قاعدة CSS بواسطة:
مثال:
a {
color : # 000 ;
}
في CSS، يمكن أن يتراوح اختيار العناصر من الأنماط السياقية المبسطة إلى الأنماط السياقية الغنية.
تعد أنواع التحديد مهمة جدًا، حيث يتغير ترتيبها وفقًا لنتيجة معالجة الصفحة.
يتيح لك CSS تجميع البيانات المتكررة.
مثال:
h1 {عائلة الخط: بلا رقيق } h2 {عائلة الخط: بلا الرقيق } h3 {عائلة الخط: بلا رقيق }
وهو يعادل:
ح1، ح2، ح3 { عائلة الخط: بلا الرقيق }
ملاحظة: كافة h1، كافة h2 وجميع h3
يمكن احتواء عنصر داخل عنصر آخر.
مثال: <H1>هذا النص <EM>مهم جدًا</EM></H1>
h1 { اللون: أحمر } /* يشير إلى أن جميع عناصر h1 لها اللون الأحمر */ باللون { اللون: أحمر } /* يشير إلى أن جميع العناصر الموجودة بها اللون الأحمر */ h1 in { color: blue } /* يشير إلى أن العناصر الموجودة في عنصر h1 لها اللون الأزرق */
يتم تمييز العنصر الفرعي عندما يتم فصل العناصر بـ ">".
div ol > li p {اللون: أخضر }
في هذا المثال، سيتم تلوين جميع عناصر p باللون الأخضر عندما تكون داخل عنصر <li>، وهو عنصر فرعي لقائمة <ol> داخل عنصر <div>.
يتم تمييز العنصر حسب الأولوية عندما يتم فصل العناصر بعلامة "+". أي أن الفقرة الأولى تأتي بعد القسمة.
شعبة + ص { اللون: أحمر؛ }
يحدد قواعد للعناصر التي لها سمة معينة.
مثال:
span[hello="Cleveland"][goodbye="Columbus"] { اللون: أزرق؛ }
سيتم تطبيق القاعدة على كافة العناصر الممتدة التي تحتوي على السمة hello="Cleveland" والسمة وداعًا="Columbus".
يسمح لك الفصل بتعيين مجموعة من القواعد لعنصر معين. يتم تحديده بواسطة النقطة النجمية (*.) أو ببساطة النقطة (.).
مثال:
.pastoral { اللون: أخضر } /* جميع العناصر ذات الفئة ~=pastoral */ /*أو*/ *.pastoral { اللون: أخضر } /* جميع العناصر ذات الفئة ~=pastoral */
تتيح لك سمة المعرف تحديد عنصر فريد في مستند HTML. لتحديد هذا العنصر، ما عليك سوى استخدام الحرف "#" متبوعًا باسم العنصر.
مثال:
h1#title1 { text-align: center } /* يطبق القاعدة على عنصر h1 بالمعرف=العنوان */ *.pastoral { اللون: أخضر } /* جميع العناصر ذات الفئة ~=pastoral */
في المثال السابق قمنا بإنشاء قاعدة تقوم بتغيير عنصر HTML مباشرة، ولكن هذا يعني أن جميع العناصر سيكون لها هذا المظهر، ولدينا بشكل عام مواقع ويب أكثر تعقيدًا تحتاج إلى عدة قواعد مختلفة لنفس العناصر.
لجعل الأمر ملموسًا أكثر، دعونا نتذكر قليلاً عن موقع الويب الذي بدأنا في إنشائه في الوحدة الأخيرة، حيث كان يحتوي على العديد من عناصر الرأس، لكننا لا نريد أن يكون للرأس الرئيسي نفس تنسيق رأس المنشور، حيث يكون المعرفات والفئات.
المحدد الذي رأيناه في المثال الأول هو محدد النوع، فهو يمثل عنصر HTML، ومع المعرفات والفئات يمكننا تمثيل أي نوع من العناصر ولكن هناك بعض الاختلافات بينهما:
المعرف : يتم تمثيله بالرمز # (التجزئة) متبوعًا باسم ذلك المعرف. يمكن استخدامه مرة واحدة فقط!
#id{
}
الفئة : يتم تمثيل الفئة بطريقة مشابهة للمعرف، ولكن مسبوقة بنقطة بدلاً من التجزئة. يمكن استخدامه أكثر من مرة!
.class{
}
والفرق الأكثر أهمية بينهما هو الطريقة التي ينبغي استخدامها: لا يمكن استخدام المعرف إلا مرة واحدة في صفحة HTML بينما لا يوجد أي قيود على الفصل.
وهناك تفصيل أخير في هذا المثال: الفئة الزائفة . تخضع عناصر HTML للتغييرات الناتجة عن تفاعل المستخدم، مثل تحريك الماوس فوق هذا العنصر أو النقر عليه. تشبه الفئات الزائفة إلى حد كبير أحداث JavaScript، لكنها لا تملك نفس القدرة على التعامل مع العناصر.
محدد: فئة زائفة { الخاصية: القيمة؛ }
يعني a:hover
في المثال أن المرساة ستبدو أيضًا بهذا الشكل عندما يقوم المستخدم بالتمرير فوق ارتباط تشعبي.
الطبقة الزائفة | تعريف |
:hover | يقوم بتغيير العنصر عن طريق المرور فوقه. |
:active | قم بتغيير العنصر من خلال النقر عليه. |
:link | يغير جميع الروابط التي لم تتم زيارتها. |
:visited | يغير جميع الروابط التي تمت زيارتها. |
:focus | يغير عنصر <input> الذي يحتوي على التركيز. |
:checked | يغير جميع عناصر <input> المميزة. |
:disable | يغير كافة عناصر <input> المعطلة. |
:enabled | يغير كافة عناصر <input> الممكّنة. |
:empty | يغير كافة عناصر <p> التي لا تحتوي على عناصر فرعية. |
:first-child | يغير كل عنصر <input> ممكّن. |
:enabled | يغير كل عنصر <input> ممكّن. |
:first-child | يغير كل عنصر <p> الذي يمثل الطفل الأول للعنصر الأصلي. |
:first-of-type | يقوم بتغيير كل عنصر <p> وهو العنصر <p> الأول للعنصر الأصلي الخاص به. |
:in-range | يقوم بتغيير عناصر <input> بقيمة ضمن نطاق محدد. |
:invalid | يغير كافة عناصر <input> إلى قيمة غير صالحة. |
:lang(language) | يغير كل عنصر <p> بقيمة سمة lang تبدأ بـ " it ". |
:last-child | يقوم بتغيير جميع عناصر <p> التي تمثل العناصر التابعة الأخيرة للعنصر الأصلي. |
:last-of-type | يغير كل عنصر <p> يمثل العنصر <p> الأخير في العنصر الأصلي الخاص به. |
:link | يغير جميع الروابط التي لم تتم زيارتها. |
:not(selector) | يغير كل عنصر ليس العنصر <p> . |
:nth-child(n) | يغير كل عنصر <p> مرتب من العنصر الأصلي الخاص به. |
:nth-last-child(n) | يغير كل عنصر <p> مرتب من العنصر الأصلي الخاص به، بدءًا من العنصر الفرعي الأخير. |
:nth-last-of-type(n) | يغير كل عنصر <p> يمثل العنصر <p> الثاني من العنصر الأصلي، بدءًا من العنصر الفرعي الأخير. |
:nth-of-type(n) | يقوم بتغيير كل عنصر <p> وهو العنصر <p> الثاني للعنصر الأصلي. |
:only-of-type | يغير العنصر <p> الذي يعد العنصر <p> الوحيد من العنصر الأصلي الخاص به. |
:only-child | يقوم بتغيير كل عنصر <p> وهو الابن الوحيد للعنصر الأصلي الخاص به. |
:optional | تغيير عناصر <input> بدون السمة "المطلوبة". |
:out-of-range | تغيير عناصر <input> باستخدام atr
يوسع
تطبيقات ذات صلة
نوصي لك
أخبار ذات صلة
الكل
|