How to Create a Form in HTML That Can Be Submitted to an Email Address

Using basic tools--a text editor, browser, and email client--you can create a basic form that sends information you request to an email address. This method employs basic form elements and requires no special programs on a web server.
This may work fine in a controlled, internal business environment. However, remember that this method is of limited usefulness as Internet users shift from desktop mail clients to webmail services such as Gmail. Your visitors will also receive security warnings when trying to submit forms this way. There exist many free or paid services that do allow you to collect form information from visitors who choose to use webmail.

Steps

  1. Open a blank text editor session (e.g. Notepad under Windows) or if you have access to a web page editing tool, create a basic web page.

  2. Create a web page using the basic HTML skeleton:
    <html>
    <head>
    <title>Insert Your Title Here</title>
    </head>
    <body>
    </body>
    </html>
    
  3. Enter each of these tags on a separate line, except for the <title> and </title> tags, which can go on the same line. Web pages do not require this formatting, but it does make reading web documents easier for mortal humans.
  4. In between the <title> and </title> tags, insert the name of this page or project, e.g. the information you intend that the page requests.
  5. Hit {Enter} after the <body> tag.
  6. On the resulting line, type the following code, replacing the email address with the email address to which you wish the form sent:
    <form action="MAILTO:user@emailserver.ext" method="GET" enctype="text/plain">
    
  7. Hit {Enter} twice and type </form> just before the closing </html> tag.
  8. To start your form elements, decide whether you would like to use radio buttons (only one clickable response from a list of choices), checkboxes (multiple responses from a list), dropdown list boxes, or a text box.
  9. To create any question, type it in the web document under the <form> tag on its own line. For instance,
    <p> 1. What is your favorite vacation spot?</p>
    
    would display that question on the page.
  10. To create a radio button, type
    <input type="radio" name="1" value="The Scottish Highlands"> The Scottish Highlands
    
  11. The type tells the browser to display a radio button. The name of all related buttons must share a name. All radio buttons named "1" are mutually exclusive, that is, users can select only one from the group. The value will be passed to the email message, and the text after the <input...> tag gets displayed by the browser. Create more radio buttons for all related responses.
  12. Additional radio buttons have to have a different name.
  13. Checkboxes work in the same manner, but the code uses the type="checkbox" instead. E.g.
    <input type="checkbox" name="2" value="Antarctica" /> Where there be penguins.
    Checkboxes are not mutually exclusive, i.e. you may select every member of a checkbox group.
    
  14. A text box displays a box into which a user may type an open ended answer. The code looks like:
    <input type="text" name="3" size="100">
    
  15. The size may be adjusted to enlarge the box, and represents the number of characters that should fit in the box based on the base font of the web page.
  16. Type the following code to create a drop-down box from which users may select from a number of options:
    <select name="vacation_spots">
    <option value="Choose one:" selected="selected">Choose one:</option>
    <option value="Manunka Chunk, NJ">Manunka Chunk, NJ</option>
    <option value="Arthur's Seat">Arthur's Seat, Edinburgh, Scotland</option>
    <option value="Cicely, AK">Cicely, AK</option>
    </select>
    
  17. The selected="selected" attribute means that this option appears selected as the default value when the page loads.
  18. Type the following two lines at the bottom of the document just above the </form> tag to place buttons in your document that will send or reset the form:
    <input type="submit" value="Send">
    <input type="reset" value="Reset">
    
  19. Choose File, Save As in your text processor, give your document a filename, and add the extension .htm or .html to the end of this filename so that web browsers will recognize this document as a web page.
  20. Preview your page by opening it in a web browser. In Firefox, for example, go to File, Open File, or hit Ctrl-O or Command-O to open a new document.
  21. Browse to the file you created and hit OK to open the web form.
  22. Test by selecting some buttons and clicking on Send to send the form answers.
  23. When a user clicks Send, the user responses will appear in a new mail message with the name and value written in the body of the message.


Tips

  • To get back to your document to edit it in a text processor, remember that the text file has a different extension, and so will not appear if you list files of type *.txt. Choose to list All Files to see the files with an *.htm or *.html ending.
  • Multitask to make your work easier: open instances of your text processor, browser, and email programs and switch between them.

Warnings

  • Web pages are text documents saved with an *.htm or *.html ending. Not saving with this ending may confuse the broswer which may not render your page properly.
  • E-mail is not encrypted so this is not suitable for collecting confidential information (such as health or credit card information). Fortunately, many reputable services exist to help you collect such information.

Things You'll Need

  • A text editor, e.g. Notepad.
  • A web browser, such as Mozilla Firefox.
  • A computer configured with a working mail client for testing purposes.

 

How to Get Rid of the Blogger Navigation Bar

If you want to get rid of the navigation bar on your Blogger blog/s it's a very easy process. You don't need to be an expert coder or know very much about HTML.


