My First Post

Excerpt : This is my first post

How to create your first webpage using HTML (Level - Beginner)

Creating your first webpage can seem like a daunting task, but with HTML it is much simpler than you might think. HTML stands for Hypertext Markup Language and is the standard markup language used to create web pages.

So in this tutorial, I am going to teach you how you can create your first webpage using HTML. Let's get started :

Getting Started : Pre-requirements

To get started, you will need a text editor such as Notepad++, Sublime Text, or Visual Studio Code. You will also need a web browser like Brave, Google Chrome, Mozilla Firefox, Microsoft Edge, Safari, Opera Mini etc. to view your webpage.

Code Editor

A text editor is a program that allows you to create and edit text files. Notepad is a basic text editor that comes with Windows. Sublime Text and Visual Studio Code are more advanced text editors that offer features such as syntax highlighting, code completion, and debugging tools. Whichever text editor you choose, make sure it is capable of saving files in plain text format.

Web Browser

A web browser is a program that allows you to view web pages on the internet. Some popular web browsers include Google Chrome, Mozilla Firefox, and Microsoft Edge. You will use your web browser to view the web pages you create with HTML.

Writing HTML Code

HTML code is made up of tags, which are enclosed in angle brackets. Tags tell the web browser how to display the content on the page. The basic structure of an HTML document is as follows:

index.html

<!doctype html>
<html>
    <head>
        <title>{Title of your webpage}</title>
    </head>
    <body>
        {Content of your webpage}
    </body>
</html>

In this example, we have a heading h1, a paragraph p, an image img, and a link a. Let's break down each element:

Headings

Headings are used to define the structure of your web page. There are six levels of headings, from h1 to h6. The h1 tag is used for the main heading of your page, while the lower-level headings are used for subheadings.

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

Paragraphs

Paragraphs are used to display text content on your web page. The p tag is used to create a new paragraph.

<p>Hello ! I am a paragraph</p>

Images

Images are used to display graphics on your web page. The img tag is used to insert an image into your page. The src attribute is used to specify the URL of the image, and the alt attribute is used to provide a text description of the image.

Links

Links are used to connect your web page to other pages on the internet. The a tag is used to create a link. The href attribute is used to specify the URL of the page you want to link to.

Viewing Your Webpage

To view your webpage, save your HTML file with a .html extension and open it in your web browser. You should see your webpage displayed in the browser.

Lets Build Our First Webpage : So let's build a Webpage to showcase about you - Your Name, Bio, Short Description, Some Images and Videos and Your Resume.pdf files as your Link. Sort of a Resume Web Page. You can get all the code of this tutorial in the Github Repo here. So let’s get started :

index.html

<html lang="en">
    <head>
        <title>Sujay Kundu - Software Engineer</title>
        <style type="text/css">
            #profileImg {
                width: 200px;
                height: 200px;
            }
        </style>
    </head>
    <body>
        <div>
            <img src="profile.jpg" alt="Sujay Profile Image" id="profileImg" />
            <h1>Sujay Kundu</h1>
            <h3>Software Engineer, Full Stack Web Developer</h3>
 
            <p>
                Full Stack Engineer with 4 years of experience in building
                websites, apps and managing teams
            </p>
 
            <a href="resume.pdf"><button>Download CV</button></a>
        </div>
    </body>
</html>

Now, save it as resume.html, and right click and open in your choosen Web Browser.

Woohoo!

Congratulations, you have created your first webpage using HTML! This is just the beginning of what you can do with HTML, so keep practicing and learning to create even more amazing webpages.