Posts Tagged ‘Html’

Html

HTML Email should be sent in “multipart-alternative” format. That means the email is embedded with both the plain-text version, and the HTML version, of the message. When people can’t (or won’t) view HTML email, the plain-text version displays instead. That’s the main reason to use a system like MailChimp, Constant Contact, GotMarketing, etc.

Use inline CSS, not linked files. Unlike images, linking to a server-hosted CSS file isn’t that reliable.

Background colors. Remember how we said that most browser based email applications (like HotMail) strip out your BODY tag? That’s why assigning background colors to your BODY won’t always work. The most reliable way of giving a background color to your email is to wrap it all inside a big, 100% wide table, and give the table cell a bgcolor. We warned you, HTML email is “old school.”

Don’t forget your plain-text version. When web designers create HTML email, they often neglect the plain-text versions (they treat it like image ALT text, or META tags—always a pesky afterthought). But plain-text emails are very important. If you neglect them, some spam filters will even think you’re a sloppy coder, and throw your mail into the junk folder.

Web designers will like this one: some spam filters will punish you for using FrontPage (or other WYSIWYG tools) to code your HTML email. So strip out any of that useless META stuff that those applications produce

Be careful to not include any special symbols, odd characters, or Microsoft Word smart quotes. These will often show up distorted in various email programs. Replace with standard quotes or apostrophe’s. It’s best to edit your HTML ezine in a plain text editor such as EditPlus, Notepad, UltraEdit, etc.

Similar Posts

More HTML Tips and Tricks:

What Html Or Javascript Code Can This Table Be?

http://www.bpa.org/

I want to know what code they use in their HTML table.
PS I am now stealing anything from this website. I just want to know the code for the table.

More HTML Tips and Tricks:

What Computer Script Goes Good Along With Html?

I know html very well and trying to learn another script. I know javascript goes great with html as i have used pre-made scripts before in my sites.
Php im having trouble with embedding properly to show php with html
xml?

More HTML Tips and Tricks:

Using Perl and Regular Expressions to Process Html Files – Part 2

In this article we will discuss how to change the contents of an HTML file by running a Perl script on it.

The file we are going to process is called file1.htm:

Note: To ensure that the code is displayed correctly, in the example code shown in this article, square brackets ‘[..]‘ are used in HTML tags instead of angle brackets ”.

[html]
[head][title]Sample HTML File[/title]
[link rel="stylesheet" type="text/css" onClick="javascript:pageTracker._trackPageview('/outgoing/article_exit_link');" href="style.css"]
[/head]
[body]
[h1]Introduction[/h1]
[p]Welcome to the world of Perl and regular expressions[/p]
[h2]Programming Languages[/h2]
[table border="1" width="400"]
[tr][th colspan="2"]Programming Languages[/th][/tr]
[tr][td]Language[/td][td]Typical use[/td][/tr]
[tr][td]JavaScript[/td][td]Client-side scripts[/td][/tr]
[tr][td]Perl[/td][td]Processing HTML files[/td][/tr]
[tr][td]PHP[/td][td]Server-side scripts[/td][/tr]
[/table]
[h1]Summary[/h1]
[p]JavaScript, Perl, and PHP are all interpreted programming languages.[/p]
[/body]
[/html]

Imagine that we need to change both occurrences of [h1]heading[/h1] to [h1 class="big"]heading[/h1]. Not a big change and something that could be easily done manually or by doing a simple search and replace. But we’re just getting started here.

To do this, we could use the following Perl script (script1.pl):

1 open (IN, “file1.htm”);
2 open (OUT, “>new_file1.htm”);
3 while ($line = [IN]) {
4 $line =~ s/[h1]/[h1 class="big"]/;
5 (print OUT $line);
6 }
7 close (IN);
8 close (OUT);

Note: You don’t need to enter the line numbers. I’ve included them simply so that I can reference individual lines in the script.

Let’s look at each line of the script.

Line 1
In this line file1.htm is opened so that it can be processed by the script. In order to process the file, Perl uses something called a filehandle, which provides a kind of link between the script and the operating system, containing information about the file that is being processed. I’ve called this “opening” filehandle ‘IN’, but I could have used anything within reason. Filehandles are normally in capitals.

Line 2
This line creates a new file called ‘new_file1.htm’, which is written to by using another filehandle, OUT. The ‘>’ just before the filename indicates that the file will be written to.

