Practices and Standards [June 18, 2011, 4:39 p.m.]
In HTML, there are a few nuances that must always be remember when developing your website.
Relative vs. Absolute URL Paths
There is two types of file paths: absolute and relative.
Absolute URL
Absolute file paths start from the highest level of the system you are working with. Online this is http:// followed by the domain i.e. wikipedia.org followed by the rest of the URL i.e. media/jpg/sample.jpg . All together "http://wikipedia.org/media/jpg/sample.jpg
Relative URL
Relative file paths start from the file you are writing. Everything that is in the same folder as your file is called just by its name i.e. "sample.jpg" If the file is in a folder below "media/sample.jpg". or "media/jpg/sample.jpg" if the file is in the jpg folder in the media folder. To go up a level you use ".../" followed by the file name. You can go up multiple levels using ".../.../"
Sidenote about Paths
Don't worry about paths too much. If you put all the files you are using in one folder, you can just call them by name.
When should I use absolute?
The only time absolute paths should be used is when are using content from other websites such as wikipedia, google, youtube, etc. Never use absolute paths for local files! As soon as your website is put online it will break.
Organizing Your Files
Standard practice in Web development is to keep all of the files for the website in one folder with the index.html(usually the homepage) at the top level(not inside a folder) this allows for simple relative paths. There is no standard for the organization of the files of the website. It is up to the developer(s) to organize their files whether all mixed together in the one folder or spilt by file type or content into folders in the site folder.
Naming your files
Use meaningful names! In addition your homepage should be index.html . index.html loads automatically when your website is called.
Code formatting
Although no standard is enforced, almost if not all teaching material as well as developers themselves push for organization in HTML files. HTML is a markup language. In other words, HTML's purpose is to describe the content. Below is an example of formatted code. Lorem Ipsum is used for sample text. Lorem Ipsum is standard dummy text.
<h1>Title</h1> <h2>Subtitle 1</h2> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam massa metus, fermentum a accumsan eu, ullamcorper eu dolor. Nam nec odio non felis mollis semper. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Quisque porttitor odio vel nisi ornare facilisis. Ut luctus ornare augue sit amet ullamcorper. </p> <h2>Subtitle 2</h2> <p> Integer elementum porttitor mauris, non blandit turpis volutpat nec. Maecenas sagittis, tortor venenatis tincidunt tincidunt, sem leo ultrices risus, et consectetur nunc nibh ac justo. Donec convallis porta purus eget cursus. Nam non velit lectus. Aliquam vel orci tortor. </p> <p> Contact Info </p>
These are just a few of the ideas to keep in mind while developing in HTML.