Skip to content
Related Articles

Related Articles

How to Design a Web Page in HTML?

View Discussion
Improve Article
Save Article
Like Article
  • Last Updated : 09 Mar, 2022

HTML is known as HyperText Markup Language. It is a combination of both Hypertext and Markup language. Here hypertext means the link between the web pages and markup is used to define the text document within tag which defines the structure of web pages. It acts as a skeleton of a web page and without HTML it would be very difficult or impossible to build a webpage. It is used by all the browsers and used to manipulate text, images, and other content, in order to display it in the required format. In this article, we will learn how to create an HTML webpage.

Creating an HTML document

The first step of creating a web page is to create an HTML document. An HTML document can be created in any text editor even on a notepad. So any text editor can be used to make an Html file. We just need to add extension .html /.htm . Let us create the first basic HTML program.

To create an HTML document follow the following steps:

Step 1: Open your text editor such as Notepad Sublimetext, etc.

Step 2: Write the code given below in the text editor.

HTML




<!DOCTYPE html>
<html>
<head>
<title>First HTML file</title>
</head>
<body>
  Hello Everyone!!
</body>
</html>

Step 3: Save this file with the .html/.htm extension.

Step 4: Open that file with any browser. The output will be displayed.

So this is how we create a simple HTML document.

Designing Web Page 

To design a webpage in HTML we need to learn about tags and attributes available in HTML. In HTML, tags are some instructions that are enclosed in angle braces. With the help of these tages, we can design a more attractive HTML page. Some of the important tags to be used are as follows:

1. <h1> … </h1> to <h5> … </h5>: These tags are called header tags  and they are used to give heading to your webpage of different sizes.<h1>…</h1> being the Largest Heading  to <h5> …</h5> being the Smallest Heading.

2. Bold Tag (<strong>…</strong> or<b>…</b>): These tags are used to make text look bold. 

3. Italic Tag (<i> …</i> or <em>… </em>): These tags are used to make text look italics. The only difference between <i> and <em > is that <em>semantically emphasis on important text or word whereas <i> tag is used to make is just used to make text italics.

4. Ordered List ( <ol> … </ol>): The HTML <ol> tag defines an ordered list. An ordered list can be numerical or alphabetical ., An ordered list starts and ends with a <ol> tag. Each list item starts with <li> tag. We can use the type attribute to define type of ordered list we need to make:

TypeDescription 
type=”1″ Numbered with numbers(default)
type=”A” Numbered with Uppercase Alphabets
type=”a”Numbered with Lowercase Alphabets
type=”I” Numbered with Uppercase Roman Numbers
type=”i”Numbered with Lowercase Roman Numbers

5. Unordered List (<ul>…</ul>): It displays elements in bulletin form . An unordered list starts with <ul > tag and each item  starts with <li> tag. We can use the type attribute to define the type of unordered list we need to make:

TypeDescription
type=”disc”Items are marked in Bulletin. (default) 
type=”circle”Items are marked with hollow circles.
type=”square”Items are marked with squares.
type=”none”Items are not marked.

6. Image Tag: If we need to add an image to our website we need to use the following syntax.

Syntax:

<img src=”filename” alt=”name / bit about image”>

Here, 

  • img: Tells browser that we want to add an image.
  • src: Tells source of image for eg image from desktop or a website.
  • alt: This attribute is used to describe an image. If the image is not able to download in a web browser due to some reason then alt is shown.

7. Anchor Tag: This tag is mainly used to connect one web page to another.

Syntax:

<a href=”https://www.geeksforgeeks.org/c-plus-plus/?ref=shm”> Click Here to Learn C++</a>

Note: Nesting is possible in HTML, which means that we can write one tag between another tag. 

Example:

HTML




<!DOCTYPE html>
<html>
<head>
    <title> Steps To Form Spread Cookies </title>
</head>
<body>
     
<h1> Spread Cookies</h1>
<br>
<h2> Steps:- </h2>
<ol type="I">
  <li>Preheat kitchen appliance to 350ºF (180ºC).</li>
  <li> In a massive bowl, combine along the spread, sugar, and egg. </li>
  <li>Scoop out a spoon of dough and roll it into a ball.
      Place the cookie balls onto a slippy baking sheet. </li>
  <li>For further decoration and to form them cook additional
      equally, flatten the cookie balls by pressing a fork down
      on prime of them, then press it down once more at a 90º
      angle to form a criss-cross pattern.</li>
  <li>Bake for 8-10 minutes or till rock bottom of
      the cookies square measure golden brown.</li>
  <li>Remove from baking sheet and freeze it.</li>
  <li><b>ENJOY!!</b></li>