Line 3
This line sets up a loop in which each line in file1.htm will be examined individually.

Line 4
This is the regular expression. It searches for one occurrence of [h1] on each line of file1.htm and, if it finds it, changes it to [h1 class="big"].

Looking at Line 4 in more detail:

$line – This is a variable that contains a line of text. It gets modified if the substitution is successful.

=~ is called the comparison operator.

s is the substitution operator.

[h1] is what needs to be substituted (replaced).

[h1 class="big"] is what [h1] has to be changed to.

Line 5
This line takes the contents of the $line variable and, via the OUT file handle, writes the line to new_file1.htm.

Line 6
This line closes the ‘while’ loop. The loop is repeated until all the lines in file1.htm have been examined.

Lines 7 and 8
These two lines close the two file handles that have been used in the script. If you missed off these two lines the script would still work, but it’s good programming practice to close file handles, thus freeing up the file handle names so they can be used, for example, by another file.

Running the Script

As the purpose of this article is to explain how to use regular expressions to process HTML files, and not necessarily how to use Perl, I don’t want to spend too long describing how to run Perl scripts. Suffice to say that you can run them in various ways, for example, from within a text editor such as TextPad, by double-clicking the perl script (script1.pl), or by running the script from an MS-DOS window.

(The location of the Perl interpreter will need to be in your PATH statement so that you can run Perl scripts from any location on your computer and not just from within the directory where the interpreter (perl.exe) itself is installed.)

So, to run our script we could open an MS-DOS window and navigate to the location where the script and the HTML file are located. To keep life simple I’ve assumed that these two files are in the same folder (or directory). The command to run the script is:

C:>perl script1.pl

If the script does work (and hopefully it will), a new file (new_file1.htm) is created in the same folder as file1.htm. If you open the file you’ll see the the two lines that contained [h1] tags have been modified so that they now read [h1 class="big"].

In Part 3 we’ll look at how to handle multiple files.

John is a web developer working for My Health Questions Matter, a company dedicated to helping patients to get the most out of their interaction with health care professionals such as doctors, midwives, and consultants by generating a set of health questions a patient can ask at an appointment.

More HTML Tips and Tricks:

Webpage Search Bar Creation, Help! I Need A Search Bar Html Code Or Tips. Not Google Bar!!!?

I have a website that really needs a search bar. I tried Google search bars, but I didn’t like the way it shows the results.
I need a search bar, that shows the results on the same page with the bar, and only shows the title of the page that contains the keywords. Can you help me with a HTML code or with some tips? (I need a search bar that has no addons)
……..______________ ________
e.g. |yahoo!_________| |SEARCH|
Results:
Yahoo! Home page (link)
Yahoo! Mail (link)
Yahoo! Answers (link)
and so on…
I don’t want the search button show the results like this:
(like Google search bar does)
……..______________ ________
e.g. |yahoo!_________| |SEARCH|
Results:
Yahoo!
Welcome to Yahoo!, the world’s most visited home page. Quickly find what you’re searching for, get in touch with friends and stay in-the-know with the …
www.yahoo.com/ – 85k
and so on…

Similar Posts

More HTML Tips and Tricks:

How To Create An HTML Newsletter

OK So you’ve decided it’s time to send an HTML newsletter to your email list but you’re not quite sure where to start? No Problem, we’ve all been there. I tried and tested many times before I created my first successful html newsletter.

Creating an HTML Newsletter is very similar to creating a webpage, with some minor twists on the old rules.

Now if you already know how to create a webpage then you won’t have any problems. But if you’re not sure, then you can always use a WYSIWYG – What You See Is What You Get HTML editors such as Microsoft Frontpage or Adobe Dreamweaver. Or you can skip all those steps and just download a newsletter template, and add your text.

The only real difference between a newsletter and a regular webpage is how it’s designed and how its sent.

Let’s Get Started.

1) Remove everything before the open (body) tag, and everything after the close (/body) tag. Then get rid of the body tags themselves. There should be (html) tag, (head) tag, (title) tag, (metatags), and no css stylesheets. The only remaining html code will be what you originally found BETWEEN your open (body) (/body) and close body tags – Tables, images, text, links etx.

2) No more javascripts – Email providers don’t allow javascript in their email and they will disable it. So if you have any javascript within your newsletter then get rid of it.

