Wow HTML 5 is amazing!

sequencehosting · #1 (**permalink**) 10-31-2009, 06:01 PM

Hey everyone!

I took a look at some HTML 5 videos and one of them used this as a example.

http://www.youtube.com/html5

It's a Youtube mock-up created in HTML 5/CSS/Javascript. Looking at the source code it isn't too hard to understand. Remember the <header><nav><article><section><video><footer> are some of the new tags in HTML 5 that this Youtube mock-up is using.

Im certainly going to learn HTML 5 at some point soon!

Johnny · #2 (**permalink**) 11-11-2009, 04:35 PM

A few thoughts on what you said:

1) More than likely, you probably won't really need to "learn" a whole lot about HTML5. If you're comfortable writing valid XHTML now, HTML5 is essentially exactly what you're already doing (plus a few nifty new tags, as you eluded to).

2) DO NOT rush to switch everything over to the HTML5 doctype. Only the most modern browsers support it, and as I'm sure you well know, average end users are generally VERY slow to update (people happily continue to use IE6, right?

).

2a) In typical brash, abrasive Microsoft fashion, Internet Explorer (even the newest version) has little to no support for most of the neatest HTML5 concepts. As you've probably guessed, they have no plans to do so any time soon.

3) Perhaps equally, if not more exciting than HTML5, is CSS3. Head on over to www.css3.info with a CSS3-capable browser (Firefox 3.5+, Opera 10, new Chrome or Safari) and prepare to be amazed. Column support, text-shadows, curved borders, and (my favorite) support for embeded fonts via @font-face are really exciting glimpses of the future (as well as the HTML5 <canvas> tag, but I digress).

3a) See 2 and 2a, only substituting 'CSS3' for 'HTML5.'

sequencehosting · #3 (**permalink**) 11-11-2009, 04:54 PM

Quote:

Originally Posted by Johnny

A few thoughts on what you said:

1) More than likely, you probably won't really need to "learn" a whole lot about HTML5. If you're comfortable writing valid XHTML now, HTML5 is essentially exactly what you're already doing (plus a few nifty new tags, as you eluded to).

2) DO NOT rush to switch everything over to the HTML5 doctype. Only the most modern browsers support it, and as I'm sure you well know, average end users are generally VERY slow to update (people happily continue to use IE6, right?

).

2a) In typical brash, abrasive Microsoft fashion, Internet Explorer (even the newest version) has little to no support for most of the neatest HTML5 concepts. As you've probably guessed, they have no plans to do so any time soon.

3) Perhaps equally, if not more exciting than HTML5, is CSS3. Head on over to www.css3.info with a CSS3-capable browser (Firefox 3.5+, Opera 10, new Chrome or Safari) and prepare to be amazed. Column support, text-shadows, curved borders, and (my favorite) support for embeded fonts via @font-face are really exciting glimpses of the future (as well as the HTML5 <canvas> tag, but I digress).

3a) See 2 and 2a, only substituting 'CSS3' for 'HTML5.'

I do agree Johnny. Since posting this I have been researching a bit. It seems like it's going to be a good 5+ years before anyone even thinks about using HTML 5. Although I certainly won't be changing to HTML 5 I do like some of the new features. I’m not a big fan of the header, footer and content tags because I don't see what is wrong with divs. I'm going to take a look at your link, thanks. I have come across shadowing elements but font? wow! Curved borders will also save so much time instead of creating a top section, middle section and bottom section just to get a curved box etc

Hey Johnny do you mind if I ask you a quick PHP question?

PHP Code:


			
$mail_body = "Hello,



example example exampleexample example exampleexample example example:



1. example example example\n

2. example example example\n

3. example example example\n

4. example example example\n

5. example example example\n

6. example example example\n

7. example example example.\n



example example example example example example example example example example example example"; //mail body

I have a PHP that runs through Cron everyday to send emails to various accounts. I would like to know if I could add HTML inside this. This is the body of an email. I know I can use HTML with PHP but I'm not sure if I can use it in the body of this email.

All I want to add to the email is my logo.

<img src="mylogo.png" width="200" height="100" alt="My logo" />

Thanks very much!

Johnny · #4 (**permalink**) 11-11-2009, 05:49 PM

Hah, you know I'm a sucker for the PHP questions!

The short answer is yes... but you should know by now that I'm also a sucker for long answers, so here it goes:

Adding HTML to emails is really just that easy, with one catch: the message headers.

I'm going to assume that you know how PHP's mail() function works, more or less, since you're already running PHP through Cron, which isn't exactly newbie territory.

So as you've [probably] seen, the function is something like this:

PHP Code:


			
mail($recipient, $subject, $mail_body[,$from, $headers]);

Notice the additional $headers variable? It's totally optional and mail() will work just fine without anything there (probably what you're doing now). By not specifying headers, you are simply telling PHP to send the message as plain-text.

Now take a look at the $from variable. You probably have yours set as something like 'From: me@mysite.com'. What you probably didn't realize is that this is actually a mail header. PHP just sort of tries to make it easier by hiding this fact.

