Skip to content

Instantly share code, notes, and snippets.

@hiba-machfej

hiba-machfej/DOM.md

Forked from tech-chieftain/DOM.md
Created August 8, 2023 08:30
Show Gist options
  • Save hiba-machfej/b9b662a84ed51cb04209dd5e7acc7df1 to your computer and use it in GitHub Desktop.
Save hiba-machfej/b9b662a84ed51cb04209dd5e7acc7df1 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
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?
@ismail-benlaredj
Copy link

ismail-benlaredj commented Aug 8, 2023 •
edited
Loading

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

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

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

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

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

  • HTML provides the structure and content of a webpage.
  • CSS controls the appearance and layout of the webpage.
  • JavaScript adds interactivity and dynamic behavior to the webpage.

What is the DOM? How is it related to HTML, CSS, and JavaScript?
res
The DOM represents the structural pieces of a web document as objects that can be accessed and manipulated. In other words, the DOM allows you as a software developer to do the following:

Create and build web documents.
Navigate the structure of web documents.
Add, modify, or delete elements and content within web documents.

@farouk26
Copy link

farouk26 commented Aug 8, 2023

  1. We write the <script> tag before the end of the tag
  2. We link the CSS file into the Head element
  3. HTML is the main structure of the website, CSS makes the website look more beautiful , responsive ... etc whereas JavaScript is the functionality of the website
  4. Its the hierarchy of the website it is also the bridge that allows JavaScript to access and modify the content and styles defined by HTML and CSS
  6. Elements are the building blocks of web pages, defined in HTML using tags.
  7. They provide additional information about elements , They're used within opening tags
  8. we select them

@riadhmouamnia
Copy link

1- using the <script> tag
2- using element with stylesheet attribute
3- HTML => structure, CSS => Styling, JavaScript => Interactivity
4- DOM stands for Document Object Model, it's the representation of the HTML Elements in a tree-like structure,
5- the HTML file gets converted to a Dom Object and then the browser uses the DOM object to create the rendered page
6- it's an opening and closing HTML tag along with its content also known as an HTML component
7- Attributes are additional information that you can pass to an element as well as controlling an element's behavior and appearance
8- via web browsers

@merzoukfatima
Copy link

merzoukfatima commented Aug 8, 2023 •
edited
Loading

  1. <script type="text/javascript" src="script.js"></script>
  2. <//link type="text/css" href="style.css"/>
  3. HTML is for the structure, CSS is the presentation style, and JS makes it all interactive.
  4. The DOM is a model for the code, and it is the middleman linking the code and the browser.
  5. through parsing which is when your browser and turn it a neet plan called the dom tree

@GhaniBahri
Copy link

GhaniBahri commented Aug 8, 2023 •
edited
Loading

  1. <script src="myscripts.js"></script>
  2. .....< link rel="stylesheet" href ="style.css">
  3. html for structuring the page, CSS for styling , Javascript for the behaviour
  4. DOM represent how elements are structured and nested, with DOM we can remove, insert, and modify elements
  5. it gets rendered as a tree.
  6. elements are HTML tags
  7. attributes that add specification to HTML tag
  8. ...

@HachemBouhadede
Copy link

  1. How do you link a JavaScript file to an HTML document?
    there's 2 options :
    option 1: at the beginig in the head tag (less efficiant way)
    option 2: at the end of the body tag inside a script tag (more efficiant way)
    that can via a path that we select

  2. How do you link a CSS file to an HTML document?
    it goes under the style tag in the head section when it's referenced by another file (external)

  3. What are the roles of HTML, CSS, and JavaScript on a webpage?
    HTML containes the context of the page
    CSS styles and gives a visuale look to the website
    JS the interaction and click-on of the elements on the website

  4. What is the DOM? How is it related to HTML, CSS, and JavaScript?
    DOM: a programming interface for web documents
    The DOM represents the document as nodes and objects; that way, programming languages can interact with the page.
    The DOM provides a way for JavaScript to access and manipulate the content, structure, and presentation of a web page

  5. How does HTML get rendered into DOM?
    and constructs the CSSOM Tree from it. After these trees are constructed, then it constructs the Render-Tree from it.

6.What are elements?
An HTML element is defined by a start tag, some content, and an end tag. HTML Elements. The HTML element is everything from the start tag to the end tag:

  1. What are attributes in HTML?
    attributes are special words used inside the opening tag to control the element's behaviour. HTML attributes are a modifier of a HTML element type.

  2. How can we interact with HTML?
    with respect