3) No Flash, No DHTML, No Web Forms – Most if not all of time they will not work so your newsletter will be better off if you don’t include them.

4) No more ads – Actually you can have ads, but just not the popular Google Adsense Ads. Google’s Adsense uses javascript and javascript won’t work in the newsletter. You can however find link exchanges, or other advertisers that use plain links for their ads, and include those in your newsletter. These ads, banners, and text links will work just fine.

5) No More CSS – Often designers will use CSS for a webpage’s layout, but in the case of an html newsletter it would be better to use tables, instead of writing lines and lines of inline css code. You can set padding, background color, and lots of other table properties, just as you can with CSS. Remember keep it simple.

6) If you must use CSS then get inline – Since you can’t import style sheets to style and format your html content you will need to use inline CSS which includes all of the css properties in line. EX: style=”background: white; color: black;”

7) Images – When adding images on a webpage we would normally use urls such as image1.jpg, but with a newsletter you’ll have to enter the complete or the absolute url.

Tip: Make sure to set your images’ border to 0 so that it will show up seamlessly inside your newsletter.

8) The first link in the email should be a link to the online version of your html newsletter. Even if you have option for html or text newsletter, it’s a good idea to include a link to your online version at the top of the newsletter.

9) Include an unsubscribe / remove me link at the end of your email, and text for compliance with canspam laws. If you don’t have an unsubscribe button then your newsletter could be seen as spam and you don’t want your subscribers thinking they have no way to unsubscribe. If you have more then one newsletter then include a link such as Manage my subscription or a link that takes them directly to their online account. Placing this link will allow your users access to their account and allow them to manage their subscriptions. Who knows maybe they’ll subscribe to more newsletters.

10) Test, test, and retest on major email providers (Hotmail, Yahoo, Gmail). You may notice that with that the new MSN Windows Live Mail Beta the text in your newsletters will be centered. Don’t rely on defaults to left align your text, use the left align button on your editor to align them when needed.

During my previous newsletter tests some of the special characters in my newsletter rendered oddly in Yahoo, so make sure to find the character codes for those special characters, and then paste them directly into your html.

For ex: this ‘ apostrophe will turn into ‘ This will allow the text to display properly. For more character codes scroll all the way down or google “Special Character Codes”

11) Before you send your email make sure to set the email’s content-type as HTML, so that it can display as an Html newsletter, or it will just show up as plain HTML code.

12) Get Online – Before you get started make sure to upload those pictures and your original HTML newsletter to your hosting account so that your subscribers can visit your newsletter online.

That’s it. Happy HTML emailing!

Sam runs www.FreeNewsletterTemplate.net – A Website filled with tools and information from email marketing to email list building. Try out their FREE Html Newsletter Tester at Free Newsletter Template

More HTML Tips and Tricks:

Html Checklist: Check your Html

Structure and Visualization


* Do not use element


* Move arrangement attributes (align, valign, width, height) to CSS.


* Do not use tables except showing table data. Using tables for visual formatting is acceptable in complex situations only. Max table nesting can not be great than 3.


* Move attribute “background” to CSS.


* Design of input fields and buttons must be written as class in CSS.


* Style table must be written as external file and linked using


* All images related to design (not content) move to block with style {background: transparent url(“gif”) no-repeat;}


HTML code


* If table cell contains only image with width and height, then don’t use these attributes for cell.


* Use minimum cols and rows for tables.


* All elements must have “width” and “height” attributes.


* All elements, which are not links, don’t have “border” attribute.


* All attributes values must be placed in double quotes.


* All tags and attributes names must be in low case.


CSS code


* Unique elements must have “id” attribute, which is used for style. Repeated elements must use classes.


* Determine Links style through styles of (td {}, td a {}, td a:hover {}). a:hover must redefine only changed atttributes.


* Determine background color for


* Split declarations to groups (fonts, tables, text blocks, divs)


* Determine geometrical dimensions in percents or pixels.


* All colors values must be as short as possible and in high case (#FFF instead of #ffffff).


* All tags and attributes names must be in low case.


* All margins and indents must be defined for all browsers.


* All classes and identifiers must be named logically with one naming convention.


Structure


* Use title, description and keywords in header.


* All elements with closing tags must have it (ideally, use XHTML 1.0 Transitional/Strict).


* Use alt attribute for . If image don’t have semantic meaning, alt must be empty.


* Use comments before main blocks.


* Use standard tags for creating text structure


* and so one).


