How do I add image to my web page?

  • Thread starter Thread starter Math10
  • Start date Start date
  • Tags Tags
    Image Web
Click For Summary
SUMMARY

To add an image to a web page, use the HTML element with the correct syntax: My Logo. The "src" attribute must contain the path to the image file, which can be a relative path if the image is in the same directory as the HTML file or an absolute URL if the image is hosted online. The "alt" attribute provides alternative text for the image, which is displayed if the image cannot be loaded, but it is not essential for displaying the image itself.

PREREQUISITES
  • Basic understanding of HTML structure
  • Knowledge of file paths (relative and absolute)
  • Familiarity with the element and its attributes
  • Understanding of web hosting and URLs
NEXT STEPS
  • Research how to use relative and absolute paths in HTML
  • Learn about the importance of the "alt" attribute for accessibility
  • Explore best practices for optimizing images for web use
  • Investigate how to troubleshoot common image loading issues in web development
USEFUL FOR

Web developers, designers, and anyone looking to enhance their web pages with images effectively.

Math10
Messages
301
Reaction score
0

Homework Statement


How do I add image to my web page?

Homework Equations


None.

The Attempt at a Solution


I know that the img element is <img src="logo.png" alt="My Logo"> but I don't know what to type between the 2 quotation marks for "logo.png" and "My Logo". I put logo.png and My Logo between them but it doesn't work. What should I input between " " and " "?
 
Physics news on Phys.org
Math10 said:

Homework Statement


How do I add image to my web page?

Homework Equations


None.

The Attempt at a Solution


I know that the img element is <img src="logo.png" alt="My Logo"> but I don't know what to type between the 2 quotation marks for "logo.png" and "My Logo". I put logo.png and My Logo between them but it doesn't work. What should I input between " " and " "?
If logo.png is in the same directory as the HTML page that contains this img element, what you have should work. If the file is in some other directory, you need to supply the path and file name.

The alt attribute is alternate text to display in case the viewer's browser is unable to download the image. You can put in there pretty much whatever you want.
 
As Mark44 said, but let me elaborate.

Is your picture online right now? Are you able to see it somewhere? If so, how? You must have a URL that points to it. (the address in your address bar of your browser).

The URL is what you put in the src="". There are subtleties, but that's the gist of it.

Don't worry about alt too much just yet. It is not essential to displaying your image.
 

Similar threads

How to Correctly Load a New Logo in React?
  • · Replies 23 ·
Replies
23
Views
8K
React - load new image - error - part 2
  • · Replies 32 ·
2
Replies
32
Views
3K
Comp Sci How to Integrate XML and JavaScript in Web Development?
  • · Replies 22 ·
Replies
22
Views
2K
Establish connection between web app and stand-alone app
  • · Replies 1 ·
Replies
1
Views
2K
Engineering Image Processing: Convolution vs Filtering
  • · Replies 1 ·
Replies
1
Views
2K
JavaScript How does pasting an image work, e.g. when composing a PF post?
  • · Replies 3 ·
Replies
3
Views
2K
Images not loading in the lower part of the page in my browser (at wordpress.com)
  • · Replies 3 ·
Replies
3
Views
857
Help resetting some sort of style template in Joomla (3.10)
  • · Replies 5 ·
Replies
5
Views
2K
Engineering Do Identical Histograms Remain the Same After Applying a Smoothing Mask?
  • · Replies 2 ·
Replies
2
Views
5K
How do I place my image on top right corner of my web page?
  • · Replies 2 ·
Replies
2
Views
2K