Creating a Sample HTML5 Structure

 

TML5 is the thing that developers are starting to take a look more and more. More and more browsers are getting compatible with it and with the iPhone choosing this as it???s main multimedia language I have no doubt that this will be demanded in great quantities. In this post I will explain how to create a sample HTML5 structure for your web site.

<!DOCTYPE HTML>

<html lang="en">

<head>

<meta charset=utf-8>

<title>Sample HTML5 Structure</title>

<style>

header, nav, article, footer, address, section {

ξdisplay: block;

}

#container {

ξwidth:900px;

ξmargin:auto;

ξbackground-color:white;

}

header {

ξbackground-color:#666;

}

nav li {

ξdisplay:inline;

ξpadding-right:1em;

}

nav a {

ξcolor:white;

ξtext-decoration:none;ξ

}

nav a:hover {

ξtext-decoration:overline;ξ

}

h1, h2 {

ξmargin:0px;

ξfont-size:1.5em;

}

h2 {

ξfont-size:1em;

}

footer {

ξbackground-color:#999;

ξtext-align:center;

}

</style>

<script>

document.createElement("article");ξ

document.createElement("footer");ξ

document.createElement("header");ξ

document.createElement("hgroup");ξ

document.createElement("nav");ξ

</script>

</head>

<body>

<div id="container">

ξξξ <header>

ξξξ ξ<h1>Sample HTML5 Structure</h1>

ξξξξξξξ <nav>

ξξξξξξξξξξξ <ul>

ξξξξξξξξξξξξξξξ <li><a href="#">Home</a></li>

ξξξξξξξξξξξξξξξ <li><a href="#">About</a></li>

ξξξξξξξξξξξ </ul>

ξξξξξξξ </nav>

ξξξ </header>

ξξξ <section>

ξξξ ξ<hgroup>

ξξξξξξξ ξ<h1>Main Section</h1>

ξξξξξξξξξξξ <h2>This is a sample HTML5 Page</h2>

ξξξξξξξ </hgroup>

ξξξ ξ<article>

ξξξξξξξ ξ<p>This is the content for the first article</p>

ξξξξξξξ </article>

ξξξξξξξ <article>

ξξξξξξξ ξ<p>This is the content for the second article</p>

ξξξξξξξ </article>

ξξξ </section>

ξξξ <footer>

ξξξ ξ<p>This is the Footer</p>

ξξξ </footer>

</div>

</body>

</html>

As you can see the syntax is very similar, the start tags changed somewhat, but it makes it more convinient for the coder. Alsoas you can see now instead of making separate divs to stylize the header and footer, now HTML5 gives you a specified tag for each of them. The <nav> tag is the where your main site navigation will be at. You can also see the <section> tag, this will define the differents parts of your page, for example articles, blogroll, etc.ξ The <hgroup> tag is used to group various content heading, for example when you have an Article title and a Subtitle.

The JavaScript part of the code will create the tags so that older browsers and IE will accept them. This step is very important, if you do go ahead and skip it then older browsers will have trouble understanding your ode and the results will vary a lot.

Please leave any comments and/or suggestions below,

Gilberto Cortez

HTML5 Form Autocomplete Implementation

Technology is advancing very rapidly in the technology industry this last couple of years. A great and powerful new standard that was created and by which many of us developers are abiding already is HTML5. With this many opportunities came for us to be able to successfully create a user experience that is easily utilized by any visitor. One of the great tools that are on this library is the ability to AutoComplete forms, which at this time many of the major browsers already support. The browser with the biggest support of this feature is Google Chrome. Actually it was during one of Matt Cuts videos about it that I became familiar with it. Even if some of the browsers can perform this without implementation of any code I will highly recommended as you will be requesting exactly the information that you are looking for minimizing any room for user error. It is very simple to implement in any form without having to change any of the backEnd code, all that you have to do is add the attributeξx-autocompletetype.

Example:

<input type=”text” name=”fullName”ξx-autocompletetype=”name-full” />

The only thing that you have to be replacing will be the value of the attribute as it will be different for each input tag, you can find a complete list of them atξWHATWG Wiki, as well as the complete specifications of this new attribute. There is also a way to completely turn off this feature with the attribute “ξautocomplete=’off’ “, which might be useful for high security sites like bank portals or log in forms.

There are many mixed emotions in regard to form autocompletion on the web. Many say that it is a great security hazard as all of your personal and financial information is stored on your computer. However, on the contrary I do like the idea as anything that will help a visitor make it’s experience easier is good UX, and fortunately as well with the great advances in encryption we can rest secured that our information is safely stored. Please take a moment in the comment section below to let me know what you think about this topic as well as any other comments.

Send Form Contents to E-Mail

I took the time to do this post because I see a lot of students looking everywhere for a PHP E-Mail script, so here it is:

//Created byξGilbertoξCortez http://www.gilbertocortez.com

//Variables

$form = ???Contact Us???;//Form Name

//Inputs From Form

$name = $_POST[‘name’];

$email = $_POST[’email’];

$phone = $_POST[‘phone’];

$city = $_POST[‘city’];

$comments = $_POST[‘comments’];

//E-Mail Headers

$headers = ???From:???.$email. ???\r\n???;//From E-Mail Header

$headers .= ???Cc:ξdebugg@email.com??? . ???\r\n???;//Debugging E-Mail

$to = ???your@email.com???;//To Address

$subject = ???Message From ???.$form.??? Form???;//Subject Line

//Actual E-Mail Message

$message = ???You received a message from the form named: \???”.$form.???\???:

From: ???.$name.???

E-Mail: ???.$email.???

Phone #: ???.$phone.???

City: ???.$city.???

Comments: ???.$comments.???

???;

//Send E-Mail

mail($to,$subject,$message,$headers);

//Page Re-Direct

header (???Location: thankyou.html???);

Hope you like the script, I added notes to it for easier understanding. Just customize the variables up on top from the fields of your form and for your information. Also remember to add or remove them on the message itself if you change the number or name of the variables.

Any questions or comments are appreciated.

Resize iFrame for 100% Height

Today I was asked to create an iFrame to set up a private reporting system. Well when I tried to make it 100% height, it will only go for about 200px and the rest of the screen will be blank. Well here is the solution for that problem:

<!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>Reputation Managers Reporting System</title>

<script type=???text/javascript??? language=???javascript???>

function resize(){

var w = screen.width;

var h = window.innerHeight ??? 25;

var repsystem = document.getElementById(???repsystem???);

repsystem.height= h;

}

</script>

</head>

<body onload=???resize()??? onresize=???resize()???>

<table height=???100%??? width=???100%???>

<tr><td>

<iframe src=???iframe.php??? id=???repsystem??? height=???480px??? style=???width:100%; border: 0px solid #ffffff;???>

<p>Your browser does not support iframes.</p>

</iframe>

</td></tr></table>

</body>

</html>