Steve Smith, host of your TQA Weekly, explains how-to use images and anchors in HTML.
Episode #2-23 released on March 4, 2012
Writing text, adding images, add links to other documents and web-sites are traditionally only an HTML thing. Today, I'll be showing you with Arachnophilia 5.5, how to add photos and links to your HTML files, web-pages, and web-sites.
How about we start talking about the free software solution I will now be demonstrating with, the rest of this Hard Coder series. Arachnophilia 5.5, available at arachnoid.com, is free careware. You may look at the definition of careware directly on the Arachnophilia page, at the Arachnoid.com web-site. This software is Java based, meaning that despite these demonstrations being done within Windows, you can use this software on any platform that supports Java. The author of Arachnophilia is Paul Lutus. A biological note is available on his web-site, and he has an amazing history of accomplishments and a very distinguished background. Arachnophilia is the software solution you can find installed on anything computer I program web-sites on.
Arachnophilia allows you to hard code a full web-site, preview your projects, and uses color coding to allow us to view our scriptings easily and quickly. This is especially necessary for debugging purposes. And, includes lists of pre-programmed macros to allow us to program web-sites faster and more accurately. For the purposes of making the development of a web-site easier, this is better than most software solutions using WYSIWYG editors like Dreamweaver, which most people who know me well enough, will know, I absolutely hate. Well drag and click allow you to create a web-site faster, it removes any ability from the part of non-programmers, the ability to debug code effectively, which is going to be an episode soon enough. Creating a web-sites is about absolute control of the final outcome. While, we can not control how a browser may show our final result, we can preview what it will look like a modify our web-sites accordingly. Editors like Arachnophilia will make this very simple.
Let's talk about how to add pictures to your web-site through the use of HTML code. There is only one tag, but several attributes are available, and usually important.
The image, or <img> tag has several important attributes such as src (the source of the photo), width, height, border, etc... These are just your base codes, we also have align, which allows you to align the photo to the page, and to the adjoining text. You have numerous ways of sourcing a photo into the tag. We call these methods relative and absolute, and this applies to anchor tags, as well. The <img> tag has no close tag, and is treated as an object, not an object modifier like the anchor tag, paragraph tag, etc.. A relative source may be as easily input as /folder/photo.type, a absolute source would be input as http://www.host.tld/folder/image.type.
The anchor tag, known as <a>, the most commonly used HTML tag, on the internet, and supported by a list of required and optional attributes, like the <img> tag. Attributes for the <a>, or anchor tag include the hypertext reference, or href, which is required to make the tag function correctly. Other optional attributes include the target tag, used to identify which window. There is also name, shape, rel, hreflang, etc... The definitions of these are available in the links, in the show notes. To build a link, you can also use a relative or absolute approach. To build the anchor tag with a relative hypertext reference, you would type in <a href=”folder/file.type”>text to identify link</a>. To build an absolute path into the anchor tag, you would type in <a href=”http://www.host.tld/folder/file.type”>text to identify link</a>. You must always close the anchor tag, as this could, and has made huge link errors in web-sites, in the past. Debugging such an error is easy, and I will soon discuss this in another episode.
If you wish to make an image click-able, and this is where it get's fun, you don't have any complicated coding to do, simple encase the image tag within the anchor tag like this <a href=”http://www.host.tld/folder/file.type”><img src=”folder/image.type”></a>. Now, in order to remove the border that occurs while doing such a link, we need only apply the attribute border=0 to the image tag, and the border will disappear. If you wish to make this image cling to the right or left of a paragraph, use the align=left or align=right attributes, and the image, which is still click-able, will align with the paragraph. I've made available in the show notes the W3S links to bother tags, and this web-site features a long list of possible tags for use.
Next week, we will be discovering how to identify running processes and how to end these processes with the Linux Terminal. The week after that, we will focus on tables, and how we can use them in HTML to storage and portray data, this before we head into the advanced HTML/CSS portion where I will finally teach you how to apply the commonly used tags to the new ways of making and modifying attributes and HTML objects.
Remember to like, share and subscribe to TQA Weekly. For more information like our show notes, how to join our mailing list, get your own TQA Weekly branded gear and apparel, or for our Android Application, please visit tqaweekly.com. We now feature an easier subscribe feature to allow you to download the latest episodes, and the web-site also has a search feature to allow you to find the solutions for your technology issues and problems. Stay safe and online, have a great day!
Host : Steve Smith | Music : Jonny Lee Hart | Editor : Steve Smith | Producer : Zed Axis Productions