Website Knowledge

HTML, CSS, Javascript, jQuery and more

How to use mailto

Today I was working on a newsletter for FMR Web Design and I came across this case where I needed to open an outlook window with some text already showing in the subject line and the body. This is a simple task and we have all probably used it. For those who do not know I can summarize it here.

Just a simple email link is written as

mailto:email@email.com

 

So once you have this code for a link it will open the default email client with email@email.com in the TO field. So now you want to show a default subject line. For that you can simply append ?subject=Your Subject to the above link. So it becomes

mailto:email@email.com?subject=YourSubject

 

Next thing could that you want to add some text in the body of email. For that you add body=Your Body to the above link. So now it becomes:

 

mailto:email@email.com?subject=YourSubject&body=YourBody

 

So here is a new thing I learnt today! I wanted to write the text in body but then I needed some text written on the next line. So I found an equivalent of usually used in webpages. It is %0A . So now where you have the text for the body, if you add %0A, it moves the text to the next line. So now our last link would become:

 

mailto:email@email.com?subject=YourSubject&body=YourBody%0ANextLine

 

That is it! Hope this tip would be useful!

Basic HTML Tags

Formatting Tags

- <b>bold</b>
- <strong>strong</strong>
- <u>underlined</ul>
- <i>italics</i>
- <em>emphasis</em>
- <strike>strike through</strike>
- <center>This centers text on the page</center>
- <tt>teletype text</tt> (typewriter text)
- <blockquotes>blockquotes</blockquotes>

Links

Basic Link <a href=”url”>link title</a> (where ‘url’ is the page you want to link to and ‘link title’ is the word/s that you want the link to say.
Email Link <a href=”mailto:EMAIL”></a> (where ‘EMAIL’ is the email address you want to be a link).

Heading Tags (vary according to CSS)

- <h1>An important heading</h1>
- <h2>A slightly less important heading</h2>
- <h3>A less important heading again</h3>
- <h6>The smallest heading</h6>

Font Tags

- Font Size - <font size=”x”>text to change</font> - change ‘x’ value to get different sizes. 1 is small and 7 is big.
Colors - <font color=”#FF0000?>I’m red!</font>
Font type - <font face=”Arial”>Hello there</font>

Image Tags

Basic Image tag - <img src=”url”> (where url = the url of the image you want to show)
Image with sizing <img src=”url” width=”200? height=”150?>
Align image left - <img src=”name” align=left> (substitute ‘left’ with ‘right’ to align it right)
Alt Tags - <img src=”url” alt=”short description of image”> (an alt tag tells the reader what they are missing if the image doesn’t load in their browser.
Image as a link - <a href=”link url”><img src=”url”></a> (where ‘link url’ is the url of the page you want the image to link to and ‘url’ is the image location).
Image with border - <img border=”1? src=”url”> (the larger the number in the border “” the thicker the border)
Space Around Image <img src=”url” hspace=10 vspace=10> (hspace is the horizontal space and vspace is the verticle space. The numbers are the amount of pixels sounding the image)

Unordered Lists (usually bullet point type lists)

<ul>
<li>the first list item</li>
<li>the second list item</li>
<li>the third list item</li>
</ul>

Ordered Lists (usually numbered lists)

<ol>
<li>the first list item</li>
<li>the second list item</li>
<li>the third list item</li>
</ol>

Your First Web Page

To create a web page you do not need any software application. You can simply create it with Note Pad already installed on your computer. In order to use Note Pad you need some knowledge of HTML (Hyper Text Markup Language). This is the language that is written behind every page you see on the internet. So open Note Pad on your computer and type the following text.

<html>
<head>

<title> Your Page Title Goes Here </title>

</head>

<body >

<h1> My first page </h1>

This is my first web page.
</body>

</html>

Save this file as default.html and there you go! You have created your first web page. Remember that the extension for a Note Pad (Text File) is .txt, so you will need change the extension to htm or html. Now you have this page on your computer. For the world to be able to see this page we need to put this on the server. In order to transfer this to the server you will need an FTP program. I usually use Core FTP. You can download the free version here:

http://www.coreftp.com/download.html

You might find more free FTP on internet. All these applications are pretty simple to use. You have to enter the domain name, FTP login and password. This FTP login and password must be provided to you when you purchased your hosting account. If you don’t have this please contact your Hosting Provider.

So once you enter all the information in the FTP program and connect to the server you will see a few folders on the server. Some service providers require you to copy your files in a folder called www. If you service provider provides you mulitple domains under once account then you might see a folder with your site name. So be sure to find the right folder and find the file you saved on your computer and transfer it to the Server. Usually FTP programs will show a File Explorer for your computer on the left side where you can browse to your files and hit a transfer button or select transfer from the menu. The FTP program will show you a message that your file has been uploaded successfully.

Now it’s time to view the page we just made. So open your browser, if you have windows you should have Internet Explorer already installed or if you are a MAC user you should have Safari. In case you don’t have any of these, you can download any of these for free of internet.

So once you have the browser open, type in your website address. You will see the page that you just created.

Remember that the name of the page should be default.htm, default.html, index.htm or index.html . These are the default page names that the server recognizes as the home page. If you have saved your page with any other name e.g mywebsite.html then you will have access it as www.YourDomainName.com/mywebsite.html.

So there you go, the page looks quite simple but you have created one. Don’t worry this is just the beginning. Before we move ahead I would like to explain some basic HTML tags that are commonly used when creating websites. So please see my next post

CSS Class Name Cannot Begin with a Number

It's funny how we sometimes forget the most basics of technology, I was going crazy trying to solve a CSS issue, no matter what I did I could not see the effects of the class on the element. When I put the same CSS in an inline style it would work, so I noticed the name I gave to the class started with a number and there you go! You cannot start a classs name with a number.

Jquery EasySlider Vertical/Orientation Option

Hi Guys,

I was recently working with the easyslider on one of my websites http://www.fmrwebdesign.com when I came across something. On the easyslider plugin download page: http://cssglobe.com/post/5780/easy-slider-17-numeric-navigation-jquery-slider it says:

orientation

Sliding can be horizontal or vertical. Horizontal is default and if you want vertical set this to 'vertical'. So I was going crazy trying to achieve vertical sliding effect instead of the default horizontal effect. I was using:

orientation: 'vertical'

This does not work, may be it used to be like this in the earlier versions, I'm not sure but it clearly does not work. So I when I looked into the plugin codeI found the option "vertical", so intead of orientation I used

vertical:'true' and blah!!

Guess the developer of the plugin Alen needs to update the info on that page. I was going to leave a comment but the comments have been closed on that page. Anyways hope this will save you guys some time.