How does an HTML code like this one work? (Example in the question page.)

Question

<a href="http://tinypic.com" target="_blank"><img src="http://i33.tinypic.com/msg5so.jpg" border="0" alt="Image and video hosting by TinyPic"></a>

How do HTML codes like that work to make a picture???

Answer 1

The &lt;a href=&quot;http://tinypic.com&quot; sets up a link.  When people click on whatever is between the &lt;a..&gt;...&lt;/a&gt;  they will be directed to the site listed inside the href attribute (href=&quot;...&quot;), in this case http://tinypic.com.  The &#039;target=&quot;_blank&quot;&#039; attribute tells the browser to open the link in a window named &quot;_blank&quot;.  If no such window exists, the browser will open a new window and give it that name.

The picture is displayed using the &quot;&lt;img...&gt;&quot; tag.  &#039;src=&quot;http://i33.tinypic.com/msg5so.jpg&quot;... tells the browser where to look for the picture you want to load. You can make sure the &lt;img...&gt; will load correctly by typing the part of the src=&quot;...&quot; that is inside the quotes (in this case, http://i33.tinypic.com/msg5so.jpg).

Answer 2

Simple:

The &lt;a href=&quot;websiteurl&quot;&gt; and &lt;/a&gt; tags make the image into both an image AND a link. The &quot;target&quot; attribute tells the browser that when you click on the image, the website that was defined opens in a certain way. The &quot;_blank&quot; value tells the browser that you want the website to open up in a new window or tab (depending on browser settings.)

The &lt;img src=&quot;imageurl&quot;&gt; and &lt;/img&gt; tags tells the browser to retrieve a copy of the image from that location and put it on your website. The &quot;border&quot; attribute tells the browser to display a certain size of border around the image. The &quot;0&quot; value tells the browser that you do not want a border around the image. The &quot;alt&quot; attribute tells the browser that when the mouse pointer is over the image for a while, that word(s) will pop up saying something about or not about the image (it&#039;s up to you.) The &quot;Image and video hosting by TinyPic&quot; value tells the browser to display that text over the image when the mouse pointer is over the image for a while.

Hope this clears things up :)

-- HTML Dude

Answer 3

The &lt;a href=&quot;http://tinypic.com&quot; target=&quot;_blank&quot;&gt; and &lt;/a&gt; bit is just a link to tinypic and has nothing to do with the image being displayed.  The image is this part of the code:

&lt;img src=&quot;http://i33.tinypic.com/msg5so.jpg&quot; border=&quot;0&quot; alt=&quot;Image and video hosting by TinyPic&quot;&gt;

The image to be displayed is at &quot;http://i33.tinypic.com/msg5so.jpg&quot; and will be displayed with no border.  When you hover over it the text &quot;Image and video hosting by TinyPic&quot; will be displayed.

Answer 4

The &quot;a&quot; tell the browser to anchor. The &quot;href&quot; tell the browser to read that link and apply it to whatver comes between the &lt;a&gt; and the &lt;/a&gt; in between the quotes. The &quot;img src&quot; tell it to look for an image in the specified location. The &quot;alt&quot; gives some words to display in case someone&#039;s browser cannot display pictures.