The Anchor Tag

a – The Anchor tag, which is most commonly associated with hyperlinks.

• charset – This attribute specifies the character encoding of the target URL.
  Values:
  • See the IANA Character Sets for these values.

 

• coords – This attribute specifies the coordinates that define a linked region in an image map.
  Values:
  • If the image map is a circle – Enter three coordinates: center-x-axis,center-y-axis,radius
  • If the image map is a polygon – Enter the X/Y coordinates of each corner: x1,y1,x2,y2,x3,y3,x4,y4…
  • If the image map is a rectangle – Enter the X/Y coordinates of each of the four corners: left(x1),top(y1),right(x2),bottom(y2)

 

• href – This attribute specifies the target URL.
  Values:
  • Absolute URLs – Example: webmastersedge.net – Navigates to a new site.
  • Anchor URLs – Example: index.html – Navigates to another page.
  • Relative URLs – Example: #top – Navigates to an anchor within the page.

 

• hreflang – This attribute specifies the target URL’s written language with a two letter language code.
  Values:
  • See the IANA Language Subtag Registry Search for these values.

 

• name – This attribute names an anchor. While this is widely being replaced with the id attribute, it can be used to set an anchor point which can specify a spot on the page to be “jumped to” by using another hyperlink.
  Values:
  • Can have any value that starts with a letter and only contains: a-z , A-Z , 0-9 , colons , hyphens , periods , underscores

 

• rel – This attribute specifies the relationship between the current document and the target URL.
  Values:
  • alternate – Suggests that the target URL is an alternate version or mirror of the current page.
  • appendix – Suggests that the target URL is an appendix.
  • bookmark – Suggests that the target URL is a related page.
  • chapter – Suggests that the target URL is a chapter of a series of pages.
  • contents – Suggests that the target URL is a table of contents for the current page.
  • copyright – Suggests that the target URL is a page containing copyright information.
  • glossary – Suggests that the target URL is a glossary of terms used in the current page.
  • help – Suggests that the target URL is a help document.
  • index – Suggests that the target URL is an index of the current page.
  • next – Suggests that the target URL is the next page in the current series.
  • prev – Suggests that the target URL is the previous page in the current series.
  • section – Suggests that the target URL is a section of a series of pages.
  • start – Suggests that the target URL is the first page in a series.
  • stylesheet – Suggests that the target URL is an external stylesheet for the current page.
  • subsection – Suggests that the target URL is a subsection of the current series.

 

• rev – This attribute specifies the relationship between the current document and the target URL.
  Values:
  • alternate – Suggests that the target URL is an alternate version or mirror of the current page.
  • appendix – Suggests that the target URL is an appendix.
  • bookmark – Suggests that the target URL is a related page.
  • chapter – Suggests that the target URL is a chapter of a series of pages.
  • contents – Suggests that the target URL is a table of contents for the current page.
  • copyright – Suggests that the target URL is a page containing copyright information.
  • glossary – Suggests that the target URL is a glossary of terms used in the current page.
  • help – Suggests that the target URL is a help document.
  • index – Suggests that the target URL is an index of the current page.
  • next – Suggests that the target URL is the next page in the current series.
  • prev – Suggests that the target URL is the previous page in the current series.
  • section – Suggests that the target URL is a section of a series of pages.
  • start – Suggests that the target URL is the first page in a series.
  • stylesheet – Suggests that the target URL is an external stylesheet for the current page.
  • subsection – Suggests that the target URL is a subsection of the current series.

 

• shape – This attribute defines the shape of an image map.
  Values:
  • circ – Defines a circular region of an image map.
  • circle – Defines a circular region of an image map.
  • default – Defines the entire area an image map.
  • poly – Defines a polygonal region of an image map.
  • polygon – Defines a polygonal region of an image map.
  • rect – Defines a rectangular region of an image map.
  • rectangle – Defines a rectangular region of an image map.

 

• target – This attribute specifies where to open the target URL.
  Values:
  • _blank – Sets the target URL to open in a new window.
  • _parent – Sets the target URL to open in the parent frameset.
  • _self – Sets the target URL to open in the same frame as the link.
  • _top – Sets the target URL to open in current window.
  • wildcard – You can enter the name of a frame in order for the URL to open in that specified frame.

 

