Basics of HTML links and images
images and links are the basic. foundation of any site. Without links a site won't be a site simply because your visitors will no way to navigate your site. With images brings life to your site contents.let's start with some basic html links:if you clicked on the two links you'll notice that they each opens loads differently. The first one simply reloads the page while The second opens in a new tab or window.that's because the target attribute was used in the second link to specify where to open the link. By specifying # as the URL means current page.[code language="HTML"] <a href="#" title="self link"> Link 1-load link in current window</a> <a href="#" title="blank link" title="blank link" target="_blank"> Link 2-Open New tab/window link</a> [/code]without trending too far the basic structure of a HTML Link:Tag/AttributesDescription
Steps
step 1<ato create a link simply start with the opening a tag
step 2href="url goes here"followed by a href attribute which is where you'll specify the URL which the link directs visitor to.
step 3title="some text here"next is the alt attribute. Which is used to show mouse hover over text that provides extra detail of a link.
step 4target=" specify where to load"next is the totally optional target attribute. Which allows you where the link should load in.If not set by default _self is used.options are:
  • _blank-if you want load link a new window/tab.
  • _self-(default) load link in current window/frame.
  • _parent - if using HTML frames, specifying this will load link to the parent of the current frame.
  • _top - loads the link to first level frames, for example if only two frames _top will be the parent frame.
  • frame nam - lastly you can specify a frame name to load a link to that's if you're using HTML frames.
step 5> Link textonce finished adding attributes simply closes of the first of the tag with a greater than character. Then add the text that will appear as the link.
step 6</a>Lastly finish off the HTML link by closing it all together.
finished link html mark up will look something like this:[code language="HTML"] <a href="http://www.jasondarkx2.com" title="link example" target="_blank"> example link yo!</a> [/code]easy eh? that does it for HTML links. :Dthe next topic of the day is HTML imagesJason Dark X2this here is a simple image.breaking it down:
StepsTag/AttributesDescription
Step 1<imgstart the image tag with this.
Steps 2src=" Image URL path/link"use src attribute to specify the image source.
step 3alt="some text here"next is the alt attribute. Which is used to show text that provides extra detail of a link. highly recommend adding this attribute. it's good for SEO and visitors using accessibility devices such as a screen reader.
step 3title="some text here"next is the alt attribute. Which is used to show mouse hover over text that provides extra detail of a link.
Steps 4width="" Optional you specify the width and/or the height of the image. Just note using these attribute will take precedent over CSS styling and can't be overwritten.
Steps 5/>Last close off the image tag with this.
finished link html mark up will look something like this:[code language="HTML"] <img src="http://www.jasondarkx2.com/logo.jpg" alt="Jason Dark X2" title="Jason Dark X2"/> [/code]If you notice using only the image tag mark up alone will only displays the image. If you want visitor to load the image you would have to combine link tag with the image tag. You can do this by using the image tag as the link instead of text. Then set the URL to point to the image file.Example of this right here:Jason Dark X2The markup:[code language="HTML"] <a href="image URL here" title="example image"> <img src="image URL here" alt="example image"/> </a> [/code]if you need a captions for your images simply wrap them with the figure tag and be sure to include a figcaption tag which contents the caption you want for your image.
Jason Dark X2
Example of captions
the mark up code here:[code language="HTML"]<figure> <a href="http://www.jasondarkx2.com/assets/JDX2logo.jpg" alt="Jason Dark X2" title="Jason Dark X2"> <img src="http://www.jasondarkx2.com/assets/JDX2logo.jpg" alt="Jason Dark X2" title="Jason Dark X2"/><figcaption> Example of captions</figcaption> </a> </figure> [/code]Well that pretty does it for this Basic HTML links and images tutorial, Happy coding!!
Tags:HTML, HTML5, Web Design, Web Tutorial
Share:

No comments

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.