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.
Archive for the ‘Tables Frames’ Category
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
- —> Html
- Where Can I Find Good Web Design Advice? | Web Design Study
- Uncertainty LIMITED BDSCR XviD-ARROW | Mobile News
- College financial aid and programs questions? | Get College …
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:
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.
More HTML Tips and Tricks:
Table-less Web Designing: by Pseudo Technology
In the previous article “Basic Types and Requirements for Web Designing: PSEUDO TECHNOLOGY” we have discussed about the various techniques of web designing process. But we left the topic of table-less web designing because this topic in itself is a matter of discussion. The first thing you should be aware is that this site is not built using these techniques. The Web Design site on About (and all About sites) is built using tables, and until browsers that support CSS Positioning are more widely used, will be for the foreseeable future. The most important function of table-less web designs is the fact that it greatly facilitates the improvement of accessibility. However they face a bit of difficulty as browser support is minimal.
Browser Support:
CSS Positioning (CSS-P) is the only way to create standards based Web pages using XHTML. Why? Because XHTML requires that tables only be used to define tabular data, and not be used for layout. The problem is, until recently, most browsers only had sketchy support of CSS-P. But now, the following browsers and versions, have minimal to good support of CSS-P, among others:
• Microsoft Internet Explorer 6
• Microsoft Internet Explorer 5
• Netscape Navigator 7
• Netscape Navigator 6
• Opera 6
• Opera 5
• Mozilla 1
• Konqueror 3
• Konqueror 2
Rethinking How You Build a Page:
When you build a site using tables, you have to think in a “tabular” format. In other words, you’re thinking in terms of cells and rows and columns. And your Web pages will reflect that. When you move to a CSS-P web designing, you’ll start thinking of your pages in terms of the content.
For example, the page for this article can be considered to have five content parts:
1. The header
this is where my photo is, the top banner ad, and basic navigation.
2. The left navigation
this is the left side of the page, with the subjects and essentials.
3. The right navigation
this is where the tower ads and other information is.
4. The content
the text of this article.
5. The footer
the bottom navigation, copyright information, lower banner ad, and so on.
Rather than putting those elements in a table, I can use the <div></div> tag to define the different portions of the content, and then use CSS-P to place the content elements on the page. For the sake of this article, I’m going to pretend there are just three columns on the page, and ignore the header and footer.
Identifying Your Sections
Once you’ve defined the different content areas of your site, you need to write them in your HTML. While you can, generally, place your sections in any order, it’s a good idea to place first items you’d like less advanced browsers to see first.
For my three column layout, I’m going to have three sections:
1.leftnavigation
2. rightnavigation
3. content
These will be defined using div tags with the id attribute. Remember, when you use the id attribute, you need to have a unique name for each id.
1.<div id=”leftnavigation”></div>
2. <div id=”rightnavigation”></div>
3.<div id=”content”></div>
Positioning
This is the fun part. Using CSS you can define the position for your id’ed divs. Store your position information in a style call like this:
#content { } Content within a div tag will take up as much space as it can, namely 100% of the width of the current location, or the page. So, to affect the location of a section without forcing it to a fixed width, you can change the padding or the margin elements. For this layout, I set the two navigation columns to fixed widths and then set their position absolute, so that they wouldn’t be impacted by where they are found in the HTML. While the page won’t look wonderful in non-CSS-P browsers, as you can see, it is possible to define how your page will look without any table tags.
The term web designing simply refers to fine art of designing websites that are available on the World Wide Web and are used consistently by individuals. Designers are a very significant part of developing a website as they are responsible for providing color to the external appearance of the website. Therefore, they are vital in providing a lasting impression upon the user, enhancing the popularity of the site. There are various factors and methods that need to be borne in mind when it comes to web designing a website. Websites are filled with written content as well as images and they need to conform to certain forms like JPEG, PNG, GIF and HTML, XHTML etc for written content. One of the methods of designing is known as table-less web design.
Pseudo Technology is India’s most reliable software solution provider for website promotion, payment gateway, multi-level marketing, software development and outsourcing. To know more about html web designing, web designing india, web designing delhi, web designing, designing web sites, you can visit http://www.pseudotechnology.com
Similar Posts
- —> Designing
- Designing Original Custom Jewelry Pieces
- Career in Fashion Designing | Fashion Design
- Ideas To Think About When Designing Your New Kitchen | Blogging …
- —> Pseudo
- Chloe Woodgate | I Want Your Skull
- Java Texture Packer « A3's Log
- Merry Christmas! « Sword of Heaven
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.
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>.

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

You can discuss and improve this document at http://www.htmlchecklist.com/

Vadim Nareyko, CEO of CalidStyle (http://www.calidstyle.com)
Vadim Nareyko, CEO of CalidStyle (http://www.calidstyle.com)
More HTML Tips and Tricks:
Why You Should CSS Instead of Tables When Designing Your Web Page
The following article will show you why to stay away from tables when designing a site.

Most web developers and designers will tell you to stay away from tables when developing web sites, of course there are some exceptions, like forms, and data. Instead they will tell you to use CSS. When designing your web site you should use CSS, along with the HTML tag. Now, you may be asking, why? The reasons are below!

1. Tabular Data. Not layouts.

Tables are for Tabular Data. They simply are not for designing a page. Here is a good page at about.com that explains Tabular Data.

2. Nested Tables

Nested tables is a common way to make layouts with tables. With nested tables, one, or more, tables are placed inside each other. There is a problem when designing a page this way, it takes the browser longer to render your page. With CSS there is way less code, and your code is cleaner, therefor it is easier on the browser.

3. Changing fonts, colors, and layouts.

Lets say you had a site with 100 pages, with tables, and you wanted to change the header of every page to blue instead of red. With CSS you could go into the CSS file, included on every one of those 100 pages, and change the font-color to blue. It would then update all of your pages with the color blue. With tables you would have to open every one of those pages and change the color.

4. Invalid XHTML

When using tables for your web page layout, you are writing invalid XHTML. You should only use tables when you are working with Tabular Data, as I stated above.

5. Smaller HTML files

No one wants a huge HTML file, full of messy code, right? Well, this is just another reason to use CSS. Since you can call your CSS stylesheet from external file, it doesn’t even need to be in your HTML file to work, making it even smaller.


Home Page: http://www.leetwebmasters.com
My name is Joey, and I have been in the webmaster business for three years now.
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:
How Do You Use Php To Display A Two Columns Per Row Html Table?
$arr=array(“apple”,”orange”,
“banana”,”grape”,
“pineapple”);
I want to display the array in a html table using php (foreach loop preferred), two columns per row like this:
apple orange
banana grape
pineapple
Many thanks to you all.
More HTML Tips and Tricks:
How Do U Change The Color Of The Lines In Between An Html Table?
I want to change the color of the lines in between an html table. I have the bordercolor code thinking it would change the color of those lines but it only change the color of the border around the table it self. So right now I have the table with a red border and the lines in between are white. Want to make it where it’s all red. Anybody can give a hand with this. Thanks