For enquiries call:

Phone

+1-469-442-0620

April flash sale-mobile

HomeBlogWeb DevelopmentWeb Development with HTML: Step-by-Step Guide

Web Development with HTML: Step-by-Step Guide

Published
05th Sep, 2023
Views
view count loader
Read it in
15 Mins
In this article
    Web Development with HTML: Step-by-Step Guide

    If you want to kick-start your web development with HTML career as a software developer, the Hyper Text Markup Language (HTML) is a great place to start. The structure of a website can be laid out using HTML. The complete website layout is created by combining HTML, CSS, and JavaScript. If you want to be grounded as an intending developer or a beginner, check out our Full Web Development Course. Without wasting any more time, let us begin this guide. 

    Web Development with HTML

    HTML comprises the interface, elements, and structure required for a website making HTML code. Its contents are organized using paragraphs, bullet lists, images, tables, and more. It is super important to always begin your web development journey with HTML so that you can learn how to arrange the layout of your web pages. In this tutorial, you will learn how to design and modify a website using standard HTML elements and techniques.

    Set Up Your HTML Project with VS Code / Any Code Editor

    The use of HTML in web development can be kickstarted by opening VS Code editor and creating a new project folder with the name tutorials. This folder will house all the files and folders to be created in this tutorial. Next, inside the tutorials folder, make a new file by right-clicking on your project folder and adding a new file called index.HTML. By implementing correctly, you should have your project structure look similar to the one below. Check out the Web Development Full Course at KnowledgeHut to get started with your web dev career. =

    View the Source Code of an HTML Document

    To view the source code of a page, open your browser, preferably Google Chrome, and visit any website. On the website's page, right-click on the page and view page source; this will reveal the source code of the HTML website. See what the HTML source code looks like in the image below. 

    Use and Understand HTML Elements

    An HTML document is made up of two essential parts, the head and the body. Each component of an HTML document is made up of tags. Opening and closing tags, however, some tags are self-closing by default. See the example code below, save it on your index.HTML file and view it on the browser. 

    <!DOCTYPE HTML> 
<HTML lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
    <title>Tutorial</title> 
</head> 
<body> 
    <h4>Hello World</h4> 
</body> 
</HTML> 

    From the code above, the HTML tag houses the entire code of your website. The head tag contains other tags that give further descriptions of your website. Also, the head tag contains other tags that help us load external resources. 

    Lastly, the body tag houses the content of a website, 98% of the tags in HTML are resident in the body tag. 

    Use Inline-level and Block-level Elements in HTML 

    In HTML document, elements can appear in-line or in-block. In-line elements follow each other horizontally, whereas block elements follow each other vertically. See the example code below. 

    <body> 
    <div> 
        <h4>In-line Elements Example</h4> 
        <span>These</span> 
        <span>Tags</span> 
        <span>Appear</span> 
        <span>In-line</span> 
    </div> 
    <div> 
        <h4>Block Elements Example</h4> 
        <p>These</p> 
        <p>Tags</p> 
        <p>Appear</p> 
        <p>In block</p> 
    </div> 
</body>

    See the result above on the page.

    Nest HTML Elements

    One frequent method common to HTML is nesting. Nesting implies that tags are put inside other tags, like a mother and her child. See the example below on how nesting is done in HTML. 

    <body> 
    <h4>List of ingredients</h4> 
    <ul> 
        <li>Rice</li> 
        <li>Fish</li> 
        <li>Cubes</li> 
        <li>Onion</li> 
    </ul> 
</body>

    Use HTML Attributes

    Attributes enable you to add extra behaviors to an HTML element; it normally follows the syntax below. 

    <element attribute="value"> 

    See the following use cases of attributes below.

    Add Images to Your Webpage Using HTML

    We use the <img> tag to insert images into an HTML page. The syntax can be expressed this way. 

    <img src="image_url"> 

    The <img> tag is the image container, whereas the image_url is the location of the image resource on the entire web. See the example below.

    <body> 
    <img 
      src="https://images.pexels.com/photos/207983/pexels-photo-207983.jpeg?cs=srgb&dl=pexels-pixabay-207983.jpg&fm=jpg" 
      width="500px" 
    /> 
</body>

    And here is the output for the HTML code above.

    Add Hyperlinks in HTML

    Hyperlinks are connectors for the web; they are responsible for linking one page to another and a page to a website. Its syntax is expressed below.

    <a href="link">Label</a> 

    The href means hypertext reference. It is the attribute responsible for specifying which location your website should link to. For example, see the code below. 

    <body> 
    <a href="https://www.knowledgehut.com/">Visit KnowledgeHut</a> 