What we need to do to enable HTML tags in our $mail_body to be parsed (assuming that the recipient's e-mail client is able to), is to modify our headers. Instead of specifying an extra field in the mail() function for the headers, we're going to take a shortcut and combine the $from and $headers fields (which PHP does in the end anyways):

PHP Code:


			
$to = 'john@example.com';
$subject = 'Whoa, An HTML E-Mail!';
/**
 * The part bellow will look new. See how the $mail_body contains HTML?
 * Just make sure you make your img src="" an absolute URL (http://...), 
 * since whoever is reading your message won't be on your server.
 *
 * After the message are our new headers, you should get the gist.
 */
$mail_body = "
<h2>Look at me!</h2>
<p>I'm a freakin' paragraph. Inside an e-mail. <b>Sweet.</b></p>
<p>Here's a picture:</p>
<p><img src=\"http://mysite.com/images/mypic.jpg\" /></p>
";
$from = 'From: me@mysite.com';
// We need to add a line break (\n) so e-mail clients understand we have multiple headers
$headers  = $from . "\n";
// Now tell the e-mail client that our message isn't plain-text
$headers .= 'MIME-Version: 1.0' . "\n";
// Finally, nicely explain that our message is HTML
$headers .= 'Content-type: text/html; charset=iso-8859-1' . "\n";
// Now just mail as normal!
mail($to, $subject, $mail_body, $headers);

And that's it! Let me know if anything is confusing you still.

sequencehosting · #5 (**permalink**) 11-12-2009, 07:11 AM

Thank you very much for your reply Johnny,

Yeah, I knew you were going to have a long detailed reply for any question mentioning PHP

Quote:

I'm going to assume that you know how PHP's mail() function works, more or less, since you're already running PHP through Cron, which isn't exactly newbie territory.

I am starting to understand it a bit more yes. Ah that is the thing, I bought a web-hosting book called "first 1000" and they provide many scripts etc

. Not just scripts I mean amazing scripts hehe. I do understand how to use Cron now, although it took a while to figure out why I was running the same Cron every minute

Thanks Johnny you have completely answered my question and I have just finished adding my HTML to the code.

I was wondering if I could also add HTML to a variable for example

$logo = "<img src="/logo.jpg" width="300" height="100" />";

$mail_body = "

$logo

One day I will understand PHP blah blah

";

I know there isn't much use for this but I'm just wondering if it would work. I know you can use links inside a variable but from what I have seen the links are just links minus the <a href=""></a> so maybe this isn't possible.

Thanks once again!

sequencehosting · #6 (**permalink**) 11-12-2009, 07:19 AM

Well I gave it a try and it didn't seem to work.

Quote:

Parse error: syntax error, unexpected T_CONSTANT_ENCAPSED_STRING in /home/concept/public_html/test.php on line 3

I guess the HTML interferes with everything else. This is the first PHP script I have ever done without looking at anything. I know it was as simple as it gets but I'm starting to understand more now.

Johnny · #7 (**permalink**) 11-12-2009, 11:41 AM

That is because you need to use single quotes around your HTML:

PHP Code:


			
$logo = '<img src="/logo.jpg" width="300" height="100" />';

As long as you wrap your HTML code with single quotes instead of double, you can put any tag your little heart desires in there.

You can also use something called 'heredoc' notation and not worry about quotes whatsoever... like this:

PHP Code:


			
$msg = <<<EOT

<p>I'm using 'single quotes,' "double quotes," and HTML!</p>

<p>...and it's totally legal!</p>

<p>Heck, I'll even throw in a $variable</p>

EOT;

sequencehosting · #8 (**permalink**) 11-12-2009, 12:37 PM

Quote:

Originally Posted by Johnny

That is because you need to use single quotes around your HTML:

PHP Code:


			
$logo = '<img src="/logo.jpg" width="300" height="100" />';

As long as you wrap your HTML code with single quotes instead of double, you can put any tag your little heart desires in there.

You can also use something called 'heredoc' notation and not worry about quotes whatsoever... like this:

PHP Code:


			
$msg = <<<EOT

<p>I'm using 'single quotes,' "double quotes," and HTML!</p>

<p>...and it's totally legal!</p>

<p>Heck, I'll even throw in a $variable</p>

EOT;

Thanks so much Johnny,

After all the tutorials I have read saying "make sure you use single quotes", I still use double

I certainly won't forget that again.

I have 4 scripts than run by cron and when I receive the email it shows the cron command in the header. I would like to be able to edit the header of the email. Would you mind if I send you PM you the script quickly? If you could just say if it's possible that would be really helpful.

Thank you

Johnny · #9 (**permalink**) 11-12-2009, 01:54 PM

Hah, no problem good sir.

I love helping out people who are actually trying to learn, instead of just looking for easy/pre-made solutions.

But anyway...
Send that bad boy over and I'll hack around with it when I get the chance!

sequencehosting · #10 (**permalink**) 11-12-2009, 02:01 PM

Quote:

Originally Posted by Johnny

Hah, no problem good sir.

I love helping out people who are actually trying to learn, instead of just looking for easy/pre-made solutions.

But anyway...
Send that bad boy over and I'll hack around with it when I get the chance!

Thanks very much Johnny.

Yep I agree, I try to figure it out myself before I ask a question.

Ok PM heading your way.

WB Sponsors