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?
Linking a JavaScript file to an HTML document:
To link a JavaScript file to an HTML document, you use the <script> tag. There are a couple of ways to do this:
html
<script src="path/to/your/script.js"></script> <script> </script>The src attribute in the first example points to the external JavaScript file.
Linking a CSS file to an HTML document:
To link a CSS file to an HTML document, you use the tag within the section of your HTML file:
html
Here, the href attribute points to the external CSS file.Roles of HTML, CSS, and JavaScript on a webpage:
HTML (HyperText Markup Language): Provides the structure and content of the webpage.
CSS (Cascading Style Sheets): Defines the presentation and layout of the HTML elements.
JavaScript: Adds interactivity, dynamic behavior, and manipulates the content and style of the webpage.
DOM (Document Object Model):
The DOM is a programming interface for web documents. It represents the structure of a document as a tree of objects, where each object corresponds to a part of the document. It allows dynamic access and manipulation of the document's content using programming languages like JavaScript.
How HTML gets rendered into DOM:
When a browser loads an HTML document, it parses the HTML and creates a DOM representation of the document. The DOM is then used to render the webpage and allows scripts to dynamically interact with the content.
Elements:
In HTML, elements are the building blocks of a webpage. They are defined by HTML tags and represent different types of content (e.g., headings, paragraphs, images).
Attributes in HTML:
Attributes provide additional information about HTML elements. They are always included in the opening tag and come in name/value pairs (e.g., class="example").
Interacting with HTML:
JavaScript: Allows dynamic manipulation of the DOM. You can use JavaScript to select HTML elements, modify their content, change styles, and handle user interactions.
CSS: Defines the styles and layout of HTML elements.
HTML: Provides the structure and content of the webpage.