Introduction to design web page in html

HyperText Markup Language (HTML) is one of the most popular languages to design Web Pages and their content. HTML uses different tags, elements, images and some latest components to make Web Pages more attractive and user-friendly. With the help of some CSS, the look and feel of the web page can be easily changed. It should be considered an important source in the World Wide Web to structure the web page properly. It is possible by using simple text editors to edit and save changes whenever they want.

Steps to Design Web Page in HTML

There are some basic steps considered to design web pages using HTML are as follows:

Designing Layout: Before actually starting to design a web page, it is necessary to prepare a rough overview for your web page. This helps the user to put elements according to their need. Web pages should be divided into 3 parts header, body and footer part.
Do code set up: Firstly, create one folder where you are going to store all your web pages. Simply prepare the style.css file if we want to add external code to our HTML web page and simple index.html page just for checking whether the code is working properly or not.
Building elements: Start designing elements for building web page ,firstly create <head> , <body><main><sections> and after putting all elements lastly<footer>part. It should be collection of different tags like <p>,<b>,<i> <h1>to <h6> heading tags, <title>,<sub>,<ol>, <ul> ,<a herf=””>, <section> , <articles> <img>, <iframe> and elements like<table> , <nav>, <button> ,<textarea> etc.
Some CSS code to your layout: To fix elements at some specific location, it is necessary to set them using some CSS code and try to highlight your important elements.
Customize your web page: This step helps us to improve the looks and feel of our webpage. It includes things like adding a background image to the website, adding some video content to engage the user with web pages, adding links, comments, lists to your web page.

How to Design Web Page in HTML?

Designing web pages by using HTML is one of the simplest concepts. There are some scenarios that define how to design a web page in HTML. They are as follows:

Editor: In this scenario, we are going to write some HTML code by using the editor. There are various editors available nowadays like notepad++, brackets, TextEdit, etc.
HTML code: As per your web page layout and all things discussed in the syntax, put HTML code here in all tag and element format.
Save File: once you are done with the Html code, the next step is to save all HTML code. Save this with a .html extension on the required location.
Open a web page in the browser: In this step, we are going to open our HTML page in the browser to check the output.

Examples to Design Web Page in HTML

Let’s we will create some web pages to see the actual resultant web page.

Example #1

Here we are creating a simple web page with some HTML elements and tags. Setting one image as a background and some text on it to look like:

HTML Code:

<head> <style> .card { max-width: 200px; margin: auto; text-align: center;} #main{ background-image: url('Travel.jpg'); background-repeat: no-repeat; background-size:cover; } .price { color: blue; font-size: 18px; } .card button { padding:10px; color: white; background-color: green; text-align: center; } </style> </head> <body id="main"> <h2 style="text-align:center">Place to visit in India</h2> <div class="card"> <img src="download.jpg" style="width:100%"> <h1><b>Explore Best In India</b></h1> <h2 class="price">INR 39,990/-</h2> <h2> <ul> <li>Manali</li> <li>Rushikesh</li> <li>Chadar Trek</li> <li>Andaman and Nicobar</li> <li>Mount Abu</li> </ul> </h2> <p><button>Book Here</button></p> </div> </body>

Output:

Design Web Page in HTML 1-1

Example #2

In this example, we are going to create one Feedback form as a web page.

HTML Code:

<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> input[type=text], select, textarea { width: 100%; padding: 8px; border: 1px solid #ccc; margin-top: 4px; margin-bottom: 10px; } input[type=submit] { background-color:Blue; padding: 8px 8px; } .container { width:100%; border-radius: 6px; background-color: #EFF6F6; padding: 10px; } </style> </head> <body> <h3>We welcome your suggestions</h3> <div class="container"> <form> <label for="fname">First Name</label> <input type="text" id="fname" name="firstname" placeholder="Enter Your name"> <label for="lname">Last Name</label> <input type="text" id="lname" name="lastname" placeholder="Enter Your last name"> <label for="ename">Email</label> <input type="text" id="ename" name="email" placeholder="Enter Your Email here"> <label for="mobno">Contact No</label> <input type="text" id="mobno" name="mobno" placeholder="Enter Your Contact Number"> <label for="subject">Feedback</label> <textarea id="subject" name="subject" placeholder="Give your feedback "style="height:50px"></textarea> <input type="submit" value="Send"> </form> </div> </body> </html>

Output:

Design Web Page in HTML 1-2

Example #3

In this example, we are going to create another web page that will show the homepage of a particular website.

HTML Code:

<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> * { box-sizing: border-box; } body {margin: 0;} .header { padding: 10px; text-align: center; background: orange; color: white; } .navbar { overflow: hidden; background-color: dimgrey; } .navbar a { float: left; display: block; color: white; text-align: center; padding: 10px 10px; } .navbar a.right { float: right; } .navbar a:hover{ background-color: #eee; color: black; } .row { display: flex; flex-wrap: wrap; } .sidebar { flex: 10%; background-color: #f1f1f1; padding: 20px; } .main { flex: 80%; background-color: white; padding: 20px; } .logoimg { height:10%; float:left; } </style> </head> <body> <div class="header"> <div class="logoimg" style=""><img src="cropped-EDUCBA_LOGO.png"></div> <h1>Welcome to EDUCBA</h1> </div> <div class="navbar"> <a href="https://www.educba.com/finance/courses/financial-analyst-course/">Finance</a> <a href="https://www.educba.com/data-science/courses/data-science-course/">Data Science</a> <a href="https://www.educba.com/software-development/courses/software-development-course/">Software Development</a> <a href="https://www.educba.com/excel/courses/excel-vba-certification-course/">Excel</a> <a href="https://www.educba.com/design/courses/design-course/">Design</a> <a href="#" class="right">Login</a> </div> <div class="row"> <div class="sidebar"> <h2>Contact US</h2> <div><img src="Contact.jpg" style="height:100px;"></div> <h2>Reviews</h2> <div ><img src="Reviews.jpg" style="height:100px;"></div> </div> <div class="main"> <h2>WHO IS EDUCBA?</h2> <p>Choose your interest area and get certified with our online Courses in Finance, Data Science, Software Development, Excel, Design, Project Management, Personal Development, Marketing and Human Resources..</p> <br> <div class="row"> <div class="sidebar"> <h2><u>Certification Courses</u></h2> <a href="https://www.educba.com/finance/">Financial Analyst Course - All in One Bundle</a><br> <a href="https://www.educba.com/marketing/">Marketing Course - All in One Bundle</a><br> <a href="https://www.educba.com/human-resource/">Human Resource Course - All in One Bundle</a><br> <a href="https://www.educba.com/design/">Design Course -All in one Bundle</a> <br> <a href="https://www.educba.com/excel/">Excel VBA Course - All in One Bundle</a> </div> <div class="sidebar"> <h2><u>Free Courses</u></h2> <a href="https://www.educba.com/data-science/courses/free-data-science-course/">Free Course on Data Science</a><br> <a href="https://www.educba.com/design/courses/free-graphic-design-online-course/">Free Course Graphic Design</a><br> <a href="https://www.educba.com/excel/courses/free-online-excel-course/">Free Online Excel Course</a><br> <a href="https://www.educba.com/marketing/courses/free-digital-marketing-course/">Free Course Digital Marketing</a><br> <a href="https://www.educba.com/software-development/courses/free-programming-course/">Free Course Programming</a> </div></div></div></div> </body>

Output:

<!– Design Web Page in HTML 1-3 –>

Conclusion

From all the above discussion, we can say that Web pages are created by using HTML code in a very simplified manner. Just simply put your HTML code in any one editor, save it with the .html extension and open it within any browser.