@Ben-Tewfik
Copy link

1 we use the script tag at the end of the body
2 we use the self closing link tag in the head
3 Html is the structure and css add the visual appearence and js interactivity
4 Dom is document object model programming interface that allows us to create, change, or remove elements from the document. we can manipulate the page using html css and js
5 the DOM turns each HTML element into a node in its tree while keeping the structure of the elements, going from the global which is the parent element and nested elements as child element
6 HTML elements are the building blocks of web pages, represented by tags like and
7 Attributes in HTML provide additional information about an element and are defined within its opening tag to modify its behavior or appearance
8 Interacting with HTML involves using JavaScript to manipulate or modify the content and behavior of the webpage dynamically. One way to interact with HTML is by using the Document Object Model (DOM) API in JavaScript.

@Zino0031
Copy link

Zino0031 commented Aug 8, 2023

1- with script tag with the src attribute : <script src="yourScript.js"></script>
2-We link a CSS file to an HTML document by using the tag in the head section
3- HTML structures content, CSS styles it, and JavaScript adds interactivity to webpages.
4-The DOM is a programming interface representing web documents as object trees. JavaScript uses it to access, update content, and create interactive web pages.
5-Browsers parse HTML into a tree-like DOM structure.
6- Elements are individual components in HTML that define the structure and content of a webpage.
7-Attributes provide info about elements, e.g., .
8-JavaScript enables dynamic actions, modifies content, responds to events.

@mohamed70601
Copy link

mohamed70601 commented Aug 8, 2023 •
edited
Loading

1- <script>./index.js</script>
2- <link rel="stylesheet" href="styles.css" />
3- HTML for structure, CSS for styling and JavaScript for interactiveness
4- DOM is responsible for tracking and reacting to the changes made by the user and the interface. DOM is a "middle layer" that presents the HTML, CSS and JavaScript loaded by the browser when we visit a page.
5- When a web page is loaded, the browser first reads the HTML text and constructs DOM Tree from it.
6- The Element object represents an HTML element defined by their tag.
7- HTML attributes provide additional information about HTML elements.
8- Interactive using buttoms and inputs.

@hasnahadd
Copy link

  1. to link js to html using script tag <script src="myscripts.js"></script>
  2. to link css to html using link rel
  3. html is for the structure of the website, css for the design makes the website colourful also controls the visual styling and layout and the and the js make it functional
  4. The Document Object Model (DOM) is a programming interface that represents the structured elements of a web page u can think as a middle layer between the user and the underline html css js ...when a web page is loaded, the browser first reads the HTML text and constructs DOM Tree from it. Then it processes the CSS whether that is inline, embedded, or external CSS and constructs the CSSOM Tree from it. After these trees are constructed, then it constructs the Render-Tree from it. its helps to manipulate the website and make it dynamic
  5. when a web page is loaded, the browser first reads the HTML text and constructs DOM Tree from it.
  6. Elements are the building blocks of web pages, defined in HTML using tags.
  7. They provide additional information about elements , They're used within opening tags

@liliumorion
Copy link

1- we link a JavaScript file to an HTML document using the <script> element: <script src="index.js"></script>.
2- we link a CSS file to an HTML document using the element: <link href="style.css"rel="stylesheet" >
3- the roles of HTML, CSS & JavaScript are as follows:
- HTML offers the core skeleton of a webpage.
-CSS controls the presentation and styling of it.
-JavaScript enables interactivity & dynamic behavior on it as well.
4- The DOM is a programming interface. it's a way web browsers organize & represent web pages in a structured hierarchical tree, allowing scripts like JS to access and modify the page in real time.
5- HTML gets rendered into the DOM by going through a process that we can simplify to the following:
-Parsing HTML, which means breaking down the HTML code into a structured format that the browser can understand.
-Creating the DOM Tree, in a hierarchical tree-like structure, where each HTML element becomes a node in this tree, and text within it becomes text nodes, while still respecting the order and the parent-child hierarchy.
-Styling, by applying CSS styles associated with the HTML elements.
-Rendering, which happens once the DOM tree is made, and that's when the browser uses the information from HTML, CSS & JS to render the web page on the screen.
6- an HTML element is a section that's enclosed within start and end tags and contains content between them.
7- HTML attributes are additional information that modifies the behavior or provides additional information about our elements.
8- interacting with HTML can occur in different ways, mainly using JS, frameworks, libraries etc..

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment