Once more unto the breach (HTML5) -...

May 16th, 2011 at 01:15 PM
User 184085 Photo

david wilson
Ambassador
1,707 posts

Some time ago I played with HTML5 to see how things went and posted them here, once again I sit to put bits out to cyberspace and hopefully learn along the way.

here is the code so far, and it will be on my SDrive for your perusal, hopefully my commenting in the code will give some insight as to what is going on and by all means jump in with any suggestions or ideas.


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="generator" content="CoffeeCup HTML Editor (www.coffeecup.com)">
<meta name="created" content="Mon, 16 May 2011 16:57:15 GMT">
<meta name="description" content="">
<meta name="keywords" content="">
<meta name="revised" content="" />
<title>Dave in Cyberspace</title>
<!-- load css files, reset first to clear out any lingering css, then styles for anything IE is too thick to see, then css3styles for the real meat -->
<link rel="stylesheet" href="css/reset.css" type="text/css" media="screen" />
<link rel="stylesheet" href="css/styles.css" type="text/css" media="screen" />
<link rel="stylesheet" href="css/css3styles.css" type="text/css" media="screen" />

<!-- yup another IE concession -->
<!--[if IE]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<style type="text/css">
/*test area for css code to tweak and then when working move to the css pages */

</style>
</head>
<!-- OK, off I go -->
<body>

</body>
</html>


Not much yet, but it validates clean :)

Now onto the background
Volunteering to help :)
http://www.tbaygeek.ca
My HTML play area
http://www.tbaygeek.ca/test/
May 16th, 2011 at 02:36 PM
User 184085 Photo

david wilson
Ambassador
1,707 posts

so I added the following HTML

<section id="main-content" class="border"> <!-- open up the section and assign the main-content ID and the border class to it -->
<!-- Description: Lorem Ipsum 500 Words
Additional Information: Random text filler.
Browsers: All -->
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vehicula, lorem sed hendrerit auctor, sapien dolor consectetur enim, nec pharetra odio orci nec massa. Duis suscipit elit libero, sit amet cursus ante. Mauris laoreet tellus in urna suscipit ornare. Aenean erat purus, commodo in aliquet et, aliquet at quam. Suspendisse commodo imperdiet dolor mattis scelerisque. Morbi blandit sem ac augue gravida sed vehicula augue blandit. Mauris hendrerit vestibulum faucibus. Integer tellus augue, adipiscing id commodo vitae, volutpat id nunc. Maecenas ultrices, ante a commodo rutrum, sapien purus consectetur nibh, id auctor erat lectus ac purus. Morbi id suscipit nunc. Vestibulum blandit turpis vel leo tempor sit amet sagittis odio convallis. Pellentesque elementum, urna vel sodales vehicula, tellus nunc suscipit nisi, eget semper elit orci sit amet risus. Suspendisse potenti. Mauris et nulla ut lectus luctus tristique vel quis risus. Nunc posuere mattis mi, ut iaculis ligula dictum nec. Maecenas at orci quis eros molestie eleifend. Suspendisse faucibus adipiscing risus, gravida ornare elit ullamcorper eget. Curabitur iaculis accumsan lorem id tincidunt.

Vivamus porta elementum velit vitae adipiscing. Aliquam ut sem metus. Morbi luctus dui et nisi convallis iaculis ut nec libero. Aliquam molestie, enim nec egestas pharetra, metus quam aliquet purus, eget pharetra elit enim sed velit. Mauris tortor ipsum, mattis eget auctor sit amet, semper in libero. Etiam luctus purus ipsum. Nulla ac turpis mi. Proin facilisis, erat id gravida bibendum, sapien sapien pretium massa, id fermentum eros risus ac ante. Donec sed urna augue, vitae mollis felis. Nulla diam erat, porttitor et tempor in, commodo fermentum elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Integer eleifend porta nibh, quis cursus orci aliquam sit amet. Fusce sollicitudin dignissim erat, quis tristique elit lobortis eu. In non lacus elit. Donec sem augue, sagittis vel feugiat ornare, imperdiet et tellus. Aliquam et gravida mauris. Phasellus neque dolor, tincidunt eu ornare ac, pretium nec tortor. In risus odio, congue id sagittis at, molestie at sapien. Vestibulum tempus elementum molestie. Sed risus libero, egestas ut vehicula id, auctor nec lacus. Phasellus quis aliquam dolor. Nullam gravida purus in nisl posuere hendrerit. Proin eget orci non quam adipiscing elementum.

Aenean quis lacus sed felis semper pretium id ac ligula. Cras vel ligula lorem, vel mattis ipsum. Maecenas eget justo ac tellus adipiscing pulvinar. Vivamus dui neque, bibendum eu iaculis sit amet, malesuada scelerisque nibh. Mauris convallis porttitor bibendum. Donec eget molestie orci. Etiam congue dictum varius. In hac habitasse platea dictumst. Aliquam justo erat, lacinia ac iaculis quis, blandit et orci. Donec tincidunt nisi in augue euismod egestas lobortis arcu blandit. Maecenas sed dui mauris, sed ullamcorper nisi. Proin posuere commodo elit vitae porta. Integer at nisl pharetra augue viverra luctus non eu velit. Nunc nec lorem a erat malesuada egestas. Nulla placerat ligula vel leo cursus rhoncus.

Suspendisse potenti. Integer faucibus lectus eget nunc bibendum semper. Ut viverra leo vel quam rhoncus eget tristique eros consequat. Pellentesque eu lacus et purus egestas mollis. Sed dictum convallis mollis. Pellentesque venenatis blandit sapien, sit amet.
</section>


and CSS

/*set the background of the HTML tag and then lay the background of the body tag over it */
html {background-image:url('images/htmlbackground.jpg'); background-repeat:repeat;}
body {background-image:url('images/bodybackground.png'); background-repeat:repeat-x;}

/* define a box to hold the main content of the site*/
#main-content /*define as an ID since it is only used once on a page */
{
display:block;
padding-top:10px; /*move it down a nudge to clear the gradient*/
margin-left:auto;
margin-right:auto;
width:1020px;
height:100%;
}
.border {border:solid; } /*define as a CLASS as I am going to use it lots on the page*/


and I think it's a good start (coffee time)
Volunteering to help :)
http://www.tbaygeek.ca
My HTML play area
http://www.tbaygeek.ca/test/
May 16th, 2011 at 02:42 PM
User 184085 Photo

david wilson
Ambassador
1,707 posts

So far the programs used are CC HTML Editor, DirectFTP (beta) and Photoshop.
Volunteering to help :)
http://www.tbaygeek.ca
My HTML play area
http://www.tbaygeek.ca/test/
May 16th, 2011 at 04:19 PM
User 42578 Photo

Mike
Ambassador
1,176 posts

David,
A recommendation.
In your content background, set an opacity of 60% or so, so that the content is separated from the page background. Then you can see the text much better.

Mike...
..........................................
http://www.wpdfd.com
May 16th, 2011 at 05:05 PM
User 122279 Photo

Inger
Senior Advisor
14,649 posts
Online Now

I agree with Mike on the content background.

One question: I checked the page against the validator, and it picked up a warning about the charset. I didn't understand why. Can someone explain in plain English?
Ha en riktig god dag!
Inger, Norway

My work in progress:
Components for Site Designer and the HTML Editor: https://mock-up.coffeecup.com
May 16th, 2011 at 05:07 PM
User 184085 Photo

david wilson
Ambassador
1,707 posts

Good idea, I was thinking over coffee that I might just give the content a background of white with opacity.

Nice to see my ideas are not to far out there :)
Volunteering to help :)
http://www.tbaygeek.ca
My HTML play area
http://www.tbaygeek.ca/test/
May 16th, 2011 at 05:10 PM
User 184085 Photo

david wilson
Ambassador
1,707 posts

Inger Eik wrote:
I agree with Mike on the content background.

One question: I checked the page against the validator, and it picked up a warning about the charset. I didn't understand why. Can someone explain in plain English?


That I don't know, this is all I get from validation:

Info Using experimental feature: HTML5 Conformance Checker.

The validator checked your document with an experimental feature: HTML5 Conformance Checker. This feature has been made available for your convenience, but be aware that it may be unreliable, or not perfectly up to date with the latest development of some cutting-edge technologies. If you find any issues with this feature, please report them. Thank you.
Volunteering to help :)
http://www.tbaygeek.ca
My HTML play area
http://www.tbaygeek.ca/test/
May 16th, 2011 at 05:13 PM
User 122279 Photo

Inger
Senior Advisor
14,649 posts
Online Now

This is what I see:

Info Using experimental feature: HTML5 Conformance Checker.

The validator checked your document with an experimental feature: HTML5 Conformance Checker. This feature has been made available for your convenience, but be aware that it may be unreliable, or not perfectly up to date with the latest development of some cutting-edge technologies. If you find any issues with this feature, please report them. Thank you.

Info Using Direct Input mode: UTF-8 character encoding assumed

Unlike the “by URI” and “by File Upload” modes, the “Direct Input” mode of the validator provides validated content in the form of characters pasted or typed in the validator's form field. This will automatically make the data UTF-8, and therefore the validator does not need to determine the character encoding of your document, and will ignore any charset information specified.

If you notice a discrepancy in detected character encoding between the “Direct Input” mode and other validator modes, this is likely to be the reason. It is neither a bug in the validator, nor in your document.
Ha en riktig god dag!
Inger, Norway

My work in progress:
Components for Site Designer and the HTML Editor: https://mock-up.coffeecup.com
May 16th, 2011 at 06:02 PM
User 184085 Photo

david wilson
Ambassador
1,707 posts

@Inger how are you passing the page to the validation?
Volunteering to help :)
http://www.tbaygeek.ca
My HTML play area
http://www.tbaygeek.ca/test/
May 16th, 2011 at 06:05 PM
User 184085 Photo

david wilson
Ambassador
1,707 posts

OK added css style classes:
.transparent35{background-color: rgba(255,255,255,0.35);}
.rounded {
-moz-border-radius-topleft: 25px;
border-top-left-radius: 25px;
-moz-border-radius-topright: 25px;
border-top-right-radius: 25px;
-moz-border-radius-bottomright: 25px;
border-bottom-right-radius: 25px;
-moz-border-radius-bottomleft: 25px;
border-bottom-left-radius: 25px;
}
.shadow{
-moz-border-radius: 5px;
border-radius: 5px;
-moz-box-shadow: 5px 5px 5px #706C6C;
-webkit-box-shadow: 5px 5px 5px #706C6C;
box-shadow: 5px 5px 5px #706C6C;
}


and applied them in the html with
<div id="main-content" class="shadow rounded transparent35">


i changed the original section tag to a div tag, just seemed to make more sense to me :)
Volunteering to help :)
http://www.tbaygeek.ca
My HTML play area
http://www.tbaygeek.ca/test/

Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.