Learning Inline HTML

  • (3 Pages)
  • +
  • 1
  • 2
  • 3

33 Replies - 1908 Views - Last Post: 17 June 2013 - 08:23 PM

#1 charyl  Icon User is offline

  • D.I.C Regular

Reputation: 4
  • View blog
  • Posts: 324
  • Joined: 29-June 11

Learning Inline HTML

Posted 05 June 2013 - 07:37 PM

I am to make an email html. I have 5 days. I understand html and css, but in doing research I see you don't want to use css. does anyone know or understand inline html? I realize what I'm asking seems impossible to do in 5 days, but I know there are some geniuses on this site that can make this happen even if it's not complete, I will learn something that is very important for the future,,,,I always do. wether it is making code more eloquent, understanding different techniques or tutorials. I have a psd to work with and can attach a jpg for you to see if needed.

Thanks so kindly.

This post has been edited by charyl: 05 June 2013 - 07:40 PM


Is This A Good Question/Topic? 0
  • +

Replies To: Learning Inline HTML

#2 andrewsw  Icon User is online

  • Fire giant boob nipple gun!
  • member icon

Reputation: 3475
  • View blog
  • Posts: 11,812
  • Joined: 12-December 12

Re: Learning Inline HTML

Posted 06 June 2013 - 10:51 AM

Your description is confused. When creating an html-email you cannot use an internal or external css-stylesheet, as email-clients do not understand them. (There may be some that do, but most don't.)

Therefore, you need to use inline css-styles. Inline-html doesn't mean anything. (If anything, all html is inline.)

<p style="color:sienna;margin-left:20px">This is a paragraph.</p>

is an example of inline css-styles.
Was This Post Helpful? 3
  • +
  • -

#3 mb2000inc  Icon User is offline

  • D.I.C Regular
  • member icon

Reputation: 21
  • View blog
  • Posts: 354
  • Joined: 10-November 09

Re: Learning Inline HTML

Posted 06 June 2013 - 12:35 PM

View Postandrewsw, on 06 June 2013 - 01:51 PM, said:

Your description is confused. When creating an html-email you cannot use an internal or external css-stylesheet, as email-clients do not understand them. (There may be some that do, but most don't.)

Therefore, you need to use inline css-styles. Inline-html doesn't mean anything. (If anything, all html is inline.)

<p style="color:sienna;margin-left:20px">This is a paragraph.</p>

is an example of inline css-styles.



Another thing to consider:
When creating an HTML email, you would compose it like any other HTML page - BUT, you cannot put anything in the <head> tag. Like CSS links, or scripts.

The inline styling like andrewsw said, is the best way to go. For emails, I use either a simple table format or div format with inline styling.

Biggest thing to remember, if you're using divs that you want floating left and right, is to "clear" those divs afterward (as you would with any html/css styling and floating divs).

Tables, are just easier when it comes to HTML emails (in my opinion).

Do you have a sample that we can look at and help you out with?
Was This Post Helpful? 1
  • +
  • -

#4 andrewsw  Icon User is online

  • Fire giant boob nipple gun!
  • member icon

Reputation: 3475
  • View blog
  • Posts: 11,812
  • Joined: 12-December 12

Re: Learning Inline HTML

Posted 06 June 2013 - 12:45 PM

I would also guess that there are some css-rules that certain email-clients do not understand. I would, personally, make it as simple as possible, make sure it works, and then incrementally add other css-rules.

(If you are targeting a specific email tool then it may have some documentation that describes what the HTML and CSS should look like.)

This post has been edited by andrewsw: 06 June 2013 - 12:47 PM

Was This Post Helpful? 4
  • +
  • -

#5 Atli  Icon User is offline

  • D.I.C Lover
  • member icon

Reputation: 3719
  • View blog
  • Posts: 5,990
  • Joined: 08-June 10

Re: Learning Inline HTML

Posted 06 June 2013 - 12:49 PM

Yea, email clients are notoriously unreliable when it comes to styling. I know clients like Outlook and Thunderbird can handle some inline style blocks, but Gmail and other web-based solutions completely ignore them.

It's the only case where I don't object to using old-school methods like table layouts (to a degree) and some HTML styling tags, like <center>.

It'll take you forever to learn all the different support for the most popular clients, so if you only have five days, keep it extremely simple. - Code it like it's 1999 :)
Was This Post Helpful? 4
  • +
  • -

#6 andrewsw  Icon User is online

  • Fire giant boob nipple gun!
  • member icon

Reputation: 3475
  • View blog
  • Posts: 11,812
  • Joined: 12-December 12

Re: Learning Inline HTML

Posted 06 June 2013 - 12:55 PM

Quote

keep it extremely simple.


:^: The KISS principle.
Was This Post Helpful? 2
  • +
  • -

#7 Martyr2  Icon User is offline

  • Programming Theoretician
  • member icon

Reputation: 4333
  • View blog
  • Posts: 12,128
  • Joined: 18-April 07

Re: Learning Inline HTML

Posted 06 June 2013 - 12:58 PM

*
POPULAR

I thought I would add a nice little resource that has served me well. This site shows you what CSS styles will work for which email clients and thus can help make sure that you don't use anything that email clients can't understand.

http://www.campaignmonitor.com/css/

Hope it helps you as well! :)
Was This Post Helpful? 7
  • +
  • -

