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?
1- Linking JavaScript and CSS to an HTML Document
JavaScript File: Use the <script> tag with the src attribute pointing to the file's location.
CSS File: Use the tag with rel="stylesheet" and the href attribute specifying the file's path.
2- Roles of HTML, CSS, and JavaScript on a Webpage
HTML: Defines the structure and content of the webpage.
CSS: Controls the presentation, styling, and layout of the webpage.
JavaScript: Adds interactivity, dynamic updates, and handles user interactions.
3- The DOM (Document Object Model)
Definition: The DOM is a programming interface for web documents, representing the page so that programs can change the document structure, style, and content.
Relation to HTML, CSS, and JavaScript: HTML provides the structure that gets transformed into the DOM. CSS styles the DOM elements, and JavaScript interacts with the DOM to dynamically change the content, style, or structure of the page.
4- How HTML Gets Rendered into the DOM
The browser parses HTML code to create the DOM, a tree-like structure representing the content and structure of the HTML document.
Elements
Elements are the individual components of a webpage, represented by tags in HTML, forming the building blocks of the DOM.
5- Attributes in HTML
Attributes provide additional information about HTML elements, such as setting an element's id, class, or specifying a source for media elements.
6- Interacting with HTML
Interaction with HTML is primarily done through JavaScript, which can manipulate the DOM, changing the content, structure, and style of the page based on user actions or events.
Ps: It was done by Me, Maram and Teba.