I am assigned a task to revise a website and at present I am working on index.html page. the previous coder has mixed a lot of javascript and CSS code in between and it is becoming difficult to read.
I want to know whether it is necessary to include tags and CSS code in between? What about PHP code? Where each must reside?
Edited:
If multiple javascript and CSS files are to be referenced, how to include in a single or tag?
Keep your javascript inside a separate file, keep your css inside a separate file and have them both referenced from within your HTML. The order of these referenced files relative to the HTML does not matter. As for the PHP, I wouldn't worry too much about it being mixed in with the HTML (just keep your functions, classes and other scripts in separate files and include them with PHP in the header).
If is the same CSS on each page, having an external file that caches helps to save bandwidth. If there are different rules intermixed with the HTML for different element types you may have some conflicts, but if you rewrite it, it will end up being a lot cleaner and easier to maintain later.
I like to keep a file structure like so:
index.php
/css
main.css
othercssfiles.css
/javascript
main.js
otherjsfiles.js
/template
header.php
footer.php
/scripts
functions.php
otherscripts.php
Then in my header file I would place HTML code referencing the files in the css and javascript directories. And in the root directory my index.php file would include(); the header at the top and the footer at the bottom.
"otherjsfiles.js" and "othercssfiles.css" can be used in cases where a single page may have a specific requirement, requiring a lot of css and javascript that most other pages don't need. It means other pages do not need to fetch unnecessary data and it keeps page specific code separate from the entire sites code.
I have found this an easy way to keep track of various aspects of the code that makes up a HTML page, but naturally you will find ways to organize it that makes sense to you.
Edited:
If multiple javascript and CSS files are to be referenced, how to include in a single or tag?
It would be better to combine them into a single file to conserve HTTP requests (which take time). Then you would just include those css and javascript files like normal.
<script type="text/javascript" src="/javascript/main.js"></script>
<link rel="stylesheet" href="/css/main.css">
Additionally it seems like you could use the services of a CSS beautifier for readability, a JavaScript beautifier for readability and a JavaScript minifier for when you are done reading it (keep the readable version) and want to save bandwidth. These tools are especially helpful when you are working on maintaining a website you did not create.
PHP coding allows you to have HTML/CSS interspersed with PHP code by using server tags like .
This is normal - it is very flexible and easy-to-get-started.
Your JavaScript should ideally be placed into a separate JS file and using the SCRIPT HTML tag to reference it. See the docs.
Your CSS should ideally be placed into a separate CSS file and use a STYLE HTML tag to reference it. Again, see the docs.
Rarely is there a valid reason for CSS be mixed into the HTML - a separate file is generally best.
With JavaScript: there may or may not be a good reason for it being mixed into the code. E.g. if a piece of script is dependant on running after one element of HTML is loaded and before another. This isn't a particularly good coding practice, but if you're updating an existing site you may be stuck with it.
In the end the only way to really tell is to pull it out and make sure the page still works.
As Sam said, keep JavaScript and CSS external, and reference items in the JavaScript by id rather than onclick= etc. Follow Yahoo, and put the CSS in the <head> and the JavaScript before the closing <body> tag.
For multiple JavaScript or CSS, use multiple <script> or <link> tags.
As for PHP, it's good practice to keep as much of the functionality in a separate include file, and just call functions etc. in the main HTML. This will aid maintainability greatly. Aim for simple loops, if/elses, and function calls, and nothing else.
If multiple javascript and CSS files are to be referenced, how to include in a single or tag?
You either reference each file using multiple tags or use a minifier like YUI compressor to create a single CSS and JS file from the originals.
The order of CSS styles is relevant, but only relative to other CSS styles. So, start by moving all CSS styling together (in the head section) in the same order as originally. That will make it somewhat less messy while defenitely not changing how the page works.
Then you can start looking at whether you can rearrange scripts and PHP code. What they output to the page directly is relevant, otherwise they can easily be rearranged.