Basic HTML Tutorial with Responsive HTML Webpage template (example)
How to create a fully responsive Basic HTML Website?
HTML is the foundation Markup language of a webpage. It constructs the foundations of a website. HTML is very easy to learn. A basic HTML template is given under, copy it and paste in your code editor or notepad of your Windows PC (if you don’t have any code editor). Make changes, write down headings ,paragraphs , make lists and save the file as html file. You can do it by changing extension of the file from .TXT to .HTML
Basic HTML template for a webpage
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Your Page Title</title>
</head>
<body>
<header>
<h1>Your Page Heading</h1>
</header>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
<section>
<h2>Section Heading</h2>
<p>This is a basic HTML webpage.</p>
</section>
<footer>
<p>© 2023 Your Website</p>
</footer>
</body>
</html>
How to make HTML page Responsive for all Devices and screen sizes and Mobile phone?
Meta tag is crucial for creating responsive web designs that adapt to different screen sizes and orientations. With viewport you can easily make your HTML web page fully responsive for all devices and screen sizes. You can use following meta tag for responsiveness of your website.
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
The `<meta>` tag with the attribute `name="viewport"` is used in HTML to control the viewport behavior of a webpage on different devices. The viewport is the user's visible area of a web page and can vary depending on the device and screen size.
The `viewport` meta tag typically includes the `width=device-width` property, which sets the width of the viewport to the width of the device. This helps in ensuring that the webpage content is displayed properly on various devices, especially on mobile devices.
Here's a breakdown of the commonly used properties:
• `width=device-width`: Sets the width of the viewport to the width of the device.
• `initial-scale=1.0`: Sets the initial zoom level when the page is first loaded.
• `user-scalable=yes/no`: Specifies whether the user can zoom in and out. "yes" allows zooming, and "no" disables it.
All is ok now. You are ready t create your first Responsive HTML Website Now. Try it on all devices you have.