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:

• Link 1-load link in current window
• Link 2-Open New tab/window link

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.

<a href="#" title="self link"> 
Link 1-load link in current window
</a>

<a href="#" title="blank link" target="_blank" rel="noopener noreferrer"> 
Link 2-Open New tab/window link
</a>

without trending too far the basic structure of a HTML Link: Tag/AttributesDescription

Steps
step 1	<a	to create a link simply start with the opening a tag
step 2	href="url goes here"	followed by a href attribute which is where you'll specify the URL which the link directs visitor to.
step 3	title="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 4	target=" 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 text	once 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:

<a href="https://www.jasondarkx2.com" title="link example" target="_blank" rel="noopener noreferrer">
example link yo!
 </a>

easy eh? that does it for HTML links. 😀 the next topic of the day is HTML images this here is a simple image. breaking it down:

Steps	Tag/Attributes	Description
Step 1	<img	start the image tag with this.
Steps 2	src=" Image URL path/link"use src attribute to specify the image source.
step 3	alt="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 3	title="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 4	width="" height=""	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:

<img src="https://www.jasondarkx2.com/logo.jpg" alt="Jason Dark X2" title="Jason Dark X2"/>

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: The markup:

<a href="image URL here" title="example image">
 <img src="image URL here" alt="example image"/>
 </a>

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.

the mark up code here:

<figure>
 <a href="/assets/JDX2logo.jpg" alt="Jason Dark X2" title="Jason Dark X2">
 <img src="/assets/JDX2logo.jpg" alt="Jason Dark X2" title="Jason Dark X2"/>
<figcaption> Example of captions</figcaption>
 </a>
 </figure>

Well that pretty does it for this Basic HTML links and images tutorial, Happy coding!!
Tags:HTML, HTML5, Web Design, Web Tutorial