# **DAY 1: Requirements & Introduction to HTML, CSS, and JavaScript**
## **Introduction**
Web development means creating websites.
We use **HTML**, **CSS**, and **JavaScript (JS)** together to build websites.
## **Meaning**
* **HTML:** Creates the structure of a webpage
* **CSS:** Designs and beautifies the webpage
* **JavaScript:** Makes the webpage interactive
## **Requirements to Get Started**
1. Computer or smartphone
2. Text editor (Notepad, VS Code)
3. Web browser (Chrome, Firefox)
4. Basic typing skill
5. Interest to learn
## **How They Work Together**
* HTML → Structure
* CSS → Design
* JS → Action
## **HTML Tags and Their Functions**
| Tag | Function |
| --------------- | ------------------------- |
| `<html>` | Holds all webpage content |
| `<head>` | Page information |
| `<title>` | Page title |
| `<body>` | Visible content |
| `<h1>` – `<h6>` | Headings |
| `<p>` | Paragraph |
| `<br>` | Line break |
| `<img>` | Image |
| `<a>` | Link |
## **Example**
```html
<h1>My Website</h1>
<p>Welcome to my page</p>
```
## **Classwork**
1. Define HTML
2. List two HTML tags and their uses
---
# **DAY 2: Form and Table Tags**
## **HTML Form**
A form is used to collect user information.
### **Form Tags and Functions**
| Tag | Function |
| ------------ | --------------- |
| `<form>` | Holds the form |
| `<input>` | Input field |
| `<label>` | Input name |
| `<button>` | Submit button |
| `<textarea>` | Long text input |
### **Form Example**
```html
<form>
<label>Name:</label>
<input type="text"><br><br>
<button>Submit</button>
</form>
```
---
## **HTML Table**
A table is used to arrange data in rows and columns.
### **Table Tags and Functions**
| Tag | Function |
| --------- | ------------- |
| `<table>` | Creates table |
| `<tr>` | Table row |
| `<th>` | Table heading |
| `<td>` | Table data |
### **Table Example**
```html
<table border="1">
<tr>
<th>Name</th>
<th>Age</th>
</tr>
<tr>
<td>Ali</td>
<td>12</td>
</tr>
</table>
```
## **Classwork**
1. What is a form used for?
2. Create a table with two rows
---
# **DAY 3: JavaScript (Variables, Functions, Onclick, getElementById)**
## **What is JavaScript?**
JavaScript makes a webpage interactive.
---
## **Variable**
A variable stores data.
### **Example**
```html
<script>
let name = "John";
</script>
```
---
## **Function**
A function performs an action.
### **Example**
```html
<script>
function showMessage() {
alert("Hello");
}
</script>
```
---
## **Onclick Button**
Onclick runs a function when a button is clicked.
```html
<button onclick="showMessage()">Click Me</button>
```
---
## **Document.getElementById**
Used to select an HTML element by its ID.
### **Example**
```html
<p id="demo">Text</p>
<script>
document.getElementById("demo").innerHTML = "Changed Text";
</script>
```
## **Classwork**
1. What is a variable?
2. Create a button that changes text
---
# **DAY 4: CSS (Cascading Style Sheets)**
## **What is CSS?**
CSS is used to design and style HTML content.
## **Ways to Add CSS**
1. Inline CSS
2. Internal CSS
3. External CSS
---
## **Common CSS Properties**
| Property | Function |
| ---------------- | ---------------- |
| color | Text color |
| background-color | Background color |
| font-size | Text size |
| text-align | Text position |
| border | Border line |
---
## **CSS Example**
```html
<style>
h1 {
color: blue;
text-align: center;
}
</style>
```
---
## **Classwork**
1. What is CSS used for?
2. Change paragraph color to red
0 comments:
Post a Comment