inserting images in html

Discussion in 'HTML & Website Design' started by samartha_561, Feb 10, 2008.

  1. #1
    hellooooo friends
    can anyone help me out? i am in total mess!
    newbie to html, learning this n got confused with images.
    problem: how can i insert images which are in my computer or elsewhere into the page?
     
    samartha_561, Feb 10, 2008 IP
  2. SamBerns

    SamBerns Peon

    Messages:
    50
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #2
    ARe you using an editor to edit the pages? Also the images need to be on the web.
     
    SamBerns, Feb 10, 2008 IP
  3. samartha_561

    samartha_561 Peon

    Messages:
    27
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #3
    hi
    i am using notepad as my editor.
    if u can suggest me with any editor with which i can do my intended function that will also do

    thanx
     
    samartha_561, Feb 10, 2008 IP
  4. wppotential

    wppotential Banned

    Messages:
    46
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    0
    #4
    stick with notepad to keep learning, using automated editors you'll learn nothing.


    to insert an image, simply add the following code

    <img src="path to the image">
    Code (markup):



    For future reference, find out anything you need about coding from http://w3schools.com
     
    wppotential, Feb 10, 2008 IP
  5. Cyrus_vtn

    Cyrus_vtn Peon

    Messages:
    102
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    0
    #5
    if the images are in your comp then u can open the html file and it'll work too, they don't have to be uploaded to the server to test them.
     
    Cyrus_vtn, Feb 10, 2008 IP
  6. Apple888

    Apple888 Member

    Messages:
    52
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    45
    #6
    Also to some of the answers I use " border="0" so the image won't include the thick blue outline.. this will distort the original image.

    so..

    <img src="http://????.com" border="0">

    Good luck!
     
    Apple888, Feb 10, 2008 IP
    pipes likes this.
  7. bquast

    bquast Active Member

    Messages:
    275
    Likes Received:
    8
    Best Answers:
    0
    Trophy Points:
    78
    #7
    that only applies if you add a link around the image. make sure you explain things correctly.

    Brett
     
    bquast, Feb 10, 2008 IP
  8. Stomme poes

    Stomme poes Peon

    Messages:
    3,195
    Likes Received:
    136
    Best Answers:
    0
    Trophy Points:
    0
    #8
    No, Brett, he's right-- many of the default stylesheets on browsers make a border around images, link or not. Instead of sticking it in the HTML though, it should be in the CSS, next to the reset.

    stuff...

    img {
    border: 0;
    }

    Otherwise every single image has to have that extra code... waste of typing : )
     
    Stomme poes, Feb 11, 2008 IP
    bquast likes this.
  9. bquast

    bquast Active Member

    Messages:
    275
    Likes Received:
    8
    Best Answers:
    0
    Trophy Points:
    78
    #9
    O I was not aware of that, thanks for bringing that to my attention
     
    bquast, Feb 11, 2008 IP
  10. blueparukia

    blueparukia Well-Known Member

    Messages:
    1,564
    Likes Received:
    71
    Best Answers:
    7
    Trophy Points:
    160
    #10
    And Image should also have always have an ALT attribute. Here is a step by step guide on inserting an image, plus some basic styling.

    1. Create a new file in notepad and add into it:
    
    img{border:none}
    
    Code (markup):
    2. Save that file as screen.css.

    3. In your HTML document you should have <head> and </head>. Anywhere in between them add:
    <link rel="stylesheet" type="text/css" media="screen,projection" type="text/css">
    Code (markup):
    .

    4. Then between your body tags add this:
    <img src="path/to/image.png" alt="Alternate text">
    Code (markup):
    What is alternate text? If for some reason your image does not work - that text will display instead - it is a necessity in modern coding standards.

    In the end your HTML should look something like this:

    
    <html>
    <head>
    <link rel="stylesheet" type="text/css" media="screen,projection" type="text/css">
    <title>Page Title</title>
    </head>
    <body>
    <img src="path/to/image.png" alt="Alternate text">
    </body>
    </html>
    
    Code (markup):
     
    blueparukia, Feb 11, 2008 IP
  11. samartha_561

    samartha_561 Peon

    Messages:
    27
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #11
    hello friends
    i had tried with the syntax

    <img src="--------" alt="-------------">

    with the above syntax i am not able to view my images
    i had saved all my images in a separate folder
    if any one can be more specific with the solution will be really helpful
     
    samartha_561, Feb 13, 2008 IP
  12. samartha_561

    samartha_561 Peon

    Messages:
    27
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #12
    friends me being new here with html
    need the solution in html
    thanx for all who hav given my reply
     
    samartha_561, Feb 13, 2008 IP
  13. Stomme poes

    Stomme poes Peon

    Messages:
    3,195
    Likes Received:
    136
    Best Answers:
    0
    Trophy Points:
    0
    #13
    I think you're not typing the file path right. Lots of people have trouble with this one... your HTML should be good. The image won't show up though if it's not where the path says.

    Try sticking your images in the SAME FOLDER as the html and css files... that way, you can try <img src="nameoffile.gif" alt="etc"> and check to see if you see them.
     
    Stomme poes, Feb 13, 2008 IP
  14. MosTHaTeD

    MosTHaTeD Peon

    Messages:
    318
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    0
    #14
    wow this kinda helped me 2
     
    MosTHaTeD, Feb 13, 2008 IP
  15. samartha_561

    samartha_561 Peon

    Messages:
    27
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #15
    hello friends
    i got the fix for the problem
    guys the pro is with the extensions (jpeg-jpg) i thought both as same but both r unique
    friends try n find the difference.
    thanx everyone for the kind help
     
    samartha_561, Feb 18, 2008 IP
  16. innovati

    innovati Peon

    Messages:
    948
    Likes Received:
    63
    Best Answers:
    1
    Trophy Points:
    0
    #16
    the difference between jpg and jpeg is the letter 'e'

    both formats are identical, but you could name your file image.dlkt and as long at that's what you reference in your code, that's the file that will be placed there.

    from now on, I'd try to ame your JPEG's .jpg as it's the proper extension for JFIF images.

    JPEG means Joint Photographic Experts Group, and the file format they created was JPEG File Interchange Format.
     
    innovati, Feb 18, 2008 IP
  17. pipes

    pipes Prominent Member

    Messages:
    12,766
    Likes Received:
    958
    Best Answers:
    0
    Trophy Points:
    360
    #17
    Thanks, i had the problem recently of a thick blue outline when placing a banner on a site.
     
    pipes, Feb 20, 2008 IP