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.
Contents
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
Web Page Language
- We use the following two popular languages to create a web page
- 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
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.
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
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.
Leave a Reply