Steps

  1. The only real reason to get rid of the navigation bar is if you want your blog to look like a blog that isn't hosted on a free service. If it doesn't matter to you then you
  2. Place the following code just before the </head> tag:
    • navbar1 {margin: 0;padding: 0;display: none;visibility: hidden;}
  3. If for some reason that doesn't work for you, try this code:
    • navbar-iframe { height:0px; visibility:hidden; display:none; }
      • The navigation bar will be hidden from view.

Tips

  • Removing the navigation bar is not a violation of Blogger TOS (terms of service). And never has been. So don't worry about removing it.

Warnings

  • You should however, as sometimes TOS do change from time to time, periodically (every 6 months or so) check to see if it becomes a violation.

Resize and optimize an image for the Web in Photoshop

    Resize and optimize an image for the Web using the Save for Web dialog box in Photoshop.
    When you save an image for the Web, you must balance maintaining image quality with minimizing file size and thus download time. The Save for Web dialog box lets you preview different optimization settings. Each preview includes file size and estimated download time. Thus, without altering the original image, you can see the results of various settings and choose the setting that best meets your needs.
  1. Open the image in Photoshop, and choose File > Save for Web.
  2. In the Save for Web dialog box, click the 4-Up tab. The dialog box displays the original image and three previews using different optimization settings.
  3. Click a preview to select it, and then choose a file format preset from the Preset pop-up menu to see the difference in quality. Repeat as needed for each preview. Choose presets based on the file format appropriate for your image:
    • JPEG for continuous tone images, such as photographs. JPEG compression preserves a broad range of color and subtle variations in brightness, but does not support transparency.
    • GIF for animations, solid-color images, and images with repetitive color, such as line art and logos. GIF supports transparency.
    • PNG-8 for solid-color images with sharp detail. Note that many older browsers do not support the PNG format.
    • PNG-24 for continuous tone images, such as photographs. PNG-24 preserves transparency, a broad range of color, and subtle variations in brightness. Note that many older browsers do not support the PNG format.
  4. Choose 200% from the zoom pop-up menu at the bottom left corner of the dialog box. Zooming in lets you examine the detail in each of the previews.
  5. If you want to compare other areas of the image, click the Hand tool (on the upper left side of the dialog box) and drag the image. All the previews move together.
  6. If you want to resize the image, click the Image size tab on the right side of the dialog box. Enter the desired dimensions for Width and Height. Click the Apply button in the tab. (When you save the file, Photoshop resizes only the Web-optimized version.)
  7. Select the preview that best meets your needs, and click Save.
  8. In the Save Optimized As dialog box, locate the folder in which you want to save the image, type a name for the file, and click Save.

Create a gallery of images for the Web (Photoshop)

    Create a Web page gallery of image thumbnails that link to larger versions.
  1. Choose File > Browse to open the File Browser.
  2. In the Folders palette of the File browser, click the folder containing the photos you want to include on your Web page. Photoshop® displays thumbnail versions of the images in the order they will appear in the gallery.
  3. To rearrange the order of the images, drag the thumbnail images to the location you want. As you drag, a black band appears between the images to indicate where the image will be inserted.
  4. If you want to include only some of the images in your gallery, select the thumbnails of the images you want to include. Shift-click to select contiguous images. Ctrl-click (Windows) or Command-click (Mac OS) to select additional images.
  5. In the menu bar at the top of the File Browser window, choose Automate > Web Photo Gallery.
  6. In the Site area of the Web Photo Gallery dialog box, choose a layout from the Styles menu. A preview of the selected gallery style appears at the right side of the dialog box.
  7. In the Source Images area, click the Destination button and locate the folder in which you want to save the gallery files. Then, click OK.
  8. In the Options area, choose Banner from the Options menu. Highlight the Site Name field, and type a name for the site.
  9. To customize other elements of the gallery, such as the size of the thumbnails or linked images, choose other options from the Options menu, and change the settings as appropriate.
  10. When you are satisfied with the settings, click OK. Photoshop creates the gallery page and a separate page for each image in the gallery.

Creating an HTML file (Windows)

If you’re reading this page you must be a Windows XP user. If not, you might want to skip a couple of pages ahead. Or, if you just want to sit in the back and not ask questions, we’re okay with that too. To create HTML files in XP we’re going to use Notepad – it ships with every copy of Windows, the price is right, and it’s easy to use. If you’ve got your own favorite editor that runs on XP, that’s fine too; just make sure you can create a plain text file with an “.html” extension.
Assuming you’re using Notepad, here’s how you’re going to create your first HTML file.

Step one:

You’ll find the Notepad application in Accessories. The easiest way to get there is to click on the “Start” menu, then on “All Programs”, then “Accessories”. You’ll see Notepad listed there.


Step two:

