Learning HTML5

[Renzatic]

So I've finally decided to get on board this whole HTML web design thing. It's something I've been meaning to do for awhile, but I've obviously taken my sweet time getting around to it.

I've discovered that it's not all that bad. Once you start understanding the syntax and structure, it starts making sense. The only problem I have is that it's slow. Just making a basic page of something I could whip up in 3 minutes in a word processor has taken me roughly 6 hours of learning to do.

The one thing I'm having the most trouble with is figuring out how to align and orient things on my webpage. I want to make it so that there's an image along the bottom of my nav bar that center aligns with my fake link text. Everything I try makes it jerk too far too the left, or too far to the right. I want more control over how I place things, but so far, I haven't been able to figure out how it works.

On top of that, I'm still trying to figure out how to align things in general. I'm using percentages rather than pixels, because that seems to make more sense to me in this day and age of multisized screens that lean more on PPI than they do raw resolution. Thing is, I'm not sure how HTML defines its ratios. I believe it's 3:4ish, a'la the iPad in portrait orientation, but that doesn't always seem to be the case. If I can't tell what 100% is, I obviously won't be able to tell what 35% of that is.

Here's a link to my current webpage. Yeah, it's only my 3rd attempt, so don't expect anything too grand. You can kinda see what I'm trying to do. The code in the style section is my 5th try to write something that'll get things to center properly, and the one that's currently there isn't doing anything. I have been able to get my picture in the body of the text to align, though only roughly.

I'm not expecting anyone to write my code out for me in breathless detail, but a few hints and tips, or a couple good links would be appreciated. Also, feel free to critique the code itself, because I want to know if I'm doing something wrong or stupidly, and it'd be nice to kill any bad habits I might be developing before they set in.

 

[960design]

Welcome.
Please host your webpage somewhere so that we can view it as intended.

Couple of pointers. You mentioned alignment and other things that html5 is NOT supposed to do.

Think of HTML as the content with little 'name tag' describing each section. For example you have some text, something like 'My Awesome Website' that you want centered at the top of the page. HTML holds the text and to keep within standards we place it in '<h1>' tags. HTML only at the most basic level handles how the text looks or is placed.

To make the text do what you want we use CSS. I would create a separate page named something like 'styles.css'. Inside the header of the html5 page I would point at the location of my styles.css page. Then use the CSS to modify how the site looks.

Check out the power of CSS over at ZenGarden: http://www.csszengarden.com/
That is one html page with designers only modifying the css page. See how differently each can look? More importantly see how the html is only the place holder.

You should be able to throw together an HTML5 page in 5 minutes. You could very well spend years tweaking the css ( styling ).

 

[Renzatic]

It is a webpage. I guess I should treat it as such, and post a link to it.

Here

I've since discovered exactly what you're telling me now, that CSS is the way to go for styling. In other words, HTML is for the raw text, while CSS is the layout editor.

In a weird, roundabout way, I have kind of touched on CSS already without realizing it. Though instead of including it on its own page, I've embedded all my styling into the header.

But anyway, I'm now following a structured set of tutorials, rather than just randomly banging out bits and pieces to see what they do, and how they work. So with that, and the link you provided, I should hopefully be able to make something a little more worth showing off.

Thanks.

 

[theluggage]

I've since discovered exactly what you're telling me now, that CSS is the way to go for styling. In other words, HTML is for the raw text, while CSS is the layout editor.

Good luck. Bear in mind as you struggle with CSS: it's not just you: it really is a train wreck and it doesn't actually let you properly separate content from layout - but its the closest thing we have to a standard.

At least you don't have to worry about supporting Internet Explorer 6 any more.

 

[NutsNGum]

It is a webpage. I guess I should treat it as such, and post a link to it.

Here

I've since discovered exactly what you're telling me now, that CSS is the way to go for styling. In other words, HTML is for the raw text, while CSS is the layout editor.

In a weird, roundabout way, I have kind of touched on CSS already without realizing it. Though instead of including it on its own page, I've embedded all my styling into the header.

But anyway, I'm now following a structured set of tutorials, rather than just randomly banging out bits and pieces to see what they do, and how they work. So with that, and the link you provided, I should hopefully be able to make something a little more worth showing off.

Thanks.

Good luck. Bear in mind as you struggle with CSS: it's not just you: it really is a train wreck and it doesn't actually let you properly separate content from layout - but its the closest thing we have to a standard.

At least you don't have to worry about supporting Internet Explorer 6 any more.

Or IE 7, and hopefully soon IE 8!