If you are new to web development, creating a webpage may seem like a daunting task. Thankfully, with HTML, the basic language of the web, creating a simple webpage with an image is much easier than you might think. In this article, we will go through step-by-step how to create a simple HTML page with an image.
Introduction to HTML
HTML is a markup language designed for creating webpages. It provides structure to web content by using markup tags to denote headings, paragraphs, links, images, and other elements. The latest version of HTML is HTML5, which is supported by all modern browsers.
Basic Structure of an HTML Page
An HTML page consists of two main parts: the head and the body. The head contains information about the page such as the title, meta data, and links to stylesheets and scripts. The body is where the content of the page is located. Here is an example of a very basic HTML page:
<!DOCTYPE html>
<html>
<head>
<title>My First HTML Page</title>
</head>
<body>
<h1>Welcome to my website</h1>
<p>This is my first HTML page.</p>
</body>
</html>The <!DOCTYPE html> tag declares the document type and must be included at the top of every HTML page. The html tag denotes the start of the HTML document, and the head and body tags denote the start of the head and body sections, respectively. The title tag defines the title of the webpage that appears in the browser’s title bar. The h1 tag denotes a heading, and the p tag denotes a paragraph of text.
Adding an Image to an HTML Page
To add an image to an HTML page, we need to use the img tag. The img tag is an inline element that displays an image on the webpage. Here is the syntax for the img tag:
<img src="path/to/image.jpg" alt="Description of image">The src attribute specifies the path to the image file. This can be a relative or absolute path. The alt attribute provides a description of the image that will be displayed if the image cannot be loaded or for screen readers.
Let’s add an image to our previous example:
<!DOCTYPE html>
<html>
<head>
<title>My First HTML Page</title>
</head>
<body>
<h1>Welcome to my website</h1>
<p>This is my first HTML page.</p>
<img src="images/myimage.jpg" alt="A beautiful sunset">
</body>
</html>Here, we added an img tag below the p tag. We specified the path to the image file using the src attribute, and we provided a description of the image using the alt attribute.
Additional Image Attributes
In addition to the src and alt attributes, there are several other attributes we can use with the img tag:
width: specifies the width of the image in pixelsheight: specifies the height of the image in pixelstitle: specifies a title for the image that is displayed when the user hovers over the imagestyle: allows us to specify CSS styles for the imageclass: allows us to apply CSS styles to multiple images using a shared class name
Here is an example of using the width, height, and title attributes:
<img src="images/myimage.jpg" alt="A beautiful sunset" width="800" height="600" title="Sunset over the ocean">In this example, we set the width and height attributes to 800 and 600 pixels, respectively. We also set the title attribute to “Sunset over the ocean”, which will be displayed when the user hovers over the image.
Styling Images with CSS
We can also style images using CSS. This allows us to change the appearance of the image, such as its size, shape, border, and position.
Here is an example of using CSS to add a border and adjust the size of an image:
<style>
img {
border: 1px solid black;
width: 50%;
}
</style>
<img src="images/myimage.jpg" alt="A beautiful sunset">In this example, we added a style block to the head section of the HTML page. We used the img selector to target all img elements on the page. We added a 1-pixel solid black border to the image using the border property. We also set the width of the image to 50% of its container using the width property. Finally, we added an img tag to display the image on the page.
Conclusion
Congratulations! You have now learned how to create a simple HTML page with an image. We covered the basic structure of an HTML page, how to add an image using the img tag, and additional attributes and styling options for images. With these skills, you can begin creating your own webpages and adding images to make them more engaging and visually appealing.
📕 Related articles about HTML
- How to Use HTML Canvas: A Comprehensive Guide to Achieve Extraordinary Graphics
- How to Create HTML Tables: A Comprehensive Guide for Absolute Beginners
- How to Insert HTML Images: A Comprehensive Guide for Beginners
- HTML Colors: Understanding Color Theory and Implementation
- Bootstrap 5 Modal Tutorial: Building Beautiful, Responsive and Accessible Modals
- The Best Way to Learn HTML and CSS