</body>

    Save the file, then open it in your browser. Your result should look like this.

    Use a <div> the HTML Content Division Element

    Divs are used for segmenting elements into different sections. This tag enables you to group and organizes your elements into different divisions.

    <div style=”property: value; property: value;”></div> 

    Just like every other element in HTML, the div tag accepts different kinds of attributes inside it. See the example below, where the width, height, and background color were specified in the style attribute.

    <body> 
    <div style="width: 300px; height: 150px; background-color: blue;"> 
      A div text.  
    </div> 
</body>

    Save the file and refresh the browser. You will get a blue box of 300 by 150px. 

    Additionally, div elements can be nested inside other div tags. See the example below, where we inserted a yellow div element within a blue div container. 

    <body> 
    <div style="width: 300px; height: 150px; background-color: blue;"> 
      <div style="width: 100px; height: 100px; background-color: yellow;"></div> 
    </div> 
</body>

    Reload the browser after saving the file. You ought to hear anything along these lines: 

    Change the Color of HTML Elements

    Changing the colors of HTML elements can easily be achieved by specifying the color property in the styles attribute. This can be seen in the image below. 

    <p style="color:blue;">This is blue text.</p> 

    Put this code in your index.HTML file and run the browser thereafter. 

    The style attribute and border property are used to change a border's color. 

    <body> 
    <img 
      src="https://images.pexels.com/photos/207983/pexels-photo-207983.jpeg?cs=srgb&dl=pexels-pixabay-207983.jpg&fm=jpg" 
      style="border: 10px solid green;" 
    /> 
</body>

    Put the above code in your index.HTML file and open it in a browser to see if it works. 

    Get more information on the Full Stack Developer Course Duration on Knowledgehut and create your web development learning path today. 

    Set Up Your HTML Website Project

    To create a simple website using HTML, do the following. 

    • Create a project folder called tutorials. 
    • Create a file named index.HTML inside the HTML project. 
    • Paste the following code inside of your index.HTML file and save. 
    <!DOCTYPE HTML> 
<HTML lang="en"> 
  <!-- codes go in here... --> 
</HTML>

    Add an HTML <head> Element to Your Webpage

    The <head> tag provides information about your website and also loads external resources to your website. See the example below. 

    <!DOCTYPE HTML> 
<HTML lang="en"> 
  <head> 
    <meta charset="utf-8" /> 
    <title>Knowledgehut</title> 
  </head> 
</HTML>

    While the <meta> tag provides extra metadata about your website, the title gives your webpage a label. 

    Get a Full Stack Developer course on our website now. 

    Add a Favicon to Your Website with HTML

    An example of a favicon can be seen in the image below.

    To implement a favicon into your web development projects using HTML, first download a transparent Icon image, preferably in png, and put it into your project folder. Next, change the image extension to .ico. The image below expresses how to include a favicon into your <head> tag. 

    ... 
<title>About Knowledgehut</title> 
<link rel="shortcut icon" type="image/jpg" href="Favicon_Image_Location"/> 
... 

    Save and refresh your browser to see your favicon. 

    Style the HTML <body> Element 

    The following code simply changes the background color of your entire website to red.  

    <!DOCTYPE HTML> 
<HTML lang="en"> 
<head> 
  <meta charset="utf-8"> 
  <title>Knowledgehut</title> 
  <link rel="shortcut icon" type="image/jpg" href=”Favicon_Image_Location”/> 
</head> 
<body style=" background-color: red"> 
  <!-- Code goes in here --> 
</body> 
</HTML>

    Reload the browser after saving the file to see the result below:

    Now that you know how the body element can be styled in HTML, you can also practice more on your own.

    Create the Top Section of Your Homepage With HTML

    The following code describes how to create a basic HTML top section that serves as a navigational tool. 

    <!DOCTYPE HTML> 
<HTML lang="en"> 
  <head> 
    <meta charset="UTF-8" /> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge" /> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0" /> 
    <title>Website</title> 
  </head> 
  <body> 
    <header> 
      <nav> 
        <a href="#">Home</a> 
        <a href="#">About</a> 
        <a href="#">Contact</a> 
      </nav> 
    </header> 
  </body> 
</HTML> 

    The above codes produce the following result.

    Add a Background Image to the Top Section of Your Webpage With HTML

    The codes below show you how to quickly add a background image at the top section of your webpage. 

    <!DOCTYPE HTML> 
