Answer the following questions with your group:
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.
Team [ Ibrahim Muhaned - Nada Al-Shakiry - Rawan Mustafa - Vinos Sarhad ]
- How do you link a JavaScript file to an HTML document?
With Script tag in the end of the body or on the head.
- How do you link a CSS file to an HTML document?
link tag in the head.
- What are the roles of HTML, CSS, and JavaScript on a webpage?
HTML is the structure of the web.
CSS is responsable of the appearance.
JS for functionality.
- What is the DOM? How is it related to HTML, CSS, and JavaScript?
The Document Object Model (DOM) is a programming interface that represents the structure of web documents as a tree of objects. It allows scripting languages like JavaScript to access and manipulate the content, structure, and style of web pages dynamically. Developers can use the DOM to access and modify elements, handle events, manipulate styles, and create interactive web applications without needing to reload the entire page.
- How does HTML get rendered into DOM?
When a web browser loads an HTML document, it reads the markup, breaks it down into elements, and constructs a tree-like structure called the Document Object Model (DOM). This DOM tree represents the structure of the HTML document. Each element in the HTML becomes a node in the DOM tree, with parent-child relationships reflecting the HTML hierarchy. The browser then renders the content based on the DOM structure and associated CSS styles, displaying the web page to the user.
- What are elements?
Elements in HTML are fundamental components that define the structure and content of web pages. They are enclosed in angle brackets and consist of a start tag, content, and an optional end tag. Elements can nest within each other, forming a hierarchical structure. They may have attributes that provide additional information or specify behavior. Overall, elements play a crucial role in organizing and presenting content on web pages.
- What are attributes in HTML?
HTML attributes provide additional information about HTML elements.
- How can we interact with HTML?
Using JavaScript, you can interact with the HTML DOM to dynamically modify the content and behavior of an HTML page. This allows you to create interactive web applications, implement dynamic user interfaces, and perform various operations on the document based on user actions or programmatic logic.
1.we write it in script tag in the body or we can write in the head.
2.we use a link tab in the head with href attrubute.
3. HTML is for structure and content, CSS for styling and javascript for functionality.
4.allows us to create, change, or remove elements from the document and DOM is used by CSS, HTML, JS to make the webpage functional.
5.when a webpage is loaded in a browser, the browser parses the HTML code and creates a DOM tree. DOM is the representation o f the HTML document as a tree structure of objects. where each element in the HTML code is represented as a node in the tree.
6.Elements are the bulding blocks of the HTMl document E.g (heading, paragraph and body).
7.It is additional piece of information for the elements provides extra details and functionality.
8.we can handle interaction using Javascript and modify the style with CSS.
Members:
Halwest Abubakir,
Mohammed Nazar,
Mawj M. Basheer,
Elaf Gardi.
1- it's <script> tag like that --> <script src="script.js"></script>
2- tag like that -->
3- -HTML provide the structure.
Q1/
<script src="JSfile.js"></script>Q2/
Q3/
HTML is a structure of the page, and CSS is the styling for its structure and JS provides interaction for the elements of the page.
Q4/
DOM is a programming interface that bridges between web pages and scripting languages.
Q5/
The browser first fetches the HTML file from the server then starts parsing the HTML code, this involves breaking it down into tokens, each token is then processed and converted into a corresponding node in the DOM tree.
Q6/
Room 1 : Dilan Ahmed | Zainab Al Najjar | Aya Hasan .
we can link javascript file to an HTML document by using script tag .
we can link CSS file to an HTML document by link tag.
HTML role: is for the structure of the webpage. | CSS Role : is giving the style over the structure we created with HTML.| Js Role: is for giving interactivity to the webpage we have.
DOM stands for Document Object Model ,and it is like a family tree for our HTML file when it is read by the browser it will become a tree like structure and object components for the JS and CSS . In other words, it will be the browser interface of the webpage file.
The HTML will be rendered into DOM through converting it into a tree like structure having branches . Afterwards, the browser will render that generated DOM tree into a visual representation of the webpage we have through rendering all the HTML CSS JS related files.
Elements are building blocks of the structure of the web page . Also, each element has its own tag, some of them are self closing tags like META tags, and the others needs to be closed by the developer like ul tag or p .
or
in HTML attributes are like adjectives in an English Sentence , the attributes provide furthermore information regarding the element tag we have and tells how to behave.
we can interact with HTML through CSS and JS , through CSS we can give the HTML styles that we want , and through JS we can manipulate the HTML elements and give them more interactivity.
1- we can use <script> tag and link the js file to the or of the HTML file.
2- use the tag inside the HTML section.
3- HTML for structure, CSS for style, and JS for interaction
4- it is an interface that makes HTML, CSS, and Javascript a tree-structured form
5- 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- The element is the border tag of the content and acts like the start tag and the closing tag for the content.
7- a piece of markup language used to adjust the behavior or display of an HTML element
8- by using js
Room 10
1- Pasand Yaba
2- Koshyar Abdulrahman
3- Astivan Basi
4- Payam Rasho
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
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)
<script src="script.js"></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)
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
How do you link a JavaScript file to an HTML document?
<script> tag with the src attribute, like this:
<script src="script.js"></script>How do you link a CSS file to an HTML document?
<link> tag with the href attribute and rel="stylesheet", like this:
<link rel="stylesheet" href="styles.css">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.we can link JavaScript file to an HTML document using the script tag with the attribute src.
2.we can link the CSS file to an HTML document using the tag inside the HTML section.
3.HTML defines the structure of our content, CSS determines the style and layout, and JavaScript makes the content interactive.
4.The Document Object Model (DOM) is a programming interface for web documents. It represents the page so that programs can change the document structure, style, and content. The DOM represents the document as nodes and objects; that way, programming languages can interact with the page.
5.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.An HTML element is defined by a start tag, some content, and an end tag.
7.An HTML attribute is a piece of markup language used to adjust the behavior or display of an HTML element.
8.Using JavaScript, you can interact with the HTML DOM to dynamically modify the content and behavior of an HTML page