javascript - HTML: How to set up web page head and body with external file references -


i new html , programming , hope can me this.

i have written code first pages of website , upload these server test.

therefore know if basic structure of documents correct , comments on following:

  1. should add or change regarding document's head ?
  2. do include external style sheets right way , @ right position + correct start href "/" here ?
    (i read css should included before js better performance.)
  3. do include external js , jquery references right way , @ right position ?
    (i read js should included @ end of body better performance.)

notes: php / html pages of website saved separate files in same folder. folder contains sub folder "includes" stylesheet , functions file saved.

my html structure:

<!doctype html> <html lang="en">     <head>         <meta charset="utf-8" />         <meta name="viewport" content="width=device-width, initial-scale=1.0" />         <meta name="author" content="john doe" />         <meta name="description" content="created: 2015-06" />          <base href="http://www.myurl.com/" target="_self" />          <!-- jquery -->         <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js" type="text/javascript"></script>          <!-- css -->                 <link rel="stylesheet" type="text/css" href="includes/styles.css" />         <!-- css - font awesome -->         <link rel="stylesheet" type="text/css" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" />          <title>my page</title>     </head>      <body>         <!-- ... -->         <footer class="footer">                      <!-- ... -->         </footer>          <!-- javascript -->         <script src="includes/functions.js" type="text/javascript"></script>     </body> </html> 

many in advance, mike

  1. looks good. couple of minor things:

    • you should add <meta http-equiv="x-ua-compatible" content="ie=edge"> ensure don't msie compatibility mode issues.

    • you may add favicon definitions in head.

  2. yes, stylesheets belong in head. href depends on storing css files.

    • if want include stylesheet in same folder html file, use href="styles.css"
    • if want include stylesheet in folder, e.g. [css] folder, use href="css/styles.css"
    • if have html files in various folders , don't want rewrite hrefs time each html file, can start href slash indicate search should start "root" of server, e.g. href="/css/styles.css"
  3. move all js (including jquery) bottom of page, before closing body tag. unless there's strong reason why need js run before page starts displaying, should not have js in head.

there lot of things learn, can fun , rewarding. hope have enjoyable programming experience ahead. :)


Comments

Popular posts from this blog

facebook - android ACTION_SEND to share with specific application only -

python - Creating a new virtualenv gives a permissions error -

javascript - cocos2d-js draw circle not instantly -