One of the first things you should do be for setting out to find a job in graphic design or web design is figure out:

• your strengths, weaknesses, interests and talents
• what separates you from everybody else
• what type of work you’re looking for
• what’s available in your area / industry

Defining who you are and where you want to go will help you take the right steps towards getting there. You shouldn’t apply to all the possible jobs around, focus on the ones you’d really want first and let them know why they should hire you.

Where would you like to work?

Identify the design offices, corporations, or individuals with whom you’d like to interview with. Contact some of these shops that you’d really would like to work at and make plans to visit them. See if you can intern or volunteer your services for a tester project.

Do your homework on work on the shop before visiting and perhaps even pitch an idea or solution that would serve one of their clients. If you go above and beyond it WILL get noticed OR you wouldn’t want to work for a place like that anyway.

Network, Socialize and be Vocal

Networking and getting involved in different organizations AIGA / JAMA will definitely increase your contacts. There are groups you could get involved with in your area, a quick search on Meetup.com or Google could point you to groups in your area. Don’t be shy there are a lot of talented people out there that no one knows about.

Create a great portfolio

In your portfolio only show your strongest work and make sure you practice presenting it. Employers don’t want to see everything you ever done and if you aren’t excited about your work they wont be either.

Résumé

You should create a resume that lists out your education, skill sets and experience. You can create a hard copy and feature a digital copy online and on sites like Linked In. If you don’t think you have experience enough for a resume, dig further as you must have gained some experience getting the skills to apply for a graphic design or web design job.

Be real & be professional

Be yourself but also make sure to follow professional protocols when getting an interview or a job offer. Be sure to research any offers you get to make sure what you’ve been offered before accepting.

Be persistent

It may take some time to get your foot in the door but persistence will pay off.

Ok so if you’ve followed along with part one you should be familiar with HTML tags and the basics of an HTML page. If you’re not go back and read part 1, download the code and watch the videos http://keytheory.com/crash-course-in-web-design-part-1-basic-html-tags/.

There are three things I want you to take away from Part 2.

1. Absolute vs Relative Links
2. Linking pages to each other pages, files or sites
3. Bringing in images from other directories, or sites

Absolute vs. Relative Links

Absolute URL

An absolute URL is a full path in a URL (Uniform Resource Locator) to a exact destination or file. examples:

• http://domain-name.com
• http://domain-name.com/directory/
• http://domain-name.com/directory/sub-directory/file.extention

You’d use absolute links if you were:

• linking to web site
• linking to a file on web site
• theming a CMS that requires absolute links

Relative URL

A relative URL is a path to a destination or file relative to the location that the link is being called from. examples:

• /directory/
• /directory/file.extention
• /images/logo.gif

You’d use a relative link if you were:

• linking to files with in your site
• linking to pages with in your site

Linking pages to each other pages, files or sites

Okay so now you’ve got the difference between absolute and relative you just need to apply it with HTML to get it working in action.

If you recall the tag for links <a href=”destination-here”>Text Here</a>

What this is doing is opening an anchor tag <a></a>, giving it a destination href=, and telling what the anchor text will be. Anchor text is the actual text making up the link, it can be an image as well. For SEO purposes use keywords when creating anchor text.

Examples using HTML Links:

Link to the another site:
<a href=”http://twitter.com/kennywharper”>View my Twitter</a>

Link to a file located in the same directory:
<a href=”myfile.doc”>Check out this document</a>

Link to another site and open another tab/window:
<a href=”http://youtube.com/keytheory/” target=”_blank”>My YouTube Page</a>

Link to another page in a directory (named chocolates) on the same site:
<a href=”chocolates/myfile.htm”>My YouTube Page</a>

“/” will take you to the root directory:
<a href=”/”>Go to index</a>

“../” will take you to a directory higher.
<a href=”../”>Go to directory above</a>

Check out the source code for more examples.

Bringing in images from other directories or sites.

At this point you should get how to link to other files but what about getting images into your document?

Recall the image tag: <img src=”mypicture.jpg” />

Img stands for image, src for source, you can also put other attributes such as an alt tag or size dimensions:
<img src=”mypicture.jpg” alt=”Description of image for seo & vision impaired” border=”0″ />

This technique is used code images into your HTML page, different mark up is used for embedding Flash, Videos or Scripts and will be looked at later. * Note you can also use CSS (Cascading Style Sheets) to bring images into your web design. Using CSS is best practice when building a site, this will be covered later.

Examples coding images into HTML pages:

Now to get an image into your page from somewhere else you just need to determine the source.

Code in image from another site: (absolute)
<img src=”http://img383.imageshack.us/img383/3066/ss35450qf7.jpg” />

