Include CSS and JavaScipt in the functions.php.
Create an empty PHP file, call it header.php, and yes wp_head() goes just before </head> not before <body> tag.
<!DOCTYPE html>
<html>
<head>
<title>Website</title>
<link href="https://wordpress.stackexchange.com/questions/222452/style.css" rel="stylesheet" type="text/css" />
<?php wp_head(); ?>
</head>
Create an empty PHP file, call it footer.php and place your footer there:
<footer>
<!-- SOME CONTENT -->
</footer>
<!-- HERE I PLACE MY JS FILES -->
</body>
</html>
In functions.php:
function my_scripts_styles() {
wp_enqueue_script('jquery_flexslider_js', get_template_directory_uri() . '/js/jquery.flexslider.min.js', array('jquery'),'3.0.0', true );
wp_enqueue_style('flexslider_css', get_template_directory_uri() . '/css/flexslider.css', false ,'3.0.0');
}
add_action('wp_enqueue_scripts', 'my_scripts_styles');
With wp_enqueue_script() add JavaScript, the last argument true means it will be placed at the bottom. You need to give it a unique name e.g. flexslider_js_my. Include as many js files as you need.
With wp_enqueue_style() you add CSS files. The last argument false means it will be placed in the header. Give it a unique name, include as many as you need.
The rest of your code stays in index.php. header.php, footer.php, functions.php they are all in the home directory where your index.php is.
index.php:
<?php get_header(); ?>
<body>
<header>
<!-- MENU AND STUFF -->
</header>
<main>
<!-- HERE STOPS HEADER PHP ? -->
<!-- SOME CONTENT -->
<!-- HERE STARTS FOOTER PHP? -->
</main>
<footer>
<!-- SOME CONTENT -->
</footer>
<!-- HERE I PLACE MY JS FILES -->
</body>
<?php get_footer(); ?>
Btw, in your case you don’t need to include <?php /* Template Name: Contact Template */ ?> at the top. You can do just like in my example.
Update, the template name:
In my case get_page_template() will output the whole template path for example:
/homepages/133/htdocs/dd/myheme/wp-content/themes/authentic/page.php
where ‘authentic’ is my template name. So the if construct to include in functions.php:
$url = get_page_template();
$parts = explode("https://wordpress.stackexchange.com/", $url);
$name = $parts[count($parts) - 2];
if('authentic' == $name) {
wp_enqueue_style('homeCSS', get_template_directory_uri() . '/css/home.css', false ,'3.0.0');
}