Welcome guest. Before posting on our computer help forum, you must register. Click here it's easy and free.

Author Topic: Having issues getting images to display.  (Read 3901 times)

0 Members and 1 Guest are viewing this topic.

Deowolf

    Topic Starter


    Newbie

    • Experience: Beginner
    • OS: Windows 7
    Having issues getting images to display.
    « on: October 25, 2013, 11:39:59 AM »
    Just starting out with HTML and I'm having an issue getting the images to display in either notepad or the html editor on the site I'm using to learn html.
    The instructions are really straight forward and simple but it seems it's the easy things that are giving me all kinds of problems. The instructions basically say if you want to use an image from a folder use <img src="foldername/imagename.jpg alt="" width"" height"">
    Easy stuff if im understanding this right. Have a folder with an image in it, use the folder name then image name then the rest of the code, viola, it should work. In this case I made a new folder, named it, put a picture in it, put the code in and then nothing.. I know there's code for subdirectories, but it's just a folder stored on the desktop.

    Are the instructions over simplified or am I just a big idiot because for the life of me, I just can't get it to work.
    This should be incredibly easy and I should have moved on from this hours ago. I just want to see it work once, right down the code, and apply it at a later time.
    Is there more to it than what I'm doing?

    DaveLembke



      Sage
    • Thanked: 662
    • Certifications: List
    • Computer: Specs
    • Experience: Expert
    • OS: Windows 10
    Re: Having issues getting images to display.
    « Reply #1 on: October 25, 2013, 02:25:30 PM »
    <img src="picture1.jpg"> will display an image if the HTML source and image reside on the same folder location and picture1.jpg exists.

    <img src="c:\mywebsite\picture1.jpg"> will display the image no matter the html source file location on the local computer because it knows specifically the direct path to the image.

    For a website that is online through a webhost, I would try to keep your images local to your HTML source file so that you can create your website offline locally on your computer and then upload it to the web server and not have to deal with mapping issues to the images that you want to display. Later on if you want to keep images in their own folder you can go that route after first verifying that it works in the root folder of that of the HTML source, or once you grasp the HTML better you can go the route of placing images in folders that are other than the location of the HTML source file.

    Once you get an image to display with an instruction as simple as <img src="picture1.jpg"> you can add to this instruction for sizing and other features.

    There is also an issue with your instruction of:
    Quote
    <img src="foldername/imagename.jpg alt="" width"" height"">

    It is missing values for alt, width, and height as well as most importantly a closing " after the image file location. So I think you would get better results with:

    Quote
    <img src="foldername/imagename.jpg" alt="ImageDescriptionHere" width"120" height"120">

    As far as this:
    Quote
    Just starting out with HTML and I'm having an issue getting the images to display in either notepad or the html editor on the site I'm using to learn html.


    Notepad can not display images, it is just a text editor. If you want to view your webpage, I would locate it through a browser and have the browser handle the HTML to show you how it all operates. As far as HTML editor, unless it has a WYSIWYG feature or a HTML Page Viewer, it is likely bound to inability to show the page as it would display on a browser. I pretty much use a text editor and a browser for HTML development or a WYSIWYG tool like Dreamweaver. I have also taken the route of using PowerPoint to get everything laid out the way I want it and then save as HTML and post that online, as well as used a tool called MapEdit that allows you to map out x/y coordinates of an image to make embedded hyperlinks in images such as when you want to make a navigation bar using an image for the button layout and then you used MapEdit to select regions of the image and assign hyperlinks to the regions so that instead of using many many tables etc, you can have source file that calls an image for the user interface, and it has hyperlink declarations that make the image interactive. I also used this MapEdit tool to make HTML games before I learned how to make Flash Games which are better. As far as text editor goes, I have been using Crimson Editor which is free and color codes your source file no matter if you are working with HTML, C, C++, Perl, etc and so your source takes on colors that make the text stand out from the functions in the source. Way better than looking at black and white for long periods of time and way easier to find typos in your source because a typo can stand out as a function that is black and white that should be a color, and then you realize the typo and fix it and it takes on the color assigned for that feature function.

    If your website you are working on was located at say C:\mywebsite\   and your home page is index.html   you can enter C:\mywebsite\index.html into the URL window of your browser and your webpage will display just as it would online.