Code in image from the directory named “images” located in the same directory: (relative)
<img src=”images/myimage.jpg” />

Assignment 2:

• Download the source files
• There are two folders in the zip: “cc-2-start” & “cc-2-finish”
• Open the file “index.htm” within “cc-2-start” in a text editor and follow the instructions
• Check your code against the index file located in “cc-2-finish”
• Open up both files in a browser to see how they render

First to tackle, a better break down of the assignments for those who are really in the dark on the web and HTML. So below is a new assignment if you couldn’t follow assignment 1.

Assignment 1.5:

1. Download Source Files
2. Open cc1-5-start.htm in a text editor and format the page as noted in the document
3. Search the internet and find three new tags to use
4. Check your code against cc1-5-finish.htm & Test in a browser

Assignment 1.5 Breakdown:

1) Download Source files
In the last assignment the goal was to create an HTML page named “index.htm”. You can use a editing program like Notepad or TextEdit to create a text document. And if you save the document with a “.htm” or “.html” it will be rendered as HTML in a browser.

For our purposes you can  download Download Source 1.5 Files and use cc1-5-start.htm.

2) Format the page as noted in the document
If you download the zip file you will find cc1-5-start.htm which contains the text content to be formatted. And a file cc1-5-finish.htm that contains the finished document.

You can open the HTML documents in a text editing program such as Notepad or TextEdit.

Note, the start document has pieces of text wrapped in <p> paragraph tags. Look to the cc1-5-finish.htm to see how different things are handled and be sure to understand how they work.

3) Search the internet and find three new tags to use
After reading the first post you should know what HTML tags are. Here we want to use a search engine, such as Google or Yahoo, to find new HTML tags that weren’t mentioned in the first post. For example, I did a quick search and after looking at a few sites I found the “small” tag.

<small>Small Tags makes text small</small> = Small Tags makes text small

4) Test your document by opening it in a browser
Open a browser such as Firefox or Safari and click “File > Open” or Open File (depending on the browser), find the document you want to preview in the browser and click open. This should open the document in the browser and render it as HTML.

Download Source 1.5 Files

Moving forward I aim to make the assignments more thorough with source files to follow. Feel free to provide feedback on this post and let me know if there are any things that still need addressing.

Download Source Files: 1-html-basics.zip

The following YouTube video goes over some of the things mentioned in the blog below in regards to HTML tags.

Understanding the basics of HTML tags.

To get a browser to render HTML properly HTML text needs to be wrapped in HTML tags.

An an HTML document, HTML elements are tags, as well as text, which act as indicators to a web browser as to how the document is to be interpreted. An example of a tag is: <p></p>

which is a tag for a “paragraph”.

For example to make a word in HTML bold, wrap the text in a “strong” tag like below:
<strong>Text here</strong> // – - >>  Text here

For italic words we’d use “em” for embellish.
<em>Text here</em> // – - >> Text here

If you want to use multiple tags use make sure they are opened and then closed in enclosing method such as:
<tag1><tag2>My words</tag2></tag1>
<strong><em>My words</em></strong> // – - >> My words

Common HTML Tags used in web design

HTML tags commonly have and opening tag and a closing tag such as: <strong></strong>

Tags that have open and closing tags.

Bold - <strong><strong>
Italic – <em></em>
Underline – <u></u>
Paragraph – <p></p>
Text Link – <a href=”http://mysite.com”>Text Link Here</a>
Heading 1 – <h1></h1>
Heading 2 – <h2></h2>
Heading 3 – <h3></h3>

Self closing tags.

The following tags are self closing, meaning they do not have an associated closing tag. Instead they close themselves with “/>”.

Image – <img src=”http://mysite.com/images/image.jpg” />
Line Break - <br />
Horizontal Rule – <hr />

Bulleted List: Lists are an important part of web design. They are commonly used for navigation once they are stylized. Notice first the Unordered List tag “ul” is opened, then List items “li” are added.

<ul>
<li>bullet 1</li>
<li>bullet 2</li>
<li>bullet 3</li>
</ul>

Assignment 1:

• Create a text doc and save it as index.htm
• Code out the tags above to create a page of content
• Search the internet and find three new tags to use
• Test your document by opening it in a browser

Download Source Files: 1-html-basics.zip

Other HTML Resources

There are quite a few other HTML tags that can be used in web design. Just a quick search in Google and you can find quite a few resources.

• http://net.tutsplus.com/
• http://websitetips.com/articles/html/basictags/
• http://addedbytes.com/cheat-sheets/download/html-cheat-sheet-v1.pdf
• http://www.webmonkey.com/2010/02/html_cheatsheet/

Browsers for Web Design

