DOM.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- via a script tag
2 - via a link tag
3- HTML is shaping the skeleton and structure of the Web page, CSS is It's the styles of it and JS comes to play the role of the brain of web page UIs.
4- The DOM is the Document Object Model. It is a tree-like structure that represents the HTML of a webpage. It is related to HTML, CSS, and JavaScript because it is the structure of the webpage on which we apply the styles for the web page as well as creating the infrastructure for making the interactions the that serves the website user. how can we interact with HTML?
To interact with HTML or web pages, Python web Frameworks are used, There are many Frameworks like Django, Pylons, laravel, etc..

1. To link a JavaScript file to an HTML document, you can use the <script> tag and set the "src" attribute to the location of the JavaScript file.

2. To link a CSS file to an HTML document, you can use the tag and set the "href" attribute to the file path of your CSS file, and the "rel" attribute to "stylesheet".

3. HTML provides the structure and content of a webpage. CSS is used to style and layout the webpage. JavaScript allows for interactive and dynamic elements on the webpage.

4. The Document Object Model (DOM) is a programming interface for HTML and XML documents. It represents the structure of a document as a tree-like object, allowing for manipulation and interaction with the elements of the document. It is related to HTML, CSS, and JavaScript as they all interact with the DOM to change the content and layout of a webpage.

5. HTML gets rendered into the DOM by the browser when a webpage is loaded. The browser reads the HTML code and creates a representation of it in the DOM, which can then be manipulated by JavaScript and CSS.

6. Elements are the basic building blocks of an HTML document, such as paragraphs, headings, images, and links. They are represented by tags in the HTML code and can have content, attributes, and other elements nested within them.

7. Attributes are additional pieces of information that can be added to an HTML element to provide additional information about that element or to control its behavior. They are specified in the opening tag of an element, and consist of a name and a value.

8. We can interact with HTML by manipulating the DOM using JavaScript, which allows us to change the content, layout, and behavior of elements on a webpage dynamically. We can also use CSS to change the styling of elements, and use HTML to change the structure and content of the webpage.

1. by using script tag. example : <script src="./src/index.js"></script>

2. by using link tag. example :

3. HTML provides the basic structure of sites, which is enhanced and modified by other technologies like CSS and JavaScript.
   CSS is used to control presentation, formatting, and layout.
   JavaScript is used to control the behavior of different elements.

4.DOM is a W3C (World Wide Web Consortium) standard. It is a platform and language independent interface standard that allows programs and scripts to dynamically access and update the content, structure, and style of a document.

When a web page loads, the browser builds the page’s DOM tree. In this way, we can change all HTML properties on the page, remove existing HTML elements and attributes, add new HTML elements and attributes, or change all CSS styles on the page with scripting languages ​​such as JavaScript.

5.HTML is rendered into the DOM by a web browser when a webpage is loaded. The browser parses the HTML code and creates a tree-like structure that represents the elements and attributes of the webpage.

6. Elements are the basic building blocks of an HTML document and are represented by tags, such as

   ,

   , and

   .

7. Attributes provide additional information about an HTML element and are used to define properties and behaviors of the element. They are added to the opening tag of an element and are in the form of name-value pairs. Example: .

8. To interact with HTML, you can use JavaScript to manipulate the elements and attributes of the webpage using the DOM API. This includes methods such as getElementById, querySelector, and innerHTML. Additionally, you can also use JavaScript events to respond to user interactions, such as a button click.

1 ===> <script src="myscripts.js"></script>
2 ===> rel="stylesheet" href="styles.css"
3 ===> Html >> structures , Css >> styles , Js >> for interactive
4 ===> The Document Object Model (DOM) connects web pages to scripts or programming languages by representing the structure of a document—such as the HTML representing a web page—in memory. Usually it refers to JavaScript, even though modeling HTML, SVG, or XML documents as objects are not part of the core JavaScript language.
5 ===> When a web page loads, the browser builds the page’s DOM tree. In this way, we can change all HTML properties on the page, remove existing HTML elements and attributes, add new HTML elements and attributes, or change all CSS styles on the page with scripting languages ​​such as JavaScript.
6 ===> Tags of html.
7 ===> Attributes usually come in name/value pairs like: name="value"
8 ===> Using JavaScript

1- <script src=""></script>

2- <link href="">

3- HTML: Human body comprising bones (skeleton) and the flesh
CSS: Clothes, Shoes, Perfume, Shades, Lipstick, Mascara, Foundation and every other thing that makes you look extra good ;)
JavaScript: Everything involving your movement (how you eat, laugh, frown, run, walk, sit and all)

4- DOM is a logical model that can be implemented in any convenient manner.It is based on an object structure that closely resembles the structure of the documents it models.

5- Data is sent over the Internet as byte packets. The browser must convert these data bytes into a form it understands. Firstly, bytes are converted to HTML characters and then to Tokens. In the next step, Tokens are converted into nodes. Nodes are different objects with certain properties. After the nodes are created, the DOM tree is created.

6-A DOM element is something like a DIV, HTML, BODY element on a page. You can add classes to all of these using CSS, or interact with them using JS.

7- HTML attributes are special words used inside the opening tag to control the element's behaviour.

8- 1. Encourage Social Sharing
2. Add Quizzes, Surveys, and Polls
3. Use Gamification
4. Suggest Relevant Links
5. Invite Conversations
6. Publish User-Generated Content
7. Run a Giveaway