0

http://www.abeautifulsite.net/whipping-file-inputs-into-shape-with-bootstrap-3/

In the "See in Action" section you can see the whole code is separated into 3 parts (HTML,CSS and JS). I'm new in working with asp.net. I know I can put css and js codes inside different files and have a web form which contains html and asp.net tags, But really I do not know how I can assemble the codes are shown in above page to get the correct output.

Any help please?

Improve this question

2 Answers 2

Reset to default
2

Simple straightforward example for a way they can all come together:

<html>
  <head>
    <style>
      /* PUT YOUR CSS HERE */
    </style>
   </head>
   <body>
     <!-- PUT YOUR HTML HERE -->
     <script>
      // PUT YOUR JS HERE
     </script>
   </body>
</html>

This way they all come together at one page, and can affect each other (Css can affect HTML, and JS can affect html & style (which means, it can also change the Css).

Note - the only one you really need in an HTML page is the HTML itself. you could add links to other resources you have written in other files instead of copypasting scripts if you already have the files pre-made, which is probably the better, more orginised approach to this - however the one I've written is more easy to understand if you're a novice, and is probably the best if it's your first time trying all these together. Good luck, new web dev, may the force be with you. (:

Improve this answer
Sign up to request clarification or add additional context in comments.

6 Comments

Putting script in the head tag is not a good idea as it will slow down the load time of the page, this is because the execution will halt at the point the script will load and if the script file size is large it will take longer time for the page to render. Therefor it is suggested to have the script tag at the bottom probably before the body ends.
@Novice Alright, I've changed it. Is this also true when you use linking via referances to JS resources?
Sorry for the typo the Script reference has to be before the end of body tag it is not valid to have it after the body tag inside the HTML tag. I am not sure what do you mean by reference to JS resources can you elaborate?
@novice In case i use referances to outer JS resources, would it be better to put them in the bottom of the body rather than what I'm used to see - in the head tag? edit - nvm, blex explained it in his answer.
@A.Abramov Both are fine if you wait for the document to be loaded in your script (eg: $(document).ready(...)). But if you put it in the head and directly do something like document.getElementById('x'), it won't find it. Putting your script at the bottom of the page will prevent this kind of errors.
|
2

Here is the file structure I usually use:

/
|_index.html
|
|_assets/
        |_css/
        |    |_style.css
        |
        |_ js/
             |_script.js

And my index.html generally looks like this:

<!doctype html>
<html>
<head>
  <title>Test page</title>
  <link rel="stylesheet" href="assets/css/style.css">
</head>
<body>
  <h1>Hello world!</h1>
  <script src="assets/js/script.js"></script>
</body>
</html>

Why is the CSS linked in the head tag?

Because I want the CSS to be loaded as soon as it can, so the user doesn't see an unstyled version of my page when it loads.

Why is the script called at the bottom of the page?

Because that way, I'm sure the whole document is loaded and parsed when I execute my script.

Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.