Tutorial on IMG SRC in HTML

Tutorial on IMG SRC in HTML thumbnail
Link your digital images to your HTML page.

HyperText Markup Language (HTML) is the language used to create Web pages. As you design your pages with HTML, learn how to use the image source (IMG SRC) code snippet (tag). This commonly-used tag enables you to call up a digital image and place it on your page, which is an especially crucial task considering that most Web documents utilize images for various purposes. Using the text editor application that comes with your computer, add your own photos with the HTML image source code.

Things You'll Need

  • Digital image
  • Text editor
Show More

Instructions

    • 1

      Place your digital image on a free Web host like FileFactory or MediaFire. Follow the provider's prompts to add (upload) your picture to the server and get the URL address of your graphic after it is added. A host allows you to link your image to a page so that it is displayed on the Internet.

    • 2

      Launch your text editor and open a document. Place your cursor in the area where you want the picture to show up.

    • 3

      Type the HTML image source code within angle brackets. Follow this with an equal sign and enter a pair of quotation marks after the entry. For example:
      <img src="">

      This code creates a placeholder for your image information.

    • 4

      Enter the URL address from Step 1 in between the quotation marks in the tag. To illustrate:
      <img src="http://www.webhost.com/image.jpg">

    • 5

      Type an "alt=" within the angle bracket and follow this with a description of what the image is. Place this information between quotation marks. For instance:
      <img src="http://www.webhost.com/image.jpg" alt="A map of the United States.">

      The "alt" data is used when your visitor views your page with a screen reader, or if your picture does not load successfully.

    • 6

      Save your HTML document.

Tips & Warnings

  • If you need help obtaining the URL address of your image (Step 1), click the "Help" or "Support" link on the provider page for specific instructions.

Related Searches:

References

Resources

  • Photo Credit digital camera age image by Steve Brase from Fotolia.com

Comments

You May Also Like

  • How to Change Image SRC in jQuery

    The jQuery software includes the JavaScript components for creating user interfaces on Web pages and developing interactive Web applications. The jQuery allows...

  • HTML <Src> Tab Tutorial

    Use tabs when writing documents to align text correctly into columns. Each time you press tab in a text editing program, the...

  • How to Create HTML Codes for Pictures

    Without pictures, the Internet would be a pretty boring place. Imagine nothing but page after page of text. Pictures bring a web...

  • How to Post an Image With HTML

    So you want to insert a graphic into your web page? HTML contains a command that lets you load your picture directly...

  • What Is the File Extension SRC?

    When creating a computer program, programmers create parts of the program in various files. There are a number of file types associated...

  • How to Reset iFrame SRC

    When you place a URL into the iframe source code, this means that the URL will appear within a box on another...

  • HTML 4.01 Tutorial

    HTML 4.01 is a specification for the HyperText Markup Language, the basic language used to create web pages. Introduced in 1999 as...

  • How to Insert Pictures in HTML Code

    Pictures can bring a Web page to life like no other element in Web design. Strictly speaking, HTML code does not insert...

  • What Are the Treatments for a Compressed Disc in Neck?

    Neck or cervical disc compression occurs when a disc bulges or becomes herniated, putting pressure on spinal nerves in the neck, causing...

  • Javascript Buttons Tutorial

    JavaScript buttons or mouse-over buttons are images. JavaScript code changes the appearances of the images when a computer mouse cursor is over...

Related Ads

Featured