• type – This attribute specifies the MIME type of the target URL.
  Values:
  • See the IANA Registered MIME Types for these values.

Today’s Topic: Widgitize The Sidebar

In order to ad widgets to a sidebar, we must undergo a few simple steps in order to widgetize the theme, assuming the theme isn’t already widget-ready. The first step is to take a look at your sidebar setup. Ours is:

So to facilitate this, we create a functions.php template file and include the following in it:

Once this is setup, I placed the following code where her sidebar should be (after the <ul> tag):

Then right before the </ul> tag:

And viola! Add the widgets and that’s that! If you want some items to appear in the sidebar before the widgets (without using the text widget), just add those items before the above code right after the <ul> tag.

Katie (of the WoollyMom, not my wife ) contacted me yesterday about the menu changes. She didn’t like where the menu items were and said that something felt off. After pondering this for a while I agreed, so I made some changes today. I switched her 468×60 ad with her menu item options. My only debate now is whether or not to keep the menu items where they are, or to move them into the upper right of the header. Your thoughts?

Today’s Topic: Moving The Page Navigation

The next step in transforming The Woolly Mom’s Sidebar is to pull the Page listing out of the sidebar and turn it into a menu. To do this I am going to make a CSS rollover list. Lets start with the HTML for the menu:

This will place all of the menu items in a list with an ID of topmenu. Now we need to define the constraints of the list. We start by defining the constraints of the unordered list itself:

Now we need to clear the style of the list items and set the display to inline:

The easiest way to make the menu items “flashy” and roll over is to use links with hover changes. You can also do this by using rollover images, but I decided to go with the easier method. Set the “box sizes” and font options for the links:

Then set the colors:

Now change the colors by using link hover:

Viola! Here is the finished product:

And when one hovers over an option:

Today’s Topic: Deciding The Layout

In this tutorial I will go over deciding the actual layout of the sidebar itself. Many people utilize h2 tags for the titles. I highly recommend against using h2 tags. These tags help with SEO and emphasizing things like “Top Commentators” and “Categories” is bad business for SEO. Therefore we’re going to want to use div’s for the titles.

Here is the current CSS for the sidebar:

Here is the current HTML for her sidebar:

I’m going to run with that, however I’m going to skip out on the h2 tags for the previously mentioned reasons. The code itself is going to look very similar.

Here’s the new sidebar HTML:

Not many changes, but the BIG changes can be seen in the CSS. I have made significant changes to the headings to make them “pop” as well as the links themselves to make them a bit more noticable and seperated from eachother. The sidebar now looks as though there are actual options rather than a conglomeration of “miscellaneous stuff”. I made sure to add plenty of comments to the CSS to highlight the changes that were made.

Here is the new CSS for your viewing pleasure:

Before Changes Screenshot

After Changes Screenshot

Much better IMO. Your thoughts? WoollyMom, what do YOU think of the changes? Is there anything you’d like to see altered about the sidebar? Once it is finalized I will widgitize it.

Today’s Topic: Expand The Sidebar Width

I know that I don’t want to use h2 tags for the titles due to search relevancy, so I’m just going to use div’s for everything to keep it simple. The first thing I want to do though is to make her sidebar a bit wider so that she may fit side-by-side 125×125 ads in it. I also think that it would be helpful if her navigation were under the top graphic as well, so I’m going to run with that. To that end, I first need to do some image editing in The Gimp in order to expand her right sidebar’s width. Here’s the Before:

And the After:

Editing the images themselves was pretty easy as all it really involved was some copying and pasting, so I won’t go into the finer details there. I’ll make a few points about the CSS changes though. To do this with the CSS I first changed the left hand content CSS from:

to:

Then altered the right sidebar from:

to:

Viola, an expanded Sidebar! Tomorrow I’ll start making changes to the contents of the sidebar and work on new navigation.

Hi Bradford, Please can you take a look at my gallery and suggest ways of improving it,do i need to register a name for it? host it seperatly? anything from design to turning it into a membership site.I haven’t been able to get back to you bcos i have been packing up for our relocation soon.Here is the gallery link. http://blogbytyna.com/Gallery/index.php

