HTML, CSS and a little JavaScript
A web page is built from three layers. HTML gives the structure with elements: <h1> is a heading, <p> a paragraph, <ul> with <li> a list, <img> a picture, <button> a button. Most elements have an opening tag and a closing tag with a slash, such as <p> and </p>; <img> has no closing tag. An attribute such as id="msg" gives one element a unique name. CSS sets the look with rules of the form selector { property: value; }. The selector #msg picks the element with that id, .note picks every element with class="note", and h1 picks all headings. Sizes need a unit: 32px is valid, 32 alone is not. JavaScript makes the page react. document.getElementById("msg") finds the element, .textContent = "..." changes its text, .style.fontSize = 50 + "px" changes its size, and btn.onclick = () => { ... } says what to do when the button is clicked. In the example, clicking the button changes the empty paragraph to “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";
On paper, write a small page with a heading, one paragraph with class note, and a button with id go. Then write one CSS rule that makes the note paragraph yellow, with a valid colour name, and mark every opening tag and its closing tag.