Jump to content
xisto Community
Sign in to follow this  

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

Recommended Posts

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.

Share this post

Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  

  • Create New...

Important Information

Terms of Use | Privacy Policy | Guidelines | We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.