HTML Structure
<!DOCTYPE html>
<html>
<!DOCTYPE html>: Declares that the document is an HTML5 document.
<html>: The root element that wraps all the content in the webpage.
Head Section
<head>
<title>My First Webpage</title>
</head>
<head>: Contains metadata about the webpage.
<title>My First Webpage</title>: Sets the title of the webpage, which appears on the browser
tab.
Body Section
<body style="background-color: #FF0000; color: white; margin: 20px;">
<body>: The main content of the webpage.
style="background-color: #FF0000; color: white; margin: 20px;" :
o background-color: #FF0000; → Sets the background color to red.
o color: white; → Sets the text color to white.
o margin: 20px; → Adds a margin of 20 pixels around the body.
Heading Element
<h1 style="margin-top: 60px; font-family:'Pristina', cursive; text-align: center; font-
size: 48px;">
Welcome to my first blog!!
</h1>
<h1>: Defines the main heading.
style="...": Adds inline CSS styling.
o margin-top: 60px; → Adds a top margin of 60 pixels.
o font-family:'Pristina', cursive; → Uses the "Pristina" font (a cursive style).
o text-align: center; → Centers the heading.
o font-size: 48px; → Sets the font size to 48 pixels.
Paragraph Element for Content
<p id="text-content" style="margin-left: 100px; margin-right: 100px; font-family:
'Sitka Banner', sans-serif; font-size: 24px; text-align: left;">
</p>
<p id="text-content">: Creates an empty paragraph with an id of text-content, which will
later be filled with text from an external file.
style="...":
o margin-left: 100px; margin-right: 100px; → Adds left and right margins of 100
pixels.
o font-family: 'Sitka Banner', sans-serif; → Uses the "Sitka Banner" font.
o font-size: 24px; → Sets the font size to 24 pixels.
o text-align: left; → Aligns text to the left.
JavaScript to Load External Text File
<script>
fetch('[Link]')
.then(response => [Link]()) // Read file as text
.then(data => {
[Link]('text-content').innerText = data; // Insert text
into <p>
})
.catch(error => [Link]('Error loading text:', error)); // Handle errors
</script>
<script>: This is the JavaScript section that dynamically loads content into the page.
fetch('[Link]'): Fetches the file [Link] from the server.
.then(response => [Link]()): Reads the response as plain text.
.then(data => { [Link]('text-content').innerText = data; }) :
o Retrieves the paragraph element (<p id="text-content">).
o Inserts the text from [Link] into this paragraph.
.catch(error => [Link]('Error loading text:', error)); :
o If an error occurs (e.g., file not found), it logs an error message in the browser console.
Final Output
A webpage with:
o A red background and white text.
o A large, centered heading ("Welcome to my first blog!!").
o A paragraph that will be filled with content from [Link].
Java scrict that fetches External content
fetch('[Link]')
The fetch() function is used to make a request to the file [Link].
This is an asynchronous operation, meaning it does not block the execution of the rest of the script.
The function returns a Promise, which will either:
o Resolve with the response (if the file exists).
o Reject with an error (if the file is missing or there's a network issue).
.then(response => [Link]())
The .then() method is used to handle the response from fetch().
[Link]() is a built-in method that reads the response as plain text.
This also returns a Promise, which resolves with the text content of [Link].
.then(data => {
The second .then() is chained to the first one.
It takes the text content (data) from [Link] and executes the following block of code.
[Link]('text-content').innerText = data;
[Link]('text-content') :
o Finds the <p> element with the id="text-content".
.innerText = data;
o Replaces the inner text of the paragraph with the content from [Link].
o This means the paragraph will display the text from the file.
})
Closes the .then(data => { ... }) block.
.catch(error => [Link]('Error loading text:', error));
The .catch() method is used to handle errors that might occur during the fetch process.
If:
o The file doesn’t exist.
o The server is down.
o The user is offline.
Then, the .catch() block logs an error to the browser console using:
[Link]('Error loading text:', error);
This helps debug issues when the file cannot be loaded.
Summary of Execution Flow
1. Fetch the file → fetch('[Link]')
2. Convert response to text → .then(response => [Link]())
3. Insert text into paragraph → .then(data => { [Link]('text-
content').innerText = data; })
4. Handle errors if any → .catch(error => [Link]('Error loading text:', error))
Would you like further clarifications on any part?