Scribd
Upload
2 views

Web_Development_Chapter_2

Web development

Uploaded by

aadig2626
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
2 views

Web_Development_Chapter_2

Web development

Uploaded by

aadig2626
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 4

Chapter 2: HTML & CSS Basics

### 2.1 Introduction to HTML


HTML (HyperText Markup Language) is the standard language used to create web pages. It
provides the basic structure of a webpage using elements (tags).

### 2.2 Basic HTML Structure


Every HTML document follows this structure:
```html
<!DOCTYPE html>
<html>
<head>
<title>My First Web Page</title>
</head>
<body>
<h1>Welcome to Web Development</h1>
<p>This is a paragraph.</p>
</body>
</html>
```

### 2.3 Common HTML Elements


- `<h1>` to `<h6>`: Headings
- `<p>`: Paragraph
- `<a href="URL">`: Hyperlink
- `<img src="image.jpg" alt="Image">`: Image
- `<ul>`, `<li>`: Unordered List
- `<ol>`, `<li>`: Ordered List
- `<table>`: Tables
- `<form>`: Forms (input, button, etc.)

### 2.4 Introduction to CSS


CSS (Cascading Style Sheets) is used to style HTML pages by changing colors, layouts, fonts, etc.

### 2.5 Types of CSS


1. **Inline CSS** (inside an HTML tag)
```html
<p style="color: blue;">This text is blue.</p>
```
2. **Internal CSS** (inside `<style>` tag in `<head>`)
```html
<style>
p { color: red; }
</style>
```
3. **External CSS** (in a separate file, linked with `<link>`)
```html
<link rel="stylesheet" href="style.css">
```

### 2.6 Basic CSS Properties


- **Text Styling:** `color`, `font-size`, `text-align`
- **Box Model:** `margin`, `padding`, `border`, `width`, `height`
- **Layout:** `display`, `position`, `flexbox`, `grid`

### 2.7 Simple Web Page Example with CSS


**HTML (index.html):**
```html
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Welcome</h1>
<p>This is a styled paragraph.</p>
</body>
</html>
```

**CSS (style.css):**
```css
body {
background-color: lightblue;
text-align: center;
}
```

### Exercises:
#### Fill in the Blanks
1. The full form of HTML is _______.
2. The `<a>` tag is used to create _______.
3. CSS stands for _______.
4. The `<h1>` tag represents _______.
5. To apply CSS to multiple pages, we use _______ CSS.

#### Multiple Choice Questions (MCQs)


1. Which tag is used to create a hyperlink?
a) `<p>`
b) `<a>`
c) `<h1>`
d) `<link>`

2. What is the purpose of the `<img>` tag?


a) To display an image
b) To create a table
c) To format text
d) To add links

3. Which CSS property is used to change text color?


a) `background-color`
b) `text-align`
c) `color`
d) `font-style`

4. What is the correct way to apply an external CSS file?


a) `<css> style.css </css>`
b) `<link rel="stylesheet" href="style.css">`
c) `<script src="style.css">`
d) `<style> style.css </style>`

5. The box model in CSS consists of which of the following?


a) Margin, Padding, Border, Content
b) Font-size, Background, Text-align, Margin
c) Header, Footer, Body, Section
d) Position, Display, Width, Height

### Answer Key:


#### Fill in the Blanks:
1. HyperText Markup Language
2. Hyperlinks
3. Cascading Style Sheets
4. A heading
5. External

#### MCQs:
1. b) `<a>`
2. a) To display an image
3. c) `color`
4. b) `<link rel="stylesheet" href="style.css">`
5. a) Margin, Padding, Border, Content

You might also like