CodingStatus

- Learn to Build Web Applications

Make a Web Page in HTML From Scratch

By Leave a Comment

Are you want to make a web page in HTML from scratch? if yes, you are reading the best tutorial. Here you will learn it by configuring some simple steps. once you read all the given steps. you will definitely make different types of web pages within a few minutes.

As you know that HTML is the short form of Hypertext Markup language. It is not a programming language but it is a markup language. using it you can create a static web page for your website.

An HTML web page is created with various components like header, footer, navigation bar, right-sidebar, left sidebar & more. It is used to display content like text, images, audio, & video in the web browser.

A website can be created with multiple web pages. If you want to create a static website then you will have to learn to create a web page.

If are a beginner in HTML and you also don’t know any other languages then you will need not go anywhere. Here, I will explain everything.

Requirements to Make a Page

Before making a webpage, The following tools-

  • Local Computer
  • Text Editor
  • Web Browser

Local Computer

You must have a local computer like a laptop, desktop to start HTML code. Anyone operating system like Windows, Linux & mac must be installed.

Text Editor

You have to install a text editor on your computer to write HTML code.

There are various text editors like notepad++, subline, bracket, the visual studio that are available on the internet. These editors are absolutely free. you can install one of them without paying any charges.

If you are a beginner in HTML, you must start HTML coding with Notepad.

Web Browser

You have to run HTML code on the web browser.

There are various web browsers like google chrome, Mozilla, Opera mini, safari, Internet Explorer & Microsoft Edge that are available on the internet. These web browsers are absolutely free. you can install one of them without paying any charges.

But you should use the Google Chrome browser. It is the most popular & easy to use a browser

Read Also –

HTML Interview Questions and Answers

Embed PDF File in HTML

Web Page Language

  • We use the following two popular languages to create a web page
    • HTML – Hypertext Markup Language
    • CSS – Cascading Style Sheet
  • We use HTML to create the structure of the web page.
  • We use CSS to create the design of the web page.

HTML Web Page Structure

A web page structure has a combination of various components like the logo, header, navigation bar, footer, sidebar & main content. you will learn to make web pages with these components.

See the following web page structure

make a web page in html

HTML web page has the main two sections

  • Head Section
  • Body Section

Head Section

  • Head section always contains the invisible information of the web pages
  • It is represented by <head></head> head element.
  • The head element is always used within  <html></html> HTML element & just above the <body></body>
  • A single web page contains only one <head></head> head element.

Head section  may contain various HTML  tag & script. But here we will discuss the following some tags that are more necessary for creating a web page.

  • Page Title
  • Meta Charset
  • Shortcut Icon
  • Meta Keyword
  • Meta Description
  • Page Stylesheet

Page Title

  • The Page Title contains the main title to give information about the web page
  • This title always displays in the browser tab.
  • The  page title is represented <title></title> title element
  •  The title element is always used within <head></head> head element

Meta Charset

  • Meta charset notifies the browser that the web page has the UTF-8 character set.
  • It is represented by <meta charset="UTF-8">

Meta Viewport

  • <meta> is declared with name=”viewport” to display a web page & its content  in a proper format  on the all different devices & screen sizes.

Meta Keyword

  • A meta keyword contains the keyword of the web pages.
  • It is the part of SEO
  • Using the Meta keyword, the visitors can easily search the web page.
  • Meta keyword is represented by <meta name=”keyword” content=”page keyword here”>

Meta Description

  • A meta description contains some intro of the web page
  • It is the part of SEO
  • Using the Meta description, the visitors can easily search the web page.
  • A meta description is represented by <meta name=”description” content=”page description here”>

Body Section

  • The body section contains visible information/content of the web page.
  • It is represented by <body></body> body Element.
  • The body element always used within <html></html> body element and just below the <head></head> head element.
  • You should declare only one body element on a single web page.

Page Stylesheet

  • The page stylesheet contains internal CSS code to design the web page.
  • It is represented by <link rel="stylesheet" href="file-path.css">

Shortcut Icon –

  • Shortcut Icon shows the icon of the web page in the browser tab.
  • It is represented  by <link rel='shortcut icon' href="icon.jpg" />

 

Folder Structure for a Web Page

To create a web page, you must create a separate folder structure

myproject
  |__images/
  |    |__page-logo.jpg
  |    |__banner.jpg
  |__web-page.html
  |__style.css

web-page.html - You should create this file to write HTML code.

style.html -  You should create this file to write CSS code.

How to Create a Webpage using HTML and CSS

Before starting to make a web page in HTML, you should configure the following points in web-page.html

1. Create a Header

The header is the top part of the web page. It may contain a logo, tagline & other things. So, you should create a header.

2. Create a Navbar

A Navbar is the short form of the Navigation bar. It may contain a menu list, button & search bar. So, should create a navbar.

3. Create a Sidebar

You should create a sidebar to display some important content for all the pages of the website. Here I have created the right sidebar. Once you learn it. you will be able to create another left sidebar as well.

This sidebar contains three content like about us, latest post & popular post

4. Create a Main Content

You can create the main content to display content like images, videos, audio, & text.  You can display the content according to your project requirement.

Here I have created the main content like primary content, secondary content, page table, page list, page form

5. Create a Footer

You should create a footer. A footer may contain some page links, website intro & contact form. I have created three sections of the footer.

File Name – web-page.html

Get HTML Code to create a web page.

Create HTML Web Page Design

  • Create a new external CSS file
  • Write complete CSS code to design HTML web page
  • Save  CSS file with .css extension
  • Include style.css in an HTML file using <link rel=”stylesheet” href=”style.css”>

File name – style.css

Get CSS code to design a web page

Tutorial Summary

Dear Developer, I hope that you have known how to make a web page in HTML. Now, you can easily implement it on your web page. If you have any questions, you can ask me through the below comment box

I will also share more tutorials related to web development. So, continue to visit my blog and share it with your friends.

Reader Interactions

Leave a Reply

Your email address will not be published. Required fields are marked *