07/14/10 by admin | Blog, HTML Tips, Recent Posts | No Comments »
Creating links is quite easy and always necessary. This series is for those that know how to click on a link but don’t quite get the mechanics behind the link itself. If you’re new to blogging, there are some fundamental HTML elements you should know and this week I thought hyperlinks should be top on that list.
In WordPress, when creating a post, there is a little button that will allow you to create a link. I use this feature often, but it doesn’t quite provide all of the link attributes I need or want so I usually end up having to edit the links manually.
A link (or Hyperlink) is used to send your visitors to another page either within your own site or to someone else’s site. You would know this from your own basic internet searches or from interacting on the sites you visit yourself. But how do you create those links? It’s very easy and I’ll show exactly how to do it, but first a little education…
Definitions:
Source page – the page containing the link
Destination page – the page being linked to from the source page
HTML elements – everything from a start tag <a></a> to the end tag
Element content – everything in between the start tag and the end tag <a></a> this is the element content
Attributes – provide additional information about and element, they are always specified in the start tag, always come in name/value pairs like target=”_blank”
When creating a link you need the correct HTML elements to make it function. Here’s an example:
<a href="http://www.creativedesignworx.com">Creative Design Worx</a>
Which would look like:
Creative Design Worx
Let’s break this down, shall we?
“a” is the anchor element which works with the “href” element which specifies the destination of your link
“Creative Design Worx” is the element content
“/a” is the end tag (notice the “/” which always signifies a closing tag)
Now you can link anything including an image which would work the same way except the content element would be different. Instead of text, you would insert the image elements:
<img src="http://creativedesignworx.com/myimage.jpg" alt="" />
Your Link tag would now look like:
<a href="http://www.creativedesignworx.com"><img src="http://creativedesignworx.com/myimage.jpg" alt="" /></a>
Which would look like:
Target Links
So those are the basics, now let’s look at how to direct the link to a specific target (this is where the linked page or destination page would open)
By default, if you don’t specify a “target” the destination page will open inside the browser window you (or the reader) is currently on (_self). But, you may not want your visitor to be taken away from your site while directing him to checkout information on another. In this case you would set the target to open in a new window, therefore, keeping your own webpage open as well.
Here’s what you would do:
<a href="http://www.creativedesignworx.com" target="_blank">Creative Design Worx</a>
By adding ” target=”_blank” right after the web url you are sending them to a new page or tab while your site remains open.
In you are sending your visitor to a link within your own website and it doesn’t matter if they leave the page they are currently on (ie. From your home page to your contact page), you would create the link like this:
<a href="http://www.creativedesignworx.com">Creative Design Worx</a>
Or
<a href="http://www.creativedesignworx.com" target="_self">Creative Design Worx</a>
Now, because _self is the default for any link, you really don’t need to waste the time to actually add that element, this is more for educational purposes.
Email Links
There are times when you will want to create an email link which will allow people to contact you directly. This method will open their email client automatically with your email address already inserted. (works with most email clients)
In this case the element is a little different than the links we did above, for an email like you would use the “mailto” attribute.
Here’s an example
<a href="mailto:yourname@mysite.com">Click Here to Email Me</a>
Now let’s say you wanted to have people email you about a specific subject and you want it to stand out when then are delivered to your email box. You can use the “subject” attribute and insert your own subject line.
Example:
<a href="mailto:yourname@mysite.com?subject=Feedback from XY Article">Click Here to send me your feedback</a>
I would suggest you don’t use these links on your webpages directly as they can be grabbed easily by spammers. Instead, use these in place like your email newsletter (not published online) or your personal emails or even in pdf documents you may create.
I think that pretty much wraps up the basics of linking. There are other attributes you can use which I’ll cover in another post.
If you have questions, comments or would like me to add a tutorial on a specific topic, please let me know by leaving a comment below.
Hope this helps…
Toresa:)
07/02/10 by admin | HTML Tips, Just for Fun!, Recent Posts, Web Design Resources | No Comments »
45 iPhone Applications for Web Designers and Developers
I’m was sitting here tonight just trying to ignore the heat and came across a really cool post for iPhone apps. Even if you’re new to this whole thing (design), you still might find some of these very handy.
There are a few quick reference guides for CSS, HTML and PHP which could prove to be invaluable, especially if you are new or have been away from the “code” side for any length of time.
There’s stuff for organizing and making lists, financial apps and so much more…I think I’ll sit out in the cooler (not really cool) night air and play with my new toys:)
Enjoy Read more →
01/27/09 by admin | HTML Tips, Recent Posts | 1 Comment »
I think we’ve all been in this position where we want to show our images yet when hyperlinked (or because of the css code), we end up with ugly borders (usually blue). I’ve noticed it on this theme and will now have to make the changes…grrr.
In wordpress, the image properties has a section called “border” in the advanced tab of the image settings area. By simply putting a 0 (zero) in the box and saving it you’ll remove the border, sometimes, and depending on your theme. Personally, I’m not a fan of WordPress’s image features, infact, besides what I’m showing you here, you should also check out my post on How to Wrap Text Around an Image so you can nicely position your images without many of the hassles I’ve come across by using the wordpress image settings.
So, if you’re in a situation where you need to physically change the html code, here’s what you do:
Below is a typical image code:
<a href="http://www.yoursite.com"><img src="http://www.creativedesignworx.com/images/remove_blue_border_sample.gif" alt="" width="250" height="250" /></a>
Which would produce this:
This is your image (summer_flower.jpg) hyperlinked to www.yoursite.com, and leaving it this way will likely create a blue border around your image.
Now, by simply adding this little snippet into your image code, you’ll be able to remove the border:
style="border: 0pt none;"
<a href="http://www.yoursite.com"><img alt="" /><strong>style="border: 0pt none;"</strong> src="http://www.creativedesignworx.com/images/remove_blue_border_sample.gif" alt="" width="250" height="250" /></a>
Now you see…no border!
That’s it! Easy as pie:)
Update - I’ve created a really quick video to explain the wordpress image properties as I talk about in the beginning of this post
(Note, it’s not the greatest as I’m just learning a new video software, but as I go along my videos should get better:)
11/23/08 by admin | HTML Tips, Recent Posts, Web Design | 3 Comments »
I am often asked how to wrap text around an image or, simply put, how to place the image to the left or right of your text. You can see an example to the left of this paragraph.
You can use this little snippet of code just about anywhere. It’s perfect for adding images to your blog post or adding Adsense or banners into your text.
Below is the generic code you can use, just copy and paste. I’ll also give you a few examples with changes to the code for different layouts.
Generic Code
——————————————————————-
Then type your text here.
——————————————————————-
If you want to place the image to the right of your text, change the “float:left” to “float:right”.
float:right;
——————————————————————
——————————————————————
You can change the distance between the text and the image by changing the margins. You’ll need to know the order of the margins, so here’s a tip…
margin: 0px 10px 0px 0px;
Think of a clock…1st is top, 2nd is right, 3rd is bottom and 4th is left.
Play with the 4 different margins to get your text where you think it looks best.
Examples:
margin: 0px 200px 0px 0px;
Notice how close the image is now to the text…
margin: 0px 20px 0px 0px;
Notice how far the image is now from the text…
In the above examples you see how you can adjust the right margin as close or as far from the text as you wish simply by changing the 2nd (right) margin.
Now, let’s try it with the image to the left of the text.
margin: 0px 200px 0px 0px;
Notice how far the image is now to the text…
margin: 0px 20px 0px 0px;
Notice how close the image is now to the text…
Adjusting the “other” margins…
Top Margin
——————————————————————
——————————————————————
This is just some text to show you how it looks when the 1st or top margin is changed from 0px to 50px…..notice how the image is way below the start of our text.
dfjsdkflasdjfkasldfjkasdlfjkasldjfas;ldfkjas;ldkf
asldkfjaskdlfjas
asdlkfjaksdlfjasldkfj
dfjsdkflasdjfkasldfjkasdlfjkasldjfas;ldfkjas;ldkf
asldkfjaskdlfjas
asdlkfjaksdlfjasldkfj
dfjsdkflasdjfkasldfjkasdlfjkasldjfas;ldfkjas;ldkf
asldkfjaskdlfjas
asdlkfjaksdlfjasldkfj
Bottom Margin
——————————————————————
——————————————————————
This is just some text to show you how it looks when the 3rd or bottom margin is changed from 0px to 50px…..notice how far the text falls below the image when it wraps around the image.
dfjsdkflasdjfkasldfjkasdlfjkasldjfas;ldfkjas;ldkf
asldkfjaskdlfjas
asdlkfjaksdlfjasldkfj
dfjsdkflasdjfkasldfjkasdlfjkasldjfas;ldfkjas;ldkf
asldkfjaskdlfjas
asdlkfjaksdlfjasldkfj
dfjsdkflasdjfkasldfjkasdlfjkasldjfas;ldfkjas;ldkf
asldkfjaskdlfjas
asdlkfjaksdlfjasldkfj
These are just a few examples of how you can use this snippet of code to change the layout of your page, now you can copy and paste the generic code and play with it.
Toresa:)
ps. Was this helpful? Let me know by leaving a comment below…