Open Notepad
Once you’ve located Notepad in the
Accessories folder, go ahead and click
on it. You’ll see a blank window ready
for you to start typing HTML.







Step three (optional):

Don’t hide extensions of well
known file types.
By default XP’s File Explorer hides the
file extensions of well known file types.
For example, a file named, “Irule.html”
will be shown in the Explorer as “Irule”
without its “.html” extension.
It’s much less confusing if XP shows
you these extensions, so let’s change
your folder options so you can see the
file extensions.
First, in any Explorer window select
“Folder Options...” from the Tools
menu.
Next, in the “View” tab, under
“Advanced settings”, scroll down until
you see “Hide extensions for known file
types” and uncheck this option.
That’s it. Click on the OK button to
save the preference and you’ll now see
the file extensions in the Explorer.

What's the Difference Between JPEG and GIF?

Images are just images, right? Well, actually there are a zillion formats for images out there in the world, all with their own strengths and weaknesses. But luckily, only two of those formats are commonly used on the Web: JPEG and GIF. The only tricky part is deciding which to use when.

Use JPEG for photos complex graphics

1. Works best for continuous tone images, like photographs.
2. Can represent images with up to 16 million different color.
3. Is a "lossy" format because to reduce the file size, it throws away some
information about the image.
4. Doesn't support transparency.

Use GIF for images with solid colors, logos, and geometric shapes

1. Works best for images with a few solid colors, and images with lines, like logos, clip art, and small text in images.
2. Can represent images with up to 256 different color.
3. GIF also compresses the file to reduce its size, but doesn't throws anything way. So, it is a "loss less" format.
4. Allows one background color to be set to "transparent" so that anything underneath the image will show through.

Basic Tags for Building Mortised Sites

Out of more than 110 XHTML tags. a designer only need to know a small number of them to build mortised sites with basic form functionality. Rather than spending time learning more tags, the designer can spend time logically and creatively manipulating this limited number of tags with CSS, rather than hundreds of lines of code. Included in table below is a list of popular tags, along with some of their possible attributes and uses.

Basic Tags for Building Mortised Sites

<html>
Standard tag used in all pages, except include files. Closed at end of page with </html>.

<head>
Standard tag used in all pages, except include files. Closed at the end of the header information  with </head>.

<title>
Standard tag used in all pages, except include files. Closed with </title>.

<meta name=" " content=" ">
Standard tag used on pages. This tag provide information, determined by the designer,  to be indexed by search engines. It is usually placed between the <head> and </head> tags.

<body>
Standard tag used in all pages. All content seen by the user falls within this tag set. Closed at the end of the page with </body>.

<p>, <br />
Essential for breaking lines in page layout. The <p> tag also can be used when applying a style to a block of text and/or images. The <p> tag is closed with </p>, and the <br /> is simply closed within itself.  

<table>
Essential tag for building tables. Closed at the end of the table with </table>

<tr>
Essential tag for building table rows. Closed with </tr>.

<td>
Essential tag for creating table cells. Closed with a </td>.

<img src=" " width=" " height=" " alt=" " border=" " name=" " />
Essential for adding images to a page. The forward slash (/) is included in the tag so that it closes itself.

<a href=" " class=" " target=" " />
Essential for linking to pages, documents, and images. Closed with </a>.

<div class=" " style=" ">
Used with CSS usually to control font size and color, images, multiple block-level elements, and content positioning. Closed with </div>.
<span class=" " style =" "> 
Used to add styles to content. Closed with </span>.

<strong>
Used to bold text when it is not controlled using a style that is associated with text.
Closed with </strong>.

<!— comment —> 
Used to comment code. Used for all comments—single and multiple lines.

<form id=" " name=" " action=" " method=" ">
Used to create forms in XHMTL. Closed with </form>.

<input type=" " id=" " name=" " value=" " /> 
Input is used to create form fields, such as “text,” “radio,” and “checkbox.” The tag closes itself with a forward slash (/).

<label for=" " id=" ">
Used for positioning elements with fields in a form.

<textarea> 
Used for large text input entries. Closed with </textarea>.

<select id=" " name=" " multiple="multiple">
Used for dropdown form elements. Closed with </select>.

<option selected="selected" value=" " label=" "> 
Used to delineate individual items in a dropdown form field. Closed with </option>.

How to Learn XHTML




XHTML stands for eXtensible HyperText Markup Language and is HTML written in an XML dialect. This is an advantage because programs for parsing XML are common and relatively simple, compared to HTML parsers which must be highly complex to interpret the "loose" syntax of HTML. XHTML is a standardized language that (ideally) can be read by any kind of web browser, including those on mobile phones and those that display information as speech or braille for disabled users.

