Scribd
Upload
2 views

Building Your First Website A Quick and Easy HTML & CSS Tutorial

This document provides a step-by-step tutorial for building a simple website using HTML and CSS. It includes instructions for writing and saving HTML and CSS code in Notepad, as well as how to view the webpage in a browser. The tutorial is designed for beginners to help them understand the basics of web development.

Uploaded by

mhd.idris8004
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
2 views

Building Your First Website A Quick and Easy HTML & CSS Tutorial

This document provides a step-by-step tutorial for building a simple website using HTML and CSS. It includes instructions for writing and saving HTML and CSS code in Notepad, as well as how to view the webpage in a browser. The tutorial is designed for beginners to help them understand the basics of web development.

Uploaded by

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

"Building Your First Website: A Quick and Easy HTML & CSS Tutorial"**

Step-by-Step Tutorial: Setting Up Your First Web Page

Step 1: Writing the HTML Code

1. Open Notepad:

- On Windows, search for and open Notepad.

2. **Write the HTML Code**:

- Copy and paste the following HTML code into Notepad:

```html

<!DOCTYPE html> <!-- Defines the document type as HTML5 -->

<html lang="en"> <!-- Starts the HTML document and sets the language to English
-->

<head> <!-- Contains meta-information about the document -->

<title>Building Your First Website: A Quick and Easy HTML & CSS Tutorial</title>
<!-- Sets the title of the webpage, displayed on the browser tab -->

<link rel="stylesheet" type="text/css" href="styles.css"> <!-- Links the CSS file to


the HTML document -->

</head> <!-- Closes the head section -->

<body> <!-- Contains the content of the document -->

<h1>Welcome to my site</h1> <!-- Defines a top-level heading and closes it -->

<p>I am writing simple HTML code for my students to help them understand the
basics.</p> <!-- Defines a paragraph and closes it -->
</body> <!-- Closes the body section -->

</html> <!-- Closes the HTML document -->

```

3. **Save the HTML File**:

- Click on `File` in the top-left corner of the Notepad window, then select `Save As`.

- In the `Save as type` dropdown menu, select `All Files`.

- Name the file `index.html` and choose a location to save it. Click `Save`.

#### Step 2: Writing the CSS Code

1. **Open a New Notepad File**:

- Open a new Notepad window.

2. **Write the CSS Code**:

- Copy and paste the following CSS code into Notepad:

```css

/* This CSS file styles the HTML content */

/* Selects the body element and applies styles */

body {

background-color: #f0f0f0; /* Sets a light gray background color */


font-family: Arial, sans-serif; /* Sets the font family to Arial */

color: #333; /* Sets the text color to dark gray */

/* Selects the h1 element and applies styles */

h1 {

color: #007BFF; /* Sets the heading text color to blue */

text-align: center; /* Centers the heading text */

/* Selects the p element and applies styles */

p{

font-size: 16px; /* Sets the paragraph font size */

line-height: 1.5; /* Sets the line height for better readability */

margin: 20px; /* Adds margin around the paragraph */

```

3. **Save the CSS File**:

- Click on `File` in the top-left corner of Notepad, then select `Save As`.
- In the `Save as type` dropdown menu, select `All Files`.

- Name the file `styles.css` and save it in the same location as `index.html`. Click
`Save`.

#### Step 3: Viewing the Web Page

1. **Locate the Files**:

- Navigate to the location where you saved your HTML and CSS files.

2. **Open the HTML File in a Browser**:

- Right-click on the HTML file (e.g., `index.html`).

- Select `Open with` and choose your preferred web browser (e.g., Chrome, Firefox,
Edge).

You might also like