How to place images on your page

---

So, have you been wondering how to add an image to your page? Well, let’s take a look at the image tag:

<IMG SRC="image.gif">

The IMG stands for image. The SRC stands for source. The source of the image is going to be the net address of the image. Most often, you will be able to just type the filename of the image here, like this:

<IMG SRC="image.gif">

The filename does not have to end with .gif . You could also use a .jpg file as well. These are the two most common image file extensions used on the internet. If you have images in other file formats, you will probably want to convert them to .gif or .jpg . This can be done with most image editing programs. A commonly used program is Adobe Photoshop or ImageReady.

Now, if your images are in a directory other than the one your html document is in, you will want to link to it using the full address of the image. So, if your image is located at http://mydomain.com/pictures/image.jpg , you would use this url as the image source:

<IMG SRC="http://mydomain.com/pictures/image.jpg">

If you aren’t sure, go ahead and use the full address just to be sure it will work correctly. Now let’s work with a real example. One image I have on this site is called “logo.png”. The address for the image is: http://www.blindog.com/blog/wp-content/uploads/2010/11/logo.png.
If my image and html file were in the same directory, I would type:

<IMG SRC="logo.png">

Otherwise, I would use the full internet address, like this:

<IMG SRC="http://www.blindog.com/blog/wp-content/uploads/2010/11/logo.png">

Either option would display the image on the page, aligned to the left, like this:

---

---

If you want to know where an image is located on any web page, just right click on the image in question and choose “properties”. in the “address URL” field is the answer. If you copy and paste this URL into your document the image will show up when posted. Remember the image will not show up in your document because it’s really not there (just a link), and if your linking to another web site that is not yours, if the image is removed your link will no longer work. So, this can be a problem. For email blasts you MUST use the full path to an image (http:/www.mydomain.com/image.jpg) otherwise the email client has no way of finding and displaying your image. Make sure that any images you are referencing are located on a server you know, and are sure the images will not be deleted or moved.

If you want to center the image on the page, you would place the CENTER tag around the image tag, like this:

<CENTER>
<IMG SRC="http://www.mydomain.com/images/logo.png">
</CENTER>

This will place the image in the center of the screen:

---

---

Keep in mind, the filename or address of the image IS case sensitive, so “image.jpg” and “IMAGE.JPG” are considered two different images to the web browser. Be sure to use the correct case in your image tags, or the image may not show up, and that’s no fun.

Now, this doesn’t give us everything we could possibly want, but it will allow you to add an image to your page on its own line.

>> NEXT: HTML Basics: Linking to Other Pages

Using Headings, Paragraphs, and Line Breaks

---

Let’s start out with Heading tags.  These tags are good for creating titles or section headings.  Here are some examples:

<H1>Large Heading!</H1>  will give us:

Large Heading!

<H2>Heading 2</H2>

Heading 2

<H3>Heading 3</H3>

Heading 3

<H4>Getting Small</H4>

Getting Small

<H5>Smaller Still…</H5>

Smaller Still…

<H6>You must have good vision…</H6>

You must have good vision…

O.K.,  I think you get the idea here.  Now let’s move on to a line break.  The tag for a line break is <BR>.  When you insert this tag in your document, the contents will go to the next line.  The <BR> tag does not need a closing tag afterward.   Here is an example:End this line now!!<BR>Thanks!

This will generate the following:

---

End this line now!!
Thanks!

---

Basically, a line break is like hitting the “enter” key when you are writing text. The browser will not go to the next line until it runs out of space, or sees a tag that will force it to the next line. So typing the following in your text editor will display only one line of text in the browser:

Hello,
I want
a new line.

This gives us:

---

Hello, I want a new line.

---

To make the text move to the next line, use your <BR> tag from above:

Hello,<BR>
I want<BR>
a new line.

Now this will do what we wanted it to:

---

Hello,
I want
a new line.

---

Now,  let’s move on to the paragraph tag, <P>.  This tag will skip a vertical space after going to the next line, as though you had typed <BR> twice.  This tag is good for skipping a line quickly and for knowing where you wanted a new paragraph to begin.  How about an example? Well, O.K.:

This is some cool stuff.
<BR>
This is the next line.
<P>
This is a new paragraph.  Is this cool or what?