#8 charyl  Icon User is offline

  • D.I.C Regular

Reputation: 4
  • View blog
  • Posts: 324
  • Joined: 29-June 11

Re: Learning Inline HTML

Posted 06 June 2013 - 03:59 PM

View Postandrewsw, on 06 June 2013 - 12:51 PM, said:

Your description is confused. When creating an html-email you cannot use an internal or external css-stylesheet, as email-clients do not understand them. (There may be some that do, but most don't.)

Therefore, you need to use inline css-styles. Inline-html doesn't mean anything. (If anything, all html is inline.)

<p style="color:sienna;margin-left:20px">This is a paragraph.</p>

is an example of inline css-styles.



Thank you! And the lessons begin, In doing the research I read inline css-styles, but that verbiage wasn't sinking in, very good!
Was This Post Helpful? 0
  • +
  • -

#9 charyl  Icon User is offline

  • D.I.C Regular

Reputation: 4
  • View blog
  • Posts: 324
  • Joined: 29-June 11

Re: Learning Inline HTML

Posted 06 June 2013 - 04:05 PM

View Postmb2000inc, on 06 June 2013 - 02:35 PM, said:

View Postandrewsw, on 06 June 2013 - 01:51 PM, said:

Your description is confused. When creating an html-email you cannot use an internal or external css-stylesheet, as email-clients do not understand them. (There may be some that do, but most don't.)

Therefore, you need to use inline css-styles. Inline-html doesn't mean anything. (If anything, all html is inline.)

<p style="color:sienna;margin-left:20px">This is a paragraph.</p>

is an example of inline css-styles.



Another thing to consider:
When creating an HTML email, you would compose it like any other HTML page - BUT, you cannot put anything in the <head> tag. Like CSS links, or scripts.

The inline styling like andrewsw said, is the best way to go. For emails, I use either a simple table format or div format with inline styling.

Biggest thing to remember, if you're using divs that you want floating left and right, is to "clear" those divs afterward (as you would with any html/css styling and floating divs).

Tables, are just easier when it comes to HTML emails (in my opinion).

Do you have a sample that we can look at and help you out with?



I am beginning the code this evening and am nervous. I thought I read some were that you could not use div's with inline? but you could use the
<tb> or <td> 
for your tables? If that is not correct that would sure make my world easier. I could have that code wrong, I'll have to refer back to my html books.
Was This Post Helpful? 0
  • +
  • -

#10 charyl  Icon User is offline

  • D.I.C Regular

Reputation: 4
  • View blog
  • Posts: 324
  • Joined: 29-June 11

Re: Learning Inline HTML

Posted 06 June 2013 - 04:15 PM

View Postandrewsw, on 06 June 2013 - 02:45 PM, said:

I would also guess that there are some css-rules that certain email-clients do not understand. I would, personally, make it as simple as possible, make sure it works, and then incrementally add other css-rules.

(If you are targeting a specific email tool then it may have some documentation that describes what the HTML and CSS should look like.)



What do you think about this (do you think this would be 1/2 efficient) go ahead and start on the code, I need to cut the photo's out (jpgs or images) in photoshop and when I start getting closer, say set it up for Internet Exp. and then figure out the Firefox, Gmail...the first code shouldn't be that different? Do you think? Very good on checking as I go!

View PostAtli, on 06 June 2013 - 02:49 PM, said:

Yea, email clients are notoriously unreliable when it comes to styling. I know clients like Outlook and Thunderbird can handle some inline style blocks, but Gmail and other web-based solutions completely ignore them.

It's the only case where I don't object to using old-school methods like table layouts (to a degree) and some HTML styling tags, like <center>.

It'll take you forever to learn all the different support for the most popular clients, so if you only have five days, keep it extremely simple. - Code it like it's 1999 :)/>/>/>



LOL! thank you for that smile...good thought.

View PostMartyr2, on 06 June 2013 - 02:58 PM, said:

I thought I would add a nice little resource that has served me well. This site shows you what CSS styles will work for which email clients and thus can help make sure that you don't use anything that email clients can't understand.

http://www.campaignmonitor.com/css/

Hope it helps you as well! :)/>/>/>