* Vertical and Horizontal menus must be defined using


* Don’t use <strong> and <em>. Use <strong> and <em>.

&#xD;
* Blocks must be placed in document in the descending order of importance. Blocks location can be defined using CSS.

&#xD;
You can discuss and improve this document at http://www.htmlchecklist.com/

&#xD;
Vadim Nareyko, CEO of CalidStyle (http://www.calidstyle.com)

Vadim Nareyko, CEO of CalidStyle (http://www.calidstyle.com)

More HTML Tips and Tricks:

Control Flash Movie Playing with HTML Approaches

When you are building a site with lots of videos, do you prefer using one style of player to using different style of player according to the video content? It is up to the website management to use one or more player styles. You may use a different web player for special event or topic on your site. If you are using online Flash video player for your videos, it is no longer a hard task to show different video on different page with the same player style. Because Flash movie player can read the variables set in HTML page.

About HTML and Flash
To insert a Flash movie player in HTML page, you shall use Object tag and Embed tag. With both tags, your Flash movie can display on most browsers like Internet Explorer, FireFox, Safari, Netscape and so on. You can define the width and height of the Flash movie player just like image on web page. However, to make the player show up as what you want you shall change the width and height of Flash movie player in both the Object tag and Embed tag. The new code you add in HTML page will be the top level information that controls the presentation.

Approaches to pass variables to SWF in HTML
A variable is a container that holds information for Flash movie player to display on web page. A Flash movie player may recognize multiple variables, and you can add “&” to combine variables. For example, you get two variables: variable1 and variable2. There shall be information for each variable, which is in the format for the related variable. Supposed the information codes are info1 and info2. You may use the syntax variable1=info1&variable2=info2.
According to Adobe, there are 5 ways to set variables in Flash. As some are mentioned using Flash, I would like to summarize the 3 ways to pass variables to SWF in HTML.

Append query string at the end of SWF:
It is to directly add the variables to the end of the .swf with “?” as the combination code, which forms as query string. Just find <param name=”movie” value= under Object tag, and <embed src= for Embed tag in HTML page, and the .swf file listed is the place you shall append the query string. Supposed the SWF file is named movie, you may change it to <param name=”movie” value=”movie.swf?variable1=info1&variable2=info2″> and <embed src=”movie.swf?variable1=info1&variable2=info2″ in HTML code.

Add FlashVars parameter:

It is to define the FlashVars property in both Object and Embed tag. Different from the method above, you do not need use the combination code, you shall add new parameter. Under the movie parameter in Object tag and above the Embed tag, add <param name=”FlashVars” value=”variable1=info1&variable2=info2″>. Supposed the value for movie parameter is movie.swf, change the Embed tag like <embed src=”movie.swf” FlashVars=”variable1=info1&variable2=info2″ to transfer the new variable to .swf file.

Use [removed]
This method varies according to the Flash movie player you choose. We are not going to describe to general term here.

Samples to set variables
As different Flash movie player may have different variables available to pass to SWF file, here I would like to share the variables for the web FLV player exported by Moyea PlayerBox.
To change the Flash video to display on web FLV player, just replace variable1 with videoFile, if the web FLV player does not include playlist function. Change info1 to the URL of the Flash video.
To change the playlist file with Flash videos to show up on web FLV player, just replace variable1 with playList and change info1 to the URL of the playlist file.

To change the first image which displays before the video start playing, change variable1 to firstFrame and info1 to the URL of the image file.

The videoFile variable shall not be combined with playList variable as player by Moyea PlayerBox is divided into two kinds according to the playlist function. The firstFrame variable can be combined with either videoFile or playList. Just change first image to variable2 if you want to combine variables.

 

More HTML Tips and Tricks:

Best Cms To Use T Update 3 To 4 Lines Of Text In A Html Table On A Website Via Admin Area?

I want to be able to update several different fields of text, up to 30 fields, in an html table on a web page. Each field would be about 3 to 4 lines of text and i just need an admin area where someone could login and easily update this text from the back end without much knowledge of html.

More HTML Tips and Tricks:

I Want Knowledge Of Programming Plz Tell Me Aboyt Any Web Site Who Give Me Free Knowledge Of Html & Tips Pls

More HTML Tips and Tricks: