Creating, saving, and viewing HTML documents is fundamental to web development. Here’s a step-by-step guide on how to manage HTML files, apply structural and common tags, and use formatting techniques to enhance your web pages.
Choose a Text Editor: You can use any text editor to create HTML files, such as Notepad, Sublime Text, Visual Studio Code, or Atom.
Write HTML Code: Start by writing your HTML code in the editor. Here’s a basic structure:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My First HTML Page</title>
</head>
<body>
<h1>Hello, World!</h1>
<p>This is my first HTML document.</p>
</body>
</html>
Save the Document: Save your file with a .html extension. For example, index.html.
File > Save As..., choose All Files from the dropdown, and save as index.html.File > Save As, and type index.html..html file in your file explorer, right-click on it, and select Open with followed by your preferred web browser (e.g., Chrome, Firefox).HTML documents are structured with various tags to create a logical flow and improve readability.
<html>: Root element that encloses all HTML content.<head>: Contains meta-information about the document, such as <title>, links to CSS files, and meta tags.<body>: Contains the content of the document, including text, images, links, etc.Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Structured HTML Document</title>
</head>
<body>
<header>
<h1>Welcome to My Website</h1>
</header>
<nav>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
<main>
<section>
<h2>About Us</h2>
<p>This is the about section.</p>
</section>
<section>
<h2>Contact Us</h2>
<p>This is the contact section.</p>
</section>
</main>
<footer>
<p>© 2024 My Website</p>
</footer>
</body>
</html>