CODING WITH HTML 2 - IMAGES, LINKS AND ACCESSIBILITY SS1 NOTE
CODING WITH HTML 2
IMAGES, LINKS AND ACCESSIBILITY
HTML page to include images <img>
and hyperlinks <a href>
Introduction
Web pages are more attractive and
useful when they contain images and links. Images help to communicate
information visually, while hyperlinks connect users to other web pages or
resources. When designing websites, accessibility should also be considered to
ensure that all users can access and understand the content.
Accessibility in Web Design
Meaning
of Accessibility
Accessibility refers to the practice
of designing websites so that all users, including people with disabilities,
can access and use them effectively.
Importance
of Accessibility
- Makes websites available to everyone.
- Assists visually impaired users through screen readers.
- Improves user experience.
- Enhances website usability.
- Supports equal access to information.
Accessibility and Images
When adding images, the alt attribute should be used to describe the image.
<img src="computer.jpg" alt="A desktop computer">
Adding Images in HTML
The Image Tag
The <img> tag is used to display images on a web page.
<img src="image.jpg" alt="Description of image">
Attributes of the Image Tag
Attribute Function src Specifies the image location alt Provides alternative text width Sets image width height Sets image height
Adding Hyperlinks in HTML
Meaning of Hyperlink
A hyperlink is a clickable element that takes a user to another web page, file, or website.
The Anchor Tag
The <a> tag is used to create hyperlinks.
Syntax
<a href="URL">Link Text</a>
<a href="https://www.google.com">Visit Google</a>
Opening Links in a New Tab
<a href="https://www.google.com" target="_blank">
Visit Google
</a>
Practical Example
HTML Page with Image and Link
<html>
<head>
<title>Images and Links</title>
</head>
<body>
<h1>Welcome to My Website</h1>
<p>Click the link below:</p>
<a href="https://www.google.com" target="_blank">
Visit Google
</a>
<br><br>
Comments
Post a Comment