DOM-intro.md

Questions: Frontend File Setup

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- <script src="path/to/your/script.js"></script>
2-
3- HTML :- structure of the page
CSS :- design or style of the page
JS :- Interactivity
4- The DOM is a tree-like structure generated from the HTML file that we created and loaded into the browser.
HTML:- When a browser loads an HTML document, it parses the document and creates a corresponding DOM tree.
CSS:- DOM can modify the CSS properties of elements, such as changing colors, sizes, positions.
JS:-JavaScript can access, modify, add, or remove elements from the DOM, change their attributes, manipulate their styles, and respond to various events triggered by user interactions or browser actions.
5-When a web browser loads an HTML document, it goes through a process called "parsing" to create the Document Object Model (DOM).
6- In the context of HTML and the Document Object Model (DOM), elements are the building blocks of a web page's structure. An element consists of a start tag, its content, and an end tag.

How do you link a JavaScript file to an HTML document?
we put this tag in the bottom of our body tag

<script src="./../.js"></script>

How do you link a CSS file to an HTML document?
we put this tag inside of our head tag

What are the roles of HTML, CSS, and JavaScript on a webpage?
HTML is responsible of the structure of the webpage, CSS is responsible of the styling and formatting the webpage, JS is responsible for interactivity and dynamic behavior.

What is the DOM? How is it related to HTML, CSS, and JavaScript?
DOM is Document Object Model, The DOM serves as the interface between HTML, CSS, and JavaScript, When a web page is loaded, the browser creates a Document Object Model of the page, and it allows for JS to make changes after the html is done reloading.

Abdulrahman khalil, Aras Yousef

Answer 1)

• There are 2 ways to link a JS file; inline and external, which they can be written this way:
  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)

• HTML (Structure): Provides the structure and content of the webpage using markup elements like headings, paragraphs, images, links, and forms.
• CSS (Style): Controls the presentation and styling of HTML elements, defining properties like colors, fonts, spacing, and layout to enhance visual appearance.
• JavaScript (Behavior and Interactivity): Adds interactivity and dynamic functionality to web pages by enabling actions like user input validation, DOM manipulation, animations, and asynchronous data retrieval.

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

1. How do you link a JavaScript file to an HTML document?

   • Using the <script> tag with the src attribute, like this:

     <script src="script.js"></script>

2. How do you link a CSS file to an HTML document?

   • Using the <link> tag with the href attribute and rel="stylesheet", like this:

     <link rel="stylesheet" href="styles.css">

3. What are the roles of HTML, CSS, and JavaScript on a webpage?

   • HTML provides the structure and content.
   • CSS styles the HTML elements to enhance appearance.
   • JavaScript adds interactivity and dynamic behavior.

4. What is the DOM? How is it related to HTML, CSS, and JavaScript?

   • The DOM (Document Object Model) is a programming interface for web documents.
   • It represents the HTML document as a hierarchical tree of objects.
   • JavaScript interacts with the DOM to manipulate HTML and CSS dynamically.

5. How does HTML get rendered into DOM?

   • HTML content is parsed and converted into a hierarchical DOM tree by the browser during page load.

6. What are elements?

   • Elements are HTML building blocks consisting of start and end tags, defining structure and content.

7. What are attributes in HTML?

   • Attributes provide additional information about HTML elements and are defined within the start tag.

8. How can we interact with HTML?

   • We can interact with HTML using JavaScript to manipulate DOM elements, handle events, and update content dynamically.