Let’s Do Lunch,

If your looking for some web design help, validation or just need someone to answer some questions for you I can help. McClintock Design has been around since the beginning of the internet and I’ve contributed to it’s growth. I specialize in working with businesses and entrepreneurs turn ideas into a reality. If you need help navigating the maze of online advertising options, what should you do first, what is worth paying for and what is a ripp-off? What ever your burning questions about online web design, advertising social media and such. Bring your list and let’s do lunch.

 

 

• What time?
  Any day Monday through Friday from 12:00 noon to 1:00PM.
• Where?
  I work in Sunnyvale, CA so it should be close. There are lots of great places to eat and talk.
• Why lunch?
  I do have a full-time day job working for a large global multinational corporation.
• How long is lunch?
  Typically 60 minutes. I need to get back to the office of course. If you have a good time and you think I can help you further lets do dinner.
• Who pays for lunch?
  You do. My standard hourly rate is $125 an hour, so the $10-$15 bucks for a lunch meal and an hour is a deal.
• What if I don’t like your answers?
  I’ll be honest with you and tell you what I know from my perspective. Your risk is low since this is only lunch.
  
• What do you get out of this?
  I get a chance to meet new people, help other solve problems and of course, a nice meal.

If you are up for a Web Designer Lunch then contact me at the form below:

 

 

Web design and development for the new 5th Annual Burning Amp Festival – October 1, 2011. The DIY show for audiophiles and the general public who make their own equipment or are interested in making their own components. Bring your friends and fellow techies to check out this year’s displays of cool amps, speakers, and parts done by audio enthusiasts and DIY’ers from around the world.

Providing the web hosting and WordPress development for event organizers. Simple site with basic event related information and sponsorship elements.

ROLE
Project Management
Web Design
Developer

SOFTWARE
Wordpress
Adobe Photoshop

About HTML tags and basic page formatting.

This is a short tutorial on the basics of HTML for creating and sending out email blasts. While the ability to save any document as HTML is now native to many applications, it still helps to know the basics in case something goes wrong. By learning the short list of commands outlined in this tutorial you will be able to add simple text formatting, add an external link, add images from the server, add an email link, and test your email before sending out.

You can create your email blast in any text editor application your are most familiar with. Notepad, Dreamweaver are two recommendations. A word of caution regarding Microsoft Word, while I recommend using it to test and send your final file, Word has a tendency to add proprietary HTML code that adds to your final file size. Also, authoring in Word can have some unique problems. The goal of this tutorial is to quickly show you what you really need to send out a clean HTML email. While you can author in Word, just be aware that odd things can happen.

Remember that not all email clients support HTML formatted messages. Lets get started.

This tutorial will cover the following:

• Basic text formatting
• More text formatting options
• Adding images
• Adding external links
• Adding a link to an image
• Adding an email link
• More email link options
• Get your email blast ready
• Testing your final email
• Congratulations

>> START with basic HTML text formatting

Your Done!

---

Congratulations! You have successfully created and tested your first HTML email blast. That is all there is to it. Once you have the correct images and external links tags down the rest is formatting. Make sure you test your email blasts before sending out to the masses, as once you hit “SEND” you can not make any changes. Yikes!

There are many more formatting options and tags available with HTML that are not covered here. For more information:

• Google search for “HTML TAGS”

This tutorial was brought to you by:
Scott McClintock

How to get your email blast ready

---

It’s always a good idea to test your email blast a few times before sending it out to a huge list. Always check every link by clicking on it, and make sure every image is showing up. Remember that HTML email files are larger than plain text and will take longer to download. So that 3MB image should really be resized and scaled down. ha ha.

1. Now this is the cool part, Word is going to do all of the heavy lifting for you. Ah! this is great.
   Choose File > Send To > Mail Recipient
2. You will notice the top of your document now has an email form fields. Put your email address in the TO: field
   
   TO:
   Cc:
   Subject:
   Introduction:
3. Hit “Send a Copy’
4. Now, check your email and tada! There is your HTML formatted email. Cool!

Important tip is to make sure that you have your email set to “Send as HTML”. By default this is turned on, but has a tendency to get turned off. To check your settings in MS Outlook go to Tools > Options > Mail Format (TAB) > Message Format and make sure the pull down box reads HTML.

>> NEXT HTML Basics: Congratulations

How to get your email blast ready

---

The fastest way to get your email blast ready for sending is easy. Follow these simple steps, using the software you already have on your laptop. Bet you didn’t know that!

1. Save your HTML file on your desktop, (or in a place you will know where to find it later)
   Choose, File > Save As…
2. OK, now open your HTML file in everyone’s favorite text editor, Microsoft Word.
3. Open your just saved HTML file in Word by choosing:
   File > Open > Browse (find HTML file).
4. Your file will open up like any other formatted Word document. OK, that was not hard, but this is an important step.

---

>> NEXT HTML Basics: Testing

More tricks for the email link

---

In the last section, we saw how to add the subject to a message through the e-mail link. It was done using a “question mark” followed by subject= and then the subject:

<A HREF="mailto:you@you.com?subject=Hi">Mail Me</A>

On top of adding the subject, there are a couple of extras you can also add. You can add a carbon copy recipient, a blind carbon copy recipient, or use a combination of the subject with either or both of these.

To send a carbon copy, you add the cc= command after the question mark, followed by the e-mail address of the person you want to send the carbon copy to:

<A HREF="mailto:you@you.com?cc=friend@friend.com">
Mail Me</A>

The same goes for a blind carbon copy, except you use the bcc= command instead:

<A HREF="mailto:you@you.com?BCC=friend@friend.com">
Mail Me</A>

With either of these, you can send the copies to multiple addresses by separating them with commas:

