Posts Tagged ‘html’
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:)
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:)
12/29/08 by admin | Web Design | No Comments »
Again, my friend Kyle Reddoch brings us another great web design tip. This is actually a 3 part series, but I’m going to include them all in this post for your convenience.
HTML TITLE tag – understanding web page titles
Many web developers ignore the importance of the <title> tag. Though, according to HTML specifications, the use of <title> is mandatory, I have come across many pages on the Internet in which this tag is just not used.
<title> provides us with an opportunity to spell out the content of our pages. It is also used by search engines to index pages. On search sites such as Hotbot, Altavista etc. the title of the web page is displayed as the link.
This tip will show you how to write titles better, or rather, in a more logical manner. I have adopted this style and it has helped me in maintaining my web sites and in search engine optimization.
Decide on the keywords for the page and then build the title tag around them. Make sure you have all the keywords / key phrases in the title tag.
Contents of the HTML title tag
I have always believed that <title> tags should contain the important keywords and key phrases. This helps the web page to rank higher in search engines. I usually follow the keywords with the web site structure. I first put the the description of the present page (so that all keywords are contained in this description). Be sure that all the keywords and key phrases are included in the <title> tag.
You can use commas or hyphens to separate the key phrases in the <title> tag.
You must remember not to use colons or the forward slash (/) in the<title> tag. When you save a web page using the “Save As” option from the browsers “File” menu, the contents of the <title>are used as the file name. Since colons are not allowed within filenames on a Macintosh system and slashes are used to represent directories, it’s best to avoid them. Hyphens and commas, thus, seem as the best good choice.
Importance of TITLE Tag in Search Engine Optimization
The TITLE of a web page is displayed on the title bar of the browser. The title text is placed between the <TITLE> - </TITLE> tags inside the HTML head section.
There are a few important reasons why you should choose an intelligent title for a web page
* Many search engines display the results using the content of the TITLE tag.
* If the title is missing, such search engines will display the page as “Untitled”. This is not only ugly but also very unprofessional.
* The contents of the TITLE tag are used by search engines to index the page.
* It’s recommended that you write down all the important keywords that describe the web page contents and compose a sentence that should be used as the title of the page.
I hope this gives you a better understanding of the title tag and why you should ensure your web pages includes it. If you have comments or questions regarding web page title tags, leave us a comment below.
12/28/08 by admin | Web Design | No Comments »
Here’s another tip from my friend Kyle Reddoch on the importance of headings and how best to use them for SEO purposes…
Headings form a part of the logical structure of an HTML document. There are six heading tags <h1> to <h6> each having its ending tag.
To get better ranking in search engines, make sure that the web page headings contain all (or the most important) keywords and key phrases. If the same keywords and key phrases are repeated in the paragraph following the heading, the page will certainly get a boost in ranking.
You should NEVER use headings to increase the size of text. You have at your disposal the <font>tag, and the <small>, <big> tags for that purpose. Furthermore, you can gain a better control over font size and other text properties using Cascading Style Sheets.
Since headings provide a logical structure to the document, another important thing to remember is NEVER to use smaller level headings before the higher. Thus, <h4> should not be used before <h2> (though, HTML does not enforce this).
If you found this tip on web page headings using HTML tags helpful, please let us know by posting below.
12/03/08 by admin | Recent Posts, Web Design | 10 Comments »
A CSS or “Cascading Style Sheet” file allows you to separate your websites content from it’s style or appearance. While you would create the layout of your websites content using your (X)HTML file, the CSS stylesheet would control the way in which that content appears (fonts, colours, borders, backgrounds, margins, etc.).
There are 3 methods you can use to implement the css into your design, but which one is better is dependant on what you are doing, or where you are using it.
Let’s first see what each one involves, then we can decided on the ultimate CSS method for
your project.
We aren’t going to go into details on the styles themselves, rather we’ll just go over the three methods in general.
Internal Stylesheets
This method places the CSS code itself inside the tags of your page. With this method each page is separate, therefore, the code must be placed inside each page in order for the styles to work their magic on every page of your website.
Example:
<!--
p { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; color: #000000;
h1 { font-family: Arial, Helvetica, sans-serif; font-size: 14px; color: #000099; }
-->
I’m sure you can imagine how tedious it would be to update every page of your website one-by-one, so let’s examine this option…
External Stylesheets
The external stylesheet is a file all on it’s own that can be created using something as simple as notepad. This file contains no html code. When you save it, give it the .css extension and you have yourself an external stylesheet.
The styles would be the same as those listed about, but with the external stylesheet, you would link to it from within your “head” tags.
Example:
You would then place this code in your html document as shown below:
Using this method would give you far more flexibilty and of course save you time. By simply updating your external stylesheet, every page on your site would be updated at once, rather than using the internal stylesheet where you would have to update and change each individual page.
And finally, the Inline Styles
I don’t use this too often, but I do find it handy when I’m putting together a quick blog post or adding adsense to a page or even on websites where I am posting but don’t have any control over the css files.
An example would be one I explained in my article “How to Wrap Text Around an Image“.
Then type your text here.
This code is an example of using inline css to wrap your text around an image or ad. You could add the style to your internal or external css, but if you are working on the fly, or simply can’t, this is one solution you could use.
So again, which one is better?
- If you are creating a multi-paged website, an external css file would be the better choice. It would save you time and make updating your pages almost an instant process.
- If you are creating a single page, you could use an internal stylesheet simply because you only have to update the one page.
- And if you are working on content to be placed somewhere that you don’t have access to css or just want a quick style change, inline will do.
Some would say using the external method is the best choice and I would tend to agree. But there are situations where you could use either the internal or the inline stylesheets as I mentioned above.
Consider the project you are working on, then decide which option you feel would be your best option.
