My First HTML Website - Web Tutorial Space

That’s a fantastic choice! Building a simple HTML website is a great way for beginners to get started with web development. Here’s a basic outline to help you get started:

Table Of Contents

Setup your Development Environment
Create An HTML File
Write Your HTML Code
Preview Your Website
Continue Learning and Experimenting
Example
Example Live Code

Setup your Development Environment

Choose a text editor. There are many options available, such as Visual Studio Code,Notepad, Sublime Text, or Atom.Create a new folder on your computer where you’ll store your website files.

Create An HTML File

Open your text editor and create a new file.Save the file with a “.html” extension. For example, you could name it “index.html”.

Write Your HTML Code

Start with the <!DOCTYPE html> declaration, which tells the browser that this is an HTML5 document.Add the <html>, <head>, and <body> tags to structure your document.Inside the <head> section, you can add metadata such as the page title and links to external stylesheets or scripts.In the <body> section, you’ll add the content of your website using HTML tags like <h1>, <p>, <img>, <a>, etc.

Preview Your Website

Open your HTML file in a web browser to see how it looks.You can do this by double-clicking the file or by right-clicking it and selecting “Open with” your preferred browser.

Continue Learning and Experimenting

HTML is just the beginning of web development. Once you’re comfortable with HTML, you can start learning CSS to style your website and JavaScript to add interactivity.

Example

Here’s a simple example of what your “index.html” file might look like:

Header Section

First, We will create a html document type and also created language of html page. Then we will create header section of html page. It is included meta tags and title of webpage.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My First Website</title>
</head>

Content /Body Section

we will create the banner of webpage in using body tag. This is header of webpage using h1 tag.


<body>
    <header>
        <h1>Welcome to My First Website!</h1>
    </header>
</body>

Menu Section

This is a navigation menu using as a name <nav>.Here are three menu like Home,About,Contact using anchor tag as <a>.It can be written in inside of <body> tag.

<nav>
        <a href="#">Home</a>
        <a href="#">About</a>
        <a href="#">Contact</a>
    </nav>

Main Section

This is a main section of the webpage. It is included h2,p tag here.It can be written in inside of <body> tag.

<main>
        <h2>About Us</h2>
        <p>This is a simple website created with HTML and CSS. Feel free to explore!</p>
    </main>

Footer Section

This is the footer section of the webpage.It is in Body tag.

<footer>
        <p>&copy; 2024 My First Website. All rights reserved.</p>
    </footer>

Finally , we will finish the html tag of this script. Then We will save the website name using the .html extension.

Example Live Code

Here, This is my first html website. It is live example using codepen. you can edit and work on this file also.

See the Pen
My First Website by Meena Subash (@Meena-Subash-the-sasster)
on CodePen.

Feel free to ask if you have any questions or if there’s anything specific you’d like to learn about HTML!