Thank you so much! I have been saving a word doc of all my resources so I could refer back...much needed!!!

This post has been edited by charyl: 06 June 2013 - 04:22 PM

Was This Post Helpful? 0
  • +
  • -

#11 charyl  Icon User is offline

  • D.I.C Regular

Reputation: 4
  • View blog
  • Posts: 324
  • Joined: 29-June 11

Re: Learning Inline HTML

Posted 06 June 2013 - 04:24 PM

View Postcharyl, on 06 June 2013 - 06:15 PM, said:

View Postandrewsw, on 06 June 2013 - 02:45 PM, said:

I would also guess that there are some css-rules that certain email-clients do not understand. I would, personally, make it as simple as possible, make sure it works, and then incrementally add other css-rules.

(If you are targeting a specific email tool then it may have some documentation that describes what the HTML and CSS should look like.)



What do you think about this (do you think this would be 1/2 efficient) go ahead and start on the code, I need to cut the photo's out (jpgs or images) in photoshop and when I start getting closer, say set it up for Internet Exp. and then figure out the Firefox, Gmail...the first code shouldn't be that different? Do you think? Very good on checking as I go!

View PostAtli, on 06 June 2013 - 02:49 PM, said:

Yea, email clients are notoriously unreliable when it comes to styling. I know clients like Outlook and Thunderbird can handle some inline style blocks, but Gmail and other web-based solutions completely ignore them.

It's the only case where I don't object to using old-school methods like table layouts (to a degree) and some HTML styling tags, like <center>.

It'll take you forever to learn all the different support for the most popular clients, so if you only have five days, keep it extremely simple. - Code it like it's 1999 :)/>/>/>/>



LOL! thank you for that smile...good thought.

View PostMartyr2, on 06 June 2013 - 02:58 PM, said:

I thought I would add a nice little resource that has served me well. This site shows you what CSS styles will work for which email clients and thus can help make sure that you don't use anything that email clients can't understand.

http://www.campaignmonitor.com/css/

Hope it helps you as well! :)/>/>/>/>



Thank you so much! I have been saving a word doc of all my resources so I could refer back...much needed!!!

If I'm reading this website correctly in outlook and yahoo it supports the hover command, I had read that did not work as well.
Was This Post Helpful? 0
  • +
  • -

#12 andrewsw  Icon User is online

  • Fire giant boob nipple gun!
  • member icon

Reputation: 3475
  • View blog
  • Posts: 11,812
  • Joined: 12-December 12

Re: Learning Inline HTML

Posted 06 June 2013 - 04:26 PM

You don't test html-emails in browsers, you test them in email-clients: Gmail, Yahoo, Outlook.

If you want to include images then they need to be hosted at a web site:

<img src="http://somesite.com/images/mine.gif">

(bearing in mind that different clients may block images).

I would get it working without images first.
Was This Post Helpful? 1
  • +
  • -

#13 andrewsw  Icon User is online

  • Fire giant boob nipple gun!
  • member icon

Reputation: 3475
  • View blog
  • Posts: 11,812
  • Joined: 12-December 12

Re: Learning Inline HTML

Posted 06 June 2013 - 04:34 PM

There are a number of tools for testing html-emails. I notice ones named litmus, mailchimp, and at campaignmonitor.com.

https://litmus.com/email-testing

They generally cost something but most have free trials. (There may be free ones if you search "test html-email".)

Quote

If I'm reading this website correctly in outlook and yahoo it supports the hover command, I had read that did not work as well.

Again, I wouldn't worry about this until you get a basic email working. (Why would you be concerned about such things until you've created at least one successful email?)

This post has been edited by andrewsw: 06 June 2013 - 04:36 PM

Was This Post Helpful? 1
  • +
  • -

#14 charyl  Icon User is offline

  • D.I.C Regular

Reputation: 4
  • View blog
  • Posts: 324
  • Joined: 29-June 11

Re: Learning Inline HTML

Posted 06 June 2013 - 04:34 PM

here's a question. when you click on an email it takes you to either a website or the advertisement, wouldn't a lot of the code already be on the page it goes to? Or is publishing the site from an email will have different code than the site and how it appears online? I know that might sound silly to you.
Was This Post Helpful? 0
  • +
  • -

#15 andrewsw  Icon User is online

  • Fire giant boob nipple gun!
  • member icon

Reputation: 3475
  • View blog
  • Posts: 11,812
  • Joined: 12-December 12

Re: Learning Inline HTML

Posted 06 June 2013 - 04:49 PM

I don't understand your question (someone else might) but this page gives an introduction to the subject of html-emails if it is useful to you.
Was This Post Helpful? 1
  • +
  • -

  • (3 Pages)
  • +
  • 1
  • 2
  • 3