HTML Basic Examples
Certainly! Here are some basic HTML examples to help you get started with creating web pages. HTML (Hypertext Markup Language) is the standard language for creating web pages. You can create HTML files using a text editor like Notepad on Windows, TextEdit on macOS, or any code editor of your choice.
- Creating a Basic HTML Document:
<!DOCTYPE html>
<html>
<head>
<title>My First Web Page</title>
</head>
<body>
<h1>Hello, World!</h1>
<p>This is a basic HTML page.</p>
</body>
</html>
In this example:
<!DOCTYPE html>declares the document type and version.<html>is the root element that contains all the HTML content.<head>contains meta-information about the document, such as the title.<title>sets the title displayed in the browser’s tab.<body>contains the visible content of the web page.<h1>is a heading element.<p>is a paragraph element.
- Adding Images:
<!DOCTYPE html>
<html>
<head>
<title>Image Example</title>
</head>
<body>
<h1>My Image</h1>
<img decoding="async" src="image.jpg" alt="A beautiful image">
</body>
</html>
In this example, the <img> element is used to display an image. src points to the image file, and alt provides alternative text for screen readers and if the image cannot be displayed.
- Creating Links:
<!DOCTYPE html>
<html>
<head>
<title>Link Example</title>
</head>
<body>
<h1>My Links</h1>
<a href="https://www.example.com">Visit Example.com</a>
</body>
</html>
The <a> element creates a hyperlink. href specifies the URL to link to.
- Creating Lists:
<!DOCTYPE html>
<html>
<head>
<title>List Example</title>
</head>
<body>
<h1>My List</h1>
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>
<ol>
<li>First</li>
<li>Second</li>
</ol>
</body>
</html>
<ul>creates an unordered list (bulleted).<ol>creates an ordered list (numbered).<li>creates list items.
- Adding Styles with CSS:
<!DOCTYPE html>
<html>
<head>
<title>CSS Example</title>
<style>
h1 {
color: blue;
}
p {
font-size: 18px;
}
</style>
</head>
<body>
<h1>Styled Heading</h1>
<p>This paragraph has a larger font size and blue heading.</p>
</body>
</html>
In this example, we use an inline <style> element to apply CSS styles to the HTML elements.
These are just a few basic examples to get you started with HTML. As you progress, you can explore more HTML tags and CSS to create more complex and styled web pages.
Conclusion
These are just a few basic examples to get you started with HTML. As you progress, you can explore more HTML tags and CSS to create more complex and styled web pages.