<A HREF="mailto:you@you.com?BCC=friend@friend.com, other@other.com">
Mail Me</A>

Now, if you want to combine more than one of these commands after the question mark, you add them in using an “&” sign at the end of the first command. For instance, if you want a subject and a blind carbon copy, it would look like this:

<A HREF="mailto:you@you.com?subject=Hi&BCC=friend@friend.com">
Mail Me</A>

If you want all three, use the “&” sign again:

<A HREF="mailto:you@you.com?subject=Hi&BCC=friend@friend.com&cc=other@other.com">
Mail Me</A>

With that, you can have some more fun with your e-mail links– and if you run a site with a partner you can both get an e-mail when someone uses that link.

>> NEXT HTML Basics: Getting Ready

How to create an email link

---

To create an e-mail link on your page, all you need to do is use the standard link tag. The trick is in what you use as the address of the link. To force the browser to read it as an e-mail link, you use “mailto:” rather than “http://” to begin the address. After the “mailto:”, you will use your e-mail address rather than a web address, like this:

<A HREF=”mailto:your_email_address”>E-mail Me!</A>

Yes, all you need to do is replace the your_email_address with …..your e-mail address. Here is an example, to create an email link to myself, I would place smcclintock@domainname.com in that space, like this:

<A HREF=”mailto:smcclintock@domainname.com”>Give me some mail!</A>

Here is the resulting link:

Give me some mail!

If you click on the link, your browser will bring up a window for you to send me e-mail, with my e-mail address already filled in. Send me whatever you want- maybe your joke of the day or something!

You can also create the subject of the message so the viewer doesn’t have to fill in something in the subject line. You do this by adding a “?” at the end of your e-mail address and then your subject, like this:

<A HREF=”mailto:smcclintock@domainname.com?subject=Hey Scott”>Mail Me!</A>

The example link is below, notice that when you click it, the subject field of your email message is already filled in with “Hey Scott”.

Mail Me!

Now, isn’t e-mail fun?

---

>> NEXT HTML Basics: The E-mail Link – More

How to link an image

---

If you wanted to link to the main page, you would go ahead and type the opening link tag, like this:

<A HREF=”http://www.blindog.com”>

Now, don’t type any text, and don’t close the tag just yet. What we are going to do is place the image tag right after the opening link tag. The image we are using here is “e_emilia.jpg”. So, you would type the following:

<A HREF=”http://www.blindog.com”>
<IMG SRC=”e_emilia.jpg”>

OK, now we are going to close the link tag at the end of the image tag, so that the image tag is between the opening and closing link tags, like this:

<A HREF=”http://www.blindog”>
<IMG SRC=”e_emilia.jpg”>
</A>

Now that the image is between the link tags, it will operate the same way as a normal link, but now it is a visual image. Here is what the above code would produce:

---

---

Move the mouse over the image, and it will turn into the little pointing hand. If you click on the image, you will end up all the way back at our main page.

Well, that’s good, but what’s with the border around the image? Well, the border just seems to be added by default on most browsers. To get rid of it, add this command to the image tag:

border=”0″

Here is an example:

<A HREF=”http://www.blindog.com”>
<IMG SRC=”e_emilia.jpg” border=”0″>
</A>

Now, the picture will be a link, and you won’t have the extra border around the sides:

---

---

You can also make the border larger in the same way, just use a larger number in there, for instance:

border=”5″

The drawback to the border is that it insists on being the color of your link color, and sometimes this isn’t the color you want to use. One way around it is to edit the actual image to where it has the border you want, and then set the border=”0″ in your image tag.

>> NEXT HTML Basics: The E-mail Link

How to link to other pages in HTML

---

All right, it’s time to learn how to link to another page. So let’s start out by seeing what tag we use for linking:

<A HREF=”http://www.someplace.com”>Display Text</A>

The A stands for anchor, and the HREF=” ” is asking for a location to link to. The </A> is the closing tag. The text between the tags is what will show up on your web page as a link. So, if you would like to link to our site, you would place our url, or net address, inside the quote marks. Our url is http://www.yourdomainname.com, so to create a link to us, place this command on the page where you would like the link to show up:

<A HREF=”http://www.blindog.com”>Blindog</A>

It will show up on your page like this:

Blindog

See how the text was colorized and underlined? In most cases, this will indicate the text is a link. If you move your mouse over the link, you should see the cursor change into a pointing hand. The mouse attribute comes in handy when a page has a whole lot of underlined text…..

As another example, let’s create a link to this particular page. Look in your location box near the top of your web browser. You should see the url for this page, which is http://www.blindog.com/blog/html-basics-linking-to-other-pages/317/ . To create the link, insert this url into the link tag:

<A HREF=”http://www.blindog.com/blog/html-basics-linking-to-other-pages/317/”>Linking to Other Pages</A>

Which gives us this link:

Linking to Other Pages

If you click on this link right now, your browser will simply display this page again. If you click on the link from the first example, you will end up at our home page. Great isn’t it? Now, if you want to link to your own pages from your home page, just type in the address for your page inside the link tag. This will work for any page because we are using the absolute url, which means we are using the complete address to every page we are creating a link to. If you have all of your files in the same directory, you may use a shortcut called a “local url”. Before you try this, be certain any file you want to create a local url link to is in the same directory as the page you are editing. (In most cases, it will be) Now, rather than typing the full url inside the tag, you can just use the filename, like this:

<A HREF=”/blog/html-basics-linking-to-other-pages/317/”>Linking to Other Pages</A>

This will create the same link we just did, but we didn’t have to write as much.

Linking to Other Pages

For an email blast you MUST use a full path for links, just like images. If you aren’t sure or have doubts, always use the absolute url. Typing in the full address will allow the link to work no matter where it is located on the internet.

>> NEXT HTML Basics: Using an Image as a Link