This will give us the following:

---

This is some cool stuff.
This is the next line.This is a new paragraph.  Is this cool or what?

---

The paragraph tag does not require a closing tag,  but if you’d like to add one for your own reference,  you place a </P> where you would like the paragraph to end, like this:

<P>
This paragraph needs a visual ending!
</P>
<P>
Here is a new paragraph….<BR>
and the end.
</P>

This will give you the same thing as using just the opening <P> tags, like this:

<P>
This paragraph needs a visual ending!
<P>
Here is a new paragraph….<BR>
and the end.

Both of these will give you this:

---

This paragraph needs a visual ending!Here is a new paragraph….
and the end.

---

So, now you can create a web page full of text. Isn’t it great?

---

>> NEXT HTML Basics: Adding Images to Your Page

About HTML tags and the basic page format.

---

Now we are going to start talking about HTML tags. A tag will always begin with a less than sign, like this: <. The tags will end with a greater than sign, like this: >. An example would be the tag used to underline text, <U>.  You would place this before the text you want to underline.  This is called an opening tag,  which begins the operation you wish to perform.  In order to end the underlining,  you must use a closing tag.  A closing tag will always be the same as the opening tag, but will have a forward slash before the command, like this: </U>  .  So, if you would like to underline the phrase “HTML Rules!”,  you would write the following in your text editor:

<U>HTML Rules!</U>

The result of this would be:

HTML Rules!

Not all tags will require a closing tag.  An example would be the image tag, which will place an image on the page.  It looks like this:  <IMG SRC=”myimage.gif”>  .  I will explain all the extra stuff later,  this is just an example of a tag that requires no closing tag to follow it.  Other examples would be a line break: <BR> ,  a horizontal line: <HR> , and a paragraph: <P> .

Also, you do not need to capitalize the tags. <P> is the same as <p>. You can also use as much space between things as you like. So:

<U>   Underline Me!    </U>

Is the same as:

<U>Underline Me!</U>

Is the same as:

<U>
Underline Me!
</U>

A basic HTML file will have the format below. Read through and see if you can guess what the different tags will do: (Don’t worry, I’ll explain them at the end of the example.)

---

<HTML>

<HEAD>
<TITLE>I Love HTML</TITLE>
</HEAD>

<BODY>
Everything displayed on your page will be in here.
</BODY>

</HTML>

---

Okay, to make sense of this, go through and find the pairs of opening and closing tags.  The first one we see is <HTML>.  This signals the beginning of an HTML file.  The closing tag , </HTML>,  is at the very end of the document.  As you might have guessed, it signals the end of the HTML document.  Everything (tags, text, images) should be between these two tags, as they are the beginning and end of your page.

The next tag we see is the <HEAD> tag.  This opens a section in which you can title your page,  use keywords, and add other descriptive information to the page.  The section ends with the </HEAD> tag.  At this time,  the only part of the HEAD section we will deal with is the TITLE, which brings us to the next tag.

The <TITLE> tag allows you to create a title for your page.  The title is only used for bookmarks, search engines, and as the name of the browser window.  It will not show up on your web page unless you type it in the BODY section.(explained below).  To end your title,  use the </TITLE> tag.  For instance, in the example, the title is “I Love HTML”.  (That’s not true all the time, though).

The <BODY> tag opens the section that will be displayed in the web browser.  This is where most of our work will be done.  To end the body section, use </BODY>.  The above example makes a rather boring web page.  The browser  would display this:

---

Everything displayed on your page will be in here.

>> NEXT: HTML Basics – Headings and Paragraphs

Direct mailer for Fujitsu internal sales team. Artwork printed in four color, two sided on bright white cover stock and rolled up into a clear mailing tube with red end caps. The direct mailer also included a custom fresh water fishing lure for additional interest. Also developed a companion landing page for the sweepstakes entry element for this campaign as well that leveraged the same graphics for consistency.

Front:

Back:

Landing Page:

ROLE
Creative Direction
Web Design
Graphic Design

SOFTWARE
Adobe InDesign
Adobe Photoshop
Adobe Dreamweaver

