HTML code
Created By: chatGPT
HTML (HyperText Markup Language) is the standard markup language for creating web pages. An HTML document is made up of elements that tell the browser how to display content. Here is a 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 Page</title>
</head>
<body>
<h1>Welcome to My Website</h1>
<p>This is a paragraph of text in my **HTML** page.</p>
</body>
</html>
In the head section, you can include metadata, CSS styles, and JavaScript files. Now, let's add a simple CSS style to change the background color of the page and the text color:
<style>
body {
background-color: #f0f0f0;
color: #333;
}
h1 {
color: #ff5733;
}
</style>
You can integrate the CSS into the head section of your document. Here is how your complete HTML document would look with the CSS included:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My First Page</title>
<style>
body {
background-color: #f0f0f0;
color: #333;
}
h1 {
color: #ff5733;
}
</style>
</head>
<body>
<h1>Welcome to My Website</h1>
<p>This is a paragraph of text in my **HTML** page.</p>
</body>
</html>
To create links in your HTML document, you can use the
<a>
element. Here’s an example of adding a link:<p>Visit my favorite website: <a href="https://www.example.com">Example.com</a></p>
Images are also easily added to an HTML document using the
<img>
tag. Below is how you can include an image in your webpage:<img src="image.jpg" alt="Description of the image" width="300">
Lists are a great way to organize content. You can create ordered or unordered lists. Here’s how to create each type:
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
<ol>
<li>First item</li>
<li>Second item</li>
<li>Third item</li>
</ol>
Finally, don't forget that HTML elements can be nested. Here’s an example of a nested structure with a list inside a paragraph:
<p>Here are my favorite fruits:
<ul>
<li>Apple</li>
<li>Banana</li>
<li>Cherry</li>
</ul>
</p>