HTML, CSS, and JavaScript: The Basics You Need to Know
If you’ve ever wondered how websites are made, the answer usually involves three core technologies:
- HTML (HyperText Markup Language)
- CSS (Cascading Style Sheets)
- JavaScript
Together, these three are like the foundation of every website you see on the internet.
What is HTML? (The Structure)
HTML is the skeleton of a web page. It provides the basic structure and tells the browser what content should be displayed.
Think of HTML like building blocks of a house—the walls, doors, and windows are all created using HTML.
Example:
<!DOCTYPE html> <html> <head> <title>My First Webpage</title> </head> <body> <h1>Hello, World!</h1> <p>This is my first webpage using HTML, CSS, and JavaScript.</p> <button>Click Me!</button> </body> </html>
Output:
What is CSS? (The Style)
CSS is used to style your web page. Once HTML builds the structure, CSS makes it look good.
Imagine your house is built using bricks (HTML). CSS is the paint, interior design, and decorations that make your house beautiful.
Example (HTML with CSS Code):
<!DOCTYPE html>
<html>
<head>
<title>My First Webpage</title>
<style>
body {
background-color: #f2f2f2;
font-family: Arial, sans-serif;
}
h1 {
color: blue;
text-align: center;
}
p {
font-size: 18px;
color: gray;
text-align: center;
}
button {
display: block;
margin: 20px auto;
background-color: green;
color: white;
font-size: 16px;
padding: 10px 20px;
border: none;
border-radius: 8px;
cursor: pointer;
text-align: center; /* optional */
}
</style>
</head>
<body>
<h1>Hello, World!</h1>
<p>This is my first webpage using HTML, CSS, and JavaScript.</p>
<button>Click Me!</button>
</body>
</html>
Output:
What this does:
- Adds a light background to the page.
- Styles the heading (blue) and paragraph (gray).
- Styles the button:
- Green color.
- White text.
- Rounded corners.
- Changes to darker green when hovered over.
What is JavaScript? (The Brain)
JavaScript adds life to your website. With HTML and CSS alone, your site is just static. JavaScript makes it interactive.
Example (JavaScript Code): JS code is included in body tag.
<body>
<h1>Hello, World!</h1>
<p>This is my first webpage using HTML, CSS, and JavaScript.</p>
<button onclick="showMessage()">Click Me!</button>
<script>
function showMessage() {
alert("Hello! You clicked the button!");
}
</script>
</body>
Output:
What this does:
- When the button is clicked, the showMessage() function runs.
- This function shows a popup alert saying:
"Hello! You clicked the button!"
Comments
Post a Comment