Campaign Goals
The original goal was to collect a two hundred email address and follow up with a targeted email blast when the Q series product launched. Email sign-ups quickly passed the original goal. Collected approximately 1800 email addresses after five weeks of running the teaser banner campaign on www.shopfujitsu.com. After removing duplicates and fraudulent data ended up with 1593 usable email addresses.

Highlights

• 32 orders
• $82,740 incoming order revenue
• 2.01% conversion rate
• $2585 average order value
• Original goal was 200 email address, collected 1593 email addresses
• Campaign Cost $0

Teaser Banners:

Landing Page Screenshot:
The only purpose of the landing page was to collect an email address. Page included a daily countdown to the Q series product launch date.

Print advertising examples from the last few years. This includes full page magazine ads, retail in store display posters and direct mailers.

Southwest Print Ad:

Retail in store display poster for the Fujitsu LIFEBOOK notebook:

Bounce Back Ad that was included with all rebate checks:

McClintock Design is committed to your privacy. The following section discloses the information gathering and dissemination practices for www.blindog.com.

Because we value your privacy, we do not sell, rent or provide your name or any other personally identifiable information to any third party companies. www.blindog.com may contain links to other sites. If you decide to link to one of these sites, www.blindog.com is not responsible for the privacy practices or the content of these other Web sites.

EmailOpt-In/Opt-Out Policy
www.blindog.com may allow users to subscribe to free email from us. If you provide us with your email address and opt-in to receive information from us, we will inform you of important website updates, and send you news and information we believe you will enjoy receiving. Of course, you can opt-out of receiving future mailings at any time. If at any point you wish to stop receiving such communications, please email me directly to be removed from the email distribution list.

Thank you for visiting www.blindog.com

If you are looking for the clothing designer “Jessica McClintock” or “Scott McClintock” please click here. Unfortunately I am not related to the woman’s clothing designer Jessica McClintock. I’m flattered you think so, but we only share the same last name.

It’s interesting to have a men’s cologne (Scott McClintock), wedding dresses & women’s cloths (Jessica McClintock), a movie (Mclintock with John Wayne), and even a chain of restaurants (Mclintock’s in San Luis Obispo, CA) share your last name.

Here are my standard questions for any new project:

1. What is your budget?
   $500, $5,000, $15,000 or $50,000
2. What is your time frame?
   Now, 30, 60, 90 days
3. How much do you need updated?
   Just a few pages or 1,000′s of product pages.
4. How often do you want to update the site?
   Daily, weekly, occasionally
5. What is the purpose of your web site?
   eCommerce, lead generation, informational
6. Any new functionality required?
   New forms, dynamic pages, data collection, payment integration
7. How much traffic do you have?
   None, or thousands a day
8. How do you measure the success of the web site?
   You see the value of having a web site and the investment.
9. Are you looking to just update the existing layout & color scheme or add dynamic elements?
   Refresh, update or complete redesign
10. What are your goals for the web site?
    Sell stuff or share stuff

Keeping your web site updated is very important as bad links and “coming soon” pages are a bad experience for visitors and potential buyers. Even if a visitor does not purchase from the web site they are still having an “experience” with your brand. The goal should be to make that experience as positive as possible.

Some recommended starting points for your next web deign project.

• Data analytics, Start tracking beyond just hits.
• Increase traffic with advertising, either with keywords, banners, emails, and print ads
• Search Engine Optimization, what can we do to improve how the search engines see your site?
• Design, do you need a complete redesign? or can you just make small tweaks?
• Site promotions, short term campaigns to drive conversions. Trial offers, rebates, discounts, freebies.

I can help you with the website data analytics, site and campaign tracking, search engine marketing, search engine optimization, banner advertising, email marketing.

Fast growing manufacturing company needed to bring marketing and design in house. Responsible for everything printed, including all marketing materials, packaging, web site, advertising, collateral, and retail displays.

Established and maintained all long-term vendor relationships related to marketing department. Decide which vendors are best suited to complete each project by past performance, project goals and budget. Direct team of freelance designers to complete multiple projects on time and within budget. Key to complete packaging redesign of core product and image upgrade, retail point of purchase display, and major improvements in developing brand equity.

ROLE
Creative Direction
Graphic Design

SOFTWARE
Adobe Photoshop
Adobe Illustrator