Building a Website (v2) Options

[superfireydave]

~removed~

This post has been edited by superfireydave: Oct 25 2012, 07:22 PM

[Brock]

Noice. Thanks a bunch for this!

[Girvo]

Solid effort man :)

[Brock]

Hey Dave, I have a question!

I noticed that in your background.jpg file you have incorporated the white background for the text content to sit, is there any reason for this? Would it be a better idea to create a separate DIV wrapped around the content boxes, at 760px wide with a white background, center it horizontally, and give it top and bottom margins, so that the height of it can expand if you make extensive changes to the text etc.?

Overall, very helpful tutorial :) helped me understand the box model a lot better!

[superfireydave]

The reason the background is included is that this was designed to be a pretty simple exercise. I didn't want people to have to dick around trying to get the background images lining up.
In this example, the content is fixed, so there's no need to expand it.

However, in a real situation, you'd want to do pretty much what you said. I'll be covering that, and navigation in the second part :))

[Brock]

Awesome :)

[Mr.Twinkie]

Thank you for your work.

The finished page should look like this one: http://www.davidlumley.com.au/projects/htm...d_css_tutorial/
You can download the images and the empty html/css files here: http://www.davidlumley.com.au/projects/htm...orial_empty.zip
Or the final html/css files with images here: http://www.davidlumley.com.au/projects/htm...al_finished.zip

The links gives you 404 not found. :(

Other then that the info you provided is great helps. Thanks!

This post has been edited by Mr.Twinkie: Jun 13 2011, 05:36 PM

[Redhatter]

CODE

<div class="section">
    <img id="main_image" src="images/image.jpg" width="710" height="160" alt="my first image">
    <div class="box_section">
    </div>
</div>

The width and height attributes of the img tag are fairly self explanatory, but the alt attribute isn't.

The alt attribute is what is shown when the image can't be displayed, and is what gets read aloud to screenreaders. Making sure you give all your images descriptive alt tags is important for accessibility, and will make your site of higher quality to search engines too.

You'll notice we also gave the <img> tag an ID. This is so we can manipulate this particular image later with CSS.

That should be &lt;img&gt; :-) Otherwise, good tutorial.

[SledgY]

A couple of points:

Example is using the HTML 5 doc type so...

• Instead of using <div class="section"> and <div id="header"> use <section> and <header>.

• Use unordered lists (the li tag) for any navigation lists you have (like your primary navigation) because semantically, these are a list of links. As with everything else, you can alter the formatting using CSS.

  Except in HTML 5 when you should use the <nav> and <menu> tags.

Yes older versions of IE will not recognise HTML5 tags but that can be fixed with modernizr.

For placing example images may I recommend placekitten.com or dummyimage.com.

Other recommended links:

• html5boilerplate.com
• diveintohtml5.org

This post has been edited by SledgY: Jun 15 2011, 01:38 PM