Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
Scribd
Upload
5 views

Introduction of html css java (understanding level_ easy)

Uploaded by

yefaf38005
Copyright
© © All Rights Reserved
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
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