Scribd
Upload
5 views

Introduction of html css java (understanding level_ easy)

Uploaded by

yefaf38005
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
5 views

Introduction of html css java (understanding level_ easy)

Uploaded by

yefaf38005
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 2

### Introduction to HTML, CSS, and JavaScript

HTML, CSS, and JavaScript are the three core technologies used to build web pages.
Each plays a unique role, and together, they form the foundation of the modern web.
Here's a simple breakdown of each:

---

### **HTML (HyperText Markup Language)**

HTML is the structure of a webpage. It defines the content and layout of the page
using "tags." Think of HTML as the skeleton of a website.

- **Purpose**: Organize content (headings, paragraphs, images, links).


- **Example**:
```html
<html>
<head>
<title>My Page</title>
</head>
<body>
<h1>Welcome to My Website</h1>
<p>This is a simple paragraph.</p>
</body>
</html>
```

### **CSS (Cascading Style Sheets)**

CSS controls how HTML elements look—like colors, fonts, and layout. It’s the style
that makes a webpage visually appealing.

- **Purpose**: Style the webpage (colors, fonts, positioning).


- **Example**:
```css
h1 {
color: blue;
font-size: 30px;
}
p {
font-family: Arial, sans-serif;
color: gray;
}
```

### **JavaScript**

JavaScript makes a webpage interactive. It lets you add dynamic features like
buttons, forms, and animations that respond to user actions.

- **Purpose**: Add behavior to a page (respond to clicks, update content).


- **Example**:
```javascript
document.getElementById("button").onclick = function() {
alert("Button clicked!");
};
```

---
### How They Work Together

1. **HTML** provides the structure (headings, paragraphs, images).


2. **CSS** styles it (color, layout, fonts).
3. **JavaScript** adds interactivity (animations, event handling).

**Example:**

```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Interactive Page</title>
<style>
body { font-family: Arial, sans-serif; text-align: center; }
button { padding: 10px 20px; font-size: 16px; background-color: #4CAF50; color:
white; }
</style>
</head>
<body>
<h1>Welcome!</h1>
<button id="button">Click Me!</button>

<script>
document.getElementById("button").onclick = function() {
alert("Hello, World!");
};
</script>
</body>
</html>
```

Here:
- **HTML** builds the content.
- **CSS** styles the button.
- **JavaScript** makes the button show an alert when clicked.

---

### Conclusion

- **HTML**: Structures the content.


- **CSS**: Styles the content.
- **JavaScript**: Makes the content interactive.

These three technologies work together to create websites that are functional,
beautiful, and engaging.

You might also like