HTML

HTML (HyperText Markup Language) is the standard markup language used to create web pages. It describes the structure of a webpage and consists of a series of elements, which you use to enclose, or wrap, different parts of the content to make it appear or act in a certain way.

Key Concepts of HTML
Elements: The building blocks of HTML. Elements are written with a start tag, end tag, and content in between. For example, "< p> < /p>" is a paragraph element.
Tags: Used to create HTML elements. Tags usually come in pairs: an opening tag "(< >)" and a closing tag "(< />)".
Attributes: Provide additional information about elements. Attributes are always included in the opening tag. For example, "< a href="">Example< /a>" uses the href attribute to link to another page.

Basic Structure of an HTML Document
< !DOCTYPE html>
< html lang="en">
< head>
< meta charset="UTF-8">
< meta name="viewport" content="width=device-width, initial-scale=1.0">
< title>My First Webpage< /title>
< /head>
< body>
< h1>Welcome to My First Webpage< /h1>
< p>This is a paragraph of text on my first webpage. HTML is fun!< /p>
< /body>
< /html>


How to Create a Simple Website Using HTML
Set Up Your Environment:
Install a text editor (e.g., VSCode, Sublime Text, Atom).
Create a new folder for your website project.
Inside this folder, create a new file named index.html.

Write Your HTML Code:
Open your text editor and type the following code into index.html:
< !DOCTYPE html>
< html lang="en">
< head>
< meta charset="UTF-8">
< meta name="viewport" content="width=device-width, initial-scale=1.0">
< title>My Simple Website< /title>
< style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #f4f4f4;
}
header {
background-color: #333;
color: white;
padding: 1em 0;
text-align: center;
}
nav {
background-color: #444;
color: white;
padding: 0.5em;
text-align: center;
}
nav a {
color: white;
margin: 0 1em;
text-decoration: none;
}
main {
padding: 1em;
}
footer {
background-color: #333;
color: white;
text-align: center;
padding: 1em 0;
position: fixed;
width: 100%;
bottom: 0;
}
< /style>
< /head>
< body>
< header>
< h1>My Simple Website< /h1>
< /header>
< nav>
< a href="#">Home< /a>
< a href="#">About< /a>
< a href="#">Contact< /a>
< /nav>
< main>
< h2>Welcome!< /h2>
< p>This is a simple website built with HTML.< /p>
< /main>
< footer>
< p>© 2024 My Simple Website< /p>
< /footer>
< /body>
< /html>


Open Your HTML File in a Browser:
Save the index.html file.
Open your web browser.
Drag and drop the index.html file into the browser window or right-click the file and select "Open with" and then choose your browser.

Explanation of the Example
< !DOCTYPE html>: This declaration defines the document type and version of HTML (HTML5 in this case).
< html>: The root element of an HTML page.
< head>: Contains meta-information about the HTML document, such as the title and linked resources like stylesheets.
< title>: Sets the title of the webpage, which appears in the browser tab.
< style>: Contains CSS (Cascading Style Sheets) to style the webpage directly within the HTML file.
< body>: Contains the content of the webpage that is displayed to the user.
< header>: Represents the introductory content, typically containing the site's title or logo.
< nav>: Defines a set of navigation links.
< main>: Represents the main content of the document.
< footer>: Contains footer information, typically at the bottom of the page.