How Do I Add A Second Html File

In this tutorial, we'll acquire how to use HTML to add images on a website. We'll too learn how to add together culling text to images to amend accessibility for site visitors who employ screen readers.

Adding an prototype with HTML

Images are added to an HTML document using the <img> chemical element. The <img> element requires the attribute src which allows you to set the location of the file where the paradigm is stored. An paradigm chemical element is written like this:

                                                    <img              src                              =                "Image_Location"                            >

Note that the <img> element does not use a closing </img> tag. To try using the <img> element, download our image of Sammy the Shark and identify it in your project directory html-exercise.

Note: To download the paradigm of Sammy the Shark, visit the link and CTRL + Left Click (on Macs) or Right Click (on Windows) on the paradigm and select "Save Image Equally" and save it every bit small-profile.jpeg to your projection directory.

Next, erase the content of your index.html file and paste <img src="Image_Location"> into the file. (If you have not been following the tutorial series, you tin can review instructions for setting upward an index.html file in our tutorial Setting Upward Your HTML Project.

Then, copy the file path of the prototype and supercede Image_Location with the location of your saved image. If you lot are using the Visual Studio Code text editor, you can copy the file path by using CTRL + Left Click (on Macs) or Right Click (on Windows) on the epitome file small-profile.jpeg in the left-hand panel and selecting "Re-create Path." For an illustration of the process, delight see the gif beneath:

Gif of how to copy an image file path

Annotation: Make certain to copy the relative or project file path of the epitome rather than the absolute or full file path of the image. The relative path refers to the file location relative to the current working directory (equally opposed to the absolute path, which refers to the file location relative to the root directory.) While both paths will work in this instance, only the relative path would piece of work if we decided to publish our website online. Since our end goal is to create a publishable website, we will start using relative paths now when adding <img> elements to our document.

Save your index.html file and reload it in your browser. Yous should receive something like this:

Image in browser

Technically, you tin as well use links to images hosted online every bit file paths. To understand how this works, try replacing the prototype location with a link to our image of Sammy the Shark like this:

                                                    <img              src                              =                "https://html.sammy-codes.com/images/small-profile.jpeg"                            >

Save your file and reload it in the browser. The image should nevertheless load in your web document, but this fourth dimension the prototype is beingness sourced from its online location rather than your local projection directory. You can experiment with adding other online images by using their location links as the src aspect in the <img> tag.

However, when building a website information technology is generally better to host your images in your project directory to ensure the sustainability of the site. If the epitome is taken down past its host or if its accost changes, it volition no longer return on your site.

Alternative Text for Accessibility

When adding an image, y'all should always include alternative text describing its content using the alt aspect. This text is typically not displayed on the webpage but is used past screen readers to communicate content to visually-dumb site visitors.

                                                    <img              src                              =                "https://html.sammy-codes.com/images/minor-contour.jpeg"                                            alt                                  =                  "Digital Sea'south mascot, a blue smiling shark.                                            "                            >

When adding alternative text, keep the following best practices in heed:

For informative images, culling text should conspicuously and concisely draw the subject matter of the paradigm, without referring to the paradigm itself. For example, practise not write "Image of Sammy the Shark, DigitalOcean's mascot" but "Sammy the Shark, DigitalOcean'due south mascot."
For decorative images, the alt attribute should still be used but with a aught value, equally this improves the screen reader experience: <img src="images/decorative_image.jpeg" alt="">.
For a useful guide on determining whether an paradigm is informative or decorative, visit https://world wide web.w3.org/WAI/tutorials/images/decision-tree/

You lot should at present have familiarity with how to add together images to your HTML document and how to add alternative text to assistance with accessibility. We'll learn how to modify the image size and style in the tutorial How To Add together a Profile Image To Your Webpage after in the series. In the next tutorial, we'll learn how to add links to an HTML document.