Tags to format content: images, hyperlinks
Images are a bit different: they don't have a closing tag. The structure is similiar, but you don't wrap the tag around text. You simply insert the image tag.
The image tag does a number of things. It "points" to where the image is stored; this can be the same folder where the web files are, another location on the same site, or somewhere else entirely. You can display your own image or point to a graphic on a different site (making sure, of course, you violate no copyright).
The tag also lets you do things like set position (right, left), add space around the image, and other groovy tricks you don't need to know now).
- <img />
- that's the basic tag. note that it has the backslash before the closing angle bracket; that's necessary to properly "close" the image tag.
of course, you should point the browser to where the image actually resides. - <img src="files/images/pretty-picture.jpg" />
- "src=" is where you place the path to the image. here are some examples:
- src="pretty-picture.jpg" — the image is in the same location as the file; in Drupal, this is infrequent.
- src="files/images/pretty-picture.jpg" — this is more typical for Drupal: the image is in the files directory. to get exact locations, contact your Drupal website administrator.
- src="http://anotherweb.com/files/images/public/pretty-picture.jpg" — the complete web address to the images location on another website.
- <img class="" />
- "class" is a way of getting way more specific with your tags. this will be explained later, but for now just know that you could use class="right" to place the image on the right side of the paragraph (if your site admin has set up the stylesheets this way; check for such details as needed)
You can also specify the height and width of an image, but I find that easier to do when I actually create the image. (That's part of an entirely different discussion about image quality and structure.)
Links (hypertags)
Links are the #1 method to make a website "interactive." Without links, everything that appears on a particular page would be, well, it. With fancy, and expensive, java, Flash or other tools, you could make a page interesting. But provide a link to something else — another page, an email, the next step in a process — and you have a page that lets the viewer do something.
- <a></a>
- The basic tag. The text that goes between the tags (and it can be any text you want; it can even be an image) becomes the link. Usually you see that as underlined and a different color, but the appearance of a link is up to the page designer.
- <a href=>go to this page</a>
- "href=" make this tag a pointer to another location. This can be on the same page, the same website or anywhere on the Internet. It doesn't even have to be a webpage; it can be a pdf document, a Word file or some crazy computery thang. Here are some examples of how this can work:
- <a href="glossary">go to the Glossary</a>
this links to the Glossary page in this website - <a href="http://anotherweb.com/glossary">go to AW's Glossary</a>
this links to the Glossary page on another website
There's more but that'll do for now.
- <a href="glossary">go to the Glossary</a>
