What and how do i use are IDs in web design?

I'm currently designing a website and i was told to seperate the elements into IDs. What does this mean and how is this done?

What and how do i use are IDs in web design?
CSS has been mentioned my other posters, but I'd like to go into a bit more detail as to why giving elements an ID attribute is so handy...





Sample HTML:


%26lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"%26gt;





%26lt;html lang="en"%26gt;


%26lt;head%26gt;


%26lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8"%26gt;


%26lt;title%26gt;Sample layout%26lt;/title%26gt;


%26lt;/head%26gt;


%26lt;body%26gt;


%26lt;div id="Container"%26gt;


%26lt;div id="Header"%26gt;


%26lt;ul id="TopNav"%26gt;


%26lt;li%26gt;%26lt;a href="http://www.microsoft.com/"%26gt;Microso...


%26lt;li%26gt;%26lt;a href="http://apple.com/"%26gt;Apple%26lt;/a%26gt;%26lt;/li%26gt;


%26lt;li%26gt;%26lt;a href="http://www.adobe.com/"%26gt;Adobe%26lt;/a%26gt;%26lt;/...


%26lt;li%26gt;%26lt;a href="http://www.macromates.com/"%26gt;Macrom...


%26lt;/ul%26gt;


%26lt;/div%26gt;





%26lt;div id="Main"%26gt;


%26lt;p%26gt;Main content%26lt;/p%26gt;


%26lt;/div%26gt;





%26lt;div id="Footer"%26gt;


Copyright 2006, My Company Inc.


%26lt;/div%26gt;


%26lt;/div%26gt;


%26lt;/body%26gt;


%26lt;/html%26gt;





Ok, so that is fairly straightforward html for a list of links as a navigation bar. Let's make it look nicer with some CSS.





Sample CSS:


html {


font: 12px/1.6em Arial, sans-serif;


}





#Container {


width: 500px;


margin: 0 auto;


padding: 0;


}





#Container #Header {


background: #f3f3f3;


border-bottom: 3px solid #09c;


}





#Container #Header #TopNav {


font-size: 1.2em;


margin: 0 15px;


padding: 0;


}





#Container #Header #TopNav li {


display: inline;


padding-right: 5px;


}





#Container #Main,


#Container #Footer {


padding: 0 15px;


}





To use this CSS, insert this within the 'head' tag:


%26lt;style type="text/css"%26gt;





%26lt;/style%26gt;





and put your CSS in between the start and end 'style' tags.





Cool! Now it looks a bit tidier with some basic text formatting, the header has also been separated from the main area with a little blue bar. All by targetting the element IDs in CSS.





Ok, what else can we do with IDs, other than styling with CSS? How about some javascript?





With the following javascript I'll get a reference to the "Header" element, then get a reference to all link elements within that. Then I'll add what's known as an "Event listener" to call the "alert" function with that elements URL each time any link is clicked.





Sample javascript:


function init() {


var topNav,topNavLinks;


topNav = document.getElementById('TopNav');


topNavLinks = topNav.getElementsByTagName('a');





for (var i=0; i %26lt; topNavLinks.length; i++) {


topNavLinks[i].onclick = function(el) {


alert('My URL is '+this.getAttribute('href'));


return false;


}


};


}





window.onload = init;





To use this javascript, insert this within the 'head' tag:


%26lt;script type="text/javascript"%26gt;





%26lt;/script%26gt;





and put your javascript within the start and end 'script' tags.





There you go now. For any future questions I suggest you sign up to the forums at http://www.sitepoint.com/forum/. They have forums for general web design, javascript programming as well as more advanced topics.





Good luck, and have fun!
Reply:Dont forget that ID's should only be called once on a page - as opposed to classes which can be called as many times as you wish.





For example - you use the id="bluebox" more than once on page it wont be considered valid mark up. But if you created it as a class in CSS, then you could call it as many times as you wanted without it affecting your validated mark up.





This is a guidline only, it wont stop your page working, but if you intend to build a page using valid mark up, then it wont be valid.





Validation is very important these days. As is cross browser compatibilty.





Hope this helps
Reply:IDs is what you name a control or html tags. It makes one input box different from the next.


example:


%26lt;input type="text" id="txtMain" name="txtMain" style="width:300px;" /%26gt;


%26lt;input type="text" id="txtMain2" name="txtMain" style="width:300px;" /%26gt;


although, you would use name to refer to each textbox, you would use id to format using cascading style sheets (CSS). CSS is a way you can alter the look of your code, like color, font-size, size, etc.
Reply:Well In FrontPage you right click for example on a table and table properties%26gt;Style. On ID name it something, whetever you want


or the HTML


%26lt;table border="1" width="100%" id="hello2"%26gt;


The "ID=" tag means the ID name and "hello" is the ID name.


You can use it also for CSS to change the format of the object. Like Size, Color, etc
Reply:I think you're being told to use CSS. The idea is that instead of repeating lots of tags to do with the width of this and the padding of that, you define "classes" of tag, and then by simply linking this id to a tag, it automatically knows how much it should be spaced etc.





Ok, that was a poor explanation... just Google for CSS and it'll all become clear lol





Rawlyn.