Steps


  1. Before you can learn XHTML, you should first have a basic knowledge of HTML. XHTML is written exactly like HTML, with a few stipulations:
  2.  Because XHTML documents are a type of XML document, they need an XML prologue. This should be placed at the very top of your document, and is written like: <?xml version='1.0' encoding=utf-8' ?> Adjust the encoding attribute to the proper encoding of your document. In most cases, this will be UTF-8.
  3. All XHTML documents must have a Document Type Declaration (DOCTYPE) right after the XML prologue. The current version of XHTML, XHTML 1.0, defines three DTD's. These are "Strict", "Transitional", and "Frameset". Unless you have a good reason to do otherwise, use the Strict DTD. The DOCTYPE for the Strict DTD is: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  4. All tag names must be in lower case. For example, use <p></p> for a paragraph instead of <P></P>.
  5. All tags must be closed. For example, if you use <p> to start a paragraph, make sure there is a closing </p> at the end. Empty elements, such as <br> and <img> (which have no content inside of them) must be closed as well. Put a slash at the end of the tag: <br /> is the correct XHTML syntax for a line break.
  6. Tags must be correctly nested. This was also a requirement in HTML, but is especially important for XHTML. For example <b><i>Some text</b></i> is incorrect, because the <b> tag is being closed before the <i> tag even though it started first. The correct syntax would be: <b><i>Some text</i></b>.
  7. All attributes must be quoted. In HTML it would be valid to write <a href=nextPage.html>Next Page</a>. However, in XHTML all attributes must be quoted: <a href="nextPage.html">Next Page</a>.
  8. Minimized attributes should be written in the long form. For example: <input type="checkbox" checked> should be <input type="checkbox" checked="checked" />).
  9. Separate content and presentation. Use XHTML for the content of your document (such as text, images, links, etc.) and use CSS (Cascading Style Sheets) to dictate how that content should be displayed to the user. HTML tags that are used for presentation (such as <font>) should not be used.

Tips

  • Using a good editor for writing your code will help you to make fewer mistakes and write good XHTML. Editors designed with programming in mind such as PSPad, Notepad++ and Emacs provide features such as colored syntax highlighting which can help you quickly spot errors in your markup.
  • For the most up-to-date information visit The World Wide Web Consortium which sets the standards for XHTML and other web technologies.
  • Valid XHTML should pass the W3C Validation Test. This test will tell you if there are problems in your code and how to fix them.

Warnings

  • Be careful to close all tags, even empty elements. This may seem pointless, but it is good practice and essential if you wish to write valid XHTML.
  • Although XHTML is designed to be backwards compatible, you might run into issues using it on very old browsers.
  • The DOCTYPE is not a tag; it does not need to be closed.
  • Microsoft Internet Explorer 8 (and versions prior) does not treat HTML and XHTML documents differently when served with the MIME type of text/html. The recommended MIME type of application/xhtml+xml is only supported in IE9+.
  • If the XML declaration is included, the page is displayed in quirks mode in Microsoft Internet Explorer 6 (this is a bug).
  • Due to problems with XHTML, it is recommended to stick with HTML 4.01 or use the upcoming HTML 5 standard.

 

Things You'll Need

 

A text editor such as Notepad which allows you to save files as plain text. Word processors, such as Microsoft Office Word, are not particularly useful because they add extra unwanted text which makes your web page non-compliant.

Source : wikiHow

 

How to Create a Blog Following

People who read your blog on a regular basis are known as your blog followers. They can include people other than your blog subscribers (people who have accepted a subscription for your blog to keep up with latest updates), although having many people with subscriptions to your blog certainly does indicate a loyal following. There are many effective ways to create a blog following and increase the number of people following your blog.

Steps

  1. Allow readers to choose from many blog subscription methods. Here are some options that you can provide.
  2. Focus your blog on a particular topic. Choose a topic that you specialize in or at least you are familiar with so you can write about it with a knowledgeable tone. The topic should be something that can retain your readership for a long time rather than just being a time-sensitive subject that people will lose interest in later on.
  3. Offer incentives for people to follow your blog. For example, you can create a blog following by offering a free ebook to encourage people to subscribe to your blog.
  4. Trade links with other bloggers. This will make followers of other blogs come to your blog and start following it.
  5. Create and advertise a blog subscription page that provides all the details about subscribing to your blog. If people don't have time to read your blog right away they may still decide to subscribe to it when they see your advertisement so they can read it later on.
  6. Be an active blogger who participates in discussions and posts comments on other blogs. This will intrigue people to find out more about you and become blog followers. Mention your blog as much as you can. You could discuss it in social gatherings, at your workplace or in online chatrooms. The more people know about your blog the more they will want to follow it.
  7. Ask for feedback. People like to discuss information rather than just read a one-sided story. Encourage everyone from your most loyal blog subscribers to new readers to leave comments under blog posts or email you to share their opinions.
Source : wikiHow