Answer the following questions with your group:
- How do you link a JavaScript file to an HTML document?
- How do you link a CSS file to an HTML document?
- What are the roles of HTML, CSS, and JavaScript on a webpage?
- What is the DOM? How is it related to HTML, CSS, and JavaScript?
- How does HTML get rendered into DOM?
- What are elements?
- What are attributes in HTML?
- How can we interact with HTML?
Answer 1)
External:
<script src="script.js"></script>
Inline: <script> alert("Hello from inline JavaScript!"); </script>
Answer 2) To link a CSS file with HTML, we use this line:
<link rel="stylesheet" type="text/css" href="styles.css">
Answer 3)
Answer 4)
The DOM acts as a bridge between the structure of HTML, the styles applied with CSS, and the dynamic behavior and interactions implemented with JavaScript. Through the DOM, JavaScript can access, modify, and update the content and presentation of web documents, creating a dynamic and responsive user experience on the web.
Answer 5)
Browser reads HTML like instructions, builds DOM like Lego bricks. Each element a brick, nested based on structure. Attributes add details to each brick. Ready for styling and interaction!
Answer 6)
Elements are the building blocks of HTML that define different parts of a webpage, like headings, paragraphs, images, links, and containers. Each element is represented by an opening tag, content, and a closing tag, and can have attributes that provide additional information. Elements help structure and organize content on a webpage and make up the structure of the DOM (Document Object Model).
Answer 7)
Attributes in HTML add extra info to elements, like name tags on Lego bricks. They come in pairs (name="value"), telling the browser more about how to handle the element.
Example:
<img src="image.png" alt="My cool picture">
-src
tells where to find the image,alt
provides descriptive text if the image fails to load.Answer 8)
We interact with HTML through JavaScript, like a remote control for a TV. Click a button, JavaScript changes it (e.g.,
<button onclick="alert('Clicked!')">Click me</button>
). Want more interactivity? Explore JavaScript!Activity room #5
Aween Ezzat
Sajad Ismael
Lava Ahmed
Mardin Luqman Omer