I prefer Firefox as a browser, or Chrome, however when building for web you should test your pages in various browsers as the HTML may render differently in different browsers including Safari, Explorer. Different platforms like Mac, PC, Mobile all render things a bit differently.

I suggest try using Firefox and add the following plugins.

• https://addons.mozilla.org/en-US/firefox/addon/60 – Web Developer
• https://addons.mozilla.org/en-US/firefox/addon/1843 – FireBug

The Basics of an HTML page

This is a supplementary video that shows the basics of an HTML web page.

Well, that’s it for now, next post in the series will focus on file structure and linking files.

Please help me promote my beta-course by tweeting, Facebooking or sharing with friends. Thanks for your support! – kh

Here are several pitfalls and ways to get around them.

1. Not doing your homework or having a strategy.
   This is a sure fire way to fail, if you don’t know what goals you’re trying to achieve then you are most likely not going to reach them. You need to figure out the goals for your site and develop your site around those goals.
2. Taking the cheap route
   Some people try to save money or time buy going with a plug and play template or having their friend’s son build them a web site. IF you really want to get a return on investment, make an investment. Would you want someone to put on a roof on your house for $100? Probably not that’d be scary, same is for web just because you can’t see the difference a professional can and so can your results. No need to spend top dollar but find someone with reasonable rates and be willing to make an investment into your company if you expect others to.
3. There is no absolute perfect.
   Too many people fall for this one; trying to get everything completely perfect before moving to the next stage. Don’t get me wrong you should have the major wrinkles ironed out but no need to be perfect your site can changed. It is not set in stone. You can launch the site and continue to refine and add to it as time goes on.

Customized Facebook Tabs:

• A home page “Artizan“  tab developed in Adobe Flash which features a video of the band in the studio, links to reviews and launch a music player.
• A “promote the band” tab which let’s people share the band with their friends.
• A “music player” tunecore widget was also added to let people hear and purchase their music.
• Last but not least a custom side navigation was added to give priority to featured navigation.

This is just the first phase. The band has plans to grow their site and further enhance the users experience. The band has already received great feedback from their Facebook customization. They are currently sticking out lick a diamond in the rough against other pages and are give their visitors a great first impression.

There will certainly be more posts ahead on Artizan in future posts.

• Web Based Sales – Selling products on-line / E-commerce
• Offline Sales – Selling products but on stores or through traditional retail
• Generating Leads – Getting new business or possible customers
• Market Awareness – Letting consumers know about a particular product or service
• Informative or Entertaining – Just for the sake of sharing info or entertainment with others
• Influential or Persuasion – Trying to influence a person to lean towards a new direction, product or stance

These different types can overlap and be mixed up but realizing what type of site you’re dealing with can make a big difference to how you go about designing the site, marketing it or optimizing it for search engines.

I see KeyTheory.com falls into the Generating Leads, Market Awareness, and Informative categories and will keep that in mind when planning out the rest of the site.

Below outlines five core processes / steps to design a web site:

Define

• Discover
• Plan
• Clarify

Structure

• Content Plan
• Structure Site
• Structure Pages
• Strategic Planning

Design

• Create
• Review & Refine
• Complete

Develop

• Pre-Production – Set up for success
• Production – Build
• Post Production – Q/A

Measure

• Launch
• Clean up
• Maintain
• Measure and Analyze

The standards for web design continue to raise.

Although you can build a web site really easily in today’s world, it takes a professional to really know how to set your site up for success. Web design is tricky. You could use a paint brush when you were three but it takes experience to master the skill. It’s the same for web. Things such as usability, site hierarchy,  search engine optimization and  social media technologies take time to learn and more time to master. A good experienced web designer should be able to develop a site that will provide better results and a higher ROI than a cheap out of the box web site. If one decides to go the cheapest route they possibly can then they are probably not going to be much of a competition for a competitor who is willing to go the distance to dominate the industry.

Save time by using professional web designers.

Some people may want to avoid the cost of paying someone to do something that they can do themselves. This happens with any industry. Changing the oil on a car is really an easy process but when someone could get it done quicker and save you the hassle so you can focus on what you want to do, that’s probably better for both of you. Same thing with web design. You can pay professional, get the job done quicker, get better results and have more time to do the things you can do for your business.

Technology are continues to grow.

As new technologies come out, businesses will continue to jump on them and utilize their services to gain advantage over their competition. The businesses that fail to grow or change will be holding themselves back if not eliminating themselves completely. Can you imagine a business today that refused to ever use a phone or e-mail as they preferred to handle business in person… Very unlikely.

Good Professional Web Designers offer:

• A professional product
• One of the best ROIs in advertising
• Valuable experience
• Quicker Turnaround
• A broad understanding of the web