HTML وCSS وقليل من JavaScript
تُبنى صفحة الويب من ثلاث طبقات. تعطي HTML البنية بعناصر: <h1> عنوان، و<p> فقرة، و<ul> مع <li> قائمة، و<img> صورة، و<button> زر. ولأكثر العناصر وسم فتح ووسم إغلاق فيه شرطة مائلة مثل <p> و</p>؛ أما <img> فليس له وسم إغلاق. والسمة مثل id="msg" تعطي عنصرًا واحدًا اسمًا فريدًا. وتحدد CSS الشكل بقواعد صيغتها selector { property: value; }. المحدد #msg يختار العنصر ذا هذا المعرّف، و.note يختار كل عنصر فيه class="note"، وh1 يختار كل العناوين. والأحجام تحتاج إلى وحدة: 32px صحيحة أما 32 وحدها فلا. وتجعل JavaScript الصفحة تتفاعل. document.getElementById("msg") تجد العنصر، و.textContent = "..." تغيّر نصه، و.style.fontSize = 50 + "px" تغيّر حجمه، وbtn.onclick = () => { ... } تحدد ما يحدث عند النقر على الزر. وفي المثال يغيّر النقر على الزر الفقرة الفارغة إلى «Take a short break.»
1<h1 id="title">Study plan</h1> 2<p>Three steps for today.</p> 3<ul> 4 <li>Read</li> 5 <li>Practise</li> 6 <li>Check</li> 7</ul> 8<button id="btn">Show tip</button> 9<p id="msg"></p>
1h1 { 2 color: navy; 3 font-size: 32px; 4} 5#msg { 6 margin: 8px; 7 padding: 6px; 8 border: 1px solid gray; 9} 10.note { 11 background-color: lightyellow; 12}
1const btn = document.getElementById("btn"); 2btn.onclick = () => { 3 document.getElementById("msg").textContent = "Take a short break."; 4};
1const text = document.getElementById("title"); 2text.style.fontSize = 50 + "px"; 3text.style.color = "green";
على الورق اكتب صفحة صغيرة فيها عنوان وفقرة صنفها note وزر معرّفه go. ثم اكتب قاعدة CSS واحدة تجعل فقرة note صفراء باسم لون صحيح، وعلّم كل وسم فتح مع وسم إغلاقه.