<HTML lang="en"> 
  <head> 
    <meta charset="UTF-8" /> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge" /> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0" /> 
    <title>Website</title> 
  </head> 
  <body style="margin: 0; padding: 0;"> 
    <header style="padding: 15px 10px; box-shadow: 1px 1px 3px #cccccc;"> 
      <nav> 
        <a href="#">Home</a> 
        <a href="#">About</a> 
        <a href="#">Contact</a> 
      </nav> 
    </header> 
    <div 
      style=" 
        background-image: url('https://images.pexels.com/photos/207983/pexels-photo-207983.jpeg?cs=srgb&dl=pexels-pixabay-207983.jpg&fm=jpg'); 
        background-repeat: no-repeat; 
        height: 500px; 
        width: 100%; 
        background-size: cover; 
      " 
    ></div> 
  </body> 
</HTML>

    See the output below. 

    Add a Styled Profile Image to Your Webpage With HTML

    The code below adds a profile picture to the header tag.

    <!DOCTYPE HTML> 
<HTML lang="en"> 
  <head> 
    <meta charset="UTF-8" /> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge" /> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0" /> 
    <title>Website</title> 
  </head> 
  <body style="margin: 0; padding: 0;"> 
    <header 
      style=" 
        display: flex; 
        justify-content: space-between; 
        align-items: center; 
        padding: 15px 10px; 
        box-shadow: 1px 1px 3px #cccccc; 
      " 
    > 
      <nav> 
        <a href="#">Home</a> 
        <a href="#">About</a> 
        <a href="#">Contact</a> 
      </nav> 
      <img 
        src="https://images.pexels.com/photos/207983/pexels-photo-207983.jpeg?cs=srgb&dl=pexels-pixabay-207983.jpg&fm=jpg" 
        alt= "profile" 
        style="height: 50px; width: 50px; border-radius: 50%; object-fit: cover;" 
      /> 
    </header> 
    <div 
      style=" 
        background-image: url('https://images.pexels.com/photos/207983/pexels-photo-207983.jpeg?cs=srgb&dl=pexels-pixabay-207983.jpg&fm=jpg'); 
        background-repeat: no-repeat; 
        height: 500px; 
        width: 100%; 
        background-size: cover; 
      " 
    ></div> 
  </body> 
</HTML>

    See the result on your webpage.

    Add and Style a Title to Your Webpage With HTML

    To implement styling in HTML in web development, update your index.HTML file with the following code. 

    <!DOCTYPE HTML> 
<HTML lang="en"> 
  <head> 
    <meta charset="UTF-8" /> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge" /> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0" /> 
    <title>Website</title> 
  </head> 
  <body style="margin: 0; padding: 0;"> 
    <header 
      style=" 
        display: flex; 
        justify-content: space-between; 
        align-items: center; 
        padding: 15px 10px; 
        box-shadow: 1px 1px 3px #cccccc; 
      " 
    > 
      <nav> 
        <a href="#">Home</a> 
        <a href="#">About</a> 
        <a href="#">Contact</a> 
      </nav> 
      <img 
        src="https://images.pexels.com/photos/207983/pexels-photo-207983.jpeg?cs=srgb&dl=pexels-pixabay-207983.jpg&fm=jpg" 
        alt= "profile" 
        style=" 
          height: 50px; 
          width: 50px; 
          border-radius: 50%; 
          object-fit: cover; 
        " 
      /> 
    </header> 
    <div 
      style=" 
        background-image: url('https://images.pexels.com/photos/207983/pexels-photo-207983.jpeg?cs=srgb&dl=pexels-pixabay-207983.jpg&fm=jpg'); 
        background-repeat: no-repeat; 
        height: 500px; 
        width: 100%; 
        background-size: cover; 
        display: flex; 
        justify-content: center; 
        align-items: center; 
      " 
    > 
      <h4 
        style=" 
          color: white; 
          font-size: 10rem; 
          font-weight: 600; 
          background-color: rgba(0, 0, 0, 0.353); 
          padding: 10px; 
        " 
      > 
        Hello world 
      </h4> 
    </div> 
  </body> 
</HTML> 

    Create Additional Webpages on Your HTML Website

    To create additional pages on your web page development using HTML, create a new file and name it, for example, about.HTML, and paste the following codes inside. 

    <!DOCTYPE HTML> 