First off…

i have been packing up for our relocation soon

I hope everything goes well! Travel is fun and exciting, but it can also become a headache. Lets hope for the former!

Well Tyna, I most certainly have some suggestions and take them or leave them, I hope they help! Especially since I feel you are a gifted photographer, I hope that my recommendations help! Lets start with…

do i need to register a name for it?

The short answer: No. The long answer: Depends on what you want to do with it. How do you feel about the photo gallery? Do you feel it is an important part of your website? Do you feel that it has a “life of its own”? More importantly, do you WANT it to have a life of its own completely seperate from your Blog? If so, then definately!

host it seperatly?

Well, that highly depends on your webhost. It looks like you have it hosted on a CPanel server, so if your host allows you an Add-on Domain or not. If so, then you can quickly and easily setup the new domain with very few changes to your gallery or hosting account!

turning it into a membership site

Well, this depends on what you would like to do with the photos and what kind of membership you mean. If you mean to turn it into a “paid membership site” where people pay to see your photography, I wouldn’t recommend that route unless the gallery is already exceedingly popular, though I would even be careful with membership then. I would most definately do advertising, however I could see adding a paid membership feature to the site allowing people to utilize your photos on their websites or in print. Sort of a “royalty-free stock photo” gallery where people pay you to remove watermarks from your images and use the photos.

If the type of membership you are looking to do is to allow people to register on your site and post their own photos, that can most certianly work, however you’ll want to be careful with it. Spam is one thing, but image Spam can get pretty…well…not very pretty at all. It would probably be best if you moderated all of the photos that get posted if you go with a membership of this type. A few things to consider though:

• What types of photos do you want others to post?
• Will the gallery have a primary focus?
• What types of visitors are you looking to attract?

These questions are very important when deciding on membership and membership rules. They are also very important in choosing your domain name, should you decide to host the gallery on its own domain.

Lastly…

suggest ways of improving it

and

anything from design

• First and foremost I would change the template/theme. It is too…”gray”. It gives off a very somber mood.
• Use a lightbox! Lightboxes are GREAT ways to make a photo gallery more…”flashy”. See: http://www.huddletogether.com/projects/lightbox2/ I manage a Vet website and chose to use Gallery2 for their gallery. I utilized a lightbox for displaying the large versions of the photos. Check it out when you click on a photo in the gallery at: http://kernroadvet.com/gallery/v/august_openhouse/
• Link your sites together in a more “prominent” fashion. While your Blog links to your photography website and photo gallery, it is almost difficult to find the links. Even on a large monitor (I am running in 1680×1050), after one full page scroll the links are at the bottom of that scroll. I really like your navigation for http://www.tynaezenma.com/ and think that you should use similar navigation to navigate between all three sites/subsites. Now, I wouldn’t use the image example I have included below, but I threw together a very quick photoshopped idea. Maybe include three options…”Tyna Ezenma Photography”, “Blog By Tyna” and “Tyna’s Photo Gallery”.

If you don’t mind, I’d like to offer a few quick suggestions regarding your blog as well.

• Your right side ads are bugged in Firefox. See:

• Your RSS feed is only slightly “noticable” and I think it would be good to emphasize it more. Maybe something along the lines of…

I hope these suggestions helped!! Now…do YOU also have a question for The Edge? Just drop me a line through the comments and I’ll see what I can do!

Outside of that I am also finishing up preparations for a format of my main PC, which will likely occur tomorrow, depending on when my new parts show up in the mail.

I have a bit of a vision for the site and the site will likely see a gradual transformation over the next month or two. If you are a parent or are about to become one, I highly recommend her new Blog!

Some Web Designers fret about support for older browsers, while others could care less and only support the latest browsers. Sometimes it is personal preference and other times it is based on the site’s users. Cross-browser support can be a huge pain in the rear sometimes and it can be helpful to have a reference to help determine what is and is not supported in various browsers. Below are some charts that can help with these determinations, showing which browsers support what. This is by no means an exhaustive list, but a useful one indeed.

Enjoy!! I’ll be adding these charts as well as the color code charts to the Wiki next week.