You are here:

HTML/need html coding help!

Advertisement


Question
Hi Dan!

Hope you are having a wonderful day. I need help with HTML because I am very bad at it, and I need this code for my website.

How can I add text directly under each photo so I can add the price and product description under each photo?

Here is the code for a product grid I want to add text to:

<div><div style="width:400px;margin:0 auto"><a rel="nofollow" target="_blank" href="http://www.polyvore.com/cgi/thing?.embedder=9961244&.svc=copypaste&id=122169596"><img width="192" vspace="4" hspace="4" src="http://ak1.polyvoreimg.com/cgi/img-thing/size/l/tid/122169596.jpg" title="Gigi Armchair" height="192" /></a><a rel="nofollow" target="_blank" href="http://www.polyvore.com/cgi/thing?.embedder=9961244&.svc=copypaste&id=126096148"><img width="192" vspace="4" hspace="4" src="http://ak1.polyvoreimg.com/cgi/img-thing/size/l/tid/126096148.jpg" title="Bold Pink Lounge Chair" height="192" /></a><a rel="nofollow" target="_blank" href="http://www.polyvore.com/cgi/thing?.embedder=9961244&.svc=copypaste&id=123446389"><img width="192" vspace="4" hspace="4" src="http://ak2.polyvoreimg.com/cgi/img-thing/size/l/tid/123446389.jpg" title="Finn Juhl Poet Armchair" height="192" /></a><a rel="nofollow" target="_blank" href="http://www.polyvore.com/cgi/thing?.embedder=9961244&.svc=copypaste&id=126657526"><img width="192" vspace="4" hspace="4" src="http://ak2.polyvoreimg.com/cgi/img-thing/size/l/tid/126657526.jpg" title="Noir Buddha Chair" height="192" /></a></div><br /><div style="text-align:center"><small><a target="_blank"


Please help me out, I tried to learn HTML but I can't figure out how to add it in. I used polyvore.com to generate this code. Thanks!

Answer
There are a few ways to do this.  You say you're trying to learn HTML, which is an excellent skill to learn.  As such, I am not going to give you the answer, but point you in the right direction.

You have each image in a <div>, which is a container.  Anything inside that container will be placed together on your page. Place anything you want linked inside the <a> tag.  Below is the code for the firsr chair:

<div>
  <a rel="nofollow" target="_blank" href="http://www.polyvore.com/cgi/thing?.embedder=9961244&.svc=copypaste&id=122169596"><img width="192" vspace="4" hspace="4" src="http://ak1.polyvoreimg.com/cgi/img-thing/size/l/tid/122169596.jpg" title="Gigi Armchair" height="192" /><p>Name of Chair Here</p></a>
</div>

And you could reuse the same idea for the others.  

HTML

All Answers


Answers by Expert:


Ask Experts

Volunteer


Dan Stephenson

Expertise

I am a professional Web Designer & Developer. I work with HTML, XHTML and CSS every day, and would be glad to help with your problems, and answer your questions.

Experience


Experience in the area I have been a web designer/developer since 1997. I started developing websites with HTML 3.2 and using tables for layout. In 2006 I received my degree in Computational Media, and now work full time as a Webmaster and Interactive Media Author, as well as teaching continuing education courses on HTML, CSS and ActionScripting at my local college. Currently I design with XHTML and CSS - no tables and much cleaner and more accessible code and allows the designer more freedom and flexibility than tables.

Education/Credentials
New Media Production & Design Degree - SAIT Polytechnic

©2016 About.com. All rights reserved.