<HTML lang="en"> 
  <head> 
    <meta charset="UTF-8" /> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge" /> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0" /> 
    <title>About</title> 
  </head> 
  <body style="margin: 0; padding: 0;"> 
    <header 
      style=" 
        display: flex; 
        justify-content: space-between; 
        align-items: center; 
        padding: 15px 10px; 
        box-shadow: 1px 1px 3px #cccccc; 
      " 
    > 
      <nav> 
        <a href="#">Home</a> 
        <a href="#">About</a> 
        <a href="#">Contact</a> 
      </nav> 
      <img 
        src="https://images.pexels.com/photos/207983/pexels-photo-207983.jpeg?cs=srgb&dl=pexels-pixabay-207983.jpg&fm=jpg" 
        alt= "profile" 
        style=" 
          height: 50px; 
          width: 50px; 
          border-radius: 50%; 
          object-fit: cover; 
        " 
      /> 
    </header> 
    <div 
      style=" 
        height: 500px; 
        width: 100%; 
        display: flex; 
        justify-content: center; 
        align-items: center; 
      " 
    > 
      <h4 
        style=" 
          color: white; 
          font-size: 10rem; 
          font-weight: 600; 
          background-color: rgba(0, 0, 0, 0.353); 
          padding: 10px; 
        " 
      > 
        About Page 
      </h4> 
    </div> 
  </body> 
</HTML>

    The above codes will produce the following result on the browser. 

    One more thing, let us create a third page on this project. Create a new page called contact.HTML and paste the codes below inside. 

    <!DOCTYPE HTML> 
<HTML lang="en"> 
  <head> 
    <meta charset="UTF-8" /> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge" /> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0" /> 
    <title>Contact</title> 
  </head> 
  <body style="margin: 0; padding: 0;"> 
    <header 
      style=" 
        display: flex; 
        justify-content: space-between; 
        align-items: center; 
        padding: 15px 10px; 
        box-shadow: 1px 1px 3px #cccccc; 
      " 
    > 
      <nav> 
        <a href="#">Home</a> 
        <a href="#">About</a> 
        <a href="#">Contact</a> 
      </nav> 
      <img 
        src="https://images.pexels.com/photos/207983/pexels-photo-207983.jpeg?cs=srgb&dl=pexels-pixabay-207983.jpg&fm=jpg" 
        alt= "profile" 
        style=" 
          height: 50px; 
          width: 50px; 
          border-radius: 50%; 
          object-fit: cover; 
        " 
      /> 
    </header> 
    <div 
      style=" 
        height: 500px; 
        width: 100%; 
        display: flex; 
        justify-content: center; 
        align-items: center; 
      " 
    > 
      <h4 
        style=" 
          color: white; 
          font-size: 10rem; 
          font-weight: 600; 
          background-color: rgba(0, 0, 0, 0.353); 
          padding: 10px; 
        " 
      > 
        Contact 
      </h4> 
    </div> 
  </body> 
</HTML>

    The code above produces the following result. 

    The structure of your project should now look like this.

    Center or Align Text and Images on Your Webpage with HTML

    Write the following codes in your index.HTML and save. This will align text and images to the center of your page. 

    <!DOCTYPE HTML> 
<HTML lang="en"> 
  <head> 
    <meta charset="UTF-8" /> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge" /> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0" /> 
    <title>Home</title> 
  </head> 
  <body style="margin: 0; padding: 0; text-align: center; padding: 0 20%;"> 
    <img 
      src="https://images.pexels.com/photos/207983/pexels-photo-207983.jpeg?cs=srgb&dl=pexels-pixabay-207983.jpg&fm=jpg" 
      alt= "profile" 
      style="height: 150px; width: 150px; object-fit: contain;" 
    /> 
    <h1>Top Story of the day.</h1> 
    <p> 
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Facere rerum amet 
      repellat obcaecati? Voluptatibus cum aliquid officiis maxime, inventore 
      minus expedita architecto? Libero sint necessitatibus et similique 
      voluptate, hic quidem. 
    </p> 
  </body> 
</HTML> 

    The above codes produce this result.

    Create the Body of Your Homepage With HTML

    Rewrite the index.HTML file with the following content.

    <!DOCTYPE HTML> 
