# HTML Links and Images Links allow users to navigate between pages and websites. Images can be used to display photos, logos and graphics on a webpage. --- ## Creating a Link Use the `a` element to create a hyperlink. ```html Go to Page ``` Result: Go to Page When clicked, the browser will open the specified page. --- ## Linking to Another Website Use a full web address when linking to an external website. ```html Visit Google ``` Result: Visit Google --- ## Opening a Link in a New Tab Add the `target="_blank"` attribute. ```html Visit Google ``` Result: Visit Google The `rel` attribute improves security when opening new tabs. --- ## Linking to an Email Address Use the `mailto:` protocol. ```html Email Teacher ``` Result: Email Teacher When clicked, the user's email program will open. --- ## Creating an Image Use the `img` element. ```html Photo of a dog ``` The `src` attribute specifies the image location. The `alt` attribute provides alternative text if the image cannot be displayed. ![Photo of a Dog](https://mr.napper.au/uploads/images/gallery/2026-06/dog.jpg) --- ## Setting Image Width Use the `width` attribute. ```html Photo of a dog ``` The image will be displayed at 100 pixels wide. Photo of a Dog ## Responsive Images A responsive image automatically scales to fit different screen sizes. ```html Photo of a dog ``` This is useful for: - Phones - Tablets - Laptops - Desktop computers --- ## Using an Image as a Link Images can also be used as buttons. ```html Dog ``` When the image is clicked, the browser will open the specified page. Dog --- ## Displaying a Logo A common use of images is displaying a website logo. ```html Company Logo ``` --- ## Creating an Image Gallery Multiple images can be displayed together. ```html Dog 1 Dog 2 Dog 3 ``` --- ## Complete Example ```html Links and Images

Links and Images

Internal Page

Google

Email Teacher

Photo of a dog ``` --- ## Quick Reference ### Internal Link ```html ``` ### External Link ```html ``` ### New Tab ```html target="_blank" ``` ### Email Link ```html ``` ### Image ```html Description ``` ### Image Width ```html width="300" ``` ### Responsive Image ```html style="max-width:100%;" ``` ### Image Link ```html ``` You now know how to create hyperlinks and display images in HTML. Next tutorial: **HTML Lists and Tables**