Scribd
Upload
10 views4 pages

Web_Development_Chapter_2

Web development

Uploaded by

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

Web_Development_Chapter_2

Web development

Uploaded by

aadig2626
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
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