<HTML lang="en"> 
  <head> 
    <meta charset="UTF-8" /> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge" /> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0" /> 
    <title>Home</title> 
  </head> 
  <body 
    style=" 
      margin: 0; 
      padding: 0; 
      padding: 10%; 
      display: flex; 
      justify-content: space-between; 
    " 
  > 
    <img 
      src="https://images.pexels.com/photos/207983/pexels-photo-207983.jpeg?cs=srgb&dl=pexels-pixabay-207983.jpg&fm=jpg" 
      alt= "profile" 
      style="width: 500px; object-fit: contain;" 
    /> 
    <div style="margin-left: 20px;"> 
      <h1>Welcome to Smilely</h1> 
      <p> 
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Facere rerum 
        amet repellat obcaecati? Voluptatibus cum aliquid officiis maxime, 
        inventore minus expedita architecto? Libero sint necessitatibus et 
        similique voluptate, hic quidem. 
      </p> 
      <p> 
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Facere rerum 
        amet repellat obcaecati? Voluptatibus cum aliquid officiis maxime, 
        inventore minus expedita architecto? Libero sint necessitatibus et 
        similique voluptate, hic quidem. 
      </p> 
      <p> 
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Facere rerum 
        amet repellat obcaecati? Voluptatibus cum aliquid officiis maxime, 
        inventore minus expedita architecto? Libero sint necessitatibus et 
        similique voluptate, hic quidem. 
      </p> 
      <p> 
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Facere rerum 
        amet repellat obcaecati? 
      </p> 
      <a href="#">See more...</a> 
    </div> 
  </body> 
</HTML> 

    See the result of the codes above.

    Add a Footer to Your Webpage With HTML

    Copy, paste, and save the following codes on your index.HTML file. See the code below. 

    <!DOCTYPE HTML> 
<HTML lang="en"> 
  <head> 
    <meta charset="UTF-8" /> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge" /> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0" /> 
    <title>Home</title> 
  </head> 
  <body> 
    <footer style="text-align: center;"> 
      <span>With Love Smilely ©2022</span> 
    </footer> 
  </body> 
</HTML>

    See the resultant image below. 

    Add Twitter Card and Open Graph Social Metadata to Your Webpage with HTML

    Twitter cards and Open Graph social metadata are super helpful for sharing your web pages across various social media. For example, see the card below.

    To implement something similar to the above image in your website, add the following metadata codes to the <head> tag of your website. 

    <!DOCTYPE HTML> 
<HTML lang="en"> 
  <head> 
    <meta charset="UTF-8" /> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge" /> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0" /> 
    <meta name="twitter:card" content="summary_large_image" /> 
    <meta name="twitter:site" content="@smiley" /> 
    <meta name="twitter:title" content="Smiley the Emoji" /> 
    <meta name="twitter:description" content="Welcome to the emoji world" /> 
    <meta name="twitter:image" content="https://image_location_on_the_web.jpg" /> 
    <title>Home</title> 
  </head> 
  <body> 
    <!-- codes goes in here... --> 
  </body> 
</HTML> 

    These are what you need to understand Twitter cards and their metadata: 

    • twitter:card: This specifies the type of Twitter Card that should be displayed. 
    • summary_large_image: This displays a short summary with a large image preview. 
    • twitter:site: This displays your Twitter username or your site or company's username. 
    • twitter:title: This displays the kind of title you would like to display on the card. 
    • twitter:description: This gives a briefing of the page that will be displayed under the title. 
    • twitter:image: This displays the main image to be shown on your social media page. 

    Looking to master coding and programming? Our Programming online courses have got you covered! Join now and unlock your potential.

    Conclusion

    In this guide, you have been introduced to the basics of HTML and its use in web development. We discussed that an HTML document comprises the head and body tag. While the head tag contains records of information that describes the website and its resources, the body tag displays the content of your website. Lastly, we built three web pages and added some essential webpage elements such as the hero image, the profile picture, and a heading tag. If the features of HTML excite you, you must go for the Full Front End Developer Course and start developing websites that run on advanced frameworks.

    Till next time, keep crushing it!

    Frequently Asked Questions (FAQs)

    1. Why do Web developers need HTML?

    Developers need HTML because it is a starting point for building a website and also for becoming a web developer. 

    2. Can you build a website with just HTML and CSS?

    Absolutely! Many of the earliest websites were created using only HTML and CSS. 

    3. Which is more effective and worth learning, web development with HTML, CSS, JS, etc., or with Django (Python)?

    When it comes to the highly in-demand development stack, JavaScript always comes first. It is more rewarding to develop with HTML, CSS, and JS rather than Django. This is because, with JavaScript alone, you can achieve what Django can do for you.

    4. Which software is best for web development?

    vs Code is the best editor to use for developing programs in multiple programming languages. This is because of its widespread usage and community backing.

    Profile

    Darlington Gospel

    Blog Author

    I am a Software Engineer skilled in JavaScript and Blockchain development. You can reach me on LinkedIn, Facebook, Github, or on my website.

    Share This Article
    Ready to Master the Skills that Drive Your Career?

    Avail your free 1:1 mentorship session.

    Select
    Your Message (Optional)

    Upcoming Web Development Batches & Dates

    NameDateFeeKnow more
    Course advisor icon
    Course Advisor
    Whatsapp/Chat icon