Saving an HTML file
After you've created an HTML file, you will need to save it with the correct file extension so that it can be recognized and opened by web browsers.
- Open your text editor and click on "File" in the top menu.
- Select "Save As" or "Save Page As" from the dropdown menu.
- Choose the location where you want to save your file and give it a name.
- In the "Save As Type" dropdown menu, select "All Files".
- Add the .html extension to the end of the filename. For example, if you want to name your file "my-page", save it as "my-page.html".
- Click "Save" to save your file.
Your HTML file is now ready to be opened and viewed in a web browser. You can double-click on the file to open it in your default web browser, or you can open your web browser and select "File" > "Open" to navigate to your HTML file and open it.
The structure of a web page is composed of several parts that work together to create a functional and visually appealing layout. Here are the main components of a web page:
Structure of a web page
- Document type declaration: The first line of an HTML file should specify the document type declaration (DTD). This tells the browser which version of HTML the document is written in and how to interpret it. For example, the DTD for HTML5 is:
<!DOCTYPE html>
- HTML tag: The
<html>tag is used to enclose the entire document and tells the browser that this is an HTML file.
<html>
<!-- HTML content goes here -->
</html>
Head section: The
<head> section is used to provide information about the document, such as the title, meta tags, and links to external stylesheets and scripts<head>
<title>My Web Page</title>
<meta name="description" content="A description of my web page">
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
</head>
- Body section: The
<body>section is where the visible content of the web page is placed, such as text, images, and links.
<body>
<h1>Welcome to my web page</h1>
<p>This is some sample text.</p>
<img src="image.jpg" alt="An image">
<a href="http://www.example.com">Visit Example.com</a>
</body>
- Header section: The
<header>section is used to provide a heading or banner at the top of the page.
<header>
<h1>My Web Page</h1>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</header>
- Main content section: The
<main>section is used to enclose the main content of the page.
<main>
<h2>About Me</h2>
<p>My name is John Doe and I am a web developer...</p>
<h2>My Skills</h2>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
</main>
- Footer section: The
<footer>section is used to provide information about the website, such as copyright information and links to social media.
<footer>
<p>Copyright © 2022 My Web Page</p>
<ul>
<li><a href="#">Facebook</a></li>
<li><a href="#">Twitter</a></li>
<li><a href="#">LinkedIn</a></li>
</ul>
</footer>
By using these components and structuring your web page properly, you can create a functional and visually appealing layout that is easy to navigate and understand.
Comments
Post a Comment