Website - Everything Together
CHAPTER 5
A Deeper Dive Into the Core Technologies That Power the Web
Get yourself a Web Page !!
<!DOCTYPE html>
<html>
<head>
<title>Simple Button Example</title>
<style>
body {
text-align: center;
margin-top: 100px;
font-family: Arial, sans-serif;
}
button {
padding: 10px 20px;
font-size: 16px;
}
</style>
</head>
<body>
<h1>Hello!</h1>
<button onclick="showMessage()">Click Me</button>
<script>
function showMessage() {
alert("You clicked the button!");
}
</script>
</body>
</html>
🧪 How to Use:
- Open any text editor (like VS Code, Notepad++, or even plain Notepad).
- Paste the code above into a new file.
- Save it as
index.html. - Double-click the file to open it in your browser.
You’ll see a styled page with a button. Click it, and you’ll get a JavaScript-powered alert. 🎉
Don't be overwhelmed by your Web page code.
💡 What This Code Contains:
HTML - The Structure
- HTML stands for HyperText Markup Language, Which was named after HyperText Links and all these were invented by Tim Berners-Lee. Know the history of web >>>
- It tells the browser what content to show.
- <html> section, creates heading and button.
- Think of HTML as the skeleton or framework of the page.
CSS - The Style
- CSS stands for Cascading Style Sheets.
- It controls how things look.
- <style> section, centre everything and gives the button basic styling.
- CSS makes the page visually appealing.
JavaScript - The Behaviour
- JavaScript is a programming language.
- It lets you respond to user actions.
- <script> section, runs a function (
showMessage) when the button is clicked, which shows an alert. - JavaScript makes the web page interactive.
How does the Browser put all these Building Blocks together to build a Website:
STEP 1
- The browser reads the HTML line by line, and builds a DOM (Document Object Model).
- The DOM is like a map or blueprint of all the elements on the page (headings, buttons, images, etc.).
STEP 2
- The browser reads linked or embedded CSS rules.
- It creates a CSSOM (CSS Object Model) that defines how things should look.
STEP 3
- Then it combines the DOM + CSSOM to build a Render Tree — this is what the browser actually uses to display things.
STEP 4
- Once the page structure and style are ready, the browser runs JavaScript.
JavaScript can:
- Change elements in the DOM
- Add interactivity (e.g. respond to clicks)
- Load more content without refreshing the page
Hold tight — I know you're excited to develop your Web page into a fully functional Website. But before we jump into that, let’s first focus on something crucial: The Internet. After all, the web can’t function without it! Dive into Chapter 6 >>>
To make our website dynamic and save our data securely, we need to get familiar with backend servers >>> as well.
Comments
Post a Comment
Enter you valuable comments