Scribd
Upload
4 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
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
4 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
We take content rights seriously. If you suspect this is your content, claim it here.
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