Create A Xhtml, Css3 Valid Gallery With Javascript ;part 1

slacware · March 2, 2007

What were makingIn this tutorial, we will be creating a web page that can be used for a gallery, an easy way of showing your portfolio of works or photography, etc.The page will be coded in XHTML 1.0 Strict and CSS3 valid, our CSS won't even have any warnings on them apart from one.So the first thing we need to do is set up a base structure for the XHTML. Below is the code for this.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://forums.xisto.com/no_longer_exists/ xmlns="http://forums.xisto.com/no_longer_exists/ http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /><title>XHTML & CSS Gallery</title><link href="style.css" rel="stylesheet" type="text/css" /></head><body><div id="container">    <div id="heading"></div>    <div id="main">        <div id="left">                </div>        <div id="right">                </div>        <div id="clear"><!-- --></div>    </div></div></body></html>

As you can see, our DOCTYPE tells the browser that we are using XHTML 1.0 strict. What's the difference between HTML and XHTML? XHTML coding is a lot more clearer then HTML, since it all needs to be lowercase, it's horrible seeing uppercase tags such as these <META HTTP-EQUIV... nasty eh?Our CSS will be styling divs, our main base structure will all be used with id in mind, because we are only using them once. So what do these divs do for us?ContainerThis will contain everything in one, a simple way of keeping everything in order.headingThis will be our heading. For this tutorial, we'll just do a simple text heading which will come later.mainThe main area of our content, just will keep our content areas in order.leftThe left area of our content, we can add large previews of the images here.rightThe right area of our content, where we will add the thumbnails of our images.clearThis gets rid of any outstanding floating divs, it's crucial for floating divs to have this.

Notice from BuffaloHELP:

Please use proper BBcode when showing a programming code.

Sign In

Create A Xhtml, Css3 Valid Gallery With Javascript ;part 1

Recommended Posts

slacware 0

Share this post

Link to post

Share on other sites

Create an account or sign in to comment

Create an account

Sign in

Browse

Activity

Important Information