</ol>
 
</body>
</html>

Output

HTML Web Page 

Here, we create a simple webpage of GeeksforGeeks. 

HTML




<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
    <meta charset="utf-8">
    <title>GeeksForGeeks</title>
</head>
 
<body style="background-color:#D5F5E3 ">
     
         style="display: block;  margin-left: auto;margin-right: auto; width: 10%;" >
     
    <h1 style="color:green;text-align:center"><strong>GeeksForGeeks</strong></h1>
    <h1><strong>Table of Content</strong></h1>
     
    <h2><strong>C++</strong></h2>
    <div>C++ is an object-oriented programming language
         that is widely used for competitive programming,
         Data structure, and Algorithms, developing
         operating Systems, etc.</div>
          
    <h3><em>Some of its topic are given below:- </em></h3>
    <ul>
        <li><a href="https://www.geeksforgeeks.org/c-plus-plus/?ref=shm#Basics">Basics</a></li>
        <li><a href="https://www.geeksforgeeks.org/difference-c-structures-c-structures/">Difference Between C Structures and C++ Structures</a></li>
        <li><a href="https://www.geeksforgeeks.org/comparison-of-inheritance-in-c-and-java/">Comparison of Inheritance in C++ and Java</a></li>
        <li><a href="https://www.geeksforgeeks.org/static-keyword-in-java/">Comparison of static keyword in C++ and Java</a></li>
        <li><a href="https://www.geeksforgeeks.org/comparison-of-exception-handling-in-c-and-java/">Comparison of Exception Handling in C++ and Java</a></li>
        <li><a href="https://www.geeksforgeeks.org/basic-input-output-c/">Basic Input / Output in C++</a></li>
        <li><a href="https://www.geeksforgeeks.org/write-a-c-program-that-wont-compile-in-cpp/">Write a C program that won’t compile in C++</a></li>
        <li><a href="https://www.geeksforgeeks.org/references-in-c/">References in C++</a></li>
    </ul>
     
    <h2 style="color:red;"><em>Java</em></h2>
    <div>Java has been one amongst the foremost standard
         programming languages for several years. When
         compared with C++, Java codes are typically
         additional reparable as a result of Java
         doesn't enable several things which can
         cause bad/inefficient programming if used
         incorrectly.For instance, non-primitives are 
         references in Java.
    </div>
    <h3><em>Some of its Topics are given below:- </em></h3>
    <ul>
        <li><a href="https://www.geeksforgeeks.org/introduction-to-java/">Introduction to Java</a></li>
        <li><a href="https://www.geeksforgeeks.org/c-vs-java-vs-python/">C++ vs Java vs Python</a></li>
        <li><a href="https://www.geeksforgeeks.org/jvm-works-jvm-architecture/">How JVM Works – JVM Architecture?</a></li>
        <li><a href="https://www.geeksforgeeks.org/java-basic-syntax/">Java Basic Syntax</a></li>
        <li><a href="https://www.geeksforgeeks.org/java-identifiers/">Java Identifiers</a></li>
        <li><a href="https://www.geeksforgeeks.org/variable-scope-in-java/">Scope of Variables In Java</a></li>
        <li><a href="https://www.geeksforgeeks.org/decision-making-javaif-else-switch-break-continue-jump/">Decision Making in Java (if, if-else, switch, break, continue, jump)</a></li>
        <li><a href="https://www.geeksforgeeks.org/java-arithmetic-operators-with-examples/">Java Arithmetic Operators with Examples</a></li>
    </ul>
 
    <h2 style="color: blue;">Python</h3>
    <div> Python language is being employed in website
          development, Machine Learning applications,
          at the side of all innovative technology in
          Software World. Python  language is extremely
          compatible for Beginners, additionally for
          knowledgeable programmers with alternative
          programming languages like C++ and Java.
    </div>
    <h3><em>Some of its topics given below are:- </em></h3>
    <ul>
        <li><a href="https://www.geeksforgeeks.org/python-language-introduction/">Python Language Intro</a></li>
        <li><a href="https://www.geeksforgeeks.org/structuring-python-programs/">Structures</a></li>
        <li><a href="https://www.geeksforgeeks.org/python-keywords/">Keywords</a></li>
        <li><a href="https://www.geeksforgeeks.org/python-if-else/">Decision Making</a></li>
        <li><a href="https://www.geeksforgeeks.org/python-3-basics/">Python 3 basics</a></li>
    </ul>
    <h1 style="text-align: center">Thank You</h1>
 
</body>
</html>

Output:


My Personal Notes arrow_drop_up

Start Your Coding Journey Now!