Introduction to Programming Using HTML and CSS – A Textbook

03 Apr 2025 Microsoft
Introduction to Programming Using HTML and CSS – A Textbook

Introduction to Programming Using HTML and CSS 

1. Introduction to Programming 

What is Programming? 

Programming is the process of giving instructions to a computer to perform specific tasks. It involves writing code in programming languages that the computer can understand and execute. Programming is used in various fields, including web development, mobile apps, artificial intelligence, and more. 

Why Learn Programming? 

- High Demand for Developers: Programming skills are highly sought after in the job market. 

- Problem-Solving Skills: Coding improves logical thinking and creativity. 

- Build Your Own Projects: From websites to apps, programming allows you to bring ideas to life. 

Introduction to Web Development 

Web development involves creating websites and web applications. It consists of: 

- Frontend Development: What users see (HTML, CSS, JavaScript). 

- Backend Development: Server-side logic (Python, PHP, Node.js). 

- Full-Stack Development: Both frontend and backend. 

Introduction to Programming Using HTML and CSS are the foundation of frontend development. 

Introduction to Programming Using HTML and CSS – A Textbook

2. Getting Started with HTML 

What is HTML? 

HTML (HyperText Markup Language) is the standard language for Microsoft creating web pages. It defines the structure of a webpage using tags. 

Structure of an HTML Document 

```html

    My First Web Page

   

Hello, World!

   

This is my first HTML page.

- `` declares the document type. 

- `` is the root element. 

- `` contains meta-information. 

- `` contains visible content. 

Basic HTML Tags 

- `

to

`: Headings 

- `

`: Paragraph 

- ``: Link 

- ``: Image 

Creating Your First Web Page 

1. Open a text editor (Notepad, VS Code). 

2. Write the HTML code. 

3. Save as `index.html`. 

4. Open in a browser. 

3. HTML Elements and Attributes 

Headings, Paragraphs, and Text Formatting 

```html

Main Heading

Subheading

This is a bold and italic text.

Lists 

Ordered List: 

```html

       

  1. First Item
  2.    

  3. Second Item

Unordered List: 

```html

       

  • Item 1
  •    

  • Item 2

Links and Images 

```html

Visit Example

Description

4. HTML Forms and Input Elements 

Creating Forms 

```html

   

   

   

Input Types 

- `text`, `password`, `email`, `number` 

- `radio`, `checkbox` 

- `date`, `file` 

5. Introduction to CSS 

What is CSS? 

CSS (Cascading Style Sheets) styles HTML elements. It controls layout, colors, fonts, and responsiveness. 

CSS Syntax 

```css

selector {

  property: value;

}

Example: 

```css

h1 {

    color: blue;

    font-size: 24px;

}

Inline, Internal, and External CSS 

- Inline: `

Text

` 

- Internal: Inside `