| Adelphia | mail.adelphia.net |
| Ameritech | smtp.ameritech.yahoo.com |
| AOL | smtp.aol.com |
| Atlantic Broadband | smtp.atlanticbb.net |
| AT&T | mailhost.att.net |
| AT&T Broadband | mail.attbi.com |
| AT&T Global Dialup | smtp1.attglobal.net |
| AT&T Worldnet | mailhost.worldnet.att.net |
| BCPL | mail.bcpl.net |
| Bellatlantic | smtpout.verizon.net |
| Bellatlantic.net | smtpout.bellatlantic.net |
| Bell Canada | smtp10.bellnet.ca |
| Bellsouth | mail.bellsouth.net |
| Bestweb | smtp.bestweb.net |
| Blazenet | smtp.blazenet.net |
| CableOne | mail.cableone.net |
| CAIS | smtp.cais.net |
| CAPU | smtp.capu.net |
| Charm.net | smtp.charm.net |
| Charter Communications | smtp.chartermi.net |
| Charter.Net | smtp.charter.net |
| CharterMI.net | mail.chartermi.net |
| CharterTN.net | mail.chartertn.net |
| Coax.Net Central | smtp.central.coax.net |
| Coax.Net East | smtp.east.coax.net |
| Coax.Net West | smtp.west.coax.net |
| Comcast | smtp.comcast.net |
| Compuserve | smtp.compuserve.com |
| Concentric.net | smtp.concentric.net |
| Covad | smtp.covad.net |
| Cox West | smtp.west.cox.net |
| Cox Central | smtp.central.cox.net |
| Cox East | smtp.east.cox.net |
| Cox Business | smarthost.coxmail.com |
| Crosslink | smtp.crosslink.net |
| DCANET | smtp-relay.dca.net |
| Delmarva Online | mail-gw.dmv.com |
| Delta Net | smtp.deltanet.com |
| Direcway | smtp.direcway.com |
| DSL Extreme | smtp.dslextreme.com |
| Earthlink | smtp.earthlink.net |
| Earthlink International | ismtp.earthlink.net |
| Edge.net | mail.edge.net |
| Enter | smtp.enter.net |
| Erols | mail.erols.com |
| Etisalat | smtp.emirates.net.ae |
| Ezy | smtp.ezy.net |
| Flash.Net | smtp.flash.yahoo.com |
| Frontiernet.Net | smtp.frontiernet.net |
| Frontline.Net | smtp.fcc.net |
| Fuse | smtp.fuse.net |
| Gateway | smtp.gateway.net |
| GTI | mail.gti.net |
| GMail | smtp.gmail.com |
| HotMail | mail.hotmail.com |
| IBM Global Net | smtp1.ibm.net |
| ioNet Inc | mail.ionet.net |
| Internet America | mail.airmail.net |
| ITOL | mail.itol.com |
| Juno | smtp.juno.com |
| Mediacom | mail.mchsi.com |
| Mediaone | smtp.ce.medione.net |
| MegaPath | mail.megapathdsl.net |
| Mindspring | smtp.mindspring.com |
| MSN | smtp.email.msn.com |
| MSN DSL | secure.smtp.email.msn.com |
| Nauticom | mail.nauticom.net |
| NEBI.com | mail.nebi.com |
| Netcom | smtp.ix.netcom.com |
| Netcom Canada | smtp.netcom.ca |
| Netscape | smtp.isp.netscape.com |
| NetZero | smtp.netzero.net |
| NYU.edu | smtp.nyu.edu |
| OLG.com | mail.olg.com |
| OOL | mail.optonline.net |
| Pacbell/Pacific Bell | smtp.pacbell.yahoo.com |
| Panix.com | mailhost.panix.com |
| Patriot Media | smtp.patmedia.net |
| PeoplePC | smtp.peoplepc.com |
| Pipeline | smtp.pipeline.com |
| Prodigy | smtp.prodigy.yahoo.com |
| PSI.Net | relay.smtp.psi.net |
| PTD.Net | mail.ptdprolog.net |
| QIS | mail.qis.net |
| Quixnet.net | smtp.quixnet.net |
| Qwest Internet Service | pop.dnvr.qwest.net |
| RCN | smtp.rcn.com |
| Rider.edu | enigma.rider.edu |
| RoadRunner | smtp-server..rr.com |
| Rogers Hi-Speed | smtp.broadband.rogers.com |
| ROL | smtp.rol.ru |
| SBC Global | smtp.sbcglobal.net |
| SBC Yahoo DSL | smtp.att.yahoo.com |
| Smallville Communications | mail.toto.net |
| SNet | smtp.snet.yahoo.com |
| SNiP | mail.snip.net |
| Speakeasy | mail.speakeasy.net |
| Spectrum DSL | mail.webstable.com |
| SprintLink | smtp.a001.sprintmail.com |
| Sprynet | m6.sprynet.com |
| Starpower | smtp.starpower.net |
| Swbell | smtp.swbell.yahoo.com |
| Sympatico | mailhost.sk.sympatico.ca |
| The-Beach.net | mail.the-beach.net |
| UMBC | smtp.gl.umbc.edu |
| USA.NET | mail.netaddress.usa.net |
| US Internet | smtp.usit.net |
| UUNet | mail.uu.net |
| Verio | smtp.veriomail.com |
| Verizon | outgoing.verizon.net |
| Wans.net | smtp.wans.yahoo.com |
| Wide Open West | smtp.mail.wideopenwest.com |
| XO Communications | smtp.concentric.net |
| Yahoo | smtp.mail.yahoo.com |
| Ziplink | smtp.ziplink.net |
What Is Email Marketing?
Email marketing is directly marketing a commercial message to a group of people using electronic mail (email). Though it is more commonly thought of as using email to send ads, request business, or solicit sales or donations, any email communication that is meant to build loyalty, trust or brand awareness qualifies.
Professional Email Marketing :
Email marketing occurs when a company sends a commercial message to a group of people by use of electronic email. Most commonly through advertisements, requests for business, or sales or donation solicitation, any email communication is considered email marketing if it helps to build customer loyalty, trust in a product or company or brand recognition. Email marketing is an efficient way to stay connected with your clients while also promoting your business.
With email marketing, you can easily and quickly reach target markets without the need for large quantities of print space, television or radio time or high production costs. Thanks to effective email marketing software, you can maintain an email list that has been segmented based on several factors including the length of time addresses have been on the list, customers’ likes and dislikes, spending habits and other important criteria. Emails are then created and sent out to specifically target members of your email list, providing them with a personalized email detailing information that they are interested in or have requested. This helps promote trust and loyalty to a company while also increasing sales.
There are several examples of email marketing campaigns, starting with a welcome email that thanks that new contact for opting in to your subscription. Welcome letters can not only give valuable information about your company, they can also request key information about your new client, helping you put the person in the correct categories for future marketing efforts. Additional email campaigns include sending out announcements on products or services, a newsletter regarding your company and/or products, coupons for future purchasing and much more. Every email you send out should have company information on the bottom, giving potential clients a chance to learn more about your company as well as ‘opt-in’ to get future emails. Incentive programs that give members a ‘promo code’ to collect discounts on purchases also allow you to monitor the effectiveness of your campaign as well as what your contacts are interested in.
With the help of email marketing software, email marketing is an effective way to not only reach your target markets but also to stay connected with your purchasing base. Through efficient use of email marketing, you can retain current clients while also targeting new markets. You can easily monitor how effective a marketing campaign is, and see that your return on investment is substantially higher than with other, more traditional, marketing campaigns. Let the internet help guide your customers to you again and again with an effective email marketing campaign.
Pure CSS Drop Down Menu Example 1
Pure CSS Drop Down Menu – W3C Validated – Works In All Major Browsers With No Browser Hacks. It works by sensing mouse “hover” or “onmouseover” to make a hidden or displaced element come into existence where we assign it to. This example offers two drop down menus but you can have as many as needed in your web site navigation system.
You can simply copy and paste this code into a new blank HTML document to expreriment with it. The CSS
is magenta and the HTML is blue.
CODE:
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd“>
<html xmlns=”http://www.w3.org/1999/xhtml“>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title>Pure CSS Drop Down Menu</title>
<style type=”text/css”>
/* ——————– Main body tag styling ———————- */
body,td,th {
font-family: Arial, Helvetica, sans-serif;
}
/* ——————– What the entire dropdown backround will look like and its positioning ———————- */
ul {
margin:0;
padding:0;
}
.dc{
display:inline;
position: relative;
z-index: 0;
margin:0;
padding:0;
}
.dc:hover{
background-color: transparent;
z-index: 50;
}
.dc ul{
position: absolute;
width:120px;
background-color: #999;
left: -1000px;
list-style-type:none;
visibility: hidden;
}
.dc:hover ul{
visibility: visible;
top: 16px;
left:0px;
}
/* ——————– What the list items will look like inside the dropdown ———————- */
.dc ul li{
margin:0;
padding:0;
background-color: #EBEBEB;
margin:1px;
}
.dc ul li:hover {
background-color: #FFF;
margin:1px;
}
/* ——————– What the links look like inside the dropdown ———————- */
.dc ul li a {
display:block;
padding:4px;
font-size:12px;
}
.dc ul li a:link {
color: #333;
text-decoration: none;
}
.dc ul li a:visited {
text-decoration: none;
color: #000;
}
.dc ul li a:hover {
text-decoration: none;
color: #333;
}
.dc ul li a:active {
text-decoration: none;
color: #333;
}
/* END PURE CSS DROP MENU */
</style>
</head>
<body>
<div class=”dc”>
<a href=”#”>Drop Menu 1</a>
<ul>
<li><a href=”#”>Menu Item</a></li>
<li><a href=”#”>Menu Item</a></li>
<li><a href=”#”>Menu Item</a></li>
<li><a href=”#”>Menu Item</a></li>
<li><a href=”#”>Menu Item</a></li>
</ul>
</div>
<div class=”dc”>
<a href=”#”>Drop Menu 2</a>
<ul>
<li><a href=”#”>Menu Item</a></li>
<li><a href=”#”>Menu Item</a></li>
<li><a href=”#”>Menu Item</a></li>
</ul>
</div>
</body>
</html>
Browser Output Display:
CSS Layers and Positioning:
You can set some of your page element like table, divs, text, and image to be layered. Meaning that some can reside on a layer above the rest using z-index.
Setting the z-index value of the style style will place that element in that layer on your page.
We will demonstrate how to take the four colored squares below and layer them using a table as a holder, and means of positioning strategically with other content
First right click and save each colored square above into your images folder.
CODE:
<table width=”100%” border=”3″ bgcolor=”#FFFFFF”>
<tr><td height=”110″>
<img src=”images/layerbox1.jpg” alt=”square1″ width=”100″ height=”100″ />
<img src=”images/layerbox2.jpg” alt=”square2″ width=”100″ height=”100″ />
<img src=”images/layerbox3.jpg” alt=”square3″ width=”100″ height=”100″ />
<img src=”images/layerbox4.jpg” alt=”square4″ width=”100″ height=”100″ /></td>
</tr>
</table>
CSS which goes in your style sheet:
.layer1{
z-index:1;
position: relative;
left: 0px;
bottom: 0px;
}
.layer2{
z-index:2;
position: relative;
right: 25px;
bottom: 25px;
}
.layer3{
z-index:3;
position: relative;
right: 50px;
bottom: 50px;
}
.layer4{
z-index:4;
position: relative;
right: 75px;
bottom: 75px;
}
Here is the CSS attribute and values reference guide. There are small examples of applying each attribute in the description area for each.
| Attribute | Description | Values |
| background | Allows you to Define all the background properties that are listed below this one, all together in one rule. Or you can choose to use the background specific properties below instead and get the same results.
And here is how we apply values all together in an attribute: That can be done in most styling attributes or properties. |
fixed scroll color value percentage url repeat repeat-x repeat-y no-repeat |
| background-attachment | Used for instructing your background image to scroll or be fixed in place when a user scrolls your page.
background-attachment: scroll; |
fixed scroll |
| background-color | Define the color of the background.
background-color: #999999; |
color value |
| background-image | Define an image to Define as a background on your web page.
background-image: url(myBG.jpg); |
URL of Image |
| background-position | Define the position of your background when using an image.
background-position: top center; |
bottom center left right top |
| background-repeat | Define whether or not your background will render repeat image tiling or not, and in what direction.
background-repeat: no-repeat; |
repeat repeat-x repeat-y no-repeat |
| border | Define a border and style.
border: #060 2px solid; |
thin thick solid double groove dotted dashed inDefine outDefine thin ridge hidden four-sides |
| border-bottom | Define what the bottom border of the HTML element will look like. Each edge of the border can look different if you like.
border-bottom:#090 1px solid; |
number color value |
| border-bottom-color | Define what the bottom border color will be for the element.
border-bottom-color:#F00; |
color value |
| border-bottom-style | Define what the bottom border style will be for the element.
border-bottom-style:dashed; |
solid double groove dotted dashed inDefine outDefine ridge hidden |
| border-bottom-width | Define the width of the bottom border.
border-bottom-width:2px; |
number |
| border-color | Define the color of a border.
border-color: #F00; |
color value |
| border-left | Define the left border of the element. Each edge of the border can look different if you like.
border-left: #06C thin groove; |
number color value |
| border-left-color | Define the left border color.
border-left-color: #06C; |
color value |
| border-left-style | Define the left border style.
border-left-style: double; |
solid double groove dotted dashed inDefine outDefine ridge hidden |
| border-left-width | Define the left border’s width.
border-left-width: thick; |
number |
| border-right | Define the right border of the element. Each edge of the border can look different if you like.
border-right: #F90 thick outset; |
number color value |
| border-right-color | Define a color for the right border.
border-right-color: #06C; |
color value |
| border-right-style | Define the right border style.
border-right-style: double; |
solid double groove dotted dashed inDefine outDefine ridge hidden |
| border-right-width | Define the width of the right border.
border-right-width: thick; |
number |
| border-style | Define a border style.
border-style: ridge; |
solid double groove dotted dashed inDefine outDefine ridge hidden four-sides |
| border-top | Define a top border.
border-top: #960 medium dotted; |
number color value |
| border-top-color | Define a color for the top border.
border-top-color: #06C; |
color value |
| border-top-style | Define a style for the border top.
border-top-style: double; |
solid double groove dotted dashed inDefine outDefine ridge hidden |
| border-top-width | Define the width for the top border.
border-top-width: thin; |
number |
| border-width | Define the width for the entire border.
border-width: thick; |
number |
| clear | Clear space on the side of an element. Causes any floating elements in that space to display the next line down.
clear: left; |
left right both none |
| color | Define the color of text.
color: #06C; |
color value |
| display | Some HTML elements will take up a block(full display line) by default. But they can be set to inline where needed. And tags that do not block by default can render as a block if you define it for the element’s display attribute. The <IMG> and <SPAN> tags are inline by default, while <DIV> and <P> elements display as blocks by default. Try putting two raw <P> tags on the same display line. Not possible unless you set the display value correctly.
<p style=”display: inline;”>Hello</p> Try the example above, then remove the styling and view it. Or change “inline” to “block” and view. |
block inline |
| float | Float an element to the left or right. Other content will wrap around a floated element.
float:right; |
left right |
| font-family | Define the font family you want to use in an element.
<div style=”font-family:Arial, Helvetica, sans-serif;“>Hello</div> |
font-name |
| font-size | Define font size in an element.
font-size:16px; |
percentage number |
| font-style | Render font italicized on fonts that support it.
font-style: italic; |
italic oblique normal |
| font-variant | Render small capitals on fonts that support it.
font-variant:small-caps; |
small-caps |
| font-weight | Define the thickness of text using values from 100 to 900. 100 is thinnest, and 900 is thickest.
font-weight:900; |
weight-value |
| height | Define the height of an HTML element.
height:340px; |
number auto |
| letter-spacing | Define the value of the space between your letters.
letter-spacing:18px; |
number |
| line-height | Defines the vertical space between lines of text in an HTML element.
line-height:1.8em; |
percentage number |
| list-style | Define all of the characteristics of HTML list elements in one decleration.
list-style:upper-roman inside; |
circle square disc upper-alpha lower-alpha upper-roman lower-roman decimal inside outside url none |
| list-style-image | Define an image file in place of the normal list styled bullets. Small images work best.
list-style-image:url(myBullet.gif); |
url |
| list-style-position | Define the placement of your bullets points or numbers within your list items.
<ul> |
inside outside |
| list-style-type | Define the style for your list items.
<ul> |
circle square disc upper-alpha lower-alpha upper-roman lower-roman decimal |
| margin | Define the margin space around the outside of an HTML element. This will set all margins uniformaly to a value if used. Use the attributes below for fine tuning your margins and setting different values for each side.
margin:30%; |
percentage number auto |
| margin-bottom | Define the bottom margin of an HTML element. Margins add space directly around the outside of an HTML element.
margin-bottom:40%; |
number percentage auto |
| margin-left | Define the left margin of an HTML element. Margins add space directly outside of an HTML element.
margin-left:10px; |
number percentage auto |
| margin-right | Define the right margin of an HTML element. Margins add space directly outside of an HTML element.
margin-right:50%; |
number percentage auto |
| margin-top | Define the top margin of an HTML element. Margins add space directly outside of an HTML element.
margin-top:30px; |
number percentage auto |
| padding | Define the padding all around the content inside of an HTML element.
padding:8px; |
number percentage four-sides |
| padding-bottom | Define the bottom padding of an HTML element.
padding-bottom:8px; |
number percentage |
| padding-left | Define the left padding of an HTML element.
padding-left:12px; |
number percentage |
| padding-right | Define the right padding of an HTML element.
padding-right:12px; |
number percentage |
| padding-top | Define the top padding of an HTML element.
padding-top:8px; |
number percentage |
| position | Define the position type of an element and how it relates to other elements around it. Use the Top, Right, Bottom, and Left attributes to define where the object will be placed exactly.
position:fixed; |
absolute relative percentage number |
| text-align | Define the alignment of text.
text-align:center; |
right center left justify |
| text-decoration | Define the text’s decoration. Usually used in styling links on a web page.
text-decoration:underline; |
line-through overline underline none |
| text-indent | Define Indention for the first line of an element.
text-indent:80px; |
number percentage |
| text-transform | Change text from uppercase to lowercase, and capitalize.
text-transform:uppercase; |
capitalize lowercase uppercase |
| vertical-align | Defines the vertical alignment of your element. vertical-align:top; |
vertical-values |
| white-space | Prevent your text from wrapping with nowrap. Normally text will automatically break line to the next line down if the words reach a barrirer inside an element. Use this to prevent the auto-wrap. Usually results in a horizontal slider appearing unless you set the overflow attribute to the “hidden” value.
white-space:nowrap; |
nowrap |
| width | Define the width of an element.
width:100%; |
number percentage auto |
| word-spacing | Define the value of the space between words in your text. You can define a negative value in this attribute. It may not render visually in your HTML editor, but the browser software will render it, not to worry.
word-spacing:48px; |
number |
| z-index | Define the z-index of an HTML element. Used in layering elements, or stacking elements. The element with the lowest z-index would be on the bottom of the stack(layers).
z-index:5; |
whole-number |
A CSS style sheet is used to add styling to your page elements(tags) in a more organized fashion to help with code clutter. You can make site-wide changes by changing one line of code in your style sheet. In addition, most of our CSS lessons are given assuming that you are using a . CSS style sheet. It is the smarter way to design.
Now on to it……
1. Create a new folder inside of your main project folder (where your index.html file lives). Name this new folder “style”.
2. Fire up your HTML editor and create a new blank file named “main.css”
3. Save main.css into the new folder you just created named style
4. Open index.html and add the following line of code inside of your head tag, directly under your title tag is a good spot.
Full Code Example for you to reference where to place the line above:
{(Code)}
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=iso-8859-1″ />
<title>My Web Page</title>
<link href=”style/main.css” rel=”stylesheet” type=”text/css” />
</head>
<body>
Hello World!
</body>
</html>
Each web page you have can use the same or different style sheets.
Run a quick test to check CSS style sheet linkage
1. Open your index.html file and place the following code within your <body> tag. Then save the file.
{(Code)}
<div>Hello World!</div>
2. Open main.css and place the following code into it, then save the file.
{(Code)}
.style1 {
background-color: #00FF00;
height:100px;
width:100px;
}
3. Open index.html using your web browser. If you see Hello World! inside of a
bright green 100x100px square, you have successfully linked to your new style
sheet!
If you do not see the bright green square, you do not have style sheet linkage.
If you happen to fail in the linkage test
1. Be sure that you have saved both files before testing.
2. Check that your directory structure matches this Click Here
3. Make sure that your index.html file looks exactly like this
{(Code)}
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=iso-8859-1″ />
<title>My Web Page</title>
<link href=”style/main.css” rel=”stylesheet” type=”text/css” />
</head>
<body>
<div>Hello World!</div>
</body>
</html>
4. Be sure that your main.css looks exactly like this:
{(Code)}
style1 {
background-color: #00FF00;
height:100px;
width:100px;
}
And be sure everything is in the appropriate folders.
We will now add our images into our pages like this. Put your images into their own folder.
<img src=”images/my_pic” alt=”My Picture”/>
CSS is an acronym for Cascading Style Sheets. CSS is used to separate presentation and style from document markup content. It works by targeting your web page elements. CSS can target and style native elements like your body tag or all <p> tags on the page. It can also be made to target specific individual page elements or a group of labeled elements, as long as you give those elements the appropriate class name or identifier.
CSS specifications and validation services are maintained by W3C. It is primarily used in XHTML web documents, but can also work for any kind of XML document, allowing you the ability to create XML based data structures that are well organized and styled. As a webmaster and web applications creator I use external CSS files to style my web pages and help me to keep web site maintenance or changes easy. Separating content from style becomes more important the more dynamic your applications become, and the larger your websites become.
Person |
Country |
City |
|
Juan
|
Mexico
|
Tijuana
|
|
Susan
|
United Kingdom
|
London
|
|
Frank
|
United States
|
New York
|
|
Welcome to my web page. Here is a picture of my pet
|
|||
|
Code:
|
<a href=”contact_us.html”>Contact Us</a>
|
|
Code:
|
<a href=”folder_name/contact_us.html”>Contact Us</a>
|
|
Code:
|
<a href=”../parent_folder/anyfile.html”>Link to file in parent folder</a>
|
Link to another website
|
Code:
|
<a href=”http://www.srdesigner.6te.net/”>www.srdesigner.6te.net</a>
|
|
Code:
|
<a href=”my_pic.jpg”><img src=”my_pic.jpg” alt=”Image Link” /></a>
|
|
Code:
|
<a href=”mailto:shankerramchand@yahoo.com”>
www.srdesigner.6te.net </a> |
|
Code:
|
<a href=”mailto:shankerramchand@yahoo.com?subject=Add me to your mailing list&body=Hello, please add me to your list.”>
Join Mailing List </a> |
|
Code:
|
<a name=”doc_point_1″></a>
|
|
Code:
|
<a href=”index.html#doc_point_1″>Go to my Point 1</a>
|
